remove docs and show docs-src

.gitignore

@@ -139,4 +139,4 @@ dist
 .pnp.*
 
 playground
-docs-src
+docs

docs-src/data/documents.ts

@@ -0,0 +1,127 @@
+export const IntroGroup = {
+    name: 'Introduction',
+    list: [
+        {
+            name: 'What is Markup?',
+            path: 'documentation',
+        },
+        {
+            name: 'Installation',
+            path: 'documentation/installation',
+        },
+        {
+            name: 'Essential Training',
+            path: 'documentation/essential-training',
+        },
+        {
+            name: 'Tutorial',
+            path: 'documentation/tutorial',
+        },
+        {
+            name: 'Examples',
+            path: 'documentation/examples',
+        },
+    ],
+}
+
+export const TemplatingGroup = {
+    name: 'Templating',
+    list: [
+        {
+            name: 'Creating & Rendering',
+            path: 'documentation/creating-and-rendering',
+        },
+        {
+            name: 'Template values',
+            path: 'documentation/template-values',
+        },
+        {
+            name: 'Replacing content',
+            path: 'documentation/replacing-content',
+        },
+        {
+            name: 'DOM references',
+            path: 'documentation/dom-references',
+        },
+        {
+            name: 'Conditional attributes',
+            path: 'documentation/conditional-attributes',
+        },
+        {
+            name: 'Event handling',
+            path: 'documentation/event-handling',
+        },
+        {
+            name: 'Dynamic values & Update',
+            path: 'documentation/dynamic-values-and-update',
+        },
+        {
+            name: 'State values',
+            path: 'documentation/state-values',
+        },
+    ],
+}
+
+export const HelpersGroup = {
+    name: 'Helpers',
+    list: [
+        {
+            name: 'What is a Helper?',
+            path: 'documentation/what-is-a-helper',
+        },
+        {
+            name: 'Effect helper',
+            path: 'documentation/effect-helper',
+        },
+        {
+            name: 'Conditional Rendering',
+            path: 'documentation/conditional-rendering',
+        },
+        {
+            name: 'Repetition & Lists',
+            path: 'documentation/repetition-and-lists',
+        },
+        {
+            name: 'Is & IsNot helpers',
+            path: 'documentation/is-isnot-helpers',
+        },
+        {
+            name: 'Or, And, & OneOf helpers',
+            path: 'documentation/or-and-oneof-helpers',
+        },
+        {
+            name: 'Pick helper',
+            path: 'documentation/pick-helper',
+        },
+        {
+            name: 'Suspense helper',
+            path: 'documentation/suspense-helper',
+        },
+        {
+            name: 'Custom helper',
+            path: 'documentation/custom-helper',
+        },
+    ],
+}
+
+export const ComponentsGroup = {
+    name: 'Capabilities',
+    list: [
+        {
+            name: 'Function Components',
+            path: 'documentation/function-components',
+        },
+        {
+            name: 'Web Components',
+            path: 'documentation/web-components',
+        },
+        {
+            name: 'Server Side Rendering',
+            path: 'documentation/server-side-rendering',
+        },
+        {
+            name: 'State Store',
+            path: 'documentation/state-store',
+        },
+    ],
+}

docs-src/data/essential-training.json

