Add an about page

docs/Deploy.md

@@ -0,0 +1,3 @@
+# Deploying Minifolio
+
+TODO

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "portfolio",
-	"version": "0.0.2",
+	"version": "0.2.0",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

src/components/navbar/Navbar.svelte

@@ -84,6 +84,8 @@
       <!-- Only include a login button if logging in is enabled -->
       <button on:click={() => goto('/admin/login')}> Log in </button>
     {/if}
+    <!-- About button navigates to about page -->
+    <button on:click={() => goto('/about')}> About </button>
     <!-- In dev mode, add a quick shortcut to delete everything -->
     {#if dev}
       <Separator />

src/components/navbar/index.ts

@@ -1 +1,3 @@
-export { default as Navbar } from './Navbar.svelte';
+import Navbar from './Navbar.svelte';
+
+export default Navbar;

src/lib/blankConfig.ts

@@ -0,0 +1,11 @@
+import { version } from '$app/environment';
+import type { ConfigJson } from './server/data/config';
+
+const blankConfig: ConfigJson = {
+  siteName: 'Minifolio',
+  listedGroups: [],
+  color: '#ffaaff',
+  version,
+};
+
+export default blankConfig;

src/lib/server/auth.ts

@@ -5,8 +5,7 @@ import { unixTime } from '$lib/util';
 import { hash } from 'crypto';
 import { generate as generateWords } from 'random-words';
 import { getLocalConfig, setLocalConfig, type ConfigLocalJson } from './data/localConfig';
-import consts from '$lib/consts';
-import { dev } from '$app/environment';
+import { dev, version } from '$app/environment';
 import { error, redirect, type Cookies } from '@sveltejs/kit';
 
 /** Maximum lifetime of a session -- 14 days */
@@ -213,7 +212,7 @@ export async function authSetup(cookies: Cookies): Promise<FirstRunCredentials>
         revokedSessions: {},
       }
     },
-    version: consts.VERSION,
+    version,
   };
 
   await setLocalConfig(config);

src/lib/server/data/config.ts

@@ -1,7 +1,7 @@
 import { readFile, writeFile } from 'fs/promises';
 import { array, object, string, validate, type Infer } from 'superstruct';
 import { getDataDir } from './dataDir';
-import consts from '$lib/consts';
+import { version } from '$app/environment';
 
 /** Path to config.json */
 const CONFIG_JSON = `${getDataDir()}/config.json`;
@@ -53,6 +53,6 @@ export async function initConfig() {
     siteName: 'My portfolio',
     listedGroups: [],
     color: '#ffaaff',
-    version: consts.VERSION,
+    version,
   });
 }

src/routes/about/+page.server.ts

@@ -0,0 +1,43 @@
+import { redirect } from '@sveltejs/kit';
+import { getPortfolioGlobals } from '$lib/server';
+import { isRequestAuthorized } from '$lib/server/auth.js';
+import blankConfig from '$lib/blankConfig.js';
+import type { ConfigJson } from '$lib/server/data/config.js';
+import { version } from '$app/environment';
+import { VERSION as SVELTE_VERSION } from 'svelte/compiler';
+import { VERSION as SVELTEKIT_VERSION } from '@sveltejs/kit';
+import { version as VITE_VERSION } from 'vite';
+import os from 'os';
+
+export async function load(req) {
+  // If config fails to load (eg firstrun), just give a blank config
+  let config: ConfigJson;
+  let isInit = true;
+  try {
+    const globals = await getPortfolioGlobals();
+    config = globals.config;
+  } catch {
+    isInit = false;
+    config = blankConfig;
+  }
+
+  const loggedIn = isInit ? await isRequestAuthorized(req) : undefined;
+
+  let versions = null;
+  if (!isInit || loggedIn) {
+    versions = {
+      minifolio: version,
+      node: process.version,
+      svelte: SVELTE_VERSION,
+      sveltekit: SVELTEKIT_VERSION,
+      vite: VITE_VERSION,
+      os: `${os.platform()} ${os.release()}`
+    };
+  }
+
+  return {
+    config,
+    loggedIn,
+    versions,
+  };
+}

