Style for docs

Author: alexbaumgertner

src/app/(sections)/news/[slug]/layout.tsx

@@ -0,0 +1,30 @@
+import Link from 'next/link'
+import { readDocuments } from '@/db/api/documents'
+import classes from './page.module.css'
+
+const NewsLayout = async ({ children }: { children: React.ReactNode }) => {
+  const documents = await readDocuments()
+
+  return (
+    <div className={classes.layout}>
+      <div className={classes.container}>{children}</div>
+      <div className={classes.sidebar}>
+        <ul className={classes.list}>
+          {documents.map((document) => (
+            <li key={document.id} className={classes.item}>
+              <Link
+                title={document.title}
+                className={classes.link}
+                href={`/news/${document.id}`}
+              >
+                {`${document.title.slice(0, 80)}...`}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+export default NewsLayout

src/app/(sections)/news/[slug]/page.module.css

@@ -0,0 +1,33 @@
+.layout {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+.container {
+  flex: 1;
+}
+
+.sidebar {
+  flex: 0 0 200px;
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.item {
+  margin-bottom: 1rem;
+}
+
+.link {
+  text-decoration: none;
+}
+
+.link:hover {
+  text-decoration: underline;
+}

src/app/(sections)/news/[slug]/page.tsx

@@ -1,12 +1,26 @@
 import { readDocumentWithBlocks } from '@/db/api/documents'
 import { Document } from '@/components'
+import { Metadata } from 'next'
+
+export const generateMetadata = async ({
+  params,
+}: {
+  params: Promise<{ slug: string }>
+}): Promise<Metadata> => {
+  const { slug } = await params
+  const document = await readDocumentWithBlocks(slug)
+  return {
+    title: document.title,
+    description: document.description,
+  }
+}
 
 const NewsPage = async ({ params }: { params: Promise<{ slug: string }> }) => {
   const { slug } = await params
   const document = await readDocumentWithBlocks(slug)
 
   return (
-    <article style={{ flexGrow: 1 }}>
+    <article className="NewsPage" style={{ flexGrow: 1 }}>
       <Document document={document} />
     </article>
   )

src/app/(sections)/news/page.module.css

@@ -0,0 +1,29 @@
+.component {
+  font-family: sans-serif;
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.item {
+  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.link {
+  text-decoration: none;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+.date {
+  font-size: 0.8rem;
+  color: #666;
+}

src/app/(sections)/news/page.tsx

@@ -1,16 +1,35 @@
 import { readDocuments } from '@/db/api/documents'
 import Link from 'next/link'
+import classes from './page.module.css'
+
+export const metadata = {
+  title: 'Новости',
+  description: 'Новости о болезни Рандю-Ослера',
+  keywords: 'новости, болезнь Рандю-Ослера',
+}
 
 const NewsPage = async () => {
   const documents = await readDocuments()
 
   return (
-    <div>
+    <div className={classes.component}>
       <h1>Новости</h1>
-      <ul>
+      <ul className={classes.list}>
         {documents.map((document) => (
-          <li key={document.id}>
-            <Link href={`/news/${document.id}`}>{document.title}</Link>
+          <li key={document.id} className={classes.item}>
+            <time
+              dateTime={document.created_at.toISOString()}
+              className={classes.date}
+            >
+              {new Date(document.created_at).toLocaleDateString('ru-RU', {
+                day: '2-digit',
+                month: '2-digit',
+                year: 'numeric',
+              })}
+            </time>
+            <Link className={classes.link} href={`/news/${document.id}`}>
+              {document.title}
+            </Link>
           </li>
         ))}
       </ul>

src/app/global.css

@@ -17,6 +17,7 @@
 body {
   background-color: var(--background-color);
   color: var(--text-color);
+  font-family: sans-serif;
 }
 
 a {

src/components/Document/Document.tsx

@@ -20,39 +20,34 @@ type BlockData = {
 
 const Document = ({ document }: { document: DocumentWithBlocks }) => {
   return (
-    <div className={classes.document}>
+    <div className={classes.component}>
       <h1>{document.title}</h1>
-      <p>{document.description}</p>
-      <ul>
-        {document.blocks.map((block) => {
-          switch (block.type) {
-            case 'paragraph':
-              return (
-                <DocumentParagraph key={block.id} content={block.content} />
-              )
-            case 'heading2':
-              return <DocumentHeading2 key={block.id} content={block.content} />
-            case 'heading3':
-              return <DocumentHeading3 key={block.id} content={block.content} />
-            case 'list':
-              return <DocumentList key={block.id} content={block.content} />
-            case 'youtube':
-              return <DocumentYoutube key={block.id} url={block.url} />
-            case 'image':
-              return <DocumentImage key={block.id} url={block.url} />
-            case 'quote':
-              return (
-                <DocumentQuote
-                  key={block.id}
-                  content={block.content}
-                  url={block.url}
-                />
-              )
-            default:
-              return <p>Unknown block type: {block.type}</p>
-          }
-        })}
-      </ul>
+      {document.blocks.map((block) => {
+        switch (block.type) {
+          case 'paragraph':
+            return <DocumentParagraph key={block.id} content={block.content} />
+          case 'heading2':
+            return <DocumentHeading2 key={block.id} content={block.content} />
+          case 'heading3':
+            return <DocumentHeading3 key={block.id} content={block.content} />
+          case 'list':
+            return <DocumentList key={block.id} content={block.content} />
+          case 'youtube':
+            return <DocumentYoutube key={block.id} url={block.url} />
+          case 'image':
+            return <DocumentImage key={block.id} url={block.url} />
+          case 'quote':
+            return (
+              <DocumentQuote
+                key={block.id}
+                content={block.content}
+                url={block.url}
+              />
+            )
+          default:
+            return <p>Unknown block type: {block.type}</p>
+        }
+      })}
     </div>
   )
 }

src/components/Document/document.module.css

@@ -206,9 +206,9 @@
   width: 100%;
 }
 
-.document {
-  max-width: 800px;
+.component {
   margin: 0 auto;
+  font-family: sans-serif;
 
   /** Paragraphs */
   p {