basic slides setup

2026-07-21 20:55:12 -04:00 · 2022-06-02 22:19:35 +02:00
parent a3eeaead2a
commit 1af10157d6
15 changed files with 7372 additions and 0 deletions
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+samples
@@ -0,0 +1,36 @@
+import { Tone } from '@strudel.cycles/tone';
+import { evalScope } from '@strudel.cycles/eval';
+import { MiniRepl as _MiniRepl } from '@strudel.cycles/react';
+import controls from '@strudel.cycles/core/controls.mjs';
+import { loadWebDirt } from '@strudel.cycles/webdirt';
+import { materialPalenightLarge } from './materialPalenightThemeLarge';
+
+export const defaultSynth = new Tone.PolySynth().chain(new Tone.Gain(0.5), Tone.Destination).set({
+  oscillator: { type: 'triangle' },
+  envelope: {
+    release: 0.01,
+  },
+});
+
+evalScope(
+  Tone,
+  controls,
+  import('@strudel.cycles/core'),
+  import('@strudel.cycles/tone'),
+  import('@strudel.cycles/tonal'),
+  import('@strudel.cycles/mini'),
+  import('@strudel.cycles/midi'),
+  import('@strudel.cycles/xen'),
+  import('@strudel.cycles/webaudio'),
+  import('@strudel.cycles/osc'),
+  import('@strudel.cycles/webdirt'),
+);
+
+loadWebDirt({
+  sampleMapUrl: './samples.json',
+  sampleFolder: './samples',
+});
+
+export function MaxiRepl({ tune }) {
+  return <_MiniRepl tune={tune} defaultSynth={defaultSynth} hideOutsideView={true} theme={materialPalenightLarge} />;
+}
@@ -0,0 +1,6 @@
+```sh
+npm create vite@latest slides -- --template react
+cd slides
+npm i vite-plugin-mdx --save-dev
+npm run dev
+```
@@ -0,0 +1,64 @@
+import { useState, useEffect } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+
+export function Slides({ children }) {
+  const [slide, setSlide] = useState(0);
+  return (
+    <div className="w-screen h-screen overflow-hidden bg-slate-900">
+      <AnimatePresence exitBeforeEnter>
+        <motion.div
+          key={slide}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="w-screen h-screen"
+        >
+          <div className="flex justify-center items-center p-6">
+            <div className="prose grow max-w-full text-gray-200 font-serif prose-headings:text-gray-200 prose-headings:font-sans prose-2xl prose-slate">
+              {children[slide]}
+            </div>
+          </div>
+        </motion.div>
+      </AnimatePresence>
+      <SlideNav slide={slide} setSlide={setSlide} slides={children} />
+    </div>
+  );
+}
+
+export function Slide({ children }) {
+  return children;
+}
+
+function SlideNav({ slide, setSlide, slides }) {
+  return (
+    <div className="flex absolute bottom-8 space-x-2 w-full justify-center items-center z-1">
+      <button onClick={() => setSlide((s) => (s + slides.length - 1) % slides.length)}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-6 w-6 text-gray-200"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+        </svg>
+      </button>
+      {slides.map((_, i) => (
+        <div key={i} className={`rounded-full ${slide === i ? 'bg-gray-200 w-3 h-3' : 'bg-gray-500 w-2 h-2'}`}></div>
+      ))}
+      <button onClick={() => setSlide((s) => (s + 1) % slides.length)}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-6 w-6 text-gray-200"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+        </svg>
+      </button>
+    </div>
+  );
+}
@@ -0,0 +1,51 @@
+import { Slides, Slide } from './Slides.jsx';
+import { MaxiRepl } from './MaxiRepl';
+
+<Slides>
+  <Slide>
+
+## Strudel: Algorithmic Patterns for the Web
+
+- asfasf
+- asdasd
+
+asdfasdf
+
+<MaxiRepl tune={'"c3"'} />
+
+ </Slide>
+  <Slide>
+
+## This is my deck
+
+</Slide>
+  <Slide>
+
+## The End
+
+ </Slide> 
+  <Slide>
+
+## The End
+
+ </Slide> 
+  <Slide>
+
+## The End
+
+ </Slide> 
+</Slides>
+
+# Strudel: Algorithmic Patterns for the Web
+
+asfasf
+
+---
+
+## This is my deck
+
+---
+
+## The End
+
+---
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/main.jsx"></script>
+  </body>
+</html>
@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Deck from './deck.mdx';
+import './style.css';
+import '@strudel.cycles/react/dist/style.css';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <Deck />
+  </React.StrictMode>,
+  document.getElementById('root'),
+);
@@ -0,0 +1,136 @@
+import { EditorView } from '@codemirror/view';
+import { HighlightStyle, tags as t } from '@codemirror/highlight';
+
+/*
+  Credits for color palette:
+
+  Author:     Mattia Astorino (http://github.com/equinusocio)
+  Website:    https://material-theme.site/
+*/
+
+const ivory = '#abb2bf',
+  stone = '#7d8799', // Brightened compared to original to increase contrast
+  invalid = '#ffffff',
+  darkBackground = '#21252b',
+  highlightBackground = 'rgba(0, 0, 0, 0.5)',
+  // background = '#292d3e',
+  background = 'transparent',
+  tooltipBackground = '#353a42',
+  selection = 'rgba(128, 203, 196, 0.5)',
+  cursor = '#ffcc00';
+
+/// The editor theme styles for Material Palenight.
+export const materialPalenightThemeLarge = EditorView.theme(
+  {
+    // done
+    '&': {
+      color: '#ffffff',
+      backgroundColor: background,
+      fontSize: '30px',
+      'z-index': 11,
+    },
+
+    // done
+    '.cm-content': {
+      caretColor: cursor,
+      lineHeight: '36px',
+    },
+    '.cm-line': {
+      background: '#2C323699',
+    },
+    // done
+    '&.cm-focused .cm-cursor': {
+      backgroundColor: cursor,
+      width: '3px',
+    },
+
+    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+      backgroundColor: selection,
+    },
+
+    '.cm-panels': { backgroundColor: darkBackground, color: '#ffffff' },
+    '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
+    '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
+
+    // done, use onedarktheme
+    '.cm-searchMatch': {
+      backgroundColor: '#72a1ff59',
+      outline: '1px solid #457dff',
+    },
+    '.cm-searchMatch.cm-searchMatch-selected': {
+      backgroundColor: '#6199ff2f',
+    },
+
+    '.cm-activeLine': { backgroundColor: highlightBackground },
+    '.cm-selectionMatch': { backgroundColor: '#aafe661a' },
+
+    '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+      backgroundColor: '#bad0f847',
+      outline: '1px solid #515a6b',
+    },
+
+    // done
+    '.cm-gutters': {
+      background: 'transparent',
+      color: '#676e95',
+      border: 'none',
+    },
+
+    '.cm-activeLineGutter': {
+      backgroundColor: highlightBackground,
+    },
+
+    '.cm-foldPlaceholder': {
+      backgroundColor: 'transparent',
+      border: 'none',
+      color: '#ddd',
+    },
+
+    '.cm-tooltip': {
+      border: 'none',
+      backgroundColor: tooltipBackground,
+    },
+    '.cm-tooltip .cm-tooltip-arrow:before': {
+      borderTopColor: 'transparent',
+      borderBottomColor: 'transparent',
+    },
+    '.cm-tooltip .cm-tooltip-arrow:after': {
+      borderTopColor: tooltipBackground,
+      borderBottomColor: tooltipBackground,
+    },
+    '.cm-tooltip-autocomplete': {
+      '& > ul > li[aria-selected]': {
+        backgroundColor: highlightBackground,
+        color: ivory,
+      },
+    },
+  },
+  { dark: true },
+);
+
+/// The highlighting style for code in the Material Palenight theme.
+export const materialPalenightHighlightStyle = HighlightStyle.define([
+  { tag: t.keyword, color: '#c792ea' },
+  { tag: t.operator, color: '#89ddff' },
+  { tag: t.special(t.variableName), color: '#eeffff' },
+  { tag: t.typeName, color: '#f07178' },
+  { tag: t.atom, color: '#f78c6c' },
+  { tag: t.number, color: '#ff5370' },
+  { tag: t.definition(t.variableName), color: '#82aaff' },
+  { tag: t.string, color: '#c3e88d' },
+  { tag: t.special(t.string), color: '#f07178' },
+  { tag: t.comment, color: stone },
+  { tag: t.variableName, color: '#f07178' },
+  { tag: t.tagName, color: '#ff5370' },
+  { tag: t.bracket, color: '#a2a1a4' },
+  { tag: t.meta, color: '#ffcb6b' },
+  { tag: t.attributeName, color: '#c792ea' },
+  { tag: t.propertyName, color: '#c792ea' },
+  { tag: t.className, color: '#decb6b' },
+  { tag: t.invalid, color: invalid },
+]);
+
+/// Extension to enable the Material Palenight theme (both the editor theme and
+/// the highlight style).
+// : Extension
+export const materialPalenightLarge = [materialPalenightThemeLarge, materialPalenightHighlightStyle];
@@ -0,0 +1,34 @@
+{
+  "name": "@strudel.cycles/tutorial",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "type": "module",
+  "dependencies": {
+    "framer-motion": "^6.3.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@mdx-js/mdx": "^1.6.22",
+    "@mdx-js/react": "^1.6.22",
+    "@tailwindcss/typography": "^0.5.2",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
+    "@vitejs/plugin-react": "^1.3.0",
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.13",
+    "rehype-autolink-headings": "^6.1.1",
+    "rehype-slug": "^5.0.1",
+    "remark-toc": "^8.0.1",
+    "sass": "^1.51.0",
+    "tailwindcss": "^3.0.24",
+    "vite": "^2.9.9",
+    "vite-plugin-mdx": "^3.5.10"
+  }
+}
@@ -0,0 +1,12 @@
+/*
+postcss.config.js - <short description TODO>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/repl/postcss.config.js>
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
@@ -0,0 +1,17 @@
+{
+  "bd": ["bd/Bassdrum-01.wav","bd/Bassdrum-02.wav","bd/Bassdrum-03.wav","bd/Bassdrum-04.wav","bd/Bassdrum-05.wav","bd/Bassdrum-06.wav","bd/Bassdrum-07.wav","bd/Bassdrum-08.wav","bd/Bassdrum-09.wav","bd/Bassdrum-10.wav","bd/Bassdrum-11.wav","bd/Bassdrum-12.wav","bd/Bassdrum-13.wav","bd/Bassdrum-14.wav"],
+  "cb": ["cb/Cowbell.wav"],
+  "cp": ["cp/Clap.wav"],
+  "cr": ["cr/Crash.wav"],
+  "hh": ["hh/Hat Closed-01.wav","hh/Hat Closed-02.wav"],
+  "ht": ["ht/Tom H-01.wav","ht/Tom H-02.wav","ht/Tom H-03.wav","ht/Tom H-04.wav","ht/Tom H-05.wav","ht/Tom H-06.wav"],
+  "lt": ["lt/Tom L-01.wav","lt/Tom L-02.wav","lt/Tom L-03.wav","lt/Tom L-04.wav","lt/Tom L-05.wav","lt/Tom L-06.wav"],
+  "misc": ["misc/Metal-01.wav","misc/Metal-02.wav","misc/Metal-03.wav","misc/Scratch.wav","misc/Shot-01.wav","misc/Shot-02.wav","misc/Shot-03.wav"],
+  "mt": ["mt/Tom M-01.wav","mt/Tom M-02.wav","mt/Tom M-03.wav","mt/Tom M-05.wav"],
+  "oh": ["oh/Hhopen1.wav"],
+  "perc": ["perc/Blow1.wav"],
+  "rd": ["rd/Ride.wav"],
+  "rim": ["rim/zRim Shot-01.wav","rim/zRim Shot-02.wav"],
+  "sd": ["sd/Snaredrum-01.wav","sd/Snaredrum-02.wav","sd/Snaredrum-03.wav","sd/Snaredrum-04.wav","sd/Snaredrum-05.wav","sd/Snaredrum-06.wav","sd/Snaredrum-07.wav","sd/Snaredrum-08.wav","sd/Snaredrum-09.wav","sd/Snaredrum-10.wav","sd/Snaredrum-11.wav","sd/Snaredrum-12.wav","sd/Snaredrum-13.wav","sd/Snaredrum-14.wav","sd/Snaredrum-15.wav","sd/Snaredrum-16.wav","sd/Snaredrum-17.wav","sd/Snaredrum-18.wav","sd/Snaredrum-19.wav","sd/Snaredrum-20.wav","sd/Snaredrum-21.wav"]
+  } 
+  
@@ -0,0 +1,145 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/montserrat/v18/JTURjIg1_i6t8kCHKm45_bZF3gTD_vx3rCubqg.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/montserrat/v18/JTURjIg1_i6t8kCHKm45_bZF3g3D_vx3rCubqg.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/montserrat/v18/JTURjIg1_i6t8kCHKm45_bZF3gbD_vx3rCubqg.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/montserrat/v18/JTURjIg1_i6t8kCHKm45_bZF3gfD_vx3rCubqg.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/montserrat/v18/JTURjIg1_i6t8kCHKm45_bZF3gnD_vx3rCs.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/montserrat/v18/JTURjIg1_i6t8kCHKm45_epG3gTD_vx3rCubqg.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/montserrat/v18/JTURjIg1_i6t8kCHKm45_epG3g3D_vx3rCubqg.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/montserrat/v18/JTURjIg1_i6t8kCHKm45_epG3gbD_vx3rCubqg.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/montserrat/v18/JTURjIg1_i6t8kCHKm45_epG3gfD_vx3rCubqg.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/montserrat/v18/JTURjIg1_i6t8kCHKm45_epG3gnD_vx3rCs.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* @import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap'); */
+
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/merriweather/v28/u-440qyriQwlOrhSvowK_l5-cSZMdeX3rsHo.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/merriweather/v28/u-440qyriQwlOrhSvowK_l5-eCZMdeX3rsHo.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/merriweather/v28/u-440qyriQwlOrhSvowK_l5-cyZMdeX3rsHo.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/merriweather/v28/u-440qyriQwlOrhSvowK_l5-ciZMdeX3rsHo.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/merriweather/v28/u-440qyriQwlOrhSvowK_l5-fCZMdeX3rg.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
@@ -0,0 +1,17 @@
+/*
+tailwind.config.js - <short description TODO>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/repl/tailwind.config.js>
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+module.exports = {
+  content: ['./**/*.{js,jsx,ts,tsx,mdx}'],
+  theme: {
+    extend: {},
+    fontFamily: {
+      sans: ['Montserrat'],
+      serif: ['Merriweather'],
+    },
+  },
+  plugins: [require('@tailwindcss/typography')],
+};
@@ -0,0 +1,32 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import _mdx from 'vite-plugin-mdx';
+/* import remarkToc from 'remark-toc';
+import rehypeSlug from 'rehype-slug';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings'; */
+
+const mdx = _mdx.default || _mdx;
+// `options` are passed to `@mdx-js/mdx`
+const options = {
+  // See https://mdxjs.com/advanced/plugins
+  remarkPlugins: [
+    // remarkToc,
+    // E.g. `remark-frontmatter`
+  ],
+  rehypePlugins: [
+    // rehypeSlug, rehypeAutolinkHeadings
+  ],
+};
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), mdx(options)],
+  build: {
+    outDir: '../out/tutorial',
+  },
+  base: '/',
+});
+
+// jsxRuntime:'classic' to prevent "jsxDevRuntime.exports.jsxDEV is not a function" for dev mode
+// mode: 'development',
+// react({ jsxRuntime: 'classic' }),