From 3829ab9997b87ba07ae6ff097b2a20890a31966f Mon Sep 17 00:00:00 2001 From: Emmanuel Gautier Date: Thu, 10 Oct 2024 23:46:28 +0200 Subject: [PATCH] chore: add vue example --- vue/.eslintrc.cjs | 15 +++ vue/.gitignore | 30 ++++++ vue/.nginx/nginx.conf | 16 ++++ vue/.prettierrc.json | 8 ++ vue/Dockerfile | 30 ++++++ vue/README.md | 41 ++++++++ vue/env.d.ts | 1 + vue/index.html | 13 +++ vue/package.json | 35 +++++++ vue/public/favicon.ico | Bin 0 -> 4286 bytes vue/src/App.vue | 85 +++++++++++++++++ vue/src/assets/base.css | 86 +++++++++++++++++ vue/src/assets/logo.svg | 1 + vue/src/assets/main.css | 35 +++++++ vue/src/components/HelloWorld.vue | 41 ++++++++ vue/src/components/TheWelcome.vue | 88 ++++++++++++++++++ vue/src/components/WelcomeItem.vue | 87 +++++++++++++++++ vue/src/components/icons/IconCommunity.vue | 7 ++ .../components/icons/IconDocumentation.vue | 7 ++ vue/src/components/icons/IconEcosystem.vue | 7 ++ vue/src/components/icons/IconSupport.vue | 7 ++ vue/src/components/icons/IconTooling.vue | 19 ++++ vue/src/main.ts | 11 +++ vue/src/router/index.ts | 23 +++++ vue/src/views/AboutView.vue | 15 +++ vue/src/views/HomeView.vue | 9 ++ vue/tsconfig.app.json | 14 +++ vue/tsconfig.json | 11 +++ vue/tsconfig.node.json | 19 ++++ vue/vite.config.ts | 16 ++++ 30 files changed, 777 insertions(+) create mode 100644 vue/.eslintrc.cjs create mode 100644 vue/.gitignore create mode 100644 vue/.nginx/nginx.conf create mode 100644 vue/.prettierrc.json create mode 100644 vue/Dockerfile create mode 100644 vue/README.md create mode 100644 vue/env.d.ts create mode 100644 vue/index.html create mode 100644 vue/package.json create mode 100644 vue/public/favicon.ico create mode 100644 vue/src/App.vue create mode 100644 vue/src/assets/base.css create mode 100644 vue/src/assets/logo.svg create mode 100644 vue/src/assets/main.css create mode 100644 vue/src/components/HelloWorld.vue create mode 100644 vue/src/components/TheWelcome.vue create mode 100644 vue/src/components/WelcomeItem.vue create mode 100644 vue/src/components/icons/IconCommunity.vue create mode 100644 vue/src/components/icons/IconDocumentation.vue create mode 100644 vue/src/components/icons/IconEcosystem.vue create mode 100644 vue/src/components/icons/IconSupport.vue create mode 100644 vue/src/components/icons/IconTooling.vue create mode 100644 vue/src/main.ts create mode 100644 vue/src/router/index.ts create mode 100644 vue/src/views/AboutView.vue create mode 100644 vue/src/views/HomeView.vue create mode 100644 vue/tsconfig.app.json create mode 100644 vue/tsconfig.json create mode 100644 vue/tsconfig.node.json create mode 100644 vue/vite.config.ts diff --git a/vue/.eslintrc.cjs b/vue/.eslintrc.cjs new file mode 100644 index 0000000..6f40582 --- /dev/null +++ b/vue/.eslintrc.cjs @@ -0,0 +1,15 @@ +/* eslint-env node */ +require('@rushstack/eslint-patch/modern-module-resolution') + +module.exports = { + root: true, + 'extends': [ + 'plugin:vue/vue3-essential', + 'eslint:recommended', + '@vue/eslint-config-typescript', + '@vue/eslint-config-prettier/skip-formatting' + ], + parserOptions: { + ecmaVersion: 'latest' + } +} diff --git a/vue/.gitignore b/vue/.gitignore new file mode 100644 index 0000000..8ee54e8 --- /dev/null +++ b/vue/.gitignore @@ -0,0 +1,30 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +.DS_Store +dist +dist-ssr +coverage +*.local + +/cypress/videos/ +/cypress/screenshots/ + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +*.tsbuildinfo diff --git a/vue/.nginx/nginx.conf b/vue/.nginx/nginx.conf new file mode 100644 index 0000000..be7a25e --- /dev/null +++ b/vue/.nginx/nginx.conf @@ -0,0 +1,16 @@ +server { + + listen 80; + + location / { + root /usr/share/nginx/html; + index index.html index.htm; + try_files $uri /index.html =404; + } + + error_page 500 502 503 504 /50x.html; + + location = /50x.html { + root /usr/share/nginx/html; + } +} diff --git a/vue/.prettierrc.json b/vue/.prettierrc.json new file mode 100644 index 0000000..66e2335 --- /dev/null +++ b/vue/.prettierrc.json @@ -0,0 +1,8 @@ +{ + "$schema": "https://json.schemastore.org/prettierrc", + "semi": false, + "tabWidth": 2, + "singleQuote": true, + "printWidth": 100, + "trailingComma": "none" +} \ No newline at end of file diff --git a/vue/Dockerfile b/vue/Dockerfile new file mode 100644 index 0000000..7333d48 --- /dev/null +++ b/vue/Dockerfile @@ -0,0 +1,30 @@ +FROM node:lts as development + +WORKDIR /app + +COPY package*.json ./ +RUN npm ci + +COPY . . + +ENV CI=true +ENV PORT=3000 + +CMD [ "npm", "start" ] + +FROM development as builder + +RUN npm run build + +FROM nginx:alpine + +# Copy config nginx +COPY --from=builder /app/.nginx/nginx.conf /etc/nginx/conf.d/default.conf + +WORKDIR /usr/share/nginx/html + +# Remove default nginx static assets +RUN rm -rf ./* + +# Copy static assets from builder stage +COPY --from=builder /app/dist . diff --git a/vue/README.md b/vue/README.md new file mode 100644 index 0000000..c62edb1 --- /dev/null +++ b/vue/README.md @@ -0,0 +1,41 @@ +# Vue App Dockerfile Example + +## Description + +This repository provides a Dockerfile example for containerizing a Vue app. + +## Getting Started + +1. Copy the `Dockerfile` and files used in the Dockerfile in your application +2. Build the Docker image by running the following command: + +```bash +docker build -t image-name . +``` + +3. Once the image is built successfully, you can run a container using the following command: + +```bash +docker run image-name +``` + +If the container needs specifying port and volumes if the container needed it. + +4. Test your application container + +## Customization + +You can customize the Dockerfile example to fit your specific application needs. Here are a few areas you might consider modifying: + +- **Dependencies**: If your application requires additional dependencies, you can use the RUN command in the Dockerfile to install them. Make sure to update the appropriate package manager command based on your application setup. +- **Environment Variables**: If your application requires environment variables, you can pass them to the container using the -e flag when running the docker run command. + +## Contributing + +Contributions to this Dockerfile example are welcome! If you have any improvements or suggestions, feel free to submit a pull request. + +Please ensure that your changes align with the best practices and conventions outlined in the Docker and language/framework documentation. + +## Disclaimer + +The Dockerfile example provided in this repository is for educational and reference purposes. It is important to review and adapt it to meet the specific security and performance requirements of your case before using it in a production environment. diff --git a/vue/env.d.ts b/vue/env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/vue/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/vue/index.html b/vue/index.html new file mode 100644 index 0000000..a888544 --- /dev/null +++ b/vue/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/vue/package.json b/vue/package.json new file mode 100644 index 0000000..122d5b4 --- /dev/null +++ b/vue/package.json @@ -0,0 +1,35 @@ +{ + "name": "vue-project", + "version": "0.0.0", + "private": true, + "type": "module", + "scripts": { + "dev": "vite", + "build": "run-p type-check \"build-only {@}\" --", + "preview": "vite preview", + "build-only": "vite build", + "type-check": "vue-tsc --build --force", + "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", + "format": "prettier --write src/" + }, + "dependencies": { + "vue": "^3.4.29", + "vue-router": "^4.3.3" + }, + "devDependencies": { + "@rushstack/eslint-patch": "^1.8.0", + "@tsconfig/node20": "^20.1.4", + "@types/node": "^20.14.5", + "@vitejs/plugin-vue": "^5.0.5", + "@vue/eslint-config-prettier": "^9.0.0", + "@vue/eslint-config-typescript": "^13.0.0", + "@vue/tsconfig": "^0.5.1", + "eslint": "^8.57.0", + "eslint-plugin-vue": "^9.23.0", + "npm-run-all2": "^6.2.0", + "prettier": "^3.2.5", + "typescript": "~5.4.0", + "vite": "^5.3.1", + "vue-tsc": "^2.0.21" + } +} diff --git a/vue/public/favicon.ico b/vue/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/vue/src/App.vue b/vue/src/App.vue new file mode 100644 index 0000000..7905b05 --- /dev/null +++ b/vue/src/App.vue @@ -0,0 +1,85 @@ + + + + + diff --git a/vue/src/assets/base.css b/vue/src/assets/base.css new file mode 100644 index 0000000..8816868 --- /dev/null +++ b/vue/src/assets/base.css @@ -0,0 +1,86 @@ +/* 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/vue/src/assets/logo.svg b/vue/src/assets/logo.svg new file mode 100644 index 0000000..7565660 --- /dev/null +++ b/vue/src/assets/logo.svg @@ -0,0 +1 @@ + diff --git a/vue/src/assets/main.css b/vue/src/assets/main.css new file mode 100644 index 0000000..36fb845 --- /dev/null +++ b/vue/src/assets/main.css @@ -0,0 +1,35 @@ +@import './base.css'; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; + padding: 3px; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/vue/src/components/HelloWorld.vue b/vue/src/components/HelloWorld.vue new file mode 100644 index 0000000..38d821e --- /dev/null +++ b/vue/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/vue/src/components/TheWelcome.vue b/vue/src/components/TheWelcome.vue new file mode 100644 index 0000000..49d8f73 --- /dev/null +++ b/vue/src/components/TheWelcome.vue @@ -0,0 +1,88 @@ + + + diff --git a/vue/src/components/WelcomeItem.vue b/vue/src/components/WelcomeItem.vue new file mode 100644 index 0000000..6d7086a --- /dev/null +++ b/vue/src/components/WelcomeItem.vue @@ -0,0 +1,87 @@ + + + diff --git a/vue/src/components/icons/IconCommunity.vue b/vue/src/components/icons/IconCommunity.vue new file mode 100644 index 0000000..2dc8b05 --- /dev/null +++ b/vue/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/vue/src/components/icons/IconDocumentation.vue b/vue/src/components/icons/IconDocumentation.vue new file mode 100644 index 0000000..6d4791c --- /dev/null +++ b/vue/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/vue/src/components/icons/IconEcosystem.vue b/vue/src/components/icons/IconEcosystem.vue new file mode 100644 index 0000000..c3a4f07 --- /dev/null +++ b/vue/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/vue/src/components/icons/IconSupport.vue b/vue/src/components/icons/IconSupport.vue new file mode 100644 index 0000000..7452834 --- /dev/null +++ b/vue/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/vue/src/components/icons/IconTooling.vue b/vue/src/components/icons/IconTooling.vue new file mode 100644 index 0000000..660598d --- /dev/null +++ b/vue/src/components/icons/IconTooling.vue @@ -0,0 +1,19 @@ + + diff --git a/vue/src/main.ts b/vue/src/main.ts new file mode 100644 index 0000000..5a5dbdb --- /dev/null +++ b/vue/src/main.ts @@ -0,0 +1,11 @@ +import './assets/main.css' + +import { createApp } from 'vue' +import App from './App.vue' +import router from './router' + +const app = createApp(App) + +app.use(router) + +app.mount('#app') diff --git a/vue/src/router/index.ts b/vue/src/router/index.ts new file mode 100644 index 0000000..a49ae50 --- /dev/null +++ b/vue/src/router/index.ts @@ -0,0 +1,23 @@ +import { createRouter, createWebHistory } from 'vue-router' +import HomeView from '../views/HomeView.vue' + +const router = createRouter({ + history: createWebHistory(import.meta.env.BASE_URL), + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + path: '/about', + name: 'about', + // route level code-splitting + // this generates a separate chunk (About.[hash].js) for this route + // which is lazy-loaded when the route is visited. + component: () => import('../views/AboutView.vue') + } + ] +}) + +export default router diff --git a/vue/src/views/AboutView.vue b/vue/src/views/AboutView.vue new file mode 100644 index 0000000..756ad2a --- /dev/null +++ b/vue/src/views/AboutView.vue @@ -0,0 +1,15 @@ + + + diff --git a/vue/src/views/HomeView.vue b/vue/src/views/HomeView.vue new file mode 100644 index 0000000..d5c0217 --- /dev/null +++ b/vue/src/views/HomeView.vue @@ -0,0 +1,9 @@ + + + diff --git a/vue/tsconfig.app.json b/vue/tsconfig.app.json new file mode 100644 index 0000000..e14c754 --- /dev/null +++ b/vue/tsconfig.app.json @@ -0,0 +1,14 @@ +{ + "extends": "@vue/tsconfig/tsconfig.dom.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/vue/tsconfig.json b/vue/tsconfig.json new file mode 100644 index 0000000..66b5e57 --- /dev/null +++ b/vue/tsconfig.json @@ -0,0 +1,11 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.node.json" + }, + { + "path": "./tsconfig.app.json" + } + ] +} diff --git a/vue/tsconfig.node.json b/vue/tsconfig.node.json new file mode 100644 index 0000000..f094063 --- /dev/null +++ b/vue/tsconfig.node.json @@ -0,0 +1,19 @@ +{ + "extends": "@tsconfig/node20/tsconfig.json", + "include": [ + "vite.config.*", + "vitest.config.*", + "cypress.config.*", + "nightwatch.conf.*", + "playwright.config.*" + ], + "compilerOptions": { + "composite": true, + "noEmit": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + + "module": "ESNext", + "moduleResolution": "Bundler", + "types": ["node"] + } +} diff --git a/vue/vite.config.ts b/vue/vite.config.ts new file mode 100644 index 0000000..5c45e1d --- /dev/null +++ b/vue/vite.config.ts @@ -0,0 +1,16 @@ +import { fileURLToPath, URL } from 'node:url' + +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue(), + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +})