feat: add codefund ad

gatsby-config.js

@@ -4,13 +4,15 @@ function config({
   github = 'https://github.com/smooth-code/smooth-doc',
   menu = ['Usage'],
   nav = [{ title: 'Usage', url: '/docs/getting-started/' }],
+  codeFundProperty = 268,
 } = {}) {
   return {
     siteMetadata: {
       title: name,
       github,
       menu,
       nav,
+      codeFundProperty,
     },
     pathPrefix: `/open-source/${slug}`,
     plugins: [

package.json

@@ -67,7 +67,7 @@
     "prettier": "^1.17.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "smooth-code-landers": "^1.3.1",
+    "smooth-code-landers": "^1.3.2",
     "standard-version": "^5.0.2"
   }
 }

src/components/BaseLayout.js

@@ -23,7 +23,6 @@ const variants = {
 
 const PageWrapper = styled.div`
   ${p => variants[p.variant]};
-  position: relative;
 `
 
 export function BaseLayout({ children, pageContext, variant = 'default' }) {

src/components/CodeFund.js

@@ -0,0 +1,42 @@
+import React, { useEffect } from 'react'
+import { graphql, StaticQuery } from 'gatsby'
+
+function useScript(src) {
+  useEffect(() => {
+    const script = document.createElement('script')
+    script.src = src
+    script.async = true
+    document.body.appendChild(script)
+    return () => {
+      document.body.removeChild(script)
+    }
+  }, [src])
+}
+
+const QUERY = graphql`
+  query CodeFund {
+    site {
+      siteMetadata {
+        codeFundProperty
+      }
+    }
+  }
+`
+
+function InnerCodeFund({ property }) {
+  useScript(
+    `https://codefund.io/properties/${property}/funder.js?template=vertical&theme=light`,
+  )
+  return <div id="codefund" />
+}
+
+export function CodeFund() {
+  return (
+    <StaticQuery
+      query={QUERY}
+      render={data => (
+        <InnerCodeFund property={data.site.siteMetadata.codeFundProperty} />
+      )}
+    />
+  )
+}

src/components/DocLayout.js

@@ -1,8 +1,9 @@
 import React from 'react'
-import { Grid, styled, up, css, th } from '@smooth-ui/core-sc'
+import { Grid, styled, up, css, th, down } from '@smooth-ui/core-sc'
 import { Sidebar } from './Sidebar'
 import { BaseLayout } from './BaseLayout'
 import { Article } from './Article'
+import { CodeFund } from './CodeFund'
 import { MenuProvider, MenuConsumer } from './MenuContext'
 import Chevron from './icons/Chevron'
 
@@ -51,15 +52,16 @@ const SidebarContainer = styled.div`
       opacity: 1;
       position: relative;
       transform: none;
-      flex: 0 0 200px;
-      margin-left: 80px;
+      flex: 0 0 180px;
+      margin-left: 16px;
     `,
   )}
 
   ${up(
     'lg',
     css`
-      flex: 0 0 300px;
+      flex: 0 0 230px;
+      margin-left: 50px;
     `,
   )}
 `
@@ -126,13 +128,50 @@ const MenuButton = styled.button`
   ${up('sm', 'display: none;')}
 `
 
+const FloatingAd = styled.div`
+  display: none;
+
+  ${up(
+    'sm',
+    css`
+      display: block;
+      float: right;
+      margin-top: 72px;
+      background-color: white;
+      padding: 16px;
+    `,
+  )}
+
+${up(
+  'md',
+  css`
+    float: right;
+  `,
+)}
+
+  ${up(
+    'xl',
+    css`
+      z-index: 500;
+      position: fixed;
+      float: none;
+      bottom: 0;
+      left: 0;
+      margin: 0;
+    `,
+  )}
+`
+
 export function DocLayout({ children, ...props }) {
   return (
     <MenuProvider>
       <BaseLayout variant="light" {...props}>
         <Grid gutter={0}>
           <Wrapper>
             <ArticleContainer>
+              <FloatingAd>
+                <CodeFund />
+              </FloatingAd>
               <Article>{children}</Article>
             </ArticleContainer>
             <MenuConsumer>

src/pages/docs/getting-started.mdx

@@ -6,4 +6,22 @@ order: 1
 
 # Getting Started
 
-Example of getting started page.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus erat cursus rutrum cursus. Sed faucibus mi et tristique cursus. Donec vel sodales ex. Proin ac egestas nibh. Curabitur efficitur urna eu molestie porta. Maecenas pulvinar pulvinar placerat. In mollis ultricies augue a dignissim. Pellentesque gravida massa vitae odio scelerisque fringilla. Nam in erat vitae justo porttitor porttitor. Vivamus aliquet vestibulum eros, eget volutpat turpis interdum eu.
+
+Mauris quis tellus dictum, eleifend risus sit amet, accumsan nulla. Aenean a sem orci. Praesent non tellus lorem. Sed cursus congue nisi eget euismod. Nam ac mauris at diam consequat fringilla. Sed sit amet nulla id dolor semper pulvinar eu sed lorem. Sed in ante eget tortor maximus consequat elementum ultricies diam. Nunc pulvinar, nibh vel ultrices rhoncus, mauris tellus faucibus arcu, in sagittis diam est et nisi. Proin elementum mauris ex, nec dictum nunc sagittis et. Praesent sit amet facilisis est.
+
+Donec vitae convallis justo. In hac habitasse platea dictumst. Pellentesque posuere tellus id nulla aliquet, non venenatis nunc dictum. Nullam imperdiet condimentum risus semper luctus. Nunc lacus enim, vulputate eu massa sit amet, tempus vulputate nulla. Proin vulputate dolor ut condimentum semper. Aenean fermentum mi nec feugiat dapibus. Curabitur ut augue odio. Cras varius ut mauris ut imperdiet.
+
+Nunc leo massa, porta vel velit et, lobortis dapibus felis. Nulla ac dui egestas elit lacinia elementum. Ut faucibus malesuada arcu, quis porta turpis rhoncus ac. Nulla pellentesque ante a libero sagittis lacinia. Ut venenatis ipsum rhoncus nulla ultrices interdum. Sed ut lacus eget elit aliquam maximus a sed urna. Ut iaculis eros et mi commodo, ut elementum dui malesuada. Curabitur nec sapien accumsan ante malesuada aliquet vel et turpis. Vivamus et ante ante. Vivamus finibus dignissim neque, quis tempor mauris eleifend at.
+
+Cras ut magna et arcu mollis tincidunt. Nulla tempor iaculis erat ac malesuada. Curabitur lobortis in odio ac tempor. Praesent id est in tellus tristique fringilla. Nunc urna felis, venenatis ut bibendum a, convallis vitae turpis. Phasellus nisl sem, imperdiet sit amet dui nec, auctor faucibus eros. Aenean bibendum metus sollicitudin dui ornare iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vestibulum lacus at massa condimentum aliquam. Fusce quis leo magna. Morbi a sollicitudin augue. Fusce tortor tortor, imperdiet in interdum sit amet, vulputate vel urna. Proin purus odio, vulputate non volutpat quis, aliquet in quam.
+
+Sed faucibus dolor quis elit venenatis, eget suscipit urna pretium. Donec a aliquam massa. Proin euismod viverra bibendum. Nulla rhoncus venenatis purus, vitae pulvinar ligula euismod id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc at mollis tortor. Phasellus a porta leo. Sed id diam ex. Vestibulum condimentum porttitor leo non volutpat. Nam in sem ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut dignissim erat non augue rhoncus convallis. Curabitur rutrum lectus magna.
+
+Aenean pellentesque felis vitae augue facilisis, egestas semper libero bibendum. Morbi lobortis arcu quam, eu condimentum mauris interdum id. Duis ac nisl elit. Donec luctus maximus ex, dignissim feugiat eros lobortis a. Morbi bibendum mi eu erat condimentum, a interdum turpis venenatis. Sed rhoncus nec leo id pretium. Quisque ultricies semper hendrerit. Donec lorem ex, tempor eget libero eu, pretium tempus ex. In velit diam, rutrum ut velit ac, dictum fermentum mi. Suspendisse gravida odio non egestas volutpat. Proin ullamcorper rutrum cursus. Phasellus sapien libero, faucibus aliquam tortor eget, sollicitudin volutpat sem. Suspendisse commodo enim eget libero tincidunt, eget pellentesque risus cursus. Nulla non massa facilisis, semper nisi a, bibendum nisl. Curabitur interdum enim a quam luctus, in tristique nibh laoreet.
+
+Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris iaculis augue neque, sed malesuada neque condimentum id. Fusce vel convallis lacus. Nulla dapibus, sapien quis mattis blandit, sem lorem mattis lectus, vel vulputate odio sem sit amet tortor. Sed ac nunc nisl. Morbi turpis ligula, tempor eget nisl sit amet, lobortis dignissim felis. Maecenas fermentum quam non risus accumsan, eu tincidunt neque consectetur. In cursus felis eu dapibus molestie. Pellentesque quis purus gravida, vulputate leo a, venenatis nulla. Morbi nulla odio, interdum in massa et, euismod fringilla mi. Etiam facilisis sem ac lacus scelerisque eleifend. In ac feugiat metus, ut tempus magna. Sed eget lectus dolor. Vivamus in efficitur dolor.
+
+Duis mattis felis vitae lectus fermentum, at faucibus augue blandit. Curabitur vitae neque et risus rutrum aliquam. Aliquam malesuada, massa in pellentesque accumsan, magna lacus finibus ex, vel efficitur ante neque ut velit. Nullam eget commodo mauris. Mauris pretium interdum sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut interdum posuere dolor nec dapibus. Maecenas non tempus velit. Morbi eget risus risus. Integer bibendum molestie lorem tincidunt porttitor.
+
+Etiam elementum, odio sed maximus fringilla, massa dui efficitur ante, sed dictum est tellus at augue. Integer eleifend eros quis nibh aliquet rhoncus. Proin nibh dui, iaculis et molestie quis, interdum in felis. Fusce condimentum iaculis eleifend. Nam porttitor velit eu accumsan vehicula. Donec dapibus commodo risus vel lacinia. Phasellus et aliquet nisl. Proin eu mi eget sapien tempus malesuada at vitae ante. Fusce rhoncus eros in ligula mattis, et elementum lacus pulvinar. Maecenas rhoncus et eros a molestie.

src/pages/docs/other.mdx

@@ -0,0 +1,27 @@
+---
+menu: Usage
+title: Other
+order: 2
+---
+
+# Other
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus erat cursus rutrum cursus. Sed faucibus mi et tristique cursus. Donec vel sodales ex. Proin ac egestas nibh. Curabitur efficitur urna eu molestie porta. Maecenas pulvinar pulvinar placerat. In mollis ultricies augue a dignissim. Pellentesque gravida massa vitae odio scelerisque fringilla. Nam in erat vitae justo porttitor porttitor. Vivamus aliquet vestibulum eros, eget volutpat turpis interdum eu.
+
+Mauris quis tellus dictum, eleifend risus sit amet, accumsan nulla. Aenean a sem orci. Praesent non tellus lorem. Sed cursus congue nisi eget euismod. Nam ac mauris at diam consequat fringilla. Sed sit amet nulla id dolor semper pulvinar eu sed lorem. Sed in ante eget tortor maximus consequat elementum ultricies diam. Nunc pulvinar, nibh vel ultrices rhoncus, mauris tellus faucibus arcu, in sagittis diam est et nisi. Proin elementum mauris ex, nec dictum nunc sagittis et. Praesent sit amet facilisis est.
+
+Donec vitae convallis justo. In hac habitasse platea dictumst. Pellentesque posuere tellus id nulla aliquet, non venenatis nunc dictum. Nullam imperdiet condimentum risus semper luctus. Nunc lacus enim, vulputate eu massa sit amet, tempus vulputate nulla. Proin vulputate dolor ut condimentum semper. Aenean fermentum mi nec feugiat dapibus. Curabitur ut augue odio. Cras varius ut mauris ut imperdiet.
+
+Nunc leo massa, porta vel velit et, lobortis dapibus felis. Nulla ac dui egestas elit lacinia elementum. Ut faucibus malesuada arcu, quis porta turpis rhoncus ac. Nulla pellentesque ante a libero sagittis lacinia. Ut venenatis ipsum rhoncus nulla ultrices interdum. Sed ut lacus eget elit aliquam maximus a sed urna. Ut iaculis eros et mi commodo, ut elementum dui malesuada. Curabitur nec sapien accumsan ante malesuada aliquet vel et turpis. Vivamus et ante ante. Vivamus finibus dignissim neque, quis tempor mauris eleifend at.
+
+Cras ut magna et arcu mollis tincidunt. Nulla tempor iaculis erat ac malesuada. Curabitur lobortis in odio ac tempor. Praesent id est in tellus tristique fringilla. Nunc urna felis, venenatis ut bibendum a, convallis vitae turpis. Phasellus nisl sem, imperdiet sit amet dui nec, auctor faucibus eros. Aenean bibendum metus sollicitudin dui ornare iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vestibulum lacus at massa condimentum aliquam. Fusce quis leo magna. Morbi a sollicitudin augue. Fusce tortor tortor, imperdiet in interdum sit amet, vulputate vel urna. Proin purus odio, vulputate non volutpat quis, aliquet in quam.
+
+Sed faucibus dolor quis elit venenatis, eget suscipit urna pretium. Donec a aliquam massa. Proin euismod viverra bibendum. Nulla rhoncus venenatis purus, vitae pulvinar ligula euismod id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc at mollis tortor. Phasellus a porta leo. Sed id diam ex. Vestibulum condimentum porttitor leo non volutpat. Nam in sem ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut dignissim erat non augue rhoncus convallis. Curabitur rutrum lectus magna.
+
+Aenean pellentesque felis vitae augue facilisis, egestas semper libero bibendum. Morbi lobortis arcu quam, eu condimentum mauris interdum id. Duis ac nisl elit. Donec luctus maximus ex, dignissim feugiat eros lobortis a. Morbi bibendum mi eu erat condimentum, a interdum turpis venenatis. Sed rhoncus nec leo id pretium. Quisque ultricies semper hendrerit. Donec lorem ex, tempor eget libero eu, pretium tempus ex. In velit diam, rutrum ut velit ac, dictum fermentum mi. Suspendisse gravida odio non egestas volutpat. Proin ullamcorper rutrum cursus. Phasellus sapien libero, faucibus aliquam tortor eget, sollicitudin volutpat sem. Suspendisse commodo enim eget libero tincidunt, eget pellentesque risus cursus. Nulla non massa facilisis, semper nisi a, bibendum nisl. Curabitur interdum enim a quam luctus, in tristique nibh laoreet.
+
+Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris iaculis augue neque, sed malesuada neque condimentum id. Fusce vel convallis lacus. Nulla dapibus, sapien quis mattis blandit, sem lorem mattis lectus, vel vulputate odio sem sit amet tortor. Sed ac nunc nisl. Morbi turpis ligula, tempor eget nisl sit amet, lobortis dignissim felis. Maecenas fermentum quam non risus accumsan, eu tincidunt neque consectetur. In cursus felis eu dapibus molestie. Pellentesque quis purus gravida, vulputate leo a, venenatis nulla. Morbi nulla odio, interdum in massa et, euismod fringilla mi. Etiam facilisis sem ac lacus scelerisque eleifend. In ac feugiat metus, ut tempus magna. Sed eget lectus dolor. Vivamus in efficitur dolor.
+
+Duis mattis felis vitae lectus fermentum, at faucibus augue blandit. Curabitur vitae neque et risus rutrum aliquam. Aliquam malesuada, massa in pellentesque accumsan, magna lacus finibus ex, vel efficitur ante neque ut velit. Nullam eget commodo mauris. Mauris pretium interdum sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut interdum posuere dolor nec dapibus. Maecenas non tempus velit. Morbi eget risus risus. Integer bibendum molestie lorem tincidunt porttitor.
+
+Etiam elementum, odio sed maximus fringilla, massa dui efficitur ante, sed dictum est tellus at augue. Integer eleifend eros quis nibh aliquet rhoncus. Proin nibh dui, iaculis et molestie quis, interdum in felis. Fusce condimentum iaculis eleifend. Nam porttitor velit eu accumsan vehicula. Donec dapibus commodo risus vel lacinia. Phasellus et aliquet nisl. Proin eu mi eget sapien tempus malesuada at vitae ante. Fusce rhoncus eros in ligula mattis, et elementum lacus pulvinar. Maecenas rhoncus et eros a molestie.

yarn.lock

@@ -11788,10 +11788,10 @@ slice-ansi@^2.1.0:
     astral-regex "^1.0.0"
     is-fullwidth-code-point "^2.0.0"
 
-smooth-code-landers@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/smooth-code-landers/-/smooth-code-landers-1.3.1.tgz#51f2e5b6a98f60d352f2f4f1adfd0a67403f4d1d"
-  integrity sha512-Z4DdsFWIOS3H2s9tspCQn+gpx1u5b7AxO5DzZSzfswQULZ7D4vZznnf3jGReZMJJfOzvtLgsAURMgSNB/ayU5Q==
+smooth-code-landers@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/smooth-code-landers/-/smooth-code-landers-1.3.2.tgz#71e606f140e4668bd9b30dc20a992b695ca3471d"
+  integrity sha512-LeIvPo86MQBdh5xVntlcem8La4IdVA9klkPZYpPjxFyK3c1BzNaitm2Gm70MhNk4Gc+zMATDwxqZ1gZZRlatQA==
 
 snake-case@^2.1.0:
   version "2.1.0"