A small personal blog about everything around tech and programming.
From the root of the project, from a terminal:
-
Install the required dependencies:
pnpm i
-
Start a local dev server:
pnpm start
-
Access the local dev server at http://localhost:4321
To run the test commands like pnpm test, you need to have the correct version of the Playwright browsers installed. You can install them by running:
pnpm exec playwright installAll commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
pnpm start |
Starts local dev server at localhost:4321 |
pnpm lint |
Runs all linters, showing problems |
pnpm lint:fix |
Runs all linters, trying to fix auto-solvable problems |
pnpm test |
Runs all tests |
pnpm test:ui |
Runs all tests in interactive UI mode |
pnpm test:cleanup |
Deletes images in the root folder created by the tests |
pnpm test:quick |
Runs all tests and performs the cleanup command afterwards |
pnpm build |
Builds the production site |
pnpm preview |
Previews the build locally, before deploying |
pnpm prepare |
Installs git hooks |
New blog posts can be created by adding a new file in ./src/content/posts. The file name will be the URL path to the new blog post.
A blog post requires the following frontmatter:
---
title: 'The title of the blog post'
description: 'A description of the content of the blog post.'
pubDate: 'The date the blog post was created (in the format YYYY-MM-DD)'
tags: 'A comma-separated list of tags that describe the content of the blog post (preferably 3)'
cover: 'A URL leading to an image to be used as the cover of the blog post (can also be a local file)'
---When using an image from a third-party source, the coverAuthor or coverAuthor and coverAuthorUrl frontmatter should be added to give credit to the author of the image:
coverAuthor: "The name of the author of the image used in the header of the blog post"
coverAuthorUrl: "A URL leading to the source of the image used in the header of the blog post"Local images should be stored in ./public/images/posts. They can be referenced directly in the frontmatter:
cover: "/images/posts/post-example/cover.png"Posts can be set to draft status by adding draft: true to the frontmatter. A draft post, or a post with a pubDate set to a future date, will not be visible on the site (but can be accessed by calling its URL directly).
When updating a post, the upDate frontmatter should be added with the current date (in the format YYYY-MM-DD).
New Today I Learned articles can be created by adding a new file in ./src/content/learned. The file name will be the URL path to the new Today I Learned article.
A Today I Learned article requires the following frontmatter:
---
title: 'The title of the Today I Learned article'
description: 'A description of the content of the Today I Learned article.'
pubDate: 'The date the Today I Learned article was created (in the format YYYY-MM-DD)'
tags: 'A comma-separated list of tags that describe the content of the Today I Learned article (preferably 3)'
---Today I Learned articles can be set to draft status by adding draft: true to the frontmatter. A draft Today I Learned article, or a Today I Learned article with a pubDate set to a future date, will not be visible on the site (but can be accessed by calling its URL directly).
When updating a Today I Learned article, the upDate frontmatter should be added with the current date (in the format YYYY-MM-DD).
New My Setup articles can be created by adding a new file in ./src/content/setup. The file name will be the URL path to the new My Setup article.
A My Setup article requires the following frontmatter:
---
title: 'The title of the My Setup article'
description: 'A description of the content of the My Setup article.'
pubDate: 'The date the My Setup article was created (in the format YYYY-MM-DD)'
---All My Setup articles are sorted with a custom order, defined by the content slug (the file name). The order is defined in ./src/components/setup/sortSetup.ts. When a new My Setup article is added, the order should be updated. If the order is not updated, the new My Setup article will be added to the beginning of the list.
My Setup articles can be set to draft status by adding draft: true to the frontmatter. A draft My Setup article, or a My Setup article with a pubDate set to a future date, will not be visible on the site (but can be accessed by calling its URL directly).
When updating a My Setup article, the upDate frontmatter should be added with the current date (in the format YYYY-MM-DD).
To see which components can be used in a blog post, Today I Learned article or My Setup article, open ./src/content/posts/demo.mdx. To see those components in action, navigate to /posts/demo in the browser on the live website or on the local dev server.
- Marvin Stickel