MDX button

config.js

@@ -13,6 +13,12 @@ const config = {
       { name: 'Community', link: '/' },
       { name: 'FAQ', link: '/' },
     ],
+    search: {
+      indexName: '',
+      algoliaAppId: process.env.GATSBY_ALGOLIA_APP_ID,
+      algoliaSearchKey: process.env.GATSBY_ALGOLIA_SEARCH_KEY,
+      algoliaAdminKey: process.env.ALGOLIA_ADMIN_KEY,
+    },
   },
   siteMetadata: {
     title: 'Prisma2.0 | Docs',

content/01-getting-started/04-example.mdx

@@ -11,6 +11,9 @@ dbSwitcher: true
 
 This page won't be shown in sidebar. For now, h2 tags cannot be written inside `SwitchTech` block. But still can include headings using `<h3>, <h4>` tags and not using `### headings`.
 `<h2>` tags wont be shown in TOC yet.
+<ButtonLink color="dark" type="primary" href="https://prisma2.netlify.com/getting-started/quickstart" target="_blank">
+    Quickstart (5 min)
+</ButtonLink>
 
 <SwitchTech technologies={['node','*']}>
 

package.json

@@ -7,10 +7,12 @@
     "@mdx-js/mdx": "^1.5.5",
     "@mdx-js/react": "^1.5.5",
     "@philpl/buble": "^0.19.7",
+    "algoliasearch": "^4.1.0",
     "babel-plugin-styled-components": "^1.10.0",
     "downshift": "^5.0.5",
     "gatsby": "^2.1.31",
     "gatsby-image": "^2.0.33",
+    "gatsby-plugin-algolia": "^0.5.0",
     "gatsby-plugin-manifest": "^2.0.24",
     "gatsby-plugin-mdx": "^1.0.73",
     "gatsby-plugin-offline": "^2.0.25",
@@ -26,6 +28,7 @@
     "gatsby-transformer-remark": "^2.3.2",
     "gatsby-transformer-sharp": "^2.1.17",
     "lodash": "^4.17.15",
+    "polished": "^3.5.1",
     "prism-react-renderer": "^1.0.2",
     "prismjs": "^1.15.0",
     "prop-types": "^15.7.2",
@@ -35,11 +38,13 @@
     "react-helmet": "^5.2.0",
     "react-hooks-global-state": "^1.0.0",
     "react-hooks-testing-library": "^0.3.6",
+    "react-instantsearch-dom": "^6.4.0",
     "react-live": "^2.2.2",
     "react-loadable": "^5.5.0",
     "react-testing-library": "^6.0.0",
     "smooth-scroll": "^16.1.2",
     "styled-components": "^4.1.3",
+    "styled-components-ts": "^0.0.15",
     "write": "^2.0.0"
   },
   "keywords": [

src/components/customMdx/button.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import styled from 'styled-components';
+import ArrowRight from '../../icons/ArrowRight';
+import { darken } from 'polished';
+import withProps from 'styled-components-ts';
+
+export interface ButtonProps {
+  href?: string;
+  target?: string;
+  block?: boolean;
+  color?: ButtonColor;
+  disabled?: boolean;
+  arrow?: boolean;
+  children?: any;
+  onClick?: any;
+  arrowLeft?: boolean;
+}
+
+type ButtonColor = 'red' | 'green' | 'grey' | 'grey-bg' | 'dark';
+const colorMap = {
+  red: 'white',
+  green: 'white',
+  grey: '#3D556B',
+  'grey-bg': 'white',
+  dark: 'white',
+};
+
+const backgroundColorMap = {
+  red: '#ff4f56',
+  green: '#15BD76',
+  grey: 'white',
+  'grey-bg': '#8fa6b2',
+  dark: 'rgb(12, 52, 75)',
+};
+
+export const ButtonWrapper = withProps<ButtonProps>(styled.a)`
+    padding: 11px 14px;
+    display: inline-flex;
+    align-items: center;
+    ${p => (p.block ? 'width: 100%;' : '')}
+    border: none;
+    text-decoration: none;
+    height: 40px;
+    font-size: 1rem;
+    box-sizing: border-box;
+    outline: none;
+    opacity: ${p => (p.disabled ? '0.2' : 1)};
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    background: ${p => backgroundColorMap[p.color || 'green']};
+    color: ${p => colorMap[p.color || 'green']} !important;
+    line-height: 1;
+    font-size: 14px;
+    font-weight: 700;
+    cursor: ${p => (p.disabled ? 'default' : 'pointer')};
+    pointer-events: ${p => (p.disabled ? 'none' : 'all')};
+    border-radius: 6px;
+    transition: color 150ms ease 0s, background 150ms ease 0s, transform 100ms ease 0s;
+    white-space: nowrap;
+    word-break: keep-all;
+    &:hover {
+      background: ${p => darken(0.04, backgroundColorMap[p.color || 'green'])};
+    }
+    &:focus {
+      background: ${p => darken(0.07, backgroundColorMap[p.color || 'green'])};
+    }
+  `;
+
+const ButtonLink = (props: ButtonProps) => (
+  <ButtonWrapper {...props}>
+    {props.arrowLeft && <StyledArrowLeft />}
+    {props.children}
+    {props.arrow && <StyledArrow />}
+  </ButtonWrapper>
+);
+
+const StyledArrow = styled(ArrowRight)`
+  margin-left: 12px;
+`;
+
+const StyledArrowLeft = styled(ArrowRight)`
+  margin-right: 12px;
+  transform: rotate(180deg);
+`;
+
+export default ButtonLink;

src/components/customMdx/index.tsx

@@ -5,6 +5,7 @@ import Code from './code';
 import Pre from './pre';
 import CollapseBox from './collapsible';
 import Table from './table';
+import ButtonLink from './button';
 import makeHeading from './headings';
 
 export default {
@@ -22,4 +23,5 @@ export default {
   code: Code,
   details: CollapseBox,
   table: Table,
+  ButtonLink
 };

src/utils/algolia.ts

@@ -0,0 +1,42 @@
+const pageQuery = `{
+  pages: allMdx {
+    edges {
+      node {
+        objectID: id
+        fields {
+          slug
+        }
+        headings {
+          value
+        }
+        frontmatter {
+          title
+          metaDescription 
+        }
+        excerpt(pruneLength: 50000)
+      }
+    }
+  }
+}`;
+
+const flatten = (arr: any) =>
+  arr.map(({ node: { frontmatter, fields, ...rest } }: any) => ({
+    ...frontmatter,
+    ...fields,
+    ...rest,
+  }));
+
+const settings = { attributesToSnippet: [`excerpt:20`] };
+
+const indexName = '';
+
+const queries = [
+  {
+    query: pageQuery,
+    transformer: ({ data }: any) => flatten(data.pages.edges),
+    indexName: `${indexName}`,
+    settings,
+  },
+];
+
+module.exports = queries;