feat: add social meta tags

src/components/WelcomeModal.tsx

@@ -18,9 +18,12 @@ import { LocalStoreContext } from "~/stores";
 import createAccordion from "./Accordion";
 import typer from "typer-js";
 import "typer-js/dist/typer.min.css";
-import { getDisplayDate, shuffle } from "~/util";
+import { getDisplayDate, getHost, shuffle } from "~/util";
 import { capitalize } from "froebel";
 
+export const description =
+  "Räppli ist eine freie Web App zur Erstellung von Schweizerischen Rechnungen inklusive QR-Code. Erfasse deine Rechnungspositionen und erhalte unmittelbar eine druckbare Rechnung.";
+
 const WelcomeModal: Component = (props) => {
   const [localState, setLocalState, localStateMounted] =
     useContext(LocalStoreContext)!;
@@ -32,7 +35,7 @@ const WelcomeModal: Component = (props) => {
 
   onMount(function () {
     let adjectives = [
-      "schweizerischen",
+      "Schweizerischen",
       "anständigen",
       "umfassenden",
       "erfrischenden",
@@ -193,7 +196,7 @@ const WelcomeModal: Component = (props) => {
             <div
               class="mt-16 shareon flex flex-wrap items-center justify-center"
               data-title="Hast du schon von Räppli gehört? Es ist ein praktisches Web App, womit Schweizer QR Rechnungen inkl. Rechnungspositionen erstellt werden können und es ist komplett kostenlos! Probiere es aus unter:"
-              data-url="https://rappli.ch"
+              data-url={getHost()}
             >
               <ShareonLink provider="facebook" />
               <ShareonLink provider="linkedin" />
@@ -211,22 +214,10 @@ const WelcomeModal: Component = (props) => {
           </div>
         </div>
 
-        <div class="mt-20 prose max-w-none">
+        <div class="mt-20 prose">
           <section>
             <h1 id="welcome-quickstart">Einleitung</h1>
-            <p>
-              Sit aute excepteur labore eu non eiusmod nulla irure irure
-              officia. Veniam pariatur dolore fugiat mollit cillum. Et id
-              occaecat occaecat non duis. Veniam excepteur do labore sit nulla
-              veniam non ad nisi qui proident adipisicing esse adipisicing ea.
-              Officia do esse magna dolore irure voluptate pariatur consequat
-              esse voluptate. Incididunt incididunt mollit nostrud laborum
-              cupidatat proident tempor reprehenderit officia exercitation
-              labore. Commodo minim fugiat mollit commodo. Sit anim est aute.
-              Ullamco non deserunt deserunt aliquip labore sunt esse Lorem aute
-              in nisi mollit irure deserunt labore. Lorem veniam in consequat
-              ipsum consequat sint consectetur ex anim magna.
-            </p>
+            <p>{description}</p>
           </section>
 
           <section class="mt-16">

src/routes/index.tsx

@@ -10,7 +10,7 @@ import {
   onMount,
 } from "solid-js";
 import SwissInvoice, { InvoiceData } from "~/components/SwissInvoice";
-import { Style, Title } from "solid-meta";
+import { Meta, Style, Title } from "solid-meta";
 import Page from "~/components/Page";
 import LufraiLogoWww from "~icons/custom/lufrai-logo-www";
 import AppIcon from "~icons/custom/icon";
@@ -34,8 +34,8 @@ import {
   UiStoreContext,
 } from "~/stores";
 import Big from "big.js";
-import { getDisplayDateFromUnix, roundToStep } from "~/util";
-import WelcomeModal from "~/components/WelcomeModal";
+import { getDisplayDateFromUnix, getHost, roundToStep } from "~/util";
+import WelcomeModal, { description } from "~/components/WelcomeModal";
 import Markdown from "~/components/Markdown";
 // TODO: This should be a direct import of "shareon/css", but "shareon/css" doesnt work yet because solid-start / vite do not properly detect that as css
 import "../shareon.css";
@@ -136,9 +136,18 @@ export default function Home() {
         printTypeTitles[uiState.printType]
     );
 
+    const externalTitle = "Räppli - Web App für Schweizerische Rechnungen";
+
     return (
       <div class="break-words whitespace-normal">
-        <Title>{titleMemo()}</Title>
+        <Title>{import.meta.env.SSR ? externalTitle : titleMemo()}</Title>
+        <Meta name="description" content={description} />
+        <Meta property="og:description" content={description} />
+        <Meta property="og:image" content={`${getHost()}/social.png`} />
+        <Meta property="og:title" content={externalTitle} />
+        <Meta property="og:url" content={getHost()} />
+        <Meta name="twitter:card" content="summary_large_image" />
+        <Meta name="twitter:site" content="@katy_wings" />
         <Show when={localState.logo}>
           <div class="flex justify-end items-center h-20 mb-5">
             <img

src/util.tsx

@@ -63,3 +63,5 @@ export const shuffle = (list: any[]) => {
 
   return list;
 };
+
+export const getHost = () => "https://rappli.ch";