From e1b122e6593e1e5d584ba0160febef2237703efe Mon Sep 17 00:00:00 2001
From: Dave Berning <dberning@walkerdunlop.com>
Date: Tue, 1 Feb 2022 23:17:09 -0500
Subject: [PATCH] added new theme and articles

---
 components/ThemePicker.vue | 99 +++++++++++++++++++++++---------------
 data/theme-colors.ts       | 38 +++++++++++++--
 data/writing.ts            | 69 ++++++++++++++++++++++----
 pages/index.vue            | 53 +++++++++++---------
 pages/writing.vue          | 55 ++++++++++++++-------
 types/theme.ts             |  1 +
 6 files changed, 219 insertions(+), 96 deletions(-)

diff --git a/components/ThemePicker.vue b/components/ThemePicker.vue
index f80ad87..922a2e4 100644
--- a/components/ThemePicker.vue
+++ b/components/ThemePicker.vue
@@ -1,62 +1,83 @@
 <template>
   <ul>
-    <li v-for="(theme, i) in listOfThemes" :key="i" @click="changeTheme(theme.name)">
-      <span :class="{active: $store.state.theme === theme.name}" :style="`background: ${theme.color}`" />
+    <li
+      v-for="(theme, i) in listOfThemes"
+      :key="i"
+      :class="{active: $store.state.theme === theme.name}"
+      @click="changeTheme(theme.name)">
+      <img v-if="theme.image" :src="`images/${theme.image}`" alt="theme logo">
+      <span v-else :style="`background: ${theme.color}`" />
     </li>
   </ul>
 </template>
 
 <script lang="ts">
