/goulven-clech.dev

My personnal blog, made with Astro, TypeScript & Tailwind CSS.

Primary LanguageAstroBSD Zero Clause License0BSD

👋👋👋

My personnal blog, made with Astro, TypeScript & Tailwind CSS. Live at goulven-clech.dev, hosted by Vercel.

The source code is provided under the 0BSD license, attribution is appreciated but not required. The blog textual content is provided under the CC BY 4.0 Deed, attribution is required. But for both, you are free to use, copy, modify, and/or distribute for any purpose, commercial or personal.

Some articles may cite text, images or resources from external sources: their original licenses apply, and I indicate the authors if known.

Notable features

At its heart, this project looks like any blog made with Astro, you can start by reading my article "Launching a blog with Astro". But, little by little, I added some original features that might interest you, here are the main ones:

  • Search bar: made with Astro and Web Components only, filter blog entries based on user's input.

  • Table of contents: using Astro and MDX, generate a table of contents based on the headings. With nested lists.

  • Open Library & Google Maps blocks: nicely displays API results in blog entries.

  • Dark mode: toggle between light, dark, and system color schemes. Use local storage to persist the user's choice.

  • Custom image service: retrieved from Erika's blog, gain performance and display a placeholder during image loading.

Project Structure

/
├── src/
│   ├── content/ -> Sub repository
│   ├── assets/
│   │   └── base.css
│   ├── components/
│   │   └── Card.astro
│   ├── layouts/
│   │   └── Layout.astro
│   ├── pages/
│   │   └── index.astro
│   ├── env.d.ts
│   └── [...utils].ts
├── public/
│   └── Iosevka-Regular.woff2
├── [... config files]
├── README.md
└── package.json

pages/ contains every page of this blog as .astro files.

layouts/ and components/ contains every web component as `.astro`` files.

Commands

Command Action
pnpm install Installs dependencies
pnpm run dev Starts local dev server at localhost:3000
pnpm run build Build your production site to ./dist/
pnpm run preview Preview your build locally, before deploying
pnpm run astro ... Run CLI commands like astro add, astro check
pnpm run astro --help Get help using the Astro CLI

All commands should be run from the root of the project, from a terminal. Instead of PNPM, you can also use NPM or Yarn.