Redesign site
This commit is contained in:
parent
81926a53f9
commit
42b2e55994
660
package-lock.json
generated
660
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -18,8 +18,6 @@
|
||||
"@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",
|
||||
@ -28,7 +26,6 @@
|
||||
"prettier-plugin-svelte": "^2.8.1",
|
||||
"sass": "^1.53.0",
|
||||
"svelte": "^3.54.0",
|
||||
"svelte-carousel": "^1.0.20",
|
||||
"svelte-check": "^2.9.2",
|
||||
"svelte-highlight": "^6.2.1",
|
||||
"svelte-loading-spinners": "^0.3.4",
|
||||
|
||||
@ -61,3 +61,8 @@ 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 />
|
||||
|
||||
82
static/install
Normal file
82
static/install
Normal file
@ -0,0 +1,82 @@
|
||||
#!/bin/bash
|
||||
|
||||
info() {
|
||||
echo $'\x1b[32m[INFO]\x1b[0m' $@
|
||||
}
|
||||
|
||||
warn() {
|
||||
echo $'\x1b[31m[WARN]\x1b[0m' $@
|
||||
}
|
||||
|
||||
error() {
|
||||
echo $'\x1b[31;1m[ERR]\x1b[0m' $@
|
||||
exit 1
|
||||
}
|
||||
|
||||
installPkg() {
|
||||
rootCmd=""
|
||||
if command -v doas &>/dev/null; then
|
||||
rootCmd="doas"
|
||||
elif command -v sudo &>/dev/null; then
|
||||
rootCmd="sudo"
|
||||
else
|
||||
warn "No privilege elevation command (e.g. sudo, doas) detected"
|
||||
fi
|
||||
|
||||
case $1 in
|
||||
pacman) $rootCmd pacman --noconfirm -U ${@:2} ;;
|
||||
apk) $rootCmd apk add --allow-untrusted ${@:2} ;;
|
||||
*) $rootCmd $1 install -y ${@:2} ;;
|
||||
esac
|
||||
}
|
||||
|
||||
if ! command -v curl &>/dev/null; then
|
||||
error "This script requires the curl command. Please install it and run again."
|
||||
fi
|
||||
|
||||
pkgFormat=""
|
||||
pkgMgr=""
|
||||
if command -v pacman &>/dev/null; then
|
||||
info "Detected pacman"
|
||||
pkgFormat="pkg.tar.zst"
|
||||
pkgMgr="pacman"
|
||||
elif command -v apt &>/dev/null; then
|
||||
info "Detected apt"
|
||||
pkgFormat="deb"
|
||||
pkgMgr="apt"
|
||||
elif command -v dnf &>/dev/null; then
|
||||
info "Detected dnf"
|
||||
pkgFormat="rpm"
|
||||
pkgMgr="dnf"
|
||||
elif command -v yum &>/dev/null; then
|
||||
info "Detected yum"
|
||||
pkgFormat="rpm"
|
||||
pkgMgr="yum"
|
||||
elif command -v zypper &>/dev/null; then
|
||||
info "Detected zypper"
|
||||
pkgFormat="rpm"
|
||||
pkgMgr="zypper"
|
||||
elif command -v apk &>/dev/null; then
|
||||
info "Detected apk"
|
||||
pkgFormat="apk"
|
||||
pkgMgr="apk"
|
||||
else
|
||||
error "No supported package manager detected!"
|
||||
fi
|
||||
|
||||
latestVersion=$(curl -sI 'https://gitea.elara.ws/Elara6331/lure/releases/latest' | grep -io 'location: .*' | rev | cut -d '/' -f1 | rev | tr -d '[:space:]')
|
||||
info "Found latest LURE version:" $latestVersion
|
||||
|
||||
fname="$(mktemp -u -p /tmp "lure.XXXXXXXXXX").${pkgFormat}"
|
||||
url="https://gitea.elara.ws/Elara6331/lure/releases/download/${latestVersion}/linux-user-repository-${latestVersion#v}-linux-$(uname -m).${pkgFormat}"
|
||||
|
||||
info "Downloading LURE package"
|
||||
curl -L $url -o $fname
|
||||
|
||||
info "Installing LURE package"
|
||||
installPkg $pkgMgr $fname
|
||||
|
||||
info "Cleaning up"
|
||||
rm $fname
|
||||
|
||||
info "Done!"
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue
Block a user