Next.js NPM -lisensiegenerator

Genereer lisensies uit u pakket.json

Dit is regtig eenvoudig om 'n JSON-lêer te skep uit u afhanklikes wat in die pakketlêer verskyn. Ek gebruik 'n biblioteek genaamd lisensieverslag, wat hierdie taak tot 'n enkele opdragoproep verminder. Ek moet die pakket net as 'n ontwikkelingsafhanklikheid vir my projek installeer en die volgende NPM-script bygevoeg.

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

Met elke Next.js -opbou

Aangesien dit 'n herhalende taak is wat voor elke implementering uitgevoer moet word om 'n huidige uitset te verseker, het ek dit eenvoudig by die bouopdrag van NPM gevoeg. Hierdie opdrag word ook gebruik deur Next.js, wat beteken dat wanneer u 'n nuwe weergawe implementeer (en dus 'n nuwe build skep), die lisensies van u afhanklikhede gegenereer word voor die werklike build.

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

'N Praktiese implementering

Uiteindelik gebruik ek eenvoudig die json op my Next.js -bladsy en gee dit as 'n eiendom aan my mening oor. Let daarop dat die bladsy self suiwer staties is. Die volgende kodevoorbeeld word presies so in hierdie progressiewe webprogram gebruik. Hulle is beskikbaar op die lisensiebladsy.

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