diff --git a/.github/CONTRIBUTING.adoc b/.github/CONTRIBUTING.adoc index 9c5bc414..85b06efc 100644 --- a/.github/CONTRIBUTING.adoc +++ b/.github/CONTRIBUTING.adoc @@ -9,6 +9,7 @@ :url-gulp: http://gulpjs.com :url-node: https://nodejs.org :url-node-dl: https://nodejs.org/en/download/ +:feather-docs: https://feathericons.com/ The Hazelcast documentation UI is open source, and we welcome your contributions! @@ -222,6 +223,24 @@ To test the search from the preview site, set the following environment variable * `ALGOLIA_API_KEY` - your API key for Algolia * `ALGOLIA_INDEX_NAME` - the name of the index +=== Icons + +There is the {feather-docs}[feather] icons pack added to the UI. To use it, just add the following element + +``` + +``` + +Please note, that the previous HTML snippet is replaced with the real icon after page load with the JS snippet: + +``` + +``` + +That snippet is already included in each page globally in `footer-scripts.hbs`, so you don't need to add it. But if you experience a delay in icon loading, then you probably should add it also in your page template or partial. + === View Latest If the version of the current page does not match the latest version of the component, a banner is displayed to notify the user. diff --git a/gulp.d/tasks/build-preview-pages.js b/gulp.d/tasks/build-preview-pages.js index f2e75578..5914ff09 100644 --- a/gulp.d/tasks/build-preview-pages.js +++ b/gulp.d/tasks/build-preview-pages.js @@ -110,7 +110,7 @@ function compileLayouts (src) { function copyImages (src, dest) { return vfs - .src('**/*.{png,svg}', { base: src, cwd: src }) + .src('**/*.{gif,ico,jpg,jpeg,png,svg,jpeg}', { base: src, cwd: src }) .pipe(vfs.dest(dest)) .pipe(map((file, enc, next) => next())) } diff --git a/gulp.d/tasks/build.js b/gulp.d/tasks/build.js index 527bca4c..bb520b5a 100644 --- a/gulp.d/tasks/build.js +++ b/gulp.d/tasks/build.js @@ -101,7 +101,7 @@ module.exports = (src, dest, preview) => () => { .pipe(postcss((file) => ({ plugins: postcssPlugins, options: { file } }))), vfs.src('font/*.{ttf,woff*(2)}', opts), vfs - .src('img/**/*.{gif,ico,jpg,png,svg}', opts) + .src('img/**/*.{gif,ico,jpg,jpeg,png,svg,jpeg}', opts) .pipe( preview ? through() diff --git a/package.json b/package.json index e823c155..682cefe0 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,6 @@ "require-from-string": "~2.0", "stylelint": "^10.1.0", "stylelint-config-standard": "~20.0", - "typeface-roboto": "0.0.75", "typeface-roboto-mono": "0.0.75", "vinyl-buffer": "~1.0", "vinyl-fs": "~3.0" diff --git a/preview-src/home/_images/right-arrow.svg b/preview-src/home/_images/right-arrow.svg new file mode 100644 index 00000000..0378d5c1 --- /dev/null +++ b/preview-src/home/_images/right-arrow.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/preview-src/how-to-hz.adoc b/preview-src/how-to-hz.adoc new file mode 100644 index 00000000..664d5585 --- /dev/null +++ b/preview-src/how-to-hz.adoc @@ -0,0 +1,4 @@ += How to HZ +:page-layout: tutorial + +Learn how to build and run applications with Hazelcast. Whether you want a simple getting started or an end-to-end example of a use case, use the search and filters below to find what you're looking for. diff --git a/preview-src/index.adoc b/preview-src/index.adoc index e3036020..bbef3b0c 100644 --- a/preview-src/index.adoc +++ b/preview-src/index.adoc @@ -36,7 +36,7 @@ Get Started - + ++++ ++++ diff --git a/preview-src/java.adoc b/preview-src/java.adoc index c38c6f25..51d6b15f 100644 --- a/preview-src/java.adoc +++ b/preview-src/java.adoc @@ -22,10 +22,94 @@ NOTE: You do not need to set a license key for your Java clients for which you w use Hazelcast IMDG Enterprise features. Hazelcast IMDG Enterprise license keys are required only for members. +Imagine a trading application where all the trading data are stored and +managed in a Hazelcast cluster with tens of members. + +== Getting Started with Java Client + +TIP: You do not need to set a license key for your Java clients for which you want to +use Hazelcast IMDG Enterprise features. Hazelcast IMDG Enterprise license keys are +required only for members. + +Imagine a trading application where all the trading data are stored and +managed in a Hazelcast cluster with tens of members. + +== Getting Started with Java Client + +IMPORTANT: You do not need to set a license key for your Java clients for which you want to +use Hazelcast IMDG Enterprise features. Hazelcast IMDG Enterprise license keys are +required only for members. + +Imagine a trading application where all the trading data are stored and +managed in a Hazelcast cluster with tens of members. + +== Getting Started with Java Client + +CAUTION: You do not need to set a license key for your Java clients for which you want to +use Hazelcast IMDG Enterprise features. Hazelcast IMDG Enterprise license keys are +required only for members. + +Imagine a trading application where all the trading data are stored and +managed in a Hazelcast cluster with tens of members. + +== Getting Started with Java Client or Maybe some other client + +WARNING: You do not need to set a license key for your Java clients for which you want to +use Hazelcast IMDG Enterprise features. Hazelcast IMDG Enterprise license keys are +required only for members. + + +== Getting Started with Java Client + +NOTE: You do not need to set a license key for your Java clients for which you want to +use Hazelcast IMDG Enterprise features. Hazelcast IMDG Enterprise license keys are +required only for members. + +Imagine a trading application where all the trading data are stored and +managed in a Hazelcast cluster with tens of members. + +== Getting Started with Java Client + +TIP: You do not need to set a license key for your Java clients for which you want to +use Hazelcast IMDG Enterprise features. Hazelcast IMDG Enterprise license keys are +required only for members. + +Imagine a trading application where all the trading data are stored and +managed in a Hazelcast cluster with tens of members. + +== Getting Started with Java Client + +IMPORTANT: You do not need to set a license key for your Java clients for which you want to +use Hazelcast IMDG Enterprise features. Hazelcast IMDG Enterprise license keys are +required only for members. + +Imagine a trading application where all the trading data are stored and +managed in a Hazelcast cluster with tens of members. + +== Getting Started with Java Client + +CAUTION: You do not need to set a license key for your Java clients for which you want to +use Hazelcast IMDG Enterprise features. Hazelcast IMDG Enterprise license keys are +required only for members. + +Imagine a trading application where all the trading data are stored and +managed in a Hazelcast cluster with tens of members. + +== Getting Started with Java Client + +WARNING: You do not need to set a license key for your Java clients for which you want to +use Hazelcast IMDG Enterprise features. Hazelcast IMDG Enterprise license keys are +required only for members. + + +== Getting Started with Java Client + Simply include the `hazelcast.jar` dependency in your classpath to start using the Hazelcast Java client. Once included, you can start using this client as if you are using the Hazelcast API. The differences are discussed in the below sections. +== Getting Started with Java Client + If you prefer to use Maven, simply add the `hazelcast` dependency to your `pom.xml`, which you may already have done to start using Hazelcast IMDG: @@ -55,6 +139,8 @@ clientConfig.getNetworkConfig().addAddress("10.90.0.1", "10.90.0.2:5702"); See the <> for more information. +== Getting Started with Java Client + The second step is initializing the `HazelcastInstance` to be connected to the cluster. ``` @@ -65,6 +151,8 @@ HazelcastInstance client = HazelcastClient.newHazelcastClient(clientConfig); Let's create a map and populate it with some data. +== Getting Started with Java Client + [source,java] ---- IMap mapCustomers = client.getMap("customers"); //creates the map proxy @@ -74,8 +162,10 @@ mapCustomers.put("2", new Customer("Ali", "Selam")); mapCustomers.put("3", new Customer("Avi", "Noyan")); ---- +== Getting Started with Java Client + As the final step, if and when you are done with your client, you can shut it down as shown below: ``` client.shutdown(); -``` \ No newline at end of file +``` diff --git a/preview-src/tutorials.adoc b/preview-src/tutorials.adoc new file mode 100644 index 00000000..4dfbac17 --- /dev/null +++ b/preview-src/tutorials.adoc @@ -0,0 +1,4 @@ += TUTORIALS & RECIPES +:page-layout: tutorials-landing + +Learn how to build and run applications with Hazelcast. Whether you want a simple getting started or an end-to-end example of a use case, use the search and filters below to find what you're looking for. \ No newline at end of file diff --git a/preview-src/ui-model.yml b/preview-src/ui-model.yml index 02fa8ee2..9dbd18b3 100644 --- a/preview-src/ui-model.yml +++ b/preview-src/ui-model.yml @@ -4,8 +4,9 @@ site: title: Documentation Preview homeUrl: &home_url /index.html # uncomment below to test analytics locally -# keys: + keys: # googleAnalytics: 'GTM-MQ59XD6' + aiSearchId: 'ad664bf0-07e2-42e7-9150-2e1b04b15cca' components: - name: abc title: Hazelcast IMDG @@ -19,6 +20,42 @@ site: version: '4.0' displayVersion: '4.0' latestVersion: *latest_version_abc + - name: tutorial + title: How to HZ + url: '/how-to-hz.html' + versions: + - &latest_version_hz + url: '/how-to-hz.html' + version: '4.1' + displayVersion: '4.1' + - url: '/how-to-hz.html' + version: '4.0' + displayVersion: '4.0' + latestVersion: *latest_version_hz + - name: tutorials + title: Tutorials + url: '/tutorials.html' + versions: + - &latest_version_tutorials + url: '/tutorials.html' + version: '4.1' + displayVersion: '4.1' + - url: '/tutorials.html' + version: '4.0' + displayVersion: '4.0' + latestVersion: *latest_version_tutorials + - name: def + title: Management Center + url: '/java.html' + versions: + - &latest_version_def + url: '/java.html' + version: '4.1' + displayVersion: '4.1' + - url: '/java.html' + version: '4.0' + displayVersion: '4.0' + latestVersion: *latest_version_def - &component name: home title: &component_title Home @@ -32,7 +69,8 @@ page: url: *home_url home: true title: Java Client - component: abc + component: + title: Dev Preview componentVersion: *latest_version_abc version: '4.1' displayVersion: '4.1' @@ -65,17 +103,36 @@ page: url: '#' navigation: - root: true + - content: Quickstart + url: '#1' + urlType: internal items: - - content: Quickstart - url: '#' - urlType: fragment - - content: Hazelcast Clients - url: '#' - urlType: fragment - items: - content: Java Client url: '/java.html' urlType: internal - content: C++ Client - url: '#' + url: '#3' urlType: internal + - content: How to HZ + url: '/how-to-hz.html#4' + urlType: internal + - content: Hazelcast Clients + url: '#2' + urlType: internal + items: + - content: Java Client + url: '/java.html' + urlType: internal + - content: C++ Client + url: '#3' + urlType: internal + - content: Hazelcast Deep Client. Pretty long + url: '#4' + urlType: fragment + items: + - content: Java Client 2 + url: '/java2.html' + urlType: internal + - content: C++ Client + url: '#5' + urlType: internal diff --git a/src/css/admonition.css b/src/css/admonition.css new file mode 100644 index 00000000..df120ec1 --- /dev/null +++ b/src/css/admonition.css @@ -0,0 +1,82 @@ +.admonitionblock { + position: relative; + border-radius: 9px; + border-left-width: 8px; + border-left-style: solid; + padding: 15px 10px 15px 20px; + margin-top: 1rem; +} + +/* to override CSS when admonition is inside a table */ +.admonitionblock td, +.admonitionblock th { + border-width: 0 !important; + padding: 0 !important; +} + +.admonitionblock table { + border-spacing: 0; +} + +.admonitionblock .content > :first-child { + margin-top: 0; +} + +.doc .admonitionblock .title + .paragraph { + margin-top: 0; +} + +.admonitionblock td.icon { + display: none; +} + +.admonitionblock::before { + display: block; + font-weight: 600; + margin-bottom: 10px; +} + +.admonitionblock.note { + background-color: var(--info-light); + border-left-color: var(--accent); +} + +.admonitionblock.note::before { + content: 'NOTE'; +} + +.admonitionblock.tip { + background-color: var(--accent4-light); + border-left-color: var(--accent4); +} + +.admonitionblock.tip::before { + content: 'TIP'; +} + +.admonitionblock.important { + background-color: var(--accent5-light); + border-left-color: var(--accent5); +} + +.admonitionblock.important::before { + content: 'IMPORTANT'; +} + +.admonitionblock.caution { + background-color: var(--accent3-light); + border-left-color: var(--accent3); +} + +.admonitionblock.caution::before { + content: 'CAUTION'; +} + +.admonitionblock.warning { + background-color: var(--accent2-light); + border-left-color: var(--accent2); +} + +.admonitionblock.warning::before { + content: 'WARNING'; +} diff --git a/src/css/base.css b/src/css/base.css index bb38f2c3..25ca2f18 100644 --- a/src/css/base.css +++ b/src/css/base.css @@ -23,6 +23,15 @@ body { margin: 0; } +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: var(--heading-font-family); +} + a { text-decoration: none; } diff --git a/src/css/cookie.css b/src/css/cookie.css index 7dde294f..9ba589db 100644 --- a/src/css/cookie.css +++ b/src/css/cookie.css @@ -13,11 +13,11 @@ } #cookie-close { - background-color: var(--accessibility-outline); - font-size: 1.2em; + background: var(--navbar-button-background); + border-radius: 10px; + font-size: 1em; border: none; padding: 10px; color: white; - border-radius: 2px; cursor: pointer; } diff --git a/src/css/doc.css b/src/css/doc.css index 296a5a95..aa406380 100644 --- a/src/css/doc.css +++ b/src/css/doc.css @@ -1,3 +1,5 @@ +@import "admonition.css"; + .doc { color: var(--doc-font-color); font-size: var(--doc-font-size); @@ -215,6 +217,8 @@ strong.beta { } .doc a[href*="//"]:not([href*="docs.hazelcast.com"])::after, +.home .article a[href*="//"]:not([href*="docs.hazelcast.com"])::after, +.home .additional-cards a[href*="//"]:not([href*="docs.hazelcast.com"])::after, .nav-item a[href*="//"]:not([href*="docs.hazelcast.com"])::after { content: url('/_/img/external-link.svg'); position: relative; @@ -367,89 +371,6 @@ strong.beta { vertical-align: middle; } -.doc .admonitionblock { - margin: 1.4rem 0 0; - max-width: 500px; -} - -.doc .admonitionblock p, -.doc .admonitionblock td.content { - font-size: calc(16 / var(--rem-base) * 1rem); -} - -.doc .admonitionblock td.content > :first-child { - margin: 0; -} - -.doc .admonitionblock pre { - font-size: calc(15 / var(--rem-base) * 1rem); -} - -.doc .admonitionblock > table { - border-collapse: collapse; - table-layout: fixed; - position: relative; - width: 100%; -} - -.doc .admonitionblock td.content { - padding: 1rem 1rem 0.75rem; - background: var(--admonition-background); - width: 100%; -} - -.doc .admonitionblock .icon { - position: absolute; - top: 0; - left: 0; - font-size: calc(15 / var(--rem-base) * 1rem); - padding: 0 0.5rem; - height: 1.25rem; - line-height: 1; - font-weight: var(--admonition-label-font-weight); - text-transform: uppercase; - border-radius: 0.45rem; - transform: translate(-0.5rem, -50%); - font-family: var(--body-font-family) !important; - width: 101.5%; -} - -.doc .admonitionblock.caution .icon { - background-color: var(--caution-color); - color: var(--caution-on-color); -} - -.doc .admonitionblock.important .icon { - background-color: var(--important-color); - color: var(--important-on-color); -} - -.doc .admonitionblock.note .icon { - background-color: var(--note-color); - color: var(--note-on-color); -} - -.doc .admonitionblock.tip .icon { - background-color: var(--tip-color); - color: var(--tip-on-color); -} - -.doc .admonitionblock.warning .icon { - background-color: var(--warning-color); - color: var(--warning-on-color); -} - -.doc .admonitionblock .icon i { - display: inline-flex; - align-items: center; - height: 100%; - font-family: var(--body-font-family) !important; -} - -.doc .admonitionblock .icon i::after { - content: attr(title); -} - .doc .imageblock { display: flex; flex-direction: column; @@ -544,12 +465,6 @@ strong.beta { padding: 0; } -.doc table.tableblock .admonitionblock, -.doc .ulist .admonitionblock, -.doc .olist .admonitionblock { - padding: 0; -} - .doc ol, .doc ul { margin: 0; @@ -648,10 +563,6 @@ strong.beta { padding-bottom: 0; } -.doc .admonitionblock .title + .paragraph { - margin-top: 0; -} - .doc .exampleblock > .content { background: var(--example-background); border: 0.25rem solid var(--example-border-color); diff --git a/src/css/feedback.css b/src/css/feedback.css index fb6662f9..22467145 100644 --- a/src/css/feedback.css +++ b/src/css/feedback.css @@ -3,7 +3,7 @@ .feedback-prompt { width: 100%; font-family: var(--body-font-family); - color: var(--secondary-text); + color: var(--nav-muted-color); display: flex; flex-direction: column; } @@ -12,52 +12,79 @@ display: none; } -.feedback-prompt button { - display: inline-block; - text-align: center; - padding: 2px; - border-radius: var(--border-radius); - text-decoration: none; - font-size: calc(14 / var(--rem-base) * 1rem); - color: var(--toc-heading-font-color); +.helpful-feedback input[type="radio"] { + display: none; } -.feedback-prompt label { - display: inline-block; - border-radius: var(--border-radius); +.feedback-button { + display: flex; + align-items: center; + gap: 1rem; + padding: 0.5rem 0.7rem; + font-family: var(--heading-font-family); + font-size: 14px; + background-color: var(--info-light); + border-radius: 10px; + cursor: pointer; +} + +.feedback-button:hover { + background-color: var(--accent5-light); +} + +a.feedback-button:hover { text-decoration: none; - font-size: calc(14 / var(--rem-base) * 1rem); - color: var(--toc-heading-font-color); } -.feedback-prompt label#yes-button, -.feedback-prompt label#no-button { - padding: 5px; +.feedback-prompt .feedback-button, +.feedback-prompt .helpful-feedback { + margin-top: 10px; } -.feedback-prompt input[type="radio"]:checked + label#yes-button, -#yes-button:hover { - background-color: var(--success-dark); - color: var(--neutral-white); - cursor: grab; +.helpful-feedback { + display: flex; + gap: 8px; + align-items: center; + justify-content: space-between; + font-size: 14px; } -.feedback-prompt input[type="radio"]:checked + label#no-button, -#no-button:hover { - background-color: var(--error); - color: var(--neutral-white); - cursor: grab; +.helpful-feedback-buttons { + display: flex; + justify-content: flex-end; + align-items: center; + gap: 8px; } -.feedback-prompt input[type="radio"] { - display: none; +.helpful-feedback-title { + width: 100%; + text-align: center; + white-space: nowrap; +} + +.helpful-feedback .feedback-button { + margin-top: 0; +} + +.yes-button:hover .like-img { + transform: translateY(-3px); +} + +.no-button:hover .like-img { + transform: translateY(3px); +} + +.like-img { + transition: transform 300ms ease-out; + width: 20px; + height: auto; } .additional-feedback { display: block; padding-right: 0.5rem; font-family: var(--body-font-family); - color: var(--secondary-text); + color: var(--nav-muted-color); } .additional-feedback a { @@ -69,7 +96,7 @@ display: block; padding-right: 0.5rem; font-family: var(--body-font-family); - color: var(--secondary-text); + color: var(--nav-muted-color); } .edit-this-page a { @@ -77,21 +104,26 @@ font-size: calc(14 / var(--rem-base) * 1rem); } -.survey { - background: transparent url(../img/survey.svg) center left no-repeat; +.feedback-button-text { padding-left: 1.75rem; } .git { - background: transparent url(../img/github.svg) center left no-repeat; - padding-left: 1.75rem; + background: transparent url(../img/github.svg) center left / contain no-repeat; } .git-pull { - background: transparent url(../img/pull.svg) center left no-repeat; - padding-left: 1.75rem; + background: transparent url(../img/edit.svg) center left / contain no-repeat; +} + +.command { + background: transparent url(../img/command.svg) center left / contain no-repeat; +} + +.training { + background: transparent url(../img/training.png) center left / contain no-repeat; } -form[name^=docs-feedback] { - padding-top: 20px; +.mail { + background: transparent url(../img/mail.svg) center left / contain no-repeat; } diff --git a/src/css/fontsource-telegraf.css b/src/css/fontsource-telegraf.css new file mode 100644 index 00000000..df56d0dc --- /dev/null +++ b/src/css/fontsource-telegraf.css @@ -0,0 +1,31 @@ +@font-face { + font-family: 'PP Telegraf'; + font-style: normal; + font-display: swap; + font-weight: 400; + src: url('../font/PPTelegraf-Light.woff2') format('woff2'); +} + +@font-face { + font-family: 'PP Telegraf'; + font-style: italic; + font-display: swap; + font-weight: 400; + src: url('../font/PPTelegraf-UltralightSlanted.woff2') format('woff2'); +} + +@font-face { + font-family: 'PP Telegraf'; + font-style: normal; + font-display: swap; + font-weight: 500; + src: url('../font/PPTelegraf-Medium.woff2') format('woff2'); +} + +@font-face { + font-family: 'PP Telegraf'; + font-style: italic; + font-display: swap; + font-weight: 500; + src: url('../font/PPTelegraf-RegularSlanted.woff2') format('woff2'); +} diff --git a/src/css/fontsource-ubuntu.css b/src/css/fontsource-ubuntu.css deleted file mode 100644 index fdcdf11c..00000000 --- a/src/css/fontsource-ubuntu.css +++ /dev/null @@ -1,19 +0,0 @@ -@font-face { - font-family: "Ubuntu"; - font-style: normal; - font-weight: 400; - src: - local("Ubuntu"), - local("Ubuntu-Regular"), - url(../font/ubuntu-all-400-normal.woff) format("woff"); -} - -@font-face { - font-family: "Ubuntu"; - font-style: italic; - font-weight: 400; - src: - local("Ubuntu"), - local("Ubuntu-Italic"), - url(../font/ubuntu-all-400-italic.woff) format("woff"); -} diff --git a/src/css/footer.css b/src/css/footer.css index 07c22231..65a505ce 100644 --- a/src/css/footer.css +++ b/src/css/footer.css @@ -1,22 +1,15 @@ -footer.footer { - background-color: var(--footer-background); +.footer { + display: flex; + justify-content: center; + align-items: center; + gap: 2rem; + background-color: var(--header-color); color: var(--footer-font-color); font-size: calc(15 / var(--rem-base) * 1rem); - font-family: 'Roboto', sans-serif; - font-weight: 400; - line-height: var(--footer-line-height); - text-align: center; - padding: 1em; - bottom: 0; height: 90px; - border-top: 1px solid var(--section-divider-color); } .footer a { color: var(--footer-font-color); padding-right: 8px; } - -.footer a:nth-child(3) { - padding-right: 0; -} diff --git a/src/css/header.css b/src/css/header.css index 43c16ade..0312366b 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -1,19 +1,33 @@ -html.is-clipped--navbar { - overflow-y: hidden; +body { + /* important so the Kapa widget does not overwrite it */ + padding-top: var(--navbar-height) !important; } -body { - padding-top: var(--navbar-height); +.navbar .button.navbar-button { + background-color: var(--header-color); + border: 1px solid var(--neutral-white); + color: var(--neutral-white); + font-size: var(--body-font-size); + font-weight: 700; + letter-spacing: 1px; +} + +.filter.checkbox { + color: var(--neutral-white); + font-size: 0.875em; + display: flex; + align-items: center; + white-space: nowrap; + margin: 0; + padding-bottom: 0; } .navbar { - background: var(--navbar-background); - color: var(--navbar-font-color); - font-family: var(--body-font-family); - font-size: 15px; + background: var(--header-color); + color: var(--neutral-white); + font-family: var(--nav-font-family); height: var(--navbar-height); position: fixed; - border-bottom: 1px solid var(--neutral-lighter); top: 0; width: 100%; word-wrap: break-word; @@ -21,289 +35,88 @@ body { } .navbar a { + color: var(--neutral-white); text-decoration: none; + letter-spacing: 1px; } -a.navbar-link { - cursor: default; -} - -.navbar-brand .navbar-item:nth-child(2), -.navbar-brand .navbar-item:nth-child(2) a { - color: var(--secondary-text); - justify-content: left; - padding: 0; -} - -.navbar-brand .separator { - padding: 0 0.375rem; -} - -.navbar-brand .navbar-item { - align-items: center; +.navbar-brand .navbar-item.navbar-logo-item { display: flex; + align-items: center; + justify-content: center; } -.navbar-menu { - background: var(--navbar-menu-background); - padding: 0.5rem 0; - display: none; -} - -.navbar-menu.is-active { - display: block; - box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1); - max-height: var(--nav-height); - overflow-y: auto; - z-index: -1; +.navbar-logo-item-img { + width: 180px; + height: auto; } -.navbar-menu a.navbar-item:hover, -.navbar-menu .navbar-link:hover { - background-color: var(--navbar-menu_hover-background); +.navbar-logo-item-title { + margin: 0; + color: var(--accent); } -.dropdown-caret { - width: 1.3em; - padding-left: 0.5em; +.get-hazelcast-link { + display: flex; + align-items: center; } .navbar-brand { - align-items: stretch; display: flex; - flex-shrink: 0; - flex-grow: 0.15; + align-items: center; + justify-content: space-between; height: var(--navbar-height); + padding: 0 10px; } -.navbar-burger { - color: var(--navbar-font-color); - background: none; - border: none; - outline: none; - line-height: 1; - height: var(--navbar-height); - position: relative; - /* width: var(--navbar-height); */ - width: 2.75rem; - margin-left: auto; - padding: 0; - display: block; -} - -.navbar-burger span { - background: var(--navbar-font-color); - display: block; - height: 1px; - left: 50%; - margin-left: -7px; - position: absolute; - top: 50%; - width: 15px; -} - -.navbar-burger span:nth-child(1) { - margin-top: -6px; -} - -.navbar-burger span:nth-child(2) { - margin-top: -1px; -} - -.navbar-burger span:nth-child(3) { - margin-top: 4px; -} - -.navbar-burger.is-active span:nth-child(1) { - margin-left: -5px; - transform: rotate(45deg); - transform-origin: left top; -} - -.navbar-burger.is-active span:nth-child(2) { - opacity: 0; -} - -.navbar-burger.is-active span:nth-child(3) { - margin-left: -5px; - transform: rotate(-45deg); - transform-origin: left bottom; +.navbar-start, +.navbar-end { + display: flex; + align-items: center; } -.navbar-item, -.navbar-link { - color: var(--navbar-menu-font-color); - display: block; - line-height: var(--doc-line-height); - padding: 0.5rem 1rem; - position: relative; +.navbar-app-title { + font-size: 20px; + border-left: 1px solid var(--neutral-white); } .navbar-item { - flex: none; -} - -.navbar-item.has-dropdown { - padding: 0; -} - -.navbar-item .icon { - width: 1.1rem; - height: 1.1rem; + color: var(--neutral-white); display: block; + padding: 0 20px; } -.navbar-link { - padding-right: 2.5em; -} - -.navbar-dropdown .navbar-item { - padding-left: 1.5rem; - padding-right: 1.5rem; -} - -.navbar-divider { - background-color: var(--navbar-menu-border-color); - border: none; - height: 1px; - margin: 0.25rem 0; -} - -.navbar .button, -.doc .interactive-button a { - display: inline-flex; - align-items: center; - background: var(--navbar-button-background); - border-radius: 50px; - height: 1.75rem; - color: var(--navbar-button-font-color); - padding: 0 0.75em; - white-space: nowrap; - text-decoration: none; - border-style: none; -} - -.navbar .button.green { - background: var(--success); -} - -.nav-button { - width: 167px; -} - -@media screen and (max-width: 390px) { - .navbar-brand .navbar-item#documentation-header { +@media (max-width: 930px) { + .filter.checkbox { display: none; } } -@media screen and (min-width: 1400px) { - .navbar-start > .navbar-item, - .navbar-start .navbar-link { - color: var(--navbar-font-color); - } - - .navbar-start > a.navbar-item:hover, - .navbar-start .navbar-link:hover { - background: var(--navbar_hover-background); - color: var(--navbar-font-color); - } - - .navbar-start .navbar-link::after { - border-color: var(--navbar-font-color); - } - - .navbar-item.try-free { - padding-left: 0; - } - - .navbar-item.has-dropdown:hover .navbar-link { - background: var(--navbar_hover-background); - color: var(--navbar-font-color); - } - - .navbar, - .navbar-menu, - .navbar-end { - align-items: stretch; - display: flex; - flex-grow: 1; - } - - .navbar-burger { +@media (max-width: 800px) { + .DocSearch-Button-Keys, + .DocSearch-Button-Placeholder { display: none; } - .navbar-item, - .navbar-link { - align-items: center; - display: flex; - } - - .navbar-item.has-dropdown { - align-items: stretch; - } - - .navbar-item.is-hoverable:hover .navbar-dropdown { - display: block; - } - - .dropdown-caret { - display: block; - height: 1em; - position: absolute; - width: 1em; - margin-top: -0.375em; - right: 1em; - top: 50%; - } - - .navbar-end { - justify-content: flex-end; - margin-left: auto; - } - - .navbar-start { - display: flex; - justify-content: flex-start; + .navbar-item { + padding: 0 10px; } +} - .navbar-dropdown { - background-color: var(--navbar-menu-background); - border: 1px solid var(--navbar-menu-border-color); - border-top: none; - border-radius: 0 0 0.25rem 0.25rem; +@media (max-width: 750px) { + .navbar-app-title { display: none; - top: 100%; - left: 0; - min-width: 100%; - position: absolute; - } - - .navbar-dropdown .navbar-item { - padding: 0.5rem 1rem; - white-space: nowrap; - } - - .navbar-dropdown .navbar-item:last-child { - border-radius: inherit; - } - - .navbar-dropdown a.navbar-item { - padding-right: 3rem; - } - - .navbar-dropdown.is-right { - left: auto; - right: 0; } +} - .navbar-dropdown a.navbar-item:hover { - background-color: var(--navbar-menu_hover-background); +@media (max-width: 550px) { + .hazelcast-link { + display: none; } +} - .topbar-nav { - flex-grow: 1; - justify-content: flex-start; +@media (max-width: 480px) { + .navbar-logo-item-img { + width: 110px; } } diff --git a/src/css/home.css b/src/css/home.css index ff2f6bf2..1c5200b9 100644 --- a/src/css/home.css +++ b/src/css/home.css @@ -1,53 +1,87 @@ .home { + --cards-padding: 15px; + --search-container-height: 36px; + width: 100%; margin: 0 auto; text-align: center; - margin-top: -1.5em; } -.home .section-content-columns { - display: flex; +.home .home-background { + background-image: url('../img/home/hazelcast-banner-back.jpeg'), linear-gradient(160deg, #061827 33%, #1b2939 66%, #0686b3 100%); + background-repeat: no-repeat; + background-position-x: center; + background-position-y: 0; + background-size: cover; + background-color: #061827; + padding: 0 0 1.5rem; + position: relative; } -.home .section-content-column { - flex: 50%; +@media (min-width: 1120px) { + .home .home-background { + background-position-y: -50px; + } } -.home .section-content-title { - margin-bottom: 0; +@media (min-width: 1600px) { + .home .home-background { + background-position-y: -160px; + } } -.home .section-content-list-item { - list-style: none; - padding-top: 5px; +.home .home-background-heading { + color: #fff; + font-weight: 500; + font-size: 50px; + letter-spacing: 1px; + line-height: 1.2; + margin: 0; + background: linear-gradient(270deg, var(--accent4), var(--accent)); + background-clip: text; + -webkit-text-fill-color: transparent; } -.home .article { - background-color: #f2f5f9; - margin-top: -1.5em; - text-align: left; +.home .home-background-subheading { + color: #fff; + font-size: var(--body-font-size); + font-family: var(--heading-font-family); + font-weight: 300; + letter-spacing: 1px; + margin: 0 0 1rem; } -.home .home-background { - top: 0; +.home .search-buttons { width: 100%; - background: url('../img/hazelcast-banner-back.png') no-repeat center; - background-color: #141414; - border-bottom-right-radius: 1px; -} - -.home .home-background h1 { - font-size: 1.7em; + min-height: var(--search-container-height); + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + position: relative; +} + +.ai-button { + color: var(--neutral-white); + background-color: var(--accent); + border: none; + border-radius: 10px; + padding: 10px; + height: var(--search-container-height); + display: flex; + align-items: center; + gap: 8px; + font-size: calc(var(--body-font-size) * 0.9); + font-family: var(--heading-font-family); } -.home h1 { - color: #fafafa; - padding-top: 90px; - font-weight: 300; +.ai-button-img { + stroke-width: 1.5; } .home .search-container { max-width: 1100px; + width: 100%; margin: 0 auto; display: flex; justify-content: center; @@ -57,164 +91,155 @@ width: 40%; } -.home .cards { - margin: 70px 15px 50px; - font-size: 16px; -} - -.home .row:nth-child(2) { - background-color: #fafafa; - border-radius: 3px; - border: 1px solid #dbdbdb; -} - -.home .row { - flex-direction: row; +.home .article { + padding: var(--cards-gap) var(--cards-gap) 0; + background-color: #f2f5f9; + text-align: left; display: flex; - background: var(--neutral-white); - color: var(--text); - text-decoration: none; - padding-left: 50px; - padding-right: 50px; + justify-content: center; + gap: var(--cards-gap); flex-wrap: wrap; - box-shadow: 0 1px 4px rgba(53, 61, 73, 0.202551); } -.home .row.landing > * { - flex: 1 1 25%; - min-width: 20ch; - padding-top: 25px; - padding-bottom: 25px; +.home .card, +.home .additional-card, +.feedback-footer { + border-radius: 10px; + background-color: #fff; + padding: var(--cards-padding); + flex-basis: 100%; + border: 1px solid var(--neutral-light); + box-sizing: border-box; } -.home .row:first-child .card:first-child { - padding-right: 10px; - flex: 1 1 100%; +.home .additional-card .card-list { + gap: 5px; } -.home .row .card.clients { - padding-top: 20px; - margin-top: 20px; +.home .card-list-item-description:last-child { + margin-bottom: 0; } -.home .row:first-child { - border-top-right-radius: var(--border-radius); - border-top-left-radius: var(--border-radius); +.home .card-header, +.feedback-footer .card-header { + color: var(--doc-font-color); + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 10px; } -.home .row.end { - border-bottom-right-radius: 50px; - border-bottom-left-radius: var(--border-radius); +.home .card-title, +.feedback-footer .card-title { + font-weight: 600; + margin: 0; + font-size: 21px; + text-align: center; } -.home .row.seealso .card:nth-child(2), -.home .row.seealso .card:nth-child(3), -.home .row.seealso .card:last-child { - margin-top: 63px; +@media (min-width: 480px) { + .home .card { + flex-basis: calc(50% - calc(var(--cards-gap) * 1 / 2)); + } } -.home .row:first-child .card-header > a > img { - vertical-align: top; +@media (min-width: 550px) { + .ai-button { + position: absolute; + right: 40px; + top: 0; + } } -.home .row .card-header.imdg > a > img { - margin-right: 5px; -} +@media (min-width: 840px) { + .home .card { + flex-basis: calc(33% - calc(var(--cards-gap) * 2 / 3)); + } -.home .row .card a { - text-decoration: none; - color: var(--text); + .home .additional-card { + flex-basis: calc(50% - calc(var(--cards-gap) * 1 / 2)); + } } -.home .row .card ul { - padding: 0; - display: inline; +@media (min-width: 1400px) { + .home .card { + flex-basis: calc(25% - calc(var(--cards-gap) * 3 / 4)); + } } -.home .row .card li > a, -.home .row:last-child .card a, -.home .row .card.clients figure figcaption { - color: var(--primary); +.home .card-list { + display: flex; + flex-direction: column; + gap: 10px; + justify-content: center; + flex: 1 66%; + padding: 0; + margin: 10px 0 0; } -.home .row .card.clients figure.item { - vertical-align: top; - display: inline-block; - text-align: center; - margin-inline-start: 0; - margin-right: 30px; +.home .card-list-item { + list-style: none; + text-align: left; + width: 100%; } -.home .row:nth-child(2) .card.clients-first { - flex-basis: 10%; +.home .card-list-item a { + color: var(--primary-light); + display: flex; + align-items: center; + width: 100%; } -.home .row:nth-child(2) .card.clients { - flex-basis: 35%; +.home .card-img, +.feedback-footer .card-img { + width: 24px; + height: auto; + stroke-width: 1; + margin-right: 10px; } -.home .row:nth-child(2) .card.mc-first { - flex-basis: 10%; +.home .additional-cards { + padding: var(--cards-gap); + display: flex; + gap: var(--cards-gap); + flex-wrap: wrap; } -.home .row .card.clients figure.item img { - height: 40px; +.home .card-list-item-description { + color: var(--secondary-text); + margin: 0 0 0.5rem; + text-align: left; } -.home .row .card.clients .caption { - display: block; +.feedback-footer-container { + padding: 0 var(--cards-gap) var(--cards-gap); } -.home .row .card.clients figure figcaption { - font-weight: 600; +.article .feedback-footer-container { + padding-top: var(--cards-gap); + background-color: var(--neutral-white); } -.get-started-home a > img { - vertical-align: middle; +.feedback-footer { + display: flex; + padding: 15px 20px; + justify-content: flex-start; + align-items: center; + flex-wrap: wrap; + gap: 10px; } @media (min-width: 1300px) { - .home .row.seealso .card:nth-child(2), - .home .row.seealso .card:nth-child(3), - .home .row.seealso .card:last-child { - padding-left: 40px; + .feedback-footer { + gap: 30px; } } -@media (min-width: 1050px) { - .home .card-summary { - height: 30px; - } - - .home .row:first-child .card:first-child { - flex: 1 1 25%; - } -} - -@media (min-width: 840px) and (max-width: 1295px) { - .home.row > * { - flex-basis: 50%; - } - - .home .row:nth-child(2) .card.clients-first { - flex-basis: 50%; - } - - .home .row:nth-child(2) .card.clients { - flex-basis: 50%; - } - - .home .row:nth-child(2) .card.mc-first { - flex-basis: 50%; - } +.feedback-footer .card-header { + margin-bottom: 0; } -@media (min-width: 421px) { - .home .home-background { - height: 216px; - } - - .home .cards { - margin: 70px 60px 50px; - } +.home .feedback-button, +.home .helpful-feedback { + margin-top: 0; } diff --git a/src/css/main.css b/src/css/main.css index 306b865b..81cf5eda 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -77,10 +77,6 @@ color: white; } -aside.toc.sidebar { - display: none; -} - main > .content { background-color: #fff; } @@ -101,23 +97,8 @@ main > .content { main > .content { display: flex; - margin-top: 30px; - margin-left: 30px; - margin-right: 15px; - border-radius: var(--border-radius); - } - - aside.toc.embedded { - display: none; - } - - aside.toc.sidebar { - display: block; - flex: 0 0 var(--toc-width); - min-width: 200px; - overflow-y: scroll; - height: 500px; - overflow-x: hidden; + border-left: 1px solid var(--panel-border-color); + border-right: 1px solid var(--panel-border-color); } } @@ -126,9 +107,3 @@ main > .content { max-width: 100%; } } - -@media screen and (min-width: 1800px) { - aside.toc.sidebar { - min-width: 300px; - } -} diff --git a/src/css/maps.css b/src/css/maps.css index 654328b6..c2154310 100644 --- a/src/css/maps.css +++ b/src/css/maps.css @@ -23,7 +23,7 @@ #userMap .box:hover, #userMap .active { - background-color: var(--info-dark); + background-color: var(--info); color: white; font-weight: bold; } diff --git a/src/css/nav.css b/src/css/nav.css index 1b21422c..404a6ccb 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -1,4 +1,7 @@ + .nav-container { + --nav-x-padding: 10px; + position: fixed; margin-top: 30px; left: 0; @@ -39,18 +42,22 @@ visibility: visible; } +.nav-item.is-active > a { + color: var(--accent); +} + .nav { background-color: #fff; position: relative; top: 0; height: var(--nav-height); - overflow-y: scroll; + overflow-y: auto; + width: 100%; } .nav .panels { display: flex; flex-direction: column; - height: inherit; margin-top: 30px; } @@ -85,49 +92,32 @@ html.is-clipped--nav { } .nav-list { - padding: 0 0 0 0.75rem; + padding: 0; } -.nav-item[data-depth="1"], -.nav-item[data-depth="2"], -.nav-item[data-depth="3"], -.nav-item[data-depth="4"] { +.nav-item { text-indent: 0; - line-height: 1.5; - padding-top: 10px; -} - -.nav-menu > .nav-list { - padding: 0; - margin-top: 0; + line-height: 1.6; + position: relative; + list-style: none; + padding: 2px 10px; } .nav-item[data-depth="0"] { - text-indent: 15px; - background: #fafafa; - line-height: 2.7; - border-bottom: 1px solid #dadada; - color: var(--body-font-color); + line-height: 2.1; + padding-top: 5px; + padding-bottom: 5px; } -.nav-item[data-depth="0"] > ul { - background: #fff; - padding-bottom: 10px; +.nav-menu > .nav-list { + padding: 0; + margin-top: 0; } .nav-item > .nav-text { cursor: pointer; } -/* adds some breathing room below a nested list */ -.nav-item-toggle ~ .nav-list { - padding-bottom: 0.125rem; -} - -.nav-item { - list-style: none; -} - .nav-item.top ul { background: #fff; } @@ -136,20 +126,24 @@ html.is-clipped--nav { display: none; } +.components:not(.is-active), +.versions:not(.is-active) { + display: none; +} + .nav-item-toggle { - background: transparent url(../img/caret-blue.svg) no-repeat 40% / 37%; + background: transparent url(../img/caret-blue.svg) center no-repeat; border: none; outline: none; line-height: inherit; position: absolute; height: calc(var(--nav-line-height) * 1em); - margin-top: 0.05em; - margin-left: 5px; - padding-right: 30px; + width: 30px; + padding: 0 5px; } .nav-item[data-depth="0"] > .nav-item-toggle { - margin-top: 10px; + top: 10px; } .nav-item-toggle.nav-explore-toggle { @@ -157,18 +151,23 @@ html.is-clipped--nav { right: 1.5px; } -.nav-panel-explore .context .version { - margin-right: 30px; +.nav-item.is-active > .nav-item-toggle { + transform: rotate(-180deg); } -.nav-item.is-active > .nav-item-toggle, -.nav-panel-explore.is-active > .context > .nav-item-toggle { - transform: rotate(-180deg); +.is-current-page { + background-color: var(--info-light); + border-radius: 10px; +} + +.nav-link, +.nav-text { + padding-right: 15px; } .is-current-page > .nav-link, .is-current-page > .nav-text { - color: var(--primary); + color: var(--accent); } .nav-link.enterprise::after { @@ -204,150 +203,121 @@ html.is-clipped--nav { vertical-align: middle; } -.nav-panel-explore { - display: flex; - flex-direction: column; - position: absolute; - right: 0; - top: 0; - left: 0; - z-index: 1; - font-size: calc(14 / var(--rem-base) * 1rem); - border-bottom: 1px solid var(--nav-background); +@media screen and (min-width: 1024px) { + .nav-container { + position: static; + visibility: visible; + margin-top: 0; + padding-bottom: 60px; + } + + #hide-nav { + display: flex; + } + + .nav { + top: var(--navbar-height); + box-shadow: none; + position: sticky; + } + + .nav-item-toggle { + right: 0; + } } -.nav-panel-explore .context { - flex-shrink: 0; - padding-right: 0.25rem; - font-family: var(--body-font-family); - color: var(--secondary-text); +/* Version picker */ +.nav-version-picker { + position: relative; display: flex; - flex-direction: row; - justify-content: space-between; - height: 30px; - padding-left: 15px; align-items: center; + gap: 8px; + padding: 20px 10px 0; } -.nav-panel-explore .components { - font-size: calc(14 / var(--rem-base) * 1rem); - margin-top: 0; - margin-bottom: 0; - padding: 20px; - text-indent: 0; +.nav-version-picker-toggle { + position: relative; border-radius: 5px; - border: 1px solid #dadada; - background-color: #fff; - color: var(--secondary-text); - font-family: var(--body-font-family); - display: flex; - flex-direction: column; + color: var(--accent); + border: 2px solid var(--accent); + background-color: var(--info-light); + padding: 6px 30px 6px 10px; + text-decoration: none !important; + cursor: pointer; + width: 100%; + display: block; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + font-weight: 600; + user-select: none; } -.nav-panel-explore:not(.is-active) .components { - display: none; +.nav-version-picker-toggle::after { + content: ''; + position: absolute; + right: 0; + top: 50%; + transform: translate(0, -50%); + background: transparent url(../img/caret-blue.svg) center no-repeat; + width: 30px; + height: 15px; } -.nav-panel-explore .component.home { - text-align: right; - margin-top: 15px !important; +.nav-version-picker-toggle-versions { + max-width: 80px; } -.nav-panel-explore .component { - display: block; +[data-active-toggle="product"] .nav-version-picker-toggle-components::after, +[data-active-toggle="version"] .nav-version-picker-toggle-versions::after { + transform: translate(0, -50%) rotate(180deg); } -.nav-panel-explore .component + .component { - margin-top: 0.5rem; +.navbar-product-name { + flex-basis: 70%; + flex-grow: 1; } -.nav-panel-explore .component:last-child { - margin-bottom: 0.75rem; +.navbar-product-version { + flex-basis: 30%; } -.nav-panel-explore .versions { - display: flex; - flex-wrap: wrap; - list-style: none; - padding-left: 0; - margin-top: -0.25rem; - line-height: 1; +.navbar-product-name, +.navbar-product-version { + position: relative; } -.nav-panel-explore .component .version { +[data-active-toggle="product"] .nav-version-picker-components { display: block; - margin: 0.375rem 0.375rem 0 0; -} - -.nav-panel-explore .component .version.hidden { - display: none; - margin: 0.375rem 0.375rem 0 0; } -.nav-panel-explore .component .more-versions { +[data-active-toggle="version"] .nav-version-picker-versions { display: block; - padding-left: 0.5em; - padding-right: 0.5em; - border: 1px solid; - border-radius: 5px; - font-weight: normal; - text-align: center; - cursor: pointer; } -.nav-panel-explore .component .fewer-versions { +.nav-version-picker-components, +.nav-version-picker-versions { display: none; - padding-left: 0.5em; - padding-right: 0.5em; - border: 1px solid; + position: absolute; + top: 100%; + right: 0; + left: 0; + margin: var(--nav-x-padding); + z-index: 100; + list-style-type: none; + background-color: var(--info-light); border-radius: 5px; - font-weight: normal; - text-align: center; - cursor: pointer; -} - -.nav-panel-explore .component .version a { - border: 1px solid var(--nav-border-color); - border-radius: 0.25rem; - color: inherit; - opacity: 0.75; - white-space: nowrap; - padding: 0.125em 0.25em; - display: inherit; + border: 2px solid var(--accent); + padding: 4px 6px; } -.nav-panel-explore .component .is-current a { - color: var(--primary); - opacity: 1; +.nav-version-picker-components a, +.nav-version-picker-versions a { + color: var(--accent) !important; + display: block; + width: 100%; } -@media screen and (min-width: 1024px) { - .nav-container { - position: static; - visibility: visible; - margin-top: 0; - padding-bottom: 60px; - } - - #hide-nav { - display: flex; - } - - .nav-panel-explore { - font-size: 15px; - } - - .nav { - top: var(--navbar-height); - box-shadow: none; - position: sticky; - } - - .nav-panel-menu { - height: calc(100vh - 4rem); - } - - .nav-item-toggle { - right: 0; - } +.version.is-current { + font-weight: 600; } diff --git a/src/css/page-versions.css b/src/css/page-versions.css index 84b54b1a..6609e4b1 100644 --- a/src/css/page-versions.css +++ b/src/css/page-versions.css @@ -25,7 +25,6 @@ } .page-versions .version-menu { - border: 1px solid transparent; font-size: calc(14 / var(--rem-base) * 1rem); z-index: 1; background-color: #fff; @@ -34,9 +33,9 @@ top: 0; left: 0; width: 100%; - border-left: 1px solid #dadada; - border-right: 1px solid #dadada; - border-bottom: 1px solid #dadada; + border: 1px solid var(--nav-border-color); + border-top-color: transparent; + border-radius: 0 0 5px 5px; } .page-versions:not(.is-active) .version-menu { @@ -45,7 +44,7 @@ .page-versions .version { display: block; - padding-top: 0.5rem; + padding: 0.5rem; } .page-versions .version.is-current { diff --git a/src/css/search.css b/src/css/search.css index f3fdd158..a1aab236 100644 --- a/src/css/search.css +++ b/src/css/search.css @@ -1,46 +1,29 @@ -.filter.checkbox { - color: var(--toolbar-font-color); - cursor: pointer; - font-size: 0.875em; - display: block; - margin-top: 10px; - padding-bottom: 8px; - border-bottom: 0.5px solid #b7c1cb; -} - .DocSearch-Container { z-index: 10000 !important; } +.DocSearch-Button-Keys { + display: none; +} + +.DocSearch-Button-Container { + width: 100%; + display: flex; + flex-direction: row-reverse; + justify-content: space-between; +} + .DocSearch-Button { background: var(--neutral-lighter); border-radius: 5px; border: 1px solid var(--neutral-light); + margin: 0; } .DocSearch-Button .DocSearch-Search-Icon { - color: var(--primary); + color: var(--accent); } -@media (min-width: 1100px) { - .navbar-item.searchbox { - position: relative; - top: 0; - display: flex; - align-self: center; - margin-bottom: 0; - } - - .filter.checkbox { - display: flex; - align-items: center; - white-space: nowrap; - margin: 0; - padding-bottom: 0; - border: none; - } - - .filter.checkbox input { - margin: 0 0.25rem 0 0; - } +.DocSearch-Button .DocSearch-Button-Placeholder { + font-weight: 400; } diff --git a/src/css/site.css b/src/css/site.css index 9a4ee7b7..abe67ea3 100644 --- a/src/css/site.css +++ b/src/css/site.css @@ -1,7 +1,6 @@ @import "404.css"; @import "fontsource-open-sans.css"; -@import "fontsource-ubuntu.css"; -@import "typeface-roboto.css"; +@import "fontsource-telegraf.css"; @import "typeface-roboto-mono.css"; @import "vars.css"; @import "base.css"; diff --git a/src/css/toc.css b/src/css/toc.css index 1517d8bf..e68cdeb7 100644 --- a/src/css/toc.css +++ b/src/css/toc.css @@ -1,8 +1,10 @@ .toc-menu { color: var(--toc-font-color); + margin-bottom: 50px; } .toc.sidebar { + display: none; margin-right: 0.75rem; position: sticky; top: var(--toc-top); @@ -10,28 +12,12 @@ margin-left: 5em; } -.toc.sidebar h3 { - color: var(--toc-heading-font-color); - font-size: calc(16 / var(--rem-base) * 1rem); - font-weight: var(--body-font-weight-bold); - line-height: 1.3; - margin: 0 -0.5px; - padding-bottom: 0.25rem; - display: flex; - flex-direction: column; - height: 2.5rem; - justify-content: flex-end; -} - .toc .toc-menu ul { font-size: calc(15 / var(--rem-base) * 1rem); line-height: var(--toc-line-height); list-style: none; margin: 0; padding: 0; -} - -.toc.sidebar .toc-menu ul { max-height: var(--toc-height); overflow-y: auto; scrollbar-width: none; @@ -42,8 +28,17 @@ } @media screen and (min-width: 1024px) { - .toc.sidebar h3 { - font-size: calc(15 / var(--rem-base) * 1rem); + aside.toc.embedded { + display: none; + } + + .toc.sidebar { + display: block; + flex: 0 0 var(--toc-width); + min-width: 200px; + overflow-y: auto; + height: 500px; + overflow-x: hidden; } .toc .toc-menu ul { @@ -51,6 +46,12 @@ } } +@media screen and (min-width: 1800px) { + aside.toc.sidebar { + min-width: 300px; + } +} + .toc .toc-menu li { margin: 0; } @@ -67,7 +68,7 @@ color: inherit; border-left: 2px solid var(--toc-border-color); display: inline-block; - padding: 0.25rem 0 0.25rem 0.5rem; + padding: 10px 0 10px 8px; text-decoration: none; } @@ -81,8 +82,8 @@ } .toc .toc-menu a.is-active { - border-left-color: var(--link-font-color); - color: var(--doc-font-color); + border-left-color: var(--accent); + color: var(--accent); } .sidebar.toc .toc-menu a:focus { diff --git a/src/css/tutorials-landing.css b/src/css/tutorials-landing.css index dc9e0b0f..fdf57fc9 100644 --- a/src/css/tutorials-landing.css +++ b/src/css/tutorials-landing.css @@ -1,19 +1,7 @@ -.tut.home .home-background { - height: 135px; -} - -.tut.home .DocSearch-Button { - width: 100%; -} - .tut.home .filter > * { font-size: medium; } -.tut.home h1 { - padding-top: 60px; -} - .tut.home .cards { max-width: 1500px; margin: auto; @@ -46,6 +34,7 @@ display: flex; align-items: center; padding-top: 15px; + justify-content: space-between; } .tut-card .start a { @@ -53,9 +42,9 @@ } .button.git span { - background: transparent url(../img/github.svg) center left no-repeat; - width: 25px; - height: 25px; + background: transparent url(../img/github.svg) center left / contain no-repeat; + width: 20px; + height: 20px; } .tut-cards .button.git { @@ -94,11 +83,16 @@ .dropdown-toggle.filters { width: fit-content; + min-width: 25ch; + padding-top: 25px; + padding-bottom: 25px; bottom: 0; - left: 0; + left: 30px; position: absolute; height: 25px; border: none; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } .product-boxes { @@ -116,8 +110,8 @@ background: #fafafa; border: 1px solid #b7c1cb; box-sizing: border-box; - color: #707482; - border-bottom: 3px solid #707482; + color: var(--secondary-text); + border-bottom: 3px solid var(--secondary-text); border-radius: 5px; } @@ -209,6 +203,12 @@ flex-direction: row; } +.tutorials-header { + color: var(--neutral-white); + font-weight: 400; + margin: 0; +} + .row.tutorials > * { min-width: 25ch; padding-top: 25px; @@ -220,11 +220,14 @@ padding: 0; } -.row.tutorials.search { - flex-direction: column; - align-items: center; - position: relative; - padding-bottom: 40px; +.tutorials.filter.end { + background-color: var(--neutral-lighter); + border-bottom-right-radius: 50px; + border-bottom-left-radius: 5px; + border: 1px solid var(--neutral-light); + padding-right: 50px; + padding-left: 15px; + margin: 0 30px; } .row.tutorials .card { @@ -288,18 +291,14 @@ .time { font-size: small; - color: #707482; + color: var(--secondary-text); margin-left: auto; white-space: nowrap; } .summary { height: 100px; - overflow: scroll; -} - -.tut-card .source { - width: 100%; + overflow: auto; } @media screen and (min-width: 900px) { diff --git a/src/css/tutorials.css b/src/css/tutorials.css index 91c7504d..212d8801 100644 --- a/src/css/tutorials.css +++ b/src/css/tutorials.css @@ -7,8 +7,7 @@ } .tutorial .git { - background: transparent url(../img/github.svg) 0 no-repeat; - font-size: 0.8em; + background: transparent url(../img/github.svg) 0 / contain no-repeat; margin-top: 20px; color: #2d7de4; } diff --git a/src/css/typeface-roboto.css b/src/css/typeface-roboto.css deleted file mode 100644 index dced6a02..00000000 --- a/src/css/typeface-roboto.css +++ /dev/null @@ -1,54 +0,0 @@ -@font-face { - font-family: "Roboto"; - font-style: normal; - font-weight: 300; - src: - local("Roboto Regular"), - local("Roboto-Regular"), - url(~typeface-roboto/files/roboto-latin-300.woff2) format("woff2"), - url(~typeface-roboto/files/roboto-latin-300.woff) format("woff"); -} - -@font-face { - font-family: "Roboto"; - font-style: normal; - font-weight: 400; - src: - local("Roboto Regular"), - local("Roboto-Regular"), - url(~typeface-roboto/files/roboto-latin-400.woff2) format("woff2"), - url(~typeface-roboto/files/roboto-latin-400.woff) format("woff"); -} - -@font-face { - font-family: "Roboto"; - font-style: italic; - font-weight: 400; - src: - local("Roboto Italic"), - local("Roboto-Italic"), - url(~typeface-roboto/files/roboto-latin-400italic.woff2) format("woff2"), - url(~typeface-roboto/files/roboto-latin-400italic.woff) format("woff"); -} - -@font-face { - font-family: "Roboto"; - font-style: normal; - font-weight: 500; - src: - local("Roboto Medium"), - local("Roboto-Medium"), - url(~typeface-roboto/files/roboto-latin-500.woff2) format("woff2"), - url(~typeface-roboto/files/roboto-latin-500.woff) format("woff"); -} - -@font-face { - font-family: "Roboto"; - font-style: italic; - font-weight: 500; - src: - local("Roboto Medium Italic"), - local("Roboto-MediumItalic"), - url(~typeface-roboto/files/roboto-latin-500italic.woff2) format("woff2"), - url(~typeface-roboto/files/roboto-latin-500italic.woff) format("woff"); -} diff --git a/src/css/vars.css b/src/css/vars.css index 4eedcf19..75b7601a 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -9,9 +9,18 @@ --primary-light: #2d7de4; --primary: #2160c0; --primary-dark: #003b87; - --info-light: #cbdbff; + --accent: #0080a9; + --accent-light: #10a4b3; + --accent2: #c91268; + --accent2-light: #ffe3e3; + --accent3: #f5911e; + --accent3-light: #ffe8da; + --accent4: #c6ff3a; + --accent4-light: #f7ffe4; + --accent5: #0019fe; + --accent5-light: #e0e8ff; + --info-light: #f0f6ff; --info: #4a71c4; - --info-dark: #4a71c4; --accessibility-outline: #2160c0; --error: #b00020; --warning-light: #f9b721; @@ -31,16 +40,17 @@ --color-black: #000; /* fonts */ --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */ - --body-font-size: 1.0625em; /* 17px */ + --body-font-size: 1em; /* 16px */ --body-font-size--print: 0.9375em; /* 15px */ --body-line-height: 1.4; --body-font-color: var(--text); - --body-font-family: "Roboto", sans-serif; + --header-color: #071627; + --body-font-family: "Open Sans", sans-serif; --body-font-weight-bold: 600; - --nav-font-family: "Roboto", sans-serif; + --nav-font-family: "PP Telegraf", sans-serif; --nav-font-weight: 500; --monospace-font-family: "Roboto Mono", monospace; - --heading-font-family: "Roboto", sans-serif; + --heading-font-family: "PP Telegraf", sans-serif; --monospace-font-weight-bold: 500; /* base */ --body-background: #f2f5f9; @@ -51,7 +61,7 @@ --navbar-background: var(--neutral-white); --navbar-font-color: #24292e; --navbar_hover-background: var(--neutral-lighter); - --navbar-button-background: var(--primary); + --navbar-button-background: var(--accent-light); --navbar-button-font-color: var(--neutral-white); --navbar-menu-border-color: var(--panel-border-color); --navbar-menu-background: var(--neutral-white); @@ -90,8 +100,8 @@ /* doc */ --doc-font-color: var(--text); --doc-font-size: inherit; - --doc-font-size--desktop: calc(17 / var(--rem-base) * 1rem); - --doc-line-height: 1.4; + --doc-font-size--desktop: 16px; + --doc-line-height: 1.6; --doc-margin: 0 auto; --doc-margin--desktop: 0 2rem; --doc-margin--desktop-large: 0 3rem; @@ -126,10 +136,9 @@ --table-border-color: var(--panel-border-color); /* footer */ --footer-line-height: var(--doc-line-height); - --footer-background: #424242; --footer-font-color: #fafafa; /* dimensions and positioning */ - --navbar-height: 50px; + --navbar-height: 60px; --toolbar-height: calc(45 / var(--rem-base) * 1rem); --drawer-height: var(--toolbar-height); --body-top: var(--navbar-height); @@ -145,6 +154,7 @@ --doc-max-width: calc(720 / var(--rem-base) * 1rem); --doc-max-width--desktop: calc(1500 / var(--rem-base) * 1rem); --border-radius: 5px; + --cards-gap: 24px; /* stacking */ --z-index-nav: 1; --z-index-toolbar: 2; diff --git a/src/font/PPTelegraf-Light.woff2 b/src/font/PPTelegraf-Light.woff2 new file mode 100644 index 00000000..69136edf Binary files /dev/null and b/src/font/PPTelegraf-Light.woff2 differ diff --git a/src/font/PPTelegraf-Medium.woff2 b/src/font/PPTelegraf-Medium.woff2 new file mode 100644 index 00000000..50ea0f20 Binary files /dev/null and b/src/font/PPTelegraf-Medium.woff2 differ diff --git a/src/font/PPTelegraf-RegularSlanted.woff2 b/src/font/PPTelegraf-RegularSlanted.woff2 new file mode 100644 index 00000000..b6e3e58a Binary files /dev/null and b/src/font/PPTelegraf-RegularSlanted.woff2 differ diff --git a/src/font/PPTelegraf-UltralightSlanted.woff2 b/src/font/PPTelegraf-UltralightSlanted.woff2 new file mode 100644 index 00000000..3c07c81e Binary files /dev/null and b/src/font/PPTelegraf-UltralightSlanted.woff2 differ diff --git a/src/font/ubuntu-all-400-italic.woff b/src/font/ubuntu-all-400-italic.woff deleted file mode 100644 index c8057c3b..00000000 Binary files a/src/font/ubuntu-all-400-italic.woff and /dev/null differ diff --git a/src/font/ubuntu-all-400-normal.woff b/src/font/ubuntu-all-400-normal.woff deleted file mode 100644 index 5edcbd80..00000000 Binary files a/src/font/ubuntu-all-400-normal.woff and /dev/null differ diff --git a/src/font/ubuntu-all-500-italic.woff b/src/font/ubuntu-all-500-italic.woff deleted file mode 100644 index c1f1b113..00000000 Binary files a/src/font/ubuntu-all-500-italic.woff and /dev/null differ diff --git a/src/font/ubuntu-all-500-normal.woff b/src/font/ubuntu-all-500-normal.woff deleted file mode 100644 index 5221a020..00000000 Binary files a/src/font/ubuntu-all-500-normal.woff and /dev/null differ diff --git a/src/img/banner-hz.svg b/src/img/banner-hz.svg deleted file mode 100644 index 0b21afd2..00000000 --- a/src/img/banner-hz.svg +++ /dev/null @@ -1,454 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/img/caret-blue.svg b/src/img/caret-blue.svg index 90f370ea..f996cd11 100644 --- a/src/img/caret-blue.svg +++ b/src/img/caret-blue.svg @@ -1,3 +1,3 @@ - + diff --git a/src/img/chevron.svg b/src/img/chevron.svg index 836c90f9..f5b26acf 100644 --- a/src/img/chevron.svg +++ b/src/img/chevron.svg @@ -53,7 +53,7 @@ id="layer1" transform="translate(0,-1022.3622)"> + + diff --git a/src/img/edit.svg b/src/img/edit.svg new file mode 100644 index 00000000..0f07571c --- /dev/null +++ b/src/img/edit.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/img/github.svg b/src/img/github.svg index 18456ded..d46f3212 100644 --- a/src/img/github.svg +++ b/src/img/github.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/src/img/go.png b/src/img/go.png deleted file mode 100644 index 491bd51d..00000000 Binary files a/src/img/go.png and /dev/null differ diff --git a/src/img/hazelcast-banner-back.png b/src/img/hazelcast-banner-back.png index dce4a0b4..3063c514 100644 Binary files a/src/img/hazelcast-banner-back.png and b/src/img/hazelcast-banner-back.png differ diff --git a/src/img/hazelcast-banner-noback.png b/src/img/hazelcast-banner-noback.png deleted file mode 100644 index 3487bb41..00000000 Binary files a/src/img/hazelcast-banner-noback.png and /dev/null differ diff --git a/src/img/hazelcast-logo-white.png b/src/img/hazelcast-logo-white.png new file mode 100644 index 00000000..2a94b97f Binary files /dev/null and b/src/img/hazelcast-logo-white.png differ diff --git a/src/img/home.svg b/src/img/home.svg index 327a0a96..e0894644 100644 --- a/src/img/home.svg +++ b/src/img/home.svg @@ -1,6 +1,6 @@ - + diff --git a/src/img/home/hazelcast-banner-back.jpeg b/src/img/home/hazelcast-banner-back.jpeg new file mode 100644 index 00000000..e9cabca1 Binary files /dev/null and b/src/img/home/hazelcast-banner-back.jpeg differ diff --git a/src/img/kapa/stars.png b/src/img/kapa/stars.png new file mode 100644 index 00000000..92a12b46 Binary files /dev/null and b/src/img/kapa/stars.png differ diff --git a/src/img/lifebuoy.svg b/src/img/lifebuoy.svg new file mode 100644 index 00000000..f7d90aab --- /dev/null +++ b/src/img/lifebuoy.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/img/mail.svg b/src/img/mail.svg new file mode 100644 index 00000000..3b694d2f --- /dev/null +++ b/src/img/mail.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/img/menu.svg b/src/img/menu.svg index 211102be..d1901801 100644 --- a/src/img/menu.svg +++ b/src/img/menu.svg @@ -106,22 +106,22 @@ inkscape:connector-curvature="0" id="path4149" d="m 35,972.34003 55.000003,0" - style="fill:none;fill-rule:evenodd;stroke:#222;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647" /> + style="fill:none;fill-rule:evenodd;stroke:#0080a9;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647" /> + style="opacity:1;fill:#0080a9;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> + style="fill:none;fill-rule:evenodd;stroke:#0080a9;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647" /> + style="opacity:1;fill:#0080a9;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> + style="fill:none;fill-rule:evenodd;stroke:#0080a9;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647" /> + style="opacity:1;fill:#0080a9;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> diff --git a/src/img/nav-button.svg b/src/img/nav-button.svg index b9a51d4d..7b39512d 100644 --- a/src/img/nav-button.svg +++ b/src/img/nav-button.svg @@ -1,5 +1,5 @@ - + diff --git a/src/img/pencil.svg b/src/img/pencil.svg index a7864df4..be709aea 100644 --- a/src/img/pencil.svg +++ b/src/img/pencil.svg @@ -1,3 +1,3 @@ - + diff --git a/src/img/pull.svg b/src/img/pull.svg deleted file mode 100644 index b62195d6..00000000 --- a/src/img/pull.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/img/streaming.svg b/src/img/streaming.svg new file mode 100644 index 00000000..92f20ab2 --- /dev/null +++ b/src/img/streaming.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/img/survey.svg b/src/img/survey.svg deleted file mode 100644 index 76936ebf..00000000 --- a/src/img/survey.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/img/team.svg b/src/img/team.svg new file mode 100644 index 00000000..6e5a05d3 --- /dev/null +++ b/src/img/team.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/img/thumbs-down.svg b/src/img/thumbs-down.svg new file mode 100644 index 00000000..da01b912 --- /dev/null +++ b/src/img/thumbs-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/thumbs-up.svg b/src/img/thumbs-up.svg new file mode 100644 index 00000000..ccecc254 --- /dev/null +++ b/src/img/thumbs-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/training.png b/src/img/training.png new file mode 100644 index 00000000..8f8e2fe0 Binary files /dev/null and b/src/img/training.png differ diff --git a/src/js/01-nav.js b/src/js/01-nav.js index 5a8a41b3..15ee6841 100644 --- a/src/js/01-nav.js +++ b/src/js/01-nav.js @@ -1,6 +1,18 @@ /* eslint-disable no-inner-declarations */ ;(function () { var SECT_CLASS_RX = /^sect(\d)$/ + const VERSION_PICKER_ACTIVE_TOGGLE_NAME = 'data-active-toggle' + const VERSION_PICKER_TOGGLE_NAME = 'data-toggle-value' + + function versionPickerToggleHandler () { + const value = this.getAttribute(VERSION_PICKER_TOGGLE_NAME) + const versionPicker = document.getElementById('navVersionPicker') + if (versionPicker.getAttribute(VERSION_PICKER_ACTIVE_TOGGLE_NAME) === value) { + versionPicker.setAttribute(VERSION_PICKER_ACTIVE_TOGGLE_NAME, '') + } else { + versionPicker.setAttribute(VERSION_PICKER_ACTIVE_TOGGLE_NAME, value) + } + } if (document.getElementsByClassName('nav-container').length > 0) { var navContainer = document.querySelector('.nav-container') @@ -43,12 +55,12 @@ } }) - nav.querySelector('.context').addEventListener('click', function () { - var currentPanel = nav.querySelector('.is-active[data-panel]') - var activatePanel = currentPanel.dataset.panel === 'menu' ? 'explore' : 'menu' - currentPanel.classList.toggle('is-active') - nav.querySelector('[data-panel=' + activatePanel + ']').classList.toggle('is-active') - }) + document.getElementById('navbarProductName').addEventListener('click', versionPickerToggleHandler) + + const navbarProductVersionEl = document.getElementById('navbarProductVersion') + if (navbarProductVersionEl) { + navbarProductVersionEl.addEventListener('click', versionPickerToggleHandler) + } // NOTE prevent text from being selected by double click menuPanel.addEventListener('mousedown', function (e) { diff --git a/src/js/02-on-this-page.js b/src/js/02-on-this-page.js index 2517c6de..dcb0809d 100644 --- a/src/js/02-on-this-page.js +++ b/src/js/02-on-this-page.js @@ -27,10 +27,6 @@ var menu = sidebar.querySelector('.toc-menu') if (!menu) (menu = document.createElement('div')).className = 'toc-menu' - - var title = document.createElement('h3') - title.textContent = '' - menu.appendChild(title) menu.appendChild(list) var startOfContent = !document.getElementById('toc') && article.querySelector('h1.page ~ :not(.is-before-toc)') diff --git a/src/js/05-mobile-navbar.js b/src/js/05-mobile-navbar.js deleted file mode 100644 index ba5cb091..00000000 --- a/src/js/05-mobile-navbar.js +++ /dev/null @@ -1,12 +0,0 @@ -document.addEventListener('DOMContentLoaded', function () { - var navbarToggles = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0) - if (navbarToggles.length === 0) return - navbarToggles.forEach(function (el) { - el.addEventListener('click', function (e) { - e.stopPropagation() - el.classList.toggle('is-active') - document.getElementById(el.dataset.target).classList.toggle('is-active') - document.documentElement.classList.toggle('is-clipped--navbar') - }) - }) -}) diff --git a/src/js/11-more-versions.js b/src/js/11-more-versions.js deleted file mode 100644 index 473d9b27..00000000 --- a/src/js/11-more-versions.js +++ /dev/null @@ -1,34 +0,0 @@ -;(function () { - 'use strict' - var seeMoreButtons = document.getElementsByClassName('more-versions') - var seeLessButtons = document.getElementsByClassName('fewer-versions') - - if (seeMoreButtons !== null) { - for (var i = 0; i < seeMoreButtons.length; i++) { - seeMoreButtons[i].addEventListener('click', function (e) { - var seeLessButton = this.nextElementSibling - this.style.display = 'none' - seeLessButton.style.display = 'block' - var versions = this.parentElement.nextElementSibling.childNodes - for (var j = 0; j < versions.length; j++) { - if (versions[j].className === 'version hidden' || versions[j].className === 'version hidden is-latest') { - versions[j].style.display = 'block' - } - } - }) - } - for (var l = 0; l < seeLessButtons.length; l++) { - seeLessButtons[l].addEventListener('click', function (e) { - var seeMoreButton = this.previousElementSibling - seeMoreButton.style.display = 'block' - this.style.display = 'none' - var versions = this.parentElement.nextElementSibling.childNodes - for (var t = 0; t < versions.length; t++) { - if (versions[t].className === 'version hidden' || versions[t].className === 'version hidden is-latest') { - versions[t].style.display = 'none' - } - } - }) - } - } -})() diff --git a/src/layouts/default.hbs b/src/layouts/default.hbs index c82f5065..b88c0339 100644 --- a/src/layouts/default.hbs +++ b/src/layouts/default.hbs @@ -1,11 +1,12 @@ -{{> head defaultPageTitle='Hazelcast'}} + {{> head defaultPageTitle='Hazelcast'}} -{{> header}} -{{> body}} -{{> footer}} + {{> header}} + {{> body}} + {{> feedback-footer }} + {{> footer}} diff --git a/src/partials/body-home.hbs b/src/partials/body-home.hbs index 0c59179a..a346d851 100644 --- a/src/partials/body-home.hbs +++ b/src/partials/body-home.hbs @@ -1,183 +1,294 @@
-

