mirror of
https://github.com/ChenQihan666/MyBlog-Next.git
synced 2026-08-14 07:33:07 +08:00
docs: update blog posts and readme (#459)
* docs: update astro-paper theme config docs * docs: update adding-new-post blog post * docs: remove outdated posts and update featured posts * fix: update broken image link in astro-paper-4 blog * docs: add a blog post for astro-paper-v5 * docs: update README for AstroPaper v5 * fix: update blog post formatting
This commit is contained in:
Sat Naing
@@ -9,9 +9,7 @@
|
||||
|
||||
AstroPaper is a minimal, responsive, accessible and SEO-friendly Astro blog theme. This theme is designed and crafted based on [my personal blog](https://satnaing.dev/blog).
|
||||
|
||||
This theme follows best practices and provides accessibility out of the box. Light and dark mode are supported by default. Moreover, additional color schemes can also be configured.
|
||||
|
||||
This theme is self-documented \_ which means articles/posts in this theme can also be considered as documentations. Read [the blog posts](https://astro-paper.pages.dev/posts/) or check [the README Documentation Section](#-documentation) for more info.
|
||||
Read [the blog posts](https://astro-paper.pages.dev/posts/) or check [the README Documentation Section](#-documentation) for more info.
|
||||
|
||||
## 🔥 Features
|
||||
|
||||
@@ -46,55 +44,52 @@ Inside of AstroPaper, you'll see the following folders and files:
|
||||
/
|
||||
├── public/
|
||||
│ ├── assets/
|
||||
│ │ └── logo.svg
|
||||
│ │ └── logo.png
|
||||
| ├── pagefind/ # auto-generated when build
|
||||
│ └── favicon.svg
|
||||
│ └── astropaper-og.jpg
|
||||
│ └── robots.txt
|
||||
│ └── favicon.svg
|
||||
│ └── toggle-theme.js
|
||||
├── src/
|
||||
│ ├── assets/
|
||||
│ │ └── socialIcons.ts
|
||||
│ │ └── icons/
|
||||
│ │ └── images/
|
||||
│ ├── components/
|
||||
│ ├── content/
|
||||
│ │ | blog/
|
||||
│ │ | └── some-blog-posts.md
|
||||
│ │ └── config.ts
|
||||
│ ├── data/
|
||||
│ │ └── blog/
|
||||
│ │ └── some-blog-posts.md
|
||||
│ ├── layouts/
|
||||
│ └── pages/
|
||||
│ └── styles/
|
||||
│ └── utils/
|
||||
│ └── config.ts
|
||||
│ └── types.ts
|
||||
└── package.json
|
||||
│ └── constants.ts
|
||||
│ └── content.config.ts
|
||||
└── astro.config.ts
|
||||
```
|
||||
|
||||
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||
|
||||
Any static assets, like images, can be placed in the `public/` directory.
|
||||
|
||||
All blog posts are stored in `src/content/blog` directory.
|
||||
All blog posts are stored in `src/data/blog` directory.
|
||||
|
||||
## 📖 Documentation
|
||||
|
||||
Documentation can be read in two formats\_ _markdown_ & _blog post_.
|
||||
|
||||
- Configuration - [markdown](src/content/blog/how-to-configure-astropaper-theme.md) | [blog post](https://astro-paper.pages.dev/posts/how-to-configure-astropaper-theme/)
|
||||
- Add Posts - [markdown](src/content/blog/adding-new-post.md) | [blog post](https://astro-paper.pages.dev/posts/adding-new-posts-in-astropaper-theme/)
|
||||
- Customize Color Schemes - [markdown](src/content/blog/customizing-astropaper-theme-color-schemes.md) | [blog post](https://astro-paper.pages.dev/posts/customizing-astropaper-theme-color-schemes/)
|
||||
- Predefined Color Schemes - [markdown](src/content/blog/predefined-color-schemes.md) | [blog post](https://astro-paper.pages.dev/posts/predefined-color-schemes/)
|
||||
|
||||
> For AstroPaper v1, check out [this branch](https://github.com/satnaing/astro-paper/tree/astro-paper-v1) and this [live URL](https://astro-paper-v1.astro-paper.pages.dev/)
|
||||
- Configuration - [markdown](src/data/blog/how-to-configure-astropaper-theme.md) | [blog post](https://astro-paper.pages.dev/posts/how-to-configure-astropaper-theme/)
|
||||
- Add Posts - [markdown](src/data/blog/adding-new-post.md) | [blog post](https://astro-paper.pages.dev/posts/adding-new-posts-in-astropaper-theme/)
|
||||
- Customize Color Schemes - [markdown](src/data/blog/customizing-astropaper-theme-color-schemes.md) | [blog post](https://astro-paper.pages.dev/posts/customizing-astropaper-theme-color-schemes/)
|
||||
- Predefined Color Schemes - [markdown](src/data/blog/predefined-color-schemes.md) | [blog post](https://astro-paper.pages.dev/posts/predefined-color-schemes/)
|
||||
|
||||
## 💻 Tech Stack
|
||||
|
||||
**Main Framework** - [Astro](https://astro.build/)
|
||||
**Type Checking** - [TypeScript](https://www.typescriptlang.org/)
|
||||
**Component Framework** - [ReactJS](https://reactjs.org/)
|
||||
**Styling** - [TailwindCSS](https://tailwindcss.com/)
|
||||
**UI/UX** - [Figma Design File](https://www.figma.com/community/file/1356898632249991861)
|
||||
**Fuzzy Search** - [FuseJS](https://fusejs.io/)
|
||||
**Icons** - [Boxicons](https://boxicons.com/) | [Tablers](https://tabler-icons.io/)
|
||||
**Static Search** - [FuseJS](https://pagefind.app/)
|
||||
**Icons** - [Tablers](https://tabler-icons.io/)
|
||||
**Code Formatting** - [Prettier](https://prettier.io/)
|
||||
**Deployment** - [Cloudflare Pages](https://pages.cloudflare.com/)
|
||||
**Illustration in About Page** - [https://freesvgillustration.com](https://freesvgillustration.com/)
|
||||
@@ -105,29 +100,24 @@ Documentation can be read in two formats\_ _markdown_ & _blog post_.
|
||||
You can start using this project locally by running the following command in your desired directory:
|
||||
|
||||
```bash
|
||||
# npm 6.x
|
||||
npm create astro@latest --template satnaing/astro-paper
|
||||
# pnpm
|
||||
pnpm create astro@latest --template satnaing/astro-paper
|
||||
|
||||
# npm 7+, extra double-dash is needed:
|
||||
# npm
|
||||
npm create astro@latest -- --template satnaing/astro-paper
|
||||
|
||||
# yarn
|
||||
yarn create astro --template satnaing/astro-paper
|
||||
|
||||
# pnpm
|
||||
pnpm dlx create-astro --template satnaing/astro-paper
|
||||
```
|
||||
|
||||
> **_Warning!_** If you're using `yarn 1`, you might need to [install `sharp`](https://sharp.pixelplumbing.com/install) as a dependency.
|
||||
|
||||
Then start the project by running the following commands:
|
||||
|
||||
```bash
|
||||
# install dependencies
|
||||
npm run install
|
||||
# install dependencies if you haven't done so in the previous step.
|
||||
pnpm install
|
||||
|
||||
# start running the project
|
||||
npm run dev
|
||||
pnpm run dev
|
||||
```
|
||||
|
||||
As an alternative approach, if you have Docker installed, you can use Docker to run this project locally. Here's how:
|
||||
@@ -159,14 +149,14 @@ All commands are run from the root of the project, from a terminal:
|
||||
|
||||
| Command | Action |
|
||||
| :----------------------------------- | :------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `localhost:4321` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
| `npm run preview` | Preview your build locally, before deploying |
|
||||
| `npm run format:check` | Check code format with Prettier |
|
||||
| `npm run format` | Format codes with Prettier |
|
||||
| `npm run sync` | Generates TypeScript types for all Astro modules. [Learn more](https://docs.astro.build/en/reference/cli-reference/#astro-sync). |
|
||||
| `npm run lint` | Lint with ESLint |
|
||||
| `pnpm install` | Installs dependencies |
|
||||
| `pnpm run dev` | Starts local dev server at `localhost:4321` |
|
||||
| `pnpm run build` | Build your production site to `./dist/` |
|
||||
| `pnpm run preview` | Preview your build locally, before deploying |
|
||||
| `pnpm run format:check` | Check code format with Prettier |
|
||||
| `pnpm run format` | Format codes with Prettier |
|
||||
| `pnpm run sync` | Generates TypeScript types for all Astro modules. [Learn more](https://docs.astro.build/en/reference/cli-reference/#astro-sync). |
|
||||
| `pnpm run lint` | Lint with ESLint |
|
||||
| `docker compose up -d` | Run AstroPaper on docker, You can access with the same hostname and port informed on `dev` command. |
|
||||
| `docker compose run app npm install` | You can run any command above into the docker container. |
|
||||
| `docker build -t astropaper .` | Build Docker image for AstroPaper. |
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
@@ -1,7 +1,7 @@
|
||||
---
|
||||
author: Sat Naing
|
||||
pubDatetime: 2022-09-23T15:22:00Z
|
||||
modDatetime: 2023-12-21T09:12:47.400Z
|
||||
modDatetime: 2025-03-08T07:46:00.619Z
|
||||
title: Adding new posts in AstroPaper theme
|
||||
slug: adding-new-posts-in-astropaper-theme
|
||||
featured: true
|
||||
@@ -30,7 +30,7 @@ Here is the list of frontmatter property for each post.
|
||||
| **_pubDatetime_** | Published datetime in ISO 8601 format. | required<sup>\*</sup> |
|
||||
| **_modDatetime_** | Modified datetime in ISO 8601 format. (only add this property when a blog post is modified) | optional |
|
||||
| **_author_** | Author of the post. | default = SITE.author |
|
||||
| **_slug_** | Slug for the post. This field is optional but cannot be an empty string. (slug: ""❌) | default = slugified file name |
|
||||
| **_slug_** | Slug for the post. This field is optional. | default = slugified file name |
|
||||
| **_featured_** | Whether or not display this post in featured section of home page | default = false |
|
||||
| **_draft_** | Mark this post 'unpublished'. | default = false |
|
||||
| **_tags_** | Related keywords for this post. Written in array yaml format. | default = others |
|
||||
|
||||
@@ -3,7 +3,7 @@ author: Sat Naing
|
||||
pubDatetime: 2024-01-04T09:30:41.816Z
|
||||
title: AstroPaper 4.0
|
||||
slug: "astro-paper-v4"
|
||||
featured: true
|
||||
featured: false
|
||||
ogImage: ../../assets/images/AstroPaper-v4.png
|
||||
tags:
|
||||
- release
|
||||
@@ -22,7 +22,7 @@ Hello everyone! Wishing you a happy New Year 🎉 and all the best for 2024! We'
|
||||
|
||||
AstroPaper now leverages the power and capabilities of Astro v4. However, it’s a subtle upgrade and won’t break most Astro users.
|
||||
|
||||
|
||||
|
||||
|
||||
### Replace `postSlug` with Astro Content `slug` [#197](https://github.com/satnaing/astro-paper/pull/197)
|
||||
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
---
|
||||
pubDatetime: 2025-03-08T08:18:19.693Z
|
||||
title: AstroPaper 5.0
|
||||
slug: astro-paper-v5
|
||||
featured: true
|
||||
ogImage: ../../assets/images/AstroPaper-v5.png
|
||||
tags:
|
||||
- release
|
||||
description: "AstroPaper v5: keep the clean look, updates under the hood."
|
||||
---
|
||||
|
||||
At last, the long-awaited AstroPaper v5 is finally here. AstroPaper v5 keeps the same minimal & clean look, but comes with significant updates under the hood.
|
||||
|
||||
|
||||
|
||||
## Table of contents
|
||||
|
||||
## Major Changes
|
||||
|
||||
### Upgrade to Astro v5 [#455](https://github.com/satnaing/astro-paper/pull/455)
|
||||
|
||||
AstroPaper now comes with Astro v5, bringing all the new features and improvements that come with it.
|
||||
|
||||
### Tailwind v4
|
||||
|
||||
AstroPaper has been upgraded to Tailwind v4, which includes many style changes under the hood. The `tailwind.config.js` file has been removed, and now all the configuration is located within the `src/styles/global.css` file. Typography-related styles have been extracted and moved to `src/styles/typography.css`.
|
||||
|
||||
Due to the new behavior in TailwindCSS v4, styles inside `<style>` blocks within components have been removed and replaced with inline Tailwind classes.
|
||||
|
||||
Additionally, the color palette across the UI has been updated. The new palette now consists of only five colors:
|
||||
|
||||
```css
|
||||
:root,
|
||||
html[data-theme="light"] {
|
||||
--background: #fdfdfd;
|
||||
--foreground: #282728;
|
||||
--accent: #006cac;
|
||||
--muted: #e6e6e6;
|
||||
--border: #ece9e9;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--background: #212737;
|
||||
--foreground: #eaedf3;
|
||||
--accent: #ff6b01;
|
||||
--muted: #343f60bf;
|
||||
--border: #ab4b08;
|
||||
}
|
||||
```
|
||||
|
||||
### Remove React + Fuse.js in favor of Pagefind search
|
||||
|
||||
In previous versions, React.js and Fuse.js were used for search functionality and OG image generation. In AstroPaper v5, React.js has been removed and replaced with [Pagefind](https://pagefind.app/), a static site search tool.
|
||||
|
||||
The search experience is almost identical to previous versions, but now all contents, not just titles and descriptions, are indexed and searchable, thanks to Pagefind.
|
||||
|
||||
The idea of using Pagefind in dev mode was inspired by [this blog post](https://chrispennington.blog/blog/pagefind-static-search-for-astro-sites/).
|
||||
|
||||
### Updated import alias
|
||||
|
||||
The import alias has been updated from `@directory` to `@/directory`, which means you now have to import like this:
|
||||
|
||||
```astro
|
||||
---
|
||||
import { slugifyStr } from "@/utils/slugify";
|
||||
import IconHash from "@/assets/icons/IconHash.svg";
|
||||
---
|
||||
```
|
||||
|
||||
### Move to `pnpm`
|
||||
|
||||
AstroPaper has switched from `npm` to `pnpm`, which offers faster and more efficient package management.
|
||||
|
||||
### Replace icons/svg with Astro's Svg Component
|
||||
|
||||
AstroPaper v5 replaces inline SVGs with Astro’s experimental [SVG Component](https://docs.astro.build/en/reference/experimental-flags/svg/). This update reduces the need for predefined SVG code in the `socialIcons` object, making the codebase cleaner and more maintainable.
|
||||
|
||||
### Separate Constants and Config
|
||||
|
||||
The project structure has been reorganized. The `src/config.ts` file now only contains the `SITE` object, which holds the main configuration for the project. All constants, such as `LOCALE`, `SOCIALS`, and `SHARE_LINKS`, have been moved to the `src/constants.ts` file.
|
||||
|
||||
## Other notable changes
|
||||
|
||||
- The blog posts directory has been updated from `src/content/blog/` to `src/data/blog/`.
|
||||
- Conllection definitions file (`src/content/config.ts`) is now replaced with `src/content.config.ts`.
|
||||
- Various dependencies have been upgraded for improved performance and security.
|
||||
- Removed `IBM Plex Mono` font and switched to the default system mono font.
|
||||
- The `Go back` button logic has been updated. Now, instead of triggering the browser's history API, AstroPaper v5 uses the browser session to temporarily store the back URL. If no back URL exists in the session, it will redirect to the homepage.
|
||||
- There are some minor styles and layout changes as well.
|
||||
|
||||
## Outtro
|
||||
|
||||
AstroPaper v5 brings many changes, but the core experience remains the same. Enjoy a smoother, more efficient blogging platform while keeping the clean and minimal design that AstroPaper is known for!
|
||||
|
||||
Feel free to explore the changes and share your thoughts. As always, thank you for your support!
|
||||
|
||||
If you enjoy this theme, please consider starring the repo. You can also support me via GitHub Sponsors or you can buy me a coffee if you'd like. However, of course, these actions are entirely optional and not required.
|
||||
|
||||
Enjoy!
|
||||
|
||||
[Sat Naing](https://satnaing.dev/)
|
||||
@@ -1,125 +0,0 @@
|
||||
---
|
||||
author: Simon Smale
|
||||
pubDatetime: 2024-01-08T18:16:00.000Z
|
||||
modDatetime:
|
||||
title: How to add a new Social Icon to AstroPaper
|
||||
featured: false
|
||||
draft: false
|
||||
tags:
|
||||
- FAQ
|
||||
description: How to add a new social icon to AstroPaper
|
||||
---
|
||||
|
||||
Hot new platform? Niche corner of the internet? Or one specific to your area? This post will guide you through how to add a new social icon to the theme.
|
||||
|
||||
## Table of contents
|
||||
|
||||
## Merging back to the theme
|
||||
|
||||
The maintainer of the theme [Sat Naing](https://github.com/satnaing) has said that he intends to only
|
||||
|
||||
> keep the project supporting only a specific set of popular social icons.
|
||||
|
||||
So there is a chance that your icon will not be in the repo, but fear not, it is very easy to add your own!
|
||||
|
||||
## Getting things to match
|
||||
|
||||
The icon set used by the theme come from [Tabler](https://tabler.io/icons) and there are a quite a few brands on there.
|
||||
|
||||
## Adding your icon, by example
|
||||
|
||||
For this guide we are going to use the StackOverflow icon as our example.
|
||||
|
||||
### Find the icon
|
||||
|
||||
> In this case, we are going to use the `StackOverflow` as an example.
|
||||
|
||||
Searching on Tabler for 'StackOverflow' we get a single icon <https://tabler.io/icons/icon/brand-stackoverflow>, we are going to need the svg code, so save it for later.
|
||||
|
||||
```html
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon icon-tabler icon-tabler-brand-stackoverflow"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-1" />
|
||||
<path d="M8 16h8" />
|
||||
<path d="M8.322 12.582l7.956 .836" />
|
||||
<path d="M8.787 9.168l7.826 1.664" />
|
||||
<path d="M10.096 5.764l7.608 2.472" />
|
||||
</svg>
|
||||
```
|
||||
|
||||
### Clean up
|
||||
|
||||
We need to do some tidy up on what the theme provides us.
|
||||
|
||||
1. remove all classes other than `icon-tabler`
|
||||
2. remove width & height
|
||||
3. remove the viewBox
|
||||
4. remove the stroke-width
|
||||
5. remove the stroke
|
||||
6. remove the fill
|
||||
|
||||
This should leave you with the following
|
||||
|
||||
```html
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-tabler
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-1" />
|
||||
<path d="M8 16h8" />
|
||||
<path d="M8.322 12.582l7.956 .836" />
|
||||
<path d="M8.787 9.168l7.826 1.664" />
|
||||
<path d="M10.096 5.764l7.608 2.472" />
|
||||
</svg>
|
||||
```
|
||||
|
||||
Now we can add the clean svg code to the `src/assets/socialIcons.ts` file in `SocialIcons`.
|
||||
|
||||
```typescript
|
||||
const socialIcons = {
|
||||
/* others */
|
||||
StackOverflow: `<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-tabler
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-1" />
|
||||
<path d="M8 16h8" />
|
||||
<path d="M8.322 12.582l7.956 .836" />
|
||||
<path d="M8.787 9.168l7.826 1.664" />
|
||||
<path d="M10.096 5.764l7.608 2.472" />
|
||||
</svg>`,
|
||||
};
|
||||
```
|
||||
|
||||
Finally we can configure it for our blog in `src/config.ts` under `SOCIALS`. Setting `active: true` to add it to the site.
|
||||
|
||||
```typescript
|
||||
export const SOCIALS: SocialObjects = [
|
||||
/* others */
|
||||
{
|
||||
name: "StackOverflow",
|
||||
href: "https://stackoverflow.com/search?q=astropaper",
|
||||
linkTitle: `See what questions there are about ${SITE.title} on StackOverflow`,
|
||||
active: true,
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
> Ensure that `href` and `linkTitle` are updated for the corresponding link and label.
|
||||
|
||||
Full code for the above steps can be found in [this pull request](https://github.com/satnaing/astro-paper/pull/216/files)
|
||||
@@ -1,348 +0,0 @@
|
||||
---
|
||||
title: How to add an estimated reading time in AstroPaper
|
||||
author: Sat Naing
|
||||
pubDatetime: 2023-07-21T10:11:06.130Z
|
||||
modDatetime: 2024-01-03T14:53:25Z
|
||||
slug: how-to-add-estimated-reading-time
|
||||
featured: false
|
||||
draft: false
|
||||
tags:
|
||||
- FAQ
|
||||
description: How you can add an 'Estimated Reading time' in your blog posts of AstroPaper.
|
||||
---
|
||||
|
||||
As the [Astro docs](https://docs.astro.build/en/recipes/reading-time/) say, we can use remark plugin to add a reading time property in our frontmatter. However, for some reason, we can't add this feature by following what stated in Astro docs. Therefore, to achieve this, we have to tweak a little bit. This post will demonstrate how we can do that.
|
||||
|
||||
## Table of contents
|
||||
|
||||
## Add reading time in PostDetails
|
||||
|
||||
Step (1) Install required dependencies.
|
||||
|
||||
```bash
|
||||
npm install reading-time mdast-util-to-string
|
||||
```
|
||||
|
||||
Step (2) Create `remark-reading-time.mjs` file under `utils` directory
|
||||
|
||||
```js
|
||||
import getReadingTime from "reading-time";
|
||||
import { toString } from "mdast-util-to-string";
|
||||
|
||||
export function remarkReadingTime() {
|
||||
return function (tree, { data }) {
|
||||
const textOnPage = toString(tree);
|
||||
const readingTime = getReadingTime(textOnPage);
|
||||
// readingTime.text will give us minutes read as a friendly string,
|
||||
// i.e. "3 min read"
|
||||
data.astro.frontmatter.minutesRead = readingTime.text;
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
Step (3) Add the plugin to `astro.config.ts`
|
||||
|
||||
```js
|
||||
import { remarkReadingTime } from "./src/utils/remark-reading-time.mjs"; // make sure your relative path is correct
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: SITE.website,
|
||||
integrations: [
|
||||
// other integrations
|
||||
],
|
||||
markdown: {
|
||||
remarkPlugins: [
|
||||
remarkToc,
|
||||
remarkReadingTime, // 👈🏻 our plugin
|
||||
[
|
||||
remarkCollapse,
|
||||
{
|
||||
test: "Table of contents",
|
||||
},
|
||||
],
|
||||
],
|
||||
// other config
|
||||
},
|
||||
// other config
|
||||
});
|
||||
```
|
||||
|
||||
Step (4) Add `readingTime` to blog schema (`src/content/config.ts`)
|
||||
|
||||
```ts
|
||||
import { SITE } from "@config";
|
||||
import { defineCollection, z } from "astro:content";
|
||||
|
||||
const blog = defineCollection({
|
||||
type: "content_layer",
|
||||
loader: glob({ pattern: "**/*.md", base: "./src/content/blog" }),
|
||||
schema: ({ image }) =>
|
||||
z.object({
|
||||
// others...
|
||||
canonicalURL: z.string().optional(),
|
||||
readingTime: z.string().optional(), // 👈🏻 readingTime frontmatter
|
||||
// others...
|
||||
}),
|
||||
});
|
||||
|
||||
export const collections = { blog };
|
||||
```
|
||||
|
||||
Step (5) Create a new file called `getPostsWithRT.ts` under `src/utils` directory.
|
||||
|
||||
```ts
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
import { slugifyStr } from "./slugify";
|
||||
|
||||
interface Frontmatter {
|
||||
frontmatter: {
|
||||
title: string;
|
||||
minutesRead: string;
|
||||
};
|
||||
}
|
||||
|
||||
export const getReadingTime = async () => {
|
||||
// Get all posts using glob. This is to get the updated frontmatter
|
||||
const globPosts = import.meta.glob<Frontmatter>("../content/blog/*.md");
|
||||
|
||||
// Then, set those frontmatter value in a JS Map with key value pair
|
||||
const mapFrontmatter = new Map();
|
||||
const globPostsValues = Object.values(globPosts);
|
||||
await Promise.all(
|
||||
globPostsValues.map(async globPost => {
|
||||
const { frontmatter } = await globPost();
|
||||
mapFrontmatter.set(
|
||||
slugifyStr(frontmatter.title),
|
||||
frontmatter.minutesRead
|
||||
);
|
||||
})
|
||||
);
|
||||
|
||||
return mapFrontmatter;
|
||||
};
|
||||
|
||||
const getPostsWithRT = async (posts: CollectionEntry<"blog">[]) => {
|
||||
const mapFrontmatter = await getReadingTime();
|
||||
return posts.map(post => {
|
||||
post.data.readingTime = mapFrontmatter.get(slugifyStr(post.data.title));
|
||||
return post;
|
||||
});
|
||||
};
|
||||
|
||||
export default getPostsWithRT;
|
||||
```
|
||||
|
||||
Step (6) Refactor `getStaticPaths` of `src/pages/posts/[slug]/index.astro` as the following
|
||||
|
||||
```ts
|
||||
---
|
||||
// other imports
|
||||
import getPostsWithRT from "@utils/getPostsWithRT";
|
||||
|
||||
export interface Props {
|
||||
post: CollectionEntry<"blog">;
|
||||
}
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection("blog", ({ data }) => !data.draft);
|
||||
|
||||
const postsWithRT = await getPostsWithRT(posts); // replace reading time logic with this func
|
||||
|
||||
const postResult = postsWithRT.map(post => ({ // make sure to replace posts with postsWithRT
|
||||
params: { slug: post.slug },
|
||||
props: { post },
|
||||
}));
|
||||
|
||||
// other codes
|
||||
```
|
||||
|
||||
Step (7) Refactor `PostDetails.astro` like this. Now you can access and display `readingTime` in `PostDetails.astro`
|
||||
|
||||
```ts
|
||||
---
|
||||
// imports
|
||||
|
||||
export interface Props {
|
||||
post: CollectionEntry<"blog">;
|
||||
}
|
||||
|
||||
const { post } = Astro.props;
|
||||
|
||||
const {
|
||||
title,
|
||||
author,
|
||||
description,
|
||||
ogImage,
|
||||
readingTime, // we can now directly access readingTime from frontmatter
|
||||
pubDatetime,
|
||||
modDatetime,
|
||||
tags } = post.data;
|
||||
|
||||
// other codes
|
||||
---
|
||||
```
|
||||
|
||||
## Access reading time outside of PostDetails (optional)
|
||||
|
||||
By following the previous steps, you can now access `readingTime` frontmatter property in you post details page. Sometimes, this is exactly what you want. If so, you can skip to the next section. However, if you want to display "estimated reading time" in index, posts, and technically everywhere, you need to do the following extra steps.
|
||||
|
||||
Step (1) Update `utils/getSortedPosts.ts` as the following
|
||||
|
||||
```ts
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
import getPostsWithRT from "./getPostsWithRT";
|
||||
|
||||
const getSortedPosts = async (posts: CollectionEntry<"blog">[]) => {
|
||||
// make sure that this func is async
|
||||
const postsWithRT = await getPostsWithRT(posts); // add reading time
|
||||
return postsWithRT
|
||||
.filter(({ data }) => !data.draft)
|
||||
.sort(
|
||||
(a, b) =>
|
||||
Math.floor(
|
||||
new Date(b.data.modDatetime ?? b.data.pubDatetime).getTime() / 1000
|
||||
) -
|
||||
Math.floor(
|
||||
new Date(a.data.modDatetime ?? a.data.pubDatetime).getTime() / 1000
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
export default getSortedPosts;
|
||||
```
|
||||
|
||||
Step (2) Make sure to refactor every file which uses `getSortedPosts` function. You can simply add `await` keyword in front of `getSortedPosts` function.
|
||||
|
||||
Files that use `getSortedPosts` function are as follow
|
||||
|
||||
- src/pages/index.astro
|
||||
- src/pages/search.astro
|
||||
- src/pages/rss.xml.ts
|
||||
- src/pages/posts/[...page].astro
|
||||
- src/pages/posts/[slug]/index.astro
|
||||
- src/utils/getPostsByTag.ts
|
||||
|
||||
All you have to do is like this
|
||||
|
||||
```ts
|
||||
const sortedPosts = getSortedPosts(posts); // old code ❌
|
||||
const sortedPosts = await getSortedPosts(posts); // new code ✅
|
||||
```
|
||||
|
||||
Now, `getPostsByTag` function becomes an async function. Therefore, we needs to `await` the `getPostsByTag` function too.
|
||||
|
||||
- src/pages/tags/[tag]/[page].astro
|
||||
- src/pages/tags/[tag]/index.astro
|
||||
|
||||
```ts
|
||||
const postsByTag = getPostsByTag(posts, tag); // old code ❌
|
||||
const postsByTag = await getPostsByTag(posts, tag); // new code ✅
|
||||
```
|
||||
|
||||
Moreover, update the `getStaticPaths` of `src/pages/tags/[tag]/[page].astro` like this:
|
||||
|
||||
```ts
|
||||
export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
|
||||
const posts = await getCollection("blog");
|
||||
const tags = getUniqueTags(posts);
|
||||
|
||||
// Make sure to await the promises
|
||||
const paths = await Promise.all(
|
||||
tags.map(async ({ tag, tagName }) => {
|
||||
const tagPosts = await getPostsByTag(posts, tag);
|
||||
|
||||
return paginate(tagPosts, {
|
||||
params: { tag },
|
||||
props: { tagName },
|
||||
pageSize: SITE.postPerPage,
|
||||
});
|
||||
})
|
||||
);
|
||||
|
||||
return paths.flat(); // Flatten the array of arrays
|
||||
}
|
||||
```
|
||||
|
||||
Now you can access `readingTime` in other places besides `PostDetails`
|
||||
|
||||
## Displaying reading time (optional)
|
||||
|
||||
Since you can now access `readingTime` in your post details (or everywhere if you do the above section), it's up to you to display `readingTime` wherever you want.
|
||||
|
||||
But in this section, I'm gonna show you how I would display `readingTime` in my components. This is optional. You can ignore this section if you want.
|
||||
|
||||
Step (1) Update `Datetime` component to display `readingTime`
|
||||
|
||||
```tsx
|
||||
// other codes
|
||||
|
||||
interface Props extends DatetimesProps, EditPostProps {
|
||||
size?: "sm" | "lg";
|
||||
className?: string;
|
||||
readingTime: string | undefined; // new type
|
||||
}
|
||||
|
||||
export default function Datetime({
|
||||
pubDatetime,
|
||||
modDatetime,
|
||||
size = "sm",
|
||||
className = "",
|
||||
editPost,
|
||||
postId,
|
||||
readingTime, // new prop
|
||||
}: Props) {
|
||||
return (
|
||||
// other codes
|
||||
<span className={`italic ${size === "sm" ? "text-sm" : "text-base"}`}>
|
||||
<FormattedDatetime pubDatetime={pubDatetime} modDatetime={modDatetime} />
|
||||
<span> ({readingTime})</span> {/* display reading time */}
|
||||
{size === "lg" && <EditPost editPost={editPost} postId={postId} />}
|
||||
</span>
|
||||
// other codes
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Step (2) Then, pass `readingTime` props from its parent component.
|
||||
|
||||
file: `Card.tsx`
|
||||
|
||||
```ts
|
||||
export default function Card({ href, frontmatter, secHeading = true }: Props) {
|
||||
const { title, pubDatetime, modDatetime description, readingTime } = frontmatter; // don't forget to add readingTime here too
|
||||
return (
|
||||
...
|
||||
<Datetime
|
||||
pubDatetime={pubDatetime}
|
||||
modDatetime={modDatetime}
|
||||
readingTime={readingTime}
|
||||
/>
|
||||
...
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
file: `PostDetails.astro`
|
||||
|
||||
```jsx
|
||||
// Other Codes
|
||||
<main id="main-content">
|
||||
<h1 class="post-title">{title}</h1>
|
||||
<Datetime
|
||||
pubDatetime={pubDatetime}
|
||||
modDatetime={modDatetime}
|
||||
size="lg"
|
||||
className="my-2"
|
||||
readingTime={readingTime}
|
||||
/>
|
||||
{/* Other Codes */}
|
||||
</main>
|
||||
// Other Codes
|
||||
```
|
||||
|
||||
## Conclusion
|
||||
|
||||
By following the provided steps and tweaks, you can now incorporate this useful feature into your content. I hope this post helps you adding `readingTime` in your blog. AstroPaper might include reading time by default in future releases. 🤷🏻♂️
|
||||
|
||||
Kyay Zuu for Reading 🙏🏻
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
author: Sat Naing
|
||||
pubDatetime: 2022-09-23T04:58:53Z
|
||||
modDatetime: 2024-10-14T09:27:28.605Z
|
||||
modDatetime: 2025-03-07T14:01:26.494Z
|
||||
title: How to configure AstroPaper theme
|
||||
slug: how-to-configure-astropaper-theme
|
||||
featured: true
|
||||
@@ -18,52 +18,57 @@ AstroPaper is a highly customizable Astro blog theme. With AstroPaper, you can c
|
||||
|
||||
## Configuring SITE
|
||||
|
||||
The important configurations lies in `src/config.ts` file. Within that file, you'll see the `SITE` object where you can specify your website's main configurations.
|
||||
The important configurations resides in `src/config.ts` file. Within that file, you'll see the `SITE` object where you can specify your website's main configurations.
|
||||
|
||||
During development, it's okay to leave `SITE.website` empty. But in production mode, you should specify your deployed url in `SITE.website` option since this will be used for canonical URL, social card URL etc.. which are important for SEO.
|
||||
|
||||
```js
|
||||
// file: src/config.ts
|
||||
export const SITE = {
|
||||
website: "https://astro-paper.pages.dev/",
|
||||
website: "https://astro-paper.pages.dev/", // replace this with your deployed domain
|
||||
author: "Sat Naing",
|
||||
profile: "https://satnaing.dev/",
|
||||
desc: "A minimal, responsive and SEO-friendly Astro blog theme.",
|
||||
title: "AstroPaper",
|
||||
ogImage: "astropaper-og.jpg",
|
||||
lightAndDarkMode: true,
|
||||
postPerPage: 3,
|
||||
postPerIndex: 4,
|
||||
postPerPage: 4,
|
||||
scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
|
||||
showArchives: true,
|
||||
showBackButton: true, // show back button in post detail
|
||||
editPost: {
|
||||
url: "https://github.com/satnaing/astro-paper/edit/main/src/content/blog",
|
||||
text: "Suggest Changes",
|
||||
appendFilePath: true,
|
||||
},
|
||||
};
|
||||
} as const;
|
||||
```
|
||||
|
||||
Here are SITE configuration options
|
||||
|
||||
| Options | Description |
|
||||
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `website` | Your deployed website url |
|
||||
| `website` | Your deployed website URL |
|
||||
| `author` | Your name |
|
||||
| `profile` | Your personal/portfolio website URL which is used for better SEO. Put `null` or empty string `""` if you don't have any. |
|
||||
| `desc` | Your site description. Useful for SEO and social media sharing. |
|
||||
| `title` | Your site name |
|
||||
| `ogImage` | Your default OG image for the site. Useful for social media sharing. OG images can be an external image url or they can be placed under `/public` directory. |
|
||||
| `ogImage` | Your default OG image for the site. Useful for social media sharing. OG images can be an external image URL or they can be placed under `/public` directory. |
|
||||
| `lightAndDarkMode` | Enable or disable `light & dark mode` for the website. If disabled, primary color scheme will be used. This option is enabled by default. |
|
||||
| `postPerIndex` | The number of posts to be displayed at the home page under `Recent` section. |
|
||||
| `postPerPage` | You can specify how many posts will be displayed in each posts page. (eg: if you set SITE.postPerPage to 3, each page will only show 3 posts per page) |
|
||||
| `postPerPage` | You can specify how many posts will be displayed in each posts page. (eg: if you set `SITE.postPerPage` to 3, each page will only show 3 posts per page) |
|
||||
| `scheduledPostMargin` | In Production mode, posts with a future `pubDatetime` will not be visible. However, if a post's `pubDatetime` is within the next 15 minutes, it will be visible. You can set `scheduledPostMargin` if you don't like the default 15 minutes margin. |
|
||||
| `showArchives` | Determines whether to display the `Archives` menu (positioned between the `About` and `Search` menus) and its corresponding page on the site. This option is set to `true` by default. |
|
||||
| `showBackButton` | Determines whether to display the `Go back` button in each blog post. |
|
||||
| `editPost` | This option allows users to suggest changes to a blog post by providing an edit link under blog post titles. This feature can be disabled by removing it from the `SITE` config. You can also set `appendFilePath` to `true` to automatically append the file path of the post to the url, directing users to the specific post they wish to edit. |
|
||||
|
||||
## Configuring locale
|
||||
|
||||
You can configure the default locale used for the build (e.g., date format in the post page), and for the rendering in browsers (e.g., date format in the search page)
|
||||
You can configure the default locale used for the build (e.g., date format in the post page), and for the rendering in browsers (e.g., date format in the search page). You can update locale in `src/constants.ts` file.
|
||||
|
||||
```js
|
||||
// file: src/config.ts
|
||||
// file: src/constants.ts
|
||||
export const LOCALE = {
|
||||
lang: "en", // html lang code. Set this empty and default will be "en"
|
||||
langTag: ["en-EN"], // BCP 47 Language Tags. Set this empty [] to use the environment default
|
||||
@@ -75,94 +80,113 @@ export const LOCALE = {
|
||||
|
||||
## Configuring logo or title
|
||||
|
||||
You can specify site's title or logo image in `src/config.ts` file.
|
||||
Prior to AstroPaper v5, you can update your site name/logo in `LOGO_IMAGE` object inside `src/config.ts` file. However, in AstroPaper v5, this option has been removed in favor of Astro's built-in SVG and Image components.
|
||||
|
||||
|
||||
|
||||
```js
|
||||
// file: src/config.ts
|
||||
export const LOGO_IMAGE = {
|
||||
enable: false,
|
||||
svg: true,
|
||||
width: 216,
|
||||
height: 46,
|
||||
};
|
||||
```
|
||||
There are 3 options you can do:
|
||||
|
||||
If you specify `LOGO_IMAGE.enable` => `false`, AstroPaper will automatically convert `SITE.title` to the main site text logo.
|
||||
### Option 1: SITE title text
|
||||
|
||||
If you specify `LOGO_IMAGE.enable` => `true`, AstroPaper will use the logo image as the site's main logo.
|
||||
This is the easiest option. You just have to update `SITE.title` in `src/config.ts` file.
|
||||
|
||||
You have to specify `logo.png` or `logo.svg` under `/public/assets` directory. Currently, only svg and png image file formats are supported. (**_Important!_** _logo name has to be logo.png or logo.svg)_
|
||||
### Option 2: Astro's SVG component
|
||||
|
||||
If your logo image is png file format, you have to set `LOGO_IMAGE.svg` => `false`.
|
||||
You might want to use this option if you want to use an SVG logo.
|
||||
|
||||
It is recommended that you specify width and height of your logo image. You can do that by setting `LOGO_IMAGE.width` _and_ `LOGO_IMAGE.height`
|
||||
- First add an SVG inside `src/assets` directory. (eg: `src/assets/dummy-logo.svg`)
|
||||
- Then import that SVG inside `src/components/Header.astro`
|
||||
|
||||
```astro
|
||||
---
|
||||
// other imports
|
||||
import DummyLogo from "@/assets/dummy-logo.svg";
|
||||
---
|
||||
```
|
||||
|
||||
- Finally, replace `{SITE.title}` with imported logo.
|
||||
|
||||
```html
|
||||
<a
|
||||
href="/"
|
||||
class="absolute py-1 text-left text-2xl leading-7 font-semibold whitespace-nowrap sm:static"
|
||||
>
|
||||
<DummyLogo class="scale-75 dark:invert" />
|
||||
<!-- {SITE.title} -->
|
||||
</a>
|
||||
```
|
||||
|
||||
The best part of this approach is that you can customize your SVG styles as needed. In the example above, you can see how the SVG logo color can be inverted in dark mode.
|
||||
|
||||
### Option 3: Astro's Image component
|
||||
|
||||
If your logo is an image but not SVG, you can use Astro's Image component.
|
||||
|
||||
- Add your logo inside `src/assets` directory. (eg: `src/assets/dummy-logo.png`)
|
||||
- Import `Image` and your logo in `src/components/Header.astro`
|
||||
|
||||
```astro
|
||||
---
|
||||
// other imports
|
||||
import { Image } from "astro:assets";
|
||||
import dummyLogo from "@/assets/dummy-logo.png";
|
||||
---
|
||||
```
|
||||
|
||||
- Then, replace `{SITE.title}` with imported logo.
|
||||
|
||||
```html
|
||||
<a
|
||||
href="/"
|
||||
class="absolute py-1 text-left text-2xl leading-7 font-semibold whitespace-nowrap sm:static"
|
||||
>
|
||||
<image src="{dummyLogo}" alt="Dummy Blog" class="dark:invert" />
|
||||
<!-- {SITE.title} -->
|
||||
</a>
|
||||
```
|
||||
|
||||
With this approach, you can still adjust your image's appearance using CSS classes. However, this might not always fit what you want. If you need to display different logo images based on light or dark mode, check how light/dark icons are handled inside the `Header.astro` component.
|
||||
|
||||
## Configuring social links
|
||||
|
||||
You can configure your own social links along with its icons.
|
||||
You can configure social links in `SOCIALS` object inside `src/constants.ts`.
|
||||
|
||||
|
||||
|
||||
|
||||
Currently 20 social icons are supported. (Github, LinkedIn, Facebook etc.)
|
||||
|
||||
You can specify and enable certain social links in hero section and footer. To do this, go to `/src/config.ts` and then you'll find `SOCIALS` array of object.
|
||||
|
||||
```js
|
||||
// file: src/config.ts
|
||||
export const SOCIALS: SocialObjects = [
|
||||
```ts
|
||||
export const SOCIALS = [
|
||||
{
|
||||
name: "Github",
|
||||
href: "https://github.com/satnaing/astro-paper",
|
||||
linkTitle: ` ${SITE.title} on Github`,
|
||||
active: true,
|
||||
icon: IconGitHub,
|
||||
},
|
||||
{
|
||||
name: "Facebook",
|
||||
href: "https://github.com/satnaing/astro-paper",
|
||||
linkTitle: `${SITE.title} on Facebook`,
|
||||
active: true,
|
||||
name: "X",
|
||||
href: "https://x.com/username",
|
||||
linkTitle: `${SITE.title} on X`,
|
||||
icon: IconBrandX,
|
||||
},
|
||||
{
|
||||
name: "Instagram",
|
||||
href: "https://github.com/satnaing/astro-paper",
|
||||
linkTitle: `${SITE.title} on Instagram`,
|
||||
active: true,
|
||||
name: "LinkedIn",
|
||||
href: "https://www.linkedin.com/in/username/",
|
||||
linkTitle: `${SITE.title} on LinkedIn`,
|
||||
icon: IconLinkedin,
|
||||
},
|
||||
...
|
||||
]
|
||||
```
|
||||
|
||||
You have to set specific social link to `active: true` in order to appear your social links in hero and footer section. Then, you also have to specify your social link in `href` property.
|
||||
|
||||
For instance, if I want to make my Github appear, I'll make it like this.
|
||||
|
||||
```js
|
||||
export const SOCIALS: SocialObjects = [
|
||||
{
|
||||
name: "Github",
|
||||
href: "https://github.com/satnaing", // update account link
|
||||
linkTitle: `${SITE.title} on Github`, // this text will appear on hover and VoiceOver
|
||||
active: true, // makre sure to set active to true
|
||||
}
|
||||
...
|
||||
]
|
||||
name: "Mail",
|
||||
href: "mailto:yourmail@gmail.com",
|
||||
linkTitle: `Send an email to ${SITE.title}`,
|
||||
icon: IconMail,
|
||||
},
|
||||
] as const;
|
||||
```
|
||||
|
||||
Another thing to note is that you can specify the `linkTitle` in the object. This text will display when hovering on the social icon link. Besides, this will improve accessibility and SEO. AstroPaper provides default link title values; but you can replace them with your own texts.
|
||||
## Configuring share links
|
||||
|
||||
For example,
|
||||
You can configure share links in `SHARE_LINKS` object inside `src/constants.ts`.
|
||||
|
||||
```js
|
||||
linkTitle: `${SITE.title} on Twitter`,
|
||||
```
|
||||
|
||||
to
|
||||
|
||||
```js
|
||||
linkTitle: `Follow ${SITE.title} on Twitter`;
|
||||
```
|
||||
|
||||
|
||||
## Conclusion
|
||||
|
||||
|
||||
@@ -1,126 +0,0 @@
|
||||
---
|
||||
title: How to connect AstroPaper blog with Forestry CMS
|
||||
author: Sat Naing
|
||||
pubDatetime: 2022-09-21T05:17:19Z
|
||||
slug: how-to-connect-astro-paper-blog-with-forestry-cms
|
||||
featured: false
|
||||
draft: false
|
||||
tags:
|
||||
- docs
|
||||
- forestry-cms
|
||||
- astro-paper
|
||||
ogImage: https://res.cloudinary.com/noezectz/v1663745737/astro-paper/astropaper-x-forestry-og_kqfwp0.png
|
||||
description:
|
||||
Step by step process of connecting Astro-Paper blog theme with Forestry
|
||||
Headless CMS.
|
||||
---
|
||||
|
||||
> Important!!! Forestry is going to be discontinued on April 22nd, 2023. You can [read their announcement](https://forestry.io/blog/forestry.io-end-of-life/) for more info.
|
||||
|
||||
In this article, I will explain step by step process of connecting AstroPaper theme with the Forestry headless CMS. So, let's get started 🎉
|
||||
|
||||
## Table of contents
|
||||
|
||||
## What is Forestry?
|
||||
|
||||
[Forestry](https://forestry.io/ "Forestry Website") is a git-based headless CMS and we can manage our markdown contents easily by using that. Although it is not an open-sourced CMS, it has a good free plan by which we can import up to 3 sites (3 repositories). In this article, I'll demonstrate how we can use Forestry as git-based CMS of our AstroPaper blog theme.
|
||||
|
||||
## Login / Register an account at Forestry.io
|
||||
|
||||
First of all, you have to create an account at [Forestry website](https://app.forestry.io/login "Forestry Login Page"). I usually sign up with my Github account.
|
||||
|
||||
|
||||
|
||||
## Import AstroPaper site (repository)
|
||||
|
||||
This part is importing the repository to Forestry and a little bit of set up process.
|
||||
|
||||
### Add Site
|
||||
|
||||
After logging in/signing up an account, import your AstroPaper site by clicking "Add Site" button.
|
||||
|
||||
|
||||
|
||||
### Select SSG
|
||||
|
||||
In this case, just choose "Others"
|
||||
|
||||
|
||||
|
||||
### Select Git Provider
|
||||
|
||||
My git provider is Github and I assume yours is the same. So, choose "Github".
|
||||
|
||||
|
||||
|
||||
After this, the process of importing site (repo) is done.
|
||||
|
||||
## Set up Sidebar
|
||||
|
||||
The next phase after importing site is setting up sidebar menu. You can add many sidebar menu as you want. However, I'll only add one sidebar menu in this case.
|
||||
|
||||
Navigate to "Finish setup process" > "Set up sidebar" and click "Configure sitebar"
|
||||
|
||||
|
||||
|
||||
Then, click "Add Section" button.
|
||||
|
||||
|
||||
|
||||
After that, choose DIRECTORY for the Section Type.
|
||||
|
||||
|
||||
|
||||
Then, configure the directory section. You can follow along with my setup.
|
||||
|
||||
|
||||
|
||||
After this step, you should see a sidebar menu "Blog Posts" and some blog posts.
|
||||
|
||||
## Set up Media Import
|
||||
|
||||
In Forestry CMS, you can set up different options for media (aka assets) such as Cloudinary, git commit media etc. I usually store my assets in [Cloudinary](https://cloudinary.com/). To set up media import, go to Settings > Media. Then select your image storage provider. (I chose Cloudinary).
|
||||
|
||||
|
||||
|
||||
You can see details of Forestry Cloudinary setup at [Forestry documentation](https://forestry.io/docs/media/cloudinary/).
|
||||
|
||||
## Set up Front matter template
|
||||
|
||||
After setting everything up, you can set up front matter template for your future blog post. To set up front matter template, navigate to "Front matter" menu on the sidebar.
|
||||
|
||||
Then, click "Add Template" button at the top right corner.
|
||||
|
||||
|
||||
|
||||
Select new template based on existing document.
|
||||
|
||||
|
||||
|
||||
Then, add template name and choose one of my document page as template.
|
||||
|
||||
As the final setup, make some adjustment in the front matter field settings.
|
||||
|
||||
|
||||
|
||||
Here are some adjustments you have to make.
|
||||
|
||||
**_title_**
|
||||
|
||||
- Validation => REQUIRED => true
|
||||
|
||||
**_author_**
|
||||
|
||||
- Default => your name
|
||||
|
||||
**_datetime_**
|
||||
|
||||
- Default => USE "NOW" AS DEFAULT
|
||||
|
||||
**_description_**
|
||||
|
||||
- Validation => REQUIRED => true
|
||||
|
||||
## Conclusion
|
||||
|
||||
You can now post your articles and write whatever you want.
|
||||
@@ -4,7 +4,7 @@ pubDatetime: 2024-07-25T11:11:53Z
|
||||
modDatetime: 2024-09-25T12:07:53Z
|
||||
title: How to integrate Giscus comments into AstroPaper
|
||||
slug: how-to-integrate-giscus-comments
|
||||
featured: true
|
||||
featured: false
|
||||
draft: false
|
||||
tags:
|
||||
- astro
|
||||
|
||||
Reference in New Issue
Block a user