mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-24 13:24:05 -06:00
Run npx prettier . --write
This commit is contained in:
tsumac
parent
3d93f64c92
commit
3a178acda0
@ -2,7 +2,10 @@
|
|||||||
import linkCardScript from "./scripts/linkcard.inline"
|
import linkCardScript from "./scripts/linkcard.inline"
|
||||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||||
|
|
||||||
const LinkCardHandler: QuartzComponent = ({ displayClass: _displayClass, cfg:_cfg }: QuartzComponentProps) => {
|
const LinkCardHandler: QuartzComponent = ({
|
||||||
|
displayClass: _displayClass,
|
||||||
|
cfg: _cfg,
|
||||||
|
}: QuartzComponentProps) => {
|
||||||
return <></>
|
return <></>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,29 +1,29 @@
|
|||||||
// Handle link card image failures
|
// Handle link card image failures
|
||||||
function handleLinkCardImages() {
|
function handleLinkCardImages() {
|
||||||
const linkCardImages = document.querySelectorAll('.rlc-image')
|
const linkCardImages = document.querySelectorAll(".rlc-image")
|
||||||
|
|
||||||
linkCardImages.forEach((img: Element) => {
|
linkCardImages.forEach((img: Element) => {
|
||||||
const imgElement = img as HTMLImageElement
|
const imgElement = img as HTMLImageElement
|
||||||
const container = imgElement.closest('.rlc-image-container')
|
const container = imgElement.closest(".rlc-image-container")
|
||||||
|
|
||||||
if (!container) return
|
if (!container) return
|
||||||
|
|
||||||
// If the image has already failed to load (complete=true and naturalWidth=0)
|
// If the image has already failed to load (complete=true and naturalWidth=0)
|
||||||
if (imgElement.complete && imgElement.naturalWidth === 0) {
|
if (imgElement.complete && imgElement.naturalWidth === 0) {
|
||||||
container.classList.add('image-failed')
|
container.classList.add("image-failed")
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// Event listener for image load errors
|
// Event listener for image load errors
|
||||||
const handleError = () => {
|
const handleError = () => {
|
||||||
container.classList.add('image-failed')
|
container.classList.add("image-failed")
|
||||||
}
|
}
|
||||||
|
|
||||||
imgElement.addEventListener('error', handleError)
|
imgElement.addEventListener("error", handleError)
|
||||||
window.addCleanup(() => imgElement.removeEventListener('error', handleError))
|
window.addCleanup(() => imgElement.removeEventListener("error", handleError))
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// Execute on page load and navigation events
|
// Execute on page load and navigation events
|
||||||
document.addEventListener('nav', handleLinkCardImages)
|
document.addEventListener("nav", handleLinkCardImages)
|
||||||
document.addEventListener('DOMContentLoaded', handleLinkCardImages)
|
document.addEventListener("DOMContentLoaded", handleLinkCardImages)
|
||||||
|
|||||||
@ -1,148 +1,147 @@
|
|||||||
.rlc-container {
|
.rlc-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 1px solid var(--lightgray);
|
||||||
|
border-radius: 12px;
|
||||||
|
margin: 16px 0;
|
||||||
|
background: var(--light);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
color: var(--darkgray);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--secondary);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border: 1px solid var(--lightgray);
|
|
||||||
border-radius: 12px;
|
|
||||||
margin: 16px 0;
|
|
||||||
background: var(--light);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
color: var(--darkgray);
|
color: var(--darkgray);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rlc-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
flex: 1;
|
||||||
|
padding: 12px 16px;
|
||||||
|
min-width: 0;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rlc-content {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rlc-title {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.3;
|
||||||
|
margin: 0 0 4px 0;
|
||||||
|
color: var(--dark);
|
||||||
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
.rlc-description {
|
||||||
border-color: var(--secondary);
|
display: none;
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
}
|
||||||
text-decoration: none;
|
|
||||||
color: var(--darkgray);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.rlc-info {
|
.rlc-url-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
justify-content: center;
|
gap: 6px;
|
||||||
flex: 1;
|
font-size: 0.75rem;
|
||||||
padding: 12px 16px;
|
color: var(--gray);
|
||||||
min-width: 0;
|
margin: 0;
|
||||||
gap: 4px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.rlc-content {
|
.rlc-favicon {
|
||||||
flex: 1;
|
width: 16px;
|
||||||
}
|
height: 16px;
|
||||||
|
border-radius: 3px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.rlc-title {
|
.rlc-url {
|
||||||
font-weight: 600;
|
text-overflow: ellipsis;
|
||||||
font-size: 1rem;
|
overflow: hidden;
|
||||||
line-height: 1.3;
|
white-space: nowrap;
|
||||||
margin: 0 0 4px 0;
|
}
|
||||||
color: var(--dark);
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rlc-description {
|
.rlc-image-container {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: var(--lightgray);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
min-width: 120px; // set minimum width
|
||||||
|
max-width: 300px; // set maximum width
|
||||||
|
height: 120px; // fixed height
|
||||||
|
width: auto; // width adjusts automatically to image
|
||||||
|
|
||||||
|
&.image-failed {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.rlc-url-container {
|
.rlc-image {
|
||||||
display: flex;
|
width: auto;
|
||||||
align-items: center;
|
height: 100%;
|
||||||
gap: 6px;
|
object-fit: cover;
|
||||||
font-size: 0.75rem;
|
object-position: center;
|
||||||
color: var(--gray);
|
min-width: 100%; // コンテナの幅は最低限埋める
|
||||||
margin: 0;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.rlc-favicon {
|
@media (max-width: 768px) {
|
||||||
width: 16px;
|
.rlc-container {
|
||||||
height: 16px;
|
flex-direction: column;
|
||||||
border-radius: 3px;
|
min-height: auto;
|
||||||
flex-shrink: 0;
|
margin: 12px 0;
|
||||||
}
|
|
||||||
|
|
||||||
.rlc-url {
|
.rlc-info {
|
||||||
text-overflow: ellipsis;
|
padding: 16px;
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.rlc-image-container {
|
.rlc-image-container {
|
||||||
flex-shrink: 0;
|
width: 100%;
|
||||||
display: flex;
|
height: 160px;
|
||||||
align-items: center;
|
order: -1;
|
||||||
justify-content: center;
|
max-width: none; // remove max-width restriction on mobile
|
||||||
background: var(--lightgray);
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
min-width: 120px; // set minimum width
|
|
||||||
max-width: 300px; // set maximum width
|
|
||||||
height: 120px; // fixed height
|
|
||||||
width: auto; // width adjusts automatically to image
|
|
||||||
|
|
||||||
&.image-failed {
|
&.image-failed {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.rlc-image {
|
.rlc-title {
|
||||||
width: auto;
|
font-size: 0.95rem;
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
object-position: center;
|
|
||||||
min-width: 100%; // コンテナの幅は最低限埋める
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 480px) {
|
||||||
.rlc-container {
|
.rlc-container {
|
||||||
flex-direction: column;
|
.rlc-info {
|
||||||
min-height: auto;
|
padding: 12px;
|
||||||
margin: 12px 0;
|
|
||||||
|
|
||||||
.rlc-info {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rlc-image-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 160px;
|
|
||||||
order: -1;
|
|
||||||
max-width: none; // remove max-width restriction on mobile
|
|
||||||
|
|
||||||
&.image-failed {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rlc-title {
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
.rlc-image-container {
|
||||||
.rlc-container {
|
height: 140px;
|
||||||
.rlc-info {
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rlc-image-container {
|
&.image-failed {
|
||||||
height: 140px;
|
display: none;
|
||||||
|
|
||||||
&.image-failed {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rlc-title {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rlc-url-container {
|
|
||||||
font-size: 0.7rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rlc-title {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rlc-url-container {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -1,148 +1,147 @@
|
|||||||
.rlc-container {
|
.rlc-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 1px solid var(--lightgray);
|
||||||
|
border-radius: 12px;
|
||||||
|
margin: 16px 0;
|
||||||
|
background: var(--light);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
color: var(--darkgray);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--secondary);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border: 1px solid var(--lightgray);
|
|
||||||
border-radius: 12px;
|
|
||||||
margin: 16px 0;
|
|
||||||
background: var(--light);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
color: var(--darkgray);
|
color: var(--darkgray);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rlc-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
flex: 1;
|
||||||
|
padding: 12px 16px;
|
||||||
|
min-width: 0;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rlc-content {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rlc-title {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.3;
|
||||||
|
margin: 0 0 4px 0;
|
||||||
|
color: var(--dark);
|
||||||
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
.rlc-description {
|
||||||
border-color: var(--secondary);
|
display: none;
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
}
|
||||||
text-decoration: none;
|
|
||||||
color: var(--darkgray);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.rlc-info {
|
.rlc-url-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
justify-content: center;
|
gap: 6px;
|
||||||
flex: 1;
|
font-size: 0.75rem;
|
||||||
padding: 12px 16px;
|
color: var(--gray);
|
||||||
min-width: 0;
|
margin: 0;
|
||||||
gap: 4px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.rlc-content {
|
.rlc-favicon {
|
||||||
flex: 1;
|
width: 16px;
|
||||||
}
|
height: 16px;
|
||||||
|
border-radius: 3px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.rlc-title {
|
.rlc-url {
|
||||||
font-weight: 600;
|
text-overflow: ellipsis;
|
||||||
font-size: 1rem;
|
overflow: hidden;
|
||||||
line-height: 1.3;
|
white-space: nowrap;
|
||||||
margin: 0 0 4px 0;
|
}
|
||||||
color: var(--dark);
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rlc-description {
|
.rlc-image-container {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: var(--lightgray);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
min-width: 120px; // set minimum width
|
||||||
|
max-width: 300px; // set maximum width
|
||||||
|
height: 120px; // fixed height
|
||||||
|
width: auto; // width adjusts automatically to image
|
||||||
|
|
||||||
|
&.image-failed {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.rlc-url-container {
|
.rlc-image {
|
||||||
display: flex;
|
width: auto;
|
||||||
align-items: center;
|
height: 100%;
|
||||||
gap: 6px;
|
object-fit: cover;
|
||||||
font-size: 0.75rem;
|
object-position: center;
|
||||||
color: var(--gray);
|
min-width: 100%; // ensure container is at least filled
|
||||||
margin: 0;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.rlc-favicon {
|
@media (max-width: 768px) {
|
||||||
width: 16px;
|
.rlc-container {
|
||||||
height: 16px;
|
flex-direction: column;
|
||||||
border-radius: 3px;
|
min-height: auto;
|
||||||
flex-shrink: 0;
|
margin: 12px 0;
|
||||||
}
|
|
||||||
|
|
||||||
.rlc-url {
|
.rlc-info {
|
||||||
text-overflow: ellipsis;
|
padding: 16px;
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.rlc-image-container {
|
.rlc-image-container {
|
||||||
flex-shrink: 0;
|
width: 100%;
|
||||||
display: flex;
|
height: 160px;
|
||||||
align-items: center;
|
order: -1;
|
||||||
justify-content: center;
|
max-width: none; // remove max-width restriction on mobile
|
||||||
background: var(--lightgray);
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
min-width: 120px; // set minimum width
|
|
||||||
max-width: 300px; // set maximum width
|
|
||||||
height: 120px; // fixed height
|
|
||||||
width: auto; // width adjusts automatically to image
|
|
||||||
|
|
||||||
&.image-failed {
|
&.image-failed {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.rlc-image {
|
.rlc-title {
|
||||||
width: auto;
|
font-size: 0.95rem;
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
object-position: center;
|
|
||||||
min-width: 100%; // ensure container is at least filled
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 480px) {
|
||||||
.rlc-container {
|
.rlc-container {
|
||||||
flex-direction: column;
|
.rlc-info {
|
||||||
min-height: auto;
|
padding: 12px;
|
||||||
margin: 12px 0;
|
|
||||||
|
|
||||||
.rlc-info {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rlc-image-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 160px;
|
|
||||||
order: -1;
|
|
||||||
max-width: none; // remove max-width restriction on mobile
|
|
||||||
|
|
||||||
&.image-failed {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rlc-title {
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
.rlc-image-container {
|
||||||
.rlc-container {
|
height: 140px;
|
||||||
.rlc-info {
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rlc-image-container {
|
&.image-failed {
|
||||||
height: 140px;
|
display: none;
|
||||||
|
|
||||||
&.image-failed {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rlc-title {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rlc-url-container {
|
|
||||||
font-size: 0.7rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rlc-title {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rlc-url-container {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user