fix(dash): fix regex for short code input (#6)

- update readme installation instructions
- add security headers

.github/CONTRIBUTING.md

@@ -1,7 +1,5 @@
 # Contributing
 
-# Contributing
-
 ## Standards
 
 All code in this repository must pass [prettier](https://prettier.io/) linting and [ts-standard](https://github.com/standard/ts-standard). These standards are enforced by [`npm test`](#run-unit-tests), which in turn is a required pre-commit hook.
@@ -14,13 +12,14 @@ Commit messages must follow the [Conventional Commits v1.0.0](https://www.conven
 
 ## Repository Layout
 
-| Folder | Contents |
-| --------- | --------------------------- |
-| / (root) | Project metadata files |
-| /.github/ | GitHub metadata files |
-| /.vscode/ | Visual Studio Code settings |
-| /src/ | Source code |
-| /tests/ | Unit and integration tests |
+| Folder | Contents |
+| ---------- | --------------------------- |
+| / (root) | Project metadata files |
+| /.github/ | GitHub metadata files |
+| /.vscode/ | Visual Studio Code settings |
+| /function/ | Cloudflare Pages Functions |
+| /src/ | Source code |
+| /tests/ | Unit and integration tests |
 
 ## Style Guide
 
@@ -51,15 +50,15 @@ npm test
 To build the application, run:
 
 ```ShellSession
-npm run build
+DOMAIN=localhost npm run build
 ```
 
 ## Watch
 
 To automaticaly build the site when source files change (useful during development), run:
 
 ```ShellSession
-npm run watch
+DOMAIN=localhost npm run watch
 ```
 
 The session can be ended by pressing `CTRL+C`.

README.md

@@ -16,6 +16,8 @@ Basic URL Shortener for Cloudflare Pages
 
 The simplest of URL shorteners. No analytics. No complex installation.
 
+Built on Cloudflare's blazing fast global network.
+
 ### Features
 
 - Extremely light-weight (public site is <4KB)
@@ -32,37 +34,16 @@ For screenshots of the dashboard, [check out the Wiki](https://github.com/aensle
 
 ### Tech Stack
 
-- Server-side processing: Cloudflare Pages Functions
-- Configuration: Cloudflare Pages Environment Variables
-- Data storage: Cloudflare KV and D1
+- Server-side processing: Cloudflare Pages [Functions](https://developers.cloudflare.com/pages/platform/functions/)
+- Configuration: Cloudflare Pages [Environment Variables](https://developers.cloudflare.com/pages/platform/build-configuration/#environment-variables)
+- Data storage: Cloudflare [KV](https://developers.cloudflare.com/workers/runtime-apis/kv/) and [D1](https://developers.cloudflare.com/d1)
+- Authentication: Cloudflare [Access](https://developers.cloudflare.com/cloudflare-one/policies/access/)
 - Build System: Node.js
 
-## Pre-requisites
-
-- A domain for your short URLs, e.g. `example.com`
-- A Cloudflare account
-- Node.js
-
 ## Installation
 
-TBA
-
-### Authentication
-
-TBA
-
-## Configuration
-
-Configuration is performed through Cloudflare Pages' Environment variables.
-
-### Settings
-
-| Environment Variable | Required | Default | Description |
-| -------------------- | -------- | ------- | ------------------------------------------------------------------------------------- |
-| `DOMAIN` | **YES** | | The domain for your URL shortener. This will be used as the base for your short URLs. |
-| `SHORT_CODE_LENGTH` | No | 4 | The length to use for automatically generated short-codes. |
-| `LINK_TO_DASH` | No | false | Set to true to show a link to your dashboard on the public home page. |
+For installation and configuration instructions, please refer to the [Wiki](https://github.com/aensley/bus/wiki/Installation).
 
-## Application Data
+## Development
 
-Shortened URLs are stored in Cloudflare's D1 and KV storage systems.
+If you would like to customize the code or contribute to the project, please refer to the [Contributing guide](.github/CONTRIBUTING.md).

gulpfile.js

@@ -26,14 +26,14 @@ const paths = {
  src: 'src/assets/img/*',
  dest: 'dist/assets/img/'
  },
+ cloudflareMeta: {
+ src: 'src/_*',
+ dest: 'dist/'
+ },
  js: {
  src: 'src/assets/js/app.js',
  dest: 'dist/assets/js/'
  },
- json: {
- src: 'src/*.json',
- dest: 'dist/'
- },
  scss: {
  src: 'src/assets/scss/*.scss',
  dest: 'dist/assets/css/'
@@ -141,9 +141,9 @@ async function scss() {
  .pipe(gulp.dest(paths.scss.dest))
 }
 
-// Move JSON
-async function json() {
- return gulp.src(paths.json.src).pipe(gulp.dest(paths.json.dest))
+// Copy Cloudflare Pages Meta Info
+async function cloudflareMeta(cb) {
+ return gulp.src(paths.cloudflareMeta.src).pipe(gulp.dest(paths.cloudflareMeta.dest))
 }
 
 // Compress images
@@ -163,6 +163,6 @@ function watchSrc() {
  gulp.watch(paths.js.src, js)
 }
 
-export default gulp.series(getPackageInfo, js, img, scss, json, html)
+export default gulp.series(getPackageInfo, cloudflareMeta, js, img, scss, html)
 
 export const watch = gulp.series(getPackageInfo, watchSrc)

src/_headers

@@ -0,0 +1,9 @@
+/*
+ X-Content-Type-Options: nosniff
+ X-Frame-Options: DENY
+ X-XSS-Protection: 1; mode=block
+ Referrer-Policy: no-referrer
+ Content-Security-Policy: default-src 'none'; base-uri 'none'; connect-src 'self' https://cloudflareinsights.com; font-src 'self'; form-action 'self'; frame-ancestors 'none'; img-src 'self' data:; manifest-src 'self'; script-src 'self' https://static.cloudflareinsights.com; style-src 'self' 'unsafe-inline';
+ Permissions-Policy: accelerometer=(), autoplay=(), camera=(), cross-origin-isolated=(), display-capture=(), encrypted-media=(), fullscreen=(), geolocation=(), gyroscope=(), keyboard-map=(), magnetometer=(), microphone=(), midi=(), payment=(), picture-in-picture=(), publickey-credentials-get=(), screen-wake-lock=(), sync-xhr=(), usb=(), web-share=(), xr-spatial-tracking=(), clipboard-read=(), clipboard-write=(), hid=()
+https://:project.pages.dev/*
+ X-Robots-Tag: noindex

src/assets/scss/_dash-customizations.scss

@@ -60,3 +60,15 @@ a:hover {
 #copiedUrl {
  text-decoration: underline;
 }
+
+#list {
+ width: 100%;
+}
+
+input:valid {
+ border-color: $green;
+}
+
+input:invalid {
+ border-color: $red;
+}

src/assets/scss/_variables-common.scss

@@ -12,8 +12,6 @@ $gray-800: #303030;
 $gray-900: #222;
 $black: #000;
 
-// See /.github/CONTRIBUTING.md for full Color Palette
-
 $blue: #083d77;
 $indigo: #320e3b;
 $purple: #8d6b94;

src/dash.html

@@ -42,7 +42,7 @@
  id="short"
  name="short"
  class="form-control form-control-lg text-center"
- pattern="[a-zA-Z0-9-]+"
+ pattern="[a-zA-Z0-9\-]+"
  aria-describedby="shortCodeHelp"
  placeholder="Enter your custom short-code" />
  <div id="shortCodeHelp" class="form-text-lg">
@@ -62,7 +62,7 @@
  </div>
  <div class="row">
  <div class="col">
- <table class="table table-striped table-hover" id="list" style="width: 100%">
+ <table class="table table-striped table-hover" id="list">
  <thead>
  <tr>
  <th>Short</th>