hostname check

package.json

@@ -9,6 +9,7 @@
   "author": "Matthias Kretschmann <m@kretschmann.io>",
   "scripts": {
     "start": "./node_modules/gatsby/dist/bin/gatsby.js develop",
+    "ssr": "npm run build && serve -s public/",
     "lint:js": "eslint ./gatsby-*.js && eslint ./src/**/*.{js,jsx}",
     "lint:css": "stylelint ./src/**/*.{css,scss}",
     "lint": "npm run lint:js && npm run lint:css",

src/components/atoms/HostnameCheck.jsx

@@ -0,0 +1,41 @@
+import React, { PureComponent } from 'react'
+import styles from './HostnameCheck.module.scss'
+
+const allowedHosts = [
+  'matthiaskretschmann.com',
+  'beta.matthiaskretschmann.com',
+  'localhost'
+]
+
+export default class HostnameInfo extends PureComponent {
+  checkAllowedHost = () => {
+    if (typeof window !== 'undefined' && window.location) {
+      return allowedHosts.includes(window.location.hostname)
+    }
+  }
+
+  state = {
+    isAllowedHost: true
+  }
+
+  componentDidMount() {
+    const isAllowedHost = this.checkAllowedHost()
+    this.setState({ isAllowedHost })
+  }
+
+  render() {
+    if (this.state.isAllowedHost) return null
+
+    return (
+      <>
+        <aside className={styles.hostnameInfo}>
+          Hi there 👋. Please note that only the code and documentation of this
+          site are MIT licensed. But my logo and the combination of typography,
+          colors, and layout making up my brand identity are not. Likewise, if
+          you know how to remove this banner you also should be able to remove
+          my Typekit code and Analytics code from your published site.
+        </aside>
+      </>
+    )
+  }
+}

src/components/atoms/HostnameCheck.module.scss

@@ -0,0 +1,15 @@
+@import 'variables';
+
+.hostnameInfo {
+    position: sticky;
+    top: 0;
+    z-index: 99;
+    padding: $spacer / 2 $spacer;
+    font-size: $font-size-small;
+    font-weight: bold;
+    background: rgba($brand-light, .8);
+
+    :global(.dark) & {
+        background: rgba($body-background-color--dark, .8);
+    }
+}

src/components/atoms/Vcard.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import { StaticQuery, graphql } from 'gatsby'
 import saveAs from 'file-saver'
 import vCard from 'vcf'
@@ -31,30 +31,34 @@ const query = graphql`
   }
 `
 
-const Vcard = () => (
-  <StaticQuery
-    query={query}
-    render={data => {
-      const meta = data.dataYaml
+export default class Vcard extends PureComponent {
+  render() {
+    return (
+      <StaticQuery
+        query={query}
+        render={data => {
+          const meta = data.dataYaml
 
-      const handleAddressbookClick = e => {
-        e.preventDefault()
-        constructVcard(meta)
-      }
+          const handleAddressbookClick = e => {
+            e.preventDefault()
+            constructVcard(meta)
+          }
 
-      return (
-        <a
-          // href is kinda fake, only there for usability
-          // so user knows what to expect when hovering the link before clicking
-          href={meta.addressbook}
-          onClick={handleAddressbookClick}
-        >
-          Add to addressbook
-        </a>
-      )
-    }}
-  />
-)
+          return (
+            <a
+              // href is kinda fake, only there for usability
+              // so user knows what to expect when hovering the link before clicking
+              href={meta.addressbook}
+              onClick={handleAddressbookClick}
+            >
+              Add to addressbook
+            </a>
+          )
+        }}
+      />
+    )
+  }
+}
 
 // Construct the download from a blob of the just constructed vCard,
 // and save it to user's file system
@@ -120,5 +124,3 @@ const toDataURL = (src, callback, outputFormat) => {
     img.src = src
   }
 }
-
-export default Vcard

src/components/organisms/Header.jsx

@@ -5,6 +5,7 @@ import Networks from '../molecules/Networks'
 import Availability from '../molecules/Availability'
 import ThemeSwitch from '../molecules/ThemeSwitch'
 import LogoUnit from '../molecules/LogoUnit'
+import HostnameCheck from '../atoms/HostnameCheck'
 import styles from './Header.module.scss'
 
 const query = graphql`
@@ -32,17 +33,20 @@ export default class Header extends PureComponent {
           const meta = data.dataYaml
 
           return (
-            <header className={minimal ? styles.minimal : styles.header}>
-              <ThemeSwitch />
+            <>
+              <HostnameCheck />
+              <header className={minimal ? styles.minimal : styles.header}>
+                <ThemeSwitch />
 
-              <Link className={styles.header__link} to={'/'}>
-                <LogoUnit minimal={minimal} />
-              </Link>
+                <Link className={styles.header__link} to={'/'}>
+                  <LogoUnit minimal={minimal} />
+                </Link>
 
-              <Networks hide={minimal} />
+                <Networks hide={minimal} />
 
-              <Availability hide={minimal && !meta.availability.status} />
-            </header>
+                <Availability hide={minimal && !meta.availability.status} />
+              </header>
+            </>
           )
         }}
       />