From e19dbb71cd982c73678de1621cdc539ac2a76197 Mon Sep 17 00:00:00 2001 From: Vojtech Mares Date: Mon, 19 Dec 2022 00:04:15 +0100 Subject: [PATCH] feat: add training list page, training page and markdown content --- components/Footer.tsx | 23 +++--- components/Training.tsx | 84 +++++++++++++++++++++ components/TrainingListGrid.tsx | 117 +++++++++++++++++++++++++++++ content/training/argocd.md | 39 ++++++++++ content/training/git.md | 42 +++++++++++ content/training/kubernetes.md | 42 +++++++++++ content/training/terraform.md | 49 ++++++++++++ lib/cms/training.ts | 52 +++++++++++++ lib/markdownToHTML.ts | 9 +++ pages/skoleni/[slug].tsx | 92 +++++++++++++++++++++++ pages/skoleni/index.tsx | 34 ++++++++- public/images/logos/argo.png | Bin 0 -> 87565 bytes public/images/logos/git.png | Bin 0 -> 2383 bytes public/images/logos/kubernetes.png | Bin 0 -> 91178 bytes public/images/logos/terraform.png | Bin 0 -> 24509 bytes types/training.ts | 18 +++++ 16 files changed, 586 insertions(+), 15 deletions(-) create mode 100644 components/Training.tsx create mode 100644 components/TrainingListGrid.tsx create mode 100644 content/training/argocd.md create mode 100644 content/training/git.md create mode 100644 content/training/kubernetes.md create mode 100644 content/training/terraform.md create mode 100644 lib/cms/training.ts create mode 100644 lib/markdownToHTML.ts create mode 100644 pages/skoleni/[slug].tsx create mode 100644 public/images/logos/argo.png create mode 100644 public/images/logos/git.png create mode 100644 public/images/logos/kubernetes.png create mode 100644 public/images/logos/terraform.png create mode 100644 types/training.ts diff --git a/components/Footer.tsx b/components/Footer.tsx index 3f25f9e..f059517 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -31,24 +31,21 @@ export function Footer() {
- {/*

Most favorite courses

+

Nejblíbenější školení

*/} + {/*
  • + Rancher +
    • */} +

    Důležité odkazy

    diff --git a/components/Training.tsx b/components/Training.tsx new file mode 100644 index 0000000..a820d68 --- /dev/null +++ b/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 ( + <> +
    +
    + + +

    + Školení {training.name} +

    +     +
    + +
    +
    +
    +
    +
    + { training.days === 2 ? ( +
    +
    +
    + {/*
    +
    +

    + Toto školení je{' '} + + dvoudenní. + +

    +
    +
    +
    + ) : <>} +
    +
    +

    Cena za školení

    +
    +
    +
    +
    +
    Veřejný termín
    +
    {formatter.format(training.priceOpen)} bez DPH
    +
    +
    +
    Firemní školení
    +
    {formatter.format(training.priceCompany)} bez DPH
    +
    +
    +
    +
    +
    + +
    +
    +
    + +
    + + ) +} diff --git a/components/TrainingListGrid.tsx b/components/TrainingListGrid.tsx new file mode 100644 index 0000000..d2c0983 --- /dev/null +++ b/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 ( +
    + +
    +
    +

    + {training.name} +

    + { training.new ? ( + <> + + new! + + + ) : <> } +
    +

    {training.days}{' '}{training.days === 1 ? 'den' : 'dny'}

    +
    +

    + {training.description.split(" ").splice(0,40).join(" ") + "..."} +

    + +
    + ) +} + +type TrainingListProps = { + trainingList: TrainingType[] +} + +const TrainingListMobile = ({ trainingList }: TrainingListProps) => { + return ( +
    + {trainingList.map((training) => ( +
    + +
    + ))} +
    + ) +} + +const TrainingListDesktop = ({ trainingList }: TrainingListProps) => { + return ( +
    +
    + {trainingList.map((training) => ( +
    + +
    + ))} +
    +
    + ) +} + +export const TrainingListGrid = ({ trainingList }: TrainingListProps) => { + return ( + <> +
    + +
    +

    + Moje školení +

    +

    + Od veřejného cloudu přes on-premise až po serverless, se vším vám poradím. +

    +
    + + +     +
    + + ) +} diff --git a/content/training/argocd.md b/content/training/argocd.md new file mode 100644 index 0000000..aa52061 --- /dev/null +++ b/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 diff --git a/content/training/git.md b/content/training/git.md new file mode 100644 index 0000000..624f9a2 --- /dev/null +++ b/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 diff --git a/content/training/kubernetes.md b/content/training/kubernetes.md new file mode 100644 index 0000000..270b230 --- /dev/null +++ b/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 diff --git a/content/training/terraform.md b/content/training/terraform.md new file mode 100644 index 0000000..061c210 --- /dev/null +++ b/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 diff --git a/lib/cms/training.ts b/lib/cms/training.ts new file mode 100644 index 0000000..6968087 --- /dev/null +++ b/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 +} diff --git a/lib/markdownToHTML.ts b/lib/markdownToHTML.ts new file mode 100644 index 0000000..48f1bbb --- /dev/null +++ b/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 diff --git a/pages/skoleni/[slug].tsx b/pages/skoleni/[slug].tsx new file mode 100644 index 0000000..ae8468c --- /dev/null +++ b/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 + // } + + return ( + <> + + Školení {training.name} | Vojtěch Mareš - DevOps konzultant, lektor, engineer + + + +
    +
    + +
    +