Add frontend JS and improve post styling

Frontend is built with Bun. It uses Stimulus to progressively enhance
the server-built HTML. Currently, it only replaces UTC timestamps from
the server with the time in the browser's timezone.
This commit is contained in:
2023-06-27 14:03:52 -04:00
parent 7e06d23bba
commit 76cc87631f
15 changed files with 331 additions and 4 deletions

169
frontend/.gitignore vendored Normal file
View File

@@ -0,0 +1,169 @@
# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
# Logs
logs
_.log
npm-debug.log_
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
# Runtime data
pids
_.pid
_.seed
\*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
\*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
# TypeScript cache
\*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional stylelint cache
.stylelintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
\*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local
# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache
# Next.js build output
.next
out
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# vuepress v2.x temp and cache directory
.temp
.cache
# Docusaurus cache and generated files
.docusaurus
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.\*

15
frontend/README.md Normal file
View File

@@ -0,0 +1,15 @@
# crawlnicle-frontend
To install dependencies:
```bash
bun install
```
To run:
```bash
bun run hello_controller.ts
```
This project was created using `bun init` in bun v0.6.9. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.

BIN
frontend/bun.lockb Executable file

Binary file not shown.

5
frontend/globals.d.ts vendored Normal file
View File

@@ -0,0 +1,5 @@
import { Application } from "@hotwired/stimulus";
declare global {
var Stimulus: Application;
}

6
frontend/index.ts Normal file
View File

@@ -0,0 +1,6 @@
import { Application } from "@hotwired/stimulus";
import LocalTimeController from "./local_time_controller";
window.Stimulus = Application.start();
window.Stimulus.register("local-time", LocalTimeController);

View File

@@ -0,0 +1,24 @@
import { Controller } from "@hotwired/stimulus";
// Replaces all UTC timestamps with time formated for the local timezone
export default class extends Controller {
connect() {
this.renderLocalTime();
}
renderLocalTime() {
this.element.textContent = this.localTimeString;
}
get localTimeString(): string {
if (this.utcTime) {
return this.utcTime.toLocaleDateString();
}
return "Unknown datetime"
}
get utcTime(): Date | null {
const utcString = this.element.getAttribute("datetime");
return utcString ? new Date(utcString) : null;
}
}

14
frontend/package.json Normal file
View File

@@ -0,0 +1,14 @@
{
"dependencies": {
"@hotwired/stimulus": "^3.2.1"
},
"name": "crawlnicle-frontend",
"module": "hello_controller.ts",
"type": "module",
"devDependencies": {
"bun-types": "^0.6.0"
},
"peerDependencies": {
"typescript": "^5.0.0"
}
}

22
frontend/tsconfig.json Normal file
View File

@@ -0,0 +1,22 @@
{
"compilerOptions": {
"lib": ["ESNext", "dom"],
"module": "esnext",
"target": "esnext",
"moduleResolution": "node",
"moduleDetection": "force",
"allowImportingTsExtensions": true,
"strict": true,
"downlevelIteration": true,
"skipLibCheck": true,
"jsx": "preserve",
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"allowJs": true,
"noEmit": true,
"types": [
// disabled because of https://github.com/oven-sh/bun/issues/3030
// "bun-types" // add Bun global
]
}
}