Add blog posts to website #169

antonio-gg-dev · 2023-10-12T10:34:15Z

📚 Description

I've modified the bashunit website to host a blog in addition to the documentation.

Some screenshots to see the result:

I also add some comments to the code to better explain the functionality.

🔖 Changes

Added two buttons to the top navigation that serve as quick access to the documentation and the blog.
- These buttons remain highlighted to indicate to the user which section they are in.
Added a button to the blog on the home page.
Added directory where all blog posts will be hosted.
- All pages within this directory will not have a sidebar.
- Added index page of the posts published on the blog.

✅ To-do list

Make sure that all the pipeline passes
Make sure you have updated the documentation to reflect the changes or new features
Make sure to update the CHANGELOG.md to reflect the new feature or fix

antonio-gg-dev · 2023-10-12T16:12:38Z

Keep in mind that since the web version releases are tied to the bashunit releases, to add new articles a release would be needed.

This has a solution since the articles could be read from main branch and rendered with the latest branch code 🌈 , but adding this behavior would add too much complexity to the PR.

Since the blog was in a functional state I decided to make the PR and will add this functionality later on.

antonio-gg-dev · 2023-10-12T16:24:06Z

docs/posts/0000-00-00-template.md

@@ -0,0 +1,19 @@
+---


This file serves as a template for the posts we create, it has a frontmatter section that need to be filled out besides the post itself.

This metadata must be correctly filled out, as these are used by the index to render the cards that allow access to each post.

date: ISO format, time is not necessary (unless we want to display them in the publications)

title: Post's title

description: Introduction to the post, usually the first paragraph of it

coverUrl: Cover image of the post

coverAlt: Description of the post's cover image

antonio-gg-dev · 2023-10-12T16:24:34Z

docs/posts/0000-00-00-template.md

+
+aside: false
+---
+


To avoid having to repeat the texts written above, these lines allow to render them again within the article itself, the idea is to follow a standard format in all our articles so these lines should not be modified, but can be modified whenever an article requires it.

antonio-gg-dev · 2023-10-12T16:24:39Z

docs/posts/0000-00-00-template.md

+
+<img :src="$frontmatter.coverUrl" :alt="$frontmatter.coverAlt">
+
+Post content


The rest of the article will go here, written in md format.

antonio-gg-dev · 2023-10-12T16:27:21Z

docs/posts/index.md

+---
+aside: false
+---
+


This file is the blog index, displaying a list of posts drawing from the metadata provided with frontmatter.

There's a filter to prevent listing itself and the example template.

antonio-gg-dev · 2023-10-12T16:29:29Z

docs/posts/posts.data.ts

@@ -0,0 +1,3 @@
+import { createContentLoader } from 'vitepress'
+
+export default createContentLoader('posts/*.md', )


This file obtains the metadata from the posts and passes it to the index, this implementation is a very simple builtin provided by VitePress and is sufficient for this first milestone.

If we wanted to read the posts from the main branch with the build from the latest branch, this implementation would need to be modified to use the GitHub API, for now and for simplicity, I've decided to leave it as is.

antonio-gg-dev · 2023-10-12T16:30:33Z

docs/.vitepress/theme/index.ts

+    app.config.globalProperties.$formatDate = (date: string) => {
+      return DateTime.fromISO(date)
+        .toLocaleString(DateTime.DATE_HUGE, { locale: 'en-US' })
+    }


I created this small helper with Luxon to format the post dates from ISO to a standard format, so we won't have to do it manually.

antonio-gg-dev · 2023-10-12T16:31:02Z

docs/.vitepress/config.ts

+
+  srcExclude: [
+    'posts/0000-00-00-template.md'
+  ]


The template is excluded so it is not accessible in the final build.

antonio-gg-dev · 2023-10-12T16:35:07Z

docs/posts/index.md

+import PostCard from './PostCard.vue'
+
+const posts = data.filter((post) => post.url != '/posts/' && post.url != '/posts/0000-00-00-template')
+  .sort((postA, postB) => postA.url < postB.url)


The URL of the posts (the name of the md files) is what is used to order them. I could have used the date metadata, but this way we force ourselves to add the date to the name as well and thus have the same order on our operating systems.

fabriziofs · 2023-10-12T18:41:28Z

I've replace the use of Luxon with the Intl built-in object. But i don't know why the TS compiler show an error with the dateStyle key, so I put a @ts-ignore above that line 🤒

Great work @Tito-Kati, the blog section looks amazing 🚀

docs/.vitepress/config.ts

Chemaclass

I love this initial setup for our internal bashunit blog! Kudos, @Tito-Kati 👏🏼

fabriziofs

🚀

antonio-gg-dev added 4 commits October 12, 2023 12:08

feat: remove sidebar on posts

26914d3

feat: add links to navbar

799a779

feat: add blog button to home

f60ad9d

fix: posts section links

b5e39c0

antonio-gg-dev added documentation Improvements or additions to documentation enhancement New feature or request labels Oct 12, 2023

antonio-gg-dev self-assigned this Oct 12, 2023

antonio-gg-dev added 4 commits October 12, 2023 14:07

feat: add blog index

85269ef

feat: post card design

0e09c2e

feat: format blog dates

f899a73

feat: add post template

1ad55be

antonio-gg-dev marked this pull request as ready for review October 12, 2023 16:04

chore: update changelog

3215d06

antonio-gg-dev changed the title ~~Add posts to docs~~ Add blog posts to website Oct 12, 2023

antonio-gg-dev commented Oct 12, 2023

View reviewed changes

antonio-gg-dev requested review from Chemaclass, JesusValeraDev, cmayo, fabriziofs, khru and valerangel October 12, 2023 16:32

antonio-gg-dev commented Oct 12, 2023

View reviewed changes

replace luxon with built-in formatter

29aef1d

JesusValeraDev approved these changes Oct 12, 2023

View reviewed changes

Chemaclass reviewed Oct 12, 2023

View reviewed changes

docs/.vitepress/config.ts Outdated Show resolved Hide resolved

antonio-gg-dev added 6 commits October 12, 2023 21:44

chore: update VitePress

83e1c92

chore: remove @ts-ignore

d612e0b

refactor: rename posts to blog

fcaaa7c

Merge branch 'main' into add-posts-to-docs

a190a21

chore: remove edit link and last updated from blog index

7a7b598

chore: specify date format on template

f56518d

Chemaclass approved these changes Oct 12, 2023

View reviewed changes

fabriziofs approved these changes Oct 12, 2023

View reviewed changes

Merge branch 'main' into add-posts-to-docs

8cd6685

Chemaclass merged commit 28b17d1 into main Oct 14, 2023

Chemaclass deleted the add-posts-to-docs branch October 14, 2023 14:25


		<img :src="$frontmatter.coverUrl" :alt="$frontmatter.coverAlt">

		Post content

		@@ -0,0 +1,3 @@
		import { createContentLoader } from 'vitepress'

		export default createContentLoader('posts/*.md', )


		aside: false
		---

Uh oh!

Add blog posts to website #169

Add blog posts to website #169

Uh oh!

Conversation

antonio-gg-dev commented Oct 12, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Description

🔖 Changes

✅ To-do list

Uh oh!

antonio-gg-dev commented Oct 12, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fabriziofs commented Oct 12, 2023

Uh oh!

Uh oh!

Chemaclass left a comment

Choose a reason for hiding this comment

Uh oh!

fabriziofs left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

antonio-gg-dev commented Oct 12, 2023 •

edited

Loading