Getting started
About ENS$ENS TokenContractsProtocol RevenueENS FoundationENS DAO ConstitutionENS EndowmentVoting
VotingDelegating $ENSGovernance EnvironmentsProposals
ProposalsSocial ProposalsExecutable ProposalsFunding RequestsWorking Groups
Working GroupsMeta-Governance WGENS Ecosystem WGPublic Goods WGUseful Information
LinksENS LabsSIWECCIP-Read SitemapDocumentation
Aether is perfect for building out documentation of all kinds, check out the content below for examples on what can be achieved.
Code Documentation
Environment Variables
Aether has built-in support for loading environment variables into the browser and Functions. Loading environment variables into Node.js requires a small code snippet. In development, Aether will load environment variables from a file namedΒ .env.development
. For builds, it will load fromΒ .env.production
.
AΒ .env
Β file could look like:
Aether=https://dev.example.com/apiAPI_KEY=927349872349798
To load these into Node.js, add the following code snippet to the top of yourΒ Aether-config.js
Β file:
require("dotenv").config({ path: `.env.${process.env.NODE_ENV}`,})
This loads process.env.AETHER_API_URL
andΒ process.env.API_KEY
Β for use inΒ Aether-*.js
Β files and functions.
For example, when configuring a plugin inΒ aether-config.js
:
require("dotenv").config({
path: `.env.${process.env.NODE_ENV}`,
})
module.exports = {
plugins: [
{
resolve: `aether`,
options: {
apiKey: process.env.API_KEY,
},
},
],
}
Accessing Environment Variables in the browser.
By default, environment variables are only available in Node.js code and are not available in the browser as some variables should be kept secret and not exposed to anyone visiting the site.
To expose a variable in the browser, you must preface its name with AETHER_
. SoΒ AETHER_API_URL
Β will be available in browser code butΒ API_KEY
Β will not.
Variables are set when JavaScript is compiled so when the development server is started or you build your site.
import React, { useState, useEffect } from "react"
function App() {
const [data, setData] = useState()
useEffect(async () => {
const result = await fetch(
`${process.env.AETHER_API_URL}/users`
).then(res => res.json())
setData(result.data)
})
return (
<ul>
{data.map(user => (
<li key={user.id}>
<a href={user.url}>{user.name}</a>
</li>
))}
</ul>
)
}
export default App
AddΒ .env*
Β files to .gitignore
Environment variable files should not be committed to Git as they often contain secrets which are not safe to add to Git. Instead, addΒ .env.*
Β to yourΒ .gitignore
Β file and setup the environment variables manually locally.
Reference Tables
Light mode colors
Name | Text | BG | Select | Text Color | BG Color | Select Color | Text CSS Variable | BG CSS Variable | Select CSS Variable |
---|---|---|---|---|---|---|---|---|---|
Default | Default | Default | #37352F | #FFFFFF | 206,205,202,0.5 | --color-text-default | --color-bg-default | --color-pill-default | |
Gray | Gray |
| Gray | #9B9A97 | #EBECED | 155,154,151,0.4 | --color-text-gray | --color-bg-gray | --color-pill-gray |
Brown | Brown |
| Brown | #64473A | #E9E5E3 | 140,46,0,0.2 | --color-text-brown | --color-bg-brown | --color-pill-brown |
Orange | Orange |
| Orange | #D9730D | #FAEBDD | 245,93,0,0.2 | --color-text-orange | --color-bg-orange | --color-pill-orange |
Yellow | Yellow |
| Yellow | #DFAB01 | #FBF3DB | 233,168,0,0.2 | --color-text-yellow | --color-bg-yellow | --color-pill-yellow |
Green | Green |
| Green | #0F7B6C | #DDEDEA | 0,135,107,0.2 | --color-text-green | --color-bg-green | --color-pill-green |
Blue | Blue |
| Blue | #0B6E99 | #DDEBF1 | 0,120,223,0.2 | --color-text-blue | --color-bg-blue | --color-pill-blue |
Purple | Purple |
| Purple | #6940A5 | #EAE4F2 | 103,36,222,0.2 | --color-text-purple | --color-bg-purple | --color-pill-purple |
Pink | Pink |
| Pink | #AD1A72 | #F4DFEB | 221,0,129,0.2 | --color-text-pink | --color-bg-pink | --color-pill-pink |
Red | Red |
| Red | #E03E3E | #FBE4E4 | 255,0,26,0.2 | --color-text-red | --color-bg-red | --color-pill-red |
Dark mode colors
Name | Text | BG | Select | Text Color | BG Color | Select Color | Text CSS Variable | BG CSS Variable | Select CSS Variable |
---|---|---|---|---|---|---|---|---|---|
Default | Default | Default | 255,255,255,0.9 | #2F3437 | 206,205,202,0.5 | --color-text-default | --color-bg-default | --color-pill-default | |
Gray | Gray |
| Gray | 151,154,155,0.95 | #454B4E | 151,154,155,0.5 | --color-text-gray | --color-bg-gray | --color-pill-gray |
Brown | Brown |
| Brown | #937264 | #434040 | 147,114,100,0.5 | --color-text-brown | --color-bg-brown | --color-pill-brown |
Orange | Orange |
| Orange | #FFA344 | #594A3A | 255,163,68,0.5 | --color-text-orange | --color-bg-orange | --color-pill-orange |
Yellow | Yellow |
| Yellow | #FFDC49 | #59563B | 255,220,73,0.5 | --color-text-yellow | --color-bg-yellow | --color-pill-yellow |
Green | Green |
| Green | #4DAB9A | #354C4B | 77,171,154,0.5 | --color-text-green | --color-bg-green | --color-pill-green |
Blue | Blue |
| Blue | #529CCA | #364954 | 82,156,202,0.5 | --color-text-blue | --color-bg-blue | --color-pill-blue |
Purple | Purple |
| Purple | #9A6DD7 | #443F57 | 154,109,215,0.5 | --color-text-purple | --color-bg-purple | --color-pill-purple |
Pink | Pink |
| Pink | #E255A1 | #533B4C | 226,85,161,0.5 | --color-text-pink | --color-bg-pink | --color-pill-pink |
Red | Red |
| Red | #FF7369 | #594141 | 255,115,105,0.5 | --color-text-red | --color-bg-red | --color-pill-red |
Guides and Instructions
Adding a custom domain to your site
To add a domain to your site, first head into your site editor (cog icon) and click into the "Domains" page, then click the "Add a custom domain" button. After entering your own domain address in the popup, you'll then need to make some changes to the DNS settings through your hosting provider.
You would need to do this through your domain registrar's (GoDaddy, Namecheap, Google Domains, etc) or DNS provider's (Cloudflare, Netlify, etc) website. For specific instructions, view the content inside the toggle blocks below.
DNS Settings
Below you can find the DNS settings that need to be included on your domain registrar's (GoDaddy, Namecheap, Google Domains, etc) or DNS provider's (Cloudflare, Netlify, etc) website.
Root domain records
For a root domain like example.com
you'll need to add the following records:
Subdomain records
For a subdomain like blog.example.com
add this record:
If you run into issues, please make sure that you have:
- Added new DNS records to your domain provider
- Removed old DNS records
- Waited up to 24 hours for new settings to propagate
β Previous
Next β