mirror/strudel
1
0
Fork 0
mirror of https://codeberg.org/uzu/strudel synced 2026-07-13 06:19:33 -04:00
Code Issues Packages Projects Releases Wiki Activity

tutorial layout

Browse Source
This commit is contained in:
Felix Roos
2022-02-18 14:00:35 +01:00
parent 7b28a620a9
commit 3f051cdd8d
9 changed files with 116 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
repl/src/tutorial/MiniRepl.tsx
+1 -6
View File
@@ -18,12 +18,7 @@ function MiniRepl({ tune }) {
return (
<>
<textarea value={code} onChange={(e) => setCode(e.target.value)} />
<button
className="flex-none w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500"
onClick={() => togglePlay()}
>
{cycle.started ? 'pause' : 'play'}
</button>
<button onClick={() => togglePlay()}>{cycle.started ? 'pause' : 'play'}</button>
</>
);
}
repl/src/tutorial/Tutorial.js
+26
View File
@@ -0,0 +1,26 @@
import React from 'react';
import ReactDOM from 'react-dom';
import Tutorial from './tutorial.mdx';
import logo from '../logo.svg';
ReactDOM.render(
<React.StrictMode>
<div className="min-h-screen flex flex-col">
<header className="flex-none w-full h-16 px-2 flex items-center border-b border-gray-200 bg-white justify-between">
<div className="flex items-center space-x-2">
<img src={logo} className="Tidal-logo w-16 h-16" alt="logo" />
<h1 className="text-2xl">Strudel Tutorial</h1>
</div>
{!window.location.href.includes('localhost') && (
<div className="flex space-x-4">
<a href="../">go to REPL</a>
</div>
)}
</header>
<section className="prose p-4">
<Tutorial />
</section>
</div>
</React.StrictMode>,
document.getElementById('root')
);
repl/src/tutorial/index.html
+16 -14
View File
@@ -1,14 +1,16 @@
<div id="root"></div>
<script type="module">
import React from 'react';
import ReactDOM from 'react-dom';
import * as React from 'react';
import Tutorial from './tutorial.mdx';
ReactDOM.render(
<React.StrictMode>
<Tutorial />
</React.StrictMode>,
document.getElementById('root')
);
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="../../public/favicon.ico" />
<link rel="stylesheet" type="text/css" href="./style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Strudel REPL" />
<title>Strudel Tutorial</title>
</head>
<body>
<div id="root"></div>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script type="module" src="Tutorial.js"></script>
</body>
</html>
repl/src/tutorial/style.css
+3
View File
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
repl/src/tutorial/tutorial.mdx
+5 -1
View File
@@ -1,7 +1,11 @@
import MiniRepl from './MiniRepl';
# Strudel Tutorial
# About Strudel
hello!!!!
# Mini Notation
blablalba
<MiniRepl tune="C3.m" />