シンプルなブログカードとブックマークレットを作る【Astro】

---
import { Image } from 'astro:assets'

interface Props {
  title: string
  description: string
  url: string
  domain: string
}

const { title, description, url, domain } = Astro.props
---

<div
  class='mx-auto mb-12 mt-4 w-full border border-gray-600 bg-white p-4 shadow dark:bg-inherit md:ml-4 md:w-10/12'
>
  <div>
    <p class='m-0 truncate font-semibold hover:text-clip md:m-0'>
      <a href={url} target='_blank'>
        {title}
      </a>
    </p>
    <p class='mt-2 line-clamp-3 text-ellipsis text-sm'>
      {description}
    </p>
  </div>
  <div class='mt-2'>
    <a class='flex p-0' href={url} target='_blank'>
      <Image
        src={`https://www.google.com/s2/favicons?domain=${url}`}
        width={16}
        height={16}
        format='webp'
        alt='favicon for blog card'
        class='m-0 md:m-0'
      />
      <span class='mx-2 my-0 text-sm leading-none'>{domain}</span>
    </a>
  </div>
</div>

javascript:(function(){const t=document.createElement("style");t.innerHTML="\n    .custom-dialog {\n      color: #fff;\n%20%20%20%20%20%20overflow:%20auto;\n%20%20%20%20%20%20max-width:%2080%;\n%20%20%20%20%20%20max-height:%2080%;\n%20%20%20%20%20%20position:%20fixed;\n%20%20%20%20%20%20top:%2050%;\n%20%20%20%20%20%20left:%2050%;\n%20%20%20%20%20%20transform:%20translate(-50%,%20-50%);\n%20%20%20%20%20%20padding:%2020px;\n%20%20%20%20%20%20background-color:%20#171717;\n%20%20%20%20%20%20box-shadow:%200%202px%2010px%20rgba(0,%200,%200,%200.1);\n%20%20%20%20%20%20z-index:%2010000;\n%20%20%20%20%20%20font-size:14px;\n%20%20%20%20}\n%20%20%20%20.custom-dialog-overlay%20{\n%20%20%20%20%20%20position:%20fixed;\n%20%20%20%20%20%20top:%200;\n%20%20%20%20%20%20left:%200;\n%20%20%20%20%20%20width:%20100%;\n%20%20%20%20%20%20height:%20100%;\n%20%20%20%20%20%20background:%20rgba(0,%200,%200,%200.4);\n%20%20%20%20%20%20z-index:%209999;\n%20%20%20%20}\n%20%20%20%20.custom-dialog-close%20{\n%20%20%20%20%20%20float:%20right;\n%20%20%20%20%20%20cursor:%20pointer;\n%20%20%20%20}\n%20%20",document.head.appendChild(t);const%20e=()=>document.title,n=t=>{const%20e=document.querySelector(`meta[property='${t}']`);return%20e?e.getAttribute("content"):void%200},o={title:n("og:title")||e(),desp:n("og:description")||"",url:document.URL,domain:location.host},r=t=>t.replace(/["'\\\n\r]/g,function(t){switch(t){case'"':return"&quot;";case"'":return"&#39;";case"\\":return"\\\\";case"\n":case"\r":return"";default:return%20t}}),c=`\n%20%20%20%20&lt;BlogCard\n%20%20%20%20title="${r(o.title)}"\n%20%20%20%20description="${r(o.desp)}"\n%20%20%20%20url='${o.url}'\n%20%20%20%20domain='${o.domain}'%20/&gt;\n%20%20`,a=document.createElement("div");a.className="custom-dialog-overlay";const%20i=document.createElement("div");i.className="custom-dialog",i.innerHTML=`<pre>${c}</pre><button%20class="custom-dialog-close">%E9%96%89%E3%81%98%E3%82%8B</button>`,a.appendChild(i),document.body.appendChild(a),i.querySelector(".custom-dialog-close").onclick=(()=>{document.body.removeChild(a)}),navigator.clipboard.writeText(c.trim().replace("&lt;","<").replace("&gt;",">")).then(()=>{alert("%E3%82%B3%E3%83%94%E3%83%BC%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F")}).catch(t=>{alert("%E3%82%B3%E3%83%94%E3%83%BC%E3%81%AB%E5%A4%B1%E6%95%97%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F:%20",t)})})();

---
title: blogcardサンプル
---

import BlogCard from '@/components/mdx/BlogCard'

## ブックマークレットを貼り付けてみる

↓こんな感じになる↓

<BlogCard
  title='Home'
  description='個人Blog。 Book感想、システム開発の備忘録、その他雑記など。'
  url='https://neputa-note.pages.dev/'
  domain='neputa-note.pages.dev'
/>