Began introductory slides

src/App.svelte

@@ -11,6 +11,11 @@
 
     import Title from './slides/Title.svelte'
     import PackageGraph from './slides/PackageGraph.svelte'
+    import WhatIsNix from './slides/WhatIsNix.svelte'
+    import AboutMe from './slides/AboutMe.svelte'
+    import History from './slides/History.svelte'
+    import CoreIdea from './slides/CoreIdea.svelte'
+    import TheProblem from './slides/TheProblem.svelte'
 
     onMount(async () => {
         await tick()
@@ -28,6 +33,11 @@
 <div class="reveal">
     <div class="slides">
         <Title />
+        <AboutMe />
+        <WhatIsNix />
+        <TheProblem />
+        <CoreIdea />
+        <History />
         <PackageGraph />
     </div>
 </div>

src/app.css

@@ -1,3 +1,8 @@
+:root {
+    --nix-dark-blue: #4f73bd;
+    --nix-light-blue: #7eb9e3;
+}
+
 #app {
     width: 100%;
     height: 100vh;

src/repo-graph.ts

@@ -1,74 +0,0 @@
-import * as d3 from 'd3'
-
-type PackageStat = {
-    Name: string
-    Packages: number
-    'Fresh Packages': number
-}
-
-const svg = d3.select('svg')
-const width = +svg.attr('width') || 800
-const height = +svg.attr('height') || 500
-const margin = { top: 30, right: 20, bottom: 50, left: 70 }
-const innerWidth = width - margin.left - margin.right
-const innerHeight = height - margin.top - margin.bottom
-
-const chart = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)
-
-// === Load CSV data ===
-d3.csv<PackageStat, string>('packages.csv', d3.autoType).then((data) => {
-    // Define scales
-    const x = d3
-        .scaleLinear()
-        .domain([0, d3.max(data, (d) => d.Packages)])
-        .nice()
-        .range([0, innerWidth])
-
-    const y = d3
-        .scaleLinear()
-        .domain([0, d3.max(data, (d) => d['Fresh Packages'])])
-        .nice()
-        .range([innerHeight, 0])
-
-    // Add axes
-    chart
-        .append('g')
-        .attr('transform', `translate(0,${innerHeight})`)
-        .call(d3.axisBottom(x))
-        .append('text')
-        .attr('x', innerWidth / 2)
-        .attr('y', 40)
-        .attr('fill', 'black')
-        .attr('text-anchor', 'middle')
-        .text('Packages')
-
-    chart
-        .append('g')
-        .call(d3.axisLeft(y))
-        .append('text')
-        .attr('x', -innerHeight / 2)
-        .attr('y', -50)
-        .attr('fill', 'black')
-        .attr('text-anchor', 'middle')
-        .attr('transform', 'rotate(-90)')
-        .text('Fresh Packages')
-
-    // Add points
-    chart
-        .selectAll('circle')
-        .data(data)
-        .join('circle')
-        .attr('cx', (d) => x(d.Packages))
-        .attr('cy', (d) => y(d['Fresh Packages']))
-        .attr('r', 5)
-
-    // Add labels
-    chart
-        .selectAll('text.label')
-        .data(data)
-        .join('text')
-        .attr('class', 'label')
-        .attr('x', (d) => x(d.Packages) + 7)
-        .attr('y', (d) => y(d['Fresh Packages']))
-        .text((d) => d.Name)
-})

src/slides/AboutMe.svelte

@@ -0,0 +1,17 @@
+<section>
+    <h3>About Me</h3>
+    <ul>
+        <li>Senior Computer Science Major / CIS Minor</li>
+        <li>The Nix guy or maybe the CD Guy</li>
+    </ul>
+</section>
+
+<style>
+    section {
+        text-align: left;
+    }
+
+    ul {
+        font-size: 20pt;
+    }
+</style>

src/slides/CoreIdea.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    import Reproducible from '/reproducible.svg'
+    import Declartive from '/declaritive.svg'
+    import Reliable from '/reliable.svg'
+</script>
+
+<section>
+    <section>
+        <h3 style="text-align: left;">The Core Idea</h3>
+        <div id="images">
+            <img src={Reproducible} alt="Reproducible" />
+            <img src={Declartive} alt="Declartive" />
+            <img src={Reliable} alt="Reliable" />
+            <strong>Reproducible</strong>
+            <strong>Declarative</strong>
+            <strong>Reliable</strong>
+        </div>
+    </section>
+    <section>
+        <div id="reproducible">
+            <p style="text-align: left;">
+                Nix is <strong>Purely Functional</strong>
+            </p>
+            <div>
+                <img src={Reproducible} alt="Reproducible" />
+                <strong>Reproducible</strong>
+            </div>
+        </div>
+    </section>
+    <section>
+        <div id="declartive">
+            <div>
+                <img src={Declartive} alt="Declartive" />
+                <strong>Declartive</strong>
+            </div>
+            <p style="text-align: right;">Packages & Systems are <strong>Declared</strong></p>
+        </div>
+    </section>
+    <section>
+        <div id="reliable">
+            <p style="text-align: left;">
+                <strong>Safe Upgrades</strong> and <strong>Rollbacks</strong>
+            </p>
+            <div>
+                <img src={Reliable} alt="Reliable" />
+                <strong>Reliable</strong>
+            </div>
+        </div>
+    </section>
+</section>
+
+<style>
+    #images {
+        display: grid;
+        grid-template-rows: 1fr 40px;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 40px;
+    }
+
+    #reproducible,
+    #reliable {
+        display: grid;
+        grid-template-rows: 1fr;
+        grid-template-columns: 2fr 1fr;
+        gap: 40px;
+    }
+
+    #declartive {
+        display: grid;
+        grid-template-rows: 1fr;
+        grid-template-columns: 1fr 2fr;
+        gap: 40px;
+    }
+</style>

