docs: add docs site (#90)

* setup docs site Migrate doc site PoC to main repo * Add readme for docs Includes eleventyignore to prevent eleventy from building readme file. * add docs workflow config * add noindex to doc pages * doc: use github action page build workflow Co-authored-by: gotbadger <[email protected]>
Bearer · Nov 2, 2022 · ca8f25f · ca8f25f
1 parent b483eb7
commit ca8f25f
Show file tree

Hide file tree

Showing 24 changed files with 7,815 additions and 91 deletions.
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
@@ -0,0 +1,55 @@
+name: Build Documentation
+
+on:
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - run: "cd docs"
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "16"
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - name: Install dependencies
+        run: npm ci
+      - name: Build with eleventy
+        run: npm run build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: ./_site
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1
diff --git a/docs/.eleventy.js b/docs/.eleventy.js
@@ -0,0 +1,27 @@
+const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight")
+const yaml = require("js-yaml")
+const markdownIt = require("markdown-it")
+const markdownItEmoji = require("markdown-it-emoji")
+const now = String(Date.now())
+
+module.exports = function (eleventyConfig) {
+  eleventyConfig.addWatchTarget("./_src/styles/tailwind.config.js")
+  eleventyConfig.addWatchTarget("./_src/styles/tailwind.css")
+  eleventyConfig.addPassthroughCopy("assets/img")
+  eleventyConfig.addPassthroughCopy("assets/fonts")
+  eleventyConfig.addPassthroughCopy({ "./_tmp/style.css": "./style.css" })
+  eleventyConfig.addDataExtension("yaml", (contents) => yaml.load(contents))
+  eleventyConfig.addShortcode("version", function () {
+    return now
+  })
+
+  eleventyConfig.addPlugin(syntaxHighlight)
+  eleventyConfig.setLibrary("md", markdownIt({html: true}).use(markdownItEmoji))
+
+  return {
+    dir: {
+      includes: "_src/_includes",
+      output: "_site",
+    },
+  }
+}
diff --git a/docs/.eleventyignore b/docs/.eleventyignore
@@ -0,0 +1 @@
+readme.md
diff --git a/docs/.gitignore b/docs/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+_site/
diff --git a/docs/_data/meta.js b/docs/_data/meta.js
@@ -0,0 +1,3 @@
+module.exports = {
+  sourcePath: "https://github.com/bearer/curio/docs",
+};
diff --git a/docs/_src/_includes/icon-github.njk b/docs/_src/_includes/icon-github.njk
@@ -0,0 +1,7 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M7.875 22.25C8.47174 22.25 9.04403 22.0129 9.46599 21.591C9.88795 21.169 10.125 20.5967 10.125 20V15.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+	<path d="M16.125 22.25C15.5283 22.25 14.956 22.0129 14.534 21.591C14.1121 21.169 13.875 20.5967 13.875 20V15.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+	<path d="M14.25 15.5H15.75C16.3467 15.5 16.919 15.7371 17.341 16.159C17.7629 16.581 18 17.1533 18 17.75V18.5C18 19.0967 18.2371 19.669 18.659 20.091C19.081 20.5129 19.6533 20.75 20.25 20.75" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+	<path d="M9.75 15.5H8.25C7.65326 15.5 7.08097 15.7371 6.65901 16.159C6.23705 16.581 6 17.1533 6 17.75V18.5C6 19.0967 5.76295 19.669 5.34099 20.091C4.91903 20.5129 4.34674 20.75 3.75 20.75" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+	<path d="M6.04797 7.69098C5.78571 7.0124 5.67894 6.28364 5.73554 5.55835C5.79214 4.83306 6.01065 4.12968 6.37501 3.5C7.19373 3.49953 7.99937 3.70543 8.71748 4.09868C9.43558 4.49192 10.043 5.05981 10.4836 5.74989V5.75H13.5164V5.74989C13.957 5.05981 14.5644 4.49192 15.2825 4.09868C16.0006 3.70543 16.8063 3.49953 17.625 3.5C17.9894 4.12968 18.2079 4.83306 18.2645 5.55835C18.3211 6.28364 18.2143 7.0124 17.952 7.69098V7.69098C18.473 8.44253 18.7515 9.33554 18.75 10.25V11C18.75 12.1935 18.2759 13.3381 17.432 14.182C16.5881 15.0259 15.4435 15.5 14.25 15.5H9.75001C8.55653 15.5 7.41194 15.0259 6.56803 14.182C5.72411 13.3381 5.25001 12.1935 5.25001 11V10.25C5.24854 9.33554 5.527 8.44253 6.04797 7.69098L6.04797 7.69098Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/docs/_src/_includes/icon-star.njk b/docs/_src/_includes/icon-star.njk
@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M12.4135 18.3812L17.1419 21.3769C17.7463 21.7598 18.4967 21.1903 18.3173 20.4847L16.9512 15.1108C16.9127 14.9611 16.9173 14.8036 16.9643 14.6564C17.0114 14.5092 17.0991 14.3783 17.2172 14.2787L21.4573 10.7496C22.0144 10.2859 21.7269 9.36126 21.0111 9.31481L15.4738 8.95544C15.3247 8.94479 15.1816 8.89198 15.0613 8.80317C14.941 8.71437 14.8484 8.59321 14.7943 8.45382L12.7292 3.25323C12.673 3.10528 12.5732 2.9779 12.443 2.88802C12.3127 2.79814 12.1582 2.75 12 2.75C11.8418 2.75 11.6873 2.79814 11.557 2.88802C11.4268 2.9779 11.327 3.10528 11.2708 3.25323L9.20568 8.45382C9.15157 8.59321 9.05897 8.71437 8.93868 8.80317C8.81838 8.89198 8.67533 8.94479 8.52618 8.95544L2.98894 9.31481C2.27315 9.36126 1.9856 10.2859 2.54272 10.7496L6.78278 14.2787C6.90095 14.3783 6.9886 14.5092 7.03566 14.6564C7.08272 14.8036 7.08727 14.9611 7.0488 15.1108L5.78188 20.0945C5.56667 20.9412 6.46715 21.6246 7.19243 21.1651L11.5865 18.3812C11.71 18.3025 11.8535 18.2607 12 18.2607C12.1465 18.2607 12.29 18.3025 12.4135 18.3812V18.3812Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/docs/_src/_includes/layouts/base.njk b/docs/_src/_includes/layouts/base.njk
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Curio: {{title}}</title>
+    <meta charset="UTF-8"/>
+    {% if description %}
+      <meta name="description" content="{{description}}"/>
+    {% endif %}
+    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
+    <meta name='robots' content='noindex,nofollow'/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
+    <link rel="stylesheet" href="/style.css?v={% version %}"/>
+  </head>
+  <body class="bg-white dark:bg-black">
+    {% include "nav.njk" %}
+    {{ content | safe }}
+  </body>
+</html>
diff --git a/docs/_src/_includes/layouts/doc.njk b/docs/_src/_includes/layouts/doc.njk
@@ -0,0 +1,46 @@
+---
+layout: layouts/base.njk
+---
+
+<main class="max-w-7xl sm:flex gap-8 mx-auto text-black dark:text-neutral-100 px-4 relative">
+	<div class="self-start sticky top-[6.75rem] min-w-fit">
+		<ul>
+			{# <li>
+				<a class="" href="/docs">Get Started</a>
+			</li> #}
+			<li>
+				<a href="" class="font-bold text-lg border-b-2 border-solid border-main">Tutorials</a>
+				<ul class="pl-4">
+					<li>
+						<a href="/quickstart">Quickstart</a>
+					</li>
+					<li>Create a policy</li>
+				</ul>
+			</li>
+			<li>
+				<a href="" class="font-bold text-lg border-b-2 border-solid border-main">Explanations</a>
+				<ul class="pl-4">
+					<li>Detection</li>
+					<li>Classification</li>
+					<li>Policies</li>
+				</ul>
+			</li>
+			<li>
+				<a href="" class="font-bold text-lg border-b-2 border-solid border-main">How-to</a>
+			</li>
+			<li>
+				<a href="" class="font-bold text-lg border-b-2 border-solid border-main">Reference</a>
+				<ul class="pl-4">
+					<li>
+						<a href="/reference/commands" class="">Commands</a>
+					</li>
+				</ul>
+			</li>
+		</ul>
+	</div>
+	<article class="prose dark:prose-invert pl-8">
+		{{ content | safe }}
+		<hr/>
+		<a class="" href="{{meta.sourcePath}}/blob/main/docs/{{ page.inputPath }}">Edit this page on GitHub</a>
+	</article>
+</main>
diff --git a/docs/_src/_includes/logo.njk b/docs/_src/_includes/logo.njk
@@ -0,0 +1,28 @@
+<svg class="w-36" width="341" height="60" viewBox="0 0 341 122" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<title>Curio</title>
+	<path d="M60.7013 121.37C94.0417 121.37 121.069 94.3414 121.069 61C121.069 27.6586 94.0417 0.630096 60.7013 0.630096C27.361 0.630096 0.333252 27.6586 0.333252 61C0.333252 94.3414 27.361 121.37 60.7013 121.37Z" fill="url(#paint0_linear_2_2768)"/>
+	<path d="M72.5134 32.7693C71.7168 27.865 75.0402 23.2595 79.9443 22.4628C84.8484 21.6662 89.4538 24.9897 90.2504 29.8939C91.047 34.7982 87.7237 39.4038 82.8196 40.2004C77.9154 40.997 73.2976 37.6736 72.5134 32.7693Z" fill="#C4C4C4"/>
+	<path d="M31.2515 32.7693C30.4549 27.865 33.7782 23.2595 38.6823 22.4628C43.5865 21.6662 48.1919 24.9897 48.9885 29.8939C49.7851 34.7982 46.4617 39.4038 41.5576 40.2004C36.6535 40.997 32.0356 37.6736 31.2515 32.7693Z" fill="#C4C4C4"/>
+	<path d="M74.181 119.839H74.1935C82.0724 118.034 89.3539 114.686 95.7268 110.142L93.3992 108.412L61.3108 95.8029L72.0899 115.482C72.8616 116.901 73.5462 118.345 74.1686 119.826L74.181 119.839Z" fill="#C4C4C4"/>
+	<path d="M79.0232 118.519C103.407 110.765 121.069 87.9362 121.069 60.9751C121.069 55.3115 120.285 49.8471 118.841 44.6441H89.5783C86.4167 36.8396 78.7618 31.3254 69.8124 31.3254H52.8222C41.0474 31.3254 31.5005 40.8725 31.5005 52.6478V60.2531C31.5005 66.5391 34.2139 72.1778 38.5455 76.0862L66.153 107.752C69.8747 112.022 74.2311 115.632 79.0232 118.519V118.519Z" fill="#F5F5F5"/>
+	<path d="M83.5788 50.5815C84.226 51.8014 85.4956 52.5607 86.8648 52.5607H120.484C120.111 49.8596 119.551 47.2207 118.829 44.6566H89.5658C86.4042 36.852 78.7493 31.3378 69.7999 31.3378H52.8097C43.5865 31.3378 35.7324 37.1881 32.7576 45.3785C36.6037 41.582 41.8937 39.2419 47.7189 39.2419H64.7091C72.8743 39.2419 79.9691 43.835 83.5539 50.5815H83.5788Z" fill="white"/>
+	<path d="M79.0235 118.519C84.8113 116.677 90.2133 113.989 95.105 110.59C75.6254 99.6243 52.3619 73.7586 31.5132 52.6478V60.2532C31.5132 66.5391 34.2266 72.1778 38.5582 76.0863L66.1657 107.752C69.8874 112.022 74.2438 115.632 79.0359 118.519H79.0235Z" fill="#E9E9E9"/>
+	<path d="M67.5597 61.1369C67.5597 63.9998 65.2321 66.3275 62.3693 66.3275H59.133C56.2702 66.3275 53.9426 63.9998 53.9426 61.1369C53.9426 58.274 56.2702 55.9464 59.133 55.9464H62.3693C65.2321 55.9464 67.5597 58.274 67.5597 61.1369Z" fill="#0D0D0D"/>
+	<path d="M70.0613 49.7973C70.0613 48.4157 71.1815 47.3079 72.5507 47.3079C73.9199 47.3079 75.0401 48.4281 75.0401 49.7973C75.0401 51.1666 73.9199 52.2868 72.5507 52.2868C71.1815 52.2868 70.0613 51.1666 70.0613 49.7973Z" fill="#0D0D0D"/>
+	<path d="M47.4824 49.7973C47.4824 48.4157 48.6027 47.3079 49.9718 47.3079C51.341 47.3079 52.4612 48.4281 52.4612 49.7973C52.4612 51.1666 51.341 52.2868 49.9718 52.2868C48.6027 52.2868 47.4824 51.1666 47.4824 49.7973Z" fill="#0D0D0D"/>
+	<g class="fill-black dark:fill-white">
+		<path d="M159.302 83.8452C160.823 83.8452 162.154 83.5541 163.324 83.001C164.479 82.4333 165.371 81.6327 166 80.5847C166.658 79.5367 166.995 78.2995 167.024 76.873H179.703C179.674 80.3664 178.767 83.4522 176.983 86.1305C175.199 88.8087 172.786 90.9193 169.759 92.4331C166.717 93.9469 163.324 94.7183 159.536 94.7183C154.535 94.7183 150.367 93.6266 147.047 91.4578C143.742 89.2745 141.256 86.3488 139.589 82.6517C137.951 78.9545 137.132 74.8207 137.132 70.2647V69.0566C137.132 64.4715 137.951 60.3232 139.589 56.626C141.256 52.9289 143.742 49.9886 147.047 47.8198C150.382 45.6364 154.535 44.5593 159.492 44.5593C163.485 44.5593 166.98 45.3308 169.978 46.8882C173.02 48.4166 175.374 50.6 177.071 53.4674C178.796 56.3058 179.674 59.6973 179.703 63.671H167.024C166.995 62.1572 166.688 60.7744 166.088 59.5517C165.518 58.2999 164.655 57.2956 163.499 56.5532C162.344 55.8109 160.911 55.4324 159.215 55.4324C156.831 55.4324 155.018 56.0729 153.774 57.3538C152.561 58.6347 151.727 60.3232 151.274 62.4046C150.82 64.457 150.601 66.684 150.601 69.0712V70.2793C150.601 72.6955 150.806 74.9517 151.23 77.0331C151.683 79.0855 152.517 80.7448 153.774 81.9966C155.047 83.2484 156.904 83.8743 159.302 83.8743V83.8452Z"/>
+		<path d="M215.21 45.4181V79.3912C214.596 80.5265 213.762 81.4726 212.666 82.215C211.203 83.2339 209.185 83.7433 206.597 83.7433C205.324 83.7433 204.169 83.525 203.16 83.0738C202.18 82.5934 201.405 81.8511 200.835 80.8322C200.294 79.7842 200.03 78.445 200.03 76.8002V45.4036H186.547V76.7129C186.547 83.1174 188.024 87.7316 190.964 90.5263C193.932 93.2919 197.808 94.6892 202.56 94.6892C206.611 94.6892 209.96 93.6994 212.607 91.7344C213.762 90.8756 214.772 89.8713 215.678 88.7505L216.044 93.8013H228.679V45.4036H215.196L215.21 45.4181Z"/>
+		<path d="M264.058 44.6612C263.312 44.5739 262.595 44.5302 261.923 44.5302C258.954 44.5302 256.424 45.4618 254.333 47.354C253.133 48.4166 252.139 49.7266 251.276 51.255L250.852 45.4181H238.173V93.8159H251.656V62.5211C251.715 62.3901 251.773 62.2445 251.832 62.1135C252.578 60.6871 253.704 59.6099 255.225 58.8967C256.746 58.1544 258.676 57.7759 261.03 57.7759C261.747 57.7759 262.551 57.8196 263.443 57.9069C264.336 57.9651 265.111 58.0379 265.769 58.1253L265.944 45.1124C265.462 44.9087 264.847 44.7486 264.072 44.6612H264.058Z"/>
+		<path d="M286.034 93.8159H272.507V45.4181H286.034V93.8159Z"/>
+		<path d="M294.385 69.173C294.385 64.457 295.277 60.2504 297.061 56.5532C298.845 52.827 301.448 49.8867 304.87 47.747C308.292 45.5928 312.445 44.5302 317.315 44.5302C322.185 44.5302 326.426 45.6073 329.848 47.747C333.299 49.8867 335.902 52.827 337.657 56.5532C339.441 60.2504 340.333 64.457 340.333 69.173V70.1046C340.333 74.7915 339.441 78.9836 337.657 82.7244C335.902 86.4507 333.314 89.3909 329.892 91.5306C326.47 93.6412 322.302 94.7038 317.403 94.7038C312.504 94.7038 308.307 93.6412 304.87 91.5306C301.448 89.3764 298.845 86.4507 297.061 82.7244C295.277 78.9981 294.385 74.7915 294.385 70.1046V69.173V69.173ZM307.912 70.1046C307.912 72.6373 308.204 74.9517 308.804 77.0331C309.433 79.1146 310.427 80.7739 311.787 81.9966C313.191 83.2193 315.063 83.8307 317.403 83.8307C319.743 83.8307 321.571 83.2193 322.931 81.9966C324.335 80.7739 325.329 79.1146 325.914 77.0331C326.543 74.9517 326.85 72.6373 326.85 70.1046V69.173C326.85 66.6986 326.543 64.4133 325.914 62.3319C325.314 60.2213 324.32 58.5328 322.931 57.281C321.556 56.0292 319.684 55.4033 317.315 55.4033C314.946 55.4033 313.133 56.0292 311.729 57.281C310.354 58.5328 309.374 60.2213 308.789 62.3319C308.19 64.4133 307.897 66.6986 307.897 69.173V70.1046H307.912Z"/>
+		<path d="M277.567 27.2817H281.472C284.923 27.2817 287.716 30.2656 287.716 33.9628C287.716 37.6599 284.923 40.6438 281.472 40.6438H277.567C274.116 40.6438 271.323 37.6599 271.323 33.9628C271.323 30.2656 274.116 27.2817 277.567 27.2817Z"/>
+	</g>
+
+	<defs>
+		<linearGradient id="paint0_linear_2_2768" x1="60.7013" y1="0.630096" x2="60.7013" y2="121.37" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#A46EF7"/>
+			<stop offset="1" stop-color="#6E20E6"/>
+		</linearGradient>
+	</defs>
+</svg>
diff --git a/docs/_src/_includes/nav.njk b/docs/_src/_includes/nav.njk
@@ -0,0 +1,24 @@
+<header class='py-4 mb-4 sm:px-0 bg-white dark:bg-black sm:sticky sm:top-0 z-50 '>
+	<nav class='max-w-7xl mx-auto px-4 flex justify-between'>
+		<a href="/" title="Return to the homepage">
+			{% include 'logo.njk' %}
+		</a>
+		<ul class='flex gap-6 items-center text-black dark:text-neutral-100'>
+			<li>
+				<a href="/docs">Documentation</a>
+			</li>
+			<li class="">
+				<a href="https://github.com/bearer/curio" class="flex gap-1">
+					{% include 'icon-github.njk' %}
+					{% include 'icon-star.njk' %}
+					<span>1.2k</span>
+				</a>
+			</li>
+			<li>
+				<a href="" class="btn-fancy dark:btn-fancy-dark dark:text-neutral-100 text-black block">
+          Try Curio
+				</a>
+			</li>
+		</ul>
+	</nav>
+</header>
diff --git a/docs/_src/styles/tailwind.config.js b/docs/_src/styles/tailwind.config.js
@@ -0,0 +1,52 @@
+module.exports = {
+  content: ["_site/**/*.html"],
+  safelist: [],
+  theme: {
+    colors: {
+      transparent: "transparent",
+      current: "currentColor",
+      black: "#0C0C0C",
+      white: "#FFFFFF",
+      neutral: {
+        500: "#3A3A3A",
+        400: "#969696",
+        300: "#C4C4C4",
+        200: "#E9E9E9",
+        100: "#F5F5F5",
+      },
+      main: {
+        100: "#F1E9FD",
+        200: "#D4BCF8",
+        300: "#A46EF6",
+        400: "#6E20E6",
+        DEFAULT: "#6E20E6",
+        500: "#42138A",
+        600: "#230A49",
+      },
+    },
+    extend: {
+      typography: (theme) => ({
+        DEFAULT: {
+          css: {
+            "--tw-prose-body": theme("colors.black"),
+            p: {},
+            "code::before": {
+              content: "normal",
+            },
+            "code::after": {
+              content: "normal",
+            },
+          },
+          invert: {
+            css: {
+              "--tw-prose-invert-body": theme("colors.neutral.200"),
+              // "--tw-prose-invert-headings": theme("colors.neutral.200"),
+              p: {},
+            },
+          },
+        },
+      }),
+    },
+  },
+  plugins: [require("@tailwindcss/typography")],
+};
diff --git a/docs/_src/styles/tailwind.css b/docs/_src/styles/tailwind.css
@@ -0,0 +1,56 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  /* Custom Grid Elements */
+
+  .docs-grid {
+    display: grid;
+    grid-template-areas: "side doc";
+  }
+
+  /* Buttons */
+  .btn {
+    @apply py-4 px-6 font-bold rounded-full;
+  }
+
+  .btn-primary {
+    @apply btn bg-gradient-to-b from-main-300 to-main-400 text-neutral-100;
+  }
+
+  .btn-ghost {
+    @apply btn dark:text-neutral-100 text-black border-solid border-2 border-black dark:border-neutral-100;
+  }
+
+  .btn-fancy {
+    @apply btn border-solid border-2;
+    border-color: transparent;
+    background-image: linear-gradient(
+        theme("colors.white"),
+        theme("colors.white")
+      ),
+      linear-gradient(
+        to bottom,
+        theme("colors.main.300"),
+        theme("colors.main.400")
+      );
+    background-clip: padding-box, border-box;
+    background-origin: padding-box, border-box;
+  }
+  .btn-fancy-dark {
+    background-image: linear-gradient(
+        theme("colors.black"),
+        theme("colors.black")
+      ),
+      linear-gradient(
+        to bottom,
+        theme("colors.main.300"),
+        theme("colors.main.400")
+      );
+  }
+
+  /* Layout grid */
+
+
+}
diff --git a/docs/assets/img/code-example.png b/docs/assets/img/code-example.png
diff --git a/docs/docs.md b/docs/docs.md
@@ -0,0 +1,25 @@
+---
+title: Documentation
+layout: "layouts/doc"
+---
+
+# Curio
+
+Welcome to the Curio documentation. Curio is a static code analysis tool (SAST) dedicated to data security. It scans your source code to discover sensitive data flows (PHI, PII, PD as well as Data stores, internal and external APIs) and data security risks (leaks, missing encryption, third-party sharing etc).
+
+## Getting started
+
+New to Curio? Check out the [quickstart](/quickstart) to scan your first project. Ready to dive in? Check the [command reference](reference/commands) to configure Curio to your needs.
+
+
+## Explanations
+
+Coming soon...
+
+## How-to
+
+Coming soon...
+
+## Reference
+
+- [Commands](/reference/commands)
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -0,0 +1,3 @@
+---
+title: Getting started
+---
diff --git a/docs/index.njk b/docs/index.njk
@@ -0,0 +1,16 @@
+---
+title: Curio Home
+layout: layouts/base.njk
+---
+
+<main class="lg:container sm:flex justify-between gap-6 mx-auto text-black dark:text-neutral-100 relative">
+  <div class="my-8 basis-2/4">
+    <h2 class="text-5xl font-bold text-black dark:text-white mb-4">Discover sensitive data in seconds</h2>
+    <p>Excepteur minim occaecat laborum consectetur in do officia dolor proident ut aliqua officia veniam nulla ullamco. Cillum dolor officia ex eiusmod officia. Exercitation voluptate fugiat duis occaecat mollit id occaecat in irure magna ad incididunt. </p>
+    <div class="flex gap-4 mt-8">
+      <a class="btn-primary text-xlg" href="/get-started/">Get Started</a>
+      <a class="btn-ghost text-xlg" href="/docs">Documentation</a>
+    </div>
+  </div>
+  <div class=""><img src="assets/img/code-example.png" alt=""></div>
+</main>