232 lines
9.6 KiB
HTML
232 lines
9.6 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>
|
|
<button class="tab-btn" data-tab="podcast" data-podcast-kind="yazilim">Podcast Yazilim</button>
|
|
<button class="tab-btn" data-tab="podcast" data-podcast-kind="masa-basi">Podcast Masa Basi</button>
|
|
<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="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="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>
|
|
<input id="blog-category" placeholder="React" />
|
|
</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-podcast" class="tab-panel">
|
|
<div class="split">
|
|
<aside class="card sidebar">
|
|
<div class="sidebar-header">
|
|
<h2 id="podcast-sidebar-title">Podcast Episodes</h2>
|
|
<button id="refresh-podcast-files" class="btn btn-ghost">Refresh</button>
|
|
</div>
|
|
<div id="podcast-card-list" class="blog-card-list"></div>
|
|
<button id="new-podcast-file" class="btn mt-8">New Episode</button>
|
|
</aside>
|
|
|
|
<section class="card editor">
|
|
<div class="editor-head">
|
|
<h2 id="podcast-editor-title">Create Episode</h2>
|
|
<div class="row">
|
|
<button id="delete-podcast-file" class="btn btn-danger">Delete</button>
|
|
<button id="save-podcast-file" class="btn">Save</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="blog-form-grid">
|
|
<div>
|
|
<label for="podcast-slug">Slug</label>
|
|
<input id="podcast-slug" placeholder="2026-03-09-foundations-over-tools" />
|
|
</div>
|
|
<div>
|
|
<label for="podcast-title">Title</label>
|
|
<input id="podcast-title" placeholder="Foundations Over Tools" />
|
|
</div>
|
|
<div>
|
|
<label for="podcast-date">Date</label>
|
|
<input id="podcast-date" placeholder="2026-03-09" />
|
|
</div>
|
|
<div>
|
|
<label for="podcast-youtube-url">YouTube URL</label>
|
|
<input id="podcast-youtube-url" placeholder="https://www.youtube.com/watch?v=..." />
|
|
</div>
|
|
<div class="full">
|
|
<label for="podcast-spotify-url">Spotify URL</label>
|
|
<input id="podcast-spotify-url" placeholder="https://open.spotify.com/show/..." />
|
|
</div>
|
|
<div class="full">
|
|
<label for="podcast-editor">Markdown Content</label>
|
|
<textarea id="podcast-editor" spellcheck="false"></textarea>
|
|
</div>
|
|
</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>
|