Remove 'lure-' prefix from subdirectories

2023-09-26 15:32:46 -07:00
parent e5b9294f93
commit 185371b649
48 changed files with 14 additions and 14 deletions
--- a/frontend/src/app.d.ts
+++ b/frontend/src/app.d.ts
@@ -0,0 +1,9 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+	// interface Error {}
+	// interface Locals {}
+	// interface PageData {}
+	// interface Platform {}
+}
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vime/core@^5/themes/default.css" />
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div id="page-container">%sveltekit.body%</div>
+	</body>
+</html>
--- a/frontend/src/app.scss
+++ b/frontend/src/app.scss
@@ -0,0 +1,68 @@
+/* Write your global styles here, in SCSS syntax. Variables and mixins from the src/variables.scss file are available here without importing */ /* Import only what you need from Bulma */
+@import 'bulma/sass/utilities/_all';
+@import 'bulma/sass/base/_all';
+@import 'bulma/sass/elements/_all';
+@import 'bulma/sass/form/_all';
+@import 'bulma/sass/components/_all';
+@import 'bulma/sass/grid/_all';
+@import 'bulma/sass/helpers/_all';
+@import 'bulma/sass/layout/_all';
+
+@import './darkly/overrides.scss';
+
+.input::placeholder {
+    color: darken($grey-light, 10) !important; 
+    opacity: 1;
+}
+
+.input::-webkit-input-placeholder {
+    color: darken($grey-light, 10) !important;
+    opacity: 1;
+}
+
+.input::-moz-placeholder {
+    color: darken($grey-light, 10) !important;
+    opacity: 1;
+}
+
+.input::-ms-input-placeholder {
+    color: darken($grey-light, 10) !important;
+    opacity: 1;
+}
+
+pre {
+    background-color: transparent;
+}
+
+.terminal-player {
+    max-width: 735px;
+    max-height: 450px;
+}
+
+.sc-carousel__carousel-container {
+    --sc-arrow-size: 3px;
+}
+
+button.sc-carousel-arrow__circle {
+    width: 30px !important;
+    height: 30px !important;
+}
+
+body {
+    margin: 0;
+}
+
+#page-container {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+#page-container > * {
+    width: 100%
+}
+
+.hljs {
+    background: $grey-darker !important;
+    border-radius: 15px;
+}
--- a/frontend/src/darkly/overrides.scss
+++ b/frontend/src/darkly/overrides.scss
@@ -0,0 +1,291 @@
+////////////////////////////////////////////////
+// DARKLY
+////////////////////////////////////////////////
+
+// Overrides
+  
+  hr {
+    height: $border-width;
+  }
+  
+  h6 {
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+  
+  .hero {
+    background-color: $grey-dark;
+  }
+  
+  a {
+    transition: all 200ms ease;
+  }
+  
+  .button {
+    transition: all 200ms ease;
+    border-width: $border-width;
+    color: $white;
+  
+    &.is-active,
+    &.is-focused,
+    &:active,
+    &:focus {
+      box-shadow: 0 0 0 2px rgba($button-focus-border-color, 0.5);
+    }
+    @each $name, $pair in $colors {
+      $color: nth($pair, 1);
+      $color-invert: nth($pair, 2);
+  
+      &.is-#{$name} {
+        &.is-hovered,
+        &:hover {
+          background-color: lighten($color, 7.5%);
+        }
+  
+        &.is-active,
+        &.is-focused,
+        &:active,
+        &:focus {
+          border-color: $color;
+          box-shadow: 0 0 0 2px rgba($color, 0.5);
+        }
+      }
+    }
+  }
+  
+  .label {
+    color: $grey-lighter;
+  }
+  
+  .input,
+  .textarea {
+    transition: all 200ms ease;
+    box-shadow: none;
+    border-width: $border-width;
+    padding-left: 1em;
+    padding-right: 1em;
+    background-color: $body-background-color;
+    color: $text
+  }
+  
+  .select {
+    &:after,
+    select {
+      border-width: $border-width;
+      background-color: $body-background-color;
+      color: $text
+    }
+  }
+  
+  .control {
+    &.has-addons {
+      .button,
+      .input,
+      .select {
+        margin-right: -$border-width;
+      }
+    }
+  }
+  
+  .notification {
+    background-color: $grey-dark;
+  }
+  
+  .card {
+    $card-border-color: lighten($grey-darker, 5);
+    box-shadow: none;
+    border: $border-width solid $card-border-color;
+    background-color: $grey-darker;
+    border-radius: $radius;
+  
+    .card-image {
+      img {
+        border-radius: $radius $radius 0 0;
+      }
+    }
+  
+    .card-header {
+      box-shadow: none;
+      background-color: rgba($black-bis, 0.2);
+      border-radius: $radius $radius 0 0;
+    }
+  
+    .card-footer {
+      background-color: rgba($black-bis, 0.2);
+    }
+  
+    .card-footer,
+    .card-footer-item {
+      border-width: $border-width;
+      border-color: $card-border-color;
+    }
+  }
+  
+  .notification {
+    @each $name, $pair in $colors {
+      $color: nth($pair, 1);
+      $color-invert: nth($pair, 2);
+  
+      &.is-#{$name} {
+        a:not(.button) {
+          color: $color-invert;
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+  
+  .tag {
+    border-radius: $radius;
+  }
+  
+  .menu-list {
+    a {
+      transition: all 300ms ease;
+    }
+  }
+  
+  .modal-card-body {
+    background-color: $grey-darker;
+  }
+  
+  .modal-card-foot,
+  .modal-card-head {
+    border-color: $grey-dark;
+  }
+  
+  .message-header {
+    font-weight: $weight-bold;
+    background-color: $grey-dark;
+    color: $white;
+  }
+  
+  .message-body {
+    border-width: $border-width;
+    border-color: $grey-dark;
+  }
+  
+  .navbar {
+    border-radius: $radius;
+  
+    &.is-transparent {
+      background: none;
+    }
+  
+    &.is-primary {
+      .navbar-dropdown {
+        a.navbar-item.is-active {
+          background-color: $link;
+        }
+      }
+    }
+  
+    @include until($navbar-breakpoint) {
+      .navbar-menu {
+        background-color: $navbar-background-color;
+        border-radius: 0 0 $radius $radius;
+      }
+    }
+  }
+  
+  .hero .navbar,
+  body > .navbar {
+    border-radius: 0;
+  }
+  
+  .pagination-link,
+  .pagination-next,
+  .pagination-previous {
+    border-width: $border-width;
+  }
+  
+  .panel-block,
+  .panel-heading,
+  .panel-tabs {
+    border-width: $border-width;
+  
+    &:first-child {
+      border-top-width: $border-width;
+    }
+  }
+  
+  .panel-heading {
+    font-weight: $weight-bold;
+  }
+  
+  .panel-tabs {
+    a {
+      border-width: $border-width;
+      margin-bottom: -$border-width;
+  
+      &.is-active {
+        border-bottom-color: $link-active;
+      }
+    }
+  }
+  
+  .panel-block {
+    &:hover {
+      color: $link-hover;
+  
+      .panel-icon {
+        color: $link-hover;
+      }
+    }
+  
+    &.is-active {
+      .panel-icon {
+        color: $link-active;
+      }
+    }
+  }
+  
+  .tabs {
+    a {
+      border-bottom-width: $border-width;
+      margin-bottom: -$border-width;
+    }
+  
+    ul {
+      border-bottom-width: $border-width;
+    }
+  
+    &.is-boxed {
+      a {
+        border-width: $border-width;
+      }
+  
+      li.is-active a {
+        background-color: darken($grey-darker, 4);
+      }
+    }
+  
+    &.is-toggle {
+      li a {
+        border-width: $border-width;
+        margin-bottom: 0;
+      }
+  
+      li + li {
+        margin-left: -$border-width;
+      }
+    }
+  }
+  
+  .hero {
+    // Colors
+    @each $name, $pair in $colors {
+      $color: nth($pair, 1);
+      $color-invert: nth($pair, 2);
+  
+      &.is-#{$name} {
+        .navbar {
+          .navbar-dropdown {
+            .navbar-item:hover {
+              background-color: $navbar-dropdown-item-hover-background-color;
+            }
+          }
+        }
+      }
+    }
+  }
--- a/frontend/src/darkly/variables.scss
+++ b/frontend/src/darkly/variables.scss
@@ -0,0 +1,121 @@
+////////////////////////////////////////////////
+// DARKLY
+////////////////////////////////////////////////
+
+// Variables
+$grey-lighter: #9c9fa2;
+$grey-light: #7e8185;
+$grey: darken($grey-light, 16);
+$grey-dark: darken($grey, 16);
+$grey-darker: darken($grey, 23);
+
+$white: #dddedf;
+$orange: #DF691A;
+$yellow: #f1b70e;
+$green: #2ecc71;
+$turquoise: #00FDBA;
+$blue: #3498db;
+$purple: #8e44ad;
+$red: #e74c3c;
+$white-ter: #ecf0f1;
+$primary: #0060a8 !default;
+$yellow-invert: #fff;
+
+$family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
+  "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+$family-monospace: "Inconsolata", "Consolas", "Monaco", monospace;
+
+$radius-small: 3px;
+$radius: 0.4em;
+$radius-large: 8px;
+$size-6: 15px;
+$size-7: 0.85em;
+$title-weight: 500;
+$subtitle-weight: 400;
+$subtitle-color: $grey-lighter;
+
+$border-width: 2px;
+$border: $grey;
+
+$body-background-color: darken($grey-darker, 4);
+$body-size: 15px;
+
+$background: $grey-darker;
+$footer-background-color: $background;
+$button-background-color: $background;
+$button-border-color: lighten($button-background-color, 15);
+
+$title-color: $white;
+$subtitle-color: $grey-lighter;
+$subtitle-strong-color: $grey-light;
+
+$text: $white;
+$text-light: lighten($text, 10);
+$text-strong: darken($text, 5);
+
+$box-color: $text;
+$box-background-color: $grey-dark;
+$box-shadow: none;
+
+$link: $turquoise;
+$link-hover: lighten($link, 5);
+$link-focus: darken($link, 5);
+$link-active: darken($link, 5);
+$link-focus-border: $grey-light;
+
+$button-color: $primary;
+$button-hover-color: darken($text, 5); // text-dark
+$button-focus: darken($text, 5); // text-dark
+$button-active-color: darken($text, 5); // text-dark
+$button-disabled-background-color: $grey-light;
+$button-focus-border-color: $link-focus-border;
+
+$control-height: 2.5em;
+
+$input-color: $grey-darker;
+$input-icon-color: $grey;
+$input-icon-active-color: $input-color;
+$input-hover-color: $grey-light;
+$input-disabled-background-color: $grey-light;
+$input-disabled-border: $grey-lighter;
+
+$table-color: $text;
+$table-head: $grey-lighter;
+$table-background-color: $grey-dark;
+$table-cell-border: 1px solid $grey;
+
+$table-row-hover-background-color: $grey-darker;
+$table-striped-row-even-background-color: $grey-darker;
+$table-striped-row-even-hover-background-color: lighten($grey-darker, 2);
+
+$pagination-color: $link;
+$pagination-border-color: $border;
+
+$navbar-height: 4rem;
+
+$navbar-background-color: $primary;
+$navbar-item-color: $text;
+$navbar-item-hover-color: $link;
+$navbar-item-hover-background-color: transparent;
+$navbar-item-active-color: $link;
+$navbar-dropdown-arrow: #fff;
+$navbar-divider-background-color: rgba(0, 0, 0, 0.2);
+$navbar-dropdown-border-top: 1px solid $navbar-divider-background-color;
+$navbar-dropdown-background-color: $primary;
+$navbar-dropdown-item-hover-color: $grey-lighter;
+$navbar-dropdown-item-hover-background-color: transparent;
+$navbar-dropdown-item-active-background-color: transparent;
+$navbar-dropdown-item-active-color: $link;
+
+$dropdown-content-background-color: $background;
+$dropdown-item-color: $text;
+
+$progress-value-background-color: $grey-lighter;
+
+$bulmaswatch-import-font: true !default;
+
+$file-cta-background-color: $grey-darker;
+
+$progress-bar-background-color: $grey-dark;
+
+$panel-heading-background-color: $grey-dark;
--- a/frontend/src/lib/lure.pb.ts
+++ b/frontend/src/lib/lure.pb.ts
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -0,0 +1,5 @@
+<script>
+	import '../app.scss';
+</script>
+
+<slot />
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -0,0 +1,50 @@
+<script>
+	import Header from './header.svelte';
+	import Footer from './footer.svelte';
+
+	import Highlight from 'svelte-highlight';
+	import bash from 'svelte-highlight/languages/bash';
+	import arta from 'svelte-highlight/styles/arta';
+</script>
+
+<svelte:head>
+	<title>Home | LURE Web</title>
+	<meta name="description" content="LURE Web home page" />
+	{@html arta}
+</svelte:head>
+
+<Header />
+
+<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>
+	<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>
+		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>
+		and distro packages are provided at the
+		<a href="https://gitea.elara.ws/lure/lure/releases/latest">latest Gitea release</a>.
+	</p>
+</section>
+
+<Footer />
--- a/frontend/src/routes/about/+page.svelte
+++ b/frontend/src/routes/about/+page.svelte
@@ -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/lure/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/lure/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 />
--- a/frontend/src/routes/footer.svelte
+++ b/frontend/src/routes/footer.svelte
@@ -0,0 +1,15 @@
+<script>
+    import Icon from '@iconify/svelte';
+</script>
+
+<br style="margin-top: 20px">
+<div class="hero is-dark is-small">
+    <div class="hero-body has-text-centered">
+        <p>Copyright &copy; {new Date().getFullYear()} LURE Web Contributors. Licensed under the <a class="has-text-link" href="https://www.gnu.org/licenses/agpl-3.0-standalone.html">AGPLv3</a>.</p>
+        <div class="is-size-4">
+            <a href="https://gitea.elara.ws/Elara6331/lure-web"><Icon icon="cib:gitea"/></a>
+            <a href="https://github.com/Elara6331/lure-web"><Icon icon="mdi:github"/></a>
+            <a href="https://reddit.com/r/linux_user_repository"><Icon icon="ic:round-reddit"/></a>
+        </div>
+    </div>
+</div>
--- a/frontend/src/routes/header.svelte
+++ b/frontend/src/routes/header.svelte
@@ -0,0 +1,42 @@
+<script>
+	import { page } from '$app/stores';
+
+	import Icon from '@iconify/svelte';
+
+	function isActive(path) {
+		return $page.route.id == path ? 'is-active' : '';
+	}
+
+	let navbarIsActive = false;
+</script>
+
+<nav class="navbar mb-5">
+	<div class="navbar-brand">
+		<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;
+			}}
+		>
+			<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 class="navbar-end">
+			<a class="navbar-item {isActive('/')}" href="/">
+				<Icon icon="material-symbols:house" inline="true" /> Home
+			</a>
+			<a class="navbar-item {isActive('/pkgs')}" href="/pkgs">
+				<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>
--- a/frontend/src/routes/icons/+page.svelte
+++ b/frontend/src/routes/icons/+page.svelte
@@ -0,0 +1,72 @@
+<script>
+    import Header from "../header.svelte";
+    import Footer from "../footer.svelte";
+</script>
+
+<svelte:head>
+    <title>FAQ | LURE Web</title>
+    <meta name="description" content="LURE Icons">
+</svelte:head>
+
+<Header/>
+
+<div class="container">
+    <p class="title">Icons</p>
+    <br>
+    <div class="columns">
+        <div class="column ">
+            <div class="card">
+                <div class="card-header">
+                    <p class="card-header-title">
+                        Without Text
+                    </p>
+                </div>
+                <div class="card-content has-text-centered">
+                    <figure class="image is-16by9">
+                        <img src="/lure-no-text.svg" alt="LURE icon without text">
+                    </figure>
+                </div>
+                <footer class="card-footer">
+                    <a class="card-footer-item" href="/lure-no-text.svg" download>Download</a>
+                </footer>
+            </div>
+        </div>
+        <div class="column ">
+            <div class="card">
+                <div class="card-header">
+                    <p class="card-header-title">
+                        With Text
+                    </p>
+                </div>
+                <div class="card-content has-text-centered">
+                    <figure class="image is-16by9">
+                        <img src="/lure-text.svg" alt="LURE icon with text">
+                    </figure>
+                </div>
+                <footer class="card-footer">
+                    <a class="card-footer-item" href="/lure-text.svg" download>Download</a>
+                </footer>
+            </div>
+        </div>
+        <div class="column">
+            <div class="card">
+                <div class="card-header">
+                    <p class="card-header-title">
+                        White With Text
+                    </p>
+                </div>
+                <div class="card-content has-text-centered">
+                    <figure class="image is-16by9">
+                        <img src="/lure-text-white.svg" alt="White LURE icon with white text">
+                    </figure>
+                </div>
+                <footer class="card-footer">
+                    <a class="card-footer-item" href="/lure-text-white.svg" download>Download</a>
+                </footer>
+            </div>
+        </div>
+    </div>
+    <p class="has-text-weight-bold">Note: The icons on this page are licensed under CC-BY-NC-SA 4.0 unless otherwise specified</p>
+</div>
+
+<Footer/>
--- a/frontend/src/routes/install/+page.server.js
+++ b/frontend/src/routes/install/+page.server.js
@@ -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');
+}
--- a/frontend/src/routes/pkg/[repo]/[name]/+page.svelte
+++ b/frontend/src/routes/pkg/[repo]/[name]/+page.svelte
@@ -0,0 +1,170 @@
+<script>
+	import { page } from '$app/stores';
+	import { client } from 'twirpscript';
+	import { GetPkg } from '$lib/lure.pb';
+	import { LURE_WEB_API_URL } from '$env/static/public';
+	import { DoubleBounce } from 'svelte-loading-spinners';
+
+	import Header from '../../../header.svelte';
+	import Footer from '../../../footer.svelte';
+
+	import Icon from '@iconify/svelte';
+	import { onMount } from 'svelte';
+
+	client.baseURL = LURE_WEB_API_URL;
+	client.prefix = '';
+
+	let currentURL = ``;
+	onMount(() => (currentURL = window.location.href));
+
+	function fullVer(pkg) {
+		let ver = `${pkg.version}-${pkg.release}`;
+		if (pkg.epoch != 0) {
+			ver = `${pkg.epoch}:${ver}`;
+		}
+		return ver;
+	}
+
+	function objToMap(o) {
+		return new Map(Object.entries(o));
+	}
+
+	let modalActive = false;
+
+	function showModal() {
+		modalActive = true;
+	}
+
+	function hideModal() {
+		modalActive = false;
+	}
+</script>
+
+<svelte:head>
+	<title>{$page.params.name} Package | LURE Web</title>
+	<meta name="description" content="Information about the {$page.params.name} LURE package." />
+</svelte:head>
+
+<Header />
+
+<section class="container">
+	<a href="/pkgs"><Icon icon="material-symbols:arrow-back-rounded" inline="true" /> Back</a>
+	{#await GetPkg({ name: $page.params.name, repository: $page.params.repo })}
+		<center><DoubleBounce color="#375a7f" /></center>
+	{:then pkg}
+		<div class="modal {modalActive ? 'is-active' : ''}">
+			<div class="modal-background"/>
+			<div class="modal-card">
+				<header class="modal-card-head">
+					<p class="modal-card-title">Badge</p>
+					<button class="delete" aria-label="close" on:click={hideModal}/>
+				</header>
+				<section class="modal-card-body">
+					<img
+						src="{LURE_WEB_API_URL}/badge/{$page.params.repo}/{$page.params.name}"
+						alt="badge for {$page.params.name} package"
+					/>
+
+					<p>Markdown</p>
+					<input
+						class="input"
+						value="[![LURE badge for {$page.params.name} package]({LURE_WEB_API_URL}/badge/{$page.params.repo}/{$page.params.name})]({currentURL})"
+						readonly
+					/>
+					<p>HTML</p>
+					<input
+						class="input"
+						value='<a href="{currentURL}"><img src="{LURE_WEB_API_URL}/badge/{$page.params.repo}/{$page.params.name}" alt="LURE badge for {$page.params.name} package"></a>'
+						readonly
+					/>
+				</section>
+				<footer class="modal-card-foot">
+					<button class="button is-primary" on:click={hideModal}>Close</button>
+				</footer>
+			</div>
+		</div>
+		<p class="title">{pkg.name}</p>
+		<p class="subtitle mb-3">{fullVer(pkg)}</p>
+		<a href="/pkg/{pkg.repository}/{pkg.name}/lure.sh" class="button is-primary mb-5">View lure.sh</a>
+		<button href="/pkg/{pkg.repository}/{pkg.name}/lure.sh" class="button is-success mb-5 ml-1" on:click={showModal}>View badge</button>
+		<div class="box">
+			<table class="table is-hoverable is-fullwidth">
+				<tbody>
+					{#if pkg.description != ''}
+						<tr>
+							<th>Description:</th>
+							<td>{pkg.description}</td>
+						</tr>
+					{/if}
+					{#if pkg.homepage != ''}
+						<tr>
+							<th>Homepage:</th>
+							<td><a href={pkg.homepage}>{pkg.homepage}</a></td>
+						</tr>
+					{/if}
+					{#if pkg.maintainer != ''}
+						<tr>
+							<th>Maintainer:</th>
+							<td>{pkg.maintainer}</td>
+						</tr>
+					{/if}
+					{#if pkg.licenses.length != 0}
+						<tr>
+							<th>Licenses:</th>
+							<td>
+								{#each pkg.licenses as license, index}
+									{#if license.startsWith('custom')}
+										{license}{#if index + 1 < pkg.licenses.length},&nbsp{/if}
+									{:else}
+										<a href="https://spdx.org/licenses/{license}.html">{license}</a
+										>{#if index + 1 < pkg.licenses.length},&nbsp;{/if}
+									{/if}
+								{/each}
+							</td>
+						</tr>
+					{/if}
+					{#if pkg.architectures.length != 0}
+						<tr>
+							<th>Architectures:</th>
+							<td>{pkg.architectures.join(', ')}</td>
+						</tr>
+					{/if}
+					{#if pkg.conflicts.length != 0}
+						<tr>
+							<th>Conflicts:</th>
+							<td>{pkg.conflicts.join(', ')}</td>
+						</tr>
+					{/if}
+					{#if pkg.provides.length != 0}
+						<tr>
+							<th>Provides:</th>
+							<td>{pkg.provides.join(', ')}</td>
+						</tr>
+					{/if}
+					{#each [...objToMap(pkg.depends)] as [override, pkgList]}
+						<tr>
+							<th>Depends ({override == '' ? 'default' : override}):</th>
+							<td>{pkgList.entries.join(', ')}</td>
+						</tr>
+					{/each}
+					{#each [...objToMap(pkg.buildDepends)] as [override, pkgList]}
+						<tr>
+							<th>Build Depends ({override != '' ? override : 'default'}):</th>
+							<td>{pkgList.entries.join(', ')}</td>
+						</tr>
+					{/each}
+					<tr>
+						<th>Repository:</th>
+						<td>{pkg.repository}</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	{:catch err}
+		<div class="notification is-danger my-3">
+			Error: {err.msg}
+		</div>
+	{/await}
+</section>
+
+<Footer />
--- a/frontend/src/routes/pkg/[repo]/[name]/lure.sh/+page.svelte
+++ b/frontend/src/routes/pkg/[repo]/[name]/lure.sh/+page.svelte
@@ -0,0 +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 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 Icon from '@iconify/svelte';
+
+	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 atom}
+</svelte:head>
+
+<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}
+</section>
+
+<Footer />
--- a/frontend/src/routes/pkgs/+page.svelte
+++ b/frontend/src/routes/pkgs/+page.svelte
@@ -0,0 +1,129 @@
+<script>
+    import { client } from 'twirpscript';
+    import { Search } from '$lib/lure.pb';
+    import { searchReq } from '../../stores.js';
+    import { LURE_WEB_API_URL } from '$env/static/public';
+
+    import Header from "../header.svelte";
+    import Footer from "../footer.svelte";
+    import { DoubleBounce } from 'svelte-loading-spinners';
+    import Icon from '@iconify/svelte';
+
+    client.baseURL = LURE_WEB_API_URL
+    client.prefix = ""
+
+    let searchPromise = Search(
+        $searchReq ?? {
+            query: "",
+            limit: BigInt(0),
+            sortBy: "UNSORTED",
+            filterType: "NO_FILTER",
+        }
+    );
+
+    function onSubmit(e) {
+        let formData = new FormData(e.target);
+        let filterValue = formData.get('filter-value');
+        let req = {
+            query: formData.get('query'),
+            limit: BigInt(0),
+            sortBy: formData.get('sort-by'),
+            filterType: formData.get('filter'),
+            filterValue: filterValue == '' ? null : filterValue,
+        }
+        searchReq.set(req)
+        searchPromise = Search(req);
+    }
+
+    function onFilterChange(e) {
+        let filterVal = document.getElementById('filter-val');
+
+        if (e.target.value != "NO_FILTER") {
+            filterVal.classList.remove('is-hidden');
+        } else {
+            filterVal.classList.add('is-hidden');
+        }
+    }
+</script>
+
+<svelte:head>
+    <title>Package Search | LURE Web</title>
+    <meta name="description" content="Search for LURE packages">
+</svelte:head>
+
+<Header/>
+
+<section class="container">
+    <p class="title">Package Search</p>
+    <form on:submit|preventDefault={onSubmit}>
+        <div class="field">
+            <div class="control">
+                <input class="input" type="text" name="query" value="" placeholder="Query">
+            </div>
+        </div>
+        <div class="columns">
+            <div class="column">
+                <div class="field">
+                    <div class="control select is-fullwidth">
+                        <select name="sort-by">
+                            <option value="UNSORTED" selected>Unsorted</option>
+                            <option value="NAME">Sort by Name</option>
+                            <option value="VERSION">Sort by Version</option>
+                            <option value="REPOSITORY">Sort by Repository</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <div class="column">
+                <div class="field">
+                    <div class="control select is-fullwidth">
+                        <select name="filter" on:change={onFilterChange}>
+                            <option value="NO_FILTER" selected>No Filter</option>
+                            <option value="IN_REPOSITORY">In Repo</option>
+                            <option value="SUPPORTS_ARCH">Supports Architecture</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="field">
+            <div class="control">
+                <input id="filter-val" class="input is-hidden" type="text" value="" name="filter-value" placeholder="Filter Value">
+            </div>
+        </div>
+        <input type="submit" class="button is-fullwidth" value="Search">
+    </form>
+    
+    <hr>
+
+    {#await searchPromise}
+        <center><DoubleBounce color="#375a7f" /></center>
+    {:then resp}
+        {#each resp.packages as pkg}
+            <div class="card my-5">
+                <header class="card-header">
+                    <p class="card-header-title">{pkg.repository} / {pkg.name}</p>
+                    <div class="card-header-icon">{pkg.version}</div>
+                </header>
+                
+                <div class="card-content">
+                    {pkg.description}
+                </div>
+
+                <footer class="card-footer">
+                    <a class="card-footer-item" href="/pkg/{pkg.repository}/{pkg.name}">More info <Icon icon="material-symbols:arrow-forward-rounded" inline=true/></a>
+                </footer>
+            </div>
+        {/each}
+        {#if resp.packages.length === 0}
+            <p class="subtitle has-text-centered has-text-danger my-5 is-fullwidth">No Results</p>
+        {/if}
+    {:catch err}
+        <div class="notification is-danger my-3">
+            Error: {err.msg}
+        </div>
+    {/await}
+
+</section>
+
+<Footer/>
--- a/frontend/src/stores.js
+++ b/frontend/src/stores.js
@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const searchReq = writable()
--- a/frontend/src/variables.scss
+++ b/frontend/src/variables.scss
@@ -0,0 +1,6 @@
+/* Variables and mixins declared here will be available in all other SCSS files */ /* https://github.com/jgthms/bulma/issues/1293 */
+$body-overflow-y: auto;
+
+@import './darkly/variables.scss';
+
+$family-sans-serif: "Ubuntu", sans-serif;