greenheart / greenheart.github.io Goto Github PK

View Code? Open in Web Editor NEW

1.0 3.0 0.0 67.11 MB

Home Page: https://samuelplumppu.se

License: Other

JavaScript 3.33% HTML 85.77% Svelte 9.15% TypeScript 1.30% CSS 0.45%

greenheart.github.io's Introduction

greenheart.github.io

Building the site with talks included

NOTE: This could be simplified in the future to allow fully automatic builds.

Git clone the talks repo https://github.com/Greenheart/talks
Run npm install in the subdirectory of each talk you want to build.
From the root of the talks project, run npm i && npm run build
Back in the website project, run pnpm build to build project with all talks
Verify build output and deploy.

Email Spam Protection

Make a copy of .env.example and name it .env.
Add your email to VITE_EMAIL in .env.
Add a strong password to encrypt/decrypt your email to VITE_PASSWORD in .env.
Open a terminal and run pnpm encrypt:text. Then copy the output (make sure you get every character) and add it to VITE_PAYLOAD in .env.
Now, the email should be accessible in the <EncryptedEmail /> component. Easily available for users, but most basic spam bots will not be able to extract the email.

Writing Best Practices

Use node scripts/title-case.js to format headings.
Use node scripts/format-code.js to ensure code has a consistent style.
Use  and  to wrap code blocks in blog posts to prevent the main Prettier instance of the codebase to re-format the code blocks after they already have been formatted with node scripts/format-code.js.
It's possible to prevent post drafts from rendering by prefixing the file with _.

Credits

Font Awesome: LinkedIn & GitHub SVG icons. Licensed under CC BY 4.0

greenheart.github.io's People

Contributors

Stargazers

Watchers

greenheart.github.io's Issues

Update preloading of links

Use the new data-sveltekit-preload-data="hover"

https://kit.svelte.dev/docs/link-options#data-sveltekit-preload-data

typo

"I am an 19-year-old orienteer..." should be "I am a 19-year-old orienteer..."

I noticed http://samuelplumppu.se via https://raviloop.github.io via https://gitter.im/gitterHQ/gitter?at=5830518f5eb8ea792a3d1a0a by @raviloop

Add breadcrumb links back to the main blog post listing page

This could be similar to how it's solved for IDG.tools and IDG.community

Bug: force page refresh when navigating from blog post to a talk

This is needed to fetch assets correctly

Figure out why the prerendering doesn't work

Try running npm run build && npm run preview to reproduce the error.

change order of talks to reverse chronological order

latest first

Create a quick blog post about TailwindCSS plugins, and making custom utilities show up in the editor intellisense. This adapts well to the workflow, while still getting the other benfits of Tailwind.

https://gist.github.com/Greenheart/7242428baf948aaf6d3a1af10c161ced

Update link prefetching to take advantage of latest SvelteKit features

Possibly enable data-sveltekit-prefetch for the entire page.
Remove the need for a custom Link component, and the isExternalURL() helper.
Possibly update the blog post about automatic link prefetching since it's now outdated.

Optimize SVG files

Add link to Mastodon account

Set up and test the GH pages 404.html fallback page

This could catch broken links and redirect to the landing page

Blog post idea: Faster shell startup with Oh my Zsh by lazyloading nvm

Note to self:

There are four pieces needed to make nvm work when loaded as a omz plugin:

setting NVM_DIR
adding the nvm plugin
configuring the nvm plugin to lazy load
starting omz and loading the plugins

By following all these steps, shell startup time went down from ~1.5 s to ~200 ms. A huge improvement for a common action performed many times daily.

export NVM_DIR="$HOME/.nvm"

plugins=(nvm git)

zstyle ':omz:plugins:nvm' lazy yes

source $ZSH/oh-my-zsh.sh

Add RSS feed, and a link "Follow Blog [rss icon]"

This can be generated at build time, with the metadata from each post. Also use the same data for regular SEO.

Consider adding social integration with ActivityPub/Mastoton to get social comments on the website

This would be a really nice feature to make the blog more social, while still keeping control and building on open standards rather than adding a custom commenting system.

Idea: https://webmention.io/
Idea: https://github.com/snarfed/bridgy

Implementation walk-through: https://www.codingwithjesse.com/blog/add-mastodon-replies-to-your-blog/

Set up image optimization similar to IDG.tools

Automated image optimization might be useful in the future, to allow blog posts to include more images.

System developer - add context

Update title, and clarify that it's not about tech, but about systems change, and developing (technical but also social and cultural) systems that enable change.

Become aware that we are all co-creating systems all the time. We're embedded in multiple layers of systems, and we use systems. Thus understanding how to design, develop and use systems is a core capacity that I want more people to get access to. Similar to the power of words, the power of systems design and development is something that requires great responsibility. But also something we need to distribute power, so it truly becomes democratic and not elitist or centralised. Thus free software is another critical component to enable this.

But also co-operation over competition.

maybe consistent casing like "My tech stack" instead of "My Tech Stack".
Update skills so they are relevant.
Update intro text.

Bug: Page title does not update on clientside navigation

How to reproduce:

Visit any blog post
Go to the home page / using the link in the top left header
The page title does change when navigating between different blog posts, but not back to the original page title for the landing page

Create image component that loads optimized images first and supports fallback images

This would speed up the page load time by easily cutting the image sizes in half.

For inspiration, see how it was solved in IDG.tools