BE-679 Create online documentation

* removed a file * added content tabs in tutorial * centered zoom on click * removed _static folder from gitignore * updated links to .html files to include image zooming Signed-off-by: nfrunza <nfrunza@gmail.com> Change-Id: I018a7bd2c4a575edfdbb4b5ff3518e280d54cb9c
hyperledger-labs · Nov 4, 2019 · 7a75553 · 7a75553
1 parent 834f233
commit 7a75553
Show file tree

Hide file tree

Showing 51 changed files with 546 additions and 197 deletions.
diff --git a/.gitignore b/.gitignore
@@ -32,6 +32,6 @@ ssl-certs/*.csr
 app/test/.nyc_output/
 docs/build/
 _build
-_static
+# _static
 _templates
 *.DS_Store
diff --git a/docs/requirements.txt b/docs/requirements.txt
@@ -14,3 +14,4 @@ snowballstemmer==1.2.1
 Sphinx==1.7.2
 sphinx-rtd-theme==0.2.5b2
 recommonmark==0.4.0
+sphinxcontrib-contentui==0.2.2
diff --git a/docs/source/_static/css/styles.css b/docs/source/_static/css/styles.css
@@ -0,0 +1,17 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+
+input[type='checkbox'] {
+	display: none;
+}
+
+.container img {
+	margin: 0px;
+	transition: transform 0.25s ease;
+	cursor: zoom-in;
+}
+
+input[type='checkbox']:checked ~ label > img {
+	transform: scale(1.75);
+	transform-origin: left;
+	cursor: zoom-out;
+}
diff --git a/docs/source/_static/images/hl_block_details_notification_panel.png b/docs/source/_static/images/hl_block_details_notification_panel.png
diff --git a/docs/source/_static/images/hl_block_details_window.png b/docs/source/_static/images/hl_block_details_window.png
diff --git a/docs/source/_static/images/hl_block_list.png b/docs/source/_static/images/hl_block_list.png
diff --git a/docs/source/_static/images/hl_chaincodes.png b/docs/source/_static/images/hl_chaincodes.png
diff --git a/docs/source/_static/images/hl_channel_list.png b/docs/source/_static/images/hl_channel_list.png
diff --git a/docs/source/_static/images/hl_dark_theme.png b/docs/source/_static/images/hl_dark_theme.png
diff --git a/docs/source/_static/images/hl_dashboard.png b/docs/source/_static/images/hl_dashboard.png
diff --git a/...ource/images/hl_explorer_architecture.png → ...tatic/images/hl_explorer_architecture.png b/...ource/images/hl_explorer_architecture.png → ...tatic/images/hl_explorer_architecture.png
diff --git a/docs/source/_static/images/hl_filter_window.png b/docs/source/_static/images/hl_filter_window.png
diff --git a/docs/source/_static/images/hl_login.png b/docs/source/_static/images/hl_login.png
diff --git a/docs/source/_static/images/hl_network.png b/docs/source/_static/images/hl_network.png
diff --git a/docs/source/_static/images/hl_new_block_notification_panel.png b/docs/source/_static/images/hl_new_block_notification_panel.png
diff --git a/docs/source/_static/images/hl_new_user_window.png b/docs/source/_static/images/hl_new_user_window.png
diff --git a/docs/source/_static/images/hl_swagger_home.png b/docs/source/_static/images/hl_swagger_home.png
diff --git a/docs/source/_static/images/hl_transaction_list.png b/docs/source/_static/images/hl_transaction_list.png
diff --git a/docs/source/_static/images/hl_tx_details.png b/docs/source/_static/images/hl_tx_details.png
diff --git a/docs/source/images/ui_presentation.png → ...ource/_static/images/hl_ui_high_level.png b/docs/source/images/ui_presentation.png → ...ource/_static/images/hl_ui_high_level.png
diff --git a/docs/source/architecture.rst b/docs/source/architecture.rst
@@ -14,7 +14,7 @@ Architecture Reference
    :maxdepth: 1
 
    architecture/index
-   architecture/ui_presentation
+   architecture/hl_ui_high_level
    architecture/backend
    architecture/databaselayer
 

diff --git a/docs/source/architecture/hl_ui_high_level.html b/docs/source/architecture/hl_ui_high_level.html
@@ -0,0 +1,20 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../_static/css/styles.css">
+</head>
+
+<body>
+	<div class="container">
+		<input type="checkbox" id="hl_ui_high_level">
+		<label for="hl_ui_high_level">
+			<img src="../_static/images/hl_ui_high_level.png">
+		</label>
+	</div>
+	<br>
+</body>
+
+</html>
diff --git a/docs/source/architecture/ui_presentation.rst → .../source/architecture/hl_ui_high_level.rst b/docs/source/architecture/ui_presentation.rst → .../source/architecture/hl_ui_high_level.rst
@@ -11,10 +11,8 @@ to us and used in our HLExplorer front end.
 
 The high-level architecture of presentation layer
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-.. image:: ../images/ui_presentation.png
-   :width: 850px
-
-
+.. raw:: html
+     :file: ./hl_ui_high_level.html
 
 .. toctree::
    :maxdepth: 1

diff --git a/docs/source/architecture/index.html b/docs/source/architecture/index.html
@@ -0,0 +1,23 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../_static/css/styles.css">
+</head>
+
+<body>
+	<div class="container">
+		<input type="checkbox" id="hl_login">
+		<label for="hl_login">
+			<img src="../_static/images/hl_explorer_architecture.png">
+		</label>
+	</div>
+	</p>
+	<br>
+</body>
+
+
+
+</html>
diff --git a/docs/source/architecture/index.rst b/docs/source/architecture/index.rst
@@ -8,5 +8,5 @@ Hyperledger Explorer Architecture
 The high-level architecture of Hyperledger Explorer
 
 
-.. image:: ../images/hl_explorer_architecture.png
-   :width: 850px
+.. raw:: html
+     :file: ./index.html
diff --git a/docs/source/architecture/restapi.html b/docs/source/architecture/restapi.html
@@ -0,0 +1,21 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../_static/css/styles.css">
+</head>
+
+<body>
+	<div class="container">
+		<input type="checkbox" id="hl_swagger_home">
+		<label for="hl_swagger_home">
+			<img src="../_static/images/hl_swagger_home.png">
+		</label>
+	</div>
+
+	<br>
+</body>
+
+</html>
diff --git a/docs/source/architecture/restapi.rst b/docs/source/architecture/restapi.rst
@@ -48,18 +48,10 @@ Swagger
 To learn more about REST API, and use an interactive API console to submit requests you can take advantage of the `SWAGGER <https://github.com/hyperledger/blockchain-explorer/tree/master#Hyperledger-Explorer-Swagger>`__
 provided by the Hyperledger Explorer.
 
-Some screenshots of the SWAGGER in local environment.
-
-
 Hyperledger Explorer SWAGGER home page.
 
-.. image:: ../images/swagger.png
-   :width: 850px
-
-
-.. image:: ../images/swagger-blocks.png
-   :width: 850px
-
+.. raw:: html
+     :file: ./restapi.html
 
 
 

diff --git a/docs/source/architecture/websockets.html b/docs/source/architecture/websockets.html
@@ -0,0 +1,20 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../_static/css/styles.css">
+</head>
+
+<body>
+	<div class="container">
+		<input type="checkbox" id="hl_new_block_notification_panel">
+		<label for="hl_new_block_notification_panel">
+			<img src="../_static/images/hl_new_block_notification_panel.png">
+		</label>
+	</div>
+	<br>
+</body>
+
+</html>
diff --git a/docs/source/architecture/websockets.rst b/docs/source/architecture/websockets.rst
@@ -13,8 +13,7 @@ The image below illustrates how the notification is displayed when new blocks ar
 new block details is provided in the notification panel.
 
 
-.. image:: ../_static/images/hl_new_block_notification_panel.png
-   :width: 850px
-
+.. raw:: html
+     :file: ./websockets.html
 
 .. TODO
diff --git a/docs/source/conf.py b/docs/source/conf.py
@@ -111,7 +111,7 @@
 #
 #html_theme = 'alabaster'
 html_theme = 'sphinx_rtd_theme'
-# html_theme = 'sphinxdoc'
+#html_theme = 'sphinxdoc'
 # html_theme = 'traditional'
 # html_theme = 'bizstyle'
 # html_theme = 'haiku'
@@ -220,7 +220,7 @@
 # -- Extension configuration -------------------------------------------------
 
 # -- Options for intersphinx extension ---------------------------------------
-
+extensions = ['sphinxcontrib.contentui']
 # Example configuration for intersphinx: refer to the Python standard library.
 intersphinx_mapping = {'https://docs.python.org/': None}
 

diff --git a/docs/source/images/swagger-blocks.png b/docs/source/images/swagger-blocks.png
diff --git a/docs/source/images/swagger.png b/docs/source/images/swagger.png
diff --git a/docs/source/presentation/hl_block_details_window.html b/docs/source/presentation/hl_block_details_window.html
@@ -0,0 +1,27 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<link rel="stylesheet" href="../_static/css/styles.css">
+
+</head>
+
+<body>
+
+<p></p>
+<div class="container">
+	<input type="checkbox" id="hl_block_details_window">
+	<label for="hl_block_details_window">
+		<img src="../_static/images/hl_block_details_window.png">
+	</label>
+</div>
+
+<br>
+
+
+</body>
+
+</html>
diff --git a/docs/source/presentation/hl_block_list.html b/docs/source/presentation/hl_block_list.html
@@ -0,0 +1,27 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<link rel="stylesheet" href="../_static/css/styles.css">
+
+</head>
+
+<body>
+
+<p></p>
+<div class="container">
+	<input type="checkbox" id="hl_block_list">
+	<label for="hl_block_list">
+		<img src="../_static/images/hl_block_list.png">
+	</label>
+</div>
+
+<br>
+
+
+</body>
+
+</html>
diff --git a/docs/source/presentation/hl_chaincodes.html b/docs/source/presentation/hl_chaincodes.html
@@ -0,0 +1,27 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<link rel="stylesheet" href="../_static/css/styles.css">
+
+</head>
+
+<body>
+
+<p></p>
+<div class="container">
+	<input type="checkbox" id="hl_chaincodes">
+	<label for="hl_chaincodes">
+		<img src="../_static/images/hl_chaincodes.png">
+	</label>
+</div>
+
+<br>
+
+
+</body>
+
+</html>
diff --git a/docs/source/presentation/hl_channel_list.html b/docs/source/presentation/hl_channel_list.html
@@ -0,0 +1,27 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<link rel="stylesheet" href="../_static/css/styles.css">
+
+</head>
+
+<body>
+
+<p></p>
+<div class="container">
+	<input type="checkbox" id="hl_channel_list">
+	<label for="hl_channel_list">
+		<img src="../_static/images/hl_channel_list.png">
+	</label>
+</div>
+
+<br>
+
+
+</body>
+
+</html>
diff --git a/docs/source/presentation/hl_dark_theme.html b/docs/source/presentation/hl_dark_theme.html
@@ -0,0 +1,27 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<link rel="stylesheet" href="../_static/css/styles.css">
+
+</head>
+
+<body>
+
+<p></p>
+<div class="container">
+	<input type="checkbox" id="hl_dark_theme">
+	<label for="hl_dark_theme">
+		<img src="../_static/images/hl_dark_theme.png">
+	</label>
+</div>
+
+<br>
+
+
+</body>
+
+</html>
diff --git a/docs/source/presentation/hl_dashboard.html b/docs/source/presentation/hl_dashboard.html
@@ -0,0 +1,28 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<link rel="stylesheet" href="../_static/css/styles.css">
+
+</head>
+
+<body>
+
+<p></p>
+<div class="container">
+	<input type="checkbox" id="hl_dashboard">
+	<label for="hl_dashboard">
+		<img src="../_static/images/hl_dashboard.png">
+	</label>
+</div>
+
+<br>
+
+
+</body>
+
+</html>
+
diff --git a/docs/source/presentation/hl_filter_window.html b/docs/source/presentation/hl_filter_window.html
@@ -0,0 +1,27 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<link rel="stylesheet" href="../_static/css/styles.css">
+
+</head>
+
+<body>
+
+<p></p>
+<div class="container">
+	<input type="checkbox" id="hl_filter_window">
+	<label for="hl_filter_window">
+		<img src="../_static/images/hl_filter_window.png">
+	</label>
+</div>
+
+<br>
+
+
+</body>
+
+</html>