Update Hero, FAQs and HighlightedPosts to props and slots
This commit is contained in:
prototypa
@ -4,31 +4,49 @@ import Grid from '~/components/blog/Grid.astro';
|
|||||||
import { getBlogPermalink } from '~/utils/permalinks';
|
import { getBlogPermalink } from '~/utils/permalinks';
|
||||||
import { findPostsByIds } from '~/utils/blog';
|
import { findPostsByIds } from '~/utils/blog';
|
||||||
|
|
||||||
const ids = [
|
export interface Props {
|
||||||
'get-started-website-with-astro-tailwind-css.md',
|
title?: string;
|
||||||
'how-to-customize-astrowind-to-your-brand.md',
|
allPostsText?: string;
|
||||||
'useful-resources-to-create-websites.md',
|
allPostsLink?: string | URL;
|
||||||
'astrowind-template-in-depth.md',
|
information?: string;
|
||||||
];
|
postsIds: string[];
|
||||||
const posts = await findPostsByIds(ids);
|
}
|
||||||
|
|
||||||
|
const {
|
||||||
|
title = await Astro.slots.render('title'),
|
||||||
|
allPostsText = 'View all posts',
|
||||||
|
allPostsLink = getBlogPermalink(),
|
||||||
|
information = await Astro.slots.render('information'),
|
||||||
|
postsIds = [],
|
||||||
|
} = Astro.props;
|
||||||
|
|
||||||
|
const posts = await findPostsByIds(postsIds);
|
||||||
---
|
---
|
||||||
|
|
||||||
<section class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
|
<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">
|
<div class="flex flex-col mb-6 lg:justify-between lg:flex-row md:mb-8">
|
||||||
<h2 class="max-w-lg mb-2 text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none lg:mb-5 group font-heading">
|
<div class="md:max-w-sm mb-2 lg:mb-5">
|
||||||
<span class="inline-block mb-1 sm:mb-4"
|
{
|
||||||
>Find out more content<br class="hidden md:block" /> in our <a
|
title && (
|
||||||
class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
|
<h2
|
||||||
href={getBlogPermalink()}>Blog</a
|
class="text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none group font-heading mb-1 sm:mb-2"
|
||||||
>
|
set:html={title}
|
||||||
</span>
|
/>
|
||||||
</h2>
|
)
|
||||||
|
}
|
||||||
|
{
|
||||||
|
allPostsText && allPostsLink && (
|
||||||
|
<a
|
||||||
|
class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
|
||||||
|
href={allPostsLink}
|
||||||
|
>
|
||||||
|
{allPostsText} »
|
||||||
|
</a>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
<p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md">
|
{information && <p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md" set:html={information} />}
|
||||||
The blog will be used to display AstroWind documentation. Each new article will be an important step that you will
|
|
||||||
need to know to be an expert in creating a website using Astro + Tailwind CSS The blog does not exist yet, but
|
|
||||||
very soon. Astro is a very interesting technology. Thanks.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Grid posts={posts} />
|
<Grid posts={posts} />
|
||||||
|
|||||||
@ -1,70 +1,59 @@
|
|||||||
---
|
---
|
||||||
import { Icon } from 'astro-icon';
|
import { Icon } from 'astro-icon';
|
||||||
|
|
||||||
const items = [
|
interface Item {
|
||||||
[
|
question: string;
|
||||||
{
|
answer: string;
|
||||||
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.`,
|
export interface Props {
|
||||||
},
|
title?: string;
|
||||||
{
|
subtitle?: string;
|
||||||
question: 'How to install the Astro + Tailwind CSS template?',
|
items: Array<Array<Item>>;
|
||||||
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.`,
|
const {
|
||||||
},
|
title = await Astro.slots.render('title'),
|
||||||
{
|
subtitle = await Astro.slots.render('subtitle'),
|
||||||
question: "What's something that you completely don't understand?",
|
items = [],
|
||||||
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.`,
|
} = Astro.props;
|
||||||
},
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{
|
|
||||||
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="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 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">
|
<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 text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto font-heading">
|
{
|
||||||
Frequently Asked Questions
|
title && (
|
||||||
</h2>
|
<h2
|
||||||
|
class="max-w-lg mb-4 text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto font-heading"
|
||||||
|
set:html={title}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
{
|
||||||
|
subtitle && (
|
||||||
|
<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
|
||||||
|
)
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="max-w-screen-xl sm:mx-auto">
|
<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">
|
<div class="grid grid-cols-1 gap-x-8 gap-y-8 lg:gap-x-16 md:grid-cols-2">
|
||||||
{
|
{
|
||||||
items.map((subitems) => (
|
items &&
|
||||||
<div class="space-y-8">
|
items.map((subitems) => (
|
||||||
{subitems.map(({ question, answer }) => (
|
<div class="space-y-8">
|
||||||
<div>
|
{subitems.map(({ question, answer }) => (
|
||||||
<h3 class="mb-4 text-xl font-bold">
|
<div>
|
||||||
<Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary-500 inline-block" />
|
<h3 class="mb-4 text-xl font-bold">
|
||||||
{question}
|
<Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary-500 inline-block" />
|
||||||
</h3>
|
{question}
|
||||||
{answer.split('\n\n').map((paragraph) => (
|
</h3>
|
||||||
<p class="text-gray-700 dark:text-gray-400 mb-2" set:html={paragraph} />
|
{answer && <div class="text-gray-700 dark:text-gray-400" set:html={answer}></div>}
|
||||||
))}
|
</div>
|
||||||
</div>
|
))}
|
||||||
))}
|
</div>
|
||||||
</div>
|
))
|
||||||
))
|
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,58 +1,97 @@
|
|||||||
---
|
---
|
||||||
import { Icon } from 'astro-icon';
|
import { Icon } from 'astro-icon';
|
||||||
import { Picture } from '@astrojs/image/components';
|
import { Picture } from '@astrojs/image/components';
|
||||||
|
|
||||||
|
interface CallToAction {
|
||||||
|
text: string;
|
||||||
|
href: string;
|
||||||
|
icon?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Props {
|
||||||
|
title?: string;
|
||||||
|
subtitle?: string;
|
||||||
|
callToAction1?: string | CallToAction;
|
||||||
|
callToAction2?: string | CallToAction;
|
||||||
|
image?: string | any; // TODO: find HTMLElementProps
|
||||||
|
}
|
||||||
|
|
||||||
|
const {
|
||||||
|
title = await Astro.slots.render('title'),
|
||||||
|
subtitle = await Astro.slots.render('subtitle'),
|
||||||
|
callToAction1 = await Astro.slots.render('callToAction1'),
|
||||||
|
callToAction2 = await Astro.slots.render('callToAction2'),
|
||||||
|
image = await Astro.slots.render('image'),
|
||||||
|
} = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||||
<div class="py-12 md:py-20">
|
<div class="py-12 md:py-20">
|
||||||
<div class="text-center pb-10 md:pb-16 max-w-5xl mx-auto">
|
<div class="text-center pb-10 md:pb-16 max-w-5xl mx-auto">
|
||||||
<h1 class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4 font-heading">
|
{
|
||||||
Your website with
|
title && (
|
||||||
<span>Astro</span> +
|
<h1
|
||||||
<span class="sm:whitespace-nowrap">Tailwind CSS</span>
|
class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4 font-heading"
|
||||||
</h1>
|
set:html={title}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
<div class="max-w-3xl mx-auto">
|
<div class="max-w-3xl mx-auto">
|
||||||
<p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
|
{subtitle && <p class="text-xl text-gray-600 mb-8 dark:text-slate-400" set:html={subtitle} />}
|
||||||
<span class="font-semibold underline decoration-wavy decoration-1 decoration-primary-600 underline-offset-2"
|
|
||||||
>AstroWind</span
|
|
||||||
> is a production ready template to start your new website using <em>Astro</em> + <em>Tailwind CSS</em>. It
|
|
||||||
has been designed following Best Practices, SEO, Accessibility, <span class="inline sm:hidden">...</span
|
|
||||||
><span class="hidden sm:inline"
|
|
||||||
>Dark Mode, Great Page Speed, image optimization, sitemap generation and more.</span
|
|
||||||
>
|
|
||||||
</p>
|
|
||||||
<div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
|
<div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
|
||||||
<div class="flex w-full sm:w-auto">
|
{
|
||||||
<a
|
callToAction1 && (
|
||||||
class="btn btn-primary sm:mb-0 w-full"
|
<div class="flex w-full sm:w-auto">
|
||||||
href="https://github.com/onwidget/astrowind"
|
{typeof callToAction1 === 'string' ? (
|
||||||
target="_blank"
|
<Fragment set:html={callToAction1} />
|
||||||
rel="noopener"
|
) : (
|
||||||
>
|
<a class="btn btn-primary sm:mb-0 w-full" href={callToAction1?.href} target="_blank" rel="noopener">
|
||||||
<Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5" /> Get template
|
{callToAction1?.icon && <><Icon name={callToAction1.icon} class="w-5 h-5 mr-1 -ml-1.5" />{' '}</>}
|
||||||
</a>
|
{callToAction1?.text}
|
||||||
</div>
|
</a>
|
||||||
<div class="flex w-full sm:w-auto">
|
)}
|
||||||
<a class="btn w-full" href="#features">Learn more</a>
|
</div>
|
||||||
</div>
|
)
|
||||||
|
}
|
||||||
|
{
|
||||||
|
callToAction2 && (
|
||||||
|
<div class="flex w-full sm:w-auto">
|
||||||
|
{typeof callToAction2 === 'string' ? (
|
||||||
|
<Fragment set:html={callToAction2} />
|
||||||
|
) : (
|
||||||
|
<a class="btn w-full" href={callToAction2?.href}>
|
||||||
|
{callToAction2?.icon && <><Icon name={callToAction2.icon} class="w-5 h-5 mr-1 -ml-1.5" />{' '}</>}
|
||||||
|
{callToAction2.text}
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="relative m-auto max-w-4xl">
|
{
|
||||||
<Picture
|
image && (
|
||||||
src={import('~/assets/images/hero.jpg')}
|
<div class="relative m-auto max-w-4xl">
|
||||||
class="mx-auto rounded-md w-full"
|
{typeof image === 'string' ? (
|
||||||
widths={[400, 768, 1480]}
|
<Fragment set:html={image} />
|
||||||
sizes="(max-width: 767px) 400px, (max-width: 1479px) 768px, 1480px"
|
) : (
|
||||||
alt="Hero Image"
|
<Picture
|
||||||
aspectRatio={1480 / 833}
|
class="mx-auto rounded-md w-full"
|
||||||
loading="eager"
|
widths={[400, 768, 1480]}
|
||||||
width={1480}
|
sizes="(max-width: 767px) 400px, (max-width: 1479px) 768px, 1480px"
|
||||||
height={833}
|
aspectRatio={1480 / 833}
|
||||||
/>
|
loading="eager"
|
||||||
</div>
|
width={1480}
|
||||||
|
height={833}
|
||||||
|
{...image}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -21,14 +21,97 @@ const meta = {
|
|||||||
---
|
---
|
||||||
|
|
||||||
<Layout {meta}>
|
<Layout {meta}>
|
||||||
<Hero />
|
<!-- Hero Widget -->
|
||||||
|
|
||||||
|
<Hero
|
||||||
|
callToAction1={{ text: 'Get template', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
|
||||||
|
callToAction2={{ text: 'Learn more', href: '#features' }}
|
||||||
|
image={{ src: import('~/assets/images/hero.png'), alt: 'AstroWind Hero Image' }}
|
||||||
|
>
|
||||||
|
<Fragment slot="title">
|
||||||
|
Your website with <span>Astro</span> + <span class="sm:whitespace-nowrap">Tailwind CSS</span>
|
||||||
|
</Fragment>
|
||||||
|
<Fragment slot="subtitle">
|
||||||
|
<span class="hidden sm:inline">
|
||||||
|
<span class="font-semibold underline decoration-wavy decoration-1 decoration-primary-600 underline-offset-2"
|
||||||
|
>AstroWind</span
|
||||||
|
> is a free, production-ready template to start your new website using <em>Astro</em> + <em>Tailwind CSS</em
|
||||||
|
>.</span
|
||||||
|
>
|
||||||
|
<span class="block mb-1 sm:hidden font-bold text-primary-600">AstroWind: Free template.</span> Suitable for Startups,
|
||||||
|
Small Business, Sass Websites, Professional Portfolios, Marketing Websites, Landing Pages & Blogs.
|
||||||
|
</Fragment>
|
||||||
|
</Hero>
|
||||||
|
|
||||||
<Note />
|
<Note />
|
||||||
|
|
||||||
<Features />
|
<Features />
|
||||||
|
|
||||||
<Steps />
|
<Steps />
|
||||||
|
|
||||||
<Features2 />
|
<Features2 />
|
||||||
|
|
||||||
<Features3 />
|
<Features3 />
|
||||||
<HighlightedPosts />
|
|
||||||
<FAQs />
|
<!-- HighlightedPosts Widget -->
|
||||||
|
|
||||||
|
<HighlightedPosts
|
||||||
|
title="Find out more content in our Blog"
|
||||||
|
information={`The blog will be used to display AstroWind documentation.
|
||||||
|
Each new article will be an important step that you will need to know to be an expert in creating a website using Astro + Tailwind CSS.
|
||||||
|
Astro is a very interesting technology. Thanks.
|
||||||
|
`}
|
||||||
|
postsIds={[
|
||||||
|
'get-started-website-with-astro-tailwind-css.md',
|
||||||
|
'how-to-customize-astrowind-to-your-brand.md',
|
||||||
|
'useful-resources-to-create-websites.md',
|
||||||
|
'astrowind-template-in-depth.md',
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- FAQs Widget -->
|
||||||
|
|
||||||
|
<FAQs
|
||||||
|
title="Frequently Asked Questions"
|
||||||
|
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 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 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.",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
<Stats />
|
<Stats />
|
||||||
|
|
||||||
<CallToAction />
|
<CallToAction />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
Reference in New Issue
Block a user