{{{page.title}}}

-
+

+ Hazelcast Documentation +

+

+ Find user guides, code samples, tutorials, API reference, and more. +

+
-
-
+
+
+ +

Get started

+
+ +
-
-

Hazelcast Cloud

-

- Simplify the development and deployment of your applications with a cloud managed service based on Hazelcast Platform. -

-
-
-

Get Started

- -
-
-

Quick Links

- -
-
-
+
+
+ +

Hazelcast Platform

+
+ +
-
-

Hazelcast Platform -

-

- Manually deploy and manage a Hazelcast Platform cluster on your own hardware or in a public cloud environment. -

-
-
-

Get Started

- -
-
-

Quick Links

- -
-
-
-
+
+
+ +

Develop and build

+
+ +
+ +
+
+ + +

Operate and manage

+
+ +
+ +
+
+ + +

Clients and APIs

+
+ +
+ +
+
+ team +

Connectors

+
+ +
+ +
+
+ +

Tools

+
+ +
+ +
+
+ +

Cloud

+
+ +
-
-
-

Hazelcast Client Libraries -

-

- Connect your applications to Hazelcast clusters. -

-
-
-
- -
Java
 -
-
- -
.Net
 -
-
- -
C++
 -
-
- -
Node.js
 -
-
- -
Python
 -
