feat: change admonitions -> notice

- Fix syntax highlighting especially light theme looked bad

- Change the name of admonitions to notice.
Also tidy up the code so there is less repeated code

- Updated colours in themes, to be easier to read

- Add icon next to views

- Move page view into its own partial file

Fixes: reorx#31, reorx#27

Author: hmajid2301

README.md

@@ -6,7 +6,7 @@ My own for of PaperModX adds the following;
 
 - Mermaid Diagram Support
 - Series posts shown
-- Admonitions
+- Notice/Admonitions (Highlighted sections)
 - Inline Search
   - Inspired by Blowfish Theme
 - Remove newsletter

assets/css/common/admonition.css renamed to assets/css/common/notice.css

@@ -8,8 +8,8 @@
   font-display: swap;
 }
 .iconfont,
-.admonition .admonition-title:before,
-details.admonition summary:after {
+.notice .notice-title:before,
+details.notice summary:after {
   font-family: "iconfont" !important;
   speak: none;
   font-style: normal;
@@ -28,7 +28,7 @@ details.admonition summary:after {
   -moz-osx-font-smoothing: grayscale;
 }
 
-.admonition {
+.notice {
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),
     0 3px 1px -2px rgba(0, 0, 0, 0.2);
   position: relative;
@@ -38,154 +38,154 @@ details.admonition summary:after {
   border-radius: 0.125rem;
   overflow: auto;
 }
-.admonition .admonition-title {
+.notice .notice-title {
   margin: 0 -0.75rem;
   padding: 0.5rem 0.75rem 0.5rem 2.5rem;
   border-bottom: 0.1rem solid rgba(68, 138, 255, 0.1);
   background-color: rgba(68, 138, 255, 0.1);
   font-weight: 700;
 }
-.admonition .admonition-title:before {
+.notice .notice-title:before {
   cursor: auto;
   position: absolute;
   left: 0.75rem;
   top: 0.75rem;
 }
-.admonition.note {
+.notice.note {
   border-left-color: #448aff;
 }
-.admonition.note .admonition-title:before {
+.notice.note .notice-title:before {
   color: #448aff;
   content: "\e903";
 }
-.admonition.abstract {
+.notice.abstract {
   border-left-color: #00b0ff;
 }
-.admonition.abstract .admonition-title {
+.notice.abstract .notice-title {
   background-color: rgba(0, 176, 255, 0.1);
 }
-.admonition.abstract .admonition-title:before {
+.notice.abstract .notice-title:before {
   color: #00b0ff;
   content: "\e9bb";
 }
-.admonition.info {
+.notice.info {
   border-left-color: #00b8d4;
 }
-.admonition.info .admonition-title {
+.notice.info .notice-title {
   background-color: rgba(0, 184, 212, 0.1);
 }
-.admonition.info .admonition-title:before {
+.notice.info .notice-title:before {
   color: #00b8d4;
   content: "\ea0c";
 }
-.admonition.tip {
+.notice.tip {
   border-left-color: #00bfa5;
 }
-.admonition.tip .admonition-title {
+.notice.tip {
   background-color: rgba(0, 191, 165, 0.1);
 }
-.admonition.tip .admonition-title:before {
+.notice.tip .notice-title:before {
   color: #00bfa5;
   content: "\e906";
 }
-.admonition.success {
+.notice.success {
   border-left-color: #00c853;
 }
-.admonition.success .admonition-title {
+.notice.success {
   background-color: rgba(0, 200, 83, 0.1);
 }
-.admonition.success .admonition-title:before {
+.notice.success .notice-title:before {
   color: #00c853;
   content: "\ea10";
 }
-.admonition.question {
+.notice.question {
   border-left-color: #64dd17;
 }
-.admonition.question .admonition-title {
+.notice.question {
   background-color: rgba(100, 221, 23, 0.1);
 }
-.admonition.question .admonition-title:before {
+.notice.question .notice-title:before {
   color: #64dd17;
   content: "\ea09";
 }
-.admonition.warning {
+.notice.warning {
   border-left-color: #ff9100;
 }
-.admonition.warning .admonition-title {
+.notice.warning {
   background-color: rgba(255, 145, 0, 0.1);
 }
-.admonition.warning .admonition-title:before {
+.notice.warning .notice-title:before {
   color: #ff9100;
   content: "\ea07";
 }
-.admonition.failure {
+.notice.failure {
   border-left-color: #ff5252;
 }
-.admonition.failure .admonition-title {
+.notice.failure {
   background-color: rgba(255, 82, 82, 0.1);
 }
-.admonition.failure .admonition-title:before {
+.notice.failure .notice-title:before {
   color: #ff5252;
   content: "\ea0f";
 }
-.admonition.danger {
+.notice.danger {
   border-left-color: #ff1744;
 }
-.admonition.danger .admonition-title {
+.notice.danger {
   background-color: rgba(255, 23, 68, 0.1);
 }
-.admonition.danger .admonition-title:before {
+.notice.danger .notice-title:before {
   color: #ff1744;
   content: "\e905";
 }
-.admonition.bug {
+.notice.bug {
   border-left-color: #f50057;
 }
-.admonition.bug .admonition-title {
+.notice.bug {
   background-color: rgba(245, 0, 87, 0.1);
 }
-.admonition.bug .admonition-title:before {
+.notice.bug .notice-title:before {
   color: #f50057;
   content: "\e907";
 }
-.admonition.example {
+.notice.example {
   border-left-color: #651fff;
 }
-.admonition.example .admonition-title {
+.notice.example {
   background-color: rgba(101, 31, 255, 0.1);
 }
-.admonition.example .admonition-title:before {
+.notice.example .notice-title:before {
   color: #651fff;
   content: "\e9b9";
 }
-.admonition.quote {
+.notice.quote {
   border-left-color: #9e9e9e;
 }
-.admonition.quote .admonition-title {
+.notice.quote {
   background-color: rgba(158, 158, 158, 0.1);
 }
-.admonition.quote .admonition-title:before {
+.notice.quote .notice-title:before {
   color: #9e9e9e;
   content: "\e904";
 }
-.admonition:last-child {
+.notice:last-child {
   margin-bottom: 0.75rem;
 }
-details.admonition summary {
+details.notice summary {
   display: block;
   outline: none;
   cursor: pointer;
 }
-details.admonition summary::-webkit-details-marker {
+details.notice summary::-webkit-details-marker {
   display: none;
 }
-details.admonition summary:after {
+details.notice summary:after {
   position: absolute;
   top: 0.75rem;
   right: 0.75rem;
   color: rgba(0, 0, 0, 0.26);
   content: "\e908";
 }
-details.admonition[open] > summary:after {
+details.notice[open] > summary:after {
   transform: rotate(180deg);
 }

assets/css/core/theme-vars.css

@@ -57,7 +57,7 @@
     --secondary: rgb(155, 156, 157);
     --tertiary: rgb(123, 124, 124);
     --tertiary-bg: rgb(65, 66, 68);
-    --content: rgb(196, 196, 197);
+    --content: rgb(255, 255, 255);
     --code-bg: rgb(55, 56, 62);
     --border: rgb(51, 51, 51);
     --link-background-color: #5242746d;

layouts/_default/single.html

@@ -21,8 +21,7 @@ <h1 class="post-title">
       {{- partial "likes.html" . }} 
       {{- end }}
       {{ if and (.Params.ShowPageViews | default (.Site.Params.article.ShowPageViews | default true)) }}
-        <span class="meta-item">
-        {{- partial "page_views.html" . -}}</span>
+        {{- partial "page_views.html" . -}}
       {{ end }}
 
       {{ partial "edit_post.html" . }}

layouts/partials/page_views.html

@@ -1,5 +1,8 @@
-<span id="{{ .File.UniqueID }}" title="{{ i18n "article.page_views" }}">
-    {{- "🙈" | markdownify | emojify -}}
+<span class="meta-item">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg> 
+    &nbsp;
+    <span id="{{ .File.UniqueID }}" title="{{ i18n "article.page_views" }}">
+    </span>
 </span>
 <script>
     var r = new XMLHttpRequest();

layouts/shortcodes/admonition.html

@@ -0,0 +1,4 @@
+<details class="notice {{ .Get "type" }}" open="{{ .Get "opened" | default true }}">
+  {{- with .Get "title" }}<summary class="notice-title">{{ . }}</summary>{{ end }}
+  {{ .Inner | markdownify }}
+</details>