[dpdk-web] [PATCH] add buttons to documentation page for links

[dpdk-web] [PATCH] add buttons to documentation page for links

[Harry van Haaren]

This patch adds buttons with icons for documentation links and locations.

Signed-off-by: Harry van Haaren <harry.van.haaren@intel.com>
---
If you have minor fixes / updates, feel free to add a signed-off, update and
commit.

Future work for consistency across pages:
-update download page links for PKTGen, DTS MemNic and Vmxnet3-usermap

 doc.html | 97 +++++++++++++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 68 insertions(+), 29 deletions(-)

diff --git a/doc.html b/doc.html
index 2af2640..69261d6 100644
--- a/doc.html
+++ b/doc.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="/reset.css" />
 		<link rel="stylesheet" href="/layout.css" />
 		<link rel="stylesheet" href="/content.css" />
+		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 		<script type="text/javascript">
 			var _gaq = _gaq || [];
 			_gaq.push(['_setAccount', 'UA-39229303-1']);
@@ -38,35 +39,73 @@
 		</header>
 		<section>
 			<h2>Documentation</h2>
-			<ul>
-				<li>For a first try, you should follow
-					the <a href="/doc/quick-start">quick start instructions</a>.
-				<li>The <a href="/doc/nics">list of supported NICs</a>
-					includes PCI NICs and paravirtualized NICs.
-				<li><a href="/doc/api/">API documentation</a>
-					is generated thanks to <a href="http://doxygen.org">doxygen</a>.
-				<li>
-					<a href="/doc/guides/">User guides</a>,
-					<a href="/doc/guides/prog_guide/">programmer's guide</a> and
-					<a href="/doc/guides/rel_notes/">release notes</a>
-					are formatted with <a href="http://sphinx-doc.org/">sphinx</a>.
-				<li>The guides are also available as
-					<a href="/doc/pdf-guides/">PDF files</a>.
-			<h3>Applications</h3>
-			<ul>
-				<li><a href="http://pktgen.readthedocs.org">pktgen-dpdk (traffic generator)</a>
-			</ul>
-			<h3>Tools</h3>
-			<ul>
-				<li><a href="/doc/dts/gsg/">dts (test suite)</a>
-			</ul>
-			<h3>Archives</h3>
-			<ul>
-				<li><a href="/doc/archives">documentation for previous versions</a>
-				<li>Unmaintained driver for QEMU IVSHMEM: <a href="/doc/memnic-pmd">memnic-pmd</a>.
-				<li>Unmaintained driver for VMware ESXi vmxnet3 without uio: <a href="/doc/vmxnet3-usermap">vmxnet3-usermap</a>.
-			</ul>
-			</ul>
+			A range of documentation is available for DPDK. If you
+			are curios to use DPDK, choose the quick-start. Details
+			about which NICs DPDK supports in the list of supported
+			NICs, while the API documentation introduces the code.
+			Each guide introduces a specific topic, and read the
+			Contributing page to understand best-practices to
+			interact with the DPDK community.
+
+			<a href="/doc/quick-start" class="button" style="width: 21%; margin-left: 4%">
+				<i class="material-icons" style="font-size: 4em;">access_time</i><br>
+				Quick Start
+			</a><!-- no whitespace
+			--><a href="/doc/nics" class="button" style="width: 21%; margin: 0 2%;">
+				<i class="material-icons" style="font-size: 4em;">link</i><br>
+				List of NICs
+			</a><!-- no whitespace
+			--><a href="/doc/api/" class="button" style="width: 21%;">
+				<i class="material-icons" style="font-size: 4em;">extension</i><br>
+				API docs
+			</a><!-- no whitespace
+			--><a href="/doc/guides/prog_guide/" class="button"
+				style="width: 21%; margin: 2% 2%">
+				<i class="material-icons" style="font-size: 4em;">description</i><br>
+				Programmer Guide
+			</a>
+
+			<a href="/doc/guides" class="button" style="width: 21%; margin-left: 4%">
+				<i class="material-icons" style="font-size: 4em;">receipt</i><br>
+				User Guides
+			</a><!-- no whitespace
+			--><a href="/doc/guides/contributing/" class="button" style="width: 21%; margin: 0 2%;">
+				<i class="material-icons" style="font-size: 4em;">build</i><br>
+				Contributing
+			</a><!-- no whitespace
+			--><a href="/doc/guides/rel_notes/" class="button" style="width: 21%;">
+				<i class="material-icons" style="font-size: 4em;">assignment</i><br>
+				Release Notes
+			</a><!-- no whitespace
+			--><a href="/doc/guides/pdf-guides/" class="button" style="width: 21%; margin: 0 2%">
+				<i class="material-icons" style="font-size: 4em;">reorder</i><br>
+				Guides as PDF
+			</a>
+
+			<h3>Application and Tool Docs</h3>
+			<a href="http://pktgen.readthedocs.org" class="button" style="width: 21%; margin-left: 4%;">
+				<i class="material-icons" style="font-size: 4em;">reorder</i><br>
+				Pktgen<br/>Traffic Generator
+			</a><!-- no whitespace
+			--><a href="/doc/dts/gsg/" class="button" style="width: 21%; margin: 0 2%">
+				<i class="material-icons" style="font-size: 4em;">low_priority</i><br>
+				DTS<br/>DPDK Test Suite
+			</a>
+
+			<h3>Outdated Archives and PMDs</h3>
+			<a href="/doc/archives" class="button" style="width: 21%; margin: 0 4%">
+				<i class="material-icons" style="font-size: 4em;">history</i><br>
+				Documentation of<br/>Previous Versions
+			</a><!-- no whitespace
+			--><a href="/doc/memnic-pmd/" class="button" style="width: 21%; margin: 0 -2%">
+				<i class="material-icons" style="font-size: 4em;">highlight_off</i><br>
+				Unmaintained PMD<br/>for QEMU IVSHMEM
+			</a><!-- no whitespace
+			--><a href="/doc/vmxnet3-usermap/" class="button" style="width:
+				21%; margin: 0 4%">
+				<i class="material-icons" style="font-size: 4em;">highlight_off</i><br>
+				Unmaintained PMD for<br/>VMware ESXI (no uio)
+			</a>
 		</section>
 	</body>
 </html>
-- 
2.5.0

Re: [dpdk-web] [PATCH] add buttons to documentation page for links

[Thomas Monjalon]

Hi Harry,

2016-02-29 10:58, Harry van Haaren:
> This patch adds buttons with icons for documentation links and locations.

I don't think everything should be a button.
Currently, I cannot think to something else.
Feel free to suggest.

Re: [dpdk-web] [PATCH] add buttons to documentation page for links

[Van Haaren, Harry]

> From: Thomas Monjalon [mailto:thomas.monjalon@6wind.com]
> 2016-02-29 10:58, Harry van Haaren:
> > This patch adds buttons with icons for documentation links and locations.
> 
> I don't think everything should be a button.
> Currently, I cannot think to something else.
> Feel free to suggest.

I didn't have any other ideas either..
If I think of anything I'll patch and send.

In the meantime, consider this a self-NACK if you hadn't NACK-ed already :) 
Cheers, -Harry