chore: remove src folder and fix contrast (#17)

src/app/(main)/[slug]/page.tsx → app/(main)/[slug]/page.tsx

@@ -64,7 +64,7 @@ export default async function Episode({
               </h1>
               <FormattedDate
                 date={date}
-                className="order-first font-mono text-sm leading-7 text-slate-500"
+                className="order-first font-mono text-sm leading-7 text-accent-gray"
               />
             </div>
           </div>

src/app/(main)/layout.tsx → app/(main)/layout.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link'
 import { AboutSection } from '@/components/AboutSection'
 import { AudioProvider } from '@/components/AudioProvider'
 import { AudioPlayer } from '@/components/player/AudioPlayer'
-import posterImage from '@/images/logo-erreur-200-home.png'
+import posterImage from '@/public/images/logo-erreur-200-home.png'
 import {
   ApplePodcastIcon,
   OvercastIcon,
@@ -51,7 +51,7 @@ export default function MainLayout({ children }: { children: ReactNode }) {
     <AudioProvider>
       <header className="bg-primary-dark lg:fixed lg:inset-y-0 lg:left-0 lg:flex lg:w-112 lg:items-start lg:overflow-y-auto xl:w-120">
         <div className="hidden lg:sticky lg:top-0 lg:flex lg:w-16 lg:flex-none lg:items-center lg:whitespace-nowrap lg:py-12 lg:text-sm lg:leading-7 lg:[writing-mode:vertical-rl]">
-          <span className="font-mono text-slate-500">Animé par</span>
+          <span className="font-mono text-accent-gray">Animé par</span>
           <span className="mt-6 flex gap-6 font-bold text-white">
             {HOSTS.map((host, hostIndex) => (
               <Fragment key={host}>

src/app/(main)/page.tsx → app/(main)/page.tsx

@@ -29,7 +29,7 @@ async function EpisodeEntry({ episode }: EpisodeEntryProps) {
           </h2>
           <FormattedDate
             date={date}
-            className="order-first font-mono text-sm leading-7 text-slate-500"
+            className="order-first font-mono text-sm leading-7 text-accent-gray"
           />
           <p className="mt-1 text-base leading-7 text-light-gray">
             {episode.description}
@@ -83,7 +83,7 @@ export default async function Home() {
           Épisodes du podcast
         </h1>
       </Container>
-      <div className="divide-y border-border-dark sm:mt-4 lg:mt-8 lg:border-t lg:border-border-dark">
+      <div className="divide-y divide-border-dark border-border-dark sm:mt-4 lg:mt-8 lg:border-t lg:border-border-dark">
         {episodes?.map((episode) => (
           <EpisodeEntry key={episode.slug} episode={episode} />
         ))}

src/app/layout.tsx → app/layout.tsx

@@ -68,7 +68,7 @@ export default async function RootLayout({
       </head>
       <link
         rel="icon"
-        href="../images/icons/favicon-32x32.png"
+        href="../public/images/icons/favicon-32x32.png"
         type="image/png"
         sizes="32x32"
       />

src/app/not-found.tsx → app/not-found.tsx

@@ -4,7 +4,7 @@ export default function NotFound() {
   return (
     <main className="relative flex h-full items-center py-36 lg:px-8">
       <div className="relative mx-auto flex w-full max-w-2xl flex-col items-center px-4 sm:px-6 lg:px-0">
-        <p className="font-mono text-sm leading-7 text-slate-500">404</p>
+        <p className="font-mono text-sm leading-7 text-accent-gray">404</p>
         <h1 className="mt-4 text-lg font-bold text-white">Page not found</h1>
         <p className="mt-2 text-base leading-7 text-light-gray">
           Sorry, we couldn’t find the page you’re looking for.

src/components/AboutSection.tsx → components/AboutSection.tsx

@@ -2,8 +2,8 @@
 
 import clsx from 'clsx'
 import { useState } from 'react'
-import david from '@/images/david-dias.png'
-import jr from '@/images/jean-remy-duboc.jpg'
+import david from '@/public/images/david-dias.png'
+import jr from '@/public/images/jean-remy-duboc.jpg'
 import Image from 'next/image'
 
 export function AboutSection(props) {

src/components/player/PlaybackRateButton.tsx → components/player/PlaybackRateButton.tsx

@@ -93,7 +93,7 @@ export function PlaybackRateButton({ player }) {
   return (
     <button
       type="button"
-      className="relative flex h-6 w-6 items-center justify-center rounded-md text-slate-500 hover:bg-slate-100 hover:text-light-gray focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2"
+      className="relative flex h-6 w-6 items-center justify-center rounded-md text-accent-gray hover:bg-slate-100 hover:text-light-gray focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2"
       onClick={() => {
         setPlaybackRate((rate) => {
           let existingIdx = playbackRates.indexOf(rate)

src/components/player/Slider.tsx → components/player/Slider.tsx

@@ -138,7 +138,7 @@ export function Slider(props) {
             state.getThumbMaxValue(0) === 0 && 'opacity-0',
             isFocusVisible || state.isThumbDragging(0)
               ? 'bg-slate-100 text-white'
-              : 'text-slate-500'
+              : 'text-accent-gray'
           )}
         >
           {formatTime(currentTime, totalTime)}
@@ -148,7 +148,7 @@ export function Slider(props) {
         </span>
         <span
           className={clsx(
-            'hidden rounded-md px-1 py-0.5 font-mono text-sm leading-6 text-slate-500 md:block',
+            'hidden rounded-md px-1 py-0.5 font-mono text-sm leading-6 text-accent-gray md:block',
             state.getThumbMaxValue(0) === 0 && 'opacity-0'
           )}
         >

config/plop/plopfile.js

@@ -1,14 +1,8 @@
 // eslint-disable
-const componentPlop = require('./component.plopfile')
-const hookPlop = require('./hook.plopfile')
-const contextPlop = require('./context.plopfile')
 const testPlop = require('./test.plopfile')
 const episodePlop = require('./episode.plopfile')
 
 const plopFile = plop => {
-  componentPlop(plop),
-  hookPlop(plop),
-  contextPlop(plop),
   testPlop(plop),
   episodePlop(plop)
 }

tailwind.config.js

@@ -2,7 +2,10 @@ const defaultTheme = require('tailwindcss/defaultTheme')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./src/**/*.{ts,tsx}'],
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}"
+  ],
   theme: {
     extend: {
       fontFamily: {
@@ -26,8 +29,8 @@ module.exports = {
       colors: {
         'primary-dark': '#1a2940',
         'secondary-dark': '#0f172a',
-        'accent-red': '#e63946',
-        'accent-gray': '#374151',
+        'accent-red': '#ff6b6b',
+        'accent-gray': '#a3a3a3',
         'light-gray': '#d1d5db',
         'border-dark': '#2d3748',
         'white': '#ffffff'

tsconfig.json

@@ -22,9 +22,6 @@
     "baseUrl": ".",
     "paths": {
       "@/*": [
-        "src/*"
-      ],
-      "~/*": [
         "./*"
       ],
       "contentlayer/generated": ["./.contentlayer/generated"]

vercel.json

@@ -1,40 +1,3 @@
 {
-  "headers": [
-    {
-      "source": "/fonts/oswald.woff2",
-      "headers": [
-        {
-          "key": "Cache-Control",
-          "value": "public, max-age=31536000, immutable"
-        }
-      ]
-    },
-    {
-      "source": "/fonts/SourceSansPro-Light.woff2",
-      "headers": [
-        {
-          "key": "Cache-Control",
-          "value": "public, max-age=31536000, immutable"
-        }
-      ]
-    },
-    {
-      "source": "/fonts/SourceSansPro-Regular.woff2",
-      "headers": [
-        {
-          "key": "Cache-Control",
-          "value": "public, max-age=31536000, immutable"
-        }
-      ]
-    },
-    {
-      "source": "/fonts/SourceSansPro-Bold.woff2",
-      "headers": [
-        {
-          "key": "Cache-Control",
-          "value": "public, max-age=31536000, immutable"
-        }
-      ]
-    }
-  ]
+  "headers": []
 }