s-public

Important

This is the source code of s-hirano.com. It consists of a portfolio and a blog which summarizes the knowledge I gained over the years.

✅ Lighthouse Score

💻 Tech Stack

Main Framework - Astro
Type Checking - TypeScript
Component Framework - ReactJS
Package Manager - pnpm
Styling - TailwindCSS | DaisyUI
Icons - Boxicons | Tablers
Fonts - Google Fonts
Code Formatting - Prettier
Linting - ESLint
Markdown Linting - markdownlint-cli2
CSS Linting - Stylelint
Secret linting - secretlint
Auto Commit Rejection - Husky
Package updates - Renovate
HTML checker - Nu Html Checker
Lighthouse - LightHouse
Visual regression - Playwright test
SVG optimization - svgo
Vulnerabilities Check - npm-audit Dependabot alert

My infrastructure stack

Version Management - GitHub
Deployment - Cloudflare Pages
Analytics - Google Analytics
Search Console - Google Search Console
Domain - Onamae.com

🍾 Setups

Initial setups

git clone https://github.com/s-hirano-ist/s-public.git
pnpm install

Adding photos

Run task.json to add photos to ./src/assets/photo.

Instead, run the following command if you added photos to ./src/assets/photo.

• if python installed

python script/generate_photo_path.py

• if docker installed

docker run -it --rm -v $(pwd):/usr/src/app -w /usr/src/app python:3.11 python3 script/generate_photo_path.py

Update books at src/content/book/original.json

pnpm generate:book

Update licenses

pnpm license:json
pnpm license:summary

Check for inappropriate licenses

bash checkLicense.sh

Cloudflare deployment

Add GitHub integration for auto-deployment on Cloudflare.

Google Site Verification (optional)

Access Google Search Console and publish "google-site-verification" tag. Access Onamae.com to add DNS TXT record.

☀ Favicon

• Text: S
• Background: Rounded
• Font Family: Geostar Fill
• Font Variant: Regular 400 Normal
• Font Size: 110
• Font Color: #77A2C0

https://favicon.io/favicon-generator/

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
pnpm install	Installs dependencies
pnpm check	Check types
pnpm dev	Starts local dev server at localhost:4321
pnpm build	Build production site to ./dist
pnpm preview	Preview build locally
pnpm tsc	Check types with TypeScript
pnpm fmt	Check code format with Prettier
pnpm fmt:fix	Format codes with Prettier
pnpm lint	Lint with ESLint
pnpm lint:fix	Fix lint with ESLint
pnpm lint:mark	Lint markdown files with markdownlint-cli2
pnpm lint:mark:fix	Fix lint markdown files with markdownlint-cli2
pnpm lint:css	Lint css files with StyleLint
pnpm lint:css:fix	Fix lint css files with StyleLint
pnpm lint:secret	Lint secrets files with secretLint
pnpm generate:book	Generate book data using Google Books API
pnpm generate:photo	Generate photo paths
pnpm license:summary	Generate license summary
pnpm license:json	Generate license JSON
pnpm security	Security check with pnpm audit
pnpm snapshots	Visual regression with existing screenshots
pnpm snapshots:update	Visual regression but update snapshots

🪝 Tags & Realease

1. Update version in package.json

2. Run the following command

gh release create --generate-notes

📜 License

Licensed under the MIT License, Copyright © 2024

Licenses of used libraries

See license.summary.txt for summary of used licenses.

🔒 Security

s-hirano.com/summary/coding-securityを参照。