Welcome! This is the site of wry.
The code and design are directly derived from Sat Naing 👨🏻💻's fantastic astro-paper. Project structure like client scripting, full-text search, route generation are heavily modified to suit personal taste.
This theme is written in vanilla TypeScript for SSG and a sprinkling of client-side JavaScript and libraries to add some interactions for a better experience when navigating the site. TailwindCSS is used for styling and Markdown for blog content. While not thoroughly tested, the site works mostly fine with JavaScript disabled.
- type-safe markdown
- progressive enhencement
- accessible (Keyboard/VoiceOver)
- responsive (mobile ~ desktops)
- SEO-friendly
- light & dark mode
- full-text search
- draft posts & pagination
- sitemap & rss feed
- dynamic OG image generation for blog posts
/
├── public/
│ └── favicon.ico
│ └── toggle-theme.js
├── src/
│ ├── assets/
│ ├── components/
│ ├── content/
│ │ | blog/
│ │ | └── some-blog-posts.md
│ │ └── config.ts
│ ├── icons/
│ ├── layouts/
│ └── pages/
│ └── styles/
│ └── utils/
│ └── config.ts
│ └── env.d.ts
└── package.jsonAstro 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.
- Main Framework: Astro
- Type Checking: TypeScript
- Styling: TailwindCSS
- Full-Text Search: Pagefind
- Icons: Tablers
- Code Formatting: Prettier
- Linting: ESLint
- Deployment: Cloudflare Pages
The easiest way to run this project locally is to run the following command in your desired directory.
bun create astro --template wry-red/siteYou can easily add your Google Site Verification HTML tag in your site using environment variable. This step is optional. If you don't add the following env variable, the google-site-verification tag won't appear in the html <head> section.
# in your environment variable file (.env)
PUBLIC_GOOGLE_SITE_VERIFICATION=<your-google-site-verification-value>All commands are run from the root of the project, from a terminal:
Note! For
Dockercommands we must have it installed in your machine.
| Command | Action |
|---|---|
bun install |
Installs dependencies |
bun run dev |
Starts local dev server at localhost:4321 |
bun run check |
Check code typing |
bun run build |
Build your production site to ./dist/ |
bun run preview |
Preview your build locally, before deploying |
bun run format:check |
Check code format with Prettier |
bun run format |
Format codes with Prettier |
bun run sync |
Generates TypeScript types for all Astro modules. Learn more. |
bun run commit |
Commit code changes with commitizen |
bun run lint |
Lint with ESLint |
docker compose up -d |
Run Astro on docker, You can access with the same hostname and port informed on dev command. |
docker compose run app bun install |
You can run any command above into the docker container. |
Warning! Windows PowerShell users may need to install the concurrently package if they want to run diagnostics during development (
astro check --watch & astro dev).
If you have any suggestions/feedback, feel free to open an issue if you find bugs or want to request new features.
Licensed under the MIT License, Copyright © 2023
Made with ❤️ by wry, Derived from Sat Naing 👨🏻💻's fantastic astro-paper.