Add prism (#2)

* Add prism

* Add delayed language loading

* Check for language support

* Add prism note

* Update example

* Fix link

Author: janniks

README.md

@@ -47,6 +47,8 @@ This package doesn't handle the communication with the API. Check out [notion-ap
 
 🎨 **Custom Styles** – Styles are easily adaptable. Optional styles included
 
+🔮 **Syntax-Highlighting** – Beautiful themeable code highlighting using Prism.js
+
 🌎 **SSR / Static Generation Support** – Functions to work with Nuxt and other frameworks
 
 ## Install
@@ -61,7 +63,7 @@ npm install vue-notion
 
 > Check out a demo at [vue-notion.now.sh](https://vue-notion.now.sh/) ✨
 
-The full `NotionRenderer` specification and more information on the Notion API and integration with Nuxt can be found at [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs).
+More information on the `NotionRenderer` specification, syntax-highlighting, the Notion API, and integration with Nuxt can be found at [`docs/`](https://github.com/janniks/vue-notion/tree/main/docs).
 
 ### Basic Example
 
@@ -154,4 +156,4 @@ Please, feel free to [open an issue](https://github.com/janniks/vue-notion/issue
 
 ## License ⚖️
 
-MIT ©️ [Jannik Siebert](https://twitter.com/jnnksbrt)
+MIT © [Jannik Siebert](https://twitter.com/jnnksbrt)

dev/serve.vue

@@ -1,12 +1,15 @@
 <template>
   <div id="app">
-    <notion-renderer :blockMap="blockMap" fullPage todo />
+    <NotionRenderer :blockMap="blockMap" fullPage prism todo />
   </div>
 </template>
 
 <script>
 import { NotionRenderer, getPageBlocks } from "@/entry";
 
+import "prismjs";
+import "prismjs/themes/prism.css";
+
 export default {
   name: "ServeDev",
   components: {

docs/README.md

@@ -12,36 +12,36 @@ The `NotionRenderer` component offers a few properties
 - [`mapPageUrl`](#mapPageUrl) – default: `defaultMapPageUrl()`
 - [`pageLinkOptions`](#pageLinkOptions) – default: `undefined`
 
-### `blockMap`
+### `blockMap`: Object
 
 – the blocks part of a Notion API response.
 A list of blocks by their id that may contain contents and properties.
 
-### `contentId`
+### `contentId`: String
 
 – the id of the block that should be rendered.
 If this is `undefined` the _first_ block is rendered.
 _Usually the first block contains the rest of the page._
 
-### `fullPage`
+### `fullPage`: Boolean
 
 – wether or not the page should contain the cover and header.
 
-### `hideList`
+### `hideList`: [String]
 
 – a list of Notion blocks (e.g. `"callout"`) that should not be rendered.
 
-### `mapImageUrl`
+### `mapImageUrl`: Function
 
-– a method that receives `(imageUrl: String, block: Object)` and returns a `url: String` that should be used during rendering.
-The default method resolves images as they are used in Notion.
+– a function that receives `(imageUrl: String, block: Object)` and returns a `url: String` that should be used during rendering.
+The default function resolves images as they are used in Notion.
 
-> This method could be used to upload the Notion hosted images to an own provider and replace the image URLs with new ones.
+> This function could be used to upload the Notion hosted images to an own provider and replace the image URLs with new ones.
 
-### `mapPageUrl`
+### `mapPageUrl`: Function
 
-– a method that receives `(pageId: String)` and returns a `url: String` that should be used during rendering.
-The default method resolves pageIds relative to the current page root – i.e., `<pageId>` will become `/<pageId>`
+– a function that receives `(pageId: String)` and returns a `url: String` that should be used during rendering.
+The default function resolves pageIds relative to the current page root – i.e., `<pageId>` will become `/<pageId>`
 
 e.g. if you're using vue-notion for blog posts at `/posts/<pageId>`
 
@@ -52,7 +52,7 @@ mapPageUrl(pageId = "") {
 }
 ```
 
-### `pageLinkOptions`
+### `pageLinkOptions`: Object
 
 – are used to override links to other Notion pages with custom Vue components.
 `pageLinkOptions` is an `Object` that requires a `component` and a `href` parameter.
@@ -66,6 +66,36 @@ pageLinkOptions: {
 }
 ```
 
+### `prism`: Boolean
+
+– whether or not syntax-highlighting using Prims.js should be activated.
+
+> Check the `docs#syntax-highlighting` section below for more details.
+
+## Syntax-highlighting
+
+The following steps are required to add syntax-highlighting using Prism.js
+
+- Install `prismjs` to your project – `npm install prismjs`
+- Import the Prism.js css and a theme css somewhere in your application.
+
+```js
+import "prismjs";
+import "prismjs/themes/prism.css";
+```
+
+- Add the `prism` flag to the `NotionRenderer`
+
+```diff
+-<NotionRenderer :blockMap="blockMap" />
++<NotionRenderer :blockMap="blockMap" prism />
+```
+
+> A list of available themes can be found at [prism/themes](https://github.com/PrismJS/prism/tree/master/themes) and more installable themes can be found at [prism-themes](https://github.com/PrismJS/prism-themes).
+
+> ⚠️ To keep file size down, Prism.js only includes `markup`, `css`, `clike`, and `javascript` languages per default.
+> To add supported languages import the language component from Prism.js – e.g. `import 'prismjs/components/prism-rust'` for `rust`.
+
 ## Notion API
 
 The official Notion API is currently in [private beta](https://www.notion.so/api-beta).

example/layouts/default.vue

@@ -59,7 +59,7 @@ html {
   margin: 0 auto;
   min-height: 100vh;
   max-width: 90%;
-  padding: 4em;
+  padding: 4em 0.5em;
   display: block;
   text-align: center;
 }
@@ -77,25 +77,25 @@ html {
   padding: 1em 0 1.5em 0;
 }
 
-.tags {
+.posts {
   margin: 1em;
   text-align: left;
 }
 
-h2 {
+.container h2 {
   margin-top: 1.5em;
 }
 
-ul {
+.container ul {
   margin: 1em auto;
   list-style: none;
 }
 
-p {
+.container p {
   margin: 0.75em 0;
 }
 
-a {
+.container a {
   max-width: 75%;
   white-space: nowrap;
   overflow: hidden;

example/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "nuxt": "^2.14.12",
+    "prismjs": "^1.22.0",
     "vue-notion": "^0.2.14"
   },
   "devDependencies": {}

example/pages/_slug.vue

@@ -3,12 +3,16 @@
     :blockMap="blockMap"
     :pageLinkOptions="pageLinkOptions"
     fullPage
+    prism
   />
 </template>
 
 <script>
 import { NotionRenderer, getPageBlocks, getPageTable } from "vue-notion";
 
+import "prismjs";
+import "prismjs/themes/prism.css";
+
 export default {
   components: { NotionRenderer },
   data() {

example/pages/index.vue

@@ -44,9 +44,7 @@
       <div class="links">
         <p>Blog-style Examples (use Notion as a CMS for Nuxt)</p>
         <div class="links">
-          <NuxtLink class="button--green" to="/tags">
-            Posts sorted by database tags
-          </NuxtLink>
+          <NuxtLink class="button--green" to="/posts">All Blog Posts</NuxtLink>
           <NuxtLink class="button--green" to="/example">
             Post via slug <i>(e.g. /example)</i>
           </NuxtLink>

example/pages/tags.vue renamed to example/pages/posts.vue

@@ -2,16 +2,28 @@
   <div class="container">
     <div>
       <h1 class="title">vue-notion-example</h1>
-      <div class="tags">
-        <h2>Posts sorted by Tags</h2>
+      <div class="posts">
+        <h2>All Posts</h2>
+        <ul>
+          <li v-for="(post, k) in posts" :key="k">
+            <b>{{ post.date }}</b>
+            <NuxtLink v-if="post.slug" :to="post.slug" class="button--grey">
+              <b>{{ post.title }}</b>
+              {{ post.preview }}
+            </NuxtLink>
+          </li>
+        </ul>
+      </div>
+      <div class="posts">
+        <h2>All Tags</h2>
         <ul>
           <li v-for="(tag, k) in tags" :key="k">
             <b>{{ tag }}</b>
             <ul>
-              <li v-for="(page, k) in pagesByTag.get(tag)" :key="k">
-                <NuxtLink v-if="page.slug" :to="page.slug" class="button--grey">
-                  <b>{{ page.title }}</b>
-                  {{ page.preview }}
+              <li v-for="(post, k) in postsByTag.get(tag)" :key="k">
+                <NuxtLink v-if="post.slug" :to="post.slug" class="button--grey">
+                  <b>{{ post.title }}</b>
+                  {{ post.preview }}
                 </NuxtLink>
               </li>
             </ul>
@@ -29,8 +41,13 @@ export default {
   async asyncData({ params, error }) {
     const pageTable = await getPageTable("10327f9074b7433aad577ccd0020e971");
 
+    // sort published pages
+    const posts = pageTable
+      .filter((page) => page.published)
+      .sort((a, b) => a.date - b.date);
+
     // convert array of pages to a map of tags with page arrays
-    const pagesByTag = pageTable
+    const postsByTag = pageTable
       .filter((page) => page.published)
       .reduce((map, currentPage) => {
         currentPage.tags.forEach((tag) =>
@@ -41,7 +58,11 @@ export default {
         return map;
       }, new Map());
 
-    return { tags: Array.from(pagesByTag.keys()).sort(), pagesByTag };
+    return {
+      posts,
+      postsByTag,
+      tags: [...postsByTag.keys()].sort(),
+    };
   },
 };
 </script>