Fix apps images url

ARK-Builders · Nov 27, 2024 · 56ca54b · 56ca54b
1 parent b60b0a3
commit 56ca54b
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 12 deletions.
diff --git a/src/lib/components/AppMenus.svelte b/src/lib/components/AppMenus.svelte
@@ -20,9 +20,9 @@
 	</a>
 	<div
 		id="apps-menu"
-		class="absolute left-16 top-10 grid w-96 grid-cols-2 rounded-xl border border-gray-300 bg-white p-4"
+		class="absolute left-16 top-10 grid w-96 grid-cols-2 rounded-xl border border-gray-300 bg-white p-2"
 	>
-		<div class="flex w-44 flex-col gap-2">
+		<div class="flex w-full flex-col gap-2">
 			{#each currentApps.slice(0, 1) as menu}
 				<MenuItem
 					url={link.href}
@@ -32,7 +32,7 @@
 				/>
 			{/each}
 		</div>
-		<div class="flex w-40 flex-col gap-2">
+		<div class="flex w-full flex-col gap-2">
 			{#each currentApps.slice(1) as menu}
 				<MenuItem
 					url={link.href}

diff --git a/src/lib/components/RenderMarkdown.svelte b/src/lib/components/RenderMarkdown.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { base } from '$app/paths'
 
-	export let content = ''
+	export let content
 
 	function transformImagePaths(htmlContent: string) {
 		return htmlContent.replace(/(<img[^>]+src=")([^"]+)(")/gi, (match, prefix, src, suffix) => {

diff --git a/src/lib/components/layouts/Footer.svelte b/src/lib/components/layouts/Footer.svelte
@@ -30,7 +30,7 @@
 		</div>
 		<div class="flex w-full flex-1 auto-rows-auto grid-cols-3 flex-col gap-3 lg:grid">
 			<div>
-				<a href="{base}/apps" class="pb-2 text-xl font-semibold">Apps</a>
+				<a href="{base}/apps" class="footer-menu pb-2">Apps</a>
 				<table class="text-xl text-gray-400">
 					<tr>
 						<td>
@@ -53,11 +53,11 @@
 				</table>
 			</div>
 			<div class="flex flex-col gap-1">
-				<a href="{base}/contribute" class="text-xl font-semibold">Contribute</a>
-				<a href="{base}/framework" class="text-xl font-semibold">Framework</a>
+				<a href="{base}/contribute" class="footer-menu">Contribute</a>
+				<a href="{base}/framework" class="footer-menu">Framework</a>
 			</div>
 			<div>
-				<a href="{base}/blog" class="text-xl font-semibold">Blog</a>
+				<a href="{base}/blog" class="footer-menu">Blog</a>
 			</div>
 		</div>
 	</div>
@@ -67,4 +67,8 @@
 	tr td {
 		@apply py-1;
 	}
+
+	.footer-menu {
+		@apply text-xl font-semibold hover:underline;
+	}
 </style>
diff --git a/src/routes/apps/[slug]/+page.svelte b/src/routes/apps/[slug]/+page.svelte
@@ -2,12 +2,15 @@
 	import { base } from '$app/paths'
 	import Cta from '$lib/components/elements/CTA.svelte'
 	import Head from '$lib/components/layouts/Head.svelte'
+	import RenderMarkdown from '$lib/components/RenderMarkdown.svelte'
 	import Title from '$lib/components/Title.svelte'
 	import { appLogos } from '$utils/constants'
 	import Icon from '@iconify/svelte'
 
 	export let data
 
+	let hoverGithub = false
+
 	$: app = data.app
 </script>
 
@@ -32,15 +35,28 @@
 			<Cta text="View documentation" bgBlack />
 
 			<div class="flex w-fit items-center rounded-lg border border-arkGray bg-white pr-2">
-				<Cta target="_blank" text="View on Github" classes="px-2" url={app?.github} />
-				<Icon icon="pajamas:github" width="24px" />
+				<div class="flex items-center rounded-lg bg-white pr-2">
+					<Cta
+						on:hover={(e) => (hoverGithub = e.detail)}
+						target="_blank"
+						text="View on Github"
+						classes="px-2 !text-base lg:!text-xl"
+						url={app?.github}
+					/>
+					<Icon
+						class={hoverGithub ? 'text-arkOrange' : 'text-black'}
+						icon="pajamas:github"
+						width="24px"
+					/>
+				</div>
 			</div>
 		</div>
 	</div>
 
 	<div class="mx-auto flex w-full max-w-[50rem] flex-col gap-5">
-		<div class="prose dark:prose-dark w-full text-justify">
-			{@html app.content}
+		<div class="dark:prose-dark prose w-full text-justify">
+			<!-- {@html app.content} -->
+			<RenderMarkdown content={app.content} />
 		</div>
 
 		<h2 class="text-4xl font-bold">App Preview</h2>