social.coop is one of the many independent Mastodon servers you can use to participate in the fediverse.
A Fediverse instance for people interested in cooperative and collective projects. If you are interested in joining our community, please apply at https://join.social.coop/registration-form.html.

Administered by:

Server stats:

461
active users

#eleventy

9 posts9 participants0 posts today

Created an #Eleventy plugin to zoom images on fullscreen.

When hovering, the magnifying glass indicates to the user that the img can be enlarged. A click and it appears enlarged, through a fade-in animation. A click outside the image quit the enlarged view.

Under the hood, a #VanillaJS inserts `<dialog>` #HTML modal right before the image. Outside of the modal click =`dialog` disappears.
Styled via #CSS `@starting-style`.

npmjs.com/package/eleventy-plu

@eleventy @zachleat

Has anyone implemented user authentication system to a static site (think: #Eleventy / #Hugo / anything that ends up as a bunch of HTML pages)?

I'd love to restrict access to one of my semi-public sites to a specific group of friends and assign them their own user-password pairs.

I'd love something nicer than plain .htpasswd.

I'd love it to be as plain and simple as possible. Only a login form. No user sign up, no password reminders. Maybe magic links via email or even static user-password pairs stored in a secure manner on some external backend server.

Of course, I want to self-host it, I want to spend as little time as possible maintaining it, but I could pay a reasonable sum for a nice out-of-the-box solution.

Any suggestions?

(I know Authorizer - authorizer.dev/ - but I wonder if there's anything else I haven't discovered)

authorizer.devAuthorizer | Your data your controlOpen Source Authentication and Authorization solution for your business. Easy to integrate and quick to implement with available SDKs

It has now been several months since behind the scenes I am carrying out a major refactor and rewrite of my website. It is taking very long because I am taking time to learn things in the meanwhile.

Now dealing with the last bits of the process, including fixing 300 broken links (out of a total of 30k+ 🤯), and it’s probably the most boring and time consuming process of all.

In a couple of weeks tops I expect the new version to be up and running, finally!

(The work is mostly hidden and focused on #Eleventy code optimizations, so nothing much is going to change on the outside)

🔗 Dynamic Websites with Static Site Generators via @darth_mall #Development #Webdev #Eleventy

A few years back, back when I was rebuilding the Science On a Sphere website, I had the idea that you could use a static site generator (SSG) like Eleventy to write out PHP instead of HTML. I had been eying Eleventy’s edge plugin and wishing it was available for hosts other than Netlify when it...

darthmall.net/weblog/2024/dyna

Evan SheehanDynamic Websites with Static Site GeneratorsWhat if you used your static site generator to output PHP instead of HTML?

I gave #Eleventy (the static-site generator) a go, suggested by some fine folks from 32bit.cafe, particularly inspired by @Leilukin's site.

it went pretty well and could even handle my bi-hosting for markdown -> html for my website and gemtext -> gemtext for my gemini capsule surprisingly smoothly.

...until I needed to handle per-blog-post assets.

I put assets such as images associated with each post in the same folder as the index.md of the post resides: posts/2025-01-01-my-post/index.md and posts/2025-01-01-my-post/my-image.png. this is not only easier for organization, but also referencing assets and avoids duplicating post slugs in the file hierarchy.

In #Hugo, these assets will get the same permalink as that of the post. ie, /posts/my-post/index.html and /posts/my-post/my-asset.png, where /posts/my-post is the configurable permalink for blog posts.

Eleventy doesn't handle any file extension other than what can be made into pages, from (md, html, njk, etc) and so these assets are ignored by default. With eleventConfig.addPassthroughCopy(...) I can use a glob such as posts/*/*.{png,mp4,webp,...} to copy the assets into the posts/*/ directory for output. However, it does not respect the permalink field in the data cascade at all, and ends up reproducing the full source directory slug together with the ISO date prefix, ie: /posts/2025-01-01-my-post/my-image.png.

The PR that resolves this which adds a new mode: "html-relative" option to addPassthroughCopy was merged about 3 weeks ago(!), and only part of the latest alpha release as of writing.

At a glance, this seems to solve my problem, but only partially -- it might not work when a post has no HTML output, only gemini, with a single index.gmi file in the posts/2025-01-01-my-post/ directory.

Fingerprinting and cache busting for resources also seems to require using a post-site-generation hook. one of the solutions would loop through all copied assets, rename the files (eg, asset.ext -> asset.hash.ext), loop through all output files and rewrite references to each asset.

Don't get me wrong -- Eleventy, Hugo, Lume, and all the rest of them, they're all great at doing what they are able to do. But when popular SSGs try and fit every need they still end up becoming a little opinionated in certain corner cases. My attempts to roll my own ends up being not very well tested clones of existing SSGs. Perhaps if I'd started with something different, such as Eleventy rather than Hugo to begin with, the story would be different. Or am I just doing everything wrong?

In any case, looks like Eleventy won't be the end to my SSG-hopping...

export default async function(eleventyConfig) {
	// glob here is relative to project root
	eleventyConfig.addPassthroughCopy(&quot;content/**/*.mp4&quot;, {
		mode: &quot;html-relative&quot;
	});
}...
GitHubAdds `html-relative` Passthrough Copy mode for relative asset references in HTML #3552 by zachleat · Pull Request #3573 · 11ty/eleventyBy zachleat

So in this year, I have moved my site around so much and I think that I am going to move it in the New Year. I don’t want to experiment with my main site, I want to have a final iteration of it first. I’m thinking Zola (as I felt more at ease with that).

I’ve used:

If there is any other SSGs that people know about and recommend, I’ll give them a go and then make a decision. But I do think it’ll be a Zola site.

Transferring the layout from the old site to the new is harder than I thought. Especially with my limited (read zero) knowledge of CSS. 😅

Am I feeling a little frustrated? Yes, I am!

Do I feel like giving it up? Yes!

But I really want to convert the site from Jekyll to Eleventy, so let's do it. And what else to do with my free time, right...

Replied in thread
Replied in thread

Thank you so much for the advice, @ttntm @hedy!

What would be ideal for me is a solution that integrates well with #Eleventy, the static site generator that I use, and #YunoHost, that powers the VPS on which it is hosted.

I would love to have an all-in-one script that lives in only one page (a.k.a. template) in the former, and I know that the latter has some email notification system included, but I have never investigated it further.

Maybe @sirodoht has some further insights?