feat: add training list page, training page and markdown content

components/Footer.tsx

@@ -31,24 +31,21 @@ export function Footer() {
               </ul>
             </div>
             <div>
-              {/* <h3 className="text-lg font-medium">Most favorite courses</h3>
+              <h3 className="text-lg font-medium">Nejblíbenější školení</h3>
               <ul className="mt-4 list-disc pl-4">
                 <li>
-                  <Link href="#" className="underline">Kubernetes</Link>
+                  <Link href="/skoleni/kubernetes" className="underline">Kubernetes</Link>
                 </li>
+                {/* <li>
+                  <Link href="/skoleni/gitlab-ci" className="underline">GitLab CI</Link>
+                </li> */}
                 <li>
-                  <Link href="#" className="underline">GitLab CI</Link>
+                  <Link href="/skoleni/terraform" className="underline">Terraform</Link>
                 </li>
-                <li>
+                {/* <li>
-                  <Link href="#" className="underline">Docker</Link>
+                  <Link href="/skoleni/rancher" className="underline">Rancher</Link>
-                </li>
+                </li> */}
-                <li>
+              </ul>
-                  <Link href="#" className="underline">Terraform</Link>
-                </li>
-                <li>
-                  <Link href="#" className="underline">Rancher</Link>
-                </li>
-              </ul> */}
             </div>
             <div>
               <h3 className="text-lg font-medium">Důležité odkazy</h3>

components/Training.tsx

@@ -0,0 +1,84 @@
+import Image from "next/image"
+
+import TrainingType from "@/types/training"
+import { Container } from "./Container"
+import { Button } from "./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-slate-900 pt-16 pb-16">
+          <Container className="flex justify-around">
+            <Image src={training.logo} className="h-40 w-40 rounded-full" width="1500" height="1500" alt="" />
+            <h2 className="font-display text-4xl tracking-tight text-white sm:text-6xl self-center">
+              Školení {training.name}
+            </h2>
+            </Container>
+          </div>
+        <Container>
+          <div className="md:grid md:grid-cols-5 md:gap-x-4 md:gap-y-4 mt-12">
+            <div className="md:col-span-3">
+              <div className="prose prose-slate prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg prose-h1:font-medium prose-h2:font-medium prose-h3:font-medium prose-li:my-0" dangerouslySetInnerHTML={{ __html: training.content }} />
+            </div>
+            <div className="md:col-span-2 mt-8 md:mt-0">
+              { training.days === 2 ? (
+                <div className=" bg-blue-50 p-4 rounded-lg shadow mb-8">
+                  <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="w-5 h-5 text-blue-400">
+                        <path fill-rule="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" clip-rule="evenodd" />
+                      </svg>
+
+                    </div>
+                    <div className="ml-3">
+                      <p className="text-blue-700">
+                        Toto školení je{' '}
+                        <span className="font-medium text-blue-700">
+                          dvoudenní.
+                        </span>
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              ) : <></>}
+              <div className="overflow-hidden bg-slate-50 shadow rounded-lg mt-8 md:mt-0">
+                <div className="px-4 py-5 sm:px-6">
+                  <h3 className="text-lg font-medium leading-6 text-slate-900" >Cena za školení</h3>
+                </div>
+                <div className="border-t border-gray-200 px-4 py-5">
+                  <dl className="sm:divide-y sm:divide-gray-200">
+                    <div className="py-4 sm:grid sm:grid-cols-2 sm:gap-4 sm:py-5 sm:px-6">
+                      <dt className="font-medium text-gray-500">Veřejný termín</dt>
+                      <dd className="mt-1 text-gray-900 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-gray-500">Firemní školení</dt>
+                      <dd className="mt-1 text-gray-900 sm:mt-0">{formatter.format(training.priceCompany)} bez DPH</dd>
+                    </div>
+                  </dl>
+                </div>
+              </div>
+              <div className="mt-8">
+                <Button
+                  variant="solid"
+                  color="blue"
+                  className="w-full text-lg font-medium"
+                  href="mailto:iam@vojtechmares.com"
+                >
+                  Nezávazně poptat
+                </Button>
+              </div>
+            </div>
+          </div>
+        </Container>
+      </div>
+    </>
+  )
+}

components/TrainingListGrid.tsx

