Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/goulvenclech/goulven-clech.dev

My personnal blog, made with Astro, TypeScript & Tailwind CSS.
https://github.com/goulvenclech/goulven-clech.dev

astrojs blog netlify ssg static-site tailwind tailwindcss typescript

Last synced: 23 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/goulvenclech/goulven-clech.dev
Owner: goulvenclech
License: 0bsd
Created: 2019-10-28T09:40:35.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2024-09-06T17:16:17.000Z (2 months ago)
Last Synced: 2024-09-06T20:36:39.009Z (2 months ago)
Topics: astrojs, blog, netlify, ssg, static-site, tailwind, tailwindcss, typescript
Language: Astro
Homepage: https://goulven-clech.dev
Size: 96.7 MB
Stars: 6
Watchers: 1
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE.md

Awesome Lists containing this project

README

# 👋👋👋

My personnal blog, made with [Astro](https://docs.astro.build), [TypeScript](https://www.typescriptlang.org/) & [Tailwind CSS](https://tailwindcss.com/). Live at [goulven-clech.dev](https://goulven-clech.dev), hosted by [Vercel](https://vercel.com/).

The source code is provided under the [0BSD license](https://spdx.org/licenses/0BSD.html), attribution is appreciated but not required. The blog textual content is provided under the [CC BY 4.0 Deed](https://spdx.org/licenses/CC-BY-4.0.html), attribution is required. But for both, you are free to use, copy, modify, and/or distribute for any purpose, commercial or personal.

Some entries 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 entry ["Launching a blog with Astro"](https://goulven-clech.dev/2023/launching-blog-astro). But, little by little, I added some original features that might interest you, here are the main ones:

- [Search bar](https://github.com/goulvenclech/goulven-clech.dev/blob/master/src/components/Search.astro): made with Astro and Web Components only, filter blog entries based on user's input.

- [Table of contents](https://github.com/goulvenclech/goulven-clech.dev/blob/master/src/components/TableOfContent.astro): using Astro and MDX, generate a table of contents based on the headings. With nested lists.

- [Open Library](https://github.com/goulvenclech/goulven-clech.dev/blob/master/src/components/blocks/BookBlock.astro) & [Google Maps](https://github.com/goulvenclech/goulven-clech.dev/blob/master/src/components/blocks/MapsBlock.astro) blocks: nicely displays API results in blog entries.

- [Dark mode](https://github.com/goulvenclech/goulven-clech.dev/blob/master/src/components/icons/DarkMode.astro): toggle between light, dark, and system color schemes. Use local storage to persist the user's choice.

- [Custom image service](https://github.com/goulvenclech/goulven-clech.dev/blob/master/src/imageService.ts): retrieved from [Erika's blog](https://erika.florist/), 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

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