madrilene / eleventy-excellent Goto Github PK

I would like to make images link to the full size original.

In HTML something like:

<a href="/path/to/full-size-image.png"><img src="/path/to/optimised-image"></a>

I'm not sure how to do this within the syntax of a shortcode like:

{% imagePlaceholder "path to image", "alt text", "caption - optional!" %}

Any suggestions on the best way to do it?

Hiya @madrilene! Love what you've done with the original buildexcellentwebsit.es

I'm going to clone it to experiment with the tailwind workflow but a quick suggestionn might be to toggle the public template checkmark in the repository settings. As seen in this screenshot from my own starter space otterty

Just a suggestion 👍

Thanks for the starter!

Best, Ben

Hi!

I recently revised the code of my Eleventy-Excellent-based website and wanted to test whether it worked at all in older browsers, including Internet Explorer. I was surprised to discover that no images at all were displayed there. This appeared to be true for vanilla Eleventy Excellent as well, e.g., the Post with an image demo. I thought this was odd because the whole idea of the <picture>/srcset markup is that it contains a fallback <img> element that should serve the image in a traditional way to browsers that don't support newer features.

I looked into the imagePlaceholder shortcode responsible for generating the image markup, and I believe I found the culprit. The generated code inserts a 1px placeholder in the src attribute of the <img> and the location of the actual image in a data-src attribute. However, the custom data-src does nothing on its own, and older browsers diligently display the 1px .png. As far as I can tell based on various tutorials on the web, the data-src thing is used only in conjunction with libraries such as vanilla-lazyload or lazysizes, which provide lazy loading functionality to browsers that lack native support. Unfortunately, your app.js does not seem to have an equivalent capability. The effect is a fallback element that fails to work as a fallback, and no 'minimum viable experience' is provided.

I still haven't decided how to fix it in my own code yet, but I thought this was something you might want to know (even if support for older browsers isn't a priority for the starter).

Have a happy new year!

Hi Lene,
You will need to update your meta description as there is an error in the elseif. States elif instead of elseif.

Also your Mastodon link states personal.social where it should be personal.platforms.

Also in your theme-switch.css you will need to add the following to ensure outline.

.theme-switch .button[aria-pressed='false']:focus-visible {
outline: 3px solid var(--color-base-light);
outline-offset: 0.3ch;
}

Thanks!

Hi, thanks for the amazing Eleventy template!

I've been scanning Eleventy projects and I noticed that many put all of the packages in devDependencies. This project keeps some in dependencies. I wonder if there is any reason to put a particular package into one or the other place. To me, the devDependencies should contain packages used only by developers on their local machines, e.g. dotenv or linting/code formatting packages, testing utils etc. Yet, I see many tutorials and eleventy packages that add everything into devDependencies, thus making it impossible not to install dev tools in production i.e. on build. Am I missing something here?

Hey!

Loving the starter so far. I really like the approaches you've taken. I've just had a bit of a hard time understanding how some things work as they're not really documented, which is why I'd like to ask how Tailwind works with this starter :)

I'm trying to use some basic Tailwind classes in the HTML markup like px-8 etc. but they're not included with the built CSS. Could you help me understand how Tailwind is setup and customized?

Hey Lene,

Any idea what plugin is tripping this warning?

flamed@flamedfury:~/Projects/eleventy-excellent$ npm run start

> [email protected] start
> run-p dev:*


> [email protected] dev:11ty
> eleventy --serve --watch


warn - Your plugin must set `modifiers: true` in its options to support modifiers.

when creating the OG images, webfonts don't work for the final jpg images.

This is mentioned here.
https://bnijenhuis.nl/notes/automatically-generate-open-graph-images-in-eleventy/

The recommended solution is to locally install the fonts used, but I'm not entirely sure how to solve this when running the site on Netlify or any other non-local environment.

Hi, thank you for you fantastic job!

The sitemap generated has the right page and post URLs but also all the links from the src/assets CSS and JS.

