init

_extensions/shafayetShafee/bsicons/_extension.yml

@@ -0,0 +1,8 @@
+title: Support for Bootstrap Icons
+author: Shafayet Khan Shafee
+version: 1.0.0
+quarto-required: ">=1.2.0"
+contributes:
+  shortcodes:
+    - bsicons.lua
+

_extensions/shafayetShafee/bsicons/bsicons.lua

@@ -0,0 +1,66 @@
+local function ensureHtmlDeps()
+  quarto.doc.addHtmlDependency({
+    name = "bootstrap-icons",
+    version = "1.11.1",
+    stylesheets = {"assets/css/all.css"}
+  })
+end
+
+local function isEmpty(s)
+  return s == nil or s == ''
+end
+
+local str = pandoc.utils.stringify
+
+return {
+  ["bi"] = function(args, kwargs)
+    local icon = str(args[1])
+    local size = str(kwargs["size"])
+    local color = str(kwargs["color"])
+    local label = str(kwargs["label"])
+    local class = str(kwargs["class"])
+    
+    if not isEmpty(size) then
+      size = "font-size: " .. size .. ";"
+    else
+      size = ''
+    end
+    
+    if not isEmpty(color) then
+      color = "color: " .. color  .. ";"
+    else
+      color = ''
+    end
+    
+    local style = "style=\"" .. size .. color .. "\""
+    
+    if not isEmpty(label) then
+      label = " aria-label=\"" .. label  .. "\""
+    end
+    
+    if isEmpty(class) then
+      class = ''
+    end
+    
+    local role = "role=\"img\""
+    local aria_hidden = "aria-hidden=\"true\""
+
+    if quarto.doc.isFormat("html:js") then
+      ensureHtmlDeps()
+      if isEmpty(label) then
+        return pandoc.RawInline(
+          'html',
+          "<i class=\"bi-" .. icon .. " " .. class .. "\"" .. style .. role .. aria_hidden .. "></i>"
+        )
+      else
+        return pandoc.RawInline(
+          'html',
+          "<i class=\"bi-" .. icon .. " " .. class .. "\"" .. style .. role .. label .. "></i>"
+        )
+      end
+    else
+      return pandoc.Null()
+    end
+
+  end
+}

_extensions/shafayetShafee/metropolis-beamer/_extension.yml

@@ -0,0 +1,14 @@
+title: Metropolis-beamer
+author: shafayetShafee
+version: 1.0.0
+quarto-required: ">=1.4.0"
+contributes:
+  formats:
+    revealjs:
+      date-format: long
+      theme: [simple, custom.scss]
+      filters: 
+        - metropolis-header.lua
+        - custom-block.lua
+
+

_extensions/shafayetShafee/metropolis-beamer/custom-block.lua

@@ -0,0 +1,36 @@
+--[[
+MIT License
+
+Copyright (c) 2024 Shafayet Khan Shafee
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+]]--
+
+local str = pandoc.utils.stringify
+
+if quarto.doc.is_format('revealjs') then
+  function Callout(el)
+    if el.type == 'none' then
+      el.type = 'note'
+      el.icon = false
+      el.appearance = 'default'
+      return el
+    end
+  end
+end

_extensions/shafayetShafee/metropolis-beamer/custom.scss

