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

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

@@ -0,0 +1,83 @@
+---
+title: Blockquote Plugin Advanced Topics
+desc: Blockquote plugin advanced topics for Markdown.
+---
+
+## Blockquote Plugin
+
+The `blockquote` plugin allows you to add customizable CSS classes to blockquotes in your Markdown content. This section will cover the CSS used by the plugin and how you can customize the output with your own CSS.
+
+### Type Information
+
+```ts
+import { PluginWithOptions } from 'markdown-it'
+
+interface BlockquotePluginOptions {
+  /**
+   * The class for the blockquote
+   *
+   * @default 'markdown-blockquote'
+   */
+  blockquoteClass?: string
+}
+
+declare const blockquotePlugin: PluginWithOptions<BlockquotePluginOptions>
+
+export { type BlockquotePluginOptions, blockquotePlugin }
+```
+
+### Default CSS
+
+By default, the `blockquote` plugin applies the `.markdown-blockquote` CSS class to blockquotes. You can add this class in your CSS to customize the appearance of blockquotes.
+
+```css
+.markdown-blockquote {
+  font-size: 16px;
+  padding: 1em;
+  margin: 1em 0;
+  border-left: 4px solid #dfe2e5;
+  background-color: #f8f8f8;
+  border-radius: 4px;
+}
+
+.markdown-blockquote > p,
+.markdown-blockquote > ul {
+  margin-bottom: 0;
+}
+```
+
+### Customizing the CSS
+
+You can customize the appearance of blockquotes by overriding the default CSS class. Here are some examples of how you can customize the blockquotes:
+
+#### Example 1: Customizing the Border Color
+
+```css
+.markdown-blockquote {
+  border-left-color: #3498db; /* Change the border color to blue */
+}
+```
+
+#### Example 2: Adding a Background Image
+
+```css
+.markdown-blockquote {
+  background-image: url('path/to/your/image.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+```
+
+#### Example 3: Changing the Font Style
+
+```css
+.markdown-blockquote {
+  font-family: 'Courier New', Courier, monospace; /* Change the font style */
+}
+```
+
+### Conclusion
+
+By customizing the CSS classes and creating different skins, you can tailor the appearance of blockquotes to match the style of your project. Experiment with different styles and find the one that works best for you.
+
+Happy coding!

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

