Merged two versions of the macros and separated-out the CSS

.gitignore

@@ -0,0 +1 @@
+*~

main.py

@@ -41,13 +41,45 @@ def define_env(env):
         """
         return(f"<div class='todo'>{message}</div>")
 
+
+    @env.macro
+    def version_info():
+
+        draftStatus="DRAFT"
+        if env.variables['extra']['draft']==0:
+            draftStatus="RELEASED"
+        year=env.variables['extra']['year']
+        return f"""
+ - **Year:** {year}
+ - **Status:** {draftStatus}
+"""
+
 
     @env.macro
     def state(state: str):
         """
         Display state span in output
         """
-        return(f"<span class='state-{state}'>{state}</span>")
+
+        text=state
+        if state.upper()=="A":
+            text="TODO "
+        elif state.upper()=="B":
+            text="REVIEW"
+        elif state.upper()=="C":
+            text="DONE "
+        if env.variables['extra']['draft']!=0:
+            return(f" <span class='state state-{state}'>[{text}]</span>")
+        else:
+            return ""
+
+
+    # @env.macro
+    # def state(state: str):
+    #     """
+    #     Display state span in output
+    #     """
+    #     return(f"<span class='state-{state}'>{state}</span>")
 
 
     @env.macro
@@ -116,12 +148,6 @@ def define_env(env):
             return f.read()
 
 
-    # create a jinja2 filter
-    @env.filter
-    def reverse(x):
-        "Reverse a string (and uppercase)"
-        return x.upper()[::-1]
-
 
 if __name__=="__main__":
     print(evalCap("print('hello inception')"))

mk_ultra.css

@@ -0,0 +1,61 @@
+
+.state-TODO{
+    background: #AA0000;
+    color: #000;
+
+}
+
+
+.todo{
+    color:  #931;
+    background: #fcdf03;
+    margin: 2em;
+    padding: 2em;
+
+}
+
+.todo:before{
+    margin: 1em;
+    margin-left: 0em;
+    margin-top: 0em;
+    background-image: url('https://img.icons8.com/material-two-tone/24/000000/task-completed.png');
+    background-repeat: no-repeat;
+
+    padding: 0em;
+    width: 1em;
+    height: 1em;
+    content: "";
+    float:left;
+
+    background-position: center; 
+}
+
+.state{
+    font-family: monospace;
+    font-size: small;
+    float: right;
+    margin-right: 1em;
+    -webkit-box-shadow: 10px 10px 23px 0px rgba(0,0,0,0.38);
+    -moz-box-shadow: 10px 10px 23px 0px rgba(0,0,0,0.38);
+    box-shadow: 10px 10px 23px 0px rgba(0,0,0,0.38);
+}
+
+
+.state-A{
+    background: #660000;
+    color: #FFF;
+
+}
+
+.state-B{
+    background: #bd9140;
+    color: #000;
+
+}
+
+
+.state-C{
+    background: #060;
+    color: #FFF;
+
+}