Skip to content

feat(ui): added helpbub #970

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
May 27, 2024
Merged

feat(ui): added helpbub #970

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
3c53515
added helpbub; restyled main helpbub button
alinashklyar Apr 18, 2024
b07e9db
added smaller helpbub at all other pages
alinashklyar Apr 18, 2024
504af8a
centered modal
alinashklyar Apr 18, 2024
e75f001
Update _buttons.scss
NimRegev May 1, 2024
f2cdf80
Update _buttons.scss
NimRegev May 1, 2024
09dd5eb
centered helpbub vertically; added green outline
alinashklyar May 2, 2024
e100f04
small pr improvements
alinashklyar May 9, 2024
30635cf
efford to fix issue with button representation
alinashklyar May 9, 2024
1172316
cleaned yarn.lock changes; added aria-label for buttons; fixed userna…
alinashklyar May 9, 2024
3874bfa
Update yarn.lock
alinashklyar May 9, 2024
2d0e0b5
set an anonymous user for helpbub
alinashklyar May 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 19 additions & 4 deletions _includes/docs-navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
</div>
<span class="badge cf-badge cf-badge-doc align-middle ml-1">Codefresh Documentation</span>
</a>
{% if page.layout != "home" %}
<div id="searchbar" class="order-2 order-md-2 align-items-center"></div>
<!-- {% if page.layout != "home" %}-->
<!-- <div id="searchbar" class="order-2 order-md-2 align-items-center"></div>-->
<!-- <form class="bd-search {% if page.layout == "docs" %}bd-search-docs {% endif %}d-flex mt-1 mb-1 mt-md-0 order-2 order-md-2 align-items-center">
<input type="search" class="form-control form-control-dark mr-sm-2 doc-search-input" id="navbar-search-input" placeholder="{{ site.data.translations[site.locale].search_placeholder_text }}" aria-label="{{ site.data.translations[site.locale].search_placeholder_text }}" autocomplete="off">
<i class="fa fa-search"></i>
Expand All @@ -17,7 +17,7 @@
</button>
{% endif %}
</form> -->
{% endif %}
<!-- {% endif %}-->
<div class="navbar-nav-scroll order-1 order-md-1 mx-md-auto">
<ul class="navbar-nav flex-row mx-md-auto">

Expand Down Expand Up @@ -93,6 +93,21 @@
</ul>
</div>
- <!-- </div>
<a class="btn btn-primary order-2 order-md-2" href="https://codefresh.io/docs/" style="background-color: #212437; border-color: #212437; color: #5FFFBF; font-weight: 500">View Codefresh Docs</a>
<a class="btn btn-primary order-2 order-md-2" href="https://codefresh.io/docs/" style="background-color: #212437; border-color: #212437; color: #5FFFBF; font-weight: 500">View Codefresh Docs</a>
</div> -->

{% if page.layout != "home" %}
<button
onclick="window.CommandBar.toggleHelpHub()"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we also add accessibility attributes to this button?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure, you mean aria-labels?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

but it has text inside of it btw

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just to make sure it's accessibe via keyboard and a screen reader

class="helpbub-toggler helpbub-toggler--small order-2 order-md-2"
aria-label="Search Codefresh Documentation"
type="button"
>
<div class="d-flex align-items-center">
<img src="{{site.baseurl}}/images/icons/search.png" />
<span class="ml-2">Search</span>
</div>
<span class="helpbub-toggler--hotkey">&#8984; + K</span>
</button>
{% endif %}
</header>
43 changes: 30 additions & 13 deletions _includes/scripts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,19 +34,36 @@


<!-- Start of Doc Search Embed Code -->
<!--<script>-->
<!-- docsearch({-->
<!-- // inputSelector: '.doc-search-input',-->
<!-- container: '#searchbar',-->
<!-- typesenseCollectionName: 'project-one-doc-index', // Should match the collection name you mention in the docsearch scraper config.js-->
<!-- typesenseServerConfig: {-->
<!-- nodes: [{-->
<!-- host: 'fxokw93dqyu27pv6p.a1.typesense.net', // For Typesense Cloud use xxx.a1.typesense.net-->
<!-- port: '443', // For Typesense Cloud use 443-->
<!-- protocol: 'https' // For Typesense Cloud use https-->
<!-- }],-->
<!-- apiKey: '5aRIuEbEpw9LTf2B5te4Essx4o4HE4Fl', // Use API Key with only Search permissions-->
<!-- },-->
<!-- });-->
<!--</script>-->
<!-- End of Doc Search Embed Code -->

