リンクカードを実装

app/controllers/api/metadata_controller.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class API::MetadataController < ApplicationController
+  def index
+    card = LinkCard::Card.new(params)
+    render json: card.metadata
+  end
+end

app/javascript/markdown-initializer.js

@@ -12,6 +12,8 @@ import MarkDownItContainerMessage from 'markdown-it-container-message'
 import MarkDownItContainerDetails from 'markdown-it-container-details'
 import MarkDownItLinkAttributes from 'markdown-it-link-attributes'
 import MarkDownItContainerSpeak from 'markdown-it-container-speak'
+import MarkDownItLinkToCard from 'markdown-it-link-to-card'
+import ReplaceLinkToCard from 'replace-link-to-card'
 
 export default class {
   replace(selector) {
@@ -27,6 +29,7 @@ export default class {
 
     new UserIconRenderer().render(selector)
     MarkdownItTaskListsInitializer.initialize()
+    ReplaceLinkToCard(elements)
   }
 
   render(text) {
@@ -53,6 +56,7 @@ export default class {
       }
     })
     md.use(MarkDownItContainerSpeak)
+    md.use(MarkDownItLinkToCard)
     return md.render(text)
   }
 }

app/javascript/markdown-it-link-to-card.js

@@ -0,0 +1,74 @@
+export default (md, _options) => {
+  md.core.ruler.after('replacements', 'link-to-card', function (state) {
+    const tokens = state.tokens
+    let allowLevel = 0
+    for (let i = 0; i < tokens.length; i++) {
+      const token = tokens[i]
+      if (
+        token.type === 'container_details_open' ||
+        token.type === 'container_message_open'
+      ) {
+        allowLevel++
+        continue
+      }
+      if (
+        (token.type === 'container_details_close' && allowLevel > 0) ||
+        (token.type === 'container_message_close' && allowLevel > 0)
+      ) {
+        allowLevel--
+        continue
+      }
+      // リンクの親のp要素が他のマークダウンにネストしていない場合のみリンクカードを生成する(details, message以外)
+      const parentToken = tokens[i - 1]
+      const isAllowedParagraph =
+        parentToken &&
+        parentToken.type === 'paragraph_open' &&
+        parentToken.level === allowLevel
+      if (!isAllowedParagraph) continue
+
+      // 記法の対象となるlinkはinlineTokenのchildrenにのみ存在する
+      if (token.type !== 'inline') continue
+
+      const children = token.children
+      if (!children) continue
+
+      // childrenにlinkが存在する場合のみリンクカードを生成する
+      const hasLink = children?.some((child) => child.type === 'link_open')
+      if (!hasLink) continue
+
+      // childrenにbrが存在しない場合のみリンクカードを生成する
+      const hasBr = children?.some((child) => child.type === 'softbreak')
+      if (hasBr) continue
+
+      const match = token.content.match(/^@\[card\]\((.+)\)$/)
+      if (!match) continue
+
+      const linkCardUrl = match[1]
+      if (!isValidHttpUrl(linkCardUrl)) continue
+
+      const linkCardToken = new state.Token('html_block', '', 0)
+      linkCardToken.content = `
+      <div class="a-link-card before-replacement-link-card" data-url="${md.utils.escapeHtml(
+        linkCardUrl
+      )}">
+        <p>リンクカード適用中... <i class="fa-regular fa-loader fa-spin"></i></p>
+      </div>
+        `
+      // tokens[i]の位置にpushしてしまうと、Tokenの配列として正しい形でなくなり、想定していないHTMLが出力されてしまう。
+      // 正しいTokenの配列を保つために、linkCardの一連のtoken(pOpen inline pClose)の後にpushしている
+      tokens.splice(i + 2, 0, linkCardToken)
+
+      parentToken.attrJoin('style', 'display: none')
+    }
+    return true
+  })
+}
+
+const isValidHttpUrl = (str) => {
+  try {
+    const url = new URL(str)
+    return url.protocol === 'http:' || url.protocol === 'https:'
+  } catch (_) {
+    return false
+  }
+}

app/javascript/replace-link-to-card.js

