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

package/src/templates/update/src/_q-press/api/components/MarkdownPage.json

@@ -0,0 +1,71 @@
+{
+  "type": "component",
+  "meta": {
+    "docsUrl": "https://path-to-your-docs/markdown-page"
+  },
+  "props": {
+    "overline": {
+      "type": "String",
+      "desc": "Text to display as an overline above the title",
+      "examples": [
+        "'Introduction'",
+        "'Chapter 1'"
+      ],
+      "category": "content"
+    },
+    "title": {
+      "type": "String",
+      "desc": "Title of the markdown page",
+      "examples": [
+        "'Getting Started'",
+        "'API Reference'"
+      ],
+      "category": "content"
+    },
+    "badge": {
+      "type": "String",
+      "desc": "Badge text to display next to the title",
+      "examples": [
+        "'New'",
+        "'Updated'"
+      ],
+      "category": "content"
+    },
+    "editLink": {
+      "type": "String",
+      "desc": "URL for the edit link",
+      "examples": [
+        "'https://github.com/user/repo/edit/main/docs/page.md'"
+      ],
+      "category": "navigation"
+    },
+    "isFullscreen": {
+      "type": "Boolean",
+      "desc": "Flag to indicate if the page is in fullscreen mode",
+      "category": "state"
+    }
+  },
+  "slots": {
+    "default": {
+      "desc": "Slot for the main content of the markdown page"
+    }
+  },
+  "events": {
+    "edit": {
+      "desc": "Emitted when the edit button is clicked",
+      "params": {
+        "evt": {
+          "type": "Event",
+          "desc": "JS event object"
+        }
+      }
+    }
+  },
+  "methods": {
+    "toggleFullscreen": {
+      "desc": "Toggle the fullscreen mode of the markdown page",
+      "params": {},
+      "returns": null
+    }
+  }
+}

package/src/templates/update/src/_q-press/api/components/MarkdownPageFooter.json

@@ -0,0 +1,21 @@
+{
+  "type": "component",
+  "meta": {
+    "docsUrl": "https://path-to-your-docs/markdown-page-footer"
+  },
+  "props": {
+    "fullscreen": {
+      "type": "Boolean",
+      "desc": "Flag to indicate if the page is in fullscreen mode",
+      "category": "state"
+    },
+    "links": {
+      "type": "Array",
+      "desc": "Array of link objects to display in the footer",
+      "examples": [
+        "[{ name: 'Home', path: '/' }, { name: 'Docs', path: '/docs' }]"
+      ],
+      "category": "content"
+    }
+  }
+}

package/src/templates/update/src/_q-press/api/components/MarkdownPageSidebar.json

@@ -0,0 +1,56 @@
+{
+  "type": "plugin",
+  "meta": {
+    "docsUrl": "https://path-to-your-docs/markdown-page-sidebar"
+  },
+  "functions": {
+    "getParentProxy": {
+      "desc": "Retrieves the parent proxy of a given component proxy.",
+      "params": {
+        "proxy": {
+          "type": "ComponentProxy",
+          "desc": "The component proxy to retrieve the parent for."
+        }
+      },
+      "returns": {
+        "type": "ComponentProxy | undefined",
+        "desc": "The parent component proxy, or undefined if not found."
+      }
+    }
+  },
+  "types": {
+    "ComponentProxy": {
+      "desc": "Interface representing a component proxy.",
+      "properties": {
+        "$parent": {
+          "type": "ComponentProxy",
+          "desc": "The parent component proxy."
+        },
+        "$": {
+          "type": "Object",
+          "desc": "Internal Vue instance properties.",
+          "properties": {
+            "parent": {
+              "type": "Object",
+              "desc": "The parent Vue instance.",
+              "properties": {
+                "proxy": {
+                  "type": "ComponentProxy",
+                  "desc": "The parent component proxy."
+                },
+                "parent": {
+                  "type": "ComponentProxy",
+                  "desc": "The grandparent component proxy."
+                }
+              }
+            }
+          }
+        },
+        "show": {
+          "type": "Function",
+          "desc": "Function to show the component."
+        }
+      }
+    }
+  }
+}

package/src/templates/update/src/_q-press/api/components/MarkdownPageToc.json

@@ -0,0 +1,17 @@
+{
+  "type": "component",
+  "meta": {
+    "docsUrl": "https://path-to-your-docs/markdown-page-toc"
+  },
+  "events": {
+    "click": {
+      "desc": "Emitted when a Table of Contents item is clicked",
+      "params": {
+        "tocItem": {
+          "type": "Object",
+          "desc": "The Table of Contents item that was clicked"
+        }
+      }
+    }
+  }
+}

package/src/templates/update/src/_q-press/api/components/MarkdownPrerender.json

@@ -0,0 +1,25 @@
+{
+  "type": "component",
+  "meta": {
+    "docsUrl": "https://path-to-your-docs/markdown-prerender"
+  },
+  "props": {
+    "title": {
+      "type": "String",
+      "desc": "Title of the prerendered content",
+      "examples": [
+        "'Example Title'",
+        "'Sample Content'"
+      ],
+      "category": "content"
+    },
+    "tabs": {
+      "type": "Array",
+      "desc": "List of tabs to display",
+      "examples": [
+        "['Tab 1', 'Tab 2']"
+      ],
+      "category": "content"
+    }
+  }
+}

package/src/templates/update/src/_q-press/api/components/MarkdownTree.json

