Skip to content

[DOCS] Creates custom landing page for the JS client book (#1831 #1831

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 8 commits into from
Mar 29, 2023
Merged

[DOCS] Creates custom landing page for the JS client book (#1831 #1831

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f416ad4
[DOCS] Creates custom landing page for the JS client book.
szabosteve Mar 22, 2023
77a2e15
[DOCS] Fine-tunes text.
szabosteve Mar 23, 2023
0be23f3
[DOCS] Updates hero image.
szabosteve Mar 23, 2023
e4f793b
[DOCS] Changes page file name.
szabosteve Mar 23, 2023
439ceca
[DOCS] Adds one-liner to hero.
szabosteve Mar 23, 2023
3ec4217
[DOCS] Reduces padding.
szabosteve Mar 23, 2023
ffc259d
[DOCS] Changes section title.
szabosteve Mar 23, 2023
abc9b0d
[DOCS] Fine-tunes text.
szabosteve Mar 23, 2023
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
185 changes: 185 additions & 0 deletions docs/index-custom-title-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@
<style>
* {
box-sizing: border-box;
}

.card {
cursor: pointer;
padding: 16px;
text-align: left;
color: #000;
}

.card:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: left;
}

#guide a.no-text-decoration:hover {
text-decoration: none!important;
}

.icon {
width: 24px;
height: 24px;
background-position: bottom;
background-size: contain;
background-repeat: no-repeat;
}

.ul-col-1 {
columns: 1;
-webkit-columns: 1;
-moz-columns: 1;
}

@media (min-width:769px) {
.ul-col-md-2 {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
}

#guide h3.gtk {
margin-top: 16px;
}

.mb-4, .my-4 {
margin-bottom: 0!important;
}
</style>

<div class="legalnotice"></div>

<div class="row my-4">
<div class="col-md-6 col-12">
<p></p>
<p>
<h2>Documentation</h2>
</p>
<p>
The official Node.js client provides one-to-one mapping with Elasticsearch REST APIs.
</p>
<p>
<a href="https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/current/installation.html">
<button class="btn btn-primary">Get started</button>
</a>
</p>
</div>
<div class="col-md-6 col-12">
<img class="w-100" src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt3826dd36882ab258/641c4e9d542f593a7e8ba656/js-es-lp-hero.png" />
</div>
</div>

<h3 class="gtk">Get to know the JavaScript client</h3>

<div class="my-5">
<div class="d-flex align-items-center mb-3">
<h4 class="mt-3">
<span class="inline-block float-left icon mr-2" style="background-image: url('https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltfd59779217093221/641ae0c8db18f61d68e9c377/64x64_Color_icon-connected-circles64-color.png');"></span>
Connecting
</h4>
</div>
<ul class="ul-col-md-2 ul-col-1">
<li>
<a href="introduction.html">Introduction to the client</a>
</li>
<li>
<a href="installation.html">Installing the client</a>
</li>
<li>
<a href="client-connecting.html">Connecting to Elasticsearch</a>
</li>
<li>
<a href="client-configuration.html">Configuration options</a>
</li>
</ul>
</div>

<div class="my-5">
<div class="d-flex align-items-center mb-3">
<h4 class="mt-3">
<span class="inline-block float-left icon mr-2" style="background-image: url('https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltca09fd8c807816ce/641ae17733e7f95594918557/icon-monitor-cog-64-color.png');"></span>
Using the JS client
</h4>
</div>
<ul class="ul-col-md-2 ul-col-1">
<li>
<a href="bulk_examples.html">Bulk indexing</a>
</li>
<li>
<a href="get_examples.html">Getting documents</a>
</li>
<li>
<a href="search_examples.html">Searching</a>
</li>
<li>
<a href="examples.html">More examples</a>
</li>
</ul>
</div>

<div class="my-5">
<div class="d-flex align-items-center mb-3">
<h4 class="mt-3">
<span class="inline-block float-left icon mr-2" style="background-image: url('https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blteacd058910f155d8/636925a6e0ff7c532db636d7/64x64_Color_icon-dev-tools-64-color.png');"></span>
API and developer docs
</h4>
</div>
<ul class="ul-col-md-2 ul-col-1">
<li>
<a href="api-reference.html">API reference</a>
</li>
<li>
<a href="client-helpers.html">Client helpers</a>
</li>
<li>
<a href="integrations.html">Integrations</a>
</li>
<li>
<a href="changelog-client.html">Release notes</a>
</li>
</ul>
</div>

<h3 class="explore">Explore by use case</h3>

<div class="row my-4">
<div class="col-md-4 col-12 mb-2">
<a class="no-text-decoration" href="https://www.elastic.co/guide/en/enterprise-search/current/start.html">
<div class="card h-100">
<h4 class="mt-3">
<span class="inline-block float-left icon mr-2" style="background-image: url('https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt11200907c1c033aa/634d9da119d8652169cf9b2b/enterprise-search-logo-color-32px.png');"></span>
Search my data
</h4>
<p>Create search experiences for your content, wherever it lives.</p>
</div>
</a>
</div>
<div class="col-md-4 col-12 mb-2">
<a class="no-text-decoration" href="https://www.elastic.co/guide/en/welcome-to-elastic/current/getting-started-observability.html">
<div class="card h-100">
<h4 class="mt-3">
<span class="inline-block float-left icon mr-2" style="background-image: url('https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltaa08b370a00bbecc/634d9da14e565f1cdce27f7c/observability-logo-color-32px.png');"></span>
Observe my data
</h4>
<p>Follow our guides to monitor logs, metrics, and traces.</p>
</div>
</a>
</div>
<div class="col-md-4 col-12 mb-2">
<a class="no-text-decoration" href="https://www.elastic.co/guide/en/security/current/es-overview.html">
<div class="card h-100">
<h4 class="mt-3">
<span class="inline-block float-left icon mr-2" style="background-image: url('https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt5e0e0ad9a13e6b8c/634d9da18473831f96bbdf1e/security-logo-color-32px.png');"></span>
Protect my environment
</h4>
<p>Learn how to defend against threats across your environment.</p>
</div>
</a>
</div>
</div>

<p class="my-4"><a href="https://www.elastic.co/guide/index.html">View all Elastic docs</a></p>