prettier + share system

fiatjaf · Sep 2, 2023 · a1281ec · a1281ec
1 parent 5e6971d
commit a1281ec
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 28 deletions.
diff --git a/src/app.html b/src/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/src/components/Article.svelte b/src/components/Article.svelte
@@ -5,10 +5,12 @@
   import { formatDate } from '$lib/utils';
   import { parse } from '$lib/articleParser.js';
   import type { TabType } from '$lib/types';
+    import { page } from '$app/stores';
 
   export let eventid: string;
   export let createChild: (type: TabType, data: string) => void;
   let event: NDKEvent | null = null;
+  let copied = false;
 
   function addClickListenerToWikilinks() {
     const elements = document.querySelectorAll('[id^="wikilink-v0-"]');
@@ -22,6 +24,14 @@
     });
   }
 
+  function shareCopy() {
+    navigator.clipboard.writeText(`https://${$page.url.hostname}/?d=${eventid}`);
+    copied = true;
+    setTimeout(() => {
+      copied = false;
+    }, 2500);
+  }
+
   onMount(async () => {
     event = await $ndk.fetchEvent(eventid);
   });
@@ -53,6 +63,9 @@
           updated on {formatDate(event.created_at)}
         {/if}
         &nbsp;• &nbsp;<a href={`/fork/${eventid}`}>Fork</a>
+        &nbsp;•&nbsp;<a class="cursor-pointer" on:click={shareCopy}
+          >{#if copied}Copied!{:else}Share{/if}</a
+        >
       </span>
 
       <!-- Content -->

diff --git a/src/components/BackButton.svelte b/src/components/BackButton.svelte
@@ -1 +1,6 @@
-<a href="/" type="button" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Back</a>
+<a
+  href="/"
+  type="button"
+  class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+  >Back</a
+>
diff --git a/src/components/LinkToArticle.svelte b/src/components/LinkToArticle.svelte
@@ -3,6 +3,6 @@
 </script>
 
 <button
-  id={`wikilink-v0-${content.toLocaleLowerCase().replaceAll(" ", "-")}`}
+  id={`wikilink-v0-${content.toLocaleLowerCase().replaceAll(' ', '-')}`}
   class="text-indigo-600 underline">{content}</button
 >
diff --git a/src/lib/state.ts b/src/lib/state.ts
@@ -1,4 +1,4 @@
 import { writable, type Writable } from 'svelte/store';
 import type { Tab } from './types';
 
-export const tabs: Writable<Tab[]> = writable([{ id: 0, type: 'welcome' }]);
+export const tabs: Writable<Tab[]> = writable([]);
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,13 +1,30 @@
 <script lang="ts">
-  import Tab from '../components/Tab.svelte';
+  import TabElement from '../components/Tab.svelte';
   import { tabs } from '$lib/state';
   import Searchbar from '../components/Searchbar.svelte';
-  import { scrollTabIntoView } from '$lib/utils';
+  import { scrollTabIntoView, generateRandomNumber } from '$lib/utils';
+  import { onMount } from 'svelte';
+  import { page } from '$app/stores';
+  import type { Tab } from '$lib/types';
+
+  onMount(() => {
+    let openShareArticle = $page.url.searchParams.get('d') || undefined; // d = default/welcome tab to load
+    if (openShareArticle) {
+      let newTab: Tab = { id: generateRandomNumber(), type: 'article', data: openShareArticle };
+      $tabs.push(newTab);
+      tabs.set($tabs);
+      scrollTabIntoView(String(newTab.id));
+    } else {
+      let newTab: Tab = { id: 0, type: 'welcome' };
+      $tabs.push(newTab);
+      tabs.set($tabs);
+    }
+  });
 </script>
 
 <div class="flex overflow-x-scroll pb-2 scroll-smooth">
   {#each $tabs as tab (tab.id)}
-    <Tab {tab} />
+    <TabElement {tab} />
   {/each}
   <!-- svelte-ignore a11y-no-static-element-interactions a11y-click-events-have-key-events -->
   <div

diff --git a/src/routes/fork/[slug]/+page.svelte b/src/routes/fork/[slug]/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { ndk } from "$lib/ndk.js";
-  import { onMount } from "svelte";
-  import Editor from "../../../components/Editor.svelte";
-  import BackButton from "../../../components/BackButton.svelte";
+  import { ndk } from '$lib/ndk.js';
+  import { onMount } from 'svelte';
+  import Editor from '../../../components/Editor.svelte';
+  import BackButton from '../../../components/BackButton.svelte';
 
   export let data;
   let startD: undefined | string = undefined;
@@ -12,12 +12,11 @@
 
   onMount(async () => {
     const event = await $ndk.fetchEvent(data.slug);
-    if (event?.tags.find((e) => e[0] == "d"))
-      startD = event?.tags.find((e) => e[0] == "d")?.[1];
-    if (event?.tags.find((e) => e[0] == "title"))
-      startTitle = event?.tags.find((e) => e[0] == "title")?.[1];
-    if (event?.tags.find((e) => e[0] == "summary"))
-      startSummary = event?.tags.find((e) => e[0] == "summary")?.[1];
+    if (event?.tags.find((e) => e[0] == 'd')) startD = event?.tags.find((e) => e[0] == 'd')?.[1];
+    if (event?.tags.find((e) => e[0] == 'title'))
+      startTitle = event?.tags.find((e) => e[0] == 'title')?.[1];
+    if (event?.tags.find((e) => e[0] == 'summary'))
+      startSummary = event?.tags.find((e) => e[0] == 'summary')?.[1];
     if (event?.content === undefined) startContent = undefined;
     else startContent = event?.content;
   });

diff --git a/src/routes/new/+page.svelte b/src/routes/new/+page.svelte
@@ -1,16 +1,11 @@
 <script lang="ts">
-  import { page } from "$app/stores";
-  import Editor from "../../components/Editor.svelte";
-  import BackButton from "../../components/BackButton.svelte";
+  import { page } from '$app/stores';
+  import Editor from '../../components/Editor.svelte';
+  import BackButton from '../../components/BackButton.svelte';
 
-  let startD = $page.url.searchParams.get("n") || undefined;
+  let startD = $page.url.searchParams.get('n') || undefined;
 </script>
 
 <BackButton />
 
-<Editor
-  startSummary={undefined}
-  startTitle={undefined}
-  startContent={undefined}
-  {startD}
-/>
+<Editor startSummary={undefined} startTitle={undefined} startContent={undefined} {startD} />
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { browser } from '$app/environment';
   import { standardRelays } from '$lib/consts';
-  import BackButton from "../../components/BackButton.svelte";
+  import BackButton from '../../components/BackButton.svelte';
 
   let relays: string[] = [];
   let newRelay = '';