Generador de licencias Next.js NPM

Generando licencias desde su package.json

Crear un archivo JSON a partir de sus dependencias enumeradas en el archivo del paquete es realmente simple. Estoy usando una biblioteca llamada informe de licencias, que reduce esta tarea a una sola llamada de comando. Solo tengo que instalar el paquete como una dependencia de desarrollo para mi proyecto y agregar el siguiente script NPM.

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

Con cada compilación de Next.js

Como esta es una tarea repetitiva que debe realizarse antes de cada implementación para garantizar una salida actual, simplemente la agregué al comando de compilación de NPM. Este comando también lo usa Next.js, lo que significa que cada vez que implementa una nueva versión (y por lo tanto crea una nueva compilación), las licencias de sus dependencias se generan antes de la compilación real.

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

Una implementación práctica

Finalmente, simplemente estoy consumiendo el json en mi página Next.js y lo paso como una propiedad a mi vista. Tenga en cuenta que la página en sí es puramente estática. El siguiente ejemplo de código se usa exactamente así en esta aplicación web progresiva. Están disponibles en la página de licencias.

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