SvelteKit의 라이선스 생성기

package.json에서 라이선스 생성

패키지 파일에 나열된 종속성에서 JSON 파일을 만드는 것은 정말 간단합니다. 저는 이 작업을 단일 명령 호출로 줄이는 license-report라는 라이브러리를 사용하고 있습니다. 내 프로젝트에 대한 개발 종속성으로 패키지를 설치하고 다음 NPM 스크립트를 추가하기만 하면 됩니다. 보시다시피 나중에 액세스할 수 있도록 생성된 파일을 정적 디렉터리에 저장합니다.

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

모든 SvelteKit 빌드와 함께

이것은 현재 출력을 보장하기 위해 모든 배포 전에 수행해야 하는 반복적인 작업이므로 간단히 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>