ORC-1246: Revamp ORC website
### What changes were proposed in this pull request?
This PR aims to revamp the ORC website.
### Why are the changes needed?
To improve the followings:
- Increase page width and improve resizing
- Create `RELEASES` menu
- Menu reordering
- Improve mobile device UX
- Fix the broken layout in the footer
### How was this patch tested?
I tested with various resolutions listed below.
<img width="997" alt="Screen Shot 2022-08-09 at 9 03 23 PM" src="https://user-images.githubusercontent.com/62487364/183810659-3b6fc502-fded-4b73-a7b6-f2aba3fbc1bc.png">
Closes #1197
Closes #1217 from williamhyun/revampwebsite.
Lead-authored-by: William Hyun <william@apache.org>
Co-authored-by: Dongjoon Hyun <dongjoon@apache.org>
Signed-off-by: Dongjoon Hyun <dongjoon@apache.org>
diff --git a/site/README.md b/site/README.md
index af7cf1c..d77b39d 100644
--- a/site/README.md
+++ b/site/README.md
@@ -11,7 +11,7 @@
## Run the docker container with the preview of the site.
-1. `docker run -d --name orc-container -p 4000:4000 apache/orc-dev:site`
+1. `docker run -d --name orc-container -p 4000:4000 -v $PWD:/home/orc/site apache/orc-dev:site`
## Browsing
diff --git a/site/_data/docs.yml b/site/_data/docs.yml
index bfe3ca3..b57e481 100644
--- a/site/_data/docs.yml
+++ b/site/_data/docs.yml
@@ -9,7 +9,6 @@
- title: Installing
docs:
- building
- - releases
- title: Using in Spark
docs:
diff --git a/site/_docs/releases.md b/site/_docs/releases.md
index f811f44..d3b16dc 100644
--- a/site/_docs/releases.md
+++ b/site/_docs/releases.md
@@ -1,7 +1,7 @@
---
layout: docs
title: Releases
-permalink: /docs/releases.html
+permalink: /releases.html
---
{% for relItr in site.data.releases %}
{% if relItr[1]["state"] == "latest" %}
diff --git a/site/_includes/footer.html b/site/_includes/footer.html
index d3f32fb..ef5bc15 100644
--- a/site/_includes/footer.html
+++ b/site/_includes/footer.html
@@ -1,5 +1,5 @@
<footer role="contentinfo">
- <p>The contents of this website are © {{ site.time | date: '%Y' }}
+ <p style="margin-left: 20px; margin-right; 20px; text-align: center">The contents of this website are © {{ site.time | date: '%Y' }}
<a href="https://www.apache.org/">Apache Software Foundation</a>
under the terms of the <a
href="https://www.apache.org/licenses/LICENSE-2.0.html">
diff --git a/site/_includes/header.html b/site/_includes/header.html
index 9aff919..e6e4721 100644
--- a/site/_includes/header.html
+++ b/site/_includes/header.html
@@ -3,7 +3,7 @@
{% include primary-nav-items.html %}
</nav>
<div class="grid">
- <div class="unit one-third center-on-mobiles">
+ <div class="unit one-quarter center-on-mobiles">
<h1>
<a href="/">
<span class="sr-only">Apache ORC</span>
@@ -11,7 +11,7 @@
</a>
</h1>
</div>
- <nav class="main-nav unit two-thirds hide-on-mobiles">
+ <nav class="main-nav unit three-quarters hide-on-mobiles">
{% include primary-nav-items.html %}
</nav>
</div>
diff --git a/site/_includes/primary-nav-items.html b/site/_includes/primary-nav-items.html
index 28d5732..c69578e 100644
--- a/site/_includes/primary-nav-items.html
+++ b/site/_includes/primary-nav-items.html
@@ -2,20 +2,26 @@
<li class="{% if page.overview %}current{% endif %}">
<a href="/">Home</a>
</li>
+ <li class="{% if page.url contains '/releases/' %}current{% endif %}">
+ <a href="/releases/"><span class="show-on-mobiles">Rel</span>
+ <span class="hide-on-mobiles">Releases</span></a>
+ </li>
<li class="{% if page.url contains '/docs/' %}current{% endif %}">
- <a href="/docs/"><span class="show-on-mobiles">Docs</span>
+ <a href="/docs/"><span class="show-on-mobiles">Doc</span>
<span class="hide-on-mobiles">Documentation</span></a>
</li>
<li class="{% if page.url contains '/talks/' %}current{% endif %}">
- <a href="/talks/">Talks</a>
+ <a href="/talks/"><span class="show-on-mobiles">Talk</span>
+ <span class="hide-on-mobiles">Talks</span></a>
</li>
<li class="{% if page.url contains '/news/' %}current{% endif %}">
<a href="/news/">News</a>
</li>
+ <li class="{% if page.url contains '/develop/' %}current{% endif %}">
+ <a href="/develop/"><span class="show-on-mobiles">Dev</span>
+ <span class="hide-on-mobiles">Develop</span></a>
+ </li>
<li class="{% if page.url contains '/help/' %}current{% endif %}">
<a href="/help/">Help</a>
</li>
- <li class="{% if page.url contains '/develop/' %}current{% endif %}">
- <a href="/develop/">Develop</a>
- </li>
</ul>
diff --git a/site/_sass/_gridism.scss b/site/_sass/_gridism.scss
index 11a4d16..5571b08 100644
--- a/site/_sass/_gridism.scss
+++ b/site/_sass/_gridism.scss
@@ -42,7 +42,7 @@
/* Wrapping at a maximum width is optional */
.wrap .grid,
.grid.wrap {
- max-width: 978px;
+ max-width: 1302px;
margin: 0 auto;
}
diff --git a/site/index.html b/site/index.html
index 481802a..4917c0f 100644
--- a/site/index.html
+++ b/site/index.html
@@ -38,7 +38,7 @@
<section class="quickstart">
<div class="grid">
<div class="unit golden-small center-on-mobiles">
- <p class = "side">Download the current <a href="docs/releases.html">
+ <p class = "side">Download the current <a href="releases/">
ORC release.</a></p>
</div>
<div class="unit golden-large code">
