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:
169
frontend/.gitignore
vendored
Normal file
169
frontend/.gitignore
vendored
Normal 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
15
frontend/README.md
Normal 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
BIN
frontend/bun.lockb
Executable file
Binary file not shown.
5
frontend/globals.d.ts
vendored
Normal file
5
frontend/globals.d.ts
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
import { Application } from "@hotwired/stimulus";
|
||||
|
||||
declare global {
|
||||
var Stimulus: Application;
|
||||
}
|
||||
6
frontend/index.ts
Normal file
6
frontend/index.ts
Normal 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);
|
||||
24
frontend/local_time_controller.ts
Normal file
24
frontend/local_time_controller.ts
Normal 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
14
frontend/package.json
Normal 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
22
frontend/tsconfig.json
Normal 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
|
||||
]
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user