lure/lure-web-old
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Switch to video player instead of GIF

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app.html
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>

14
src/app.scss
View File

@@ -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;
}

29
src/routes/+page.svelte
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>