feat: Implemented the blog cards

dyne · Nov 8, 2023 · d7d095d · d7d095d
1 parent f490dc9
commit d7d095d
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 33 deletions.
diff --git a/src/base.css b/src/base.css
@@ -112,10 +112,6 @@
 }
 
 @layer components {
-	a {
-		@apply text-random-300;
-	}
-
 	hr {
 		@apply h-px mt-1 mb-5 bg-black-900 border-0;
 	}

diff --git a/src/components/atoms/NewButton.astro b/src/components/atoms/NewButton.astro
@@ -21,7 +21,15 @@ const { color = 'random', size = 'medium', outline = false, icon, href, class: c
 		cls,
 	]}
 >
-	<slot />
+	{
+		href ? (
+			<a href={href}>
+				<slot />
+			</a>
+		) : (
+			<slot />
+		)
+	}
 	{
 		icon && (
 			<svg
@@ -35,9 +43,9 @@ const { color = 'random', size = 'medium', outline = false, icon, href, class: c
 					'pl-2',
 					{ 'text-black': color === 'neutral' },
 					{
-						'w-6': size === 'small',
-						'w-7': size === 'medium',
-						'w-8': size === 'large',
+						'w-5': size === 'small',
+						'w-6': size === 'medium',
+						'w-7': size === 'large',
 					},
 				]}
 			>

diff --git a/src/components/molecules/BlogCard.astro b/src/components/molecules/BlogCard.astro
@@ -0,0 +1,26 @@
+---
+import Heading from 'A/Heading.astro';
+import Card from 'M/Card.astro';
+import NewButton from '../atoms/NewButton.astro';
+
+interface Props {
+	title: string;
+	author: string;
+	href: string;
+	color?: Color;
+}
+
+const { author, title, color, href } = Astro.props;
+---
+
+<Card color={color}>
+	<div class="flex flex-col gap-3 md:gap-4 flex-1">
+		<Heading size="medium">{title}</Heading>
+		<hr />
+		<slot />
+		<p class="text-base">
+			by {author}
+		</p>
+		<NewButton size="small" color="black" outline={true} href={href}>Read on medium</NewButton>
+	</div>
+</Card>
diff --git a/src/components/molecules/Navbar.astro b/src/components/molecules/Navbar.astro
@@ -1,6 +1,6 @@
 ---
-import links from '~/content/menu/menu.json';
 import Text from '~/components/atoms/Text.astro';
+import links from '~/content/menu/menu.json';
 
 const pathname = new URL(Astro.request.url).pathname;
 ---

diff --git a/src/components/molecules/SoftwareCard.astro b/src/components/molecules/SoftwareCard.astro
@@ -1,5 +1,4 @@
 ---
-import Text from 'A/Text.astro';
 import Heading from 'A/Heading.astro';
 import Card from 'M/Card.astro';
 
@@ -29,7 +28,7 @@ const { picture, title, date, color } = Astro.props;
 				</p>
 			)
 		}
-		<div class="flex gap-4">
+		<div class="flex gap-4 flex-col md:flex-row">
 			<slot name="CTA" />
 			<slot name="CTA2" />
 		</div>

diff --git a/src/pages/899.astro b/src/pages/899.astro
@@ -6,6 +6,7 @@ import Text from 'A/Text.astro';
 import Navbar from 'M/Navbar.astro';
 import Card from 'M/Card.astro';
 import SoftwareCard from '~/components/molecules/SoftwareCard.astro';
+import BlogCard from '~/components/molecules/BlogCard.astro';
 
 const colors = ['random', 'orange', 'green', 'purple', 'black', 'neutral'];
 const sizes = ['small', 'medium', 'large'];
@@ -22,7 +23,7 @@ const hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900
 		</div>
 		<Heading>Buttons</Heading>
 		<hr />
