docs: refresh homepage content, metadata and SEO signals

docs/.vitepress/config/shared.js

@@ -1,3 +1,15 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+const siteUrl = 'https://dashboard.flowfuse.com/'
+
+// keep in line with the canonical URLs, which use the .html form
+function toCanonicalPath (relativePath) {
+    return relativePath
+        .replace(/index\.md$/, '')
+        .replace(/\.md$/, '.html')
+}
+
 const defaultMetaDescription = 'Discover the features and benefits of Node-RED Dashboard 2.0, designed to streamline and enhance your Node-RED experience.'
 
 export default {
@@ -44,17 +56,28 @@ export default {
                 }
             ]
         ],
-        transformPageData (pageData) {
-            const canonicalUrl = `https://dashboard.flowfuse.com/${pageData.relativePath}`
-                .replace(/index\.md$/, '')
-                .replace(/\.md$/, '.html')
+        transformPageData (pageData, { siteConfig }) {
+            const canonicalUrl = siteUrl + toCanonicalPath(pageData.relativePath)
 
             pageData.frontmatter.head ??= []
             pageData.frontmatter.head.push([
                 'link',
                 { rel: 'canonical', href: canonicalUrl }
             ])
 
+            // link English and German versions only when both pages exist
+            const isGerman = pageData.relativePath.startsWith('de/')
+            const enPath = isGerman ? pageData.relativePath.slice(3) : pageData.relativePath
+            const dePath = `de/${enPath}`
+            if (fs.existsSync(path.join(siteConfig.srcDir, dePath)) && fs.existsSync(path.join(siteConfig.srcDir, 'en', enPath))) {
+                const enUrl = siteUrl + toCanonicalPath(enPath)
+                pageData.frontmatter.head.push(
+                    ['link', { rel: 'alternate', hreflang: 'en', href: enUrl }],
+                    ['link', { rel: 'alternate', hreflang: 'de', href: siteUrl + toCanonicalPath(dePath) }],
+                    ['link', { rel: 'alternate', hreflang: 'x-default', href: enUrl }]
+                )
+            }
+
             const metaDescription =
         pageData.frontmatter.description === undefined
             ? defaultMetaDescription
@@ -87,7 +110,15 @@ export default {
             }
         },
         sitemap: {
-            hostname: 'https://dashboard.flowfuse.com'
+            hostname: 'https://dashboard.flowfuse.com',
+            // cleanUrls drops .html from sitemap entries; match the canonical URLs instead
+            transformItems: (items) => items.map((item) => {
+                const url = item.url
+                if (url === '' || url.endsWith('/') || /\.[a-z]+$/.test(url)) {
+                    return item
+                }
+                return { ...item, url: `${url}.html` }
+            })
         },
         lastUpdated: true
     }

docs/components/FlowFuseAdvert.vue

@@ -1,9 +1,10 @@
 <template>
     <div class="flowfuse-advert">
         <div>
-            <h1>Elevate Node-RED with FlowFuse</h1>
-            <p>FlowFuse provides a complete platform to manage and scale your production Node-RED applications.</p>
+            <h2>Elevate Node-RED with FlowFuse</h2>
+            <p>FlowFuse provides a complete platform to build, manage and scale your production Node-RED applications, with built-in AI to help your team move faster.</p>
             <ul>
+                <li>AI Assistant to Build Dashboards from Natural Language</li>
                 <li>Simplified Hosting and Maintenance</li>
                 <li>Centralized Management of your Node-RED Deployments</li>
                 <li>Built-in Version Control &amp; Robust Development Pipelines</li>
@@ -12,8 +13,8 @@
             </ul>
             <a href="https://flowfuse.com/product/why-flowfuse/">Learn More</a>
         </div>
-        <div>
-            <img src="../assets/images/screenshot-flowfuse-applications.png" alt="Image of the FlowFuse Platform">
+        <div class="screenshot">
+            <img src="../assets/images/screenshot-flowfuse-home.png" alt="FlowFuse platform home showing hosted and remote instances alongside the FlowFuse Expert AI assistant">
         </div>
     </div>
 </template>
