feat: add revisions to detail page

src/pages/[quadrant]/[id].module.css

@@ -0,0 +1,22 @@
+.layout {
+}
+
+.sidebar {
+}
+
+.content {
+  margin-bottom: 60px;
+}
+
+@media (min-width: 1024px) {
+  .layout {
+    display: flex;
+  }
+  .sidebar {
+    width: 360px;
+    padding: 110px 0 0 60px;
+  }
+  .content {
+    flex: 1;
+  }
+}

src/pages/[quadrant]/[id].tsx

@@ -2,7 +2,10 @@ import Head from "next/head";
 import { useRouter } from "next/router";
 import { useMemo } from "react";
 
+import styles from "./[id].module.css";
+
 import { RingBadge } from "@/components/Badge/Badge";
+import { ItemDetail } from "@/components/ItemDetail/ItemDetail";
 import { ItemList } from "@/components/ItemList/ItemList";
 import {
   getItem,
@@ -33,10 +36,15 @@ const ItemPage: CustomPage = () => {
         <meta name="description" content={quadrant.description} />
       </Head>
 
-      <h1>{item.title}</h1>
-      <RingBadge ring={item.ring} size="large" />
-      <div dangerouslySetInnerHTML={{ __html: item.body }}></div>
-      <ItemList items={relatedItems} activeId={item.id} />
+      <div className={styles.layout}>
+        <section className={styles.content}>
+          <ItemDetail item={item} />
+        </section>
+        <aside className={styles.sidebar}>
+          <h3>{quadrant.title}</h3>
+          <ItemList items={relatedItems} activeId={item.id} />
+        </aside>
+      </div>
     </>
   );
 };

src/pages/_app.tsx

@@ -6,6 +6,7 @@ import { Layout, type LayoutClass } from "@/components/Layout/Layout";
 import { formatTitle } from "@/lib/format";
 import { assetUrl } from "@/lib/utils";
 import "@/styles/globals.css";
+import "@/styles/hljs.css";
 
 export type CustomPage<P = {}, IP = P> = NextPage<P, IP> & {
   layoutClass?: LayoutClass;