@@ -0,0 +1,160 @@
+[
+  {
+    "name": "Introduction",
+    "titles": [
+      {
+        "title": "What is Markup?",
+        "thumbnail": "",
+        "link": "",
+        "description": ""
+      },
+      {
+        "title": "Installation",
+        "thumbnail": "",
+        "link": "",
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "Templating",
+    "titles": [
+      {
+        "title": "Creating and rendering templates",
+        "thumbnail": "",
+        "link": "",
+        "description": ""
+      },
+      {
+        "title": "Template values",
+        "thumbnail": "",
+        "link": "",
+        "description": ""
+      },
+      {
+        "title": "Replacing content",
+        "thumbnail": "",
+        "link": "",
+        "description": ""
+      },
+      {
+        "title": "DOM references",
+        "thumbnail": "",
+        "link": "",
+        "description": ""
+      },
+      {
+        "title": "Conditional attributes",
+        "thumbnail": "",
+        "link": "",
+        "description": ""
+      },
+      {
+        "title": "Event handling",
+        "thumbnail": "",
+        "link": "",
+        "description": ""
+      },
+      {
+        "title": "Dynamic values & update",
+        "thumbnail": "",
+        "link": "",
+        "description": ""
+      },
+      {
+        "title": "State values",
+        "thumbnail": "",
+        "link": "",
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "Helpers",
+    "titles": [
+      {
+        "title": "What is a Helper?",
+        "thumbnail": "",
+        "link": "",
+        "description": ""
+      },
+      {
+        "title": "The effect helper",
+        "thumbnail": "",
+        "link": "",
+        "description": ""
+      },
+      {
+        "title": "Conditional rendering",
+        "thumbnail": "",
+        "link": "",
+        "description": ""
+      },
+      {
+        "title": "Repetition & lists",
+        "thumbnail": "",
+        "link": "",
+        "description": ""
+      },
+      {
+        "title": "The is & isNot helpers",
+        "thumbnail": "",
+        "link": "",
+        "description": ""
+      },
+      {
+        "title": "The or, and, & oneOf helpers",
+        "thumbnail": "",
+        "link": "",
+        "description": ""
+      },
+      {
+        "title": "the pick helper",
+        "thumbnail": "",
+        "link": "",
+        "description": ""
+      },
+      {
+        "title": "The suspense helper",
+        "thumbnail": "",
+        "link": "",
+        "description": ""
+      },
+      {
+        "title": "Custom helpers",
+        "thumbnail": "",
+        "link": "",
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "Capabilities",
+    "titles": [
+      {
+        "title": "Function components",
+        "thumbnail": "",
+        "link": "",
+        "description": ""
+      },
+      {
+        "title": "Web Components",
+        "thumbnail": "",
+        "link": "",
+        "description": ""
+      },
+      {
+        "title": "Server Side Rendering",
+        "thumbnail": "",
+        "link": "",
+        "description": ""
+      },
+      {
+        "title": "State store",
+        "thumbnail": "",
+        "link": "",
+        "description": ""
+      }
+    ]
+  }
+]

docs-src/data/reasons.json

@@ -0,0 +1,43 @@
+[
+  {
+    "title": "Reactive",
+    "description": "The template will react to data changes and only trigger the DOM update calculation for the element and element parts that depend and the data changed.",
+    "img": "./assets/reactive.svg",
+    "imgAlt": "reactive templating system"
+  },
+  {
+    "title": "Independent",
+    "description": "Most templating system are dependent on the framework or specific setup to be usable. This system standalone and can be used alongside anything.",
+    "img": "./assets/independent.svg",
+    "imgAlt": "independent templating system"
+  },
+  {
+    "title": "Fast",
+    "description": "The system uses a fast HTML parser but it also does not waste in recalculating parts of the DOM that does not depend on any changed data which makes it fast.",
+    "img": "./assets/fast.svg",
+    "imgAlt": "fast templating system"
+  },
+  {
+    "title": "Small",
+    "description": "So powerful and yet so tiny. Great things come in small packages.",
+    "img": "./assets/small.svg",
+    "imgAlt": "small templating system",
+    "breakDown": [
+      "<strong>< 1B</strong> CDN compressed",
+      "<strong>~ 17.5kb </strong>minified",
+      "<strong>~ 68kb</strong> raw"
+    ]
+  },
+  {
+    "title": "Simple",
+    "description": "With just two core APIs, learning it is pretty straight forward even so if you already know JavaScript and HTML. Everything else, which is not much, is to aid with templating.",
+    "img": "./assets/simple.svg",
+    "imgAlt": "simple templating system"
+  },
+  {
+    "title": "Client + Server",
+    "description": "You can use the same templating system on the client and server and take advantage of every features to either render things at runtime or on the server.",
+    "img": "./assets/client-server.svg",
+    "imgAlt": "client-server templating system"
+  }
+]

docs-src/data/social.json

@@ -0,0 +1,32 @@
+[
+  {
+    "link": "https://medium.com/before-semicolon",
+    "icon": "assets/medium2.svg",
+    "name": "Medium blog"
+  },
+  {
+    "link": "https://www.facebook.com/beforesemicolon/",
+    "icon": "assets/facebook.svg",
+    "name": "Facebook"
+  },
+  {
+    "link": "https://www.instagram.com/before_semicolon_/",
+    "icon": "assets/instagram.svg",
+    "name": "Instagram"
+  },
+  {
+    "link": "https://www.reddit.com/r/beforesemicolon/",
+    "icon": "assets/reddit.svg",
+    "name": "Reddit"
+  },
+  {
+    "link": "https://twitter.com/BeforeSemicolon",
+    "icon": "assets/twitter.svg",
+    "name": "Twitter"
+  },
+  {
+    "link": "https://www.youtube.com/channel/UCrU33aw1k9BqTIq2yKXrmBw",
+    "icon": "assets/youtube.svg",
+    "name": "YouTube"
+  }
+]