<script>
docsearch({
// inputSelector: '.doc-search-input',
container: '#searchbar',
typesenseCollectionName: 'project-one-doc-index', // Should match the collection name you mention in the docsearch scraper config.js
typesenseServerConfig: {
nodes: [{
host: 'fxokw93dqyu27pv6p.a1.typesense.net', // For Typesense Cloud use xxx.a1.typesense.net
port: '443', // For Typesense Cloud use 443
protocol: 'https' // For Typesense Cloud use https
}],
apiKey: '5aRIuEbEpw9LTf2B5te4Essx4o4HE4Fl', // Use API Key with only Search permissions
},
var o="3033bf7f",n=["Object.assign","Symbol","Symbol.for"].join("%2C"),a=window;function r(o,n){void 0===n&&(n=!1),"complete"!==document.readyState&&window.addEventListener("load",r.bind(null,o,n),{capture:!1,once:!0});var a=document.createElement("script");a.type="text/javascript",a.async=n,a.src=o,document.head.appendChild(a)}function t(){var n;if(void 0===a.CommandBar){delete a.__CommandBarBootstrap__;var t=Symbol.for("CommandBar::configuration"),e=Symbol.for("CommandBar::orgConfig"),i=Symbol.for("CommandBar::disposed"),c=Symbol.for("CommandBar::isProxy"),m=Symbol.for("CommandBar::queue"),d=Symbol.for("CommandBar::unwrap"),l=Symbol.for("CommandBar::eventSubscriptions"),s=[],u=localStorage.getItem("commandbar.lc"),f=u&&u.includes("local")?"http://localhost:8000":"https://api.commandbar.com",p=Object.assign(((n={})[t]={uuid:o},n[e]={},n[i]=!1,n[c]=!0,n[m]=new Array,n[d]=function(){return p},n[l]=void 0,n),a.CommandBar),b=["addCommand","boot","addEventSubscriber","addRecordAction","setFormFactor"],y=p;Object.assign(p,{shareCallbacks:function(){return{}},shareContext:function(){return{}}}),a.CommandBar=new Proxy(p,{get:function(o,n){return n in y?p[n]:"then"!==n?b.includes(n)?function(){var o=Array.prototype.slice.call(arguments);return new Promise((function(a,r){o.unshift(n,a,r),p[m].push(o)}))}:function(){var o=Array.prototype.slice.call(arguments);o.unshift(n),p[m].push(o)}:void 0}}),null!==u&&s.push("lc=".concat(u)),s.push("version=2"),r("".concat(f,"/latest/").concat(o,"?").concat(s.join("&")),!0)}}void 0===Object.assign||"undefined"==typeof Symbol||void 0===Symbol.for?(a.__CommandBarBootstrap__=t,r("https://polyfill.io/v3/polyfill.min.js?version=3.101.0&callback=__CommandBarBootstrap__&features="+n)):t();
window.CommandBar.boot(
"",
{},
{ canOpenEditor: false, products: ["help_hub"] }
);

document.addEventListener("keydown", function (event) {
if (event.metaKey && event.key === "k") {
window.CommandBar.toggleHelpHub();
}
});
</script>
<!-- End of Doc Search Embed Code -->


2 changes: 1 addition & 1 deletion assets/css/docs.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/css/docs.min.css.map
View file
Open in desktop

Large diffs are not rendered by default.

29 changes: 29 additions & 0 deletions assets/scss/_helpbub.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
.helpbub-toggler {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;

width: 100%;
padding: 4px 12px 4px 8px;

color: $helpbub-text-color;
cursor: pointer;
background-color: $helpbub-bg;

border: 1px solid $helpbub-border;
border-radius: 16px;

.helpbub-toggler--hotkey {
color: $bd-doc-content-bg;
}

&:focus {
outline: 1px solid $cf-bright-green;
box-shadow: 0 0 0 5px rgba(95, 255, 191, .24);
}
}

.helpbub-toggler--small {
max-width: 275px;
}
5 changes: 5 additions & 0 deletions assets/scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,11 @@ $bd-doc-content-border: #dadada;
$bd-link-color: $bd-topaz-main !default;
$bd-link-hover-color: darken($bd-link-color, 15%) !default;

// Helphub
$helpbub-bg: #3f4255;
$helpbub-text-color: #b0c4e7;
$helpbub-border: #35384b;

// Fonts
// stylelint-disable value-keyword-case
$font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
Expand Down
1 change: 1 addition & 0 deletions assets/scss/docs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,3 +47,4 @@
@import "anchor";
@import "links";
@import "algolia";
@import "helpbub";
Binary file added images/icons/search.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 13 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,19 @@ <h2 class="mb-3 bd-text-white text-uppercase">
Instantly build, test, and deploy Docker images.<br>
Realize your true DevOps potential with the premier enterprise Argo software delivery solution.
</p>
<div id="searchbar"></div>
<!-- <div id="searchbar"></div>-->
<button
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

accessibility attributes for the button

onclick="window.CommandBar.toggleHelpHub()"
class="helpbub-toggler mb-3"
aria-label="Search Codefresh Documentation"
type="button"
>
<div class="d-flex align-items-center">
<img src="{{site.baseurl}}/images/icons/search.png" />
<span class="ml-2">Search</span>
</div>
<span class="helpbub-toggler--hotkey">&#8984; + K</span>
</button>
<!-- <div>
<form class="bd-search bd-search--home d-flex mt-1 mb-3 mt-md-0 order-2 order-md-2 align-items-center">
<input type="search" class="form-control form-control-dark mr-sm-2 doc-search-input" id="navbar-search-input" placeholder="{{ site.data.translations[site.locale].search_placeholder_text }}" aria-label="{{ site.data.translations[site.locale].search_placeholder_text }}" autocomplete="off">
Expand Down