リンクカードを表示する

<https://ubanis.com/note/ap/2023-1028-1306>

npm install remark-link-card

import remarkLinkCard from 'remark-link-card';// 中略export default defineConfig({  markdown: {    remarkPlugins: [remarkLinkCard]  },// 中略})

<a class="rlc-container" href="https://ubanis.com/note/ap/2023-1028-1306">  <div class="rlc-info">    <div class="rlc-title">u-photoが自動付与されてるかのテスト</div>    <div class="rlc-description">テスト投稿</div>    <div class="rlc-url-container">      <img class="rlc-favicon" src="https://www.google.com/s2/favicons?domain=ubanis.com" alt="u-photoが自動付与されてるかのテスト favicon" width="16" height="16">      <span class="rlc-url">https://ubanis.com/note/ap/2023-1028-1306</span>    </div>  </div>  <div class="rlc-image-container">      <img class="rlc-image" src="https://ubanis.com/img/nyan4.jpg" alt="u-photoが自動付与されてるかのテスト">    </div></a>

.rlc-container {  display: grid;  overflow: hidden;  grid-template-columns: 3fr 1fr;  grid-template-rows: 1fr;  grid-column-gap: 0px;  grid-row-gap: 0px;  align-items: streatch;  width: 100%;  max-width: 800px;  margin: 0 auto 2rem;  padding: 0.25rem;  text-decoration: none;  border-color: black;  border: 1px solid;  border-color: gray !important;  border-radius: 0.5rem;  transition: background 200ms ease-in-out 0s, box-shadow 200ms ease-in-out 0s;}.rlc-container:link,.rlc-container:visited {  color: #333;}  @media (hover: hover) {.rlc-container:hover {  background-color: rgba(80, 80, 80, 0.1);  box-shadow: 0 4px 5px 2px rgba(80, 80, 80, 0.2);}  }.rlc-info {  grid-area: 1 / 1 / 2 / 2;  display: flex;  flex-direction: column;  overflow: hidden;  justify-content: space-between;  padding: 0.5rem;  text-align: left;}.rlc-title {  overflow: hidden;  text-overflow: ellipsis;  font-size: 1.25rem;  white-space: nowrap;}.rlc-description {  overflow: hidden;  font-size: 0.875rem;  line-height: 1rem;  height: 2rem;}.rlc-url-container {  display: flex;  align-items: bottom;}.rlc-favicon {  display: flex;  flex-direction: column;  align-items: bottom;  margin-right: 4px;  width: 16px;  height: 16px;}.rlc-url {  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;  font-size: 1rem;}.rlc-image-container {  display: grid;  grid-area: 1 / 2 / 2 / 3;  align-items: center;  height: 8rem;}.rlc-image {  object-fit: contain;  margin: auto;  overflow: hidden;  width: 100%;  max-width: 100%;  min-height: 8rem;  max-height: 8rem;  border-bottom-right-radius: 0.25rem;  border-top-right-radius: 0.25rem;}