Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(links.ts): custom identifiers for custom icons #1654

Draft
wants to merge 2 commits into
base: v4
Choose a base branch
from

Conversation

bfahrenfort
Copy link
Contributor

@bfahrenfort bfahrenfort commented Dec 16, 2024

{ I am pathologically incapable of rebasing, apparently -- #1653 }

This feature gives site authors more control over how links are displayed. You can define a regex that, on match, will auto-append either a string of your choice (so, an emoji) or a Hast element such as a vector path or an image to the link in the rendered HTML.

As an example, I have a substitution:

[
  /Qx!(.+)/, // Qx!https://quartz.jzhao.xyz
  {
    type: "element",
    tagName: "img",
    properties: {
      src: "/static/external-quartz.png", // I went into paint and magic wand deleted the background of the Quartz favicon
      style: "max-width:1em;max-height:1em;margin:0px 2px",
     },
     children: [],
   }
]

Which for [Quartz](Qx!https://quartz.jzhao.xyz) yields:
image
which links to the correct website as specified in the capturing group.

changes:

  • switch from requiring manual hast to newtypes for the three most common use cases: Image, Path, or Emoji
  • discuss -- should this be as freeform as a regex, or should it be constrained to a prefix for better ergonomics and a lower barrier to entry?
  • documentation
  • favicon newtype - see the pond: transformers/AddFavicons

Copy link
Collaborator

@saberzero1 saberzero1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please do not use var. Prefer const where possible, otherwise use let.

var's initialization is moved to the top of the scope, but the value assignment is not, leading to unexpected behavior.

function varExample() {
  console.log(test); // undefined
  var test = "hello";
  console.log(test); // hello
} 

function letExample() {
  console.log(test); // error: test is not defined
  let test = "hello";
  console.log(test); // hello
} 

@bfahrenfort
Copy link
Contributor Author

@saberzero1 thanks for reminding me, functional programmer with an automatic conception of let here haha

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants