Merge pull request #55 from MaddyGuthridge/maddy-fedi-verification

Add support for rel="me" site verification and custom site icons

Author: MaddyGuthridge

src/components/Favicon.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
+  import consts from '$lib/consts';
+
   type Props = {
     path?: string;
   };
 
-  const { path = '/minifolio.png' }: Props = $props();
+  const { path }: Props = $props();
+
+  const actualPath = path ? `/data/${path}` : consts.APP_ICON_URL;
 </script>
 
-<link rel="icon" href={path} />
+<link rel="icon" href={actualPath} />

src/components/markdown/CodeBlock.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import Markdown from './Markdown.svelte';
+
+  type Props = {
+    code: string;
+    language: string;
+  };
+
+  const { code, language }: Props = $props();
+
+  const ticks = '```';
+
+  const source = $derived(`${ticks}${language}\n${code}\n${ticks}`);
+</script>
+
+<Markdown {source} />

src/components/markdown/index.ts

@@ -1,5 +1,6 @@
 export { default as Markdown } from './Markdown.svelte';
 export { default as MarkdownEditor } from './Markdown.svelte';
+export { default as CodeBlock } from './CodeBlock.svelte';
 
 import EditableMarkdown from './EditableMarkdown.svelte';
 

src/lib/consts.ts

@@ -7,6 +7,8 @@ export const APP_NAME = 'Minifolio';
 /** Link to app's GitHub repo */
 export const APP_GITHUB = 'https://github.com/MaddyGuthridge/Minifolio';
 
+export const APP_ICON_URL = '/minifolio.png';
+
 /** Author info -- `[name, URL]` */
 type AuthorInfo = [string, string];
 
@@ -22,6 +24,7 @@ export const EDIT_COMMIT_HESITATION = 1_000;
 export default {
   APP_NAME,
   APP_GITHUB,
+  APP_ICON_URL,
   APP_AUTHOR,
   APP_CONTRIBUTORS,
   EDIT_COMMIT_HESITATION,

src/lib/delayedUpdate.ts

@@ -13,7 +13,7 @@ export default class DelayedUpdater<T> {
   /** Value about to be committed (or `Option.none()` if there are no changes to be committed) */
   current: Option<T>;
 
-  constructor (callback: (value: T) => Promise<void>, hesitation: number) {
+  constructor (callback: (value: T) => Promise<any>, hesitation: number) {
     this.callback = callback;
     this.hesitation = hesitation;
     this.current = Option.none();

src/lib/server/data/config.ts

@@ -1,5 +1,5 @@
 import { readFile, writeFile } from 'fs/promises';
-import { nullable, object, string, validate, type Infer } from 'superstruct';
+import { array, nullable, object, string, validate, type Infer } from 'superstruct';
 import { getDataDir } from './dataDir';
 import { version } from '$app/environment';
 import { unsafeLoadConfig } from './migrations/unsafeLoad';
@@ -11,6 +11,8 @@ const CONFIG_JSON = () => `${getDataDir()}/config.json`;
 export const ConfigJsonStruct = object({
   /** Filename of icon to use for the site */
   siteIcon: nullable(string()),
+  /** Links to place in `<link rel="me" href="{}">` fields */
+  relMe: array(string()),
   /** Version of server that last accessed the config.json */
   version: string(),
 });
@@ -55,6 +57,7 @@ export async function setConfig(newConfig: ConfigJson) {
 export async function initConfig() {
   await setConfig({
     siteIcon: null,
+    relMe: [],
     version,
   });
 }

src/lib/server/data/migrations/v0.6.ts

@@ -72,6 +72,7 @@ async function updatePublicConfig(dataDir: string) {
   const oldConfig: any = await unsafeLoadConfig(dataDir);
   await setConfig({
     version,
+    relMe: [],
     siteIcon: oldConfig.siteIcon,
   });
 }

src/routes/[...item]/+page.svelte

@@ -60,6 +60,9 @@
   />
   <meta name="theme-color" content={data.item.info.color} />
   <Favicon path={data.config.siteIcon ?? undefined} />
+  {#each data.config.relMe as me}
+    <link rel="me" href={me} />
+  {/each}
 </svelte:head>
 
 <Navbar

src/routes/admin/+page.svelte

@@ -9,6 +9,7 @@
   import LogOutAll from './LogOutAll.svelte';
   import KeySettings from './KeySettings.svelte';
   import Favicon from '$components/Favicon.svelte';
+  import PublicConfig from './PublicConfig.svelte';
 
   type Props = {
     data: import('./$types').PageData;
@@ -38,6 +39,7 @@
   <div id="paper-container">
     <Paper>
       <div id="contents">
+        <PublicConfig configJson={data.config} imageFiles={data.portfolio.ls} />
         <GitSettings {data} />
         <KeySettings
           publicKey={data.keys.publicKey}

src/routes/admin/PublicConfig.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { TextArea } from '$components/base';
+  import { CodeBlock } from '$components/markdown';
+  import { FilePicker } from '$components/pickers';
+  import api from '$endpoints';
+  import consts from '$lib/consts';
+  import DelayedUpdater from '$lib/delayedUpdate';
+  import itemId from '$lib/itemId';
+  import type { ConfigJson } from '$lib/server/data/config';
+  import { itemFileUrl } from '$lib/urls';
+
+  type Props = {
+    configJson: ConfigJson;
+    imageFiles: string[];
+  };
+
+  const { configJson, imageFiles }: Props = $props();
+
+  // Yucky work-around to make values update
+  const config = $state(configJson);
+
+  const updater = new DelayedUpdater(
+    async (value: ConfigJson) => api().config.put(value),
+    consts.EDIT_COMMIT_HESITATION,
+  );
+</script>
+
+<div>
+  <h2>Public settings</h2>
+  <form>
+    <div>
+      <label for="site-icon"><h3>Site icon</h3></label>
+      <FilePicker
+        bind:selected={config.siteIcon}
+        files={imageFiles}
+        onchange={() => updater.update(config)}
+      />
+      {#if config.siteIcon}
+        <p>
+          Note: the image may be squashed/stretched by the browser when
+          displayed in the address bar.
+        </p>
+        <div class="site-icon-preview">
+          <img
+            src={itemFileUrl(itemId.ROOT, config.siteIcon)}
+            alt={'Preview of site icon'}
+          />
+        </div>
+      {/if}
+    </div>
+
+    <label for="rel-me"><h3>Verification links</h3></label>
+    <TextArea
+      bind:value={() => config.relMe.join('\n'),
+      (relMe: string) => (config.relMe = relMe.trim().split('\n'))}
+      oninput={() => updater.update(config)}
+    />
+    <p>Place each URL on a separate line.</p>
+    <p>The links will be included as:</p>
+    <CodeBlock
+      language="html"
+      code={config.relMe
+        .map((me) => `<link rel="me" href="${me}" />`)
+        .join('\n')}
+    />
+  </form>
+</div>
+
+<style>
+  .site-icon-preview {
+    aspect-ratio: 1 / 1;
+    max-width: 30%;
+    margin: 10px;
+  }
+  .site-icon-preview > img {
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+  }
+</style>