feat: add static rendering (#14)

CHANGELOG.md

@@ -1,3 +1,13 @@
+# v0.2.0-alpha.1
+
+## Features
+
+- Added UMD bundle
+
+## Bug fixes
+
+- Fixed rich text styling on demo
+
 # v0.1.1-alpha.1 (7/23/24)
 
 ## Breaking changes

README.md

@@ -12,9 +12,6 @@ Launched is a tool to make website content editable to clients with no codebase
 
 To get started, check out [https://launched.tech](https://launched.tech) for documentation, guides, and demos.
 
-> [!NOTE]
-> Your site needs to be made with react for Launched to work. Learn react [here](https://react.dev).
-
 > [!NOTE]
 > Launched is still in development. Be careful when using it in production.
 

demo/public/static-demo.html

@@ -10,25 +10,31 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 
-    <!-- Include the Launched library -->
-    <script type="module" src="/dist/bundle.js"></script>
-    <!-- Include necessary React and ReactDOM libraries -->
+    <!-- Include Launched styling -->
+    <link rel="stylesheet" href="/dist/ui/globals.css" />
+
+    <!-- Include necessary dependencies -->
     <script
       crossorigin
-      src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"
+      src="https://cdn.jsdelivr.net/combine/npm/react@18.3.1/umd/react.production.min.js,npm/react-dom@18.3.1/umd/react-dom.production.min.js"
     ></script>
     <script
       crossorigin
-      src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"
+      src="https://update.greasyfork.org/scripts/499179/1402245/react_jsx-runtime-umd.js"
     ></script>
+
+    <!-- Include the Launched library -->
+    <script type="module" src="/dist/bundle.js"></script>
+
     <!-- Initialize Launched -->
     <script type="module" defer>
       const { Launched } = launched;
 
-      const l = new Launched();
-      console.log(l);
+      const l = new Launched({
+        mode: "static",
+        save: (data) => console.log(data),
+      });
     </script>
-
     <style>
       *,
       *::before,
@@ -37,6 +43,18 @@
         padding: 0;
         box-sizing: border-box;
         list-style: none;
+        font-family:
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          Roboto,
+          Oxygen,
+          Ubuntu,
+          Cantarell,
+          "Open Sans",
+          "Helvetica Neue",
+          sans-serif;
       }
 
       body {
@@ -55,6 +73,10 @@
           padding: 12px;
           border: 1px solid #000;
           border-radius: 4px;
+
+          > :nth-child(2) {
+            margin-top: 6px;
+          }
         }
       }
     </style>
@@ -79,28 +101,35 @@ <h1 data-tag="heading">This is a heading.</h1>
       sunt consequuntur impedit facere cum!
     </p>
     <h2>These are some cards.</h2>
-    <ul>
+    <ul data-tag="cards">
       <li>
-        <h3 data-tag="cards-0-title">Card 1</h3>
-        <p data-tag="cards-0-description">
+        <h3 data-key="title">Card 1</h3>
+        <p data-key="description">
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
           quod.
         </p>
       </li>
       <li>
-        <h3 data-tag="cards-1-title">Card 2</h3>
-        <p data-tag="cards-1-description">
+        <h3 data-key="title">Card 2</h3>
+        <p data-key="description">
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
           quod.
         </p>
       </li>
       <li>
-        <h3 data-tag="cards-2-title">Card 3</h3>
-        <p data-tag="cards-2-description">
+        <h3 data-key="title">Card 3</h3>
+        <p data-key="description">
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
           quod.
         </p>
       </li>
     </ul>
+    <section data-tag="section">
+      <h2 data-key="heading">This is a section.</h2>
+      <div data-key="image" data-type="image">
+        <img src="https://picsum.photos/800/200" alt="" width="100%" />
+      </div>
+    </section>
+    <a href="#" data-tag="link" data-type="link">Go back</a>
   </body>
 </html>

demo/src/index.css

@@ -44,9 +44,76 @@
   flex-direction: column;
 }
 
-/*
-! tailwindcss v3.4.6 | MIT License | https://tailwindcss.com
-*/
+.r-body {
+  > .tiptap.ProseMirror-focused {
+    /* @apply outline-none; */
+    outline: none;
+  }
+  > * > *:not(:last-child) {
+    /* @apply mb-3; */
+    margin-bottom: 0.75rem;
+  }
+  a {
+    /* @apply text-brand-dark underline; */
+    color: #FF6924;
+    text-decoration: underline;
+  }
+  ul {
+    /* @apply list-disc; */
+    list-style-type: disc;
+    li {
+      /* @apply ml-6; */
+      margin-left: 1.5rem;
+    }
+  }
+}
+
+.r-menu {
+  /* @apply flex items-center gap-1 rounded-full border border-[#E5EAEE] bg-white px-2 py-1 text-[#4E5069] shadow-lg; */
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 9999px;
+  border: 1px solid #e5eaee;
+  background-color: white;
+  padding: 0.5rem 1rem;
+  color: #4e5069;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  > button {
+    /* @apply grid h-8 w-8 place-items-center rounded-xl bg-transparent text-lg transition-colors; */
+    display: grid;
+    height: 2rem;
+    width: 2rem;
+    place-items: center;
+    border-radius: 0.5rem;
+    background-color: transparent;
+    font-size: 1.125rem;
+    transition: color 300ms;
+    &:not(:disabled):hover,
+    &:not(:disabled):focus,
+    &:not(:disabled).active {
+      /* @apply bg-gray-100; */
+      background-color: rgb(243, 244, 246);
+    }
+    &:disabled {
+      /* @apply cursor-not-allowed opacity-50; */
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+  > div {
+    /* @apply mx-1 h-8 border-r border-gray-100; */
+    margin: 0 0.25rem;
+    height: 2rem;
+    border-right: 1px solid rgb(243, 244, 246);
+  }
+  .tabler-icon {
+    width: 1em;
+    height: 1em;
+  }
+}
+
+/* ! tailwindcss v3.4.6 | MIT License | https://tailwindcss.com */
 
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)