atinux / content-wind

A lightweight Nuxt theme to build a Markdown driven website. Powered by Nuxt Content, TailwindCSS and Iconify.

Content Wind

A personal website theme powered by Nuxt Content, TailwindCSS, Iconify and Vue components.

• 📖  Demo & Docs
• 🕹  Play online
• 👀  Demo video

Features

• Create pages in Markdown in the content/ directory
• Use Nuxt layouts in your Markdown pages
• Enjoy meta tag generation from Markdown files
• Configurable prose components with Nuxt Typography
• Generated navigation based on your pages
• Switch between Light & Dark mode 🌔
• Access 100,000 icons from 100+ icon sets with the <Icon> component
• Highlight code blocks with Shiki
• 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

Get started

Local

npx nuxi@latest init -t themes/content-wind my-website

Then follow the instructions and you are ready to go 🚀

Online

Get started online on https://nuxt.studio/themes/content-wind

License 📎

MIT License

content-wind's Issues

pnpm issue

Pnpm version: 7.1.2

~/tmp/docs-test via  v16.14.2
❯ pnpm install --shamefully-hoist

~/tmp/docs-test via  v16.14.2 took 10s
❯ pnpm dev

> @ dev /Users/yesyes/tmp/docs-test
> nuxi dev
Nuxt CLI v3.0.0-rc.3                                                                              07:18:56
                                                                                                  07:18:56
  > Local:    http://localhost:3000/
  > Network:  http://192.168.1.13:3000/

✔ Using ~/components/content for components in Markdown                             @nuxt/content 07:19:00
ℹ Using default Tailwind CSS file from runtime/tailwind.css                      nuxt:tailwindcss 07:19:00
ℹ Merging Tailwind config from ~/tailwind.config.js                              nuxt:tailwindcss 07:19:00
ℹ Tailwind Viewer: http://localhost:3000/_tailwind/                              nuxt:tailwindcss 07:19:00
ℹ Vite server warmed up in 582ms                                                                  07:19:03
ℹ Vite client warmed up in 2660ms                                                                 07:19:03
✔ Vite server built in 2000ms                                                                     07:19:05
✔ Nitro built in 1317 ms                                                                    nitro 07:19:06
TypeError [ERR_PACKAGE_IMPORT_NOT_DEFINED]: Package import specifier "#imports" is not defined in package /Users/yesyes/tmp/docs-test/node_modules/.pnpm/@[email protected]/node_modules/@nuxt/content-edge/package.json imported from /Users/yesyes/tmp/docs-test/node_modules/.pnpm/@[email protected]/node_modules/@nuxt/content-edge/dist/runtime/components/ContentDoc.mjs
    at new NodeError (node:internal/errors:371:5)
    at throwImportNotDefined (node:internal/modules/esm/resolve:442:9)
    at packageImportsResolve (node:internal/modules/esm/resolve:819:3)
    at moduleResolve (node:internal/modules/esm/resolve:973:21)
    at defaultResolve (node:internal/modules/esm/resolve:1080:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:530:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:251:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:79:40)
    at link (node:internal/modules/esm/module_job:78:36) {
  code: 'ERR_PACKAGE_IMPORT_NOT_DEFINED'
}

Project unresponsive

Hey, when running the project in development mode the website loads up but after 30 seconds or so the page will become unresponsive and my computer will go mental. Even after restarting the development and trying a different browser, the issue occurs.

Npm - 10.2.1
Node - 18.18.2

Update dependency to Content v2

Once @nuxt/content v2 is released

Inline code formatting issue

Hello, there's an issue when i use back ticks to highlight inline code, there's a result:

Why back ticks are shown when being rendered? I didn't notice this in a playground: https://content.nuxtjs.org/playground/

Seems like it's happening only in this template. Also i've noticed usage of :sparkles: icons. Where i can check the full list of available icons?

You need plugins to import files that are not JavaScript - from extends @nuxt-themes/elements components

I am trying to deploy to Github Actions by using components extended from @nuxt-themes/elements which are Alert.vue, List.vue & CodeGroup.vue but got the following error in Github Actions:

Error:  Unexpected token (Note that you need plugins to import files that are not JavaScript)
file: /home/runner/work/blog/blog/blog/node_modules/.pnpm/@[email protected]/node_modules/@nuxt-themes/elements/components/globals/Alert.vue?vue&type=style&index=0&scoped=5ebafdf9&lang.ts?inline&used:1:0
1: .alert{margin-top:var(--space-8);margin-bottom:var(--space-8);border-radius:var(--radii-md);padding-left:var(--space-...
   ^
Error:  Unexpected token (Note that you need plugins to import files that are not JavaScript)
  at error (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:2125:30)
  at Module.error (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:13452:16)
  at Module.tryParse (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:14163:25)
  at Module.setSource (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:13765:39)
  at ModuleLoader.addModuleSource (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:23730:20)

Running it locally renders the Vue components fine & also builds the static production build without any problem.

Error happens while npm run generate in this context of Github Actions:

• Node v18.15.0
• pnpm v6
• Nuxt v3.4.3
• @nuxt/content v2.6.0
• @nuxt-themes/elements v0.9.4

How can i customise background colour?

How can i customise background colour?

Support code diffs & file names

Hi,

It would be cool if this could support code diffs, like seen here:

In addition to file names and tabs like:

I wasn't sure if these are natively supported by Nuxt Content v2 already, and needed some form of syntax or flag. These are in the docs.

Github Icon Shows ”Twitter” On-Hover

I noticed this on https://content-wind.nuxt.dev/about

If you mouse-over the GitHub icon, "Twitter" is displayed.

Static deployment to github static resource js or css 404

Does yarn generate need any other configuration?

Fresh install failed with 3 errors

Reproduction

1. Cloned the repo
2. npm i
3. npm run dev

Errors in Terminal and the website doesn't show up

 ERROR  Missing "./dist/app/entry" export in "nuxt3" package

i Vite server using experimental vite-node...                                              

 ERROR  Missing "./dist/app/entry" export in "nuxt3" package

i @nuxt-themes/config-edge v0.0.1-27648855.385c9ae enabled!                                             
i Using Content Wind by Sebastien Chopin (@Atinux)                                                      
√ Design Tokens built in 120ms                                                                  

 ERROR  Rollup error:  Unexpected token (Note that you need plugins to import files that are not JavaScript)

√ Nitro built in 1503 ms

The localhost page is stuck on this:

And this error in Console:

GET http://localhost:3000/ 503 (Server Unavailable)

Development server is not starting properly

Development server is not starting properly.
In the browser it only shows nuxt's loading screen and in console "503 service unavailable"

[nuxt] [request error] fetch failed - while serving app locally

Getting this error spammed after I try to visit the locally served app. Using M1 mac, yarn 1.22.17 - any idea? I basically just cloned and installed dependencies.

[nuxt] [request error] fetch failed ()
  at createError (./node_modules/h3/dist/index.mjs:191:15)
  at nodeHandler (./node_modules/h3/dist/index.mjs:381:21)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async ufetch (./node_modules/unenv/runtime/fetch/index.mjs:9:17)
  at async $fetchRaw2 (./node_modules/ohmyfetch/dist/chunks/fetch.mjs:131:20)
  at async Object.errorhandler [as onError] (./.nuxt/dev/index.mjs:336:16)
  at async nodeHandler (./node_modules/h3/dist/index.mjs:389:9)
  at async ufetch (./node_modules/unenv/runtime/fetch/index.mjs:9:17)
  at async $fetchRaw2 (./node_modules/ohmyfetch/dist/chunks/fetch.mjs:131:20)
  at async Object.errorhandler [as onError] (./.nuxt/dev/index.mjs:336:16)
[h3] [unhandled] H3Error: fetch failed ()
    at createError (file:///Users/bird/GitHub/wtfffff/node_modules/h3/dist/index.mjs:191:15)
    at nodeHandler (file:///Users/bird/GitHub/wtfffff/node_modules/h3/dist/index.mjs:381:21)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async ufetch (file:///Users/bird/GitHub/wtfffff/node_modules/unenv/runtime/fetch/index.mjs:9:17)
    at async $fetchRaw2 (file:///Users/bird/GitHub/wtfffff/node_modules/ohmyfetch/dist/chunks/fetch.mjs:131:20)
    at async Object.errorhandler [as onError] (file:///Users/bird/GitHub/wtfffff/.nuxt/dev/index.mjs:336:16)
    at async nodeHandler (file:///Users/bird/GitHub/wtfffff/node_modules/h3/dist/index.mjs:389:9)
    at async ufetch (file:///Users/bird/GitHub/wtfffff/node_modules/unenv/runtime/fetch/index.mjs:9:17)
    at async $fetchRaw2 (file:///Users/bird/GitHub/wtfffff/node_modules/ohmyfetch/dist/chunks/fetch.mjs:131:20)
    at async Object.errorhandler [as onError] (file:///Users/bird/GitHub/wtfffff/.nuxt/dev/index.mjs:336:16) {
  statusCode: 500,
  fatal: false,
  unhandled: true,
  statusMessage: 'Internal Server Error'
}

IDEA: Sitemap support?

Thanks for building this! Could you add a sitemap generation with this if possible?

rendering issue NITRO_PRESET=azure

I have noticed a rendering issue when a route is visited for the first time after a build with NITRO_PRESET=azure

Steps to reproduce:

git clone [email protected]:Atinux/content-wind.git cw-issue
cd cw-issue
yarn
NITRO_PRESET=azure yarn build
npx @azure/static-web-apps-cli start .output/public --api-location .output/server

This should start the azure static web app cli on localhost:4280 which proxies requests to static pages and functions.

When I navigate to localhost:4280 the / route renders nicely. Clicking About in the nav bar yields the results in the image below. Reloading http://localhost:4280/about shows the properly rendered /about route.

Alternately, if I first navigate to localhost:4280/about it will render nicely. Then clicking on the Home link in the nav bar shows raw json from the path="/" content query.

Seems to need a full reload on each route. I suspect there is some state preserved serverside because after all the routes have been hit once, I can open the pages in a different browser or incognito and the issue is no longer there.

I see this issue when running builds locally and also when builds are freshly deployed to azure static web apps.

I'm guessing this might not be the right place to report this. I would appreciate any debug tips or redirects.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update actions/checkout digest to 692973e
• chore(deps): update all non-major dependencies (@nuxt/content, @nuxt/eslint-config, @nuxthq/studio, @nuxtjs/color-mode, @nuxtjs/tailwindcss, @tailwindcss/typography, @types/node, nuxt, release-it, typescript)
• chore(deps): update devdependency eslint to v9
• chore(deps): update pnpm/action-setup action to v4
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/studio.yml

• actions/checkout v4@b4ffde65f46336ab88eb53be808477a3936bae11
• pnpm/action-setup v3.0.0
• actions/setup-node v4
• JamesIves/github-pages-deploy-action v4

npm

.demo/package.json

package.json

• @nuxt/content ^2.12.1
• @nuxthq/studio ^2.0.0
• @nuxtjs/color-mode ^3.4.1
• @nuxtjs/tailwindcss ^6.12.0
• @tailwindcss/typography ^0.5.13
• nuxt-icon ^0.6.10
• @nuxt/eslint-config ^0.3.13
• @types/node ^20.14.2
• eslint ^8.57.0
• nuxt ^3.12.1
• release-it ^17.3.0
• typescript ^5.4.5

---

• Check this box to trigger a request for Renovate to run again on this repository

show table of content on a side bar

Is there a way that the "table of content" for the current page can be displayed somewhere?

Best Regards,
Austin

support mermaid

As a software developer, I need to draw sequence diagram everyday. I am wondering is it easy to add mermaid support?

BR,Austin

How would I enable TailwindCSS Intellisense?

I ran npx tailwindcss init and it generates tailwind.config.js.

I put this in there:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./content/**/*.md"],
  theme: {
    extend: {},
  },
  plugins: [],
}

and expected TailwindCSS Intellisense to "just work", but it's not 🤔

Anyone have a solution?

Nuxt Version Bump

At the time of writing, updating the dependencies using ncu -u produces the following results:

 @iconify/vue                           ^3.2.1  →   ^4.1.1
 @nuxtjs/color-mode                     ^3.0.3  →   ^3.3.0
 @nuxtjs/eslint-config-typescript      ^10.0.0  →  ^12.1.0
 @vueuse/core                           ^8.5.0  →  ^10.4.1
 eslint                                ^8.16.0  →  ^8.50.0
 nuxt                              ^3.0.0-rc.4  →   ^3.7.4
 nuxt-component-meta                    ^0.1.5  →   ^0.5.4
 nuxt-windicss                          ^2.3.2  →   ^2.6.1
 pathe                                  ^0.3.0  →   ^1.1.1
 typescript                             ^4.7.2  →   ^5.2.2
 windicss                               ^3.5.4  →   ^3.5.6

While Nuxt has matured from rc.4 to stable, several other packages have had major version bumps.

Currently, running npm run dev after updating the dependencies produces the following error:

 ERROR  Cannot start nuxt:  (0 , _kit.addAutoImport) is not a function

The text color in dark mode is wrong

The text color in dark mode is wrong after @next-themes/typography gets updated.

Pinceau warning after upgrading to 0.4.0

Hi,

I have the following warning since I upgraded this module to version 0.4.0

Do you have any idea what the problem is ?

Errors in the project

Hi, I'm just setting up the project and I'm getting 2 errors in vscode.

These errors do not affect the functionality of the project, but I find them a bit annoying during development.

List.vue:

ColorModeSwitch.vue:

Is it only me who has these errors and how can I fix them?

I might have already found a solution for the first error:

<script setup lang="ts">
const { flatUnwrap } = useUnwrap()
const slots = useSlots()

defineProps({
  icon: {
    type: String,
    default: 'ph:check-circle-duotone'
  }
})
</script>

<template>
  <ul class="p-0">
    <li v-for="(item, index) of flatUnwrap((slots.default && 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>
  </ul>
</template>

For the second one I haven't found anything yet, but I don't seem to be the only one with this problem:
nuxt-modules/color-mode#168

404 page shows error

Going to https://content-wind.nuxt.dev/404 shows:
500 gt is undefined

Type of theme is not assignable in nuxt.config.ts

VSCode show an error at the following lines when I open nuxt.config.ts file.

app: {
    theme: {
      meta: {
        name: 'Content Wind',
        author: 'Sebastien Chopin (@Atinux)',
        description: 'A lightweight Nuxt theme to build a Markdown driven website, based on Nuxt Content, TailwindCSS and Iconify ✨'
      }
    }
  }

The error message:

Type '{ theme: { meta: { name: string; author: string; description: string; }; }; }' is not assignable to type '{ baseURL?: string; buildAssetsDir?: string; assetsPath?: any; cdnURL?: string; head?: { [x: string]: any; charset?: string; viewport?: string; meta?: { [x: string]: any; }[]; link?: { [x: string]: any; }[]; style?: { [x: string]: any; }[]; ... 5 more ...; htmlAttrs?: { ...; }; }; }'.
  Object literal may only specify known properties, and 'theme' does not exist in type '{ baseURL?: string; buildAssetsDir?: string; assetsPath?: any; cdnURL?: string; head?: { [x: string]: any; charset?: string; viewport?: string; meta?: { [x: string]: any; }[]; link?: { [x: string]: any; }[]; style?: { [x: string]: any; }[]; ... 5 more ...; htmlAttrs?: { ...; }; }; }'.ts(2322)
index.d.ts(833, 3): The expected type comes from property 'app' which is declared here on type 'NuxtConfig'

How to generate List pages

First of all thanks for this amazing project, it has almost every thing i need to generate a static blog site.
However i dont see lists/indexes being generated automatically for a directory

Eg i have

content/blog/1.post-one.md
content/blog/2.post-two.md

I managed to get the blog/ link at top navigation, but could not figureout how to get it to generate a blog list page based on files in tht directory.

I am new to nuxt and I am not sure if this is supported, or if it is supposed to generate it.

I believe, this is would be one of the basic requirement for most sites to have ability to generate index pages.

Either an example, or a link to how this can be achieved, or a clarification about it will save new users lot of time.

Again, thanks for this wonderful project

[Question] Tailwind use

The Tailwind use is because you don't know/want to work with css or do you have another why?

The link to Navbar is incorrect.

1.index.md

### Navigation

The navigation is generated from your pages, you can take a look at the [`<Navbar>`](https://github.com/Atinux/content-wind/blob/main/theme/components/Navbar.vue) component to see how it works.

When I access a link in the <Navbar> I get a 404.
Maybe the correct link destination is AppNavbar.vue?

Pre-rendered website does not work (?)

Hi, with a freshly created project from content-wind, generate, preview the pre-rendered website doesn't seem to work, though the generate step seems successful.

Is this a problem with content v2 or with this template?

Reproduce:

npx nuxi init my-website -t atinux/content-wind
cd my-website
yarn install
yarn generate
yarn preview

Now visit http://localhost:3000/about

The 'home' page flickers and then is re-rendered with some error:

[Suggestion] Add a prettier/eslint config

Since this is a starter template, having linting out of the box would be great.

How can i modify the AppLayout.vue and AppNavBar.vue?

Hi there,

Thanks for this project!

I have installed the project with this command:
npx nuxi@latest init -t themes/content-wind my-website

How can i customize the layout? This is possible?

Add option to disable Tailwind's module (and maybe others too)

I'm using the unocss module and my classes have duplicated definitions due to both frameworks generating their own styles.

I'd like a way to opt-out, similar to how the typography setting works.

How will you build the static files for this as a SPA?

How will you build the static files for this as a SPA?

I'm having trouble where the static files render but the markdown files are not found

eslint shows problems in some files

eslint shows problems in VSCode. Is it required any extra configuration?

Here are the list of the problems:

components/content/Alert.vue:

Component name "Alert" should always be multi-word.eslintvue/multi-word-component-names

components/content/List.vue:

Component name "List" should always be multi-word.eslintvue/multi-word-component-names

components/content/AppNavbar.vue:

Property 'twitter' does not exist on type '{}'.ts(2339)
Property 'github' does not exist on type '{}'.ts(2339)

components/content/ColorModeSwitch.vue:

Type '{ placeholder: string; }' is not assignable to type 'ComponentProps<{ name: any; props: { placeholder: StringConstructor; tag: { type: StringConstructor; default: string; }; }; }>'.
Type '{ placeholder: string; }' is missing the following properties from type '{ name: any; props: { placeholder: StringConstructor; tag: { type: StringConstructor; default: string; }; }; }': name, propsts(2322)

Cannot start nuxt: The requested module 'minimatch' does not provide an export named 'default'

On install, and after running pnpm run dev i get the following error:

ERROR Cannot start nuxt: The requested module 'minimatch' does not provide an export named 'default'

import minimatch from 'minimatch';
^^^^^^^^^
SyntaxError: The requested module 'minimatch' does not provide an export named 'default'
at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)

Am I doing something wrong?

Can we add it as module to an existing project?

Can we add this as module in normal Nuxt project that has already setup content?

wrong theme switcher behavior

The current theme switcher button shows Sun icon when it's light mode and Moon icon when it's in dark mode, which is actually quite the opposite of how its supposed to behave. It should be Moon when it's in light mode and vice-versa.

Can open a PR if you feel like this needs to be fixed.

Excerpt displaying

Hello, i don't find how to display the excerpt on a list of articles.

 <div v-for="article in articles" :key="article._path">
      <h2>{{ article.title }}</h2>
      <ContentRenderer :value="article" :excerpt="true" />
    </div>

this code display all the content of page :

Thanks for help 👍🏼

Theme installation command produces an empty directory

I have no idea if it's just me but despite the fact it was working two days ago on the same machine, now the installation command just produce an empty directory

nuxt content command is still working properly

How to display Blog Content?

Thank you for putting this together!
My understanding of Nuxt is not great but growing as I tinker with it.

1. How would I display individual blog posts located at content/blog/post-1.md?
2. A question about image paths. This works in development ![vectorme](../public/assets/images/vectorme.png) but is broken when uploaded to Netlify.

Please forgive my newb questions.

Support Wikilink Syntax

I would like to use Nuxt Content to generate HTML form Obsidian files (see https://www.obsidian.md). Obsidian uses the Wikilink syntax to reference files.

e.g.
[[anotherfile]] references the file "anotherfile.md" in the current directory.

This syntax is (as far as I could see) not supported by nuxt content. I could do some preprocessing to convert that syntax to the standard markdown syntax. But that would not work if I use the content-directory directly as the root folder for the Obsidian vault.

Therefore it would be great if you could provide a remark plugin and a configuration example that handles that.

0.6.7 Colors bug~~

Upgrade to 0.6.7. The link color changed to blue.