Some website updates + compare component

package.json

@@ -48,7 +48,8 @@
     "vue-codemirror": "^4.0.6",
     "vue-faq-accordion": "^1.2.1",
     "vue-scrollTo": "^2.4.1",
-    "vue-social-sharing": "^2.4.6"
+    "vue-social-sharing": "^2.4.6",
+    "vue-twentytwenty": "^0.6.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.11.0",

src/App.vue

@@ -23,19 +23,7 @@
           :xs="22"
           :sm="18"
         >
-          <p class="columns">
-            Victor Mono is a free programming font with optional
-            <em>semi-connected cursive italics</em>,
-            symbol ligatures (!=, ->>, =>, ===, &lt;=, &gt;=, ++)
-            and Latin, Cyrillic and Greek characters.
-            <br><br>
-            It was drawn from scratch
-            <a
-              v-scroll-to="'#why'"
-              href="javascript:void(0)"
-            >because there just wasn't any</a>
-            free or paid font that I found both readable, effective and elegant.
-            <br><br>
+          <p class="large">
             <a
               v-if="theme === 'dark'"
               :href="stylesDark"
@@ -56,27 +44,14 @@
                 class="styles-image light"
               >
             </a>
+            Victor Mono is a free programming font with optional
+            <em>semi-connected cursive italics</em>,
+            symbol ligatures (!=, ->>, =>, ===, &lt;=, &gt;=, ++)
+            and Latin, Cyrillic and Greek characters.
+            <br><br>
             The typeface is clean, crisp and narrow, with a large x-height and clear punctuation,
             making it legible and ideal for code. It comes in seven weights,
             and is available in Roman, <em>Italic</em> and <em class="alt">Oblique</em>.
-            <br><br>
-          </p>
-          <p class="centre">
-            <em>
-              If you want to say thanks, any
-              <a
-                href="javascript:void(0)"
-                class="donate"
-                @click="paypal"
-              >PayPal</a>
-              or
-              <a
-                href="javascript:void(0)"
-                class="donate"
-                @click="patreon"
-              >Patreon</a>
-              donation is very welcome.
-            </em>
           </p>
         </el-col>
       </el-row>
@@ -112,25 +87,6 @@
           />
         </el-col>
       </el-row>
-      <el-row
-        type="flex"
-        justify="center"
-      >
-        <el-col
-          :xs="22"
-        >
-          <p class="small centre">
-            <em>Test and compare free programming fonts on
-              <a
-                target="_blank"
-                href="https://app.programmingfonts.org#victor-mono"
-              >
-                app.programmingfonts.org</a>
-            </em>
-            ⭐️
-          </p>
-        </el-col>
-      </el-row>
     </div>
     <div
       ref="ligatures"
@@ -194,6 +150,11 @@
       </el-row>
     </div>
 
+    <HeroImage
+      image="glyphs"
+      :theme="theme"
+    />
+
     <div class="content alternate-bg">
       <div
         id="why"
@@ -215,16 +176,13 @@
           :sm="18"
         >
           <p class="columns">
-            When it comes to programming fonts, I prefer something strict, readable and relatively
-            condensed for the code proper, complemented with a more
-            <em>informal, flowing and human style</em>
+            When it comes to programming fonts, I prefer something thin, crisp
+            and relatively condensed for the code proper,
+            complemented with a more <em>informal, flowing and human style</em>
             for things like comments and reserved keywords.
             <br><br>
-            I've tried lots of alternatives, each with their strengths (Operator Mono: the pricey
-            and hip original, Dank Mono: the cheaper one with a wide, younger look, Fira
-            Code with the ligatures I use plus a zillion more, compressed and endlessly
-            customisable Pragmata or Monoid - the list goes on). However, I always ended up
-            rejecting the fonts I tried because something didn't look right to me:
+            In the past, I always ended up looking for something else after
+            using a font for a while, because something didn't look right to me:
             <ul>
               <li>No cursive italics</li>
               <li>Regular/Roman style was not to my taste</li>
