Next.js NPM דערלויבעניש גענעראַטאָר

דזשענערייטינג לייסאַנסיז פֿון דיין package.json

צו שאַפֿן אַ JSON טעקע פֿון דיין דיפּענדאַנסיז ליסטעד אין די פּעקל טעקע איז טאַקע פּשוט. איך נוצן אַ ביבליאָטעק גערופֿן דערלויבעניש-באַריכט, וואָס רידוסיז די אַרבעט צו אַ איין באַפֿעל רופן. איך נאָר האָבן צו ינסטאַלירן דעם פּעקל ווי אַ אַנטוויקלונג דעפּענדענסי פֿאַר מיין פּרויעקט און צוגעגעבן די פאלגענדע NPM- שריפט.

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

מיט יעדער Next.js בויען

ווייַל דאָס איז אַ ריפּעטיטיוו אַרבעט וואָס איז דורכגעקאָכט איידער יעדער דיפּלוימאַנט צו ענשור אַ קראַנט רעזולטאַט, איך פשוט צוגעגעבן עס צו NPM ס באַפֿעלן באַפֿעל. דער באַפֿעל איז אויך גענוצט דורך Next.js, וואָס מיטל אַז ווען איר צעוויקלען אַ נייַע ווערסיע (און דעריבער שאַפֿן אַ נייַע בויען), די לייסאַנסיז פון דיין דיפּענדאַנסיז ווערן דזשענערייטאַד איידער די פאַקטיש בויען.

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

א פּראַקטיש ימפּלאַמענטיישאַן

צום סוף, איך פשוט קאַנסומינג די דזשסאָן אין מיין Next.js בלאַט און פאָרן עס ווי אַ פאַרמאָג צו מיין מיינונג. באַמערקונג אַז דער בלאַט זיך איז ריין סטאַטיק. די פאלגענדע קאָד ביישפּיל איז גענוצט ווי דאָס אין דעם פּראָגרעסיוו וועב אַפּ. זיי זענען בארעכטיגט אויף דער דערלויבעניש בלאַט.

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