next-banner/dist/client/index.js

Generate Open Graph images for Next.js on build

var __create = Object.create;
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/client/index.ts
var client_exports = {};
__export(client_exports, {
  NextBannerMeta: () => NextBannerMeta,
  ScreenshotCanvas: () => ScreenshotCanvas,
  Template: () => Template,
  setBannerData: () => setBannerData,
  useBannerData: () => useBannerData,
  withNextBanner: () => withNextBanner
});
module.exports = __toCommonJS(client_exports);

// src/client/NextBannerMeta.tsx
var import_react = __toESM(require("react"));
var import_head = __toESM(require("next/head"));
var import_router = require("next/router");
var import_config = __toESM(require("next/config"));
function NextBannerMeta({ children }) {
  const { asPath } = (0, import_router.useRouter)();
  const {
    publicRuntimeConfig: {
      nextBannerOptions: { domain, outputDir }
    }
  } = (0, import_config.default)();
  const url = `${domain}/${outputDir}/${asPath == "/" ? "index" : asPath.replace("/", "")}.jpg`;
  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_head.default, null, /* @__PURE__ */ import_react.default.createElement("meta", {
    property: "og:image",
    content: url
  }), /* @__PURE__ */ import_react.default.createElement("meta", {
    name: "twitter:card",
    content: "summary_large_image"
  })), children);
}

// src/client/Template.tsx
var import_react2 = __toESM(require("react"));
function Template({
  backgroundColor = "#d9ebff",
  textColor = "#000000"
}) {
  const {
    meta: { title = "Placeholder title", description = "Placeholder description" }
  } = useBannerData();
  return /* @__PURE__ */ import_react2.default.createElement(ScreenshotCanvas, {
    style: {
      background: backgroundColor,
      padding: 80,
      boxSizing: "border-box"
    }
  }, /* @__PURE__ */ import_react2.default.createElement("div", {
    style: {
      display: "flex",
      flexDirection: "row",
      alignItems: "center",
      gap: "20px",
      marginBlockEnd: "30px"
    }
  }, /* @__PURE__ */ import_react2.default.createElement("img", {
    src: "/favicon.ico",
    alt: "",
    style: { width: "50px", height: "50px" }
  })), /* @__PURE__ */ import_react2.default.createElement("p", {
    style: {
      fontSize: "6em",
      color: textColor,
      fontWeight: 900,
      margin: 0
    }
  }, title), /* @__PURE__ */ import_react2.default.createElement("p", {
    style: {
      fontSize: "3em",
      color: textColor,
      margin: 0,
      fontWeight: 500
    }
  }, description));
}

// src/client/ScreenshotCanvas.tsx
var import_config2 = __toESM(require("next/config"));
var import_react3 = __toESM(require("react"));
function ScreenshotCanvas({ style, className, children }) {
  const {
    publicRuntimeConfig: {
      nextBannerOptions: { width, height }
    }
  } = (0, import_config2.default)();
  return /* @__PURE__ */ import_react3.default.createElement("div", {
    className,
    id: "next-banner-screenshot-canvas",
    style: __spreadValues({
      width,
      height,
      position: "fixed",
      background: "white",
      top: "0",
      left: "0"
    }, style)
  }, children);
}

// src/client/useBannerData.ts
var import_react4 = require("react");
function useBannerData() {
  const [data, setData] = (0, import_react4.useState)({ meta: {}, custom: {} });
  (0, import_react4.useEffect)(() => {
    if (typeof globalThis !== "undefined" && typeof globalThis.NextBannerData !== "undefined") {
      setData({
        meta: globalThis.NextBannerData.meta,
        custom: globalThis.NextBannerData.custom
      });
    }
  }, []);
  return data;
}

// src/constants.ts
var DEFAULT_LAYOUT = "default";

// src/client/setBannerData.ts
function setBannerData({ layout, custom }) {
  if (typeof globalThis !== "undefined") {
    globalThis.NextBannerData = {
      layout: layout != null ? layout : DEFAULT_LAYOUT,
      meta: {},
      custom: custom != null ? custom : {}
    };
  }
}