@@ -0,0 +1,117 @@
+import Image from "next/image"
+import clsx from "clsx"
+
+import TrainingType from "@/types/training"
+import { Container } from "./Container"
+import { Button } from "./Button"
+
+type TrainingDetailProps = {
+  training: TrainingType,
+  className?: string,
+  props?: any[],
+}
+
+const TrainingDetail = ({ training, className, ...props }: TrainingDetailProps) => {
+  return (
+    <div
+      className={
+        clsx(className,
+          "rounded-3xl shadow py-8 px-6 sm:px-8",
+          training.featured ? 'bg-blue-600 py-8' : ''
+        )
+      }
+      {...props}
+    >
+      <Image src={training.logo} className="h-32 w-32 rounded-full" width="1500" height="1500" alt="" />
+      <div className="flex justify-between mt-6">
+        <div className="flex">
+          <h3
+            className="text-xl font-display font-medium text-white"
+          >
+            {training.name}
+          </h3>
+          { training.new ? (
+            <>
+              <span className="ml-2 rounded-full bg-orange-100 px-2 py-1 text-xs font-medium text-orange-800 border border-1 border-orange-800">
+                new!
+              </span>
+            </>
+          ) : <></> }
+        </div>
+        <p className="max-w-2xl text-md text-white">{training.days}{' '}{training.days === 1 ? 'den' : 'dny'}</p>
+      </div>
+      <p className={
+        clsx(
+          "mt-4 text-md",
+          training.featured ? 'text-white' : 'text-slate-200'
+        )}
+      >
+        {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="pt-16 pb-14 sm:pb-20 sm:pt-24 lg:pb-32 bg-slate-900"
+      >
+        <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>
+    </>
+  )
+}

content/training/argocd.md

@@ -0,0 +1,39 @@
+---
+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
+---
+
+# Popis technologie
+
+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.
+
+# Co Vás naučím
+
+- Uvod do CD
+- Co je ArgoCD
+- Instalace a konfigurace
+- GitOps
+  - Plain Kubernetes manifests
+  - Helm packages
+  - Kustomize
+  - Jsonnet
+- Rollbacks
+- Best Practices
+- User Management
+
+# Pro koho je školení určeno
+
+Školení je určeno pro vývojáře a DevOpsáky, kteří chteji automaticky nasazovat do Kubernetes podle GitOps principu.
+
+# Předchozí znalosti
+
+Zakladni znalost Kubernetes
+Technické požadavky
+Webový prohlížeč
+Přístup na internet

content/training/git.md

@@ -0,0 +1,42 @@
+---
+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
+---
+
+# Co je to Git?
+
+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).
+
+# Jak školení probíhá
+
+Na školení formou workshopu si vysvětlíme proč je dobré Git používat, jak funguje (proč dnes nemá konkurenty) a best practice. Ukážeme si vše od instalace a základního nastavení Gitu, přes jednoduchou práci na jedné větvi až po práci v teamu a s více větvemi za pomoci různých mergovacích strategií (merge, rebase). Ukážeme si výhody a nevýhody obou z nich a je pak na Vás jak to budete dělat. Také si ukážeme jak se dostat ze špatných situací, jako omylem jsem si všechno smazal a podobně.
+
+# Co Vás naučím
+
+Konfigirace GITu
+Vytvořit nový repozitář
+Základní ovládání GITu
+Práce v jedné větvi
+Práce ve větvích - merge, rebase (silná stránka Gitu)
+Práce se vzdálenými repozitáři
+Záchrana smazaných dat z repozitáře
+
+# Pro koho je školení určeno
+
+Školení je určeno primárně pro vývojáře, kteří neverzují vůbec nebo nepoužívají Git. Zároveň je vhodné i pro ty, kteří Git nevyužívají na 100% (git commit, git pull, git push). Ať jde o malé weby nebo velké projekty, Git si najde uplatnění. Dále je kurz vhodný i pro ty, kteří nepíšou kód tak často, ale občas potřebují něco zaverzovat, například nějaké migrační skripty DB anebo konfiguraci serveru. Git pomůže i DBA nebo DevOps.
+
+## Předchozí znalosti
+
+Základy programování
+Základy práce v terminálu výhodou
+Základní znalost Gitu výhodou
+
+## Technické požadavky
+
+Nainstalovaný Git
+Přístup na internet - ideálně bez korporátní proxy, případně nastavenou proxy v prohlížeči

