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

package/src/templates/init/src/markdown/__elements2.md

@@ -0,0 +1,347 @@
+---
+title: Design Elements
+desc: The elements for markdown design.
+---
+
+Lorem ipsum dolor sit amet, **consectetur adipiscing** elit, sed do _eiusmod_ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu `fugiat nulla` pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa [qui officia](/vue-components/badge) deserunt mollit anim id est laborum.
+
+## Heading H2
+
+Lorem ipsum dolor sit amet, **consectetur adipiscing** elit, sed do _eiusmod_ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu `fugiat nulla` pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa [qui officia](/vue-components/badge) deserunt mollit anim id est laborum.
+
+### Heading H3
+
+Lorem ipsum dolor sit amet, **consectetur adipiscing** elit, sed do _eiusmod_ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu `fugiat nulla` pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa [qui officia](/vue-components/badge) deserunt mollit anim id est laborum.
+
+#### Heading H4
+
+Lorem ipsum dolor sit amet, **consectetur adipiscing** elit, sed do _eiusmod_ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu `fugiat nulla` pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa [qui officia](/vue-components/badge) deserunt mollit anim id est laborum.
+
+##### Heading H5
+
+Lorem ipsum dolor sit amet, **consectetur adipiscing** elit, sed do _eiusmod_ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu `fugiat nulla` pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa [qui officia](/vue-components/badge) deserunt mollit anim id est laborum.
+
+###### Heading H6
+
+Lorem ipsum dolor sit amet, **consectetur adipiscing** elit, sed do _eiusmod_ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu `fugiat nulla` pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa [qui officia](/vue-components/badge) deserunt mollit anim id est laborum.
+
+### Heading with badge <q-badge label="badge" />
+
+Lorem ipsum dolor sit amet, **consectetur adipiscing** elit, sed do _eiusmod_ tempor incididunt ut labore et dolore magna aliqua.
+
+## Containers
+
+> Block container
+> <br><br>
+>
+> This Website collects some `Personal Data` from its Users.
+
+::: tip Tip container title
+This Website collects some `Personal Data` from its Users.
+:::
+
+::: warning Warning container title
+This Website collects some `Personal Data` from its Users.
+:::
+
+::: danger Danger container title
+This Website collects some `Personal Data` from its Users.
+:::
+
+::: details Details container title
+This Website collects some `Personal Data` from its Users.
+:::
+
+## Keyboard tokens
+
+- macOS: <kbd>Cmd</kbd> <kbd>Alt</kbd> <kbd>I</kbd> or <kbd>F12</kbd>
+- Linux: <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>I</kbd> or <kbd>F12</kbd>
+- Windows: <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>I</kbd> or <kbd>F12</kbd>
+
+## Code containers
+
+### Plain (internal highlight on `prod:`)
+
+```js
+export default function (ctx) { // can be async too
+  console.log(ctx)
+
+  // Example output on console:
+  {
+    dev: true,
+    prod: false [[! highlight]]
+  }
+
+  const { FOO } = process.env // ❌ It doesn't allow destructuring or similar
+  process.env.FOO             // ✅ It can only replace direct usage like this
+
+  // context gets generated based on the parameters
+  // with which you run "quasar dev" or "quasar build"
+}
+```
+
+### Highlight [2,5]
+
+```js [highlight=2,5]
+export default function (ctx) { // can be async too
+  console.log(ctx)
+
+  // Example output on console:
+  {
+    dev: true,
+    prod: false
+  }
+
+  const { FOO } = process.env // ❌ It doesn't allow destructuring or similar
+  process.env.FOO             // ✅ It can only replace direct usage like this
+
+  // context gets generated based on the parameters
+  // with which you run "quasar dev" or "quasar build"
+}
+```
+
+### Highlight [2,5,9,10] add [3,6-7] rem [15] with numbered lines
+
+```js [highlight=2,5,9,10 numbered add=3,6-7 rem=15]
+export default function (ctx) { // can be async too
+  console.log(ctx)
+
+  // Example output on console:
+  {
+    dev: true,
+    prod: false
+  }
+
+  const { FOO } = process.env // ❌ It doesn't allow destructuring or similar
+  process.env.FOO             // ✅ It can only replace direct usage like this
+
+  // context gets generated based on the parameters
+  // with which you run "quasar dev" or "quasar build"
+  // Additionally, ...
+}
+```
+
+### Titled code
+
+```js Titled code
+export default function (ctx) { // can be async too
+  console.log(ctx)
+
+  // Example output on console:
+  {
+    dev: true,
+    prod: false
+  }
+
+  const { FOO } = process.env // ❌ It doesn't allow destructuring or similar
+  process.env.FOO             // ✅ It can only replace direct usage like this
+
+  // context gets generated based on the parameters
+  // with which you run "quasar dev" or "quasar build"
+}
+```
+
+### bash
+
+```bash
+sudo apt update
+sudo apt upgrade
+sudo apt autoremove
+```
+
+### bash numbered
+
+```bash [numbered]
+sudo apt update
+sudo apt upgrade
+sudo apt autoremove
+```
+
+### CSS
+
+```css
+.my-class {
+  color: red;
+  background-color: blue;
+}
+```
+
+### CSS numbered
+
+```css [numbered]
+.my-class {
+  color: red;
+  background-color: blue;
+}
+```
+
+### JSON
+
+```json
+{
+  "min": 0,
+  "super": false,
+  "max": 100
+}
+```
+
+### JSON (internal rem/add)
+
+```json [rem=1]
+{
+  "min": 0,
+  "super": false, [[! rem]]
+  "super": true, [[! add]]
+  "max": 100
+}
+```
+
+### JSON (internal rem/add and numbered)
+
+```json [numbered]
+{
+  "min": 0,
+  "super": false, [[! rem]]
+  "super": true, [[! add]]
+  "max": 100
+}
+```
+
+### JSON (numbered/highlight)
+
+```json [numbered]
+{
+  "min": 0,
+  "super": false, [[! highlight]]
+  "max": 100
+}
+```
+
+### diff
+
+```diff
+@@ -13,6 +13,8 @@ const langList = [
+   { name: 'xml' },
+   { name: 'nginx' },
+   { name: 'html' },
++
++  // special grammars:
+   { name: 'diff' }
+ ]
+
+@@ -20,6 +22,12 @@ loadLanguages(langList.map(l => l.name))
+
+ const langMatch = langList.map(l => l.aliases || l.name).join('|')
+
++/**
++ * lang -> one of the supported languages (langList)
++ * attrs -> optional attributes:
++ *    * numbered - lines are numbered
++ * title -> optional card title
++ */
+ const definitionLineRE = new RegExp(
+   '^' +
+   `(?<lang>(tabs|${ langMatch }))` + // then a language name
+@@ -28,6 +36,10 @@ const definitionLineRE = new RegExp(
+   '$'
+ )
+
++/**
++ * <<| lang [attrs] [title] |>>
++ * ...content...
++ */
+ const tabsLineRE = new RegExp(
+   '^<<\\|\\s+' + // starts with "<<|" + at least one space char
+   `(?<lang>${ langMatch })` + // then a language name
+@@ -72,29 +84,65 @@ function extractTabs (content) {
+       const props = tabMap[ tabName ]
+       return (
+         `<q-tab-panel class="q-pa-none" name="${ tabName }">` +
+-        `<pre v-pre class="markdown-code">${ highlight(props.content.join('\n'), props.attrs) }</pre>` +
+-        '<copy-button />' +
++        highlight(props.content.join('\n'), props.attrs) +
+         '</q-tab-panel>'
+       )
+     }).join('\n')
+   }
+ }
+
+-function highlight (content, attrs) {
+-  const { lang, numbered } = attrs
+-  const highlightedText = prism.highlight(content, prism.languages[ lang ], lang)
++const magicCommentRE = / *\/\/\[! (?<klass>[\w-]+)\] */
++const magicCommentGlobalRE = new RegExp(magicCommentRE, 'g')
+
+-  if (numbered === true) {
+-    const lines = highlightedText.split('\n')
+-    const lineCount = ('' + highlightedText.length).length
++function getLineClasses (content, highlightedLines) {
++  const lines = content.split('\n')
+```
+
+### Tabs
+
+```tabs
+<<| js [numbered] Config file |>>
+export default function (ctx) { // can be async too
+  console.log(ctx)
+
+  // Example output on console:
+  {
+    dev: true,
+    prod: false
+  }
+
+  const { FOO } = process.env // ❌ It doesn't allow destructuring or similar
+  process.env.FOO             // ✅ It can only replace direct usage like this
+
+  // context gets generated based on the parameters
+  // with which you run "quasar dev" or "quasar build"
+}
+<<| js Other file |>>
+const x = {
+  dev: true,
+  prod: false
+}
+```
+
+### Tabs (3)
+
+```tabs quasar.config file
+<<| js One |>>
+export default function (ctx) { // can be async too
+  console.log(ctx)
+
+  // Example output on console:
+  {
+    dev: true,
+    prod: false [[! highlight]]
+  }
+
+  const { FOO } = process.env // ❌ It doesn't allow destructuring or similar
+  process.env.FOO             // ✅ It can only replace direct usage like this
+
+  // context gets generated based on the parameters
+  // with which you run "quasar dev" or "quasar build"
+}
+<<| js [numbered] Two (numbered) |>>
+const x = {
+  dev: true,
+  prod: false
+}
+<<| diff Three (with diff) |>>
+{
+  min: 0
+- super: false
++ super: true
+  max: 100
+}
+```
+
+<MarkdownInstallation plugins="AppFullscreen" />
+
+<script import>
+import AvatarApi from 'quasar/dist/api/QAvatar.json'
+</script>
+
+<MarkdownApi :api="AvatarApi" name="QAvatar"/>

