UCLA Library Website

A Nuxt powered frontend website for the UCLA Library.

Build Setup

SET UP THE NUXT SITE

This is a Nuxt site, it builds and deploys like any other Nuxt project.

Works best with the fuxt-backend WordPress theme as the backend.

First step: Duplicate and rename .example.env to .env. Define any vars environment needed there.

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# serve with hot reload Storybook at localhost:3003
$ npm run storybook

# build for production and launch server
$ npm run build
$ npm start

# build Storybook for production
$ npx nuxt storybook build

# generate static nuxt site
$ npm run generate

---

Designs - Figma

• DESIGNS

• DESIGN TOKENS

UX GUIDE

---

STEPS

(font-size/line-height/letter-spacing)

@include step-5;

• page-title
  • Karbon Regular
  • Desktop - 84px / 100em / 0em
  • Tablet - 50px/100em/0em
  • Mobile - 36px/100em/0em

@include step-4;

• section-heading
  • Karbon Regular
  • Desktop - 63px/125em/0em
  • Tablet - 42px/125em/0em
  • Mobile - 32px/125em/0em

@include step-3;

• subheading
  • Karbon Regular
  • Desktop - 48px/125em/0em
  • Tablet - 34px/125em/0em
  • Mobile - 28px/125em/0em

@include step-2;

• subheading-small
  • Karbon Medium
  • Desktop - 36px/120em/0.25em
  • Tablet - 28px/125em/0em
  • Mobile - 28px/125em/0em

@include step-1;

• subtitle
  • Karbon Medium
  • Desktop - 26px/125em/0em
  • Tablet - 24px/125em/0em
  • Mobile - 22px/125em/0em

---

HEADINGS

All Heading tags are var(--font-primary) (Karbon)

<h1 class="page-title"></h1>

• font-size: var(--step-5); (84px/50px/36px)
• font-weight: 400;

<h2 class="section-heading"></h2>

• font-size: var(--step-4); (63px/42px/32px)
• font-weight: 400;

<h3 class="subheading"></h3>

• font-size: var(--step-3); (48px/34px/28px)
• font-weight: 400;

<h4 class="subheading-small"></h4>

• font-size: var(--step-3); (48px/34px/28px)
• font-weight: 500;

<h5 class="subtitle"></h5>

• font-size: var(--step-3); (48px/34px/28px)
• font-weight: 500;

<h6 class="heading-six"></h6>

• font-size: 20px;
• font-weight: 500;

---

FONTS

`var(--font-primary)` Karbon  
`var(--font-secondary)`Proxima Nova

---

---

Helpful Documentation & Tools

DOCS & TOOLS

• ORG Chart

• Current UCLA Library Site

• Team - Youtube

• Clippy

• Flexy Boxes

• Nth Child Calculator

• Lorem Ipsum

• Nuxt Docs

  • Funkhaus Components

• Craft Docs

  • Craft Plugin Store
    • Redactor
    • Feed Me
    • Navigation
    • Neo

• SCRIPTS

  • npm run dev : "nuxt",
  • npm run build : "nuxt build",
  • npm run generate : "nuxt generate",
  • npm run start : "nuxt start",
  • npm run storybook : "nuxt storybook --port 3009",
  • npm run storybook-build : "nuxt storybook build",
  • npm run cypress : "cypress open",
  • npm run cypress-run : "cypress run",
  • npm run lint : "eslint ./",
  • npm run lint-fix : "eslint --fix ./",
  • npm run percy : "percy storybook http://localhost:3003",
  • npm run percy-static : "percy storybook ./storybook-static"

---

Routes

GET HELP

Menu name	URL	Figma template name
Borrowing Books and Equipment	/services-resources/borrowing-books-and-equipment	Help Topic - Landing Page
Research	/services-resources/research	Help Topic - Landing Page
Teaching	?	?
Remote Access	?	?
Find & Reserve a Space	?	?
View all services & Resources	?	?

VISIT

Menu name	URL	Figma template name
Location & Hours	?	?
Exhibits & Upcoming Events	/events-exhibits/	All Exhibits & Upcoming Events - Listing Page (General Template, list view default)
Our Collections	?	?
For the General Public	?	?

ABOUT

Menu name	URL	Figma template name
About the UCLA Libraries	?	?
Library News	?	?
Staff Directory	?	?
Student Opportunities	?	?
Awards, Fellowships & Grants	?	?

OTHERS

Menu name	URL	Figma template name
Location & Hours	?	?

---

Redirects file

The list of redirects is maintained in a google spreadsheet; it's contents must exported to the Netlify _redirects file

Exporting redirects file to netlify:

1. Go to google spreadsheet, File > Download > CSV
2. Save in MEAP repo as static/_redirects
3. delete header row (or comment out with #)
4. delete any redirects from a URL to itself (currently only the first two, / and /about, but you can find them with the regex ^(.+)\s+\1\n). It looks like you can probably skip this step and Netlify will figure things out, but it won't hurt
5. remove https://www.library.ucla.edu from all URLs
6. find/replace all , separators with spaces (I used 4 - )
7. delete all

LibCal Auth Procedure

LIBCAL

1. At start of build, we need to exchange secret for token
2. Token needs to be given to client side, so that search works

If your repo is Commitizen friendly:

Simply use git cz or just cz instead of git commit when committing.

When you're working in a Commitizen-friendly repository, you'll be prompted to fill in any required fields, and your commit messages will be formatted according to the standards defined by project maintainers.