@@ -239,8 +197,8 @@
               <li>Combined two fonts too different in style</li>
               <li>Very expensive</li>
             </ul>
-            So eventually, I started making something myself. The resulting typeface, although still
-            a work in progress, feels right to me.
+            So eventually, I started sketching and designing something myself.
+            The resulting typeface, although still a work in progress, feels right to me.
             <br><br>
             You might like it as well. That's brilliant! You might not. That's also fine: use a font
             that works for you. 😛
@@ -248,11 +206,10 @@
         </el-col>
       </el-row>
     </div>
-    <HeroImage
-      image="glyphs"
-      :theme="theme"
-    />
-    <div class="content">
+
+    <Compare :theme="theme"/>
+
+    <div class="content alternate-bg">
       <div
         id="download"
         class="scroll-head"
@@ -370,7 +327,7 @@
       id="how"
       class="scroll-head"
     />
-    <div class="content alternate-bg">
+    <div class="content">
       <el-row>
         <el-col>
           <h1 class="centre">
@@ -413,7 +370,7 @@
         </el-col>
       </el-row>
     </div>
-    <div class="content">
+    <div class="content alternate-bg">
       <el-row>
         <el-col>
           <h1 class="centre">
@@ -582,6 +539,12 @@ export default {
       height: '37vw',
       loading: Loader
     }),
+    Compare: lazyLoadComponent({
+      componentFactory: () => import('@/components/Compare'),
+      background: localStorage.getItem('theme') === 'dark' ? '#515151' : '#f5f5f5',
+      height: '37vw',
+      loading: Loader
+    }),
     Faq,
     Credits
   },

src/components/CodeView.vue

@@ -42,13 +42,9 @@
         Based on
         <a
           target="_blank"
-          href="https://github.com/rubjo/ultimate-dark"
-        >Ultimate Dark</a>
-        colour scheme
-        (<a
-          target="_blank"
-          href="https://packagecontrol.io/packages/Ultimate%20Dark"
-        >Sublime Text 3 package</a>)
+          href="https://github.com/voronianski/oceanic-next-color-scheme"
+        >Oceanic Next</a>
+        colour scheme by Dmitri Voronianski
       </div>
       <div
         v-else
@@ -67,8 +63,9 @@
 <script>
 // language
 import 'codemirror/mode/vue/vue.js'
+import 'codemirror/mode/javascript/javascript.js'
 // themes css
-import '@/styles/ultimate-dark.css'
+import '@/styles/oceanic-next.css'
 import '@/styles/base-16-light.css'
 // active-line.js
 import 'codemirror/addon/selection/active-line.js'
@@ -81,7 +78,7 @@ import 'codemirror/addon/comment/comment.js'
 // sample code
 // eslint-disable-next-line
 import mobileCode from '!raw-loader!@/components/Sample-mobile.vue'
