diff --git a/assets/events.ts b/assets/events.ts index 530a4ea3397517611b11605eec4a7bb76c737f33..a8f71e9b502358472dd8af68b551510a5839927a 100644 --- a/assets/events.ts +++ b/assets/events.ts @@ -126,8 +126,9 @@ export function tabs() { addEventListener("load", () => { for (let i = 0; i < wrappers.length; i++) { const labels = wrappers[i].querySelectorAll(".tab-label"); + console.log("labels", labels) const tabs = wrappers[i].querySelectorAll(".tab"); - + console.log("tabs", tabs) if (tabs.length > 0) { // Set the first tab in a group to display (tabs[0] as HTMLElement).style.display = "block"; diff --git a/content/pages/tutorials/forms/index.md b/content/pages/tutorials/forms/index.md index 5beb9e04abd833c28a971f89173f016ca407a78e..7b5ab3d5f84b6a29b3c2dcd78b5e3a101e52a8d1 100644 --- a/content/pages/tutorials/forms/index.md +++ b/content/pages/tutorials/forms/index.md @@ -19,6 +19,146 @@ This tutorial will briefly touch upon the basics of HTML forms. For a more in-de This tutorial will make heavy use of Cloudflare Pages and [its Workers integration](/pages/platform/functions/). Refer to the [Get started guide](/pages/get-started/) guide to familiarize yourself with the platform. +{{<tabs labels="js/sw | js/esm | ts/sw | ts/esm">}} +{{<tab label="js/sw" default="true">}} + +```js +async function handler(request) { + const base = 'https://example.com'; + const statusCode = 301; + + const destination = new URL(request.url, base); + return Response.redirect(destination.toString(), statusCode); +} + +// Initialize Worker +addEventListener('fetch', event => { + event.respondWith(handler(event.request)); +}); +``` + +{{</tab>}} +{{<tab label="js/esm">}} + +```js +async function handler(request) { + const base = "https://example.com"; + const statusCode = 301; + + const destination = new URL(request.url, base); + return Response.redirect(destination.toString(), statusCode); +} + +// Initialize Worker +addEventListener("fetch", (event) => { + event.respondWith(handler(event.request)); +}); +``` + +{{</tab>}} +{{<tab label="ts/sw">}} + +```js +async function handler(request) { + const base = "https://obinnas.com"; + const statusCode = 301; + + const destination = new URL(request.url, base); + return Response.redirect(destination.toString(), statusCode); +} + +// Initialize Worker +addEventListener("fetch", (event) => { + event.respondWith(handler(event.request)); +}); +``` + +{{</tab>}} +{{<tab label="ts/esm">}} + +```js +import meaning from "meaning-of-life"; + +export default { + async fetch(request: Request): Promise<Response> { + return new Response(meaning); + }, +}; +``` + +{{</tab>}} +{{</tabs>}} + +{{<tabs labels="js/sw | js/esm | ts/sw | ts/esm">}} +{{<tab label="js/sw" default="true">}} + +```js +async function handler(request) { + const base = 'https://example.com'; + const statusCode = 301; + + const destination = new URL(request.url, base); + return Response.redirect(destination.toString(), statusCode); +} + +// Initialize Worker +addEventListener('fetch', event => { + event.respondWith(handler(event.request)); +}); +``` + +{{</tab>}} +{{<tab label="js/esm">}} + +```js +async function handler(request) { + const base = "https://example.com"; + const statusCode = 301; + + const destination = new URL(request.url, base); + return Response.redirect(destination.toString(), statusCode); +} + +// Initialize Worker +addEventListener("fetch", (event) => { + event.respondWith(handler(event.request)); +}); +``` + +{{</tab>}} +{{<tab label="ts/sw">}} + +```js +async function handler(request) { + const base = "https://obinnas.com"; + const statusCode = 301; + + const destination = new URL(request.url, base); + return Response.redirect(destination.toString(), statusCode); +} + +// Initialize Worker +addEventListener("fetch", (event) => { + event.respondWith(handler(event.request)); +}); +``` + +{{</tab>}} +{{<tab label="ts/esm">}} + +```js +import meaning from "meaning-of-life"; + +export default { + async fetch(request: Request): Promise<Response> { + return new Response(meaning); + }, +}; +``` + +{{</tab>}} +{{</tabs>}} + ## Overview On the web, forms are a common point of interaction between the user and the web document. They allow a user to enter data and, generally, submit their data to a server. A form is comprised of at least one form input, which can vary from text fields to dropdowns to checkboxes and more. @@ -98,6 +238,7 @@ The source code for this example is [available on GitHub](https://github.com/clo {{</Aside>}} + ### Setup To begin, create a [new GitHub repository](https://repo.new/). Then create a new local directory on your machine, initialize git, and attach the GitHub location as a remote destination: diff --git a/layouts/shortcodes/tabs.html b/layouts/shortcodes/tabs.html index dfdc0993393ea8ad74d69cd499e4d663090be1a9..ad842fca899c6498847177b210d036406adce52c 100644 --- a/layouts/shortcodes/tabs.html +++ b/layouts/shortcodes/tabs.html @@ -4,7 +4,7 @@ <nav role="navigation" class="tabs"> <ul id="tab-active"> {{ range $idx, $txt := $labels }} {{- $link := replace $txt "/" "-"}} - <li class="tab-label-wrapper " > + <li class="tab-label-wrapper " data-id="{{$idx}}" > {{ if or (eq $link "js-sw") }} <a class="tab-label active" href="#" data-link="tab-{{$link}}"> <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em"