Vite App

From 916348e47bca477ef26a9ee891db5b2bfa6bc447 Mon Sep 17 00:00:00 2001 From: Lui22 Date: Wed, 20 Sep 2023 13:23:41 +0500 Subject: [PATCH] fin. --- index.html | 12 +- package-lock.json | 118 +++++++++++++++--- package.json | 1 + public/favicon.ico | Bin 4286 -> 4682 bytes public/favicon_.ico | Bin 0 -> 4286 bytes src/App.vue | 46 +------ src/assets/base.css | 86 ------------- src/assets/logo.svg | 1 - src/assets/main.css | 24 ++++ .../ContributionGraph/ContributionGraph.vue | 54 ++++++++ .../ContributionGraph/Grid/GridElement.vue | 73 +++++++++++ .../ContributionGraph/Grid/GridGraph.vue | 34 +++++ .../ContributionGraph/Legend/ColorLegend.vue | 33 +++++ .../ContributionGraph/Legend/DayLegend.vue | 15 +++ .../ContributionGraph/Legend/MonthLegend.vue | 27 ++++ src/components/HelloWorld.vue | 0 src/components/TheWelcome.vue | 0 src/components/TooltipComponent.vue | 56 +++++++++ src/components/WelcomeItem.vue | 0 src/components/icons/IconCommunity.vue | 7 -- src/components/icons/IconDocumentation.vue | 0 src/components/icons/IconEcosystem.vue | 0 src/components/icons/IconSupport.vue | 0 src/components/icons/IconTooling.vue | 0 src/main.ts | 5 +- src/stores/ContributionsStore.ts | 16 +++ 26 files changed, 453 insertions(+), 155 deletions(-) create mode 100644 public/favicon_.ico delete mode 100644 src/assets/base.css delete mode 100644 src/assets/logo.svg create mode 100644 src/components/ContributionGraph/ContributionGraph.vue create mode 100644 src/components/ContributionGraph/Grid/GridElement.vue create mode 100644 src/components/ContributionGraph/Grid/GridGraph.vue create mode 100644 src/components/ContributionGraph/Legend/ColorLegend.vue create mode 100644 src/components/ContributionGraph/Legend/DayLegend.vue create mode 100644 src/components/ContributionGraph/Legend/MonthLegend.vue delete mode 100644 src/components/HelloWorld.vue delete mode 100644 src/components/TheWelcome.vue create mode 100644 src/components/TooltipComponent.vue delete mode 100644 src/components/WelcomeItem.vue delete mode 100644 src/components/icons/IconCommunity.vue delete mode 100644 src/components/icons/IconDocumentation.vue delete mode 100644 src/components/icons/IconEcosystem.vue delete mode 100644 src/components/icons/IconSupport.vue delete mode 100644 src/components/icons/IconTooling.vue create mode 100644 src/stores/ContributionsStore.ts diff --git a/index.html b/index.html index a888544..4e22ef8 100644 --- a/index.html +++ b/index.html @@ -2,12 +2,16 @@ - - - Vite App + + + Contribution Graph + + + +

