Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kinopio-club/kinopio-client
Kinopio is a creative thinking tool
https://github.com/kinopio-club/kinopio-client
Last synced: 3 days ago
JSON representation
Kinopio is a creative thinking tool
- Host: GitHub
- URL: https://github.com/kinopio-club/kinopio-client
- Owner: kinopio-club
- License: other
- Created: 2019-05-16T16:26:12.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-10-30T00:57:33.000Z (13 days ago)
- Last Synced: 2024-10-30T02:58:07.672Z (13 days ago)
- Language: Vue
- Homepage: https://kinopio.club
- Size: 58.4 MB
- Stars: 717
- Watchers: 5
- Forks: 56
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-github-repos - kinopio-club/kinopio-client - Kinopio is a creative thinking tool (Vue)
README
[](https://app.netlify.com/sites/kinopio-client/deploys)
# kinopio-client
Kinopio is a spatial thinking canvas for your new ideas and hard problems.
The `kinopio-client` is the client web app that users use to read and update spaces, cards, connections, etc. – which is saved to localStorage and to the `kinopio-server` via API requests, queued API operations, and websocket broadcasts.
- [Kinopio Architecture and Costs](https://kinopio.club/JOGXFJ0FEMpS3crbh6U9k)
- [How Kinopio is Made](https://pketh.org/how-kinopio-is-made.html) (How data is saved)
- [Discord](https://kinopio.club/discord)
## Install
```
git clone https://github.com/pketh/kinopio-client.git
cd kinopio-client
npm install
npm install -g @vue/cli
npm install -g hostile
hostile set localhost kinopio.local
```
## Run
```
npm run serve
https://kinopio.local:8080
```
## Run with Production API Server
You can force the local app to use the prod API by editing `.env.local` so that `VITE_PROD_SERVER=true`. Create `env.local` by duplicating and renaming `.env.local.sample`.
When the app starts up, the `🐸 kinopio-server URL` will be displayed in the browser logs.
## Debugging
npm run lint
Use the [Vue devtools](https://github.com/vuejs/vue-devtools) for Firefox and Chrome. For Safari, uncomment code in `main.js` then,
./node_modules/.bin/vue-devtools
## Primary Files
| File | Description |
| ------------- |-------------|
| `router` | Client-side routes |
| `App.vue` | Root component, used by all routes|
| `store.js` | [Vuex](https://vuex.vuejs.org/) store, contains global observables and methods needed by multiple components |
| `currentSpace.js` | Vuex store module that handles loading spaces
| `utils.js` | Functional methods that just do dom manipulations or common tasks. These can't access components or store directly |
| `views/Space.vue` | Contains the core interaction layer which sends user inputs to painting, connecting, dragging etc. components. Also where new connections are created and checked to see if they connect |
| `views/Add.vue` | `kinopio.club/add` page for browser extensions and iOS share sheet |
| `components/Card.vue` | Displays cards from `store.state.currentCards`, and shows `CardDetails` |
| `components/Connection.vue` | Displays connections from `store.state.currentConnections`, and shows `ConnectionDetails` |
| `components/Box.vue` | Displays boxes from `store.state.currentBoxes`, and shows `ConnectionDetails` |
| `components/Header.vue` | Used for moving between spaces, searching/filter, shows user presence, changing user prefs, and Kinopio meta options. Shown on all routes |
| `components/layers/MagicPaint.vue` | The layers used for animating painting, scroll locking on touch, and more with ``. As well as for multiple card and connection selection which reveals `MultipleSelectedActions` |
| `components/NewBlankTemplate.vue` | Template file for new components |
| `components/NewBlankDialogTemplate.vue` | Template file for new dialog components |
## User States to Design For
| State | Description |
| ------------- |-------------|
| `offline` | localstorage and API queue operations only |
| `not signed in` | localstorage only |
| `space is read only` | cannot add cards or edit |
| `space is open` | can add cards, can only edit cards they created |
| `mobile` | touch handlers, no hover, small screen |
| `desktop zoom out` | using the zoom bar or cmd+/- |
| `pinch zoom out/in` | using native touch gesture on mobile |
| `group member or admin` | can see and edit all spaces in the group |
## Post Messages
Post messages are used to communicate with a parent `secureAppContext` environment, such as the iOS app that wraps the website in a child webview.
## How to update the 'Hello Kinopio' Space
The hello space serves as the entry point and marketing page for new users. It's generated within the app from `hello.json`.
To update it, create the space and export its json. Replace the contents of`hello.json` with the new json file.
## How to update the Changelog and "What's New"
[Instructions here](https://kinopio.club/how-to-update-changelog-oi4jZTSI_eAEvov9XbjJM)
## HTTPS Signing
> You shouldn't need to run this or update the cert until 2025, but just in case
To work with code that only works on https (e.g. clipboard copy and paste), [mkcert](https://github.com/FiloSottile/mkcert) was used to create a local ssl certificate
$ brew install mkcert
$ mkcert -install
$ mkdir -p .cert && mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem 'kinopio.local'
## Ngrok tunnelling
Use Ngrok to pipe your localhost through an external https server. Helpful for debugging on mobile.
(Note that dev kinopio-server connections won't work through Ngrok)
### Setup Ngrok
[login](http://ngrok.com), install ngrok, then connect ngrok to the kinopio ngrok account
brew install ngrok/ngrok/ngrok
ngrok authtoken NGROK_TOKEN
### Run Ngrok
ngrok http https://localhost:8080
## See Also
- [are.na/kinopio/kinopio-design](https://www.are.na/kinopio/kinopio-design)
- [github.com/kinopio-club](https://github.com/kinopio-club)
- [User Forums](https://forum.kinopio.club)
- [Discord](https://discord.gg/h2sR45Nby8)