add clone button for build parameters

.gitea/workflows/build-app-image.yml

@@ -17,8 +17,6 @@ jobs:
     runs-on: ubuntu-latest
     env:
       DH_REGISTRY: docker.io
-      GH_REGISTRY: ghcr.io
-      IMAGE_NAME: ${{ github.repository }}
       REPOSITORY: ${{ github.event.repository.name }}
       DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
     permissions:
@@ -42,60 +40,24 @@ jobs:
           registry: ${{ env.DH_REGISTRY }}
           username: ${{ env.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
-
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ env.GH_REGISTRY }}
-          username: ${{ github.repository_owner }}
-          password: ${{ secrets.GITHUB_TOKEN }}
       
       - name: Extract metadata for release Docker image
-        if: startsWith(github.ref, 'refs/tags/v')
         id: meta
         uses: docker/metadata-action@v5
         with:
           images: |
             ${{ env.DOCKER_USERNAME }}/${{ env.REPOSITORY }}
-            ${{ env.GH_REGISTRY }}/${{ env.IMAGE_NAME }}
           tags: |
             type=raw,value=latest
             type=semver,pattern={{version}}
             type=semver,pattern={{major}}.{{minor}}
             type=semver,pattern={{major}}
 
-      - name: Extract metadata for develop Docker image
-        if: "!startsWith(github.ref, 'refs/tags/v')"
-        id: meta-develop
-        uses: docker/metadata-action@v5
-        with:
-          images: |
-            ${{ env.GH_REGISTRY }}/${{ env.IMAGE_NAME }}
-          tags: |
-            type=ref,event=branch
-            type=ref,event=pr
-
       - name: Build and push release Docker image
-        if: startsWith(github.ref, 'refs/tags/v')
         uses: docker/build-push-action@v6
         with:
           target: deploy