src/slides/History.svelte

@@ -0,0 +1,23 @@
+<section>
+    <h3>A Brief History</h3>
+    <ul>
+        <li>
+            In 2006, Eelco Dolstra conceived both the Nix expression language and package manager as
+            part of his PhD thesis “The Purely Functional Software Deployment Model”
+        </li>
+        <li>
+            Also in 2006, as part of his Master's Thesis, Armijn Hemel described NixOS, a Linux
+            distrobution based on the Nix package manager.
+        </li>
+    </ul>
+</section>
+
+<style>
+    section {
+        text-align: left;
+    }
+
+    ul {
+        font-size: 20pt;
+    }
+</style>

src/slides/PackageGraph.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import * as d3 from 'd3'
     import { onMount } from 'svelte'
-    import PackagePoint from '../lib/PackagePoint.svelte'
 
     type PackageStat = {
         name: string

src/slides/TheProblem.svelte

@@ -0,0 +1,3 @@
+<section>
+    <h3 style="text-align: left;">The Problem</h3>
+</section>

src/slides/WhatIsNix.svelte

@@ -0,0 +1,40 @@
+<section>
+    <section data-auto-animate>
+        <h1>Nix?</h1>
+    </section>
+    <section data-auto-animate>
+        <h1>Nix?</h1>
+        <ul>
+            <li>Nix (The Expression Language)</li>
+        </ul>
+    </section>
+    <section data-auto-animate>
+        <h1>Nix?</h1>
+        <ul>
+            <li>Nix (The Expression Language)</li>
+            <li>Nix (The Package Manager)</li>
+        </ul>
+    </section>
+    <section data-auto-animate>
+        <h1>Nix?</h1>
+        <ul>
+            <li>Nix (The Expression Language)</li>
+            <li>Nix (The Package Manager)</li>
+            <li>NixOS (The Linux Distro)</li>
+        </ul>
+    </section>
+</section>
+
+<style>
+    /* Every odd li in a ul */
+    ul li:nth-child(odd) {
+        font-weight: bold;
+        color: var(--nix-dark-blue);
+    }
+
+    /* Every even li in a ul */
+    ul li:nth-child(even) {
+        font-weight: bold;
+        color: var(--nix-light-blue);
+    }
+</style>