refactor(astro): migrate the whole blog to astro.build

.github/workflows/deployment.yml

@@ -6,21 +6,21 @@ on:
 
 jobs:
   build:
-    name: 'Build 📦 & Deploy 🚀'
+    name: 'Build 📦'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-ruby@v1
-        with:
-          ruby-version: '3'
-      - run: gem install bundler
-      - run: bundle install --jobs 4 --retry 3
-
+      - uses: actions/checkout@4
       - name: 'Build 📦'
-        run: bundle exec jekyll build
+        uses: withastro/action@v3
 
-      - uses: JamesIves/[email protected]
-        name: 'Deploy 🚀'
-        with:
-          folder: _site
-          clean: true
+  deploy:
+    name: 'Deploy 🚀'
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/integration.yml

@@ -10,10 +10,7 @@ jobs:
     name: 'Build 📦'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-ruby@v1
-        with:
-          ruby-version: '3'
-      - run: gem install bundler
-      - run: bundle install --jobs 4 --retry 3
-      - run: bundle exec jekyll build
+      - uses: actions/checkout@4
+      - name: 'Build 📦'
+        run: npm run build
+

.gitignore

@@ -1,10 +1,24 @@
-_site
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
 .DS_Store
-*.sublime-project
-*.sublime-workspace
-codekit-config.json
-node_modules
-vagrant/.vagrant/
-.jekyll-cache
-.jekyll-metadata
-.idea/*
+
+# jetbrains setting folder
+.idea/

CONTRIBUTING.md

@@ -1,180 +1,99 @@
 # Contributing
 
-## How to install the project?
+## Prerequisites
 
-### Using Visual Studio Code
+- [Node.js](https://nodejs.org/en/download/)
+- [pnpm](https://pnpm.io/installation)
 
-1. Install Docker or Podman on your machine
-2. Open the project in Visual Studio Code
-3. Install the recommended [Remote Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extension
-4. When VS code prompts you, agree to "Reopen in Container"
-5. The blog should be built, refreshed and opened in a preview tab automagically. ✨
-    - If not, you can run the "Jekyll Serve" VS Code task manually.
-
-### With Ruby and Gem
+## 🔧 How to install the project?
 
 ```shell
 git clone https://github.com/BedrockStreaming/tech.bedrockstreaming.com.git
 cd tech.bedrockstreaming.com
-sudo gem install jekyll bundler
-bundle install
+pnpm install
 ```
 
 Then run this command to run a dev server locally.
-```shell
-bundle exec jekyll serve
-```
-
-:warning: There are some issues to run this project on M1 archi for now.
-
-### With docker
-
-You can use docker to run the tech blog locally.
 
 ```shell
-docker build -t tech-blog .
-docker run -p 8080:8080 tech-blog 
+pnpm dev
 ```
 
-## How to add an article to the blog?
-
-All articles are listed in the `_posts` folder.
-Each article is a Markdown file named like this `YYYY-MM-DD-article-slug.md` where date is the date of publication.
-:information: If you put a future date of publication, your article won't be visible until this date is passed.
+## 📝 How to add an article to the blog?
+
+All articles are listed in the `src/content/posts/YYYY/MM/DD` folder structure where date is the date of publication.
 
 Make sure to complete the _frontmatter_ part of your Markdown file in order to define at least those attributes:
 
 ```markdown
 ---
-layout: post
+layout: ../../../../../layouts/post.astro
 title: Title of your article
 description: Description of your article visible in search page results
 author: author_of_your_article 
 tags: [example, of, tags]
-color: rgb(251,87,66) # this is Bedrock color here
 ---
 ```
 
-We are using a community theme for Jekyll for this blog, you may find some useful examples here:
-- [How to add Table of content for your blog post ?](https://sylhare.github.io/Type-on-Strap/2014/11/28/markdown-and-html.html)
-- [How to customize the color used on a post page ?](https://sylhare.github.io/Type-on-Strap/2019/05/18/color-post.html)
-- [How to use images in your post ?](https://sylhare.github.io/Type-on-Strap/2018/10/29/feature-images.html)
-  You can store your images in _images/post_ folder of this repository.  
-  Don't forget to compress them for performances with tools like [TinyPNG](https://tinypng.com/)
-- [How to add code examples ?](https://sylhare.github.io/Type-on-Strap/2014/08/08/Markup-Syntax-Highlighting.html)
-- [How to add simple Diagrams with _Mermaids_?](https://sylhare.github.io/Type-on-Strap/2019/11/02/Tech-stuff-example.html#mermaid)
-  Mermaid is a really powerful tool to generate Diagram dynamically with some text.
-  Check [Mermaid documentation](https://mermaid-js.github.io/mermaid/#/).
+The _frontmatter_ is configured through a [Zod](https://zod.dev/) schema in `src/content/config.ts`.
 
 In order to add a new article, you should open a Pull Request on this repository.
 A preview will automatically be deployed on AWS thanks to AWS Amplify service.
 
 Don't hesitate to share your new post of **#proj-blog-tech-bedrock** slack room to ask for reviews from Bedrockers.
 When you have 2 approves and no change requested, you can merge your Pull Request.
 
-## Add an author
+## ✍️ Add an author
 
-Edit `_data/authors.yml` to add an author (authors are sorted alphabetically).
+Add a `<author_id>.json` file in `src/content/authors` folder. You can check the `src/content/authors/bedrock.json` file
+as an example. You can add the avatar image in the same folder for it to be referenced like `./<images>.jpg` in the author json file.
 
-Authors could have a `name`, a `url` and an `avatar` (which could be a distant file or an image hosted in the `images/avatar` directory).
+Authors could have a `name`, a `url` and an `avatar` (which could be a distant file or an image hosted in the directory).
 
 Then you will be able to use the author ID in the frontmatter post configuration key named `author`.
 
-## Add a LFT replay
-
-1. Create a file in the `__post` folder name matching this format `YYYY-MM-DD-slug-of-your-article.md`
-    Use the date the talk was first given in public.
-2. Add the configuration of metadata at the beginning of this file
-    > :warning: **To make your videos appear in either `Last Friday Talks`page, tag your post with `lft`.**
-    ```markdown
-    ---
-    layout: video
-    # Unique ID of the Youtube video clip
-    youtubeId: $$$$$$$ 
-    # Title of the article
-    title: Title of your article
-    # Description (for SEO and context purpose)
-    description: Description of your article visible in search page results
-    # Authors of the article (can also be a list of authors such as: [first_author, second_author, third_author])
-    # The complete list of valid author IDs is in `_data/authors.yml`
-    author: author_of_your_article
-    # Use tags for grouping content in the blog
-    # Add `lft` to group with other LFT talks
-    tags: [lft, and, other, tags]
-    # Bedrock color
-    color: rgb(251,87,66) 
-    ---
-    ```
-3. Add content to the markdown file in order to add context to the video you are sharing.
-
-
-## Add a conference
-
-There are two ways to publish a conference where you were a speaker.
-Please note that creating a post is more likely to help our external communication.
-
-### Publish information about the conference
-
-If you just want to add a conference presentation to the listed ones, you can add your presentation in `_data/conferences.yaml`.
-
-List of the metadata allowed to add a new conference:
+ℹ️ the site will keep you from building if you use an author ID that does not exist.
+
+## ↩️ Add a LFT replay
 
+Similar to adding an article, you can add a Last Friday Talk replay to the blog by adding a markdown file in the `src/content/lfts/YYYY/MM/DD` folder structure.
+The most different parts are: 
+- that you should use the `lft.astro` layout instead of the `post.astro` layout.
+- you should add a `youtubeId` key in the frontmatter to embed the video in the page and get the thumbnail.
+
+Here is an example of an LFT frontmatter
+```markdown
+---
+layout: ../../../../../layouts/video.astro
+title: "Le LFT du LFT - PUB LFT #LFT 02/02/24"
+description: ""
+author: team_lft
+tags: [lft, tech]
+color: rgb(251,87,66)
+youtubeId: UgOFZmOJOmo
+```
+
+## 🎤 Add a conference
+
+Similar to adding an article, you can add a conference to the blog by adding a markdown file in the `src/content/conferences/YYYY/MM/DD` folder structure.
+Here is an example of a conference frontmatter
 ```markdown
-- title: "Title of the conference"
-  # Conference date
-  date: 1970-01-01
-  # from _data/authors.yaml
-  author: conference_speaker 
-  # Public event name
-  eventName: ******
-  # Url to redirect to the event site (optional)
-  eventUrl: ******
-  # Youtube video id (optional)
-  youtubeId: ******
-  # Slideshare presentation key (from iframe integration) (optional)
-  slideshareKey: ******
-  # Bedrock sponsored the event? (default: false)
-  sponsored: true
-  # Bedrock hosted the event? (default: false)
-  hosted: true
+---
+title: "Projet XState"
+author: m_blanc
+description: "La gestion d'état applicative est une notion complexe et fondamentale (donc passionnante) des applications web modernes. Pour garder le contrôle de votre application, venez découvrir XState, un moteur d'états reposant sur le concept de machines à états finis."
+
+eventName: LyonJS Meetup
+eventUrl: https://www.meetup.com/fr-FR/lyonjs/events/290762638/
+youtubeId: HWRQp2Y1rbw
+sponsored: true
+hosted: true
+
+tags: [xstate, lyonjs, meetup, react, javascript, conference]
+comments: true
+color: rgb(251,87,66)
+language: fr
+---
 ```
 
-That's all folks! Your conference will be displayed in "Meetups & Conferences" page. 
-If there is a `youtubeId` key, the video will also be added to the "Replay" section.
-
-
-### Create a post to present the conference
-
-1. Create a file in `__post` folder name matching this format `YYYY-MM-DD-slug-of-your-article.md`
-    Use the date the talk was first given in public.
-2. Add the configuration of metadata at the beginning of this file:
-    ```markdown
-    ---
-    layout: conference
-
-    # Title of the conference
-    title: Title of your conference
-    # Description of the page (for SEO and context purpose)
-    description: Description of your article visible in search page results
-    # from _data/authors.yaml
-    author: conference_speaker
-    # Public event name
-    eventName: ******
-    # Url to redirect to the event site (optional)
-    eventUrl: ******
-    # Youtube video id (optional)
-    youtubeId: ******
-    # Slideshare presentation key (from iframe integration) (optional)
-    slideshareKey: ******
-    # Bedrock sponsored the event? (default: false)
-    sponsored: true
-    # Bedrock hosted the event? (default: false)
-    hosted: true
-
-    # Use tags for grouping content in the blog.
-    tags: [example, of, tags]
-    # this is Bedrock color here
-    color: rgb(251,87,66)
-    ---
-    ```
-3. Add content to the markdown file in order to add context to the presentation you are sharing.
+Your conference will be displayed in "Meetups & Conferences" page.