First Attempt At Vanta

skewll · Dec 18, 2023 · a210ad1 · a210ad1
1 parent 8b88120
commit a210ad1
Show file tree

Hide file tree

Showing 24 changed files with 297 additions and 59 deletions.
diff --git a/components/Nav.vue b/components/Nav.vue
@@ -1,20 +1,57 @@
 <template>
-        <ul>
-        <li><NuxtLink to="/"><span class="icon">
-              <svg class="svg-inline--fa fa-heart fa-w-16 fa-fw" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="heart" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path></svg>
-          </span><span class="menu">Home</span></NuxtLink></li>
-        <li><NuxtLink to="/obituary"><span class="icon">
-          <svg class="svg-inline--fa fa-map fa-w-18 fa-fw" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="map" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M0 117.66v346.32c0 11.32 11.43 19.06 21.94 14.86L160 416V32L20.12 87.95A32.006 32.006 0 0 0 0 117.66zM192 416l192 64V96L192 32v384zM554.06 33.16L416 96v384l139.88-55.95A31.996 31.996 0 0 0 576 394.34V48.02c0-11.32-11.43-19.06-21.94-14.86z"></path></svg>
-          </span><span class="menu">Obituary</span></NuxtLink></li>
-        <li><NuxtLink to="/gallery"><span class="icon">
-          <svg class="svg-inline--fa fa-images fa-w-18 fa-fw" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="images" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M480 416v16c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V176c0-26.51 21.49-48 48-48h16v208c0 44.112 35.888 80 80 80h336zm96-80V80c0-26.51-21.49-48-48-48H144c-26.51 0-48 21.49-48 48v256c0 26.51 21.49 48 48 48h384c26.51 0 48-21.49 48-48zM256 128c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-96 144l55.515-55.515c4.686-4.686 12.284-4.686 16.971 0L272 256l135.515-135.515c4.686-4.686 12.284-4.686 16.971 0L512 208v112H160v-48z"></path></svg>
-          </span><span class="menu"><span>Photo </span>Gallery</span></NuxtLink></li>
-        <li><NuxtLink to="/guestbook"><span class="icon">
-          <svg class="svg-inline--fa fa-guestbook fa-w-20 fa-fw" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="hands-helping" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg=""><path fill="currentColor" d="M488 192H336v56c0 39.7-32.3 72-72 72s-72-32.3-72-72V126.4l-64.9 39C107.8 176.9 96 197.8 96 220.2v47.3l-80 46.2C.7 322.5-4.6 342.1 4.3 357.4l80 138.6c8.8 15.3 28.4 20.5 43.7 11.7L231.4 448H368c35.3 0 64-28.7 64-64h16c17.7 0 32-14.3 32-32v-64h8c13.3 0 24-10.7 24-24v-48c0-13.3-10.7-24-24-24zm147.7-37.4L555.7 16C546.9.7 527.3-4.5 512 4.3L408.6 64H306.4c-12 0-23.7 3.4-33.9 9.7L239 94.6c-9.4 5.8-15 16.1-15 27.1V248c0 22.1 17.9 40 40 40s40-17.9 40-40v-88h184c30.9 0 56 25.1 56 56v28.5l80-46.2c15.3-8.9 20.5-28.4 11.7-43.7z"></path></svg>
-          </span><span class="menu"><span>Sign </span>Guestbook</span></NuxtLink></li>
-      </ul>
+  <ul>
+    <li>
+      <NuxtLink to="/"><span class="icon">
+          <svg class="svg-inline--fa fa-heart fa-w-16 fa-fw" aria-hidden="true" focusable="false" data-prefix="fas"
+            data-icon="heart" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
+            <path fill="currentColor"
+              d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z">
+            </path>
+          </svg>
+        </span><span class="menu">Home</span></NuxtLink>
+    </li>
+    <li>
+      <NuxtLink to="/obituary"><span class="icon">
+          <svg class="svg-inline--fa fa-map fa-w-18 fa-fw" aria-hidden="true" focusable="false" data-prefix="fas"
+            data-icon="map" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
+            <path fill="currentColor"
+              d="M0 117.66v346.32c0 11.32 11.43 19.06 21.94 14.86L160 416V32L20.12 87.95A32.006 32.006 0 0 0 0 117.66zM192 416l192 64V96L192 32v384zM554.06 33.16L416 96v384l139.88-55.95A31.996 31.996 0 0 0 576 394.34V48.02c0-11.32-11.43-19.06-21.94-14.86z">
+            </path>
+          </svg>
+        </span><span class="menu">Obituary</span></NuxtLink>
+    </li>
+    <li>
+      <NuxtLink to="/gallery"><span class="icon">
+          <svg class="svg-inline--fa fa-images fa-w-18 fa-fw" aria-hidden="true" focusable="false" data-prefix="fas"
+          data-icon="images" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
+          <path fill="currentColor"
+            d="M480 416v16c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V176c0-26.51 21.49-48 48-48h16v208c0 44.112 35.888 80 80 80h336zm96-80V80c0-26.51-21.49-48-48-48H144c-26.51 0-48 21.49-48 48v256c0 26.51 21.49 48 48 48h384c26.51 0 48-21.49 48-48zM256 128c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-96 144l55.515-55.515c4.686-4.686 12.284-4.686 16.971 0L272 256l135.515-135.515c4.686-4.686 12.284-4.686 16.971 0L512 208v112H160v-48z">
+          </path>
+        </svg>
+      </span><span class="menu"><span>Photo </span>Gallery</span></NuxtLink>
+  </li>
+  <li>
+    <NuxtLink to="/guestbook"><span class="icon">
+        <svg class="svg-inline--fa fa-guestbook fa-w-20 fa-fw" aria-hidden="true" focusable="false" data-prefix="fas"
+          data-icon="hands-helping" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"
+          data-fa-i2svg="">
+          <path fill="currentColor"
+            d="M488 192H336v56c0 39.7-32.3 72-72 72s-72-32.3-72-72V126.4l-64.9 39C107.8 176.9 96 197.8 96 220.2v47.3l-80 46.2C.7 322.5-4.6 342.1 4.3 357.4l80 138.6c8.8 15.3 28.4 20.5 43.7 11.7L231.4 448H368c35.3 0 64-28.7 64-64h16c17.7 0 32-14.3 32-32v-64h8c13.3 0 24-10.7 24-24v-48c0-13.3-10.7-24-24-24zm147.7-37.4L555.7 16C546.9.7 527.3-4.5 512 4.3L408.6 64H306.4c-12 0-23.7 3.4-33.9 9.7L239 94.6c-9.4 5.8-15 16.1-15 27.1V248c0 22.1 17.9 40 40 40s40-17.9 40-40v-88h184c30.9 0 56 25.1 56 56v28.5l80-46.2c15.3-8.9 20.5-28.4 11.7-43.7z">
+          </path>
+        </svg>
+      </span><span class="menu"><span>Sign </span>Guestbook</span></NuxtLink>
+  </li>
+  <li>
+    <NuxtLink to="/testing"><span class="icon">
+        <svg class="svg-inline--fa fa-guestbook fa-w-20 fa-fw" aria-hidden="true" focusable="false" data-prefix="fas"
+          data-icon="hands-helping" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"
+          data-fa-i2svg="">
+          <path fill="currentColor"
+            d="M488 192H336v56c0 39.7-32.3 72-72 72s-72-32.3-72-72V126.4l-64.9 39C107.8 176.9 96 197.8 96 220.2v47.3l-80 46.2C.7 322.5-4.6 342.1 4.3 357.4l80 138.6c8.8 15.3 28.4 20.5 43.7 11.7L231.4 448H368c35.3 0 64-28.7 64-64h16c17.7 0 32-14.3 32-32v-64h8c13.3 0 24-10.7 24-24v-48c0-13.3-10.7-24-24-24zm147.7-37.4L555.7 16C546.9.7 527.3-4.5 512 4.3L408.6 64H306.4c-12 0-23.7 3.4-33.9 9.7L239 94.6c-9.4 5.8-15 16.1-15 27.1V248c0 22.1 17.9 40 40 40s40-17.9 40-40v-88h184c30.9 0 56 25.1 56 56v28.5l80-46.2c15.3-8.9 20.5-28.4 11.7-43.7z">
+          </path>
+        </svg>
+      </span><span class="menu"><span>This is a </span>Test</span></NuxtLink>
+  </li>
+</ul></template>
 
