chore: update reset styles and format code

scalar · Jun 21, 2024 · 637c859 · 637c859
1 parent 208479a
commit 637c859
Show file tree

Hide file tree

Showing 23 changed files with 2,778 additions and 3,215 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -1,13 +1,13 @@
 version: 2
 
 updates:
-  - package-ecosystem: "github-actions"
-    directory: "/"
+  - package-ecosystem: 'github-actions'
+    directory: '/'
     schedule:
-      interval: "daily"
-  - package-ecosystem: "npm"
-    directory: "/"
+      interval: 'daily'
+  - package-ecosystem: 'npm'
+    directory: '/'
     schedule:
-      interval: "daily"
+      interval: 'daily'
     allow:
-      - dependency-name: "@scalar/*"
+      - dependency-name: '@scalar/*'
diff --git a/.github/workflows/automerge.yml b/.github/workflows/automerge.yml
@@ -14,7 +14,7 @@ jobs:
         id: metadata
         uses: dependabot/fetch-metadata@v1
         with:
-          github-token: "${{ secrets.GITHUB_TOKEN }}"
+          github-token: '${{ secrets.GITHUB_TOKEN }}'
       - name: Approve PR
         if: contains(steps.metadata.outputs.dependency-names, '@scalar')
         run: gh pr review --approve "$PR_URL"
@@ -26,4 +26,4 @@ jobs:
         run: gh pr merge --auto --squash "$PR_URL"
         env:
           PR_URL: ${{github.event.pull_request.html_url}}
-          GH_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          GH_TOKEN: ${{secrets.GITHUB_TOKEN}}
diff --git a/.prettierrc b/.prettierrc
@@ -1,9 +1,13 @@
 {
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
   "trailingComma": "all",
   "quoteProps": "consistent",
   "tabWidth": 2,
   "semi": false,
   "singleQuote": true,
   "singleAttributePerLine": true,
-  "bracketSameLine": true
+  "bracketSameLine": true,
+  "importOrder": ["^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
 }
diff --git a/db/schema.ts b/db/schema.ts
@@ -1,5 +1,5 @@
-import { text, integer, sqliteTable } from 'drizzle-orm/sqlite-core'
 import { sql } from 'drizzle-orm'
+import { integer, sqliteTable, text } from 'drizzle-orm/sqlite-core'
 
 export const Specs = sqliteTable('Specs', {
   id: text('id').primaryKey(),

diff --git a/functions/api/share.ts b/functions/api/share.ts
@@ -1,7 +1,8 @@
+import { sql } from 'drizzle-orm'
 import { drizzle } from 'drizzle-orm/d1'
+import { customAlphabet, nanoid } from 'nanoid'
+
 import { Specs } from '../../db/schema'
-import { nanoid, customAlphabet } from 'nanoid'
-import { sql } from 'drizzle-orm'
 
 export interface Env {
   // If you set another name in wrangler.toml as the value for 'binding',

diff --git a/functions/api/share/[id].ts b/functions/api/share/[id].ts
@@ -1,6 +1,7 @@
+import { sql } from 'drizzle-orm'
 import { drizzle } from 'drizzle-orm/d1'
+
 import { Specs } from '../../../db/schema'
-import { sql } from 'drizzle-orm'
 
 export interface Env {
   // If you set another name in wrangler.toml as the value for 'binding',

diff --git a/functions/files/[[id]].ts b/functions/files/[[id]].ts
@@ -1,8 +1,9 @@
-import { drizzle } from 'drizzle-orm/d1'
-import { Specs } from '../../db/schema'
+import { normalize } from '@scalar/openapi-parser'
 import { sql } from 'drizzle-orm'
+import { drizzle } from 'drizzle-orm/d1'
 import YAML from 'yaml'
-import { normalize } from '@scalar/openapi-parser'
+
+import { Specs } from '../../db/schema'
 
 export interface Env {
   // If you set another name in wrangler.toml as the value for 'binding',

diff --git a/index.html b/index.html
@@ -2,14 +2,30 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="https://scalar.com/favicon.svg">
-    <link rel="icon" type="image/png" href="https://scalar.com/favicon.png">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="https://scalar.com/favicon.svg" />
+    <link
+      rel="icon"
+      type="image/png"
+      href="https://scalar.com/favicon.png" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0" />
     <title>Scalar Sandbox</title>
-    <script src="https://cdn.usefathom.com/script.js" data-spa="auto" data-site="MDCOXGFH" defer></script>
+    <script
+      src="https://cdn.usefathom.com/script.js"
+      data-spa="auto"
+      data-site="MDCOXGFH"
+      defer></script>
   </head>
   <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <div
+      id="app"
+      class="scalar-app"></div>
+    <script
+      type="module"
+      src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/migrations/meta/0000_snapshot.json b/migrations/meta/0000_snapshot.json
@@ -49,4 +49,4 @@
     "tables": {},
     "columns": {}
   }
-}
+}
diff --git a/migrations/meta/0001_snapshot.json b/migrations/meta/0001_snapshot.json
@@ -56,4 +56,4 @@
     "tables": {},
     "columns": {}
   }
-}
+}
diff --git a/migrations/meta/_journal.json b/migrations/meta/_journal.json
@@ -17,4 +17,4 @@
       "breakpoints": true
     }
   ]
