feat!: move to Nuxt Typography

.demo/content/1.index.md

@@ -12,22 +12,24 @@ A lightweight Nuxt theme to build a Markdown driven website, based on [Nuxt Cont
 
 ::list
 - Create pages in Markdown in the `content/` directory
-- Use Nuxt layouts in your Markdown pages
+- Use [Nuxt layouts](https://nuxt.com/docs/guide/directory-structure/layouts) in your Markdown pages
 - Enjoy meta tag generation from Markdown files
+- Configurable prose components with [Nuxt Typography](https://typography.nuxt.space)
 - Generated navigation based on your pages
 - Switch between Light & Dark mode :moon:
 - Access 100,000 icons from 100+ icon sets with the `<Icon>` component
 - Highlight code blocks with [Shiki](https://shiki.matsu.io)
 - Create Vue components and use them in Markdown
 - Deploy on any Node or Static hosting: GH Pages, Vercel, Netlify, Heroku, etc.
+- Live edit on [Nuxt Studio](https://nuxt.studio)
 ::
 
 ## Setup
 
 Open a terminal and run the following command:
 
 ```bash
-npx nuxi@latest init -t themes/content-wind my-website
+npx nuxi init -t themes/content-wind my-website
 ```
 
 Follow the instructions in the terminal and you are ready to go :rocket:
@@ -50,17 +52,17 @@ You can overwrite meta tags by using front-matter:
 
 ```md
 ---
-head.title: 'Custom <title>'
-head.description: 'Custom meta description'
-head.image: 'Custom image injected as `og:image`'
+title: 'Custom <title>'
+description: 'Custom meta description'
+image: 'Custom image injected as `og:image`'
 ---
 
 # My title
 
 This first paragraph will be treated as the page meta description.
 ```
 
-This is done thanks to the [`<ContentDoc>`](https://content.nuxtjs.org/api/components/content-doc) component of Nuxt Content.
+This is done thanks to Nuxt Content's [`document-driven mode`](https://content.nuxtjs.org/guide/writing/document-driven) component of Nuxt Content.
 
 ### Navigation
 
@@ -158,7 +160,6 @@ This is the default content of my alert!
 
 If you want to go deeper, take a look at the [`<List>`](https://github.com/Atinux/content-wind/blob/main/theme/components/content/List.vue) component to see some `useUnwrap()` magic :magic_wand:
 
-
 ## Deployment
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FAtinux%2Fcontent-wind) [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/Atinux/content-wind)
@@ -172,7 +173,7 @@ Pre-render the website to be deployed on any static hosting:
 npm run generate
 ```
 
-The `dist/` directory is ready to be deployed (symlink to `.output/public`), [learn more on Nuxt docs](https://v3.nuxtjs.org/guide/deploy/static-hosting).
+The `dist/` directory is ready to be deployed (symlink to `.output/public`), [learn more on Nuxt docs](https://nuxt.com/docs/getting-started/deployment#static-hosting).
 
 ### Node server
 
@@ -188,7 +189,7 @@ Start the server in production:
 node .output/server/index.mjs
 ```
 
-Learn more on [Nuxt docs](https://v3.nuxtjs.org/guide/deploy/node-server) for more information.
+Learn more on [Nuxt docs](https://nuxt.com/docs/getting-started/deployment) for more information.
 
 ---
 

.demo/tokens.config.ts

@@ -0,0 +1,7 @@
+import { defineTheme, palette } from 'pinceau'
+
+export default defineTheme({
+  colors: {
+    // primary: palette('teal')
+  }
+})

README.md

@@ -16,14 +16,16 @@ A personal website theme powered by [Nuxt Content](https://content.nuxtjs.org),
 ## Features
 
 - Create pages in Markdown in the `content/` directory
-- Use Nuxt layouts in your Markdown pages
+- Use [Nuxt layouts](https://nuxt.com/docs/guide/directory-structure/layouts) in your Markdown pages
 - Enjoy meta tag generation from Markdown files
+- Configurable prose components with [Nuxt Typography](https://typography.nuxt.space)
 - Generated navigation based on your pages
 - Switch between Light & Dark mode :moon:
-- Access 100,000 icons from 100+ icon sets with the [`<Icon>` component](https://github.com/Atinux/nuxt-icon)
+- Access 100,000 icons from 100+ icon sets with the `<Icon>` component
 - Highlight code blocks with [Shiki](https://shiki.matsu.io)
-- Create Vue components in `components/content/` and use them in your Markdown
+- Create Vue components and use them in Markdown
 - Deploy on any Node or Static hosting: GH Pages, Vercel, Netlify, Heroku, etc.
+- Live edit on [Nuxt Studio](https://nuxt.studio)
 
 ## Get started
 

components/content/List.vue

@@ -12,7 +12,7 @@ defineProps({
 
 <template>
   <ul class="p-0">
-    <li v-for="(item, index) of flatUnwrap($slots.default(), ['ul'])" :key="index" class="flex pl-0 space-x-2">
+    <li v-for="(item, index) of flatUnwrap($slots.default(), ['ul'])" :key="index" class="flex pl-0 space-x-2 my-1 items-center">
       <Icon :name="icon" class="flex-shrink-0 w-6 h-6 mt-1 text-emerald-500" />
       <span><ContentSlot :use="() => item" unwrap="li" /></span>
     </li>

layouts/default.vue

@@ -1,18 +1,7 @@
 <template>
-  <div class="max-w-2xl px-4 py-10 m-auto bg-white sm:px-8 sm:shadow dark:bg-primary-800 sm:rounded">
-    <main class="prose prose-gray dark:prose-invert max-w-none">
+  <div class="max-w-2xl px-4 py-10 m-auto bg-white sm:px-8 sm:shadow dark:bg-primary-800 ring-1 ring-gray-200 dark:ring-gray-700 sm:rounded-lg">
+    <main class="max-w-none">
       <slot />
     </main>
   </div>
 </template>
-
-<style lang="postcss">
-/* Customize headers to remove default underline */
-.prose h2 a,
-.prose h3 a {
-  @apply no-underline;
-  &:hover {
-    @apply border-b border-neutral-600 dark:border-neutral-300;
-  }
-}
-</style>

layouts/full-width.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="py-10 m-auto bg-white sm:px-8 sm:shadow dark:bg-primary-800 sm:rounded">
-    <main class="max-w-2xl px-4 mx-auto prose sm:px-8 prose-gray dark:prose-invert">
+  <div class="py-10 m-auto bg-white sm:px-8 ring-1 ring-gray-200 dark:ring-gray-700 dark:bg-primary-800 sm:rounded">
+    <main class="max-w-2xl px-4 mx-auto sm:px-8">
       <slot>
         <h1 class="text-2xl">
           Page not found
@@ -9,14 +9,3 @@
     </main>
   </div>
 </template>
-
-<style lang="postcss">
-/* Customize headers to remove default underline */
-.prose h2 a,
-.prose h3 a {
-  @apply no-underline;
-  &:hover {
-    @apply border-b border-neutral-600 dark:border-neutral-300;
-  }
-}
-</style>

nuxt.config.ts

@@ -1,8 +1,11 @@
-import { version } from './package.json'
 import { logger } from '@nuxt/kit'
+import { version } from './package.json'
+
+logger.success(`Using Content Wind v${version}`)
 
 // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
 export default defineNuxtConfig({
+  extends: '@nuxt-themes/typography',
   modules: [
     '@nuxt/content',
     '@nuxtjs/tailwindcss',
@@ -19,12 +22,10 @@ export default defineNuxtConfig({
     documentDriven: true,
     highlight: {
       // See the available themes on https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-theme
-      theme: 'dracula'
-    }
-  },
-  hooks: {
-    'modules:before'() {
-      logger.success(`Using Content Wind v${version}`)
+      theme: {
+        dark: 'github-dark',
+        default: 'github-light'
+      }
     }
   }
 })

package.json

@@ -22,17 +22,17 @@
     "tailwind.config.ts"
   ],
   "dependencies": {
+    "@nuxt-themes/typography": "^0.0.15",
     "@nuxt/content": "^2.2.2",
     "@nuxthq/studio": "^0.2.3",
     "@nuxtjs/color-mode": "^3.1.8",
     "@nuxtjs/tailwindcss": "^6.1.3",
-    "@tailwindcss/typography": "^0.5.8",
     "nuxt-icon": "^0.1.7"
   },
   "devDependencies": {
-    "@nuxtjs/eslint-config-typescript": "^11.0.0",
+    "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "eslint": "^8.27.0",
-    "nuxt": "^3.0.0-rc.13",
+    "nuxt": "^3.0.0",
     "standard-version": "^9.5.0",
     "typescript": "^4.9.3"
   }