From 38d617bf02e138b66953821fd4502c9d133bf77b Mon Sep 17 00:00:00 2001 From: davegilligan Date: Sun, 24 May 2026 21:25:09 +0200 Subject: [PATCH] Add Tool info links and MCP section to tool cards and preview pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Dashboard: add "Tool info" link → preview.php on every tool card footer - Landing page: convert lt-card to div+onclick, add footer with "Learn more" link and copyable MCP slug pill - preview.php: add MCP Integration section per tool (slug, copy button, claude_desktop_config.json snippet, login note) - CSS: lt-card__footer, lt-card__mcp-pill, lt-preview-mcp section styles Co-Authored-By: Claude Sonnet 4.6 --- assets/css/dbn-tools-redesign.css | 119 ++++++++++++++++++++++++++++++ dashboard.php | 9 ++- index.php | 34 ++++++++- preview.php | 50 +++++++++++++ 4 files changed, 207 insertions(+), 5 deletions(-) diff --git a/assets/css/dbn-tools-redesign.css b/assets/css/dbn-tools-redesign.css index 051a83d..4a13bed 100644 --- a/assets/css/dbn-tools-redesign.css +++ b/assets/css/dbn-tools-redesign.css @@ -877,3 +877,122 @@ body[data-active-tool='citations'] .results { padding: 0.55rem 1rem; } } + +/* ── Landing page card footer (Tool info + MCP pill) ──────────── */ +.lt-card__footer { + display: flex; + align-items: center; + gap: 0.6rem; + flex-wrap: wrap; + margin-top: 1rem; + padding-top: 0.75rem; + border-top: 1px solid rgba(0, 32, 91, 0.08); +} +.lt-card__footer-link--primary { + font-family: ui-monospace, 'IBM Plex Mono', monospace; + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--dbn-blue); + text-decoration: none; +} +.lt-card__footer-link--primary:hover { color: var(--dbn-red); } +.lt-card__mcp-pill { + font-family: ui-monospace, 'IBM Plex Mono', monospace; + font-size: 0.64rem; + background: #f1f5f9; + border: 1px solid #e2e8f0; + color: #64748b; + padding: 2px 8px; + border-radius: 4px; + cursor: pointer; + white-space: nowrap; + margin-left: auto; + transition: background 0.15s; +} +.lt-card__mcp-pill:hover { background: #e2e8f0; } + +/* ── Preview page MCP section ─────────────────────────────────── */ +.lt-preview-mcp { + background: #f8fafc; + border-top: 1px solid #e5e7eb; + border-bottom: 1px solid #e5e7eb; + padding: 3rem 1.5rem; +} +.lt-preview-mcp__inner { + max-width: 760px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 1.25rem; +} +.lt-preview-mcp__head { + display: flex; + align-items: flex-start; + gap: 1rem; +} +.lt-preview-mcp__icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; margin-top: 0.15rem; } +.lt-preview-mcp__title { + font-size: 1.25rem; + font-weight: 700; + color: var(--dbn-blue); + margin: 0 0 0.25rem; +} +.lt-preview-mcp__sub { font-size: 0.9rem; color: #6b7280; margin: 0; } +.lt-preview-mcp__slug-row { + display: flex; + align-items: center; + gap: 0.75rem; + background: #fff; + border: 1px solid #e5e7eb; + border-radius: 8px; + padding: 0.7rem 1rem; + flex-wrap: wrap; +} +.lt-preview-mcp__slug-label { font-size: 0.8rem; color: #6b7280; flex-shrink: 0; } +.lt-preview-mcp__slug { + font-family: ui-monospace, 'IBM Plex Mono', monospace; + font-size: 0.9rem; + color: var(--dbn-blue); + font-weight: 600; + flex: 1; +} +.lt-preview-mcp__copy { + padding: 0.3rem 0.85rem; + background: var(--dbn-blue); + color: #fff; + border: none; + border-radius: 5px; + font-size: 0.78rem; + font-weight: 600; + cursor: pointer; + flex-shrink: 0; + transition: background 0.15s; +} +.lt-preview-mcp__copy:hover { background: var(--dbn-soft-blue); } +.lt-preview-mcp__snippet { display: flex; flex-direction: column; gap: 0.4rem; } +.lt-preview-mcp__snippet-label { + font-family: ui-monospace, 'IBM Plex Mono', monospace; + font-size: 0.7rem; + color: #9ca3af; + text-transform: uppercase; + letter-spacing: 0.06em; +} +.lt-preview-mcp__pre { + background: #1e293b; + color: #e2e8f0; + font-family: ui-monospace, 'IBM Plex Mono', monospace; + font-size: 0.82rem; + line-height: 1.65; + padding: 1.1rem 1.25rem; + border-radius: 8px; + overflow-x: auto; + margin: 0; +} +.lt-preview-mcp__note { + font-size: 0.82rem; + color: #9ca3af; + margin: 0; +} +.lt-preview-mcp__note a { color: var(--dbn-blue); } diff --git a/dashboard.php b/dashboard.php index 1c523da..121e191 100644 --- a/dashboard.php +++ b/dashboard.php @@ -125,6 +125,7 @@ $dashL = [ 'guide_link' => 'Guide', 'tech_link' => 'Technical', 'open_tool' => 'Open tool', + 'tool_info' => 'Tool info', ], 'no' => [ 'acct_header' => 'Konto', @@ -152,6 +153,7 @@ $dashL = [ 'guide_link' => 'Guide', 'tech_link' => 'Teknisk', 'open_tool' => 'Åpne verktøy', + 'tool_info' => 'Verktøyinfo', ], 'uk' => [ 'acct_header' => 'Обліковий запис', @@ -179,6 +181,7 @@ $dashL = [ 'guide_link' => 'Посібник', 'tech_link' => 'Технічний', 'open_tool' => 'Відкрити', + 'tool_info' => 'Про інструмент', ], 'pl' => [ 'acct_header' => 'Konto', @@ -206,6 +209,7 @@ $dashL = [ 'guide_link' => 'Poradnik', 'tech_link' => 'Techniczny', 'open_tool' => 'Otwórz', + 'tool_info' => 'Info', ], ]; $dl = $dashL[$uiLang] ?? $dashL['en']; @@ -462,9 +466,12 @@ window.DBN_TOOLS_LANG = ;

+ + + style="color:#374151; font-size:.88rem; text-decoration:none; white-space:nowrap;"> diff --git a/index.php b/index.php index 0b510a7..290f1c0 100644 --- a/index.php +++ b/index.php @@ -56,6 +56,19 @@ $toolsLogin = 'https://dobetternorge.no/tools-login.php?return=' . urlencode('/ $registerUrl = 'https://dobetternorge.no/register.php'; require_once __DIR__ . '/includes/tool-svgs.php'; + +$toolMcpSlugs = [ + 'transcribe' => 'dbn.transcribe_audio', + 'timeline' => 'dbn.timeline', + 'redact' => 'dbn.redact', + 'korrespond' => 'dbn.korrespond', + 'barnevernet' => 'dbn.barnevernet_analyze', + 'advocate' => 'dbn.advocate_brief', + 'deep-research' => 'dbn.deep_research', + 'discrepancy' => 'dbn.discrepancy_find', + 'corpus' => 'dbn.list_documents', + 'citations' => 'dbn.citation_graph', +]; ?> @@ -212,8 +225,14 @@ window.DBN_TOOLS_LANG = ; →
- $item): ?> - + $item): + $previewUrl = 'preview.php?tool=' . urlencode($slug) . ($uiLang !== 'en' ? '&lang=' . urlencode($uiLang) : ''); + $mcpSlug = $toolMcpSlugs[$slug] ?? null; +?> +
@@ -221,9 +240,16 @@ window.DBN_TOOLS_LANG = ;

