forked from benchmarkstudios/slackbox
-
Notifications
You must be signed in to change notification settings - Fork 0
/
compositor.json
90 lines (90 loc) · 6.2 KB
/
compositor.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
{
"name": "benchmarkstudios/slackbox",
"version": "0.1.4",
"libraries": {
"xv": "^1.1.25"
},
"title": "",
"branch": "",
"style": {
"name": "Material",
"componentSet": {
"nav": "nav/DarkAbsoluteNav",
"header": "header/GradientHeader",
"article": "article/BasicArticle",
"footer": "footer/BasicFooter"
},
"fontFamily": "Roboto, sans-serif",
"heading": {
"fontWeight": 500,
"letterSpacing": "-0.01em"
},
"colors": {
"text": "#212121",
"background": "#fff",
"primary": "#2196f3",
"secondary": "#1565c0",
"highlight": "#ff4081",
"border": "#e0e0e0",
"muted": "#f5f5f5"
},
"layout": {
"centered": true,
"bannerHeight": "80vh",
"maxWidth": 896
}
},
"content": [
{
"component": "nav",
"links": [
{
"href": "https://github.com/benchmarkstudios/slackbox",
"text": "GitHub"
},
{
"href": "https://npmjs.com/package/benchmark-slackbox",
"text": "npm"
}
]
},
{
"component": "header",
"heading": "slackbox",
"subhead": "🎵 Spotify playlist collaboration through Slack.",
"children": [
{
"component": "ui/TweetButton",
"text": "slackbox: 🎵 Spotify playlist collaboration through Slack.",
"url": ""
},
{
"component": "ui/GithubButton",
"user": "benchmarkstudios",
"repo": "slackbox"
}
],
"text": "v0.1.0"
},
{
"component": "article",
"metadata": {
"source": "github.readme"
},
"html": "\n<p>Spotify playlist collaboration through Slack. Brought to you by the lovely people at <a href=\"http://benchmark.co.uk\">Benchmark</a>.</p>\n<p><a href=\"https://heroku.com/deploy\"><img src=\"https://www.herokucdn.com/deploy/button.png\"></a></p>\n<p>Simply create a Slash Command, such as <code>/jukebox</code>, which accepts a track name (also the artist too for a less fuzzy search) to add to a pre-defined Spotify playlist:</p>\n<pre>/jukebox <span class=\"hljs-keyword\">Bell </span><span class=\"hljs-keyword\">Biv </span>DeVoe – Poison</pre><h2>Installation</h2>\n<h3>Slack</h3>\n<p>There are two ways to use slackbox - via a Slash Commands or an Outgoing Webhook:</p>\n<h4>Slash Command</h4>\n<p>Slash commands allow for private functions within Slack which will <strong>not</strong> show up in chat history.</p>\n<p>First you'll want to create your Slack Slash Command, which you can do by going to your <a href=\"https://my.slack.com/services/new/slash-commands\">Slash Commands page</a>.</p>\n<h4>Outgoing WebHook</h4>\n<p>Outgoing webhooks allow data to be exported from Slack channels. Using an outgoing webhook means song additions will be public so users will know when songs are requested and who requested them.</p>\n<p>First you'll want to create your Outgoing Webhook, which you can do by going to your <a href=\"https://my.slack.com/services/new/outgoing-webhook\">Outgoing WebHooks page</a>.</p>\n<p>Outgoing WebHooks work best with a trigger word. This way only messages with the trigger word (or words) will be parsed and added.</p>\n<p><strong>NOTE:</strong> You may only use slash commands <em>or</em> outgoing webhooks. The Slack Token environment variable can only be set once so it needs to be the token from this or the slash command.</p>\n<h4>Common</h4>\n<p>During setup, have your slash command or outgoing webhook submit a POST to your app's <code>/store</code> endpoint, e.g. <code>https://app-name.herokuapp.com/store</code>.</p>\n<p>Make a note of the <code>token</code> (either from the slash command or outgoing webhook), as you'll need it later to help guard against cross-site request forgery.</p>\n<h3>Spotify</h3>\n<p>Head over to <a href=\"http://developer.spotify.com\">Spotify's Developer Site</a> and create a new Application. Make sure you add whatever slackbox's callback URI as a valid callback URI. If you're running locally, this will be <code>http://localhost:5000/callback</code> or on Heroku <code>https://app-name.herokuapp.com/callback</code></p>\n<p>Make a note of the <code>key</code>, <code>secret</code> and <code>callback URI</code> too, as you'll need these later as well.</p>\n<p>Also, don't forget to make a playlist. If you do this through <a href=\"http://play.spotify.com\">Spotify's web interface</a> then the <code>playlist identifier</code> will be the last segment of the URI - make a note of this too! If there's a better way of finding this out, we're all ears. If you do this through the app, right-click the playlist to get it's web URL and again, you need the last segment of the URI.</p>\n<h3>Environment variables</h3>\n<p>Once you've cloned slackbox or hit the "Deploy with Heroku" button you'll need to setup the following environment variables. These can either be stored in a <code>.env</code> or set up as config variables in Heroku.</p>\n<ul>\n<li><code>SLACK_TOKEN</code> - The token from Slack's Slash Command.</li>\n<li><code>SLACK_OUTGOING</code> - True if using <a href=\"https://my.slack.com/services/new/outgoing-webhook\">Slack Outgoing WebHooks</a>, false if using <a href=\"https://my.slack.com/services/new/slash-commands\">Slack Slash Commands</a></li>\n<li><code>SPOTIFY_KEY</code> - Your Spotify application key (a.k.a Client ID).</li>\n<li><code>SPOTIFY_SECRET</code> - Your Spotify application secret (a.k.a Client Secret).</li>\n<li><code>SPOTIFY_USERNAME</code> - Your Spotify username.</li>\n<li><code>SPOTIFY_PLAYLIST_ID</code> - Your playlist identifier.</li>\n<li><code>SPOTIFY_REDIRECT_URI</code> - URI to redirect to once your user has allowed the application's permissions.</li>\n</ul>\n<h3>Authentication</h3>\n<p>Visit your slackbox's home page to authenticate yourself with Spotify and you should be all set!</p>\n"
},
{
"component": "footer",
"links": [
{
"href": "https://github.com/benchmarkstudios/slackbox",
"text": "GitHub"
},
{
"href": "https://github.com/benchmarkstudios",
"text": "benchmarkstudios"
}
]
}
]
}