From 7fef7d3edda6c5eb61dbcee3193631125d10a278 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Thu, 7 Mar 2024 16:52:56 +0000 Subject: [PATCH] Adds edit functionality --- web/src/components/Hero.astro | 2 +- web/src/components/form/Button.astro | 3 +- web/src/components/form/FontAwesome.svelte | 1 + .../components/things/AddNewService.svelte | 300 ++++++++++++++++++ web/src/components/things/DataActions.svelte | 3 + .../components/things/DeleteListing.svelte | 12 +- .../things/GitHubDetailedInfo.astro | 1 + web/src/components/things/ServiceList.astro | 6 +- .../things/WebsiteDetailedInfo.astro | 6 +- web/src/pages/[...listing].astro | 2 +- web/src/pages/about.astro | 2 +- web/src/pages/api/line-numbers.json.ts | 10 +- web/src/pages/edit.astro | 80 +++++ web/src/utils/data-src-delete-n-edit.ts | 52 +++ 14 files changed, 467 insertions(+), 13 deletions(-) create mode 100644 web/src/components/things/AddNewService.svelte create mode 100644 web/src/pages/edit.astro diff --git a/web/src/components/Hero.astro b/web/src/components/Hero.astro index f0d0c67..6ae58cb 100644 --- a/web/src/components/Hero.astro +++ b/web/src/components/Hero.astro @@ -5,7 +5,7 @@ import FontAwesome from "@components/form/FontAwesome.svelte"

Awesome Privacy

- Your guide to finding privacy-respecting alternatives to popular software and services. + Your guide to finding and comparing privacy-respecting alternatives to popular software and services.

diff --git a/web/src/components/form/Button.astro b/web/src/components/form/Button.astro index f0174cd..77d94f7 100644 --- a/web/src/components/form/Button.astro +++ b/web/src/components/form/Button.astro @@ -4,11 +4,12 @@ const { text, url, className, + title, } = Astro.props; --- -
+
{text}
diff --git a/web/src/components/form/FontAwesome.svelte b/web/src/components/form/FontAwesome.svelte index df7b230..cb9ba63 100644 --- a/web/src/components/form/FontAwesome.svelte +++ b/web/src/components/form/FontAwesome.svelte @@ -26,6 +26,7 @@ // Service actions delete: solidIcons.faTrash, edit: solidIcons.faPenToSquare, + add: solidIcons.faPlusHexagon, // Website Detailed Stats blacklistFound: solidIcons.faDoNotEnter, diff --git a/web/src/components/things/AddNewService.svelte b/web/src/components/things/AddNewService.svelte new file mode 100644 index 0000000..c8c1fbd --- /dev/null +++ b/web/src/components/things/AddNewService.svelte @@ -0,0 +1,300 @@ + + +

+ Before completing this form, you must ensure that the service you are adding aligns + with the Requirements for Awesome Privacy. +
+ You'll need a GitHub account in order to submit this form. +

+ +
+ +
+ + +

+ Choose the top-level category, which should align with + the one of these. +

+
+ + +
+ + +

Enter the name of the app, software or service

+
+ + +
+ + +

Enter the fully-qualified domain name of the homepage for this listing

+
+ + +
+ + +

Paste a URL to a square logo for the service. Dimensions must be no less than 64x64, and no more than 512x512 pixels

+
+ + +
+ + +

Please provide a description for this listing. Keep it factual and objective. Markdown is supported.

+
+ + +
+ + +

Share a link to where the project's source is located

+
+ + +
+ + +

+ Has the Privacy policy been documented by tosdr.org? + If so, please include the report reference below (this is a 3 or 4-digit numerical ID). + Skip section if not applicable. +

+
+ + +
+ + +

Is this service fully open source? Aka, can it be compiled from source by the user, or self-hosted?

+
+ + +
+ + +

Has this service been independently security audited by an accredited auditor?

+
+ + +
+ + +

If this is a hosted and paid for service, does it accept anonymous payment methods, including crypto (e.g., Monero)?

+
+ +
+

+ Finally, please provide any supporting material, including: +

+
    +
  • + A justification of why this app/service should be included in the list +
    • +
  • + Links to any published security audit, if they exist +
    • +
  • + Links to the services privacy policy, terms of service and other relevant + documents where applicable +
    • +
  • + Your affiliation with the service. + For transparency, you must disclose if you are associated + with them or any similar items in any way +
    • +
  • Links to relevant discussions, past issues/PRs related to this service
    • +
+ +
+ + + Open in GitHub Issues +
+ +
+

Below is the YAML content, which will be appended to the appropriate section + within awesome-privacy.yml + upon approval. +

+ 
{@html yamlText}
+

Your submission will need to be reviewed by a maintainer and the community before it can be merged.

