8 | 
9 |
10 | ## Features
11 |
12 | - Fast and light weight. Lighthouse 4 \* 100/100 on desktop. 1 point decreased on mobile.
13 | - [Astro 4](https://astro.build)
14 | - No other UI frameworks integrated for better performance
15 | - mobile-friendly responsive design with [Tailwind CSS](https://tailwindcss.com/)
16 | - Light / dark theme derived from [hugo-theme-zozo](https://github.com/varkai/hugo-theme-zozo)
17 | - Markdown post support with emoji shortcode, katex
18 | - static search with [Pagefind](https://pagefind.app)
19 | - comment system powered by [giscus](https://github.com/giscus/giscus)
20 | - SEO-friendly setup with canonical URLs and OpenGraph data
21 | - RSS generation
22 | - Sitemap.xml generation
23 | - dynamic open graph image generation
24 | - Hide unwanted elements through [config](./src/config.ts)
25 |
26 | ## Getting Started
27 |
28 | See [this post](https://astro-blog-zozo.pages.dev/posts/getting-started) for using this template.
29 |
30 | ## Todo
31 |
32 | - `@shikijs/transformers` require custom style
33 | - i18n
34 |
35 | ## Contribute
36 |
37 | Issues and PRs are welcome!
38 |
39 | ## License
40 |
41 | [MIT](./LICENSE)
42 |
43 | ## Acknowledgements
44 |
45 | - [varkai/hugo-theme-zozo](https://github.com/varkai/hugo-theme-zozo)
46 | - [Charca/astro-blog-template](https://github.com/Charca/astro-blog-template)
47 | - [satnaing/astro-paper](https://github.com/satnaing/astro-paper)
48 | - [ricora/alg.tus-ricora.com](https://github.com/ricora/alg.tus-ricora.com)
49 | - [one-aalam/astro-ink](https://github.com/one-aalam/astro-ink)
50 |
--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
1 | import { rehypeHeadingIds } from '@astrojs/markdown-remark';
2 | import sitemap from '@astrojs/sitemap';
3 | import tailwind from '@astrojs/tailwind';
4 | import toc from '@jsdevtools/rehype-toc';
5 | import compress from '@playform/compress';
6 | import {
7 | transformerMetaHighlight,
8 | transformerMetaWordHighlight,
9 | transformerNotationDiff,
10 | transformerNotationErrorLevel,
11 | transformerNotationFocus,
12 | transformerNotationHighlight,
13 | transformerNotationWordHighlight,
14 | } from '@shikijs/transformers';
15 | import icon from 'astro-icon';
16 | import pagefind from 'astro-pagefind';
17 | import { defineConfig } from 'astro/config';
18 | import { rehypeAccessibleEmojis } from 'rehype-accessible-emojis';
19 | import rehypeExternalLinks from 'rehype-external-links';
20 | import rehypeKatax from 'rehype-katex';
21 | import emoji from 'remark-emoji';
22 | import remarkMath from 'remark-math';
23 | import { Site } from './src/config';
24 | import { getMarkdownEntries } from './src/utils/post';
25 | import { remarkPostTime, remarkReadingTime } from './src/utils/remark';
26 | import { transformerEnhanser } from './src/utils/shiki';
27 |
28 | const excludeSitemapFiles = (await getMarkdownEntries()).filter(
29 | (entry) => entry.file.data.hidden,
30 | );
31 |
32 | // https://astro.build/config
33 | export default defineConfig({
34 | site: Site,
35 | build: {
36 | format: 'file',
37 | },
38 | integrations: [
39 | tailwind({
40 | applyBaseStyles: false,
41 | }),
42 | icon({
43 | iconDir: 'src/assets',
44 | }),
45 | pagefind(),
46 | sitemap({
47 | filter: (page) =>
48 | !excludeSitemapFiles.some((entry) => entry.url.href === page),
49 | }),
50 | compress({
51 | CSS: {
52 | csso: false,
53 | lightningcss: {
54 | minify: true,
55 | },
56 | },
57 | HTML: true,
58 | Image: true,
59 | JavaScript: true,
60 | SVG: true,
61 | Parser: {
62 | CSS: 'lightningcss',
63 | },
64 | }),
65 | ],
66 | prefetch: {
67 | defaultStrategy: 'tap',
68 | },
69 | markdown: {
70 | shikiConfig: {
71 | themes: {
72 | light: 'vitesse-light',
73 | dark: 'vitesse-dark',
74 | },
75 | // disable word wrap for horizontal scrolling
76 | wrap: false,
77 | // Add custom transformers: https://shiki.style/guide/transformers
78 | // Find common transformers: https://shiki.style/packages/transformers
79 | transformers: [
80 | transformerMetaHighlight(),
81 | transformerMetaWordHighlight(),
82 | transformerNotationDiff(),
83 | transformerNotationErrorLevel(),
84 | transformerNotationFocus(),
85 | transformerNotationHighlight(),
86 | transformerNotationWordHighlight(),
87 | transformerEnhanser(),
88 | ],
89 | },
90 | remarkPlugins: [emoji, remarkMath, remarkPostTime, remarkReadingTime],
91 | rehypePlugins: [
92 | rehypeAccessibleEmojis,
93 | [rehypeExternalLinks, { target: '_blank' }],
94 | rehypeHeadingIds,
95 | toc,
96 | rehypeKatax,
97 | ],
98 | },
99 | });
100 |
--------------------------------------------------------------------------------
/biome.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
3 | "files": {
4 | "ignore": [".wrangler", ".astro", "dist"]
5 | },
6 | "organizeImports": {
7 | "enabled": true
8 | },
9 | "linter": {
10 | "enabled": true,
11 | "rules": {
12 | "recommended": true
13 | }
14 | },
15 | "javascript": {
16 | "formatter": {
17 | "quoteStyle": "single"
18 | }
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/bun.lockb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ladit/astro-blog-zozo/9b8e8cadc6c7ea2061291afff6494956fe736f22/bun.lockb
--------------------------------------------------------------------------------
/giscus.example.json:
--------------------------------------------------------------------------------
1 | {
2 | "origins": ["https://astro-blog-zozo.pages.dev"]
3 | }
4 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "astro-blog-zozo",
3 | "version": "0.0.3",
4 | "author": {
5 | "name": "Ladit",
6 | "email": "i@ladit.me",
7 | "url": "https://github.com/ladit"
8 | },
9 | "homepage": "https://github.com/ladit/astro-blog-zozo",
10 | "repository": {
11 | "type": "git",
12 | "url": "git+https://github.com/ladit/astro-blog-zozo.git"
13 | },
14 | "license": "MIT",
15 | "bugs": {
16 | "url": "https://github.com/ladit/astro-blog-zozo/issues"
17 | },
18 | "type": "module",
19 | "engines": {
20 | "bun": ">=1.1.34"
21 | },
22 | "scripts": {
23 | "dev": "astro dev",
24 | "check": "astro check",
25 | "build": "astro check && bunx @biomejs/biome check --write . && astro build",
26 | "preview": "astro preview",
27 | "preview:wrangler": "wrangler pages dev ./dist",
28 | "astro": "astro",
29 | "lint": "bunx @biomejs/biome check --write ."
30 | },
31 | "dependencies": {
32 | "@astrojs/markdown-remark": "^5.3.0",
33 | "@astrojs/rss": "^4.0.9",
34 | "@astrojs/sitemap": "^3.2.1",
35 | "@astrojs/tailwind": "^5.1.2",
36 | "@iconify-json/ri": "^1.2.3",
37 | "@jsdevtools/rehype-toc": "^3.0.2",
38 | "@nanostores/persistent": "^0.10.2",
39 | "@playform/compress": "^0.1.6",
40 | "@shikijs/transformers": "^1.22.2",
41 | "@tailwindcss/typography": "^0.5.15",
42 | "astro": "^4.16.12",
43 | "astro-icon": "^1.1.2",
44 | "astro-pagefind": "^1.6.0",
45 | "katex": "^0.16.11",
46 | "lxgw-wenkai-screen-web": "^1.501.0",
47 | "mdast-util-to-string": "^4.0.0",
48 | "node-gyp": "^10.2.0",
49 | "react": "^18.3.1",
50 | "reading-time": "^1.5.0",
51 | "rehype-accessible-emojis": "^0.3.2",
52 | "rehype-external-links": "^3.0.0",
53 | "rehype-katex": "^7.0.1",
54 | "remark-emoji": "^5.0.1",
55 | "remark-math": "^6.0.0",
56 | "satori": "^0.11.3",
57 | "sharp": "^0.33.5",
58 | "tailwind-scrollbar": "^3.1.0",
59 | "tailwindcss": "^3.4.14"
60 | },
61 | "devDependencies": {
62 | "@astrojs/check": "^0.9.4",
63 | "@biomejs/biome": "1.9.4",
64 | "@types/bun": "^1.1.13",
65 | "@types/react": "^18.3.12",
66 | "globals": "^15.12.0",
67 | "typescript": "^5.6.3"
68 | },
69 | "trustedDependencies": ["@biomejs/biome", "esbuild", "sharp"]
70 | }
71 |
--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | // @ts-check
2 |
3 | /** @type {import("postcss-load-config").Config} */
4 | export default {
5 | plugins: {
6 | 'postcss-import': {},
7 | 'tailwindcss/nesting': {},
8 | tailwindcss: {},
9 | autoprefixer: {},
10 | },
11 | };
12 |
--------------------------------------------------------------------------------
/public/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ladit/astro-blog-zozo/9b8e8cadc6c7ea2061291afff6494956fe736f22/public/apple-touch-icon.png
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ladit/astro-blog-zozo/9b8e8cadc6c7ea2061291afff6494956fe736f22/public/favicon.ico
--------------------------------------------------------------------------------
/screenshot-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ladit/astro-blog-zozo/9b8e8cadc6c7ea2061291afff6494956fe736f22/screenshot-dark.png
--------------------------------------------------------------------------------
/screenshot-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ladit/astro-blog-zozo/9b8e8cadc6c7ea2061291afff6494956fe736f22/screenshot-light.png
--------------------------------------------------------------------------------
/src/assets/LXGWWenKaiGBScreen.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ladit/astro-blog-zozo/9b8e8cadc6c7ea2061291afff6494956fe736f22/src/assets/LXGWWenKaiGBScreen.ttf
--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/og-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ladit/astro-blog-zozo/9b8e8cadc6c7ea2061291afff6494956fe736f22/src/assets/og-logo.png
--------------------------------------------------------------------------------
/src/assets/undraw_dog_c7i6.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/BackToTop.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { Icon } from 'astro-icon/components';
3 | ---
4 |
5 |
25 |
26 |
49 |
--------------------------------------------------------------------------------
/src/components/Comments.astro:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
68 |
--------------------------------------------------------------------------------
/src/components/Footer.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { FooterDescription, Hide } from '~/config';
3 | ---
4 |
5 |
23 |
--------------------------------------------------------------------------------
/src/components/Header.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import fs from 'node:fs/promises';
3 | import { Icon } from 'astro-icon/components';
4 | import { Hide, SiteDescription, SiteTitle, Socials } from '~/config';
5 | import Nav from './Nav.astro';
6 | import ThemeToggler from './ThemeToggler.astro';
7 |
8 | interface Props {
9 | currentNav?: string;
10 | }
11 | const { currentNav } = Astro.props;
12 |
13 | const customLogo = (await fs.stat('./src/assets/logo.svg')).isFile();
14 |
15 | const socialConfig: Record{post.data.description}
24 |
155 | 166 | Getting a new business off the ground is a lot of hard work. Here are five 167 | ideas you can use to find your first customers. 168 |
169 |Text placeholder via Jeffsum.
15 |16 | So you two dig up, dig up dinosaurs? What do they got in there? King Kong? My dad once told me, 17 | laugh and the world laughs with you, Cry, and I'll give you something to cry about you little 18 | bastard! Life finds a way. God creates dinosaurs. God destroys dinosaurs. God creates Man. Man 19 | destroys God. Man creates Dinosaurs. 20 |
21 |22 | You really think you can fly that thing? You know what? It is beets. I've crashed into a beet 23 | truck. Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! Is this my 24 | espresso machine? Wh-what is-h-how did you get my espresso machine? 25 |
26 |27 | Hey, you know how I'm, like, always trying to save the planet? Here's my chance. Hey, take a 28 | look at the earthlings. Goodbye! I was part of something special. Just my luck, no ice. You're a 29 | very talented young man, with your own clever thoughts and ideas. Do you need a manager? 30 |
31 |32 | Jaguar shark! So tell me - does it really exist? This thing comes fully loaded. AM/FM radio, 33 | reclining bucket seats, and... power windows. Yes, Yes, without the oops! You're a very talented 34 | young man, with your own clever thoughts and ideas. Do you need a manager? 35 |
36 |37 | Yes, Yes, without the oops! Do you have any idea how long it takes those cups to decompose. 38 | They're using our own satellites against us. And the clock is ticking. Do you have any idea how 39 | long it takes those cups to decompose. My dad once told me, laugh and the world laughs with you, 40 | Cry, and I'll give you something to cry about you little bastard! 41 |
42 |19 | This is a blog template built with Astro. The theme 20 | originates from hugo-theme-zozo. 21 | Check out the docs to get started. Here are some 22 | features: 23 |
24 |
. You can convert to png like below:
10 | // const logoImage =
11 | // 'data:image/png;base64,' +
12 | // (await sharp('src/assets/logo.svg').png().toBuffer()).toString('base64');
13 |
14 | // or use a png file
15 | const logoImage = `data:image/png;base64,${(
16 | await fs.promises.readFile('src/assets/og-logo.png')
17 | ).toString('base64')}`;
18 |
19 | // the font file is integrated to prevent Github action failure for now.
20 | const font = async () => {
21 | const fontPath = 'src/assets/LXGWWenKaiGBScreen.ttf';
22 | if (!fs.existsSync(fontPath)) {
23 | // eslint-disable-next-line no-console
24 | console.log('downloading a font for open graph, wait a minute');
25 | const remoteFont =
26 | 'https://github.com/lxgw/LxgwWenKai-Screen/releases/latest/download/LXGWWenKaiGBScreen.ttf';
27 | const response = await fetch(remoteFont);
28 | if (!response.ok) {
29 | throw new Error(
30 | `can not download font from ${remoteFont} while generating open graph image`,
31 | );
32 | }
33 | fs.promises.writeFile(fontPath, new DataView(await response.arrayBuffer()));
34 | }
35 | return fs.promises.readFile(fontPath);
36 | };
37 |
38 | const options: SatoriOptions = {
39 | width: 1200,
40 | height: 630,
41 | fonts: [
42 | {
43 | name: 'LXGW WenKai GB Screen',
44 | data: await font(),
45 | },
46 | ],
47 | tailwindConfig: {
48 | theme: {
49 | fontFamily: {
50 | sans: ['"LXGW WenKai GB Screen"'],
51 | serif: ['"LXGW WenKai GB Screen"'],
52 | mono: ['Menlo', 'Consolas'],
53 | },
54 | },
55 | },
56 | loadAdditionalAsset: async (languageCode, segment) => {
57 | if (languageCode === 'emoji') {
58 | try {
59 | const response = await fetch(
60 | `https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/${segment}_color.svg`,
61 | );
62 | if (!response.ok) {
63 | return segment;
64 | }
65 | return `data:image/png;base64,${(
66 | await sharp(await response.arrayBuffer())
67 | .png()
68 | .toBuffer()
69 | ).toString('base64')}`;
70 | } catch {
71 | return segment;
72 | }
73 | }
74 | return segment;
75 | },
76 | };
77 |
78 | declare module 'react' {
79 | interface HTMLAttributes{SiteTitle}
95 |{SiteDescription}
96 |{SiteDescription}
126 |{title}
129 |{description}
130 |133 | {tag} 134 |
135 | ))} 136 |