docs: add demo (#106)

* docs: add example demo

* feat: update middleware

* feat: add demo images

* feat: add demo

* Update README.md

README.md

@@ -1,6 +1,6 @@
 <div align="center">
   <p>
-    <img src="./public/logo.png" width="72">
+    <img src="./public/images/logo.png" width="72">
   </p>
 
   <h1>beecast</h1>
@@ -10,14 +10,14 @@
   </p>
 
   <p>
-    <a href="https://conventionalcommits.org" target="_blank"><img src="https://img.shields.io/badge/Conventional%20Commits-1.0.0-%23FE5196" ></a>
+    <a href="https://conventionalcommits.org" target="_blank"><img src="https://img.shields.io/badge/Conventional%20Commits-1.0.0-%23FE5196"></a>
     <img src="https://img.shields.io/github/license/experiment-station/beecast">
   </p>
 </div>
 
 <br />
 
----
+https://github.com/experiment-station/beecast/assets/9790196/5ef99e74-6ec5-40cc-b495-f39c170945bd
 
 <br />
 

app/shows/[id]/page.tsx

@@ -53,7 +53,7 @@ export default async function Page(props: { params: { id: ShowId } }) {
           <AspectRatio ratio={1}>
             <Avatar
               alt={data.title}
-              fallback="/images/placeholder.png"
+              fallback="/images/logo.png"
               radius="small"
               src={data.images?.[0]}
               style={{

components/episode-detail.tsx

@@ -50,7 +50,7 @@ function EpisodeDetailContent(
         }}
       >
         <Avatar
-          fallback="/images/placeholder.png"
+          fallback="/images/logo.png"
           radius="small"
           size={{
             initial: '6',

components/show-card.tsx

@@ -48,7 +48,7 @@ function ShowCardImage(props: Pick<ShowCardProps, 'images' | 'title'>) {
             <Avatar
               alt={`Cover for ${props.title}`}
               className={styles.Image}
-              fallback="/images/placeholder.png"
+              fallback="/images/logo.png"
               src={props.images?.[0]}
             />
           </AspectRatio>

middleware.ts

@@ -40,6 +40,6 @@ export async function middleware(request: NextRequest) {
 
 export const config = {
   matcher: [
-    '/((?!_next/static|_next/image|favicon.ico|logo.png|logo.svg|twitter-image.png|opengraph-image.png).*)',
+    '/((?!_next/static|_next/image|images|videos|favicon.ico|logo.png|logo.svg|twitter-image.png|opengraph-image.png).*)',
   ],
 };