From 99018fc284b6e719510682949585fd040065d7d8 Mon Sep 17 00:00:00 2001 From: prototypa Date: Sun, 8 Jan 2023 13:49:49 -0500 Subject: [PATCH] Update Hero, FAQs and HighlightedPosts to props and slots --- src/components/blog/HighlightedPosts.astro | 58 ++++++---- src/components/widgets/FAQs.astro | 93 +++++++--------- src/components/widgets/Hero.astro | 119 ++++++++++++++------- src/pages/index.astro | 89 ++++++++++++++- 4 files changed, 244 insertions(+), 115 deletions(-) diff --git a/src/components/blog/HighlightedPosts.astro b/src/components/blog/HighlightedPosts.astro index f365c6b..a8de544 100644 --- a/src/components/blog/HighlightedPosts.astro +++ b/src/components/blog/HighlightedPosts.astro @@ -4,31 +4,49 @@ import Grid from '~/components/blog/Grid.astro'; import { getBlogPermalink } from '~/utils/permalinks'; import { findPostsByIds } from '~/utils/blog'; -const ids = [ - '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', -]; -const posts = await findPostsByIds(ids); +export interface Props { + title?: string; + allPostsText?: string; + allPostsLink?: string | URL; + information?: string; + postsIds: string[]; +} + +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); ---
-

- Find out more content in our Blog - -

+
+ { + title && ( +

+ ) + } + { + allPostsText && allPostsLink && ( + + {allPostsText} » + + ) + } +

-

- 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. -

+ {information &&

}

diff --git a/src/components/widgets/FAQs.astro b/src/components/widgets/FAQs.astro index f4c1613..159ff74 100644 --- a/src/components/widgets/FAQs.astro +++ b/src/components/widgets/FAQs.astro @@ -1,70 +1,59 @@ --- import { Icon } from 'astro-icon'; -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. +interface Item { + question: string; + answer: string; +} - 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. +export interface Props { + title?: string; + subtitle?: string; + items: Array>; +} - 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.`, - }, - ], -]; +const { + title = await Astro.slots.render('title'), + subtitle = await Astro.slots.render('subtitle'), + items = [], +} = Astro.props; ---
-

- Frequently Asked Questions -

+ { + title && ( +

+ ) + } + { + subtitle && ( +

+ ) + }

{ - items.map((subitems) => ( -
- {subitems.map(({ question, answer }) => ( -
-

- - {question} -

- {answer.split('\n\n').map((paragraph) => ( -

- ))} -

- ))} -
- )) + items && + items.map((subitems) => ( +
+ {subitems.map(({ question, answer }) => ( +
+

+ + {question} +

+ {answer &&
} +
+ ))} +
+ )) }
diff --git a/src/components/widgets/Hero.astro b/src/components/widgets/Hero.astro index 19ea960..3547395 100644 --- a/src/components/widgets/Hero.astro +++ b/src/components/widgets/Hero.astro @@ -1,58 +1,97 @@ --- import { Icon } from 'astro-icon'; 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; ---
-

- Your website with - Astro + - Tailwind CSS -

+ { + title && ( +

+ ) + }
-

- AstroWind is a production ready template to start your new website using Astro + Tailwind CSS. It - has been designed following Best Practices, SEO, Accessibility, ... -

+ {subtitle &&

}

-
- - Get template - -
-
- Learn more -
+ { + callToAction1 && ( +
+ {typeof callToAction1 === 'string' ? ( + + ) : ( + + {callToAction1?.icon && <>{' '}} + {callToAction1?.text} + + )} +
+ ) + } + { + callToAction2 && ( +
+ {typeof callToAction2 === 'string' ? ( + + ) : ( + + {callToAction2?.icon && <>{' '}} + {callToAction2.text} + + )} +
+ ) + }

-
- -
+ { + image && ( +
+ {typeof image === 'string' ? ( + + ) : ( + + )} +
+ ) + }
diff --git a/src/pages/index.astro b/src/pages/index.astro index 823f01f..5df3e95 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -21,14 +21,97 @@ const meta = { --- - + + + + + Your website with Astro + Tailwind CSS + + + + AstroWind: Free template. Suitable for Startups, + Small Business, Sass Websites, Professional Portfolios, Marketing Websites, Landing Pages & Blogs. + + + + + + + - - + + + + + + + + + +