@@ -0,0 +1,193 @@
+import CSRF from 'csrf'
+import { debounce } from './debounce.js'
+
+export default (textareas) => {
+  replaceLinkToCard()
+  const debouncedReplace = debounce(replaceLinkToCard, 300)
+
+  Array.from(textareas).forEach((textarea) => {
+    textarea.addEventListener('input', debouncedReplace)
+  })
+}
+
+const replaceLinkToCard = () => {
+  const targetLinkList = document.querySelectorAll(
+    '.before-replacement-link-card:not(.processed)'
+  )
+
+  targetLinkList.forEach((targetLink) => {
+    const url = targetLink.dataset.url
+    if (!url) {
+      console.error('URLが取得できませんでした:', targetLink)
+      handleEmbedFailure(targetLink, url)
+      return
+    }
+
+    if (isTweet(url)) {
+      embedToTweet(targetLink, url).catch(() =>
+        handleEmbedFailure(targetLink, url)
+      )
+    } else {
+      embedToLinkCard(targetLink, url).catch(() =>
+        handleEmbedFailure(targetLink, url)
+      )
+    }
+
+    const sibling = targetLink.previousElementSibling
+    if (sibling.tagName === 'P') {
+      sibling.insertAdjacentElement('afterend', targetLink)
+      sibling.remove()
+    }
+
+    targetLink.classList.add('processed')
+  })
+}
+
+const isTweet = (url) => {
+  return /^https:\/\/(twitter|x)\.com\/[a-zA-Z0-9_-]+\/status\/[a-zA-Z0-9?=&\-_]+$/.test(
+    url
+  )
+}
+
+const isTwitter = (url) => {
+  return /^https:\/\/(twitter|x)\.com/.test(url)
+}
+
+const loadTwitterScript = () => {
+  if (
+    !document.querySelector(
+      'script[src="https://platform.twitter.com/widgets.js"]'
+    )
+  ) {
+    const twitterScript = document.createElement('script')
+    twitterScript.src = 'https://platform.twitter.com/widgets.js'
+    document.body.appendChild(twitterScript)
+  }
+}
+
+const embedToTweet = async (targetLink, url) => {
+  try {
+    const response = await fetch(
+      `/api/metadata?url=${encodeURIComponent(url)}&tweet=1`,
+      {
+        headers: {
+          'Content-Type': 'application/json; charset=utf-8',
+          'X-Requested-With': 'XMLHttpRequest',
+          'X-CSRF-Token': CSRF.getToken()
+        },
+        credentials: 'same-origin',
+        redirect: 'manual'
+      }
+    )
+
+    if (!response.ok) throw new Error(`Error: ${response.status}`)
+
+    const embedTweet = await response.json()
+    targetLink.insertAdjacentHTML('afterend', embedTweet.html)
+    targetLink.remove()
+    loadTwitterScript()
+  } catch (error) {
+    console.error('Tweetの埋め込みに失敗しました:', error)
+    handleEmbedFailure(targetLink, url)
+  }
+}
+
+const embedToLinkCard = async (targetLink, url) => {
+  try {
+    const response = await fetch(
+      `/api/metadata?url=${encodeURIComponent(url)}`,
+      {
+        headers: {
+          'Content-Type': 'application/json; charset=utf-8',
+          'X-Requested-With': 'XMLHttpRequest',
+          'X-CSRF-Token': CSRF.getToken()
+        },
+        credentials: 'same-origin',
+        redirect: 'manual'
+      }
+    )
+
+    if (!response.ok) throw new Error(`Error: ${response.status}`)
+
+    const metaData = await response.json()
+
+    const imageSection = metaData.image
+      ? `
+    <div class="a-link-card__image"><a href="${
+      metaData.site_url || ''
+    }" target="_blank"  rel="noopener" class="a-link-card__image-link">
+      <img src="${metaData.image}" alt="${
+          metaData.title || 'Site Image'
+        }" class="a-link-card__image-ogp" />
+    </a></div>
+    `
+      : ''
+
+    const descriptionSection = metaData.description
+      ? `<p>${metaData.description}</p>`
+      : `<p><a href="${url}" target="_blank" rel="noopener" class="a-link-card__body-url-link">${url}</a></p>`
+
+    const faviconSection = metaData.favicon
+      ? `
+      <img src="${metaData.favicon}" alt="Favicon" class="a-link-card__favicon-image" />
+      `
+      : ''
+
+    targetLink.insertAdjacentHTML(
+      'afterend',
+      `
+      <div class="a-link-card">
+        <div class="a-link-card__title">
+          <a href="${url}" target="_blank" rel="noopener" class="a-link-card__title-link">
+            <div class="a-link-card__title-text">${
+              metaData.title || 'No Title'
+            }</div>
+          </a>
+        </div>
+        <div class="a-link-card__body">
+          <div class="a-link-card__body-start">
+            <div class="a-link-card__description">
+              ${descriptionSection}
+            </div>
+            <div class="a-link-card__site-title">
+              <a href="${
+                metaData.site_url || ''
+              }" target="_blank" rel="noopener" class="a-link-card__site-title-link">
+                ${faviconSection}
+                <div class="a-link-card__site-title-text">${
+                  metaData.site_name || 'No Site Name'
+                }</div>
+              </a>
+            </div>
+          </div>
+          <div class="a-link-card__body-end">
+            ${imageSection}
+          </div>
+        </div>
+      </div>
+      `
+    )
+    targetLink.remove()
+  } catch (error) {
+    console.error('リンクカードの埋め込みに失敗しました:', error)
+    handleEmbedFailure(targetLink, url)
+  }
+}
+
+const handleEmbedFailure = (targetLink, url) => {
+  targetLink.insertAdjacentHTML(
+    'afterend',
+    `
+    <div class="a-link-card embed-error">
+      <!-- リンクの変換に失敗しました。以下のリンクをご確認ください。 -->
+      <div class="embed-error__inner">
+        ${isTwitter ? '<i class="fa-brands fa-x-twitter"></i>' : ''}
+        <a href="${url}" target="_blank" rel="noopener">
+          ${url}
+        </a>
+      </div>
+    </div>
+    `
+  )
+  targetLink.remove()
+}

app/javascript/stylesheets/_common-imports.sass

@@ -125,6 +125,7 @@
 @import "atoms/a-side-nav"
 @import "atoms/a-notice-block"
 @import "atoms/a-table"
+@import "atoms/a-link-card"
 
 ////////////
 // layouts