Add dialog component and about/legal dialogs

#11 #15

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <main
-    class="flex h-dvh touch-manipulation select-none gap-px bg-separator-color font-sans text-base text-primary-color antialiased selection:bg-selection-color selection:text-primary-selected-color"
+    class="flex h-dvh gap-px"
     :class="[
       view.isStandaloneDisplayMode
         ? 'pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]'
@@ -41,3 +41,9 @@ watchEffect(() => {
   }
 });
 </script>
+
+<style lang="postcss">
+body {
+  @apply touch-manipulation select-none bg-separator-color font-sans text-base text-primary-color antialiased selection:bg-selection-color selection:text-primary-selected-color;
+}
+</style>

src/components/PageDialog.vue

@@ -0,0 +1,49 @@
+<template>
+  <Dialog
+    :open="dialogIsOpen"
+    class="relative z-30"
+    @close="view.dialogs.close()"
+  >
+    <div
+      class="fixed inset-0 bg-primary-color/75 dark:bg-[#111]/85"
+      aria-hidden="true"
+    />
+    <div class="fixed inset-0 w-screen overflow-y-auto">
+      <div class="flex min-h-full items-center justify-center p-2">
+        <DialogPanel
+          class="rounded-dialog shadow-dialog relative w-full max-w-150 select-text space-y-3 bg-blank-color p-5 font-serif text-base-serif leading-paragraph-wide dark:bg-controls-color"
+        >
+          <DialogTitle class="font-serif-heading text-[1.5rem] font-bold">{{ title }}</DialogTitle>
+          <slot />
+          <BaseButton
+            icon="close"
+            class="absolute right-2 top-2 !m-0"
+            @click="view.dialogs.close()"
+          />
+        </DialogPanel>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Dialog, DialogPanel, DialogTitle } from '@headlessui/vue';
+import BaseButton from '@/components/BaseButton.vue';
+import { useViewStore } from '@/stores/ViewStore';
+
+const props = defineProps<{
+  id: string;
+  title: string;
+}>();
+
+const view = useViewStore();
+
+const dialogIsOpen = computed(() => view.dialogs.openDialogId === props.id);
+</script>
+
+<style lang="postcss">
+div[class*='rounded-dialog'] h3 {
+  @apply !mt-6 font-bold;
+}
+</style>

src/components/TheAboutDialog.vue

@@ -0,0 +1,44 @@
+<template>
+  <PageDialog
+    id="about"
+    title="About This Website"
+  >
+    <p class="!mt-1.5">
+      A project by
+      <a
+        href="https://simonlou.com/"
+        target="_blank"
+        >Simon</a
+      >
+      and
+      <a
+        href="https://jona.im/"
+        target="_blank"
+        >Jona</a
+      >
+    </p>
+    <p>
+      This project is an attempt at rethinking the experience of browsing Hacker News by unifying
+      the front page, linked websites and discussions as a multi-column web app. Special attention
+      has also been paid to improving navigation and readability while keeping the information
+      density high.
+    </p>
+    <p>
+      We are interested to hear whether the interface complements your reading habits and affects
+      your browsing experience — if you have any comments or suggestions, please reach out. Sharing
+      the project is also much appreciated.
+    </p>
+    <p>
+      The project’s source code is
+      <a
+        href="https://github.com/savageserif/hackernews-dot-cool"
+        target="_blank"
+        >available on GitHub</a
+      >.
+    </p>
+  </PageDialog>
+</template>
+
+<script setup lang="ts">
+import PageDialog from '@/components/PageDialog.vue';
+</script>

src/components/TheLegalDialog.vue

