diff --git a/package-lock.json b/package-lock.json
index 830c718..32790a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,8 @@
"@sveltejs/kit": "^1.0.0",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
+ "@vime/core": "^5.4.0",
+ "@vime/svelte": "^5.4.0",
"bulma": "^0.9.4",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
@@ -663,6 +665,19 @@
}
}
},
+ "node_modules/@stencil/core": {
+ "version": "2.5.2",
+ "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.5.2.tgz",
+ "integrity": "sha512-bgjPXkSzzg1WnTgVUm6m5ZzpKt602WmA/QljODAW1xVN40OHJdbGblzF/F6MFzqv2c5Cy30CB41arc8qADIdcQ==",
+ "dev": true,
+ "bin": {
+ "stencil": "bin/stencil"
+ },
+ "engines": {
+ "node": ">=12.10.0",
+ "npm": ">=6.0.0"
+ }
+ },
"node_modules/@sveltejs/adapter-auto": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0.tgz",
@@ -755,6 +770,12 @@
"integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
"dev": true
},
+ "node_modules/@types/fscreen": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/@types/fscreen/-/fscreen-1.0.1.tgz",
+ "integrity": "sha512-hV2d0BreihMGtrg+EdAFOIl/O2EL5vhAheHJUztGE/lPFZIN8ZCpGFL8hCbtyi1CfhKjDRCf47sHjP+FwJ4q0Q==",
+ "dev": true
+ },
"node_modules/@types/json-schema": {
"version": "7.0.11",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -981,6 +1002,30 @@
"url": "https://opencollective.com/typescript-eslint"
}
},
+ "node_modules/@vime/core": {
+ "version": "5.4.0",
+ "resolved": "https://registry.npmjs.org/@vime/core/-/core-5.4.0.tgz",
+ "integrity": "sha512-ZP19/+9RDeX8q0dPGW1Au77/c7hqb8Lsd/4zV0pAsld+op/cYVMoByu5wd6luQ0R6AKwe/mYdNTDatAHZlhHZw==",
+ "dev": true,
+ "dependencies": {
+ "@stencil/core": "2.5.2",
+ "@types/fscreen": "^1.0.1",
+ "fscreen": "^1.2.0",
+ "mitt": "^3.0.0",
+ "stencil-wormhole": "^3.4.1"
+ }
+ },
+ "node_modules/@vime/svelte": {
+ "version": "5.4.0",
+ "resolved": "https://registry.npmjs.org/@vime/svelte/-/svelte-5.4.0.tgz",
+ "integrity": "sha512-H12FCt6NDYlNZYFz6gRvJ0d4aI48hIKcqnIMegmvpUh4hS/iddQhEWi6KaW+QxOSqyPcq8JHmQiOfjWX7hLu6Q==",
+ "dev": true,
+ "hasInstallScript": true,
+ "peerDependencies": {
+ "@vime/core": "5.4.0",
+ "svelte": "^3.0.0"
+ }
+ },
"node_modules/acorn": {
"version": "8.8.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
@@ -1747,6 +1792,12 @@
"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
"dev": true
},
+ "node_modules/fscreen": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/fscreen/-/fscreen-1.2.0.tgz",
+ "integrity": "sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg==",
+ "dev": true
+ },
"node_modules/fsevents": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -2241,6 +2292,12 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/mitt": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
+ "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==",
+ "dev": true
+ },
"node_modules/mkdirp": {
"version": "0.5.6",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -2810,6 +2867,12 @@
"deprecated": "Please use @jridgewell/sourcemap-codec instead",
"dev": true
},
+ "node_modules/stencil-wormhole": {
+ "version": "3.4.1",
+ "resolved": "https://registry.npmjs.org/stencil-wormhole/-/stencil-wormhole-3.4.1.tgz",
+ "integrity": "sha512-ppYTcWTJnIl4ZAKwF39LTA9f/ypHfbVefsHdN2hpMQGrR57wt1TieZo9tlCM/r1Y4SFiZ5yz/cjho564C921Xw==",
+ "dev": true
+ },
"node_modules/streamsearch": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
@@ -3611,6 +3674,12 @@
"picomatch": "^2.3.1"
}
},
+ "@stencil/core": {
+ "version": "2.5.2",
+ "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.5.2.tgz",
+ "integrity": "sha512-bgjPXkSzzg1WnTgVUm6m5ZzpKt602WmA/QljODAW1xVN40OHJdbGblzF/F6MFzqv2c5Cy30CB41arc8qADIdcQ==",
+ "dev": true
+ },
"@sveltejs/adapter-auto": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0.tgz",
@@ -3679,6 +3748,12 @@
"integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
"dev": true
},
+ "@types/fscreen": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/@types/fscreen/-/fscreen-1.0.1.tgz",
+ "integrity": "sha512-hV2d0BreihMGtrg+EdAFOIl/O2EL5vhAheHJUztGE/lPFZIN8ZCpGFL8hCbtyi1CfhKjDRCf47sHjP+FwJ4q0Q==",
+ "dev": true
+ },
"@types/json-schema": {
"version": "7.0.11",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -3816,6 +3891,26 @@
"eslint-visitor-keys": "^3.3.0"
}
},
+ "@vime/core": {
+ "version": "5.4.0",
+ "resolved": "https://registry.npmjs.org/@vime/core/-/core-5.4.0.tgz",
+ "integrity": "sha512-ZP19/+9RDeX8q0dPGW1Au77/c7hqb8Lsd/4zV0pAsld+op/cYVMoByu5wd6luQ0R6AKwe/mYdNTDatAHZlhHZw==",
+ "dev": true,
+ "requires": {
+ "@stencil/core": "2.5.2",
+ "@types/fscreen": "^1.0.1",
+ "fscreen": "^1.2.0",
+ "mitt": "^3.0.0",
+ "stencil-wormhole": "^3.4.1"
+ }
+ },
+ "@vime/svelte": {
+ "version": "5.4.0",
+ "resolved": "https://registry.npmjs.org/@vime/svelte/-/svelte-5.4.0.tgz",
+ "integrity": "sha512-H12FCt6NDYlNZYFz6gRvJ0d4aI48hIKcqnIMegmvpUh4hS/iddQhEWi6KaW+QxOSqyPcq8JHmQiOfjWX7hLu6Q==",
+ "dev": true,
+ "requires": {}
+ },
"acorn": {
"version": "8.8.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
@@ -4398,6 +4493,12 @@
"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
"dev": true
},
+ "fscreen": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/fscreen/-/fscreen-1.2.0.tgz",
+ "integrity": "sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg==",
+ "dev": true
+ },
"fsevents": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -4769,6 +4870,12 @@
"integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
"dev": true
},
+ "mitt": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
+ "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==",
+ "dev": true
+ },
"mkdirp": {
"version": "0.5.6",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -5151,6 +5258,12 @@
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
"dev": true
},
+ "stencil-wormhole": {
+ "version": "3.4.1",
+ "resolved": "https://registry.npmjs.org/stencil-wormhole/-/stencil-wormhole-3.4.1.tgz",
+ "integrity": "sha512-ppYTcWTJnIl4ZAKwF39LTA9f/ypHfbVefsHdN2hpMQGrR57wt1TieZo9tlCM/r1Y4SFiZ5yz/cjho564C921Xw==",
+ "dev": true
+ },
"streamsearch": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
diff --git a/package.json b/package.json
index ad3b236..206870d 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,8 @@
"@sveltejs/kit": "^1.0.0",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
+ "@vime/core": "^5.4.0",
+ "@vime/svelte": "^5.4.0",
"bulma": "^0.9.4",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
diff --git a/src/app.html b/src/app.html
index effe0d0..edba87e 100644
--- a/src/app.html
+++ b/src/app.html
@@ -3,6 +3,7 @@
+
%sveltekit.head%
diff --git a/src/app.scss b/src/app.scss
index c2ba92b..221088c 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -32,4 +32,18 @@
pre {
background-color: transparent;
+}
+
+.terminal-player {
+ max-width: 735px;
+ max-height: 450px;
+}
+
+.sc-carousel__carousel-container {
+ --sc-arrow-size: 3px;
+}
+
+button.sc-carousel-arrow__circle {
+ width: 30px !important;
+ height: 30px !important;
}
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e282dd0..987e0b8 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,6 +7,8 @@
import bash from 'svelte-highlight/languages/bash';
import agate from 'svelte-highlight/styles/agate';
+ import {Player, Video, DefaultUi} from '@vime/svelte';
+
let Carousel;
onMount(async () => {
// Perform dynamic import of svelte-carousel because it breaks
@@ -16,24 +18,20 @@
let images = [
{
- path: "/lure-arch.gif",
+ path: "/lure-arch.webm",
caption: "Recorded on Arch Linux with LURE commit 81013ce",
- alt: "GIF depicting an Arch Linux terminal with LURE installing a package"
},
{
- path: "/lure-debian.gif",
+ path: "/lure-debian.webm",
caption: "Recorded on Debian Sid with LURE commit 81013ce",
- alt: "GIF depicting a Debian terminal with LURE installing a package"
},
{
- path: "/lure-fedora.gif",
+ path: "/lure-fedora.webm",
caption: "Recorded on Fedora 36 with LURE commit 81013ce",
- alt: "GIF depicting a Fedora terminal with LURE installing a package"
},
{
- path: "/lure-alpine.gif",
+ path: "/lure-alpine.webm",
caption: "Recorded on Alpine Linux 3.16 with commit 81013ce",
- alt: "GIF depicting an Alpine Linux terminal with LURE installing a package"
},
];
@@ -93,10 +91,17 @@
{#each images as image}
-
- 
- {image.caption ?? ""}
-
+
+
+
+
+
+
+ {image.caption ?? ""}
+
+