feat: syntax highlighting for keto-relation-tuples prism language (#72)

Transferred from ory/keto#582

docusaurus.config.js

@@ -40,6 +40,57 @@ if (fs.existsSync('./src/css/theme.css')) {
   customCss.push(require.resolve('./src/css/theme.css'))
 }
 
+const githubPrismTheme = require('prism-react-renderer/themes/github')
+
+const prismThemeLight = {
+  ...githubPrismTheme,
+  styles: [
+    ...githubPrismTheme.styles,
+    {
+      languages: ['keto-relation-tuples'],
+      types: ['namespace'],
+      style: {
+        color: '#666'
+      }
+    },
+    {
+      languages: ['keto-relation-tuples'],
+      types: ['object'],
+      style: {
+        color: '#939'
+      }
+    },
+    {
+      languages: ['keto-relation-tuples'],
+      types: ['relation'],
+      style: {
+        color: '#e80'
+      }
+    },
+    {
+      languages: ['keto-relation-tuples'],
+      types: ['delimiter'],
+      style: {
+        color: '#555'
+      }
+    },
+    {
+      languages: ['keto-relation-tuples'],
+      types: ['comment'],
+      style: {
+        color: '#999'
+      }
+    },
+    {
+      languages: ['keto-relation-tuples'],
+      types: ['subject'],
+      style: {
+        color: '#903'
+      }
+    }
+  ]
+}
+
 module.exports = {
   title: config.projectName,
   tagline: config.projectTagLine,
@@ -52,7 +103,7 @@ module.exports = {
   projectName: config.projectSlug, // Usually your repo name.
   themeConfig: {
     prism: {
-      theme: require('prism-react-renderer/themes/github'),
+      theme: prismThemeLight,
       darkTheme: require('prism-react-renderer/themes/dracula'),
       additionalLanguages: ['pug', 'shell-session']
     },

src/theme/ketoRelationTuplesPrism.js

@@ -0,0 +1,56 @@
+const delimiter = {
+  delimiter: /[:#@()]/
+}
+
+const namespace = {
+  pattern: /[^:#@()\n]+:/,
+  inside: {
+    ...delimiter,
+    namespace: /.*/
+  }
+}
+
+const object = {
+  pattern: /[^:#@()\n]+#/,
+  inside: {
+    ...delimiter,
+    'property-access': /.*/
+  }
+}
+
+const relation = {
+  pattern: /[^:#@()\n]+/
+}
+
+const subjectID = {
+  pattern: /@[^:#@()\n]+/,
+  inside: {
+    ...delimiter,
+    subject: /.*/
+  }
+}
+
+const subjectSet = {
+  pattern: /@\(([^:#@()\n]+:)?([^:#@()\n]+)#([^:#@()\n]*)\)/,
+  inside: {
+    delimiter: /[@()]*/,
+    namespace,
+    object,
+    relation
+  }
+}
+
+export default (prism) =>
+  (prism.languages['keto-relation-tuples'] = {
+    comment: /\/\/.*(\n|$)/,
+    'relation-tuple': {
+      pattern: /([^:#@()\n]+:)?([^:#@()\n]+)#([^:#@()\n]+)@?((\(([^:#@()\n]+:)?([^:#@()\n]+)#([^:#@()\n]*)\))|([^:#@()\n]+))/,
+      inside: {
+        namespace,
+        object,
+        subjectID,
+        subjectSet,
+        relation
+      }
+    }
+  })

src/theme/prism-include-languages.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'
+import siteConfig from '@generated/docusaurus.config'
+import ketoRelationTuplesPrism from './ketoRelationTuplesPrism'
+
+const prismIncludeLanguages = (PrismObject) => {
+  if (ExecutionEnvironment.canUseDOM) {
+    const {
+      themeConfig: { prism: { additionalLanguages = [] } = {} }
+    } = siteConfig
+    window.Prism = PrismObject
+    additionalLanguages.forEach((lang) => {
+      require(`prismjs/components/prism-${lang}`) // eslint-disable-line
+    })
+
+    ketoRelationTuplesPrism(window.Prism)
+
+    delete window.Prism
+  }
+}
+
+export default prismIncludeLanguages