⭐️ Initial Commit ❤️

.gitignore

···
+# OS files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Editor files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# Deno
+.deno/

README.md

···
+# Deno Links - Lightweight self-hosted Link in Bio (Deploy for free in less than a minute!)
+
+A minimal, fast, and easy-to-customize link-in-bio page built with Deno. All content and styling controlled by a single `config.json` file.
+
+## Features
+
+- **Zero dependencies** - Just Deno runtime
+- **No build step** - TypeScript works natively
+- **Single config file** - All content and styling in `config.json`
+- **Fast** - Lightweight, styled with Tailwind CDN
+- **Easy to customize** - Edit config and refresh
+
+## Prerequisites (for local testing / development)
+
+Install Deno
+
+```bash
+# macOS/Linux
+curl -fsSL https://deno.land/x/install/install.sh | sh
+
+# Windows
+irm https://deno.land/install.ps1 | iex
+```
+
+## Quick Start
+
+```bash
+1. Clone or download this repository
+
+2. Modify the config to suit your needs
+config.json
+
+3. Add your images to static/images/
+  
+  - banner.png (recommended: 800x320px)
+  - profile.png (recommended: 200x200px)
+  - logos/ (folder for link icons: 24 logos included)
+
+4. Edit config.json with your info
+
+5. Start the development server 
+
+`deno task dev`
+
+```
+
+Visit http://localhost:8001
+
+--
+
+## Configuration
+
+Edit `config.json` to update your site. All changes take effect on page refresh (with `deno task dev`).
+
+### Site Settings
+
+```json
+{
+  "site": {
+    "title": "Your Name - Follow Me !",
+    "description": "Your description",
+  }
+}
+```
+
+### Theme Colors
+
+```json
+{
+  "theme": {
+    "gradientFrom": "rgb(254, 205, 211)",
+    "gradientVia": "rgb(252, 231, 243)",
+    "gradientTo": "rgb(147, 197, 253)",
+    "defaultCardBgColor": "rgb(249, 168, 212)",
+    "defaultCardBorder": "rgb(249, 168, 212)",
+    "textColor": "white"
+  }
+}
+```
+
+The `defaultCardBgColor` and `defaultCardBorder` are used for all link cards unless overridden per-link.
+
+### Images
+
+Place your images in `static/images/` and reference them:
+
+```json
+{
+  "images": {
+    "banner": "/images/banner.png",
+    "profile": "/images/profile.png",
+    "background": "/images/nnnoise.svg"
+  }
+}
+```
+
+### Sections
+
+The config uses a `sections` array to organize your links. Each section can have an optional title and contains an array of links.
+
+**Section properties:**
+- `title` (optional): Section header text
+- `links`: Array of link objects
+
+**Link properties:**
+- `title`: Link title text
+- `description`: Link description text
+- `href`: URL to link to
+- `image` (optional): Path to icon image, or `null` for placeholder with letter filler
+- `featured` (optional): Set to `true` to add shimmer animation
+- `cardBgColor` (optional): Override background color for this specific link
+- `cardBorder` (optional): Override border color for this specific link
+
+## Project Structure
+
+```
+deno-links/
+├── config.json          # Your personal config (create from example)
+├── server.ts            # HTTP server (~130 lines)
+├── template.ts          # HTML generator (~284 lines)
+├── deno.json            # Deno tasks and config
+├── static/
+│   └── images/          # Your images
+│       └── logos/       # Link icons/logos
+└── README.md
+```
+
+## Deployment 
+
+### Deno Deploy (Free)
+
+1. Push to GitHub
+2. Visit https://console.deno.com
+3. Create new project from GitHub repo
+4. Set Entrypoint to server.ts
+4. Done! Auto-deploys on push
+
+## Customization Tips
+
+1. **Change colors**: Edit `theme` object in config.json
+2. **Add sections**: Add more objects to `sections` array
+3. **Add links**: Add items to any section's `links` array
+4. **Per-link colors**: Add `cardBgColor` and `cardBorder` to individual links
+5. **Change layout**: Edit `template.ts`
+6. **Add new features**: Edit `server.ts` and `template.ts`
+
+## License
+
+MIT

config.json

