flying-sheep/index.html

## index.html
<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="importmap">
    {
      "imports": {
        "@emotion/react": "https://esm.sh/@emotion/react@11.10.5?dev",
        "@emotion/react/jsx-runtime": "https://esm.sh/@emotion/react@11.10.5/jsx-runtime?dev",
        "react": "https://esm.sh/react@18.2.0?dev",
        "react-dom/client": "https://esm.sh/react-dom@18.2.0/client?dev",
        "tslib": "https://esm.sh/tslib@2.4.1?dev",
        "react-router-dom": "https://esm.sh/react-router-dom@6.4.3?dev",
        "react-transition-group": "https://esm.sh/react-transition-group@4.4.5?dev",
        "react-slide-routes": "/dist/react-slide-routes.esm.js"
      }
    }
  </script>
  <script type="module">
    import { createElement as e, useState, StrictMode } from 'react';
    import { createRoot } from 'react-dom/client';
    import { BrowserRouter, NavLink, Route } from 'react-router-dom';
    import SlideRoutes from 'react-slide-routes';

    const CNav = () => e('nav', null, e('ul', null, [
      e('li', {key: '.0'}, e(NavLink, {to: '/contact/foo'}, 'Contact: Foo')),
      e('li', {key: '.1'}, e(NavLink, {to: '/contact/bar'}, 'Contact: Bar')),
    ]));

    const CRouter = () => e(SlideRoutes, { animation: 'vertical-slide' }, [
      e(Route, {key: '.0', index: true, element: 'Contact'}),
      e(Route, {key: '.1', path: 'foo', element: 'Contact: Foo'}),
      e(Route, {key: '.2', path: 'bar', element: 'Contact: Bar'}),
    ]);

    const Home = () => e('div', {className: 'card home'}, 'Home');
    const About = () => e('div', {className: 'card about'}, 'About');
    const Contact = () => e('div', {className: 'card contact'}, [
      e(CNav, {key: 'cnav'}),
      e(CRouter, {key: 'crouter'}),
    ]);

    const Selector = ({ animation, setAnimation }) => e(
      'fieldset',
      {className: 'animation-selector'},
      [
        e('legend', {key: 'legend'}, 'Animation'),
        ...['slide', 'vertical-slide', 'rotate'].map((value) => [
          e('input', {key: value, type: 'radio', id: value, value, checked: value === animation, onChange(e) { setAnimation(e.currentTarget.value) }}),
          e('label', {key: `${value}-label`, htmlFor: value}, value),
        ]),
      ],
    );

    const Nav = () => e('nav', null, e('ul', null, [
      e('li', {key: '.0'}, e(NavLink, {to: '/about'}, 'About')),
      e('li', {key: '.1'}, e(NavLink, {to: '/'}, 'Home')),
      e('li', {key: '.2'}, e(NavLink, {to: '/contact'}, 'Contact')),
    ]));

    const Router = ({ animation }) => e(SlideRoutes, { animation }, [
      e(Route, {key: '.0', path: 'about', element: e(About)}),
      e(Route, {key: '.1', index: true, element: e(Home)}),
      e(Route, {key: '.2', path: 'contact/*', element: e(Contact)}),
    ]);

    const App = () => {
      const [animation, setAnimation] = useState('slide');

      return [
        e(Selector, { key: 'selector', animation, setAnimation }),
        e(Nav, { key: 'nav' }),
        e(Router, { key: 'router', animation, destroy: false }),
      ];
    };

    window.addEventListener('DOMContentLoaded', (event) => {
      const root = createRoot(document.querySelector('main'));
      root.render(e(StrictMode, null, e(BrowserRouter, null, e(App))));
    });
  </script>
  <style>
    body {
      margin: 40px auto;
      max-width: 360px;
      font-family: sans-serif;
      font-size: 16px;
    }

    /* animation */
    .animation-selector {
      display: flex;
      border: 0;
      border-radius: 10px;
      background: #eee;
    }
    .animation-selector > legend {
      border-radius: 5px;
      background: white;
      padding: 0 5px;
    }
    .animation-selector > label {
      flex-grow: 1;
    }

    /* nav */
    .card nav { font-size: 16px; }
    nav > ul {
      display: grid;
      grid: auto / auto-flow;
      column-gap: 3px;
      padding: 3px;
      margin-bottom: 24px;
      background: #eee;
      border-radius: 10px;
    }
    nav > ul > li {
      list-style-type: none;
    }
    nav > ul > li > a {
      padding: 0 3px;
      display: block;
      color: #000;
      text-align: center;
      line-height: 32px;
      text-decoration: none;
    }
    nav > ul > li > a.active {
      background: #fff;
      font-weight: 500;
      border-radius: 8px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }

    /* slide */
    .slide-routes {
      border-radius: 10px;
    }
    .card {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 560px;
      color: #fff;
      font-size: 64px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .home {
      background: rgba(255, 100, 0, 0.8);
    }
    .about {
      background: rgba(0, 150, 255, 0.8);
    }
    .contact {
      background: rgba(100, 0, 255, 0.8);
    }

    /* nested */
    .card .slide-routes {
      flex-grow: 1;
    }
  </style>
</head>
<body>
  <main></main>
</body>
</html>

## watch.sh
#!/bin/bash
exec npx concurrently -n watch,serve 'yarn watch' 'npx serve -s'
	<!doctype html>
	<html lang="en-US">
	<head>
	<meta charset="utf-8">
	<title>Demo</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script type="importmap">
	{
	"imports": {
	"@emotion/react": "https://esm.sh/@emotion/react@11.10.5?dev",
	"@emotion/react/jsx-runtime": "https://esm.sh/@emotion/react@11.10.5/jsx-runtime?dev",
	"react": "https://esm.sh/react@18.2.0?dev",
	"react-dom/client": "https://esm.sh/react-dom@18.2.0/client?dev",
	"tslib": "https://esm.sh/tslib@2.4.1?dev",
	"react-router-dom": "https://esm.sh/react-router-dom@6.4.3?dev",
	"react-transition-group": "https://esm.sh/react-transition-group@4.4.5?dev",
	"react-slide-routes": "/dist/react-slide-routes.esm.js"
	}
	}
	</script>
	<script type="module">
	import { createElement as e, useState, StrictMode } from 'react';
	import { createRoot } from 'react-dom/client';
	import { BrowserRouter, NavLink, Route } from 'react-router-dom';
	import SlideRoutes from 'react-slide-routes';

	const CNav = () => e('nav', null, e('ul', null, [
	e('li', {key: '.0'}, e(NavLink, {to: '/contact/foo'}, 'Contact: Foo')),
	e('li', {key: '.1'}, e(NavLink, {to: '/contact/bar'}, 'Contact: Bar')),
	]));

	const CRouter = () => e(SlideRoutes, { animation: 'vertical-slide' }, [
	e(Route, {key: '.0', index: true, element: 'Contact'}),
	e(Route, {key: '.1', path: 'foo', element: 'Contact: Foo'}),
	e(Route, {key: '.2', path: 'bar', element: 'Contact: Bar'}),
	]);

	const Home = () => e('div', {className: 'card home'}, 'Home');
	const About = () => e('div', {className: 'card about'}, 'About');
	const Contact = () => e('div', {className: 'card contact'}, [
	e(CNav, {key: 'cnav'}),
	e(CRouter, {key: 'crouter'}),
	]);

	const Selector = ({ animation, setAnimation }) => e(
	'fieldset',
	{className: 'animation-selector'},
	[
	e('legend', {key: 'legend'}, 'Animation'),
	...['slide', 'vertical-slide', 'rotate'].map((value) => [
	e('input', {key: value, type: 'radio', id: value, value, checked: value === animation, onChange(e) { setAnimation(e.currentTarget.value) }}),
	e('label', {key: `${value}-label`, htmlFor: value}, value),
	]),
	],
	);

	const Nav = () => e('nav', null, e('ul', null, [
	e('li', {key: '.0'}, e(NavLink, {to: '/about'}, 'About')),
	e('li', {key: '.1'}, e(NavLink, {to: '/'}, 'Home')),
	e('li', {key: '.2'}, e(NavLink, {to: '/contact'}, 'Contact')),
	]));

	const Router = ({ animation }) => e(SlideRoutes, { animation }, [
	e(Route, {key: '.0', path: 'about', element: e(About)}),
	e(Route, {key: '.1', index: true, element: e(Home)}),
	e(Route, {key: '.2', path: 'contact/*', element: e(Contact)}),
	]);

	const App = () => {
	const [animation, setAnimation] = useState('slide');

	return [
	e(Selector, { key: 'selector', animation, setAnimation }),
	e(Nav, { key: 'nav' }),
	e(Router, { key: 'router', animation, destroy: false }),
	];
	};

	window.addEventListener('DOMContentLoaded', (event) => {
	const root = createRoot(document.querySelector('main'));
	root.render(e(StrictMode, null, e(BrowserRouter, null, e(App))));
	});
	</script>
	<style>
	body {
	margin: 40px auto;
	max-width: 360px;
	font-family: sans-serif;
	font-size: 16px;
	}

	/* animation */
	.animation-selector {
	display: flex;
	border: 0;
	border-radius: 10px;
	background: #eee;
	}
	.animation-selector > legend {
	border-radius: 5px;
	background: white;
	padding: 0 5px;
	}
	.animation-selector > label {
	flex-grow: 1;
	}

	/* nav */
	.card nav { font-size: 16px; }
	nav > ul {
	display: grid;
	grid: auto / auto-flow;
	column-gap: 3px;
	padding: 3px;
	margin-bottom: 24px;
	background: #eee;
	border-radius: 10px;
	}
	nav > ul > li {
	list-style-type: none;
	}
	nav > ul > li > a {
	padding: 0 3px;
	display: block;
	color: #000;
	text-align: center;
	line-height: 32px;
	text-decoration: none;
	}
	nav > ul > li > a.active {
	background: #fff;
	font-weight: 500;
	border-radius: 8px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
	}

	/* slide */
	.slide-routes {
	border-radius: 10px;
	}
	.card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 560px;
	color: #fff;
	font-size: 64px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}
	.home {
	background: rgba(255, 100, 0, 0.8);
	}
	.about {
	background: rgba(0, 150, 255, 0.8);
	}
	.contact {
	background: rgba(100, 0, 255, 0.8);
	}

	/* nested */
	.card .slide-routes {
	flex-grow: 1;
	}
	</style>
	</head>
	<body>
	<main></main>
	</body>
	</html>
	#!/bin/bash
	exec npx concurrently -n watch,serve 'yarn watch' 'npx serve -s'