5b11adc Refactor Project Metadata into own component — radicle-explorer

Radicle web interface

Refactor Project Metadata into own component

Sebastian Martinez committed 3 years ago

commit 5b11adc9237bb0519347463ce219a9251c3c8bbf
parent ab7ba33182a1e48064d575c3b4723f0b96fceaed

2 files changed +101 -83

modified src/base/projects/Project.svelte

@@ -1,10 +1,7 @@

 <script lang="ts">
   import { Link } from 'svelte-routing';
   import type { Config } from '@app/config';
   import * as proj from '@app/project';
   import Avatar from '@app/Avatar.svelte';
   import Placeholder from '@app/Placeholder.svelte';
   import Clipboard from '@app/Clipboard.svelte';
   import { formatProfile, formatSeedId, setOpenGraphMetaTag } from '@app/utils';
   import { browserStore } from '@app/project';

@@ -13,6 +10,7 @@

   import Browser from "./Browser.svelte";
   import Commit from "./Commit.svelte";
   import History from "./History.svelte";
   import ProjectMeta from './ProjectMeta.svelte';
   export let peer: string | null = null;
   export let config: Config;

@@ -23,15 +21,6 @@

   let parentName = project.profile ? formatProfile(project.profile.nameOrAddress, config) : null;
   let pageTitle = parentName ? `${parentName}/${project.name}` : project.name;
   function rootPath(): string {
     return project.pathTo({
       content: proj.ProjectContent.Tree,
       peer: null,
       path: "/",
       revision: null,
     });
   }
   const baseName = parentName
     ? `${parentName}/${project.name}`
     : project.name;

@@ -50,61 +39,13 @@

 </script>
 <style>
   .title {
     display: flex;
     align-items: center;
     justify-content: left;
     font-size: 2rem;
     margin-bottom: 0.5rem;
   }
   .title .divider {
     color: var(--color-foreground-subtle);
     margin: 0 0.5rem;
     font-weight: normal;
   }
   .title .peer-id {
     color: var(--color-foreground-subtle);
     font-weight: normal;
   }
   .org-avatar {
     display: inline-block;
     width: 2rem;
     height: 2rem;
   }
   .urn {
     font-family: var(--font-family-monospace);
     font-size: 0.75rem;
     color: var(--color-foreground-faded);
     overflow-wrap: anywhere;
     display: flex;
     justify-content: left;
     align-items: center;
     gap: 0.125rem;
   }
   .description {
     margin: 1rem 0 1.5rem 0;
   }
   .content {
     padding: 0 2rem 0 8rem;
   }
   @media (max-width: 960px) {
     .content {
       padding-left: 2rem;
     }
     .title {
       font-size: 1.375rem;
     }
     .description {
       font-size: 0.875rem;
     }
     .org-avatar {
       display: inline-block;
       width: 1.5rem;
       height: 1.5rem;
     }
   }
 </style>

@@ -112,29 +53,7 @@

   <title>{pageTitle}</title>
 </svelte:head>
 <header class="content">
   <div class="title bold">
     {#if project.profile}
       <a class="org-avatar" title={project.profile.nameOrAddress} href="/{project.profile.nameOrAddress}">
         <Avatar source={project.profile.avatar || project.profile.address} title={project.profile.address}/>
       </a>
       <span class="divider">/</span>
     {/if}
     <span class="text-truncate">
       <Link to={rootPath()}>{project.name}</Link>
     </span>
     {#if peer}
       <span class="peer-id">
         <span class="divider">/</span><span title={peer}>{formatSeedId(peer)}</span><Clipboard text={peer} />
       </span>
     {/if}
   </div>
   <div class="urn">
     <span class="text-truncate">{project.urn}</span>
     <Clipboard small text={project.urn} />
   </div>
   <div class="description">{project.description}</div>
 </header>
 <ProjectMeta noDescription={content !== proj.ProjectContent.Tree} {project} {peer} />
 {#if revision}
   {#await project.getRoot(revision) then { tree, commit }}

added src/base/projects/ProjectMeta.svelte

@@ -0,0 +1,99 @@

 <script lang="ts">
   import Avatar from "@app/Avatar.svelte";
   import Clipboard from "@app/Clipboard.svelte";
   import { Link } from "svelte-routing";
   import { formatSeedId } from "@app/utils";
   import { type PeerId, type Project, ProjectContent } from "@app/project";
   export let project: Project;
   export let peer: PeerId | null = null;
   export let noDescription = false;
   function rootPath(): string {
     return project.pathTo({
       content: ProjectContent.Tree,
       peer: null,
       path: "/",
       revision: null,
       issue: null,
     });
   }
 </script>
 <style>
   .title {
     display: flex;
     align-items: center;
     justify-content: left;
     font-size: 2rem;
     margin-bottom: 0.5rem;
   }
   .title .divider {
     color: var(--color-foreground-subtle);
     margin: 0 0.5rem;
     font-weight: normal;
   }
   .title .peer-id {
     color: var(--color-foreground-subtle);
     font-weight: normal;
   }
   .org-avatar {
     display: inline-block;
     width: 2rem;
     height: 2rem;
   }
   .urn {
     font-family: var(--font-family-monospace);
     font-size: 0.75rem;
     color: var(--color-foreground-faded);
     overflow-wrap: anywhere;
     display: flex;
     justify-content: left;
     align-items: center;
     gap: 0.125rem;
   }
   .description {
     margin: 1rem 0 1.5rem 0;
   }
   .placeholder {
     height: 2rem;
   }
   .content {
     padding: 0 2rem 0 8rem;
   }
   @media (max-width: 960px) {
     .content {
       padding-left: 2rem;
     }
   }
 </style>
 <header class="content">
   <div class="title bold">
     {#if project.profile}
       <a class="org-avatar" title={project.profile.nameOrAddress} href="/{project.profile.nameOrAddress}">
         <Avatar source={project.profile.avatar || project.profile.address} title={project.profile.address}/>
       </a>
       <span class="divider">/</span>
     {/if}
     <span class="text-truncate">
       <Link to={rootPath()}>{project.name}</Link>
     </span>
     {#if peer}
       <span class="peer-id">
         <span class="divider">/</span><span title={peer}>{formatSeedId(peer)}</span><Clipboard text={peer} />
       </span>
     {/if}
   </div>
   <div class="urn">
     <span class="text-truncate">{project.urn}</span>
     <Clipboard small text={project.urn} />
   </div>
   {#if !noDescription}
     <div class="description">{project.description}</div>
   {:else}
     <div class="placeholder" />
   {/if}
 </header>