-import desktopCode from '!raw-loader!@/components/Sample-desktop.vue'
+import desktopCode from '!raw-loader!@/components/Sample-desktop.js'
 
 export default {
   name: 'CodeView',
@@ -95,20 +92,20 @@ export default {
     return {
       code: window.innerWidth <= 768 ? mobileCode : desktopCode,
       cmOptions: {
-        mode: 'text/x-vue',
+        mode: window.innerWidth <= 768 ? 'text/x-vue' : 'text/javascript',
         tabSize: 2,
         styleActiveLine: true,
         line: true,
         styleSelectedText: true,
         matchBrackets: true,
         showCursorWhenSelecting: true,
-        theme: this.theme === 'dark' ? 'ultimate-dark' : 'base16-light'
+        theme: this.theme === 'dark' ? 'oceanic-next' : 'base16-light'
       }
     }
   },
   watch: {
     theme (newVal, oldVal) {
-      this.cm.setOption('theme', newVal === 'dark' ? 'ultimate-dark' : 'base16-light')
+      this.cm.setOption('theme', newVal === 'dark' ? 'oceanic-next' : 'base16-light')
     }
   },
   mounted () {

src/components/Compare.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="content">
+    <div
+      id="compare"
+      class="scroll-head"
+    />
+    <el-row>
+      <el-col>
+        <h1 class="centre">
+          <em>Compare it to </em>
+          <div class="select-container">
+            <div class="select">
+              <select ref="otherFontSelect">
+                <option
+                  v-for="font in fonts"
+                  :key="font"
+                  :value="font.toLowerCase().split(' ').join('-')"
+                >
+                  {{ font }}
+                </option>
+              </select>
+            </div>
+          </div>
+        </h1>
+      </el-col>
+    </el-row>
+    <div class="container">
+      <TwentyTwenty
+        :before="victorMonoImage"
+        :after="otherFontImage"
+      />
+    </div>
+    <el-row
+      type="flex"
+      justify="center"
+    >
+      <el-col
+        :xs="22"
+      >
+        <p class="small centre">
+          <em>Test and compare free programming fonts on
+            <a
+              target="_blank"
+              href="https://app.programmingfonts.org#victor-mono"
+            >
+              app.programmingfonts.org</a>
+          </em>
+          ⭐️
+        </p>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import TwentyTwenty from 'vue-twentytwenty'
+
+export default {
+  name: 'Compare',
+  components: {
+    TwentyTwenty
+  },
+  props: {
+    theme: {
+      type: String,
+      default: 'dark'
+    }
+  },
+  data () {
+    return {
+      otherFont: '',
+      fonts: [
+        'Anonymous Pro',
+        'Cartograph',
+        'Cascadia Code',
+        'Consolas',
+        'Dank Mono',
+        'Droid Sans',
+        'Fantasque Sans Mono',
+        'Fira Code',
+        'Hack',
+        'Hasklig',
+        'Inconsolata',
+        'Input',
+        'Iosevka',
+        'JetBrains Mono',
+        'Meslo',
+        'Monoid',
+        'Operator Mono',
+        'Plex Mono',
+        'Roboto Mono',
+        'Source Code Pro',
+        'Sudo',
+        'Ubuntu Mono'
+      ]
+    }
+  },
+  computed: {
+    victorMonoImage () {
+      return require(`../assets/img/comparison/victor-mono-${this.theme}.png`)
+    },
+    otherFontImage () {
+      return this.otherFont
+        ? require(`../assets/img/comparison/${this.otherFont}-${this.theme}.png`)
+        : ''
+    }
+  },
+  mounted () {
+    this.$refs.otherFontSelect.addEventListener('change', e => {
+      this.otherFont = e.target.value
+    })
+
+    this.pickRandom()
+  },
+  methods: {
+    pickRandom () {
+      // this.otherFont = this
+      //   .fonts[Math.floor(Math.random() * this.fonts.length)]
+      //   .toLowerCase().split(' ').join('-')
+
+      const index = Math.floor(Math.random() * this.fonts.length)
+      this.$refs.otherFontSelect.selectedIndex = index
+      this.$refs.otherFontSelect.dispatchEvent(new Event('change'))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .select-container {
+    display: inline-block;
+    width: 220px;
+  }
+
+  // Select styling
+  .select {
+    position: relative;
+    top: -5px;
+    height: 28px;
+    margin-left: 5px;
+    line-height: 0.5em;
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 10px;
+      bottom: 0;
+      width: 0;
+      height: 0;
+      margin: auto;
+      pointer-events: none;
+      content: '';
+      border-color: #fff transparent transparent transparent;
+      border-style: solid;
+      border-width: 7px 7px 0 7px;
+      transition: all 1s;
+    }
+    &:hover {
+      &::after {
+        right: 4px;
+        transition: all 1s;
+      }
+    }
+    select {
+      width: 100%;
+      height: 100%;
+      padding: 0 16px 0 8px;
+      font-size: 0.5em;
+      font-style: italic;
+      color: var(--text-color);
+      cursor: pointer;
+      background: transparent;
+      border-color: var(--text-color);
+      border-width: 2px;
+      outline: none;
+      box-shadow: none;
+      transition-duration: 1s;
+      &:hover {
+        color: var(--text-color);
+        border-color: var(--text-color);
+        border-radius: 32px;
+        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+        transition: all 1s;
+        transform: scale(1.1);
+      }
+
+      // Disable default styling on ff
+      -moz-appearance: none;
+
+      // Disable ugly ass outline on firefox
+      &:-moz-focusring {
+        color: transparent;
+        text-shadow: 0 0 0 #000;
+      }
+
+      // Disable default styling on webkit browsers
+      -webkit-appearance: none;
+
+      // Disable default arrow on IE 11+
+      &::-ms-expand {
+        display: none;
+      }
+    }
+  }
+
+  // IE 9 only
+  @media all and (min-width: 0\0) and (min-resolution: 0.001dpcm) {
+    .select {
+      select {
+        padding-right: 0;
+      }
+
+      &::after,
+      &::before {
+        display: none;
+      }
+    }
+  }
+  .container {
+    max-width: 850px;
+    margin: 0 auto;
+  }
+  .twentytwenty-container {
+    z-index: 0;
+    img {
+      z-index: auto;
+    }
+    .twentytwenty-overlay {
+      z-index: auto;
+    }
+    .twentytwenty-handle {
+      z-index: auto;
+    }
+  }
+
+  [data-theme=light] {
+    .select {
+      &::after {
+        border-color: #000 transparent transparent transparent;
+      }
+    }
+  }
+</style>

src/components/Credits.vue

@@ -91,6 +91,20 @@
           >
             Igor Randjelovic</a>
           <br><br>
+          <em>Image comparison component</em>
+          <br>
+          <a
+            target="_blank"
+            href="https://github.com/mhayes/vue-twentytwenty"
+          >
+            vue-twentytwenty</a>
+          by
+          <a
+            target="_blank"
+            href="https://github.com/mhayes"
+          >
+            Mark Hayes</a>
+          <br><br>
           <em>FAQ component</em>
           <br>
           <a
@@ -127,7 +141,6 @@
           >
             Element</a>
           <br><br>
-          <br><br>
           <em>Sharing component</em>
           <br>
           <a

src/components/Faq.vue

@@ -147,6 +147,10 @@ export default {
         button {
           padding-left: 20px;
           margin-left: 5vw;
+          &::before,
+          &::after {
+            background: var(--color-text-accented);
+          }
         }
       }
       .accordion__value {

src/components/Loader.vue

@@ -42,29 +42,5 @@ export default {
   overflow: hidden;
   vertical-align: middle;
   background-color: #595959;
-  &::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    content: '';
-    background-image:
-      linear-gradient(
-        90deg,
-        rgba(#aaa, 0) 0,
-        rgba(#aaa, 0.2) 20%,
-        rgba(#aaa, 0.5) 60%,
-        rgba(#aaa, 0)
-      );
-    transform: translateX(-100%);
-    animation: shimmer 5s infinite;
-  }
-
-  @keyframes shimmer {
-    100% {
-      transform: translateX(100%);
-    }
-  }
 }
 </style>

src/components/Sample-desktop.js

@@ -0,0 +1,22 @@
+// Ask for a user name until API returns a valid user
+async function getUser() {
+  let user
+  while (true) {
+    let name = prompt('Enter a user name', 'rubjo')
+    try {
+      user = await loadJson(`https://my.api.com/users/${name}`)
+      break // No error, exit loop and proceed
+    } catch (err) {
+      if (err.response.status === 404) {
+        // Loop will continue after the alert
+        alert(`User "${name} not found, please reenter.`)
+      } else {
+        // Unknown error, rethrow it
+        throw err
+      }
+    }
+  }
+
+  alert(`Full name: ${user.name}.`)
+  return user
+}

src/components/Sample-desktop.vue

@@ -1,72 +0,0 @@
-<template> <!-- Go ahead and edit me -->
-  <div id="app" mode="inception">
-    <NavBar ref="navbar" :show="showNav" :show-go-to-top="showGoToTop" />
-    <Header ref="header" :show-text="showHeaderText" :theme="theme" />
-    <div class="content">
-      Victor Mono is a free programming font with <em>semi-connected cursive italics</em>,
-      symbol ligatures (!=, ->>, =>, ===, >=, ++) and Latin, Cyrillic and Greek characters.
-<!-- [...] -->
-
-<script> /* eslint-disable */
-  import lotsOfStuff from '@/everywhere'
-
-  export default {
-    name: 'Home',
-    components: { NavBar, Header, CodeView, VueFaqAccordion },
-    data () {
-      return { theme: localStorage.getItem('theme') || 'dark' }
-    },
-    computed: {
-      stylesDarkThumb () { return require('./assets/img/styles-dark-thumb.png') },
-      stylesLightThumb () { return require('./assets/img/styles-light-thumb.png') }
-    },
-    mounted () { this.doLotsOfStuff() },
-    methods: {
-      initScrollWatcher () {
-        function throttle (fn, wait) {
-          let time = Date.now()
-          return function () {
-            if ((time + wait - Date.now()) < 0) {
-              setTimeout(fn, wait)
-              time = Date.now()
-            }
-          }
-        }
-
-        ['scroll', 'resize'].forEach(event => {
-          window.addEventListener(event, throttle(this.setHeaderHeight, 250))
-          window.addEventListener(event, throttle(this.calculateHeaderText, 250))
-        })
-      },
-      thanks (e) {
-        window.open('https://paypal.me/runbjo')
-        setTimeout(() => {
-          window.addEventListener('focus', this.celebrate(e.target))
-        }, 1000)
-      }
-    }
-  }
-</script>
-
-<style lang="scss">
-  @import 'styles/globals.scss';
-
-  em.alt {
-    font-family: 'VictorMono-Oblique', monospace;
-  }
-
-  .horizontal-large-image {
-    width: 100vw;
-    height: 37vw;
-    margin-top: 2em;
-    overflow: hidden;
-  }
-
-  code {
-    padding: 6px;
-    font-style: normal;
-    background: var(--background-color-alternate);
-    border-radius: 6px;
-    transition: background 1s;
-  }
-</style>

src/styles/base-16-light.css

@@ -20,14 +20,14 @@
 .cm-s-base16-light .CodeMirror-cursor { border-left: 1px solid #505050; }
 
 .cm-s-base16-light span.cm-comment { color: #8f5536; font-style: italic;}
-.cm-s-base16-light span.cm-atom { color: #aa759f; }
+.cm-s-base16-light span.cm-atom { color: #aa759f; font-style: italic; }
 .cm-s-base16-light span.cm-number { color: #aa759f; }
 
-.cm-s-base16-light span.cm-attribute { color: #90a959; font-style: italic;}
-.cm-s-base16-light span.cm-keyword { color: #ac4142; font-style: italic;}
+.cm-s-base16-light span.cm-attribute { color: #90a959;}
+.cm-s-base16-light span.cm-keyword { color: #ac4142;}
 .cm-s-base16-light span.cm-string { color: #e4af65; }
 
-.cm-s-base16-light span.cm-variable, .cm-s-base16-light span.cm-builtin, .cm-s-base16-light span.cm-qualifier { color: #90a959; font-style: italic;}
+.cm-s-base16-light span.cm-variable, .cm-s-base16-light span.cm-builtin, .cm-s-base16-light span.cm-qualifier { color: #90a959;}
 .cm-s-base16-light span.cm-variable-2 { color: #6a9fb5; }
 .cm-s-base16-light span.cm-def { color: #d28445; }
 .cm-s-base16-light span.cm-bracket { color: #202020; }

src/styles/globals.scss

@@ -69,6 +69,10 @@ p {
       column-gap: 25px;
     }
   }
+  &.large {
+    font-size: calc(0.9rem + 0.7vw);
+    line-height: calc(1.8rem + 0.9vw);
+  }
   &.small {
     font-size: calc(0.8rem + 0.2vw);
     line-height: calc(1.75rem + 0.2vw);
@@ -229,6 +233,7 @@ h1 {
 
 h2 {
   font-weight: 400;
+  line-height: 1.6em;
   .small {
     font-size: 0.5em;
     line-height: 1em;
@@ -272,8 +277,10 @@ em.alt {
 
 .styles-image {
   float: right;
-  width: 40%;
-  margin: 0 0 5px 15px;
+  height: 20vw;
+  min-height: 300px;
+  max-height: 400px;
+  margin: 0 0 5px 25px;
 }
 
 code {

src/styles/oceanic-next.css

@@ -0,0 +1,35 @@
+.cm-s-oceanic-next.CodeMirror { background: #304148; color: #f8f8f2; }
+.cm-s-oceanic-next div.CodeMirror-selected { background: rgba(101, 115, 126, 0.33); }
+.cm-s-oceanic-next .CodeMirror-line::selection, .cm-s-oceanic-next .CodeMirror-line > span::selection, .cm-s-oceanic-next .CodeMirror-line > span > span::selection { background: rgba(101, 115, 126, 0.33); }
+.cm-s-oceanic-next .CodeMirror-line::-moz-selection, .cm-s-oceanic-next .CodeMirror-line > span::-moz-selection, .cm-s-oceanic-next .CodeMirror-line > span > span::-moz-selection { background: rgba(101, 115, 126, 0.33); }
+.cm-s-oceanic-next .CodeMirror-gutters { background: #304148; border-right: 10px; }
+.cm-s-oceanic-next .CodeMirror-guttermarker { color: white; }
+.cm-s-oceanic-next .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
+.cm-s-oceanic-next .CodeMirror-linenumber { color: #d0d0d0; }
+.cm-s-oceanic-next .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
+
+.cm-s-oceanic-next span.cm-comment { font-style: italic; color: #65737E; }
+.cm-s-oceanic-next span.cm-atom { color: #C594C5; font-style: italic;}
+.cm-s-oceanic-next span.cm-number { color: #F99157; }
+
+.cm-s-oceanic-next span.cm-property { color: #99C794; }
+.cm-s-oceanic-next span.cm-attribute,
+.cm-s-oceanic-next span.cm-keyword { color: #C594C5; }
+.cm-s-oceanic-next span.cm-builtin { color: #66d9ef; }
+.cm-s-oceanic-next span.cm-string, .cm-s-oceanic-next span.cm-string-2 { color: #99C794; }
+
+.cm-s-oceanic-next span.cm-variable,
+.cm-s-oceanic-next span.cm-variable-2,
+.cm-s-oceanic-next span.cm-variable-3 { color: #f8f8f2; }
+.cm-s-oceanic-next span.cm-def { color: #6699CC; }
+.cm-s-oceanic-next span.cm-bracket { color: #5FB3B3; }
+.cm-s-oceanic-next span.cm-tag { color: #C594C5; }
+.cm-s-oceanic-next span.cm-header { color: #C594C5; }
+.cm-s-oceanic-next span.cm-link { color: #C594C5; }
+.cm-s-oceanic-next span.cm-error { background: #C594C5; color: #f8f8f0; }
+
+.cm-s-oceanic-next .CodeMirror-activeline-background { background: rgba(101, 115, 126, 0.33); }
+.cm-s-oceanic-next .CodeMirror-matchingbracket {
+  text-decoration: underline;
+  color: white !important;
+}