diff --git a/components/Footer.tsx b/components/Footer.tsx index e927b79606..c2cbf60029 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -13,6 +13,10 @@ import * as config from '@/lib/config' import { useDarkMode } from '@/lib/use-dark-mode' import styles from './styles.module.css' +import { StaticLogo } from './StaticLogo' +import { footerLinks } from '@/lib/config' +import { useNotionContext } from 'react-notion-x' +import cs from 'classnames' // TODO: merge the data and icons from PageSocial with the social links in Footer @@ -33,109 +37,145 @@ export function FooterImpl() { setHasMounted(true) }, []) + const { components, mapPageUrl } = useNotionContext() + return ( ) diff --git a/components/NotionPageHeader.tsx b/components/NotionPageHeader.tsx index 5fbb087ce3..e1b60bd763 100644 --- a/components/NotionPageHeader.tsx +++ b/components/NotionPageHeader.tsx @@ -9,6 +9,7 @@ import { isSearchEnabled, navigationLinks, navigationStyle } from '@/lib/config' import { useDarkMode } from '@/lib/use-dark-mode' import styles from './styles.module.css' +import { StaticLogo } from './StaticLogo' function ToggleThemeButton() { const [hasMounted, setHasMounted] = React.useState(false) @@ -46,8 +47,9 @@ export function NotionPageHeader({ return (
- - +
+ +
{navigationLinks ?.map((link, index) => { diff --git a/components/StaticLogo.module.css b/components/StaticLogo.module.css new file mode 100644 index 0000000000..83df35c285 --- /dev/null +++ b/components/StaticLogo.module.css @@ -0,0 +1,28 @@ +.logo { + height: 75%; + margin-right: 5px; + border-radius: 50%; + display: flex; +} + +.logo img { + max-height: 50px; + max-width: 50px; + object-fit: contain; +} +.logo > * { + display: inline-flex; + font-weight: 500; + padding-right: 0.1em; + font-size: 2em; + align-items: center; + justify-content: center; + white-space: nowrap; + text-overflow: ellipsis; +} + +@media only screen and (max-width: 660px) { + .logo { + justify-content: center; + } +} diff --git a/components/StaticLogo.tsx b/components/StaticLogo.tsx new file mode 100644 index 0000000000..a90f1c84ee --- /dev/null +++ b/components/StaticLogo.tsx @@ -0,0 +1,13 @@ +import * as config from '@/lib/config' +import cs from 'classnames' + +import styles from './StaticLogo.module.css' + +export function StaticLogo() { + return ( + + + {config.name} + + ) +} diff --git a/components/styles.module.css b/components/styles.module.css index bea8ff1ed9..c4a49051cc 100644 --- a/components/styles.module.css +++ b/components/styles.module.css @@ -49,16 +49,31 @@ max-width: 1100px; margin: auto auto 0; padding: 8px; +} +.footerSocial { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } +.siteInfoLinks { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +.siteInfoLinks a { + margin: 0.5em; + text-align: center; +} + .copyright { font-size: 80%; padding: 0.5em; + text-align: center; } .settings, @@ -124,11 +139,31 @@ border-top: 1px solid var(--fg-color-0); } -@media only screen and (max-width: 566px) { +@media only screen and (min-width: 661px) { + /* Position the dark mode / light mode button in the middle of the screen no matter what */ + .footer .toggleDarkModeContainer { + position: absolute; + left: 50%; + transform: translateX(-50%); + z-index: 1; /* Ensure the centered item overlays the others */ + } +} + +@media only screen and (max-width: 660px) { .footer { flex-direction: column; } + .footer .footerSocial { + flex-direction: column-reverse; + } + + .footer .link { + display: flex; + align-items: center; + justify-content: center; + } + .footer > div { margin-top: 1em; } diff --git a/lib/config.ts b/lib/config.ts index 4e74d12c97..ca1ac241b2 100644 --- a/lib/config.ts +++ b/lib/config.ts @@ -109,6 +109,11 @@ export const navigationLinks: Array = getSiteConfig( null ) +export const footerLinks: Array = getSiteConfig( + 'footerLinks', + null +) + // Optional site search export const isSearchEnabled: boolean = getSiteConfig('isSearchEnabled', true) diff --git a/lib/site-config.ts b/lib/site-config.ts index cfd538e767..3f36749f14 100644 --- a/lib/site-config.ts +++ b/lib/site-config.ts @@ -33,6 +33,8 @@ export interface SiteConfig { navigationStyle?: types.NavigationStyle navigationLinks?: Array + + footerLinks?: Array } export interface NavigationLink { diff --git a/pages/_app.tsx b/pages/_app.tsx index d7fd2ba7fe..58e96e8901 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -28,10 +28,16 @@ import { posthogId } from '@/lib/config' + + if (!isServer) { bootstrap() } +// Override font for the site +import { Mulish } from 'next/font/google' +const font = Mulish({ subsets: ['latin'] }) + export default function App({ Component, pageProps }: AppProps) { const router = useRouter() @@ -61,5 +67,9 @@ export default function App({ Component, pageProps }: AppProps) { } }, [router.events]) - return + return ( +
+ +
+ ) } diff --git a/public/favicon.ico b/public/favicon.ico index ea2f437d9d..fafd64750a 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/site.config.ts b/site.config.ts index cded79c3bf..3b69cdfb86 100644 --- a/site.config.ts +++ b/site.config.ts @@ -50,7 +50,7 @@ export default siteConfig({ // whether to use the default notion navigation style or a custom one with links to // important pages. To use `navigationLinks`, set `navigationStyle` to `custom`. - navigationStyle: 'default' + navigationStyle: 'default', // navigationStyle: 'custom', // navigationLinks: [ // { @@ -62,4 +62,23 @@ export default siteConfig({ // pageId: '6a29ebcb935a4f0689fe661ab5f3b8d1' // } // ] + + footerLinks: [ + { + title: 'Terms and Conditions', + url: '/terms-and-conditions' + }, + { + title: 'Privacy Policy', + url: '/privacy-policy' + }, + { + title: 'Affiliate Disclosure', + url: '/affiliate-disclosure' + }, + { + title: 'Security Policy', + url: '/security-policy' + } + ] })