A Nuxt powered frontend website for the UCLA Library.
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
UX GUIDE
(font-size/line-height/letter-spacing)
- page-title
- Karbon Regular
- Desktop - 84px / 100em / 0em
- Tablet - 50px/100em/0em
- Mobile - 36px/100em/0em
- section-heading
- Karbon Regular
- Desktop - 63px/125em/0em
- Tablet - 42px/125em/0em
- Mobile - 32px/125em/0em
- subheading
- Karbon Regular
- Desktop - 48px/125em/0em
- Tablet - 34px/125em/0em
- Mobile - 28px/125em/0em
- subheading-small
- Karbon Medium
- Desktop - 36px/120em/0.25em
- Tablet - 28px/125em/0em
- Mobile - 28px/125em/0em
- subtitle
- Karbon Medium
- Desktop - 26px/125em/0em
- Tablet - 24px/125em/0em
- Mobile - 22px/125em/0em
All Heading tags are var(--font-primary) (Karbon)
font-size: var(--step-5);(84px/50px/36px)font-weight: 400;
font-size: var(--step-4);(63px/42px/32px)font-weight: 400;
font-size: var(--step-3);(48px/34px/28px)font-weight: 400;
font-size: var(--step-3);(48px/34px/28px)font-weight: 500;
font-size: var(--step-3);(48px/34px/28px)font-weight: 500;
font-size: 20px;font-weight: 500;
`var(--font-primary)` Karbon
`var(--font-secondary)`Proxima Nova
DOCS & TOOLS
-
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"
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 | ? | ? |
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:
- Go to google spreadsheet, File > Download > CSV
- Save in MEAP repo as
static/_redirects - delete header row (or comment out with #)
- 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 - remove
https://meap.library.ucla.edufrom all URLs - find/replace all
,separators with spaces (I used 4 - - delete all
LIBCAL
- At start of build, we need to exchange secret for token
- Token needs to be given to client side, so that search works
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.