-</template>
-
-<style>
-</style>
+<style></style>
diff --git a/components/Vanta.vue b/components/Vanta.vue
@@ -0,0 +1,77 @@
+<template>
+    <div>
+        <div class="vanta-container" :id="vantaId">
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'VueVanta',
+    props: {
+        effect: {
+            type: String,
+            default: () => 'birds'
+        },
+        options: {
+            type: Object,
+            default: () => ({})
+        },
+        src: {
+            type: String,
+            default: () => 'js'
+        },
+        vantaId: {
+            type: String,
+            default: () => 'vanta-1'
+        }
+    },
+    beforeMount() {
+        this.setup()
+    },
+    methods: {
+        setup() {
+            // Normalize the url
+            const normalize = string =>
+                string.substr(-1) === '/'
+                    ? string.substr(0, string.length - 1)
+                    : string
+            const url = normalize(this.src)
+            // Create the script for threejs
+            const threejs = document.createElement('script')
+            threejs.async = true
+            threejs.defer = true
+            threejs.id = 'three'
+            // get proper script.
+            let effectsT = ['birds','fog','waves','clouds','clouds2','globe','net','cells','dots','rings','halo']
+            let effectsP = ['trunk','topology']
+            if (effectsT.includes(this.effect)) {
+                //use three.r134.min.js
+                threejs.src = `js/three.r134.min.js`
+            }
+            if (effectsP.includes(this.effect)) {
+                //use p5.min.js
+                threejs.src = `js/p5.min.js`
+            }
+            document.head.appendChild(threejs)
+
+            // Create the script for Vanta
+            threejs.onload = () => {
+                const vantaScript = document.createElement('script')
+                vantaScript.async = true
+                vantaScript.defer = true
+                vantaScript.id = 'vanta'
+                vantaScript.src = `${url}/vanta.${this.effect}.min.js`
+                document.head.appendChild(vantaScript)
+                vantaScript.onload = () => {
+                    window.VANTA[this.effect.toUpperCase()](
+                        Object.assign(this.options, {
+                            el: `#${this.vantaId}`
+                        })
+                    )
+                }
+            }
+        }
+    }
+}
+</script>
diff --git a/index.js b/index.js
@@ -5,17 +5,22 @@ const dir = './assets/gallery'
 const thumbdir = './assets/thumbs'
 const imagewidth = 1800
 
