Gallery (#1103)

* Header and flex box for gallery (#1102)

* Remove old gallery

* Setup gallery link

* header for gallery

* images flex box

* indentation corrected

* resolved issues

* changes part 3 lol

* resolved issue - favicon and description

* resolved css issue

* newline & semicolon resolved

Co-authored-by: Peter Kos <[email protected]>
Co-authored-by: Saranya Dadi <[email protected]>

* adding navbar

* newline at end of js

* fixes and refactoring js

* fixes

* Update sass/gallery.scss

Co-authored-by: Peter Kos <[email protected]>

* Update sass/gallery.scss

Co-authored-by: Peter Kos <[email protected]>

* Gallery Image Popup (#1107)

* adding html/css for modal

* making the modal open/close

* fixing stuff

* scss fixes

* fixes

* fixing the modal

* fixes

* Gallery Mobile Styling + CSS Cleanup (#1111)

* attempt 1 at cliping images

* mobile gallery + css cleanup

* fixes

* Dynamically adding images (#1115)

* first bit of changes

* attempts at dynamic

* FIx IAM credentials

* putting image into modal

* fixing image loading

* comment fix

* fixing my comment

Co-authored-by: Peter Kos <[email protected]>

* trying to add lazy

* more attempts at Lazy loading

* Revert "more attempts at Lazy loading"

This reverts commit a61ba2f.

* Revert "trying to add lazy"

This reverts commit 22a9145.

* Lazy load background images in gallery (#1119)

* adding lazy

* fixing modal

* header information

* Dynamic loading + transitions!!!!!

* getting the last of the gallery content up

Co-authored-by: sjmiller7 <[email protected]>

* Gallery thumbnail images and added logos (#1137)

* attempts at adding logos

* making thumbnails appear

* CD/local dev now uses .env for IAM auth; update README w/ local dev instructions (#1132)

* Add keys.js generation as part of GH actions

Would be ncie to refactor later to chain the build job

* switch from keys.js to env var

* Update readme to include IAM env settings

* Update build to use env var

* Remove TODO

* Env var CI/CD is now valid YAML :)

* Update gallery button w/ new icon + text

* fixing ios links issue

* Adjusting gallery modal design (#1151)

* adjusting modal design

* fixing modal scroll breakpoint & dumb padding

* Fix package lock sync from backmerge

Co-authored-by: SaranyaDadi <[email protected]>
Co-authored-by: Saranya Dadi <[email protected]>
Co-authored-by: sjmiller7 <[email protected]>
Co-authored-by: sjmiller7 <[email protected]>

Author: 4 people

.github/workflows/build.yml

@@ -22,3 +22,5 @@ jobs:
         node-version: '12'
     - run: npm ci
     - run: npm run build --if-present
+      env:
+        IDENTITY_POOL_ID: ${{ secrets.IDENTITY_POOL_ID }}

.github/workflows/deploy-production.yml

@@ -20,6 +20,8 @@ jobs:
       run: npm ci
     - name: Builder
       run: npm run build
+      env:
+        IDENTITY_POOL_ID: ${{ secrets.IDENTITY_POOL_ID }}
     - name: Deploy
       uses: peaceiris/actions-gh-pages@v3
       with:

.github/workflows/deploy-staging.yml

@@ -16,5 +16,7 @@ jobs:
       run: npm install
     - name: Build
       run: npm run build
+      env:
+        IDENTITY_POOL_ID: ${{ secrets.IDENTITY_POOL_ID }}
     - name: Ping FeaturePeek
       run: bash <(curl -s https://peek.run/ci)

README.md

@@ -35,6 +35,18 @@ $ npm run dev
 
 You should then be able to access the site at `localhost:1234`.
 
+### Environment variables
+
+The images in the [gallery](https://brickhack.io/gallery) are hosted on our AWS S3 instance.
+
+GitHub Actions (our CI/CD) uses a repository secret to store the environment variable.
+
+For local development on the gallery:
+- Create a `.env` file in the root of the project
+- Add `IDENTITY_POOL_ID="key"` to the top, where `key` is the AWS IAM key.
+
+**Note: Ask the Engineering team lead (@peterkos) for an AWS key if you do not have one.**
+
 # Development & Deployment
 
 All development work should be done locally in a new branch and/or fork. Then, make a pull request to have the code merged into the develop branch. Once the develop branch gets to a good state, it gets merged into the master branch for a production deployment.

resources/gallery/brickhack_2.svg renamed to assets/gallery/bh2Logo.svg

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>BrickHack Gallery</title>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="keywords" content="hackathons, hackathon, hack-a-thon, programming, hardware, development, design, rit"/>
+    <meta name="description" content="Photos of previous BrickHack events.">
+
+    <!-- Favicons -->
+    <link rel="apple-touch-icon" sizes="180x180" href="resources/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="resources/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="resources/favicon/favicon-16x16.png">
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div id="modal">
+        <i class="fas fa-times" id="close-modal"></i>
+        <img id="modal-img" src="https://images.unsplash.com/photo-1567309254107-5babef35b7b4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80" alt="image"/>
+    </div>
+    <div id="modal-background"></div>
+    <nav>
+        <div id="mobile-menu">
+            <i class="fas fa-bars" id="toggler"></i>
+        </div>
+        <div class="navlinks">
+            <a class="navlink" href="#bh6-nav">BH6</a>
+            <a class="navlink" href="#bh5-nav">BHV</a>
+            <a class="navlink" href="#bh4-nav">BH4</a>
+            <a class="navlink" href="#bh3-nav">BH3</a>
+            <a class="navlink" href="#bh2-nav">BH2</a>
+            <a class="navlink" href="#bh1-nav">BH</a>
+        </div>
+        <div class="navlinks">
+            <a href="./index.html">Next BrickHack</a>
+        </div>
+    </nav>
+    <!-- BH6 -->
+    <div class="header" id="first-header">
+        <a id="bh6-nav" class="navpoints"></a>
+        <img src="./assets/gallery/bh6Logo.svg" alt="Brickhack 6 logo"/>
+        <h1>BrickHack 6</h1>
+        <br>
+        <p>February 8 & 9, 2020</p>
+        <p>40 schools - 590 hackers - 24 hours</p>
+    </div>
+    <div class="image-container" id="bh6"></div>
+    <!-- BH5 -->
+    <div class="header">
+        <a id="bh5-nav" class="navpoints"></a>
+        <img src="./assets/gallery/bhVLogo.svg" alt="Brickhack V logo"/>
+        <h1>BrickHack V</h1>
+        <br>
+        <p>February 16 & 17, 2019</p>
+        <p>40 schools - 590 hackers - 24 hours</p>
+    </div>
+    <div class="image-container" id="bh5"></div>
+    <!-- BH4 -->
+    <div class="header">
+        <a id="bh4-nav" class="navpoints"></a>
+        <img src="./assets/gallery/bh4Logo.png" alt="Brickhack 4 logo"/>
+        <h1>BrickHack 4</h1>
+        <br>
+        <p>January 27 & 28, 2018</p>
+        <p>17 schools - 510 hackers - 24 hours</p>
+    </div>
+    <div class="image-container" id="bh4"></div>
+    <!-- BH3 -->
+    <div class="header">
+        <a id="bh3-nav" class="navpoints"></a>
+        <img src="./assets/gallery/bh3Logo.svg" alt="Brickhack 3 logo"/>
+        <h1>BrickHack 3</h1>
+        <br>
+        <p>February 11 & 12, 2017</p>
+        <p>33 schools - 500 hackers - 24 hours</p>
+    </div>
+    <div class="image-container" id="bh3"></div>
+    <!-- BH2 -->
+    <div class="header">
+        <a id="bh2-nav" class="navpoints"></a>
+        <img src="./assets/gallery/bh2Logo.svg" alt="Brickhack 2 logo"/>
+        <h1>BrickHack 2</h1>
+        <br>
+        <p>March 5 & 6, 2016</p>
+        <p>25 schools - 360 hackers - 24 hours</p>
+    </div>
+    <div class="image-container" id="bh2"></div>
+    <!-- BH1 -->
+    <div class="header">
+        <a id="bh1-nav" class="navpoints"></a>
+        <img src="./assets/gallery/bhLogo.svg" alt="Brickhack logo"/>
+        <h1>BrickHack</h1>
+        <br>
+        <p>April 18 & 19, 2015</p>
+        <p>20 schools - 320 hackers - 24 hours</p>
+    </div>
+    <div class="image-container" id="bh"></div>
+    <!-- This is where Parcel imports are located! (SASS, etc.) -->
+    <script src="./gallery.js"></script>
+</body>
+</html>