General Assignment

What is it?

In this exercise, you'll deploy a Cloudflare Workers project in order to build a linktree-style website. Below is a list of requirements and success criteria for your finished project.

Requirements

Deploy a JSON API

Create a new Workers project using Wrangler. This project will respond to two kinds of requests, one to generate a JSON API (defined below), and second, to serve an HTML page (see "Set up an HTML page")

To begin, you should define an array of links. The links should be a JavaScript array, with a number of link objects, each with a name and URL string. See the below example for one of these link objects:

{ "name": "Link Name", "url": "https://linkurl" }

You should define at least three link objects inside of your array.

Once you've defined this array, set up a request handler to respond to the path

/links

In addition, you should ensure that the API response has the correct

Content-Type

You should be able to test that this works as expect by running

wrangler dev

localhost:8000/links

Set up an HTML page

With your API deployed, you can flesh out the rest of your application. If the path requested is not

/links

1. Retrieve a static HTML page
2. Get the links from your previously deployed JSON response
3. Use HTMLRewriter to add these links to the static HTML page
4. Return the transformed HTML page from the Worker

Retrieve a static HTML page

Your Worker should begin by making a

fetch

https://static-links-page.signalnerve.workers.dev

The response from this URL will be a static HTML page that you can enhance using HTMLRewriter.

Note that you need to make the request to this HTML page in your Worker. The URL will return multiple static HTML pages randomly, so you should not copy-paste the HTML into your Worker, as you will not complete the exercise correctly.

Use HTMLRewriter to update the page

Using HTMLRewriter, you should transform the static HTML response from $URL, and pass in the links array you previously defined into the page. Note that this means that your links array should be available as a variable for both your previous

/links

div#links

a

In order to use the links inside of your HTMLRewriter handler, you can use a custom class to pass in arguments, for instance:

class LinksTransformer {
  constructor(links) {
    this.links = links
  }

  async element(element) {
    // Your code
  }
}

Here's what the output of the

div#links

  A sample URL
  Another sample URL
  A final sample URL

You should also remove the

display: none

div#profile

To do this, target

img#avatar

src

Do the same for

h1#name

Return the transformed HTML page from the Worker

Once you've passed the static HTML response through your HTMLRewriter instance, you can return it as the response from the Worker.

Ensure that the correct

Content-type

Once you've completed the code for this project, you can deploy it using

wrangler publish

Add a link to your deployed worker to your repo

Create a URL.txt that contains one line in it with the URL of your page. For example if my assignment was deployed at https://myassignment.mydomain.com/ I would put the following in URL.txt:

https://myassignment.mydomain.com/

We will test your code by visiting the URL in that file and the /links endpoint as well. In the above example we would test https://myassignment.mydomain.com/ and https://myassignment.mydomain.com/links .

Extra Credit

1. Provide social links

Remove the

display: none

div#social

a

svg

1. Update the title field

Using the HTMLRewriter, target the

title

1. Change the background color:

Using HTMLRewriter, target the

body

bg-gray-900

background-color

1. Do the Systems Assignment that depends on the work you've done here.