Add inspection functionality

components/CodeBlock.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="block">
+    <div class="top">
+      <span class="label">{{ this.label }}</span>
+      <span class="copy" v-clipboard="() => code" v-clipboard:success="copy">
+        COPY
+        <transition name="copied">
+          <svg v-show="copied" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <polyline points="20 6 9 17 4 12"></polyline>
+          </svg>
+        </transition>
+      </span>
+    </div>
+
+    <pre v-highlightjs><code>{{ this.code }}</code></pre>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: String,
+    code: String,
+    copied: Boolean
+  },
+  methods: {
+    copy() {
+      this.$emit("copy");
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.block {
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+.top {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-bottom: 0.5em;
+
+  .label {
+    font-weight: 600;
+  }
+}
+
+.copy {
+  font-size: 0.8em;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  svg {
+    width: 1.5em;
+    margin-left: 0.5em;
+    fill: none;
+    stroke: #3cefff;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    transform-origin: center;
+  }
+}
+
+.copied-enter-active {
+  animation: copied 0.5s ease-in-out forwards;
+}
+
+@keyframes copied {
+  0% {
+    opacity: 0;
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.5);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+pre {
+  flex: 1;
+  padding: 1.5em;
+  overflow: auto;
+  background-color: hsl(237, 37%, 24%);
+
+  code {
+    font-family: "Roboto Mono", monospace;
+    font-size: 0.9em;
+  }
+}
+</style>

components/Effect.vue

@@ -1,9 +1,27 @@
 <template>
-  <div>
+  <div ref="box" @click="inspect">
     <slot></slot>
   </div>
 </template>
 
+<script>
+export default {
+  props: {
+    type: String
+  },
+  methods: {
+    inspect(e) {
+      const self = this.$refs.box === e.target;
+
+      // don't accept clicks on an input
+      if (this.type === "input" && !self) return;
+
+      this.$emit("inspect");
+    }
+  }
+};
+</script>
+
 <style lang="scss" scoped>
 div {
   display: flex;

components/Effects.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="grid">
-    <Effect v-for="effect in Object.values(this.effects)" :key="effect.name">
+    <Effect
+      v-for="effect in Object.values(this.effects)"
+      :key="effect.name"
+      :type="effect.type"
+      @inspect="$emit('inspect', effect.name)"
+    >
       <component :is="effect.name"/>
     </Effect>
   </div>

components/Inspect.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="inspect" @click.self="$emit('close')">
+    <div class="src">
+      <CodeBlock
+        class="html"
+        label="HTML"
+        :code="this.src.html"
+        @copy="onHtmlCopy"
+        :copied="htmlCopied"
+      />
+      <CodeBlock
+        class="css"
+        label="CSS"
+        :code="this.src.css"
+        @copy="onCssCopy"
+        :copied="cssCopied"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import CodeBlock from "~/components/CodeBlock";
+
+export default {
+  components: { CodeBlock },
+  props: {
+    src: Object
+  },
+  data() {
+    return {
+      htmlCopied: false,
+      cssCopied: false
+    };
+  },
+  methods: {
+    onHtmlCopy() {
+      this.htmlCopied = true;
+      this.cssCopied = false;
+    },
+    onCssCopy() {
+      this.cssCopied = true;
+      this.htmlCopied = false;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.inspect {
+  z-index: 999;
+  display: flex;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: hsla(0, 0%, 0%, 0.4);
+  padding: 2em;
+}
+
+.src {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  background-color: hsla(237, 37%, 24%, 0.8);
+  padding: 1em;
+  margin: auto;
+}
+
+.html {
+  width: 100%;
+  height: 20%;
+  margin-bottom: 1em;
+}
+
+.css {
+  width: 100%;
+  height: 80%;
+}
+
+// Responsive styles
+
+@media (min-width: "640px") {
+  .src {
+    max-width: 450px;
+  }
+}
+
+@media (min-width: "768px") {
+  .src {
+    max-width: 500px;
+    padding: 1.5em;
+  }
+
+  .html {
+    margin-bottom: 1.5em;
+  }
+}
+
+@media (min-width: "1024px") {
+  .inspect {
+    padding: 2.5em;
+  }
+
+  .src {
+    max-width: 550px;
+    padding: 2em;
+  }
+
+  .html {
+    margin-bottom: 2em;
+  }
+}
+</style>