Fix page name issue with css

TODO.md

@@ -82,6 +82,9 @@
 - [x] Update current projects
   - [x] More text
   - [x] Update images
+- [ ] update transitions to use global custom props
+- [ ] include reduced motion and transparency everywhere
+- [ ] update theme colors with better naming for 4 different states
 - [ ] Upload some photos (best off's)
 - [ ] Setup SimpleAnalytics or something similar
 - [ ] show GitHub OSS with GitHub API on a separate page

package.json

@@ -1,6 +1,6 @@
 {
   "name": "marvin-digital",
-  "version": "3.15.1",
+  "version": "3.15.2",
   "private": true,
   "description": "Portfolio of and by Marvin Heilemann (@muuvmuuv)",
   "repository": "git@github.com:muuvmuuv/portfolio.git",

src/components/Head.jsx

@@ -3,6 +3,7 @@ import { StaticQuery, graphql } from 'gatsby'
 import PropTypes from 'prop-types'
 import { Helmet } from 'react-helmet'
 import { Location } from '@reach/router'
+import { stringSlugify } from '../utils/helper'
 
 const Head = ({
   siteTitle,
@@ -40,7 +41,7 @@ const Head = ({
         lang: language,
       }}
       bodyAttributes={{
-        page: pageName.toLowerCase(),
+        page: stringSlugify(pageName),
         class: bodyClasses,
       }}
       title={pageTitle}

src/components/Portfolio.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { graphql } from 'gatsby'
 import Img from 'gatsby-image'
 
 import Link from './Link'

src/styles/pages/_about.scss

@@ -0,0 +1,30 @@
+[page='about-me'] {
+  #article {
+    position: relative;
+  }
+
+  .bd-img {
+    position: absolute;
+    z-index: -1;
+  }
+
+  .me-gif {
+    top: -40px;
+    right: -20px;
+    width: 270px;
+    opacity: 0.2;
+
+    @include breakpoint-down(sm) {
+      display: none;
+    }
+
+    @include breakpoint-up(lg) {
+      top: 40px;
+      right: -120px;
+    }
+
+    @include reducedMotion() {
+      display: none;
+    }
+  }
+}

src/templates/PageSingle.jsx

@@ -13,9 +13,11 @@ class Page extends React.Component {
   componentDidMount() {
     const { breadcrumb } = this.props.pageContext
 
+    this.setState({ pageName: this.props.pageContext.frontmatter.title })
+
     this.props.history.update({
       location: breadcrumb.location,
-      crumbLabel: this.props.pageContext.frontmatter.title,
+      crumbLabel: this.state.pageName,
       crumbs: breadcrumb.crumbs,
     })
   }

src/utils/helper.js

@@ -119,3 +119,31 @@ export function getElapsedTime(start, end = new Date()) {
 
   return out
 }
+
+/**
+ * Slugify a string.
+ *
+ * @param {string} text to slugify
+ * @param {string} separator a separator if needed
+ *
+ * @returns {string}
+ */
+export function stringSlugify(text, separator) {
+  text = text
+    .toString()
+    .toLowerCase()
+    .trim()
+    .replace(/[·/_,:;']/g, '-') // Replace unwanted characters with -
+    .replace(/\s+/g, '-') // Replace spaces with -
+    .replace(/&/g, '-and-') // Replace & with 'and'
+    .replace(/[^\w-]+/g, '') // Remove all non-word chars
+    .replace(/-+/g, '-') // Replace multiple - with single -
+    .replace(/^-+/, '') // Trim - from start of text
+    .replace(/-+$/, '') // Trim - from end of text
+
+  if (separator && separator !== '-') {
+    text = text.replace(/-/g, separator)
+  }
+
+  return text
+}