Initial Commit

.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+ root: true,
+ env: { browser: true, es2020: true },
+ extends: [
+ "eslint:recommended",
+ "plugin:@typescript-eslint/recommended",
+ "plugin:react-hooks/recommended",
+ "prettier",
+ ],
+ ignorePatterns: ["dist", ".eslintrc.cjs"],
+ parser: "@typescript-eslint/parser",
+ plugins: ["react-refresh", "import", "prettier"],
+ rules: {
+ "prettier/prettier": "warn",
+ "react-refresh/only-export-components": [
+ "warn",
+ { allowConstantExport: true },
+ ],
+ "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
+ },
+};

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Optional stylelint cache
+.stylelintcache

.husky/pre-commit

@@ -0,0 +1,8 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm install
+pnpm typecheck
+pnpm lint
+pnpm stylelint
+pnpm format

.prettierrc.cjs

@@ -0,0 +1,18 @@
+/** @typedef {import("prettier").Config} PrettierConfig */
+/** @typedef {import("@ianvs/prettier-plugin-sort-imports").PluginConfig} SortImportsConfig */
+
+/** @type { PrettierConfig | SortImportsConfig } */
+module.exports = {
+ singleQuote: false,
+ trailingComma: "all",
+ plugins: ["@ianvs/prettier-plugin-sort-imports"],
+ importOrder: [
+ "^(react/(.*)$)|^(react$)",
+ "<THIRD_PARTY_MODULES>",
+ "",
+ "^@/",
+ "^[../]",
+ "^[./]",
+ ],
+ importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
+};

.stylelintrc.json

@@ -0,0 +1,35 @@
+{
+ "extends": ["stylelint-config-recommended", "stylelint-config-standard-scss"],
+ "plugins": ["stylelint-order"],
+ "rules": {
+ "at-rule-no-unknown": [
+ true,
+ {
+ "ignoreAtRules": [
+ "use",
+ "extend",
+ "at-root",
+ "debug",
+ "warn",
+ "error",
+ "if",
+ "else",
+ "for",
+ "each",
+ "while",
+ "mixin",
+ "include",
+ "content",
+ "return",
+ "function"
+ ]
+ }
+ ],
+ "selector-pseudo-class-no-unknown": [
+ true,
+ {
+ "ignorePseudoClasses": ["global"]
+ }
+ ]
+ }
+}

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+ "recommendations": [
+ "dbaeumer.vscode-eslint",
+ "esbenp.prettier-vscode",
+ "stylelint.vscode-stylelint"
+ ]
+}

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+ "stylelint.validate": ["css", "scss"],
+ "eslint.rules.customizations": [{ "rule": "*", "severity": "warn" }],
+ "editor.codeActionsOnSave": {
+ "source.fixAll.eslint": "explicit",
+ "source.fixAll.stylelint": "explicit"
+ },
+ "editor.defaultFormatter": "esbenp.prettier-vscode",
+ "editor.formatOnSave": true
+}

CODE_OF_CONDUCT.md

@@ -0,0 +1,132 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, caste, color, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
+ and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the
+ overall community
+
+Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or
+ advances of any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
+ address, without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+[[email protected]](mailto:[email protected]).
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+[https://www.contributor-covenant.org/version/2/0/code_of_conduct.html][v2.0].
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
+
+For answers to common questions about this code of conduct, see the FAQ at
+[https://www.contributor-covenant.org/faq][FAQ]. Translations are available
+at [https://www.contributor-covenant.org/translations][translations].
+
+[homepage]: https://www.contributor-covenant.org
+[v2.0]: https://www.contributor-covenant.org/version/2/0/code_of_conduct.html
+[Mozilla CoC]: https://github.com/mozilla/diversity
+[FAQ]: https://www.contributor-covenant.org/faq
+[translations]: https://www.contributor-covenant.org/translations

CONTRIBUTING.md

@@ -0,0 +1,51 @@
+# ABC Virtual Background Maker Contributing Guide
+
+Hi! We're really excited that you're interested in contributing to ABC Virtual Background Maker! Before submitting your contribution, please read through the following guide.
+
+## Repo Setup
+
+To develop locally, fork the repository and clone it in your local machine. The package manager used to install and link dependencies must be [pnpm](https://pnpm.io/).
+
+To develop and test:
+
+1. Run `pnpm i` in root folder.
+
+2. (Optional. Run `pnpm run read-files` if you want to update app.config.json with new images)
+
+3. Run `pnpm run dev` in root folder.
+
+4. Dev server will be running at
+
+ ```bash
+ http://localhost:5173/
+ ```
+
+## Pull Request Guidelines
+
+- Checkout a topic branch from a base branch (e.g. `main`), and merge back against that branch.
+- Make sure husky pre-commit hook pass!
+- If adding a new feature:
+
+ - Provide a convincing reason to add this feature. Ideally, you should open a suggestion issue first, and have it approved before working on it.
+
+- If fixing a bug:
+
+ - If you are resolving a special issue, add `fix #issueId` in your PR title.
+ - Provide a detailed description of the bug and how you fix it in the PR.
+
+## Maintenance Guidelines
+
+> The following section is mostly for maintainers who have commit access, but it's helpful to go through if you intend to make non-trivial contributions to the codebase.
+
+### Think Before Adding a Dependency
+
+- Most deps should be added to `devDependencies`.
+- Avoid deps with large transitive dependencies that result in bloated size compared to the functionality it provides.
+
+### Ensure Type Support
+
+ABC Virtual Background Maker aims to be fully usable as a dependency in a TypeScript project.
+
+## Deploy Demo
+
+Once the PR merged into base branch (e.g. `main`), it will be deployed by automatically.

Dockerfile

@@ -0,0 +1,32 @@
+# Use the Nginx image from Docker Hub
+FROM nginx:1.25.3-alpine-slim
+
+# Install Node.js and npm
+RUN apk add --no-cache nodejs npm
+
+# Set the working directory for the build stage
+WORKDIR /app
+
+# Copy application source code into the container
+COPY . .
+
+# Install application's dependencies and build
+RUN npm install
+RUN npm run read-files
+RUN npm run build
+
+# Set the working directory in the container
+WORKDIR /usr/share/nginx/html
+
+# Remove default Nginx static assets
+RUN rm -rf ./*
+
+# Copy the static content to the Nginx web root directory
+RUN cp -r /app/dist .
+RUN cp -r /app/backgrounds backgrounds
+
+# Expose port 80 to the outside once the container has launched
+EXPOSE 80
+
+# Start Nginx and keep it running in the foreground
+CMD ["nginx", "-g", "daemon off;"]