-          push: true
+          push: ${{ startsWith(github.ref, 'refs/tags/v') && 'true' || 'false' }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
-
           platforms: linux/amd64
-          cache-from: type=gha,scope=${{ github.workflow }}
-          cache-to: type=gha,mode=max,scope=${{ github.workflow }}
-
-      - name: Build and push develop Docker image
-        if: "!startsWith(github.ref, 'refs/tags/v')"
-        uses: docker/build-push-action@v6
-        with:
-          target: deploy
-          push: true
-          tags: ${{ steps.meta-develop.outputs.tags }}
-          labels: ${{ steps.meta-develop.outputs.labels }}
-          platforms: linux/amd64
-          cache-from: type=gha,scope=${{ github.workflow }}
-          cache-to: type=gha,mode=max,scope=${{ github.workflow }}

.gitea/workflows/build-arch-images.yml

@@ -39,22 +39,22 @@ jobs:
       run: echo "DEPLOY=true" >> $GITHUB_ENV
 
     - name: Checkout repository
-      uses: actions/checkout@v4
+      uses: https://github.com/actions/checkout@v4
 
     - name: Set up Docker Buildx
       id: buildx
-      uses: docker/setup-buildx-action@v3
+      uses: https://github.com/docker/setup-buildx-action@v3
       with:
         install: true
     
     - name: Log in to the Docker Hub
-      uses: docker/login-action@v3
+      uses: https://github.com/docker/login-action@v3
       with:
         username: ${{ secrets.DOCKER_USERNAME }}
         password: ${{ secrets.DOCKER_PASSWORD }}
 
     - name: Build Docker image
-      uses: docker/build-push-action@v6
+      uses: https://github.com/docker/build-push-action@v6
       with:
         push: ${{ env.DEPLOY }}
         pull: true

.gitea/workflows/npm-audit.yml

@@ -0,0 +1,27 @@
+name: NPM Audit Check
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+  schedule:
+    - cron: '0 16 * * 5'
+  
+jobs:
+
+  npm_audit:
+    name: Check NPM audit
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    strategy:
+      fail-fast: true
+    permissions:
+      contents: read
+
+    steps:
+    - name: Checkout repository
+      uses: https://github.com/actions/checkout@v4
+
+    - name: NPM Audit
+      run: npm audit

Dockerfile

@@ -5,13 +5,13 @@ WORKDIR /build
 COPY ./package*json ./
 RUN npm ci
 COPY . .
-RUN node --experimental-strip-types build.ts && \
+RUN npm run build && \
     npm exec tsc && \
     npm ci --only=production --omit=dev
 
-FROM base as deploy
+FROM base AS deploy
 
-WORKDIR /srv/abt
+WORKDIR /srv/archery
 
 RUN apk add --no-cache docker-cli
 COPY --from=build-env /build .

build.ts

@@ -1,171 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import child_process from 'child_process';
-import uglifyjs from "uglify-js";
-import * as sass from 'sass';
-import * as csso from 'csso';
-
-const spawn = child_process.spawn;
-const fsp = fs.promises;
-const STYLESDIR = 'styles';
-const SCRIPTSDIR = 'scripts';
-const IMAGESDIR = path.join('assets', 'images');
-const STYLEOUTDIR = process.env.STYLEOUTDIR || path.join(import.meta.dirname, 'assets', 'css');
-const SCRIPTSOUTDIR = process.env.SCRIPTSOUTDIR || path.join(import.meta.dirname, 'assets', 'js');
-const IMAGESOUTDIR = process.env.IMAGESOUTDIR || path.join(import.meta.dirname, 'assets', 'webp');
-const STYLEOUTFILE = process.env.STYLEOUTFILE || 'styles.css';
-const SQUASH = new RegExp('^[0-9]+-');
-
-async function emptyDir(dir: string) {
-    await Promise.all((await fsp.readdir(dir, { withFileTypes: true })).map(f => path.join(dir, f.name)).map(p => fsp.rm(p, {
-        recursive: true,
-        force: true
-    })));
-}
-
-async function mkdir(dir: string | string[]) {
-    if (typeof dir === 'string') {
-        await fsp.mkdir(dir, { recursive: true });
-    }
-    else {
-        await Promise.all(dir.map(mkdir));
-    }
-}
-
-// Process styles
-async function styles() {
-    await mkdir([STYLEOUTDIR, STYLESDIR]);
-    await emptyDir(STYLEOUTDIR);
-    let styles: string[] = [];
-    let files = await fsp.readdir(STYLESDIR);
-    await Promise.all(files.map(f => new Promise(async (res, reject) => {
-        let p = path.join(STYLESDIR, f);
-        console.log(`Processing style ${p}`);
-        let style = sass.compile(p).css;
-        if (f.charAt(0) !== '_') {
-            if (SQUASH.test(f)) {
-                styles.push(style);
-            }
-            else {
-                let o = path.join(STYLEOUTDIR, f.substring(0, f.lastIndexOf('.')) + '.css');
-                await fsp.writeFile(o, csso.minify(style).css);
-                console.log(`Wrote ${o}`);
-            }
-        }
-        res(0);
-    })));
-    let out = csso.minify(styles.join('\n')).css;
-    let outpath = path.join(STYLEOUTDIR, STYLEOUTFILE);
-    await fsp.writeFile(outpath, out);
-    console.log(`Wrote ${outpath}`);
-}
-
-// Process scripts
-async function scripts() {
-    await mkdir([SCRIPTSOUTDIR, SCRIPTSDIR]);
-    await emptyDir(SCRIPTSOUTDIR);
-    let files = await fsp.readdir(SCRIPTSDIR);
-    await Promise.all(files.map(f => new Promise(async (res, reject) => {
-        let p = path.join(SCRIPTSDIR, f);
-        let o = path.join(SCRIPTSOUTDIR, f);
-        console.log(`Processing script ${p}`);
-        try {
-            await fsp.writeFile(o, uglifyjs.minify((await fsp.readFile(p)).toString()).code);
-            console.log(`Wrote ${o}`);
-        }
-        catch (ex) {
-            console.log(`error writing ${o}: ${ex}`);
-        }
-        res(0);
-    })));
-}
-
-// Process images
-async function images(dir = '') {
-    let p = path.join(IMAGESDIR, dir);
-    await mkdir(p);
-    if (dir.length === 0) {
-        await mkdir(IMAGESOUTDIR)
-        await emptyDir(IMAGESOUTDIR);
-    }
-    let files = await fsp.readdir(p, {
-        withFileTypes: true
-    });
-    if (files.length) {
-        await Promise.all(files.map(f => new Promise(async (res, reject) => {
-            if (f.isFile()) {
-                let outDir = path.join(IMAGESOUTDIR, dir);
-                let infile = path.join(p, f.name);
-                let outfile = path.join(outDir, f.name.substring(0, f.name.lastIndexOf('.')) + '.webp');
-                await mkdir(outDir);
-                console.log(`Processing image ${infile}`)
-                let process = spawn('cwebp', ['-mt', '-q', '50', infile, '-o', outfile]);
-                let timeout = setTimeout(() => {
-                    reject('Timed out');
-                    process.kill();
-                }, 30000);
-                process.on('exit', async (code) => {
-                    clearTimeout(timeout);
-                    if (code === 0) {
-                        console.log(`Wrote ${outfile}`);
-                        res(null);
-                    }
-                    else {
-                        reject(code);
-                    }
-                });
-            }
-            else if (f.isDirectory()) {
-                images(path.join(dir, f.name)).then(res).catch(reject);
-            }
-        })));
-    }
-}
-
-function isAbortError(err: unknown): boolean {
-    return typeof err === 'object' && err !== null && 'name' in err && err.name === 'AbortError';
-}
-
-(async function () {
-    await Promise.all([styles(), scripts(), images()]);
-    if (process.argv.indexOf('--watch') >= 0) {
-        console.log('watching for changes...');
-        (async () => {
-            try {
-                const watcher = fsp.watch(STYLESDIR);
-                for await (const _ of watcher)
-                    await styles();
-            } catch (err) {
-                if (isAbortError(err))
-                    return;
-                throw err;
-            }
-        })();
-
-        (async () => {
-            try {
-                const watcher = fsp.watch(SCRIPTSDIR);
-                for await (const _ of watcher)
-                    await scripts();
-            } catch (err) {
-                if (isAbortError(err))
-                    return;
-                throw err;
-            }
-        })();
-
-        (async () => {
-            try {
-                const watcher = fsp.watch(IMAGESDIR, {
-                    recursive: true // no Linux ☹️
-                });
-                for await (const _ of watcher)
-                    await images();
-            } catch (err) {
-                if (isAbortError(err))
-                    return;
-                throw err;
-            }
-        })();
-    }
-})();

config/config.example.json

@@ -1 +1,9 @@
-{}
+{
+    "db": {
+        "host": "postgres",
+        "password": "correcthorse"
+    },
+    "web": {
+        "port": 8080
+    }
+}

docker-compose.yml

@@ -7,8 +7,10 @@ services:
             context: ./
             dockerfile: Dockerfile
         volumes:
-            - ./config:/srv/abt/config
+            - ./config:/srv/archery/config
             - /var/run/docker.sock:/var/run/docker.sock
+        environment:
+            PASSWORD: ${POSTGRES_PASSWORD}
         restart: "no"
         ports:
             - 8080:8080

package.json

@@ -1,6 +1,6 @@
 {
   "name": "archery",
-  "version": "0.0.2",
+  "version": "0.1.8",
   "description": "Build Arch packages through a web interface",
   "keywords": [
     "docker",
@@ -20,25 +20,26 @@
   "type": "module",
   "main": "index.ts",
   "dependencies": {
-    "body-parser": "^1.20.3",
+    "body-parser": "^2.2.0",
     "ejs": "3.1.10",
-    "express": "^4.21.2",
+    "express": "^5.1.0",
     "express-ws": "^5.0.2",
-    "pg": "^8.13.1",
+    "pg": "^8.16.3",
     "pg-hstore": "^2.3.4",
-    "sequelize": "^6.37.5"
+    "sequelize": "^6.37.7",
+    "sqids": "0.3.0"
   },
   "devDependencies": {
-    "@types/csso": "5.0.4",
-    "@types/express": "^5.0.0",
+    "@types/express": "^5.0.3",
     "@types/express-ws": "3.0.5",
-    "@types/node": "^22.10.5",
-    "@types/uglify-js": "3.17.5",
-    "csso": "5.0.5",
-    "sass": "1.83.1",
-    "uglify-js": "3.19.3"
+    "@types/node": "^24.5.2",
+    "forking-build-shit": "1.0.4"
   },
   "peerDependencies": {
     "typescript": "5.7.3"
+  },
+  "scripts": {
+    "build": "npx build-shit",
+    "watch": "npx build-shit --watch"
   }
 }

readme.md

@@ -0,0 +1,6 @@
+# Archery
+## Build system for pacman
+
+Quickly trigger build jobs on a remote system (perhaps one with more RAM?) for debugging packaging issues. Switch between Artix and Arch to compare builds. Enable testing or staging repos in a single click.
+
+Consult [docker-compose.yml](docker-compose.yml) and [config.example.json](config/config.example.json) to get an understanding of how to deploy Archery.

scripts/build.js

@@ -2,6 +2,7 @@ document.addEventListener('DOMContentLoaded', function () {
     const logContainer = this.getElementById('logs');
     const followLogsBtn = this.getElementById('followCheckmark');
     const buildStatusTxt = this.getElementById('buildStatus');
+    let started = logContainer.childElementCount > 0;
 
     /**
      * Get the correct path to establish a ws connection
@@ -13,12 +14,14 @@ document.addEventListener('DOMContentLoaded', function () {
 
     /**
      * Add log line to the DOM
-     * @param {string} str 
+     * @param {string[]} str 
      */
-    function appendLine(str, e = false) {
-        const p = document.createElement('p');
-        p.appendChild(document.createTextNode(str));
-        logContainer.appendChild(p);
+    function appendLines(str, e = false) {
+        str.forEach(line => {
+            const p = document.createElement('p');
+            p.appendChild(document.createTextNode(line));
+            logContainer.appendChild(p);
+        });
     }
 
     /**
@@ -30,6 +33,18 @@ document.addEventListener('DOMContentLoaded', function () {
         }
     }
 
+    function handleScrollToggleClick() {
+        window.scrollTo(0, followLogsBtn.checked ? document.body.scrollHeight : 0);
+    }
+
+    /**
+     * Split string by newline char
+     * @param {string} str 
+     */
+    function splitLines(str) {
+        return str.split('\n').map(line => line.substring(line.lastIndexOf('\r') + 1));
+    }
+
     /**
      * Establish websocket connection
      */
@@ -41,15 +56,21 @@ document.addEventListener('DOMContentLoaded', function () {
         var ws = new WebSocket(new_uri);
 
         ws.onmessage = function (message) {
-            console.log('Got message: ', message);
             const buildEvent = JSON.parse(message.data);
-            
+
+            if (!started) {
+                started = true;
+                buildStatusTxt.replaceChild(document.createTextNode('running'), buildStatusTxt.firstChild);
+            }
             if (buildEvent.type === 'finish') {
                 ws.close();
                 buildStatusTxt.replaceChild(document.createTextNode(buildEvent.message), buildStatusTxt.firstChild);
+                appendLines([`finished: ${buildEvent.message}`]);
+                const cancelBtn = document.getElementById('cancelRow');
+                cancelBtn.parentElement.removeChild(cancelBtn);
             }
             else {
-                appendLine(buildEvent.message, buildEvent.type === 'err');
+                appendLines(splitLines(buildEvent.message), buildEvent.type === 'err');
                 scrollToBottom();
             }
         }
@@ -57,5 +78,5 @@ document.addEventListener('DOMContentLoaded', function () {
 
     connect();
     followLogsBtn.checked = false;
-    followLogsBtn.addEventListener('change', scrollToBottom);
+    followLogsBtn.addEventListener('change', handleScrollToggleClick);
 });

src/DB.ts

@@ -24,6 +24,7 @@ interface Build {
     endTime?: Date;
     status: Status;
     pid?: number;
+    sqid?: string;
 }
 
 interface LogChunk {
@@ -48,10 +49,11 @@ class DB {
     private sequelize: Sequelize;
 
     constructor(config: DBConfig = {}) {
-        this.sequelize = new Sequelize(config.db || 'archery', config.user || 'archery', config.password || '', {
+        this.sequelize = new Sequelize(config.db || 'archery', config.user || 'archery', process.env.PASSWORD || config.password || '', {
             host: config.host || 'localhost',
             port: config.port || 5432,
-            dialect: 'postgres'
+            dialect: 'postgres',
+            logging: false
         });
         this.build = this.sequelize.define('builds', {
             id: {
@@ -269,4 +271,4 @@ class DB {
 
 export default DB;
 export { DB };
-export type { DBConfig, Status, Build };
+export type { DBConfig, Status, Build, LogChunk };

src/Web.ts

@@ -4,7 +4,8 @@ import type { Express } from "express";
 import express from 'express';
 import expressWs from "express-ws";
 import bodyParser from "body-parser";
-import type { DB } from "./DB.ts";
+import Sqids from 'sqids';
+import type { DB, LogChunk } from "./DB.ts";
 import type { BuildController, BuildEvent } from "./BuildController.ts";
 
 interface WebConfig {
@@ -29,6 +30,10 @@ function timeElapsed(date1: Date, date2: Date) {
     return `${hours}:${minutes}:${seconds}`;
 }
 
+function splitLines(lines: LogChunk[]) {
+    return lines.map(logChunk => logChunk.chunk.split('\n')).flat().map(line => line.substring(line.lastIndexOf('\r') + 1));
+}
+
 class Web {
     private _webserver: http.Server | null = null;
     private db: DB;
@@ -37,6 +42,10 @@ class Web {
     private port: number;
 
     constructor(options: WebConfig = {}) {
+        const sqids = new Sqids({
+            minLength: 6,
+            alphabet: 'abcdefghijkmnprstuvwxyz'
+        });
         const app: Express = express();
         const wsApp = this.app = expressWs(app).app;
         this.port = notStupidParseInt(process.env.PORT) || options['port'] as number || 8080;
@@ -62,6 +71,9 @@ class Web {
         app.get('/', async (req, res) => {
             try {
                 const builds = 'q' in req.query ? await this.db.searchBuilds(req.query.q as string) : await this.db.getBuildsBy(req.query);
+                builds.forEach(b => {
+                    b.sqid = sqids.encode([b.id]);
+                });
                 res.render('index', {
                     page: {
                         title: 'Archery',
@@ -78,17 +90,19 @@ class Web {
             }
         });
 
-        app.get('/build/?', (_, res) => {
+        app.get('/build{/}', async(req, res) => {
+            const query = ('id' in req.query && typeof req.query.id === 'string' && await this.db.getBuild(sqids.decode(req.query.id)?.[0])) || req.query;
             res.render('build-new', {
                 page: {
                     title: 'Archery',
                     titlesuffix: 'New Build',
-                    description: 'Kick off a build'
-                }
+                    description: 'Kick off a build',
+                },
+                query
             });
         });
 
-        app.post('/build/?', async (req, res) => {
+        app.post('/build{/}', async (req, res) => {
             const buildId = await this.db.createBuild(
                 req.body.repo,
                 req.body.commit || null,
@@ -96,22 +110,23 @@ class Web {
                 req.body.distro || 'arch',
                 req.body.dependencies || 'stable'
             );
-            res.redirect(`/build/${buildId}`);
+            res.redirect(`/build/${sqids.encode([buildId])}`);
             this.buildController.triggerBuild();
         });
 
-        app.get('/build/:num/?', async (req, res) => {
-            const build = await this.db.getBuild(parseInt(req.params.num));
+        app.get('/build/:id{/}', async (req, res) => {
+            const build = await this.db.getBuild(sqids.decode(req.params.id)?.[0]);
             if (!build) {
                 res.sendStatus(404);
                 return;
             }
-            const log = (await this.db.getLog(build.id)).map(logChunk => logChunk.chunk.split('\n')).flat();
+            build.sqid = sqids.encode([build.id]);
+            const log = splitLines(await this.db.getLog(build.id));
 
             res.render('build', {
                 page: {
                     title: 'Archery',
-                    titlesuffix: `Build #${req.params.num}`,
+                    titlesuffix: `Build #${build.id}`,
                     description: `Building ${build.repo} on ${build.distro}`
                 },
                 build,
@@ -120,8 +135,8 @@ class Web {
             });
         });
 
-        app.get('/build/:num/cancel', async (req, res) => {
-            const build = await this.db.getBuild(parseInt(req.params.num));
+        app.get('/build/:id/cancel', async (req, res) => {
+            const build = await this.db.getBuild(sqids.decode(req.params.id)?.[0]);
             if (!build) {
                 res.sendStatus(404);
                 return;
@@ -132,11 +147,11 @@ class Web {
             catch (ex) {
                 console.error(ex);
             }
-            res.redirect(`/build/${build.id}`);
+            res.redirect(`/build/${req.params.id}`);
         });
 
-        app.get('/build/:num/logs/?', async (req, res) => {
-            const build = await this.db.getBuild(parseInt(req.params.num));
+        app.get('/build/:id/logs{/}', async (req, res) => {
+            const build = await this.db.getBuild(sqids.decode(req.params.id)?.[0]);
             if (!build) {
                 res.sendStatus(404);
                 return;
@@ -145,8 +160,8 @@ class Web {
             res.set('Content-Type', 'text/plain').send(log);
         });
 
-        app.get('/build/:num/patch/?', async (req, res) => {
-            const build = await this.db.getBuild(parseInt(req.params.num));
+        app.get('/build/:id/patch{/}', async (req, res) => {
+            const build = await this.db.getBuild(sqids.decode(req.params.id)?.[0]);
             if (!build || !build.patch) {
                 res.sendStatus(404);
                 return;
@@ -158,10 +173,10 @@ class Web {
             res.send('Healthy');
         });
 
-        wsApp.ws('/build/:num/ws', (ws, req) => {
+        wsApp.ws('/build/:id/ws', (ws, req) => {
             console.log('WS Opened');
             const eventListener = (be: BuildEvent) => {
-                if (be.id === notStupidParseInt(req.params.num)) {
+                if (be.id === sqids.decode(req.params.id)?.[0]) {
                     ws.send(JSON.stringify(be));
                 }
             };

src/index.ts

@@ -11,7 +11,7 @@ interface compositeConfig {
     db?: DBConfig
 }
 
-const config: compositeConfig = JSON.parse(await fs.promises.readFile(process.env.config || path.join('config', 'config.json'), 'utf-8'));
+const config: compositeConfig = JSON.parse(await fs.promises.readFile(process.env.config || process.env.CONFIG || path.join('config', 'config.json'), 'utf-8'));
 
 const web = new Web(config.web);
 const buildController = new BuildController();

styles/01-styles.scss

@@ -54,6 +54,7 @@ table {
     background-color: #2a2a2a;
     border-collapse: collapse;
     width: 100%;
+    min-width: 42em;
 }
 
 td,
@@ -120,7 +121,7 @@ input[type="submit"] {
 
 .sidebar {
     background: var(--primary);
-    width: 16em;
+    width: 13rem;
     height: 100%;
     position: fixed;
     top: 0;
@@ -183,7 +184,7 @@ input[type="submit"] {
 }
 
 .content {
-    margin-left: 16em;
+    margin-left: 13rem;
     padding: 1em;
 
     &.no-padding {
@@ -200,6 +201,8 @@ input[type="submit"] {
     display: grid;
     grid-template-columns: auto 1fr;
     gap: .65em;
+    word-break: keep-all;
+    white-space: nowrap;
 
     .span-2 {
         grid-column: span 2;
@@ -207,12 +210,13 @@ input[type="submit"] {
 }
 
 .logs {
+    width: fit-content;
+    min-width: 100%;
     font-family: 'Courier New', monospace;
+    font-size: 0.9em;
     border-left: #d96a14 .2em solid;
     background: #2a2a2a;
     margin-top: 1em;
-    overflow-x: auto;
-    overflow-wrap: anywhere;
 
     p {
         padding: .1em .5em;
@@ -253,10 +257,10 @@ input[type="submit"] {
     right: 1.3em;
     bottom: 1.6em;
     padding: 1em;
-    background-color: rgba(15,15,15,.8);
+    background-color: rgba(15, 15, 15, .8);
     cursor: pointer;
 
     input {
         cursor: inherit;
     }
-}
+}

styles/02-responsive.scss

@@ -15,4 +15,32 @@
     .content {
         margin-left: 0;
     }
+
+    .logs {
+        font-size: 0.75em;
+    }
 }
+
+@media screen and (max-width:28rem) {
+
+    body {
+        font-size: 13pt;
+    }
+
+    .grid-2col {
+        grid-template-columns: 1fr;
+
+        .span-2 {
+            grid-column: initial;
+        }
+
+        &> :nth-last-child(n+2):nth-child(odd) {
+            font-weight: bold;
+            font-size: 1.1em;
+
+            &::after {
+                content: ":";
+            }
+        }
+    }
+}

views/build-new.ejs

@@ -10,19 +10,19 @@
     <div class="content">
         <h1>Start a build</h1>
         <form action="/build" method="post" class="grid-2col">
-            <label for="repoTxt">Repo</label> <input type="text" name="repo" id="repoTxt" required />
-            <label for="commitTxt">Commit</label> <input type="text" name="commit" id="commitTxt" />
-            <label for="patchTxt">Patch</label> <textarea name="patch" id="patchTxt"></textarea>
+            <label for="repoTxt">Repo</label> <input type="text" name="repo" id="repoTxt" required <% if (typeof query.repo === 'string') { %>value="<%= query.repo %>"<% } %> />
+            <label for="commitTxt">Commit</label> <input type="text" name="commit" id="commitTxt" <% if (typeof query.commit === 'string') { %>value="<%= query.commit %>"<% } %> />
+            <label for="patchTxt">Patch</label> <textarea name="patch" id="patchTxt"><% if (typeof query.patch === 'string') { %><%= query.patch %><% } %></textarea>
             <label for="distroTxt">Distro</label>
             <select name="distro" id="distroTxt" required>
-                <option value="arch">Arch</option>
-                <option value="artix">Artix</option>
+                <option value="arch" <% if (query.distro === 'arch') { %>selected<% } %>>Arch</option>
+                <option value="artix" <% if (query.distro === 'artix') { %>selected<% } %>>Artix</option>
             </select>
             <label for="dependsTxt">Dependencies</label>
             <select name="dependencies" id="dependsTxt" required>
-                <option value="stable">Stable</option>
-                <option value="testing">Testing</option>
-                <option value="staging">Staging</option>
+                <option value="stable" <% if (query.dependencies === 'stable') { %>selected<% } %>>Stable</option>
+                <option value="testing" <% if (query.dependencies === 'testing') { %>selected<% } %>>Testing</option>
+                <option value="staging" <% if (query.dependencies === 'staging') { %>selected<% } %>>Staging</option>
             </select>
             <div class="span-2"><button type="submit">Build</button></div>
         </form>

views/build.ejs

@@ -10,25 +10,26 @@
     <div class="content">
         <h1>Build #<%= build.id %></h1>
         <h2 id="buildStatus"><%= build.status %></h2>
-        <div class="grid-2col">
-            <label>Repo</label> <span><%= build.repo %></span>
-            <label>Commit</label> <span><% if (build.commit) { %><%= build.commit %><% } else { %>latest<% } %></span>
-            <label>Patch</label> <span><% if (build.patch) { %><a href="/build/<%= build.id %>/patch">patch file</a><% } else { %>none<% } %></span>
-            <label>Distro</label> <span><%= build.distro %></span>
-            <label>Dependencies</label> <span><%= build.dependencies %></span>
-            <label>Start time</label> <span class="to-local-time"><%= build.startTime %></span>
+        <div class="overflow-x">
+            <div class="grid-2col">
+                <label>Repo</label> <span><%= build.repo %></span>
+                <label>Commit</label> <span><% if (build.commit) { %><%= build.commit %><% } else { %>latest<% } %></span>
+                <label>Patch</label> <span><% if (build.patch) { %><a href="/build/<%= build.sqid %>/patch">patch file</a><% } else { %>none<% } %></span>
+                <label>Distro</label> <span><%= build.distro %></span>
+                <label>Dependencies</label> <span><%= build.dependencies %></span>
+                <label>Start time</label> <span class="to-local-time"><%= build.startTime %></span>
+            </div>
+        </div>
+        <div>
+            <a href="/build?id=<%= build.sqid %>" class="button">Clone</a>
         </div>
         <% if (!ended) { %>
-        <div>
-            <a href="/build/<%= build.id %>/cancel" class="button">Cancel build</a>
+        <div id="cancelRow">
+            <a href="/build/<%= build.sqid %>/cancel" class="button">Cancel build</a>
         </div>
         <% } %>
-        <p><a href="/build/<%= build.id %>/logs">Full logs</a></p>
-        <div class="logs" id="logs">
-            <% (log || []).forEach(line => { %>
-                <p><%= line %></p>
-            <% }) %>
-        </div>
+        <p><a href="/build/<%= build.sqid %>/logs">Full logs</a></p>
+        <pre class="overflow-x"><div class="logs" id="logs"><% (log || []).forEach(line => { %><p><%= line %></p><% }) %></div></pre>
 
         <% if (!ended) { %>
         <label id="followCheckmarkContainer" title="Follow logs">
@@ -39,7 +40,7 @@
     <%- include("footer", locals) %>
     <script src="/assets/js/timezone.js?v1" nonce="<%= cspNonce %>"></script>
     <% if (!ended) { %>
-    <script src="/assets/js/build.js?v1" nonce="<%= cspNonce %>"></script>
+    <script src="/assets/js/build.js?v3" nonce="<%= cspNonce %>"></script>
     <% } %>
 </body>
 </html>

views/footer.ejs

@@ -1,8 +1,9 @@
 <div class="content footer">
     <footer>
         <ul>
+            <li><a href="/">Home</a></li>
             <li>Developed by Cory Sanin</li>
-            <li><a href="https://github.com/CorySanin/archery">Source</a></li>
+            <li><a href="https://git.sanin.dev/corysanin/archery">Source</a></li>
         </ul>
     </footer>
 </div>

views/head.ejs

@@ -14,7 +14,7 @@
 <link rel="canonical" href="<%= page.canonical%>"/>
 <% } %>
 <link rel="shortcut icon" href="/assets/svg/favicon.svg">
-<link rel="stylesheet" href="/assets/css/styles.css?v1">
+<link rel="stylesheet" href="/assets/css/styles.css?v3">
 <script nonce="<%= cspNonce %>">
     document.addEventListener("DOMContentLoaded", function() {
         document.body.classList.remove('preload');

views/index.ejs

@@ -20,7 +20,7 @@
                 </tr>
                 <% builds.forEach(build => { %>
                     <tr>
-                        <td><a href="/build/<%= build.id %>"><%= build.repo %></a></td>
+                        <td><a href="/build/<%= build.sqid %>"><%= build.repo %></a></td>
                         <td><%= build.distro %></td>
                         <td class="to-local-time"><%= build.startTime %></td>
                         <td><%= timeElapsed(build.startTime, build.endTime) %></td>