Merge pull request #176 from earthstar-project/self-contained-previews

Self contained previews

Author: AljoschaMeyer

macromania_temporary_monorepo/macromania_defref/mod.tsx

@@ -1,6 +1,8 @@
 import { getNameAndDebug } from "../macromania_names_id/mod.tsx";
 import {
   addName,
+  Config,
+  ConfigWebserverRoot,
   dependencyJs,
   hrefToName,
   IdA,
@@ -1049,7 +1051,7 @@ function mathLink(
   }
 
   let exp = <MHref url={url} children={children} />;
-  
+
   // The following line causes a parsing error when the `data` contains an equals sign (`=`), and there seems to be no way to escape it.
   // exp = data === undefined ? exp : <MData data={data}>{exp}</MData>;
 
@@ -1086,11 +1088,15 @@ function addDataAttributes(
     previewPath.push(finalComponent);
 
     data["tooltip-anchor"] = (
-      <impure
-        fun={(ctx) => {
-          return hrefTo(ctx, absoluteOutFsPath(previewPath));
-        }}
-      />
+      // <Config
+      //   options={[<ConfigWebserverRoot linkType="absolute" alwaysUseDomain />]}
+      // >
+        <impure
+          fun={(ctx) => {
+            return hrefTo(ctx, absoluteOutFsPath(previewPath));
+          }}
+        />
+      // </Config>
     );
   }
 

macromania_temporary_monorepo/macromania_previews/mod.tsx

@@ -143,7 +143,7 @@ export function PreviewScope(
   function post(ctx: Context) {
     setState(ctx, previousState);
 
-    // Any css and js dependencies that got registered in this preview scope should also be registered in the parent scope (which will transitievly extend to all ancestors).
+    // Any css and js dependencies that got registered in this preview scope should also be registered in the parent scope (which will transitively extend to all ancestors).
     for (const cssDep of myState.cssDeps) {
       if (previousState && previousState.cssDeps.indexOf(cssDep) === -1) {
         previousState.cssDeps.push(cssDep);
@@ -246,13 +246,17 @@ export function PreviewScope(
   }
 
   return (
-    <lifecycle pre={pre} post={post}>
-      <Config options={[<ConfigWebserverRoot linkType="absolute" />]}>
+    <Config
+      options={[
+        <ConfigWebserverRoot linkType="absolute" alwaysUseDomain />,
+      ]}
+    >
+      <lifecycle pre={pre} post={post}>
         <map fun={createPreviews}>
           <exps x={children} />
         </map>
-      </Config>
-    </lifecycle>
+      </lifecycle>
+    </Config>
   );
 }
 

macromania_temporary_monorepo/macromania_webserverroot/mod.tsx

@@ -26,14 +26,18 @@ export type WebserverRootConfig = {
    * absolute links, or to always choose the shorter link (default).
    */
   linkType: "relative" | "absolute" | "shorter";
+  /**
+   * Whether to include the domain even when creating a link within the same page. Defaults to false.
+   */
+  alwaysUseDomain?: boolean;
 };
 
 const [getConfig, ConfigWebserverRoot] = createConfigOptions<
   WebserverRootConfig,
   WebserverRootConfig
 >(
   "ConfigWebserverRoot",
-  () => ({ linkType: "shorter" }),
+  () => ({ linkType: "shorter", alwaysUseDomain: false }),
   (old, update) => update,
 );
 export { ConfigWebserverRoot };
@@ -210,33 +214,42 @@ export function hrefTo(ctx: Context, target: OutFsPath): string {
   const targetAbsolutePath = resolveRelativePath(ctx, target).components;
 
   if (
+    !config.alwaysUseDomain &&
     currentServerUrl === nullableInfoToUrl(targetInfo) &&
     JSON.stringify(currentAbsolutePath) ===
       JSON.stringify(targetAbsolutePath)
   ) {
     return ``;
   }
 
-  if (linkType === "absolute") {
-    return absoluteHref(targetInfo, targetAbsolutePath, currentServerUrl);
+  if (linkType === "absolute" || !!config.alwaysUseDomain) {
+    return absoluteHref(
+      targetInfo,
+      targetAbsolutePath,
+      currentServerUrl,
+      !!config.alwaysUseDomain,
+    );
   } else if (linkType === "relative") {
     return relativeHref(
       targetInfo,
       targetAbsolutePath,
       currentServerUrl,
       currentAbsolutePath,
+      !!config.alwaysUseDomain,
     );
   } else {
     const absolute = absoluteHref(
       targetInfo,
       targetAbsolutePath,
       currentServerUrl,
+      !!config.alwaysUseDomain,
     );
     const relative = relativeHref(
       targetInfo,
       targetAbsolutePath,
       currentServerUrl,
       currentAbsolutePath,
+      !!config.alwaysUseDomain,
     );
 
     return absolute.length < relative.length ? absolute : relative;
@@ -247,6 +260,7 @@ function absoluteHref(
   targetInfo: ServerInfo | null,
   targetAbsolutePath: string[],
   currentServerUrl: string | null,
+  alwaysUseDomain: boolean,
 ): string {
   const targetUrl = nullableInfoToUrl(targetInfo);
 
@@ -255,7 +269,7 @@ function absoluteHref(
     : targetAbsolutePath;
 
   if (
-    targetUrl === currentServerUrl || targetUrl === null
+    (targetUrl === currentServerUrl && !alwaysUseDomain) || targetUrl === null
   ) {
     return `${join("/", ...sliced)}`;
   } else {
@@ -280,11 +294,17 @@ function relativeHref(
   targetAbsolutePath: string[],
   currentServerUrl: string | null,
   currentAbsolutePath: string[],
+  alwaysUseDomain: boolean,
 ): string {
   const targetUrl = nullableInfoToUrl(targetInfo);
 
   if (targetUrl !== currentServerUrl) {
-    return absoluteHref(targetInfo, targetAbsolutePath, currentServerUrl);
+    return absoluteHref(
+      targetInfo,
+      targetAbsolutePath,
+      currentServerUrl,
+      alwaysUseDomain,
+    );
   }
 
   return `${

src/main.tsx

@@ -7,6 +7,7 @@ import { data_model } from "./pages/specs/data_model.tsx";
 import { willow25 } from "./pages/specs/willow25.tsx";
 import { e2e } from "./pages/specs/e2e.tsx";
 import { rbsr } from "./pages/specs/rbsr.tsx";
+import { uris } from "./pages/specs/uris.tsx";
 import { confidential_sync } from "./pages/specs/confidential_sync.tsx";
 import { drop_format } from "./pages/specs/drop_format.tsx";
 import { grouping_entries } from "./pages/specs/grouping_entries.tsx";
@@ -113,7 +114,7 @@ const exp = (
 
     <Dir name="build">
       <ServerOptimisations>
-        <ServerRoot url="">
+        <ServerRoot url="https://willowprotocol.org/">
           <Dir name="assets">
             {/* See https://github.com/worm-blossom/macromania-assets */}
             <Assets
@@ -210,6 +211,7 @@ const exp = (
                 {e2e}
                 {meadowcap}
                 {encodings}
+                {uris}
                 {drop_format}
                 {confidential_sync}
                 {rbsr}