And notice shortcodes (luizdepra#537)

* Added information panel shortcodes (luizdepra#437)

* Added information panel shortcodes

* Fixed dark mixin

* Moved mixin location to correct location

Co-authored-by: Luiz F. A. de Prá <[email protected]>

* Fix SCSS styling

* Update generated files

* Fix notice HTML

* Fix Makefile

* Rename JS file

* Adsd emoji support for lang selectors

* Fix notices and other things

* Fix JS on template

* Update  example content

* Update images

* Update generated files

* Fix netlify preview

* Fix netlify preview build

* Fix netlify theme path

Co-authored-by: Jian Liew <[email protected]>

Author: luizdepra

.gitignore

@@ -1,4 +1,3 @@
 **/themes/
-demo/
-.hugo/*
-!.hugo/version
+exampleSite/public/
+exampleSite/resources/

Makefile

@@ -1,20 +1,12 @@
 HUGO_BIN=hugo
 
-.PHONY: prepare release build demo clean
+.PHONY: build demo release
 
-build: prepare
-	$(HUGO_BIN) --source demo
+build:
+	$(HUGO_BIN) --themesDir=../.. --source=exampleSite
 
-demo: prepare
-	$(HUGO_BIN) server --buildDrafts --source demo
+demo:
+	$(HUGO_BIN) server -D --themesDir=../.. --source=exampleSite
 
 release: build
-	rm -rf ./resources && cp -r ./demo/resources ./resources
-
-prepare: clean
-	mkdir -p demo/themes/hugo-coder
-	rsync -av exampleSite/ demo
-	rsync -av --exclude='demo' --exclude='exampleSite' --exclude='.git' . demo/themes/hugo-coder
-
-clean:
-	rm -rf demo
+	rm -rf ./resources && cp -r ./exampleSite/resources ./resources

assets/js/coder.js

@@ -0,0 +1,33 @@
+const body = document.body;
+const darkModeToggle = document.getElementById('dark-mode-toggle');
+const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+// Check if user preference is set, if not check value of body class for light or dark else it means that colorscheme = auto
+if (localStorage.getItem("colorscheme")) {
+    setTheme(localStorage.getItem("colorscheme"));
+} else if (body.classList.contains('colorscheme-light') || body.classList.contains('colorscheme-dark')) {
+    setTheme(body.classList.contains("colorscheme-dark") ? "dark" : "light");
+} else {
+    setTheme(darkModeMediaQuery.matches ? "dark" : "light");
+}
+
+darkModeToggle.addEventListener('click', () => {
+    setTheme(body.classList.contains("colorscheme-dark") ? "light" : "dark");
+});
+
+darkModeMediaQuery.addListener((event) => {
+    setTheme(event.matches ? "dark" : "light");
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+    let node = document.querySelector('.preload-transitions');
+    node.classList.remove('preload-transitions');
+});
+
+function setTheme(theme) {
+    body.classList.remove('colorscheme-auto');
+    inverse = theme === 'dark' ? 'light' : 'dark';
+    localStorage.setItem('colorscheme', theme);
+    body.classList.remove('colorscheme-' + inverse);
+    body.classList.add('colorscheme-' + theme);
+}

assets/js/dark-mode.js

@@ -1,22 +1,23 @@
 *,
 *:after,
 *:before {
-	box-sizing: inherit;
+  box-sizing: inherit;
 }
 
 html {
-	box-sizing: border-box;
-	font-size: 62.5%;
+  box-sizing: border-box;
+  font-size: 62.5%;
 }
 
 body {
   color: $fg-color;
   background-color: $bg-color;
-	font-family: $font-family;
-	font-size: 1.8em;
-	font-weight: 400;
+  font-family: $font-family;
+  font-size: 1.8em;
+  font-weight: 400;
   line-height: 1.8em;
-  @media only screen and (max-width : 768px) {
+
+  @media only screen and (max-width: 768px) {
     font-size: 1.6em;
     line-height: 1.6em;
   }
@@ -26,15 +27,16 @@ a {
   font-weight: 500;
   color: $link-color;
   text-decoration: none;
-  transition: all .25s ease-in;
+  transition: all 0.25s ease-in;
+
   &:focus,
   &:hover {
     text-decoration: underline;
   }
 }
 
 p {
-  margin: 2.0rem 0 2.0rem 0;
+  margin: 2rem 0 2rem 0;
 }
 
 h1,
@@ -70,58 +72,70 @@ h6 {
 h1 {
   font-size: 3.2rem;
   line-height: 3.6rem;
-  @media only screen and (max-width : 768px) {
-    font-size: 3.0rem;
+
+  @media only screen and (max-width: 768px) {
+    font-size: 3rem;
     line-height: 3.4rem;
   }
 }
+
 h2 {
   font-size: 2.8rem;
   line-height: 3.2rem;
-  @media only screen and (max-width : 768px) {
+
+  @media only screen and (max-width: 768px) {
     font-size: 2.6rem;
-    line-height: 3.0rem;
+    line-height: 3rem;
   }
 }
+
 h3 {
   font-size: 2.4rem;
   line-height: 2.8rem;
-  @media only screen and (max-width : 768px) {
+
+  @media only screen and (max-width: 768px) {
     font-size: 2.2rem;
     line-height: 2.6rem;
   }
 }
+
 h4 {
   font-size: 2.2rem;
   line-height: 2.6rem;
-  @media only screen and (max-width : 768px) {
-    font-size: 2.0rem;
+
+  @media only screen and (max-width: 768px) {
+    font-size: 2rem;
     line-height: 2.4rem;
   }
 }
+
 h5 {
-  font-size: 2.0rem;
+  font-size: 2rem;
   line-height: 2.4rem;
-  @media only screen and (max-width : 768px) {
+
+  @media only screen and (max-width: 768px) {
     font-size: 1.8rem;
     line-height: 2.2rem;
   }
 }
+
 h6 {
   font-size: 1.8rem;
   line-height: 2.2rem;
-  @media only screen and (max-width : 768px) {
+
+  @media only screen and (max-width: 768px) {
     font-size: 1.6rem;
-    line-height: 2.0rem;
+    line-height: 2rem;
   }
 }
 
-b, strong {
+b,
+strong {
   font-weight: 700;
 }
 
-.highlight > div,
-.highlight > pre {
+.highlight>div,
+.highlight>pre {
   margin: 0 0 2rem;
   padding: 1rem;
   border-radius: 1rem;
@@ -135,6 +149,7 @@ pre {
   line-height: 2.6rem;
   overflow-x: auto;
   margin: 0;
+
   code {
     display: inline-block;
     background-color: inherit;
@@ -152,31 +167,39 @@ code {
 
 blockquote {
   border-left: 2px solid $alt-bg-color;
-  padding-left: 2.0rem;
+  padding-left: 2rem;
   line-height: 2.2rem;
   font-weight: 400;
   font-style: italic;
 }
 
-th, td {
+th,
+td {
   padding: 1.6rem;
 }
+
 table {
   border-collapse: collapse;
 }
-table td, table th {
+
+table td,
+table th {
   border: 2px solid $alt-fg-color;
 }
+
 table tr:first-child th {
   border-top: 0;
 }
+
 table tr:last-child td {
   border-bottom: 0;
 }
+
 table tr td:first-child,
 table tr th:first-child {
   border-left: 0;
 }
+
 table tr td:last-child,
 table tr th:last-child {
   border-right: 0;
@@ -190,6 +213,16 @@ figure {
   text-align: center;
 }
 
+.preload-transitions * {
+  $null-transition: none !important;
+
+  -webkit-transition: $null-transition;
+  -moz-transition: $null-transition;
+  -ms-transition: $null-transition;
+  -o-transition: $null-transition;
+  transition: $null-transition;
+}
+
 .wrapper {
   display: flex;
   flex-direction: column;
@@ -200,10 +233,10 @@ figure {
 
 .container {
   margin: 0 auto;
-  max-width: 90.0rem;
+  max-width: 90rem;
   width: 100%;
-  padding-left: 2.0rem;
-  padding-right: 2.0rem;
+  padding-left: 2rem;
+  padding-right: 2rem;
 }
 
 .fab {
@@ -233,6 +266,6 @@ figure {
 img.emoji {
   height: 1em;
   width: 1em;
-  margin: 0 .05em 0 .1em;
+  margin: 0 0.05em 0 0.1em;
   vertical-align: -0.1em;
 }

assets/scss/_base.scss

@@ -1,5 +1,4 @@
 @mixin base_dark {
-
   color: $fg-color-dark;
   background-color: $bg-color-dark;
 
@@ -50,18 +49,18 @@
     border-left: 2px solid $alt-bg-color-dark;
   }
 
-  table td, table th {
+  table td,
+  table th {
     border: 2px solid $alt-fg-color-dark;
   }
-
 }
 
 body.colorscheme-dark {
-  @include base_dark()
+  @include base_dark();
 }
 
 body.colorscheme-auto {
   @media (prefers-color-scheme: dark) {
-    @include base_dark()
+    @include base_dark();
   }
 }

assets/scss/_base_dark.scss

@@ -16,6 +16,7 @@ body.rtl {
   table tr th:first-child {
     border-right: 0;
   }
+
   table tr td:last-child,
   table tr th:last-child {
     border-left: 0;