[website] Add tailwind typography

projects/filigran-website/app/docs/layout.tsx~

@@ -0,0 +1,68 @@
+import type {Metadata} from 'next'
+import Link from 'next/link'
+import {getContentMenu} from '@/utils/mdx.util'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from 'filigran-ui/clients'
+
+export const metadata: Metadata = {
+  title: 'Filigran docs',
+  description: 'Welcome to Filigran documentation',
+}
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  const contentMenu = await getContentMenu()
+  return (
+    <main className="flex max-w-full p-4">
+      <aside className="fixed z-10 flex w-[250px] flex-col px-2">
+        <h2 className="text-xl font-medium">{contentMenu.title}</h2>
+        {contentMenu.content.map((menu) => {
+          if (menu?.content?.length > 0) {
+            return (
+              <Accordion
+                type="single"
+                key={menu.title}
+                collapsible>
+                <AccordionItem value={`item-${menu.title}`}>
+                  <AccordionTrigger className="mx-0">
+                    {menu.title}
+                  </AccordionTrigger>
+                  <AccordionContent>
+                    {menu?.content.map((m) => {
+                      return (
+                        <Link
+                          key={m.slug}
+                          className="my-2 flex flex-col space-y-1"
+                          href={`/docs/${m.slug}`}>
+                          {m.title}
+                        </Link>
+                      )
+                    })}
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+            )
+          }
+          return (
+            <Link
+              key={menu.slug}
+              className="my-2 flex flex-col space-y-1"
+              href={`/docs/${menu.slug}`}>
+              {menu.title}
+            </Link>
+          )
+        })}
+      </aside>
+      <div className="prose ml-[250px] max-w-none flex-1 overflow-auto">
+        {children}
+      </div>
+    </main>
+  )
+}

projects/filigran-website/package.json

@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@svgr/webpack": "8.1.0",
-    "@tailwindcss/typography": "0.5.13",
+    "@tailwindcss/typography": "^0.5.15",
     "@types/node": "20.14.9",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",

projects/filigran-website/tailwind.config.ts

@@ -9,7 +9,12 @@ const config = {
     '../../packages/filigran-ui/src/components/**/*.{ts,tsx}',
   ],
   prefix: '',
-  plugins: [require('tailwindcss-animate'), FiligranUIPlugin()],
+
+  plugins: [
+    require('tailwindcss-animate'),
+    FiligranUIPlugin(),
+    require('@tailwindcss/typography'),
+  ],
 }
 
 export default config

yarn.lock

@@ -2230,10 +2230,10 @@
     "@swc/counter" "^0.1.3"
     tslib "^2.4.0"
 
-"@tailwindcss/[email protected].13":
-  version "0.5.13"
-  resolved "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.13.tgz"
-  integrity sha512-ADGcJ8dX21dVVHIwTRgzrcunY6YY9uSlAHHGVKvkA+vLc5qLwEszvKts40lx7z0qc4clpjclwLeK5rVCV2P/uw==
+"@tailwindcss/typography@^0.5.15":
+  version "0.5.15"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.15.tgz#007ab9870c86082a1c76e5b3feda9392c7c8d648"
+  integrity sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==
   dependencies:
     lodash.castarray "^4.4.0"
     lodash.isplainobject "^4.0.6"
@@ -6130,6 +6130,7 @@ streamsearch@^1.1.0:
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==