@@ -28,12 +29,36 @@
   gap: 36px;
 }
 
-.flowfuse-advert h1 {
+.flowfuse-advert h2 {
+  border-top: none;
+  margin-top: 0;
+  padding-top: 0;
   color: var(--vp-c-flowfuse);
 }
 
+.flowfuse-advert .screenshot {
+  align-self: start;
+  /* leave room for the reflection below the frame */
+  margin-bottom: 96px;
+}
+
 .flowfuse-advert img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border: 10px solid #1f2329;
+  border-radius: 14px;
+  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.5);
+  -webkit-box-reflect: below 2px linear-gradient(transparent 75%, rgba(255, 255, 255, 0.18));
+}
 
+@media (max-width: 768px) {
+  .flowfuse-advert {
+    grid-template-columns: 1fr;
+  }
+  .flowfuse-advert .screenshot {
+    margin-bottom: 48px;
+  }
 }
 
 .flowfuse-advert a {

docs/components/RecommendedReading.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="recommended-reading">
         <a v-for="a in articles" :key="a.title" :href="a.url">
-            <img :src="a.image" :alt="a.title">
+            <img :src="a.image" :alt="a.title" width="1600" height="900" loading="lazy">
+            <span class="title">{{ a.title }}</span>
         </a>
     </div>
 </template>
@@ -11,17 +12,17 @@ const articles = [
     {
         title: 'Getting Started with Dashboard',
         url: 'https://flowfuse.com/blog/2024/03/dashboard-getting-started/',
-        image: 'https://flowfuse.com/img/getting-started-with-dashboard-2-XtCp3zOvCC-1120.avif'
+        image: '/images/recommended-reading/getting-started-with-dashboard-2.png'
     },
     {
         title: 'Personalised Multi-user Dashboards with FlowFuse Dashboard',
         url: 'https://flowfuse.com/blog/2024/01/dashboard-2-multi-user/',
-        image: 'https://flowfuse.com/img/tile-dashboard-2-multi-user-UrjNxC416v-1120.avif'
+        image: '/images/recommended-reading/dashboard-2-multi-user.png'
     },
     {
         title: 'Building a Custom Video Player in FlowFuse Dashboard',
         url: 'https://flowfuse.com/blog/2023/12/dashboard-0-10-0/',
-        image: 'https://flowfuse.com/img/tile-dashboard-0-10-0-g--bJXNlBL-1120.avif'
+        image: '/images/recommended-reading/dashboard-0-10-0.png'
     }
 ]
 </script>
@@ -38,12 +39,26 @@ const articles = [
         border: 2px solid transparent;
     }
     .recommended-reading img {
+        display: block;
+        width: 100%;
+        height: auto;
         transition: 0.15s transform;
     }
+    .recommended-reading .title {
+        display: block;
+        padding: 8px 4px;
+        font-weight: 500;
+        color: var(--vp-c-text-1);
+    }
     .recommended-reading a:hover {
         border: 2px solid var(--vp-c-brand-1);
     }
     .recommended-reading a:hover img {
         transform: scale(1.05);
     }
+    @media (max-width: 640px) {
+        .recommended-reading {
+            grid-template-columns: 1fr;
+        }
+    }
 </style>

docs/components/RecommendedTutorials.vue

@@ -6,11 +6,6 @@
                 <PlayIcon class="play-icon" />
             </div>
         </a>
-        <a class="more">
-            <div class="overlay">
-                <label>...More Coming Soon!</label>
-            </div>
-        </a>
     </div>
 </template>
 
@@ -26,6 +21,11 @@ const videos = [
         title: 'Visualising Data in Node-RED & Dashboard',
         url: 'https://youtu.be/Ecno0EuLyKQ?si=AW2OUpVwJgQU_qli',
         image: 'https://website-data.s3.eu-west-1.amazonaws.com/Tutorial+Thumbnail+-+Data+Visualisation.jpg'
+    },
+    {
+        title: 'Writing Custom Templates - FlowFuse Dashboard',
+        url: 'https://www.youtube.com/watch?v=7bj_DFnRtU8&list=PLpcyqc7kNgp3TWYwWzC7iJtN8XtEhKqlY&index=3',
+        image: 'https://i.ytimg.com/vi/7bj_DFnRtU8/maxresdefault.jpg'
     }
 ]
 </script>