-
- -
Go
 -
-
- -
CLC
 -
-
-
-

Management Center -

-

- Monitor your Hazelcast clusters. -

- -
-
- -
-
-
-
-

See Also -

- Integration Hub: Explore our connectors and plugins for integrating Hazelcast with various data systems, application frameworks, and cloud runtimes. -
-
- Tutorials: Explore tutorials and sample apps that show you how to use Hazelcast for different use cases. -
-
- Online Training: Learn Hazelcast by following self-paced online training courses. -
-
-
+ + + + {{> feedback-footer }}
+ + diff --git a/src/partials/body-tutorials-landing.hbs b/src/partials/body-tutorials-landing.hbs index ff9169c9..4f9ffcec 100644 --- a/src/partials/body-tutorials-landing.hbs +++ b/src/partials/body-tutorials-landing.hbs @@ -1,120 +1,119 @@
-
-

{{{page.title}}}

+
+

+ Tutorials & Recipes +

+

+ Learn how to build and run applications with Hazelcast. +

+ +
-
-
-
-
- {{{page.contents}}} +
+
+
+

+ Filter by product +

+
+ Include Enterprise +
-
-
-
+
+ + + + +
-
-
-
-

- Filter by product -

-
- Include Enterprise - -
-
-
- - - - - -
-
-
-
-

