feat(website): init

2020-10-05 10:14:49 +02:00
parent f54b93b319
commit 277e032770
140 changed files with 30517 additions and 0 deletions
@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { Flex, Box } from 'reflexbox';
+
+import Page from 'components/Page';
+import Sidebar from 'components/Sidebar';
+
+const Wrapper = styled(Flex)`
+  border-top: 1px solid ${(p) => p.theme.colors.silverLighten30};
+`;
+
+const left =
+  typeof window !== 'undefined' && window.innerWidth > 1000
+    ? Math.min(350, window.innerWidth * 0.3) / 2
+    : 0;
+
+const DocWrapper = styled(Box)`
+  max-width: 620px;
+  margin: 0 auto;
+  position: relative;
+`;
+
+export default ({ children, menu = [], ...rest }) => (
+  <Page {...rest} footerBorder>
+    <Wrapper>
+      <Sidebar menu={menu} isDocs />
+      <DocWrapper>{children}</DocWrapper>
+    </Wrapper>
+  </Page>
+);
@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { Flex } from 'reflexbox';
+
+import Page from 'components/Page';
+import Sidebar from 'components/Sidebar';
+import useExamplePages from 'hooks/useExamplePages';
+
+const Wrapper = styled(Flex)`
+  border-top: 1px solid ${(p) => p.theme.colors.silverLighten30};
+  height: 100%;
+  flex-grow: 1;
+`;
+
+export default ({ children, title, slug }) => {
+  const menu = useExamplePages();
+
+  const metaTags = {
+    title: `React Flow - ${title} Example`,
+    siteUrl: `https://reactflow.dev/examples/${slug}`,
+    robots: 'index, follow',
+  };
+
+  return (
+    <Page metaTags={metaTags} footerBorder>
+      <Wrapper>
+        <Sidebar menu={menu} />
+        {children}
+      </Wrapper>
+    </Page>
+  );
+};
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+const MetaTags = ({
+  title,
+  description,
+  siteUrl,
+  robots,
+  image,
+  pathname,
+  article,
+}) => {
+  if (pathname) {
+    siteUrl = `${siteUrl}${pathname}`;
+  }
+
+  if (image) {
+    image = `https://reactflow.dev${image}`;
+  } else {
+    image = 'https://reactflow.dev/images/webkid-social.jpg';
+  }
+
+  return (
+    <Helmet defaultTitle="React Flow">
+      <html lang="en" />
+      <title>{title}</title>
+      {description && <meta name="description" content={description} />}
+      {description && <meta name="robots" content={robots} />}
+
+      {siteUrl && <meta property="og:url" content={siteUrl} />}
+      {(article ? true : null) && <meta property="og:type" content="article" />}
+      {title && <meta property="og:title" content={title} />}
+      {description && <meta property="og:description" content={description} />}
+      {image && <meta property="og:image" content={image} />}
+
+      <meta name="twitter:card" content="summary_large_image" />
+      {title && <meta name="twitter:title" content={title} />}
+      {description && <meta name="twitter:description" content={description} />}
+      {image && <meta name="twitter:image" content={image} />}
+
+      <script
+        src="https://cdn.usefathom.com/script.js"
+        site="LXMRMWLB"
+        defer
+      ></script>
+    </Helmet>
+  );
+};
+
+export default MetaTags;
@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { ThemeProvider } from 'emotion-theming';
+import { Flex, Box } from 'reflexbox';
+
+import Header from 'components/Header';
+import Footer from 'components/Footer';
+import themes from 'themes';
+
+import NormalizeStyle from 'themes/normalize';
+import GlobalStyle from 'themes/global';
+import MetaTags from './MetaTags';
+import { getThemeColor } from 'utils/css-utils';
+
+const PageWrapper = styled(Flex)`
+  color: ${getThemeColor('text')};
+  width: 100%;
+  position: relative;
+  flex-direction: column;
+  height: 100vh;
+  position: relative;
+`;
+
+const PageContent = styled(Box)`
+  flex: 1 0 auto;
+`;
+
+const Page = ({
+  children,
+  theme = 'light',
+  metaTags,
+  footerBorder = false,
+  ...rest
+}) => {
+  const pageTheme = themes[theme];
+
+  return (
+    <ThemeProvider theme={pageTheme}>
+      <MetaTags {...metaTags} />
+      <NormalizeStyle />
+      <GlobalStyle />
+      <PageWrapper>
+        <Header />
+        <PageContent {...rest}>{children}</PageContent>
+        <Footer hasBorder={footerBorder} />
+      </PageWrapper>
+    </ThemeProvider>
+  );
+};
+
+export default Page;