-}
+}
diff --git a/package.json b/package.json
@@ -12,7 +12,9 @@
     "db:generate": "drizzle-kit generate:sqlite --schema=./db/schema.ts --out=./migrations",
     "db:migrate": "wrangler d1 migrations apply DB --local",
     "db:migrate:production": "wrangler d1 migrations apply DB",
-    "db:up": "drizzle-kit up:sqlite"
+    "db:up": "drizzle-kit up:sqlite",
+    "format": "pnpm prettier --write .",
+    "format:check": "pnpm prettier --check ."
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.17",
@@ -30,6 +32,7 @@
     "yaml": "^2.3.4"
   },
   "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@vitejs/plugin-vue": "^5.0.3",
     "concurrently": "^8.2.2",
     "drizzle-kit": "^0.20.13",

diff --git a/src/.eslintrc.js b/src/.eslintrc.js
@@ -80,4 +80,4 @@ module.exports = {
       },
     ],
   },
-};
+}
diff --git a/src/App.vue b/src/App.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import { ApiReference } from '@scalar/api-reference'
-import MonacoEditor from './components/MonacoEditor.vue'
-import FileDrop from './components/FileDrop.vue'
-import DarkModeToggle from './components/DarkModeToggle.vue'
-import { ref, reactive, watch, onMounted, onUnmounted } from 'vue'
+import { useMediaQuery } from '@vueuse/core'
+import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import ShareButton from './components/ShareButton.vue'
 import { Toaster, toast } from 'vue-sonner'
-import { useMediaQuery } from '@vueuse/core'
-import ModeToggleButton from './components/ModeToggleButton.vue'
+
+import DarkModeToggle from './components/DarkModeToggle.vue'
+import FileDrop from './components/FileDrop.vue'
 import GitHubLogo from './components/GithubLogo.vue'
+import ModeToggleButton from './components/ModeToggleButton.vue'
+import MonacoEditor from './components/MonacoEditor.vue'
 import ScalarLogo from './components/ScalarLogo.vue'
-import { ResetStyles, ThemeStyles } from '@scalar/themes'
+import ShareButton from './components/ShareButton.vue'
 import { useDarkMode } from './hooks/useDarkMode'
 
 const isDark = useDarkMode()