-		<div class="grid md:grid-cols-3 gap-2">
+		<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-2">
 			{
 				colors.map((c) => {
 					return sizes.map((s) => {
@@ -103,36 +104,51 @@ const hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900
 		<div class="w-full items-center text-center bg-random-200 p-2">
 			<Heading size="large" class="p-10">Molecules</Heading>
 		</div>
+
 		<Heading>Navbar</Heading>
+		<hr />
 		<Navbar />
+
 		<Heading>Cards</Heading>
+		<hr />
 		<Card><Heading size="medium">Layout / random</Heading></Card>
 		<div class="flex flex-col lg:flex-row gap-6">
 			<Card color="green"><Heading size="medium">Layout / green</Heading></Card>
 			<Card color="orange"><Heading size="medium">Layout / orange</Heading></Card>
 			<Card color="purple"><Heading size="medium">Layout / purple</Heading></Card>
 		</div>
+
 		<Heading>Software Cards</Heading>
-		<SoftwareCard
-			title="Gitzone"
-			color="random"
-			date={new Date()}
-			picture={new URL('https://www.dyne.org/wp-content/uploads/2013/10/octocat_spider.png')}
-		>
-			<Text>
-				Gitzone is a git-based zone file management tool for BIND. Users can update their zones in a git repository,
-				then during a push the zone files are checked, updated & reloaded from git receive hooks.
-			</Text>
-			<NewButton slot="CTA" size="small" color="black" icon={true}>Download</NewButton>
-			<NewButton slot="CTA2" size="small" color="black" outline={true}>More...</NewButton>
-		</SoftwareCard>
-		<SoftwareCard title="No image sw" color="random" date={new Date()}>
-			<Text>
-				Gitzone is a git-based zone file management tool for BIND. Users can update their zones in a git repository,
-				then during a push the zone files are checked, updated & reloaded from git receive hooks.
-			</Text>
-			<NewButton slot="CTA" size="small" color="black" icon={true}>Download</NewButton>
-			<NewButton slot="CTA2" size="small" color="black" outline={true}>More...</NewButton>
-		</SoftwareCard>
+		<hr />
+		<div class="grid lg:grid-cols-2 justify-center gap-5">
+			<SoftwareCard
+				title="Gitzone"
+				color="random"
+				date={new Date()}
+				picture={new URL('https://www.dyne.org/wp-content/uploads/2013/10/octocat_spider.png')}
+			>
+				<Text>
+					Gitzone is a git-based zone file management tool for BIND. Users can update their zones in a git repository,
+					then during a push the zone files are checked, updated & reloaded from git receive hooks.
+				</Text>
+				<NewButton slot="CTA" size="small" color="black" icon={true}>Download</NewButton>
+				<NewButton slot="CTA2" size="small" color="black" outline={true}>Learn more...</NewButton>
+			</SoftwareCard>
+			<SoftwareCard title="No image sw" color="random" date={new Date()}>
+				<Text>
+					Gitzone is a git-based zone file management tool for BIND. Users can update their zones in a git repository,
+					then during a push the zone files are checked, updated & reloaded from git receive hooks.
+				</Text>
+				<NewButton slot="CTA" size="small" color="black" icon={true}>Download</NewButton>
+				<NewButton slot="CTA2" size="small" color="black" outline={true}>Learn more...</NewButton>
+			</SoftwareCard>
+		</div>
+
+		<Heading>Blog cards</Heading>
+		<hr />
+		<BlogCard title="Open Source at the core of Europe: the Cyber Resilience Act" author="Jaromil" href="/blog">
+			This week’s news is that The European Parliament has approved the European Cyber Resilience Act, and I believe it
+			to be good news for us free and open-source developers.
+		</BlogCard>
 	</div>
 </BaseLayout>
-Original file line number
+Diff line change
@@ Expand Up / @@ -112,10 +112,6 @@ @@
     }
     @layer components {
-    	a {
-    		@apply text-random-300;
-    	}
     	hr {
     		@apply h-px mt-1 mb-5 bg-black-900 border-0;
     	}
@@ Expand Down @@