מחולל רישיונות NPM של Next.js

יצירת רישיונות מהחבילה שלך. Json

יצירת קובץ JSON מהתלות שלך המופיעות בקובץ החבילה היא ממש פשוטה. אני משתמש בספרייה בשם רישיון-דו"ח, מה שמצמצם משימה זו לשיחת פקודה אחת. אני רק צריך להתקין את החבילה כתלות בפיתוח של הפרויקט שלי והוספתי את ה- NPM-script הבא.

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

עם כל בנייה של Next.js

מכיוון שמדובר במשימה שחוזרת על עצמה לפני כל פריסה כדי להבטיח פלט נוכחי, פשוט הוספתי אותה לפקודת build-NPM. פקודה זו משמשת גם את Next.js, כלומר בכל פעם שאתה פורס גירסה חדשה (ולכן יוצר build חדש), הרישיונות מהתלות שלך נוצרים לפני הבנייה בפועל.

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

יישום מעשי

לבסוף, אני פשוט צורכת את ה- json בדף 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>
    </>
  );
}