diff --git a/public/declaritive.svg b/public/declaritive.svg new file mode 100644 index 0000000..1121e18 --- /dev/null +++ b/public/declaritive.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/reliable.svg b/public/reliable.svg new file mode 100644 index 0000000..d38a228 --- /dev/null +++ b/public/reliable.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/reproducible.svg b/public/reproducible.svg new file mode 100644 index 0000000..aceb9e9 --- /dev/null +++ b/public/reproducible.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/App.svelte b/src/App.svelte index 8142967..9da6cdb 100644 --- a/src/App.svelte +++ b/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 @@
+ <AboutMe /> + <WhatIsNix /> + <TheProblem /> + <CoreIdea /> + <History /> <PackageGraph /> </div> </div> diff --git a/src/app.css b/src/app.css index 54f6cce..fcbc210 100644 --- a/src/app.css +++ b/src/app.css @@ -1,3 +1,8 @@ +:root { + --nix-dark-blue: #4f73bd; + --nix-light-blue: #7eb9e3; +} + #app { width: 100%; height: 100vh; diff --git a/src/repo-graph.ts b/src/repo-graph.ts deleted file mode 100644 index ec542c4..0000000 --- a/src/repo-graph.ts +++ /dev/null @@ -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) -}) diff --git a/src/slides/AboutMe.svelte b/src/slides/AboutMe.svelte new file mode 100644 index 0000000..4991659 --- /dev/null +++ b/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> diff --git a/src/slides/CoreIdea.svelte b/src/slides/CoreIdea.svelte new file mode 100644 index 0000000..4277ead --- /dev/null +++ b/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> diff --git a/src/slides/History.svelte b/src/slides/History.svelte new file mode 100644 index 0000000..5c81cf2 --- /dev/null +++ b/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> diff --git a/src/slides/PackageGraph.svelte b/src/slides/PackageGraph.svelte index 90e9a90..a3ef81f 100644 --- a/src/slides/PackageGraph.svelte +++ b/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 diff --git a/src/slides/TheProblem.svelte b/src/slides/TheProblem.svelte new file mode 100644 index 0000000..b1b41e7 --- /dev/null +++ b/src/slides/TheProblem.svelte @@ -0,0 +1,3 @@ +<section> + <h3 style="text-align: left;">The Problem</h3> +</section> diff --git a/src/slides/WhatIsNix.svelte b/src/slides/WhatIsNix.svelte new file mode 100644 index 0000000..cdcdbb3 --- /dev/null +++ b/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>