begin squiggle app

2022-08-01 03:43:16 -04:00 · 2022-08-01 03:43:16 -04:00 · e1cb86c11d
commit e1cb86c11d
parent f8ebeaac55
24 changed files with 3424 additions and 74 deletions
--- a/components/DynamicSquiggleChart.tsx
+++ b/components/DynamicSquiggleChart.tsx
@ -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}
+        />
+    );
+  }
+}
--- a/components/DynamicSquiggleEditorWithImportedBindings.tsx
+++ b/components/DynamicSquiggleEditorWithImportedBindings.tsx
@ -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}
+      />
+  )
+};
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@ -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>
+  )
+}
--- a/components/Header.tsx
+++ b/components/Header.tsx
@ -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>
+  )
+}
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@ -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 />
+        </>
+    )}
--- a/next.config.js
+++ b/next.config.js
@ -1,7 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-  swcMinify: true,
-}
-
-module.exports = nextConfig
--- a/next.config.mjs
+++ b/next.config.mjs
@ -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'],
+})
--- a/package.json
+++ b/package.json
@ -9,9 +9,15 @@
    "lint": "next lint"
  },
  "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",
    "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": {
    "@types/node": "18.6.3",
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@ -1,8 +1,9 @@
 import '../styles/globals.css'
 import type { AppProps } from 'next/app'
+import Layout from "../components/Layout"

 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Layout><Component {...pageProps} /></Layout>
 }

 export default MyApp
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -6,41 +6,20 @@ import styles from '../styles/Home.module.css'
 const Home: NextPage = () => {
  return (
    <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}>
        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
+          My team estimating stuff
        </h1>

        <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.tsx</code>
+          <i>A website serving markdown equipped with squiggle and latex</i>
        </p>

        <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>
-            <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 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
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
@ -53,18 +32,6 @@ const Home: NextPage = () => {
        </div>
      </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>
  )
 }
--- a/pages/intro.md
+++ b/pages/intro.md
@ -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 
+
--- a/pages/latex-demo.md
+++ b/pages/latex-demo.md
@ -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. 
--- a/pages/squiggle-demo.mdx
+++ b/pages/squiggle-demo.mdx
@ -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. 
--- a/pages/team.md
+++ b/pages/team.md
@ -0,0 +1,9 @@
+# Team
+
+## Estimators
+- Ibn al-Haytham
+- Enrico Fermi
+
+## Computer programmers
+- The [squiggle team](https://github.com/quantified-uncertainty/squiggle/graphs/contributors)
+
--- a/pages/worldview/ai.mdx
+++ b/pages/worldview/ai.mdx
@ -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" />
+
--- a/pages/worldview/bio.mdx
+++ b/pages/worldview/bio.mdx
@ -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" />
--- a/pages/worldview/index.md
+++ b/pages/worldview/index.md
@ -0,0 +1,5 @@
+# Worldview
+
+- [ai](/worldview/ai)
+- [bio](/worldview/bio)
+
--- a/public/estimates/baz.squiggle
+++ b/public/estimates/baz.squiggle
@ -0,0 +1,3 @@
+bar(t, u) = normal(t, u)
+ski = mixture(1, 2, 3, [0.2, 0.4, 0.8])
+foo = {bar: bar}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/quri-logo-with-QURI-written-underneath.png
+++ b/public/quri-logo-with-QURI-written-underneath.png
--- a/public/quri-logo.png
+++ b/public/quri-logo.png
--- a/public/vercel.svg
+++ b/public/vercel.svg
@ -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>
--- a/styles/Header.module.css
+++ b/styles/Header.module.css
@ -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;
+}
--- a/yarn.lock
+++ b/yarn.lock