Initial attempt to fix #560

lib/web.ts

@@ -33,3 +33,9 @@ export type ActionButton = {
 export type EmojiConfig = {
   aliases: string[][];
 };
+
+export type Decoration = {
+  tag: string;
+  prefix: string;
+};
+

plugs/editor/complete.ts

@@ -7,9 +7,15 @@ import {
 import { cacheFileListing } from "../federation/federation.ts";
 import { queryObjects } from "../index/plug_api.ts";
 import { folderName } from "$sb/lib/resolve.ts";
+import { readSetting } from "$sb/lib/settings_page.ts";
+import type { Decoration } from "$lib/web.ts";
+
+let decorations: Decoration[] = [];
 
 // Completion
 export async function pageComplete(completeEvent: CompleteEvent) {
+  updateDecoratorConfig();
+
   // Try to match [[wikilink]]
   let isWikilink = true;
   let match = /\[\[([^\]@$#:\{}]*)$/.exec(completeEvent.linePrefix);
@@ -79,10 +85,19 @@ export async function pageComplete(completeEvent: CompleteEvent) {
     from: completeEvent.pos - match[1].length,
     options: allPages.map((pageMeta) => {
       const completions: any[] = [];
+      let namePrefix = "";
+      const decor = decorations?.filter(d => pageMeta.tags?.some((t: any) => d.tag === t));
+      if (decor === undefined || decor.length == 0) {
+        namePrefix = "";
+      } else {
+        namePrefix = decor[0].prefix;
+      }
       if (isWikilink) {
         if (pageMeta.displayName) {
+          const decoratedName = namePrefix + pageMeta.displayName;
           completions.push({
             label: `${pageMeta.displayName}`,
+            displayLabel: `${decoratedName}`,
             boost: new Date(pageMeta.lastModified).getTime(),
             apply: pageMeta.tag === "template"
               ? pageMeta.name
@@ -93,8 +108,10 @@ export async function pageComplete(completeEvent: CompleteEvent) {
         }
         if (Array.isArray(pageMeta.aliases)) {
           for (const alias of pageMeta.aliases) {
+            const decoratedName = namePrefix + alias;
             completions.push({
               label: `${alias}`,
+              displayLabel: `${decoratedName}`,
               boost: new Date(pageMeta.lastModified).getTime(),
               apply: pageMeta.tag === "template"
                 ? pageMeta.name
@@ -104,8 +121,10 @@ export async function pageComplete(completeEvent: CompleteEvent) {
             });
           }
         }
+        const decoratedName = namePrefix + pageMeta.name;
         completions.push({
           label: `${pageMeta.name}`,
+          displayLabel: `${decoratedName}`,
           boost: new Date(pageMeta.lastModified).getTime(),
           type: "page",
         });
@@ -132,6 +151,7 @@ export async function pageComplete(completeEvent: CompleteEvent) {
   };
 }
 
+
 function fileMetaToPageMeta(fileMeta: FileMeta): PageMeta {
   const name = fileMeta.name.substring(0, fileMeta.name.length - 3);
   return {
@@ -143,3 +163,17 @@ function fileMetaToPageMeta(fileMeta: FileMeta): PageMeta {
     lastModified: new Date(fileMeta.lastModified).toISOString(),
   } as PageMeta;
 }
+
+let lastConfigUpdate = 0;
+
+async function updateDecoratorConfig() {
+  // Update at most every 5 seconds
+  if (Date.now() < lastConfigUpdate + 5000) return;
+  lastConfigUpdate = Date.now();
+  const decoratorConfig = await readSetting("decorations");
+  if (!decoratorConfig) {
+    return;
+  }
+
+  decorations = decoratorConfig;
+}

plugs/markdown/markdown_render.ts

@@ -10,6 +10,7 @@ import {
 import { encodePageRef, parsePageRef } from "$sb/lib/page_ref.ts";
 import { Fragment, renderHtml, Tag } from "./html_render.ts";
 import { isLocalPath } from "$sb/lib/resolve.ts";
+import { PageMeta } from "$sb/types.ts";
 
 export type MarkdownRenderOptions = {
   failOnUnknown?: true;
@@ -554,25 +555,34 @@ function traverseTag(
 export function renderMarkdownToHtml(
   t: ParseTree,
   options: MarkdownRenderOptions = {},
+  allPages: PageMeta[] = [],
 ) {
   preprocess(t);
   const htmlTree = posPreservingRender(t, options);
-  if (htmlTree && options.translateUrls) {
+  if (htmlTree) {
     traverseTag(htmlTree, (t) => {
       if (typeof t === "string") {
         return;
       }
-      if (t.name === "img") {
+      if (t.name === "img" && options.translateUrls) {
         t.attrs!.src = options.translateUrls!(t.attrs!.src!, "image");
       }
 
       if (t.name === "a" && t.attrs!.href) {
-        t.attrs!.href = options.translateUrls!(t.attrs!.href, "link");
+        if (options.translateUrls) {
+          t.attrs!.href = options.translateUrls!(t.attrs!.href, "link");
+        }
+        if (t.attrs!["data-ref"]?.length) {
+          const pageMeta = allPages.filter(p => t.attrs!["data-ref"]!.startsWith(p.name));
+          if (pageMeta) {
+            t.body = [(pageMeta[0]?.namePrefix ?? "") + t.body]
+          }
+        }
         if (t.body.length === 0) {
           t.body = [t.attrs!.href];
         }
       }
     });
-  }
+  } 
   return renderHtml(htmlTree);
 }

type/web.ts

@@ -5,6 +5,7 @@ import { defaultSettings } from "$common/settings.ts";
 import {
   ActionButton,
   EmojiConfig,
+  Decoration,
   FilterOption,
   Notification,
   PanelMode,
@@ -23,6 +24,7 @@ export type BuiltinSettings = {
   // Format: compatible with docker ignore
   spaceIgnore?: string;
   emoji?: EmojiConfig;
+  decorations?: Decoration[];
 };
 
 export type PanelConfig = {
@@ -79,6 +81,7 @@ export type AppViewState = {
   showConfirm: boolean;
   confirmMessage?: string;
   confirmCallback?: (value: boolean) => void;
+
 };
 
 export const initialViewState: AppViewState = {

web/cm_plugins/markdown_widget.ts

@@ -93,7 +93,7 @@ export class MarkdownWidget extends WidgetType {
       extendedMarkdownLanguage,
       trimmedMarkdown,
     );
-
+    
     const html = renderMarkdownToHtml(mdTree, {
       // Annotate every element with its position so we can use it to put
       // the cursor there when the user clicks on the table.
@@ -109,7 +109,7 @@ export class MarkdownWidget extends WidgetType {
         return url;
       },
       preserveAttributes: true,
-    });
+    }, this.client.ui.viewState.allPages);
 
     if (cachedHtml === html) {
       // HTML still same as in cache, no need to re-render

web/cm_plugins/wiki_link.ts

@@ -67,9 +67,9 @@ export function cleanWikiLinkPlugin(client: Client) {
           }
           return;
         }
-
+        const pageMeta = client.ui.viewState.allPages.filter(p => p.name == url);
         const linkText = alias ||
-          (url.includes("/") ? url.split("/").pop()! : url);
+          (pageMeta[0]?.namePrefix ?? "") + (url.includes("/") ? url.split("/").pop()! : url);
 
         // And replace it with a widget
         widgets.push(

web/components/page_navigator.tsx

@@ -1,5 +1,5 @@
 import { FilterList } from "./filter.tsx";
-import { FilterOption } from "$lib/web.ts";
+import { FilterOption, Decoration } from "$lib/web.ts";
 import { CompletionContext, CompletionResult } from "@codemirror/autocomplete";
 import { PageMeta } from "../../plug-api/types.ts";
 import { isFederationPath } from "$sb/lib/resolve.ts";
@@ -65,6 +65,7 @@ export function PageNavigator({
       }
       options.push({
         ...pageMeta,
+        name: (pageMeta.namePrefix ?? "") + pageMeta.name,
         description,
         orderId: orderId,
       });

web/components/top_bar.tsx

@@ -30,6 +30,7 @@ export function TopBar({
   lhs,
   onClick,
   rhs,
+  pageNamePrefix,
 }: {
   pageName?: string;
   unsavedChanges: boolean;
@@ -46,6 +47,7 @@ export function TopBar({
   actionButtons: ActionButton[];
   lhs?: ComponentChildren;
   rhs?: ComponentChildren;
+  pageNamePrefix?: string;
 }) {
   return (
     <div
@@ -57,6 +59,7 @@ export function TopBar({
       <div className="main">
         <div className="inner">
           <div className="wrapper">
+          <div className="sb-page-prefix">{pageNamePrefix}</div>
             <span
               id="sb-current-page"
               className={isLoading

web/editor_ui.tsx

@@ -283,6 +283,7 @@ export class MainUI {
               style={{ flex: viewState.panels.lhs.mode }}
             />
           )}
+          pageNamePrefix={viewState.currentPageMeta?.namePrefix ?? ""}
         />
         <div id="sb-main">
           {!!viewState.panels.lhs.mode && (

web/reducer.ts

@@ -1,4 +1,6 @@
+import { PageMeta } from "../plug-api/types.ts";
 import { Action, AppViewState } from "../type/web.ts";
+import { PageState } from "./navigator.ts";
 
 export default function reducer(
   state: AppViewState,
@@ -20,6 +22,13 @@ export default function reducer(
       };
     case "page-loaded": {
       const mouseDetected = window.matchMedia("(any-pointer:fine)").matches;
+      const pageMeta = state.allPages.filter(p => p.name == action.meta.name);
+      const decor = state.settings.decorations?.filter(d => pageMeta[0]?.tags?.some(t => d.tag === t));
+      if (decor === undefined || decor.length == 0) {
+        // Do nothing
+      } else {
+        action.meta.namePrefix = decor[0].prefix;
+      }
       return {
         ...state,
         isLoading: false,
@@ -58,16 +67,31 @@ export default function reducer(
       const oldPageMeta = new Map(
         [...state.allPages].map((pm) => [pm.name, pm]),
       );
+      let currPageMeta = oldPageMeta.get(state.currentPage!);
+      if (currPageMeta === undefined) {
+        currPageMeta = {} as PageMeta;
+      }
       for (const pageMeta of action.allPages) {
         const oldPageMetaItem = oldPageMeta.get(pageMeta.name);
         if (oldPageMetaItem && oldPageMetaItem.lastOpened) {
           pageMeta.lastOpened = oldPageMetaItem.lastOpened;
         }
+        let namePrefix = "";
+        const decor = state.settings.decorations?.filter(d => pageMeta.tags?.some((t: any) => d.tag === t));
+        if (decor === undefined || decor.length == 0) {
+          namePrefix = "";
+        } else {
+          namePrefix = decor[0].prefix;
+        }
+        pageMeta.namePrefix = namePrefix;
+        if (pageMeta.name === state.currentPage) {
+          currPageMeta!.namePrefix = namePrefix;
+        }
       }
-
       return {
         ...state,
         allPages: action.allPages,
+        currentPageMeta: currPageMeta,
       };
     }
     case "start-navigate": {

web/styles/main.scss

@@ -207,6 +207,16 @@ body {
   }
 }
 
+.sb-page-prefix {
+  display: flex;
+  align-items: baseline;
+  flex: 0 0 auto;
+  text-align: left;
+  padding: 1px;
+  margin-right: 3px;
+  font-family: var(--ui-font);
+}
+
 .sb-panel {
   iframe {
     background-color: var(--root-background-color);