feat: improved og image

Author: onmax

astro.config.ts

@@ -3,7 +3,7 @@ import tutorialkit from '@tutorialkit/astro'
 import { defineConfig } from 'astro/config'
 
 export default defineConfig({
-  site: 'https://tutorial.nimiq.com',
+  site: 'https://nimiq-tutorial.maximogarciamtnez.workers.dev/',
   devToolbar: {
     enabled: false,
   },

eslint.config.js

@@ -4,6 +4,7 @@ export default antfu({
   formatters: true,
   unocss: true,
   astro: true,
+  ignores: ['./public/widget.css', './public/widget.js'],
 }, {
   rules: {
     'no-console': 'off',

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@astrojs/vue": "^5.1.0",
     "@tutorialkit/react": "1.5.0",
+    "astro-seo": "^0.8.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "reka-ui": "^2.3.1",

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 // ESM version: Fetch Nimiq Feedback Widget assets using fetch and pathe
 // Usage: node scripts/fetch-widget-assets.js
 
+import { Buffer } from 'node:buffer'
 import fs from 'node:fs/promises'
 import { fileURLToPath } from 'node:url'
 import { dirname, join } from 'pathe'

scripts/fetch-widget-assets.js

@@ -1,3 +1,17 @@
+---
+import {SEO} from 'astro-seo'
+---
+
+<SEO
+  title="Nimiq Tutorial: Learn the Nimiq Web Client"
+  description="A hands-on, interactive tutorial for mastering the Nimiq Web Client. Step-by-step lessons, code samples, and instant feedback for web-based Nimiq integration."
+  image="/og-image.jpg"
+  twitterCardType="summary_large_image"
+  twitterSite="@nimiq"
+  twitterCreator="@nimiq"
+  canonical="https://nimiq-tutorial.maximogarciamtnez.workers.dev/"
+/>
+
 <slot name="title" />
 <slot name="links" />
 <slot name="meta" />

src/components/CustomHeadLinks.astro

@@ -137,7 +137,7 @@ onUnmounted(() => {
               </div>
 
               <!-- Success state -->
-              <div v-if="showSuccessMessage" class="h-64 flex flex-col items-center justify-center space-y-4 bg-green-50 dark:bg-green-900 px-6 py-4 rounded-xl">
+              <div v-if="showSuccessMessage" class="h-64 flex flex-col items-center justify-center rounded-xl bg-green-50 px-6 py-4 space-y-4 dark:bg-green-900">
                 <div class="i-ph:check-circle h-12 w-12 text-green-500" />
                 <div class="text-lg text-green-600 font-medium dark:text-green-400">
                   Thank you for your feedback!

src/components/FeedbackModal.vue

@@ -25,7 +25,7 @@
   --tk-elements-app-textColor: var(--colors-neutral);
   --tk-elements-app-backgroundColor: var(--colors-neutral-0);
   --tk-elements-app-borderColor: var(--colors-neutral-300);
-  
+
   /* Background tokens */
   --tk-background-primary: var(--colors-neutral-0);
   --tk-background-secondary: var(--colors-neutral-200);
@@ -162,7 +162,6 @@
   display: inherit !important;
 }
 
-
 /* Custom styling for Nimiq branding touches */
 .tk-topbar {
   background: var(--colors-neutral-gradient);
@@ -203,8 +202,7 @@
 :root {
   font-family:
     'Muli',
-    'Mulish'
-    'Inter',
+    'Mulish' 'Inter',
     system-ui,
     -apple-system,
     sans-serif;