dan gaearon

## schroeder_bernstein.lean
--
-- Inspired by https://leanprover-community.github.io/mathematics_in_lean/C04_Sets_and_Functions.html#the-schroder-bernstein-theorem
--

import Mathlib

open Set
open Function

noncomputable section

## 00-README-NEXT-SPA.md

      
              5 files
            
          
              45 forks
            
          
                28 comments
              
            
              470 stars
            
          
                gaearon
                / 00-README-NEXT-SPA.md
            
            
              Last active
              April 25, 2025 13:14
            
              
                Next.js SPA example with dynamic client-only routing and static hosting
              
          
    Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.
You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.
You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.


## Wordle.js
import { useState, useEffect, useRef, useMemo } from 'react'

export default function Wordle() {
  let [currentAttempt, setCurrentAttempt] = useState('')
  let [bestColors, setBestColors] = useState(() => new Map())
  let [history, setHistory] = usePersistedHistory(h => {
    waitForAnimation(h)
  })

  useEffect(() => {

## index.html
<div id="screen">
  <h1>Wordle</h1>
  <div id="grid"></div>
  <div id="keyboard"></div>
</div>
<style>
  body, html {
    background: #111;
    color: white;
    font-family: sans-serif;

## index.html
<h1>Wordle</h1>
<div id="grid"></div>
<style>
  body, html {
  	background: #111;
  	color: white;
  	font-family: sans-serif;
 	text-align: center;
 	text-transform: uppercase;
  }

## minesweeper.html
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
</head>
<body>
  <div id="canvas"></div>
  <button id="restart">Restart</button>
  <script src="minesweeper.js"></script>
  <style>
    * {

## snake.html
<div id="canvas"></div>
<style>
#canvas {
  width: 500px;
  height: 300px;
  border: 5px solid black;
  position: relative;
  box-sizing: content-box;
}

## CurvedArrow.js
// from/to: { left, top, width, height, shape: 'circle' | 'rect' }
function CurvedArrow({ from, to }) {
  function curvedHorizontal(x1, y1, x2, y2) {
    function pos(t) {
      let mx = x1 + (x2 - x1) / 2;
      let p1 = {x: x1, y: y1};
      let p2 = {x: mx, y: y1};
      let p3 = {x: mx, y: y2};
      let p4 = {x: x2, y: y2};
      return {

## Classes.js
class Spiderman {
  lookOut() {
    alert('My Spider-Sense is tingling.');
  }
}

let miles = new Spiderman();
miles.lookOut();

## node_hot_reload.js
const express = require('express');
const app = express();

// Application
app.get('/', function(req, res) {
  if (process.env.NODE_ENV === 'development') {
    for (var key in require.cache) {
      delete require.cache[key];
    }
  }
	--
	-- Inspired by https://leanprover-community.github.io/mathematics_in_lean/C04_Sets_and_Functions.html#the-schroder-bernstein-theorem
	--

	import Mathlib

	open Set
	open Function

	noncomputable section
	import { useState, useEffect, useRef, useMemo } from 'react'

	export default function Wordle() {
	let [currentAttempt, setCurrentAttempt] = useState('')
	let [bestColors, setBestColors] = useState(() => new Map())
	let [history, setHistory] = usePersistedHistory(h => {
	waitForAnimation(h)
	})

	useEffect(() => {
	<div id="screen">
	<h1>Wordle</h1>
	<div id="grid"></div>
	<div id="keyboard"></div>
	</div>
	<style>
	body, html {
	background: #111;
	color: white;
	font-family: sans-serif;
	<!DOCTYPE html>
	<head>
	<meta charset="UTF-8">
	</head>
	<body>
	<div id="canvas"></div>
	<button id="restart">Restart</button>
	<script src="minesweeper.js"></script>
	<style>
	* {
	<div id="canvas"></div>
	<style>
	#canvas {
	width: 500px;
	height: 300px;
	border: 5px solid black;
	position: relative;
	box-sizing: content-box;
	}
	// from/to: { left, top, width, height, shape: 'circle' \| 'rect' }
	function CurvedArrow({ from, to }) {
	function curvedHorizontal(x1, y1, x2, y2) {
	function pos(t) {
	let mx = x1 + (x2 - x1) / 2;
	let p1 = {x: x1, y: y1};
	let p2 = {x: mx, y: y1};
	let p3 = {x: mx, y: y2};
	let p4 = {x: x2, y: y2};
	return {
	class Spiderman {
	lookOut() {
	alert('My Spider-Sense is tingling.');
	}
	}

	let miles = new Spiderman();
	miles.lookOut();
	const express = require('express');
	const app = express();

	// Application
	app.get('/', function(req, res) {
	if (process.env.NODE_ENV === 'development') {
	for (var key in require.cache) {
	delete require.cache[key];
	}
	}