begin squiggle app

This commit is contained in:
Quinn Dougherty 2022-08-01 03:43:16 -04:00
parent f8ebeaac55
commit e1cb86c11d
24 changed files with 3424 additions and 74 deletions

View 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}
/>
);
}
}

View 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
View 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
View 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
View 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 />
</>
)}

View File

@ -1,7 +0,0 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
}
module.exports = nextConfig

17
next.config.mjs Normal file
View 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'],
})

View File

@ -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",

View File

@ -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

View File

@ -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 &rarr;</h2> <h2>Documentation &rarr;</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 &rarr;</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 &rarr;</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
View 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
View 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
View 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
View 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
View 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
View 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
View File

@ -0,0 +1,5 @@
# Worldview
- [ai](/worldview/ai)
- [bio](/worldview/bio)

View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

BIN
public/quri-logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -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
View 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;
}

3126
yarn.lock

File diff suppressed because it is too large Load Diff