Skip to content

Commit c95ca84

Browse files
author
Javier Martinez
committed
version 0.2.0. Bundle it as a Nuxt package
0 parents  commit c95ca84

40 files changed

+20123
-0
lines changed

Diff for: ‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

Diff for: ‎CHANGELOG.md

Whitespace-only changes.

Diff for: ‎LICENSE

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
MIT License
2+
3+
Copyright (c) 2020 64 Robots with the contributions of:
4+
- Javier Martinez (64 Robots Company)
5+
- Pepe García (64 Robots Company)
6+
7+
Permission is hereby granted, free of charge, to any person obtaining a copy
8+
of this software and associated documentation files (the "Software"), to deal
9+
in the Software without restriction, including without limitation the rights
10+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11+
copies of the Software, and to permit persons to whom the Software is
12+
furnished to do so, subject to the following conditions:
13+
14+
The above copyright notice and this permission notice shall be included in all
15+
copies or substantial portions of the Software.
16+
17+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23+
SOFTWARE.

Diff for: ‎README.md

Whitespace-only changes.

Diff for: ‎docs/.gitignore

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
node_modules
2+
*.iml
3+
.idea
4+
*.log*
5+
.nuxt
6+
.vscode
7+
.DS_Store
8+
coverage
9+
dist
10+
sw.*

