Merge pull request #7 from Trivernis/feature/themes

Feature/themes

Cargo.lock

@@ -185,6 +185,12 @@ version = "3.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2e8c087f005730276d1096a652e92a8bacee2e2472bcc9715a74d2bec38b5820"
 
+[[package]]
+name = "bytecount"
+version = "0.6.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "72feb31ffc86498dacdbd0fcebb56138e7177a8cc5cea4516031d15ae85a742e"
+
 [[package]]
 name = "bytemuck"
 version = "1.4.1"
@@ -1364,6 +1370,17 @@ dependencies = [
  "version_check 0.9.2",
 ]
 
+[[package]]
+name = "nom_locate"
+version = "2.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a67484adf5711f94f2f28b653bf231bff8e438be33bf5b0f35935a0db4f618a2"
+dependencies = [
+ "bytecount",
+ "memchr",
+ "nom",
+]
+
 [[package]]
 name = "notify"
 version = "4.0.15"
@@ -1382,6 +1399,17 @@ dependencies = [
  "winapi 0.3.9",
 ]
 
+[[package]]
+name = "num-bigint"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5e9a41747ae4633fce5adffb4d2e81ffc5e89593cb19917f8fb2cc5ff76507bf"
+dependencies = [
+ "autocfg 1.0.1",
+ "num-integer",
+ "num-traits 0.2.14",
+]
+
 [[package]]
 name = "num-integer"
 version = "0.1.44"
@@ -2008,6 +2036,22 @@ dependencies = [
  "winreg 0.7.0",
 ]
 
+[[package]]
+name = "rsass"
+version = "0.16.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8c1144f0d9fd5df1f8fbac387e91b73a2d315e013ee6beb48353a71d8ec2c5ab"
+dependencies = [
+ "lazy_static",
+ "nom",
+ "nom_locate",
+ "num-bigint",
+ "num-integer",
+ "num-rational",
+ "num-traits 0.2.14",
+ "rand 0.7.3",
+]
+
 [[package]]
 name = "rust-argon2"
 version = "0.8.3"