-if (fs.existsSync(dir)){
+// export default Vanta;
+// if (typeof window !== 'undefined' && window.Vue) {
+//     window.Vue.component('mc-vanta', Vanta);
+// }
+
+if (fs.existsSync(dir)) {
     fs.rmdirSync(dir, { recursive: true });
 }
-if (fs.existsSync(thumbdir)){
+if (fs.existsSync(thumbdir)) {
     fs.rmdirSync(thumbdir, { recursive: true });
 }
 
-if (!fs.existsSync(dir)){
+if (!fs.existsSync(dir)) {
     fs.mkdirSync(dir);
 }
-if (!fs.existsSync(thumbdir)){
+if (!fs.existsSync(thumbdir)) {
     fs.mkdirSync(thumbdir);
 }
 
@@ -29,49 +34,49 @@ glob("assets/images/*.+(png|jpg|jpeg|svg)", opt, async function (err, images) {
 
     for (const file of images) {
         //files.forEach(async function(file) {
-      
+
         let filenameold = file.replace('assets/images/', '')
         let filename = filenameold.toLowerCase().replace(/[^\w.]+/g, "_")
 
         //galleryImages.push('assets/gallery/' + filename)
 
         Jimp.read(file)
-        .then(jfile => {
-            if (jfile.bitmap.width > imagewidth) {
-                console.log('resizing ' + filename)
-                return jfile
-                .resize(imagewidth, Jimp.AUTO) // resize
-                .quality(60) // set JPEG quality
-                .write(dir + '/' + filename); // save
-            } else {
-                fs.copyFile(file, dir + '/' + filename, (err) => {
-                    if (err) throw err;
-                    console.log(filename + ' copied to gallery (smaller than ' + imagewidth + ')');
-                });
-            }
-        })
-        .catch(err => {
-            console.error(err);
-        });
+            .then(jfile => {
+                if (jfile.bitmap.width > imagewidth) {
+                    console.log('resizing ' + filename)
+                    return jfile
+                        .resize(imagewidth, Jimp.AUTO) // resize
+                        .quality(60) // set JPEG quality
+                        .write(dir + '/' + filename); // save
+                } else {
+                    fs.copyFile(file, dir + '/' + filename, (err) => {
+                        if (err) throw err;
+                        console.log(filename + ' copied to gallery (smaller than ' + imagewidth + ')');
+                    });
+                }
+            })
+            .catch(err => {
+                console.error(err);
+            });
 
         // Create thumbnails
         Jimp.read(file)
-        .then(jfile => {
-            width = 120
-            height = Jimp.AUTO
-            if(jfile.bitmap.height < jfile.bitmap.width) {
-                width = Jimp.AUTO
-                height = 120
-            }
-            return jfile
-            .resize(width, height, Jimp.RESIZE_BEZIER) // resize
-            .quality(60) // set JPEG quality
-            .write(thumbdir + '/' + filename); // save
-        })
-        .catch(err => {
-            console.error(err);
-        });
-       
+            .then(jfile => {
+                width = 120
+                height = Jimp.AUTO
+                if (jfile.bitmap.height < jfile.bitmap.width) {
+                    width = Jimp.AUTO
+                    height = 120
+                }
+                return jfile
+                    .resize(width, height, Jimp.RESIZE_BEZIER) // resize
+                    .quality(60) // set JPEG quality
+                    .write(thumbdir + '/' + filename); // save
+            })
+            .catch(err => {
+                console.error(err);
+            });
+
     }
 
 })

diff --git a/nuxt.config.js b/nuxt.config.js
@@ -1,19 +1,25 @@
 import { defineNuxtConfig } from '@nuxt/bridge'
 
+
 const name = 'Sean Paul Vaughn'
 const dates = 'May 17th 1986 - September 14th 2023'
 const fname = 'Sean'
 const uploadEmail = "upload@seanvaughn.com"
 const commentEmail = "comment@seanvaughn.com"
+const effect = "waves" // Vatna.js effect
+
+
+
+
 
 export default defineNuxtConfig({
+
   bridge: false,
   publicRuntimeConfig: {
     name: name,
     dates: dates,
     fname: fname,
     uploadEmail: uploadEmail,
-    uploadEmailLink: `mailto:${uploadEmail}&subject=Upload`,
     commentEmail: commentEmail
   },
   // Target (https://go.nuxtjs.dev/config-target)
@@ -36,9 +42,17 @@ export default defineNuxtConfig({
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
       { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,700&family=Pinyon+Script&display=swap' }
-    ]
+    ],
+    // script: [
+    //   {
+    //     type: 'text/javascript',
+    //     src: 'assets/js/vanta.js',
+    //     body: true
+    //   },
+    // ]
   },
 
+
   // Global CSS (https://go.nuxtjs.dev/config-css)
   css: [
   ],

diff --git a/package.json b/package.json
@@ -23,4 +23,3 @@
     "node": "^21"
   }
 }
-
diff --git a/pages/testing.vue b/pages/testing.vue
@@ -0,0 +1,71 @@
+<template>
+  <v-vanta effect="birds" :options=options>
+    <!-- CONTENT START -->
+    <h1 class="title">Obituary</h1>
+    <p>Sean Paul Vaughn, age 37, passed away unexpectedly on September 14, 2023, in Kettle Falls, WA. The son of Doyle
+      Vaughn Jr. and Lisa (Gumm) Vaughn Jr, Sean was born on May 17, 1986 in Great Falls, Montana.</p>
+
+    <p>The son of an airman, Sean’s family would relocate to Sicily when he was three for a short time, returning to
+      Airway Heights with his mother. Sean grew up in Airway Heights and loved hanging out with all of his friends at
+      the park.</p>
+
+    <p>In 2000, Sean and his mother would relocate to Kettle Falls, WA, where he would finish his education. Sean
+      returned to Airway Heights once he had finished his education, and here he would welcome two sons, Sylis and
+      Sage.
+    </p>
+
+    <p>Adventurous from his childhood, Sean was always at home doing anything outdoors. From exploring in the woods
+      and
+      climbing trees in his youth, to going out camping for days on end with little more than the clothing on his
+      back,
+      Sean found great joy in nature. Everything was an adventure with Sean; he loved digging for gold, kayaking, zip
+      lining, and jumping on the trampoline, whether he was with his friends, sons or by himself. He loved
+      landscaping,
+      especially helping his grandmother with her yard. In addition to his landscaping work, he also did various
+      construction and woodworking jobs throughout his adult years. Sean was a rock hound at heart!</p>
+
+    <p>Sean was preceded in death by his grandparents, Lola and Hank Gumm. He is survived by his parents, Lisa Vaughn
+      and Doyle Vaughn Jr.; and his sons, Sylis and Sage.</p>
+
+    <p>Please visit the on-line memorial and sign the guestbook at <a
+        href="https://www.danekasfuneralchapel.com/obituary/sean-vaughn">Danekas Funeral Chapel</a>.</p>
+
+    <!-- CONTENT END -->
+  </v-vanta>
+</template>
+
+<script>
+import VVanta from '~/static/js/vanta.js';
+export default {
+  components: { VVanta },
+  data() {
+    return {
+      options: {
+        //default
+        // mouseControls: true,
+        // touchControls: true,
+        // gyroControls: false,
+        // minHeight: 800.00,
+        // minWidth: 200.00,
+        // scale: 1.00,
+        // scaleMobile: 1.00,
+        //birds
+        mouseControls: true,
+        touchControls: true,
+        gyroControls: false,
+        minHeight: 800.00,
+        minWidth: 200.00,
+        scale: 1.00,
+        scaleMobile: 1.00,
+        birdSize: 0.70,
+        speedLimit: 3.00,
+        separation: 11.00,
+        alignment: 26.00,
+        quantity: 3.00
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss"></style>
diff --git a/static/js/p5.min.js b/static/js/p5.min.js
diff --git a/static/js/three.min.js b/static/js/three.min.js
diff --git a/static/js/three.r134.min.js b/static/js/three.r134.min.js
diff --git a/static/js/vanta.birds.min.js b/static/js/vanta.birds.min.js