From b1504300f91a783e38dd843655b8af5b5e5bb365 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Ollivier?= Date: Tue, 23 Aug 2022 15:55:20 +0200 Subject: [PATCH 1/2] docs(#68): add article creation --- .../content/articles/3.create-an-article.md | 67 +++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 template/content/articles/3.create-an-article.md diff --git a/template/content/articles/3.create-an-article.md b/template/content/articles/3.create-an-article.md new file mode 100644 index 000000000..8d368adcd --- /dev/null +++ b/template/content/articles/3.create-an-article.md @@ -0,0 +1,67 @@ +--- +cover: https://images.unsplash.com/photo-1502472584811-0a2f2feb8968?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2970&q=80 +author: + name: Clément Ollivier + avatarUrl: https://pbs.twimg.com/profile_images/1370286658432724996/ZMSDzzIi_400x400.jpg + link: https://twitter.com/clemcodes +date: 2022-08-23 +--- + +# Create an article + +To create a new article, create a new Markdown file in the `content/articles` directory: + +```bash +touch content/articles/1.my-new-article.md +``` + +## Display the article in the list + +For your article to be correctly displayed in the [articles list](/articles), define a `cover` and `date` property in the frontmatter: + +```yaml [content/articles/1.my-new-article.md] +--- +cover: path/to/cover +date: 2022-08-23 +--- +``` + +The `cover` property can be a local path relative to the `/public` directory or an external URL. + +Your article will now be displayed in the list with its filename as a default title. + +## Edit your article + +Under the frontmatter block, enter a Markdown `h1` tag and a line of text: + +```md [content/articles/1.my-new-article.md] +--- +cover: path/to/cover +date: 2022-08-23 +--- + +# An awesome article + +This article is little by size but big by heart. +``` + +Your article will now be displayed in the list with the title and description you wrote in Markdown. + +## Override title and description + +If you want to change the title and description displayed on the list and in the meta tags of the article, add the `title` and `description` property to your frontmatter: + +```md[content/articles/1.my-new-article.md] +--- +cover: path/to/cover +date: 2022-08-23 +title: Another title +description: Another description +--- +``` + +## Read more + +Alpine is a Nuxt theme using the Content module in `documentDriven` mode. + +👉 Learn more in the [Nuxt Content documentation](https://content.nuxtjs.org/). From d583c7f3bf5916b836c912a03c53635411e5f1a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Ollivier?= Date: Tue, 23 Aug 2022 17:16:22 +0200 Subject: [PATCH 2/2] docs: update write articles guide --- .../content/articles/3.create-an-article.md | 67 -------------- template/content/articles/3.write-articles.md | 92 ++++++++++++------- 2 files changed, 59 insertions(+), 100 deletions(-) delete mode 100644 template/content/articles/3.create-an-article.md diff --git a/template/content/articles/3.create-an-article.md b/template/content/articles/3.create-an-article.md deleted file mode 100644 index 8d368adcd..000000000 --- a/template/content/articles/3.create-an-article.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -cover: https://images.unsplash.com/photo-1502472584811-0a2f2feb8968?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2970&q=80 -author: - name: Clément Ollivier - avatarUrl: https://pbs.twimg.com/profile_images/1370286658432724996/ZMSDzzIi_400x400.jpg - link: https://twitter.com/clemcodes -date: 2022-08-23 ---- - -# Create an article - -To create a new article, create a new Markdown file in the `content/articles` directory: - -```bash -touch content/articles/1.my-new-article.md -``` - -## Display the article in the list - -For your article to be correctly displayed in the [articles list](/articles), define a `cover` and `date` property in the frontmatter: - -```yaml [content/articles/1.my-new-article.md] ---- -cover: path/to/cover -date: 2022-08-23 ---- -``` - -The `cover` property can be a local path relative to the `/public` directory or an external URL. - -Your article will now be displayed in the list with its filename as a default title. - -## Edit your article - -Under the frontmatter block, enter a Markdown `h1` tag and a line of text: - -```md [content/articles/1.my-new-article.md] ---- -cover: path/to/cover -date: 2022-08-23 ---- - -# An awesome article - -This article is little by size but big by heart. -``` - -Your article will now be displayed in the list with the title and description you wrote in Markdown. - -## Override title and description - -If you want to change the title and description displayed on the list and in the meta tags of the article, add the `title` and `description` property to your frontmatter: - -```md[content/articles/1.my-new-article.md] ---- -cover: path/to/cover -date: 2022-08-23 -title: Another title -description: Another description ---- -``` - -## Read more - -Alpine is a Nuxt theme using the Content module in `documentDriven` mode. - -👉 Learn more in the [Nuxt Content documentation](https://content.nuxtjs.org/). diff --git a/template/content/articles/3.write-articles.md b/template/content/articles/3.write-articles.md index 2024534d4..bf41867d6 100644 --- a/template/content/articles/3.write-articles.md +++ b/template/content/articles/3.write-articles.md @@ -1,71 +1,97 @@ --- cover: /articles/write-articles.png date: 2022-08-23 +description: Writing Markdown articles in Alpine is straightforward. --- # Write Articles Write Markdown articles in Alpine is straightforward. -## Create a blog - -Open a terminal an run the following command: +## Create an articles list +Create a new file in the `content/` directory: + ```bash -npx nuxi create alpine my-blog +touch content/2.articles.md ``` -## Dependencies +The numbered prefix determines the order of the menu items. -Next, go to to `my-blog/` directory and install the dependencies: +In this file, use the `articles-list` component to display the list of articles: + +```md [2.articles.md] +--- +title: 'Articles' +layout: 'page' +--- + +::articles-list +--- +path: articles +--- +:: -```bash -npm install ``` -## Development +The `path` prop corresponds to the directory where the articles are stored. + +## Display an article in the list -Start the development server on port 3000: +Create a new file in the `/content/articles` directory: ```bash -npm run dev +mkdir content/articles +touch content/articles/1.my-new-article.md ``` -Next, you can start creating your content in Markdown in the `content/` directory. +For your article to be correctly displayed in the [articles list](/articles), define a `cover` and `date` property in the frontmatter: +```yaml [content/articles/1.my-new-article.md] +--- +cover: path/to/cover +date: 2022-08-23 +--- +``` -## Deploy +The `cover` property can be a local path relative to the `/public` directory or an external URL. -### Static hosting +Your article will now be displayed in the list with its filename as a default title. -You can deploy Alpine to any static hosting by running the following command: +## Edit your article -```bash -npm run generate -``` +Under the frontmatter block, enter a Markdown `h1` tag and a line of text: -This command will create a `dist/` directory with the compiled files ready to be uploaded to any static hosting. +```md [content/articles/1.my-new-article.md] +--- +cover: path/to/cover +date: 2022-08-23 +--- -### Edge platforms +# An awesome article -Alpine supports deploying to the following platforms with **zero configuration**: +This article is little by size but big by heart. +``` -- [Vercel](https://vercel.com) -- [Netlify](https://netlify.com) -- [and more...](https://v3.nuxtjs.org/guide/deploy/presets#supported-hosting-providers) +Your article will now be displayed in the list with the title and description you wrote in Markdown. -### Node server +## Override title and description -You can deploy Alpine to a Node server by running the following command: +If you want to change the title and description displayed on the list and in the meta tags of the article, add the `title` and `description` property to your frontmatter: -```bash -npm run build +```md[content/articles/1.my-new-article.md] +--- +cover: path/to/cover +date: 2022-08-23 +title: Another title +description: Another description +--- ``` -This command will create a `.output/` directory with the compiled files ready to be uploaded to any Node server. +You are now ready to edit your article and create new ones! -To start the production server, run the following command: +## Read more -```bash -node .output/server/index.mjs -``` +Alpine is a Nuxt theme using the Content module in `documentDriven` mode. + +👉 Learn more in the [Nuxt Content documentation](https://content.nuxtjs.org/).