Add contributing guidelines (#57)

CODE_OF_CONDUCT.md

@@ -0,0 +1,127 @@
+# 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, 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.
+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.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.orggit
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

CONTRIBUTING.md

@@ -0,0 +1,95 @@
+# Contributing to Mini QR
+
+Thank you for your interest in contributing to the Mini QR project! Contributions from the community are welcome to help improve and enhance this tool.
+
+You can work on existing issues or suggest new ones. You can also share your presets with the world by referring to [this section](#adding-new-presets).
+
+Before you start, please take a moment to read through these guidelines.
+
+## Contributing Guidelines
+
+### Issue Assignment
+
+- Always request to be assigned to an issue before working on it, especially during the Hacktoberfest period. This helps prevent conflicting and duplicate work.
+- Comment on the issue you'd like to work on, asking to be assigned.
+- Wait for [@lyqht](https://github.com/lyqht) to assign you before starting work.
+
+### Reporting Bugs or Suggesting Improvements
+
+- If you find a bug or want to suggest an improvement, please raise an issue.
+- For bug reports, provide clear steps for reproduction.
+- For improvement suggestions, include mockups if the change is UI-based.
+
+## Getting Started
+
+1. Fork the repository and clone it to your local machine.
+2. Install the necessary dependencies by running `pnpm install`. If you don't have pnpm installed, you can install it by running `npm install -g pnpm`.
+3. Start the development server by running `pnpm dev`.
+4. Create a new branch for your contribution, preferably with a name related to the issue you're working on. e.g. `author/issue-description`.
+5. Create a pull request for that branch, with the base branch set to `main`. Ensure that commit messages are clear and concise.
+
+Note that your changes may be modified by the maintainer to ensure consistency and best practices. The maintainer may also update documentation(README.md) on your PR.
+
+### Codebase overview
+
+The project is a Vite-powered Vue.js application with Tailwind CSS for styling. The main components are:
+
+- `src/App.vue`: This is the entry point of the application. Different logic are separated by comment regions.
+- `src/components/StyledQRCode.vue`: This component is used to render the QR code. However, note that the actual QR code output includes a wrapper around this component, which you can find by `id="qr-code-container"` in `src/App.vue`.
+
+Don't touch the other components in `src/components/` as they are generated by radix-vue.
+
+- Styles can be found in the style block in `src/App.vue`.
+- Util functions are found in `src/utils/`.
+- Presets are found in `src/utils/presets.ts`. For adding new presets, you can refer to the existing ones and fill in the necessary properties.
+- Assets are found in `src/assets/`.
+
+## Adding new presets
+
+An easy way to add a new preset is to create the QR code on the website first, and then save the config. The config JSON file will look something like this:
+
+```json
+{
+  "props": {
+    "data": "https://github.com/lyqht/mini-qr"
+    // other props...
+  },
+  "style": {
+    // other styles...
+  }
+}
+```
+
+Combine "style" with the value of "props" in a new json.
+
+```ts
+const yourNewPreset = {
+  data: 'https://github.com/lyqht/mini-qr',
+  // other props...
+  style: {
+    // other styles...
+  }
+}
+```
+
+Then add it to the `allPresets` array in `src/utils/presets.ts`. New presets should always be added as the last item in the array.
+
+You will then see your new preset in the Presets dropdown in the website.
+
+## License
+
+By contributing to Mini QR, you agree that your contributions will be licensed under the GPL v3 license.
+
+## Code of Conduct
+
+Please refer to the [Code of Conduct](CODE_OF_CONDUCT.md) for more details.
+
+## Final Note
+
+The project maintainer, [@lyqht](https://github.com/lyqht), has the final say on whether a pull request will be merged. Please be patient and respectful throughout the review process.
+
+Thank you for contributing to Mini QR! ✨
+
+```
+
+```

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "styled-qr-code-generator",
+  "name": "mini-qr",
   "private": true,
-  "version": "0.3.0",
+  "version": "0.9.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -55,4 +55,4 @@
     "typescript": "^5.3.3",
     "vue-eslint-parser": "^9.3.1"
   }
-}
+}

src/utils/presets.ts

@@ -1,9 +1,8 @@
 import PLACEHOLDER_IMAGE_URL from '@/assets/placeholder_image.png'
-import type { StyledQRCodeProps } from '@/components/StyledQRCode.vue'
-import type { DrawType } from 'qr-code-styling'
 import GeeksHackingConfig from '@/assets/presets/geekshacking.json'
 import SpDigitalConfig from '@/assets/presets/spdigital.json'
 import GovtechStackCommunityConfig from '@/assets/presets/govtech_stack.json'
+import type { DrawType, Options as StyledQRCodeProps } from 'qr-code-styling'
 
 export interface CustomStyleProps {
   borderRadius?: string
@@ -15,7 +14,7 @@ export type PresetAttributes = {
   name: string
 }
 
-export type Preset = Required<StyledQRCodeProps> & PresetAttributes
+export type Preset = Omit<Required<StyledQRCodeProps>, 'shape' | 'qrOptions'> & PresetAttributes
 
 const defaultPresetOptions = {
   backgroundOptions: {

src/vuecomposables/dark_mode.ts

@@ -1,25 +0,0 @@
-import { ref, onMounted, onUnmounted } from 'vue'
-
-export function useDarkMode() {
-  // This ref will hold the value indicating if dark mode is preferred or not.
-  const isDark = ref(window.matchMedia('(prefers-color-scheme: dark)').matches)
-
-  // This function will update the `isDark` value based on the system preference.
-  const updateDarkMode = (e) => {
-    isDark.value = e.matches
-  }
-
-  onMounted(() => {
-    // When the component using this composable is mounted, add an event listener to listen for changes.
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateDarkMode)
-  })
-
-  onUnmounted(() => {
-    // When the component is unmounted, remove the event listener to clean up.
-    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', updateDarkMode)
-  })
-
-  return {
-    isDark
-  }
-}