From 5882a85aa0d5158f8a38eca56e605e2da1179b4c Mon Sep 17 00:00:00 2001 From: Muhammad Ubaid Raza Date: Sun, 26 Feb 2023 12:48:56 +0500 Subject: [PATCH] add tailwind --- .gitignore | 110 +-- .prettierrc | 9 + .vscode/extensions.json | 3 + README.md | 19 +- manifest.json | 29 + package.json | 28 + pnpm-lock.yaml | 1367 +++++++++++++++++++++++++++++++++++ postcss.config.cjs | 6 + public/vite.svg | 1 + src/assets/base.css | 3 + src/assets/vue.svg | 1 + src/background/index.ts | 3 + src/components/.gitkeep | 0 src/content-script/index.ts | 3 + src/options/index.css | 80 ++ src/options/index.html | 23 + src/options/index.ts | 6 + src/options/index.vue | 41 ++ src/popup/index.css | 80 ++ src/popup/index.html | 23 + src/popup/index.ts | 6 + src/popup/index.vue | 43 ++ src/vite-env.d.ts | 1 + tailwind.config.cjs | 9 + tsconfig.json | 22 + tsconfig.node.json | 11 + vite.config.ts | 15 + 27 files changed, 1846 insertions(+), 96 deletions(-) create mode 100644 .prettierrc create mode 100644 .vscode/extensions.json create mode 100644 manifest.json create mode 100644 package.json create mode 100644 pnpm-lock.yaml create mode 100644 postcss.config.cjs create mode 100644 public/vite.svg create mode 100644 src/assets/base.css create mode 100644 src/assets/vue.svg create mode 100644 src/background/index.ts create mode 100644 src/components/.gitkeep create mode 100644 src/content-script/index.ts create mode 100644 src/options/index.css create mode 100644 src/options/index.html create mode 100644 src/options/index.ts create mode 100644 src/options/index.vue create mode 100644 src/popup/index.css create mode 100644 src/popup/index.html create mode 100644 src/popup/index.ts create mode 100644 src/popup/index.vue create mode 100644 src/vite-env.d.ts create mode 100644 tailwind.config.cjs create mode 100644 tsconfig.json create mode 100644 tsconfig.node.json create mode 100644 vite.config.ts diff --git a/.gitignore b/.gitignore index 6704566..a547bf3 100644 --- a/.gitignore +++ b/.gitignore @@ -4,101 +4,21 @@ logs npm-debug.log* yarn-debug.log* yarn-error.log* +pnpm-debug.log* lerna-debug.log* -# Diagnostic reports (https://nodejs.org/api/report.html) -report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json - -# Runtime data -pids -*.pid -*.seed -*.pid.lock - -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov - -# Coverage directory used by tools like istanbul -coverage -*.lcov - -# nyc test coverage -.nyc_output - -# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# Bower dependency directory (https://bower.io/) -bower_components - -# node-waf configuration -.lock-wscript - -# Compiled binary addons (https://nodejs.org/api/addons.html) -build/Release - -# Dependency directories -node_modules/ -jspm_packages/ - -# TypeScript v1 declaration files -typings/ - -# TypeScript cache -*.tsbuildinfo - -# Optional npm cache directory -.npm - -# Optional eslint cache -.eslintcache - -# Microbundle cache -.rpt2_cache/ -.rts2_cache_cjs/ -.rts2_cache_es/ -.rts2_cache_umd/ - -# Optional REPL history -.node_repl_history - -# Output of 'npm pack' -*.tgz - -# Yarn Integrity file -.yarn-integrity - -# dotenv environment variables file -.env -.env.test - -# parcel-bundler cache (https://parceljs.org/) -.cache - -# Next.js build output -.next - -# Nuxt.js build / generate output -.nuxt +node_modules dist - -# Gatsby files -.cache/ -# Comment in the public line in if your project uses Gatsby and *not* Next.js -# https://nextjs.org/blog/next-9-1#public-directory-support -# public - -# vuepress build output -.vuepress/dist - -# Serverless directories -.serverless/ - -# FuseBox cache -.fusebox/ - -# DynamoDB Local files -.dynamodb/ - -# TernJS port file -.tern-port +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..d505f55 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,9 @@ +{ + "quoteProps": "as-needed", + "semi": false, + "singleAttributePerLine": true, + "singleQuote": true, + "tabWidth": 2, + "trailingComma": "es5", + "useTabs": false +} diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..c0a6e5a --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] +} diff --git a/README.md b/README.md index d736702..ef72fd5 100644 --- a/README.md +++ b/README.md @@ -1 +1,18 @@ -# calorie-cowboy \ No newline at end of file +# Vue 3 + TypeScript + Vite + +This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 ` + + diff --git a/src/options/index.ts b/src/options/index.ts new file mode 100644 index 0000000..95e4b28 --- /dev/null +++ b/src/options/index.ts @@ -0,0 +1,6 @@ +import { createApp } from 'vue' +import '../assets/base.css' +import './index.css' +import App from './index.vue' + +createApp(App).mount('#app') diff --git a/src/options/index.vue b/src/options/index.vue new file mode 100644 index 0000000..29a2e21 --- /dev/null +++ b/src/options/index.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/src/popup/index.css b/src/popup/index.css new file mode 100644 index 0000000..7294765 --- /dev/null +++ b/src/popup/index.css @@ -0,0 +1,80 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +.card { + padding: 2em; +} + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/src/popup/index.html b/src/popup/index.html new file mode 100644 index 0000000..3266d93 --- /dev/null +++ b/src/popup/index.html @@ -0,0 +1,23 @@ + + + + + + + Vite + Vue + TS + + +
+ + + diff --git a/src/popup/index.ts b/src/popup/index.ts new file mode 100644 index 0000000..95e4b28 --- /dev/null +++ b/src/popup/index.ts @@ -0,0 +1,6 @@ +import { createApp } from 'vue' +import '../assets/base.css' +import './index.css' +import App from './index.vue' + +createApp(App).mount('#app') diff --git a/src/popup/index.vue b/src/popup/index.vue new file mode 100644 index 0000000..f606ee0 --- /dev/null +++ b/src/popup/index.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/tailwind.config.cjs b/tailwind.config.cjs new file mode 100644 index 0000000..1a464d5 --- /dev/null +++ b/tailwind.config.cjs @@ -0,0 +1,9 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ['./src/**/*.{index,vue,js,ts,jsx,tsx}'], + content: [], + theme: { + extend: {}, + }, + plugins: [], +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..7663aaa --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "esModuleInterop": true, + "isolatedModules": true, + "jsx": "preserve", + "lib": ["ESNext", "DOM"], + "module": "ESNext", + "moduleResolution": "Node", + "noEmit": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "strict": true, + "target": "ESNext", + "useDefineForClassFields": true + }, + "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], + "references": [ + { + "path": "./tsconfig.node.json" + } + ] +} diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..a9bdc36 --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "allowSyntheticDefaultImports": true, + "composite": true, + "esModuleInterop": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true + }, + "include": ["vite.config.ts", "manifest.json"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..485dd70 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,15 @@ +import { crx } from '@crxjs/vite-plugin' +import vue from '@vitejs/plugin-vue' +import { defineConfig } from 'vite' +import manifest from './manifest.json' + +// https://vitejs.dev/config/ +export default defineConfig({ + // @ts-ignore + plugins: [vue(), crx({ manifest })], + server: { + hmr: { + overlay: false, + }, + }, +})