This MDX file
import { MyComponent } from "my-component"
<MyComponent foo={[1, 2, 3]} />
Generates this mdxJsxFlowElement
node in the MDAST
:
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); | |
~~~`; |
This MDX file
import { MyComponent } from "my-component"
<MyComponent foo={[1, 2, 3]} />
Generates this mdxJsxFlowElement
node in the MDAST
:
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() |
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"; |
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 => ( |
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.
suggest_who_to_follow | |
suggest_recap | |
suggest_recycled_tweet | |
suggest_recycled_tweet_inline | |
suggest_activity_tweet | |
suggest_pyle_tweet | |
suggest_ranked_timeline_tweet |
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'); |
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" |
{ | |
"presets": ["@babel/preset-react", "@babel/preset-env"] | |
} |