@md-plugins/quasar-app-extension-q-press 0.1.0-alpha.18 → 0.1.0-alpha.20

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 CHANGED
@@ -11,6 +11,7 @@ The Ultimate Markdown Solution for the Quasar Framework.
11
11
  - **Markdown Components**
12
12
  - **siteConfig**
13
13
  - **CSS Themes**
14
+ - **Automatic Routing**
14
15
 
15
16
  ## Installation
16
17
 
@@ -45,7 +46,9 @@ The Ultimate Markdown Solution for the Quasar Framework.
45
46
  1. Modify your `src/css/quasar.variables.scss`
46
47
 
47
48
  - import a Q-Press theme (`default`, `sunrise`, `newspaper`, `tawny`, `mystic`, your own or a 3rd-party theme)
48
- - `@import '../.q-press/css/themes/sunrise.scss';`
49
+ - ```ts
50
+ @import '../.q-press/css/themes/sunrise.scss';
51
+ ```
49
52
 
50
53
  2. Modify your `src/css/app.scss`
51
54
 
@@ -57,101 +60,98 @@ The Ultimate Markdown Solution for the Quasar Framework.
57
60
  @import '../.q-press/css/prism-theme.scss';
58
61
  ```
59
62
 
60
- ````
61
-
62
63
  3. Modify your `quasar.config.ts`
63
64
 
64
65
  - ```ts
65
- import { viteMdPlugin, type MenuItem } from '@md-plugins/vite-md-plugin'
66
+ import { viteMdPlugin, type MenuItem } from '@md-plugins/vite-md-plugin'
67
+
66
68
 
