Skip to content
This repository has been archived by the owner on Jun 23, 2024. It is now read-only.

Commit

Permalink
December 22' Updates (#63)
Browse files Browse the repository at this point in the history
* JRW-137 chore: Updated browserlist
* JRW-137 chore: A little bit of this, a bit of that.
  • Loading branch information
jamesrwilliams authored Jan 2, 2023
1 parent d9cd27f commit e5e1b8f
Show file tree
Hide file tree
Showing 31 changed files with 323 additions and 183 deletions.
4 changes: 2 additions & 2 deletions gatsby-browser.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import React from 'react';
import { ThemeProvider } from './src/context/ThemeContext';

require('prismjs/plugins/line-numbers/prism-line-numbers.css');
require('prismjs/plugins/command-line/prism-command-line.css');

export const wrapRootElement = ({ element }) => (
export const wrapRootElement = ({ element }: any) => (
<ThemeProvider>{element}</ThemeProvider>
);
29 changes: 28 additions & 1 deletion gatsby-node.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const createPages: GatsbyNode['createPages'] = async ({ actions, graphql

/* Blog Post Pages */
const blogPostTemplate = path.resolve('./src/templates/BlogPostTemplate.tsx');
const queryResponse = await graphql(`
const queryResponse: any = await graphql(`
{
posts: allMdx(limit: 1000, filter: {fileAbsolutePath: {regex: "/posts/"}}) {
nodes {
Expand Down Expand Up @@ -104,6 +104,7 @@ export const sourceNodes: GatsbyNode["sourceNodes"] = async ({ actions }) => {
parent: '__SOURCE__',
internal: {
type: 'BooksBeingRead',
contentDigest: '',
},
children: [],
year: book.publication_year,
Expand All @@ -122,4 +123,30 @@ export const sourceNodes: GatsbyNode["sourceNodes"] = async ({ actions }) => {
.digest('hex');

createNode(bookNode);

// Create carbonFootprint
const carbonRequest = 'https://api.websitecarbon.com/site?url=https://jamesrwilliams.ca';
const carbonFootprintResponse = await axios.get(carbonRequest);

if(carbonFootprintResponse.data) {

const carbonFootprintData = carbonFootprintResponse.data;

const carbonNode = {
id: 'carbonFootprint',
parent: '__SOURCE__',
internal: {
type: 'CarbonFootprint',
},
children: [],
...carbonFootprintData
};

carbonNode.internal.contentDigest = crypto
.createHash('md5')
.update(JSON.stringify(carbonNode))
.digest('hex');

createNode(carbonNode);
}
};
70 changes: 37 additions & 33 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@
"@icons-pack/react-simple-icons": "^5.2.0",
"@mdx-js/mdx": "^1.6.22",
"@mdx-js/react": "^1.6.22",
"@react-icons/all-files": "^4.1.0",
"babel-plugin-styled-components": "^2.0.7",
"gatsby": "^4.19.2",
"gatsby-plugin-google-analytics": "^4.19.0",
Expand Down Expand Up @@ -63,6 +62,7 @@
"@types/node": "^17.0.45",
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"@types/react-helmet": "^6.1.6",
"@types/styled-components": "^5.1.25",
"typescript": "^4.7.4"
}
Expand Down
50 changes: 50 additions & 0 deletions src/components/CarbonFootprint.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import React from "react"
import {graphql, StaticQuery} from "gatsby";

export const CarbonFootprint = () => {
return <StaticQuery
query={graphql`
query CarbonFootprintQuery {
carbonFootprint {
green
cleanerThan
timestamp
statistics {
adjustedBytes
co2 {
grid {
grams
litres
}
renewable {
grams
litres
}
}
energy
}
}
}
`}
render={data => {

const { carbonFootprint } = data;

const carbonFootprintInGrams = carbonFootprint.statistics.co2.grid.grams;
const cleanerThan = carbonFootprint.cleanerThan;

return (
<p>
This website is estimated to produce <strong>{ carbonFootprintInGrams.toFixed(2) }g
of CO2</strong>, <em>everytime</em> someone visits. Which is estimated to be cleaner
than { cleanerThan * 100 }% of the internet, find out more with
the <a
href="https://www.websitecarbon.com/website/jamesrwilliams-ca/"
target={'_blank'}
rel={"noopener"}
>Website Carbon Calculator</a>.
</p>
)
}}
/>
}
14 changes: 4 additions & 10 deletions src/components/Footer/Footer.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import React from 'react';
import styled from 'styled-components';
import {
GitHub, HackerRank, Instagram, LinkedIn, Pluralsight, StackOverflow, TrailBlazer, Twitter,
GitHub, HackerRank, Instagram, LinkedIn, Pluralsight, StackOverflow, TrailBlazer, Twitter, CodePen,
} from '../social/Social';
import { mediaQuery } from '../../theme/variables';
import {HipHipArray} from "../HipHipArray/HipHipArray";

const socialLinks = [
<GitHub />,
<LinkedIn />,
<Twitter />,
<Instagram />,
<CodePen />,
<Pluralsight />,
<HackerRank />,
<StackOverflow />,
Expand Down Expand Up @@ -83,7 +85,7 @@ const Footer: React.FC = () => (
</span>
<HipHipArray />
</FooterMeta>
<Spacer />
<span style={{ flexGrow: 1 }} />
<SocialFooterNav>
{ socialLinks.map((SocialLink) => (
<SocialFooterNavIconWrapper key={SocialLink.type}>
Expand All @@ -96,11 +98,3 @@ const Footer: React.FC = () => (
);

export default Footer;

const HipHipArray: React.FC = () => (
<code style={{ alignSelf: 'center', opacity: '.5', marginLeft: '1rem' }} role="img" aria-label="Hip Hip Array..." title="Hip Hip Array...">
[&apos;hip&apos;,&apos;hip&apos;]
</code>
);

export const Spacer = () => <span style={{ flexGrow: 1 }} />;
76 changes: 76 additions & 0 deletions src/components/Hero/Hero.styled.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import styled from "styled-components";
import {mediaQuery, textGradient} from "../../theme/variables";
import {OutboundLink} from "gatsby-plugin-google-analytics";

export const HeroWrapper = styled.div`
position: relative;
font-weight: 200;
height: calc(100vh - 85px);
display: flex;
color: ${({theme}) => theme.headingColor};
align-items: center;
background: ${({theme}) => theme.hero.background};
@media screen and ${mediaQuery.minMd} {
height: calc(100vh - 55px);
}
.lead,
.gradient {
font-size: 25px;
font-weight: 400;
@media screen and ${mediaQuery.minMd} {
font-size: 45px;
}
}
.lead {
margin-right: .7ch;
font-weight: 200;
transition: all 1s ease;
margin-bottom: 1rem;
}
.intro {
font-size: 16px;
@media screen and ${mediaQuery.minMd} {
max-width: 650px;
font-size: 18px;
padding-bottom: 2rem;
}
}
.gradient {
display: block;
margin-top: 0;
text-decoration: none;
margin-bottom: 2rem;
${textGradient}
}
`;

export const StyledEmployerLink = styled(OutboundLink)`
color: inherit;
text-decoration: none;
position: relative;
overflow: hidden;
&:after {
content: "";
display: block;
position: absolute;
left: .1ch;
right: .1ch;
bottom: 0;
height: 2px;
background: linear-gradient(to right, #fff0, #fff0, #0ba7fd, #01d8d1);
background-size: 300% 200%;
transition: all 1s ease;
}
&:hover:after {
background-position: 100% 0;
}
`;
Loading

0 comments on commit e5e1b8f

Please sign in to comment.