refactor: header layout and some style fixes (#232)

* fix: change small device size to be 500+ pixels instead of 400 #231 * refactor: get different featured image for share in header metas #230 * refactor: make sure nav drawer is above all other components in z-space #230 * refactor: create new header block #230 * fix: use new header structure but fix reading time data #229 * fix: get proper values for reading time and word count #229 * refactor: remove redundant styles #230 * refactor: remove the old image headers #230 * refactor: update header for text only posts #230 * refactor: header layout for listing pages #230 * fix: refine small layout items in header * fix: missing path to list image * refactor: tune H2 style * fix: add radial background to header #230
ajfisher · Sep 29, 2024 · eeaf956 · eeaf956
1 parent 589c3e9
commit eeaf956
Show file tree

Hide file tree

Showing 15 changed files with 211 additions and 164 deletions.
diff --git a/site/src/components/devices.js b/site/src/components/devices.js
@@ -1,7 +1,7 @@
 /* Used to specify the main breakpoints used for the site */
 
 const size = {
-  small: '401px',
+  small: '501px',
   medium: '601px',
   large: '821px',
   wide: '1051px'

diff --git a/site/src/components/header.js b/site/src/components/header.js
@@ -1,39 +1,79 @@
 import { Link } from 'gatsby';
+import { GatsbyImage, getImage } from "gatsby-plugin-image";
 import PropTypes from 'prop-types';
 import React from 'react';
 import styled from 'styled-components';
 import humanize from 'humanize-plus';
 import moment from 'moment';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCamera, faClock } from '@fortawesome/free-solid-svg-icons';
 
 import { device } from './devices';
-const TextHeader = styled.header`
+
+const BaseHeader = styled.header`
+  background: var(--darkened-grey);
+  background: -moz-radial-gradient(circle, var(--dark-grey) 0%, var(--darkened-grey) 100% );
+  background: -webkit-radial-gradient(circle, var(--dark-grey) 0%, var(--darkened-grey) 100% );
+  background: radial-gradient(circle, var(--dark-grey) 0%, var(--darkened-grey) 100% );
+
   box-sizing: border-box;
   border-bottom: 2px solid var(--highlight);
-  min-height: 50vh;
-  margin: 0;
-  padding: var(--gutter) 0;
 
-  /** Put the background gradient in**/
-  background-color: var(--darkened-grey);
-  background: linear-gradient(45deg, var(--dark-base) 30%, var(--highlight) 100%);
+  margin: 0;
 
   -webkit-box-shadow: 0 0.5rem 0.8rem #aaa;
      -moz-box-shadow: 0 0.5rem 0.8rem #aaa;
           box-shadow: 0 0.65rem 0.8rem #aaa;
 
+  .headerimage, .imagefill {
+    min-height: 60vh;
+
+    @media only screen and ${device.small} {
+      min-height: 60vh;
+    }
+
+    @media only screen and ${device.medium} {
+      min-height: 65vh;
+    }
+
+    @media only screen and ${device.large} {
+      min-height: 40vh;
+      max-height: 60vh;
+    }
+
+    @media only screen and ${device.wide} {
+      max-height: 70vh;
+    }
+  }
+`;
+
+const TextHeader = styled(BaseHeader)`
+  /**padding: var(--gutter) 0;**/
+
+  /**
   @media only screen and ${device.medium} {
     min-height: 60vh;
     max-height: 90vh;
     padding: var(--gutter) 0;
   }
 
-  // put the little shadow along the bottom for big screens.
   @media only screen and ${device.large} {
     min-height: 70vh;
   }
+  **/
+
+  .imagefill {
+    /** Put the background gradient in**/
+    background-color: var(--darkened-grey);
+    background: linear-gradient(45deg, var(--dark-base) 30%, var(--highlight) 100%);
+  }
 `;
 
-const ImageHeader = styled(TextHeader)`
+const ImageHeader = styled(BaseHeader)`
+  /** this is a noop as sizing handled in base **/
+`;
+
+const OldImageHeader = styled(BaseHeader)`
   background-color: var(--darkened-grey);
   background-repeat: no-repeat;
   background-position: center;
@@ -61,37 +101,40 @@ const ImageHeader = styled(TextHeader)`
 const Container = styled.div`
   margin:0;
   width: 100vw;
+  margin-top: -10rem;
   padding-top: 0rem;
+  padding-bottom: var(--gutter);
+  position: relative;
+  z-index: 2;
 
+  @media only screen and ${device.small} {
+    margin-top: -12rem;
+    padding-bottom: calc(0.5 * var(--gutter));
+  }
   @media only screen and ${device.medium} {
-    /** width: 90vw;
-    margin: 0 5vw;**/
   }
 
   @media only screen and ${device.large} {
-    max-width: 687px;
   }
 
   @media only screen and ${device.wide} {
     max-width: 1020px;
     margin: 0 auto;
+    margin-top: -15rem;
   }
 `
 
 const StyledTitle = styled.h1`
   background-color: var(--light-base);
   padding: var(--gutter);
-  margin: 0rem var(--gutter);
   color: var(--dark-base);
-  min-height: 25vh;
-  max-height: 35vh;
   width: min-content;
-  min-width: 60vw;
-  max-width: calc(100% - 2 * var(--gutter));
-  border-radius: 0.2rem;
+  min-width: 90vw;
+  min-height: 14rem;
   box-sizing: border-box;
   font-size: 4rem;
   line-height: 4rem;
+  margin: 0;
 
   &.enlarge {
     font-size: 5rem;
@@ -131,6 +174,10 @@ const StyledTitle = styled.h1`
     color: var(--dark-grey);
   }
 