···
+{
+  "site": {
+    "title": "Your Name - Follow Me !",
+    "description": "Your description here"
+  },
+  "theme": {
+    "gradientFrom": "rgb(250, 208, 196)",
+    "gradientVia": "rgb(255, 154, 158)",
+    "gradientTo": "rgb(255, 94, 77)",
+    "defaultCardBgColor": "rgb(244, 114, 182)",
+    "defaultCardBorder": "rgb(244, 114, 182)",
+    "textColor": "white"
+  },
+  "images": {
+    "banner": "/images/banner.png",
+    "profile": "/images/profile.png"
+  },
+  "sections": [
+    {
+      "title": "Hi I'm [Your Name] !! Here are my links...",
+      "links": [
+        {
+          "title": "My Website 💖",
+          "description": "Check out my pckt.blog",
+          "href": "https://pckt.blog/r/XHLDG2GDN7",
+          "image": "/images/logos/pckt.jpg",
+          "featured": true
+        },
+        {
+          "title": "Deno Links on Tangled",
+          "description": "Check out my code!",
+          "href": "https://tangled.org/@did:plc:v46ojbiop5ebs5h7gaomixcc/deno-links",
+          "image": "/images/logos/tangled.jpg",
+          "featured": false
+        },
+        {
+          "title": "Support Me ☕",
+          "description": "Buy me a coffee!",
+          "href": "https://ko-fi.com/abcbrookie",
+          "image": "/images/logos/kofi.png",
+          "featured": false
+        }
+      ]
+    },
+    {
+      "title": "Check these out! 👇",
+      "links": [
+        {
+          "title": "Strike",
+          "description": "Send me bitcoins",
+          "href": "https://strike.me/brooke",
+          "image": "/images/logos/strike.png",
+          "cardBgColor": "rgb(167, 139, 250)",
+          "cardBorder": "rgb(167, 139, 250)"
+        },
+        {
+          "title": "Check out my mixtape",
+          "description": "It's out of this world 🚀",
+          "href": "https://soundcloud.com/",
+          "image": "/images/logos/soundcloud.png",
+          "cardBgColor": "rgb(167, 139, 250)",
+          "cardBorder": "rgb(167, 139, 250)"
+        }
+      ]
+    }
+  ],
+  "footer": {
+    "text": "Made with 💖 by Brookie - ",
+    "linkText": "Back to Top",
+    "textColor": "white"
+  }
+}

deno.json

···
+{
+  "tasks": {
+    "dev": "deno run --allow-net --allow-read --allow-env --watch server.ts",
+    "start": "deno run --allow-net --allow-read --allow-env server.ts"
+  },
+  "fmt": {
+    "useTabs": false,
+    "lineWidth": 80,
+    "indentWidth": 2,
+    "semiColons": true,
+    "singleQuote": false,
+    "proseWrap": "preserve"
+  },
+  "lint": {
+    "rules": {
+      "tags": ["recommended"]
+    }
+  }
+}

server.ts

···
+import type { Config } from "./types.ts";
+import { renderPage } from "./template.ts";
+
+async function loadConfig(): Promise<Config> {
+  const configText = await Deno.readTextFile("./config.json");
+  return JSON.parse(configText);
+}
+
+async function serveStaticFile(pathname: string): Promise<Response> {
+  try {
+    // Security: prevent directory traversal
+    const sanitizedPath = pathname.replace(/\.\./g, "");
+    const filePath = `./static${sanitizedPath}`;
+
+    const file = await Deno.readFile(filePath);
+
+    // Determine content type
+    const ext = pathname.split(".").pop()?.toLowerCase();
+    const contentTypes: Record<string, string> = {
+      "html": "text/html",
+      "css": "text/css",
+      "js": "application/javascript",
+      "json": "application/json",
+      "png": "image/png",
+      "jpg": "image/jpeg",
+      "jpeg": "image/jpeg",
+      "gif": "image/gif",
+      "svg": "image/svg+xml",
+      "ico": "image/x-icon",
+    };
+
+    const contentType = contentTypes[ext || ""] || "application/octet-stream";
+
+    return new Response(file, {
+      headers: { "content-type": contentType },
+    });
+  } catch (error) {
+    if (error instanceof Deno.errors.NotFound) {
+      return new Response("Not found", { status: 404 });
+    }
+    console.error("Error serving static file:", error);
+    return new Response("Internal server error", { status: 500 });
+  }
+}
+
+async function handler(req: Request): Promise<Response> {
+  const url = new URL(req.url);
+
+  // Serve homepage
+  if (url.pathname === "/") {
+    try {
+      const config = await loadConfig();
+      const html = renderPage(config);
+      return new Response(html, {
+        headers: { "content-type": "text/html; charset=utf-8" },
+      });
+    } catch (error) {
+      console.error("Error rendering page:", error);
+      return new Response("Internal server error", { status: 500 });
+    }
+  }
+
+  // Serve static files
+  return serveStaticFile(url.pathname);
+}
+
+const port = parseInt(Deno.env.get("PORT") || "8001");
+
+console.log(`🦕 Server running at http://localhost:${port}/`);
+console.log(`📝 Edit config.json to update content and styling`);
+
+Deno.serve({ port }, handler);

template.ts

