Script d'aperçu des liens sur Yakihonne

原始 JSON

{
  "kind": 30023,
  "id": "252b7ed04e621cc8ad4f5f80940e2aa4718571d2864a91d5544b5e357a9c4aee",
  "pubkey": "1e9776a23fb84504bacc29a02c55457f836d6875ba1e4a905d420402716ab484",
  "created_at": 1780140383,
  "tags": [
    [
      "client",
      "Yakihonne",
      "31990:20986fb83e775d96d188ca5c9df10ce6d613e0eb7e5768a0f0b12b37cdac21b3:1700732875747"
    ],
    [
      "published_at",
      "1780140306"
    ],
    [
      "d",
      "jkS_3PaLPGyjKjBsAGrTr"
    ],
    [
      "image",
      "https://image.nostr.build/ffca2401b910554614a62e99121ca6fc92ab243bc5a93ca68920534847bf0c2a.jpg"
    ],
    [
      "title",
      "Script d'aperçu des liens sur Yakihonne"
    ],
    [
      "summary",
      ""
    ],
    [
      "t",
      "yakihonne"
    ],
    [
      "t",
      "nostrfr"
    ]
  ],
  "content": "Par défaut la génération des aperçus des liens ne fonctionne pas sur [Yakihonne.com](https://yakihonne.com). #yakihonne #nostrfr\n\nPour résoudre ce problème, j'ai trouvé l'astuce suivante :\n\n1. Installer l'extension [Tampermonkey](https://www.tampermonkey.net/)\n2. Dans les paramètres de l'extension autoriser les scripts utilisateur\n![image](https://image.nostr.build/a813062f4869d4715ffc995423459156e418206bd1838e45d19ab97eec89674e.png)\n3. Dans Tampermonkey créer le script suivant :\n```\n// ==UserScript==\n// @name         Yakihonne - Aperçus URL carte compacte\n// @namespace    local.yakihonne.preview\n// @version      2.2\n// @description  Affiche une carte compacte avec image complète à gauche et titre centré à droite\n// @match        https://yakihonne.com/*\n// @grant        GM_xmlhttpRequest\n// @connect      *\n// ==/UserScript==\n\n(function () {\n    'use strict';\n\n    const processed = new Set();\n\n    const style = document.createElement('style');\n    style.textContent = `\n        .yh-preview-card {\n            display: flex;\n            align-items: stretch;\n            width: 100%;\n            max-width: 100%;\n            height: 96px;\n            margin: 8px 0 10px 0;\n            border: 1px solid #ddd;\n            border-radius: 14px;\n            overflow: hidden;\n            background: #f7f3f1;\n            text-decoration: none;\n            cursor: pointer;\n            box-sizing: border-box;\n        }\n\n        .yh-preview-card:hover {\n            background: #f0ecea;\n        }\n\n        .yh-preview-image {\n            width: 220px;\n            min-width: 220px;\n            height: 100%;\n            overflow: hidden;\n            background: #f7f3f1;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .yh-preview-image img {\n            width: 100%;\n            height: 100%;\n            object-fit: contain;\n            display: block;\n            background: #f7f3f1;\n        }\n\n        .yh-preview-title {\n            flex: 1;\n            min-width: 0;\n            padding: 10px 14px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            text-align: center;\n            color: #111;\n            font-size: 16px;\n            font-weight: 700;\n            line-height: 1.25;\n        }\n\n        .yh-preview-title span {\n            display: -webkit-box;\n            -webkit-line-clamp: 3;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n        }\n\n        @media (max-width: 700px) {\n            .yh-preview-image {\n                width: 140px;\n                min-width: 140px;\n            }\n\n            .yh-preview-title {\n                font-size: 14px;\n                padding: 8px;\n            }\n        }\n    `;\n    document.head.appendChild(style);\n\n    function escapeHtml(text) {\n        return String(text || '').replace(/[\u0026\u003c\u003e\"']/g, c =\u003e ({\n            '\u0026': '\u0026amp;',\n            '\u003c': '\u0026lt;',\n            '\u003e': '\u0026gt;',\n            '\"': '\u0026quot;',\n            \"'\": '\u0026#039;'\n        }[c]));\n    }\n\n    function meta(doc, selector) {\n        return doc.querySelector(selector)?.getAttribute('content') || '';\n    }\n\n    function absoluteUrl(value, base) {\n        try {\n            return new URL(value, base).href;\n        } catch {\n            return '';\n        }\n    }\n\n    function fetchPreview(url) {\n        return new Promise(resolve =\u003e {\n            GM_xmlhttpRequest({\n                method: 'GET',\n                url,\n                timeout: 15000,\n\n                onload: res =\u003e {\n                    try {\n                        const doc = new DOMParser().parseFromString(\n                            res.responseText,\n                            'text/html'\n                        );\n\n                        const title =\n                            meta(doc, 'meta[property=\"og:title\"]') ||\n                            meta(doc, 'meta[name=\"twitter:title\"]') ||\n                            doc.querySelector('title')?.textContent ||\n                            url;\n\n                        const image =\n                            meta(doc, 'meta[property=\"og:image\"]') ||\n                            meta(doc, 'meta[name=\"twitter:image\"]') ||\n                            '';\n\n                        resolve({\n                            url,\n                            title: title.trim(),\n                            image: absoluteUrl(image, url)\n                        });\n                    } catch {\n                        resolve(null);\n                    }\n                },\n\n                onerror: () =\u003e resolve(null),\n                ontimeout: () =\u003e resolve(null)\n            });\n        });\n    }\n\n    function createCard(data) {\n        if (!data.image) return null;\n\n        const card = document.createElement('a');\n\n        card.className = 'yh-preview-card';\n        card.href = data.url;\n        card.target = '_blank';\n        card.rel = 'noopener noreferrer';\n\n        card.innerHTML = `\n            \u003cdiv class=\"yh-preview-image\"\u003e\n                \u003cimg src=\"${escapeHtml(data.image)}\" loading=\"lazy\"\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"yh-preview-title\"\u003e\n                \u003cspan\u003e${escapeHtml(data.title)}\u003c/span\u003e\n            \u003c/div\u003e\n        `;\n\n        card.addEventListener('click', function (e) {\n            e.preventDefault();\n            e.stopPropagation();\n            window.open(data.url, '_blank', 'noopener,noreferrer');\n        }, true);\n\n        return card;\n    }\n\n    async function scanLinks() {\n        const links = document.querySelectorAll('a[href^=\"http\"]');\n\n        for (const link of links) {\n            const url = link.href;\n\n            if (!url) continue;\n            if (url.includes('yakihonne.com')) continue;\n            if (url.startsWith('nostr:')) continue;\n            if (link.closest('.yh-preview-card')) continue;\n\n            const key = url + '|' + link.textContent;\n\n            if (processed.has(key)) continue;\n            processed.add(key);\n\n            const preview = await fetchPreview(url);\n\n            if (!preview) continue;\n\n            const card = createCard(preview);\n\n            if (!card) continue;\n\n            if (\n                !link.nextElementSibling ||\n                !link.nextElementSibling.classList.contains('yh-preview-card')\n            ) {\n                link.insertAdjacentElement('afterend', card);\n            }\n        }\n    }\n\n    const observer = new MutationObserver(() =\u003e {\n        clearTimeout(window.__yhPreviewTimer);\n\n        window.__yhPreviewTimer = setTimeout(() =\u003e {\n            scanLinks();\n        }, 500);\n    });\n\n    observer.observe(document.body, {\n        childList: true,\n        subtree: true\n    });\n\n    setTimeout(scanLinks, 1500);\n    setInterval(scanLinks, 3000);\n})();\n```\nNormalement vous devriez obtenir le résultat suivant :\n![image](https://image.nostr.build/80215eff16bc26c43511435debf8400e67b42ac6b8e32f2e8f9fd9c9cc23d275.png)\n",
  "sig": "871346bf57951bffd4c0e2f329c6f7b0a6c49c9c9eb1d574530d1f3f80c4eee73217ae6e77a7b207793cdd3b9a64f983cee181148d9fb8cca03d2f11f0087973"
}