diff --git a/blogroll.njk b/blogroll.njk
index 382d9e6..525f973 100644
--- a/blogroll.njk
+++ b/blogroll.njk
@@ -180,7 +180,6 @@ permalink: /blogroll/
class="share-post-btn"
:data-share-url="item.url"
:data-share-title="item.title"
- data-share-type="note"
title="Create post"
aria-label="Create post"
>
diff --git a/css/tailwind.css b/css/tailwind.css
index 377ae80..49d2489 100644
--- a/css/tailwind.css
+++ b/css/tailwind.css
@@ -795,3 +795,57 @@ body[data-indiekit-auth="true"] .share-post-btn:hover {
border-color: #d1d5db;
color: #10b981;
}
+
+/* Post type dropdown */
+.post-type-dropdown {
+ display: none;
+ position: absolute;
+ bottom: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ margin-bottom: 4px;
+ background: white;
+ border: 1px solid #e5e7eb;
+ border-radius: 6px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ z-index: 50;
+ min-width: 120px;
+ overflow: hidden;
+}
+
+.post-type-dropdown.open {
+ display: block;
+}
+
+.post-type-dropdown-item {
+ display: block;
+ width: 100%;
+ padding: 6px 12px;
+ font-size: 13px;
+ color: #374151;
+ text-align: left;
+ background: none;
+ border: none;
+ cursor: pointer;
+ white-space: nowrap;
+}
+
+.post-type-dropdown-item:hover {
+ background: #f3f4f6;
+ color: #10b981;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+ .post-type-dropdown {
+ background: #1f2937;
+ border-color: #374151;
+ }
+ .post-type-dropdown-item {
+ color: #d1d5db;
+ }
+ .post-type-dropdown-item:hover {
+ background: #374151;
+ color: #34d399;
+ }
+}
diff --git a/js/share-post.js b/js/share-post.js
index 9b9a453..9165613 100644
--- a/js/share-post.js
+++ b/js/share-post.js
@@ -1,38 +1,86 @@
/**
* Share Post — frontend module
- * Opens the Indiekit share form in a popup window for creating posts
- * from blogroll, podroll, and news page items.
+ * Opens the Indiekit post creation form in a popup window.
+ * Provides a dropdown menu with post type choices.
* Only active when user is logged in (body[data-indiekit-auth="true"]).
*/
(function () {
+ var POST_TYPES = [
+ { value: 'note', label: 'Note' },
+ { value: 'bookmark', label: 'Bookmark' },
+ { value: 'reply', label: 'Reply' },
+ { value: 'like', label: 'Like' },
+ { value: 'repost', label: 'Repost' },
+ { value: 'article', label: 'Article' }
+ ];
+
function isLoggedIn() {
return document.body.getAttribute('data-indiekit-auth') === 'true';
}
- function openSharePopup(button) {
- var url = button.dataset.shareUrl;
- var title = button.dataset.shareTitle || '';
- var type = button.dataset.shareType || 'note';
- if (!url) return;
-
- var shareUrl = '/share/bookmarklet'
- + '?name=' + encodeURIComponent(title)
+ function openPostPopup(type, url, title) {
+ var createUrl = '/posts/create'
+ + '?type=' + encodeURIComponent(type)
+ '&url=' + encodeURIComponent(url)
- + '&type=' + encodeURIComponent(type);
+ + '&name=' + encodeURIComponent(title);
window.open(
- shareUrl,
- 'Sharer',
- 'resizable,scrollbars,status=0,toolbar=0,menubar=0,titlebar=0,width=578,height=720,location=0'
+ createUrl,
+ 'PostCreator',
+ 'resizable,scrollbars,status=0,toolbar=0,menubar=0,titlebar=0,width=620,height=780,location=0'
);
}
+ function createDropdown(button) {
+ if (button.querySelector('.post-type-dropdown')) return;
+
+ var url = button.dataset.shareUrl;
+ var title = button.dataset.shareTitle || '';
+
+ var dropdown = document.createElement('div');
+ dropdown.className = 'post-type-dropdown';
+
+ POST_TYPES.forEach(function (pt) {
+ var item = document.createElement('button');
+ item.type = 'button';
+ item.className = 'post-type-dropdown-item';
+ item.textContent = pt.label;
+ item.addEventListener('click', function (e) {
+ e.stopPropagation();
+ openPostPopup(pt.value, url, title);
+ closeAllDropdowns();
+ });
+ dropdown.appendChild(item);
+ });
+
+ button.style.position = 'relative';
+ button.appendChild(dropdown);
+ }
+
+ function closeAllDropdowns() {
+ document.querySelectorAll('.post-type-dropdown.open').forEach(function (d) {
+ d.classList.remove('open');
+ });
+ }
+
document.addEventListener('click', function (e) {
if (!isLoggedIn()) return;
+
var button = e.target.closest('.share-post-btn');
if (button) {
e.preventDefault();
- openSharePopup(button);
+ e.stopPropagation();
+ createDropdown(button);
+ var dropdown = button.querySelector('.post-type-dropdown');
+ var wasOpen = dropdown.classList.contains('open');
+ closeAllDropdowns();
+ if (!wasOpen) {
+ dropdown.classList.add('open');
+ }
+ return;
}
+
+ // Click outside closes dropdowns
+ closeAllDropdowns();
});
})();
diff --git a/news.njk b/news.njk
index 5ef2965..af12fce 100644
--- a/news.njk
+++ b/news.njk
@@ -164,8 +164,7 @@ withSidebar: true
class="share-post-btn"
:data-share-url="item.link"
:data-share-title="item.title"
- data-share-type="note"
- title="Create post"
+ title="Create post"
aria-label="Create post"
>
✏️
@@ -219,8 +218,7 @@ withSidebar: true
class="share-post-btn mt-2"
:data-share-url="item.link"
:data-share-title="item.title"
- data-share-type="note"
- title="Create post"
+ title="Create post"
aria-label="Create post"
>
✏️
@@ -297,8 +295,7 @@ withSidebar: true
class="share-post-btn"
:data-share-url="item.link"
:data-share-title="item.title"
- data-share-type="note"
- title="Create post"
+ title="Create post"
aria-label="Create post"
>
✏️
diff --git a/podroll.njk b/podroll.njk
index bffc14d..7888eb3 100644
--- a/podroll.njk
+++ b/podroll.njk
@@ -148,7 +148,6 @@ permalink: /podroll/
class="share-post-btn"
:data-share-url="episode.url"
:data-share-title="episode.title"
- data-share-type="note"
title="Create post"
aria-label="Create post"
>