lerna workspaces + react 17 + new site example

.gitignore

@@ -1,26 +1,5 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-.docz
-# production
-/build
-/package
-/docs
-.idea
-
-*.tgz
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+node_modules
+.next
+packages/**/*/package
 
+.vercel

README.md

@@ -82,17 +82,10 @@ Then open http://localhost:8080
 
 ### Building
 
-+ `npm build` or `yarn build`
++ `npm dante_build` or `yarn dante_build`
 
-#### Upload test server (optional)
-
-For development purposes we have a server, written in ruby, to handle file uploading
-
-+ `bundle install`
-
-+ `bundle exec rackup`
-
-and open http://localhost:9292
++ dev install:
+lerna bootstrap
 
 ### Open source license
 

components/CustomLink.js

@@ -0,0 +1,16 @@
+import Link from 'next/link'
+
+export default function CustomLink({ as, href, ...otherProps }) {
+  return (
+    <>
+      <Link as={as} href={href}>
+        <a {...otherProps} />
+      </Link>
+      <style jsx>{`
+        a {
+          color: tomato;
+        }
+      `}</style>
+    </>
+  )
+}

components/Layout.js

@@ -0,0 +1,13 @@
+import Menu from './Menu'
+export default function Layout({ children }) {
+  return (
+    <>
+      <Menu/>
+      <div className="bg-white">
+        {children}
+      </div>
+      <style jsx>{`/**/`}</style>
+      <style jsx global>{`/**/`}</style>
+    </>
+  )
+}

components/Live.js

@@ -0,0 +1,136 @@
+import React from 'react'
+import Highlight, {defaultProps} from 'prism-react-renderer'
+import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live'
+import {mdx} from '@mdx-js/react'
+import Dante ,{ 
+  ImageBlockConfig,
+  EmbedBlockConfig,
+  VideoBlockConfig,
+  PlaceholderBlockConfig,
+  VideoRecorderBlockConfig,
+  DanteInlineTooltipConfig,
+  DanteTooltipConfig,
+  Icons,
+  //CustomWidgetconfig,
+  CodeBlockConfig,
+  PrismDraftDecorator,
+  LinkDecorator,
+  utils
+} from '../packages/dante2/src/editor/components/Dante'
+// 'Dante2'
+//'../packages/dante2/src/editor/components/Dante'
+//'Dante2' // use Dante2 to point to the component package
+
+import {
+  CustomWidgetconfig
+} from '../data/customWidget'
+import { CompositeDecorator } from 'draft-js'
+import MultiDecorator from 'draft-js-multidecorators'
+
+//import {code} from './site/data/poc.js'
+//import Dante from './editor/components/Dante/Dante.js'
+//import {CodeBlockConfig} from './editor/components/blocks/code'
+import Prism from 'prismjs'
+
+//import {PrismDraftDecorator} from './editor/components/decorators/prism'
+//import Link from './editor/components/decorators/link'
+//import findEntities from './editor/utils/find_entities'
+
+import contentData from '../data/poc.js'
+import { State, Toggle } from 'react-powerplug'
+import config from '../data/constants.js'
+
+function Button (){
+  return <p>sjsjsjsjsjsjs</p>
+}
+export default function Live({children, className, live, render}) {
+  const language = className.replace(/language-/, '')
+
+  if (live) {
+    return (
+      <div>
+        <LiveProvider
+          code={children.trim()}
+          transformCode={code => '/** @jsx mdx */' + code}
+          scope={{
+            mdx, 
+            Dante,
+            ImageBlockConfig,
+            EmbedBlockConfig,
+            VideoBlockConfig,
+            PlaceholderBlockConfig,
+            VideoRecorderBlockConfig,
+
+            DanteInlineTooltipConfig,
+            DanteTooltipConfig,
+            Icons,
+            CustomWidgetconfig,
+
+            MultiDecorator,
+            CompositeDecorator,
+            CodeBlockConfig,
+            PrismDraftDecorator,
+            LinkDecorator,
+            utils,
+
+            Prism,
+
+            Button, 
+            contentData, 
+            State, 
+            Toggle,
+            config
+          }}
+        >
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-0 border-gray-200 border-2 rounded-md shadow-md">
+
+            <div className=" p-8 shadow-lg">
+              <LivePreview />
+            </div>
+
+            <div style={{
+                backgroundColor: 'rgb(42, 39, 52)',
+                color: 'rgb(154, 134, 253)',
+                padding: '20px'
+              }}
+              className="p-8 shadow-lg text-xl">
+              <LiveEditor />
+            </div>
+          </div>
+
+          <LiveError className="bg-red-600 text-black font-bold" />
+        </LiveProvider>
+      </div>
+    )
+  }
+
+  if (render) {
+    return (
+      <div style={{marginTop: '40px'}}>
+        <LiveProvider code={children}>
+          <LivePreview />
+        </LiveProvider>
+      </div>
+    )
+  }
+
+  return (
+    <Highlight 
+      {...defaultProps} 
+      code={children.trim()} 
+      language={language}>
+      {({className, style, tokens, getLineProps, getTokenProps}) => (
+        <pre className={className} style={{...style, padding: '20px'}}>
+          {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({line, key: i})}>
+              {line.map((token, key) => (
+                <span key={key} {...getTokenProps({token, key})} />
+              ))}
+            </div>
+          ))}
+        </pre>
+      )}
+    </Highlight>
+  )
+}

