1
import remnarkLinkCard from 'remark-link-card'
2
{/* 中略 */}
3
remarkPlugins: [
4
      [remnarkLinkCard,{ shortenUrl: true }],
5
      remarkMath,
6
      remarkReadingTime,
7
      remarkExcerpt,
8
      remarkGithubAdmonitionsToDirectives,
9
      remarkDirective,
10
      remarkSectionize,
11
      parseDirectiveNode,
12
    ],

1
.rlc-container {
2
  width: 100%;
3
  max-width: 800px;
4
  max-height: 130px;
5
  margin: 0 auto 2rem;
6
  background: var(--license-block-bg);
7

8
  text-decoration: none;
9

10
  border-radius: 0.75rem;
11
  display: flex;
12
  align-items: stretch;
13
  flex-direction: row; /* デフォルトは横並び */
14

15
  transition:
16
    background 200ms ease-in-out 0s,
17
    box-shadow 200ms ease-in-out 0s;
18
}
19

20
.rlc-container:hover {
21
  background-color: var(--btn-regular-bg-hover);
22
}
23

24
.rlc-info {
25
  overflow: hidden; /* PCではhidden */
26
  padding: 1rem;
27
  text-align: left;
28
  flex: 4 1 100px;
29
  align-items: flex-start;
30
  text-decoration: none;
31
  min-height: 100px; /* スマホ時に高さ不足にならないように */
32
}
33

34
.rlc-title {
35
  font-size: 1.25rem;
36
  text-overflow: ellipsis;
37
  white-space: nowrap;
38
  overflow: hidden;
39
}
40

41
/* PCでは1行で「...」 */
42
.rlc-description {
43
  font-size: 0.875rem;
44
  font-weight: 300;
45
  display: -webkit-box;
46
  -webkit-line-clamp: 1; /* 1行で省略 */
47
  -webkit-box-orient: vertical;
48
  text-overflow: ellipsis;
49
  line-height: 1.4rem; /* 行の高さを適切に調整 */
50
  max-height: 3rem;
51
  overflow: hidden;
52
  flex-grow: 1; /* 説明文が途切れないように */
53
  padding-bottom: 4px; /* PC時の圧迫を防ぐ */
54
  color: var(--tw-prose-body);
55
}
56

57
.rlc-url-container {
58
  margin-top: auto; /* 説明文の下に配置 */
59
  display: flex;
60
  align-items: center;
61
}
62

63
.rlc-favicon {
64
  margin-right: 4px;
65
  width: 16px;
66
  height: 16px;
67
  margin-top: 0 !important;
68
  margin-bottom: 0 !important;
69
}
70

71
.rlc-url {
72
  font-size: 1rem;
73
  text-overflow: ellipsis;
74
  white-space: nowrap;
75
  overflow: hidden;
76
}
77

78
.rlc-image-container {
79
  position: relative;
80
  flex: 1 1 100px;
81
  padding: 0.3rem;
82
  aspect-ratio: 1 / 1;
83
}
84

85
.rlc-image {
86
  width: 100%;
87
  height: 100%;
88
  object-fit: cover;
89
  border-bottom-right-radius: 0.25rem;
90
  border-top-right-radius: 0.25rem;
91
  margin-top: 0 !important;
92
  margin-bottom: 0 !important;
93
}
94

95
/* スマホ用のレイアウト調整 */
96
@media (max-width: 768px) {
97
  .rlc-container {
98
    flex-direction: column;
99
    max-height: unset;
100
  }
101

102
  /* 画像を上にする */
103
  .rlc-image-container {
104
    order: -1;
105
    flex: none;
106
    width: 100%;
107
    /*height: 150px;*/
108
    padding: 0.5rem;
109
    aspect-ratio: 1.91 / 1;
110
  }
111

112
  .rlc-image {
113
    width: 100%;
114
    height: 100%;
115
    border-radius: 0.75rem 0.75rem 0 0;
116
  }
117

118
  /* スマホではタイトル・説明・URLを折り返す */
119
  .rlc-title {
120
    white-space: normal;
121
    overflow: visible;
122
  }
123

124
  /* スマホでは全文表示 */
125
  .rlc-description {
126
    -webkit-line-clamp: unset; /* 制限解除 */
127
    -webkit-box-orient: unset;
128
    display: block;
129
    max-height: none;
130
    height: auto;
131
    overflow: visible;
132
    flex-grow: unset; /* スマホでは自由に伸ばす */
133
  }
134

135
  .rlc-info {
136
    overflow: visible; /* スマホではhiddenを解除 */
137
    min-height: unset; /* スマホでは高さ制限を解除 */
138
  }
139

140
  .rlc-url {
141
    white-space: normal;
142
    overflow-wrap: break-word;
143
  }
144
}

1
let linkCards = Array.from(document.querySelectorAll(".rlc-container")) as HTMLElement[];
2
for (let linkCard of linkCards) {
3
    linkCard.classList.add("no-styling"); // Tailwind CSS(prose)を適用させないようにする
4
    linkCard.style.textDecoration = "none"; // 文字列の下線部を非表示にする
5
    linkCard.setAttribute('target','_blank'); //新しいタブで開く
6
}