Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

News #5

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

News #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b46b6bb
use nextjs Image with priority for logos
jdr377 Jun 22, 2024
5b05a8c
set heights to 1 to prevent overstretch
jdr377 Jun 22, 2024
b6d8619
add news page showing embedded tweets
jdr377 Jun 23, 2024
cc1d8e9
match footer.tsx
jdr377 Jun 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,13 @@
}
}

.twitter-tweet iframe {
color-scheme: light;
}
/*this is a hack to remove white corners in dark theme
described here. set to dark or remove to see its effect.
https://github.com/squidfunk/mkdocs-material/issues/6889
*/

@layer base {
* {
Expand Down
61 changes: 61 additions & 0 deletions src/app/news/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
'use client';
import { useEffect, useState } from 'react';
import Head from 'next/head';

declare global {
interface Window {
twttr: any;
}
}

const tweetUrls = [
"https://twitter.com/bamkfi/status/1802828568021668044?ref_src=twsrc%5Etfw", //Jun 18 Nakamoto Dollar, NUSD, is a synthetic dollar native to Bitcoin
"https://twitter.com/bamkfi/status/1802302547815751839?ref_src=twsrc%5Etfw", //Jun 16 Chart of NUSD Reserves
"https://twitter.com/bamkfi/status/1780549067518431410?ref_src=twsrc%5Etfw", //Apr 17 running NUSD
];

export default function News() {
const [isClient, setIsClient] = useState(false);

useEffect(() => {
setIsClient(true);

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

script.onload = () => {
if (window.twttr) {
window.twttr.widgets.load();
}
};
}, []);

const renderTweet = (url: string) => (
<blockquote
key={url}
className="twitter-tweet"
data-theme="dark"
data-conversation="none"
data-dnt="true"
data-align="center"
data-width="500"
data-border="#ff0000"
>
<a href={url}></a>
</blockquote>
);

return (
<div className="container mx-auto p-4">
<Head>
<meta name="twitter:widgets:theme" content="dark" />
<script async src="https://platform.twitter.com/widgets.js" charSet="utf-8"></script>
</Head>
<div className="flex flex-col gap-4">
{isClient && tweetUrls.map(url => renderTweet(url))}
</div>
</div>
);
}
179 changes: 114 additions & 65 deletions src/components/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,83 +6,132 @@ import TelegramIcon from '@/icons/telegram'
import GithubIcon from '@/icons/github'
import GitbookIcon from '@/icons/gitbook'
import { TWITTER_URL, TELEGRAM_URL, GITHUB_URL, GITBOOK_URL } from '@/lib/constants'
import Image from 'next/image'

export default function Footer() {
return (
<div className="flex flex-col md:flex-row md:justify-between items-center md:items-end mt-12 max-w-screen-xl container mb-12 pb-5 gap-8">
<div className="relative">
<div className="flex flex-wrap justify-center items-center gap-4 max-w-[600px] mx-auto sm:mx-0">
<a href="https://www.okx.com/web3/marketplace/runes/token/BAMK%E2%80%A2OF%E2%80%A2NAKAMOTO%E2%80%A2DOLLAR/840256:35" target="_blank" rel="noopener noreferrer" className="group flex-1 min-w-[120px] max-w-[33%] h-8 flex justify-center items-center">
<img
src="/logos/okx.png"
alt="OKX"
width={75}
height={60}
className="grayscale group-hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100"
/>
<a
href="https://www.okx.com/web3/marketplace/runes/token/BAMK%E2%80%A2OF%E2%80%A2NAKAMOTO%E2%80%A2DOLLAR/840256:35"
target="_blank"
rel="noopener noreferrer"
className="group flex-1 min-w-[120px] max-w-[33%] h-8 flex justify-center items-center"
>
<Image
src="/logos/okx.png"
alt="OKX"
width={75}
height={1}
priority
className="object-contain grayscale group-hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 h-auto"
/>
</a>
<a href="https://magiceden.io/runes/BAMK%E2%80%A2OF%E2%80%A2NAKAMOTO%E2%80%A2DOLLAR" target="_blank" rel="noopener noreferrer" className="group flex-1 min-w-[120px] max-w-[33%] h-8 flex justify-center items-center">
<img
src="/logos/me.svg"
alt="Magic Eden"
width={130}
height={100}
className="grayscale group-hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100"
/>
<a
href="https://magiceden.io/runes/BAMK%E2%80%A2OF%E2%80%A2NAKAMOTO%E2%80%A2DOLLAR"
target="_blank"
rel="noopener noreferrer"
className="group flex-1 min-w-[120px] max-w-[33%] h-8 flex justify-center items-center"
>
<Image
src="/logos/me.svg"
alt="Magic Eden"
width={130}
height={1}
priority
className="object-contain grayscale group-hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 h-auto"
/>
</a>
<a href="https://unisat.io/runes/market?tick=BAMK%E2%80%A2OF%E2%80%A2NAKAMOTO%E2%80%A2DOLLAR" target="_blank" rel="noopener noreferrer" className="group flex-1 min-w-[120px] max-w-[33%] h-8 flex justify-center items-center">
<img
src="/logos/unisat.svg"
alt="Unisat"
width={120}
height={100}
className="grayscale group-hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100"
/>
<a
href="https://unisat.io/runes/market?tick=BAMK%E2%80%A2OF%E2%80%A2NAKAMOTO%E2%80%A2DOLLAR"
target="_blank"
rel="noopener noreferrer"
className="group flex-1 min-w-[120px] max-w-[33%] h-8 flex justify-center items-center"
>
<Image
src="/logos/unisat.svg"
alt="Unisat"
width={120}
height={1}
priority
className="object-contain grayscale group-hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 h-auto"
/>
</a>
<a href="https://ordinalswallet.com/collection/rune-BAMK%E2%80%A2OF%E2%80%A2NAKAMOTO%E2%80%A2DOLLAR" target="_blank" rel="noopener noreferrer" className="group flex-1 min-w-[120px] max-w-[33%] h-8 flex justify-center items-center">
<img
src="/logos/ow.png"
alt="Ordinals Wallet"
width={130}
height={140}
className="grayscale group-hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100"
/>
<a
href="https://ordinalswallet.com/collection/rune-BAMK%E2%80%A2OF%E2%80%A2NAKAMOTO%E2%80%A2DOLLAR"
target="_blank"
rel="noopener noreferrer"
className="group flex-1 min-w-[120px] max-w-[33%] h-8 flex justify-center items-center"
>
<Image
src="/logos/ow.png"
alt="Ordinals Wallet"
width={130}
height={1}
priority
className="object-contain grayscale group-hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 h-auto"
/>
</a>
<a href="https://www.saturnbtc.io/app/swap/bamkofnakamotodollar-sat" target="_blank" rel="noopener noreferrer" className="group flex-1 min-w-[120px] max-w-[33%] h-8 flex justify-center items-center">
<img
src="/logos/saturn.svg"
alt="Saturn"
width={120}
height={100}
className="grayscale group-hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100"
/>
<a
href="https://www.saturnbtc.io/app/swap/bamkofnakamotodollar-sat"
target="_blank"
rel="noopener noreferrer"
className="group flex-1 min-w-[120px] max-w-[33%] h-8 flex justify-center items-center"
>
<Image
src="/logos/saturn.svg"
alt="Saturn"
width={120}
height={1}
priority
className="object-contain grayscale group-hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 h-auto"
/>
</a>
<a href="https://www.dotswap.app/swap#R_BTC_BAMK%E2%80%A2OF%E2%80%A2NAKAMOTO%E2%80%A2DOLLAR" target="_blank" rel="noopener noreferrer" className="group flex-1 min-w-[120px] max-w-[33%] h-8 flex justify-center items-center">
<img
src="/logos/dotswap.png"
alt="Dotswap"
width={120}
height={100}
className="grayscale group-hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100"
/>
<a
href="https://www.dotswap.app/swap#R_BTC_BAMK%E2%80%A2OF%E2%80%A2NAKAMOTO%E2%80%A2DOLLAR"
target="_blank"
rel="noopener noreferrer"
className="group flex-1 min-w-[120px] max-w-[33%] h-8 flex justify-center items-center"
>
<Image
src="/logos/dotswap.png"
alt="Dotswap"
width={120}
height={1}
priority
className="object-contain grayscale group-hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 h-auto"
/>
</a>
<a href="https://app.liquidium.fi/lend/runes" target="_blank" rel="noopener noreferrer" className="group flex-1 min-w-[120px] max-w-[33%] h-8 flex justify-center items-center">
<img
src="/logos/liquidium.svg"
alt="Liquidium"
width={110}
height={65}
className="grayscale group-hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100"
/>
<a
href="https://app.liquidium.fi/lend/runes"
target="_blank"
rel="noopener noreferrer"
className="group flex-1 min-w-[120px] max-w-[33%] h-8 flex justify-center items-center"
>
<Image
src="/logos/liquidium.svg"
alt="Liquidium"
width={110}
height={1}
priority
className="object-contain grayscale group-hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 h-auto"
/>
</a>
<a href="https://btc.fluidtokens.com/swap" target="_blank" rel="noopener noreferrer" className="group flex-1 min-w-[120px] max-w-[33%] h-8 flex justify-center items-center">
<img
src="/logos/fluid.png"
alt="FluidTokens"
width={120}
height={100}
className="grayscale group-hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100"
/>
<a
href="https://btc.fluidtokens.com/swap"
target="_blank"
rel="noopener noreferrer"
className="group flex-1 min-w-[120px] max-w-[33%] h-8 flex justify-center items-center"
>
<Image
src="/logos/fluid.png"
alt="FluidTokens"
width={120}
height={1}
priority
className="object-contain grayscale group-hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100 h-auto"
/>
</a>
</div>
</div>
Expand Down Expand Up @@ -110,4 +159,4 @@ export default function Footer() {
</div>
</div>
)
}
}
6 changes: 5 additions & 1 deletion src/components/navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,10 @@ export default function Navigation() {
name: 'Docs',
href: GITBOOK_URL
},
{
name: 'News',
href: '/news'
},
]
}, [])

Expand Down Expand Up @@ -66,7 +70,7 @@ export default function Navigation() {
)

return (
<div className="inline-flex items-center gap-4 text-sm lg:gap-6 px-0">
<div className="inline-flex items-center gap-4 text-sm lg:gap-6 px-1 w-fit">
{links.map(l => (
<RenderLink key={l.name} {...l} />
))}
Expand Down
2 changes: 1 addition & 1 deletion tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const config = {
},
screens: {
'xs': '475px',
'sm': '640px',
'sm': '670px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
Expand Down