Site maintenance

[swift502]

Hi. I wanted to fix the missing images, but when I saw that the site is using Astro 1 I updated everything to current versions.

This is totally unsolicited so I understand if you refuse these changes. However I'd be happy to further fix issues that might come up when building or deploying the site.

Entries cleanup

• Update all missing images
• Where possible, I took the first image in repository's readme
• If image in readme was not found, good faith attempt was made to find some image in the repository
• If image couldn't be found, but repository is live, the img tag was removed, and entry left as is
• Dead repository links were removed
• Good faith attempt was made to find the dead link keyboards by author and their name, before deletion
• Links leading to web archive were left as is

Site maintenance

• Upgraded all dependencies
• Update astro dependencies and functionalities
• Removed <Image> component usage because according to https://docs.astro.build/en/guides/images/#images-in-markdown-files the component is not supported in md files, and actually in the two entries where it was used it was breaking the width of the entire table column. It could potentially be implemented with mdx if we wanted image thumbnails, preventing load jitter, and get better image preview functionality.
• Fixed footer avatar icons, the api url was not formatted correctly
• Fixed highlighting of the current tab in the left panel
• I tried fixing the search but I have no clue how. If we wanted search I'd suggest switching to Starlight, which has embedded search and would simplify a lot of things tremendously.

Differences

• Only difference I found is slightly bigger padding at the top of tables. Otherwise the website looks 1:1 identical as far as I can tell.

Let me know what you think. 👌

[netlify]

✅ Deploy Preview for keebfolio ready!

Name	Link
🔨 Latest commit	272d641
🔍 Latest deploy log	https://app.netlify.com/sites/keebfolio/deploys/672a8b007f33360008368562
😎 Deploy Preview	https://deploy-preview-182--keebfolio.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[aatmmr]

Hej @swift502 - thanks a lot for you efforts 🎉 We‘ll look at it soon 😊

[swift502]

After further research the search functionality could be done with Pagefind, which has good integration with astro.

[swift502]

For the image optimization and loading jitter:

1. MDX would work but then the images would not render correctly on github, when viewing the mdx files. Is that important?

2. Another alternative would be something like yml, and generate the table html manually.

- name: Boston
  type: pcb, case
  tags: 120%, usb-c, STM32F072CBU6
  link: https://github.com/bluepylons/Boston
  image: boston.jpg # Images would be made local, so they can be optimized during build

Separate data and html that way.

Just a few proposals. But I can't find an easy way to improve the images without removing the simplicity of people being able to just add a line on Github, check the md preview to see if everything is correct and create a PR. That is a really good thing that allows people to contribute easily.

[BenRoe]

@swift502 Wow many thanks for this big help.
Upgrading Astro was on my list, but did not had the time. Also find missing images is a big help.
The PR looks good right now.
I will merge it. We can do other things in a different PR.

Here my questions (you can open a issue or pr for each one):

1. Is it possible to generate the thumbnails during build process and save them, so the website does not load 1600px images as thumbnails
2. A search would be great. Tried to implement the https://www.algolia.com (have a free account), but was not able to get it working (i am open for alternatives)
3. Contributor avatars list ordered by contribution amount and also show more than 3 avatars

[BenRoe]

For the image optimization and loading jitter:

1. MDX would work but then the images would not render correctly on github, when viewing the mdx files. Is that important?
2. Another alternative would be something like yml, and generate the table html manually.

- name: Boston
  type: pcb, case
  tags: 120%, usb-c, STM32F072CBU6
  link: https://github.com/bluepylons/Boston
  image: boston.jpg # Images would be made local, so they can be optimized during build

Separate data and html that way.

Just a few proposals. But I can't find an easy way to improve the images without removing the simplicity of people being able to just add a line on Github, check the md preview to see if everything is correct and create a PR. That is a really good thing that allows people to contribute easily.

Do you have an MDX example? For me it's fine if the images are not correct if viewed on GitHub. The website should be the main way to view the content.

The YAML looks clean and gives a good overview of the document structure.
Is there a downside of YAML?

[BenRoe]

Checked the code and the preview.
Looks good to me.
Many many thanks for that PR. ❤️

[swift502]

@BenRoe Awesome! I agree I can make other PRs for the other features.

Do you have an MDX example

We would just replace <img with <Image.

| [Alps Switch Opener](/keyboard/link) | <Image src='/image/path.jpg' width='200px' /> |

Is there a downside of YAML?

In terms of maintenance and code complexity, there would be more code to generate html from the yml data.
However that would also provide more flexibility, so we could much easier something like large floating previews on hover, and fancy stuff like that.

I'm fine with trying out either. It's up to you really.

@BenRoe I actually think MDX is a good first upgrade. We can think about the more complex yml later if necessary. I'll work on a MDX version. 👍

[swift502]

A search would be great

I'd love to implement PageFind, it's free and statically built. Should be great.

Contributor avatars list ordered by contribution amount and also show more than 3 avatars

I was getting "too many requests" errors already, so I don't know if I wanna mess with the avatar list. I just fixed this iteration of it for now.

[swift502]

@BenRoe Just an update.

I tried really hard to think of something elegant for the thumbnails but can't.
Any of my solutions would make it much harder for people to contribute their boards, or introduce a manual 2 step build process to create the thumbnails.

I really don't think either is a good idea so I'm out for now, sorry.

[BenRoe]

@swift502

1. MDX for the first iteration sound a good solution. So you have my go.
2. About the contributor list it' not urgent.
3. will research more about pagefind
4. About thumbnail, i also did some research and could not find a solution 😞