pomber

import { bundleMDX } from "mdx-bundler";
import { getMDXComponent } from "mdx-bundler/client";
import React from "react";

export async function getServerSideProps() {
  const mdxSource = `
# Hello
~~~js
console.log(1);
~~~`;

pomber

This MDX file

import { MyComponent } from "my-component"

<MyComponent foo={[1, 2, 3]} />

Generates this mdxJsxFlowElement node in the MDAST:

pomber

function slowmo(rate = 10) {
  window._raf = window.requestAnimationFrame
  window.requestAnimationFrame = f => window._raf(t => f(t/rate))
  Date._now = Date.now
  Date.now = () => Date._now() / rate
  performance._now = performance.now
  performance.now = () => performance._now()/rate
}

slowmo()

pomber

const MINUTE = 60,
  HOUR = MINUTE * 60,
  DAY = HOUR * 24,
  YEAR = DAY * 365;

function getTimeAgo(date) {
  const secondsAgo = Math.round((+new Date() - date) / 1000);

  if (secondsAgo < MINUTE) {
    return secondsAgo + "s";

pomber

function App({ items }) {
  const [itemId, setItemId] = useState(null)
  const [startTransition, prepareTransition] = useTransition(newId => setItemId(newId), {
    timeoutMs: 1000
  })
  return (
    <Suspense fallback='Loading...'>
      {itemId === null ? (
        <ul>
          {items.map(item => (

pomber

Our intellectual powers are rather geared to master static relations and ... our powers to visualize processes evolving in time are relatively poorly developed. For that reason we should do (as wise programmers aware of our limitations) our utmost to shorten the conceptual gap between the static program and the dynamic process, to make the correspondence between the program (spread out in text space) and the process (spread out in time) as trivial as possible.
--- Dijkstra (1968) "A Case against the GO TO Statement" cited in: Bill Curtis (1981) Tutorial, human factors in software development. p. 109.

pomber

suggest_who_to_follow
suggest_recap
suggest_recycled_tweet
suggest_recycled_tweet_inline
suggest_activity_tweet
suggest_pyle_tweet
suggest_ranked_timeline_tweet

pomber

const buttonHtml = `
<a id="thanos" class="btn btn-primary float-right" role="button"
  style="margin-left:38px">
  Decimate issues
</a>`;


var css = '#thanos:hover{ background-image: linear-gradient(-180deg,#6d3678,#693270 90%) }';
var style = document.createElement('style');

pomber

import React from "react"
import { globalHistory } from "@reach/router"
import Zoom from "./Zoom"
import Slide from "./Slide"
import Pre from "./Pre"
import Clock from "./Clock"

// based on https://github.com/streamich/react-use/blob/master/src/useSpring.ts
import { SpringSystem } from "rebound"
import { useState, useEffect } from "react"

pomber

{
  "presets": ["@babel/preset-react", "@babel/preset-env"]
}