favicon; additional videos; get changes; readme changes

README.md

@@ -1,5 +1,9 @@
 # kekkon
 
+## feb 2022 instructions
+instead of copying from git each time, i'm copying files directly into /usr/src/kekkon (via ssh or filezilla) and then the dockerfile is moving them into the docker.
+otherwise, it takes forever, because the videos are huge.
+
 ## Build Setup
 
 ```bash

assets/images/favicon.svg

@@ -0,0 +1,115 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 90.66 90.34"
+   version="1.1"
+   id="svg183"
+   sodipodi:docname="favicon.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview185"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="2.6031326"
+     inkscape:cx="47.826992"
+     inkscape:cy="45.137924"
+     inkscape:window-width="960"
+     inkscape:window-height="1000"
+     inkscape:window-x="997"
+     inkscape:window-y="35"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg183" />
+  <defs
+     id="defs146">
+    <style
+       id="style144">.cls-1{fill:#ffffff;}</style>
+  </defs>
+  <rect
+     style="fill:#5b6ba6;stroke-width:1.00758;fill-opacity:1"
+     id="rect289"
+     width="91.16275"
+     height="90.845039"
+     x="-0.24966164"
+     y="0.086190477" />
+  <g
+     id="Layer_7"
+     data-name="Layer 7"
+     transform="matrix(0.83534795,0,0,0.83534795,7.4148575,7.4314768)">
+    <path
+       class="cls-1"
+       d="m 53.27,0.74 0.88,1.41 A 0.64,0.64 0 0 0 54.56,2.44 43.57,43.57 0 1 1 37.92,2.09 0.69,0.69 0 0 0 38.38,1.77 L 39.13,0.49 A 0.23,0.23 0 0 0 38.89,0.14 45.44,45.44 0 0 0 1.33,56.14 44.63,44.63 0 0 0 35.14,89.24 45.35,45.35 0 1 0 53.49,0.42 0.21,0.21 0 0 0 53.27,0.74 Z"
+       id="path148" />
+    <path
+       class="cls-1"
+       d="m 81,45 a 35.7,35.7 0 0 1 -24.49,33.84 0.55,0.55 0 0 0 -0.22,0.14 44.23,44.23 0 0 1 -3.53,3.46 0.55,0.55 0 0 0 0.49,0.94 39.18,39.18 0 0 0 3.32,-75.9 0.54,0.54 0 0 0 -0.6,0.21 L 54.48,9.82 A 0.55,0.55 0 0 0 54.79,10.66 35.7,35.7 0 0 1 81,45 Z"
+       id="path150" />
+    <path
+       class="cls-1"
+       d="m 6.16,45 a 39.19,39.19 0 0 0 24.74,36.44 0.55,0.55 0 0 0 0.62,-0.87 c -1.31,-1.47 -2.6,-3 -3.89,-4.61 A 0.44,0.44 0 0 0 27.48,75.84 35.63,35.63 0 0 1 36.81,10.41 0.54,0.54 0 0 0 37.13,9.56 L 35.6,7.42 A 0.56,0.56 0 0 0 35,7.21 39.19,39.19 0 0 0 6.16,45 Z"
+       id="path152" />
+    <path
+       class="cls-1"
+       d="m 43.07,84.05 c 11.27,-5.87 18.61,-19.16 22.46,-39 h -8.38 c 0,14.06 -2.85,29.09 -14.08,39"
+       id="path154" />
+    <path
+       class="cls-1"
+       d="M 43.07,84.62 A 0.56,0.56 0 0 1 42.6,84.37 0.57,0.57 0 0 1 42.69,83.63 C 52,75.35 56.59,62.72 56.59,45 a 0.57,0.57 0 0 1 0.56,-0.57 h 8.38 a 0.58,0.58 0 0 1 0.44,0.21 0.57,0.57 0 0 1 0.12,0.47 c -2,10.05 -4.81,18.45 -8.52,24.94 -3.8,6.68 -8.57,11.56 -14.24,14.5 a 0.54,0.54 0 0 1 -0.26,0.07 z m 14.65,-39 C 57.63,61 54.11,72.58 47,80.88 55.49,74.38 61.48,62.53 64.86,45.58 Z"
+       id="path156" />
+    <path
+       class="cls-1"
+       d="m 43.06,84.62 a 0.54,0.54 0 0 1 -0.26,-0.07 33.57,33.57 0 0 1 -12,-10.86 0.57,0.57 0 0 1 0.93,-0.65 32.54,32.54 0 0 0 11.6,10.51 0.57,0.57 0 0 1 0.24,0.76 0.56,0.56 0 0 1 -0.51,0.31 z"
+       id="path158" />
+    <path
+       class="cls-1"
+       d="m 65.53,45.58 h -40.4 a 0.57,0.57 0 0 1 0,-1.14 h 40.4 a 0.57,0.57 0 1 1 0,1.14 z"
+       id="path160" />
+    <polyline
+       class="cls-1"
+       points="41.88 17.86 31.92 45.01 25.13 45.01 35.98 15.41 41.88 17.86"
+       id="polyline162" />
+    <path
+       class="cls-1"
+       d="M 31.92,45.58 H 25.13 A 0.56,0.56 0 0 1 24.66,45.33 0.55,0.55 0 0 1 24.6,44.82 l 10.85,-29.6 a 0.56,0.56 0 0 1 0.3,-0.32 0.59,0.59 0 0 1 0.45,0 l 5.9,2.45 a 0.56,0.56 0 0 1 0.31,0.72 l -10,27.15 a 0.56,0.56 0 0 1 -0.49,0.36 z m -6,-1.14 h 5.59 l 9.63,-26.26 -4.85,-2 z"
+       id="path164" />
+    <path
+       class="cls-1"
+       d="M 61.2,26.44 A 0.54,0.54 0 0 1 60.99,26.39 L 35.76,15.94 a 0.57,0.57 0 0 1 0.44,-1 l 25.22,10.41 a 0.57,0.57 0 0 1 -0.22,1.09 z"
+       id="path166" />
+    <polyline
+       class="cls-1"
+       points="61.2 25.87 57.04 37.22 65.53 27.66 61.2 25.87"
+       id="polyline168" />
+    <path
+       class="cls-1"
+       d="m 57,37.79 a 0.6,0.6 0 0 1 -0.29,-0.08 0.58,0.58 0 0 1 -0.24,-0.68 l 4.16,-11.35 a 0.59,0.59 0 0 1 0.31,-0.33 0.56,0.56 0 0 1 0.44,0 l 4.33,1.79 a 0.6,0.6 0 0 1 0.34,0.4 A 0.57,0.57 0 0 1 66,28 l -8.53,9.6 A 0.59,0.59 0 0 1 57,37.79 Z m 4.49,-11.17 -2.93,8 6,-6.73 z"
+       id="path170" />
+    <path
+       class="cls-1"
+       d="m 34.81,62.44 -6.05,6.81 a 45.47,45.47 0 0 0 2.54,4.11 l 4.36,-11.88 z"
+       id="path172" />
+    <path
+       class="cls-1"
+       d="m 31.3,73.93 a 0.57,0.57 0 0 1 -0.46,-0.24 48.45,48.45 0 0 1 -2.58,-4.16 0.56,0.56 0 0 1 0.07,-0.65 L 35.24,61.1 A 0.57,0.57 0 0 1 36,61 a 0.55,0.55 0 0 1 0.24,0.68 l -4.4,11.88 a 0.58,0.58 0 0 1 -0.46,0.37 z m -1.85,-4.6 c 0.55,1 1.12,1.92 1.7,2.8 l 3,-8 z"
+       id="path174" />
+    <polygon
+       class="cls-1"
+       points="50.19,6.65 46.04,13.64 41.83,7.56 45.98,0.57 "
+       id="polygon176" />
+    <path
+       class="cls-1"
+       d="M 46,14.21 A 0.54,0.54 0 0 1 45.54,13.96 L 41.36,7.89 a 0.58,0.58 0 0 1 0,-0.62 l 4.15,-7 A 0.56,0.56 0 0 1 46,0 0.57,0.57 0 0 1 46.48,0.24 l 4.22,6.08 a 0.58,0.58 0 0 1 0,0.61 l -4.15,7 a 0.58,0.58 0 0 1 -0.47,0.28 z M 42.5,7.54 46,12.59 49.52,6.67 46,1.61 Z"
+       id="path178" />
+    <path
+       class="cls-1"
+       d="m 48.13,26.1 v 0 l -5.67,6.39 a 0.49,0.49 0 0 0 -0.13,0.33 v 36.94 a 0.49,0.49 0 0 0 0.86,0.32 l 0.14,-0.15 v 0 L 49,63.54 a 0.51,0.51 0 0 0 0.13,-0.33 V 26.27 a 0.5,0.5 0 0 0 -0.87,-0.33 z"
+       id="path180" />
+  </g>
+</svg>

nuxt.config.js

@@ -1,7 +1,7 @@
 export default {
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
-    title: 'kekkon',
+    title: '🙥 Irina & Spencer 🙧',
     htmlAttrs: {
       lang: 'en'
     },

pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <main>
-    <nav>
+    <nav v-if="guests">
       <img class="mark" :src="require(`@/assets/images/si_mark.svg`)" alt="">
       <button
         v-if="guests && guests.fields && guests.fields.Language"
@@ -29,6 +29,7 @@
       alt="wrongo-and-peanut"
     /> -->
     <video
+      v-if="!!guests"
       class="img--bkg"
       playsinline
       autoplay
@@ -40,28 +41,19 @@
       <!-- :poster="require(`@/assets/images/bkgs/poster.png`)" -->
       <!-- <source src="polina.webm" type="video/webm"> -->
       <source
+        v-if="!!guests"
         :src="require(`@/assets/images/bkgs/${this.$route.params.code}.mp4`)"
         type="video/mp4"
       />
     </video>
-    <!-- <video
-      class="img--bkg"
-      playsinline
-      autoplay
-      loop
-      poster="https://assets.codepen.io/6093409/river.mp4"
-      id="bgvid"
-      >-->
-    <!-- <source
-        :src="require(`@/assets/images/bkgs/${this.$route.params.code}.webm`)"
-        type="video/webm"
-      />
-      <source
-        :src="require(`@/assets/images/bkgs/${this.$route.params.code}.mp4`)"
-        type="video/mp4"
-      />
-    </video>-->
-    <div v-if="isPopupVisible" class="popup-wrapper">
+
+    <!-- :src="require(`@/assets/images/bkgs/${(guests && guests.fields && guests.fields.Code) ? guests.fields.Code + '.mp4' : 'pim.mp4'}`)" -->
+
+    <div class="empty" v-if="!guests">
+      What's the password?
+    </div>
+
+    <div v-if="isPopupVisible && this.$route.params.code" class="popup-wrapper">
       <div class="popup">
         <button class="x" @click="openPopup">
           <svg
@@ -100,15 +92,19 @@
           "
         >
           <p>
-            It took a while, but we eventually decided to cross our fingers and
-            plan a transatlantic wedding.
+            <strong>It took a while, but we eventually decided to cross our fingers and
+            plan a transatlantic wedding.</strong>
+          </p>
+          <p>
+            My fellow Americans, <br><br>The Netherlands is on the other
+            side of the world, and air travel is no walk-in-the-park these days.
+            Nonetheless: you're reading this because you're extremely important to
+            me, and we would LOVE to share this beautiful little country with you, if only for a few days!
+            <br><br>
+            -S
           </p>
           <p>
-            My fellow Americans, I know that the Netherlands is on the other
-            side of the world, and that this is a huge request. So here's the
-            thing: you're reading this because 1) you're extremely important to
-            me and 2) I would LOVE to show you where I've been living for the
-            last 2 years!
+            Mark your calendars: <em>August 18th, 2022</em>. Stay tuned for lots more details.
           </p>
         </div>
         <h1
@@ -230,40 +226,51 @@
 <script>
 export default {
   data: () => ({
-    guests: {},
+    guests: null,
     allGuests: [],
-    isPopupVisible: false
+    isPopupVisible: false,
+    fetchFields: [
+      'Names',
+      'Language',
+      'Status',
+      'Code'
+    ]
   }),
   async fetch () {
-    const res = await fetch(`https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest?filterByFormula=(Code='${this.$route.params.code}')`, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-        Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
-      }
-    })
+    if (this.$route.params.code) {
+      const res = await fetch(`https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest?filterByFormula=(Code='${this.$route.params.code}')${this.fetchFieldsString}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+          Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
+        }
+      })
 