// ../../node_modules/is-what/dist/index.es.js
function getType(payload) {
  return Object.prototype.toString.call(payload).slice(8, -1);
}
function isUndefined(payload) {
  return getType(payload) === "Undefined";
}
function isNull(payload) {
  return getType(payload) === "Null";
}
function isPlainObject(payload) {
  if (getType(payload) !== "Object")
    return false;
  return payload.constructor === Object && Object.getPrototypeOf(payload) === Object.prototype;
}
function isSymbol(payload) {
  return getType(payload) === "Symbol";
}
var isNullOrUndefined = isOneOf(isNull, isUndefined);
function isOneOf(a, b, c, d, e) {
  return (value) => a(value) || b(value) || !!c && c(value) || !!d && d(value) || !!e && e(value);
}

// ../../node_modules/merge-anything/dist/index.es.js
function assignProp(carry, key, newVal, originalObject) {
  const propType = {}.propertyIsEnumerable.call(originalObject, key) ? "enumerable" : "nonenumerable";
  if (propType === "enumerable")
    carry[key] = newVal;
  if (propType === "nonenumerable") {
    Object.defineProperty(carry, key, {
      value: newVal,
      enumerable: false,
      writable: true,
      configurable: true
    });
  }
}
function mergeRecursively(origin, newComer, compareFn) {
  if (!isPlainObject(newComer))
    return newComer;
  let newObject = {};
  if (isPlainObject(origin)) {
    const props2 = Object.getOwnPropertyNames(origin);
    const symbols2 = Object.getOwnPropertySymbols(origin);
    newObject = [...props2, ...symbols2].reduce((carry, key) => {
      const targetVal = origin[key];
      if (!isSymbol(key) && !Object.getOwnPropertyNames(newComer).includes(key) || isSymbol(key) && !Object.getOwnPropertySymbols(newComer).includes(key)) {
        assignProp(carry, key, targetVal, origin);
      }
      return carry;
    }, {});
  }
  const props = Object.getOwnPropertyNames(newComer);
  const symbols = Object.getOwnPropertySymbols(newComer);
  const result = [...props, ...symbols].reduce((carry, key) => {
    let newVal = newComer[key];
    const targetVal = isPlainObject(origin) ? origin[key] : void 0;
    if (targetVal !== void 0 && isPlainObject(newVal)) {
      newVal = mergeRecursively(targetVal, newVal, compareFn);
    }
    const propToAssign = compareFn ? compareFn(targetVal, newVal, key) : newVal;
    assignProp(carry, key, propToAssign, newComer);
    return carry;
  }, newObject);
  return result;
}
function merge(object, ...otherObjects) {
  return otherObjects.reduce((result, newComer) => {
    return mergeRecursively(result, newComer);
  }, object);
}

// src/config.ts
var import_node_fs = __toESM(require("fs"));

// src/cli/file.ts
var import_path = __toESM(require("path"));
function getPath(...pathSegment) {
  return import_path.default.resolve(process.cwd(), ...pathSegment);
}

// src/config.ts
var defaultConfig = {
  domain: "localhost:3000",
  nextDir: ".next",
  excludePages: [],
  layoutDir: "next-banner-layouts",
  outputDir: "next-banner-generated",
  width: 1200,
  height: 630,
  concurrency: 10
};
var CONFIG_FILE = ".next/next-banner.json";
function withNextBanner(config) {
  const merged = merge(defaultConfig, config.nextBanner);
  return __spreadProps(__spreadValues({}, config), {
    webpack: (webpackConfig) => {
      try {
        const file = getPath(CONFIG_FILE);
        const json = JSON.stringify(merged, null, 2);
        import_node_fs.default.writeFileSync(file, json);
      } catch (err) {
        console.error(err);
      }
      return webpackConfig;
    },
    publicRuntimeConfig: __spreadProps(__spreadValues({}, config.publicRuntimeConfig), {
      nextBannerOptions: merged
    })
  });
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  NextBannerMeta,
  ScreenshotCanvas,
  Template,
  setBannerData,
  useBannerData,
  withNextBanner
});
//# sourceMappingURL=index.js.map