Skip to content

Commit

Permalink
Merge pull request #612 from finos/523-create-a-community-and-social-…
Browse files Browse the repository at this point in the history
…media-wall-on-the-website

docs: create a community and social media wall on the website
  • Loading branch information
JamieSlome authored Jun 18, 2024
2 parents 90ad210 + d34143e commit 93c5f1e
Show file tree
Hide file tree
Showing 6 changed files with 2,591 additions and 2,276 deletions.
50 changes: 50 additions & 0 deletions website/docusaurus.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,56 @@ module.exports = {
organizationName: 'FINOS',
customFields: {
version,
posts: [
{
platform: 'linkedin',
url: 'https://www.linkedin.com/embed/feed/update/urn:li:share:7092203565380722688',
},
{
platform: 'linkedin',
url: 'https://www.linkedin.com/embed/feed/update/urn:li:activity:7181933362339549184',
},
{
platform: 'linkedin',
url: 'https://www.linkedin.com/embed/feed/update/urn:li:activity:7175490880689057792',
},
{
platform: 'linkedin',
url: 'https://www.linkedin.com/embed/feed/update/urn:li:share:7201603784194629633',
},
{
platform: 'linkedin',
url: 'https://www.linkedin.com/embed/feed/update/urn:li:share:7184554793741230080',
},
{
platform: 'linkedin',
url: 'https://www.linkedin.com/embed/feed/update/urn:li:share:7189253601540624385',
},
{
platform: 'linkedin',
url: 'https://www.linkedin.com/embed/feed/update/urn:li:activity:7077564318463995904',
},
{
platform: 'linkedin',
url: 'https://www.linkedin.com/embed/feed/update/urn:li:activity:7189256993470099456',
},
{
platform: 'linkedin',
url: 'https://www.linkedin.com/embed/feed/update/urn:li:activity:7181643315405033472',
},
{
platform: 'linkedin',
url: 'https://www.linkedin.com/embed/feed/update/urn:li:share:7196479535876325377',
},
{
platform: 'linkedin',
url: 'https://www.linkedin.com/embed/feed/update/urn:li:activity:7167196087143899136',
},
{
platform: 'linkedin',
url: 'https://www.linkedin.com/embed/feed/update/urn:li:activity:7196479537872859137',
},
],
},
scripts: ['https://buttons.github.io/buttons.js'],
stylesheets: ['https://fonts.googleapis.com/css?family=Overpass:400,400i,700'],
Expand Down
5 changes: 4 additions & 1 deletion website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,10 @@
"eslint": "^8.0.0",
"eslint-plugin-react": "^7.23.2",
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react-dom": "^18.0.0",
"react-slick": "^0.30.2",
"react-social-media-embed": "^2.5.13",
"slick-carousel": "^1.8.1"
},
"browserslist": {
"production": [
Expand Down
86 changes: 56 additions & 30 deletions website/src/css/custom.css
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
.header-github-link:hover,
.header-star-link:hover,
.header-fork-link:hover,
.header-read-doc-link:hover {
.header-read-doc-link:hover {
opacity: 0.6;
}

.header-github-link:before {
background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
no-repeat;
content: "";
content: '';
display: flex;
height: 24px;
width: 24px;
Expand All @@ -22,7 +22,7 @@
.header-star-link:before {
background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='orange' d='M 8 0.25 a 0.75 0.75 0 0 1 0.673 0.418 l 1.882 3.815 l 4.21 0.612 a 0.75 0.75 0 0 1 0.416 1.279 l -3.046 2.97 l 0.719 4.192 a 0.751 0.751 0 0 1 -1.088 0.791 L 8 12.347 l -3.766 1.98 a 0.75 0.75 0 0 1 -1.088 -0.79 l 0.72 -4.194 L 0.818 6.374 a 0.75 0.75 0 0 1 0.416 -1.28 l 4.21 -0.611 L 7.327 0.668 A 0.75 0.75 0 0 1 8 0.25 Z'/%3E%3C/svg%3E")
no-repeat;
content: "";
content: '';
display: flex;
height: 24px;
width: 24px;
Expand All @@ -36,7 +36,7 @@
.header-fork-link:before {
background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z'/%3E%3C/svg%3E")
no-repeat;
content: "";
content: '';
display: flex;
height: 24px;
width: 24px;
Expand All @@ -50,13 +50,12 @@
.header-read-doc-link:before {
background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z'/%3E%3C/svg%3E")
no-repeat;
content: "";
content: '';
display: flex;
height: 24px;
width: 24px;
}


[data-theme='dark'] .header-read-doc-link::before {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z'/%3E%3C/svg%3E")
no-repeat;
Expand All @@ -65,7 +64,7 @@
.header-slack-link:before {
background: url('data:image/svg+xml,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Slack</title><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/></svg>')
no-repeat;
content: "";
content: '';
display: flex;
height: 24px;
width: 24px;
Expand Down Expand Up @@ -100,7 +99,7 @@
}

.terminal-window header {
background: #E0E8F0;
background: #e0e8f0;
height: 30px;
border-radius: 8px 8px 0 0;
padding-left: 10px;
Expand All @@ -115,22 +114,22 @@
}

.terminal-window header .btn.green {
background: #3BB662;
background: #3bb662;
}

.terminal-window header .btn.yellow {
background: #E5C30F;
background: #e5c30f;
}

.terminal-window header .btn.red {
background: #E75448;
background: #e75448;
}

.terminal-window section.terminal {
color: white;
font-family: Menlo, Monaco, "Consolas", "Courier New", "Courier";
font-family: Menlo, Monaco, 'Consolas', 'Courier New', 'Courier';
font-size: 11pt;
background: #30353A;
background: #30353a;
padding: 10px;
box-sizing: border-box;
position: absolute;
Expand All @@ -148,21 +147,48 @@
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.terminal-window .gray {
color: gray;
}
.terminal-window .green {
color: green;
}

.slick-slide {
padding: 0 10px;
box-sizing: border-box;
}

.terminal-window .gray { color: gray; }
.terminal-window .green { color: green;}
14 changes: 8 additions & 6 deletions website/src/pages/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import Layout from '@theme/Layout';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Avatar from '../components/avatar';
import Testimonials from './testimonials';

/**
* Home page component
Expand Down Expand Up @@ -107,7 +108,7 @@ function Home() {
</div>
</div>
<div className='container text--center margin-top--xl'>
<h2 className='margin-top--md'>Meet the Team</h2>
<h1 className='margin-top--md'>Meet the Team 👋</h1>
<div className='row margin-top--xl margin-bottom--xl'>
<div className='col col--4'>
<div className='col-demo'>
Expand Down Expand Up @@ -140,18 +141,19 @@ function Home() {
/>
</div>
</div>
<div className="col col--4">
<div className="col-demo">
<div className='col col--4'>
<div className='col-demo'>
{' '}
<Avatar
name="Miklos Sagi"
description="OSPO Engineering Lead at NatWest Group"
username="msagi"
name='Miklos Sagi'
description='OSPO Engineering Lead at NatWest Group'
username='msagi'
/>
</div>
</div>
</div>
</div>
<Testimonials />
</Layout>
);
}
Expand Down
69 changes: 69 additions & 0 deletions website/src/pages/testimonials.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import { LinkedInEmbed } from 'react-social-media-embed';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

/**
* Home page component
* @return {JSX.Element}
*/
function Testimonials() {
const context = useDocusaurusContext();
const { siteConfig = {} } = context;
const { posts } = siteConfig.customFields;
const settings = {
infinite: true,
speed: 500,
slidesToShow: 3,
slidesToScroll: 3,
swipeToSlide: true,
swipe: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
infinite: true,
dots: true,
},
},
{
breakpoint: 800,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
initialSlide: 1,
},
},
],
dots: true,
arrows: true,
};

return (
<div className='margin-top--md'>
<div className='container text--center'>
<h1 className=''>Testimonials 📣</h1>
</div>

<div className='container margin-top--xl margin-bottom--xl'>
<Slider {...settings}>
{posts
.filter((post) => post.platform === 'linkedin')
.map((post) => {
return (
<div key={post.url}>
<LinkedInEmbed url={post.url} />
</div>
);
})}
</Slider>
</div>
</div>
);
}

export default Testimonials;
Loading

0 comments on commit 93c5f1e

Please sign in to comment.