younagi.dev

A website where Nagi, just another engineer & creator, posts his work and writings every so often.

Tech stack

• Languages:
  • TypeScript: JavaScript with syntax for types
  • TSX: JSX, an embeddable XML-like syntax, written in TypeScript
  • YAML: A human-friendly data serialization language
• Data format:
  • JSON: A lightweight data-interchange format
• Meta framework:
  • Astro: The web framework for content-driven websites
• Framework:
  • SolidJS: A declarative, efficient and flexible JavaScript library for building UIs
• Styling:
  • Vanilla CSS: A simple mechanism for adding style to Web documents
  • Vanilla Extract: Zero-runtime stylesheets in TypeScript
  • 👉 Tailwind CSS: A utility-first CSS framework
  • Astro's Scoped CSS: Vanilla CSS encapsulated inside Astro components
• DB:
  • Cloudflare D1(Sqlite): Cloudflare’s native serverless database
• ORM:
  • Drizzle ORM: A lightweight and performant TypeScript ORM
• Dev:
  • Dev Containers: Docker containers that are specifically configured to provide a fully featured development environment
  • Docker: An open platform for developing, shipping, and running applications
• CI/CD:
  • Github Actions: A CI/CD platform fully based in Github
  • DangerJS: An automation tool for your team's conventions surrounding code review
• Commit management:
  • Git-cz: A Conventional commit CLI
• Deployment:
  • Cloudflare Pages: A JAMstack platform for frontend developers to collaborate and deploy websites
• CMS:
  • Front Matter CMS: The CMS that runs within VSCode, GitPod, etc
• Bot management:
  • Cloudflare Turnstile: Cloudflare's CAPTCHA alternative solution
• Package manager:
  • Bun: An all-in-one JavaScript runtime & toolkit
• Dependency management:
  • Renovate: A Github app that keeps deps up-to-date using automated PRs
• Linter & formatter:
  • Biome: Both a fast formatter and performant linter
• Proofreading:
  • Textlint: The pluggable linting tool for text and markdown
• Git hooks manager:
  • Lefthook: A polyglot Git hooks manager
• Email sender:
  • Resend: A simple email API for developers

Ready, Set, Go!

This section is a memo for myself assuming there are other project members or contributers.

Prerequisites

You need to:

• install VSCode on your local machine
• install the Remote Development extension in your VSCode editor

Important

You can also start coding without them, but need to install required packages and libraries in your local in that case.

The Dev Workflow

This project adopts Issue-driven Development.

Note

Issue-driven Development is a dev process where:

• developers are always supposed to create a Github issue first whenever starting coding
• issues are associated with specific branches one-to-one, in which development proceeds
• After peer code reviews and passing your team's conventional rules, changes are finally merged into the main branch

1. On the issue page, create an issue
   • Select a template that matches the purpose of your issue
   • Add a label that describes the purpose well on an as-needed basis
     • Some templates has the default setting so you don't have to do so
   • In your issue, clarify the following points
     • The purpose
     • As-is
     • To-be
2. Select "Create a branch for this issue or link a pull request" to create a branch for your issue
   • e.g., "18-refine-readme" for an issue #18 to refine the README doc
3. In your local dev environment, execute git switch -c [[the branch name]]
   • If you haven't had a clone of this project, execute git clone https://github.com/brklntmhwk/younagi.dev.git first
     • In a real project run by a team, fork this project first via the Github repo and then clone it
   • Hereafter, you're supposed to be at the project root
4. Execute git pull origin [[the branch name]] to keep your local up to date
5. Start coding!
   1. Setup outside the container
   2. Open the VSCode command palette
   3. Select "Dev Containers: Reopen Container"
      • It starts rebuilding the container if needed
      • It might take longer the first time
   4. Setup inside the container
6. After you're finished coding, execute git add . > git cz, add commit info answering prompts, and then execute git push origin [[the branch name]]
7. Go to the project's repo and create a pull request for changes you've made
   • The title of pull requests must be in this format: <type>(<scope>): detailed descriptions here...
     • Check the changelog config or dangerfile for allowed types & scopes
     • e.g., "feat(ui): 🆕 add a likes button"
   • Use a template by hitting the URL like below
     • https://github.com/brklntmhwk/younagi.dev/compare/main...${BRANCH_NAME}?template=${TEMPLATE_NAME}
     • For the TEMPLATE_NAME, see under the ".github/PULL_REQUEST_TEMPLATE/" directory
       • e.g., ...?template=01_basic.md
8. Fix your code over the course of peer code review on an as-needed basis
   • Once the whole team gives you the green light, changes you've made will be merged into the main branch
9. Confirm if the merge is done without any problem and then delete the remote branch from this page
   • Execute git switch main > git branch -d [[the branch name]] to delete the one in local

Setup for coding

Outside the container

1. Create .env and .dev.vars at the root
   • see .env.example and .dev.vars.example for reference, respectively
   • At this moment, you can't set the LOCAL_DB_PATH var yet

Inside the container

1. Set the LOCAL_DB_PATH var looking up the dir ".wrangler/state/v3/d1/miniflare-D1DatabaseObject/"
2. Run bun dev --host to start the dev server
3. Access the localhost URL shown

License

This project is licensed under the MIT License, see the LICENSE file for more details.