feat(web): SEO/social cards, security headers, PWA icons, FAQ, status, get-involved, captions

site/layouts/404.html

@@ -1,7 +1,9 @@
 {{ define "main" }}
-<section class="doc">
+<section class="doc notfound">
   <h1>404</h1>
-  <p class="lead">This page could not be found.</p>
-  <p class="crumb"><a href="{{ "/" | relLangURL }}">← {{ T "backToHome" }}</a></p>
+  <p class="lead">This page could not be found. · No se encontró esta página.</p>
+  <p class="crumb">
+    <a href="/">← Home</a> · <a href="/es/">← Inicio</a>
+  </p>
 </section>
 {{ end }}

site/layouts/index.html

@@ -6,16 +6,27 @@
     <p class="tagline">{{ .Params.hero.tagline }}</p>
     <p class="lead">{{ .Params.hero.lead }}</p>
     {{ .Content }}
+    {{ with .Site.GetPage "/about" }}
+    <p><a class="text-link" href="{{ .RelPermalink }}">{{ T "aboutCta" }} →</a></p>
+    {{ end }}
     {{ partial "store-badges.html" . }}
   </div>
-  {{ $shot := resources.Get (printf "screenshots/%s/inventory.png" $lang) }}
+  {{ $shot := resources.Get (printf "screenshots/%s/home.png" $lang) }}
   {{ with $shot }}
   <div class="hero-shot">
-    <div class="phone"><img src="{{ .RelPermalink }}" alt="Tane inventory" loading="eager" /></div>
+    <div class="phone"><img src="{{ .RelPermalink }}" alt="Tane" loading="eager" /></div>
   </div>
   {{ end }}
 </section>
 
+<section class="status">
+  <span class="badge-beta">{{ T "statusBadge" }}</span>
+  <div>
+    <h2>{{ T "statusTitle" }}</h2>
+    <p>{{ T "statusBody" }}</p>
+  </div>
+</section>
+
 <section class="pillars">
   {{ range .Params.pillars }}
   <article class="pillar">
@@ -33,10 +44,23 @@
     {{ range $s := $screens }}
       {{ $img := resources.Get (printf "screenshots/%s/%s.png" $lang $s) }}
       {{ with $img }}
-      <div class="phone"><img src="{{ .RelPermalink }}" alt="Tane {{ $s }}" loading="lazy" /></div>
+      <figure class="phone-fig">
+        <div class="phone"><img src="{{ .RelPermalink }}" alt="Tane {{ $s }}" loading="lazy" /></div>
+        <figcaption>{{ T (printf "screenCap%s" (title $s)) }}</figcaption>
+      </figure>
       {{ end }}
     {{ end }}
   </div>
+  {{ $rtl := resources.Get "screenshots/rtl/inventory.png" }}
+  {{ with $rtl }}
+  <div class="rtl-note">
+    <div class="phone phone-sm"><img src="{{ .RelPermalink }}" alt="Tane RTL" loading="lazy" dir="rtl" /></div>
+    <div>
+      <h3>{{ T "rtlNoteTitle" }}</h3>
+      <p>{{ T "rtlNoteBody" }}</p>
+    </div>
+  </div>
+  {{ end }}
 </section>
 
 <section class="values">
@@ -46,6 +70,41 @@
   </ul>
 </section>
 
+<section class="faq">
+  <h2>{{ T "faqTitle" }}</h2>
+  <dl>
+    <dt>{{ T "faqFreeQ" }}</dt><dd>{{ T "faqFreeA" }}</dd>
+    <dt>{{ T "faqAccountQ" }}</dt><dd>{{ T "faqAccountA" }}</dd>
+    <dt>{{ T "faqOfflineQ" }}</dt><dd>{{ T "faqOfflineA" }}</dd>
+    <dt>{{ T "faqLegalQ" }}</dt><dd>{{ T "faqLegalA" }} <a href="{{ "/legal/seeds/" | relLangURL }}">→</a></dd>
+    <dt>{{ T "faqDataQ" }}</dt><dd>{{ T "faqDataA" }} <a href="{{ "/legal/privacy/" | relLangURL }}">→</a></dd>
+  </dl>
+</section>
+
+<section class="collab">
+  <h2>{{ T "collabTitle" }}</h2>
+  <p class="lead">{{ T "collabIntro" }}</p>
+  <div class="collab-grid">
+    <article>
+      <h3>{{ with .Site.Params.weblateURL }}<a href="{{ . }}">{{ T "collabTranslateT" }}</a>{{ else }}{{ T "collabTranslateT" }}{{ end }}</h3>
+      <p>{{ T "collabTranslateB" }}</p>
+    </article>
+    <article>
+      <h3>{{ T "collabTestT" }}</h3>
+      <p>{{ T "collabTestB" }}</p>
+    </article>
+    <article>
+      <h3>{{ with .Site.Params.sourceURL }}<a href="{{ . }}">{{ T "collabCodeT" }}</a>{{ else }}{{ T "collabCodeT" }}{{ end }}</h3>
+      <p>{{ T "collabCodeB" }}</p>
+    </article>
+    <article>
+      <h3>{{ T "collabFundT" }}</h3>
+      <p>{{ T "collabFundB" }}</p>
+    </article>
+  </div>
+  <p><a class="badge" href="mailto:{{ .Site.Params.email }}">{{ T "collabContact" }}</a></p>
+</section>
+
 <section class="get-it" id="get">
   <h2>{{ T "getItTitle" }}</h2>
   {{ partial "store-badges.html" . }}

