Skip to content

Commit

Permalink
Add icon for external links and about page
Browse files Browse the repository at this point in the history
  • Loading branch information
@ddxv
ddxv committed Oct 20, 2023
1 parent 9547513 commit 715d0da
Show file tree
Hide file tree
Showing 7 changed files with 120 additions and 63 deletions.
16 changes: 15 additions & 1 deletion frontend/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 5 additions & 2 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,5 +34,8 @@
"typescript": "^5.0.0",
"vite": "^4.4.2"
},
"type": "module"
}
"type": "module",
"dependencies": {
"marked": "^9.1.2"
}
}
5 changes: 2 additions & 3 deletions frontend/src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
</script>

<!-- App Shell -->
<AppShell>
<AppShell regionPage="p-8">
<svelte:fragment slot="header">
<!-- App Bar -->
<AppBar>
Expand Down Expand Up @@ -57,7 +57,6 @@
</AppBar>
</svelte:fragment>

<!-- Page Route Content -->

<slot />
<!-- Page Route Content -->
</AppShell>
2 changes: 1 addition & 1 deletion frontend/src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
12 changes: 12 additions & 0 deletions frontend/src/routes/ExternalLinkSVG.svelte
View file
Original file line number Diff line number Diff line change
@@ -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>
17 changes: 17 additions & 0 deletions frontend/src/routes/about/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -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}
124 changes: 68 additions & 56 deletions frontend/src/routes/apps/[id]/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script>
import ExternalLinkSvg from '../../ExternalLinkSVG.svelte';
/** @type {import('../[id]/$types').PageData} */
export let data;
import Rating from '../../Rating.svelte';
Expand All @@ -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>
Expand Down

0 comments on commit 715d0da

Please sign in to comment.