10.6 KB
pages.html
{{template "docs.html" .}}
{{define "title"}}Pages{{end}}
{{define "content"}}
<article class="space-y-12">
<header>
<div class="w-12 h-1 rounded-full bg-gradient-to-r from-violet-500 to-cyan-500 mb-6"></div>
<h1 class="text-3xl font-bold text-white mb-3">Pages</h1>
<p class="text-[#888] text-lg">Create, organize, and publish content on your site.</p>
</header>
<!-- Intro cards -->
<section class="space-y-6">
<div class="grid sm:grid-cols-3 gap-4">
<div class="border border-white/10 rounded-lg p-5">
<div class="text-violet-400 font-medium mb-2">Create</div>
<p class="text-sm text-[#888]">Build pages with the admin dashboard, AI assistant, or REST API.</p>
</div>
<div class="border border-white/10 rounded-lg p-5">
<div class="text-cyan-400 font-medium mb-2">Organize</div>
<p class="text-sm text-[#888]">Nest pages under parents to create site hierarchy and URL structure.</p>
</div>
<div class="border border-white/10 rounded-lg p-5">
<div class="text-emerald-400 font-medium mb-2">Publish</div>
<p class="text-sm text-[#888]">Toggle visibility and preview drafts before going live.</p>
</div>
</div>
</section>
<!-- Tip callout -->
<div class="flex gap-3 p-4 rounded-lg border border-emerald-400/20 bg-emerald-400/[0.03]">
<svg class="w-5 h-5 text-emerald-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
<div>
<span class="text-emerald-400 font-medium text-sm">Tip</span>
<p class="text-sm text-[#888] mt-1">You can also create pages through the <a href="/docs/ai-assistant" class="text-violet-400 hover:text-violet-300">AI assistant</a> or the <a href="/docs/api" class="text-violet-400 hover:text-violet-300">REST API</a>. The AI can generate full pages with content, layout, and styling from a single prompt.</p>
</div>
</div>
<section class="space-y-6">
<div>
<h2 class="text-xl font-semibold text-white">Creating pages</h2>
<p class="text-[#888] mt-2">Every page has a title, a slug (the URL path), and HTML content. You can create pages through the admin dashboard or by asking the <a href="/docs/ai-assistant" class="text-violet-400 hover:text-violet-300">AI assistant</a>.</p>
</div>
<div class="border border-white/10 rounded-lg divide-y divide-white/10">
<div class="p-4 flex flex-col sm:flex-row sm:items-start gap-2 sm:gap-4">
<code class="text-sm text-violet-400 bg-violet-400/10 px-2 py-0.5 rounded font-medium w-fit">Title</code>
<div>
<p class="text-white text-sm">The display name of the page</p>
<p class="text-[#666] text-sm mt-1">Example: "About Us"</p>
</div>
</div>
<div class="p-4 flex flex-col sm:flex-row sm:items-start gap-2 sm:gap-4">
<code class="text-sm text-violet-400 bg-violet-400/10 px-2 py-0.5 rounded font-medium w-fit">Slug</code>
<div>
<p class="text-white text-sm">The URL path for the page</p>
<p class="text-[#666] text-sm mt-1">Auto-generated from title: "about-us". Your page lives at <code class="text-[#888]">/about-us</code></p>
</div>
</div>
<div class="p-4 flex flex-col sm:flex-row sm:items-start gap-2 sm:gap-4">
<code class="text-sm text-violet-400 bg-violet-400/10 px-2 py-0.5 rounded font-medium w-fit">HTML</code>
<div>
<p class="text-white text-sm">The page content</p>
<p class="text-[#666] text-sm mt-1">Full HTML with support for <a href="/docs/templates" class="text-violet-400 hover:text-violet-300">template functions</a></p>
</div>
</div>
<div class="p-4 flex flex-col sm:flex-row sm:items-start gap-2 sm:gap-4">
<code class="text-sm text-violet-400 bg-violet-400/10 px-2 py-0.5 rounded font-medium w-fit">Published</code>
<div>
<p class="text-white text-sm">Whether the page is visible to visitors</p>
<p class="text-[#666] text-sm mt-1">Unpublished pages are only visible to admins</p>
</div>
</div>
</div>
</section>
<section class="space-y-6">
<div>
<h2 class="text-xl font-semibold text-white">Page hierarchy</h2>
<p class="text-[#888] mt-2">Pages can be nested under parent pages to create a site structure. Child pages inherit the parent's URL path.</p>
</div>
<div class="border border-white/10 rounded-lg p-5 bg-[#1a1a1a]/50">
<div class="text-sm font-mono space-y-1">
<div class="text-white">/</div>
<div class="text-white pl-4">/about</div>
<div class="text-[#888] pl-8">/about/team</div>
<div class="text-[#888] pl-8">/about/careers</div>
<div class="text-white pl-4">/blog</div>
<div class="text-[#888] pl-8">/blog/first-post</div>
<div class="text-[#888] pl-8">/blog/second-post</div>
<div class="text-white pl-4">/contact</div>
</div>
</div>
<p class="text-[#888] text-sm">Drag and drop pages in the admin sidebar to reorder them or change their parent.</p>
</section>
<section class="space-y-6">
<div>
<h2 class="text-xl font-semibold text-white">Publishing</h2>
<p class="text-[#888] mt-2">Pages have a published/unpublished toggle. Unpublished pages are only visible when you're signed in as an admin, so you can preview content before making it live.</p>
</div>
<div class="grid sm:grid-cols-2 gap-4">
<div class="border border-white/10 rounded-lg p-5">
<div class="flex items-center gap-2 mb-2">
<div class="w-2 h-2 rounded-full bg-emerald-400"></div>
<span class="text-white font-medium text-sm">Published</span>
</div>
<p class="text-sm text-[#888]">Visible to everyone. Shows up in navigation and search.</p>
</div>
<div class="border border-white/10 rounded-lg p-5">
<div class="flex items-center gap-2 mb-2">
<div class="w-2 h-2 rounded-full bg-[#666]"></div>
<span class="text-white font-medium text-sm">Unpublished</span>
</div>
<p class="text-sm text-[#888]">Admin-only preview. Perfect for drafts and work in progress.</p>
</div>
</div>
</section>
<section class="space-y-6">
<div>
<h2 class="text-xl font-semibold text-white">Version history</h2>
<p class="text-[#888] mt-2">Every change to a page is saved as a version. You can view the history of changes and restore any previous version from the admin dashboard.</p>
</div>
<div class="border border-white/10 rounded-lg p-5 bg-[#1a1a1a]/50 space-y-3">
<div class="flex items-center justify-between text-sm">
<span class="text-white">Current version</span>
<span class="text-[#666]">2 minutes ago</span>
</div>
<div class="border-t border-white/5 pt-3 flex items-center justify-between text-sm">
<span class="text-[#888]">Previous version</span>
<span class="text-[#666]">1 hour ago</span>
</div>
<div class="border-t border-white/5 pt-3 flex items-center justify-between text-sm">
<span class="text-[#888]">Original version</span>
<span class="text-[#666]">Yesterday</span>
</div>
</div>
<p class="text-sm text-[#888]">AI changes are also versioned. If the AI makes a change you don't like, you can restore the previous version.</p>
</section>
<section class="space-y-6">
<div>
<h2 class="text-xl font-semibold text-white">Template functions in pages</h2>
<p class="text-[#888] mt-2">Page content supports Go template syntax. Use template functions to display dynamic data from your collections.</p>
</div>
<div class="border border-white/10 rounded-lg p-4">
<div class="text-sm text-white font-medium mb-2">Display blog posts on a page</div>
<pre class="bg-[#1a1a1a] border border-white/10 rounded-lg p-4 text-sm overflow-x-auto"><code class="text-[#e5e5e5]"><div class="blog">
{{"{{range $post := documents \"blog-posts\"}}"}}
<article>
<h2>{{"{{$post.GetString \"title\"}}"}}</h2>
<p>{{"{{$post.GetString \"excerpt\"}}"}}</p>
</article>
{{"{{end}}"}}</div></code></pre>
</div>
<p class="text-sm text-[#888]">See the full <a href="/docs/templates" class="text-violet-400 hover:text-violet-300">Template Reference</a> for all available functions.</p>
</section>
<!-- What's Next -->
<section class="border-t border-white/10 pt-12 space-y-4">
<h2 class="text-xl font-semibold text-white">What's next?</h2>
<div class="grid sm:grid-cols-2 gap-4">
<a href="/docs/templates" class="border border-white/10 rounded-lg p-5 hover:border-white/20 hover:bg-white/[0.02] transition-all">
<div class="text-emerald-400 font-medium mb-1">Templates</div>
<p class="text-sm text-[#888]">Use template functions to display dynamic data on your pages.</p>
</a>
<a href="/docs/collections" class="border border-white/10 rounded-lg p-5 hover:border-white/20 hover:bg-white/[0.02] transition-all">
<div class="text-cyan-400 font-medium mb-1">Collections</div>
<p class="text-sm text-[#888]">Store structured content like blog posts, products, or team members.</p>
</a>
<a href="/docs/ai-assistant" class="border border-white/10 rounded-lg p-5 hover:border-white/20 hover:bg-white/[0.02] transition-all">
<div class="text-violet-400 font-medium mb-1">AI Assistant</div>
<p class="text-sm text-[#888]">Learn what the AI tools can do for your site.</p>
</a>
</div>
</section>
</article>
{{end}}