feat: fix some todos

muuvmuuv · Feb 12, 2020 · 340af95 · 340af95
1 parent 36b919e
commit 340af95
Show file tree

Hide file tree

Showing 10 changed files with 26 additions and 38 deletions.
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -4,9 +4,6 @@
  * @see https://www.gatsbyjs.org/docs/browser-apis/
  */
 
-const { isDev } = require('./utils/environment')
-const { getLocale, getLanguage } = require('./src/utils/locale')
-
 const printCorporateMessage = require('./gatsby/browser/corporateMessage')
 const setDefaultTime = require('./gatsby/browser/defaultTime')
 
@@ -17,11 +14,6 @@ module.exports.wrapRootElement = require('./gatsby/wrapRootElement')
 
 module.exports.onClientEntry = () => {
   setDefaultTime()
-
-  if (isDev) {
-    // TODO: if i18n, move it there
-    console.log('Language:', getLanguage(), getLocale())
-  }
 }
 
 module.exports.onInitialClientRender = () => {

diff --git a/src/components/Head.jsx b/src/components/Head.jsx
@@ -25,7 +25,6 @@ const Head = ({
 }) => {
   const twitter = social.find(({ icon }) => icon === 'twitter')
 
-  // TODO: improve this if i18n
   const language = pageLang || siteLanguage || 'en'
 
   // set default social-media images

diff --git a/src/components/Lightbox.jsx b/src/components/Lightbox.jsx
@@ -28,7 +28,7 @@ class Lightbox extends React.Component {
     const clientY = element.offsetTop - document.documentElement.scrollTop
     const maxWidth = document.documentElement.clientWidth
     const maxHeight = document.documentElement.clientHeight
-    const scrollbarWidth = 0 // TODO: is this needed? (test on common browser across different platforms)
+    const scrollbarWidth = 0
 
     // Get the current picture source image natural width.
     const naturalWidth = image.naturalWidth

diff --git a/src/html.js b/src/html.js
@@ -25,7 +25,6 @@ export default function HTML(props) {
       </head>
       <body {...props.bodyAttributes}>
         {props.preBodyComponents}
-        {/*TODO: Show beautiful message here*/}
         <noscript key="noscript" id="gatsby-noscript">
           I mean... we have {thisYear}, please enable JavaScript!
         </noscript>

diff --git a/src/styles/components/_anchor.scss b/src/styles/components/_anchor.scss
@@ -1,7 +1,3 @@
-// NOTE: copied some code from here, because it is not added to head: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-autolink-headers/src/gatsby-ssr.js
-
-$size: 15px;
-
 .anchor-link {
   display: block;
   position: absolute;
@@ -19,8 +15,8 @@ $size: 15px;
   }
 
   svg {
-    width: $size;
-    height: $size;
+    width: 15px;
+    height: 15px;
     fill: var(--text-color-dark);
 
     @include breakpoint-up(md) {

diff --git a/src/styles/components/_portfolio.scss b/src/styles/components/_portfolio.scss
@@ -1,5 +1,3 @@
-// TODO: do this as gallery: https://dribbble.com/shots/6154629-Gallerie-Due-Concept/attachments
-
 .portfolio {
   display: grid;
   grid-template-areas:

diff --git a/src/styles/fonts/_inter.scss b/src/styles/fonts/_inter.scss
@@ -25,20 +25,7 @@ $font-display: swap;
     url('#{$font-path}/Inter-Bold.woff?v=#{$font-version}') format('woff');
 }
 
-// FIXME: keep a look at the progress here (at new releases). Sadly, there is now release or progress page
-/* --------------------------------------------------------------------------
-[EXPERIMENTAL] Multi-axis, single variable font.
-
-Slant axis is not yet widely supported (as of February 2019) and thus this
-multi-axis single variable font is opt-in rather than the default.
-
-When using this, you will probably need to set font-variation-settings
-explicitly, e.g.
-
-  * { font-variation-settings: "slnt" 0deg }
-  .italic { font-variation-settings: "slnt" 10deg }
-
-*/
+// NOTE: keep a look at the progress here (at new releases). Sadly, there is now release or progress page
 @font-face {
   font-family: 'Inter var experimental';
   font-style: oblique 0deg 10deg;

diff --git a/src/styles/mixins/_accessibility.scss b/src/styles/mixins/_accessibility.scss
@@ -4,13 +4,23 @@
     @content;
   }
 }
+@mixin noReducedMotion() {
+  @media (prefers-reduced-motion: no-preference) {
+    @content;
+  }
+}
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency
 @mixin reducedTransparency() {
   @media (prefers-reduced-transparency: reduce) {
     @content;
   }
 }
+@mixin noReducedTransparency() {
+  @media (prefers-reduced-transparency: no-preference) {
+    @content;
+  }
+}
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
 @mixin schemeDark() {

diff --git a/src/styles/modules/_showcase.scss b/src/styles/modules/_showcase.scss
@@ -31,9 +31,11 @@
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    transition: all ease-in-out 220ms;
     cursor: pointer;
-    // TODO: reduced motion
+
+    @include noReducedMotion() {
+      transition: all ease-in-out 220ms;
+    }
 
     @include breakpoint-up(lg) {
       align-items: flex-end;
@@ -64,15 +66,21 @@
       }
 
       &::after {
-        transition: opacity var(--transition-fast);
         opacity: 0.4;
+
+        @include noReducedMotion() {
+          transition: opacity var(--transition-fast);
+        }
       }
     }
 
     .content {
-      transition: all 200ms ease-in-out;
       text-align: center;
 
+      @include noReducedMotion() {
+        transition: all 200ms ease-in-out;
+      }
+
       @include breakpoint-up(lg) {
         transform: translateY(-70px);
         opacity: 0;

diff --git a/tests/lighthouse/index.js b/tests/lighthouse/index.js
@@ -6,7 +6,6 @@ const chromeLauncher = require('chrome-launcher')
 const lighthouse = require('lighthouse')
 const { getVersion, transformVersion } = require('../../utils/version')
 
-// TODO: test a project site as well
 const testSite = 'https://marvin.lcl'
 
 const rootPath = path.resolve(__dirname, '..', '..')