Lisätty kontenttia, navigaatiota

src/components/ArticleNavigation.astro

@@ -10,7 +10,7 @@ let currentChapterIndex = chapters.findIndex((c) => path.includes(c.slug));
     currentChapterIndex > 0 && (
       <div>
         <p>previous</p>
-        <a href={`/${title}/${chapters[currentChapterIndex - 1].slug}`}>
+        <a href={`/kurssit/${title}/${chapters[currentChapterIndex - 1].slug}`}>
           {chapters[currentChapterIndex - 1].data.title}
         </a>
       </div>
@@ -20,7 +20,7 @@ let currentChapterIndex = chapters.findIndex((c) => path.includes(c.slug));
     currentChapterIndex < chapters.length - 1 && (
       <div>
         <p>next</p>
-        <a href={`/${title}/${chapters[currentChapterIndex + 1].slug}`}>
+        <a href={`/kurssit/${title}/${chapters[currentChapterIndex + 1].slug}`}>
           {chapters[currentChapterIndex + 1].data.title}
         </a>
       </div>

src/components/client/CourseContents.svelte

@@ -12,15 +12,15 @@
         {#if content.depth === 1}
           <li>
             <a
-              href={`/${content.collection}/${content.slug}`}
+              href={`/kurssit/${content.collection}/${content.slug}`}
               class={`block text-purple-600 hover:underline pl-2 border-purple-500 hover:border-l-2`}
               >{content.data.title}</a
             >
             <ul>
               {#each findSubChapters(content.slug) as cont}
                 <li>
                   <a
-                    href={`/${cont.collection}/${cont.slug}`}
+                    href={`/kurssit/${cont.collection}/${cont.slug}`}
                     class={`flex w-full text-purple-600 hover:underline pl-2 border-purple-500 hover:border-l-2`}
                     >{cont.data.title}</a
                   >

src/content/101-git/asennus.md

@@ -0,0 +1,14 @@
+---
+title: Asennusohjeet
+chapter: 1
+description: Asennusohjeet Gitille
+---
+
+# Git asennusohjeet
+
+## Windows 10/11
+Windows ohjeet tähän
+## MacOS
+Mac ohjeet tähän
+## Linux
+Linux ohjeet tähän

src/content/101-git/index.md

@@ -0,0 +1,22 @@
+---
+title: Git perusteet
+chapter: 0
+desc: Tervetuloa Git-perusteiden kurssille!
+---
+
+# Git perusteet
+
+Tervetuloa hauskimmalle Git kurssille. Tämän kurssin jälkeen Git ei ole enää pelottava mörkö sängyn alla vaan tärkein työkalu arsenaalissasi.
+
+## Oppimistavoitteet
+
+- Kartoitetaan, missä määrin Git-osaamista tarvitaan työelämässä.
+- Tiedät, miksi versiohallintaa tarvitaan ryhmäprojektissa.
+- Ymmärrät, Git-versiohallinnan peruspilarit ja käsitteet (*Repository, worktree, commit, push, pull, fetch, checkout, branch ja pull request*).
+- Osaat hyödyntää Gitin peruskomentoja VS Codessa tai terminaalissa.
+- Tiedät mikä on Github ja Gitlab, ja miten ne eroavat Git-versiohallinnasta.
+
+## Edellytykset
+
+- Toimiva kone, Win/Mac/Linux
+- Git-asennettuna (kts. seuraava luku)

src/content/testi/html.md → src/content/101-web/html/html.md

@@ -1,6 +1,7 @@
 ---
 title: 'HTML alkeet'
-pubDate: 'Oct 5 2023'
+chapter: 1
+desc: 'Tähän on heitetty vähän alkeita HTML:stä'
 ---
 
 # Tehtävät

src/content/101-web/html/index.md

@@ -0,0 +1,22 @@
+---
+title: Hötömölöt
+chapter: 0
+desc: Tervetuloa HTML-perusteiden kurssille!
+---
+
+# Hötömölöt
+
+Tervetuloa hauskimmalle HTML kurssille. Tämän kurssin jälkeen HTML ei ole enää pelottava mörkö sängyn alla vaan tärkein työkalu arsenaalissasi.
+
+## Oppimistavoitteet
+
+- Kartoitetaan, missä määrin HTML-osaamista tarvitaan työelämässä.
+- Tiedät, miksi versiohallintaa tarvitaan ryhmäprojektissa.
+- Ymmärrät, HTML-versiohallinnan peruspilarit ja käsitteet (*Repository, worktree, commit, push, pull, fetch, checkout, branch ja pull request*).
+- Osaat hyödyntää HTMLin peruskomentoja VS Codessa tai terminaalissa.
+- Tiedät mikä on HTMLhub ja HTMLlab, ja miten ne eroavat HTML-versiohallinnasta.
+
+## Edellytykset
+
+- Toimiva kone, Win/Mac/Linux
+- HTML-asennettuna (kts. seuraava luku)

src/content/101-web/index.md

@@ -0,0 +1,22 @@
+---
+title: Web perusteet
+chapter: 0
+desc: Tervetuloa Web-perusteiden kurssille!
+---
+
+# Web perusteet
+
+Tervetuloa hauskimmalle Web kurssille. Tämän kurssin jälkeen Web ei ole enää pelottava mörkö sängyn alla vaan tärkein työkalu arsenaalissasi.
+
+## Oppimistavoitteet
+
+- Kartoitetaan, missä määrin Web-osaamista tarvitaan työelämässä.
+- Tiedät, miksi versiohallintaa tarvitaan ryhmäprojektissa.
+- Ymmärrät, Web-versiohallinnan peruspilarit ja käsitteet (*Repository, worktree, commit, push, pull, fetch, checkout, branch ja pull request*).
+- Osaat hyödyntää Webin peruskomentoja VS Codessa tai terminaalissa.
+- Tiedät mikä on Webhub ja Weblab, ja miten ne eroavat Web-versiohallinnasta.
+
+## Edellytykset
+
+- Toimiva kone, Win/Mac/Linux
+- Web-asennettuna (kts. seuraava luku)

src/content/101-web/js/index.md

@@ -0,0 +1,22 @@
+---
+title: JavaScript perusteet
+chapter: 0
+desc: Tervetuloa JS-perusteiden kurssille!
+---
+
+# JS perusteet
+
+Tervetuloa hauskimmalle JS kurssille. Tämän kurssin jälkeen JS ei ole enää pelottava mörkö sängyn alla vaan tärkein työkalu arsenaalissasi.
+
+## Oppimistavoitteet
+
+- Kartoitetaan, missä määrin JS-osaamista tarvitaan työelämässä.
+- Tiedät, miksi versiohallintaa tarvitaan ryhmäprojektissa.
+- Ymmärrät, JS-versiohallinnan peruspilarit ja käsitteet (*Repository, worktree, commit, push, pull, fetch, checkout, branch ja pull request*).
+- Osaat hyödyntää JSin peruskomentoja VS Codessa tai terminaalissa.
+- Tiedät mikä on JShub ja JSlab, ja miten ne eroavat JS-versiohallinnasta.
+
+## Edellytykset
+
+- Toimiva kone, Win/Mac/Linux
+- JS-asennettuna (kts. seuraava luku)

src/content/testi/js.md → src/content/101-web/js/js.md

@@ -1,6 +1,7 @@
 ---
 title: 'JS alkeet'
-pubDate: 'Oct 10 2023'
+chapter: 1
+desc: Tervetuloa JS-perusteiden kurssille!
 ---
 
 # Tehtäviä

src/content/blogi/16-11-2023/npm-vs-pnpm.md

@@ -0,0 +1,42 @@
+---
+title: npm vs pnpm
+author: wesenbergg
+readTime: 4
+puDate: '16.11.2023'
+desc: '5 syytä miksi pnpm lyö npm:n kanvaasille'
+tags: ['node', 'js', 'ohjelmistokehitys', 'package manager', 'vertailu', 'devex', 'dx']
+---
+# Mikä JS pakettijärjestelmä sopii tarpeisiisi pnpm vs npm
+
+Pakettihallintajärjestelmät, kuten npm (Node Package Manager), ovat keskeinen osa nykyaikaista JavaScript-kehitystä, ja niillä on vaikutusta projektien hallintaan ja riippuvuuksien käsittelyyn. pnpm on yksi vaihtoehtoinen pakettihallintajärjestelmä, ja sen käyttäminen voi tarjota joitakin etuja verrattuna perinteiseen npm:ään.
+
+Tässä viisi hyvää syytä, miksi kannattaa siirtyä pnpm.
+
+## Levyn tilan optimointi:
+pnpm käyttää linkitystä ja symbolisia linkkejä vähentääkseen levyn käyttöä. Tämä voi olla erityisen hyödyllistä suurissa projekteissa, joissa on paljon riippuvuuksia. pnpm jakaa yhteiset riippuvuudet ja säästää siten tilaa.
+
+## Hyvästi globaalit paketit:
+pnpm ei tarvitse globaaleja paketteja, toisin kuin npm. Tämä tarkoittaa, että projektit voivat olla eristettyjä toisistaan, eikä yhteen projektiin asennetut paketit vaikuta muihin projekteihin.
+
+## Ei node_module duplikaatteja:
+pnpm jakaa paketit eri projektien välillä, mikä vähentää tarvetta duplikaatti node_modules-kansioille. Tämä voi säästää sekä aikaa että levytilaa.
+
+## Nolla installaatio:
+pnpm ei vaadi erillistä asennusvaihetta, kuten npm:n npm install. Tämä tarkoittaa, että projektit ovat nopeampia pystyttää, ja kehittäjän ei tarvitse odottaa riippuvuuksien asennusta.
+
+## Yhteensopivuus npm:n kanssa:
+pnpm on yhteensopiva npm:n kanssa, joten voit käyttää sitä olemassa olevissa projekteissa, jotka on alun perin luotu npm:llä.
+
+On tärkeää huomata, että valinta npm:n ja pnpm:n välillä riippuu monista tekijöistä, kuten projektin tarpeista, tiimin kokemuksesta ja henkilökohtaisista mieltymyksistä. Jos projekti hyötyy pnpm:n tarjoamista eduista, se voi olla harkitsemisen arvoinen vaihtoehto.
+
+## Yhteenveto
+
+Työkalu sopii erinomaisesti vapaa-ajan projekteihin. Niitä kun tuppaa kasaantumaan kymmenittäin, niin pnpm karsii node_module duplikaattiviidakkoa kuin machete. Lisäksi muistelen aloittelevana koodarina, kun unohti pari kertaa asentaa riippuvuudet `npm install` komennolla, siitä seurasi hämmennystä ja debuggausta. pnpm:llä aloittelevan koodarin ei tarvitse tietää tätä tuskaa.
+
+### pnpm:n hyödyt
+- Säästää tilaa kiintolevyllä.
+- Yksinkertaistettu devauskokemus.
+- Hyvä yhteensopivuus, Node.js:n oletus (npm)pakettijärjestelmän kanssa.
+### pnpm:n puutteet
+- Ei ole oletuksena, joten vaatii erillisen asennuksen.
+- Suhteellisen vähän käytetty yrityksissä.

src/content/blogi/17-11-2023/10-askelta-web-kehitykseen.md

@@ -0,0 +1,49 @@
+---
+title: 10 askelta web kehitykseen
+author: wesenbergg
+readTime: 5
+puDate: '17.11.2023'
+desc: 'Web-kehityksen urapolun aloittaminen voi tuntua aluksi haastavalta, mutta se on saavutettavissa vaiheittain. Tässä on muutama askel, jotka voivat auttaa sinua aloittamaan web-kehityksen urapolun.'
+tags: ['node', 'js', 'ohjelmistokehitys', 'package manager', 'vertailu', 'devex', 'dx']
+---
+
+Web-kehityksen urapolun aloittaminen voi tuntua aluksi haastavalta, mutta se on saavutettavissa vaiheittain. Tässä on muutama askel, jotka voivat auttaa sinua aloittamaan web-kehityksen urapolun:
+
+1. Opi Perusteet:
+Aloita oppimalla perusteet web-tekniikoista, kuten HTML, CSS ja JavaScript. Nämä ovat välttämättömiä rakentaessasi verkkosivuja ja -sovelluksia.
+
+2. Harjoittele Projektien Kanssa:
+Paras tapa oppia on käytännön harjoittelu. Luo omia projekteja, kuten henkilökohtainen verkkosivu tai yksinkertainen verkkosovellus. Tämä auttaa sinua soveltamaan oppimiasi taitoja.
+
+3. Syvennä JavaScript-osaamistasi:
+Koska JavaScript on keskeinen web-kehityskieli, syvennä osaamistasi sen suhteen. Opettele käyttämään moderneja JavaScript-kehyksiä ja kirjastoja, kuten React, Angular tai Vue.js.
+
+4. Tutustu Versionhallintaan:
+Opi käyttämään versionhallintaa, kuten Git. Tämä auttaa sinua seuraamaan muutoksia koodissasi, tekemään yhteistyötä muiden kanssa ja hallitsemaan projektien kehitystä.
+
+5. Ymmärrä Responsiivinen Suunnittelu:
+Opettele responsiivisen suunnittelun periaatteet, jotta voit luoda sivustoja, jotka näyttävät hyvältä eri laitteilla.
+
+6. Tutustu Backend-kehitykseen:
+Tutustu backend-kehitykseen oppimalla jokin backend-kielistä, kuten **Node.js (JavaScript)**, Java, C#, Python tai PHP. Ymmärrä perusteet tietokannoista (Mongo, Firebase tai SQL) ja REST-rajapinnan suunnittelusta.
+
+*Node.js on vahva suositus, koska sitä käytetään lähes väistämättömästi kaikissa moderneissa web-projekteissa. React, Svelte, Vue tms JS-frameworkit hyödyntävät Node ekosysteemiä.*
+
+7. Opi Tietoturva-asioista:
+Ymmärrä perusteet web-tietoturvasta. Opi, miten suojata verkkosivusi haittaohjelmilta, tietomurroilta ja muita yleisiltä tietoturvaongelmilta. Perusasioihin kuuluu:
+- Käyttäjän todennus ja valtuutus
+- Käyttäjäsyötteen tarkastus ja sanitointi
+- Yleisempien tietoturva uhkien tunnistaminen (injektio, XSS tms)
+
+8. Rakenna Portfoliota:
+Luo portfolio, joka sisältää projektisi, taitosi ja mahdollisesti linkkejä verkkosivuihisi. Portfolion avulla voit näyttää taitosi potentiaalisille työnantajille.
+
+9. Osallistu Yhteisöihin (verkostoidu):
+Liity web-kehitysyhteisöihin, Discord-servereihin, Reddit-foorumiin, Slack-ryhmiin tai GitHubiin. Voit oppia muiden kokemuksista ja saada apua ongelmatilanteissa. Parhaat työpaikat löytyvät verkostoista!
+
+10. Jatkuva Itsensä Kehittäminen:
+Web-kehitys on ala, jossa teknologiat muuttuvat nopeasti. Pysy ajan tasalla uusimmista trendeistä, kirjastoista ja kehyksistä. Opi jatkuvasti ja ole valmis sopeutumaan muutoksiin.
+
+Älä unohda, että kärsivällisyys ja säännöllinen harjoittelu ovat avainasemassa. Aloittaminen voi tuntua ylivoimaiselta, mutta vähitellen voit kehittää taitojasi ja rakentaa menestyksekkään uran web-kehityksessä. Aseta itsellesi tavoitteita ja deadlineja. Avainasemassa on löytää miellyttävä tapa oppia, ja ympäröidä itsesi ihmisillä, jotka jakavat kanssasi saman tavoitteen.
+
+**Onnea matkaan!**

src/content/config.ts

@@ -1,6 +1,6 @@
 import { defineCollection, z } from 'astro:content';
 
-const blog = defineCollection({
+const blogi = defineCollection({
 	// Type-check frontmatter using a schema
 	schema: z.object({
 		title: z.string(),
@@ -19,4 +19,15 @@ const testi = defineCollection({
 	})
 })
 
-export const collections = { blog, testi };
+const courseCollection = defineCollection({
+	schema: z.object({
+		title: z.string(),
+		chapter: z.number(),
+		desc: z.string()
+	})
+})
+
+const git101 = courseCollection;
+const web101 = courseCollection;
+
+export const collections = { blogi, testi, "101-git": git101, "101-web": web101 };

src/layouts/CourseChapterLayout.astro

@@ -2,21 +2,22 @@
 import type { MarkdownHeading } from "astro";
 import TableOfContents from "../components/client/TableOfContents.svelte";
 import generateToc from "../utils/generateToc.ts";
-import { getCollection } from "astro:content";
+import { getCollection, type CollectionKey } from "astro:content";
 import CourseContents from "../components/client/CourseContents.svelte";
 import Layout from "./Layout.astro";
 import ArticleNavigation from "../components/ArticleNavigation.astro";
 
 export interface Props {
   title?: string;
+  collectionKey: string;
   description?: string;
   headings: MarkdownHeading[];
 }
-const { title, description, headings } = Astro.props;
+const { title, description, headings, collectionKey = "testi" } = Astro.props;
 const toc = generateToc(headings);
 
 const getCourseNav = async () => {
-  const posts = await getCollection("testi");
+  const posts = await getCollection(collectionKey as CollectionKey);
 
   return posts.map((post) => ({
     id: post.id,
@@ -38,3 +39,37 @@ let chapters = await getCourseNav();
     </ArticleNavigation>
   </article>
 </Layout>
+
+<style is:inline>
+  article {
+    min-height: calc(100vh - 64px);
+    > h1 {
+      font-size: x-large;
+      padding: 1rem 0;
+    }
+    > h2 {
+      font-size: large;
+      padding: 1rem 0;
+    }
+    > ol {
+      list-style: numeric;
+    }
+    > ol > li > ol {
+      list-style-type: lower-alpha;
+    }
+    > ul,
+    > ol,
+    > ol ol,
+    > ol ul,
+    > ul ul,
+    > ul ol {
+      padding-left: 1.5rem;
+    }
+    > ul {
+      list-style-type: disc;
+    }
+    > p {
+      padding-bottom: 1rem;
+    }
+  }
+</style>

src/pages/index.astro

@@ -4,6 +4,6 @@ import Layout from "../layouts/Layout.astro";
 
 <Layout title="Welcome to Astro.">
   <main>
-    <a href={`/blog/first-post`}>first post</a>
+    <a href={`/blogi`}>first post</a>
   </main>
 </Layout>

src/pages/kurssit/101-git/[...slug].astro

@@ -0,0 +1,27 @@
+---
+import {
+  type CollectionEntry,
+  type CollectionKey,
+  getCollection,
+} from "astro:content";
+import CourseChapterLayout from "../../../layouts/CourseChapterLayout.astro";
+
+const collectionKey: CollectionKey = "101-git";
+
+export const getStaticPaths = async () => {
+  const posts = await getCollection("101-git");
+
+  return posts.map((post) => ({
+    params: { slug: post.slug },
+    props: post,
+  }));
+};
+type Props = CollectionEntry<typeof collectionKey>;
+
+const { collection, render } = Astro.props;
+const { Content, headings } = await render();
+---
+
+<CourseChapterLayout title={collection} {collectionKey} {headings}>
+  <Content />
+</CourseChapterLayout>

src/pages/kurssit/101-git/index.astro

@@ -0,0 +1,9 @@
+---
+import Layout from "../../../layouts/Layout.astro";
+---
+
+<Layout title="Welcome to Astro.">
+  <main>
+    <h1>Git Perusteet</h1>
+  </main>
+</Layout>