From ad64b2b4ee1474d14bf425cb27fe2e8e1ac1865b Mon Sep 17 00:00:00 2001 From: Greg Brimble Date: Mon, 5 May 2025 09:50:54 -0400 Subject: [PATCH 1/4] Add sparkles to migration guide and support dismissible banner --- astro.config.ts | 1 + package-lock.json | 59 ++++++++ package.json | 3 + patches/@astrojs+starlight+0.34.1.patch | 21 +++ src/components/Dismissible.tsx | 90 +++++++++++ src/components/SidebarIcon.astro | 34 +++++ src/components/overrides/Banner.astro | 140 ++++++++++++++++++ src/content/docs/pages/migrate-to-workers.mdx | 3 + .../docs/style-guide/frontmatter/banner.mdx | 91 +++++++++++- src/schemas/base.ts | 15 +- src/schemas/types/sidebar.ts | 9 ++ src/util/sidebar.ts | 5 + 12 files changed, 469 insertions(+), 2 deletions(-) create mode 100644 src/components/Dismissible.tsx create mode 100644 src/components/SidebarIcon.astro create mode 100644 src/components/overrides/Banner.astro diff --git a/astro.config.ts b/astro.config.ts index 6929d2514779230..587850969b97047 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -108,6 +108,7 @@ export default defineConfig({ "https://github.com/cloudflare/cloudflare-docs/edit/production/", }, components: { + Banner: "./src/components/overrides/Banner.astro", Footer: "./src/components/overrides/Footer.astro", Head: "./src/components/overrides/Head.astro", Header: "./src/components/overrides/Header.astro", diff --git a/package-lock.json b/package-lock.json index f1b343591b3ca39..ee4d435b6ab5812 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,9 @@ "@expressive-code/plugin-collapsible-sections": "0.41.2", "@floating-ui/react": "0.27.7", "@iarna/toml": "2.2.5", + "@lottiefiles/dotlottie-react": "0.13.5", "@marsidev/react-turnstile": "1.1.0", + "@nanostores/react": "1.0.0", "@octokit/webhooks-types": "7.6.1", "@stoplight/json-schema-tree": "4.0.0", "@tailwindcss/postcss": "4.1.4", @@ -64,6 +66,7 @@ "mdast-util-mdx-expression": "2.0.1", "mermaid": "11.6.0", "micromark-extension-mdxjs": "3.0.0", + "nanostores": "1.0.1", "node-html-parser": "7.0.1", "openapi-types": "12.1.3", "parse-duration": "2.1.4", @@ -4305,6 +4308,26 @@ "dev": true, "license": "MIT" }, + "node_modules/@lottiefiles/dotlottie-react": { + "version": "0.13.5", + "resolved": "https://registry.npmjs.org/@lottiefiles/dotlottie-react/-/dotlottie-react-0.13.5.tgz", + "integrity": "sha512-4U5okwjRqDPkjB572hfZtLXJ/LGfCo6vDwUB2KIPEUoSgqbIlw+UrbnaqVp3GS+dRvhMD27F2JObpHpYRlpF0Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@lottiefiles/dotlottie-web": "0.44.0" + }, + "peerDependencies": { + "react": "^17 || ^18 || ^19" + } + }, + "node_modules/@lottiefiles/dotlottie-web": { + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/@lottiefiles/dotlottie-web/-/dotlottie-web-0.44.0.tgz", + "integrity": "sha512-IUWKVciDJI/BMWDWnh7j0Ngd0N8q9ySRAwm84aDqIE07qpmdZ7x1rkIpBaU1yHSNqNYHeh1Rxsl+LC3CY4f0KA==", + "dev": true, + "license": "MIT" + }, "node_modules/@marsidev/react-turnstile": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@marsidev/react-turnstile/-/react-turnstile-1.1.0.tgz", @@ -4363,6 +4386,26 @@ "langium": "3.3.1" } }, + "node_modules/@nanostores/react": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@nanostores/react/-/react-1.0.0.tgz", + "integrity": "sha512-eDduyNy+lbQJMg6XxZ/YssQqF6b4OXMFEZMYKPJCCmBevp1lg0g+4ZRi94qGHirMtsNfAWKNwsjOhC+q1gvC+A==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "engines": { + "node": "^20.0.0 || >=22.0.0" + }, + "peerDependencies": { + "nanostores": "^0.9.0 || ^0.10.0 || ^0.11.0 || ^1.0.0", + "react": ">=18.0.0" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -15590,6 +15633,22 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/nanostores": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/nanostores/-/nanostores-1.0.1.tgz", + "integrity": "sha512-kNZ9xnoJYKg/AfxjrVL4SS0fKX++4awQReGqWnwTRHxeHGZ1FJFVgTqr/eMrNQdp0Tz7M7tG/TDaX8QfHDwVCw==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "engines": { + "node": "^20.0.0 || >=22.0.0" + } + }, "node_modules/natural-compare": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", diff --git a/package.json b/package.json index f00baf0b8744c99..d4de538e40b6617 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,9 @@ "@expressive-code/plugin-collapsible-sections": "0.41.2", "@floating-ui/react": "0.27.7", "@iarna/toml": "2.2.5", + "@lottiefiles/dotlottie-react": "0.13.5", "@marsidev/react-turnstile": "1.1.0", + "@nanostores/react": "1.0.0", "@octokit/webhooks-types": "7.6.1", "@stoplight/json-schema-tree": "4.0.0", "@tailwindcss/postcss": "4.1.4", @@ -82,6 +84,7 @@ "mdast-util-mdx-expression": "2.0.1", "mermaid": "11.6.0", "micromark-extension-mdxjs": "3.0.0", + "nanostores": "1.0.1", "node-html-parser": "7.0.1", "openapi-types": "12.1.3", "parse-duration": "2.1.4", diff --git a/patches/@astrojs+starlight+0.34.1.patch b/patches/@astrojs+starlight+0.34.1.patch index 6b2ff52c4e92b15..3e06be70ca1dabe 100644 --- a/patches/@astrojs+starlight+0.34.1.patch +++ b/patches/@astrojs+starlight+0.34.1.patch @@ -1,3 +1,24 @@ +diff --git a/node_modules/@astrojs/starlight/components/SidebarSublist.astro b/node_modules/@astrojs/starlight/components/SidebarSublist.astro +index a027f56..7e372d7 100644 +--- a/node_modules/@astrojs/starlight/components/SidebarSublist.astro ++++ b/node_modules/@astrojs/starlight/components/SidebarSublist.astro +@@ -4,6 +4,7 @@ import type { SidebarEntry } from '../utils/routing/types'; + import Icon from '../user-components/Icon.astro'; + import Badge from '../user-components/Badge.astro'; + import SidebarRestorePoint from './SidebarRestorePoint.astro'; ++import SidebarIcon from "~/components/SidebarIcon.astro" + + interface Props { + sublist: SidebarEntry[]; +@@ -24,7 +25,7 @@ const { sublist, nested } = Astro.props; + class:list={[{ large: !nested }, entry.attrs.class]} + {...entry.attrs} + > +- {entry.label} ++ {entry.icon && }{entry.label} + {entry.badge && ( + >({}); +export const isDismissed = (id: string) => dismissedMap.get()[id]; +export const setIsDismissed = (id: string, value: boolean) => + dismissedMap.setKey(id, value); + +const loadInitialValue = (id: string) => { + if (typeof localStorage === "undefined") return false; + + const dismissValue = localStorage.getItem(`dismisser-${id}`); + + if (dismissValue) { + if (new Date(dismissValue) > new Date()) { + return true; + } else { + localStorage.removeItem(`dismisser-${id}`); + } + } + + return false; +}; + +export const useDismissible = (id: string) => { + const store = useStore(dismissedMap); + + return { + isDismissed: store[id], + dismiss: (days: number) => { + setIsDismissed(id, true); + localStorage.setItem( + `dismisser-${id}`, + new Date(Date.now() + days * 24 * 60 * 60 * 1000).toISOString(), + ); + }, + }; +}; + +export const Dismisser = ({ + id, + days, + children, +}: { + id: string; + days: number; + children: React.ReactNode; +}) => { + const { dismiss } = useDismissible(id); + + return ( + { + dismiss(days); + }} + > + {children} + + ); +}; + +export const Dismissible = ({ + id, + defaultDisplay, + children, +}: { + id: string; + defaultDisplay?: CSSProperties["display"]; + children: React.ReactNode; +}) => { + const [loaded, setLoaded] = useState(false); + const store = useStore(dismissedMap); + + useEffect(() => { + setIsDismissed(id, loadInitialValue(id)); + setLoaded(true); + }, []); + + return ( + + {children} + + ); +}; diff --git a/src/components/SidebarIcon.astro b/src/components/SidebarIcon.astro new file mode 100644 index 000000000000000..46a16187537086b --- /dev/null +++ b/src/components/SidebarIcon.astro @@ -0,0 +1,34 @@ +--- +import { z } from "astro:schema"; +import { SidebarIconSchema } from "~/schemas/types/sidebar"; +import { DotLottieWorkerReact } from "@lottiefiles/dotlottie-react"; + +type Props = z.infer; + +const props = SidebarIconSchema(); + +let iconProps = props.parse(Astro.props); + +// https://angel-rs.github.io/css-color-filter-generator/ +const filter = + iconProps?.color === "primary" + ? "brightness(0) saturate(100%) invert(60%) sepia(90%) saturate(2312%) hue-rotate(347deg) brightness(99%) contrast(95%)" // --orange-accent-200 + : undefined; +--- + +{ + iconProps?.lottieLink && ( + + ) +} diff --git a/src/components/overrides/Banner.astro b/src/components/overrides/Banner.astro new file mode 100644 index 000000000000000..0ffcc09e0b9bdfd --- /dev/null +++ b/src/components/overrides/Banner.astro @@ -0,0 +1,140 @@ +--- +import type { StarlightIcon } from "@astrojs/starlight/types"; +import { Dismissible, Dismisser } from "../Dismissible"; +import { Icon } from "@astrojs/starlight/components"; + +const { banner } = Astro.locals.starlightRoute.entry.data; +--- + +{ + () => { + if (!banner) return; + + let icon: StarlightIcon | undefined = undefined; + switch (banner.type) { + case "note": + icon = "information"; + break; + case "tip": + icon = "rocket"; + break; + case "caution": + icon = "warning"; + break; + case "danger": + icon = "error"; + break; + } + + if (banner.dismissible) { + return ( + +
+
+ {icon && } + +
+ + + + Close + + + + +
+ + ); + } + + return ( +
+
+ {icon && } + +
+
+ ); + } +} + + diff --git a/src/content/docs/pages/migrate-to-workers.mdx b/src/content/docs/pages/migrate-to-workers.mdx index 5928ad950164554..8aea858dc4346ea 100644 --- a/src/content/docs/pages/migrate-to-workers.mdx +++ b/src/content/docs/pages/migrate-to-workers.mdx @@ -2,4 +2,7 @@ pcx_content_type: navigation title: Migrate to Workers external_link: /workers/static-assets/migrate-from-pages/ +icon: + lottieLink: https://fonts.gstatic.com/s/e/notoemoji/latest/2728/lottie.json + color: primary --- diff --git a/src/content/docs/style-guide/frontmatter/banner.mdx b/src/content/docs/style-guide/frontmatter/banner.mdx index d2d8399f4614940..9fcfa029b9a3cf8 100644 --- a/src/content/docs/style-guide/frontmatter/banner.mdx +++ b/src/content/docs/style-guide/frontmatter/banner.mdx @@ -20,4 +20,93 @@ description: How to display a banner at the top of the page and when to use it. banner: content: Do not use banners in the Frontmatter unless a change will cause customer application to break. --- -``` \ No newline at end of file +``` + +## Dismissible + +You can make a banner dismissible (for some number of days) by adding the `dismissible` property to the banner object. + +```mdx wrap +--- +title: Banner +description: How to display a banner at the top of the page and when to use it. +banner: + content: Do not use banners in the Frontmatter unless a change will cause customer application to break. + dismissible: + id: banner-example + days: 7 # default +--- +``` + +Any other banner with the same `dismissible_id` will be dismissed when the banner is displayed. + +## Styles / Types + +### Note + +The note banner is used to alert about important information. + +```mdx wrap +--- +title: Banner +description: How to display a banner at the top of the page and when to use it. +banner: + content: Ensure you read this! + type: note +--- +``` + +### Tip + +The tip banner is used to alert about important suggestions. + +```mdx wrap +--- +title: Banner +description: How to display a banner at the top of the page and when to use it. +banner: + content: Consider this alternative! + type: tip +--- +``` + +### Caution + +The caution banner is used to warn readers of upcoming disruptive changes. + +```mdx wrap +--- +title: Banner +description: How to display a banner at the top of the page and when to use it. +banner: + content: This is deprecated and will break on 1970-01-01! + type: caution +--- +``` + +### Danger + +The danger banner is used to alert about errors. + +```mdx wrap +--- +title: Banner +description: How to display a banner at the top of the page and when to use it. +banner: + content: This has been removed! + type: danger +--- +``` + +### Default + +The default banner is used in all other circumstances. + +```mdx wrap +--- +title: Banner +description: How to display a banner at the top of the page and when to use it. +banner: + content: Do not use banners in the Frontmatter unless a change will cause customer application to break. +--- +``` diff --git a/src/schemas/base.ts b/src/schemas/base.ts index 24706741e8a6aad..ad3a669224addb8 100644 --- a/src/schemas/base.ts +++ b/src/schemas/base.ts @@ -1,7 +1,7 @@ import { z } from "astro:schema"; import type { SchemaContext } from "astro:content"; -import { sidebar } from "./types/sidebar"; +import { sidebar, SidebarIconSchema } from "./types/sidebar"; const spotlightAuthorDetails = z .object({ @@ -112,4 +112,17 @@ export const baseSchema = ({ image }: SchemaContext) => }) .optional() .describe("Used by overrides for style guide component documentation"), + banner: z + .object({ + content: z.string(), + type: z + .enum(["default", "note", "tip", "caution", "danger"]) + .optional() + .default("default"), + dismissible: z + .object({ id: z.string(), days: z.number().optional().default(7) }) + .optional(), + }) + .optional(), + icon: SidebarIconSchema(), }); diff --git a/src/schemas/types/sidebar.ts b/src/schemas/types/sidebar.ts index d69ba71b73754c3..38982dd666e5ce1 100644 --- a/src/schemas/types/sidebar.ts +++ b/src/schemas/types/sidebar.ts @@ -49,6 +49,14 @@ const BadgeConfigSchema = () => }) .optional(); +export const SidebarIconSchema = () => + z + .object({ + lottieLink: z.string(), + color: z.enum(["primary"]).optional(), + }) + .optional(); + export const sidebar = z .object({ order: z.number().optional(), @@ -71,6 +79,7 @@ export const sidebar = z "Hides the index page from the sidebar. Refer to [Sidebar](/style-guide/frontmatter/sidebar/).", ), badge: BadgeConfigSchema(), + icon: SidebarIconSchema(), }) .optional(), }) diff --git a/src/util/sidebar.ts b/src/util/sidebar.ts index a593c04f9b3cd3b..bfb4ac368c28602 100644 --- a/src/util/sidebar.ts +++ b/src/util/sidebar.ts @@ -6,9 +6,11 @@ import { externalLinkArrow } from "~/plugins/rehype/external-links"; type Link = Extract & { order?: number; + icon?: { lottieLink: string }; }; type Group = Extract & { order?: number; + icon?: { lottieLink: string }; }; export type SidebarEntry = Link | Group; @@ -195,6 +197,7 @@ async function handleGroup(group: Group): Promise { const frontmatter = entry.data; + group.icon = frontmatter.sidebar.group?.icon ?? frontmatter.icon; group.label = frontmatter.sidebar.group?.label ?? frontmatter.title; group.order = frontmatter.sidebar.order ?? Number.MAX_VALUE; @@ -206,6 +209,7 @@ async function handleGroup(group: Group): Promise { return { type: "link", href: index.href, + icon: group.icon, label: group.label, order: group.order, attrs: { @@ -280,6 +284,7 @@ async function handleLink(link: Link): Promise { if (frontmatter.external_link && !frontmatter.sidebar.group?.hideIndex) { return { ...link, + icon: frontmatter.icon, label: link.label.concat(externalLinkArrow), href: frontmatter.external_link, badge: frontmatter.external_link.startsWith("/api") From 8323e4c54a108b969c97742d789c55977eb86455 Mon Sep 17 00:00:00 2001 From: Greg Brimble Date: Mon, 5 May 2025 10:13:23 -0400 Subject: [PATCH 2/4] Add banner to Pages --- src/content/docs/pages/configuration/api.mdx | 177 +++++++++--------- .../configuration/branch-build-controls.mdx | 36 ++-- .../pages/configuration/build-caching.mdx | 5 + .../configuration/build-configuration.mdx | 5 + .../docs/pages/configuration/build-image.mdx | 5 + .../pages/configuration/build-watch-paths.mdx | 5 + .../pages/configuration/custom-domains.mdx | 5 + .../pages/configuration/debugging-pages.mdx | 5 + .../docs/pages/configuration/deploy-hooks.mdx | 12 +- .../docs/pages/configuration/early-hints.mdx | 22 ++- .../git-integration/github-integration.mdx | 5 + .../git-integration/gitlab-integration.mdx | 5 + .../configuration/git-integration/index.mdx | 5 + .../git-integration/troubleshooting.mdx | 5 + .../docs/pages/configuration/headers.mdx | 5 + .../docs/pages/configuration/index.mdx | 10 +- .../docs/pages/configuration/monorepos.mdx | 5 + .../configuration/preview-deployments.mdx | 5 + .../docs/pages/configuration/redirects.mdx | 5 + .../docs/pages/configuration/rollbacks.mdx | 10 +- .../pages/configuration/serving-pages.mdx | 10 +- src/content/docs/pages/demos.mdx | 21 ++- .../framework-guides/deploy-a-blazor-site.mdx | 5 + .../framework-guides/deploy-a-brunch-site.mdx | 5 + .../deploy-a-docusaurus-site.mdx | 5 + .../framework-guides/deploy-a-gatsby-site.mdx | 5 + .../deploy-a-gridsome-site.mdx | 5 + .../framework-guides/deploy-a-hexo-site.mdx | 5 + .../framework-guides/deploy-a-hono-site.mdx | 5 + .../framework-guides/deploy-a-hugo-site.mdx | 5 + .../framework-guides/deploy-a-jekyll-site.mdx | 5 + .../framework-guides/deploy-a-nuxt-site.mdx | 5 + .../deploy-a-pelican-site.mdx | 5 + .../framework-guides/deploy-a-preact-site.mdx | 5 + .../framework-guides/deploy-a-qwik-site.mdx | 5 + .../framework-guides/deploy-a-react-site.mdx | 5 + .../framework-guides/deploy-a-remix-site.mdx | 5 + .../deploy-a-solid-start-site.mdx | 5 + .../framework-guides/deploy-a-sphinx-site.mdx | 5 + .../deploy-a-svelte-kit-site.mdx | 5 + .../deploy-a-vite3-project.mdx | 6 +- .../deploy-a-vitepress-site.mdx | 5 + .../framework-guides/deploy-a-vue-site.mdx | 5 + .../framework-guides/deploy-a-zola-site.mdx | 5 + .../deploy-an-analog-site.mdx | 5 + .../deploy-an-angular-site.mdx | 5 + .../framework-guides/deploy-an-astro-site.mdx | 5 + .../deploy-an-elderjs-site.mdx | 5 + .../deploy-an-eleventy-site.mdx | 5 + .../deploy-an-emberjs-site.mdx | 5 + .../deploy-an-mkdocs-site.mdx | 5 + .../framework-guides/deploy-anything.mdx | 5 + .../docs/pages/framework-guides/index.mdx | 10 +- .../nextjs/deploy-a-static-nextjs-site.mdx | 5 + .../pages/framework-guides/nextjs/index.mdx | 18 +- .../framework-guides/nextjs/resources.mdx | 9 +- .../framework-guides/nextjs/ssr/advanced.mdx | 5 + .../framework-guides/nextjs/ssr/bindings.mdx | 5 + .../framework-guides/nextjs/ssr/caching.mdx | 8 +- .../nextjs/ssr/get-started.mdx | 5 + .../framework-guides/nextjs/ssr/index.mdx | 9 +- .../nextjs/ssr/static-assets.mdx | 6 +- .../nextjs/ssr/supported-features.mdx | 5 + .../nextjs/ssr/troubleshooting.mdx | 28 +-- .../docs/pages/functions/advanced-mode.mdx | 60 +++--- .../docs/pages/functions/api-reference.mdx | 74 +++++--- src/content/docs/pages/functions/bindings.mdx | 9 +- .../pages/functions/debugging-and-logging.mdx | 34 ++-- .../pages/functions/examples/ab-testing.mdx | 5 + .../pages/functions/examples/cors-headers.mdx | 5 + .../docs/pages/functions/examples/index.mdx | 10 +- .../docs/pages/functions/get-started.mdx | 20 +- src/content/docs/pages/functions/index.mdx | 8 +- .../pages/functions/local-development.mdx | 5 + src/content/docs/pages/functions/metrics.mdx | 16 +- .../docs/pages/functions/middleware.mdx | 34 ++-- .../docs/pages/functions/module-support.mdx | 34 ++-- .../functions/plugins/cloudflare-access.mdx | 5 + .../functions/plugins/community-plugins.mdx | 26 +-- .../pages/functions/plugins/google-chat.mdx | 5 + .../docs/pages/functions/plugins/graphql.mdx | 5 + .../docs/pages/functions/plugins/hcaptcha.mdx | 5 + .../pages/functions/plugins/honeycomb.mdx | 5 + .../docs/pages/functions/plugins/index.mdx | 5 + .../docs/pages/functions/plugins/sentry.mdx | 5 + .../pages/functions/plugins/static-forms.mdx | 5 + .../docs/pages/functions/plugins/stytch.mdx | 5 + .../pages/functions/plugins/turnstile.mdx | 5 + .../pages/functions/plugins/vercel-og.mdx | 5 + src/content/docs/pages/functions/pricing.mdx | 8 +- src/content/docs/pages/functions/routing.mdx | 33 ++-- .../docs/pages/functions/smart-placement.mdx | 8 +- .../docs/pages/functions/source-maps.mdx | 19 +- .../docs/pages/functions/typescript.mdx | 5 + .../functions/wrangler-configuration.mdx | 28 +-- src/content/docs/pages/get-started/c3.mdx | 11 +- .../docs/pages/get-started/direct-upload.mdx | 5 + .../pages/get-started/git-integration.mdx | 5 + src/content/docs/pages/get-started/index.mdx | 8 +- .../pages/how-to/add-custom-http-headers.mdx | 5 + .../pages/how-to/build-commands-branches.mdx | 6 +- .../pages/how-to/custom-branch-aliases.mdx | 8 +- .../pages/how-to/deploy-a-wordpress-site.mdx | 22 ++- .../docs/pages/how-to/enable-zaraz.mdx | 8 +- src/content/docs/pages/how-to/index.mdx | 10 +- .../pages/how-to/npm-private-registry.mdx | 5 + .../how-to/preview-with-cloudflare-tunnel.mdx | 5 + .../how-to/redirect-to-custom-domain.mdx | 16 +- .../refactor-a-worker-to-pages-functions.mdx | 7 + ...ect-upload-with-continuous-integration.mdx | 40 ++-- .../use-worker-for-ab-testing-in-pages.mdx | 130 ++++++------- .../docs/pages/how-to/web-analytics.mdx | 8 +- .../docs/pages/how-to/www-redirect.mdx | 5 + src/content/docs/pages/index.mdx | 63 ++++--- src/content/docs/pages/migrations/index.mdx | 5 + .../migrations/migrating-from-firebase.mdx | 5 + .../migrating-from-netlify/index.mdx | 5 + .../migrating-from-vercel/index.mdx | 5 + .../migrating-from-workers/index.mdx | 5 + .../migrating-jekyll-from-github-pages.mdx | 5 + src/content/docs/pages/platform/changelog.mdx | 5 + src/content/docs/pages/platform/index.mdx | 10 +- .../docs/pages/platform/known-issues.mdx | 5 + src/content/docs/pages/platform/limits.mdx | 12 +- .../docs/pages/platform/storage-options.mdx | 1 - 125 files changed, 1077 insertions(+), 481 deletions(-) diff --git a/src/content/docs/pages/configuration/api.mdx b/src/content/docs/pages/configuration/api.mdx index 30a3e16f33379bb..d981d3dae972145 100644 --- a/src/content/docs/pages/configuration/api.mdx +++ b/src/content/docs/pages/configuration/api.mdx @@ -1,7 +1,11 @@ --- pcx_content_type: concept title: REST API - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- The [Pages API](/api/resources/pages/subresources/projects/methods/list/) empowers you to build automations and integrate Pages with your development workflow. At a high level, the API endpoints let you manage deployments and builds and configure projects. Cloudflare supports [Deploy Hooks](/pages/configuration/deploy-hooks/) for headless CMS deployments. Refer to the [API documentation](https://api.cloudflare.com/) for a full breakdown of object types and endpoints. @@ -37,22 +41,23 @@ The API is even more powerful when combined with Cloudflare Workers: the easiest Suppose we have a CMS that pulls data from live sources to compile a static output. You can keep the static content as recent as possible by triggering new builds periodically using the API. ```js -const endpoint = "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments"; +const endpoint = + "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments"; export default { - async scheduled(_, env) { - const init = { - method: "POST", - headers: { - "Content-Type": "application/json;charset=UTF-8", - // We recommend you store the API token as a secret using the Workers dashboard or using Wrangler as documented here: https://developers.cloudflare.com/workers/wrangler/commands/#secret - "Authorization": `Bearer ${env.API_TOKEN}`, - }, - }; - - await fetch(endpoint, init); - } -} + async scheduled(_, env) { + const init = { + method: "POST", + headers: { + "Content-Type": "application/json;charset=UTF-8", + // We recommend you store the API token as a secret using the Workers dashboard or using Wrangler as documented here: https://developers.cloudflare.com/workers/wrangler/commands/#secret + Authorization: `Bearer ${env.API_TOKEN}`, + }, + }; + + await fetch(endpoint, init); + }, +}; ``` After you have deployed the JavaScript Worker, set a cron trigger in your Worker to run this script periodically. Refer to [Cron Triggers](/workers/configuration/cron-triggers/) for more details. @@ -62,37 +67,41 @@ After you have deployed the JavaScript Worker, set a cron trigger in your Worker Cloudflare Pages hosts and serves all project deployments on preview links. Suppose you want to keep your project private and prevent access to your old deployments. You can use the API to delete deployments after a month, so that they are no longer public online. The latest deployment for a branch cannot be deleted. ```js -const endpoint = "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments"; +const endpoint = + "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments"; const expirationDays = 7; export default { - async scheduled(_, env) { - const init = { - headers: { - "Content-Type": "application/json;charset=UTF-8", - // We recommend you store the API token as a secret using the Workers dashboard or using Wrangler as documented here: https://developers.cloudflare.com/workers/wrangler/commands/#secret - "Authorization": `Bearer ${env.API_TOKEN}`, - }, - }; - - const response = await fetch(endpoint, init); - const deployments = await response.json(); - - for (const deployment of deployments.result) { - // Check if the deployment was created within the last x days (as defined by `expirationDays` above) - if ((Date.now() - new Date(deployment.created_on)) / 86400000 > expirationDays) { - // Delete the deployment - await fetch(`${endpoint}/${deployment.id}`, { - method: "DELETE", - headers: { - "Content-Type": "application/json;charset=UTF-8", - "Authorization": `Bearer ${env.API_TOKEN}`, - }, - }); - } - } - } -} + async scheduled(_, env) { + const init = { + headers: { + "Content-Type": "application/json;charset=UTF-8", + // We recommend you store the API token as a secret using the Workers dashboard or using Wrangler as documented here: https://developers.cloudflare.com/workers/wrangler/commands/#secret + Authorization: `Bearer ${env.API_TOKEN}`, + }, + }; + + const response = await fetch(endpoint, init); + const deployments = await response.json(); + + for (const deployment of deployments.result) { + // Check if the deployment was created within the last x days (as defined by `expirationDays` above) + if ( + (Date.now() - new Date(deployment.created_on)) / 86400000 > + expirationDays + ) { + // Delete the deployment + await fetch(`${endpoint}/${deployment.id}`, { + method: "DELETE", + headers: { + "Content-Type": "application/json;charset=UTF-8", + Authorization: `Bearer ${env.API_TOKEN}`, + }, + }); + } + } + }, +}; ``` After you have deployed the JavaScript Worker, you can set a cron trigger in your Worker to run this script periodically. Refer to the [Cron Triggers guide](/workers/configuration/cron-triggers/) for more details. @@ -103,40 +112,40 @@ Imagine you are working on a development team using Pages to build your websites ```js const deploymentsEndpoint = - "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments"; + "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments"; const projectEndpoint = - "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}"; + "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}"; export default { - async fetch(request, env) { - const init = { - headers: { - "content-type": "application/json;charset=UTF-8", - // We recommend you store the API token as a secret using the Workers dashboard or using Wrangler as documented here: https://developers.cloudflare.com/workers/wrangler/commands/#secret - "Authorization": `Bearer ${env.API_TOKEN}`, - }, - }; - - const style = `body { padding: 6em; font-family: sans-serif; } h1 { color: #f6821f }`; - let content = "

