search

ccozens / learning_blog

Svelte learning blog
https://learning-blog-teal.vercel.app
0 stars 0 forks source link

copy link icon by headings #51

Open ccozens opened 1 year ago

ccozens commented 1 year ago

work out how svelte/similar show a copy icon on hover to left of headings to copy the URL of the section, and implement

ccozens commented 1 year ago

It uses a class called permalink:

text :where(a.permalink) {
    opacity: 0;
    background: url(./link.1a918426.svg) 0/1em 1em no-repeat;
    width: 1.4em;
    height: 1em;
    transition: opacity .2s;
    display: block;
    bottom: 0.25em;
    left: -1.3em;
    position: absolute!important;
}

And the HTML from viewing source:

<h2 id="createeventdispatcher">
    createEventDispatcher
    <a href="#createeventdispatcher" class="permalink">
        <span class="visually-hidden">permalink</span>
    </a>
</h2>