src/routes/about/+page.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+import Background from '$components/Background.svelte';
+import Markdown from '$components/markdown/Markdown.svelte';
+import Navbar from '$components/navbar';
+
+export let data: import('./$types').PageData;
+
+const mainInfo = `
+# Minifolio
+
+This portfolio website is driven by Minifolio, a
+[free and open-source](https://en.wikipedia.org/wiki/Free_and_open-source_software)
+data-driven portfolio system made with <3 by [Maddy Guthridge](https://maddyguthridge.com).
+
+* [View the source code on GitHub](https://github.com/MaddyGuthridge/Minifolio).
+* [Learn how to deploy your own instance of Minifolio](https://github.com/MaddyGuthridge/Minifolio/blob/main/docs/Deploy.md).
+* [View the GPLv3 software license for Minifolio](https://github.com/MaddyGuthridge/Minifolio/blob/main/LICENSE.md).
+`;
+
+let technicalDetails = '';
+if (data.versions) {
+  technicalDetails = `
+
+## Technical details
+
+For security reasons, these details are only shown if you are logged in.
+
+* Minifolio: v${data.versions.minifolio}
+* Node: ${data.versions.node}
+* Svelte: v${data.versions.svelte}
+* Sveltekit: v${data.versions.sveltekit}
+* Vite: v${data.versions.vite}
+* OS: ${data.versions.os}
+`;
+}
+
+const readme = mainInfo + technicalDetails;
+</script>
+
+<Navbar
+  config={data.config}
+  loggedIn={data.loggedIn}
+  path={[
+    { txt: 'About', url: 'about' },
+  ]}
+/>
+
+<Background color={data.config.color} />
+
+<main>
+  <div>
+    <Markdown source={readme} />
+  </div>
+</main>
+
+<style>
+  main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  main > div {
+    min-width: 80%;
+  }
+</style>

src/routes/admin/firstrun/+page.svelte

@@ -7,6 +7,8 @@
   import Modal from '$components/modals/Modal.svelte';
   import type { FirstRunCredentials } from '$lib/server/auth';
   import { goto } from '$app/navigation';
+  import Navbar from '$components/navbar';
+  import blankConfig from '$lib/blankConfig';
 
   let repoUrl = '';
   let repoBranch = '';
@@ -51,10 +53,10 @@
   let errorText = '';
 </script>
 
-<h1>Maddyfolio</h1>
-
 <Background color="#aa00aa"></Background>
 
+<Navbar config={blankConfig} loggedIn={undefined} path={[]} />
+
 <div class="center">
   <Paper>
     <main>

src/routes/api/admin/config/+server.ts

@@ -2,7 +2,7 @@ import { error, json } from '@sveltejs/kit';
 import { validateToken, validateTokenFromRequest } from '$lib/server/auth.js';
 import { ConfigJsonStruct, setConfig } from '$lib/server/data/config.js';
 import { validate } from 'superstruct';
-import consts from '$lib/consts.js';
+import { version } from '$app/environment';
 import { getPortfolioGlobals, invalidatePortfolioGlobals } from '$lib/server/data/index.js';
 
 export async function GET({ request, cookies }) {
@@ -28,10 +28,10 @@ export async function PUT({ request, cookies }) {
     return error(400, `${err}`);
   }
 
-  if (newConfig.version !== consts.VERSION) {
+  if (newConfig.version !== version) {
     return error(
       400,
-      `New version (${newConfig.version}) doesn't match server version (${consts.VERSION})`
+      `New version (${newConfig.version}) doesn't match server version (${version})`
     );
   }
 

svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-node';
+import adapterNode from '@sveltejs/adapter-node';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
@@ -15,10 +15,14 @@ const config = {
 			"$components": "src/components/",
 			"$endpoints": "src/endpoints",
 		},
+		// https://stackoverflow.com/a/75438617/6335363
+		version: {
+			name: process.env.npm_package_version,
+		},
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
+		adapter: adapterNode(),
 	}
 };
 

tests/backend/admin/config/get.test.ts

@@ -6,7 +6,7 @@
 import { type ApiClient } from '$endpoints';
 import { beforeEach, expect, it } from 'vitest';
 import { setup } from '../../helpers';
-import consts from '$lib/consts';
+import { version } from '$app/environment';
 
 let api: ApiClient;
 
@@ -19,7 +19,7 @@ it('Returns the current config contents', async () => {
     siteName: 'My portfolio',
     listedGroups: [],
     color: expect.any(String),
-    version: consts.VERSION,
+    version,
   });
 });
 

tests/backend/admin/config/put.test.ts

@@ -5,7 +5,7 @@
  */
 import { beforeEach, expect, it } from 'vitest';
 import { setup } from '../../helpers';
-import consts from '$lib/consts';
+import { version } from '$app/environment';
 import type { ApiClient } from '$endpoints';
 
 let api: ApiClient;
@@ -19,14 +19,14 @@ it('Updates the current config contents', async () => {
     siteName: 'Name changed',
     listedGroups: [],
     color: '#ffaaff',
-    version: consts.VERSION,
+    version,
   })).resolves.toStrictEqual({});
   // Config should have updated
   await expect(api.admin.config.get()).resolves.toStrictEqual({
     siteName: 'Name changed',
     listedGroups: [],
     color: '#ffaaff',
-    version: consts.VERSION,
+    version,
   });
 });
 
@@ -35,7 +35,7 @@ it('Errors if the new config has an incorrect version', async () => {
     siteName: 'Name changed',
     listedGroups: [],
     color: '#ffaaff',
-    version: consts.VERSION + 'invalid',
+    version: version + 'invalid',
   })).rejects.toMatchObject({ code: 400 });
 });
 
@@ -44,7 +44,7 @@ it('Errors if the new config has references a non-existent page group', async ()
     siteName: 'Name changed',
     listedGroups: ['invalid'],
     color: '#ffaaff',
-    version: consts.VERSION,
+    version,
   })).rejects.toMatchObject({ code: 400 });
 });
 
@@ -54,7 +54,7 @@ it('Can set pages as a main page group', async () => {
     siteName: 'Name changed',
     listedGroups: ['my-group'],
     color: '#ffaaff',
-    version: consts.VERSION,
+    version,
   })).resolves.toStrictEqual({});
   // Config should have updated
   await expect(api.admin.config.get())
@@ -66,7 +66,7 @@ it('Rejects invalid tokens', async () => {
     siteName: 'Name changed',
     listedGroups: [],
     color: '#ffaaff',
-    version: consts.VERSION,
+    version,
   })).rejects.toMatchObject({ code: 401 });
 });
 
@@ -76,6 +76,6 @@ it('Errors if site is not set up', async () => {
     siteName: 'Name changed',
     listedGroups: [],
     color: '#ffaaff',
-    version: consts.VERSION,
+    version,
   })).rejects.toMatchObject({ code: 400 });
 });

tests/backend/admin/firstrun.test.ts

@@ -7,7 +7,7 @@ import { it, test, describe, expect, vi, beforeEach } from 'vitest';
 import simpleGit, { CheckRepoActions } from 'simple-git';
 import { readFile } from 'node:fs/promises';
 import path from 'node:path';
-import consts from '$lib/consts';
+import { version } from '$app/environment';
 import type { FirstRunCredentials } from '$lib/server/auth';
 
 // Git clone takes a while, increase the test timeout
@@ -107,7 +107,7 @@ describe('Sets up required starting files', () => {
           revokedSessions: {},
         },
       },
-      version: consts.VERSION,
+      version,
     });
   });