feat: start working on docs 1/2

package-lock.json

@@ -12,6 +12,7 @@
         "@astrojs/prefetch": "^0.1.1",
         "@astrojs/sitemap": "^1.0.0",
         "@astrojs/tailwind": "^2.1.3",
+        "@tailwindcss/typography": "^0.5.8",
         "astro": "^1.6.12",
         "astro-compress": "^1.1.17",
         "astro-robots-txt": "^0.3.10",
@@ -766,6 +767,32 @@
         "@proload/core": "^0.3.2"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.8.tgz",
+      "integrity": "sha512-xGQEp8KXN8Sd8m6R4xYmwxghmswrd0cPnNI2Lc6fmrC3OojysTBJJGSIVwPV56q4t6THFUK3HJ0EaWwpglSxWw==",
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
+    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -3667,6 +3694,21 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q=="
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
+    },
     "node_modules/log-symbols": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-5.1.0.tgz",
@@ -8553,6 +8595,28 @@
         "tsm": "^2.1.4"
       }
     },
+    "@tailwindcss/typography": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.8.tgz",
+      "integrity": "sha512-xGQEp8KXN8Sd8m6R4xYmwxghmswrd0cPnNI2Lc6fmrC3OojysTBJJGSIVwPV56q4t6THFUK3HJ0EaWwpglSxWw==",
+      "requires": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "dependencies": {
+        "postcss-selector-parser": {
+          "version": "6.0.10",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+          "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+          "requires": {
+            "cssesc": "^3.0.0",
+            "util-deprecate": "^1.0.2"
+          }
+        }
+      }
+    },
     "@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -10541,6 +10605,21 @@
         "p-locate": "^5.0.0"
       }
     },
+    "lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q=="
+    },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
+    },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
+    },
     "log-symbols": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-5.1.0.tgz",

package.json

@@ -15,6 +15,7 @@
     "@astrojs/prefetch": "^0.1.1",
     "@astrojs/sitemap": "^1.0.0",
     "@astrojs/tailwind": "^2.1.3",
+    "@tailwindcss/typography": "^0.5.8",
     "astro": "^1.6.12",
     "astro-compress": "^1.1.17",
     "astro-robots-txt": "^0.3.10",

src/components/atoms/Container.astro

@@ -2,6 +2,6 @@
 const { class: className } = Astro.props;
 ---
 
-<div class={"container mx-auto px-4 " + className}>
+<div class={`container mx-auto px-4 ${className ?? ""}`}>
     <slot />
 </div>

src/components/widgets/docs/Sidebar.astro

@@ -0,0 +1,43 @@
+---
+import type { MarkdownInstance } from "astro";
+
+const files = await Astro.glob('../../../pages/docs/items/**/*.md');
+for (let i = 0; i < 100; i++) {
+    files.push(files[0]);
+}
+
+const sections = files.reduce((acc, file) => {
+    const category: string = file.url!.split('/')[3];
+
+    if (!acc[category]) acc[category] = [];
+
+    acc[category].push(file);
+
+    return acc;
+}, {} as Record<string, MarkdownInstance<Record<string, any>>[]>);
+
+const categories = Object.keys(sections);
+---
+
+<aside aria-label="Sidebar">
+    <nav class="w-full mr-4 py-4 bg-gray-50 dark:bg-gray-800">
+        <ul class="overflow-y-auto overflow-x-visible">
+            {categories.map((category) => 
+                <li>
+                    <div class="pt-5">
+                        <h1 class="text-white text-2xl w-full font-extrabold">{category}</h1>
+                        <ul>
+                            {sections[category].map((section) => 
+                                <li class="text-white w-full my-2 pl-4 hover:bg-white/20 p-2">
+                                    <a href={section.url}>
+                                        {section.frontmatter.title}
+                                    </a>
+                                </li>
+                            )}
+                        </ul>
+                    </div>
+                </li>
+            )}
+        </ul>
+    </nav>
+</aside> 

src/layouts/docs/ItemLayout.astro

@@ -0,0 +1,34 @@
+---
+import Container from "../../components/atoms/Container.astro";
+import Sidebar from "../../components/widgets/docs/Sidebar.astro";
+import Navbar from "../../components/widgets/Navbar.astro";
+import Layout from "../../layouts/Layout.astro"
+
+export interface Props {
+	content: {
+		title: string;
+	};
+}
+
+const {
+	content: { title },
+} = Astro.props;
+---
+
+<Layout>
+    <Navbar />
+
+    <Container class="flex flex-row">
+        <Sidebar />
+
+        <div class="w-full p-8">
+            <h1 class="text-white text-5xl py-10 font-extrabold">
+                {title}
+            </h1>
+            
+            <main class="text-white text-2xl prose">
+                <slot />
+            </main>
+        </div>
+    </Container>
+</Layout>

src/pages/blog/posts/new-year-2023.md

