feat: External link icons (#697)

sean

2024-01-16 fa7d139ce5a0216ca3f6e63c78f818e9c028a3ab

feat: External link icons (#697)

 quartz/plugins/transformers/links.ts

@@ -21,6 +21,7 @@
  prettyLinks: boolean
  openLinksInNewTab: boolean
  lazyLoad: boolean
  externalLinkIcon: boolean
}

const defaultOptions: Options = {
@@ -28,6 +29,7 @@
  prettyLinks: true,
  openLinksInNewTab: false,
  lazyLoad: false,
  externalLinkIcon: true,
}

export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
@@ -55,7 +57,29 @@
              ) {
                let dest = node.properties.href as RelativeURL
                const classes = (node.properties.className ?? []) as string[]
                classes.push(isAbsoluteUrl(dest) ? "external" : "internal")
                const isExternal = isAbsoluteUrl(dest)
                classes.push(isExternal ? "external" : "internal")

                if (isExternal && opts.externalLinkIcon) {
                  node.children.push({
                    type: "element",
                    tagName: "svg",
                    properties: {
                      class: "external-icon",
                      viewBox: "0 0 512 512",
                    },
                    children: [
                      {
                        type: "element",
                        tagName: "path",
                        properties: {
                          d: "M320 0H288V64h32 82.7L201.4 265.4 178.7 288 224 333.3l22.6-22.6L448 109.3V192v32h64V192 32 0H480 320zM32 32H0V64 480v32H32 456h32V480 352 320H424v32 96H64V96h96 32V32H160 32z",
                        },
                        children: [],
                      },
                    ],
                  })
                }

                // Check if the link has alias text
                if (

 quartz/styles/base.scss

@@ -59,6 +59,7 @@
  text-decoration: none;
  transition: color 0.2s ease;
  color: var(--secondary);
  display: inline-block;

  &:hover {
    color: var(--tertiary) !important;
@@ -76,6 +77,16 @@
      padding: 0;
    }
  }

  &.external .external-icon {
    vertical-align: bottom;
    height: 1ex;
    margin: 0 0.15em;

    > path {
      fill: var(--dark);
    }
  }
}

.desktop-only {