create-plasmic-app 0.0.167 → 0.0.168

package/dist/nextjs/templates/pages-seo.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeRobots_pages = exports.makeSitemap_pages_codegen = exports.makeSitemap_pages_loader = void 0;
+const file_utils_1 = require("../../utils/file-utils");
+const siteUrl = `  // Set NEXT_PUBLIC_SITE_URL to pin the origin;
+  // otherwise it is derived per-request from the request headers.
+  const siteUrl =
+    process.env.NEXT_PUBLIC_SITE_URL ??
+    (process.env.VERCEL_PROJECT_PRODUCTION_URL
+      ? \`https://\${process.env.VERCEL_PROJECT_PRODUCTION_URL}\`
+      : \`\${req.headers["x-forwarded-proto"] ?? "http"}://\${
+          req.headers["x-forwarded-host"] ?? req.headers.host
+        }\`);`;
+function makeHeader(jsOrTs) {
+    return (0, file_utils_1.ifTs)(jsOrTs, `import type { GetServerSideProps } from "next";\n`);
+}
+function makeSignature(jsOrTs) {
+    return `export const getServerSideProps${(0, file_utils_1.ifTs)(jsOrTs, ": GetServerSideProps")} = async ({ req, res }) => {`;
+}
+function makeSitemapXml(jsOrTs) {
+    return `function escapeXml(str${(0, file_utils_1.ifTs)(jsOrTs, ": string")}) {
+  return str
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;");
+}
+
+function makeSitemapXml(urls${(0, file_utils_1.ifTs)(jsOrTs, ": string[]")}) {
+  const entries = urls.map(
+    (url) => \`  <url><loc>\${escapeXml(url)}</loc></url>\`
+  );
+  return \`<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+\${entries.join("\\n")}
+</urlset>
+\`;
+}`;
+}
+function makeSitemap_pages_loader(jsOrTs) {
+    return `import { PLASMIC } from "@/plasmic-init";
+${makeHeader(jsOrTs)}
+${makeSitemapXml(jsOrTs)}
+
+${makeSignature(jsOrTs)}
+${siteUrl}
+
+  // fetchPages() drops pages whose path takes a param, e.g. "/blog/[slug]".
+  const pages = await PLASMIC.fetchPages();
+  const urls = pages.map((page) => new URL(page.path, siteUrl).toString());
+
+  res.setHeader("Content-Type", "application/xml; charset=utf-8");
+  res.write(makeSitemapXml(urls));
+  res.end();
+  return { props: {} };
+};
+
+export default function Sitemap() {
+  return null;
+}
+`;
+}
+exports.makeSitemap_pages_loader = makeSitemap_pages_loader;
+function makeSitemap_pages_codegen(jsOrTs) {
+    const projects = jsOrTs === "ts"
+        ? `(plasmicJson.projects as {
+    components: { componentType: string; path?: string }[];
+  }[])`
+        : "plasmicJson.projects";
+    return `${makeHeader(jsOrTs)}import plasmicJson from "../plasmic.json";
+
+${makeSitemapXml(jsOrTs)}
+
+${makeSignature(jsOrTs)}
+${siteUrl}
+
+  const urls = ${projects}
+    .flatMap((project) => project.components)
+    .flatMap((component) =>
+      component.componentType === "page" &&
+      component.path &&
+      !component.path.includes("[")
+        ? // next.config sets trailingSlash.
+          [new URL(component.path.replace(/\\/?$/, "/"), siteUrl).toString()]
+        : []
+    );
+
+  res.setHeader("Content-Type", "application/xml; charset=utf-8");
+  res.write(makeSitemapXml(urls));
+  res.end();
+  return { props: {} };
+};
+
+export default function Sitemap() {
+  return null;
+}
+`;
+}
+exports.makeSitemap_pages_codegen = makeSitemap_pages_codegen;
+function makeRobots_pages(jsOrTs) {
+    return `${(0, file_utils_1.ifTs)(jsOrTs, `import type { GetServerSideProps } from "next";\n\n`)}${makeSignature(jsOrTs)}
+${siteUrl}
+
+  res.setHeader("Content-Type", "text/plain; charset=utf-8");
+  res.write(
+    \`User-agent: *\\nAllow: /\\n\\nSitemap: \${new URL(
+      "/sitemap.xml",
+      siteUrl
+    ).toString()}\\n\`
+  );
+  res.end();
+  return { props: {} };
+};
+
+export default function Robots() {
+  return null;
+}
+`;
+}
+exports.makeRobots_pages = makeRobots_pages;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.167",
+  "version": "0.0.168",
   "description": "Create Plasmic-powered React apps",
   "homepage": "https://www.plasmic.app",
   "repository": {
@@ -53,5 +53,5 @@
     "validate-npm-package-name": "^3.0.0",
     "yargs": "^16.2.2"
   },
