Noun Site

A feature complete customizable template for Nouns Builder DAOs built with

• NextJS (base framework)
• TailwindCSS (css / theming)
• wagmi (writing to contracts)
• RainbowKit (wallet connection)
• BuilderSDK (reading contract data)

Demo Sites

• builder.nounsite.wtf
• purple.nounsite.wtf
• assembly.nounsite.wtf

Step 1: Create your DAO

Head to the Nouns Builder website to deploy your DAO

Step 2. Clone and deploy with Vercel

Click the '▲ Deploy' button below to clone your own version of the template.

You will be prompted to fill a few variables as part of the deployment process.

Required Variables

NEXT_PUBLIC_ALCHEMY_KEY can be found by creating a new project in Alchemy and then grabbing the API KEY from the project dashboard page and clicking the 'Get Key' button.

NEXT_PUBLIC_TOKEN_CONTRACT can be found on your Nouns Builder page

Optional Variables

NEXT_PUBLIC_TOKEN_NETWORK change the network you want to pull token data from set to 5 for Goerli testnet.

NEXT_PUBLIC_IPFS_GATEWAY change the default gateway for IPFS content.

Testnet Deployment

You must set NEXT_PUBLIC_TOKEN_NETWORK to 5 for testnet contracts to work.

Deploy

Deploy your template using the deploy link below

Local Development

Install dependencies with yarn

yarn install

Create a .env.local file with the two required variables NEXT_PUBLIC_ALCHEMY_KEY and NEXT_PUBLIC_TOKEN_CONTRACT.

Run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

Editing site content

You can start editing the markdown templates in /templates to change your sites content and add custom pages. We use frontmatter to parse template configs at the top of each markdown page

• templates/:page.md: Create simple custom pages by making new markdown files directly in the templates folder.
  • Set the config align to center for center aligned content.
• templates/home/description.md: The main description that appears on your site right under the auction hero.
• templates/home/faq/:faq-entry.md: Create new markdown files in the faq folder to add new entries to the FAQ section on the homepage.
  • Set the title config to change the FAQs title and order to change the entries order within the list.
• templates/vote/description.md: The description located at the top of the voting page.

Theming

Customize your site colors, branding, navigation and strings via theme.config.ts

ThemeConfig = {
  styles: {
    colors?: ThemeColors;
    fonts?: ThemeFonts;
    logoHeight?: string;
  };
  strings: {
    currentBid?: string;
    auctionEndsIn?: string;
    placeBid?: string;
    highestBidder?: string;
    connectWallet?: string;
    wrongNetwork?: string;
  };
  brand: {
    logo?: string | null;
    title?: string | null;
  };
  nav: {
    primary: NavigationItem[];
    secondary: NavigationItem[];
  };
}

ThemeColors = {
  fill?: RGBType;
  muted?: RGBType;
  stroke?: RGBType;
  backdrop?: RGBType;
  "text-base"?: RGBType;
  "text-muted"?: RGBType;
  "text-inverted"?: RGBType;
  "text-highlighted"?: RGBType;
  "button-accent"?: RGBType;
  "button-accent-hover"?: RGBType;
  "button-muted"?: RGBType;
  "proposal-success"?: RGBType;
  "proposal-danger"?: RGBType;
  "proposal-muted"?: RGBType;
  "proposal-highlighted"?: RGBType;
}

ThemeFonts = {
  heading?: string;
  body?: string;
}

NavigationItem = {
  label: string;
  href: string;
}

RGBType = `${string}, ${string}, ${string}`

Defualt Themes

Quickly get started with our two default themes lightTheme or darkTheme

import { ThemeConfig } from "types/ThemeConfig";
import { lightTheme } from "theme/default";
import merge from "lodash.merge";

export const theme: ThemeConfig = merge(lightTheme, {
  styles: {
    fonts: {
      heading: "Roboto",
    },
    colors: {
      "text-highlighted": "0, 133, 255",
    },
  },
  nav: {
    primary: [
      { label: "DAO", href: "/vote" },
    ],
  },
} as Partial<ThemeConfig>);

Fonts and branding

To add a new font add an import statement to the top of styles/globals.css

@import url("https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@100;300;400;900&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

then set the styles.fonts property in theme.config.ts to your font

export const theme: ThemeConfig = merge(lightTheme, {
  styles: {
    fonts: {
      heading: "Londrina Solid",
    },
  },
  ...
} as Partial<ThemeConfig>);

To change your platform logo add your logo to the public folder or upload to an image provider like imgur.

then set the brand.logoproperty in theme.config.ts to your logo

export const theme: ThemeConfig = merge(lightTheme, {
  brand: {
    logo: "/builder.svg"
  },
  ...
} as Partial<ThemeConfig>);

To remove the logo completely set the brand.logoproperty in theme.config.ts to null

export const theme: ThemeConfig = merge(lightTheme, {
  brand: {
    logo: null
  },
  ...
} as Partial<ThemeConfig>);