Skip to content
Permalink
Browse files

Generate patterns on build

  • Loading branch information...
lachlanjc committed Jan 31, 2018
1 parent a147482 commit 2fdd07be110435f02c0609800f2764946a9ab394
Showing with 51 additions and 19 deletions.
  1. +1 −1 .gitignore
  2. +14 −0 gatsby-node.js
  3. +1 −0 package.json
  4. +1 −1 src/components/MarkdownBody.js
  5. +12 −12 src/pages/workshops/index.js
  6. +12 −5 src/pages/workshops/page.js
  7. +10 −0 yarn.lock
@@ -1,6 +1,6 @@
node_modules
.cache/
# Build directory
public/
.DS_Store
yarn-error.log
static/workshops/
@@ -1,4 +1,15 @@
const path = require('path')
const fs = require('fs')
const GeoPattern = require('geopattern')
const { colors } = require('@hackclub/design-system')
const _ = require('lodash')

const pattern = (text = 'Hack Club', color = colors.primary) =>
GeoPattern.generate(text, { baseColor: color }).toString()
const writePattern = (path, name) =>
fs.writeFile(path, pattern(_.camelCase(name), '#D500F9'), (err, data) => {
if (err) console.error(err)
})

exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
const { createNodeField } = boundActionCreators
@@ -8,6 +19,9 @@ exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
if (!!parsedFilePath.dir) {
const value = `/workshops/${parsedFilePath.dir}`
createNodeField({ node, name: 'slug', value })
createNodeField({ node, name: 'bg', value: `${value}.svg` })
const path = `./static${_.replace(value, '/lib', '')}.svg`
writePattern(path, node.frontmatter.name)
}
}
}
@@ -32,6 +32,7 @@
"gatsby-remark-smartypants": "^1.4.10",
"gatsby-source-filesystem": "^1.5.15",
"gatsby-transformer-remark": "^1.7.30",
"geopattern": "^1.2.3",
"lodash": "^4.17.4",
"prop-types": "^15.6.0",
"react": "^16.2.0",
@@ -79,7 +79,7 @@ const MarkdownBody = Box.extend`
word-wrap: normal;
}
/* Syntax highlighting */
/* Syntax highlighting */
.namespace {
opacity: 0.75;
}
@@ -78,9 +78,10 @@ const Grid = Box.withComponent('ol').extend`

const WorkshopCard = Card.withComponent('li').extend`
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-image: url(${props => props.image});
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
background-image: url('${props => props.img}');
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
position: relative;
height: 100%;
&:before {
@@ -104,22 +105,20 @@ const WorkshopCard = Card.withComponent('li').extend`
h3 {
line-height: 1.125;
margin-bottom: 0.125rem;
max-width: 12rem; /* 14rem - padding, leave room for badge */
}
p {
line-height: 1.375;
}
`

const Workshop = ({ data, ...props }) => (
<A.link to={data.fields.slug} {...props}>
<WorkshopCard
p={3}
boxShadowSize="md"
image={`https://splattered.now.sh/${camelCase(data.frontmatter.name)}`}
>
<Heading.h3 color="white" f={3} children={data.frontmatter.name} />
<Text color="snow" f={2} children={data.frontmatter.description} />
const Workshop = ({
data: { fields: { slug, bg }, frontmatter: { name, description } },
...props
}) => (
<A.link to={slug} {...props}>
<WorkshopCard p={3} boxShadowSize="md" bg="accent" img={bg}>
<Heading.h3 color="white" f={3} children={name} />
<Text color="snow" f={2} children={description} />
</WorkshopCard>
</A.link>
)
@@ -214,6 +213,7 @@ export const pageQuery = graphql`
node {
fields {
slug
bg
}
frontmatter {
name
@@ -18,7 +18,7 @@ import { camelCase } from 'lodash'

const Header = Section.extend`
padding-top: 0 !important;
background-image: url(//splattered.now.sh/${props => camelCase(props.name)});
background-image: url('${props => props.img}');
h1 {
mix-blend-mode: screen;
@@ -27,11 +27,11 @@ const Header = Section.extend`
padding-left: ${props => props.theme.space[4]}px;
padding-right: ${props => props.theme.space[4]}px;
clip-path: polygon(4% 0%, 100% 0%, 96% 100%, 0% 100%);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.32);
}
h2 {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}
`

@@ -41,11 +41,15 @@ OutlineButton.home = OutlineButton.withComponent(Link)

export default ({ data: { markdownRemark } }) => {
if (markdownRemark) {
const { frontmatter: { name, description, group }, html } = markdownRemark
const {
fields: { bg },
frontmatter: { name, description, group },
html
} = markdownRemark
return (
<ThemeProvider>
<Helmet title={`${name} – Hack Club`} />
<Header name={name}>
<Header name={name} img={bg}>
<Nav />
<Heading.h1 f={[5, 6]} mt={[3, 4]} mb={2} children={name} />
<Heading.h2 f={[3, 4]} regular children={description} />
@@ -66,6 +70,9 @@ export const pageQuery = graphql`
query WorkshopBySlug($path: String!) {
markdownRemark(fields: { slug: { eq: $path } }) {
html
fields {
bg
}
frontmatter {
name
description
@@ -3289,6 +3289,10 @@ extend@^3.0.0, extend@~3.0.0, extend@~3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"

extend@~1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/extend/-/extend-1.2.1.tgz#a0f5fd6cfc83a5fe49ef698d60ec8a624dd4576c"

external-editor@^2.0.4:
version "2.1.0"
resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.1.0.tgz#3d026a21b7f95b5726387d4200ac160d372c3b48"
@@ -4037,6 +4041,12 @@ gauge@~2.7.3:
strip-ansi "^3.0.1"
wide-align "^1.1.0"

geopattern@^1.2.3:
version "1.2.3"
resolved "https://registry.yarnpkg.com/geopattern/-/geopattern-1.2.3.tgz#de96602e46dba9095ca5774bfb3b36308f7e63fe"
dependencies:
extend "~1.2.1"

get-caller-file@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"

0 comments on commit 2fdd07b

Please sign in to comment.
You can’t perform that action at this time.