Fix Nuxt SEO OG:IMAGE not found

.gitignore

@@ -1,14 +1,34 @@
-node_modules
-*.log*
+# Vs Code
+.vscode
+
+# Netlify
+.netlify
+
+# Directus
+.directus/data
+.directus/uploads
+
+# Nuxt dev/build outputs
+.output
+.data
 .nuxt
 .nitro
 .cache
-.output
-.env
 dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
 .DS_Store
-.vscode
-.eslintcache
-.netlify
-.directus/data
-.directus/uploads
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

.prettierrc

@@ -0,0 +1,25 @@
+  {
+    "arrowParens": "always",
+    "bracketSameLine": true,
+    "bracketSpacing": true,
+    "embeddedLanguageFormatting": "auto",
+    "endOfLine": "lf",
+    "htmlWhitespaceSensitivity": "ignore",
+    "insertPragma": false,
+    "jsxSingleQuote": false,
+    "printWidth": 80,
+    "proseWrap": "preserve",
+    "quoteProps": "as-needed",
+    "rangeEnd": 999999999,
+    "rangeStart": 0,
+    "requirePragma": false,
+    "semi": true,
+    "singleAttributePerLine": false,
+    "singleQuote": false,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false,
+    "vueIndentScriptAndStyle": false,
+    "plugins": []
+  }
+

agencyos-i18n.code-workspace

@@ -0,0 +1,8 @@
+  {
+    "folders": [
+      {
+      "path": "."
+      }
+    ],
+    "settings": {}
+  }

components/blocks/Hero.vue

@@ -1,33 +1,52 @@
 <script setup lang="ts">
-import type { BlockHero, BlockButtonGroup } from '~/types';
+import type { BlockHero, BlockButtonGroup } from "~/types";
+
+const { t } = useI18n();
 
 defineProps<{
-	data: BlockHero;
+  data: BlockHero;
 }>();
 </script>
 <template>
-	<BlockContainer class="relative grid gap-12 md:grid-cols-3">
-		<!-- Content -->
-		<div class="md:pt-12 md:col-span-2">
-			<TypographyTitle v-if="data.title">
+  <BlockContainer class="relative grid gap-12 md:grid-cols-3">
+    <!-- <h1 style="color: white">{{ data }}</h1> -->
+
+    <!-- Content -->
+    <div class="md:pt-12 md:col-span-2">
+      <!-- <TypographyTitle v-if="data.title">
 				{{ data.title }}
-			</TypographyTitle>
-			<TypographyHeadline v-if="data.headline" :content="data.headline" size="title" as="h1" />
-			<TypographyProse v-if="data.content" :content="data.content" size="lg" class="py-6 font-display" />
-			<BlocksButtonGroup v-if="data.button_group" :data="data.button_group as BlockButtonGroup" />
-		</div>
-		<!-- Image -->
-		<div
-			v-if="data.image"
-			class="overflow-hidden border lg:relative lg:h-full dark:border-gray-700 rounded-card"
-			:class="data.image_position === 'left' ? 'order-first lg:-ml-48 md:-ml-16' : 'lg:-mr-48 md:-mr-16 '"
-		>
-			<NuxtImg
-				v-if="data.image"
-				class="w-full overflow-hidden dark:brightness-90 max-h-[700px] h-full object-cover rounded-card"
-				:src="data.image as string"
-				alt=""
-			/>
-		</div>
-	</BlockContainer>
+			</TypographyTitle> -->
+      <TypographyTitle v-if="t('data.translations[0].title')">
+        {{ t("data.translations[0].title") }}
+      </TypographyTitle>
+      <TypographyHeadline
+        v-if="t('data.translations[0].headline')"
+        :content="t('data.translations[0].headline')"
+        size="title"
+        as="h1" />
+      <TypographyProse
+        v-if="t('data.translations[0].content')"
+        :content="t('data.translations[0].content')"
+        size="lg"
+        class="py-6 font-display" />
+      <BlocksButtonGroup
+        v-if="data.button_group"
+        :data="data.button_group as BlockButtonGroup" />
+    </div>
+    <!-- Image -->
+    <div
+      v-if="data.image"
+      class="overflow-hidden border lg:relative lg:h-full dark:border-gray-700 rounded-card"
+      :class="
+        data.image_position === 'left'
+          ? 'order-first lg:-ml-48 md:-ml-16'
+          : 'lg:-mr-48 md:-mr-16 '
+      ">
+      <NuxtImg
+        v-if="data.image"
+        class="w-full overflow-hidden dark:brightness-90 max-h-[700px] h-full object-cover rounded-card"
+        :src="data.image as string"
+        alt="" />
+    </div>
+  </BlockContainer>
 </template>

components/navigation/TheHeader.vue

@@ -1,73 +1,117 @@
 <script setup lang="ts">