- + diff --git a/package-lock.json b/package-lock.json index a8ad66d..54b4b15 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,23 +8,25 @@ "name": "digital-partners-global", "version": "0.0.0", "dependencies": { - "vue": "^3.3.4" + "date-fns": "2.30.0", + "pinia": "2.1.6", + "vue": "3.3.4" }, "devDependencies": { - "@rushstack/eslint-patch": "^1.3.3", - "@tsconfig/node18": "^18.2.2", - "@types/node": "^18.17.17", - "@vitejs/plugin-vue": "^4.3.4", - "@vue/eslint-config-prettier": "^8.0.0", - "@vue/eslint-config-typescript": "^12.0.0", - "@vue/tsconfig": "^0.4.0", - "eslint": "^8.49.0", - "eslint-plugin-vue": "^9.17.0", - "npm-run-all2": "^6.0.6", - "prettier": "^3.0.3", + "@rushstack/eslint-patch": "1.4.0", + "@tsconfig/node18": "18.2.2", + "@types/node": "18.17.18", + "@vitejs/plugin-vue": "4.3.4", + "@vue/eslint-config-prettier": "8.0.0", + "@vue/eslint-config-typescript": "12.0.0", + "@vue/tsconfig": "0.4.0", + "eslint": "8.49.0", + "eslint-plugin-vue": "9.17.0", + "npm-run-all2": "6.0.6", + "prettier": "3.0.3", "typescript": "~5.2.0", - "vite": "^4.4.9", - "vue-tsc": "^1.8.11" + "vite": "4.4.9", + "vue-tsc": "1.8.11" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -225,6 +227,17 @@ "node": ">=6.0.0" } }, + "node_modules/@babel/runtime": { + "version": "7.22.15", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz", + "integrity": "sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==", + "dependencies": { + "regenerator-runtime": "^0.14.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@esbuild/android-arm": { "version": "0.18.20", "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz", @@ -1037,6 +1050,11 @@ "@vue/shared": "3.3.4" } }, + "node_modules/@vue/devtools-api": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz", + "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==" + }, "node_modules/@vue/eslint-config-prettier": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-8.0.0.tgz", @@ -1421,6 +1439,21 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, + "node_modules/date-fns": { + "version": "2.30.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", + "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "dependencies": { + "@babel/runtime": "^7.21.0" + }, + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/de-indent": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz", @@ -2807,6 +2840,56 @@ "node": ">=0.10" } }, + "node_modules/pinia": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.6.tgz", + "integrity": "sha512-bIU6QuE5qZviMmct5XwCesXelb5VavdOWKWaB17ggk++NUwQWWbP5YnsONTk3b752QkW9sACiR81rorpeOMSvQ==", + "dependencies": { + "@vue/devtools-api": "^6.5.0", + "vue-demi": ">=0.14.5" + }, + "funding": { + "url": "https://github.com/sponsors/posva" + }, + "peerDependencies": { + "@vue/composition-api": "^1.4.0", + "typescript": ">=4.4.4", + "vue": "^2.6.14 || ^3.3.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + }, + "typescript": { + "optional": true + } + } + }, + "node_modules/pinia/node_modules/vue-demi": { + "version": "0.14.6", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz", + "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/postcss": { "version": "8.4.30", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz", @@ -2942,6 +3025,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/regenerator-runtime": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz", + "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==" + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", @@ -3371,7 +3459,7 @@ "version": "5.2.2", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz", "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==", - "dev": true, + "devOptional": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" diff --git a/package.json b/package.json index 8c50dae..342eb09 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ }, "dependencies": { "date-fns": "2.30.0", + "pinia": "2.1.6", "vue": "3.3.4" }, "devDependencies": { diff --git a/public/favicon.ico b/public/favicon.ico index df36fcfb72584e00488330b560ebcf34a41c64c2..150b32d06b2514687f16b7cc258180233121813c 100644 GIT binary patch literal 4682 zcmeH{Jqp4w6vv<7=A?pigcckfJV0>P`hf@N4V*MXhxR6QQ_(wQRA==P{h*)+h%bsu z%p^DzU&1ee|ByU>yab?vv)u+<8T1+eEdb~s7(pM=xgOOzK(qGZ8PGxo$N(8217x5? z29hN4vn-P)d7jU2m%X%cScm>`6G;=DuY!rRvGANoj2vmQ7`i^*6(Y()e7o+Ijng&? zPn%GEfcYwzDjQ)z$ac=m?whoUH0nx@^Le<|X<@s8ljQ2FL&z_;UjaM}!W3y??9u*LA(me*ig@;Zpzr literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S diff --git a/public/favicon_.ico b/public/favicon_.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/src/App.vue b/src/App.vue index fd93cdf..8c00115 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,47 +1,11 @@ - + diff --git a/src/assets/base.css b/src/assets/base.css deleted file mode 100644 index 8816868..0000000 --- a/src/assets/base.css +++ /dev/null @@ -1,86 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: - color 0.5s, - background-color 0.5s; - line-height: 1.6; - font-family: - Inter, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/src/assets/logo.svg b/src/assets/logo.svg deleted file mode 100644 index 7565660..0000000 --- a/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/assets/main.css b/src/assets/main.css index e69de29..1de16ae 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -0,0 +1,24 @@ +body { + margin: 0; + font-family: 'Inter', sans-serif; +} + +.legend { + color: #959494; + font-size: 12px; +} + +.legend_row { + display: flex; + justify-content: space-around; +} + +.legend_column { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.legend__text:first-letter { + text-transform: uppercase; +} diff --git a/src/components/ContributionGraph/ContributionGraph.vue b/src/components/ContributionGraph/ContributionGraph.vue new file mode 100644 index 0000000..90c6aea --- /dev/null +++ b/src/components/ContributionGraph/ContributionGraph.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/src/components/ContributionGraph/Grid/GridElement.vue b/src/components/ContributionGraph/Grid/GridElement.vue new file mode 100644 index 0000000..cf2b1eb --- /dev/null +++ b/src/components/ContributionGraph/Grid/GridElement.vue @@ -0,0 +1,73 @@ + + + + + diff --git a/src/components/ContributionGraph/Grid/GridGraph.vue b/src/components/ContributionGraph/Grid/GridGraph.vue new file mode 100644 index 0000000..d01b496 --- /dev/null +++ b/src/components/ContributionGraph/Grid/GridGraph.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/src/components/ContributionGraph/Legend/ColorLegend.vue b/src/components/ContributionGraph/Legend/ColorLegend.vue new file mode 100644 index 0000000..e924ff2 --- /dev/null +++ b/src/components/ContributionGraph/Legend/ColorLegend.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/src/components/ContributionGraph/Legend/DayLegend.vue b/src/components/ContributionGraph/Legend/DayLegend.vue new file mode 100644 index 0000000..a88e133 --- /dev/null +++ b/src/components/ContributionGraph/Legend/DayLegend.vue @@ -0,0 +1,15 @@ + + + + + diff --git a/src/components/ContributionGraph/Legend/MonthLegend.vue b/src/components/ContributionGraph/Legend/MonthLegend.vue new file mode 100644 index 0000000..c07463c --- /dev/null +++ b/src/components/ContributionGraph/Legend/MonthLegend.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/TooltipComponent.vue b/src/components/TooltipComponent.vue new file mode 100644 index 0000000..3a5746c --- /dev/null +++ b/src/components/TooltipComponent.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/icons/IconCommunity.vue b/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b05..0000000 --- a/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconDocumentation.vue b/src/components/icons/IconDocumentation.vue deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/icons/IconEcosystem.vue b/src/components/icons/IconEcosystem.vue deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/icons/IconSupport.vue b/src/components/icons/IconSupport.vue deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/icons/IconTooling.vue b/src/components/icons/IconTooling.vue deleted file mode 100644 index e69de29..0000000 diff --git a/src/main.ts b/src/main.ts index 0ac3a5f..792b9ca 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,5 +2,8 @@ import './assets/main.css' import { createApp } from 'vue' import App from './App.vue' +import { createPinia } from 'pinia' -createApp(App).mount('#app') +const pinia = createPinia() + +createApp(App).use(pinia).mount('#app') diff --git a/src/stores/ContributionsStore.ts b/src/stores/ContributionsStore.ts new file mode 100644 index 0000000..b646da4 --- /dev/null +++ b/src/stores/ContributionsStore.ts @@ -0,0 +1,16 @@ +import { defineStore } from 'pinia' +import { ref } from 'vue' +import { startOfWeek, subWeeks } from 'date-fns' + +export const useContributionsStore = defineStore('contributions', () => { + const contributionData = ref>({}) + const startDate = getStartingDate() + + return { contributionData, startDate } +}) + +function getStartingDate() { + const endOfStartingWeek = subWeeks(new Date(), 50) + + return startOfWeek(endOfStartingWeek, { weekStartsOn: 1 }) +}