chore: format more files with dprint (#777)

Author: g-plane

.github/workflows/gh-pages.yml

@@ -17,7 +17,7 @@ jobs:
         uses: jetli/[email protected]
         with:
           # Optional version of wasm-pack to install(eg. 'v0.9.1', 'latest')
-          version: 'latest'
+          version: "latest"
 
       - name: Cache Rust Deps
         uses: actions/cache@v4
@@ -40,7 +40,7 @@ jobs:
         with:
           version: 9.15.1
           run_install: |
-              - recursive: true
+            - recursive: true
 
       - name: Vite Build 🔧
         run: pnpm build
@@ -54,13 +54,13 @@ jobs:
     needs: build
     # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
     permissions:
-      pages: write      # to deploy to Pages
-      id-token: write   # to verify the deployment originates from an appropriate source
+      pages: write # to deploy to Pages
+      id-token: write # to verify the deployment originates from an appropriate source
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
     runs-on: ubuntu-latest
     steps:
       - name: Deploy to GitHub Pages 🚀
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v4

.pre-commit-config.yaml

@@ -1,8 +1,8 @@
 repos:
--   repo: https://github.com/doublify/pre-commit-rust
+  - repo: https://github.com/doublify/pre-commit-rust
     rev: v1.0
     hooks:
-    -   id: fmt
-    -   id: cargo-check
-    -   id: clippy
+      - id: fmt
+      - id: cargo-check
+      - id: clippy
         args: ["--all-targets", "--all-features", "--", "-D", "clippy::all"]

dprint.json

@@ -2,10 +2,10 @@
   "$schema": "https://dprint.dev/schemas/v0.json",
   "projectType": "openSource",
   "incremental": true,
+  "lineWidth": 100,
+  "indentWidth": 2,
+  "useTabs": false,
   "typescript": {
-    "useTabs": false,
-    "indentWidth": 2,
-    "lineWidth": 100,
     "semiColons": "asi",
     "quoteStyle": "preferSingle",
     "nextControlFlowPosition": "sameLine",
@@ -20,14 +20,16 @@
     "exportDeclaration.spaceSurroundingNamedExports": true
   },
   "json": {
-    "useTabs": false,
-    "indentWidth": 2,
-    "lineWidth": 100
   },
   "markdown": {
-    "lineWidth": 100,
     "textWrap": "maintain"
   },
+  "malva": {
+    "quotes": "preferSingle",
+    "attrSelector.quotes": "preferDouble"
+  },
+  "yaml": {
+  },
   "includes": [
     "**/*.{ts,tsx,js,jsx,vue,json,md,css,scss,sass,less,html,yaml,yml}"
   ],
@@ -45,6 +47,9 @@
   "plugins": [
     "https://plugins.dprint.dev/typescript-0.93.0.wasm",
     "https://plugins.dprint.dev/json-0.19.3.wasm",
-    "https://plugins.dprint.dev/markdown-0.17.8.wasm"
+    "https://plugins.dprint.dev/markdown-0.17.8.wasm",
+    "https://plugins.dprint.dev/g-plane/malva-v0.13.1.wasm",
+    "https://plugins.dprint.dev/g-plane/markup_fmt-v0.23.0.wasm",
+    "https://plugins.dprint.dev/g-plane/pretty_yaml-v0.5.1.wasm"
   ]
 }

package.json

@@ -35,4 +35,4 @@
     "vitepress": "1.6.3",
     "vue-tsc": "3.0.1"
   }
-}
+}

website/.vitepress/theme/custom.css

@@ -7,11 +7,10 @@
   --vp-c-brand-3: #2f4f6d;
   --vp-custom-selector-option-text: #213547;
 
-
   --vp-custom-block-tip-text: var(--vp-c-text-1);
   --vp-custom-block-tip-bg: var(--vp-c-green-soft);
   --vp-custom-block-tip-code-bg: var(--vp-c-green-soft);
 }
 .dark {
   --vp-custom-selector-option-text: #213547;
-}
+}

website/src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { onMounted, onUnmounted, shallowRef } from 'vue'
 import Intro from './components/Intro.vue'
 import Toast from './components/utils/Toast.vue'
-import { shallowRef, onMounted, onUnmounted } from 'vue'
 // vitepress SSR does not support Monaco, lazy load on client side
 let playground = shallowRef<unknown>(null)
 