package/src/templates/init/src/markdown/getting-started/introduction.md

@@ -0,0 +1,67 @@
+---
+title: Introduction to Markdown Plugins
+desc: Markdown for your Quasar and Vue builds
+---
+
+Welcome to the Markdown Plugins documentation! This guide will help you start using Markdown Plugins to enhance your documentation and content creation experience.
+
+## What are Markdown Plugins?
+
+Markdown Plugins are a set of tools and extensions designed to enhance the functionality of Markdown. They provide additional features and capabilities that go beyond the standard Markdown syntax, allowing you to create more dynamic and interactive content.
+
+## Key Features
+
+- **Extended Syntax**: Add custom syntax and elements to your Markdown documents.
+- **Custom Containers**: Use custom containers for callouts, warnings, and more.
+- **Frontmatter Support**: Extract and process frontmatter content from your Markdown files.
+- **Header Management**: Extract and process headers for generating ToCs or managing headers.
+- **Inline Code Styling**: Add custom classes to inline code blocks for styling.
+- **Link Customization**: Convert Markdown links into Vue components for SPA-friendly routing.
+- **Table Enhancements**: Add custom classes and attributes to Markdown tables.
+- **Title Extraction**: Extract the first header in Markdown as the page title.
+- **Script Imports**: Extract and process **<script import>** blocks from Markdown.
+- **Code Block Enhancements**: Enhance code block rendering with syntax highlighting, tabs, and more.
+- **Custom Styling**: Apply custom styles to your Markdown content for a more polished look.
+- **Integration**: Easily integrate with other tools and platforms to streamline your workflow.
+
+## Why Use Markdown Plugins?
+
+Markdown Plugins offer several benefits that make them a valuable addition to your documentation toolkit:
+
+- **Enhanced Readability**: Improve the readability and presentation of your content with custom elements and styles.
+- **Increased Productivity**: Save time by using pre-built components and extensions that simplify complex tasks.
+- **Better Collaboration**: Facilitate collaboration by providing a consistent and standardized way to create and share content.
+
+## Getting Started
+
+To get started with Markdown Plugins, follow these steps:
+
+1. **Installation**: Cherry-pick and install the Markdown Plugins packages using your preferred package manager.
+2. **Configuration**: Configure the plugins to suit your needs and preferences.
+3. **Usage**: Start using the plugins in your Markdown documents to enhance your content.
+
+For detailed instructions on installation and configuration, refer to the **Installation** and **Configuration** sections for each respective plugin.
+
+## Examples
+
+Here are some examples of what you can achieve with Markdown Plugins:
+
+- **Custom Syntax**: Add custom syntax for specific use cases.
+- **Enhanced Components**: Embed interactive and enhanced components.
+- **Custom Styling**: Apply custom styles to your content for a polished look.
+- **Frontmatter Support**: Extract and process frontmatter content from your Markdown files.
+- **Header Management**: Extract and process headers for generating ToCs or managing headers.
+- **Inline Code Styling**: Add custom classes to inline code blocks for styling.
+- **Link Customization**: Convert Markdown links into Vue components for SPA-friendly routing.
+- **Table Enhancements**: Add custom classes and attributes to Markdown tables.
+- **Title Extraction**: Extract the first header in Markdown as the page title.
+- **Script Imports**: Extract and process `<script import>` blocks from Markdown.
+- **Code Block Enhancements**: Enhance code block rendering with syntax highlighting, tabs, and more.
+
+<!-- Check out the [Examples](../guides/examples) section for more detailed examples and use cases. -->
+
+## Support
+
+If you have any questions or need assistance, please refer to the [FAQ](../guides/faq) or reach out to our support team.
+
+Happy coding!

