This is the code for the official website for the Missfits (FRC Team 6418). It uses
Firebase for hosting, functions, and image & data storage,
FontAwesome for vector icons, and Google Fonts for fonts Cabin
Sketch and Sen. Dustan Kastan's smoothscroll is implemented to enable
smooth scrolling in Safari (which currently does not support window.scrollTo(props)). Scripts are written in pure JS
and JQuery.
The navigation bar uses standard links (e.g. "/about.html"), but it also implements # references (which don't reference
any particular ID) to enable smooth scrolling on the same and between pages. References to sections are formatted as:
href="/[page (blank if index.html)]#[section]. To enable smooth scrolling, set onclick="scrollToSection([section]).
on the corresponding page. Add [section] to the section element's class list. For references to pages,
href="/[page]" and onclick="scrollToTop()" on [page].
Unfortunately, there is currently no feature that allows for recurring elements to be used on all pages. This means
that if you change an element like the navbar on one page, you must update it on all other pages 😬. However,
this should change soon.
The website uses Sass/SCSS for stylesheets. There are some constants in
stylesheets/variables that will affect styles globally. The main stylesheet is
styles.scss, and each page (or group of related pages) has its own stylesheet.
Images are stored using Firebase storage. Each "photo album" (media subpage) has a corresponding folder in the project's storage bucket. Adding or removing an image from a folder will automatically add/remove it from the site. To create a new album, create a section with the following format:
<div class="section background1 photo-album">
<h1>Title</h1>
<div id="images"></div>
</div>At the bottom of the body, import the Firebase and execution scripts (this won't work in live-server testing, since it
relies on Firebase hosting, but should work when testing with firebase serve):
<script src="/__/firebase/7.14.0/firebase-app.js"></script>
<script src="/__/firebase/7.14.0/firebase-storage.js"></script>
<script src="/__/firebase/init.js"></script>
<script src="/scripts/firebase-storage.js"></script>Finally, add onload="getImages([path to images])" to the <body> tag.
The contact form sends its data to Firebase, which will then send an email to [email protected] or [email protected] (soon to be implemented using Firebase functions), rather than using the PHP mail function or something similar.
In order to push changes to the website, you'll need to download Firebase CLI. The method I recommend is using npm (you may need to download Node.js if you haven't already):
npm install -g firebase-toolsNext, send your email address (must be a Google account) to me so I can give you access to the Firebase project. Then, log into your Google account in the CLI by running
firebase loginLastly, you should be able to deploy to the site with the command
firebase deploy --only hosting -m "<deploy message here>"More detailed documentation can be found on the Firebase CLI Reference page.