Skip to content

Commit 1663ea3

Browse files
dblockCopilot
dblock
and
Copilot
committed
Redesign Shell website with charcoal ribbon artwork
Bring the shared responsive website layout to Shell, retain the original terminal branding and demo, and add keyboard-operable help. Preserve existing Slack OAuth, registration, status, and privacy behavior. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent ca5b5e1 commit 1663ea3

15 files changed

Lines changed: 297 additions & 69 deletions

‎.rubocop_todo.yml‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# This configuration was generated by
22
# `rubocop --auto-gen-config`
3-
# on 2026-10-24 23:19:23 UTC using RuboCop version 1.92.1.
3+
# on 2026-10-25 14:57:06 UTC using RuboCop version 1.92.1.
44
# The point is for the user to remove these configuration records
55
# one by one as the offenses are removed from the code base.
66
# Note that changes in the inspected code, or installation of new
@@ -72,7 +72,7 @@ RSpec/ContextWording:
7272
- 'spec/models/team_spec.rb'
7373
- 'spec/support/api/endpoints/it_behaves_like_a_cursor_api.rb'
7474

75-
# Offense count: 9
75+
# Offense count: 11
7676
# Configuration parameters: CountAsOne.
7777
RSpec/ExampleLength:
7878
Max: 11
@@ -94,7 +94,7 @@ RSpec/LetSetup:
9494
RSpec/MessageSpies:
9595
EnforcedStyle: receive
9696

97-
# Offense count: 23
97+
# Offense count: 25
9898
RSpec/MultipleExpectations:
9999
Max: 6
100100

@@ -128,7 +128,7 @@ RSpec/SpecFilePathFormat:
128128
- 'spec/commands/whoami_spec.rb'
129129
- 'spec/version_spec.rb'
130130

131-
# Offense count: 9
131+
# Offense count: 10
132132
# This cop supports safe autocorrection (--autocorrect).
133133
# Configuration parameters: AllowHeredoc, AllowURI, AllowQualifiedName, URISchemes, AllowRBSInlineAnnotation, AllowCopDirectives, AllowedPatterns, SplitStrings.
134134
# URISchemes: http, https

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
### Changelog
22

3+
* 2026/10/25: [#87](https://github.com/slack-ruby/slack-shellbot/pull/87): Redesign the Shell website with shared responsive layouts, charcoal ribbon artwork, a black-bordered animated demo, and expandable help while preserving Slack installation and status flows - [@dblock](https://github.com/dblock), [@Copilot](https://github.com/apps/copilot-swe-agent).
34
* 2026/10/24: [#86](https://github.com/slack-ruby/slack-shellbot/pull/86): Upgrade slack-ruby-bot-server to 2.2.1 to fix Grape error handling for unsupported requests and failing health checks - [@dblock](https://github.com/dblock), [@Copilot](https://github.com/apps/copilot-swe-agent).
45
* 2026/10/23: Upgrade to Ruby 4.0.9 and refresh dependencies and CI browser tooling - [@dblock](https://github.com/dblock), [@Copilot](https://github.com/apps/copilot-swe-agent).
56
* 2025/09/29: Upgraded to Ruby 3.4.6 - [@dblock](https://github.com/dblock).

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ A shell bot for Slack. A demo is worth a thousand words.
1313

1414
This bot is built with [slack-ruby-bot-server-events](https://github.com/slack-ruby/slack-ruby-bot-server-events). See [CONTRIBUTING](CONTRIBUTING.md).
1515

16+
## Website artwork
17+
18+
The website follows the shared Slava, Strata, and Strada layout with a terminal-inspired black/charcoal palette (base `#303035`). The editable `public/img/screenshot-background.svg` adapts the shared ribbon artwork and keeps `preserveAspectRatio="none"` on a fixed viewport-sized layer so expanding help does not resize the background. Preserve the original transparent `public/img/icon.png` terminal logo, its matching multi-resolution favicon, and the original `public/img/shell.gif` demonstration when updating the design.
19+
1620
## Copyright and License
1721

1822
Copyright (c) 2016-2025, Daniel Doubrovkine, Artsy and [Contributors](CHANGELOG.md).

‎public/favicon.ico‎

23.2 KB
Binary file not shown.

‎public/help.html.erb‎

Lines changed: 38 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,45 @@
1-
<html>
1+
<!DOCTYPE html>
2+
<html lang="en">
23
<head>
34
<title>Shell: Help</title>
45
<%= partial 'public/partials/_head.html.erb' %>
56
</head>
6-
<body>
7-
<p class='icon'>
8-
<a href='/'><img src='img/icon.png'></a>
9-
</p>
10-
<div class='help'>
11-
<pre>
12-
<%= CGI.escapeHTML(SlackShellbot::Commands::Man::HELP) %>
13-
</pre>
14-
</div>
7+
<body class="site-page help-page">
8+
<%= partial 'public/partials/_navigation.html.erb' %>
9+
<main id="main" class="page-container help-content">
10+
<header class="help-header">
11+
<h1>Shell: Help</h1>
12+
<p class="section-intro">A little help for your channel's command line.</p>
13+
</header>
14+
<section id="get-started" class="help-section" aria-labelledby="start-title">
15+
<h2 id="start-title">Get started</h2>
16+
<ol class="getting-started-steps">
17+
<li><%= partial 'public/partials/_install_button.html.erb' %> and authorize Shell for your workspace.</li>
18+
<li>Invite <code>@sh</code> into a Slack channel.</li>
19+
<li>Type <code>man</code> to see the commands, or <code>ls</code> to list files.</li>
20+
</ol>
21+
<p>Each channel has its own rudimentary file system. This is a shell bot inside Slack, not a connection to your computer's shell.</p>
22+
</section>
23+
<section class="help-section" aria-labelledby="commands-title">
24+
<h2 id="commands-title">Commands &amp; questions</h2>
25+
<details class="help-topic">
26+
<summary>Command reference</summary>
27+
<pre><%= CGI.escapeHTML(SlackShellbot::Commands::Man::HELP) %></pre>
28+
</details>
29+
<details class="help-topic">
30+
<summary>How do I create and read a file?</summary>
31+
<p>Try <code>touch notes</code> to create a file, <code>ls</code> to see it, and <code>cat notes</code> to read its contents. Use <code>mkdir projects</code> to create a directory.</p>
32+
</details>
33+
<details class="help-topic">
34+
<summary>How do I leave the editor?</summary>
35+
<p>The basic <code>vi</code>-like editor updates messages in place. Use <code>:wq</code> to quit and save, or <code>:q</code> to quit without saving.</p>
36+
</details>
37+
</section>
38+
<section id="support" class="help-section" aria-labelledby="support-title">
39+
<h2 id="support-title">Need a hand?</h2>
40+
<p>Contact <a href="mailto:dblock@vestris.com">dblock@vestris.com</a>, DM <a href="https://twitter.com/playplayio">@playplayio</a>, or <a href="https://github.com/slack-ruby/slack-shellbot/issues">report an issue on GitHub</a>.</p>
41+
</section>
42+
</main>
1543
<%= partial 'public/partials/_footer.html.erb' %>
1644
</body>
1745
</html>
18-

‎public/img/screenshot-background.svg‎

Lines changed: 43 additions & 0 deletions
Loading

‎public/index.html.erb‎

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,52 @@
1-
<html>
1+
<!DOCTYPE html>
2+
<html lang="en">
23
<head>
34
<title>Shell: A Unix Shell in Every Slack Channel</title>
45
<%= partial 'public/partials/_head.html.erb' %>
56
<script src="/scripts/register.js"></script>
67
<script src="/scripts/status.js"></script>
78
<meta name="slack-app-id" content="A01F73M28BF">
8-
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
9-
<link rel="icon" href="/favicon.ico" type="image/x-icon">
10-
<meta name="description" content="Add a rudimentary Unix shell to every Slack channel."/>
9+
<meta name="description" content="Add a rudimentary Unix shell to every Slack channel.">
1110
</head>
12-
<body>
13-
<p class='icon'>
14-
<a href="/"><img src='img/icon.png'></a>
15-
</p>
16-
<p>
17-
<h1>Whoa, a bash shell inside Slack!</h1>
18-
</p>
19-
<p>
20-
Creates a rudimentary file system in every channel.<br>Invite the bot into a channel, try <span style="font-family: Courier">man</span>, <span style="font-family: Courier">ls</span>, and other unix commands.
21-
</p>
22-
<p>&nbsp;</p>
23-
<p id='messages' />
24-
<p id='register'>
25-
<a href="<%= SlackRubyBotServer::Config.oauth_authorize_url %>?scope=<%= SlackRubyBotServer::Config.oauth_scope_s %>&client_id=<%= ENV['SLACK_CLIENT_ID'] %>"><img alt="Add to Slack" height="40" width="139" src="https://platform.slack-edge.com/img/add_to_slack.png" srcset="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x"></a>
26-
</p>
27-
<p id='active_teams_count'>&nbsp;</p>
28-
<p>&nbsp;</p>
29-
<p class='image'>
30-
<img src='img/shell.gif'>
31-
</p>
11+
<body class="site-page">
12+
<%= partial 'public/partials/_navigation.html.erb' %>
13+
<main id="main">
14+
<section class="hero page-container" aria-labelledby="hero-title">
15+
<div class="hero-intro">
16+
<img class="hero-logo" src="/img/icon.png" width="512" height="512" alt="Shell terminal logo">
17+
<div>
18+
<h1 id="hero-title">Shell for Slack</h1>
19+
<p class="hero-tagline">Whoa, a bash shell inside Slack!</p>
20+
<p class="hero-description">A rudimentary file system in every channel. Invite the bot into a channel, try <code>man</code>, <code>ls</code>, and other Unix commands.</p>
21+
<div class="hero-actions">
22+
<p id="register"><%= partial 'public/partials/_install_button.html.erb' %></p>
23+
<a class="secondary-button" href="/help.html#get-started">Get started</a>
24+
</div>
25+
<p id="messages" role="status" aria-live="polite"></p>
26+
<p id="active_teams_count" class="team-count" aria-live="polite">&nbsp;</p>
27+
</div>
28+
</div>
29+
<figure class="hero-preview">
30+
<img src="/img/shell.gif" width="691" height="419" alt="Shell running Unix commands inside a Slack channel">
31+
<figcaption>A little command line, right where your team works.</figcaption>
32+
</figure>
33+
</section>
34+
<section class="homepage-section page-container" id="how-to-use" aria-labelledby="how-title">
35+
<h2 id="how-title">A shell in every channel</h2>
36+
<p class="section-intro">Your familiar commands. A shared space to try them.</p>
37+
<ol class="setup-steps">
38+
<li><h3>Add Shell to Slack</h3><p>Connect your workspace using Add to Slack.</p></li>
39+
<li><h3>Invite <code>@sh</code></h3><p>Invite the bot into a channel to create its own rudimentary file system.</p></li>
40+
<li><h3>Try a command</h3><p>Start with <code>man</code> or <code>ls</code>. Create files, explore directories, or try the basic <code>vi</code> editor.</p></li>
41+
</ol>
42+
<a class="secondary-button" href="/help.html">Explore the commands</a>
43+
</section>
44+
<section class="homepage-section page-container narrow-container" id="open-source" aria-labelledby="source-title">
45+
<h2 id="source-title">Open source</h2>
46+
<p>Shell is a shell bot for Slack, built with <a href="https://github.com/slack-ruby/slack-ruby-bot-server-events">slack-ruby-bot-server-events</a>. Explore the code, report an issue, or contribute on <a href="https://github.com/slack-ruby/slack-shellbot">GitHub</a>.</p>
47+
<p class="install-cta"><%= partial 'public/partials/_install_button.html.erb' %></p>
48+
</section>
49+
</main>
3250
<%= partial 'public/partials/_footer.html.erb' %>
3351
</body>
3452
</html>
35-

‎public/partials/_footer.html.erb‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1-
<p>
1+
<footer class="site-footer">
2+
<div class="page-container">
3+
<p>
24
<small>
3-
<a href="https://github.com/slack-ruby/slack-shellbot" target="_blank">Fork me on github</a>, <a href="privacy.html">privacy policy</a>, <a href="help.html">help</a>, hosted on <a href="https://m.do.co/c/5b26011f9a9b">DigitalOcean</a><br>
5+
<a href="https://github.com/slack-ruby/slack-shellbot" target="_blank" rel="noopener">Fork me on GitHub</a>, <a href="/privacy.html">privacy policy</a>, <a href="/help.html#get-started">get started</a>, <a href="/help.html">help</a>, hosted on <a href="https://m.do.co/c/5b26011f9a9b">DigitalOcean</a><br>
46
Questions? Contact dblock[at]vestris[dot]com or DM <a href='https://twitter.com/playplayio'>@playplayio</a>.
57
<br><br>
6-
Written by <a href="https://twitter.com/dblockdotorg" target="_blank">@dblockdotorg</a>, <a href="https://www.vestris.com" target="_blank">&copy; Vestris LLC</a>.
8+
Written by <a href="https://twitter.com/dblockdotorg" target="_blank" rel="noopener">@dblockdotorg</a>, <a href="https://www.vestris.com" target="_blank" rel="noopener">&copy; Vestris LLC</a>.
79
</small>
810
</p>
11+
</div>
12+
</footer>

‎public/partials/_head.html.erb‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1+
<meta charset="utf-8">
2+
<meta name="viewport" content="width=device-width, initial-scale=1">
3+
<link rel="icon" href="/favicon.ico?v=charcoal" type="image/x-icon">
14
<script src="/scripts/jquery-1.7.1.min.js"></script>
25
<script src="/scripts/url.min.js"></script>
36
<script src="/scripts/shell.js"></script>
4-
<link rel="stylesheet" type="text/css" href="styles.css">
7+
<link rel="stylesheet" type="text/css" href="/styles.css">

‎public/partials/_install_button.html.erb‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<a class="install-button" href="<%= SlackRubyBotServer::Config.oauth_authorize_url %>?scope=<%= SlackRubyBotServer::Config.oauth_scope_s %>&client_id=<%= ENV['SLACK_CLIENT_ID'] %>">Add to Slack</a>

0 commit comments

Comments
 (0)