From 97aecb44973c035c40a256291dcafaf4fb2be257 Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Thu, 12 Jun 2025 22:14:49 +0200 Subject: Remove blog --- src/content/blog/getting-started-with-astro.md | 48 --------- src/content/blog/integrating-react-with-astro.md | 81 --------------- src/content/blog/tailwind-css-in-astro.md | 122 ----------------------- 3 files changed, 251 deletions(-) delete mode 100644 src/content/blog/getting-started-with-astro.md delete mode 100644 src/content/blog/integrating-react-with-astro.md delete mode 100644 src/content/blog/tailwind-css-in-astro.md (limited to 'src') diff --git a/src/content/blog/getting-started-with-astro.md b/src/content/blog/getting-started-with-astro.md deleted file mode 100644 index dadcdcd..0000000 --- a/src/content/blog/getting-started-with-astro.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: "Getting Started with Astro" -description: "Learn how to build fast websites with Astro's innovative multi-page approach." -pubDate: 2025-05-20 -image: "https://images.unsplash.com/photo-1614728263952-84ea256f9679?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" -author: "Astro Developer" -tags: ["astro", "web development", "javascript"] ---- - -# Getting Started with Astro - -Astro is a modern web framework that allows you to build faster websites with less client-side JavaScript. It's perfect for content-focused websites like blogs, marketing sites, and portfolios. - -## Why Astro? - -Astro offers several advantages over traditional frameworks: - -- **Performance First**: Astro websites are designed to be lightning-fast by default. -- **Content-Focused**: Built with content-heavy websites in mind. -- **Server-First**: Generates HTML on the server, not in the browser. -- **Easy to Use**: Familiar syntax that combines the best parts of HTML, JSX, and markdown. -- **Fully Featured**: Includes everything you need for production. - -## Basic Example - -Here's a simple Astro component: - -```astro ---- -// Your component script goes here -const greeting = "Hello, Astro!"; ---- - -
-

{greeting}

-

This is my first Astro site.

-
-``` - -## Next Steps - -Ready to dive deeper? Here are some resources to help you on your Astro journey: - -1. [Astro Documentation](https://docs.astro.build) -2. [Astro Discord Community](https://astro.build/chat) -3. [Astro GitHub Repository](https://github.com/withastro/astro) - -Happy coding with Astro! diff --git a/src/content/blog/integrating-react-with-astro.md b/src/content/blog/integrating-react-with-astro.md deleted file mode 100644 index b3dee5a..0000000 --- a/src/content/blog/integrating-react-with-astro.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: "Integrating React with Astro" -description: "Learn how to use React components within your Astro website for interactive UI elements." -pubDate: 2025-05-21 -image: "https://images.unsplash.com/photo-1633356122102-3fe601e05bd2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" -author: "React Expert" -tags: ["astro", "react", "integration", "web development"] ---- - -# Integrating React with Astro - -Astro allows you to use React components alongside static content, giving you the best of both worlds: the performance of static HTML with the interactivity of React when needed. - -## Setting Up React in Astro - -First, you'll need to install the React integration: - -```bash -npm install @astrojs/react react react-dom -``` - -Then, update your `astro.config.mjs` file: - -```javascript -import { defineConfig } from 'astro/config'; -import react from '@astrojs/react'; - -export default defineConfig({ - integrations: [react()] -}); -``` - -## Creating React Components - -Create your React components as you normally would: - -```jsx -// src/components/Counter.jsx -import { useState } from 'react'; - -export default function Counter() { - const [count, setCount] = useState(0); - - return ( - - ); -} -``` - -## Using React Components in Astro - -Import and use your React components in Astro files: - -```astro ---- -import Counter from '../components/Counter'; ---- - -
-

My Astro Site

- -
-``` - -The `client:load` directive tells Astro to hydrate this component on page load, making it interactive. - -## Client Directives - -Astro provides several client directives to control when React components are hydrated: - -- `client:load`: Hydrate the component on page load -- `client:idle`: Hydrate when the browser is idle -- `client:visible`: Hydrate when the component is visible in the viewport -- `client:media`: Hydrate when a media query is matched -- `client:only`: Skip server-rendering and only render on the client - -## Conclusion - -By combining Astro's static-first approach with React's interactivity, you can build fast, responsive websites that provide excellent user experiences without sacrificing developer experience. diff --git a/src/content/blog/tailwind-css-in-astro.md b/src/content/blog/tailwind-css-in-astro.md deleted file mode 100644 index ff7bac3..0000000 --- a/src/content/blog/tailwind-css-in-astro.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: "Using Tailwind CSS in Astro" -description: "Learn how to integrate and use Tailwind CSS to style your Astro website efficiently." -pubDate: 2025-05-22 -image: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" -author: "CSS Enthusiast" -tags: ["astro", "tailwind", "css", "styling"] ---- - -# Using Tailwind CSS in Astro - -Tailwind CSS is a utility-first CSS framework that can be seamlessly integrated with Astro to create beautiful, responsive websites without writing custom CSS. - -## Setting Up Tailwind in Astro - -To get started with Tailwind CSS in your Astro project, you'll need to install the necessary dependencies: - -```bash -npm install -D @tailwindcss/vite tailwindcss -``` - -Next, create a configuration file for Tailwind: - -```bash -npx tailwindcss init -``` - -Update your `tailwind.config.js` file: - -```javascript -/** @type {import('tailwindcss').Config} */ -module.exports = { - content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], - theme: { - extend: {}, - }, - plugins: [], -} -``` - -## Integrating with Astro - -Update your `astro.config.mjs` file to use the Tailwind plugin: - -```javascript -import { defineConfig } from 'astro/config'; -import tailwindcss from '@tailwindcss/vite'; - -export default defineConfig({ - vite: { - plugins: [tailwindcss()] - } -}); -``` - -Create or update your global CSS file to include Tailwind's directives: - -```css -/* src/styles/global.css */ -@import "tailwindcss"; -``` - -Import this CSS file in your layout or components: - -```astro ---- -import '../styles/global.css'; ---- -``` - -## Using Tailwind Classes - -Now you can use Tailwind's utility classes directly in your HTML: - -```astro -
-
-
- Example -
-
-
Case study
- Finding customers for your new business -

Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.

-
-
-
-``` - -## Tailwind Typography Plugin - -For styling markdown content, the Typography plugin is extremely useful: - -```bash -npm install -D @tailwindcss/typography -``` - -Add it to your Tailwind config: - -```javascript -// tailwind.config.js -module.exports = { - // ... - plugins: [ - require('@tailwindcss/typography'), - // ... - ], -} -``` - -Then use the `prose` class on your markdown content: - -```astro -
- - -
-``` - -## Conclusion - -Tailwind CSS provides a powerful and efficient way to style your Astro website. With its utility-first approach, you can rapidly build custom designs without leaving your HTML or writing custom CSS. -- cgit v1.3.1