Tags improvements (#22)

* Tags and URL
* Image optimizer
* a11y name
* Compress file to reduce size

Author: prokawsar

package-lock.json

@@ -30,13 +30,17 @@
 		"prettier-plugin-tailwindcss": "^0.6.5",
 		"rehype-slug": "^6.0.0",
 		"remark-github": "^12.0.0",
+		"sharp": "^0.33.5",
 		"svelte": "^4.2.7",
 		"svelte-carousel": "^1.0.25",
 		"svelte-check": "^3.6.0",
+		"svgo": "^3.3.2",
 		"tailwindcss": "^3.4.4",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
-		"vite": "^5.0.3"
+		"vite": "^5.0.3",
+		"vite-plugin-compression2": "^1.3.3",
+		"vite-plugin-image-optimizer": "^1.1.8"
 	},
 	"type": "module",
 	"dependencies": {

package.json

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { base } from '$app/paths'
 	import Image from '$lib/components/elements/Image.svelte'
+	import Tag from '$lib/components/elements/Tag.svelte'
 	import { config } from '$lib/config'
 	import type { Blog } from '$utils/constants'
-	import Tag from '$lib/components/elements/Tag.svelte'
 
 	export let post: Blog
 
@@ -20,20 +20,19 @@
 				<Image
 					src="{base}{post.image ??
 						'https://placehold.co/100x100/EEA050/white/?text=' + post.title}"
-					class="max-h-48 w-full rounded-t-xl object-cover object-top xl:max-h-52 {hover &&
-						'scale-105'}"
+					class="h-40 w-full rounded-t-xl object-cover object-top md:h-52 {hover && 'scale-105'}"
 				/>
 			</div>
 
-			<div class="flex h-60 flex-col gap-1 px-5">
+			<div class="flex h-60 flex-col gap-1 px-2 md:px-5">
 				<time dateTime={post.date ?? post.date} class="text-arkGray4">
 					{new Date(post.date).toLocaleDateString(config.locale, {
 						year: 'numeric',
 						month: 'long',
 						day: 'numeric',
 					})}
 				</time>
-				<p class="text-2xl font-extrabold {hover && 'underline'}">
+				<p class="text-lg font-extrabold md:text-2xl {hover && 'underline'}">
 					{post.title}
 				</p>
 				<div class="">

src/lib/components/blogs/BlogItem.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { base } from '$app/paths'
+	import FooterLogo from '$lib/assets/images/footer-logo.svelte'
 	import { communityList } from '$utils/constants'
 	import Icon from '@iconify/svelte'
-	import FooterLogo from '$lib/assets/images/footer-logo.svelte'
 </script>
 
 <footer class="bg-white px-5 pb-10 pt-40 xl:px-0">
