added portfolio boilerplate and sitemap support

killshot13 · killshot13 · commit f032f7d0249e · 2021-03-27T16:47:19.000-05:00
diff --git a/.gitignore b/.gitignore
@@ -35,6 +35,7 @@ build/Release
 # Dependency directories
 node_modules/
 jspm_packages/
+target/
 
 # Typescript v1 declaration files
 typings/
@@ -65,5 +66,6 @@ public
 yarn-error.log
 .pnp/
 .pnp.js
+
 # Yarn Integrity file
 .yarn-integrity
diff --git a/.prettierignore b/.prettierignore
@@ -65,5 +65,15 @@ public
 yarn-error.log
 .pnp/
 .pnp.js
+
 # Yarn Integrity file
 .yarn-integrity
+
+# SASS/SCSS files
+src/sass/
+
+# Markdown files
+src/pages/
+LICENSE.md
+README.md
+stackbit.yaml
diff --git a/README.md b/README.md
@@ -55,6 +55,7 @@ You can [create a site](https://app.stackbit.com/create?theme=https://github.com
 
         npx @stackbit/stackbit-pull --stackbit-pull-api-url=https://api.stackbit.com/pull/60323df295aa610015b59f66 --stackbit-api-key=STACKBIT_API_KEY
 
+
 1. Start the Gatsby local development server:
 
         npm run develop
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -2,8 +2,11 @@ const siteMetadata = require('./site-metadata.json')
 
 module.exports = {
 	pathPrefix: '/',
-	siteMetadata: siteMetadata,
+	siteMetadata: {
+		siteUrl: `https://rehnert.co`,
+	},
 	plugins: [
+		`gatsby-plugin-advanced-sitemap`,
 		`gatsby-plugin-react-helmet`,
 		`gatsby-source-data`,
 		`gatsby-transformer-remark`,
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,7 @@
+{
+	"compilerOptions": {
+		"module": "commonJS",
+		"target": "es6"
+	},
+	"exclude": ["node_modules", ".cache", "public"]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
 	"name": "stackbit-fresh-theme",
 	"description": "Stackbit Fresh Theme",
 	"version": "0.0.1",
+	"prettier": "mj-pa",
 	"license": "MIT",
 	"scripts": {
 		"develop": "gatsby develop",
@@ -12,18 +13,24 @@
 	"dependencies": {
 		"@stackbit/gatsby-plugin-menus": "0.0.4",
 		"acorn": "^6.4.2",
+		"babel-runtime": "^6.26.0",
 		"bulma": "^0.9.2",
 		"chokidar": "^3.4.0",
 		"classnames": "^2.2.6",
+		"core-js": "^3.9.1",
+		"debug": "^4.3.1",
+		"documentation": "^13.2.0",
 		"fs-extra": "^7.0.1",
-		"gatsby": "2.22.17",
+		"gatsby": "^2.32.11",
+		"gatsby-plugin-advanced-sitemap": "^1.6.0",
 		"gatsby-plugin-react-helmet": "^3.3.3",
 		"gatsby-plugin-sass": "^2.8.0",
 		"gatsby-source-filesystem": "2.3.10",
 		"gatsby-transformer-remark": "2.8.14",
 		"js-yaml": "^3.12.2",
-		"lodash": "^4.17.11",
+		"lodash": "^4.17.21",
 		"marked": "^0.7.0",
+		"mj-pa": "^1.3.1",
 		"moment": "^2.23.0",
 		"moment-strftime": "^0.5.0",
 		"node-sass": "^4.14.1",
@@ -37,6 +44,7 @@
 		"rehype-react": "^3.0.2",
 		"sass": "^1.32.8",
 		"sprintf-js": "^1.1.2",
+		"typescript": "^4.2.3",
 		"yup": "^0.27.0"
 	}
 }
diff --git a/src/pages/posts/how-to-build-an-smtp-mail-server-with-express-node-and-gmail-aof.md b/src/pages/posts/how-to-build-an-smtp-mail-server-with-express-node-and-gmail-aof.md
@@ -8,7 +8,7 @@ excerpt: >-
 thumb_img_path: >-
   https://res.cloudinary.com/practicaldev/image/fetch/s--U2LLP4Iw--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/de3p75v2w0yfb2sxcgpy.jpg
 comments_count: 5
-positive_reactions_count: 226
+positive_reactions_count: 227
 tags:
   - tutorial
   - node
diff --git a/src/pages/posts/new-wordpress-admin-color-palette-1001.md b/src/pages/posts/new-wordpress-admin-color-palette-1001.md
@@ -26,19 +26,15 @@ Oh, and if you're a WP plugin developer, listen up because this applies to you t
 
 In his February post, [Standardization of WP-Admin colors in WordPress 5.7](https://make.wordpress.org/core/2021/02/23/standardization-of-wp-admin-colors-in-wordpress-5-7/), WP Core dev [Jb Audras](https://profiles.wordpress.org/audrasjb/) offered the following in-depth summary, and I quote:
 
----
-
-> "This is the first part of a larger project in cleaning up WordPress admin CSS. In WordPress 5.7, all colors used in the CSS are collapsed to one of 12 blues, greens, reds, and yellows, 13 grays, pure black, and pure white.
->
-> This new streamlined color palette collapses all the colors that used to be in the WordPress source code down to seven core colors and a range of 56 shades that meet the WCAG 2.0 AA recommended contrast ratio against white or black.
+> _This is the first part of a larger project in cleaning up WordPress admin CSS. In WordPress 5.7, all colors used in the CSS are collapsed to one of 12 blues, greens, reds, and yellows, 13 grays, pure black, and pure white._
 >
-> The colors are perceptually uniform from light to dark in each range, which means they start at white and get darker by the same amount with each step. Half the range has a 4.5 or higher contrast ratio against black, and the other half maintains the same contrast against white.
+> _This new streamlined color palette collapses all the colors that used to be in the WordPress source code down to seven core colors and a range of 56 shades that meet the WCAG 2.0 AA recommended contrast ratio against white or black._
 >
-> Standardizing on this set of colors will help contributors make consistent, accessible design decisions. Themes and Plugin developers are encouraged to use this new color palette for better consistency between their products and WordPress Core.
+> _The colors are perceptually uniform from light to dark in each range, which means they start at white and get darker by the same amount with each step. Half the range has a 4.5 or higher contrast ratio against black, and the other half maintains the same contrast against white._
+> 
+> _Standardizing on this set of colors will help contributors make consistent, accessible design decisions. Themes and Plugin developers are encouraged to use this new color palette for better consistency between their products and WordPress Core._
 >
-> **Plugin authors that use the existing CSS Core classes should be all set up with the new color palette, as every Core class was updated accordingly."**
-
----
+> _Plugin authors that use the existing CSS Core classes should be all set up with the new color palette, as every Core class was updated accordingly._
 
 Need/want more details? Check out the official [Design Handbook](https://make.wordpress.org/design/handbook/foundations/colors) or the CodePen palette shown below.
 
diff --git a/src/pages/projects/index.md b/src/pages/projects/index.md
@@ -0,0 +1,30 @@
+---
+title: Portfolio
+seo:
+  title: Portfolio
+  description: My Portfolio, featuring a curated selection of my best projects, sorted by date of completion.
+  extra:
+    - name: "og:type"
+      value: website
+      keyName: property
+    - name: "og:title"
+      value: Blog
+      keyName: property
+    - name: "og:description"
+      value: This is the blog page
+      keyName: property
+    - name: "og:image"
+      value: images/1.jpg
+      keyName: property
+      relativeUrl: true
+    - name: "twitter:card"
+      value: summary_large_image
+    - name: "twitter:title"
+      value: Portfolio
+    - name: "twitter:description"
+      value: This is the blog page
+    - name: "twitter:image"
+      value: images/1.jpg
+      relativeUrl: true
+template: blog
+---
diff --git a/src/sass/imports/_general.scss b/src/sass/imports/_general.scss
@@ -113,9 +113,12 @@ pre {
 }
 
 blockquote {
-  border-bottom: 1px solid _palette(secondary);
-  border-top: 3px solid _palette(secondary);
-  font-size: 1.88889em;
+  font-family: _font(body);
+  color: _palette(txtp10);
+  border-left: 10px solid _palette(accent);
+  border-bottom: 4px solid _palette(primary);
+  border-top: 4px solid _palette(primary);
+  font-size: 1.11111em;
   line-height: 1.25;
   margin: 2rem 0;
   padding-bottom: 1.66667rem;
@@ -126,7 +129,8 @@ blockquote {
   }
 
   p {
-    margin-bottom: 0.5em;
+    margin-bottom: 0.66667em;
+    padding-left: 1.33333rem;
 
     &:last-child {
       margin-bottom: 0;
@@ -135,7 +139,7 @@ blockquote {
 
   small,
   cite {
-    color: _palette(txtmet);
+    color: _palette(acchyp);
     display: block;
     font-size: 0.52941em;
     font-style: normal;
@@ -471,6 +475,10 @@ img {
   }
 
   blockquote {
-    font-size: 1.55556em;
+    background: _palette(secondary);
+    border-left: 10px solid _palette(acchyp);
+    margin: 1.5em 10px;
+    padding: 1em 10px .1em 10px;
+    quotes: "\201C""\201D""\2018""\2019";
   }
 }
diff --git a/src/sass/main.scss b/src/sass/main.scss
@@ -18,6 +18,7 @@ $palette: (primary: #111A20,
   border: #416782,
   accent: #1CEDCA,
   acchyp: #BAEDA5,
+  accqte: #F05D5E,
   accent-blue: #10bcf9,
   accent-violet: #9371e6,
   accent-orange: #fc6e51,
diff --git a/src/templates/portfolio.js b/src/templates/portfolio.js
@@ -0,0 +1,73 @@
+import React from 'react'
+import _ from 'lodash'
+import moment from 'moment-strftime'
+import { graphql } from 'gatsby'
+
+import { Layout } from '../components/index'
+import { getPages, Link, withPrefix } from '../utils'
+
+// this minimal GraphQL query ensures that when 'gatsby develop' is running,
+// any changes to content files are reflected in browser
+export const query = graphql`
+	query($url: String) {
+		sitePage(path: { eq: $url }) {
+			id
+		}
+	}
+`
+
+export default class Portfolio extends React.Component {
+	render() {
+		let display_projects = _.orderBy(
+			getPages(this.props.pageContext.pages, '/projects'),
+			'frontmatter.date',
+			'desc'
+		)
+		return (
+			<Layout {...this.props}>
+				<header className='screen-reader-text'>
+					<h1>{_.get(this.props, 'pageContext.frontmatter.title', null)}</h1>
+				</header>
+				<div className='post-feed'>
+					<div className='post-feed-inside'>
+						{_.map(display_posts, (post, post_idx) => (
+							<article key={post_idx} className='post post-card'>
+								<div className='post-inside'>
+									{_.get(post, 'frontmatter.thumb_img_path', null) && (
+										<Link className='post-thumbnail' to={withPrefix(_.get(post, 'url', null))}>
+											<img
+												src={withPrefix(_.get(post, 'frontmatter.thumb_img_path', null))}
+												alt={_.get(post, 'frontmatter.thumb_img_alt', null)}
+											/>
+										</Link>
+									)}
+									<header className='post-header'>
+										<h2 className='post-title'>
+											<Link to={withPrefix(_.get(post, 'url', null))} rel='bookmark'>
+												{_.get(post, 'frontmatter.title', null)}
+											</Link>
+										</h2>
+									</header>
+									{_.get(post, 'frontmatter.excerpt', null) && (
+										<div className='post-content'>
+											<p>{_.get(post, 'frontmatter.excerpt', null)}</p>
+										</div>
+									)}
+									<footer className='post-meta'>
+										<time
+											className='published'
+											dateTime={moment(_.get(post, 'frontmatter.date', null)).strftime(
+												'%Y-%m-%d %H:%M'
+											)}>
+											{moment(_.get(post, 'frontmatter.date', null)).strftime('%B %d, %Y')}
+										</time>
+									</footer>
+								</div>
+							</article>
+						))}
+					</div>
+				</div>
+			</Layout>
+		)
+	}
+}
diff --git a/static/js/init.js b/static/js/init.js
diff --git a/static/js/page-load.js b/static/js/page-load.js
diff --git a/workspace.code-workspace b/workspace.code-workspace