@@ -31,21 +31,32 @@ onUnmounted(() => {
 
 <template>
   <div class="root">
-    <Intro/>
+    <Intro />
     <Suspense>
-      <component v-if="playground" :is="playground"/>
+      <component v-if="playground" :is="playground" />
       <div class="loading" v-else>
-        <svg class="lightning-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="120" viewBox="0 10 100 120">
-          <g transform="matrix(1,0,0,1,0,22)" >
-          <polygon xmlns="http://www.w3.org/2000/svg" points="100,0 25,50 43.75,62.5 0,100 75,62.5 56.25,50"></polygon>
+        <svg
+          class="lightning-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          width="100"
+          height="120"
+          viewBox="0 10 100 120"
+        >
+          <g transform="matrix(1,0,0,1,0,22)">
+            <polygon
+              xmlns="http://www.w3.org/2000/svg"
+              points="100,0 25,50 43.75,62.5 0,100 75,62.5 56.25,50"
+            >
+            </polygon>
           </g>
         </svg>
         <h2>
           Loading Editor and Parser...
         </h2>
       </div>
     </Suspense>
-    <Toast/>
+    <Toast />
   </div>
 </template>
 
@@ -128,4 +139,4 @@ h2 {
   transform: rotate(-10deg);
   animation: linear 4s lightning-flash forwards infinite;
 }
-</style>
+</style>

website/src/BlogIndex.vue

@@ -11,13 +11,11 @@ function getDateTime(time: number) {
   <ul class="blog-list">
     <li class="blog-entry" v-for="post of posts">
       <article>
-        <time :datetime="getDateTime(post.date.time)">{{
-          post.date.string
-        }}</time>
+        <time :datetime="getDateTime(post.date.time)">{{ post.date.string }}</time>
         <h2 class="title">
           <a :href="post.url">{{ post.title }}</a>
         </h2>
-        <i class="description">{{post.description}}</i>
+        <i class="description">{{ post.description }}</i>
       </article>
     </li>
   </ul>
@@ -53,4 +51,4 @@ function getDateTime(time: number) {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-</style>
+</style>

website/src/Homepage.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import { useData } from 'vitepress'
 import Theme from 'vitepress/theme'
+import { nextTick, provide } from 'vue'
+import Ecosystem from './homepage/Ecosystem.vue'
 import Features from './homepage/Features.vue'
 import Languages from './homepage/Languages.vue'
-import Ecosystem from './homepage/Ecosystem.vue'
-import { useData } from 'vitepress'
-import { nextTick, provide } from 'vue'
 
 const { isDark } = useData()
 
@@ -35,4 +35,4 @@ provide('toggle-appearance', async () => {
       <Ecosystem />
     </template>
   </Theme.Layout>
-</template>
+</template>

website/src/catalog/Option.vue

@@ -29,4 +29,4 @@ defineProps({
 .highlight {
   border-color: var(--vp-c-text-3);
 }
-</style>
+</style>

website/src/catalog/RuleFilter.vue

@@ -1,13 +1,7 @@
 <script setup lang="ts">
-import { watchEffect, ref } from 'vue'
+import { ref, watchEffect } from 'vue'
+import { features, type Filter, languages, ruleFilters, ruleTypes } from './data'
 import Option from './Option.vue'
-import {
-  languages,
-  ruleFilters,
-  features,
-  ruleTypes,
-  type Filter,
-} from './data'
 
 const model = defineModel<Filter>()
 
@@ -25,29 +19,28 @@ watchEffect(() => {
 watchEffect(() => {
   filter.value = model.value!
 })
-
 </script>
 <template>
   <form class="filters">
     <details open>
       <summary>📚 Example Language</summary>
       <div class="checkbox-group">
-        <label v-for="displayName, lang in languages" :key="lang">
+        <label v-for="(displayName, lang) in languages" :key="lang">
           <input type="checkbox" v-model="filter.selectedLanguages" :value="lang">
-          <Option :text="displayName" class="filter-option"/>
+          <Option :text="displayName" class="filter-option" />
         </label>
       </div>
     </details>
 
     <details open>
       <summary>📏 Used Rule</summary>
       <div class="filter-group rule-filter-group">
-        <div v-for="rules, type in ruleFilters">
-          <em style="text-transform: capitalize;">{{ type }}</em>
+        <div v-for="(rules, type) in ruleFilters">
+          <em style="text-transform: capitalize">{{ type }}</em>
           <div class="checkbox-group">
             <label v-for="rule in rules" :key="rule">
               <input type="checkbox" v-model="filter.selectedRules" :value="rule">
-              <Option :text="rule" class="filter-option"/>
+              <Option :text="rule" class="filter-option" />
             </label>
           </div>
         </div>
@@ -56,7 +49,7 @@ watchEffect(() => {
           <div class="checkbox-group">
             <label v-for="type in ruleTypes" :key="type">
               <input type="checkbox" v-model="filter.selectedTypes" :value="type">
-              <Option :text="type" class="filter-option"/>
+              <Option :text="type" class="filter-option" />
             </label>
           </div>
         </div>
@@ -71,7 +64,7 @@ watchEffect(() => {
           <div class="checkbox-group">
             <label v-for="feature in features" :key="feature">
               <input type="checkbox" v-model="filter.selectedFeatures" :value="feature">
-              <Option :text="feature" class="filter-option"/>
+              <Option :text="feature" class="filter-option" />
             </label>
           </div>
         </div>
@@ -150,11 +143,11 @@ input[type="checkbox"]:checked + code.option:hover {
 
 @keyframes details-show {
   from {
-    opacity:0;
+    opacity: 0;
     transform: translateY(-0.5em);
   }
 }
 details[open] > *:not(summary) {
   animation: details-show 0.2s ease-in-out;
 }
-</style>
+</style>