the project supports list view for each article

apps/website/src/app/articles/2023/11/28/[slug]/db.ts

@@ -0,0 +1,9 @@
+import {canonical, title} from './seo'
+
+const listItem = {
+  href: canonical,
+  title: title,
+  text: title,
+}
+
+export default listItem

apps/website/src/app/articles/2023/11/28/[slug]/seo.tsx → apps/website/src/app/articles/2023/11/28/[slug]/seo.ts

@@ -16,3 +16,8 @@ export const tags = [
 
 export const description =
   'Resources about system design, distributed systems, microservices and monolith'
+
+export const listItem = {
+  canonical,
+  slogan: title,
+}

apps/website/src/app/articles/2023/12/01/[slug]/Content.tsx

@@ -8,12 +8,14 @@ import HoldingPerformancePromises from '@/blog/lectures/holding-performance-prom
 import RailsConf2015StrongCodeReviewCulture from '@/blog/lectures/rails-2015-implementing-strong-code-review-culture'
 import DockerKubernetes from '@/blog/courses/docker-kubernetes-fundamentals'
 
+import {slogan} from './seo'
+
 const Content = () => {
   const listStyle = 'list-disc mx-6 mt-0 mb-5'
 
   return (
     <>
-      <Slogan>The art of onboarding of a new backend engineer</Slogan>
+      <Slogan>{slogan}</Slogan>
 
       <p>
         My manager gave me as a task to help of onboarding of a new team member

apps/website/src/app/articles/2023/12/01/[slug]/db.ts

@@ -0,0 +1,9 @@
+import {slogan, canonical} from './seo'
+
+const listItem = {
+  href: canonical,
+  title: slogan,
+  text: slogan,
+}
+
+export default listItem

apps/website/src/app/articles/2023/12/01/[slug]/seo.ts

@@ -6,6 +6,8 @@ export const title = 'Backend nodejs engineering onboarding'
 
 export const canonical = folder + sanitizeUrl(title)
 
+export const slogan = 'The art of onboarding of a new backend engineer'
+
 export const tags = [
   'nodejs',
   'agile',

apps/website/src/app/articles/Content.tsx

@@ -2,14 +2,20 @@
 
 import Link from 'next/link'
 
-import {title, canonical} from './2023/11/28/[slug]/seo'
-
-const Content = () => {
-  return (
-    <>
-      <Link href={canonical}>{title}</Link>
-    </>
-  )
+import articles from './articles'
+
+const Content = async () => {
+  const listStyle = 'list-disc mx-6 mt-0 mb-5'
+
+  const listItems = articles.map((article, i) => (
+    <li key={i}>
+      <Link key={i} title={article.title} href={article.href}>
+        {article.text}
+      </Link>
+    </li>
+  ))
+
+  return <ul className={listStyle}>{listItems}</ul>
 }
 
 export default Content

apps/website/src/app/articles/articles.ts

@@ -0,0 +1,6 @@
+import systemDesign from '../articles/2023/11/28/[slug]/db'
+import onboardingNodejs from '../articles/2023/12/01/[slug]/db'
+
+const articles = [systemDesign, onboardingNodejs]
+
+export default articles