feat: post about Quasar Play

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: [pdanpdan]

components/PostCard.vue

@@ -1,8 +1,8 @@
 <template>
-  <component :is="href ? 'a' : 'section'" class="card" :href="href">
+  <component :is="header ? 'section' : 'a'" class="card" :href="href">
     <script-tag :meta="meta" />
 
-    <article :class="{ active: href }">
+    <article :class="{ active: !header }">
       <img
         v-if="imageSrc"
         class="thumbnail"
@@ -11,8 +11,8 @@
       />
 
       <div class="main">
-        <section class="content">
-          <h2 class="title">{{ title }}</h2>
+        <section class="card__content">
+          <component :is="header ? 'h1' : 'h2'" class="title" :id="titleId">{{ title }}</component>
           <p v-if="excerpt" class="excerpt">{{ excerpt }}</p>
         </section>
 
@@ -73,6 +73,7 @@ export default {
       type: Array,
       default: null,
     },
+    header: Boolean,
   },
 
   components: {
@@ -104,6 +105,10 @@ export default {
       }
       return null;
     },
+
+    titleId() {
+      return `d_${ this.href.split('.')[0].split('/').join('-') }`;
+    },
   },
 };
 </script>
@@ -162,11 +167,11 @@ article
   @media (max-width: 960px)
     padding: 2em 1em 1em 1em
 
-.content
+.card__content
   flex-grow: 1
   padding-inline: 8px
 
-  h2
+  .title
     color: var(--vp-c-brand)
     font-size: 1.2em
     font-weight: bold

components/PostHeader.vue

@@ -1,23 +1,14 @@
 <script setup>
-import { computed } from 'vue';
 import { useData, withBase } from 'vitepress';
 import { data } from 'theme/posts.data.js';
 import PostCard from 'components/PostCard.vue';
 
 const { posts } = data;
 const { page } = useData();
-const postCardData = computed(() => {
-  if (!page.value) {
-    return null;
-  }
-
-  const needle = `/${ withBase(page.value.relativePath.split('.').slice(0, -1).join('.')) }.html`;
-  const post = posts.find((p) => p.href === needle);
-
-  return post ? { ...post, href: null } : post;
-});
+const needle = `/${ withBase(page.value.relativePath.split('.').slice(0, -1).join('.')) }.html`;
+const postCardData = posts.find((p) => p.href === needle);
 </script>
 
 <template>
-  <PostCard v-if="postCardData" v-bind="postCardData" />
+  <PostCard v-if="postCardData" v-bind="postCardData" header />
 </template>

package.json

@@ -7,21 +7,20 @@
     "lint": "eslint --ext .js,.vue,.md ./"
   },
   "dependencies": {
-    "@vueuse/core": "^10.5.0",
-    "quasar": "^2.13.0",
-    "vue": "^3.3.7"
+    "@vueuse/core": "^10.6.1",
+    "vue": "^3.3.8"
   },
   "devDependencies": {
     "@vue/eslint-config-airbnb": "^7.0.0",
-    "eslint": "^8.52.0",
+    "eslint": "^8.54.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-markdown": "^3.0.1",
     "eslint-plugin-vue": "^9.18.1",
     "postcss": "^8.4.31",
     "sass": "^1.69.5",
     "vite-plugin-vitepress-demo": "^2.1.0",
-    "vitepress": "1.0.0-rc.24"
+    "vitepress": "1.0.0-rc.25"
   },
   "pnpm": {
     "peerDependencyRules": {

pages/my-projects/index.md

@@ -21,6 +21,7 @@ Current version of [Quasar is v2 (Vue 3)](https://quasar.dev/), and the Quasar v
 
 This version will be supported for as long as I use it (so at least till the end of 2024).
 
+* Material Design Outlined style for form components (QField, QInput, QSelect)
 * touch directives are reactive
 * new `Interactive` plugin to manage events
 * new `KeyGroupNavigation` directive to manage TAB navigation in containers and roving navigation
@@ -53,6 +54,22 @@ If you need extended support / features / fixes for Quasar v1 please contact me
 * reinstall the packages (`yarn cache clean --pattern quasar && yarn` / `pnpm i`)
 * no other changes are required
 
+## Quasar Play REPL
+
+A Vue REPL for Quasar, featuring:
+- Quasar Framework v2
+- VueRouter
+- VueI18n
+- Pinia
+- JS and/or TS
+
+You can create, share and save projects online in your browser.
+
+Now you have no excuse for not providing a repro in case you have issus :D
+
+* [Code](https://github.com/pdanpdan/quasar-play)
+* [Demo Online](https://pdanpdan.github.io/quasar-play/)
+
 ## Vue Keyboard Trap
 
 A Vue 3 and Vue 2 directive for keyboard navigation / TAB trapping - roving movement and trapping inside container that can greatly improve a11y in your applications.

pages/posts/post_001.md

@@ -1,8 +1,9 @@
 ---
-title: Grouping form elements in Quasar
-description: Explain styling needed to group form elements in Quasar in order to make them look like a single element.
-date: 2023-10-31
-tags: [quasar, css]
+title: Vue REPL for Quasar
+description: Introducing the new Vue REPL for Quasar Framework v2.
+date: 2023-11-19
+tags: [quasar, repl]
+outline: deep
 ---
 
 <script setup>
@@ -11,41 +12,40 @@ import PostHeader from 'components/PostHeader.vue';
 
 <PostHeader />
 
-## Problem description
+## Where?
 
-<demo-block src="./post_001_01.demo.vue" />
+You can access it online at [https://pdanpdan.github.io/quasar-play/](https://pdanpdan.github.io/quasar-play/).
 
+You can check the code at [https://github.com/pdanpdan/quasar-play](https://github.com/pdanpdan/quasar-play).
 
-Post 1 content.
+## Why?
 
-And something else.
+Because sometimes
 
-::: info
-This is an info box.
-:::
+- you need a quick and easy way to test Quasar components
+- you want to create and share ideas and prototypes with someone else
+- you want to check different versions of Quasar Framework, Vue and Typescript
+- you need to provide reproductions for issues
 
-::: tip
-This is a tip.
-:::
+And you want to do it in an easy way, without creating a repository in case of more complex situations.
 
-::: warning
-This is a warning.
-:::
+## Features
 
-::: danger
-This is a dangerous warning.
-:::
+- based on [@vue/repl](https://github.com/vuejs/repl)
+- uses Monaco editor
+- preconfigured for projects using:
+  - Quasar Framework v2
+  - VueRouter
+  - VueI18n
+  - Pinia
+- code can be writter in Javascript or Typescript
+- the result can be shared as URL
+- the result can be downloaded as a full stand-alone Vite 5 project
 
-::: details
-This is a details block.
-:::
+The default example shows how to configure and use all the features in a simple project.
 
-::: danger STOP
-Danger zone, do not proceed
-:::
+## So...
 
-::: details Click me to view the code
-```js
-console.log('Hello, VitePress!');
-```
-:::
+Play with it, I hope you will enjoy it.
+
+But if you find any problems (not related to the editor) or if you have suggestions for new features and improvements please [Create an Issue](https://github.com/pdanpdan/quasar-play/issues/new/choose) or [Open a Discussion](https://github.com/pdanpdan/quasar-play/discussions/new/choose).