From 6daa1a6d03c81971359dab2e77cd37169e1e3a5d Mon Sep 17 00:00:00 2001
From: Vojtech Mares <iam@vojtechmares.com>
Date: Wed, 11 Jan 2023 15:45:51 +0100
Subject: [PATCH] refactor: use mdx for content

- less dependencies
- no need for gray-matter
- no need for extra utils and interactions with filesystem
---
 components/trainingpage/Training.tsx          | 117 -----
 components/trainingpage/TrainingLayout.tsx    | 135 +++++
 components/trainingpage/TrainingListGrid.tsx  | 135 -----
 .../logos => images/logos/tools}/argo.png     | Bin
 .../logos => images/logos/tools}/git.png      | Bin
 .../logos/tools}/kubernetes.png               | Bin
 .../logos/tools}/terraform.png                | Bin
 lib/cms/training.ts                           |  51 --
 lib/markdownToHTML.ts                         |   9 -
 next.config.js                                |  20 +-
 package.json                                  |   8 +-
 pages/skoleni/[slug].tsx                      |  95 ----
 .../argocd.md => pages/skoleni/argocd.mdx     |  30 +-
 .../training/git.md => pages/skoleni/git.mdx  |  28 +-
 pages/skoleni/index.tsx                       |  56 --
 .../skoleni/kubernetes.mdx                    |  30 +-
 .../skoleni/terraform.mdx                     |  32 +-
 pnpm-lock.yaml                                | 483 +++++++++++++-----
 types/training.ts                             |  18 -
 19 files changed, 603 insertions(+), 644 deletions(-)
 delete mode 100644 components/trainingpage/Training.tsx
 create mode 100644 components/trainingpage/TrainingLayout.tsx
 delete mode 100644 components/trainingpage/TrainingListGrid.tsx
 rename {public/images/logos => images/logos/tools}/argo.png (100%)
 rename {public/images/logos => images/logos/tools}/git.png (100%)
 rename {public/images/logos => images/logos/tools}/kubernetes.png (100%)
 rename {public/images/logos => images/logos/tools}/terraform.png (100%)
 delete mode 100644 lib/cms/training.ts
 delete mode 100644 lib/markdownToHTML.ts
 delete mode 100644 pages/skoleni/[slug].tsx
 rename content/training/argocd.md => pages/skoleni/argocd.mdx (53%)
 rename content/training/git.md => pages/skoleni/git.mdx (70%)
 delete mode 100644 pages/skoleni/index.tsx
 rename content/training/kubernetes.md => pages/skoleni/kubernetes.mdx (68%)
 rename content/training/terraform.md => pages/skoleni/terraform.mdx (63%)
 delete mode 100644 types/training.ts

