@md-plugins/quasar-app-extension-q-press 0.1.0-alpha.26 → 0.1.0-alpha.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +69 -73
- package/package.json +14 -14
- package/src/templates/init/src/markdown/md-plugins/containers/advanced.md +23 -2
- package/src/templates/init/src/markdown/quasar-app-extensions/qpress/overview.md +2 -1
- package/src/templates/init/src/markdown/vite-plugins/vite-md-plugin/advanced.md +2 -1
- package/src/templates/init/src/markdown/vite-plugins/vite-md-plugin/overview.md +1 -0
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
The Ultimate Markdown Solution for the Quasar Framework.
|
|
4
4
|
|
|
5
|
+
See the [documentation](https://md-plugins.netlify.app/quasar-app-extensions/qpress/overview) for more information.
|
|
6
|
+
|
|
5
7
|
## Features
|
|
6
8
|
|
|
7
9
|
- **Markdown**
|
|
@@ -63,25 +65,25 @@ The Ultimate Markdown Solution for the Quasar Framework.
|
|
|
63
65
|
3. Modify your `quasar.config.ts`
|
|
64
66
|
|
|
65
67
|
- ```ts
|
|
66
|
-
import { viteMdPlugin, type MenuItem } from '@md-plugins/vite-md-plugin'
|
|
67
|
-
|
|
68
|
+
import { viteMdPlugin, type MenuItem, type MarkdownOptions } from '@md-plugins/vite-md-plugin'
|
|
68
69
|
|
|
69
70
|
export default defineConfig(async (ctx) => {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
71
|
+
// Dynamically import siteConfig
|
|
72
|
+
const siteConfig = await import('./src/siteConfig')
|
|
73
|
+
const { sidebar } = siteConfig
|
|
74
|
+
return {
|
|
75
|
+
build: {
|
|
76
|
+
vitePlugins: [
|
|
77
|
+
// add this plugin
|
|
78
|
+
[
|
|
79
|
+
viteMdPlugin,
|
|
80
|
+
{
|
|
81
|
+
path: ctx.appPaths.srcDir + '/markdown',
|
|
82
|
+
menu: sidebar as MenuItem[],
|
|
83
|
+
// options: myOptions as MarkdownOptions
|
|
84
|
+
},
|
|
85
|
+
],
|
|
86
|
+
// ...
|
|
85
87
|
```
|
|
86
88
|
|
|
87
89
|
4. Modify your `src/routes/routes.ts`
|
|
@@ -89,59 +91,54 @@ The Ultimate Markdown Solution for the Quasar Framework.
|
|
|
89
91
|
- ```ts
|
|
90
92
|
import type { RouteRecordRaw } from 'vue-router'
|
|
91
93
|
import mdPageList from 'src/markdown/listing'
|
|
94
|
+
const routes = [
|
|
95
|
+
{
|
|
96
|
+
path: '/',
|
|
97
|
+
component: () => import('src/.q-press/layouts/MarkdownLayout.vue'),
|
|
98
|
+
children: [
|
|
99
|
+
// Include the Landing Page route first
|
|
100
|
+
...Object.entries(mdPageList)
|
|
101
|
+
.filter(([key]) => key.includes('landing-page.md'))
|
|
102
|
+
.map(([_key, component]) => ({
|
|
103
|
+
path: '',
|
|
104
|
+
name: 'Landing Page',
|
|
105
|
+
component,
|
|
106
|
+
meta: { fullscreen: true, dark: true },
|
|
107
|
+
})),
|
|
108
|
+
|
|
109
|
+
// Now include all other routes, excluding the landing-page
|
|
110
|
+
...Object.keys(mdPageList)
|
|
111
|
+
.filter((key) => !key.includes('landing-page.md')) // Exclude duplicates
|
|
112
|
+
.map((key) => {
|
|
113
|
+
const acc = {
|
|
114
|
+
path: '',
|
|
115
|
+
component: mdPageList[key],
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
if (acc.path === '') {
|
|
119
|
+
// Remove '.md' from the end of the filename
|
|
120
|
+
const parts = key.substring(1, key.length - 3).split('/')
|
|
121
|
+
const len = parts.length
|
|
122
|
+
const path = parts[len - 2] === parts[len - 1] ? parts.slice(0, len - 1) : parts
|
|
123
|
+
|
|
124
|
+
acc.path = path.join('/')
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
return acc
|
|
128
|
+
}),
|
|
129
|
+
],
|
|
130
|
+
},
|
|
131
|
+
// Always leave this as last one,
|
|
132
|
+
// but you can also remove it
|
|
133
|
+
{
|
|
134
|
+
path: '/:catchAll(._)_',
|
|
135
|
+
component: () => import('pages/ErrorNotFound.vue'),
|
|
136
|
+
},
|
|
137
|
+
] as RouteRecordRaw[]
|
|
138
|
+
|
|
139
|
+
export default routes
|
|
92
140
|
```
|
|
93
141
|
|
|
94
|
-
const routes = [
|
|
95
|
-
{
|
|
96
|
-
path: '/',
|
|
97
|
-
component: () => import('src/.q-press/layouts/MarkdownLayout.vue'),
|
|
98
|
-
children: [
|
|
99
|
-
// Include the Landing Page route first
|
|
100
|
-
...Object.entries(mdPageList)
|
|
101
|
-
.filter(([key]) => key.includes('landing-page.md'))
|
|
102
|
-
.map(([_key, component]) => ({
|
|
103
|
-
path: '',
|
|
104
|
-
name: 'Landing Page',
|
|
105
|
-
component,
|
|
106
|
-
meta: { fullscreen: true, dark: true },
|
|
107
|
-
})),
|
|
108
|
-
|
|
109
|
-
// Now include all other routes, excluding the landing-page
|
|
110
|
-
...Object.keys(mdPageList)
|
|
111
|
-
.filter((key) => !key.includes('landing-page.md')) // Exclude duplicates
|
|
112
|
-
.map((key) => {
|
|
113
|
-
const acc = {
|
|
114
|
-
path: '',
|
|
115
|
-
component: mdPageList[key],
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
if (acc.path === '') {
|
|
119
|
-
// Remove '.md' from the end of the filename
|
|
120
|
-
const parts = key.substring(1, key.length - 3).split('/')
|
|
121
|
-
const len = parts.length
|
|
122
|
-
const path = parts[len - 2] === parts[len - 1] ? parts.slice(0, len - 1) : parts
|
|
123
|
-
|
|
124
|
-
acc.path = path.join('/')
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
return acc
|
|
128
|
-
}),
|
|
129
|
-
],
|
|
130
|
-
|
|
131
|
-
},
|
|
132
|
-
|
|
133
|
-
// Always leave this as last one,
|
|
134
|
-
// but you can also remove it
|
|
135
|
-
{
|
|
136
|
-
path: '/:catchAll(._)_',
|
|
137
|
-
component: () => import('pages/ErrorNotFound.vue'),
|
|
138
|
-
},
|
|
139
|
-
] as RouteRecordRaw[]
|
|
140
|
-
|
|
141
|
-
export default routes
|
|
142
|
-
|
|
143
|
-
````
|
|
144
|
-
|
|
145
142
|
5. Set up for Dark mode support, update your App.vue
|
|
146
143
|
|
|
147
144
|
- ```ts
|
|
@@ -149,13 +146,12 @@ export default routes
|
|
|
149
146
|
<router-view />
|
|
150
147
|
</template>
|
|
151
148
|
|
|
152
|
-
|
|
153
149
|
<script setup lang="ts">
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
150
|
+
import { useDark } from 'src/.q-press/composables/dark'
|
|
151
|
+
const { initDark } = useDark()
|
|
152
|
+
initDark()
|
|
157
153
|
</script>
|
|
158
|
-
|
|
154
|
+
```
|
|
159
155
|
|
|
160
156
|
## Running the App
|
|
161
157
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@md-plugins/quasar-app-extension-q-press",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.27",
|
|
4
4
|
"description": "QPress - The Ultimate Markdown Solution for Quasar Framework",
|
|
5
5
|
"author": "hawkeye64 <galbraith64@gmail.com>",
|
|
6
6
|
"keywords": [
|
|
@@ -29,19 +29,19 @@
|
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@types/markdown-it": "^14.1.2",
|
|
31
31
|
"markdown-it": "^14.1.0",
|
|
32
|
-
"@md-plugins/md-plugin-
|
|
33
|
-
"@md-plugins/md-plugin-
|
|
34
|
-
"@md-plugins/md-plugin-
|
|
35
|
-
"@md-plugins/md-plugin-
|
|
36
|
-
"@md-plugins/md-plugin-
|
|
37
|
-
"@md-plugins/md-plugin-
|
|
38
|
-
"@md-plugins/md-plugin-
|
|
39
|
-
"@md-plugins/md-plugin-
|
|
40
|
-
"@md-plugins/md-plugin-link": "0.1.0-alpha.
|
|
41
|
-
"@md-plugins/md-plugin-
|
|
42
|
-
"@md-plugins/
|
|
43
|
-
"@md-plugins/
|
|
44
|
-
"@md-plugins/vite-md-plugin": "0.1.0-alpha.
|
|
32
|
+
"@md-plugins/md-plugin-frontmatter": "0.1.0-alpha.27",
|
|
33
|
+
"@md-plugins/md-plugin-blockquote": "0.1.0-alpha.27",
|
|
34
|
+
"@md-plugins/md-plugin-containers": "0.1.0-alpha.27",
|
|
35
|
+
"@md-plugins/md-plugin-imports": "0.1.0-alpha.27",
|
|
36
|
+
"@md-plugins/md-plugin-image": "0.1.0-alpha.27",
|
|
37
|
+
"@md-plugins/md-plugin-table": "0.1.0-alpha.27",
|
|
38
|
+
"@md-plugins/md-plugin-inlinecode": "0.1.0-alpha.27",
|
|
39
|
+
"@md-plugins/md-plugin-headers": "0.1.0-alpha.27",
|
|
40
|
+
"@md-plugins/md-plugin-link": "0.1.0-alpha.27",
|
|
41
|
+
"@md-plugins/md-plugin-codeblocks": "0.1.0-alpha.27",
|
|
42
|
+
"@md-plugins/shared": "0.1.0-alpha.27",
|
|
43
|
+
"@md-plugins/md-plugin-title": "0.1.0-alpha.27",
|
|
44
|
+
"@md-plugins/vite-md-plugin": "0.1.0-alpha.27"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@types/markdown-it": "^14.1.2",
|
|
@@ -118,9 +118,10 @@ The following classes are in SCSS format.
|
|
|
118
118
|
}
|
|
119
119
|
|
|
120
120
|
&:not(.markdown-note--tip, .markdown-note--warning, .markdown-note--danger) {
|
|
121
|
-
|
|
121
|
+
color: $brand-light-text;
|
|
122
|
+
background-color: $brand-light-bg;
|
|
122
123
|
border-color: $separator-color;
|
|
123
|
-
.markdown-note__title,
|
|
124
|
+
// .markdown-note__title,
|
|
124
125
|
.markdown-link,
|
|
125
126
|
.markdown-token {
|
|
126
127
|
color: $brand-primary;
|
|
@@ -128,9 +129,14 @@ The following classes are in SCSS format.
|
|
|
128
129
|
.markdown-token {
|
|
129
130
|
border-color: $brand-primary;
|
|
130
131
|
}
|
|
132
|
+
& strong {
|
|
133
|
+
font-weight: 700;
|
|
134
|
+
color: scale-color($brand-light-text, $lightness: 90%);
|
|
135
|
+
}
|
|
131
136
|
}
|
|
132
137
|
|
|
133
138
|
&--tip {
|
|
139
|
+
color: scale-color($positive, $lightness: -40%) !important;
|
|
134
140
|
background-color: scale-color($positive, $lightness: 85%);
|
|
135
141
|
border-color: $positive;
|
|
136
142
|
.markdown-note__title,
|
|
@@ -141,9 +147,14 @@ The following classes are in SCSS format.
|
|
|
141
147
|
.markdown-token {
|
|
142
148
|
border-color: scale-color($positive, $lightness: -40%);
|
|
143
149
|
}
|
|
150
|
+
& strong {
|
|
151
|
+
font-weight: 700;
|
|
152
|
+
color: scale-color($positive, $lightness: 90%);
|
|
153
|
+
}
|
|
144
154
|
}
|
|
145
155
|
|
|
146
156
|
&--warning {
|
|
157
|
+
color: scale-color($warning, $lightness: -40%);
|
|
147
158
|
background-color: scale-color($warning, $lightness: 85%);
|
|
148
159
|
border-color: scale-color($warning, $lightness: -30%);
|
|
149
160
|
.markdown-note__title,
|
|
@@ -154,9 +165,14 @@ The following classes are in SCSS format.
|
|
|
154
165
|
.markdown-token {
|
|
155
166
|
border-color: scale-color($warning, $lightness: -40%);
|
|
156
167
|
}
|
|
168
|
+
& strong {
|
|
169
|
+
font-weight: 700;
|
|
170
|
+
color: scale-color($warning, $lightness: 90%);
|
|
171
|
+
}
|
|
157
172
|
}
|
|
158
173
|
|
|
159
174
|
&--danger {
|
|
175
|
+
color: scale-color($negative, $lightness: -40%);
|
|
160
176
|
background-color: scale-color($negative, $lightness: 90%);
|
|
161
177
|
border-color: $negative;
|
|
162
178
|
.markdown-note__title,
|
|
@@ -167,6 +183,11 @@ The following classes are in SCSS format.
|
|
|
167
183
|
.markdown-token {
|
|
168
184
|
border-color: $negative;
|
|
169
185
|
}
|
|
186
|
+
|
|
187
|
+
& strong {
|
|
188
|
+
font-weight: 700;
|
|
189
|
+
color: scale-color($negative, $lightness: 90%);
|
|
190
|
+
}
|
|
170
191
|
}
|
|
171
192
|
|
|
172
193
|
&--details {
|
|
@@ -101,7 +101,7 @@ Import Q-Press styles:
|
|
|
101
101
|
```ts [maxheight=400px]
|
|
102
102
|
import { defineConfig } from '#q-app/wrappers'
|
|
103
103
|
import type { Plugin } from 'vite'
|
|
104
|
-
import { viteMdPlugin, type MenuItem } from '@md-plugins/vite-md-plugin'
|
|
104
|
+
import { viteMdPlugin, type MenuItem, type MarkdownOptions } from '@md-plugins/vite-md-plugin'
|
|
105
105
|
|
|
106
106
|
export default defineConfig(async (ctx) => {
|
|
107
107
|
// Dynamically import siteConfig
|
|
@@ -117,6 +117,7 @@ export default defineConfig(async (ctx) => {
|
|
|
117
117
|
{
|
|
118
118
|
path: ctx.appPaths.srcDir + '/markdown',
|
|
119
119
|
menu: sidebar as MenuItem[],
|
|
120
|
+
// options: myOptions as MarkdownOptions
|
|
120
121
|
},
|
|
121
122
|
],
|
|
122
123
|
// other plugins...
|
|
@@ -102,7 +102,7 @@ If you’re using the Quasar Framework with Vite, additional configuration is ne
|
|
|
102
102
|
1. Update `quasar.config.(js|ts)`:
|
|
103
103
|
|
|
104
104
|
```typescript
|
|
105
|
-
import { viteMdPlugin } from '@md-plugins/vite-md-plugin'
|
|
105
|
+
import { viteMdPlugin, type MenuItem, type MarkdownOptions } from '@md-plugins/vite-md-plugin'
|
|
106
106
|
import { menu } from './src/assets/menu'; // be sure to create this file
|
|
107
107
|
|
|
108
108
|
export default defineConfig((ctx) => {
|
|
@@ -120,6 +120,7 @@ export default defineConfig((ctx) => {
|
|
|
120
120
|
{
|
|
121
121
|
path: ctx.appPaths.srcDir + '/markdown',
|
|
122
122
|
menu: sidebar as MenuItem[],
|
|
123
|
+
// options: myOptions as MarkdownOptions
|
|
123
124
|
},
|
|
124
125
|
],
|
|
125
126
|
// ...
|