awesome-privacy/web/src/components/things/DataActions.svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import {
    fetchSrcData,
    makeRemovalRequest,
    makeEditRequest,
  } from '@utils/data-src-delete-n-edit';
  import FontAwesome from '@components/form/FontAwesome.svelte';

  export let categoryName: string;
  export let sectionName: string;
  export let serviceName: string;

  let lineNumbers: { start: number; end: number } | null = null;
  let yamlContent = '';

  const getGitHubSrcFile = () => {
    if (lineNumbers) {
      const baseFile =
        'https://github.com/lissy93/awesome-privacy/blob/main/awesome-privacy.yml';
      return `${baseFile}#L${lineNumbers.start}-L${lineNumbers.end}`;
    }
    return '';
  };

  const getIframeSrc = () => {
    const host = 'https://github-embed.as93.net';
    const target = encodeURIComponent(getGitHubSrcFile());
    const opts =
      'style=felipec&type=code&showBorder=on&showLineNumbers=on&showFileMeta=on&showFullPath=on&showCopy=on';
    return `${host}/iframe.html?target=${target}&${opts}`;
  };

  onMount(async () => {
    const results = await fetchSrcData(categoryName, sectionName, serviceName);
    lineNumbers = results.lineNumbers;
    yamlContent = results.yamlContent;
  });
</script>

{#if lineNumbers}
  <h4>Edit {serviceName} Data</h4>
  <p>
    You can view or edit this {serviceName}'s entry in
    <a href={getGitHubSrcFile()}> this section </a>
    of <code>awesome-privacy.yml</code> in our GitHub repo.
  </p>

  <h4>Origin Data</h4>
  <iframe
    frameborder="0"
    scrolling="no"
    class="yaml-embed"
    allow="clipboard-write"
    title="awesome-privacy.yml"
    src={getIframeSrc()}
  ></iframe>

  <h4>Modify Data</h4>
  <div class="button-wrap">
    <a
      class="button-link"
      target="_blank"
      href={makeRemovalRequest(
        categoryName,
        sectionName,
        serviceName,
        yamlContent,
      )}
    >
      <FontAwesome iconName="delete" /> Delete {serviceName}
    </a>
    <a
      class="button-link"
      target="_blank"
      href={makeEditRequest(
        categoryName,
        sectionName,
        serviceName,
        yamlContent,
      )}
    >
      <FontAwesome iconName="edit" /> Submit Edit to {serviceName}
    </a>
    <a class="button-link" href="/submit">
      <FontAwesome iconName="add" /> Add alternative
    </a>
  </div>
{/if}

<style lang="scss">
  h4 {
    font-size: 1.4rem;
    margin-bottom: 0;
  }
  p {
    margin: 0.25rem 0 0.5rem 0;
  }

  .button-wrap {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 1rem auto;
    @media (max-width: 768px) {
      flex-direction: column;
    }
  }
  .button-link {
    background: var(--accent-3);
    border: 1px solid var(--box-outline);
    box-shadow: 3px 3px 0 var(--box-outline);
    color: var(--accent-fg);
    text-decoration: none;
    border-radius: 18px;
    padding: 0.5rem 1rem;
    font-weight: bold;
    min-width: 15rem;
    display: inline-block;
    text-align: center;
    font-family: 'Lekton', sans-serif;
    font-size: 1.2rem;
    :global(svg) {
      width: 1rem;
      height: 1rem;
    }
  }

  .yaml-embed {
    width: 100%;
    height: 370px;
    border: 1px solid var(--accent-3);
    border-radius: var(--curve-lg);
    padding: 0;
    margin: 1rem auto;
    box-shadow: 3px 3px 0 var(--accent-3);
  }
</style>