style

全局引入css，修复了中文md文件无法正常导入的bug，但创造了list列表刷新爆炸的bug
Cksheuen · Nov 1, 2023 · f9d689b · f9d689b
1 parent 13f4fb6
commit f9d689b
Show file tree

Hide file tree

Showing 13 changed files with 256 additions and 215 deletions.
diff --git a/components/Artical.vue b/components/Artical.vue
@@ -0,0 +1,77 @@
+<script setup lang='ts'>
+/* import 'github-markdown-css/github-markdown-dark.css'
+import 'github-markdown-css/github-markdown-light.css' */
+
+const { id } = defineProps<{ id: string }>()
+
+const colorMode = useColorMode()
+
+const { data, pending, error, refresh } = await useFetch('/api/post/getContent', {
+  method: 'POST',
+  body: JSON.stringify({
+    id,
+  }),
+})
+
+const theme = computed(() => {
+  if (colorMode.preference === 'light')
+    return 'markdown-body-light'
+
+  else if (colorMode.preference === 'dark')
+    return 'markdown-body-dark'
+  return 'markdown-body-light'
+})
+</script>
+
+<template>
+  <div v-if="pending">
+    Loading...
+  </div>
+  <div v-if="!pending" justify-center :class="theme" text-left v-html="data!.contentHtml" />
+</template>
+
+<style scoped>
+.markdown-body-dark {
+		box-sizing: border-box;
+		min-width: 200px;
+		max-width: 980px;
+		margin: 0 auto;
+		padding: 45px;
+    background-color: transparent;
+	}
+
+	@media (max-width: 767px) {
+		.markdown-body-dark {
+			padding: 15px;
+		}
+	}
+  .markdown-body-light {
+		box-sizing: border-box;
+		min-width: 200px;
+		max-width: 980px;
+		margin: 0 auto;
+		padding: 45px;
+    background-color: transparent;
+	}
+
+	@media (max-width: 767px) {
+		.markdown-body-light {
+			padding: 15px;
+		}
+	}
+
+	.markdown-body {
+		box-sizing: border-box;
+		min-width: 200px;
+		max-width: 980px;
+		margin: 0 auto;
+		padding: 45px;
+    background-color: transparent;
+	}
+
+	@media (max-width: 767px) {
+		.markdown-body-light {
+			padding: 15px;
+		}
+	}
+</style>
diff --git a/components/Editor.vue b/components/Editor.vue
@@ -0,0 +1,48 @@
+<script setup lang='ts'>
+const editState = useEditState()
+
+interface Text {
+  markdown: string
+  html: string
+}
+const text = ref<Text>({ markdown: '', html: '' })
+editState.$subscribe(async (state) => {
+  const { data, pending, error, refresh } = await useFetch(`/api/post/${editState.currentEditFileName}`, {
+    options: {
+      method: 'GET',
+      lazy: true,
+    },
+  })
+
+  text.value.markdown = data?.fileContent
+  text.value.html = data?.contentHtml
+})
+
+function changeHtml(value: any) {
+  if (value === '<p><br></p>')
+    return
+  ruleForm.value.content = value
+}
+</script>
+
+<template>
+  <div relative z-1>
+    <div class="main" w-200 style="margin: 0 auto;" flex>
+      <FileIndex w-100 />
+      <RichEditor @changeHtml="changeHtml" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.typing{
+  overflow-x: hidden;
+}
+.textarea{
+  width: 100%;
+height: 100%;
+}
+.preview{
+  height: 100%;
+}
+</style>
diff --git a/components/FileIndex.vue b/components/FileIndex.vue
@@ -3,11 +3,17 @@ const editState = useEditState()
 let isLoaded = false
 const rootPath = '/api/post/postDirs'
 
-const titles = await useFetch(rootPath).data.value
+const { data, pending, error, refresh } = await useFetch(rootPath)
 
-const ids = titles?.map((title) => {
-  return title.replace(/\.md$/, '')
-}) as string[]
+const titles = data.value
+
+console.log('titles', titles)
+
+const ids = computed(() => {
+  return titles?.map((title) => {
+    return title.replace(/\.md$/, '')
+  }) as string[]
+})
 
 isLoaded = true
 

