nuxt: Migrate e-mail signature

nuxt/components/content/EmailSignatureExample.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+// Handbook-only doc widget: renders the actual FlowFuse email signature table
+// live, unwrapped in prose styling, so people can select-and-copy it straight
+// into Gmail's signature settings. Apple Mail needs the literal HTML instead
+// (see branding.md) - "Show code" reveals that same Shiki-rendered block used
+// elsewhere in the handbook, passed in via the default slot.
+const showCode = ref(false)
+</script>
+
+<template>
+  <div class="not-prose rounded-lg border border-gray-200 p-5">
+    <table cellpadding="0" cellspacing="0" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:14px; color:#333; width:auto; margin-top:0; margin-bottom:0">
+      <tr>
+        <td style="padding-right:10px; vertical-align:middle;">
+          <img src="https://flowfuse.com/images/flowfuse-icon.png" alt="FlowFuse icon" width="48" height="48" style="display:block;border:0;border-radius:0;outline:none;width:65px;height:65px;">
+        </td>
+        <td style="padding-left:4px; vertical-align:middle;">
+          <div style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:600;font-size:15.6px;color:#1F2937;line-height:1.1;">Full Name</div>
+          <div style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:400;font-size:13.2px;color:#6B7280;line-height:1.2;margin-top:2px;">Job Title – FlowFuse</div>
+          <!-- spacer -->
+          <div style="height:8px;font-size:1px;line-height:1px;">&nbsp;</div>
+          <div style="font-size:12px;line-height:14px;">
+            <a href="https://flowfuse.com/" style="color:rgb(17,85,204);text-decoration:none;">https://flowfuse.com/</a>
+          </div>
+        </td>
+      </tr>
+    </table>
+    <button
+      type="button"
+      class="mt-4 flex items-center gap-1 text-xs font-medium text-gray-500 hover:text-gray-700"
+      @click="showCode = !showCode"
+    >
+      <UIcon :name="showCode ? 'i-lucide-eye-off' : 'i-lucide-code-2'" class="size-3.5" />
+      {{ showCode ? 'Hide code' : 'Show code' }}
+    </button>
+    <div v-show="showCode" class="mt-2 w-full email-signature-example-code">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style>
+.email-signature-example-code pre {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+</style>

nuxt/content/handbook/design/branding.md

@@ -181,15 +181,34 @@ Always include it in external emails (clients, partners, vendors, community memb
 
 If you're using Gmail in your browser:
 
-1. Go to [flowfuse.com/email-signature/](/email-signature/)
-2. Copy the signature displayed on the page
-3. Paste it into your Gmail signature settings following [these instructions](https://support.google.com/mail/answer/8395?hl=en&co=GENIE.Platform%3DDesktop)
-4. Update the placeholder text with your personal information
-
+1. Select and copy the signature below
+2. Paste it into your Gmail signature settings following [these instructions](https://support.google.com/mail/answer/8395?hl=en&co=GENIE.Platform%3DDesktop)
+3. Update the placeholder text with your personal information
+
+:::email-signature-example
+```html
+<table cellpadding="0" cellspacing="0" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:14px; color:#333; width:auto; margin-top:0; margin-bottom:0">
+    <tr>
+        <td style="padding-right:10px; vertical-align:middle;">
+            <img src="https://flowfuse.com/images/flowfuse-icon.png" alt="FlowFuse icon" width="48" height="48" style="display:block;border:0;border-radius:0;outline:none;width:65px;height:65px;">
+        </td>
+        <td style="padding-left:4px; vertical-align:middle;">
+            <div style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:600;font-size:15.6px;color:#1F2937;line-height:1.1;">Full Name</div>
+            <div style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:400;font-size:13.2px;color:#6B7280;line-height:1.2;margin-top:2px;">Job Title – FlowFuse</div>
+            <!-- spacer -->
+            <div style="height:8px;font-size:1px;line-height:1px;">&nbsp;</div>
+            <div style="font-size:12px;line-height:14px;">
+                <a href="https://flowfuse.com/" style="color:rgb(17,85,204);text-decoration:none;">https://flowfuse.com/</a>
+            </div>
+        </td>
+    </tr>
+</table>
+```
+:::
 
 #### Apple Mail
 
-If you're using the Apple Mail app, you can follow [this video tutorial](https://www.youtube.com/watch?v=Gb4dbik1YPI) which covers most of the steps below. The main difference is that we're providing you with the [signature code](https://github.com/FlowFuse/website/blob/main/src/email-signature.njk) directly, so you can skip the HTML generation part.
+If you're using the Apple Mail app, you can follow [this video tutorial](https://www.youtube.com/watch?v=Gb4dbik1YPI) which covers most of the steps below. The main difference is that we're providing you with the signature code directly (click "Show code" above), so you can skip the HTML generation part.
 
 Here are the detailed steps:
 
@@ -201,7 +220,7 @@ Here are the detailed steps:
 
 4. Find the file with the `*.mailsignature` extension and open it in a text editor.
 
-5. Replace everything below the line `Mime-Version: [version]` with the code from [email-signature.njk](https://github.com/FlowFuse/website/blob/main/src/email-signature.njk).
+5. Replace everything below the line `Mime-Version: [version]` with the code shown above.
 
 6. Save the file, then press **Command + I** to open the Info window and check **Locked**.
 

nuxt/redirects.ts

@@ -42,6 +42,7 @@ export const redirects: Record<string, NitroRouteRules> = {
     '/platform/cloud/': { redirect: { to: 'https://app.flowfuse.com/account/create/', statusCode: 301 } },
     '/solutions/device-management/': { redirect: { to: '/use-cases/edge-connectivity/', statusCode: 301 } },
     '/blueprints/manufacturing/andon-task/': { redirect: { to: '/blueprints/manufacturing/andon-system/', statusCode: 301 } },
+    '/email-signature/': { redirect: { to: '/handbook/design/branding/#email-signature', statusCode: 301 } },
     '/landing/technology-migration-1/': { redirect: { to: '/vs/kepware/', statusCode: 301 } },
     '/landing/technology-migration-2/': { redirect: { to: '/vs/kepware/', statusCode: 301 } },
     '/blog/2025/10/the-ai-orchestation-hype/': { redirect: { to: '/blog/2025/10/the-ai-orchestration-hype/', statusCode: 301 } },