package/src/templates/init/src/markdown/guides/contributing.md

@@ -0,0 +1,101 @@
+---
+title: Contributing Guide
+desc: Guidelines for contributing to the Markdown Plugins project.
+---
+
+Thank you for your interest in contributing to the Markdown Plugins project! We welcome contributions from the community and appreciate your efforts to improve the project. This guide will help you get started with contributing.
+
+## How to Contribute
+
+### Reporting Issues
+
+If you encounter any bugs or have suggestions for improvements, please report them by opening an issue on the GitHub repository. When reporting an issue, please include:
+
+- A clear and descriptive title.
+- A detailed description of the issue or suggestion.
+- Steps to reproduce the issue (if applicable).
+- Any relevant code snippets or screenshots.
+
+### Submitting Pull Requests
+
+We welcome pull requests for bug fixes, new features, and improvements. To submit a pull request:
+
+1. **Fork the Repository**: Click the "Fork" button on the repository's GitHub page to create a copy of the repository in your GitHub account.
+
+2. **Clone the Repository**: Clone the forked repository to your local machine.
+
+   ```bash
+   git clone https://github.com/your-username/md-plugins.git
+   cd md-plugins
+   ```
+
+3. **Create a Branch**: Create a new branch for your changes.
+
+   ```bash
+   git checkout -b my-feature-branch
+   ```
+
+4. **Make Changes**: Make your changes to the codebase. Ensure that your changes follow the project's coding standards and guidelines.
+
+5. **Commit Changes**: Commit your changes with a clear and descriptive commit message.
+
+   ```bash
+   git add .
+   git commit -m "Add new feature or fix bug"
+   ```
+
+6. **Push Changes**: Push your changes to your forked repository.
+
+   ```bash
+   git push origin my-feature-branch
+   ```
+
+7. **Open a Pull Request**: Go to the original repository on GitHub and open a pull request. Provide a clear and descriptive title and description for your pull request.
+
+### Code Style and Guidelines
+
+Please ensure that your code follows the project's coding standards and guidelines. This includes:
+
+- Writing clear and concise code.
+- Adding comments and documentation where necessary.
+- Following the project's naming conventions and file organization.
+- Writing tests for new features and bug fixes.
+
+### Running Tests
+
+Before submitting your pull request, ensure that all tests pass. You can run the tests using the following command:
+
+```bash
+pnpm test
+```
+
+If you add new features or fix bugs, please add corresponding tests to ensure the changes are properly tested.
+
+### Documentation
+
+If your changes affect the project's documentation, please update the relevant documentation files. This includes:
+
+- Updating the `README.md` file.
+- Updating the documentation in the `docs` directory.
+- Adding examples or usage instructions if applicable.
+
+## Community Guidelines
+
+We strive to create a welcoming and inclusive community. Please adhere to the following guidelines:
+
+- Be respectful and considerate of others.
+- Provide constructive feedback and be open to feedback from others.
+- Avoid using offensive or inappropriate language.
+- Follow the project's code of conduct.
+
+## Getting Help
+
+If you need help or have any questions, feel free to reach out to the community or the project maintainers. You can:
+
+- Open an issue on the GitHub repository.
+- Join the project's discussion forum or chat (if available).
+- Contact the project maintainers directly.
+
+Thank you for contributing to the Markdown Plugins project! Your contributions help make the project better for everyone.
+
+Happy coding!