- +
+ → + + + +
- + diff --git a/preview.php b/preview.php index 6230d0d..931d2c9 100644 --- a/preview.php +++ b/preview.php @@ -17,6 +17,20 @@ $tool = $tools[$slug]; $returnPath = '/'; $toolsLogin = 'https://dobetternorge.no/tools-login.php?return=' . urlencode($returnPath); +$toolMcpSlugs = [ + 'transcribe' => 'dbn.transcribe_audio', + 'timeline' => 'dbn.timeline', + 'redact' => 'dbn.redact', + 'korrespond' => 'dbn.korrespond', + 'barnevernet' => 'dbn.barnevernet_analyze', + 'advocate' => 'dbn.advocate_brief', + 'deep-research' => 'dbn.deep_research', + 'discrepancy' => 'dbn.discrepancy_find', + 'corpus' => 'dbn.list_documents', + 'citations' => 'dbn.citation_graph', +]; +$toolMcpSlug = $toolMcpSlugs[$slug] ?? null; + // ── Localized pitch + feature content (en / no; uk/pl fall back to en) ──────── $localizedContent = [ @@ -560,6 +574,42 @@ $sample = $samples[$slug]; + +
+
+
+ +
+

+

+
+
+
+ + + +
+
+

claude_desktop_config.json

+ 
{
+  "mcpServers": {
+    "dbn-tools": {
+      "command": "npx",
+      "args": ["-y", "@dobetternorge/mcp"],
+      "env": { "DBN_API_TOKEN": "YOUR_TOKEN" }
+    }
+  }
+}
+
+

+ Logg inn for å generere token og se full oppsettsguide.' + : 'API tokens require a Plus or Pro plan. Log in to generate a token and view the full setup guide.' ?> +

+
+
+ +

Do Better Norge members