+const { locale, locales, setLocale } = useI18n();
+
+// const switchLocalePath = useSwitchLocalePath();
+
+// const availableLocales = computed(() => {
+//   return locales.value.filter((i) => i.code !== locale.value);
+// });
+
+const currentLocale = computed({
+  get: () => locales.value.find((language) => language.code === locale.value),
+  set: (language) => {
+    setLocale(language.code);
+  },
+});
+
 const {
-	theme,
-	globals: { title },
+  theme,
+  globals: { title },
 } = useAppConfig();
 
 const {
-	data: navigation,
-	pending,
-	error,
+  data: navigation,
+  pending,
+  error,
 } = await useAsyncData(
-	'mainNavigation',
-	() => {
-		return useDirectus(
-			readItem('navigation', 'main', {
-				fields: [
-					{
-						items: [
-							'id',
-							'has_children',
-							'title',
-							'icon',
-							'label',
-							'type',
-							'url',
-							{
-								page: ['permalink', 'title'],
-								children: [
-									'id',
-									'title',
-									'has_children',
-									'icon',
-									'label',
-									'type',
-									'url',
-									{
-										page: ['permalink', 'title'],
-									},
-								],
-							},
-						],
-					},
-				],
-			}),
-		);
-	},
-	{
-		transform: (data) => data,
-	},
+  "mainNavigation",
+  () => {
+    return useDirectus(
+      readItem("navigation", "main", {
+        fields: [
+          {
+            items: [
+              "id",
+              "has_children",
+              "title",
+              "icon",
+              "label",
+              "type",
+              "url",
+              {
+                page: ["permalink", "title"],
+                children: [
+                  "id",
+                  "title",
+                  "has_children",
+                  "icon",
+                  "label",
+                  "type",
+                  "url",
+                  {
+                    page: ["permalink", "title"],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      })
+    );
+  },
+  {
+    transform: (data) => data,
+  }
 );
 </script>
 <template>
-	<header class="relative w-full mx-auto space-y-4 md:flex md:items-center md:space-y-0 md:gap-x-4">
-		<div class="flex items-center bg-gray-900 justify-between py-2 px-6 md:flex-1 rounded-card">
-			<NuxtLink href="/" class="py-2">
-				<Logo class="h-6 text-white" />
-				<span class="sr-only">{{ title }}</span>
-			</NuxtLink>
-			<nav class="hidden md:flex md:space-x-4 lg:space-x-6" aria-label="Global">
-				<NavigationMenuItem v-for="item in navigation?.items" :key="item.id" :item="item" />
-			</nav>
-			<div class="flex items-center justify-end flex-shrink-0 space-x-2">
-				<DarkModeToggle class="hidden text-gray-200 md:block hover:text-gray-400" bg="dark" />
-			</div>
-		</div>
+  <header
+    class="relative w-full mx-auto space-y-4 md:flex md:items-center md:space-y-0 md:gap-x-4">
+    <div
+      class="flex items-center bg-gray-900 justify-between py-2 px-6 md:flex-1 rounded-card">
+      <NuxtLink href="/" class="py-2">
+        <Logo class="h-6 text-white" />
+        <span class="sr-only">{{ title }}</span>
+      </NuxtLink>
+      <nav class="hidden md:flex md:space-x-4 lg:space-x-6" aria-label="Global">
+        <NavigationMenuItem
+          v-for="item in navigation?.items"
+          :key="item.id"
+          :item="item" />
+      </nav>
+
+      <!-- 
+        For dynamic route parameters 
+        https://i18n.nuxtjs.org/docs/guide/lang-switcher#dynamic-route-parameters -->
+
+      <!-- for :options, you can use availableLocales if you prefer to only show the available locales, intead of all locales -->
+      <USelectMenu
+        v-model="currentLocale"
+        :options="locales"
+        variant="none"
+        :ui-menu="{ width: 'w-max' }"
+        class="-mr-2">
+        <template #label>
+          <UIcon name="i-heroicons-language" class="text-xl" />
+        </template>
+        <template #option="{ option: language }">
+          <span class="truncate">{{ language.name }}</span>
+        </template>
+      </USelectMenu>
+
+      <div class="flex items-center justify-end flex-shrink-0 space-x-2">
+        <DarkModeToggle
+          class="hidden text-gray-200 md:block hover:text-gray-400"
+          bg="dark" />
+      </div>
+    </div>
 
-		<div class="hidden h-full gap-4 md:flex">
-			<UButton to="/contact-us" color="primary" size="xl">Let's Talk</UButton>
-			<UButton to="/portal" color="primary" variant="ghost" size="xl">Login</UButton>
-		</div>
-		<NavigationMobileMenu v-if="navigation" :navigation="navigation" />
-	</header>
+    <div class="hidden h-full gap-4 md:flex">
+      <UButton to="/contact-us" color="primary" size="xl">Let's Talk</UButton>
+      <UButton to="/portal" color="primary" variant="ghost" size="xl">
+        Login
+      </UButton>
+    </div>
+    <NavigationMobileMenu v-if="navigation" :navigation="navigation" />
+  </header>
 </template>

locales/i18n.config.ts

@@ -0,0 +1,42 @@
+export const i18n = {
+  // baseUrl set with runtimeConfig
+  legacy: false,
+  lazy: true,
+  defaultDirection: "ltr",
+  langDir: "locales/", // Let Nuxt i18n know the root directory of our translations
+  defaultLocale: "en-US", // default locale of your project for Nuxt pages and routings
+  strategy: "no_prefix", // no_prefix | prefix | prefix_except_default | prefix_and_default
+  compilation: {
+    strictMessage: false,
+    escapeHtml: true,
+  },
+  locales: [
+    //  Consider fetching the locales array from an API
+    {
+      code: "en-US",
+      name: "English",
+      iso: "en-US",
+      dir: "ltr",
+      file: "i18n.translations.ts", // add file name for each locale
+    },
+    {
+      code: "ar-SA",
+      name: "العربية (Arabic)",
+      iso: "ar-SA",
+      dir: "rtl",
+      file: "i18n.translations.ts",
+    },
+    {
+      code: "es-MX",
+      name: "Español (Mexico)",
+      iso: "es-MX",
+      dir: "ltr",
+      file: "i18n.translations.ts",
+    },
+  ],
+  detectBrowserLanguage: {
+    useCookie: true,
+    cookieKey: "i18n_redirected",
+    redirectOn: "root",
+  },
+};