SvelteKit . में लाइसेंस जनरेटर

अपने package.json से लाइसेंस बनाना

पैकेज फ़ाइल में सूचीबद्ध आपकी निर्भरताओं से JSON-फ़ाइल बनाना वास्तव में सरल है। मैं लाइसेंस-रिपोर्ट नामक लाइब्रेरी का उपयोग कर रहा हूं, जो इस कार्य को एकल कमांड कॉल तक कम कर देता है। मुझे बस अपनी परियोजना के लिए पैकेज को विकास निर्भरता के रूप में स्थापित करना है और निम्नलिखित एनपीएम-स्क्रिप्ट को जोड़ा है। जैसा कि आप देख सकते हैं, मैं बाद में पहुंच के लिए बनाई गई फ़ाइल को स्थिर-निर्देशिका में सहेजता हूं।

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

हर SvelteKit बिल्ड के साथ

चूंकि यह एक दोहराव वाला कार्य है जिसे वर्तमान आउटपुट सुनिश्चित करने के लिए प्रत्येक परिनियोजन से पहले किया जाना है, मैंने इसे केवल एनपीएम के बिल्ड-कमांड में जोड़ा है। इस आदेश का उपयोग 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>