Switch to video player instead of GIF
This commit is contained in:
parent
5a90de4ef5
commit
aac1fbfd1d
113
package-lock.json
generated
113
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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>
|
||||
|
||||
14
src/app.scss
14
src/app.scss
@ -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;
|
||||
}
|
||||
@ -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"}>
|
||||
<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
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
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
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
BIN
static/lure-fedora.webm
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user