mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-02 19:57:25 +02:00
feat(website): add Tweets section (#6426)
* feat(website): add tweets * feat(website): add tweets to homepage * Update tweet meta color for better contrast * change tweets * ignore tweets in cspell
This commit is contained in:
Yangshun Tay
GitHub
parent
6ec0db4722
commit
85351549fe
6 changed files with 505 additions and 1 deletions
|
|
@ -28,6 +28,7 @@
|
||||||
"yarn.lock",
|
"yarn.lock",
|
||||||
"project-words.txt",
|
"project-words.txt",
|
||||||
"website/src/data/users.tsx",
|
"website/src/data/users.tsx",
|
||||||
|
"website/src/data/tweets/index.tsx",
|
||||||
"*.xyz",
|
"*.xyz",
|
||||||
"*.docx",
|
"*.docx",
|
||||||
"versioned_docs",
|
"versioned_docs",
|
||||||
|
|
|
||||||
52
website/src/components/Tweet/index.tsx
Normal file
52
website/src/components/Tweet/index.tsx
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
/**
|
||||||
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, {type ReactNode} from 'react';
|
||||||
|
|
||||||
|
import clsx from 'clsx';
|
||||||
|
|
||||||
|
import styles from './styles.module.css';
|
||||||
|
|
||||||
|
export interface Props {
|
||||||
|
url: string;
|
||||||
|
handle: string;
|
||||||
|
name: string;
|
||||||
|
content: ReactNode;
|
||||||
|
avatar: string;
|
||||||
|
date: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Tweet({
|
||||||
|
url,
|
||||||
|
handle,
|
||||||
|
name,
|
||||||
|
content,
|
||||||
|
avatar,
|
||||||
|
date,
|
||||||
|
}: Props): JSX.Element {
|
||||||
|
return (
|
||||||
|
<div className={clsx('card', styles.tweet)}>
|
||||||
|
<div className="card__header">
|
||||||
|
<div className="avatar">
|
||||||
|
<img alt={name} className="avatar__photo" src={avatar} />
|
||||||
|
<div className="avatar__intro">
|
||||||
|
<div className={styles.tweet}>
|
||||||
|
<div>
|
||||||
|
<strong>{name}</strong>{' '}
|
||||||
|
<span className={styles.tweetMeta}>@{handle}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="margin-bottom--sm">{content}</div>
|
||||||
|
<a className={clsx(styles.tweetMeta, styles.tweetDate)} href={url}>
|
||||||
|
{date}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
15
website/src/components/Tweet/styles.module.css
Normal file
15
website/src/components/Tweet/styles.module.css
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
/**
|
||||||
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.tweet {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tweetMeta,
|
||||||
|
.tweetMeta:hover {
|
||||||
|
color: var(--ifm-color-emphasis-700);
|
||||||
|
}
|
||||||
393
website/src/data/tweets/index.tsx
Normal file
393
website/src/data/tweets/index.tsx
Normal file
|
|
@ -0,0 +1,393 @@
|
||||||
|
/**
|
||||||
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import {Props as Tweet} from '../../components/Tweet';
|
||||||
|
|
||||||
|
export interface TweetItem extends Tweet {
|
||||||
|
showOnHomepage: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TWEETS: TweetItem[] = [
|
||||||
|
{
|
||||||
|
url: 'https://twitter.com/acemarke/status/1452725153998245891',
|
||||||
|
handle: 'acemarke',
|
||||||
|
name: 'Mark Erikson',
|
||||||
|
date: 'Oct 26, 2021',
|
||||||
|
avatar:
|
||||||
|
'https://pbs.twimg.com/profile_images/842582724737163264/tFKLiJI5_400x400.jpg',
|
||||||
|
content: (
|
||||||
|
<>
|
||||||
|
We've been using Docusaurus for all the Redux org docs sites for
|
||||||
|
the last couple years, and it's great! We've been able to
|
||||||
|
focus on content, customize some presentation and features, and It Just
|
||||||
|
Works.
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
showOnHomepage: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: 'https://twitter.com/arcanis/status/1351620354561732608',
|
||||||
|
handle: 'arcanis',
|
||||||
|
name: 'Maël',
|
||||||
|
date: 'Jan 20, 2021',
|
||||||
|
avatar:
|
||||||
|
'https://pbs.twimg.com/profile_images/1311259425949261825/7hPZqoJd_400x400.jpg',
|
||||||
|
content: (
|
||||||
|
<>
|
||||||
|
I've used Docusaurus for two websites this year, and I've been
|
||||||
|
very happy about the v2. Looks good, and simple to setup.
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
showOnHomepage: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: 'https://twitter.com/maxlynch/status/1375113166007455748',
|
||||||
|
handle: 'maxlynch',
|
||||||
|
name: 'Max Lynch',
|
||||||
|
date: 'Mar 25, 2021',
|
||||||
|
avatar:
|
||||||
|
'https://pbs.twimg.com/profile_images/1318970727173885953/bln98FNj_400x400.jpg',
|
||||||
|
content: (
|
||||||
|
<>
|
||||||
|
Docusaurus v2 doubles as a really nice little static site generator tool
|
||||||
|
for content-focused sites, love it 👏
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
showOnHomepage: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: 'https://twitter.com/supabase/status/1328960757149671425',
|
||||||
|
handle: 'supabase',
|
||||||
|
name: 'Supabase',
|
||||||
|
date: 'Nov 18, 2020',
|
||||||
|
avatar:
|
||||||
|
'https://pbs.twimg.com/profile_images/1397471927132844033/jN-wuufb_400x400.jpg',
|
||||||
|
content: (
|
||||||
|
<>
|
||||||
|
We've been using V2 since January and it has been great - we spend
|
||||||
|
less time building documentation and more time building 🛳
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
Thanks @docusaurus team 🦖
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
showOnHomepage: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: 'https://twitter.com/paularmstrong/status/1387059593373700100',
|
||||||
|
handle: 'paularmstrong',
|
||||||
|
name: 'Paul Armstrong',
|
||||||
|
date: 'Apr 27, 2021',
|
||||||
|
avatar:
|
||||||
|
'https://pbs.twimg.com/profile_images/823614982394769408/C4KgET17_400x400.jpg',
|
||||||
|
content: (
|
||||||
|
<>
|
||||||
|
Continue to be impressed and excited about Docusaurus v2 alpha releases.
|
||||||
|
Already using the sidebar items generator to help monorepo workspace
|
||||||
|
devs create their own doc pages without any configuration needed.
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
showOnHomepage: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: 'https://twitter.com/sanketsahu/status/1328677366642528257',
|
||||||
|
handle: 'Sanket Sahu',
|
||||||
|
name: 'sanketsahu',
|
||||||
|
date: 'Nov 17, 2020',
|
||||||
|
avatar:
|
||||||
|
'https://pbs.twimg.com/profile_images/1481221429991718913/aNZZgZME_400x400.jpg',
|
||||||
|
content: <>.@docusaurus ❤️</>,
|
||||||
|
showOnHomepage: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: 'https://twitter.com/debs_obrien/status/1374615572298801155',
|
||||||
|
handle: "Debbie O'Brien",
|
||||||
|
name: 'debs_obrien',
|
||||||
|
date: 'Mar 24, 2021',
|
||||||
|
avatar:
|
||||||
|
'https://pbs.twimg.com/profile_images/1252900852156772352/JLIVJ-TC_400x400.jpg',
|
||||||
|
content: (
|
||||||
|
<>
|
||||||
|
Been doing a lot of work with @docusaurus lately and I have to say it is
|
||||||
|
really fun to work with. A lot of really cool features. I love that you
|
||||||
|
can easily reuse content by creating a markdown file and importing it as
|
||||||
|
a component. 🔥
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
showOnHomepage: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: 'https://twitter.com/Dr_Electron/status/1443635328376508433',
|
||||||
|
handle: 'Dr_Electron',
|
||||||
|
name: 'Dr.Electron',
|
||||||
|
date: 'Oct 11, 2021',
|
||||||
|
avatar:
|
||||||
|
'https://pbs.twimg.com/profile_images/1280609918022815746/nCWpKbYh_400x400.jpg',
|
||||||
|
content: (
|
||||||
|
<>
|
||||||
|
The #IOTA wiki is now part of the @docusaurus showcase. We even have the
|
||||||
|
honor of being a favorite. We are really happy that we found this
|
||||||
|
project. It helped us a lot to improve the documentation. And we still
|
||||||
|
have a lot of plans with things like tutorials, versioning and i8n.
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
showOnHomepage: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: 'https://twitter.com/kentcdodds/status/1323806816019468288',
|
||||||
|
handle: 'kentcdodds',
|
||||||
|
name: 'Kent C. Dodds',
|
||||||
|
date: 'Nov 4, 2020',
|
||||||
|
avatar:
|
||||||
|
'https://pbs.twimg.com/profile_images/1444988463216922631/IDffhy4i_400x400.jpg',
|
||||||
|
content: (
|
||||||
|
<>
|
||||||
|
http://testing-library.com just got a nice update! We're now on the
|
||||||
|
latest version of @docusaurus thanks to @matanbobi, @TensorNo, and
|
||||||
|
@nickemccurdy 💙
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
My favorite new feature: dark mode!! 🌑/☀️
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
showOnHomepage: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: 'https://twitter.com/bantg/status/1463608561368457225',
|
||||||
|
handle: 'bantg',
|
||||||
|
name: 'banteg',
|
||||||
|
date: 'Nov 25, 2021',
|
||||||
|
avatar:
|
||||||
|
'https://pbs.twimg.com/profile_images/1406018339835678720/fLQOnMbp_400x400.jpg',
|
||||||
|
content: <>I like docusaurus much more, it's so snappy.</>,
|
||||||
|
showOnHomepage: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: 'https://twitter.com/swyx/status/1418405515684581378',
|
||||||
|
handle: 'swyx',
|
||||||
|
name: 'swyx',
|
||||||
|
date: 'Jul 23, 2021',
|
||||||
|
avatar:
|
||||||
|
'https://pbs.twimg.com/profile_images/1456506127961640962/iM2Hf8du_400x400.jpg',
|
||||||
|
content: (
|
||||||
|
<>
|
||||||
|
Happy to share Temporal's first open source sponsorship — of
|
||||||
|
@docusaurus!
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
@temporalio uses it for http://docs.temporal.io, and it has been a huge
|
||||||
|
boon to our docs team. @sebastienlorber is an incredible steward of the
|
||||||
|
project, support it if you can!
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
showOnHomepage: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: 'https://twitter.com/rachelnabors/status/1478490902037467137',
|
||||||
|
handle: 'rachelnabors',
|
||||||
|
name: "R 'Nearest' Nabors 💙",
|
||||||
|
date: 'Jan 5, 2022',
|
||||||
|
avatar:
|
||||||
|
'https://pbs.twimg.com/profile_images/1316805792893489152/7soY-vhs_400x400.jpg',
|
||||||
|
content: <>I hear @docusaurus is a good tool for that!</>,
|
||||||
|
showOnHomepage: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: 'https://twitter.com/dabit3/status/1394685348375052295',
|
||||||
|
handle: 'dabit3',
|
||||||
|
name: 'Nader Dabit',
|
||||||
|
date: 'May 19, 2021',
|
||||||
|
avatar:
|
||||||
|
'https://pbs.twimg.com/profile_images/1485813693682262017/E8H-p7iy_400x400.jpg',
|
||||||
|
content: (
|
||||||
|
<>
|
||||||
|
I did try Docusaurus, and I really liked it! Still investigating various
|
||||||
|
options but it's probably at the top of my list for sure
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
showOnHomepage: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: 'https://twitter.com/johnny_reilly/status/1469238609266028545',
|
||||||
|
handle: 'johnny_reilly',
|
||||||
|
name: 'John Reilly',
|
||||||
|
date: 'Dec 10, 2021',
|
||||||
|
avatar:
|
||||||
|
'https://pbs.twimg.com/profile_images/552803871567790081/rPdTN64o_400x400.jpeg',
|
||||||
|
content: (
|
||||||
|
<>
|
||||||
|
I ❤️ @docusaurus - it makes it so easy to spin up docs, blogs and simple
|
||||||
|
websites. I've used it to:
|
||||||
|
<br />
|
||||||
|
<br /> ✅ Replatform my blog with GitHub pages <br />
|
||||||
|
✅ Build a website for a local business <br />✅ Build internal facing
|
||||||
|
blog/docs sites with @AzureStaticApps
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
showOnHomepage: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: 'https://twitter.com/tinkertim/status/1423358665726304260',
|
||||||
|
handle: 'tinkertim',
|
||||||
|
name: 'Tim Post 💉💉💉',
|
||||||
|
date: 'Aug 6, 2021',
|
||||||
|
avatar:
|
||||||
|
'https://pbs.twimg.com/profile_images/1199471998650454017/59xAQG4y_400x400.jpg',
|
||||||
|
content: (
|
||||||
|
<>
|
||||||
|
Docusaurus is mind-bendingly flexible. <br />
|
||||||
|
<br />
|
||||||
|
"Wait! We need to have two products documented on the same site and
|
||||||
|
both need to be translated into multiple languages!"
|
||||||
|
<br />
|
||||||
|
<br /> ... and that's actually easy. Loving it!
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
showOnHomepage: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: 'https://twitter.com/sebastienlorber/status/1321784071815680000',
|
||||||
|
handle: 'sebastienlorber',
|
||||||
|
name: 'Sebastien Lorber',
|
||||||
|
date: 'Oct 29, 2020',
|
||||||
|
avatar:
|
||||||
|
'https://pbs.twimg.com/profile_images/573206276819140608/gKAusMeX_400x400.jpeg',
|
||||||
|
content: (
|
||||||
|
<>
|
||||||
|
🥳🎊🥳🎊🥳🎊🥳🎊 The @reactnative website just migrated to @docusaurus
|
||||||
|
v2
|
||||||
|
<br />
|
||||||
|
Some obvious changes: <br />
|
||||||
|
🌔 Dark mode <br />
|
||||||
|
⚡️ SPA navigation / prefetching <br />
|
||||||
|
🧐 @algolia DocSearch v3 <br />
|
||||||
|
💥 @mdx_js enable many new possibilities <br />
|
||||||
|
<br />
|
||||||
|
Check it out: http://reactnative.dev
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
showOnHomepage: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: 'https://twitter.com/iansu/status/1184149586048245760',
|
||||||
|
handle: 'iansu',
|
||||||
|
name: 'Ian Sutherland',
|
||||||
|
date: 'Oct 16, 2019',
|
||||||
|
avatar:
|
||||||
|
'https://pbs.twimg.com/profile_images/916780671552516096/yzDVUVKY_400x400.jpg',
|
||||||
|
content: (
|
||||||
|
<>
|
||||||
|
We just updated the Create React App docs to Docusaurus v2. Now with
|
||||||
|
dark mode! 😎
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
Thanks to the @docusaurus team for their help! ❤️
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
https://create-react-app.dev
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
showOnHomepage: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: 'https://twitter.com/mweststrate/status/1181276252293853186',
|
||||||
|
handle: 'mweststrate',
|
||||||
|
name: 'Michel Weststrate',
|
||||||
|
date: 'Oct 8, 2019',
|
||||||
|
avatar:
|
||||||
|
'https://pbs.twimg.com/profile_images/1192174732189339649/NYGFeR-K_400x400.jpg',
|
||||||
|
content: (
|
||||||
|
<>
|
||||||
|
New #mobx docs are online! More modern, fixing many UI issues.
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
👏 @cloverich did the awesome job of migrating from ancient gitbook
|
||||||
|
-> @docusaurus! 👏 <br />
|
||||||
|
<br />
|
||||||
|
No real content updates yet, but contributing and publishing has become
|
||||||
|
way easier
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
showOnHomepage: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: 'https://twitter.com/verdaccio_npm/status/1420187249145118722',
|
||||||
|
handle: 'verdaccio_npm',
|
||||||
|
name: 'verdaccio',
|
||||||
|
date: 'Jul 28, 2021',
|
||||||
|
avatar:
|
||||||
|
'https://pbs.twimg.com/profile_images/1423143362232823809/4khdTyVZ_400x400.png',
|
||||||
|
content: (
|
||||||
|
<>
|
||||||
|
The new website has landed 🚀 powered by @docusaurus v2 and made by
|
||||||
|
@_semoal kudos to him 👏 #verdaccio #nodejs awesome contribution ❤️🔥
|
||||||
|
(video made with react remotion @JNYBGR ) all Open Source and hosted on
|
||||||
|
@Netlify https://verdaccio.org
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
showOnHomepage: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
url: 'https://twitter.com/yangshunz/status/1284536949718478848',
|
||||||
|
handle: 'yangshunz',
|
||||||
|
name: 'Yangshun Tay',
|
||||||
|
date: 'Jul 19, 2020',
|
||||||
|
avatar:
|
||||||
|
'https://pbs.twimg.com/profile_images/1247950572096868352/3kuZJz5j_400x400.jpg',
|
||||||
|
content: (
|
||||||
|
<>
|
||||||
|
I made a @docusaurus website for answers to the H5BP Front End Interview
|
||||||
|
Questions! Hopefully it makes the browsing experience easier -
|
||||||
|
https://frontendinterviewhandbook.com
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
showOnHomepage: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
url: 'https://twitter.com/pierregillesl/status/1372839188698001408',
|
||||||
|
handle: 'pierregillesl',
|
||||||
|
name: 'Pierre-Gilles Leymarie',
|
||||||
|
date: 'Mar 19, 2021',
|
||||||
|
avatar:
|
||||||
|
'https://pbs.twimg.com/profile_images/1302550637197000705/pg5XF8rA_400x400.jpg',
|
||||||
|
content: (
|
||||||
|
<>
|
||||||
|
Just upgraded our website to @docusaurus latest with
|
||||||
|
internationalization support 🥳
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
Before that, we had to build 2 separate versions of the website to get
|
||||||
|
it in English + French.
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
Now, it's working out of the box, with proper meta tags for SEO 👌
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
showOnHomepage: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: 'https://twitter.com/biantris_/status/1480259279487741953',
|
||||||
|
handle: 'biantris_',
|
||||||
|
name: 'biazita',
|
||||||
|
date: 'Jan 10, 2022',
|
||||||
|
avatar:
|
||||||
|
'https://pbs.twimg.com/profile_images/1371525161829208064/UCzm0Zye_400x400.jpg',
|
||||||
|
content: (
|
||||||
|
<>
|
||||||
|
Today I tried @docusaurus in a project, I really like the ease and speed
|
||||||
|
of developing with it \o/
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
showOnHomepage: false,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default TWEETS;
|
||||||
|
|
@ -16,6 +16,9 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||||
import Image from '@theme/IdealImage';
|
import Image from '@theme/IdealImage';
|
||||||
import Layout from '@theme/Layout';
|
import Layout from '@theme/Layout';
|
||||||
|
|
||||||
|
import Tweet from '@site/src/components/Tweet';
|
||||||
|
import Tweets, {TweetItem} from '@site/src/data/tweets';
|
||||||
|
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
|
|
||||||
import styles from './styles.module.css';
|
import styles from './styles.module.css';
|
||||||
|
|
@ -80,6 +83,32 @@ const QUOTES = [
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
function TweetsSection() {
|
||||||
|
const tweetColumns: Array<Array<TweetItem>> = [[], [], []];
|
||||||
|
Tweets.filter((tweet) => tweet.showOnHomepage).forEach((tweet, i) =>
|
||||||
|
tweetColumns[i % 3].push(tweet),
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={clsx(styles.section, styles.sectionAlt)}>
|
||||||
|
<div className="container">
|
||||||
|
<h2 className={clsx('margin-bottom--lg', 'text--center')}>
|
||||||
|
Loved by many engineers
|
||||||
|
</h2>
|
||||||
|
<div className={clsx('row', styles.tweetsSection)}>
|
||||||
|
{tweetColumns.map((tweetItems, i) => (
|
||||||
|
<div className="col col--4" key={i}>
|
||||||
|
{tweetItems.map((tweet) => (
|
||||||
|
<Tweet {...tweet} key={tweet.url} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
function Home(): JSX.Element {
|
function Home(): JSX.Element {
|
||||||
const {
|
const {
|
||||||
siteConfig: {customFields, tagline},
|
siteConfig: {customFields, tagline},
|
||||||
|
|
@ -257,7 +286,8 @@ function Home(): JSX.Element {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={clsx(styles.section, styles.sectionAlt)}>
|
<TweetsSection />
|
||||||
|
<div className={clsx(styles.section)}>
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
{QUOTES.map((quote) => (
|
{QUOTES.map((quote) => (
|
||||||
|
|
|
||||||
|
|
@ -162,6 +162,19 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tweetsSection {
|
||||||
|
margin-top: -2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tweetsSection > :global(.col) {
|
||||||
|
padding-top: 2rem;
|
||||||
|
margin-top: -2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tweetsSection > :global(.col) > * {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
/* Used to test CSS insertion order */
|
/* Used to test CSS insertion order */
|
||||||
.test-marker-site-index-page {
|
.test-marker-site-index-page {
|
||||||
content: 'site-index-page';
|
content: 'site-index-page';
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue