Redesign site

package.json

@@ -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",

src/app.scss

@@ -60,4 +60,9 @@ body {
 
 #page-container > * {
     width: 100%
+}
+
+.hljs {
+    background: $grey-darker !important;
+    border-radius: 15px;
 }

src/darkly/variables.scss

@@ -3,22 +3,22 @@
 ////////////////////////////////////////////////
 
 // Variables
-$grey-lighter: #dbdee0;
+$grey-lighter: #9c9fa2;
-$grey-light: #8c9b9d;
+$grey-light: #7e8185;
-$grey: darken($grey-light, 18);
+$grey: darken($grey-light, 16);
-$grey-dark: darken($grey, 18);
+$grey-dark: darken($grey, 16);
 $grey-darker: darken($grey, 23);
 
-$white: #FFF;
+$white: #dddedf;
-$orange: #e67e22;
+$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;
+$title-color: $white;
-$subtitle-color: $grey-light;
+$subtitle-color: $grey-lighter;
 $subtitle-strong-color: $grey-light;
 
-$text: #fff;
+$text: $white;
 $text-light: lighten($text, 10);
 $text-strong: darken($text, 5);
 

src/routes/+page.svelte

@@ -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';
+	import arta from 'svelte-highlight/styles/arta';
-
-	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'
-		}
-	];
 </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">
+<section class="container content">
-	<p class="title">LURE</p>
+	<div class="has-text-centered">
-	<p class="subtitle">The user repo missing from most Linux distros</p>
+		<img src="/lure-no-text.svg" width="200" alt="LURE logo without text" />
-	<hr />
+		<p class="title">LURE</p>
-	<div class="columns">
+		<p class="subtitle">The community repository missing from your Linux distro</p>
-		<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>
 	</div>
-	<p class="title">Installation</p>
+	<hr />
-	<p>LURE can easily be installed by running its install script:</p>
+	<p class="title">What does LURE do?</p>
-	<Highlight language={bash} code="curl https://www.elara.ws/lure.sh | bash" />
+	<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 />

src/routes/pkg/[repo]/[name]/lure.sh/+page.svelte

@@ -1,46 +1,46 @@
 <script>
-    import { page } from '$app/stores';
+	import { page } from '$app/stores';
-    import { client } from 'twirpscript';
+	import { client } from 'twirpscript';
-    import { GetBuildScript } from '$lib/lure.pb';
+	import { GetBuildScript } from '$lib/lure.pb';
-    import { LURE_WEB_API_URL } from '$env/static/public';
+	import { LURE_WEB_API_URL } from '$env/static/public';
-    import { DoubleBounce } from 'svelte-loading-spinners';
+	import { DoubleBounce } from 'svelte-loading-spinners';
 
-    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 atom from 'svelte-highlight/styles/bright';
 
-    import Header from "../../../../header.svelte";
+	import Header from '../../../../header.svelte';
-    import Footer from "../../../../footer.svelte";
+	import Footer from '../../../../footer.svelte';
 
-    import Icon from '@iconify/svelte';
+	import Icon from '@iconify/svelte';
 
-    client.baseURL = LURE_WEB_API_URL
+	client.baseURL = LURE_WEB_API_URL;
-    client.prefix = ""
+	client.prefix = '';
 </script>
 
 <svelte:head>
-    <title>{$page.params.name} Build Script | LURE Web</title>
+	<title>{$page.params.name} Build Script | LURE Web</title>
-    <meta name="description" content="The build script for the {$page.params.name} LURE package.">
+	<meta name="description" content="The build script for the {$page.params.name} LURE package." />
-    {@html agate}
+	{@html atom}
 </svelte:head>
 
-<Header/>
+<Header />
 
 <section class="container">
-    <a href="."><Icon icon="material-symbols:arrow-back-rounded" inline=true/> Back</a>
+	<a href="."><Icon icon="material-symbols:arrow-back-rounded" inline="true" /> Back</a>
-    {#await GetBuildScript({name: $page.params.name, repository: $page.params.repo})}
+	{#await GetBuildScript({ name: $page.params.name, repository: $page.params.repo })}
-        <center><DoubleBounce color="#375a7f" /></center>
+		<center><DoubleBounce color="#375a7f" /></center>
-    {:then resp} 
+	{:then resp}
-        <p class="title">Build Script</p>
+		<p class="title">Build Script</p>
-        <p class="subtitle">{$page.params.repo} / {$page.params.name}</p>
+		<p class="subtitle">{$page.params.repo} / {$page.params.name}</p>
-        <div class="box">
+		<div class="box">
-            <Highlight language={bash} code={resp.script}/>
+			<Highlight language={bash} code={resp.script} />
-        </div>
+		</div>
-    {:catch err}
+	{:catch err}
-        <div class="notification is-danger my-3">
+		<div class="notification is-danger my-3">
-            Error: {err.msg}
+			Error: {err.msg}
-        </div>
+		</div>
-    {/await}
+	{/await}
 </section>
 
-<Footer/>
+<Footer />

static/install

@@ -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!"