Skip to content

docs(templates): add all 7 live published n8n blueprints with canonical links and branded visuals #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DevdeskApp merged 1 commit into from
Nov 3, 2026
Merged

docs(templates): add all 7 live published n8n blueprints with canonical links and branded visuals #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 23 additions & 6 deletions .vitepress/config.mts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,15 @@ export default defineConfigWithTheme<DefaultTheme.Config & { n8nNodeVersion: str
title: 'DevDeskApp Docs',
description: 'Official Documentation for DevDeskApp suite, developer utilities, and n8n-nodes-devdeskapp community node.',
cleanUrls: true,
markdown: {
// n8n expressions such as `{{ $json.formatted }}` appear in inline code.
// Mark inline code v-pre so Vue does not try to evaluate them as template interpolation.
config(md) {
const renderInline = md.renderer.rules.code_inline!
md.renderer.rules.code_inline = (...args) =>
renderInline(...args).replace(/^<code/, '<code v-pre')
},
},
// Git commit time of each page: shown as "Last updated" and emitted as <lastmod> in sitemap.xml.
lastUpdated: true,
sitemap: {
Expand Down Expand Up @@ -111,9 +120,13 @@ export default defineConfigWithTheme<DefaultTheme.Config & { n8nNodeVersion: str
{ text: '📋 Templates Catalog', link: '/templates/' },
{ text: '🏛️ Architecture & Solutions', link: '/solutions/' },
{ text: `📦 NPM Package (v${n8nNode.version})`, link: N8N_NODE_VERSIONS_URL },
{ text: '🌟 n8n Template #21017', link: 'https://n8n.io/workflows/21017-format-json-and-secure-hr-payloads-with-devdeskapp-utilities' },
{ text: '💰 n8n Template #21130', link: 'https://n8n.io/workflows/21130-automate-salary-and-in-hand-ctc-calculations-with-devdeskapp' },
{ text: '🛡️ n8n Template #21376', link: 'https://n8n.io/workflows/21376' },
{ text: '🌟 Developer Suite Blueprint', link: 'https://n8n.io/workflows/21017-format-json-and-secure-hr-payloads-with-devdeskapp-utilities/' },
{ text: '💰 CTC Salary Engine Blueprint', link: 'https://n8n.io/workflows/21130-generate-indian-ctc-offers-and-payroll-breakdowns-with-devdeskapp/' },
{ text: '🛡️ Payment Webhook Sanitizer Blueprint', link: 'https://n8n.io/workflows/21376-sanitize-and-audit-payment-webhooks-with-devdeskapp-json-and-crypto-tools/' },
{ text: '🤖 AI LLM JSON Ingestion Blueprint', link: 'https://n8n.io/workflows/21593-sanitize-and-ingest-ai-llm-json-into-postgres-with-devdeskapp-and-slack/' },
{ text: '📄 CTC Offer Letter Blueprint', link: 'https://n8n.io/workflows/21594-generate-indian-ctc-offer-letters-with-devdeskapp-google-docs-gmail-and-slack/' },
{ text: '📊 Meta CAPI Lead Sync Blueprint', link: 'https://n8n.io/workflows/21595-hash-and-sync-leads-to-meta-capi-with-devdeskapp-google-sheets-and-slack/' },
{ text: '📝 Notion to WordPress Blueprint', link: 'https://n8n.io/workflows/21596-publish-seo-safe-notion-blog-posts-to-wordpress-with-devdeskapp-and-slack/' },
{ text: '🐙 Node GitHub Repo', link: 'https://github.com/DevdeskApp/n8n-nodes-devdeskapp' },
{ text: '🌐 DevDeskApp Web App', link: 'https://www.devdeskapp.com' }
]
Expand Down Expand Up @@ -151,9 +164,13 @@ export default defineConfigWithTheme<DefaultTheme.Config & { n8nNodeVersion: str
{
text: 'Official Blueprints',
items: [
{ text: '🌟 Developer Suite (#21017)', link: '/templates/developer-suite' },
{ text: '💰 CTC Salary Engine (#21130)', link: '/templates/ctc-salary-engine' },
{ text: '🛡️ Payment Webhook Sanitizer (#21376)', link: '/templates/payment-webhook-sanitizer' }
{ text: '🌟 Developer Suite', link: '/templates/developer-suite' },
{ text: '💰 CTC Salary Engine', link: '/templates/ctc-salary-engine' },
{ text: '🛡️ Payment Webhook Sanitizer', link: '/templates/payment-webhook-sanitizer' },
{ text: '🤖 AI LLM JSON Ingestion', link: '/templates/ai-llm-postgres-ingest' },
{ text: '📄 CTC Offer Letter Generator', link: '/templates/offer-letter-generator' },
{ text: '📊 Meta CAPI Lead Sync', link: '/templates/meta-capi-lead-sync' },
{ text: '📝 Notion to WordPress Publisher', link: '/templates/notion-wordpress-publisher' }
]
}
],
Expand Down
50 changes: 26 additions & 24 deletions .vitepress/theme/components/HeroShowcase.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ const tabs = [
<span class="pulse-ping-ring"></span>
<span class="pulse-ping-dot"></span>
</span>
<span class="badge-text-full">⚡ 330+ Tools • Official n8n Community Node • <NodeVersion /> Live</span>
<span class="badge-text-short">⚡ 330+ Tools • n8n Node <NodeVersion /> Live</span>
<span class="badge-text-full">⚡ 340+ Web Tools • Official n8n Community Node • <NodeVersion /> Live</span>
<span class="badge-text-short">⚡ 340+ Tools • n8n Node <NodeVersion /> Live</span>
</div>

<!-- Main Headline with DevDeskApp Gradient Shimmer -->
Expand All @@ -42,8 +42,8 @@ const tabs = [

<!-- Body Description -->
<p class="hero-subtitle">
Run <strong>330+ developer utilities</strong>, formatters, and financial calculation engines directly inside your
<strong>n8n workflows</strong> with <span class="highlight-privacy">zero cloud data leaks</span> and sub-millisecond CPU speed.
Use <strong>340+ developer tools</strong> in your browser, and run the core JSON, crypto, text and CTC operations inside your
<strong>n8n workflows</strong> with <span class="highlight-privacy">no external API calls</span>, in microseconds per item.
</p>

<!-- Action Buttons -->
Expand Down Expand Up @@ -83,23 +83,23 @@ const tabs = [
<!-- Metrics Strip -->
<div class="metrics-strip">
<div class="metric-box">
<span class="metric-number">330+</span>
<span class="metric-tag">Client Tools</span>
<span class="metric-number">340+</span>
<span class="metric-tag">Web Tools</span>
</div>
<div class="metric-sep"></div>
<div class="metric-box">
<span class="metric-number">&lt; 0.2ms</span>
<span class="metric-tag">Execution Time</span>
<span class="metric-number">19</span>
<span class="metric-tag">n8n Operations</span>
</div>
<div class="metric-sep"></div>
<div class="metric-box">
<span class="metric-number">0 KB</span>
<span class="metric-tag">Network Leak</span>
<span class="metric-number">7</span>
<span class="metric-tag">n8n Templates</span>
</div>
<div class="metric-sep"></div>
<div class="metric-box">
<span class="metric-number">100%</span>
<span class="metric-tag">In-Memory Node</span>
<span class="metric-number">0</span>
<span class="metric-tag">External API Calls</span>
</div>
</div>
</div>
Expand All @@ -118,7 +118,7 @@ const tabs = [
<span>n8n Execution Sandbox</span>
</div>
<div class="speed-badge">
<span class="check-icon">✓</span> 0.18ms
<span class="check-icon">✓</span> &lt; 0.01 ms / item
</div>
</div>

Expand Down Expand Up @@ -146,44 +146,46 @@ const tabs = [
<pre class="term-code"><code>{
<span class="c-key">"service"</span>: <span class="c-str">"payment"</span>,
<span class="c-key">"status"</span>: <span class="c-str">"success"</span>,
<span class="c-key">"empId"</span>: <span class="c-num">1042</span>,
<span class="c-key">"traceId"</span>: <span class="c-cyan">"8f2a1b9c-4e3d-4c8a-9f1e-2b3c4d5e6f7a"</span>
<span class="c-key">"empId"</span>: <span class="c-num">1042</span>
}</code></pre>
</div>

<!-- Tab 2: Crypto -->
<div v-if="activeTab === 'crypto'" class="tab-content">
<div class="term-comment">// Payload: Secret Verification Token</div>
<div class="term-comment">// Input: text to fingerprint</div>
<div class="term-input">devdeskapp_production_webhook_secret_key</div>
<div class="term-divider">
<span>🔐 DevDeskApp: SHA-256 Digest</span>
</div>
<pre class="term-code"><code>{
<span class="c-key">"algorithm"</span>: <span class="c-str">"sha256"</span>,
<span class="c-key">"hash"</span>: <span class="c-cyan">"c0053e1a0673f4e3c35b80a1846b0a034f78de1f74075f782c5890772714041b"</span>,
<span class="c-key">"tamperProof"</span>: <span class="c-num">true</span>
<span class="c-key">"input"</span>: <span class="c-str">"devdeskapp_production_webhook_secret_key"</span>,
<span class="c-key">"hash"</span>: <span class="c-cyan">"7ac4c84d335afd794bde94eb049d2259cc348357a96538929f263f7c5911a686"</span>
}</code></pre>
</div>

<!-- Tab 3: CTC Calculator -->
<div v-if="activeTab === 'ctc'" class="tab-content">
<div class="term-comment">// Input: Annual Compensation Breakdown</div>
<div class="term-comment">// Input: annual CTC</div>
<div class="term-input">annualCtc: ₹24,00,000 | basic: 50%</div>
<div class="term-divider">
<span>💼 DevDeskApp: Indian Payroll Engine</span>
</div>
<pre class="term-code"><code>{
<span class="c-key">"monthlyGross"</span>: <span class="c-num">₹2,00,000</span>,
<span class="c-key">"takeHomeInHand"</span>: <span class="c-cyan">₹1,45,000</span>,
<span class="c-key">"employeePf"</span>: <span class="c-num">₹12,000</span>,
<span class="c-key">"professionalTax"</span>: <span class="c-num">₹200</span>
<span class="c-key">"monthlyGross"</span>: <span class="c-num">198200</span>,
<span class="c-key">"monthlyInHand"</span>: <span class="c-cyan">163075</span>,
<span class="c-key">"breakdown"</span>: {
<span class="c-key">"employeePf"</span>: <span class="c-num">1800</span>,
<span class="c-key">"professionalTax"</span>: <span class="c-num">200</span>,
<span class="c-key">"estimatedMonthlyTds"</span>: <span class="c-num">33125</span>
}
}</code></pre>
</div>
</div>

<!-- Terminal Bottom Bar -->
<div class="terminal-bottombar">
<span class="status-live">● Synchronous Native Execution</span>
<span class="status-live">● Real node output (v0.1.6)</span>
<span class="status-sec">Zero External Network Calls</span>
</div>
</div>
Expand Down
14 changes: 7 additions & 7 deletions .vitepress/theme/components/QuickNavGrid.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const cards: NavCard[] = [
category: 'Architecture & Overview',
badge: 'Core Concept',
badgeType: 'indigo',
description: 'Overview of DevDeskApp node, in-memory zero-latency execution, and security value proposition.',
description: 'What the DevDeskApp node does, its 5 resources, and why it runs in-process with no external API calls.',
link: '/n8n/',
linkText: 'n8n Overview',
icon: '🚀'
Expand All @@ -27,7 +27,7 @@ const cards: NavCard[] = [
category: 'Setup & Deployment',
badge: 'UI & Docker',
badgeType: 'cyan',
description: 'Step-by-step setup via n8n Community Nodes UI, Docker container images, npm package, or environment variables.',
description: 'Install from Settings → Community Nodes, inside Docker, or manually with npm in ~/.n8n/nodes.',
link: '/n8n/installation',
linkText: 'Installation Steps',
icon: '📦'
Expand All @@ -37,7 +37,7 @@ const cards: NavCard[] = [
category: 'Native Node Engine',
badge: '10 Operations',
badgeType: 'blue',
description: 'Full schema specifications, input parameter types, and sample execution outputs for all 10 native operations.',
description: 'Parameters, output fields and real sample outputs for all 19 operations.',
link: '/n8n/operations',
linkText: 'Operations Reference',
icon: '⚙️'
Expand All @@ -47,7 +47,7 @@ const cards: NavCard[] = [
category: 'Official n8n.io Recipes',
badge: '2 Official Blueprints',
badgeType: 'emerald',
description: 'Explore official blueprints #21017 and #21130 published on n8n.io with pre-wired sample payloads and validation steps.',
description: 'The 7 templates published on n8n.io, each with its pipeline, a real run and any fix needed after import.',
link: '/templates/',
linkText: 'Templates Catalog',
icon: '🌟',
Expand All @@ -58,7 +58,7 @@ const cards: NavCard[] = [
category: 'Function Calling & Tools',
badge: 'LangChain & OpenAI',
badgeType: 'purple',
description: 'Wire DevDeskApp into n8n AI Agents as zero-latency deterministic tools for payroll, hashing, and JSON compression.',
description: 'Attach DevDeskApp to the Tool port of an n8n AI Agent for exact payroll maths, hashing and JSON minifying.',
link: '/solutions/ai-agents',
linkText: 'AI Agent Guide',
icon: '🤖',
Expand All @@ -69,7 +69,7 @@ const cards: NavCard[] = [
category: 'Security & Benchmarks',
badge: 'Zero-Leak Audit',
badgeType: 'indigo',
description: 'Deep-dive security benchmarks comparing local native Node execution vs external cloud REST APIs.',
description: 'Measured local node timings compared with calling cloud utility APIs over HTTP.',
link: '/solutions/',
linkText: 'Architecture & Solutions',
icon: '🛡️'
Expand All @@ -79,7 +79,7 @@ const cards: NavCard[] = [
category: 'Performance Tuning',
badge: 'Optimization',
badgeType: 'amber',
description: 'High-throughput concurrency tips, memory management, defensive error handling, and automated CI/CD.',
description: 'Paired items, On Error handling, batch sizes, AI tool setup and safe hashing.',
link: '/solutions/best-practices',
linkText: 'Best Practices',
icon: '⚡'
Expand Down
37 changes: 36 additions & 1 deletion .vitepress/theme/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,8 @@ html, body {
border: 1px solid var(--vp-c-border);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
overflow: hidden;
background: #141e30;
/* Figures use the light DevDeskApp theme (devdeskapp.com), so frame them on the light surface. */
background: #f8fafc;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
max-width: 100%;
}
Expand Down Expand Up @@ -380,3 +381,37 @@ html, body {
margin: -4px 0;
}
}

/* Status badges used across template pages (previously referenced but never defined) */
.badge-live {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
font-weight: 700;
line-height: 1.4;
padding: 3px 10px;
border-radius: 999px;
color: #047857;
background: rgba(16, 185, 129, 0.12);
border: 1px solid rgba(16, 185, 129, 0.35);
white-space: nowrap;
}

.dark .badge-live {
color: #34d399;
}

.badge-live.badge-indigo { color: #4338ca; background: rgba(99, 102, 241, 0.12); border-color: rgba(99, 102, 241, 0.35); }
.badge-live.badge-green { color: #047857; background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.35); }
.badge-live.badge-purple { color: #7e22ce; background: rgba(168, 85, 247, 0.12); border-color: rgba(168, 85, 247, 0.35); }
.badge-live.badge-blue { color: #1d4ed8; background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.35); }
.badge-live.badge-amber { color: #b45309; background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.35); }
.badge-live.badge-pink { color: #be185d; background: rgba(236, 72, 153, 0.12); border-color: rgba(236, 72, 153, 0.35); }

.dark .badge-live.badge-indigo { color: #a5b4fc; }
.dark .badge-live.badge-green { color: #34d399; }
.dark .badge-live.badge-purple { color: #d8b4fe; }
.dark .badge-live.badge-blue { color: #93c5fd; }
.dark .badge-live.badge-amber { color: #fcd34d; }
.dark .badge-live.badge-pink { color: #f9a8d4; }
Loading
Loading