---menu: - folder: getting-started order: weight - folder: guides order: weight - folder: examples order: weight---<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ title }}</title> <link rel="stylesheet" href="{{ '/styles.css' | url }}"> <link rel="stylesheet" href="{{ '/markdown.css' | url }}"> <link rel="stylesheet" data-name="vs/editor/editor.main" href="/monaco-editor/min/vs/editor/editor.main.css" /> <link href="{{ 'favicon-32x32.png' | url }}" rel="icon" type="image/png" sizes="32x32"> <meta name="description" content="{{ description }}"> </head> <body class="grid grid-cols-1 sm:grid-cols-6"> <nav class="col-span-1 p-4 border border-r sm:min-h-screen bg-blue-50"> <a href="{{ '/' | url }}"> <img src="{{ 'logo-v2.svg' | url }}" width="160" height="36.5" alt="Packup"> </a> <p class="mt-2 text-gray-800"> <a href="https://deno.land/x/packup@v0.1.11" class="hover:underline" target="_blank">Latest version <strong>v0.1.11</strong></a> </p> <ul class="mt-6 text-gray-800"> {% for section in menu %} <li class="mt-4"> <strong class="font-thin">{{ search.data(section.folder).title }}</strong> <ul> {% for page in search.pages(section.folder, section.order) %} <li class="mt-2"> {% if page.data.url == url %} <a class="px-2 py-1 text-blue-700 rounded bg-blue-100 hover:underline" href="{{ page.data.url | url }}" aria-current="page" title="{{ page.data.description }}">{{ page.data.title }}</a> {% else %} <a class="px-2 py-1 text-blue-700 hover:underline" href="{{ page.data.url | url }}" title="{{ page.data.description }}">{{ page.data.title }}</a> {% endif %} </li> {% endfor %} </ul> </li> {% endfor %} <li class="mt-4"> <strong class="font-thin">LINKS</strong> <ul> <li class="mt-1"> <a class="px-2 py-1 text-blue-700 hover:underline" href="https://github.com/kt3k/packup" target="_blank">GitHub 🔗</a> </li> <li class="mt-1"> <a class="px-2 py-1 text-blue-700 hover:underline" href="https://deno.land/x/packup" target="_blank">/x/packup 🔗</a> </li> </ul> <li> </ul> </nav> <main class="col-span-5 py-12 px-4 sm:px-20"> <div class="markdown-body"> {{ content | safe }} </div> <hr class="mt-5" /> <div class="mt-10 text-blue-700"> <a href="https://github.com/kt3k/packup/edit/main/docs{{ sourceFile }}">Edit this page in GitHub</a> </div> <div>{{ filename }}</div> </main> <script> var require = { paths: { vs: '/monaco-editor/min/vs' } }; window.addEventListener("DOMContentLoaded", () => { require(['vs/editor/editor.main'], () => { document.querySelectorAll(".markdown-body pre code").forEach(async (el) => { let mimeType = ''; const cl = el.classList; if (cl.contains('language-ts')) { mimeType = 'text/typescript'; } else if (cl.contains('language-js')) { mimeType = 'text/javascript'; } else if (cl.contains('language-json')) { mimeType = 'application/json'; } else if (cl.contains('language-html')) { mimeType = 'text/html'; } else if (cl.contains('language-css')) { mimeType = 'text/css'; } else if (cl.contains('language-sh')) { mimeType = 'text/shell'; } await monaco.editor.colorizeElement(el, { mimeType }); if (el.lastChild.tagName === "BR") { el.removeChild(el.lastChild); } }); }); }); </script> <script src="/monaco-editor/min/vs/loader.js" defer></script> </body></html>