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 0000000..df36fcf Binary files /dev/null and b/vue/public/favicon.ico differ 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)) + } + } +})