@@ -156,58 +156,53 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <ResetStyles v-slot="{ styles }">
-    <Toaster theme="dark" />
-    <ThemeStyles id="default" />
-    <FileDrop @drop="handleDrop">
-      <div
-        class="app"
-        :class="styles">
-        <header class="header">
-          <div class="logo">
-            <ScalarLogo />
-            <div class="logo-text">Sandbox</div>
+  <Toaster theme="dark" />
+  <FileDrop @drop="handleDrop">
+    <div class="app">
+      <header class="header">
+        <div class="logo">
+          <ScalarLogo />
+          <div class="logo-text">Sandbox</div>
+        </div>
+        <div class="mode">
+          <ModeToggleButton v-model="editing" />
+        </div>
+        <div class="actions">
+          <DarkModeToggle />
+          <a href="https://github.com/scalar/scalar">
+            <GitHubLogo />
+          </a>
+          <ShareButton
+            @click="share"
+            :loading="loading" />
+        </div>
+      </header>
+      <div class="layout">
+        <!-- Mobile Layout -->
+        <template v-if="isMobile">
+          <div v-if="editing">
+            <MonacoEditor v-model="content" />
           </div>
-          <div class="mode">
-            <ModeToggleButton v-model="editing" />
+          <div v-else>
+            <ApiReference
+              :configuration="{ spec: { content }, darkMode: isDark.value }" />
           </div>
-          <div class="actions">
-            <DarkModeToggle />
-            <a href="https://github.com/scalar/scalar">
-              <GitHubLogo />
-            </a>
-            <ShareButton
-              @click="share"
-              :loading="loading" />
+        </template>
+        <!-- Desktop Layout -->
+        <template v-else>
+          <div
+            class="left"
+            v-if="editing">
+            <MonacoEditor v-model="content" />
           </div>
-        </header>
-        <div class="layout">
-          <!-- Mobile Layout -->
-          <template v-if="isMobile">
-            <div v-if="editing">
-              <MonacoEditor v-model="content" />
-            </div>
-            <div v-else>
-              <ApiReference
-                :configuration="{ spec: { content }, darkMode: isDark }" />
-            </div>
-          </template>
-          <!-- Desktop Layout -->
-          <template v-else>
-            <div
-              class="left"
-              v-if="editing">
-              <MonacoEditor v-model="content" />
-            </div>
-            <div class="right">
-              <ApiReference
-                :configuration="{ spec: { content }, darkMode: isDark }" />
-            </div>
-          </template>
-        </div>
+          <div class="right">
+            <ApiReference
+              :configuration="{ spec: { content }, darkMode: isDark.value }" />
+          </div>
+        </template>
       </div>
-    </FileDrop>
-  </ResetStyles>
+    </div>
+  </FileDrop>
 </template>
 
 <style scoped>

diff --git a/src/components/DarkModeToggle.vue b/src/components/DarkModeToggle.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { useToggle } from '@vueuse/core'
+
 import { useDarkMode } from '../hooks/useDarkMode'
 
 const isDark = useDarkMode()

diff --git a/src/components/FileDrop.vue b/src/components/FileDrop.vue
@@ -26,7 +26,7 @@ const drop = (e: DragEvent) => {
 
     reader.readAsText(
       // @ts-ignore
-      e.dataTransfer?.items[0].getAsFile()
+      e.dataTransfer?.items[0].getAsFile(),
     )
   }
 }

diff --git a/src/components/MonacoEditor.vue b/src/components/MonacoEditor.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import * as monaco from 'monaco-editor'
-import { onMounted, ref, nextTick, watch } from 'vue'
+import { nextTick, onMounted, ref, watch } from 'vue'
+
 import { useDarkMode } from '../hooks/useDarkMode'
-import Swagger20 from './swagger-2.0.json'
 import OpenAPI30 from './openapi-3.0.json'
 import OpenAPI31 from './openapi-3.1.json'
+import Swagger20 from './swagger-2.0.json'
 
 const isDark = useDarkMode()
 const props = defineProps(['modelValue'])
-Original file line number
+Diff line change
@@ Expand Up / @@ -49,4 +49,4 @@ @@
         "tables": {},
         "columns": {}
       }
-    }
+    }