examples page

content/docs/examples.md

@@ -0,0 +1,95 @@
+---
+title: Markdown Examples
+slug: markdown-examples
+navigation:
+  show: true
+---
+
+## Academy Callout
+
+```html
+<academy-link img="/img/search-darth-vader.gif" courselink="https://sendgrid.com/">
+
+### I'm a course call out title
+
+Montes sociis turpis egestas fermentum tempus lectus cubilia vulputate justo, placerat suscipit mollis nostra mauris at sed adipiscing, enim pharetra laoreet ridiculus litora nunc.
+
+</academy-link>
+```
+
+<academy-link img="/img/search-darth-vader.gif" courselink="https://sendgrid.com/">
+
+### I'm a course call out title
+
+Montes sociis turpis egestas fermentum tempus lectus cubilia vulputate justo, placerat suscipit mollis nostra mauris at sed adipiscing, enim pharetra laoreet ridiculus litora nunc.
+
+</academy-link>
+
+## Callouts
+
+### Callout Info
+
+```html
+<call-out>
+
+Montes sociis turpis egestas fermentum tempus lectus cubilia vulputate justo, placerat suscipit mollis nostra mauris at sed adipiscing, enim pharetra laoreet ridiculus litora nunc.
+
+</callout>
+```
+
+<call-out>
+
+Montes sociis turpis egestas fermentum tempus lectus cubilia vulputate justo, placerat suscipit mollis nostra mauris at sed adipiscing, enim pharetra laoreet ridiculus litora nunc.
+
+</call-out>
+
+### Callout Warning
+
+```html
+<call-out type="warning">
+
+Montes sociis turpis egestas fermentum tempus lectus cubilia vulputate justo, placerat suscipit mollis nostra mauris at sed adipiscing, enim pharetra laoreet ridiculus litora nunc.
+
+</callout>
+```
+<call-out type="warning">
+
+Montes sociis turpis egestas fermentum tempus lectus cubilia vulputate justo, placerat suscipit mollis nostra mauris at sed adipiscing, enim pharetra laoreet ridiculus litora nunc.
+
+</call-out>
+
+## Code Group
+
+````html
+<code-group langs="Html, JavaScript, Go">
+
+```html
+  <div class="yay-html">Yay HTML</div>
+```
+
+```javascript
+  consol.log('Yay, JavaScript!')
+```
+
+```go
+  print('Yay, Go!');
+```
+</code-group>
+````
+
+
+<code-group langs="Html, JavaScript, Go">
+
+```html
+  <div class="yay-html">Yay HTML</div>
+```
+
+```javascript
+  consol.log('Yay, JavaScript!')
+```
+
+```go
+  print('Yay, Go!');
+```
+</code-group>
+

data/SiteConfig.js

@@ -14,4 +14,6 @@ const config = {
   userTwitter: 'sendgrid',
 };
 
+config.envPrefix = process.env.NODE_ENV === 'development' ? '' : config.pathPrefix;
+
 module.exports = config;

plugins/sendgrid-remark-headers/index.js

@@ -21,6 +21,7 @@ module.exports = ({ markdownAST }) => {
     patch(data, 'hProperties', {});
     patch(data.htmlAttributes, 'id', id);
     patch(data.hProperties, 'id', id);
+    patch(data.hProperties, 'class', 'sg-remarked-linked-header');
 
     node.children.unshift({
       type: 'link',

src/componentsMarkdown/AcademyLink.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import config from '../../data/SiteConfig';
 
 export default function AcademyLink(props) {
   // check for empty AcademyLink
@@ -7,12 +8,12 @@ export default function AcademyLink(props) {
   }
 
   return (
-    <div>
-      AcademyLink
+    <div className="academy-callout">
+      <div className="academy-callout__copy">
+        {props.children.map(el => el)}
+        <a href={props.courselink}>GO TO COURSE →</a>
+      </div>
+      <div className="academy-callout__img" style={{ backgroundImage: `url(${config.envPrefix + props.img})` }} />
     </div>
   );
 }
-
-AcademyLink.defaultProps = {
-  type: 'info',
-};

src/componentsMarkdown/Callout.jsx

@@ -1,18 +1,18 @@
 import React from 'react';
 
 export default function Callout(props) {
-    // check for empty callout
-    if (!props.children) {
-      return null;
-    }
+  // check for empty callout
+  if (!props.children) {
+    return null;
+  }
 
-    const classes = `callout callout--${props.type}`;
-  
-    return (
-      <div className={classes}>
-        {props.children.map(el => el)}
-      </div>
-    );
+  const classes = `callout callout--${props.type}`;
+
+  return (
+    <div className={classes}>
+      {props.children.map(el => el)}
+    </div>
+  );
 }
 
 Callout.defaultProps = {

src/templates/doc.jsx

@@ -4,6 +4,7 @@ import _ from 'lodash';
 import config from '../../data/SiteConfig';
 import SEO from '../components/SEO';
 import AsideMenu from '../components/AsideMenu';
+import AcademyLink from '../componentsMarkdown/AcademyLink';
 import Callout from '../componentsMarkdown/Callout';
 import Gist from '../componentsMarkdown/Gist';
 import CodeGroup from '../componentsMarkdown/CodeGroup';
@@ -15,6 +16,7 @@ const renderAst = new RehypeReact({
   createElement: React.createElement,
   components: {
     gist: Gist,
+    'academy-link': AcademyLink,
     'call-out': Callout,
     'code-group': CodeGroup,
   },

src/templates/doc.scss

@@ -18,6 +18,11 @@ $aside-width: 300px;
   }
 }
 
+.sg-remarked-linked-header {
+  margin-left: -25px;
+  display: flex;
+}
+
 .doc-main {
   flex: 1;
   overflow: hidden;
@@ -27,10 +32,6 @@ $aside-width: 300px;
     padding: 0 0 $scaleup-6;
   }
 
-  h2, h3 {
-    margin-left: -25px;
-    display: flex;
-  }
 
   ol, ul {
     margin: $scaleup-1 0 $scaleup-1 $scaleup-1;
@@ -184,7 +185,8 @@ aside a.active {
   flex: 1;
 }
 
-.gatsby-resp-iframe-wrapper, .table-wrap {
+.gatsby-resp-iframe-wrapper,
+.table-wrap {
   margin: $scaleup-2 0;
 }
 
@@ -212,3 +214,30 @@ aside a.active {
 .edit-this-page {
   font-size: $scaledown-1;
 }
+
+.academy-callout {
+  @include dropdown-shadow();
+
+  display: grid;
+  grid-template-columns: auto auto;
+  margin: $scaleup-4 0;
+
+  .sg-remarked-linked-header {
+    margin-left: 0;
+
+    > a {
+      display: none;
+    }
+  }
+}
+
+.academy-callout__copy {
+  padding: $scale-0;
+}
+
+.academy-callout__img {
+  background-position: center center;
+  background-size: cover;
+  margin-left: $scaleup-1;
+  width: 175px;
+}