diff --git a/package.json b/package.json index 064dd31..b1ab1b2 100644 --- a/package.json +++ b/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", diff --git a/src/App.vue b/src/App.vue index e81995c..073c140 100644 --- a/src/App.vue +++ b/src/App.vue @@ -23,19 +23,7 @@ :xs="22" :sm="18" > -

- Victor Mono is a free programming font with optional - semi-connected cursive italics, - symbol ligatures (!=, ->>, =>, ===, <=, >=, ++) - and Latin, Cyrillic and Greek characters. -

- It was drawn from scratch - because there just wasn't any - free or paid font that I found both readable, effective and elegant. -

+

+ Victor Mono is a free programming font with optional + semi-connected cursive italics, + symbol ligatures (!=, ->>, =>, ===, <=, >=, ++) + and Latin, Cyrillic and Greek characters. +

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, Italic and Oblique. -

-

-

- - If you want to say thanks, any - - or - - donation is very welcome. -

@@ -112,25 +87,6 @@ /> - - -

- Test and compare free programming fonts on - - app.programmingfonts.org - - ⭐️ -

- -
+ +

- When it comes to programming fonts, I prefer something strict, readable and relatively - condensed for the code proper, complemented with a more - informal, flowing and human style + When it comes to programming fonts, I prefer something thin, crisp + and relatively condensed for the code proper, + complemented with a more informal, flowing and human style for things like comments and reserved keywords.

- 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:

  • No cursive italics
  • Regular/Roman style was not to my taste
    • @@ -239,8 +197,8 @@
  • Combined two fonts too different in style
  • Very expensive
- 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.

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 @@
- -
+ + + +
-
+

@@ -413,7 +370,7 @@

-
+

@@ -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 }, diff --git a/src/assets/img/comparison/anonymous-pro-dark.png b/src/assets/img/comparison/anonymous-pro-dark.png new file mode 100644 index 0000000..51e066a Binary files /dev/null and b/src/assets/img/comparison/anonymous-pro-dark.png differ diff --git a/src/assets/img/comparison/anonymous-pro-light.png b/src/assets/img/comparison/anonymous-pro-light.png new file mode 100644 index 0000000..49a6d7a Binary files /dev/null and b/src/assets/img/comparison/anonymous-pro-light.png differ diff --git a/src/assets/img/comparison/cartograph-dark.png b/src/assets/img/comparison/cartograph-dark.png new file mode 100644 index 0000000..a5be497 Binary files /dev/null and b/src/assets/img/comparison/cartograph-dark.png differ diff --git a/src/assets/img/comparison/cartograph-light.png b/src/assets/img/comparison/cartograph-light.png new file mode 100644 index 0000000..41f87c5 Binary files /dev/null and b/src/assets/img/comparison/cartograph-light.png differ diff --git a/src/assets/img/comparison/cascadia-code-dark.png b/src/assets/img/comparison/cascadia-code-dark.png new file mode 100644 index 0000000..f5489ae Binary files /dev/null and b/src/assets/img/comparison/cascadia-code-dark.png differ diff --git a/src/assets/img/comparison/cascadia-code-light.png b/src/assets/img/comparison/cascadia-code-light.png new file mode 100644 index 0000000..ce8e804 Binary files /dev/null and b/src/assets/img/comparison/cascadia-code-light.png differ diff --git a/src/assets/img/comparison/consolas-dark.png b/src/assets/img/comparison/consolas-dark.png new file mode 100644 index 0000000..582568a Binary files /dev/null and b/src/assets/img/comparison/consolas-dark.png differ diff --git a/src/assets/img/comparison/consolas-light.png b/src/assets/img/comparison/consolas-light.png new file mode 100644 index 0000000..7ec0865 Binary files /dev/null and b/src/assets/img/comparison/consolas-light.png differ diff --git a/src/assets/img/comparison/dank-mono-dark.png b/src/assets/img/comparison/dank-mono-dark.png new file mode 100644 index 0000000..91c011e Binary files /dev/null and b/src/assets/img/comparison/dank-mono-dark.png differ diff --git a/src/assets/img/comparison/dank-mono-light.png b/src/assets/img/comparison/dank-mono-light.png new file mode 100644 index 0000000..af87dbe Binary files /dev/null and b/src/assets/img/comparison/dank-mono-light.png differ diff --git a/src/assets/img/comparison/droid-sans-dark.png b/src/assets/img/comparison/droid-sans-dark.png new file mode 100644 index 0000000..b91c37c Binary files /dev/null and b/src/assets/img/comparison/droid-sans-dark.png differ diff --git a/src/assets/img/comparison/droid-sans-light.png b/src/assets/img/comparison/droid-sans-light.png new file mode 100644 index 0000000..5a5aaae Binary files /dev/null and b/src/assets/img/comparison/droid-sans-light.png differ diff --git a/src/assets/img/comparison/fantasque-sans-mono-dark.png b/src/assets/img/comparison/fantasque-sans-mono-dark.png new file mode 100644 index 0000000..1f86e59 Binary files /dev/null and b/src/assets/img/comparison/fantasque-sans-mono-dark.png differ diff --git a/src/assets/img/comparison/fantasque-sans-mono-light.png b/src/assets/img/comparison/fantasque-sans-mono-light.png new file mode 100644 index 0000000..3adf7c8 Binary files /dev/null and b/src/assets/img/comparison/fantasque-sans-mono-light.png differ diff --git a/src/assets/img/comparison/fira-code-dark.png b/src/assets/img/comparison/fira-code-dark.png new file mode 100644 index 0000000..c6e814f Binary files /dev/null and b/src/assets/img/comparison/fira-code-dark.png differ diff --git a/src/assets/img/comparison/fira-code-light.png b/src/assets/img/comparison/fira-code-light.png new file mode 100644 index 0000000..dc95877 Binary files /dev/null and b/src/assets/img/comparison/fira-code-light.png differ diff --git a/src/assets/img/comparison/hack-dark.png b/src/assets/img/comparison/hack-dark.png new file mode 100644 index 0000000..e29f182 Binary files /dev/null and b/src/assets/img/comparison/hack-dark.png differ diff --git a/src/assets/img/comparison/hack-light.png b/src/assets/img/comparison/hack-light.png new file mode 100644 index 0000000..ae2559d Binary files /dev/null and b/src/assets/img/comparison/hack-light.png differ diff --git a/src/assets/img/comparison/hasklig-dark.png b/src/assets/img/comparison/hasklig-dark.png new file mode 100644 index 0000000..1d6ae2c Binary files /dev/null and b/src/assets/img/comparison/hasklig-dark.png differ diff --git a/src/assets/img/comparison/hasklig-light.png b/src/assets/img/comparison/hasklig-light.png new file mode 100644 index 0000000..0c3cbfb Binary files /dev/null and b/src/assets/img/comparison/hasklig-light.png differ diff --git a/src/assets/img/comparison/inconsolata-dark.png b/src/assets/img/comparison/inconsolata-dark.png new file mode 100644 index 0000000..13b2696 Binary files /dev/null and b/src/assets/img/comparison/inconsolata-dark.png differ diff --git a/src/assets/img/comparison/inconsolata-light.png b/src/assets/img/comparison/inconsolata-light.png new file mode 100644 index 0000000..e229297 Binary files /dev/null and b/src/assets/img/comparison/inconsolata-light.png differ diff --git a/src/assets/img/comparison/input-dark.png b/src/assets/img/comparison/input-dark.png new file mode 100644 index 0000000..38f3231 Binary files /dev/null and b/src/assets/img/comparison/input-dark.png differ diff --git a/src/assets/img/comparison/input-light.png b/src/assets/img/comparison/input-light.png new file mode 100644 index 0000000..6f3248b Binary files /dev/null and b/src/assets/img/comparison/input-light.png differ diff --git a/src/assets/img/comparison/iosevka-dark.png b/src/assets/img/comparison/iosevka-dark.png new file mode 100644 index 0000000..5a64a28 Binary files /dev/null and b/src/assets/img/comparison/iosevka-dark.png differ diff --git a/src/assets/img/comparison/iosevka-light.png b/src/assets/img/comparison/iosevka-light.png new file mode 100644 index 0000000..b85ef44 Binary files /dev/null and b/src/assets/img/comparison/iosevka-light.png differ diff --git a/src/assets/img/comparison/jetbrains-mono-dark.png b/src/assets/img/comparison/jetbrains-mono-dark.png new file mode 100644 index 0000000..2b4c57e Binary files /dev/null and b/src/assets/img/comparison/jetbrains-mono-dark.png differ diff --git a/src/assets/img/comparison/jetbrains-mono-light.png b/src/assets/img/comparison/jetbrains-mono-light.png new file mode 100644 index 0000000..57539f8 Binary files /dev/null and b/src/assets/img/comparison/jetbrains-mono-light.png differ diff --git a/src/assets/img/comparison/meslo-dark.png b/src/assets/img/comparison/meslo-dark.png new file mode 100644 index 0000000..6e99289 Binary files /dev/null and b/src/assets/img/comparison/meslo-dark.png differ diff --git a/src/assets/img/comparison/meslo-light.png b/src/assets/img/comparison/meslo-light.png new file mode 100644 index 0000000..0729b8c Binary files /dev/null and b/src/assets/img/comparison/meslo-light.png differ diff --git a/src/assets/img/comparison/monoid-dark.png b/src/assets/img/comparison/monoid-dark.png new file mode 100644 index 0000000..e7f7761 Binary files /dev/null and b/src/assets/img/comparison/monoid-dark.png differ diff --git a/src/assets/img/comparison/monoid-light.png b/src/assets/img/comparison/monoid-light.png new file mode 100644 index 0000000..f41b4fc Binary files /dev/null and b/src/assets/img/comparison/monoid-light.png differ diff --git a/src/assets/img/comparison/operator-mono-dark.png b/src/assets/img/comparison/operator-mono-dark.png new file mode 100644 index 0000000..9db7595 Binary files /dev/null and b/src/assets/img/comparison/operator-mono-dark.png differ diff --git a/src/assets/img/comparison/operator-mono-light.png b/src/assets/img/comparison/operator-mono-light.png new file mode 100644 index 0000000..fb74021 Binary files /dev/null and b/src/assets/img/comparison/operator-mono-light.png differ diff --git a/src/assets/img/comparison/plex-mono-dark.png b/src/assets/img/comparison/plex-mono-dark.png new file mode 100644 index 0000000..26eeef3 Binary files /dev/null and b/src/assets/img/comparison/plex-mono-dark.png differ diff --git a/src/assets/img/comparison/plex-mono-light.png b/src/assets/img/comparison/plex-mono-light.png new file mode 100644 index 0000000..1e0d57e Binary files /dev/null and b/src/assets/img/comparison/plex-mono-light.png differ diff --git a/src/assets/img/comparison/roboto-mono-dark.png b/src/assets/img/comparison/roboto-mono-dark.png new file mode 100644 index 0000000..4685a87 Binary files /dev/null and b/src/assets/img/comparison/roboto-mono-dark.png differ diff --git a/src/assets/img/comparison/roboto-mono-light.png b/src/assets/img/comparison/roboto-mono-light.png new file mode 100644 index 0000000..c4cb335 Binary files /dev/null and b/src/assets/img/comparison/roboto-mono-light.png differ diff --git a/src/assets/img/comparison/source-code-pro-dark.png b/src/assets/img/comparison/source-code-pro-dark.png new file mode 100644 index 0000000..2b3b21d Binary files /dev/null and b/src/assets/img/comparison/source-code-pro-dark.png differ diff --git a/src/assets/img/comparison/source-code-pro-light.png b/src/assets/img/comparison/source-code-pro-light.png new file mode 100644 index 0000000..7ec66c6 Binary files /dev/null and b/src/assets/img/comparison/source-code-pro-light.png differ diff --git a/src/assets/img/comparison/sudo-dark.png b/src/assets/img/comparison/sudo-dark.png new file mode 100644 index 0000000..551a7fb Binary files /dev/null and b/src/assets/img/comparison/sudo-dark.png differ diff --git a/src/assets/img/comparison/sudo-light.png b/src/assets/img/comparison/sudo-light.png new file mode 100644 index 0000000..649bdea Binary files /dev/null and b/src/assets/img/comparison/sudo-light.png differ diff --git a/src/assets/img/comparison/ubuntu-mono-dark.png b/src/assets/img/comparison/ubuntu-mono-dark.png new file mode 100644 index 0000000..b77fe9b Binary files /dev/null and b/src/assets/img/comparison/ubuntu-mono-dark.png differ diff --git a/src/assets/img/comparison/ubuntu-mono-light.png b/src/assets/img/comparison/ubuntu-mono-light.png new file mode 100644 index 0000000..66d227e Binary files /dev/null and b/src/assets/img/comparison/ubuntu-mono-light.png differ diff --git a/src/assets/img/comparison/victor-mono-dark.png b/src/assets/img/comparison/victor-mono-dark.png new file mode 100644 index 0000000..1311a73 Binary files /dev/null and b/src/assets/img/comparison/victor-mono-dark.png differ diff --git a/src/assets/img/comparison/victor-mono-light.png b/src/assets/img/comparison/victor-mono-light.png new file mode 100644 index 0000000..c97efcd Binary files /dev/null and b/src/assets/img/comparison/victor-mono-light.png differ diff --git a/src/components/CodeView.vue b/src/components/CodeView.vue index 8a126f9..e33069c 100644 --- a/src/components/CodeView.vue +++ b/src/components/CodeView.vue @@ -42,13 +42,9 @@ Based on Ultimate Dark - colour scheme - (Sublime Text 3 package) + href="https://github.com/voronianski/oceanic-next-color-scheme" + >Oceanic Next + colour scheme by Dmitri Voronianski

// 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 () { diff --git a/src/components/Compare.vue b/src/components/Compare.vue new file mode 100644 index 0000000..5924071 --- /dev/null +++ b/src/components/Compare.vue @@ -0,0 +1,241 @@ + + + + diff --git a/src/components/Credits.vue b/src/components/Credits.vue index 564dd7d..f371ec8 100644 --- a/src/components/Credits.vue +++ b/src/components/Credits.vue @@ -91,6 +91,20 @@ > Igor Randjelovic

+ Image comparison component +
+ + vue-twentytwenty + by + + Mark Hayes +

FAQ component
Element

-

Sharing component
diff --git a/src/components/Sample-desktop.js b/src/components/Sample-desktop.js new file mode 100644 index 0000000..f10d07e --- /dev/null +++ b/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 +} diff --git a/src/components/Sample-desktop.vue b/src/components/Sample-desktop.vue deleted file mode 100644 index f204535..0000000 --- a/src/components/Sample-desktop.vue +++ /dev/null @@ -1,72 +0,0 @@ -