lure/lure-web
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: lure:81926a53f94b639d3faa9ffebea819ab65b2c109
Branches Tags
lure:master
lure:v0.0.3
lure:v0.0.2
lure:v0.0.1
...
compare: lure:6e00419e2f49d41f9788c2007753b91e62c92398
Branches Tags
lure:master
lure:v0.0.3
lure:v0.0.2
lure:v0.0.1

3 Commits
81926a53f9 ... 6e00419e2f

Author SHA1 Message Date
Elara Musayelyan
6e00419e2f Replace FAQ with About page
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details
2023-08-09 21:04:58 -07:00
Elara Musayelyan
48e228adad Redirect to gitea instead of using static install script 2023-08-09 19:49:57 -07:00
Elara Musayelyan
42b2e55994 Redesign site 2023-08-09 19:14:07 -07:00
14 changed files with 435 additions and 655 deletions
Show Stats Expand all files Collapse all files

660
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -18,8 +18,6 @@
"@sveltejs/kit": "^1.0.0", "@sveltejs/kit": "^1.0.0",
"@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0", "@typescript-eslint/parser": "^5.45.0",
"@vime/core": "^5.4.0",
"@vime/svelte": "^5.4.0",
"bulma": "^0.9.4", "bulma": "^0.9.4",
"eslint": "^8.28.0", "eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
@ -28,7 +26,6 @@
"prettier-plugin-svelte": "^2.8.1", "prettier-plugin-svelte": "^2.8.1",
"sass": "^1.53.0", "sass": "^1.53.0",
"svelte": "^3.54.0", "svelte": "^3.54.0",
"svelte-carousel": "^1.0.20",
"svelte-check": "^2.9.2", "svelte-check": "^2.9.2",
"svelte-highlight": "^6.2.1", "svelte-highlight": "^6.2.1",
"svelte-loading-spinners": "^0.3.4", "svelte-loading-spinners": "^0.3.4",

5
src/app.scss
View File

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

24
src/darkly/variables.scss
View File

@ -3,22 +3,22 @@
//////////////////////////////////////////////// ////////////////////////////////////////////////
// Variables // 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); $grey-darker: darken($grey, 23);
$white: #FFF; $white: #dddedf;
$orange: #e67e22; $orange: #DF691A;
$yellow: #f1b70e; $yellow: #f1b70e;
$green: #2ecc71; $green: #2ecc71;
$turquoise: #1abc9c; $turquoise: #00FDBA;
$blue: #3498db; $blue: #3498db;
$purple: #8e44ad; $purple: #8e44ad;
$red: #e74c3c; $red: #e74c3c;
$white-ter: #ecf0f1; $white-ter: #ecf0f1;
$primary: #375a7f !default; $primary: #0060a8 !default;
$yellow-invert: #fff; $yellow-invert: #fff;
$family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", $family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
@ -32,7 +32,7 @@ $size-6: 15px;
$size-7: 0.85em; $size-7: 0.85em;
$title-weight: 500; $title-weight: 500;
$subtitle-weight: 400; $subtitle-weight: 400;
$subtitle-color: $grey-dark; $subtitle-color: $grey-lighter;
$border-width: 2px; $border-width: 2px;
$border: $grey; $border: $grey;
@ -45,11 +45,11 @@ $footer-background-color: $background;
$button-background-color: $background; $button-background-color: $background;
$button-border-color: lighten($button-background-color, 15); $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; $subtitle-strong-color: $grey-light;
$text: #fff; $text: $white;
$text-light: lighten($text, 10); $text-light: lighten($text, 10);
$text-strong: darken($text, 5); $text-strong: darken($text, 5);

113
src/routes/+page.svelte
View File

@ -1,113 +1,50 @@
<script> <script>
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 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> </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 arta}
</svelte:head> </svelte:head>
<Header /> <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> </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> <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" 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 and distro packages are provided at the
<a href="https://gitea.elara.ws/Elara6331/lure/releases/latest">latest Gitea release</a>. <a href="https://gitea.elara.ws/Elara6331/lure/releases/latest">latest Gitea release</a>.
</p> </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> </section>
<Footer /> <Footer />

79
src/routes/about/+page.svelte Normal file
View File

