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/01 06:07:20 UTC
[pulsar-site] branch main updated: Fixing broken styles
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 c91d48e4 Fixing broken styles
new 2d5f1bd Merge pull request #43 from Paul-TT/paul-tt-website-new
c91d48e4 is described below
commit c91d48e4df22b282bcfed9f7c4e4aa26b30d50c2
Author: Paul Thomas Au <pa...@traverstodd.com>
AuthorDate: Thu Mar 31 09:21:49 2022 -0700
Fixing broken styles
---
site2/website-next/data/ecosystem.js | 8 +--
site2/website-next/docusaurus.config.js | 21 ++++--
site2/website-next/src/components/EcoCards.js | 3 +-
site2/website-next/src/css/custom.css | 92 ++++++++++++++-------------
site2/website-next/src/pages/community.js | 37 +++++++++--
site2/website-next/src/pages/contributing.md | 2 +
site2/website-next/src/pages/ecosystem.js | 16 +++--
site2/website-next/src/utils/index.js | 1 +
8 files changed, 115 insertions(+), 65 deletions(-)
diff --git a/site2/website-next/data/ecosystem.js b/site2/website-next/data/ecosystem.js
index 1179f11..b2bd5c4 100644
--- a/site2/website-next/data/ecosystem.js
+++ b/site2/website-next/data/ecosystem.js
@@ -1,8 +1,8 @@
module.exports = {
- connectors: [{
+ connector: [{
name: 'ActiveMQ Sink',
description: 'The ActiveMQ sink connector pulls messages from Pulsar topics and persist messages to ActiveMQ clusters.',
- link: 'https://hub.streamnative.io/connectors/activemq-sink/2.5.1/'
+ link: 'https://hub.streamnative.io/connectors/activemq-sink/2.5.1/',
},
{
name: 'ActiveMQ Source',
@@ -350,7 +350,7 @@ module.exports = {
link: 'https://github.com/apache/flink/tree/master/flink-connectors/flink-connector-pulsar'
}
],
- tools: [{
+ tool: [{
name: 'DataStax CDC for Apache Cassandra',
description: 'Send Apache Cassandra mutations for tables having Change Data Capture (CDC) enabled to Luna Streaming or Apache Pulsar™, which in turn can write the data to platforms such as Elasticsearch® or Snowflake®.',
link: 'https://github.com/datastax/cdc-apache-cassandra'
@@ -386,7 +386,7 @@ module.exports = {
link: 'https://github.com/apache/pulsar-manager'
}
],
- adapters: [{
+ adapter: [{
name: 'Pulsar Client Kafka Compatible',
description: '',
link: 'https://github.com/apache/pulsar-adapters/tree/master/pulsar-client-kafka-compat'
diff --git a/site2/website-next/docusaurus.config.js b/site2/website-next/docusaurus.config.js
index f74e3ee..02da815 100644
--- a/site2/website-next/docusaurus.config.js
+++ b/site2/website-next/docusaurus.config.js
@@ -156,26 +156,37 @@ module.exports = {
type: "dropdown",
label: "Community",
position: "right",
+ className: 'community-dropdown',
items: [
{
- to: "/community#welcome",
+ to: "/community#section-welcome",
label: "Welcome",
+ className: 'scroll-link scroll-welcome',
+ id: 'scroll-welcome'
},
{
- to: "/community#discussions",
+ to: "/community#section-discussions",
label: "Discussions",
+ className: 'scroll-link scroll-discussions',
+ id: 'scroll-discussions'
},
{
- to: "/community#governance",
+ to: "/community#section-governance",
label: "Governance",
+ className: 'scroll-link',
+ id: 'scroll-governance'
},
{
- to: "/community#community",
+ to: "/community#section-community",
label: "Meet the Community",
+ className: 'scroll-link',
+ id: 'scroll-community'
},
{
- to: "/community#how-to-contribute",
+ to: "/community#section-contribute",
label: "Contribute",
+ className: 'scroll-link',
+ id: 'scroll-contribute'
},
{
to: "https://github.com/apache/pulsar/wiki",
diff --git a/site2/website-next/src/components/EcoCards.js b/site2/website-next/src/components/EcoCards.js
index 7f9ec5b..ed1b50a 100644
--- a/site2/website-next/src/components/EcoCards.js
+++ b/site2/website-next/src/components/EcoCards.js
@@ -7,8 +7,7 @@ export default function EcoCards(props) {
const filteredRes = ecoList.filter((r)=>{
return (r.name && r.name.toLowerCase().includes(searchString.toLowerCase())) || (r.description && r.description.toLowerCase().includes(searchString.toLowerCase()));
});
- const type = props.type;
- function ResCard({ name, description, link }) {
+ function ResCard({ name, description, link, type }) {
return (
<div className="mb-4 sm:mb-0 resource-card type-resource bg-white p-6 shadow-lg relative flex flex-col">
diff --git a/site2/website-next/src/css/custom.css b/site2/website-next/src/css/custom.css
index 94ea04f..cdf6cad 100644
--- a/site2/website-next/src/css/custom.css
+++ b/site2/website-next/src/css/custom.css
@@ -135,8 +135,9 @@ html[data-theme="dark"] .navbar-sidebar {
line-height: 1.2em;
}
-.mdx-wrapper.mdx-page .container{max-width: 880px;}
-.main-wrapper:not(.docs-doc-page):not(.mdx-page) blockquote {
+.mdx-wrapper.mdx-page .container{max-width: 880px; z-index: 1; position: relative;;}
+
+.plugin-page .main-wrapper blockquote {
font-size: 24px;
line-height: 1.5em;
padding-left: 75px;
@@ -144,13 +145,14 @@ html[data-theme="dark"] .navbar-sidebar {
position: relative;
border: none;
}
-.main-wrapper:not(.docs-doc-page):not(.mdx-page) blockquote::before, .main-wrapper:not(.docs-doc-page):not(.mdx-page) blockquote::after {
+
+.plugin-page .main-wrapper blockquote::before, .plugin-page .main-wrapper blockquote::after {
width: 124px;
height: 100px;
background-size: cover;
opacity: .3;
}
-.main-wrapper:not(.docs-doc-page):not(.mdx-page) blockquote::before {
+.plugin-page .main-wrapper blockquote::before {
content:'';
background-image:url('@site/static/img/left-double-quotes.svg');
position: absolute;
@@ -158,7 +160,7 @@ html[data-theme="dark"] .navbar-sidebar {
top:0;
transform: translateY(-30px);
}
-.main-wrapper:not(.docs-doc-page):not(.mdx-page) blockquote::after {
+.plugin-page .main-wrapper blockquote::after {
content:'';
background-image:url('@site/static/img/right-double-quotes.svg');
position: absolute;
@@ -188,6 +190,8 @@ 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);}
.navbar__link svg {
display: none;
}
@@ -263,15 +267,15 @@ div[class^="searchBox_"] {
.waves-bg {
position: relative;
}
-.docs-wrapper.docs-doc-page {
+.docs-wrapper.docs-doc-page .main-wrapper {
position: relative;
padding-top: 4rem;
padding-bottom: 24rem;
margin-bottom: 12rem;
}
-.docs-wrapper.docs-doc-page aside {border: none;}
-.docs-wrapper.docs-doc-page aside nav.menu {border-right: 1px solid var(--ifm-toc-border-color)}
-.waves-bg:before,.waves-bg:after,.mdx-wrapper.mdx-page:after {
+.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)}
+.waves-bg:before,.waves-bg:after,.mdx-wrapper.mdx-page .main-wrapper:after {
z-index: 0;
content: '';
position: absolute;
@@ -284,20 +288,20 @@ div[class^="searchBox_"] {
background-image: url('@site/static/img/feature-waves-top.png');
max-height: 600px;
}
-.blog-wrapper.blog-list-page:after {
+.blog-wrapper .main-wrapper.blog-list-page.main-wrapper:after {
top: 200px;
}
.blog-post-page article {
padding: 0 20px;
}
-.mdx-page header {
+.mdx-page .main-wrapper header {
position: relative;
padding: 50px 0 120px;
display: flex;
align-items: center;
margin-bottom: 100px;
}
-.mdx-page header:after{
+.mdx-page .main-wrapper header:after{
z-index: -1;
content: '';
position: absolute;
@@ -310,13 +314,13 @@ div[class^="searchBox_"] {
background-image: url('@site/static/img/feature-waves-top.png');
max-height: 600px;
}
-.mdx-wrapper.mdx-page:after {
+.mdx-wrapper.mdx-page .main-wrapper:after {
background-image: url('@site/static/img/feature-waves-btm.png');
top: auto;
}
-.main-wrapper.mdx-wrapper.mdx-page {position: relative; padding-bottom: 200px; margin-bottom: 100px;}
-.docs-wrapper.docs-doc-page:after {
- z-index: -1;
+.mdx-wrapper.mdx-page .main-wrapper {position: relative; padding-bottom: 200px; margin-bottom: 100px;}
+.docs-wrapper.docs-doc-page .main-wrapper:after {
+ z-index: 0;
content: '';
position: absolute;
width: 100%;
@@ -325,7 +329,7 @@ div[class^="searchBox_"] {
background-repeat: no-repeat;
max-height: 600px;
}
-.waves-bg:after, .docs-wrapper.docs-doc-page:after,.main-wrapper.mdx-wrapper.mdx-page:after {
+.waves-bg:after, .docs-wrapper.docs-doc-page .main-wrapper:after,.mdx-wrapper.mdx-page .main-wrapper:after {
top:auto;
bottom: 0;
left:0;
@@ -413,7 +417,7 @@ article .tag_node_modules-\@docusaurus-theme-classic-lib-next-theme-Tag-styles-m
background-color: var(--ifm-color-primary);
}
-.tailwind .secondary-cta, .TabsUnstyled-horizontal button, .blog-wrapper article footer .col.text--right a{
+.tailwind .secondary-cta, .TabsUnstyled-horizontal button, .blog-wrapper .main-wrapper article footer .col.text--right a{
font-weight: bold;
color: var(--ifm-footer-background-color);
z-index: 1;
@@ -424,7 +428,7 @@ article .tag_node_modules-\@docusaurus-theme-classic-lib-next-theme-Tag-styles-m
}
/* dark theme */
-html[data-theme="dark"] .tailwind .secondary-cta,html[data-theme="dark"] .TabsUnstyled-horizontal button, html[data-theme="dark"] .blog-wrapper article footer .col.text--right a {
+html[data-theme="dark"] .tailwind .secondary-cta,html[data-theme="dark"] .TabsUnstyled-horizontal button, html[data-theme="dark"].blog-wrapper .main-wrapper article footer .col.text--right a {
color: #fff;
}
@@ -436,10 +440,10 @@ html[data-theme="dark"] .resource-card {background-color: #222;}
font-size: .8rem;
}
-.tailwind .secondary-cta:hover, .TabsUnstyled-horizontal button:hover , .TabsUnstyled-horizontal button.Mui-selected, article .blog-wrapper article footer .col.text--right a:hover {
+.tailwind .secondary-cta:hover, .TabsUnstyled-horizontal button:hover , .TabsUnstyled-horizontal button.Mui-selected, article .blog-wrapper .main-wrapper article footer .col.text--right a:hover {
color: #fff;
}
-.secondary-cta:before, .TabsUnstyled-horizontal button:before, .blog-wrapper article footer .col.text--right a:before {
+.secondary-cta:before, .TabsUnstyled-horizontal button:before, .blog-wrapper .main-wrapper article footer .col.text--right a:before {
content: "";
font-weight: 700;
position: absolute;
@@ -455,7 +459,7 @@ html[data-theme="dark"] .resource-card {background-color: #222;}
height: 4px;
bottom: 5px;
}
-.secondary-cta:hover:before, .TabsUnstyled-horizontal button:hover:before, .TabsUnstyled-horizontal button.Mui-selected:before, .blog-wrapper article footer .col.text--right a:hover:before{
+.secondary-cta:hover:before, .TabsUnstyled-horizontal button:hover:before, .TabsUnstyled-horizontal button.Mui-selected:before, .blog-wrapper .main-wrapper article footer .col.text--right a:hover:before{
height: 100%;
bottom: 0;
}
@@ -580,7 +584,7 @@ article header div[class^="blogPostData_"] {
font-size: 16px;
}
-.main-wrapper.docs-wrapper.docs-doc-page main {
+.docs-wrapper.docs-doc-page .main-wrapper main {
z-index: 1;
}
@@ -594,9 +598,9 @@ article header div[class^="blogPostData_"] {
overflow: hidden;
}
-html[data-theme="dark"] .blog-list-page article.margin-bottom--xl, html[data-theme="dark"] .blog-tags-post-list-page {background-color: rgba(34, 34, 34, 0.9);}
+html[data-theme="dark"].blog-list-page article.margin-bottom--xl, html[data-theme="dark"].blog-tags-post-list-page .main-wrapper {background-color: rgba(34, 34, 34, 0.9);}
-.blog-list-page article h2, .blog-tags-post-list-page article h2{
+.blog-list-page .main-wrapper article h2, .blog-tags-post-list-page .main-wrapper article h2{
font-size: 24px;
border-radius: 8px;
}
@@ -649,39 +653,39 @@ html[data-theme="dark"] .featured-card--inner {background-color: rgba(34, 34, 34
.slide-image.active-slide {opacity: 1; transform: scale(1); transition: all 0.5s ease;}
/* BLOG */
-.blog-list-page article footer.docusaurus-mt-lg {margin-right: 30px;}
-.blog-wrapper.blog-list-page .container {position: relative; z-index: 1;}
-.blog-wrapper h1 {font-size: 2.5rem !important;}
-.blog-wrapper nav {
+.blog-list-page .main-wrapper article footer.docusaurus-mt-lg {margin-right: 30px;}
+.blog-wrapper.blog-list-page .main-wrapper .container {position: relative; z-index: 1;}
+.blog-wrapper .main-wrapper h1 {font-size: 2.5rem !important;}
+.blog-wrapper .main-wrapper nav:not(.pagination-nav) {
background-image: linear-gradient(-45deg, #536270, #464e56);
color: #fff;
padding: 1rem;
}
-.blog-wrapper aside nav a:hover {
+.blog-wrapper .main-wrapper aside nav a:hover {
text-decoration: underline;
}
-.blog-wrapper aside nav li {
+.blog-wrapper .main-wrapper aside nav li {
border-top: 1px dotted #e6f1ff;
padding-top: 10px;
}
-.blog-wrapper aside nav a {
+.blog-wrapper .main-wrapper aside nav a {
color: #fff !important;
font-size: .8rem;
text-decoration: none !important;
}
-.blog-wrapper aside nav a:hover
+.blog-wrapper .main-wrapper aside nav a:hover
{
text-decoration: underline !important;
}
-.blog-wrapper aside ul {
+.blog-wrapper .main-wrapper aside ul {
position: relative;
z-index: 1;
}
-.blog-wrapper.blog-list-page::before {
+.blog-wrapper .main-wrapper.blog-list-page::before {
content: 'Pulsar Blog';
position: relative;
padding: 50px 20px;
@@ -693,17 +697,17 @@ html[data-theme="dark"] .featured-card--inner {background-color: rgba(34, 34, 34
max-width: 100%;
margin: 0 auto;
}
-.blog-wrapper footer.row {
+.blog-wrapper .main-wrapper footer.row {
display: block;
}
-.blog-wrapper footer.row .col {
+.blog-wrapper .main-wrapper footer.row .col {
width: 100% !important;
display: block;
}
-.blog-wrapper footer.row .col.text--right {
+.blog-wrapper .main-wrapper footer.row .col.text--right {
text-align: left;
}
-.blog-wrapper article header, .blog-wrapper article .markdown, .blog-wrapper article footer {
+.blog-wrapper .main-wrapper article header, .blog-wrapper .main-wrapper article .markdown, .blog-wrapper .main-wrapper article footer {
position: relative;
}
/* markdown modules */
@@ -845,10 +849,10 @@ footer .row.footer__links {
width: 800px;
float: none;
}
- .mdx-page header:after {
+ .mdx-page .main-wrapper header:after {
left: -20px;
}
- .main-wrapper:not(.docs-doc-page):not(.mdx-page) blockquote {
+ .plugin-page .main-wrapper blockquote {
padding-left: 30px;
padding-right: 30px;
}
@@ -888,12 +892,12 @@ footer .row.footer__links {
}
@media (max-width: 640px){
- .main-wrapper:not(.docs-doc-page):not(.mdx-page) blockquote {
+ .plugin-page .main-wrapper blockquote {
padding-left: 0px;
padding-right: 0px;
font-size: 18px;
}
- .secondary-cta::before, .TabsUnstyled-horizontal button::before, .blog-wrapper article footer .col.text--right a::before {
+ .secondary-cta::before, .TabsUnstyled-horizontal button::before, .blog-wrapper .main-wrapper article footer .col.text--right a::before {
bottom: -2px;
}
}
@@ -903,4 +907,4 @@ footer .row.footer__links {
.sidebarVersionSwitch_src-theme-DocSidebar-Desktop-styles-module .dropdown__menu {
min-width: 165px !important;
-}
\ No newline at end of file
+}
diff --git a/site2/website-next/src/pages/community.js b/site2/website-next/src/pages/community.js
index 821e247..bc17a6e 100644
--- a/site2/website-next/src/pages/community.js
+++ b/site2/website-next/src/pages/community.js
@@ -14,7 +14,7 @@ export default function Community(props) {
useEffect((d) => {
if(location.hash){
let hash = location.hash;
- let id = hash.substring(1);
+ let id = hash.split('-')[1];
let target = document.getElementById(id);
if(target){
target.scrollIntoView({
@@ -23,6 +23,31 @@ export default function Community(props) {
});
}
}
+
+ const sections = document.querySelectorAll(".scrollable");
+ const links = document.querySelectorAll(".scroll-link");
+ var observer = new IntersectionObserver(
+ function (entries, observer) {
+ if (entries[0].isIntersecting === true) {
+ let id = entries[0].target.id;
+ let target = 'scroll-'+id;
+ links.forEach(l => {
+ console.log(l);
+ l.classList.remove('active-section');
+ });
+ let finalTarget = document.getElementById(target);
+ console.log(target);
+ if(finalTarget){
+ finalTarget.classList.add('active-section');
+ }
+ }
+ },
+ { threshold: [ 0.1 ] }
+ );
+ sections.forEach(s => {
+ observer.observe(document.getElementById(s.id));
+ });
+
const first = document.getElementById('slider').firstChild;
const slides = document.querySelectorAll('.slide-image');
const slideCount = slides.length;
@@ -62,7 +87,7 @@ export default function Community(props) {
<div className="hero-bg absolute z-0">
<img className="relative" src={useBaseUrl('/img/community-hero-bg.jpg')} />
</div>
- <section id="welcome" className="hero hero--welcome pt-24 relative">
+ <section id="welcome" className="scrollable hero hero--welcome pt-24 relative">
<div className="inner cf">
<h1>Welcome to the Pulsar Community</h1>
<div className="cf">
@@ -104,7 +129,7 @@ export default function Community(props) {
</div>
</section>
<WavySeparatorFive></WavySeparatorFive>
- <section id="discussions" className="">
+ <section id="discussions" className="scrollable">
<div className="inner pt-12">
<h2 className="text--center">Discussions</h2>
@@ -205,7 +230,7 @@ export default function Community(props) {
</section>
<WavySeparatorSix></WavySeparatorSix>
- <section id="governance" className="py-12">
+ <section id="governance" className="py-12 scrollable">
<div className="inner">
<h2>Project Governance</h2>
<p>Apache Pulsar is independently managed by its Project Management Committee (PMC)—the governing body tasked with project management including technical direction, voting on new committers and PMC members, setting policies, and formally voting on software product releases.</p>
@@ -226,7 +251,7 @@ export default function Community(props) {
>THE APACHE WAY</PillButton>
</div>
</section>
- <section id="how-to-contribute" className="py-12">
+ <section id="contribute" className="py-12 scrollable">
<div className="inner">
<h2 className="text-center sm:text-left">How to Contribute</h2>
<div className="">
@@ -262,7 +287,7 @@ export default function Community(props) {
</div>
</section>
<WavySeparatorSix></WavySeparatorSix>
- <section id="community" className="py-12">
+ <section id="community" className="py-12 scrollable">
<div className="inner">
<h2 className="text--center">Meet the Community</h2>
<CommunityList list={teamObj.committers} />
diff --git a/site2/website-next/src/pages/contributing.md b/site2/website-next/src/pages/contributing.md
index 2f124b0..56ec169 100644
--- a/site2/website-next/src/pages/contributing.md
+++ b/site2/website-next/src/pages/contributing.md
@@ -4,6 +4,8 @@ title: Contributing
description: Learn how to contribute to Pulsar
hide_table_of_contents: true
---
+# Contribute
+
The Apache Pulsar community welcomes contributions from anyone with a passion for distributed systems! Pulsar has many different opportunities for contributions --
write new examples/tutorials, add new user-facing libraries, write new Pulsar IO connectors, or participate on the documentation effort.
diff --git a/site2/website-next/src/pages/ecosystem.js b/site2/website-next/src/pages/ecosystem.js
index ed6ec83..51c21ae 100644
--- a/site2/website-next/src/pages/ecosystem.js
+++ b/site2/website-next/src/pages/ecosystem.js
@@ -10,6 +10,14 @@ import ecoObj from '@site/data/ecosystem.js';
// create combine the arrays from each category.
+let eObj = ecoObj;
+// add type as a property to each object to use in the tile cta.
+Object.keys(eObj).forEach(key =>{
+ ecoObj[key].forEach((obj) => {
+ obj.type = key.charAt(0).toUpperCase() + key.slice(1);;
+ })
+});
+
let allArr = [];
Object.keys(ecoObj).forEach(key => {
allArr = [...allArr, ...ecoObj[key]];
@@ -48,10 +56,10 @@ export default function Home() {
<input type="text" className="ml-2 px-2" name="search" value={searchString} onChange={e => setSearch(e.target.value)} />
<div className="inline-block px-4 cursor-pointer ml-4 underline underline-offset-1 text-sm font-light" onClick={e => setSearch('')} >Clear Search</div>
</form>
- <TabPanelUnstyled value={0}><EcoCards search={searchString} type="Connector" resources={allArr} /></TabPanelUnstyled>
- <TabPanelUnstyled value={1}><EcoCards search={searchString} type="Connector" resources={ecoObj.connectors} /></TabPanelUnstyled>
- <TabPanelUnstyled value={2}><EcoCards search={searchString} type="Adapter" resources={ecoObj.adapters} /></TabPanelUnstyled>
- <TabPanelUnstyled value={3}><EcoCards search={searchString} type="Tool" resources={ecoObj.tools} /></TabPanelUnstyled>
+ <TabPanelUnstyled value={0}><EcoCards search={searchString} resources={allArr} /></TabPanelUnstyled>
+ <TabPanelUnstyled value={1}><EcoCards search={searchString} resources={ecoObj.connector} /></TabPanelUnstyled>
+ <TabPanelUnstyled value={2}><EcoCards search={searchString} resources={ecoObj.adapter} /></TabPanelUnstyled>
+ <TabPanelUnstyled value={3}><EcoCards search={searchString} resources={ecoObj.tool} /></TabPanelUnstyled>
</TabsUnstyled>
</section>
</div>
diff --git a/site2/website-next/src/utils/index.js b/site2/website-next/src/utils/index.js
index 6ea98bbc..df93de4 100644
--- a/site2/website-next/src/utils/index.js
+++ b/site2/website-next/src/utils/index.js
@@ -69,3 +69,4 @@ export function getApiVersion(anchor) {
}
return apiVersion;
}
+