This site disallows AI crawler bots
+
+
+
+ + This example shows how to use webhooks for project updates from Linear and use Anthropic to generate AI summaries of those updates. Then, a weekly scheduled function runs to generate the executive summary of all of the project updates from the past week. + +
++ The easiest way to try out this example is to deploy your own copy with your API keys. You can do that by clicking the button below. +
+
+ 
+
Clicking the button will clone this example from the examples repo and deploy it as a new site on Netlify
+ +{text}
+An example of adding authentication to protect gated content
+You've reached a protected page. Please sign in to access this content.
+An example of adding authentication to protect gagted content
++ Magna velit quis tempor ad laboris sunt. Qui dolor adipisicing magna dolor dolor sit amet + labore Lorem. Sint laboris est do incididunt eiusmod ullamco magna ipsum ullamco + adipisicing. +
++ Aute ea ipsum commodo exercitation sint ipsum adipisicing tempor nisi velit sit elit. Sunt + ex do fugiat enim elit quis laboris mollit. Deserunt sint sint qui tempor in culpa. Nulla + ea amet pariatur id id cillum sunt Lorem reprehenderit. +
++ Officia exercitation nulla aliquip qui sint amet. Qui laboris laboris id consectetur et + nisi nostrud consectetur ad pariatur commodo enim. Nulla cillum adipisicing laborum aute + id nisi duis enim labore ipsum nostrud laborum. Proident adipisicing anim ut sit + excepteur. +
++ Esse eu nostrud exercitation sunt. Consectetur eu sit aliquip ipsum exercitation mollit eu + sit. Magna dolor exercitation aute veniam qui. Do in occaecat laborum deserunt non do + labore quis magna. Reprehenderit dolor labore anim dolor consectetur. +
++ Elit proident eiusmod qui voluptate aute nisi aliquip aute sunt irure laboris commodo + ullamco in. Consectetur magna deserunt ex duis do enim mollit ea. Officia deserunt in + exercitation proident ipsum sunt aute nostrud aute. Et duis reprehenderit velit id fugiat + minim ut id non aliquip. Minim officia esse quis esse laboris sit amet cupidatat duis + nostrud exercitation exercitation. +
+An example of adding authentication to protect gated content
++ This is a site with a simple auth solution using Clerk. + Sign in and out using the button in the header. +
+
+ You must replace the <script> in all HTML files. Find the appropriate
+ code in
+ Clerk's JavaScript Quickstart guide.
+
+ The gated page (linked in the nav) is only available if you are signed in. Otherwise, the
+ content of the page is shown as protected and the sign in form will be shown. This gate is
+ provided by the auth-middleware.ts edge function and the
+ __gate__.html page.
+
An authentication example
++ This is a site with a simple auth solution using + Clerk. Sign in and out using the + button in the header. +
+
+ You must replace the <script> in the
+ index.html. Find the appropriate code in
+ Clerk's JavaScript Quickstart guide.
+
+ This message should load from the server after a 2 second delay and should not block the rest of the page from rendering. +diff --git a/examples/compose-astro-platform-demo/src/components/EdgeFunctionExplainer.astro b/examples/compose-astro-platform-demo/src/components/EdgeFunctionExplainer.astro new file mode 100644 index 0000000..fb6e6ae --- /dev/null +++ b/examples/compose-astro-platform-demo/src/components/EdgeFunctionExplainer.astro @@ -0,0 +1,24 @@ +--- +import Markdown from './Markdown.astro'; + +const explainer = ` +This page is using a Netlify Edge Function (\`netlify/edge-functions/rewrite.js\`) to rewrite the URL based on visitor geography. + +~~~js +const rewrite = async (request, context) => { + const path = context.geo?.country?.code === 'AU' ? '/edge/australia' : '/edge/not-australia'; + return new URL(path, request.url); +}; + +export const config = { + path: '/edge' +}; + +export default rewrite; +~~~ + +[See more examples](https://edge-functions-examples.netlify.app) +`; +--- + +
Loading...diff --git a/examples/compose-astro-platform-demo/src/components/Footer.astro b/examples/compose-astro-platform-demo/src/components/Footer.astro new file mode 100644 index 0000000..9fa22bb --- /dev/null +++ b/examples/compose-astro-platform-demo/src/components/Footer.astro @@ -0,0 +1,59 @@ +--- +import { Icon } from 'astro-icon/components'; +--- + + diff --git a/examples/compose-astro-platform-demo/src/components/Header.astro b/examples/compose-astro-platform-demo/src/components/Header.astro new file mode 100644 index 0000000..af11109 --- /dev/null +++ b/examples/compose-astro-platform-demo/src/components/Header.astro @@ -0,0 +1,32 @@ +--- +import { Icon } from 'astro-icon/components'; + +const navItems = [ + { linkText: 'Home', href: '/' }, + { linkText: 'Caching', href: '/caching' }, + { linkText: 'Image CDN', href: '/image-cdn' }, + { linkText: 'Edge Functions', href: '/edge-functions' }, + { linkText: 'Blobs', href: '/blobs' }, + { linkText: 'Server Islands', href: '/server-islands' }, +]; +--- + +
+
+
+{page.data.subheading}
} +{blobData.parameters?.name}}
+ {page.data.subheading}
} +{new Date().toUTCString()}
+
+ {revalidationPage.data.subheading}
} + ++ Use the button below to invalidate a random tag out of this page's tags, then refresh the + page. +
+Astro’s Server Islands allow you to make a choice of rendering strategy on a per-component basis.
+ +This means the majority of a page can be statically rendered at build time and served from the edge, while a handful of components (the ‘islands’) can be dynamically rendered per request, thus offering the benefits of both static and dynamic rendering.
+ +Astro implements this technique by leaving ‘slots’ in the statically rendered shell and injecting a small script into the HTML that fetches the dynamic components during the page load and drops them into the slots. This is all handled automatically by Astro and the Netlify deploy adapter.
+
+ `;
+}
+
diff --git a/examples/edge-functions/components/footer.js b/examples/edge-functions/components/footer.js
new file mode 100644
index 0000000..7164a4e
--- /dev/null
+++ b/examples/edge-functions/components/footer.js
@@ -0,0 +1,64 @@
+export default function footer() {
+ const date = new Date();
+ const year = date.getFullYear();
+ return `
+
+
+ `;
+}
diff --git a/examples/edge-functions/components/geolocation-info.js b/examples/edge-functions/components/geolocation-info.js
new file mode 100644
index 0000000..9f1581b
--- /dev/null
+++ b/examples/edge-functions/components/geolocation-info.js
@@ -0,0 +1,14 @@
+export default function geolocation({ city, countryCode, countryName, latitude, longitude, timezone }) {
+ return `
+ }.png)
+ Reference examples for learning about Edge Functions on Netlify.
+Using JavaScript and TypeScript, Netlify Edge Functions give you the power to modify network requests to localize content, serve relevant ads, authenticate visitors, A/B test content, and much more! +
+ This all happens at the Edge — directly from the worldwide location closest to each user.
+ + +++To use Edge Functions on Netlify, add JavaScript or TypeScript files to a
+ +/netlify/edge-functionsdirectory in your project.
+ ${ + data.url.pathname !== "/" ? `Explore more examples` : "" + } +
++ Try out Edge Functions on Netlify today! Click the button below to deploy this site with all of its demos to your Netlify account. +
+${deployButton()}
+A/B tests are a great way to test new features on your site. A basic A/B test works by assigning visitors to a particular test "bucket" the first time they visit a site, usually using a random number between 0 and 1.
+Visitors can then be redirected to different pages, depending on the bucket and cookie they were assigned.
+You could even use A/B testing in combination with Geolocation at The Edge!
+ +import type { Context } from "@netlify/edge-functions";
+
+export default async (request: Request, context: Context) => {
+ // look for existing "test_bucket" cookie
+ const bucketName = "test_bucket";
+ const bucket = context.cookies.get(bucketName);
+
+ // return here if we find a cookie
+ if (bucket) {
+ return new Response(`${bucketName} ${bucket} already assigned!`);
+ }
+
+ // if no "test_bucket" cookie is found, assign the user to a bucket
+ // in this example we're using two buckets (a, b) with an equal weighting of 50/50
+ const weighting = 0.5;
+
+ // get a random number between (0-1)
+ // this is a basic example and you may want to experiment
+ const random = Math.random();
+ const newBucketValue = random <= weighting ? "a" : "b";
+
+ // set the new "test_bucket" cookie
+ context.cookies.set({
+ name: bucketName,
+ value: newBucketValue,
+ });
+
+ return new Response(
+ `You have been assigned ${bucketName} ${newBucketValue}.`,
+ );
+};
+Netlify Edge Functions give access to site information via context.site.
import type { Context } from "@netlify/edge-functions";
+
+export default async (request: Request, context: Context) => {
+ return new Response(\`Hello from \${context.site.name}!\`);
+};Use an Edge Function to delete cookies.
+import type { Context } from "@netlify/edge-functions";
+
+export default async (request: Request, context: Context) => {
+ // Delete a cookie
+ context.cookies.delete("My cookie");
+};Use an Edge Function to read and manage HTTP cookies.
+import type { Context } from "@netlify/edge-functions";
+
+export default async (request: Request, context: Context) => {
+ // Read the value of a cookie
+ const value = context.cookies.get("My cookie");
+};Use an Edge Function to create and manage HTTP cookies.
+import type { Context } from "@netlify/edge-functions";
+
+export default async (request: Request, context: Context) => {
+ // Set a cookie
+ context.cookies.set({
+ name: "My cookie",
+ value: "hello",
+ });
+};You can use geolocation data to identify a user's country and block content if required.
+Geolocation information is available on the Context.geo object.
import { Context } from "@netlify/edge-functions";
+
+export default async (request: Request, context: Context) => {
+ const BLOCKED_COUNTRY_CODE = "GB";
+ const countryCode = context.geo?.country?.code || "US";
+ const countryName = context.geo?.country?.name || "United States of America";
+
+ if (countryCode === BLOCKED_COUNTRY_CODE) {
+ return new Response(`We're sorry, you can't access our content from ${countryName}!`, {
+ headers: { "content-type": "text/html" },
+ status: 451,
+ });
+ }
+
+ return new Response(`Hello there! You can freely access our content from ${countryName}!`, {
+ headers: { "content-type": "text/html" },
+ });
+};To access your Netlify environment variables in Edge Functions, use the Netlify.env API.
import type { Context } from "@netlify/edge-functions";
+
+export default async (request: Request, context: Context) => {
+ const value = Netlify.env.get("MY_IMPORTANT_VARIABLE");
+
+ return new Response(`Value of MY_IMPORTANT_VARIABLE is "${value}".`, {
+ headers: { "content-type": "text/html" },
+ });
+};You can use Edge Functions to get information about a user's location to serve location-specific content and personalize their experience.
+ + ${geolocationInfo({ + city: geo?.city, + countryCode: geo?.country?.code, + countryName: geo?.country?.name, + latitude: geo?.latitude, + longitude: geo?.longitude, + timezone: geo?.timezone, + })} + +Geolocation information is available on the Context.geo object.
import { Context } from "@netlify/edge-functions";
+
+export default async (request: Request, context: Context) => {
+ // Here's what's available on context.geo
+
+ // context: {
+ // geo: {
+ // city?: string;
+ // country?: {
+ // code?: string;
+ // name?: string;
+ // },
+ // subdivision?: {
+ // code?: string;
+ // name?: string;
+ // },
+ // latitude?: number;
+ // longitude?: number;
+ // timezone?: string;
+ // }
+ // }
+
+ return Response.json({
+ geo: context.geo,
+ });
+};+ You can use Edge Functions to return a plain HTTP text/html response. In this example, we return the string "Hello, World!" as text/html. +
+ +export default async (request) => {
+ return new Response("Hello, World!", {
+ headers: { "content-type": "text/html" },
+ });
+};++Pro tip!
++ Need to return JSON data from an Edge Function? Check out the JSON response method on the Context object! +
+
+ Explore the examples below, or over in the GitHub repository for this site. +
+ ++ You can use Edge Functions with the HTMLRewriter library to transform HTML + responses. HTMLRewriter uses WebAssembly to parse a response stream, so is very + efficient. It can parse large HTML pages with minimal overhead, and is a better + choice than using a string transform in most cases. It has an API that uses + familiar CSS selectors to target elements, and can be used to add, remove, or + modify elements. +
+
+ In this example, we transform an HTML page, replacing the src of img tags
+ with a placeholder image. We also add content with the user's location. This
+ shows how to do user personalization when the pages may be static.
+
import { Config, Context } from "@netlify/edge-functions";
+import { HTMLRewriter } from "https://ghuc.cc/worker-tools/html-rewriter/index.ts";
+
+export default async function handler(request: Request, context: Context) {
+ const url = new URL(request.url);
+ // Only run if the catify query parameter is set
+ if (!url.searchParams.has("catify")) {
+ return;
+ }
+
+ const location = context?.geo?.city;
+
+ const response = await context.next();
+ const rewriter = new HTMLRewriter()
+ .on("#location", {
+ element: (element) => {
+ element.setInnerContent(\`Catified for a visitor in \${location}\`);
+ },
+ })
+ .on("img[catify]", {
+ element: (element) => {
+ const width = element.getAttribute("width") ?? 800;
+ const height = element.getAttribute("height") ?? 600;
+ element.setAttribute(
+ "src",
+ \`https://placekitten.com/\${width}/\${height}\`
+ );
+ element.setAttribute("alt", "A random cat");
+ },
+ });
+ return rewriter.transform(response);
+}
+You can use Edge Functions to return an image.
+ +import type { Context } from "@netlify/edge-functions";
+
+export default async (request: Request, context: Context) => {
+
+ // Return an internal image using a rewrite
+ // This image is stored in the /public directory of this project
+ return new URL("/apple-touch-icon.png", request.url);
+
+ // OR
+
+ // Use fetch() and return the image response
+ const kitten = await fetch("https://github.com/service/https://placekitten.com/g/300/300");
+ return kitten;
+};
+{{INCLUDE_PRICE_INFO}} placeholder in our response, and replace it with
+some other content.
+
+## Code example
+
+Edge Functions are files held in the `netlify/edge-functions` directory.
+
+```ts
+import { Context } from "@netlify/edge-functions";
+
+export default async (request: Request, context: Context) => {
+ // Get the page content
+ const response = await context.next();
+ const page = await response.text();
+
+ // Search for the placeholder
+ const regex = /{{INCLUDE_PRICE_INFO}}/i;
+
+ // Replace the content
+ const pricingContent = "It's expensive, but buy it anyway.";
+ const updatedPage = page.replace(regex, pricingContent);
+ return new Response(updatedPage, response);
+};
+```
+
+- [Explore the code for this Edge Function](../../netlify/edge-functions/include.ts)
+
+## View this example on the web
+
+- https://edge-functions-examples.netlify.app/example/includes
+
+## Deploy to Netlify
+
+You can deploy this and all the other examples in this repo as a site of your own to explore and experiment with, by
+clicking this button.
+
+[](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/examples/&create_from_path=examples/edge-functions/&utm_campaign=dx-examples&utm_source=edge-functions-examples&utm_medium=web&utm_content=Deploy%20Edge%20Functions%20Examples%20to%20Netlify)
diff --git a/examples/edge-functions/pages/include/index.js b/examples/edge-functions/pages/include/index.js
new file mode 100644
index 0000000..da6d628
--- /dev/null
+++ b/examples/edge-functions/pages/include/index.js
@@ -0,0 +1,59 @@
+import repoLink from "../../components/repo-link.js";
+
+export default {
+ title: "Includes at The Edge",
+ metaDescription: "Dynamically include content into templates at The Edge.",
+ page: function() {
+ return `
+ + The ability to transform the content of an HTTP response with Edge Functions enables you to substitute content into templates as you would with Edge Includes. +
+
+ In this example, we look for an {{INCLUDE_PRICE_INFO}} placeholder in our response, and replace it with some other content.
+
import { Context } from "@netlify/edge-functions";
+
+export default async (request: Request, context: Context) => {
+
+ // Just return what was requested without transforming it,
+ // unless we fnd the query parameter for this demo
+ const url = new URL(request.url);
+ if (url.searchParams.get("include") !== "pricing") {
+ return;
+ }
+
+ console.log("Including pricing content into the page");
+
+ // Get the page content
+ const response = await context.next();
+ const page = await response.text();
+
+ // Search for the placeholder
+ const regex = /{{INCLUDE_PRICE_INFO}}/i;
+
+ // Replace the content
+ const pricingContent = "It's expensive, but buy it anyway.";
+ const updatedPage = page.replace(regex, pricingContent);
+ return new Response(updatedPage, response);
+};
+
+This include Edge Function is set up to run using the include=pricing query parameter on any URL, using this entry in the netlify.toml file:
[[edge_functions]]
+ function = "include"
+ path = "/*"You can use Edge Functions to return a JSON response by returning Response.json() with a JavaScript object — no need to JSON.stringify!
In this example, we return a JSON object containing hello: "world".
import type { Context } from "@netlify/edge-functions";
+
+export default async (request: Request, context: Context) => {
+ return Response.json({ hello: "world" });
+};
+++Pro tip!
+Need to return text/html from an Edge Function? Check out the Hello, world example.
+
You can use geolocation data to serve localized content according to country code.
+Geolocation information is available on the Context.geo object.
export default async (request, context) => {
+ const translations = {
+ UNKNOWN: "Hello!",
+ US: "Howdy y'all!",
+ GB: "How do you do?",
+ AU: "G'day, mate!",
+ };
+
+ const countryCode = context.geo?.country?.code || "UNKNOWN";
+ const countryName = context.geo?.country?.name || "somewhere in the world";
+
+ return new Response(`Your personalized greeting for ${countryName} is: ${translations[countryCode]}`, {
+ headers: { "content-type": "text/html" },
+ });
+};
+You can also combine geolocation data with URL rewrites for another way to serve internationalized content.
+You can output content to the logs during the execution of your Edge Function.
+import type { Context } from "@netlify/edge-functions";
+
+export default async (request: Request, context: Context) => {
+ console.log("Hello from the logging service");
+};Edge Functions are limited to 50ms of CPU time, but this does not include time spent waiting or + making network calls. As long as a function returns headers within 40 seconds it can run indefinitely. +
++ If you need to make API calls or perform other work that takes longer than this, you can return a stream + from the function and write to it when you have the data. +
+ +import type { Context } from "@netlify/edge-functions";
+
+export default (request: Request, context: Context) => {
+ const body = new ReadableStream({
+ async start(controller) {
+ // this might be an API call or other slow external operation
+ const response = await doSomethingSlow();
+ controller.enqueue(new TextEncoder().encode(response));
+ controller.close()
+ }
+ });
+ return new Response(body, {
+ headers: {
+ "Content-Type": "text/plain",
+ },
+ });
+};
+++Pro tip!
+Need to send updates to the browser from a long-running edge function? Check out the server-sent events (SSE) example.
+
+ With in-source configuration, you can restrict Edge Functions to respond to certain HTTP methods. +
+
+ In this example, we set up an Edge Function to execute for a PUT or POST request.
+
import type { Config, Context } from "@netlify/edge-functions";
+
+export default async (request: Request, context: Context) => {
+ return new Response(\`This is a response to a \${request.method}\`)
+};
+
+export const config: Config = {
+ method: ["POST", "PUT"]
+}Since the Edge Function is configured to respond to PUT and POST, accessing the Edge Function through a browser will result in a 404.
+
To validate that the Edge Function works, you can use cURL in your terminal:
+ +
+ curl -X POST https://edge-functions-examples.netlify.app/example/method
+ curl -X PUT https://edge-functions-examples.netlify.app/example/method
+ You can use fetch() to make requests to other sources via an Edge Function.
import { Context } from "@netlify/edge-functions";
+
+export default async (request: Request, context: Context) => {
+
+ const joke = await fetch("https://github.com/service/https://icanhazdadjoke.com/", {
+ "headers": {
+ "Accept": "application/json"
+ }
+ });
+
+ const jsonData = await joke.json();
+ return Response.json(jsonData);
+};++`; + }, +}; \ No newline at end of file diff --git a/examples/edge-functions/pages/rewrite/README.md b/examples/edge-functions/pages/rewrite/README.md new file mode 100644 index 0000000..c1937cb --- /dev/null +++ b/examples/edge-functions/pages/rewrite/README.md @@ -0,0 +1,30 @@ + + +# Rewrite with Netlify Edge Functions + +You can rewrite requests on one URL to resources available on another URL using an Edge Function. + +## Code example + +Edge Functions are files held in the `netlify/edge-functions` directory. + +```ts +import type { Context } from "@netlify/edge-functions"; + +export default async (request: Request, context: Context) => { + return new URL("/something-to-serve-with-a-rewrite", request.url); +}; +``` + +- [Explore the code for this Edge Function](../../netlify/edge-functions/rewrite.ts) + +## View this example on the web + +- https://edge-functions-examples.netlify.app/example/rewrite + +## Deploy to Netlify + +You can deploy this and all the other examples in this repo as a site of your own to explore and experiment with, by +clicking this button. + +[](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/examples/&create_from_path=examples/edge-functions/&utm_campaign=dx-examples&utm_source=edge-functions-examples&utm_medium=web&utm_content=Deploy%20Edge%20Functions%20Examples%20to%20Netlify) diff --git a/examples/edge-functions/pages/rewrite/index.js b/examples/edge-functions/pages/rewrite/index.js new file mode 100644 index 0000000..98ec7d2 --- /dev/null +++ b/examples/edge-functions/pages/rewrite/index.js @@ -0,0 +1,31 @@ +import repoLink from "../../components/repo-link.js"; + +export default { + title: "Rewrite with Edge Functions", + metaDescription: "Rewrite HTTP requests with an edge function", + page: function() { + return ` +Pro tip!
+Curious about
+ +Response.json()in the code example above? Check out how you can return a JSON response using Edge Functions.
You can rewrite requests on one URL to resources available on another URL using an Edge Function.
+import type { Context } from "@netlify/edge-functions";
+
+export default async (request: Request, context: Context) => {
+ return new URL("/something-to-serve-with-a-rewrite", request.url);
+};
+++Pro tip!
+You can combine geolocation data with URL rewrites to serve different URLs powering internationalized content.
+
You can use Edge Functions to create a long-running service that can stream data to the browser using Server-Sent Events (SSE). + While there is a 50ms limit on CPU time, time spent waiting for a response from an upstream service, or waiting for a timer to expire, does not count towards this limit. + This means you can create a long-running service that can stream data to the browser. +
+ +import type { Context } from "@netlify/edge-functions";
+
+export default async (request: Request, context: Context) => {
+ let index = 0
+ const encoder = new TextEncoder();
+ const body = new ReadableStream({
+ start(controller) {
+ setInterval(() => {
+ controller.enqueue(encoder.encode(\`data: Hi $\{index++}\\n\\n\`));
+ }, 1000);
+ },
+ });
+ return new Response(body, {
+ headers: {
+ "Content-Type": "text/event-stream",
+ },
+ });
+};
+++Pro tip!
+Need to wait a long time before starting to stream a response? Check out the slow streaming example.
+
Use an Edge Function to add HTTP headers to any HTTP request.
+import type { Context } from "@netlify/edge-functions";
+
+export default async (request: Request, context: Context) => {
+ request.headers.set("X-Your-Custom-Header", "Your custom header value");
+};${repoLink("set-request-header.ts")}
+Use an Edge Function to add HTTP headers to any HTTP response.
+import type { Context } from "@netlify/edge-functions";
+
+export default async (request: Request, context: Context) => {
+ const response = await context.next();
+ response.headers.set("X-Your-Custom-Header", "A custom value");
+ return response;
+};+ Use the links below to navigate to versions of this page with or wothout the custom header, which you'll be able to inspect in your browser dev tools, +
+toUpperCase() function, using the query parameter
+`?method=transform`.
+
+## Code example
+
+Edge Functions are files held in the `netlify/edge-functions` directory.
+
+```ts
+import { Context } from "@netlify/edge-functions";
+
+export default async (request: Request, context: Context) => {
+ const url = new URL(request.url);
+
+ // Look for the query parameter, and return if we don't find it
+ if (url.searchParams.get("method") !== "transform") {
+ return;
+ }
+
+ console.log(`Transforming the response from this ${url}`);
+
+ const response = await context.next();
+
+ const text = await response.text();
+ return new Response(text.toUpperCase(), response);
+};
+```
+
+- [Explore the code for this Edge Function](../../netlify/edge-functions/transform.ts)
+
+## View this example on the web
+
+- https://edge-functions-examples.netlify.app/example/transform
+
+## Deploy to Netlify
+
+You can deploy this and all the other examples in this repo as a site of your own to explore and experiment with, by
+clicking this button.
+
+[](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/examples/&create_from_path=examples/edge-functions/&utm_campaign=dx-examples&utm_source=edge-functions-examples&utm_medium=web&utm_content=Deploy%20Edge%20Functions%20Examples%20to%20Netlify)
diff --git a/examples/edge-functions/pages/transform/index.js b/examples/edge-functions/pages/transform/index.js
new file mode 100644
index 0000000..f1ff79f
--- /dev/null
+++ b/examples/edge-functions/pages/transform/index.js
@@ -0,0 +1,43 @@
+import repoLink from "../../components/repo-link.js";
+
+export default {
+ title: "Transform HTTP Response",
+ metaDescription: "Dynamically transform any page response at The Edge.",
+ page: function () {
+ return `
+
+ You can use Edge Functions to transform the content of an HTTP response. In this example, we transform the response of a request to /hello with a toUpperCase() function, using the query parameter method=transform.
+
This is a simple example, and for more complex transformations you may want to use HTMLRewriter. +
+ +import { Context } from "@netlify/edge-functions";
+
+export default async (request: Request, context: Context) => {
+ const url = new URL(request.url);
+
+ // Look for the query parameter, and return if we don't find it
+ if (url.searchParams.get("method") !== "transform") {
+ return;
+ }
+
+ const response = await context.next();
+ const text = await response.text();
+ return new Response(text.toUpperCase(), response);
+};
+This transform Edge Function is set up to run using the method=transform query parameter on any URL
+ When a Netlify Edge Function throws an uncaught exception, + an error page is served. + To access the full error message, click on the "Edge Function Logs" link: +
+ +
+
+ export default async () => {
+ throw new Error("💥");
+};Using WebAssembly, you can speed up key components of your server logic. Using Netlify Edge Functions, you can bring that to the edge. This allows developers to build more calculation intensive logic in languages such as C, C++, and Rust that gets pushed even closer to users.
+In this example, we return a wasm computed response The answer is: 42.
// inlined Rust compiled code that prints "42"
+const wasmCode = new Uint8Array([
+ 0,97,115,109,1,0,0,0,1,133,128,128,128,0,1,96,0,1,127,
+ 3,130,128,128,128,0,1,0,4,132,128,128,128,0,1,112,0,0,
+ 5,131,128,128,128,0,1,0,1,6,129,128,128,128,0,0,7,145,
+ 128,128,128,0,2,6,109,101,109,111,114,121,2,0,4,109,97,
+ 105,110,0,0,10,138,128,128,128,0,1,132,128,128,128,0,0,
+ 65,42,11
+]);
+
+const wasmModule = new WebAssembly.Module(wasmCode);
+const wasmInstance = new WebAssembly.Instance(wasmModule);
+const main = wasmInstance.exports.main as CallableFunction;
+
+export default async () => {
+ return new Response(\`The answer is: \${main().toString()}\`);
+}
++ Catify me +
++ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, facilis rerum. Deleniti rem commodi consequuntur + ullam esse repellat cupiditate, sed a illo odit cum, ex laboriosam, sequi quisquam. Accusamus, ipsa! +
+{{INCLUDE_PRICE_INFO}}
+ + diff --git a/examples/edge-functions/public/something-to-serve-with-a-rewrite.html b/examples/edge-functions/public/something-to-serve-with-a-rewrite.html new file mode 100644 index 0000000..20c2c7f --- /dev/null +++ b/examples/edge-functions/public/something-to-serve-with-a-rewrite.html @@ -0,0 +1,26 @@ + + + + + + + +/something-to-serve-with-a-rewrite
+ /rewrite
+ l.code === currentLang)?.description}> +
+Loading...+ + diff --git a/examples/frameworks/astro-server-islands/src/components/Panel.astro b/examples/frameworks/astro-server-islands/src/components/Panel.astro new file mode 100644 index 0000000..8e84ec6 --- /dev/null +++ b/examples/frameworks/astro-server-islands/src/components/Panel.astro @@ -0,0 +1,6 @@ +
+ Atque perspiciatis placeat sit deserunt suscipit quisquam eaque hic dolorum libero magnam! Ducimus quis adipisci amet mollitia atque dicta iste aut ratione? +
++ This message should load from the server after a 2 second delay and should not block the rest of the page from rendering. +diff --git a/examples/frameworks/astro-server-islands/src/env.d.ts b/examples/frameworks/astro-server-islands/src/env.d.ts new file mode 100644 index 0000000..f964fe0 --- /dev/null +++ b/examples/frameworks/astro-server-islands/src/env.d.ts @@ -0,0 +1 @@ +///
+++
+ A simple example site to accompany this guide. +
++ Effortless animations, smooth transitions, and powerful interactions—all + with an intuitive API designed for developers of all skill levels. Elevate + your web experience with high-performance motion. +
+ ++ Motion.dev gives you the tools to create fluid, high-performance + animations with ease. From simple transitions to complex interactions, + unlock the full potential of motion in your web projects. +
++ With an intuitive API, Motion.dev makes animations easy to implement. + Define motion properties directly in your components without worrying + about complex animation logic. +
++ Enhance interactivity with built-in support for gestures, scroll-based + animations, and dynamic effects. Create immersive experiences that + respond to user input. +
++ Built for speed, Motion.dev leverages hardware acceleration and + optimized rendering techniques to keep animations smooth and + efficient, even in complex appdivcations. +
++ Tailor animations to fit your design needs with a highly flexible + system. Adjust easing, duration, and keyframes, or create custom + animations that match your brand's style. +
++ Integrate the Motion library into your Astro project and create stunning, high-performance animations with ease. Start building today! +
+ +Loading...
+ )} +{counter.value}
+ + + ); +}); + +export default CounterExample; diff --git a/examples/frameworks/astro-with-qwik/src/components/emoji-example.tsx b/examples/frameworks/astro-with-qwik/src/components/emoji-example.tsx new file mode 100644 index 0000000..cbb33a9 --- /dev/null +++ b/examples/frameworks/astro-with-qwik/src/components/emoji-example.tsx @@ -0,0 +1,54 @@ +import { component$, useStore, $ } from '@builder.io/qwik'; + +const EmojiExample = component$(() => { + const store = useStore<{ + astronaut: string; + rockets: string[]; + }>({ + astronaut: '', + rockets: [], + }); + + const handleAstronaut = $((_: Event, currentTarget: HTMLSelectElement) => { + store.astronaut = currentTarget.value; + }); + + const handleRocket = $(() => { + store.rockets.push('🚀'); + }); + + return ( + <> ++ + {store.astronaut} + +
+ ++ A set of examples showing the use of Qwik within Astro to accompany a guide on the Netlify Developer Hub +
++ Scroll down +
+A simpe example site to accompany this guide
+A simple example site to accompany this guide.
+Test
+ + +``` + +## List Types + +### Ordered List + +1. First item +2. Second item +3. Third item + +### Unordered List + +- List item +- Another item +- And another item + +### Nested list + +- Fruit + - Apple + - Orange + - Banana +- Dairy + - Milk + - Cheese + +## Other Elements — abbr, sub, sup, kbd, mark + +GIF is a bitmap image format. + +H2O + +Xn + Yn = Zn + +Press CTRL + ALT + Delete to end the session. + +Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures. \ No newline at end of file diff --git a/examples/frameworks/astro-with-visual-editor/src/content/blog/second-post.md b/examples/frameworks/astro-with-visual-editor/src/content/blog/second-post.md new file mode 100644 index 0000000..bf094aa --- /dev/null +++ b/examples/frameworks/astro-with-visual-editor/src/content/blog/second-post.md @@ -0,0 +1,17 @@ +--- +type: post +title: 'Second post' +description: 'Lorem ipsum dolor sit amet' +pubDate: 'Jul 15 2022' +heroImage: '/blog-placeholder-4.jpg' +--- + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet. + +Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc. Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra massa massa ultricies mi. + +Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed risus pretium quam vulputate. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Fringilla urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim. + +Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id cursus metus aliquam eleifend mi. + +Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna. diff --git a/examples/frameworks/astro-with-visual-editor/src/content/blog/third-post.md b/examples/frameworks/astro-with-visual-editor/src/content/blog/third-post.md new file mode 100644 index 0000000..e42d947 --- /dev/null +++ b/examples/frameworks/astro-with-visual-editor/src/content/blog/third-post.md @@ -0,0 +1,17 @@ +--- +type: post +title: 'Third post' +description: 'Lorem ipsum dolor sit amet' +pubDate: 'Jul 22 2022' +heroImage: '/blog-placeholder-2.jpg' +--- + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet. + +Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc. Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra massa massa ultricies mi. + +Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed risus pretium quam vulputate. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Fringilla urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim. + +Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id cursus metus aliquam eleifend mi. + +Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna. diff --git a/examples/frameworks/astro-with-visual-editor/src/content/blog/using-mdx.mdx b/examples/frameworks/astro-with-visual-editor/src/content/blog/using-mdx.mdx new file mode 100644 index 0000000..8e090d1 --- /dev/null +++ b/examples/frameworks/astro-with-visual-editor/src/content/blog/using-mdx.mdx @@ -0,0 +1,22 @@ +--- +type: post +title: 'Using MDX' +description: 'Lorem ipsum dolor sit amet' +pubDate: 'Jun 01 2024' +updatedDate: 'Sep 23 2024' +heroImage: '/blog-placeholder-5.jpg' +--- + +This theme comes with the [@astrojs/mdx](https://docs.astro.build/en/guides/integrations-guide/mdx/) integration installed and configured in your `astro.config.mjs` config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file. + +## Why MDX? + +MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to [mix JavaScript and UI Components into your Markdown content](https://docs.astro.build/en/guides/markdown-content/#mdx-features) for things like interactive charts or alerts. + +If you have existing content authored in MDX, this integration will hopefully make migrating to Astro a breeze. + +## More Links + +- [MDX Syntax Documentation](https://mdxjs.com/docs/what-is-mdx) +- [Astro Usage Documentation](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages) +- **Note:** [Client Directives](https://docs.astro.build/en/reference/directives-reference/#client-directives) are still required to create interactive components. Otherwise, all components in your MDX will render as static HTML (no JavaScript) by default. diff --git a/examples/frameworks/astro-with-visual-editor/src/layouts/BlogPost.astro b/examples/frameworks/astro-with-visual-editor/src/layouts/BlogPost.astro new file mode 100644 index 0000000..1a7c71a --- /dev/null +++ b/examples/frameworks/astro-with-visual-editor/src/layouts/BlogPost.astro @@ -0,0 +1,95 @@ +--- +import type { CollectionEntry } from 'astro:content'; +import BaseHead from '../components/BaseHead.astro'; +import Header from '../components/Header.astro'; +import Footer from '../components/Footer.astro'; +import FormattedDate from '../components/FormattedDate.astro'; + +type Props = CollectionEntry<'blog'>['data'] & { +filePath: CollectionEntry<'blog'>['filePath'] +}; + +const { filePath, title, description, pubDate, updatedDate, heroImage } = Astro.props; +--- + + + +
+
+ {product.title} +
+ +Loading cart ...
; + + const linesCount = Boolean(cart?.lines?.nodes?.length || 0); + const withDiscount = + cart && + Boolean(cart?.discountCodes?.filter((code) => code.applicable)?.length); + const className = `cart-main ${withDiscount ? 'with-discount' : ''}`; + const cartHasItems = (cart?.totalQuantity ?? 0) > 0; + + return ( ++ Looks like you haven’t added anything yet, let’s get you + started! +
+{codes?.join(', ')}
+
+
+ {product.title}
+ +No results, try a different search.
; +} diff --git a/examples/frameworks/hydrogen-caching/app/components/SearchResultsPredictive.tsx b/examples/frameworks/hydrogen-caching/app/components/SearchResultsPredictive.tsx new file mode 100644 index 0000000..4e6b014 --- /dev/null +++ b/examples/frameworks/hydrogen-caching/app/components/SearchResultsPredictive.tsx @@ -0,0 +1,322 @@ +import {Link, useFetcher, type Fetcher} from '@remix-run/react'; +import {Image, Money} from '@shopify/hydrogen'; +import React, {useRef, useEffect} from 'react'; +import { + getEmptyPredictiveSearchResult, + urlWithTrackingParams, + type PredictiveSearchReturn, +} from '~/lib/search'; +import {useAside} from './Aside'; + +type PredictiveSearchItems = PredictiveSearchReturn['result']['items']; + +type UsePredictiveSearchReturn = { + term: React.MutableRefObject{product.title}
+ + {product?.variants?.nodes?.[0].price && ( +
+ No results found for {term.current}
+
You have no addresses saved.
+ ) : ( +Placed on {new Date(order.processedAt!).toDateString()}
+| Product | +Price | +Quantity | +Total | +
|---|---|---|---|
|
+ Discounts + |
+
+ Discounts + |
+
+ {discountPercentage ? (
+ -{discountPercentage}% OFF
+ ) : (
+ discountValue && |
+ |
|
+ Subtotal + |
+
+ Subtotal + |
+
+ |
+ |
| + Tax + | +
+ Tax + |
+
+ |
+ |
| + Total + | +
+ Total + |
+
+ |
+
{order.shippingAddress.name}
+ {order.shippingAddress.formatted ? ( +{order.shippingAddress.formatted}
+ ) : ( + '' + )} + {order.shippingAddress.formattedArea ? ( +{order.shippingAddress.formattedArea}
+ ) : ( + '' + )} + + ) : ( +No shipping address defined
+ )} +{fulfillmentStatus}
+{lineItem.title}
+ {lineItem.variantTitle} +You haven't placed any orders yet.
++ Start Shopping → +
+{collection.description}
++ Description +
+{error}
} + {!term || !result?.total ? ( +