mirror of
https://github.com/svemagie/blog-eleventy-indiekit.git
synced 2026-04-02 16:44:56 +02:00
feat: multi-domain fediverse support and share-to-mastodon upgrade
- Replace single localStorage string with versioned multi-domain store (fediverse_domains_v1) with usage tracking, inspired by Mastodon's share.joinmastodon.org project - Add domain validation via URL constructor before redirecting - Add mode param to fediverseInteract component: "interact" for authorize_interaction, "share" for /share?text=... - Migrate old fediverse_instance key automatically on first load - Extract shared modal partial (fediverse-modal.njk) used by post interaction, follow widget, and share widget - Share widget now prompts visitors for their own instance instead of hardcoding site owner's Mastodon instance Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
This commit is contained in:
Ricardo
81
_includes/components/fediverse-modal.njk
Normal file
81
_includes/components/fediverse-modal.njk
Normal file
@@ -0,0 +1,81 @@
|
||||
{# Shared fediverse instance picker modal #}
|
||||
{# Used by post.njk (interact), fediverse-follow.njk (follow), share.njk (share) #}
|
||||
{# Requires: modalTitle, modalDescription variables set before include #}
|
||||
<template x-if="showModal">
|
||||
<div class="fixed inset-0 z-50 flex items-center justify-center p-4" @keydown.escape.window="showModal = false">
|
||||
{# Backdrop #}
|
||||
<div class="fixed inset-0 bg-black/40"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="showModal = false"></div>
|
||||
{# Panel #}
|
||||
<div class="relative bg-white dark:bg-surface-800 rounded-xl shadow-xl w-full max-w-sm p-6"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
@click.stop>
|
||||
<h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-1">{{ modalTitle }}</h3>
|
||||
<p class="text-sm text-surface-500 dark:text-surface-400 mb-4">{{ modalDescription }}</p>
|
||||
|
||||
{# Saved domains list #}
|
||||
<template x-if="savedDomains.length > 0 && !showInput">
|
||||
<div>
|
||||
<div class="flex flex-col gap-2 mb-3">
|
||||
<template x-for="item in savedDomains" :key="item.domain">
|
||||
<div class="flex items-center gap-2 rounded-lg bg-surface-50 dark:bg-surface-700 hover:bg-surface-100 dark:hover:bg-surface-600 transition-colors">
|
||||
<button class="flex-1 px-3 py-2.5 text-left text-sm font-medium text-surface-900 dark:text-surface-100 cursor-pointer"
|
||||
@click="useSaved(item.domain)"
|
||||
x-text="item.domain"></button>
|
||||
<button class="px-2 py-2.5 text-surface-400 hover:text-red-500 transition-colors cursor-pointer"
|
||||
@click="deleteSaved(item.domain)"
|
||||
title="Remove">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<button class="w-full text-sm text-[#a730b8] hover:text-[#a730b8]/80 cursor-pointer font-medium"
|
||||
@click="showAddNew()">Use a different instance</button>
|
||||
<div class="flex mt-3">
|
||||
<button @click="showModal = false"
|
||||
class="w-full px-4 py-2 text-sm font-medium text-surface-600 dark:text-surface-300 bg-surface-100 dark:bg-surface-700 hover:bg-surface-200 dark:hover:bg-surface-600 rounded-lg transition-colors">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
{# New domain input #}
|
||||
<template x-if="savedDomains.length === 0 || showInput">
|
||||
<div>
|
||||
<input x-ref="instanceInput"
|
||||
x-model="instance"
|
||||
@keydown.enter.prevent="confirm()"
|
||||
type="text"
|
||||
placeholder="mastodon.social"
|
||||
class="w-full px-3 py-2 border border-surface-300 dark:border-surface-600 rounded-lg bg-white dark:bg-surface-700 text-surface-900 dark:text-surface-100 placeholder-surface-400 focus:outline-none focus:ring-2 focus:ring-[#a730b8] focus:border-transparent text-sm">
|
||||
<template x-if="error">
|
||||
<p class="text-xs text-red-500 mt-1" x-text="error"></p>
|
||||
</template>
|
||||
<div class="flex gap-3 mt-4">
|
||||
<button @click="showInput ? (showInput = false) : (showModal = false)"
|
||||
class="flex-1 px-4 py-2 text-sm font-medium text-surface-600 dark:text-surface-300 bg-surface-100 dark:bg-surface-700 hover:bg-surface-200 dark:hover:bg-surface-600 rounded-lg transition-colors"
|
||||
x-text="showInput && savedDomains.length > 0 ? 'Back' : 'Cancel'">
|
||||
</button>
|
||||
<button @click="confirm()"
|
||||
class="flex-1 px-4 py-2 text-sm font-medium text-white bg-[#a730b8] hover:bg-[#a730b8]/80 rounded-lg transition-colors">
|
||||
Go
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
{% if actorUrl %}
|
||||
<is-land on:visible>
|
||||
<div class="widget" x-data="fediverseInteract('{{ actorUrl }}')">
|
||||
<div class="widget" x-data="fediverseInteract('{{ actorUrl }}', 'interact')">
|
||||
<h3 class="widget-title">Follow Me</h3>
|
||||
<p class="text-sm text-surface-500 dark:text-surface-400 mb-3">Follow me from your fediverse instance.</p>
|
||||
<a href="{{ actorUrl }}"
|
||||
@@ -30,47 +30,9 @@
|
||||
</svg>
|
||||
<span>Follow on the Fediverse</span>
|
||||
</a>
|
||||
|
||||
{# Modal overlay for instance entry — same pattern as post.njk #}
|
||||
<template x-if="showModal">
|
||||
<div class="fixed inset-0 z-50 flex items-center justify-center p-4" @keydown.escape.window="showModal = false">
|
||||
<div class="fixed inset-0 bg-black/40"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="showModal = false"></div>
|
||||
<div class="relative bg-white dark:bg-surface-800 rounded-xl shadow-xl w-full max-w-sm p-6"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
@click.stop>
|
||||
<h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-1">Follow on the Fediverse</h3>
|
||||
<p class="text-sm text-surface-500 dark:text-surface-400 mb-4">Enter your instance to follow this account.</p>
|
||||
<input x-ref="instanceInput"
|
||||
x-model="instance"
|
||||
@keydown.enter.prevent="confirm()"
|
||||
type="text"
|
||||
placeholder="mastodon.social"
|
||||
class="w-full px-3 py-2 border border-surface-300 dark:border-surface-600 rounded-lg bg-white dark:bg-surface-700 text-surface-900 dark:text-surface-100 placeholder-surface-400 focus:outline-none focus:ring-2 focus:ring-[#a730b8] focus:border-transparent text-sm">
|
||||
<div class="flex gap-3 mt-4">
|
||||
<button @click="showModal = false"
|
||||
class="flex-1 px-4 py-2 text-sm font-medium text-surface-600 dark:text-surface-300 bg-surface-100 dark:bg-surface-700 hover:bg-surface-200 dark:hover:bg-surface-600 rounded-lg transition-colors">
|
||||
Cancel
|
||||
</button>
|
||||
<button @click="confirm()"
|
||||
class="flex-1 px-4 py-2 text-sm font-medium text-white bg-[#a730b8] hover:bg-[#a730b8]/80 rounded-lg transition-colors">
|
||||
Go
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
{% set modalTitle = "Follow on the Fediverse" %}
|
||||
{% set modalDescription = "Choose your instance to follow this account." %}
|
||||
{% include "components/fediverse-modal.njk" %}
|
||||
</div>
|
||||
</is-land>
|
||||
{% endif %}
|
||||
|
||||
@@ -1,26 +1,31 @@
|
||||
{# Share Widget #}
|
||||
{% set shareText = title + " " + site.url + page.url %}
|
||||
<is-land on:visible>
|
||||
<div class="widget">
|
||||
<h3 class="widget-title">Share</h3>
|
||||
<div class="flex gap-2">
|
||||
<a href="https://bsky.app/intent/compose?text={{ title | urlencode }}%20{{ site.url }}{{ page.url | urlencode }}"
|
||||
<a href="https://bsky.app/intent/compose?text={{ shareText | urlencode }}"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="flex-1 inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-[#0085ff]/10 text-[#0085ff] hover:bg-[#0085ff]/20 transition-colors text-sm font-medium"
|
||||
title="Share on Bluesky">
|
||||
<svg class="w-4 h-4" viewBox="0 0 568 501" fill="currentColor">
|
||||
<svg class="w-4 h-4" viewBox="0 0 568 501" fill="currentColor" aria-hidden="true">
|
||||
<path d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://{{ site.feeds.mastodon.instance }}/share?text={{ title | urlencode }}%20{{ site.url }}{{ page.url | urlencode }}"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="flex-1 inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-[#6364ff]/10 text-[#6364ff] hover:bg-[#6364ff]/20 transition-colors text-sm font-medium"
|
||||
title="Share on Mastodon">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.668 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span x-data="fediverseInteract('{{ shareText }}', 'share')" class="flex-1 inline-flex">
|
||||
<a href="https://share.joinmastodon.org/#text={{ shareText | urlencode }}"
|
||||
@click="handleClick($event)"
|
||||
class="w-full inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-[#6364ff]/10 text-[#6364ff] hover:bg-[#6364ff]/20 transition-colors text-sm font-medium cursor-pointer"
|
||||
title="Share on Mastodon / Fediverse (Shift+click to change instance)">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
<path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.668 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/>
|
||||
</svg>
|
||||
</a>
|
||||
{% set modalTitle = "Share on Mastodon / Fediverse" %}
|
||||
{% set modalDescription = "Choose your instance to share this post." %}
|
||||
{% include "components/fediverse-modal.njk" %}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</is-land>
|
||||
|
||||
@@ -91,7 +91,7 @@ withBlogSidebar: true
|
||||
<div class="flex flex-wrap gap-3">
|
||||
{# Fediverse remote interaction button (self-hosted ActivityPub) #}
|
||||
{% if selfHostedApUrl %}
|
||||
<span x-data="fediverseInteract('{{ selfHostedApUrl }}')" class="inline-flex">
|
||||
<span x-data="fediverseInteract('{{ selfHostedApUrl }}', 'interact')" class="inline-flex">
|
||||
<a class="u-syndication inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#a730b8]/10 text-[#a730b8] hover:bg-[#a730b8]/20 transition-colors text-sm font-medium cursor-pointer"
|
||||
href="{{ selfHostedApUrl }}"
|
||||
rel="syndication"
|
||||
@@ -102,49 +102,9 @@ withBlogSidebar: true
|
||||
</svg>
|
||||
<span>Fediverse</span>
|
||||
</a>
|
||||
|
||||
{# Modal overlay for instance entry #}
|
||||
<template x-if="showModal">
|
||||
<div class="fixed inset-0 z-50 flex items-center justify-center p-4" @keydown.escape.window="showModal = false">
|
||||
{# Backdrop #}
|
||||
<div class="fixed inset-0 bg-black/40"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="showModal = false"></div>
|
||||
{# Panel #}
|
||||
<div class="relative bg-white dark:bg-surface-800 rounded-xl shadow-xl w-full max-w-sm p-6"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
@click.stop>
|
||||
<h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-1">Fediverse Interaction</h3>
|
||||
<p class="text-sm text-surface-500 dark:text-surface-400 mb-4">Enter your instance to like, boost, or reply.</p>
|
||||
<input x-ref="instanceInput"
|
||||
x-model="instance"
|
||||
@keydown.enter.prevent="confirm()"
|
||||
type="text"
|
||||
placeholder="mastodon.social"
|
||||
class="w-full px-3 py-2 border border-surface-300 dark:border-surface-600 rounded-lg bg-white dark:bg-surface-700 text-surface-900 dark:text-surface-100 placeholder-surface-400 focus:outline-none focus:ring-2 focus:ring-[#a730b8] focus:border-transparent text-sm">
|
||||
<div class="flex gap-3 mt-4">
|
||||
<button @click="showModal = false"
|
||||
class="flex-1 px-4 py-2 text-sm font-medium text-surface-600 dark:text-surface-300 bg-surface-100 dark:bg-surface-700 hover:bg-surface-200 dark:hover:bg-surface-600 rounded-lg transition-colors">
|
||||
Cancel
|
||||
</button>
|
||||
<button @click="confirm()"
|
||||
class="flex-1 px-4 py-2 text-sm font-medium text-white bg-[#a730b8] hover:bg-[#a730b8]/80 rounded-lg transition-colors">
|
||||
Go
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
{% set modalTitle = "Fediverse Interaction" %}
|
||||
{% set modalDescription = "Choose your instance to like, boost, or reply." %}
|
||||
{% include "components/fediverse-modal.njk" %}
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
|
||||
@@ -1,31 +1,102 @@
|
||||
/**
|
||||
* Fediverse remote interaction component (Alpine.js)
|
||||
* Enables users to like/boost/reply from their own fediverse instance
|
||||
* via the authorize_interaction endpoint.
|
||||
* Fediverse interaction & sharing component (Alpine.js)
|
||||
*
|
||||
* Two modes:
|
||||
* - "interact" (default): redirect to authorize_interaction for like/boost/reply/follow
|
||||
* - "share": redirect to /share?text=... for composing a new post
|
||||
*
|
||||
* Stores multiple domains in localStorage with usage tracking.
|
||||
* Registered via Alpine.data() so the component is available
|
||||
* regardless of script loading order.
|
||||
*/
|
||||
|
||||
const STORAGE_KEY = "fediverse_domains_v1";
|
||||
const OLD_STORAGE_KEY = "fediverse_instance";
|
||||
|
||||
function loadDomains() {
|
||||
try {
|
||||
const json = localStorage.getItem(STORAGE_KEY);
|
||||
if (json) return JSON.parse(json);
|
||||
} catch { /* corrupted data */ }
|
||||
|
||||
// Migrate from old single-domain key
|
||||
const old = localStorage.getItem(OLD_STORAGE_KEY);
|
||||
if (old) {
|
||||
const domains = [{ domain: old, used: 1, lastUsed: new Date().toISOString() }];
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(domains));
|
||||
localStorage.removeItem(OLD_STORAGE_KEY);
|
||||
return domains;
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
|
||||
function saveDomains(domains) {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(domains));
|
||||
}
|
||||
|
||||
function addDomain(domain) {
|
||||
const domains = loadDomains();
|
||||
const existing = domains.find((d) => d.domain === domain);
|
||||
if (existing) {
|
||||
existing.used += 1;
|
||||
existing.lastUsed = new Date().toISOString();
|
||||
} else {
|
||||
domains.push({ domain, used: 1, lastUsed: new Date().toISOString() });
|
||||
}
|
||||
saveDomains(domains);
|
||||
return domains;
|
||||
}
|
||||
|
||||
function removeDomain(domain) {
|
||||
const domains = loadDomains().filter((d) => d.domain !== domain);
|
||||
saveDomains(domains);
|
||||
return domains;
|
||||
}
|
||||
|
||||
function isValidDomain(str) {
|
||||
try {
|
||||
return new URL(`https://${str}`).hostname === str;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("alpine:init", () => {
|
||||
Alpine.data("fediverseInteract", (postUrl) => ({
|
||||
postUrl,
|
||||
Alpine.data("fediverseInteract", (targetUrl, mode) => ({
|
||||
targetUrl,
|
||||
mode: mode || "interact",
|
||||
showModal: false,
|
||||
instance: "",
|
||||
savedDomains: [],
|
||||
showInput: false,
|
||||
error: "",
|
||||
|
||||
handleClick(event) {
|
||||
event.preventDefault();
|
||||
const saved = localStorage.getItem("fediverse_instance");
|
||||
if (saved && !event.shiftKey) {
|
||||
this.redirectToInstance(saved);
|
||||
this.savedDomains = loadDomains().sort((a, b) => b.used - a.used);
|
||||
|
||||
if (this.savedDomains.length === 1 && !event.shiftKey) {
|
||||
addDomain(this.savedDomains[0].domain);
|
||||
this.redirectToInstance(this.savedDomains[0].domain);
|
||||
return;
|
||||
}
|
||||
this.openModal(saved);
|
||||
|
||||
if (this.savedDomains.length === 0) {
|
||||
this.showInput = true;
|
||||
} else {
|
||||
this.showInput = false;
|
||||
}
|
||||
|
||||
this.instance = "";
|
||||
this.error = "";
|
||||
this.showModal = true;
|
||||
},
|
||||
|
||||
openModal(prefill) {
|
||||
this.instance = prefill || "";
|
||||
this.showModal = true;
|
||||
showAddNew() {
|
||||
this.showInput = true;
|
||||
this.instance = "";
|
||||
this.error = "";
|
||||
this.$nextTick(() => {
|
||||
const input = this.$refs.instanceInput;
|
||||
if (input) input.focus();
|
||||
@@ -37,14 +108,37 @@ document.addEventListener("alpine:init", () => {
|
||||
if (!domain) return;
|
||||
// Strip protocol and trailing slashes
|
||||
domain = domain.replace(/^https?:\/\//, "").replace(/\/+$/, "");
|
||||
localStorage.setItem("fediverse_instance", domain);
|
||||
|
||||
if (!isValidDomain(domain)) {
|
||||
this.error = "Please enter a valid domain (e.g. mastodon.social)";
|
||||
return;
|
||||
}
|
||||
|
||||
this.error = "";
|
||||
this.savedDomains = addDomain(domain);
|
||||
this.showModal = false;
|
||||
this.redirectToInstance(domain);
|
||||
},
|
||||
|
||||
useSaved(domain) {
|
||||
this.savedDomains = addDomain(domain);
|
||||
this.showModal = false;
|
||||
this.redirectToInstance(domain);
|
||||
},
|
||||
|
||||
deleteSaved(domain) {
|
||||
this.savedDomains = removeDomain(domain);
|
||||
if (this.savedDomains.length === 0) {
|
||||
this.showInput = true;
|
||||
}
|
||||
},
|
||||
|
||||
redirectToInstance(domain) {
|
||||
const url = `https://${domain}/authorize_interaction?uri=${encodeURIComponent(this.postUrl)}`;
|
||||
window.location.href = url;
|
||||
if (this.mode === "share") {
|
||||
window.location.href = `https://${domain}/share?text=${encodeURIComponent(this.targetUrl)}`;
|
||||
} else {
|
||||
window.location.href = `https://${domain}/authorize_interaction?uri=${encodeURIComponent(this.targetUrl)}`;
|
||||
}
|
||||
},
|
||||
}));
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user