QuickSheet

A word processor designed with students and cheatsheets in mind.

Installation

View the latest release and download the file that is compatible with your operating system.

Additional Notes for macOS Users

TL;DR

Run the following command in your terminal after unzipping the downloaded file:

xattr -c <path/to/quicksheet.app>

quicksheet.app should open with no issue after this.

The Full Explanation

Apple requires applications to be code signed and notarized to run on a user's machine without disabling additional operating system security checks.

This is a security feature used to certify that an application was created by a trustworthy source.

However, code signing certificates for macOS apps can only be obtained through Apple by purchasing a membership to the Apple Developer Program, which costs 99 USD.

As we are not currently members of the Apple Developer Program, we are unable to code sign and notarize our macOS distributables.

Hence, our macOS distributables get an extended attribute com.apple.Quarantine which triggers the message: “quicksheet.app” is damaged and can’t be opened. You should move it to the Bin. when trying to open quicksheet.app.

To bypass this, we run xattr -c <path/to/quicksheet.app> in the terminal to remove all extended attributes from quicksheet.app

• All credits to this discussion for helping us discover this workaround

Alternatively, if you do not wish to bypass these security measures, you can run QuickSheet by cloning this repository and running the development server:

1. Run git clone https://github.com/zackjh/quicksheet.git to clone this repository
2. Run cd quicksheet to navigate to the correct working directory
3. Run npm install to install the dependencies
4. Run npm start to start the development server

Developer Notes

Setting Up Your Development Environment

1. Install VS Code extensions for EditorConfig, ESLint, Prettier, and Tailwind CSS

   • Add the following into your settings.json within VS Code (if they are not already there)

     "files.associations": {
       "*.css": "tailwindcss" // Always open .css files in Tailwind CSS mode - see Tailwind VS Code extension page for more details
     },
     "editor.quickSuggestions": {
       "strings": "on" // Trigger completions when editing "string" content - see Tailwind VS Code extension page for more details
     },
     "editor.formatOnSave": true, // Format on save (highly recommended)
     "tailwindCSS.experimental.classRegex": ["class:\\s*?[\"'`]([^\"'`]*).*?,"], // Enables Tailwind IntelliSense inside TipTap objects
     "tailwindCSS.classAttributes": ["class", "className", ".*Styles.*"] // Enables Tailwind IntelliSense inside variables containing 'Styles' in their name, as well as when defining classes

2. Run npm install to install dependencies

3. Run npm start to start the development server

Development Practices to Adhere To

• Create branches when developing new features or making potentially breaking changes
  • Use descriptive branch names such as bugfix-broken-link or feature-settings-page
  • It is acceptable to commit to main when making minor or low-impact changes such as updating documentation
• Deal with all linting errors before committing
• Use Conventional Commits when writing commit messages

Other Notes

• Refer to package.json for npm scripts

Useful Resources

• React Docs
• React TypeScript Cheatsheet
• TypeScript Handbook
• Electron Forge Docs
• Electron Docs

Guide to Packaging & Distributing the Application

macOS

1. Run npm run make --platform="darwin" --arch="arm64,x64" to package and create the distributables
2. Navigate to out/make/zip/darwin and attach quicksheet-darwin-arm64-x.x.x.zip and quicksheet-darwin-x64-x.x.x.zip to the GitHub release

Windows

3. Run npm install to ensure dependencies are installed
4. While on a Windows system, run npm run make to package and create the distributables

my-app/
├── out/
│   ├── make/
│   │   ├── squirrel.windows/
│   │   │   ├── MyApp Setup 1.0.0.exe
│   │   │   ├── RELEASES
│   │   │   ├── MyApp-1.0.0-full.nupkg
│   │   │   └── ... (other Squirrel-related files)
│   │   └── zip/
│   │       └── my-app-1.0.0-win32-x64.zip

5. Navigate to out/make/squirrel.windows and attach quicksheet-x.x.x.Setup.exe to the GitHub release or run npm run publish

Linux

1. Run npm install to ensure dependencies are installed
2. Run npm run make to package and create the distributables

my-app/
├── src/
│   ├── index.js
│   └── ... (other source files)
├── package.json
├── out/
│   ├── make/
│   │   ├── deb/
│   │   │   └── my-app_1.0.0_amd64.deb
│   │   ├── rpm/
│   │   │   └── my-app-1.0.0.x86_64.rpm
│   │   ├── zip/
│   │   │   └── my-app-1.0.0-linux-x64.zip
│   │   └── ... (other possible formats)

3. Navigate to out/make/deb and attach quicksheet-x.x.x.amd64.deb to the GitHub release
4. Navigate to out/make/rpm and attach quicksheet-x.x.x.x86_64.rpm to the GitHub release