achmad
164 lines
9.4 KiB
HTML
164 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kotobane — Directus Workflow</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { background: #0D0D14; color: #F3F5F7; font-family: 'Inter', system-ui, sans-serif; font-size: 14px; padding: 32px; }
|
|
h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
|
|
.subtitle { font-size: 14px; color: #7D8795; margin-bottom: 32px; }
|
|
|
|
.flow { display: flex; flex-direction: column; gap: 12px; max-width: 860px; margin: 0 auto; }
|
|
|
|
.step { background: #1D212B; border: 1px solid #2A3140; border-radius: 12px; padding: 20px; display: flex; gap: 16px; align-items: flex-start; }
|
|
.step-num { background: #00B4D8; color: #000; font-size: 12px; font-weight: 800; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
.step-body { flex: 1; }
|
|
.step-title { font-size: 14px; font-weight: 700; color: #F3F5F7; margin-bottom: 6px; }
|
|
.step-desc { font-size: 13px; color: #B8C0CC; line-height: 1.6; }
|
|
.step-note { margin-top: 8px; background: #0D0D14; border-radius: 6px; padding: 8px 12px; font-size: 12px; color: #7D8795; border-left: 2px solid #2A3140; }
|
|
.step-note.cyan { border-left-color: #00B4D8; color: #B8C0CC; }
|
|
.step-note.violet { border-left-color: #7C3AED; }
|
|
.step-note.amber { border-left-color: #FFB300; }
|
|
|
|
.connector { display: flex; justify-content: flex-start; padding-left: 34px; }
|
|
.connector-line { width: 2px; height: 20px; background: #2A3140; border-radius: 1px; }
|
|
|
|
.field-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
|
|
.field { background: #0D0D14; border-radius: 6px; padding: 6px 10px; display: flex; align-items: center; gap: 8px; }
|
|
.field-name { font-family: monospace; font-size: 11px; color: #00B4D8; }
|
|
.field-type { font-size: 11px; color: #5C6470; }
|
|
.field-req { font-size: 9px; color: #D64545; font-weight: 700; margin-left: auto; }
|
|
.field-opt { font-size: 9px; color: #5C6470; margin-left: auto; }
|
|
|
|
.divider { height: 1px; background: #2A3140; max-width: 860px; margin: 24px auto; }
|
|
.section-label { font-size: 11px; letter-spacing: 2px; color: #7D8795; max-width: 860px; margin: 0 auto 12px; }
|
|
|
|
.faq { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
|
|
.faq-item { background: #1D212B; border: 1px solid #2A3140; border-radius: 10px; padding: 16px; }
|
|
.faq-q { font-size: 13px; font-weight: 600; color: #F3F5F7; margin-bottom: 6px; }
|
|
.faq-a { font-size: 13px; color: #B8C0CC; line-height: 1.6; }
|
|
.faq-a code { background: #0D0D14; border-radius: 3px; padding: 1px 5px; font-size: 12px; color: #00B4D8; font-family: monospace; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div style="max-width:860px;margin:0 auto">
|
|
<h2>How You'll Add Content in Directus</h2>
|
|
<p class="subtitle">cms.achmad.dev — step by step, every time you want to publish something</p>
|
|
</div>
|
|
|
|
<div class="flow">
|
|
|
|
<div class="step">
|
|
<div class="step-num">1</div>
|
|
<div class="step-body">
|
|
<div class="step-title">Go to Collections → Articles → Create Item</div>
|
|
<div class="step-desc">In the Directus sidebar, click <strong>Content</strong>, then <strong>articles</strong>, then the <strong>+ New</strong> button in the top right. A form opens with all the fields you need.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="connector"><div class="connector-line"></div></div>
|
|
|
|
<div class="step">
|
|
<div class="step-num">2</div>
|
|
<div class="step-body">
|
|
<div class="step-title">Fill in the required fields</div>
|
|
<div class="step-desc">These are the only ones you must fill in to publish:</div>
|
|
<div class="field-list">
|
|
<div class="field"><span class="field-name">title</span><span class="field-type">text</span><span class="field-req">required</span></div>
|
|
<div class="field"><span class="field-name">slug</span><span class="field-type">auto-generated</span><span class="field-req">required</span></div>
|
|
<div class="field"><span class="field-name">content</span><span class="field-type">rich text editor</span><span class="field-req">required</span></div>
|
|
<div class="field"><span class="field-name">category</span><span class="field-type">dropdown</span><span class="field-req">required</span></div>
|
|
<div class="field"><span class="field-name">excerpt</span><span class="field-type">short text</span><span class="field-opt">optional</span></div>
|
|
<div class="field"><span class="field-name">featured_image</span><span class="field-type">file upload</span><span class="field-opt">optional</span></div>
|
|
</div>
|
|
<div class="step-note cyan">The <strong>slug</strong> is the URL. If your title is "Frieren Season 2 Announced", Directus auto-fills it as <code>frieren-season-2-announced</code>. The article will live at <code>/anime/frieren-season-2-announced</code>.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="connector"><div class="connector-line"></div></div>
|
|
|
|
<div class="step">
|
|
<div class="step-num">3</div>
|
|
<div class="step-body">
|
|
<div class="step-title">Write your content in the WYSIWYG editor</div>
|
|
<div class="step-desc">The <strong>content</strong> field uses a rich text editor — it works like Google Docs. You can write paragraphs, add headings (H2, H3), bold/italic text, embed images, add blockquotes, and paste links. No HTML needed.</div>
|
|
<div class="step-note cyan">Images inside articles can be uploaded via the file manager icon in the editor toolbar. They're stored in Directus and served from <code>cms.achmad.dev/assets/...</code>.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="connector"><div class="connector-line"></div></div>
|
|
|
|
<div class="step">
|
|
<div class="step-num">4</div>
|
|
<div class="step-body">
|
|
<div class="step-title">Set status to "Published" and save</div>
|
|
<div class="step-desc">In the top-right corner of the editor, there's a <strong>Status</strong> dropdown. Switch it from <strong>Draft</strong> → <strong>Published</strong>, then click <strong>Save</strong>. That's it.</div>
|
|
<div class="step-note" style="border-left-color:#00D166;color:#B8C0CC">At this moment, Directus automatically fires a webhook → Next.js regenerates the article page, the category page, and the homepage. <strong>Your article is live within seconds.</strong> No login to any server, no terminal, no redeploy.</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
<div class="section-label">SPECIAL TASKS</div>
|
|
|
|
<div class="flow">
|
|
|
|
<div class="step">
|
|
<div class="step-num" style="background:#7C3AED;color:#fff">★</div>
|
|
<div class="step-body">
|
|
<div class="step-title">Changing the homepage hero article</div>
|
|
<div class="step-desc">Go to <strong>Content → site_settings</strong> (there's only one record). Click the <strong>hero_article</strong> field and pick a different article from the dropdown. Save. The homepage regenerates automatically.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="connector"><div class="connector-line"></div></div>
|
|
|
|
<div class="step">
|
|
<div class="step-num" style="background:#FFB300;color:#000">★</div>
|
|
<div class="step-body">
|
|
<div class="step-title">Adding a new category</div>
|
|
<div class="step-desc">Go to <strong>Content → categories → + New</strong>. Add the name (e.g. "Cosplay") and slug (e.g. "cosplay"). Save. It immediately appears in the category dropdown when creating articles — no code changes needed.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="connector"><div class="connector-line"></div></div>
|
|
|
|
<div class="step">
|
|
<div class="step-num" style="background:#D64545;color:#fff">★</div>
|
|
<div class="step-body">
|
|
<div class="step-title">Marking an article as Trending or Featured</div>
|
|
<div class="step-desc">When editing an article, the <strong>is_featured</strong> toggle makes it eligible for the homepage hero. Trending/New badges are separate status badges you can set per-article. No code changes.</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
<div class="section-label">COMMON QUESTIONS</div>
|
|
|
|
<div class="faq">
|
|
<div class="faq-item">
|
|
<div class="faq-q">What is a "collection"?</div>
|
|
<div class="faq-a">A collection in Directus is like a spreadsheet or a database table. The <code>articles</code> collection holds all your articles, one row per article. The <code>categories</code> collection holds all categories. You'll mostly live in the <code>articles</code> collection.</div>
|
|
</div>
|
|
<div class="faq-item">
|
|
<div class="faq-q">Can I save a draft and come back later?</div>
|
|
<div class="faq-a">Yes — leave the status as <strong>Draft</strong> and save. The article won't appear on the site until you change it to <strong>Published</strong>. You can have as many drafts as you want.</div>
|
|
</div>
|
|
<div class="faq-item">
|
|
<div class="faq-q">What if I make a typo after publishing?</div>
|
|
<div class="faq-a">Just edit the article in Directus and save again. The webhook fires again and the page regenerates with the corrected content within seconds.</div>
|
|
</div>
|
|
<div class="faq-item">
|
|
<div class="faq-q">What about the tags (hololive, spring 2026, etc.)?</div>
|
|
<div class="faq-a">Tags are typed freely in the article editor — you pick from existing tags or create new ones inline. They appear as clickable chips below the article body and are searchable.</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|