feat: add plugins and integrations page

packages/docs/client/webcontainer.ts

@@ -3,6 +3,7 @@ import dedent from 'dedent';
 
 import './editor.scss';
 import { registerSyntaxHighlighter } from './registerSyntaxHighlighter.js';
+import type { EditorConfigObjType } from '../utils/examples.js';
 
 const hljs = registerSyntaxHighlighter();
 
@@ -117,13 +118,7 @@ let uncommittedPath = '';
 let isDevServerLoading = true;
 let devServerRetriesAttempted = 0;
 
-const initiateWebContainer = async (webcontainerData: {
-  files: Record<string, { file: { contents: string } }>;
-  activeFile?: string;
-  minHeight?: string;
-  showFileExplorer?: boolean;
-  output: Record<string, { screen: string }>;
-}) => {
+const initiateWebContainer = async (webcontainerData: EditorConfigObjType) => {
   const { files } = webcontainerData;
 
   if (webcontainerData.showFileExplorer === false) {

packages/docs/components/Editor.tsx

@@ -0,0 +1,11 @@
+import React from 'react?server';
+import editor from './editor.abell';
+import type { EditorConfigObjType } from '../utils/examples.js';
+
+export const Editor = ({
+  editorConfig
+}: {
+  editorConfig: EditorConfigObjType;
+}): JSX.Element => {
+  return <div dangerouslySetInnerHTML={{ __html: editor(editorConfig) }} />;
+};

packages/docs/content/plugins-and-integration.mdx

@@ -0,0 +1,48 @@
+import { Editor } from '../components/Editor.tsx';
+import { markdownIntegration } from '../utils/examples.ts';
+
+# Plugins & Integrations
+
+"How do I use Abell with ...?" This page will help you out!
+
+Abell's low-level API and internally using Vite as a bundler, helps it integrate with other super cool tools in the ecosystem.
+
+## With Vite Plugins
+
+One way to use something with Abell is to find a Vite Plugin to do that.
+
+Lets say you want to import markdown files in your abell project. You can use [vite-plugin-md-to-html](https://github.com/saurabhdaware/vite-plugin-md-to-html) or any markdown to html plugin of your choice.
+
+<Editor editorConfig={markdownIntegration} />
+
+## With MDX
+
+Fun fact: This page that you're reading is being rendered from mdx. Similar to above example of markdown, It uses `vite-plugin-jsx-to-html` plugin in combination with rollup's official (vite compatible) `@mdx-js/rollup` plugin.
+
+You can copy-paste this configuration and install plugins to start importing mdx files in your project.
+
+```sh
+npm i --save-dev vite-plugin-jsx-to-html @mdx-js/rollup
+```
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'abell';
+
+export default defineConfig({
+  plugins: [
+    mdx(), // Turns MDX to React Component (JSX)
+    vitePluginJSXToHTML({ extensions: ['.mdx'] }) // Turns JSX to HTML
+  ]
+});
+```
+
+## With Frameworks
+
+You can use combination of vite plugins and curly braces of Abell `{{ }}` to render your favorite framework on build-time.
+
+You will find integration with most frameworks in [saurabhdaware/abell-integrations](https://github.com/saurabhdaware/abell-integrations/tree/main) repository
+
+- [Abell with React](https://github.com/saurabhdaware/abell-integrations/tree/main/with-react)
+- [Abell with Solid](https://github.com/saurabhdaware/abell-integrations/tree/main/with-solidjs)
+- [Abell with Vue](https://github.com/saurabhdaware/abell-integrations/tree/main/with-vue)

packages/docs/content/syntax-guide.mdx

@@ -88,6 +88,8 @@ Which means if you don't like writing `.map` or using ternary operators, You can
 
 Abell has native component support. It allows you to make your HTML, CSS code reusable.
 
+You can define component starting with `_` to tell abell to not create a page of it in final output. You can also opt-out of this `_` rule (and file-system routing) by using [Custom Routing](/custom-routing).
+
 <div dangerouslySetInnerHTML={{ __html: editor(componentsUsage) }} />
 
 ### Passing Props

packages/docs/entry.build.ts

@@ -12,7 +12,7 @@ import docs from './docs.abell';
 import gettingStartedContent from './content/getting-started.mdx';
 import syntaxGuide from './content/syntax-guide.mdx';
 import customRouting from './content/custom-routing.mdx';
-// import pluginsAndIntegration from './content/plugins-and-integration.mdx';
+import pluginsAndIntegration from './content/plugins-and-integration.mdx';
 
 // Docs Routes
 const docsPaths = [
@@ -35,12 +35,12 @@ const docsPaths = [
     path: '/custom-routing',
     title: 'Custom Routing',
     content: customRouting
+  },
+  {
+    path: '/plugins-and-integrations',
+    title: 'Plugins & Integrations',
+    content: pluginsAndIntegration
   }
-  // {
-  //   path: '/plugins-and-integrations',
-  //   title: 'Plugins & Integrations',
-  //   content: pluginsAndIntegration
-  // }
 ];
 
 const MINUTE = 60 * 1000;

packages/docs/utils/examples.ts

@@ -2,6 +2,14 @@
 import dedent from 'dedent';
 import { EXAMPLES_ABELL_VERSION } from '../config';
 
+export type EditorConfigObjType = {
+  files: Record<string, { file: { contents: string } }>;
+  activeFile?: string;
+  minHeight?: string;
+  showFileExplorer?: boolean;
+  output: Record<string, { screen: string }>;
+};
+
 export const noConfigSetup = {
   files: {
     'index.abell': {
@@ -521,6 +529,129 @@ export const routingExample = {
   }
 };
 
+export const markdownIntegration = {
+  files: {
+    'index.abell': {
+      file: {
+        contents: `
+        {{
+          import content, { attributes } from './content.md';
+        }}
+        <html>
+        <head>
+          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/github.min.css" />
+        </head>
+        <body>
+          <h1>{{ attributes.title }}</h1>
+          <div>
+            {{ content }}
+          </div>
+        </body>
+        </html>
+        `
+      }
+    },
+    'content.md': {
+      file: {
+        contents: dedent`
+        ---
+        title: "Hi from Markdown!"
+        ---
+
+        You can use any **markdown** features here!
+        
+        ## Syntax Highlighting
+
+        \`vite-plugin-md-to-html\` also allows build-time syntax highlighting using highlightjs.
+        
+        ~~~js
+        const a = 3;
+        const b = 9;
+
+        console.log(a + b);
+        ~~~
+        `
+      }
+    },
+    'vite.config.ts': {
+      file: {
+        contents: `
+        import { defineConfig } from 'abell';
+        import { vitePluginMdToHTML } from 'vite-plugin-md-to-html';
+
+        export default defineConfig({
+          plugins: [
+            vitePluginMdToHTML({
+              syntaxHighlighting: true
+            })
+          ],
+        });
+        `
+      }
+    },
+    'package.json': {
+      file: {
+        contents: JSON.stringify(
+          {
+            name: 'vite-abell',
+            type: 'module',
+            scripts: {
+              start: 'abell dev --port 3000',
+              build: 'abell generate'
+            },
+            dependencies: {
+              abell: EXAMPLES_ABELL_VERSION,
+              'vite-plugin-md-to-html': '*'
+            }
+          },
+          null,
+          4
+        )
+      }
+    }
+  },
+  activeFile: 'index.abell',
+  minHeight: '520px',
+  showURLBar: true,
+  output: {
+    '/': {
+      screen: `
+      <style>
+      #unstyled code {
+        padding: 0px;
+      }
+      #unstyled pre > code, #unstyled pre {
+        line-height: unset;
+        font-size: unset;
+      }
+      #unstyled pre > code {
+        padding: 1rem !important;
+        font-size: 13px;
+      }
+
+      #unstyled p {
+        font-size: unset;
+        line-height: unset;
+      }
+      </style>
+      <div id="unstyled">
+        <h1>Hi from Markdown!</h1>
+        <div>
+          <p>You can use any <strong>markdown</strong> features here!</p>
+          <h2>Syntax Highlighting</h2>
+          <p><code>vite-plugin-md-to-html</code> also allows build-time syntax highlighting using highlightjs.</p>
+<pre><code class="hljs language-js"><span class="hljs-keyword">const</span> a = <span class="hljs-number">3</span>;
+<span class="hljs-keyword">const</span> b = <span class="hljs-number">9</span>;
+
+<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(a + b);
+          </code></pre>
+        </div>
+      </div>
+      `
+    }
+  }
+};
+
 export const blogRoutingExample = {
   files: {
     'entry.build.ts': {