mirror of
https://github.com/BillyOutlast/posthog.com.git
synced 2026-02-04 03:11:21 +01:00
Update Navbar and Hero to be consistent from page to page (#1019)
* Setup tailwind and postcss with gatsby * Switch image to inline-block and remove max-width on container * Add missing space for enterprise email link * Small style changes to menu and hero * General updates to support new header/menu * Use initial styling for ordered & unordered lists * Add correct style types for ul/ol elements * Fix block level images in contributors grid * Remove bullets from navbar * Use scss for contributor faces instead of utility classes * Update body font to Good Sans * Cleanup navbar and support dark mode * Cleanup hero styles * Make navbar responsive and expandable * Wire up get started modal * Add hover states to primary call to actions * Cleanup 'whyPosthog' section * Fix docs lightmode/darkmode navbar colors & width * Cleanup header * Use 'a' tags for external links in navbar * Fix a handful of style suggestions * General style cleanup * Add skeleton loading to clean up jumpiness * Cleanup blog view * Make login button text smaller * Use dark purple for docs footer, code blocks, etc. * Test Spinner before dark mode compatible pages * update body bg-color on dark mode * Remove isDocsPage usage since all docs pages are post pages * Update Footer to be more consistent from page to page (#1020) * Start updating footer and global colors to use new color scheme * Setup footer links * Update footer to be expandable on mobile * Add copyright/legal to footer * Add footer links & general cleanup * Code style improvements * Support dark mode on handbook * Add relative to fotoer * Update footer links * Center legal section of footer * Remove duplicate check because all docs pages are post pages * fix footer color? * Revert "fix footer color?" This reverts commit 4a1cb6b77a3aa273f1ffe04d290f1bdd1a75616c. * Small UX tweaks * Add a custom min-height for hero Co-authored-by: yakkomajuri <yakko.majuri@gmail.com> Co-authored-by: Yakko Majuri <38760734+yakkomajuri@users.noreply.github.com>
This commit is contained in:
Mike Nicklas
@@ -108,7 +108,7 @@
|
||||
content: '☀️';
|
||||
text-transform: uppercase;
|
||||
padding-right: 10px;
|
||||
background-color: #353f6f;
|
||||
background-color: #222d5b;
|
||||
color: #fff;
|
||||
text-align: right;
|
||||
}
|
||||
@@ -147,7 +147,7 @@
|
||||
content: '☀️';
|
||||
text-transform: uppercase;
|
||||
padding-right: 10px;
|
||||
background-color: #353f6f;
|
||||
background-color: #222d5b;
|
||||
color: #fff;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -1,128 +0,0 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'gatsby'
|
||||
import { Row, Col } from 'antd'
|
||||
import { StarRepoButton } from '../StarRepoButton'
|
||||
import { layoutLogic } from '../../logic/layoutLogic'
|
||||
import { useValues } from 'kea'
|
||||
|
||||
const FooterListItem = (props) => (
|
||||
<div className="footer-li">
|
||||
{props.to ? (
|
||||
<Row>
|
||||
<Link to={props.to}>{props.children}</Link>
|
||||
</Row>
|
||||
) : (
|
||||
props.children
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
const Footer = ({ onPostPage }) => {
|
||||
const { websiteTheme } = useValues(layoutLogic)
|
||||
return (
|
||||
<div className="footer-universal">
|
||||
<Row gutter={[24, 8]} justify="space-around" style={{ margin: 0 }}>
|
||||
<Col xs={0} sm={0} md={0} lg={6} xl={6} className="gutter-row"></Col>
|
||||
<Col xs={24} sm={24} md={24} lg={16} xl={16} className="gutter-row">
|
||||
<Col xs={24} sm={24} md={4} lg={4} xl={4} className="gutter-row">
|
||||
<span className="footer-links-header" justify="space-around">
|
||||
Why PostHog
|
||||
</span>
|
||||
<FooterListItem to="/product-features">Features</FooterListItem>
|
||||
<FooterListItem to="/pricing">Pricing</FooterListItem>
|
||||
<FooterListItem to="/faq">FAQ</FooterListItem>
|
||||
<FooterListItem to="/pricing#startup-plan">PostHog for Startups</FooterListItem>
|
||||
</Col>
|
||||
<Col xs={24} sm={24} md={4} lg={4} xl={4} className="gutter-row">
|
||||
<span className="footer-links-header">Resources</span>
|
||||
<FooterListItem to="/docs/deployment">Quick Start</FooterListItem>
|
||||
<FooterListItem to="/docs">Docs</FooterListItem>
|
||||
<FooterListItem to="/blog">Blog</FooterListItem>
|
||||
<FooterListItem to="/newsletter">Newsletter</FooterListItem>
|
||||
<a href="https://merch.posthog.com/collections/all">Merch</a>
|
||||
<FooterListItem to="/plugins">Plugins</FooterListItem>
|
||||
</Col>
|
||||
<Col xs={24} sm={24} md={4} lg={4} xl={4} className="gutter-row">
|
||||
<span className="footer-links-header">Community</span>
|
||||
<FooterListItem to="/slack">Slack</FooterListItem>
|
||||
<FooterListItem>
|
||||
<a
|
||||
href="https://github.com/PostHog/posthog/graphs/contributors"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Contributors
|
||||
</a>
|
||||
</FooterListItem>
|
||||
<FooterListItem>
|
||||
<a href="https://github.com/posthog/posthog" target="_blank" rel="noopener noreferrer">
|
||||
Source code
|
||||
</a>
|
||||
</FooterListItem>
|
||||
<FooterListItem>
|
||||
<a href="https://github.com/posthog" target="_blank" rel="noopener noreferrer">
|
||||
Explore repositories
|
||||
</a>
|
||||
</FooterListItem>
|
||||
<FooterListItem>
|
||||
<a
|
||||
href="https://github.com/orgs/PostHog/projects/1"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Roadmap
|
||||
</a>
|
||||
</FooterListItem>
|
||||
<FooterListItem>
|
||||
<a
|
||||
href="https://github.com/PostHog/posthog/blob/master/CONTRIBUTING.md"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Contribute
|
||||
</a>
|
||||
</FooterListItem>
|
||||
<FooterListItem>
|
||||
<a
|
||||
href="https://github.com/PostHog/posthog/issues"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Issues
|
||||
</a>
|
||||
</FooterListItem>
|
||||
</Col>
|
||||
<Col xs={24} sm={24} md={4} lg={4} xl={4} className="gutter-row">
|
||||
<span className="footer-links-header">Support</span>
|
||||
<FooterListItem to="/support">Support</FooterListItem>
|
||||
<FooterListItem>
|
||||
<a href="mailto:sales@posthog.com">Contact sales</a>
|
||||
</FooterListItem>
|
||||
<Row>
|
||||
<a href="http://status.posthog.com" target="_blank" rel="noopener noreferrer">
|
||||
Status
|
||||
</a>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col xs={24} sm={24} md={4} lg={4} xl={4} className="gutter-row">
|
||||
<span className="footer-links-header">Company</span>
|
||||
<FooterListItem to="/handbook/company/story">About</FooterListItem>
|
||||
<FooterListItem to="/handbook/company/team">Team</FooterListItem>
|
||||
<FooterListItem to="/careers">Careers</FooterListItem>
|
||||
<FooterListItem to="/handbook">Handbook</FooterListItem>
|
||||
<FooterListItem to="/handbook/strategy/investors">Investors</FooterListItem>
|
||||
<FooterListItem to="/media">Media</FooterListItem>
|
||||
<FooterListItem to="/terms">Terms</FooterListItem>
|
||||
<FooterListItem to="/privacy">Privacy</FooterListItem>
|
||||
</Col>
|
||||
</Col>
|
||||
<Col xs={0} sm={0} md={0} lg={4} xl={4} className="gutter-row"></Col>
|
||||
</Row>
|
||||
<Row className="centered">
|
||||
<StarRepoButton theme={onPostPage ? websiteTheme : 'light'} />
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
181
src/components/Footer/Footer.tsx
Normal file
181
src/components/Footer/Footer.tsx
Normal file
@@ -0,0 +1,181 @@
|
||||
import React, { useState } from 'react'
|
||||
import { Link } from 'gatsby'
|
||||
import { useValues } from 'kea'
|
||||
import { layoutLogic } from '../../logic/layoutLogic'
|
||||
|
||||
import logo from '../../images/posthog-hog-transparent.svg'
|
||||
|
||||
interface FooterListItemProps {
|
||||
to?: string
|
||||
href?: string
|
||||
children: any
|
||||
border?: boolean
|
||||
}
|
||||
|
||||
const FooterListItem = ({ to = '', border = true, href = '', children }: FooterListItemProps) => {
|
||||
const baseClasses = 'block py-3 text-white text-opacity-60 hover:text-opacity-100 hover:text-white'
|
||||
const classList = border ? `${baseClasses} border-b border-gray-600` : baseClasses
|
||||
|
||||
return to ? (
|
||||
<Link to={to} className={classList}>
|
||||
{children}
|
||||
</Link>
|
||||
) : (
|
||||
<a href={href} className={classList}>
|
||||
{children}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
const FooterSubCategory = ({ children }: { children: any }) => (
|
||||
<header className="block gosha text-white mt-8 font-bold text-base">{children}</header>
|
||||
)
|
||||
|
||||
const FooterCategory = ({ children, title }: { children: any; title: string }) => {
|
||||
const [expanded, setExpanded] = useState(false)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h5
|
||||
className="md:hidden cursor-pointer text-white text-lg border-b border-gray-600 py-2 my-2"
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
>
|
||||
{title}
|
||||
|
||||
<span className="float-right block text-2xl">{expanded ? '-' : '+'}</span>
|
||||
</h5>
|
||||
<h5 className="hidden md:block text-white text-lg">{title}</h5>
|
||||
<div className={expanded ? 'block' : 'hidden md:block'}>{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const Footer = ({ onPostPage }: { onPostPage: boolean }) => {
|
||||
const { websiteTheme } = useValues(layoutLogic)
|
||||
const bgClass = onPostPage && websiteTheme === 'dark' ? 'bg-darkmode-purple' : 'bg-footer'
|
||||
|
||||
return (
|
||||
<div className={`${bgClass} site-footer py-24 relative`}>
|
||||
<img src={logo} className="mx-auto block text-center" />
|
||||
<div className="w-11/12 max-w-5xl flex flex-col md:flex-row justify-between mx-auto mt-24">
|
||||
<div className="w-full md:w-1/4 md:pr-8">
|
||||
<FooterCategory title="Product">
|
||||
<FooterSubCategory>Overview</FooterSubCategory>
|
||||
<FooterListItem to="/product-features" border={false}>
|
||||
Product overview & comparison
|
||||
</FooterListItem>
|
||||
|
||||
<FooterSubCategory>Product suite</FooterSubCategory>
|
||||
<FooterListItem to="/product-features/session-recording">Session replay</FooterListItem>
|
||||
<FooterListItem to="/product-features/feature-flags" border={false}>
|
||||
Feature Flags
|
||||
</FooterListItem>
|
||||
|
||||
<FooterSubCategory>Features</FooterSubCategory>
|
||||
<FooterListItem to="/product-features/event-autocapture">Auto capture</FooterListItem>
|
||||
<FooterListItem to="/product-features/plugins">Plugins</FooterListItem>
|
||||
<FooterListItem to="/product-features/self-hosted">Data portability</FooterListItem>
|
||||
<FooterListItem to="/product-features/self-hosted" border={false}>
|
||||
Private cloud deployment
|
||||
</FooterListItem>
|
||||
</FooterCategory>
|
||||
</div>
|
||||
<div className="w-full md:w-1/4 md:px-8">
|
||||
<FooterCategory title="Community">
|
||||
<FooterSubCategory>Code</FooterSubCategory>
|
||||
<FooterListItem href="https://github.com/posthog/posthog">Source code</FooterListItem>
|
||||
<FooterListItem href="https://github.com/posthog" border={false}>
|
||||
All repositories
|
||||
</FooterListItem>
|
||||
|
||||
<FooterSubCategory>Discussion</FooterSubCategory>
|
||||
<FooterListItem to="/slack">Slack</FooterListItem>
|
||||
<FooterListItem href="https://github.com/PostHog/posthog/issues">Issues</FooterListItem>
|
||||
<FooterListItem to="/support">Support</FooterListItem>
|
||||
<FooterListItem href="mailto:sales@posthog.com" border={false}>
|
||||
Contact sales
|
||||
</FooterListItem>
|
||||
|
||||
<FooterSubCategory>Get involved</FooterSubCategory>
|
||||
<FooterListItem href="https://github.com/orgs/PostHog/projects/1">Roadmap</FooterListItem>
|
||||
<FooterListItem href="https://github.com/PostHog/posthog/graphs/contributors">
|
||||
Contributors
|
||||
</FooterListItem>
|
||||
<FooterListItem href="https://merch.posthog.com/collections/all" border={false}>
|
||||
Merch
|
||||
</FooterListItem>
|
||||
</FooterCategory>
|
||||
</div>
|
||||
<div className="w-full md:w-1/4 md:px-8">
|
||||
<FooterCategory title="Docs">
|
||||
<FooterSubCategory>Getting started</FooterSubCategory>
|
||||
<FooterListItem href="https://app.posthog.com/signup">PostHog cloud</FooterListItem>
|
||||
<FooterListItem to="/docs/deployment" border={false}>
|
||||
Deploying PostHog
|
||||
</FooterListItem>
|
||||
|
||||
<FooterSubCategory>Configuring PostHog</FooterSubCategory>
|
||||
<FooterListItem to="/docs/deployment">Installation</FooterListItem>
|
||||
<FooterListItem to="/docs">Docs</FooterListItem>
|
||||
<FooterListItem to="/docs/api/overview">API</FooterListItem>
|
||||
<FooterListItem to="/docs/integrations" border={false}>
|
||||
Libraries
|
||||
</FooterListItem>
|
||||
|
||||
<FooterSubCategory>Using PostHog</FooterSubCategory>
|
||||
<FooterListItem to="/docs/features">Features</FooterListItem>
|
||||
<FooterListItem to="/docs/plugins/overview">Plugins</FooterListItem>
|
||||
<FooterListItem to="/docs/tutorials">Tutorials</FooterListItem>
|
||||
<FooterListItem to="/faq" border={false}>
|
||||
FAQ
|
||||
</FooterListItem>
|
||||
</FooterCategory>
|
||||
</div>
|
||||
<div className="w-full md:w-1/4 md:pl-8">
|
||||
<FooterCategory title="Company">
|
||||
<FooterSubCategory>About</FooterSubCategory>
|
||||
<FooterListItem href="https://github.com/posthog/posthog">Open source</FooterListItem>
|
||||
<FooterListItem to="/handbook/company/story">Our story</FooterListItem>
|
||||
<FooterListItem to="/handbook">Handbook</FooterListItem>
|
||||
<FooterListItem to="/handbook/company/team">Team</FooterListItem>
|
||||
<FooterListItem to="/handbook/strategy/investors">Investors</FooterListItem>
|
||||
<FooterListItem to="/careers" border={false}>
|
||||
Careers
|
||||
</FooterListItem>
|
||||
|
||||
<FooterSubCategory>Resources</FooterSubCategory>
|
||||
<FooterListItem to="/blog">Blog</FooterListItem>
|
||||
<FooterListItem to="/media">Media</FooterListItem>
|
||||
<FooterListItem href="https://merch.posthog.com/collections/all" border={false}>
|
||||
Merch
|
||||
</FooterListItem>
|
||||
|
||||
<FooterSubCategory>Get in touch</FooterSubCategory>
|
||||
<FooterListItem href="mailto:sales@posthog.com">Contact sales</FooterListItem>
|
||||
<FooterListItem href="https://posthog.com/support" border={false}>
|
||||
Support
|
||||
</FooterListItem>
|
||||
</FooterCategory>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-11/12 mt-24 text-center mx-auto">
|
||||
<span className="text-base text-white text-opacity-40">© 2021 PostHog, Inc.</span>
|
||||
<div className="mt-4">
|
||||
<Link
|
||||
to="/privacy"
|
||||
className="p-2 mx-1 text-white bg-transparent border rounded opacity-40 hover:text-white hover:opacity-100"
|
||||
>
|
||||
Privacy
|
||||
</Link>
|
||||
<Link
|
||||
to="/terms"
|
||||
className="p-2 mx-1 text-white bg-transparent border rounded opacity-40 hover:text-white hover:opacity-100"
|
||||
>
|
||||
Terms
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'gatsby'
|
||||
import Menu from '../Menu'
|
||||
import logo from '../../images/posthog-logo-150x29.svg'
|
||||
import whiteLogo from '../../images/posthog-logo-white.svg'
|
||||
import { useValues } from 'kea'
|
||||
import { layoutLogic } from '../../logic/layoutLogic'
|
||||
|
||||
function Header({ onPostPage, isBlogArticlePage, isHomePage, menuActiveKey }) {
|
||||
const { sidebarHide } = useValues(layoutLogic)
|
||||
|
||||
return (
|
||||
<div className={'menuHeaderWrapper ' + (!isBlogArticlePage && !sidebarHide && onPostPage ? ' noLogo' : '')}>
|
||||
{!sidebarHide && (
|
||||
<Link id="logo" to="/" className={onPostPage && !isBlogArticlePage ? 'display-mobile ' : ''}>
|
||||
<img alt="logo" id="logo-image-header" src={isHomePage || isBlogArticlePage ? whiteLogo : logo} />
|
||||
</Link>
|
||||
)}
|
||||
<Menu
|
||||
isBlogArticlePage={isBlogArticlePage}
|
||||
isHomePage={isHomePage}
|
||||
onPostPage={onPostPage}
|
||||
activeKey={menuActiveKey}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
153
src/components/Header/Header.tsx
Normal file
153
src/components/Header/Header.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
import React, { useState } from 'react'
|
||||
import { useValues, useActions } from 'kea'
|
||||
import { Link } from 'gatsby'
|
||||
import { layoutLogic } from '../../logic/layoutLogic'
|
||||
import hamburgerIcon from '../../images/icons/hamburger.svg'
|
||||
import whiteLogo from '../../images/posthog-logo-white.svg'
|
||||
import darkLogo from '../../images/posthog-logo-150x29.svg'
|
||||
|
||||
interface NavbarLinkProps {
|
||||
to?: string
|
||||
href?: string
|
||||
children: any
|
||||
textLight: boolean
|
||||
className?: string
|
||||
}
|
||||
|
||||
const NavbarLink = ({ to, href, children, textLight, className = '' }: NavbarLinkProps) => {
|
||||
const baseClasses = 'opacity-80 hover:opacity-100 px-4 py-2 font-semibold tracking-wider '.concat(className)
|
||||
const classList = textLight
|
||||
? `text-white hover:text-white ${baseClasses}`
|
||||
: `text-black hover:text-black ${baseClasses}`
|
||||
|
||||
return (
|
||||
<li className="leading-none">
|
||||
{to ? (
|
||||
<Link to={to} className={classList}>
|
||||
{children}
|
||||
</Link>
|
||||
) : (
|
||||
<a href={href} className={classList}>
|
||||
{children}
|
||||
</a>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
const PrimaryCta = ({ children, className = '' }: { children: any; className?: string }) => {
|
||||
const { setIsGetStartedModalOpen } = useActions(layoutLogic)
|
||||
|
||||
const classList = `button-primary ${className}`
|
||||
|
||||
return (
|
||||
<li className="leading-none">
|
||||
<button onClick={() => setIsGetStartedModalOpen(true)} className={classList}>
|
||||
{children}
|
||||
</button>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
export const Header = ({ onPostPage }: { onPostPage: boolean }) => {
|
||||
const [expanded, expandMenu] = useState(false)
|
||||
const { websiteTheme } = useValues(layoutLogic)
|
||||
|
||||
const themeSupportedColor = websiteTheme === 'light' ? 'bg-lightmode-gray' : 'bg-darkmode-purple'
|
||||
const backgroundColor = onPostPage ? themeSupportedColor : 'bg-purple-gradient'
|
||||
const logo = onPostPage && websiteTheme === 'light' ? darkLogo : whiteLogo
|
||||
const textLight = !onPostPage || websiteTheme === 'dark'
|
||||
const layoutWidth = onPostPage ? 'w-full px-4' : 'w-11/12 mx-auto'
|
||||
|
||||
return (
|
||||
<div className={`primary-navbar py-6 ${backgroundColor}`}>
|
||||
<div className={`${layoutWidth} flex justify-between items-center`}>
|
||||
<Link id="logo" to="/" className="block">
|
||||
<img alt="logo" src={logo} />
|
||||
</Link>
|
||||
|
||||
<ul className="hidden lg:flex list-none justify-between items-center mb-0">
|
||||
<NavbarLink to="/product-features" textLight={textLight}>
|
||||
Product
|
||||
</NavbarLink>
|
||||
<NavbarLink to="/docs" textLight={textLight}>
|
||||
Docs
|
||||
</NavbarLink>
|
||||
<NavbarLink to="/handbook/company/story" textLight={textLight}>
|
||||
Company
|
||||
</NavbarLink>
|
||||
<NavbarLink to="/pricing" textLight={textLight}>
|
||||
Pricing
|
||||
</NavbarLink>
|
||||
<NavbarLink href="https://github.com/posthog/posthog" textLight={textLight}>
|
||||
GitHub
|
||||
</NavbarLink>
|
||||
</ul>
|
||||
|
||||
<ul className="hidden lg:flex list-none flex justify-between items-center mb-0">
|
||||
<PrimaryCta>Get Started</PrimaryCta>
|
||||
<NavbarLink
|
||||
href="https://app.posthog.com/login"
|
||||
textLight={textLight}
|
||||
className="uppercase text-xs"
|
||||
>
|
||||
Login
|
||||
</NavbarLink>
|
||||
</ul>
|
||||
|
||||
<button className="text-white h-3 w-3 lg:hidden mt-1" onClick={() => expandMenu(!expanded)}>
|
||||
<img src={hamburgerIcon} className="block" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{expanded ? (
|
||||
<ul className="w-11/12 mx-auto mt-8 block lg:hidden list-none">
|
||||
<NavbarLink
|
||||
to="/product-features"
|
||||
textLight={textLight}
|
||||
className="block my-2 py-2 border-b border-white border-opacity-10"
|
||||
>
|
||||
Product
|
||||
</NavbarLink>
|
||||
<NavbarLink
|
||||
to="/docs"
|
||||
textLight={textLight}
|
||||
className="block my-2 py-2 border-b border-white border-opacity-10"
|
||||
>
|
||||
Docs
|
||||
</NavbarLink>
|
||||
<NavbarLink
|
||||
to="/handbook/company/story"
|
||||
textLight={textLight}
|
||||
className="block my-2 py-2 border-b border-white border-opacity-10"
|
||||
>
|
||||
Company
|
||||
</NavbarLink>
|
||||
<NavbarLink
|
||||
to="/pricing"
|
||||
textLight={textLight}
|
||||
className="block my-2 py-2 border-b border-white border-opacity-10"
|
||||
>
|
||||
Pricing
|
||||
</NavbarLink>
|
||||
<NavbarLink
|
||||
href="https://github.com/posthog/posthog"
|
||||
textLight={textLight}
|
||||
className="block my-2 py-2 border-b border-white border-opacity-10"
|
||||
>
|
||||
GitHub
|
||||
</NavbarLink>
|
||||
<NavbarLink
|
||||
href="https://app.posthog.com/login"
|
||||
textLight={textLight}
|
||||
className="block my-2 py-2 border-b border-white border-opacity-10"
|
||||
>
|
||||
Login
|
||||
</NavbarLink>
|
||||
|
||||
<PrimaryCta className="my-2 ml-4">Get Started</PrimaryCta>
|
||||
</ul>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,10 +1,20 @@
|
||||
body.dark {
|
||||
background-color: #111213;
|
||||
background-color: #220f3f;
|
||||
|
||||
.site-footer {
|
||||
a {
|
||||
color: rgba(255, 255, 255, 0.6) !important;
|
||||
|
||||
&:hover {
|
||||
color: rgba(255, 255, 255, 1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-page-wrapper {
|
||||
@media screen and (min-width: 1080px) {
|
||||
#docs-sidebar {
|
||||
background-color: #0e0e0e !important;
|
||||
background-color: #19082f !important;
|
||||
}
|
||||
|
||||
#menu-header,
|
||||
@@ -14,7 +24,7 @@ body.dark {
|
||||
#docs-content-wrapper,
|
||||
#docs-content-wrapper,
|
||||
#ant-layout-content-wrapper {
|
||||
background-color: #18191a !important;
|
||||
background-color: #220f3f !important;
|
||||
}
|
||||
|
||||
.footer-universal {
|
||||
@@ -22,10 +32,6 @@ body.dark {
|
||||
background-color: #111213 !important;
|
||||
}
|
||||
|
||||
.footer-universal a {
|
||||
color: #6e6d72 !important;
|
||||
}
|
||||
|
||||
.footer-universal a:hover {
|
||||
color: #a7a5ac !important;
|
||||
}
|
||||
@@ -55,6 +61,10 @@ body.dark {
|
||||
color: #ba8fff;
|
||||
}
|
||||
|
||||
.primary-navbar a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ant-menu-submenu-selected > .ant-menu-submenu-title span {
|
||||
color: #b78aff !important;
|
||||
}
|
||||
@@ -105,7 +115,7 @@ body.dark {
|
||||
.note-block,
|
||||
blockquote,
|
||||
code {
|
||||
background: #28292b;
|
||||
background: #19082f;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@@ -122,7 +132,7 @@ body.dark {
|
||||
}
|
||||
|
||||
.ant-anchor-link a {
|
||||
color: #4e4c4c;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.ant-anchor-link a:hover {
|
||||
@@ -135,7 +145,7 @@ body.dark {
|
||||
|
||||
.ant-anchor-ink-ball {
|
||||
border-color: #ba8fff !important;
|
||||
background: #18191a !important;
|
||||
background: #220f3f !important;
|
||||
}
|
||||
|
||||
.zambezi {
|
||||
|
||||
@@ -1,21 +1,28 @@
|
||||
@import '../../vars';
|
||||
|
||||
// Some comment
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src: url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2);
|
||||
}
|
||||
|
||||
/*Gosha Sans*/
|
||||
/* Gosha Sans */
|
||||
@font-face {
|
||||
font-family: 'Gosha Sans';
|
||||
src: url('/fonts/GoshaSans-Bold.woff') format('woff');
|
||||
src: url('/fonts/GoshaSans-Bold.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* Good Sans */
|
||||
@font-face {
|
||||
font-family: 'Good Sans';
|
||||
src: url('/fonts/GoodSans-Medium.woff') format('woff');
|
||||
src: url('/fonts/GoodSans-Medium.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* Good Sans Bold */
|
||||
@font-face {
|
||||
font-family: 'Good Sans Bold';
|
||||
src: url('/fonts/GoodSans-Bold.woff') format('woff');
|
||||
src: url('/fonts/GoodSans-Bold.woff2') formt('woff2');
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: lato !important;
|
||||
font-family: 'Good Sans' !important;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
overscroll-behavior-y: none;
|
||||
@@ -208,7 +215,7 @@ html {
|
||||
}
|
||||
body {
|
||||
color: hsla(0, 0%, 0%, 0.8);
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
|
||||
font-family: 'Good Sans', Helvetica, Arial, sans-serif !important;
|
||||
font-weight: normal;
|
||||
word-wrap: break-word;
|
||||
font-kerning: normal;
|
||||
@@ -240,7 +247,7 @@ h1 {
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-size: 48px;
|
||||
font-size: 42px;
|
||||
line-height: 150%;
|
||||
font-family: 'Gosha Sans', Helvetica, Arial, Sans-Serif;
|
||||
}
|
||||
@@ -257,7 +264,7 @@ h2 {
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-size: 40px;
|
||||
font-size: 36px;
|
||||
line-height: normal;
|
||||
font-family: 'Gosha Sans', Helvetica, Arial, Sans-Serif;
|
||||
font-style: normal;
|
||||
@@ -274,7 +281,7 @@ h3 {
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-size: 32px;
|
||||
font-size: 30px;
|
||||
line-height: normal;
|
||||
font-family: 'Gosha Sans', Helvetica, Arial, Sans-Serif;
|
||||
font-style: normal;
|
||||
@@ -338,18 +345,6 @@ hgroup {
|
||||
padding-top: 0;
|
||||
margin-bottom: 1.45rem;
|
||||
}
|
||||
ul {
|
||||
margin-left: 1.45rem;
|
||||
margin-right: 0;
|
||||
margin-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-top: 0;
|
||||
margin-bottom: 1.45rem;
|
||||
list-style-position: outside;
|
||||
list-style-image: none;
|
||||
}
|
||||
ol {
|
||||
margin-left: 1.45rem;
|
||||
margin-right: 0;
|
||||
@@ -392,7 +387,7 @@ p {
|
||||
padding-right: 0;
|
||||
padding-top: 0;
|
||||
margin-bottom: 1.45rem;
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@@ -612,8 +607,7 @@ td:last-child {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 18px;
|
||||
line-height: 64px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
|
||||
'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
font-family: 'Good Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
font-variant: tabular-nums;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
@@ -733,19 +727,6 @@ header {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.footer-universal {
|
||||
background: #353f6f;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
left: 0px;
|
||||
width: '100%';
|
||||
top: '100%';
|
||||
margin-top: 0;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 80px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-menu,
|
||||
.ant-menu-submenu,
|
||||
.ant-menu-item {
|
||||
@@ -755,7 +736,7 @@ header {
|
||||
}
|
||||
|
||||
li > .ant-menu-submenu-title span {
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.ant-menu-submenu a {
|
||||
@@ -855,22 +836,6 @@ a.ant-anchor-link-title:hover {
|
||||
border-color: #1d4aff !important;
|
||||
}
|
||||
|
||||
.footer-universal a {
|
||||
color: #fff;
|
||||
}
|
||||
.footer-links {
|
||||
list-style-type: none;
|
||||
margin-top: 20px;
|
||||
line-height: 1em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.footer-links-header {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.footer-message {
|
||||
text-align: left;
|
||||
}
|
||||
@@ -951,8 +916,6 @@ a.ant-anchor-link-title:hover {
|
||||
|
||||
.blogHeaderTitle {
|
||||
position: relative;
|
||||
height: calc(100% - 64px);
|
||||
top: 0;
|
||||
width: 80%;
|
||||
color: white;
|
||||
vertical-align: bottom;
|
||||
@@ -960,9 +923,7 @@ a.ant-anchor-link-title:hover {
|
||||
}
|
||||
|
||||
.blogHeaderTitle h1 {
|
||||
position: absolute;
|
||||
color: white;
|
||||
bottom: 0;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.blog-post p + h2 {
|
||||
@@ -1278,12 +1239,6 @@ table td {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: calc(1.45rem / 2);
|
||||
font-size: 18px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.post-page-sub-header {
|
||||
display: block;
|
||||
height: 60px;
|
||||
@@ -1379,6 +1334,7 @@ li {
|
||||
header.menuHeader {
|
||||
width: 100% !important;
|
||||
padding: 0 !important;
|
||||
background: linear-gradient(180deg, #200c39 0%, #220f3f 100%);
|
||||
}
|
||||
|
||||
.menuHeaderWrapper {
|
||||
@@ -1494,7 +1450,7 @@ for all other rows the portrait image wraps above bio*/
|
||||
}
|
||||
|
||||
.main-nav-cta-dark-bg {
|
||||
background-color: #353f6f;
|
||||
background-color: #222d5b;
|
||||
border-color: #fff;
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
@@ -1516,8 +1472,8 @@ for all other rows the portrait image wraps above bio*/
|
||||
|
||||
.main-nav-cta-dark-bg {
|
||||
background-color: #fff !important;
|
||||
color: #353f6f !important;
|
||||
border-color: #353f6f !important;
|
||||
color: #222d5b !important;
|
||||
border-color: #222d5b !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
20
src/components/Layout/SkeletonLoading.css
Normal file
20
src/components/Layout/SkeletonLoading.css
Normal file
@@ -0,0 +1,20 @@
|
||||
.skeleton-loading {
|
||||
min-height: 0;
|
||||
transition: 1s ease min-height;
|
||||
}
|
||||
|
||||
.skeleton-loading--250 {
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.skeleton-loading--500 {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.skeleton-loading--750 {
|
||||
min-height: 750px;
|
||||
}
|
||||
|
||||
.skeleton-loadong--1000 {
|
||||
min-height: 1000px;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import Header from '../Header/Header'
|
||||
import Footer from '../Footer/Footer'
|
||||
import { Header } from '../Header/Header'
|
||||
import { Footer } from '../Footer/Footer'
|
||||
import { ResponsiveSidebar } from '../ResponsiveSidebar'
|
||||
import { Container } from '../Container'
|
||||
import ResponsiveAnchor from '../ResponsiveAnchor'
|
||||
@@ -12,6 +12,7 @@ import { DocsSearch } from '../DocsSearch'
|
||||
import { DarkModeToggle } from '../../components/DarkModeToggle'
|
||||
import { Spacer } from '../../components/Spacer'
|
||||
import './Layout.scss'
|
||||
import './SkeletonLoading.css'
|
||||
import './DarkMode.scss'
|
||||
import { PosthogAnnouncement } from '../PosthogAnnouncement/PosthogAnnouncement'
|
||||
import { GetStartedModal } from '../../components/GetStartedModal'
|
||||
@@ -48,10 +49,28 @@ const Layout = ({
|
||||
if (window && posthog) {
|
||||
posthog.people.set({ preferred_theme: (window as any).__theme })
|
||||
}
|
||||
|
||||
const skeletonLoaded = document.getElementsByClassName('skeleton-loading')
|
||||
|
||||
for (var i = 0; i < skeletonLoaded.length; i++) {
|
||||
let el = skeletonLoaded[i]
|
||||
|
||||
el.classList.remove('skeleton-loading--250')
|
||||
el.classList.remove('skeleton-loading--500')
|
||||
el.classList.remove('skeleton-loading--750')
|
||||
el.classList.remove('skeleton-loading--1000')
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
onPostPage={onPostPage}
|
||||
isBlogArticlePage={isBlogArticlePage}
|
||||
isHomePage={isHomePage}
|
||||
isDocsPage={isDocsPage}
|
||||
menuActiveKey={menuActiveKey ? menuActiveKey : isDocsPage ? 'docs' : ''}
|
||||
/>
|
||||
<AntdLayout id="antd-main-layout-wrapper" hasSider>
|
||||
{onPostPage && !sidebarHide && !isBlogArticlePage && (
|
||||
<AntdLayout.Sider
|
||||
@@ -64,28 +83,16 @@ const Layout = ({
|
||||
</AntdLayout.Sider>
|
||||
)}
|
||||
<AntdLayout id="ant-layout-content-wrapper" style={{ background: '#ffffff' }}>
|
||||
<AntdLayout.Header
|
||||
className={'menuHeader ' + (onPostPage && 'docsHeader ') + (isBlogArticlePage && 'blogHeader')}
|
||||
id="menu-header"
|
||||
style={{ background: '#ffffff' }}
|
||||
>
|
||||
<Header
|
||||
onPostPage={onPostPage}
|
||||
isBlogArticlePage={isBlogArticlePage}
|
||||
isHomePage={isHomePage}
|
||||
menuActiveKey={menuActiveKey ? menuActiveKey : isDocsPage ? 'docs' : ''}
|
||||
/>
|
||||
{onPostPage && !isBlogArticlePage && (!anchorHide || !sidebarHide) && (
|
||||
<span className="display-mobile">
|
||||
<ResponsiveTopBar />
|
||||
</span>
|
||||
)}
|
||||
{isBlogArticlePage && (
|
||||
<div className="blogHeaderTitle display-desktop">
|
||||
<h1>{pageTitle}</h1>
|
||||
</div>
|
||||
)}
|
||||
</AntdLayout.Header>
|
||||
{onPostPage && !isBlogArticlePage && (!anchorHide || !sidebarHide) && (
|
||||
<span className="display-mobile">
|
||||
<ResponsiveTopBar />
|
||||
</span>
|
||||
)}
|
||||
{isBlogArticlePage && (
|
||||
<div className="blogHeaderTitle display-desktop">
|
||||
<h1 className="text-gray-900">{pageTitle}</h1>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{onPostPage &&
|
||||
(!isBlogArticlePage ? (
|
||||
@@ -98,7 +105,7 @@ const Layout = ({
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Spacer onlyDesktop={true} />
|
||||
<Spacer onlyDesktop={true} height={5} />
|
||||
))}
|
||||
|
||||
{/* content */}
|
||||
@@ -143,7 +150,7 @@ const Layout = ({
|
||||
</AntdLayout>
|
||||
<AntdLayout style={{ background: '#ffffff' }}>
|
||||
{isBlogArticlePage && <BlogFooter />}
|
||||
<Footer onPostPage={onPostPage} />
|
||||
<Footer isDocsPage={isDocsPage} onPostPage={onPostPage} />
|
||||
</AntdLayout>
|
||||
<PosthogAnnouncement />
|
||||
<GetStartedModal />
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import React from 'react'
|
||||
import { Link, graphql, StaticQuery } from 'gatsby'
|
||||
import Button from 'antd/lib/button'
|
||||
import List from 'antd/lib/list'
|
||||
import { Menu as AntMenu } from 'antd'
|
||||
import { layoutLogic } from '../../logic/layoutLogic'
|
||||
import { useActions, useValues } from 'kea'
|
||||
@@ -48,124 +46,12 @@ function Menu({ isBlogArticlePage = false, isHomePage = false, activeKey }: Menu
|
||||
render={(data: MenuQueryType) => {
|
||||
const menuItems = data.allMenuItemsJson.edges.map((edge) => edge.node)
|
||||
return (
|
||||
<div className="headerItems">
|
||||
<AntMenu
|
||||
mode="horizontal"
|
||||
className={
|
||||
'ant-menu-navbar display-desktop ' + (isBlogArticlePage ? '' : 'ant-menu-navbar-blog')
|
||||
}
|
||||
>
|
||||
<AntMenu.Item className="header-key main-nav-cta-wrapper">
|
||||
<a onClick={() => setIsGetStartedModalOpen(true)}>
|
||||
<span
|
||||
className={
|
||||
'main-nav-cta ' +
|
||||
(isBlogArticlePage || isHomePage
|
||||
? 'main-nav-cta-dark-bg'
|
||||
: 'main-nav-cta-light-bg')
|
||||
}
|
||||
>
|
||||
Get started now
|
||||
</span>
|
||||
</a>
|
||||
</AntMenu.Item>
|
||||
{menuItems.reverse().map((item) => {
|
||||
return (
|
||||
<AntMenu.Item
|
||||
className={
|
||||
'header-key' +
|
||||
(item.name.toLowerCase() === activeKey ? ' header-key-active' : '')
|
||||
}
|
||||
key={item.link || item.a}
|
||||
>
|
||||
{item.a ? (
|
||||
<a
|
||||
href={item.a}
|
||||
className={isBlogArticlePage || isHomePage ? 'white ' : 'zambezi '}
|
||||
>
|
||||
<span>{item.name}</span>
|
||||
</a>
|
||||
) : (
|
||||
<Link
|
||||
to={item.link}
|
||||
className={isBlogArticlePage || isHomePage ? 'white' : 'zambezi'}
|
||||
>
|
||||
<span>{item.name}</span>
|
||||
</Link>
|
||||
)}
|
||||
</AntMenu.Item>
|
||||
)
|
||||
})}
|
||||
</AntMenu>
|
||||
<Button
|
||||
className={
|
||||
'display-mobile ' +
|
||||
(isHomePage ? 'burger-btn homepage-burger-btn' : 'burger-btn ') +
|
||||
(isBlogArticlePage && ' blogpage-burger-btn')
|
||||
}
|
||||
type="link"
|
||||
onClick={() => {
|
||||
onChangeMenuState(menuItems.length)
|
||||
}}
|
||||
icon={menuOpen ? 'close' : 'menu'}
|
||||
/>
|
||||
{menuOpen && (
|
||||
<div id="navbar-responsive-wrapper" className="display-mobile">
|
||||
<List
|
||||
itemLayout="horizontal"
|
||||
dataSource={menuItems.reverse()}
|
||||
className="navbar-list"
|
||||
rowKey={(item) => item.a || item.link}
|
||||
renderItem={(item) => (
|
||||
<>
|
||||
<List.Item className="responsive-menu-item" key={menuItems.indexOf(item)}>
|
||||
<List.Item.Meta
|
||||
title={
|
||||
item.a ? (
|
||||
<a
|
||||
href={item.a}
|
||||
className={
|
||||
'responsive-menu-item-meta ' +
|
||||
(item.name === 'Login' ? ' login-btn' : '')
|
||||
}
|
||||
onClick={() => {
|
||||
onChangeMenuState(menuItems.length)
|
||||
}}
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
) : (
|
||||
<Link
|
||||
to={item.link}
|
||||
className="responsive-menu-item-meta"
|
||||
onClick={() => {
|
||||
onChangeMenuState(menuItems.length)
|
||||
}}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</List.Item>
|
||||
</>
|
||||
)}
|
||||
>
|
||||
<List.Item className="responsive-menu-item centered">
|
||||
<List.Item.Meta
|
||||
title={
|
||||
<a
|
||||
className="responsive-menu-item-meta"
|
||||
onClick={() => setIsGetStartedModalOpen(true)}
|
||||
>
|
||||
Get Started For Free
|
||||
</a>
|
||||
}
|
||||
/>
|
||||
</List.Item>
|
||||
</List>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between items-center">
|
||||
<AntMenu.Item className="header-key main-nav-cta-wrapper">
|
||||
<a onClick={() => setIsGetStartedModalOpen(true)}>
|
||||
<span>Get started now</span>
|
||||
</a>
|
||||
</AntMenu.Item>
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
|
||||
@@ -12,7 +12,7 @@ export const PageHeader = ({ title, tagline, styleKey, bgColor = 'navy' }: PageH
|
||||
const backgroundColorClass = `bg-${bgColor}`
|
||||
return (
|
||||
<div className="page-header-container">
|
||||
<div className={`head ${styleKey} ${backgroundColorClass}`}>
|
||||
<div className={`head ${styleKey}`}>
|
||||
<div className="tagline">
|
||||
<h1>{title}</h1>
|
||||
<p>{tagline}</p>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
.page-header-container {
|
||||
background: linear-gradient(180deg, #220f3f 0%, #2c1e60 100%);
|
||||
.head {
|
||||
width: 100vw;
|
||||
height: 414px;
|
||||
@@ -31,7 +32,7 @@
|
||||
|
||||
.tagline > p {
|
||||
font-size: 20px !important;
|
||||
line-height: 40px !important;
|
||||
line-height: 30px !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1080px) {
|
||||
|
||||
@@ -1,21 +1,9 @@
|
||||
import React from 'react'
|
||||
import SidebarContents from '../SidebarContents'
|
||||
import coloredLogo from '../../images/posthog-logo-150x29.svg'
|
||||
import whiteLogo from '../../images/posthog-logo-white.svg'
|
||||
import { Link } from 'gatsby'
|
||||
import { useValues } from 'kea'
|
||||
import { layoutLogic } from '../../logic/layoutLogic'
|
||||
|
||||
export const ResponsiveSidebar = () => {
|
||||
const { websiteTheme } = useValues(layoutLogic)
|
||||
|
||||
return (
|
||||
<div className="sidebarWrapper">
|
||||
<div className="logoWrapperSidebar">
|
||||
<Link id="logo" to="/">
|
||||
<img alt="logo" src={websiteTheme === 'dark' ? whiteLogo : coloredLogo} id="logo-image-sidebar" />
|
||||
</Link>
|
||||
</div>
|
||||
<SidebarContents />
|
||||
</div>
|
||||
)
|
||||
|
||||
12
src/images/icons/hamburger.svg
Normal file
12
src/images/icons/hamburger.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="18px" height="12px" viewBox="0 0 18 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 62 (91390) - https://sketch.com -->
|
||||
<title>hamburger</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="hamburger" transform="translate(-3.000000, -6.000000)">
|
||||
<polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
|
||||
<path d="M3,18 L21,18 L21,16 L3,16 L3,18 Z M3,13 L21,13 L21,11 L3,11 L3,13 Z M3,6 L3,8 L21,8 L21,6 L3,6 Z" id="Shape" fill-opacity="0.8" fill="#FFFFFF" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 759 B |
10
src/images/posthog-hog-transparent.svg
Normal file
10
src/images/posthog-hog-transparent.svg
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg width="42" height="24" viewBox="0 0 42 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.000488281 17.143L6.86671 24H0.000488281V17.143ZM0.000488281 15.4287L8.58326 24H15.4495L0.000488281 8.57174V15.4287ZM0.000488281 6.85749L17.166 24H24.0323L0.000488281 0.000488281V6.85749ZM8.58326 6.85749L25.7488 24V17.143L8.58326 0.000488281V6.85749ZM17.166 0.000488281V6.85749L25.7488 15.4287V8.57174L17.166 0.000488281Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.5107 19.3177C37.7535 20.5588 39.4398 21.2568 41.1989 21.2568V23.9996H26.9639V9.78369L36.5107 19.3177ZM32.4572 19.8855C32.4572 20.6429 31.8424 21.2569 31.084 21.2569C30.3256 21.2569 29.7108 20.6429 29.7108 19.8855C29.7108 19.1281 30.3256 18.5141 31.084 18.5141C31.8424 18.5141 32.4572 19.1281 32.4572 19.8855Z" fill="white"/>
|
||||
<path d="M0 23.9996H6.86622L0 17.1426V23.9996Z" fill="white"/>
|
||||
<path d="M8.58376 8.57174L0.000976562 0.000488281V6.85749L8.58376 15.4287V8.57174Z" fill="white"/>
|
||||
<path d="M0 8.57129V15.4283L8.58278 23.9995V17.1425L0 8.57129Z" fill="white"/>
|
||||
<path d="M17.1658 8.57125L8.58301 0V6.857L17.1658 15.4283V8.57125Z" fill="white"/>
|
||||
<path d="M8.58203 23.9996H15.4482L8.58203 17.1426V23.9996Z" fill="white"/>
|
||||
<path d="M8.58203 8.57129V15.4283L17.1648 23.9995V17.1425L8.58203 8.57129Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -1,4 +1,4 @@
|
||||
// AUTO GENERATED FILE
|
||||
// AUTO GENERATED FILE
|
||||
|
||||
import { BasicHedgehogImage } from './components/BasicHedgehogImage'
|
||||
import { BlogFooter } from './components/BlogFooter'
|
||||
@@ -30,32 +30,32 @@ import { StartNowButton } from './components/StartNowButton'
|
||||
import { TableOfContents } from './components/TableOfContents'
|
||||
|
||||
export const shortcodes = {
|
||||
BasicHedgehogImage,
|
||||
BlogFooter,
|
||||
CodeBlock,
|
||||
CompensationCalculator,
|
||||
Container,
|
||||
DarkModeToggle,
|
||||
DemoScheduler,
|
||||
DocsPageSurvey,
|
||||
DocsSearch,
|
||||
FeaturesComparisonTable,
|
||||
FeaturesNav,
|
||||
Footer,
|
||||
GetStartedModal,
|
||||
NewsletterForm,
|
||||
OtherFeaturesBlock,
|
||||
PageHeader,
|
||||
PostCard,
|
||||
ResponsiveAnchor,
|
||||
ResponsiveSidebar,
|
||||
ResponsiveTopBar,
|
||||
DesignedForYourStackBlock,
|
||||
FeaturedSectionTextLeft,
|
||||
FeaturedSectionTextRight,
|
||||
FeaturedSectionTripleImage,
|
||||
Spacer,
|
||||
StarRepoButton,
|
||||
StartNowButton,
|
||||
TableOfContents,
|
||||
}
|
||||
BasicHedgehogImage,
|
||||
BlogFooter,
|
||||
CodeBlock,
|
||||
CompensationCalculator,
|
||||
Container,
|
||||
DarkModeToggle,
|
||||
DemoScheduler,
|
||||
DocsPageSurvey,
|
||||
DocsSearch,
|
||||
FeaturesComparisonTable,
|
||||
FeaturesNav,
|
||||
Footer,
|
||||
GetStartedModal,
|
||||
NewsletterForm,
|
||||
OtherFeaturesBlock,
|
||||
PageHeader,
|
||||
PostCard,
|
||||
ResponsiveAnchor,
|
||||
ResponsiveSidebar,
|
||||
ResponsiveTopBar,
|
||||
DesignedForYourStackBlock,
|
||||
FeaturedSectionTextLeft,
|
||||
FeaturedSectionTextRight,
|
||||
FeaturedSectionTripleImage,
|
||||
Spacer,
|
||||
StarRepoButton,
|
||||
StartNowButton,
|
||||
TableOfContents
|
||||
}
|
||||
@@ -2,6 +2,7 @@ import React, { useState, useEffect, Suspense } from 'react'
|
||||
import Button from 'antd/lib/button'
|
||||
import 'antd/lib/button/style/css'
|
||||
import './styles/index.scss'
|
||||
import posthogComputer from '../images/computer-dashboard-4.svg'
|
||||
import improveMobile from '../images/improve-mobile.svg'
|
||||
import improveRetention from '../images/retro-retention-box.svg'
|
||||
import improvePaths from '../images/retro-paths-box.svg'
|
||||
@@ -49,36 +50,41 @@ function IndexPage() {
|
||||
description="Self-hosted product analytics stack, to deploy on your infrastructure."
|
||||
/>
|
||||
<div className="topSectionWrapperMobile">
|
||||
<div className="topPageWrapper wrapper">
|
||||
<div className="topPageWrapper wrapper min-h-780">
|
||||
<div className="pageHeader row">
|
||||
<h1>A complete product analytics stack, to deploy on your infrastructure.</h1>
|
||||
<h1 className="mt-12">
|
||||
A complete product analytics stack, to deploy on your infrastructure.
|
||||
</h1>
|
||||
</div>
|
||||
<Spacer height={25} onlyDesktop={true} />
|
||||
<div className="topPageRow row">
|
||||
<div className="topPageCol1">
|
||||
<div className="joinUsersText">
|
||||
<p>
|
||||
Join 2,700 companies <br className="hiddenBreak" /> using PostHog.
|
||||
</p>
|
||||
<br />
|
||||
</div>
|
||||
<div className="joinUsersButtons">
|
||||
<Button
|
||||
type="secondary"
|
||||
size="large"
|
||||
className="getStarted"
|
||||
<div className="w-11/12 mx-auto max-w-4xl flex justify-between items-center flex-col lg:flex-row">
|
||||
<div className="w-full lg:w-1/2">
|
||||
<span className="text-white text-xl hidden lg:block">
|
||||
Join 2,700 companies <br className="hiddenBreak" /> using PostHog.
|
||||
</span>
|
||||
|
||||
<div className="mt-4 flex justify-start flex-col lg:flex-row flex-wrap items-center">
|
||||
<button
|
||||
className="button-primary lg:mr-1"
|
||||
onClick={() => setIsGetStartedModalOpen(true)}
|
||||
>
|
||||
Get Started for Free
|
||||
</Button>
|
||||
<a href="/schedule-demo">
|
||||
<Button type="primary" size="large" className="scheduleDemo">
|
||||
Schedule Demo
|
||||
</Button>
|
||||
</button>
|
||||
<a
|
||||
href="/schedule-demo"
|
||||
className="px-4 py-2 my-1 font-gosha block bg-transparent border border-white rounded font-semibold text-base-larger text-white uppercase lg:mr-1 hover:bg-white hover:bg-opacity-10 hover:text-white"
|
||||
>
|
||||
Schedule Demo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="topPageCol2" />
|
||||
|
||||
<div className="w-full lg:w-1/2">
|
||||
<img
|
||||
src={posthogComputer}
|
||||
className="w-full max-w-lg mx-auto mt-8 lg:mt-0 lg:max-w-full block skeleton-loading skeleton-loading--250"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -228,36 +228,36 @@ const PricingPage = () => {
|
||||
<li>
|
||||
<b>Unlimited</b> event allocation. Pay only for what you use.
|
||||
</li>
|
||||
<li>
|
||||
<li className="mt-2">
|
||||
<b>Unlimited</b> tracked users
|
||||
</li>
|
||||
<li>
|
||||
<li className="mt-2">
|
||||
<b>Unlimited</b> team members
|
||||
</li>
|
||||
<li>
|
||||
<li className="mt-2">
|
||||
<b>Unlimited</b> projects
|
||||
</li>
|
||||
<li>
|
||||
<li className="mt-2">
|
||||
<b>7 years</b> of data retention
|
||||
<span className="disclaimer">
|
||||
<a href="#disclaimer-1">1</a>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<li className="mt-2">
|
||||
<b>All core analytics features</b>
|
||||
</li>
|
||||
<li>
|
||||
<li className="mt-2">
|
||||
Session recording with unlimited storage
|
||||
<span className="disclaimer">
|
||||
<a href="#disclaimer-2">2</a>
|
||||
</span>
|
||||
</li>
|
||||
<li>Feature flags</li>
|
||||
<li>Plugins & other integrations</li>
|
||||
<li>Zapier integration</li>
|
||||
<li>SSO/SAML</li>
|
||||
<li>Export to data lakes</li>
|
||||
<li>Community, Slack & Email support</li>
|
||||
<li className="mt-2">Feature flags</li>
|
||||
<li className="mt-2">Plugins & other integrations</li>
|
||||
<li className="mt-2">Zapier integration</li>
|
||||
<li className="mt-2">SSO/SAML</li>
|
||||
<li className="mt-2">Export to data lakes</li>
|
||||
<li className="mt-2">Community, Slack & Email support</li>
|
||||
</ul>
|
||||
For companies using on average 1,000,000 events per month or more, we offer{' '}
|
||||
<b>priority support</b>.
|
||||
|
||||
@@ -22,8 +22,8 @@
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #35416b !important;
|
||||
> header {
|
||||
background: linear-gradient(180deg, #200c39 0%, #220f3f 100%);
|
||||
}
|
||||
|
||||
header a {
|
||||
@@ -79,7 +79,7 @@
|
||||
|
||||
h1 {
|
||||
font-size: 56px;
|
||||
line-height: 72px;
|
||||
line-height: 60px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
@@ -127,9 +127,8 @@
|
||||
}
|
||||
|
||||
.topPageWrapper {
|
||||
background-color: #35416b;
|
||||
background: linear-gradient(180deg, #220f3f 0%, #2c1e60 100%);
|
||||
top: 0;
|
||||
height: 780px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@@ -147,7 +146,7 @@
|
||||
|
||||
@media screen and (min-width: 834px) {
|
||||
.pageHeader h1 {
|
||||
font-size: 56px;
|
||||
font-size: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -160,17 +159,6 @@
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.topPageCol1 {
|
||||
position: relative;
|
||||
width: calc(10 / 24 * 100vw);
|
||||
max-width: calc(10 / 24 * 1440px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.joinUsersText {
|
||||
position: relative;
|
||||
width: 330px;
|
||||
@@ -183,11 +171,6 @@
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.topPageCol1 p {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.joinUsersButtons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -208,29 +191,10 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.topPageCol2 {
|
||||
background-image: url('../../images/computer-dashboard-4.svg') !important;
|
||||
position: relative;
|
||||
height: 410px;
|
||||
width: calc(14 / 24 * 100vw);
|
||||
max-width: calc(14 / 24 * 1440px);
|
||||
background-repeat: no-repeat;
|
||||
background-size: calc(410 / 726 * 1053px) 410px;
|
||||
background-position: 20px top;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 834px) {
|
||||
.topPageWrapperMobile {
|
||||
background-color: #35416b;
|
||||
height: 1000px;
|
||||
}
|
||||
.topSectionWrapperMobile {
|
||||
background-color: #35416b;
|
||||
}
|
||||
.topPageWrapper {
|
||||
background: none;
|
||||
height: 380px;
|
||||
}
|
||||
|
||||
.pageHeader {
|
||||
margin: 0 calc(1 / 12 * 100vw);
|
||||
@@ -242,16 +206,6 @@
|
||||
max-width: 100vw;
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
.topPageCol1 {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
width: 70vw;
|
||||
max-width: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.joinUsersText {
|
||||
text-align: center;
|
||||
width: 70vw;
|
||||
@@ -284,12 +238,12 @@
|
||||
border: solid;
|
||||
border-color: #fff;
|
||||
border-radius: 2px;
|
||||
color: #353f6f;
|
||||
color: #222d5b;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.ant-btn-secondary:hover {
|
||||
background-color: #353f6f !important;
|
||||
background-color: #222d5b !important;
|
||||
color: #fff !important;
|
||||
border-color: #fff !important;
|
||||
border: solid 1px !important;
|
||||
@@ -297,25 +251,25 @@
|
||||
|
||||
.ant-btn-secondary:focus {
|
||||
background-color: #fff !important;
|
||||
color: #353f6f !important;
|
||||
border-color: #353f6f !important;
|
||||
color: #222d5b !important;
|
||||
border-color: #222d5b !important;
|
||||
}
|
||||
|
||||
.ant-btn-primary:hover {
|
||||
background-color: #fff !important;
|
||||
color: #353f6f !important;
|
||||
border-color: #353f6f !important;
|
||||
color: #222d5b !important;
|
||||
border-color: #222d5b !important;
|
||||
}
|
||||
|
||||
.ant-btn-primary:focus {
|
||||
background-color: #353f6f !important;
|
||||
background-color: #222d5b !important;
|
||||
color: #fff !important;
|
||||
border-color: #fff !important;
|
||||
border: solid 1px !important;
|
||||
}
|
||||
|
||||
.ant-btn-primary {
|
||||
background-color: #353f6f;
|
||||
background-color: #222d5b;
|
||||
border-color: #fff;
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
@@ -452,10 +406,6 @@
|
||||
.joinUsersButtons {
|
||||
left: 0px;
|
||||
}
|
||||
.topPageCol1 {
|
||||
margin-left: 5%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 834px) and (max-width: 1076px) {
|
||||
@@ -662,7 +612,6 @@
|
||||
text-align: center;
|
||||
background-color: #35416b;
|
||||
width: 392px;
|
||||
height: 546px;
|
||||
padding: 41px 0;
|
||||
border-radius: 30px;
|
||||
}
|
||||
@@ -677,11 +626,9 @@
|
||||
}
|
||||
|
||||
.whyPosthogElementBody {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
top: 124px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
@@ -702,7 +649,6 @@
|
||||
.startTrialButton {
|
||||
position: relative;
|
||||
align-self: center;
|
||||
width: 330px;
|
||||
height: 64px;
|
||||
font-size: 24px;
|
||||
}
|
||||
@@ -723,11 +669,10 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100vw;
|
||||
height: 986px;
|
||||
}
|
||||
.whyPosthogElement {
|
||||
height: 484px;
|
||||
width: 310px;
|
||||
margin-top: 12px;
|
||||
justify-content: space-between;
|
||||
align-items: space-between;
|
||||
}
|
||||
@@ -753,7 +698,6 @@
|
||||
height: 40px;
|
||||
}
|
||||
.startTrialButton {
|
||||
width: 180px;
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -795,7 +739,7 @@
|
||||
}
|
||||
|
||||
.buildingIsExpensiveText1 h1 {
|
||||
line-height: 72px;
|
||||
line-height: 60px;
|
||||
font-size: 56px !important;
|
||||
font-family: 'Gosha Sans', Arial, Helvetica, sans-serif !important;
|
||||
color: #ffffff;
|
||||
@@ -807,7 +751,7 @@
|
||||
|
||||
.buildingIsExpensiveText2 h1 {
|
||||
display: inline;
|
||||
line-height: 72px;
|
||||
line-height: 60px;
|
||||
font-size: 56px !important;
|
||||
font-family: 'Gosha Sans', Arial, Helvetica, sans-serif !important;
|
||||
color: #ffffff;
|
||||
@@ -815,7 +759,7 @@
|
||||
|
||||
.buildingIsExpensiveText2 h2 {
|
||||
display: inline;
|
||||
line-height: 72px;
|
||||
line-height: 60px;
|
||||
font-size: 40px !important;
|
||||
font-family: 'Gosha Sans', Arial, Helvetica, sans-serif !important;
|
||||
color: #ffffff;
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
.p-title {
|
||||
font-size: 50px;
|
||||
font-weight: 500;
|
||||
font-family: lato;
|
||||
font-family: 'Good Sans';
|
||||
}
|
||||
|
||||
.p-text-primary {
|
||||
|
||||
@@ -2,10 +2,16 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
font-smooth: 1.5px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: auto;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
margin: initial;
|
||||
padding: initial;
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
ol {
|
||||
@@ -15,3 +21,38 @@ ol {
|
||||
ul {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background: rgba(255, 99, 39, 0.9);
|
||||
border-color: rgba(255, 99, 39, 0.9);
|
||||
|
||||
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
|
||||
backdrop-filter: blur(2px);
|
||||
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
|
||||
transition: 0.25s ease all;
|
||||
|
||||
@apply px-4 py-2 font-gosha inline-block rounded font-semibold border text-base-larger text-white hover:text-white uppercase;
|
||||
}
|
||||
|
||||
.button-primary:hover,
|
||||
.button-primary:active,
|
||||
.button-primary:focus {
|
||||
background: rgba(218, 72, 16, 0.9);
|
||||
border-color: rgba(218, 72, 16, 0.9);
|
||||
}
|
||||
|
||||
.bg-purple-gradient {
|
||||
background: linear-gradient(180deg, #200c39 0%, #220f3f 100%);
|
||||
}
|
||||
|
||||
.bg-darkmode-purple {
|
||||
background: #220f3f !important;
|
||||
}
|
||||
|
||||
.bg-lightmode-gray {
|
||||
background: rgb(249, 249, 249) none repeat scroll 0% 0%;
|
||||
}
|
||||
|
||||
.bg-footer {
|
||||
background: #08042f;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from 'react'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { graphql } from 'gatsby'
|
||||
import Layout from '../components/Layout'
|
||||
import 'katex/dist/katex.min.css'
|
||||
@@ -8,6 +8,7 @@ import { SEO } from '../components/seo'
|
||||
import { layoutLogic } from '../logic/layoutLogic'
|
||||
import { useActions, useValues } from 'kea'
|
||||
import { DocsPageSurvey } from '../components/DocsPageSurvey'
|
||||
import { Spin } from 'antd'
|
||||
|
||||
function addIndex(url) {
|
||||
const indexUrls = ['/docs', '/handbook']
|
||||
@@ -20,6 +21,7 @@ function Template({
|
||||
const { sidebarSelectedKey: selectedKey, sidebarEntry } = useValues(layoutLogic)
|
||||
const { setSidebarHide, setAnchorHide, onSidebarContentSelected, setSidebarContentEntry } = useActions(layoutLogic)
|
||||
|
||||
const [runningInBrowser, setRunningInBrowser] = useState(false)
|
||||
const { markdownRemark } = data // data.markdownRemark holds our post data
|
||||
const { frontmatter, html, excerpt, id } = markdownRemark
|
||||
|
||||
@@ -37,36 +39,51 @@ function Template({
|
||||
const isBlogArticlePage = frontmatter.sidebar === 'Blog'
|
||||
const isHandbookPage = frontmatter.sidebar === 'Handbook'
|
||||
|
||||
useEffect(() => {
|
||||
if (window) {
|
||||
setRunningInBrowser(true)
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div className={'post-page ' + (!isBlogArticlePage ? 'post-page-wrapper' : '')}>
|
||||
<Layout
|
||||
onPostPage={true}
|
||||
isBlogArticlePage={isBlogArticlePage}
|
||||
pageTitle={frontmatter.title}
|
||||
isHomePage={false}
|
||||
isDocsPage={isDocsPage}
|
||||
>
|
||||
<SEO
|
||||
title={
|
||||
frontmatter.title + ' - PostHog' + (isDocsPage ? ' Docs' : isHandbookPage ? ' Handbook' : '')
|
||||
}
|
||||
description={frontmatter.description || excerpt}
|
||||
pathname={markdownRemark.fields.slug}
|
||||
article
|
||||
/>
|
||||
<div className="docsPagesContainer">
|
||||
<div className="docsPages">
|
||||
{frontmatter.showTitle && frontmatter.sidebar !== 'Blog' && (
|
||||
<h1 align="center">{frontmatter.title}</h1>
|
||||
{runningInBrowser ? (
|
||||
<Layout
|
||||
onPostPage={true}
|
||||
isBlogArticlePage={isBlogArticlePage}
|
||||
pageTitle={frontmatter.title}
|
||||
isHomePage={false}
|
||||
isDocsPage={isDocsPage}
|
||||
>
|
||||
<SEO
|
||||
title={
|
||||
frontmatter.title +
|
||||
' - PostHog' +
|
||||
(isDocsPage ? ' Docs' : isHandbookPage ? ' Handbook' : '')
|
||||
}
|
||||
description={frontmatter.description || excerpt}
|
||||
pathname={markdownRemark.fields.slug}
|
||||
article
|
||||
/>
|
||||
<div className="docsPagesContainer">
|
||||
<div className="docsPages">
|
||||
{frontmatter.showTitle && frontmatter.sidebar !== 'Blog' && (
|
||||
<h1 align="center">{frontmatter.title}</h1>
|
||||
)}
|
||||
<div className="docsPagesContent" dangerouslySetInnerHTML={{ __html: html }} />
|
||||
</div>
|
||||
{isDocsPage && <DocsPageSurvey />}
|
||||
{(isDocsPage || isHandbookPage) && (
|
||||
<DocsFooter
|
||||
filename={`${addIndex(markdownRemark.fields.slug)}.md`}
|
||||
title={frontmatter.title}
|
||||
/>
|
||||
)}
|
||||
<div className="docsPagesContent" dangerouslySetInnerHTML={{ __html: html }} />
|
||||
</div>
|
||||
{isDocsPage && <DocsPageSurvey />}
|
||||
{(isDocsPage || isHandbookPage) && (
|
||||
<DocsFooter filename={`${addIndex(markdownRemark.fields.slug)}.md`} title={frontmatter.title} />
|
||||
)}
|
||||
</div>
|
||||
</Layout>
|
||||
</Layout>
|
||||
) : (
|
||||
<Spin size="large" style={{ position: 'fixed', top: '50%', left: '50%' }} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
BIN
static/fonts/GoodSans-Bold.woff
Normal file
BIN
static/fonts/GoodSans-Bold.woff
Normal file
Binary file not shown.
BIN
static/fonts/GoodSans-Bold.woff2
Normal file
BIN
static/fonts/GoodSans-Bold.woff2
Normal file
Binary file not shown.
BIN
static/fonts/GoodSans-Medium.woff
Normal file
BIN
static/fonts/GoodSans-Medium.woff
Normal file
Binary file not shown.
BIN
static/fonts/GoodSans-Medium.woff2
Normal file
BIN
static/fonts/GoodSans-Medium.woff2
Normal file
Binary file not shown.
@@ -2,7 +2,17 @@ module.exports = {
|
||||
purge: ['./src/**/*.{js,jsx,ts,tsx}'],
|
||||
darkMode: false, // or 'media' or 'class'
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
fontFamily: {
|
||||
gosha: ['Gosha Sans', 'Arial', 'Helvetica', 'sans-serif'],
|
||||
},
|
||||
fontSize: {
|
||||
'base-larger': '15px',
|
||||
},
|
||||
minHeight: {
|
||||
780: '780px',
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
extend: {},
|
||||
|
||||
Reference in New Issue
Block a user