test: schema.org

.npmrc

@@ -1,2 +1,3 @@
 shamefully-hoist=true
 strict-peer-dependencies=false
+registry=https://registry.npmjs.org/

components/theCard.vue

@@ -17,7 +17,7 @@
       </ul>
     </div>
     <div class="card-hero">
-      <img :src="cardHeroImagePath" alt="" loading="lazy" />
+      <img :src="'/portfolio/' + cardHeroImagePath" alt="" loading="lazy" />
     </div>
   </div>
 
@@ -32,7 +32,7 @@
       </ul>
     </div>
     <div class="card-hero">
-      <img :src="cardHeroImagePath" alt="" loading="lazy" />
+      <img :src="'/portfolio/' + cardHeroImagePath" alt="" loading="lazy" />
     </div>
   </div>
 </template>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "portfolio",
-  "version": "2.3.32",
+  "version": "2.4.0",
   "description": "Neil's Portfolio",
   "author": "Neil Lin",
   "private": true,

pages/index.vue

@@ -9,9 +9,49 @@
 
 <script setup lang="ts">
 const { t } = useI18n();
+const route = useRoute();
+const store = useMobileMenuStore();
+const { locale } = useI18n();
+const workList = ref<any[]>([]); // 初始化為空陣列
+const runtimeConfig = useRuntimeConfig();
+
+onMounted(() => {
+  nextTick(async () => {
+    const apiPath =
+      locale.value === "en" ? "/data/enUS.json" : "/data/enZhHantTW.json";
+    const { data, error } = await useFetch(apiPath);
+
+    if (error.value) {
+      console.error("Fetch error:", error.value);
+    } else {
+      workList.value = (data.value as any[]) || [];
+    }
+  });
+});
+
 const pageTitle = ref(t("name.home"));
 