Project

"; - - let response = await fetch(projectEndpoint, init); - const projectResponse = await response.json(); - content += `

Project Name: ${projectResponse.result.name}

`; - content += `

Project ID: ${projectResponse.result.id}

`; - content += `

Pages Subdomain: ${projectResponse.result.subdomain}

`; - content += `

Domains: ${projectResponse.result.domains}

`; - content += `

Latest preview: ${projectResponse.result.canonical_deployment.url}

`; - - content += `

Deployments

`; - response = await fetch(deploymentsEndpoint, init); - const deploymentsResponse = await response.json(); - - for (const deployment of deploymentsResponse.result) { - content += `

Deployment: ${deployment.id}

`; - } - - let html = ` + async fetch(request, env) { + const init = { + headers: { + "content-type": "application/json;charset=UTF-8", + // We recommend you store the API token as a secret using the Workers dashboard or using Wrangler as documented here: https://developers.cloudflare.com/workers/wrangler/commands/#secret + Authorization: `Bearer ${env.API_TOKEN}`, + }, + }; + + const style = `body { padding: 6em; font-family: sans-serif; } h1 { color: #f6821f }`; + let content = "

Project

"; + + let response = await fetch(projectEndpoint, init); + const projectResponse = await response.json(); + content += `

Project Name: ${projectResponse.result.name}

`; + content += `

Project ID: ${projectResponse.result.id}

`; + content += `

Pages Subdomain: ${projectResponse.result.subdomain}

`; + content += `

Domains: ${projectResponse.result.domains}

`; + content += `

Latest preview: ${projectResponse.result.canonical_deployment.url}

`; + + content += `

Deployments

`; + response = await fetch(deploymentsEndpoint, init); + const deploymentsResponse = await response.json(); + + for (const deployment of deploymentsResponse.result) { + content += `

Deployment: ${deployment.id}

`; + } + + let html = ` Example Pages Project @@ -148,17 +157,17 @@ export default { `; - return new Response(html, { - headers: { - "Content-Type": "text/html;charset=UTF-8", - }, - }); - } -} + return new Response(html, { + headers: { + "Content-Type": "text/html;charset=UTF-8", + }, + }); + }, +}; ``` ## Related resources -* [Pages API Docs](/api/resources/pages/subresources/projects/methods/list/) -* [Workers Getting Started Guide](/workers/get-started/guide/) -* [Workers Cron Triggers](/workers/configuration/cron-triggers/) +- [Pages API Docs](/api/resources/pages/subresources/projects/methods/list/) +- [Workers Getting Started Guide](/workers/get-started/guide/) +- [Workers Cron Triggers](/workers/configuration/cron-triggers/) diff --git a/src/content/docs/pages/configuration/branch-build-controls.mdx b/src/content/docs/pages/configuration/branch-build-controls.mdx index 512eb0684bb0917..20688c25f56908d 100644 --- a/src/content/docs/pages/configuration/branch-build-controls.mdx +++ b/src/content/docs/pages/configuration/branch-build-controls.mdx @@ -1,10 +1,14 @@ --- pcx_content_type: concept title: Branch deployment controls - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- -import { Render } from "~/components" +import { Render } from "~/components"; When connected to your git repository, Pages allows you to control which environments and branches you would like to automatically deploy to. By default, Pages will trigger a deployment any time you commit to either your production or preview environment. However, with branch deployment controls, you can configure automatic deployments to suit your preference on a per project basis. @@ -12,10 +16,8 @@ When connected to your git repository, Pages allows you to control which environ :::caution[Direct Upload] - - ::: To configure deployment options, go to your Pages project > **Settings** > **Builds & deployments** > **Configure Production deployments**. Pages will default to setting your production environment to the branch you first push, but you can set your production to another branch if you choose. @@ -26,33 +28,31 @@ You can also enable or disable automatic deployment behavior on the production b When configuring automatic preview deployments, there are three options to choose from. -* **All non-Production branches**: By default, Pages will automatically deploy any and every commit to a preview branch. -* **None**: Turns off automatic builds for all preview branches. -* **Custom branches**: Customize the automatic deployments of certain preview branches. +- **All non-Production branches**: By default, Pages will automatically deploy any and every commit to a preview branch. +- **None**: Turns off automatic builds for all preview branches. +- **Custom branches**: Customize the automatic deployments of certain preview branches. ### Custom preview branch control By selecting **Custom branches**, you can specify branches you wish to include and exclude from automatic deployments in the provided configuration fields. The configuration fields can be filled in two ways: -* **Static branch names**: Enter the precise name of the branch you are looking to include or exclude (for example, staging or dev). -* **Wildcard syntax**: Use wildcards to match multiple branches. You can specify wildcards at the start or end of your rule. The order of execution for the configuration is (1) Excludes, (2) Includes, (3) Skip. Pages will process the exclude configuration first, then go to the include configuration. If a branch does not match either then it will be skipped. +- **Static branch names**: Enter the precise name of the branch you are looking to include or exclude (for example, staging or dev). +- **Wildcard syntax**: Use wildcards to match multiple branches. You can specify wildcards at the start or end of your rule. The order of execution for the configuration is (1) Excludes, (2) Includes, (3) Skip. Pages will process the exclude configuration first, then go to the include configuration. If a branch does not match either then it will be skipped. :::note[Wildcard syntax] - A wildcard (`*`) is a character that is used within rules. It can be placed alone to match anything or placed at the start or end of a rule to allow for better control over branch configuration. A wildcard will match zero or more characters.For example, if you wanted to match all branches that started with `fix/` then you would create the rule `fix/*` to match strings like `fix/1`, `fix/bugs`or `fix/`. - ::: **Example 1:** If you want to enforce branch prefixes such as `fix/`, `feat/`, or `chore/` with wildcard syntax, you can include and exclude certain branches with the following rules: -* Include Preview branches: +- Include Preview branches: `fix/*`, `feat/*`, `chore/*` -* Exclude Preview branches: +- Exclude Preview branches: \`\` Here Pages will include any branches with the indicated prefixes and exclude everything else. In this example, the excluding option is left empty. @@ -61,22 +61,22 @@ Here Pages will include any branches with the indicated prefixes and exclude eve If you wanted to prevent [dependabot](https://github.com/dependabot) from creating a deployment for each PR it creates, you can exclude those branches with the following: -* Include Preview branches: +- Include Preview branches: `*` -* Exclude Preview branches: +- Exclude Preview branches: `dependabot/*` -Here Pages will include all branches except any branch starting with `dependabot`. In this example, the excluding option means any `dependabot/` branches will not be built. +Here Pages will include all branches except any branch starting with `dependabot`. In this example, the excluding option means any `dependabot/` branches will not be built. **Example 3:** If you only want to deploy release-prefixed branches, then you could use the following rules: -* Include Preview branches: +- Include Preview branches: `release/*` -* Exclude Preview branches: +- Exclude Preview branches: `*` This will deploy only branches starting with `release/`. diff --git a/src/content/docs/pages/configuration/build-caching.mdx b/src/content/docs/pages/configuration/build-caching.mdx index f2a15dac4433e96..05cefebc7a0f170 100644 --- a/src/content/docs/pages/configuration/build-caching.mdx +++ b/src/content/docs/pages/configuration/build-caching.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: concept title: Build caching +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- Improve Pages build times by caching dependencies and build output between builds with a project-wide shared cache. diff --git a/src/content/docs/pages/configuration/build-configuration.mdx b/src/content/docs/pages/configuration/build-configuration.mdx index 1a193fd0d1e0031..cc5bbf8821e388e 100644 --- a/src/content/docs/pages/configuration/build-configuration.mdx +++ b/src/content/docs/pages/configuration/build-configuration.mdx @@ -2,6 +2,11 @@ pcx_content_type: concept title: Build configuration rss: https://github.com/cloudflare/cloudflare-docs/commits/production/src/content/docs/pages/configuration/build-configuration.mdx.atom +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { Details, PagesBuildPresetsTable } from "~/components"; diff --git a/src/content/docs/pages/configuration/build-image.mdx b/src/content/docs/pages/configuration/build-image.mdx index e9cc262c3156854..8a2412df6075e6a 100644 --- a/src/content/docs/pages/configuration/build-image.mdx +++ b/src/content/docs/pages/configuration/build-image.mdx @@ -2,6 +2,11 @@ pcx_content_type: concept title: Build image rss: https://github.com/cloudflare/cloudflare-docs/commits/production/src/content/partials/pages/_platform-language-support-and-tools.atom +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { diff --git a/src/content/docs/pages/configuration/build-watch-paths.mdx b/src/content/docs/pages/configuration/build-watch-paths.mdx index 39de1b7f43f61e0..8b37e5ab787c01c 100644 --- a/src/content/docs/pages/configuration/build-watch-paths.mdx +++ b/src/content/docs/pages/configuration/build-watch-paths.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: concept title: Build watch paths +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- When you connect a git repository to Pages, by default a change to any file in the repository will trigger a Pages build. You can configure Pages to include or exclude specific paths to specify if Pages should skip a build for a given path. This can be especially helpful if you are using a monorepo project structure and want to limit the amount of builds being kicked off. diff --git a/src/content/docs/pages/configuration/custom-domains.mdx b/src/content/docs/pages/configuration/custom-domains.mdx index 6511a1024aab72e..2023d1ab793d045 100644 --- a/src/content/docs/pages/configuration/custom-domains.mdx +++ b/src/content/docs/pages/configuration/custom-domains.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Custom domains +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { Render } from "~/components"; diff --git a/src/content/docs/pages/configuration/debugging-pages.mdx b/src/content/docs/pages/configuration/debugging-pages.mdx index afc86858ac2c0b1..86c59968c73406c 100644 --- a/src/content/docs/pages/configuration/debugging-pages.mdx +++ b/src/content/docs/pages/configuration/debugging-pages.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Debugging Pages +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- When setting up your Pages project, you may encounter various errors that prevent you from successfully deploying your site. This guide gives an overview of some common errors and solutions. diff --git a/src/content/docs/pages/configuration/deploy-hooks.mdx b/src/content/docs/pages/configuration/deploy-hooks.mdx index df0b44477ba75de..e1a61856da70153 100644 --- a/src/content/docs/pages/configuration/deploy-hooks.mdx +++ b/src/content/docs/pages/configuration/deploy-hooks.mdx @@ -1,14 +1,18 @@ --- pcx_content_type: concept title: Deploy Hooks - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- With Deploy Hooks, you can trigger deployments using event sources beyond commits in your source repository. Each event source may obtain its own unique URL, which will receive HTTP POST requests in order to initiate new deployments. This feature allows you to integrate Pages with new or existing workflows. For example, you may: -* Automatically deploy new builds whenever content in a Headless CMS changes -* Implement a fully customized CI/CD pipeline, deploying only under desired conditions -* Schedule a CRON trigger to update your website on a fixed timeline +- Automatically deploy new builds whenever content in a Headless CMS changes +- Implement a fully customized CI/CD pipeline, deploying only under desired conditions +- Schedule a CRON trigger to update your website on a fixed timeline To create a Deploy Hook: diff --git a/src/content/docs/pages/configuration/early-hints.mdx b/src/content/docs/pages/configuration/early-hints.mdx index f2b940f23b8a2ba..10c45ea5df6f577 100644 --- a/src/content/docs/pages/configuration/early-hints.mdx +++ b/src/content/docs/pages/configuration/early-hints.mdx @@ -1,7 +1,11 @@ --- pcx_content_type: concept title: Early Hints - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- [Early Hints](/cache/advanced-configuration/early-hints/) help the browser to load webpages faster. Early Hints is enabled automatically on all `pages.dev` domains and custom domains. @@ -27,9 +31,9 @@ Pages will attach this `Link: ; rel=preload; as=style` header. Earl In order to make the authoring experience easier, Pages also automatically generates `Link` headers from any `` HTML elements with the following attributes: -* `href` -* `as` (optional) -* `rel` (one of `preconnect`, `preload`, or `modulepreload`) +- `href` +- `as` (optional) +- `rel` (one of `preconnect`, `preload`, or `modulepreload`) `` elements which contain any other additional attributes (for example, `fetchpriority`, `crossorigin` or `data-do-not-generate-a-link-header`) will not be used to generate `Link` headers in order to prevent accidentally losing any custom prioritization logic that would otherwise be dropped as an Early Hint. @@ -37,10 +41,10 @@ This allows you to directly create Early Hints as you are writing your document, ```html - - - - + + + + ``` @@ -55,8 +59,6 @@ Remove any automatically generated `Link` headers by adding the following to you :::caution - Automatic `Link` header generation should not have any negative performance impact on your website. If you need to disable this feature, contact us by letting us know about your circumstance in our [Discord server](https://discord.com/invite/cloudflaredev). - ::: diff --git a/src/content/docs/pages/configuration/git-integration/github-integration.mdx b/src/content/docs/pages/configuration/git-integration/github-integration.mdx index 0ffe8cdbc9ba063..1b50becac305f80 100644 --- a/src/content/docs/pages/configuration/git-integration/github-integration.mdx +++ b/src/content/docs/pages/configuration/git-integration/github-integration.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: concept title: GitHub integration +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- You can connect each Cloudflare Pages project to a GitHub repository, and Cloudflare will automatically deploy your code every time you push a change to a branch. diff --git a/src/content/docs/pages/configuration/git-integration/gitlab-integration.mdx b/src/content/docs/pages/configuration/git-integration/gitlab-integration.mdx index 8a829d389418d26..b43ac535d777959 100644 --- a/src/content/docs/pages/configuration/git-integration/gitlab-integration.mdx +++ b/src/content/docs/pages/configuration/git-integration/gitlab-integration.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: concept title: GitLab integration +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- You can connect each Cloudflare Pages project to a GitLab repository, and Cloudflare will automatically deploy your code every time you push a change to a branch. diff --git a/src/content/docs/pages/configuration/git-integration/index.mdx b/src/content/docs/pages/configuration/git-integration/index.mdx index 24ede8576e9dc4c..2af5d137d3f6b10 100644 --- a/src/content/docs/pages/configuration/git-integration/index.mdx +++ b/src/content/docs/pages/configuration/git-integration/index.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: concept title: Git integration +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- You can connect each Cloudflare Pages project to a [GitHub](/pages/configuration/git-integration/github-integration) or [GitLab](/pages/configuration/git-integration/gitlab-integration) repository, and Cloudflare will automatically deploy your code every time you push a change to a branch. diff --git a/src/content/docs/pages/configuration/git-integration/troubleshooting.mdx b/src/content/docs/pages/configuration/git-integration/troubleshooting.mdx index 5da836dddb7e2eb..b452172156a821c 100644 --- a/src/content/docs/pages/configuration/git-integration/troubleshooting.mdx +++ b/src/content/docs/pages/configuration/git-integration/troubleshooting.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: concept title: Troubleshooting builds +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- If your git integration is experiencing issues, you may find the following banners in the Deployment page of your Pages project. diff --git a/src/content/docs/pages/configuration/headers.mdx b/src/content/docs/pages/configuration/headers.mdx index d1c2b2fb3547739..6c1ae275c017e86 100644 --- a/src/content/docs/pages/configuration/headers.mdx +++ b/src/content/docs/pages/configuration/headers.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: concept title: Headers +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { Render } from "~/components"; diff --git a/src/content/docs/pages/configuration/index.mdx b/src/content/docs/pages/configuration/index.mdx index ebfd57c6f5bf9d5..5d0948e15845698 100644 --- a/src/content/docs/pages/configuration/index.mdx +++ b/src/content/docs/pages/configuration/index.mdx @@ -3,9 +3,15 @@ pcx_content_type: navigation title: Configuration sidebar: order: 5 - + group: + hideIndex: true +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- -import { DirectoryListing } from "~/components" +import { DirectoryListing } from "~/components"; diff --git a/src/content/docs/pages/configuration/monorepos.mdx b/src/content/docs/pages/configuration/monorepos.mdx index b5e31426fc153d1..9a24915bba5e714 100644 --- a/src/content/docs/pages/configuration/monorepos.mdx +++ b/src/content/docs/pages/configuration/monorepos.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: concept title: Monorepos +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- While some apps are built from a single repository, Pages also supports apps with more complex setups. A monorepo is a repository that has multiple subdirectories each containing its own application. diff --git a/src/content/docs/pages/configuration/preview-deployments.mdx b/src/content/docs/pages/configuration/preview-deployments.mdx index e989051a6147928..f1118b81ab98dab 100644 --- a/src/content/docs/pages/configuration/preview-deployments.mdx +++ b/src/content/docs/pages/configuration/preview-deployments.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: concept title: Preview deployments +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- Preview deployments allow you to preview new versions of your project without deploying it to production. To view preview deployments: diff --git a/src/content/docs/pages/configuration/redirects.mdx b/src/content/docs/pages/configuration/redirects.mdx index 9d977a129176c90..16fe18f1af5524d 100644 --- a/src/content/docs/pages/configuration/redirects.mdx +++ b/src/content/docs/pages/configuration/redirects.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: concept title: Redirects +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { Render } from "~/components"; diff --git a/src/content/docs/pages/configuration/rollbacks.mdx b/src/content/docs/pages/configuration/rollbacks.mdx index 6f6e0cf5d112db9..202cb0ab2876873 100644 --- a/src/content/docs/pages/configuration/rollbacks.mdx +++ b/src/content/docs/pages/configuration/rollbacks.mdx @@ -1,7 +1,11 @@ --- pcx_content_type: concept title: Rollbacks - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- Rollbacks allow you to instantly revert your project to a previous production deployment. @@ -14,5 +18,5 @@ In order to perform a rollback, go to **Deployments** in your Pages project. Bro ## Related resources -* [Preview Deployments](/pages/configuration/preview-deployments/) -* [Branch deployment controls](/pages/configuration/branch-build-controls/) +- [Preview Deployments](/pages/configuration/preview-deployments/) +- [Branch deployment controls](/pages/configuration/branch-build-controls/) diff --git a/src/content/docs/pages/configuration/serving-pages.mdx b/src/content/docs/pages/configuration/serving-pages.mdx index 88cc7925f85f6d4..ae1eb5b28f2f8cc 100644 --- a/src/content/docs/pages/configuration/serving-pages.mdx +++ b/src/content/docs/pages/configuration/serving-pages.mdx @@ -1,7 +1,11 @@ --- pcx_content_type: concept title: Serving Pages - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- Cloudflare Pages includes a number of defaults for serving your Pages sites. This page details some of those decisions, so you can understand how Pages works, and how you might want to override some of the default behaviors. @@ -34,10 +38,8 @@ Note that when you use Cloudflare Pages, the static assets that you upload as pa :::note[Purging the cache] - If you notice stale assets being served after a new deployment, go to your zone and then **Caching** > **Configuration** > [**Purge Everything**](/cache/how-to/purge-cache/purge-everything/) to ensure the latest deployment gets served. - ::: ### Behavior @@ -68,10 +70,8 @@ Server: cloudflare :::note - The [`Cf-Ray`](/fundamentals/reference/cloudflare-ray-id/) header is unique to Cloudflare. - ::: ```txt title="Headers sometimes added" diff --git a/src/content/docs/pages/demos.mdx b/src/content/docs/pages/demos.mdx index dfffb90331d2543..423594422fc9e2f 100644 --- a/src/content/docs/pages/demos.mdx +++ b/src/content/docs/pages/demos.mdx @@ -3,10 +3,18 @@ pcx_content_type: navigation title: Demos and architectures sidebar: order: 8 - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- -import { ExternalResources, GlossaryTooltip, ResourcesBySelector } from "~/components" +import { + ExternalResources, + GlossaryTooltip, + ResourcesBySelector, +} from "~/components"; Learn how you can use Pages within your existing application and architecture. @@ -20,4 +28,11 @@ Explore the following demo applications Explore the following reference architectures that use Pages: - + diff --git a/src/content/docs/pages/framework-guides/deploy-a-blazor-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-blazor-site.mdx index 7107b1a3478ecf0..9855d2935536f84 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-blazor-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-blazor-site.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Blazor +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { Render } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/deploy-a-brunch-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-brunch-site.mdx index 271f46cda05e9c7..455a73f2da94250 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-brunch-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-brunch-site.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Brunch +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { PagesBuildPreset, Render } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/deploy-a-docusaurus-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-docusaurus-site.mdx index 4ebebb47e4849ad..159b8da7ceba8af 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-docusaurus-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-docusaurus-site.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Docusaurus +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { PagesBuildPreset, Render, PackageManagers } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/deploy-a-gatsby-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-gatsby-site.mdx index 08fd1c34b47839c..31d1d80e7c40fc0 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-gatsby-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-gatsby-site.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Gatsby +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { PagesBuildPreset, Render } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/deploy-a-gridsome-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-gridsome-site.mdx index 33695ea2811bd7c..9538063afde3312 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-gridsome-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-gridsome-site.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Gridsome +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { PagesBuildPreset, Render } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/deploy-a-hexo-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-hexo-site.mdx index 8f8755426ccd953..7a6e66fe62ded11 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-hexo-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-hexo-site.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Hexo +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { Render } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/deploy-a-hono-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-hono-site.mdx index 5561420fdb0ae78..a056faf10e9311b 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-hono-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-hono-site.mdx @@ -3,6 +3,11 @@ pcx_content_type: how-to title: Hono tags: - Hono +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { diff --git a/src/content/docs/pages/framework-guides/deploy-a-hugo-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-hugo-site.mdx index c85f68b1879aeb8..a3a4a69cf68bdc4 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-hugo-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-hugo-site.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Hugo +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { PagesBuildPreset, Render, TabItem, Tabs } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/deploy-a-jekyll-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-jekyll-site.mdx index bbcf5743dfd0549..12fa493f4c52bd9 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-jekyll-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-jekyll-site.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Jekyll +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { PagesBuildPreset, Render } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/deploy-a-nuxt-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-nuxt-site.mdx index 3e9ce38e3b97ac5..9cd121858c09460 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-nuxt-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-nuxt-site.mdx @@ -3,6 +3,11 @@ pcx_content_type: how-to title: Nuxt head: [] description: Web framework making Vue.js-based development simple and powerful. +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { diff --git a/src/content/docs/pages/framework-guides/deploy-a-pelican-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-pelican-site.mdx index 29eb7dd288221e1..cfe03178980c9a7 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-pelican-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-pelican-site.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Pelican +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { PagesBuildPreset, Render } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/deploy-a-preact-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-preact-site.mdx index 2f6da012b8530fb..acf22260ddaf42f 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-preact-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-preact-site.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Preact +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { Render } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/deploy-a-qwik-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-qwik-site.mdx index 7a908ee5b17a5c7..323c6bf353f5e04 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-qwik-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-qwik-site.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Qwik +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { PagesBuildPreset, Render, PackageManagers } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/deploy-a-react-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-react-site.mdx index ae987d955a6f2bd..d22e30594b54cfd 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-react-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-react-site.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: React +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { PagesBuildPreset, Render, PackageManagers } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/deploy-a-remix-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-remix-site.mdx index 1442cdfad7a44ed..c07f752481d08b4 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-remix-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-remix-site.mdx @@ -2,6 +2,11 @@ pcx_content_type: how-to title: Remix tags: [Remix] +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { diff --git a/src/content/docs/pages/framework-guides/deploy-a-solid-start-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-solid-start-site.mdx index 050e41657c2359a..1584b32d69d04c8 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-solid-start-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-solid-start-site.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: SolidStart +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { Render, PackageManagers } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/deploy-a-sphinx-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-sphinx-site.mdx index a40430c49e8e6d3..e70f591a9d3d3c2 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-sphinx-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-sphinx-site.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Sphinx +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { Render } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/deploy-a-svelte-kit-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-svelte-kit-site.mdx index b1ef0681ba76bec..5b2a7e2ac36f6aa 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-svelte-kit-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-svelte-kit-site.mdx @@ -2,6 +2,11 @@ pcx_content_type: how-to title: SvelteKit description: Learn how to create and deploy a SvelteKit application to Cloudflare Pages using the create-cloudflare CLI +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { PagesBuildPreset, Render, PackageManagers } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/deploy-a-vite3-project.mdx b/src/content/docs/pages/framework-guides/deploy-a-vite3-project.mdx index 1c7b23074969643..29d5f800a7293df 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-vite3-project.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-vite3-project.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Vite 3 +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { Render, PackageManagers } from "~/components"; @@ -76,4 +81,3 @@ Cloudflare Pages will automatically rebuild your project and deploy it on every Additionally, you will have access to [preview deployments](/pages/configuration/preview-deployments/), which repeat the build-and-deploy process for pull requests. With these, you can preview changes to your project with a real URL before deploying them to production. - diff --git a/src/content/docs/pages/framework-guides/deploy-a-vitepress-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-vitepress-site.mdx index d3dfe1569e22afc..4510b656ba68e7b 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-vitepress-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-vitepress-site.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: VitePress +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { PagesBuildPreset, Render, TabItem, Tabs } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/deploy-a-vue-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-vue-site.mdx index 5f87abcd636e3b0..8058d2308ca6e55 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-vue-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-vue-site.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Vue +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { PagesBuildPreset, Render, PackageManagers } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/deploy-a-zola-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-zola-site.mdx index 2e2a581537479e0..3b9f74234a046c6 100644 --- a/src/content/docs/pages/framework-guides/deploy-a-zola-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-a-zola-site.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Zola +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { PagesBuildPreset, Render } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/deploy-an-analog-site.mdx b/src/content/docs/pages/framework-guides/deploy-an-analog-site.mdx index b2c8b567582d53c..4f8ef5579ec06ca 100644 --- a/src/content/docs/pages/framework-guides/deploy-an-analog-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-an-analog-site.mdx @@ -3,6 +3,11 @@ pcx_content_type: how-to title: Analog head: [] description: The fullstack Angular meta-framework +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { diff --git a/src/content/docs/pages/framework-guides/deploy-an-angular-site.mdx b/src/content/docs/pages/framework-guides/deploy-an-angular-site.mdx index eddc51fc2644afa..45089bb0ac446cc 100644 --- a/src/content/docs/pages/framework-guides/deploy-an-angular-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-an-angular-site.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Angular +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { PagesBuildPreset, Render, PackageManagers } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/deploy-an-astro-site.mdx b/src/content/docs/pages/framework-guides/deploy-an-astro-site.mdx index 7b2c50cad5e534c..9c2bdfce2c31ef9 100644 --- a/src/content/docs/pages/framework-guides/deploy-an-astro-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-an-astro-site.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Astro +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { diff --git a/src/content/docs/pages/framework-guides/deploy-an-elderjs-site.mdx b/src/content/docs/pages/framework-guides/deploy-an-elderjs-site.mdx index 8d573a75021ee62..d5de912b7da1e7b 100644 --- a/src/content/docs/pages/framework-guides/deploy-an-elderjs-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-an-elderjs-site.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Elder.js +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { PagesBuildPreset, Render } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/deploy-an-eleventy-site.mdx b/src/content/docs/pages/framework-guides/deploy-an-eleventy-site.mdx index 5244c9227c668a9..bd4418d70faf00b 100644 --- a/src/content/docs/pages/framework-guides/deploy-an-eleventy-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-an-eleventy-site.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Eleventy +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { PagesBuildPreset, Render } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/deploy-an-emberjs-site.mdx b/src/content/docs/pages/framework-guides/deploy-an-emberjs-site.mdx index eb1cedfc8014023..7ef8651db93c91f 100644 --- a/src/content/docs/pages/framework-guides/deploy-an-emberjs-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-an-emberjs-site.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Ember +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { PagesBuildPreset, Render } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/deploy-an-mkdocs-site.mdx b/src/content/docs/pages/framework-guides/deploy-an-mkdocs-site.mdx index 36744cb08bbbaee..262a49e204eacbc 100644 --- a/src/content/docs/pages/framework-guides/deploy-an-mkdocs-site.mdx +++ b/src/content/docs/pages/framework-guides/deploy-an-mkdocs-site.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: MkDocs +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { PagesBuildPreset, Render } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/deploy-anything.mdx b/src/content/docs/pages/framework-guides/deploy-anything.mdx index 628610031fd58e0..2732c0266b977d2 100644 --- a/src/content/docs/pages/framework-guides/deploy-anything.mdx +++ b/src/content/docs/pages/framework-guides/deploy-anything.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Static HTML +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { Details, Render } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/index.mdx b/src/content/docs/pages/framework-guides/index.mdx index 8a419a54f213868..40f8a6217872a22 100644 --- a/src/content/docs/pages/framework-guides/index.mdx +++ b/src/content/docs/pages/framework-guides/index.mdx @@ -4,9 +4,15 @@ pcx_content_type: navigation title: Framework guides sidebar: order: 3 - + group: + hideIndex: true +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- -import { DirectoryListing } from "~/components" +import { DirectoryListing } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/nextjs/deploy-a-static-nextjs-site.mdx b/src/content/docs/pages/framework-guides/nextjs/deploy-a-static-nextjs-site.mdx index 88f0742bb6b5c3b..e6e93a0a4ab74b0 100644 --- a/src/content/docs/pages/framework-guides/nextjs/deploy-a-static-nextjs-site.mdx +++ b/src/content/docs/pages/framework-guides/nextjs/deploy-a-static-nextjs-site.mdx @@ -7,6 +7,11 @@ head: - tag: title content: Get started | Static site | Next.js apps description: Deploy a static site built using Next.js to Cloudflare Pages +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { PagesBuildPreset, Render } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/nextjs/index.mdx b/src/content/docs/pages/framework-guides/nextjs/index.mdx index 1f6ae24bc2ab40e..ea49010e87f2818 100644 --- a/src/content/docs/pages/framework-guides/nextjs/index.mdx +++ b/src/content/docs/pages/framework-guides/nextjs/index.mdx @@ -4,19 +4,23 @@ pcx_content_type: navigation title: Next.js head: [] description: React framework for building full-stack web applications. - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- -import { DirectoryListing, Stream } from "~/components" +import { DirectoryListing, Stream } from "~/components"; [Next.js](https://nextjs.org) is an open-source React framework for creating websites and applications. ### Video Tutorial - - \ No newline at end of file + diff --git a/src/content/docs/pages/framework-guides/nextjs/resources.mdx b/src/content/docs/pages/framework-guides/nextjs/resources.mdx index c3e1a0dbad5a428..8923f3206fe4184 100644 --- a/src/content/docs/pages/framework-guides/nextjs/resources.mdx +++ b/src/content/docs/pages/framework-guides/nextjs/resources.mdx @@ -7,12 +7,17 @@ sidebar: head: - tag: title content: Additional resources | Next.js +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- -import { ResourcesBySelector, ExternalResources } from "~/components" +import { ResourcesBySelector, ExternalResources } from "~/components"; ## Demo apps For demo applications using Next.js, refer to the following resources: - \ No newline at end of file + diff --git a/src/content/docs/pages/framework-guides/nextjs/ssr/advanced.mdx b/src/content/docs/pages/framework-guides/nextjs/ssr/advanced.mdx index c43dced68f8795e..a9a5388d196c8fa 100644 --- a/src/content/docs/pages/framework-guides/nextjs/ssr/advanced.mdx +++ b/src/content/docs/pages/framework-guides/nextjs/ssr/advanced.mdx @@ -6,6 +6,11 @@ sidebar: head: - tag: title content: Advanced Usage +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- ## Custom Worker Entrypoint diff --git a/src/content/docs/pages/framework-guides/nextjs/ssr/bindings.mdx b/src/content/docs/pages/framework-guides/nextjs/ssr/bindings.mdx index 572423a57ad9729..194698ab488d545 100644 --- a/src/content/docs/pages/framework-guides/nextjs/ssr/bindings.mdx +++ b/src/content/docs/pages/framework-guides/nextjs/ssr/bindings.mdx @@ -6,6 +6,11 @@ sidebar: head: - tag: title content: Using bindings in your Next.js app +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- Once you have [set up next-on-pages](/pages/framework-guides/nextjs/ssr/get-started/), you can access [bindings](/workers/runtime-apis/bindings/) from any route of your Next.js app via `getRequestContext`: diff --git a/src/content/docs/pages/framework-guides/nextjs/ssr/caching.mdx b/src/content/docs/pages/framework-guides/nextjs/ssr/caching.mdx index bfce53019e56802..1b7d6fe9264fb90 100644 --- a/src/content/docs/pages/framework-guides/nextjs/ssr/caching.mdx +++ b/src/content/docs/pages/framework-guides/nextjs/ssr/caching.mdx @@ -4,7 +4,11 @@ title: Caching head: - tag: title content: Caching and data revalidation in your Next.js app - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- [`@cloudflare/next-on-pages`](https://github.com/cloudflare/next-on-pages) supports [caching](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#caching-data) and [revalidating](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data) data returned by subrequests you make in your app by calling [`fetch()`](/workers/runtime-apis/fetch/). @@ -25,10 +29,8 @@ When you write cached data to Workers KV, you write to storage that can be read :::note - Workers KV is eventually consistent, which means that it can take up to 60 seconds for updates to be reflected globally. - ::: To use Workers KV as the cache for your Next.js app, [add a KV binding](/pages/functions/bindings/#kv-namespaces) to your Pages project, and set the name of the binding to `__NEXT_ON_PAGES__KV_SUSPENSE_CACHE`. diff --git a/src/content/docs/pages/framework-guides/nextjs/ssr/get-started.mdx b/src/content/docs/pages/framework-guides/nextjs/ssr/get-started.mdx index f5e6166aee74c6b..9d532c92dfe1d2a 100644 --- a/src/content/docs/pages/framework-guides/nextjs/ssr/get-started.mdx +++ b/src/content/docs/pages/framework-guides/nextjs/ssr/get-started.mdx @@ -7,6 +7,11 @@ head: - tag: title content: Get started | Full-stack (SSR) | Next.js apps description: Deploy a full-stack Next.js app to Cloudflare Pages +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { PackageManagers, WranglerConfig } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/nextjs/ssr/index.mdx b/src/content/docs/pages/framework-guides/nextjs/ssr/index.mdx index 7863b6462c8b866..6af6051e10de672 100644 --- a/src/content/docs/pages/framework-guides/nextjs/ssr/index.mdx +++ b/src/content/docs/pages/framework-guides/nextjs/ssr/index.mdx @@ -4,16 +4,21 @@ pcx_content_type: navigation title: Full-stack (SSR) sidebar: order: 1 +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- -import { DirectoryListing } from "~/components" +import { DirectoryListing } from "~/components"; [Next.js](https://nextjs.org) is an open-source React.js framework for building full-stack applications. This section helps you deploy a full-stack Next.js project to Cloudflare Pages using [`@cloudflare/next-on-pages`](https://github.com/cloudflare/next-on-pages/tree/main/packages/next-on-pages/docs). :::note You should consider using [`@opennextjs/cloudflare`](https://opennext.js.org/cloudflare), which allows you to build and deploy Next.js apps to [Cloudflare Workers](/workers/static-assets/), use [Node.js APIs](/workers/runtime-apis/nodejs/) that Cloudflare Workers supports, and supports additional Next.js features. -If you're coming from Vercel, you can easily migrate your Next.js app to Cloudflare by using [Diverce](https://github.com/ygwyg/diverce), which will automatically add OpenNext to your project and create a pull request that makes it deployable to Cloudflare. +If you're coming from Vercel, you can easily migrate your Next.js app to Cloudflare by using [Diverce](https://github.com/ygwyg/diverce), which will automatically add OpenNext to your project and create a pull request that makes it deployable to Cloudflare. ::: diff --git a/src/content/docs/pages/framework-guides/nextjs/ssr/static-assets.mdx b/src/content/docs/pages/framework-guides/nextjs/ssr/static-assets.mdx index 6a7fbacbcff2284..bb61aaafdc4e9a1 100644 --- a/src/content/docs/pages/framework-guides/nextjs/ssr/static-assets.mdx +++ b/src/content/docs/pages/framework-guides/nextjs/ssr/static-assets.mdx @@ -4,7 +4,11 @@ title: Routing static assets head: - tag: title content: Routing static assets | Full-stack (SSR) | Next.js apps - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- When you use a JavaScript framework like Next.js on Cloudflare Pages, the framework adapter (ex: `@cloudflare/next-on-pages`) automatically generates a [`_routes.json` file](/pages/functions/routing/#create-a-_routesjson-file), which defines specific paths of your app's static assets. This file tells Cloudflare, `for these paths, don't run the Worker, you can just serve the static asset on this path` (an image, a chunk of client-side JavaScript, etc.) diff --git a/src/content/docs/pages/framework-guides/nextjs/ssr/supported-features.mdx b/src/content/docs/pages/framework-guides/nextjs/ssr/supported-features.mdx index 69273cd8afb0d4d..c51c0b8bd25334b 100644 --- a/src/content/docs/pages/framework-guides/nextjs/ssr/supported-features.mdx +++ b/src/content/docs/pages/framework-guides/nextjs/ssr/supported-features.mdx @@ -4,6 +4,11 @@ title: Supported features head: - tag: title content: Supported features +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { Details } from "~/components"; diff --git a/src/content/docs/pages/framework-guides/nextjs/ssr/troubleshooting.mdx b/src/content/docs/pages/framework-guides/nextjs/ssr/troubleshooting.mdx index a72f33818d6f7cf..9714c3326a97885 100644 --- a/src/content/docs/pages/framework-guides/nextjs/ssr/troubleshooting.mdx +++ b/src/content/docs/pages/framework-guides/nextjs/ssr/troubleshooting.mdx @@ -4,7 +4,11 @@ title: Troubleshooting head: - tag: title content: Troubleshooting | Full-stack (SSR) | Next.js apps - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- Learn more about troubleshooting issues with your Full-stack (SSR) Next.js apps using Cloudflare. @@ -22,7 +26,7 @@ export const runtime = "edge"; If you are still using the Next.js [Pages router](https://nextjs.org/docs/pages), for page routes, you must use `'experimental-edge'` instead of `'edge'`. ::: -*** +--- ## App router @@ -62,31 +66,31 @@ You must call `getRequestContext` within the function that handles your route Don't do this: ```js null {5} -import { getRequestContext } from '@cloudflare/next-on-pages' +import { getRequestContext } from "@cloudflare/next-on-pages"; -export const runtime = 'edge' +export const runtime = "edge"; -const myVariable = getRequestContext().env.MY_VARIABLE +const myVariable = getRequestContext().env.MY_VARIABLE; export async function GET(request) { - return new Response(myVariable) + return new Response(myVariable); } ``` Instead, do this: ```js null {6} -import { getRequestContext } from '@cloudflare/next-on-pages' +import { getRequestContext } from "@cloudflare/next-on-pages"; -export const runtime = 'edge' +export const runtime = "edge"; export async function GET(request) { - const myVariable = getRequestContext().env.MY_VARIABLE - return new Response(myVariable) + const myVariable = getRequestContext().env.MY_VARIABLE; + return new Response(myVariable); } ``` -*** +--- ## Pages router @@ -111,8 +115,6 @@ export async function getStaticPaths() { :::caution - Note that the `paths` array cannot be empty since an empty `paths` array causes Next.js to ignore the provided `fallback` value. - ::: diff --git a/src/content/docs/pages/functions/advanced-mode.mdx b/src/content/docs/pages/functions/advanced-mode.mdx index 5d8f9f344229439..84a9a80d6b7a691 100644 --- a/src/content/docs/pages/functions/advanced-mode.mdx +++ b/src/content/docs/pages/functions/advanced-mode.mdx @@ -3,10 +3,14 @@ pcx_content_type: how-to title: Advanced mode sidebar: order: 9 - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- -import { TabItem, Tabs } from "~/components" +import { TabItem, Tabs } from "~/components"; Advanced mode allows you to develop your Pages Functions with a `_worker.js` file rather than the `/functions` directory. @@ -24,17 +28,17 @@ After making a `_worker.js` file in your output directory, add the following cod ```js export default { - async fetch(request, env) { - const url = new URL(request.url); - if (url.pathname.startsWith('/api/')) { - // TODO: Add your custom /api/* logic here. - return new Response('Ok'); - } - // Otherwise, serve the static assets. - // Without this, the Worker will error and no assets will be served. - return env.ASSETS.fetch(request); - }, -} + async fetch(request, env) { + const url = new URL(request.url); + if (url.pathname.startsWith("/api/")) { + // TODO: Add your custom /api/* logic here. + return new Response("Ok"); + } + // Otherwise, serve the static assets. + // Without this, the Worker will error and no assets will be served. + return env.ASSETS.fetch(request); + }, +}; ``` @@ -43,20 +47,20 @@ export default { // Note: You would need to compile your TS into JS and output it as a `_worker.js` file. We do not read `_worker.ts` interface Env { - ASSETS: Fetcher; + ASSETS: Fetcher; } export default { - async fetch(request, env): Promise { - const url = new URL(request.url); - if (url.pathname.startsWith('/api/')) { - // TODO: Add your custom /api/* logic here. - return new Response('Ok'); - } - // Otherwise, serve the static assets. - // Without this, the Worker will error and no assets will be served. - return env.ASSETS.fetch(request); - }, + async fetch(request, env): Promise { + const url = new URL(request.url); + if (url.pathname.startsWith("/api/")) { + // TODO: Add your custom /api/* logic here. + return new Response("Ok"); + } + // Otherwise, serve the static assets. + // Without this, the Worker will error and no assets will be served. + return env.ASSETS.fetch(request); + }, } satisfies ExportedHandler; ``` @@ -64,10 +68,10 @@ export default { In the above code, you have configured your Function to return a response under all requests headed for `/api/`. Otherwise, your Function will fallback to returning static assets. -* The `env.ASSETS.fetch()` function will allow you to return assets on a given request. -* `env` is the object that contains your environment variables and bindings. -* `ASSETS` is a default Function binding that allows communication between your Function and Pages' asset serving resource. -* `fetch()` calls to Pages' asset-serving resource and serves the requested asset. +- The `env.ASSETS.fetch()` function will allow you to return assets on a given request. +- `env` is the object that contains your environment variables and bindings. +- `ASSETS` is a default Function binding that allows communication between your Function and Pages' asset serving resource. +- `fetch()` calls to Pages' asset-serving resource and serves the requested asset. ## Migrate from Workers diff --git a/src/content/docs/pages/functions/api-reference.mdx b/src/content/docs/pages/functions/api-reference.mdx index c0be67b7c32c5a6..3f791768b383e44 100644 --- a/src/content/docs/pages/functions/api-reference.mdx +++ b/src/content/docs/pages/functions/api-reference.mdx @@ -5,7 +5,11 @@ sidebar: order: 3 head: [] description: Learn about the APIs used within Pages Functions. - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- The following methods can be used to configure your Pages Function. @@ -16,24 +20,37 @@ The following methods can be used to configure your Pages Function. The `onRequest` method will be called unless a more specific `onRequestVerb` method is exported. For example, if both `onRequest` and `onRequestGet` are exported, only `onRequestGet` will be called for `GET` requests. -* onRequest(context[EventContext](#eventcontext)) Response | Promise\ - * This function will be invoked on all requests no matter what the request method is, as long as no specific request verb (like one of the methods below) is exported. -* onRequestGet(context[EventContext](#eventcontext)) Response | Promise\ - * This function will be invoked on all `GET` requests. -* onRequestPost(context[EventContext](#eventcontext)) Response | Promise\ - * This function will be invoked on all `POST` requests. -* onRequestPatch(context[EventContext](#eventcontext)) Response | Promise\ - * This function will be invoked on all `PATCH` requests. -* onRequestPut(context[EventContext](#eventcontext)) Response | Promise\ - * This function will be invoked on all `PUT` requests. -* onRequestDelete(context[EventContext](#eventcontext)) Response | Promise\ - * This function will be invoked on all `DELETE` requests. -* onRequestHead(context[EventContext](#eventcontext)) Response | Promise\ - * This function will be invoked on all `HEAD` requests. -* onRequestOptions(context[EventContext](#eventcontext)) Response | Promise\ - * This function will be invoked on all `OPTIONS` requests. +- onRequest(context[EventContext](#eventcontext)) Response | Promise\ + + - This function will be invoked on all requests no matter what the request method is, as long as no specific request verb (like one of the methods below) is exported. + +- onRequestGet(context[EventContext](#eventcontext)) Response | Promise\ + + - This function will be invoked on all `GET` requests. + +- onRequestPost(context[EventContext](#eventcontext)) Response | Promise\ + + - This function will be invoked on all `POST` requests. + +- onRequestPatch(context[EventContext](#eventcontext)) Response | Promise\ + + - This function will be invoked on all `PATCH` requests. + +- onRequestPut(context[EventContext](#eventcontext)) Response | Promise\ + - This function will be invoked on all `PUT` requests. +- onRequestDelete(context[EventContext](#eventcontext)) Response | Promise\ + + - This function will be invoked on all `DELETE` requests. + +- onRequestHead(context[EventContext](#eventcontext)) Response | Promise\ + + - This function will be invoked on all `HEAD` requests. + +- onRequestOptions(context[EventContext](#eventcontext)) Response | Promise\ + + - This function will be invoked on all `OPTIONS` requests. ### `env.ASSETS.fetch()` @@ -45,32 +62,31 @@ You can pass a [Request object](/workers/runtime-apis/request/), URL string, or ### `EventContext` - The following are the properties on the `context` object which are passed through on the `onRequest` methods: -* `request` [Request](/workers/runtime-apis/request/) +- `request` [Request](/workers/runtime-apis/request/) This is the incoming [Request](/workers/runtime-apis/request/). -* `functionPath` string +- `functionPath` string This is the path of the request. -* waitUntil(promisePromise\) void +- waitUntil(promisePromise\) void Refer to [`waitUntil` documentation](/workers/runtime-apis/context/#waituntil) for more information. -* passThroughOnException() void +- passThroughOnException() void Refer to [`passThroughOnException` documentation](/workers/runtime-apis/context/#passthroughonexception) for more information. Note that this will not work on an [advanced mode project](/pages/functions/advanced-mode/). -* next(input?Request | string, init?RequestInit) Promise\ +- next(input?Request | string, init?RequestInit) Promise\ Passes the request through to the next Function or to the asset server if no other Function is available. -* `env` [EnvWithFetch](#envwithfetch) +- `env` [EnvWithFetch](#envwithfetch) -* `params` Params\

+- `params` Params\

Holds the values from [dynamic routing](/pages/functions/routing/#dynamic-routes). @@ -78,7 +94,7 @@ The following are the properties on the `context` object which are passed throug ```js { - user: "nevi" + user: "nevi"; } ``` @@ -86,15 +102,13 @@ The following are the properties on the `context` object which are passed throug ```js export function onRequest(context) { - return new Response(`Hello ${context.params.user}`); + return new Response(`Hello ${context.params.user}`); } ``` Which would return `"Hello nevi"`. -* `data` Data - - +- `data` Data ### `EnvWithFetch` diff --git a/src/content/docs/pages/functions/bindings.mdx b/src/content/docs/pages/functions/bindings.mdx index b613d9c59ced878..b6f11dce96b19ca 100644 --- a/src/content/docs/pages/functions/bindings.mdx +++ b/src/content/docs/pages/functions/bindings.mdx @@ -3,6 +3,11 @@ pcx_content_type: how-to title: Bindings sidebar: order: 7 +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { Render, TabItem, Tabs, WranglerConfig } from "~/components"; @@ -637,6 +642,7 @@ compatibility_date = "2024-09-23" To bind your Hyperdrive config to your Pages Function, you can configure a Hyperdrive binding in the [Wrangler configuration file](/pages/functions/wrangler-configuration/#hyperdrive) or the Cloudflare dashboard. To configure a Hyperdrive binding via the Cloudflare dashboard: + 1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com) and select your account. 2. In **Account Home**, select **Workers & Pages**. 3. Select your Pages project > **Settings**. @@ -837,4 +843,5 @@ To add secrets to your Pages project: You use secrets the same way as environment variables. When setting secrets with Wrangler or in the Cloudflare dashboard, it needs to be done before a deployment that uses those secrets. For more guidance, refer to [Environment variables](#environment-variables). ### Local development with secrets - \ No newline at end of file + + diff --git a/src/content/docs/pages/functions/debugging-and-logging.mdx b/src/content/docs/pages/functions/debugging-and-logging.mdx index e384356aaa6ef14..9f3ccbc7260e5ae 100644 --- a/src/content/docs/pages/functions/debugging-and-logging.mdx +++ b/src/content/docs/pages/functions/debugging-and-logging.mdx @@ -3,7 +3,11 @@ pcx_content_type: how-to title: Debugging and logging sidebar: order: 12 - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- Access your Functions logs by using the Cloudflare dashboard or the [Wrangler CLI](/workers/wrangler/commands/#deployment-tail). @@ -12,11 +16,11 @@ Logs are a powerful debugging tool that can help you test and monitor the behavi Logs provide detailed information about events and can give insight into: -* Successful or failed requests to your Functions. -* Uncaught exceptions thrown by your Functions. -* Custom `console.log`s declared within your Functions. -* Production issues that cannot be easily reproduced. -* Real-time view of incoming requests to your application. +- Successful or failed requests to your Functions. +- Uncaught exceptions thrown by your Functions. +- Custom `console.log`s declared within your Functions. +- Production issues that cannot be easily reproduced. +- Real-time view of incoming requests to your application. There are two ways to start a logging session: @@ -27,13 +31,15 @@ There are two ways to start a logging session: Custom logs are `console.log()` statements that you can add yourself inside your Functions. When streaming logs for deployments that contain these Functions, the statements will appear in both `wrangler pages deployment tail` and dashboard outputs. -Below is an example of a custom `console.log` statement inside a Pages Function: +Below is an example of a custom `console.log` statement inside a Pages Function: ```js export async function onRequest(context) { - console.log(`[LOGGING FROM /hello]: Request came from ${context.request.url}`); + console.log( + `[LOGGING FROM /hello]: Request came from ${context.request.url}`, + ); - return new Response("Hello, world!"); + return new Response("Hello, world!"); } ``` @@ -98,10 +104,10 @@ Logging is available for all customers (Free, Paid, Enterprise). The following limits apply to Functions logs: -* Logs are not stored. You can start and stop the stream at any time to view them, but they do not persist. -* Logs will not display if the Function’s requests per second are over 100 for the last five minutes. -* Logs from any [Durable Objects](/pages/functions/bindings/#durable-objects) your Functions bind to will show up in the Cloudflare dashboard. -* A maximum of 10 clients can view a deployment’s logs at one time. This can be a combination of either dashboard sessions or `wrangler pages deployment tail` calls. +- Logs are not stored. You can start and stop the stream at any time to view them, but they do not persist. +- Logs will not display if the Function’s requests per second are over 100 for the last five minutes. +- Logs from any [Durable Objects](/pages/functions/bindings/#durable-objects) your Functions bind to will show up in the Cloudflare dashboard. +- A maximum of 10 clients can view a deployment’s logs at one time. This can be a combination of either dashboard sessions or `wrangler pages deployment tail` calls. ## Sourcemaps @@ -109,10 +115,8 @@ If you're debugging an uncaught exception, you might find that the [stack traces :::note - When developing fullstack applications, many build tools (including wrangler for Pages Functions and most fullstack frameworks) will generate source maps for both the client and server, ensure your build step is configured to only emit server sourcemaps or use an additional build step to remove the client source maps. Public source maps might expose the source code of your application to the user. - ::: Refer to [Source maps and stack traces](/pages/functions/source-maps/) for an in-depth explanation. diff --git a/src/content/docs/pages/functions/examples/ab-testing.mdx b/src/content/docs/pages/functions/examples/ab-testing.mdx index 9d50f8c3910fc53..e15e32d3dc5bead 100644 --- a/src/content/docs/pages/functions/examples/ab-testing.mdx +++ b/src/content/docs/pages/functions/examples/ab-testing.mdx @@ -10,6 +10,11 @@ sidebar: description: Set up an A/B test by controlling what page is served based on cookies. This version supports passing the request through to test and control on the origin. +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- ```js diff --git a/src/content/docs/pages/functions/examples/cors-headers.mdx b/src/content/docs/pages/functions/examples/cors-headers.mdx index 3e1e9656bbe0f34..cc4cf7591c7aa0c 100644 --- a/src/content/docs/pages/functions/examples/cors-headers.mdx +++ b/src/content/docs/pages/functions/examples/cors-headers.mdx @@ -8,6 +8,11 @@ title: Adding CORS headers sidebar: order: 1002 description: A Pages Functions for appending CORS headers. +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- This example is a snippet from our Cloudflare Pages Template repo. diff --git a/src/content/docs/pages/functions/examples/index.mdx b/src/content/docs/pages/functions/examples/index.mdx index 75dd9d6566880bb..311fe0859daadc4 100644 --- a/src/content/docs/pages/functions/examples/index.mdx +++ b/src/content/docs/pages/functions/examples/index.mdx @@ -4,9 +4,15 @@ pcx_content_type: navigation title: Examples sidebar: order: 4 - + group: + hideIndex: true +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- -import { DirectoryListing } from "~/components" +import { DirectoryListing } from "~/components"; diff --git a/src/content/docs/pages/functions/get-started.mdx b/src/content/docs/pages/functions/get-started.mdx index 346619c5387219d..cac616f1f46ad5a 100644 --- a/src/content/docs/pages/functions/get-started.mdx +++ b/src/content/docs/pages/functions/get-started.mdx @@ -6,7 +6,11 @@ sidebar: head: - tag: title content: Functions - Get started - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- This guide will instruct you on creating and deploying a Pages Function. @@ -21,10 +25,8 @@ To get started with generating a Pages Function, create a `/functions` directory :::note[Advanced mode] - For existing applications where Pages Functions’ built-in file path based routing and middleware system is not desirable, use [Advanced mode](/pages/functions/advanced-mode/). Advanced mode allows you to develop your Pages Functions with a `_worker.js` file rather than the `/functions` directory. - ::: Writing your Functions files in the `/functions` directory will automatically generate a Worker with custom functionality at predesignated routes. @@ -33,7 +35,7 @@ Copy and paste the following code into a `helloworld.js` file that you create in ```js export function onRequest(context) { - return new Response("Hello, world!") + return new Response("Hello, world!"); } ``` @@ -60,8 +62,8 @@ Additionally, use other Cloudflare products such as [D1](/d1/) (serverless DB) a After you have set up your Function, deploy your Pages project. Deploy your project by: -* Connecting your [Git provider](/pages/get-started/git-integration/). -* Using [Wrangler](/workers/wrangler/commands/#pages) from the command line. +- Connecting your [Git provider](/pages/get-started/git-integration/). +- Using [Wrangler](/workers/wrangler/commands/#pages) from the command line. :::caution @@ -70,6 +72,6 @@ After you have set up your Function, deploy your Pages project. Deploy your proj ## Related resources -* Customize your [Function's routing](/pages/functions/routing/) -* Review the [API reference](/pages/functions/api-reference/) -* Learn how to [debug your Function](/pages/functions/debugging-and-logging/) +- Customize your [Function's routing](/pages/functions/routing/) +- Review the [API reference](/pages/functions/api-reference/) +- Learn how to [debug your Function](/pages/functions/debugging-and-logging/) diff --git a/src/content/docs/pages/functions/index.mdx b/src/content/docs/pages/functions/index.mdx index 02fd260694631b8..8e2cb8cc2b65eb5 100644 --- a/src/content/docs/pages/functions/index.mdx +++ b/src/content/docs/pages/functions/index.mdx @@ -3,10 +3,14 @@ pcx_content_type: navigation title: Functions sidebar: order: 6 - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- -import { DirectoryListing } from "~/components" +import { DirectoryListing } from "~/components"; Pages Functions allows you to build full-stack applications by executing code on the Cloudflare network with [Cloudflare Workers](/workers/). With Functions, you can introduce application aspects such as authenticating, handling form submissions, or working with middleware. [Workers runtime features](/workers/runtime-apis/) are configurable on Pages Functions, including [compatibility with a subset of Node.js APIs](/workers/runtime-apis/nodejs) and the ability to set a [compatibility date or compatibility flag](/workers/configuration/compatibility-dates/). Use Functions to deploy server-side code to enable dynamic functionality without running a dedicated server. diff --git a/src/content/docs/pages/functions/local-development.mdx b/src/content/docs/pages/functions/local-development.mdx index cf587570e9f7d8b..5d4eb77d36696ae 100644 --- a/src/content/docs/pages/functions/local-development.mdx +++ b/src/content/docs/pages/functions/local-development.mdx @@ -3,6 +3,11 @@ pcx_content_type: how-to title: Local development sidebar: order: 6 +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- Run your Pages application locally with our Wrangler Command Line Interface (CLI). diff --git a/src/content/docs/pages/functions/metrics.mdx b/src/content/docs/pages/functions/metrics.mdx index 1b0629365701279..de0bf713e216b1d 100644 --- a/src/content/docs/pages/functions/metrics.mdx +++ b/src/content/docs/pages/functions/metrics.mdx @@ -3,7 +3,11 @@ pcx_content_type: reference title: Metrics sidebar: order: 11 - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- Functions metrics can help you diagnose issues and understand your workloads by showing performance and usage data for your Functions. @@ -26,10 +30,10 @@ There are three metrics that can help you understand the health of your Function In **Functions metrics**, you can see historical request counts broken down into total requests, successful requests and errored requests. Information on subrequests is available by selecting **Subrequests**. -* **Total**: All incoming requests registered by a Function. Requests blocked by [Web Application Firewall (WAF)](https://www.cloudflare.com/waf/) or other security features will not count. -* **Success**: Requests that returned a `Success` or `Client Disconnected` [invocation status](#invocation-statuses). -* **Errors**: Requests that returned a `Script Threw Exception`, `Exceeded Resources`, or `Internal Error` [invocation status](#invocation-statuses) -* **Subrequests**: Requests triggered by calling `fetch` from within a Function. When your Function fetches a static asset, it will count as a subrequest. A subrequest that throws an uncaught error will not be counted. +- **Total**: All incoming requests registered by a Function. Requests blocked by [Web Application Firewall (WAF)](https://www.cloudflare.com/waf/) or other security features will not count. +- **Success**: Requests that returned a `Success` or `Client Disconnected` [invocation status](#invocation-statuses). +- **Errors**: Requests that returned a `Script Threw Exception`, `Exceeded Resources`, or `Internal Error` [invocation status](#invocation-statuses) +- **Subrequests**: Requests triggered by calling `fetch` from within a Function. When your Function fetches a static asset, it will count as a subrequest. A subrequest that throws an uncaught error will not be counted. Request traffic data may display a drop off near the last few minutes displayed in the graph for time ranges less than six hours. This does not reflect a drop in traffic, but a slight delay in aggregation and metrics delivery. @@ -52,7 +56,7 @@ To further investigate exceptions, refer to [Debugging and Logging](/pages/funct ### CPU time per execution -The CPU Time per execution chart shows historical CPU time data broken down into relevant quantiles using [reservoir sampling](https://en.wikipedia.org/wiki/Reservoir_sampling). Learn more about [interpreting quantiles](https://www.statisticshowto.com/quantile-definition-find-easy-steps/). +The CPU Time per execution chart shows historical CPU time data broken down into relevant quantiles using [reservoir sampling](https://en.wikipedia.org/wiki/Reservoir_sampling). Learn more about [interpreting quantiles](https://www.statisticshowto.com/quantile-definition-find-easy-steps/). In some cases, higher quantiles may appear to exceed [CPU time limits](/workers/platform/limits/#cpu-time) without generating invocation errors because of a mechanism in the Workers runtime that allows rollover CPU time for requests below the CPU limit. diff --git a/src/content/docs/pages/functions/middleware.mdx b/src/content/docs/pages/functions/middleware.mdx index 16a20db1eef8019..90b06cc56950943 100644 --- a/src/content/docs/pages/functions/middleware.mdx +++ b/src/content/docs/pages/functions/middleware.mdx @@ -3,7 +3,11 @@ pcx_content_type: how-to title: Middleware sidebar: order: 5 - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- Middleware is reusable logic that can be run before your [`onRequest`](/pages/functions/api-reference/#onrequests) function. Middlewares are typically utility functions. Error handling, user authentication, and logging are typical candidates for middleware within an application. @@ -18,11 +22,11 @@ In `_middleware.js` files, you may export an `onRequest` handler or any of its m ```js export async function onRequest(context) { - try { - return await context.next(); - } catch (err) { - return new Response(`${err.message}\n${err.stack}`, { status: 500 }); - } + try { + return await context.next(); + } catch (err) { + return new Response(`${err.message}\n${err.stack}`, { status: 500 }); + } } ``` @@ -32,19 +36,19 @@ You can export an array of Pages Functions as your middleware handler. This allo ```js async function errorHandling(context) { - try { - return await context.next(); - } catch (err) { - return new Response(`${err.message}\n${err.stack}`, { status: 500 }); - } + try { + return await context.next(); + } catch (err) { + return new Response(`${err.message}\n${err.stack}`, { status: 500 }); + } } function authentication(context) { - if (context.request.headers.get("x-email") != "admin@example.com") { - return new Response("Unauthorized", { status: 403 }); - } + if (context.request.headers.get("x-email") != "admin@example.com") { + return new Response("Unauthorized", { status: 403 }); + } - return context.next(); + return context.next(); } export const onRequest = [errorHandling, authentication]; diff --git a/src/content/docs/pages/functions/module-support.mdx b/src/content/docs/pages/functions/module-support.mdx index ffd8957bc782c5d..072e6ba726f3b68 100644 --- a/src/content/docs/pages/functions/module-support.mdx +++ b/src/content/docs/pages/functions/module-support.mdx @@ -3,7 +3,11 @@ pcx_content_type: reference title: Module support sidebar: order: 13 - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- Pages Functions provide support for several module types, much like [Workers](https://blog.cloudflare.com/workers-javascript-modules/). This means that you can import and use external modules such as WebAssembly (Wasm), `text` and `binary` files inside your Functions code. @@ -26,7 +30,7 @@ export function greeting(name: string): string { import { greeting } from "../src/greeting.ts"; export async function onRequest(context) { - return new Response(`${greeting("Pages Functions")}`); + return new Response(`${greeting("Pages Functions")}`); } ``` @@ -44,7 +48,7 @@ import addModule from "add.wasm"; export async function onRequest() { const addInstance = await WebAssembly.instantiate(addModule); return new Response( - `The meaning of life is ${addInstance.exports.add(20, 1)}` + `The meaning of life is ${addInstance.exports.add(20, 1)}`, ); } ``` @@ -58,9 +62,9 @@ To import the below HTML file into your Pages Functions code: ```html - -

Hello Pages Functions!

- + +

Hello Pages Functions!

+ ``` @@ -70,12 +74,9 @@ Use the following script: import html from "../index.html"; export async function onRequest() { - return new Response( - html, - { - headers: { "Content-Type": "text/html" } - } - ); + return new Response(html, { + headers: { "Content-Type": "text/html" }, + }); } ``` @@ -89,11 +90,8 @@ Below is a basic example of how you can import the data from a binary file insid import data from "../my-data.bin"; export async function onRequest() { - return new Response( - data, - { - headers: { "Content-Type": "application/octet-stream" } - } - ); + return new Response(data, { + headers: { "Content-Type": "application/octet-stream" }, + }); } ``` diff --git a/src/content/docs/pages/functions/plugins/cloudflare-access.mdx b/src/content/docs/pages/functions/plugins/cloudflare-access.mdx index 8add85ec56bda81..3bd366aee485d8e 100644 --- a/src/content/docs/pages/functions/plugins/cloudflare-access.mdx +++ b/src/content/docs/pages/functions/plugins/cloudflare-access.mdx @@ -3,6 +3,11 @@ pcx_content_type: concept title: Cloudflare Access sidebar: order: 1 +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- The Cloudflare Access Pages Plugin is a middleware to validate Cloudflare Access JWT assertions. It also includes an API to lookup additional information about a given user's JWT. diff --git a/src/content/docs/pages/functions/plugins/community-plugins.mdx b/src/content/docs/pages/functions/plugins/community-plugins.mdx index 19dcbf2b0b87158..fb73b1e6216ae44 100644 --- a/src/content/docs/pages/functions/plugins/community-plugins.mdx +++ b/src/content/docs/pages/functions/plugins/community-plugins.mdx @@ -3,34 +3,38 @@ pcx_content_type: concept title: Community Plugins sidebar: order: 2 - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- The following are some of the community-maintained Pages Plugins. If you have created a Pages Plugin and would like to share it with developers, create a PR to add it to this alphabeticallly-ordered list using the link in the footer. -* [pages-plugin-asset-negotiation](https://github.com/Cherry/pages-plugin-asset-negotiation) +- [pages-plugin-asset-negotiation](https://github.com/Cherry/pages-plugin-asset-negotiation) Given a folder of assets in multiple formats, this Plugin will automatically negotiate with a client to serve an optimized version of a requested asset. -* [proxyflare-for-pages](https://github.com/flaregun-net/proxyflare-for-pages) +- [proxyflare-for-pages](https://github.com/flaregun-net/proxyflare-for-pages) Move traffic around your Cloudflare Pages domain with ease. Proxyflare is a reverse-proxy that enables you to: - * Port forward, redirect, and reroute HTTP and websocket traffic anywhere on the Internet. - * Mount an entire website on a subpath (for example, `mysite.com/docs`) on your apex domain. - * Serve static text (like `robots.txt` and other structured metadata) from any endpoint. + - Port forward, redirect, and reroute HTTP and websocket traffic anywhere on the Internet. + - Mount an entire website on a subpath (for example, `mysite.com/docs`) on your apex domain. + - Serve static text (like `robots.txt` and other structured metadata) from any endpoint. Refer to [Proxyflare](https://proxyflare.works) for more information. -* [cloudflare-pages-plugin-rollbar](https://github.com/hckr-studio/cloudflare-pages-plugin-rollbar) - - The [Rollbar](https://rollbar.com/) Pages Plugin captures and logs all exceptions which occur below it in the execution chain +- [cloudflare-pages-plugin-rollbar](https://github.com/hckr-studio/cloudflare-pages-plugin-rollbar) + + The [Rollbar](https://rollbar.com/) Pages Plugin captures and logs all exceptions which occur below it in the execution chain of your [Pages Functions](/pages/functions/). Discover, predict, and resolve errors in real-time. -* [cloudflare-pages-plugin-trpc](https://github.com/toyamarinyon/cloudflare-pages-plugin-trpc) +- [cloudflare-pages-plugin-trpc](https://github.com/toyamarinyon/cloudflare-pages-plugin-trpc) Allows developers to quickly create a tRPC server with a Cloudflare Pages Function. -* [pages-plugin-twind](https://github.com/helloimalastair/twind-plugin) +- [pages-plugin-twind](https://github.com/helloimalastair/twind-plugin) Automatically injects Tailwind CSS styles into HTML pages after analyzing which classes are used. diff --git a/src/content/docs/pages/functions/plugins/google-chat.mdx b/src/content/docs/pages/functions/plugins/google-chat.mdx index 6b0232780f923e0..a560acdf2cb2a88 100644 --- a/src/content/docs/pages/functions/plugins/google-chat.mdx +++ b/src/content/docs/pages/functions/plugins/google-chat.mdx @@ -3,6 +3,11 @@ pcx_content_type: concept title: Google Chat sidebar: order: 1 +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- The Google Chat Pages Plugin creates a Google Chat bot which can respond to messages. It also includes an API for interacting with Google Chat (for example, for creating messages) without the need for user input. This API is useful for situations such as alerts. diff --git a/src/content/docs/pages/functions/plugins/graphql.mdx b/src/content/docs/pages/functions/plugins/graphql.mdx index bbccdb4cdc83879..91e77b0b23d7ce4 100644 --- a/src/content/docs/pages/functions/plugins/graphql.mdx +++ b/src/content/docs/pages/functions/plugins/graphql.mdx @@ -3,6 +3,11 @@ pcx_content_type: concept title: GraphQL sidebar: order: 1 +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- The GraphQL Pages Plugin creates a GraphQL server which can respond to `application/json` and `application/graphql` `POST` requests. It responds with [the GraphQL Playground](https://github.com/graphql/graphql-playground) for `GET` requests. diff --git a/src/content/docs/pages/functions/plugins/hcaptcha.mdx b/src/content/docs/pages/functions/plugins/hcaptcha.mdx index 9ba657bde988999..03e9916b77a57f4 100644 --- a/src/content/docs/pages/functions/plugins/hcaptcha.mdx +++ b/src/content/docs/pages/functions/plugins/hcaptcha.mdx @@ -3,6 +3,11 @@ pcx_content_type: concept title: hCaptcha sidebar: order: 1 +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { Render } from "~/components"; diff --git a/src/content/docs/pages/functions/plugins/honeycomb.mdx b/src/content/docs/pages/functions/plugins/honeycomb.mdx index 848736d229056c5..720418d635cafbf 100644 --- a/src/content/docs/pages/functions/plugins/honeycomb.mdx +++ b/src/content/docs/pages/functions/plugins/honeycomb.mdx @@ -3,6 +3,11 @@ pcx_content_type: concept title: Honeycomb sidebar: order: 1 +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- The Honeycomb Pages Plugin automatically sends traces to Honeycomb for analysis and observability. diff --git a/src/content/docs/pages/functions/plugins/index.mdx b/src/content/docs/pages/functions/plugins/index.mdx index 7944fff51e8b59e..99fc983d02fe7ad 100644 --- a/src/content/docs/pages/functions/plugins/index.mdx +++ b/src/content/docs/pages/functions/plugins/index.mdx @@ -3,6 +3,11 @@ pcx_content_type: concept title: Pages Plugins sidebar: order: 9 +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { DirectoryListing, Render } from "~/components"; diff --git a/src/content/docs/pages/functions/plugins/sentry.mdx b/src/content/docs/pages/functions/plugins/sentry.mdx index deb70780fb34bb0..1cdd68b3feb3a58 100644 --- a/src/content/docs/pages/functions/plugins/sentry.mdx +++ b/src/content/docs/pages/functions/plugins/sentry.mdx @@ -3,6 +3,11 @@ pcx_content_type: concept title: Sentry sidebar: order: 1 +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- :::note diff --git a/src/content/docs/pages/functions/plugins/static-forms.mdx b/src/content/docs/pages/functions/plugins/static-forms.mdx index 25428eb24e92c58..6f1be5c3ecfa5cc 100644 --- a/src/content/docs/pages/functions/plugins/static-forms.mdx +++ b/src/content/docs/pages/functions/plugins/static-forms.mdx @@ -3,6 +3,11 @@ pcx_content_type: concept title: Static Forms sidebar: order: 1 +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- The Static Forms Pages Plugin intercepts all form submissions made which have the `data-static-form-name` attribute set. This allows you to take action on these form submissions by, for example, saving the submission to KV. diff --git a/src/content/docs/pages/functions/plugins/stytch.mdx b/src/content/docs/pages/functions/plugins/stytch.mdx index 38d01dc0913e4ef..42f68537b6a0cef 100644 --- a/src/content/docs/pages/functions/plugins/stytch.mdx +++ b/src/content/docs/pages/functions/plugins/stytch.mdx @@ -3,6 +3,11 @@ pcx_content_type: concept title: Stytch sidebar: order: 1 +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- The Stytch Pages Plugin is a middleware which validates all requests and their `session_token`. diff --git a/src/content/docs/pages/functions/plugins/turnstile.mdx b/src/content/docs/pages/functions/plugins/turnstile.mdx index 15eae3f4ae00c94..1a19aabdda7f707 100644 --- a/src/content/docs/pages/functions/plugins/turnstile.mdx +++ b/src/content/docs/pages/functions/plugins/turnstile.mdx @@ -3,6 +3,11 @@ pcx_content_type: concept title: Turnstile sidebar: order: 1 +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { Render } from "~/components"; diff --git a/src/content/docs/pages/functions/plugins/vercel-og.mdx b/src/content/docs/pages/functions/plugins/vercel-og.mdx index c0e5a479d8c4168..6fed3463cfb87a6 100644 --- a/src/content/docs/pages/functions/plugins/vercel-og.mdx +++ b/src/content/docs/pages/functions/plugins/vercel-og.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: reference title: vercel/og +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- The `@vercel/og` Pages Plugin is a middleware which renders social images for webpages. It also includes an API to create arbitrary images. diff --git a/src/content/docs/pages/functions/pricing.mdx b/src/content/docs/pages/functions/pricing.mdx index 481c5015b47d546..6982b8e9ee1af64 100644 --- a/src/content/docs/pages/functions/pricing.mdx +++ b/src/content/docs/pages/functions/pricing.mdx @@ -3,7 +3,11 @@ pcx_content_type: reference title: Pricing sidebar: order: 12 - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- Requests to your Functions are billed as Cloudflare Workers requests. Workers plans and pricing can be found [in the Workers documentation](/workers/platform/pricing/). @@ -16,10 +20,8 @@ Pages supports the [Standard usage model](/workers/platform/pricing/#example-pri :::note - Workers Enterprise accounts are billed based on the usage model specified in their contract. To switch to the Standard usage model, reach out to your Customer Success Manager (CSM). Some Workers Enterprise customers maintain the ability to [change usage models](/workers/platform/pricing/#how-to-switch-usage-models). - ::: ### Static asset requests diff --git a/src/content/docs/pages/functions/routing.mdx b/src/content/docs/pages/functions/routing.mdx index d520e996751fe2e..506bbbc7edd662f 100644 --- a/src/content/docs/pages/functions/routing.mdx +++ b/src/content/docs/pages/functions/routing.mdx @@ -3,6 +3,11 @@ pcx_content_type: reference title: Routing sidebar: order: 2 +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { FileTree } from "~/components"; @@ -106,7 +111,7 @@ For files which match a single URL segment (use a single set of brackets), the v ```js export function onRequest(context) { - return new Response(context.params.user) + return new Response(context.params.user); } ``` @@ -116,7 +121,7 @@ For files which match against multiple URL segments (use a double set of bracket ```js export function onRequest(context) { - return new Response(JSON.stringify(context.params.catchall)) + return new Response(JSON.stringify(context.params.catchall)); } ``` @@ -138,9 +143,9 @@ Create a `_routes.json` file to control when your Function is invoked. It should This file will include three different properties: -* **version**: Defines the version of the schema. Currently there is only one version of the schema (version 1), however, we may add more in the future and aim to be backwards compatible. -* **include**: Defines routes that will be invoked by Functions. Accepts wildcard behavior. -* **exclude**: Defines routes that will not be invoked by Functions. Accepts wildcard behavior. `exclude` always take priority over `include`. +- **version**: Defines the version of the schema. Currently there is only one version of the schema (version 1), however, we may add more in the future and aim to be backwards compatible. +- **include**: Defines routes that will be invoked by Functions. Accepts wildcard behavior. +- **exclude**: Defines routes that will not be invoked by Functions. Accepts wildcard behavior. `exclude` always take priority over `include`. :::note @@ -154,9 +159,9 @@ Below is an example of a `_routes.json`. ```json { - "version": 1, - "include": ["/*"], - "exclude": [] + "version": 1, + "include": ["/*"], + "exclude": [] } ``` @@ -166,9 +171,9 @@ Below is another example of a `_routes.json` file. Any route inside the `/build` ```json { - "version": 1, - "include": ["/*"], - "exclude": ["/build/*"] + "version": 1, + "include": ["/*"], + "exclude": ["/build/*"] } ``` @@ -176,6 +181,6 @@ Below is another example of a `_routes.json` file. Any route inside the `/build` Functions invocation routes have the following limits: -* You must have at least one include rule. -* You may have no more than 100 include/exclude rules combined. -* Each rule may have no more than 100 characters. +- You must have at least one include rule. +- You may have no more than 100 include/exclude rules combined. +- Each rule may have no more than 100 characters. diff --git a/src/content/docs/pages/functions/smart-placement.mdx b/src/content/docs/pages/functions/smart-placement.mdx index a9d8364e6eaf248..5173787b655be64 100644 --- a/src/content/docs/pages/functions/smart-placement.mdx +++ b/src/content/docs/pages/functions/smart-placement.mdx @@ -4,7 +4,11 @@ title: Smart Placement sidebar: badge: text: Beta - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- By default, [Workers](/workers/) and [Pages Functions](/pages/functions/) are invoked in a data center closest to where the request was received. If you are running back-end logic in a Pages Function, it may be more performant to run that Pages Function closer to your back-end infrastructure rather than the end user. Smart Placement (beta) automatically places your workloads in an optimal location that minimizes latency and speeds up your applications. @@ -21,10 +25,8 @@ Smart Placement on Pages currently has some caveats. While assets are always mea :::note - To understand how Smart Placement works, refer to [Smart Placement](/workers/configuration/smart-placement/). - ::: ## Enable Smart Placement (beta) diff --git a/src/content/docs/pages/functions/source-maps.mdx b/src/content/docs/pages/functions/source-maps.mdx index dd6504131d61790..a751b7e31b277c5 100644 --- a/src/content/docs/pages/functions/source-maps.mdx +++ b/src/content/docs/pages/functions/source-maps.mdx @@ -3,19 +3,21 @@ pcx_content_type: configuration title: Source maps and stack traces head: [] description: Adding source maps and generating stack traces for Pages. - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- -import { Render, WranglerConfig } from "~/components" +import { Render, WranglerConfig } from "~/components"; :::caution - Support for uploading source maps for Pages is available now in open beta. Minimum required Wrangler version: 3.60.0. - ::: ## Source Maps @@ -41,17 +43,16 @@ You can then view the stack trace when streaming [real-time logs](/pages/functio :::note - The source map is retrieved after your Pages Function invocation completes — it's an asynchronous process that does not impact your applications's CPU utilization or performance. Source maps are not accessible inside the application at runtime, if you `console.log()` the [stack property](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/stack), you will not get a deobfuscated stack trace. ::: ## Limits -| Description | Limit | -| ------------------------------ | ------------- | -| Maximum Source Map Size | 15 MB gzipped | +| Description | Limit | +| ----------------------- | ------------- | +| Maximum Source Map Size | 15 MB gzipped | ## Related resources -* [Real-time logs](/pages/functions/debugging-and-logging/) - Learn how to capture Pages logs in real-time. +- [Real-time logs](/pages/functions/debugging-and-logging/) - Learn how to capture Pages logs in real-time. diff --git a/src/content/docs/pages/functions/typescript.mdx b/src/content/docs/pages/functions/typescript.mdx index e6e3f0016883dba..697dc8227ec8b8a 100644 --- a/src/content/docs/pages/functions/typescript.mdx +++ b/src/content/docs/pages/functions/typescript.mdx @@ -3,6 +3,11 @@ pcx_content_type: how-to title: TypeScript sidebar: order: 8 +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { PackageManagers, Render } from "~/components"; diff --git a/src/content/docs/pages/functions/wrangler-configuration.mdx b/src/content/docs/pages/functions/wrangler-configuration.mdx index bee663c7461a9e6..9c07dd8659d2373 100644 --- a/src/content/docs/pages/functions/wrangler-configuration.mdx +++ b/src/content/docs/pages/functions/wrangler-configuration.mdx @@ -3,9 +3,21 @@ pcx_content_type: how-to title: Configuration sidebar: order: 6 +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- -import { Render, TabItem, Tabs, Type, MetaInfo, WranglerConfig } from "~/components"; +import { + Render, + TabItem, + Tabs, + Type, + MetaInfo, + WranglerConfig, +} from "~/components"; :::caution @@ -151,8 +163,6 @@ With a Wrangler configuration file, you can quickly set configuration across you The Wrangler configuration file applies locally when using `wrangler pages dev`. This means that you can test out configuration changes quickly without a need to login to the Cloudflare dashboard. Refer to the following config file for an example: - - ```toml @@ -218,8 +228,6 @@ Unlike [Workers Environments](/workers/wrangler/configuration/#environments), `p Refer to the following Wrangler configuration file for an example of how to override preview deployment configuration: - - ```toml @@ -247,8 +255,6 @@ If you deployed this file via `wrangler pages deploy`, `name`, `pages_build_outp If you wanted to have configuration values apply to local and preview, but override production, your file would look like this: - - ```toml @@ -274,8 +280,6 @@ API_KEY = "8901234bfgd" You can always be explicit and override both preview and production: - - ```toml @@ -348,8 +352,6 @@ Non-inheritable keys are configurable at the top-level, but, if any one non-inhe For example, this configuration will not work: - - ```toml @@ -446,7 +448,9 @@ When using Wrangler in the default local development mode, files will be written :::caution - Durable Object bindings configured in a Pages project's Wrangler configuration file require the `script_name` key. For Workers, the `script_name` key is optional. + Durable Object bindings configured in +a Pages project's Wrangler configuration file require the `script_name` key. For +Workers, the `script_name` key is optional. ::: diff --git a/src/content/docs/pages/get-started/c3.mdx b/src/content/docs/pages/get-started/c3.mdx index 44b1e77c058a235..8ac33e8f55b6a4a 100644 --- a/src/content/docs/pages/get-started/c3.mdx +++ b/src/content/docs/pages/get-started/c3.mdx @@ -8,6 +8,11 @@ description: Use C3 (`create-cloudflare` CLI) to set up and deploy new applications using framework-specific setup guides to ensure each new application follows Cloudflare and any third-party best practices for deployment. +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { @@ -75,7 +80,11 @@ C3 collects any required input through a series of interactive prompts. You may This is the full format of a C3 invocation alongside the possible CLI arguments: - + - `DIRECTORY` diff --git a/src/content/docs/pages/get-started/direct-upload.mdx b/src/content/docs/pages/get-started/direct-upload.mdx index 2634e821ff69b0a..53957f4084c0712 100644 --- a/src/content/docs/pages/get-started/direct-upload.mdx +++ b/src/content/docs/pages/get-started/direct-upload.mdx @@ -6,6 +6,11 @@ head: content: Direct Upload description: Upload your prebuilt assets to Pages and deploy them via the Wrangler CLI or the Cloudflare dashboard. +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { Render } from "~/components"; diff --git a/src/content/docs/pages/get-started/git-integration.mdx b/src/content/docs/pages/get-started/git-integration.mdx index c8e53242c2cc4c1..29d5a0ff0c9d753 100644 --- a/src/content/docs/pages/get-started/git-integration.mdx +++ b/src/content/docs/pages/get-started/git-integration.mdx @@ -5,6 +5,11 @@ head: - tag: title content: Git integration guide description: Connect your Git provider to Pages. +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { Details, Render } from "~/components"; diff --git a/src/content/docs/pages/get-started/index.mdx b/src/content/docs/pages/get-started/index.mdx index fe8a6c2163095a2..cc99a7f25fd8fb9 100644 --- a/src/content/docs/pages/get-started/index.mdx +++ b/src/content/docs/pages/get-started/index.mdx @@ -3,10 +3,14 @@ pcx_content_type: navigation title: Getting started sidebar: order: 2 - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- -import { DirectoryListing } from "~/components" +import { DirectoryListing } from "~/components"; Choose a setup method for your Pages project: diff --git a/src/content/docs/pages/how-to/add-custom-http-headers.mdx b/src/content/docs/pages/how-to/add-custom-http-headers.mdx index 284a9faf704a492..7c3f3d78d7ba2a4 100644 --- a/src/content/docs/pages/how-to/add-custom-http-headers.mdx +++ b/src/content/docs/pages/how-to/add-custom-http-headers.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Add custom HTTP headers +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { WranglerConfig } from "~/components"; diff --git a/src/content/docs/pages/how-to/build-commands-branches.mdx b/src/content/docs/pages/how-to/build-commands-branches.mdx index 42c1078949f7d8d..2e4e36dffe7b67f 100644 --- a/src/content/docs/pages/how-to/build-commands-branches.mdx +++ b/src/content/docs/pages/how-to/build-commands-branches.mdx @@ -2,7 +2,11 @@ updated: 2022-07-27 pcx_content_type: how-to title: Set build commands per branch - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- This guide will instruct you how to set build commands on specific branches. You will use the `CF_PAGES_BRANCH` environment variable to run a script on a specified branch as opposed to your Production branch. This guide assumes that you have a Cloudflare account and a Pages project. diff --git a/src/content/docs/pages/how-to/custom-branch-aliases.mdx b/src/content/docs/pages/how-to/custom-branch-aliases.mdx index 785ef35d53a85db..351d17f95f619b1 100644 --- a/src/content/docs/pages/how-to/custom-branch-aliases.mdx +++ b/src/content/docs/pages/how-to/custom-branch-aliases.mdx @@ -1,7 +1,11 @@ --- pcx_content_type: how-to title: Add a custom domain to a branch - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- In this guide, you will learn how to add a custom domain (`staging.example.com`) that will point to a specific branch (`staging`) on your Pages project. @@ -10,12 +14,10 @@ This will allow you to have a custom domain that will always show the latest bui :::note - Currently, this setup is only supported when using Cloudflare DNS. If you attempt to follow this guide using an external DNS provider, your custom alias will be sent to the production branch of your Pages project. - ::: First, make sure that you have a successful deployment on the branch you would like to set up a custom domain for. diff --git a/src/content/docs/pages/how-to/deploy-a-wordpress-site.mdx b/src/content/docs/pages/how-to/deploy-a-wordpress-site.mdx index c993a1d99679cbb..22a81aef6af8428 100644 --- a/src/content/docs/pages/how-to/deploy-a-wordpress-site.mdx +++ b/src/content/docs/pages/how-to/deploy-a-wordpress-site.mdx @@ -5,7 +5,11 @@ pcx_content_type: tutorial title: Deploy a static WordPress site tags: - WordPress - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- ## Overview @@ -16,8 +20,8 @@ In this guide, you will use a WordPress plugin, [Simply Static](https://wordpres This guide assumes that you are: -* The Administrator account on your WordPress site. -* Able to install WordPress plugins on the site. +- The Administrator account on your WordPress site. +- Able to install WordPress plugins on the site. ## Setup @@ -53,9 +57,9 @@ Every time you make a change to your WordPress site, you will need to download a There are some features available in WordPress sites that will not be supported in a static site environment: -* WordPress Forms. -* WordPress Comments. -* Any links to `/wp-admin` or similar internal WordPress routes. +- WordPress Forms. +- WordPress Comments. +- Any links to `/wp-admin` or similar internal WordPress routes. ## Conclusion @@ -63,8 +67,8 @@ By following this guide, you have successfully deployed a static version of your With a static version of your site being served, you can: -* Move your WordPress site to a custom domain or subdomain. Refer to [Custom domains](/pages/configuration/custom-domains/) to learn more. -* Run your WordPress instance locally, or put your WordPress site behind [Cloudflare Access](/pages/configuration/preview-deployments/#customize-preview-deployments-access) to only give access to your contributors. This has a significant effect on the number of attack vectors for your WordPress site and its content. -* Downgrade your WordPress hosting plan to a cheaper plan. Because the memory and bandwidth requirements for your WordPress instance are now smaller, you can often host it on a cheaper plan, or moving to shared hosting. +- Move your WordPress site to a custom domain or subdomain. Refer to [Custom domains](/pages/configuration/custom-domains/) to learn more. +- Run your WordPress instance locally, or put your WordPress site behind [Cloudflare Access](/pages/configuration/preview-deployments/#customize-preview-deployments-access) to only give access to your contributors. This has a significant effect on the number of attack vectors for your WordPress site and its content. +- Downgrade your WordPress hosting plan to a cheaper plan. Because the memory and bandwidth requirements for your WordPress instance are now smaller, you can often host it on a cheaper plan, or moving to shared hosting. Connect with the [Cloudflare Developer community on Discord](https://discord.cloudflare.com) to ask questions and discuss the platform with other developers. diff --git a/src/content/docs/pages/how-to/enable-zaraz.mdx b/src/content/docs/pages/how-to/enable-zaraz.mdx index f7fc945f9d543af..e6f22c49cf2dc14 100644 --- a/src/content/docs/pages/how-to/enable-zaraz.mdx +++ b/src/content/docs/pages/how-to/enable-zaraz.mdx @@ -1,10 +1,14 @@ --- pcx_content_type: how-to title: Enable Zaraz - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- -import { Render } from "~/components" +import { Render } from "~/components"; diff --git a/src/content/docs/pages/how-to/index.mdx b/src/content/docs/pages/how-to/index.mdx index 9b71f49caadadbf..6fd5aca76351f57 100644 --- a/src/content/docs/pages/how-to/index.mdx +++ b/src/content/docs/pages/how-to/index.mdx @@ -4,9 +4,15 @@ pcx_content_type: navigation title: How to sidebar: order: 8 - + group: + hideIndex: true +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- -import { DirectoryListing } from "~/components" +import { DirectoryListing } from "~/components"; diff --git a/src/content/docs/pages/how-to/npm-private-registry.mdx b/src/content/docs/pages/how-to/npm-private-registry.mdx index b1b5cf77b18568d..34d3c6eb9a69e11 100644 --- a/src/content/docs/pages/how-to/npm-private-registry.mdx +++ b/src/content/docs/pages/how-to/npm-private-registry.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Install private packages +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- Cloudflare Pages supports custom package registries, allowing you to include private dependencies in your application. While this walkthrough focuses specifically on [npm](https://www.npmjs.com/), the Node package manager and registry, the same approach can be applied to other registry tools. diff --git a/src/content/docs/pages/how-to/preview-with-cloudflare-tunnel.mdx b/src/content/docs/pages/how-to/preview-with-cloudflare-tunnel.mdx index eabee3222e986b7..bf1cd386438cfd0 100644 --- a/src/content/docs/pages/how-to/preview-with-cloudflare-tunnel.mdx +++ b/src/content/docs/pages/how-to/preview-with-cloudflare-tunnel.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Preview Local Projects with Cloudflare Tunnel +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- [Cloudflare Tunnel](/cloudflare-one/connections/connect-networks/) runs a lightweight daemon (`cloudflared`) in your infrastructure that establishes outbound connections (Tunnels) between your origin web server and the Cloudflare global network. In practical terms, you can use Cloudflare Tunnel to allow remote access to services running on your local machine. It is an alternative to popular tools like [Ngrok](https://ngrok.com), and provides free, long-running tunnels via the [TryCloudflare](/cloudflare-one/connections/connect-networks/do-more-with-tunnels/trycloudflare/) service. diff --git a/src/content/docs/pages/how-to/redirect-to-custom-domain.mdx b/src/content/docs/pages/how-to/redirect-to-custom-domain.mdx index 03beb1efec4cefe..fde6bd92b1a1eb6 100644 --- a/src/content/docs/pages/how-to/redirect-to-custom-domain.mdx +++ b/src/content/docs/pages/how-to/redirect-to-custom-domain.mdx @@ -1,10 +1,14 @@ --- pcx_content_type: how-to title: Redirecting *.pages.dev to a Custom Domain - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- -import { Example } from "~/components" +import { Example } from "~/components"; Learn how to use [Bulk Redirects](/rules/url-forwarding/bulk-redirects/) to redirect your `*.pages.dev` subdomain to your [custom domain](/pages/configuration/custom-domains/). @@ -22,8 +26,8 @@ To redirect a `.pages.dev` subdomain to your custom domain: -| Source URL | Target URL | Status | Parameters | -| ------------- | --------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------ | +| Source URL | Target URL | Status | Parameters | +| --------------------- | --------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------ | | `.pages.dev` | `https://example.com` | `301` |
  • Preserve query string
  • Subpath matching
  • Preserve path suffix
  • Include subdomains
| @@ -34,5 +38,5 @@ To test that your redirect worked, go to your `.pages.dev` domain. If t ## Related resources -* [Redirect www to domain apex](/pages/how-to/www-redirect/) -* [Handle redirects with Bulk Redirects](/rules/url-forwarding/bulk-redirects/) +- [Redirect www to domain apex](/pages/how-to/www-redirect/) +- [Handle redirects with Bulk Redirects](/rules/url-forwarding/bulk-redirects/) diff --git a/src/content/docs/pages/how-to/refactor-a-worker-to-pages-functions.mdx b/src/content/docs/pages/how-to/refactor-a-worker-to-pages-functions.mdx index 9b7ad18ed16ceca..a77d24c2f308960 100644 --- a/src/content/docs/pages/how-to/refactor-a-worker-to-pages-functions.mdx +++ b/src/content/docs/pages/how-to/refactor-a-worker-to-pages-functions.mdx @@ -1,6 +1,13 @@ --- pcx_content_type: how-to title: Refactor a Worker to a Pages Function +sidebar: + hidden: true +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { Render } from "~/components"; diff --git a/src/content/docs/pages/how-to/use-direct-upload-with-continuous-integration.mdx b/src/content/docs/pages/how-to/use-direct-upload-with-continuous-integration.mdx index e2333e4d0daa5ad..560e22e230d6a16 100644 --- a/src/content/docs/pages/how-to/use-direct-upload-with-continuous-integration.mdx +++ b/src/content/docs/pages/how-to/use-direct-upload-with-continuous-integration.mdx @@ -1,7 +1,11 @@ --- pcx_content_type: how-to title: Use Direct Upload with continuous integration - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- Cloudflare Pages supports directly uploading prebuilt assets, allowing you to use custom build steps for your applications and deploy to Pages with [Wrangler](/workers/wrangler/install-and-update/). This guide will teach you how to deploy your application to Pages, using continuous integration. @@ -26,7 +30,7 @@ To generate an API token: 3. Select **API Tokens** > **Create Token**. 4. Under **Custom Token**, select **Get started**. 5. Name your API Token in the **Token name** field. -6. Under **Permissions**, select *Account*, *Cloudflare Pages* and *Edit*: +6. Under **Permissions**, select _Account_, _Cloudflare Pages_ and _Edit_: 7. Select **Continue to summary** > **Create Token**. ![Follow the instructions above to create an API token for Cloudflare Pages](~/assets/images/pages/how-to/select-api-token-for-pages.png) @@ -50,8 +54,8 @@ In the GitHub Action you have set up, environment variables are needed to push y 1. Go to your project's repository in GitHub. 2. Under your repository's name, select **Settings**. 3. Select **Secrets** > **Actions** > **New repository secret**. -4. Create one secret and put **CLOUDFLARE\_ACCOUNT\_ID** as the name with the value being your Cloudflare account ID. -5. Create another secret and put **CLOUDFLARE\_API\_TOKEN** as the name with the value being your Cloudflare API token. +4. Create one secret and put **CLOUDFLARE_ACCOUNT_ID** as the name with the value being your Cloudflare account ID. +5. Create another secret and put **CLOUDFLARE_API_TOKEN** as the name with the value being your Cloudflare API token. Add the value of your Cloudflare account ID and Cloudflare API token as `CLOUDFLARE_ACCOUNT_ID` and `CLOUDFLARE_API_TOKEN`, respectively. This will ensure that these secrets are secure, and each time your Action runs, it will access these secrets. @@ -92,10 +96,8 @@ The `${{ secrets.GITHUB_TOKEN }}` will be automatically provided by GitHub Actio :::note - This workflow automatically triggers on the current git branch, unless you add a `branch` option to the `with` section. - ::: ## Using CircleCI for CI/CD @@ -125,31 +127,29 @@ Create a `.circleci/config.yml` file at the root of your project. This file cont ```yaml version: 2.1 jobs: - Publish-to-Pages: - docker: - - image: cimg/node:18.7.0 + Publish-to-Pages: + docker: + - image: cimg/node:18.7.0 - steps: - - checkout - # Run your project's build step - - run: npm install && npm run build - # Publish with wrangler - - run: npx wrangler pages deploy dist --project-name= # Replace dist with the name of your build folder and input your project name + steps: + - checkout + # Run your project's build step + - run: npm install && npm run build + # Publish with wrangler + - run: npx wrangler pages deploy dist --project-name= # Replace dist with the name of your build folder and input your project name workflows: - Publish-to-Pages-workflow: - jobs: - - Publish-to-Pages + Publish-to-Pages-workflow: + jobs: + - Publish-to-Pages ``` Your continuous integration workflow is broken down into jobs when using CircleCI. From the code block above, you can see that you first define a list of jobs that run on each commit. For example, your repository will run on a prebuilt docker image `cimg/node:18.7.0`. It first checks out the repository with the Node version specified in the image. :::note[Note] - Wrangler requires a Node version of at least `16.17.0`. You must upgrade your Node.js version if your version is lower than `16.17.0`. - ::: You can modify the Wrangler command with any [`wrangler pages deploy` options](/workers/wrangler/commands/#deploy-1). diff --git a/src/content/docs/pages/how-to/use-worker-for-ab-testing-in-pages.mdx b/src/content/docs/pages/how-to/use-worker-for-ab-testing-in-pages.mdx index 7fd226968121786..9f0d93fdb14d530 100644 --- a/src/content/docs/pages/how-to/use-worker-for-ab-testing-in-pages.mdx +++ b/src/content/docs/pages/how-to/use-worker-for-ab-testing-in-pages.mdx @@ -1,7 +1,11 @@ --- pcx_content_type: how-to title: Use Pages Functions for A/B testing - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- In this guide, you will learn how to use [Pages Functions](/pages/functions/) for A/B testing in your Pages projects. A/B testing is a user experience research methodology applied when comparing two or more versions of a web page or application. With A/B testing, you can serve two or more versions of a webpage to users and divide traffic to your site. @@ -31,41 +35,39 @@ In your `/functions` directory, create a `_middleware.js` file. :::note - When you create your `_middleware.js` file at the base of your `/functions` folder, the middleware will run for all routes on your project. Learn more about [middleware routing](/pages/functions/middleware/). - ::: Following the Functions naming convention, the `_middleware.js` file exports a single async `onRequest` function that accepts a `request`, `env` and `next` as an argument. ```js -const abTest = async ({request, next, env}) => { - /* +const abTest = async ({ request, next, env }) => { + /* Todo: 1. Conditional statements to check for the cookie 2. Assign cookies based on percentage, then serve */ -} +}; -export const onRequest = [abTest] +export const onRequest = [abTest]; ``` To set the cookie, create the `cookieName` variable and assign any value. Then create the `newHomepagePathName` variable and assign it `/test`: ```js null {1,2} -const cookieName = "ab-test-cookie" -const newHomepagePathName = "/test" +const cookieName = "ab-test-cookie"; +const newHomepagePathName = "/test"; -const abTest = async ({request, next, env}) => { - /* +const abTest = async ({ request, next, env }) => { + /* Todo: 1. Conditional statements to check for the cookie 2. Assign cookie based on percentage then serve */ -} +}; -export const onRequest = [abTest] +export const onRequest = [abTest]; ``` ## Set up conditional logic @@ -73,31 +75,31 @@ export const onRequest = [abTest] Based on the URL pathname, check that the cookie value is equal to `new`. If the value is `new`, then `newHomepagePathName` will be served. ```js null {7,8,9,10,11,12,13,14,15,16,17,18,19} -const cookieName = "ab-test-cookie" -const newHomepagePathName = "/test" +const cookieName = "ab-test-cookie"; +const newHomepagePathName = "/test"; -const abTest = async ({request, next, env}) => { - /* +const abTest = async ({ request, next, env }) => { + /* Todo: 1. Assign cookies based on randomly generated percentage, then serve */ - const url = new URL(request.url) - if (url.pathname === "/") { - // if cookie ab-test-cookie=new then change the request to go to /test - // if no cookie set, pass x% of traffic and set a cookie value to "current" or "new" - - let cookie = request.headers.get("cookie") - // is cookie set? - if (cookie && cookie.includes(`${cookieName}=new`)) { - // Change the request to go to /test (as set in the newHomepagePathName variable) - url.pathname = newHomepagePathName - return env.ASSETS.fetch(url) - } - } -} - -export const onRequest = [abTest] + const url = new URL(request.url); + if (url.pathname === "/") { + // if cookie ab-test-cookie=new then change the request to go to /test + // if no cookie set, pass x% of traffic and set a cookie value to "current" or "new" + + let cookie = request.headers.get("cookie"); + // is cookie set? + if (cookie && cookie.includes(`${cookieName}=new`)) { + // Change the request to go to /test (as set in the newHomepagePathName variable) + url.pathname = newHomepagePathName; + return env.ASSETS.fetch(url); + } + } +}; + +export const onRequest = [abTest]; ``` If the cookie value is not present, you will have to assign one. Generate a percentage (from 0-99) by using: `Math.floor(Math.random() * 100)`. Your default cookie version is given a value of `current`. @@ -108,45 +110,43 @@ The `env.ASSETS.fetch()` function will allow you to send the user to a modified :::note[Binding] - A Function is a Worker that executes on your Pages project to add dynamic functionality. A binding is how your Function (Worker) interacts with external resources. A binding is a runtime variable that the Workers runtime provides to your code. - ::: ```js null {20-36} -const cookieName = "ab-test-cookie" -const newHomepagePathName = "/test" +const cookieName = "ab-test-cookie"; +const newHomepagePathName = "/test"; const abTest = async (context) => { - const url = new URL(context.request.url) - // if homepage - if (url.pathname === "/") { - // if cookie ab-test-cookie=new then change the request to go to /test - // if no cookie set, pass x% of traffic and set a cookie value to "current" or "new" - - let cookie = request.headers.get("cookie") - // is cookie set? - if (cookie && cookie.includes(`${cookieName}=new`)) { - // pass the request to /test - url.pathname = newHomepagePathName - return context.env.ASSETS.fetch(url) - } else { - const percentage = Math.floor(Math.random() * 100) - let version = "current" // default version - // change pathname and version name for 50% of traffic - if (percentage < 50) { - url.pathname = newHomepagePathName - version = "new" - } - // get the static file from ASSETS, and attach a cookie - const asset = await context.env.ASSETS.fetch(url) - let response = new Response(asset.body, asset) - response.headers.append("Set-Cookie", `${cookieName}=${version}; path=/`) - return response - } - } - return context.next() + const url = new URL(context.request.url); + // if homepage + if (url.pathname === "/") { + // if cookie ab-test-cookie=new then change the request to go to /test + // if no cookie set, pass x% of traffic and set a cookie value to "current" or "new" + + let cookie = request.headers.get("cookie"); + // is cookie set? + if (cookie && cookie.includes(`${cookieName}=new`)) { + // pass the request to /test + url.pathname = newHomepagePathName; + return context.env.ASSETS.fetch(url); + } else { + const percentage = Math.floor(Math.random() * 100); + let version = "current"; // default version + // change pathname and version name for 50% of traffic + if (percentage < 50) { + url.pathname = newHomepagePathName; + version = "new"; + } + // get the static file from ASSETS, and attach a cookie + const asset = await context.env.ASSETS.fetch(url); + let response = new Response(asset.body, asset); + response.headers.append("Set-Cookie", `${cookieName}=${version}; path=/`); + return response; + } + } + return context.next(); }; export const onRequest = [abTest]; diff --git a/src/content/docs/pages/how-to/web-analytics.mdx b/src/content/docs/pages/how-to/web-analytics.mdx index c2af3a42c48a942..e0dcb374b2634cb 100644 --- a/src/content/docs/pages/how-to/web-analytics.mdx +++ b/src/content/docs/pages/how-to/web-analytics.mdx @@ -1,10 +1,14 @@ --- pcx_content_type: how-to title: Enable Web Analytics - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- -import { Render } from "~/components" +import { Render } from "~/components"; diff --git a/src/content/docs/pages/how-to/www-redirect.mdx b/src/content/docs/pages/how-to/www-redirect.mdx index 77a345396c2b7de..11fec02d6489703 100644 --- a/src/content/docs/pages/how-to/www-redirect.mdx +++ b/src/content/docs/pages/how-to/www-redirect.mdx @@ -1,6 +1,11 @@ --- pcx_content_type: how-to title: Redirecting www to domain apex +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { Example } from "~/components"; diff --git a/src/content/docs/pages/index.mdx b/src/content/docs/pages/index.mdx index 6555d68a21971ac..fb09d9d7c2ee58f 100644 --- a/src/content/docs/pages/index.mdx +++ b/src/content/docs/pages/index.mdx @@ -7,20 +7,35 @@ sidebar: head: - tag: title content: Overview +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- -import { CardGrid, Description, Feature, LinkTitleCard, Plan, RelatedProduct, Render } from "~/components" +import { + CardGrid, + Description, + Feature, + LinkTitleCard, + Plan, + RelatedProduct, + Render, + Aside, +} from "~/components"; Create full-stack applications that are instantly deployed to the Cloudflare global network. + Deploy your Pages project by connecting to [your Git provider](/pages/get-started/git-integration/), uploading prebuilt assets directly to Pages with [Direct Upload](/pages/get-started/direct-upload/) or using [C3](/pages/get-started/c3/) from the command line. -*** +--- ## Features @@ -28,24 +43,21 @@ Deploy your Pages project by connecting to [your Git provider](/pages/get-starte Use Pages Functions to deploy server-side code to enable dynamic functionality without running a dedicated server. - Rollbacks allow you to instantly revert your project to a previous production deployment. - Set up redirects for your Cloudflare Pages project. - -*** +--- ## Related products @@ -53,54 +65,61 @@ Set up redirects for your Cloudflare Pages project. Cloudflare Workers provides a serverless execution environment that allows you to create new applications or augment existing ones without configuring or maintaining infrastructure. - Cloudflare R2 Storage allows developers to store large amounts of unstructured data without the costly egress bandwidth fees associated with typical cloud storage services. - D1 is Cloudflare’s native serverless database. Create a database by importing data or defining your tables and writing your queries within a Worker or through the API. - Offload third-party tools and services to the cloud and improve the speed and security of your website. - -*** +--- ## More resources -Learn about limits that apply to your Pages project (500 deploys per month on the Free plan). - - - -Migrate to Pages from your existing hosting provider. + Learn about limits that apply to your Pages project (500 deploys per month on + the Free plan). - -Deploy popular frameworks such as React, Hugo, and Next.js on Pages. + + Deploy popular frameworks such as React, Hugo, and Next.js on Pages. - -Connect with the Workers community on Discord to ask questions, show what you are building, and discuss the platform with other developers. + + Connect with the Workers community on Discord to ask questions, show what you + are building, and discuss the platform with other developers. - -Follow @CloudflareDev on Twitter to learn about product announcements, and what is new in Cloudflare Workers. + + Follow @CloudflareDev on Twitter to learn about product announcements, and + what is new in Cloudflare Workers. diff --git a/src/content/docs/pages/migrations/index.mdx b/src/content/docs/pages/migrations/index.mdx index b91a115630f785b..005c87efa62232b 100644 --- a/src/content/docs/pages/migrations/index.mdx +++ b/src/content/docs/pages/migrations/index.mdx @@ -5,6 +5,11 @@ title: Migration guides sidebar: hidden: true order: 4 +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { DirectoryListing } from "~/components"; diff --git a/src/content/docs/pages/migrations/migrating-from-firebase.mdx b/src/content/docs/pages/migrations/migrating-from-firebase.mdx index 3c76c7540d31ff1..8c8556d276f766d 100644 --- a/src/content/docs/pages/migrations/migrating-from-firebase.mdx +++ b/src/content/docs/pages/migrations/migrating-from-firebase.mdx @@ -5,6 +5,11 @@ pcx_content_type: tutorial title: Migrating from Firebase sidebar: hidden: true +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- In this tutorial, you will learn how to migrate an existing Firebase application to Cloudflare Pages. You should already have an existing project deployed on Firebase that you would like to host on Cloudflare Pages. diff --git a/src/content/docs/pages/migrations/migrating-from-netlify/index.mdx b/src/content/docs/pages/migrations/migrating-from-netlify/index.mdx index c9cb132eb27da6b..d0c1d63f392441c 100644 --- a/src/content/docs/pages/migrations/migrating-from-netlify/index.mdx +++ b/src/content/docs/pages/migrations/migrating-from-netlify/index.mdx @@ -7,6 +7,11 @@ languages: - JavaScript sidebar: hidden: true +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- In this tutorial, you will learn how to migrate your Netlify application to Cloudflare Pages. diff --git a/src/content/docs/pages/migrations/migrating-from-vercel/index.mdx b/src/content/docs/pages/migrations/migrating-from-vercel/index.mdx index de6e080c8987a5e..63cf3a428e335e6 100644 --- a/src/content/docs/pages/migrations/migrating-from-vercel/index.mdx +++ b/src/content/docs/pages/migrations/migrating-from-vercel/index.mdx @@ -5,6 +5,11 @@ pcx_content_type: tutorial title: Migrating from Vercel to Pages sidebar: hidden: true +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { Render } from "~/components"; diff --git a/src/content/docs/pages/migrations/migrating-from-workers/index.mdx b/src/content/docs/pages/migrations/migrating-from-workers/index.mdx index 42efc7ca38f1374..5a1cfcea6419d74 100644 --- a/src/content/docs/pages/migrations/migrating-from-workers/index.mdx +++ b/src/content/docs/pages/migrations/migrating-from-workers/index.mdx @@ -5,6 +5,11 @@ pcx_content_type: tutorial title: Migrating from Workers Sites to Pages sidebar: hidden: true +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- In this tutorial, you will learn how to migrate an existing [Cloudflare Workers Sites](/workers/configuration/sites/) application to Cloudflare Pages. diff --git a/src/content/docs/pages/migrations/migrating-jekyll-from-github-pages.mdx b/src/content/docs/pages/migrations/migrating-jekyll-from-github-pages.mdx index 9a46689bcfb6cd3..2fd4e773402c52f 100644 --- a/src/content/docs/pages/migrations/migrating-jekyll-from-github-pages.mdx +++ b/src/content/docs/pages/migrations/migrating-jekyll-from-github-pages.mdx @@ -7,6 +7,11 @@ languages: - Ruby sidebar: hidden: true +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- In this tutorial, you will learn how to migrate an existing [GitHub Pages site using Jekyll](https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/about-github-pages-and-jekyll) to Cloudflare Pages. Jekyll is one of the most popular static site generators used with GitHub Pages, and migrating your GitHub Pages site to Cloudflare Pages will take a few short steps. diff --git a/src/content/docs/pages/platform/changelog.mdx b/src/content/docs/pages/platform/changelog.mdx index 0fe412c94913e98..13413f5ed0462de 100644 --- a/src/content/docs/pages/platform/changelog.mdx +++ b/src/content/docs/pages/platform/changelog.mdx @@ -5,6 +5,11 @@ release_notes_file_name: - pages sidebar: order: 3 +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- import { ProductReleaseNotes } from "~/components"; diff --git a/src/content/docs/pages/platform/index.mdx b/src/content/docs/pages/platform/index.mdx index 7bc8887e7abebbe..c9a651975753eff 100644 --- a/src/content/docs/pages/platform/index.mdx +++ b/src/content/docs/pages/platform/index.mdx @@ -3,9 +3,15 @@ pcx_content_type: navigation title: Platform sidebar: order: 9 - + group: + hideIndex: true +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- -import { DirectoryListing } from "~/components" +import { DirectoryListing } from "~/components"; diff --git a/src/content/docs/pages/platform/known-issues.mdx b/src/content/docs/pages/platform/known-issues.mdx index 97aa558d274f9b6..be76ae774540be1 100644 --- a/src/content/docs/pages/platform/known-issues.mdx +++ b/src/content/docs/pages/platform/known-issues.mdx @@ -3,6 +3,11 @@ pcx_content_type: concept title: Known issues sidebar: order: 4 +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- Here are some known bugs and issues with Cloudflare Pages: diff --git a/src/content/docs/pages/platform/limits.mdx b/src/content/docs/pages/platform/limits.mdx index 6f311961b07b644..fb5eecaeee00a65 100644 --- a/src/content/docs/pages/platform/limits.mdx +++ b/src/content/docs/pages/platform/limits.mdx @@ -3,10 +3,14 @@ pcx_content_type: concept title: Limits sidebar: order: 1 - +banner: + content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix. + type: note + dismissible: + id: pages-migrate-to-workers --- -import { Render } from "~/components" +import { Render } from "~/components"; Below are limits observed by the Cloudflare Free plan. For more details on removing these limits, refer to the [Cloudflare plans](https://www.cloudflare.com/plans) page. @@ -38,10 +42,8 @@ The maximum file size for a single Cloudflare Pages site asset is 25 MiB. :::note[Larger Files] - To serve larger files, consider uploading them to [R2](/r2/) and utilizing the [public bucket](/r2/buckets/public-buckets/) feature. You can also use [custom domains](/r2/buckets/public-buckets/#connect-a-bucket-to-a-custom-domain), such as `static.example.com`, for serving these files. - ::: ## Headers @@ -60,7 +62,7 @@ A `_redirects` file can have a maximum of 2,000 static redirects and 100 dynamic ## Users -Your Pages site can be managed by an unlimited number of users via the Cloudflare dashboard. Note that this does not correlate with your Git project – you can manage both public and private repositories, open issues, and accept pull requests via without impacting your Pages site. +Your Pages site can be managed by an unlimited number of users via the Cloudflare dashboard. Note that this does not correlate with your Git project – you can manage both public and private repositories, open issues, and accept pull requests via without impacting your Pages site. ## Projects diff --git a/src/content/docs/pages/platform/storage-options.mdx b/src/content/docs/pages/platform/storage-options.mdx index 14b9dc6437b6a53..5b3fece0642076b 100644 --- a/src/content/docs/pages/platform/storage-options.mdx +++ b/src/content/docs/pages/platform/storage-options.mdx @@ -4,5 +4,4 @@ title: Choose a data or storage product external_link: /workers/platform/storage-options/ sidebar: order: 2 - --- From e698350f4415f0a187362186441c3b6625cbff89 Mon Sep 17 00:00:00 2001 From: Greg Brimble Date: Mon, 5 May 2025 11:45:35 -0400 Subject: [PATCH 3/4] Minor styling fixups --- src/components/overrides/Banner.astro | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/overrides/Banner.astro b/src/components/overrides/Banner.astro index 0ffcc09e0b9bdfd..82b8b660035f55a 100644 --- a/src/components/overrides/Banner.astro +++ b/src/components/overrides/Banner.astro @@ -36,8 +36,10 @@ const { banner } = Astro.locals.starlightRoute.entry.data;
-
- {icon && } +
+ {icon && ( + + )}
Date: Tue, 6 May 2025 23:30:19 -0400 Subject: [PATCH 4/4] Minor styling fixes --- src/components/SidebarIcon.astro | 3 ++- src/components/overrides/Banner.astro | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/SidebarIcon.astro b/src/components/SidebarIcon.astro index 46a16187537086b..c3aafc892bd734d 100644 --- a/src/components/SidebarIcon.astro +++ b/src/components/SidebarIcon.astro @@ -22,7 +22,8 @@ const filter = style={{ filter, height: "17px", // if someone smarter than me can make this properly text height, please go for it - width: "auto", + width: "17px", + marginRight: "0.5em", float: "left", }} src={iconProps.lottieLink} diff --git a/src/components/overrides/Banner.astro b/src/components/overrides/Banner.astro index 82b8b660035f55a..9cb535f950fb9a5 100644 --- a/src/components/overrides/Banner.astro +++ b/src/components/overrides/Banner.astro @@ -36,7 +36,7 @@ const { banner } = Astro.locals.starlightRoute.entry.data;
-
+
{icon && ( )} @@ -68,7 +68,7 @@ const { banner } = Astro.locals.starlightRoute.entry.data;
-
+
{icon && }