jschr/jschr.io

The static website generator service behind jschr.io.

jschr.io

The static website generator that powers my personal website and wrote about in this post.

Built with

• React
• Glamor
• Webpack 2
• Webpack Static Site Generator
• Terraform
• Lambda
• S3
• CloudFront

How it works

A scheduled Lambda function fetches a summary of latest activity from Github, Twitter, Reddit and Medium. It then generates a new static website using this webpack config and uploads the resulting build to S3. Terraform is used to create the required resources in AWS.

jschr.io's Issues

Fix live reloading in dev

Switched to browser sync because of this issue with static-site-generator-plugin and webpack dev server: markdalgleish/static-site-generator-webpack-plugin#79

Browser sync isn't live reloading on change and the DX is worse because you now you need to open up two separate processes yarn start and yarn run serve.

Try to get webpack dev server working again, this SO post suggests it should be possible: http://stackoverflow.com/questions/40828906/webpack-2-static-site-generator-plugin-self-is-not-defined

Make it easier to customize

I'm passing in config like github username, twitter, etc.. through environment variables which binds the infrastructure to the app.

To make it easier to use as a boilerplate, all you should need to do is make your own getProps function and create the components (assuming you want the same infrastructure).

Move app props variables to getProps.

Make app env vars a map in tfvars and pass directly to lambda function.

I'll need to update the readme.

Setup CloudFront SSL cert

GA can't infer the referrer website if https -> http

Will need to add how to generate a free SSL cert with AWS Certificate Manager to the docs and dev.tfvars.sample

Filter out replies from twitter posts

Only show tweets and retweets, not replies.

Add customization section to readme

After #5 and #7

screw_ie8 is not assignable to type 'boolean'

Hello, found your site on reddit and saw there was a tutorial for it on your github. I've recently become interested in Serverless architecture and decided to try to use your code to create my own. Upon setting all the env variables and running yarn start I get this error:

TSError: ⨯ Unable to compile TypeScript app/webpack.config.ts (77,15): Argument of type '{ compress: { screw_ie8: boolean; }; }' is not assignable to parameter of type 'Options'. Types of property 'compress' are incompatible. Type '{ screw_ie8: boolean; }' is not assignable to type 'boolean | CompressOptions'. Object literal may only specify known properties, and 'screw_ie8' does not exist in type 'boolean | CompressOptions'. (2345) at getOutput (/Users/quintenoneal/Desktop/jschr.io-master/node_modules/ts-node/src/index.ts:307:15) at /Users/quintenoneal/Desktop/jschr.io-master/node_modules/ts-node/src/index.ts:336:16 at Object.compile (/Users/quintenoneal/Desktop/jschr.io-master/node_modules/ts-node/src/index.ts:498:11) at Module.m._compile (/Users/quintenoneal/Desktop/jschr.io-master/node_modules/ts-node/src/index.ts:392:43) at Module._extensions..js (module.js:654:10) at Object.require.extensions.(anonymous function) [as .ts] (/Users/quintenoneal/Desktop/jschr.io-master/node_modules/ts-node/src/index.ts:395:12) at Module.load (module.js:556:32) at tryModuleLoad (module.js:499:12) at Function.Module._load (module.js:491:3) at Module.require (module.js:587:17)

When I remove the screw_ie8 line in webpack config I get a status code 400 when running the command. Any idea what could be the issue?

Add google analytics script

With an environment variable for ga account id.

Reddit?

Could pull latest post, comment, saved post, etc...

This would add 5 sources, I think the current design looks best at 4. Would be cool to sort by recent content and take the top 4 social links making the site more dynamic.

Duplicate stylesheets

Currently the stylesheet is duplicated because threepointone/glamor#64

No matter what I try I can't get webpack to load App component after rehydrate...

There's no point to sending the bundle to the browser

There's no actual JS dependency since removing web font loader in favour of inlining the fonts.

Can also use renderToStaticMarkup instead to get the initial App html.

There would also be no point in having mount.ts and index.ts.

If I do remove it I should provide instructions in the readme on how to add it back.

Consider renaming this repo or splitting into separate boilerplate project

• static-site-generator
• react-terraform-website
• social-card-generator
• contact-card

Suggestions?

Use static website domain for index.html default for subfolders

resource "aws_cloudfront_distribution" "s3_distribution" {
  origin {
    domain_name   = "${aws_s3_bucket.website.website_endpoint}"
    origin_id     = "${var.bucket}-s3-origin"

    custom_origin_config {
      origin_protocol_policy = "https-only"
      http_port = "80"
      https_port = "443"
      origin_ssl_protocols = ["TLSv1"]
    }
  }
 ...

https://kupczynski.info/2017/03/06/terraform-cloudfront-s3-static-hosting.html

OAuth integrations (Spotify)

Would love to support Spotify Player API to get currently playing track but this needs to be done through OAuth (login with your Spotify account)

This means I need a public endpoint for Spotify to redirect to.

Could setup an APIG endpoint and save the access token to dynamo (or elasticache).

Using S3 and APIG redirects I could make a simple (and secure!) workflow for authenticating:

jschr.io/spotify?token={token} -> auth lambda (verify token) -> redirect to spotify login ->user login -> redirect to save access token lambda -> redirect to jschr.io

Token can be a APIG key but need a lambda to verify the query string parameters because APIG auth uses a x-api-key header.

https://developer.spotify.com/web-api/authorization-guide/#authorization_code_flow
https://developer.spotify.com/web-api/get-the-users-currently-playing-track/
https://api.producthunt.com/v1/docs
http://blog.ryangreen.ca/2016/01/04/how-to-http-redirects-with-api-gateway-and-lambda/
http://stackoverflow.com/a/22750923/1249098

Modularize social link

// getProps

return {
  socialLinks: [
     { icon: require('./assest/github.svg'), label: 'my code', summary: '...', url: '...' },
     { icon: require('./assest/medium.svg'), label: 'my stories', summary: '...', url: '...' },
     ...
  ]
}


// App.tsx

retrun (
   <Content>
       socialLinks.map(props => <SocialLink {...props} />
   </Content>
)

Terraform's updating the Mailgun DNS entry even though it wasn't changed

$ terraform plan

~ module.app.aws_route53_record.mailgun_receiving_2
    records.23861953:   "" => "10 mxb.mailgun.org"
    records.3165025807: "10 mxa.mailgun.org" => ""

Might be a terraform bug, more investigation required.

Link to the actual article, tweet or story.

Nobody wants to see my face that much.

(should update the youtube video in the post as well with a new faceless version)