-useHead({
-  title: pageTitle,
+const structuredData = computed(() => ({
+  "@context": "https://schema.org",
+  "@graph": workList.value.map((work: any) => ({
+    "@type": "CreativeWork",
+    name: work.name,
+    description: work.overview,
+    url: runtimeConfig.public.baseUrl,
+    thumbnailUrl: work.image.path,
+  })),
+}));
+
+watch(workList, (newVal) => {
+  if (newVal && newVal.length > 0) {
+    useHead({
+      script: [
+        {
+          type: "application/ld+json",
+          children: JSON.stringify(structuredData.value),
+        },
+      ],
+    });
+  }
 });
 </script>

public/data/enUS.json

@@ -2,7 +2,7 @@
   {
     "code": "Piman",
     "image": {
-      "path": "/portfolio/images/piman-thumbnail.webp",
+      "path": "/images/piman-thumbnail.webp",
       "alt": "Piman - A11Y UI Framework"
     },
     "name": "Piman - A11Y UI Framework",
@@ -17,7 +17,7 @@
   {
     "code": "choose",
     "image": {
-      "path": "/portfolio/images/choose-chart-thumbnail.webp",
+      "path": "/images/choose-chart-thumbnail.webp",
       "alt": "Choose - Data Visualization"
     },
     "name": "Choose: Data Visualization",
@@ -32,7 +32,7 @@
   {
     "code": "scout",
     "image": {
-      "path": "/portfolio/images/scout-thumbnail.webp",
+      "path": "/images/scout-thumbnail.webp",
       "alt": "ΣCOUT"
     },
     "name": "ΣCOUT",
@@ -47,7 +47,7 @@
   {
     "code": "bpgcms",
     "image": {
-      "path": "/portfolio/images/bpgcms-thumbnail.webp",
+      "path": "/images/bpgcms-thumbnail.webp",
       "alt": "General Back-end Template by Blue Planet Inc."
     },
     "name": "BPGCMS Back-end Template",
@@ -62,7 +62,7 @@
   {
     "code": "vitalcrm-web",
     "image": {
-      "path": "/portfolio/images/vitalcrm-web-thumbnail.webp",
+      "path": "/images/vitalcrm-web-thumbnail.webp",
       "alt": "Vital CRM New Web"
     },
     "name": "Vital CRM Web",
@@ -77,7 +77,7 @@
   {
     "code": "vitalttc",
     "image": {
-      "path": "/portfolio/images/ttc-thumbnail.webp",
+      "path": "/images/ttc-thumbnail.webp",
       "alt": "image description"
     },
     "name": "Vital TTC",
@@ -92,7 +92,7 @@
   {
     "code": "vitalsespsurvey",
     "image": {
-      "path": "/portfolio/images/vitalsespsurvey-thumbnail.webp",
+      "path": "/images/vitalsespsurvey-thumbnail.webp",
       "alt": "Vitals ESP Survey thumbnail"
     },
     "name": "Vitals ESP Survey",
@@ -107,7 +107,7 @@
   {
     "code": "vitaluikit",
     "image": {
-      "path": "/portfolio/images/vitaluikit-thumbnail.webp",
+      "path": "/images/vitaluikit-thumbnail.webp",
       "alt": "Vital UI Kit"
     },
     "name": "Vital UI Kit",
@@ -122,7 +122,7 @@
   {
     "code": "mpos",
     "image": {
-      "path": "/portfolio/images/KSI-mpos-thumbnail.webp",
+      "path": "/images/KSI-mpos-thumbnail.webp",
       "alt": "KSI mPOS thumbnail"
     },
     "name": "KSI mPOS",
@@ -137,7 +137,7 @@
   {
     "code": "vitalcrm-app",
     "image": {
-      "path": "/portfolio/images/vitalcrm-app.webp",
+      "path": "/images/vitalcrm-app.webp",
       "alt": "Vital CRM APP"
     },
     "name": "Vital CRM APP",

public/data/enZhHantTW.json

@@ -2,7 +2,7 @@
   {
     "code": "Piman",
     "image": {
-      "path": "/portfolio/images/piman-thumbnail.webp",
+      "path": "/images/piman-thumbnail.webp",
       "alt": "Piman - 無障礙 UI 框架"
     },
     "name": "Piman - 無障礙 UI 框架",
@@ -17,7 +17,7 @@
   {
     "code": "choose",
     "image": {
-      "path": "/portfolio/images/choose-chart-thumbnail.webp",
+      "path": "/images/choose-chart-thumbnail.webp",
       "alt": "Choose 蛛思：資料視覺化"
     },
     "name": "Choose 蛛思：資料視覺化",
@@ -32,7 +32,7 @@
   {
     "code": "scout",
     "image": {
-      "path": "/portfolio/images/scout-thumbnail.webp",
+      "path": "/images/scout-thumbnail.webp",
       "alt": "ΣCOUT 實告"
     },
     "name": "ΣCOUT 實告",
@@ -47,7 +47,7 @@
   {
     "code": "bpgcms",
     "image": {
-      "path": "/portfolio/images/bpgcms-thumbnail.webp",
+      "path": "/images/bpgcms-thumbnail.webp",
       "alt": "通用後台系統模版"
     },
     "name": "BPGCMS 通用後台系統模版",
@@ -62,7 +62,7 @@
   {
     "code": "vitalcrm-web",
     "image": {
-      "path": "/portfolio/images/vitalcrm-web-thumbnail.webp",
+      "path": "/images/vitalcrm-web-thumbnail.webp",
       "alt": "Vital CRM New Web 縮圖"
     },
     "name": "Vital CRM Web",
@@ -77,7 +77,7 @@
   {
     "code": "vitalttc",
     "image": {
-      "path": "/portfolio/images/ttc-thumbnail.webp",
+      "path": "/images/ttc-thumbnail.webp",
       "alt": "image description"
     },
     "name": "Vital TTC 物聯客",
@@ -92,7 +92,7 @@
   {
     "code": "vitalsespsurvey",
     "image": {
-      "path": "/portfolio/images/vitalsespsurvey-thumbnail.webp",
+      "path": "/images/vitalsespsurvey-thumbnail.webp",
       "alt": "Vitals ESP Survey thumbnail"
     },
     "name": "Vitals ESP Survey",
@@ -107,7 +107,7 @@
   {
     "code": "vitaluikit",
     "image": {
-      "path": "/portfolio/images/vitaluikit-thumbnail.webp",
+      "path": "/images/vitaluikit-thumbnail.webp",
       "alt": "Vital UI Kit thumbnail"
     },
     "name": "Vital UI Kit",
@@ -122,7 +122,7 @@
   {
     "code": "mpos",
     "image": {
-      "path": "/portfolio/images/KSI-mpos-thumbnail.webp",
+      "path": "/images/KSI-mpos-thumbnail.webp",
       "alt": "KSI mPOS thumbnail"
     },
     "name": "KSI mPOS",
@@ -137,7 +137,7 @@
   {
     "code": "vitalcrm-app",
     "image": {
-      "path": "/portfolio/images/vitalcrm-app-thumbnail.webp",
+      "path": "/images/vitalcrm-app-thumbnail.webp",
       "alt": "Vital CRM APP thumbnail"
     },
     "name": "Vital CRM APP",