@@ -1,6 +1,6 @@
 ---
 title: Šťastný nový rok 2023
-date: 'Januar 01 2023'
+date: January 01 2023
 layout: ../../../layouts/blog/PostLayout.astro
 ---
 

src/pages/docs/index.astro

@@ -0,0 +1,3 @@
+<script>
+    window.location.pathname = "/docs/items/x/introduction";
+</script>

src/pages/docs/items/x/introduction.md

@@ -0,0 +1,14 @@
+---
+title: Introduction
+layout: ../../../../layouts/docs/ItemLayout.astro
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sollicitudin fringilla odio tincidunt dictum. Ut facilisis pretium magna eu tristique. Donec nisl dui, accumsan vel blandit ut, rutrum at nisl. In hac habitasse platea dictumst. Phasellus suscipit feugiat orci, rhoncus varius leo tincidunt in. Phasellus at quam ornare, interdum enim et, tempor enim. Suspendisse condimentum, odio id placerat vestibulum, ante metus sodales quam, tincidunt suscipit sem augue et leo. Nullam turpis lacus, fringilla ut quam quis, cursus cursus risus.
+
+Etiam aliquet dolor eu sapien lobortis, dignissim hendrerit felis luctus. In ac mauris velit. Duis posuere vitae leo lobortis vehicula. Vestibulum cursus arcu et aliquet porttitor. Suspendisse lobortis, massa non faucibus pretium, sapien urna commodo erat, sit amet cursus nunc massa et lacus. Donec semper tellus ac sapien porta laoreet. Nulla facilisi. Pellentesque nec euismod est. Vivamus a varius quam, dapibus dictum dui. Vivamus suscipit libero sem, quis eleifend tortor dapibus a. Nulla pretium massa in libero ornare posuere. Nulla lacinia odio eget varius mollis. Maecenas porta, nibh eu placerat ullamcorper, quam velit iaculis felis, non eleifend purus nisi sit amet neque. Morbi urna leo, convallis non accumsan in, malesuada nec quam. Aliquam erat volutpat. Pellentesque condimentum nisi vitae dictum porta.
+
+Aliquam sollicitudin dolor et faucibus lobortis. Nullam et nisi mi. Nunc congue molestie justo, vel feugiat diam vulputate nec. Aliquam viverra sit amet lacus vitae fermentum. Phasellus convallis aliquet sem ac posuere. Curabitur blandit massa purus, vitae placerat urna blandit at. Praesent laoreet id dui laoreet porttitor. Suspendisse ac augue id risus suscipit rutrum. Morbi eget semper lectus. Aliquam fringilla ex sed felis imperdiet porta. Pellentesque dignissim orci eget justo ultricies, ut dapibus neque tempor. Suspendisse ac nibh faucibus, tempor libero ac, euismod purus. Donec rhoncus id ante vitae semper. Vestibulum tempus pretium nisi at fermentum. Cras tincidunt lectus leo, sit amet volutpat metus varius sit amet.
+
+Proin placerat nisi ac nibh aliquet pellentesque. Fusce efficitur, arcu aliquet faucibus fringilla, arcu nisi vestibulum nunc, at porttitor massa erat vel nisi. Duis in ornare risus, blandit lobortis magna. Donec convallis sem a metus luctus porttitor. Quisque interdum faucibus nunc nec tincidunt. Nunc ut ullamcorper libero, in ornare risus. Fusce at vestibulum mauris. Proin euismod lectus et facilisis eleifend. Interdum et malesuada fames ac ante ipsum primis in faucibus. In lobortis gravida augue at tincidunt. Fusce volutpat nisi id tempor luctus. Aenean ac hendrerit nisl. Donec ut venenatis ligula. Donec purus nibh, maximus id diam sit amet, viverra congue mi.
+
+Quisque consectetur porttitor diam nec porta. Donec ut tortor in dui ultrices vestibulum ut quis tellus. Morbi dignissim quis enim volutpat sagittis. Pellentesque iaculis mattis varius. Nam non laoreet ex. Etiam vestibulum leo augue, ut auctor lacus feugiat vitae. Maecenas vitae ante non nisl vestibulum luctus eu et tortor. Proin velit nisl, dapibus pellentesque interdum non, efficitur in orci.

src/pages/docs/items/x/test.md

@@ -0,0 +1,4 @@
+---
+title: Test
+layout: ../../../../layouts/docs/ItemLayout.astro
+---

src/pages/docs/items/y/introduction.md

@@ -0,0 +1,3 @@
+---
+title: Introduction
+---

src/pages/docs/items/y/test.md

@@ -0,0 +1,3 @@
+---
+title: Test
+---

tailwind.config.cjs

@@ -13,5 +13,7 @@ module.exports = {
             },
         },
     },
-    plugins: [],
+    plugins: [
+        require("@tailwindcss/typography")
+    ],
 };