From 2840bfffb37fb7ef5723a17b873072883e77c2bf Mon Sep 17 00:00:00 2001 From: widgeter Date: Thu, 24 Aug 2023 21:49:27 +0200 Subject: [PATCH 1/3] Include a Brands widget --- src/components/widgets/Brands.astro | 36 ++++++++++++++++++++ src/pages/homes/startup.astro | 51 ++++++++++++++++++++++++++++- src/types.d.ts | 2 +- 3 files changed, 87 insertions(+), 2 deletions(-) create mode 100644 src/components/widgets/Brands.astro diff --git a/src/components/widgets/Brands.astro b/src/components/widgets/Brands.astro new file mode 100644 index 0000000..6f576b4 --- /dev/null +++ b/src/components/widgets/Brands.astro @@ -0,0 +1,36 @@ +--- +import { Icon } from 'astro-icon/components'; +import type { Brands } from '~/types'; +import Headline from '~/components/ui/Headline.astro'; +import WidgetWrapper from '~/components/ui/WidgetWrapper.astro'; +const { + title = '', + subtitle = '', + tagline = '', + icons = [], + images = [], + id, + isDark = false, + classes = {}, + bg = await Astro.slots.render('bg'), +} = Astro.props as Brands; +--- + + + + +
+ {icons && icons.map((icon) => )} + { + images && + images.map( + (image) => + image.src && ( +
+ {image.alt +
+ ) + ) + } +
+ diff --git a/src/pages/homes/startup.astro b/src/pages/homes/startup.astro index 3162b0a..9dd26ad 100644 --- a/src/pages/homes/startup.astro +++ b/src/pages/homes/startup.astro @@ -9,6 +9,7 @@ import Features from '~/components/widgets/Features.astro'; import Stats from '~/components/widgets/Stats.astro'; import Features3 from '~/components/widgets/Features3.astro'; import FAQs from '~/components/widgets/FAQs.astro'; +import Brands from '~/components/widgets/Brands.astro'; const metadata = { title: 'Startup Landing Page', @@ -64,7 +65,8 @@ const metadata = { + + + + ; images?: Array; } From a9a4298eec79ffd8595127d07ec35c0ca139173f Mon Sep 17 00:00:00 2001 From: widgeter Date: Thu, 24 Aug 2023 22:01:40 +0200 Subject: [PATCH 2/3] Include a callToAction on Content widget --- src/components/widgets/Content.astro | 10 ++++++++++ src/pages/homes/personal.astro | 18 ++++++++++++++++++ src/types.d.ts | 1 + 3 files changed, 29 insertions(+) diff --git a/src/components/widgets/Content.astro b/src/components/widgets/Content.astro index ce9fb13..f802282 100644 --- a/src/components/widgets/Content.astro +++ b/src/components/widgets/Content.astro @@ -4,12 +4,14 @@ import type { Content } from '~/types'; import Headline from '../ui/Headline.astro'; import WidgetWrapper from '../ui/WidgetWrapper.astro'; import Image from '~/components/common/Image.astro'; +import CTA from '../ui/CTA.astro'; const { title = await Astro.slots.render('title'), subtitle = await Astro.slots.render('subtitle'), tagline, content = await Astro.slots.render('content'), + callToAction, items = [], image = await Astro.slots.render('image'), isReversed = false, @@ -43,6 +45,14 @@ const {
{content &&
} + { + callToAction && ( +
+ +
+ ) + } + { items && (
diff --git a/src/pages/homes/personal.astro b/src/pages/homes/personal.astro index b22b1cd..f552097 100644 --- a/src/pages/homes/personal.astro +++ b/src/pages/homes/personal.astro @@ -201,6 +201,12 @@ const metadata = { src: 'https://images.unsplash.com/photo-1658248165252-71e116af1b34?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=928&q=80', alt: 'Tech Design Image', }} + callToAction={{ + targetBlank: true, + text: 'Go to the project', + icon: 'tabler:chevron-right', + href: '#', + }} >

@@ -233,6 +239,12 @@ const metadata = { src: 'https://images.unsplash.com/photo-1619983081563-430f63602796?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80', alt: 'Art and Music Poster Image', }} + callToAction={{ + targetBlank: true, + text: 'Go to the project', + icon: 'tabler:chevron-right', + href: '#', + }} >

@@ -264,6 +276,12 @@ const metadata = { src: 'https://plus.unsplash.com/premium_photo-1683288295841-782fa47e4770?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80', alt: 'Fashion e-commerce Image', }} + callToAction={{ + targetBlank: true, + text: 'Go to the project', + icon: 'tabler:chevron-right', + href: '#', + }} >

diff --git a/src/types.d.ts b/src/types.d.ts index 92102cb..8a89204 100644 --- a/src/types.d.ts +++ b/src/types.d.ts @@ -273,6 +273,7 @@ export interface Content extends Headline, Widget { columns?: number; isReversed?: boolean; isAfterContent?: boolean; + callToAction?: CallToAction; } export interface Contact extends Headline, Form, Widget {} From b775a114735b0437152dc7e49a615e2c2eb6b720 Mon Sep 17 00:00:00 2001 From: widgeter Date: Thu, 24 Aug 2023 22:49:05 +0200 Subject: [PATCH 3/3] Include ItemGrid component on Content widget --- src/components/ui/ItemGrid.astro | 117 ++++++++++--------------- src/components/widgets/Content.astro | 35 ++++---- src/components/widgets/Features3.astro | 3 +- src/pages/homes/personal.astro | 19 +++- 4 files changed, 77 insertions(+), 97 deletions(-) diff --git a/src/components/ui/ItemGrid.astro b/src/components/ui/ItemGrid.astro index 7f023b2..8a6f6a6 100644 --- a/src/components/ui/ItemGrid.astro +++ b/src/components/ui/ItemGrid.astro @@ -1,23 +1,18 @@ --- -import { Icon } from "astro-icon/components"; -import { twMerge } from "tailwind-merge"; -import type { ItemGrid } from "~/types"; -import CTA from "./CTA.astro"; +import { twMerge } from 'tailwind-merge'; +import type { ItemGrid } from '~/types'; +import CTA from './CTA.astro'; +import { Icon } from 'astro-icon/components'; + +const { items = [], columns, defaultIcon = '', classes = {} } = Astro.props as ItemGrid; const { - items = [], - columns, - defaultIcon = "", - classes = {}, -} = Astro.props as ItemGrid; - -const { - container: containerClass = "", - // container: containerClass = "md:grid-cols-2", - panel: panelClass = "", - title: titleClass = "", - description: descriptionClass = "", - icon: defaultIconClass = "text-primary", + container: containerClass = '', + panel: panelClass = '', + title: titleClass = '', + description: descriptionClass = '', + icon: defaultIconClass = 'text-primary', + action: actionClass = '', } = classes; --- @@ -27,74 +22,50 @@ const { class={twMerge( `grid mx-auto gap-8 md:gap-y-12 ${ columns === 4 - ? "lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2" + ? 'lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2' : columns === 3 - ? "lg:grid-cols-3 sm:grid-cols-2" + ? 'lg:grid-cols-3 sm:grid-cols-2' : columns === 2 - ? "sm:grid-cols-2 " - : "" + ? 'sm:grid-cols-2 ' + : '' }`, containerClass )} > - {items.map( - ({ - title, - description, - icon, - callToAction, - classes: itemClasses = {}, - }) => ( -
-
( +
+
+
+ {(icon || defaultIcon) && ( + )} - > -
- {(icon || defaultIcon) && ( - - )} -
-
-

+
+ {title &&

{title}

} + {description && ( +

+ )} + {callToAction && ( +

- {title} -

- {description && ( -

- )} - {callToAction && ( -

- -
- )} -
+ +
+ )}
- ) - )} +
+ ))}
) } diff --git a/src/components/widgets/Content.astro b/src/components/widgets/Content.astro index f802282..12e54a7 100644 --- a/src/components/widgets/Content.astro +++ b/src/components/widgets/Content.astro @@ -1,10 +1,10 @@ --- -import { Icon } from 'astro-icon/components'; import type { Content } from '~/types'; import Headline from '../ui/Headline.astro'; import WidgetWrapper from '../ui/WidgetWrapper.astro'; import Image from '~/components/common/Image.astro'; import CTA from '../ui/CTA.astro'; +import ItemGrid from '../ui/ItemGrid.astro'; const { title = await Astro.slots.render('title'), @@ -13,6 +13,7 @@ const { content = await Astro.slots.render('content'), callToAction, items = [], + columns, image = await Astro.slots.render('image'), isReversed = false, isAfterContent = false, @@ -53,25 +54,19 @@ const { ) } - { - items && ( -
- {items.map(({ title: title2, description, icon }) => ( -
-
-
- -
-
-
- {title2 &&

{title2}

} - {description &&

} -

-
- ))} -
- ) - } +