feat(rewrite): rewrite w/ Pinceau (#81)

Co-authored-by: Sergey Bedritsky <sergey.bedritsky@gmail.com>

template/content/1.index.md → .docs/content/1.index.md

@@ -24,7 +24,9 @@ Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulu
 ::gallery
 ---
 images:
- - /alpine-2.png
- - /alpine-3.png
+  - /alpine-2.png
+  - /alpine.png
+  - /alpine-3.png
+  - /alpine.png
 ---
 ::

template/content/3.contact.md → .docs/content/3.contact.md

@@ -11,23 +11,23 @@ layout: 'default'
 email: "maxime@nuxtlabs.com"
 fields:
   - type: 'text'
-    name: 'Your name'
+    name: 'name'
+    label: 'Your name'
     required: true
-    layout: 'default'
 
   - type: 'email'
-    name: 'Your email'
+    name: 'email'
+    label: 'Your email'
     required: true
-    layout: 'default'
 
   - type: 'text'
-    name: 'Subject'
+    name: 'subject'
+    label: 'Subject'
     required: false
-    layout: 'default'
 
   - type: 'textarea'
-    name: 'Message'
+    name: 'message'
+    label: 'Message'
     required: true
-    layout: 'big'
 ---
 ::

.docs/content/3.exemple.md

@@ -0,0 +1,173 @@
+---
+navTitle: 'Exemple'
+---
+
+# Content Wind :icon{name="carbon:sailboat-coastal" class="text-indigo-400"}
+
+A lightweight Nuxt template to build a Markdown driven website, based on [Nuxt Content](https://content.nuxtjs.org), [TailwindCSS](https://tailwindcss.com) and [Iconify](https://iconify.design) :sparkles:
+
+## Features
+
+- [Document-Driven Mode](https://content.nuxtjs.org/guide/writing/document-driven)
+  - Create pages in Markdown in the `content/` directory
+  - Use Nuxt layouts in your Markdown pages
+  - Enjoy meta tag generation from Markdown files
+  - 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 your Markdown
+- Deploy on any Node or Static hosting: GH Pages, Vercel, Netlify, Heroku, etc.
+
+## Setup
+
+Open a terminal and run the following command:
+
+```bash
+npx nuxi init my-website -t atinux/content-wind
+```
+
+Or start by clicking on **Use this template** on [github.com/Atinux/content-wind](https://github.com/Atinux/content-wind).
+
+## Usage
+
+This template has some built-in features to make it as easy as possible to create a content-driven website.
+
+### Pages
+
+Create your Markdown pages in the `content/` directory:
+
+```md
+# My title
+
+This first paragraph will be treated as the page meta description.
+```
+
+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`'
+---
+
+# 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.
+
+### Navigation
+
+The navigation is generated from your pages, you can take a look at the [`<Navbar>`](https://github.com/Atinux/content-wind/blob/main/components/Navbar.vue) component to see how it works.
+
+It uses the [`<ContentNavigation>`](https://content.nuxtjs.org/api/components/content-navigation) component from Nuxt Content to fetch the navigation object.
+
+To customize the title displayed in the navigation, you can set the `navTitle` property in the front-matter of your pages:
+
+```md
+---
+navTitle: 'Home'
+---
+
+# Welcome to my site
+
+With a beautiful description
+```
+
+### Icons
+
+Use any icon from [icones.js.org](https://icones.js.org) with the `<Icon>` component:
+
+```html
+<Icon name="ph:music-notes-fill" />
+```
+
+You can also use it in your Markdown:
+
+```md
+:icon{name="ph:music-notes-fill"}
+```
+
+Will result in :icon{name="ph:music-notes-fill"}
+
+### Code Highlight
+
+It supports code highlighting with Shiki and as well as different [VS Code themes](https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-themes).
+
+```
+\```ts
+export default () => 'Hello Content Wind'
+\```
+````
+
+Will result in:
+
+```ts
+export default () => 'Hello Content Wind'
+```
+
+Updating the theme is as simple as editing your `nuxt.config`:
+
+```ts
+import { defineNuxtConfig } from 'nuxt'
+
+export default defineNuxtConfig({
+  content: {
+    highlight: {
+      theme: 'one-dark-pro',
+    }
+  }
+})
+```
+
+Learn more in the [Content Code Highlight section](https://content.nuxtjs.org/api/configuration#highlight).
+
+### Vue Components
+
+Add Vue components into the `components/content/` directory and start using them in Markdown.
+
+See the `<Alert>` component in [`components/content/Alert.vue`](https://github.com/Atinux/content-wind/blob/main/components/content/Alert.vue).
+
+By leveraging the [`<ContentSlot>`](https://content.nuxtjs.org/api/components/markdown) component from Nuxt Content, you can use both slots and props in Markdown thanks to the [MDC syntax](https://content.nuxtjs.org/guide/writing/mdc).
+
+If you want to go deeper, take a look at the [`<List>`](https://github.com/Atinux/content-wind/blob/main/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)
+
+
+### Static Hosting
+
+Pre-render the website to be deployed on any static hosting:
+
+```bash
+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).
+
+### Node server
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Start the server in production:
+
+```bash
+node .output/server/index.mjs
+```
+
+Learn more on [Nuxt docs](https://v3.nuxtjs.org/guide/deploy/node-server) for more information.
+
+---
+
+You are at the end of the page, you can checkout the [about page](/about) or the [GitHub repository](https://github.com/Atinux/content-wind) and give a :icon{name="ph:star-duotone"}
+
+Thanks for reading and happy writing, [Atinux](https://twitter.com/Atinux).

.docs/nuxt.config.ts

@@ -0,0 +1,7 @@
+export default defineNuxtConfig({
+  extends: '../',
+  modules: ['nuxt-plausible'],
+  typescript: {
+    includeWorkspace: true
+  }
+})

.docs/tokens.config.ts

@@ -0,0 +1,4 @@
+import { defineTheme } from 'pinceau'
+
+export default defineTheme({
+})

.docs/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

.github/workflows/ci-dev.yml

@@ -24,16 +24,9 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
-          cache: 'yarn'
 
       - name: Install dependencies
-        run: yarn --immutable
+        run: yarn install
 
       - name: Build
         run: yarn build
-
-      - name: Release Edge version
-        if: github.event_name == 'push'
-        run: ./.github/scripts/release-edge.sh
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}

.github/workflows/ci.yml

@@ -32,16 +32,3 @@ jobs:
 
       - name: Build
         run: yarn build
-
-      - name: Check if the version has been bumped
-        id: check
-        uses: EndBug/version-check@v2
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-
-# Temporarily disable CI main package releases
-#      - name: Release Main version
-#        if: github.event_name == 'push' && steps.check.outputs.changed == 'true'
-#        run: pnpm release
-#        env:
-#          NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

theme/app.config.ts → app.config.ts

@@ -9,16 +9,20 @@ export default defineAppConfig({
       height: 300
     },
     header: {
-      position: 'inline', // possible value are : 'none' | 'left' | 'center' | 'right' | 'inline'
-      logo: false
+      position: 'right', // possible value are : | 'left' | 'center' | 'right'
+      logo: {
+        path: '/logo.svg', // path of the logo
+        pathDark: '/logo-dark.svg', // path of the logo in dark mode, leave this empty if you want to use the same logo
+        alt: 'alpine' // alt of the logo
+      }
     },
     footer: {
       credits: {
         enabled: true, // possible value are : true | false
         repository: 'https://www.github.com/nuxt-themes/alpine' // our github repository
       },
-      navigation: false, // possible value are : true | false
-      position: 'center', // possible value are : 'none' | 'left' | 'center' | 'right'
+      navigation: true, // possible value are : true | false
+      alignment: 'center', // possible value are : 'none' | 'left' | 'center' | 'right'
       message: 'Follow me on' // string that will be displayed in the footer (leave empty or delete to disable)
     },
     socials: {

assets/main.css

@@ -0,0 +1,23 @@
+html {
+  background-color: $dt('color.secondary.100');
+}
+
+html.dark {
+  background-color: $dt('color.secondary.900');
+}
+
+/* Color scheme images helper classes */
+.light-img {
+  display: block;
+}
+.dark-img {
+  display: none;
+}
+@dark {
+  .dark-img {
+    display: block;
+  }
+  .light-img {
+    display: none;
+  }
+}

components/AppContainer.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+type HTMLElementsTags = keyof HTMLElementTagNameMap
+
+defineProps({
+  as: {
+    type: String as PropType<HTMLElementsTags>,
+    required: false,
+    default: 'div'
+  },
+  ...variants
+})
+</script>
+
+<template>
+  <component :is="as" class="container">
+    <slot />
+  </component>
+</template>
+
+<style lang="ts" scoped>
+css({
+  '.container': {
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    width: '100%'
+  },
+  variants: {
+    padded: {
+      true: {
+        px: '{space.4}',
+        '@sm': {
+          px: '{space.6}',
+        }
+      },
+      options: {
+        default: true
+      }
+    },
+    fluid: {
+      true: {
+        overflowX: 'hidden',
+      },
+      false: {
+        maxWidth: '80rem'
+      },
+      options: {
+        default: false
+      }
+    }
+  }
+})
+</style>