-    const json = await res.json()
-    console.log(json)
-    this.guests = { ...await json.records[0] }
+      const json = await res.json()
 
-    const res2 = await fetch('https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest?filterByFormula=(IsActive=1)&sort[0][field]=Code&sort[0][direction]=asc', {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-        Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
-      }
-    })
-
-    const json2 = await res2.json()
-    console.log(json2)
-    const guestData = [...await json2 && json2.records]
-    this.allGuests = await guestData.map((guest) => {
-      return {
-        code: guest.fields.Code,
-        names: guest.fields.Names
+      if (await json.records[0]) {
+        this.guests = { ...await json.records[0] }
+        console.log(this.guests)
       }
-    })
+    }
+
+    // const res2 = await fetch('https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest?filterByFormula=(IsActive=1)&sort[0][field]=Code&sort[0][direction]=asc', {
+    //   method: 'GET',
+    //   headers: {
+    //     'Content-Type': 'application/x-www-form-urlencoded',
+    //     Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
+    //   }
+    // })
+
+    // const json2 = await res2.json()
+    // console.log(json2)
+    // const guestData = [...await json2 && json2.records]
+    // this.allGuests = await guestData.map((guest) => {
+    //   return {
+    //     code: guest.fields.Code,
+    //     names: guest.fields.Names
+    //   }
+    // })
   },
   methods: {
     openPopup () {
@@ -322,6 +329,15 @@ export default {
       const json = await res.json()
       this.guests = { ...await json }
     }
+  },
+  computed: {
+    fetchFieldsString () {
+      const vm = this
+      const array = vm.fetchFields.map((field) => {
+        return '&fields[]=' + field
+      })
+      return array.join('')
+    }
   }
 }
 </script>
