[DOCS] Redesigns Kibana docs landing page #138051

gchaps · 2022-08-03T20:32:02Z

Summary

This PR tries out a new design for the Kibana docs landing page.

Preview:
https://kibana_138051.docs-preview.app.elstc.co/guide/en/kibana/master/index.html

ryankeairns · 2022-08-26T21:57:39Z

docs/index-custom-title-page.html

+
+<div class="row my-4">
+  <div class="col-md-6 col-12">
+    <p>


I would add an <h2>Subtitle</h2>. This is partially for visual purposes as it will decrease the amount of whitespace alongside that top image. Also, these heading tags are navigable with assistive technology.

ryankeairns · 2022-08-26T21:58:17Z

docs/index-custom-title-page.html

+  <div class="col-md-4 col-12 mb-2">
+    <a class="no-text-decoration" href="dashboard.html">
+      <div class="card">
+        <p class="font-weight-bold">Add search experience</p>


These card titles ought to be <h3> or <h4> instead of <p>

Also, you could add solution icons/logos above each card title

ryankeairns · 2022-08-26T21:59:45Z

docs/index-custom-title-page.html

+<div class="my-5">
+  <div class="d-flex align-items-center mb-3">
+    <div class="icon" style="background-image: url('https://i.imgur.com/e8Zu260.png');"></div>
+    <div class="section-title">Explore, visualize, and share</div>


I would expect these to be <h3> as opposed to <div...>
You could still do <h3 class="section-title"> although I wonder if there are some existing styles that will get applied even without that class being included.

ryankeairns · 2022-08-26T22:06:58Z

docs/index-custom-title-page.html

