Users can specify anchors address in ENS

Signed-off-by: Alexis Sellier <self@cloudhead.io>

src/base/projects/Browser.svelte

@@ -27,9 +27,9 @@
   export let config: Config;
   export let path: string;
   export let profile: Profile | null = null;
+  export let anchors: string | null = null;
   export let org: string | null = null;
-
-  const orgAddress = org ?? undefined;
+  export let user: string | null = null;
 
   // When the component is loaded the first time, the blob is yet to be loaded.
   let state: State = { status: Status.Idle };
@@ -61,7 +61,13 @@
     const blob = await loadBlob(path);
     getBlob = new Promise(resolve => resolve(blob));
 
-    navigate(proj.path({ urn, org: orgAddress, commit, path }));
+    if (org) {
+      navigate(proj.path({ urn, org, commit, path }));
+    } else if (user) {
+      navigate(proj.path({ urn, user, commit, path }));
+    } else {
+      navigate(proj.path({ urn, commit, path }));
+    }
   };
 
   const fetchTree = async (path: string) => {
@@ -71,7 +77,7 @@
   // This is reactive to respond to path changes that don't originate from this
   // component, eg. when using the browser's "back" button.
   $: getBlob = loadBlob(path);
-  $: getAnchor = orgAddress ? Org.getAnchor(orgAddress, urn, config) : null;
+  $: getAnchor = anchors ? Org.getAnchor(anchors, urn, config) : null;
   $: loadingPath = state.status == Status.Loading ? state.path : null;
 </script>
 
@@ -244,16 +250,16 @@
   {:then tree}
     <header>
       <div class="commit">
-        commit {commit}
+        {commit}
       </div>
       <div class="anchor">
-        {#if orgAddress}
+        {#if anchors}
           {#await getAnchor}
             <Loading small margins />
           {:then anchor}
             {#if anchor === commit}
               <span class="anchor-widget">
-                <span class="anchor-label" title="{orgAddress}">anchored 🔒</span>
+                <span class="anchor-label" title="{anchors}">anchored 🔒</span>
               </span>
             {:else}
               <span class="anchor-widget not-anchored">

src/base/projects/Routes.svelte

@@ -31,3 +31,17 @@
 <Route path="/orgs/:org/projects/:urn" let:params>
   <View {config} org={params.org} urn={params.urn} path="/" />
 </Route>
+
+<!-- With a User context -->
+
+<Route path="/users/:user/projects/:urn/head/*" let:params>
+  <View {config} user={params.user} urn={params.urn} path={params['*'] || "/"} />
+</Route>
+
+<Route path="/users/:user/projects/:urn/:commit/*" let:params>
+  <View {config} user={params.user} urn={params.urn} commit={params.commit} path={params["*"] || "/"} />
+</Route>
+
+<Route path="/users/:user/projects/:urn" let:params>
+  <View {config} user={params.user} urn={params.urn} path="/" />
+</Route>

src/base/projects/View.svelte

@@ -6,7 +6,7 @@
   import Modal from '@app/Modal.svelte';
   import Avatar from '@app/Avatar.svelte';
   import { Org } from '@app/base/orgs/Org';
-  import type { Profile } from '@app/profile';
+  import { Profile, ProfileType } from '@app/profile';
   import type { Info } from '@app/project';
   import { formatOrg, isAddressEqual } from '@app/utils';
 
@@ -14,6 +14,7 @@
 
   export let urn: string;
   export let org = "";
+  export let user = "";
   export let commit = "";
   export let config: Config;
   export let path: string;
@@ -24,22 +25,24 @@
   let getProject = new Promise<Profile | null>(resolve => {
     if (org) {
       Org.getProjectProfile(org, config).then(p => resolve(p));
+    } else if (user) {
+      Profile.get(user, ProfileType.Project, config).then(p => resolve(p));
     } else {
       resolve(null);
     }
-  }).then(async (orgProfile) => {
-    const seedHost = orgProfile?.seedHost;
-    const seedId = orgProfile?.seedId || undefined;
+  }).then(async (profile) => {
+    const seedHost = profile?.seedHost;
+    const seedId = profile?.seedId || undefined;
     const cfg = seedHost ? config.withSeed(seedHost, seedId) : config;
     const info = await proj.getInfo(urn, cfg);
 
     projectInfo = info;
 
-    return { project: info, config: cfg, org: orgProfile };
+    return { project: info, config: cfg, profile };
   });
 
   const parentUrl = (profile: Profile) => {
-    return org === profile.name || isAddressEqual(org, profile.address)
+    return org
       ? `/orgs/${profile.nameOrAddress}`
       : `/users/${profile.nameOrAddress}`;
   };
@@ -111,9 +114,9 @@
   {:then result}
     <header>
       <div class="title bold">
-        {#if result.org}
-          <a class="org-avatar" title={result.org.nameOrAddress} href={parentUrl(result.org)}>
-            <Avatar source={result.org.avatar || result.org.address} address={result.org.address}/>
+        {#if result.profile}
+          <a class="org-avatar" title={result.profile.nameOrAddress} href={parentUrl(result.profile)}>
+            <Avatar source={result.profile.avatar || result.profile.address} address={result.profile.address}/>
           </a>
           <span class="divider">/</span>
         {/if}
@@ -122,7 +125,9 @@
       <div class="urn">{urn}</div>
       <div class="description">{result.project.meta.description}</div>
     </header>
-    <Browser {urn} {org} profile={result.org} {path}
+    <Browser {urn} {org} {user} {path}
+      anchors={result.profile?.projectAnchors ?? org}
+      profile={result.profile}
       commit={commit || result.project.head}
       config={result.config} />
   {:catch}

src/base/projects/Widget.svelte

@@ -15,7 +15,8 @@
 
   export let project: proj.Project;
   export let config: Config;
-  export let org: string | undefined;
+  export let org: string | undefined = undefined;
+  export let user: string | undefined = undefined;
 
   let state: State = { status: Status.Loading };
   let info: proj.Info | null = null;
@@ -36,6 +37,7 @@
         proj.path({
           urn: project.id,
           org,
+          user,
           commit: project.anchor.stateHash,
         })
       );