···
+import type { Config, Link, Section } from "./types.ts";
+
+// Utility functions
+function escapeHtml(text: string): string {
+  const map: Record<string, string> = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#039;",
+  };
+  return text.replace(/[&<>"']/g, (m) => map[m]);
+}
+
+// Component rendering functions
+function renderLinkCard(link: Link, config: Config): string {
+  const bgColor = link.cardBgColor || config.theme.defaultCardBgColor;
+  const borderColor = link.cardBorder || config.theme.defaultCardBorder;
+  const shimmerClass = link.featured ? "shimmer-card" : "";
+
+  const imageContent = link.image
+    ? `<img class="w-16 h-16 ml-4 rounded-full object-cover"
+             src="${link.image}"
+             alt="${escapeHtml(link.title)}"
+             loading="lazy">`
+    : `<div class="w-16 h-16 ml-4 rounded-full bg-white/20 flex items-center justify-center text-2xl font-bold">
+         ${escapeHtml(link.title.charAt(0).toUpperCase())}
+       </div>`;
+
+  return `
+    <div class="group">
+      <a href="${link.href}" target="_blank" rel="noopener noreferrer">
+        <div class="shadow-xl text-white border-2 min-h-28 rounded-2xl flex items-center hover:scale-105 transition-transform duration-300 overflow-hidden relative ${shimmerClass}"
+             style="background-color: ${bgColor}; border-color: ${borderColor}; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);">
+          <figure class="flex-shrink-0 relative z-10">
+            ${imageContent}
+          </figure>
+          <div class="flex-1 p-4 relative z-10">
+            <h2 class="text-xl md:text-2xl font-semibold">${
+    escapeHtml(link.title)
+  }</h2>
+            <p class="lg:text-xl">${link.description}</p>
+          </div>
+        </div>
+      </a>
+    </div>
+  `;
+}
+
+function renderSection(section: Section, config: Config): string {
+  const links = section.links.map((link) => renderLinkCard(link, config)).join(
+    "\n",
+  );
+
+  if (section.title) {
+    return `
+    <div class="md:text-xl px-4 h-20 bg-white shadow-md flex items-center justify-center rounded-2xl font-semibold border-2 border-black">
+      ${escapeHtml(section.title)}
+    </div>
+    ${links}
+  `;
+  }
+
+  return links;
+}
+
+export function renderPage(config: Config): string {
+  const allSections = config.sections.map((section) =>
+    renderSection(section, config)
+  ).join("\n");
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="${escapeHtml(config.site.description)}">
+
+  <!-- Open Graph -->
+  <meta property="og:type" content="website">
+  <meta property="og:title" content="${escapeHtml(config.site.title)}">
+  <meta property="og:description" content="${
+    escapeHtml(config.site.description)
+  }">
+  <meta property="og:image" content="${config.images.profile}">
+
+  <title>${escapeHtml(config.site.title)}</title>
+
+  <!-- Tailwind CSS CDN -->
+  <script src="https://cdn.tailwindcss.com"></script>
+
+  <style>
+    html {
+      background-color: ${config.theme.gradientTo};
+      min-height: 100vh;
+    }
+
+    body {
+      background: linear-gradient(to bottom, ${config.theme.gradientFrom}, ${config.theme.gradientVia}, ${config.theme.gradientTo});
+      background-attachment: fixed;
+      min-height: 100vh;
+    }
+
+    @keyframes shimmer {
+      100% {
+        transform: translateX(100%);
+      }
+    }
+
+    .shimmer-card::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
+      transform: translateX(-100%);
+      pointer-events: none;
+      z-index: 1;
+      animation: shimmer 3s;
+    }
+
+    .group:hover .shimmer-card::before {
+      animation: shimmer 3s infinite;
+    }
+
+    .divider {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin: 1rem 0;
+    }
+
+    .divider::before,
+    .divider::after {
+      content: "";
+      flex: 1;
+      height: 1px;
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+
+    .divider::before {
+      margin-right: 1rem;
+    }
+
+    .divider::after {
+      margin-left: 1rem;
+    }
+  </style>
+</head>
+
+<body class="min-h-screen">
+  <div class="w-full max-w-2xl min-h-screen mx-auto pt-4 px-4 relative">
+    <!-- Banner -->
+    <img class="object-cover object-left-bottom w-full h-40 shadow-xl rounded-xl"
+         src="${config.images.banner}"
+         alt="Banner" />
+
+    <!-- Profile Picture -->
+    <div class="absolute top-24 left-8">
+      <div class="w-24 h-24 rounded-full border-4 border-white flex items-center justify-center overflow-hidden">
+        <img class="w-full h-full object-cover"
+             src="${config.images.profile}"
+             alt="Profile" />
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="w-full mx-auto px-2 space-y-4 mt-8">
+      <!-- Sections -->
+      ${allSections}
+
+      <!-- Footer -->
+      <div class="w-full h-16 py-4 text-center font-bold" style="color: ${config.footer.textColor};">
+        ${escapeHtml(config.footer.text)}
+        <a href="#" onclick="scrollToTop(); return false;" class="underline">${
+    escapeHtml(config.footer.linkText)
+  }</a>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    function scrollToTop() {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      });
+    }
+  </script>
+</body>
+</html>`;
+}

types.ts

···
+export interface Link {
+  title: string;
+  description: string;
+  href: string;
+  image?: string | null;
+  featured?: boolean;
+  cardBgColor?: string;
+  cardBorder?: string;
+}
+
+export interface Section {
+  title?: string;
+  links: Link[];
+}
+
+export interface Config {
+  site: {
+    title: string;
+    description: string;
+  };
+  theme: {
+    gradientFrom: string;
+    gradientVia: string;
+    gradientTo: string;
+    defaultCardBgColor: string;
+    defaultCardBorder: string;
+    textColor: string;
+  };
+  images: {
+    banner: string;
+    profile: string;
+    background: string;
+  };
+  sections: Section[];
+  footer: {
+    text: string;
+    linkText: string;
+    textColor: string;
+  };
+}