From 715d0dadf9984ac2a5ab308f87ce45086ee970df Mon Sep 17 00:00:00 2001
From: james <james@bubbleye.com>
Date: Fri, 20 Oct 2023 17:52:14 +0800
Subject: [PATCH] Add icon for external links and about page

---
 frontend/package-lock.json                 |  16 ++-
 frontend/package.json                      |   7 +-
 frontend/src/routes/+layout.svelte         |   5 +-
 frontend/src/routes/+page.svelte           |   2 +-
 frontend/src/routes/ExternalLinkSVG.svelte |  12 ++
 frontend/src/routes/about/+page.svelte     |  17 +++
 frontend/src/routes/apps/[id]/+page.svelte | 124 +++++++++++----------
 7 files changed, 120 insertions(+), 63 deletions(-)
 create mode 100644 frontend/src/routes/ExternalLinkSVG.svelte
 create mode 100644 frontend/src/routes/about/+page.svelte

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d6e282c..8c754af 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -7,6 +7,9 @@
 		"": {
 			"name": "app-store-dash",
 			"version": "0.0.1",
+			"dependencies": {
+				"marked": "^9.1.2"
+			},
 			"devDependencies": {
 				"@skeletonlabs/skeleton": "^2.3.0",
 				"@skeletonlabs/tw-plugin": "^0.2.2",
@@ -2296,6 +2299,17 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/marked": {
+			"version": "9.1.2",
+			"resolved": "https://registry.npmjs.org/marked/-/marked-9.1.2.tgz",
+			"integrity": "sha512-qoKMJqK0w6vkLk8+KnKZAH6neUZSNaQqVZ/h2yZ9S7CbLuFHyS2viB0jnqcWF9UKjwsAbMrQtnQhdmdvOVOw9w==",
+			"bin": {
+				"marked": "bin/marked.js"
+			},
+			"engines": {
+				"node": ">= 16"
+			}
+		},
 		"node_modules/mdn-data": {
 			"version": "2.0.30",
 			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
@@ -3694,4 +3708,4 @@
 			}
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frontend/package.json b/frontend/package.json
index 3f7d3fa..fe959d7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -34,5 +34,8 @@
 		"typescript": "^5.0.0",
 		"vite": "^4.4.2"
 	},
-	"type": "module"
-}
\ No newline at end of file
+	"type": "module",
+	"dependencies": {
+		"marked": "^9.1.2"
+	}
+}
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index e9ff439..a53a585 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <!-- App Shell -->
-<AppShell>
+<AppShell regionPage="p-8">
 	<svelte:fragment slot="header">
 		<!-- App Bar -->
 		<AppBar>
@@ -57,7 +57,6 @@
 		</AppBar>
 	</svelte:fragment>
 
-	<!-- Page Route Content -->
-
 	<slot />
+	<!-- Page Route Content -->
 </AppShell>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 7b0e3f1..e708a05 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -50,7 +50,7 @@
 								<a href={`/apps/${app.store_id}`} style="text-decoration: none; color: inherit;">
 									<img src={app.icon_url_512} alt={app.name} class="app-icon" />
 									<div>{app.name}</div>
-									<Rating total={5} size={20} rating={app.rating} />
+									<Rating total={5} size={20} rating={app.rating} /> ({app.rating_count})
 								</a>
 							</div>
 						{/each}
