Memories of Robert Miller
A memorial website for my Grandpa.
Technical Design
The site displays content from a google spreadsheet, collected by google forms. It uses Tabletop.js to interface with the google sheets api.
Here's the real-time version:
google forms -> google sheet -> this site
This is slow though, because users have to load the site, then wait for an api call to google sheets to get the content.
It'd be faster if we just pre-constructed the content as though it were a static site. Write time, instead of read time.
Here's that design:
google forms ---> google sheet
\-> remote lambda call -> load dynamic.html -> loads from google sheet -> save rendered html
Later, when a user loads index.html
, it's just a static site with blazing load times.
To regenerate the content, we can hit the rpc endpoint at any time. I'm trusting the google forms' post-submit hook to be called after the spreadsheet is updated, but need to verify this.
What we end up with is:
- https://bob.miller.rocks/index-dynamic.html -- the "live", async fetching dynamic website
- https://bob.miller.rocks/index.html -- the statically generated site
Developing
To deploy the code:
- edit
index-dynamic.html
- push to github, verify it has deployed to http://bob.miller.rocks/index-dynamic.html
To regenerate the static version of index.html
:
- Visit https://us-central1-side-projects-248720.cloudfunctions.net/updateStaticHtml?url=https://bob.miller.rocks/index-dynamic.html
- Test that it appears updated at http://bob.miller.rocks
Deploying
The site:
- Github Pages owns the deployment: simple.gy/bob-miller-rocks.
- Google Form (careful about changing the question titles, that impacts the column names in the output data)
- Google Sheet
The script:
- Open Google cloud function
- paste contents of
package.json
into the matching tab - paste contents of
addFileToGit.js
into the index.js tab - paste contents of
getHtmlFor.js
into the index.js tab under the other content - Replace the
const { auth } = require('./_secrets');
line with a string const generated by the github ui - Rm
const {addFileToGit} = require('./addFileToGit');
, since we manually c+p in that dependency
Then you should be able to run the function at:
When it succeeds it says "successfully processed n chars of html" and you'll see a new git commit in this repo.
Scripts
One time install:
cd scripts && npm install
To test adding a file to Git:
node -e 'require("./scripts/addFileToGit").addFileToGit("foo.txt", "bar")'
Test pulling html from a site:
node -e 'require("./scripts/getHtmlFor").debug("https://bob.miller.rocks/index-dynamic.html")'
TODO
- mobile reading
- favicon
- static rendering