Next.js NPM लाइसेंस जनरेटर

अपने package.json से लाइसेंस बनाना

पैकेज फ़ाइल में सूचीबद्ध आपकी निर्भरताओं से JSON-फ़ाइल बनाना वास्तव में सरल है। मैं लाइसेंस-रिपोर्ट नामक लाइब्रेरी का उपयोग कर रहा हूं, जो इस कार्य को एकल कमांड कॉल में कम कर देता है। मुझे बस अपनी परियोजना के लिए पैकेज को विकास निर्भरता के रूप में स्थापित करना है और निम्नलिखित एनपीएम-स्क्रिप्ट को जोड़ा है।

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

हर Next.js बिल्ड के साथ

चूंकि यह एक दोहराव वाला कार्य है जिसे वर्तमान आउटपुट सुनिश्चित करने के लिए प्रत्येक परिनियोजन से पहले किया जाना है, मैंने इसे केवल एनपीएम के बिल्ड-कमांड में जोड़ा है। इस आदेश का उपयोग Next.js द्वारा भी किया जाता है, जिसका अर्थ है कि जब भी आप एक नया संस्करण परिनियोजित करते हैं (और इसलिए एक नया निर्माण बनाते हैं), वास्तविक निर्माण से पहले आपकी निर्भरता से लाइसेंस उत्पन्न हो जाते हैं।

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

एक व्यावहारिक कार्यान्वयन

अंत में, मैं बस अपने Next.js पेज में json का उपभोग कर रहा हूं और इसे मेरे विचार में एक संपत्ति के रूप में पास कर रहा हूं। ध्यान दें कि पृष्ठ ही विशुद्ध रूप से स्थिर है। निम्न कोड उदाहरण इस प्रगतिशील वेब ऐप में बिल्कुल इसी तरह उपयोग किया जाता है। वे लाइसेंस पृष्ठ पर उपलब्ध हैं।

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