Shortcodes img(src) should be path

[simbleau]

In the overview with images, it gives improper instructions saying to use img(src=...

Should be path

[Jieiku]

I am not sure I understand, your talking about this page?

here is the source code for that page, you can see that I am using img src not img path, and that the page renders the images properly.

https://raw.githubusercontent.com/Jieiku/abridge/master/content/overview-images/index.md

Maybe you have an old version of the short code? here is what it currently looks like:

https://github.com/Jieiku/abridge/blob/master/templates/shortcodes/img.html

Let me know what you figure out, I don't see any issues.

[simbleau]

Yeah might just be having issues merging in all your new changes... standby

[Jieiku]

If you have to you can rebase it:

cd abridge
git reset --hard 2ef7c0ec1ff976b807691fea23eaaf5ea1e93bc9
git pull

or just remove the submodule and readd it.

[simbleau]

Yeah, honestly, whatever I do I can't get it to work.

I did that and tried removing the shortcodes. Now it complains about a macro::resource and get_path not functioning. Then I saw "pages.html" and every other template not being found. At this point... not sure.

By any chance would you mind seeing if you could fork my repo, pull your changes from Abridge and see if it functions for you? I'm having no luck and the Zola error messages are not very helpful to me. If you do get it working, please give me a PR. Would be super helpful!

[Jieiku]

sure, not a problem.

[Jieiku]

Pull Request is there: https://github.com/simbleau/simbleau.github.io/pull/11

After removing and adding the Abridge module, I only needed to update the config.toml

(there was a very large number of changes)

I also made a safari-pinned-tab.svg for you. (not yet optimized)

[simbleau]

Thank you so much! Not sure what went wrong. I merged it, but I am now seeing this, notice the font change on the date. Any clue why?

[Jieiku]

I set the line below with the date and stuff to a smaller size.

Is that all that is going on, or is it actually a different font?

That is a new change so I would appreciate feedback on it.

The idea behind it was to put the focus on the content instead of the meta data.

[simbleau]

I'll be honest it's quite jarring. It might be the same font, but it definitely looks off, at least the spacing.

[simbleau]

Also is there any chance we could see the "Day/night" switcher turn colors too? It is the only grey item on my site and sticks out a bit unnaturally... Which isn't too big of a deal.

[Jieiku]

ahh ok, I can try some stuff, but it would be helpful if you could try some values as well, let me find the values that change those settings and post them here, one moment.

[simbleau]

Sure thing.

[simbleau]

We can scratch needing the day/night icons switching colors - I just noticed you uploaded a better blue theme which uses grey. I like it more! No action necessary (infact, you can get rid of blueshade if you want).

So yeah let's just focus on the font size.

[Jieiku]

The file that customizes the stuff at the bottom on the index page is: themes/abridge/sass/include/_zola.scss

You will see a class .rpad that adds a little right padding to each of those elements. (its what sets the spacing between them)

In this Same file you will see a .info this is what makes the font-size of everything down there smaller.

Play around with these and see what you like, then let me know so I can try them locally.

[simbleau]

The main things:

• "May 17, 2022" (better) vs "2022 May 17"
• "9 min read" could probably be on the same line as the title
• The metadata was moved to the bottom of each post, which I'd rather see as close to the title as possible

[Jieiku]

for the position of the info we can have an option in config.toml

I can set the date format back to month day, year

let me make a couple changes in a few minutes and see how you like it.

[simbleau]

Thoughts?

[Jieiku]

looks good, but on longer titles the appearance of the read time may end up looking odd... like when it needs to wrap. especially if it ends up wrapping only the read time.

I can definitely make an option to have the readtime on the title if thats how you want it though!

what size did you use for the bottom there?

[simbleau]

The bottom font size was 1em, same as the rest of the font

[simbleau]

I don't like it being on the same line honestly, I've tried making it look better but I don't think it's possible.... exhibit A:

.

[Jieiku]

So you thinking keep the read time with the other metadata?

[simbleau]

Yes, but it tends to look busy. I'm exploring ways to make it easier...

[Jieiku]

yeah, thats why I removed the author on the index, I am thinking What I want to do is make an option

author_page and author_index, so that I can display the author on the article, but not on the index. (i am the only author on my blog anyway)

I have also thought of a way that you can have a full size footer. I can just have a config option and if its not set then dont apply the .info class. then we both win. (I am going to increase the size of my footer a bit, but not back to full size.)

[simbleau]

I wouldn't care if fontawesome was leveraged here

[simbleau]

This would be my favorite:

[Jieiku]

what does the code that made that look like, paste it here, and I will work it into some options for the config.toml

[simbleau]

The changes nessary to do this are simple:

• Date format back to "May 17, 2022"
• Change the font size back to 1em for the info class.
• rpad only on the glasses and calendar items. (NOT the categories)
• glasses: <i class="fa-solid fa-glasses"></i>
• calendar: <i class="fa-solid fa-calendar"></i>
• info: <i class="fa-solid fa-circle-info"></i>

[Jieiku]

ahhh i see you put the category closer to the tags, i like that too.

I will add some class options for those meta fields, then people can set whatever class they want, which would support custom svg css or fontawesome.

Ok, gonna make these changes now, thanks the help on this.

[simbleau]

ahhh i see you put the category closer to the tags, i like that too.

I will add some class options for those meta fields, then people can set whatever class they want, which would support custom svg css or fontawesome.

If they opt into fontawesome, we already define a different search icon. We should do the same here

[Jieiku]

yeah, I will make the class definitions for these the way you set it, so that if they enable fontawesome then they are good to go. (so long as they started with the example config.toml)

[Jieiku]

I completed most of this, also I think I probably can apply color to that svg contrast switcher icon dynamically, going to give a try anyway.

[Jieiku]

Give that a try, don't forget the new options in config.toml

Initially I set the switcher to use fontawesome, which should take care of the color for those with fontawesome.

I then found a clever way of doing it even without fontawesome: https://github.com/Jieiku/abridge/commit/1945aba0e774e28709be4f5e66f4839df72d749e

[simbleau]

Awesome work! Currently it's missing some padding around the icon:

[simbleau]

Also a (very) minor thing I noticed was the light/dark icon appears cut off on the right side:

[Jieiku]

Interesting you spotted that, I also noticed the same thing on the very top of the fontawesome spyglass in your search.

It seems to be something that affects the fontawesome icons but not the ones included with abridge.

Here is a magnified version of the abridge icon (no issue):

I think maybe not all of the fontawesome icons are perfectly square and it causes clipping?

I can try and figure it out later.

[Jieiku]

I will fix that icon padding now, just need to add a space.

Fixed: https://github.com/Jieiku/abridge/commit/43894bda0a2ff797ccca1669712e10d04086bff1

[Jieiku]

I just fixed the Fontawesome icon clipping, this could have other bad affects, I disabled the overflow:hidden, so let me know if you spot any issues: https://github.com/Jieiku/abridge/commit/30e5cb9167898d0015caa3c5dcad97189e69a6d0