Merge pull request #15 from StaticMania/markdown

Added ESlint, prettier, huskey, lint-stage and github action

.eslintignore

@@ -0,0 +1,7 @@
+node_modules
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist

.github/workflows/ci.yaml

@@ -0,0 +1,32 @@
+name: Continuous Integration
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0 # Fetch all history for all branches and tags
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "20.9.0"
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run lint
+        run: npm run lint
+
+      - name: Run format check
+        run: npm run format
+
+      - name: Check commit messages
+        uses: wagoid/commitlint-github-action@v3
+        with:
+          configFile: commitlint.config.cjs

.github/workflows/production.yaml

@@ -0,0 +1,21 @@
+name: Keep Vue Production Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches:
+      - main
+jobs:
+  Deploy-Production:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Vercel CLI
+        run: npm install --global vercel@canary
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.prettierignore

@@ -1,5 +1,11 @@
 # Ignore artifacts:
-.nuxt/
-
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist 
+node_modules
+lib
 # Ignore specific files:
 package-lock.json

.prettierrc

@@ -7,6 +7,7 @@
   "useTabs": false,
   "bracketSpacing": true,
   "bracketSameLine": true,
+  "cursorOffset": -1,
   "endOfLine": "lf",
   "quoteProps": "as-needed",
   "arrowParens": "always",

components/Header.vue

@@ -117,11 +117,11 @@ const isActive = (str: string): boolean => {
           <ThemeSwitcher />
 
           <!-- mobile drawer  -->
-          <Drawer position="right" v-model:open="active">
+          <Drawer v-model:open="active" position="right">
             <DrawerTrigger as-child>
               <button
-                @click="() => (active = true)"
-                class="rounded-lg border border-metal-100 bg-white p-2.5 transition-all duration-300 hover:bg-metal-25 laptop:hidden dark:border-metal-800 dark:bg-metal-900 dark:hover:border-metal-600 dark:hover:bg-metal-900">
+                class="rounded-lg border border-metal-100 bg-white p-2.5 transition-all duration-300 hover:bg-metal-25 laptop:hidden dark:border-metal-800 dark:bg-metal-900 dark:hover:border-metal-600 dark:hover:bg-metal-900"
+                @click="() => (active = true)">
                 <span v-if="active">
                   <PhosphorIconX
                     :size="20"
@@ -147,8 +147,8 @@ const isActive = (str: string): boolean => {
                   <DrawerClose as-child>
                     <Button
                       color="secondary"
-                      @click="active = false"
-                      class="mb-4 max-w-max p-3">
+                      class="mb-4 max-w-max p-3"
+                      @click="active = false">
                       <PhosphorIconArrowLeft
                         class="size-5 text-white dark:text-metal-900" />
                     </Button>

components/SearchBar.vue

@@ -33,15 +33,15 @@ watch([Meta_K, Ctrl_K], (v) => {
 <template>
   <div>
     <button
-      @click="isOpen = true"
-      class="rounded-lg border border-metal-100 bg-white p-2.5 outline-none transition-all duration-300 hover:bg-metal-25 focus:outline-none laptop:hidden dark:border-metal-800 dark:bg-metal-900 dark:hover:border-metal-600 dark:hover:bg-metal-900">
+      class="rounded-lg border border-metal-100 bg-white p-2.5 outline-none transition-all duration-300 hover:bg-metal-25 focus:outline-none laptop:hidden dark:border-metal-800 dark:bg-metal-900 dark:hover:border-metal-600 dark:hover:bg-metal-900"
+      @click="isOpen = true">
       <PhosphorIconMagnifyingGlass
         :size="22"
         class="fill-metal-500 dark:fill-metal-300" />
     </button>
     <button
-      @click="isOpen = true"
-      class="hidden w-[300px] items-center justify-between rounded-lg border border-metal-100 px-3 py-2.5 text-body-4 font-normal text-metal-600 outline-none transition-all duration-300 hover:bg-white focus:outline-none laptop:flex dark:border-metal-800 dark:bg-metal-900 dark:hover:border-metal-600 dark:hover:bg-metal-900">
+      class="hidden w-[300px] items-center justify-between rounded-lg border border-metal-100 px-3 py-2.5 text-body-4 font-normal text-metal-600 outline-none transition-all duration-300 hover:bg-white focus:outline-none laptop:flex dark:border-metal-800 dark:bg-metal-900 dark:hover:border-metal-600 dark:hover:bg-metal-900"
+      @click="isOpen = true">
       <span
         class="flex items-center gap-2 text-body-4 font-normal text-metal-300 dark:text-white">
         <PhosphorIconMagnifyingGlass :size="22" />

components/content/docs/components/input/DefaultInput.vue

@@ -12,9 +12,9 @@ console.log(inputValue.value);
   <CodeHighlightWithPreview :code="defaultInput">
     <div class="max-w-md p-2">
       <Input
-        @update:modelValue="inputValue as any"
         placeholder="Enter name"
-        type="text" />
+        type="text"
+        @update:model-value="inputValue as any" />
     </div>
   </CodeHighlightWithPreview>
 </template>

components/content/docs/components/rating/ValueFromRating.vue

@@ -12,8 +12,8 @@ const handleRating = (value: number | undefined) => {};
     <Rating :handle-rating="handleRating">
       <RatingStar
         v-for="rating in ratings"
-        :value="rating"
-        :key="rating"></RatingStar>
+        :key="rating"
+        :value="rating"></RatingStar>
     </Rating>
   </CodeHighlightWithPreview>
 </template>

components/content/docs/components/slider/DefaultSlider.vue

@@ -10,7 +10,7 @@ const sliderValue = ref([25]);
 <template>
   <CodeHighlightWithPreview :code="DefaultSliderCode">
     <div class="p-6">
-      <Slider :min="0" :max="100" v-model="sliderValue" />
+      <Slider v-model="sliderValue" :min="0" :max="100" />
     </div>
   </CodeHighlightWithPreview>
 </template>

components/content/docs/getting-started/typography/variant/TypographyDisplay.vue

@@ -4,7 +4,7 @@ import { TypographyDisplayCode } from "../typographyCode";
 </script>
 
 <template>
-  <CodeHighlightWithPreview :code="TypographyDisplayCode"  :active-tab="1">
+  <CodeHighlightWithPreview :code="TypographyDisplayCode" :active-tab="1">
     <div class="py-3">
       <h1 class="text-display">Display</h1>
     </div>

eslint.config.mjs

@@ -1,9 +1,3 @@
+import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
 import withNuxt from "./.nuxt/eslint.config.mjs";
-
-export default withNuxt({
-  files: ["**/*.ts", "**/*.tsx", "**/*.vue"],
-  rules: {
-    "no-console": "off",
-    "vue/html-self-closing": "off",
-  },
-});
+export default withNuxt(eslintPluginPrettierRecommended);