@md-plugins/quasar-app-extension-q-press 0.1.0-beta.21 → 0.1.0-beta.22

package/src/templates/init/src/markdown/other/upgrade-guide.md

@@ -8,10 +8,10 @@ related:
   - vite-plugins/vite-md-plugin/overview
 ---
 
-The `0.1.0` beta line moves the Quasar app extensions, including Q-Press, to the Quasar CLI Vite 3 beta toolchain. It is the right version to use when your Quasar application is being upgraded to `@quasar/app-vite` `>=3.0.0-beta.33`.
+The `0.1.0` beta line moves the Quasar app extensions, including Q-Press, to the Quasar CLI Vite 3 beta toolchain. It is the right version to use when your Quasar application is being upgraded to `@quasar/app-vite` `>=3.0.0-beta.36`.
 
 ::: warning
-Q-Press and the Quasar app extension packages now target Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.33`. They are not intended for Webpack projects or JavaScript-only Quasar projects.
+Q-Press and the Quasar app extension packages now target Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.36`. They are not intended for Webpack projects or JavaScript-only Quasar projects.
 :::
 
 ::: tip
@@ -21,7 +21,7 @@ The core Markdown-it plugins and direct Vite plugins are not Quasar-only. You ca
 ## Before You Upgrade
 
 - For Q-Press or the Quasar app extensions, make sure your app is already on a Quasar Vite setup.
-- For Q-Press or the Quasar app extensions, upgrade the app to `@quasar/app-vite` `>=3.0.0-beta.33`.
+- For Q-Press or the Quasar app extensions, upgrade the app to `@quasar/app-vite` `>=3.0.0-beta.36`.
 - Use TypeScript in the consuming Quasar project when using the Quasar app extensions.
 - Import `defineConfig` in `quasar.config.ts` directly from `@quasar/app-vite`.
 - Use `/// <reference types="@quasar/app-vite/client" />` in `src/env.d.ts`.
@@ -69,13 +69,14 @@ Q-Press applications should not install or import `@md-plugins/shared` directly.
 
 If your project has this dependency, remove it from the consuming app:
 
-```bash
+```tabs
+<<| bash pnpm |>>
 pnpm remove @md-plugins/shared
-# or
+<<| bash npm |>>
 npm uninstall @md-plugins/shared
-# or
+<<| bash yarn |>>
 yarn remove @md-plugins/shared
