DOC-12: new homepage design (#206)

Co-authored-by: Serdar Ozmen <[email protected]>
Co-authored-by: Oliver Howell <[email protected]>

.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
+
+```
+<i data-feather="briefcase" class="card-img"></i>
+```
+
+Please note, that the previous HTML snippet is replaced with the real icon after page load with the JS snippet:
+
+```
+<script>
+feather.replace();
+</script>
+```
+
+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.

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()))
 }

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()

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"

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.

preview-src/index.adoc

@@ -36,7 +36,7 @@
 			<a href="https://docs.hazelcast.com/imdg/latest/getting-started.html">Get Started <img src="right-arrow.svg"></a>
 		</li>
 	</ul>
-	
+
 ++++
 
 ++++

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 <<configuring-java-client, Configuring Java Client section>> 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<String, Customer> 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();
-```
+```

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.

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