🎨 Add oxfmt

.github/workflows/ci.yaml

@@ -18,6 +18,6 @@ jobs:
           cache: true
 
       - name: Format
-        run: deno fmt --check
+        run: deno task format:check
       - name: Build
         run: deno task build

.github/workflows/release.yaml

@@ -20,7 +20,7 @@ jobs:
         uses: denoland/setup-deno@667a34cdef165d8d2b2e98dde39547c9daac7282 # v2.0.4
 
       - name: Format
-        run: deno fmt --check
+        run: deno task format:check
       - name: Build
         run: deno task build
 

components/Pagination.vue

@@ -1,6 +1,9 @@
 <template>
   <div
-    v-if="$slidev.configs.showPageCount && !$slidev.configs.disablePageCount?.includes($slidev.nav.currentPage)"
+    v-if="
+      $slidev.configs.showPageCount &&
+      !$slidev.configs.disablePageCount?.includes($slidev.nav.currentPage)
+    "
     class="font-serif text-lg"
   >
     <SlideCurrentNo />

deno.jsonc

@@ -1,15 +1,17 @@
 {
   "minimumDependencyAge": "P2D",
   "tasks": {
+    "format": "oxfmt",
+    "format:check": "oxfmt --check",
     "slidev": "slidev",
     "build": "slidev build example.md",
     "dev": "slidev example.md --open",
     "export": "slidev export example.md",
-    "screenshot": "slidev export example.md --format png"
+    "screenshot": "slidev export example.md --format png",
   },
-  "fmt": {
-    "exclude": ["example.md"],
-    "proseWrap": "preserve"
+  "imports": {
+    "oxfmt": "npm:oxfmt@0.48.0",
   },
-  "nodeModulesDir": "auto"
+  "fmt": false,
+  "nodeModulesDir": "auto",
 }

example.md

@@ -1,11 +1,11 @@
 ---
 theme: ./
 showPageCount: true
-disablePageCount: [1,7,9,11]
+disablePageCount: [1, 7, 9, 11]
 themeConfig:
-  primary: '#39b54a'
+  primary: "#39b54a"
 htmlAttrs:
-  lang: 'ja'
+  lang: "ja"
 ---
 
 # Slidevテーマ Soba
@@ -18,25 +18,29 @@ profileImage: https://img.ryu.app/logo/ryuapp.svg
 ---
 
 # Ryu
+
 フロントエンド開発者
+
 - [Portfolio](https://ryu.app)
 - [GitHub](https://github.com/ryuapp/)
 
 ---
 
 # Sobaとは？
+
 日本語向けのシンプルな[Slidev](https://github.com/slidevjs/slidev)のスライドテーマです
 
 マークダウンでのスライド作成に集中出来るように  
-「**見やすさ**」と「__手軽さ__」を重視した細かい調整を行なっています  
+「**見やすさ**」と「**手軽さ**」を重視した細かい調整を行なっています  
 <br>
+
 ## 調整内容
+
 1. 日本語フォントの使用
-    - 日本語 ⇒ [Noto Sans JP](https://fonts.google.com/noto/specimen/Noto+Sans+JP)
-    - アルファベットや記号 ⇒ [Poppins](https://fonts.google.com/specimen/Poppins)
+   - 日本語 ⇒ [Noto Sans JP](https://fonts.google.com/noto/specimen/Noto+Sans+JP)
+   - アルファベットや記号 ⇒ [Poppins](https://fonts.google.com/specimen/Poppins)
 2. 文字の大きさ、太さ、間隔
 
-
 ---
 
 # Slidevとは？
@@ -48,7 +52,7 @@ Slidevはスライド作成ツールであり、開発者向けに設計され
 - 🎨 **テーマの切り替え** - npm を通じてテーマを共有できる
 - 🧑‍💻 **開発者フレンドリー** - コードハイライト、オートコンプリートによるライブコーディングができる
 - 🤹 **インタラクティブ** - Vue コンポーネントを埋め込んで表現を強化できる
-- 🎥 **録画・撮影** -  録画機能とカメラビューがあります
+- 🎥 **録画・撮影** - 録画機能とカメラビューがあります
 - 📤 **便利** - PDF、PNG、またはホスティング可能な SPA で出力できる
 - 🛠 **カスタマイズ** - Webページで出来る事は何でもできる
 
@@ -62,20 +66,23 @@ layout: section
 ---
 
 # Section
+
 最初のセクション
 
 ---
 layout: center
 ---
 
 # Center
+
 中央揃え
 
 ---
 layout: quote
 ---
 
 # Quote
+
 <blockquote>
   <p>
   深淵を覗く時<br />
@@ -90,13 +97,16 @@ image: /soba.jpg
 ---
 
 # Image-right
+
 右に画像
+
 ---
 layout: image-left
 image: /soba.jpg
 ---
 
 # Image-left
+
 左に画像
 
 ---
@@ -105,23 +115,26 @@ image: /soba.jpg
 ---
 
 # Image
+
 全面に画像
 
 ---
 
 # Code
+
 コードスニペットを利用することで、ハイライトを簡単に実装出来ます
+
 ```ts {|4|6-8|}
 // main.ts
-import { Hono } from 'hono'
+import { Hono } from "hono";
 
-const app = new Hono()
+const app = new Hono();
 
-app.get('/', (c) => {
-  return c.text('Hello Hono!')
-})
+app.get("/", (c) => {
+  return c.text("Hello Hono!");
+});
 
-export default app
+export default app;
 ```
 
 ---

global-bottom.vue

@@ -1,10 +1,10 @@
 import Pagination from './components/Pagination.vue';
 
 <template>
-    <footer class="absolute bottom-0 pb-1 px-3 w-full">
-        <div class="flex justify-between w">
-            <div></div>
-            <Pagination />
-        </div>
-    </footer>
-</template>
+  <footer class="absolute bottom-0 w-full px-3 pb-1">
+    <div class="w flex justify-between">
+      <div></div>
+      <Pagination />
+    </div>
+  </footer>
+</template>

layouts/profile.vue

@@ -1,15 +1,15 @@
 <template>
-    <div class="slidev-layout profile">
-      <div class="my-auto w-full grid grid-cols-2">
-        <div>
-            <slot />
-        </div>
-        <div class="m-12">
-            <img 
-                class="rounded-full aspect-square w-full my-auto" 
-                :src="$attrs.profileImage || '/soba.jpg'"
-            />
-        </div>
+  <div class="slidev-layout profile">
+    <div class="my-auto grid w-full grid-cols-2">
+      <div>
+        <slot />
+      </div>
+      <div class="m-12">
+        <img
+          class="my-auto aspect-square w-full rounded-full"
+          :src="$attrs.profileImage || '/soba.jpg'"
+        />
       </div>
     </div>
-</template>
+  </div>
+</template>