Skip to content

Commit

Permalink
1 change by Nuxt Studio
Browse files Browse the repository at this point in the history
  • Loading branch information
Neil-Lin authored Oct 3, 2024
1 parent 14dbaac commit 4454dd6
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 210 deletions.
8 changes: 4 additions & 4 deletions app.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ export default defineAppConfig({
// Configure Content Wind here
cover: '/cover.jpg',
socials: {
twitter: 'Atinux',
github: 'Atinux/content-wind',
mastodon: '@[email protected]'
twitter: '',
github: 'https://github.com/Neil-Lin',
mastodon: ''
}
})
})
207 changes: 4 additions & 203 deletions content/1.index.md
Original file line number Diff line number Diff line change
@@ -1,210 +1,11 @@
---
navigation:
title: Home
layout: full-width
---

# Content Wind test
# Hi, **I'm Neil. 👋**

A lightweight Nuxt theme to build a Markdown driven website, based on [Nuxt Content](https://content.nuxt.com), [TailwindCSS](https://tailwindcss.com) and [Iconify](https://iconify.design)
I am a UI/UX designer who is passionate about universal design.

## Features

- Write pages in Markdown
- Use [layouts](https://nuxt.com/docs/guide/directory-structure/layouts) in Markdown pages
- Enjoy meta tag generation
- Generated navigation from pages
- Leverage TailwindCSS Typography
- Switch between light & dark mode
- Access 100,000 icons from 100+ icon sets
- 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

::button-link
---
external: true
href: https://stackblitz.com/github/Atinux/content-wind/tree/main/.demo?file=content%2F1.index.md
icon: simple-icons:stackblitz
---
Play online on Stackblitz
::

Open a terminal and run the following command:

```bash
npx nuxi init -t themes/content-wind my-website
```

Follow the instructions in the terminal and you are ready to go 🚀

## 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 [content/index.md]
# My title

This first paragraph will be treated as the page meta description.
```

You can overwrite meta tags by using front-matter:

```md [content/index.md]
---
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 Nuxt Content's [document-driven mode](https://content.nuxtjs.org/guide/writing/document-driven) of Nuxt Content.

### Navigation

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

It uses the [Navigation](https://content.nuxt.com/usage/navigation) from Nuxt Content to fetch the navigation object.

To customize the title displayed in the navigation, you can set the `navigation.title` property in the front-matter of your pages:

```md
---
navigation.title: 'Home'
---

# Welcome to my site

With a beautiful description
```

### Theme configuration

You can configure Content Wind global configuration in the `app.config.ts` file:

```ts [signature]
interface AppConfigInput {
cover?: string, // default: '/cover.jpg'
socials?: {
twitter?: string
github?: string
mastodon?: string
}
}
```

Example of settings Twitter and GitHub icons in the navbar:

```ts [app.config.ts]
export default defineAppConfig({
socials: {
twitter: 'Atinux',
github: 'Atinux/content-wind'
mastodon: '@[email protected]'
}
})
```

### 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"}

Learn more on [nuxt-icon](https://github.com/nuxt-modules/icon) documentation.

### 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).

::markdown-block
\`\`\`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.nuxt.com/get-started/configuration#highlight).

### Vue Components

Add Vue components into the `components/content/` directory and start using them in Markdown.

See the `<MarkdownBlock>` component in [`components/content/MarkdownBlock.vue`](https://github.com/Atinux/content-wind/blob/main/.demo/components/content/MarkdownBlock.vue).

By leveraging the [`<ContentSlot>`](https://content.nuxt.com/components/content-slot) component from Nuxt Content, you can use both slots and props in Markdown thanks to the [MDC syntax](https://content.nuxt.com/usage/markdown).

## Deployment

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FAtinux%2Fcontent-wind-template) [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/Atinux/content-wind-template)

### 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://nuxt.com/docs/getting-started/deployment#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://nuxt.com/docs/getting-started/deployment) 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).
I specialize in UI, UX, Vue/Nuxt front-end development, digital accessibility, data visualization, and design management. Currently, my main focus is on implementing the "Design for All" concept of universal design in web design.
30 changes: 27 additions & 3 deletions content/2.about.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,36 @@ navigation:
title: About
layout: full-width
head:
description: This is a custom description for Content Wind about page.
description: About
image: https://fastly.picsum.photos/id/866/536/354.jpg?hmac=tGofDTV7tl2rprappPzKFiZ9vDh5MKj39oa2D--gqhA
---

# About

This is the about page, with a custom description and image for SEO ✨
## Intro

![Content Wind](https://fastly.picsum.photos/id/866/536/354.jpg?hmac=tGofDTV7tl2rprappPzKFiZ9vDh5MKj39oa2D--gqhA)
I entered the field of web design in 2013, working on various types of web and app design and development, including government projects, corporate projects, and company product development and maintenance.In recent years, I have recognized the importance of accessible web design and have shifted my focus to the field of Universal Design in web development.My design philosophy has always followed the principles of Win-Win and achieving a balanced outcome.

## Programming

- HTML5
- CSS/SCSS
- Javascript/jQuery
- Vue/Nuxt
- Version Control

## **Promote**

- Accessibility
- Data visualization
- DesignOps/Design System
- OKR/OGSM
- Scrum
- SEO

## **tools**

- Figma
- VScode
- Sourcetree
- Wordpress

0 comments on commit 4454dd6

Please sign in to comment.