287 lines
8.5 KiB
HTML
287 lines
8.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Portfolio Data Panel</title>
|
|
<link rel="stylesheet" href="./styles.css" />
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<div>
|
|
<h1>Portfolio Data Panel</h1>
|
|
<p>
|
|
Manage blog posts, dashboard collections, media files, and publish
|
|
updates.
|
|
</p>
|
|
</div>
|
|
<div class="chip">Electron Monorepo</div>
|
|
</header>
|
|
|
|
<nav class="tabs">
|
|
<button class="tab-btn active" data-tab="blog">Blog</button>
|
|
<button
|
|
class="tab-btn"
|
|
data-tab="collection"
|
|
data-collection-key="announcement"
|
|
>
|
|
Announcement
|
|
<button
|
|
class="tab-btn"
|
|
data-tab="collection"
|
|
data-collection-key="bookmarks"
|
|
>
|
|
Bookmarks
|
|
</button>
|
|
<button
|
|
class="tab-btn"
|
|
data-tab="collection"
|
|
data-collection-key="certificates"
|
|
>
|
|
Certificates
|
|
</button>
|
|
<button
|
|
class="tab-btn"
|
|
data-tab="collection"
|
|
data-collection-key="education"
|
|
>
|
|
Education
|
|
</button>
|
|
<button
|
|
class="tab-btn"
|
|
data-tab="collection"
|
|
data-collection-key="experience"
|
|
>
|
|
Experience
|
|
</button>
|
|
<button
|
|
class="tab-btn"
|
|
data-tab="collection"
|
|
data-collection-key="references"
|
|
>
|
|
References
|
|
</button>
|
|
<button
|
|
class="tab-btn"
|
|
data-tab="collection"
|
|
data-collection-key="projectsMobile"
|
|
>
|
|
Projects Mobile
|
|
</button>
|
|
<button
|
|
class="tab-btn"
|
|
data-tab="collection"
|
|
data-collection-key="projectsWeb"
|
|
>
|
|
Projects Web
|
|
</button>
|
|
<button
|
|
class="tab-btn"
|
|
data-tab="collection"
|
|
data-collection-key="projectsExtensions"
|
|
>
|
|
Projects Extensions
|
|
</button>
|
|
<button
|
|
class="tab-btn"
|
|
data-tab="collection"
|
|
data-collection-key="projectsFigma"
|
|
>
|
|
Projects Figma
|
|
</button>
|
|
<button
|
|
class="tab-btn"
|
|
data-tab="collection"
|
|
data-collection-key="community"
|
|
>
|
|
Community
|
|
</button>
|
|
<button
|
|
class="tab-btn"
|
|
data-tab="collection"
|
|
data-collection-key="youtube"
|
|
>
|
|
YouTube
|
|
</button>
|
|
<button
|
|
class="tab-btn"
|
|
data-tab="collection"
|
|
data-collection-key="gallery"
|
|
>
|
|
Gallery
|
|
</button>
|
|
<button class="tab-btn" data-tab="media">Media</button>
|
|
<button class="tab-btn" data-tab="publish">Publish</button>
|
|
</nav>
|
|
|
|
<main>
|
|
<section id="tab-blog" class="tab-panel active">
|
|
<div class="split">
|
|
<aside class="card sidebar">
|
|
<div class="sidebar-header">
|
|
<h2>Blog Posts</h2>
|
|
<button id="refresh-blog-files" class="btn btn-ghost">
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
<div id="blog-card-list" class="blog-card-list"></div>
|
|
<button id="new-blog-file" class="btn mt-8">New Blog Post</button>
|
|
</aside>
|
|
|
|
<section class="card editor">
|
|
<div class="editor-head">
|
|
<h2 id="blog-editor-title">Create Blog Post</h2>
|
|
<div class="row">
|
|
<button id="delete-blog-file" class="btn btn-danger">
|
|
Delete
|
|
</button>
|
|
<button id="save-blog-file" class="btn">Save</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="blog-form-grid">
|
|
<div>
|
|
<label for="blog-slug">Slug</label>
|
|
<input
|
|
id="blog-slug"
|
|
placeholder="building-minimal-design-systems"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label for="blog-title">Title</label>
|
|
<input
|
|
id="blog-title"
|
|
placeholder="Building Minimal Design Systems"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label for="blog-category">Category</label>
|
|
<select id="blog-category"></select>
|
|
</div>
|
|
<div>
|
|
<label for="blog-date">Date</label>
|
|
<input id="blog-date" placeholder="March 2026" />
|
|
</div>
|
|
<div>
|
|
<label for="blog-read-time">Read Time</label>
|
|
<input id="blog-read-time" placeholder="12 min read" />
|
|
</div>
|
|
<div>
|
|
<label for="blog-author">Author</label>
|
|
<input id="blog-author" placeholder="Poyraz Avsever" />
|
|
</div>
|
|
<div class="full">
|
|
<label for="blog-cover-image">Cover Image</label>
|
|
<input id="blog-cover-image" placeholder="/news/design.svg" />
|
|
</div>
|
|
<div class="full">
|
|
<label for="blog-excerpt">Excerpt</label>
|
|
<textarea
|
|
id="blog-excerpt"
|
|
class="small-editor"
|
|
spellcheck="false"
|
|
></textarea>
|
|
</div>
|
|
<div class="full">
|
|
<label for="blog-editor">Markdown Content</label>
|
|
<textarea id="blog-editor" spellcheck="false"></textarea>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="tab-collection" class="tab-panel">
|
|
<div class="split">
|
|
<aside class="card sidebar">
|
|
<div class="sidebar-header">
|
|
<h2 id="collection-sidebar-title">Bookmarks</h2>
|
|
<button id="refresh-collection" class="btn btn-ghost">
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
<div id="collection-card-list" class="blog-card-list"></div>
|
|
<button id="new-collection-item" class="btn mt-8">New Item</button>
|
|
</aside>
|
|
|
|
<section class="card editor">
|
|
<div class="editor-head">
|
|
<h2 id="collection-editor-title">Create Item</h2>
|
|
<div class="row">
|
|
<button id="delete-collection-item" class="btn btn-danger">
|
|
Delete
|
|
</button>
|
|
<button id="save-collection-item" class="btn">Save</button>
|
|
</div>
|
|
</div>
|
|
|
|
<p id="collection-helper" class="hint">
|
|
Fill inputs and save to update the related data export.
|
|
</p>
|
|
<div id="collection-form-grid" class="blog-form-grid"></div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="tab-media" class="tab-panel">
|
|
<div class="split">
|
|
<section class="card">
|
|
<div class="row between">
|
|
<h2>Public Folders</h2>
|
|
<button id="refresh-media" class="btn btn-ghost">Refresh</button>
|
|
</div>
|
|
|
|
<label for="folder-select">Target Folder</label>
|
|
<select id="folder-select"></select>
|
|
|
|
<div class="row mt-8">
|
|
<input id="new-folder" placeholder="e.g. blog/covers" />
|
|
<button id="create-folder" class="btn">Create</button>
|
|
</div>
|
|
|
|
<div class="row mt-8">
|
|
<button id="upload-file" class="btn">Upload Image</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>Files</h2>
|
|
<div id="media-files" class="media-grid"></div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="tab-publish" class="tab-panel">
|
|
<div class="card publish-card">
|
|
<div class="row between">
|
|
<h2>Publish Changes</h2>
|
|
<button id="refresh-status" class="btn btn-ghost">
|
|
Refresh Status
|
|
</button>
|
|
</div>
|
|
|
|
<p class="hint">
|
|
This will stage <code>data/</code>, <code>public/</code> and
|
|
<code>content/</code>, create commit, and push.
|
|
</p>
|
|
|
|
<label for="commit-message">Commit Message (optional)</label>
|
|
<input id="commit-message" placeholder="Auto-generated if empty" />
|
|
|
|
<div class="row mt-8">
|
|
<button id="publish-btn" class="btn">Publish</button>
|
|
</div>
|
|
|
|
<h3>Git Status</h3>
|
|
<pre id="git-status" class="log"></pre>
|
|
|
|
<h3>Publish Log</h3>
|
|
<pre id="publish-log" class="log"></pre>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script type="module" src="./app.js"></script>
|
|
</body>
|
|
</html>
|