From 7197fab9da11aacf5545f6d07cf2b49dae99d38f Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sat, 23 Mar 2024 23:27:02 +0000 Subject: [PATCH] Show iOS app data for a given listing --- web/src/components/form/FontAwesome.svelte | 3 + .../things/IosAppDetailedInfo.astro | 249 ++++++++++++++++++ web/src/components/things/ServiceCard.astro | 10 +- web/src/pages/[...listing].astro | 11 +- web/src/types/Service.ts | 1 + 5 files changed, 267 insertions(+), 7 deletions(-) create mode 100644 web/src/components/things/IosAppDetailedInfo.astro diff --git a/web/src/components/form/FontAwesome.svelte b/web/src/components/form/FontAwesome.svelte index 4d31895..b0e54a2 100644 --- a/web/src/components/form/FontAwesome.svelte +++ b/web/src/components/form/FontAwesome.svelte @@ -75,6 +75,9 @@ website: solidIcons.faGlobe, sourceCode: solidIcons.faCodeBranch, viewReport: solidIcons.faShieldHalved, + + //Misc + ratingStar: solidIcons.faStar, }; export let iconName: string; diff --git a/web/src/components/things/IosAppDetailedInfo.astro b/web/src/components/things/IosAppDetailedInfo.astro new file mode 100644 index 0000000..5f97645 --- /dev/null +++ b/web/src/components/things/IosAppDetailedInfo.astro @@ -0,0 +1,249 @@ +--- + +import type { IoSApiResponse } from '@utils/fetch-ios-info'; +import { formatDate, timeAgo } from '@utils/dates-n-stuff'; +import FontAwesome from "@components/form/FontAwesome.svelte" + + +interface Props { + iosData: IoSApiResponse; + url: string; +}; + +const { iosData, url } = Astro.props; + +const bytesToMb = (bytes: number) => (bytes / 1024 / 1024).toFixed(2); + +const makeRatingPercentage = (rating: number) => (rating / 5) * 100; + +const roundRatings = (rating: number) => Math.round(rating * 100) / 100; + +const putCommaInNumber = (num: number) => num.toLocaleString(); + +--- + +
+
+

App Info

+

+ + {iosData.trackName} +

+

{iosData.description}

+ +

Rating

+
+
+ + + + + +
+ + + + + +
+
+
+

+ Rated {roundRatings(iosData.averageUserRating)} out of 5 stars by {putCommaInNumber(iosData.userRatingCount)} users +

+ +

Version Info

+
    +
  • + Current Version + {iosData.version} +
    • +
  • + Last Updated + {formatDate(iosData.currentVersionReleaseDate)} +
    • +
  • + First Released + {formatDate(iosData.releaseDate)} +
    • +
  • + Minimum iOS Version + {iosData.minimumOsVersion} +
    • +
  • + Device Models Supported + {iosData.supportedDevices.length} +
    • +
+
+
+ +

App Details

+
    +
  • + IPA Size + {bytesToMb(iosData.fileSizeBytes)} Mb +
    • +
  • + Price + {iosData.formattedPrice} ({iosData.currency}) +
    • +
  • + Age Advisory + {iosData.contentAdvisoryRating} +
    • +
  • + Supported Languages + {iosData.languageCodesISO2A.length} +
    • +
  • + Developer + {iosData.sellerName} +
    • +
  • + Bundle ID + {iosData.bundleId} +
    • +
+ +

Screenshots

+
    + {iosData.screenshotUrls.map((url) => ( +
  • + +
    • + ))} +
+ +
+
+ + + diff --git a/web/src/components/things/ServiceCard.astro b/web/src/components/things/ServiceCard.astro index 97645d6..ce1c22f 100644 --- a/web/src/components/things/ServiceCard.astro +++ b/web/src/components/things/ServiceCard.astro @@ -1,14 +1,10 @@ --- -import Button from '@components/form/Button.astro'; -import { parseMarkdown, formatLink } from '@utils/parse-markdown'; +import { formatLink } from '@utils/parse-markdown'; import type { Service } from 'src/types/Service'; import FontAwesome from '@components/form/FontAwesome.svelte'; -import DeleteListing from '@components/things/DeleteListing.svelte'; import { slugify } from '@utils/fetch-data'; -import GitHubMetrics from '@components/things/ItemGitHubMetrics.astro'; - interface Props { service: Service; categoryName: string; @@ -77,7 +73,7 @@ const { } - View Report + View Report ➔ @@ -146,6 +142,8 @@ const { -webkit-box-orient: vertical; overflow: hidden; margin: 0.5rem 0; + width: calc(100% - 2rem); + overflow-x: hidden; } } diff --git a/web/src/pages/[...listing].astro b/web/src/pages/[...listing].astro index c7a338d..454f27e 100644 --- a/web/src/pages/[...listing].astro +++ b/web/src/pages/[...listing].astro @@ -7,6 +7,7 @@ import GitHubDetailedInfo from '@components/things/GitHubDetailedInfo.astro'; import PrivacyPolicyDetails from '@components/things/PrivacyPolicyDetails.astro'; import WebsiteDetailedInfo from '@components/things/WebsiteDetailedInfo.astro'; import DockerDetailedInfo from '@components/things/DockerDetailedInfo.astro'; +import IosAppDetailedInfo from '@components/things/IosAppDetailedInfo.astro'; import SocialShare from '@components/form/Social.astro'; import DataActions from '@components/things/DataActions.svelte'; import type { AwesomePrivacy, Section, Service } from '../types/Service'; @@ -15,6 +16,7 @@ import { fetchGitHubStats } from '@utils/fetch-repo-info'; import { fetchTosdrPrivacy } from '@utils/fetch-privacy-policy'; import { fetchWebsiteInfo } from '@utils/fetch-website-info'; import { fetchDockerData } from '@utils/fetch-docker-instructions'; +import { fetchIosInfo } from '@utils/fetch-ios-info'; import { parseMarkdown, formatLink } from '@utils/parse-markdown'; import { site } from '@utils/config'; import FontAwesome from '@components/form/FontAwesome.svelte'; @@ -32,6 +34,7 @@ const { url, github, tosdrId, + iosApp, icon, followWith, securityAudited, @@ -134,6 +137,7 @@ const ignoredSites = ['github.gom', 'wikipedia.']; // Fetch detailed data about the services GitHub repo, privacy policy and website const githubData = github ? await fetchGitHubStats(github) : null; const privacyData = tosdrId ? await fetchTosdrPrivacy(tosdrId) : null; +const iosData = iosApp ? await fetchIosInfo(iosApp) : null; const dockerData = await fetchDockerData(name); const websiteData = (url && !ignoredSites.some(ignoredSite => url.includes(ignoredSite))) ? await fetchWebsiteInfo(url) : null; @@ -243,13 +247,18 @@ const getApiEndpoint = () => { )} - { websiteData && (

{name} Website

)} + { iosData && ( +
+

{name} iOS App

+ +
+ )} { dockerData && dockerData.found && (

{name} Docker

diff --git a/web/src/types/Service.ts b/web/src/types/Service.ts index e681949..6b8ac4e 100644 --- a/web/src/types/Service.ts +++ b/web/src/types/Service.ts @@ -17,6 +17,7 @@ export interface Service { openSource?: boolean; acceptsCrypto?: boolean; tosdrId?: string; + iosApp?: string; } export interface Section {