Update videos
This commit is contained in:
parent
fffc7a0b40
commit
cb38468ddd
@ -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.
Loading…
Reference in New Issue
Block a user