Skip to content

Commit c706310

Browse files
netlify-botnetlify-bot
committed
Starting a new Journey on Netlify 🌈
0 parents  commit c706310

File tree

103 files changed

+5502
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

103 files changed

+5502
-0
lines changed

‎.gitignore

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Local Netlify folder
2+
.netlify
3+
4+
node_modules
5+
6+
*/.DS_Store
7+
8+
.vscode

‎README.md

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
![Netlify examples](https://github.com/netlify/edge-functions-examples/assets/7912948/d34a626d-1c65-492d-bb14-85f50d9b72cb)
2+
3+
4+
# [Netlify Edge Functions](https://www.netlify.com/products/?utm_campaign=devex&utm_source=edge-functions-examples&utm_medium=github&utm_content=Edge%20Functions%20Product%20Page#netlify-edge-functions) Examples
5+
6+
Explore these examples here: https://edge-functions-examples.netlify.app/
7+
8+
## Responses
9+
10+
- [Hello, world](pages/hello)
11+
- [Return JSON](pages/json)
12+
- [Return an image](pages/image)
13+
14+
## Rewrites and proxies
15+
16+
- [Rewrite responses from another URL](pages/rewrite)
17+
- [Proxy requests to another source](pages/proxy-requests)
18+
19+
## HTTP Headers
20+
21+
- [Set custom HTTP request headers](pages/set-request-header)
22+
- [Set custom HTTP response headers](pages/set-response-header)
23+
24+
## Transforming responses
25+
26+
- [HTML transformation](pages/htmlrewriter)
27+
- [Text transformation](pages/transform)
28+
- [Content includes](pages/include)
29+
30+
## Geolocation
31+
32+
- [Determine a user's location](pages/geolocation)
33+
- [Block content according to country](pages/country-block)
34+
- [Serve localized content](pages/localized-content)
35+
36+
## Cookies
37+
38+
- [Set cookies](pages/cookies-set)
39+
- [Read cookies](pages/cookies-read)
40+
- [Delete cookies](pages/cookies-delete)
41+
- [Set up an A/B test using cookies](pages/abtest)
42+
43+
## Streams
44+
- [Long-running edge functions](pages/long-running)
45+
- [Server-sent events](pages/server-sent-events)
46+
47+
## WebAssembly
48+
- [Edge WebAssembly](pages/wasm)
49+
50+
## Environment and debugging
51+
52+
- [Write to the logs](pages/log)
53+
- [Use environment variables](pages/environment)
54+
55+
---
56+
57+
## Deploy this site to Netlify
58+
59+
Click this button to deploy this site automatically to your Netlify account.
60+
61+
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](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)

‎components/deploy-button.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default function deployButton() {
2+
return `
3+
<a href="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"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify"></a>
4+
`;
5+
}
6+

‎components/footer.js

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
export default function footer() {
2+
const date = new Date();
3+
const year = date.getFullYear();
4+
return `
5+
6+
<footer>
7+
<div class="flex-btwn">
8+
<a href="https://www.netlify.com/"><img src="https://example-styles.netlify.app//images/logo-netlify-small-monochrome-lightmode.svg" class="nf-logo" alt="Netlify logo"></a>
9+
<div class="social-icons">
10+
<a href="https://youtube.com/Netlify"><img src="https://example-styles.netlify.app/icons/youtube.svg" alt="YouTube"></a>
11+
<a href="https://github.com/netlify/examples"><img src="https://example-styles.netlify.app/icons/github.svg" alt="GitHub"></a>
12+
<a href="https://x.com/Netlify"><img src="https://example-styles.netlify.app/icons/twitter.svg" alt="X"></a>
13+
<a href="https://linkedin.com/company/Netlify"><img src="https://example-styles.netlify.app/icons/linkedin.svg" alt="LinkedIn"></a>
14+
<a href="https://answers.netlify.com"><img src="https://example-styles.netlify.app/icons/discourse.svg" alt="Netlify Answers"></a>
15+
</div>
16+
</div>
17+
<div class="links-container">
18+
<section>
19+
<h3>Developers</h3>
20+
<ul role="list">
21+
<li><a href="https://developers.netlify.com/">Netlify Developers</a></li>
22+
<li><a href="https://developers.netlify.com/sdk/">Netlify SDK</a></li>
23+
<li><a href="https://developers.netlify.com/cli/">Netlify CLI</a></li>
24+
<li><a href="https://developers.netlify.com/feed/">Activity Feed</a></li>
25+
<li><a href="https://docs.netlify.com">Documentation</a></li>
26+
<li><a href="https://netlify.com/conference/">Compose Conference</a></li>
27+
</ul>
28+
</section>
29+
<section>
30+
<h3>Company</h3>
31+
<ul role="list">
32+
<li><a href="https://netlify.com/blog/">Blog</a></li>
33+
<li><a href="https://netlify.com/about/">About</a></li>
34+
<li><a href="https://netlify.com/careers/">Careers</a></li>
35+
36+
<li><a href="https://netlify.com/press/">Press</a></li>
37+
<li><a href="https://swag.netlify.com/">Netlify Store</a></li>
38+
<li><a href="https://netlify.com/sustainability/">Sustainability</a></li>
39+
</ul>
40+
</section>
41+
<section>
42+
<h3>Contact Us</h3>
43+
<ul role="list">
44+
<li><a id="cta-footer-sales" href="https://netlify.com/enterprise/contact/">Sales</a></li>
45+
<li><a id="cta-footer-support" href="https://netlify.com/support/">Support</a></li>
46+
<li><a id="cta-footer-status" href="https://netlifystatus.com/">Status</a></li>
47+
<li><a id="cta-footer-answers" href="https://answers.netlify.com/">Forums</a></li>
48+
<li><a id="cta-footer-agencyDirectory" href="https://netlify.com/agency-directory/">Hire an Agency</a></li>
49+
</ul>
50+
</section>
51+
</div>
52+
<small>
53+
<ul>
54+
<li><a href="https://netlify.com/trust-center/">Trust Center</a></li>
55+
<li><a href="https://netlify.com/privacy/">Privacy</a></li>
56+
<li><a href="https://netlify.com/security/">Security</a></li>
57+
<li><a href="https://netlify.com/gdpr-ccpa/">GDPR/CCPA</a></li>
58+
<li><a href="mailto:[email protected]?subject=Abuse%20report&body=Please%20include%20the%20site%20URL%20and%20reason%20for%20your%20report%2C%20and%20we%20will%20reply%20promptly.">Abuse</a></li>
59+
</ul>
60+
<div>© 2024 Netlify</div>
61+
</small>
62+
</footer>
63+
`;
64+
}

‎components/geolocation-info.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export default function geolocation({ city, countryCode, countryName, latitude, longitude, timezone }) {
2+
return `
3+
<div class="panel">
4+
<img src="https://flagcdn.com/96x72/${countryCode?.toLowerCase()}.png" style="height:2em;" alt="${countryName}" />
5+
<dl>
6+
<dt>Your country name</dt><dd>${countryName}</dd>
7+
<dt>Your country code</dt><dd>${countryCode}</dd>
8+
<dt>Your city</dt><dd>${city}</dd>
9+
<dt>Your coordinatse</dt><dd>${latitude}, ${longitude}</dd>
10+
<dt>Your timezone</dt><dd>${timezone}</dd>
11+
</dl>
12+
</div>
13+
`;
14+
}

‎components/head.js

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
export default function head({ title, metaDescription, url, openGraphImageName }) {
2+
return `
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
8+
<!-- Meta -->
9+
<title>${title} | Edge Functions on Netlify</title>
10+
<meta name="description" content="${metaDescription}" />
11+
12+
<!-- Fonts -->
13+
<link rel="preload" href="https://example-styles.netlify.app/fonts/PacaembuVar-latin.woff2" as="font" type="font/woff2" crossorigin />
14+
<link rel="preload" href="https://example-styles.netlify.app/fonts/MulishVar-latin.woff2" as="font" type="font/woff2" crossorigin/>
15+
16+
<!-- Netlify demo styles -->
17+
<link rel="stylesheet" href="https://example-styles.netlify.app/styles.css">
18+
19+
20+
<!-- Favicons -->
21+
<meta name="theme-color" content="#ffffff" />
22+
<link rel="icon" href="/favicon.svg" />
23+
<link rel="mask-icon" href="/mask-icon.svg" color="#000000" />
24+
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
25+
<link rel="manifest" href="/manifest.json" />
26+
27+
28+
<!-- Open Graph -->
29+
<meta name="twitter:card" content="summary_large_image" />
30+
<meta name="twitter:site" content="@netlify" />
31+
<meta name="twitter:creator" content="@netlify" />
32+
33+
<meta property="og:url" content="${url}" />
34+
<meta property="og:type" content="website" />
35+
<meta property="og:title" content="${title}" />
36+
<meta property="og:description" content="${metaDescription}" />
37+
<meta property="og:locale" content="en_US" />
38+
39+
<meta property="og:image" content="https://res.cloudinary.com/netlify/image/upload/c_fit,g_west,h_400,co_rgb:FFFFFFFF,l_text:netlify.com:Pacaembu-Bold.ttf_57:Netlify%20Edge%20Functions:%0A${encodeURI(
40+
title,
41+
)},w_1053,x_46/v1619123320/netlify.com/default-og-background-learn-more.png" />
42+
<meta property="og:image:alt" content="A Netlify branded open graph image representing ${title}" />
43+
<meta property="og:image:width" content="1200" />
44+
<meta property="og:image:height" content="630" />
45+
<meta property="og:site_name" content="Edge Functions on Netlify" />
46+
47+
<script src="/lib/highlight.min.js"></script>
48+
<script>hljs.highlightAll();</script>
49+
<!-- Google tag (gtag.js) -->
50+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-X2FMMZSSS9"></script>
51+
<script>
52+
window.dataLayer = window.dataLayer || [];
53+
function gtag(){dataLayer.push(arguments);}
54+
gtag('js', new Date());
55+
gtag('config', 'G-X2FMMZSSS9');
56+
</script>
57+
</head>
58+
`;
59+
}

‎components/header.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
export default function header({ title }) {
2+
return `
3+
<header>
4+
<nav>
5+
<a href="https://www.netlify.com/">
6+
<img src="https://example-styles.netlify.app/images/logo-netlify-small-monochrome-darkmode.svg" alt="Netlify" class="nf-logo">
7+
</a>
8+
<ul>
9+
${title == "Home" ? "" : `<ul><li>${title}</li></ul>`}
10+
<ul><a href="/">Edge Functions Examples</a></li>
11+
</ul>
12+
</nav>
13+
<section>
14+
<h1>Edge Functions on Netlify</h1>
15+
<p>Reference examples for learning about Edge Functions on Netlify.</p>
16+
</section>
17+
</header>
18+
<hr>
19+
`;
20+
}

‎components/layout.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import head from "./head.js";
2+
import header from "./header.js";
3+
import footer from "./footer.js";
4+
import deployButton from "./deploy-button.js";
5+
6+
const explainer = `
7+
<hr>
8+
<section>
9+
<h2>What are Edge Functions?</h2>
10+
<p>Using JavaScript and TypeScript, <a href="https://www.netlify.com/products/?utm_campaign=devex&utm_source=edge-functions-examples&utm_medium=web&utm_content=Edge%20Functions%20Product%20Page#netlify-edge-functions" target="_blank" rel="noopener">Netlify Edge Functions</a> give you the power to modify network requests to localize content, serve relevant ads, authenticate visitors, A/B test content, and much more!
11+
<p>
12+
This all happens at the <strong>Edge</strong> — directly from the worldwide location closest to each user.</p>
13+
</p>
14+
15+
<blockquote>
16+
<p>To use Edge Functions on Netlify, add JavaScript or TypeScript files to a <code>/netlify/edge-functions</code> directory in your project.</p>
17+
<p><a href="https://docs.netlify.com/edge-functions/overview/?utm_campaign=devex&utm_source=edge-functions-examples&utm_medium=web&utm_content=Edge%20Functions%20Docs" target="_blank" rel="noopener">Learn more in the docs</a>.</p>
18+
</blockquote>
19+
</section>
20+
`;
21+
22+
export default function layout(data) {
23+
return `
24+
<!DOCTYPE html>
25+
<html lang="en">
26+
${head({
27+
title: data.title,
28+
metaDescription: data.metaDescription,
29+
url: data.url,
30+
openGraphImageName: data.openGraphImageName,
31+
})}
32+
<body>
33+
${header({ title: data.title })}
34+
<main>
35+
36+
${data.url.pathname !== "/" ? "" : explainer}
37+
38+
<section>
39+
${data.content}
40+
<p>
41+
${
42+
data.url.pathname !== "/" ? `<a href="/" class="btn-primary">Explore more examples</a>` : ""
43+
}
44+
</p>
45+
</section>
46+
47+
${data.url.pathname !== "/" ? explainer : ""}
48+
<hr/>
49+
<section>
50+
<h3>Deploy this site to Netlify</h3>
51+
<p>
52+
Try out Edge Functions on Netlify today! Click the button below to deploy this site with all of its demos to your Netlify account.
53+
</p>
54+
<p>${deployButton()}</p>
55+
</section>
56+
57+
</main>
58+
${footer()}
59+
</body>
60+
</html>
61+
`;
62+
}

‎components/repo-link.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function repoLink(file, customText) {
2+
const text = customText || "The Edge Function code:";
3+
4+
const root = "https://github.com/netlify/examples/tree/main/examples/edge-functions/netlify/edge-functions";
5+
6+
return `${text} <a href="${root}/${file}" target="_BLANK" rel="noopener">${file}</a>`;
7+
}

0 commit comments

Comments
 (0)