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>
   );
 }