@@ -69,9 +69,4 @@ const videos = [
         padding: 6px;
         padding-left: 9px;
     }
-    .recommended-tutorials .more {
-        pointer-events: none;
-        background-color: #EEF2FF;
-        border: 1px solid #818CF8;
-    }
 </style>

docs/de/index.md

@@ -1,5 +1,8 @@
 ---
 layout: home
+title: Node-RED Dashboard 2.0 - FlowFuse Dashboard
+titleTemplate: false
+description: "Node-RED-Dashboards mit FlowFuse Dashboard 2.0 erstellen: Open-Source-Paket installieren, Widgets und Beispiele entdecken, Migration planen."
 head:
   - ['script', { src: '//js-eu1.hsforms.net/forms/embed/v2.js' }]
   - ['script', {}, "function checkHbspt() { if (typeof window.hbspt === 'undefined') { setTimeout(checkHbspt, 50); return; } else { hbspt.forms.create({
@@ -20,17 +23,18 @@ hero:
       text: Erste Schritte
       link: /de/getting-started
     - theme: alt
-      text: Widget-Sammlung
-      link: /de/getting-started
+      text: Widgets entdecken
+      link: /de/nodes/widgets
     - theme: alt
-      text: Auf GitHub ansehen
-      link: https://github.com/FlowFuse/node-red-dashboard
+      text: Von Node-RED Dashboard migrieren
+      link: /de/user/migration
 ---
 
 <script setup>
     import { ref } from 'vue';
 
     import HomeExtension from './../components/HomeExtension.vue';
+    import DashboardExamples from './../components/DashboardExamples.vue';
     import RecommendedTutorials from './../components/RecommendedTutorials.vue';
     import RecommendedReading from './../components/RecommendedReading.vue';
     import FlowFuseAdvert from './../components/FlowFuseAdvert.vue';
@@ -50,14 +54,26 @@ hero:
   <h2>Verfügbar im Palette-Manager von Node-RED</h2>
   <code v-if="!copied">@flowfuse/node-red-dashboard <CopyIcon @click="copy"/></code>
   <code v-else>kopiert!</code>
+  <p class="aka">Auch bekannt als Node-RED Dashboard 2.0 · Open Source unter Apache 2.0</p>
 </div>
 
-## Laden Sie unser E-Book herunter
+## Erste Schritte
 
-<div class="ebook-advert">
-    <img style="max-height: 300px;" src="./../assets/images/ebook-dashboard-render.png" />
-    <div id="ebook-form"></div>
-</div>
+1. Öffnen Sie im Node-RED-Editor das Menü und wählen Sie **Manage Palette**.
+2. Suchen Sie im Tab **Install** nach `@flowfuse/node-red-dashboard` und installieren Sie es. Hinweis: Dies ist nicht das veraltete Paket `node-red-dashboard`.
+3. Fügen Sie einem Flow einen `ui-button`-Knoten hinzu und deployen Sie. Base, Seite, Gruppe und Theme werden automatisch erstellt, und Ihr Dashboard ist unter `/dashboard` erreichbar.
+
+Sie bevorzugen die Kommandozeile? Führen Sie `npm install @flowfuse/node-red-dashboard` in Ihrem Node-RED-Benutzerverzeichnis aus (meist `~/.node-red`) und starten Sie Node-RED neu. Alles Weitere erklärt der [Leitfaden für die ersten Schritte](/de/getting-started).
+
+## Dashboard-Showcase
+
+Eine kleine Sammlung von Beispiel-Dashboards mit Links zu weiteren Informationen. Wenn Sie ein Dashboard haben, das Sie hier zeigen möchten, melden Sie sich gerne bei uns!
+
+<DashboardExamples />
+
+## Von Node-RED Dashboard migrieren
+
+Das ursprüngliche Paket `node-red-dashboard` wurde im Juni 2024 als veraltet markiert, und FlowFuse Dashboard (Node-RED Dashboard 2.0) ist der empfohlene Nachfolger. Beide können parallel laufen, sodass Sie schrittweise migrieren können. Der [Migrationsservice](https://flowfuse.com/platform/dashboard/) konvertiert unterstützte Knoten, während einige Widgets und Templates manuell angepasst werden müssen. [Zum Migrationsleitfaden](/de/user/migration).
 
 ## Empfohlene Tutorials
 
@@ -67,6 +83,61 @@ hero:
 
 <RecommendedReading />
 
+## Laden Sie unser E-Book herunter
+
+<div class="ebook-advert">
+    <img style="max-height: 300px;" src="./../assets/images/ebook-dashboard-render.png" alt="Cover des FlowFuse Dashboard E-Books" />
+    <div id="ebook-form"></div>
+</div>
+
+## Häufige Fragen
+
+<div class="faq">
+
+<details>
+<summary>Ist FlowFuse Dashboard kostenlos?</summary>
+
+Ja. Das Paket `@flowfuse/node-red-dashboard` ist Open Source unter der Apache-2.0-Lizenz und kann in jeder Node-RED-Umgebung installiert werden. FlowFuse-Hosting und Plattformdienste sind vom Paket unabhängig.
+
+</details>
+
+<details>
+<summary>Ist Node-RED Dashboard veraltet?</summary>
+
+Das ursprüngliche Paket `node-red-dashboard` [ist veraltet](https://flowfuse.com/blog/2024/06/dashboard-1-deprecated/). FlowFuse Dashboard, auch bekannt als Node-RED Dashboard 2.0, ist der gepflegte Nachfolger. Node-RED selbst ist nicht veraltet.
+
+</details>
+
+<details>
+<summary>Brauche ich ein FlowFuse-Konto?</summary>
+
+Nein. Sie können das Paket ohne FlowFuse-Konto in jeder selbst verwalteten Node-RED-Umgebung installieren.
+
+</details>
+
+<details>
+<summary>Funktioniert mein bestehendes Dashboard ohne Änderungen?</summary>
+
+Planen Sie eine Überprüfung der Migration ein. Unterstützte Knoten können mit dem Migrationsservice konvertiert werden, andere Teile müssen eventuell neu erstellt werden. AngularJS-Templates erfordern besondere Aufmerksamkeit, da FlowFuse Dashboard Vue verwendet.
+
+</details>
+
+<details>
+<summary>Kann ich es auf einem Smartphone oder Tablet nutzen?</summary>
+
+Ja. Layouts sind responsiv und unterstützen konfigurierbare Breakpoints. Sie können ein Dashboard auch [als App auf Ihrem Smartphone installieren](/de/user/pwa).
+
+</details>
+
+<details>
+<summary>Können verschiedene Benutzer unterschiedliche Daten sehen?</summary>
+
+Ja. Konfigurieren Sie clientspezifisches Routing für die Widgets, die es benötigen, und richten Sie eine Authentifizierung ein, wenn die Anwendung Benutzer identifizieren muss. Siehe den [Multi-User-Leitfaden](/de/user/multi-tenancy).
+
+</details>
+
+</div>
+
 <FlowFuseAdvert />
 
 </HomeExtension>
@@ -90,6 +161,32 @@ hero:
   gap: 12px;
 }
 
+.cta-palette .aka {
+  margin-top: 12px;
+  font-size: 0.875rem;
+  color: var(--vp-c-text-2);
+}
+
+.faq details {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 0 16px;
+  margin: 0 0 8px;
+  background-color: var(--vp-c-bg-soft);
+}
+
+.faq summary {
+  cursor: pointer;
+  margin: 0;
+  padding: 10px 0;
+  line-height: 24px;
+  font-weight: 600;
+}
+
+.faq details p {
+  margin: 4px 0 12px;
+}
+
 .icon {
   width: 20px;
   &:hover {