Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Allow browsing projects my HEAD
Alexis Sellier committed 4 years ago
commit c76e42d49331b55aae6947b962bbd072ed026754
parent 9d557eacb9f17446adcdb529c67b6911c74d1c54
4 files changed +127 -88
added src/base/projects/Browser.svelte
@@ -0,0 +1,94 @@
+ 
<script lang="typescript">
+ 
  import { onMount } from 'svelte';
+ 
  import { navigate } from 'svelte-routing';
+ 
  import type { Config } from '@app/config';
+ 
  import * as proj from '@app/project';
+ 
  import Loading from '@app/Loading.svelte';
+
+ 
  import Tree from './Tree.svelte';
+ 
  import Blob from './Blob.svelte';
+
+ 
  export let urn: string;
+ 
  export let commit: string;
+ 
  export let config: Config;
+ 
  export let path: string;
+
+ 
  let info: "loading" | proj.Info | null = null;
+ 
  let blob: Promise<proj.Blob | null> | null = null;
+
+ 
  const fetchTree = async (path: string) => {
+ 
    return proj.getTree(urn, commit, path, config);
+ 
  };
+
+ 
  const onSelect = async ({ detail: path }: { detail: string }) => {
+ 
    navigate(`/projects/${urn}/${commit}/${path}`);
+ 
  };
+
+ 
  $: if (path === "/") {
+ 
    blob = proj.getReadme(urn, commit, config);
+ 
  } else {
+ 
    blob = proj.getBlob(urn, commit, path, config);
+ 
  }
+ 
</script>
+
+ 
<style>
+ 
  .center-content {
+ 
    margin: 0 auto;
+ 
    max-width: var(--content-max-width);
+ 
    min-width: var(--content-min-width);
+ 
  }
+
+ 
  .container {
+ 
    display: flex;
+ 
    width: inherit;
+ 
    margin-bottom: 4rem;
+ 
    padding: 0 2rem 0 8rem;
+ 
  }
+
+ 
  .column-left {
+ 
    display: flex;
+ 
    flex-direction: column;
+ 
    padding-right: 1rem;
+ 
  }
+
+ 
  .column-right {
+ 
    display: flex;
+ 
    flex-direction: column;
+ 
    padding-left: 1rem;
+ 
    min-width: var(--content-min-width);
+ 
    width: 100%;
+ 
  }
+
+ 
  .source-tree {
+ 
    overflow-x: auto;
+ 
  }
