summaryrefslogtreecommitdiffstats
path: root/indieweb-micro/themes/MinIndie/layouts/partials/webmentions.html
diff options
context:
space:
mode:
Diffstat (limited to 'indieweb-micro/themes/MinIndie/layouts/partials/webmentions.html')
-rw-r--r--indieweb-micro/themes/MinIndie/layouts/partials/webmentions.html356
1 files changed, 0 insertions, 356 deletions
diff --git a/indieweb-micro/themes/MinIndie/layouts/partials/webmentions.html b/indieweb-micro/themes/MinIndie/layouts/partials/webmentions.html
deleted file mode 100644
index 1576106..0000000
--- a/indieweb-micro/themes/MinIndie/layouts/partials/webmentions.html
+++ /dev/null
@@ -1,356 +0,0 @@
-<section id="comments" class="webmentions">
- <h2 class="wm-title">Webmentions</h2>
- <div id="mentions" class="wm-list">Loading…</div>
-</section>
-
-<style>
-.webmentions {
- margin-top: 2.5rem;
- padding-top: 1rem;
- border-top: 2px dashed var(--hrcolor);
-}
-
-.webmentions .wm-title {
- color: var(--titlecolor);
- margin-bottom: 1rem;
-}
-
-.wm-list {
- display: flex;
- flex-direction: column;
- gap: 1.5rem;
-}
-
-/* Compact reaction sections */
-.wm-reactions {
- margin-bottom: 1.5rem;
-}
-
-.wm-reaction-group {
- margin-bottom: 1rem;
-}
-
-.wm-reaction-title {
- font-size: 1.1rem;
- font-weight: 600;
- color: var(--titlecolor);
- margin-bottom: 0.5rem;
- text-transform: uppercase;
- letter-spacing: 0.5px;
-}
-
-.wm-avatar-grid {
- display: flex;
- flex-wrap: wrap;
- gap: 4px;
- align-items: center;
-}
-
-.wm-avatar {
- position: relative;
- display: inline-block;
-}
-
-.wm-avatar img {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- border: 2px solid var(--hrcolor);
- transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-.wm-avatar:hover img {
- transform: scale(1.1);
- box-shadow: 0 4px 12px rgba(255, 140, 200, 0.4);
-}
-
-.wm-avatar-tooltip {
- position: absolute;
- bottom: 120%;
- left: 50%;
- transform: translateX(-50%);
- background: var(--blockquotecolor);
- color: var(--titlecolor);
- padding: 4px 8px;
- border-radius: 4px;
- font-size: 0.8rem;
- white-space: nowrap;
- opacity: 0;
- pointer-events: none;
- transition: opacity 0.2s ease;
- z-index: 10;
- border: 1px solid var(--hrcolor);
-}
-
-.wm-avatar:hover .wm-avatar-tooltip {
- opacity: 1;
-}
-
-/* Comments section header */
-.wm-comments-header {
- font-size: 1.1rem;
- font-weight: 600;
- color: var(--titlecolor);
- margin-bottom: 0.5rem;
- margin-top: 1rem;
- text-transform: uppercase;
- letter-spacing: 0.5px;
-}
-
-/* Regular webmentions (replies, mentions) */
-.wm-regular {
- display: flex;
- flex-direction: column;
- gap: 0.75rem;
-}
-
-.wm {
- display: flex;
- gap: 0.6rem;
- padding: 0.6rem 0.75rem;
- border-radius: 10px;
- background: var(--alertbgcolor);
- border: 1px solid var(--hrcolor);
- box-shadow: 0 0 6px rgba(255, 180, 220, 0.22);
-}
-
-.wm-author img {
- width: 32px;
- height: 32px;
- border-radius: 50%;
- box-shadow: 0 0 4px rgba(255, 140, 200, 0.35);
-}
-
-.wm-body {
- flex: 1;
- font-size: 0.9rem;
-}
-
-.wm-author-name a {
- font-weight: 600;
- color: var(--linkcolor);
-}
-
-.wm-type {
- font-size: 0.8rem;
- margin-top: 2px;
- color: var(--titlecolor);
-}
-
-.wm-content {
- margin-top: 4px;
- padding: 6px 8px;
- font-size: 0.9rem;
- background: var(--blockquotecolor);
- border-left: 3px solid var(--hrcolor);
- border-radius: 6px;
-}
-
-.wm-meta {
- margin-top: 3px;
- font-size: 0.75rem;
- opacity: 0.7;
-}
-
-.wm-meta a {
- color: var(--linkcolor);
-}
-
-/* Mobile responsive */
-@media (max-width: 600px) {
- .wm-avatar img {
- width: 32px;
- height: 32px;
- }
-
- .wm-avatar-grid {
- gap: 3px;
- }
-
- .wm-reaction-title {
- font-size: 1rem;
- }
-
- .wm-comments-header {
- font-size: 1rem;
- }
-}
-</style>
-
-<script>
-const PAGE_URL = "{{ .Permalink }}";
-
-async function loadMentions() {
- const url =
- "https://webmention.io/api/mentions.jf2?domain=micro.pinapelz.com&token=hdjQAqlZwgJmSuPSiU8h8w";
-
- const res = await fetch(url);
- const data = await res.json();
-
- const container = document.getElementById("mentions");
- container.innerHTML = "";
-
- // Filter mentions for this specific page
- const mentions = data.children.filter(m => {
- const t = m["wm-target"];
- const inReply = m["in-reply-to"];
- const likeOf = m["like-of"];
- const repostOf = m["repost-of"];
- const mentionOf = m["mention-of"];
-
- return (
- t === PAGE_URL ||
- inReply === PAGE_URL ||
- likeOf === PAGE_URL ||
- repostOf === PAGE_URL ||
- mentionOf === PAGE_URL
- );
- });
-
- if (!mentions.length) {
- container.innerHTML = "<p>No webmentions yet.</p>";
- return;
- }
-
- // Group mentions by type
- const likes = mentions.filter(m => m["wm-property"] === "like-of");
- const reposts = mentions.filter(m => m["wm-property"] === "repost-of");
- const replies = mentions.filter(m => m["wm-property"] === "in-reply-to");
- const regularMentions = mentions.filter(m =>
- !["like-of", "repost-of", "in-reply-to"].includes(m["wm-property"])
- );
-
- // Create reactions section
- const reactionsDiv = document.createElement("div");
- reactionsDiv.className = "wm-reactions";
-
- // Add reposts section
- if (reposts.length > 0) {
- const repostGroup = document.createElement("div");
- repostGroup.className = "wm-reaction-group";
-
- const repostTitle = document.createElement("div");
- repostTitle.className = "wm-reaction-title";
- repostTitle.textContent = `${reposts.length} Repost${reposts.length !== 1 ? 's' : ''}`;
-
- const repostGrid = document.createElement("div");
- repostGrid.className = "wm-avatar-grid";
-
- reposts.forEach(mention => {
- const author = mention.author || {};
- const avatarDiv = document.createElement("div");
- avatarDiv.className = "wm-avatar";
-
- avatarDiv.innerHTML = `
- <a href="${author.url || "#"}" target="_blank">
- <img src="${author.photo || ""}" alt="${author.name || 'Unknown'}" />
- </a>
- <div class="wm-avatar-tooltip">${author.name || 'Unknown'}</div>
- `;
-
- repostGrid.appendChild(avatarDiv);
- });
-
- repostGroup.appendChild(repostTitle);
- repostGroup.appendChild(repostGrid);
- reactionsDiv.appendChild(repostGroup);
- }
-
- // Add likes section
- if (likes.length > 0) {
- const likeGroup = document.createElement("div");
- likeGroup.className = "wm-reaction-group";
-
- const likeTitle = document.createElement("div");
- likeTitle.className = "wm-reaction-title";
- likeTitle.textContent = `${likes.length} Like${likes.length !== 1 ? 's' : ''}`;
-
- const likeGrid = document.createElement("div");
- likeGrid.className = "wm-avatar-grid";
-
- likes.forEach(mention => {
- const author = mention.author || {};
- const avatarDiv = document.createElement("div");
- avatarDiv.className = "wm-avatar";
-
- avatarDiv.innerHTML = `
- <a href="${author.url || "#"}" target="_blank">
- <img src="${author.photo || ""}" alt="${author.name || 'Unknown'}" />
- </a>
- <div class="wm-avatar-tooltip">${author.name || 'Unknown'}</div>
- `;
-
- likeGrid.appendChild(avatarDiv);
- });
-
- likeGroup.appendChild(likeTitle);
- likeGroup.appendChild(likeGrid);
- reactionsDiv.appendChild(likeGroup);
- }
-
- // Add reactions section to container if it has content
- if (reactionsDiv.children.length > 0) {
- container.appendChild(reactionsDiv);
- }
-
- // Add regular mentions (replies and other mentions)
- const regularMentionsToShow = [...replies, ...regularMentions];
-
- if (regularMentionsToShow.length > 0) {
- // Add comments header
- const commentsHeader = document.createElement("div");
- commentsHeader.className = "wm-comments-header";
- commentsHeader.textContent = "Comments";
- container.appendChild(commentsHeader);
-
- const regularDiv = document.createElement("div");
- regularDiv.className = "wm-regular";
-
- regularMentionsToShow.forEach(m => {
- const div = document.createElement("div");
- div.className = "wm";
-
- const author = m.author || {};
- const content = m.content || {};
- const type =
- m["wm-property"] === "in-reply-to" ? "replied đź’¬" :
- "mentioned this";
-
- div.innerHTML = `
- <div class="wm-author">
- <img src="${author.photo || ""}" alt="${author.name || 'Unknown'}">
- </div>
-
- <div class="wm-body">
- <div class="wm-author-name">
- <a href="${author.url || "#"}" target="_blank">
- ${author.name || "Unknown"}
- </a>
- </div>
-
- <div class="wm-type">${type}</div>
-
- ${content.text ? `<div class="wm-content">${content.text}</div>` : ""}
-
- <div class="wm-meta">
- <a href="${m.url}" target="_blank">source</a> •
- ${m["wm-received"]
- ? new Date(m["wm-received"]).toLocaleString()
- : ""}
- </div>
- </div>
- `;
- regularDiv.appendChild(div);
- });
-
- container.appendChild(regularDiv);
- }
-
- // If no mentions at all
- if (container.children.length === 0) {
- container.innerHTML = "<p>No webmentions yet.</p>";
- }
-}
-
-loadMentions();
-</script>
send patches to the email below
yukais@pinapelz.com
include the subject [PATCH repo_name]
pinapelz.com
homepage