refactor: initinal

.github/workflows/ci.yml

@@ -14,16 +14,30 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - name: Set node
-        uses: actions/setup-node@v3
+      - uses: pnpm/action-setup@v2
+      - uses: actions/setup-node@v3
         with:
-          node-version: 20
-
-      - name: Setup
-        run: npm i -g @antfu/ni
+          node-version: lts/*
+          cache: pnpm
 
       - name: Install
-        run: nci
+        run: pnpm install
 
       - name: Lint
-        run: nr lint
+        run: pnpm run lint
+
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+      - uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+          cache: pnpm
+
+      - name: Install
+        run: pnpm install
+
+      - name: Typecheck
+        run: pnpm run typecheck

.gitignore

@@ -1,24 +1,7 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
 node_modules
+*.log
 dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+.output
+.nuxt
+.env
+.idea/

.npmrc

@@ -0,0 +1,3 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
+shell-emulator=true

.stackblitzrc

@@ -0,0 +1,4 @@
+{
+  "installDependencies": true,
+  "startCommand": "npm run dev"
+}

.vscode/extensions.json

@@ -1,40 +1,10 @@
 {
-  // Enable the flat config support
-  "eslint.experimental.useFlatConfig": true,
-
-  // Disable the default formatter
-  "editor.formatOnSave": false,
-
-  // Auto fix
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.organizeImports": false
-  },
-
-  // Silent the stylistic rules in you IDE, but still auto fix them
-  "eslint.rules.customizations": [
-    { "rule": "@stylistic/*", "severity": "off" },
-    { "rule": "style*", "severity": "off" },
-    { "rule": "*-indent", "severity": "off" },
-    { "rule": "*-spacing", "severity": "off" },
-    { "rule": "*-spaces", "severity": "off" },
-    { "rule": "*-order", "severity": "off" },
-    { "rule": "*-dangle", "severity": "off" },
-    { "rule": "*-newline", "severity": "off" },
-    { "rule": "*quotes", "severity": "off" },
-    { "rule": "*semi", "severity": "off" }
-  ],
-
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact",
-    "vue",
-    "html",
-    "markdown",
-    "json",
-    "jsonc",
-    "yaml"
+  "recommendations": [
+    "antfu.iconify",
+    "antfu.unocss",
+    "antfu.goto-alias",
+    "csstools.postcss",
+    "dbaeumer.vscode-eslint",
+    "vue.volar"
   ]
 }

.vscode/settings.json

@@ -0,0 +1,45 @@
+{
+  "files.associations": {
+    "*.css": "postcss"
+  },
+
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ],
+  "interline-translate.knownPopularWordCount": 6000,
+  "iconify.annotations": true,
+  "iconify.inplace": true
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-PRESENT Chris <https://github.com/zyyv>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,2 +1,3 @@
-# unocss-animates
-Preview all animations in UnoCSS.
+# UnoCSS Animates
+
+Preview of the animations available in UnoCSS.

app/app.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { appName } from '~/constants'
+
+useHead({
+  title: appName,
+})
+</script>
+
+<template>
+  <VitePwaManifest />
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

app/components/AnimateItem.vue

@@ -0,0 +1,17 @@
+<script lang='ts' setup>
+import type { KeyframeItemMeta } from '~/types'
+
+defineProps<{
+  meta?: KeyframeItemMeta
+  name: string
+}>()
+</script>
+
+<template>
+  <div relative aspect="1/1" w-full fcc of-hidden rd-2 o-transition-500 bg="#999 dark:#333" class="group">
+    <div size="1/2" rd bg="#fff8" :class="`animate-${name}`" />
+    <div text-theme-400-72 absolute bottom-0 left-0 right-0 fcc p-2>
+      {{ name }} / {{ meta?.meta?.presets?.join() }}
+    </div>
+  </div>
+</template>

app/components/Codemirror.vue

@@ -0,0 +1,138 @@
+<script lang="ts" setup>
+import type { CompletionSource } from '@codemirror/autocomplete'
+
+const props = defineProps<{
+  mode?: string
+  readOnly?: boolean
+  getHint?: CompletionSource
+}>()
+
+const el = ref<HTMLElement>()
+const input = defineModel<string>({
+  default: '',
+})
+
+onMounted(() => {
+  useCodeMirror(el, input, reactive({
+    autocomplete: props.getHint,
+    ...toRefs(props),
+  }))
+})
+</script>
+
+<template>
+  <div ref="el" />
+</template>
+
+<style>
+#gtx-trans,
+grammarly-extension,
+deepl-inline-translate,
+grammarly-popups,
+deepl-inline-popup,
+grammarly-desktop-integration {
+  display: none !important;
+}
+
+.cm-editor {
+  height: 100% !important;
+  width: 100% !important;
+  font-family: inherit;
+}
+.cm-content {
+  cursor: text !important;
+}
+
+:root {
+  --cm-font-family: 'Fira Code', monospace;
+  --cm-foreground: #393a3480;
+  --cm-background: #ececec;
+  --cm-comment: #a0ada0;
+  --cm-string: #b56959;
+  --cm-number: #296aa3;
+  --cm-variable: #59873a;
+  --cm-keyword: #1c6b48;
+  --cm-property: #b58451;
+  --cm-definition-keyword: #ab5959;
+  --cm-punctuation: #8e8f8b;
+  --cm-decorator: #b07d48;
+  --cm-line-highlight-background: #c9c9c910;
+  --cm-line-highlight-border: #b0b0b030;
+  --cm-selection-background: #eeeeee;
+  /* scrollbars colors */
+  --cm-ttc-c-thumb: #eee;
+  --cm-ttc-c-track: white;
+}
+
+html.dark {
+  --cm-scheme: dark;
+  --cm-foreground: #d4cfbf80;
+  --cm-background: #2c2c2c;
+  --cm-comment: #758575;
+  --cm-string: #d48372;
+  --cm-keyword: #4d9375;
+  --cm-number: #6394bf;
+  --cm-variable: #c2b36e;
+  --cm-property: #dd8e6e;
+  --cm-definition-keyword: #cb7676;
+  --cm-punctuation: #858585;
+  --cm-decorator: #bd976a;
+  --cm-line-number: #dedcd530;
+  --cm-line-number-gutter: #eeeeee;
+  --cm-line-highlight-background: #4d4d4d29;
+  --cm-line-highlight-border: #3a3a3a80;
+  --cm-selection-background: #242424;
+  /* scrollbars colors */
+  --cm-ttc-c-thumb: #222;
+  --cm-ttc-c-track: #111;
+}
+
+.highlighted,
+.highlighted > span {
+  border-bottom: 1px dashed currentColor;
+}
+.cm-scroller::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.cm-scroller {
+  font-family: var(--cm-font-family) !important;
+  font-size: 13px !important;
+}
+
+.full-scrolls .cm-scroller,
+.scrolls {
+  overflow: auto !important;
+  height: calc(100vh - 2px) !important;
+  scrollbar-width: thin;
+  scrollbar-color: var(--cm-ttc-c-thumb) var(--cm-ttc-c-track);
+}
+.scrolls-sidebar {
+  height: calc(100vh - 25px - 1.5rem - 65px - 1rem - 2px) !important;
+}
+.overview-scrolls .cm-scroller {
+  --use-overview-scrolls: var(--overview-scrolls, calc(100vh - 116px - 1rem - 61px - 1rem - 2px));
+  height: var(--use-overview-scrolls) !important;
+}
+.module-scrolls .cm-scroller {
+  --use-module-scrolls: var(--module-scrolls, calc(100vh - 41px - 2.5rem));
+  height: var(--use-module-scrolls) !important;
+}
+.repl-scrolls .cm-scroller {
+  --use-repl-scrolls: var(--repl-scrolls, calc(100vh - 41px - 2.5rem));
+  height: var(--use-repl-scrolls) !important;
+}
+
+.cm-scroller::-webkit-scrollbar-track {
+  background: var(--cm-ttc-c-track);
+}
+.cm-scroller::-webkit-scrollbar-thumb {
+  background-color: var(--cm-ttc-c-thumb);
+  border-radius: 3px;
+  border: 2px solid var(--cm-ttc-c-thumb);
+}
+.cm-scroller::-webkit-scrollbar-corner {
+  background-color: var(--cm-ttc-c-track);
+}
+</style>