# @arena-im/arena-cf-worker

> A Arena Cloudflare Worker to insert SEO JSON-LD into pages for arena events

Latest version **0.0.7** (published 2020-03-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install @arena-im/arena-cf-worker
pnpm add @arena-im/arena-cf-worker
yarn add @arena-im/arena-cf-worker
bun add @arena-im/arena-cf-worker
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2020-03-23 |
| First published | 2020-03-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Cesar William Alvarenga |
| Maintainers | cesar_arena, stationfynpm |
| Keywords | arena, cloudflare, worker, workers |

## Links

- npm: https://www.npmjs.com/package/@arena-im/arena-cf-worker
- npm.io page: https://npm.io/package/@arena-im/arena-cf-worker

## Alternatives

- [cron](https://npm.io/package/cron.md) — 4.9M weekly downloads
- [@vercel/queue](https://npm.io/package/@vercel/queue.md) — 731.6K weekly downloads
- [create-sonicjs](https://npm.io/package/create-sonicjs.md) — 1.6K weekly downloads
- [@exellix/jobs-api](https://npm.io/package/@exellix/jobs-api.md) — 941 weekly downloads
- [@forwardimpact/libskill](https://npm.io/package/@forwardimpact/libskill.md) — 575 weekly downloads

## Recent versions

- 0.0.7 (latest) — 2020-03-23
- 0.0.6 — 2020-03-23

## README

# Arena Cloudflare Worker

## What's a Worker

A Cloudflare Worker is a piece of JavaScript code that runs every time you access a specific route on a website proxied by Cloudflare. The code is executed every request *before* they reach Cloudflare's cache. This means Worker responses are no cached (although requests made by the worker to other web services might be cached with the appropriate caching headers).

## Arena Cloudflare Worker

The Arena Cloudflare Worker can be used to improve your SEO based on the events that you have using the Arena.im events. To start using this worker first you have to have a Cloudflare account and associate with your domain and an Arena.im account.

There are two ways to create a worker on Cloudflare Workers, the first one is using the Wrangler CLI (recommended), and another one is creating the Worker using the Cloudflare dashboard.

## Create Worker using Wrangler CLI (recommended)

Manually create/modifying Worker's code could get complicated, especially since we might want to automate all steps to deploy a Web application.

To automate that use the Wrangler Cloudflare Worker's CLI tool. https://developers.cloudflare.com/workers/tooling/wrangler/

### Install Wrangler with npm

You can install wrangler using NPM:

```bash
$ npm i @cloudflare/wrangler -g
```

### Configuration

Configure your global Cloudflare user. This is an interactive command that will prompt you for your API token:

```bash
$ wrangler config
```

You can create an API token going to the main Account dashboard and click on "Get your API token".

After that, you can generate a Worker.

### Generate a Worker

You can generate a new Worker with the default template running this command:

```bash
$ wrangler generate arena-worker
```

### Install Arena Cloudflare Worker

Enter in the `arena-worker` a then install the Arena Cloudflare Worker:

```bash
$ cd arena-worker
$ npm install --save @arena-im/arena-cf-worker
```

### Set your Account ID and type

To publish your `arena-worker` you need to set your Account ID. You can find your Account ID on the main Account dashboard under `API > Account ID`.

With your Account ID, you can open the file `arena-worker/wrangler.toml` and put your id on `account_id`.

Now you have to change the `type` from `javascript` to `webpack`.

### Edit your Worker

Open the file `arena-worker/index.js`remove all lines and put the following code snippet:

```javascript
import ArenaHandleRequest from '@arena-im/arena-cf-worker'

addEventListener('fetch', event => {
  event.respondWith(ArenaHandleRequest(event.request))
})
```

### Publish

Publish the Arena Worker to Cloudflare.

```bash
$ wrangler publish
```

### Add route

Once published we can make the routing to run this worker on your domain, perhaps even on a single route path. For this, we need to go to the main Account dashboard and select the Workers tab.

![workers_tab](https://user-images.githubusercontent.com/248140/77326885-392b0a80-6cf9-11ea-8d99-93ad3f2e88f4.png)

Add a route with your route, for example `https://yourdomain/posts/*` and select your recently deployed `arena-worker` Worker.

![add_route](https://user-images.githubusercontent.com/248140/77333011-93c86480-6d01-11ea-9436-af255f48c2ce.png)

Now we can access directly that URL: for example https://yourdomain/posts/hello and check that the SEO is working on this page.

## Create Worker using the Cloudflare dashboard

### Create a Worker

Then we can create a worker on the worker tab. Click on the Workers tab then on "Manage Workers". On the Workers' panel click on "Create a Worker".

![workers_tab](https://user-images.githubusercontent.com/248140/77326885-392b0a80-6cf9-11ea-8d99-93ad3f2e88f4.png)

![create_worker](https://user-images.githubusercontent.com/248140/77334729-f4f13780-6d03-11ea-8c25-6b30dc76a23c.png)

### Edit the worker

In the Workers Panel create a new Worker, change the name (I used `arena-worker`) and remove all code in the Script tab and insert the code snippet below and then click on "Save and Deploy".

```javascript
var ARENA_CF_WORKER_VERSION="0.0.1";!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var i in n)("object"==typeof exports?exports:e)[i]=n[i]}}(this,function(){const e={};function t(t){if(!e[t])return null;return new Date>e[t].expires?null:e[t].value}const n=(new HTMLRewriter).on("div",new class{element(e){e.hasAttribute("data-event")&&e.hasAttribute("data-publisher")&&t(`${e.getAttribute("data-publisher")}-${e.getAttribute("data-event")}`)&&e.after(t(`${e.getAttribute("data-publisher")}-${e.getAttribute("data-event")}`),{html:!0})}});async function i(i){const r=await fetch(i);try{const n=r.clone(),i=await n.text();await async function(n){const i=function(e){const t=function(e){const t=[];let n=0;for(;n<e.length;){let i=e.indexOf('<div id="arena-live"',n);if(-1===i&&(i=e.indexOf('<div class="arena-liveblog"',n)),-1===i)break;const r=e.indexOf("</div>",i+1),a=e.substring(i,r+6);t.push(a),n=r+7}return t}(e),n=[];return t.forEach(e=>{const t=function(e){let t=e.indexOf("data-publisher=");if(-1===t)return null;const n=e.indexOf('"',t+16);return e.substring(t+16,n)}(e);if(!t)return;const i=function(e){let t=e.indexOf("data-event=");if(-1===t)return null;const n=e.indexOf('"',t+12);return e.substring(t+12,n)}(e);i&&n.push({publisherSlug:t,eventSlug:i})}),n}(n);for await(let n of i){if(t(`${n.publisherSlug}-${n.eventSlug}`))continue;const i=await fetch(`https://cached-api.arena.im/v1/liveblog/${n.publisherSlug}/${n.eventSlug}/ldjson`),u=await i.text();r=`${n.publisherSlug}-${n.eventSlug}`,a=u,e[r]={expires:new Date((new Date).getTime()+864e5),value:a}}var r,a}(i)}catch(e){console.error("Cannot generate SEO schema tags")}return n.transform(r)}return"undefined"!=typeof globalThis&&(globalThis.ArenaHandleRequest=i),i});

addEventListener('fetch', event => {
  event.respondWith(ArenaHandleRequest(event.request))
})
```

![editor](https://user-images.githubusercontent.com/248140/77335642-2e767280-6d05-11ea-8c20-c9081cebffb2.png)

### Add route

Once deployed we can make the routing to run this worker on your domain, perhaps even on a single route path. For this, we need to go to the main Account dashboard and select the Workers tab.

![workers_tab](https://user-images.githubusercontent.com/248140/77326885-392b0a80-6cf9-11ea-8d99-93ad3f2e88f4.png)

Add a route with your route, for example `https://yourdomain/posts/*` and select your recently deployed `arena-worker` Worker.

![add_route](https://user-images.githubusercontent.com/248140/77333011-93c86480-6d01-11ea-9436-af255f48c2ce.png)

Now you can access directly that URL: for example https://yourdomain/posts/hello and check that the SEO is working on this page.

---
_Source: https://npm.io/package/@arena-im/arena-cf-worker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._