Популярное

Музыка Кино и Анимация Автомобили Животные Спорт Путешествия Игры Юмор

Интересные видео

2025 Сериалы Трейлеры Новости Как сделать Видеоуроки Diy своими руками

Топ запросов

смотреть а4 schoolboy runaway турецкий сериал смотреть мультфильмы эдисон
dTub
Скачать

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Автор: devaslife

Загружено: 2022-09-20

Просмотров: 254739

Описание:

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
* ‪@TailwindLabs‬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...
▶ 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

How to create a 'What I Use' blog with Astro and Tailwind CSS (at a hotel lounge)

Поделиться в:

Доступные форматы для скачивания:

Скачать видео mp4

  • Информация по загрузке:

Скачать аудио mp3

Похожие видео

Введение в Astro | Вебинар Дмитрия Безуглого | karpov.courses dev

Введение в Astro | Вебинар Дмитрия Безуглого | karpov.courses dev

Astro. Теперь сайты моментальные. Быстрый курс

Astro. Теперь сайты моментальные. Быстрый курс

How I built a software agency website with Next.js + Tailwind CSS (in nature)

How I built a software agency website with Next.js + Tailwind CSS (in nature)

[playlist] Melodies for coding | Focus & Chill

[playlist] Melodies for coding | Focus & Chill

ESP32: распознавание речи нейросетью (TensorFlow Lite)

ESP32: распознавание речи нейросетью (TensorFlow Lite)

Tailwind против Vanilla CSS — стоит ли пересмотреть свое решение?

Tailwind против Vanilla CSS — стоит ли пересмотреть свое решение?

How to set up Neovim for coding React, TypeScript, Tailwind CSS, etc on a new M2 MacBook Air

How to set up Neovim for coding React, TypeScript, Tailwind CSS, etc on a new M2 MacBook Air

Сокуров напомнил Путину о проблемах внутри России (English subtitles) @Max_Katz

Сокуров напомнил Путину о проблемах внутри России (English subtitles) @Max_Katz

Building a Blog Website with Astro.js and Strapi

Building a Blog Website with Astro.js and Strapi

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

How to build a Gmail-like UI with React Native [at a Zen temple Koshoji]

Deep House Mix 2024 | Deep House, Vocal House, Nu Disco, Chillout Mix by Diamond #3

Deep House Mix 2024 | Deep House, Vocal House, Nu Disco, Chillout Mix by Diamond #3

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

Create a blog with a headless CMS // Full 3-hour course // Astro + Wix Studio

Create a blog with a headless CMS // Full 3-hour course // Astro + Wix Studio

Вся IT-база в ОДНОМ видео: Память, Процессор, Код

Вся IT-база в ОДНОМ видео: Память, Процессор, Код

Добиться успеха будет трудно, пока вы не построите такие системы

Добиться успеха будет трудно, пока вы не построите такие системы

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

How to build a smoothly animated ToDo app with React Native, Expo, Reanimated, NativeBase, and Moti

How to build animated & responsive tablet UIs with React Native (at the lakeside)

How to build animated & responsive tablet UIs with React Native (at the lakeside)

Я БРОСИЛ КОДИТЬ: Полный курс создания сайтов через ИИ (результат шокирует)

Я БРОСИЛ КОДИТЬ: Полный курс создания сайтов через ИИ (результат шокирует)

Музыка для работы - Deep Focus Mix для программирования, кодирования

Музыка для работы - Deep Focus Mix для программирования, кодирования

© 2025 dtub. Все права защищены.



  • Контакты
  • О нас
  • Политика конфиденциальности



Контакты для правообладателей: [email protected]