BoostIO · Rokt33r · May 7, 2020 · May 6, 2020 · May 6, 2020 · May 6, 2020
diff --git a/homepage/.babelrc b/homepage/.babelrc
@@ -0,0 +1,11 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "ssr": true
+      }
+    ]
+  ]
+}
diff --git a/homepage/.gitignore b/homepage/.gitignore
@@ -0,0 +1,5 @@
+.next
+node_modules
+
+.now
+out
diff --git a/homepage/components/DefaultLayout.tsx b/homepage/components/DefaultLayout.tsx
@@ -0,0 +1,73 @@
+import React from 'react'
+import Head from 'next/head'
+
+import GlobalStyle from './GlobalStyle'
+import Header from './organisms/Header'
+import Footer from './organisms/Footer'
+
+const DefaultLayout: React.FC = ({ children }) => (
+  <>
+    <Head>
+      <title>Boost Note | Boost Happiness, Productivity, and Creativity.</title>
+
+      <meta charSet='utf-8' />
+      <meta
+        name='viewport'
+        content='width=device-width, initial-scale=1, maximum-scale=1'
+      />
+      <meta name='subject' content='Boost Note' />
+      <meta
+        name='description'
+        content="Boost Note is an intuitive and stylish markdown editor for developers. It's fully open-source."
+      />
+      <meta
+        name='keyword'
+        content='note app,note-taking,snippet,code,engineer,development,tool,programmer,evernote,markdown,open source'
+      />
+      <meta name='author' content='BoostIO, kazz@boostio.co' />
+      <meta name='robots' content='INDEX,FOLLOW' />
+
+      <meta property='og:type' content='website' />
+      <meta property='og:title' content='Boost Note' />
+      <meta
+        property='og:description'
+        content="Boost Note is an intuitive and stylish markdown editor for developers. It's fully open-source."
+      />
+      <meta property='og:image' content='https://boostnote.io/static/ogp.jpg' />
+      <meta property='og:image:alt' content='Image of Boost Note App' />
+      <meta property='og:url' content='https://boostnote.io/' />
+      <meta property='og:site_name' content='Boost Note' />
+      <meta property='fb:app_id' content='966242223397117' />
+
+      <meta name='twitter:card' content='summary' />
+      <meta name='twitter:url' content='https://boostnote.io/' />
+      <meta name='twitter:title' content='Boost Note' />
+      <meta
+        name='twitter:description'
+        content="Boost Note is an intuitive and stylish markdown editor for developers. It's fully open-source."
+      />
+      <meta
+        name='twitter:image:src'
+        content='https://boostnote.io/static/ogp.jpg'
+      />
+      <meta name='twitter:site' content='Boost Note' />
+
+      <link rel='icon' href='/static/favicon.ico' />
+      <link
+        rel='apple-touch-icon'
+        sizes='180x180'
+        href='/static/apple-touch-icon.png'
+      />
+    </Head>
+
+    <GlobalStyle />
+
+    <Header />
+
+    <main>{children}</main>
+
+    <Footer />
+  </>
+)
+
+export default DefaultLayout
diff --git a/homepage/components/GlobalStyle.ts b/homepage/components/GlobalStyle.ts
@@ -0,0 +1,35 @@
+import { createGlobalStyle } from 'styled-components'
+import { BaseTheme } from '../lib/styled'
+
+const GlobalStyle = createGlobalStyle<{ theme: BaseTheme }>`
+  * {
+    box-sizing: border-box;
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    margin: 0;
+    background-color: ${({ theme }) => theme.colors.white};
+    color: ${({ theme }) => theme.colors.black};
+    font-family: -apple-system, BlinkMacSystemFont,
+                 "Segoe UI", Roboto, "Helvetica Neue",
+                 Arial, "Noto Sans", sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+  }
+
+  ul {
+    margin: 0;
+    padding-left: 0;
+    list-style: none;
+  }
+
+  a {
+    text-decoration: none;
+  }
+`
+
+export default GlobalStyle
diff --git a/homepage/components/atoms/Box.tsx b/homepage/components/atoms/Box.tsx
@@ -0,0 +1,9 @@
+import styled from '../../lib/styled'
+import { space, SpaceProps, color, ColorProps } from 'styled-system'
+
+const Box = styled.div<SpaceProps & ColorProps>`
+  ${space}
+  ${color}
+`
+
+export default Box
diff --git a/homepage/components/atoms/Button.tsx b/homepage/components/atoms/Button.tsx
@@ -0,0 +1,28 @@
+import styled from '../../lib/styled'
+import { space, color, typography } from 'styled-system'
+
+const Button = styled.button`
+  padding: 10px;
+  display: inline-block;
+  ${space}
+  ${color}
+  ${typography}
+
+  border-radius: 4px;
+  border: solid 1px ${({ theme }) => theme.colors.gray};
+  white-space: nowrap;
+  font-family: SFMono-Regular,Consolas,Liberation, Mono,Menlo,monospace;
+
+
+  &:hover {
+    cursor: pointer;
+    transform: translateY(-3px);
+    transition: .2s cubic-bezier(0, 0, .25, 1);
+  }
+  &:disabled {
+    cursor: default;
+    opacity: .5;
+  }
+`
+
+export default Button
diff --git a/homepage/components/atoms/ButtonLink.tsx b/homepage/components/atoms/ButtonLink.tsx
@@ -0,0 +1,37 @@
+import styled from '../../lib/styled'
+import {
+  space,
+  color,
+  typography,
+  SpaceProps,
+  ColorProps,
+  TypographyProps,
+} from 'styled-system'
+
+const ButtonLink = styled.a<SpaceProps & ColorProps & TypographyProps>`
+  padding: 1em;
+  display: inline-block;
+  ${space}
+  ${color}
+  ${typography}
+
+  border-radius: 4px;
+  border: solid 1px ${({ theme }) => theme.colors.gray};
+  white-space: nowrap;
+  font-family: SFMono-Regular,Consolas,Liberation, Mono,Menlo,monospace;
+
+  &:hover {
+    cursor: pointer;
+    transform: translateY(-3px);
+    transition: .2s cubic-bezier(0, 0, .25, 1);
+  }
+  &:disabled {
+    cursor: default;
+    opacity: .5;
+  }
+  &>* {
+    vertical-align: middle;
+  }
+`
+
+export default ButtonLink
diff --git a/homepage/components/atoms/Column.tsx b/homepage/components/atoms/Column.tsx
@@ -0,0 +1,19 @@
+import styled from '../../lib/styled'
+import {
+  space,
+  layout,
+  flexbox,
+  LayoutProps,
+  SpaceProps,
+  FlexboxProps,
+} from 'styled-system'
+
+const Column = styled.div<SpaceProps & LayoutProps & FlexboxProps>`
+  padding-left: ${({ theme }) => theme.space[3]}px;
+  padding-right: ${({ theme }) => theme.space[3]}px;
+  ${space}
+  ${layout}
+  ${flexbox}
+`
+
+export default Column
diff --git a/homepage/components/atoms/Container.tsx b/homepage/components/atoms/Container.tsx
@@ -0,0 +1,11 @@
+import styled from '../../lib/styled'
+import { space, SpaceProps, color, ColorProps } from 'styled-system'
+
+const Container = styled.div<SpaceProps | ColorProps>`
+  max-width: 96em;
+  margin: 0 auto;
+  ${space}
+  ${color}
+`
+
+export default Container
diff --git a/homepage/components/atoms/DownloadButtonLink.tsx b/homepage/components/atoms/DownloadButtonLink.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { sendGAEvent, queueNavigateToGA } from '../../lib/analytics'
+import ButtonLink from './ButtonLink'
+
+interface DownloadButtonLinkProps {
+  href: string
+  gaEventName: string
+}
+
+const DownloadButtonLink: React.FC<DownloadButtonLinkProps> = ({
+  children,
+  href,
+  gaEventName,
+}) => {
+  return (
+    <ButtonLink
+      bg='teal'
+      color='white'
+      mx={1}
+      my={[1, 0]}
+      py={2}
+      href={href}
+      onClick={(event) => {
+        event.preventDefault()
+        sendGAEvent(gaEventName)
+        queueNavigateToGA(href)
+      }}
+    >
+      {children}
+    </ButtonLink>
+  )
+}
+
+export default DownloadButtonLink
diff --git a/homepage/components/atoms/FlexBox.tsx b/homepage/components/atoms/FlexBox.tsx
@@ -0,0 +1,10 @@
+import styled from '../../lib/styled'
+import { space, SpaceProps, flexbox, FlexboxProps } from 'styled-system'
+
+const FlexBox = styled.div<SpaceProps & FlexboxProps>`
+  display: flex;
+  ${space}
+  ${flexbox}
+`
+
+export default FlexBox
diff --git a/homepage/components/atoms/HomeLogoLink.tsx b/homepage/components/atoms/HomeLogoLink.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import Link from 'next/link'
+
+const HomeLogoLink = () => {
+  return (
+    <Link href='/'>
+      <a>
+        <img alt='Boost Note Logo' src='/static/logo.svg' />
+      </a>
+    </Link>
+  )
+}
+
+export default HomeLogoLink
diff --git a/homepage/components/atoms/Icon.tsx b/homepage/components/atoms/Icon.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import { Icon as MdiIcon } from '@mdi/react'
+
+interface IconProps {
+  path: string
+  color?: string
+  size?: number
+  style?: React.CSSProperties
+  className?: string
+  spin?: boolean
+}
+
+const Icon = ({
+  path,
+  color = 'currentColor',
+  size,
+  style,
+  className,
+  spin,
+}: IconProps) => (
+  <MdiIcon
+    path={path}
+    style={{
+      ...(size == null
+        ? {
+            width: '1em',
+            height: '1em',
+          }
+        : {
+            width: `${size}px`,
+            height: `${size}px`,
+          }),
+      ...style,
+    }}
+    color={color}
+    className={className}
+    spin={spin}
+  />
+)
+
+export default Icon
diff --git a/homepage/components/atoms/PageTitle.tsx b/homepage/components/atoms/PageTitle.tsx
@@ -0,0 +1,8 @@
+import styled from '../../lib/styled'
+
+const PageTitle = styled.h2`
+  margin: ${({ theme }) => theme.space[0]};
+  font-size: ${({ theme }) => theme.fontSizes[5]}px;
+`
+
+export default PageTitle
diff --git a/homepage/components/atoms/Row.tsx b/homepage/components/atoms/Row.tsx
@@ -0,0 +1,13 @@
+import styled from '../../lib/styled'
+import { space, flexbox } from 'styled-system'
+
+const Row = styled.div`
+  ${space}
+  ${flexbox}
+
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+`
+
+export default Row
diff --git a/homepage/components/atoms/Text.tsx b/homepage/components/atoms/Text.tsx
@@ -0,0 +1,17 @@
+import styled from '../../lib/styled'
+import {
+  space,
+  SpaceProps,
+  color,
+  ColorProps,
+  typography,
+  TypographyProps,
+} from 'styled-system'
+
+const Text = styled.div<SpaceProps & ColorProps & TypographyProps>`
+  ${space}
+  ${color}
+  ${typography}
+`
+
+export default Text