Skip to content

Commit

Permalink
docs: Improve embedded tweet performance (#1345)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cpcramer
cpcramer authored Oct 1, 2024
1 parent 98f971d commit a8f06f1
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 22 deletions.
109 changes: 109 additions & 0 deletions site/docs/components/landing/Tweets.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
import { useEffect, useState } from 'react';

const Tweets = () => {
const [scriptLoaded, setScriptLoaded] = useState(false);

useEffect(() => {
const script = document.createElement('script');
script.src = 'https://platform.twitter.com/widgets.js';
script.async = true;

// Set script onload to true when it's loaded
script.onload = () => {
setScriptLoaded(true);
};

// Set script onerror to handle failure to load
script.onerror = () => {
setScriptLoaded(false);
};

document.body.appendChild(script);

// Cleanup the script when the component unmounts
return () => {
document.body.removeChild(script);
};
}, []);

if (!scriptLoaded) {
// If the script isn't loaded yet, return null.
return null;
}

return (
<section className="css-alternate-container flex w-full flex-col items-center gap-[72px] py-24">
<div>
<h3 className="max-w-[525px] basis-1/2 py-[15px] text-center text-4xl text-gray-950 md:text-4xl dark:text-gray-50">
Builders ship faster with OnchainKit
</h3>
</div>
<div className="flex flex-col items-center gap-6 md:flex-row md:items-start">
<div className="flex w-full max-w-[438px] justify-center">
<blockquote
className="twitter-tweet tweet1"
data-dnt="true"
data-theme="dark"
>
<p lang="en" dir="ltr">
🟣 Excited to announce that Basenames are now integrated into the
Fit Club app! <br />
<br />
Thanks to{' '}
<a href="https://twitter.com/OnchainKit?ref_src=twsrc%5Etfw">
@OnchainKit
</a>{' '}
for making it smooth and easy! 💜
<br />
<br />
More updates on the way, stay fit. 🏋️‍♀️🏋️‍♂️{' '}
<a href="https://t.co/5BlIm5kSx3">pic.twitter.com/5BlIm5kSx3</a>
</p>
— Fit Club (@fitclubonbase){' '}
<a href="https://twitter.com/fitclubonbase/status/1826969613294334172?ref_src=twsrc%5Etfw">
August 23, 2024
</a>
</blockquote>
</div>
<div className="flex max-w-[648px] flex-col items-center gap-6 md:items-start">
<blockquote
className="twitter-tweet tweet2"
data-dnt="true"
data-theme="dark"
>
<p lang="en" dir="ltr">
The{' '}
<a href="https://twitter.com/OnchainKit?ref_src=twsrc%5Etfw">
@OnchainKit
</a>{' '}
makes me happy as a developer and excited to write some code
again.
</p>
&mdash; GoodDev (@YourGoodDev){' '}
<a href="https://twitter.com/YourGoodDev/status/1839180292268937665?ref_src=twsrc%5Etfw">
September 26, 2024
</a>
</blockquote>
<blockquote
className="twitter-tweet tweet3"
data-conversation="none"
data-dnt="true"
data-theme="dark"
>
<p lang="en" dir="ltr">
Swap is now live on our website! Feels good to be based, thanks
guys 💙{' '}
<a href="https://t.co/vunDYrnT2j">pic.twitter.com/vunDYrnT2j</a>
</p>
&mdash; KEYCAT (@KeyboardCatBase){' '}
<a href="https://twitter.com/KeyboardCatBase/status/1838710257809252581?ref_src=twsrc%5Etfw">
September 24, 2024
</a>
</blockquote>
</div>
</div>
</section>
);
};

export default Tweets;
24 changes: 2 additions & 22 deletions site/docs/pages/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import {
TransactionStatusAction,
TransactionStatusLabel,
} from '@coinbase/onchainkit/transaction';
import Tweets from '../components/landing/Tweets'

<div id="blobs">
<div
Expand Down Expand Up @@ -538,28 +539,7 @@ import { FrameMetadata } from '@coinbase/onchainkit/frame';
</section>

{' '}
<section className="css-alternate-container w-full flex flex-col items-center py-24 gap-[72px]">
<div>
<h3 className="basis-1/2 py-[15px] text-4xl md:text-4xl max-w-[525px] text-center text-gray-950 dark:text-gray-50">Builders ship faster with OnchainKit</h3>
</div>
<div className="flex flex-col md:flex-row gap-6 items-center md:items-start">
<div className="max-w-[438px] w-full flex justify-center">
<blockquote className="twitter-tweet tweet1" data-dnt="true" data-theme="dark">
<p lang="en" dir="ltr">
🟣 Excited to announce that Basenames are now integrated into the Fit Club app! <br /><br />
Thanks to <a href="https://twitter.com/OnchainKit?ref_src=twsrc%5Etfw">@OnchainKit</a> for making it smooth and easy! 💜<br /><br />
More updates on the way, stay fit. 🏋️‍♀️🏋️‍♂️ <a href="https://t.co/5BlIm5kSx3">pic.twitter.com/5BlIm5kSx3</a>
</p>
— Fit Club (@fitclubonbase) <a href="https://twitter.com/fitclubonbase/status/1826969613294334172?ref_src=twsrc%5Etfw">August 23, 2024</a>
</blockquote><script async src="https://platform.twitter.com/widgets.js"></script>
</div>
<div className="flex flex-col max-w-[648px] gap-6 items-center md:items-start">
<blockquote className="twitter-tweet tweet2" data-dnt="true" data-theme="dark"><p lang="en" dir="ltr">The <a href="https://twitter.com/OnchainKit?ref_src=twsrc%5Etfw">@OnchainKit</a> makes me happy as a developer and exiting to write some code again.</p>&mdash; GoodDev (@YourGoodDev) <a href="https://twitter.com/YourGoodDev/status/1839180292268937665?ref_src=twsrc%5Etfw">September 26, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js"></script>
<blockquote className="twitter-tweet tweet3" data-conversation="none" data-dnt="true" data-theme="dark"><p lang="en" dir="ltr">Swap is now live on our website! Feels good to be based, thanks guys 💙 <a href="https://t.co/vunDYrnT2j">pic.twitter.com/vunDYrnT2j</a></p>&mdash; KEYCAT (@KeyboardCatBase) <a href="https://twitter.com/KeyboardCatBase/status/1838710257809252581?ref_src=twsrc%5Etfw">September 24, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js"></script>
</div>
</div>
</section>

<Tweets />
{' '}

<hr className="my-8 md:my-20" />
Expand Down

0 comments on commit a8f06f1

Please sign in to comment.