flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/blog-template. minimalistic astro blog template
flo-bit.dev/blog-template/
astro
blog
template
change to json config
author
Florian
date
(Oct 26, 2024, 8:25 PM +0200)
commit
0c7ed77a
0c7ed77aaef5091215bcdd6a2d187b7076e70ba7
parent
e24d62e4
e24d62e491047be7b9b65a2e9907065bcc6afee2
+123
-169
+2
-4
README.md
+2
-4
README.md
···
10
10
- ✅ SEO-friendly with canonical URLs and OpenGraph data (automatically generated)
11
11
- ✅ Sitemap support
12
12
- ✅ RSS Feed support
13
-
- ✅ Markdown & MDX support
13
+
- ✅ Markdown support
14
14
- ✅ Pagination
15
15
- ✅ Syntax highlighting (+ copy button)
16
16
- ✅ Dark and light mode with toggle button or auto-detect
···
29
29
30
30
- [supported markdown features](https://flo-bit.dev/blog-template/posts/markdown-style-guide)
31
31
32
-
- [how to use mdx](https://flo-bit.dev/blog-template/posts/using-mdx)
33
-
34
32
## Minimal setup with github pages
35
33
36
34
1. Fork this repository
37
35
38
-
2. Set up your blog info in `src/consts.ts` (most importantly set 'SITE' and 'BASE' to your corresponding values, see `src/consts.ts` for more info)
36
+
2. Set up your blog info in `src/config.json` (most importantly set 'SITE' and 'BASE' to your corresponding values, see [configuring your site](https://flo-bit.dev/blog-template/posts/configuring-the-blog))
39
37
40
38
3. Add your blog posts in `src/content/blog/`
41
39
+2
-1
astro.config.mjs
+2
-1
astro.config.mjs
···
7
7
import tailwind from "@astrojs/tailwind";
8
8
import svelte from "@astrojs/svelte";
9
9
import pagefind from "vite-plugin-pagefind";
10
-
import { BASE, SITE } from "./src/consts";
10
+
11
+
import { BASE, SITE } from "./src/config.json"
11
12
12
13
// https://astro.build/config
13
14
export default defineConfig({
+2
-4
src/colors.ts
+2
-4
src/colors.ts
···
1
-
import type { AccentColors, BaseColors } from "./types";
2
-
3
-
export const colorBaseClasses: Record<BaseColors, string> = {
1
+
export const colorBaseClasses: Record<string, string> = {
4
2
slate: "prose-slate",
5
3
stone: "prose-stone",
6
4
gray: "prose-gray",
···
8
6
zinc: "prose-zinc",
9
7
};
10
8
11
-
export const colorAccentClasses: Record<AccentColors, string> = {
9
+
export const colorAccentClasses: Record<string, string> = {
12
10
red: "prose-red",
13
11
orange: "prose-orange",
14
12
amber: "prose-amber",
+1
-1
src/components/BaseHead.astro
+1
-1
src/components/BaseHead.astro
+1
-1
src/components/BlogEntry.astro
+1
-1
src/components/BlogEntry.astro
+1
-1
src/components/Header.astro
+1
-1
src/components/Header.astro
+1
-1
src/components/Pagination.astro
+1
-1
src/components/Pagination.astro
+1
-1
src/components/PaginationNumber.astro
+1
-1
src/components/PaginationNumber.astro
+21
src/config.json
+21
src/config.json
···
1
+
{
2
+
"SITE": "https://flo-bit.github.io",
3
+
"BASE": "/blog-template",
4
+
"SITE_TITLE": "Blog template",
5
+
"SITE_DESCRIPTION": "Welcome to my website!",
6
+
"SITE_FAVICON": "🙃",
7
+
"NAME": "flo-bit",
8
+
"POSTS_PER_PAGE": 5,
9
+
"MANUAL_DARK_MODE": true,
10
+
"SEARCH_ENABLED": true,
11
+
"BASE_COLOR": "stone",
12
+
"ACCENT_COLOR": "amber",
13
+
"FACEBOOK_URL": "",
14
+
"TWITTER_URL": "https://x.com/flobit_dev",
15
+
"GITHUB_URL": "https://github.com/flo-bit",
16
+
"INSTAGRAM_URL": "https://www.instagram.com/flobit.dev/",
17
+
"LINKEDIN_URL": "",
18
+
"YOUTUBE_URL": "",
19
+
"SUBSTACK_URL": "https://flo-bit.substack.com",
20
+
"EMAIL": "flo.bit.dev@gmail.com"
21
+
}
-2
src/content/blog/adding-content.md
-2
src/content/blog/adding-content.md
···
21
21
Check out all the [options you can use in the frontmatter of a blog post](../post-options).
22
22
23
23
After that just write your content in markdown format (you don't need to write the title again, it will be automatically added to the page).
24
-
25
-
You can also use MDX to include components in your markdown files. For more information on how to use MDX, see the post about [using MDX](../using-mdx).
+76
src/content/blog/configuring-the-blog.md
+76
src/content/blog/configuring-the-blog.md
···
1
+
---
2
+
title: "Configuring the blog"
3
+
description: "Learn how to configure the blog template"
4
+
pubDate: "Oct 25 2024"
5
+
heroImage: "/src/assets/blog-placeholder-1.jpg"
6
+
tags: ["setup"]
7
+
---
8
+
9
+
Change the values in `src/config.json` to configure the blog to your liking, see below for more information.
10
+
11
+
most importantly, set `SITE` and `BASE` to your corresponding values.
12
+
13
+
## SITE
14
+
15
+
- when deploying to github pages, set this to your site url
16
+
(e.g. "https://<your-github-username>.github.io")
17
+
18
+
## BASE
19
+
20
+
- when deploying to github pages, set this to your repo name
21
+
except if you're either using a custom domain or
22
+
your repo name is `<your-github-username>.github.io`
23
+
(in which case, set it to "")
24
+
25
+
## SITE_TITLE
26
+
27
+
- will be shown in the title and meta tags and og image
28
+
29
+
## SITE_DESCRIPTION
30
+
31
+
- will be shown in the meta tags
32
+
33
+
## SITE_FAVICON
34
+
35
+
- will be used as the icon in the header and the favicon
36
+
37
+
## NAME
38
+
39
+
- used in the footer (c) YOUR_NAME
40
+
41
+
## POSTS_PER_PAGE
42
+
43
+
- how many posts to show on per paginated page (also used for tag pages)
44
+
45
+
## MANUAL_DARK_MODE
46
+
47
+
- should we show the dark mode toggle?
48
+
(otherwise, it will be based on the user's system preferences)
49
+
50
+
## SEARCH_ENABLED
51
+
52
+
- should we show the search bar?
53
+
54
+
## BASE_COLOR
55
+
56
+
- shade of gray for the background
57
+
one of 'gray', 'neutral', 'stone', 'zinc', 'slate'
58
+
59
+
## ACCENT_COLOR
60
+
61
+
- color of links, etc.
62
+
one of 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal',
63
+
'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'
64
+
65
+
## SOCIAL MEDIA LINKS
66
+
67
+
- set any of these to '' to hide the respective icon in the footer
68
+
69
+
- FACEBOOK_URL
70
+
- TWITTER_URL
71
+
- GITHUB_URL
72
+
- INSTAGRAM_URL
73
+
- LINKEDIN_URL
74
+
- YOUTUBE_URL
75
+
- SUBSTACK_URL
76
+
- EMAIL
-63
src/content/blog/const-ts.md
-63
src/content/blog/const-ts.md
···
1
-
---
2
-
title: "Configuring the blog"
3
-
description: "Learn how to configure the blog template"
4
-
pubDate: "Oct 25 2024"
5
-
heroImage: "/src/assets/blog-placeholder-1.jpg"
6
-
tags: ["setup"]
7
-
---
8
-
9
-
a copy of `src/consts.ts` is included below for reference, change the values to configure the blog to your liking, see the comments for more information.
10
-
11
-
most importantly, set `SITE` and `BASE` to your corresponding values.
12
-
13
-
```ts
14
-
import type { AccentColors, BaseColors } from "./types";
15
-
16
-
// when deploying to github pages, set this to your site url
17
-
// (e.g. "https://<your-github-username>.github.io")
18
-
export const SITE = "https://flo-bit.github.io"
19
-
20
-
// when deploying to github pages, set this to your repo name
21
-
// except if you're either using a custom domain or
22
-
// your repo name is <your-github-username>.github.io
23
-
// (in which case, set it to "")
24
-
export const BASE = "/blog-template";
25
-
26
-
// will be shown in the title and meta tags and og image
27
-
export const SITE_TITLE = "Blog template";
28
-
export const SITE_DESCRIPTION = "Welcome to my website!";
29
-
// will be used as the icon in the header and the favicon
30
-
export const SITE_FAVICON = "🙃";
31
-
32
-
// used in the footer (c) YOUR_NAME
33
-
export const NAME = "flo-bit";
34
-
35
-
// how many posts to show on per paginated page (also used for tag pages)
36
-
export const POSTS_PER_PAGE = 5;
37
-
38
-
// should we show the dark mode toggle?
39
-
// (otherwise, it will be based on the user's system preferences)
40
-
export const MANUAL_DARK_MODE = true;
41
-
42
-
// should we show the search bar?
43
-
export const SEARCH_ENABLED = true;
44
-
45
-
// shade of gray for the background
46
-
// one of 'gray', 'neutral', 'stone', 'zinc', 'slate'
47
-
export const BASE_COLOR: BaseColors = "stone";
48
-
49
-
// color of links, etc.
50
-
// one of 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal',
51
-
// 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'
52
-
export const ACCENT_COLOR: AccentColors = "amber";
53
-
54
-
// set any of these to '' to hide the respective icon in the footer
55
-
export const FACEBOOK_URL = "";
56
-
export const TWITTER_URL = "https://x.com/flobit_dev";
57
-
export const GITHUB_URL = "https://github.com/flo-bit";
58
-
export const INSTAGRAM_URL = "https://www.instagram.com/flobit.dev/";
59
-
export const LINKEDIN_URL = "";
60
-
export const YOUTUBE_URL = "";
61
-
export const SUBSTACK_URL = "https://flo-bit.substack.com";
62
-
export const EMAIL = "flo.bit.dev@gmail.com";
63
-
```
+1
-1
src/content/blog/features.md
+1
-1
src/content/blog/features.md
···
11
11
- ✅ SEO-friendly with canonical URLs and OpenGraph data (automatically generated)
12
12
- ✅ Sitemap support
13
13
- ✅ RSS Feed support
14
-
- ✅ Markdown & MDX support
14
+
- ✅ Markdown support
15
15
- ✅ Pagination
16
16
- ✅ Code syntax highlighting (+ copy button)
17
17
- ✅ Dark and light mode with toggle button or auto-detection
+3
-3
src/content/blog/how-to-use.md
+3
-3
src/content/blog/how-to-use.md
···
8
8
9
9
1. Fork [the repository of this blog](https://github.com/flo-bit/blog-template)
10
10
11
-
2. Set up your blog info in `src/consts.ts` (most importantly set `SITE` and `BASE` to your corresponding values, see [`src/consts.ts`](../const-ts) for more info)
11
+
2. Set up your blog info in `src/config.json` (most importantly set `SITE` and `BASE` to your corresponding values, see [`src/consts.ts`](../const-ts) for more info)
12
12
13
13
3. Add your blog posts in `src/content/blog/` (see [adding content](../adding-content) for more info)
14
14
15
15
4. Add your info in `src/content/info/`:
16
16
17
-
- `description.mdx` is used for the homepage description
18
-
- `about.mdx` is used for the about page
17
+
- `description.md` is used for the homepage description
18
+
- `about.md` is used for the about page
19
19
20
20
5. In your repository settings, set up github pages to deploy using github actions
21
21
-75
src/content/blog/using-mdx.mdx
-75
src/content/blog/using-mdx.mdx
···
1
-
---
2
-
title: "Using MDX"
3
-
description: "How to use MDX in your blog posts"
4
-
pubDate: "Jun 02 2024"
5
-
heroImage: "/src/assets/blog-placeholder-3.jpg"
6
-
hideHero: true
7
-
tags: ["setup", "markdown"]
8
-
---
9
-
10
-
import WarningAlert from '$components/alerts/WarningAlert.svelte';
11
-
12
-
<WarningAlert title="Doesn't work with Pages CMS" class="mt-6">
13
-
MDX is currently not supported by Pages CMS. You can still use it, but you will have to manually add the content to the markdown files.
14
-
</WarningAlert>
15
-
16
-
This theme comes with the [@astrojs/mdx](https://docs.astro.build/en/guides/integrations-guide/mdx/) integration installed and configured in your `astro.config.mjs` config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file.
17
-
18
-
## Why MDX?
19
-
20
-
MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to [mix JavaScript and UI Components into your Markdown content](https://docs.astro.build/en/guides/markdown-content/#mdx-features) for things like interactive charts or alerts.
21
-
22
-
If you have existing content authored in MDX, this integration will hopefully make migrating to Astro a breeze.
23
-
24
-
## Example
25
-
26
-
Here is how you import and use a UI component inside of MDX.
27
-
When you open this page in the browser, you should see the clickable button below.
28
-
29
-
import HeaderLink from "../../components/HeaderLink.astro";
30
-
31
-
<HeaderLink href="#" onclick="alert('clicked!')">
32
-
Embedded component in MDX
33
-
</HeaderLink>
34
-
35
-
## Included Components
36
-
37
-
Currently the only conponents included are `Alerts`, which you can see in the example below:
38
-
39
-
import SuccessAlert from '$components/alerts/SuccessAlert.svelte';
40
-
41
-
<SuccessAlert title="Sucess">
42
-
This is a success alert
43
-
</SuccessAlert>
44
-
45
-
import InfoAlert from '$components/alerts/InfoAlert.svelte';
46
-
47
-
<InfoAlert title="Info" class="mt-6">
48
-
This is an info alert
49
-
</InfoAlert>
50
-
51
-
<WarningAlert title="Warning" class="mt-6">
52
-
This is a warning alert
53
-
</WarningAlert>
54
-
55
-
import ErrorAlert from '$components/alerts/ErrorAlert.svelte';
56
-
57
-
<ErrorAlert title="Error" class="mt-6">
58
-
This is an error alert
59
-
</ErrorAlert>
60
-
61
-
Use them like this:
62
-
63
-
```tsx
64
-
import SuccessAlert from '$components/alerts/SuccessAlert.svelte';
65
-
66
-
<SuccessAlert title="Sucess">
67
-
This is a success alert
68
-
</SuccessAlert>
69
-
```
70
-
71
-
## More Links
72
-
73
-
- [MDX Syntax Documentation](https://mdxjs.com/docs/what-is-mdx)
74
-
- [Astro Usage Documentation](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages)
75
-
- **Note:** [Client Directives](https://docs.astro.build/en/reference/directives-reference/#client-directives) are still required to create interactive components. Otherwise, all components in your MDX will render as static HTML (no JavaScript) by default.
+1
-1
src/content/info/description.md
+1
-1
src/content/info/description.md
···
2
2
3
3
Minimalistic but opinionated blog template using [astro](https://astro.build/) and [svelte](https://svelte.dev/). aims to be super easy to deploy and use, with a focus on performance and SEO, ease-of-use and design (see all [features here](posts/features)).
4
4
5
-
This blog doubles as a tutorial on how to use this template, start by [setting up your github repo](posts/how-to-use), then [add some content](posts/adding-content). For more information read about [supported markdown features here](posts/markdown-style-guide) or how you can [use mdx](posts/using-mdx).
5
+
This blog doubles as a tutorial on how to use this template, start by [setting up your github repo](posts/how-to-use), then [add some content](posts/adding-content). For more information read about [supported markdown features here](posts/markdown-style-guide).
+1
-1
src/layouts/BlogPost.astro
+1
-1
src/layouts/BlogPost.astro
+1
-1
src/pages/about/index.astro
+1
-1
src/pages/about/index.astro
+1
-1
src/pages/index.astro
+1
-1
src/pages/index.astro
+1
-1
src/pages/open-graph/[...route].ts
+1
-1
src/pages/open-graph/[...route].ts
+1
-1
src/pages/pages/[...index].astro
+1
-1
src/pages/pages/[...index].astro
+1
-1
src/pages/posts/[...slug].astro
+1
-1
src/pages/posts/[...slug].astro
···
6
6
import Footer from "$components/Footer.astro";
7
7
import { Image } from "astro:assets";
8
8
import FormattedDate from "$components/FormattedDate.astro";
9
-
import { BASE } from "src/consts";
9
+
import { BASE } from "../../config.json";
10
10
11
11
export async function getStaticPaths() {
12
12
const posts = await getCollection("blog");
+1
-1
src/pages/rss.xml.js
+1
-1
src/pages/rss.xml.js
···
1
1
import rss from "@astrojs/rss";
2
2
import { getCollection } from "astro:content";
3
-
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
3
+
import { SITE_TITLE, SITE_DESCRIPTION } from "../config.json";
4
4
5
5
export async function GET(context) {
6
6
const posts = await getCollection("blog");
+1
-1
tailwind.config.mjs
+1
-1
tailwind.config.mjs
···
2
2
import forms from "@tailwindcss/forms";
3
3
import plugin from "tailwindcss/plugin";
4
4
import colors from "tailwindcss/colors";
5
-
import { ACCENT_COLOR, BASE_COLOR, MANUAL_DARK_MODE } from "./src/consts";
5
+
import { ACCENT_COLOR, BASE_COLOR, MANUAL_DARK_MODE } from "./src/config.json";
6
6
7
7
/** @type {import('tailwindcss').Config} */
8
8
export default {