Next.js NPM licencgenerátor

Licencek generálása a package.json fájlból

A JSON-fájl létrehozása a csomagfájlban felsorolt függőségekből nagyon egyszerű. Licenc-jelentés nevű könyvtárat használok, amely ezt a feladatot egyetlen parancshívásra csökkenti. Csak telepítenem kell a csomagot, mint fejlesztési függőséget a projektemhez, és hozzá kell adnom a következő NPM-szkriptet.

{
  "dep:gen": "license-report --only=prod --output=json > licenses.json"
}

Minden Next.js építéssel

Mivel ez egy ismétlődő feladat, amelyet minden telepítés előtt el kell végezni az aktuális kimenet biztosítása érdekében, egyszerűen hozzáadtam az NPM build-parancsához. Ezt a parancsot a Next.js is használja, ami azt jelenti, hogy amikor új verziót telepít (és ezért új buildet hoz létre), a függőségekből származó licencek a tényleges build előtt generálódnak.

{
  "build": "npm run dep:gen && npx next build",
}

Praktikus megvalósítás

Végül egyszerűen elfogyasztom a json -t a Next.js oldalamon, és tulajdonként adom át a nézetemnek. Ne feledje, hogy maga az oldal tisztán statikus. A következő kódpéldát pontosan így használják ebben a progresszív webalkalmazásban. Ezek a licenc oldalon találhatók.

import React from "react";
import { NpmDependency } from "../../models/license/model.license";
import RiExternalLink from "remixicon-react/ExternalLinkLineIcon";

type Props = {
  licenses: NpmDependency[];
};

export function Licenses(props: Props) {
  const { licenses } = props;

  return (
    <>
      <div className="flex flex-col items-center mb-10 space-y-2 mt-28">
        <h1 className="text-5xl">Licenses</h1>
        <h2 className="text-xl">All licenses used for flaming.codes</h2>
      </div>
      <div className="grid max-w-3xl grid-cols-12 gap-10 mx-auto">
        {licenses.map((l) => (
          <a
            key={l.link}
            className="flex-col space-y-1 overflow-hidden col-span-full group"
            href={l.link.replace("git+", "").replace("ssh://", "")}
            target="_blank"
            rel="noopener noreferrer"
            aria-label={`Open Github repo for ${l.name}`}>
            <div className="inline-flex items-end">
              <div className="space-x-2 duration-300 ease-in group-hover:translate-x-6 group-hover:opacity-0">
                <span className="text-2xl">{l.name}</span>
                <span className="opacity-50">{l.installedVersion}</span>
              </div>

              <div className="absolute mb-1 text-blue-600 duration-300 ease-in -translate-x-4 opacity-0 group-hover:translate-x-0 group-hover:opacity-100">
                <RiExternalLink />
              </div>
            </div>

            <div className="text-gray-400">
              {[l.licenseType, l.author].filter(Boolean).join(", ")}
            </div>
          </a>
        ))}
      </div>
    </>
  );
}