"version": "1.5.4"

Thank you for your check.

Hi! Thanks for this template! Looks amazing!

It would be awesome to tag posts and sort them by tags! Thx in advance!

Is there any way to change the language of the blog post dates from english to something else? I tried things for some time now but I can't seem to figure out any solution. Thanks

Hi Lene,

Can draft post support to be added to eleventy-excellent?
I've had a look at Draft Posts and Scheduled and draft 11ty posts, but their configuration is slightly different — enough to trip me up.

Let me know what you think and if there is anything else that I could provide to support you.

~fLaMEd

While working with this template I found that iOS Safari or Firefox do not render the custom color variables while in the dark theme appropriately. I have looked on the demo site as it also shows this issue. I am trying to track down what might be causing it but thought to bring it up.

Screenshot of iPhone with Firefox iOS.

Hi @madrilene! Thanks for your truly amazing and inspiring work on Eleventy Excellent. I'm using a heavily modified and adapted version of it on my website FigCat (you are credited on the About page).

I noticed an issue with Heydon Pickering's "redundant click event" solution for making the whole area of cards clickable (without sacrificing the ability to select text). When a card is middle-clicked (as in to open a new tab in a desktop browser), the link is opened in the current tab instead. I tested this on Firefox and Chromium.

I'm a heavy middle-clicker myself and I found this tremendously frustrating, so on my site I reverted to the pure CSS "pseudo-content trick" (also from Inclusive Components).

Unfortunately, I'm not knowledgeable enough to suggest a JavaScript alternative that would be guaranteed to work in all contexts and remain accessible.

I am not sure how to make a pull request since I am not a developer. So I am just opening an issue.

I discovered an incorrect URL on your about page.
The example "src/assets/css/design-tokens" is not correct according to your source code.
It should be "src/assets/design-tokens"

Thanks for a great starter kit.
Paul

Looking to pull down the latest version but don't understand how.

Hello @madrilene , thank you so much for creating and sharing this beautiful 11ty starter! And also for the resources you share in the README.

To know under what conditions this starter can be reused, I was wondering if you could add a LICENSE to the repository? Sorry if there is already one and I missed it

Hello @madrilene 👋

What steps can I take to remove the HTML/CSS minification?

The communities that I am in love to view source and look at how websites are constructed, and I would love not to obscure the structure of my website.

Is this as straight forward as removing the various npm packages?

Let me know ~fLaMEd

Heya, I noticed that the OG images were not displaying correctly. Checking out the formatting in partials/meta-info.njk

<meta
  property="og:image"
  content="{{ meta.url }}{% if (layout == 'post') %}
    /assets/og-images/{{ title | slugify }}-preview.jpeg
  {% else %}
    {{ meta.opengraph_default }}
  {% endif %}"
/>

Produces broken HTML when the page is built

<meta
  property="og:image"
  content="https://eleventy-excellent.netlify.app
    /assets/images/template/opengraph-default.jpg
  "
/>

And the OG images do not display, check https://www.opengraph.xyz/url/https%3A%2F%2Feleventy-excellent.netlify.app%2F

I updated the nunjucks loop to the following to get them to render correctly

<meta
  property="og:image"
  content="{% if (layout == 'post') %}
    {{ meta.url }}/assets/og-images/{{ title | slugify }}-preview.jpeg
  {% else %}
    {{ meta.url }}{{ meta.opengraph_default }}
  {% endif %}"
/>

Which now renders the URL on a single line, and the OG images load correctly

<meta
  property="og:image"
  content="
    https://flamedfury.com/assets/images/template/opengraph-default.png
  "
/>

Check https://www.opengraph.xyz/url/https%3A%2F%2Fflamedfury.com%2F

Hey again 👋

Throwing it out there if you might know why the blog cards is just rendering posts as the tag rather than the tags defined in each posts front matter?

Have I configured something somewhere to cause this?

See post grid on main page and the posts page