Design goals for the frontend template used by tenkbay.com:
- static assets on a server
- internationalization
- good SEO
- automate-able – most NFT projects will not want to edit the actual code; editing text and picking some colors should be enough
- for projects which want more control, template should be straightforward to edit manually
This codebase explores using Next.js, a static-site generator that uses React, to accomplish the above. It demonstrates accomplishing all the goals above, with some caveats:
- Start by looking at
settings.jsonand the JSON files in thei18nfolder. - You'll see that these files are then used by
lib/locales.ts pages/[locale].tsxthen useslib/locales.tsto generate a different landing page for each locale file, so in this case the site ends up with a/enpage and a/espage.pages/index.tsxis mostly empty, just showing a list of languages ("View in English", "Ver en Español"), and automatically redirects to the user's preferred language if it's available.components/layout.tsxshows a language picker in the footer of the page.
Mostly. Some caveats:
-
Not using built-in internationalization: as explained, this approach is using custom internationalization that mostly works because we are planning to have a single landing page for each language. If we were planning to have more complex routing, this might break down.
Next.js does offer Internationalized Routing, but it does not work with
next export, Next's full static-site generation mode
-
Uncustomizable
lang: related to the above, Next.js does not allow customizing<html lang="en">on each page. Seepages/_document.tsx -
Unoptimized images: Like Internationalized Routing, Next's default handling of images relies on at least some server-rendered components rather than being fully statically-generated. This attempts to use
next-optimized-imagesas suggested by the Next.js team, but this is a community-created library and is poorly supported, and we haven't yet been able to get it to work.
When a project wants to launch a new TenK site, they would fill out a form that includes all necessary fields in settings.json (which could include color choices) and at least one locale file, such as i18n/en.json. There could also be optional fields (think: additional home page sections could be generated by including a sections array in i18n/en.json).
When they submit this form, we could make API calls to GitHub to clone this repo, edit the necessary JSON files, update hero.png and other assets, and deploy the website (either to GitHub Pages or some other static-site hosting service such as Netlify).
This repo could by default live in the github.com/tenkbay organization, but if the project wants to make manual edits they could for the repo and deploy it themselves.
Prereq: install NodeJS and yarn. Then:
- Clone repo
yarn installyarn devand edit files to see your changesyarn buildand opendocs/index.htmlto see if the built version looks correctgit pushto themainbranch to deploy an updated website