67
- export default defineConfig(async (ctx) => {
68
- // Dynamically import siteConfig
69
- const siteConfig = await import('./src/siteConfig')
70
- const { sidebar } = siteConfig
71
- return {
69
+ export default defineConfig(async (ctx) => {
70
+ // Dynamically import siteConfig
71
+ const siteConfig = await import('./src/siteConfig')
72
+ const { sidebar } = siteConfig
73
+ return {
72
74
  build: {
73
- vitePlugins: [
74
- // add this plugin
75
- [
76
- viteMdPlugin,
77
- {
78
- path: ctx.appPaths.srcDir + '/markdown',
79
- menu: sidebar as MenuItem[],
80
- },
81
- ],
82
- // ...
83
- ````
75
+ vitePlugins: [
76
+ // add this plugin
77
+ [
78
+ viteMdPlugin,
79
+ {
80
+ path: ctx.appPaths.srcDir + '/markdown',
81
+ menu: sidebar as MenuItem[],
82
+ },
83
+ ],
84
+ // ...
85
+ ```
84
86
 
85
87
  4. Modify your `src/routes/routes.ts`
86
88
 
87
89
  - ```ts
88
90
  import mdPageList from 'src/markdown/listing'
89
- ```
90
91
 
91
- const routes = [
92
- {
93
- path: '/',
94
- component: () => import('src/.q-press/layouts/MarkdownLayout.vue'),
95
- children: [
96
- // Include the Landing Page route first
97
- ...Object.entries(mdPageList)
98
- .filter(([key]) => key.includes('landing-page.md'))
99
- .map(([_key, component]) => ({
100
- path: '',
101
- name: 'Landing Page',
102
- component,
103
- meta: { fullscreen: true, dark: true },
104
- })),
105
-
106
- // Now include all other routes, excluding the landing-page
107
- ...Object.keys(mdPageList)
108
- .filter((key) => !key.includes('landing-page.md')) // Exclude duplicates
109
- .map((key) => {
110
- const acc = {
92
+ const routes = [
93
+ {
94
+ path: '/',
95
+ component: () => import('src/.q-press/layouts/MarkdownLayout.vue'),
96
+ children: [
97
+ // Include the Landing Page route first
98
+ ...Object.entries(mdPageList)
99
+ .filter(([key]) => key.includes('landing-page.md'))
100
+ .map(([_key, component]) => ({
111
101
  path: '',
112
- component: mdPageList[key],
113
- }
114
-
115
- if (acc.path === '') {
116
- // Remove '.md' from the end of the filename
117
- const parts = key.substring(1, key.length - 3).split('/')
118
- const len = parts.length
119
- const path = parts[len - 2] === parts[len - 1] ? parts.slice(0, len - 1) : parts
120
-
121
- acc.path = path.join('/')
122
- }
123
-
124
- return acc
125
- }),
126
- ],
127
-
128
- },
129
-
130
- // Always leave this as last one,
131
- // but you can also remove it
132
- {
133
- path: '/:catchAll(._)_',
134
- component: () => import('pages/ErrorNotFound.vue'),
135
- },
136
- ]
102
+ name: 'Landing Page',
103
+ component,
104
+ meta: { fullscreen: true, dark: true },
105
+ })),
106
+
107
+ // Now include all other routes, excluding the landing-page
108
+ ...Object.keys(mdPageList)
109
+ .filter((key) => !key.includes('landing-page.md')) // Exclude duplicates
110
+ .map((key) => {
111
+ const acc = {
112
+ path: '',
113
+ component: mdPageList[key],
114
+ }
115
+
116
+ if (acc.path === '') {
117
+ // Remove '.md' from the end of the filename
118
+ const parts = key.substring(1, key.length - 3).split('/')
119
+ const len = parts.length
120
+ const path = parts[len - 2] === parts[len - 1] ? parts.slice(0, len - 1) : parts
121
+
122
+ acc.path = path.join('/')
123
+ }
124
+
125
+ return acc
126
+ }),
127
+ ],
128
+ },
137
129
 
138
- export default routes
130
+ // Always leave this as last one,
131
+ // but you can also remove it
132
+ {
133
+ path: '/:catchAll(._)_',
134
+ component: () => import('pages/ErrorNotFound.vue'),
135
+ },
136
+ ]
139
137
 
140
- ````
138
+ export default routes
139
+ ```
141
140
 
142
141
  5. Set up for Dark mode support, update your App.vue
143
142
 
144
- - ```ts
145
- <template>
146
- <router-view />
147
- </template>
143
+ - ```ts
144
+ <template>
145
+ <router-view />
146
+ </template>
148
147
 
149
- <script setup lang="ts">
150
- import { useDark } from 'src/.q-press/composables/dark'
151
- const { initDark } = useDark()
152
- initDark()
153
- </script>
154
- ````
148
+
149
+ <script setup lang="ts">
150
+ import { useDark } from 'src/.q-press/composables/dark'
151
+ const { initDark } = useDark()
152
+ initDark()
153
+ </script>
154
+ ```
155
155
 
156
156
  ## Running the App
157
157
 
@@ -161,11 +161,11 @@ All you need to do now is change the configuration and landing page to make it y
161
161
 
162
162
  ## Configuration
163
163
 
164
- ### `src/siteConfig/index.ts`
164
+ ### Modify `src/siteConfig/index.ts`
165
165
 
166
166
  1. Make any appropriate changes to the `siteConfig.ts` file
167
167
 
168
- ### `src/components/LandingPage/LandingPage.vue`
168
+ ### Modify `src/components/LandingPage/LandingPage.vue`
169
169
 
170
170
  1. Update the `LandingPage.vue` file to include your own content
171
171
 
@@ -233,3 +233,11 @@ In case this README falls out of date, please refer to the [documentation](https
233
233
  ## License
234
234
 
235
235
  This project is licensed under the MIT License. See the [LICENSE](LICENSE.md) file for details.
236
+
237
+ ```
238
+
239
+ ```
240
+
241
+ ```
242
+
243
+ ```
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.18",
3
+ "version": "0.1.0-alpha.20",
4
4
  "description": "QPress - The Ultimate Markdown Solution for Quasar Framework",
5
5
  "author": "hawkeye64 <galbraith64@gmail.com>",
6
6
  "keywords": [
@@ -29,23 +29,23 @@
29
29
  "dependencies": {
30
30
  "@types/markdown-it": "^14.1.2",
31
31
  "markdown-it": "^14.1.0",
32
- "@md-plugins/md-plugin-blockquote": "0.1.0-alpha.18",
33
- "@md-plugins/md-plugin-codeblocks": "0.1.0-alpha.18",
34
- "@md-plugins/md-plugin-headers": "0.1.0-alpha.18",
35
- "@md-plugins/md-plugin-frontmatter": "0.1.0-alpha.18",
36
- "@md-plugins/md-plugin-imports": "0.1.0-alpha.18",
37
- "@md-plugins/md-plugin-inlinecode": "0.1.0-alpha.18",
38
- "@md-plugins/md-plugin-table": "0.1.0-alpha.18",
39
- "@md-plugins/md-plugin-containers": "0.1.0-alpha.18",
40
- "@md-plugins/md-plugin-image": "0.1.0-alpha.18",
41
- "@md-plugins/md-plugin-title": "0.1.0-alpha.18",
42
- "@md-plugins/shared": "0.1.0-alpha.18",
43
- "@md-plugins/md-plugin-link": "0.1.0-alpha.18",
44
- "@md-plugins/vite-md-plugin": "0.1.0-alpha.18"
32
+ "@md-plugins/md-plugin-frontmatter": "0.1.0-alpha.20",
33
+ "@md-plugins/md-plugin-containers": "0.1.0-alpha.20",
34
+ "@md-plugins/md-plugin-blockquote": "0.1.0-alpha.20",
35
+ "@md-plugins/md-plugin-codeblocks": "0.1.0-alpha.20",
36
+ "@md-plugins/md-plugin-headers": "0.1.0-alpha.20",
37
+ "@md-plugins/md-plugin-image": "0.1.0-alpha.20",
38
+ "@md-plugins/md-plugin-imports": "0.1.0-alpha.20",
39
+ "@md-plugins/md-plugin-inlinecode": "0.1.0-alpha.20",
40
+ "@md-plugins/md-plugin-link": "0.1.0-alpha.20",
41
+ "@md-plugins/md-plugin-table": "0.1.0-alpha.20",
42
+ "@md-plugins/md-plugin-title": "0.1.0-alpha.20",
43
+ "@md-plugins/vite-md-plugin": "0.1.0-alpha.20",
44
+ "@md-plugins/shared": "0.1.0-alpha.20"
45
45
  },
46
46
  "devDependencies": {
47
47
  "@types/markdown-it": "^14.1.2",
48
- "fs-extra": "^11.2.0",
48
+ "fs-extra": "^11.3.0",
49
49
  "vite": "^6.0.7"
50
50
  },
51
51
  "peerDependencies": {
@@ -77,6 +77,7 @@ ul {
77
77
  .markdown-token {
78
78
  display: inline-block;
79
79
  padding: 4px 6px;
80
+ margin: 1px 0;
80
81
  font-size: $font-size;
81
82
  line-height: $font-size;
82
83
  border-radius: $generic-border-radius;
@@ -203,19 +204,19 @@ ul {
203
204
  }
204
205
 
205
206
  .markdown-h2 {
206
- font-size: 1.8em;
207
+ font-size: 1.8em !important;
207
208
  font-weight: 600;
208
209
  padding-bottom: 8px !important;
209
210
  border-bottom: 1px solid $separator-color;
210
211
  }
211
212
 
212
213
  .markdown-h3 {
213
- font-size: 1.6em;
214
+ font-size: 1.6em !important;
214
215
  font-weight: 500;
215
216
  }
216
217
 
217
218
  .markdown-h4 {
218
- font-size: 1.4em;
219
+ font-size: 1.4em !important;
219
220
  font-weight: 500;
220
221
  &:before {
221
222
  content: '» ';
@@ -224,7 +225,7 @@ ul {
224
225
  }
225
226
 
226
227
  .markdown-h5 {
227
- font-size: 1em;
228
+ font-size: 1em !important;
228
229
  font-weight: 500;
229
230
  &:before {
230
231
  content: '»» ';
@@ -233,7 +234,7 @@ ul {
233
234
  }
234
235
 
235
236
  .markdown-h6 {
236
- font-size: 1em;
237
+ font-size: 1em !important;
237
238
  font-weight: 400;
238
239
  &:before {
239
240
  content: '»»» ';
@@ -243,19 +244,19 @@ ul {
243
244
 
244
245
  @media (max-width: 850px) {
245
246
  .markdown-h1 {
246
- font-size: 1.7em;
247
+ font-size: 1.7em !important;
247
248
  }
248
249
  .markdown-h2 {
249
- font-size: 1.4em;
250
+ font-size: 1.4em !important;
250
251
  }
251
252
  .markdown-h3 {
252
- font-size: 1.3em;
253
+ font-size: 1.3em !important;
253
254
  }
254
255
  .markdown-h4 {
255
- font-size: 1.2em;
256
+ font-size: 1.2em !important;
256
257
  }
257
258
  .markdown-h5 {
258
- font-size: 1.1em;
259
+ font-size: 1.1em !important;
259
260
  }
260
261
  }
261
262
 
@@ -164,7 +164,7 @@ By default, the `headers` plugin applies specific CSS classes to different level
164
164
 
165
165
  ```scss
166
166
  .markdown-h1 {
167
- font-size: 2.4em;
167
+ font-size: 2.4em !important;
168
168
  font-weight: 700;
169
169
  margin: 0 0 1em !important;
170
170
  display: flex;
@@ -172,19 +172,19 @@ By default, the `headers` plugin applies specific CSS classes to different level
172
172
  }
173
173
 
174
174
  .markdown-h2 {
175
- font-size: 1.8em;
175
+ font-size: 1.8em !important;
176
176
  font-weight: 600;
177
177
  padding-bottom: 8px !important;
178
178
  border-bottom: 1px solid $separator-color;
179
179
  }
180
180
 
181
181
  .markdown-h3 {
182
- font-size: 1.6em;
182
+ font-size: 1.6em !important;
183
183
  font-weight: 500;
184
184
  }
185
185
 
186
186
  .markdown-h4 {
187
- font-size: 1.4em;
187
+ font-size: 1.4em !important;
188
188
  font-weight: 500;
189
189
  &:before {
190
190
  content: '» ';
@@ -193,7 +193,7 @@ By default, the `headers` plugin applies specific CSS classes to different level
193
193
  }
194
194
 
195
195
  .markdown-h5 {
196
- font-size: 1em;
196
+ font-size: 1em !important;
197
197
  font-weight: 500;
198
198
  &:before {
199
199
  content: '»» ';
@@ -202,7 +202,7 @@ By default, the `headers` plugin applies specific CSS classes to different level
202
202
  }
203
203
 
204
204
  .markdown-h6 {
205
- font-size: 1em;
205
+ font-size: 1em !important;
206
206
  font-weight: 400;
207
207
  &:before {
208
208
  content: '»»» ';
@@ -212,19 +212,19 @@ By default, the `headers` plugin applies specific CSS classes to different level
212
212
 
213
213
  @media (max-width: 850px) {
214
214
  .markdown-h1 {
215
- font-size: 1.7em;
215
+ font-size: 1.7em !important;
216
216
  }
217
217
  .markdown-h2 {
218
- font-size: 1.4em;
218
+ font-size: 1.4em !important;
219
219
  }
220
220
  .markdown-h3 {
221
- font-size: 1.3em;
221
+ font-size: 1.3em !important;
222
222
  }
223
223
  .markdown-h4 {
224
- font-size: 1.2em;
224
+ font-size: 1.2em !important;
225
225
  }
226
226
  .markdown-h5 {
227
- font-size: 1.1em;
227
+ font-size: 1.1em !important;
228
228
  }
229
229
  }
230
230
  ```
@@ -196,6 +196,35 @@ Update your `App.vue`:
196
196
  </script>
197
197
  ```
198
198
 
199
+ ### Set Up for Meta Tags
200
+
201
+ This is optional, but it's recommended to set up meta tags for SEO and social media sharing, and especially for SSR.
202
+
203
+ Update your `App.vue`:
204
+
205
+ ```ts
206
+ <template>
207
+ <router-view />
208
+ </template>
209
+
210
+ <script setup lang="ts">
211
+ // don't forget to add the Quasar 'Meta' plugin into your quasar.config file!
212
+ import { useMeta } from 'quasar'
213
+ import getMeta from 'src/.q-press/assets/get-meta'
214
+
215
+ // You can use the `getMeta` function to get the meta tags for your page and provide default values
216
+ useMeta({
217
+ title: 'MD-Plugins for Vue and Quasar',
218
+ titleTemplate: (title) => `${title} | MD-Plugins`,
219
+
220
+ meta: getMeta(
221
+ 'MD-Plugins - Build markdown user interfaces in record time',
222
+ 'MD-Plugins is a collection of Markdown and Vite plugins that make it easy to build markdown user interfaces in Vue and Quasar applications.',
223
+ ),
224
+ })
225
+ </script>
226
+ ```
227
+
199
228
  ## FAQ
200
229
 
201
230
  :::details Q. I have errors in my`routes.ts` file, what should I do?
@@ -77,6 +77,7 @@ ul {
77
77
  .markdown-token {
78
78
  display: inline-block;
79
79
  padding: 4px 6px;
80
+ margin: 1px 0;
80
81
  font-size: $font-size;
81
82
  line-height: $font-size;
82
83
  border-radius: $generic-border-radius;
@@ -203,19 +204,19 @@ ul {
203
204
  }
204
205
 
205
206
  .markdown-h2 {
206
- font-size: 1.8em;
207
+ font-size: 1.8em !important;
207
208
  font-weight: 600;
208
209
  padding-bottom: 8px !important;
209
210
  border-bottom: 1px solid $separator-color;
210
211
  }
211
212
 
212
213
  .markdown-h3 {
213
- font-size: 1.6em;
214
+ font-size: 1.6em !important;
214
215
  font-weight: 500;
215
216
  }
216
217
 
217
218
  .markdown-h4 {
218
- font-size: 1.4em;
219
+ font-size: 1.4em !important;
219
220
  font-weight: 500;
220
221
  &:before {
221
222
  content: '» ';
@@ -224,7 +225,7 @@ ul {
224
225
  }
225
226
 
226
227
  .markdown-h5 {
227
- font-size: 1em;
228
+ font-size: 1em !important;
228
229
  font-weight: 500;
229
230
  &:before {
230
231
  content: '»» ';
@@ -233,7 +234,7 @@ ul {
233
234
  }
234
235
 
235
236
  .markdown-h6 {
236
- font-size: 1em;
237
+ font-size: 1em !important;
237
238
  font-weight: 400;
238
239
  &:before {
239
240
  content: '»»» ';
@@ -243,19 +244,19 @@ ul {
243
244
 
244
245
  @media (max-width: 850px) {
245
246
  .markdown-h1 {
246
- font-size: 1.7em;
247
+ font-size: 1.7em !important;
247
248
  }
248
249
  .markdown-h2 {
249
- font-size: 1.4em;
250
+ font-size: 1.4em !important;
250
251
  }
251
252
  .markdown-h3 {
252
- font-size: 1.3em;
253
+ font-size: 1.3em !important;
253
254
  }
254
255
  .markdown-h4 {
255
- font-size: 1.2em;
256
+ font-size: 1.2em !important;
256
257
  }
257
258
  .markdown-h5 {
258
- font-size: 1.1em;
259
+ font-size: 1.1em !important;
259
260
  }
260
261
  }
261
262