@@ -0,0 +1,183 @@
+---
+title: Blockquote Plugin
+desc: Blockquote plugin for Markdown.
+# related:
+#   - md-plugins/codeblocks/overview
+#   - md-plugins/containers/overview
+#   - md-plugins/frontmatter/overview
+#   - md-plugins/headers/overview
+#   - md-plugins/image/overview
+#   - md-plugins/imports/overview
+#   - md-plugins/inline-code/overview
+#   - md-plugins/table/overview
+#   - md-plugins/link/overview
+#   - md-plugins/title/overview
+---
+
+Welcome to the Blockquote Plugin documentation! This guide will provide you with an overview of the Blockquote plugin and its features.
+
+## What is the Blockquote Plugin?
+
+The Blockquote Plugin is a powerful tool that enhances the standard blockquote functionality in Markdown. It allows you to create visually appealing and customizable blockquotes that can be used to highlight important information, quotes, or notes in your documentation.
+
+## Key Features
+
+- **Customizable Styles**: Apply custom styles to your blockquotes to match your documentation's theme.
+- **Icons and Badges**: Add icons and badges to your blockquotes for better visual representation.
+- **Nested Blockquotes**: Support for nested blockquotes to create complex structures.
+- **Responsive Design**: Ensure your blockquotes look great on all devices.
+
+## Examples
+
+Here are some examples of what you can achieve with the Blockquote Plugin:
+
+### Standard Blockquote
+
+> This is a standard blockquote.
+
+```markup
+> This is a standard blockquote.
+```
+
+### Blockquote with Note
+
+> **Note:** This is a blockquote with a note.
+
+```markup
+> **Note:** This is a blockquote with a note.
+```
+
+### Blockquote with Warning
+
+> **Warning:** This is a blockquote with a warning.
+
+```markup
+> **Warning:** This is a blockquote with a warning.
+```
+
+### Embedded Blockquote
+
+> This is a blockquote with an embedded blockquote.
+>
+> > This is an embedded blockquote.
+
+```markup
+> This is a blockquote with an embedded blockquote.
+>
+> > This is an embedded blockquote.
+```
+
+### Embedded Plugins
+
+> This is a blockquote with other embedded plugins.
+>
+> This is an embedded `inlinecode`.
+>
+> This is an embedded [link](https://md-plugins.netlify.app).
+>
+> ::: tip
+> This is an embedded container.
+> :::
+>
+> ```js
+> // This is an embedded codeblock.
+> export function containersPlugin(
+>   md: MarkdownIt,
+>   containers: ContainerDetails[],
+>   createContainer: CreateContainerFn,
+> ): void {
+> ```
+
+````markup
+> This is a blockquote with other embedded plugins.
+>
+> This is an embedded `inlinecode`.
+>
+> This is an embedded [link](https://md-plugins.netlify.app).
+>
+> ::: tip
+> This is an embedded container.
+> :::
+>
+> ```js
+> // This is an embedded codeblock.
+> export function containersPlugin(
+>   md: MarkdownIt,
+>   containers: ContainerDetails[],
+>   createContainer: CreateContainerFn,
+> ): void {
+> ```
+````
+
+## Name
+
+The official NPM name is `@md-plugins/md-plugin-blockquote`.
+
+## Installation
+
+You can install the Blockquote plugin using `npm`, `yarn`, or `pnpm`. Choose your preferred method below:
+
+```tabs
+<<| bash npm |>>
+npm install @md-plugins/md-plugin-blockquote
+<<| bash yarn |>>
+yarn add @md-plugins/md-plugin-blockquote
+<<| bash pnpm |>>
+pnpm add @md-plugins/md-plugin-blockquote
+```
+
+## 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 { blockquotePlugin } from '@md-plugins/md-plugin-blockquote'
+
+const md = new MarkdownIt()
+
+md.use(blockquotePlugin, {
+  blockquoteClass: 'custom-blockquote-class', // Optional: Customize the blockquote class
+})
+
+// Now you can use the Blockquote plugin in your Markdown content
+const result = md.render('> This is a blockquote with custom styling.')
+console.log(result)
+```
+
+### Options
+
+The Blockquote plugin accepts the following options:
+
+- **blockquoteClass**: A custom class to apply to blockquote elements. Default is `markdown-blockquote`.
+
+## Advanced Configuration
+
+For more advanced configurations, you can combine the Blockquote plugin with other Markdown-It plugins to enhance your Markdown content further. Here's an example:
+
+```js
+import MarkdownIt from 'markdown-it'
+import { blockquotePlugin } from '@md-plugins/md-plugin-blockquote'
+import markdownItAnchor from 'markdown-it-anchor'
+import markdownItToc from 'markdown-it-toc-done-right'
+
+const md = new MarkdownIt()
+
+md.use(blockquotePlugin, {
+  blockquoteClass: 'custom-blockquote-class', // Custom class for blockquotes
+})
+  .use(markdownItAnchor)
+  .use(markdownItToc)
+
+// Now you can use the Blockquote plugin along with other plugins in your Markdown content
+const result = md.render(
+  '# Table of Contents\n\n[[toc]]\n\n> This is a blockquote with custom styling.',
+)
+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/codeblocks/advanced.md

@@ -0,0 +1,210 @@
+---
+title: Codeblocks Plugin Advanced Topics
+desc: Codeblocks plugin advanced topics for Markdown.
+---
+
+## Codeblocks Plugin
+
+The `codeblocks` plugin enhances code block rendering in your Markdown content. This section will cover the CSS used by the plugin, how you can customize the output with your own CSS, and the available options for configuring the plugin.
+
+### Type Information
+
+```ts
+import { PluginWithOptions } from 'markdown-it'
+
+interface Lang {
+  name: string
+  customCopy?: boolean
+  aliases?: string
+}
+
+interface CodeblockPluginOptions {
+  /**
+   * The default language to use if none is detected.
+   * @default 'markup'
+   */
+  defaultLang?: string
+  /**
+   * The component used to wrap code blocks.
+   * @default 'markdown-prerender'
+   */
+  containerComponent?: string
+  /**
+   * The component used to render the copy button.
+   * @default 'markdown-copy-button'
+   */
+  copyButtonComponent?: string
+  /**
+   * The comonent name for the tab panel.
+   * @default 'q-tab-panel'
+   */
+  tabPanelTagName?: string
+  /**
+   * The class(es) to be used with the tab panel.
+   * @default 'q-pa-none'
+   */
+  tabPanelTagClass?: string
+  /**
+   * The class to be used for the pre tag.
+   * @default 'markdown-code'
+   */
+  preClass?: string
+  /**
+   * The class to be used for the code tag (ok to be empty).
+   * @default ''
+   */
+  codeClass?: string
+  /**
+   * An array of page scripts to be included.
+   */
+  pageScripts?: string[]
+  /**
+   * Optional Prism languages configuration array. This allows you to override or add custom language definitions.
+   * Each item can have a `name`, optional `aliases`, and `customCopy` boolean.
+   */
+  langList?: Lang[]
+}
+
+declare module '@md-plugins/shared' {
+  interface MarkdownItEnv {
+    /**
+     * An array of page script (import statements) to be included.
+     */
+    pageScripts?: Set<string>
+  }
+}
+
+declare const codeblocksPlugin: PluginWithOptions<CodeblockPluginOptions>
+
+export { type CodeblockPluginOptions, type Lang, codeblocksPlugin }
+```
+
+### Default CSS
+
+By default, the `codeblocks` plugin uses the `.markdown-code` CSS class to `<pre>` blocks. You can add this class in your CSS to customize the appearance of code blocks.
+
+```css
+.markdown-code {
+  font-size: 14px;
+  padding: 1em;
+  margin: 0;
+  border: 1px solid #dfe2e5;
+  color: #e6e6e6;
+  background-color: #121212;
+  border-radius: inherit;
+  overflow: auto;
+  border-color: rgba(255, 255, 255, 0.28);
+}
+
+.markdown-code code {
+  display: block;
+  padding: 16px;
+  width: fit-content;
+  min-width: 100%;
+  font-size: 14px;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  line-height: 1.5em;
+  tab-size: 2;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  hyphens: none;
+  color: inherit;
+  background-color: inherit;
+  border-radius: inherit;
+}
+```
+
+### Customizing the CSS
+
+You can customize the appearance of code blocks by overriding the default CSS class. Here are some examples of how you can customize the code blocks:
+
+#### Example 1: Customizing the Border Color
+
+```css
+.markdown-code {
+  border-color: #3498db; /* Change the border color to blue */
+}
+```
+
+#### Example 2: Adding a Background Image
+
+```css
+.markdown-code {
+  background-image: url('path/to/your/image.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+```
+
+#### Example 3: Changing the Font Style
+
+```css
+.markdown-code code {
+  font-family: 'Courier New', Courier, monospace; /* Change the font style */
+}
+```
+
+### Plugin Options
+
+The `codeblocks` plugin provides several options for customization. Here are the available options and their descriptions:
+
+#### `defaultLang`
+
+- **Type**: `string`
+- **Default**: `'markup'`
+- **Description**: The default language to use if none is detected.
+
+#### `containerComponent`
+
+- **Type**: `string`
+- **Default**: `'markdown-prerender'`
+- **Description**: The component used to wrap code blocks.
+
+#### `copyButtonComponent`
+
+- **Type**: `string`
+- **Default**: `'markdown-copy-button'`
+- **Description**: The component used to render the copy button.
+
+#### `tabPanelTagName`
+
+- **Type**: `string`
+- **Default**: `'q-tab-panel'`
+- **Description**: The component name for the tab panels.
+
+#### `tabPanelTagClass`
+
+- **Type**: `string`
+- **Default**: `'q-pa-none'`
+- **Description**: The class(es) to be used with the tab panels.
+
+#### `preClass`
+
+- **Type**: `string`
+- **Default**: `'markdown-code'`
+- **Description**: The class to be used for the `<pre>` tag.
+
+#### `codeClass`
+
+- **Type**: `string`
+- **Default**: `''`
+- **Description**: The class to be used for the `<code>` tag (ok to be empty).
+
+#### `pageScripts`
+
+- **Type**: `string[]`
+- **Description**: An array of page scripts to be included.
+
+#### `langList`
+
+- **Type**: `Array<{ name: string; aliases?: string; customCopy?: boolean }>`
+- **Description**: Optional Prism languages configuration array. This allows you to override or add custom language definitions. Each item can have a `name`, optional `aliases`, and `customCopy` boolean.
+
+### Conclusion
+
+By customizing the CSS classes and using the available plugin options, you can tailor the appearance and behavior of code blocks to match the style of your project. Experiment with different styles and configurations to find the one that works best for you.
+
+Happy coding!