You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pulsar.apache.org by ur...@apache.org on 2022/04/15 01:29:07 UTC
[pulsar-site] branch main updated: navigation update
This is an automated email from the ASF dual-hosted git repository.
urfree pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/pulsar-site.git
The following commit(s) were added to refs/heads/main by this push:
new c4e8ae350e navigation update
new 6ec88c1ed0 Merge pull request #49 from Paul-TT/paul-tt-website-new
c4e8ae350e is described below
commit c4e8ae350e321f59ddb836e85506750c07607bb5
Author: Paul Thomas Au <pa...@traverstodd.com>
AuthorDate: Thu Apr 14 13:23:41 2022 -0700
navigation update
---
site2/website-next/docusaurus.config.js | 6 +++
site2/website-next/src/css/custom.css | 16 ++++--
site2/website-next/src/pages/community.js | 62 +++++++++++-----------
.../website-next/static/img/github-bg-hovered.svg | 9 ++++
site2/website-next/static/img/github-bg.svg | 9 ++++
5 files changed, 69 insertions(+), 33 deletions(-)
diff --git a/site2/website-next/docusaurus.config.js b/site2/website-next/docusaurus.config.js
index 50bd0c7650..165a7f095a 100644
--- a/site2/website-next/docusaurus.config.js
+++ b/site2/website-next/docusaurus.config.js
@@ -255,6 +255,12 @@ module.exports = {
position: "right",
className: "download-btn pill-btn",
},
+ {
+ href: "https://github.com/apache/pulsar",
+ label: "Github",
+ position: "right",
+ className: "github-nav",
+ },
],
},
footer: {
diff --git a/site2/website-next/src/css/custom.css b/site2/website-next/src/css/custom.css
index dca9083ca7..697d790825 100644
--- a/site2/website-next/src/css/custom.css
+++ b/site2/website-next/src/css/custom.css
@@ -190,8 +190,11 @@ html[data-theme="dark"] .navbar-sidebar {
.dropdown__link--active {
background-color: transparent;
}
-.community-dropdown ~ .dropdown__menu .dropdown__link--active{color: #1c1e21;}
-.community-dropdown ~ .dropdown__menu .dropdown__link--active.active-section {color: var(--ifm-navbar-link-hover-color);}
+.github-nav.navbar__link{ color: transparent; font-size: 0px;}
+.github-nav::before {content: url('@site/static/img/github-bg.svg');}
+.github-nav.navbar__link:hover::before {content: url('@site/static/img/github-bg-hovered.svg');}
+
+.community-dropdown ~ .dropdown__menu .dropdown__link--active, .dropdown__link.navbar__link--active{color: #1c1e21;}
.navbar__link svg {
display: none;
}
@@ -199,6 +202,7 @@ div[class^="searchBox_"] {
position: absolute;
top: 0;
}
+
.DocSearch-Button {
border: 1px solid #198fff !important;
}
@@ -275,6 +279,12 @@ div[class^="searchBox_"] {
}
.docs-wrapper.docs-doc-page .main-wrapper aside {border: none; z-index: 1;}
.docs-wrapper.docs-doc-page .main-wrapper aside nav.menu {border-right: 1px solid var(--ifm-toc-border-color)}
+.docs-doc-page h1,.docs-doc-page .markdown h1:first-child {font-size: 24px; margin-bottom: 20px;}
+.docs-doc-page h2 {font-size: 20px; margin-top: 0px; margin-bottom: 15px;}
+.docs-doc-page h3 {font-size: 18px;}
+.docs-doc-page h4 {font-size: 16px;}
+.docs-doc-page p {font-size: 14px; line-height: 1.3em;}
+.docs-doc-page .markdown li {font-size: 14px;}
.waves-bg:before,.waves-bg:after,.mdx-wrapper.mdx-page .main-wrapper:after {
z-index: 0;
content: '';
@@ -687,7 +697,7 @@ html[data-theme="dark"] .featured-card--inner {background-color: rgba(34, 34, 34
z-index: 1;
}
-
+table tr:nth-child(2n) {background-color: #fff;;}
.blog-wrapper .main-wrapper.blog-list-page::before {
content: 'Pulsar Blog';
position: relative;
diff --git a/site2/website-next/src/pages/community.js b/site2/website-next/src/pages/community.js
index be0b6bf8db..cb12ccb52d 100644
--- a/site2/website-next/src/pages/community.js
+++ b/site2/website-next/src/pages/community.js
@@ -11,7 +11,7 @@ import WavySeparatorSix from '@site/static/img/separator-6.svg';
import { pageUrl } from "@site/src/utils/index";
const teamObj = require("../../data/team.js");
export default function Community(props) {
-
+
// Images in this array are used in the carousel
const slidesArr = [
{
@@ -23,7 +23,7 @@ export default function Community(props) {
alt: 'community photo 2'
},
{
- img: useBaseUrl('/img/community-image-2.jpg'),
+ img: useBaseUrl('/img/community-image-3.jpg'),
alt: 'community photo 3'
},
];
@@ -46,7 +46,7 @@ export default function Community(props) {
const sections = document.querySelectorAll(".scrollable");
const links = document.querySelectorAll(".scroll-link");
var observer = new IntersectionObserver(
- function (entries, observer) {
+ function (entries) {
if (entries[0].isIntersecting === true) {
let id = entries[0].target.id;
let target = 'scroll-'+id;
@@ -59,7 +59,7 @@ export default function Community(props) {
}
}
},
- { threshold: [ 0.1 ] }
+ { threshold: [ 0.5 ] }
);
sections.forEach(s => {
observer.observe(document.getElementById(s.id));
@@ -67,23 +67,7 @@ export default function Community(props) {
// This code runs the image carousel
const slides = document.querySelectorAll('.slide-image');
- const allDots = document.getElementsByClassName('dot');
- var showSlide = function() {
- let id = this.getAttribute("id");
- let slideId = id.replace('dot', 'slide');
- let target = document.getElementById(slideId);
- var active = document.querySelector('.active-slide');
- var activeDot = document.querySelector('.active-dot');
- active.classList.remove('active-slide');
- activeDot.classList.remove('active-dot');
- this.classList.add('active-dot');
- target.classList.add('active-slide');
- clearInterval(interval);
- };
- for (var i = 0; i < allDots.length; i++) {
- allDots[i].addEventListener('click', showSlide, false);
- }
-
+ const allDots = document.getElementsByClassName('dot');
const firstSlide = document.getElementById('slide-0');
const firstDot = document.getElementById('dot-0');
firstSlide.classList.add('active-slide');
@@ -114,7 +98,27 @@ export default function Community(props) {
cycleSlides();
}, intervalTime);
};
+
slideInterval();
+
+ // if you click on on a pagination dot
+ var showSlide = function() {
+ let id = this.getAttribute("id");
+ let slideId = id.replace('dot', 'slide');
+ let target = document.getElementById(slideId);
+ var active = document.querySelector('.active-slide');
+ var activeDot = document.querySelector('.active-dot');
+ active.classList.remove('active-slide');
+ activeDot.classList.remove('active-dot');
+ this.classList.add('active-dot');
+ target.classList.add('active-slide');
+ // stops the interval when someone clicks on a dot.
+ clearInterval(interval);
+ };
+ for (var i = 0; i < allDots.length; i++) {
+ allDots[i].addEventListener('click', showSlide, false);
+ }
+
// cleanup required or interval will continue to run, even on other pages
return function cleanup() {
clearInterval(interval);
@@ -154,21 +158,19 @@ export default function Community(props) {
{/*
NOTE: add images to the slidesArr array above to include the in the image carousel.
*/}
- {slidesArr.map((s,i) =>
- (() => {
+ {slidesArr.map((s, i) => {
return(
<img id={`slide-${i}`} key={i} className="slide-image" src={s.img} alt={s.alt} />
)
- })()
+ }
)}
</div>
- <div className="pagination">
- {slidesArr.map((d,i) =>
- (() => {
- return(
- <div id={`dot-${i}`} key={i} className="dot"></div>
+ <div className="pagination">
+ {slidesArr.map((d, i) => {
+ return(
+ <div id={`dot-${i}`} key={i} className="dot"></div>
)
- })()
+ }
)}
</div>
</div>
diff --git a/site2/website-next/static/img/github-bg-hovered.svg b/site2/website-next/static/img/github-bg-hovered.svg
new file mode 100644
index 0000000000..c750a88871
--- /dev/null
+++ b/site2/website-next/static/img/github-bg-hovered.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="33px" height="33px" viewBox="0 0 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Fill 4</title>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="GitHub-Mark" transform="translate(-136.000000, -55.000000)" fill="#0E65B6">
+ <path d="M136.32,71.745 C136.32,78.942 140.987,85.047 147.46,87.201 C148.275,87.351 148.572,86.848 148.572,86.416 C148.572,86.03 148.558,85.005 148.55,83.646 C144.019,84.63 143.063,81.462 143.063,81.462 C142.322,79.58 141.254,79.079 141.254,79.079 C139.775,78.069 141.366,78.089 141.366,78.089 C143.001,78.204 143.861,79.768 143.861,79.768 C145.314,82.257 147.674,81.538 148.602,81.121 C148.75,80.069 149.171,79.351 149.636,78.944 C146.019,78.533 142.216,77.135 142.216,70.893 C14 [...]
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/site2/website-next/static/img/github-bg.svg b/site2/website-next/static/img/github-bg.svg
new file mode 100644
index 0000000000..3c98c3e107
--- /dev/null
+++ b/site2/website-next/static/img/github-bg.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="33px" height="33px" viewBox="0 0 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Fill 4</title>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="GitHub-Mark" transform="translate(-136.000000, -55.000000)" fill="#198FFF">
+ <path d="M136.32,71.745 C136.32,78.942 140.987,85.047 147.46,87.201 C148.275,87.351 148.572,86.848 148.572,86.416 C148.572,86.03 148.558,85.005 148.55,83.646 C144.019,84.63 143.063,81.462 143.063,81.462 C142.322,79.58 141.254,79.079 141.254,79.079 C139.775,78.069 141.366,78.089 141.366,78.089 C143.001,78.204 143.861,79.768 143.861,79.768 C145.314,82.257 147.674,81.538 148.602,81.121 C148.75,80.069 149.171,79.351 149.636,78.944 C146.019,78.533 142.216,77.135 142.216,70.893 C14 [...]
+ </g>
+ </g>
+</svg>
\ No newline at end of file