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/craftzdo...
▶ Download my product: Inkdrop - Markdown note-taking app
https://www.inkdrop.app/?utm_source=d...
▶ Indkrop live export tool
https://github.com/inkdropapp/inkdrop...
▶ Stack
Astro - Static Website Framework
* @TailwindLabsCSS 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...
▶ My hacked version of Hyper
https://github.com/craftzdog/hyper
▶ Hotel it. Osaka Shinmachi
https://hotelit.jp/en/
Follow me online here:
▶ Twitter(English) / inkdrop_app
▶ Twitter(日本語) / craftzdog
▶ Instagram / 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/referra...
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