Scratch space for learning atproto app development

tidy, css reset, add simple readme

Changed files
+58 -4
src
+2 -2
.env.template
···
NODE_ENV="development" # Options: 'development', 'production'
PORT="8080" # The port your server will listen on
HOST="localhost" # Hostname for the server
-
PUBLIC_URL=""
+
PUBLIC_URL="" # Set when deployed publicly, e.g. "https://mysite.com". Informs OAuth client id.
# CORS Settings
CORS_ORIGIN="http://localhost:*" # Allowed CORS origin, adjust as necessary
···
COMMON_RATE_LIMIT_MAX_REQUESTS="20" # Max number of requests per window per IP
# Secrets
-
# Must this in production. May be generated with `openssl rand -base64 33`
+
# Must set this in production. May be generated with `openssl rand -base64 33`
# COOKIE_SECRET=""
+15
README.md
···
+
# AT Protocol Express App
+
+
A demo application covering:
+
- public firehose ingestion
+
- identity and login with OAuth
+
- writing to the network
+
+
## Getting Started
+
### Development
+
```sh
+
pnpm i
+
cp .env.template .env
+
pnpm run dev
+
# Navigate to http://localhost:8080
+
```
+1 -1
src/pages/home.ts
···
}
function content({ posts, profile }: Props) {
-
return html`<div>
+
return html`<div id="root">
<h1>Welcome to the Atmosphere</h1>
${
profile
+1 -1
src/pages/login.ts
···
}
function content({ error }: Props) {
-
return html`<div>
+
return html`<div id="root">
<form action="/login" method="post">
<input type="text" name="handle" placeholder="handle" required />
<button type="submit">Log in.</button>
+1
src/pages/shell.ts
···
return html`<html>
<head>
<title>${title}</title>
+
<link rel="stylesheet" href="/public/styles.css">
</head>
<body>
${content}
+35
src/public/styles.css
···
+
body {
+
font-family: Arial, Helvetica, sans-serif;
+
}
+
+
#root {
+
padding: 20px;
+
}
+
+
/*
+
Josh's Custom CSS Reset
+
https://www.joshwcomeau.com/css/custom-css-reset/
+
*/
+
*, *::before, *::after {
+
box-sizing: border-box;
+
}
+
* {
+
margin: 0;
+
}
+
body {
+
line-height: 1.5;
+
-webkit-font-smoothing: antialiased;
+
}
+
img, picture, video, canvas, svg {
+
display: block;
+
max-width: 100%;
+
}
+
input, button, textarea, select {
+
font: inherit;
+
}
+
p, h1, h2, h3, h4, h5, h6 {
+
overflow-wrap: break-word;
+
}
+
#root, #__next {
+
isolation: isolate;
+
}
+3
src/routes/index.ts
···
+
import path from 'node:path'
import { OAuthResolverError } from '@atproto/oauth-client-node'
import { isValidHandle } from '@atproto/syntax'
import express from 'express'
···
export const createRouter = (ctx: AppContext) => {
const router = express.Router()
+
+
router.use('/public', express.static(path.join(__dirname, '..', 'public')))
router.get(
'/client-metadata.json',