feat: add support and update readme (#23)

Co-authored-by: David Dias <github@thedaviddias.dev>
thedaviddias · Mar 26, 2024 · 0da24c6 · 0da24c6
1 parent 8e6e1e4
commit 0da24c6
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 13 deletions.
diff --git a/.github/workflows/development.yml b/.github/workflows/development.yml
@@ -14,13 +14,13 @@ jobs:
       - name: Git checkout
         uses: actions/checkout@v3
 
-      - name: Use Node.js 18.x
+      - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version-file: '.nvmrc'
 
-      - name: 🧰 Install dependencies
+      - name: Install dependencies
         run: npm install
 
-      - name: 📦 Build app
+      - name: Build app
         run: npm run build
diff --git a/.github/workflows/lint-pr.yml b/.github/workflows/lint-pr.yml
@@ -1,4 +1,4 @@
-name: "Lint PR"
+name: Lint PR
 
 on:
   pull_request_target:

diff --git a/.github/workflows/podcast-update.yml b/.github/workflows/podcast-update.yml
@@ -0,0 +1,26 @@
+name: Podcast update
+
+on:
+  push:
+    branches: ["main"]
+  workflow_dispatch:
+  schedule:
+    # Runs every week at midnight on Sunday
+    - cron: '0 0 * * 0'
+
+permissions:
+  contents: write
+
+jobs:
+  update-readme:
+    name: Update this repo's README with latest podcast episodes
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Erreur 200
+        uses: gautamkrishnar/blog-post-workflow@master
+        with:
+          max_post_count: 5
+          comment_tag_name: PODCAST-LIST
+          feed_list: "https://erreur200.com/rss.xml"
diff --git a/README.md b/README.md
@@ -1,18 +1,37 @@
 # Erreur 200 (podcast)
 
-# Latests Podcast Episodes
+Erreur 200 est un podcast dédié aux gens qui font le web. Animé par deux développeurs français, l'un vivant au Canada ([David Dias](https://thedaviddias.com/)), l'autre en Angleterre ([Jean-Rémy Duboc](https://codaille.com/)), nous échangeons sur le web d'aujourd'hui et de demain.
+
+Retrouvez-nous pour discuter de code, d'accessibilité, des frameworks JavaScript, de l'UX et plein d'autres sujets passionnants. Nous laissons parfois la parole à d'autres personnes qui partagent la même passion et qui nous parlerons de leurs échecs et leurs succès.
+
+---
 
-<!-- BLOG-POST-LIST:START -->
+Error 200 is a podcast dedicated to people who make the web. Hosted by two French developers, one living in Canada ([David Dias](https://thedaviddias.com/)), the other in England ([Jean-Rémy Duboc](https://codaille.com/)), we discuss today's and tomorrow's web.
+
+Join us to talk about code, accessibility, JavaScript frameworks, UX, and many other exciting topics. Sometimes we let other people who share the same passion speak, and they will tell us about their failures and successes.
+
+# Latests Podcast Episodes
 
+<!-- PODCAST-LIST:START -->
 - [Questions de débutants en développement web avec Killian Vaillant](https://erreur200.com/questions-de-debutants-en-developpement-web-avec-killian-vaillant)
 - [Les Tendances du Développement Web en 2022](https://erreur200.com/les-tendances-du-developpement-web-en-2022)
 - [La Communication Dans Le Monde Du Web](https://erreur200.com/la-communication-dans-le-monde-du-web)
 - [Apprentissage et Veille Technologique au quotidien](https://erreur200.com/apprentissage-et-veille-technologique-au-quotidien)
 - [Comment devenir un développeur web en 2022 &lpar;2&rpar;](https://erreur200.com/devenir-developpeur-web-2022-2)
-<!-- BLOG-POST-LIST:END -->
+<!-- PODCAST-LIST:END -->
 
 ## Create a new episode
 
 ```bash
 npm run plop
 ```
+
+## Support or questions
+
+For support, feel free to email us at `info@erreur200.com` or join our [Discord server](https://discord.gg/WqGXnT6snJ).
+
+We also have a [Patreon](https://patreon.com/Erreur200?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink) if you want to support us.
+
+## License
+
+[MIT](https://choosealicense.com/licenses/mit/)
diff --git a/app/(main)/layout.tsx b/app/(main)/layout.tsx
@@ -15,6 +15,7 @@ import {
   LinkedInIcon,
   TwitterIcon,
   DiscordIcon,
+  CupIcon
 } from '@/components/Icons'
 import { HOSTS } from '@/constants'
 
@@ -67,6 +68,14 @@ const socialLinks: PodcastLink[] = [
   },
 ]
 
+const supportLinks: PodcastLink[] = [
+  {
+    label: 'Patreon',
+    Icon: CupIcon,
+    url: 'https://patreon.com/Erreur200?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink',
+  },
+]
+
 export default function MainLayout({ children }: { children: ReactNode }) {
   return (
     <AudioProvider>
@@ -89,7 +98,7 @@ export default function MainLayout({ children }: { children: ReactNode }) {
         <div className="relative mx-auto px-4 pb-4 pt-0 sm:px-6 md:max-w-2xl md:px-4 lg:min-h-full lg:flex-auto lg:px-8 lg:py-5 xl:px-10">
           <Link
             href="/"
-            className="relative mx-auto block w-48 p-5 sm:w-64 lg:w-auto"
+            className="relative mx-auto block w-48 p-5 sm:w-64"
             aria-label="Page d'accueil"
           >
             <Image
@@ -116,7 +125,7 @@ export default function MainLayout({ children }: { children: ReactNode }) {
             <div className="h-px bg-gradient-to-r from-slate-200/0 via-slate-200 to-slate-200/0 lg:hidden" />
             <ul
               role="list"
-              className="mt-4 flex justify-center gap-10 text-base font-medium leading-7 text-light-gray sm:gap-8 lg:flex-col lg:gap-4"
+              className="mt-4 flex justify-center gap-4 text-base font-medium leading-7 text-light-gray sm:gap-8 lg:flex-col lg:gap-3"
             >
               {podcastLinks.map(({ label, Icon, url }) => (
                 <li key={label} className="flex">
@@ -125,7 +134,7 @@ export default function MainLayout({ children }: { children: ReactNode }) {
                     className="group flex items-center"
                     aria-label={label}
                   >
-                    <Icon className="h-8 w-8 fill-slate-400 group-hover:fill-slate-600" />
+                    <Icon className="h-5 w-5 fill-slate-400 group-hover:fill-slate-600" />
                     <span className="hidden sm:ml-3 sm:block">{label}</span>
                   </Link>
                 </li>
@@ -138,7 +147,7 @@ export default function MainLayout({ children }: { children: ReactNode }) {
             </h2>
             <ul
               role="list"
-              className="mt-4 flex justify-center gap-10 text-base font-medium leading-7 text-light-gray sm:gap-8 lg:flex-col lg:gap-4"
+              className="mt-4 flex justify-center gap-4 text-base font-medium leading-7 text-light-gray sm:gap-8 lg:flex-col lg:gap-3"
             >
               {socialLinks.map(({ label, Icon, url }) => (
                 <li key={label} className="flex">
@@ -147,7 +156,29 @@ export default function MainLayout({ children }: { children: ReactNode }) {
                     className="group flex items-center"
                     aria-label={label}
                   >
-                    <Icon className="h-8 w-8 fill-slate-400 group-hover:fill-slate-600" />
+                    <Icon className="h-5 w-5 fill-slate-400 group-hover:fill-slate-600" />
+                    <span className="hidden sm:ml-3 sm:block">{label}</span>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </section>
+          <section className="mt-5 lg:mt-8">
+            <h2 className="sr-only flex items-center font-mono text-sm font-medium leading-7 text-white lg:not-sr-only">
+              <span>Nous soutenir</span>
+            </h2>
+            <ul
+              role="list"
+              className="mt-4 flex justify-center gap-4 text-base font-medium leading-7 text-light-gray sm:gap-8 lg:flex-col lg:gap-3"
+            >
+              {supportLinks.map(({ label, Icon, url }) => (
+                <li key={label} className="flex">
+                  <Link
+                    href={url}
+                    className="group flex items-center"
+                    aria-label={label}
+                  >
+                    <Icon className="h-5 w-5 fill-slate-400 group-hover:fill-slate-600" />
                     <span className="hidden sm:ml-3 sm:block">{label}</span>
                   </Link>
                 </li>

diff --git a/components/Icons.tsx b/components/Icons.tsx
@@ -116,3 +116,24 @@ export function DiscordIcon(props) {
     </svg>
   )
 }
+
+export function CupIcon(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="#2c3e50"
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+      <path d="M5 11h14v-3h-14z" />
+      <path d="M17.5 11l-1.5 10h-8l-1.5 -10" />
+      <path d="M6 8v-1a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v1" />
+      <path d="M15 5v-2" />
+    </svg>
+  )
+}