Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
ahmedelgabri committed Feb 23, 2019
1 parent 9df4cbf commit 861309f
Show file tree
Hide file tree
Showing 9 changed files with 987 additions and 1,115 deletions.
73 changes: 35 additions & 38 deletions gatsby-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ module.exports = {
title: 'Front-end Engineer',
siteUrl: 'https://gabri.me',
description:
'Ahmed El Gabri is a Front-end Engineer who like to bring structure where it is lacking, systematizing information & automating processes.',
'Ahmed El Gabri is a Front-end Engineer who like to bring structure where it is lacking, systematizing information & automating processes.',
social: {
twitter: {
display: '@ahmedelgabri',
Expand All @@ -39,7 +39,7 @@ module.exports = {
resume: {
display: 'resume',
url:
'https://docs.google.com/document/d/1sxu8gQi_vyz_RnDNTb6qJy3o9cth6_DzAI2zE_HHSnQ/edit?usp=sharing',
'https://docs.google.com/document/d/1sxu8gQi_vyz_RnDNTb6qJy3o9cth6_DzAI2zE_HHSnQ/edit?usp=sharing',
},
},
disqus: 'gabrime',
Expand Down Expand Up @@ -70,9 +70,6 @@ module.exports = {
wrapperStyle: 'margin-bottom: 1.0725rem',
},
},
{
resolve: 'gatsby-remark-prismjs',
},
{
resolve: 'gatsby-remark-copy-linked-files',
},
Expand Down Expand Up @@ -107,42 +104,42 @@ module.exports = {
})
},
query: `
{
site {
siteMetadata {
author
title
description
siteUrl
}
}
}
`,
{
site {
siteMetadata {
author
title
description
siteUrl
}
}
}
`,
feeds: [
{
query: `
{
allMdx(
sort: {
order: DESC,
fields: [frontmatter___date]
}
) {
edges {
node {
frontmatter {
title
date
}
fields {
slug
}
excerpt(pruneLength: 500)
}
}
}
}
`,
{
allMdx(
sort: {
order: DESC,
fields: [frontmatter___date]
}
) {
edges {
node {
frontmatter {
title
date
}
fields {
slug
}
excerpt(pruneLength: 500)
}
}
}
}
`,
serialize({
query: {
site: {siteMetadata},
Expand Down
26 changes: 25 additions & 1 deletion gatsby-node.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
const path = require('path')
const componentWithMDXScope = require('gatsby-mdx/component-with-mdx-scope')

// Create slugs for files.
exports.onCreateNode = ({node, actions}) => {
Expand Down Expand Up @@ -63,6 +62,7 @@ exports.createPages = async ({graphql, actions}) => {
fields: {slug, layout},
} = node

<<<<<<< HEAD
createPage({
path: slug,
component: componentWithMDXScope(
Expand All @@ -75,4 +75,28 @@ exports.createPages = async ({graphql, actions}) => {
},
})
})
||||||| merged common ancestors
createPage({
path: slug,
component: componentWithMDXScope(
path.resolve(`./src/templates/${layout || 'post'}.tsx`),
scope,
),
context: {
slug,
id,
},
})
})
=======
createPage({
path: slug,
component: path.resolve(`./src/templates/${layout || 'post'}.tsx`),
context: {
slug,
id,
},
})
})
>>>>>>> Check https://github.com/ChristopherBiscardi/gatsby-mdx/issues/262#issuecomment-462196286
}
9 changes: 5 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@
"@babel/preset-react": "7.0.0",
"@babel/preset-typescript": "7.3.3",
"@emotion/core": "10.0.7",
"@mdx-js/loader": "0.17.5",
"@mdx-js/mdx": "0.16.0",
"@mdx-js/mdx": "0.17.5",
"@mdx-js/tag": "0.17.0",
"@types/aws-lambda": "8.10.19",
"@types/node": "10.12.27",
"@types/react": "16.8.4",
Expand All @@ -39,7 +39,7 @@
"babel-plugin-styled-components": "1.10.0",
"colors.css": "3.0.0",
"gatsby": "2.1.17",
"gatsby-mdx": "0.2.0",
"gatsby-mdx": "0.3.6",
"gatsby-plugin-emotion": "4.0.4",
"gatsby-plugin-feed": "2.0.13",
"gatsby-plugin-netlify": "2.0.11",
Expand All @@ -49,13 +49,14 @@
"gatsby-plugin-twitter": "2.0.9",
"gatsby-plugin-typescript": "2.0.9",
"gatsby-remark-copy-linked-files": "2.0.9",
"gatsby-remark-prismjs": "3.2.4",
"gatsby-remark-responsive-iframe": "2.0.9",
"gatsby-remark-smartypants": "2.0.8",
"gatsby-source-filesystem": "2.0.22",
"http-proxy-middleware": "0.19.1",
"mdx-utils": "0.0.2",
"netlify-lambda": "1.4.2",
"npm-run-all": "4.1.5",
"prism-react-renderer": "0.1.5",
"prism-themes": "1.0.1",
"prismjs": "1.15.0",
"ramda": "0.26.1",
Expand Down
6 changes: 5 additions & 1 deletion src/components/Layout/index.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
import * as React from 'react'
import {MDXProvider} from '@mdx-js/tag'
import MdxComponents from '../mdx'