+
+ + diff --git a/web/src/components/things/DataActions.svelte b/web/src/components/things/DataActions.svelte index 8eddd95..a2d0935 100644 --- a/web/src/components/things/DataActions.svelte +++ b/web/src/components/things/DataActions.svelte @@ -64,6 +64,9 @@ href={makeEditRequest(categoryName, sectionName, serviceName, yamlContent)}> Submit Edit to {serviceName} + + Add alternative +
{/if} diff --git a/web/src/components/things/DeleteListing.svelte b/web/src/components/things/DeleteListing.svelte index a00afe4..07ec713 100644 --- a/web/src/components/things/DeleteListing.svelte +++ b/web/src/components/things/DeleteListing.svelte @@ -1,7 +1,7 @@
+ href={editLink}> ): string { 'cpp': '#00599C', 'C++': '#00599C', 'Dockerfile': '#2496ED', + 'SCSS': '#CC6699', }; // Arrays to hold the data, labels, and colors diff --git a/web/src/components/things/ServiceList.astro b/web/src/components/things/ServiceList.astro index d97ef59..b516186 100644 --- a/web/src/components/things/ServiceList.astro +++ b/web/src/components/things/ServiceList.astro @@ -49,7 +49,7 @@ const {
- {services ? ( + {services && services.length > 0 ? (
    {services.map((service: Service) => (
  • @@ -126,7 +126,9 @@ const {

    )} - {buttonLink && (
diff --git a/web/src/components/things/WebsiteDetailedInfo.astro b/web/src/components/things/WebsiteDetailedInfo.astro index ec6fbb5..37f0ba4 100644 --- a/web/src/components/things/WebsiteDetailedInfo.astro +++ b/web/src/components/things/WebsiteDetailedInfo.astro @@ -26,7 +26,7 @@ const categoryLabels: {[key: string]: string} = { }; const siteCategories = Object.entries(websiteInfo.site_category) - .filter(([key, value]) => value) + .filter(([_key, value]) => value) .map(([key]) => categoryLabels[key]); const securityChecks = analyzeSecurityChecks(websiteInfo.security_checks); @@ -311,6 +311,10 @@ h4 { width: 180px; float: right; font-size: 1rem; + transform: scale(0.8); + opacity: 0.85; + transition: all 0.2s ease-in-out; + &:hover { transform: scale(0.85); opacity: 1; } :global(.button) { background: var(--accent-3); } diff --git a/web/src/pages/[...listing].astro b/web/src/pages/[...listing].astro index 8608bd2..9f97455 100644 --- a/web/src/pages/[...listing].astro +++ b/web/src/pages/[...listing].astro @@ -183,7 +183,7 @@ const getApiEndpoint = () => { { url && (
  • Web info: - {`web-check.xyz/results/${formatLink(url)}`} + {`web-check.xyz/results/${formatLink(url).split('/')[0]}`}
    • )} diff --git a/web/src/pages/about.astro b/web/src/pages/about.astro index 4723792..d005272 100644 --- a/web/src/pages/about.astro +++ b/web/src/pages/about.astro @@ -43,7 +43,7 @@ as Git makes it possible to maintain a full log of what was changed, when, by wh ### Augmention The data is augmented with some extra info, to add additional context to each service. -The aim of this is to give you a broader picture of each service, to help you make a more informed decision. +The aim of this is to give you a broader picture of each listing, to help you make a more informed decision. Currently, this extra data is pulled from: - **GitHub API** - To fetch info about each project's repository diff --git a/web/src/pages/api/line-numbers.json.ts b/web/src/pages/api/line-numbers.json.ts index e3917a5..e4a1304 100644 --- a/web/src/pages/api/line-numbers.json.ts +++ b/web/src/pages/api/line-numbers.json.ts @@ -1,7 +1,7 @@ import type { APIRoute } from 'astro'; import yaml from 'js-yaml'; -import type { AwesomePrivacy, Service } from '../../types/Service'; +import type { AwesomePrivacy, Service, Category } from '../../types/Service'; interface LineNumberRange { start: number; @@ -25,13 +25,15 @@ const awesomePrivacyYamlPath = 'https://raw.githubusercontent.com/Lissy93/awesom * Given a service object and an array of string lines from the raw YAML * Find the starting and ending line number for that service */ -const calculateServiceRange = (service: Service, yamlLines: string[]): LineNumberRange | null => { +const calculateServiceRange = (service: Service, category: Category, yamlLines: string[]): LineNumberRange | null => { const lookFor = `- name: ${service.name}`; - const start = yamlLines.findIndex(line => line.includes(lookFor)) + 1; + const categoryStart = yamlLines.findIndex(line => line.includes(category.name)); + const start = yamlLines.slice(categoryStart).findIndex(line => line.includes(lookFor)) + categoryStart + 1; if (start === -1) return null; const detectEnd = (line: string) => { return line.trim().length === 0 || line.startsWith(' - ') + || line.includes('- name:') || line.includes('notableMentions:') || line.includes('furtherInfo:') || line.includes('wordOfWarning:') @@ -61,7 +63,7 @@ const makeResults = (yamlObject: AwesomePrivacy, yamlLines: string[]): LineNumbe organizedData[category.name][section.name] = {}; section.services.forEach((service) => { organizedData[category.name][section.name][service.name] = { - lineNumbers: calculateServiceRange(service, yamlLines), + lineNumbers: calculateServiceRange(service, category, yamlLines), yaml: convertJsonIntoYaml(service), }; }); diff --git a/web/src/pages/edit.astro b/web/src/pages/edit.astro new file mode 100644 index 0000000..94df330 --- /dev/null +++ b/web/src/pages/edit.astro @@ -0,0 +1,80 @@ +--- + + +import Layout from '@layouts/Layout.astro'; +import AddNewService from '@components/things/AddNewService.svelte'; +import type { AwesomePrivacy, Section } from '../types/Service'; +import { fetchData, slugify } from '@utils/fetch-data'; +import FontAwesome from '@components/form/FontAwesome.svelte'; + +const categories = (await fetchData() as AwesomePrivacy)?.categories || []; + +--- + + +
    +

    About our Data

    +

    + All data on Awesome Privacy is community maintained via Git. +
    + You can make edits/additions/removals by editing the + awesome-privacy.yml file. + To learn more, see the about page. +

    +
    +
    +

    Submit an Addition

    + +
    + +
    +

    Submit a Removal Request

    +

    + You can submit a removal request by browsing to a given service's page, + and clicking the "Request Removal" button. + This will open a form where you can justify your reasoning, to get it + deleted from the awesome-privacy.yml file. +

    +
    + +
    +

    Edit a Listing

    +

    + Edits are welcome! All data is located in + awesome-privacy.yml. +
    + To modify an entry, navigate to it's page, scroll to the bottom, and click "Edit". + This will take you to directly to the relevant lines in the file, where you can make your changes. +

    +
    + +     + + diff --git a/web/src/utils/data-src-delete-n-edit.ts b/web/src/utils/data-src-delete-n-edit.ts index f63f9fa..ef349d6 100644 --- a/web/src/utils/data-src-delete-n-edit.ts +++ b/web/src/utils/data-src-delete-n-edit.ts @@ -24,6 +24,58 @@ export const makeEditRequest = (categoryName: string, sectionName: string, servi return `${issueCreate}${baseOptions}${removalData}`; }; +export const makeAdditionRequest = (formData: { + listingCategory: string; + serviceName: string; + serviceUrl: string; + serviceIcon: string; + serviceDescription: string; + serviceGithub: string; + serviceTosdrId: string; + serviceOpenSource: boolean; + serviceSecurityAudited: boolean; + serviceCrypto: boolean; + additionalInfo: string; +}, yamlText?: string) => { + + const userInfo = formData.additionalInfo.split('\n').map(line => `> ${line}`).join('\n'); + const additionalInfoText: string = `\n${userInfo}` + + `\n\n**YAML Content for Addition**\n\n\`\`\`yaml\n${yamlText || '# nothing yet'}\n\`\`\`\n` + + `\n\nThis ticket was submitted via ` + + `awesome-privacy.xyz/edit`; + + const issueTitle = `[ADDITION] ${formData.serviceName} (Complete)`; + const queryParams = new URLSearchParams({ + 'assignees': 'lissy93,liss-bot', + 'labels': '', + 'projects': '', + 'template': 'complete-addition.yml', + 'title': issueTitle, + 'listing-category': formData.listingCategory, + 'service-name': formData.serviceName, + 'service-url': formData.serviceUrl, + 'service-icon': formData.serviceIcon, + 'service-description': formData.serviceDescription, + 'service-github': formData.serviceGithub, + 'service-tosdr-id': formData.serviceTosdrId, + 'service-opensource': formData.serviceOpenSource ? 'true' : 'false', + 'service-security-audited': formData.serviceSecurityAudited ? 'true' : 'false', + 'service-crypto': formData.serviceCrypto ? 'true' : 'false', + 'additional-info': additionalInfoText, + }); + const issueCreateUrl = 'https://github.com/Lissy93/awesome-privacy/issues/new'; + return `${issueCreateUrl}?${queryParams.toString()}`; +}; + + +export const makeSourceYamlLink = async (categoryName: string, sectionName: string, serviceName: string) => { + const sourceData = await fetchSrcData(categoryName, sectionName, serviceName); + const lineNumbers = sourceData.lineNumbers || null; + const numberRange = lineNumbers ? `L${lineNumbers.start}-L${lineNumbers.end}` : ''; + const yamlLink = 'https://github.com/lissy93/awesome-privacy/blob/main/awesome-privacy.yml'; + return `${yamlLink}${numberRange}`; +}; + export const fetchSrcData = async (categoryName: string, sectionName: string, serviceName: string) => { const lineNumberData = await fetch('/api/line-numbers.json') .then((res) => res.json());