From e5a5046a47defbd5062baf314de936436b88f200 Mon Sep 17 00:00:00 2001
From: Xyphyn <james@xylight.dev>
Date: Fri, 15 Sep 2023 14:26:20 -0700
Subject: [PATCH] feat: add legal page

---
 src/lib/components/lemmy/SiteCard.svelte    | 19 +++++++++++-------
 src/lib/components/markdown/Markdown.svelte | 19 +++++++++---------
 src/routes/legal/+page.svelte               | 22 +++++++++++++++++++++
 3 files changed, 43 insertions(+), 17 deletions(-)
 create mode 100644 src/routes/legal/+page.svelte

diff --git a/src/lib/components/lemmy/SiteCard.svelte b/src/lib/components/lemmy/SiteCard.svelte
index 4ec9c2ea..09761bfd 100644
--- a/src/lib/components/lemmy/SiteCard.svelte
+++ b/src/lib/components/lemmy/SiteCard.svelte
@@ -9,6 +9,7 @@
   import type { PersonView, SiteView, Tagline } from 'lemmy-js-client'
   import { Button, Popover } from 'mono-svelte'
   import {
+    BuildingOffice,
     Calendar,
     ChatBubbleOvalLeftEllipsis,
     Icon,
@@ -34,33 +35,37 @@
       </span>
     </div>
   </div>
-  <span class="flex flex-row items-center gap-1 text-sm">
+  <span class="flex flex-row items-center gap-1 text-sm" title="Created">
     <Icon src={Calendar} width={16} height={16} mini />
     <RelativeDate date={publishedToDate(site.site.published)} />
   </span>
-  <div class="text-sm flex flex-row flex-wrap gap-3">
+  <div class="text-sm flex flex-row flex-wrap gap-3" title="Users">
     <span class="flex flex-row items-center gap-1">
       <Icon src={UserGroup} width={16} height={16} mini />
       <FormattedNumber number={site.counts.users} />
     </span>
-    <span class="flex flex-row items-center gap-1">
+    <span class="flex flex-row items-center gap-1" title="Posts">
       <Icon src={PencilSquare} width={16} height={16} mini />
       <FormattedNumber number={site.counts.posts} />
     </span>
-    <span class="flex flex-row items-center gap-1">
+    <span class="flex flex-row items-center gap-1" title="Comments">
       <Icon src={ChatBubbleOvalLeftEllipsis} width={16} height={16} mini />
       <FormattedNumber number={site.counts.comments} />
     </span>
-    <span class="flex flex-row items-center gap-1">
+    <span class="flex flex-row items-center gap-1" title="Communities">
       <Icon src={Newspaper} width={16} height={16} mini />
       <FormattedNumber number={site.counts.communities} />
     </span>
   </div>
-  <div class="flex flex-row gap-2 items-center">
-    <Button href="/modlog">
+  <div class="flex flex-row items-center">
+    <Button href="/modlog" size="md" class="rounded-r-none">
       <Icon src={Newspaper} size="16" mini />
       Modlog
     </Button>
+    <Button href="/legal" size="md" class="rounded-l-none border-l-0">
+      <Icon src={BuildingOffice} size="16" mini />
+      Legal
+    </Button>
   </div>
 
   {#if admins}
diff --git a/src/lib/components/markdown/Markdown.svelte b/src/lib/components/markdown/Markdown.svelte
index 490d18e1..13461191 100644
--- a/src/lib/components/markdown/Markdown.svelte
+++ b/src/lib/components/markdown/Markdown.svelte
@@ -19,20 +19,11 @@
   $: if (source && div) {
     replaceURLs(div)
   }
-
-  let font =
-    $userSettings.font == 'system'
-      ? 'font-system'
-      : $userSettings.font == 'browser'
-      ? 'font-sans'
-      : inline
-      ? 'font-inter'
-      : 'font-system'
 </script>
 
 <div
   bind:this={div}
-  class="break-words flex flex-col markdown gap-2 leading-[1.5] {font}"
+  class="break-words flex flex-col markdown gap-2 leading-[1.5]"
 >
   {#if inline}
     {@html mdInline.render(source)}
@@ -60,10 +51,18 @@
     @apply w-full mx-auto my-2 border-slate-300 dark:border-zinc-800;
   }
 
+  :global(.dark .markdown hr) {
+    @apply w-full mx-auto my-2 border-zinc-800;
+  }
+
   .markdown :global(img) {
     @apply max-h-[40vh] border rounded-md border-slate-200 dark:border-zinc-800;
   }
 
+  :global(.dark .markdown img) {
+    @apply border-zinc-800;
+  }
+
   .markdown :global(a) {
     @apply text-sky-500 hover:underline;
   }
diff --git a/src/routes/legal/+page.svelte b/src/routes/legal/+page.svelte
new file mode 100644
index 00000000..fc9cc364
--- /dev/null
+++ b/src/routes/legal/+page.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import SiteCard from '$lib/components/lemmy/SiteCard.svelte'
+  import Markdown from '$lib/components/markdown/Markdown.svelte'
+  import { site } from '$lib/lemmy'
+  import { Spinner } from 'mono-svelte'
+</script>
+
+<div class="flex flex-row w-full">
+  {#if $site}
+    <div class="flex flex-col flex-1 gap-4">
+      <h1 class="font-bold text-2xl">Legal</h1>
+      <Markdown source={$site.site_view.local_site.legal_information} />
+    </div>
+    <SiteCard
+      site={$site.site_view}
+      admins={$site.admins}
+      taglines={$site.taglines}
+    />
+  {:else}
+    <Spinner />
+  {/if}
+</div>