@foblex/m-render 2.5.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Siarhei Huzarevich
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+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.

package/README.md

@@ -0,0 +1,33 @@
+## Welcome to MRender
+
+**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.
+
+### Examples
+
+Explore practical use cases to see **MRender** in action:
+
+- [Foblex Flow Documentation](https://github.com/Foblex/f-flow) - A comprehensive example of using MRender to create a documentation website.
+
+### 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.
+
+### Getting Started and Documentation
+
+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
+
+To add **MRender** to your project, use the following npm command:
+
+```bash
+npm install @foblex/m-render
+```
+
+### License
+
+This library is available for use under the [MIT License](./LICENSE).

package/assets/styles/_alert.scss

@@ -0,0 +1,50 @@
+.m-render {
+
+  .f-alert {
+    margin: 16px 0;
+    border-radius: var(--f-alert-border-radius);
+    padding: 16px 16px 8px;
+    line-height: 24px;
+    font-size: 14px;
+    border: none;
+
+    .f-alert-title {
+      margin: 0;
+      line-height: inherit;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    p {
+      &:last-child {
+        margin: 8px 0 !important;
+        line-height: inherit;
+      }
+    }
+
+    &.tip {
+      color: var(--f-alert-tip-color);
+      background-color: var(--f-alert-tip-background);
+    }
+
+    &.info {
+      color: var(--f-alert-info-color);
+      background-color: var(--f-alert-info-background);
+    }
+
+    &.warning {
+      color: var(--f-alert-warning-color);
+      background-color: var(--f-alert-warning-background);
+    }
+
+    &.danger {
+      color: var(--f-alert-danger-color);
+      background-color: var(--f-alert-danger-background);
+    }
+
+    &.success {
+      color: var(--f-alert-success-color);
+      background-color: var(--f-alert-success-background);
+    }
+  }
+}

package/assets/styles/_badge.scss

@@ -0,0 +1,63 @@
+.f-badge {
+  display: inline-block;
+  border: 1px solid transparent;
+  border-radius: var(--border-radius);
+  padding: 0 10px;
+  line-height: 22px;
+  font-size: 12px;
+  font-weight: 500;
+
+  &.tip {
+    color: var(--f-badge-tip-color);
+    background-color: var(--f-badge-tip-background);
+  }
+
+  &.info {
+    color: var(--f-badge-info-color);
+    background-color: var(--f-badge-info-background);
+  }
+
+  &.warning {
+    color: var(--f-badge-warning-color);
+    background-color: var(--f-badge-warning-background);
+  }
+
+  &.danger {
+    color: var(--f-badge-danger-color);
+    background-color: var(--f-badge-danger-background);
+  }
+
+  &.success {
+    color: var(--f-badge-success-color);
+    background-color: var(--f-badge-success-background);
+  }
+}
+
+f-navigation-panel {
+  .f-badge {
+    padding: 0 6px;
+    line-height: 14px;
+  }
+}
+
+.m-render h1 > .f-badge {
+  margin-top: 4px;
+  vertical-align: top;
+}
+
+.m-render h2 > .f-badge {
+  margin-top: 3px;
+  padding: 0 8px;
+  vertical-align: top;
+}
+
+.m-render h3 > .f-badge {
+  vertical-align: middle;
+}
+
+.m-render h4 > .f-badge,
+.m-render h5 > .f-badge,
+.m-render h6 > .f-badge {
+  vertical-align: middle;
+  line-height: 18px;
+}

package/assets/styles/_button.scss

@@ -0,0 +1,42 @@
+.f-button {
+  display: inline-block;
+  text-align: center;
+  font-weight: 600;
+  white-space: nowrap;
+  transition: color .25s, background-color .25s;
+
+  border-radius: 4px;
+  padding: 0 20px;
+  line-height: 38px;
+  font-size: 14px;
+
+  color: var(--button-default-text);
+  background-color: var(--button-default-bg);
+  cursor: pointer;
+  pointer-events: all;
+
+  &:hover {
+    color: var(--button-default-hover-text);
+    background-color: var(--button-default-hover-bg);
+  }
+
+  &:active {
+    color: var(--button-default-active-text);
+    background-color: var(--button-default-active-bg);
+  }
+
+  &.primary {
+    color: var(--button-primary-text);
+    background-color: var(--button-primary-bg);
+
+    &:hover {
+      color: var(--button-primary-hover-text);
+      background-color: var(--button-primary-hover-bg);
+    }
+
+    &:active {
+      color: var(--button-primary-active-text);
+      background-color: var(--button-primary-active-bg);
+    }
+  }
+}

package/assets/styles/_code-group.scss

@@ -0,0 +1,45 @@
+.m-render {
+  .f-code-group {
+    display: block;
+    border-radius: var(--code-group-border-radius);
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+
+    .f-code-group-tabs {
+      position: relative;
+      display: flex;
+      padding: 0 12px;
+      background-color: var(--code-group-tabs-background);
+      border-bottom: 1px solid var(--code-group-tabs-border-color);
+      overflow-x: auto;
+
+      button {
+        border: 2px solid transparent;
+        border-left: none;
+        border-right: none;
+        outline: none;
+        background: none;
+        padding: 0 12px;
+        line-height: 48px;
+        font-size: var(--code-group-tab-button-font-size);
+        font-weight: 500;
+        color: var(--code-group-tab-button-text-color);
+        cursor: pointer;
+
+        &.active {
+          color: var(--code-group-tab-button-active-text-color);
+          border-bottom-color: var(--code-group-tab-button-active-border-color);
+        }
+      }
+    }
+
+    .f-code-group-body {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      height: calc(100% - 52px);
+      overflow: auto;
+    }
+  }
+}

package/assets/styles/_code-highlight.scss

@@ -0,0 +1,96 @@
+:root {
+  .m-render {
+    --punctuation: #24292E;
+    --attr-name: #D73A49;
+    --property: #032F62;
+    --keyword: #28a745;
+    --attr-value: #1b7c83;
+  }
+}
+
+.dark {
+  .m-render {
+    --punctuation: #E1E4E8;
+    --attr-name: #F97583;
+    --property: #9ECBFF;
+    --keyword: #34d058;
+    --attr-value: #39c5cf;
+  }
+}
+
+.m-render {
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata,
+  .token.attr-name {
+    color: var(--attr-name);
+  }
+
+  .token.attr-name {
+    color: var(--attr-value);
+  }
+
+  .token.namespace {
+    opacity: .7;
+  }
+
+  .token.property,
+  .token.constant,
+  .token.symbol,
+  .token.deleted,
+  .token.keyword,
+  .token.tag, {
+    color: var(--property);
+  }
+
+  .token.boolean,
+  .token.number,
+  .token.string,
+  .token.char,
+  .token.regex,
+  .token.important,
+  .token.variable,
+  .token.operator {
+    color: var(--keyword);
+  }
+
+  .token.selector,
+  .token.builtin,
+  .token.inserted,
+  .token.function,
+  .token.class-name,
+  .token.punctuation {
+    color: var(--property);
+  }
+
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string,
+  .token.punctuation,
+  .language-bash {
+    color: var(--punctuation);
+  }
+
+  .token.atrule {
+    color: var(--attr-value);
+  }
+
+  .token.attr-value {
+    color: var(--keyword);
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+}

package/assets/styles/_code-view.scss

@@ -0,0 +1,91 @@
+.m-render {
+
+  pre, code {
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    tab-size: 4;
+    hyphens: none;
+  }
+
+  pre {
+    position: relative;
+    margin: 0;
+    overflow: auto;
+    max-height: 600px;
+
+    code {
+      display: block;
+      padding: 16px 24px;
+      width: fit-content;
+      min-width: 100%;
+      line-height: var(--code-view-line-height);
+      font-size: var(--code-view-font-size);
+      color: var(--code-view-text-color);
+    }
+  }
+
+  .f-code-view, .f-async-code-view, .f-example-view {
+    position: relative;
+    background-color: var(--code-view-background);
+    border-radius: var(--code-view-border-radius);
+    overflow-x: auto;
+    width: 100%;
+
+    .f-copy-button {
+      position: absolute;
+      top: 8px;
+      right: 20px;
+      border: 1px solid var(--code-view-copy-button-border-color);
+      border-radius: 4px;
+      width: 32px;
+      height: 32px;
+      z-index: 3;
+      background-color: var(--code-view-copy-button-background);
+      opacity: 0;
+      cursor: pointer;
+      background-image: var(--copy-icon);
+      background-position: 50%;
+      background-size: 14px;
+      background-repeat: no-repeat;
+      transition: background-color 0.25s, opacity 0.25s;
+
+      &:hover {
+        background-color: var(--code-view-copy-button-hover-background);
+      }
+    }
+
+    .f-code-language {
+      position: absolute;
+      top: 2px;
+      right: 20px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--code-view-lang-color);
+      transition: opacity 0.4s;
+    }
+
+    &:hover {
+      .f-copy-button {
+        opacity: 1;
+
+        &:active {
+          opacity: 0.1;
+        }
+      }
+
+      .f-code-language {
+        opacity: 0;
+      }
+    }
+  }
+
+  .f-example-view {
+    width: 100%;
+    height: 300px;
+    overflow: hidden;
+  }
+}

package/assets/styles/_doc-text.scss

@@ -0,0 +1,124 @@
+.m-render {
+
+  h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+    position: relative;
+    font-weight: 600;
+    outline: none;
+  }
+
+  h1 {
+    letter-spacing: -0.02em;
+    line-height: 40px;
+    font-size: 28px;
+  }
+
+  h2 {
+    margin: 48px 0 16px;
+    border-top: 1px solid var(--divider-color);
+    padding-top: 24px;
+    letter-spacing: -0.02em;
+    line-height: 32px;
+    font-size: 24px;
+  }
+
+  h3 {
+    margin: 32px 0 0;
+    letter-spacing: -0.01em;
+    line-height: 28px;
+    font-size: 20px;
+  }
+
+  h4 {
+    margin: 24px 0 0;
+    letter-spacing: -0.01em;
+    line-height: 24px;
+    font-size: 18px;
+  }
+
+  @media (min-width: 768px) {
+    h1 {
+      letter-spacing: -0.02em;
+      line-height: 40px;
+      font-size: 32px;
+    }
+  }
+
+  p, summary {
+    &:not(:first-child) {
+      margin: 16px 0;
+    }
+  }
+
+  p {
+    line-height: 28px;
+  }
+
+  blockquote {
+    margin: 16px 0;
+    border-left: 2px solid var(--divider-color);
+    padding-left: 16px;
+    color: var(--secondary-text);
+  }
+
+  blockquote > p {
+    margin: 0;
+    font-size: 16px;
+  }
+
+  a {
+    font-weight: 500;
+    color: var(--primary-1);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+
+    &:hover {
+      color: var(--primary-2);
+    }
+  }
+
+  strong {
+    font-weight: 600;
+  }
+
+  ul, ol {
+    padding-left: 1.25rem;
+    margin: 16px 0;
+  }
+
+  ul {
+    list-style: disc;
+  }
+
+  ol {
+    list-style: decimal;
+  }
+
+  li + li {
+    margin-top: 8px;
+  }
+
+  li > ol, li > ul {
+    margin: 8px 0 0;
+  }
+
+  hr {
+    margin: 16px 0;
+    border: none;
+    border-top: 1px solid var(--divider-color);
+  }
+
+  :not(pre) > code {
+    font-size: var(--not-pre-code-font-size);
+    color: var(--not-pre-code-color);
+    border-radius: var(--border-radius);
+    padding: 3px 6px;
+    background-color: var(--not-pre-code-background);
+
+    word-wrap: break-word;
+    word-break: break-word;
+    white-space: pre-wrap;
+  }
+}
+
+

package/assets/styles/_fonts.scss

@@ -0,0 +1,41 @@
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-roman-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
+  U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-roman-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+  U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+  U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-italic-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
+  U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-italic-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+  U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+  U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}