feat(app-pages): enrich app pages with SEO content

Adds optional longDescription, category, developer, pricing, platforms,
features, useCases, and faq fields to each app entry, and renders them
as About / Key features / Use cases / FAQ sections. Schema.org
SoftwareApplication is enriched (description, url, screenshot,
applicationCategory, featureList, author, offers) and a FAQPage node
is emitted when faq is present.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: mathix420

app/pages/app/[slug].vue

@@ -13,48 +13,75 @@ if (!app.value || error.value) {
 const websiteBaseURL = useSiteConfig().url || "https://ftwa.mathix.dev";
 const fullImageURL = `${websiteBaseURL}${app.value.screenshot}`;
 
+const metaDescription = app.value.longDescription
+  ? `${app.value.longDescription.slice(0, 155).trim()}${app.value.longDescription.length > 155 ? "…" : ""}`
+  : `Install ${app.value.name} as a desktop app on your Mac, Windows or Linux device. ${app.value.description}`;
+
 useSeoMeta({
-  title: app.value.name,
-  description: `Install ${app.value.name} as desktop app on your Mac, Windows or Linux device.`,
+  title: `${app.value.name} as a Desktop App`,
+  description: metaDescription,
+  ogTitle: `${app.value.name} — install as a desktop app`,
+  ogDescription: metaDescription,
   ogImage: fullImageURL,
+  twitterCard: "summary_large_image",
+  twitterTitle: `${app.value.name} — install as a desktop app`,
+  twitterDescription: metaDescription,
+  twitterImage: fullImageURL,
 });
 
 useSchemaOrg([
   defineSoftwareApp({
     name: app.value.name,
-    applicationCategory: "BrowserApplication",
-    operatingSystem: "MacOS, Windows, Linux",
+    description: app.value.longDescription || app.value.description,
+    applicationCategory: (app.value.category || "BrowserApplication") as never,
+    operatingSystem: "macOS, Windows, Linux",
+    url: `${websiteBaseURL}/app/${app.value.id}`,
     image: fullImageURL,
+    screenshot: fullImageURL,
+    ...(app.value.features?.length
+      ? { featureList: app.value.features.map(f => f.title) }
+      : {}),
+    ...(app.value.developer
+      ? { author: { "@type": "Organization", "name": app.value.developer } }
+      : {}),
+    offers: {
+      "@type": "Offer",
+      "price": "0",
+      "priceCurrency": "USD",
+    },
     aggregateRating: {
       bestRating: 5,
       ratingValue: 5,
       ratingCount: 1,
     },
   }),
+  ...(app.value.faq?.length
+    ? [{
+        "@type": "FAQPage",
+        "mainEntity": app.value.faq.map(item => ({
+          "@type": "Question",
+          "name": item.question,
+          "acceptedAnswer": {
+            "@type": "Answer",
+            "text": item.answer,
+          },
+        })),
+      } as never]
+    : []),
 ]);
 
-const config = computed(() => [
-  {
-    key: "Name",
-    value: app.value?.name,
-  },
-  {
-    key: "URL",
-    value: app.value?.url,
-  },
-  {
-    key: "Logo",
-    value: app.value?.logo ? `${websiteBaseURL}${app.value.logo}` : "-",
-  },
-  {
-    key: "Mac Logo",
-    value: app.value?.macLogo ? `${websiteBaseURL}${app.value.macLogo}` : "-",
-  },
-  {
-    key: "Tags",
-    value: app.value?.tags?.join(", ") || "-",
-  },
-]);
+const config = computed(() => {
+  const rows: { key: string; value: string }[] = [
+    { key: "Name", value: app.value?.name || "-" },
+    { key: "Website", value: app.value?.url || "-" },
+  ];
+  if (app.value?.developer) rows.push({ key: "Developer", value: app.value.developer });
+  if (app.value?.category) rows.push({ key: "Category", value: app.value.category });
+  if (app.value?.pricing) rows.push({ key: "Pricing", value: app.value.pricing });
+  if (app.value?.platforms?.length) rows.push({ key: "Platforms", value: app.value.platforms.join(", ") });
+  rows.push({ key: "Tags", value: app.value?.tags?.join(", ") || "-" });
+  return rows;
+});
 </script>
 
 <template>
@@ -105,11 +132,68 @@ const config = computed(() => [
       <NuxtPicture
         format="avif,webp"
         :src="app.screenshot"
-        alt="Screenshot of TodoMate"
+        :alt="`Screenshot of ${app.name}`"
         sizes="xs:100vw sm:100vw md:100vw lg:100vw xl:1216px"
         :img-attrs="{ class: 'w-full border border-gray-300 dark:border-gray-700 aspect-card-img bg-gray-50 overflow-hidden rounded-lg sm:rounded-xl' }"
       />
 
+      <section
+        v-if="app.longDescription"
+        class="my-8"
+      >
+        <h2 class="font-title mb-3 text-2xl font-bold sm:text-3xl">
+          About {{ app.name }}
+        </h2>
+        <div class="space-y-3 text-base leading-relaxed text-gray-700 dark:text-gray-300">
+          <p
+            v-for="(paragraph, idx) in app.longDescription.split(/\n\n+/)"
+            :key="idx"
+          >
+            {{ paragraph }}
+          </p>
+        </div>
+      </section>
+
+      <section
+        v-if="app.features?.length"
+        class="my-8"
+      >
+        <h2 class="font-title mb-4 text-2xl font-bold sm:text-3xl">
+          Key features
+        </h2>
+        <ul class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+          <li
+            v-for="feature in app.features"
+            :key="feature.title"
+            class="rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/40"
+          >
+            <p class="font-semibold text-gray-900 dark:text-white">
+              {{ feature.title }}
+            </p>
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+              {{ feature.description }}
+            </p>
+          </li>
+        </ul>
+      </section>
+
+      <section
+        v-if="app.useCases?.length"
+        class="my-8"
+      >
+        <h2 class="font-title mb-3 text-2xl font-bold sm:text-3xl">
+          Common use cases
+        </h2>
+        <ul class="list-disc space-y-1 pl-6 text-gray-700 dark:text-gray-300">
+          <li
+            v-for="useCase in app.useCases"
+            :key="useCase"
+          >
+            {{ useCase }}
+          </li>
+        </ul>
+      </section>
+
       <UCard
         :ui="{ body: { padding: 'sm:p-3 p-3' } }"
         class="mx-auto my-5"
@@ -164,6 +248,35 @@ const config = computed(() => [
         <UTable :rows="config" />
       </UCard>
 
+      <section
+        v-if="app.faq?.length"
+        class="my-10"
+      >
+        <h2 class="font-title mb-4 text-2xl font-bold sm:text-3xl">
+          Frequently asked questions
+        </h2>
+        <div class="space-y-3">
+          <details
+            v-for="item in app.faq"
+            :key="item.question"
+            class="group rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900/40"
+          >
+            <summary class="cursor-pointer list-none font-semibold text-gray-900 marker:hidden dark:text-white">
+              <span class="inline-flex w-full items-center justify-between gap-2">
+                <span>{{ item.question }}</span>
+                <Icon
+                  name="material-symbols:expand-more-rounded"
+                  class="size-5 transition-transform group-open:rotate-180"
+                />
+              </span>
+            </summary>
+            <p class="mt-2 text-gray-700 dark:text-gray-300">
+              {{ item.answer }}
+            </p>
+          </details>
+        </div>
+      </section>
+
       <div class="mt-20 flex flex-col items-center justify-center gap-3 sm:flex-row">
         <UButton
           size="xl"

content/1.todomate.json

@@ -11,5 +11,29 @@
     "social",
     "tool"
   ],
-  "logoSize": 128
+  "logoSize": 128,
+  "longDescription": "TodoMate is a social task management app that turns daily to-do lists into a shared experience. Each user keeps a personal checklist, but lists can be made visible to friends so progress, completions, and streaks are seen by a small circle of accountability partners.\n\nThe app is aimed at students, study groups, and anyone who finds it easier to stick to routines when others are watching. Tasks are grouped by day, with simple categories, recurring items, and emoji-based reactions or comments from followers on completed work.\n\nIt is a lightweight planner rather than a full project manager. The focus is on building habits through visibility and gentle peer pressure instead of complex workflows or assignments.",
+  "category": "Productivity",
+  "developer": "the team behind TodoMate",
+  "pricing": "Free with paid plans",
+  "platforms": ["Web", "iOS", "Android"],
+  "features": [
+    {"title": "Social timeline", "description": "Friends can see each other's daily tasks and react to completed items, making accountability part of the routine."},
+    {"title": "Daily checklists", "description": "Tasks are organized day by day with quick add, drag-to-reorder, and one-tap completion."},
+    {"title": "Recurring tasks", "description": "Set items to repeat on specific weekdays or intervals to support steady habits and study schedules."},
+    {"title": "Categories and colors", "description": "Group related tasks under colored categories to separate study, work, and personal items at a glance."},
+    {"title": "Reactions and comments", "description": "Followers can leave emojis or short messages on tasks to celebrate progress or send encouragement."}
+  ],
+  "useCases": [
+    "Tracking daily study goals with classmates as accountability partners",
+    "Building consistent habits like reading or exercise alongside friends",
+    "Planning weekly routines with recurring chores and reminders",
+    "Sharing progress with a small circle without using a full social network"
+  ],
+  "faq": [
+    {"question": "Is TodoMate free to use?", "answer": "TodoMate is free to use with optional paid plans that unlock cosmetic and convenience features."},
+    {"question": "Do I need an account?", "answer": "Yes, an account is required so tasks can sync across devices and be shared with friends."},
+    {"question": "Can I keep my lists private?", "answer": "Yes, lists and individual tasks can be marked private so only you can see them, even if you have followers."},
+    {"question": "Which platforms is TodoMate available on?", "answer": "TodoMate runs in the web browser and as native apps on iOS and Android."}
+  ]
 }

content/10.cyber-chef.json

@@ -9,5 +9,29 @@
     "security",
     "tool"
   ],
-  "logoSize": 512
+  "logoSize": 512,
+  "longDescription": "CyberChef is a browser-based tool for analyzing and transforming data. Users build a recipe by dragging operations such as base64 decoding, AES decryption, regex extraction, or hex-to-text into a pipeline, and the tool runs them top to bottom on the input as it is typed.\n\nIt is widely used by security analysts, incident responders, CTF players, and developers who need to quickly try sequences of decodings, encodings, and parsing steps. The library includes hundreds of operations covering encryption, hashing, compression, networking formats, dates and times, and many file formats.\n\nCyberChef runs entirely in the browser, so data is never uploaded to a server. The project is open source under Apache 2.0 and can be downloaded and run locally, which is the recommended option for sensitive data.",
+  "category": "SecurityApplication",
+  "developer": "GCHQ",
+  "pricing": "Open source / free",
+  "platforms": ["Web"],
+  "features": [
+    {"title": "Recipe pipeline", "description": "Chain operations into a recipe that runs in order, so each step transforms the previous step's output."},
+    {"title": "Hundreds of operations", "description": "Encoding, hashing, encryption, compression, parsing, networking, and date operations are all built in."},
+    {"title": "Runs in the browser", "description": "All processing happens client-side, so input data never leaves your machine."},
+    {"title": "File and binary support", "description": "Drag in files to operate on binary data, including images, archives, and packet captures."},
+    {"title": "Shareable recipes", "description": "Recipes can be saved, exported, or shared via URL so colleagues reproduce the same pipeline."}
+  ],
+  "useCases": [
+    "Decoding suspicious URLs or payloads during incident response",
+    "Solving capture-the-flag challenges that involve nested encodings",
+    "Inspecting and converting between text encodings and file formats",
+    "Hashing, signing, or verifying small pieces of data without writing code"
+  ],
+  "faq": [
+    {"question": "Is CyberChef free?", "answer": "Yes, CyberChef is open source under Apache 2.0 and free to use both online and self-hosted."},
+    {"question": "Is my data uploaded to a server?", "answer": "No, all processing happens in the browser, so input data stays on your machine."},
+    {"question": "Can I run CyberChef offline?", "answer": "Yes, you can download a release from GitHub and open the static HTML file locally."},
+    {"question": "Who maintains CyberChef?", "answer": "CyberChef was created and is maintained by GCHQ, the UK's signals intelligence agency, with contributions from the open-source community."}
+  ]
 }

content/11.chat-gpt.json

@@ -11,5 +11,31 @@
     "chat",
     "tool"
   ],