@@ -0,0 +1,27 @@
+{
+  "type": "component",
+  "meta": {
+    "docsUrl": "https://path-to-your-docs/markdown-tree"
+  },
+  "props": {
+    "nodes": {
+      "type": "Array",
+      "desc": "Array of nodes to display in the tree",
+      "examples": [
+        "[{ id: 1, l: 'Node 1', c: [{ id: 2, l: 'Child Node' }] }]"
+      ],
+      "category": "content"
+    }
+  },
+  "slots": {
+    "default-header": {
+      "desc": "Slot for custom content in the tree node header",
+      "scope": {
+        "prop": {
+          "type": "Object",
+          "desc": "Properties of the tree node"
+        }
+      }
+    }
+  }
+}

package/src/templates/update/src/_q-press/api/composables/dark.json

@@ -0,0 +1,29 @@
+{
+  "type": "component",
+  "meta": {
+    "docsUrl": "https://path-to-your-docs/dark"
+  },
+  "functions": {
+    "useDark": {
+      "desc": "Composable function to manage dark mode settings.",
+      "returns": {
+        "type": "Object",
+        "desc": "An object containing the dark mode state and functions to initialize and toggle dark mode.",
+        "properties": {
+          "isDark": {
+            "type": "ComputedRef<boolean>",
+            "desc": "A computed reference to the current dark mode state."
+          },
+          "initDark": {
+            "type": "Function",
+            "desc": "Function to initialize the dark mode state based on cookies."
+          },
+          "toggleDark": {
+            "type": "Function",
+            "desc": "Function to toggle the dark mode state and update cookies."
+          }
+        }
+      }
+    }
+  }
+}

package/src/templates/update/src/_q-press/api/composables/scroll.json

@@ -0,0 +1,34 @@
+{
+  "type": "plugin",
+  "meta": {
+    "docsUrl": "https://path-to-your-docs/scroll"
+  },
+  "functions": {
+    "useScroll": {
+      "desc": "Composable function to manage scroll behavior.",
+      "returns": {
+        "type": "Object",
+        "desc": "An object containing functions to manage scroll behavior.",
+        "properties": {
+          "scrollToCurrentAnchor": {
+            "type": "Function",
+            "desc": "Function to scroll to the current anchor in the route.",
+            "params": {
+              "isRouteChange": {
+                "type": "boolean",
+                "desc": "Flag to indicate if the scroll is due to a route change."
+              }
+            },
+            "returns": null
+          },
+          "scrollToTop": {
+            "type": "Function",
+            "desc": "Function to scroll to the top of the page.",
+            "params": {},
+            "returns": null
+          }
+        }
+      }
+    }
+  }
+}

package/src/templates/update/src/_q-press/assets/get-meta.ts

@@ -0,0 +1,29 @@
+export default function getMeta(title: string, desc: string) {
+  return {
+    title: {
+      name: 'title',
+      content: title,
+    },
+    ogTitle: {
+      name: 'og:title',
+      content: title,
+    },
+    twitterTitle: {
+      name: 'twitter:title',
+      content: title,
+    },
+
+    description: {
+      name: 'description',
+      content: desc,
+    },
+    ogDesc: {
+      name: 'og:description',
+      content: desc,
+    },
+    twitterDesc: {
+      name: 'twitter:description',
+      content: desc,
+    },
+  }
+}

package/src/templates/update/src/_q-press/components/DarkModeToggle.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="dark-mode-toggle" @click="toggleMode">
+    <div class="toggle-container" :class="{ 'is-dark': isDark }">
+      <q-icon :name="props.lightIcon" class="toggle-icon light-icon" />
+      <q-icon :name="props.darkIcon" class="toggle-icon dark-icon" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+import { useQuasar } from 'quasar'
+import { useDark } from '../composables/dark'
+import { mdiMoonWaningCrescent, mdiWhiteBalanceSunny } from '@quasar/extras/mdi-v7'
+
+const props = defineProps({
+  darkIcon: {
+    type: String,
+    default: mdiMoonWaningCrescent, // Default dark mode icon
+  },
+  lightIcon: {
+    type: String,
+    default: mdiWhiteBalanceSunny, // Default light mode icon
+  },
+})
+
+const emit = defineEmits(['update:mode'])
+
+const $q = useQuasar()
+const { toggleDark } = useDark()
+
+const isDark = computed(() => $q.dark.isActive)
+
+const toggleMode = () => {
+  toggleDark()
+  emit('update:mode', isDark.value ? 'dark' : 'light')
+}
+
+// Watch for changes in Quasar dark mode
+watch(
+  () => $q.dark.isActive,
+  (newVal) => {
+    emit('update:mode', newVal ? 'dark' : 'light')
+  },
+)
+</script>
+
+<style scoped lang="scss">
+.dark-mode-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  width: 60px;
+  height: 30px;
+  background-color: $brand-light-bg;
+  border: $brand-primary solid 1px;
+  border-radius: 15px;
+  position: relative;
+  overflow: hidden;
+}
+
+.toggle-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transition: transform 0.3s ease;
+}
+
+.toggle-container.is-dark .light-icon {
+  transform: translateX(-100%);
+}
+
+.toggle-container.is-dark .dark-icon {
+  transform: translateX(0);
+}
+
+.toggle-icon {
+  color: $brand-primary;
+  font-size: 20px;
+  width: 50%;
+  text-align: center;
+  position: absolute;
+  transition: transform 0.3s ease;
+}
+
+.light-icon {
+  left: 0;
+  transform: translateX(0);
+}
+
+.dark-icon {
+  right: 0;
+  transform: translateX(100%);
+}
+
+body.body--dark {
+  .dark-mode-toggle {
+    background-color: $brand-dark-bg;
+  }
+}
+</style>