Merge pull request #119 from FoggedLens/discord-lander

Checked and accepted by frillweeman offline

webapp/src/components/DiscordWarningDialog.vue

@@ -7,8 +7,12 @@
           <p class="mb-3 text-body-1">
             <strong>You're about to join Discord</strong>
           </p>
+          <p class="mb-3 text-body-2">
+            DeFlock's Discord is a space for individuals and groups to meet and collaborate to campaign against mass surveillance infrastructure.
+          </p>
           <v-alert color="warning" variant="outlined" class="mb-4">
             <b>Law enforcement</b> and <b>Flock employees</b> actively monitor the Discord server. Please act accordingly.
+
           </v-alert>
           <p class="text-caption text-medium-emphasis mb-2">
             If you understand the risks and wish to continue, click <strong>Proceed</strong> below.

webapp/src/layouts/DefaultLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="page-wrapper">
     <slot name="header" />
 
     <!-- Main content -->
@@ -22,3 +22,20 @@ defineProps({
   },
 })
 </script>
+
+<style scoped>
+/* Sticky-footer layout: keeps the footer pinned to the bottom of the
+   viewport on short pages (without being fixed/floating), while still
+   allowing it to scroll off-screen naturally on taller pages. */
+.page-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.page-wrapper main {
+
+  flex: 1 0 auto;
+}
+</style>
+

webapp/src/router/index.ts

@@ -183,6 +183,14 @@ const router = createRouter({
         title: 'Blog Post | DeFlock'
       }
     },
+    {
+      path: '/discord',
+      name: 'discord',
+      component: () => import('../views/DiscordJoin.vue'),
+      meta: {
+        title: 'Join our Discord | DeFlock'
+      }
+    },
     {
       path: '/:pathMatch(.*)*',
       name: 'not-found',
@@ -190,6 +198,7 @@ const router = createRouter({
       meta: {
         title: 'Not Found | DeFlock'
       }
+
     }
   ]
 })

webapp/src/views/DiscordJoin.vue

@@ -0,0 +1,35 @@
+<template>
+  <DefaultLayout>
+    <v-container class="narrow-text text-center mt-12">
+      <v-btn color="primary" size="large" rounded @click="showDialog = true">
+        <v-img class="mr-2" contain width="24" height="24" src="/icon-discord-white.svg" />
+        Join DeFlock Discord
+      </v-btn>
+    </v-container>
+
+    <DiscordWarningDialog
+      v-model="showDialog"
+      :discordUrl="discordUrl"
+      @proceed="handleProceed"
+    />
+  </DefaultLayout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useHead } from '@unhead/vue';
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
+import DiscordWarningDialog from '@/components/DiscordWarningDialog.vue';
+
+useHead({
+  meta: [{ name: 'robots', content: 'noindex, nofollow' }]
+});
+
+const discordUrl = 'https://discord.gg/aV7v4R3sKT';
+
+const showDialog = ref(true);
+
+function handleProceed(url: string) {
+  window.open(url, '_blank');
+}
+</script>