export interface Props {
children: React.ReactNode
}

const Layout = ({children}: Props) => (
<div css={{padding: '3% 6%'}}>{children}</div>
<MDXProvider components={MdxComponents}>
<div css={{padding: '3% 6%'}}>{children}</div>
</MDXProvider>
)

export default Layout
61 changes: 61 additions & 0 deletions src/components/mdx/Code.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import * as React from 'react'
import {css} from '@emotion/core'
import Highlight, {defaultProps} from 'prism-react-renderer'

interface Props {
codeString: string
language: string
}

interface InnerProps {
className: string
style: Object
tokens: Array<Array<unknown>>
getLineProps: (Object: {line: unknown[]; key: any}) => Object
getTokenProps: (Object: {token: unknown; key: any}) => Object
}

export default function Code({codeString, language}: Props) {
return (
<Highlight
{...defaultProps}
code={codeString}
language={language}
// to be able to use normal CSS Prism themes
// https://www.npmjs.com/package/prism-react-renderer#faq
theme={undefined}
>
{({
className,
style,
tokens,
getLineProps,
getTokenProps,
}: InnerProps) => (
<pre className={className} style={style}>
<code>
{tokens.map((line, i) => (
<div {...getLineProps({line, key: i})}>
<span
css={css`
display: inline-block;
width: 1.5em;
text-align: right;
margin-right: 1rem;
user-select: none;
opacity: 0.3;
`}
>
{i + 1}
</span>
{line.map((token, key) => (
<span {...getTokenProps({token, key})} />
))}
</div>
))}
</code>
</pre>
)}
</Highlight>
)
}
16 changes: 16 additions & 0 deletions src/components/mdx/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import * as React from 'react'
import {preToCodeBlock} from 'mdx-utils'
import Code from './Code'

export default {
pre: (preProps: Object) => {
const props = preToCodeBlock(preProps)
// if there's a codeString and some props, we passed the test
if (props) {
return <Code {...props} />
} else {
// it's possible to have a pre without a code in it
return <pre {...preProps} />
}
},
}
79 changes: 38 additions & 41 deletions src/templates/post.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import * as React from 'react'
import colors from 'colors.css'
import {graphql} from 'gatsby'
import MDXRenderer from 'gatsby-mdx/mdx-renderer'
import {MDXProvider} from '@mdx-js/tag'
import Meta from '../components/Meta'
import Back from '../components/Back'
import Layout from '../components/Layout'
Expand Down Expand Up @@ -54,46 +53,44 @@ export default function Post(props /*: Props*/) {
const {excerpt} = data.mdx
const postUrl = `${siteUrl}${rest.location.pathname}`

return (
<Layout>
<MDXProvider components={{}}>
<div css={{maxWidth: '45rem'}}>
<Meta
title={`${title} | ${author} - ${siteTitle}`}
excerpt={excerpt}
url={postUrl}
post
/>
<div css={{borderBottom: '1px solid rgba(0, 0, 0, 0.1)'}}>
<Back />
<time
css={{
fontStyle: 'italic',
fontSize: '0.75rem',
color: colors.gray,
display: 'block',
}}
datatime={date}
>
On {date}
</time>
<h1>{title}</h1>
<MDXRenderer>{data.mdx.code.body}</MDXRenderer>
</div>
<div
css={{
marginBottom: '1rem',
paddingBottom: '1rem',
paddingTop: '1rem',
}}
>
<TweetButton via={display} title={title} url={postUrl} />
</div>
<Footer author={author} />
</div>
</MDXProvider>
</Layout>
)
return (
<Layout>
<div css={{maxWidth: '45rem'}}>
<Meta
title={`${title} | ${author} - ${siteTitle}`}
excerpt={excerpt}
url={postUrl}
post
/>
<div css={{borderBottom: '1px solid rgba(0, 0, 0, 0.1)'}}>
<Back />
<time
css={{
fontStyle: 'italic',
fontSize: '0.75rem',
color: colors.gray,
display: 'block',
}}
datatime={date}
>
On {date}
</time>
<h1>{title}</h1>
<MDXRenderer>{data.mdx.code.body}</MDXRenderer>
</div>
<div
css={{
marginBottom: '1rem',
paddingBottom: '1rem',
paddingTop: '1rem',
}}
>
<TweetButton via={display} title={title} url={postUrl} />
</div>
<Footer author={author} />
</div>
</Layout>
)
}

export const pageQuery = graphql`
Expand Down
2 changes: 2 additions & 0 deletions src/typings.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
// declare module "*.png"

declare module 'colors.css'
declare module 'prism-react-renderer'
declare module 'mdx-utils'

declare module '*.png'
declare module '*.svg'
Expand Down
Loading

0 comments on commit 861309f

Please sign in to comment.