commit 8c2e4a97af3f5426c96134a34bb44d28dd08e60c
parent c43ed6f51f79e55249d6efae422f030d3a3af612
Author: Agastya Chandrakant <me@hanabi.in>
Date: Sat, 14 Sep 2019 03:21:04 +0530
blogPost changed to show cover only of it exists, AND added code highlighter
Diffstat:
6 files changed, 200 insertions(+), 6 deletions(-)
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -12,6 +12,19 @@ module.exports = {
plugins: [
`gatsby-transformer-remark`,
{
+ resolve: `gatsby-transformer-remark`,
+ options: {
+ plugins: [
+ {
+ resolve: `gatsby-remark-prismjs`,
+ options: {
+ inlineCodeMarker: 'λ',
+ },
+ },
+ ],
+ },
+ },
+ {
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
diff --git a/package.json b/package.json
@@ -11,9 +11,11 @@
"gatsby-plugin-offline": "^2.2.7",
"gatsby-plugin-react-helmet": "^3.1.4",
"gatsby-plugin-sharp": "^2.2.13",
+ "gatsby-remark-prismjs": "^3.3.13",
"gatsby-source-filesystem": "^2.1.11",
"gatsby-transformer-remark": "^2.6.19",
"gatsby-transformer-sharp": "^2.2.7",
+ "prismjs": "^1.17.1",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
@@ -45,4 +47,4 @@
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing \""
},
"version": "0.1.0"
-}
-\ No newline at end of file
+}
diff --git a/src/components/code.highlighter.css b/src/components/code.highlighter.css
@@ -0,0 +1,176 @@
+/**
+ * Based on copypasta from Remy Bach and Sarah Drasner
+ */
+code[class*='language-'],
+pre[class*='language-'] {
+ background: none;
+ color: white;
+ font-family: SF Mono, Menlo, Monaco, source-code-pro, Courier New, monospace;
+ font-feature-settings: normal;
+ line-height: 1.5;
+ margin-bottom: 0;
+ text-align: left;
+ white-space: pre;
+ word-break: normal;
+ word-spacing: normal;
+ word-wrap: normal;
+
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+}
+
+/* Code blocks */
+pre[class*='language-'] {
+ overflow: auto;
+ padding: 1.3125rem;
+}
+
+pre[class*='language-']::-moz-selection {
+ /* Firefox */
+ background: hsl(207, 4%, 16%);
+}
+
+pre[class*='language-']::selection {
+ /* Safari */
+ background: hsl(207, 4%, 16%);
+}
+
+/* Text Selection colour */
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection {
+ text-shadow: none;
+ background: hsla(0, 0%, 100%, 0.15);
+}
+
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection {
+ text-shadow: none;
+ background: hsla(0, 0%, 100%, 0.15);
+}
+
+/* Inline code */
+:not(pre) > code[class*='language-'] {
+ border-radius: 0.3em;
+ background: #ddd;
+ color: #1a1a1a;
+ padding: 0.15em 0.2em 0.05em;
+ white-space: normal;
+}
+
+.token.attr-name {
+ color: rgb(143, 212, 52);
+ font-style: italic;
+}
+
+.token.comment {
+ color: rgb(128, 147, 147);
+ font-style: italic;
+}
+
+.token.string,
+.token.url {
+ color: rgb(248, 184, 128);
+}
+
+.token.variable {
+ color: skyblue;
+}
+
+.token.number {
+ color: rgb(223, 130, 102);
+}
+
+.token.builtin,
+.token.char,
+.token.constant {
+ color: rgb(165, 228, 83);
+}
+.token.function {
+ color: rgb(130, 170, 255);
+}
+
+.token.punctuation {
+ color: ghostwhite;
+}
+
+.token.selector,
+.token.doctype,
+.token.script-punctuation {
+ color: rgb(199, 146, 234);
+ font-style: 'italic';
+}
+
+.token.class-name {
+ color: sandybrown;
+}
+
+.token.tag {
+ color: aqua;
+}
+.token.operator {
+ color: #f38bb3;
+}
+.token.keyword {
+ color: #c774ee;
+ font-style: italic;
+ font-weight: 700;
+}
+
+.token.boolean {
+ color: rgb(236, 79, 111);
+}
+
+.token.parameter {
+ font-style: oblique;
+}
+
+.token.property {
+ color: rgb(128, 203, 196);
+}
+
+.token.namespace {
+ color: rgb(178, 204, 214);
+}
+
+pre[data-line] {
+ padding: 1em 0 1em 3em;
+ position: relative;
+}
+
+.gatsby-highlight-code-line {
+ background-color: #4b4b4b;
+ display: block;
+ margin-right: -1.3125rem;
+ margin-left: -1.3125rem;
+ padding-right: 1em;
+ padding-left: 0.8em;
+ border-left: 0.25em solid #ffd16b;
+}
+
+.gatsby-highlight {
+ width: 100%;
+ margin-bottom: 1.75rem;
+ margin-left: -1.3125rem;
+ margin-right: -1.3125rem;
+ border-radius: 10px;
+ background: #242323;
+ -webkit-overflow-scrolling: touch;
+ overflow: auto;
+}
+
+@media (max-width: 672px) {
+ .gatsby-highlight {
+ border-radius: 0;
+ }
+}
+
+.gatsby-highlight pre[class*='language-'] {
+ float: left;
+ min-width: 100%;
+}
diff --git a/src/components/layout.css b/src/components/layout.css
@@ -1 +1,2 @@
@import 'hanabi.screen.css';
+@import 'code.highlighter.css';
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -4,6 +4,7 @@ import Layout from '../components/layout';
import SEO from '../components/seo';
import { graphql, Link } from 'gatsby';
+require('prismjs/plugins/line-numbers/prism-line-numbers.css');
export const query = graphql`
query BlogPostList {
site {
diff --git a/src/templates/blogPost.js b/src/templates/blogPost.js
@@ -76,10 +76,12 @@ class BlogPostTemplate extends React.Component {
<h1 className={'post-full-title'}>{title}</h1>
<span>{newTags}</span>
</header>
- <figure
- className={'post-full-image'}
- style={{ backgroundImage: `url(${cover})` }}
- />
+ {cover && (
+ <figure
+ className={'post-full-image'}
+ style={{ backgroundImage: `url(${cover})` }}
+ />
+ )}
<section className={'post-full-content'}>
<div
className={'post-content'}
