Permesilo-generilo Next.js NPM

Generante licencojn de via package.json

Krei JSON-dosieron el viaj dependecoj listigitaj en la paka dosiero estas vere simpla. Mi uzas bibliotekon nomatan licenco-raporto, kiu reduktas ĉi tiun taskon al sola komanda alvoko. Mi nur devas instali la pakaĵon kiel evoluigan dependecon por mia projekto kaj aldonis la jenan NPM-skripton.

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

Kun ĉiu Next.js-konstruo

Ĉar ĉi tio estas ripeta tasko, kiu devas esti farita antaŭ ĉiu deplojo por certigi aktualan rezulton, mi simple aldonis ĝin al la konstrua komando de NPM. Ĉi tiu komando ankaŭ estas uzata de Next.js, kio signifas, kiam ajn vi lanĉas novan version (kaj tial kreas novan konstruon), la licencoj de viaj dependecoj generiĝas antaŭ la efektiva konstruo.

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

Praktika efektivigo

Fine, mi simple konsumas la json en mia paĝo Next.js kaj transdonas ĝin kiel posedaĵon al mia vidpunkto. Notu, ke la paĝo mem estas nur statika. La sekva kodekzemplo estas uzata ekzakte tiel en ĉi tiu progresema interreta programo. Ili haveblas ĉe la permesila paĝo.

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>
    </>
  );
}