You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@spark.apache.org by ge...@apache.org on 2024/01/10 01:14:49 UTC
(spark) branch branch-3.5 updated: [SPARK-46637][DOCS] Enhancing the Visual Appeal of Spark doc website
This is an automated email from the ASF dual-hosted git repository.
gengliang pushed a commit to branch branch-3.5
in repository https://gitbox.apache.org/repos/asf/spark.git
The following commit(s) were added to refs/heads/branch-3.5 by this push:
new d3e30848084 [SPARK-46637][DOCS] Enhancing the Visual Appeal of Spark doc website
d3e30848084 is described below
commit d3e3084808453769ba0cd4278ee8650e40c185ea
Author: Gengliang Wang <ge...@apache.org>
AuthorDate: Wed Jan 10 09:32:30 2024 +0900
[SPARK-46637][DOCS] Enhancing the Visual Appeal of Spark doc website
### What changes were proposed in this pull request?
Enhance the Visual Appeal of Spark doc website after https://github.com/apache/spark/pull/40269:
#### 1. There is a weird indent on the top right side of the first paragraph of the Spark 3.5.0 doc overview page
Before this PR
<img width="680" alt="image" src="https://github.com/apache/spark/assets/1097932/84d21ca1-a4d0-4bd4-8f20-a34fa5db4000">
After this PR:
<img width="1035" alt="image" src="https://github.com/apache/spark/assets/1097932/4ffc0d5a-ed75-44c5-b20a-475ff401afa8">
#### 2. All the titles are too big and therefore less readable. In the website https://spark.apache.org/downloads.html, titles are h2 while in doc site https://spark.apache.org/docs/latest/ titles are h1. So we should make the font size of titles smaller.
Before this PR:
<img width="935" alt="image" src="https://github.com/apache/spark/assets/1097932/5bbbd9eb-432a-42c0-98be-ff00a9099cd6">
After this PR:
<img width="965" alt="image" src="https://github.com/apache/spark/assets/1097932/dc94c1fb-6ac1-41a8-b4a4-19b3034125d7">
#### 3. The banner image can't be displayed correct. Even when it shows up, it will be hover by the text. To make it simple, let's not show the banner image as we did in https://spark.apache.org/docs/3.4.2/
<img width="570" alt="image" src="https://github.com/apache/spark/assets/1097932/f6d34261-a352-44e2-9633-6e96b311a0b3">
<img width="1228" alt="image" src="https://github.com/apache/spark/assets/1097932/c49ce6b6-13d9-4d8f-97a9-7ed8b037be57">
### Why are the changes needed?
Improve the Visual Appeal of Spark doc website
### Does this PR introduce _any_ user-facing change?
No
### How was this patch tested?
Manually build doc and verify on local setup.
### Was this patch authored or co-authored using generative AI tooling?
No
Closes #44642 from gengliangwang/enhance_doc.
Authored-by: Gengliang Wang <ge...@apache.org>
Signed-off-by: Hyukjin Kwon <gu...@apache.org>
---
docs/_layouts/global.html | 26 +++++++++++---------------
docs/css/custom.css | 35 ++++++++++++++---------------------
docs/img/spark-hero-thin-light.jpg | Bin 278664 -> 0 bytes
3 files changed, 25 insertions(+), 36 deletions(-)
diff --git a/docs/_layouts/global.html b/docs/_layouts/global.html
index 8c4435fdf31..5116472eaa7 100755
--- a/docs/_layouts/global.html
+++ b/docs/_layouts/global.html
@@ -138,25 +138,21 @@
{% if page.url == "/" %}
<section class="hero-banner position-relative">
- <div class="bg">
- </div>
<div class="container position-relative">
<div class="row">
<h1 style="max-width: 680px;">Apache Spark - A Unified engine for large-scale data analytics</h1>
</div>
- <div class="row mt-5">
- <div class="col-12 col-lg-6 no-gutters">
- Apache Spark is a unified analytics engine for large-scale data processing.
- It provides high-level APIs in Java, Scala, Python and R,
- and an optimized engine that supports general execution graphs.
- It also supports a rich set of higher-level tools including
- <a href="sql-programming-guide.html">Spark SQL</a> for SQL and structured data processing,
- <a href="api/python/getting_started/quickstart_ps.html">pandas API on Spark</a> for pandas workloads,
- <a href="ml-guide.html">MLlib</a> for machine learning,
- <a href="graphx-programming-guide.html">GraphX</a> for graph processing,
- and <a href="structured-streaming-programming-guide.html">Structured Streaming</a>
- for incremental computation and stream processing.
- </div>
+ <div class="content mr-3">
+ Apache Spark is a unified analytics engine for large-scale data processing.
+ It provides high-level APIs in Java, Scala, Python and R,
+ and an optimized engine that supports general execution graphs.
+ It also supports a rich set of higher-level tools including
+ <a href="sql-programming-guide.html">Spark SQL</a> for SQL and structured data processing,
+ <a href="api/python/getting_started/quickstart_ps.html">pandas API on Spark</a> for pandas workloads,
+ <a href="ml-guide.html">MLlib</a> for machine learning,
+ <a href="graphx-programming-guide.html">GraphX</a> for graph processing,
+ and <a href="structured-streaming-programming-guide.html">Structured Streaming</a>
+ for incremental computation and stream processing.
</div>
</div>
</section>
diff --git a/docs/css/custom.css b/docs/css/custom.css
index 1239c0ed440..8158938866c 100644
--- a/docs/css/custom.css
+++ b/docs/css/custom.css
@@ -95,18 +95,7 @@ section {
border-color: transparent;
}
-.hero-banner .bg {
- background: url(/img/spark-hero-thin-light.jpg) no-repeat;
- transform: translate(36%, 0%);
- height: 475px;
- top: 0;
- position: absolute;
- right: 0;
- width: 100%;
- opacity: 50%;
-}
-
-.hero-banner h1 {
+.hero-banner .container .row h1 {
color: #0B9ACE;
font-style: normal;
font-weight: normal;
@@ -115,13 +104,6 @@ section {
letter-spacing: -0.045em;
}
-.hero-banner h2 {
- font-style: normal;
- font-weight: bold;
- font-size: 32px;
- line-height: 42px;
-}
-
.what-is-spark {
font-style: normal;
font-weight: normal;
@@ -822,18 +804,29 @@ ul {
margin-bottom: 10px;
}
-.global h2, .global .h2 {
+.global h1, .global .h1 {
font-size: 30px;
}
-.global h3 {
+#content h1.title {
+ font-size: 40px;
+}
+
+.global h2 {
font-size: 24px !important;
}
+.global h3 {
+ font-size: 20px !important;
+}
+
.global h4 {
font-size: 18px !important;
}
+.global h5 {
+ font-size: 16px !important;
+}
.global h1:first-letter, .global h2:first-letter, .global h3:first-letter, .global h4:first-letter, .global h5:first-letter, .global h6:first-letter, .global .h1:first-letter, .global .h2:first-letter, .global .h3:first-letter, .global .h4:first-letter, .global .h5:first-letter, .global .h6:first-letter {
text-transform: uppercase;
diff --git a/docs/img/spark-hero-thin-light.jpg b/docs/img/spark-hero-thin-light.jpg
deleted file mode 100644
index 4d9ed926b36..00000000000
Binary files a/docs/img/spark-hero-thin-light.jpg and /dev/null differ
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@spark.apache.org
For additional commands, e-mail: commits-help@spark.apache.org