add simple admin service

2026-05-18 02:48:47 +03:00
parent 10a83d39a2
commit 3a3b2bcfc0
84 changed files with 2134 additions and 5 deletions
@@ -0,0 +1,126 @@
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Локальная админка постов</title>
+    <link rel="stylesheet" href="/styles.css" />
+  </head>
+  <body>
+    <header class="topbar">
+      <div>
+        <p class="eyebrow">Только localhost</p>
+        <h1>Посты ProgCode.Ru</h1>
+      </div>
+      <div class="topbar__actions">
+        <button class="button" id="duplicate-button" type="button">Дублировать</button>
+        <button class="button" id="new-button" type="button">Новая статья</button>
+        <button class="button button--primary" id="save-button" type="button">Сохранить</button>
+      </div>
+    </header>
+
+    <main class="workspace">
+      <aside class="sidebar" aria-label="Список статей">
+        <div class="sidebar__header">
+          <label for="search-input">Поиск</label>
+          <input id="search-input" type="search" placeholder="Название, slug, категория" autocomplete="off" />
+        </div>
+        <div class="article-list" id="article-list"></div>
+      </aside>
+
+      <section class="editor" aria-label="Редактор статьи">
+        <div class="status-line">
+          <span id="status-text">Загрузка...</span>
+          <a id="open-article-link" href="#" target="_blank" rel="noreferrer">Открыть статью</a>
+        </div>
+
+        <form class="article-form" id="article-form">
+          <div class="form-grid">
+            <label class="field field--wide">
+              <span>Заголовок</span>
+              <input name="title" type="text" required />
+            </label>
+
+            <label class="field">
+              <span>Slug</span>
+              <input name="slug" type="text" required />
+            </label>
+
+            <label class="field">
+              <span>Дата</span>
+              <input name="date" type="text" placeholder="2019-01-12T21:54:18+00:00" required />
+            </label>
+
+            <label class="field">
+              <span>Автор</span>
+              <input name="author" type="text" required />
+            </label>
+
+            <label class="field">
+              <span>Минут чтения</span>
+              <input name="readingMinutes" type="number" min="1" step="1" required />
+            </label>
+
+            <label class="field field--wide">
+              <span>Категории</span>
+              <input name="categories" type="text" placeholder="JavaScript, Bitrix" required />
+            </label>
+
+            <label class="field field--wide">
+              <span>Обложка</span>
+              <div class="field-row">
+                <input name="cover" type="text" list="asset-options" required />
+                <button class="button" id="cover-upload-button" type="button">Загрузить</button>
+              </div>
+              <input id="cover-upload-input" type="file" accept="image/*" hidden />
+              <datalist id="asset-options"></datalist>
+            </label>
+
+            <label class="field field--wide">
+              <span>Анонс</span>
+              <textarea name="excerpt" rows="4" required></textarea>
+            </label>
+          </div>
+
+          <div class="editor-tools">
+            <button class="button" id="slug-button" type="button">Slug из заголовка</button>
+            <button class="button" id="minutes-button" type="button">Оценить время</button>
+            <button class="button button--danger" id="delete-button" type="button">Удалить</button>
+          </div>
+
+          <div class="content-layout">
+            <section class="field content-field">
+              <div class="content-field__header">
+                <span>Markdown статьи</span>
+                <div class="markdown-toolbar" aria-label="Форматирование Markdown">
+                  <button class="tool-button" data-format="h2" type="button" title="Заголовок H2">H2</button>
+                  <button class="tool-button" data-format="h3" type="button" title="Заголовок H3">H3</button>
+                  <button class="tool-button" data-format="bold" type="button" title="Жирный">B</button>
+                  <button class="tool-button" data-format="italic" type="button" title="Курсив">I</button>
+                  <button class="tool-button" data-format="code" type="button" title="Код">Code</button>
+                  <button class="tool-button" data-format="quote" type="button" title="Цитата">Quote</button>
+                  <button class="tool-button" data-format="list" type="button" title="Список">List</button>
+                  <button class="tool-button" data-format="link" type="button" title="Ссылка">Link</button>
+                  <button class="tool-button" id="asset-upload-button" type="button" title="Загрузить и вставить ассет">
+                    Upload
+                  </button>
+                </div>
+              </div>
+              <textarea name="contentMarkdown" spellcheck="false" required></textarea>
+              <input id="asset-upload-input" type="file" multiple hidden />
+            </section>
+
+            <section class="preview" aria-label="Предпросмотр">
+              <div class="preview__cover">
+                <img id="cover-preview" alt="" />
+              </div>
+              <iframe id="content-preview" title="Предпросмотр HTML статьи" sandbox=""></iframe>
+            </section>
+          </div>
+        </form>
+      </section>
+    </main>
+
+    <script src="/src/app/main.js" type="module"></script>
+  </body>
+</html>