-# or
+<<| bash bun |>>
 bun remove @md-plugins/shared
 ```
 

package/src/templates/init/src/markdown/quasar-app-extensions/qpress/overview.md

@@ -6,7 +6,7 @@ desc: Q-Press App-Extension for Quasar.
 The Q-Press App Extension is a powerful tool for Quasar developers that simplifies the integration of Markdown content into Quasar applications. It leverages the capabilities of Vite and various Markdown plugins to transform Markdown files into Vue components, enabling a seamless and efficient workflow for content management.
 
 ::: warning
-Q-Press is for Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.33` at this time. TypeScript processing is also required. Do not use if you are using Webpack or have a JavaScript-only project.
+Q-Press is for Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.36` at this time. TypeScript processing is also required. Do not use if you are using Webpack or have a JavaScript-only project.
 :::
 
 ::: tip

package/src/templates/init/src/markdown/quasar-app-extensions/vite-md-plugin-app-ext/overview.md

@@ -9,7 +9,7 @@ related:
 The `viteMdPluginAppExt` is a [Quasar App Extension](https://quasar.dev/app-extensions/introduction) that integrates the `viteMdPlugin` into your Quasar project. This extension allows you to use Markdown files as Vue components, enabling a seamless integration of Markdown content into your Quasar application.
 
 ::: warning
-This app extension targets Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.33`.
+This app extension targets Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.36`.
 :::
 
 ## Key Features

package/src/templates/init/src/pages/Error404.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="qpress-error-page markdown-technical fullscreen text-center q-pa-xl flex flex-center">
+    <section class="qpress-error-page__content" aria-labelledby="qpress-error-title">
+      <p class="qpress-error-page__eyebrow">Page Not Found</p>
+
+      <h1 id="qpress-error-title" class="qpress-error-page__code">404</h1>
+
+      <p class="qpress-error-page__message">
+        The page you are looking for is not available in these docs.
+      </p>
+
+      <q-btn class="qpress-error-page__button q-mt-xl" unelevated to="/" label="Go Home" no-caps />
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'Error404' })
+</script>

package/src/templates/init/src/pages/ErrorNotFound.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="qpress-error-page markdown-technical fullscreen text-center q-pa-xl flex flex-center">
+    <section class="qpress-error-page__content" aria-labelledby="qpress-error-title">
+      <p class="qpress-error-page__eyebrow">Page Not Found</p>
+
+      <h1 id="qpress-error-title" class="qpress-error-page__code">404</h1>
+
+      <p class="qpress-error-page__message">
+        The page you are looking for is not available in these docs.
+      </p>
+
+      <q-btn class="qpress-error-page__button q-mt-xl" unelevated to="/" label="Go Home" no-caps />
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'ErrorNotFound' })
+</script>

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

@@ -663,7 +663,7 @@ body.body--light {
 
 body.body--dark {
   .markdown-api .q-badge {
-    color: $brand-dark;
+    color: $brand-dark-text;
     background-color: $brand-primary;
   }
 

package/src/templates/update/src/_q-press/css/app.scss

@@ -693,3 +693,76 @@ body.body--dark .markdown-card-title {
     border-top-color: color.scale($brand-secondary, $lightness: -30%);
   }
 }
+
+.qpress-error-page {
+  overflow: hidden;
+  color: $brand-light-text;
+  background:
+    radial-gradient(circle at top right, rgba($brand-primary, 0.24), transparent 34rem),
+    linear-gradient(135deg, color.scale($light-bg, $lightness: 8%), $light-bg);
+
+  &__content {
+    width: min(680px, 100%);
+  }
+
+  &__eyebrow {
+    margin: 0 0 10px;
+    color: $brand-secondary;
+    font-family: $font-family-brand;
+    font-size: 0.85rem;
+    font-weight: 700;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+  }
+
+  &__code {
+    margin: 0;
+    color: $brand-primary;
+    font-family: $font-family-brand;
+    font-size: clamp(6rem, 24vw, 18rem);
+    font-weight: 800;
+    line-height: 0.85;
+    text-shadow: 0 20px 52px rgba($brand-primary, 0.22);
+  }
+
+  &__message {
+    max-width: 34rem;
+    margin: 24px auto 0;
+    color: rgba($brand-light-text, 0.78);
+    font-size: clamp(1.25rem, 3vw, 2rem);
+    line-height: 1.35;
+  }
+
+  &__button {
+    color: $brand-light-bg !important;
+    background: $brand-primary !important;
+    border: 1px solid rgba($brand-primary, 0.45);
+    box-shadow: $shadow--small;
+  }
+}
+
+body.body--dark .qpress-error-page {
+  color: $brand-dark-text;
+  background:
+    radial-gradient(circle at top right, rgba($brand-accent, 0.18), transparent 34rem),
+    linear-gradient(135deg, color.scale($brand-dark-bg, $lightness: 8%), $brand-dark-bg);
+
+  .qpress-error-page__eyebrow {
+    color: $brand-accent;
+  }
+
+  .qpress-error-page__code {
+    color: $brand-accent;
+    text-shadow: 0 20px 52px rgba($brand-accent, 0.26);
+  }
+
+  .qpress-error-page__message {
+    color: rgba($brand-dark-text, 0.78);
+  }
+
+  .qpress-error-page__button {
+    color: $brand-dark-bg !important;
+    background: $brand-accent !important;
+    border-color: rgba($brand-accent, 0.5);
+  }
+}

package/src/templates/update/src/_q-press/css/themes/newspaper.scss

@@ -25,10 +25,10 @@ $brand-light-codeblock-text: #333333;
 $brand-dark-codeblock-bg: #1a1a1a;
 $brand-dark-codeblock-text: #e6e6e6;
 
-$header-btn-color--light: #4d4d4d;
-$header-btn-hover-color--light: #1a1a1a;
-$header-btn-color--dark: #999999;
-$header-btn-hover-color--dark: #cccccc;
+$header-btn-color--light: #747efc;
+$header-btn-hover-color--light: #5a63dc;
+$header-btn-color--dark: #aeb6ff;
+$header-btn-hover-color--dark: #d8dcff;
 
 $light-pill: $brand-light;
 $light-text: $brand-light-text;