feat: better layout in a lot of places

routes/articles/[name].tsx

@@ -3,6 +3,8 @@ import { MainLayout } from "@components/layouts/main.tsx";
 import { Article, getArticle } from "@lib/resource/articles.ts";
 import { RecipeHero } from "@components/RecipeHero.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
+import { isYoutubeLink, YoutubePlayer } from "@components/Youtube.tsx";
+import { HashTags } from "@components/HashTags.tsx";
 
 export const handler: Handlers<Article | null> = {
   async GET(_, ctx) {
@@ -23,27 +25,26 @@ export default function Greet(props: PageProps<Article>) {
       <RecipeHero
         data={article}
         subline={[author, date.toString()]}
+        editLink={`https://notes.max-richter.dev/Media/articles/${article.id}`}
         backlink="/articles"
       />
       <KMenu type="main" context={article} />
-      {article.tags.length &&
-        (
-          <div class="flex gap-2 px-8">
-            {article.tags.map((t) => {
-              return (
-                <span class="bg-gray-700 text-white p-2 rounded-xl text-sm">
-                  #{t}
-                </span>
-              );
-            })}
-          </div>
-        )}
+      {article.tags.length > 0 && (
+        <>
+          <br />
+          <HashTags tags={article.tags} />
+        </>
+      )}
+
       <div class="px-8 text-white mt-10">
+        {isYoutubeLink(article.meta.link) && (
+          <YoutubePlayer link={article.meta.link} />
+        )}
         <pre
           class="whitespace-break-spaces"
           dangerouslySetInnerHTML={{ __html: article.content || "" }}
         >
-          {article.content}
+          {article.content||""}
         </pre>
       </div>
     </MainLayout>

routes/articles/index.tsx

@@ -4,6 +4,7 @@ import IconArrowLeft from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/arrow-
 import { Article, getAllArticles } from "@lib/resource/articles.ts";
 import { Card } from "@components/Card.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
+import { Grid } from "@components/Grid.tsx";
 
 export const handler: Handlers<Article[] | null> = {
   async GET(_, ctx) {
@@ -28,11 +29,11 @@ export default function Greet(props: PageProps<Article[] | null>) {
       </header>
 
       <KMenu type="main" context={false} />
-      <div class="flex flex-wrap items-center gap-4 px-4">
+      <Grid>
         {props.data?.map((doc) => {
           return <Card link={`/articles/${doc.id}`} title={doc.name} />;
         })}
-      </div>
+      </Grid>
     </MainLayout>
   );
 }

routes/index.tsx

@@ -2,6 +2,7 @@ import { Head } from "$fresh/runtime.ts";
 import { MainLayout } from "@components/layouts/main.tsx";
 import { Card } from "@components/Card.tsx";
 import { PageProps } from "$fresh/server.ts";
+import { menu } from "@lib/menus.ts";
 
 export default function Home(props: PageProps) {
   return (
@@ -10,17 +11,16 @@ export default function Home(props: PageProps) {
         <title>app</title>
       </Head>
       <MainLayout url={props.url}>
-        <div class="flex flex-wrap justify-center items-center gap-4 px-4">
-          <Card
-            title="🍽️ Recipes"
-            image="/placeholder.svg"
-            link="/recipes"
-          />
-          <Card
-            title="🍿 Movies"
-            image="/placeholder.svg"
-            link="/movies"
-          />
+        <div class="flex flex-wrap items-center gap-4 px-4">
+          {menu.map((m) => {
+            return (
+              <Card
+                title={m.name}
+                image="/placeholder.svg"
+                link={m.link}
+              />
+            );
+          })}
         </div>
       </MainLayout>
     </>

routes/movies/[name].tsx

@@ -3,6 +3,7 @@ import { MainLayout } from "@components/layouts/main.tsx";
 import { getMovie, Movie } from "@lib/resource/movies.ts";
 import { RecipeHero } from "@components/RecipeHero.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
+import { HashTags } from "@components/HashTags.tsx";
 
 export const handler: Handlers<Movie | null> = {
   async GET(_, ctx) {
@@ -24,6 +25,12 @@ export default function Greet(props: PageProps<Movie>) {
         backlink="/movies"
       />
       <KMenu type="main" context={movie} />
+      {movie.tags.length > 0 && (
+        <>
+          <br />
+          <HashTags tags={movie.tags} />
+        </>
+      )}
       <div class="px-8 text-white mt-10">
         <pre
           class="whitespace-break-spaces"

routes/movies/index.tsx

@@ -3,6 +3,7 @@ import { MainLayout } from "@components/layouts/main.tsx";
 import IconArrowLeft from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/arrow-left.tsx";
 import { getAllMovies, Movie } from "@lib/resource/movies.ts";
 import { MovieCard } from "@components/MovieCard.tsx";
+import { Grid } from "@components/Grid.tsx";
 
 export const handler: Handlers<Movie[] | null> = {
   async GET(_, ctx) {
@@ -25,11 +26,11 @@ export default function Greet(props: PageProps<Movie[] | null>) {
 
         <h3 class="text-2xl text-white font-light">🍿 Movies</h3>
       </header>
-      <div class="flex flex-wrap items-center gap-4 px-4">
+      <Grid>
         {props.data?.map((doc) => {
           return <MovieCard movie={doc} />;
         })}
-      </div>
+      </Grid>
     </MainLayout>
   );
 }

routes/recipes/index.tsx

@@ -3,6 +3,7 @@ import { RecipeCard } from "@components/RecipeCard.tsx";
 import { MainLayout } from "@components/layouts/main.tsx";
 import { getAllRecipes, Recipe } from "@lib/resource/recipes.ts";
 import IconArrowLeft from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/arrow-left.tsx";
+import { Grid } from "@components/Grid.tsx";
 
 export const handler: Handlers<Recipe[] | null> = {
   async GET(_, ctx) {
@@ -25,11 +26,11 @@ export default function Greet(props: PageProps<Recipe[] | null>) {
 
         <h3 class="text-2xl text-white font-light">🍽️ Recipes</h3>
       </header>
-      <div class="flex flex-wrap items-center gap-4 px-4">
+      <Grid>
         {props.data?.map((doc) => {
           return <RecipeCard recipe={doc} />;
         })}
-      </div>
+      </Grid>
     </MainLayout>
   );
 }