From 2e75732908060babe966829c49d09fd809f668a4 Mon Sep 17 00:00:00 2001 From: juls0730 <62722391+juls0730@users.noreply.github.com> Date: Tue, 23 Apr 2024 18:33:05 -0500 Subject: [PATCH] add TOC add better blog navigation and a new blog post --- assets/css/main.css | 18 + components/MiniBlogCard.vue | 21 + components/Nav.vue | 152 +- components/ProjectCard.vue | 2 +- components/TableOfContents.vue | 75 + components/content/ProseCode.vue | 185 +- components/content/ProseH2.vue | 52 +- components/content/ProseH3.vue | 35 + content/blog/100DaysOfCode-challenge.md | 33 +- content/blog/how-i-made-my-site-fast.md | 24 +- content/blog/magic-of-docker-compose.md | 449 + content/blog/nuxtjs-trpc-fullstack.md | 18 +- content/blog/portfolio-site-rebuild.md | 27 +- content/blog/running-bittorent-webserver.md | 25 +- content/blog/what-ive-been-doing.md | 63 +- content/blog/why-i-chose-arch.md | 27 +- nuxt.config.ts | 119 +- package-lock.json | 11144 ++---------------- package.json | 5 +- pages/blog/[...slug].vue | 180 +- pages/blog/index.vue | 119 +- pages/index.vue | 325 +- server/plugins/read-time.ts | 16 + server/routes/rss.xml.ts | 34 +- server/routes/sitemap.xml.ts | 26 +- tailwind.config.js | 38 +- tsconfig.json | 4 +- 27 files changed, 2530 insertions(+), 10686 deletions(-) create mode 100644 components/MiniBlogCard.vue create mode 100644 components/TableOfContents.vue create mode 100755 components/content/ProseH3.vue create mode 100644 content/blog/magic-of-docker-compose.md create mode 100644 server/plugins/read-time.ts diff --git a/assets/css/main.css b/assets/css/main.css index ab5dba2..d3e4976 100755 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -8,6 +8,24 @@ html, body { @apply bg-soft-lavender dark:bg-midnight text-deep-indigo dark:text-white; + scroll-behavior: smooth; +} + +/* make scroll bars dark in dark mode */ +html { + color-scheme: normal; +} + +html.dark { + color-scheme: dark; +} + +button { + @apply hover:dark:bg-[#1E1F1E] hover:bg-[#E5E6E5]/80 flex items-center h-fit p-[2px] rounded; +} + +hr { + @apply text-deep-indigo dark:text-white; } .font-jetbrains { diff --git a/components/MiniBlogCard.vue b/components/MiniBlogCard.vue new file mode 100644 index 0000000..c4d1143 --- /dev/null +++ b/components/MiniBlogCard.vue @@ -0,0 +1,21 @@ + + + diff --git a/components/Nav.vue b/components/Nav.vue index b8327fc..6ef530c 100755 --- a/components/Nav.vue +++ b/components/Nav.vue @@ -2,96 +2,76 @@ let colorMode = useColorMode(); const changeTheme = () => { - if (colorMode.preference === "dark") { - // from dark => light - colorMode.preference = "light" - document.documentElement.classList.remove("dark"); - } else if (colorMode.preference === "light") { - // from light => system - colorMode.preference = "system"; - if (window.matchMedia('(prefers-color-scheme: dark)').matches) { - document.documentElement.classList.add("dark"); - } else { - document.documentElement.classList.remove("dark"); - } - } else { - // from system => dark - colorMode.preference = "dark"; - document.documentElement.classList.add("dark"); - } + if (colorMode.preference === "dark") { + // from dark => light + colorMode.preference = "light" + } else if (colorMode.preference === "light") { + // from light => system + colorMode.preference = "system"; + } else { + // from system => dark + colorMode.preference = "dark"; + } - return; + return; } + + + \ No newline at end of file diff --git a/components/ProjectCard.vue b/components/ProjectCard.vue index a1d715d..e8e79b6 100755 --- a/components/ProjectCard.vue +++ b/components/ProjectCard.vue @@ -6,7 +6,7 @@ export default {