mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix minimal detail

Browse Source
This commit is contained in:
prototypa
2023-01-08 15:05:18 -05:00
parent 99018fc284
commit b21275bc9e
3 changed files with 86 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/blog/HighlightedPosts.astro
View File

@ -9,7 +9,7 @@ export interface Props {
allPostsText?: string; allPostsText?: string;
allPostsLink?: string | URL; allPostsLink?: string | URL;
information?: string; information?: string;
postsIds: string[]; postIds: string[];
} }
const { const {
@ -17,10 +17,10 @@ const {
allPostsText = 'View all posts', allPostsText = 'View all posts',
allPostsLink = getBlogPermalink(), allPostsLink = getBlogPermalink(),
information = await Astro.slots.render('information'), information = await Astro.slots.render('information'),
postsIds = [], postIds = [],
} = Astro.props; } = Astro.props;
const posts = await findPostsByIds(postsIds); const posts = await findPostsByIds(postIds);
--- ---
<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">

86
src/components/widgets/Features.astro
View File

@ -1,61 +1,45 @@
--- ---
import { Icon } from 'astro-icon'; import { Icon } from 'astro-icon';
const items = [ interface Item {
[ title: string;
{ description: string;
title: 'Astro + Tailwind CSS Integration', icon?: string;
description: }
'A seamless integration between two great frameworks that offer high productivity, performance and versatility.',
icon: 'tabler:brand-tailwind', export interface Props {
}, title?: string;
{ subtitle?: string;
title: 'Ready-to-use Components', highlight?: string;
description: items: Array<Array<Item>>;
'Widgets made with Tailwind CSS ready to be used in Marketing Websites, SaaS, Blogs, Personal Profiles, Small Business...', }
icon: 'tabler:components',
}, const {
{ title = await Astro.slots.render('title'),
title: 'Best Practices', subtitle = await Astro.slots.render('subtitle'),
description: highlight,
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.', items = [],
icon: 'tabler:list-check', } = Astro.props;
},
],
[
{
title: 'Excellent Page Speed',
description:
'Having a good page speed impacts organic search ranking, improves user experience (UI/UX) and increase conversion rates.',
icon: 'tabler:rocket',
},
{
title: 'Search Engine Optimization (SEO)',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
icon: 'tabler:arrows-right-left',
},
{
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.',
icon: 'tabler:bulb',
},
],
];
--- ---
<section class="scroll-mt-16" id="features"> <section class="scroll-mt-16" id="features">
<div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20"> <div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20">
<div class="mb-10 md:mx-auto sm:text-center md:mb-12 max-w-3xl"> <div class="mb-10 md:mx-auto sm:text-center md:mb-12 max-w-3xl">
<p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase">Features</p> {highlight && <p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase" set:html={highlight} />}
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading"> {
What you get with <span class="whitespace-nowrap">AstroWind</span> title && (
</h2> <h2
<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400"> class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading"
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa set:html={title}
quae. />
</p> )
}
{
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 class="grid mx-auto space-y-6 md:grid-cols-2 md:space-y-0"> <div class="grid mx-auto space-y-6 md:grid-cols-2 md:space-y-0">
{ {
@ -70,7 +54,7 @@ const items = [
</div> </div>
<div> <div>
<h3 class="mb-3 text-xl font-bold">{title}</h3> <h3 class="mb-3 text-xl font-bold">{title}</h3>
<p class="text-gray-600 dark:text-slate-400">{description}</p> <p class="text-gray-600 dark:text-slate-400" set:html={description} />
</div> </div>
</div> </div>
))} ))}

55
src/pages/index.astro
View File

@ -21,7 +21,6 @@ const meta = {
--- ---
<Layout {meta}> <Layout {meta}>
<!-- Hero Widget -->
<Hero <Hero
callToAction1={{ text: 'Get template', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }} callToAction1={{ text: 'Get template', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
@ -45,7 +44,53 @@ const meta = {
<Note /> <Note />
<Features /> <Features
highlight="Features"
title="What you get with AstroWind"
subtitle="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa quae."
items={[
[
{
title: 'Astro + Tailwind CSS Integration',
description:
'A seamless integration between two great frameworks that offer high productivity, performance and versatility.',
icon: 'tabler:brand-tailwind',
},
{
title: 'Ready-to-use Components',
description:
'Widgets made with Tailwind CSS ready to be used in Marketing Websites, SaaS, Blogs, Personal Profiles, Small Business...',
icon: 'tabler:components',
},
{
title: 'Best Practices',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
icon: 'tabler:list-check',
},
],
[
{
title: 'Excellent Page Speed',
description:
'Having a good page speed impacts organic search ranking, improves user experience (UI/UX) and increase conversion rates.',
icon: 'tabler:rocket',
},
{
title: 'Search Engine Optimization (SEO)',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
icon: 'tabler:arrows-right-left',
},
{
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.',
icon: 'tabler:bulb',
},
],
]}
/>
<Steps /> <Steps />
@ -53,15 +98,13 @@ const meta = {
<Features3 /> <Features3 />
<!-- HighlightedPosts Widget -->
<HighlightedPosts <HighlightedPosts
title="Find out more content in our Blog" title="Find out more content in our Blog"
information={`The blog will be used to display AstroWind documentation. 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. 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. Astro is a very interesting technology. Thanks.
`} `}
postsIds={[ postIds={[
'get-started-website-with-astro-tailwind-css.md', 'get-started-website-with-astro-tailwind-css.md',
'how-to-customize-astrowind-to-your-brand.md', 'how-to-customize-astrowind-to-your-brand.md',
'useful-resources-to-create-websites.md', 'useful-resources-to-create-websites.md',
@ -69,8 +112,6 @@ const meta = {
]} ]}
/> />
<!-- FAQs Widget -->
<FAQs <FAQs
title="Frequently Asked Questions" title="Frequently Asked Questions"
items={[ items={[