Skip to main content

Dappjak Labs Dev Blog

Development blog and documentation for Dappjak Labs projects.

Dappjak Labs Dev Blog

Dappjak Labs Dev Blog

Links

dApp source

Overview

A SvelteKit-based development blog and documentation site for Dappjak Labs projects. The blog provides a platform for documenting development progress, technical decisions, and guides for all dApps under the Dappjak Labs umbrella.

Technology Stack

  • Framework: SvelteKit 2.x with Svelte 5
  • Content Management: Velite 0.2.x (type-safe content management)
  • Styling: Tailwind CSS 4.x
  • UI Framework: Svecodocs - Documentation framework for Svelte
  • Markdown Processing: MDX with component support
  • Deployment: Internet Computer Protocol (ICP) - Fully decentralized hosting
  • Package Manager: pnpm

Key Features

Type-Safe Content Management

  • Uses Velite for type-safe content with auto-generated TypeScript types
  • YAML frontmatter validation
  • Auto-generated slugs, table of contents, and metadata

Content Structure

All content organized into sections:

  • Overview - High-level guides and introductions
  • Components - UI component documentation
  • Configuration - Setup and configuration guides
  • Utilities - Helper functions and utilities

MDX Component Support

Pre-built components available for rich content:

  • Button - Styled button component with multiple variants
  • Callout - Info/warning/error callouts
  • DemoContainer - Container for interactive demos

URL Routing

Clean, root-level URLs:

  • / → Homepage
  • /getting-started → Getting started guide
  • /components/button → Component documentation
  • /configuration/theme → Configuration guides

Content Schema

Each content file requires frontmatter with:

		---
title: Page Title
description: SEO description
section: Overview  # Must be valid section enum
navLabel: Optional Custom Nav Label  # Optional
---

Auto-generated fields:

  • slug - File path as slug
  • slugFull - Full slug with leading slash
  • path - Original file path
  • content - Processed HTML
  • toc - Table of contents array

Development Workflow

Adding New Content

  1. Create .md file in src/content/ or appropriate subdirectory
  2. Add required frontmatter fields
  3. Write content using Markdown + optional MDX components
  4. Changes auto-reload in dev mode

Using MDX Components

		<script>
  import { Button, Callout } from "@svecodocs/kit";
</script>
 
<Callout type="info" title="Note">
  Important information here
</Callout>
 
<Button variant="brand">Click me</Button>

Code Blocks

Supports syntax highlighting with metadata:

		```typescript title="example.ts"
const example: string = "typed code";
```

Build Process

  1. Velite processes all content → .velite/ output
  2. update-velite-output.js post-processes the output
  3. build-search-data.js generates search index
  4. Vite builds the SvelteKit application

Development Commands

		pnpm dev              # Run content watch + dev server
pnpm dev:content      # Watch content changes only
pnpm dev:svelte       # Run SvelteKit dev server only
pnpm build            # Production build
pnpm preview          # Preview production build
pnpm check            # Type checking

Search Functionality

Search data is auto-generated at build time from processed content. The search index includes:

  • Page titles and descriptions
  • Content sections
  • Code snippets

Theming

Multiple themes available from @svecodocs/kit/themes/*.css:

  • Orange (default)
  • Emerald
  • Additional themes

All themes support light/dark mode automatically.

Technical Architecture

Project Structure

		.
├── src/
│   ├── content/              # All markdown content
│   ├── lib/
│   │   ├── navigation.ts     # Navigation config
│   │   └── site-config.ts    # Site metadata
│   └── routes/
│       ├── (docs)/           # Route group (no URL prefix)
│       │   ├── +layout.svelte
│       │   ├── +page.svelte  # Homepage
│       │   └── [...slug]/    # Dynamic routes
│       └── api/              # API endpoints
├── scripts/
│   ├── update-velite-output.js
│   └── build-search-data.js
├── velite.config.js          # Content configuration
├── svelte.config.js          # SvelteKit config
└── mdsx.config.js            # MDX config

Navigation

Configured in src/lib/navigation.ts using createNavigation() from @svecodocs/kit, automatically generated from content structure.

Site Configuration

Located in src/lib/site-config.ts:

  • Site title and description
  • SEO keywords
  • Open Graph images
  • Additional metadata

Decentralized Deployment

The dev blog is deployed on the Internet Computer Protocol (ICP), making it a fully decentralized application rather than relying on traditional cloud hosting like Cloudflare Pages.

Benefits of ICP Deployment

  • Censorship Resistant - No central authority can take down the blog
  • Permanent Hosting - Content persists on the blockchain
  • Web3 Native - Aligns with the decentralized nature of all Dappjak Labs projects
  • True Ownership - The blog is controlled via canister smart contracts
  • Fast & Efficient - ICP provides web-speed performance despite being on-chain

Canister Details

Use Cases

  1. Development Blog - Document progress on all Dappjak Labs projects
  2. Technical Documentation - Detailed guides for each dApp
  3. API Documentation - Component and API reference
  4. Configuration Guides - Setup and deployment instructions
  5. Knowledge Base - Searchable repository of technical knowledge