demos: Add setup for plain js demos (#2288)
* add basic js demo * improve js demos * change demo button * fix js demos on build * add tailwind experiment * docs: replace tailwind demo Co-authored-by: Philipp Kühn <philippkuehn@MacBook-Pro-von-Philipp.local>
This commit is contained in:
Philipp Kühn
@@ -114,7 +114,7 @@ export default {
|
||||
sources: {},
|
||||
currentTab: null,
|
||||
currentFile: null,
|
||||
tabOrder: ['React', 'Vue'],
|
||||
tabOrder: ['React', 'Vue', 'JS'],
|
||||
debugJSON: null,
|
||||
showDebug: false,
|
||||
}
|
||||
|
||||
11
demos/setup/js.ts
Normal file
11
demos/setup/js.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import 'iframe-resizer/js/iframeResizer.contentWindow'
|
||||
import { debug } from './helper'
|
||||
import './style.scss'
|
||||
|
||||
export default function init(name: string, source: any) {
|
||||
// @ts-ignore
|
||||
window.source = source
|
||||
document.title = name
|
||||
|
||||
debug()
|
||||
}
|
||||
54
demos/src/Experiments/Tailwind/JS/index.html
Normal file
54
demos/src/Experiments/Tailwind/JS/index.html
Normal file
@@ -0,0 +1,54 @@
|
||||
<!-- load tailwind -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tailwindcss/typography/dist/typography.min.css" />
|
||||
|
||||
<!-- provide element -->
|
||||
<div class="element"></div>
|
||||
|
||||
<!-- create editor -->
|
||||
<script type="module">
|
||||
import { Editor } from '@tiptap/core'
|
||||
import StarterKit from '@tiptap/starter-kit'
|
||||
|
||||
const editor = new Editor({
|
||||
element: document.querySelector('.element'),
|
||||
extensions: [
|
||||
StarterKit,
|
||||
],
|
||||
editorProps: {
|
||||
attributes: {
|
||||
class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl m-5 focus:outline-none',
|
||||
},
|
||||
},
|
||||
content: `
|
||||
<h2>
|
||||
Hi there,
|
||||
</h2>
|
||||
<p>
|
||||
this is a basic <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
That’s a bullet list with one …
|
||||
</li>
|
||||
<li>
|
||||
… or two list items.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
|
||||
</p>
|
||||
<pre><code class="language-css">body {
|
||||
display: none;
|
||||
}</code></pre>
|
||||
<p>
|
||||
I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
|
||||
</p>
|
||||
<blockquote>
|
||||
Wow, that’s amazing. Good work, boy! 👏
|
||||
<br />
|
||||
— Mom
|
||||
</blockquote>
|
||||
`,
|
||||
})
|
||||
</script>
|
||||
@@ -39,6 +39,88 @@ export default defineConfig({
|
||||
vue(),
|
||||
reactRefresh(),
|
||||
|
||||
{
|
||||
name: 'html-transform',
|
||||
transformIndexHtml: {
|
||||
enforce: 'pre',
|
||||
transform(html: string, context) {
|
||||
const dir = dirname(context.path)
|
||||
const data = dir.split('/')
|
||||
const demoCategory = data[2]
|
||||
const demoName = data[3]
|
||||
|
||||
if (dir.endsWith('/JS')) {
|
||||
return {
|
||||
html: `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
${html}
|
||||
<script type="module">
|
||||
import setup from '../../../../setup/js.ts'
|
||||
import source from '@source'
|
||||
setup('${demoCategory}/${demoName}', source)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
`,
|
||||
tags: [],
|
||||
}
|
||||
}
|
||||
|
||||
if (dir.endsWith('/Vue')) {
|
||||
return {
|
||||
html: `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module">
|
||||
import setup from '../../../../setup/vue.ts'
|
||||
import source from '@source'
|
||||
setup('${demoCategory}/${demoName}', source)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
`,
|
||||
tags: [],
|
||||
}
|
||||
}
|
||||
|
||||
if (dir.endsWith('/React')) {
|
||||
return {
|
||||
html: `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module">
|
||||
import setup from '../../../../setup/react.ts'
|
||||
import source from '@source'
|
||||
setup('${demoCategory}/${demoName}', source)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
`,
|
||||
tags: [],
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
name: 'raw',
|
||||
resolveId(id, importer) {
|
||||
@@ -97,13 +179,16 @@ export default defineConfig({
|
||||
load(id) {
|
||||
if (id.startsWith('source!')) {
|
||||
const path = id.split('!!')[0].replace('source!', '')
|
||||
const files = fg.sync(`${path}/**/*`, {
|
||||
ignore: [
|
||||
'**/index.html',
|
||||
'**/*.spec.js',
|
||||
'**/*.spec.ts',
|
||||
],
|
||||
})
|
||||
const ignore = [
|
||||
'**/*.spec.js',
|
||||
'**/*.spec.ts',
|
||||
]
|
||||
|
||||
if (!path.endsWith('/JS')) {
|
||||
ignore.push('**/index.html')
|
||||
}
|
||||
|
||||
const files = fg.sync(`${path}/**/*`, { ignore })
|
||||
.map(filePath => {
|
||||
const name = filePath.replace(`${path}/`, '')
|
||||
|
||||
|
||||
Reference in New Issue
Block a user