css improvements, add tweet button, add github issue comment button, …

…add various map keys
brettinternet · May 1, 2019 · 731ad20 · 731ad20
1 parent 43b212f
commit 731ad20
Show file tree

Hide file tree

Showing 12 changed files with 174 additions and 93 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -14,8 +14,8 @@ const siteMetadata = {
   googleFontLink:
     "https://fonts.googleapis.com/css?family=Patua+One|Roboto+Slab:300,400,700",
   routes: [
-    { name: "blog", to: "/blog" },
-    { name: "projects", to: "/projects" },
+    { name: "blog", to: "/blog/" },
+    { name: "projects", to: "/projects/" },
   ],
   postBasePath: "/blog", // + :slug
   socialLinks: [

diff --git a/src/components/Card.js b/src/components/Card.js
@@ -16,8 +16,10 @@ const Card = ({ to, href, className, title, description, details, tags }) => (
         {details && <Details>{details}</Details>}
         {tags && (
           <Tags>
-            {tags.map((tag, index) => (
-              <Tag themed>{tag}</Tag>
+            {tags.map(tag => (
+              <Tag key={tag} themed>
+                {tag}
+              </Tag>
             ))}
           </Tags>
         )}
@@ -79,6 +81,10 @@ const RootA = styled(A)`
     h3 {
       text-decoration: underline;
     }
+
+    p {
+      text-decoration: none;
+    }
   }
 `
 

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -9,7 +9,7 @@ import Switch from "components/Switch"
 import MenuSvg from "images/icons/menu.svg"
 import CloseSvg from "images/icons/close.svg"
 
-const activeClassName = "active"
+const isJavascriptEnabled = true
 class Header extends React.PureComponent {
   componentDidUpdate(prevProps, prevState) {
     /**
@@ -52,12 +52,21 @@ class Header extends React.PureComponent {
   closeMobileMenu = () => this.props.closeMobileMenu()
 
   render() {
-    const { siteTitle, routes, onChangeTheme, themeInverted } = this.props
+    const {
+      siteTitle,
+      routes,
+      onChangeTheme,
+      themeInverted,
+      location,
+    } = this.props
     return (
       <StyledHeader>
         <Nav>
           <Brand>
-            <BrandA to="/" activeClassName={activeClassName}>
+            <BrandA
+              to="/"
+              active={location.pathname === "/" ? "true" : undefined}
+            >
               {siteTitle}
               {/* {siteTitle.split("").map((letter, index, arr) => {
                 const coefficient = themeInverted ? arr.length - index : index
@@ -91,7 +100,10 @@ class Header extends React.PureComponent {
             <Ul>
               {this.props.mobileMenuActive && (
                 <Li>
-                  <StyledA to="/" activeClassName={activeClassName}>
+                  <StyledA
+                    to="/"
+                    active={location.pathname === "/" ? "true" : undefined}
+                  >
                     Home
                   </StyledA>
                 </Li>
@@ -100,17 +112,24 @@ class Header extends React.PureComponent {
                 <Li key={index}>
                   <StyledA
                     to={to}
-                    activeClassName={activeClassName}
+                    active={
+                      location.pathname
+                        .split("/")
+                        .indexOf(to.substring(1, to.length - 1)) > -1
+                        ? "active"
+                        : undefined
+                    }
                     // transitionMultiplier={(index + 1) * 500}
                   >
                     {name}
                   </StyledA>
                 </Li>
               ))}
-              <Li
-              // style={{ position: "relative" }}
-              >
-                {/* <span
+              {isJavascriptEnabled && (
+                <Li
+                // style={{ position: "relative" }}
+                >
+                  {/* <span
                 style={{
                   position: "absolute",
                   fontSize: "8px",
@@ -121,15 +140,16 @@ class Header extends React.PureComponent {
                 >
                   lights
                 </span> */}
-                <StyledSwitch
-                  innerLabel={"off"}
-                  innerLabelChecked={"on"}
-                  // label={themeInverted ? "" : "💡"}
-                  alignRight
-                  onChange={onChangeTheme}
-                  checked={!themeInverted}
-                />
-              </Li>
+                  <StyledSwitch
+                    innerLabel={"off"}
+                    innerLabelChecked={"on"}
+                    // label={themeInverted ? "" : "💡"}
+                    alignRight
+                    onChange={onChangeTheme}
+                    checked={!themeInverted}
+                  />
+                </Li>
+              )}
             </Ul>
           </Menu>
         </Nav>
@@ -160,6 +180,7 @@ const StyledHeader = styled.header`
 
 const Nav = styled.nav`
   ${appWidth}
+  max-width: ${breakpoints.sm}px;
   padding-top: 15px;
   padding-bottom: 15px;
   display: flex;
@@ -183,15 +204,15 @@ const Brand = styled.div`
   `}
 `
 
-const BrandA = styled(A).attrs({
-  activeClassName,
-})`
+const BrandA = styled(A)`
   text-decoration: none;
   padding: 0.25rem 0;
   color: ${props => props.theme.neutralDark};
   padding: 0.25rem 0.5rem;
   border-radius: 4px;
   transition: background-color 200ms, color 200ms;
+  /* Make up for padding-left offset for visual alignment */
+  margin-left: -0.5rem;
 
   &:hover {
     text-decoration: none;
@@ -202,9 +223,11 @@ const BrandA = styled(A).attrs({
     background-color: ${props => props.theme.themeTertiary};
   }
 
-  &.${activeClassName} {
-    background-color: ${props => props.theme.neutralLight};
-  }
+  ${({ active }) =>
+    active &&
+    css`
+      background-color: ${props => props.theme.neutralLight};
+    `}
 
   & > span {
     color: inherit;
@@ -266,9 +289,7 @@ const Li = styled.li`
   `}
 `
 
-const StyledA = styled(A).attrs({
-  activeClassName,
-})`
+const StyledA = styled(A)`
   cursor: pointer;
   display: block;
   text-decoration: none;
@@ -286,9 +307,11 @@ const StyledA = styled(A).attrs({
     background-color: ${props => props.theme.themeTertiary};        
   }
 
-  &.${activeClassName} {
-    background-color: ${props => props.theme.neutralLight};    
-  }
+  ${({ active }) =>
+    active &&
+    css`
+      background-color: ${props => props.theme.neutralLight};
+    `}
 
   ${tabletQuery`
     display: inline;

diff --git a/src/components/PostDetails.js b/src/components/PostDetails.js
@@ -30,9 +30,9 @@ const PostDetails = ({ title, date, link, description, tags }) => (
 
       {tags && tags.length && (
         <Tags>
-          {tags.map((tag, index) => (
-            <A to={`/tags/${kebabCase(tag)}`}>
-              <Tag key={index} textMuted mRight="0.5rem">
+          {tags.map(tag => (
+            <A key={tag} to={`/tags/${kebabCase(tag)}`}>
+              <Tag textMuted mRight="0.5rem">
                 {tag}
               </Tag>
             </A>

diff --git a/src/components/Section.js b/src/components/Section.js
@@ -11,6 +11,7 @@ const Section = styled.section`
   ${({ flex }) => flex && flexStyles}
   ${({ thin }) => thin && thinStyles}
   ${({ skinny }) => skinny && skinnyStyles}
+  ${({ noPadding }) => noPadding && noPaddingStyles}
 `
 
 Section.propTypes = {
@@ -33,3 +34,7 @@ const thinStyles = css`
 const skinnyStyles = css`
   max-width: ${breakpoints.xs}px;
 `
+
+const noPaddingStyles = css`
+  padding: 0;
+`
diff --git a/src/components/Tag.js b/src/components/Tag.js
@@ -3,6 +3,8 @@ import PropTypes from "prop-types"
 import styled from "styled-components"
 
 const Tag = ({
+  className,
+  style,
   children,
   themed,
   noBackground,
@@ -12,6 +14,8 @@ const Tag = ({
   noPadding,
 }) => (
   <StyledTag
+    className={className}
+    style={style}
     themed={themed}
     noBackground={noBackground}
     textMuted={textMuted}
@@ -24,6 +28,7 @@ const Tag = ({
 )
 
 Tag.propTypes = {
+  style: PropTypes.object,
   themed: PropTypes.bool,
   noBackground: PropTypes.bool,
   textMuted: PropTypes.bool,

diff --git a/src/components/image.js b/src/components/image.js
diff --git a/src/html.js b/src/html.js
@@ -0,0 +1,36 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default function HTML(props) {
+  return (
+    <html {...props.htmlAttributes}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        />
+        {props.headComponents}
+      </head>
+      <body {...props.bodyAttributes}>
+        {props.preBodyComponents}
+        <div
+          key={`body`}
+          id="___gatsby"
+          dangerouslySetInnerHTML={{ __html: props.body }}
+        />
+        {props.postBodyComponents}
+      </body>
+    </html>
+  )
+}
+
+HTML.propTypes = {
+  htmlAttributes: PropTypes.object,
+  headComponents: PropTypes.array,
+  bodyAttributes: PropTypes.object,
+  preBodyComponents: PropTypes.array,
+  body: PropTypes.string,
+  postBodyComponents: PropTypes.array,
+}
diff --git a/src/pages/projects.js b/src/pages/projects.js
@@ -104,3 +104,22 @@ const Cards = styled.div`
     }
   `}
 `
+
+//// add project images
+// const Image = () => (
+//   <StaticQuery
+//     query={graphql`
+//       query {
+//         placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
+//           childImageSharp {
+//             fluid(maxWidth: 300) {
+//               ...GatsbyImageSharpFluid
+//             }
+//           }
+//         }
+//       }
+//     `}
+//     render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
+//   />
+// )
+// export default Image
diff --git a/src/pages/tags.js b/src/pages/tags.js
@@ -22,7 +22,7 @@ class TagsPageRoute extends React.Component {
         }}
         location={this.props.location}
       >
-        <Section skinny>
+        <Section thin>
           <h2>Tags</h2>
           <Tags>
             {allTags.map(tag => (
@@ -38,17 +38,19 @@ class TagsPageRoute extends React.Component {
             ))}
           </Tags>
 
-          <hr />
+          <Section skinny noPadding>
+            <hr />
 
-          <div
-            css={`
-              text-align: center;
-            `}
-          >
-            <NavButton dir="backward" rel="prev" to="/blog/">
-              Browse all posts
-            </NavButton>
-          </div>
+            <div
+              css={`
+                text-align: center;
+              `}
+            >
+              <NavButton dir="backward" rel="prev" to="/blog/">
+                Browse all posts
+              </NavButton>
+            </div>
+          </Section>
         </Section>
       </Layout>
     )