Built with Nuxt.js, Tailwind, Node.js and Yarn. Deployed on Netlify.
# install dependencies
$ yarn install
# serve with hot reload at localhost
$ yarn devCreate a new markdown file in ~/content/pages. The filename you choose will become the URL. For example:
~/content/pages/umeeverse.md => https://ux.xyz/umeeverse
Before getting started, you should checkout a new branch and create a pull request. This will allow you to use Netlify's Deploy Preview feature to preview and test the page. When the page is ready, you can close the PR, merging the changes to the main branch effectively setting the page live.
The header of the document contains frontmatter content. This is used to specify a title, date and a header image for the page:
---
title: Lorem ipsum dolor sit amet: consectetur adipiscing
date: 2022-01-21
header_image: images/header-image.jpg
---The rest of the file should contain the body of your page and be written with Markdown syntax.
Images and other media (e.g. PDFs) should be placed in the ~/static/images folder. Images can then be placed in a page as follows:
Two button components have been made available within markdown pages. There is a simple button and one with a gradient background. They can be placed in a page as follows:
<ButtonLink href="https://www.google.com">Take me somewhere new</ButtonLink>
<ButtonGradient href="https://www.google.com/">I am a button</ButtonGradient>A sidebar is automatically generated from any heading 2 and heading 3 tags used in the page. This allows a user to quickly jump to a section.
Home page content can be edited by making changes to the follwing file ~/content/pages/home.yml
The website automatically loads all images in the following folder ~/assets/images/experience-logos/
- Images should be 420 x 170px in PNG format.
- Ordering can be changed by adjusting number prefix on each filename
The website automatically loads all images in the following folder ~/assets/images/backer-logos/
- Images should be 420 x 200px in PNG format.
- Ordering can be changed by adjusting number prefix on each filename
FAQ content is edited in the following markdown file ~/content/faq.md. It uses <summary> and <detail> HTML elements to create collapsable question/answer blocks.
The website features an announcement pop-up panel useful for alerting visitors to events or other important information.
Content for the panel is specified in ~/content/pages/home.yml using the following fields:
announcement_title: UXmania now live!
announcement_text: Our incentivized Testnet is now available
announcement_link_text: Find out more
announcement_link: /uxmania
If the fields are empty then the banner does not display. If a user closes the banner, their preference is stored in a cookie that expires in 7 days.
Any new changes should be made by checking out a new branch from main. Create a PR in Github from this new branch and it will automatically trigger a deployment preview site and URL within Netlify.
The site is automatically deployed to Netlify when any changes are merged into main.