+  }
+
+  body {
+    font-family: Arial, Helvetica, sans-serif;


You can remove this. We user Inter which is already set, globally.

ryankeairns · 2022-08-26T22:08:20Z

docs/index-custom-title-page.html

+    background-repeat: no-repeat;
+  }
+
+  .section-title {


You should be able to remove these overrides after switching to heading tags <h1>, <h2>..., etc

ryankeairns · 2022-08-26T22:20:08Z

docs/index-custom-title-page.html

@@ -0,0 +1,222 @@
+<style>


Before we merge this, let's chat about global styles. The end result of this page looks nice, visually, but we need to handle these styles in a way that maintains consistency. Good start here!

Yes! I also just talked with @elastic/obs-docs about this and we're interested in doing something similar for the Observability docs so it might be good to move any custom CSS in this PR out of /kibana into /docs. 🙂

docs/index-custom-title-page.html

gchaps · 2022-09-08T14:51:08Z

docs/index-custom-title-page.html

+      <div class="card">
+        <div class="icon" style="background-image: url('https://i.imgur.com/XCIZjs1.png');"></div>
+        <h4>Observe</h4>
+        <p class="card-description">Follow our guides for monitoring logs, metrics, and traces.</p>


@colleenmcginnis Can you please review the link and text for the Observability card?

joepeeples

Nice design! One possible tweak to the "Protect" card.

joepeeples · 2022-09-08T15:05:41Z

docs/index-custom-title-page.html

+      <div class="card">
+        <div class="icon" align-items-center style="background-image: url('https://i.imgur.com/MNgoZfx.png');"></div>
+        <h4>Protect</h4>
+        <p class="card-description">Everything you need to know about protecting your data.</p>


"Everything you need to know about" seems a bit wordy, and we could use the space for more focused terminology. This revision borrows some phrasing from the app description on the UI's Home page:

Suggested change

<p class="card-description">Everything you need to know about protecting your data.</p>

<p class="card-description">Learn how to protect your data and respond to threats across your infrastructure.</p>

gchaps · 2022-09-20T16:42:52Z

@elasticmachine merge upstream

ryankeairns

Thanks for the changes. As discussed, let's track the use of <styles> and move these to a global space once the CSS caching is resolved.

use one column on medium screens and smaller clean up clean up again

kellyemurphy

Just some small tweaks to the cards, to be closer to the current onboarding text.

General question, are we going to add any text somewhere that explains what Kibana is?

docs/index-custom-title-page.html

Co-authored-by: Kelly Murphy <kelly.murphy@elastic.co>

docs/index-custom-title-page.html

Co-authored-by: Kelly Murphy <kelly.murphy@elastic.co>

elasticmachine · 2022-10-26T20:06:49Z

Pinging @elastic/kibana-docs (Team:Docs)

* [DOCS] Another landing page design * [DOCS] Uses cards in landing page * [DOCS] Updates list of docs * [DOCS] Emphasizes solutions * html, css updates use one column on medium screens and smaller clean up clean up again * [DOCS] Incorporates review comments * [DOCS] Updates text and link for search * format headings in cards, ensure cards are always the same height * remove unused css, align images * [DOCS] Fixes links to images * [DOCS] Uses images with transparent background * Fixes wording in cards * Update docs/index-custom-title-page.html Co-authored-by: Kelly Murphy <kelly.murphy@elastic.co> * Update docs/index-custom-title-page.html Co-authored-by: Kelly Murphy <kelly.murphy@elastic.co> * Update docs/index-custom-title-page.html Co-authored-by: Kelly Murphy <kelly.murphy@elastic.co> * [DOCS] Add content to describe Kibana * [DOCS] Minor edits * Update docs/index-custom-title-page.html Co-authored-by: Kelly Murphy <kelly.murphy@elastic.co> * [DOCS] Copy edits to landing page Co-authored-by: Colleen McGinnis <colleen.mcginnis@elastic.co> Co-authored-by: Kelly Murphy <kelly.murphy@elastic.co> (cherry picked from commit 5d2b2e5)

kibanamachine · 2022-10-26T21:04:01Z

💚 All backports created successfully

Status	Branch	Result
✅	8.5

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

* [DOCS] Another landing page design * [DOCS] Uses cards in landing page * [DOCS] Updates list of docs * [DOCS] Emphasizes solutions * html, css updates use one column on medium screens and smaller clean up clean up again * [DOCS] Incorporates review comments * [DOCS] Updates text and link for search * format headings in cards, ensure cards are always the same height * remove unused css, align images * [DOCS] Fixes links to images * [DOCS] Uses images with transparent background * Fixes wording in cards * Update docs/index-custom-title-page.html Co-authored-by: Kelly Murphy <kelly.murphy@elastic.co> * Update docs/index-custom-title-page.html Co-authored-by: Kelly Murphy <kelly.murphy@elastic.co> * Update docs/index-custom-title-page.html Co-authored-by: Kelly Murphy <kelly.murphy@elastic.co> * [DOCS] Add content to describe Kibana * [DOCS] Minor edits * Update docs/index-custom-title-page.html Co-authored-by: Kelly Murphy <kelly.murphy@elastic.co> * [DOCS] Copy edits to landing page Co-authored-by: Colleen McGinnis <colleen.mcginnis@elastic.co> Co-authored-by: Kelly Murphy <kelly.murphy@elastic.co> (cherry picked from commit 5d2b2e5) Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com>

colleenmcginnis mentioned this pull request Aug 26, 2022

Docs landing page HTML/CSS updates gchaps/kibana#1

Merged

ryankeairns reviewed Aug 26, 2022

View reviewed changes

ryankeairns requested changes Aug 26, 2022

View reviewed changes

leemthompo reviewed Sep 8, 2022

View reviewed changes

docs/index-custom-title-page.html Outdated Show resolved Hide resolved

gchaps commented Sep 8, 2022

View reviewed changes

joepeeples reviewed Sep 8, 2022

View reviewed changes

bmorelli25 mentioned this pull request Sep 29, 2022

Create and publish APM overview pages elastic/observability-docs#2209

Open

ryankeairns self-requested a review October 9, 2022 21:08

ryankeairns approved these changes Oct 9, 2022

View reviewed changes

colleenmcginnis mentioned this pull request Oct 18, 2022

Add new landing page CSS to this repo elastic/docs#2548

Open

5 tasks

gchaps and others added 11 commits October 20, 2022 13:51

[DOCS] Another landing page design

4ebaff1

[DOCS] Uses cards in landing page

03abaee

[DOCS] Updates list of docs

f79217b

[DOCS] Emphasizes solutions

876959a

html, css updates

2c7b288

use one column on medium screens and smaller clean up clean up again

[DOCS] Incorporates review comments

81be2c3

[DOCS] Updates text and link for search

f045fe7

format headings in cards, ensure cards are always the same height

c738ef2

remove unused css, align images

f0c3bef

[DOCS] Fixes links to images

01d6f7a

[DOCS] Uses images with transparent background

a33c06a

gchaps force-pushed the docs/fourth-landing-page branch from ae43e59 to a33c06a Compare October 20, 2022 20:54

Fixes wording in cards

e1a04b9

kellyemurphy reviewed Oct 24, 2022

View reviewed changes

docs/index-custom-title-page.html Outdated Show resolved Hide resolved

docs/index-custom-title-page.html Outdated Show resolved Hide resolved

docs/index-custom-title-page.html Outdated Show resolved Hide resolved

gchaps and others added 3 commits October 25, 2022 15:14

Update docs/index-custom-title-page.html

cb0ecdb

Co-authored-by: Kelly Murphy <kelly.murphy@elastic.co>

Update docs/index-custom-title-page.html

9a7386e

Co-authored-by: Kelly Murphy <kelly.murphy@elastic.co>

Update docs/index-custom-title-page.html

ac2ab85

Co-authored-by: Kelly Murphy <kelly.murphy@elastic.co>

florent-leborgne mentioned this pull request Oct 26, 2022

[Draft] Kibana docs structure updates - Do not merge #144049

Closed

gchaps added 2 commits October 26, 2022 10:23

[DOCS] Add content to describe Kibana

9432c72

[DOCS] Minor edits

cd128ed

kellyemurphy reviewed Oct 26, 2022

View reviewed changes

docs/index-custom-title-page.html Outdated Show resolved Hide resolved

gchaps and others added 3 commits October 26, 2022 12:53

Update docs/index-custom-title-page.html

4672d8f

Co-authored-by: Kelly Murphy <kelly.murphy@elastic.co>

[DOCS] Copy edits to landing page

3795445

Merge branch 'main' into docs/fourth-landing-page

ba77adf

gchaps marked this pull request as ready for review October 26, 2022 20:04

gchaps changed the title ~~[DOCS] Another landing page design--DO NOT MERGE~~ [DOCS] Redesigns Kibana docs landing page Oct 26, 2022

gchaps added Team:Docs release_note:skip Skip the PR/issue when compiling release notes v8.5.0 v8.6.0 labels Oct 26, 2022

gchaps merged commit 5d2b2e5 into elastic:main Oct 26, 2022

kibanamachine mentioned this pull request Oct 26, 2022

[8.5] [DOCS] Redesigns Kibana docs landing page (#138051) #144071

Merged

abdonpijpelink mentioned this pull request Nov 7, 2022

[DOCS] Updated landing page elastic/elasticsearch#91361

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DOCS] Redesigns Kibana docs landing page #138051

[DOCS] Redesigns Kibana docs landing page #138051

gchaps commented Aug 3, 2022 •

edited by kibanamachine

Loading

ryankeairns Aug 26, 2022 •

edited

Loading

ryankeairns Aug 26, 2022

ryankeairns Aug 26, 2022

ryankeairns Aug 26, 2022

ryankeairns Aug 26, 2022

ryankeairns Aug 26, 2022

ryankeairns Aug 26, 2022

colleenmcginnis Aug 30, 2022

gchaps Sep 8, 2022

joepeeples left a comment

joepeeples Sep 8, 2022

gchaps commented Sep 20, 2022

ryankeairns left a comment

kellyemurphy left a comment

elasticmachine commented Oct 26, 2022

kibanamachine commented Oct 26, 2022

	<p class="card-description">Everything you need to know about protecting your data.</p>
	<p class="card-description">Learn how to protect your data and respond to threats across your infrastructure.</p>

[DOCS] Redesigns Kibana docs landing page #138051

[DOCS] Redesigns Kibana docs landing page #138051

Conversation

gchaps commented Aug 3, 2022 • edited by kibanamachine Loading

Summary

ryankeairns Aug 26, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joepeeples left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gchaps commented Sep 20, 2022

ryankeairns left a comment

Choose a reason for hiding this comment

kellyemurphy left a comment

Choose a reason for hiding this comment

elasticmachine commented Oct 26, 2022

kibanamachine commented Oct 26, 2022

💚 All backports created successfully

Questions ?

gchaps commented Aug 3, 2022 •

edited by kibanamachine

Loading

ryankeairns Aug 26, 2022 •

edited

Loading