+# GeeksBlabla Website
-Geeksblabla is a webinar where we meet to share and learn about awesome topics from the best.
+> This website is built with [Astro](https://astro.build/)
-We Invite knowledgable and interesting people who are not always known to the public so that they can share their experiences.
+## Getting Started
-We talk about the hottest new topics and explain it to the community in a way that is simple and approachable.
+1. Fork and clone the repository
-The website is built using [Gatsbyjs](http://gatsbyjs.org)
-
-## ๐ Quick start
-
-1. **Fork and clone the project**
-
- ```sh
- git clone git@github.com:your-username/geeksblabla.com.git
- ```
+```bash
+git clone https://github.com/your-username/geeksblabla.com.git
+```
-1. **Start developing.**
+2. Install dependencies
- Navigate into your new siteโs directory and start it up.
+```bash
+pnpm install
+```
- ```sh
- cd geeksblabla.com/
- npm install
- gatsby develop
- ```
+3. Start the development server
-1. **Open the source code and start editing!**
+```bash
+pnpm run dev
+```
- Your site is now running at `http://localhost:8000`
+To simplify project management, we added mock data to ensure the website functions in development mode without requiring any external API keys. However, if you want to work with real data for the gallery, episode planning, or adding new episodes through the website, you will need the following API keys:
- _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._
+```sh
+NOTION_API_KEY=
+GEEKSBLABLA_NOTION_DATABASE_ID=
+YOUTUBE_API_KEY=
+CLOUDINARY_API_SECRET=
+PUBLIC_CLOUDINARY_API_KEY=
+PUBLIC_CLOUDINARY_CLOUD_NAME=
+```
-## ๐ง Want to contribute ?
+## ๐ Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+โโโ public/
+โโโ articles/
+โโโ authors/
+โโโ episodes/
+โโโ src/
+โ โโโ actions/ # astro actions, Api for to connect with notion
+โ โโโ assets/ # images, videos, etc.
+โ โโโ components/ # reusable components
+โ โโโ content/ # content for the blog config, articles, authors, episodes
+โ โโโ lib/ # utils functions
+โ โโโ pages/
+โโโ astro.config.mjs
+โโโ README.md
+โโโ package.json
+โโโ tsconfig.json
+```
-If you want to contribute check out the [help wanted](https://github.com/devC-Casa/geeksblabla.com/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22+sort%3Aupdated-desc) issues for things that need fixing, or suggest some new features by opening new issues.
+## ๐ง Commands
-## Add New Episode ?
+All commands are run from the root of the project, from a terminal:
-1. **Follow the Quick start ๐**
-2. **Create a new episode folder**
+| Command | Action |
+| :------------------------- | :----------------------------------------------- |
+| `pnpm install` | Installs dependencies |
+| `pnpm run dev` | Starts local dev server at `localhost:4321` |
+| `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 lint` | Run lint |
+| `pnpm run check` | Run check |
+| `pnpm run check-all` | Run lint, check and build |
+| `pnpm run astro -- --help` | Get help using the Astro CLI |
- - Duplicate an existing episode folder and rename it with the correct episode number `epX`
+## Add a new Episode
- - open `index.md` and Make sure to update the following info :
+Adding a new episode is as simple as adding a new markdown file to the episodes folder with the following format:
- - Episode date, time, duration
- - Episode Title : Facebook live stream episode title.
- - Tags : At least 1. You should stick to the following approach:
- - For abbrevations: all lowercase i.e: "dev"
- - For acronyms: all uppercase i.e: "MSS", "UX", "UI", "JS".
- - For single and composite words: all lowercase i.e: "software engineering", "mobile dev", "career".
- - category: one of the following: "MSS", "AMA", "career", "dev".
- - isNext : always `false`. `true` means the episode is the next one and should appear on the footer.
- - video : Facebook video id
- - featured : default `false`, `true` will show the episode in the TOP EPISODE home page Section
+> โ ๏ธ `category` attribute should be one of the following: `dev`, `mss`, `ai`, `career`,`ama`
-```
-date: 2019-03-28
-time: 20h
-duration: "01:09:00"
-title: "Open Source with Yassine Elouafi"
-tags: ["open source", "dev"]
-category: "dev"
-isNext: false
-video: "2254365704624093"
-youtube: https://www.youtube.com/watch?v=kzYammaow-M
+```md
+---
+date: 2020-02-16
+duration: "01:40:00"
+title: "Side Projects & Indie Hacking"
+tags: ["dev", "indie", "career"]
+category: "career"
+youtube: https://www.youtube.com/watch?v=bDrUAza36ec
published: true
-featured: false
-audio:
+---
-```
+Episode description
-3 . **Add Episode Notes && Links**
+## Guests
-Episode Notes should contain three sections:
+[Guest 1](https://example.com)
-#### Description :
+[Guest 2](https://example.com)
-A simple description of the episode like the following:
+## Notes
-```
-In this episode of GeeksBlabla, Geeksblabla team (and guest name in case ) talk about the Web fundamental, new js Frameworks and some best practices you need to follow as a web developer.
-```
+00:00:00 - Introduction: Welcoming, guests intro.
-### Guests
+00:05:00 - Topic 1
-```
-- [guest name 1](https://example.com)
-- [guest name 1](https://example2.com)
-- ....
-```
+00:16:00 - Topic 2
-#### Notes :
+00:24:00 - Topic 3
-In the Notes section, you need to collect the most important part of the episode and try to find the right title for it using this format : `h:min - title`
+00:32:00 - Topic 4
-```
-0:00:00 - Intro
+## Links
-0:03:00 - The history of web and W3C?
+[Link 1](https://www.example.com)
- ...
+[Link 2](https://www.example.com)
-1:57:00 - when you can find trending web technologies?
+## Prepared and Presented by
+[Host 1](https://example.com)
```
-> make sure to add a line break between titles
+## Add a new Article
-#### Links :
+To add a new article, follow these steps:
-```
-- [W3C](https://www.w3.org/)
-- [Reactjs](https://reactjs.org)
--....
-```
+1. If this is your first time, you will need to create your author json file in the `authors/` directory.
-#### Prepared and Presented by
-
-```
-- [name](https://example1.com)
-- [name 2](https://example2.com)
+```json
+// authors/author-name.json
+{
+ "name": "Author Name",
+ "url": "https://example.dev",
+ "bio": "Guest bio",
+ "avatar": "/avatars/avatar.jpg",
+ "is_core_team": false
+}
```
-In the end, the episode markdown file should look like : ๐
+2. Create a new markdown file in the `articles/` directory.
+3. Use the following format:
-```
+```md
---
-date: 2019-03-21
-time: 20h
-duration: "1:09"
-title: "Introduction to Open Source"
-tags: ["open source", "dev"]
-category: "dev"
-isNext: false
-youtube: https://www.youtube.com/watch?v=kzYammaow-M
-published: true
-video: "2244351238958873"
-url:
-audio:
+title: "Article Title"
+tags: ["tag1", "tag2", "tag3"]
+keywords: ["keyword1", "keyword2", "keyword3"]
+pubDatetime: 2024-12-01
+authors: ["author-name"] # the name of the author file
+slug: article-slug
+description: "Article description"
+ogImage: "/og-image.jpg"
---
-In this episode of GeeksBlabla, Geeksblabla team (and guest name in case ) talk about the Web fundamental, new js Frameworks and some best practices you need to follow as a web developer.
-
-## Guests
-- [guest name 1](https://example.com)
-- [guest name 1](https://example2.com)
-
-## Notes
-h:min - title
-0:00:00 - Intro
-
-0:03:00 - The history of web and W3C?
-
- ...
-
-1:57:00 - when you can find trending web technologies?
-
-## Links
-
-- [W3C](https://www.w3.org/)
-- [Reactjs](https://reactjs.org)
--....
-
-## Prepared and Presented by
-- [name](https://example1.com)
-- [name 2](https://example2.com)
-
-
+Article content
```
-4.**Open the source code and start editing!**
-
-Navigate to `http://localhost:8000/blablas` and Make sure the episode page works as expected
-
## Licensing
The code in this project is licensed under MIT license.
-## Contributors โจ
-
-Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
-
-
-
-
-