NextJS + MDX
Digital Garden Starter

  • Create top level routes from .mdx files organized however you want.
  • Statically generated routes using Next’s `getStaticPaths`.
  • Supports frontmatter (thanks to gray-matter).
GitHub LogoView source on GitHub

Featured posts

title: 'A note title' description: 'This MDX file lives in a different directory, exemplifying the ability to organize your content your way.' date: 'July 20, 2020' timestamp: 2021-01-15T22:37

This is a note with front-matter.

title: 'Code generation with Hygen' description: 'Automate the creation of new components, MDX content, or any other commonly repeated boilerplate.' date: 'July 20, 2020' timestamp: 2021-08-15T22:37

End goal: 2-3 letter command to scaffold a new React component exactly the way you want it.

title: 'Next & Styled Components' description: 'Step by step instructions for installing Styled Components and using it with this starter.' date: 'July 21, 2020' timestamp: 2021-09-15T22:37

Installation

npm i styled-components babel-plugin-styled-components

Configuration

  1. Add the Babel plugin to your .babelrc. Make sure ssr is set to true because our static page generation happens server side.
  "plugins": [
    [
      "styled-components",
      {
        "ssr": true
      }
    ],
    ...
  1. Configure Styled Components for Server Side Rendering.

To learn more about how and why we need to do this, see the Styled Components advanced docs. We'll be using the official Next example as a guide.

Create a new file, pages/_document.js

  import Document from 'next/document'
  import { ServerStyleSheet } from 'styled-components'

  export default class MyDocument extends Document {
    static async getInitialProps(ctx) {
      const sheet = new ServerStyleSheet()
      const originalRenderPage = ctx.renderPage

      try {
        ctx.renderPage = () =>
          originalRenderPage({
            enhanceApp: (App) => (props) =>
              sheet.collectStyles(<App {...props} />),
          })

        const initialProps = await Document.getInitialProps(ctx)
        return {
          ...initialProps,
          styles: (
            <>
              {initialProps.styles}
              {sheet.getStyleElement()}
            </>
          ),
        }
      } finally {
        sheet.seal()
      }
    }
  }
  1. Start styling 🎨

You're all set to start using Styled Components in your NextJS app!

title: 'Relative image paths in MDX with Remark' description: 'Tame your images in MDX with the help of Remark.' date: 'July 22, 2020' timestamp: 2021-02-15T22:37

This is an example component

This image lives inside the public/ dir. It could be nice to use next/image for this. heart

It indicates a synchronic distortion in the areas emanating triolic waves. The cerebellum, the cerebral cortex, the brain stem, the entire nervous system has been depleted of electrochemical energy. Any device like that would produce high levels of triolic waves. These walls have undergone some kind of selective molecular polarization. I haven't determined if our phaser energy can generate a stable field. We could alter the photons with phase discriminators.

I have reset the sensors to scan for frequencies outside the usual range. By emitting harmonic vibrations to shatter the lattices. We will monitor and adjust the frequency of the resonators. He has this ability of instantly interpreting and extrapolating any verbal communication he hears. It may be due to the envelope over the structure, causing hydrogen-carbon helix patterns throughout. I'm comparing the molecular integrity of that bubble against our phasers.

Communication is not possible. The shuttle has no power. Using the gravitational pull of a star to slingshot back in time? We are going to Starbase Montgomery for Engineering consultations prompted by minor read-out anomalies. Probes have recorded unusual levels of geological activity in all five planetary systems. Assemble a team. Look at records of the Drema quadrant. Would these scans detect artificial transmissions as well as natural signals?

Sensors indicate human life forms 30 meters below the planet's surface. Stellar flares are increasing in magnitude and frequency. Set course for Rhomboid Dronegar 006, warp seven. There's no evidence of an advanced communication network. Total guidance system failure, with less than 24 hours' reserve power. Shield effectiveness has been reduced 12 percent. We have covered the area in a spherical pattern which a ship without warp drive could cross in the given time.