craftzdog / craftzdog-uses

A curated list of the tech I use, built with Astro and Tailwind CSS

Takuya's curated list of the tech

A curated list of the tech I use, built with Astro and Tailwind CSS

https://uses.craftz.dog/

Tutorial

Watch how I built this website on YouTube:

https://youtu.be/3_JE76PKBWE

Stack

• Astro - Static Website Framework
• Tailwind CSS - CSS Framework
• React - Component-based UI framework for JS
• Headless UI - Unstyled interactive components
• React Icons - Icon set
• Inkdrop - Markdown note-taking app, for writing the blog content (optional)

Project Structure

Inside of your Astro project, you'll see the following folders and files:

PROJECT_ROOT
├── public              # static assets
│   └── posts           # images of posts
├── src
│   ├── components      # Astro & React components
│   │   └── icons
│   ├── layouts         # page layouts
│   ├── pages           # page files
│   │   ├── categories  # category pages
│   │   └── posts       # .md files
│   └── styles          # global stylesheets
└── tools               # Inkdrop integration

How to import notes from your Inkdrop local server

First, please check out the live-export documentation.

Create .env file as following:

DEBUG='inkdrop:export:info,inkdrop:export:error'
INKDROP_USERNAME='***'
INKDROP_PASSWORD='***'
INKDROP_PORT=***
INKDROP_BOOKID='***'

Then, run the following command:

npm run live-import

License

MIT License.

You can create your own homepage for free without notifying me by forking this project under the following conditions:

• Delete my blog content and assets
• Add a link to my homepage

---

Looking for a Markdown note-taking app? Check out my app called Inkdrop:

craftzdog-uses's Issues

Swoosh not compatible with NodeJS 18 and being deprecated

Astro's image integration uses swoosh by default, which doesn't work with NodeJS 18 (required to run inkdrop-live-export). Also, it was said to being deprecated soon (GoogleChromeLabs/squoosh#1266 (comment)).

I suggest using the optional installation of sharp, as per the guide on the Astro documentation.

Blinking effect in light mode when navigating to different pages

Summary

I've been recreating my own portfolio website using Astrojs and was trying to implement the theme switcher. The problem I'm experiencing and I see on your website too is when the theme is on light mode, navigating to another page causes a blinking effect. Most of the time it will blink. Dark mode doesn't have this blinking effect for some reason.

Steps to reproduce

• go to https://uses.craftz.dog/
• press any item that navigates to a new page (Ex. Blue Yeti)
• navigate between home page and item page

Expected behavior:

• I'd imagine no blinking/flickering between pages.

Actual behavior:

• blinking/flicker

Possible solution

One solution I found was removing 'transition-colors duration-500' from the Body.astro component.
This eliminates the page blinking however no more cool transition effect between light and dark mode.

Conclusion

The main reason for this problem is the transition in the Body.astro component. Once removed no more blinking effect. It's a really simple issue but was wondering if there is a possible fix where we're able to still keep the 'transition-colors duration-500' property and have no more blinking.

Add keychron k7 to the computing list.

Hi Takuya,

Can you please add your new keychron k7 pro to the computing list as seen in your latest video ? And your comparison with the air60 ?

Thanks a lot.

Typo in "Aaron Chair" page

"Aaron Chair" should be "Aeron Chair"

https://uses.craftz.dog/posts/aaron-chair-by-herman-miller