diff --git a/components/trainingpage/Training.tsx b/components/trainingpage/Training.tsx
deleted file mode 100644
index 219aa23..0000000
--- a/components/trainingpage/Training.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import Image from "next/image";
-
-import TrainingType from "@/types/training";
-import { Container } from "@/components/Container";
-import { Button } from "@/components/Button";
-
-type Props = {
-  training: TrainingType;
-};
-
-export const Training = ({ training }: Props) => {
-  const formatter = new Intl.NumberFormat("cs", {
-    style: "currency",
-    currency: "CZK",
-    maximumFractionDigits: 0,
-  });
-  return (
-    <>
-      <div className="pb-14 sm:pb-20 lg:pb-32">
-        <div className="bg-black pt-16 pb-16">
-          <Container className="flex justify-around">
-            <Image
-              src={training.logo}
-              className="h-32 w-32 rounded-full"
-              width="1500"
-              height="1500"
-              alt=""
-            />
-            <h2 className="ml-4 text-center font-display self-center text-4xl tracking-tight text-white sm:text-6xl">
-              Školení {training.name}
-            </h2>
-          </Container>
-        </div>
-        <Container>
-          <div className="mt-12 md:grid md:grid-cols-5 md:gap-x-4 md:gap-y-4">
-            <div className="md:col-span-3">
-              <div
-                className="prose prose-slate prose-h1:text-2xl prose-h1:font-medium prose-h2:text-xl prose-h2:font-medium prose-h3:text-lg prose-h3:font-medium prose-li:my-0"
-                dangerouslySetInnerHTML={{ __html: training.content }}
-              />
-            </div>
-            <div className="mt-8 md:col-span-2 md:mt-0">
-              {training.days === 2 ? (
-                <div className=" mb-8 rounded-lg bg-blue-50 p-4 shadow">
-                  <div className="flex">
-                    <div className="flex-shrink-0">
-                      {/* <ExclamationTriangleIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" /> */}
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        className="h-5 w-5 text-blue-400"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div className="ml-3">
-                      <p className="text-blue-600">
-                        Toto školení je{" "}
-                        <span className="font-medium">
-                          dvoudenní.
-                        </span>
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              ) : (
-                <></>
-              )}
-              <div className="mt-8 overflow-hidden rounded-lg bg-slate-50 shadow md:mt-0">
-                <div className="px-4 py-5 sm:px-6">
-                  <h3 className="text-lg font-medium leading-6 text-black">
-                    Cena za školení
-                  </h3>
-                </div>
-                <div className="border-t border-slate-100 px-4 py-5">
-                  <dl className="sm:divide-y sm:divide-slate-400">
-                    <div className="py-4 sm:grid sm:grid-cols-2 sm:gap-4 sm:py-5 sm:px-6">
-                      <dt className="font-medium text-slate-700">
-                        Veřejný termín
-                      </dt>
-                      <dd className="mt-1 text-black sm:mt-0">
-                        {formatter.format(training.priceOpen)} bez DPH
-                      </dd>
-                    </div>
-                    <div className="py-4 sm:grid sm:grid-cols-2 sm:gap-4 sm:py-5 sm:px-6">
-                      <dt className="font-medium text-slate-700">
-                        Firemní školení
-                      </dt>
-                      <dd className="mt-1 text-black sm:mt-0">
-                        {formatter.format(training.priceCompany)} bez DPH
-                      </dd>
-                    </div>
-                  </dl>
-                </div>
-              </div>
-              <div className="mt-8">
-                <Button
-                  variant="solid"
-                  color="amber"
-                  className="w-full text-lg font-medium"
-                  href="mailto:iam@vojtechmares.com"
-                >
-                  Nezávazně poptat
-                </Button>
-              </div>
-            </div>
-          </div>
-        </Container>
-      </div>
-    </>
-  );
-};
diff --git a/components/trainingpage/TrainingLayout.tsx b/components/trainingpage/TrainingLayout.tsx
new file mode 100644
index 0000000..c088e4b
--- /dev/null
+++ b/components/trainingpage/TrainingLayout.tsx
@@ -0,0 +1,135 @@
+import Head from "next/head";
+import Image from "next/image";
+
+import { Header } from "@/components/layout/Header";
+import { Footer } from "@/components/layout/Footer";
+import { Container } from "@/components/Container";
+import { Button } from "@/components/Button";
+
+type Props = {
+  content: any;
+  meta: any;
+}
+
+export default function TrainingLayout({ content, meta }: Props) {
+  const formatter = new Intl.NumberFormat("cs", {
+    style: "currency",
+    currency: "CZK",
+    maximumFractionDigits: 0,
+  });
+
+  return (
+    <>
+      <Head>
+        <title>
+          Školení {meta.name} | Vojtěch Mareš - DevOps konzultant, lektor,
+          engineer
+        </title>
+
+        <meta
+          name="description"
+          content={`Školení ${meta.name} | Vojtěch Mareš - DevOps konzultant, lektor, engineer`}
+        />
+      </Head>
+      <main>
+        <Header />
+        <div className="pb-14 sm:pb-20 lg:pb-32">
+          <div className="bg-black pt-16 pb-16">
+            <Container className="flex justify-around">
+              <Image
+                src={meta.logo}
+                className="h-32 w-32 rounded-full"
+                width="1500"
+                height="1500"
+                alt=""
+              />
+              <h2 className="ml-4 text-center font-display self-center text-4xl tracking-tight text-white sm:text-6xl">
+                Školení {meta.name}
+              </h2>
+            </Container>
+          </div>
+          <Container>
+            <div className="mt-12 md:grid md:grid-cols-5 md:gap-x-4 md:gap-y-4">
+              <div className="md:col-span-3">
+                <div className="prose prose-slate prose-h1:text-2xl prose-h1:font-medium prose-h2:text-xl prose-h2:font-medium prose-h3:text-lg prose-h3:font-medium prose-li:my-0">
+                  {content}
+                </div>
+              </div>
+              <div className="mt-8 md:col-span-2 md:mt-0">
+                {meta.days === 2 ? (
+                  <div className=" mb-8 rounded-lg bg-blue-50 p-4 shadow">
+                    <div className="flex">
+                      <div className="flex-shrink-0">
+                        {/* <ExclamationTriangleIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" /> */}
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                          className="h-5 w-5 text-blue-400"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                      </div>
+                      <div className="ml-3">
+                        <p className="text-blue-600">
+                          Toto školení je{" "}
+                          <span className="font-medium">
+                            dvoudenní.
+                          </span>
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  <></>
+                )}
+                <div className="mt-8 overflow-hidden rounded-lg bg-slate-50 shadow md:mt-0">
+                  <div className="px-4 py-5 sm:px-6">
+                    <h3 className="text-lg font-medium leading-6 text-black">
+                      Cena za školení
+                    </h3>
+                  </div>
+                  <div className="border-t border-slate-100 px-4 py-5">
+                    <dl className="sm:divide-y sm:divide-slate-400">
+                      <div className="py-4 sm:grid sm:grid-cols-2 sm:gap-4 sm:py-5 sm:px-6">
+                        <dt className="font-medium text-slate-700">
+                          Veřejný termín
+                        </dt>
+                        <dd className="mt-1 text-black sm:mt-0">
+                          {formatter.format(meta.price.open)} bez DPH
+                        </dd>
+                      </div>
+                      <div className="py-4 sm:grid sm:grid-cols-2 sm:gap-4 sm:py-5 sm:px-6">
+                        <dt className="font-medium text-slate-700">
+                          Firemní školení
+                        </dt>
+                        <dd className="mt-1 text-black sm:mt-0">
+                          {formatter.format(meta.price.company)} bez DPH
+                        </dd>
+                      </div>
+                    </dl>
+                  </div>
+                </div>
+                <div className="mt-8">
+                  <Button
+                    variant="solid"
+                    color="amber"
+                    className="w-full text-lg font-medium"
+                    href="mailto:iam@vojtechmares.com"
+                  >
+                    Nezávazně poptat
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </Container>
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+};
diff --git a/components/trainingpage/TrainingListGrid.tsx b/components/trainingpage/TrainingListGrid.tsx
deleted file mode 100644
index 2184dd3..0000000
--- a/components/trainingpage/TrainingListGrid.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import Image from "next/image";
-import clsx from "clsx";
-
-import TrainingType from "@/types/training";
-import { Container } from "@/components/Container";
-import { Button } from "@/components/Button";
-
-type TrainingDetailProps = {
-  training: TrainingType;
-  className?: string;
-  props?: any[];
-};
-
-const TrainingDetail = ({
-  training,
-  className,
-  ...props
-}: TrainingDetailProps) => {
-  return (
-    <div
-      className={clsx(
-        className,
-        "rounded-3xl py-8 px-6 shadow sm:px-8",
-        training.featured ? "bg-amber-500 py-8" : "",
-        training.featured ? "hover:bg-amber-600" : "md:ring-1 md:hover:ring-slate-700 md:ring-transparent",
-        "transition ease-in-out duration-300 md:hover:-translate-y-1 md:hover:scale-110 "
-      )}
-      {...props}
-    >
-      <Image
-        src={training.logo}
-        className="h-32 w-32 rounded-full"
-        width="1500"
-        height="1500"
-        alt=""
-      />
-      <div className="mt-6 flex justify-between">
-        <div className="flex">
-          <h3 className="font-display text-xl font-medium text-white">
-            {training.name}
-          </h3>
-          {training.new ? (
-            <>
-              <span className="border-1 ml-2 rounded-full border border-orange-800 bg-orange-100 px-2 py-1 text-xs font-medium text-orange-800">
-                new!
-              </span>
-            </>
-          ) : (
-            <></>
-          )}
-        </div>
-        <p className="text-md max-w-2xl text-white">
-          {training.days} {training.days === 1 ? "den" : "dny"}
-        </p>
-      </div>
-      <p
-        className="text-md mt-4 text-slate-100"
-      >
-        {training.description.split(" ").splice(0, 40).join(" ") + "..."}
-      </p>
-      <Button
-        href={"/skoleni/" + training.slug}
-        variant={training.featured ? "solid" : "outline"}
-        color="white"
-        className="mt-8 w-full"
-      >
-        Zjistit více
-      </Button>
-    </div>
-  );
-};
-
-type TrainingListProps = {
-  trainingList: TrainingType[];
-};
-
-const TrainingListMobile = ({ trainingList }: TrainingListProps) => {
-  return (
-    <div className="-mx-4 mt-20 flex flex-col gap-y-10 overflow-hidden sm:-mx-6 sm:px-6 lg:hidden">
-      {trainingList.map((training) => (
-        <div
-          key={training.slug}
-          className={clsx(training.featured ? "order-first lg:order-none" : "")}
-        >
-          <TrainingDetail training={training} className="mx-auto max-w-2xl" />
-        </div>
-      ))}
-    </div>
-  );
-};
-
-const TrainingListDesktop = ({ trainingList }: TrainingListProps) => {
-  return (
-    <div className="hidden lg:mt-20 lg:block">
-      <div className="grid grid-cols-3 gap-x-8 gap-y-8">
-        {trainingList.map((training) => (
-          <div
-            key={training.slug}
-            className={clsx(
-              training.featured ? "order-first lg:order-none" : ""
-            )}
-          >
-            <TrainingDetail training={training} className="relative" />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export const TrainingListGrid = ({ trainingList }: TrainingListProps) => {
-  return (
-    <>
-      <section
-        id="training-list"
-        aria-label="Seznam školení"
-        className="bg-black pt-16 pb-14 sm:pb-20 sm:pt-24 lg:pb-32"
-      >
-        <Container>
-          <div className="mx-auto max-w-2xl md:text-center">
-            <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
-              Moje školení
-            </h2>
-            <p className="mt-4 text-lg tracking-tight text-slate-400">
-              Od veřejného cloudu přes on-premise až po serverless, se vším vám
-              poradím.
-            </p>
-          </div>
-          <TrainingListMobile trainingList={trainingList} />
-          <TrainingListDesktop trainingList={trainingList} />
-        </Container>
-      </section>
-    </>
-  );
-};
diff --git a/public/images/logos/argo.png b/images/logos/tools/argo.png
similarity index 100%
rename from public/images/logos/argo.png
rename to images/logos/tools/argo.png
diff --git a/public/images/logos/git.png b/images/logos/tools/git.png
similarity index 100%
rename from public/images/logos/git.png
rename to images/logos/tools/git.png
diff --git a/public/images/logos/kubernetes.png b/images/logos/tools/kubernetes.png
similarity index 100%
rename from public/images/logos/kubernetes.png
rename to images/logos/tools/kubernetes.png
diff --git a/public/images/logos/terraform.png b/images/logos/tools/terraform.png
similarity index 100%
rename from public/images/logos/terraform.png
rename to images/logos/tools/terraform.png
diff --git a/lib/cms/training.ts b/lib/cms/training.ts
deleted file mode 100644
index 1cef6db..0000000
--- a/lib/cms/training.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import fs from "fs";
-import { join } from "path";
-import matter from "gray-matter";
-
-const trainingDir = join(process.cwd(), "content/training");
-
-export const getTrainingSlugs = () => {
-  return fs.readdirSync(trainingDir);
-};
-
-export const getTrainingBySlug = (slug: string, fields: string[] = []) => {
-  const realSlug = slug.replace(/\.md$/, "");
-  const fullPath = join(trainingDir, `${realSlug}.md`);
-  const fileContents = fs.readFileSync(fullPath, "utf8");
-  const { data, content } = matter(fileContents);
-
-  type Items = {
-    [key: string]: string;
-  };
-
-  const items: Items = {};
-
-  // Ensure only the minimal needed data is exposed
-  fields.forEach((field) => {
-    if (field === "slug") {
-      items[field] = realSlug;
-    }
-    if (field === "content") {
-      items[field] = content;
-    }
-
-    if (typeof data[field] !== "undefined") {
-      items[field] = data[field];
-    }
-  });
-
-  return items;
-};
-
-export const getAllTraining = (fields: string[] = []) => {
-  const slugs = getTrainingSlugs();
-  const trainingList = slugs
-    .map((slug) => getTrainingBySlug(slug, fields))
-    .sort((tr1, tr2) => {
-      const tr1w = parseInt(tr1.weight);
-      const tr2w = parseInt(tr2.weight);
-      return tr1w > tr2w ? -1 : 1;
-    });
-
-  return trainingList;
-};
diff --git a/lib/markdownToHTML.ts b/lib/markdownToHTML.ts
deleted file mode 100644
index 6e57016..0000000
--- a/lib/markdownToHTML.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { remark } from "remark";
-import html from "remark-html";
-
-const markdownToHTML = async (markdown: string) => {
-  const result = await remark().use(html).process(markdown);
-  return result.toString();
-};
-
-export default markdownToHTML;
diff --git a/next.config.js b/next.config.js
index df4787e..e8de2ce 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,3 +1,16 @@
+const withMDX = require("@next/mdx")({
+  extension: /\.mdx?$/,
+  options: {
+    // If you use remark-gfm, you'll need to use next.config.mjs
+    // as the package is ESM only
+    // https://github.com/remarkjs/remark-gfm#install
+    remarkPlugins: [],
+    rehypePlugins: [],
+    // If you use `MDXProvider`, uncomment the following line.
+    // providerImportSource: "@mdx-js/react",
+  },
+});
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
@@ -5,7 +18,8 @@ const nextConfig = {
   experimental: {
     newNextLinkBehavior: true,
     scrollRestoration: true,
-  }
-}
+  },
+  pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
+};
 
-module.exports = nextConfig;
+module.exports = withMDX(nextConfig);
diff --git a/package.json b/package.json
index 0d8905b..dceece2 100644
--- a/package.json
+++ b/package.json
@@ -13,14 +13,14 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.4",
+    "@mdx-js/loader": "^2.2.1",
+    "@mdx-js/react": "^2.2.1",
+    "@next/mdx": "^13.1.1",
     "@tailwindcss/typography": "^0.5.8",
     "clsx": "^1.2.1",
-    "gray-matter": "^4.0.3",
     "next": "13.1.1",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "remark": "^14.0.2",
-    "remark-html": "^15.0.1"
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.2",
diff --git a/pages/skoleni/[slug].tsx b/pages/skoleni/[slug].tsx
deleted file mode 100644
index 3b9e21b..0000000
--- a/pages/skoleni/[slug].tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import Head from "next/head";
-import { useRouter } from "next/router";
-import ErrorPage from "next/error";
-
-import TrainingType from "@/types/training";
-import { getAllTraining, getTrainingBySlug } from "@/lib/cms/training";
-import markdownToHTML from "@/lib/markdownToHTML";
-import { Header } from "@/components/layout/Header";
-import { Footer } from "@/components/layout/Footer";
-import { Training } from "@/components/trainingpage/Training";
-
-type Props = {
-  training: TrainingType;
-  featuredTrainingList: TrainingType[];
-};
-
-const TrainingPage = ({ training, featuredTrainingList }: Props) => {
-  const router = useRouter();
-  console.log(!router.isFallback);
-  console.log(!training?.slug);
-  console.log(typeof training.draft === "undefined");
-  // if ((!router.isFallback && !training?.slug) || typeof training.draft === 'undefined') {
-  //   return <ErrorPage statusCode={404} />
-  // }
-
-  return (
-    <>
-      <Head>
-        <title>
-          Školení {training.name} | Vojtěch Mareš - DevOps konzultant, lektor,
-          engineer
-        </title>
-
-        <meta
-          name="description"
-          content={`Školení ${training.name} | Vojtěch Mareš - DevOps konzultant, lektor, engineer`}
-        />
-      </Head>
-      <main>
-        <Header />
-        <Training training={training} />
-      </main>
-      <Footer />
-    </>
-  );
-};
-
-export default TrainingPage;
-
-type Params = {
-  params: {
-    slug: string;
-  };
-};
-
-export const getStaticProps = async ({ params }: Params) => {
-  const training = getTrainingBySlug(params.slug, [
-    "name",
-    "content",
-    "priceOpen",
-    "priceCompany",
-    "days",
-    "logo",
-    "content",
-    "draft",
-    "new",
-    "featured",
-  ]);
-
-  const content = await markdownToHTML(training.content || "");
-
-  return {
-    props: {
-      training: {
-        ...training,
-        content,
-      },
-    },
-  };
-};
-
-export const getStaticPaths = async () => {
-  const trainingList = getAllTraining(["slug"]);
-
-  return {
-    paths: trainingList.map((training) => {
-      return {
-        params: {
-          slug: training.slug,
-        },
-      };
-    }),
-    fallback: false,
-  };
-};
diff --git a/content/training/argocd.md b/pages/skoleni/argocd.mdx
similarity index 53%
rename from content/training/argocd.md
rename to pages/skoleni/argocd.mdx
index aa52061..de3f0cc 100644
--- a/content/training/argocd.md
+++ b/pages/skoleni/argocd.mdx
@@ -1,13 +1,19 @@
----
-name: ArgoCD
-priceOpen: 5900
-priceCompany: 24000
-logo: /images/logos/argo.png
-description: "ArgoCD je GitOps nastroj kterym nasazujeme aplikace do Kubernetes. Pracuje na zaklade deklaraticnich konfiguracnich souboru, ktete si stahuje z Gitu. To znamena, ze vse co commitneme do repozitare, se na nasadi do Kubernetes. O vsech zmenach: co, kdy, kdo udelal budeme mit prehledne zaznami v Gitu."
-days: 1
-new: true
-weight: 49
----
+import TrainingLayout from "@/components/trainingpage/TrainingLayout";
+import logoArgo from "@/images/logos/tools/argo.png";
+
+export const meta = {
+  name: "ArgoCD",
+  price: {
+    open: 5900,
+    company: 24000,
+  },
+  logo: logoArgo,
+  description:
+    "ArgoCD je GitOps nastroj kterym nasazujeme aplikace do Kubernetes. Pracuje na zaklade deklaraticnich konfiguracnich souboru, ktete si stahuje z Gitu. To znamena, ze vse co commitneme do repozitare, se na nasadi do Kubernetes. O vsech zmenach: co, kdy, kdo udelal budeme mit prehledne zaznami v Gitu.",
+  days: 1,
+  featured: true,
+  weight: 49,
+};
 
 # Popis technologie
 
@@ -37,3 +43,7 @@ Zakladni znalost Kubernetes
 Technické požadavky
 Webový prohlížeč
 Přístup na internet
+
+export default ({ children }) => (
+  <TrainingLayout content={children} meta={meta} />
+);
diff --git a/content/training/git.md b/pages/skoleni/git.mdx
similarity index 70%
rename from content/training/git.md
rename to pages/skoleni/git.mdx
index 624f9a2..a2837c7 100644
--- a/content/training/git.md
+++ b/pages/skoleni/git.mdx
@@ -1,12 +1,18 @@
----
-name: Git
-priceOpen: 5900
-priceCompany: 24000
-logo: /images/logos/git.png
-description: "Git je moderní verzovaci nástroj, který se stal de facto standardem mezi vývojáři. Používají jej na denní bázy jednotlivci, startupy i korporace. Git vám nabízí jednoduchou kolaboraci na projektu s více lidmi a práci na více částech současně aniž byste si zasahovali do rozdělaných věcí nebo je jinak narušovali. Spolupráci na vývoji projektu ještě zlepšuje Gitlab, což je kolaborativni platforma na návrh, vývoj a provozování software (více o Gitlabu v samostatném kurzu)."
-days: 1
-weight: 1
----
+import TrainingLayout from "@/components/trainingpage/TrainingLayout";
+import logoGit from "@/images/logos/tools/git.png";
+
+export const meta = {
+  name: "Git",
+  price: {
+    open: 5900,
+    company: 24000,
+  },
+  logo: logoGit,
+  description:
+    "Git je moderní verzovaci nástroj, který se stal de facto standardem mezi vývojáři. Používají jej na denní bázy jednotlivci, startupy i korporace. Git vám nabízí jednoduchou kolaboraci na projektu s více lidmi a práci na více částech současně aniž byste si zasahovali do rozdělaných věcí nebo je jinak narušovali. Spolupráci na vývoji projektu ještě zlepšuje Gitlab, což je kolaborativni platforma na návrh, vývoj a provozování software (více o Gitlabu v samostatném kurzu).",
+  days: 1,
+  weight: 1,
+};
 
 # Co je to Git?
 
@@ -40,3 +46,7 @@ Základní znalost Gitu výhodou
 
 Nainstalovaný Git
 Přístup na internet - ideálně bez korporátní proxy, případně nastavenou proxy v prohlížeči
+
+export default ({ children }) => (
+  <TrainingLayout content={children} meta={meta} />
+);
diff --git a/pages/skoleni/index.tsx b/pages/skoleni/index.tsx
deleted file mode 100644
index 1a8258d..0000000
--- a/pages/skoleni/index.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import Head from "next/head";
-
-import { Header } from "@/components/layout/Header";
-import { Footer } from "@/components/layout/Footer";
-import { getAllTraining } from "@/lib/cms/training";
-import TrainingType from "@/types/training";
-import { TrainingListGrid } from "@/components/trainingpage/TrainingListGrid";
-
-export const getStaticProps = async () => {
-  const allTraining = getAllTraining([
-    "name",
-    "slug",
-    "logo",
-    "description",
-    "days",
-    "weight",
-    "featured",
-    "new",
-    "draft",
-  ]);
-
-  return {
-    props: { allTraining },
-  };
-};
-
-type Props = {
-  allTraining: TrainingType[];
-};
-
-const TrainingList = ({ allTraining }: Props) => {
-  // remove drafts
-  const trainingList = allTraining.filter((val) => !val.draft);
-
-  return (
-    <>
-      <Head>
-        <title>
-          Moje školení | Vojtěch Mareš - DevOps konzultant, lektor, engineer
-        </title>
-
-        <meta
-          name="description"
-          content="Moje školení | Vojtěch Mareš - DevOps konzultant, lektor, engineer"
-        />
-      </Head>
-      <main>
-        <Header />
-        <TrainingListGrid trainingList={trainingList} />
-      </main>
-      <Footer />
-    </>
-  );
-};
-
-export default TrainingList;
diff --git a/content/training/kubernetes.md b/pages/skoleni/kubernetes.mdx
similarity index 68%
rename from content/training/kubernetes.md
rename to pages/skoleni/kubernetes.mdx
index 270b230..85b7c55 100644
--- a/content/training/kubernetes.md
+++ b/pages/skoleni/kubernetes.mdx
@@ -1,13 +1,19 @@
----
-name: Kubernetes
-priceOpen: 11900
-priceCompany: 44000
-logo: /images/logos/kubernetes.png
-description: "Kubernetes jsou dnes nejrozšířenější platformou na hostování Docker kontejnerů a jsou podporovány velkými hráči na trhu (Google, Amazon, Microsoft) skrz Cloud Native Computing Foundation. Kubernetes pro provoz používají všechny velikosti firem, od startupu po korporace."
-days: 2
-featured: true
-weight: 50
----
+import logoKubernetes from "@/images/logos/tools/kubernetes.png";
+import TrainingLayout from "@/components/trainingpage/TrainingLayout";
+
+export const meta = {
+  name: "Kubernetes",
+  price: {
+    open: 11900,
+    company: 44000,
+  },
+  logo: logoKubernetes,
+  description:
+    "Kubernetes jsou dnes nejrozšířenější platformou na hostování Docker kontejnerů a jsou podporovány velkými hráči na trhu (Google, Amazon, Microsoft) skrz Cloud Native Computing Foundation. Kubernetes pro provoz používají všechny velikosti firem, od startupu po korporace.",
+  days: 2,
+  featured: true,
+  weight: 50,
+};
 
 # Popis technologie
 
@@ -40,3 +46,7 @@ Základy práce v terminálu
 Technické požadavky
 Nainstalovaný Kubernetes
 Přístup na internet - ideálně bez korporátní proxy, případně nastavenou proxy v prohlížeči
+
+export default ({ children }) => (
+  <TrainingLayout content={children} meta={meta} />
+);
diff --git a/content/training/terraform.md b/pages/skoleni/terraform.mdx
similarity index 63%
rename from content/training/terraform.md
rename to pages/skoleni/terraform.mdx
index e6a229c..9e4c020 100644
--- a/content/training/terraform.md
+++ b/pages/skoleni/terraform.mdx
@@ -1,17 +1,19 @@
----
-name: Terraform
-priceOpen: 5900
-priceCompany: 24000
-logo: /images/logos/terraform.png
-description: "Terraform je nástroj, který se používá ke správě infrastruktury v cloudu, jak veřejném (AWS, Azure, GCP), tak privátním (OpenStack, VMware vSphere).
+import TrainingLayout from "@/components/trainingpage/TrainingLayout";
+import logoTerraform from "@/images/logos/tools/terraform.png";
 
-Terraform Vám umožní spravovat infrastruktutru jako kód, to znamená verzovanou v Gitu, přidávání resources pomocí merge (pull) requestů a mnoho dalších výhod. Infrastrukturu můžete dále nasadit do testovacího prostředí přesně tak, jako je v produkci bez zbytečného úsilí. O všech komponentách máte přehled a můžete predikovat ceny. Konec klikání infrastruktury, zkuste Terraform.
-
-Terraform umožnuje spravovat více cloudových providerů současne, zároveň umožnuje pracovat s hibridními cloudy (část v privátním cloudu, část ve veřejném)."
-days: 1
-featured: true
-weight: 31
----
+export const meta = {
+  name: "Terraform",
+  price: {
+    open: 5900,
+    company: 24000,
+  },
+  logo: logoTerraform,
+  description:
+    "Terraform je nástroj, který se používá ke správě infrastruktury v cloudu, jak veřejném (AWS, Azure, GCP), tak privátním (OpenStack, VMware vSphere). Terraform Vám umožní spravovat infrastruktutru jako kód, to znamená verzovanou v Gitu, přidávání resources pomocí merge (pull) requestů a mnoho dalších výhod. Infrastrukturu můžete dále nasadit do testovacího prostředí přesně tak, jako je v produkci bez zbytečného úsilí. O všech komponentách máte přehled a můžete predikovat ceny. Konec klikání infrastruktury, zkuste Terraform. Terraform umožnuje spravovat více cloudových providerů současne, zároveň umožnuje pracovat s hibridními cloudy (část v privátním cloudu, část ve veřejném).",
+  days: 1,
+  featured: true,
+  weight: 31,
+};
 
 # Co to je Terraform a k čemu se používá?
 
@@ -51,3 +53,7 @@ Základy práce v terminálu
 Nainstalovaný Terraform
 Přístup na internet (ideálně bez korporatni proxy)
 Vlastní účet v DigitalOceanu výhodou
+
+export default ({ children }) => (
+  <TrainingLayout content={children} meta={meta} />
+);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 86b7cea..3996f9c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3,6 +3,9 @@ lockfileVersion: 5.4
 specifiers:
   '@babel/core': ^7.20.2
   '@headlessui/react': ^1.7.4
+  '@mdx-js/loader': ^2.2.1
+  '@mdx-js/react': ^2.2.1
+  '@next/mdx': ^13.1.1
   '@tailwindcss/typography': ^0.5.8
   '@testing-library/react': ^13.4.0
   '@types/node': ^18.11.17
@@ -14,7 +17,6 @@ specifiers:
   eslint: 8.31.0
   eslint-config-next: ^13.0.4
   eslint-config-prettier: ^8.5.0
-  gray-matter: ^4.0.3
   jsdom: ^21.0.0
   next: 13.1.1
   postcss: ^8.4.19
@@ -22,8 +24,6 @@ specifiers:
   prettier-plugin-tailwindcss: ^0.2.0
   react: 18.2.0
   react-dom: 18.2.0
-  remark: ^14.0.2
-  remark-html: ^15.0.1
   tailwindcss: ^3.2.4
   typescript: ^4.9.3
   vite: ^4.0.2
@@ -31,14 +31,14 @@ specifiers:
 
 dependencies:
   '@headlessui/react': 1.7.4_biqbaboplfbrettd7655fr4n2y
+  '@mdx-js/loader': 2.2.1
+  '@mdx-js/react': 2.2.1_react@18.2.0
+  '@next/mdx': 13.1.1_vvg67iglxhejglpl7nsv3pjzui
   '@tailwindcss/typography': 0.5.8_tailwindcss@3.2.4
   clsx: 1.2.1
-  gray-matter: 4.0.3
   next: 13.1.1_mqvh5p7ejg4taogoj6tpk3gd5a
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
-  remark: 14.0.2
-  remark-html: 15.0.1
 
 devDependencies:
   '@babel/core': 7.20.2
@@ -660,6 +660,51 @@ packages:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.4.14
 
+  /@mdx-js/loader/2.2.1:
+    resolution: {integrity: sha512-J4E8A5H+xtk4otZiEZ5AXl61Tj04Avm5MqLQazITdI3+puVXVnTTuZUKM1oNHTtfDIfOl0uMt+o/Ij+x6Fvf+g==}
+    peerDependencies:
+      webpack: '>=4'
+    dependencies:
+      '@mdx-js/mdx': 2.2.1
+      source-map: 0.7.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@mdx-js/mdx/2.2.1:
+    resolution: {integrity: sha512-hZ3ex7exYLJn6FfReq8yTvA6TE53uW9UHJQM9IlSauOuS55J9y8RtA7W+dzp6Yrzr00/U1sd7q+Wf61q6SfiTQ==}
+    dependencies:
+      '@types/estree-jsx': 1.0.0
+      '@types/mdx': 2.0.3
+      estree-util-build-jsx: 2.2.2
+      estree-util-is-identifier-name: 2.0.1
+      estree-util-to-js: 1.1.0
+      estree-walker: 3.0.2
+      hast-util-to-estree: 2.1.0
+      markdown-extensions: 1.1.1
+      periscopic: 3.0.4
+      remark-mdx: 2.2.1
+      remark-parse: 10.0.1
+      remark-rehype: 10.1.0
+      unified: 10.1.2
+      unist-util-position-from-estree: 1.1.1
+      unist-util-stringify-position: 3.0.2
+      unist-util-visit: 4.1.1
+      vfile: 5.3.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@mdx-js/react/2.2.1_react@18.2.0:
+    resolution: {integrity: sha512-YdXcMcEnqZhzql98RNrqYo9cEhTTesBiCclEtoiQUbJwx87q9453GTapYU6kJ8ZZ2ek1Vp25SiAXEFy5O/eAPw==}
+    peerDependencies:
+      react: '>=16'
+    dependencies:
+      '@types/mdx': 2.0.3
+      '@types/react': 18.0.26
+      react: 18.2.0
+    dev: false
+
   /@next/env/13.1.1:
     resolution: {integrity: sha512-vFMyXtPjSAiOXOywMojxfKIqE3VWN5RCAx+tT3AS3pcKjMLFTCJFUWsKv8hC+87Z1F4W3r68qTwDFZIFmd5Xkw==}
     dev: false
@@ -670,6 +715,17 @@ packages:
       glob: 7.1.7
     dev: true
 
+  /@next/mdx/13.1.1_vvg67iglxhejglpl7nsv3pjzui:
+    resolution: {integrity: sha512-a588olt++s7vcuhlgrNOBpZUqlbr9vr94NjA3ixM9AgL8fnwJ/GgxEMsrcsp2gPw91lzBlumBfjK6Lc3k3m23Q==}
+    peerDependencies:
+      '@mdx-js/loader': '>=0.15.0'
+      '@mdx-js/react': '*'
+    dependencies:
+      '@mdx-js/loader': 2.2.1
+      '@mdx-js/react': 2.2.1_react@18.2.0
+      source-map: 0.7.4
+    dev: false
+
   /@next/swc-android-arm-eabi/13.1.1:
     resolution: {integrity: sha512-qnFCx1kT3JTWhWve4VkeWuZiyjG0b5T6J2iWuin74lORCupdrNukxkq9Pm+Z7PsatxuwVJMhjUoYz7H4cWzx2A==}
     engines: {node: '>= 10'}
@@ -872,6 +928,12 @@ packages:
     engines: {node: '>= 10'}
     dev: true
 
+  /@types/acorn/4.0.6:
+    resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==}
+    dependencies:
+      '@types/estree': 1.0.0
+    dev: false
+
   /@types/aria-query/4.2.2:
     resolution: {integrity: sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==}
     dev: true
@@ -892,6 +954,16 @@ packages:
       '@types/ms': 0.7.31
     dev: false
 
+  /@types/estree-jsx/1.0.0:
+    resolution: {integrity: sha512-3qvGd0z8F2ENTGr/GG1yViqfiKmRfrXVx5sJyHGFu3z7m5g5utCQtGp/g29JnjflhtQJBv1WDQukHiT58xPcYQ==}
+    dependencies:
+      '@types/estree': 1.0.0
+    dev: false
+
+  /@types/estree/1.0.0:
+    resolution: {integrity: sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==}
+    dev: false
+
   /@types/hast/2.3.4:
     resolution: {integrity: sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==}
     dependencies:
@@ -912,6 +984,10 @@ packages:
       '@types/unist': 2.0.6
     dev: false
 
+  /@types/mdx/2.0.3:
+    resolution: {integrity: sha512-IgHxcT3RC8LzFLhKwP3gbMPeaK7BM9eBH46OdapPA7yvuIUJ8H6zHZV53J8hGZcTSnt95jANt+rTBNUUc22ACQ==}
+    dev: false
+
   /@types/ms/0.7.31:
     resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==}
     dev: false
@@ -922,7 +998,6 @@ packages:
 
   /@types/prop-types/15.7.5:
     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
-    dev: true
 
   /@types/react-dom/18.0.9:
     resolution: {integrity: sha512-qnVvHxASt/H7i+XG1U1xMiY5t+IHcPGUK7TDMDzom08xa7e86eCeKOiLZezwCKVxJn6NEiiy2ekgX8aQssjIKg==}
@@ -936,11 +1011,9 @@ packages:
       '@types/prop-types': 15.7.5
       '@types/scheduler': 0.16.2
       csstype: 3.1.1
-    dev: true
 
   /@types/scheduler/0.16.2:
     resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
-    dev: true
 
   /@types/unist/2.0.6:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
@@ -1060,7 +1133,6 @@ packages:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       acorn: 8.8.1
-    dev: true
 
   /acorn-node/1.8.2:
     resolution: {integrity: sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==}
@@ -1087,7 +1159,6 @@ packages:
     resolution: {integrity: sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
   /agent-base/6.0.2:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
@@ -1140,12 +1211,6 @@ packages:
   /arg/5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
 
-  /argparse/1.0.10:
-    resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
-    dependencies:
-      sprintf-js: 1.0.3
-    dev: false
-
   /argparse/2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
     dev: true
@@ -1218,6 +1283,11 @@ packages:
     resolution: {integrity: sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==}
     dev: true
 
+  /astring/1.8.4:
+    resolution: {integrity: sha512-97a+l2LBU3Op3bBQEff79i/E4jMD2ZLFD8rHx9B6mXyB2uQwhJQYfiDqUwtfjF4QA1F2qs//N6Cw8LetMbQjcw==}
+    hasBin: true
+    dev: false
+
   /asynckit/0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
     dev: true
@@ -1374,6 +1444,10 @@ packages:
     resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
     dev: false
 
+  /character-reference-invalid/2.0.1:
+    resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
+    dev: false
+
   /check-error/1.0.2:
     resolution: {integrity: sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==}
     dev: true
@@ -1481,7 +1555,6 @@ packages:
 
   /csstype/3.1.1:
     resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
-    dev: true
 
   /damerau-levenshtein/1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
@@ -2054,6 +2127,7 @@ packages:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
     hasBin: true
+    dev: true
 
   /esquery/1.4.0:
     resolution: {integrity: sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==}
@@ -2074,18 +2148,48 @@ packages:
     engines: {node: '>=4.0'}
     dev: true
 
+  /estree-util-attach-comments/2.1.0:
+    resolution: {integrity: sha512-rJz6I4L0GaXYtHpoMScgDIwM0/Vwbu5shbMeER596rB2D1EWF6+Gj0e0UKzJPZrpoOc87+Q2kgVFHfjAymIqmw==}
+    dependencies:
+      '@types/estree': 1.0.0
+    dev: false
+
+  /estree-util-build-jsx/2.2.2:
+    resolution: {integrity: sha512-m56vOXcOBuaF+Igpb9OPAy7f9w9OIkb5yhjsZuaPm7HoGi4oTOQi0h2+yZ+AtKklYFZ+rPC4n0wYCJCEU1ONqg==}
+    dependencies:
+      '@types/estree-jsx': 1.0.0
+      estree-util-is-identifier-name: 2.0.1
+      estree-walker: 3.0.2
+    dev: false
+
+  /estree-util-is-identifier-name/2.0.1:
+    resolution: {integrity: sha512-rxZj1GkQhY4x1j/CSnybK9cGuMFQYFPLq0iNyopqf14aOVLFtMv7Esika+ObJWPWiOHuMOAHz3YkWoLYYRnzWQ==}
+    dev: false
+
+  /estree-util-to-js/1.1.0:
+    resolution: {integrity: sha512-490lbfCcpLk+ofK6HCgqDfYs4KAfq6QVvDw3+Bm1YoKRgiOjKiKYGAVQE1uwh7zVxBgWhqp4FDtp5SqunpUk1A==}
+    dependencies:
+      '@types/estree-jsx': 1.0.0
+      astring: 1.8.4
+      source-map: 0.7.4
+    dev: false
+
+  /estree-util-visit/1.2.0:
+    resolution: {integrity: sha512-wdsoqhWueuJKsh5hqLw3j8lwFqNStm92VcwtAOAny8g/KS/l5Y8RISjR4k5W6skCj3Nirag/WUCMS0Nfy3sgsg==}
+    dependencies:
+      '@types/estree-jsx': 1.0.0
+      '@types/unist': 2.0.6
+    dev: false
+
+  /estree-walker/3.0.2:
+    resolution: {integrity: sha512-C03BvXCQIH/po+PNPONx/zSM9ziPr9weX8xNhYb/IJtdJ9z+L4z9VKPTB+UTHdmhnIopA2kc419ueyVyHVktwA==}
+    dev: false
+
   /esutils/2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /extend-shallow/2.0.1:
-    resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      is-extendable: 0.1.1
-    dev: false
-
   /extend/3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
     dev: false
@@ -2328,16 +2432,6 @@ packages:
     resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
     dev: true
 
-  /gray-matter/4.0.3:
-    resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
-    engines: {node: '>=6.0'}
-    dependencies:
-      js-yaml: 3.14.1
-      kind-of: 6.0.3
-      section-matter: 1.0.0
-      strip-bom-string: 1.0.0
-    dev: false
-
   /has-bigints/1.0.2:
     resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
     dev: true
@@ -2375,32 +2469,26 @@ packages:
     dependencies:
       function-bind: 1.1.1
 
-  /hast-util-is-element/2.1.2:
-    resolution: {integrity: sha512-thjnlGAnwP8ef/GSO1Q8BfVk2gundnc2peGQqEg2kUt/IqesiGg/5mSwN2fE7nLzy61pg88NG6xV+UrGOrx9EA==}
+  /hast-util-to-estree/2.1.0:
+    resolution: {integrity: sha512-Vwch1etMRmm89xGgz+voWXvVHba2iiMdGMKmaMfYt35rbVtFDq8JNwwAIvi8zHMkO6Gvqo9oTMwJTmzVRfXh4g==}
     dependencies:
+      '@types/estree': 1.0.0
+      '@types/estree-jsx': 1.0.0
       '@types/hast': 2.3.4
       '@types/unist': 2.0.6
-    dev: false
-
-  /hast-util-sanitize/4.0.0:
-    resolution: {integrity: sha512-pw56+69jq+QSr/coADNvWTmBPDy+XsmwaF5KnUys4/wM1jt/fZdl7GPxhXXXYdXnz3Gj3qMkbUCH2uKjvX0MgQ==}
-    dependencies:
-      '@types/hast': 2.3.4
-    dev: false
-
-  /hast-util-to-html/8.0.3:
-    resolution: {integrity: sha512-/D/E5ymdPYhHpPkuTHOUkSatxr4w1ZKrZsG0Zv/3C2SRVT0JFJG53VS45AMrBtYk0wp5A7ksEhiC8QaOZM95+A==}
-    dependencies:
-      '@types/hast': 2.3.4
-      ccount: 2.0.1
       comma-separated-tokens: 2.0.3
-      hast-util-is-element: 2.1.2
+      estree-util-attach-comments: 2.1.0
+      estree-util-is-identifier-name: 2.0.1
       hast-util-whitespace: 2.0.0
-      html-void-elements: 2.0.1
+      mdast-util-mdx-expression: 1.3.1
+      mdast-util-mdxjs-esm: 1.3.0
       property-information: 6.2.0
       space-separated-tokens: 2.0.2
-      stringify-entities: 4.0.3
-      unist-util-is: 5.1.1
+      style-to-object: 0.3.0
+      unist-util-position: 4.0.3
+      zwitch: 2.0.4
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   /hast-util-whitespace/2.0.0:
@@ -2418,10 +2506,6 @@ packages:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
     dev: true
 
-  /html-void-elements/2.0.1:
-    resolution: {integrity: sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==}
-    dev: false
-
   /http-proxy-agent/5.0.0:
     resolution: {integrity: sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==}
     engines: {node: '>= 6'}
@@ -2479,6 +2563,10 @@ packages:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
     dev: true
 
+  /inline-style-parser/0.1.1:
+    resolution: {integrity: sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==}
+    dev: false
+
   /internal-slot/1.0.3:
     resolution: {integrity: sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==}
     engines: {node: '>= 0.4'}
@@ -2488,6 +2576,17 @@ packages:
       side-channel: 1.0.4
     dev: true
 
+  /is-alphabetical/2.0.1:
+    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
+    dev: false
+
+  /is-alphanumerical/2.0.1:
+    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
+    dependencies:
+      is-alphabetical: 2.0.1
+      is-decimal: 2.0.1
+    dev: false
+
   /is-arguments/1.1.1:
     resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
     engines: {node: '>= 0.4'}
@@ -2538,17 +2637,16 @@ packages:
       has-tostringtag: 1.0.0
     dev: true
 
+  /is-decimal/2.0.1:
+    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
+    dev: false
+
   /is-docker/2.2.1:
     resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
     engines: {node: '>=8'}
     hasBin: true
     dev: true
 
-  /is-extendable/0.1.1:
-    resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
   /is-extglob/2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -2564,6 +2662,10 @@ packages:
     dependencies:
       is-extglob: 2.1.1
 
+  /is-hexadecimal/2.0.1:
+    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
+    dev: false
+
   /is-map/2.0.2:
     resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==}
     dev: true
@@ -2598,6 +2700,12 @@ packages:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
     dev: true
 
+  /is-reference/3.0.1:
+    resolution: {integrity: sha512-baJJdQLiYaJdvFbJqXrcGv3WU3QCzBlUcI5QhbesIm6/xPsvmO+2CDoi/GMOFBQEQm+PXkwOPrp9KK5ozZsp2w==}
+    dependencies:
+      '@types/estree': 1.0.0
+    dev: false
+
   /is-regex/1.1.4:
     resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
     engines: {node: '>= 0.4'}
@@ -2702,14 +2810,6 @@ packages:
   /js-tokens/4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  /js-yaml/3.14.1:
-    resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
-    hasBin: true
-    dependencies:
-      argparse: 1.0.10
-      esprima: 4.0.1
-    dev: false
-
   /js-yaml/4.1.0:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
@@ -2801,11 +2901,6 @@ packages:
       object.assign: 4.1.4
     dev: true
 
-  /kind-of/6.0.3:
-    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
   /kleur/4.1.5:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
@@ -2906,6 +3001,11 @@ packages:
       semver: 6.3.0
     dev: true
 
+  /markdown-extensions/1.1.1:
+    resolution: {integrity: sha512-WWC0ZuMzCyDHYCasEGs4IPvLyTGftYwh6wIEOULOF0HXcqZlhwRzrK0w2VUlxWA98xnvb/jszw4ZSkJ6ADpM6Q==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /mdast-util-definitions/5.1.1:
     resolution: {integrity: sha512-rQ+Gv7mHttxHOBx2dkF4HWTg+EE+UR78ptQWDylzPKaQuVGdG4HIoY3SrS/pCp80nZ04greFvXbVFHT+uf0JVQ==}
     dependencies:
@@ -2933,6 +3033,55 @@ packages:
       - supports-color
     dev: false
 
+  /mdast-util-mdx-expression/1.3.1:
+    resolution: {integrity: sha512-TTb6cKyTA1RD+1su1iStZ5PAv3rFfOUKcoU5EstUpv/IZo63uDX03R8+jXjMEhcobXnNOiG6/ccekvVl4eV1zQ==}
+    dependencies:
+      '@types/estree-jsx': 1.0.0
+      '@types/hast': 2.3.4
+      '@types/mdast': 3.0.10
+      mdast-util-from-markdown: 1.2.0
+      mdast-util-to-markdown: 1.4.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /mdast-util-mdx-jsx/2.1.0:
+    resolution: {integrity: sha512-KzgzfWMhdteDkrY4mQtyvTU5bc/W4ppxhe9SzelO6QUUiwLAM+Et2Dnjjprik74a336kHdo0zKm7Tp+n6FFeRg==}
+    dependencies:
+      '@types/estree-jsx': 1.0.0
+      '@types/hast': 2.3.4
+      '@types/mdast': 3.0.10
+      ccount: 2.0.1
+      mdast-util-to-markdown: 1.4.0
+      parse-entities: 4.0.0
+      stringify-entities: 4.0.3
+      unist-util-remove-position: 4.0.1
+      unist-util-stringify-position: 3.0.2
+      vfile-message: 3.1.3
+    dev: false
+
+  /mdast-util-mdx/2.0.0:
+    resolution: {integrity: sha512-M09lW0CcBT1VrJUaF/PYxemxxHa7SLDHdSn94Q9FhxjCQfuW7nMAWKWimTmA3OyDMSTH981NN1csW1X+HPSluw==}
+    dependencies:
+      mdast-util-mdx-expression: 1.3.1
+      mdast-util-mdx-jsx: 2.1.0
+      mdast-util-mdxjs-esm: 1.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /mdast-util-mdxjs-esm/1.3.0:
+    resolution: {integrity: sha512-7N5ihsOkAEGjFotIX9p/YPdl4TqUoMxL4ajNz7PbT89BqsdWJuBC9rvgt6wpbwTZqWWR0jKWqQbwsOWDBUZv4g==}
+    dependencies:
+      '@types/estree-jsx': 1.0.0
+      '@types/hast': 2.3.4
+      '@types/mdast': 3.0.10
+      mdast-util-from-markdown: 1.2.0
+      mdast-util-to-markdown: 1.4.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /mdast-util-to-hast/12.2.4:
     resolution: {integrity: sha512-a21xoxSef1l8VhHxS1Dnyioz6grrJkoaCUgGzMD/7dWHvboYX3VW53esRUfB5tgTyz4Yos1n25SPcj35dJqmAg==}
     dependencies:
@@ -2988,6 +3137,64 @@ packages:
       uvu: 0.5.6
     dev: false
 
+  /micromark-extension-mdx-expression/1.0.3:
+    resolution: {integrity: sha512-TjYtjEMszWze51NJCZmhv7MEBcgYRgb3tJeMAJ+HQCAaZHHRBaDCccqQzGizR/H4ODefP44wRTgOn2vE5I6nZA==}
+    dependencies:
+      micromark-factory-mdx-expression: 1.0.6
+      micromark-factory-space: 1.0.0
+      micromark-util-character: 1.1.0
+      micromark-util-events-to-acorn: 1.2.0
+      micromark-util-symbol: 1.0.1
+      micromark-util-types: 1.0.2
+      uvu: 0.5.6
+    dev: false
+
+  /micromark-extension-mdx-jsx/1.0.3:
+    resolution: {integrity: sha512-VfA369RdqUISF0qGgv2FfV7gGjHDfn9+Qfiv5hEwpyr1xscRj/CiVRkU7rywGFCO7JwJ5L0e7CJz60lY52+qOA==}
+    dependencies:
+      '@types/acorn': 4.0.6
+      estree-util-is-identifier-name: 2.0.1
+      micromark-factory-mdx-expression: 1.0.6
+      micromark-factory-space: 1.0.0
+      micromark-util-character: 1.1.0
+      micromark-util-symbol: 1.0.1
+      micromark-util-types: 1.0.2
+      uvu: 0.5.6
+      vfile-message: 3.1.3
+    dev: false
+
+  /micromark-extension-mdx-md/1.0.0:
+    resolution: {integrity: sha512-xaRAMoSkKdqZXDAoSgp20Azm0aRQKGOl0RrS81yGu8Hr/JhMsBmfs4wR7m9kgVUIO36cMUQjNyiyDKPrsv8gOw==}
+    dependencies:
+      micromark-util-types: 1.0.2
+    dev: false
+
+  /micromark-extension-mdxjs-esm/1.0.3:
+    resolution: {integrity: sha512-2N13ol4KMoxb85rdDwTAC6uzs8lMX0zeqpcyx7FhS7PxXomOnLactu8WI8iBNXW8AVyea3KIJd/1CKnUmwrK9A==}
+    dependencies:
+      micromark-core-commonmark: 1.0.6
+      micromark-util-character: 1.1.0
+      micromark-util-events-to-acorn: 1.2.0
+      micromark-util-symbol: 1.0.1
+      micromark-util-types: 1.0.2
+      unist-util-position-from-estree: 1.1.1
+      uvu: 0.5.6
+      vfile-message: 3.1.3
+    dev: false
+
+  /micromark-extension-mdxjs/1.0.0:
+    resolution: {integrity: sha512-TZZRZgeHvtgm+IhtgC2+uDMR7h8eTKF0QUX9YsgoL9+bADBpBY6SiLvWqnBlLbCEevITmTqmEuY3FoxMKVs1rQ==}
+    dependencies:
+      acorn: 8.8.1
+      acorn-jsx: 5.3.2_acorn@8.8.1
+      micromark-extension-mdx-expression: 1.0.3
+      micromark-extension-mdx-jsx: 1.0.3
+      micromark-extension-mdx-md: 1.0.0
+      micromark-extension-mdxjs-esm: 1.0.3
+      micromark-util-combine-extensions: 1.0.0
+      micromark-util-types: 1.0.2
+    dev: false
+
   /micromark-factory-destination/1.0.0:
     resolution: {integrity: sha512-eUBA7Rs1/xtTVun9TmV3gjfPz2wEwgK5R5xcbIM5ZYAtvGF6JkyaDsj0agx8urXnO31tEO6Ug83iVH3tdedLnw==}
     dependencies:
@@ -3005,6 +3212,19 @@ packages:
       uvu: 0.5.6
     dev: false
 
+  /micromark-factory-mdx-expression/1.0.6:
+    resolution: {integrity: sha512-WRQIc78FV7KrCfjsEf/sETopbYjElh3xAmNpLkd1ODPqxEngP42eVRGbiPEQWpRV27LzqW+XVTvQAMIIRLPnNA==}
+    dependencies:
+      micromark-factory-space: 1.0.0
+      micromark-util-character: 1.1.0
+      micromark-util-events-to-acorn: 1.2.0
+      micromark-util-symbol: 1.0.1
+      micromark-util-types: 1.0.2
+      unist-util-position-from-estree: 1.1.1
+      uvu: 0.5.6
+      vfile-message: 3.1.3
+    dev: false
+
   /micromark-factory-space/1.0.0:
     resolution: {integrity: sha512-qUmqs4kj9a5yBnk3JMLyjtWYN6Mzfcx8uJfi5XAveBniDevmZasdGBba5b4QsvRcAkmvGo5ACmSUmyGiKTLZew==}
     dependencies:
@@ -3078,6 +3298,18 @@ packages:
     resolution: {integrity: sha512-U2s5YdnAYexjKDel31SVMPbfi+eF8y1U4pfiRW/Y8EFVCy/vgxk/2wWTxzcqE71LHtCuCzlBDRU2a5CQ5j+mQA==}
     dev: false
 
+  /micromark-util-events-to-acorn/1.2.0:
+    resolution: {integrity: sha512-WWp3bf7xT9MppNuw3yPjpnOxa8cj5ACivEzXJKu0WwnjBYfzaBvIAT9KfeyI0Qkll+bfQtfftSwdgTH6QhTOKw==}
+    dependencies:
+      '@types/acorn': 4.0.6
+      '@types/estree': 1.0.0
+      estree-util-visit: 1.2.0
+      micromark-util-types: 1.0.2
+      uvu: 0.5.6
+      vfile-location: 4.0.1
+      vfile-message: 3.1.3
+    dev: false
+
   /micromark-util-html-tag-name/1.1.0:
     resolution: {integrity: sha512-BKlClMmYROy9UiV03SwNmckkjn8QHVaWkqoAqzivabvdGcwNGMMMH/5szAnywmsTBUzDsU57/mFi0sp4BQO6dA==}
     dev: false
@@ -3391,6 +3623,19 @@ packages:
       callsites: 3.1.0
     dev: true
 
+  /parse-entities/4.0.0:
+    resolution: {integrity: sha512-5nk9Fn03x3rEhGaX1FU6IDwG/k+GxLXlFAkgrbM1asuAFl3BhdQWvASaIsmwWypRNcZKHPYnIuOSfIWEyEQnPQ==}
+    dependencies:
+      '@types/unist': 2.0.6
+      character-entities: 2.0.2
+      character-entities-legacy: 3.0.0
+      character-reference-invalid: 2.0.1
+      decode-named-character-reference: 1.0.2
+      is-alphanumerical: 2.0.1
+      is-decimal: 2.0.1
+      is-hexadecimal: 2.0.1
+    dev: false
+
   /parse5/7.1.2:
     resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
     dependencies:
@@ -3432,6 +3677,13 @@ packages:
     resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
     dev: true
 
+  /periscopic/3.0.4:
+    resolution: {integrity: sha512-SFx68DxCv0Iyo6APZuw/AKewkkThGwssmU0QWtTlvov3VAtPX+QJ4CadwSaz8nrT5jPIuxdvJWB4PnD2KNDxQg==}
+    dependencies:
+      estree-walker: 3.0.2
+      is-reference: 3.0.1
+    dev: false
+
   /picocolors/1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
@@ -3663,14 +3915,13 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /remark-html/15.0.1:
-    resolution: {integrity: sha512-7ta5UPRqj8nP0GhGMYUAghZ/DRno7dgq7alcW90A7+9pgJsXzGJlFgwF8HOP1b1tMgT3WwbeANN+CaTimMfyNQ==}
+  /remark-mdx/2.2.1:
+    resolution: {integrity: sha512-R9wcN+/THRXTKyRBp6Npo/mcbGA2iT3N4G8qUqLA5pOEg7kBidHv8K2hHidCMYZ6DXmwK18umu0K4cicgA2PPQ==}
     dependencies:
-      '@types/mdast': 3.0.10
-      hast-util-sanitize: 4.0.0
-      hast-util-to-html: 8.0.3
-      mdast-util-to-hast: 12.2.4
-      unified: 10.1.2
+      mdast-util-mdx: 2.0.0
+      micromark-extension-mdxjs: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   /remark-parse/10.0.1:
@@ -3683,25 +3934,15 @@ packages:
       - supports-color
     dev: false
 
-  /remark-stringify/10.0.2:
-    resolution: {integrity: sha512-6wV3pvbPvHkbNnWB0wdDvVFHOe1hBRAx1Q/5g/EpH4RppAII6J8Gnwe7VbHuXaoKIF6LAg6ExTel/+kNqSQ7lw==}
+  /remark-rehype/10.1.0:
+    resolution: {integrity: sha512-EFmR5zppdBp0WQeDVZ/b66CWJipB2q2VLNFMabzDSGR66Z2fQii83G5gTBbgGEnEEA0QRussvrFHxk1HWGJskw==}
     dependencies:
+      '@types/hast': 2.3.4
       '@types/mdast': 3.0.10
-      mdast-util-to-markdown: 1.4.0
+      mdast-util-to-hast: 12.2.4
       unified: 10.1.2
     dev: false
 
-  /remark/14.0.2:
-    resolution: {integrity: sha512-A3ARm2V4BgiRXaUo5K0dRvJ1lbogrbXnhkJRmD0yw092/Yl0kOCZt1k9ZeElEwkZsWGsMumz6qL5MfNJH9nOBA==}
-    dependencies:
-      '@types/mdast': 3.0.10
-      remark-parse: 10.0.1
-      remark-stringify: 10.0.2
-      unified: 10.1.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
   /require-directory/2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -3788,14 +4029,6 @@ packages:
     dependencies:
       loose-envify: 1.4.0
 
-  /section-matter/1.0.0:
-    resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
-    engines: {node: '>=4'}
-    dependencies:
-      extend-shallow: 2.0.1
-      kind-of: 6.0.3
-    dev: false
-
   /semver/6.3.0:
     resolution: {integrity: sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==}
     hasBin: true
@@ -3858,12 +4091,13 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /space-separated-tokens/2.0.2:
-    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+  /source-map/0.7.4:
+    resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
+    engines: {node: '>= 8'}
     dev: false
 
-  /sprintf-js/1.0.3:
-    resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
+  /space-separated-tokens/2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
     dev: false
 
   /string-width/4.2.3:
@@ -3918,11 +4152,6 @@ packages:
       ansi-regex: 5.0.1
     dev: true
 
-  /strip-bom-string/1.0.0:
-    resolution: {integrity: sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
   /strip-bom/3.0.0:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
     engines: {node: '>=4'}
@@ -3939,6 +4168,12 @@ packages:
       acorn: 8.8.1
     dev: true
 
+  /style-to-object/0.3.0:
+    resolution: {integrity: sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==}
+    dependencies:
+      inline-style-parser: 0.1.1
+    dev: false
+
   /styled-jsx/5.1.1_3lzqd2prgnu7gkxqqdmtvzna5u:
     resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
     engines: {node: '>= 12.0.0'}
@@ -4188,12 +4423,25 @@ packages:
     resolution: {integrity: sha512-F5CZ68eYzuSvJjGhCLPL3cYx45IxkqXSetCcRgUXtbcm50X2L9oOWQlfUfDdAf+6Pd27YDblBfdtmsThXmwpbQ==}
     dev: false
 
+  /unist-util-position-from-estree/1.1.1:
+    resolution: {integrity: sha512-xtoY50b5+7IH8tFbkw64gisG9tMSpxDjhX9TmaJJae/XuxQ9R/Kc8Nv1eOsf43Gt4KV/LkriMy9mptDr7XLcaw==}
+    dependencies:
+      '@types/unist': 2.0.6
+    dev: false
+
   /unist-util-position/4.0.3:
     resolution: {integrity: sha512-p/5EMGIa1qwbXjA+QgcBXaPWjSnZfQ2Sc3yBEEfgPwsEmJd8Qh+DSk3LGnmOM4S1bY2C0AjmMnB8RuEYxpPwXQ==}
     dependencies:
       '@types/unist': 2.0.6
     dev: false
 
+  /unist-util-remove-position/4.0.1:
+    resolution: {integrity: sha512-0yDkppiIhDlPrfHELgB+NLQD5mfjup3a8UYclHruTJWmY74je8g+CIFr79x5f6AkmzSwlvKLbs63hC0meOMowQ==}
+    dependencies:
+      '@types/unist': 2.0.6
+      unist-util-visit: 4.1.1
+    dev: false
+
   /unist-util-stringify-position/3.0.2:
     resolution: {integrity: sha512-7A6eiDCs9UtjcwZOcCpM4aPII3bAAGv13E96IkawkOAW0OhH+yRxtY0lzo8KiHpzEMfH7Q+FizUmwp8Iqy5EWg==}
     dependencies:
@@ -4266,6 +4514,13 @@ packages:
       convert-source-map: 1.9.0
     dev: true
 
+  /vfile-location/4.0.1:
+    resolution: {integrity: sha512-JDxPlTbZrZCQXogGheBHjbRWjESSPEak770XwWPfw5mTc1v1nWGLB/apzZxsx8a0SJVfF8HK8ql8RD308vXRUw==}
+    dependencies:
+      '@types/unist': 2.0.6
+      vfile: 5.3.6
+    dev: false
+
   /vfile-message/3.1.3:
     resolution: {integrity: sha512-0yaU+rj2gKAyEk12ffdSbBfjnnj+b1zqTBv3OQCTn8yEB02bsPizwdBPrLJjHnK+cU9EMMcUnNv938XcZIkmdA==}
     dependencies:
diff --git a/types/training.ts b/types/training.ts
deleted file mode 100644
index e617f5f..0000000
--- a/types/training.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-type TrainingType = {
-  name: string;
-  slug: string;
-  priceOpen: number;
-  priceCompany: number;
-  logo: string;
-  days: number;
-  description: string;
-  content: string;
-
-  trainingHubId?: string;
-  draft?: true;
-  new?: true;
-  featured?: true;
-  weight: number; // custom sorting
-};
-
-export default TrainingType;