ericclemmons

import Layout from "@/components/Layout";
import { getContentPaths } from "@/utils/getContentPaths";
import { getPageFromSlug } from "@/utils/getPageFromSlug";
import { GetStaticProps } from "next";
import dynamic from "next/dynamic";
import { renderToStaticMarkup } from "react-dom/server";

export default function ContentPage({ __html, frontmatter, pages, slug }) {
  const Content = dynamic(() => import(`../content/${slug}/index.mdx`), {
    loading() {

ericclemmons

// This state machine is trying to figure out how to allow a user to call `await Auth.getUser()` multiple times throughout their app and get the current user once it resolves.


// Utility to resolve a Promise externally
const defer = () => {
  let res,rej;
  
  const promise = new Promise((resolve, reject) => {
    res = resolve;
    rej = reject;

ericclemmons

<link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.0.1/dist/tailwind.min.css">

<!-- Responsive indicators! -->
<div class="fixed top-0 right-0 z-50 bg-pink-500 text-white shadow-md px-2 rounded-bl font-mono">
  <span class="sm:hidden">default</span>
  <span class="hidden sm:inline md:hidden">sm</span>
  <span class="hidden md:inline lg:hidden">md</span>
  <span class="hidden lg:inline xl:hidden">lg</span>
  <span class="hidden xl:inline">xl</span>
</div>

ericclemmons

Gutenblock Demo!

Zach Silveira was kind enough to create a video tutorial:

https://www.youtube.com/watch?v=apZwd0FqQu4&feature=youtu.be

Here are my notes as I followed along...

Getting Started

1. Install Docker for Mac.

ericclemmons

var webpack = require("webpack");

module.exports = {
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          cacheDirectory: true,

ericclemmons

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>Ansi 0 Color</key>
	<dict>
		<key>Alpha Component</key>
		<real>1</real>
		<key>Blue Component</key>
		<real>0.15977835655212402</real>

ericclemmons

Using <details> in GitHub

Suppose you're opening an issue and there's a lot noisey logs that may be useful.

Rather than wrecking readability, wrap it in a <details> tag!

<details>
 Summary Goes Here

ericclemmons

/**
 * Term: schools.address.state
 * 
 * Stores the state abbreviation for a school's location.
 */
module.exports = {
  table: 'school', // Entity table in DB

  // `?state=tx` is supported (or would throw) here
  filter: function(qb, value) {

ericclemmons

export default {
  ...

  resolve: {
    root: [
      path.join(process.cwd(), "lib"),
    ],
  },

  ...

ericclemmons

class HappyFactory {
  constructor(message) {
    return Promise.resolve(`${message} there!`);
  }
}

new HappyFactory("Howdy").then(::console.log);
// "Howdy there!"