@@ -0,0 +1,50 @@
+<template>
+  <PageDialog
+    id="legal"
+    title="Legal Notice"
+  >
+    <h3>Impressum</h3>
+    <p>Responsible regarding § 5 of the German Telemedia Act:</p>
+    <blockquote class="!my-[0.8125rem] leading-paragraph-narrow">
+      {{ legalName }}<br />{{ legalStreet }}<br />{{ legalCity }}<br />
+      <a href="mailto:[email protected]">[email protected]</a>
+    </blockquote>
+    <p>
+      We are neither responsible for any content fetched from the official
+      <a
+        href="https://github.com/hackernews/api"
+        target="_blank"
+        >Hacker News API</a
+      >, which includes story titles and comments, nor for the contents of linked websites embedded
+      within the page.
+    </p>
+    <h3>Privacy Policy</h3>
+    <p>
+      We do not collect any personal information from website visitors. We use Plausible Analytics
+      to gather anonymized, aggregated statistics such as browser, operating system, device type,
+      and country (approximated by IP address). Plausible Analytics operates without using cookies
+      and does not collect any personal data. For more information, visit
+      <a
+        href="https://plausible.io/data-policy"
+        target="_blank"
+        >Plausible Analytics’ data policy</a
+      >. This website is hosted by Vercel, which may collect anonymized logs. For more details,
+      visit
+      <a
+        href="https://vercel.com/legal/privacy-policy"
+        target="_blank"
+        >Vercel’s privacy policy</a
+      >. Please contact us at
+      <a href="mailto:[email protected]">[email protected]</a> if you have any
+      questions.
+    </p>
+  </PageDialog>
+</template>
+
+<script setup lang="ts">
+import PageDialog from '@/components/PageDialog.vue';
+
+const legalName = import.meta.env.VITE_LEGAL_NAME;
+const legalStreet = import.meta.env.VITE_LEGAL_STREET;
+const legalCity = import.meta.env.VITE_LEGAL_CITY;
+</script>

src/components/TheSettingsMenu.vue

@@ -43,6 +43,8 @@
       </div>
     </MenuItems>
   </Menu>
+  <TheAboutDialog />
+  <TheLegalDialog />
 </template>
 
 <script setup lang="ts">
@@ -52,6 +54,8 @@ import { storeToRefs } from 'pinia';
 import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue';
 import BaseIcon from '@/components/BaseIcon.vue';
 import BaseButton from '@/components/BaseButton.vue';
+import TheAboutDialog from '@/components/TheAboutDialog.vue';
+import TheLegalDialog from '@/components/TheLegalDialog.vue';
 import { useViewStore } from '@/stores/ViewStore';
 
 const view = useViewStore();
@@ -119,12 +123,12 @@ const menuContents = ref<
       },
       {
         text: 'About This Website',
-        action: () => {},
+        action: () => view.dialogs.open('about'),
       },
       {
-        text: 'Imprint / Privacy',
+        text: 'Legal / Privacy',
         faint: true,
-        action: () => {},
+        action: () => view.dialogs.open('legal'),
       },
     ],
   },

src/stores/ViewStore.ts

@@ -1,4 +1,4 @@
-import { computed, watchEffect, nextTick } from 'vue';
+import { ref, computed, watchEffect, nextTick } from 'vue';
 import { defineStore } from 'pinia';
 import {
   useStorage,
@@ -77,6 +77,17 @@ export const useViewStore = defineStore('view', () => {
     'link'
   );
 
+  // state/actions of modal dialogs
+  const dialogs = {
+    openDialogId: ref<string | undefined>(undefined),
+    open: (id: string) => {
+      dialogs.openDialogId.value = id;
+    },
+    close: () => {
+      dialogs.openDialogId.value = undefined;
+    },
+  };
+
   // ticker which increases every minute to trigger relative timestamp refreshes
   const timestampTicker = useInterval(60000);
 
@@ -91,6 +102,7 @@ export const useViewStore = defineStore('view', () => {
     secondaryColumn,
     commentsColumn,
     activeUnifiedColumnView,
+    dialogs,
     timestampTicker,
   };
 });

tailwind.config.js

@@ -38,6 +38,7 @@ export default {
       none: '0',
       DEFAULT: '0.1875rem',
       outline: '0.21875rem',
+      dialog: '0.625rem',
     },
     extend: {
       lineHeight: {
@@ -59,6 +60,7 @@ export default {
         menu: '0 0 0 1px rgb(0 0 0 / 0.1), 0 2px 4px rgb(0 0 0 / 0.075), 0 4px 8px rgb(0 0 0 / 0.075)',
         'menu-dark':
           '0 0 0 1px rgb(0 0 0 / 0.1), 0 2px 4px rgb(0 0 0 / 0.15), 0 4px 8px rgb(0 0 0 / 0.15)',
+        dialog: '0 4px 8px rgb(0 0 0 / 0.075), 0 8px 16px rgb(0 0 0 / 0.075)',
       },
       transitionDuration: {
         200: '200ms',