@@ -0,0 +1,325 @@
+@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Yanone+Kaffeesatz:wght@200..700&display=swap');
+
+@import "icon.scss";
+
+/*-- scss:defaults --*/
+
+$font-family-sans-serif:	"Fira Sans", Helvetica, sans-serif !default;
+$font-family-monospace:	"Source Code Pro", monospace !default;
+$presentation-h-font12:	"Yanone Kaffeesatz", sans-serif !default; 
+$presentation-h-font36: "Source Sans 3", sans-serif !default; 
+$presentation-font-size-root:	32px !default;
+$presentation-h1-font-size:	2.5em !default;
+$presentation-h2-font-size:	2em !default;
+$presentation-h3-font-size:	1.4em !default;
+$presentation-font-smaller:	0.7 !default;
+$presentation-line-height: 1.3 !default;
+$presentation-title-slide-text-align: left !default;
+$presentation-slide-text-align: left !default;
+$code-block-font-size: 0.60em !default;
+
+$primary-color: #23373b !default;
+$secondary-color: #EB811B !default;
+$body-fg-color: #33474b !default;
+$alert-color: #9c162a !default;
+$example-color: #14B03D !default;
+$body-bg: #f1f1f1 !default;
+$body-color: $body-fg-color !default; 
+
+$header-bg-color: $primary-color !default;
+$selection-bg-color: #26351C !default;
+$selection-fcolor: #fff !default;
+$dark-bg-code-color: $example-color !default;
+$link-color: $secondary-color !default;
+
+$titleSlide-line: solid !default;
+$h12-font-weight: 500 !default;
+$h36-font-weight: 400 !default;
+$cell-code-font-weight: normal !default;
+$body-font-weight: 300 !default;
+$authors-block-gap: 4em !default;
+
+/*-- scss:rules --*/
+
+.reveal {
+    font-weight: $body-font-weight !important;
+  
+  h1, h2 {
+    font-family: $presentation-h-font12;
+    font-weight: $h12-font-weight;
+  }
+  
+  h3, h4, h5, h6 {
+    font-family: $presentation-h-font36;
+    font-weight: $h36-font-weight;
+  }
+  
+  code {
+    font-weight: $cell-code-font-weight;
+  }
+  
+  strong {
+    font-weight: $h12-font-weight;
+  }
+  
+  blockquote {
+    margin-left: 1em;
+    
+    p {
+      padding: 5px;
+      line-height: 1.2;
+      color: lighten(#604c38, 20%);
+    }
+  }
+  
+  div.sourceCode {
+    margin-top: 15px;
+    box-shadow: 0px 0px 6px rgba(0,0,0,.1);
+  }
+  
+  pre.sourceCode code {
+    padding-top: 8px;
+  }
+  
+  .alert { color: $alert-color; }
+  .example { color: $example-color; }
+  
+  ::selection {
+    color: $selection-fcolor;
+    background: $selection-bg-color;
+    text-shadow: none;
+  }
+  
+  .callout {
+    box-shadow: 0px 0px 6px rgba(0,0,0,.1);
+    border-radius: 8px;
+    
+    .callout-body {
+      font-weight: $body-font-weight !important;
+      border-radius: 8px;
+      
+      code {
+        font-size: 1.2em;
+      }
+      
+      .callout-title {
+        display: flex;
+        align-items: flex-end;
+      }
+    }
+  }
+  
+  section#references {
+    font-size: 0.8em;
+  }
+  
+  div.csl-entry {
+    margin-bottom: 1em;
+    font-weight: $cell-code-font-weight;
+    
+    span {
+      color: gray;
+    }
+  }
+  
+  div.csl-entry::before {
+    content: $book-icon;
+  }
+  
+  .institute,
+  .quarto-title-affiliation,
+  .quarto-title-author-email {
+    font-style: italic;
+  }
+  
+  .quarto-title-authors {
+    padding-top: 20px;
+    margin-top: 2rem;
+    margin-bottom: 3.5rem;
+    border-top: 2px $titleSlide-line $secondary-color;
+  
+    .quarto-title-author {
+      padding-left: 0em !important;
+      padding-right: $authors-block-gap !important;
+      width: fit-content;
+    }
+  }
+  
+  .author,
+  .quarto-title-author-name {
+    color: $body-color;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+  
+  #title-slide .subtitle, 
+  div.reveal div.slides section.quarto-title-block .subtitle {
+    margin-bottom: 1.5rem;
+  }
+  
+  .slide-background.title-slide {
+    background-color: $primary-color;
+  }
+  
+  div.header-logo { 
+    grid-area: logo;
+  }
+
+  div.header-title { 
+    grid-area: ht;
+    padding-left: 60px;
+    padding-top: 15px;
+    padding-bottom: 10px;
+  }
+  
+  div.reveal-header {
+    display: grid;
+    grid-template-columns: 3fr 0.35fr;
+    grid-template-areas: "ht logo";
+    column-gap: 10px;
+    align-items: center;
+    top: -5px;
+    margin: 3.2px 0px 2px 0px;
+    width: 100%;
+    position: fixed;
+    background: $header-bg-color;
+    z-index: 5;
+    
+    .hedaer-title h2 {
+      color: #fff !important;
+    }
+  }
+  
+  
+  div.slides section:not(.title-slide):not(#title-slide):not(.stack) {
+    padding-top: 1.5em;
+    margin-top: 1.5em;
+    padding-bottom: 2.5em;
+  }
+
+  div.slides section.smaller:not(.title-slide):not(#title-slide):not(.stack) {
+    padding-top: 4em;
+    margin-top: 1.5em;
+    padding-bottom: 2em;
+  }
+
+  .header-logo img,
+  .header-logo svg{
+    margin: 0px 0px 0px 0px;
+    padding-left: 3vw;
+    padding-right: 18px;
+    padding-top: 12px;
+    height: 100%;
+    width: auto;
+    max-width: max(80px, 12vw);
+    max-height: max(80px, 12vh);
+  }
+
+  img {
+    display: block;
+    margin: auto;
+    padding: 12px;
+  }
+  
+  .cell-output-display {
+    max-height: 450px;
+    overflow-y: auto;
+  }
+  
+  .footer,
+  .slide-number {
+    color: #604c38;
+  }
+  
+  .slide aside {
+    bottom: 250px ;
+    color: #604c38;
+  }
+  
+  section[data-background-image] {
+    color: white;
+    
+    h1, h2, h3, h4, h5, h5 {
+      color: white;
+    }
+    
+    code {
+      color: $example-color;
+      filter: brightness(2);
+    }
+  }
+  
+  .progress {
+	  background-color: transparent;
+	  color: $secondary-color;
+  }
+  
+  // tables
+  .slides table {
+    
+    margin-bottom: 0.80em;
+    border-top: 2px solid lighten(#505453, 5%);
+    border-bottom: 2px solid lighten(#505453, 5%);
+    
+    th, td {
+      border: none;
+      padding: 0.20em;
+      font-size: 0.90em;
+    }
+    
+    thead th {
+      font-weight: normal;
+    }
+    
+    thead th,
+    tr:last-child td {
+      border-bottom: 1px solid lighten(#505453, 10%);
+    }
+    
+  }
+  
+  .slide {
+    figure>figcaption {
+      font-size: 0.80em;
+    }
+  }
+}
+
+figure.quarto-float-tbl figcaption.quarto-float-caption-top {
+  margin-bottom: 1rem;
+}
+
+
+div[type="default"],
+div[type="example"],
+div[type="alert"] {
+  
+  .callout {
+     border-radius: 0px;
+     box-shadow: 0px 0px 6px rgba(0, 0, 0, .05);
+  }
+  .callout.callout-style-default {
+     border-left: 1px solid;
+  }
+  
+  div.callout-note {
+     border-left-color: silver !important;
+  }
+  
+  div.callout-note.callout-style-default .callout-title {
+     background-color: #bebebe;
+  }
+}
+
+div[type="example"] {
+  div.callout-note.callout-style-default .callout-title {
+     color: $example-color;
+  }
+}
+
+div[type="alert"] {
+  div.callout-note.callout-style-default .callout-title {
+     color: $alert-color;
+  }
+}

_extensions/shafayetShafee/metropolis-beamer/metropolis-header.lua

@@ -0,0 +1,89 @@
+--[[
+MIT License
+
+Copyright (c) 2024 Shafayet Khan Shafee
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+]]--
+
+local str = pandoc.utils.stringify
+
+local function ensureHtmlDeps()
+  quarto.doc.add_html_dependency({
+    name = "metropolis-beamer",
+    version = "1.0.0",
+    scripts = {
+        { 
+          path = "resources/js/add_header.js", 
+          attribs = {defer = "true"},
+          afterBody = true
+        }
+      }
+  })
+end
+
+if quarto.doc.is_format('revealjs') then
+  -- Ensuring the dependencies got loaded before proceeding
+  ensureHtmlDeps()
+  
+  function Span(el)
+      local style = el.attributes["style"] or ""
+      local color = el.attributes['color']
+      local bg_color = el.attributes['bg']
+    
+      if color then
+        local fcolor = "color: " .. color .. ";"
+        el.attributes['color'] = nil
+        style = style .. ";" .. fcolor 
+    end
+    if bg_color then
+        local bcolor = "background-color: " .. bg_color .. ";"
+        el.attributes['bg-color'] = nil
+        style = style .. ";" .. bcolor 
+    end
+    
+    el.attributes['style'] = style
+    return el
+  end
+    
+  function Pandoc(doc)
+    local blocks = doc.blocks
+    local str = pandoc.utils.stringify
+    local meta = doc.meta
+    -- make divs structure for holding text and logo.
+    local header_logo = meta['header-logo'] and str(meta['header-logo']) or ""
+    local header_logo_link = meta['header-logo-link'] and str(meta['header-logo-link']) or ""
+    local header_img = pandoc.Div(pandoc.Image("", header_logo, ""), {class = "header-logo"})
+    
+    if header_logo_link ~= "" then
+      header_img.attributes['header-logo-link'] = header_logo_link
+    end
+    
+    local header_title = pandoc.Div({pandoc.Para(' ')} ,{class = "header-title"})
+
+    local div = pandoc.Div(
+      {
+        header_title,
+        header_img
+      }, 
+      {class = 'reveal-header'})
+    table.insert(blocks, div)
+    return doc
+  end
+end

_extensions/shafayetShafee/metropolis-beamer/resources/js/add_header.js

@@ -0,0 +1,109 @@
+/**
+ * reveal-header
+ * A filter that adds header text and logo.
+ * 
+ * MIT License
+ * Copyright (c) 2023-2024 Shafayet Khan Shafee.
+ */
+
+function header() {
+  
+  // add the header structure as the firstChild of div.reveal-header
+  function add_header() {
+    let header = document.querySelector("div.reveal-header");
+    let reveal = document.querySelector(".reveal");
+    reveal.insertBefore(header, reveal.firstChild);
+    
+    let header_title_p_placeholder = document.querySelector('div.header-title > p');
+    let header_title_h2_placeholder = document.createElement('h2');
+    header_title_p_placeholder.replaceWith(header_title_h2_placeholder);
+    
+    logo_img = document.querySelector('.header-logo > img');
+    if (logo_img?.getAttribute('src') == null) {
+      if (logo_img?.getAttribute('data-src') != null) {
+        logo_img.src = logo_img?.getAttribute('data-src') || "";
+        logo_img.removeAttribute('data-src'); 
+      };
+    };
+  };
+  
+  
+  function make_h2_title() {
+    let h2_text = Reveal.getCurrentSlide().getAttribute('data-h2-text');
+    let header_title_placeholder = document.querySelector('div.header-title > h2');
+    header_title_placeholder.innerText = h2_text;
+    
+    let header_div = document.querySelector('div.reveal-header');
+    
+    if(Reveal.getCurrentSlide().id == 'title-slide' ||
+       Reveal.getCurrentSlide().classList.contains('title-slide') || h2_text == ''
+       ) {
+      header_div.style.visibility = 'hidden';
+    } else {
+      header_div.style.visibility = 'visible';
+      header_title_placeholder.style.color = 'white';
+    };
+  };
+  
+  
+  function linkify_logo(logo, href) {
+    const logo_cloned = logo.cloneNode(true);
+    const link = document.createElement('a');
+    link.href = href;
+    link.target = '_blank';
+    link.appendChild(logo_cloned);
+    logo.replaceWith(link);
+  };
+    
+  function get_clean_attrs(elem, attrName) {
+    let attrVal = elem.getAttribute(attrName);
+    if (attrVal != null) {
+     elem.removeAttribute(attrName); 
+    }
+    return attrVal;
+  };
+  
+  
+  if (Reveal.isReady()) {
+    add_header();
+    
+    const slides = Reveal.getSlides();
+    slides.forEach(slide => {
+      const h2Element = slide.querySelector('h2');
+      
+      if (h2Element) {
+        h2Element.style.display = 'none';
+        const h2Text = h2Element.textContent;
+        slide.setAttribute('data-h2-text', h2Text);
+      } else {
+        slide.setAttribute('data-h2-text', '');
+      };
+  });
+    
+    make_h2_title();
+    
+    /*************** linkifying the header and footer logo ********************/
+    const header_logo = document.querySelector('div.header-logo');
+    if (header_logo != null) {
+      const header_logo_link = get_clean_attrs(header_logo, 'data-header-logo-link');
+      const footer_logo_link = get_clean_attrs(header_logo, 'data-footer-logo-link');
+      
+      if (header_logo_link != null) {
+        const header_logo_img = document.querySelector('div.header-logo').firstElementChild;
+        linkify_logo(header_logo_img, header_logo_link);
+      };
+      
+    };
+    /****************************** END ***************************************/
+    
+    Reveal.on( 'slidechanged', event => {
+      make_h2_title();
+    });
+    
+  };
+};
+
+
+window.addEventListener("load", (event) => {
+  header();
+});