[Astro] remark-link-card-plus Is God-Tier

I had been using remark-link-card to implement link cards on this blog.

GitHub - gladevise/remark-link-card

Contribute to gladevise/remark-link-card development by creating an account on GitHub.

github.com

However, this plugin had several issues.

Links in Bullet Lists Also Get Converted to Link Cards and Fly to the Top of the Page#

To avoid this, I had no choice but to give up on writing URLs inside bullet lists.

An issue pointing this out has been opened, but there doesn’t seem to be any response
Is converting links inside lists into link cards an intended behavior? · Issue #18 · gladevise/remark-link-card

Thank you for creating such a wonderful library! While using this library, I noticed that links inside lists are also being converted into link cards. Is this the intended behavior, or is it unexpe...

github.com
↑ Meaning you can’t write like this

Cannot Fetch Images if the Image Size Is Too Large#

You get an error like this. It happened frequently, especially when trying to make link cards for YouTube videos.

1
[remark-link-card] Error: Failed to get the Open Graph data of https://www.youtube.com/watch?v=PAe7tPJqXnQ due to Exceeded the download limit of 1000000 bytes.

Searching for the error message turned up no other similar reports.

Solution#

While trying to solve it myself, I stumbled across the following article.

Markdown内のリンクをカード化するremarkプラグインremark-link-card-plusをリリースした | okaryo.log

正月駆動開発

blog.okaryo.studio

GitHub - gladevise/remark-link-card

Contribute to gladevise/remark-link-card development by creating an account on GitHub.

github.com

When I installed it, lo and behold, both of these issues were solved!!!

For the CSS, I referenced the following article and adapted it directly for remark-link-card-plus.

Astroにおけるremark-link-cardを使ったリンクカード — Daiki Sato

Astroで、remarkプラグインであるremark-link-cardを使いリンクをカード形式で表示できるようにしました。

sur33.com

1
/* Breakpoint: 60ch (based on max-width of Tailwindcss/Typography prose) */
2
.remark-link-card-plus__container {
3
  width: 100%;
4
  margin-bottom: 1.25em;
5
}
6

7
.remark-link-card-plus__card {
8
  --padding-x: 1rem;
9
  --padding-y: 0.7rem;
10
  --border-radius: calc(0.5rem - 1px);
11
  border: 1px solid var(--tw-prose-hr);
12
  border-radius: calc(var(--border-radius) + 1px);
13
  text-decoration: none;
14
  display: grid;
15
  grid-template-columns: 1fr 116px;
16
  gap: 1rem;
17
  @media (min-width: 60ch) {
18
    grid-template-columns: 1fr 220px;
19
  }
20
  transition: background-color 150ms;
21

22
  &:hover {
23
    background-color: var(--primary-color);
24
    @media (prefers-color-scheme: dark) {
25
      background-color: var(--primary-color-lighten);
26
    }
27
  }
28
}
29

30
.remark-link-card-plus__main {
31
  display: flex;
32
  flex-direction: column;
33
  justify-content: center;
34
  font-weight: normal;
35

36
  grid-column: 1;
37
  padding: var(--padding-y) 0 var(--padding-y) var(--padding-x);
38
  max-width: 100%;
39
  min-width: 100%;
40
  border-radius: var(--border-radius) 0 0 var(--border-radius);
41
}
42

43
/*
44
.remark-link-card-plus__content {
45
}
46
*/
47

48
.remark-link-card-plus__title {
49
  font-size: 1rem;
50
  font-weight: bold;
51
  line-height: 1.3;
52
  color: var(--tw-prose-headings);
53

54
  overflow: hidden;
55
  display: -webkit-box;
56
  text-overflow: ellipsis;
57
  -webkit-box-orient: vertical;
58
  -webkit-line-clamp: 2;
59
  line-clamp: 2;
60
}
61

62
.remark-link-card-plus__description {
63
  font-size: 0.8rem;
64
  color: #737373;
65
  @media (prefers-color-scheme: dark) {
66
    color: #a3a3a3;
67
  }
68

69
  margin-bottom: 0.5em;
70

71
  overflow: hidden;
72
  text-overflow: ellipsis;
73
  white-space: nowrap;
74
  -webkit-line-clamp: 1;
75
  line-clamp: 1;
76
}
77

78
.remark-link-card-plus__meta {
79
  display: flex;
80
  align-items: center;
81
  gap: 0.5rem;
82
}
83

84
.remark-link-card-plus__favicon {
85
  margin-top: 0.15rem;
86
  margin-bottom: 0;
87
}
88

89
.remark-link-card-plus__url {
90
  font-size: 0.8rem;
91
  color: #525252;
92
  @media (prefers-color-scheme: dark) {
93
    color: #d4d4d4;
94
  }
95

96
  overflow: hidden;
97
  text-overflow: ellipsis;
98
  white-space: nowrap;
99
  -webkit-line-clamp: 1;
100
  line-clamp: 1;
101
}
102

103
.remark-link-card-plus__thumbnail {
104
  grid-column: 2;
105
  aspect-ratio: 1 / 1;
106
  @media (min-width: 60ch) {
107
    aspect-ratio: 1.91 / 1;
108
  }
109
}
110

111
.remark-link-card-plus__image {
112
  object-fit: cover;
113
  height: 100%;
114
  width: 100%;
115
  margin: 0;
116
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
117
}

[Astro] remark-link-card-plus Is God-Tier

Links in Bullet Lists Also Get Converted to Link Cards and Fly to the Top of the Page#

Cannot Fetch Images if the Image Size Is Too Large#

Solution#

More articles