Switch to video player instead of GIF

This commit is contained in:
Elara 2022-12-21 13:26:39 -08:00
parent 5a90de4ef5
commit aac1fbfd1d
13 changed files with 147 additions and 12 deletions

113
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -3,6 +3,7 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vime/core@^5/themes/default.css" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>

View File

@ -33,3 +33,17 @@
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;
}

View File

@ -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"
},
];
</script>
@ -93,10 +91,17 @@
<!-- Use dynamically imported Carousel module -->
<svelte:component this={Carousel}>
{#each images as image}
<figure class="has-text-centered">
<img src={image.path} alt={image.alt ?? "GIF depicting LURE installing a package"}>
<figcaption>{image.caption ?? ""}</figcaption>
</figure>
<div class="has-text-centered">
<figure class="terminal-player mx-auto">
<Player>
<Video>
<source data-src="{image.path}" type="video/webm">
</Video>
<DefaultUi></DefaultUi>
</Player>
<figcaption>{image.caption ?? ""}</figcaption>
</figure>
</div>
{/each}
</svelte:component>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 MiB

BIN
static/lure-alpine.webm Normal file

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

BIN
static/lure-arch.webm Normal file

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 578 KiB

BIN
static/lure-debian.webm Normal file

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 MiB

BIN
static/lure-fedora.webm Normal file

Binary file not shown.