- Filter by language -

-
-
- All - SQL - Java - Python - Node.js - Go - C++ - C# -
-
-
-
-

- Filter by category -

- All -
- - -
+
+
+
+

+ Filter by language +

+
+
+ All + SQL + Java + Python + Node.js + Go + C++ + C# +
+
+
+
+

+ Filter by category +

+ All +
+ -
-
- {{#each (get-tutorial-pages null)}} -
-
-

- {{this.asciidoc.attributes.doctitle}} -

-
-

- {{this.asciidoc.attributes.page-est-time}} -

-
+ +
+
+
+
+
+ {{#each (get-tutorial-pages null)}} +
+
+

+ {{this.asciidoc.attributes.doctitle}} +

+
+

+ {{this.asciidoc.attributes.page-est-time}} +

-
-
-

- {{{this.asciidoc.attributes.description}}} -

-
+
+
+
+

+ {{{this.asciidoc.attributes.description}}} +

-
-
-
-
- -
+
+
+
+
+
+
- {{/each}} -
+
+ {{/each}}
-
+
+
diff --git a/src/partials/body.hbs b/src/partials/body.hbs index 4a0ac259..1100603a 100644 --- a/src/partials/body.hbs +++ b/src/partials/body.hbs @@ -1,4 +1,4 @@
-{{> nav}} -{{> main}} + {{> nav}} + {{> main}}
diff --git a/src/partials/feedback-footer.hbs b/src/partials/feedback-footer.hbs new file mode 100644 index 00000000..0ba5e90d --- /dev/null +++ b/src/partials/feedback-footer.hbs @@ -0,0 +1,31 @@ + diff --git a/src/partials/feedback.hbs b/src/partials/feedback.hbs index dce8e4b2..a21188bd 100644 --- a/src/partials/feedback.hbs +++ b/src/partials/feedback.hbs @@ -1,30 +1,29 @@ -
+ + {{#if (not-eq page.title 'Page Not Found')}} @@ -21,130 +41,60 @@ {{#with page.attributes.box-number}} {{/with}} - {{else if (eq page.component.name 'home')}} + {{else if (or (eq page.component.name 'home') (eq page.layout 'home'))}} {{else if (and (eq page.component.name 'imdg') (or (eq page.componentVersion.version '4') (lt page.componentVersion.version '3.12')))}} @@ -163,51 +113,20 @@ {{else if (and (eq page.component.name 'management-center') (lt page.componentVersion.version '4.2020.12'))}} @@ -226,17 +145,7 @@ {{else if (and (not-eq page.component.name 'home') (not-eq page.component.name 'cloud'))}} {{else if (eq page.component.name 'cloud')}} @@ -306,34 +185,14 @@ function applyFacetedSearch(){ var checkbox = document.getElementById('facet') if (checkbox.checked) { - // Search all products - docsearch({ - apiKey: '{{site.keys.docsearchApi}}', - indexName: '{{site.keys.docsearchIndex}}', - appId: '{{site.keys.docsearchId}}', - container: '#search-input', - searchParameters: - { - - facetFilters: - [["tags:{{page.component.name}}-{{page.componentVersion.version}}", - "tags:management-center-{{page.attributes.latest-supported-mc}}", - "tags:hazelcast-{{site.components.hazelcast.latest.version}}", - "tags:cloud"]] - } - }) + hzDocSearch([[ + "tags:{{page.component.name}}-{{page.componentVersion.version}}", + "tags:management-center-{{page.attributes.latest-supported-mc}}", + "tags:hazelcast-{{site.components.hazelcast.latest.version}}", + "tags:cloud", + ]], 'Search all docs...'); } else { - docsearch({ - apiKey: '{{site.keys.docsearchApi}}', - indexName: '{{site.keys.docsearchIndex}}', - appId: '{{site.keys.docsearchId}}', - container: '#search-input', - searchParameters: - { - - facetFilters: ["tags:{{page.component.name}}-{{page.componentVersion.version}}"] - } - }) + hzDocSearch(["tags:{{page.component.name}}-{{page.componentVersion.version}}"]); } } @@ -342,34 +201,14 @@ function applyFacetedSearch(){ var checkbox = document.getElementById('facet') if (checkbox.checked) { - // Search all products - docsearch({ - apiKey: '{{site.keys.docsearchApi}}', - indexName: '{{site.keys.docsearchIndex}}', - appId: '{{site.keys.docsearchId}}', - container: '#search-input', - searchParameters: - { - - facetFilters: - [["tags:{{page.component.name}}-{{page.componentVersion.version}}", - "tags:management-center-{{site.components.management-center.latest.version}}", - "tags:hazelcast-{{site.components.hazelcast.latest.version}}", - "tags:cloud"]] - } - }) + hzDocSearch([[ + "tags:{{page.component.name}}-{{page.componentVersion.version}}", + "tags:management-center-{{site.components.management-center.latest.version}}", + "tags:hazelcast-{{site.components.hazelcast.latest.version}}", + "tags:cloud", + ]], 'Search all docs...'); } else { - docsearch({ - apiKey: '{{site.keys.docsearchApi}}', - indexName: '{{site.keys.docsearchIndex}}', - appId: '{{site.keys.docsearchId}}', - container: '#search-input', - searchParameters: - { - - facetFilters: ["tags:{{page.component.name}}-{{page.componentVersion.version}}"] - } - }) + hzDocSearch(["tags:{{page.component.name}}-{{page.componentVersion.version}}"]); } } @@ -379,34 +218,14 @@ function applyFacetedSearch(){ var checkbox = document.getElementById('facet') if (checkbox.checked) { - // Search all products - docsearch({ - apiKey: '{{site.keys.docsearchApi}}', - indexName: '{{site.keys.docsearchIndex}}', - appId: '{{site.keys.docsearchId}}', - container: '#search-input', - searchParameters: - { - - facetFilters: - [["tags:{{page.component.name}}-{{page.componentVersion.version}}", - "tags:management-center-{{page.attributes.latest-supported-mc}}", - "tags:imdg-{{site.components.imdg.latest.version}}", - "tags:cloud"]] - } - }) + hzDocSearch([[ + "tags:{{page.component.name}}-{{page.componentVersion.version}}", + "tags:management-center-{{page.attributes.latest-supported-mc}}", + "tags:imdg-{{site.components.imdg.latest.version}}", + "tags:cloud", + ]], 'Search all docs...'); } else { - docsearch({ - apiKey: '{{site.keys.docsearchApi}}', - indexName: '{{site.keys.docsearchIndex}}', - appId: '{{site.keys.docsearchId}}', - container: '#search-input', - searchParameters: - { - - facetFilters: ["tags:{{page.component.name}}-{{page.componentVersion.version}}"] - } - }) + hzDocSearch(["tags:{{page.component.name}}-{{page.componentVersion.version}}"]); } } @@ -415,34 +234,14 @@ function applyFacetedSearch(){ var checkbox = document.getElementById('facet') if (checkbox.checked) { - // Search all products - docsearch({ - apiKey: '{{site.keys.docsearchApi}}', - indexName: '{{site.keys.docsearchIndex}}', - appId: '{{site.keys.docsearchId}}', - container: '#search-input', - searchParameters: - { - - facetFilters: - [["tags:{{page.component.name}}-{{page.componentVersion.version}}", - "tags:management-center-{{site.components.management-center.latest.version}}", - "tags:imdg-{{site.components.imdg.latest.version}}", - "tags:cloud"]] - } - }) + hzDocSearch([[ + "tags:{{page.component.name}}-{{page.componentVersion.version}}", + "tags:management-center-{{site.components.management-center.latest.version}}", + "tags:imdg-{{site.components.imdg.latest.version}}", + "tags:cloud", + ]], 'Search all docs...'); } else { - docsearch({ - apiKey: '{{site.keys.docsearchApi}}', - indexName: '{{site.keys.docsearchIndex}}', - appId: '{{site.keys.docsearchId}}', - container: '#search-input', - searchParameters: - { - - facetFilters: ["tags:{{page.component.name}}-{{page.componentVersion.version}}"] - } - }) + hzDocSearch(["tags:{{page.component.name}}-{{page.componentVersion.version}}"]); } } @@ -450,36 +249,26 @@ {{#if (and (eq page.component.name 'management-center') page.attributes.latest-supported-imdg)}} @@ -488,34 +277,14 @@ function applyFacetedSearch(){ var checkbox = document.getElementById('facet') if (checkbox.checked) { - // Search all products - docsearch({ - apiKey: '{{site.keys.docsearchApi}}', - indexName: '{{site.keys.docsearchIndex}}', - appId: '{{site.keys.docsearchId}}', - container: '#search-input', - searchParameters: - { - - facetFilters: - [["tags:{{page.component.name}}-{{page.componentVersion.version}}", - "tags:imdg-{{site.components.imdg.latest.version}}", - "tags:hazelcast-{{page.attributes.latest-supported-hazelcast}}", - "tags:cloud"]] - } - }) + hzDocSearch([[ + "tags:{{page.component.name}}-{{page.componentVersion.version}}", + "tags:imdg-{{site.components.imdg.latest.version}}", + "tags:hazelcast-{{page.attributes.latest-supported-hazelcast}}", + "tags:cloud", + ]], 'Search all docs...'); } else { - docsearch({ - apiKey: '{{site.keys.docsearchApi}}', - indexName: '{{site.keys.docsearchIndex}}', - appId: '{{site.keys.docsearchId}}', - container: '#search-input', - searchParameters: - { - - facetFilters: ["tags:{{page.component.name}}-{{page.componentVersion.version}}"] - } - }) + hzDocSearch(["tags:{{page.component.name}}-{{page.componentVersion.version}}"]); } } @@ -524,34 +293,14 @@ function applyFacetedSearch(){ var checkbox = document.getElementById('facet') if (checkbox.checked) { - // Search all products - docsearch({ - apiKey: '{{site.keys.docsearchApi}}', - indexName: '{{site.keys.docsearchIndex}}', - appId: '{{site.keys.docsearchId}}', - container: '#search-input', - searchParameters: - { - - facetFilters: - [["tags:{{page.component.name}}-{{page.componentVersion.version}}", - "tags:imdg-{{site.components.imdg.latest.version}}", - "tags:hazelcast-{{site.components.hazelcast.latest.version}}", - "tags:cloud"]] - } - }) + hzDocSearch([[ + "tags:{{page.component.name}}-{{page.componentVersion.version}}", + "tags:imdg-{{site.components.imdg.latest.version}}", + "tags:hazelcast-{{site.components.hazelcast.latest.version}}", + "tags:cloud", + ]], 'Search all docs...'); } else { - docsearch({ - apiKey: '{{site.keys.docsearchApi}}', - indexName: '{{site.keys.docsearchIndex}}', - appId: '{{site.keys.docsearchId}}', - container: '#search-input', - searchParameters: - { - - facetFilters: ["tags:{{page.component.name}}-{{page.componentVersion.version}}"] - } - }) + hzDocSearch(["tags:{{page.component.name}}-{{page.componentVersion.version}}"]); } } @@ -561,56 +310,29 @@ function applyFacetedSearch(){ var checkbox = document.getElementById('facet') if (checkbox.checked) { - // Search all products - docsearch({ - apiKey: '{{site.keys.docsearchApi}}', - indexName: '{{site.keys.docsearchIndex}}', - appId: '{{site.keys.docsearchId}}', - container: '#search-input', - searchParameters: - { - - facetFilters: - [["tags:{{page.component.name}}-{{page.componentVersion.version}}", - "tags:imdg-{{site.components.imdg.latest.version}}", - "tags:hazelcast-{{site.components.hazelcast.latest.version}}", - "tags:cloud"]] - } - }) + hzDocSearch([[ + "tags:{{page.component.name}}-{{page.componentVersion.version}}", + "tags:imdg-{{site.components.imdg.latest.version}}", + "tags:hazelcast-{{site.components.hazelcast.latest.version}}", + "tags:cloud", + ]], 'Search all docs...'); } else { - docsearch({ - apiKey: '{{site.keys.docsearchApi}}', - indexName: '{{site.keys.docsearchIndex}}', - appId: '{{site.keys.docsearchId}}', - container: '#search-input', - searchParameters: - { - - facetFilters: ["tags:{{page.component.name}}-{{page.componentVersion.version}}"] - } - }) + hzDocSearch(["tags:{{page.component.name}}-{{page.componentVersion.version}}"]); } } {{/if}} {{else}} {{/if}} + + diff --git a/src/partials/head-scripts.hbs b/src/partials/head-scripts.hbs index 1ae994c8..d3d70fe7 100644 --- a/src/partials/head-scripts.hbs +++ b/src/partials/head-scripts.hbs @@ -8,4 +8,36 @@ {{/with}} +{{#with site.keys.aiSearchId}} + + + +{{/with}} + + diff --git a/src/partials/header-content.hbs b/src/partials/header-content.hbs index ba589002..a5127cce 100644 --- a/src/partials/header-content.hbs +++ b/src/partials/header-content.hbs @@ -1,105 +1,36 @@
-