Add more sections
diff --git a/website-v2/docusaurus.config.js b/website-v2/docusaurus.config.js
index b67e763..45f602f 100644
--- a/website-v2/docusaurus.config.js
+++ b/website-v2/docusaurus.config.js
@@ -53,12 +53,16 @@
"path": "blog"
},
"theme": {
- "customCss": "./src/css/customTheme.css"
+ "customCss": [
+ "./src/css/customTheme.css",
+ require.resolve('./src/css/page-section.scss')
+ ]
}
}
]
],
"plugins": [
+ "docusaurus-plugin-sass",
[
"@docusaurus/plugin-client-redirects",
{
diff --git a/website-v2/package-lock.json b/website-v2/package-lock.json
index 442413d..440a064 100644
--- a/website-v2/package-lock.json
+++ b/website-v2/package-lock.json
@@ -9,8 +9,10 @@
"@docusaurus/plugin-client-redirects": "2.4.1",
"@docusaurus/preset-classic": "2.4.1",
"clsx": "^1.1.1",
+ "docusaurus-plugin-sass": "^0.2.4",
"react": "^17.0.2",
- "react-dom": "^17.0.2"
+ "react-dom": "^17.0.2",
+ "sass": "^1.63.6"
},
"devDependencies": {}
},
@@ -5563,6 +5565,18 @@
"node": ">=6"
}
},
+ "node_modules/docusaurus-plugin-sass": {
+ "version": "0.2.4",
+ "resolved": "https://registry.npmjs.org/docusaurus-plugin-sass/-/docusaurus-plugin-sass-0.2.4.tgz",
+ "integrity": "sha512-r9bLXW6X2z64bzQUQZB1SxmNlGvSO9swTFALgiMjr/1O4FRDti6BseU4Sw2mlZkYvVQTq8cJMJIP6w7z/5We8Q==",
+ "dependencies": {
+ "sass-loader": "^10.1.1"
+ },
+ "peerDependencies": {
+ "@docusaurus/core": "^2.0.0-beta",
+ "sass": "^1.30.0"
+ }
+ },
"node_modules/dom-converter": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -7127,6 +7141,11 @@
"url": "https://opencollective.com/immer"
}
},
+ "node_modules/immutable": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+ "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
+ },
"node_modules/import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -7689,6 +7708,14 @@
"node": ">=6"
}
},
+ "node_modules/klona": {
+ "version": "2.0.6",
+ "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+ "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
+ "engines": {
+ "node": ">= 8"
+ }
+ },
"node_modules/latest-version": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/latest-version/-/latest-version-5.1.0.tgz",
@@ -10422,6 +10449,75 @@
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
},
+ "node_modules/sass": {
+ "version": "1.63.6",
+ "resolved": "https://registry.npmjs.org/sass/-/sass-1.63.6.tgz",
+ "integrity": "sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==",
+ "dependencies": {
+ "chokidar": ">=3.0.0 <4.0.0",
+ "immutable": "^4.0.0",
+ "source-map-js": ">=0.6.2 <2.0.0"
+ },
+ "bin": {
+ "sass": "sass.js"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ }
+ },
+ "node_modules/sass-loader": {
+ "version": "10.4.1",
+ "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.4.1.tgz",
+ "integrity": "sha512-aX/iJZTTpNUNx/OSYzo2KsjIUQHqvWsAhhUijFjAPdZTEhstjZI9zTNvkTTwsx+uNUJqUwOw5gacxQMx4hJxGQ==",
+ "dependencies": {
+ "klona": "^2.0.4",
+ "loader-utils": "^2.0.0",
+ "neo-async": "^2.6.2",
+ "schema-utils": "^3.0.0",
+ "semver": "^7.3.2"
+ },
+ "engines": {
+ "node": ">= 10.13.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/webpack"
+ },
+ "peerDependencies": {
+ "fibers": ">= 3.1.0",
+ "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+ "sass": "^1.3.0",
+ "webpack": "^4.36.0 || ^5.0.0"
+ },
+ "peerDependenciesMeta": {
+ "fibers": {
+ "optional": true
+ },
+ "node-sass": {
+ "optional": true
+ },
+ "sass": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/sass-loader/node_modules/schema-utils": {
+ "version": "3.3.0",
+ "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+ "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+ "dependencies": {
+ "@types/json-schema": "^7.0.8",
+ "ajv": "^6.12.5",
+ "ajv-keywords": "^3.5.2"
+ },
+ "engines": {
+ "node": ">= 10.13.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/webpack"
+ }
+ },
"node_modules/sax": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
diff --git a/website-v2/package.json b/website-v2/package.json
index 90e1f38..11189c2 100644
--- a/website-v2/package.json
+++ b/website-v2/package.json
@@ -11,13 +11,14 @@
"deploy": "docusaurus deploy",
"docusaurus": "docusaurus"
},
- "devDependencies": {},
"dependencies": {
"@docusaurus/core": "2.4.1",
+ "@docusaurus/plugin-client-redirects": "2.4.1",
"@docusaurus/preset-classic": "2.4.1",
"clsx": "^1.1.1",
+ "docusaurus-plugin-sass": "^0.2.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
- "@docusaurus/plugin-client-redirects": "2.4.1"
+ "sass": "^1.63.6"
}
-}
\ No newline at end of file
+}
diff --git a/website-v2/src/components/PageSection.tsx b/website-v2/src/components/PageSection.tsx
index e78856c..829e88a 100644
--- a/website-v2/src/components/PageSection.tsx
+++ b/website-v2/src/components/PageSection.tsx
@@ -1,19 +1,20 @@
import React, { FC } from 'react';
import Layout from '@theme/Layout';
+import PageSectionTitle from './PageSectionTitle';
const PageSection = (props) => {
const alignCenter = props.alignCenter ? 'align-items-center' : '';
- const alignContentCenter = props.alignContentCenter ? 'justify-content-center' : '';
+ const alignContentCenter = props.alignContentCenter ? 'text-center justify-content-center' : '';
return (
<>
- <section className={`section-padding-100 ${props.backgroundClass}`}>
- <div className="container">
+ <section className={`pt-10 pt-md-12 ${props.backgroundClass}`}>
+ <div className="container-lg">
<div className={`row align-items-center ${alignCenter}`}>
- <div className="col-12">
- <h2 className="page-section-title">{props.sectionTitle}</h2>
- <div className={`d-flex flex-column ${alignContentCenter}`}>
+ <div className={"col-12"}>
+ <PageSectionTitle title={props.sectionTitle} subtitle={"test"}></PageSectionTitle>
+ <div className={`col-lg-12 col-md-12 order-md-0 ${alignContentCenter}`}>
{props.children}
</div>
</div>
diff --git a/website-v2/src/components/PageSectionTitle.tsx b/website-v2/src/components/PageSectionTitle.tsx
new file mode 100644
index 0000000..b0c608a
--- /dev/null
+++ b/website-v2/src/components/PageSectionTitle.tsx
@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+
+const PageSectionTitle = (props) => {
+ const lightMode = props.lightMode;
+ const alignCenter = props.alignCenter;
+ const titleClass = lightMode ? 'text-light' : '';
+ const alignClass = alignCenter ? 'align-center' : 'align-left';
+ const alignTextBlockClass = alignCenter ? 'text-block-center' : 'text-block-left';
+ const largeSectionClass = props.largeSection ? 'section-title-large' : '';
+
+ return (
+ <div className={`section-title ${largeSectionClass} ${alignClass}`}>
+ {
+ props.subtitle ? (<span className="sub-title">{props.subtitle}</span>) : (<span></span>)
+ }
+ {
+ props.title ? (<h2 className={`${titleClass} mb-4`}>{props.title}</h2>)
+ : (
+ <h2 className={`${titleClass} mb-4`}>
+ {props.titleId}
+ </h2>
+ )
+ }
+ <div className={`${alignTextBlockClass} ${titleClass}`}>
+ {props.children}
+ </div>
+ </div>
+ )
+}
+
+export default PageSectionTitle;
diff --git a/website-v2/src/components/home/LovedByDevelopers.tsx b/website-v2/src/components/home/LovedByDevelopers.tsx
index 61611af..c7d9074 100644
--- a/website-v2/src/components/home/LovedByDevelopers.tsx
+++ b/website-v2/src/components/home/LovedByDevelopers.tsx
@@ -1,20 +1,14 @@
import React, { FC } from 'react';
+import PageSection from '../PageSection';
const LovedByDevelopers = (props) => (
<>
- <div className="page-banner-area">
- <div className="container h-100">
- <div className="row h-100 align-items-center">
- <div className="col-12">
- <div className="page-banner-content">
- <h2>
- {props.title}
- </h2>
- </div>
- </div>
- </div>
- </div>
- </div>
+ <>
+ <PageSection sectionTitle={"Loved by Developers"} backgroundClass={"background-primary-light"}>
+
+ </PageSection>
+
+ </>
</>
)
diff --git a/website-v2/src/components/home/LovedByUsers.tsx b/website-v2/src/components/home/LovedByUsers.tsx
index b668139..b2fb402 100644
--- a/website-v2/src/components/home/LovedByUsers.tsx
+++ b/website-v2/src/components/home/LovedByUsers.tsx
@@ -1,20 +1,14 @@
import React, { FC } from 'react';
+import PageSection from '../PageSection';
const LovedByUsers = (props) => (
<>
- <div className="page-banner-area">
- <div className="container h-100">
- <div className="row h-100 align-items-center">
- <div className="col-12">
- <div className="page-banner-content">
- <h2>
- {props.title}
- </h2>
- </div>
- </div>
- </div>
- </div>
- </div>
+ <>
+ <PageSection sectionTitle={"Loved by Users"} backgroundClass={"background-white"}>
+
+ </PageSection>
+
+ </>
</>
)
diff --git a/website-v2/src/components/home/MadeForIIoT.tsx b/website-v2/src/components/home/MadeForIIoT.tsx
index 3ed1dba..bc39384 100644
--- a/website-v2/src/components/home/MadeForIIoT.tsx
+++ b/website-v2/src/components/home/MadeForIIoT.tsx
@@ -1,20 +1,11 @@
import React, { FC } from 'react';
+import PageSection from '../PageSection';
const MadeForIIoT = (props) => (
<>
- <div className="page-banner-area">
- <div className="container h-100">
- <div className="row h-100 align-items-center">
- <div className="col-12">
- <div className="page-banner-content">
- <h2>
- {props.title}
- </h2>
- </div>
- </div>
- </div>
- </div>
- </div>
+ <PageSection sectionTitle={"Made for the Industrial IoT"} backgroundClass={"background-primary-light"}>
+
+ </PageSection>
</>
)
diff --git a/website-v2/src/css/customTheme.css b/website-v2/src/css/customTheme.css
index 6d57ef5..27de1fc 100644
--- a/website-v2/src/css/customTheme.css
+++ b/website-v2/src/css/customTheme.css
@@ -1,41 +1,42 @@
-:root{
- --ifm-color-primary-lightest: #231A82;
- --ifm-color-primary-lighter: #1F1773;
- --ifm-color-primary-light: #1E166E;
- --ifm-color-primary: #1B1464;
- --ifm-color-primary-dark: #18125A;
- --ifm-color-primary-darker: #171155;
- --ifm-color-primary-darkest: #130E46;
+:root {
+ --ifm-color-primary-lightest: #231A82;
+ --ifm-color-primary-lighter: #1F1773;
+ --ifm-color-primary-light: #1E166E;
+ --ifm-color-primary: #1B1464;
+ --ifm-color-primary-dark: #18125A;
+ --ifm-color-primary-darker: #171155;
+ --ifm-color-primary-darkest: #130E46;
- --color-primary: rgb(27, 20, 100);
- --color-accent: rgb(57,181,74);
+ --color-primary: rgb(27, 20, 100);
+ --color-accent: rgb(57, 181, 74);
- --color-primary-light: rgb(244, 244, 255);
+ --color-primary-light: rgb(244, 244, 255);
- --ifm-navbar-height: 4.5rem;
+ --ifm-navbar-height: 4.5rem;
-
+ --ifm-heading-font-family: 'Roboto';
}
.navbar__logo {
- height: 3rem;
- margin-left: 0.25rem;
+ height: 3rem;
+ margin-left: 0.25rem;
}
.background-primary {
- background: var(--color-primary);
+ background: var(--color-primary);
}
.background-accent {
- background: var(--color-accent);
+ background: var(--color-accent);
}
.background-primary-light {
- background: var(--color-primary-light);
+ background: var(--color-primary-light);
}
.table {
- margin-left: auto;
- margin-right: auto;
- width: auto;
+ margin-left: auto;
+ margin-right: auto;
+ width: auto;
+ display: inline-block;
}
diff --git a/website-v2/src/css/page-section.scss b/website-v2/src/css/page-section.scss
new file mode 100644
index 0000000..2091cc8
--- /dev/null
+++ b/website-v2/src/css/page-section.scss
@@ -0,0 +1,96 @@
+.section-title {
+ text-align: center;
+ max-width: 800px;
+
+ margin: {
+ left: auto;
+ right: auto;
+ bottom: 55px;
+ top: 55px;
+ };
+
+ .sub-title {
+ position: relative;
+ display: block;
+ text-transform: uppercase;
+ margin-bottom: 15px;
+ color: var(--color-accent);
+
+ font: {
+ weight: 700;
+ size: 15px;
+ };
+
+ img {
+ margin-right: 5px;
+
+ animation: {
+ name: rotateme;
+ duration: 40s;
+ iteration-count: infinite;
+ timing-function: linear;
+ };
+ }
+ }
+
+ h2 {
+ margin-bottom: 0;
+ position: relative;
+ display: inline-block;
+
+ font: {
+ size: 44px;
+ };
+
+ .overlay {
+ position: absolute;
+ left: 0;
+ top: 0;
+ background-color: #000;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+ }
+
+ }
+
+ p.text-block-center {
+ display: block;
+ font-weight: 300;
+ max-width: 700px;
+
+ margin: {
+ left: auto;
+ right: auto;
+ top: 12px;
+ };
+ }
+
+ p.text-block-left {
+ text-align: left;
+ display: block;
+ font-weight: 300;
+ max-width: 700px;
+
+ margin: {
+ left: 0;
+ right: 0;
+ top: 12px;
+ }
+
+ }
+
+ p.text-block-justify {
+ text-align: justify;
+ display: block;
+ font-weight: 300;
+ max-width: 700px;
+
+ margin: {
+ left: auto;
+ right: auto;
+ top: 12px;
+ }
+
+ }
+}
diff --git a/website-v2/src/pages/community/mailing-lists.tsx b/website-v2/src/pages/community/mailing-lists.tsx
index 21c2473..4699ba5 100644
--- a/website-v2/src/pages/community/mailing-lists.tsx
+++ b/website-v2/src/pages/community/mailing-lists.tsx
@@ -12,58 +12,63 @@
<PageHeader title={'Mailing Lists'}></PageHeader>
<PageSection backgroundClass={"background-white"} sectionTitle={"Users"} alignCenter alignContentCenter>
- <b className={"text-center"}>You are using StreamPipes and have problems, questions or feature requests? Then the community is happy
+ <b className={"text-center"}>You are using StreamPipes and have problems, questions or feature requests? Then the
+ community is happy
to answer you on the user list.</b>
- <table className="table" style={{marginTop: '30px'}}>
- <thead>
- <tr>
- <th scope="col">Name</th>
- <th scope="col">Subscribe</th>
- <th scope="col">Unsubscribe</th>
- <th scope="col">Post</th>
- <th scope="col">Archive</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>users@streampipes.apache.org</td>
- <td><a href="mailto:users-subscribe@streampipes.apache.org">Subscribe</a></td>
- <td><a href="mailto:users-subscribe@streampipes.apache.org">Unsubscribe</a></td>
- <td><a href="mailto:users@streampipes.apache.org">Post</a></td>
- <td><a href="http://mail-archives.apache.org/mod_mbox/streampipes-users/">Archive</a></td>
- </tr>
- </tbody>
- </table>
+ <div>
+ <table className="table" style={{marginTop: '30px'}}>
+ <thead>
+ <tr>
+ <th scope="col">Name</th>
+ <th scope="col">Subscribe</th>
+ <th scope="col">Unsubscribe</th>
+ <th scope="col">Post</th>
+ <th scope="col">Archive</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>users@streampipes.apache.org</td>
+ <td><a href="mailto:users-subscribe@streampipes.apache.org">Subscribe</a></td>
+ <td><a href="mailto:users-subscribe@streampipes.apache.org">Unsubscribe</a></td>
+ <td><a href="mailto:users@streampipes.apache.org">Post</a></td>
+ <td><a href="http://mail-archives.apache.org/mod_mbox/streampipes-users/">Archive</a></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</PageSection>
- <PageSection backgroundClass={"background-primary-light"} sectionTitle={"Developers"}>
+ <PageSection backgroundClass={"background-primary-light"} sectionTitle={"Developers"} alignCenter alignContentCenter>
<b>If you are interested in contributing to StreamPipes, subscribe to our developer-oriented lists!</b>
- <table className="table" style={{marginTop: '30px'}}>
- <thead>
- <tr>
- <th scope="col">Name</th>
- <th scope="col">Subscribe</th>
- <th scope="col">Unsubscribe</th>
- <th scope="col">Post</th>
- <th scope="col">Archive</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>dev@streampipes.apache.org</td>
- <td><a href="mailto:dev-subscribe@streampipes.apache.org">Subscribe</a></td>
- <td><a href="mailto:dev-unsubscribe@streampipes.apache.org">Unsubscribe</a></td>
- <td><a href="mailto:dev@streampipes.apache.org">Post</a></td>
- <td><a href="http://mail-archives.apache.org/mod_mbox/streampipes-dev/">Archive</a></td>
- </tr>
- <tr>
- <td>commits@streampipes.apache.org</td>
- <td><a href="mailto:commits-subscribe@streampipes.apache.org">Subscribe</a></td>
- <td><a href="mailto:commits-unsubscribe@streampipes.apache.org">Unsubscribe</a></td>
- <td><a href="mailto:commits@streampipes.apache.org">Post</a></td>
- <td><a href="http://mail-archives.apache.org/mod_mbox/streampipes-commits/">Archive</a></td>
- </tr>
- </tbody>
- </table>
+ <div>
+ <table className="table" style={{marginTop: '30px'}}>
+ <thead>
+ <tr>
+ <th scope="col">Name</th>
+ <th scope="col">Subscribe</th>
+ <th scope="col">Unsubscribe</th>
+ <th scope="col">Post</th>
+ <th scope="col">Archive</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>dev@streampipes.apache.org</td>
+ <td><a href="mailto:dev-subscribe@streampipes.apache.org">Subscribe</a></td>
+ <td><a href="mailto:dev-unsubscribe@streampipes.apache.org">Unsubscribe</a></td>
+ <td><a href="mailto:dev@streampipes.apache.org">Post</a></td>
+ <td><a href="http://mail-archives.apache.org/mod_mbox/streampipes-dev/">Archive</a></td>
+ </tr>
+ <tr>
+ <td>commits@streampipes.apache.org</td>
+ <td><a href="mailto:commits-subscribe@streampipes.apache.org">Subscribe</a></td>
+ <td><a href="mailto:commits-unsubscribe@streampipes.apache.org">Unsubscribe</a></td>
+ <td><a href="mailto:commits@streampipes.apache.org">Post</a></td>
+ <td><a href="http://mail-archives.apache.org/mod_mbox/streampipes-commits/">Archive</a></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</PageSection>
</Layout>
)
diff --git a/website-v2/static/css/custom-website.css b/website-v2/static/css/custom-website.css
index 51bffff..51f469d 100644
--- a/website-v2/static/css/custom-website.css
+++ b/website-v2/static/css/custom-website.css
@@ -300,7 +300,8 @@
.feature-highlights {
font-size:18pt;
width:100%;
- background: rgba(255, 255, 255, 0.85);
+ //background: rgba(255, 255, 255, 0.85);
+ box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
height: 250px;
border-radius: 10px;
text-align: center;
@@ -385,7 +386,7 @@
}
.teaser-image {
- background-image:url('/img/bg-img/bg-index-color.png');
+ //background-image:url('/img/bg-img/bg-index-color.png');
//background:linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url('/img/bg-img/bg-index-color.png');
background-size:cover;
border-radius: 10px;
