feat: about page

app/components/app/LanguageSwitcher.vue

@@ -24,7 +24,7 @@ const currentLocale = computed({
 
 <template>
   <Select v-model="currentLocale">
-    <SelectTrigger class="w-[160px]">
+    <SelectTrigger class="w-[150px]">
       <Languages class="mr-2 h-4 w-4" />
       <SelectValue :placeholder="t('selectLanguage')" />
     </SelectTrigger>

app/layouts/default.vue

@@ -44,6 +44,13 @@ const { t } = useI18n();
               </NuxtLink>
             </SignedIn>
           </ClientOnly>
+          <NuxtLink
+            to="/about"
+            class="text-sm font-medium hover:text-primary transition-colors"
+            active-class="text-primary"
+          >
+            {{ t("about") }}
+          </NuxtLink>
         </nav>
       </div>
       <div class="flex items-center space-x-4">

app/pages/about.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { marked } from "marked";
+import { Spinner } from "~/components/ui/spinner";
+
+const markdownContent = ref("");
+const htmlContent = ref("");
+const loading = ref(true);
+
+onMounted(async () => {
+  try {
+    const response = await fetch("/about.md");
+    if (!response.ok) {
+      throw new Error("Failed to load about content");
+    }
+    markdownContent.value = await response.text();
+    htmlContent.value = await marked(markdownContent.value);
+  } catch (error) {
+    console.error("Error loading about page:", error);
+    htmlContent.value = "<p>Failed to load about content.</p>";
+  } finally {
+    loading.value = false;
+  }
+});
+
+definePageMeta({
+  layout: "default",
+});
+</script>
+
+<template>
+  <div class="container max-w-4xl mx-auto px-4 py-8">
+    <div
+      v-if="loading"
+      class="flex items-center justify-center text-center py-12 m-auto"
+    >
+      <Spinner size="lg" />
+    </div>
+    <div v-else class="prose max-w-none" v-html="htmlContent" />
+  </div>
+</template>
+
+<style scoped>
+@reference "../assets/css/tailwind.css";
+.prose :deep(h1) {
+  @apply text-4xl font-bold mb-6;
+}
+
+.prose :deep(h2) {
+  @apply text-3xl font-semibold mt-8 mb-4;
+}
+
+.prose :deep(h3) {
+  @apply text-2xl font-semibold mt-6 mb-3;
+}
+
+.prose :deep(p) {
+  @apply mb-4 leading-7;
+}
+
+.prose :deep(ul) {
+  @apply list-disc list-inside mb-4 space-y-2;
+}
+
+.prose :deep(strong) {
+  @apply font-semibold;
+}
+
+.prose :deep(a) {
+  @apply text-primary hover:underline;
+}
+
+.prose :deep(hr) {
+  @apply my-8 border-border;
+}
+
+.prose :deep(code) {
+  @apply bg-muted px-1.5 py-0.5 rounded text-sm;
+}
+
+.prose :deep(em) {
+  @apply italic;
+}
+</style>

i18n/locales/es.json

@@ -8,7 +8,7 @@
   "stream": "Transmisión",
   "presets": "Ajustes predefinidos",
   "effortlessScreensharing": "comparte pantalla sin complicaciones",
-  "hostInstead": "¿prefieres compartir pantalla?",
+  "hostInstead": "¿prefieres transmitir pantalla?",
   "enterCodeToJoinStream": "introduce un código para unirse a la transmisión",
   "streamEnded": "transmisión finalizada",
   "enterAnotherCode": "introduce otro código",

package.json

@@ -25,6 +25,7 @@
     "dotenv": "^17.2.3",
     "drizzle-orm": "^0.45.1",
     "lucide-vue-next": "^0.548.0",
+    "marked": "^17.0.1",
     "monaco-editor": "^0.55.1",
     "nuxt": "^4.2.1",
     "nuxt-monaco-editor": "^1.4.0",

pnpm-lock.yaml

@@ -47,6 +47,9 @@ importers:
       lucide-vue-next:
         specifier: ^0.548.0
         version: 0.548.0(vue@3.5.26(typescript@5.9.3))
+      marked:
+        specifier: ^17.0.1
+        version: 17.0.1
       monaco-editor:
         specifier: ^0.55.1
         version: 0.55.1
@@ -3588,6 +3591,11 @@ packages:
     engines: {node: '>= 18'}
     hasBin: true
 
+  marked@17.0.1:
+    resolution: {integrity: sha512-boeBdiS0ghpWcSwoNm/jJBwdpFaMnZWRzjA6SkUMYb40SVaN1x7mmfGKp0jvexGcx+7y2La5zRZsYFZI6Qpypg==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
   mdn-data@2.0.28:
     resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
 
@@ -8482,6 +8490,8 @@ snapshots:
 
   marked@14.0.0: {}
 
+  marked@17.0.1: {}
+
   mdn-data@2.0.28: {}
 
   mdn-data@2.12.2: {}

public/about.md

@@ -0,0 +1,10 @@
+# About
+
+Helium is a screensharing utility powered by the battle-tested WebRTC protocol. It is the same one that powers Google Meet, Discord and a plethora of other applications.
+
+The app has been created as a solution to the blocked SMART Board screensharing app inside my school's network. You are seeing a completely [open source](https://github.com/SrIzan10/helium) website under GNU GPL v3.
+
+# On modularity
+
+Helium is partly modular. This means that you must provide your own TURN/STUN servers. This is because I cannot provide a free TURN server.  
+Either way, the old ICE Candidates before the modular rework are still provided under [this preset share link](https://helium.srizan.dev/presets/shared/d573d4ad-cc92-4e4a-a7b3-423eb1133399).