components/Menu.js

@@ -0,0 +1,82 @@
+import Image from 'next/image'
+import Link from 'next/link'
+
+import {version} from '../packages/dante2/package.json'
+
+export default function Menu () {
+	return (
+		<nav className="bg-white shadow">
+			<div className="max-w-8xl mx-auto px-2 sm:px-6 lg:px-8">
+				<div className="relative flex justify-between h-16">
+					<div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
+						<button type="button" className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-200 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-green-500" aria-controls="mobile-menu" aria-expanded="false">
+							<span className="sr-only">Open main menu</span>
+
+							<svg className="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+								<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+							</svg>
+
+							<svg className="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+								<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+							</svg>
+						</button>
+					</div>
+					<div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
+						<div className="flex-shrink-0 flex items-center">
+
+							<Image
+								className="block lg:hidden h-8 w-auto"
+								src="/images/site/dante-editor-logo.png"
+								alt="Picture of the author"
+								width={21}
+								height={21}
+								className="hidden lg:block h-8 w-auto"
+							/>
+
+						</div>
+
+						<div className="hidden sm:ml-6 sm:flex sm:space-x-8">
+							<Link href="/">
+								<a className="border-green-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+									Dante Editor v{version}
+								</a>
+							</Link>
+							<Link href="/posts/index">
+								<a className="border-transparent text-gray-900 hover:border-gray-700 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+									Docs
+								</a>
+							</Link>
+							<Link href="/license">
+								<a className="border-transparent text-gray-900 hover:border-gray-700 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+									license
+								</a>
+							</Link>
+						</div>
+					</div>
+
+					<div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+
+						<div className="ml-3 relative">
+							<div>
+								<button type="button" className="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500" id="user-menu" aria-expanded="false" aria-haspopup="true">
+									<span className="sr-only">Open user menu</span>
+									<Image
+										className="block lg:hidden h-8 w-auto"
+										src="/images/site/github-logo.png"
+										alt="Picture of the author"
+										width={31}
+										height={31}
+										className="hidden lg:block h-8 w-auto"
+									/>
+								</button>
+							</div>
+						</div>
+
+					</div>
+
+				</div>
+
+			</div>
+		</nav>
+	);
+}

components/Sidebar.js

@@ -0,0 +1,28 @@
+import Link from 'next/link'
+
+export default function Index({ posts }) {
+  return (
+    <div className="py-5 fixed z-10 inset-0 flex-none h-full bg-black bg-opacity-25 w-full lg:bg-white lg:static lg:h-auto lg:overflow-y-visible lg:pt-0 lg:w-60 xl:w-72 lg:block hidden">
+      <div className="py-5 h-full overflow-y-auto scrolling-touch lg:h-auto lg:block lg:relative lg:sticky lg:bg-transparent overflow-hidden lg:top-18 bg-white mr-24 lg:mr-0">
+        <p className="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">
+          Articles
+        </p>
+        <ul>
+          {posts.map((post) => (
+            <li 
+              key={post.filePath}>
+              <Link
+                as={`/posts/${post.filePath.replace(/\.mdx?$/, '')}`}
+                href={`/posts/[slug]`}
+              >
+                <a className="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500">
+                  {post.data.title}
+                </a>
+              </Link>
+            </li>
+          ))}
+        </ul>   
+      </div>
+    </div>
+ )
+}

components/TestComponent.js

@@ -0,0 +1,16 @@
+export default function TestComponent({ name = 'world' }) {
+  return (
+    <>
+      <div>Hello, {name}!</div>
+      <style jsx>{`
+        div {
+          background-color: #111;
+          border-radius: 0.5em;
+          color: #fff;
+          margin-bottom: 1.5em;
+          padding: 0.5em 0.75em;
+        }
+      `}</style>
+    </>
+  )
+}