@md-plugins/quasar-app-extension-q-press 0.1.0-alpha.10

package/src/templates/init/src/markdown/md-plugins/link/overview.md

@@ -0,0 +1,126 @@
+---
+title: Link Plugin
+desc: Link plugin for Markdown.
+---
+
+Welcome to the Link Plugin documentation! This guide will provide you with an overview of the Link plugin and its features.
+
+## What is the Link Plugin?
+
+The Link Plugin is a powerful tool that enhances the standard link functionality in Markdown. It allows you to customize the rendering of links, making it easier to manage internal links and add necessary import statements for custom link components.
+
+## Key Features
+
+- **Custom Link Tag**: Use a custom tag for internal links.
+- **Custom Link Keyword**: Customize the keyword used for the link destination.
+- **Automatic Import Statements**: Automatically add import statements for custom link components.
+
+## Examples
+
+Here are some examples of what you can achieve with the Link Plugin:
+
+### Standard Link
+
+```markup
+[Link Text](https://example.com)
+```
+
+### Custom Link Tag and Keyword
+
+You can customize the link tag and keyword:
+
+```javascript
+import MarkdownIt from 'markdown-it'
+import { linkPlugin } from '@md-plugins/md-plugin-link'
+
+const md = new MarkdownIt()
+
+md.use(linkPlugin, {
+  linkTag: 'CustomLink', // Optional: Customize the link tag
+  linkToKeyword: 'href', // Optional: Customize the link keyword
+  pageScript: 'import CustomLink from "src/components/CustomLink.vue"', // Optional: Add import statement
+})
+
+// Now you can use the Link plugin in your Markdown content
+const result = md.render('[Link Text](https://example.com)')
+console.log(result)
+```
+
+## Name
+
+The official NPM name is `@md-plugins/md-plugin-link`.
+
+## Installation
+
+You can install the Link plugin using npm, yarn, or pnpm. Choose your preferred method below:
+
+```tabs
+<<| bash npm |>>
+npm install @md-plugins/md-plugin-link
+<<| bash yarn |>>
+yarn add @md-plugins/md-plugin-link
+<<| bash pnpm |>>
+pnpm add @md-plugins/md-plugin-link
+```
+
+## Configuration
+
+After installing the plugin, you need to configure it in your Markdown-It setup. Here's an example of how to do that:
+
+```javascript
+import MarkdownIt from 'markdown-it'
+import { linkPlugin } from '@md-plugins/md-plugin-link'
+
+const md = new MarkdownIt()
+
+md.use(linkPlugin, {
+  linkTag: 'CustomLink', // Optional: Customize the link tag
+  linkToKeyword: 'href', // Optional: Customize the link keyword
+  pageScript: 'import CustomLink from "src/components/CustomLink.vue"', // Optional: Add import statement
+})
+
+// Now you can use the Link plugin in your Markdown content
+const result = md.render('[Link Text](https://example.com)')
+console.log(result)
+```
+
+### Options
+
+The Link plugin accepts the following options:
+
+- **linkTag**: The tag for the internal link. Default is `'MarkdownLink'`.
+- **linkToKeyword**: The keyword for the internal link destination. Default is `'to'`.
+- **pageScript**: Add import statements to the page.
+
+## Advanced Configuration
+
+For more advanced configurations, you can combine the Link plugin with other Markdown-It plugins to enhance your Markdown content further. Here's an example:
+
+```javascript
+import MarkdownIt from 'markdown-it'
+import { linkPlugin } from '@md-plugins/md-plugin-link'
+import markdownItAnchor from 'markdown-it-anchor'
+import markdownItToc from 'markdown-it-toc-done-right'
+
+const md = new MarkdownIt()
+
+md.use(linkPlugin, {
+  linkTag: 'CustomLink', // Customize the link tag
+  linkToKeyword: 'href', // Customize the link keyword
+  pageScript: 'import CustomLink from "src/components/CustomLink.vue"', // Add import statement
+})
+  .use(markdownItAnchor)
+  .use(markdownItToc)
+
+// Now you can use the Link plugin along with other plugins in your Markdown content
+const result = md.render(
+  '[Link Text](https://example.com)\n\n# Table of Contents\n\n[[toc]]\n\n[Another Link](https://example.com)',
+)
+console.log(result)
+```
+
+## Support
+
+If you have any questions or need assistance, please refer to the FAQ or reach out to our support team.
+
+Happy coding!

package/src/templates/init/src/markdown/md-plugins/shared/overview.md

