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

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

@@ -0,0 +1,124 @@
+---
+title: Image Plugin
+desc: Image plugin for Markdown.
+---
+
+Welcome to the Image Plugin documentation! This guide will provide you with an overview of the Image plugin and its features.
+
+## What is the Image Plugin?
+
+The Image Plugin is a simple yet powerful tool that enhances the standard image functionality in Markdown. It allows you to apply custom CSS classes to images as well as provide a width and a height, making it easier to style and manage images in your documentation.
+
+## Key Features
+
+- **Custom CSS Class**: Apply a custom CSS class to images for consistent styling.
+- **Automatic Alt Text**: Automatically set the `alt` attribute for images based on their content.
+- **Width and Height**: Specify the width and height of images for responsive design.
+
+## Examples
+
+Here are some examples of what you can achieve with the Image Plugin:
+
+### Standard Image
+
+```markup
+![Alt text](image.jpg)
+```
+
+### External Image with Width/Height
+
+![MD-Plugins width="200" height="200"](https://raw.githubusercontent.com/md-plugins/md-plugins/refs/heads/main/media/markdown-1024x1024.png)
+
+```markup
+![MD-Plugins width="200" height="200"](https://raw.githubusercontent.com/md-plugins/md-plugins/refs/heads/main/media/markdown-1024x1024.png)
+```
+
+### Image with Custom Class
+
+You can apply a custom CSS class to images:
+
+```javascript
+import MarkdownIt from 'markdown-it'
+import { imagePlugin } from '@md-plugins/md-plugin-image'
+
+const md = new MarkdownIt()
+
+md.use(imagePlugin, {
+  imageClass: 'custom-image-class', // Optional: Customize the CSS class for images
+})
+
+// Now you can use the Image plugin in your Markdown content
+const result = md.render('![Alt text](image.jpg)')
+console.log(result)
+```
+
+## Name
+
+The official NPM name is `@md-plugins/md-plugin-image`.
+
+## Installation
+
+You can install the Image plugin using npm, yarn, or pnpm. Choose your preferred method below:
+
+```tabs
+<<| bash npm |>>
+npm install @md-plugins/md-plugin-image
+<<| bash yarn |>>
+yarn add @md-plugins/md-plugin-image
+<<| bash pnpm |>>
+pnpm add @md-plugins/md-plugin-image
+```
+
+## 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 { imagePlugin } from '@md-plugins/md-plugin-image'
+
+const md = new MarkdownIt()
+
+md.use(imagePlugin, {
+  imageClass: 'custom-image-class', // Optional: Customize the CSS class for images
+})
+
+// Now you can use the Image plugin in your Markdown content
+const result = md.render('![Alt text](image.jpg)')
+console.log(result)
+```
+
+### Options
+
+The Image plugin accepts the following options:
+
+- **imageClass**: The CSS class to apply to images. Default is `markdown-image`.
+
+## Advanced Configuration
+
+For more advanced configurations, you can combine the Image plugin with other Markdown-It plugins to enhance your Markdown content further. Here's an example:
+
+```javascript
+import MarkdownIt from 'markdown-it'
+import { imagePlugin } from '@md-plugins/md-plugin-image'
+import markdownItAnchor from 'markdown-it-anchor'
+import markdownItToc from 'markdown-it-toc-done-right'
+
+const md = new MarkdownIt()
+
+md.use(imagePlugin, {
+  imageClass: 'custom-image-class', // Customize the CSS class for images
+})
+  .use(markdownItAnchor)
+  .use(markdownItToc)
+
+// Now you can use the Image plugin along with other plugins in your Markdown content
+const result = md.render('# Table of Contents\n\n[[toc]]\n\n![Alt text](image.jpg)')
+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/imports/advanced.md

@@ -0,0 +1,105 @@
+---
+title: Imports Plugin Advanced Topics
+desc: Imports plugin advanced topics for Markdown.
+---
+
+## Imports Plugin
+
+The `imports` plugin allows you to extract and store script imports from your Markdown content. 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 { PluginSimple } from 'markdown-it'
+
+/**
+ * A Markdown-It plugin that extracts and stores script imports from the Markdown content.
+ *
+ * This plugin replaces script import blocks (delimited by `<script import>` and `</script>`) with an empty string,
+ * and adds the extracted script content to the `env.pageScripts` set in the Markdown-It environment.
+ *
+ * @param md - The Markdown-It instance to extend.
+ */
+declare const importsPlugin: PluginSimple
+
+declare module '@md-plugins/shared' {
+  interface MarkdownItEnv {
+    /**
+     * An array of page script (import statements) to be included.
+     */
+    pageScripts?: Set<string>
+  }
+}
+
+export { importsPlugin }
+```
+
+### How It Works
+
+The `imports` plugin processes script import blocks in your Markdown content, extracting the script content and storing it in the `env.pageScripts` set. This allows you to manage and use script imports in your Markdown content.
+
+### Default Behavior
+
+::: tip
+Here we are adding a space after the first `<` to avoid parsing our examples. In your own code, be sure to remove that space when the functionality is required.
+:::
+
+By default, the `imports` plugin replaces script import blocks (delimited by `<script script import>` and `</script>`) with an empty string and adds the extracted script content to the `env.pageScripts` set. Here is an example of a Markdown file with script imports:
+
+```markdown
+< script import>
+import { ref } from 'vue'
+import MyComponent from './MyComponent.vue'
+</>
+
+# My Awesome Post
+
+This post uses some imported components.
+```
+
+### Plugin Options
+
+The `imports` plugin does not provide any options for customization. It is designed to work out of the box with the default behavior.
+
+### Example Configuration
+
+Here is an example of how you can use the `imports` plugin:
+
+```typescript
+import MarkdownIt from 'markdown-it'
+import { importsPlugin } from '@md-plugins/md-plugin-imports'
+
+const md = new MarkdownIt()
+
+md.use(importsPlugin)
+```
+
+### Using Extracted Scripts
+
+Once the script imports are extracted, they are stored in the `env.pageScripts` set. How you handle this data and send it to the front-end is up to you. Here is an example of how to use the extracted scripts in a Vue component:
+
+```vue
+<template>
+  <div>
+    <h1>My Awesome Post</h1>
+    <MyComponent />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import MyComponent from './MyComponent.vue'
+
+// The extracted scripts would be included here
+</script>
+```
+
+### Handling Errors
+
+The `imports` plugin includes error handling to ensure that any issues with parsing the script imports do not break the rendering process. If an error occurs, the plugin will log the error and continue rendering the content without the script imports.
+
+### Conclusion
+
+The `imports` plugin is a powerful tool for extracting and storing script imports from your Markdown content. By managing the extracted scripts in the `env.pageScripts` set, you can tailor the plugin to fit your specific needs. Remember, it is up to you to handle the extracted script data and send it to the front-end in a way that suits your application. Experiment with different configurations and find the one that works best for you.
+
+Happy coding!

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

@@ -0,0 +1,80 @@
+---
+title: Imports Plugin
+desc: Imports plugin for Markdown.
+---
+
+Welcome to the Imports Plugin documentation! This guide will provide you with an overview of the Imports plugin and its features.
+
+## What is the Imports Plugin?
+
+The Imports Plugin is a powerful tool that enhances the standard Markdown functionality by allowing you to extract and manage script imports directly from your Markdown content. It integrates seamlessly with Markdown-It to provide a flexible and customizable way to handle script imports in your Markdown files.
+
+## Why Use the Imports Plugin?
+
+When working with Markdown content, especially in a dynamic environment like a documentation site or a static site generator, you might need to include specific scripts for certain pages. The Imports Plugin allows you to define these script imports directly within your Markdown files, making it easier to manage dependencies and ensure that the necessary scripts are included when rendering the content.
+
+## Key Features
+
+- **Script Extraction**: Extract script imports from your Markdown content.
+- **Environment Integration**: Store extracted scripts in the Markdown-It environment for easy access.
+- **Flexible Management**: Manage script imports directly within your Markdown files.
+
+## Examples
+
+::: warning
+We can't put the examples in the docs proper because they will otherwise be parsed. We have to use `$lt;script import>` and `</script>` to avoid parsing. In this case, we have to put the examples in blockquotes.
+:::
+
+Here are some examples of what you can achieve with the Imports Plugin:
+
+### Standard Script Import
+
+> <script import>
+> import SomeLibrary from 'some-library'
+> </script>
+
+## Name
+
+The official NPM name is `@md-plugins/md-plugin-imports`.
+
+## Installation
+
+You can install the Imports plugin using npm, yarn, or pnpm. Choose your preferred method below:
+
+```tabs
+<<| bash npm |>>
+npm install @md-plugins/md-plugin-imports
+<<| bash yarn |>>
+yarn add @md-plugins/md-plugin-imports
+<<| bash pnpm |>>
+pnpm add @md-plugins/md-plugin-imports
+```
+
+## Configuration
+
+After installing the plugin, you need to configure it in your Markdown-It setup. Here's an example of how to do that:
+
+> import MarkdownIt from 'markdown-it'
+> import { importsPlugin } from '@md-plugins/md-plugin-imports'
+> //
+> const md = new MarkdownIt()
+> //
+> md.use(importsPlugin)
+> //
+> // Now you can use the Imports plugin in your Markdown content
+> const result = md.render('&lt;script import&gt;\nimport SomeLibrary from "some-library"\n&lt;/script&gt;\n\n# My Document\n\nThis is the content of my document.')
+> console.log(result)
+
+### Options
+
+The Imports plugin does not accept any options.
+
+## 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/inline-code/advanced.md

@@ -0,0 +1,133 @@
+---
+title: Inline Code Plugin Advanced Topics
+desc: Inline code plugin advanced topics for Markdown.
+---
+
+## Inline Code Plugin
+
+The `inlinecode` plugin allows you to add custom classes to inline code elements in your Markdown content. 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 InlineCodePluginOptions {
+  /**
+   * The CSS class to apply to inline code blocks
+   *
+   * @default 'markdown-token'
+   */
+  inlineCodeClass?: string
+}
+
+/**
+ * Adds a class to inline code.
+ */
+declare const inlinecodePlugin: PluginWithOptions<InlineCodePluginOptions>
+
+export { type InlineCodePluginOptions, inlinecodePlugin }
+```
+
+### How It Works
+
+The `inlinecode` plugin processes inline code tokens in your Markdown content, adding custom classes to them. This helps improve the styling and accessibility of inline code elements in your Markdown content.
+
+### Default Behavior
+
+By default, the `inlinecode` plugin adds the `markdown-token` class to all inline code elements. Here is an example of a Markdown file with inline code:
+
+Here is some `inline code` in a sentence.
+
+::: tip
+Here is some `inline code` in a container.
+:::
+
+```markdown
+Here is some `inline code` in a sentence.
+
+::: tip
+Here is some `inline code` in a container.
+:::
+```
+
+### Default CSS
+
+By default, the `inlinecode` plugin applies the following CSS class to inline code elements. You can add this class in your CSS to customize the appearance of inline code elements.
+
+```scss
+.markdown-token {
+  display: inline-block;
+  padding: 4px 6px;
+  font-size: 16px;
+  line-height: 16px;
+  border-radius: 4px;
+  font-family: inherit;
+  color: #00bfff;
+  vertical-align: baseline;
+  border: 1px solid currentColor;
+}
+```
+
+### Plugin Options
+
+The `inlinecode` plugin provides an option for customization. Here is the available option and its description:
+
+#### `inlineCodeClass`
+
+- **Type**: `string`
+- **Default**: `'markdown-token'`
+- **Description**: The class to be added to all inline code elements.
+
+### Example Configuration
+
+Here is an example of how you can configure the `inlinecode` plugin with custom options:
+
+```typescript
+import MarkdownIt from 'markdown-it'
+import { inlinecodePlugin } from '@md-plugins/md-plugin-inlinecode'
+
+const md = new MarkdownIt()
+
+md.use(inlinecodePlugin, {
+  inlineCodeClass: 'custom-inline-code-class',
+})
+```
+
+### Customizing the CSS
+
+You can customize the appearance of inline code elements by overriding the default CSS class. Here are some examples of how you can customize the inline code elements:
+
+#### Example 1: Customizing the Background Color
+
+```css
+.custom-inline-code-class {
+  background-color: #f0f0f0; /* Change the background color */
+}
+```
+
+#### Example 2: Adding a Border
+
+```css
+.custom-inline-code-class {
+  border: 1px solid #dfe2e5; /* Add a border to inline code */
+}
+```
+
+#### Example 3: Changing the Font Style
+
+```css
+.custom-inline-code-class {
+  font-family: 'Courier New', Courier, monospace; /* Change the font style */
+}
+```
+
+### Handling the `class` Attribute
+
+The `inlinecode` plugin ensures that the `class` attribute is properly set for all inline code elements. If the `class` attribute is not present or is empty, the plugin sets it to the specified class. This helps improve the styling and accessibility of your Markdown content.
+
+### Conclusion
+
+The `inlinecode` plugin is a powerful tool for adding custom classes to inline code elements in your Markdown content. By customizing the class and CSS, you can tailor the appearance of inline code elements 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/inline-code/overview.md

@@ -0,0 +1,101 @@
+---
+title: Inlinecode Plugin
+desc: Inlinecode plugin for Markdown.
+---
+
+Welcome to the Inlinecode Plugin documentation! This guide will provide you with an overview of the Inlinecode plugin and its features.
+
+## What is the Inlinecode Plugin?
+
+The Inlinecode Plugin is a simple yet powerful tool that enhances the standard inline code functionality in Markdown. It allows you to apply custom CSS classes to inline code blocks, making it easier to style and highlight inline code snippets in your documentation.
+
+## Key Features
+
+- **Custom CSS Class**: Apply a custom CSS class to inline code blocks for consistent styling.
+- **Easy Configuration**: Simple and straightforward configuration options.
+- **Compatibility**: Works seamlessly with other Markdown-It plugins.
+
+## Examples
+
+Here are some examples of what you can achieve with the Inlinecode Plugin:
+
+### Standard Inline Code
+
+This is an example of `inline code`.
+
+```markup
+This is an example of `inline code`.
+```
+
+## Name
+
+The official NPM name is `@md-plugins/md-plugin-inlinecode`.
+
+## Installation
+
+You can install the Inlinecode plugin using npm, yarn, or pnpm. Choose your preferred method below:
+
+```tabs
+<<| bash npm |>>
+npm install @md-plugins/md-plugin-inlinecode
+<<| bash yarn |>>
+yarn add @md-plugins/md-plugin-inlinecode
+<<| bash pnpm |>>
+pnpm add @md-plugins/md-plugin-inlinecode
+```
+
+## 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 { inlinecodePlugin } from '@md-plugins/md-plugin-inlinecode'
+
+const md = new MarkdownIt()
+
+md.use(inlinecodePlugin, {
+  inlineCodeClass: 'custom-inline-code', // Optional: Customize the CSS class for inline code
+})
+
+// Now you can use the Inlinecode plugin in your Markdown content
+const result = md.render('This is an example of `inline code` with a custom class.')
+console.log(result)
+```
+
+### Options
+
+The Inlinecode plugin accepts the following options:
+
+- **inlineCodeClass**: The CSS class to apply to inline code blocks. Default is `'markdown-token'`.
+
+## Advanced Configuration
+
+For more advanced configurations, you can combine the Inlinecode plugin with other Markdown-It plugins to enhance your Markdown content further. Here's an example:
+
+```javascript
+import MarkdownIt from 'markdown-it'
+import { inlinecodePlugin } from '@md-plugins/md-plugin-inlinecode'
+import markdownItAnchor from 'markdown-it-anchor'
+import markdownItToc from 'markdown-it-toc-done-right'
+
+const md = new MarkdownIt()
+
+md.use(inlinecodePlugin, {
+  inlineCodeClass: 'custom-inline-code', // Customize the CSS class for inline code
+})
+  .use(markdownItAnchor)
+  .use(markdownItToc)
+
+// Now you can use the Inlinecode plugin along with other plugins in your Markdown content
+const result = md.render(
+  '# Table of Contents\n\n[[toc]]\n\nThis is an example of `inline code` with a custom class.',
+)
+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/link/advanced.md

@@ -0,0 +1,157 @@
+---
+title: Link Plugin Advanced Topics
+desc: Link plugin advanced topics for Markdown.
+---
+
+## Link Plugin
+
+The `link` plugin allows you to customize the rendering of links in your Markdown content by replacing the default `<a>` tags with custom components. 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 LinkPluginOptions {
+  /**
+   * The tag for the internal link
+   *
+   * @default 'MarkdownLink'
+   */
+  linkTag?: string
+  /**
+   * The "to" keyword" for the internal link
+   *
+   * @default 'to'
+   */
+  linkToKeyword?: string
+  /**
+   * add import statements to the page.
+   *
+   */
+  pageScript?: string
+}
+
+declare module '@md-plugins/shared' {
+  interface MarkdownItEnv {
+    /**
+     * An array of page script (import statements) to be included for tags.
+     */
+    pageScripts?: Set<string>
+  }
+}
+
+declare const linkPlugin: PluginWithOptions<LinkPluginOptions>
+
+export { type LinkPluginOptions, linkPlugin }
+```
+
+### How It Works
+
+The `link` plugin processes link tokens in your Markdown content, replacing the default `<a>` tags with custom components. This helps improve the styling and functionality of links in your Markdown content.
+
+### Default Behavior
+
+By default, the `link` plugin replaces `<a>` tags with a custom `MarkdownLink` component and sets the `to` attribute for navigation. Here is an example of a Markdown file with links:
+
+[Link to Google](https://www.google.com)
+
+[Link to another page](/another-page)
+
+```markdown
+[Link to Google](https://www.google.com)
+
+[Link to another page](/another-page)
+```
+
+### Plugin Options
+
+The `link` plugin provides several options for customization. Here are the available options and their descriptions:
+
+#### linkTag
+
+- **Type**: `string`
+- **Default**: `'MarkdownLink'`
+- **Description**: The custom component to replace the `<a>` tag.
+
+#### linkToKeyword
+
+- **Type**: `string`
+- **Default**: `'to'`
+- **Description**: The attribute to use for the link destination.
+
+#### pageScript
+
+- **Type**: `string`
+- **Default**: `'import MarkdownLink from "src/.q-press/components/MarkdownLink.vue"'`
+- **Description**: The script to import the custom link component.
+
+### Example Configuration
+
+Here is an example of how you can configure the `link` plugin with custom options:
+
+```typescript
+import MarkdownIt from 'markdown-it'
+import { linkPlugin } from '@md-plugins/md-plugin-link'
+
+const md = new MarkdownIt()
+
+md.use(linkPlugin, {
+  linkTag: 'CustomLink',
+  linkToKeyword: 'href',
+  pageScript: 'import CustomLink from "src/components/CustomLink.vue"',
+})
+```
+
+### Customizing the CSS
+
+You can customize the appearance of links by overriding the default CSS class. Here are some examples of how you can customize the links:
+
+#### Default CSS
+
+By default, the `link` plugin applies the following CSS class to links. You can add this class in your CSS to customize the appearance of links.
+
+```scss
+markdown-link {
+  color: #00bfff;
+  text-decoration: none;
+  border-bottom: 1px dotted currentColor;
+  outline: 0;
+  transition: color 0.28s ease-in-out;
+}
+```
+
+#### Example 1: Customizing the Hover Effect
+
+```css
+markdown-link:hover {
+  color: #ff6347; /* Change the color on hover */
+}
+```
+
+#### Example 2: Adding a Background Color
+
+```css
+markdown-link {
+  background-color: #f0f0f0; /* Add a background color */
+  padding: 2px 4px;
+}
+```
+
+#### Example 3: Changing the Font Style
+
+```css
+markdown-link {
+  font-family: 'Courier New', Courier, monospace; /* Change the font style */
+}
+```
+
+### Handling the pageScript
+
+The `link` plugin ensures that the custom component script is properly imported. If the `pageScript` option is set, the plugin adds the script to the `env.pageScripts` set. This helps manage the dependencies of your Markdown content.
+
+### Conclusion
+
+The `link` plugin is a powerful tool for customizing the rendering of links in your Markdown content. By customizing the component, attributes, and CSS, you can tailor the appearance and functionality of links to match the style of your project. Experiment with different configurations and find the one that works best for you.
+
+Happy coding!