@ -0,0 +1,79 @@
<script>
import Header from '../header.svelte';
import Footer from '../footer.svelte';
</script>
<svelte:head>
<title>About | LURE Web</title>
<meta name="description" content="I" />
</svelte:head>
<Header />
<section class="container content">
<p class="title">About</p>
<hr />
<p class="subtitle">Why does LURE exist?</p>
<p>
LURE was created because packaging software for multiple Linux distros can be difficult and
error-prone, and installing those packages can be a nightmare for users unless they're available
in their distro's official repositories.
</p>
<p>
Take Discord for example. It only provides a deb file and a tar.gz file, and it's not available
in most official repositories. That means users of RPM distros have to manually install discord
using the tarball or rely on community-maintained repoositories that don't always have
up-to-date versions of Discord. That's also made worse by the fact that Discord refuses to run
if there's a newer version available.
</p>
<p>
LURE fixes that by always providing the most up to date version of Discord. That means all that
RPM users have to do is run <code>lure in discord</code> and LURE will get the tarball and
automatically build an RPM package out of it. Then if there's a newer version of Discord
available, users can just run <code>lure up</code> and LURE will automatically download the updated
version of Discord and install it. This also helps users of deb distros because it means they don't
have to manually download packages for software like Discord.
</p>
<hr />
<p class="subtitle">How does LURE work?</p>
<p>
Similar to Arch Linux's AUR, LURE has a repository of shell scripts that tell it how to build a
package. When you run a LURE command, it updates its repository and interprets the shell script
for the package you want to install using its built-in bash implementation. Then, it uses the
code inside the script to build a file structure to be included in the final package. It detects
which distro you're running, resolves dependencies, detects which package manager you have and
which package format it uses, builds metadata for the package from the information in the shell
script, builds the final package, and then runs the install command for your package manager to
install it.
</p>
<hr />
<p class="subtitle">How does LURE keep its packages up to date?</p>
<p>
LURE can automatically update its packages using a bot called
<a href="https://gitea.elara.ws/Elara6331/lure-updater">lure-updater</a>. It accepts plugins
that detect when software is updated upstream and update the LURE package accordingly. The
plugins that are currently running in my instance of the bot can be found in my
<a href="https://gitea.elara.ws/Elara6331/updater-plugins">updater-plugins</a> repo. The
<code>discord-bin</code> package, for example, checks Discord's API every hour to see if they've
released an updated version, and if they have, it pushes an update to LURE's repo.
</p>
<hr />
<p class="subtitle">How do I add my own package to LURE?</p>
<p>
LURE provides
<a href="https://github.com/Elara6331/lure/blob/master/docs/packages">
comprehensive documentation
</a> for packagers. If you need help with anything, feel free to ask on LURE's subreddit, which you
can find in the footer of this site. If you find a bug or a missing feature, please open an issue
on LURE's git repo.
</p>
<hr />
<p class="subtitle">Can I use and modify LURE's icons?</p>
<p>
LURE's icons are available on the <a href="/icons">icons page</a> of this site. They're licensed
under CC-BY-NC-SA 4.0, which means you're free to share, modify, and use the icons for non-commercial
purposes as long as you give appropriate credit and indicate any changes made to the original icons.
</p>
</section>
<Footer />

81
src/routes/faq/+page.svelte
View File

@ -1,81 +0,0 @@
<script>
import Header from "../header.svelte";
import Footer from "../footer.svelte";
</script>
<svelte:head>
<title>FAQ | LURE Web</title>
<meta name="description" content="Frequently Asked Questions">
</svelte:head>
<Header/>
<div class="container">
<p class="title">FAQ</p>
<br>
<p class="subtitle" id='distro-support'>Why isn't my distro supported?</p>
<p>
To support a distribution, LURE must be able to communicate with its package manager and create packages for it.
Communicating with the package manager is relatively straightforward, as LURE simply needs to be provided with the necessary
commands. However, the package formats are more complex. LURE uses <a href="https://github.com/goreleaser/nfpm">nFPM</a> to
handle package formats, and nFPM currently supports only deb, rpm, apk, and archlinux package formats. When developing LURE,
support for archlinux packages was not available in nFPM, so I added it through a pull request. Despite the simplicity of the
archlinux package format, implementing support required over 1,000 lines of code. As a result, supporting a distribution with
a different package format, such as xbps for Void Linux, is very complex and time-consuming.
</p>
<hr>
<p class="subtitle" id='flatpak-snap-appimage'>Why use LURE instead of Flatpak, Snap, or AppImage?</p>
<p>
LURE is not intended to address the same issues as Flatpak, Snap, and AppImage. These are containerized package formats that enable
the creation of a single package that can be used on all distributions. This cross-platform package contains the program and everything
else necessary for it to run, and it relies on containers to achieve this compatibility. However, containers can sometimes cause programs
to start slowly, fail to adhere to system settings, or be unable to access certain parts of the system. If you need most programs to
function consistently or you are using an older distribution with outdated packages, containerized formats may be the best choice. In contrast,
LURE does not use containers. It builds the program from source and installs it automatically. It also does not have its own package format.
Instead, it uses the same format as the distribution it is running on, so LURE packages behave like the distribution's native packages.
This means that unlike Snap and Flatpak, LURE is not a package manager; it simply uses the distribution's package manager, allowing you to
manage the packages installed through LURE even when LURE is not installed.
</p>
<br>
<p>
However, LURE also has some drawbacks. Since it builds programs from source, certain packages, particularly git packages that
retrieve the latest code from git, may not work on older distributions or distributions like Debian that have outdated packages.
Please consider your specific needs and whether these downsides are acceptable before using LURE. Additionally, similar to the AUR,
all packages are user-submitted and not vetted, so while it is unlikely, they may contain malicious code. It is the responsibility
of the user to review the build script to ensure this is not the case. If you come across a malicious package, please report it by
opening an issue on the git repository containing it.
</p>
<hr>
<p class="subtitle" id="handling-dependencies">How does LURE handle dependencies across distros?</p>
<p>
LURE manages dependencies across distributions by offering distro overrides, in which package maintainers can specify different
variables and functions for each distribution. The most specific override is given precedence. After the overrides are resolved,
LURE compares the resulting list of dependencies with the packages installed on the system and filters out any that are already
installed. For the remaining dependencies, LURE checks its own repositories to see if each package is available there. If it is,
LURE installs it from its repositories. If the package is not found in any repository, LURE passes the dependency on to the package
manager, which handles dependency resolution and installation.
</p>
<hr>
<p class="subtitle" id="testing">How can one test a LURE package to ensure it works?</p>
<p>
Docker is recommended for testing LURE packages on different distros. It provides a clean image of any distribution, which is very
useful for testing as it can help catch issues that might not manifest themselves on your system. Eventually, an automated
docker-based testing tool is planned, but in the meantime, this will need to be done manually for each distribution you're planning
to support. To find package names for each distribution, you can use <a href="https://repology.org">repology.org</a> and
<a href="https://pkgs.org">pkgs.org</a>. These websites maintain comprehensive databases of package repositories for various distributions.
</p>
<hr>
<p class="subtitle" id="icons">Can I use and modify LURE's icons?</p>
<p>
LURE's icons are available on the <a href="/icons">icons page</a> of this website and are licensed under CC-BY-NC-SA 4.0. This means that
you are free to share, modify, and use the icons for non-commercial purposes as long as you give appropriate credit and indicate any changes
made to the original icons.
</p>
<hr>
<p class="subtitle" id='adding-packages'>How do I add my own package to LURE?</p>
<p>
To add your own package, please refer to the <a href="https://github.com/Elara6331/lure/blob/master/docs/packages">package documentation</a> provided by LURE.
</p>
</div>
<Footer/>

