Reorganize duplicated tailwind code and formatting
This commit is contained in:
prototypa
4
.vscode/settings.json
vendored
4
.vscode/settings.json
vendored
@ -2,11 +2,11 @@
|
||||
"prettier.documentSelectors": ["**/*.astro"],
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
"[astro]": {
|
||||
"editor.formatOnSave": true,
|
||||
"editor.formatOnSave": false,
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[javascript]": {
|
||||
"editor.formatOnSave": true,
|
||||
"editor.formatOnSave": false,
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
const {} = Astro.props;
|
||||
const { } = Astro.props;
|
||||
---
|
||||
|
||||
<script is:inline>
|
||||
|
||||
@ -19,8 +19,8 @@ const image =
|
||||
typeof _image === "string"
|
||||
? new URL(_image, Astro.site)
|
||||
: _image && typeof _image["src"] !== "undefined"
|
||||
? new URL(getRelativeUrlByFilePath(_image.src), Astro.site)
|
||||
: null;
|
||||
? new URL(getRelativeUrlByFilePath(_image.src), Astro.site)
|
||||
: null;
|
||||
---
|
||||
|
||||
<meta charset="UTF-8" />
|
||||
@ -29,35 +29,35 @@ const image =
|
||||
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
{canonical && <link rel="canonical" href={canonical} />}
|
||||
{canonical &&
|
||||
<link rel="canonical" href={canonical} />}
|
||||
|
||||
<!-- Google / Search Engine Tags -->
|
||||
<meta itemprop="name" content={title} />
|
||||
<meta itemprop="description" content={description} />
|
||||
{image && <meta itemprop="image" content={image} />}
|
||||
{image &&
|
||||
<meta itemprop="image" content={image} />}
|
||||
|
||||
<!-- Facebook Meta Tags -->
|
||||
{canonical && <meta property="og:url" content={canonical} />}
|
||||
{canonical &&
|
||||
<meta property="og:url" content={canonical} />}
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
{image && <meta property="og:image" content={image} />}
|
||||
{image &&
|
||||
<meta property="og:image" content={image} />}
|
||||
|
||||
<!-- Twitter Meta Tags -->
|
||||
{canonical && <meta name="twitter:url" content={canonical} />}
|
||||
{canonical &&
|
||||
<meta name="twitter:url" content={canonical} />}
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content={title} />
|
||||
<meta name="twitter:description" content={description} />
|
||||
{image && <meta name="twitter:image" content={image} />}
|
||||
{image &&
|
||||
<meta name="twitter:image" content={image} />}
|
||||
|
||||
<!-- Fonts -->
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet" />
|
||||
|
||||
<!-- Google Site Verification -->
|
||||
<meta
|
||||
name="google-site-verification"
|
||||
content="orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M"
|
||||
/>
|
||||
<meta name="google-site-verification" content="orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M" />
|
||||
@ -1,18 +1,13 @@
|
||||
---
|
||||
const {} = Astro.props;
|
||||
const { } = Astro.props;
|
||||
---
|
||||
|
||||
<section class="relative">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div class="py-12 md:py-20">
|
||||
<div
|
||||
class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none"
|
||||
>
|
||||
<h2
|
||||
class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4"
|
||||
>
|
||||
<span>Astro</span> + <span class="whitespace-nowrap"
|
||||
>Tailwind CSS
|
||||
<div class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none">
|
||||
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4">
|
||||
<span>Astro</span> + <span class="whitespace-nowrap">Tailwind CSS
|
||||
</span>
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-slate-400">
|
||||
@ -21,12 +16,8 @@ const {} = Astro.props;
|
||||
</p>
|
||||
|
||||
<div class="mt-6">
|
||||
<a
|
||||
class="btn text-white bg-blue-600 hover:bg-blue-800 sm:mb-0 font-bold"
|
||||
href="https://github.com/onwidget/astrowind"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Get template
|
||||
<a class="btn text-white bg-blue-600 hover:bg-blue-800 sm:mb-0 font-bold"
|
||||
href="https://github.com/onwidget/astrowind" target="_blank" rel="noopener">Get template
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,122 +0,0 @@
|
||||
---
|
||||
import { Icon } from "astro-icon";
|
||||
const {} = Astro.props;
|
||||
---
|
||||
|
||||
<div class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
|
||||
<div class="max-w-xl sm:mx-auto lg:max-w-2xl">
|
||||
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
|
||||
<h2
|
||||
class="max-w-lg mb-4 font-sans text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto"
|
||||
>
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-screen-xl sm:mx-auto">
|
||||
<div class="grid grid-cols-1 gap-8 lg:gap-16 row-gap-8 md:grid-cols-2">
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<p class="mb-4 text-xl font-bold">
|
||||
<Icon
|
||||
name="tabler:arrow-down-right"
|
||||
class="w-7 h-7 text-blue-500 inline-block icon-bold"
|
||||
/>
|
||||
What do I need to start?
|
||||
</p>
|
||||
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
||||
Space, the final frontier. These are the voyages of the Starship
|
||||
Enterprise. Its five-year mission: to explore strange new worlds.
|
||||
</p>
|
||||
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
||||
Many say exploration is part of our destiny, but it’s actually our
|
||||
duty to future generations.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-4 text-xl font-bold">
|
||||
<Icon
|
||||
name="tabler:arrow-down-right"
|
||||
class="w-7 h-7 text-blue-500 inline-block icon-bold"
|
||||
/>
|
||||
How to install the Astro + Tailwind CSS template?
|
||||
</p>
|
||||
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
||||
Well, the way they make shows is, they make one show. That show's
|
||||
called a pilot.
|
||||
</p>
|
||||
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
||||
Then they show that show to the people who make shows, and on the
|
||||
strength of that one show they decide if they're going to make more
|
||||
shows. Some pilots get picked and become television programs.Some
|
||||
don't, become nothing. She starred in one of the ones that became
|
||||
nothing.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-4 text-xl font-bold">
|
||||
<Icon
|
||||
name="tabler:arrow-down-right"
|
||||
class="w-7 h-7 text-blue-500 inline-block icon-bold"
|
||||
/>
|
||||
What's something that you completely don't understand?
|
||||
</p>
|
||||
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
||||
A flower in my garden, a mystery in my panties. Heart attack never
|
||||
stopped old Big Bear. I didn't even know we were calling him Big
|
||||
Bear.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<p class="mb-4 text-xl font-bold">
|
||||
<Icon
|
||||
name="tabler:arrow-down-right"
|
||||
class="w-7 h-7 text-blue-500 inline-block icon-bold"
|
||||
/>
|
||||
What's an example of when you changed your mind?
|
||||
</p>
|
||||
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
||||
Michael Knight a young loner on a crusade to champion the cause of
|
||||
the innocent. The helpless. The powerless in a world of criminals
|
||||
who operate above the law. Here he comes Here comes Speed Racer.
|
||||
He's a demon on wheels.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-4 text-xl font-bold">
|
||||
<Icon
|
||||
name="tabler:arrow-down-right"
|
||||
class="w-7 h-7 text-blue-500 inline-block icon-bold"
|
||||
/>
|
||||
What is something that you would really like to try again?
|
||||
</p>
|
||||
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
||||
A business big enough that it could be listed on the NASDAQ goes
|
||||
belly up. Disappears!
|
||||
</p>
|
||||
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
||||
It ceases to exist without me. No, you clearly don't know who you're
|
||||
talking to, so let me clue you in.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-4 text-xl font-bold">
|
||||
<Icon
|
||||
name="tabler:arrow-down-right"
|
||||
class="w-7 h-7 text-blue-500 inline-block icon-bold"
|
||||
/>
|
||||
If you could only ask one question to each person you meet, what would
|
||||
that question be?
|
||||
</p>
|
||||
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
||||
This is not about revenge. This is about justice. A lot of things
|
||||
can change in twelve years, Admiral. Well, that's certainly good to
|
||||
know. About four years. I got tired of hearing how young I looked.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,113 +1,72 @@
|
||||
---
|
||||
import { Icon } from "astro-icon";
|
||||
const {} = Astro.props;
|
||||
const { } = Astro.props;
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: "Headers",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
|
||||
icon: "flat-color-icons:home"
|
||||
},
|
||||
{
|
||||
title: "Footers",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
|
||||
icon: "flat-color-icons:faq"
|
||||
},
|
||||
{
|
||||
title: "Features",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
|
||||
icon: "flat-color-icons:video-projector"
|
||||
},
|
||||
{
|
||||
title: "Call-to-Action",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
|
||||
icon: "flat-color-icons:video-projector"
|
||||
},
|
||||
{
|
||||
title: "Pricing",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
|
||||
icon: "flat-color-icons:calculator"
|
||||
},
|
||||
{
|
||||
title: "Testimonial",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
|
||||
icon: "flat-color-icons:voice-presentation"
|
||||
}
|
||||
]
|
||||
---
|
||||
|
||||
<section class="relative">
|
||||
<div
|
||||
class="absolute inset-0 bg-blue-50 dark:bg-slate-800 pointer-events-none mb-32"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="absolute inset-0 bg-blue-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true">
|
||||
</div>
|
||||
<div class="relative max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
|
||||
<div class="mb-8 text-center">
|
||||
<p
|
||||
class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase"
|
||||
>
|
||||
<p class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase">
|
||||
Components
|
||||
</p>
|
||||
<h2
|
||||
class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4"
|
||||
>
|
||||
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4">
|
||||
Most used widgets
|
||||
</h2>
|
||||
<p
|
||||
class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400"
|
||||
>
|
||||
<p class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400">
|
||||
Provides frequently used components for building websites using
|
||||
Tailwind CSS
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 items-start my-12 dark:text-white"
|
||||
>
|
||||
<div
|
||||
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
|
||||
>
|
||||
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 items-start my-12 dark:text-white">
|
||||
{items.map(({ title, description, icon }) => (
|
||||
<div
|
||||
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800">
|
||||
<div class="flex items-center mb-4">
|
||||
<Icon name="flat-color-icons:home" class="w-12 h-12" />
|
||||
<Icon name={icon} class="w-12 h-12" />
|
||||
|
||||
<div class="ml-4 text-xl font-bold">Headers</div>
|
||||
<div class="ml-4 text-xl font-bold">{title}</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
|
||||
>
|
||||
<div class="flex items-center mb-4">
|
||||
<Icon name="flat-color-icons:faq" class="w-12 h-12" />
|
||||
|
||||
<div class="ml-4 text-xl font-bold">Footers</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
|
||||
>
|
||||
<div class="flex items-center mb-4">
|
||||
<Icon name="flat-color-icons:video-projector" class="w-12 h-12" />
|
||||
<div class="ml-4 text-xl font-bold">Features</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
|
||||
>
|
||||
<div class="flex items-center mb-4">
|
||||
<Icon name="flat-color-icons:in-transit" class="w-12 h-12" />
|
||||
|
||||
<div class="ml-4 text-xl font-bold">Call-to-Action</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
|
||||
>
|
||||
<div class="flex items-center mb-4">
|
||||
<Icon name="flat-color-icons:calculator" class="w-12 h-12" />
|
||||
<div class="ml-4 text-xl font-bold">Pricing</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
|
||||
>
|
||||
<div class="flex items-center mb-4">
|
||||
<Icon name="flat-color-icons:voice-presentation" class="w-12 h-12"
|
||||
/>
|
||||
<div class="ml-4 text-xl font-bold">Testimonial</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore.
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,31 +7,25 @@ const { page } = Astro.props;
|
||||
|
||||
<section class="px-4 sm:px-6 py-8 sm:py-16 lg:py-20 mx-auto max-w-3xl">
|
||||
<header>
|
||||
<h1
|
||||
class="text-center text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-8 md:mb-16"
|
||||
style="
|
||||
"
|
||||
>
|
||||
<h1 class="text-center text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-8 md:mb-16">
|
||||
News and step-by-step guides about
|
||||
<span
|
||||
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500"
|
||||
>AstroWind
|
||||
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500">AstroWind
|
||||
</span>
|
||||
</h1>
|
||||
</header>
|
||||
<ul>
|
||||
{
|
||||
page.data.map((post) => (
|
||||
<li class="mb-10 md:mb-16">
|
||||
<BlogListItem post={post} />
|
||||
</li>
|
||||
))
|
||||
page.data.map((post) => (
|
||||
<li class="mb-10 md:mb-16">
|
||||
<BlogListItem post={post} />
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
|
||||
{
|
||||
(page.url.prev || page.url.next) && (
|
||||
<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
|
||||
)
|
||||
(page.url.prev || page.url.next) && (
|
||||
<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
|
||||
)
|
||||
}
|
||||
</section>
|
||||
@ -1,36 +1,26 @@
|
||||
---
|
||||
import Picture from "~/components/core/Picture.astro";
|
||||
import { findImage } from "~/utils/findImage";
|
||||
import { getFormattedDate } from "~/utils/getFormatedDate";
|
||||
|
||||
const { post } = Astro.props;
|
||||
|
||||
const image = await findImage(post.image);
|
||||
---
|
||||
|
||||
<article
|
||||
class="max-w-md mx-auto md:max-w-none grid md:grid-cols-2 gap-6 md:gap-8"
|
||||
>
|
||||
<article class="max-w-md mx-auto md:max-w-none grid md:grid-cols-2 gap-6 md:gap-8">
|
||||
<a class="relative block group" href="#0">
|
||||
<div
|
||||
class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg"
|
||||
>
|
||||
<Picture
|
||||
src={image}
|
||||
class="absolute inset-0 w-full h-full object-cover mb-6 rounded shadow-lg"
|
||||
widths={[400, 768]}
|
||||
sizes="(max-width: 767px) 400px, 768px"
|
||||
alt={post.description}
|
||||
aspectRatio={1}
|
||||
/>
|
||||
class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg">
|
||||
<Picture src={image} class="absolute inset-0 w-full h-full object-cover mb-6 rounded shadow-lg" widths={[400,
|
||||
768]} sizes="(max-width: 767px) 400px, 768px" alt={post.description} aspectRatio={1} />
|
||||
</div>
|
||||
</a>
|
||||
<div>
|
||||
<header>
|
||||
<h2 class="text-xl sm:text-2xl font-bold leading-snug mb-2">
|
||||
<a
|
||||
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
|
||||
href={`/blog/${post.slug}`}
|
||||
>
|
||||
<a class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
|
||||
href={`/blog/${post.slug}`}>
|
||||
{post.title}
|
||||
</a>
|
||||
</h2>
|
||||
@ -41,15 +31,7 @@ const image = await findImage(post.image);
|
||||
<footer class="flex items-center mt-4">
|
||||
<div>
|
||||
<span class="text-gray-500 dark:text-slate-400">
|
||||
<time datetime={""}>
|
||||
{
|
||||
new Date(post.pubDate).toLocaleDateString("en-us", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
})
|
||||
}
|
||||
</time>
|
||||
<time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time>
|
||||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
import Picture from "~/components/core/Picture.astro";
|
||||
import { getFormattedDate } from "~/utils/getFormatedDate";
|
||||
|
||||
const { post } = Astro.props;
|
||||
---
|
||||
@ -8,38 +9,23 @@ const { post } = Astro.props;
|
||||
<article>
|
||||
<header>
|
||||
<p class="max-w-3xl mx-auto text-center">
|
||||
<time datetime={post.pubDate}>
|
||||
{
|
||||
new Date(post.pubDate).toLocaleDateString("en-us", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
})
|
||||
}
|
||||
</time> ~ {Math.ceil(post.readingTime)} min
|
||||
<time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time> ~ {Math.ceil(post.readingTime)} min
|
||||
</p>
|
||||
<h1
|
||||
class="px-4 sm:px-6 max-w-3xl mx-auto text-center text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-6 md:mb-8"
|
||||
>
|
||||
class="px-4 sm:px-6 max-w-3xl mx-auto text-center text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-6 md:mb-8">
|
||||
{post.title}
|
||||
</h1>
|
||||
|
||||
{
|
||||
post.image && (
|
||||
<Picture
|
||||
src={post.image}
|
||||
class="max-w-full lg:max-w-6xl mx-auto mt-4 mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
|
||||
widths={[400, 900]}
|
||||
sizes="(max-width: 900px) 400px, 900px"
|
||||
alt={post.description}
|
||||
aspectRatio="16:9"
|
||||
/>
|
||||
)
|
||||
post.image && (
|
||||
<Picture src={post.image}
|
||||
class="max-w-full lg:max-w-6xl mx-auto mt-4 mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700" widths={[400,
|
||||
900]} sizes="(max-width: 900px) 400px, 900px" alt={post.description} aspectRatio="16:9" />
|
||||
)
|
||||
}
|
||||
</header>
|
||||
<div
|
||||
class="container mx-auto px-4 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
|
||||
>
|
||||
class="container mx-auto px-4 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8">
|
||||
<Fragment set:html={post.body} />
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@ -2,15 +2,11 @@
|
||||
---
|
||||
|
||||
<section class="flex items-center h-full p-16">
|
||||
<div
|
||||
class="container flex flex-col items-center justify-center px-5 mx-auto my-8"
|
||||
>
|
||||
<div class="container flex flex-col items-center justify-center px-5 mx-auto my-8">
|
||||
<div class="max-w-md text-center">
|
||||
<h2 class="mb-8 font-bold text-9xl">
|
||||
<span class="sr-only">Error</span>
|
||||
<span
|
||||
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500"
|
||||
>404
|
||||
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500">404
|
||||
</span>
|
||||
</h2>
|
||||
<p class="text-3xl font-semibold md:text-3xl">
|
||||
@ -19,11 +15,9 @@
|
||||
<p class="mt-4 mb-8 text-lg text-gray-600 dark:text-slate-400">
|
||||
But dont worry, you can find plenty of other things on our homepage.
|
||||
</p>
|
||||
<a
|
||||
rel="noopener noreferrer"
|
||||
href="/"
|
||||
class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-800 ml-4"
|
||||
>Back to homepage
|
||||
<a rel="noopener noreferrer" href="/"
|
||||
class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-800 ml-4">Back to
|
||||
homepage
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
73
src/components/widgets/FAQs.astro
Normal file
73
src/components/widgets/FAQs.astro
Normal file
@ -0,0 +1,73 @@
|
||||
---
|
||||
import { Icon } from "astro-icon";
|
||||
const { } = Astro.props;
|
||||
|
||||
const items = [
|
||||
[
|
||||
{
|
||||
question: "What do I need to start?",
|
||||
answer: `Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds.
|
||||
|
||||
Many say exploration is part of our destiny, but it’s actually our duty to future generations.`,
|
||||
},
|
||||
{
|
||||
question: "How to install the Astro + Tailwind CSS template?",
|
||||
answer: `Well, the way they make shows is, they make one show. That show's called a pilot.
|
||||
|
||||
Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.`,
|
||||
},
|
||||
{
|
||||
question: "What's something that you completely don't understand?",
|
||||
answer: `A flower in my garden, a mystery in my panties. Heart attack never stopped old Big Bear. I didn't even know we were calling him Big Bear.`,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
question: "What's an example of when you changed your mind?",
|
||||
answer: `Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless in a world of criminals who operate above the law. Here he comes Here comes Speed Racer. He's a demon on wheels.`,
|
||||
},
|
||||
{
|
||||
question: "What is something that you would really like to try again?",
|
||||
answer: `A business big enough that it could be listed on the NASDAQ goes belly up. Disappears!
|
||||
|
||||
It ceases to exist without me. No, you clearly don't know who you're talking to, so let me clue you in.`,
|
||||
},
|
||||
{
|
||||
question:
|
||||
"If you could only ask one question to each person you meet, what would that question be?",
|
||||
answer: `This is not about revenge. This is about justice. A lot of things can change in twelve years, Admiral. Well, that's certainly good to know. About four years. I got tired of hearing how young I looked.`,
|
||||
},
|
||||
],
|
||||
];
|
||||
---
|
||||
|
||||
<div class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
|
||||
<div class="max-w-xl sm:mx-auto lg:max-w-2xl">
|
||||
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
|
||||
<h2 class="max-w-lg mb-4 font-sans text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-screen-xl sm:mx-auto">
|
||||
<div class="grid grid-cols-1 gap-x-8 gap-y-8 lg:gap-x-16 md:grid-cols-2">
|
||||
{
|
||||
items.map((subitems) => (
|
||||
<div class="space-y-8">
|
||||
{subitems.map(({ question, answer }) => (
|
||||
<div>
|
||||
<p class="mb-4 text-xl font-bold">
|
||||
<Icon name="tabler:arrow-down-right" class="w-7 h-7 text-blue-500 inline-block icon-bold" />
|
||||
{question}
|
||||
</p>
|
||||
{answer.split("\n\n").map((paragraph) => (
|
||||
<p class="text-gray-700 dark:text-gray-400 mb-2" set:html={paragraph} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,28 +1,22 @@
|
||||
---
|
||||
import { Icon } from "astro-icon";
|
||||
|
||||
const {} = Astro.props;
|
||||
const { } = Astro.props;
|
||||
---
|
||||
|
||||
<footer>
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div
|
||||
class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12 border-t border-gray-200 dark:border-slate-800"
|
||||
>
|
||||
<div class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12 border-t border-gray-200 dark:border-slate-800">
|
||||
<div class="col-span-12 lg:col-span-3">
|
||||
<div class="mb-2">
|
||||
<a class="inline-block font-bold text-xl" href="/">AstroWind</a>
|
||||
</div>
|
||||
<div class="text-sm text-gray-600">
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Terms
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
|
||||
href="#">Terms
|
||||
</a> ·
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Privacy Policy
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
|
||||
href="#">Privacy Policy
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -32,38 +26,28 @@ const {} = Astro.props;
|
||||
</div>
|
||||
<ul class="text-sm">
|
||||
<li class="mb-2">
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Web Studio
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Web Studio
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>DynamicBox Flex
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">DynamicBox Flex
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Programming Forms
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Programming Forms
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Integrations
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Integrations
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Command-line
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Command-line
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@ -74,38 +58,28 @@ const {} = Astro.props;
|
||||
</div>
|
||||
<ul class="text-sm">
|
||||
<li class="mb-2">
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Documentation
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Tutorials & Guides
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Tutorials & Guides
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Blog
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Blog
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Support Center
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Support Center
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Partners
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Partners
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@ -116,38 +90,28 @@ const {} = Astro.props;
|
||||
</div>
|
||||
<ul class="text-sm">
|
||||
<li class="mb-2">
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Home
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Home
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>About us
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">About us
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Company values
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Company values
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Pricing
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Pricing
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a
|
||||
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Privacy Policy
|
||||
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
|
||||
href="#">Privacy Policy
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@ -162,29 +126,17 @@ const {} = Astro.props;
|
||||
<form>
|
||||
<div class="flex flex-wrap mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block text-sm sr-only" for="newsletter"
|
||||
>Email
|
||||
<label class="block text-sm sr-only" for="newsletter">Email
|
||||
</label>
|
||||
<div class="relative flex items-center max-w-xs">
|
||||
<input
|
||||
id="newsletter"
|
||||
type="email"
|
||||
<input id="newsletter" type="email"
|
||||
class="form-input w-full text-gray-800 px-3 py-2 pr-12 text-sm border rounded-sm dark:bg-transparent dark:border-slate-600 dark:text-gray-400"
|
||||
placeholder="Your email"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
class="absolute inset-0 left-auto"
|
||||
aria-label="Subscribe"
|
||||
>
|
||||
<span
|
||||
class="absolute inset-0 right-auto w-px -ml-px my-2 bg-gray-300 dark:bg-slate-600"
|
||||
placeholder="Your email" />
|
||||
<button type="submit" class="absolute inset-0 left-auto" aria-label="Subscribe">
|
||||
<span class="absolute inset-0 right-auto w-px -ml-px my-2 bg-gray-300 dark:bg-slate-600"
|
||||
aria-hidden="true"></span>
|
||||
|
||||
<Icon
|
||||
name="tabler:arrow-right"
|
||||
class="w-5 h-5 text-blue-600 mx-3 flex-shrink-0"
|
||||
/>
|
||||
<Icon name="tabler:arrow-right" class="w-5 h-5 text-blue-600 mx-3 flex-shrink-0" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -195,51 +147,35 @@ const {} = Astro.props;
|
||||
<div class="md:flex md:items-center md:justify-between py-4 md:py-8">
|
||||
<ul class="flex mb-6 md:order-1 md:ml-4 md:mb-0">
|
||||
<li>
|
||||
<a
|
||||
class="flex justify-center items-center text-gray-600 hover:text-gray-700 dark:text-gray-400 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
|
||||
aria-label="Twitter"
|
||||
href="#"
|
||||
>
|
||||
<a class="flex justify-center items-center text-gray-600 hover:text-gray-700 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
|
||||
aria-label="Twitter" href="#">
|
||||
<Icon name="tabler:brand-twitter" class="w-5 h-5" />
|
||||
</a>
|
||||
</li>
|
||||
<li class="ml-4">
|
||||
<a
|
||||
class="flex justify-center items-center text-gray-600 hover:text-gray-700 dark:text-gray-400 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
|
||||
aria-label="Instagram"
|
||||
href="#"
|
||||
>
|
||||
<a class="flex justify-center items-center text-gray-600 hover:text-gray-700 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
|
||||
aria-label="Instagram" href="#">
|
||||
<Icon name="tabler:brand-instagram" class="w-5 h-5" />
|
||||
</a>
|
||||
</li>
|
||||
<li class="ml-4">
|
||||
<a
|
||||
class="flex justify-center items-center text-gray-600 hover:text-gray-700 dark:text-gray-400 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
|
||||
aria-label="Facebook"
|
||||
href="#"
|
||||
>
|
||||
<a class="flex justify-center items-center text-gray-600 hover:text-gray-700 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
|
||||
aria-label="Facebook" href="#">
|
||||
<Icon name="tabler:brand-facebook" class="w-5 h-5" />
|
||||
</a>
|
||||
</li>
|
||||
<li class="ml-4">
|
||||
<a
|
||||
class="flex justify-center items-center text-gray-600 hover:text-gray-700 dark:text-gray-400 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
|
||||
aria-label="Twitter"
|
||||
href="/rss.xml"
|
||||
>
|
||||
<a class="flex justify-center items-center text-gray-600 hover:text-gray-700 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
|
||||
aria-label="Twitter" href="/rss.xml">
|
||||
<Icon name="tabler:rss" class="w-5 h-5" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="text-sm text-gray-700 mr-4 dark:text-slate-400">
|
||||
<span
|
||||
class="w-5 h-5 md:w-6 md:h-6 md:-mt-0.5 bg-cover mr-1.5 float-left rounded-sm bg-[url(https://onwidget.com/favicon/favicon-32x32.png)]"
|
||||
>
|
||||
class="w-5 h-5 md:w-6 md:h-6 md:-mt-0.5 bg-cover mr-1.5 float-left rounded-sm bg-[url(https://onwidget.com/favicon/favicon-32x32.png)]">
|
||||
</span>
|
||||
Made by <a
|
||||
class="text-blue-600 hover:underline dark:text-gray-200"
|
||||
href="https://onwidget.com/"
|
||||
>
|
||||
Made by <a class="text-blue-600 hover:underline dark:text-gray-200" href="https://onwidget.com/">
|
||||
onWidget
|
||||
</a>. All rights reserved.
|
||||
</div>
|
||||
|
||||
@ -2,99 +2,69 @@
|
||||
import { Icon } from "astro-icon";
|
||||
import Logo from "~/components/widgets/Logo.astro";
|
||||
|
||||
const {} = Astro.props;
|
||||
const { } = Astro.props;
|
||||
---
|
||||
|
||||
<header
|
||||
class="sticky top-0 z-40 flex-none mx-auto w-full bg-white/90 dark:bg-slate-900/90 backdrop-blur-sm border-b dark:border-b-0"
|
||||
>
|
||||
<div
|
||||
class="py-3 px-3 mx-auto w-full md:flex md:justify-between max-w-6xl md:px-4"
|
||||
>
|
||||
class="sticky top-0 z-40 flex-none mx-auto w-full bg-white/90 dark:bg-slate-900/90 backdrop-blur-sm border-b dark:border-b-0">
|
||||
<div class="py-3 px-3 mx-auto w-full md:flex md:justify-between max-w-6xl md:px-4">
|
||||
<div class="flex justify-between">
|
||||
<a class="flex items-center" href="/">
|
||||
<Logo />
|
||||
</a>
|
||||
<div class="flex items-center md:hidden">
|
||||
<button
|
||||
type="button"
|
||||
<button type="button"
|
||||
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
|
||||
aria-label="Toggle between Dark and Light mode"
|
||||
data-aw-toggle-color-scheme
|
||||
>
|
||||
aria-label="Toggle between Dark and Light mode" data-aw-toggle-color-scheme>
|
||||
<Icon name="tabler:sun" class="w-6 h-6" />
|
||||
</button>
|
||||
<button
|
||||
class="ml-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center transition"
|
||||
aria-label="Toggle Menu"
|
||||
data-aw-toggle-menu
|
||||
>
|
||||
aria-label="Toggle Menu" data-aw-toggle-menu>
|
||||
<Icon name="tabler:menu" class="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<nav
|
||||
class="items-center w-full md:w-auto hidden md:flex text-gray-600 dark:text-slate-200"
|
||||
aria-label="Main navigation"
|
||||
id="menu"
|
||||
>
|
||||
<nav class="items-center w-full md:w-auto hidden md:flex text-gray-600 dark:text-slate-200"
|
||||
aria-label="Main navigation" id="menu">
|
||||
<ul
|
||||
class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center collapse w-full md:w-auto collapsed text-xl md:text-base"
|
||||
>
|
||||
class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center collapse w-full md:w-auto collapsed text-xl md:text-base">
|
||||
<li>
|
||||
<a
|
||||
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Pages
|
||||
<a class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href="#">Pages
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href="#"
|
||||
>Resources
|
||||
<a class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href="#">Resources
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href="/blog"
|
||||
>Blog
|
||||
<a class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href="/blog">Blog
|
||||
</a>
|
||||
</li>
|
||||
<li class="md:hidden">
|
||||
<a
|
||||
class="font-bold hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href="https://github.com/onwidget/astrowind"
|
||||
>
|
||||
<a class="font-bold hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href="https://github.com/onwidget/astrowind">
|
||||
Github
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
class="md:self-center flex items-center mb-4 md:mb-0 collapse collapsed"
|
||||
>
|
||||
<div class="md:self-center flex items-center mb-4 md:mb-0 collapse collapsed">
|
||||
<div class="hidden items-center mr-3 md:flex">
|
||||
<button
|
||||
type="button"
|
||||
<button type="button"
|
||||
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
|
||||
aria-label="Toggle between Dark and Light mode"
|
||||
data-aw-toggle-color-scheme
|
||||
>
|
||||
aria-label="Toggle between Dark and Light mode" data-aw-toggle-color-scheme>
|
||||
<Icon name="tabler:sun" class="w-5 h-5" />
|
||||
</button>
|
||||
<a
|
||||
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
|
||||
aria-label="RSS Feed"
|
||||
href="/rss.xml"
|
||||
>
|
||||
<a class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
|
||||
aria-label="RSS Feed" href="/rss.xml">
|
||||
<Icon name="tabler:rss" class="w-5 h-5" />
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/onwidget/astrowind"
|
||||
<a href="https://github.com/onwidget/astrowind"
|
||||
class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 mr-1"
|
||||
aria-label="Astrowind Github"
|
||||
>
|
||||
aria-label="Astrowind Github">
|
||||
<Icon name="tabler:brand-github" class="w-5 h-5" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -1,23 +1,19 @@
|
||||
---
|
||||
import Picture from "~/components/core/Picture.astro";
|
||||
const {} = Astro.props;
|
||||
const { } = Astro.props;
|
||||
---
|
||||
|
||||
<section>
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div class="py-12 md:py-20">
|
||||
<div class="text-center pb-12 md:pb-16">
|
||||
<h1
|
||||
class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4"
|
||||
>
|
||||
<h1 class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4">
|
||||
Your website with
|
||||
<span
|
||||
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500"
|
||||
>Astro
|
||||
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500">Astro
|
||||
</span> +
|
||||
<span
|
||||
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500 whitespace-nowrap"
|
||||
>Tailwind CSS
|
||||
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500 whitespace-nowrap">Tailwind
|
||||
CSS
|
||||
</span>
|
||||
</h1>
|
||||
<div class="max-w-3xl mx-auto">
|
||||
@ -29,19 +25,13 @@ const {} = Astro.props;
|
||||
</p>
|
||||
<div class="max-w-none flex justify-center">
|
||||
<div>
|
||||
<a
|
||||
class="btn text-white bg-blue-600 hover:bg-blue-800 mb-4 sm:mb-0 font-bold"
|
||||
href="https://github.com/onwidget/astrowind"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Get template
|
||||
<a class="btn text-white bg-blue-600 hover:bg-blue-800 mb-4 sm:mb-0 font-bold"
|
||||
href="https://github.com/onwidget/astrowind" target="_blank" rel="noopener">Get template
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-800 ml-4"
|
||||
href="#features"
|
||||
>Learn more
|
||||
<a class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-800 ml-4"
|
||||
href="#features">Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -50,14 +40,9 @@ const {} = Astro.props;
|
||||
<div>
|
||||
<div class="relative flex justify-center mb-8">
|
||||
<div class="flex flex-col justify-center">
|
||||
<Picture
|
||||
src={import("~/assets/images/hero.jpg")}
|
||||
class="mx-auto rounded-md shadow-lg bg-gray-400 dark:bg-slate-700"
|
||||
widths={[400, 768]}
|
||||
sizes=" (max-width: 767px) 400px, 768px"
|
||||
alt="Hero Image"
|
||||
aspectRatio="16:9"
|
||||
/>
|
||||
<Picture src={import("~/assets/images/hero.jpg")}
|
||||
class="mx-auto rounded-md shadow-lg bg-gray-400 dark:bg-slate-700" widths={[400, 768]}
|
||||
sizes=" (max-width: 767px) 400px, 768px" alt="Hero Image" aspectRatio="16:9" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,15 +1,12 @@
|
||||
---
|
||||
import Picture from "~/components/core/Picture.astro";
|
||||
const {} = Astro.props;
|
||||
const { } = Astro.props;
|
||||
---
|
||||
|
||||
<section class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
|
||||
<div class="flex flex-col mb-6 lg:justify-between lg:flex-row md:mb-8">
|
||||
<h2
|
||||
class="max-w-lg mb-2 font-sans text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none lg:mb-5 group"
|
||||
>
|
||||
<span class="inline-block mb-1 sm:mb-4"
|
||||
>Find out more content<br class="hidden md:block" /> in our Blog
|
||||
<h2 class="max-w-lg mb-2 font-sans text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none lg:mb-5 group">
|
||||
<span class="inline-block mb-1 sm:mb-4">Find out more content<br class="hidden md:block" /> in our Blog
|
||||
</span>
|
||||
</h2>
|
||||
<p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md">
|
||||
@ -22,18 +19,13 @@ const {} = Astro.props;
|
||||
|
||||
<div class="grid gap-6 row-gap-5 md:grid-cols-2 lg:grid-cols-4 -mb-6">
|
||||
<div class="mb-6 transition">
|
||||
<Picture
|
||||
src={import("~/assets/images/steps.jpg")}
|
||||
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
|
||||
widths={[400]}
|
||||
alt="Post 2 Image"
|
||||
aspectRatio="16:9"
|
||||
/>
|
||||
<Picture src={import("~/assets/images/steps.jpg")}
|
||||
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700" widths={[400]}
|
||||
alt="Post 2 Image" aspectRatio="16:9" />
|
||||
<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl">
|
||||
<a
|
||||
href="/blog/get-started-website-with-astro-tailwind-css"
|
||||
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
|
||||
>Get started with AstroWind to create a website using Astro and
|
||||
<a href="/blog/get-started-website-with-astro-tailwind-css"
|
||||
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200">Get
|
||||
started with AstroWind to create a website using Astro and
|
||||
Tailwind CSS
|
||||
</a>
|
||||
</h3>
|
||||
@ -45,18 +37,13 @@ const {} = Astro.props;
|
||||
</div>
|
||||
|
||||
<div class="mb-6 transition">
|
||||
<Picture
|
||||
src={import("~/assets/images/colors.jpg")}
|
||||
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
|
||||
widths={[400]}
|
||||
alt="Post 1 Image"
|
||||
aspectRatio="16:9"
|
||||
/>
|
||||
<Picture src={import("~/assets/images/colors.jpg")}
|
||||
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700" widths={[400]}
|
||||
alt="Post 1 Image" aspectRatio="16:9" />
|
||||
<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl">
|
||||
<a
|
||||
href="/blog/how-to-customize-astrowind-to-your-brand"
|
||||
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
|
||||
>How to customize AstroWind template to suit your branding
|
||||
<a href="/blog/how-to-customize-astrowind-to-your-brand"
|
||||
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200">How
|
||||
to customize AstroWind template to suit your branding
|
||||
</a>
|
||||
</h3>
|
||||
<p class="text-gray-700 dark:text-gray-400">
|
||||
@ -67,18 +54,13 @@ const {} = Astro.props;
|
||||
</div>
|
||||
|
||||
<div class="mb-6 transition">
|
||||
<Picture
|
||||
src={import("~/assets/images/tools.jpg")}
|
||||
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
|
||||
widths={[400]}
|
||||
alt="Post 3 Image"
|
||||
aspectRatio="16:9"
|
||||
/>
|
||||
<Picture src={import("~/assets/images/tools.jpg")}
|
||||
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700" widths={[400]}
|
||||
alt="Post 3 Image" aspectRatio="16:9" />
|
||||
<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl">
|
||||
<a
|
||||
href="/blog/useful-resources-to-create-websites"
|
||||
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
|
||||
>Useful tools and resources to create a professional website
|
||||
<a href="/blog/useful-resources-to-create-websites"
|
||||
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200">Useful
|
||||
tools and resources to create a professional website
|
||||
</a>
|
||||
</h3>
|
||||
<p class="text-gray-700 dark:text-gray-400">
|
||||
@ -89,18 +71,13 @@ const {} = Astro.props;
|
||||
</div>
|
||||
|
||||
<div class="mb-6 transition">
|
||||
<Picture
|
||||
src={import("~/assets/images/hero.jpg")}
|
||||
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
|
||||
widths={[400]}
|
||||
alt="Post 2 Image"
|
||||
aspectRatio="16:9"
|
||||
/>
|
||||
<Picture src={import("~/assets/images/hero.jpg")}
|
||||
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700" widths={[400]}
|
||||
alt="Post 2 Image" aspectRatio="16:9" />
|
||||
<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl">
|
||||
<a
|
||||
href="/blog/astrowind-template-in-depth"
|
||||
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
|
||||
>AstroWind template in depth
|
||||
<a href="/blog/astrowind-template-in-depth"
|
||||
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200">AstroWind
|
||||
template in depth
|
||||
</a>
|
||||
</h3>
|
||||
<p class="text-gray-700 dark:text-gray-400">
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
---
|
||||
---
|
||||
|
||||
<span
|
||||
class="self-center ml-2 text-2xl font-extrabold text-gray-900 whitespace-nowrap dark:text-white"
|
||||
>
|
||||
<span class="self-center ml-2 text-2xl font-extrabold text-gray-900 whitespace-nowrap dark:text-white">
|
||||
🚀 AstroWind
|
||||
</span>
|
||||
@ -4,43 +4,23 @@ const { prevUrl, nextUrl } = Astro.props;
|
||||
|
||||
<div class="container flex">
|
||||
<div class="flex flex-row mx-auto container justify-between">
|
||||
<a
|
||||
href={prevUrl}
|
||||
class={`btn font-medium text-gray-600 hover:text-gray-900 dark:hover:text-white shadow-none mr-2 ${
|
||||
!prevUrl ? "invisible" : ""
|
||||
}`}
|
||||
>
|
||||
<a href={prevUrl} class={`btn font-medium text-gray-600 hover:text-gray-900 dark:hover:text-white shadow-none mr-2
|
||||
${ !prevUrl ? "invisible" : "" }`}>
|
||||
<div class="flex flex-row align-middle">
|
||||
<svg
|
||||
class="w-5 mr-2"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
<svg class="w-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd"
|
||||
d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<p class="ml-2">Newer posts</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href={nextUrl}
|
||||
class={`btn font-medium text-gray-600 hover:text-gray-900 dark:hover:text-white shadow-none ${
|
||||
!nextUrl ? "invisible" : ""
|
||||
}`}
|
||||
>
|
||||
<a href={nextUrl} class={`btn font-medium text-gray-600 hover:text-gray-900 dark:hover:text-white shadow-none ${
|
||||
!nextUrl ? "invisible" : "" }`}>
|
||||
<div class="flex flex-row align-middle">
|
||||
<span class="mr-2">Older posts</span>
|
||||
<svg
|
||||
class="w-5 ml-2"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
<svg class="w-5 ml-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd"
|
||||
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
|
||||
@ -1,18 +1,14 @@
|
||||
---
|
||||
const {} = Astro.props;
|
||||
const { } = Astro.props;
|
||||
---
|
||||
|
||||
<div
|
||||
class="px-4 py-8 md:py-16 sm:px-6 mx-auto md:px-24 lg:px-8 lg:py-20 max-w-6xl"
|
||||
>
|
||||
<div class="px-4 py-8 md:py-16 sm:px-6 mx-auto md:px-24 lg:px-8 lg:py-20 max-w-6xl">
|
||||
<div class="grid grid-cols-2 row-gap-8 md:grid-cols-4">
|
||||
<div class="text-center md:border-r dark:md:border-slate-500 mb-10 md:mb-0">
|
||||
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-blue-500">
|
||||
132K
|
||||
</div>
|
||||
<p
|
||||
class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base"
|
||||
>
|
||||
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
|
||||
Downloads
|
||||
</p>
|
||||
</div>
|
||||
@ -20,9 +16,7 @@ const {} = Astro.props;
|
||||
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-blue-500">
|
||||
24.8K
|
||||
</div>
|
||||
<p
|
||||
class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base"
|
||||
>
|
||||
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
|
||||
Stars
|
||||
</p>
|
||||
</div>
|
||||
@ -30,9 +24,7 @@ const {} = Astro.props;
|
||||
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-blue-500">
|
||||
10.3K
|
||||
</div>
|
||||
<p
|
||||
class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base"
|
||||
>
|
||||
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
|
||||
Forks
|
||||
</p>
|
||||
</div>
|
||||
@ -40,9 +32,7 @@ const {} = Astro.props;
|
||||
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-blue-500">
|
||||
48.4K
|
||||
</div>
|
||||
<p
|
||||
class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base"
|
||||
>
|
||||
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
|
||||
Users
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
const {} = Astro.props;
|
||||
const { } = Astro.props;
|
||||
---
|
||||
|
||||
<section>
|
||||
@ -20,12 +20,8 @@ const {} = Astro.props;
|
||||
tincidunt vehicula. Fusce sit amet dui tellus.
|
||||
</p>
|
||||
<div class="w-full">
|
||||
<a
|
||||
class="btn bg-blue-600 hover:bg-blue-700 text-white font-bold"
|
||||
href="https://github.com/onwidget/astrowind"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<a class="btn bg-blue-600 hover:bg-blue-700 text-white font-bold"
|
||||
href="https://github.com/onwidget/astrowind" target="_blank" rel="noopener">
|
||||
Get template
|
||||
</a>
|
||||
</div>
|
||||
@ -36,8 +32,7 @@ const {} = Astro.props;
|
||||
<li class="flex md:-mx-4">
|
||||
<div class="pr-4 sm:pl-4">
|
||||
<span
|
||||
class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600"
|
||||
>
|
||||
class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600">
|
||||
1
|
||||
</span>
|
||||
</div>
|
||||
@ -55,8 +50,7 @@ const {} = Astro.props;
|
||||
<li class="flex md:-mx-4">
|
||||
<div class="pr-4 sm:pl-4">
|
||||
<span
|
||||
class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600"
|
||||
>
|
||||
class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600">
|
||||
2
|
||||
</span>
|
||||
</div>
|
||||
@ -72,8 +66,7 @@ const {} = Astro.props;
|
||||
<li class="flex md:-mx-4">
|
||||
<div class="pr-4 sm:pl-4">
|
||||
<span
|
||||
class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600"
|
||||
>
|
||||
class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600">
|
||||
3
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { Icon } from "astro-icon";
|
||||
import Picture from "~/components/core/Picture.astro";
|
||||
|
||||
const {} = Astro.props;
|
||||
const { } = Astro.props;
|
||||
---
|
||||
|
||||
<section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl">
|
||||
@ -11,13 +11,8 @@ const {} = Astro.props;
|
||||
<div class="flex">
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<div>
|
||||
<div
|
||||
class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
|
||||
>
|
||||
<Icon
|
||||
name="tabler:arrow-down"
|
||||
class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold"
|
||||
/>
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2">
|
||||
<Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
||||
@ -37,13 +32,8 @@ const {} = Astro.props;
|
||||
<div class="flex">
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<div>
|
||||
<div
|
||||
class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
|
||||
>
|
||||
<Icon
|
||||
name="tabler:arrow-down"
|
||||
class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold"
|
||||
/>
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2">
|
||||
<Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
||||
@ -62,13 +52,8 @@ const {} = Astro.props;
|
||||
<div class="flex">
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<div>
|
||||
<div
|
||||
class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
|
||||
>
|
||||
<Icon
|
||||
name="tabler:arrow-down"
|
||||
class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold"
|
||||
/>
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2">
|
||||
<Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
||||
@ -87,13 +72,8 @@ const {} = Astro.props;
|
||||
<div class="flex">
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<div>
|
||||
<div
|
||||
class="flex items-center justify-center w-10 h-10 rounded-full border-blue-600 border-2"
|
||||
>
|
||||
<Icon
|
||||
name="tabler:check"
|
||||
class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold"
|
||||
/>
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border-blue-600 border-2">
|
||||
<Icon name="tabler:check" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -108,12 +88,8 @@ const {} = Astro.props;
|
||||
<div class="relative">
|
||||
<Picture
|
||||
class="inset-0 object-cover object-top w-full rounded-md shadow-lg md:absolute md:h-full bg-gray-400 dark:bg-slate-700"
|
||||
src={import("~/assets/images/astronaut.jpg")}
|
||||
widths={[400, 768]}
|
||||
sizes="(max-width: 768px) 100vw, 432px"
|
||||
alt="Astronaut"
|
||||
aspectRatio="432:768"
|
||||
/>
|
||||
src={import("~/assets/images/astronaut.jpg")} widths={[400, 768]} sizes="(max-width: 768px) 100vw, 432px"
|
||||
alt="Astronaut" aspectRatio="432:768" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -1,60 +1,74 @@
|
||||
---
|
||||
const {} = Astro.props;
|
||||
const { } = Astro.props;
|
||||
|
||||
const items = [
|
||||
[
|
||||
{
|
||||
title: "Integration with Tailwind CSS",
|
||||
description:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
|
||||
},
|
||||
{
|
||||
title: "Ready-to-use Components",
|
||||
description:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
|
||||
},
|
||||
{
|
||||
title: "Best Practices",
|
||||
description:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
title: "Excelent Page Speed",
|
||||
description:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
|
||||
},
|
||||
{
|
||||
title: "Frequently updated",
|
||||
description:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
|
||||
},
|
||||
{
|
||||
title: "Open to new ideas and contributions",
|
||||
description:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
|
||||
},
|
||||
],
|
||||
];
|
||||
---
|
||||
|
||||
<section class="scroll-mt-16" id="features">
|
||||
<div
|
||||
class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20 bg-blue-50 dark:bg-slate-800"
|
||||
>
|
||||
<div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20 bg-blue-50 dark:bg-slate-800">
|
||||
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
|
||||
<p
|
||||
class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase"
|
||||
>
|
||||
<p class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase">
|
||||
Features
|
||||
</p>
|
||||
<h2
|
||||
class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4"
|
||||
>
|
||||
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4">
|
||||
What's interesting about <span
|
||||
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500 whitespace-nowrap"
|
||||
>AstroWind
|
||||
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500 whitespace-nowrap">AstroWind
|
||||
</span>
|
||||
</h2>
|
||||
<p
|
||||
class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400"
|
||||
>
|
||||
<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque rem aperiam, eaque ipsa quae.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid mx-auto space-y-6 md:grid-cols-2 md:space-y-0">
|
||||
{
|
||||
items.map((subitems) => (
|
||||
<div class="space-y-8 sm:px-8">
|
||||
{subitems.map(({ title, description }) => (
|
||||
<div class="flex flex-row max-w-md">
|
||||
<div class="mb-4 mr-4">
|
||||
<div
|
||||
class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500"
|
||||
>
|
||||
<svg
|
||||
class="w-12 h-12 p-0.5"
|
||||
viewBox="0 0 64 64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500">
|
||||
<svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<rect
|
||||
class="fill-current text-blue-600"
|
||||
width="64"
|
||||
height="64"
|
||||
rx="32"></rect>
|
||||
<rect class="fill-current text-blue-600" width="64" height="64" rx="32" />
|
||||
<g stroke-linecap="square" stroke-width="2">
|
||||
<path
|
||||
class="stroke-current text-white"
|
||||
d="M20.571 20.571h13.714v17.143H20.571z"
|
||||
>
|
||||
</path>
|
||||
<path
|
||||
class="stroke-current text-blue-300"
|
||||
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
|
||||
>
|
||||
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
|
||||
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
@ -63,219 +77,17 @@ const {} = Astro.props;
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mb-3 text-xl font-bold">
|
||||
Integration with Tailwind CSS
|
||||
{title}
|
||||
</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
|
||||
sagittis, quam nec venenatis lobortis, mi risus tempus nulla.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row max-w-md">
|
||||
<div class="mb-4 mr-4">
|
||||
<div
|
||||
class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500"
|
||||
>
|
||||
<svg
|
||||
class="w-12 h-12 p-0.5"
|
||||
viewBox="0 0 64 64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<rect
|
||||
class="fill-current text-blue-600"
|
||||
width="64"
|
||||
height="64"
|
||||
rx="32"></rect>
|
||||
<g stroke-linecap="square" stroke-width="2">
|
||||
<path
|
||||
class="stroke-current text-white"
|
||||
d="M20.571 20.571h13.714v17.143H20.571z"
|
||||
>
|
||||
</path>
|
||||
<path
|
||||
class="stroke-current text-blue-300"
|
||||
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mb-3 text-xl font-bold">Ready-to-use Components</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
|
||||
sagittis, quam nec venenatis lobortis, mi risus tempus nulla.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row max-w-md">
|
||||
<div class="mb-4 mr-4">
|
||||
<div
|
||||
class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500"
|
||||
>
|
||||
<svg
|
||||
class="w-12 h-12 p-0.5"
|
||||
viewBox="0 0 64 64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<rect
|
||||
class="fill-current text-blue-600"
|
||||
width="64"
|
||||
height="64"
|
||||
rx="32"></rect>
|
||||
<g stroke-linecap="square" stroke-width="2">
|
||||
<path
|
||||
class="stroke-current text-white"
|
||||
d="M20.571 20.571h13.714v17.143H20.571z"
|
||||
>
|
||||
</path>
|
||||
<path
|
||||
class="stroke-current text-blue-300"
|
||||
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mb-3 text-xl font-bold">Best Practices</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
|
||||
sagittis, quam nec venenatis lobortis, mi risus tempus nulla.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-8 sm:px-8">
|
||||
<div class="flex flex-row max-w-md">
|
||||
<div class="mb-4 mr-4">
|
||||
<div
|
||||
class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500"
|
||||
>
|
||||
<svg
|
||||
class="w-12 h-12 p-0.5"
|
||||
viewBox="0 0 64 64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<rect
|
||||
class="fill-current text-blue-600"
|
||||
width="64"
|
||||
height="64"
|
||||
rx="32"></rect>
|
||||
<g stroke-linecap="square" stroke-width="2">
|
||||
<path
|
||||
class="stroke-current text-white"
|
||||
d="M20.571 20.571h13.714v17.143H20.571z"
|
||||
>
|
||||
</path>
|
||||
<path
|
||||
class="stroke-current text-blue-300"
|
||||
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mb-3 text-xl font-bold">Excelent Page Speed</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
|
||||
sagittis, quam nec venenatis lobortis, mi risus tempus nulla.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row max-w-md">
|
||||
<div class="mb-4 mr-4">
|
||||
<div
|
||||
class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500"
|
||||
>
|
||||
<svg
|
||||
class="w-12 h-12 p-0.5"
|
||||
viewBox="0 0 64 64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<rect
|
||||
class="fill-current text-blue-600"
|
||||
width="64"
|
||||
height="64"
|
||||
rx="32"></rect>
|
||||
<g stroke-linecap="square" stroke-width="2">
|
||||
<path
|
||||
class="stroke-current text-white"
|
||||
d="M20.571 20.571h13.714v17.143H20.571z"
|
||||
>
|
||||
</path>
|
||||
<path
|
||||
class="stroke-current text-blue-300"
|
||||
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mb-3 text-xl font-bold">Frequently updated</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
|
||||
sagittis, quam nec venenatis lobortis, mi risus tempus nulla.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row max-w-md">
|
||||
<div class="mb-4 mr-4">
|
||||
<div
|
||||
class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500"
|
||||
>
|
||||
<svg
|
||||
class="w-12 h-12 p-0.5"
|
||||
viewBox="0 0 64 64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<rect
|
||||
class="fill-current text-blue-600"
|
||||
width="64"
|
||||
height="64"
|
||||
rx="32"></rect>
|
||||
<g stroke-linecap="square" stroke-width="2">
|
||||
<path
|
||||
class="stroke-current text-white"
|
||||
d="M20.571 20.571h13.714v17.143H20.571z"
|
||||
>
|
||||
</path>
|
||||
<path
|
||||
class="stroke-current text-blue-300"
|
||||
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mb-3 text-xl font-bold">
|
||||
Open to new ideas and contributions
|
||||
</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
|
||||
sagittis, quam nec venenatis lobortis, mi risus tempus nulla.
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -9,14 +9,14 @@ const { meta = {} } = Astro.props;
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="motion-safe:scroll-smooth 2xl:text-[24px]">
|
||||
<head>
|
||||
<MetaTags {...meta} />
|
||||
</head>
|
||||
|
||||
<body
|
||||
class="antialiased text-gray-900 dark:text-slate-300 tracking-tight bg-white dark:bg-slate-900"
|
||||
>
|
||||
<slot />
|
||||
<BasicScripts />
|
||||
</body>
|
||||
<head>
|
||||
<MetaTags {...meta} />
|
||||
</head>
|
||||
|
||||
<body class="antialiased text-gray-900 dark:text-slate-300 tracking-tight bg-white dark:bg-slate-900">
|
||||
<slot />
|
||||
<BasicScripts />
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -18,9 +18,8 @@ const { page } = Astro.props;
|
||||
|
||||
const currentPage = page.currentPage ?? 1;
|
||||
|
||||
const title = `Blog ${currentPage > 1 ? `— Page ${currentPage} ` : ""}— ${
|
||||
SITE.name
|
||||
}`;
|
||||
const title = `Blog ${currentPage > 1 ? `— Page ${currentPage} ` : ""}— ${SITE.name
|
||||
}`;
|
||||
const description = "News and step-by-step guides about AstroWind";
|
||||
const canonical = new URL(page.url.current, Astro.site);
|
||||
---
|
||||
|
||||
@ -24,14 +24,7 @@ const canonical = post.canonical || new URL(`blog/${post.slug}`, Astro.site);
|
||||
const image = await findImage(post.image);
|
||||
---
|
||||
|
||||
<Layout
|
||||
meta={{
|
||||
title,
|
||||
description,
|
||||
canonical,
|
||||
image,
|
||||
}}
|
||||
>
|
||||
<Layout meta={{ title, description, canonical, image, }}>
|
||||
<main>
|
||||
<BlogPost post={{ ...post, image }} />
|
||||
</main>
|
||||
|
||||
@ -7,7 +7,7 @@ import Hero from "~/components/widgets/Hero.astro";
|
||||
import BasicCTA from "~/components/widgets/BasicCTA.astro";
|
||||
import BasicFeatures from "~/components/widgets/BasicFeatures.astro";
|
||||
import StepsFeatures from "~/components/widgets/StepsFeatures.astro";
|
||||
import BasicFAQs from "~/components/widgets/BasicFAQs.astro";
|
||||
import FAQs from "~/components/widgets/FAQs.astro";
|
||||
import TwoColsFeatures from "~/components/widgets/TwoColsFeatures.astro";
|
||||
import StepsLeft from "~/components/widgets/StepsLeft.astro";
|
||||
import HighlightedPosts from "~/components/widgets/HighlightedPosts.astro";
|
||||
@ -27,7 +27,7 @@ const canonical = new URL("", Astro.site);
|
||||
<TwoColsFeatures />
|
||||
<StepsFeatures />
|
||||
<HighlightedPosts />
|
||||
<BasicFAQs />
|
||||
<FAQs />
|
||||
<Stats />
|
||||
<BasicCTA />
|
||||
</main>
|
||||
|
||||
8
src/utils/getFormatedDate.js
Normal file
8
src/utils/getFormatedDate.js
Normal file
@ -0,0 +1,8 @@
|
||||
export const getFormattedDate = (date) =>
|
||||
date
|
||||
? new Date(date).toLocaleDateString("en-us", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
})
|
||||
: "";
|
||||
Reference in New Issue
Block a user