diff --git a/docs/images/ss1.png b/docs/images/ss1.png new file mode 100644 index 0000000..ea861bf Binary files /dev/null and b/docs/images/ss1.png differ diff --git a/docs/images/ss2.png b/docs/images/ss2.png new file mode 100644 index 0000000..08f151c Binary files /dev/null and b/docs/images/ss2.png differ diff --git a/docs/images/ss3.png b/docs/images/ss3.png new file mode 100644 index 0000000..5786186 Binary files /dev/null and b/docs/images/ss3.png differ diff --git a/docs/images/ss4.png b/docs/images/ss4.png new file mode 100644 index 0000000..5cfdb06 Binary files /dev/null and b/docs/images/ss4.png differ diff --git a/docs/images/ss5.png b/docs/images/ss5.png new file mode 100644 index 0000000..13cb26b Binary files /dev/null and b/docs/images/ss5.png differ diff --git a/docs/images/ss6.png b/docs/images/ss6.png new file mode 100644 index 0000000..c442220 Binary files /dev/null and b/docs/images/ss6.png differ diff --git a/docs/images/ss7.png b/docs/images/ss7.png new file mode 100644 index 0000000..e630dcc Binary files /dev/null and b/docs/images/ss7.png differ diff --git a/docs/images/ss8.png b/docs/images/ss8.png new file mode 100644 index 0000000..ff9f404 Binary files /dev/null and b/docs/images/ss8.png differ diff --git a/docs/index.js b/docs/index.js index 7bfcb0e..142a1d3 100644 --- a/docs/index.js +++ b/docs/index.js @@ -12,21 +12,9 @@ const docs = { }, { id: 'quick-start', - title: 'Quick Start', - type: 'embedded', - content: ` -# Quick Start Guide - -Get up and running in minutes! - -\`\`\`javascript -// Example code -const docs = new Docs({ - container: '#app', - theme: 'light' -}); -\`\`\` - ` + title: 'Setup and Spotify Access', + type: 'markdown', + path: 'quick-start.md' } ] }, diff --git a/docs/intro.md b/docs/intro.md index 285c11f..ab45f83 100644 --- a/docs/intro.md +++ b/docs/intro.md @@ -27,7 +27,11 @@ Please read the [Development Guide](development.md) if you'd like to contribute For detailed information on installation, usage, and contribution guidelines, please refer to our documentation sections on the left. - - Akrm Al-Hakimi - Data Engineer @ Cummins Inc. - alhakimiakrmj@gmail.com +-------- +--------- + + +Akrm Al-Hakimi +Data Engineer @ Cummins Inc. +alhakimiakrmj@gmail.com diff --git a/docs/quick-start.md b/docs/quick-start.md new file mode 100644 index 0000000..e5b4def --- /dev/null +++ b/docs/quick-start.md @@ -0,0 +1,108 @@ +# Setup Guide + +# Installation + +### Windows + +I've found the best terminals for this are WezTerm and Microsoft's Windows Terminal - `wt` + +Python 3.8+ is required (grab the latest, if you are able to) + +Install Tick using pip + ```powershell + pip install tick + ``` + +### macOS/Linux +Users can install Tick through pip or brew + ```bash + pip install tick + ``` + ```bash + [brew install tick] + ``` + (If you're using tap) + ```bash + brew tap cachebag/tick + ``` +macOS users can also utilize iTerm2's terminal window customization settings to achieve the look seen in these images where the window is transparent/blurred: + +Screenshot of Tick interface +Screenshot of Tick interface + +I'm sure Linux users using environments like Hyprland can achieve a similar look. + +# Theme Customization + +### Default Themes +Tick comes with several built-in themes via Textual: +- textual-dark and light +- solarized light +- monokai +- tokyo-night +- gruvbox (Tick's default) +- nord +- dracula + +and more... + +To change your theme, you can toggle your main menu with `Esc` and head over to settings: + +Screenshot of Tick interface + +Screenshot of Tick interface + + + +### Creating Custom Themes (NOT DONE) + +# Keyboard Navigation + +### Good to know Global Shortcuts +- `Ctrl+Q`: Quit application in any view +- `Esc`: Toggle the main menu +- `Tab`: Change focus between elements on any given page + +In general, you can navigate the entire app with your arrow, esc and enter keys, except for specific pages where the functionality requires a more graceful approach to navigation, wherein the controls for those pages will show at the footer of the app. Look into the docs of each page for more information. + +# Spotify Integration (Premium Users Only) + +Currently, the app is listed as "Under Development" through my Spotify dashboard. I can onboard up to 25 users and give them access to the API so that you can listen to your Spotify playlists and access other features within Tick. + + **Please note:** This is only available to Premium users. Spotify currently does not grant access to users using a free subscription plan. + +Please email me at alhakimiakrmj@gmail.com or message me on discord: cachebag, if you would like access to Spotify within Tick. + +Once enough concurrent users are using Tick, I will submit a request to extend access for all users to Spotify. + +### Usage +Once you have been added to my user list, you can head over to Spotify in Tick, and click the Authenticate button near the instructions at the bottom right to gain access to your playlists. + +Screenshot of Tick interface + + + + + +Screenshot of Tick interface + + + Control playback from your home view + +Screenshot of Tick interface + + +### Troubleshooting +#### Common issues and their solutions: +1. Authentication Failed + - Please make sure you have a _premium_ account. Spotify API does not give access to free users. + - Ensure you gave me the right email to ensure access is properly granted. + +2. 403 Error - Playback issues + - The way Spotify's API works, you need to have either Spotify open in a Web Browser, or open on your Desktop app in order to listen to the music. Once you've opened either of those, you can minimize Spotify and return to Tick and continue listening to Spotify. + - Please make sure you have a _premium_ account. Spotify API does not give access to free users. + +3. Connection Problems + - You _do_ need an internet connection to access Spotify. There is no offline access. + +For additional support or questions, please don't hesitate to open an issue on the [GitHub](https://github.com/cachebag/Tick) or contact me directly. \ No newline at end of file