Skip to content

Commit 8e06f79

Browse files
committed
feat(blog): add reading UX enhancements
- Add reading time estimation (Korean: chars/min, English: words/min) - Add auto-generated table of contents for posts with 3+ headings - Add related posts section based on matching tags - Add prev/next post navigation - Add reading progress bar at top of page - Add copy button for code blocks - Add lazy loading for post images - Update README with Makefile image conversion usage
1 parent 5c82122 commit 8e06f79

File tree

6 files changed

+747
-69
lines changed

6 files changed

+747
-69
lines changed

Makefile

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# Image conversion Makefile
2+
# Usage:
3+
# make convert - Convert all images (webp + mp4)
4+
# make webp - Convert PNG/JPG to WebP
5+
# make mp4 - Convert GIF to MP4
6+
# make clean - Remove converted files (use with caution)
7+
8+
.PHONY: all convert webp mp4 help clean
9+
10+
# Default target
11+
all: convert
12+
13+
# Convert all images
14+
convert: webp mp4
15+
@echo ""
16+
@echo "=== All conversions complete ==="
17+
18+
# Convert PNG/JPG to WebP
19+
webp:
20+
@echo "=== Converting PNG/JPG to WebP ==="
21+
@./scripts/convert-images-to-webp.sh
22+
23+
# Convert GIF to MP4
24+
mp4:
25+
@echo "=== Converting GIF to MP4 ==="
26+
@./scripts/convert-gif.sh
27+
28+
# Help
29+
help:
30+
@echo "Image Conversion Makefile"
31+
@echo ""
32+
@echo "Usage:"
33+
@echo " make convert - Convert all images (webp + mp4)"
34+
@echo " make webp - Convert PNG/JPG to WebP only"
35+
@echo " make mp4 - Convert GIF to MP4 only"
36+
@echo " make help - Show this help"
37+
@echo ""
38+
@echo "Requirements:"
39+
@echo " - cwebp (brew install webp)"
40+
@echo " - ffmpeg (brew install ffmpeg)"

README.md

Lines changed: 11 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,16 @@
1-
# Astro Starter Kit: Blog
1+
# ppippi-dev Blog
22

3-
```sh
4-
npm create astro@latest -- --template blog
5-
```
6-
7-
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
8-
9-
Features:
10-
11-
- ✅ Minimal styling (make it your own!)
12-
- ✅ 100/100 Lighthouse performance
13-
- ✅ SEO-friendly with canonical URLs and OpenGraph data
14-
- ✅ Sitemap support
15-
- ✅ RSS Feed support
16-
- ✅ Markdown & MDX support
3+
## Image Conversion
174

18-
## 🚀 Project Structure
19-
20-
Inside of your Astro project, you'll see the following folders and files:
21-
22-
```text
23-
├── public/
24-
├── src/
25-
│   ├── components/
26-
│   ├── content/
27-
│   ├── layouts/
28-
│   └── pages/
29-
├── astro.config.mjs
30-
├── README.md
31-
├── package.json
32-
└── tsconfig.json
5+
```bash
6+
make convert # PNG/JPG -> WebP + GIF -> MP4
7+
make webp # PNG/JPG -> WebP
8+
make mp4 # GIF -> MP4
9+
make help # Show help
3310
```
3411

35-
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
36-
37-
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
38-
39-
The `src/content/` directory contains "collections" of related Markdown and MDX documents. Use `getCollection()` to retrieve posts from `src/content/blog/`, and type-check your frontmatter using an optional schema. See [Astro's Content Collections docs](https://docs.astro.build/en/guides/content-collections/) to learn more.
12+
### Requirements
4013

41-
Any static assets, like images, can be placed in the `public/` directory.
42-
43-
## 🧞 Commands
44-
45-
All commands are run from the root of the project, from a terminal:
46-
47-
| Command | Action |
48-
| :------------------------ | :----------------------------------------------- |
49-
| `npm install` | Installs dependencies |
50-
| `npm run dev` | Starts local dev server at `localhost:4321` |
51-
| `npm run build` | Build your production site to `./dist/` |
52-
| `npm run preview` | Preview your build locally, before deploying |
53-
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
54-
| `npm run astro -- --help` | Get help using the Astro CLI |
55-
56-
## 👀 Want to learn more?
57-
58-
Check out [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
59-
60-
## Credit
61-
62-
This theme is based off of the lovely [Bear Blog](https://github.com/HermanMartinus/bearblog/).
14+
```bash
15+
brew install webp ffmpeg
16+
```

0 commit comments

Comments
 (0)