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,7 +31,9 @@ const query = graphql`
   }
 `
 
-const Vcard = () => (
+export default class Vcard extends PureComponent {
+  render() {
+    return (
       <StaticQuery
         query={query}
         render={data => {
@@ -54,7 +56,9 @@ const Vcard = () => (
           )
         }}
       />
-)
+    )
+  }
+}
 
 // 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,6 +33,8 @@ export default class Header extends PureComponent {
           const meta = data.dataYaml
 
           return (
+            <>
+              <HostnameCheck />
               <header className={minimal ? styles.minimal : styles.header}>
                 <ThemeSwitch />
 
@@ -43,6 +46,7 @@ export default class Header extends PureComponent {
 
                 <Availability hide={minimal && !meta.availability.status} />
               </header>
+            </>
           )
         }}
       />