Update videos
ci/woodpecker/push/woodpecker Pipeline was successful Details

This commit is contained in:
Elara 2023-05-04 18:04:31 -07:00
parent fffc7a0b40
commit cb38468ddd
5 changed files with 98 additions and 95 deletions

View File

@ -1,110 +1,113 @@
<script> <script>
import { onMount } from "svelte"; import { onMount } from 'svelte';
import Header from "./header.svelte"; import Header from './header.svelte';
import Footer from "./footer.svelte"; import Footer from './footer.svelte';
import Highlight from 'svelte-highlight'; import Highlight from 'svelte-highlight';
import bash from 'svelte-highlight/languages/bash'; import bash from 'svelte-highlight/languages/bash';
import agate from 'svelte-highlight/styles/agate'; import agate from 'svelte-highlight/styles/agate';
let Carousel, Player, Video, DefaultUi; let Carousel, Player, Video, DefaultUi;
onMount(async () => { onMount(async () => {
// Perform dynamic import of svelte-carousel because it breaks // Perform dynamic import of svelte-carousel because it breaks
// if imported during SSR // if imported during SSR
Carousel = (await import('svelte-carousel')).default; Carousel = (await import('svelte-carousel')).default;
({Player, Video, DefaultUi} = await import('@vime/svelte')); ({ Player, Video, DefaultUi } = await import('@vime/svelte'));
}) });
let images = [ let images = [
{ {
path: "/lure-arch.webm", path: '/lure-arch.webm',
caption: "Recorded on Arch Linux with LURE commit 81013ce", caption: 'Recorded on Arch Linux with LURE commit f8af758'
}, },
{ {
path: "/lure-debian.webm", path: '/lure-debian.webm',
caption: "Recorded on Debian Sid with LURE commit 81013ce", caption: 'Recorded on Debian 11 with LURE commit f8af758'
}, },
{ {
path: "/lure-fedora.webm", path: '/lure-fedora.webm',
caption: "Recorded on Fedora 36 with LURE commit 81013ce", caption: 'Recorded on Fedora 37 with LURE commit f8af758'
}, },
{ {
path: "/lure-alpine.webm", path: '/lure-alpine.webm',
caption: "Recorded on Alpine Linux 3.16 with commit 81013ce", caption: 'Recorded on Alpine Linux 3.17 with commit f8af758'
}, }
]; ];
</script> </script>
<svelte:head> <svelte:head>
<title>Home | LURE Web</title> <title>Home | LURE Web</title>
<meta name="description" content="LURE Web home page"> <meta name="description" content="LURE Web home page" />
{@html agate} {@html agate}
</svelte:head> </svelte:head>
<Header/> <Header />
<section class="container"> <section class="container">
<p class="title">LURE</p> <p class="title">LURE</p>
<p class="subtitle">The user repo missing from most Linux distros</p> <p class="subtitle">The user repo missing from most Linux distros</p>
<hr> <hr />
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<p class="card-header-title">Why should I use it?</p> <p class="card-header-title">Why should I use it?</p>
</div> </div>
<div class="card-content"> <div class="card-content">
LURE allows users to install software that may not be widely distributed LURE allows users to install software that may not be widely distributed through official
through official repositories, while still maintaining the convenience repositories, while still maintaining the convenience of installation through repository
of installation through repository sources. This includes features such sources. This includes features such as updates and simple uninstallation. Additionally,
as updates and simple uninstallation. Additionally, LURE provides developers LURE provides developers with a central location for all their users to use to install
with a central location for all their users to use to install their software. their software.
</div> </div>
</div> </div>
</div> </div>
<div class="column"> <div class="column">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<p class="card-header-title">How does it work?</p> <p class="card-header-title">How does it work?</p>
</div> </div>
<div class="card-content"> <div class="card-content">
LURE operates by abstracting package formats and package managers, enabling LURE operates by abstracting package formats and package managers, enabling the creation
the creation and installation of native packages automatically built from and installation of native packages automatically built from PKGBUILD-like bash scripts,
PKGBUILD-like bash scripts, using the package manager already present on the system. using the package manager already present on the system. As a result, packages installed
As a result, packages installed through LURE can be managed like any other package, through LURE can be managed like any other package, without the need for additional
without the need for additional intervention from LURE for most operations. intervention from LURE for most operations.
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<p class="title">Installation</p> <p class="title">Installation</p>
<p>LURE can easily be installed by running its install script:</p> <p>LURE can easily be installed by running its install script:</p>
<Highlight language={bash} code='curl https://www.elara.ws/lure.sh | bash'/> <Highlight language={bash} code="curl https://www.elara.ws/lure.sh | bash" />
<p> <p>
It's also available on the AUR as <a href="https://aur.archlinux.org/packages/linux-user-repository-bin"><code>linux-user-repository-bin</code></a> and distro It's also available on the AUR as <a
packages are provided at the <a href="https://gitea.elara.ws/Elara6331/lure/releases/latest">latest Gitea release</a>. href="https://aur.archlinux.org/packages/linux-user-repository-bin"
</p> ><code>linux-user-repository-bin</code></a
<br> >
<p class="title">Examples</p> and distro packages are provided at the
<a href="https://gitea.elara.ws/Elara6331/lure/releases/latest">latest Gitea release</a>.
<!-- Use dynamically imported Carousel module --> </p>
<svelte:component this={Carousel}> <br />
{#each images as image} <p class="title">Examples</p>
<div class="has-text-centered">
<figure class="terminal-player mx-auto">
<svelte:component this={Player}>
<svelte:component this={Video}>
<source data-src="{image.path}" type="video/webm">
</svelte:component>
<svelte:component this={DefaultUi}></svelte:component>
</svelte:component>
<figcaption>{image.caption ?? ""}</figcaption>
</figure>
</div>
{/each}
</svelte:component>
<!-- Use dynamically imported Carousel module -->
<svelte:component this={Carousel}>
{#each images as image}
<div class="has-text-centered">
<figure class="terminal-player mx-auto">
<svelte:component this={Player}>
<svelte:component this={Video}>
<source data-src={image.path} type="video/webm" />
</svelte:component>
<svelte:component this={DefaultUi} />
</svelte:component>
<figcaption>{image.caption ?? ''}</figcaption>
</figure>
</div>
{/each}
</svelte:component>
</section> </section>
<Footer/> <Footer />

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.