New Zealand Students' Space Association

Website built with Gatsby and Justin Formentin's starter.

dev notes / to-dos

⬜ ensure everything is r e s p o n s i v e (mobile friendly - dum dum daaaa)

⬜ make local gatsby branch to test and compare white background

⬜ update site thumbnail (seen when you paste link into facebook)

INDEX PAGE

⬜ fix formatting

⬜ add proper email to button

⬜ give whole buttom click rights

ABOUT US PAGE

✅ do something with giant yellow circles - NO MORE

EVENTS PAGE

⬜ reference to check out blog at bottom of page

✅ fix URL colours

✅ give whole event click rights

✅ change text location to black instead of white

⬜ add filter by tag feature

BLOG PAGE

⬜ fix double lined titles

⬜ fix spacing with titles, dates, break-line

⬜ add timeline to side of blog

✅ fix URL colours

TEAM PAGE

CONTACT US PAGE

⬜ add proper emails

⬜ give whole buttom click rights; all contact buttons

⬜ give Mission Control its own line

Usage

Download project
# With `gatsby-cli`
gatsby new my-site https://github.com/nzssa/nzssa.github.io

OR

# Cloning
git clone my-site https://github.com/nzssa/nzssa.github.io.git
cd my-site

THEN

# Install dependencies
npm i

# Start dev server
gatsby develop

# Build for production
gatsby build

# Format with Prettier
npm format

Folder structure

├──.circleci # Circleci integration
├── config # Theme and site metadata
├── content # Post markdown and images
├── src
│   ├── components
│   ├── layouts
│   ├── pages
│   ├── style
│   └── templates # For Post and Tag page generation
├── static # Images for logo and favicon, and robots.txt
├── gatsby-config.js # Plugin loading and configuration
└── gatsby-node.js # Generate posts/tags and modify webpack

Starter Features

• Gatsby v2
• Emotion for styling
• Code syntax highlighting
• Tags
• SEO
  • Sitemap generation
  • Schema.org JSON-LD for Google Rich Snippets
  • Twitter Tags
  • OpenGraph Tags for Facebook/Google+/Pinterest
  • robots.txt
• Typography.js
• Typefaces for faster font loading
• Offline Support
• Manifest Support
• Gatsby Image
  • Responsive images
  • Traced SVG Loading with Lazy-Loading
  • WebP Support
• Development tools
  • ESLint for linting
  • Prettier for code style
  • CircleCI support
  • Google Lighthouse Optimization