+  @media only screen and ${device.small} {
+    min-width: 80vw;
+  }
+
   @media only screen and ${device.medium} {
     padding: var(--gutter);
     max-width: 70vw;
@@ -143,15 +190,12 @@ const StyledTitle = styled.h1`
     line-height: 6rem;
     width: 61vw;
     max-height: 40vh;
+    min-width: 70vw;
   }
 
   @media only screen and ${device.wide} {
-    min-width: unset;
-    max-width: calc(66% - var(--gutter));
-    min-height: 35vh;
-    max-height: 45vh;
-    margin: 0;
-    /**width: 45%;**/
+    min-width: 67%;
+    width: 67%;
   }
 `;
 
@@ -160,7 +204,10 @@ const Para = styled.p`
   padding: 0 var(--gutter);
   font-size: 1.8rem;
   margin: var(--gutter) 0;
+  margin-block-end: 0;
   box-sizing: border-box;
+  width: min-content;
+  min-width: 70vw;
 
   @media only screen and ${device.medium} {
     font-size: 2rem;
@@ -174,7 +221,7 @@ const Para = styled.p`
   }
 
   @media only screen and ${device.wide} {
-    max-width: 61%;
+    min-width: 67%;
   }
 `;
 
@@ -193,11 +240,13 @@ const Lede = styled(Para)`
 
 const PostData = styled(Para)`
   font-size: 1.8rem;
-  margin-bottom: 0;
-
-  & span {
-    color: var(--light-base);
-  }
+  color: var(--lightened-grey);
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: calc(0.5 * var(--gutter));
+  min-width: 90vw;
 
   @media only screen and ${device.medium} {
     font-size: 2rem;
@@ -231,13 +280,75 @@ Title.defaultProps = {
 
 const Featured = styled.p`
   color: var(--highlight);
-  margin: 0 var(--gutter);
+  margin: calc(0.5 * var(--gutter)) var(--gutter);
   text-transform: uppercase;
   font-size: 1.8rem;