-  "gitHead": "493a4810a85a585783c5377a4bbb6d080145c132"
+  "gitHead": "f63ae177f15f845faf191d62b25fc3e3e3cfdb95"
 }

package/src/nextjs/nextjs.ts

@@ -20,11 +20,21 @@ import { makeCatchallPage_app_loader } from "./templates/app-loader/catchall-pag
 import { makePlasmicHostPage_app_loader } from "./templates/app-loader/plasmic-host";
 import { makePlasmicInit_app_loader } from "./templates/app-loader/plasmic-init";
 import { makePlasmicInitClient_app_loader } from "./templates/app-loader/plasmic-init-client";
+import {
+  makeRobots_app,
+  makeSitemap_app_codegen,
+  makeSitemap_app_loader,
+} from "./templates/app-seo";
 import { makeCustomApp_pages_codegen } from "./templates/pages-codegen/app";
 import { makePlasmicHostPage_pages_codegen } from "./templates/pages-codegen/plasmic-host";
 import { makeCatchallPage_pages_loader } from "./templates/pages-loader/catchall-page";
 import { makePlasmicHostPage_pages_loader } from "./templates/pages-loader/plasmic-host";
 import { makePlasmicInit_pages_loader } from "./templates/pages-loader/plasmic-init";
+import {
+  makeRobots_pages,
+  makeSitemap_pages_codegen,
+  makeSitemap_pages_loader,
+} from "./templates/pages-seo";
 
 export const nextjsStrategy: CPAStrategy = {
   create: async (args) => {
@@ -124,6 +134,12 @@ async function generateFilesAppDir(args: GenerateFilesArgs) {
   // Delete existing pages
   deleteGlob(path.join(projectPath, "app", "page.*"));
 
+  // ./app/robots.ts
+  await fs.writeFile(
+    path.join(projectPath, "app", `robots.${jsOrTs}`),
+    makeRobots_app(jsOrTs)
+  );
+
   if (scheme === "loader") {
     // ./plasmic-init.ts
     await fs.writeFile(
@@ -153,6 +169,12 @@ async function generateFilesAppDir(args: GenerateFilesArgs) {
       path.join(projectPath, "app", "[[...catchall]]", `page.${jsOrTs}x`),
       makeCatchallPage_app_loader(jsOrTs)
     );
+
+    // ./app/sitemap.ts
+    await fs.writeFile(
+      path.join(projectPath, "app", `sitemap.${jsOrTs}`),
+      makeSitemap_app_loader(jsOrTs)
+    );
   } else {
     // ./plasmic-init-client.tsx
     await fs.writeFile(
@@ -177,6 +199,12 @@ async function generateFilesAppDir(args: GenerateFilesArgs) {
       projectPath,
     });
 
+    // ./app/sitemap.ts
+    await fs.writeFile(
+      path.join(projectPath, "app", `sitemap.${jsOrTs}`),
+      makeSitemap_app_codegen(jsOrTs)
+    );
+
     // Read plasmic.json so we can wire each top-level project's plasmic.css
     // import directly into the root layout template.
     const config = await getPlasmicConfig(projectPath, "nextjs", scheme);
@@ -216,6 +244,12 @@ async function generateFilesPagesDir(args: GenerateFilesArgs) {
   // Delete existing pages
   deleteGlob(path.join(projectPath, "pages", "*.*"));
 
+  // ./pages/robots.txt.ts
+  await fs.writeFile(
+    path.join(projectPath, "pages", `robots.txt.${jsOrTs}`),
+    makeRobots_pages(jsOrTs)
+  );
+
   if (scheme === "loader") {
     // ./plasmic-init.ts
     await fs.writeFile(
@@ -237,6 +271,12 @@ async function generateFilesPagesDir(args: GenerateFilesArgs) {
       path.join(projectPath, "pages", `[[...catchall]].${jsOrTs}x`),
       makeCatchallPage_pages_loader(jsOrTs)
     );
+
+    // ./pages/sitemap.xml.ts
+    await fs.writeFile(
+      path.join(projectPath, "pages", `sitemap.xml.${jsOrTs}`),
+      makeSitemap_pages_loader(jsOrTs)
+    );
   } else {
     // ./pages/plasmic-host.tsx
     await fs.writeFile(
@@ -254,6 +294,12 @@ async function generateFilesPagesDir(args: GenerateFilesArgs) {
       projectPath,
     });
 
+    // ./pages/sitemap.xml.ts
+    await fs.writeFile(
+      path.join(projectPath, "pages", `sitemap.xml.${jsOrTs}`),
+      makeSitemap_pages_codegen(jsOrTs)
+    );
+
     // Read plasmic.json so we can wire each top-level project's plasmic.css
     // import directly into the _app template.
     const config = await getPlasmicConfig(projectPath, "nextjs", scheme);

package/src/nextjs/templates/app-seo.ts

@@ -0,0 +1,104 @@
+import { ifTs } from "../../utils/file-utils";
+import { JsOrTs } from "../../utils/types";
+
+const getSiteUrl = `// Set NEXT_PUBLIC_SITE_URL to pin the origin and keep this route static;
+// otherwise it is derived per-request, which opts the route out of prerendering.
+async function getSiteUrl() {
+  if (process.env.NEXT_PUBLIC_SITE_URL) {
+    return process.env.NEXT_PUBLIC_SITE_URL;
+  }
+  if (process.env.VERCEL_PROJECT_PRODUCTION_URL) {
+    return \`https://\${process.env.VERCEL_PROJECT_PRODUCTION_URL}\`;
+  }
+  const h = await headers();
+  const proto = h.get("x-forwarded-proto") ?? "http";
+  return \`\${proto}://\${h.get("x-forwarded-host") ?? h.get("host")}\`;
+}`;
+
+function makeHeader(jsOrTs: JsOrTs) {
+  return `${ifTs(
+    jsOrTs,
+    `import type { MetadataRoute } from "next";\n`
+  )}import { headers } from "next/headers";\n`;
+}
+
+function makeSignature(jsOrTs: JsOrTs) {
+  return `export default async function sitemap()${ifTs(
+    jsOrTs,
+    ": Promise<MetadataRoute.Sitemap>"
+  )} {`;
+}
+
+export function makeSitemap_app_loader(jsOrTs: JsOrTs): string {
+  return `import { PLASMIC } from "@/plasmic-init";
+${makeHeader(jsOrTs)}
+export const revalidate = 60;
+
+${getSiteUrl}
+
+${makeSignature(jsOrTs)}
+  const siteUrl = await getSiteUrl();
+
+  // fetchPages() drops pages whose path takes a param, e.g. "/blog/[slug]".
+  const pages = await PLASMIC.fetchPages();
+
+  return pages.map((page) => ({
+    url: new URL(page.path, siteUrl).toString(),
+  }));
+}
+`;
+}
+
+export function makeSitemap_app_codegen(jsOrTs: JsOrTs): string {
+  const projects =
+    jsOrTs === "ts"
+      ? `(plasmicJson.projects as {
+    components: { componentType: string; path?: string }[];
+  }[])`
+      : "plasmicJson.projects";
+
+  return `${makeHeader(jsOrTs)}import plasmicJson from "../plasmic.json";
+
+${getSiteUrl}
+
+${makeSignature(jsOrTs)}
+  const siteUrl = await getSiteUrl();
+
+  return ${projects}
+    .flatMap((project) => project.components)
+    .flatMap((component) =>
+      component.componentType === "page" &&
+      component.path &&
+      !component.path.includes("[")
+        ? [
+            {
+              // next.config sets trailingSlash.
+              url: new URL(
+                component.path.replace(/\\/?$/, "/"),
+                siteUrl
+              ).toString(),
+            },
+          ]
+        : []
+    );
+}
+`;
+}
+
+export function makeRobots_app(jsOrTs: JsOrTs): string {
+  return `${makeHeader(jsOrTs)}
+${getSiteUrl}
+
+export default async function robots()${ifTs(
+    jsOrTs,
+    ": Promise<MetadataRoute.Robots>"
+  )} {
+  const siteUrl = await getSiteUrl();
+
+  return {
+    rules: { userAgent: "*", allow: "/" },
+    sitemap: new URL("/sitemap.xml", siteUrl).toString(),
+  };
+}
+`;
+}

package/src/nextjs/templates/pages-seo.ts

@@ -0,0 +1,131 @@
+import { ifTs } from "../../utils/file-utils";
+import { JsOrTs } from "../../utils/types";
+
+const siteUrl = `  // Set NEXT_PUBLIC_SITE_URL to pin the origin;
+  // otherwise it is derived per-request from the request headers.
+  const siteUrl =
+    process.env.NEXT_PUBLIC_SITE_URL ??
+    (process.env.VERCEL_PROJECT_PRODUCTION_URL
+      ? \`https://\${process.env.VERCEL_PROJECT_PRODUCTION_URL}\`
+      : \`\${req.headers["x-forwarded-proto"] ?? "http"}://\${
+          req.headers["x-forwarded-host"] ?? req.headers.host
+        }\`);`;
+
+function makeHeader(jsOrTs: JsOrTs) {
+  return ifTs(jsOrTs, `import type { GetServerSideProps } from "next";\n`);
+}
+
+function makeSignature(jsOrTs: JsOrTs) {
+  return `export const getServerSideProps${ifTs(
+    jsOrTs,
+    ": GetServerSideProps"
+  )} = async ({ req, res }) => {`;
+}
+
+function makeSitemapXml(jsOrTs: JsOrTs) {
+  return `function escapeXml(str${ifTs(jsOrTs, ": string")}) {
+  return str
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;");
+}
+
+function makeSitemapXml(urls${ifTs(jsOrTs, ": string[]")}) {
+  const entries = urls.map(
+    (url) => \`  <url><loc>\${escapeXml(url)}</loc></url>\`
+  );
+  return \`<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+\${entries.join("\\n")}
+</urlset>
+\`;
+}`;
+}
+
+export function makeSitemap_pages_loader(jsOrTs: JsOrTs): string {
+  return `import { PLASMIC } from "@/plasmic-init";
+${makeHeader(jsOrTs)}
+${makeSitemapXml(jsOrTs)}
+
+${makeSignature(jsOrTs)}
+${siteUrl}
+
+  // fetchPages() drops pages whose path takes a param, e.g. "/blog/[slug]".
+  const pages = await PLASMIC.fetchPages();
+  const urls = pages.map((page) => new URL(page.path, siteUrl).toString());
+
+  res.setHeader("Content-Type", "application/xml; charset=utf-8");
+  res.write(makeSitemapXml(urls));
+  res.end();
+  return { props: {} };
+};
+
+export default function Sitemap() {
+  return null;
+}
+`;
+}
+
+export function makeSitemap_pages_codegen(jsOrTs: JsOrTs): string {
+  const projects =
+    jsOrTs === "ts"
+      ? `(plasmicJson.projects as {
+    components: { componentType: string; path?: string }[];
+  }[])`
+      : "plasmicJson.projects";
+
+  return `${makeHeader(jsOrTs)}import plasmicJson from "../plasmic.json";
+
+${makeSitemapXml(jsOrTs)}
+
+${makeSignature(jsOrTs)}
+${siteUrl}
+
+  const urls = ${projects}
+    .flatMap((project) => project.components)
+    .flatMap((component) =>
+      component.componentType === "page" &&
+      component.path &&
+      !component.path.includes("[")
+        ? // next.config sets trailingSlash.
+          [new URL(component.path.replace(/\\/?$/, "/"), siteUrl).toString()]
+        : []
+    );
+
+  res.setHeader("Content-Type", "application/xml; charset=utf-8");
+  res.write(makeSitemapXml(urls));
+  res.end();
+  return { props: {} };
+};
+
+export default function Sitemap() {
+  return null;
+}
+`;
+}
+
+export function makeRobots_pages(jsOrTs: JsOrTs): string {
+  return `${ifTs(
+    jsOrTs,
+    `import type { GetServerSideProps } from "next";\n\n`
+  )}${makeSignature(jsOrTs)}
+${siteUrl}
+
+  res.setHeader("Content-Type", "text/plain; charset=utf-8");
+  res.write(
+    \`User-agent: *\\nAllow: /\\n\\nSitemap: \${new URL(
+      "/sitemap.xml",
+      siteUrl
+    ).toString()}\\n\`
+  );
+  res.end();
+  return { props: {} };
+};
+
+export default function Robots() {
+  return null;
+}
+`;
+}