-  "logoSize": 512
+  "logoSize": 512,
+  "longDescription": "ChatGPT is OpenAI's conversational AI assistant, available on the web and through native apps on desktop and mobile. It can answer questions, draft and edit text, write and explain code, summarize long documents, and reason through problems step by step.\n\nThe free tier offers access to a capable default model with limits on usage and advanced features. Paid Plus, Pro, Team, and Enterprise plans unlock more powerful models, longer context windows, image generation, file analysis, voice mode, and tools like web browsing and custom GPTs.\n\nUsers can attach files and images, build their own GPTs with custom instructions and knowledge, and connect external services through actions. Conversations are stored per account and can be deleted, exported, or excluded from training in the data controls.",
+  "category": "UtilitiesApplication",
+  "developer": "OpenAI",
+  "pricing": "Free with paid plans",
+  "platforms": ["Web", "macOS", "Windows", "iOS", "Android"],
+  "features": [
+    {"title": "Conversational assistant", "description": "Ask questions, brainstorm, and iterate on ideas in a long-running chat that keeps context."},
+    {"title": "File and image input", "description": "Attach documents, images, and spreadsheets so the model can analyze, summarize, or extract data."},
+    {"title": "Image generation", "description": "Generate and edit images directly in the chat with built-in image models on supported plans."},
+    {"title": "Voice mode", "description": "Talk to ChatGPT in natural speech with low-latency voice conversations on mobile and desktop."},
+    {"title": "Custom GPTs", "description": "Build tailored assistants with custom instructions, files, and actions, then share them with others."},
+    {"title": "Web browsing and tools", "description": "On supported plans, ChatGPT can browse the web, run code, and call external tools to complete tasks."}
+  ],
+  "useCases": [
+    "Drafting and editing emails, reports, and other long-form text",
+    "Explaining, debugging, or generating code in a wide range of languages",
+    "Summarizing long PDFs, articles, or meeting transcripts",
+    "Brainstorming ideas, outlines, and study plans",
+    "Building a custom GPT that follows your team's tone and knowledge"
+  ],
+  "faq": [
+    {"question": "Is ChatGPT free?", "answer": "Yes, ChatGPT has a free tier; Plus, Pro, Team, and Enterprise plans unlock more capable models and advanced features."},
+    {"question": "Do I need an account?", "answer": "An account is required for full access; some basic chats are available without sign-in but with stricter limits."},
+    {"question": "Are my chats used for training?", "answer": "You can opt out of training in data controls; Team and Enterprise data are excluded from training by default."},
+    {"question": "Can I export my conversations?", "answer": "Yes, you can request an export of your data, including conversations, from the settings page."}
+  ]
 }