diff --git a/components/List.vue b/components/List.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+const ids: string[] = []
+const years: string[] = []
+const dates: string[] = []
+const icons: boolean[] = []
+const { data, pending, error, refresh } = await useFetch('/api/post/postDirs')
+
+/* for (let index = 0; index < data.value!.length; index++) {
+  ids[index] = element.id.replace(/\.md$/, '')
+  years[index] = element.cdate[0] + element.cdate[1] + element.cdate[2] + element.cdate[3]
+  dates[index] = element.cdate
+  if (years[index] !== years[index - 1])
+    icons[index] = true
+  else icons[index] = false
+} */
+// console.log(data.value)
+
+data.value!.forEach((element, index) => {
+  ids[index] = element.id.replace(/\.md$/, '')
+  years[index] = element.cdate[0] + element.cdate[1] + element.cdate[2] + element.cdate[3]
+  dates[index] = element.cdate
+  if (years[index] !== years[index - 1])
+    icons[index] = true
+  else icons[index] = false
+})
+
+// console.log(dates)
+</script>
+
+<template>
+  <div relative z-1>
+    <ul v-if="!pending" class="list">
+      <template v-for="(item, index) in ids" :key="index">
+        <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 mb-5 flex justify-left text-xl opacity-25 transition-duration-100 hover-opacity-100>
+          <NuxtLink :to="`/posts/${item}`">
+            {{ item }}
+          </NuxtLink>
+        </div>
+      </template>
+    </ul>
+    <div v-else>
+      Loading...
+    </div>
+  </div>
+</template>
+
+<style>
+.list {
+		box-sizing: border-box;
+		min-width: 200px;
+		max-width: 650px;
+		margin: 0 auto;
+		padding: 45px;
+    background-color: transparent;
+	}
+
+	@media (max-width: 767px) {
+		.markdown-body-dark {
+			padding: 15px;
+		}
+	}
+</style>
diff --git a/components/MdEditor.vue b/components/MdEditor.vue
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -23,6 +23,9 @@ export default defineNuxtConfig({
 
   css: [
     '@unocss/reset/tailwind.css',
+    'github-markdown-css/github-markdown.css',
+    'github-markdown-css/github-markdown-dark.css',
+    'github-markdown-css/github-markdown-light.css',
   ],
 
   colorMode: {

diff --git a/pages/editor.vue b/pages/editor.vue
@@ -1,50 +1,8 @@
-<script setup lang='ts'>
-const editState = useEditState()
-
-interface Text {
-  markdown: string
-  html: string
-}
-const text = ref<Text>({ markdown: '', html: '' })
-editState.$subscribe(async (state) => {
-  const { data, pending, error, refresh } = await useFetch(`/api/post/${editState.currentEditFileName}`, {
-    options: {
-      method: 'GET',
-      lazy: true,
-    },
-  })
-
-  text.value.markdown = data?.fileContent
-  text.value.html = data?.contentHtml
-})
-
-function changeHtml(value: any) {
-  if (value === '<p><br></p>')
-    return
-  ruleForm.value.content = value
-}
-</script>
-
 <template>
-  <div relative z-1>
-    <div class="main" w-200 style="margin: 0 auto;" flex>
-      <FileIndex w-100 />
-      <ClientOnly w-100>
-        <RichEditor @changeHtml="changeHtml" />
-      </ClientOnly>
-    </div>
+  <div>
+    <Sidebar />
+    <ClientOnly fallback-tag="span" fallback="Loading comments...">
+      <Editor />
+    </ClientOnly>
   </div>
 </template>
-
-<style scoped>
-.typing{
-  overflow-x: hidden;
-}
-.textarea{
-  width: 100%;
-height: 100%;
-}
-.preview{
-  height: 100%;
-}
-</style>
diff --git a/pages/list.vue b/pages/list.vue
@@ -1,53 +1,8 @@
-<script setup lang="ts">
-const ids: string[] = []
-const dates: string[] = []
-const icons: boolean[] = []
-const { data, pending, error, refresh } = await useFetch('/api/post/postDirs')
-
-data.value!.forEach((element, index) => {
-  ids[index] = element.id.replace(/\.md$/, '')
-  dates[index] = element.cdate[0] + element.cdate[1] + element.cdate[2] + element.cdate[3]
-  if (dates[index] !== dates[index - 1])
-    icons[index] = true
-  else icons[index] = false
-})
-</script>
-
 <template>
-  <div relative z-1>
-    <ul v-if="!pending" class="list">
-      <template v-for="(item, index) in ids" :key="index">
-        <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
-          >{{ dates[index] }}</span>
-        </div>
-        <div mb-5 flex justify-left text-xl opacity-25 transition-duration-100 hover-opacity-100>
-          <NuxtLink :to="`/posts/${item}`">
-            {{ item }}
-          </NuxtLink>
-        </div>
-      </template>
-    </ul>
-    <div v-else>
-      Loading...
-    </div>
+  <div>
+    <Sidebar />
+    <ClientOnly fallback-tag="span" fallback="Loading comments...">
+      <List />
+    </ClientOnly>
   </div>
 </template>
-
-<style>
-.list {
-		box-sizing: border-box;
-		min-width: 200px;
-		max-width: 650px;
-		margin: 0 auto;
-		padding: 45px;
-    background-color: transparent;
-	}
-
-	@media (max-width: 767px) {
-		.markdown-body-dark {
-			padding: 15px;
-		}
-	}
-</style>
diff --git a/pages/notes/[...id].vue b/pages/notes/[...id].vue
@@ -1,6 +1,6 @@
 <script setup lang='ts'>
-import('github-markdown-css/github-markdown-light.css')
-import('github-markdown-css/github-markdown-dark.css')
+/* import('github-markdown-css/github-markdown-light.css')
+import('github-markdown-css/github-markdown-dark.css') */
 
 const colorMode = useColorMode()
 

diff --git a/pages/posts/[...id].vue b/pages/posts/[...id].vue
@@ -0,0 +1,13 @@
+<script setup lang='ts'>
+const route = useRoute()
+const id = route.params.id[0]
+</script>
+
+<template>
+  <div>
+    <Sidebar />
+    <ClientOnly fallback-tag="span" fallback="Loading comments...">
+      <Artical :id="id" />
+    </ClientOnly>
+  </div>
+</template>