Diff for: ‎docs/README.md

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# docs
2+
3+
## Setup
4+
5+
Install dependencies:
6+
7+
```bash
8+
yarn install
9+
```
10+
11+
## Development
12+
13+
```bash
14+
yarn dev
15+
```
16+
17+
## Static Generation
18+
19+
This will create the `dist/` directory for publishing to static hosting:
20+
21+
```bash
22+
yarn generate
23+
```
24+
25+
To preview the static generated app, run `yarn start`
26+
27+
For detailed explanation on how things work, checkout [nuxt/content](https://content.nuxtjs.org) and [@nuxt/content theme docs](https://content.nuxtjs.org/themes-docs).

Diff for: ‎docs/content/en/concepts/cli.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
title: Command-line tools
3+
description: ''
4+
position: 3
5+
category: 'Configuration'
6+
---
7+
You can use these convenient helpers for creating Authors, Categories and Posts:
8+
9+
- `yarn new:author`
10+
- `yarn new:category`
11+
- `yarn new:post`
12+
![Creating a Post](https://user-images.githubusercontent.com/12644599/93211098-0b32fa00-f761-11ea-9e33-ebe617dc1ae9.gif)
13+
These commands will generate the files in the right folders

Diff for: ‎docs/content/en/concepts/components.md

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
title: Components
3+
description: ''
4+
position: 2
5+
category: 'Configuration'
6+
---
7+
The package comes with some global Vue.js components ready out of the box.
8+
9+
### PostList
10+
11+
The `PostList` component is used to render a collection of posts. By default it renders the `posts` collection but you can specify your own by the `collection`prop.
12+
13+
```vue
14+
<PostList v-slot="{ posts }">
15+
<DisplayPosts :posts="posts" />
16+
</PostList>
17+
```
18+
You can also render a single category. Note that you also easily can handle errors or perform redirects by using the `redirect` prop.
19+
You will use the posts slot containing all the matched posts.
20+
21+
```vue
22+
<PostList v-slot="{ posts, error }" :category="$route.params.slug">
23+
<div v-if="error.code">
24+
{{ error.message }}
25+
</div>
26+
<div v-else>
27+
<div class="text-4xl font-bold">{{ $route.params.slug }}</div>
28+
<div class="grid gap-12 lg:grid-cols-2 mt-8">
29+
<ArticleListItem v-for="post in posts" :key="post.path" :post="post" />
30+
</div>
31+
</div>
32+
</PostList>
33+
```
34+
35+
### Post
36+
37+
The `Post` component render a given post by using the `permalink` prop. Note that it also has the `redirect` and `error` prop.
38+
The `post` and `author` slots are available to render the matched content
39+
40+
```vue
41+
<Post v-slot="{ post, author }" :permalink="$route.params.permalink" redirect="/">
42+
<PostContent :post="post" :author="author" />
43+
</Post>
44+
```

Diff for: ‎docs/content/en/concepts/content.md

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
title: Content
3+
description: ''
4+
position: 1
5+
category: 'Configuration'
6+
---
7+
8+
Once you've setup your blog, you can directly start writing your content. Here is a few things you should know before put your hands down to work.
9+
10+
This is how a the `/content` folder is structured
11+
12+
```bash
13+
content/
14+
categories/
15+
frontend.json
16+
authors/
17+
sample-author.json
18+
posts/
19+
my-awesome-blog.md
20+
```
21+
22+
### Categories
23+
24+
This is where you put your categories, just create a `<category-slug>.json` file with the following content in it.
25+
26+
You can create them manually or using the command line tool `yarn new:category`
27+
28+
**Example**
29+
30+
```json[frontend.json]
31+
{
32+
"name": "Frontend"
33+
}
34+
```
35+
36+
### Authors
37+
38+
This is where you put your authors, just create a `<author-slug>.json` file with the following content in it.
39+
40+
You can create them manually or using the command line tool `yarn new:author`
41+
42+
**Example**
43+
44+
```json[sample-author.json]
45+
{
46+
"name": "Sample Author",
47+
"avatar": "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
48+
"twitter": "@example"
49+
}
50+
```
51+
52+
### Posts
53+
54+
This is where you put your blog posts, see [writing content](https://content.nuxtjs.org/writing) in `@nuxt/content` for reference
55+
56+
You can create them manually or using the command line tool `yarn new:post`
57+
58+
### Front-matter
59+
60+
To make it work properly, make sure to include these properties in the front-matter section of your markdown files.
61+
62+
- `title` (`String`)
63+
- The title of the blog post. Will be injected in metas
64+
- `description` (`String`)
65+
- The description of the blog post. Will be injected in metas
66+
- `image` (`String`)
67+
- This will be used a a post image
68+
- `author` (`String`)
69+
- This should match the author file name
70+
- `category` (`String`)
71+
- This should match the category slug
72+
73+
### Example
74+
```bash[content/posts/frontend/first-blog-post.md]
75+
---
76+
title: This is my first Post
77+
description: 'This is my awesome description of my first blog post'
78+
image: https://images.unsplash.com/photo-1521185496955-15097b20c5fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1547&q=80
79+
author: sample-author
80+
category: frontend
81+
---
82+
83+
This is my first blog post
84+
```

Diff for: ‎docs/content/en/index.md

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: Quick start
3+
description: ''
4+
position: 1
5+
category: 'Getting started'
6+
---
7+
8+
To get started quickly you can use the [create-nuxt-content-blog](https://github.com/64robots/create-nuxt-content-blog) package.
9+
10+
<code-group>
11+
<code-block label="Yarn" active>
12+
13+
```bash
14+
yarn create nuxt-content-blog <project-name>
15+
```
16+
17+
</code-block>
18+
<code-block label="NPX">
19+
20+
```bash
21+
# Make sure you have npx installed (npx is shipped by default since NPM 5.2.0) or npm v6.1 or yarn.
22+
npx create-nuxt-content-blog <project-name>
23+
```
24+
25+
</code-block>
26+
<code-block label="NPM">
27+
28+
```bash
29+
# Starting with npm v6.1 you can do:
30+
npm init nuxt-content-blog <project-name>
31+
```
32+
33+
</code-block>
34+
</code-group>
35+
36+
It will ask few questions about your project and install all the dependencies. The next step is to get into your project folder and launch it:
37+
38+
<code-group>
39+
<code-block label="Yarn" active>
40+
41+
```bash
42+
cd <project-name>
43+
yarn dev
44+
```
45+
46+
</code-block>
47+
<code-block label="NPM">
48+
49+
```bash
50+
cd <project-name>
51+
npm run dev
52+
```
53+
54+
</code-block>
55+
</code-group>
56+
57+
The application is now running on [http://localhost:3000](http://localhost:3000). Well done!

Diff for: ‎docs/content/en/manual-installation.md

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
---
2+
title: Manual Installation
3+
description: ''
4+
position: 2
5+
category: 'Getting started'
6+
---
7+
8+
So you want to start a blog, right? Let's go for it! This themes relies on NuxtJS, so you need:
9+
10+
### `package.json`
11+
12+
> This file can be created with `npm init`.
13+
14+
Install `nuxt` and `@nuxt/content-theme-docs`:
15+
16+
<code-group>
17+
<code-block label="Yarn" active>
18+
19+
```bash
20+
yarn add nuxt @64robots/nuxt-content-blog
21+
```
22+
23+
</code-block>
24+
<code-block label="NPM">
25+
26+
```bash
27+
npm install nuxt @64robots/nuxt-content-blog
28+
```
29+
30+
</code-block>
31+
</code-group>
32+
33+
**Example**
34+
35+
```json[package.json]
36+
{
37+
"name": "blog",
38+
"version": "1.0.0",
39+
"scripts": {
40+
"dev": "nuxt",
41+
"build": "nuxt build",
42+
"start": "nuxt start",
43+
"generate": "nuxt generate"
44+
},
45+
"dependencies": {
46+
"@64robots/nuxt-content-blog": "^0.1.12",
47+
"nuxt": "^2.14.0"
48+
}
49+
}
50+
```
51+
52+
### `nuxt.config.js`
53+
54+
Import the theme function from `@64robots/nuxt-content-blog`:
55+
56+
```js[nuxt.config.js]
57+
import theme from '@64robots/nuxt-content-blog'
58+
59+
export default theme()
60+
```
61+
62+
The theme exports a function to setup the `nuxt.config.js` and allows you to add / override the default config.
63+
64+
> Check out the documentation of [defu.arrayFn](https://github.com/nuxt-contrib/defu#array-function-merger) to see how the config is merged.
65+
66+
67+
### `tailwind.config.js`
68+
69+
You can override the existing tailwind configuration, check out the [Tailwindcss documentation](https://tailwindcss.com/docs/configuration) for that.
70+
71+
**Example**
72+
73+
```js[tailwind.config.js]
74+
module.exports = {
75+
theme: {
76+
extend: {
77+
colors: {
78+
}
79+
}
80+
}
81+
}
82+
```
83+
84+
### `content/`
85+
86+
This is where you put your markdown content files.
87+
88+
### `static/`
89+
90+
This is where you put your static assets like the logo.
91+
92+
**Example**
93+
94+
```bash
95+
content/
96+
categories/
97+
frontend.json
98+
authors/
99+
sample-author.json
100+
posts/
101+
my-awesome-blog.md
102+
static/
103+
icon.png
104+
nuxt.config.js
105+
package.json
106+
```

Diff for: ‎docs/content/settings.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"title": "Nuxt Content Blog",
3+
"url": "",
4+
"logo": {
5+
"light": "/logo-light.svg",
6+
"dark": "/logo-dark.svg"
7+
},
8+
"github": "64robots/nuxt-content-blog",
9+
"twitter": "@64robots"
10+
}

Diff for: ‎docs/nuxt.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import theme from '@nuxt/content-theme-docs'
2+
3+
export default theme({})

0 commit comments

Comments
 (0)