feat: update some shit

routes/articles/[name].tsx

@@ -1,15 +1,16 @@
 import { Handlers, PageProps } from "$fresh/server.ts";
 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 { YoutubePlayer } from "@components/Youtube.tsx";
 import { HashTags } from "@components/HashTags.tsx";
 import { isYoutubeLink } from "@lib/string.ts";
 import { renderMarkdown } from "@lib/documents.ts";
 import { RedirectSearchHandler } from "@islands/Search.tsx";
+import PageHero from "@components/PageHero.tsx";
+import { Star } from "@components/Stars.tsx";
 
-export const handler: Handlers<Article | null> = {
+export const handler: Handlers<{ article: Article; session: unknown }> = {
   async GET(_, ctx) {
     const article = await getArticle(ctx.params.name);
     return ctx.render({ article, session: ctx.state.session });
@@ -33,20 +34,33 @@ export default function Greet(
     >
       <RedirectSearchHandler />
       <KMenu type="main" context={{ type: "article" }} />
-      <RecipeHero
-        data={article}
-        subline={[
-          author && {
-            title: author,
-            href: `/?q=${encodeURIComponent(author)}`,
-          },
-          date.toString(),
-        ]}
-        editLink={session
-          ? `https://notes.max-richter.dev/Media/articles/${article.id}`
-          : ""}
-        backlink="/articles"
-      />
+
+      <PageHero image={article.meta.image} thumbnail={article.meta.thumbnail}>
+        <PageHero.Header>
+          <PageHero.BackLink href="/articles" />
+          {session && (
+            <PageHero.EditLink
+              href={`https://notes.max-richter.dev/Media/articles/${article.id}`}
+            />
+          )}
+        </PageHero.Header>
+        <PageHero.Footer>
+          <PageHero.Title link={article.meta.link}>
+            {article.name}
+          </PageHero.Title>
+          <PageHero.Subline
+            entries={[
+              author && {
+                title: author,
+                href: `/?q=${encodeURIComponent(author)}`,
+              },
+              date.toString(),
+            ]}
+          >
+            {article.meta.rating && <Star rating={article.meta.rating} />}
+          </PageHero.Subline>
+        </PageHero.Footer>
+      </PageHero>
       {article.tags.length > 0 && (
         <>
           <br />