~wuz/wuz.sh-old

be82a426c7698d7b3b8d16cee6e5661cc14f646a — Conlin Durbin 1 year, 8 months ago ee04ed0
Adding new styles
M gatsby-config.js => gatsby-config.js +55 -0
@@ 52,6 52,61 @@ module.exports = {
      },
    },
    {
      resolve: `gatsby-plugin-feed-mdx`,
      options: {
        query: `
          {
            site {
              siteMetadata {
                title
                description
                siteUrl
                site_url: siteUrl
              }
            }
          }
        `,
        feeds: [
          {
            serialize: ({ query: { site, allMdx } }) => {
              return allMdx.edges.map(edge => {
                return Object.assign({}, edge.node.frontmatter, {
                  description: edge.node.description,
                  title: edge.node.frontmatter.title,
                  date: edge.node.frontmatter.date,
                  url:
                    site.siteMetadata.siteUrl + '/blog' + edge.node.fields.slug,
                  guid:
                    site.siteMetadata.siteUrl + '/blog' + edge.node.fields.slug,
                });
              });
            },
            query: `
              {
                allMdx(sort: { fields: [frontmatter___date], order: DESC }) {
                  edges {
                    node {
                      excerpt
                      fields {
                        slug
                      }
                      frontmatter {
                        date(formatString: "MMMM DD, YYYY")
                        title
                        description
                      }
                    }
                  }
                }
              }
            `,
            output: '/feed.xml',
            title: 'Wuz Feed',
          },
        ],
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/blog`,

M package.json => package.json +1 -2
@@ 21,8 21,7 @@
    "gatsby-plugin-alias-imports": "^1.0.5",
    "gatsby-plugin-draft": "0.0.4",
    "gatsby-plugin-fathom": "^1.0.4",
    "gatsby-plugin-feed": "^2.2.1",
    "gatsby-plugin-feed-generator": "^1.0.9",
    "gatsby-plugin-feed-mdx": "^1.0.1",
    "gatsby-plugin-manifest": "^2.1.1",
    "gatsby-plugin-mdx-prismjs": "^1.0.4",
    "gatsby-plugin-netlify": "^2.0.17",

M src/components/BlogPost.scss => src/components/BlogPost.scss +17 -23
@@ 5,6 5,10 @@
  max-width: $main-width;
  width: 100%;
  margin: 0 auto;

  .Title {
    margin-bottom: $spacing-lg;
  }
}

.BlogHeader {


@@ 56,36 60,26 @@

.Post {
  display: block;
  height: auto;
  color: color(night);
  border-bottom: 3px solid color(night);
  background: color(cloud);
  margin-bottom: $spacing-lg;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(color(night), 0.16);
  margin: $spacing-lg 0;
  text-decoration: none;

  .dark-mode & {
    background: color(night);
    color: color(cloud);
    border-bottom: 3px solid color(stone);

    &:hover,
    &:focus {
      border-bottom: 3px solid color(deep);
    }
  }

  &:hover,
  &:focus {
    border-bottom: 3px solid color(tonic);
  }

  .Post-cover {
  &:after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    content: '';
    display: block;
    max-width: 400px;
    width: 100%;
    border-bottom: 1px solid color(rain);
  }

  .Post-content {
    padding: $spacing-sm $spacing-lg;
  .dark-mode & {
    background: color(night);
    color: color(cloud);
  }
}


M src/components/ColorSwitch.scss => src/components/ColorSwitch.scss +2 -2
@@ 6,8 6,8 @@
  align-items: center;
  justify-content: center;
  position: fixed;
  right: $spacing-lg;
  top: $spacing-lg;
  right: 7%;
  top: 7%;
  z-index: 100;
}


M src/components/Header.scss => src/components/Header.scss +6 -14
@@ 126,23 126,15 @@
  }

  .Header-logo {
    max-width: 200px;
    width: 100%;
    padding: $spacing-lg;

    &:hover {
      .logo-fill {
        fill: url(#logo-gradient);
      }
    }
    width: 150px;
    height: 150px;
    padding: $spacing-md;
    flex-shrink: 0;
    background: none;
    border-radius: 100%;

    .dark-mode & {
      fill: $color-sky;
    }

    @media screen and (max-width: $breakpoint-sm) {
      width: 100px;
      padding: 0;
    }
  }
}

M src/components/Logo.js => src/components/Logo.js +1 -1
@@ 1,7 1,7 @@
import React from 'react';

const Logo = ({ className, alt }) => (
  <svg viewBox="0 0 167 125" className={className}>
  <svg viewBox="0 0 167 135" className={className}>
    <linearGradient id="logo-gradient" x1="50%" y1="0%" x2="50%" y2="100%">
      <stop offset="0%" stopColor="#FF9AA2">
        <animate

M src/components/Popover/Popover.scss => src/components/Popover/Popover.scss +2 -1
@@ 5,6 5,7 @@
  display: inline-block;
  position: relative;
  width: auto;
  max-width: 100%;
  cursor: pointer;

  &.Popover--hovered {


@@ 18,8 19,8 @@
    bottom: 95%;
    left: 50%;
    display: none;
    min-width: 200px;
    width: auto;
    white-space: nowrap;
    min-height: 40px;
    padding: 10px 15px;
    font-size: typescale(4);

M src/components/layout.scss => src/components/layout.scss +7 -2
@@ 19,11 19,16 @@
}

.Container {
  background-color: color(cream);
  margin: $spacing-sm;
  background-color: color(cloud);
  margin: $spacing-lg;
  padding: $spacing-lg;
  box-shadow: 0 0 10px rgba(color(night), 0.25);

  .dark-mode & {
    background-color: color(stone);
  }

  @media screen and (max-width: $breakpoint-sm) {
    margin: $spacing-sm;
  }
}

M src/pages/blog.js => src/pages/blog.js +23 -17
@@ 3,6 3,8 @@ import React from 'react';
import Layout from '../components/layout';
import SEO from '../components/seo';
import Title from '../components/Title';
import SubHeading from '../components/Subheading';
import Text from '../components/Text';

class BlogIndex extends React.Component {
  render() {


@@ 12,7 14,16 @@ class BlogIndex extends React.Component {

    return (
      <Layout location={this.props.location} title={siteTitle}>
        <SEO title="All posts" keywords={[`blog`, `javascript`, `react`]} />
        <SEO
          title="All posts"
          keywords={[
            `blog`,
            `javascript`,
            `react`,
            `development`,
            `software engineering`,
          ]}
        />
        <main className="BlogRoll">
          <Title>recent posts</Title>
          {posts.map(({ node }) => {


@@ 23,22 34,18 @@ class BlogIndex extends React.Component {
                key={node.fields.slug}
                className="Post"
              >
                {console.log(node.frontmatter)}
                {node.frontmatter.cover_image && (
                  <img
                    src={node.frontmatter.cover_image}
                    alt=""
                    className="Post-cover"
                  />
                )}
                <div className="Post-content">
                  <h3>{title}</h3>
                  <small>{node.frontmatter.date}</small>
                  <p
                    dangerouslySetInnerHTML={{
                      __html: node.excerpt || node.frontmatter.description,
                    }}
                  />
                  <div className="d-flex d-flex-ai-c d-flex-jc-sb mb-lg">
                    <SubHeading>{title}</SubHeading>
                    <small>{node.frontmatter.date}</small>
                  </div>
                  <Text>
                    <p
                      dangerouslySetInnerHTML={{
                        __html: node.excerpt || node.frontmatter.description,
                      }}
                    />
                  </Text>
                </div>
              </Link>
            );


@@ 67,7 74,6 @@ export const pageQuery = graphql`
          }
          frontmatter {
            date(formatString: "MMMM DD, YYYY")
            cover_image
            title
            description
          }

M src/pages/index.js => src/pages/index.js +49 -45
@@ 1,5 1,5 @@
import { graphql, Link } from 'gatsby';
import React from 'react';
import React, { Fragment } from 'react';
import Callout from '../components/Callout';
import CalloutContainer from '../components/CalloutContainer';
import Layout from '../components/layout';


@@ 55,7 55,7 @@ class Index extends React.Component {
                </>
              }
            >
              <super className="c-sunflower">*</super>
              <super className="c-tonic">*</super>
            </Popover>
          </Lead>
        </section>


@@ 76,7 76,53 @@ class Index extends React.Component {
        <Main>
          <Heading>About Me</Heading>
          <div>
            <SubHeading>Around the Web</SubHeading>
            <SubHeading>Work Stuff</SubHeading>
            <Text>
              doing engineering things at{' '}
              <a href="https://hackerrank.com">HackerRank</a>
              <br />
              <small>
                Previously at <a href="https://mimirhq.com">Mimir</a> and{' '}
                <a href="https://lessonly.com">Lessonly</a>
              </small>
            </Text>
            <Spacer size="md" />
            <Text>
              founded <a href="https://www.f6s.com/tebogollc">Tebogo</a> once
              upon a time
            </Text>
          </div>
          <div>
            <SubHeading>Current Focuses</SubHeading>
            <List>
              <ListItem>
                <a href="https://indyhackers.org">IndyHackers</a> - A community
                for tech folks in Indiana
              </ListItem>
              <ListItem>
                Untitled Hackerspace - A new idea for the new year
              </ListItem>
            </List>
          </div>
          <div>
            <SubHeading>Recent Writing</SubHeading>
            <Text>
              Some recent posts of mine:{' '}
              {posts.map(({ node }, index) => {
                const title = node.frontmatter.title || node.fields.slug;
                return (
                  <Fragment key={node.fields.slug}>
                    <Link to={node.fields.slug}>{title}</Link>
                    {index !== posts.length - 1 && ', '}
                  </Fragment>
                );
              })}
              Find <Link to="/blog">more writings here</Link>
            </Text>
          </div>
          <Spacer size="md" />
          <div>
            <SubHeading>Find me on the web</SubHeading>
            <List>
              <ListItem>
                <a rel="me" href="https://sunbeam.city/@wuz">


@@ 105,44 151,7 @@ class Index extends React.Component {
              </ListItem>
            </List>
          </div>
          <div>
            <SubHeading>Current Focuses</SubHeading>

            <List>
              <ListItem>
                <a href="https://indyhackers.org">IndyHackers</a> - A community
                for tech folks in Indiana
              </ListItem>
              <ListItem>
                Untitled Hackerspace - A new idea for the new year
              </ListItem>
            </List>
          </div>
          <div>
            <SubHeading>Recent Writing</SubHeading>
            <List>
              {posts.map(({ node }) => {
                const title = node.frontmatter.title || node.fields.slug;
                return (
                  <ListItem key={node.fields.slug}>
                    <Link to={node.fields.slug}>{title}</Link>
                  </ListItem>
                );
              })}
            </List>
            <Link to="/blog">More Writings</Link>
          </div>
          <div>
            <SubHeading>About Me</SubHeading>
            <Text>
              doing engineering things at{' '}
              <a href="https://lessonly.com">Lessonly</a>
              <br />
              <small>
                Previously at <a href="https://mimirhq.com">Mimir</a>
              </small>
            </Text>
          </div>
          <div>
            <SubHeading>Projects</SubHeading>
            <Text>


@@ 154,11 163,6 @@ class Index extends React.Component {
              </a>
            </Text>
          </div>
          <Spacer size="md" />
          <Text>
            founded <a href="https://www.f6s.com/tebogollc">Tebogo</a> once upon
            a time
          </Text>
        </Main>
      </Layout>
    );

M src/styles/main.scss => src/styles/main.scss +2 -1
@@ 8,6 8,7 @@
@import 'generic/headings';
@import 'generic/prism';

@import 'utilities/padding';
@import 'utilities/display';
@import 'utilities/spacing';
@import 'utilities/width';
@import 'utilities/colors';

A src/styles/utilities/display.scss => src/styles/utilities/display.scss +15 -0
@@ 0,0 1,15 @@
.d-flex {
  display: flex;
}

.d-flex-ai-c {
  align-items: center;
}

.d-flex-jc-c {
  justify-content: center;
}

.d-flex-jc-sb {
  justify-content: space-between;
}

R src/styles/utilities/padding.scss => src/styles/utilities/spacing.scss +8 -0
@@ 7,3 7,11 @@
    padding: $spacing-md;
  }
}

.m-lg {
  margin: $spacing-lg;
}

.mb-lg {
  margin-bottom: $spacing-lg;
}

M yarn.lock => yarn.lock +5 -13
@@ 6544,20 6544,12 @@ gatsby-plugin-fathom@^1.0.4:
    "@babel/runtime" "7.1.2"
    react "16.5.2"

gatsby-plugin-feed-generator@^1.0.9:
  version "1.0.9"
  resolved "https://registry.yarnpkg.com/gatsby-plugin-feed-generator/-/gatsby-plugin-feed-generator-1.0.9.tgz#d14e995f41885bbd45554219c11188a655d08d4c"
  integrity sha512-94g5s/zvgImBXA+xrTvsUPhSjymPwcHG2VTHjxZBhO87Q+sNa/xkhBBFhDVAxmMZxoEk5a8oDmFtI4MvzI/mhg==
  dependencies:
    pify "^3.0.0"
    rss "^1.2.2"

gatsby-plugin-feed@^2.2.1:
  version "2.3.26"
  resolved "https://registry.yarnpkg.com/gatsby-plugin-feed/-/gatsby-plugin-feed-2.3.26.tgz#00043a581b81b73c595b7620fe0f381d241ca8da"
  integrity sha512-L2/LyCkZ+cPF2QAISszEwi2D2CuRk6ELp75d8tN7oCRDKkcSCJZND6gzIvBxNzGjEnbxtTk9OhL/1TnmJTALNQ==
gatsby-plugin-feed-mdx@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/gatsby-plugin-feed-mdx/-/gatsby-plugin-feed-mdx-1.0.1.tgz#5305b9a8c787a221d180c88542df0506db3ad7b2"
  integrity sha512-8a9J2korubej5OAr3MQJl3u9Js0x9ShCXTuceHpGfsBjAsHq/ykyN7xknDobKVd6HNGOORRM/GmhVM64oMx3Jw==
  dependencies:
    "@babel/runtime" "^7.7.6"
    "@babel/runtime" "^7.7.2"
    "@hapi/joi" "^15.1.1"
    fs-extra "^8.1.0"
    lodash.merge "^4.6.2"