@@ -0,0 +1,175 @@
+---
+title: Shared Plugin Overview
+desc: Overview of the shared utilities and types for MD-Plugins plugins.
+---
+
+The `shared` plugin provides a set of utilities and types that are used across various MD-Plugins plugins. It serves as a common foundation, ensuring consistency and reducing duplication of code across the different plugins.
+
+## Key Features
+
+- **Common Utilities**: Provides utility functions that are commonly used across multiple plugins.
+- **Type Definitions**: Includes TypeScript type definitions to ensure type safety and consistency.
+- **Helper Functions**: Offers helper functions to simplify common tasks and operations.
+- **Reusable Components**: Contains reusable components that can be leveraged by other plugins.
+
+## Utilities
+
+The `shared` plugin includes a variety of utility functions that can be used to perform common tasks. Some of the key utilities include:
+
+- **String Manipulation**: Functions for manipulating and formatting strings.
+- **Array Operations**: Functions for performing common array operations.
+- **Object Handling**: Functions for handling and manipulating objects.
+- **Validation**: Functions for validating data and inputs.
+
+## Type Definitions
+
+The `shared` plugin provides TypeScript type definitions that are used across the MD-Plugins project. These type definitions help ensure type safety and consistency. Some of the key type definitions include:
+
+- **MarkdownItEnv**: Defines the structure of the environment object used by MD-Plugins plugins.
+- **PluginOptions**: Defines the structure of the options object passed to plugins.
+
+```ts
+import Token from 'markdown-it/lib/token.mjs'
+
+/**
+ * Escape html chars
+ */
+declare const htmlEscape: (str: string) => string
+
+/**
+ * Unescape html chars
+ */
+declare const htmlUnescape: (str: string) => string
+
+interface MarkdownItEnv {
+  plugins?: Record<string, unknown>
+}
+
+interface MarkdownItHeader {
+  /**
+   * The slug of the header
+   *
+   * Typically the `id` attr of the header anchor
+   */
+  id: string
+  /**
+   * The level of the header
+   *
+   * `1` to `6` for `<h1>` to `<h6>`
+   */
+  level: number
+  /**
+   * The title of the header
+   */
+  title: string
+  /**
+   * Link of the header
+   *
+   * Typically using `#${slug}` as the anchor hash
+   */
+  link: string
+  /**
+   * The children of the header
+   */
+  children: MarkdownItHeader[]
+}
+
+interface ResolveTitleOptions {
+  /**
+   * Should allow inline HTML tags or not.
+   *
+   * If the result is going to be used as Vue template, it should allow inline
+   * HTML tags so that Vue custom components would be kept.
+   */
+  shouldAllowHtml: boolean
+  /**
+   * Should escape the text content or not.
+   *
+   * If the result is going to be used in HTML directly, it should be escaped
+   * so that the text content won't be wrongly treated as HTML tags.
+   */
+  shouldEscapeText: boolean
+}
+
+/**
+ * Resolve header title from markdown-it token
+ *
+ * Typically using the next token of `heading_open` token
+ */
+declare const resolveTitleFromToken: (
+  token: Token,
+  { shouldAllowHtml, shouldEscapeText }: ResolveTitleOptions,
+) => string
+
+interface ResolveHeadersOptions extends ResolveTitleOptions {
+  /**
+   * Heading level that is going to be resolved; ie: `1` to `6`
+   */
+  level: number[]
+  /**
+   * Should allow headers inside nested blocks or not
+   *
+   * If set to `true`, headers inside blockquote, list, etc. would also be resolved.
+   */
+  shouldAllowNested: boolean
+  /**
+   * A custom slugification function
+   *
+   * Would be ignored if the `id` attr of the token is set.
+   */
+  slugify?: (str: string) => string
+  /**
+   * A function for formatting headings
+   */
+  format?: (str: string) => string | undefined
+}
+
+/**
+ * Resolve headers from markdown-it tokens
+ */
+declare const resolveHeadersFromTokens: (
+  tokens: Token[],
+  {
+    level,
+    shouldAllowHtml,
+    shouldAllowNested,
+    shouldEscapeText,
+    slugify,
+    format,
+  }?: Partial<ResolveHeadersOptions>,
+) => MarkdownItHeader[]
+
+/**
+ * Default slugification function
+ */
+declare const slugify: (str: string) => string
+
+export {
+  type MarkdownItEnv,
+  type MarkdownItHeader,
+  type ResolveHeadersOptions,
+  type ResolveTitleOptions,
+  htmlEscape,
+  htmlUnescape,
+  resolveHeadersFromTokens,
+  resolveTitleFromToken,
+  slugify,
+}
+```
+
+## Helper Functions
+
+The `shared` plugin includes a variety of helper functions that simplify common tasks and operations. Some of the key helper functions include:
+
+- **resolveTitleFromToken**: Extracts the title from a Markdown token.
+- **parseFrontmatter**: Parses frontmatter content from a Markdown file.
+- **generateSlug**: Generates a slug from a given string.
+- **htmlEscape**: Escapes HTML characters in a string.
+- **htmlUnescape**: Unescapes HTML characters in a string.
+- **slugify**: Slugifies a string using a custom function.
+
+## Conclusion
+
+The `shared` plugin is an essential part of the MD-Plugins project, providing common utilities, type definitions, helper functions, and reusable components. By leveraging the `shared` plugin, you can ensure consistency and reduce duplication of code across your plugins.
+
+Happy coding!

package/src/templates/init/src/markdown/md-plugins/table/advanced.md

@@ -0,0 +1,190 @@
+---
+title: Table Plugin Advanced Topics
+desc: Table plugin advanced topics for Markdown.
+---
+
+## Table Plugin
+
+The `table` plugin allows you to customize the rendering of tables in your Markdown content by adding custom classes and attributes. This section will cover how the plugin works, the available options for customization, and examples of how to use it effectively.
+
+### Type Information
+
+```ts
+import { PluginWithOptions } from 'markdown-it'
+
+interface TablePluginOptions {
+  /**
+   * The class for the table
+   *
+   * @default 'markdown-table'
+   */
+  tableClass?: string
+  /**
+   * The class for the table header
+   *
+   * @default 'text-left'
+   */
+  tableHeaderClass?: string
+  /**
+   * The class for the table row
+   *
+   * @default ''
+   */
+  tableRowClass?: string
+  /**
+   * The class for the table cell
+   *
+   * @default ''
+   */
+  tableCellClass?: string
+  /**
+   * The token for the table
+   *
+   * @default 'q-markup-table' (replaces 'table')
+   */
+  tableToken?: string
+  /**
+   * The attributes for the table
+   *
+   * @default [ [':wrap-cells', 'true'],[':flat', 'true'],[':bordered', 'true'] ]
+   */
+  tableAttributes?: [string, any][]
+}
+
+declare const tablePlugin: PluginWithOptions<TablePluginOptions>
+
+export { type TablePluginOptions, tablePlugin }
+```
+
+### How It Works
+
+The `table` plugin processes table tokens in your Markdown content, adding custom classes and attributes to them. This helps improve the styling and functionality of tables in your Markdown content.
+
+### Default Behavior
+
+By default, the `table` plugin adds the `markdown-table` class to all tables and applies additional classes and attributes as specified. Here is an example of a Markdown file with a table:
+
+| Header 1 | Header 2 |
+| -------- | -------- |
+| Cell 1   | Cell 2   |
+
+```markdown
+| Header 1 | Header 2 |
+| -------- | -------- |
+| Cell 1   | Cell 2   |
+```
+
+### Plugin Options
+
+The `table` plugin provides several options for customization. Here are the available options and their descriptions:
+
+#### tableClass
+
+- **Type**: `string`
+- **Default**: `'markdown-table'`
+- **Description**: The class to be added to all tables.
+
+#### tableHeaderClass
+
+- **Type**: `string`
+- **Default**: `'text-left'`
+- **Description**: The class to be added to table headers (`<th>` elements).
+
+#### tableRowClass
+
+- **Type**: `string`
+- **Default**: `''`
+- **Description**: The class to be added to table rows (`<tr>` elements).
+
+#### tableCellClass
+
+- **Type**: `string`
+- **Default**: `''`
+- **Description**: The class to be added to table cells (`<td>` elements).
+
+#### tableToken
+
+- **Type**: `string`
+- **Default**: `'q-markup-table'`
+- **Description**: The custom token to replace the default table tag.
+
+#### tableAttributes
+
+- **Type**: `Array<[string, string]>`
+- **Default**: `[]`
+- **Description**: Additional attributes to be added to the table.
+
+### Example Configuration
+
+Here is an example of how you can configure the `table` plugin with custom options:
+
+```typescript
+import MarkdownIt from 'markdown-it'
+import { tablePlugin } from '@md-plugins/md-plugin-table'
+
+const md = new MarkdownIt()
+
+md.use(tablePlugin, {
+  tableClass: 'custom-table-class',
+  tableHeaderClass: 'custom-header-class',
+  tableRowClass: 'custom-row-class',
+  tableCellClass: 'custom-cell-class',
+  tableToken: 'custom-table-token',
+  tableAttributes: [['data-custom', 'value']],
+})
+```
+
+### Customizing the CSS
+
+You can customize the appearance of tables by overriding the default CSS class. Here are some examples of how you can customize the tables:
+
+#### Default CSS
+
+By default, the `table` plugin applies the following CSS class to tables. You can add this class in your CSS to customize the appearance of tables.
+
+```scss
+.markdown-table {
+  width: fit-content;
+  max-width: 100%;
+}
+```
+
+#### Example 1: Customizing the Border
+
+```css
+.custom-table-class {
+  border: 1px solid #dfe2e5; /* Add a border to tables */
+}
+```
+
+#### Example 2: Adding a Background Color
+
+```css
+.custom-table-class {
+  background-color: #f0f0f0; /* Add a background color to tables */
+}
+```
+
+#### Example 3: Changing the Font Style
+
+```css
+.custom-table-class {
+  font-family: 'Courier New', Courier, monospace; /* Change the font style */
+}
+```
+
+### Handling the tableAttributes
+
+The `table` plugin allows you to add custom attributes to tables. Here is an example of how to add a custom data attribute to tables:
+
+```typescript
+md.use(tablePlugin, {
+  tableAttributes: [['data-custom', 'value']],
+})
+```
+
+### Conclusion
+
+The `table` plugin is a powerful tool for customizing the rendering of tables in your Markdown content. By customizing the classes, attributes, and CSS, you can tailor the appearance and functionality of tables to match the style of your project. Experiment with different configurations and find the one that works best for you.
+
+Happy coding!

package/src/templates/init/src/markdown/md-plugins/table/overview.md

@@ -0,0 +1,186 @@
+---
+title: Table Plugin
+desc: Table plugin for Markdown.
+---
+
+Welcome to the Table Plugin documentation! This guide will provide you with an overview of the Table plugin and its features.
+
+## What is the Table Plugin?
+
+The Table Plugin is a powerful tool that enhances the standard table functionality in Markdown. It allows you to customize the rendering of tables, making it easier to apply consistent styles and attributes to tables in your documentation.
+
+## Key Features
+
+- **Custom Table Class**: Apply a custom CSS class to tables.
+- **Custom Header Class**: Apply a custom CSS class to table headers.
+- **Custom Row and Cell Classes**: Apply custom CSS classes to table rows and cells.
+- **Custom Table Token**: Replace the default table tag with a custom token.
+- **Custom Table Attributes**: Add custom attributes to tables.
+
+## Examples
+
+Here are some examples of what you can achieve with the Table Plugin:
+
+### Standard Table
+
+| Header 1 | Header 2 | Header 3 |
+| -------- | -------- | -------- |
+| Cell 1   | Cell 2   | Cell 3   |
+
+```markup
+| Header 1 | Header 2 | Header 3 |
+| -------- | -------- | -------- |
+| Cell 1   | Cell 2   | Cell 3   |
+```
+
+### Right-aligned Columns
+
+| Header 1 | Header 2 | Header 3 |
+| -------: | -------: | -------: |
+|   Cell 1 |   Cell 2 |   Cell 3 |
+
+```markup
+| Header 1 | Header 2 | Header 3 |
+| -------: | -------: | -------: |
+|   Cell 1 |   Cell 2 |   Cell 3 |
+```
+
+### Cenetered-aligned Columns
+
+| Header 1 | Header 2 | Header 3 |
+| :------: | :------: | :------: |
+|  Cell 1  |  Cell 2  |  Cell 3  |
+
+```markup
+| Header 1 | Header 2 | Header 3 |
+| :------: | :------: | :------: |
+|  Cell 1  |  Cell 2  |  Cell 3  |
+```
+
+### Left-aligned Columns (default)
+
+| Header 1 | Header 2 | Header 3 |
+| :------- | :------- | :------- |
+| Cell 1   | Cell 2   | Cell 3   |
+
+```markup
+| Header 1 | Header 2 | Header 3 |
+| :------- | :------- | :------- |
+| Cell 1   | Cell 2   | Cell 3   |
+```
+
+### Custom Table Class and Attributes
+
+You can customize the table class and attributes:
+
+```javascript
+import MarkdownIt from 'markdown-it'
+import { tablePlugin } from '@md-plugins/md-plugin-table'
+
+const md = new MarkdownIt()
+
+md.use(tablePlugin, {
+  tableClass: 'custom-table-class', // Optional: Customize the table class
+  tableHeaderClass: 'custom-header-class', // Optional: Customize the table header class
+  tableRowClass: 'custom-row-class', // Optional: Customize the table row class
+  tableCellClass: 'custom-cell-class', // Optional: Customize the table cell class
+  tableToken: 'custom-table-token', // Optional: Customize the table token
+  tableAttributes: [['data-custom-attr', 'value']], // Optional: Add custom attributes
+})
+
+// Now you can use the Table plugin in your Markdown content
+const result = md.render(
+  '| Header 1 | Header 2 |\n| -------- | -------- |\n| Cell 1   | Cell 2   |',
+)
+console.log(result)
+```
+
+## Name
+
+The official NPM name is `@md-plugins/md-plugin-table`.
+
+## Installation
+
+You can install the Table plugin using npm, yarn, or pnpm. Choose your preferred method below:
+
+```tabs
+<<| bash npm |>>
+npm install @md-plugins/md-plugin-table
+<<| bash yarn |>>
+yarn add @md-plugins/md-plugin-table
+<<| bash pnpm |>>
+pnpm add @md-plugins/md-plugin-table
+```
+
+## Configuration
+
+After installing the plugin, you need to configure it in your Markdown-It setup. Here's an example of how to do that:
+
+```javascript
+import MarkdownIt from 'markdown-it'
+import { tablePlugin } from '@md-plugins/md-plugin-table'
+
+const md = new MarkdownIt()
+
+md.use(tablePlugin, {
+  tableClass: 'custom-table-class', // Optional: Customize the table class
+  tableHeaderClass: 'custom-header-class', // Optional: Customize the table header class
+  tableRowClass: 'custom-row-class', // Optional: Customize the table row class
+  tableCellClass: 'custom-cell-class', // Optional: Customize the table cell class
+  tableToken: 'custom-table-token', // Optional: Customize the table token
+  tableAttributes: [['data-custom-attr', 'value']], // Optional: Add custom attributes
+})
+
+// Now you can use the Table plugin in your Markdown content
+const result = md.render(
+  '| Header 1 | Header 2 |\n| -------- | -------- |\n| Cell 1   | Cell 2   |',
+)
+console.log(result)
+```
+
+### Options
+
+The Table plugin accepts the following options:
+
+- **tableClass**: The class for the table. Default is `'markdown-table'`.
+- **tableHeaderClass**: The class for the table header. Default is `'text-left'`.
+- **tableRowClass**: The class for the table row. Default is `''`.
+- **tableCellClass**: The class for the table cell. Default is `''`.
+- **tableToken**: The token for the table. Default is `'q-markup-table'`.
+- **tableAttributes**: The attributes for the table. Default is `[ [':wrap-cells', 'true'],[':flat', 'true'],[':bordered', 'true'] ]`.
+
+## Advanced Configuration
+
+For more advanced configurations, you can combine the Table plugin with other Markdown-It plugins to enhance your Markdown content further. Here's an example:
+
+```javascript
+import MarkdownIt from 'markdown-it'
+import { tablePlugin } from '@md-plugins/md-plugin-table'
+import markdownItAnchor from 'markdown-it-anchor'
+import markdownItToc from 'markdown-it-toc-done-right'
+
+const md = new MarkdownIt()
+
+md.use(tablePlugin, {
+  tableClass: 'custom-table-class', // Customize the table class
+  tableHeaderClass: 'custom-header-class', // Customize the table header class
+  tableRowClass: 'custom-row-class', // Customize the table row class
+  tableCellClass: 'custom-cell-class', // Customize the table cell class
+  tableToken: 'custom-table-token', // Customize the table token
+  tableAttributes: [['data-custom-attr', 'value']], // Add custom attributes
+})
+  .use(markdownItAnchor)
+  .use(markdownItToc)
+
+// Now you can use the Table plugin along with other plugins in your Markdown content
+const result = md.render(
+  '| Header 1 | Header 2 |\n| -------- | -------- |\n| Cell 1   | Cell 2   |\n\n# Table of Contents\n\n[[toc]]\n\n| Header 3 | Header 4 |\n| -------- | -------- |\n| Cell 3   | Cell 4   |',
+)
+console.log(result)
+```
+
+## Support
+
+If you have any questions or need assistance, please refer to the FAQ or reach out to our support team.
+
+Happy coding!