diff --git a/quartz/components/Banner.tsx b/quartz/components/Banner.tsx index 25cc56c..26caaa9 100644 --- a/quartz/components/Banner.tsx +++ b/quartz/components/Banner.tsx @@ -65,7 +65,7 @@ export default (() => { href={`https://github.com/CatCodeMe/blog_from_obsidian/commits/main/${fileRelativePath}`} target="_blank" rel="noreferrer noopener nofollow" - className="meta-item history-link" + className="meta-item history-link external" title="View history on GitHub" > Git-Blame diff --git a/quartz/plugins/transformers/links.ts b/quartz/plugins/transformers/links.ts index 6fe5120..18db58f 100644 --- a/quartz/plugins/transformers/links.ts +++ b/quartz/plugins/transformers/links.ts @@ -53,104 +53,77 @@ export const CrawlLinks: QuartzTransformerPlugin> = (userOpts) if (node.tagName === "a") { const props = node.properties const href = props?.href as string - if (typeof href === "string") { - // Handle short domain names - const isShortDomain = /^[^/]+\.[^/]+$/.test(href) - if (isShortDomain) { - props.href = `https://${href}` - } - - // rewrite all links - let dest = props.href as RelativeURL - const classes = (props.className ?? []) as string[] - const isExternal = isAbsoluteUrl(dest) || isShortDomain - classes.push(isExternal ? "external" : "internal") - - // Add external-icon class for specific domains - const domainMatch = dest.match(/(?:https?:\/\/)?(?:www\.)?([^\/]+)/) - const domain = domainMatch ? domainMatch[1] : dest - - // Check if it's an RSS feed - const isRSSFeed = dest.includes("index.xml") - if (isRSSFeed) { - classes.push("external-icon") - } - - const hasSpecialIcon = isExternal && ( - domain.includes("github.com") || - domain.includes("twitter.com") || - domain.includes("x.com") || - domain.includes("google.com") || - domain.includes("youtube.com") || - domain.includes("stackoverflow.com") || - domain.includes("reddit.com") || - domain.includes("hackernews.com") || - domain.includes("obsidian.md") || - domain.includes("wikipedia.org") || - domain.includes("quartz") || - domain.includes("mermaid") - ) - - if (hasSpecialIcon) { - classes.push("external-icon") - } else if (isExternal && !isRSSFeed && opts.externalLinkIcon) { - // Only add arrow for external links without special icons and not RSS feeds - node.children.push({ - type: "text", - value: " ↗", - }) - } + // Handle short domain names + const isShortDomain = /^[^/]+\.[^/]+$/.test(href) + if (isShortDomain) { + props.href = `https://${href}` + } - // Check if the link has alias text - if ( - node.children.length === 1 && - node.children[0].type === "text" && - node.children[0].value !== dest - ) { - classes.push("alias") - } - props.className = classes + // rewrite all links + let dest = props.href as RelativeURL + const classes = (props.className ?? []) as string[] + const isExternal = isAbsoluteUrl(dest) || isShortDomain + classes.push(isExternal ? "external" : "internal") - if (isExternal && opts.openLinksInNewTab) { - props.target = "_blank" - props.rel = "noopener noreferrer" - } + // Add external-icon class for specific domains + const domainMatch = dest.match(/(?:https?:\/\/)?(?:www\.)?([^\/]+)/) + const domain = domainMatch ? domainMatch[1] : dest - // don't process external links or intra-document anchors - const isInternal = !(isAbsoluteUrl(dest) || dest.startsWith("#")) - if (isInternal) { - dest = node.properties.href = transformLink( - file.data.slug!, - dest, - transformOptions, - ) - - // url.resolve is considered legacy - // WHATWG equivalent https://nodejs.dev/en/api/v18/url/#urlresolvefrom-to - const url = new URL(dest, "https://base.com/" + stripSlashes(curSlug, true)) - const canonicalDest = url.pathname - let [destCanonical, _destAnchor] = splitAnchor(canonicalDest) - if (destCanonical.endsWith("/")) { - destCanonical += "index" - } - - // need to decodeURIComponent here as WHATWG URL percent-encodes everything - const full = decodeURIComponent(stripSlashes(destCanonical, true)) as FullSlug - const simple = simplifySlug(full) - outgoing.add(simple) - node.properties["data-slug"] = full - } + // Check if it's an RSS feed + const isRSSFeed = dest.includes("index.xml") + if (isRSSFeed) { + classes.push("external") + } + // Check if the link has alias text + if ( + node.children.length === 1 && + node.children[0].type === "text" && + node.children[0].value !== dest + ) { + // Add the 'alias' class if the text content is not the same as the href + classes.push("alias") + } + node.properties.className = classes - // rewrite link internals if prettylinks is on - if ( - opts.prettyLinks && - isInternal && - node.children.length === 1 && - node.children[0].type === "text" && - !node.children[0].value.startsWith("#") - ) { - node.children[0].value = path.basename(node.children[0].value) + if (isExternal && opts.openLinksInNewTab) { + node.properties.target = "_blank" + node.properties.rel = "noopener noreferrer" + } + + // don't process external links or intra-document anchors + const isInternal = !(isAbsoluteUrl(dest) || dest.startsWith("#")) + if (isInternal) { + dest = node.properties.href = transformLink( + file.data.slug!, + dest, + transformOptions, + ) + + // url.resolve is considered legacy + // WHATWG equivalent https://nodejs.dev/en/api/v18/url/#urlresolvefrom-to + const url = new URL(dest, "https://base.com/" + stripSlashes(curSlug, true)) + const canonicalDest = url.pathname + let [destCanonical, _destAnchor] = splitAnchor(canonicalDest) + if (destCanonical.endsWith("/")) { + destCanonical += "index" } + + // need to decodeURIComponent here as WHATWG URL percent-encodes everything + const full = decodeURIComponent(stripSlashes(destCanonical, true)) as FullSlug + const simple = simplifySlug(full) + outgoing.add(simple) + node.properties["data-slug"] = full + } + + // rewrite link internals if prettylinks is on + if ( + opts.prettyLinks && + isInternal && + node.children.length === 1 && + node.children[0].type === "text" && + !node.children[0].value.startsWith("#") + ) { + node.children[0].value = path.basename(node.children[0].value) } } diff --git a/quartz/styles/external-links.scss b/quartz/styles/external-links.scss index 9bf027c..12829da 100644 --- a/quartz/styles/external-links.scss +++ b/quartz/styles/external-links.scss @@ -3,129 +3,90 @@ --external-link-icon-height: 16px; } -//content-meta -.content-meta { - a.external[href*="github.com"]::after { - content: ''; - width: var(--external-link-icon-width); - height: var(--external-link-icon-width); - display: inline-block; - vertical-align: text-top; - margin-left: 4px; - background-size: contain; - background-repeat: no-repeat; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23214257' d='M14 2A10 10 0 0 0 2 14c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 14A10 10 0 0 0 14 2'/%3E%3C/svg%3E"); - } +// 定义图标的基础样式 +%icon-base { + content: ''; + width: var(--external-link-icon-width); + height: var(--external-link-icon-width); + display: inline-block; + vertical-align: text-top; + margin-left: 4px; + background-size: contain; + background-repeat: no-repeat; } -//banner部分 -.banner-wrapper{ - a.meta-item.history-link[href*="github.com"]::after{ - content: ''; - width: var(--external-link-icon-width); - height: var(--external-link-icon-width); - display: inline-block; - vertical-align: text-top; - margin-left: 4px; - background-size: contain; - background-repeat: no-repeat; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23214257' d='M14 2A10 10 0 0 0 2 14c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 14A10 10 0 0 0 14 2'/%3E%3C/svg%3E"); - } -} - -//正文部分 External link icons a.external { - &.external-icon { + // 默认所有外部链接显示箭头 &::after { - content: ''; - width: var(--external-link-icon-width); - height: var(--external-link-icon-width); - display: inline-block; - vertical-align: text-top; + content: '↗'; margin-left: 4px; - background-size: contain; - background-repeat: no-repeat; } + // 特定域名的链接使用自定义图标(会覆盖默认箭头) &[href*="github.com"]::after { + @extend %icon-base; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23214257' d='M14 2A10 10 0 0 0 2 14c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 14A10 10 0 0 0 14 2'/%3E%3C/svg%3E"); } &[href*="twitter.com"]::after, &[href*="x.com"]::after { + @extend %icon-base; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.88em' height='1em' viewBox='0 0 448 514'%3E%3Cpath fill='%23214257' d='M64 32C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64zm297.1 84L257.3 234.6L379.4 396h-95.6L209 298.1L143.3 396H75.8l111-146.9L69.7 116h98l67.7 89.5l78.2-89.5zm-37.8 251.6L153.4 142.9h-28.3l171.8 224.7h26.3z'/%3E%3C/svg%3E"); } &[href*="google.com"]::after { + @extend %icon-base; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 48 48'%3E%3Cpath fill='%23ffc107' d='M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8c-6.627 0-14-5.373-14-14s5.373-14 14-14c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4C14.955 4 4 14.955 4 24s8.955 20 20 20s20-8.955 20-20c0-1.341-.138-2.65-.389-3.917'/%3E%3Cpath fill='%23ff3d00' d='m6.306 14.691l6.571 4.819C14.655 15.108 18.961 14 24 14c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4C16.318 4 9.656 8.337 6.306 14.691'/%3E%3Cpath fill='%234caf50' d='M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.9 11.9 0 0 1 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44'/%3E%3Cpath fill='%231976d2' d='M43.611 20.083H42V20H24v8h11.303a14.04 14.04 0 0 1-4.087 5.571l.003-.002l6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917'/%3E%3C/svg%3E"); } &[href*="youtube.com"]::after { + @extend %icon-base; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.43em' height='1em' viewBox='0 0 256 180'%3E%3Cpath fill='%23f00' d='M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134'/%3E%3Cpath fill='%23fff' d='m102.421 128.06l66.328-38.418l-66.328-38.418z'/%3E%3C/svg%3E") } &[href*="stackoverflow.com"]::after { + @extend %icon-base; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 128 128'%3E%3Cpath fill='%23bbb' d='M101.072 82.51h11.378V128H10.05V82.51h11.377v34.117h79.644zm0 0'/%3E%3Cpath fill='%23f58025' d='m33.826 79.13l55.88 11.738l2.348-11.166l-55.876-11.745Zm7.394-26.748l51.765 24.1l4.824-10.349l-51.768-24.1Zm14.324-25.384L99.428 63.53l7.309-8.775l-43.885-36.527ZM83.874 0l-9.167 6.81l34.08 45.802l9.163-6.81Zm-51.07 105.254h56.89V93.881h-56.89Zm0 0'/%3E%3C/svg%3E") } &[href*="reddit.com"]::after { + @extend %icon-base; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='128' fill='%23ff4500'/%3E%3Cpath fill='%23fff' d='M213.15 129.22c0-10.376-8.391-18.617-18.617-18.617a18.74 18.74 0 0 0-12.97 5.189c-12.818-9.157-30.368-15.107-49.9-15.87l8.544-39.981l27.773 5.95c.307 7.02 6.104 12.667 13.278 12.667c7.324 0 13.275-5.95 13.275-13.278c0-7.324-5.95-13.275-13.275-13.275c-5.188 0-9.768 3.052-11.904 7.478l-30.976-6.562c-.916-.154-1.832 0-2.443.458c-.763.458-1.22 1.22-1.371 2.136l-9.464 44.558c-19.837.612-37.692 6.562-50.662 15.872a18.74 18.74 0 0 0-12.971-5.188c-10.377 0-18.617 8.391-18.617 18.617c0 7.629 4.577 14.037 10.988 16.939a33.6 33.6 0 0 0-.458 5.646c0 28.686 33.42 52.036 74.621 52.036c41.202 0 74.622-23.196 74.622-52.036a35 35 0 0 0-.458-5.646c6.408-2.902 10.985-9.464 10.985-17.093M85.272 142.495c0-7.324 5.95-13.275 13.278-13.275c7.324 0 13.275 5.95 13.275 13.275s-5.95 13.278-13.275 13.278c-7.327.15-13.278-5.953-13.278-13.278m74.317 35.251c-9.156 9.157-26.553 9.768-31.588 9.768c-5.188 0-22.584-.765-31.59-9.768c-1.371-1.373-1.371-3.51 0-4.883c1.374-1.371 3.51-1.371 4.884 0c5.8 5.8 18.008 7.782 26.706 7.782s21.058-1.983 26.704-7.782c1.374-1.371 3.51-1.371 4.884 0c1.22 1.373 1.22 3.51 0 4.883m-2.443-21.822c-7.325 0-13.275-5.95-13.275-13.275s5.95-13.275 13.275-13.275c7.327 0 13.277 5.95 13.277 13.275c0 7.17-5.95 13.275-13.277 13.275'/%3E%3C/svg%3E") } &[href*="hackernews.com"]::after { + @extend %icon-base; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 512 512'%3E%3Cpath fill='%23ff5b21' d='M32 32v448h448V32Zm249.67 250.83v84H235v-84l-77-140h55l46.32 97.54l44.33-97.54h52.73Z'/%3E%3C/svg%3E") } &[href*="obsidian.md"]::after { + @extend %icon-base; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.78em' height='1em' viewBox='0 0 256 332'%3E%3Cdefs%3E%3CradialGradient id='logosObsidianIcon0' cx='72.819%25' cy='96.934%25' r='163.793%25' fx='72.819%25' fy='96.934%25' gradientTransform='rotate(-104 11141.322 0)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.4'/%3E%3Cstop offset='100%25' stop-opacity='0.1'/%3E%3C/radialGradient%3E%3CradialGradient id='logosObsidianIcon1' cx='52.917%25' cy='90.632%25' r='190.361%25' fx='52.917%25' fy='90.632%25' gradientTransform='rotate(-82 10746.75 0)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.6'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0.1'/%3E%3C/radialGradient%3E%3CradialGradient id='logosObsidianIcon2' cx='31.174%25' cy='97.138%25' r='178.714%25' fx='31.174%25' fy='97.138%25' gradientTransform='rotate(-77 10724.606 0)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.8'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0.4'/%3E%3C/radialGradient%3E%3CradialGradient id='logosObsidianIcon3' cx='71.813%25' cy='99.994%25' r='92.086%25' fx='71.813%25' fy='99.994%25' gradientTransform='translate(0 22251839.658)skewY(-90)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.3'/%3E%3Cstop offset='100%25' stop-opacity='0.3'/%3E%3C/radialGradient%3E%3CradialGradient id='logosObsidianIcon4' cx='117.013%25' cy='34.769%25' r='328.729%25' fx='117.013%25' fy='34.769%25' gradientTransform='rotate(102 -1004.443 0)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0.2'/%3E%3C/radialGradient%3E%3CradialGradient id='logosObsidianIcon5' cx='-9.431%25' cy='8.712%25' r='153.492%25' fx='-9.431%25' fy='8.712%25' gradientTransform='rotate(45 1674.397 0)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.2'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0.4'/%3E%3C/radialGradient%3E%3CradialGradient id='logosObsidianIcon6' cx='103.902%25' cy='-22.172%25' r='394.771%25' fx='103.902%25' fy='-22.172%25' gradientTransform='rotate(80 3757.522 0)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.1'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0.3'/%3E%3C/radialGradient%3E%3CradialGradient id='logosObsidianIcon7' cx='99.348%25' cy='89.193%25' r='203.824%25' fx='99.348%25' fy='89.193%25' gradientTransform='translate(0 -38783246.548)skewY(-90)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.2'/%3E%3Cstop offset='50%25' stop-color='%23fff' stop-opacity='0.2'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0.3'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill-opacity='0.3' d='M209.056 308.305c-2.043 14.93-16.738 26.638-31.432 22.552c-20.823-5.658-44.946-14.616-66.634-16.266l-33.317-2.515a22 22 0 0 1-14.144-6.522L6.167 246.778a21.92 21.92 0 0 1-4.244-24.124s35.36-77.478 36.775-81.485c1.257-4.008 6.13-39.211 8.958-58.07a22 22 0 0 1 7.072-12.965L122.462 9.47a22 22 0 0 1 31.903 2.672l57.048 71.978a23.18 23.18 0 0 1 4.872 14.38c0 13.594 1.179 41.646 8.8 59.72a236.8 236.8 0 0 0 27.974 45.732a11 11 0 0 1 .786 12.258c-4.95 8.408-14.851 24.595-28.76 45.26a111.7 111.7 0 0 0-16.108 46.834z'/%3E%3Cpath fill='%236c31e3' d='M209.606 305.79c-2.043 15.009-16.737 26.717-31.432 22.71c-20.744-5.737-44.79-14.695-66.555-16.345L78.38 309.64a21.92 21.92 0 0 1-14.144-6.6L6.874 244.106a21.92 21.92 0 0 1-4.243-24.36s35.438-77.792 36.774-81.878c1.336-4.007 6.13-39.289 8.958-58.305a22 22 0 0 1 7.072-13.044L123.17 5.621a22 22 0 0 1 31.902 2.75l56.97 72.292a23.34 23.34 0 0 1 4.871 14.38c0 13.673 1.18 41.804 8.723 59.955a238 238 0 0 0 27.974 45.969a11 11 0 0 1 .864 12.336c-5.03 8.487-14.851 24.674-28.838 45.497a112.6 112.6 0 0 0-16.03 46.99'/%3E%3Cpath fill='url(%23logosObsidianIcon0)' d='M70.365 307.44c26.638-53.983 25.93-92.722 14.537-120.225c-10.372-25.459-29.781-41.489-45.025-51.468a19.2 19.2 0 0 1-1.415 4.243L2.631 219.747a21.92 21.92 0 0 0 4.321 24.36l57.284 58.933a23.8 23.8 0 0 0 6.129 4.4'/%3E%3Cpath fill='url(%23logosObsidianIcon1)' d='M142.814 197.902a86 86 0 0 1 21.06 4.793c21.844 8.172 41.724 26.56 58.147 61.999c1.179-2.043 2.357-4.008 3.615-5.894a960 960 0 0 0 28.838-45.497a11 11 0 0 0-.786-12.336a238 238 0 0 1-28.052-45.969c-7.544-18.073-8.644-46.282-8.723-59.955c0-5.186-1.65-10.294-4.871-14.38l-56.97-72.292l-.943-1.178c4.165 13.75 3.93 24.752 1.336 34.731c-2.357 9.272-6.757 17.68-11.394 26.56c-1.571 2.986-3.143 6.05-4.636 9.193a110 110 0 0 0-12.415 45.576c-.786 19.016 3.064 42.825 15.716 74.65z'/%3E%3Cpath fill='url(%23logosObsidianIcon2)' d='M142.736 197.902c-12.652-31.824-16.502-55.633-15.716-74.65c.786-18.858 6.286-33.002 12.415-45.575l4.715-9.193c4.558-8.88 8.88-17.288 11.315-26.56a61.7 61.7 0 0 0-1.336-34.731c-8.136-8.94-21.96-9.642-30.96-1.572L55.436 66.519a22 22 0 0 0-7.072 13.044l-8.25 54.69c0 .55-.158 1.022-.236 1.572c15.244 9.901 34.574 25.931 45.025 51.312c2.043 5.029 3.772 10.294 5.029 16.03a157.2 157.2 0 0 1 52.805-5.343z'/%3E%3Cpath fill='url(%23logosObsidianIcon3)' d='M178.253 328.5c14.616 4.007 29.31-7.701 31.353-22.789a120.2 120.2 0 0 1 12.494-41.017c-16.502-35.44-36.382-53.827-58.148-61.999c-23.18-8.643-48.404-5.736-74.021.472c5.736 26.01 2.357 60.034-19.487 104.273c2.436 1.257 5.186 1.965 7.936 2.2l34.496 2.593c18.701 1.336 46.597 11.001 65.377 16.266'/%3E%3Cpath fill='url(%23logosObsidianIcon4)' d='M127.177 122.074c-.864 18.859 1.493 40.39 14.144 72.135l-3.929-.393c-11.394-33.081-13.908-50.054-13.044-69.149c.786-19.094 6.994-33.789 13.123-46.361c1.571-3.143 5.186-9.037 6.758-12.023c4.557-8.879 7.622-13.515 10.215-21.609c3.772-11.315 2.986-16.658 2.514-22.001c2.908 19.251-8.172 35.988-16.501 53.04a113.9 113.9 0 0 0-13.358 46.361z'/%3E%3Cpath fill='url(%23logosObsidianIcon5)' d='M88.674 188.551c1.571 3.458 2.907 6.287 3.85 10.608l-3.379.786c-1.336-5.029-2.357-8.643-4.322-12.965c-11.472-26.953-29.86-40.861-44.79-51.076c18.074 9.744 36.697 25.066 48.64 52.647'/%3E%3Cpath fill='url(%23logosObsidianIcon6)' d='M92.681 202.617c6.286 29.467-.786 66.948-21.609 103.409c17.445-36.146 25.931-70.8 18.859-102.938l2.75-.55z'/%3E%3Cpath fill='url(%23logosObsidianIcon7)' d='M164.659 199.867c34.181 12.808 47.383 40.86 57.205 64.355c-12.18-24.516-29.074-51.626-58.462-61.684c-22.317-7.7-41.175-6.758-73.471.55l-.707-3.143c34.26-7.858 52.176-8.8 75.435 0z'/%3E%3C/svg%3E"); } &[href*="wikipedia.org"]::after { + @extend %icon-base; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m14.97 18.95l-2.56-6.03c-1.02 1.99-2.14 4.08-3.1 6.03c-.01.01-.47 0-.47 0C7.37 15.5 5.85 12.1 4.37 8.68C4.03 7.84 2.83 6.5 2 6.5v-.45h5.06v.45c-.6 0-1.62.4-1.36 1.05c.72 1.54 3.24 7.51 3.93 9.03c.47-.94 1.8-3.42 2.37-4.47c-.45-.88-1.87-4.18-2.29-5c-.32-.54-1.13-.61-1.75-.61c0-.15.01-.25 0-.44l4.46.01v.4c-.61.03-1.18.24-.92.82c.6 1.24.95 2.13 1.5 3.28c.17-.34 1.07-2.19 1.5-3.16c.26-.65-.13-.91-1.21-.91c.01-.12.01-.33.01-.43c1.39-.01 3.48-.01 3.85-.02v.42c-.71.03-1.44.41-1.82.99L13.5 11.3c.18.51 1.96 4.46 2.15 4.9l3.85-8.83c-.3-.72-1.16-.87-1.5-.87v-.45l4 .03v.42c-.88 0-1.43.5-1.75 1.25c-.8 1.79-3.25 7.49-4.85 11.2z'/%3E%3C/svg%3E") } &[href*="quartz"]::after { + @extend %icon-base; background-image: url("./static/icon.webp"); } &[href*="mermaid.js.org"]::after { + @extend %icon-base; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 32 32'%3E%3Cpath fill='%23fd366e' d='M29.973 4.478A14.24 14.24 0 0 0 16 13.842c-2.107-5.82-7.787-9.628-13.973-9.364a14.25 14.25 0 0 0 6.2 12.36a7.65 7.65 0 0 1 3.316 6.32v4.376h8.916V23.16a7.65 7.65 0 0 1 3.315-6.32a14.25 14.25 0 0 0 6.2-12.36z'/%3E%3C/svg%3E"); } //rss &[href*="index.xml"]::after { + @extend %icon-base; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff5b21' d='M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m2.5 12A1.5 1.5 0 0 0 6 16.5A1.5 1.5 0 0 0 7.5 18A1.5 1.5 0 0 0 9 16.5A1.5 1.5 0 0 0 7.5 15M6 10v2a6 6 0 0 1 6 6h2a8 8 0 0 0-8-8m0-4v2a10 10 0 0 1 10 10h2A12 12 0 0 0 6 6'/%3E%3C/svg%3E") } - } -} - -//footer部分 -footer { - a { - &::after { - content: ''; - width: var(--external-link-icon-width); - height: var(--external-link-icon-height); - display: inline-block; - vertical-align: text-top; - margin-left: 4px; - background-size: contain; - background-repeat: no-repeat; - } - - &[href*="quartz"]::after { - background-image: url("./static/icon.webp") } - - &[href*="obsidian.md"]::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.78em' height='1em' viewBox='0 0 256 332'%3E%3Cdefs%3E%3CradialGradient id='logosObsidianIcon0' cx='72.819%25' cy='96.934%25' r='163.793%25' fx='72.819%25' fy='96.934%25' gradientTransform='rotate(-104 11141.322 0)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.4'/%3E%3Cstop offset='100%25' stop-opacity='0.1'/%3E%3C/radialGradient%3E%3CradialGradient id='logosObsidianIcon1' cx='52.917%25' cy='90.632%25' r='190.361%25' fx='52.917%25' fy='90.632%25' gradientTransform='rotate(-82 10746.75 0)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.6'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0.1'/%3E%3C/radialGradient%3E%3CradialGradient id='logosObsidianIcon2' cx='31.174%25' cy='97.138%25' r='178.714%25' fx='31.174%25' fy='97.138%25' gradientTransform='rotate(-77 10724.606 0)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.8'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0.4'/%3E%3C/radialGradient%3E%3CradialGradient id='logosObsidianIcon3' cx='71.813%25' cy='99.994%25' r='92.086%25' fx='71.813%25' fy='99.994%25' gradientTransform='translate(0 22251839.658)skewY(-90)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.3'/%3E%3Cstop offset='100%25' stop-opacity='0.3'/%3E%3C/radialGradient%3E%3CradialGradient id='logosObsidianIcon4' cx='117.013%25' cy='34.769%25' r='328.729%25' fx='117.013%25' fy='34.769%25' gradientTransform='rotate(102 -1004.443 0)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0.2'/%3E%3C/radialGradient%3E%3CradialGradient id='logosObsidianIcon5' cx='-9.431%25' cy='8.712%25' r='153.492%25' fx='-9.431%25' fy='8.712%25' gradientTransform='rotate(45 1674.397 0)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.2'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0.4'/%3E%3C/radialGradient%3E%3CradialGradient id='logosObsidianIcon6' cx='103.902%25' cy='-22.172%25' r='394.771%25' fx='103.902%25' fy='-22.172%25' gradientTransform='rotate(80 3757.522 0)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.1'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0.3'/%3E%3C/radialGradient%3E%3CradialGradient id='logosObsidianIcon7' cx='99.348%25' cy='89.193%25' r='203.824%25' fx='99.348%25' fy='89.193%25' gradientTransform='translate(0 -38783246.548)skewY(-90)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.2'/%3E%3Cstop offset='50%25' stop-color='%23fff' stop-opacity='0.2'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0.3'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill-opacity='0.3' d='M209.056 308.305c-2.043 14.93-16.738 26.638-31.432 22.552c-20.823-5.658-44.946-14.616-66.634-16.266l-33.317-2.515a22 22 0 0 1-14.144-6.522L6.167 246.778a21.92 21.92 0 0 1-4.244-24.124s35.36-77.478 36.775-81.485c1.257-4.008 6.13-39.211 8.958-58.07a22 22 0 0 1 7.072-12.965L122.462 9.47a22 22 0 0 1 31.903 2.672l57.048 71.978a23.18 23.18 0 0 1 4.872 14.38c0 13.594 1.179 41.646 8.8 59.72a236.8 236.8 0 0 0 27.974 45.732a11 11 0 0 1 .786 12.258c-4.95 8.408-14.851 24.595-28.76 45.26a111.7 111.7 0 0 0-16.108 46.834z'/%3E%3Cpath fill='%236c31e3' d='M209.606 305.79c-2.043 15.009-16.737 26.717-31.432 22.71c-20.744-5.737-44.79-14.695-66.555-16.345L78.38 309.64a21.92 21.92 0 0 1-14.144-6.6L6.874 244.106a21.92 21.92 0 0 1-4.243-24.36s35.438-77.792 36.774-81.878c1.336-4.007 6.13-39.289 8.958-58.305a22 22 0 0 1 7.072-13.044L123.17 5.621a22 22 0 0 1 31.902 2.75l56.97 72.292a23.34 23.34 0 0 1 4.871 14.38c0 13.673 1.18 41.804 8.723 59.955a238 238 0 0 0 27.974 45.969a11 11 0 0 1 .864 12.336c-5.03 8.487-14.851 24.674-28.838 45.497a112.6 112.6 0 0 0-16.03 46.99'/%3E%3Cpath fill='url(%23logosObsidianIcon0)' d='M70.365 307.44c26.638-53.983 25.93-92.722 14.537-120.225c-10.372-25.459-29.781-41.489-45.025-51.468a19.2 19.2 0 0 1-1.415 4.243L2.631 219.747a21.92 21.92 0 0 0 4.321 24.36l57.284 58.933a23.8 23.8 0 0 0 6.129 4.4'/%3E%3Cpath fill='url(%23logosObsidianIcon1)' d='M142.814 197.902a86 86 0 0 1 21.06 4.793c21.844 8.172 41.724 26.56 58.147 61.999c1.179-2.043 2.357-4.008 3.615-5.894a960 960 0 0 0 28.838-45.497a11 11 0 0 0-.786-12.336a238 238 0 0 1-28.052-45.969c-7.544-18.073-8.644-46.282-8.723-59.955c0-5.186-1.65-10.294-4.871-14.38l-56.97-72.292l-.943-1.178c4.165 13.75 3.93 24.752 1.336 34.731c-2.357 9.272-6.757 17.68-11.394 26.56c-1.571 2.986-3.143 6.05-4.636 9.193a110 110 0 0 0-12.415 45.576c-.786 19.016 3.064 42.825 15.716 74.65z'/%3E%3Cpath fill='url(%23logosObsidianIcon2)' d='M142.736 197.902c-12.652-31.824-16.502-55.633-15.716-74.65c.786-18.858 6.286-33.002 12.415-45.575l4.715-9.193c4.558-8.88 8.88-17.288 11.315-26.56a61.7 61.7 0 0 0-1.336-34.731c-8.136-8.94-21.96-9.642-30.96-1.572L55.436 66.519a22 22 0 0 0-7.072 13.044l-8.25 54.69c0 .55-.158 1.022-.236 1.572c15.244 9.901 34.574 25.931 45.025 51.312c2.043 5.029 3.772 10.294 5.029 16.03a157.2 157.2 0 0 1 52.805-5.343z'/%3E%3Cpath fill='url(%23logosObsidianIcon3)' d='M178.253 328.5c14.616 4.007 29.31-7.701 31.353-22.789a120.2 120.2 0 0 1 12.494-41.017c-16.502-35.44-36.382-53.827-58.148-61.999c-23.18-8.643-48.404-5.736-74.021.472c5.736 26.01 2.357 60.034-19.487 104.273c2.436 1.257 5.186 1.965 7.936 2.2l34.496 2.593c18.701 1.336 46.597 11.001 65.377 16.266'/%3E%3Cpath fill='url(%23logosObsidianIcon4)' d='M127.177 122.074c-.864 18.859 1.493 40.39 14.144 72.135l-3.929-.393c-11.394-33.081-13.908-50.054-13.044-69.149c.786-19.094 6.994-33.789 13.123-46.361c1.571-3.143 5.186-9.037 6.758-12.023c4.557-8.879 7.622-13.515 10.215-21.609c3.772-11.315 2.986-16.658 2.514-22.001c2.908 19.251-8.172 35.988-16.501 53.04a113.9 113.9 0 0 0-13.358 46.361z'/%3E%3Cpath fill='url(%23logosObsidianIcon5)' d='M88.674 188.551c1.571 3.458 2.907 6.287 3.85 10.608l-3.379.786c-1.336-5.029-2.357-8.643-4.322-12.965c-11.472-26.953-29.86-40.861-44.79-51.076c18.074 9.744 36.697 25.066 48.64 52.647'/%3E%3Cpath fill='url(%23logosObsidianIcon6)' d='M92.681 202.617c6.286 29.467-.786 66.948-21.609 103.409c17.445-36.146 25.931-70.8 18.859-102.938l2.75-.55z'/%3E%3Cpath fill='url(%23logosObsidianIcon7)' d='M164.659 199.867c34.181 12.808 47.383 40.86 57.205 64.355c-12.18-24.516-29.074-51.626-58.462-61.684c-22.317-7.7-41.175-6.758-73.471.55l-.707-3.143c34.26-7.858 52.176-8.8 75.435 0z'/%3E%3C/svg%3E"); - } - &[href*="github.com"]::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23214257' d='M14 2A10 10 0 0 0 2 14c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 14A10 10 0 0 0 14 2'/%3E%3C/svg%3E"); - } - &[href*="creativecommons.org"]::after { + @extend %icon-base; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m11.89 10.34l-1.34.7c-.14-.3-.31-.51-.52-.63s-.41-.18-.58-.18c-.9 0-1.34.59-1.34 1.77c0 .54.11.97.34 1.29c.22.32.55.48 1 .48c.58 0 .99-.27 1.23-.86l1.23.63c-.26.49-.62.87-1.09 1.15q-.69.42-1.53.42c-.9 0-1.62-.27-2.17-.82C6.58 13.74 6.3 13 6.3 12c0-.95.28-1.7.83-2.26q.84-.84 2.1-.84c1.24-.01 2.13.48 2.66 1.44m5.77 0l-1.32.7c-.14-.3-.34-.51-.53-.63q-.315-.18-.6-.18c-.89 0-1.34.59-1.34 1.77c0 .54.13.97.34 1.29c.23.32.56.48 1 .48c.59 0 1-.27 1.24-.86l1.25.63c-.28.49-.65.87-1.11 1.15c-.47.28-.97.42-1.52.42c-.9 0-1.63-.27-2.17-.82S12.09 13 12.09 12c0-.95.28-1.7.83-2.26S14.17 8.9 15 8.9c1.26-.01 2.14.48 2.66 1.44M12 3.5a8.5 8.5 0 0 1 8.5 8.5a8.5 8.5 0 0 1-8.5 8.5A8.5 8.5 0 0 1 3.5 12A8.5 8.5 0 0 1 12 3.5M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2'/%3E%3C/svg%3E") } - } } \ No newline at end of file