@foblex/m-render 2.6.4 → 2.6.5

package/LICENSE

@@ -19,3 +19,6 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+Parts of the design and layout of this project were inspired by VitePress (MIT License).
+Copyright (c) 2019-present, Yuxi (Evan) You

package/README.md

@@ -1,33 +1,178 @@
-## Welcome to MRender
+# MRender: Markdown Renderer for Angular
 
-**MRender** is a versatile library designed for creating modern web applications in SPA or SSR formats. It goes beyond just rendering Markdown files by extending their functionality with support for Angular components and code snippets. The library includes built-in themes, making it an excellent choice for building documentation and other content-centric projects. With MRender, you can easily generate both static HTML and interactive web applications, providing flexibility and convenience for developers.
+**MRender** is an Angular library for rendering Markdown-based documentation with SSR support, built-in Angular components, customizable UI, and extended syntax.
 
-### Examples
+---
 
-Explore practical use cases to see **MRender** in action:
+## 🚀 Features
 
-- [Foblex Flow Documentation](https://github.com/Foblex/f-flow) - A comprehensive example of using MRender to create a documentation website.
+* Render `.md` files in Angular apps
+* Extended syntax: `ng-component`, `code-group`, `preview-group`, alert blocks (`tip`, `info`, `danger`, etc.)
+* Fully SSR-compatible
+* Embed Angular components inside markdown
+* Provider-based configuration for homepage and documentation
+* Lazy loading of examples
+* Built-in Table of Contents, SEO and meta support
 
-### Features
+---
 
-1. **Markdown Rendering:** Effortlessly render Markdown files into dynamic web content.
-2. **Custom Syntax Extensions:** Use enhanced Markdown syntax for advanced features and interactivity.
-3. **Angular Component Integration:** Extend Markdown with embedded Angular components and code examples.
-4. **SPA and SSR Support:** Generate applications in both Single Page Application (SPA) and Server-Side Rendering (SSR) formats.
-5. **Built-in Themes:** Choose from pre-designed themes for consistent and appealing documentation.
+## 📦 Installation
 
-### Getting Started and Documentation
+```bash
+npm install @foblex/m-render
+```
 
-For a comprehensive guide on how to install, configure, and use MRender in your Angular project, visit our [Documentation](https://m-render.foblex.com/docs/get-started).
+---
 
-### Installation
+## 🧩 Usage
 
-To add **MRender** to your project, use the following npm command:
+### Homepage Configuration
 
-```bash
-npm install @foblex/m-render
+```ts
+import {
+  provideBackground, provideComponents,
+  provideHero, provideHomeButtons, provideHomeFeatures,
+  provideHomeFooter, provideImage, provideLogo, provideTitle
+} from '@foblex/m-render';
+
+export const HOME_CONFIGURATION = {
+  providers: [
+    provideLogo('./logo.svg'),
+    provideTitle('Foblex Flow'),
+    provideHero({
+      headline: 'Foblex Flow',
+      tagline1: 'Built with Angular',
+      tagline2: 'Flow-Chart Library',
+      subDescription: 'Supports Angular 12+, SSR, and Composition API.',
+    }),
+    provideBackground(HomePageBackgroundComponent),
+    provideImage(HomePageImageComponent),
+    provideHomeButtons([...]),
+    provideHomeFeatures([...]),
+    provideHomeFooter({ text: 'MIT License | Copyright © 2022 - Present' }),
+  ],
+};
+```
+
+### Documentation Configuration
+
+```ts
+import {
+  provideDirectory, provideNavigation, provideComponents,
+  provideTocData, provideHeader, provideFooterNavigation,
+  provideDocumentationMeta
+} from '@foblex/m-render';
+
+export const DOCUMENTATION_CONFIGURATION = {
+  providers: [
+    provideDirectory('./markdown/guides/'),
+    provideNavigation(...),
+    provideComponents([...]),
+    provideTocData({ title: 'In this article', range: { start: 2, end: 6 } }),
+    provideHeader(...),
+    provideFooterNavigation(...),
+    provideDocumentationMeta({ ... }),
+  ],
+};
+```
+
+### Route Setup
+
+```ts
+import { provideDocumentation, provideHomePage } from '@foblex/m-render';
+
+export const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('@foblex/m-render').then((m) =>
+      m.HOME_ROUTES.map((route) => ({
+        ...route,
+        providers: [provideHomePage(HOME_CONFIGURATION)],
+      }))
+    ),
+  },
+  {
+    path: 'docs',
+    loadChildren: () => import('@foblex/m-render').then((m) =>
+      m.DOCUMENTATION_ROUTES.map((route) => ({
+        ...route,
+        providers: [provideDocumentation(DOCUMENTATION_CONFIGURATION)],
+      }))
+    ),
+  },
+];
+```
+
+---
+
+## ✨ Markdown Extensions
+
+### `ng-component`
+
+Render Angular components with optional height and linked source code:
+
+```markdown
+::: ng-component <component-selector></component-selector> [height]="YOUR EXAMPLE HEIGHT"
+[component.ts] <<< /assets/component.ts
+[component.html] <<< /assets/component.html
+:::
+```
+
+### `code-group`
+
+Group multiple code snippets into tabs:
+
+````markdown
+::: code-group
+```ts [Component]
+console.log('Component code');
 ```
 
-### License
+```html [Template]
+<div>Hello</div>
+```
+:::
+````
+
+### `preview-group`
+
+Display preview groups with filters:
+
+```markdown
+::: preview-group
+[Nodes]
+[Connectors]
+[Connections]
+:::
+```
+
+### Alerts
+
+Use `tip`, `danger`, `info`, etc.:
+
+```markdown
+::: tip Title
+This is a tip block
+:::
+```
+
+---
+
+## 🧑‍💻 Contributing
+
+Open for contributions, feedback and PRs.
+
+GitHub: [https://github.com/Foblex/m-render](https://github.com/Foblex/m-render)
+
+---
+
+## 🧾 License
+
+[MIT](./LICENSE)
+
+---
+
+## Inspiration
 
-This library is available for use under the [MIT License](./LICENSE).
+The design and layout of MRender were heavily inspired by [VitePress](https://vitepress.dev), an open-source static site generator for Vue by Evan You.  
+MRender is a complete reimplementation in Angular, but its UI and structure intentionally follow VitePress for familiarity and clarity.

package/assets/styles/_code-group.scss

@@ -1,4 +1,8 @@
 .m-render {
+  h1 + f-code-group, h2 + f-code-group, h3 + f-code-group, h4 + f-code-group, h5 + f-code-group, h6 + f-code-group {
+    margin-top: 12px;
+  }
+
   .f-code-group {
     display: block;
     border-radius: var(--code-group-border-radius);

package/assets/styles/_code-highlight.scss

@@ -136,3 +136,7 @@
     font-style: italic;
   }
 }
+
+.inline-focus {
+  display: inline;
+}

package/assets/styles/_table.scss

@@ -0,0 +1,51 @@
+.m-render {
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 14px;
+    line-height: 1.6;
+    margin: 16px 0;
+
+    thead {
+      background-color: var(--alt-background);
+      color: var(--primary-text);
+    }
+
+    th,
+    td {
+      padding: 12px 16px;
+      text-align: left;
+      border-bottom: 1px solid var(--divider-color);
+      color: var(--primary-text);
+    }
+
+    th {
+      font-weight: 600;
+    }
+
+    tr {
+      background-color: var(--background-color);
+
+      &:hover {
+        background-color: var(--soft-background);
+      }
+    }
+
+    code {
+      font-family: var(--font-family-mono);
+      font-size: 0.875em;
+      background-color: var(--not-pre-code-background);
+      color: var(--not-pre-code-color);
+      padding: 0.2em 0.4em;
+      border-radius: var(--border-radius);
+    }
+  }
+
+  table:not([class]) {
+    display: table;
+    width: 100%;
+    overflow-x: auto;
+    max-width: 100%;
+  }
+}

package/assets/styles/styles.scss

@@ -9,6 +9,7 @@
 @import "./_code-view";
 @import "./_code-highlight";
 @import './_doc-text';
+@import "./_table";
 
 html {
   height: 100%;