site/layouts/partials/footer.html

@@ -5,7 +5,7 @@
         {{ if .IsPage }}<a href="{{ .RelPermalink }}">{{ .Title }}</a>{{ end }}
       {{ end }}
     </nav>
-    <p class="foot-note">{{ T "footerFreeSoftware" }}</p>
+    <p class="foot-note">{{ T "footerFreeSoftware" }}{{ with .Site.Params.sourceURL }} · <a href="{{ . }}">{{ T "footerSource" }}</a>{{ end }}</p>
     <p class="foot-note">
       {{ T "footerPublishedBy" }}
       <a href="{{ .Site.Params.publisherURL }}">{{ .Site.Params.publisher }}</a>

site/layouts/partials/head.html

@@ -1,16 +1,56 @@
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>{{ .Title }} · {{ .Site.Title }}</title>
-<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}" />
+{{ $desc := or .Description .Site.Params.description }}
+<meta name="description" content="{{ $desc }}" />
 <meta name="theme-color" content="#2F7D34" />
-<link rel="icon" href="/favicon.png" type="image/png" />
+<link rel="canonical" href="{{ .Permalink }}" />
+
+<link rel="icon" href="/favicon.ico" sizes="any" />
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
 <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+<link rel="manifest" href="/site.webmanifest" />
+
 {{ range .AllTranslations }}
 <link rel="alternate" hreflang="{{ .Language.LanguageCode }}" href="{{ .Permalink }}" />
 {{ end }}
-<meta property="og:title" content="{{ .Title }}" />
-<meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}" />
+
+{{ $og := printf "og-%s.png" .Site.Language.Lang | absURL }}
+<meta property="og:site_name" content="{{ .Site.Title }}" />
+<meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }} — {{ .Title }}{{ else }}{{ .Title }}{{ end }}" />
+<meta property="og:description" content="{{ $desc }}" />
 <meta property="og:type" content="website" />
-<meta property="og:image" content="/apple-touch-icon.png" />
+<meta property="og:url" content="{{ .Permalink }}" />
+<meta property="og:image" content="{{ $og }}" />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />
+<meta property="og:locale" content="{{ .Site.Language.LanguageCode }}" />
+{{ range .AllTranslations }}<meta property="og:locale:alternate" content="{{ .Language.LanguageCode }}" />
+{{ end }}
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:title" content="{{ .Title }}" />
+<meta name="twitter:description" content="{{ $desc }}" />
+<meta name="twitter:image" content="{{ $og }}" />
+
+{{ if .IsHome }}
+<script type="application/ld+json">
+{{ dict
+  "@context" "https://schema.org"
+  "@type" "SoftwareApplication"
+  "name" "Tane"
+  "applicationCategory" "LifestyleApplication"
+  "operatingSystem" "Android, iOS, Linux, Windows, macOS"
+  "description" $desc
+  "url" .Site.BaseURL
+  "image" $og
+  "license" "https://www.gnu.org/licenses/agpl-3.0.html"
+  "isAccessibleForFree" true
+  "offers" (dict "@type" "Offer" "price" "0" "priceCurrency" "EUR")
+  "publisher" (dict "@type" "Organization" "name" .Site.Params.publisher "url" .Site.Params.publisherURL)
+  | jsonify }}
+</script>
+{{ end }}
+
 {{ $css := resources.Get "css/main.css" | minify | fingerprint }}
 <style>{{ $css.Content | safeCSS }}</style>