Redesign site
This commit is contained in:
@@ -60,4 +60,9 @@ body {
|
||||
|
||||
#page-container > * {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.hljs {
|
||||
background: $grey-darker !important;
|
||||
border-radius: 15px;
|
||||
}
|
||||
@@ -3,22 +3,22 @@
|
||||
////////////////////////////////////////////////
|
||||
|
||||
// Variables
|
||||
$grey-lighter: #dbdee0;
|
||||
$grey-light: #8c9b9d;
|
||||
$grey: darken($grey-light, 18);
|
||||
$grey-dark: darken($grey, 18);
|
||||
$grey-lighter: #9c9fa2;
|
||||
$grey-light: #7e8185;
|
||||
$grey: darken($grey-light, 16);
|
||||
$grey-dark: darken($grey, 16);
|
||||
$grey-darker: darken($grey, 23);
|
||||
|
||||
$white: #FFF;
|
||||
$orange: #e67e22;
|
||||
$white: #dddedf;
|
||||
$orange: #DF691A;
|
||||
$yellow: #f1b70e;
|
||||
$green: #2ecc71;
|
||||
$turquoise: #1abc9c;
|
||||
$turquoise: #00FDBA;
|
||||
$blue: #3498db;
|
||||
$purple: #8e44ad;
|
||||
$red: #e74c3c;
|
||||
$white-ter: #ecf0f1;
|
||||
$primary: #375a7f !default;
|
||||
$primary: #0060a8 !default;
|
||||
$yellow-invert: #fff;
|
||||
|
||||
$family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
@@ -32,7 +32,7 @@ $size-6: 15px;
|
||||
$size-7: 0.85em;
|
||||
$title-weight: 500;
|
||||
$subtitle-weight: 400;
|
||||
$subtitle-color: $grey-dark;
|
||||
$subtitle-color: $grey-lighter;
|
||||
|
||||
$border-width: 2px;
|
||||
$border: $grey;
|
||||
@@ -45,11 +45,11 @@ $footer-background-color: $background;
|
||||
$button-background-color: $background;
|
||||
$button-border-color: lighten($button-background-color, 15);
|
||||
|
||||
$title-color: #fff;
|
||||
$subtitle-color: $grey-light;
|
||||
$title-color: $white;
|
||||
$subtitle-color: $grey-lighter;
|
||||
$subtitle-strong-color: $grey-light;
|
||||
|
||||
$text: #fff;
|
||||
$text: $white;
|
||||
$text-light: lighten($text, 10);
|
||||
$text-strong: darken($text, 5);
|
||||
|
||||
|
||||
@@ -1,113 +1,50 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
import Header from './header.svelte';
|
||||
import Footer from './footer.svelte';
|
||||
|
||||
import Highlight from 'svelte-highlight';
|
||||
import bash from 'svelte-highlight/languages/bash';
|
||||
import agate from 'svelte-highlight/styles/agate';
|
||||
|
||||
let Carousel, Player, Video, DefaultUi;
|
||||
onMount(async () => {
|
||||
// Perform dynamic import of svelte-carousel because it breaks
|
||||
// if imported during SSR
|
||||
Carousel = (await import('svelte-carousel')).default;
|
||||
({ Player, Video, DefaultUi } = await import('@vime/svelte'));
|
||||
});
|
||||
|
||||
let images = [
|
||||
{
|
||||
path: '/lure-arch.webm',
|
||||
caption: 'Recorded on Arch Linux with LURE commit f8af758'
|
||||
},
|
||||
{
|
||||
path: '/lure-debian.webm',
|
||||
caption: 'Recorded on Debian 11 with LURE commit f8af758'
|
||||
},
|
||||
{
|
||||
path: '/lure-fedora.webm',
|
||||
caption: 'Recorded on Fedora 37 with LURE commit f8af758'
|
||||
},
|
||||
{
|
||||
path: '/lure-alpine.webm',
|
||||
caption: 'Recorded on Alpine Linux 3.17 with commit f8af758'
|
||||
}
|
||||
];
|
||||
import arta from 'svelte-highlight/styles/arta';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Home | LURE Web</title>
|
||||
<meta name="description" content="LURE Web home page" />
|
||||
{@html agate}
|
||||
{@html arta}
|
||||
</svelte:head>
|
||||
|
||||
<Header />
|
||||
|
||||
<section class="container">
|
||||
<p class="title">LURE</p>
|
||||
<p class="subtitle">The user repo missing from most Linux distros</p>
|
||||
<hr />
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<p class="card-header-title">Why should I use it?</p>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
LURE allows users to install software that may not be widely distributed through official
|
||||
repositories, while still maintaining the convenience of installation through repository
|
||||
sources. This includes features such as updates and simple uninstallation. Additionally,
|
||||
LURE provides developers with a central location for all their users to use to install
|
||||
their software.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<p class="card-header-title">How does it work?</p>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
LURE operates by abstracting package formats and package managers, enabling the creation
|
||||
and installation of native packages automatically built from PKGBUILD-like bash scripts,
|
||||
using the package manager already present on the system. As a result, packages installed
|
||||
through LURE can be managed like any other package, without the need for additional
|
||||
intervention from LURE for most operations.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="container content">
|
||||
<div class="has-text-centered">
|
||||
<img src="/lure-no-text.svg" width="200" alt="LURE logo without text" />
|
||||
<p class="title">LURE</p>
|
||||
<p class="subtitle">The community repository missing from your Linux distro</p>
|
||||
</div>
|
||||
<p class="title">Installation</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" />
|
||||
<hr />
|
||||
<p class="title">What does LURE do?</p>
|
||||
<p class="subtitle">LURE allows you to:</p>
|
||||
<ul>
|
||||
<li>Access a wide range of software beyond what's available in official repositories</li>
|
||||
<li>Get new versions of software as they come out, before official repositories ship them</li>
|
||||
<li>Install unofficial software without having to deal with a separate package manager</li>
|
||||
<li>Release software for Linux without having to package it for different distributions</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<p class="title">Install LURE</p>
|
||||
<p class="subtitle">
|
||||
Paste this into your Linux terminal and the install script will set everything up for you
|
||||
</p>
|
||||
<Highlight language={bash} code="curl -fsSL lure.elara.ws/install | bash" />
|
||||
<p>
|
||||
It's also available on the AUR as <a
|
||||
LURE is also available on the AUR as <a
|
||||
href="https://aur.archlinux.org/packages/linux-user-repository-bin"
|
||||
><code>linux-user-repository-bin</code></a
|
||||
>
|
||||
<code>linux-user-repository-bin</code>
|
||||
</a>
|
||||
and distro packages are provided at the
|
||||
<a href="https://gitea.elara.ws/Elara6331/lure/releases/latest">latest Gitea release</a>.
|
||||
</p>
|
||||
<br />
|
||||
<p class="title">Examples</p>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<Footer />
|
||||
|
||||
@@ -1,46 +1,46 @@
|
||||
<script>
|
||||
import { page } from '$app/stores';
|
||||
import { client } from 'twirpscript';
|
||||
import { GetBuildScript } from '$lib/lure.pb';
|
||||
import { LURE_WEB_API_URL } from '$env/static/public';
|
||||
import { DoubleBounce } from 'svelte-loading-spinners';
|
||||
import { page } from '$app/stores';
|
||||
import { client } from 'twirpscript';
|
||||
import { GetBuildScript } from '$lib/lure.pb';
|
||||
import { LURE_WEB_API_URL } from '$env/static/public';
|
||||
import { DoubleBounce } from 'svelte-loading-spinners';
|
||||
|
||||
import Highlight from 'svelte-highlight';
|
||||
import bash from 'svelte-highlight/languages/bash';
|
||||
import agate from 'svelte-highlight/styles/agate';
|
||||
import Highlight from 'svelte-highlight';
|
||||
import bash from 'svelte-highlight/languages/bash';
|
||||
import atom from 'svelte-highlight/styles/bright';
|
||||
|
||||
import Header from "../../../../header.svelte";
|
||||
import Footer from "../../../../footer.svelte";
|
||||
import Header from '../../../../header.svelte';
|
||||
import Footer from '../../../../footer.svelte';
|
||||
|
||||
import Icon from '@iconify/svelte';
|
||||
import Icon from '@iconify/svelte';
|
||||
|
||||
client.baseURL = LURE_WEB_API_URL
|
||||
client.prefix = ""
|
||||
client.baseURL = LURE_WEB_API_URL;
|
||||
client.prefix = '';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{$page.params.name} Build Script | LURE Web</title>
|
||||
<meta name="description" content="The build script for the {$page.params.name} LURE package.">
|
||||
{@html agate}
|
||||
<title>{$page.params.name} Build Script | LURE Web</title>
|
||||
<meta name="description" content="The build script for the {$page.params.name} LURE package." />
|
||||
{@html atom}
|
||||
</svelte:head>
|
||||
|
||||
<Header/>
|
||||
<Header />
|
||||
|
||||
<section class="container">
|
||||
<a href="."><Icon icon="material-symbols:arrow-back-rounded" inline=true/> Back</a>
|
||||
{#await GetBuildScript({name: $page.params.name, repository: $page.params.repo})}
|
||||
<center><DoubleBounce color="#375a7f" /></center>
|
||||
{:then resp}
|
||||
<p class="title">Build Script</p>
|
||||
<p class="subtitle">{$page.params.repo} / {$page.params.name}</p>
|
||||
<div class="box">
|
||||
<Highlight language={bash} code={resp.script}/>
|
||||
</div>
|
||||
{:catch err}
|
||||
<div class="notification is-danger my-3">
|
||||
Error: {err.msg}
|
||||
</div>
|
||||
{/await}
|
||||
<a href="."><Icon icon="material-symbols:arrow-back-rounded" inline="true" /> Back</a>
|
||||
{#await GetBuildScript({ name: $page.params.name, repository: $page.params.repo })}
|
||||
<center><DoubleBounce color="#375a7f" /></center>
|
||||
{:then resp}
|
||||
<p class="title">Build Script</p>
|
||||
<p class="subtitle">{$page.params.repo} / {$page.params.name}</p>
|
||||
<div class="box">
|
||||
<Highlight language={bash} code={resp.script} />
|
||||
</div>
|
||||
{:catch err}
|
||||
<div class="notification is-danger my-3">
|
||||
Error: {err.msg}
|
||||
</div>
|
||||
{/await}
|
||||
</section>
|
||||
|
||||
<Footer/>
|
||||
<Footer />
|
||||
|
||||
Reference in New Issue
Block a user