#dev 2020-09-07

2020-09-07 UTC
[KevinMarks], cambridgeport90, geoffo, KartikPrabhu, jonnybarnes, fauno_, [tantek], [tw2113], [chrisaldrich], [fluffy], treora, beko, nickodd, [jeremycherfas], [LewisCowles], cweiske, swentel, [James_Gallaghe], moppy, [Murray] and [jgmac1106] joined the channel
#
GWG
Someone fixed their Micropub auth problem by setting the permission function to always return true
#
GWG
I worry if I don't solve the problem people will become negatively frustrated
[jeremycherfas] joined the channel
#
[jeremycherfas]
Can frustration be positive?
#
GWG
[jeremycherfas]: As in do something unfortunate
geoffo, jonnybarnes and [fluffy] joined the channel
#
[fluffy]
Positive frustration leads to things like BLM protests and sweeping social change
swentel, [snarfed], jonnybarnes and [tantek] joined the channel
#
[jeremycherfas]
We’ll have to agree to disagree. A positive response to frustration is great and can effect huge changes. But it is borne of a desire to remove the frustration, which is not desirable.
#
[tantek]
discomfort can be useful for remembering and growing empathy, to help motivate advocating and advancing social changes that benefit those less fortunate
#
[tantek]
oops sorry that's more a #indieweb-chat topic
jamietanna joined the channel
#
jamietanna
GWG what's the Micropub auth issue? Is it WP specific?
#
GWG
jamietanna: Appears so
#
jamietanna
also GWG I think maybe having the profile image redirecting could be useful, but I wonder if it always redirecting could be a pain for clients who would want to cache
#
jamietanna
oh that's a shame - guessing we're not sure what's up yet?
#
GWG
jamietanna: I think it is a weird combination of server configuration and code. That's why some people have no issue
#
GWG
jamietanna: As for the profile image redirect, I am setting cache control headers which should, on supporting systems, cache the redirect.
#
GWG
According to RFC2616, a 302 response is only cacheable if indicated by a Cache-Control or Expires header field
#
jamietanna
nice, that sounds like a good plan
#
GWG
Still puts it in the retrieving site's ballpark
#
GWG
The alternative was to download the profile image and serve it
ndegruchy, KartikPrabhu and [schmarty] joined the channel
#
aaronpk
okay how do i get the little copyable anchor icons like github readmes have
#
aaronpk
i need that on my website
#
aaronpk
i keep expecting it to be there but it's not
#
[tantek]
like on headings?
#
aaronpk
it appears on hover
#
[fluffy]
I have a thing like that on publ.beesbuzz.biz that’s all done in CSS if you’re interested
#
aaronpk
all css? yes plz
#
[tantek]
do you also want it for paragraphs?
#
[fluffy]
well, mine are always visible but it’s easy enough to make it not be
#
aaronpk
just headings
#
[tantek]
This feels like a very old discussion, where we discussed automatically giving every heading and paragraph its own fragment permalink that was revealed upon hover
#
[fluffy]
so like, I have <h2 id=“foo”><a href=“#foo”>Foo Header</a></h2> in the HTML
#
aaronpk
hm right... i need to change the HTML here
#
[fluffy]
and then in the CSS I have some ::before and ::after rules, and you can do like h2:hover a::before { content: ‘¶’ }
#
aaronpk
is there any way to do it *entirely* in css?
#
[tantek]
aaronpk, depends on the effect you want
#
[tantek]
there are many variants
#
aaronpk
oh i think i've tried this before, you can't create an anchor link in css
#
[tantek]
if you literally want GitHub style, then you DON'T want to hyperlink the text of the heading the way [fluffy] does
#
[fluffy]
in http://publ.plaidweb.site/style.css see the .permalink rules, although they’re a bit messy
#
[fluffy]
oh yeah you can also do <h2 id=“foo”><a href=“#foo”></a> Foo</h2> or whatever
#
[fluffy]
depends on what you’re going for
#
aaronpk
yeah there's no way to do it without changing the HTML huh
#
[tantek]
right that sort of thing, with it being visibility:hidden by default, then a hover rule on the h2 that sets the a href to visibility:visible
#
[fluffy]
I don’t like having things that appear/disappear only on hover so my specific rules are a bit different than what I said above, I just change the opacity of the `#` mark
#
[tantek]
presumably your HTML already has the link, that's the assumption
#
aaronpk
the problem is i'd have to change my markdown processor to add something into the HTML, which sounds hard
#
[fluffy]
You could keep the HTML the same and use `text-decoration: none` for h2 a, or something
#
[tantek]
and that you only need the CSS to hide it normally and show it on hover
#
aaronpk
i could post-process the HTML in javascript, heh
#
[fluffy]
Publ does let you change the heading templates so that you can format the headings however you want, link-wise
#
[tantek]
not a bad idea, those links are only for users anyway, not bots
#
[schmarty]
if you want the github-style "one click to copy to your clipboard" you'll need JS anyway.
#
[fluffy]
I’m not a fan of javascript post-processing but that’s a fair point
#
[tantek]
though it sucks to make a markup feature require JS
#
aaronpk
the other problem is right now there's not enough space between the left of the header and the edge of the container to insert an icon so i have to move it or show the thing at the end
#
[tantek]
yeah, right-click to copy link is usually good enough IMO
#
[fluffy]
yeah position:absolute is your friend for this
#
[tantek]
only if you set position:relative on the h2 🙂
#
aaronpk
well i don't want it hanging off the side
#
[fluffy]
well, yeah
#
[tantek]
where do you want it
#
[tantek]
originally you said GitHub style so now we're talking about something else
#
aaronpk
i might scoot my text over to make room: https://i.imgur.com/IPiSoKI.png
#
aaronpk
this is what i tlooks like now https://i.imgur.com/6TeuH7w.png
#
[fluffy]
GitHub style just seems like it adds some left margin on everything, and then there’s a :hover rule to put the little link icon off to the left, probably using absolute positioning
#
[fluffy]
and I’m not going to dig into their probably enormous stylesheets but I’m guessing the rules they use are something like: h2:hover a { position: absolute; left: -1em; display: block; content: ‘🔗’; } and h2 a { display: none; }
#
[fluffy]
er sorry h2:hover a::before
#
[fluffy]
hm no they’re actually injecting `<svg>` tags into the HTML
#
[fluffy]
so it’s like `<h2><a id="foo" href="#foo"><svg>...</svg>Foo</h2>`
#
[fluffy]
and then presumably there’s an h2:hover rule to make the svg visible
#
[fluffy]
you’ll probably want to change the HTML anyway, in case your markdown ever allows links within the heading itself
[Emma_Humphries] joined the channel
#
aaronpk
this is why i haven't done this before, so many dependencies in the chain
jonnybarnes joined the channel; nickodd left the channel
#
[tantek]
the hard part is *something* has to generate the id on the heading for permalinking
#
aaronpk
yeah that too
#
[tantek]
if you want the links to actually *work* as in a browser to scroll to the heading, you MUST generate them server-side
#
[tantek]
forget the JS approach
#
aaronpk
i can manually add one in markdown, so i think i'm going to settle for only adding tthis icon to headersr that have an id in the sourrce
#
aaronpk
neat trick: visibility:hidden keeps the containing element in the dom so tthe hover event still works
#
aaronpk
i was wondering how github was doing it where you can hover over the empty space where the icon will appear
#
aaronpk
ok this works reasonably well!
[chrisaldrich] joined the channel
#
aaronpk
i should have done this ages ago haha
#
Loqi
definitely
#
aaronpk
omg this is so nice
#
[tantek]
looking forward to seeing the demo at HWC West 🙂
[tw2113], ArjunAa, ndegruchy, geoffo, jeremy and [Murray] joined the channel
#
[Murray]
also looks forward to that ^ Hover links for headings have been on my list for _ages_, will be interested to see how you've done it 🙂
jonnybarnes, [tantek] and gRegorLove joined the channel