Css variable and Init.js (#1003)

* Add themes * Add config descriptions * add cssvariables to set css root variables * Add init override * v4.3.2
evilz · Jul 6, 2022 · 3fa8966 · 3fa8966
1 parent 03cfb8c
commit 3fa8966
Show file tree

Hide file tree

Showing 15 changed files with 86 additions and 482 deletions.
diff --git a/.gitignore b/.gitignore
@@ -105,3 +105,5 @@ xunit.xml
 
 *.vsix
 test-report.xml
+
+.fake
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 4.3.2
+
+- Use ExpressJS 5 and EJS
+- Split EJS views
+- Add new themes :  cern, hull-blue, material, myplanet, object-partners, pikestreet, puzzle, robot-lung-ebi, robot-lung, savasian, sfeir-school, sunblind, tidy
+- Add slide borders
+- Add cssvariables
+- Add init override using init.js file
+
 ## 4.3.1
 
 - Update Revealjs to 4.3.1

diff --git a/package.json b/package.json
@@ -2,12 +2,12 @@
   "name": "vscode-reveal",
   "displayName": "vscode-reveal",
   "description": "Show markdown as revealJs presentation",
-  "version": "4.3.1",
+  "version": "4.3.2",
   "publisher": "evilz",
   "author": "Vincent Bourdon",
   "license": "MIT",
   "icon": "logo.png",
-  "preview": true,
+  "preview": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/evilz/vscode-reveal"
@@ -481,6 +481,22 @@
           "type": "string",
           "default": "Reveal JS presentation",
           "description": "Title of your presentation"
+        },
+        "revealjs.css": {
+          "type": "array",
+          "default": [],
+          "items": {
+            "type": "string"
+          },
+          "description": "External css file to use"
+        },
+        "revealjs.cssvariables": {
+          "type": [
+            "object",
+            "null"
+          ],
+          "default": null,
+          "description": "Css variable to add see https://github.com/hakimel/reveal.js/blob/master/css/theme/template/exposer.scss"
         }
       }
     },

diff --git a/samples/themes/base.md b/samples/themes/base.md
@@ -2,7 +2,6 @@
 theme: myplanet
 ---
 
-
 # Heading	
 
 # H1

diff --git a/samples/themes/init.js b/samples/themes/init.js
@@ -0,0 +1 @@
+alert('hello')
diff --git a/src/Configuration.ts b/src/Configuration.ts
@@ -84,6 +84,7 @@ export interface IRevealOptions {
   enableSearch: boolean
 
   css: string[]
+  cssvariables: object | null
 }
 export interface IExtensionOptions {
   slideExplorerEnabled: boolean
@@ -167,7 +168,8 @@ export const defaultConfiguration: Configuration = {
   enableZoom: true,
   enableSearch: true,
 
-  css: []
+  css: [],
+  cssvariables: null
 }
 
 

diff --git a/src/RevealServer.ts b/src/RevealServer.ts
@@ -1,4 +1,5 @@
 import * as http from 'http'
+import * as fs from 'fs'
 import express from 'express'
 import cors from 'cors'
 import morgan from 'morgan'
@@ -108,12 +109,21 @@ export class RevealServer extends Disposable {
         next()
       }
       else {
+
+        const opts = {}
+        if (context.dirname) {
+          const initPath = path.join(context.dirname, 'init.js')
+          if (fs.existsSync(initPath)) {
+            opts["init"] = fs.readFileSync(initPath, "utf8");
+          }
+        }
+
         const htmlSlides = context.slides.map((s) => ({
           ...s,
           html: markdownit.render(s.text),
           children: s.verticalChildren.map((c) => ({ ...c, html: markdownit.render(c.text) })),
         }))
-        res.render('index', { slides: htmlSlides, ...context.configuration, rootUrl: this.uri })
+        res.render('index', { slides: htmlSlides, ...context.configuration, rootUrl: this.uri, ...opts })
       }
     })
 

diff --git a/views/cssvariables.ejs b/views/cssvariables.ejs
@@ -0,0 +1,11 @@
+<% if (cssvariables) { %>
+<style>
+  :root {
+    <% Object.keys(cssvariables).forEach(function(prop) {
+        %> <%- prop %>: <%- cssvariables[prop] %>;
+        <%
+      });
+    %>
+  }
+</style>
+<% } %>
diff --git a/views/head.ejs b/views/head.ejs
@@ -1,46 +1,45 @@
-
 <head>
-	<meta charset="utf-8">
+  <meta charset="utf-8">
 
-	<title><%= title %></title>
+  <title><%= title %></title>
 
-	<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
-	<meta name="author" content="Hakim El Hattab">
+  <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
+  <meta name="author" content="Hakim El Hattab">
 
-	<meta name="apple-mobile-web-app-capable" content="yes">
-	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-	<link rel="stylesheet" href="libs/reveal.js/4.3.1/reset.css">
-	<link rel="stylesheet" href="libs/reveal.js/4.3.1/reveal.css">
+  <link rel="stylesheet" href="libs/reveal.js/4.3.1/reset.css">
+  <link rel="stylesheet" href="libs/reveal.js/4.3.1/reveal.css">
 
-	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 
-	  <!-- highlight Theme -->
-  	<% if (highlightTheme) { %>
-	  <link rel="stylesheet" href="libs/highlight.js/11.3.1/styles/<%=highlightTheme%>.min.css">
-	<%}%>
+  <!-- highlight Theme -->
+  <% if (highlightTheme) { %>
+  <link rel="stylesheet" href="libs/highlight.js/11.3.1/styles/<%=highlightTheme%>.min.css">
+  <%}%>
 	<% if (highlightTheme == null) { %>
-	<link rel="stylesheet" href="libs/highlight.js/11.3.1/styles/monokai.min.css">
-	<%}%>
+  <link rel="stylesheet" href="libs/highlight.js/11.3.1/styles/monokai.min.css">
+  <%}%>
 
 	<link rel="stylesheet" href="libs/reveal.js/4.3.1/plugin/chalkboard/style.css">
 
 
 	<% if (enableMenu ) { %>
-		<link rel="stylesheet" href="libs/reveal.js/4.3.1/plugin/customcontrols/style.css">
-	<%}%>
+  <link rel="stylesheet" href="libs/reveal.js/4.3.1/plugin/customcontrols/style.css">
+  <%}%>
 
 
 
 
   <!-- Revealjs Theme -->
   <% if (theme) { %>
-  	<link rel="stylesheet" href="libs/reveal.js/4.3.1/theme/<%=theme%>.css" id="theme">
+  <link rel="stylesheet" href="libs/reveal.js/4.3.1/theme/<%=theme%>.css" id="theme">
   <%}%>
   <% if (!theme) { %>
-  	<link rel="stylesheet" href="libs/reveal.js/4.3.1/theme/black.css" id="theme">
+  <link rel="stylesheet" href="libs/reveal.js/4.3.1/theme/black.css" id="theme">
   <%}%>
 
   <link rel="stylesheet" href="libs/styles/tasklist.css">
@@ -50,12 +49,14 @@
 
   <!-- Revealjs Theme -->
   <% if (customTheme) { %>
-  	<link rel="stylesheet" href="<%=customTheme%>.css">
+  <link rel="stylesheet" href="<%=customTheme%>.css">
   <%}%>
 
    <!-- css list -->
 	<% for(var i=0; i < css.length; i++) { %>
-	<link rel="stylesheet" href="<%=css[i]%>">
-   <%}%>
+  <link rel="stylesheet" href="<%=css[i]%>">
+  <%}%>
+
+   <%- include('cssvariables'); %>
 
 </head>
diff --git a/views/index.ejs b/views/index.ejs
@@ -3,7 +3,6 @@
 
 <%- include('head'); %>
 
-
 <body>
 
   <%- include('logo'); %>

diff --git a/views/init.ejs b/views/init.ejs
@@ -1,4 +1,8 @@
  <script>
+   <% if(init) { %>
+   <%- init %>
+   <%} else { %>
+
    const printPlugins = [
        RevealNotes,
        RevealHighlight,
@@ -207,5 +211,6 @@
 			  }, 2500);
 			
     }
-		
+
+  <%}%>
  </script>
diff --git a/views/layouts/main.edge b/views/layouts/main.edge
Original file line number	Diff line number	Diff line change
Expand Up		@@ -105,3 +105,5 @@ xunit.xml

		*.vsix
		test-report.xml

		.fake
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,7 +2,6 @@ @@
     theme: myplanet
     ---
     # Heading
     # H1
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,7 +3,6 @@

		<%- include('head'); %>


		<body>

		<%- include('logo'); %>
Expand Down