+ 
</style>
+
+ 
<div class="container center-content">
+ 
  {#if commit}
+ 
    <div class="column-left">
+ 
      <div class="source-tree">
+ 
        {#await proj.getTree(urn, commit, "/", config)}
+ 
          Loading..
+ 
        {:then tree}
+ 
          <Tree {tree} {path} {fetchTree} on:select={onSelect} />
+ 
        {:catch err}
+ 
          {err}
+ 
        {/await}
+ 
      </div>
+ 
    </div>
+ 
    <div class="column-right">
+ 
      {#await blob}
+ 
        <Loading small center />
+ 
      {:then blob}
+ 
        {#if blob}
+ 
          <Blob {blob} />
+ 
        {:else}
+ 
          <!-- Project has no README -->
+ 
        {/if}
+ 
      {:catch}
+ 
        <!-- TODO: Handle error -->
+ 
      {/await}
+ 
    </div>
+ 
  {/if}
+ 
</div>
modified src/base/projects/Routes.svelte
@@ -17,3 +17,7 @@
<Route path="/projects/:urn/:commit" let:params>

  <View {config} urn={params.urn} commit={params.commit} path="/" />

</Route>
+
+ 
<Route path="/projects/:urn" let:params>
+ 
  <View {config} urn={params.urn} commit={null} path="/" />
+ 
</Route>
modified src/base/projects/View.svelte
@@ -5,35 +5,23 @@
  import * as proj from '@app/project';

  import Loading from '@app/Loading.svelte';
- 
  import Tree from './Tree.svelte';
- 
  import Blob from './Blob.svelte';
+ 
  import Browser from './Browser.svelte';
+
+ 
  enum State {
+ 
    Loading,
+ 
  };



  export let urn: string;
- 
  export let commit: string;
+ 
  export let commit: string | null;

  export let config: Config;

  export let path: string;
- 
  let meta: "loading" | proj.Meta | null = null;
- 
  let blob: Promise<proj.Blob | null> | null = null;
-
- 
  const fetchTree = async (path: string) => {
- 
    return proj.getTree(urn, commit, path, config);
- 
  };
-
- 
  const onSelect = async ({ detail: path }: { detail: string }) => {
- 
    navigate(`/projects/${urn}/${commit}/${path}`);
- 
  };
+ 
  let project: State.Loading | proj.Info | null = null;



  onMount(async () => {
- 
    meta = "loading";
- 
    meta = await proj.getMetadata(urn, config);
+ 
    project = State.Loading;
+ 
    project = await proj.getInfo(urn, config);

  });
-
- 
  $: if (path === "/") {
- 
    blob = proj.getReadme(urn, commit, config);
- 
  } else {
- 
    blob = proj.getBlob(urn, commit, path, config);
- 
  }

</script>



<style>
@@ -68,76 +56,24 @@
  .description {

    margin: 1rem 0 1.5rem 0;

  }
-
- 
  .center-content {
- 
    margin: 0 auto;
- 
    max-width: var(--content-max-width);
- 
    min-width: var(--content-min-width);
- 
  }
-
- 
  .container {
- 
    display: flex;
- 
    width: inherit;
- 
    margin-bottom: 4rem;
- 
    padding: 0 2rem 0 8rem;
- 
  }
-
- 
  .column-left {
- 
    display: flex;
- 
    flex-direction: column;
- 
    padding-right: 1rem;
- 
  }
-
- 
  .column-right {
- 
    display: flex;
- 
    flex-direction: column;
- 
    padding-left: 1rem;
- 
    min-width: var(--content-min-width);
- 
    width: 100%;
- 
  }
-
- 
  .source-tree {
- 
    overflow-x: auto;
- 
  }

</style>



<main>
- 
  <header>
- 
    {#if meta === "loading"}
+ 
  {#if project === State.Loading}
+ 
    <header>

      <Loading small />
- 
    {:else if meta}
- 
      <div class="title bold">{meta.name}</div>
+ 
    </header>
+ 
  {:else if project}
+ 
    <header>
+ 
      <div class="title bold">{project.meta.name}</div>

      <div class="urn">{urn}</div>
- 
      <div class="description">{meta.description}</div>
- 
    {/if}
- 
    <div class="anchor">
- 
      commit {commit}
- 
    </div>
- 
  </header>
- 
  <div class="container center-content">
- 
    <div class="column-left">
- 
      <div class="source-tree">
- 
        {#await proj.getTree(urn, commit, "/", config)}
- 
          Loading..
- 
        {:then tree}
- 
          <Tree {tree} {path} {fetchTree} on:select={onSelect} />
- 
        {:catch err}
- 
          {err}
- 
        {/await}
+ 
      <div class="description">{project.meta.description}</div>
+ 
      <div class="anchor">
+ 
        commit {commit || project.head}

      </div>
- 
    </div>
- 
    <div class="column-right">
- 
      {#await blob}
- 
        <Loading small center />
- 
      {:then blob}
- 
        {#if blob}
- 
          <Blob {blob} />
- 
        {:else}
- 
          <!-- Project has no README -->
- 
        {/if}
- 
      {:catch}
- 
        <!-- TODO: Handle error -->
- 
      {/await}
- 
    </div>
- 
  </div>
+ 
    </header>
+ 
    <Browser {urn} commit={commit || project.head} {path} {config} />
+ 
  {:else}
+ 
    <!-- Not found -->
+ 
  {/if}

</main>
modified src/project.ts
@@ -10,6 +10,11 @@ export interface Project {
  };

}
+ 
export interface Info {
+ 
  head: string;
+ 
  meta: Meta;
+ 
}
+ 


export interface Meta {

  name: string;

  description: string;
@@ -61,7 +66,7 @@ export interface Tree {
  path: string;

}
- 
export async function getMetadata(urn: string, config: Config): Promise<Meta | null> {
+ 
export async function getInfo(urn: string, config: Config): Promise<Info | null> {

  return api.get(`projects/${urn}`, config);

}