54
src/routes/header.svelte
View File

@ -1,30 +1,42 @@
<script> <script>
import { page } from '$app/stores'; import { page } from '$app/stores';
import Icon from '@iconify/svelte'; import Icon from '@iconify/svelte';
function isActive(path) { function isActive(path) {
return $page.route.id == path ? 'is-active' : '' return $page.route.id == path ? 'is-active' : '';
} }
let navbarIsActive = false; let navbarIsActive = false;
</script> </script>
<nav class="navbar mb-5"> <nav class="navbar mb-5">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" href="/"><img src="/lure-text-white.svg" alt="LURE Logo"></a> <a class="navbar-item" href="/"><img src="/lure-text-white.svg" alt="LURE Logo" /></a>
<button class="navbar-burger {navbarIsActive ? 'is-active' : ''}" aria-label="menu" on:click={() => {navbarIsActive = !navbarIsActive}}> <button
<span aria-hidden="true"></span> class="navbar-burger {navbarIsActive ? 'is-active' : ''}"
<span aria-hidden="true"></span> aria-label="menu"
<span aria-hidden="true"></span> on:click={() => {
</button> navbarIsActive = !navbarIsActive;
</div> }}
>
<span aria-hidden="true" />
<span aria-hidden="true" />
<span aria-hidden="true" />
</button>
</div>
<div id="main-navbar" class="navbar-menu {navbarIsActive ? 'is-active' : ''}"> <div id="main-navbar" class="navbar-menu {navbarIsActive ? 'is-active' : ''}">
<div class="navbar-end"> <div class="navbar-end">
<a class="navbar-item {isActive('/')}" href="/"><Icon icon="material-symbols:house" inline=true/> Home</a> <a class="navbar-item {isActive('/')}" href="/">
<a class="navbar-item {isActive('/pkgs')}" href="/pkgs"><Icon icon="mdi:package-variant-closed" inline=true/>&nbsp;Packages</a> <Icon icon="material-symbols:house" inline="true" /> Home
<a class="navbar-item {isActive('/faq')}" href="/faq"><Icon icon="mdi:question-mark-circle" inline=true/>&nbsp;FAQ</a> </a>
</div> <a class="navbar-item {isActive('/pkgs')}" href="/pkgs">
</div> <Icon icon="mdi:package-variant-closed" inline="true" />&nbsp;Packages
</a>
<a class="navbar-item {isActive('/about')}" href="/about">
<Icon icon="mdi:question-mark-circle" inline="true" />&nbsp;About
</a>
</div>
</div>
</nav> </nav>

5
src/routes/install/+page.server.js Normal file
View File

@ -0,0 +1,5 @@
import { redirect } from '@sveltejs/kit';
export function load() {
throw redirect(302, 'https://gitea.elara.ws/Elara6331/lure/raw/branch/master/scripts/install.sh');
}

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

@ -1,46 +1,46 @@
<script> <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> </script>
<svelte:head> <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> </svelte:head>
<Header/> <Header />
<section class="container"> <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> </section>
<Footer/> <Footer />

BIN
static/lure-alpine.webm
View File

Binary file not shown.

BIN
static/lure-arch.webm
View File

Binary file not shown.

BIN
static/lure-debian.webm
View File

Binary file not shown.

BIN
static/lure-fedora.webm
View File

Binary file not shown.