package/src/templates/init/src/markdown/guides/faq.md

@@ -0,0 +1,115 @@
+---
+title: Frequently Asked Questions
+desc: Common questions and answers about Markdown Plugins.
+---
+
+## General Questions
+
+### What are Markdown Plugins?
+
+Markdown Plugins are tools that extend the functionality of Markdown, allowing you to add custom syntax, enhanced components, and custom styling to your Markdown documents. They help improve the accessibility, styling, and interactivity of your content.
+
+### How do I install Markdown Plugins?
+
+You can install Markdown Plugins using npm, yarn, or pnpm. Here is an example using npm:
+
+```bash
+npm install @md-plugins/vite-md-plugin
+```
+
+Refer to the **Installation** section of each plugin's documentation for detailed instructions.
+
+### How do I configure Markdown Plugins?
+
+Configuration varies depending on the plugin. Generally, you will need to import the plugin and use it with your Markdown processor (e.g., MarkdownIt). Refer to the **Configuration** section of each plugin's documentation for detailed instructions.
+
+## Plugin-Specific Questions
+
+### How do I add custom classes to images?
+
+You can use the `image` plugin to add custom classes to images. Here is an example configuration:
+
+```typescript
+import MarkdownIt from 'markdown-it'
+import { imagePlugin } from '@md-plugins/md-plugin-image'
+
+const md = new MarkdownIt()
+
+md.use(imagePlugin, {
+  imageClass: 'custom-image-class',
+})
+```
+
+### How do I extract and process frontmatter content?
+
+You can use the `frontmatter` plugin to extract and process frontmatter content from your Markdown files. Here is an example configuration:
+
+```typescript
+import MarkdownIt from 'markdown-it'
+import { frontmatterPlugin } from '@md-plugins/md-plugin-frontmatter'
+
+const md = new MarkdownIt()
+
+md.use(frontmatterPlugin, {
+  grayMatterOptions: {
+    excerpt: true,
+    excerpt_separator: '<!-- more -->',
+  },
+  renderExcerpt: true,
+})
+
+const env: MarkdownItEnv = {}
+const html = md.render(code, env)
+
+console.log(env.frontmatter)
+```
+
+### How do I enhance code block rendering?
+
+You can use the `codeblocks` plugin to enhance code block rendering with syntax highlighting, tabs, and more. Here is an example configuration:
+
+```typescript
+import MarkdownIt from 'markdown-it'
+import { codeblocksPlugin } from '@md-plugins/md-plugin-codeblocks'
+
+const md = new MarkdownIt()
+
+md.use(codeblocksPlugin, {
+  defaultLang: 'javascript',
+  containerComponent: 'MarkdownPrerender',
+  copyButtonComponent: 'MarkdownCopyButton',
+})
+```
+
+### How do I convert Markdown links into Vue components?
+
+You can use the `link` plugin to convert Markdown links into Vue components for SPA-friendly routing. Here is an example configuration:
+
+```typescript
+import MarkdownIt from 'markdown-it'
+import { linkPlugin } from '@md-plugins/md-plugin-link'
+
+const md = new MarkdownIt()
+
+md.use(linkPlugin, {
+  linkTag: 'RouterLink', // or 'router-link'
+  linkToKeyword: 'to',
+  pageScript: 'import { RouterLink } from "vue-router"',
+})
+```
+
+## Troubleshooting
+
+### My Markdown content is not rendering correctly. What should I do?
+
+Ensure that you have correctly installed and configured the plugins. Check the console for any error messages and refer to the documentation for troubleshooting tips. If the issue persists, reach out to our support team for assistance.
+
+### How do I report a bug or request a feature?
+
+You can report bugs or request features by opening an issue on the GitHub repository of the respective plugin. Provide as much detail as possible to help us understand and address your request.
+
+## Support
+
+If you have any other questions or need further assistance, please refer to the Support page or contact our support team.
+
+Happy coding!

package/src/templates/init/src/markdown/landing-page.md

@@ -0,0 +1,11 @@
+---
+title: MD-PLUGINS
+desc: Markdown for your Quasar and Vue builds
+editLink: false
+---
+
+<script import>
+import LandingPage from '../components/LandingPage/LandingPage.vue'
+</script>
+
+<LandingPage />

package/src/templates/init/src/markdown/listing.ts

@@ -0,0 +1,3 @@
+// used by routes.js;
+// placing it here to generate shorter string lengths as keys
+export default import.meta.glob('./**/*.md')