@@ -2249,6 +2293,7 @@ dependencies = [
  "rayon",
  "regex",
  "reqwest",
+ "rsass",
  "serde 1.0.118",
  "sha2",
  "structopt",

Cargo.toml

@@ -51,6 +51,7 @@ image = "0.23.12"
 parking_lot = "0.11.1"
 sha2 = "0.9.2"
 config = "0.10.1"
+rsass = "0.16.0"
 
 headless_chrome = { version = "0.9.0", optional = true }
 failure = { version = "0.1.8", optional = true }

README.md

@@ -289,10 +289,14 @@ max_width = 700
 max_height = 500
 
 
-[formatting]
+# Visual adjustments
+[style]
 # how bibliography references should be displayed
 bib_ref_display = '{{number}}'
 
+# the chosen theme for the document
+# one of: GithubLight, SolarizedLight, OceanLight, SolarizedDark, OceanDark, MagicDark
+theme = 'GithubLight'
 
 # custom metadata
 # String -> String Mappings

src/format/assets/base.scss

@@ -0,0 +1,159 @@
+body {
+  background-color: $body-background;
+  overflow-x: hidden;
+  color: $primary-color;
+  word-break: break-word;
+}
+
+.content {
+  font-family: "Fira Sans", "Noto Sans", SansSerif, sans-serif;
+  width: 100vh;
+  max-width: calc(100% - 4rem);
+  padding: 2rem;
+  margin: auto;
+  background-color: $background-color;
+}
+
+h1 {
+  font-size: 2.2rem;
+}
+
+h2 {
+  font-size: 1.8rem;
+}
+
+h3 {
+  font-size: 1.4rem;
+}
+
+h4 {
+  font-size: 1rem;
+}
+
+h5 {
+  font-size: 0.8rem;
+}
+
+h6 {
+  font-size: 0.4rem;
+}
+
+img {
+  max-width: 100%;
+  max-height: 100vh;
+  height: auto;
+}
+
+code {
+  color: $primary-color;
+
+  pre {
+    font-family: "Fira Code", "Mono", monospace;
+    padding: 0.8em 0.2em;
+    background-color: $code-background !important;
+    border-radius: 0.25em;
+    overflow: auto;
+  }
+
+  &.inlineCode {
+    font-family: "Fira Code", monospace;
+    border-radius: 0.1em;
+    background-color: $code-background;
+    padding: 0 0.1em;
+  }
+}
+
+.tableWrapper {
+  overflow-x: auto;
+  width: 100%;
+
+  & > table {
+    margin: auto;
+  }
+}
+
+table {
+  border-collapse: collapse;
+
+  tr {
+    &:nth-child(odd) {
+      background-color: $table-background-alt;
+    }
+
+    &:nth-child(1) {
+      background-color: $table-background-alt;
+      font-weight: bold;
+      border-bottom: 1px solid invert($background-color)
+    }
+  }
+}
+
+table td, table th {
+  border-left: 1px solid invert($background-color);
+  padding: 0.2em 0.5em;
+}
+
+table tr td:first-child, table tr th:first-child {
+  border-left: none;
+}
+
+blockquote {
+  margin-left: 0;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+a {
+  color: $secondary-color;
+}
+
+.quote {
+  border-left: 0.3em solid $quote-background-alt;
+  border-radius: 0.2em;
+  padding-left: 1em;
+  margin-left: 0;
+  background-color: $quote-background;
+
+  .metadata {
+    font-style: italic;
+    padding-left: 0.5em;
+    color: $primary-variant-1;
+  }
+}
+
+
+.figure {
+  width: 100%;
+  display: block;
+  text-align: center;
+
+  .imageDescription {
+    display: block;
+    color: $primary-variant-1;
+    font-style: italic;
+  }
+}
+
+.centered {
+  text-align: center;
+}
+
+.glossaryReference {
+  text-decoration: none;
+  color: inherit;
+  border-bottom: 1px dotted $primary-color;
+}
+
+.arrow {
+  font-family: "Fira Code", "Mono", monospace;
+}
+
+@media print {
+
+  .content > section > section, .content > section > section {
+    page-break-inside: avoid;
+  }
+
+  body {
+    background-color: $background-color !important;
+  }
+}

src/format/assets/dark-magic.scss

@@ -0,0 +1,14 @@
+$background-color: #1e1d2c;
+$background-color-variant-1: lighten($background-color, 7%);
+$background-color-variant-2: lighten($background-color, 14%);
+$background-color-variant-3: lighten($background-color, 21%);
+
+$primary-color: #EEE;
+$primary-variant-1: darken($primary-color, 14%);
+$secondary-color: #3aa7df;
+
+$body-background: darken($background-color, 5%);
+$code-background: lighten($background-color, 5%);
+$table-background-alt: $background-color-variant-2;
+$quote-background: lighten($background-color-variant-1, 3%);
+$quote-background-alt: $background-color-variant-3;

src/format/assets/dark-ocean.scss

@@ -0,0 +1,14 @@
+$background-color: darken(#2b303b, 8%);
+$background-color-variant-1: lighten($background-color, 7%);
+$background-color-variant-2: lighten($background-color, 14%);
+$background-color-variant-3: lighten($background-color, 21%);
+
+$primary-color: #EEE;
+$primary-variant-1: darken($primary-color, 14%);
+$secondary-color: #3aa7df;
+
+$body-background: darken($background-color, 5%);
+$code-background: $background-color-variant-1;
+$table-background-alt: $background-color-variant-2;
+$quote-background: lighten($background-color-variant-1, 3%);
+$quote-background-alt: $background-color-variant-3;

src/format/assets/dark-solarized.scss

@@ -0,0 +1,13 @@
+$background-color: darken(#002b36, 5%);
+$background-color-variant-1: lighten($background-color, 7%);
+$background-color-variant-2: lighten($background-color, 14%);
+$background-color-variant-3: lighten($background-color, 21%);
+$primary-color: #EEE;
+$primary-variant-1: darken($primary-color, 14%);
+$secondary-color: #0096c9;
+
+$body-background: darken($background-color, 3%);
+$code-background: $background-color-variant-1;
+$table-background-alt: lighten($background-color, 10%);
+$quote-background: lighten($background-color-variant-1, 3%);
+$quote-background-alt: $background-color-variant-3;

src/format/assets/light-github.scss

@@ -0,0 +1,13 @@
+$background-color: #FFF;
+$background-color-variant-1: darken($background-color, 7%);
+$background-color-variant-2: darken($background-color, 14%);
+$background-color-variant-3: darken($background-color, 21%);
+$primary-color: #000;
+$primary-variant-1: lighten($primary-color, 14%);
+$secondary-color: #00286a;
+
+$body-background: $background-color-variant-1;
+$code-background: $background-color-variant-1;
+$table-background-alt: $background-color-variant-2;
+$quote-background: $background-color-variant-2;
+$quote-background-alt: $background-color-variant-3;

src/format/assets/light-ocean.scss

@@ -0,0 +1,13 @@
+$background-color: #FFF;
+$background-color-variant-1: darken($background-color, 7%);
+$background-color-variant-2: darken($background-color, 14%);
+$background-color-variant-3: darken($background-color, 21%);
+$primary-color: #112;
+$primary-variant-1: lighten($primary-color, 14%);
+$secondary-color: #00348e;
+
+$body-background: $background-color-variant-1;
+$code-background: $background-color-variant-1;
+$table-background-alt: $background-color-variant-2;
+$quote-background: $background-color-variant-2;
+$quote-background-alt: $background-color-variant-3;

src/format/assets/light-solarized.scss

@@ -0,0 +1,13 @@
+$background-color: #fff8f0;
+$background-color-variant-1: darken($background-color, 4%);
+$background-color-variant-2: darken($background-color, 8%);
+$background-color-variant-3: darken($background-color, 12%);
+$primary-color: #112;
+$primary-variant-1: lighten($primary-color, 14%);
+$secondary-color: #2b61be;
+
+$body-background: $background-color-variant-1;
+$code-background: $background-color-variant-1;
+$table-background-alt: $background-color-variant-2;
+$quote-background: $background-color-variant-2;
+$quote-background-alt: $background-color-variant-3;

src/format/html/assets/style.css

@@ -1,149 +0,0 @@
-body {
-    background-color: #DDD;
-    overflow-x: hidden;
-    color: #000;
-    word-break: break-word;
-}
-
-.content {
-    font-family: "Fira Sans", "Noto Sans", SansSerif, sans-serif;
-    width: 100vh;
-    max-width: calc(100% - 4rem);
-    padding: 2rem;
-    margin: auto;
-    background-color: #FFF;
-}
-
-h1 {
-    font-size: 2.2rem;
-}
-
-h2 {
-    font-size: 1.8rem;
-}
-
-h3 {
-    font-size: 1.4rem;
-}
-
-h4 {
-    font-size: 1rem;
-}
-
-h5 {
-    font-size: 0.8rem;
-}
-
-h6 {
-    font-size: 0.4rem;
-}
-
-img {
-    max-width: 100%;
-    max-height: 100vh;
-    height: auto;
-}
-
-code {
-    color: #000;
-}
-
-code pre {
-    font-family: "Fira Code", "Mono", monospace;
-    padding: 0.8em 0.2em;
-    background-color: #EEE !important;
-    border-radius: 0.25em;
-}
-
-code.inlineCode {
-    font-family: "Fira Code", monospace;
-    border-radius: 0.1em;
-    background-color: #EEE;
-    padding: 0 0.1em
-}
-
-.tableWrapper {
-    overflow-x: auto;
-    width: 100%;
-}
-
-.tableWrapper > table {
-    margin: auto;
-}
-
-table {
-    border-collapse: collapse;
-}
-
-table tr:nth-child(odd) {
-    background-color: #DDD;
-}
-
-table tr:nth-child(1) {
-    background-color: white;
-    font-weight: bold;
-    border-bottom: 1px solid black;
-}
-
-table td, table th {
-    border-left: 1px solid black;
-    padding: 0.2em 0.5em
-}
-
-table tr td:first-child, table tr th:first-child {
-    border-left: none;
-}
-
-blockquote {
-    margin-left: 0;
-    background-color: rgba(0, 0, 0, 0);
-}
-
-.quote {
-    border-left: 0.3em solid gray;
-    border-radius: 0.2em;
-    padding-left: 1em;
-    margin-left: 0;
-    background-color: #EEE;
-}
-
-.quote .metadata {
-    font-style: italic;
-    padding-left: 0.5em;
-    color: #444
-}
-
-.figure {
-    width: 100%;
-    display: block;
-    text-align: center;
-}
-
-.figure .imageDescription {
-    display: block;
-    color: #444;
-    font-style: italic;
-}
-
-.centered {
-    text-align: center;
-}
-
-.glossaryReference {
-    text-decoration: none;
-    color: inherit;
-    border-bottom: 1px dotted #000;
-}
-
-.arrow {
-    font-family: "Fira Code", "Mono", monospace;
-}
-
-@media print {
-    .content > section > section, .content > section > section {
-        page-break-inside: avoid;
-    }
-    body {
-        background-color: white !important;
-    }
-}

src/format/html/html_writer.rs

@@ -1,14 +1,16 @@
+use crate::settings::style_settings::Theme;
 use std::io;
 use std::io::Write;
 
 pub struct HTMLWriter {
     inner: Box<dyn Write>,
+    theme: Theme,
 }
 
 impl HTMLWriter {
     /// Creates a new writer
-    pub fn new(inner: Box<dyn Write>) -> Self {
+    pub fn new(inner: Box<dyn Write>, theme: Theme) -> Self {
-        Self { inner }
+        Self { inner, theme }
     }
 
     /// Writes a raw string
@@ -30,4 +32,9 @@ impl HTMLWriter {
     pub fn flush(&mut self) -> io::Result<()> {
         self.inner.flush()
     }
+
+    /// Return the theme of the html writer
+    pub fn get_theme(&mut self) -> Theme {
+        self.theme.clone()
+    }
 }

src/format/html/to_html.rs

@@ -1,5 +1,6 @@
 use crate::elements::*;
 use crate::format::html::html_writer::HTMLWriter;
+use crate::format::style::{get_code_theme_for_theme, get_css_for_theme};
 use crate::format::PlaceholderTemplate;
 use crate::references::glossary::{GlossaryDisplay, GlossaryReference};
 use crate::references::templates::{Template, TemplateVariable};
@@ -7,9 +8,7 @@ use asciimath_rs::format::mathml::ToMathML;
 use htmlescape::encode_attribute;
 use minify::html::minify;
 use std::io;
-use syntect::highlighting::ThemeSet;
 use syntect::html::highlighted_html_for_string;
-use syntect::parsing::SyntaxSet;
 
 const MATHJAX_URL: &str = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";
 
@@ -108,7 +107,7 @@ impl ToHtml for Document {
         if self.is_root {
             let language = self.config.lock().metadata.language.clone();
 
-            let style = minify(std::include_str!("assets/style.css"));
+            let style = minify(get_css_for_theme(writer.get_theme()).as_str());
             writer.write("<!DOCTYPE html>".to_string())?;
             writer.write("<html lang=\"".to_string())?;
             writer.write_attribute(language)?;
@@ -312,19 +311,19 @@ impl ToHtml for Cell {
 impl ToHtml for CodeBlock {
     fn to_html(&self, writer: &mut HTMLWriter) -> io::Result<()> {
         writer.write("<div><code".to_string())?;
+
         if self.language.len() > 0 {
             writer.write(" lang=\"".to_string())?;
             writer.write_attribute(self.language.clone())?;
             writer.write("\">".to_string())?;
-            lazy_static::lazy_static! { static ref PS: SyntaxSet = SyntaxSet::load_defaults_nonewlines(); }
+            let (theme, syntax_set) = get_code_theme_for_theme(writer.get_theme());
-            lazy_static::lazy_static! { static ref TS: ThemeSet = ThemeSet::load_defaults(); }
 
-            if let Some(syntax) = PS.find_syntax_by_token(self.language.as_str()) {
+            if let Some(syntax) = syntax_set.find_syntax_by_token(self.language.as_str()) {
                 writer.write(highlighted_html_for_string(
                     self.code.as_str(),
-                    &PS,
+                    &syntax_set,
                     syntax,
-                    &TS.themes["InspiredGitHub"],
+                    &theme,
                 ))?;
             } else {
                 writer.write("<pre>".to_string())?;

src/format/mod.rs

@@ -4,6 +4,7 @@ use std::collections::HashMap;
 #[cfg(feature = "pdf")]
 pub mod chromium_pdf;
 pub mod html;
+pub mod style;
 
 pub struct PlaceholderTemplate {
     value: String,

src/format/style.rs

@@ -0,0 +1,55 @@
+use crate::settings::style_settings::Theme;
+use std::time::Instant;
+use syntect::highlighting::ThemeSet;
+use syntect::parsing::SyntaxSet;
+
+/// Returns the css of a theme compiled from sass
+pub fn get_css_for_theme(theme: Theme) -> String {
+    let start = Instant::now();
+    let vars = match theme {
+        Theme::GitHub => include_str!("assets/light-github.scss"),
+        Theme::SolarizedDark => include_str!("assets/dark-solarized.scss"),
+        Theme::SolarizedLight => include_str!("assets/light-solarized.scss"),
+        Theme::OceanDark => include_str!("assets/dark-ocean.scss"),
+        Theme::OceanLight => include_str!("assets/light-ocean.scss"),
+        Theme::MagicDark => include_str!("assets/dark-magic.scss"),
+    };
+    let style = format!("{}\n{}", vars, include_str!("assets/base.scss"));
+
+    let css = compile_sass(&*style);
+
+    log::debug!("Compiled style in {} ms", start.elapsed().as_millis());
+
+    css
+}
+
+/// Returns the syntax theme for a given theme
+pub fn get_code_theme_for_theme(theme: Theme) -> (syntect::highlighting::Theme, SyntaxSet) {
+    lazy_static::lazy_static! { static ref PS: SyntaxSet = SyntaxSet::load_defaults_nonewlines(); }
+    lazy_static::lazy_static! { static ref TS: ThemeSet = ThemeSet::load_defaults(); }
+
+    let theme = match theme {
+        Theme::GitHub => "InspiredGitHub",
+        Theme::SolarizedDark => "Solarized (dark)",
+        Theme::SolarizedLight => "Solarized (light)",
+        Theme::OceanDark => "base16-ocean.dark",
+        Theme::OceanLight => "base16-ocean.light",
+        Theme::MagicDark => "base16-ocean.dark",
+    };
+
+    return (TS.themes[theme].clone(), PS.clone());
+}
+
+fn compile_sass(sass: &str) -> String {
+    String::from_utf8(
+        rsass::compile_scss(
+            sass.as_bytes(),
+            rsass::output::Format {
+                style: rsass::output::Style::Compressed,
+                precision: 5,
+            },
+        )
+        .unwrap(),
+    )
+    .unwrap()
+}

src/main.rs

@@ -207,7 +207,7 @@ fn render_format(opt: &RenderOptions, document: Document, writer: BufWriter<File
 }
 
 fn render_html(document: Document, writer: BufWriter<File>) {
-    let mut writer = HTMLWriter::new(Box::new(writer));
+    let mut writer = HTMLWriter::new(Box::new(writer), document.config.lock().style.theme.clone());
     document.to_html(&mut writer).unwrap();
     writer.flush().unwrap();
 }

src/parser/inline.rs

@@ -373,7 +373,7 @@ impl ParseInline for Parser {
                     .document
                     .config
                     .lock()
-                    .formatting
+                    .style
                     .bib_ref_display
                     .clone(),
             ),

src/settings/format_settings.rs

@@ -1,14 +0,0 @@
-use serde::{Deserialize, Serialize};
-
-#[derive(Serialize, Deserialize, Clone, Debug)]
-pub struct FormatSettings {
-    pub bib_ref_display: String,
-}
-
-impl Default for FormatSettings {
-    fn default() -> Self {
-        Self {
-            bib_ref_display: "{{number}}".to_string(),
-        }
-    }
-}

src/settings/mod.rs

@@ -1,10 +1,10 @@
 use crate::elements::{Metadata, MetadataValue};
 use crate::settings::feature_settings::FeatureSettings;
-use crate::settings::format_settings::FormatSettings;
 use crate::settings::image_settings::ImageSettings;
 use crate::settings::import_settings::ImportSettings;
 use crate::settings::metadata_settings::MetadataSettings;
 use crate::settings::pdf_settings::PDFSettings;
+use crate::settings::style_settings::StyleSettings;
 use config::{ConfigError, Source};
 use serde::{Deserialize, Serialize};
 use std::collections::HashMap;
@@ -15,11 +15,11 @@ use std::mem;
 use std::path::PathBuf;
 
 pub mod feature_settings;
-pub mod format_settings;
 pub mod image_settings;
 pub mod import_settings;
 pub mod metadata_settings;
 pub mod pdf_settings;
+pub mod style_settings;
 
 pub type SettingsResult<T> = Result<T, SettingsError>;
 
@@ -67,7 +67,7 @@ pub struct Settings {
     pub imports: ImportSettings,
     pub pdf: PDFSettings,
     pub images: ImageSettings,
-    pub formatting: FormatSettings,
+    pub style: StyleSettings,
     pub custom_attributes: HashMap<String, String>,
 }
 

src/settings/style_settings.rs

@@ -0,0 +1,26 @@
+use serde::{Deserialize, Serialize};
+
+#[derive(Serialize, Deserialize, Clone, Debug)]
+pub struct StyleSettings {
+    pub bib_ref_display: String,
+    pub theme: Theme,
+}
+
+impl Default for StyleSettings {
+    fn default() -> Self {
+        Self {
+            bib_ref_display: "{{number}}".to_string(),
+            theme: Theme::GitHub,
+        }
+    }
+}
+
+#[derive(Serialize, Deserialize, Clone, Debug)]
+pub enum Theme {
+    GitHub,
+    SolarizedDark,
+    SolarizedLight,
+    OceanDark,
+    OceanLight,
+    MagicDark,
+}