Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Add "Clone" button to projects
Alexis Sellier committed 4 years ago
commit 8bbc7ec0f1e301f31351f76b43902c2fb4007e56
parent 287e56153ac2a69bc9876f0331cdf839be6918bc
4 files changed +64 -5
modified public/index.css
@@ -12,6 +12,8 @@
	--color-primary-5: #dd44dd;

	--color-primary-6: #ffd4ff;

	--color-primary-faded: #ff55ff77;
+ 
	--color-primary-background: #ff55ff11;
+ 
	--color-primary-background-lighter: #ff55ff22;

	--color-secondary: #5555ff;

	--color-secondary-background: #5555ff11;

	--color-secondary-faded: #5555ff77;
@@ -46,8 +48,8 @@
	--color-foreground-faded: #777788;

	--color-foreground-subtle: #444455;

	--color-foreground-subtler: #333344;
- 
	--color-foreground-background: #77778811;
- 
	--color-foreground-background-subtle: #7777880a;
+ 
	--color-foreground-background: #121a21;
+ 
	--color-foreground-background-subtle: #10171e;

	--color-foreground-1: #242e38;

	--color-foreground-2: #29343d;

	--color-foreground-3: #333e47;
modified src/base/orgs/Org.ts
@@ -156,7 +156,7 @@ export class Org {
      config.abi.org,

      config.provider

    );
- 
    const unpadded = utils.parseRadicleId(urn);
+ 
    const unpadded = utils.decodeRadicleId(urn);

    const id = ethers.utils.zeroPad(unpadded, 32);



    try {
modified src/base/projects/Browser.svelte
@@ -32,6 +32,8 @@


  // When the component is loaded the first time, the blob is yet to be loaded.

  let state: State = { status: Status.Idle };
+ 
  // Whether the clone dropdown is visible.
+ 
  let cloneDropdown = false;



  const loadBlob = async (path: string): Promise<proj.Blob> => {

    if (state.status == Status.Loaded && state.path === path) {
@@ -117,6 +119,47 @@
    margin-right: 0;

  }
+ 
  .clone {
+ 
    color: var(--color-primary);
+ 
    background-color: var(--color-primary-background);
+ 
    padding: 0.5rem 0.75rem;
+ 
    border-radius: 0.25rem;
+ 
    cursor: pointer;
+ 
    user-select: none;
+ 
  }
+ 
  .clone:hover {
+ 
    background-color: var(--color-primary-background-lighter);
+ 
  }
+ 
  .clone-dropdown {
+ 
    background-color: var(--color-foreground-background);
+ 
    padding: 1rem;
+ 
    margin-top: 0.5rem;
+ 
    border-radius: 0.25rem;
+ 
    display: none;
+ 
    position: absolute;
+ 
  }
+ 
  .clone-dropdown.clone-dropdown-visible {
+ 
    display: block;
+ 
  }
+ 
  .clone-dropdown input {
+ 
    font-size: 0.75rem;
+ 
    color: var(--color-primary);
+ 
    font-family: var(--font-family-monospace);
+ 
    padding: 0.5rem;
+ 
    background: var(--color-primary-background);
+ 
    border: none;
+ 
    outline: none;
+ 
    width: 24rem;
+ 
    text-overflow: ellipsis;
+ 
    border-radius: 0.25rem;
+ 
  }
+ 
  .clone-dropdown label {
+ 
    display: block;
+ 
    color: var(--color-foreground-faded);
+ 
    padding: 0.5rem 0.5rem 0 0.25rem;
+ 
    font-size: 0.75rem;
+ 
  }
+ 


  .stat {

    font-family: var(--font-family-monospace);

    padding: 0.5rem 0.75rem;
@@ -208,6 +251,15 @@
        <div class="stat" title="Project data is fetched from this seed">

          <span>{config.seed.host}</span>

        </div>
+ 
        <span>
+ 
          <div class="clone" on:click={() => cloneDropdown = !cloneDropdown}>
+ 
            Clone ↓
+ 
          </div>
+ 
          <div class="clone-dropdown" class:clone-dropdown-visible={cloneDropdown}>
+ 
            <input readonly name="clone-url" value="https://{config.seed.host}/{utils.parseRadicleId(urn)}"/>
+ 
            <label for="clone-url">Use Git to clone this repository from the URL above.</label>
+ 
          </div>
+ 
        </span>

      {/if}

    </header>

    <div class="container center-content">
modified src/utils.ts
@@ -197,8 +197,13 @@ export function formatRadicleId(hash: Uint8Array): string {
}



// Parse a Radicle Id (URN).
- 
export function parseRadicleId(urn: string): Uint8Array {
- 
  const encoded = urn.replace(/^rad:[a-z]+:/, "");
+ 
export function parseRadicleId(urn: string): string {
+ 
  return urn.replace(/^rad:[a-z]+:/, "");
+ 
}
+
+ 
// Decode a Radicle Id (URN).
+ 
export function decodeRadicleId(urn: string): Uint8Array {
+ 
  const encoded = parseRadicleId(urn);

  const multihash = multibase.decode(encoded);

  const hash = multihashes.decode(multihash);