Skip to content

Latest commit

 

History

History
95 lines (63 loc) · 3.71 KB

CONTRIBUTING.md

File metadata and controls

95 lines (63 loc) · 3.71 KB
Raw

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.

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 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:

{
  "props": {
    "data": "https://github.com/lyqht/mini-qr"
    // other props...
  },
  "style": {
    // other styles...
  }
}

Combine "style" with the value of "props" in a new json.

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 for more details.

Final Note

The project maintainer, @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! ✨