npm install
npm run dev
npm run buildThe goal of this build is speed. There are no images, css libraries, or client-side dependencies.
SVGs are rendered inline as vue components so we're only slowed down by fonts, which are inserted in the best way possible.
Server-side-rendered on Vercel, the initial page load is reactive in 150ms - 350ms and subsequent route changes are <10ms.
The build can be deployed static, server-side-rendered, hybrid-cache-rendered, or edge-worker-rendered.
It will plug-and-play with a service like Vercel, Netlify or Cloudflare and doesn't take much to get live with most other options.
This Nuxt guide on rendering modes and these Nitro provider guides paint a clear picture.
I recommend the edge. Cloudflare if possible but Vercel might be simpler.
JSON files in the /data directory are used to update non-structural content. These objects feed data to components and functions and have extra fields for style and class in places that might be useful.
These objects are grouped into sections that mirror their order on a page - so it made sense to add 'show' fields which turn the sections on or off with true or false values.
There is validation logic to hide sections if content is missing but we're walking the overkill line already so partial-abandonment means it's not as reliable as show: true || false.
Speaking of overkill, we used this build to trial a template literal idea and it works far better than expected. This means moustache brackets are available to use across the JSON config files.
We have linked this function to the root page files using /data/key-information.json as a source of truth.
In the current setup, all Pluto's extenal URLs reflect one source and can be referenced/rendered in any content using the below syntax.
{
"docs_url": "https://plutodocs.peakok.co",
"community_path": "/community"
}{
"links": [
{
"text": "Community",
"to": "{{community_path}}",
"external": false,
"className": "",
"buttonClass": "button button-text"
},
{
"text": "Docs",
"to": "{{docs_url}}",
"external": true,
"className": "",
"buttonClass": "button button-text"
}
]
}Be sure to set external to true or false as it changes the behaviour of the link component.
New values added to /data/key-information.json are available via {{key_name}} brackets in all .json files located in the /data directory. Any string can be used as a source value and the {{}} syntax can be used within strings across objects or arrays of any nested depth.
With a creative approach, this functionality can be leveraged in powerful ways but at the very least, for this site, it makes it harder to publish incorrect information.
Content in /data/*-page.json files sets page SEO tags as follows:
const seo = {
{ name: 'title', content: seo.title },
{ name: 'description', content: seo.description },
{ property: 'og:type', content: 'website' },
{ property: 'og:title', content: seo.title },
{ property: 'og:description', content: seo.description },
{ property: 'og:image', content: seo.image },
{ property: 'og:url', content: seo.url },
{ name: 'twitter:title', content: seo.title },
{ name: 'twitter:description', content: seo.description },
{ name: 'twitter:image', content: seo.image },
{ name: 'twitter:url', content: seo.url },
{ name: 'twitter:card', content: 'summary_large_image' },
{ name: 'theme-color', content: 'white' },
}To increase performance and eliminate layout shift, critical CSS is hard-coded into /nuxt.config.ts. This protects it from code-splitting and secures its inline position in the top of the <head> tag.
If needed, this can be undone by removing it from /nuxt.congfig.ts and placing it at the top of /assets/style.css with the rest of the style rules.
On the other hand, doing the opposite and moving the /assets/style.css content into /nuxt.config.ts would squeeze extra milliseconds from a small site like this.
The rest of the CSS is split between /assets/style.css and scoped style slots in .vue components.
The CSS is intentionally lightweight which means there's loads of room to make changes.
The colours are stored in css variables at the document :root in /assets/style.css.
There are three palettes: dark, light, and sepia. The light and dark palettes are tuned reflections of one another and sepia falls as flat as anyone would expect but has been left there as a reminder that life could be worse.
We have a client-ready Figma file available for anyone who needs it. It lays out the brand elements used for this build but wouldn't quite pass as a central brand book.
/PLUTO_WEB_BRAND.pdf (10.6MB) is a direct export of the Figma file's content. It contains all the custom SVG graphics which will no doubt come in handy.
Due to limited or paywalled password protection via most hosting providers, We have jerry-rigged a password-only middleware to handle access while in staging.
The function accepts a specific password and doesn't store sessions or users.
We control password protection using a value in nuxt.config.ts and set a 24-hour muddled timestamp cookie. The formula to muddle the characters is free-balled and serves only to mask against best-guess access attempts. This could easily be replaced with encryption if needed.
The current password can be clearly seen in the nuxt.config.ts so it's important to note this is great for pre-launch, demos, or testing but it should never be set to an otherwise sensitive string.
The auth logic is obsfucates everything the Nuxt build creates on the server-side and should suffice for keeping content hidden. However, it isn't battle-tested and usage comes without guarantees.
A markdown-driven docs site paired with this project is awaiting content but also ready to handover.