In this blog post, I’ll walk you through how I cloned the landing page of Dot ai using Astro JS, TypeScript and Tailwind.
Astro js is a JavaScript web framework optimized for building fast, content-driven websites, with Astro's server side rendering abilities and typescript's static typing with my favourite css library (Tailwind), this project became a best learning experience for building fast and optimized websites.
Setting up the project
- Installing Astro, initializing the project.
- Setting up TypeScript.
- Installing and configuring Tailwind.
To get started with the project, you need to initialise an Astro project
# create a new project with npm
npm create astro@latest
To install or setup tailwindcss
First, install the @astrojs/tailwind and tailwind packages using your package manager.
npm install @astrojs/tailwind tailwind
After installing , Astro will create a tailwind.config.mjs file in your project’s root directory and then boom! you are good to go.
If this doesn't work, you can go through the manual setup.
To run astro dev server
~dot-clone> npm run dev
> dot-clone@0.0.1 dev
> astro dev
14:19:58 [build] Waiting for integration "@astrojs/tailwind", hook "astro:config:setup"...
14:19:59 [types] Generated 11ms
astro v4.14.5 ready in 35428 ms
┃ Local http://localhost:4321/
┃ Network use --host to expose
14:20:04 watching for file changes...
Project Structure
Website Layout
After inspecting and proper review of the website i noticed lot of similar design patterns, functionalities and animations used in sections of the website. For instance the footer, navbar, buttons, hero section for each pages and so on.
Since astro supports the creation of custom components, i was able to create and use reusable components accross the page.
Let's look at the custom link component
---
type Props = {
id?: string;
text: string;
href?: string;
className?: string;
};
const { text, id = "", href = "/", className } = Astro.props;
---
<a
id={id}
href={href}
class={className +
" inline-flex items-center gap-[6px] justify-center rounded-xl body-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background border border-gray-200 text-black hover:bg-secondary/80 py-2 md:py-3.5 px-6 md:h-[52px] h-[48px] body-sm xl:body-md border-none bg-[#c0d2f9]"}
><span>{text}</span> <slot /></a
>
The code has two sections, the frontmatter and the html markup
Frontmatter: Contains logic and props destructuring for the component, making it dynamic.
HTML Markup: Renders an anchor tag, with props dynamically applied to attributes and a slot for additional content.
Reusability: The component is reusable and flexible due to its use of props and the slot feature.
This combination of server-side logic (in the frontmatter) and the component's HTML structure (in the markup) makes Astro components highly dynamic and reusable, just like in frameworks such as React but with Astro’s focus on static generation and performance.
Key Features:
Responsive Design: The cloned website is fully responsive, ensuring that it looks and functions well on devices of all sizes.
Component-Based Architecture: Reusable components were created using Astro and TypeScript to ensure modularity and maintainability.
Optimized Performance: Astro’s static site generation helped optimize page load times, resulting in better performance and SEO.
Tailwind for Styling: Tailwind was used for consistent and streamlined styling, making use of utility classes for fast, responsive design adjustments.
Top comments (0)