content/training/kubernetes.md

@@ -0,0 +1,42 @@
+---
+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
+---
+
+# Popis technologie
+
+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.
+
+# Jak školení probíhá
+
+Školeni probíhá formou workshopů, vše si prakticky vyzkoušíme a osaháme. Ukážeme jak spustit Kubernetes lokálně (pro vývoj) a na cloudové platformě DigitalOcean. Dozvíme se základní strukturu Kubernetes a projdeme si jeho komponenty. Naučíme se jak napsat Kubernetes manifest a jak jim nasadit aplikaci v Dockeru. Dále si ukážeme jak pracovat s právama v Kubernetes a jak používat (a psát) Kubernetes balíčky v Helmu.
+
+# Co Vás naučím
+
+- Teoretický úvod do Kubernetes
+- Instalace Minikube a kubectl (pro ty kteří nenainstalovali doma)
+- Popis Kubernetes komponent
+- Deployment do Kubernetes
+- Práce s právy v Kubernetes clusteru
+- Teoretický úvod do Helm balíčku
+- Instalace / Deployment pomocí Helmu
+- Psaní vlastního Helm balíčku
+
+# Pro koho je školení určeno
+
+Školení je určeno pro lidi (vývojáři a devops), kteří mají zájem provozovat své Docker aplikace v Kubernetes.
+
+# Předchozí znalosti
+
+Základy práce s Dockerem
+Základy práce s Linuxem
+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

content/training/terraform.md

@@ -0,0 +1,49 @@
+---
+name: Terraform
+priceOpen: 5900
+priceCompany: 24000
+logo: /images/logos/terraform.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
+featured: true
+weight: 31
+---
+
+# Co to je Terraform a k čemu se používá?
+
+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).
+
+# Jak školení probíhá
+
+Školení je formou workshopu, všechno si podrobně vyzkoušíme a vysvětlíme. Ukážeme si jak Terraform pracuje, jak jej používat v teamu a jak jím spravovat infrastukturu. Uděláme si příklad infrastruktury jednoduché aplikace, kde nastavíme vše - od DNS, přes Kubernetes cluster po S3 file storage.
+
+# Co Vás naučím
+
+- Základní koncept Terraformu
+- Výhody Terraformu proti Ansible, Puppetu, ...
+- Konfigurace Terraformu pro práci v teamu
+- Ovládání Terraform CLI
+- Úvod do Terraform Configuration Language (HCL)
+- Terraform Providers - napojení na cloudy
+- Práce s resources v Terraformu
+- Terraform moduly
+- Best Practice
+
+# Pro koho je školení určeno
+
+Školení je určeno pro DevOps a adminy, kteří chtějí lépe a efektivněji spravovat infrastrukturu. Zároveň také pro vývojáře, kteří se starají o nejakou infrastrukturu v cloudech.
+
+# Předchozí znalosti
+
+Základní znalost veřejných cloudů (AWS, DigitalOcean, Azure, ...)
+Základy práce v terminálu
+
+# Technické požadavky
+
+Nainstalovaný Terraform
+Přístup na internet (ideálně bez korporatni proxy)
+Vlastní účet v DigitalOceanu výhodou

lib/cms/training.ts

@@ -0,0 +1,52 @@
+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
+}

lib/markdownToHTML.ts

@@ -0,0 +1,9 @@
+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

pages/skoleni/[slug].tsx

@@ -0,0 +1,92 @@
+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/Header"
+import { Footer } from "@/components/Footer"
+import { Training } from "@/components/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,
+  }
+}

pages/skoleni/index.tsx

@@ -2,8 +2,36 @@ import Head from "next/head";
 
 import { Header } from "@/components/Header"
 import { Footer } from '@/components/Footer'
+import { getAllTraining } from "@/lib/cms/training";
+import TrainingType from "@/types/training";
+import { TrainingListGrid } from "@/components/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)
 
-export default function Home() {
   return (
     <>
       <Head>
@@ -16,9 +44,11 @@ export default function Home() {
       </Head>
       <main>
         <Header />
-        <h1 className="text-4xl mx-auto w-12 my-8">Připravuji</h1>
+        <TrainingListGrid trainingList={trainingList} />
       </main>
       <Footer />
     </>
   );
 }
+
+export default TrainingList

types/training.ts

@@ -0,0 +1,18 @@
+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