Hello. I'm Takuya Matsuyama from Japan, a solo developer making a Markdown note-taking app called Inkdrop. Today, I built a curated list of the tech that I use with Astro and Tailwind CSS. ▶ Website - What I use https://uses.craftz.dog/ ▶ Source code https://github.com/craftzdog/craftzdog-uses ▶ Download my product: Inkdrop - Markdown note-taking app https://www.inkdrop.app/?utm_source=devaslife&utm_medium=youtube&utm_campaign=vlog&utm_content=3_JE76PKBWE ▶ Indkrop live export tool https://github.com/inkdropapp/inkdrop-live-export ▶ Stack * Astro - Static Website Framework * https://www.youtube.com/channel/UCOe-8z68tgw9ioqVvYM4ddQ - CSS Framework * React - Component-based UI framework for JS * Headless UI - Unstyled interactive components * React Icons - Icon set * Inkdrop live export tool ▶ My dotfiles https://github.com/craftzdog/dotfiles-public ▶ My hacked version of Hyper https://github.com/craftzdog/hyper ▶ Hotel it. Osaka Shinmachi https://hotelit.jp/en/ Follow me online here: ▶ Twitter(English) https://twitter.com/inkdrop_app ▶ Twitter(日本語) https://twitter.com/craftzdog ▶ Instagram https://instagram.com/craftzdog ▶ Medium Blog https://blog.inkdrop.app/ ▶ DEV blog https://dev.to/craftzdog ▶ GitHub https://github.com/craftzdog/ ▶ Subscribe to my newsletter https://www.devas.life/ Credits: ▶ BGM: Epidemic Sound https://www.epidemicsound.com/referral/p96aa8/ 00:00 Intro 01:15 Heading to a hotel 04:34 Create new Astro project 07:13 Configure Prettier 07:22 Add ESLint 08:57 Add ReactS and configure TypeScript 11:45 Add TailwindCSS and a custom Google font 15:06 Remove the existing styles 16:26 Update the website information 17:36 Body component 19:00 Header component 22:24 Add a GitHub icon 24:05 Add a paw logo 25:41 Support toggling light/dark themes 33:26 Content component 36:48 Add a page introduction 39:52 Add a page introduction 45:01 The list of posts 48:48 Display post thumbnails 51:19 Fix a bug which causes the screen to flash when dark theme is applied 53:13 Style blog posts 57:33 Customize the Markdown processor to at proper stvles 01:00:31 Remove the example Markdown files 01:01:04 Change the cover photo 01:01:35 Custom 404 page 01:04:08 Integrate with Inkdrop in order to use it as a CMS 01:14:51 Create posts with Inkdrop 01:29:20 Change the post order 01:29:46 Add cateories 01:21:18 Navigation drondown menu 01:42:01 Add category pages 01:51:00 Fix a bug where themes still not being toggled on loading 01:51:53 'Created with' section 01:57:04 Thanks for watching #codewithme #astrojs #tailwindcss