Merge branch 'dev' into scrolling-section

frontity · Mar 27, 2020 · de4ab88 · de4ab88
2 parents c15ac40 + a9af7a8
commit de4ab88
Show file tree

Hide file tree

Showing 18 changed files with 1,406 additions and 49 deletions.
diff --git a/frontity.settings.js b/frontity.settings.js
@@ -4,12 +4,12 @@ const settings = {
     frontity: {
       url: "https://test.frontity.io",
       title: "Test Frontity Blog",
-      description: "WordPress installation for Frontity development"
-    }
+      description: "WordPress installation for Frontity development",
+    },
   },
   packages: [
     {
-      name: "@frontity/frontity-org-theme"
+      name: "@frontity/frontity-org-theme",
     },
     {
       name: "@frontity/wp-source",
@@ -19,15 +19,15 @@ const settings = {
           postTypes: [
             {
               type: "wp_template_part",
-              endpoint: "template-parts"
-            }
-          ]
-        }
-      }
+              endpoint: "template-parts",
+            },
+          ],
+        },
+      },
     },
     "@frontity/tiny-router",
-    "@frontity/html2react"
-  ]
+    "@frontity/html2react",
+  ],
 };
 
 export default settings;
diff --git a/packages/frontity-org-theme/src/components/styles/global-styles.tsx b/packages/frontity-org-theme/src/components/styles/global-styles.tsx
@@ -285,7 +285,119 @@ const elementBase = (colors: FrontityOrg["state"]["theme"]["colors"]) => css`
   }
 `;
 
+const syntaxHighlighting = (
+  colors: FrontityOrg["state"]["theme"]["colors"]
+) => css`
+  /* This is a modified theme for Prism.js
+  
+  /* PrismJS 1.19.0
+      https://prismjs.com/download.html#themes=prism-dark&languages=markup+clike+javascript+jsx 
+  */
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    font-family: Courier, monospace;
+    font-size: 0.78rem;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.65;
+    color: ${addAlpha(colors.wall, 0.8)};
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+
+  @media print {
+    code[class*="language-"],
+    pre[class*="language-"] {
+      text-shadow: none;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: hsl(30, 20%, 50%);
+  }
+
+  .token.punctuation {
+    opacity: 0.7;
+  }
+
+  .token.namespace {
+    opacity: 0.7;
+  }
+
+  .token.property,
+  .token.tag,
+  .token.boolean,
+  .token.number,
+  .token.constant,
+  .token.symbol {
+    color: ${addAlpha(colors.red, 0.8)};
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: ${addAlpha(colors.grass, 0.8)};
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string,
+  .token.variable {
+    color: ${addAlpha(colors.orange, 0.8)};
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: ${addAlpha(colors.red, 0.8)};
+  }
+
+  .token.regex,
+  .token.important {
+    color: ${addAlpha(colors.turqoise, 0.8)};
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+
+  .token.deleted {
+    color: red;
+  }
+`;
 const globalStyle = (colors: FrontityOrg["state"]["theme"]["colors"]) =>
-  css([cssReset, documentSetup(colors), elementBase(colors)]);
+  css([
+    cssReset,
+    documentSetup(colors),
+    elementBase(colors),
+    syntaxHighlighting(colors),
+  ]);
 
 export default globalStyle;
diff --git a/packages/frontity-org-theme/src/index.ts b/packages/frontity-org-theme/src/index.ts
@@ -1,3 +1,5 @@
+import "./prism";
+
 import FrontityOrg from "../types";
 import Theme from "./components";
 import { backgroundColor } from "./processors/background-color";
@@ -14,6 +16,7 @@ import { paragraph } from "./processors/paragraph";
 import { polygonBackground } from "./processors/polygon-background";
 import { scrollingSection } from "./processors/scrolling-section";
 import { specialIcons } from "./processors/special-icons";
+import { terminal } from "./processors/terminal";
 import { textColor } from "./processors/text-color";
 
 const frontityOrg: FrontityOrg = {
@@ -57,6 +60,7 @@ const frontityOrg: FrontityOrg = {
         ...mobileDesktop,
         ...borders,
         backgroundColor,
+        terminal,
         textColor,
         imageFrame,
         polygonBackground,