mirror of
https://github.com/Lissy93/awesome-privacy.git
synced 2026-03-11 08:55:33 +00:00
Show iOS app data for a given listing
This commit is contained in:
Alicia Sykes
parent
444d2426f8
commit
7197fab9da
5 changed files with 267 additions and 7 deletions
|
|
@ -75,6 +75,9 @@
|
|||
website: solidIcons.faGlobe,
|
||||
sourceCode: solidIcons.faCodeBranch,
|
||||
viewReport: solidIcons.faShieldHalved,
|
||||
|
||||
//Misc
|
||||
ratingStar: solidIcons.faStar,
|
||||
};
|
||||
|
||||
export let iconName: string;
|
||||
|
|
|
|||
249
web/src/components/things/IosAppDetailedInfo.astro
Normal file
249
web/src/components/things/IosAppDetailedInfo.astro
Normal file
|
|
@ -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();
|
||||
|
||||
---
|
||||
|
||||
<div class="website-info-wrapper">
|
||||
<div class="left">
|
||||
<h4>App Info</h4>
|
||||
<p class="website-title">
|
||||
<img src={iosData.artworkUrl60} width="16" />
|
||||
{iosData.trackName}
|
||||
</p>
|
||||
<p class="website-description">{iosData.description}</p>
|
||||
|
||||
<h4>Rating</h4>
|
||||
<div class="star-rating">
|
||||
<div class="back-stars">
|
||||
<FontAwesome iconName="ratingStar" />
|
||||
<FontAwesome iconName="ratingStar" />
|
||||
<FontAwesome iconName="ratingStar" />
|
||||
<FontAwesome iconName="ratingStar" />
|
||||
<FontAwesome iconName="ratingStar" />
|
||||
<div class="front-stars" style={`width: ${makeRatingPercentage(iosData.averageUserRating)}%`}>
|
||||
<FontAwesome iconName="ratingStar" />
|
||||
<FontAwesome iconName="ratingStar" />
|
||||
<FontAwesome iconName="ratingStar" />
|
||||
<FontAwesome iconName="ratingStar" />
|
||||
<FontAwesome iconName="ratingStar" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="rating-description">
|
||||
Rated {roundRatings(iosData.averageUserRating)} out of 5 stars by {putCommaInNumber(iosData.userRatingCount)} users
|
||||
</p>
|
||||
|
||||
<h4>Version Info</h4>
|
||||
<ul class="list-table">
|
||||
<li title={iosData.releaseNotes}>
|
||||
<span class="lbl">Current Version</span>
|
||||
<span class="val">{iosData.version}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="lbl">Last Updated</span>
|
||||
<span class="val">{formatDate(iosData.currentVersionReleaseDate)}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="lbl">First Released</span>
|
||||
<span class="val">{formatDate(iosData.releaseDate)}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="lbl">Minimum iOS Version</span>
|
||||
<span class="val">{iosData.minimumOsVersion}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="lbl">Device Models Supported</span>
|
||||
<span class="val">{iosData.supportedDevices.length}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right">
|
||||
|
||||
<h4>App Details</h4>
|
||||
<ul class="list-table">
|
||||
<li>
|
||||
<span class="lbl">IPA Size</span>
|
||||
<span class="val">{bytesToMb(iosData.fileSizeBytes)} Mb</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="lbl">Price</span>
|
||||
<span class="val">{iosData.formattedPrice} ({iosData.currency})</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="lbl">Age Advisory</span>
|
||||
<span class="val">{iosData.contentAdvisoryRating}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="lbl">Supported Languages</span>
|
||||
<span class="val" title={iosData.languageCodesISO2A.join(', ')}>{iosData.languageCodesISO2A.length}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="lbl">Developer</span>
|
||||
<span class="val"><a href={iosData.artistViewUrl}>{iosData.sellerName}</a></span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="lbl">Bundle ID</span>
|
||||
<span class="val">{iosData.bundleId}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h4>Screenshots</h4>
|
||||
<ul class="screenshots">
|
||||
{iosData.screenshotUrls.map((url) => (
|
||||
<li>
|
||||
<img src={url} width="100" />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.website-info-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
.left, .right {
|
||||
width: calc(50% - 1rem);
|
||||
@media screen and (max-width: 768px){
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 1rem 0 0 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
:global(svg) {
|
||||
width: 1rem;
|
||||
}
|
||||
img {
|
||||
border-radius: var(--curve-sm);
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
img {
|
||||
border-radius: var(--curve-sm);
|
||||
}
|
||||
.list-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
&.list-table {
|
||||
font-size: 0.9rem;
|
||||
padding-left: 0;
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.1rem 0;
|
||||
.lbl {
|
||||
font-weight: 400;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid #5f53f440;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.website-title, .website-description {
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.8;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
border-left: 2px solid var(--accent-3);
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
.website-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
.website-description {
|
||||
font-style: italic;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
.explainer {
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.8;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.star-rating {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 1rem 0;
|
||||
:global(svg) {
|
||||
font-size: 2rem;
|
||||
gap: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.back-stars {
|
||||
display: flex;
|
||||
:global(svg) {
|
||||
color: #ddddd8;
|
||||
}
|
||||
.front-stars {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
display: flex;
|
||||
:global(svg) {
|
||||
color: #e8e800;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rating-description {
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.8;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.screenshots {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -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 {
|
|||
</a>
|
||||
}
|
||||
<a href={`/${slugify(categoryName)}/${slugify(sectionName)}/${slugify(service.name)}`}>
|
||||
<FontAwesome iconName="viewReport" /> View Report
|
||||
<FontAwesome iconName="viewReport" /> View Report ➔
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
|
@ -146,6 +142,8 @@ const {
|
|||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
margin: 0.5rem 0;
|
||||
width: calc(100% - 2rem);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = () => {
|
|||
<GitHubDetailedInfo gitHubData={githubData} repo={github} />
|
||||
</section>
|
||||
)}
|
||||
|
||||
{ websiteData && (
|
||||
<section>
|
||||
<h3>{name} Website</h3>
|
||||
<WebsiteDetailedInfo url={url} websiteInfo={websiteData} />
|
||||
</section>
|
||||
)}
|
||||
{ iosData && (
|
||||
<section>
|
||||
<h3>{name} iOS App</h3>
|
||||
<IosAppDetailedInfo url={url} iosData={iosData} />
|
||||
</section>
|
||||
)}
|
||||
{ dockerData && dockerData.found && (
|
||||
<section>
|
||||
<h3>{name} Docker</h3>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ export interface Service {
|
|||
openSource?: boolean;
|
||||
acceptsCrypto?: boolean;
|
||||
tosdrId?: string;
|
||||
iosApp?: string;
|
||||
}
|
||||
|
||||
export interface Section {
|
||||
|
|
|
|||
Loading…
Reference in a new issue