diff --git a/frontend/src/routes/ExternalLinkSVG.svelte b/frontend/src/routes/ExternalLinkSVG.svelte
new file mode 100644
index 0000000..7e2437a
--- /dev/null
+++ b/frontend/src/routes/ExternalLinkSVG.svelte
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="1em" height="1em"
+	><path
+		d="M 40 10 C 38.896 10 38 10.896 38 12 C 38 13.104 38.896 14 40 14 L 47.171875 14 L 30.585938 30.585938 C 29.804938 31.366938 29.804938 32.633063 30.585938 33.414062 C 30.976938 33.805063 31.488 34 32 34 C 32.512 34 33.023063 33.805062 33.414062 33.414062 L 50 16.828125 L 50 24 C 50 25.104 50.896 26 52 26 C 53.104 26 54 25.104 54 24 L 54 12 C 54 10.896 53.104 10 52 10 L 40 10 z M 18 12 C 14.691 12 12 14.691 12 18 L 12 46 C 12 49.309 14.691 52 18 52 L 46 52 C 49.309 52 52 49.309 52 46 L 52 34 C 52 32.896 51.104 32 50 32 C 48.896 32 48 32.896 48 34 L 48 46 C 48 47.103 47.103 48 46 48 L 18 48 C 16.897 48 16 47.103 16 46 L 16 18 C 16 16.897 16.897 16 18 16 L 30 16 C 31.104 16 32 15.104 32 14 C 32 12.896 31.104 12 30 12 L 18 12 z"
+	/></svg
+>
+
+<style>
+	svg {
+		vertical-align: middle; /* Aligns the SVG vertically with the text */
+		/* margin-left: 5px; Provides some spacing between text and SVG */
+	}
+</style>
diff --git a/frontend/src/routes/about/+page.svelte b/frontend/src/routes/about/+page.svelte
new file mode 100644
index 0000000..7db9ff0
--- /dev/null
+++ b/frontend/src/routes/about/+page.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { marked } from 'marked';
+	const url = 'https://raw.githubusercontent.com/ddxv/app-store-dash/main/README.md';
+</script>
+
+<h1 class="h1">Thanks for checking out this project</h1>
+This is something I've been wasting my time on for quite awhile. I started this as something of a curiousity,
+then used this data for examining App Ads.txt files. All code for this data scraping, database management
+and different frontend dashboards is available on GitHub. If you have any questions, please feel free
+to reach out chat.
+<br />
+<br />
+
+<h2 class="h2">Github Readme</h2>
+{#await fetch(url).then((r) => r.text()) then text}
+	{@html marked(text)}
+{/await}
diff --git a/frontend/src/routes/apps/[id]/+page.svelte b/frontend/src/routes/apps/[id]/+page.svelte
index d9dff6e..35d6448 100644
--- a/frontend/src/routes/apps/[id]/+page.svelte
+++ b/frontend/src/routes/apps/[id]/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+	import ExternalLinkSvg from '../../ExternalLinkSVG.svelte';
 	/** @type {import('../[id]/$types').PageData} */
 	export let data;
 	import Rating from '../../Rating.svelte';
@@ -8,68 +9,79 @@
 <!-- <Navbar /> -->
 
 {#if data}
-	<div class="app-header">
-		{#if data.myapp.icon_url_512}
-			<img src={data.myapp.icon_url_512} alt={data.myapp.name} class="app-icon" />
-		{/if}
-		<div>
+	<div class="card p-8">
+		<div class="card-header">
 			<h1 class="h1">{data.myapp.name}</h1>
-			<Rating total={5} size={50} rating={data.myapp.rating} />
+			{#if data.myapp.icon_url_512}
+				<img src={data.myapp.icon_url_512} alt={data.myapp.name} class="app-icon" />
+			{/if}
+			<div>
+				<Rating total={5} size={50} rating={data.myapp.rating} />
+			</div>
 		</div>
-	</div>
-
-	<!-- If app_rating is another Svelte component -->
-	<!-- <AppRating app={data.myapp} /> -->
+		<!-- If app_rating is another Svelte component -->
+		<!-- <AppRating app={data.myapp} /> -->
 
-	<div class="important-info">
-		<p>Store: {data.myapp.store}</p>
-		<p>
-			Store Link: <a href={data.myapp.store_link} target="_blank" rel="noopener noreferrer"
-				>{data.myapp.store_link}</a
-			>
-		</p>
-		<p>Store ID: {data.myapp.store_id}</p>
-		{#if data.myapp.installs != 'N/A'}
-			<p><strong>Installs:</strong> {data.myapp.installs}</p>
-		{/if}
-		<p><strong>Rating:</strong> {data.myapp.rating}</p>
-		<p><strong>Ratings:</strong> {data.myapp.rating_count}</p>
-		<p><strong>Reviews:</strong> {data.myapp.review_count}</p>
-		{#if data.myapp.developer_id != 'N/A'}
-			Developer: <a href={`https://apps.apple.com/us/developer/-/id${data.myapp.developer_id}`}>
-				{data.myapp.developer_name}
-			</a>
-		{:else}
-			<p>Developer Name: {data.myapp.developer_name}</p>
-		{/if}
+		<div class="card-footer important-info">
+			<p>Store: {data.myapp.store}</p>
+			<span class="inline-flex items-baseline">
+				Store Link: <a
+					class="anchor inline-flex"
+					href={data.myapp.store_link}
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					{data.myapp.store_link}
+					<ExternalLinkSvg />
+				</a>
+			</span>
+			<p>Store ID: {data.myapp.store_id}</p>
+			{#if data.myapp.installs != 'N/A'}
+				<p><strong>Installs:</strong> {data.myapp.installs}</p>
+			{/if}
+			<p><strong>Rating:</strong> {data.myapp.rating}</p>
+			<p><strong>Ratings:</strong> {data.myapp.rating_count}</p>
+			<p><strong>Reviews:</strong> {data.myapp.review_count}</p>
+			{#if data.myapp.developer_id != 'N/A'}
+				Developer: <a
+					class="anchor inline-flex"
+					href={`https://apps.apple.com/us/developer/-/id${data.myapp.developer_id}`}
+				>
+					{data.myapp.developer_name}
+					<ExternalLinkSvg />
+				</a>
+			{:else}
+				<p>Developer Name: {data.myapp.developer_name}</p>
+			{/if}
 
-		<p>Developer ID: {data.myapp.developer_id}</p>
-		<p>Developer URL: {data.myapp.developer_url}</p>
-		<p>Store Last Crawled: {data.myapp.updated_at}</p>
-	</div>
-	<br />
+			<p>Developer ID: {data.myapp.developer_id}</p>
+			<p>Developer URL: {data.myapp.developer_url}</p>
+			<p>Store Last Crawled: {data.myapp.updated_at}</p>
+		</div>
+		<br />
 
-	<h2 class="h2">Additional Information</h2>
-	<div class="additional-info">
-		<p>Category: {data.myapp.category}</p>
-		<p>Free: {data.myapp.free}</p>
-		<p>Price: {data.myapp.price}</p>
-		<p>Size: {data.myapp.size || 'N/A'}</p>
-		<p>Minimum Android Version: {data.myapp.minimum_android || 'N/A'}</p>
-		<p>Developer Email: {data.myapp.developer_email || 'N/A'}</p>
-		<p>Content Rating: {data.myapp.content_rating || 'N/A'}</p>
-		<p>Ad Supported: {data.myapp.ad_supported || 'N/A'}</p>
-		<p>In-App Purchases: {data.myapp.in_app_purchases || 'N/A'}</p>
-		<p>Editor's Choice: {data.myapp.editors_choice || 'N/A'}</p>
-		<p>Last Crawl Result: {data.myapp.crawl_result}</p>
-		<p>First Released: {data.myapp.release_date}</p>
-		<p>Store Last Updated: {data.myapp.store_last_updated}</p>
-		<p>First Crawled: {data.myapp.created_at}</p>
-	</div>
+		<h2 class="h2">Additional Information</h2>
+		<div class="additional-info">
+			<p>Category: {data.myapp.category}</p>
+			<p>Free: {data.myapp.free}</p>
+			<p>Price: {data.myapp.price}</p>
+			<p>Size: {data.myapp.size || 'N/A'}</p>
+			<p>Minimum Android Version: {data.myapp.minimum_android || 'N/A'}</p>
+			<p>Developer Email: {data.myapp.developer_email || 'N/A'}</p>
+			<p>Content Rating: {data.myapp.content_rating || 'N/A'}</p>
+			<p>Ad Supported: {data.myapp.ad_supported || 'N/A'}</p>
+			<p>In-App Purchases: {data.myapp.in_app_purchases || 'N/A'}</p>
+			<p>Editor's Choice: {data.myapp.editors_choice || 'N/A'}</p>
+			<p>Last Crawl Result: {data.myapp.crawl_result}</p>
+			<p>First Released: {data.myapp.release_date}</p>
+			<p>Store Last Updated: {data.myapp.store_last_updated}</p>
+			<p>First Crawled: {data.myapp.created_at}</p>
+		</div>
 
-	<h2 class="h2">Additional Information</h2>
-	<div class="additional-info">
-		<!-- ... display additional information details -->
+		<h2 class="h2">Historical Information</h2>
+		<div class="additional-info">
+			<!-- ... display additional information details -->
+		</div>
 	</div>
 
 	<!-- <h2>Historical Information</h2>