mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-23 12:54:06 -06:00
Run npx prettier . --write
This commit is contained in:
tsumac
parent
3d93f64c92
commit
3a178acda0
@ -16,4 +16,4 @@ See the [documentation](https://quartz.jzhao.xyz) for how to get started.
|
||||
https://quartz.jzhao.xyz
|
||||
|
||||
☝️ Link Card View!
|
||||
```
|
||||
```
|
||||
|
||||
@ -2,10 +2,13 @@
|
||||
import linkCardScript from "./scripts/linkcard.inline"
|
||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
|
||||
const LinkCardHandler: QuartzComponent = ({ displayClass: _displayClass, cfg:_cfg }: QuartzComponentProps) => {
|
||||
const LinkCardHandler: QuartzComponent = ({
|
||||
displayClass: _displayClass,
|
||||
cfg: _cfg,
|
||||
}: QuartzComponentProps) => {
|
||||
return <></>
|
||||
}
|
||||
|
||||
LinkCardHandler.beforeDOMLoaded = linkCardScript
|
||||
|
||||
export default (() => LinkCardHandler) satisfies QuartzComponentConstructor
|
||||
export default (() => LinkCardHandler) satisfies QuartzComponentConstructor
|
||||
|
||||
@ -1,29 +1,29 @@
|
||||
// Handle link card image failures
|
||||
function handleLinkCardImages() {
|
||||
const linkCardImages = document.querySelectorAll('.rlc-image')
|
||||
|
||||
const linkCardImages = document.querySelectorAll(".rlc-image")
|
||||
|
||||
linkCardImages.forEach((img: Element) => {
|
||||
const imgElement = img as HTMLImageElement
|
||||
const container = imgElement.closest('.rlc-image-container')
|
||||
|
||||
const container = imgElement.closest(".rlc-image-container")
|
||||
|
||||
if (!container) return
|
||||
|
||||
|
||||
// If the image has already failed to load (complete=true and naturalWidth=0)
|
||||
if (imgElement.complete && imgElement.naturalWidth === 0) {
|
||||
container.classList.add('image-failed')
|
||||
container.classList.add("image-failed")
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
// Event listener for image load errors
|
||||
const handleError = () => {
|
||||
container.classList.add('image-failed')
|
||||
container.classList.add("image-failed")
|
||||
}
|
||||
|
||||
imgElement.addEventListener('error', handleError)
|
||||
window.addCleanup(() => imgElement.removeEventListener('error', handleError))
|
||||
|
||||
imgElement.addEventListener("error", handleError)
|
||||
window.addCleanup(() => imgElement.removeEventListener("error", handleError))
|
||||
})
|
||||
}
|
||||
|
||||
// Execute on page load and navigation events
|
||||
document.addEventListener('nav', handleLinkCardImages)
|
||||
document.addEventListener('DOMContentLoaded', handleLinkCardImages)
|
||||
document.addEventListener("nav", handleLinkCardImages)
|
||||
document.addEventListener("DOMContentLoaded", handleLinkCardImages)
|
||||
|
||||
@ -1,148 +1,147 @@
|
||||
.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;
|
||||
border: 1px solid var(--lightgray);
|
||||
border-radius: 12px;
|
||||
margin: 16px 0;
|
||||
background: var(--light);
|
||||
transition: all 0.2s ease;
|
||||
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;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--secondary);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
text-decoration: none;
|
||||
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;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.rlc-description {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.rlc-description {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rlc-url-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--gray);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.rlc-favicon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rlc-url {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.rlc-url-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--gray);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.rlc-image {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
min-width: 100%; // コンテナの幅は最低限埋める
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.rlc-container {
|
||||
flex-direction: column;
|
||||
min-height: auto;
|
||||
margin: 12px 0;
|
||||
|
||||
.rlc-info {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.rlc-favicon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rlc-url {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
.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
|
||||
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
order: -1;
|
||||
max-width: none; // remove max-width restriction on mobile
|
||||
|
||||
&.image-failed {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rlc-image {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
min-width: 100%; // コンテナの幅は最低限埋める
|
||||
|
||||
.rlc-title {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.rlc-container {
|
||||
flex-direction: column;
|
||||
min-height: auto;
|
||||
margin: 12px 0;
|
||||
|
||||
.rlc-info {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.rlc-container {
|
||||
.rlc-info {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.rlc-image-container {
|
||||
height: 140px;
|
||||
|
||||
&.image-failed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rlc-title {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.rlc-url-container {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.rlc-container {
|
||||
.rlc-info {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.rlc-image-container {
|
||||
height: 140px;
|
||||
|
||||
&.image-failed {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rlc-title {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.rlc-url-container {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,4 +11,4 @@ export { SyntaxHighlighting } from "./syntax"
|
||||
export { TableOfContents } from "./toc"
|
||||
export { HardLineBreaks } from "./linebreaks"
|
||||
export { RoamFlavoredMarkdown } from "./roam"
|
||||
export { LinkCard } from "./linkcard"
|
||||
export { LinkCard } from "./linkcard"
|
||||
|
||||
@ -31,4 +31,4 @@ export const LinkCard: QuartzTransformerPlugin<Partial<Options>> = (userOpts) =>
|
||||
]
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,148 +1,147 @@
|
||||
.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;
|
||||
border: 1px solid var(--lightgray);
|
||||
border-radius: 12px;
|
||||
margin: 16px 0;
|
||||
background: var(--light);
|
||||
transition: all 0.2s ease;
|
||||
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;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--secondary);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
text-decoration: none;
|
||||
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;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.rlc-description {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.rlc-description {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rlc-url-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--gray);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.rlc-favicon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rlc-url {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.rlc-url-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--gray);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.rlc-image {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
min-width: 100%; // ensure container is at least filled
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.rlc-container {
|
||||
flex-direction: column;
|
||||
min-height: auto;
|
||||
margin: 12px 0;
|
||||
|
||||
.rlc-info {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.rlc-favicon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rlc-url {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
.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
|
||||
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
order: -1;
|
||||
max-width: none; // remove max-width restriction on mobile
|
||||
|
||||
&.image-failed {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rlc-image {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
min-width: 100%; // ensure container is at least filled
|
||||
|
||||
.rlc-title {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.rlc-container {
|
||||
flex-direction: column;
|
||||
min-height: auto;
|
||||
margin: 12px 0;
|
||||
|
||||
.rlc-info {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.rlc-container {
|
||||
.rlc-info {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.rlc-image-container {
|
||||
height: 140px;
|
||||
|
||||
&.image-failed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rlc-title {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.rlc-url-container {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.rlc-container {
|
||||
.rlc-info {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.rlc-image-container {
|
||||
height: 140px;
|
||||
|
||||
&.image-failed {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rlc-title {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.rlc-url-container {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user