begin squiggle app
This commit is contained in:
Quinn Dougherty
parent
f8ebeaac55
commit
e1cb86c11d
26
components/DynamicSquiggleChart.tsx
Normal file
26
components/DynamicSquiggleChart.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import dynamic from "next/dynamic";
|
||||||
|
|
||||||
|
const SquiggleChart = dynamic<any>(
|
||||||
|
() => import("@quri/squiggle-components").then((mod) => mod.SquiggleChart),
|
||||||
|
{
|
||||||
|
loading: () => <p>Loading...</p>,
|
||||||
|
ssr: false,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export function DynamicSquiggleChart(props: any) {
|
||||||
|
if (props.squiggleString == "") {
|
||||||
|
return null;
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<SquiggleChart
|
||||||
|
code={props.squiggleString}
|
||||||
|
width={445}
|
||||||
|
height={200}
|
||||||
|
showSummary={true}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
20
components/DynamicSquiggleEditorWithImportedBindings.tsx
Normal file
20
components/DynamicSquiggleEditorWithImportedBindings.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
import React from "react";
|
||||||
|
import dynamic from "next/dynamic";
|
||||||
|
|
||||||
|
const SquiggleEditorWithImportedBindings = dynamic<any>(
|
||||||
|
() => import("@quri/squiggle-components").then((mod) => mod.SquiggleEditorWithImportedBindings),
|
||||||
|
{
|
||||||
|
loading: () => <p>Loading...</p>,
|
||||||
|
ssr: false,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
export function DynamicSquiggleEditorWithImportedBindings( props: any ) {
|
||||||
|
return (
|
||||||
|
<SquiggleEditorWithImportedBindings
|
||||||
|
defaultCode={props.defaultCode}
|
||||||
|
showSummary={true}
|
||||||
|
bindingsImportUrl={props.bindingsImportUrl}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
};
|
||||||
19
components/Footer.tsx
Normal file
19
components/Footer.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
import packageJson from "../package.json"
|
||||||
|
import styles from "../styles/Home.module.css"
|
||||||
|
import Image from 'next/image'
|
||||||
|
|
||||||
|
export default function Footer() {
|
||||||
|
return (
|
||||||
|
<footer className={styles.footer}>
|
||||||
|
<a
|
||||||
|
href="https://quantifieduncertainty.org"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
Powered by{' '}
|
||||||
|
<Image src="/quri-logo-with-QURI-written-underneath.png" alt="QURI logo" width={72} height={72} />
|
||||||
|
</a>
|
||||||
|
v{packageJson.version}
|
||||||
|
</footer>
|
||||||
|
)
|
||||||
|
}
|
||||||
51
components/Header.tsx
Normal file
51
components/Header.tsx
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
import styles from "../styles/Header.module.css"
|
||||||
|
import Link from "next/link"
|
||||||
|
|
||||||
|
// The approach used in this component shows how to build a sign in and sign out
|
||||||
|
// component that works on pages which support both client and server side
|
||||||
|
// rendering, and avoids any flash incorrect content on initial page load.
|
||||||
|
export default function Header() {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<noscript>
|
||||||
|
<style>{`.nojs-show { opacity: 1; top: 0; }`}</style>
|
||||||
|
</noscript>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<ul className={styles.navItems}>
|
||||||
|
<li className={styles.navItem}>
|
||||||
|
<Link href="/">
|
||||||
|
<a>Home</a>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className={styles.navItem}>
|
||||||
|
<Link href="/intro">
|
||||||
|
<a>Introduction</a>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className={styles.navItem}>
|
||||||
|
<Link href="/team">
|
||||||
|
<a>Team</a>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className={styles.navItem}>
|
||||||
|
<Link href="/squiggle-demo">
|
||||||
|
<a>Squiggle demonstration</a>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className={styles.navItem}>
|
||||||
|
<Link href="/latex-demo">
|
||||||
|
<a>Latex demonstration</a>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className={styles.navItem}>
|
||||||
|
<Link href="/worldview">
|
||||||
|
<a>Worldview</a>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
}
|
||||||
21
components/Layout.tsx
Normal file
21
components/Layout.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
import Header from "./Header"
|
||||||
|
import Footer from "./Footer"
|
||||||
|
import Head from "next/head"
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children: React.ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Layout({ children }: Props) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head>
|
||||||
|
<title>GUCEM</title>
|
||||||
|
<meta name="description" content="Generated by create next app" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
</Head>
|
||||||
|
<Header />
|
||||||
|
<main>{children}</main>
|
||||||
|
<Footer />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
/** @type {import('next').NextConfig} */
|
|
||||||
const nextConfig = {
|
|
||||||
reactStrictMode: true,
|
|
||||||
swcMinify: true,
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = nextConfig
|
|
||||||
17
next.config.mjs
Normal file
17
next.config.mjs
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
import nextMdx from '@next/mdx'
|
||||||
|
import remarkMath from 'remark-math'
|
||||||
|
import rehypeMathjax from 'rehype-mathjax'
|
||||||
|
|
||||||
|
const withMDX = nextMdx({
|
||||||
|
extension: /\.mdx?$/,
|
||||||
|
options: {
|
||||||
|
providerImportSource: '@mdx-js/react',
|
||||||
|
remarkPlugins: [remarkMath],
|
||||||
|
rehypePlugins: [rehypeMathjax],
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
export default withMDX({
|
||||||
|
// Support MDX files as pages:
|
||||||
|
pageExtensions: ['md', 'mdx', 'tsx', 'ts', 'jsx', 'js'],
|
||||||
|
})
|
||||||
|
|
@ -9,9 +9,15 @@
|
||||||
"lint": "next lint"
|
"lint": "next lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@mdx-js/loader": "^2.1.2",
|
||||||
|
"@mdx-js/react": "^2.1.2",
|
||||||
|
"@next/mdx": "^12.2.3",
|
||||||
|
"@quri/squiggle-components": "^0.2.24",
|
||||||
"next": "12.2.3",
|
"next": "12.2.3",
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
"react-dom": "18.2.0"
|
"react-dom": "18.2.0",
|
||||||
|
"rehype-mathjax": "^4.0.2",
|
||||||
|
"remark-math": "^5.1.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/node": "18.6.3",
|
"@types/node": "18.6.3",
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,9 @@
|
||||||
import '../styles/globals.css'
|
import '../styles/globals.css'
|
||||||
import type { AppProps } from 'next/app'
|
import type { AppProps } from 'next/app'
|
||||||
|
import Layout from "../components/Layout"
|
||||||
|
|
||||||
function MyApp({ Component, pageProps }: AppProps) {
|
function MyApp({ Component, pageProps }: AppProps) {
|
||||||
return <Component {...pageProps} />
|
return <Layout><Component {...pageProps} /></Layout>
|
||||||
}
|
}
|
||||||
|
|
||||||
export default MyApp
|
export default MyApp
|
||||||
|
|
|
||||||
|
|
@ -6,41 +6,20 @@ import styles from '../styles/Home.module.css'
|
||||||
const Home: NextPage = () => {
|
const Home: NextPage = () => {
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
<Head>
|
|
||||||
<title>Create Next App</title>
|
|
||||||
<meta name="description" content="Generated by create next app" />
|
|
||||||
<link rel="icon" href="/favicon.ico" />
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<main className={styles.main}>
|
<main className={styles.main}>
|
||||||
<h1 className={styles.title}>
|
<h1 className={styles.title}>
|
||||||
Welcome to <a href="https://nextjs.org">Next.js!</a>
|
My team estimating stuff
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<p className={styles.description}>
|
<p className={styles.description}>
|
||||||
Get started by editing{' '}
|
<i>A website serving markdown equipped with squiggle and latex</i>
|
||||||
<code className={styles.code}>pages/index.tsx</code>
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className={styles.grid}>
|
<div className={styles.grid}>
|
||||||
<a href="https://nextjs.org/docs" className={styles.card}>
|
<a href="https://squiggle-language.com/docs" className={styles.card}>
|
||||||
<h2>Documentation →</h2>
|
<h2>Documentation →</h2>
|
||||||
<p>Find in-depth information about Next.js features and API.</p>
|
<p>Find in-depth information about Squiggle features and API.</p>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="https://nextjs.org/learn" className={styles.card}>
|
|
||||||
<h2>Learn →</h2>
|
|
||||||
<p>Learn about Next.js in an interactive course with quizzes!</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href="https://github.com/vercel/next.js/tree/canary/examples"
|
|
||||||
className={styles.card}
|
|
||||||
>
|
|
||||||
<h2>Examples →</h2>
|
|
||||||
<p>Discover and deploy boilerplate example Next.js projects.</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a
|
<a
|
||||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
|
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
|
||||||
className={styles.card}
|
className={styles.card}
|
||||||
|
|
@ -53,18 +32,6 @@ const Home: NextPage = () => {
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer className={styles.footer}>
|
|
||||||
<a
|
|
||||||
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Powered by{' '}
|
|
||||||
<span className={styles.logo}>
|
|
||||||
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
4
pages/intro.md
Normal file
4
pages/intro.md
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
# Introduction
|
||||||
|
|
||||||
|
The estimates and articles served on this website are intended to help the reader reason about xyz, or convey what we believe about abc, or lorem ipsum
|
||||||
|
|
||||||
9
pages/latex-demo.md
Normal file
9
pages/latex-demo.md
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
# Latex demo
|
||||||
|
|
||||||
|
This template comes with math markup for free, as you can see: $ f(x) = \{ y | h \circ g (y) > x \} $
|
||||||
|
|
||||||
|
Sometimes, we like to put double dollar signs so that latex handles newlining for us
|
||||||
|
|
||||||
|
$$ \Cap_{n \in \mathbb{N}} f(n) \neq \emptyset $$
|
||||||
|
|
||||||
|
The renderer can be finicky. If you're having trouble, try adding more newlines between your `$$`-enclosed block and your subsequence text block.
|
||||||
18
pages/squiggle-demo.mdx
Normal file
18
pages/squiggle-demo.mdx
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { DynamicSquiggleEditorWithImportedBindings as SquiggleEditor } from "../components/DynamicSquiggleEditorWithImportedBindings"
|
||||||
|
|
||||||
|
# Squiggle demonstration
|
||||||
|
|
||||||
|
We can enter in arbitrary, live squiggle code in the `defaultCode` argument of our `SquiggleEditor` component.
|
||||||
|
|
||||||
|
<SquiggleEditor defaultCode={`
|
||||||
|
x = 1 to 2
|
||||||
|
y = {a: x, b: 1e1}
|
||||||
|
f(t) = normal(t, 1.1)
|
||||||
|
z = y.b * y.a
|
||||||
|
f(z)`} />
|
||||||
|
|
||||||
|
We can also import assignments from files that live in `/public/estimates/` of the repo.
|
||||||
|
|
||||||
|
<SquiggleEditor defaultCode="foo.bar(beta(1,2), ski)" bindingsImportUrl="/estimates/baz.squiggle" />
|
||||||
|
|
||||||
|
Files you import for bindings have to consist only of assignments: they cannot end in an expression, unless that expression is a record.
|
||||||
9
pages/team.md
Normal file
9
pages/team.md
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
# Team
|
||||||
|
|
||||||
|
## Estimators
|
||||||
|
- Ibn al-Haytham
|
||||||
|
- Enrico Fermi
|
||||||
|
|
||||||
|
## Computer programmers
|
||||||
|
- The [squiggle team](https://github.com/quantified-uncertainty/squiggle/graphs/contributors)
|
||||||
|
|
||||||
8
pages/worldview/ai.mdx
Normal file
8
pages/worldview/ai.mdx
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
import { DynamicSquiggleChart as SquiggleChart } from "../../components/DynamicSquiggleChart"
|
||||||
|
|
||||||
|
# Artificial intelligence
|
||||||
|
|
||||||
|
The distribution of the number of people we're worried AI might kill is as follows
|
||||||
|
|
||||||
|
<SquiggleChart squiggleString="1e9 to 1e11" />
|
||||||
|
|
||||||
7
pages/worldview/bio.mdx
Normal file
7
pages/worldview/bio.mdx
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { DynamicSquiggleChart as SquiggleChart } from "../../components/DynamicSquiggleChart"
|
||||||
|
|
||||||
|
# Engineered pandemics
|
||||||
|
|
||||||
|
The distribution of the number of people we're worried biorisk might kill is as follows
|
||||||
|
|
||||||
|
<SquiggleChart squiggleString="1e9 to 1e10" />
|
||||||
5
pages/worldview/index.md
Normal file
5
pages/worldview/index.md
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
# Worldview
|
||||||
|
|
||||||
|
- [ai](/worldview/ai)
|
||||||
|
- [bio](/worldview/bio)
|
||||||
|
|
||||||
3
public/estimates/baz.squiggle
Normal file
3
public/estimates/baz.squiggle
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
bar(t, u) = normal(t, u)
|
||||||
|
ski = mixture(1, 2, 3, [0.2, 0.4, 0.8])
|
||||||
|
foo = {bar: bar}
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 12 KiB |
BIN
public/quri-logo-with-QURI-written-underneath.png
Normal file
BIN
public/quri-logo-with-QURI-written-underneath.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
public/quri-logo.png
Normal file
BIN
public/quri-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -1,4 +0,0 @@
|
||||||
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
92
styles/Header.module.css
Normal file
92
styles/Header.module.css
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
/* Set min-height to avoid page reflow while session loading */
|
||||||
|
.signedInStatus {
|
||||||
|
display: block;
|
||||||
|
min-height: 4rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading,
|
||||||
|
.loaded {
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
opacity: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 0 0 0.6rem 0.6rem;
|
||||||
|
padding: 0.6rem 1rem;
|
||||||
|
margin: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.05);
|
||||||
|
transition: all 0.2s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
top: -2rem;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signedInText,
|
||||||
|
.notSignedInText {
|
||||||
|
position: absolute;
|
||||||
|
padding-top: 0.8rem;
|
||||||
|
left: 1rem;
|
||||||
|
right: 6.5rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
display: inherit;
|
||||||
|
z-index: 1;
|
||||||
|
line-height: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signedInText {
|
||||||
|
padding-top: 0rem;
|
||||||
|
left: 4.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
border-radius: 2rem;
|
||||||
|
float: left;
|
||||||
|
height: 2.8rem;
|
||||||
|
width: 2.8rem;
|
||||||
|
background-color: white;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button,
|
||||||
|
.buttonPrimary {
|
||||||
|
float: right;
|
||||||
|
margin-right: -0.4rem;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: 0.3rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.4rem;
|
||||||
|
padding: 0.7rem 0.8rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
background-color: transparent;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonPrimary {
|
||||||
|
background-color: #346df1;
|
||||||
|
border-color: #346df1;
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 0.7rem 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonPrimary:hover {
|
||||||
|
box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navItems {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navItem {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user