feat(seo): og image #894
feat(seo): og image #894
Conversation
|
Caution Review failedThe pull request is closed. WalkthroughThe pull request introduces a new Open Graph image component and functionality to the application, enhancing its social media sharing capabilities. Key changes include the addition of a new Vue component for displaying Open Graph images, updates to localization files for English and French, modifications to ESLint configurations, and enhancements to the Nuxt.js configuration for image generation. Additionally, new dependencies are added to support these features, along with unit tests for the new component. Changes
Possibly related PRs
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (2)
nuxt.config.ts (1)
20-20: Consider moving this change to a separate PR.The addition of the
@nuxt/devtoolsmodule is a good change that enhances the development experience. However, it is not directly related to the PR objective of adding OG image support.Consider moving this change to a separate PR to keep the changes focused and maintainable.
app/components/OgImage/DefaultOgImage.vue (1)
25-26: Consider removing the empty<script setup>section.Since there is no JavaScript logic or component setup required, the empty
<script setup>section can be removed to keep the code clean and concise.In Vue 3, the
<script setup>section is optional when there is no JavaScript code to be executed.Apply this diff to remove the empty
<script setup>section:-<script setup> -</script>
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files ignored due to path filters (2)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yamltests/unit/specs/components/OgImage/DefaultOgImage/__snapshots__/DefaultOgImage.nuxt.spec.ts.snapis excluded by!**/*.snap
Files selected for processing (10)
- app/app.vue (1 hunks)
- app/components/OgImage/DefaultOgImage.vue (1 hunks)
- config/eslint/flat-configs/eslint.global-config.mjs (1 hunks)
- config/eslint/flat-configs/eslint.vue-config.mjs (1 hunks)
- modules/i18n/locales/en.json (1 hunks)
- modules/i18n/locales/fr.json (1 hunks)
- nuxt.config.ts (2 hunks)
- package.json (2 hunks)
- tests/unit/specs/components/OgImage/DefaultOgImage/DefaultOgImage.nuxt.spec.ts (1 hunks)
- tests/unit/utils/factories/composables/nuxt/useRuntimeConfig.factory.ts (1 hunks)
Files skipped from review due to trivial changes (2)
- config/eslint/flat-configs/eslint.vue-config.mjs
- modules/i18n/locales/fr.json
Additional comments not posted (17)
tests/unit/specs/components/OgImage/DefaultOgImage/DefaultOgImage.nuxt.spec.ts (4)
1-5: LGTM!The import statements are correctly used to bring in the necessary dependencies for testing the
DefaultOgImagecomponent.
7-13: LGTM!The
describeblock and themountDefaultOgImageComponentfunction are correctly set up to facilitate testing theDefaultOgImagecomponent.
15-17: LGTM!The
beforeEachhook correctly mounts a fresh instance of theDefaultOgImagecomponent before each test using themountDefaultOgImageComponentfunction.
19-22: LGTM!The test case correctly verifies that the
DefaultOgImagecomponent renders as expected by checking the truthiness of thewrapperand matching the rendered HTML against a stored snapshot.app/app.vue (1)
33-34: LGTM!The addition of the
defineOgImageComponent("DefaultOgImages")function call aligns with the PR objective of adding an og image. This change can enhance the application's social media sharing capabilities by ensuring that a specific image is used when content is shared, thereby improving the visual representation of the application on platforms that utilize Open Graph metadata.tests/unit/utils/factories/composables/nuxt/useRuntimeConfig.factory.ts (1)
123-144: LGTM!The addition of the "nuxt-og-image" configuration object to the
createFakeRuntimeConfigfunction is well-structured and comprehensive. It provides a wide range of settings for the module, allowing for granular control over its behavior.The properties in the configuration object are related to the module and follow a consistent naming convention. The
defaultsobject is a nice touch, providing default values for specific properties used by the module.Overall, this enhancement expands the functionality of the runtime configuration by accommodating the specific needs of the "nuxt-og-image" module.
nuxt.config.ts (3)
17-17: LGTM!The addition of the
nuxt-og-imagemodule aligns with the PR objective and enables Open Graph image generation.
79-79: Please clarify the reason for this change and its impact.The
buildCacheoption in theexperimentalsettings has been changed fromtruetofalse. This change could potentially affect build performance and behavior during development.Please provide more context on the reason for this change and its expected impact on the project.
81-89: LGTM!The addition of the
ogImageconfiguration aligns with the PR objective and enables Open Graph image generation based on the environment. The specified font weights will be used in the generated images.config/eslint/flat-configs/eslint.global-config.mjs (1)
35-35: LGTM!The addition of the
defineOgImageComponentproperty to theESLINT_GLOBAL_CONFIGobject is a good enhancement to the ESLint configuration. Marking it asREADONLYis also a good practice to prevent unintended modifications.This change aligns well with the PR objective of adding support for Open Graph images and is unlikely to introduce any issues.
package.json (2)
88-88: LGTM!Adding
@nuxt/devtoolscan enhance the development experience by providing useful debugging and inspection tools for Nuxt applications.
146-146: Looks good! Remember to configure and test the Open Graph images.Adding
nuxt-og-imagecan improve the application's social media sharing capabilities by generating Open Graph images. Please ensure that the generated images are properly configured and tested for various social media platforms.app/components/OgImage/DefaultOgImage.vue (4)
1-24: The template structure looks good!The template defines a well-structured layout for the default OG image component. It effectively uses Tailwind CSS classes for styling and positioning of elements. The usage of
$tfunction for internationalization of the heading content is a good practice.
6-10: Base64-encoded image usage is acceptable here.While using base64-encoded images directly in the template can increase the bundle size, it can be justified for a one-time use case like an OG image. It eliminates the need for an additional network request to fetch the image file.
However, if this image is reused in multiple places, consider extracting it to an external file.
12-14: Heading styling looks good!The usage of Tailwind CSS classes for styling the
<h1>element is appropriate. Thefont-blackclass provides the necessary font weight for a heading, and theshadow-mdandshadow-yellow-500classes add a nice visual effect.The custom font size of
4remusing arbitrary values is a valid approach in Tailwind CSS.
18-20: Subheading styling is consistent.The styling of the
<h3>element is consistent with the<h1>element, which maintains a cohesive design. The usage offont-boldfor font weight andleading-relaxedfor line height is suitable for a subheading.The shadow and text color classes are reused from the
<h1>element, ensuring consistency.modules/i18n/locales/en.json (1)
1614-1616: LGTM!The addition of the
DefaultOgImageentity withtitleanddescriptionproperties is a good way to provide metadata for Open Graph tags. This will help generate rich link previews when sharing the Werewolves Assistant on social media platforms. The chosen title and description accurately represent the tool.
|
## [1.33.0](v1.32.0...v1.33.0) (2024-10-01) ### 🚀 Features * **game-lobby:** player group organizer ([#893](#893)) ([83c76d8](83c76d8)) * **game:** prejudiced manipulator groups and victory screen ([#929](#929)) ([5a42531](5a42531)) * **positions-coordinator:** add helper for sorting positions ([#892](#892)) ([36cce97](36cce97)) * **seo:** og image ([#894](#894)) ([1ee976a](1ee976a)) ### 🎨 Styles * **accordion:** better expand and collapse icons ([#937](#937)) ([97b7ada](97b7ada)) ### ⚡️ Performances * **images:** better placeholder for images ([#936](#936)) ([df88300](df88300)) ### ✅ Tests * **speed:** improve test speed with shards and threads ([#928](#928)) ([3480fd2](3480fd2)) ### 🧹 Chore * **deps:** replace dependency eslint-plugin-vitest with @vitest/eslint-plugin ^1.0.1 ([#916](#916)) ([c8acbbe](c8acbbe)) * **deps:** update antoinezanardi/werewolves-assistant-api docker tag to v1.36.2 ([#890](#890)) ([8425de2](8425de2)) * **deps:** update dependency @faker-js/faker to ^9.0.2 ([#912](#912)) ([0566528](0566528)) * **deps:** update dependency @faker-js/faker to ^9.0.3 ([#915](#915)) ([6272855](6272855)) * **deps:** update dependency @nuxt/devtools to ^1.5.0 ([#900](#900)) ([4412f14](4412f14)) * **deps:** update dependency @nuxt/devtools to ^1.5.1 ([#913](#913)) ([2b66521](2b66521)) * **deps:** update dependency @nuxtjs/i18n to ^8.5.4 ([#896](#896)) ([7d1d599](7d1d599)) * **deps:** update dependency @nuxtjs/i18n to ^8.5.5 ([#906](#906)) ([6555c17](6555c17)) * **deps:** update dependency @nuxtjs/seo to ^2.0.0-rc.23 ([#920](#920)) ([c84cf63](c84cf63)) * **deps:** update dependency @nuxtjs/sitemap to ^6.1.0 ([#898](#898)) ([f63c128](f63c128)) * **deps:** update dependency @nuxtjs/sitemap to ^6.1.1 ([#917](#917)) ([c61da65](c61da65)) * **deps:** update dependency @pinia/nuxt to ^0.5.5 ([#930](#930)) ([bea1f85](bea1f85)) * **deps:** update dependency @pinia/testing to ^0.1.6 ([#931](#931)) ([2004a14](2004a14)) * **deps:** update dependency @types/howler to ^2.2.12 ([#909](#909)) ([b318370](b318370)) * **deps:** update dependency @vitest/eslint-plugin to ^1.1.4 ([#927](#927)) ([b9c9811](b9c9811)) * **deps:** update dependency cucumber-html-reporter to ^7.2.0 ([#935](#935)) ([042d4b0](042d4b0)) * **deps:** update dependency eslint to ^9.11.0 ([#904](#904)) ([7d98b4f](7d98b4f)) * **deps:** update dependency eslint to ^9.11.1 ([#911](#911)) ([2b5e37b](2b5e37b)) * **deps:** update dependency msw to ^2.4.9 ([#897](#897)) ([8e7eee4](8e7eee4)) * **deps:** update dependency nuxt-og-image to ^3.0.3 ([#922](#922)) ([8d0c2c3](8d0c2c3)) * **deps:** update dependency nuxt-og-image to ^3.0.4 ([#923](#923)) ([3250087](3250087)) * **deps:** update dependency ofetch to ^1.4.0 ([#905](#905)) ([bfe7b67](bfe7b67)) * **deps:** update dependency pinia to ^2.2.3 ([#932](#932)) ([755572c](755572c)) * **deps:** update dependency pinia to ^2.2.4 ([#934](#934)) ([1d5ac2b](1d5ac2b)) * **deps:** update dependency sass to ^1.79.2 ([#895](#895)) ([9c0893b](9c0893b)) * **deps:** update dependency sass to ^1.79.3 ([#903](#903)) ([5b34d74](5b34d74)) * **deps:** update dependency sass to ^1.79.4 ([#919](#919)) ([1422380](1422380)) * **deps:** update dependency semantic-release to ^24.1.2 ([#918](#918)) ([ee29ec1](ee29ec1)) * **deps:** update dependency tailwindcss to ^3.4.13 ([#908](#908)) ([25be207](25be207)) * **deps:** update dependency ts-case-convert to ^2.1.0 ([#924](#924)) ([345c432](345c432)) * **deps:** update dependency vue to ^3.5.10 ([#914](#914)) ([15a32d3](15a32d3)) * **deps:** update dependency vue to ^3.5.7 ([#901](#901)) ([bc652b1](bc652b1)) * **deps:** update dependency vue to ^3.5.8 ([#907](#907)) ([2b901f5](2b901f5)) * **deps:** update playwright monorepo to ^1.47.2 ([#902](#902)) ([a1984f2](a1984f2)) * **deps:** update pnpm to v9.11.0 ([#899](#899)) ([b94c5b5](b94c5b5)) * **deps:** update stryker-js monorepo to ^8.6.0 ([#925](#925)) ([1c993e8](1c993e8)) * **deps:** update typescript-eslint monorepo to ^8.7.0 ([#910](#910)) ([1fb5c34](1fb5c34)) * **deps:** update typescript-eslint monorepo to ^8.8.0 ([#933](#933)) ([026e00b](026e00b)) * **link-checker:** remove useless dep ([#926](#926)) ([9916e51](9916e51))
|
🎉 This PR is included in version 1.33.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Summary by CodeRabbit
Release Notes
New Features
Bug Fixes
Tests