改变读取资源路径

使用神奇的github page来作为静态资源路径，但是读取效率一般，考虑加入预渲染和缓存提升体验

components/List.vue

@@ -9,7 +9,7 @@ const { data, pending, error, refresh } = await useFetch('/api/posts/postDirs',
     path,
   }),
 })
-
+/*
 const years = computed<string[]>(() => {
   const years: string[] = []
   data?.value!.forEach((element, index) => {
@@ -19,7 +19,7 @@ const years = computed<string[]>(() => {
     else icons.value[index] = false
   })
   return years
-})
+}) */
 /*
 const { postDirs } = useServerFunctions()
 const data = await postDirs(path)
@@ -43,19 +43,19 @@ const years = computed<string[]>(() => {
     <ul class="list">
       <!-- v-if="!pending" -->
       <template v-for="(item, index) in data" :key="index">
-        <div v-if="icons[index]" relaive pointer-events-none z-5 h-20 flex justify-left c-gray>
+        <!-- <div v-if="icons[index]" relaive pointer-events-none z-5 h-20 flex justify-left c-gray>
           <span
             absolute text-8em font-bold color-transparent text-stroke-2 text-stroke-hex-aaa op10
           >{{ years[index] }}</span>
-        </div>
+        </div> -->
         <div mb-5 flex justify-left text-xl opacity-50 transition-duration-100 hover-opacity-100>
-          <NuxtLink :to="`/posts/${path}/${item.id.replace(/\.md$/, '')}`">
-            {{ item.id.replace(/\.md$/, '') }}
-            <span text-sm opacity-25> {{ new Date(item.cdate).toLocaleDateString('en', {
+          <NuxtLink :to="`/posts/${path}/${item!.id.replace(/\.md$/, '')}`">
+            {{ item!.id.replace(/\.md$/, '') }}
+            <!-- <span text-sm opacity-25> {{ new Date(item.cdate).toLocaleDateString('en', {
               month: 'long',
               day: 'numeric',
             })
-            }}</span>
+            }}</span> -->
           </NuxtLink>
         </div>
       </template>

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
+    "axios": "^1.6.0",
     "gray-matter": "^4.0.3",
     "icones": "^1.0.0",
     "remark": "^15.0.1",

server/api/posts/getContent.ts

@@ -5,33 +5,37 @@ import { fileURLToPath } from 'node:url'
 import matter from 'gray-matter'
 import { remark } from 'remark'
 import html from 'remark-html'
+import axios from 'axios'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 // console.log('path.join(__dirname, \'..\') -- ', path.join(__dirname, '..'))
+const baseUrl = 'https://cksheuen.github.io/blog_files/'
 
 export default defineEventHandler(async (event) => {
   const body = await readBody(event)
 
-  const postsDirectory = path.join(process.cwd(), 'public', 'posts', body.path)
+  const postsDirectory = path.join(baseUrl, 'posts', body.path)
   // const postsDirectory= path.join(process.cwd()) , 'public', 'posts', body.path
   //  = `/posts/${body.path}`
   // = path.join(__dirname, '..', 'public', 'posts', body.path)
   // = path.join(process.cwd(), `posts/${body.path}`)
   // = `/posts/${body.path}`
-  console.log(postsDirectory)
+  // console.log(postsDirectory)
 
   const fullPath = path.join(postsDirectory, `${body.id}.md`)
-  const fileContent = fs.readFileSync(fullPath, 'utf8')
-  const matterResult = matter(fileContent)
+
+  const matterResult = await axios.get(fullPath)
+  // console.log(matterResult.data)
+
+  /* const fileContent = fs.readFileSync(fullPath, 'utf8')
+  const matterResult = matter(fileContent) */
   const processedContent = await remark()
     .use(html)
-    .process(matterResult.content)
+    .process(matterResult.data)
   const contentHtml = processedContent.toString()
 
   return {
     contentHtml,
-    fileContent,
-    ...matterResult.data,
   }
 })

server/api/posts/postDirs.ts

@@ -3,40 +3,58 @@ import process from 'node:process'
 import fs from 'node:fs'
 import { fileURLToPath } from 'node:url'
 import matter from 'gray-matter'
+import axios from 'axios'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 // console.log('path.join(__dirname, \'..\') -- ', path.join(__dirname, '..'))
 
+const baseUrl = 'https://api.github.com/repos/cksheuen/blog_files/contents/posts'
+
+async function getFileList(url: string) {
+  const response = await axios.get(url)
+  return response.data
+}
+
 export default defineEventHandler(async (event) => {
   const body = await readBody(event)
 
-  const postsDirectory = path.join(process.cwd(), 'public', 'posts', body.path)
+  const postsDirectory = path.join(baseUrl, body.path)
+  // = path.join('https://cksheuen.github.io/blog_files/', 'posts', body.path)
   // const postsDirectory = path.join(process.cwd(), '___vc') , 'public', 'posts', body.path
-
-  // = `/posts/${body.path}`
+  // https://api.github.com/repos/cksheuen/blog_files/contents/post
+  // =
   // = path.join(__dirname, '..', 'public', 'posts', body.path)
   // = path.join(process.cwd(), `posts/${body.path}`)
   //  = `/posts/${body.path}`
-  console.log(postsDirectory)
+  // console.log(postsDirectory)
+
+  const data = await getFileList(postsDirectory)
+  // console.log(data)
+
+  const fileNames: string[] = []
+
+  data!.forEach((item: any) => {
+    fileNames.push(item.name)
+  })
+  // console.log(fileNames)
 
-  const fileNames = fs.readdirSync(postsDirectory)
   const allPostsData = fileNames.map((fileName) => {
     const id = fileName.replace('/\.md$/', '')
 
-    const fsState = fs.statSync(path.join(postsDirectory, fileName))
+    /* const fsState = fs.statSync(path.join(postsDirectory, fileName))
     const cdate = fsState.ctime
 
     const fullPath = path.join(postsDirectory, fileName)
     const fileContents = fs.readFileSync(fullPath, 'utf8')
-    const matterResult = matter(fileContents)
+    const matterResult = matter(fileContents) */
 
     return {
-      id,
+      id, /* ,
       cdate,
-      ...matterResult.data,
+      ...matterResult.data, */
 
     }
   })
-  return allPostsData.sort((a, b) => a.cdate < b.cdate ? 1 : -1)
+  return allPostsData/* .sort((a, b) => a.cdate < b.cdate ? 1 : -1) */
 })