cherry

.env

@@ -0,0 +1,7 @@
+# Environment variables declared in this file are automatically made available to Prisma.
+# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
+
+# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
+# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
+
+DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres?schema=explainegy"

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+/docker_data/postgres/
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.vscode

.markdown/test.md

@@ -0,0 +1,230 @@
+---
+__Advertisement :)__
+
+- __[pica](https://nodeca.github.io/pica/demo/)__ - high quality and fast image
+resize in browser.
+- __[babelfish](https://github.com/nodeca/babelfish/)__ - developer friendly
+i18n with plurals support and easy syntax.
+
+You will like those projects!
+---
+
+## h2 Heading
+
+### h3 Heading
+
+#### h4 Heading
+
+##### h5 Heading
+
+###### h6 Heading
+
+## Horizontal Rules
+
+---
+
+---
+
+---
+
+## Typographic replacements
+
+Enable typographer option to see result.
+
+(c) (C) (r) (R) (tm) (TM) (p) (P) +-
+
+test.. test... test..... test?..... test!....
+
+!!!!!! ???? ,, -- ---
+
+"Smartypants, double quotes" and 'single quotes'
+
+## Emphasis
+
+**This is bold text**
+
+**This is bold text**
+
+_This is italic text_
+
+_This is italic text_
+
+~~Strikethrough~~
+
+## Blockquotes
+
+> Blockquotes can also be nested...
+>
+> > ...by using additional greater-than signs right next to each other...
+> >
+> > > ...or with spaces between arrows.
+
+## Lists
+
+Unordered
+
+- Create a list by starting a line with `+`, `-`, or `*`
+- Sub-lists are made by indenting 2 spaces:
+  - Marker character change forces new list start:
+    - Ac tristique libero volutpat at
+    * Facilisis in pretium nisl aliquet
+    - Nulla volutpat aliquam velit
+- Very easy!
+
+Ordered
+
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+
+4. You can use sequential numbers...
+5. ...or keep all the numbers as `1.`
+
+Start numbering with offset:
+
+57. foo
+1. bar
+
+## Code
+
+Inline `code`
+
+Indented code
+
+    // Some comments
+    line 1 of code
+    line 2 of code
+    line 3 of code
+
+Block code "fences"
+
+```
+Sample text here...
+```
+
+Syntax highlighting
+
+```js
+var foo = function (bar) {
+	return bar++;
+};
+
+console.log(foo(5));
+```
+
+## Tables
+
+| Option | Description                                                               |
+| ------ | ------------------------------------------------------------------------- |
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default.    |
+| ext    | extension to be used for dest files.                                      |
+
+Right aligned columns
+
+| Option |                                                               Description |
+| -----: | ------------------------------------------------------------------------: |
+|   data | path to data files to supply the data that will be passed into templates. |
+| engine |    engine to be used for processing templates. Handlebars is the default. |
+|    ext |                                      extension to be used for dest files. |
+
+## Links
+
+[link text](http://dev.nodeca.com)
+
+[link with title](http://nodeca.github.io/pica/demo/ "title text!")
+
+Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
+
+## Images
+
+![Minion](https://octodex.github.com/images/minion.png)
+![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
+
+Like links, Images also have a footnote style syntax
+
+![Alt text][id]
+
+With a reference later in the document defining the URL location:
+
+[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
+
+## Plugins
+
+The killer feature of `markdown-it` is very effective support of
+[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).
+
+### [Emojies](https://github.com/markdown-it/markdown-it-emoji)
+
+> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
+>
+> Shortcuts (emoticons): :-) :-( 8-) ;)
+
+see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.
+
+### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)
+
+- 19^th^
+- H~2~O
+
+### [\<ins>](https://github.com/markdown-it/markdown-it-ins)
+
+++Inserted text++
+
+### [\<mark>](https://github.com/markdown-it/markdown-it-mark)
+
+==Marked text==
+
+### [Footnotes](https://github.com/markdown-it/markdown-it-footnote)
+
+Footnote 1 link[^first].
+
+Footnote 2 link[^second].
+
+Inline footnote^[Text of inline footnote] definition.
+
+Duplicated footnote reference[^second].
+
+[^first]: Footnote **can have markup**
+
+    and multiple paragraphs.
+
+[^second]: Footnote text.
+
+### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)
+
+Term 1
+
+: Definition 1
+with lazy continuation.
+
+Term 2 with _inline markup_
+
+: Definition 2
+
+        { some code, part of Definition 2 }
+
+    Third paragraph of definition 2.
+
+_Compact style:_
+
+Term 1
+~ Definition 1
+
+Term 2
+~ Definition 2a
+~ Definition 2b
+
+### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)
+
+This is HTML abbreviation example.
+
+It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
+
+\*[HTML]: Hyper Text Markup Language
+
+### [Custom containers](https://github.com/markdown-it/markdown-it-container)
+
+::: warning
+_here be dragons_
+:::

.markdown/test2.md

@@ -0,0 +1,9 @@
+## Code
+
+```js
+var foo = function (bar) {
+	return bar++;
+};
+
+console.log(foo(5));
+```

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "printWidth": 120
+}

README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

app/admin/articles/editor/[articleId]/layout.tsx

@@ -0,0 +1,3 @@
+export default async function AdminArticleEditorLayout({ children }) {
+  return <div>{children}</div>;
+}

app/admin/articles/editor/[articleId]/page.tsx

@@ -0,0 +1,295 @@
+"use client";
+
+import React from "react";
+import { useState, useRef, useEffect } from "react";
+import styles from "../../../../../styles/modules/ArticleEditor.module.scss";
+import { Prisma } from "@prisma/client";
+import "../../../../../styles/inputs.scss";
+import "../../../../../styles/buttons.scss";
+import Select from "react-select";
+import { useRouter } from "next/navigation";
+import urlJoin from "url-join";
+import { IContentTableEntry } from "../../../../../types/contentTable";
+import { CreateArticle, UpdateArticle } from "../../../../../types/api";
+import { formatTextToUrlName } from "../../../../../utils";
+import { isValidText } from "../../../../../validators";
+import { apiUrl } from "../../../../../global";
+import Markdown from "../../../../../components/Markdown";
+
+type ArticleWithCategory = Prisma.ArticleGetPayload<{ include: { category: true } }>;
+
+export default function AdminArticlesEditorPage({ params }: { params: { articleId: string } }) {
+  const router = useRouter();
+  const [title, setTitle] = useState<string>("");
+  const [selectCategoriesOptions, setSelectCategoriesOptions] = useState<any>([]);
+  const [introduction, setIntroduction] = useState<string>("");
+  const [markdown, setMarkdown] = useState<string>("");
+  const [contentTable, setContentTable] = useState<any>([]);
+
+  const titleRef = useRef<HTMLInputElement>(null);
+  const categorySelectRef = useRef(null);
+  const introductionRef = useRef<HTMLInputElement>(null);
+  const markdownTextAreaRef = useRef<HTMLTextAreaElement>(null);
+
+  const errorTextRef = useRef(null);
+
+  function changeContentTableEntryAnchor(index: number, newAnchor: string) {
+    setContentTable((prevArray) => {
+      let newArray = [...prevArray];
+      newArray[index].anchor = newAnchor;
+      return newArray;
+    });
+  }
+
+  function changeContentTableEntryTitle(index: number, newTitle: string) {
+    setContentTable((prevArray) => {
+      let newArray = [...prevArray];
+      newArray[index].anchor = newTitle;
+      return newArray;
+    });
+  }
+
+  function removeEntry(index: number) {
+    let newArray = [...contentTable];
+    newArray.splice(index, 1);
+    setContentTable(newArray);
+  }
+
+  function handleFormChange() {
+    setMarkdown(markdownTextAreaRef.current.value);
+    setTitle(titleRef.current.value);
+    setIntroduction(introductionRef.current.value);
+  }
+
+  // Create or update article
+  async function handleResponse(res: Response) {
+    const json = await res.json();
+    errorTextRef.current.innerText = json.error ?? "";
+    if (json.success) {
+      const newArticle: ArticleWithCategory = json.data;
+      router.push(urlJoin(`/articles/`, newArticle.category.name, newArticle.name));
+    }
+  }
+
+  async function updateArticle() {
+    console.log("Update article");
+    const payload: UpdateArticle = {
+      id: params.articleId,
+      title: titleRef.current.value,
+      introduction: introductionRef.current.value,
+      markdown: markdown,
+      categoryId: Number(categorySelectRef?.current?.getValue()[0]?.value),
+      contentTable: contentTable,
+    };
+    console.log(payload);
+
+    await fetch("/api/articles/", {
+      method: "PUT",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      cache: "no-cache",
+      body: JSON.stringify(payload),
+    })
+      .then(handleResponse)
+      .catch(console.error);
+  }
+
+  async function createArticle() {
+    console.log("Create article");
+    const payload: CreateArticle = {
+      title: titleRef.current.value,
+      introduction: introductionRef.current.value,
+      markdown: markdown,
+      categoryId: Number(categorySelectRef?.current?.getValue()[0]?.value),
+      contentTable: contentTable,
+    };
+    console.log(payload);
+
+    await fetch("/api/articles/", {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      cache: "no-cache",
+      body: JSON.stringify(payload),
+    })
+      .then(handleResponse)
+      .catch(console.error);
+  }
+
+  // App
+  useEffect(() => {
+    const fetchExistingArticle = async () => {
+      const result: Response = await fetch(urlJoin(apiUrl, `articles/${params.articleId}`), {
+        cache: "no-cache",
+        next: { revalidate: 60 * 1 },
+      });
+
+      const article = await result.json();
+      console.log(article);
+      if (article.code == "404") {
+        router.push(urlJoin(`/admin/articles/editor/0`));
+      } else {
+        titleRef.current.value = article.title;
+        introductionRef.current.value = article.introduction;
+        markdownTextAreaRef.current.value = article.markdown;
+        categorySelectRef.current.setValue({ value: article.category.id, label: article.category.title });
+
+        setTitle(article.title);
+        setIntroduction(article.introduction);
+        setMarkdown(article.markdown);
+        setContentTable(article.contentTable);
+      }
+    };
+
+    const fetchCategoryOptions = async () => {
+      const result: Response = await fetch(urlJoin(apiUrl, `categories`), {
+        cache: "no-cache",
+        next: { revalidate: 60 * 1 },
+      });
+
+      const categories = await result.json();
+      let newSelectCategoriesOptions = [];
+
+      categories?.forEach((c) => {
+        newSelectCategoriesOptions.push({ value: c.id, label: c.title });
+      });
+      setSelectCategoriesOptions(newSelectCategoriesOptions);
+    };
+
+    fetchCategoryOptions().catch((err) => {
+      console.log(err);
+    });
+
+    if (params.articleId != "0") {
+      fetchExistingArticle().catch((err) => {
+        console.log(err);
+      });
+    }
+  }, []);
+
+  return (
+    <div className={styles.adminArticlesCreate}>
+      <h1>{params.articleId == "0" ? "Create new article" : "Update article"}</h1>
+      <div className={styles.formControl}>
+        <p className="text-error" ref={errorTextRef}></p>
+        <button
+          type="button"
+          onClick={() => {
+            if (params.articleId != "0") {
+              updateArticle();
+            } else {
+              createArticle();
+            }
+          }}
+        >
+          {params.articleId == "0" ? "Create article" : "Update article"}
+        </button>
+      </div>
+
+      <div className={styles.form}>
+        <div className={styles.articleEditor}>
+          <div className={styles.title}>
+            <label htmlFor="title">Title</label>
+
+            <div className={styles.titleInputs}>
+              <input
+                onChange={handleFormChange}
+                className={!isValidText(title) && title ? "error" : ""}
+                type="text"
+                name="title"
+                placeholder="title"
+                ref={titleRef}
+              />
+              <input
+                readOnly={true}
+                onChange={handleFormChange}
+                className={""}
+                type="text"
+                name="name"
+                value={title ? formatTextToUrlName(title) : ""}
+              />
+            </div>
+          </div>
+          <div className={styles.category}>
+            <label htmlFor="title">Category</label>
+            <Select
+              ref={categorySelectRef}
+              className="react-select-container"
+              classNamePrefix="react-select"
+              onChange={handleFormChange}
+              options={selectCategoriesOptions}
+            />
+          </div>
+          <div className={styles.introduction}>
+            <label htmlFor="title">Introduction</label>
+            <input
+              onChange={handleFormChange}
+              className={!isValidText(introduction) && introduction ? "error" : ""}
+              type="text"
+              name="introduction"
+              placeholder="Introduction"
+              ref={introductionRef}
+            />
+          </div>
+          <div className={styles.markdown}>
+            <label htmlFor="">Markdown Editor</label>
+            <div className={styles.markdownEditor}>
+              <textarea ref={markdownTextAreaRef} onChange={handleFormChange}></textarea>
+              <Markdown value={markdown} />
+            </div>
+          </div>
+
+          <div className={styles.contentTable}>
+            <label htmlFor="">Table of contents</label>
+            <div className={styles.contentTableEditor}>
+              <div className={styles.entries}>
+                {contentTable?.map((entry: IContentTableEntry, i: number) => {
+                  return (
+                    <div key={i}>
+                      <input
+                        onChange={(e) => {
+                          changeContentTableEntryAnchor(i, e.target.value);
+                        }}
+                        type="text"
+                        placeholder={"Anchor"}
+                        defaultValue={entry.anchor}
+                      />
+                      <input
+                        onChange={(e) => {
+                          changeContentTableEntryTitle(i, e.target.value);
+                        }}
+                        type="text"
+                        placeholder={"Title"}
+                        defaultValue={entry.title}
+                      />{" "}
+                      <button
+                        onClick={() => {
+                          removeEntry(i);
+                        }}
+                      >
+                        Remove
+                      </button>
+                    </div>
+                  );
+                })}
+
+                <button
+                  onClick={() => {
+                    setContentTable([...contentTable, { title: "", anchor: "" }]);
+                  }}
+                >
+                  Add
+                </button>
+              </div>
+              <Markdown value={markdown} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/admin/articles/page.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import React from "react";
+
+export default function AdminArticlesPage() {
+  return (
+    <div>
+      <h1>Page to manage articles</h1>
+      <a href="/admin/articles/editor/0">create new article</a> <br />
+      <p>List of existing articles</p>
+    </div>
+  );
+}

app/admin/categories/editor/[categoryId]/layout.tsx

@@ -0,0 +1,3 @@
+export default async function AdminCategoriesEditorLayout({ children }) {
+  return <div>{children}</div>;
+}

app/admin/categories/editor/[categoryId]/page.tsx

@@ -0,0 +1,180 @@
+"use client";
+import React, { useRef, useState } from "react";
+import styles from "../../../../../styles/modules/CategoryEditor.module.scss";
+import { Prisma } from "@prisma/client";
+import "../../../../../styles/inputs.scss";
+import "../../../../../styles/buttons.scss";
+import { formatTextToUrlName } from "../../../../../utils";
+import { isValidText } from "../../../../../validators";
+import { CreateCategory, UpdateCategory } from "../../../../../types/api";
+import urlJoin from "url-join";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { apiUrl } from "../../../../../global";
+
+type CategoryWithSvg = Prisma.CategoryGetPayload<{ include: { svg: true } }>;
+
+export default function AdminCategoriesEditor({ params }: { params: { categoryId: string } }) {
+  const router = useRouter();
+  const [title, setTitle] = useState<string>("");
+  const [color, setColor] = useState<string>("");
+  const [svgViewbox, setSvgViewbox] = useState<string>("");
+  const [svgPath, setSvgPath] = useState<string>("");
+
+  const titleRef = useRef(null);
+  const colorRef = useRef(null);
+  const svgViewboxRef = useRef(null);
+  const svgPathRef = useRef(null);
+  const errorTextRef = useRef(null);
+  function handleFormChange() {
+    setTitle(titleRef.current.value);
+    setColor(colorRef.current.value);
+    setSvgPath(svgPathRef.current.value);
+    setSvgViewbox(svgViewboxRef.current.value);
+  }
+
+  async function handleResponse(res: Response) {
+    const json = await res.json();
+    errorTextRef.current.innerText = json.error ?? "";
+    if (json.success) {
+      router.push(urlJoin(`/articles/`));
+    }
+  }
+
+  async function updateCategory() {
+    console.log("Update category");
+    const payload: UpdateCategory = {
+      id: params.categoryId,
+      title: titleRef.current.value,
+      color: colorRef.current.value,
+      svg: {
+        path: svgPathRef.current.value,
+        viewbox: svgViewboxRef.current.value,
+      },
+    };
+    console.log(payload);
+
+    await fetch("/api/categories/", {
+      method: "PUT",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      cache: "no-cache",
+      body: JSON.stringify(payload),
+    })
+      .then(handleResponse)
+      .catch(console.error);
+  }
+
+  async function createCategory() {
+    console.log("Create category");
+    const payload: CreateCategory = {
+      title: titleRef.current.value,
+      color: colorRef.current.value,
+      svg: {
+        path: svgPathRef.current.value,
+        viewbox: svgViewboxRef.current.value,
+      },
+    };
+    console.log(payload);
+
+    await fetch("/api/categories/", {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      cache: "no-cache",
+      body: JSON.stringify(payload),
+    })
+      .then(handleResponse)
+      .catch(console.error);
+  }
+
+  useEffect(() => {
+    const fetchExistingCategory = async () => {
+      const result: Response = await fetch(urlJoin(apiUrl, `categories/${params.categoryId}`), {
+        cache: "no-cache",
+      });
+
+      const category = await result.json();
+      console.log(category);
+      if (category.code == "404") {
+        router.push(urlJoin(`/admin/categories/editor/0`));
+      } else {
+        titleRef.current.value = category.title;
+        colorRef.current.value = category.color;
+        svgPathRef.current.value = category.svg.path;
+        svgPathRef.current.value = category.svg.viewbox;
+
+        setTitle(category.title);
+        setColor(category.color);
+        setSvgPath(category.svg.path);
+        setSvgViewbox(category.svg.viewbox);
+      }
+    };
+
+    if (params.categoryId != "0") {
+      fetchExistingCategory().catch((err) => {
+        console.log(err);
+      });
+    }
+  }, []);
+
+  return (
+    <div className={styles.categoryEditor}>
+      <h1>{params.categoryId == "0" ? "Create new category" : "Update category"}</h1>
+      <div className={styles.formControl}>
+        <p className="text-error" ref={errorTextRef}></p>
+        <button
+          type="button"
+          onClick={() => {
+            if (params.categoryId != "0") {
+              updateCategory();
+            } else {
+              createCategory();
+            }
+          }}
+        >
+          {params.categoryId == "0" ? "Create category" : "Update category"}
+        </button>
+      </div>
+      <div className={styles.form}>
+        <div className={styles.title}>
+          <label htmlFor="title">Title</label>
+          <div className={styles.titleInputs}>
+            <input
+              onChange={handleFormChange}
+              className={!isValidText(title) && title ? "error" : ""}
+              type="text"
+              name="title"
+              placeholder="title"
+              ref={titleRef}
+            />
+            <input
+              readOnly={true}
+              onChange={handleFormChange}
+              className={""}
+              type="text"
+              name="name"
+              value={title ? formatTextToUrlName(title) : ""}
+            />
+          </div>
+          <div className={styles.svg}>
+            <label>SVG</label>
+            <div className={styles.svgInputs}>
+              <input onChange={handleFormChange} type="text" placeholder="svg path" ref={svgPathRef} />
+              <input onChange={handleFormChange} type="text" placeholder="0 0 512 512" ref={svgViewboxRef} />
+            </div>
+          </div>
+
+          <div className={styles.color}>
+            <label>Color</label>
+            <input onChange={handleFormChange} type="color" ref={colorRef} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/admin/categories/page.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+export default function AdminCategoriesPage() {
+  return (
+    <div>
+      <h1>Page to manage categories</h1>
+      <a href="/admin/categories/editor/0">create new category</a> <br />
+      <p>List of existing category</p>
+    </div>
+  );
+}

app/admin/images/Gallery.tsx

@@ -0,0 +1,26 @@
+"use client";
+import React, { useState } from "react";
+import { Gallery as ReactGridGallery, Image as ImageType, ThumbnailImageProps } from "react-grid-gallery";
+import Image from "next/image";
+const ImageComponent = (props: ThumbnailImageProps) => {
+  const { src, alt, style, title } = props.imageProps;
+  const { width, height } = props.item;
+
+  return (
+    <Image
+      alt={alt}
+      src={src}
+      title={title || ""}
+      width={width}
+      height={height}
+      onClick={() => {
+        window.open(src);
+      }}
+      style={style}
+    />
+  );
+};
+
+export default function Gallery({ images }: { images: ImageType[] }) {
+  return <ReactGridGallery images={images} enableImageSelection={false} thumbnailImageComponent={ImageComponent} />;
+}

app/admin/images/page.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Image } from "@prisma/client";
+import { Image as GalleryImage } from "react-grid-gallery";
+import urlJoin from "url-join";
+import { apiUrl } from "../../../global";
+import Gallery from "./Gallery";
+
+async function getImages(): Promise<GalleryImage[]> {
+  const result = await fetch(urlJoin(apiUrl, `images`), {
+    cache: "no-cache",
+  });
+  const imageData: Image[] = await result.json();
+
+  return imageData.map((img, i) => ({
+    width: img.width,
+    height: img.height,
+    src: img.url,
+    caption: img.name,
+  }));
+}
+
+export default async function AdminImagesPage() {
+  return <Gallery images={await getImages()} />;
+}

app/admin/page.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+export default function AdminPage() {
+  return (
+    <div>
+      <h1>AdminPage to manage explainegy</h1>
+      <a href="/admin/articles/">articles</a> <a href="/admin/categories/">categories</a> <br />
+    </div>
+  );
+}

app/articles/[categoryName]/[articleName]/head.tsx

@@ -0,0 +1,13 @@
+import { Article } from "@prisma/client";
+import { FetchManager } from "../../../../manager/fetchManager";
+
+export default async function ArticleHead({ params }: { params: { articleName: string; categoryName: string } }) {
+  const articleName: string = params.articleName;
+  const article: Article = await FetchManager.Article.getByName(articleName);
+  return (
+    <>
+      <title>{article?.title}</title>
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+    </>
+  );
+}

app/articles/[categoryName]/[articleName]/layout.tsx

@@ -0,0 +1,3 @@
+export default function ArticleLayout({ children }) {
+  return <div>{children}</div>;
+}

app/articles/[categoryName]/[articleName]/page.tsx

@@ -0,0 +1,63 @@
+import ContentTable from "../../../../components/ContentTable";
+import Sidebar from "../../../../components/Sidebar";
+import styles from "../../../../styles/modules/Article.module.scss";
+import Image from "next/image";
+import Markdown from "../../../../components/Markdown";
+import { ArticleWithIncludes, FetchManager } from "../../../../manager/fetchManager";
+import { formatTextToUrlName } from "../../../../utils";
+
+//* MAIN
+export default async function ArticlePage({ params }: { params: { articleName: string; categoryName: string } }) {
+  const articleName: string = formatTextToUrlName(params.articleName);
+  const article: ArticleWithIncludes = await FetchManager.Article.getByName(articleName);
+
+  const dateUpdated: Date = new Date(article.dateUpdated);
+  const dateCreated: Date = new Date(article.dateCreated);
+  const dateOptions: Intl.DateTimeFormatOptions = { month: "long", day: "numeric", year: "numeric" };
+  const markdown: string = article?.markdown ?? "";
+
+  return (
+    <div className={styles.article}>
+      <ContentTable contentTableData={article.contentTable ? article.contentTable : []} />
+      <div className={styles.tutorialContent}>
+        <div className={styles.header}>
+          <p className={`${styles.dates} text-muted`}>
+            {`Published on ${dateCreated.toLocaleDateString("en-US", dateOptions)}`}
+            <br />
+            {dateUpdated > dateCreated ? `Updated on ${dateUpdated.toLocaleDateString("en-US", dateOptions)}` : ""}
+          </p>
+
+          <h1>{article?.title}</h1>
+          <div className={styles.tags}>
+            <a href="#">Docker</a> <a href="#">Setup</a> <a href="#">Ubuntu</a>
+          </div>
+          <Image
+            src={article?.image?.url ?? ""}
+            height={350}
+            width={750}
+            alt={article?.image?.alt ?? ""}
+            quality={100}
+            placeholder="blur"
+            blurDataURL="/images/blur.png"
+            loading="lazy"
+          />
+          <p>{article?.introduction}</p>
+        </div>
+        <Markdown value={markdown} />
+      </div>
+      <Sidebar />
+    </div>
+  );
+}
+
+export async function generateStaticParams() {
+  // Fetchmanager does not work here
+  const articles: ArticleWithIncludes[] = await FetchManager.Article.list(false);
+
+  return await Promise.all(
+    articles.map(async (article) => ({
+      categoryName: article.category?.name ?? "",
+      articleName: article.name ?? "",
+    }))
+  );
+}

app/articles/[categoryName]/page.tsx

@@ -0,0 +1,97 @@
+import styles from "../../../styles/modules/Category.module.scss";
+import Link from "next/link";
+import { apiUrl } from "../../../global";
+import { Article, Category } from "@prisma/client";
+import urlJoin from "url-join";
+
+async function GetAllArticles(categoryName: string): Promise<any> {
+  const result: Response = await fetch(urlJoin(apiUrl, `articles?categoryName=${categoryName}`), {
+    cache: "force-cache",
+    next: { revalidate: 3600 },
+  });
+  return result.json();
+}
+
+async function GetPopularArticles(categoryName: string): Promise<any> {
+  const result: Response = await fetch(
+    urlJoin(apiUrl, `articles?categoryName=${categoryName}&limit=6&orderBy=popularity`),
+    {
+      cache: "force-cache",
+      next: { revalidate: 3600 },
+    }
+  );
+  return result.json();
+}
+
+async function GetRecentArticles(categoryName: string): Promise<any> {
+  const result: Response = await fetch(
+    urlJoin(apiUrl, `articles?categoryName=${categoryName}&limit=6&orderBy=recent`),
+    {
+      cache: "force-cache",
+      next: { revalidate: 3600 },
+    }
+  );
+  return result.json();
+}
+
+async function GetCategory(categoryName: string): Promise<any> {
+  const result: Response = await fetch(urlJoin(apiUrl, `categories/name/${categoryName}`), {
+    cache: "force-cache",
+    next: { revalidate: 3600 },
+  });
+  return result.json();
+}
+
+export default async function CategoryPage({ params }: { params: { categoryName: string } }) {
+  const categoryName = params.categoryName.toLowerCase().replaceAll("%20", " ");
+  const category: Category = await GetCategory(categoryName);
+  const allArticles: Article[] = await GetAllArticles(categoryName);
+  const popularArticles: Article[] = await GetPopularArticles(categoryName);
+  const recentArticles: Article[] = await GetRecentArticles(categoryName);
+
+  return (
+    <div className={styles.category}>
+      <h1>{category?.title}</h1>
+      <div className={styles.content}>
+        <div className={`${styles.showcase} ${styles.smallShowcase}`}>
+          <h2>Most popular articles</h2>
+          {popularArticles?.map((a, i) => {
+            {
+              return (
+                <Link key={i} href={`/articles/${category.name}/${a.name}`}>
+                  {a.title}
+                </Link>
+              );
+            }
+          })}
+        </div>
+
+        {/* <div className={`${styles.showcase} ${styles.smallShowcase}`}>
+					<h2>Most recent articles</h2>
+					{recentArticles?.map((a, i) => {
+						{
+							return (
+								<Link key={i} href={`/articles/${category.name}/${a.name}`}>
+									{a.name}
+								</Link>
+							);
+						}
+					})}
+				</div> */}
+
+        <div className={styles.showcase}>
+          <h2>All articles</h2>
+          {allArticles?.map((a, i) => {
+            {
+              return (
+                <Link key={i} href={`/articles/${category.name}/${a.name}`}>
+                  {a.title}
+                </Link>
+              );
+            }
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

app/articles/page.tsx

@@ -0,0 +1,33 @@
+import styles from "../../styles/modules/CategoryList.module.scss";
+import Link from "next/link";
+
+import { FetchManager } from "../../manager/fetchManager";
+
+export default async function CategoryList() {
+  const categories = await FetchManager.Category.list();
+  return (
+    <div className={styles.categoryList}>
+      <h1>Overview</h1>
+      <div className={styles.content}>
+        <div className={styles.grid}>
+          {categories?.length > 0
+            ? categories.map((cat, i) => {
+                return (
+                  <div key={i} className={styles.linkContainer}>
+                    <Link href={`/articles/${cat.name.toLowerCase()}`} style={{ backgroundColor: cat.color }}>
+                      <div className={styles.svgContainer}>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox={cat?.svg?.viewbox}>
+                          <path d={cat?.svg?.path} />
+                        </svg>
+                      </div>
+                      {cat.title}
+                    </Link>
+                  </div>
+                );
+              })
+            : "We did not find any categories"}
+        </div>
+      </div>
+    </div>
+  );
+}

app/head.tsx

@@ -0,0 +1,7 @@
+export default async function RootHead() {
+  return (
+    <>
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+    </>
+  );
+}

app/layout.tsx

@@ -0,0 +1,26 @@
+import "../styles/globals.scss";
+import "../styles/variables_colors.scss";
+import "../styles/variables.scss";
+import Link from "next/link";
+import Footer from "../components/Footer";
+import Nav from "../components/Nav";
+import { FetchManager } from "../manager/fetchManager";
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html style={{ scrollBehavior: "smooth" }}>
+      <head></head>
+
+      <body className="body">
+        <div>
+          <Link href={"/admin"}> Admin</Link>
+        </div>
+        <header>
+          <Nav categories={await FetchManager.Category.list()} />
+        </header>
+        <main>{children}</main>
+        <Footer />
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,3 @@
+export default function HomePage() {
+  return <h1>Home</h1>;
+}

app/testing/typography/page.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+export default function TypograhyPage() {
+  return (
+    <div>
+      <h1>Testing this headline</h1>
+      <h2>Testing this headline</h2>
+      <h3>Testing this headline</h3>
+      <h4>Testing this headline</h4>
+      <h5>Testing this headline</h5>
+      <h6>Testing this headline</h6>
+      <br />
+      <p>
+        This is a paragraph Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores enim unde obcaecati ea
+        harum voluptate, nisi quia. Quod, et autem! Aperiam mollitia ullam ab eaque quidem facilis est ducimus delectus.
+      </p>
+      <br />
+      <a href="#">This is a link</a>
+    </div>
+  );
+}

components/ContentTable.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import styles from "../styles/modules/ArticleContentTable.module.scss";
+
+export default function ContentTable({ contentTableData }: { contentTableData: any }) {
+  return (
+    <div className={styles.articleContentTable}>
+      <div className={styles.stickyContainer}>
+        <div className={styles.list}>
+          <h2>Contents</h2>
+          {contentTableData?.map((e, i) => {
+            return (
+              <a key={i} href={"#" + e.anchor}>
+                {e.title}
+              </a>
+            );
+          })}
+        </div>
+        {contentTableData?.length < 15 ? <div className={styles.adContainer}>Future advertisement</div> : ""}
+      </div>
+    </div>
+  );
+}

components/Footer.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import styles from "../styles/modules/Footer.module.scss";
+import Image from "next/image";
+export default function Footer() {
+	return (
+		<footer className={styles.footer}>
+			<div className={styles.adContainer}>Future advertisement</div>
+			<div className={styles.content}>
+				<div className={styles.company}>
+					<Image
+						src={"/images/logo.svg"}
+						width={190}
+						height={52}
+						alt={"Logo"}
+					/>
+					<h1>Simple tutorials for everyone!</h1>
+				</div>
+				<div className={styles.links}>
+					<div className={styles.grid}>
+						<a href="#">Tutorials</a>
+						<a href="#">Contact</a>
+						<a href="#">About</a>
+
+						<a></a>
+						<a href="#">Report Bug</a>
+						<a href="#">Legal</a>
+
+						<a></a>
+						<a href="#">Feedback</a>
+						<a href="#">Privacy</a>
+
+						<a></a>
+						<a></a>
+						<a href="#">Cookies</a>
+					</div>
+				</div>
+			</div>
+		</footer>
+	);
+}

components/Markdown.tsx

@@ -0,0 +1,76 @@
+"use client";
+import PropTypes from "prop-types";
+import ReactMarkdown from "react-markdown";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import oneDark from "react-syntax-highlighter/dist/esm/styles/prism/one-dark";
+import oneLight from "react-syntax-highlighter/dist/esm/styles/prism/one-light";
+import styles from "../styles/modules/markdown.module.scss";
+import remarkGfm from "remark-gfm";
+import remarkGemoji from "remark-gemoji";
+import remarkStringify from "remark-stringify";
+
+import React from "react";
+
+import { formatTextToUrlName } from "../utils";
+
+function flatten(text, child) {
+  return typeof child === "string" ? text + child : React.Children.toArray(child.props.children).reduce(flatten, text);
+}
+
+function HeadingRenderer({ children, level }) {
+  children = React.Children.toArray(children);
+  const text = children.reduce(flatten, "");
+  return React.createElement("h" + level, { id: formatTextToUrlName(text) }, children);
+}
+
+export default function Markdown({ value }: { value: any }) {
+  return (
+    <div>
+      <ReactMarkdown
+        className={styles.markdown}
+        //@ts-ignore
+        remarkPlugins={[remarkGfm, remarkGemoji, remarkStringify]}
+        //@ts-ignore
+        components={{
+          h1: HeadingRenderer,
+          h2: HeadingRenderer,
+          h3: HeadingRenderer,
+          h4: HeadingRenderer,
+          h5: HeadingRenderer,
+          h6: HeadingRenderer,
+          code({ node, inline, className, children, ...props }) {
+            const match = /language-(\w+)/.exec(className || "");
+            return !inline ? (
+              <>
+                <div className={styles.toolbar}>
+                  <div
+                    onClick={() => {
+                      navigator.clipboard.writeText(String(children).replace(/\n$/, ""));
+                    }}
+                    className={styles.copyBtn}
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                      <path d="M502.6 70.63l-61.25-61.25C435.4 3.371 427.2 0 418.7 0H255.1c-35.35 0-64 28.66-64 64l.0195 256C192 355.4 220.7 384 256 384h192c35.2 0 64-28.8 64-64V93.25C512 84.77 508.6 76.63 502.6 70.63zM464 320c0 8.836-7.164 16-16 16H255.1c-8.838 0-16-7.164-16-16L239.1 64.13c0-8.836 7.164-16 16-16h128L384 96c0 17.67 14.33 32 32 32h47.1V320zM272 448c0 8.836-7.164 16-16 16H63.1c-8.838 0-16-7.164-16-16L47.98 192.1c0-8.836 7.164-16 16-16H160V128H63.99c-35.35 0-64 28.65-64 64l.0098 256C.002 483.3 28.66 512 64 512h192c35.2 0 64-28.8 64-64v-32h-47.1L272 448z" />
+                    </svg>
+                  </div>
+                </div>
+
+                <SyntaxHighlighter style={oneDark} language={match ? match[1] : ""} PreTag="div" {...props}>
+                  {String(children).replace(/\n$/, "")}
+                </SyntaxHighlighter>
+              </>
+            ) : (
+              <code>{children}</code>
+            );
+          },
+        }}
+      >
+        {value}
+      </ReactMarkdown>
+    </div>
+  );
+}
+
+Markdown.propTypes = {
+  value: PropTypes.string.isRequired,
+};

components/Nav.tsx

@@ -0,0 +1,135 @@
+"use client";
+import styles from "../styles/modules/Nav.module.scss";
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { Category } from "@prisma/client";
+
+function switchTheme(theme) {
+  const bodyElement = document.getElementsByTagName("body")[0];
+
+  if (theme == "dark") {
+    bodyElement.classList.remove("theme-light");
+  } else {
+    bodyElement.classList.add("theme-light");
+  }
+}
+
+function toggleTheme() {
+  const svgElement = document.getElementById("themeSwitchSvg");
+
+  if (localStorage.getItem("theme") == "light") {
+    svgElement.style.animationDirection = "normal";
+    svgElement.style.animationName = styles.spinThemeSwitch;
+  } else {
+    svgElement.style.animationDirection = "reverse";
+    svgElement.style.animationName = styles.spinThemeSwitch;
+  }
+
+  setTimeout(() => {
+    if (localStorage.getItem("theme") == "light") {
+      localStorage.setItem("theme", "dark");
+      switchTheme("dark");
+    } else {
+      localStorage.setItem("theme", "light");
+      switchTheme("light");
+    }
+    svgElement.style.animationName = "";
+  }, 150);
+}
+
+export default function Nav({ categories }: { categories: Category[] }) {
+  const [searchResults, setSearchResults] = useState([]);
+
+  async function handleSearchInput(event) {
+    const query = event.target.value;
+    let result = await fetch(`/api/search?q=${query}`);
+    let json = await result.json();
+
+    if (json.length == 0 && query.length > 0) {
+      setSearchResults([{ name: "", title: "No article found..." }]);
+    } else {
+      setSearchResults(json);
+    }
+  }
+
+  useEffect(() => {
+    if (localStorage.getItem("theme") == "dark") {
+      switchTheme("dark");
+    } else {
+      switchTheme("light");
+    }
+  }, []);
+
+  useEffect(() => {
+    console.log(searchResults);
+  }, [searchResults]);
+
+  return (
+    <nav className={styles.nav}>
+      <div className={styles.containerLeft}>
+        <Image
+          src={"/images/logo.svg"}
+          height={40}
+          width={160}
+          alt="Nav bar logo"
+          onClick={() => {
+            window.open("/", "_self");
+          }}
+          className={styles.logo}
+        />
+        <div className={styles.links}>
+          <div className={styles.dropDown}>
+            <Link href="/articles">Categories</Link>
+            <div className={styles.dropDownContainer}>
+              <div className={styles.content}>
+                <Link href={"/articles"}>All</Link>
+
+                {categories?.map((cat, i) => {
+                  {
+                    return (
+                      <Link key={i} href={`/articles/${cat.name.toLowerCase()}`}>
+                        {cat.title}
+                      </Link>
+                    );
+                  }
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className={styles.containerCenter}>
+        <div className={styles.searchBar}>
+          <div className={styles.icon}>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+              <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352c79.5 0 144-64.5 144-144s-64.5-144-144-144S64 128.5 64 208s64.5 144 144 144z" />
+            </svg>
+          </div>
+          <input onInput={handleSearchInput} type="text" name="" id="" />
+        </div>
+        <div className={styles.searchResults}>
+          <div className={styles.content}>
+            {searchResults.map((s) => {
+              {
+                return <Link href={`/articles/${s.name.toLowerCase()}`}>{s.title}</Link>;
+              }
+            })}
+          </div>
+        </div>
+      </div>
+      <div className={styles.containerRight}>
+        <div
+          className={styles.themeSwitch}
+          onClick={() => {
+            toggleTheme();
+          }}
+        >
+          <svg id="themeSwitchSvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <path d="M448 256c0-106-86-192-192-192V448c106 0 192-86 192-192zm64 0c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512 114.6 512 256z" />
+          </svg>
+        </div>
+      </div>
+    </nav>
+  );
+}

components/Sidebar.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import styles from "../styles/modules/Sidebar.module.scss";
+export default function Sidebar() {
+  return (
+    <div className={styles.sidebar}>
+      <div className={styles.stickyContainer}>
+        <div className={styles.sidebarContainer}>
+          <h3>Popular</h3>
+          <a href="#"> Set up Docker</a>
+          <a href="#"> Set up Docker</a>
+          <a href="#"> Set up Docker</a>
+          <a href="#"> Set up Docker</a>
+          <a href="#"> Set up Docker</a>
+        </div>
+
+        <div className={styles.sidebarContainer}>
+          <h3>Related</h3>
+          <a href="#"> Set up Docker</a>
+          <a href="#"> Set up Docker</a>
+          <a href="#"> Set up Docker</a>
+          <a href="#"> Set up Docker</a>
+          <a href="#"> Set up Docker</a>
+        </div>
+        <div className={styles.adContainer}>Future advertisement</div>
+      </div>
+    </div>
+  );
+}

docker-compose.yml

@@ -0,0 +1,34 @@
+version: "3.9"
+volumes:
+  explainegy_pg:
+services:
+  postgres:
+    image: postgres:latest
+    container_name: explainegy_postgres
+    volumes:
+      - explainegy_pg:/var/lib/postgresql/data
+    environment:
+      - POSTGRES_DB=postgres
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=postgres
+      - ALLOW_IP_RANGE=0.0.0.0/0
+    ports:
+      - "5432:5432"
+    restart: always
+    healthcheck:
+      test: "exit 0"
+
+  pgadmin:
+    image: dpage/pgadmin4:latest
+    container_name: explainegy_pgadmin
+    restart: always
+    environment:
+      PGADMIN_DEFAULT_EMAIL: admin@admin.com #the username to login to pgadmin
+      PGADMIN_DEFAULT_PASSWORD: admin # the password to login to pgadmin
+    ports:
+      - "5050:80"
+    volumes:
+      - ./docker_data/servers.json:/pgadmin4/servers.json # preconfigured servers/connections
+      - ./docker_data/pgpass:/pgpass # passwords for the connections in this file
+    depends_on:
+      - "postgres"

docker_data/pgpass

@@ -0,0 +1 @@
+host.docker.internal:5432:postgres:postgres:postgres

docker_data/servers.json

@@ -0,0 +1,14 @@
+{
+  "Servers": {
+    "1": {
+      "Name": "explainegy_postgres",
+      "Group": "explainegy_postgres_group",
+      "Host": "host.docker.internal",
+      "Port": 5432,
+      "MaintenanceDB": "postgres",
+      "Username": "postgres",
+      "PassFile": "/pgpass",
+      "SSLMode": "prefer"
+    }
+  }
+}

global.ts

@@ -0,0 +1,3 @@
+//! Using this because publicRuntimeConfig is not implemented in appDir yet
+
+export const apiUrl: string = "http://localhost:3000/api/";

lib/prisma.ts

@@ -0,0 +1,14 @@
+import { PrismaClient } from '@prisma/client';
+
+let prisma: PrismaClient;
+
+if (process.env.NODE_ENV === 'production') {
+  prisma = new PrismaClient();
+} else {
+  if (!global.prisma) {
+    global.prisma = new PrismaClient();
+  }
+  prisma = global.prisma;
+}
+
+export default prisma;

manager/fetchManager.ts

@@ -0,0 +1,77 @@
+import { Article, Category } from '@prisma/client';
+import { Prisma } from "@prisma/client";
+import urlJoin from "url-join";
+import { apiUrl } from "../global";
+
+const GLOBAL_NO_CACHE: boolean = true;
+export type ArticleWithIncludes = Prisma.ArticleGetPayload<{ include: { category: true, image: true } }>
+export type CategoryWithIncludes = Prisma.CategoryGetPayload<{ include: { svg: true } }>
+
+export interface FetchError {
+  code: number;
+  message?: string;
+  data?: any;
+}
+
+export class FetchManager {
+
+
+  static Article = class {
+    static async list(noCache: boolean = false): Promise<ArticleWithIncludes[]> {
+      const response = await fetch(urlJoin(apiUrl, `articles`), {
+        cache: GLOBAL_NO_CACHE || noCache ? "no-cache" : "force-cache",
+        next: { revalidate: 60 * 10 },
+      })
+      return await response.json()
+    }
+
+    static async get(id: string, noCache: boolean = false): Promise<ArticleWithIncludes> {
+      const response = await fetch(urlJoin(apiUrl, `articles/${id}`), {
+        cache: GLOBAL_NO_CACHE || noCache ? "no-cache" : "force-cache",
+        next: { revalidate: 60 * 10 },
+      })
+
+      return await response.json()
+    }
+
+    static async getByName(name: string, noCache: boolean = false): Promise<ArticleWithIncludes> {
+
+      const response = await fetch(urlJoin(apiUrl, `articles/name/${name}`), {
+        cache: GLOBAL_NO_CACHE || noCache ? "no-cache" : "force-cache",
+        next: { revalidate: 60 * 10 },
+      })
+      return await response.json()
+    }
+  }
+
+
+  static Category = class {
+    static async list(noCache: boolean = false): Promise<CategoryWithIncludes[]> {
+      const response = await fetch(urlJoin(apiUrl, `categories`), {
+        cache: GLOBAL_NO_CACHE || noCache ? "no-cache" : "force-cache",
+        next: { revalidate: 60 * 10 },
+      })
+      return await response.json()
+    }
+
+    static async get(id: string, noCache: boolean = false): Promise<CategoryWithIncludes> {
+      const response = await fetch(urlJoin(apiUrl, `categories/${id}`), {
+        cache: GLOBAL_NO_CACHE || noCache ? "no-cache" : "force-cache",
+        next: { revalidate: 60 * 10 },
+      })
+
+      return await response.json()
+    }
+
+    static async getByName(name: string, noCache: boolean = false): Promise<CategoryWithIncludes> {
+
+      const response = await fetch(urlJoin(apiUrl, `categories/name/${name}`), {
+        cache: GLOBAL_NO_CACHE || noCache ? "no-cache" : "force-cache",
+        next: { revalidate: 60 * 10 },
+      })
+      return await response.json()
+    }
+  }
+
+}
+

next.config.js

@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    appDir: true,
+  },
+};
+
+module.exports = nextConfig;

package.json

@@ -0,0 +1,51 @@
+{
+  "name": "explainegy",
+  "version": "0.2.0",
+  "private": true,
+  "scripts": {
+    "prisma": "prisma generate && prisma db push && prisma studio",
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "vercel-build": "prisma generate && prisma db push && next build",
+    "prisma:generate": "prisma generate"
+  },
+  "dependencies": {
+    "@next/font": "13.0.7",
+    "@prisma/client": "^4.8.0",
+    "@types/express": "^4.17.15",
+    "@types/marked": "^4.0.8",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.9",
+    "encoding": "^0.1.13",
+    "eslint": "8.30.0",
+    "eslint-config-next": "13.0.7",
+    "marked": "^4.2.4",
+    "next": "^13.1.6",
+    "prismjs": "^1.29.0",
+    "react": "18.2.0",
+    "react-code-blocks": "^0.0.9-0",
+    "react-dom": "18.2.0",
+    "react-grid-gallery": "^1.0.0",
+    "react-markdown": "^8.0.4",
+    "react-select": "^5.7.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "reflect-metadata": "^0.1.13",
+    "remark-code-blocks": "^2.0.1",
+    "remark-codesandbox": "^0.10.1",
+    "remark-emoji": "^3.0.2",
+    "remark-gemoji": "^7.0.1",
+    "remark-gfm": "^3.0.1",
+    "remark-stringify": "^10.0.2",
+    "sass": "^1.57.0",
+    "typescript": "4.9.4",
+    "url-join": "^5.0.0"
+  },
+  "devDependencies": {
+    "@fec/remark-a11y-emoji": "^3.1.0",
+    "@types/node": "^18.11.17",
+    "@types/prismjs": "^1.26.0",
+    "prisma": "^4.8.0"
+  }
+}

pages/api/articles/[articleId].ts

@@ -0,0 +1,38 @@
+import { Prisma, Article } from "@prisma/client";
+import { Request, Response } from "express";
+import { ResponseError } from "../../../types/responseErrors";
+import { formatTextToUrlName } from "../../../utils";
+import prisma from "../../../lib/prisma";
+
+
+type ArticleWithIncludes = Prisma.ArticleGetPayload<{ include: { contentTableEntries: true, category: true, image: true } }>
+
+
+
+export default async function handler(req: Request, res: Response) {
+  res.setHeader("Content-Type", "application/json");
+
+  const articleId: string = formatTextToUrlName(req.query.articleId.toString())
+
+  await prisma.article
+    .findUnique({ where: { id: articleId }, include: { category: true, image: true } })
+    .then((result: ArticleWithIncludes) => {
+      if (result !== null) {
+        res.end(JSON.stringify(result));
+      } else {
+        const error: ResponseError = {
+          code: "404",
+          message: "No article with this name found!",
+        };
+        res.status(404).send(JSON.stringify(error));
+      }
+    })
+    .catch((err) => {
+
+      const error: ResponseError = {
+        code: "500",
+        message: err,
+      };
+      res.status(500).send(JSON.stringify(error));
+    });
+}

pages/api/articles/index.ts

@@ -0,0 +1,141 @@
+import { Request, Response } from "express";
+import prisma from "../../../lib/prisma";
+//@ts-ignore
+import { Prisma } from "@prisma/client";
+//@ts-ignore
+import { Article, Category } from "@prisma/client";
+import { ResponseError } from "../../../types/responseErrors";
+import { formatTextToUrlName } from "../../../utils";
+import { isValidText } from "../../../validators";
+import { title } from 'process';
+import { UpdateArticle } from "../../../types/api";
+
+export default async function handler(req: Request, res: Response) {
+  res.setHeader("Content-Type", "application/json");
+
+  if (req.method == "GET") {
+    const categoryName: string = req.query.categoryName?.toString() ?? "";
+    const limit: number = req.query.limit ? Number(req.query.limit) : undefined;
+    const orderBy: string = req.query.orderBy?.toString() ?? "";
+
+    const category = await prisma.category.findUnique({ where: { name: categoryName } });
+
+    let orderByObj: Prisma.Enumerable<Prisma.ArticleOrderByWithRelationInput>;
+
+    if (orderBy === "recent") {
+      orderByObj = {
+        dateCreated: "desc"
+      }
+    } else if (orderBy === "popularity") {
+
+    }
+
+
+    await prisma.article
+      .findMany({
+        where: { category: categoryName.length > 0 ? category : undefined },
+        include: { category: true },
+        take: limit,
+        orderBy: orderByObj
+      })
+      .then((result: Article[]) => { //! ContentTableEntries not sorted
+        if (result !== null) {
+          res.end(JSON.stringify(result));
+        } else {
+          const error: ResponseError = {
+            code: "404",
+            message: "No articles found!",
+          };
+          res.status(404).send(JSON.stringify(error));
+        }
+      })
+      .catch((err) => {
+        const error: ResponseError = {
+          code: "500",
+          message: err,
+        };
+        res.status(500).send(JSON.stringify(error));
+      });
+  } else if (req.method == "POST") {
+    const data: any = req.body;
+
+    if (!isValidText(data.title)) {
+      res.send(JSON.stringify({ target: "title", error: "Not a valid title" }));
+      return;
+    }
+
+    if (!isValidText(data.introduction)) {
+      res.send(JSON.stringify({ target: "introduction", error: "Not a valid introduction" }));
+      return;
+    }
+
+    if (!data.categoryId) {
+      res.send(JSON.stringify({ target: "category", error: "Category is required" }));
+      return;
+    }
+
+    data.name = formatTextToUrlName(data.title);
+    prisma.article
+      .create({ data: data, include: { category: true } })
+      .then(
+        (data) => {
+          res.send(JSON.stringify({ success: true, data: data }));
+        },
+        (errorReason) => {
+          if (errorReason.code === "P2002") {
+            res.send(JSON.stringify({ target: errorReason.meta.target[0], error: "Already exists" }));
+          }
+        }
+      )
+      .catch((err) => {
+        console.error(err);
+        res.sendStatus(500).end();
+      });
+  } else if (req.method == "PUT") {
+    const data: UpdateArticle = req.body;
+
+    if (!isValidText(data.title)) {
+      res.send(JSON.stringify({ target: "title", error: "Not a valid title" }));
+      return;
+    }
+
+    if (!isValidText(data.introduction)) {
+      res.send(JSON.stringify({ target: "introduction", error: "Not a valid introduction" }));
+      return;
+    }
+
+    if (!data.categoryId) {
+      res.send(JSON.stringify({ target: "category", error: "Category is required" }));
+      return;
+    }
+
+    const newArticle: Prisma.ArticleUncheckedUpdateInput = {
+      title: data.title,
+      name: formatTextToUrlName(data.title),
+      introduction: data.introduction,
+      //@ts-ignore
+      categoryId: data.categoryId,
+      contentTable: data.contentTable,
+      markdown: data.markdown,
+      //@ts-ignore
+      imageId: data.imageId,
+    }
+
+    await prisma.article.update({ data: newArticle, where: { id: data.id }, include: { category: true } })
+      .then(
+        (data) => {
+          res.send(JSON.stringify({ success: true, data: data }));
+        },
+        (errorReason) => {
+          if (errorReason.code === "P2002") {
+            res.send(JSON.stringify({ target: errorReason.meta.target[0], error: "Already exists" }));
+          }
+        }
+      )
+      .catch((err) => {
+        console.error(err);
+        res.sendStatus(500).end();
+      });
+  }
+
+}

pages/api/articles/name/[articleName].ts

@@ -0,0 +1,37 @@
+import { Request, Response } from "express";
+import prisma from "../../../../lib/prisma";
+import { Prisma } from '@prisma/client';
+import { ResponseError } from "../../../../types/responseErrors";
+import { formatTextToUrlName } from "../../../../utils";
+
+type ArticleWithIncludes = Prisma.ArticleGetPayload<{ include: { contentTableEntries: true, category: true, image: true } }>
+
+
+
+export default async function handler(req: Request, res: Response) {
+  res.setHeader("Content-Type", "application/json");
+
+  const articleName: string = formatTextToUrlName(req.query.articleName.toString())
+
+  await prisma.article
+    .findUnique({ where: { name: articleName }, include: { category: true, image: true } })
+    .then((result: ArticleWithIncludes) => {
+      if (result !== null) {
+        res.end(JSON.stringify(result));
+      } else {
+        const error: ResponseError = {
+          code: "404",
+          message: "No article with this name found!",
+        };
+        res.status(404).send(JSON.stringify(error));
+      }
+    })
+    .catch((err) => {
+
+      const error: ResponseError = {
+        code: "500",
+        message: err,
+      };
+      res.status(500).send(JSON.stringify(error));
+    });
+}

pages/api/categories/[categoryId].ts

@@ -0,0 +1,31 @@
+import { Request, Response } from "express";
+import prisma from "../../../lib/prisma";
+import { Category } from "@prisma/client";
+import { ResponseError } from "../../../types/responseErrors";
+
+export default async function handler(req: Request, res: Response) {
+  res.setHeader("Content-Type", "application/json");
+
+  const categoryId: string = req.query.categoryId.toString() ?? undefined;
+
+  await prisma.category
+    .findUnique({ where: { id: categoryId }, include: { svg: true } })
+    .then((result: Category) => {
+      if (result !== null) {
+        res.end(JSON.stringify(result));
+      } else {
+        const error: ResponseError = {
+          code: "404",
+          message: "No category with this id found!",
+        };
+        res.status(404).send(JSON.stringify(error));
+      }
+    })
+    .catch((err) => {
+      const error: ResponseError = {
+        code: "500",
+        message: err,
+      };
+      res.status(500).send(JSON.stringify(error));
+    });
+}

pages/api/categories/index.ts

@@ -0,0 +1,129 @@
+import { Request, Response } from "express";
+import prisma from "../../../lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Category, Svg } from "@prisma/client";
+import { ResponseError } from "../../../types/responseErrors";
+import { formatTextToUrlName } from "../../../utils";
+import { isValidText } from "../../../validators";
+import { title } from "process";
+
+export default async function handler(req: Request, res: Response) {
+  res.setHeader("Content-Type", "application/json");
+
+  if (req.method == "GET") {
+    await prisma.category
+      .findMany({ include: { svg: true } })
+      .then((result: Category[]) => {
+        if (result !== null) {
+          res.end(JSON.stringify(result));
+        } else {
+          console.log("No categories found");
+          res.end(JSON.stringify([]));
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+        res.end(JSON.stringify([]));
+      });
+  } else if (req.method == "POST") {
+    const data: any = req.body;
+    if (!isValidText(data.title)) {
+      res.send(JSON.stringify({ target: "title", error: "Not a valid title" }));
+      return;
+    }
+
+    data.name = formatTextToUrlName(data.title);
+    data.svg.viewbox = data.svg.viewbox.length > 1 ? data.svg.viewbox : null;
+    console.log(data);
+
+    await prisma.svg
+      .create({ data: data.svg })
+      .then(
+        async (svgData) => {
+          await prisma.category
+            .create({
+              data: { title: data.title, name: data.name, color: data.name, svgId: svgData.id },
+              include: { svg: true },
+            })
+            .then(
+              (data) => {
+                res.send(JSON.stringify({ success: true, data: data }));
+              },
+              (errorReason) => {
+                if (errorReason.code === "P2002") {
+                  res.send(JSON.stringify({ target: errorReason.meta.target[0], error: "Already exists" }));
+                }
+              }
+            )
+            .catch((err) => {
+              console.error(err);
+              res.sendStatus(500).end();
+            });
+        },
+        (errorReason) => {
+          res.sendStatus(500).end(errorReason);
+        }
+      )
+      .catch((err) => {
+        console.error(err);
+        res.sendStatus(500).end();
+      });
+  } else if (req.method == "PUT") {
+    const data: any = req.body;
+    if (!isValidText(data.title)) {
+      res.send(JSON.stringify({ target: "title", error: "Not a valid title" }));
+      return;
+    }
+
+    data.name = formatTextToUrlName(data.title);
+
+    console.log(data);
+    const newSvg: Prisma.SvgUncheckedUpdateInput = {
+      viewbox: data.svg.viewbox,
+      path: data.svg.path,
+    };
+
+    const newCategory: Prisma.CategoryUncheckedUpdateInput = {
+      title: data.title,
+      name: data.name,
+      color: data.color,
+    };
+
+    await prisma.category
+      .update({
+        data: newCategory,
+        where: { id: data.id },
+        include: { svg: true },
+      })
+      .then(
+        async (categoryData) => {
+          console.log("2");
+          await prisma.svg
+            .update({ data: newSvg, where: { id: categoryData.svg.id } })
+            .then(
+              (svgData) => {
+                console.log("3");
+                res.send(JSON.stringify({ success: true, data: categoryData }));
+              },
+              (errorReason) => {
+                res.sendStatus(500).end(errorReason);
+              }
+            )
+            .catch((err) => {
+              console.error(err);
+              res.sendStatus(500).end();
+            });
+        },
+        (errorReason) => {
+          console.log(errorReason);
+          if (errorReason.code === "P2002") {
+            res.send(JSON.stringify({ target: errorReason.meta.target[0], error: "Already exists" }));
+          }
+        }
+      )
+      .catch((err) => {
+        console.error(err);
+        res.sendStatus(500).end();
+      });
+  }
+}

pages/api/categories/name/[categoryName].ts

@@ -0,0 +1,33 @@
+import { Request, Response } from "express";
+
+import { Category } from "@prisma/client";
+import prisma from "../../../../lib/prisma";
+import { ResponseError } from "../../../../types/responseErrors";
+
+
+export default async function handler(req: Request, res: Response) {
+  res.setHeader("Content-Type", "application/json");
+
+  const categoryName: string = req.query.categoryName.toString() ?? undefined;
+
+  await prisma.category
+    .findUnique({ where: { name: categoryName }, include: { svg: true } })
+    .then((result: Category) => {
+      if (result !== null) {
+        res.end(JSON.stringify(result));
+      } else {
+        const error: ResponseError = {
+          code: "404",
+          message: "No category with this name found!",
+        };
+        res.status(404).send(JSON.stringify(error));
+      }
+    })
+    .catch((err) => {
+      const error: ResponseError = {
+        code: "500",
+        message: err,
+      };
+      res.status(500).send(JSON.stringify(error));
+    });
+}

pages/api/images/index.ts

@@ -0,0 +1,11 @@
+import { Request, Response } from "express";
+import prisma from "../../../lib/prisma";
+import { Prisma } from "@prisma/client";
+
+export default async function handler(req: Request, res: Response) {
+  res.setHeader("Content-Type", "application/json");
+
+  if (req.method == "GET") {
+    res.send(await prisma.image.findMany())
+  }
+}

pages/api/search.ts

@@ -0,0 +1,31 @@
+import prisma from "../../lib/prisma";
+
+export default async function handler(req, res) {
+  res.setHeader("Content-Type", "application/json");
+  let query: string = req.query?.q ?? "";
+
+  query = query.toLowerCase().replaceAll("%20", "");
+  query = query.toLowerCase().replaceAll(" ", "");
+
+  if (query.length > 0) {
+    const articles = await prisma.article.findMany({
+      select: { title: true, name: true },
+      take: 5,
+    }); //TODO order by most viewed
+
+    let result = [];
+
+    articles.forEach((a) => {
+      let title = a.title.toLowerCase().replaceAll(" ", "");
+      title = title.toLowerCase().replaceAll("%20", "");
+
+      if (title.includes(query)) {
+        result.push(a);
+      }
+    });
+
+    res.end(JSON.stringify(result));
+  } else {
+    res.end(JSON.stringify([]));
+  }
+}

prisma/migrations/20230107035654_init/migration.sql

@@ -0,0 +1,109 @@
+-- CreateTable
+CREATE TABLE "Article" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "markdown" TEXT NOT NULL,
+    "categoryId" INTEGER,
+    "typeId" INTEGER,
+    "dateCreated" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "dateUpdated" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "Article_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ContentTableEntry" (
+    "id" SERIAL NOT NULL,
+    "title" TEXT NOT NULL,
+    "anchor" TEXT NOT NULL,
+    "orderIndex" INTEGER NOT NULL,
+    "articleId" INTEGER NOT NULL,
+    "dateCreated" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "dateUpdated" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "ContentTableEntry_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Category" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "color" TEXT NOT NULL,
+    "svgId" INTEGER NOT NULL,
+    "dateCreated" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "dateUpdated" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "Category_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ArticleType" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "dateCreated" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "dateUpdated" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "ArticleType_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Image" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "url" TEXT NOT NULL DEFAULT '',
+    "dateCreated" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "Image_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Svg" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "path" TEXT NOT NULL DEFAULT '',
+    "viewbox" TEXT NOT NULL DEFAULT '0 0 512 512',
+
+    CONSTRAINT "Svg_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Article_name_key" ON "Article"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Article_title_key" ON "Article"("title");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Category_name_key" ON "Category"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Category_title_key" ON "Category"("title");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Category_color_key" ON "Category"("color");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "ArticleType_name_key" ON "ArticleType"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "ArticleType_title_key" ON "ArticleType"("title");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Image_name_key" ON "Image"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Svg_name_key" ON "Svg"("name");
+
+-- AddForeignKey
+ALTER TABLE "Article" ADD CONSTRAINT "Article_categoryId_fkey" FOREIGN KEY ("categoryId") REFERENCES "Category"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Article" ADD CONSTRAINT "Article_typeId_fkey" FOREIGN KEY ("typeId") REFERENCES "ArticleType"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ContentTableEntry" ADD CONSTRAINT "ContentTableEntry_articleId_fkey" FOREIGN KEY ("articleId") REFERENCES "Article"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Category" ADD CONSTRAINT "Category_svgId_fkey" FOREIGN KEY ("svgId") REFERENCES "Svg"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/20230122141410_contentable/migration.sql

@@ -0,0 +1,40 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `typeId` on the `Article` table. All the data in the column will be lost.
+  - You are about to drop the `ArticleType` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `ContentTableEntry` table. If the table is not empty, all the data it contains will be lost.
+  - Added the required column `contentTable` to the `Article` table without a default value. This is not possible if the table is not empty.
+  - Made the column `categoryId` on table `Article` required. This step will fail if there are existing NULL values in that column.
+
+*/
+-- DropForeignKey
+ALTER TABLE "Article" DROP CONSTRAINT "Article_categoryId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "Article" DROP CONSTRAINT "Article_typeId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "ContentTableEntry" DROP CONSTRAINT "ContentTableEntry_articleId_fkey";
+
+-- AlterTable
+ALTER TABLE "Article" DROP COLUMN "typeId",
+ADD COLUMN     "contentTable" JSONB NOT NULL,
+ADD COLUMN     "imageId" INTEGER,
+ADD COLUMN     "introduction" TEXT NOT NULL DEFAULT '',
+ALTER COLUMN "categoryId" SET NOT NULL;
+
+-- AlterTable
+ALTER TABLE "Image" ADD COLUMN     "alt" TEXT NOT NULL DEFAULT '';
+
+-- DropTable
+DROP TABLE "ArticleType";
+
+-- DropTable
+DROP TABLE "ContentTableEntry";
+
+-- AddForeignKey
+ALTER TABLE "Article" ADD CONSTRAINT "Article_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "Image"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Article" ADD CONSTRAINT "Article_categoryId_fkey" FOREIGN KEY ("categoryId") REFERENCES "Category"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/20230122141436_contenttable/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Article" ALTER COLUMN "contentTable" DROP NOT NULL;

prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

prisma/schema.prisma

@@ -0,0 +1,53 @@
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model Article {
+  id           String   @id @default(uuid())
+  name         String   @unique
+  title        String   @unique
+  introduction String   @default("")
+  imageId      String?
+  image        Image?   @relation(fields: [imageId], references: [id])
+  markdown     String
+  contentTable Json?
+  categoryId   String
+  category     Category @relation(fields: [categoryId], references: [id])
+  dateCreated  DateTime @default(now())
+  dateUpdated  DateTime @default(now())
+}
+
+model Category {
+  id          String    @id @default(uuid())
+  name        String    @unique
+  title       String    @unique
+  color       String
+  svgId       String
+  svg         Svg       @relation(fields: [svgId], references: [id])
+  Article     Article[]
+  dateCreated DateTime  @default(now())
+  dateUpdated DateTime  @default(now())
+}
+
+model Image {
+  id          String    @id @default(uuid())
+  name        String    @unique
+  alt         String    @default("")
+  url         String    @default("")
+  width       Int
+  height      Int
+  dateCreated DateTime  @default(now())
+  Article     Article[]
+}
+
+model Svg {
+  id       String     @id @default(uuid())
+  path     String     @default("")
+  viewbox  String     @default("0 0 512 512")
+  Category Category[]
+}

public/images/logo.svg

@@ -0,0 +1,7 @@
+<svg width="190" height="52" viewBox="0 0 190 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0.853938 44.8066C0.305349 20.9341 13.1515 5.6096 19.6431 0.931396V35.9498C19.6431 47.8042 0.853938 46.5779 0.853938 44.8066Z" fill="#2F86ED"/>
+  <path d="M37.7614 44.8066C38.2904 20.9341 25.9031 5.6096 19.6433 0.931396V35.9498C19.6433 47.8042 37.7614 46.5779 37.7614 44.8066Z" fill="#0D69F3"/>
+  <path d="M19.6436 19.0659C17.6729 20.4266 13.7732 24.8838 13.9397 31.8273H25.3475C25.514 24.8838 21.6143 20.4266 19.6436 19.0659Z" fill="white"/>
+  <circle cx="19.3076" cy="47.6111" r="4.36573" fill="#FDC536"/>
+  <path d="M75.1302 37.989L66.7902 15.819H63.1602L54.7002 37.989H59.3502L61.0602 33.189H68.8002L70.4502 37.989H75.1302ZM67.5402 29.229H62.3202L64.9602 21.849L67.5402 29.229ZM89.0966 23.529C87.7466 21.999 86.0966 21.219 84.1166 21.219C81.8066 21.219 79.8866 22.029 78.3266 23.679C76.7966 25.329 76.0166 27.369 76.0166 29.799C76.0166 32.259 76.7966 34.299 78.3266 35.949C79.8566 37.569 81.8066 38.379 84.1166 38.379C86.1866 38.379 87.8666 37.569 89.1866 35.979V37.989H93.3266V15.189H89.0966V23.529ZM89.3066 29.799C89.3066 31.149 88.8866 32.259 88.0466 33.189C87.2066 34.089 86.1266 34.539 84.7766 34.539C83.4266 34.539 82.3466 34.089 81.4766 33.189C80.6366 32.259 80.2166 31.149 80.2166 29.799C80.2166 28.479 80.6366 27.369 81.4766 26.469C82.3466 25.539 83.4266 25.089 84.7766 25.089C86.1266 25.089 87.2066 25.539 88.0466 26.469C88.8866 27.369 89.3066 28.479 89.3066 29.799ZM110.54 25.839C112.34 25.209 113.57 23.289 113.57 21.339C113.57 19.869 113 18.579 111.89 17.469C110.78 16.359 109.25 15.819 107.27 15.819H97.6101V37.989H107.72C109.85 37.989 111.56 37.359 112.82 36.129C114.11 34.899 114.74 33.369 114.74 31.539C114.74 28.809 113.27 26.529 110.54 25.839ZM106.52 19.689C108.17 19.689 109.16 20.739 109.16 22.029C109.16 23.349 108.17 24.519 106.34 24.519H101.99V19.689H106.52ZM101.99 34.089V28.239H106.85C109.01 28.239 110.15 29.589 110.15 31.179C110.15 32.739 108.98 34.089 106.85 34.089H101.99ZM121.982 37.989V30.219C121.982 26.829 123.572 25.269 125.972 25.269C126.572 25.269 127.232 25.389 127.922 25.599L128.282 21.549C127.622 21.309 126.962 21.189 126.302 21.189C124.292 21.189 122.792 22.059 121.802 23.829V21.639H117.752V37.989H121.982ZM142.182 23.589C140.742 21.999 139.002 21.219 136.962 21.219C134.652 21.219 132.702 22.029 131.172 23.649C129.642 25.239 128.862 27.279 128.862 29.739C128.862 32.199 129.612 34.269 131.142 35.919C132.672 37.569 134.622 38.379 136.962 38.379C139.032 38.379 140.772 37.629 142.182 36.099V37.989H146.202V21.639H142.182V23.589ZM142.242 29.799C142.242 31.119 141.792 32.229 140.922 33.159C140.052 34.089 138.972 34.539 137.652 34.539C136.332 34.539 135.252 34.089 134.382 33.159C133.512 32.229 133.092 31.119 133.092 29.799C133.092 28.509 133.512 27.399 134.352 26.469C135.222 25.539 136.302 25.089 137.652 25.089C138.972 25.089 140.052 25.539 140.922 26.469C141.792 27.399 142.242 28.509 142.242 29.799ZM162.815 24.519V21.669H149.375V25.179H157.145L148.955 35.109V37.989H163.115V34.479H154.775L162.815 24.519ZM181.574 29.439C181.574 26.889 180.794 24.909 179.264 23.439C177.734 21.969 175.754 21.219 173.384 21.219C170.864 21.219 168.824 22.029 167.234 23.649C165.644 25.269 164.864 27.309 164.864 29.799C164.864 32.169 165.614 34.209 167.144 35.859C168.674 37.509 170.864 38.349 173.744 38.349C176.444 38.349 178.814 37.599 180.884 36.099L179.204 33.129C177.794 34.089 175.694 34.779 173.924 34.779C171.344 34.779 169.754 33.609 169.154 31.299H181.424C181.514 30.639 181.574 30.009 181.574 29.439ZM173.384 24.729C175.544 24.729 177.074 26.019 177.464 28.149H169.154C169.664 26.019 171.254 24.729 173.384 24.729Z" fill="#0D69F3"/>
+</svg>

public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/thirteen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="31" fill="none"><g opacity=".9"><path fill="url(#a)" d="M13 .4v29.3H7V6.3h-.2L0 10.5V5L7.2.4H13Z"/><path fill="url(#b)" d="M28.8 30.1c-2.2 0-4-.3-5.7-1-1.7-.8-3-1.8-4-3.1a7.7 7.7 0 0 1-1.4-4.6h6.2c0 .8.3 1.4.7 2 .4.5 1 .9 1.7 1.2.7.3 1.6.4 2.5.4 1 0 1.7-.2 2.5-.5.7-.3 1.3-.8 1.7-1.4.4-.6.6-1.2.6-2s-.2-1.5-.7-2.1c-.4-.6-1-1-1.8-1.4-.8-.4-1.8-.5-2.9-.5h-2.7v-4.6h2.7a6 6 0 0 0 2.5-.5 4 4 0 0 0 1.7-1.3c.4-.6.6-1.3.6-2a3.5 3.5 0 0 0-2-3.3 5.6 5.6 0 0 0-4.5 0 4 4 0 0 0-1.7 1.2c-.4.6-.6 1.2-.6 2h-6c0-1.7.6-3.2 1.5-4.5 1-1.3 2.2-2.3 3.8-3C25 .4 26.8 0 28.8 0s3.8.4 5.3 1.1c1.5.7 2.7 1.7 3.6 3a7.2 7.2 0 0 1 1.2 4.2c0 1.6-.5 3-1.5 4a7 7 0 0 1-4 2.2v.2c2.2.3 3.8 1 5 2.2a6.4 6.4 0 0 1 1.6 4.6c0 1.7-.5 3.1-1.4 4.4a9.7 9.7 0 0 1-4 3.1c-1.7.8-3.7 1.1-5.8 1.1Z"/></g><defs><linearGradient id="a" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient><linearGradient id="b" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient></defs></svg>

public/vercel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

styles/buttons.scss

@@ -0,0 +1,34 @@
+button {
+  border: 2px solid rgba(95, 95, 95, 0.5);
+  background-color: transparent;
+  height: 30px;
+  padding: 5px 5px 5px 5px;
+  color: var(--color-font);
+  border-radius: 3px;
+  outline: none;
+  transition: all 50ms linear;
+  cursor: pointer;
+
+  &::placeholder {
+    font-weight: bold;
+  }
+
+  &:hover {
+    border-color: var(--color-accent);
+  }
+
+  &.error {
+    border-color: var(--color-error);
+  }
+  &.success {
+    border-color: var(--color-success);
+  }
+
+  &.warning {
+    border-color: var(--color-warning);
+  }
+
+  &.info {
+    border-color: var(--color-info);
+  }
+}

styles/globals.scss

@@ -0,0 +1,28 @@
+@import "variables_colors.scss";
+@import "variables.scss";
+@import "typography.scss";
+
+* {
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+}
+
+*,
+:after,
+:before {
+	box-sizing: border-box;
+}
+
+html,
+body {
+	max-width: 100vw;
+	background-color: var(--color-background-body);
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	main {
+		width: 100%;
+		flex: 1;
+	}
+}

styles/inputs.scss

@@ -0,0 +1,73 @@
+@import "variables_colors.scss";
+@import "variables.scss";
+
+input {
+  border: 2px solid rgba(95, 95, 95, 0.5);
+  background-color: transparent;
+  height: 30px;
+  padding: 5px 5px 5px 5px;
+  color: var(--color-font);
+  border-radius: 3px;
+  outline: none;
+  transition: all 50ms linear;
+
+  &::placeholder {
+    font-weight: bold;
+  }
+
+  &:hover {
+    border-color: rgba(177, 177, 177, 0.608);
+  }
+
+  &:focus {
+    border-color: var(--color-accent);
+  }
+  &.error {
+    border-color: var(--color-error);
+  }
+  &.success {
+    border-color: var(--color-success);
+  }
+
+  &.warning {
+    border-color: var(--color-warning);
+  }
+
+  &.info {
+    border-color: var(--color-info);
+  }
+}
+
+.react-select-container {
+  .react-select__control {
+    background-color: var(--color-background-secondary);
+    border-color: rgba(95, 95, 95, 0.5);
+    transition: none;
+
+    &:hover {
+      border-color: rgba(116, 116, 116, 0.587);
+    }
+  }
+
+  .react-select__menu {
+    background-color: var(--color-background-secondary);
+    border: 1px solid rgba(95, 95, 95, 0.5);
+  }
+
+  .react-select__option {
+    background-color: var(--color-background-secondary);
+
+    &:hover {
+      background-color: rgba(116, 116, 116, 0.587);
+    }
+  }
+
+  .react-select__indicator-separator {
+    background-color: rgba(95, 95, 95, 0.5);
+  }
+
+  .react-select__placeholder,
+  .react-select__single-value {
+    color: var(--font-color);
+  }
+}

styles/modules/Article.module.scss

@@ -0,0 +1,60 @@
+@import "../variables.scss";
+.article {
+  display: grid;
+  gap: 70px;
+  grid-template-columns: $tutorial-content-table-width minmax(0px, 1fr) $tutorial-sidebar-width;
+  margin: 0px auto;
+  max-width: 1800px;
+  padding: 0px 24px;
+
+  @media (max-width: $tutorial-breakpoint-1) {
+    grid-template-columns: $tutorial-content-table-width 1fr;
+  }
+
+  @media (max-width: $tutorial-breakpoint-2) {
+    grid-template-columns: 1fr;
+  }
+  .header {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 0px 10px 0px;
+    gap: 10px 0px;
+
+    .dates {
+      text-align: center;
+    }
+
+    img {
+      width: min(100%, 750px);
+      height: auto;
+      aspect-ratio: 15/7;
+      border-radius: 10px;
+    }
+
+    .tags {
+      display: flex;
+      flex-direction: row;
+      gap: 5px 10px;
+      a {
+        font-size: 0.8em;
+        background-color: var(--color-background-article-tag);
+        opacity: 0.9;
+        color: var(--color-font-article-tag);
+        padding: 5px 10px 5px 10px;
+        border-radius: 5px;
+        text-decoration: none;
+
+        &:hover {
+          color: var(--color-font-article-tag) !important;
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .tutorialContent {
+    min-width: 0;
+  }
+}

styles/modules/ArticleContentTable.module.scss

@@ -0,0 +1,29 @@
+@import "../variables.scss";
+
+.articleContentTable {
+  @media (max-width: $tutorial-breakpoint-2) {
+    display: none;
+  }
+  .stickyContainer {
+    position: sticky;
+    top: $tutorial-grid-sticky-top;
+
+    .list {
+      align-items: flex-start;
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 16px;
+      padding-bottom: 16px;
+      row-gap: 10px;
+    }
+
+    .adContainer {
+      background-color: #ff00003e;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

styles/modules/ArticleEditor.module.scss

@@ -0,0 +1,94 @@
+@import "../variables.scss";
+
+.adminArticlesCreate {
+  & > h1 {
+    text-align: center;
+  }
+  .formControl {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 30px;
+  }
+
+  .form {
+    display: flex;
+    flex-direction: column;
+    gap: 70px;
+
+    margin: 0px auto;
+    max-width: 1800px;
+    padding: 0px 24px;
+    .articleEditor {
+      display: flex;
+      flex-direction: column;
+      row-gap: 25px;
+
+      & > div {
+        display: flex;
+        flex-direction: column;
+
+        label {
+          padding: 5px;
+        }
+      }
+
+      .title {
+        .titleInputs {
+          display: grid;
+          grid-template-columns: 1fr 0.5fr;
+          gap: 0px 5px;
+        }
+      }
+
+      .category {
+      }
+
+      .introduction {
+      }
+      .markdown {
+        .markdownEditor {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 10px 10px;
+          textarea {
+            color: var(--font-color);
+            border: 2px solid #3b3b3b80;
+            background-color: transparent;
+            min-height: 700px;
+            max-height: 1500px;
+            resize: none;
+            display: block;
+            border-radius: 0px;
+            outline: 0;
+            resize: both;
+            font-family: inherit;
+            font-size: inherit;
+          }
+
+          & > div {
+            max-width: 1000px;
+            max-height: 1500px;
+            border: 2px solid #3b3b3b80;
+            overflow: auto;
+          }
+        }
+      }
+
+      .contentTable {
+        .contentTableEditor {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 10px 10px;
+          & > div {
+            border: 2px solid #3b3b3b80;
+            overflow: auto;
+            max-width: 1000px;
+            max-height: 1000px;
+          }
+        }
+      }
+    }
+  }
+}

styles/modules/Category.module.scss

@@ -0,0 +1,55 @@
+@import "../variables.scss";
+.category {
+	h1 {
+		text-align: center;
+		font-size: 1.5em;
+	}
+
+	.content {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		margin-top: 50px;
+		row-gap: 50px;
+		padding: 0px 20px 0 20px;
+		.showcase {
+			display: grid;
+			grid-template-columns: 1fr 1fr 1fr;
+			gap: 10px 10px;
+
+			@media (max-width: $category-breakpoint-1) {
+				grid-template-columns: 1fr 1fr;
+			}
+
+			@media (max-width: $category-breakpoint-2) {
+				grid-template-columns: 1fr;
+			}
+			h2 {
+				font-size: 1em;
+				grid-column: 1 / -1;
+			}
+
+			a {
+				background-color: rgba(126, 126, 126, 0.1);
+				box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.1);
+				padding: 20px;
+				transition: all 50ms linear;
+				text-overflow: ellipsis;
+				max-width: 300px;
+				&:hover {
+					background-color: rgba(126, 126, 126, 0.2);
+					box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.2);
+				}
+			}
+		}
+
+		.smallShowcase {
+			@media (max-width: $category-breakpoint-2) {
+				& > a:nth-child(n + 5) {
+					display: none;
+				}
+			}
+		}
+	}
+}

styles/modules/CategoryEditor.module.scss

@@ -0,0 +1,2 @@
+.categoryEditor {
+}

styles/modules/CategoryList.module.scss

@@ -0,0 +1,106 @@
+@import "../variables.scss";
+.categoryList {
+	text-align: center;
+
+	.content {
+		margin-top: 30px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		.grid {
+			display: grid;
+			grid-template-columns: 1fr 1fr 1fr;
+			gap: 10px 30px;
+
+			@media (max-width: $categoryList-breakpoint-1) {
+				grid-template-columns: 1fr 1fr;
+				gap: 10px 10px;
+			}
+
+			@media (max-width: $categoryList-breakpoint-2) {
+				grid-template-columns: 1fr;
+				width: 100%;
+
+				padding: 0px 20px 0 20px;
+			}
+
+			.linkContainer {
+				aspect-ratio: 14/9;
+				width: 250px;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+
+				@media (max-width: $categoryList-breakpoint-2) {
+					width: 100%;
+				}
+
+				a {
+					text-align: center;
+					aspect-ratio: 14/9;
+					width: 230px;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					align-items: center;
+					row-gap: 20px;
+					background-color: #383d54;
+					color: white;
+					font-size: 0.8em;
+					transition: all 100ms linear;
+
+					&:hover {
+						box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.481);
+						color: white !important;
+						text-decoration: none !important;
+						width: 250px;
+						row-gap: 30px;
+						.svgContainer {
+							svg {
+								width: 70px;
+								height: 70px;
+							}
+						}
+					}
+
+					@media (max-width: $categoryList-breakpoint-2) {
+						font-size: 1.2em;
+						width: 95%;
+						&:hover {
+							box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0);
+							width: 100%;
+
+							.svgContainer {
+								svg {
+									width: 90px;
+									height: 90px;
+								}
+							}
+						}
+					}
+
+					.svgContainer {
+						width: 70px;
+						height: 70px;
+						@media (max-width: $categoryList-breakpoint-2) {
+							width: 90px;
+							height: 90px;
+						}
+						svg {
+							transition: all 100ms linear;
+							fill: rgb(255, 255, 255);
+							width: 60px;
+							height: 60px;
+
+							@media (max-width: $categoryList-breakpoint-2) {
+								width: 80px;
+								height: 80px;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}

styles/modules/Footer.module.scss

@@ -0,0 +1,72 @@
+@import "../variables.scss";
+.footer {
+	padding: 200px 15px 30px 15px;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: 50px 50px;
+
+	.adContainer {
+		background-color: #ff00003e;
+		width: $footer-ad-container-width;
+		height: $footer-ad-container-height;
+
+		@media (max-width: $footer-ad-container-width) {
+			width: 100%;
+		}
+	}
+	.content {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 100px 100px;
+		align-items: center;
+
+		@media (max-width: $footer-breakpoint-1) {
+			column-gap: 10px;
+		}
+
+		@media (max-width: $footer-breakpoint-3) {
+			grid-template-columns: 1fr;
+			gap: 100px 20px;
+		}
+
+		.company {
+			float: right;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: 100;
+			flex-shrink: 0;
+			flex: 1;
+			text-align: center;
+			column-gap: 10px;
+			font-size: 0.8em;
+			@media (max-width: $footer-breakpoint-1) {
+				flex-direction: column;
+				font-size: 0.7em;
+				column-gap: 0px;
+			}
+
+			@media (max-width: $footer-breakpoint-3) {
+				grid-row: 2;
+			}
+		}
+
+		.links {
+			display: flex;
+			justify-content: right;
+			align-items: center;
+
+			.grid {
+				display: grid;
+				grid-template-columns: 1fr 1fr 1fr;
+				gap: 20px 100px;
+
+				@media (max-width: $footer-breakpoint-4) {
+					column-gap: 15px;
+				}
+			}
+		}
+	}
+}

styles/modules/Nav.module.scss

@@ -0,0 +1,227 @@
+@import "../variables.scss";
+
+.nav {
+  background-color: var(--color-background-nav);
+  height: $nav-height-inital;
+  margin-bottom: 10px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  align-items: center;
+  box-shadow: var(--color-shadow-nav) 0px 4px 8px;
+
+  @media (max-width: $nav-breakpoint-1) {
+    grid-template-columns: 1fr 1fr 0.25fr;
+  }
+
+  @media (max-width: $nav-breakpoint-2) {
+    grid-template-columns: 1fr 1fr;
+    height: 100px;
+  }
+
+  & > div {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .containerLeft {
+    @media (max-width: $nav-breakpoint-2) {
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+    @media (max-width: $nav-breakpoint-3) {
+      column-gap: 20px;
+    }
+
+    .logo {
+      cursor: pointer;
+    }
+    .links {
+      font-size: 0.8em;
+      font-weight: bold;
+
+      .dropDown {
+        color: var(--color-font-link);
+        text-decoration: none;
+        cursor: pointer;
+        &:hover {
+          .dropDownContainer {
+            display: block;
+          }
+        }
+        .dropDownContainer {
+          display: none;
+          position: absolute;
+          z-index: 1;
+          .content {
+            background-color: var(--color-background-dropdown);
+            min-width: 160px;
+            box-shadow: 0px 12px 16px 5px rgba(0, 0, 0, 0.2);
+            margin-top: 21px;
+
+            a {
+              float: none;
+              color: var(--color-font-link);
+              padding: 12px 16px;
+              text-decoration: none;
+              display: block;
+              text-align: left;
+              border-left: 2px solid transparent;
+              transition: all 50ms linear;
+
+              &:hover {
+                border-color: var(--color-accent);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .containerCenter {
+    width: 100%;
+
+    @media (max-width: $nav-breakpoint-2) {
+      grid-row: 2;
+      grid-column: span 2;
+    }
+    .searchBar {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 2px solid rgba(95, 95, 95, 0.5);
+      border-radius: 5px;
+      padding-left: 10px;
+      transition: all 50ms linear;
+
+      &:hover {
+        border-color: rgba(91, 91, 91, 0.9);
+
+        .icon {
+          svg {
+            fill: var(--color-font);
+          }
+        }
+      }
+
+      &:focus-within {
+        border-color: rgba(91, 91, 91, 0.9);
+        .icon {
+          svg {
+            fill: var(--color-font);
+          }
+        }
+      }
+
+      &:focus-within + .searchResults {
+        display: block;
+      }
+
+      input {
+        width: 300px;
+        height: 30px;
+        background-color: transparent;
+        border: 0px;
+        outline: 0;
+        padding-right: 10px;
+        color: var(--color-font);
+
+        @media (max-width: $nav-breakpoint-4) {
+          width: 200px;
+        }
+      }
+
+      .icon {
+        display: block;
+        padding-right: 10px;
+        svg {
+          height: 15px;
+        }
+      }
+    }
+
+    .searchResults {
+      display: none;
+      position: absolute;
+      top: 48px;
+
+      &:hover {
+        display: block;
+      }
+
+      @media (max-width: $nav-breakpoint-2) {
+        top: 94px;
+      }
+
+      .content {
+        background-color: rgb(18, 18, 18);
+        width: 335px;
+        a {
+          text-decoration: none;
+          display: block;
+          width: 100%;
+          padding: 5px 10px 5px 10px;
+          float: none;
+          border-left: 2px solid transparent;
+          transition: all 50ms linear;
+          text-overflow: ellipsis;
+          font-size: 0.8em;
+
+          &:hover {
+            border-color: var(--color-accent);
+            background-color: rgba(41, 41, 41, 0.2);
+          }
+        }
+        @media (max-width: $nav-breakpoint-4) {
+          width: 235px;
+        }
+      }
+    }
+  }
+
+  .containerRight {
+    justify-content: flex-end;
+    padding-right: 50px;
+
+    @media (max-width: $nav-breakpoint-2) {
+      grid-row: 1;
+    }
+
+    @media (max-width: $nav-breakpoint-4) {
+      padding-right: 20px;
+    }
+
+    .themeSwitch {
+      svg {
+        transition: all 50ms linear;
+        height: 24px;
+        cursor: pointer;
+        animation-duration: 150ms;
+        animation-timing-function: linear;
+        animation-iteration-count: 1;
+
+        animation-direction: normal;
+        &:hover {
+          fill: var(--color-font);
+        }
+      }
+    }
+  }
+
+  svg {
+    aspect-ratio: 1;
+    fill: var(--color-svg-nav);
+  }
+
+  @keyframes spinThemeSwitch {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(-180deg);
+    }
+  }
+}

styles/modules/Sidebar.module.scss

@@ -0,0 +1,31 @@
+@import "../variables.scss";
+
+.sidebar {
+	.stickyContainer {
+		position: sticky;
+		top: $tutorial-grid-sticky-top;
+		display: flex;
+		flex-direction: column;
+		row-gap: 20px;
+		font-size: 14px;
+		@media (max-width: $tutorial-breakpoint-1) {
+			display: none;
+		}
+		.sidebarContainer {
+			display: flex;
+			flex-direction: column;
+			row-gap: 5px;
+			background-color: var(--color-background-card);
+			border-radius: 10px;
+			padding: 10px 10px 15px 10px;
+		}
+		.adContainer {
+			background-color: #ff00003e;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: 100%;
+			height: 100%;
+		}
+	}
+}

styles/modules/markdown.module.scss

@@ -0,0 +1,141 @@
+// This file contains the markdown styles
+
+.markdown {
+  padding: 0 10px 0 10px;
+  color: var(--md-color-font);
+
+  .toolbar {
+    background-color: red;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    padding: 0 10px;
+    position: relative;
+    .copyBtn {
+      height: 30px;
+      width: 30px;
+      margin-top: 15px;
+      cursor: pointer;
+      position: absolute;
+      transition-delay: 2s, 4ms;
+      transition: all 50ms ease-in-out;
+
+      svg {
+        fill: #bdbdbd3a;
+        transition: all 50ms linear;
+        &:hover {
+          fill: var(--color-accent);
+        }
+      }
+    }
+  }
+  hr {
+    border: 1px solid var(--md-color-hr);
+    margin: 20px 0;
+  }
+
+  /* Texts */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--md-color-headline);
+    margin: 20px 0 10px 0;
+  }
+
+  p {
+    margin: 0px 0 10px 0;
+  }
+
+  /* Images */
+  img {
+    max-width: 100%;
+  }
+
+  /* Code */
+  code {
+    background-color: #282c34;
+    padding: 5px;
+    border-radius: 5px;
+    color: #fff;
+  }
+
+  pre {
+    overflow: auto;
+    word-wrap: normal;
+    white-space: pre;
+    display: block;
+
+    code {
+      display: block;
+      font-size: 1em;
+      text-indent: 0;
+      white-space: inherit;
+      background-color: transparent;
+      padding: 0px;
+      border-radius: 0px;
+    }
+  }
+
+  /* Lists */
+  ul,
+  ol {
+    list-style: inside;
+    li {
+      display: list-item;
+      line-height: 1.5em;
+    }
+  }
+
+  ul {
+    list-style-type: circle;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  /* Blockquotes */
+  .blockquote {
+    border-left: 5px solid var(--md-color-blockquote-border);
+    padding-left: 20px;
+    background-color: var(--md-color-blockquote-background);
+  }
+  /* Table */
+  table {
+    border-radius: 5px;
+    border-collapse: collapse;
+    width: 100%;
+    display: table;
+    overflow: auto;
+
+    thead,
+    tbody {
+      width: 100%;
+    }
+    thead th:nth-child(odd) {
+      color: #ffffff;
+      background: var(--md-color-table-col-odd-background);
+    }
+    tr {
+      background: var(--md-color-table-row-odd-background);
+    }
+    tr:nth-child(even) {
+      background: var(--md-color-table-row-even-background);
+    }
+    th,
+    td {
+      text-align: center;
+      padding: 8px;
+    }
+    td {
+      border-right: 1px solid #ffffff00;
+    }
+    th {
+      color: #ffffff;
+      background: var(--md-color-table-col-even-background);
+    }
+  }
+}

styles/prism_themes/prism-a11y-dark.css

@@ -0,0 +1,161 @@
+/**
+ * a11y-dark theme for JavaScript, CSS, and HTML
+ * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
+ * @author ericwbailey
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #f8f8f2;
+	background: none;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: 0.5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #2b2b2b;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: 0.1em;
+	border-radius: 0.3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #d4d0ab;
+}
+
+.token.punctuation {
+	color: #fefefe;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #ffa07a;
+}
+
+.token.boolean,
+.token.number {
+	color: #00e0e0;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #abe338;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+	color: #00e0e0;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function {
+	color: #ffd700;
+}
+
+.token.keyword {
+	color: #00e0e0;
+}
+
+.token.regex,
+.token.important {
+	color: #ffd700;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+@media screen and (-ms-high-contrast: active) {
+	code[class*="language-"],
+	pre[class*="language-"] {
+		color: windowText;
+		background: window;
+	}
+
+	:not(pre) > code[class*="language-"],
+	pre[class*="language-"] {
+		background: window;
+	}
+
+	.token.important {
+		background: highlight;
+		color: window;
+		font-weight: normal;
+	}
+
+	.token.atrule,
+	.token.attr-value,
+	.token.function,
+	.token.keyword,
+	.token.operator,
+	.token.selector {
+		font-weight: bold;
+	}
+
+	.token.attr-value,
+	.token.comment,
+	.token.doctype,
+	.token.function,
+	.token.keyword,
+	.token.operator,
+	.token.property,
+	.token.string {
+		color: highlight;
+	}
+
+	.token.attr-value,
+	.token.url {
+		font-weight: normal;
+	}
+}

styles/prism_themes/prism-atom-dark.css

@@ -0,0 +1,143 @@
+/**
+ * atom-dark theme for `prism.js`
+ * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax
+ * @author Joe Gibson (@gibsjose)
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #c5c8c6;
+	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+	font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #1d1f21;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #7C7C7C;
+}
+
+.token.punctuation {
+	color: #c5c8c6;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.keyword,
+.token.tag {
+	color: #96CBFE;
+}
+
+.token.class-name {
+	color: #FFFFB6;
+	text-decoration: underline;
+}
+
+.token.boolean,
+.token.constant {
+	color: #99CC99;
+}
+
+.token.symbol,
+.token.deleted {
+	color: #f92672;
+}
+
+.token.number {
+	color: #FF73FD;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #A8FF60;
+}
+
+.token.variable {
+	color: #C6C5FE;
+}
+
+.token.operator {
+	color: #EDEDED;
+}
+
+.token.entity {
+	color: #FFFFB6;
+	cursor: help;
+}
+
+.token.url {
+	color: #96CBFE;
+}
+
+.language-css .token.string,
+.style .token.string {
+	color: #87C38A;
+}
+
+.token.atrule,
+.token.attr-value {
+	color: #F9EE98;
+}
+
+.token.function {
+	color: #DAD085;
+}
+
+.token.regex {
+	color: #E9C062;
+}
+
+.token.important {
+	color: #fd971f;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}

styles/prism_themes/prism-base16-ateliersulphurpool.light.css

@@ -0,0 +1,176 @@
+/*
+
+Name:       Base16 Atelier Sulphurpool Light
+Author:     Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool)
+
+Prism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/prism/)
+Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
+
+*/
+code[class*="language-"],
+pre[class*="language-"] {
+	font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+	font-size: 14px;
+	line-height: 1.375;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+	background: #f5f7ff;
+	color: #5e6687;
+}
+
+pre > code[class*="language-"] {
+	font-size: 1em;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #dfe2f1;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #dfe2f1;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #898ea4;
+}
+
+.token.punctuation {
+	color: #5e6687;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.operator,
+.token.boolean,
+.token.number {
+	color: #c76b29;
+}
+
+.token.property {
+	color: #c08b30;
+}
+
+.token.tag {
+	color: #3d8fd1;
+}
+
+.token.string {
+	color: #22a2c9;
+}
+
+.token.selector {
+	color: #6679cc;
+}
+
+.token.attr-name {
+	color: #c76b29;
+}
+
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #22a2c9;
+}
+
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.unit {
+	color: #ac9739;
+}
+
+.token.statement,
+.token.regex,
+.token.atrule {
+	color: #22a2c9;
+}
+
+.token.placeholder,
+.token.variable {
+	color: #3d8fd1;
+}
+
+.token.deleted {
+	text-decoration: line-through;
+}
+
+.token.inserted {
+	border-bottom: 1px dotted #202746;
+	text-decoration: none;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.important {
+	color: #c94922;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+pre > code.highlight {
+	outline: 0.4em solid #c94922;
+	outline-offset: .4em;
+}
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+.line-numbers.line-numbers .line-numbers-rows {
+	border-right-color: #dfe2f1;
+}
+
+.line-numbers .line-numbers-rows > span:before {
+	color: #979db4;
+}
+
+/* overrides color-values for the Line Highlight plugin
+ * http://prismjs.com/plugins/line-highlight/
+ */
+.line-highlight.line-highlight {
+	background: rgba(107, 115, 148, 0.2);
+	background: -webkit-linear-gradient(left, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
+	background: linear-gradient(to right, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
+}

styles/prism_themes/prism-cb.css

@@ -0,0 +1,146 @@
+/*
+ * Based on Plugin: Syntax Highlighter CB
+ * Plugin URI: http://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prism-js
+ * Description: Highlight your code snippets with an easy to use shortcode based on Lea Verou's Prism.js.
+ * Version: 1.0.0
+ * Author: c.bavota
+ * Author URI: http://bavotasan.comhttp://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prism-js/ */
+/* http://cbavota.bitbucket.org/syntax-highlighter/  */
+
+/* =====   ===== */
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #fff;
+	text-shadow: 0 1px 1px #000;
+	font-family: Menlo, Monaco, "Courier New", monospace;
+	direction: ltr;
+	text-align: left;
+	word-spacing: normal;
+	white-space: pre;
+	word-wrap: normal;
+	line-height: 1.4;
+	background: none;
+	border: 0;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"] code {
+	float: left;
+	padding: 0 15px 0 0;
+}
+
+pre[class*="language-"],
+:not(pre) > code[class*="language-"] {
+	background: #222;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 15px;
+	margin: 1em 0;
+	overflow: auto;
+	-moz-border-radius: 8px;
+	-webkit-border-radius: 8px;
+	border-radius: 8px;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: 5px 10px;
+	line-height: 1;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #797979;
+}
+
+.token.selector,
+.token.operator,
+.token.punctuation {
+	color: #fff;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.tag,
+.token.boolean {
+	color: #ffd893;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.hex,
+.token.string {
+	color: #B0C975;
+}
+
+.token.property,
+.token.entity,
+.token.url,
+.token.attr-name,
+.token.keyword {
+	color: #c27628;
+}
+
+.token.regex {
+	color: #9B71C6;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.token.function,
+.token.constant {
+	color: #e5a638;
+}
+
+.token.variable {
+	color: #fdfba8;
+}
+
+.token.number {
+	color: #8799B0;
+}
+
+.token.important,
+.token.deliminator {
+	color: #E45734;
+}
+
+/* Line highlight plugin */
+.line-highlight.line-highlight {
+	background: rgba(255, 255, 255, .2);
+}
+
+.line-highlight.line-highlight:before,
+.line-highlight.line-highlight[data-end]:after {
+	top: .3em;
+	background-color: rgba(255, 255, 255, .3);
+	color: #fff;
+	-moz-border-radius: 8px;
+	-webkit-border-radius: 8px;
+	border-radius: 8px;
+}
+
+/* for line numbers */
+/* span instead of span:before for a two-toned border */
+.line-numbers .line-numbers-rows > span {
+	border-right: 3px #d9d336 solid;
+}

styles/prism_themes/prism-coldark-cold.css

@@ -0,0 +1,317 @@
+/**
+ * Coldark Theme for Prism.js
+ * Theme variation: Cold
+ * Tested with HTML, CSS, JS, JSON, PHP, YAML, Bash script
+ * @author Armand Philippot <contact@armandphilippot.com>
+ * @homepage https://github.com/ArmandPhilippot/coldark-prism
+ * @license MIT
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #111b27;
+	background: none;
+	font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+	background: #8da1b9;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+	background: #8da1b9;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: 0.5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #e3eaf2;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: 0.1em 0.3em;
+	border-radius: 0.3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #3c526d;
+}
+
+.token.punctuation {
+	color: #111b27;
+}
+
+.token.delimiter.important,
+.token.selector .parent,
+.token.tag,
+.token.tag .token.punctuation {
+	color: #006d6d;
+}
+
+.token.attr-name,
+.token.boolean,
+.token.boolean.important,
+.token.number,
+.token.constant,
+.token.selector .token.attribute {
+	color: #755f00;
+}
+
+.token.class-name,
+.token.key,
+.token.parameter,
+.token.property,
+.token.property-access,
+.token.variable {
+	color: #005a8e;
+}
+
+.token.attr-value,
+.token.inserted,
+.token.color,
+.token.selector .token.value,
+.token.string,
+.token.string .token.url-link {
+	color: #116b00;
+}
+
+.token.builtin,
+.token.keyword-array,
+.token.package,
+.token.regex {
+	color: #af00af;
+}
+
+.token.function,
+.token.selector .token.class,
+.token.selector .token.id {
+	color: #7c00aa;
+}
+
+.token.atrule .token.rule,
+.token.combinator,
+.token.keyword,
+.token.operator,
+.token.pseudo-class,
+.token.pseudo-element,
+.token.selector,
+.token.unit {
+	color: #a04900;
+}
+
+.token.deleted,
+.token.important {
+	color: #c22f2e;
+}
+
+.token.keyword-this,
+.token.this {
+	color: #005a8e;
+}
+
+.token.important,
+.token.keyword-this,
+.token.this,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.delimiter.important {
+	font-weight: inherit;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.language-markdown .token.title,
+.language-markdown .token.title .token.punctuation {
+	color: #005a8e;
+	font-weight: bold;
+}
+
+.language-markdown .token.blockquote.punctuation {
+	color: #af00af;
+}
+
+.language-markdown .token.code {
+	color: #006d6d;
+}
+
+.language-markdown .token.hr.punctuation {
+	color: #005a8e;
+}
+
+.language-markdown .token.url > .token.content {
+	color: #116b00;
+}
+
+.language-markdown .token.url-link {
+	color: #755f00;
+}
+
+.language-markdown .token.list.punctuation {
+	color: #af00af;
+}
+
+.language-markdown .token.table-header {
+	color: #111b27;
+}
+
+.language-json .token.operator {
+	color: #111b27;
+}
+
+.language-scss .token.variable {
+	color: #006d6d;
+}
+
+/* overrides color-values for the Show Invisibles plugin
+ * https://prismjs.com/plugins/show-invisibles/
+ */
+.token.token.tab:not(:empty):before,
+.token.token.cr:before,
+.token.token.lf:before,
+.token.token.space:before {
+	color: #3c526d;
+}
+
+/* overrides color-values for the Toolbar plugin
+ * https://prismjs.com/plugins/toolbar/
+ */
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > a,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > button {
+	color: #e3eaf2;
+	background: #005a8e;
+}
+
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus {
+	color: #e3eaf2;
+	background: #005a8eda;
+	text-decoration: none;
+}
+
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > span,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
+	color: #e3eaf2;
+	background: #3c526d;
+}
+
+/* overrides color-values for the Line Highlight plugin
+ * http://prismjs.com/plugins/line-highlight/
+ */
+.line-highlight.line-highlight {
+	background: #8da1b92f;
+	background: linear-gradient(to right, #8da1b92f 70%, #8da1b925);
+}
+
+.line-highlight.line-highlight:before,
+.line-highlight.line-highlight[data-end]:after {
+	background-color: #3c526d;
+	color: #e3eaf2;
+	box-shadow: 0 1px #8da1b9;
+}
+
+pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before {
+	background-color: #3c526d1f;
+}
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+.line-numbers.line-numbers .line-numbers-rows {
+	border-right: 1px solid #8da1b97a;
+	background: #d0dae77a;
+}
+
+.line-numbers .line-numbers-rows > span:before {
+	color: #3c526dda;
+}
+
+/* overrides color-values for the Match Braces plugin
+ * https://prismjs.com/plugins/match-braces/
+ */
+.rainbow-braces .token.token.punctuation.brace-level-1,
+.rainbow-braces .token.token.punctuation.brace-level-5,
+.rainbow-braces .token.token.punctuation.brace-level-9 {
+	color: #755f00;
+}
+
+.rainbow-braces .token.token.punctuation.brace-level-2,
+.rainbow-braces .token.token.punctuation.brace-level-6,
+.rainbow-braces .token.token.punctuation.brace-level-10 {
+	color: #af00af;
+}
+
+.rainbow-braces .token.token.punctuation.brace-level-3,
+.rainbow-braces .token.token.punctuation.brace-level-7,
+.rainbow-braces .token.token.punctuation.brace-level-11 {
+	color: #005a8e;
+}
+
+.rainbow-braces .token.token.punctuation.brace-level-4,
+.rainbow-braces .token.token.punctuation.brace-level-8,
+.rainbow-braces .token.token.punctuation.brace-level-12 {
+	color: #7c00aa;
+}
+
+/* overrides color-values for the Diff Highlight plugin
+ * https://prismjs.com/plugins/diff-highlight/
+ */
+pre.diff-highlight > code .token.token.deleted:not(.prefix),
+pre > code.diff-highlight .token.token.deleted:not(.prefix) {
+	background-color: #c22f2e1f;
+}
+
+pre.diff-highlight > code .token.token.inserted:not(.prefix),
+pre > code.diff-highlight .token.token.inserted:not(.prefix) {
+	background-color: #116b001f;
+}
+
+/* overrides color-values for the Command Line plugin
+ * https://prismjs.com/plugins/command-line/
+ */
+.command-line .command-line-prompt {
+	border-right: 1px solid #8da1b97a;
+}
+
+.command-line .command-line-prompt > span:before {
+	color: #3c526dda;
+}

styles/prism_themes/prism-coldark-dark.css

@@ -0,0 +1,317 @@
+/**
+ * Coldark Theme for Prism.js
+ * Theme variation: Dark
+ * Tested with HTML, CSS, JS, JSON, PHP, YAML, Bash script
+ * @author Armand Philippot <contact@armandphilippot.com>
+ * @homepage https://github.com/ArmandPhilippot/coldark-prism
+ * @license MIT
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #e3eaf2;
+	background: none;
+	font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+	background: #3c526d;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+	background: #3c526d;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: 0.5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #111b27;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: 0.1em 0.3em;
+	border-radius: 0.3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #8da1b9;
+}
+
+.token.punctuation {
+	color: #e3eaf2;
+}
+
+.token.delimiter.important,
+.token.selector .parent,
+.token.tag,
+.token.tag .token.punctuation {
+	color: #66cccc;
+}
+
+.token.attr-name,
+.token.boolean,
+.token.boolean.important,
+.token.number,
+.token.constant,
+.token.selector .token.attribute {
+	color: #e6d37a;
+}
+
+.token.class-name,
+.token.key,
+.token.parameter,
+.token.property,
+.token.property-access,
+.token.variable {
+	color: #6cb8e6;
+}
+
+.token.attr-value,
+.token.inserted,
+.token.color,
+.token.selector .token.value,
+.token.string,
+.token.string .token.url-link {
+	color: #91d076;
+}
+
+.token.builtin,
+.token.keyword-array,
+.token.package,
+.token.regex {
+	color: #f4adf4;
+}
+
+.token.function,
+.token.selector .token.class,
+.token.selector .token.id {
+	color: #c699e3;
+}
+
+.token.atrule .token.rule,
+.token.combinator,
+.token.keyword,
+.token.operator,
+.token.pseudo-class,
+.token.pseudo-element,
+.token.selector,
+.token.unit {
+	color: #e9ae7e;
+}
+
+.token.deleted,
+.token.important {
+	color: #cd6660;
+}
+
+.token.keyword-this,
+.token.this {
+	color: #6cb8e6;
+}
+
+.token.important,
+.token.keyword-this,
+.token.this,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.delimiter.important {
+	font-weight: inherit;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.language-markdown .token.title,
+.language-markdown .token.title .token.punctuation {
+	color: #6cb8e6;
+	font-weight: bold;
+}
+
+.language-markdown .token.blockquote.punctuation {
+	color: #f4adf4;
+}
+
+.language-markdown .token.code {
+	color: #66cccc;
+}
+
+.language-markdown .token.hr.punctuation {
+	color: #6cb8e6;
+}
+
+.language-markdown .token.url .token.content {
+	color: #91d076;
+}
+
+.language-markdown .token.url-link {
+	color: #e6d37a;
+}
+
+.language-markdown .token.list.punctuation {
+	color: #f4adf4;
+}
+
+.language-markdown .token.table-header {
+	color: #e3eaf2;
+}
+
+.language-json .token.operator {
+	color: #e3eaf2;
+}
+
+.language-scss .token.variable {
+	color: #66cccc;
+}
+
+/* overrides color-values for the Show Invisibles plugin
+ * https://prismjs.com/plugins/show-invisibles/
+ */
+.token.token.tab:not(:empty):before,
+.token.token.cr:before,
+.token.token.lf:before,
+.token.token.space:before {
+	color: #8da1b9;
+}
+
+/* overrides color-values for the Toolbar plugin
+ * https://prismjs.com/plugins/toolbar/
+ */
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > a,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > button {
+	color: #111b27;
+	background: #6cb8e6;
+}
+
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus {
+	color: #111b27;
+	background: #6cb8e6da;
+	text-decoration: none;
+}
+
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > span,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
+	color: #111b27;
+	background: #8da1b9;
+}
+
+/* overrides color-values for the Line Highlight plugin
+ * http://prismjs.com/plugins/line-highlight/
+ */
+.line-highlight.line-highlight {
+	background: #3c526d5f;
+	background: linear-gradient(to right, #3c526d5f 70%, #3c526d55);
+}
+
+.line-highlight.line-highlight:before,
+.line-highlight.line-highlight[data-end]:after {
+	background-color: #8da1b9;
+	color: #111b27;
+	box-shadow: 0 1px #3c526d;
+}
+
+pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before {
+	background-color: #8da1b918;
+}
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+.line-numbers.line-numbers .line-numbers-rows {
+	border-right: 1px solid #0b121b;
+	background: #0b121b7a;
+}
+
+.line-numbers .line-numbers-rows > span:before {
+	color: #8da1b9da;
+}
+
+/* overrides color-values for the Match Braces plugin
+ * https://prismjs.com/plugins/match-braces/
+ */
+.rainbow-braces .token.token.punctuation.brace-level-1,
+.rainbow-braces .token.token.punctuation.brace-level-5,
+.rainbow-braces .token.token.punctuation.brace-level-9 {
+	color: #e6d37a;
+}
+
+.rainbow-braces .token.token.punctuation.brace-level-2,
+.rainbow-braces .token.token.punctuation.brace-level-6,
+.rainbow-braces .token.token.punctuation.brace-level-10 {
+	color: #f4adf4;
+}
+
+.rainbow-braces .token.token.punctuation.brace-level-3,
+.rainbow-braces .token.token.punctuation.brace-level-7,
+.rainbow-braces .token.token.punctuation.brace-level-11 {
+	color: #6cb8e6;
+}
+
+.rainbow-braces .token.token.punctuation.brace-level-4,
+.rainbow-braces .token.token.punctuation.brace-level-8,
+.rainbow-braces .token.token.punctuation.brace-level-12 {
+	color: #c699e3;
+}
+
+/* overrides color-values for the Diff Highlight plugin
+ * https://prismjs.com/plugins/diff-highlight/
+ */
+pre.diff-highlight > code .token.token.deleted:not(.prefix),
+pre > code.diff-highlight .token.token.deleted:not(.prefix) {
+	background-color: #cd66601f;
+}
+
+pre.diff-highlight > code .token.token.inserted:not(.prefix),
+pre > code.diff-highlight .token.token.inserted:not(.prefix) {
+	background-color: #91d0761f;
+}
+
+/* overrides color-values for the Command Line plugin
+ * https://prismjs.com/plugins/command-line/
+ */
+.command-line .command-line-prompt {
+	border-right: 1px solid #0b121b;
+}
+
+.command-line .command-line-prompt > span:before {
+	color: #8da1b9da;
+}

styles/prism_themes/prism-coy-without-shadows.css

@@ -0,0 +1,140 @@
+/**
+ * Coy without shadows
+ * Based on Tim Shedor's Coy theme for prism.js
+ * Author: RunDevelopment
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: black;
+	background: none;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	position: relative;
+	border-left: 10px solid #358ccb;
+	box-shadow: -1px 0 0 0 #358ccb, 0 0 0 1px #dfdfdf;
+	background-color: #fdfdfd;
+	background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
+	background-size: 3em 3em;
+	background-origin: content-box;
+	background-attachment: local;
+	margin: .5em 0;
+	padding: 0 1em;
+}
+
+pre[class*="language-"] > code {
+	display: block;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	position: relative;
+	padding: .2em;
+	border-radius: 0.3em;
+	color: #c92c2c;
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	display: inline;
+	white-space: normal;
+	background-color: #fdfdfd;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #7D8B99;
+}
+
+.token.punctuation {
+	color: #5F6364;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.function-name,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #c92c2c;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.function,
+.token.builtin,
+.token.inserted {
+	color: #2f9c0a;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.token.variable {
+	color: #a67f59;
+	background: rgba(255, 255, 255, 0.5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword,
+.token.class-name {
+	color: #1990b8;
+}
+
+.token.regex,
+.token.important {
+	color: #e90;
+}
+
+.language-css .token.string,
+.style .token.string {
+	color: #a67f59;
+	background: rgba(255, 255, 255, 0.5);
+}
+
+.token.important {
+	font-weight: normal;
+}
+
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.token.namespace {
+	opacity: .7;
+}

styles/prism_themes/prism-darcula.css

@@ -0,0 +1,159 @@
+/**
+ * Darcula theme
+ *
+ * Adapted from a theme based on:
+ * IntelliJ Darcula Theme (https://github.com/bulenkov/Darcula)
+ *
+ * @author Alexandre Paradis <service.paradis@gmail.com>
+ * @version 1.0
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #a9b7c6;
+	font-family: Consolas, Monaco, 'Andale Mono', monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	color: inherit;
+	background: rgba(33, 66, 131, .85);
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	color: inherit;
+	background: rgba(33, 66, 131, .85);
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #2b2b2b;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.cdata {
+	color: #808080;
+}
+
+.token.delimiter,
+.token.boolean,
+.token.keyword,
+.token.selector,
+.token.important,
+.token.atrule {
+	color: #cc7832;
+}
+
+.token.operator,
+.token.punctuation,
+.token.attr-name {
+	color: #a9b7c6;
+}
+
+.token.tag,
+.token.tag .punctuation,
+.token.doctype,
+.token.builtin {
+	color: #e8bf6a;
+}
+
+.token.entity,
+.token.number,
+.token.symbol {
+	color: #6897bb;
+}
+
+.token.property,
+.token.constant,
+.token.variable {
+	color: #9876aa;
+}
+
+.token.string,
+.token.char {
+	color: #6a8759;
+}
+
+.token.attr-value,
+.token.attr-value .punctuation {
+	color: #a5c261;
+}
+
+.token.attr-value .punctuation:first-child {
+	color: #a9b7c6;
+}
+
+.token.url {
+	color: #287bde;
+	text-decoration: underline;
+}
+
+.token.function {
+	color: #ffc66d;
+}
+
+.token.regex {
+	background: #364135;
+}
+
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.inserted {
+	background: #294436;
+}
+
+.token.deleted {
+	background: #484a4a;
+}
+
+code.language-css .token.property,
+code.language-css .token.property + .token.punctuation {
+	color: #a9b7c6;
+}
+
+code.language-css .token.id {
+	color: #ffc66d;
+}
+
+code.language-css .token.selector > .token.class,
+code.language-css .token.selector > .token.attribute,
+code.language-css .token.selector > .token.pseudo-class,
+code.language-css .token.selector > .token.pseudo-element {
+	color: #ffc66d;
+}

styles/prism_themes/prism-dracula.css

@@ -0,0 +1,122 @@
+/**
+ * Dracula Theme originally by Zeno Rocha [@zenorocha]
+ * https://draculatheme.com/
+ *
+ * Ported for PrismJS by Albert Vallverdu [@byverdu]
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #f8f8f2;
+	background: none;
+	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #282a36;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #6272a4;
+}
+
+.token.punctuation {
+	color: #f8f8f2;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #ff79c6;
+}
+
+.token.boolean,
+.token.number {
+	color: #bd93f9;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #50fa7b;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+	color: #f8f8f2;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+	color: #f1fa8c;
+}
+
+.token.keyword {
+	color: #8be9fd;
+}
+
+.token.regex,
+.token.important {
+	color: #ffb86c;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}

styles/prism_themes/prism-duotone-dark.css

@@ -0,0 +1,172 @@
+/*
+Name: Duotone Dark
+Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
+
+Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-evening-dark.css)
+Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
+*/
+
+code[class*="language-"],
+pre[class*="language-"] {
+	font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+	font-size: 14px;
+	line-height: 1.375;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+	background: #2a2734;
+	color: #9a86fd;
+}
+
+pre > code[class*="language-"] {
+	font-size: 1em;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #6a51e6;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #6a51e6;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #6c6783;
+}
+
+.token.punctuation {
+	color: #6c6783;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.tag,
+.token.operator,
+.token.number {
+	color: #e09142;
+}
+
+.token.property,
+.token.function {
+	color: #9a86fd;
+}
+
+.token.tag-id,
+.token.selector,
+.token.atrule-id {
+	color: #eeebff;
+}
+
+code.language-javascript,
+.token.attr-name {
+	color: #c4b9fe;
+}
+
+code.language-css,
+code.language-scss,
+.token.boolean,
+.token.string,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.language-scss .token.string,
+.style .token.string,
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.unit,
+.token.statement,
+.token.regex,
+.token.atrule {
+	color: #ffcc99;
+}
+
+.token.placeholder,
+.token.variable {
+	color: #ffcc99;
+}
+
+.token.deleted {
+	text-decoration: line-through;
+}
+
+.token.inserted {
+	border-bottom: 1px dotted #eeebff;
+	text-decoration: none;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.important {
+	color: #c4b9fe;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+pre > code.highlight {
+	outline: .4em solid #8a75f5;
+	outline-offset: .4em;
+}
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+.line-numbers.line-numbers .line-numbers-rows {
+	border-right-color: #2c2937;
+}
+
+.line-numbers .line-numbers-rows > span:before {
+	color: #3c3949;
+}
+
+/* overrides color-values for the Line Highlight plugin
+* http://prismjs.com/plugins/line-highlight/
+*/
+.line-highlight.line-highlight {
+	background: rgba(224, 145, 66, 0.2);
+	background: -webkit-linear-gradient(left, rgba(224, 145, 66, 0.2) 70%, rgba(224, 145, 66, 0));
+	background: linear-gradient(to right, rgba(224, 145, 66, 0.2) 70%, rgba(224, 145, 66, 0));
+}

styles/prism_themes/prism-duotone-earth.css

@@ -0,0 +1,172 @@
+/*
+Name:   Duotone Earth
+Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
+
+Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-earth-dark.css)
+Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
+*/
+
+code[class*="language-"],
+pre[class*="language-"] {
+	font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+	font-size: 14px;
+	line-height: 1.375;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+	background: #322d29;
+	color: #88786d;
+}
+
+pre > code[class*="language-"] {
+	font-size: 1em;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #6f5849;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #6f5849;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #6a5f58;
+}
+
+.token.punctuation {
+	color: #6a5f58;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.tag,
+.token.operator,
+.token.number {
+	color: #bfa05a;
+}
+
+.token.property,
+.token.function {
+	color: #88786d;
+}
+
+.token.tag-id,
+.token.selector,
+.token.atrule-id {
+	color: #fff3eb;
+}
+
+code.language-javascript,
+.token.attr-name {
+	color: #a48774;
+}
+
+code.language-css,
+code.language-scss,
+.token.boolean,
+.token.string,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.language-scss .token.string,
+.style .token.string,
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.unit,
+.token.statement,
+.token.regex,
+.token.atrule {
+	color: #fcc440;
+}
+
+.token.placeholder,
+.token.variable {
+	color: #fcc440;
+}
+
+.token.deleted {
+	text-decoration: line-through;
+}
+
+.token.inserted {
+	border-bottom: 1px dotted #fff3eb;
+	text-decoration: none;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.important {
+	color: #a48774;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+pre > code.highlight {
+	outline: .4em solid #816d5f;
+	outline-offset: .4em;
+}
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+.line-numbers.line-numbers .line-numbers-rows {
+	border-right-color: #35302b;
+}
+
+.line-numbers .line-numbers-rows > span:before {
+	color: #46403d;
+}
+
+/* overrides color-values for the Line Highlight plugin
+* http://prismjs.com/plugins/line-highlight/
+*/
+.line-highlight.line-highlight {
+	background: rgba(191, 160, 90, 0.2);
+	background: -webkit-linear-gradient(left, rgba(191, 160, 90, 0.2) 70%, rgba(191, 160, 90, 0));
+	background: linear-gradient(to right, rgba(191, 160, 90, 0.2) 70%, rgba(191, 160, 90, 0));
+}

styles/prism_themes/prism-duotone-forest.css

@@ -0,0 +1,172 @@
+/*
+Name:   Duotone Forest
+Author: by Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
+
+Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-forest-dark.css)
+Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
+*/
+
+code[class*="language-"],
+pre[class*="language-"] {
+	font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+	font-size: 14px;
+	line-height: 1.375;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+	background: #2a2d2a;
+	color: #687d68;
+}
+
+pre > code[class*="language-"] {
+	font-size: 1em;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #435643;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #435643;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #535f53;
+}
+
+.token.punctuation {
+	color: #535f53;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.tag,
+.token.operator,
+.token.number {
+	color: #a2b34d;
+}
+
+.token.property,
+.token.function {
+	color: #687d68;
+}
+
+.token.tag-id,
+.token.selector,
+.token.atrule-id {
+	color: #f0fff0;
+}
+
+code.language-javascript,
+.token.attr-name {
+	color: #b3d6b3;
+}
+
+code.language-css,
+code.language-scss,
+.token.boolean,
+.token.string,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.language-scss .token.string,
+.style .token.string,
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.unit,
+.token.statement,
+.token.regex,
+.token.atrule {
+	color: #e5fb79;
+}
+
+.token.placeholder,
+.token.variable {
+	color: #e5fb79;
+}
+
+.token.deleted {
+	text-decoration: line-through;
+}
+
+.token.inserted {
+	border-bottom: 1px dotted #f0fff0;
+	text-decoration: none;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.important {
+	color: #b3d6b3;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+pre > code.highlight {
+	outline: .4em solid #5c705c;
+	outline-offset: .4em;
+}
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+.line-numbers.line-numbers .line-numbers-rows {
+	border-right-color: #2c302c;
+}
+
+.line-numbers .line-numbers-rows > span:before {
+	color: #3b423b;
+}
+
+/* overrides color-values for the Line Highlight plugin
+* http://prismjs.com/plugins/line-highlight/
+*/
+.line-highlight.line-highlight {
+	background: rgba(162, 179, 77, 0.2);
+	background: -webkit-linear-gradient(left, rgba(162, 179, 77, 0.2) 70%, rgba(162, 179, 77, 0));
+	background: linear-gradient(to right, rgba(162, 179, 77, 0.2) 70%, rgba(162, 179, 77, 0));
+}

styles/prism_themes/prism-duotone-light.css

@@ -0,0 +1,172 @@
+/*
+Name:   Duotone Light
+Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
+
+Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-morning-light.css)
+Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
+*/
+
+code[class*="language-"],
+pre[class*="language-"] {
+	font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+	font-size: 14px;
+	line-height: 1.375;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+	background: #faf8f5;
+	color: #728fcb;
+}
+
+pre > code[class*="language-"] {
+	font-size: 1em;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #faf8f5;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #faf8f5;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #b6ad9a;
+}
+
+.token.punctuation {
+	color: #b6ad9a;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.tag,
+.token.operator,
+.token.number {
+	color: #063289;
+}
+
+.token.property,
+.token.function {
+	color: #b29762;
+}
+
+.token.tag-id,
+.token.selector,
+.token.atrule-id {
+	color: #2d2006;
+}
+
+code.language-javascript,
+.token.attr-name {
+	color: #896724;
+}
+
+code.language-css,
+code.language-scss,
+.token.boolean,
+.token.string,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.language-scss .token.string,
+.style .token.string,
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.unit,
+.token.statement,
+.token.regex,
+.token.atrule {
+	color: #728fcb;
+}
+
+.token.placeholder,
+.token.variable {
+	color: #93abdc;
+}
+
+.token.deleted {
+	text-decoration: line-through;
+}
+
+.token.inserted {
+	border-bottom: 1px dotted #2d2006;
+	text-decoration: none;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.important {
+	color: #896724;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+pre > code.highlight {
+	outline: .4em solid #896724;
+	outline-offset: .4em;
+}
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+.line-numbers.line-numbers .line-numbers-rows {
+	border-right-color: #ece8de;
+}
+
+.line-numbers .line-numbers-rows > span:before {
+	color: #cdc4b1;
+}
+
+/* overrides color-values for the Line Highlight plugin
+ * http://prismjs.com/plugins/line-highlight/
+ */
+.line-highlight.line-highlight {
+	background: rgba(45, 32, 6, 0.2);
+	background: -webkit-linear-gradient(left, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0));
+	background: linear-gradient(to right, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0));
+}

styles/prism_themes/prism-duotone-sea.css

@@ -0,0 +1,172 @@
+/*
+Name: Duotone Sea
+Author: by Simurai, adapted from DuoTone themes by Simurai for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
+
+Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-sea-dark.css)
+Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
+*/
+
+code[class*="language-"],
+pre[class*="language-"] {
+	font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+	font-size: 14px;
+	line-height: 1.375;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+	background: #1d262f;
+	color: #57718e;
+}
+
+pre > code[class*="language-"] {
+	font-size: 1em;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #004a9e;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #004a9e;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #4a5f78;
+}
+
+.token.punctuation {
+	color: #4a5f78;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.tag,
+.token.operator,
+.token.number {
+	color: #0aa370;
+}
+
+.token.property,
+.token.function {
+	color: #57718e;
+}
+
+.token.tag-id,
+.token.selector,
+.token.atrule-id {
+	color: #ebf4ff;
+}
+
+code.language-javascript,
+.token.attr-name {
+	color: #7eb6f6;
+}
+
+code.language-css,
+code.language-scss,
+.token.boolean,
+.token.string,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.language-scss .token.string,
+.style .token.string,
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.unit,
+.token.statement,
+.token.regex,
+.token.atrule {
+	color: #47ebb4;
+}
+
+.token.placeholder,
+.token.variable {
+	color: #47ebb4;
+}
+
+.token.deleted {
+	text-decoration: line-through;
+}
+
+.token.inserted {
+	border-bottom: 1px dotted #ebf4ff;
+	text-decoration: none;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.important {
+	color: #7eb6f6;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+pre > code.highlight {
+	outline: .4em solid #34659d;
+	outline-offset: .4em;
+}
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+.line-numbers.line-numbers .line-numbers-rows {
+	border-right-color: #1f2932;
+}
+
+.line-numbers .line-numbers-rows > span:before {
+	color: #2c3847;
+}
+
+/* overrides color-values for the Line Highlight plugin
+* http://prismjs.com/plugins/line-highlight/
+*/
+.line-highlight.line-highlight {
+	background: rgba(10, 163, 112, 0.2);
+	background: -webkit-linear-gradient(left, rgba(10, 163, 112, 0.2) 70%, rgba(10, 163, 112, 0));
+	background: linear-gradient(to right, rgba(10, 163, 112, 0.2) 70%, rgba(10, 163, 112, 0));
+}

styles/prism_themes/prism-duotone-space.css

@@ -0,0 +1,172 @@
+/*
+Name: Duotone Space
+Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
+
+Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-space-dark.css)
+Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
+*/
+
+code[class*="language-"],
+pre[class*="language-"] {
+	font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+	font-size: 14px;
+	line-height: 1.375;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+	background: #24242e;
+	color: #767693;
+}
+
+pre > code[class*="language-"] {
+	font-size: 1em;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #5151e6;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #5151e6;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #5b5b76;
+}
+
+.token.punctuation {
+	color: #5b5b76;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.tag,
+.token.operator,
+.token.number {
+	color: #dd672c;
+}
+
+.token.property,
+.token.function {
+	color: #767693;
+}
+
+.token.tag-id,
+.token.selector,
+.token.atrule-id {
+	color: #ebebff;
+}
+
+code.language-javascript,
+.token.attr-name {
+	color: #aaaaca;
+}
+
+code.language-css,
+code.language-scss,
+.token.boolean,
+.token.string,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.language-scss .token.string,
+.style .token.string,
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.unit,
+.token.statement,
+.token.regex,
+.token.atrule {
+	color: #fe8c52;
+}
+
+.token.placeholder,
+.token.variable {
+	color: #fe8c52;
+}
+
+.token.deleted {
+	text-decoration: line-through;
+}
+
+.token.inserted {
+	border-bottom: 1px dotted #ebebff;
+	text-decoration: none;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.important {
+	color: #aaaaca;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+pre > code.highlight {
+	outline: .4em solid #7676f4;
+	outline-offset: .4em;
+}
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+.line-numbers.line-numbers .line-numbers-rows {
+	border-right-color: #262631;
+}
+
+.line-numbers .line-numbers-rows > span:before {
+	color: #393949;
+}
+
+/* overrides color-values for the Line Highlight plugin
+* http://prismjs.com/plugins/line-highlight/
+*/
+.line-highlight.line-highlight {
+	background: rgba(221, 103, 44, 0.2);
+	background: -webkit-linear-gradient(left, rgba(221, 103, 44, 0.2) 70%, rgba(221, 103, 44, 0));
+	background: linear-gradient(to right, rgba(221, 103, 44, 0.2) 70%, rgba(221, 103, 44, 0));
+}

styles/prism_themes/prism-ghcolors.css

@@ -0,0 +1,122 @@
+/**
+ * GHColors theme by Avi Aryan (http://aviaryan.in)
+ * Inspired by Github syntax coloring
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #393A34;
+	font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	font-size: .9em;
+	line-height: 1.2em;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre > code[class*="language-"] {
+	font-size: 1em;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	background: #b3d4fc;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	border: 1px solid #dddddd;
+	background-color: white;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .2em;
+	padding-top: 1px;
+	padding-bottom: 1px;
+	background: #f8f8f8;
+	border: 1px solid #dddddd;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #999988;
+	font-style: italic;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.string,
+.token.attr-value {
+	color: #e3116c;
+}
+
+.token.punctuation,
+.token.operator {
+	color: #393A34; /* no highlight */
+}
+
+.token.entity,
+.token.url,
+.token.symbol,
+.token.number,
+.token.boolean,
+.token.variable,
+.token.constant,
+.token.property,
+.token.regex,
+.token.inserted {
+	color: #36acaa;
+}
+
+.token.atrule,
+.token.keyword,
+.token.attr-name,
+.language-autohotkey .token.selector {
+	color: #00a4db;
+}
+
+.token.function,
+.token.deleted,
+.language-autohotkey .token.tag {
+	color: #9a050f;
+}
+
+.token.tag,
+.token.selector,
+.language-autohotkey .token.keyword {
+	color: #00009f;
+}
+
+.token.important,
+.token.function,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}

styles/prism_themes/prism-gruvbox-dark.css

@@ -0,0 +1,143 @@
+/**
+ * Gruvbox dark theme
+ *
+ * Adapted from a theme based on:
+ * Vim Gruvbox dark Theme (https://github.com/morhetz/gruvbox)
+ *
+ * @author Azat S. <to@azat.io>
+ * @version 1.0
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #ebdbb2; /* fg1 / fg */
+	font-family: Consolas, Monaco, "Andale Mono", monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+	color: #fbf1c7; /* fg0 */
+	background: #7c6f64; /* bg4 */
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+	color: #fbf1c7; /* fg0 */
+	background: #7c6f64; /* bg4 */
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: 0.5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #1d2021; /* bg0_h */
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: 0.1em;
+	border-radius: 0.3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.cdata {
+	color: #a89984; /* fg4 / gray1 */
+}
+
+.token.delimiter,
+.token.boolean,
+.token.keyword,
+.token.selector,
+.token.important,
+.token.atrule {
+	color: #fb4934; /* red2 */
+}
+
+.token.operator,
+.token.punctuation,
+.token.attr-name {
+	color: #a89984; /* fg4 / gray1 */
+}
+
+.token.tag,
+.token.tag .punctuation,
+.token.doctype,
+.token.builtin {
+	color: #fabd2f; /* yellow2 */
+}
+
+.token.entity,
+.token.number,
+.token.symbol {
+	color: #d3869b; /* purple2 */
+}
+
+.token.property,
+.token.constant,
+.token.variable {
+	color: #fb4934; /* red2 */
+}
+
+.token.string,
+.token.char {
+	color: #b8bb26; /* green2 */
+}
+
+.token.attr-value,
+.token.attr-value .punctuation {
+	color: #a89984; /* fg4 / gray1 */
+}
+
+.token.url {
+	color: #b8bb26; /* green2 */
+	text-decoration: underline;
+}
+
+.token.function {
+	color: #fabd2f; /* yellow2 */
+}
+
+.token.regex {
+	background: #b8bb26; /* green2 */
+}
+
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.inserted {
+	background: #a89984; /* fg4 / gray1 */
+}
+
+.token.deleted {
+	background: #fb4934; /* red2 */
+}

styles/prism_themes/prism-gruvbox-light.css

@@ -0,0 +1,143 @@
+/**
+ * Gruvbox light theme
+ *
+ * Based on Gruvbox: https://github.com/morhetz/gruvbox
+ * Adapted from PrismJS gruvbox-dark theme: https://github.com/schnerring/prism-themes/blob/master/themes/prism-gruvbox-dark.css
+ *
+ * @author Michael Schnerring (https://schnerring.net)
+ * @version 1.0
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #3c3836; /* fg1 / fg */
+	font-family: Consolas, Monaco, "Andale Mono", monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+	color: #282828; /* fg0 */
+	background: #a89984; /* bg4 */
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+	color: #282828; /* fg0 */
+	background: #a89984; /* bg4 */
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: 0.5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #f9f5d7; /* bg0_h */
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: 0.1em;
+	border-radius: 0.3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.cdata {
+	color: #7c6f64; /* fg4 / gray1 */
+}
+
+.token.delimiter,
+.token.boolean,
+.token.keyword,
+.token.selector,
+.token.important,
+.token.atrule {
+	color: #9d0006; /* red2 */
+}
+
+.token.operator,
+.token.punctuation,
+.token.attr-name {
+	color: #7c6f64; /* fg4 / gray1 */
+}
+
+.token.tag,
+.token.tag .punctuation,
+.token.doctype,
+.token.builtin {
+	color: #b57614; /* yellow2 */
+}
+
+.token.entity,
+.token.number,
+.token.symbol {
+	color: #8f3f71; /* purple2 */
+}
+
+.token.property,
+.token.constant,
+.token.variable {
+	color: #9d0006; /* red2 */
+}
+
+.token.string,
+.token.char {
+	color: #797403; /* green2 */
+}
+
+.token.attr-value,
+.token.attr-value .punctuation {
+	color: #7c6f64; /* fg4 / gray1 */
+}
+
+.token.url {
+	color: #797403; /* green2 */
+	text-decoration: underline;
+}
+
+.token.function {
+	color: #b57614; /* yellow2 */
+}
+
+.token.regex {
+	background: #797403; /* green2 */
+}
+
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.inserted {
+	background: #7c6f64; /* fg4 / gray1 */
+}
+
+.token.deleted {
+	background: #9d0006; /* red2 */
+}

styles/prism_themes/prism-holi-theme.css

@@ -0,0 +1,119 @@
+/**
+ * MIT License
+ * Copyright (c) 2021 Ayush Saini
+ * Holi Theme for prism.js
+ * @author Ayush Saini <@AyushCodes on Twitter>
+ */
+
+code[class*='language-'],
+pre[class*='language-'] {
+	color: #d6e7ff;
+	background: #030314;
+	text-shadow: none;
+	font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+	font-size: 1em;
+	line-height: 1.5;
+	letter-spacing: .2px;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	text-align: left;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection,
+code[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection,
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+code[class*='language-']::selection,
+code[class*='language-'] ::selection {
+	color: inherit;
+	background: #1d3b54;
+	text-shadow: none;
+}
+
+pre[class*='language-'] {
+	border: 1px solid #2a4555;
+	border-radius: 5px;
+	padding: 1.5em 1em;
+	margin: 1em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*='language-'] {
+	color: #f0f6f6;
+	background: #2a4555;
+	padding: 0.2em 0.3em;
+	border-radius: 0.2em;
+	box-decoration-break: clone;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #446e69;
+}
+
+.token.punctuation {
+	color: #d6b007;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #d6e7ff;
+}
+
+.token.selector,
+.token.attr-name,
+.token.builtin,
+.token.inserted {
+	color: #e60067;
+}
+
+.token.string,
+.token.char {
+	color: #49c6ec;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #ec8e01;
+	background: transparent;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #0fe468;
+}
+
+.token.function,
+.token.class-name {
+	color: #78f3e9;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #d6e7ff;
+}

styles/prism_themes/prism-hopscotch.css

@@ -0,0 +1,132 @@
+@import url(https://fonts.googleapis.com/css?family=Fira+Mono);
+/*
+ * Hopscotch
+ * by Jan T. Sott
+ * https://github.com/idleberg/Hopscotch
+ *
+ * This work is licensed under the Creative Commons CC0 1.0 Universal License
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	font-family: "Fira Mono", Menlo, Monaco, "Lucida Console", "Courier New", Courier, monospace;
+	font-size: 16px;
+	line-height: 1.375;
+	direction: ltr;
+	text-align: left;
+	word-spacing: normal;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+	white-space: pre;
+	white-space: pre-wrap;
+	word-break: break-all;
+	word-wrap: break-word;
+	background: #322931;
+	color: #b9b5b8;
+}
+
+pre > code[class*="language-"] {
+	font-size: 1em;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #797379;
+}
+
+.token.punctuation {
+	color: #b9b5b8;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.null,
+.token.operator,
+.token.boolean,
+.token.number {
+	color: #fd8b19;
+}
+
+.token.property {
+	color: #fdcc59;
+}
+
+.token.tag {
+	color: #1290bf;
+}
+
+.token.string {
+	color: #149b93;
+}
+
+.token.selector {
+	color: #c85e7c;
+}
+
+.token.attr-name {
+	color: #fd8b19;
+}
+
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #149b93;
+}
+
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.unit {
+	color: #8fc13e;
+}
+
+.token.statement,
+.token.regex,
+.token.atrule {
+	color: #149b93;
+}
+
+.token.placeholder,
+.token.variable {
+	color: #1290bf;
+}
+
+.token.important {
+	color: #dd464c;
+	font-weight: bold;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+pre > code.highlight {
+	outline: .4em solid red;
+	outline-offset: .4em;
+}

styles/prism_themes/prism-laserwave.css

@@ -0,0 +1,133 @@
+/*
+ * Laserwave Theme originally by Jared Jones for Visual Studio Code
+ * https://github.com/Jaredk3nt/laserwave
+ *
+ * Ported for PrismJS by Simon Jespersen [https://github.com/simjes]
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	background: #27212e;
+	color: #ffffff;
+	font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; /* this is the default */
+	/* The following properties are standard, please leave them as they are */
+	font-size: 1em;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	line-height: 1.5;
+	-moz-tab-size: 2;
+	-o-tab-size: 2;
+	tab-size: 2;
+	/* The following properties are also standard */
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection,
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection {
+	background: #eb64b927;
+	color: inherit;
+}
+
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection,
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection {
+	background: #eb64b927;
+	color: inherit;
+}
+
+/* Properties specific to code blocks */
+pre[class*="language-"] {
+	padding: 1em; /* this is standard */
+	margin: 0.5em 0; /* this is the default */
+	overflow: auto; /* this is standard */
+	border-radius: 0.5em;
+}
+
+/* Properties specific to inline code */
+:not(pre) > code[class*="language-"] {
+	padding: 0.2em 0.3em;
+	border-radius: 0.5rem;
+	white-space: normal; /* this is standard */
+}
+
+.token.comment,
+.token.prolog,
+.token.cdata {
+	color: #91889b;
+}
+
+.token.punctuation {
+	color: #7b6995;
+}
+
+.token.builtin,
+.token.constant,
+.token.boolean {
+	color: #ffe261;
+}
+
+.token.number {
+	color: #b381c5;
+}
+
+.token.important,
+.token.atrule,
+.token.property,
+.token.keyword {
+	color: #40b4c4;
+}
+
+.token.doctype,
+.token.operator,
+.token.inserted,
+.token.tag,
+.token.class-name,
+.token.symbol {
+	color: #74dfc4;
+}
+
+.token.attr-name,
+.token.function,
+.token.deleted,
+.token.selector {
+	color: #eb64b9;
+}
+
+.token.attr-value,
+.token.regex,
+.token.char,
+.token.string {
+	color: #b4dce7;
+}
+
+.token.entity,
+.token.url,
+.token.variable {
+	color: #ffffff;
+}
+
+/* The following rules are pretty similar across themes, but feel free to adjust them */
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.token.namespace {
+	opacity: 0.7;
+}

styles/prism_themes/prism-lucario.css

@@ -0,0 +1,122 @@
+/**
+ * Lucario Theme originally by Raphael Amorim [@raphamorim]
+ * https://github.com/raphamorim/lucario
+ *
+ * Ported for PrismJS by Christopher Kapic [@christopher-kapic]
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #f8f8f2;
+	background: none;
+	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+	font-family: Monaco, Consolas, 'Andale Mono', 'Ubuntu Mono', monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #263E52;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #5c98cd;
+}
+
+.token.punctuation {
+	color: #f8f8f2;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #F05E5D;
+}
+
+.token.boolean,
+.token.number {
+	color: #BC94F9;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #FCFCD6;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+	color: #f8f8f2;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+	color: #66D8EF;
+}
+
+.token.keyword {
+	color: #6EB26E;
+}
+
+.token.regex,
+.token.important {
+	color: #F05E5D;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}

styles/prism_themes/prism-material-dark.css

@@ -0,0 +1,205 @@
+code[class*="language-"],
+pre[class*="language-"] {
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	color: #eee;
+	background: #2f2f2f;
+	font-family: Roboto Mono, monospace;
+	font-size: 1em;
+	line-height: 1.5em;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+code[class*="language-"]::-moz-selection,
+pre[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection,
+pre[class*="language-"] ::-moz-selection {
+	background: #363636;
+}
+
+code[class*="language-"]::selection,
+pre[class*="language-"]::selection,
+code[class*="language-"] ::selection,
+pre[class*="language-"] ::selection {
+	background: #363636;
+}
+
+:not(pre) > code[class*="language-"] {
+	white-space: normal;
+	border-radius: 0.2em;
+	padding: 0.1em;
+}
+
+pre[class*="language-"] {
+	overflow: auto;
+	position: relative;
+	margin: 0.5em 0;
+	padding: 1.25em 1em;
+}
+
+.language-css > code,
+.language-sass > code,
+.language-scss > code {
+	color: #fd9170;
+}
+
+[class*="language-"] .namespace {
+	opacity: 0.7;
+}
+
+.token.atrule {
+	color: #c792ea;
+}
+
+.token.attr-name {
+	color: #ffcb6b;
+}
+
+.token.attr-value {
+	color: #a5e844;
+}
+
+.token.attribute {
+	color: #a5e844;
+}
+
+.token.boolean {
+	color: #c792ea;
+}
+
+.token.builtin {
+	color: #ffcb6b;
+}
+
+.token.cdata {
+	color: #80cbc4;
+}
+
+.token.char {
+	color: #80cbc4;
+}
+
+.token.class {
+	color: #ffcb6b;
+}
+
+.token.class-name {
+	color: #f2ff00;
+}
+
+.token.comment {
+	color: #616161;
+}
+
+.token.constant {
+	color: #c792ea;
+}
+
+.token.deleted {
+	color: #ff6666;
+}
+
+.token.doctype {
+	color: #616161;
+}
+
+.token.entity {
+	color: #ff6666;
+}
+
+.token.function {
+	color: #c792ea;
+}
+
+.token.hexcode {
+	color: #f2ff00;
+}
+
+.token.id {
+	color: #c792ea;
+	font-weight: bold;
+}
+
+.token.important {
+	color: #c792ea;
+	font-weight: bold;
+}
+
+.token.inserted {
+	color: #80cbc4;
+}
+
+.token.keyword {
+	color: #c792ea;
+}
+
+.token.number {
+	color: #fd9170;
+}
+
+.token.operator {
+	color: #89ddff;
+}
+
+.token.prolog {
+	color: #616161;
+}
+
+.token.property {
+	color: #80cbc4;
+}
+
+.token.pseudo-class {
+	color: #a5e844;
+}
+
+.token.pseudo-element {
+	color: #a5e844;
+}
+
+.token.punctuation {
+	color: #89ddff;
+}
+
+.token.regex {
+	color: #f2ff00;
+}
+
+.token.selector {
+	color: #ff6666;
+}
+
+.token.string {
+	color: #a5e844;
+}
+
+.token.symbol {
+	color: #c792ea;
+}
+
+.token.tag {
+	color: #ff6666;
+}
+
+.token.unit {
+	color: #fd9170;
+}
+
+.token.url {
+	color: #ff6666;
+}
+
+.token.variable {
+	color: #ff6666;
+}

styles/prism_themes/prism-material-light.css

@@ -0,0 +1,207 @@
+code[class*="language-"],
+pre[class*="language-"] {
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	color: #90a4ae;
+	background: #fafafa;
+	font-family: Roboto Mono, monospace;
+	font-size: 1em;
+	line-height: 1.5em;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+code[class*="language-"]::-moz-selection,
+pre[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection,
+pre[class*="language-"] ::-moz-selection {
+	background: #cceae7;
+	color: #263238;
+}
+
+code[class*="language-"]::selection,
+pre[class*="language-"]::selection,
+code[class*="language-"] ::selection,
+pre[class*="language-"] ::selection {
+	background: #cceae7;
+	color: #263238;
+}
+
+:not(pre) > code[class*="language-"] {
+	white-space: normal;
+	border-radius: 0.2em;
+	padding: 0.1em;
+}
+
+pre[class*="language-"] {
+	overflow: auto;
+	position: relative;
+	margin: 0.5em 0;
+	padding: 1.25em 1em;
+}
+
+.language-css > code,
+.language-sass > code,
+.language-scss > code {
+	color: #f76d47;
+}
+
+[class*="language-"] .namespace {
+	opacity: 0.7;
+}
+
+.token.atrule {
+	color: #7c4dff;
+}
+
+.token.attr-name {
+	color: #39adb5;
+}
+
+.token.attr-value {
+	color: #f6a434;
+}
+
+.token.attribute {
+	color: #f6a434;
+}
+
+.token.boolean {
+	color: #7c4dff;
+}
+
+.token.builtin {
+	color: #39adb5;
+}
+
+.token.cdata {
+	color: #39adb5;
+}
+
+.token.char {
+	color: #39adb5;
+}
+
+.token.class {
+	color: #39adb5;
+}
+
+.token.class-name {
+	color: #6182b8;
+}
+
+.token.comment {
+	color: #aabfc9;
+}
+
+.token.constant {
+	color: #7c4dff;
+}
+
+.token.deleted {
+	color: #e53935;
+}
+
+.token.doctype {
+	color: #aabfc9;
+}
+
+.token.entity {
+	color: #e53935;
+}
+
+.token.function {
+	color: #7c4dff;
+}
+
+.token.hexcode {
+	color: #f76d47;
+}
+
+.token.id {
+	color: #7c4dff;
+	font-weight: bold;
+}
+
+.token.important {
+	color: #7c4dff;
+	font-weight: bold;
+}
+
+.token.inserted {
+	color: #39adb5;
+}
+
+.token.keyword {
+	color: #7c4dff;
+}
+
+.token.number {
+	color: #f76d47;
+}
+
+.token.operator {
+	color: #39adb5;
+}
+
+.token.prolog {
+	color: #aabfc9;
+}
+
+.token.property {
+	color: #39adb5;
+}
+
+.token.pseudo-class {
+	color: #f6a434;
+}
+
+.token.pseudo-element {
+	color: #f6a434;
+}
+
+.token.punctuation {
+	color: #39adb5;
+}
+
+.token.regex {
+	color: #6182b8;
+}
+
+.token.selector {
+	color: #e53935;
+}
+
+.token.string {
+	color: #f6a434;
+}
+
+.token.symbol {
+	color: #7c4dff;
+}
+
+.token.tag {
+	color: #e53935;
+}
+
+.token.unit {
+	color: #f76d47;
+}
+
+.token.url {
+	color: #e53935;
+}
+
+.token.variable {
+	color: #e53935;
+}

styles/prism_themes/prism-material-oceanic.css

@@ -0,0 +1,210 @@
+code[class*="language-"],
+pre[class*="language-"] {
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	color: #c3cee3;
+	background: #263238;
+	font-family: Roboto Mono, monospace;
+	font-size: 1em;
+	line-height: 1.5em;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+code[class*="language-"]::-moz-selection,
+pre[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection,
+pre[class*="language-"] ::-moz-selection {
+	background: #363636;
+}
+
+code[class*="language-"]::selection,
+pre[class*="language-"]::selection,
+code[class*="language-"] ::selection,
+pre[class*="language-"] ::selection {
+	background: #363636;
+}
+
+:not(pre) > code[class*="language-"] {
+	white-space: normal;
+	border-radius: 0.2em;
+	padding: 0.1em;
+}
+
+pre[class*="language-"] {
+	overflow: auto;
+	position: relative;
+	margin: 0.5em 0;
+	padding: 1.25em 1em;
+}
+
+.language-css > code,
+.language-sass > code,
+.language-scss > code {
+	color: #fd9170;
+}
+
+[class*="language-"] .namespace {
+	opacity: 0.7;
+}
+
+.token.atrule {
+	color: #c792ea;
+}
+
+.token.attr-name {
+	color: #ffcb6b;
+}
+
+.token.attr-value {
+	color: #c3e88d;
+}
+
+.token.attribute {
+	color: #c3e88d;
+}
+
+.token.boolean {
+	color: #c792ea;
+}
+
+.token.builtin {
+	color: #ffcb6b;
+}
+
+.token.cdata {
+	color: #80cbc4;
+}
+
+.token.char {
+	color: #80cbc4;
+}
+
+.token.class {
+	color: #ffcb6b;
+}
+
+.token.class-name {
+	color: #f2ff00;
+}
+
+.token.color {
+	color: #f2ff00;
+}
+
+.token.comment {
+	color: #546e7a;
+}
+
+.token.constant {
+	color: #c792ea;
+}
+
+.token.deleted {
+	color: #f07178;
+}
+
+.token.doctype {
+	color: #546e7a;
+}
+
+.token.entity {
+	color: #f07178;
+}
+
+.token.function {
+	color: #c792ea;
+}
+
+.token.hexcode {
+	color: #f2ff00;
+}
+
+.token.id {
+	color: #c792ea;
+	font-weight: bold;
+}
+
+.token.important {
+	color: #c792ea;
+	font-weight: bold;
+}
+
+.token.inserted {
+	color: #80cbc4;
+}
+
+.token.keyword {
+	color: #c792ea;
+	font-style: italic;
+}
+
+.token.number {
+	color: #fd9170;
+}
+
+.token.operator {
+	color: #89ddff;
+}
+
+.token.prolog {
+	color: #546e7a;
+}
+
+.token.property {
+	color: #80cbc4;
+}
+
+.token.pseudo-class {
+	color: #c3e88d;
+}
+
+.token.pseudo-element {
+	color: #c3e88d;
+}
+
+.token.punctuation {
+	color: #89ddff;
+}
+
+.token.regex {
+	color: #f2ff00;
+}
+
+.token.selector {
+	color: #f07178;
+}
+
+.token.string {
+	color: #c3e88d;
+}
+
+.token.symbol {
+	color: #c792ea;
+}
+
+.token.tag {
+	color: #f07178;
+}
+
+.token.unit {
+	color: #f07178;
+}
+
+.token.url {
+	color: #fd9170;
+}
+
+.token.variable {
+	color: #f07178;
+}

styles/prism_themes/prism-night-owl.css

@@ -0,0 +1,158 @@
+/**
+ * MIT License
+ * Copyright (c) 2018 Sarah Drasner
+ * Sarah Drasner's[@sdras] Night Owl
+ * Ported by Sara vieria [@SaraVieira]
+ * Added by Souvik Mandal [@SimpleIndian]
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #d6deeb;
+	font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+	font-size: 1em;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: rgba(29, 59, 83, 0.99);
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: rgba(29, 59, 83, 0.99);
+}
+
+@media print {
+	code[class*="language-"],
+	pre[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: 0.5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	color: white;
+	background: #011627;
+}
+
+:not(pre) > code[class*="language-"] {
+	padding: 0.1em;
+	border-radius: 0.3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.cdata {
+	color: rgb(99, 119, 119);
+	font-style: italic;
+}
+
+.token.punctuation {
+	color: rgb(199, 146, 234);
+}
+
+.namespace {
+	color: rgb(178, 204, 214);
+}
+
+.token.deleted {
+	color: rgba(239, 83, 80, 0.56);
+	font-style: italic;
+}
+
+.token.symbol,
+.token.property {
+	color: rgb(128, 203, 196);
+}
+
+.token.tag,
+.token.operator,
+.token.keyword {
+	color: rgb(127, 219, 202);
+}
+
+.token.boolean {
+	color: rgb(255, 88, 116);
+}
+
+.token.number {
+	color: rgb(247, 140, 108);
+}
+
+.token.constant,
+.token.function,
+.token.builtin,
+.token.char {
+	color: rgb(130, 170, 255);
+}
+
+.token.selector,
+.token.doctype {
+	color: rgb(199, 146, 234);
+	font-style: italic;
+}
+
+.token.attr-name,
+.token.inserted {
+	color: rgb(173, 219, 103);
+	font-style: italic;
+}
+
+.token.string,
+.token.url,
+.token.entity,
+.language-css .token.string,
+.style .token.string {
+	color: rgb(173, 219, 103);
+}
+
+.token.class-name,
+.token.atrule,
+.token.attr-value {
+	color: rgb(255, 203, 139);
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: rgb(214, 222, 235);
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}

styles/prism_themes/prism-nord.css

@@ -0,0 +1,124 @@
+/**
+ * Nord Theme Originally by Arctic Ice Studio
+ * https://nordtheme.com
+ *
+ * Ported for PrismJS by Zane Hitchcoxc (@zwhitchcox) and Gabriel Ramos (@gabrieluizramos)
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #f8f8f2;
+	background: none;
+	font-family: "Fira Code", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #2E3440;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #636f88;
+}
+
+.token.punctuation {
+	color: #81A1C1;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #81A1C1;
+}
+
+.token.number {
+	color: #B48EAD;
+}
+
+.token.boolean {
+	color: #81A1C1;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #A3BE8C;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+	color: #81A1C1;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+	color: #88C0D0;
+}
+
+.token.keyword {
+	color: #81A1C1;
+}
+
+.token.regex,
+.token.important {
+	color: #EBCB8B;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}