You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@hop.apache.org by ha...@apache.org on 2020/10/23 13:01:40 UTC
[incubator-hop-website] branch master updated: New home page (#3)
This is an automated email from the ASF dual-hosted git repository.
hansva pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-hop-website.git
The following commit(s) were added to refs/heads/master by this push:
new 5c99202 New home page (#3)
5c99202 is described below
commit 5c9920254d73cbdc47df1bb237d99891b37cb450
Author: Bart Maertens <ba...@know.bi>
AuthorDate: Fri Oct 23 15:01:33 2020 +0200
New home page (#3)
* initial changes
* updates for mobile etc
* added functionalities blocks
* footer fixes, cookie banner, incubator disclaimer
* use existing docs repo for now
* Change jenkinsfile to remove site correctly
Co-authored-by: Hans Van Akelyen <ha...@gmail.com>
---
Jenkinsfile | 3 +-
antora-ui-hop/src/css/base.css | 17 +-
antora-ui-hop/src/css/blog.css | 135 +++++-
antora-ui-hop/src/css/body.css | 5 +
antora-ui-hop/src/css/breadcrumbs.css | 2 +-
antora-ui-hop/src/css/category.css | 18 +-
antora-ui-hop/src/css/community.css | 19 +
antora-ui-hop/src/css/doc.css | 239 +++++++++--
antora-ui-hop/src/css/docs.css | 154 +++++++
antora-ui-hop/src/css/fa-emulated.css | 9 +
antora-ui-hop/src/css/footer.css | 173 +++++++-
antora-ui-hop/src/css/frontpage.css | 459 ++++++++++++++-------
antora-ui-hop/src/css/highlight.css | 2 +-
antora-ui-hop/src/css/mailchimp.css | 247 -----------
antora-ui-hop/src/css/main.css | 48 +++
antora-ui-hop/src/css/misc.css | 9 +
antora-ui-hop/src/css/pagination.css | 74 ++--
antora-ui-hop/src/css/print.css | 4 +-
antora-ui-hop/src/css/release.css | 32 ++
antora-ui-hop/src/css/site.css | 48 ++-
antora-ui-hop/src/css/sitemap.css | 19 +
antora-ui-hop/src/css/static.css | 1 -
antora-ui-hop/src/css/toc.css | 96 +++++
antora-ui-hop/src/css/toolbar.css | 12 +
antora-ui-hop/src/css/typeface-open-sans.css | 67 +--
antora-ui-hop/src/css/typeface-roboto-mono.css | 21 -
antora-ui-hop/src/css/typeface-roboto.css | 43 --
antora-ui-hop/src/css/vars.css | 77 ++--
config.toml | 6 +
content/_index.adoc | 184 ++++-----
.../2020/02/roundup-2020-02/index.adoc} | 3 +
.../2020/03/roundup-2020-03/index.adoc} | 3 +
.../2020/04/release-preview-0.1/index.adoc} | 3 +
.../2020/04/roundup-2020-04/index.adoc} | 3 +
.../2020/05/preview-release-0.21/index.adoc} | 3 +
.../2020/05/roundup-2020-05/index.adoc} | 3 +
.../2020/06/roundup-2020-06/index.adoc} | 3 +
.../2020/07/preview-release-0.30/index.adoc} | 5 +-
.../2020/08/roundup-2020-08/index.adoc} | 3 +
.../2020/10/hop-joins-the-asf/index.adoc} | 15 +-
content/blog/_index.adoc | 3 +
content/community/mailing-list.adoc | 22 +
content/community/sources.adoc | 27 ++
content/community/support.adoc | 66 +++
layouts/blog/list.html | 80 ++++
layouts/blog/post.html | 49 +++
layouts/blog/single.html | 9 +
layouts/blog/summary.html | 15 +
layouts/index.html | 44 +-
layouts/partials/footer.html | 13 +-
site.yml | 6 +-
static/img/GenericTransform.svg | 22 +
static/img/apache-20.png | Bin 0 -> 53611 bytes
static/img/beam-logo.svg | 19 +
static/img/cycle.svg | 2 +
static/img/eyeglasses.svg | 34 ++
static/img/hop-logo.svg | 53 +++
static/img/incubator_power_ring_hop.jpg | Bin 0 -> 369440 bytes
static/img/incubator_power_ring_hop_500x500.jpg | Bin 0 -> 124135 bytes
59 files changed, 1987 insertions(+), 744 deletions(-)
diff --git a/Jenkinsfile b/Jenkinsfile
index 7e09644..56c82de 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -110,8 +110,9 @@ pipeline {
dir('deploy/staging') {
deleteDir()
sh 'git clone -b asf-site https://gitbox.apache.org/repos/asf/incubator-hop-website.git .'
- sh 'git rm -f --ignore-unmatch "$(find . -not -path \'*/\\.*\' -type f \\( ! -iname \".*\" \\))"'
+ sh 'git rm -f --ignore-unmatch .'
sh "cp -R $WORKSPACE/hop-website/public/. ."
+ sh "cp $WORKSPACE/hop-website/.asf.yaml ."
sh 'git add .'
sh 'git commit -m "Website updated to $(git rev-parse --short HEAD)"'
sh 'git push origin asf-site'
diff --git a/antora-ui-hop/src/css/base.css b/antora-ui-hop/src/css/base.css
index c7789f7..b9fe735 100644
--- a/antora-ui-hop/src/css/base.css
+++ b/antora-ui-hop/src/css/base.css
@@ -1,6 +1,13 @@
html,
body {
height: 100%;
+ scroll-padding-top: var(--body-top);
+}
+
+@media screen and (max-width: 1023px) {
+ body {
+ scroll-padding-top: var(--body-mobile-top);
+ }
}
*,
@@ -11,6 +18,7 @@ body {
*::selection {
background: var(--color-highlight);
+ color: var(--color-white);
}
html {
@@ -41,11 +49,16 @@ a:hover {
text-decoration: underline;
}
+a:active {
+ background-color: none;
+}
+
code,
kbd,
pre {
color: var(--code-font-color);
font-family: var(--monospace-font-family);
+ overflow-wrap: break-word;
}
b,
@@ -77,7 +90,9 @@ button::-moz-focus-inner {
}
mark {
- background: var(--color-highlight);
+ color: var(--color-camel-hop);
+ font-weight: bold;
+ background: var(--color-white);
}
.text-center {
diff --git a/antora-ui-hop/src/css/blog.css b/antora-ui-hop/src/css/blog.css
index 0e3dea7..e9e0930 100644
--- a/antora-ui-hop/src/css/blog.css
+++ b/antora-ui-hop/src/css/blog.css
@@ -14,10 +14,17 @@
line-height: 2rem;
}
+@media screen and (max-width: 1023px) {
+ .blog.list aside {
+ margin-top: 0;
+ }
+}
+
.blog.list aside ul {
list-style: none;
padding: 0;
margin-top: 1rem;
+ display: inline-block;
}
article.blog:first-child {
@@ -34,6 +41,8 @@ article.blog p {
.blog a.continue {
font-weight: bold;
+ text-decoration: none;
+ background: none;
}
.blog header h1 {
@@ -45,6 +54,7 @@ article.blog p {
margin-top: 1rem;
display: flex;
flex-direction: column;
+ padding-bottom: 2rem;
}
.blog .post aside .summary {
@@ -53,12 +63,16 @@ article.blog p {
}
.blog .post aside time {
- color: var(--color-gray-50);
+ color: var(--color-gray-60);
}
.blog .post aside p {
- line-height: 3rem;
- color: var(--color-gray-50);
+ padding-top: 1.5rem;
+ color: var(--color-gray-60);
+}
+
+.blog .post aside p span[rel='author'] {
+ display: inline-block;
}
.blog .post aside {
@@ -68,14 +82,15 @@ article.blog p {
.blog a.arrow {
font-size: 1rem;
text-decoration: none;
+ background: none;
}
.blog a.arrow.prev::after {
- content: "\00A0previous";
+ content: '\00A0previous';
}
.blog a.arrow.next::before {
- content: "next\00A0";
+ content: 'next\00A0';
}
.blog .post .post-content {
@@ -83,9 +98,55 @@ article.blog p {
width: auto;
}
-.blog .post-content img.featured {
+.blog .post-content img {
width: 100%;
+ max-width: 800px;
height: auto;
+ max-height: 600px;
+}
+
+.blog .post-content figcaption {
+ font-size: 0.8rem;
+ text-align: center;
+}
+
+.blog .post-content pre {
+ max-width: 800px;
+}
+
+.blog .post .post-content table {
+ width: 100%;
+ text-align: center;
+ margin-bottom: 1rem;
+}
+
+.blog .post .post-content tr:nth-child(even) {
+ background: var(--color-smoke-50);
+}
+
+.blog .post .post-content td {
+ padding: 0.5rem;
+}
+
+.blog .post .post-content th {
+ padding: 0.7rem;
+ background: var(--color-smoke-90);
+}
+
+.blog .post aside figure img {
+ margin-right: 1rem;
+ vertical-align: middle;
+ width: 4rem;
+ height: 4rem;
+ border-radius: 50%;
+}
+
+.blog .post aside figure {
+ margin: 1rem 0;
+}
+
+.blog .post aside figure figcaption {
+ display: inline;
}
@media screen and (min-width: 1024px) {
@@ -95,10 +156,12 @@ article.blog p {
.blog .post {
flex-direction: row;
+ padding-bottom: 2rem;
}
.blog .post aside {
width: 30rem;
+ min-width: 16rem;
}
.blog a.arrow {
@@ -106,19 +169,73 @@ article.blog p {
}
.blog a.arrow.prev::after {
- content: "";
+ content: '';
}
.blog a.arrow.next::before {
- content: "";
+ content: '';
}
.blog .post .post-content {
margin-left: 2rem;
- width: 100%;
+ width: 60%;
}
.blog.list {
flex-direction: row;
}
}
+
+.blog ul,
+.blog ol {
+ padding-bottom: 1rem;
+}
+
+.blog li ul,
+.blog li ol {
+ padding-bottom: 0;
+}
+
+.blog .pagination {
+ margin: var(--static-margin);
+ max-width: var(--static-max-width);
+ list-style: none;
+ padding: 1rem;
+}
+
+@media screen and (min-width: 1024px) {
+ .blog .pagination {
+ max-width: var(--static-max-width--desktop);
+ }
+}
+
+.blog .page-item {
+ display: inline;
+ padding: 0;
+ margin: 0;
+}
+
+.blog .page-item a {
+ color: var(--color-gray-30);
+ font-weight: bold;
+ padding: 0.5rem;
+}
+
+.blog .page-item.disabled a {
+ color: var(--color-gray-30);
+}
+
+.blog .page-item.active {
+ border-radius: 3px;
+ background: var(--color-asf-moderate-blue);
+}
+
+.blog .page-item.active a {
+ color: var(--color-white);
+}
+
+@media screen and (max-width: 1023px) {
+ .blog.list aside {
+ margin-top: 4.5rem;
+ }
+}
diff --git a/antora-ui-hop/src/css/body.css b/antora-ui-hop/src/css/body.css
index 1d4db3d..222d751 100644
--- a/antora-ui-hop/src/css/body.css
+++ b/antora-ui-hop/src/css/body.css
@@ -1,3 +1,8 @@
+.body {
+ min-height: calc(100vh - var(--navbar-height) - var(--footer-height));
+ word-wrap: break-word; /* aka overflow-wrap; used when hyphens are disabled or don't do the trick */
+}
+
@media screen and (min-width: 1024px) {
.body {
display: flex;
diff --git a/antora-ui-hop/src/css/breadcrumbs.css b/antora-ui-hop/src/css/breadcrumbs.css
index be11140..b2c48c6 100644
--- a/antora-ui-hop/src/css/breadcrumbs.css
+++ b/antora-ui-hop/src/css/breadcrumbs.css
@@ -29,7 +29,7 @@ a + .breadcrumbs {
}
.breadcrumbs li::after {
- content: "/";
+ content: '/';
padding: 0 0.5rem;
}
diff --git a/antora-ui-hop/src/css/category.css b/antora-ui-hop/src/css/category.css
index 5b68525..cf46e2f 100644
--- a/antora-ui-hop/src/css/category.css
+++ b/antora-ui-hop/src/css/category.css
@@ -1,5 +1,5 @@
a.category:first-child::before {
- content: "\2022\00A0\00A0";
+ content: '\2022\00A0\00A0';
}
a.category:first-child {
@@ -8,7 +8,6 @@ a.category:first-child {
}
a.category {
- background-color: var(--color-gray-30);
border-radius: 0.2rem;
margin-left: 1px;
color: var(--color-white);
@@ -18,6 +17,21 @@ a.category {
text-decoration: none;
}
+li > a.category {
+ display: block;
+ margin: 0.2rem;
+ line-height: 2;
+}
+
+a.category,
+li > a.category {
+ background-color: var(--color-camel-hop);
+ background-image: none;
+ background-position: 0;
+ background-repeat: no-repeat;
+ background-size: 0;
+}
+
a.category:hover {
color: var(--color-white);
}
diff --git a/antora-ui-hop/src/css/community.css b/antora-ui-hop/src/css/community.css
new file mode 100644
index 0000000..3efc122
--- /dev/null
+++ b/antora-ui-hop/src/css/community.css
@@ -0,0 +1,19 @@
+.community th {
+ text-align: left;
+}
+
+.community {
+ padding: 1rem 3rem;
+}
+
+@media screen and (max-width: 1023px) {
+ .community {
+ padding: 0 1rem 4rem;
+ }
+}
+
+@media screen and (min-width: 1024px) {
+ .section .description {
+ height: 10rem;
+ }
+}
diff --git a/antora-ui-hop/src/css/doc.css b/antora-ui-hop/src/css/doc.css
index 1ba701c..78eeb38 100644
--- a/antora-ui-hop/src/css/doc.css
+++ b/antora-ui-hop/src/css/doc.css
@@ -1,6 +1,7 @@
.doc {
color: var(--doc-font-color);
font-size: var(--doc-font-size);
+ hyphens: auto;
line-height: var(--doc-line-height);
margin: var(--doc-margin);
max-width: var(--doc-max-width);
@@ -12,6 +13,7 @@
font-size: var(--doc-font-size--desktop);
margin: var(--doc-margin--desktop);
max-width: var(--doc-max-width--desktop);
+ min-width: 0;
}
}
@@ -23,6 +25,7 @@
.doc h6 {
color: var(--heading-font-color);
font-weight: var(--heading-font-weight);
+ hyphens: none;
line-height: 1.3;
margin: 1rem 0 0;
text-transform: uppercase;
@@ -34,26 +37,37 @@
margin: 1.5rem 0;
}
-@media screen and (min-width: 769px) {
- .doc > h1.page:first-child {
- margin-top: 2.5rem;
- }
-}
-
#preamble + .sect1,
.doc .sect1 + .sect1 {
margin-top: 2rem;
}
+.doc h1.sect0 {
+ background: var(--abstract-background);
+ font-size: 1.8em;
+ margin: 1.5rem -1rem 0;
+ padding: 0.5rem 1rem;
+}
+
.doc h2:not(.discrete) {
- border-bottom: 1px solid var(--section-divider-color);
+ margin-top: 1rem;
margin-left: -1rem;
margin-right: -1rem;
padding: 0.4rem 1rem 0.1rem;
+ overflow-wrap: break-word;
+}
+
+.doc h2:not(.discrete)::after {
+ content: "";
+ display: block;
+ position: relative;
+ height: 1px;
+ background-color: var(--section-divider-color);
}
.doc h3:not(.discrete) {
font-weight: var(--alt-heading-font-weight);
+ overflow-wrap: break-word;
}
.doc h1 .anchor,
@@ -78,7 +92,7 @@
.doc h4 .anchor::before,
.doc h5 .anchor::before,
.doc h6 .anchor::before {
- content: "\00a7";
+ content: '\00a7';
}
.doc h1:hover .anchor,
@@ -98,6 +112,29 @@
overflow-x: auto;
}
+.doc .table-wrapper::-webkit-scrollbar {
+ height: var(--scrollbar-thickness);
+}
+
+.doc .table-wrapper::-webkit-scrollbar-track {
+ background: var(--scrollbar-track-color);
+ border-radius: var(--scrollbar-radius);
+}
+
+.doc .table-wrapper::-webkit-scrollbar-thumb {
+ background: var(--scrollbar-thumb-color);
+ border-radius: var(--scrollbar-radius);
+}
+
+.doc .table-wrapper::-webkit-scrollbar-thumb:hover,
+.doc .table-wrapper::-webkit-scrollbar-thumb:active {
+ background: var(--scrollbar-thumb-active-color);
+}
+
+.doc .table-wrapper table {
+ width: 100%;
+}
+
.doc .tableblock p {
font-size: inherit;
}
@@ -111,12 +148,34 @@
.doc a {
color: var(--link-font-color);
+ word-break: break-word;
+ text-decoration: none;
+ background-image: linear-gradient(to right, #583ac2 50%, transparent 50%);
+ background-position: 0 1.1em;
+ background-repeat: repeat-x;
+ background-size: 7px 1px;
+}
+
+.doc li a,
+.doc table a,
+.doc .section .links a,
+.doc .camel-project .links a,
+.doc .sect2 h3 a {
+ background: none;
+}
+
+.doc table.tableblock td a {
+ word-break: normal;
}
.doc a:hover {
color: var(--link_hover-font-color);
}
+.doc a.unresolved {
+ color: var(--link_unresolved-font-color);
+}
+
.doc i.fa {
font-style: normal;
}
@@ -126,12 +185,13 @@
color: var(--code-font-color);
background: var(--code-background);
border-radius: 0.2rem;
- font-size: calc(16 / var(--rem-base) * 1rem);
+ font-size: calc(14 / var(--rem-base) * 1rem);
padding: 0.075rem 0.25rem 0.125rem;
+ overflow-wrap: break-word;
}
.doc pre {
- font-size: calc(16 / var(--rem-base) * 1rem);
+ font-size: calc(14 / var(--rem-base) * 1rem);
line-height: 1.5;
margin: 0;
}
@@ -152,6 +212,10 @@
text-decoration: underline;
}
+.doc .line-through {
+ text-decoration: line-through;
+}
+
.doc .paragraph,
.doc .dlist,
.doc .olist,
@@ -162,8 +226,10 @@
.doc .literalblock,
.doc .sidebarblock,
.doc .verseblock,
-.doc .quoteblock {
+.doc .quoteblock,
+.doc .partintro {
margin: 1rem 0 0;
+ word-break: break-word;
}
.doc table.tableblock {
@@ -175,22 +241,20 @@
/* table-layout: fixed; */
}
-.doc table.spread {
+.doc table.stretch {
width: 100%;
}
-.doc table.tableblock th,
-.doc table.tableblock td {
- padding: 0.5rem;
-}
-
-.doc table.tableblock th {
+.doc table.tableblock thead th {
border-bottom: 2.5px solid var(--table-border-color);
+ padding: 0.5rem;
}
-.doc table.tableblock td {
+.doc table.tableblock td,
+.doc table.tableblock > :not(thead) th {
border-top: 1px solid var(--table-border-color);
border-bottom: 1px solid var(--table-border-color);
+ padding: 0.5rem;
}
.doc .halign-left {
@@ -219,6 +283,7 @@
.doc .admonitionblock {
margin: 1.4rem 0 0;
+ box-shadow: inset 0 0 1.75px var(--abstract-border-color);
}
.doc .admonitionblock p,
@@ -248,7 +313,7 @@
}
.doc .admonitionblock .icon {
- position: absolute;
+ position: relative;
top: 0;
left: 0;
font-size: calc(15 / var(--rem-base) * 1rem);
@@ -257,8 +322,6 @@
line-height: 1;
font-weight: var(--admonition-label-font-weight);
text-transform: uppercase;
- border-radius: 0.45rem;
- transform: translate(-0.5rem, -50%);
}
.doc .admonitionblock.caution .icon {
@@ -295,6 +358,7 @@
.doc .admonitionblock .icon i::after {
content: attr(title);
hyphens: none;
+ writing-mode: tb-rl;
}
.doc .imageblock {
@@ -313,6 +377,10 @@
max-width: 100%;
}
+.doc table.tableblock td .imageblock img {
+ max-width: 50px;
+}
+
#preamble .abstract blockquote {
background: var(--abstract-background);
border-left: 5px solid var(--abstract-border-color);
@@ -404,11 +472,11 @@
}
.doc ul.checklist i.fa-check-square-o::before {
- content: "\2713";
+ content: '\2713';
}
.doc ul.checklist i.fa-square-o::before {
- content: "\274f";
+ content: '\274f';
}
.doc .dlist .dlist,
@@ -445,6 +513,7 @@
font-size: calc(16 / var(--rem-base) * 1rem);
font-weight: var(--caption-font-weight);
font-style: italic;
+ hyphens: none;
letter-spacing: 0.01em;
padding-bottom: 0.075rem;
text-align: left;
@@ -461,7 +530,8 @@
.doc .exampleblock > .content {
background: var(--example-background);
- border: 0.1rem solid var(--example-border-color);
+ border: 0.25rem solid var(--example-border-color);
+ border-radius: 0.5rem;
padding: 0.75rem;
}
@@ -471,6 +541,7 @@
.doc .sidebarblock {
background: var(--sidebar-background);
+ border-radius: 0.75rem;
padding: 0.75rem 1.5rem;
}
@@ -501,6 +572,25 @@
padding: 0.75rem;
}
+.doc pre.highlight code::-webkit-scrollbar {
+ height: var(--scrollbar-thickness);
+}
+
+.doc pre.highlight code::-webkit-scrollbar-track {
+ background: var(--scrollbar-track-color);
+ border-radius: var(--scrollbar-radius);
+}
+
+.doc pre.highlight code::-webkit-scrollbar-thumb {
+ background: var(--scrollbar-thumb-color);
+ border-radius: var(--scrollbar-radius);
+}
+
+.doc pre.highlight code::-webkit-scrollbar-thumb:hover,
+.doc pre.highlight code::-webkit-scrollbar-thumb:active {
+ background: var(--scrollbar-thumb-active-color);
+}
+
/* NOTE assume pre.highlight contains code[data-lang] */
.doc pre.highlight {
position: relative;
@@ -533,12 +623,18 @@
.doc .colist {
font-size: calc(16 / var(--rem-base) * 1rem);
- margin-top: 0.5rem;
+ margin: 0.25rem 0 -0.25rem;
}
-.doc .colist > table tr > td:first-of-type {
- padding: 0 0.75em;
- line-height: 1;
+.doc .colist > table > tr > :first-child,
+.doc .colist > table > tbody > tr > :first-child {
+ padding: 0.25em 0.5rem 0;
+ vertical-align: top;
+}
+
+.doc .colist > table > tr > :last-child,
+.doc .colist > table > tbody > tr > :last-child {
+ padding: 0.25rem 0;
}
.doc .conum[data-value] {
@@ -564,21 +660,21 @@
display: none;
}
-b.button {
+.doc b.button {
white-space: nowrap;
}
-b.button::before {
+.doc b.button::before {
content: "[";
padding-right: 0.25em;
}
-b.button::after {
+.doc b.button::after {
content: "]";
padding-left: 0.25em;
}
-kbd {
+.doc kbd {
display: inline-block;
font-size: calc(12 / var(--rem-base) * 1rem);
background: var(--kbd-background);
@@ -590,34 +686,93 @@ kbd {
white-space: nowrap;
}
-kbd,
-.keyseq {
+.doc kbd,
+.doc .keyseq {
line-height: 1;
}
-.keyseq {
+.doc .keyseq {
font-size: calc(16 / var(--rem-base) * 1rem);
}
-.keyseq kbd {
+.doc .keyseq kbd {
margin: 0 0.125em;
}
-.keyseq kbd:first-child {
+.doc .keyseq kbd:first-child {
margin-left: 0;
}
-.keyseq kbd:last-child {
+.doc .keyseq kbd:last-child {
margin-right: 0;
}
-.menuseq i.caret::before {
+.doc .menuseq i.caret::before {
content: "\203a";
font-size: 1.1em;
font-weight: var(--body-font-weight-bold);
line-height: calc(1 / 1.1);
}
-.stretch {
- width: 100%;
+.doc a.bare,
+.doc b.button,
+.doc code,
+.doc .path,
+.doc kbd,
+.doc .menuseq,
+.doc .icon i::after {
+ hyphens: none;
+}
+
+/* for mobile screens */
+@media screen and (max-width: 626px) {
+ #preamble + .sect1,
+ .doc .sect1 + .sect1 {
+ overflow-wrap: break-word;
+ }
+}
+
+@media screen and (max-width: 1023px) and (min-width: 480px) {
+ .doc p code,
+ .doc thead code {
+ font-size: var(--body-font-size);
+ }
+}
+
+table.tableblock thead {
+ background: var(--color-smoke-90);
+ font-weight: var(--body-font-weight-bold);
+}
+
+/* Status badges used in Camel Quarkus extension pages */
+div.badges p {
+ text-align: left;
+}
+
+div.badges span {
+ color: var(--color-white);
+ padding: 0.15rem 0.3rem 0.15rem 0.3rem;
+ font-weight: normal;
+ font-style: normal;
+ font-size: 0.8rem;
+}
+
+div.badges span.badge-key {
+ background-color: var(--color-gray-60);
+ border-radius: 0.2rem 0 0 0.2rem;
+}
+
+div.badges span.badge-version {
+ background-color: var(--note-color);
+ border-radius: 0 0.2rem 0.2rem 0;
+}
+
+div.badges span.badge-supported {
+ background-color: var(--tip-color);
+ border-radius: 0 0.2rem 0.2rem 0;
+}
+
+div.badges span.badge-unsupported {
+ background-color: var(--important-color);
+ border-radius: 0 0.2rem 0.2rem 0;
}
diff --git a/antora-ui-hop/src/css/docs.css b/antora-ui-hop/src/css/docs.css
new file mode 100644
index 0000000..ef1aa01
--- /dev/null
+++ b/antora-ui-hop/src/css/docs.css
@@ -0,0 +1,154 @@
+.docs {
+ padding: 1rem 3rem;
+}
+
+.docs p:empty {
+ display: none;
+}
+
+.section h2 {
+ text-align: center;
+ padding-bottom: 0;
+}
+
+.camel-project {
+ width: calc(100% - 3rem);
+ display: inline-flex;
+ border: 1px solid var(--color-smoke-90);
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ padding: 1rem 1rem 2rem 1rem;
+ margin: 1.5rem;
+ border-radius: 10px;
+}
+
+.camel-project .section {
+ border: none;
+ padding: 0;
+}
+
+.camel-project .section.core {
+ width: 100%;
+}
+
+.camel-project .camel-documentation .links {
+ background-color: var(--color-camel-hop-light);
+ padding: 0 0.5rem;
+ border-radius: 25px;
+ color: var(--navbar-background);
+}
+
+.camel-project .camel-documentation .links a {
+ color: var(--navbar-background);
+ font-weight: bolder;
+}
+
+.section {
+ display: inline-flex;
+ border: 1px solid var(--color-smoke-90);
+ width: calc(50% - 3.2rem);
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ padding: 1rem;
+ margin: 1.5rem;
+ border-radius: 10px;
+}
+
+.section > a,
+.camel-project > a {
+ background: none;
+}
+
+.section a > img,
+.camel-project a > img {
+ display: inline-block;
+ width: auto;
+ height: 5rem;
+ margin-top: 1rem;
+}
+
+.section a > img + img {
+ padding-left: 1rem;
+}
+
+.section .description {
+ padding: 1.2rem;
+ text-align: center;
+}
+
+.section .list {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.section .links {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ margin: 1.5rem 0;
+ word-break: break-word;
+ background-color: var(--color-camel-hop-light);
+ padding: 0 0.5rem;
+ border-radius: 25px;
+ color: var(--navbar-background);
+}
+
+.section .list pre {
+ padding: 0;
+ width: 0.5rem;
+ box-shadow: none;
+ overflow-x: hidden;
+ background: none;
+}
+
+.section .list .links {
+ margin: 0.5rem;
+}
+
+.section .links img {
+ height: 1.5rem;
+ width: 2rem;
+ margin: 0.35rem 0 0 0.25rem;
+}
+
+.section .links p {
+ margin: 0;
+}
+
+.section .links .partition {
+ background: #fff;
+ height: 2.5rem;
+ width: 0.1rem;
+ margin: 0 0.5rem;
+}
+
+.section .links a {
+ color: var(--navbar-background);
+ font-weight: bolder;
+}
+
+@media screen and (max-width: 1023px) {
+ .docs {
+ padding: 0 1rem 4rem;
+ }
+
+ .camel-project,
+ .section {
+ width: calc(100% - 1rem);
+ margin: 1.5rem -1.5rem 1.5rem 0.5rem;
+ }
+
+ .camel-project .section {
+ width: calc(100% - 3rem);
+ margin: 1.5rem;
+ }
+}
+
+@media screen and (min-width: 1024px) {
+ .section .description {
+ height: 12rem;
+ }
+}
diff --git a/antora-ui-hop/src/css/fa-emulated.css b/antora-ui-hop/src/css/fa-emulated.css
new file mode 100644
index 0000000..a5b3007
--- /dev/null
+++ b/antora-ui-hop/src/css/fa-emulated.css
@@ -0,0 +1,9 @@
+/* For perf reasons, we emulate only those few parts of Font Awesome css that we use without actually pulling the FA font */
+
+.fa {
+ display: inline-block;
+}
+
+.fa-lock::before {
+ content: "🔒";
+}
diff --git a/antora-ui-hop/src/css/footer.css b/antora-ui-hop/src/css/footer.css
index f7b3919..a01a6ad 100644
--- a/antora-ui-hop/src/css/footer.css
+++ b/antora-ui-hop/src/css/footer.css
@@ -6,6 +6,8 @@ footer {
font-size: calc(15 / var(--rem-base) * 1rem);
line-height: var(--footer-line-height);
padding: 1.5rem;
+ flex-shrink: 0;
+ min-height: var(--footer-height);
}
footer .footer {
@@ -17,25 +19,60 @@ footer .footer {
footer .footer p {
flex-basis: 100%;
- margin: 0.5rem 0;
+ margin: 3rem 0 0.5rem 0;
padding: 0 1rem;
}
+footer .footer p.remark::after {
+ content: '';
+ display: block;
+ position: relative;
+ height: 1px;
+ width: 25rem;
+ margin: 2rem auto 1rem auto;
+ background: var(--footer-after-background);
+}
+
footer .footer a {
- color: var(--footer-link-font-color);
+ color: var(--footer-font-color);
+}
+
+footer .footer .context {
+ display: inline-block;
+ margin: 0 0 1rem 0;
+}
+
+footer .footer .context a {
+ font-size: 15px;
+ text-transform: uppercase;
+}
+
+footer .footer .context a::after {
+ content: ' ';
+ display: inline-block;
+ border-radius: 50%;
+ width: 8px;
+ height: 8px;
+ margin: 0 1rem;
+ background: var(--footer-after-background);
+}
+
+footer .footer .context:last-child a::after {
+ display: none;
}
footer .footer figure.logo {
+ display: flex;
flex-direction: row;
flex-grow: 1;
- align-items: flex-start;
justify-content: center;
- text-align: center;
+ margin-inline-start: 0;
+ align-content: center;
+ align-items: center;
}
footer .footer figure.logo img {
width: 6rem;
- height: 100%;
}
footer .footer dl {
@@ -43,35 +80,135 @@ footer .footer dl {
flex-grow: 1;
align-items: flex-start;
justify-content: center;
- margin-left: 1rem;
+ margin: 3rem 0 0 1rem;
}
footer .footer dl dt {
font-size: 1.25rem;
font-weight: bold;
- margin-bottom: 0.5rem;
+ margin-bottom: 1.5rem;
}
-footer .footer dl dd {
- margin: 0;
+footer .footer dl dt label:first-of-type::after {
+ content: '';
+ display: block;
+ position: relative;
+ bottom: 0;
+ left: 0;
+ height: 2px;
+ width: 3rem;
+ background: var(--footer-font-color);
}
-@media screen and (max-width: 1023px) {
- footer .footer figure.logo {
- display: none;
- }
+footer .footer dl dd {
+ margin: 0;
}
-.edit {
- max-width: var(--static-max-width--desktop);
- margin: auto;
+.footer-tools {
+ position: relative;
+ top: -2rem;
+ height: 0;
text-align: right;
}
-.edit a {
+.footer-tools a {
display: inline-block;
padding: 0.4rem;
background-color: var(--footer-background);
color: black;
- border-radius: 0.4rem 0.4rem 0 0;
+ border-radius: 0.4rem 0.4rem 0 0;
+ height: 2rem;
+}
+
+footer .resources {
+ flex-basis: 100%;
+ text-align: center;
+}
+
+footer .footer .footer-icons {
+ display: flex;
+ align-items: flex-end;
+ justify-content: flex-end;
+ line-height: 1.6;
+ padding: 0.5rem;
+ font-weight: bold;
+}
+
+footer .footer .footer-icons .brand-icon {
+ height: 2em;
+ width: 1.75em;
+ margin: 0.35rem;
+ fill: var(--navbar-font-color);
+}
+
+footer .footer input[type="checkbox"],
+footer .footer dl dt label:nth-child(2) {
+ display: none;
+}
+
+@media screen and (max-width: 1023px) {
+ footer {
+ flex-direction: column;
+ }
+
+ footer .footer dl {
+ flex-basis: 100%;
+ margin-top: 0;
+ }
+
+ footer .footer dl dt {
+ margin-bottom: 1rem;
+ display: flex;
+ }
+
+ footer .footer dl dt label {
+ user-select: none;
+ }
+
+ footer .footer dl dt label:nth-child(1) {
+ flex: 1;
+ }
+
+ footer .footer dl dt label:nth-child(2) {
+ display: block;
+ height: 1.75rem;
+ width: 1.75rem;
+ line-height: 1.75rem;
+ font-size: 1.75rem;
+ transition: 0.2s;
+ }
+
+ footer .footer input[type="checkbox"]:checked + dl dt label:nth-child(2) {
+ transform: rotate(45deg);
+ }
+
+ footer .footer dl dd:first-of-type {
+ margin-top: 1rem;
+ }
+
+ footer .footer figure.logo {
+ margin: 0.5rem auto;
+ text-align: center;
+ flex-basis: 100%;
+ }
+
+ footer .footer figure.logo img {
+ width: 4.5rem;
+ }
+
+ footer .footer p.remark::after {
+ width: auto;
+ }
+
+ footer .footer .footer-icons .brand-icon {
+ height: 1.5rem;
+ }
+
+ footer input[type="checkbox"]:checked + dl dd {
+ display: block;
+ }
+
+ footer input[type="checkbox"] + dl dd {
+ display: none;
+ }
}
diff --git a/antora-ui-hop/src/css/frontpage.css b/antora-ui-hop/src/css/frontpage.css
index 53d740e..b37f7b6 100644
--- a/antora-ui-hop/src/css/frontpage.css
+++ b/antora-ui-hop/src/css/frontpage.css
@@ -1,231 +1,412 @@
-header.frontpage {
- font-size: 1.5rem;
- display: flex;
- flex-flow: column;
- align-items: center;
+/* common css for sections */
+
+section.frontpage h1,
+section.frontpage h2 {
+ font-weight: var(--heading-font-weight);
+ color: var(--heading-font-color);
+ line-height: 1.3;
+ margin: 1rem 0 0;
+ text-transform: uppercase;
+ word-wrap: break-word;
+}
+
+section.frontpage {
+ color: var(--doc-font-color);
+ font-size: var(--doc-font-size);
+ line-height: var(--doc-line-height);
margin: 0 auto;
- max-width: 60rem;
+ max-width: var(--frontpage-max-width);
}
-header.frontpage h1 {
- font-size: 5rem;
- font-weight: bolder;
- color: var(--heading-font-color);
- margin-top: 5rem;
+section.frontpage a {
+ color: var(--link-font-color);
+ text-decoration: none;
+ background-image: linear-gradient(to right, #583ac2 50%, transparent 50%);
+ background-position: 0 1.1em;
+ background-repeat: repeat-x;
+ background-size: 7px 1px;
+}
+
+section.frontpage a:hover {
+ color: var(--link_hover-font-color);
+}
+
+section.frontpage h1 {
+ width: 100%;
text-align: center;
- text-transform: none;
- text-shadow: -1px -1px 1px #fff5, 1px -1px 1px #fff5, -1px 1px 1px #fff5, 1px 1px 1px #fff5;
+ margin-bottom: 1rem;
+ font-size: 2.5rem;
}
-header.frontpage p {
- hyphens: none;
- margin-top: 3rem;
+section.frontpage h2 {
text-align: center;
- line-height: 1.5;
- color: var(--body-font-color);
}
-.frontpage a:hover {
- color: var(--color-white);
- text-decoration: none;
+/* css for header section */
+
+header.frontpage {
+ display: flex;
+ flex-direction: row;
+ margin: 2rem 3rem 2.5rem;
}
-.frontpage a:active {
- color: var(--color-white);
+header.frontpage img {
+ width: 45vw;
+ max-height: 50vh;
}
-.frontpage a.significant {
- margin: 1rem;
- padding: 0.8rem 1.5rem;
- background: var(--color-gray-30);
- color: var(--color-white);
- border-radius: 8px;
+header.frontpage .main-heading {
+ width: 50vw;
+ display: flex;
+ flex-direction: column;
+ margin-left: 2rem;
+}
+
+header.frontpage h1 {
+ font-size: 5vw;
+ color: var(--color-asf-dark-blue);
+ margin-bottom: 0.5rem;
+}
+
+header.frontpage p {
font-size: 1.2rem;
+ margin-bottom: 2rem;
+ line-height: 1.7rem;
+}
+
+.frontpage a.button-dark,
+.frontpage a.button-dark:hover {
+ white-space: nowrap;
+ padding: 0.7rem 1rem;
+ background-color: var(--color-camel-hop);
+ background-image: none;
+ background-repeat: no-repeat;
+ background-position: 0;
+ color: white;
font-weight: bold;
+ margin-right: 0.5rem;
+ border-radius: 3rem;
outline: none;
display: inline-block;
+ box-shadow: 0 4px #b8b8b8;
+}
+
+.frontpage a.button-light {
+ padding: 0.7rem 1rem;
+ border: 1px solid var(--color-gray-70);
+ color: var(--color-gray-70);
+ font-weight: bold;
+ border-radius: 3rem;
white-space: nowrap;
}
-.frontpage a.significant:hover {
- color: var(--color-white);
- box-shadow: 0 0 1.5rem var(--color-glow);
+/* css for blog section */
+
+div.frontpage.news {
+ padding: 0.2rem 0;
+ width: 20%;
+ text-align: center;
+ margin-left: 3rem;
+ background-color: var(--color-smoke-50);
+ border-radius: 1rem 1rem 0 0;
}
-.frontpage a.significant:active {
- color: var(--color-white);
+div.frontpage.news h2 {
+ margin-bottom: 0.5rem;
}
-header.frontpage svg {
- position: absolute;
- top: 4rem;
- left: 0;
- width: 100%;
- height: 14rem;
- z-index: -1;
+section.frontpage.columns.blog-posts {
+ margin: 0;
+ display: flex;
+ flex-direction: row;
+ padding: 1rem 1rem 1rem 3rem;
+ max-width: none;
+ border-top: none;
+ background-color: var(--color-smoke-50);
}
-header.frontpage svg path {
- fill: none;
- animation: sparkle 5s ease alternate infinite;
+section.frontpage.blog-posts ul {
+ display: flex;
+ flex-wrap: wrap;
+ margin: 0;
+ padding: 0;
}
-header.frontpage svg path:nth-child(1) {
- stroke: #ffddab;
- stroke-width: 10;
- stroke-opacity: 0.6;
+li.blog-post .content {
+ padding: 1rem;
+ padding-right: 0.5rem;
}
-header.frontpage svg path:nth-child(2) {
- stroke: #9d1609;
- stroke-width: 10;
- stroke-opacity: 0.3;
- animation-delay: -1s;
+li.blog-post .content h2 {
+ text-align: left;
+ margin: 0;
}
-header.frontpage svg path:nth-child(3) {
- stroke: #f1b35b;
- stroke-width: 15;
- stroke-opacity: 0.6;
- animation-delay: -2.5s;
+li.blog-post .content p {
+ margin: 0.2rem 0;
}
-header.frontpage svg path:nth-child(4) {
- stroke: #641a00;
- stroke-width: 5;
- stroke-opacity: 0.3;
- animation-delay: -3s;
+li.blog-post .content a {
+ font-weight: bold;
+ white-space: nowrap;
+ background: none;
}
-header.frontpage svg path:nth-child(5) {
- stroke: #e26810;
- stroke-width: 5;
- stroke-opacity: 0.6;
- animation-delay: -6s;
+li.blog-post {
+ display: flex;
+ width: 30vw;
+ margin: 0;
+ padding-right: 1rem;
}
-@keyframes sparkle {
- 0% {
- stroke-opacity: 0.3;
- }
+li.blog-post:last-child {
+ padding-right: 0;
+}
- 100% {
- stroke-opacity: 0.6;
- }
+li.blog-post time.date {
+ margin-top: 1rem;
+ text-align: center;
+ color: var(--color-asf-dark-blue);
+ text-transform: uppercase;
}
-section.frontpage {
- color: var(--doc-font-color);
- font-size: var(--doc-font-size);
- line-height: var(--doc-line-height);
- margin: 0 auto;
- margin-top: 4rem;
- max-width: var(--frontpage-max-width);
+li.blog-post time.date .day {
+ font-size: 3.2rem;
+ font-weight: bold;
+ padding: 0;
+ line-height: 1;
+ display: block;
}
-section.frontpage.columns {
- display: flex;
- flex-wrap: wrap;
- border-top: 1px solid var(--color-smoke-50);
+li.blog-post time.date .month {
+ font-size: 1.5rem;
+ font-weight: bold;
+ line-height: 1.2;
+ display: block;
}
-section.frontpage.projects {
- display: flex;
- flex-direction: column;
- border-top: 1px solid var(--color-smoke-50);
+/* common css for columns section */
+
+section.frontpage.columns.functionalities p,
+section.frontpage.projects .project .content p {
+ margin-bottom: 1.5rem;
}
-section.frontpage.projects .project {
+section.frontpage.projects,
+section.frontpage.apache,
+section.frontpage.functionalities {
display: flex;
- flex-direction: row;
+ flex-wrap: wrap;
+ border-top: 1px solid var(--color-smoke-50);
+ padding: 2rem 1rem 1rem 1rem;
}
-section.frontpage.projects .project h1 {
- white-space: nowrap;
- padding: 1rem 0;
- flex: 1;
+section.frontpage.columns.functionalities {
+ border: none;
}
-section.frontpage.projects .project p {
- flex: 1;
- margin: 1rem;
+section.frontpage.columns.functionalities h2,
+section.frontpage.projects .project .content h2,
+section.frontpage.projects .project .content p {
+ text-align: left;
+ text-transform: none;
}
-section.frontpage.projects .project a.significant {
- margin: 0.5rem 0;
- padding: 0.4rem 1rem;
- font-size: 0.8rem;
-}
+/* css for functionalities section */
-section.frontpage h1,
-section.frontpage h2,
-section.frontpage h3,
-section.frontpage h4,
-section.frontpage h5,
-section.frontpage h6 {
- font-weight: var(--heading-font-weight);
- color: var(--heading-font-color);
- line-height: 1.3;
- margin: 1rem 0 0;
- text-transform: uppercase;
+section.frontpage.columns.functionalities .box {
+ width: 70%;
+ display: flex;
+ margin: 2vw auto;
}
-section.frontpage a {
- color: var(--link-font-color);
+section.frontpage.columns.functionalities .box .content {
+ width: 55vw;
+ margin: 0 1vw;
}
-section.frontpage a:hover {
- color: var(--link_hover-font-color);
+section.frontpage.columns.functionalities .box .icon {
+ width: 30vw;
+ text-align: center;
}
-section.frontpage h1 {
- width: 100%;
- text-align: center;
+section.frontpage.columns.functionalities img {
+ height: 12rem;
+ margin: 0 1vw;
}
-.box {
- flex: 50%;
- padding: 1rem 0;
+/* css for projects section */
+section.frontpage.projects {
+ width: 80%;
+ max-width: none;
+ margin: 0 auto;
}
-.box div {
+section.frontpage.projects .project {
+ display: flex;
+ width: 50%;
padding: 1rem;
- margin: 1rem;
- border: 1px solid var(--color-smoke-50);
- height: 100%;
}
-.box div img {
- width: 27rem;
+section.frontpage.projects .project .icon {
+ min-width: 8rem;
+ margin-right: 1rem;
+ text-align: center;
+}
+
+section.frontpage.projects .project img {
+ height: 6rem;
+ margin-top: 2rem;
}
+/* css for apache section */
+
.split {
flex: 50%;
- padding: 1rem 0;
+ padding: 1rem 0 2rem 0;
}
.split img {
max-width: 100%;
}
+/* css for tablet view */
+
@media screen and (max-width: 1023px) {
header.frontpage h1 {
- font-size: 14vw;
+ font-size: 3rem;
+ text-align: center;
+ }
+
+ section.frontpage h1 {
+ font-size: 2.5rem;
}
- header.frontpage svg {
- display: none;
+ .split {
+ margin: 0 1rem;
+ flex: 100%;
}
- .box {
- min-width: 51vw;
+ .split img {
+ display: block;
+ margin: auto;
}
- section.frontpage.projects .project {
+ header.frontpage .main-heading,
+ section.frontpage.columns.functionalities,
+ section.frontpage.columns.projects,
+ section.frontpage.apache,
+ section.frontpage.blog-posts .blog-post {
+ width: 90%;
+ margin: 0 auto;
+ }
+
+ section.frontpage.columns.blog-posts ul {
flex-direction: column;
}
- section.frontpage.projects .project p:nth-child(3) {
+ section.frontpage.blog-posts .blog-post .date,
+ section.frontpage.projects .project .icon {
+ min-width: 25%;
+ }
+
+ section.frontpage.projects .project,
+ section.frontpage.columns.functionalities .box {
+ width: 100%;
+ }
+
+ section.frontpage.functionalities .icon img,
+ section.frontpage.projects .icon img {
+ max-width: 25vw;
+ margin: 2vw;
+ }
+
+ section.frontpage.functionalities .content {
+ width: 70vw;
+ }
+
+ header.frontpage p {
+ font-size: inherit;
text-align: center;
}
+
+ header.frontpage {
+ flex-direction: column-reverse;
+ margin: 0;
+ }
+
+ header.frontpage img {
+ width: 60%;
+ max-height: 45vh;
+ margin: 0 auto;
+ }
+
+ div.frontpage.news {
+ width: 100%;
+ margin: 1.5rem 0 0;
+ text-transform: uppercase;
+ border-radius: 0;
+ }
+}
+
+/* css for mobile view */
+
+@media screen and (max-width: 626px) {
+ header.frontpage .main-heading,
+ section.frontpage.columns.functionalities,
+ section.frontpage.columns.blog-posts,
+ section.frontpage.projects,
+ section.frontpage.apache {
+ width: 100%;
+ margin: 0;
+ padding: 1rem;
+ }
+
+ header.frontpage a.button-light {
+ line-height: 5rem;
+ }
+
+ section.frontpage.projects .project,
+ section.frontpage.columns.functionalities .box.left {
+ flex-direction: column;
+ margin: 0;
+ padding: 0;
+ }
+
+ section.frontpage.columns.functionalities .box.right {
+ flex-direction: column-reverse;
+ margin: 0;
+ padding: 0;
+ }
+
+ section.frontpage.projects .project .content h2,
+ section.frontpage.projects .project .icon,
+ section.frontpage.columns.functionalities .box .content h2,
+ section.frontpage.columns.functionalities .box .content,
+ section.frontpage.columns.functionalities .box .icon,
+ section.frontpage.columns.functionalities p,
+ section.frontpage.projects .project .content p {
+ text-align: center;
+ margin: 0;
+ width: 100%;
+ }
+
+ section.frontpage.columns.functionalities .box .content p,
+ section.frontpage.projects .project .content p {
+ margin: 1rem 0 1.5rem;
+ }
+
+ section.frontpage.columns.functionalities .box .icon img {
+ max-width: 50%;
+ height: auto;
+ margin-top: 2rem;
+ }
+
+ section.frontpage h1 {
+ font-size: 2rem;
+ }
+
+ header.frontpage h1 {
+ font-size: 2.5rem;
+ }
}
diff --git a/antora-ui-hop/src/css/highlight.css b/antora-ui-hop/src/css/highlight.css
index 9788ec0..1859b1d 100644
--- a/antora-ui-hop/src/css/highlight.css
+++ b/antora-ui-hop/src/css/highlight.css
@@ -65,7 +65,7 @@
}
.hljs-meta {
- color: #999;
+ color: var(--color-gray-50);
font-weight: var(--monospace-font-weight-bold);
}
diff --git a/antora-ui-hop/src/css/mailchimp.css b/antora-ui-hop/src/css/mailchimp.css
deleted file mode 100644
index 2f21c0f..0000000
--- a/antora-ui-hop/src/css/mailchimp.css
+++ /dev/null
@@ -1,247 +0,0 @@
-#mc_embed_signup form {
- display: block;
- text-align: left;
-}
-
-#mc_embed_signup h2 {
- font-weight: bold;
- padding: 0;
- margin: 15px 0;
- font-size: 1.4em;
-}
-
-#mc_embed_signup input {
- border: 1px solid #abb0b2;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
-}
-
-#mc_embed_signup input[type=checkbox] {
- -webkit-appearance: checkbox;
-}
-
-#mc_embed_signup input[type=radio] {
- -webkit-appearance: radio;
-}
-
-#mc_embed_signup input:focus {
- border-color: #333;
-}
-
-#mc_embed_signup .button {
- clear: both;
- background-color: #aaa;
- border: 0 none;
- border-radius: 4px;
- transition: all 0.23s ease-in-out 0s;
- color: #fff;
- cursor: pointer;
- display: inline-block;
- font-size: 15px;
- font-weight: normal;
- height: 32px;
- line-height: 32px;
- margin: 0 5px 10px 0;
- padding: 0 22px;
- text-align: center;
- text-decoration: none;
- vertical-align: top;
- white-space: nowrap;
- width: auto;
-}
-
-#mc_embed_signup .button:hover {
- background-color: #777;
-}
-
-#mc_embed_signup .small-meta {
- font-size: 11px;
-}
-
-#mc_embed_signup .nowrap {
- white-space: nowrap;
-}
-
-#mc_embed_signup .mc-field-group {
- clear: left;
- position: relative;
- width: 96%;
- padding-bottom: 3%;
- min-height: 50px;
-}
-
-#mc_embed_signup .size1of2 {
- clear: none;
- float: left;
- display: inline-block;
- width: 46%;
- margin-right: 4%;
-}
-
-* html #mc_embed_signup .size1of2 {
- margin-right: 2%;/* Fix for IE6 double margins. */
-}
-
-#mc_embed_signup .mc-field-group label {
- display: block;
- margin-bottom: 3px;
-}
-
-#mc_embed_signup .mc-field-group input {
- display: block;
- width: 100%;
- padding: 8px 0;
- text-indent: 2%;
-}
-
-#mc_embed_signup .mc-field-group select {
- display: inline-block;
- width: 99%;
- padding: 5px 0;
- margin-bottom: 2px;
-}
-
-#mc_embed_signup .datefield,
-#mc_embed_signup .phonefield-us {
- padding: 5px 0;
-}
-
-#mc_embed_signup .datefield input,
-#mc_embed_signup .phonefield-us input {
- display: inline;
- width: 60px;
- margin: 0 2px;
- letter-spacing: 1px;
- text-align: center;
- padding: 5px 0 2px 0;
-}
-
-#mc_embed_signup .phonefield-us .phonearea input,
-#mc_embed_signup .phonefield-us .phonedetail1 input {
- width: 40px;
-}
-
-#mc_embed_signup .datefield .monthfield input,
-#mc_embed_signup .datefield .dayfield input {
- width: 30px;
-}
-
-#mc_embed_signup .datefield label,
-#mc_embed_signup .phonefield-us label {
- display: none;
-}
-
-#mc_embed_signup .indicates-required {
- text-align: right;
- font-size: 11px;
- margin-right: 4%;
-}
-
-#mc_embed_signup .asterisk {
- color: #e85c41;
- font-size: 150%;
- font-weight: normal;
- position: relative;
- top: 5px;
-}
-
-#mc_embed_signup .clear {
- clear: both;
-}
-
-#mc_embed_signup .mc-field-group.input-group ul {
- margin: 0;
- padding: 5px 0;
- list-style: none;
-}
-
-#mc_embed_signup .mc-field-group.input-group ul li {
- display: block;
- padding: 3px 0;
- margin: 0;
-}
-
-#mc_embed_signup .mc-field-group.input-group label {
- display: inline;
-}
-
-#mc_embed_signup .mc-field-group.input-group input {
- display: inline;
- width: auto;
- border: none;
-}
-
-#mc_embed_signup div#mce-responses {
- float: left;
- top: -1.4em;
- padding: 0 0.5em 0 0.5em;
- overflow: hidden;
- width: 90%;
- margin: 0 5%;
- clear: both;
-}
-
-#mc_embed_signup div.response {
- margin: 1em 0;
- padding: 1em 0.5em 0.5em 0;
- font-weight: bold;
- float: left;
- top: -1.5em;
- z-index: 1;
- width: 80%;
-}
-
-#mc_embed_signup #mce-error-response {
- display: none;
-}
-
-#mc_embed_signup #mce-success-response {
- color: #529214;
- display: none;
-}
-
-#mc_embed_signup label.error {
- display: block;
- float: none;
- width: auto;
- margin-left: 1.05em;
- text-align: left;
- padding: 0.5em 0;
-}
-
-#mc-embedded-subscribe {
- clear: both;
- width: auto;
- display: block;
- margin: 1em 0 1em 5%;
-}
-
-#mc_embed_signup #num-subscribers {
- font-size: 1.1em;
-}
-
-#mc_embed_signup #num-subscribers span {
- padding: 0.5em;
- border: 1px solid #ccc;
- margin-right: 0.5em;
- font-weight: bold;
-}
-
-#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
- display: inline-block;
- margin: 2px 0 1em 0;
- padding: 5px 10px;
- background-color: rgba(255, 255, 255, 0.85);
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- font-size: 14px;
- font-weight: normal;
- z-index: 1;
- color: #e85c41;
-}
-
-#mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {
- border: 2px solid #e85c41;
-}
diff --git a/antora-ui-hop/src/css/main.css b/antora-ui-hop/src/css/main.css
index d48eea0..1f102df 100644
--- a/antora-ui-hop/src/css/main.css
+++ b/antora-ui-hop/src/css/main.css
@@ -1,7 +1,55 @@
+@media screen and (max-width: 1023px) {
+ aside.toc.sidebar {
+ display: none;
+ }
+}
+
@media screen and (min-width: 1024px) {
main {
flex: auto;
/* min-width: 0 required for flexbox to constrain overflowing elements */
min-width: 0;
}
+
+ main > .content {
+ display: flex;
+ }
+
+ aside.toc.embedded {
+ display: none;
+ }
+
+ aside.toc.sidebar {
+ flex: 0 0 var(--toc-width);
+ min-width: 15rem;
+ }
+
+ .toc.sidebar .toc-menu ul {
+ scrollbar-width: thin; /* Firefox */
+ }
+
+ .toc.sidebar .toc-menu ul::-webkit-scrollbar {
+ width: var(--scrollbar-thickness); /* Chrome/Safari/Webkit */
+ }
+
+ .toc.sidebar .toc-menu ul::-webkit-scrollbar-track {
+ background: var(--scrollbar-track-color);
+ border-radius: var(--scrollbar-radius);
+ }
+
+ .toc.sidebar .toc-menu ul::-webkit-scrollbar-thumb {
+ background: var(--scrollbar-thumb-color);
+ border-radius: var(--scrollbar-radius);
+ }
+
+ .toc.sidebar .toc-menu ul::-webkit-scrollbar-thumb:hover,
+ .toc.sidebar .toc-menu ul::-webkit-scrollbar-thumb:active {
+ background: var(--scrollbar-thumb-active-color);
+ }
+}
+
+@media screen and (min-width: 1216px) {
+ aside.toc.sidebar {
+ flex-basis: var(--toc-width--widescreen);
+ }
}
diff --git a/antora-ui-hop/src/css/misc.css b/antora-ui-hop/src/css/misc.css
new file mode 100644
index 0000000..9282b7b
--- /dev/null
+++ b/antora-ui-hop/src/css/misc.css
@@ -0,0 +1,9 @@
+.misc p {
+ display: flex;
+ align-items: center;
+}
+
+.misc p img {
+ margin-right: 1rem;
+ width: 7rem;
+}
diff --git a/antora-ui-hop/src/css/pagination.css b/antora-ui-hop/src/css/pagination.css
index 67394c0..e3f2d49 100644
--- a/antora-ui-hop/src/css/pagination.css
+++ b/antora-ui-hop/src/css/pagination.css
@@ -1,37 +1,63 @@
-.pagination {
- margin: var(--static-margin);
- max-width: var(--static-max-width);
- list-style: none;
- padding: 1rem;
+nav.pagination {
+ display: flex;
+ border-top: 1px solid var(--toolbar-border-color);
+ line-height: 1;
+ margin: 2rem -1rem -1rem;
+ padding: 0.75rem 1rem 0;
}
-@media screen and (min-width: 1024px) {
- .pagination {
- max-width: var(--static-max-width--desktop);
- }
+nav.pagination span {
+ display: flex;
+ flex: 50%;
+ flex-direction: column;
}
-.page-item {
- display: inline;
- padding: 0;
- margin: 0;
+nav.pagination .prev {
+ padding-right: 0.5rem;
}
-.page-item a {
- color: var(--color-gray-10);
- font-weight: bold;
- padding: 0.5rem;
+nav.pagination .next {
+ margin-left: auto;
+ padding-left: 0.5rem;
+ text-align: right;
}
-.page-item.disabled a {
- color: var(--color-smoke-90);
+nav.pagination span::before {
+ color: var(--toolbar-muted-color);
+ font-size: 0.75em;
+ padding-bottom: 0.1em;
}
-.page-item.active {
- border-radius: 3px;
- background: var(--color-moderate-blue);
+nav.pagination .prev::before {
+ content: "Prev";
}
-.page-item.active a {
- color: var(--color-white);
+nav.pagination .next::before {
+ content: "Next";
+}
+
+nav.pagination a {
+ font-weight: var(--body-font-weight-bold);
+ line-height: 1.3;
+ position: relative;
+}
+
+nav.pagination a::before,
+nav.pagination a::after {
+ color: var(--toolbar-muted-color);
+ font-weight: normal;
+ font-size: 1.5em;
+ line-height: 0.75;
+ position: absolute;
+ top: 0;
+ width: 1rem;
+}
+
+nav.pagination .prev a::before {
+ content: "\2039";
+ transform: translateX(-100%);
+}
+
+nav.pagination .next a::after {
+ content: "\203a";
}
diff --git a/antora-ui-hop/src/css/print.css b/antora-ui-hop/src/css/print.css
index d709131..8b11b6c 100644
--- a/antora-ui-hop/src/css/print.css
+++ b/antora-ui-hop/src/css/print.css
@@ -17,8 +17,8 @@
}
a.bare,
- a[href^="#"],
- a[href^="mailto:"] {
+ a[href^='#'],
+ a[href^='mailto:'] {
text-decoration: none;
}
diff --git a/antora-ui-hop/src/css/release.css b/antora-ui-hop/src/css/release.css
new file mode 100644
index 0000000..ee18d97
--- /dev/null
+++ b/antora-ui-hop/src/css/release.css
@@ -0,0 +1,32 @@
+.release dl {
+ display: grid;
+ grid-template-columns: max-content auto;
+}
+
+.release dt {
+ grid-column-start: 1;
+}
+
+.release dd {
+ grid-column-start: 2;
+ margin-left: 1rem;
+ word-break: break-word;
+}
+
+.release .tableblock tbody tr:nth-child(2n) {
+ background: var(--color-smoke-50);
+}
+
+.release aside {
+ float: right;
+ margin-left: 1rem;
+ width: 25rem;
+}
+
+/* for mobile screens */
+@media screen and (max-width: 626px) {
+ .release aside {
+ width: 100%;
+ margin: 0 auto;
+ }
+}
diff --git a/antora-ui-hop/src/css/site.css b/antora-ui-hop/src/css/site.css
index b252fe6..e8208d0 100644
--- a/antora-ui-hop/src/css/site.css
+++ b/antora-ui-hop/src/css/site.css
@@ -1,23 +1,29 @@
-@import "typeface-open-sans.css";
-@import "typeface-droid-sans-mono.css";
-@import "vars.css";
-@import "base.css";
-@import "body.css";
-@import "nav.css";
-@import "main.css";
-@import "toolbar.css";
-@import "breadcrumbs.css";
-@import "page-versions.css";
-@import "doc.css";
-@import "static.css";
-@import "header.css";
-@import "footer.css";
-@import "highlight.css";
-@import "frontpage.css";
-@import "print.css";
-@import "pagination.css";
-@import "blog.css";
-@import "category.css";
+@import 'typeface-open-sans.css';
+@import 'typeface-droid-sans-mono.css';
+@import 'fa-emulated.css';
+@import 'vars.css';
+@import 'base.css';
+@import 'body.css';
+@import 'nav.css';
+@import 'main.css';
+@import 'toolbar.css';
+@import 'breadcrumbs.css';
+@import 'page-versions.css';
+@import "toc.css";
+@import 'doc.css';
+@import 'static.css';
+@import 'header.css';
+@import 'footer.css';
+@import 'highlight.css';
+@import 'frontpage.css';
+@import 'print.css';
+@import 'pagination.css';
+@import 'blog.css';
+@import 'category.css';
+@import 'release.css';
+@import 'misc.css';
+@import 'community.css';
+@import 'docs.css';
+@import 'sitemap.css';
@import "cookies-eu-banner.default.css";
-@import "mailchimp.css";
@import "docsearch.css";
diff --git a/antora-ui-hop/src/css/sitemap.css b/antora-ui-hop/src/css/sitemap.css
new file mode 100644
index 0000000..32ee347
--- /dev/null
+++ b/antora-ui-hop/src/css/sitemap.css
@@ -0,0 +1,19 @@
+.sitemap h1 {
+ text-align: center;
+}
+
+.sitemap ul.sitemap-list {
+ list-style-type: none;
+ -webkit-columns: 2;
+ -moz-columns: 2;
+ columns: 2;
+ padding: 0;
+ column-gap: 25%;
+ white-space: nowrap;
+}
+
+@media screen and (max-width: 626px) {
+ .sitemap ul.sitemap-list {
+ columns: 1;
+ }
+}
diff --git a/antora-ui-hop/src/css/static.css b/antora-ui-hop/src/css/static.css
index 6002d2c..ae73907 100644
--- a/antora-ui-hop/src/css/static.css
+++ b/antora-ui-hop/src/css/static.css
@@ -1,6 +1,5 @@
.static {
margin: var(--static-margin);
- max-width: var(--static-max-width);
}
@media screen and (min-width: 1024px) {
diff --git a/antora-ui-hop/src/css/toc.css b/antora-ui-hop/src/css/toc.css
new file mode 100644
index 0000000..14120eb
--- /dev/null
+++ b/antora-ui-hop/src/css/toc.css
@@ -0,0 +1,96 @@
+.toc-menu {
+ color: var(--toc-font-color);
+}
+
+.toc.sidebar .toc-menu {
+ margin-right: 0.75rem;
+ position: sticky;
+ top: var(--toc-top);
+}
+
+.toc .toc-menu h3 {
+ color: var(--toc-heading-font-color);
+ font-size: calc(16 / var(--rem-base) * 1rem);
+ font-weight: var(--body-font-weight-bold);
+ line-height: 1.3;
+ margin: 0 -0.5px;
+ padding-bottom: 0.25rem;
+}
+
+.toc.sidebar .toc-menu h3 {
+ display: flex;
+ flex-direction: column;
+ height: 2.5rem;
+ justify-content: flex-end;
+}
+
+.toc .toc-menu ul {
+ font-size: calc(15 / var(--rem-base) * 1rem);
+ line-height: var(--toc-line-height);
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.toc.sidebar .toc-menu ul {
+ max-height: var(--toc-height);
+ overflow-y: auto;
+}
+
+@media screen and (min-width: 1024px) {
+ .toc .toc-menu h3 {
+ font-size: calc(15 / var(--rem-base) * 1rem);
+ }
+
+ .toc .toc-menu ul {
+ font-size: calc(13.5 / var(--rem-base) * 1rem);
+ }
+}
+
+.toc .toc-menu li {
+ margin: 0;
+}
+
+.toc .toc-menu li[data-level="2"] a {
+ padding-left: 1.25rem;
+}
+
+@media screen and (max-width: 1023px) {
+ .toc .toc-menu ul li ul li ul li a {
+ padding-left: 1.25rem;
+ }
+}
+
+.toc .toc-menu li[data-level="3"] a {
+ padding-left: 2rem;
+}
+
+.toc .toc-menu a {
+ color: inherit;
+ border-left: 2px solid var(--toc-border-color);
+ display: inline-block;
+ padding: 0.25rem 0 0.25rem 0.5rem;
+ text-decoration: none;
+}
+
+.sidebar.toc .toc-menu a {
+ display: block;
+ outline: none;
+}
+
+.toc .toc-menu a:hover {
+ color: var(--link-font-color);
+}
+
+.toc .toc-menu a.is-active {
+ border-left-color: var(--link-font-color);
+ color: var(--doc-font-color);
+}
+
+.sidebar.toc .toc-menu a:focus {
+ background: var(--panel-background);
+}
+
+.toc .toc-menu .is-hidden-toc {
+ display: none !important;
+}
diff --git a/antora-ui-hop/src/css/toolbar.css b/antora-ui-hop/src/css/toolbar.css
index 76da9e0..cf5bb8d 100644
--- a/antora-ui-hop/src/css/toolbar.css
+++ b/antora-ui-hop/src/css/toolbar.css
@@ -12,6 +12,18 @@
z-index: var(--z-index-toolbar);
}
+.static.toolbar {
+ box-shadow: none;
+ margin: 0;
+ max-width: 100vw;
+}
+
+@media screen and (max-width: 1023px) {
+ .toolbar {
+ top: var(--navbar-mobile-height);
+ }
+}
+
.toolbar a {
color: inherit;
}
diff --git a/antora-ui-hop/src/css/typeface-open-sans.css b/antora-ui-hop/src/css/typeface-open-sans.css
index d9ec92c..ffc0b66 100644
--- a/antora-ui-hop/src/css/typeface-open-sans.css
+++ b/antora-ui-hop/src/css/typeface-open-sans.css
@@ -1,51 +1,72 @@
-/* open-sans-300normal - latin */
+/* open-sans-300normal - latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-display: swap;
font-weight: 300;
src:
- local('Open Sans Light '),
- local('Open Sans-Light'),
- url('~typeface-open-sans/files/open-sans-latin-300.woff2') format('woff2'),
- url('~typeface-open-sans/files/open-sans-latin-300.woff') format('woff');
+ local('Open Sans Light'),
+ local('OpenSans-Light'),
+ url('~@openfonts/open-sans_latin-ext/files/open-sans-latin-ext-300.woff2') format('woff2'),
+ url('~@openfonts/open-sans_latin-ext/files/open-sans-latin-ext-300.woff') format('woff');
}
-
-/* open-sans-300italic - latin */
+/* open-sans-300italic - latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-display: swap;
font-weight: 300;
src:
- local('Open Sans Light italic'),
- local('Open Sans-Lightitalic'),
- url('~typeface-open-sans/files/open-sans-latin-300italic.woff2') format('woff2'),
- url('~typeface-open-sans/files/open-sans-latin-300italic.woff') format('woff');
+ local('Open Sans Light Italic'),
+ local('OpenSans-LightItalic'),
+ url('~@openfonts/open-sans_latin-ext/files/open-sans-latin-ext-300-italic.woff2') format('woff2'),
+ url('~@openfonts/open-sans_latin-ext/files/open-sans-latin-ext-300-italic.woff') format('woff');
}
-
-/* open-sans-700normal - latin */
+/* open-sans-700normal - latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-display: swap;
font-weight: 700;
src:
- local('Open Sans ExtraBold '),
- local('Open Sans-ExtraBold'),
- url('~typeface-open-sans/files/open-sans-latin-700.woff2') format('woff2'),
- url('~typeface-open-sans/files/open-sans-latin-700.woff') format('woff');
+ local('Open Sans Bold'),
+ local('OpenSans-Bold'),
+ url('~@openfonts/open-sans_latin-ext/files/open-sans-latin-ext-700.woff2') format('woff2'),
+ url('~@openfonts/open-sans_latin-ext/files/open-sans-latin-ext-700.woff') format('woff');
}
-
-/* open-sans-700italic - latin */
+/* open-sans-700italic - latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-display: swap;
font-weight: 700;
src:
- local('Open Sans ExtraBold italic'),
- local('Open Sans-ExtraBolditalic'),
- url('~typeface-open-sans/files/open-sans-latin-700italic.woff2') format('woff2'),
- url('~typeface-open-sans/files/open-sans-latin-700italic.woff') format('woff');
+ local('Open Sans Bold Italic'),
+ local('OpenSans-BoldItalic'),
+ url('~@openfonts/open-sans_latin-ext/files/open-sans-latin-ext-700-italic.woff2') format('woff2'),
+ url('~@openfonts/open-sans_latin-ext/files/open-sans-latin-ext-700-italic.woff') format('woff');
+}
+/* open-sans-800normal - latin-ext */
+@font-face {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 800;
+ src:
+ local('Open Sans ExtraBold'),
+ local('OpenSans-ExtraBold'),
+ url('~@openfonts/open-sans_latin-ext/files/open-sans-latin-ext-800.woff2') format('woff2'),
+ url('~@openfonts/open-sans_latin-ext/files/open-sans-latin-ext-800.woff') format('woff');
+}
+/* open-sans-800italic - latin-ext */
+@font-face {
+ font-family: 'Open Sans';
+ font-style: italic;
+ font-display: swap;
+ font-weight: 800;
+ src:
+ local('Open Sans ExtraBold Italic'),
+ local('OpenSans-ExtraBoldItalic'),
+ url('~@openfonts/open-sans_latin-ext/files/open-sans-latin-ext-800-italic.woff2') format('woff2'),
+ url('~@openfonts/open-sans_latin-ext/files/open-sans-latin-ext-800-italic.woff') format('woff');
}
diff --git a/antora-ui-hop/src/css/typeface-roboto-mono.css b/antora-ui-hop/src/css/typeface-roboto-mono.css
deleted file mode 100644
index 5d30dc3..0000000
--- a/antora-ui-hop/src/css/typeface-roboto-mono.css
+++ /dev/null
@@ -1,21 +0,0 @@
-@font-face {
- font-family: "Roboto Mono";
- font-style: normal;
- font-weight: 400;
- src:
- local("Roboto Mono"),
- local("RobotoMono-Regular"),
- url(~typeface-roboto-mono/files/roboto-mono-latin-400.woff2) format("woff2"),
- url(~typeface-roboto-mono/files/roboto-mono-latin-400.woff) format("woff");
-}
-
-@font-face {
- font-family: "Roboto Mono";
- font-style: normal;
- font-weight: 500;
- src:
- local("Roboto Mono Medium"),
- local("RobotoMono-Medium"),
- url(~typeface-roboto-mono/files/roboto-mono-latin-500.woff2) format("woff2"),
- url(~typeface-roboto-mono/files/roboto-mono-latin-500.woff) format("woff");
-}
diff --git a/antora-ui-hop/src/css/typeface-roboto.css b/antora-ui-hop/src/css/typeface-roboto.css
deleted file mode 100644
index 7825486..0000000
--- a/antora-ui-hop/src/css/typeface-roboto.css
+++ /dev/null
@@ -1,43 +0,0 @@
-@font-face {
- font-family: "Roboto";
- font-style: normal;
- font-weight: 400;
- src:
- local("Roboto Regular"),
- local("Roboto-Regular"),
- url(~typeface-roboto/files/roboto-latin-400.woff2) format("woff2"),
- url(~typeface-roboto/files/roboto-latin-400.woff) format("woff");
-}
-
-@font-face {
- font-family: "Roboto";
- font-style: italic;
- font-weight: 400;
- src:
- local("Roboto Italic"),
- local("Roboto-Italic"),
- url(~typeface-roboto/files/roboto-latin-400italic.woff2) format("woff2"),
- url(~typeface-roboto/files/roboto-latin-400italic.woff) format("woff");
-}
-
-@font-face {
- font-family: "Roboto";
- font-style: normal;
- font-weight: 500;
- src:
- local("Roboto Medium"),
- local("Roboto-Medium"),
- url(~typeface-roboto/files/roboto-latin-500.woff2) format("woff2"),
- url(~typeface-roboto/files/roboto-latin-500.woff) format("woff");
-}
-
-@font-face {
- font-family: "Roboto";
- font-style: italic;
- font-weight: 500;
- src:
- local("Roboto Medium Italic"),
- local("Roboto-MediumItalic"),
- url(~typeface-roboto/files/roboto-latin-500italic.woff2) format("woff2"),
- url(~typeface-roboto/files/roboto-latin-500italic.woff) format("woff");
-}
diff --git a/antora-ui-hop/src/css/vars.css b/antora-ui-hop/src/css/vars.css
index ee87678..f4a3f7c 100644
--- a/antora-ui-hop/src/css/vars.css
+++ b/antora-ui-hop/src/css/vars.css
@@ -9,6 +9,7 @@
--color-gray-10: #c1c1c1;
--color-gray-30: #8e8e8e;
--color-gray-50: #808080;
+ --color-gray-60: #555;
--color-gray-70: #5d5d5d;
--color-jet-20: #4a4a4a;
--color-jet-30: #424242;
@@ -16,10 +17,13 @@
--color-jet-70: #222;
--color-jet-80: #191919;
--color-black: #000;
- --color-dark-blue: #303284;
- --color-moderate-blue: #585ac2;
- --color-highlight: #fffcdd;
+ --color-asf-dark-blue: #303284;
+ --color-asf-moderate-blue: #4f51ae;
+ --color-camel-hop: #8e8e8e;
+ --color-camel-hop-light: #f39421;
+ --color-highlight: #cf7428;
--color-glow: #fff7a3;
+ --color-wheat: #f5deb3;
/* fonts */
--rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
--body-font-size: 1.0625em; /* 17px */
@@ -27,18 +31,23 @@
--body-font-size--print: 0.9375em; /* 15px */
--body-line-height: 1.15;
--body-font-color: var(--color-jet-50);
- --body-font-family: "Open Sans", sans-serif;
+ --body-font-family: 'Open Sans', sans-serif;
--body-font-weight-bold: bold;
- --monospace-font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
+ --monospace-font-family: 'Droid Sans Mono', 'DejaVu Sans Mono', monospace;
--monospace-font-weight-bold: 500;
/* base */
--body-background: var(--color-white);
- --panel-background: var(--color-smoke-30);
+ --panel-background: var(--color-smoke-10);
--panel-border-color: var(--color-smoke-90);
+ --scrollbar-track-color: var(--color-gray-10);
+ --scrollbar-thumb-color: var(--color-gray-30);
+ --scrollbar-thumb-active-color: var(--color-gray-50);
+ --scrollbar-thickness: 0.425em; /* 6.8px */
+ --scrollbar-radius: 3.125em; /* 50px */
/* navbar */
--navbar-background: var(--color-white);
- --navbar-font-color: var(--color-gray-30);
- --navbar-hover-font-color: var(--color-gray-30);
+ --navbar-font-color: var(--color-camel-hop);
+ --navbar-hover-font-color: var(--color-camel-hop);
--navbar-hover-background: var(--color-white);
--navbar-button-background: var(--color-white);
--navbar-button-border-color: var(--panel-border-color);
@@ -46,23 +55,28 @@
--navbar-menu-border-color: var(--panel-border-color);
--navbar-menu-background: var(--color-white);
--navbar-menu-font-color: var(--body-font-color);
- --navbar-menu-hover-background: var(--color-white);
- --navbar-menu-hover-decoration-color: var(--color-gray-30);
+ --navbar-menu-hover-background: var(--color-smoke-70);
+ --navbar-search-result-separator: var(--color-wheat);
/* nav */
--nav-background: var(--panel-background);
- --nav-border-color: var(--color-gray-10);
+ --nav-border-color: var(--color-smoke-50);
--nav-line-height: 1.35;
- --nav-heading-font-color: var(--color-dark-blue);
- --nav-muted-color: var(--color-gray-70);
- --nav-panel-divider-color: var(--color-smoke-90);
+ --nav-heading-font-color: var(--color-asf-dark-blue);
+ --nav-muted-color: var(--color-jet-50);
+ --nav-panel-divider-color: var(--color-smoke-50);
--nav-secondary-background: var(--color-smoke-70);
/* toolbar */
--toolbar-background: var(--panel-background);
--toolbar-border-color: var(--panel-border-color);
- --toolbar-font-color: var(--color-gray-70);
- --toolbar-muted-color: var(--color-gray-30);
+ --toolbar-font-color: var(--color-jet-80);
+ --toolbar-muted-color: var(--color-jet-80);
--page-version-menu-background: var(--color-smoke-70);
--page-version-missing-font-color: var(--color-gray-30);
+ /* toc */
+ --toc-font-color: var(--nav-muted-color);
+ --toc-heading-font-color: var(--doc-font-color);
+ --toc-border-color: var(--panel-border-color);
+ --toc-line-height: 1.2;
/* admonitions */
--caution-color: #a0439c;
--caution-on-color: var(--color-white);
@@ -70,7 +84,7 @@
--important-on-color: var(--color-white);
--note-color: #217ee7;
--note-on-color: var(--color-white);
- --tip-color: #41af46;
+ --tip-color: #4d4fb7;
--tip-on-color: var(--color-white);
--warning-color: #e18114;
--warning-on-color: var(--color-white);
@@ -81,12 +95,13 @@
--doc-line-height: 1.6;
--doc-margin: 0 auto;
--doc-margin--desktop: 0 2rem;
- --heading-font-color: var(--color-dark-blue);
+ --heading-font-color: var(--color-asf-dark-blue);
--heading-font-weight: bold;
--alt-heading-font-weight: var(--body-font-weight-bold);
--section-divider-color: var(--panel-border-color);
--link-font-color: #585ac2;
--link_hover-font-color: #104d92;
+ --link_unresolved-font-color: var(--important-color);
--abstract-background: var(--color-smoke-70);
--abstract-font-color: var(--color-jet-20);
--abstract-border-color: var(--panel-border-color);
@@ -95,7 +110,7 @@
--caption-font-color: var(--color-gray-70);
--caption-font-weight: var(--body-font-weight-bold);
--code-background: var(--panel-background);
- --code-font-color: var(--color-moderate-blue);
+ --code-font-color: var(--color-asf-moderate-blue);
--example-background: var(--color-white);
--example-border-color: var(--color-gray-10);
--kbd-background: var(--panel-background);
@@ -108,31 +123,41 @@
--quote-font-color: var(--color-gray-70);
--quote-attribution-font-color: var(--color-gray-30);
--sidebar-background: var(--color-smoke-70);
- --table-border-color: var(--panel-border-color);
+ --table-border-color: var(--color-asf-moderate-blue);
/* static */
--static-margin: 0 auto;
/* frontpage */
- --frontpage-max-width: calc(1140 / var(--rem-base) * 1rem);
+ --frontpage-max-width: calc(1366 / var(--rem-base) * 1rem);
/* footer */
--footer-line-height: var(--doc-line-height);
- --footer-background: var(--color-smoke-90);
+ --footer-background: var(--color-smoke-50);
--footer-font-color: var(--color-gray-70);
+ --footer-after-background: var(--color-gray-50);
--footer-link-font-color: var(--color-jet-80);
+ --footer-height: 23rem; /* empirically corresponding current design of the foooter */
/* dimensions */
--navbar-height: calc(73 / var(--rem-base) * 1rem);
+ --navbar-burger-height: calc(54 / var(--rem-base) * 1rem);
+ --navbar-mobile-height: calc(4rem + var(--navbar-height));
--toolbar-height: calc(45 / var(--rem-base) * 1rem);
--drawer-height: var(--toolbar-height);
- --body-top: var(--navbar-height);
- --body-min-height: calc(100vh - var(--body-top));
+ --body-top: calc(var(--navbar-height) + 1rem);
+ --body-mobile-top: calc(var(--navbar-mobile-height) + 1rem);
+ --body-min-height: calc(100vh - var(--navbar-height));
--nav-height: calc(var(--body-min-height) - var(--toolbar-height));
--nav-height--desktop: var(--body-min-height);
--nav-panel-height: calc(var(--nav-height) - var(--drawer-height));
--nav-panel-height--desktop: calc(var(--nav-height--desktop) - var(--drawer-height));
--nav-width: calc(270 / var(--rem-base) * 1rem);
+ --toc-top: calc(var(--body-top) + var(--toolbar-height));
+ --toc-mobile-top: calc(3rem + var(--toc-top));
+ --toc-height: calc(100vh - var(--toc-top) - 2.5rem);
+ --toc-width: calc(162 / var(--rem-base) * 1rem);
+ --toc-width--widescreen: calc(216 / var(--rem-base) * 1rem);
--doc-max-width: calc(720 / var(--rem-base) * 1rem);
- --doc-max-width--desktop: calc(828 / var(--rem-base) * 1rem);
+ --doc-max-width--desktop: calc(1366 / var(--rem-base) * 1rem);
--static-max-width: calc(720 / var(--rem-base) * 1rem);
- --static-max-width--desktop: calc(1140 / var(--rem-base) * 1rem);
+ --static-max-width--desktop: calc(1366 / var(--rem-base) * 1rem);
/* stacking */
--z-index-nav: 1;
--z-index-toolbar: 2;
diff --git a/config.toml b/config.toml
index 4bf0181..5fe57b7 100644
--- a/config.toml
+++ b/config.toml
@@ -16,6 +16,12 @@ enableRobotsTXT = true
name = "The Hop Team"
[[menu.main]]
+ name = "Blog"
+ identifier = "blog"
+ weight = 1
+ url = "/blog/"
+
+[[menu.main]]
name = "Documentation"
identifier = "docs"
weight = 1
diff --git a/content/_index.adoc b/content/_index.adoc
index 00cffa5..83be012 100644
--- a/content/_index.adoc
+++ b/content/_index.adoc
@@ -1,153 +1,133 @@
---
-title: Home
-description: The Hop Orchestration Platform aims to facilitate all aspects of data and metadata orchestration.
+title: Apache Hop (Incubating)
+description: Apache Hop - The Hop Orchestration Platform aims to facilitate all aspects of data and metadata orchestration.
---
-{{< section "frontpage columns" >}}
-# News
-{{< div "box" >}}
-{{< div >}}
+{{< section "frontpage columns functionalities" >}}
-<a id="events" />
-## Events
+# Apache Hop
+{{< div "box right" >}}
-<img src="calendar/hangouts-meet-icon.png" style="width: 50px; height:50px; float: left;" alt="Hot Hop Hangout">
-<p>We'll have our third Hot Hop Hangout (3H3) on Thursday, July 23rd at 20:00 CET.
-<br />Some topics we'll discuss:
- <ul>
-<li>What's new in Hop version 0.30</li>
-<li>Apache Hop incubation</li>
-<li>Hop Web update</li>
-<li>Hop Docker updates</li>
-<li>...</li>
- </ul>
- <table>
- <tr>
- <td>Google Calendar:</td>
- <td>
- <a href="https://www.google.com/calendar/render?action=TEMPLATE&text=Hot+Hop+Hangout+3+%283H3%29&details=-+What%E2%80%99s+new+in+Hop+version+0.30%0A-+Apache+Hop+incubation%0A-+Hop+Web+update%0A-+Hop+Docker+updates%0A%E2%80%A6&location=https%3A%2F%2Fmeet.google.com%2Fgfr-nrgk-shc&dates=20200723T180000Z%2F20200723T193000Z" target="_blank"><img src="img/calendar/gcal.png" style="width:25px; height:25px;" alt="Google Calendar"></a>
- </td>
- </tr>
- <tr> <td>ICS (iCal, Outlook):</td> <td> <a href="calendar/hhh-2020723.ics"><img src="img/calendar/ical.png" style="height:25px; width: 25px;" alt="iCal"></a> </td> </tr>
- </table>
-<br />
-</p>
-<img src="calendar/hangouts-meet-icon.png" style="width: 50px; height:50px; float: left;" alt="Hot Hop Hangout">
-<p>The first Hot Hop Hangout (3H1) on April 23rd was a great success with over 30 people joining. Thank you all for participating! We'll try to do a hangout every month to share our progress!<br>
+{{< div "content" >}}
+## Metadata Driven
+Hop is entirely metadata driven. Every object type in Hop describes how data is read, manipulated or written, or how workflows and pipelines need to be orchestrated.</br>
+Metadata is wat drives Hop internally as well. Hop uses a kernel architecture with a robust engine. Plugins add functionality to the engine through their own metadata.
+
+<!--p><a class="button-dark" href="/link/to/doc/page/on/metadata">Read more on Hop Metadata</a></p-->
{{< /div >}}
+
+{{< div "icon" >}}
+
+<img src="./img/GenericTransform.svg" alt="Driven By Metadata"/>
+
{{< /div >}}
-{{< div "box" >}}
-{{< div >}}
+{{< /div >}}
+
+
+{{< div "box left" >}}
+
+{{< div "icon" >}}
+
+<img src="./img/beam-logo.svg" alt="Driven By Metadata"/>
-## Releases
+{{< /div >}}
+
+{{< div "content" >}}
-Our Third preview release 0.30 is available!
+## Design Once, Run Anywhere
-What to expect:
+Hop workflines and pipelines are definitions of how data needs to be processed. </br>Once designed, a pipeline can be executed on any supported runtime.
+Hop has built-in support to run pipelines locally and remotely in the native Hop runtime, or on <a href="https://spark.apache.org" target="blank">Apache Spark</a>, <a href="https://flink.apache.org" target="blank">Apache Flink</a> or <a href="https://cloud.google.com/dataflow" target="blank">Google Dataflow</a> through the <a href="https://beam.apache.org" target="blank">Apache Beam</a> runtimes.
-* continued cleanup, refactoring
-* continued plugin ports
-* UI improvements (New File Browser)
-* Containers
-* Beam support
+<!--p><a class="button-dark" href="/components/latest/eips/enterprise-integration-patterns.html">Read more on runtimes</a></p-->
+{{< /div >}}
-**[0.30 Preview Release](/news/release-preview-0-30/)**
+{{< div "icon" >}}
{{< /div >}}
+
{{< /div >}}
-{{< div "box" >}}
-{{< div >}}
-## Monthly Roundup
+{{< div "box right" >}}
-Hop fans! We'll be posting monthly roundups here to show you what we are working on, which new functionality is available and what you can expect in the near future.
+{{< div "content" >}}
-**[July, August 2020](/news/roundup-2020-08/)**
+## Visual Development
-[June 2020](/news/roundup-2020-06/)
+Hop workflows and pipelines are developed visually through an intuitive drag and drop interface. </br>
+Visual development allows data developers and data engineers to keep focus on the business logic that needs to be implemented, on <i>what</i> needs to be done instead of <i>how</i> it needs to be done.
-[May 2020](/news/roundup-2020-05/)
+<!--p><a class="button-dark" href="/components/latest/eips/enterprise-integration-patterns.html">Read more on Hop Gui</a></p-->
-[April 2020](/news/roundup-2020-04/)
+{{< /div >}}
-[March 2020](/news/roundup-2020-03/)
+{{< div "icon" >}}
-[February 2020](/news/roundup-2020-02/)
+<img src="./img/eyeglasses.svg" alt="Driven By Metadata"/>
{{< /div >}}
+
{{< /div >}}
-{{< div "box" >}}
-{{< div >}}
-## Sneak Peek
+{{< div "box left" >}}
+
+{{< div "icon" >}}
-You can find instructions to download and test the **nightly** version for the <mark>Hop Orchestration Platform</mark> [here](/download/download/).
+<img src="./img/cycle.svg" alt="Driven By Metadata"/>
+
+{{< /div >}}
-Please note that this is not a stable or usable production version.
+{{< div "content" >}}
-You can log all issues you find on our [JIRA](https://project-hop.atlassian.net). Feel free and join the discussion on the future plans of Hop on our [Mattermost Chat](https://chat.project-hop.org/).
+## Built-in Life Cycle Management
+
+Managing, testing and deploying workflows and pipelines can be a daunting task.</br>
+Developers and engineers can manage the entire project life cycle from the Hop Gui: switch between projects, environments, runtime configurations, manage git versions etc.
+
+<p><a class="button-dark" href="/components/latest/eips/enterprise-integration-patterns.html">Read more on LCM</a></p>
{{< /div >}}
+
+{{< div "icon" >}}
+
{{< /div >}}
+{{< /div >}}
-{{< div "box" >}}
-{{< div >}}
-## Quick Links
-### [Source Code](https://github.com/project-hop/hop/) (Github)
-### [JIRA](https://project-hop.atlassian.net)
-### [Forums](https://forums.project-hop.org/)
-### [Mattermost Chat](https://chat.project-hop.org/)
-### [Contribution Guide](http://www.project-hop.org/community/contributing/)
+{{< /section >}}
-{{< /div >}}
+{{< section "frontpage columns apache" >}}
+
+# Apache & OpenSource
+
+{{< div "split" >}}
+
{{< /div >}}
-<div id="mc_embed_signup" class="box">
- <div>
- <form action="https://project-hop.us19.list-manage.com/subscribe/post?u=f85cf98c43d51747eaa845ff3&id=914ae361b3" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
- <div id="mc_embed_signup_scroll">
- <h1><span style="color:#0e3a5a">Become part of the Hop community!</span></h1>
- <span>Want to stay in the loop of current progress on Hop development and events?</span>
- <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
- <div class="mc-field-group">
- <label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
- </label>
- <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
- </div>
- <div class="mc-field-group">
- <label for="mce-FNAME">First Name </label>
- <input type="text" value="" name="FNAME" class="" id="mce-FNAME">
- </div>
- <div class="mc-field-group">
- <label for="mce-LNAME">Last Name </label>
- <input type="text" value="" name="LNAME" class="" id="mce-LNAME">
- </div>
- <div id="mce-responses" class="clear">
- <div class="response" id="mce-error-response" style="display:none"></div>
- <div class="response" id="mce-success-response" style="display:none"></div>
- </div>
- <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
- <div style="position: absolute; left: -5000px;" aria-hidden="true">
- <input type="text" name="b_f85cf98c43d51747eaa845ff3_914ae361b3" tabindex="-1" value="">
- </div>
- <div class="clear">
- <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" style="background-color: #0e3a5a !important;">
- </div>
- </div>
- </form>
- </div>
-</div>
+{{< div "split" >}}
+**Hop is your project!**
+
+Hop is an [Apache Software Foundation](https://www.apache.org) [Incubating](https://incubator.apache.org) project, available under the [Apache v2 license](https://apache.org/licenses/LICENSE-2.0). It's a complete open community, always listening to proposals and comments.
+
+[Sources](./community/sources/), [mailing lists](./community/mailing-list/), [issue tracker](./community/support/): it's fully open, you can access directly.
+
+We also love contributions: don't hesitate to [contribute](./community/contributing/). You can contribute by <a href="https://github.com/apache/incubator-hop-website/edit/master/content/_index.md">editing this page</a>!
+
+[Be Involved In The Community](./community/contributing/)
+
+{{< /div >}}
{{< /section >}}
+
+
diff --git a/content/news/roundup-2020-02.adoc b/content/blog/2020/02/roundup-2020-02/index.adoc
similarity index 97%
rename from content/news/roundup-2020-02.adoc
rename to content/blog/2020/02/roundup-2020-02/index.adoc
index db595a0..d95237e 100644
--- a/content/news/roundup-2020-02.adoc
+++ b/content/blog/2020/02/roundup-2020-02/index.adoc
@@ -1,6 +1,9 @@
---
title: "Roundup February 2020"
date: 2020-03-08T12:38:42+01:00
+authors: ["hansva"]
+categories: ["Roundup", "Project Hop"]
+preview: "Roundup February 2020"
draft: false
---
diff --git a/content/news/roundup-2020-03.adoc b/content/blog/2020/03/roundup-2020-03/index.adoc
similarity index 97%
rename from content/news/roundup-2020-03.adoc
rename to content/blog/2020/03/roundup-2020-03/index.adoc
index 2a9fade..8c67327 100644
--- a/content/news/roundup-2020-03.adoc
+++ b/content/blog/2020/03/roundup-2020-03/index.adoc
@@ -1,6 +1,9 @@
---
title: "Roundup March 2020"
date: 2020-03-31T12:01:56+02:00
+authors: ["hansva"]
+categories: ["Roundup", "Project Hop"]
+preview: "Roundup March 2020"
draft: false
---
diff --git a/content/news/release-preview-0-10.adoc b/content/blog/2020/04/release-preview-0.1/index.adoc
similarity index 98%
rename from content/news/release-preview-0-10.adoc
rename to content/blog/2020/04/release-preview-0.1/index.adoc
index b258d49..5478497 100644
--- a/content/news/release-preview-0-10.adoc
+++ b/content/blog/2020/04/release-preview-0.1/index.adoc
@@ -1,6 +1,9 @@
---
title: "Preview Release 0.10"
date: 2020-04-09T12:01:56+02:00
+authors: ["hansva"]
+categories: ["Pre-Release", "Project Hop"]
+preview: "Preview Release 0.10"
draft: false
---
diff --git a/content/news/roundup-2020-04.adoc b/content/blog/2020/04/roundup-2020-04/index.adoc
similarity index 98%
rename from content/news/roundup-2020-04.adoc
rename to content/blog/2020/04/roundup-2020-04/index.adoc
index f5ef2ca..3e709fb 100644
--- a/content/news/roundup-2020-04.adoc
+++ b/content/blog/2020/04/roundup-2020-04/index.adoc
@@ -1,6 +1,9 @@
---
title: "Roundup April 2020"
date: 2020-05-03T12:01:56+02:00
+authors: ["hansva"]
+categories: ["Roundup", "Project Hop"]
+preview: "Roundup April 2020"
draft: false
---
diff --git a/content/news/release-preview-0-21.adoc b/content/blog/2020/05/preview-release-0.21/index.adoc
similarity index 98%
rename from content/news/release-preview-0-21.adoc
rename to content/blog/2020/05/preview-release-0.21/index.adoc
index 815c736..c87b8a9 100644
--- a/content/news/release-preview-0-21.adoc
+++ b/content/blog/2020/05/preview-release-0.21/index.adoc
@@ -1,6 +1,9 @@
---
title: "Preview Release 0.21"
date: 2020-05-07T12:01:56+02:00
+authors: ["bamaer", "hansva"]
+categories: ["Pre-Release", "Project Hop"]
+preview: "Preview Release 0.21"
draft: false
---
diff --git a/content/news/roundup-2020-05.adoc b/content/blog/2020/05/roundup-2020-05/index.adoc
similarity index 98%
rename from content/news/roundup-2020-05.adoc
rename to content/blog/2020/05/roundup-2020-05/index.adoc
index 0e4e119..85ce11a 100644
--- a/content/news/roundup-2020-05.adoc
+++ b/content/blog/2020/05/roundup-2020-05/index.adoc
@@ -1,6 +1,9 @@
---
title: "Roundup May 2020"
date: 2020-06-02T12:01:56+02:00
+authors: ["bamaer"]
+categories: ["Roundup", "Project Hop"]
+preview: "Round May 2020"
draft: false
---
diff --git a/content/news/roundup-2020-06.adoc b/content/blog/2020/06/roundup-2020-06/index.adoc
similarity index 98%
rename from content/news/roundup-2020-06.adoc
rename to content/blog/2020/06/roundup-2020-06/index.adoc
index 81cfb93..0f0bd63 100644
--- a/content/news/roundup-2020-06.adoc
+++ b/content/blog/2020/06/roundup-2020-06/index.adoc
@@ -1,6 +1,9 @@
---
title: "Roundup June 2020"
date: 2020-06-27T12:01:56+02:00
+authors: ["bamaer"]
+categories: ["Roundup", "Project Hop"]
+preview: "Round June 2020"
draft: false
---
diff --git a/content/news/release-preview-0-30.adoc b/content/blog/2020/07/preview-release-0.30/index.adoc
similarity index 98%
rename from content/news/release-preview-0-30.adoc
rename to content/blog/2020/07/preview-release-0.30/index.adoc
index 20191db..2d519f6 100644
--- a/content/news/release-preview-0-30.adoc
+++ b/content/blog/2020/07/preview-release-0.30/index.adoc
@@ -1,6 +1,9 @@
---
title: "Preview Release 0.30"
-date: 2020-05-07T12:01:56+02:00
+date: 2020-07-21T12:01:56+02:00
+authors: ["bamaer"]
+categories: ["Pre-Releae", "Project Hop"]
+preview: "Preview Release 0.30"
draft: false
---
diff --git a/content/news/roundup-2020-08.adoc b/content/blog/2020/08/roundup-2020-08/index.adoc
similarity index 97%
rename from content/news/roundup-2020-08.adoc
rename to content/blog/2020/08/roundup-2020-08/index.adoc
index 207d15d..015454a 100644
--- a/content/news/roundup-2020-08.adoc
+++ b/content/blog/2020/08/roundup-2020-08/index.adoc
@@ -1,6 +1,9 @@
---
title: "Roundup July, August 2020"
date: 2020-06-27T12:01:56+02:00
+authors: ["bamaer"]
+categories: ["Roundup", "Project Hop"]
+preview: "Round July, August 2020"
draft: false
---
diff --git a/content/news/apache-hop-incubation-proposal-accepted.adoc b/content/blog/2020/10/hop-joins-the-asf/index.adoc
similarity index 93%
rename from content/news/apache-hop-incubation-proposal-accepted.adoc
rename to content/blog/2020/10/hop-joins-the-asf/index.adoc
index 18ffbba..ed93054 100644
--- a/content/news/apache-hop-incubation-proposal-accepted.adoc
+++ b/content/blog/2020/10/hop-joins-the-asf/index.adoc
@@ -1,10 +1,10 @@
---
-title: ""
-date: 2020-09-08T12:01:56+02:00
-draft: false
-:imagesdir: /
+title: "Hop Joins the ASF"
+date: 2020-10-17
+authors: ["bamaer"]
+categories: ["Releases", "ASF", "Apache Hop (Incubating"]
+preview: "Project Hop joins the Apache Software Foundation and becomes Apache Hop (Incubating)."
---
-
## Apache Hop - Incubation Proposal Submitted
From the very start with Hop, we haven't exactly been secretive about our intention to join the https://apache.org[Apache Software Foundation (ASF)] and donate Project Hop to the ASF as Apache Hop.
@@ -41,7 +41,7 @@ Joining the ASF Incubator will be mainly about learning to work the Apache way.
We'll be supported by a champion and a number of mentors to guide us through the entire incubation process.
* **champion**: our champion is https://twitter.com/stadtlegende[Maximilian Michels], who has successfully guided Apache Flink and Apache Beam through the incubation process.
-* mentors: https://twitter.com/julianhyde[Julian Hyde], https://twitter.com/magicaltrout[Tom Barber] and https://github.com/djkevincr[Kevin Ratnasekera] (pending).
+* mentors: https://twitter.com/julianhyde[Julian Hyde], https://twitter.com/magicaltrout[Tom Barber], https://github.com/djkevincr[Kevin Ratnasekera] and https://twitter.com/fpapon2[François Papon].
By joining the ASF, we'll need to move a couple of operational changes. Once we start migrating our infrastructure, we'll provide all the necessary information to update your bookmarks
@@ -62,5 +62,4 @@ The Apache Software Foundation is a decentralized open source community of devel
Among the ASF's objectives are: to provide legal protection to volunteers working on Apache projects; to prevent the Apache brand name from being used by other organizations without permission.
The ASF also holds several ApacheCon conferences each year, highlighting Apache projects and related technology.
-____
-
+____
\ No newline at end of file
diff --git a/content/blog/_index.adoc b/content/blog/_index.adoc
new file mode 100644
index 0000000..ee163da
--- /dev/null
+++ b/content/blog/_index.adoc
@@ -0,0 +1,3 @@
+---
+title: "Blog"
+---
\ No newline at end of file
diff --git a/content/community/mailing-list.adoc b/content/community/mailing-list.adoc
new file mode 100644
index 0000000..87c67ab
--- /dev/null
+++ b/content/community/mailing-list.adoc
@@ -0,0 +1,22 @@
+---
+title: "Mailing Lists"
+---
+
+## Use Hop User List
+
+You should post and subscriber to the Hop User List for all your questions on using Hop, or how to do X with Hop etc. If in doubt use this list.
+The other list, Hop Developer List, is for the Hop team to discus development of the actual Hop project; do not use this list for question on using Hop.
+Again to re-iterate, use the Hop User List, for you Hop questions. This is the correct mailing list, and have the most people there ready for helping you.
+
+## Post plain text mails
+
+When posting to the mailing lists, use plain text mails. Do not use HTML mails. HTML mails is more likely to be targeted as spam mails and will be rejected; as well it's not easily readable by others.
+
+{{< table >}}
+| List Name | Address | Subscribe | Unsubscribe | Archive |Â Comment |
+|------------|---------|-----------|-------------|---------|---------|
+| Hop User List | users@hop.apache.org | [subscribe](mailto:users-subscribe@hop.apache.org) | [unsubscribe](mailto:users-unsubscribe@hop.apache.org) | [Archives](http://mail-archives.apache.org/mod_mbox/hop-users/) | Use this list for your Hop questions. |
+| Hop Developer List | dev@hop.apache.org | [subscribe](mailto:dev-subscribe@hop.apache.org) | [unsubscribe](mailto:dev-unsubscribe@hop.apache.org) | [Archives](http://mail-archives.apache.org/mod_mbox/hop-dev/) | Used by Hop contributors to discuss development of Hop. |
+| Hop Commits List | commits@hop.apache.org | [subscribe](mailto:commits-subscribe@hop.apache.org) | [unsubscribe](mailto:commits-unsubscribe@hop.apache.org) | [Archives](http://mail-archives.apache.org/mod_mbox/hop-commits/) | Notifications on changes to the Hop code |
+| Hop Issues List | issues@hop.apache.org | [subscribe](mailto:issues-subscribe@hop.apache.org) | [unsubscribe](mailto:issues-unsubscribe@hop.apache.org) | [Archives](http://mail-archives.apache.org/mod_mbox/hop-issues/) | Notifications of JIRA issues |
+{{< /table >}}
diff --git a/content/community/sources.adoc b/content/community/sources.adoc
new file mode 100644
index 0000000..6e46785
--- /dev/null
+++ b/content/community/sources.adoc
@@ -0,0 +1,27 @@
+---
+title: "Sources"
+---
+
+##Â Web Browsing of git
+
+To browse via the web:
+
+```
+https://gitbox.apache.org/repos/asf/incubator-hop.git
+```
+
+##Â Checking out from git
+
+```
+git clone https://gitbox.apache.org/repos/asf/incubator-hop.git
+```
+
+Only project developers can commit to the git via this method. SSH must be installed on your client machine. Enter your site password when prompted.
+
+## Using github
+
+The source code is mirrored to github, so you can also checkout the source code from github, if you are familiar with using github. By using github you can submit pull requests to the project using the standard github way.
+
+```
+https://github.com/apache/incubator-hop/
+```
diff --git a/content/community/support.adoc b/content/community/support.adoc
new file mode 100644
index 0000000..21d5ec8
--- /dev/null
+++ b/content/community/support.adoc
@@ -0,0 +1,66 @@
+---
+title: "Support"
+---
+
+## Getting help
+
+If you are experiencing problems using Hop then please report your problem to our mailing list. This allows the entire community to help with your problem.
+If indeed a bug has been identified in the Hop software, then document the problem in our [Issue Tracker](https://issues.apache.org/jira/browse/HOP).
+Please refrain from immediately opening a ticket in the issue tracker unless you are certain it's a problem in the Hop software.
+
+If you are in doubt, we appreciate asking the [mailing list](/community/mailing-list/) or [Mattermost](https://chat.project-hop.org) chat first.
+
+Please read the section below (How to get help), and follow the bullets advised there first:
+
+* [Issue tracker](https://issues.apache.org/jira/browse/HOP)
+* [Q&A](/docs/qa)
+
+### Reporting bugs - Please read this first
+
+We prefer people to get in touch first using the mailing list, or Zulip chat. Or take time to read FAQs, or search in the mailing list archives to find answers.
+Unfortunately some people create a JIRA ticket as first thing. Please don't do that! Only if you are sure it really is a bug etc. JIRA tickets create noise
+for the Hop team to react on issues that are not bugs. But already covered in FAQs, in the mailing lists etc. Or in the existing documentation.
+Also on the mailing lists there is more people active to help you better.
+
+////
+### Alternative discussion forums
+
+There's a number of sites outside Apache that offer discussion forums on Hop. For example, [Stack Overflow](http://stackoverflow.com/) is a popular Q & A site with a dedicated [Apache Hop forum](http://stackoverflow.com/questions/tagged/apache-hop).
+You are also likely to find helpful discussions on technical blogs, on [Google](https://www.google.com/search?q=apache+hop), or even on [Twitter](https://twitter.com/#!/search/apache%hop).
+////
+
+### How to get help
+
+Before you report a problem, you may wish to read the [FAQ](/docs/qa/).
+When you report an issue, please be sure to include as much information as possible. The more we know, the easier it is to reach an effective solution quickly.
+
+*What version do you use*
+
+What version of Hop do you use! Remember to include this information.
+
+* what are the version numbers of involved software components? (this is very important to detail)
+//* what platform and JDK?
+* any particular container being used? and if so, what version?
+* stack traces generally really help! (Remember to post which version of Hop you use, this is important to know when posting stacktraces) If in doubt, include the whole thing; often exceptions get wrapped in other exceptions and the exception right near the bottom explains the actual error, not the first few lines at the top. It's very easy for us to skim-read past unnecessary parts of a stack trace.
+* log output can be useful too; sometimes enabling DEBUG logging can help
+* your code & configuration files are often useful
+* did it work before? what have you changed to break it?
+* try upgrading to the latest release and see if it's fixed there
+* try the latest SNAPSHOT to see if it's fixed in the pre-release
+* search the user forum to see if has been discussed before
+* see the "known issues" section in the release notes
+* and check the issue tracker to see if the issue has already been reported
+* do not send private emails to Hop Team members to ask them to help you faster, or in the private only. Help on Apache Hop is volunteer based and must happen in the open on the public Mailing Lists. If you want to get help faster or in private, then see further below.
+
+### How to get help faster
+
+We can help you much quicker if you try the following
+
+* provide us with a JUnit test case that demonstrates your issue. e.g. if you think you've found a bug, can you create a test case to demonstrate the bug?
+* [submit a patch](/community/contributing/) fixing the bug! (We also buy you beer when we meet you if you submit bug fixes (smile) )
+//* for memory leak or performance related issues, if you can run a profiler on your test case and attach the output as a file (or zipped file if it's huge) to the JIRA we can normally fix things much faster. e.g. you could run jmap/jhat, JProfiler or YourKit on your code and send us the output. To find memory leaks it's quicker to resolve if you can tell us what classes are taking up all of the RAM; we can normally figure out what's wrong from that.
+
+## Commercial Support
+
+This is an open source project, so the amount of time we have available to help resolve your issue is often limited as all help is provided on a volunteer basis.
+//If you want to get priority help, need to get up to speed quickly, require some training or mentoring, or need full 24 x 7 production support you could contact one of the following companies with [Commercial Camel Offerings](/manual/latest/commercial-camel-offerings.html).
diff --git a/layouts/blog/list.html b/layouts/blog/list.html
new file mode 100644
index 0000000..39eb41f
--- /dev/null
+++ b/layouts/blog/list.html
@@ -0,0 +1,80 @@
+{{ partial "header.html" . }}
+
+<div class="body">
+ <div class="toolbar" role="navigation">
+ <button class="nav-toggle">
+ </button>
+ </div>
+ <main role="main" class="nav-container doc blog list">
+ <aside class="nav">
+ <div class="nav-category">
+ <h3>Categories</h3>
+ <ul>
+ {{ range .Site.Taxonomies.categories.Alphabetical }}
+ <li><a class="category"
+ href="{{ "/categories/" | relURL }}{{ .Name | urlize }}/">{{ .Name | upper }}<span>{{ .Count }}</span></a>
+ </li>
+ {{ end }}
+ </ul>
+ </div>
+ </aside>
+ </main>
+ <main role="main" class="doc blog list">
+ <div>
+ {{ $pages := ($.Paginator 3).Pages }}
+ {{ range $pages }}
+ {{ .Render "summary" }}
+ {{ end }}
+
+ {{ $page := .Paginator }}
+ {{ if gt $page.TotalPages 1 }}
+ {{ $shouldEllipse := false }}
+ <nav aria-label="page">
+ <ul class="pagination">
+ {{ if ne $page.PageNumber 1 }}
+ <li class="page-item">
+ <a href="{{ $page.First.URL }}" class="page-link" aria-label="First"><span
+ aria-hidden="true">««</span></a>
+ </li>
+ {{ end }}
+
+ {{ if $page.HasPrev }}
+ <li class="page-item">
+ <a href="{{ $page.Prev.URL }}" class="page-link" aria-label="Previous"><span
+ aria-hidden="true">«</span></a>
+ </li>
+ {{ end }}
+
+ {{ range $page.Pagers }}
+ {{ if eq . $page }}
+ <li class="page-item active"><a href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li>
+ {{ else if and (ge .PageNumber (sub $page.PageNumber 2)) (le .PageNumber (add $page.PageNumber 2)) }}
+ {{ $shouldEllipse = false }}
+ <li class="page-item"><a href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li>
+ {{ else if eq $shouldEllipse false }}
+ {{ $shouldEllipse = true }}
+ <li class="page-item disabled"><a class="page-link">…</a></li>
+ {{ end }}
+ {{ end }}
+
+ {{ if $page.HasNext }}
+ <li class="page-item">
+ <a href="{{ $page.Next.URL }}" class="page-link" aria-label="Next"><span
+ aria-hidden="true">»</span></a>
+ </li>
+ {{ end }}
+
+ {{ if ne $page.PageNumber $page.TotalPages }}
+ <li class="page-item">
+ <a href="{{ $page.Last.URL }}" class="page-link" aria-label="Last"><span
+ aria-hidden="true">»»</span></a>
+ </li>
+ {{ end }}
+ </ul>
+ </nav>
+ {{ end }}
+ </div>
+ </main>
+</div>
+
+{{ partial "footer.html" . }}
diff --git a/layouts/blog/post.html b/layouts/blog/post.html
new file mode 100644
index 0000000..288b14a
--- /dev/null
+++ b/layouts/blog/post.html
@@ -0,0 +1,49 @@
+<article class="blog doc">
+
+ <header>
+ {{ if .Params.categories }}
+ {{ range .Params.categories }}<a class="category"
+ href="{{ "/categories/" | relURL }}{{ . | urlize }}/">{{ upper . }}</a>{{ end }}
+ {{ end }}
+ <h1>{{ .Title }}</h1>
+ </header>
+ <div class="post">
+ <aside>
+ <div class="summary">{{ .Params.preview }}</div>
+ Posted on <time itemprop="published" datetime="{{ dateFormat "2006-01-02" .PublishDate }}"
+ title="{{ dateFormat "Monday, January 2, 2006" .PublishDate }}">{{ dateFormat "January 2, 2006" .PublishDate }}</time>,
+ by {{ range $author := .Params.authors }}
+ {{ with getJSON "https://api.github.com/users/" $author }}
+ <figure>
+ <img src="{{ .avatar_url }}" alt="{{ .name }}">
+ <figcaption rel="author">{{ .name }}</figcaption>
+ </figure>
+ {{ end }}
+ {{ end }}
+ <p>
+ {{ if .PrevInSection }}
+ <a class="arrow prev" href="{{ .PrevInSection.RelPermalink }}"
+ title="Previous post: {{ .PrevInSection.Title }}">❮</a>
+ {{ end }}
+ {{ if .NextInSection }}
+ <a class="arrow next" href="{{ .NextInSection.RelPermalink }}"
+ title="Next post: {{ .NextInSection.Title }}">❯</a>
+ {{ end }}
+ </p>
+ </aside>
+ <div class="post-content">
+ {{ $featured := (.Resources.ByType "image").GetMatch "*featured*" }}
+ {{ with $featured }}
+ {{ if ne $featured.MediaType.SubType "svg" }}
+ {{ $featured := .Resize "800x q95 Gaussian" }}
+ <img class="featured" alt="Blog post featured image" src="{{ $featured.RelPermalink }}"
+ width="{{ $featured.Width }}" height="{{ $featured.Height }}">
+ {{ else }}
+ <img class="featured" alt="Blog post featured image" src="{{ $featured.RelPermalink }}" width="800">
+ {{ end }}
+ {{ end }}
+ {{ .Content }}
+ </div>
+ </div>
+
+</article>
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
new file mode 100644
index 0000000..e5b7fbc
--- /dev/null
+++ b/layouts/blog/single.html
@@ -0,0 +1,9 @@
+{{ partial "header.html" . }}
+
+<div class="body">
+ <main role="main blog">
+ {{ .Render "post" }}
+ </main>
+</div>
+
+{{ partial "footer.html" . }}
diff --git a/layouts/blog/summary.html b/layouts/blog/summary.html
new file mode 100644
index 0000000..edb1ea9
--- /dev/null
+++ b/layouts/blog/summary.html
@@ -0,0 +1,15 @@
+<article class="blog doc">
+
+ <header>
+ <h1>{{ .Title }}</h1>
+ </header>
+ <p>{{ .Summary }}</p>
+ <p><a class="continue" href="{{ .RelPermalink }}">Continue reading ❯</a></p>
+ <p>
+ {{ if .Params.categories }}
+ {{ range .Params.categories }}<a class="category" href="{{ "/categories/" | relURL }}{{ . | urlize }}/">{{ upper . }}</a>{{ end }}
+ {{end}}
+ ⸱ <time itemprop="published" datetime="{{ dateFormat "2006-01-02" .PublishDate }}" title="{{ dateFormat "Monday, January 2, 2006" .PublishDate }}">{{ dateFormat "January 2, 2006" .PublishDate }}</time> ⸱ {{ range $idx, $author := .Params.authors }}{{ if gt $idx 0 }}, {{ end }}<span rel="author">{{ (getJSON "https://api.github.com/users/" $author).name }}</span>{{ end }}
+ </p>
+
+</article>
diff --git a/layouts/index.html b/layouts/index.html
index fa11104..0683b33 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,12 +1,48 @@
{{ partial "header.html" . }}
<header class="frontpage">
- <h1>Hop Orchestration Platform</h1>
- <p>The Hop Orchestration Platform aims to facilitate all aspects of data and metadata orchestration.</p>
- <tr><td><a class="significant" href="./manual/latest/getting-started.html">Get started</a></td></tr>
+ <div class="main-heading">
+ <h1>Apache Hop</h1>
+ <p>The <b>H</b>op <b>O</b>rchestration <b>P</b>latform, or Apache Hop (Incubating), aims to facilitate all aspects of data and metadata orchestration.</p>
+ <p>Hop is an entirely new open source data integration platform that is easy to use, fast and flexible</p>
+ <p>Hop aims to be the future of data integration. <b>Visual development</b> enables developers to be more productive than they can be through code.
+ Our <b>Design once, run anywhere</b> workflows and pipelines can be designed in te Hop Gui and run on the Hop native engine (local or remote), or on Spark, Flink, Google Dataflow or AWS EMR through Beam.
+ <b>Lifecycle Management</b> enables developers and administrators to switch between projects, environments and purposes without leaving your train of thought.
+ </p>
+ <p><a class="button-dark" href="./manual/latest/getting-started.html">Get started</a></p>
+ </div>
+ <img src="./img/hop-logo.svg" alt="Apache Hop (Incubating) - Hop Orchestration Platform">
</header>
-{{ .Content }}
+<div class="frontpage news">
+ <h2>What's New?</h2>
+</div>
+
+<section class="frontpage columns blog-posts">
+ <ul>
+ {{with .Site.GetPage "section" "blog"}}
+ {{range .Pages | first 3}}
+ <li class="blog-post">
+ <time datetime="{{ dateFormat "2006-01-02" .PublishDate }}" class="date">
+ <data class="day">
+ {{ dateFormat "2" .PublishDate }}
+ </data>
+ <data class="month">
+ {{ dateFormat "Jan" .PublishDate }}
+ {{ dateFormat "2006" .PublishDate }}
+ </data>
+ </time>
+ <div class="content">
+ <h2>{{ .Title }}</h2>
+ <p>{{ .Params.preview }}... <a href="{{ .Permalink }}">Read More</a></p>
+ </div>
+ </li>
+ {{end}}
+ {{end}}
+ </ul>
+</section>
+
+{{ .Content }}
{{ partial "footer.html" . }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index df346b0..15b6714 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,4 +1,9 @@
- <div class="edit"><a title="We would love your help ♥♥♥" href="https://github.com/apache/incubator-hop-website/edit/master/content/{{ .File.Path | replaceRE "^/" "" }}">Edit this Page</a></div>
+<div class="footer-tools">
+ {{ with .File }}
+ <a title="Improve this document, receive free virtual hugs ♥" href="https://github.com/apache/incubator-hop-website/edit/master/content/{{ .Path | replaceRE "^/" "" }}">Edit this Page</a>
+ {{ end }}
+ <a href="#top" title="Reach the top of the page">Back to top</a>
+</div>
<footer>
<div class="footer">
<dl>
@@ -17,9 +22,9 @@
<dd><a target="_blank" href="https://www.apache.org/licenses/" title="License">License</a></dd>
</dl>
<p>
- © 2019-{{ now.Format "2006" }} The Hop Team.<br>
- All marks mentioned may be trademarks or registered trademarks of their respective owners.
- </p>
+ © 2019-{{ now.Format "2006" }} <a href="http://www.apache.org/" target="blank">The Apache Software Fountation</a>, Licensed under the Apache <a href="https://apache.org/licenses/LICENSE-2.0" target="blank">License</a>.<br>
+ Disclaimer: Apache Hop is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indic [...]
+ Apache Hop, Apache, Hop, the Hop logo, and the Apache feather logo are either registered trademarks or trademarks of The Apache Software Foundation. All other products or name brands are trademarks of their respective holders, including The Apache Software Foundation.</p>
</div>
</footer>
<script src="{{ path.Join "_" (index .Site.Data "rev-manifest" "js/site.js") | relURL }}"></script>
diff --git a/site.yml b/site.yml
index 9593150..2c2d0b6 100644
--- a/site.yml
+++ b/site.yml
@@ -7,13 +7,13 @@ site:
content:
sources:
- - url: git@github.com:apache/incubator-hop-docs.git
+ - url: git@github.com:project-hop/hop-doc.git
branches: master
start_path: /hop-user-manual/
- - url: git@github.com:apache/incubator-hop-docs.git
+ - url: git@github.com:project-hop/hop-doc.git
branches: master
start_path: /hop-tech-manual/
- - url: git@github.com:apache/incubator-hop-docs.git
+ - url: git@github.com:project-hop/hop-doc.git
branches: master
start_path: /hop-dev-manual/
diff --git a/static/img/GenericTransform.svg b/static/img/GenericTransform.svg
new file mode 100644
index 0000000..9198f10
--- /dev/null
+++ b/static/img/GenericTransform.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="42px" height="42px" viewBox="0 0 42 42" enable-background="new 0 0 42 42" xml:space="preserve">
+<g>
+ <path fill="none" d="M25.045,31.057h-1.699v-7.528h7.527v1.699h-4.627l5.37,5.371c2.303-2.544,3.719-5.905,3.719-9.598
+ c0-3.693-1.416-7.054-3.718-9.598l-5.37,5.37h4.626v1.7h-7.527v-7.529h1.699v4.627l5.361-5.362C27.886,8.009,24.6,6.665,21,6.665
+ c-3.6,0-6.886,1.344-9.406,3.544l5.361,5.361v-4.626h1.7v7.529h-7.528v-1.7h4.626l-5.37-5.37C8.081,13.946,6.665,17.307,6.665,21
+ c0,3.693,1.416,7.054,3.719,9.598l5.37-5.371h-4.627v-1.699h7.528v7.528h-1.7V26.43l-5.361,5.361
+ c2.521,2.2,5.806,3.544,9.406,3.544c3.6,0,6.886-1.344,9.406-3.544l-5.361-5.362V31.057z"/>
+ <path fill="#3D6480" d="M36.136,21c0-3.914-1.506-7.474-3.953-10.164l2.17-2.17l-1.201-1.202l-2.18,2.18
+ C28.305,7.299,24.821,5.865,21,5.865c-3.821,0-7.305,1.434-9.971,3.778l-2.179-2.18L7.647,8.666l2.171,2.171
+ C7.371,13.526,5.865,17.086,5.865,21c0,3.914,1.506,7.474,3.953,10.164l-2.171,2.171l1.202,1.201l2.179-2.179
+ c2.666,2.344,6.151,3.779,9.972,3.779c3.821,0,7.306-1.435,9.972-3.779l2.179,2.179l1.201-1.201l-2.17-2.171
+ C34.629,28.475,36.136,24.914,36.136,21z M21,35.335c-3.6,0-6.886-1.344-9.406-3.544l5.361-5.361v4.627h1.7v-7.528h-7.528v1.699
+ h4.627l-5.37,5.371C8.081,28.054,6.665,24.693,6.665,21c0-3.693,1.416-7.054,3.718-9.598l5.37,5.37h-4.626v1.7h7.528v-7.529h-1.7
+ v4.626l-5.361-5.361c2.52-2.2,5.806-3.544,9.406-3.544c3.6,0,6.886,1.344,9.406,3.544l-5.361,5.362v-4.627h-1.699v7.529h7.527v-1.7
+ h-4.626l5.37-5.37c2.302,2.544,3.718,5.905,3.718,9.598c0,3.694-1.416,7.054-3.719,9.598l-5.37-5.371h4.627v-1.699h-7.527v7.528
+ h1.699v-4.628l5.361,5.362C27.886,33.991,24.6,35.335,21,35.335z"/>
+</g>
+</svg>
diff --git a/static/img/apache-20.png b/static/img/apache-20.png
new file mode 100644
index 0000000..66a980e
Binary files /dev/null and b/static/img/apache-20.png differ
diff --git a/static/img/beam-logo.svg b/static/img/beam-logo.svg
new file mode 100644
index 0000000..86d0033
--- /dev/null
+++ b/static/img/beam-logo.svg
@@ -0,0 +1,19 @@
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements. See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership. The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied. See the License for the
+ specific language governing permissions and limitations
+ under the License.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 114.07453 153.42"><defs><style>.cls-1{isolation:isolate;}.cls-2{opacity:0.15;}.cls-12,.cls-19,.cls-2{mix-blend-mode:multiply;}.cls-3{fill:url(#linear-gradient);}.cls-16,.cls-17,.cls-4,.cls-9{fill:#fff;}.cls-5{fill:#fee900;}.cls-6{fill:url(#linear-gradient-2);}.cls-7{fill:url(#linear-gradient-3);}.cls-8{opacity:0.65;fill:url(#linear-gradient-4);}.cls-9{opacity:0.9;}.cls-10,.cls-11{opacity:0.75; [...]
diff --git a/static/img/cycle.svg b/static/img/cycle.svg
new file mode 100644
index 0000000..81be464
--- /dev/null
+++ b/static/img/cycle.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 533.33331 533" style="enable-background:new 0 0 512 512" xml:space="preserve"><g><link type="text/css" rel="stylesheet" id="dark-mode-general-link"/><link type="text/css" rel="stylesheet" id="dark-mode-custom-link"/><style type="text/css" id="dark-mode-custom-style"/><path xmlns="http://www.w3.org/2000/svg" [...]
diff --git a/static/img/eyeglasses.svg b/static/img/eyeglasses.svg
new file mode 100644
index 0000000..1ef6407
--- /dev/null
+++ b/static/img/eyeglasses.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 60 60" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><link type="text/css" rel="stylesheet" id="dark-mode-general-link"/><link type="text/css" rel="stylesheet" id="dark-mode-custom-link"/><style type="text/css" id="dark-mode-custom-style"/>
+<path xmlns="http://www.w3.org/2000/svg" d="M59,28h-2.18c-0.951-5.666-5.85-10-11.748-10c-5.822,0-10.696,4.119-11.825,9.579c-0.971-0.814-2.079-1.246-3.247-1.246 c-1.167,0-2.274,0.432-3.245,1.245C25.639,22.118,20.825,18,15.072,18C8.756,18,3.565,22.851,3.051,29H1c-0.553,0-1,0.448-1,1 s0.447,1,1,1h2.051c0.514,6.149,5.705,11,12.021,11c6.467,0,11.736-5.207,11.911-11.671c0.853-1.285,1.915-1.996,3.017-1.996 c1.102,0,2.164,0.712,3.017,1.996C33.195,36.793,38.528,42,45.072,42C51.649,42,57,36.617 [...]
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+</g></svg>
diff --git a/static/img/hop-logo.svg b/static/img/hop-logo.svg
new file mode 100644
index 0000000..8913b96
--- /dev/null
+++ b/static/img/hop-logo.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="Livello_1"
+ x="0px"
+ y="0px"
+ width="440.00003"
+ height="506.47379"
+ viewBox="0 0 440.00003 506.47376"
+ enable-background="new 0 0 419.53 595.28"
+ xml:space="preserve"
+ sodipodi:docname="hop-logo.svg"
+ inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"><metadata
+ id="metadata9"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+ id="defs7" /><sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1821"
+ inkscape:window-height="1708"
+ id="namedview5"
+ showgrid="false"
+ inkscape:zoom="1.6664426"
+ inkscape:cx="209.765"
+ inkscape:cy="297.64001"
+ inkscape:window-x="8259"
+ inkscape:window-y="49"
+ inkscape:window-maximized="0"
+ inkscape:current-layer="Livello_1"
+ fit-margin-top="0"
+ fit-margin-left="0"
+ fit-margin-right="0"
+ fit-margin-bottom="0" />
+<path
+ fill="#0e3a5a"
+ d="m 183.36503,200.61519 c -11.86432,12.89396 -19.46245,31.04416 -22.7926,54.44518 l -16.1611,113.54358 c -3.33015,23.40462 -0.89644,41.54942 7.29751,54.44338 3.13574,4.77921 8.20476,9.43602 15.20347,13.97042 6.99331,4.53799 16.81814,6.80429 29.47809,6.80429 12.89397,0 23.42443,-2.2663 31.59319,-6.80429 8.16696,-4.5344 14.49963,-9.19121 19.00163,-13.97042 11.86612,-12.89396 19.46245,-31.03876 22.7908,-54.44338 l 16.16111,-113.54358 c 3.33015,-23.40102 0.90004,-41.55122 -7.29572,-54.44 [...]
+ id="path2"
+ style="stroke-width:1.80008" />
+</svg>
diff --git a/static/img/incubator_power_ring_hop.jpg b/static/img/incubator_power_ring_hop.jpg
new file mode 100644
index 0000000..bad7aac
Binary files /dev/null and b/static/img/incubator_power_ring_hop.jpg differ
diff --git a/static/img/incubator_power_ring_hop_500x500.jpg b/static/img/incubator_power_ring_hop_500x500.jpg
new file mode 100644
index 0000000..5ca765e
Binary files /dev/null and b/static/img/incubator_power_ring_hop_500x500.jpg differ