Skip to content

Commit

Permalink
Merge pull request #260 from availproject/staging
Browse files Browse the repository at this point in the history
fix: posthog config + new banner
  • Loading branch information
Genesis3800 authored Mar 1, 2024
2 parents 2c89daf + a9261bb commit a095712
Show file tree
Hide file tree
Showing 5 changed files with 132 additions and 90 deletions.
2 changes: 1 addition & 1 deletion components/Introduction.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export default function Introduction() {

return IntroData ? (
<>
<div id="">
<div id="intro">
<div className="mx-auto max-w-screen-lg px-8 py-16 sm:px-6 ">
<div className="[column-fill:_balance] sm:columns-2 sm:gap-6 lg:columns-2 lg:gap-8">
{IntroData.map((x, index) => {
Expand Down
43 changes: 43 additions & 0 deletions components/providers.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
// app/providers.js
'use client'
import posthog from 'posthog-js'
import { PostHogProvider } from 'posthog-js/react'
import { usePathname, useSearchParams } from "next/navigation";
import { useEffect } from "react";

if (typeof window !== 'undefined') {
if (process.env.NEXT_PUBLIC_POSTHOG_KEY) {
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
capture_pageview: false // Disable automatic pageview capture, as we capture manually
})
}
}

export function PostHogPageview() {
const pathname = usePathname();
const searchParams = useSearchParams();
// Track pageviews
useEffect(() => {
if (pathname) {
let url = window.origin + pathname
if (searchParams.toString()) {
url = url + `?${searchParams.toString()}`
}
posthog.capture(
'$pageview',
{
'$current_url': url,
}
)
}
}, [pathname, searchParams])

return (<></>)
}

export function PHProvider({ children }: {
children: React.ReactNode
}) {
return <PostHogProvider client={posthog}>{children}</PostHogProvider>
}
27 changes: 27 additions & 0 deletions pages/_app.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/* eslint-disable react-hooks/exhaustive-deps */

import { Suspense } from 'react';
import '../styles/globals.css';
import Head from 'next/head';
import { PHProvider, PostHogPageview } from '@/components/providers';


export default function App({ Component, pageProps }) {

return (
<>
<Head>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Avail Developer Docs</title>
</Head>
<Suspense>
<PostHogPageview />
</Suspense>
<PHProvider>
<Component {...pageProps} />
</PHProvider>
</>
);

}
47 changes: 0 additions & 47 deletions pages/_app.tsx

This file was deleted.

103 changes: 61 additions & 42 deletions theme.config.tsx
Original file line number Diff line number Diff line change
@@ -1,79 +1,98 @@
import { Link, type DocsThemeConfig } from 'nextra-theme-docs'
import Image from 'next/image'
import { Footer } from './components/Footer/Footer'
import { useRouter } from 'next/router';

import { Link, type DocsThemeConfig } from "nextra-theme-docs";
import Image from "next/image";
import { Footer } from "./components/Footer/Footer";
import { useRouter } from "next/router";

const config: DocsThemeConfig = {
banner: {
key: 'Avail',
text: 'Check Out Clash Of Nodes',
key: "Avail",
text: (
<>
<h4 className="my-0 sm:mr-5 !px-[5vw] !text-white text-center paragraph !text-sm w-full">
Avail is now backed by{" "}
<a
style={{ color: '#3DA3FC', textDecoration: 'underline' }}
href="https://blog.availproject.org/avail-raises-27m-to-accelerate-the-unification-of-web3/"
>
{" "}
prominent investors
</a>{" "}
to accelerate the{" "}
<a
style={{ color: '#3DA3FC', textDecoration: 'underline' }}
href="https://blog.availproject.org/the-avail-vision-accelerating-the-unification-of-web3/"
>
unification of web3
</a>{" "}
🎉🎉
</h4>
</>
),
},
docsRepositoryBase:
'https://github.com/availproject/docs',
docsRepositoryBase: "https://github.com/availproject/docs",
chat: {
link: 'https://twitter.com/AvailProject',
link: "https://twitter.com/AvailProject",
icon: (
<svg width="24" height="24" viewBox="0 0 248 204">
<path
fill="currentColor"
d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07a50.338 50.338 0 0 0 22.8-.87C27.8 117.2 10.85 96.5 10.85 72.46v-.64a50.18 50.18 0 0 0 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71a143.333 143.333 0 0 0 104.08 52.76 50.532 50.532 0 0 1 14.61-48.25c20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26a50.69 50.69 0 0 1-22.2 27.93c10.01-1.18 19.79-3.86 29-7.95a102.594 102.594 0 0 1-25.2 26.16z"
/>
</svg>
)
},
),
},
primaryHue: 198,
sidebar: {
defaultMenuCollapseLevel: 1,
toggleButton: true,
},
navigation: {
prev: true,
next: true
next: true,
},
footer: {
component: <Footer/>
} ,
component: <Footer />,
},
nextThemes: {
defaultTheme: 'light'
defaultTheme: "light",
},
useNextSeoProps() {
const { route } = useRouter();
if (route === "/") {
return {
titleTemplate: 'Get Started with Building Blockchains'
}
titleTemplate: "Get Started with Building Blockchains",
};
} else {
return {
titleTemplate: '%s - Avail Developer Docs '
}
titleTemplate: "%s - Avail Developer Docs ",
};
}
},
head: (
) => {
const title = "Get Started with building blockchains"
return <>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content={title} />
<meta name="twitter:image" content={'/avail_logo.png'} />
<meta property="og:description" content="Developer Documentation" />
</>
head: () => {
const title = "Get Started with building blockchains";
return (
<>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content={title} />
<meta name="twitter:image" content={"/avail_logo.png"} />
<meta property="og:description" content="Developer Documentation" />
</>
);
},
logo: function Logo() {
logo: function Logo() {
return (
<div className='flex flex-row items-center'>
<Image src={'/group.png'} alt='avail-logo' width={200} height={40}/>
<div className="flex flex-row items-center">
<Image src={"/group.png"} alt="avail-logo" width={200} height={40} />
</div>
)
);
},

themeSwitch: {
component: <div></div>
},
search: {
component: <div></div>,
},
search: {},
project: {
link: 'https://github.com/availproject/docs',
link: "https://github.com/availproject/docs",
},
toc: {
backToTop: true,
Expand All @@ -82,11 +101,11 @@ logo: function Logo() {
return (
<>
{children}
{id === 'installation' && ' 💿'}
{id === "installation" && " 💿"}
</>
)
}
);
},
},
}
};

export default config
export default config;

0 comments on commit a095712

Please sign in to comment.