-  import Vue from 'vue'
-  import { listOfThemes } from '@/data/theme-colors'
-  import { ThemeSwatch } from '~/types/theme'
-
-  export default Vue.extend({
-    data() {
-      return {
-        listOfThemes: listOfThemes as ThemeSwatch[]
-      }
-    },
-    methods: {
-      changeTheme(theme: string): void {
-        this.$store.dispatch('changeTheme', theme)
-      }
+import Vue from 'vue'
+import { listOfThemes } from '@/data/theme-colors'
+import { ThemeSwatch } from '~/types/theme'
+
+export default Vue.extend({
+  data() {
+    return {
+      listOfThemes: listOfThemes as ThemeSwatch[]
+    }
+  },
+  methods: {
+    changeTheme(theme: string): void {
+      this.$store.dispatch('changeTheme', theme)
     }
-  })
+  }
+})
 </script>
 
 <style lang="scss" scoped>
-  ul {
-    position: absolute;
-    left: 1rem;
-    bottom: 3rem;
-    display: none;
-    width: 25px;
-    z-index: 101;
-
-    @media screen and (min-width: 1025px) {
-      display: block;
-    }
+ul {
+  position: absolute;
+  z-index: 101;
+  bottom: 3rem;
+  left: 1rem;
+  display: none;
+  width: 25px;
 
-    li:hover {
-      cursor: pointer;
+  @media screen and (min-width: 1025px) {
+    display: block;
+  }
+
+  li {
+    width: 35px;
+
+    img {
+      width: 20px;
+      margin: 0 auto;
     }
 
-    li span {
+    span {
       display: block;
       width: 15px;
       height: 15px;
-      border-radius: 50%;
-      border: 1px solid lighten(#000000, 15%);
       margin: 1rem auto 0 auto;
       transition: all .2s ease;
+      border: 1px solid lighten(#000000, 15%);
+      border-radius: 50%;
+    }
+  }
+
+  li:hover {
+    cursor: pointer;
+  }
+
+  li.active {
+    span {
+      width: 25px;
+      height: 25px;
+      transition: all .2s ease;
+      border: 4px solid #000000;
+    }
 
-      &.active {
-        border: 4px solid #000000;
-        width: 25px;
-        height: 25px;
-        transition: all .2s ease;
-      }
+    img {
+      width: 35px;
+      height: auto;
     }
   }
+}
 </style>
diff --git a/data/theme-colors.ts b/data/theme-colors.ts
index eef4cf2..20ea68b 100644
--- a/data/theme-colors.ts
+++ b/data/theme-colors.ts
@@ -35,16 +35,44 @@ const purpleTheme: Theme = {
   textColorDark: `#2a1e2b`
 }
 
+const bengalsTheme: Theme = {
+  background: lightenDarkenColor('#cb653a', 0),
+  backgroundDarker: lightenDarkenColor('#cb653a', -20), // darken 7% of background color
+  backgroundLighter: lightenDarkenColor('#cb653a', 15), // Lighten 6% of background color
+  textColorDark: `#000000`
+}
+
 export const listOfThemes: ThemeSwatch[] = [ // Order of swatches
-  { name: 'default', color: defaultTheme.background },
-  { name: 'green', color: greenTheme.background },
-  { name: 'blue', color: blueTheme.background },
-  { name: 'purple', color: purpleTheme.background },
-  { name: 'red', color: redTheme.background }
+  {
+    name: 'bengals',
+    color: bengalsTheme.background,
+    image: 'bengals-logo.svg',
+  },
+  {
+    name: 'default',
+    color: defaultTheme.background
+  },
+  {
+    name: 'green',
+    color: greenTheme.background
+  },
+  {
+    name: 'blue',
+    color: blueTheme.background
+  },
+  {
+    name: 'purple',
+    color: purpleTheme.background
+  },
+  {
+    name: 'red',
+    color: redTheme.background
+  }
 ]
 
 export function getThemeColors(theme: string): Theme {
   if (theme === 'red') return redTheme
+  else if (theme === 'bengals') return bengalsTheme
   else if (theme === 'green') return greenTheme
   else if (theme === 'blue') return blueTheme
   else if (theme === 'purple') return purpleTheme
diff --git a/data/writing.ts b/data/writing.ts
index d986615..4bb46ef 100644
--- a/data/writing.ts
+++ b/data/writing.ts
@@ -2,18 +2,53 @@ import { Writing } from '@/types'
 
 export const writing: Writing[] = [
   {
-    title: `Vue.js: Understanding It's Tools and Ecosystem`,
-    date: `October 2018`,
-    featured: true,
-    type: `Book`,
-    to: `https://www.amazon.com/Vue-Js-Understanding-Its-Tools-Ecosystem/dp/9388425022`
+    title: `How To Debug Components, State, and Events with Vue.js Devtools`,
+    date: `January 25, 2022`,
+    featured: false,
+    type: `Digital Ocean`,
+    to: `https://www.digitalocean.com/community/tutorials/how-to-debug-components-state-and-events-with-vue-js-devtools`
   },
   {
-    title: `Creating Interfaces With Bulma`,
-    date: `February 2018`,
-    featured: true,
-    type: `Book`,
-    to: `https://www.amazon.com/Creating-Interfaces-Bulma-Jeremy-Thomas-ebook/dp/B079M1BJG4/ref=sr_1_1?keywords=creating+interfaces+with+bulma&qid=1566873504&s=books&sr=1-1`
+    title: `How To Make Your Vue.js Application DRY with Slots, Mixins, and Composition API`,
+    date: `December 2, 2021`,
+    featured: false,
+    type: `Digital Ocean`,
+    to: `https://www.digitalocean.com/community/tutorials/how-to-make-your-vue-js-application-dry-with-slots-mixins-and-composition-api`
+  },
+  {
+    title: `How To Manage State in a Vue.js Application with Vuex`,
+    date: `September 30, 2021`,
+    featured: false,
+    type: `Digital Ocean`,
+    to: `https://www.digitalocean.com/community/tutorials/how-to-manage-state-in-a-vue-js-application-with-vuex`
+  },
+  {
+    title: `How To Use Built-In and Custom Directives in Vue.js`,
+    date: `August 12, 2021`,
+    featured: false,
+    type: `Digital Ocean`,
+    to: `https://www.digitalocean.com/community/tutorials/how-to-use-built-in-and-custom-directives-in-vue-js`
+  },
+  {
+    title: `How To Create User Interactions with Events in Vue`,
+    date: `May 28, 2021`,
+    featured: false,
+    type: `Digital Ocean`,
+    to: `https://www.digitalocean.com/community/tutorials/how-to-create-user-interactions-with-events-in-vue`
+  },
+  {
+    title: `How To Create Reusable Blocks of Code with Vue Single-File Components`,
+    date: `April 7, 2021`,
+    featured: false,
+    type: `Digital Ocean`,
+    to: `https://www.digitalocean.com/community/tutorials/how-to-create-reusable-blocks-of-code-with-vue-single-file-components`
+  },
+  {
+    title: `How To Navigate Between Views with Vue Router`,
+    date: `March 22, 2021`,
+    featured: false,
+    type: `Digital Ocean`,
+    to: `https://www.digitalocean.com/community/tutorials/how-to-navigate-between-views-with-vue-router`
   },
   {
     title: `How To Use Vue.js Environment Modes with a Node.js Mock Data Layer`,
@@ -43,6 +78,13 @@ export const writing: Writing[] = [
     type: `Digital Ocean`,
     to: `https://www.digitalocean.com/community/tutorials/vuejs-using-typescript-with-vue`
   },
+  {
+    title: `Vue.js: Understanding It's Tools and Ecosystem`,
+    date: `October 2018`,
+    featured: true,
+    type: `Book`,
+    to: `https://www.amazon.com/Vue-Js-Understanding-Its-Tools-Ecosystem/dp/9388425022`
+  },
   {
     title: `Getting Started with Server-Side Rendering Using Nuxt.js`,
     date: `April 16, 2018`,
@@ -57,6 +99,13 @@ export const writing: Writing[] = [
     type: `Digital Ocean`,
     to: `https://www.digitalocean.com/community/tutorials/vuejs-implementing-infinite-scroll`
   },
+  {
+    title: `Creating Interfaces With Bulma`,
+    date: `February 2018`,
+    featured: true,
+    type: `Book`,
+    to: `https://www.amazon.com/Creating-Interfaces-Bulma-Jeremy-Thomas-ebook/dp/B079M1BJG4/ref=sr_1_1?keywords=creating+interfaces+with+bulma&qid=1566873504&s=books&sr=1-1`
+  },
   {
     title: `Using Chart.js with Vue.js`,
     date: `January 28, 2018`,
diff --git a/pages/index.vue b/pages/index.vue
index e8ffbe0..e0f8d4e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,17 +3,22 @@
     <div class="wrapper">
       <div class="content">
         <picture>
-          <source ref="image" :srcset="`images/compressed/dave-optimized-sm-${$store.state.theme}.jpg`"
-                  media="(min-width: 1335px)">
-          <img src="images/dave-mobile.jpg" alt="PP">
+          <source
+            ref="image"
+            :srcset="`images/compressed/dave-optimized-sm-${$store.state.theme}.jpg`"
+            media="(min-width: 1335px)">
+          <img alt="PP" src="images/dave-mobile.jpg">
         </picture>
         <div>
           <theme-text tag="h1">{{ about.firstName }} {{ about.lastName }}</theme-text>
           <theme-text tag="h2">{{ about.role }} from {{ about.city }}, {{ about.state }}</theme-text>
-          <theme-text tag="p" class="left">
-            Photography by <a href="http://jmanstudios.com" target="_blank" :style="`${$store.getters.darkTextColor};`">Jason Bayer</a>
+          <theme-text class="left" tag="p">
+            Photography by
+            <a :style="`${$store.getters.darkTextColor};`" href="http://jmanstudios.com" target="_blank">Jason Bayer</a>
+          </theme-text>
+          <theme-text class="right" tag="p">
+            Copyright &copy {{ new Date().getFullYear() }}. All Rights Reserved.
           </theme-text>
-          <theme-text tag="p" class="right">Copyright &copy {{ new Date().getFullYear() }}. All Rights Reserved.</theme-text>
           <navigation :navigation="navigation" />
           <social-media-icons :social-media="socialMedia" />
         </div>
@@ -112,10 +117,10 @@ h2 {
 }
 
 p {
-  position: absolute;
   font-size: .75rem;
-  color: #cccccc;
+  position: absolute;
   bottom: 1rem;
+  color: #cccccc;
 }
 
 p.left {
@@ -128,12 +133,12 @@ p.left {
 }
 
 p.right {
-  left: 0;
   right: 0;
+  left: 0;
 
   @media screen and (min-width: 1400px) {
-    left: unset;
     right: 1rem;
+    left: unset;
   }
 }
 
@@ -158,15 +163,15 @@ ul li {
 }
 
 .wrapper {
+  position: relative;
+  z-index: -1;
   display: flex;
-  justify-content: flex-end;
   align-items: center;
+  justify-content: flex-end;
   max-width: 2000px;
-  margin: 0 auto;
   height: 100vh;
-  position: relative;
+  margin: 0 auto;
   padding: 2rem;
-  z-index: -1;
 
   @media screen and (min-width: 1760px) {
     padding: 0 16rem;
@@ -177,12 +182,12 @@ ul li {
   }
 
   .content {
-    margin-right: 0;
     width: 100%;
+    margin-right: 0;
 
     @media screen and (min-width: 1335px) {
-      margin-right: 1rem;
       width: auto;
+      margin-right: 1rem;
     }
 
     @media screen and (min-width: 1400px) {
@@ -203,10 +208,10 @@ ul li {
   }
 
   img {
+    z-index: -1;
     width: 150px;
-    border-radius: 100%;
     border: 5px solid #3e9e91;
-    z-index: -1;
+    border-radius: 100%;
 
     @media screen and (min-width: 812px) {
       width: 100px;
@@ -217,16 +222,16 @@ ul li {
     }
 
     @media screen and (min-width: 1336px) {
+      font-size: 8rem;
       position: absolute;
-      width: 100%;
       top: 5px;
-      -webkit-transform-style: preserve-3d;
-      border: none;
-      border-radius: unset;
+      left: 3rem;
       display: block;
-      font-size: 8rem;
+      width: 100%;
       max-width: 600px;
-      left: 3rem;
+      border: none;
+      border-radius: unset;
+      -webkit-transform-style: preserve-3d;
     }
 
     @media screen and (min-width: 1400px) {
diff --git a/pages/writing.vue b/pages/writing.vue
index 62f3a33..8bcb3e9 100644
--- a/pages/writing.vue
+++ b/pages/writing.vue
@@ -1,15 +1,21 @@
 <template>
   <modal-content>
     <h1>Writing</h1>
+    <p>{{ numberOfArticles }} Articles / {{ numberOfBooks }} Books</p>
     <div class="is-grid">
-      <a class="is-col-6-md is-col-4-xl" v-for="(writing, i) in writings" :key="i" :href="writing.to"
-         :style="$store.getters.darkBkgColor">
+      <a
+        v-for="(writing, i) in writings"
+        :key="i"
+        :href="writing.to"
+        :style="$store.getters.darkBkgColor"
+        class="is-col-6-md is-col-4-xl">
         <h2>{{ writing.title }}</h2>
         <ul class="is-grid has-col-2">
-          <li class="is-col-1" :style="$store.getters.textColor">{{ writing.date }}</li>
+          <li :style="$store.getters.textColor" class="is-col-1">{{ writing.date }}</li>
           <li class="is-col-1">
-            <span :class="{ book: isBook(writing) }"
-                  :style="isBook(writing) ? bookButtonStyles : $store.getters.textColor">
+            <span
+              :class="{ book: isBook(writing) }"
+              :style="isBook(writing) ? bookButtonStyles : $store.getters.textColor">
               {{ isBook(writing) ? 'Buy Book' : writing.type }}
             </span>
           </li>
@@ -35,6 +41,12 @@ export default Vue.extend({
   computed: {
     bookButtonStyles(): string {
       return `background: ${getThemeColors(this.$store.state.theme).background}`
+    },
+    numberOfBooks(): number {
+      return this.writings.filter(writing => writing.type === 'Book')?.length || 0
+    },
+    numberOfArticles(): number {
+      return this.writings.filter(writing => writing.type !== 'Book')?.length || 0
     }
   },
   methods: {
@@ -55,8 +67,8 @@ export default Vue.extend({
 <style lang="scss" scoped>
 a {
   padding: 2rem 2rem 2.5rem 2rem;
-  border-radius: 4px;
   text-decoration: none;
+  border-radius: 4px;
 
   h2 {
     font-size: 1.25rem;
@@ -70,21 +82,23 @@ a {
   }
 
   ul {
-    padding: 0 2rem;
     position: absolute !important;
     bottom: 1rem;
-    width: 100%;
     left: 0;
+    width: 100%;
+    padding: 0 2rem;
   }
 
-    ul li,
-    ul li span { color: #fff !important; }
+  ul li,
+  ul li span {
+    color: #ffffff !important;
+  }
 
   ul li {
-    margin: 2rem 0 0 0;
     font-style: italic;
     display: flex;
     align-self: center;
+    margin: 2rem 0 0 0;
 
     &:last-child {
       justify-self: end;
@@ -92,12 +106,17 @@ a {
   }
 }
 
-  .book {
-    background: #3e9e91;
-    display: inline-block;
-    padding: .5rem 1rem;
-    color: #ffffff;
-    border-radius: 4px;
-  }
+.book {
+  display: inline-block;
+  padding: .5rem 1rem;
+  color: #ffffff;
+  border-radius: 4px;
+  background: #3e9e91;
+}
 
+p {
+  font-size: 1.25rem;
+  margin: 0;
+  text-align: right !important;
+}
 </style>
diff --git a/types/theme.ts b/types/theme.ts
index 6aaf0c8..9f50c9e 100644
--- a/types/theme.ts
+++ b/types/theme.ts
@@ -8,4 +8,5 @@ export interface Theme {
 export interface ThemeSwatch {
   name: string,
   color: string
+  image?: string
 }