@@ -363,16 +379,14 @@ main {
 }
 
 h1 {
-  font-size: 3rem;
+  font-size: 2.5rem;
   font-family: "kingthings_petrockregular", "Times New Roman", Times, serif;
   margin: 1rem 0 0 0;
   text-align: center;
 }
 
 p {
-  font-size: 1.5rem;
-  margin-left: 2rem;
-  margin-right: 2rem;
+  font-size: 1rem;
 }
 
 .img--bkg {
@@ -381,6 +395,18 @@ p {
   height: 100vh;
 }
 
+.empty {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--bkg);
+  color: var(--blue);
+  position: absolute;
+}
+
 .names {
   position: fixed;
   padding: 2rem;
@@ -439,7 +465,9 @@ nav {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: start;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .popup-wrapper::after {
@@ -463,6 +491,7 @@ nav {
   flex-direction: column;
   max-width: 60ch;
   align-items: center;
+  margin-top: 10vh;
 }
 
 small {

run.sh

@@ -1,10 +1,10 @@
-echo -e "\r\n\r\n\e[44m *** Removing Code Directory *** \e[44m\r\n"
-rm -r /usr/src/kekkon
-echo "\r\n\r\n\e[44m *** Making Code Directory *** \e[44m\r\n"
-mkdir -p /usr/src/kekkon
+# echo -e "\r\n\r\n\e[44m *** Removing Code Directory *** \e[44m\r\n"
+# rm -r /usr/src/kekkon
+# echo "\r\n\r\n\e[44m *** Making Code Directory *** \e[44m\r\n"
+# mkdir -p /usr/src/kekkon
 cd /usr/src
-echo "\r\n\r\n\e[44m *** Getting Code from Gitea *** \e[44m\r\n"
-git clone --depth 1 https://gitea.flylocal.us/spencer/kekkon.git
+# echo "\r\n\r\n\e[44m *** Getting Code from Gitea *** \e[44m\r\n"
+# git clone --depth 1 https://gitea.flylocal.us/spencer/kekkon.git
 cd kekkon
 echo "\r\n\r\n\e[44m *** Killing Docker Containers *** \e[44m\r\n"
 sudo docker kill $(docker ps -q)