@@ -14,6 +14,7 @@
 			<div class="grid w-fit grid-cols-4 flex-row gap-3 lg:flex">
 				{#each communityList as community}
 					<a
+						aria-label={community.name}
 						target="_blank"
 						href={community.url}
 						class="flex h-10 w-fit cursor-pointer flex-row items-center gap-4 hover:text-arkOrange"

src/lib/components/layouts/Footer.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import Cta from '$lib/components/elements/CTA.svelte'
-	import Icon from '@iconify/svelte'
-	import { communityList } from '$utils/constants'
 	import LeftImage from '$lib/assets/images/left.svelte'
-	import RightImage from '$lib/assets/images/right.svelte'
 	import MobLeftImage from '$lib/assets/images/mob-left.svelte'
 	import MobRightImage from '$lib/assets/images/mob-right.svelte'
+	import RightImage from '$lib/assets/images/right.svelte'
+	import Cta from '$lib/components/elements/CTA.svelte'
+	import { communityList } from '$utils/constants'
+	import Icon from '@iconify/svelte'
 
 	const contacts = communityList.filter((community) =>
 		['Telegram', 'Discord', 'X'].includes(community.name)
@@ -69,6 +69,7 @@
 					<div class="flex flex-row justify-center gap-5">
 						{#each contacts as community}
 							<a
+								aria-label={community.name}
 								class="flex h-10 w-10 items-center justify-center rounded-full bg-arkOrangeLight2"
 								href={community.url}
 								target="_blank"

src/lib/components/sections/Hero.svelte

@@ -1,30 +1,30 @@
 <script lang="ts">
 	import { base } from '$app/paths'
+	import BitcoinImage from '$lib/assets/images/support/bitcoin.svelte'
+	import BuyMeACoffeeImage from '$lib/assets/images/support/buycoffee.png'
+	import EthereumImage from '$lib/assets/images/support/ethereum.svelte'
+	import PatreonImage from '$lib/assets/images/support/patreon.png'
+	import SupportImage from '$lib/assets/images/support/support.svelte'
 	import Modal from '$lib/components/elements/Modal.svelte'
 	import { BTC_ADDRESS, ETH_ADDRESS } from '$utils/constants'
 	import Icon from '@iconify/svelte'
 	import QR from '@svelte-put/qr/img/QR.svelte'
-	import SupportImage from '$lib/assets/images/support/support.svelte'
-	import BitcoinImage from '$lib/assets/images/support/bitcoin.svelte'
-	import EthereumImage from '$lib/assets/images/support/ethereum.svelte'
-	import BuyMeACoffeeImage from '$lib/assets/images/support/buycoffee.png'
-	import PatreonImage from '$lib/assets/images/support/patreon.png'
 	import type { SvelteComponent } from 'svelte'
 
 	const supportImages: Record<string, string> = {
 		buycoffee: BuyMeACoffeeImage,
-		patreon: PatreonImage
+		patreon: PatreonImage,
 	}
 
 	const supportImagesCrypto: Record<string, typeof SvelteComponent> = {
 		bitcoin: BitcoinImage,
-		ethereum: EthereumImage
+		ethereum: EthereumImage,
 	}
 
 	let modalData = {
 		show: false,
 		type: '',
-		address: ''
+		address: '',
 	}
 	let copied = false
 	let timeout: ReturnType<typeof setTimeout> | null = null
@@ -36,21 +36,21 @@
 				modalData.show = true
 				modalData.type = 'bitcoin'
 				modalData.address = BTC_ADDRESS
-			}
+			},
 		},
 		{
 			name: 'ethereum',
 			onClick: () => {
 				modalData.show = true
 				modalData.type = 'etheruem'
 				modalData.address = ETH_ADDRESS
-			}
-		}
+			},
+		},
 	]
 
 	const supportLogos = [
 		{ name: 'buycoffee', url: 'https://buymeacoffee.com/arkbuilders' },
-		{ name: 'patreon', url: 'https://www.patreon.com/ARKBuilders' }
+		{ name: 'patreon', url: 'https://www.patreon.com/ARKBuilders' },
 	]
 
 	const copyAddress = (value: string) => {
@@ -83,6 +83,7 @@
 		<div class="my-5 grid grid-cols-2 gap-2 md:flex md:h-[40px] md:flex-row">
 			{#each supportLogosCrypto as logo}
 				<button
+					aria-label={logo.name}
 					class="h-11 w-[150px] overflow-hidden rounded-md"
 					on:click={(e) => {
 						if (['bitcoin', 'ethereum'].includes(logo.name)) e.preventDefault()

src/lib/components/sections/Support.svelte

@@ -1,10 +1,16 @@
-export const prerender = false
+export const prerender = true
 
-import type { Blog } from '$utils/constants'
-import { getEntries } from '$utils/entries'
+import type { Blog, Tag } from '$utils/constants'
+import { getEntries, getTags } from '$utils/entries'
 import { error } from '@sveltejs/kit'
 import { slug } from 'github-slugger'
 
+/** @type {import('./$types').EntryGenerator} */
+export function entries() {
+	const tags = (getTags() as Tag[]) || []
+	return tags.map((tag: Tag) => ({ tag: tag.slug }))
+}
+
 function slugsArray(tags: string[]) {
 	return tags?.map((t) => slug(t) || [])
 }

src/routes/tags/[tag]/+page.server.ts

@@ -3,7 +3,7 @@
 	import Head from '$lib/components/layouts/Head.svelte'
 
 	export let data
-	const { tag, posts } = data
+	$: ({ tag, posts } = data)
 </script>
 
 <Head title="Blog" />

src/routes/tags/[tag]/+page.svelte

@@ -163,6 +163,12 @@ export interface Issue {
 	languages: string[]
 }
 
+export interface Tag {
+	text: string
+	slug: string
+	count: number
+}
+
 export const appLogos: Record<string, ComponentType> = {
 	rate: RateLogo,
 	memo: MemoLogo,

src/utils/constants.ts

@@ -1,7 +1,7 @@
 import { browser } from '$app/environment'
 import { config, user } from '$lib/config'
+import type { Blog, Tag } from '$utils/constants'
 import { slug } from 'github-slugger'
-import type { Blog } from './constants'
 
 // we require some server-side APIs to parse all metadata
 if (browser) {
@@ -60,7 +60,7 @@ const getMetadata = (entryType: string, filepath: string, entry: any) => {
 			: null,
 
 		tag: entry.metadata?.type?.split(' ').shift().toLowerCase() || null,
-		tags: entry.metadata?.tags || []
+		tags: entry.metadata?.tags || [],
 
 		// whether or not this file is `my-post.md` or `my-post/index.md`
 		// (needed to do correct dynamic import in posts/[slug].svelte)
@@ -92,17 +92,11 @@ export const getEntries = (entryType: string, includeDraft: boolean = false) =>
 			.map((entry, index, allEntries) => ({
 				...entry,
 				next: allEntries[index - 1],
-				prev: allEntries[index + 1]
+				prev: allEntries[index + 1],
 			}))
 	)
 }
 
-interface Tag {
-	text: string
-	slug: string
-	count: number
-}
-
 export const getTags = () => {
 	const posts = getEntries('posts') as Blog[]
 	let tags = posts