ליסענסע גענעראַטאָר אין SvelteKit

דזשענערייטינג לייסאַנסיז פון דיין package.json

קריייטינג אַ JSON-טעקע פֿון דיין דיפּענדאַנסיז ליסטעד אין די פּעקל טעקע איז טאַקע פּשוט. איך נוצן אַ ביבליאָטעק גערופן דערלויבעניש-רעפּאָרט, וואָס ראַדוסאַז דעם אַרבעט צו אַ איין באַפֿעלן רופן. איך נאָר האָבן צו ינסטאַלירן דעם פּעקל ווי אַ אַנטוויקלונג דעפּענדענסי פֿאַר מיין פּרויעקט און צוגעגעבן די פאלגענדע NPM-שריפט. ווי איר קענען זען, איך ראַטעווען די באשאפן טעקע אין די סטאַטיק וועגווייַזער פֿאַר שפּעטער אַקסעס.

{
  "dep:gen": "license-report --output=json > ./static/licenses.json"
}

מיט יעדער סוועלטעקיט בויען

ווייַל דאָס איז אַ ריפּעטיטיוו אַרבעט וואָס דאַרף זיין געטאן איידער יעדער דיפּלוימאַנט צו ענשור אַ קראַנט רעזולטאַט, איך פשוט צוגעגעבן עס צו די בויען-קאָמאַנד פון NPM. דער באַפֿעל איז אויך געניצט דורך SvelteKit, וואָס מיטל ווען איר צעוויקלען אַ נייַע ווערסיע (און דעריבער שאַפֿן אַ נייַע בויען), די לייסאַנסיז פון דיין דיפּענדאַנסיז ווערן דזשענערייטאַד איידער די פאַקטיש בויען.

{
  "build": "npm run dep:gen && svelte-kit build",
}

קאַנסומינג די לייסאַנסיז

די פאלגענדע קאָד סניפּאַץ ווייַזן אַ פאַקטיש וועלט באַניץ איך ימפּלאַמענאַד פֿאַר spikze.club. א לינק צו די רעפּאָ איז אויך בנימצא אין די אַדענדום אין די סוף פון דעם בלאַט. איך נאָר ברענגען די דאַטן אין אַ קאָמפּאָנענט. דאַנק צו SvelteKit, די דאַטן זענען ינליינד מיט די קאָמפּאָנענט ברענגען. דער רעזולטאַט איז דערנאָך דורכגעגאנגען צו אַ רשימה-מיינונג.

//
// licenses.svelte
//

<script lang="ts" context="module">
  import type { Load } from "@sveltejs/kit";

  export const prerender = true;

  export const fetch: Load = async () => ({
    status: 200,
    maxage: 60 * 60 * 24
  });
</script>

<script lang="ts">
  import PageLayout from "$lib/layout/views/PageLayout.svelte";
  import SectionLayout from "$lib/layout/views/SectionLayout.svelte";
  import LicenseList from "$lib/license/views/LicenseList.svelte";
  import type { ExportedLicense } from "$lib/license/types";
  import DisplayGrid from "$lib/display/views/DisplayGrid.svelte";
  import DisplayGridItem from "$lib/display/views/DisplayGridItem.svelte";
  import DisplaySingularCarouselTitle from "$lib/display/views/DisplaySingularCarouselTitle.svelte";
  import DisplayGridItemCarousel from "$lib/display/views/DisplayGridItemCarousel.svelte";

  export let licenses: ExportedLicense[];
</script>

<PageLayout>
  <SectionLayout>
    <DisplayGrid slot="header" variant="2/1">
      <div class="col-span-2">
        <DisplayGridItem>
          <DisplayGridItemCarousel
            withRandomInitialDirection
            countItems={3}
            withInitialDelay={750}
            withRandomSeedInitialDelay={1500}
          >
            <DisplaySingularCarouselTitle slot="0" label="Licenses" />
            <DisplaySingularCarouselTitle slot="1" label={`${licenses.length} in total`} />
            <DisplaySingularCarouselTitle slot="2" label="spikze.club" />
          </DisplayGridItemCarousel>
        </DisplayGridItem>
      </div>
    </DisplayGrid>
  </SectionLayout>

  <SectionLayout>
    <LicenseList {licenses} />
  </SectionLayout>
</PageLayout>

//
// licenses.ts
//

import type { EndpointOutput } from "@sveltejs/kit";
import licenses from "../../../static/licenses.json";

export async function get(): Promise<EndpointOutput> {
  // const url = "/licenses.json"; // "https://spikze.club/licenses.json"
  // const licenses = await fetch(url).then((response) => response.json());

  if (licenses) {
    return {
      body: { licenses }
    };
  }

  return {
    status: 500
  };
}

//
// LicenseList.svelte
//

<script lang="ts">
  import type { ExportedLicense } from "../types";

  export let licenses: ExportedLicense[];
</script>

<ul>
  {#each licenses as l}
    <li>
      <a
        href={l.link.replace("git+", "").replace(".git", "")}
        alt={`License for ${l.name}`}
        rel="external"
        target="_blank"
      >
        <div class="hover:text-slate-400 duration-200 ease-in-out py-3">
          <strong>
            {l.name}
          </strong>
          by
          <strong>{l.author}</strong>
        </div>
      </a>
    </li>
  {/each}
</ul>