nicwands · nicwands · Aug 23, 2021 · Aug 23, 2021 · Aug 23, 2021 · Aug 24, 2021
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Rumfoords
+# Code Study Boilerplate
 
 **Local Development**
 

diff --git a/app.html b/app.html
@@ -1,10 +1,3 @@
-<!--
-    /* WEBSITE CREDITS */
-
-    Website Design / Development: CTHDRL
-    Contact: build@cthdrl.co
-    Site: https://cthdrl.co
--->
 <!DOCTYPE html>
 <html {{ HTML_ATTRS }}>
     <head {{ HEAD_ATTRS }}>

diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss
@@ -1,5 +1,5 @@
 @import 'vars';
-@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
 
 html {
     font-size: 16px;
@@ -12,7 +12,7 @@ body {
     --black: #000000;
     --white: #ffffff;
 
-    --font-sans: 'Poppins', sans-serif;
+    --font-sans: 'IBM Plex Sans', sans-serif;
     --font-serif: 'EB Garamond', serif;
 
     @include fontSize(16px);
@@ -107,20 +107,15 @@ a {
     path {
         transition: fill 0.3s;
     }
-
-    @include hover {
-        color: var(--white);
-
-        path {
-            fill: var(--white);
-        }
+    &:hover {
+        text-decoration: underline;
     }
 }
 
 .contained {
     padding-right: var(--margin);
     padding-left: var(--margin);
-    // max-width: 1380px;
+    max-width: 1200px;
     margin-right: auto;
     margin-left: auto;
 }

diff --git a/components/LoadingSpinner.vue b/components/LoadingSpinner.vue
@@ -0,0 +1,32 @@
+<template>
+    <svg
+        class="loading-spinner"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        style="margin: auto; display: block"
+        width="18px"
+        height="18px"
+        viewBox="0 0 100 100"
+        preserveAspectRatio="xMidYMid"
+    >
+        <circle
+            cx="50"
+            cy="50"
+            r="40"
+            stroke-width="4"
+            stroke="currentColor"
+            stroke-dasharray="62 62"
+            fill="none"
+            stroke-linecap="round"
+        >
+            <animateTransform
+                attributeName="transform"
+                type="rotate"
+                repeatCount="indefinite"
+                dur="1s"
+                keyTimes="0;1"
+                values="0 50 50;360 50 50"
+            ></animateTransform>
+        </circle>
+    </svg>
+</template>
diff --git a/components/RenderSettings.vue b/components/RenderSettings.vue
@@ -0,0 +1,95 @@
+<template>
+    <div class="render-settings">
+        <!-- LOADING -->
+        <div v-if="loading">
+            <loading-spinner />
+            <p>RENDERING...</p>
+        </div>
+
+        <!-- ERROR -->
+        <p v-else-if="error">An error has occured</p>
+
+        <!-- FINAL IMAGE -->
+        <a
+            v-else-if="!loading && renderImage"
+            :href="renderImage"
+            download="houdini-render.png"
+        >
+            <img :src="renderImage" />
+        </a>
+
+        <!-- SETTINGS -->
+        <div v-else class="settings">
+            <input type="range" min="0" max="50" v-model="noiseOffset" />
+            <p>Noise Offset: {{ noiseOffset }}</p>
+            <button @click="submitRender">RENDER</button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            noiseOffset: 0,
+            renderImage: null,
+            loading: false,
+            error: false,
+        }
+    },
+    methods: {
+        async submitRender() {
+            this.loading = true
+
+            try {
+                // const backendUrl = 'http://localhost:8008/render'
+                const backendUrl = 'http://panola.ddns.net:5000/render'
+                const blob = await fetch(backendUrl, {
+                    method: 'POST',
+                    body: JSON.stringify({
+                        noise_offset: this.noiseOffset,
+                    }),
+                }).then((response) => {
+                    return response.blob()
+                })
+
+                this.renderImage = URL.createObjectURL(blob)
+                this.loading = false
+            } catch (err) {
+                console.error(err)
+                this.error = true
+                this.loading = false
+            }
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+.render-settings {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .settings {
+        input {
+            display: block;
+        }
+        button {
+            background: var(--black);
+            color: var(--white);
+            padding: 5px 20px;
+            border: 1px solid var(--black);
+            transition: background 300ms ease, color 300ms ease;
+            display: block;
+            margin: 20px auto;
+
+            &:hover {
+                background: var(--white);
+                color: var(--black);
+            }
+        }
+    }
+}
+</style>
diff --git a/components/StudyBody.vue b/components/StudyBody.vue
@@ -0,0 +1,19 @@
+<template>
+    <section class="study-body">
+        <render-settings />
+    </section>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss">
+.study-body {
+    border: 1px solid var(--black);
+    padding: 20px;
+    box-sizing: border-box;
+    margin-top: 20px;
+    position: relative;
+}
+</style>
diff --git a/components/ThreeBoilerplate.vue b/components/ThreeBoilerplate.vue
diff --git a/components/svg/facebook-clipped.vue b/components/svg/facebook-clipped.vue
@@ -0,0 +1,47 @@
+<template>
+    <svg
+        ref="svgEl"
+        width="28"
+        height="29"
+        viewBox="0 0 28 29"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <defs>
+            <clipPath
+                id="facebookClip"
+                clipPathUnits="objectBoundingBox"
+                :transform="clipTransform"
+            >
+                <path
+                    d="M27.7134 14.5664C27.7134 6.91357 21.5096 0.709717 13.8567 0.709717C6.20386 0.709717 0 6.91357 0 14.5664C0 21.4826 5.06717 27.2153 11.6916 28.2548V18.5719H8.17329V14.5664H11.6916V11.5136C11.6916 8.04078 13.7604 6.12249 16.9255 6.12249C18.4411 6.12249 20.0273 6.39313 20.0273 6.39313V9.80318H18.28C16.5588 9.80318 16.0218 10.8714 16.0218 11.9683V14.5664H19.8649L19.2505 18.5719H16.0218V28.2548C22.6462 27.2153 27.7134 21.4826 27.7134 14.5664Z"
+                />
+            </clipPath>
+        </defs>
+    </svg>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            svg: {},
+        }
+    },
+    mounted() {
+        this.svg = this.$refs.svgEl
+    },
+    computed: {
+        xScale() {
+            return 1 / parseInt(this.svg.getAttribute('width'))
+        },
+        yScale() {
+            return 1 / parseInt(this.svg.getAttribute('height'))
+        },
+        clipTransform() {
+            if (!this.svg.getAttribute) return ''
+            return `scale(${this.xScale}, ${this.yScale})`
+        },
+    },
+}
+</script>
diff --git a/components/svg/social/social-facebook.vue b/components/svg/social/social-facebook.vue
@@ -1,5 +1,6 @@
 <template>
     <svg
+        id="facebook"
         width="28"
         height="29"
         viewBox="0 0 28 29"
@@ -11,4 +12,4 @@
             fill="white"
         />
     </svg>
-</template>
+</template>
diff --git a/components/svg/social/social-instagram.vue b/components/svg/social/social-instagram.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="instagram"
         width="29"
         height="29"
         viewBox="0 0 29 29"

diff --git a/components/svg/social/social-linkedin.vue b/components/svg/social/social-linkedin.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="linkedIn"
         class="svg-social-linkedin"
         xmlns="http://www.w3.org/2000/svg"
         width="21.639"

diff --git a/components/svg/social/social-mail.vue b/components/svg/social/social-mail.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="mail"
         class="svg-social-mail"
         xmlns="http://www.w3.org/2000/svg"
         width="22.475"

diff --git a/components/svg/social/social-spotify.vue b/components/svg/social/social-spotify.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="spotify"
         class="svg-social-spotify"
         xmlns="http://www.w3.org/2000/svg"
         width="21.622"