refactor view more+rss+json into component

crowdozer · Jan 13, 2024 · 9acab09 · 9acab09
1 parent b8aeed5
commit 9acab09
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 19 deletions.
diff --git a/src/components/Homepage/BlogLinks.astro b/src/components/Homepage/BlogLinks.astro
@@ -1,5 +1,6 @@
 ---
 import EmojiList from '../EmojiList.astro'
+import ViewMore from '../ViewMore.astro'
 
 const links: [string, string, Date][] = [
 	['Lorem ipsum dolor sit', '/blog/lorem', new Date()],
@@ -34,12 +35,5 @@ const links: [string, string, Date][] = [
 		}
 	</EmojiList>
 
-	<div class="flex flex-row justify-between">
-		<a href="/blog">view more</a>
-		<span>
-			<a href="/rss" class="text-green-500">rss</a>
-			{' • '}
-			<a href="/json" class="text-yellow-500">json</a>
-		</span>
-	</div>
+	<ViewMore urlbase="/blog" rss json text="view 14 more" />
 </div>
diff --git a/src/components/Homepage/EmploymentStatus.astro b/src/components/Homepage/EmploymentStatus.astro
@@ -21,9 +21,8 @@ const lfw = 0
 		)
 	}
 </div>
-<div class="flex flex-row gap-2">
-	<a href="/contact">contact anyway</a>
-</div>
+
+<a href="/contact">contact anyway</a>
 
 <script>
 	;(() => {

diff --git a/src/components/LayoutHelpers/SidebarChangelog.astro b/src/components/LayoutHelpers/SidebarChangelog.astro
@@ -1,9 +1,12 @@
 ---
 import EmojiList from '../EmojiList.astro'
+import ViewMore from '../ViewMore.astro'
 ---
 
 <EmojiList emoji="🔧">
-	<li><a href="/" class="inline text-ellipsis">2024 01 01</a></li>
-	<li><a href="/" class="inline text-ellipsis">2023 12 31</a></li>
-	<li><a href="/" class="inline text-ellipsis">2023 12 30</a></li>
+	<li><a href="/git/1" class="inline text-ellipsis">2024 01 01</a></li>
+	<li><a href="/git/2" class="inline text-ellipsis">2023 12 31</a></li>
+	<li><a href="/git/3" class="inline text-ellipsis">2023 12 30</a></li>
 </EmojiList>
+
+<ViewMore urlbase="/git" rss json text="view 12 more" />
diff --git a/src/components/LayoutHelpers/SidebarNews.astro b/src/components/LayoutHelpers/SidebarNews.astro
@@ -1,22 +1,27 @@
 ---
 import EmojiList from '../EmojiList.astro'
+import ViewMore from '../ViewMore.astro'
 ---
 
 <EmojiList emoji="🗞️">
 	<li class="line-clamp-1">
-		<a href="/" class="inline text-ellipsis">Lorem ipsum, dolor sit</a>
+		<a href="/news/1" class="inline text-ellipsis">Lorem ipsum, dolor sit</a>
 	</li>
 	<li class="line-clamp-1">
-		<a href="/" class="inline text-ellipsis">Dolore, quasi minus! Perferendis</a
+		<a href="/news/2" class="inline text-ellipsis"
+			>Dolore, quasi minus! Perferendis</a
 		>
 	</li>
 	<li class="line-clamp-1">
-		<a href="/" class="inline text-ellipsis"
+		<a href="/news/3" class="inline text-ellipsis"
 			>Quam magni nisi error culpa quasi</a
 		>
 	</li>
 	<li class="line-clamp-1">
-		<a href="/" class="inline text-ellipsis">Aspernatur illo similique cumque</a
+		<a href="/news/4" class="inline text-ellipsis"
+			>Aspernatur illo similique cumque</a
 		>
 	</li>
 </EmojiList>
+
+<ViewMore urlbase="/news" rss json text="view 4 more" />
diff --git a/src/components/ViewMore.astro b/src/components/ViewMore.astro
@@ -0,0 +1,32 @@
+---
+interface Props {
+	urlbase: string
+	text: string
+	rss?: boolean
+	json?: boolean
+}
+const { urlbase, text, rss = false, json = false } = Astro.props
+---
+
+<div class="flex flex-row justify-between">
+	<a href={`${urlbase}`} class="">{text}</a>
+	<span>
+		{
+			rss && (
+				<a href={`${urlbase}/rss`} class="text-green-500">
+					rss
+				</a>
+			)
+		}
+		{
+			json && (
+				<>
+					{' • '}
+					<a href={`${urlbase}/json`} class="text-yellow-500">
+						json
+					</a>
+				</>
+			)
+		}
+	</span>
+</div>
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -17,7 +17,7 @@ body {
 
 /* Links */
 a {
-	@apply inline-block underline transition-colors duration-100 ease-in-out;
+	@apply inline-block underline underline-offset-2 transition-colors duration-100 ease-in-out;
 	@apply visited:text-blue-300;
 	@apply hover:text-blue-500;
 }