Fix typography (#37)

* Refactor typography and update imports; remove unused styles and dependencies

* Refactor code structure and improve component styles; add ProseCode and ProseCodeCopyButton components

* Move ProseCodeInline component to nuxt-design-system; update styles for consistency

* Remove unused 'not-prose' class from DQuote component for cleaner styling

* Convert ProseBlockquote to use script setup; wrap DQuote component in template

* Integrate theme switch

* Blogs main page adapted

* Adapt blog article page

* Update opacity class for background element in blog page

* Adapt resume page

* Update typography in d0xigen

* Add dark color mode to homepage and project pages

* changeset

* lintfix

* Set compatibility date to 2024-12-02 in Nuxt configuration files

.changeset/dirty-dolphins-exist.md

@@ -0,0 +1,5 @@
+---
+'@d0rich/esprit-design': patch
+---
+
+Add light theme support for DStat component

.changeset/lucky-gorillas-heal.md

@@ -0,0 +1,5 @@
+---
+'@d0rich/nuxt-content-mermaid': patch
+---
+
+Add a class `not-prose` to ignore tailwindcss prose styles

.changeset/modern-cups-drop.md

@@ -0,0 +1,5 @@
+---
+'d0xigen': major
+---
+
+Remove nuxt typography and use tailwindcss typography with some customizations

.changeset/tidy-icons-arrive.md

@@ -0,0 +1,5 @@
+---
+'@d0rich/nuxt-design-system': minor
+---
+
+Add prose components for primary usage of tailwindcss typography

apps/d0rich.me/app.vue

@@ -62,9 +62,3 @@ useSeoMeta({
   </NuxtLayout>
   <DBigBangButtonAnimation class="z-50" />
 </template>
-
-<style>
-:root {
-  @apply nuxt-typography-connector;
-}
-</style>

apps/d0rich.me/assets/css/theme.css

@@ -3,5 +3,5 @@ html {
 }
 
 body {
-  @apply dark:bg-neutral-900 dark:text-gray-100;
+  @apply bg-neutral-100 print:bg-white dark:bg-neutral-900 dark:text-gray-100;
 }

apps/d0rich.me/components/blog/SurroundDocCard.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { MarkdownParsedContent } from '@nuxt/content/dist/runtime/types'
+import type { MarkdownParsedContent } from '@nuxt/content'
 export default {
   name: 'DLayoutSurroundDocCard'
 }
@@ -18,10 +18,16 @@ defineProps<{
     class="transition-transform hover:scale-90"
   >
     <DCard dense>
-      <DCardTitle v-if="direction === 'before'" class="[&_h3]:!text-cyan-800">
+      <DCardTitle
+        v-if="direction === 'before'"
+        class="dark:[&_h3]:!text-cyan-800 [&_h3]:!text-cyan-200"
+      >
         Older<Icon name="ic:sharp-arrow-forward-ios" />
       </DCardTitle>
-      <DCardTitle v-else class="[&_h3]:!text-cyan-800">
+      <DCardTitle
+        v-else
+        class="dark:[&_h3]:!text-cyan-800 [&_h3]:!text-cyan-200"
+      >
         <Icon name="ic:sharp-arrow-back-ios" />Newer
       </DCardTitle>
       <h4 class="text-xl font-bold">

apps/d0rich.me/components/blog/Tile.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+import type { ParsedContent } from '@nuxt/content'
 
 export interface BlogContent extends ParsedContent {
   image?: string
@@ -32,7 +32,7 @@ defineProps<{
         <div class="text-right font-bold">
           <time>{{ dateToDayMonthYear(article.date) }}</time>
         </div>
-        <h2 class="text-3xl font-bold text-cyan-200 mb-2">
+        <h2 class="text-3xl font-bold text-cyan-600 dark:text-cyan-200 mb-2">
           {{ article.title }}
         </h2>
 
@@ -61,7 +61,7 @@ defineProps<{
 
 .blog-tile__shape {
   clip-path: var(--shape-card--dense);
-  @apply bg-black bg-opacity-70;
+  @apply bg-white dark:bg-black bg-opacity-70;
 }
 
 .blog-tile__image {
@@ -75,6 +75,6 @@ defineProps<{
 }
 
 .blog-tile__link__tag {
-  @apply mx-1 text-lg font-bold bg-cyan-600;
+  @apply mx-1 text-lg font-bold bg-cyan-200 dark:bg-cyan-600;
 }
 </style>

apps/d0rich.me/components/layouts/DHeader.vue

@@ -4,7 +4,7 @@
       <DShape
         class="print:hidden"
         :filter-class="`${shadowColor} header__shape-filter`"
-        shape-class="bg-black"
+        shape-class="dark:bg-black bg-white"
         :shape-style="{
           clipPath: 'polygon(10px 0, 0 100%, 100% calc(100% - 10px), 100% 13px)'
         }"
@@ -16,6 +16,7 @@
           <DBtn to="/projects/"> Projects </DBtn>
           <DBtn to="/blog/"> Blog </DBtn>
           <DBtn to="/resume/"> Resumé </DBtn>
+          <DThemeSwitch v-if="isThemeSwitchVisible" />
         </div>
       </DShape>
     </header>
@@ -24,11 +25,13 @@
 
 <script lang="ts">
 import DShape from '@d0rich/nuxt-design-system/components/d/wrap/Shape.vue'
+import DThemeSwitch from '@d0rich/nuxt-design-system/components/d/ThemeSwitch.vue'
 
 export default defineComponent({
   name: 'DHeader',
   components: {
-    DShape
+    DShape,
+    DThemeSwitch
   },
   setup() {
     const { showHeader } = useLayoutState()
@@ -67,11 +70,17 @@ export default defineComponent({
     return {
       show: showHeader,
       shadowColor: computed(() => {
-        if (route.path.startsWith('/blog')) return 'ss-cyan-300'
-        if (route.path.startsWith('/projects')) return 'ss-red-300'
-        if (route.path.startsWith('/resume')) return 'ss-blue-300'
+        if (route.path.startsWith('/blog'))
+          return 'dark:ss-cyan-300 ss-cyan-500'
+        if (route.path.startsWith('/projects'))
+          return 'dark:ss-red-300 ss-red-500'
+        if (route.path.startsWith('/resume'))
+          return 'dark:ss-blue-300 ss-blue-500'
         return 'ss-neutral-50'
-      })
+      }),
+      isThemeSwitchVisible: computed(
+        () => route.path.startsWith('/blog') || route.path.startsWith('/resume')
+      )
     }
   }
 })

apps/d0rich.me/components/resume/CertificatesCard.vue

@@ -7,8 +7,11 @@ defineProps<{
 </script>
 
 <template>
-  <DCard dense class="">
-    <ul class="resume-sertificates-card__list">
+  <DCard
+    dense
+    class="prose prose-blue dark:prose-invert print:prose-sm max-w-screen-lg"
+  >
+    <ul>
       <li
         v-for="cert in cerificates"
         :key="cert._id"
@@ -37,9 +40,6 @@ defineProps<{
 </template>
 
 <style>
-.resume-sertificates-card__list {
-  @apply pl-5 space-y-3 list-disc print:text-sm;
-}
 a.resume-sertificates-card__place {
   @apply underline dark:text-blue-300 text-blue-800;
 }

apps/d0rich.me/components/resume/ProjectsCard.vue

@@ -7,8 +7,11 @@ defineProps<{
 </script>
 
 <template>
-  <DCard dense>
-    <ul class="resume-projects-card__list">
+  <DCard
+    dense
+    class="prose prose-blue dark:prose-invert print:prose-sm max-w-screen-lg"
+  >
+    <ul>
       <li
         v-for="project in projects"
         :key="project.url"
@@ -24,12 +27,3 @@ defineProps<{
     </ul>
   </DCard>
 </template>
-
-<style>
-.resume-projects-card__list {
-  @apply pl-5 space-y-3 list-disc print:text-sm;
-}
-a.resume-projects-card__place {
-  @apply underline dark:text-blue-300 text-blue-800;
-}
-</style>

apps/d0rich.me/components/resume/TimeNote.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+import type { ParsedContent } from '@nuxt/content'
+import { dateToMonthYear, formatYearMonthDateDiff } from '~/utils/date'
 
 export interface TimeNote extends ParsedContent {
   place: {
@@ -18,9 +19,13 @@ defineProps<{
 </script>
 
 <template>
-  <DCard>
-    <DCardTitle class="break-inside-avoid-page break-after-avoid-page">
-      {{ timenote.title }}
+  <DCard dense>
+    <DCardTitle
+      class="break-inside-avoid-page break-after-avoid-page not-prose"
+    >
+      <span class="dark:text-black text-white print:text-black">
+        {{ timenote.title }}
+      </span>
       <template #extra>
         <Component
           :is="timenote.place.link ? 'a' : 'span'"
@@ -54,7 +59,7 @@ defineProps<{
       </span>
     </p>
     <ContentRenderer
-      class="print:text-sm break-inside-avoid-page"
+      class="prose prose-blue dark:prose-invert print:prose-sm max-w-screen-lg break-inside-avoid-page"
       :value="timenote"
     />
   </DCard>

apps/d0rich.me/content/resume/contacts.md

@@ -1,11 +1,11 @@
-:d-chip{.bg-blue-700}[[:icon{name="mdi:web"} d0rich.me](https://d0rich.me)]
+:d-chip{.dark:bg-blue-700 .bg-blue-200}[[:icon{name="mdi:web"} d0rich.me](https://d0rich.me)]
 
-:d-chip{.bg-blue-700}[[:icon{name="ic:sharp-mail"} [email protected]](mailto:[email protected])]
+:d-chip{.dark:bg-blue-700 .bg-blue-200}[[:icon{name="ic:sharp-mail"} [email protected]](mailto:[email protected])]
 
-:d-chip{.bg-blue-700}[[:icon{name="fa6-brands:github"} d0rich](https://github.com/d0rich)]
+:d-chip{.dark:bg-blue-700 .bg-blue-200}[[:icon{name="fa6-brands:github"} d0rich](https://github.com/d0rich)]
 
-:d-chip{.bg-blue-700}[[:icon{name="fa6-brands:linkedin"} linkedin.com/in/d0rich](https://www.linkedin.com/in/d0rich/)]
+:d-chip{.dark:bg-blue-700 .bg-blue-200}[[:icon{name="fa6-brands:linkedin"} linkedin.com/in/d0rich](https://www.linkedin.com/in/d0rich/)]
 
-:d-chip{.bg-blue-700}[[:icon{name="fa6-brands:telegram"} t.me/d0rich](https://d0rich.t.me/)]
+:d-chip{.dark:bg-blue-700 .bg-blue-200}[[:icon{name="fa6-brands:telegram"} t.me/d0rich](https://d0rich.t.me/)]
 
-:d-chip{.bg-blue-700}[[:icon{name="ic:sharp-location-on"} Tbilisi, Georgia](https://www.google.com/maps/place/Tbilisi/@41.7326304,44.6987693,11z)]
+:d-chip{.dark:bg-blue-700 .bg-blue-200}[[:icon{name="ic:sharp-location-on"} Tbilisi, Georgia](https://www.google.com/maps/place/Tbilisi/@41.7326304,44.6987693,11z)]

apps/d0rich.me/nuxt.config.ts

@@ -1,10 +1,6 @@
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
-  extends: [
-    '@d0rich/nuxt-content-mermaid',
-    '@nuxt-themes/typography',
-    '@d0rich/nuxt-design-system'
-  ],
+  extends: ['@d0rich/nuxt-content-mermaid', '@d0rich/nuxt-design-system'],
 
   app: {
     pageTransition: {
@@ -36,7 +32,10 @@ export default defineNuxtConfig({
 
   content: {
     highlight: {
-      theme: 'one-dark-pro'
+      theme: {
+        default: 'github-light',
+        dark: 'one-dark-pro'
+      }
     },
     markdown: {
       remarkPlugins: ['remark-simple-plantuml'],

apps/d0rich.me/package.json

@@ -9,7 +9,6 @@
     "preview": "nuxt preview"
   },
   "devDependencies": {
-    "@nuxt-themes/typography": "^1.0.1",
     "@types/dateformat": "^5.0.2",
     "@vueuse/core": "^12.0.0",
     "nuxt": "^3.14.1592"

apps/d0rich.me/pages/blog/[...slug].vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { Disqus } from 'vue-disqus'
-import type { MarkdownParsedContent } from '@nuxt/content/dist/runtime/types'
+import type { MarkdownParsedContent } from '@nuxt/content'
+import { addTrailingSlash } from '@/utils/seo'
+import { dateToDayMonthYear } from '@/utils/date'
 
 interface Document extends MarkdownParsedContent {
   date?: string
@@ -75,7 +77,7 @@ const docDate = computed(() => {
         :content="String(Math.floor(docDate.getTime() / 1000))"
       />
     </Head>
-    <div class="blog-article blog-fonts">
+    <div class="blog-article mb-3">
       <nav class="mb-10">
         <DBigBangButton text="< Back" :to="addTrailingSlash(linkToBlog)" />
       </nav>
@@ -86,7 +88,7 @@ const docDate = computed(() => {
     <ContentRenderer
       :value="doc"
       tag="article"
-      class="blog-article blog-fonts"
+      class="prose prose-cyan dark:prose-invert blog-article"
     />
     <nav
       class="blog-article justify-center grid sm:grid-cols-2 gap-8 items-start my-16"
@@ -118,20 +120,6 @@ const docDate = computed(() => {
 
 <style>
 .blog-article {
-  @apply max-w-screen-md
-         mx-auto px-3
-         dark:prose-headings:text-cyan-400
-         dark:[&_p]:first-letter:bg-cyan-800
-         dark:[&_:not(blockquote)_p]:first-letter:bg-transparent
-         dark:marker:text-cyan-400;
-}
-
-.blog-fonts {
-  @apply [&_p]:!font-sans [&_a]:!font-sans [&_em]:!font-sans [&_li]:!font-sans
-         [&_ul]:!font-sans [&_ol]:!font-sans [&_blockquote]:!font-sans
-         [&_strong]:!font-sans [&_del]:!font-sans [&_hr]:!font-sans
-         [&_table]:!font-sans [&_thead]:!font-sans [&_tbody]:!font-sans [&_tr]:!font-sans
-         [&_th]:!font-sans [&_td]:!font-sans [&_sup]:!font-sans [&_sub]:!font-sans
-         [&_h1]:!font-sans [&_h2]:!font-sans [&_h3]:!font-sans [&_h4]:!font-sans [&_h5]:!font-sans [&_h6]:!font-sans;
+  @apply max-w-screen-md mx-auto px-3;
 }
 </style>

apps/d0rich.me/pages/blog/[page].vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { QueryBuilderParams } from '@nuxt/content/dist/runtime/types'
+import type { QueryBuilderParams } from '@nuxt/content'
 import type { BlogContent } from '@/components/blog/Tile.vue'
 
 definePageMeta({
@@ -24,8 +24,6 @@ const { data: pagesCount } = useAsyncData(
 const blogQuery: QueryBuilderParams = {
   path: '/blog',
   without: ['excerpt', 'body'],
-  // @ts-ignore
-  // FIXME: QueryBuilderParams wrong type definition
   where: filter,
   limit: itemsOnPage,
   skip: (currentPage.value - 1) * itemsOnPage,
@@ -38,8 +36,12 @@ const blogQuery: QueryBuilderParams = {
     <AsyncSafeSeoWithOg title="Blog" />
     <div class="relative isolate px-3 max-w-3xl mx-auto my-10 overflow-hidden">
       <div class="max-w-lg">
-        <h1 class="text-6xl sm:text-8xl font-serif mb-5 text-cyan-300">Blog</h1>
-        <p class="first-letter:bg-cyan-600">
+        <h1
+          class="text-6xl sm:text-8xl font-serif mb-5 dark:text-cyan-300 text-cyan-700"
+        >
+          Blog
+        </h1>
+        <p class="dark:first-letter:bg-cyan-600 first-letter:bg-cyan-200">
           Welcome to my blog! Here you will find news, articles, and insights
           related to software development, programming languages, technology
           trends, and more. My goal is to provide informative and engaging
@@ -50,7 +52,7 @@ const blogQuery: QueryBuilderParams = {
         mask="owl"
         color
         outline
-        class="h-full w-full flex flex-row-reverse absolute top-0 -z-10 brightness-[25%] sm:brightness-100 transition-all"
+        class="h-full w-full flex flex-row-reverse absolute top-0 -z-10 opacity-25 sm:opacity-100 transition-all"
       />
     </div>
 

apps/d0rich.me/pages/index.vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+  colorMode: 'dark'
+})
+</script>
+
 <template>
   <div class="-mt-20">
     <AsyncSafeSeoWithOg og-title="Homepage" />

apps/d0rich.me/pages/projects/[page].vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
-  path: '/projects/:page(\\d+)?'
+  path: '/projects/:page(\\d+)?',
+  colorMode: 'dark'
 })
 
 const route = useRoute()