Lisensie generator in SvelteKit

Genereer lisensies vanaf jou package.json

Die skep van 'n JSON-lêer uit jou afhanklikhede wat in die pakketlêer gelys is, is baie eenvoudig. Ek gebruik 'n biblioteek genaamd lisensieverslag, wat hierdie taak tot 'n enkele opdragoproep verminder. Ek moet net die pakket installeer as 'n ontwikkelingsafhanklikheid vir my projek en het die volgende NPM-skrip bygevoeg. Soos u kan sien, stoor ek die geskepde lêer in die statiese gids vir latere toegang.

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

Met elke SvelteKit-bou

Aangesien dit 'n herhalende taak is wat voor elke ontplooiing gedoen moet word om 'n huidige uitset te verseker, het ek dit eenvoudig by NPM se bou-opdrag gevoeg. Hierdie opdrag word ook deur SvelteKit gebruik, wat beteken wanneer jy 'n nuwe weergawe ontplooi (en dus 'n nuwe bou skep), word die lisensies van jou afhanklikhede gegenereer voor die werklike bou.

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

Die verbruik van die lisensies

Die volgende kodebrokkies wys 'n werklike wêreldgebruik wat ek vir spikze.club geïmplementeer het. 'n Skakel na die repo is ook beskikbaar in die addendum aan die einde van hierdie bladsy. Ek haal bloot die data in 'n komponent. Danksy SvelteKit word die data ingelyn met die komponent haal. Die resultaat word dan na 'n lysaansig oorgedra.

//
// 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>