+  text-decoration: underline;
 `;
 
+const Header = ({
+  title, date, excerpt, url,
+  featured=false,
+  featuredimage, featuredImageBy,
+  smalltitle, largetitle,
+  readingTime=0, wordCount={} }) => {
+
+    let formatted_date;
+    if (typeof(date) !== 'undefined') {
+      formatted_date = moment(date).format('ddd, MMM Do YYYY');
+    }
+
+    const rounded_time = Math.ceil(readingTime) || 0;
+    const humanised_words = humanize.compactInteger(wordCount.words, 1) || 0;
+
+    const PostHeader = (featuredimage === null) ? TextHeader : ImageHeader;
+    const postimage = getImage(featuredimage);
+
+    return (
+      <PostHeader>
+        { featuredimage !== null &&
+          <GatsbyImage image={postimage} alt={featuredImageBy} class="headerimage" />
+        }
+        { featuredimage === null &&
+          <div class="imagefill" />
+        }
+        <Container className="wrapper">
+          <Title url={url} smalltitle={smalltitle} largetitle={largetitle}>{title}</Title>
+          { featured &&
+            <Featured>Featured Post</Featured>
+          }
+          { excerpt != null && excerpt.length > 0 &&
+            <Lede>{excerpt}</Lede>
+          }
+          { typeof(date) !== 'undefined' &&
+            <PublishedDate className="date">Published: {formatted_date}</PublishedDate>
+          }
+          { rounded_time > 0 &&
+            <PostData className="postdata">
+                <span>
+                  <FontAwesomeIcon icon={faClock}/>
+                </span>
+                <span>
+                {rounded_time} min
+                ({humanised_words} words)
+                </span>
+            </PostData>
+          }
+          { typeof(featuredimage) !== 'undefined' &&
+            featuredImageBy &&
+            <PostData>
+              <span>
+                <FontAwesomeIcon icon={faCamera}/>
+              </span>
+              <span>{featuredImageBy}</span>
+            </PostData>
+          }
+        </Container>
+      </PostHeader>
+    );
+};
 
-const Header = ({ title, date, excerpt, url, featured=false, featuredimage,
+const OldHeader = ({ title, date, excerpt, url, featured=false, featuredimage,
   smalltitle, largetitle, readingTime={} }) => {
 
     let formatted_date;
@@ -248,7 +359,7 @@ const Header = ({ title, date, excerpt, url, featured=false, featuredimage,
     const rounded_time = Math.ceil(readingTime.minutes) || 0;
     const humanised_words = humanize.compactInteger(readingTime.words, 1) || 0;
 
-    const PostHeader = (typeof(featuredimage) === 'undefined') ? TextHeader : ImageHeader;
+    const PostHeader = (typeof(featuredimage) === 'undefined') ? TextHeader : OldImageHeader;
 
     return (
       <PostHeader $featuredimage={featuredimage}>
@@ -287,3 +398,5 @@ Header.defaultProps = {
 };
 
 export default Header;
+
+export { OldHeader, Header };
diff --git a/site/src/components/layout.js b/site/src/components/layout.js
@@ -45,15 +45,10 @@ export const Article = styled.article`
   & section {
     margin-top: var(--gutter);
 
-    & h2 {
-      box-shadow: var(--gutter) 0 0 var(--light-base), calc(var(--gutter) * -1) 0 0 var(--light-base);
-    }
-
     & h2, & h3 {
       margin: 0;
       margin-left: var(--gutter);
       padding: 0px 0px 0.5rem;
-      box-decoration-break: clone;
     }
 
     & h4, & h5 {

diff --git a/site/src/components/list-layout.js b/site/src/components/list-layout.js
@@ -4,24 +4,29 @@ import Nav from './nav';
 import Footer from './footer';
 import { ListArticle } from './article';
 import { Aside, Main } from './layout';
-import { pathDate, getFeaturedImageSources } from '../lib/utils';
+import { pathDate } from '../lib/utils';
 
 const Layout = ({ children, featured={}, slug}) => {
 
   // determine the featured article and pull it from the list.
-  const {frontmatter={}, fields={}} = featured;
+  const {
+    frontmatter={}, fields={},
+    timeToRead, wordCount
+  } = featured;
   const excerpt = frontmatter.excerpt || fields.excerpt || featured?.excerpt || '';
   const url = `/${pathDate(frontmatter.date)}/${frontmatter.slug}/`;
 
   const {title, date} = frontmatter;
-  const featuredImageSrc = getFeaturedImageSources(frontmatter?.featureimage?.childImageSharp);
+  const featuredImage = frontmatter?.featureimage || null;
+  const {imageby} = frontmatter;
 
   return (
     <>
       <Header featured='true' title={title} date={date}
-        excerpt={excerpt} featuredimage={featuredImageSrc} url={url}
+        excerpt={excerpt} url={url}
+        featuredimage={featuredImage} featuredImageBy={imageby}
         smalltitle={frontmatter.small_title} largetitle={frontmatter.large_title}
-        readingTime={fields.readingTime} />
+        readingTime={timeToRead} wordCount={wordCount} />
       <Main>
         <ListArticle>
           <section>{children}</section>

diff --git a/site/src/components/nav.js b/site/src/components/nav.js
@@ -14,7 +14,7 @@ import { device } from './devices';
 const NavButton = styled.button`
 
   display: inline-block;
-  z-index: 3; // place above content
+  z-index: 103; // place above content
   transform: ${({ isOpen }) => isOpen ? 'rotate(90deg)' : 'none'};
 
   position: fixed;
@@ -48,7 +48,7 @@ const NavMenuOverlay = styled.div`
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
-  z-index: 1;
+  z-index: 101;
 
   @media only screen and ${device.large} {
     display: none;
@@ -60,7 +60,7 @@ const NavDrawer = styled.nav`
   flex-direction: column;
 
   position: fixed;
-  z-index: 2;
+  z-index: 102;
 
   top: 0;
   right: ${({ isOpen }) => isOpen ? '0' : '-100%'};