content/12.superlist.json

@@ -9,5 +9,29 @@
     "todo",
     "tool"
   ],
-  "logoSize": 308
+  "logoSize": 308,
+  "longDescription": "Superlist is a task and list manager built by several of the people behind the original Wunderlist. It blends classic to-do lists with rich notes, so a list can hold simple tasks, longer documents, attachments, and embedded content side by side.\n\nIt is designed to work both for individuals and small teams. Personal lists handle errands, projects, and reading queues, while shared lists support assignments, comments, and real-time collaboration for things like trip planning, sprint tasks, or content calendars.\n\nA free plan covers personal use, with paid plans unlocking team features, larger workspaces, and admin controls. Native apps on macOS, Windows, iOS, and Android sync with the web app, and offline support keeps lists usable without a connection.",
+  "category": "Productivity",
+  "developer": "Superlist GmbH",
+  "pricing": "Free with paid plans",
+  "platforms": ["Web", "macOS", "Windows", "iOS", "Android"],
+  "features": [
+    {"title": "Lists and notes together", "description": "Combine to-dos, rich notes, and attachments inside the same list instead of splitting tools."},
+    {"title": "Real-time collaboration", "description": "Share lists with teammates or family and edit, assign, and comment on items together live."},
+    {"title": "Cross-platform sync", "description": "Lists stay in sync across web, desktop, and mobile clients with offline support."},
+    {"title": "Sections and subtasks", "description": "Group items into sections and break large tasks into nested subtasks for clearer progress."},
+    {"title": "Reminders and due dates", "description": "Set due dates, reminders, and repeating tasks for both personal and shared items."}
+  ],
+  "useCases": [
+    "Managing personal projects, errands, and reading lists in one place",
+    "Coordinating shared tasks for a household or trip with family members",
+    "Running lightweight sprint or backlog lists with a small team",
+    "Keeping rich meeting notes and follow-up tasks attached to the same list"
+  ],
+  "faq": [
+    {"question": "Is Superlist free?", "answer": "Yes, Superlist has a free plan for personal use; paid plans unlock team workspaces and advanced features."},
+    {"question": "Does Superlist work offline?", "answer": "Yes, the desktop and mobile apps support offline use and sync changes when you reconnect."},
+    {"question": "Can I collaborate with others?", "answer": "Yes, lists can be shared with friends, family, or teammates with real-time editing, comments, and assignments."},
+    {"question": "Which platforms does Superlist support?", "answer": "Superlist runs on the web and as native apps for macOS, Windows, iOS, and Android."}
+  ]
 }