Improve blog styling.

scripts/gen_centered_graph.py

@@ -4,6 +4,20 @@ import copy
 import tempfile
 import os
 
+def get_emoji_for_node(node):
+    if node['class'] == 'listing':
+        return '🪧 '
+
+    if 'podcast' in node['shallow_tags']:
+        return '🎙️ '
+
+    if 'webradio' in node['shallow_tags']:
+        return '📻 '
+
+    if 'blog' in node['shallow_tags']:
+        return '📰 '
+
+    return ''
 
 @ops_cache.cache
 def gen(headline_id, graph, doc_to_headline_remapping):
@@ -106,7 +120,9 @@ def gen(headline_id, graph, doc_to_headline_remapping):
             f.write('  URL="./{}.node.html"\n'.format(node_id))
             f.write('  class="{}"\n'.format('cluster-depth-' + str(depth - 1)))
             f.write("  fontname=\"{}\"\n".format(font_name))
-            f.write("  label=\"{}\"\n".format(g[node_id]['title'].replace("\"", "'")))
+            f.write("  label=\"{}\"\n".format(
+                get_emoji_for_node(g[node_id]) + g[node_id]['title'].replace("\"", "'")
+            ))
             f.write("\n")
 
             # print("T: {}".format(in_emacs_tree), file=sys.stderr)
@@ -117,7 +133,7 @@ def gen(headline_id, graph, doc_to_headline_remapping):
                     draw_subgraph(k, depth=depth + 1)
                 else:
                     print("  _" + k.replace("-", "_")
-                          + "[label=\"" + v["title"].replace("\"", "'") + "\", "
+                          + "[label=\"" + get_emoji_for_node(v) + v["title"].replace("\"", "'") + "\", "
                           + "URL=\"" + k + ".node.html\", "
                           + "fontname=\"" + font_name + "\", "
                           + "class=\"cluster-depth-" + str(depth) + "\""
@@ -131,7 +147,7 @@ def gen(headline_id, graph, doc_to_headline_remapping):
         for k, v in g.items():
             if k not in in_emacs:
                 print("_" + k.replace("-", "_")
-                      + "[label=\"" + v["title"].replace("\"", "'") + "\", "
+                      + "[label=\"" + get_emoji_for_node(v) + v["title"].replace("\"", "'") + "\", "
                       + "fontname=\"" + font_name + "\", "
                       + "URL=\"" + k + ".node.html\"];", file=f)
 

scripts/generate.py

@@ -273,6 +273,10 @@ def regen_all(src_top, dest_top, subpath, *, docs=None, db=None):
             "title": org_rw.org_rw.token_list_to_plaintext(headline.title.contents).strip(),
             "links": links,
             "depth": headline.depth,
+            "shallow_tags": headline.shallow_tags,
+            "all_tags": headline.tags,
+            "state": headline.state,
+            "class": headline.get_property('CLASS'),
         }
         if headline.id in main_headline_to_docid:
             graph[main_headline_to_docid[headline.id]] = graph[headline.id]
@@ -493,11 +497,11 @@ def render_block(content, acc, _class, is_code):
     acc.append('</pre>')
 
 def unindent(content):
-    base_indentation = min([0] + [
+    base_indentation = min([
         len(l) - len(l.lstrip(' '))
         for l in content.split('\n')
         if len(l.strip()) > 0
-    ])
+    ] or [0])
     content_lines = [
         l[base_indentation:]
         for l in content.split('\n')

static/homepage.html

@@ -108,6 +108,13 @@
                   </ul>
                 </p>
             </section>
+            <section>
+                 <h2>Now</h2>
+                 Stuff I'm fiddling with right now:
+                 <ul>
+                   <li>Checking <a href="https://starboard.gg/">Starboard notebooks</a><a href="https://codigoparallevar.com/notes/4f2cff08-76d3-4cca-8d45-bf4fe3993391.node.html">[notes]</a> and <a href="https://jupyterlite.readthedocs.io/en/latest/">JupyterLite</a><a href="https://codigoparallevar.com/notes/bd0f7d6d-1879-425a-8fc5-a4578fd2853f.node.html">[notes]</a> to write Jupyter-like notebooks that can be run in-browser, from a static file server.</li>
+                 </ul>
+            </section>
             <section>
                 <h2>Talks / Slides</h2>
                 <p>
@@ -126,13 +133,7 @@
                   </ul>
                 </p>
             </section>
-            <!-- section>
+
-                <h2>Projects</h2>
-                <p>
-                  My most stable project is <a href="https://programaker.com">PrograMaker</a>.
-                  Other work-in-progress is in <a href="https://github.com/kenkeiras">GitHub</a>.
-                </p>
-            </section -->
             <section id="social">
                 <h2>Find me</h2>
                 <p>

static/style.css

@@ -195,8 +195,11 @@ img {
 }
 
 .node .node {
-    padding: 1ex 0 1ex 1ex;
+    padding: 1ex 0.25ex 1ex 1ex;
-    border-left: 1px dashed #2c3e50;
+    border-left: 3px solid #5e235e;
+    margin-bottom: 1ex;
+    border-radius: 3px;
+    box-shadow: 0 0 3px 0px rgba(0,0,0,0.3);
 }
 
 .node.collapsed > .contents {
@@ -263,6 +266,11 @@ img {
     border-left: 2px solid var(--tree-color);
 }
 
+.node .contents ul ul ul li,
+.global-table-of-contents ul ul ul li {
+    margin-left: calc(0px + var(--tree-radius) * 2 + .5ex);
+}
+
 .node .contents ul ul li::marker,
 .global-table-of-contents ul ul li::marker {
     content: '';
@@ -401,6 +409,10 @@ a.external::after {
 }
 
 /* Codehilite fix */
+.codehilite {
+  overflow: auto;
+}
+
 .codehilitetable, .codehilitetable tr, .codehilitetable td {
   border: none;
 }
@@ -458,15 +470,27 @@ code, .verbatim {
     overflow-y: auto;
 }
 
-
 .content {
     margin: 1ex;
 }
 
-article.post {
+/* Blog */
-    max-width: min(650px, 100ex);
+.blog {
-    margin: 0 auto;
+    background-color: #ddd;
 }
+
+.post-title {
+    border-bottom: 2px solid #444;
+}
+
+article.post {
+    max-width: min(1000px, 120ex);
+    margin: 0 auto;
+    padding: 1em;
+    background-color: #fff;
+    border-radius: 3px;
+}
+
 /* Header */
 .site-header {
     background-color: #002b36;
@@ -518,12 +542,8 @@ article.post {
 
 /* Post index. */
 .post-index .post-container {
-    /* box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.26); */
-    /* border-radius: 2px; */
-    /* padding: 1ex; */
     margin-bottom: 1em;
     padding-bottom: 1em;
-    border-bottom: #000 2px dashed;
 }
 
 .index-pages {
@@ -643,7 +663,7 @@ tr.__table-separator {
     }
     /* Header */
     .site-header {
-        background-color: #303033;
+        background-color: #47414e;
         border-bottom: rgba(0,0,0,0.1) 1px solid;
     }
     .site-header h1 {
@@ -788,4 +808,14 @@ tr.__table-separator {
     .connections svg path {
         stroke: white;
     }
+
+    /* Blog */
+    .blog {
+        background-color: #111;
+    }
+
+    article.post {
+        background-color: #303030;
+    }
+
 }