diary page uses a grid of grids; added word cloud diary box; emptied all content for now

src/diary/entries/210708

@@ -3,13 +3,13 @@
 july 8, 2021<br>
 #ai #character #combat #design #movement <br>
 <br>
-Househunting has been unexpectedly time-consuming, but I'll share my work in progress towards the attack-movement loop. Hopefully now that an offer was accepted, I'll find more time to iron out the design. <br>
+Househunting has been unexpectedly time-consuming, but I'll share the tentative design for the attack-movement loop. Hopefully now that an offer was accepted, I'll find some time to iron out the design before packing and moving begins. <br>
 <br>
-Currently, I'm working on the attack loop, so that the character maintains attack range while attacking. The flow is complicated to follow, but this is how it works for now: <br>
+The attack-movement loop needs to allow the character maintain attack range while attacking. The flow is complicated to follow, but this is how it works for now: <br>
 <center><a target="_blank" href="/static/img/ent/attack-movement-loop-diagram.png">
     <img src="/static/img/ent/attack-movement-loop-diagram.png" alt="(image: diagram of the attack movement loop)" width="500" height="233">
 </a><br></center>
-The code is color-coded by object.<br>
+The code is color-coded by object. Warm gray is input, orange is the character's action module, yellow is the character, yellow-green is the character's equipment module, blue-green is the attack handler, blue is the AI's attack module, purple is the AI's movement module, pink is the AI, brown is the KnowledgeBase's MessageBus, and cool gray is the character's kinematic body.  <br>
 <br>
 <h2>the loop explained </h2><br>
 Upon attack input, the character sets up for attacking and creates an attack timer. On timeout, the character's weapon swings. If the character is out of range, the "out_of_range" signal is emitted. Otherwise, the weapon successfully swings, either emitting "target_dead" or "hit." <br>
@@ -28,6 +28,8 @@ Then the AI receives the "arrived_at_attack_target" signal and prompts the chara
 <br>
 <h2>in-game </h2><br>
 It works in-game, too, but it's pretty janky, especially without animations. If the slime is slow enough, the player character attacks until it gets too far away, moves back in range, and continues attacking. If it's too fast, though, she never gets to attack and jitters constantly after the slime. <br>
+<br>
+Too fast: <br>
 <center><img src="/static/img/ent/attack-follow.gif" alt="(image: Angel follows slime)"></center>
 <br>
 I'll work it out sooner or later, dependent on how hectic moving turns out to be. <br>

src/index.py

@@ -210,14 +210,12 @@ def list_snippets(articles):
 
 # Return list of files with given tag
 def pull_tag(files, tag):
-    print(files)
-    print(tag)
     pull = []
     for f in files:
         tags = find_tags(article2list(str(f), 'diary/entries/'))
         if "#" + tag in tags:
             pull.append(f)
-    pull.sort()
+    pull.sort(reverse=True)
     return pull
 
 # Return line count of file
@@ -325,6 +323,23 @@ def fill_box(new_file):
     box.sort()
     return box
 
+# return list of diary entry tags, sorted by frequency
+def fill_word_cloud(files):
+    tags = []
+    for f in files:
+        temp = find_tags(article2list(str(f), 'diary/entries/'))
+        for t in temp:
+            tags.append(t)
+    tags.sort()
+    cloud = []
+    i = 0
+    while i < 9:
+        top = max(set(tags), key = tags.count)
+        cloud.append(top)
+        tags[:] = [x for x in tags if x != top]
+        i += 1
+    return cloud
+
 def find_year():
     now = datetime.datetime.now()
     return now.strftime('%Y')
@@ -389,6 +404,10 @@ def presskit():
 @route('/diary')
 def diary2():
     return diary(0)
+# Slash is optional
+@route('/diary/')
+def diary3():
+    return diary(0)
 
 # Diary Page - Diary Template - list all articles
 @route('/diary/<page:int>')
@@ -396,7 +415,7 @@ def diary(page):
     """diary page"""
     loc = 'diary/entries/'
     assert isinstance(page, int)
-    info = {'css': 'diary', 'title': 'blessfrey - developer diary', 'year': find_year(), 'snippets': list_snippets(gather_and_sort(loc)), 'latest': list_headlines(gather_and_sort(loc)[0:5]), 'total': len(curate_files(gather_files(loc))), 'limit': 8, 'cluster': 3, 'page': page}
+    info = {'css': 'diary', 'title': 'blessfrey - developer diary', 'year': find_year(), 'snippets': list_snippets(gather_and_sort(loc)), 'latest': list_headlines(gather_and_sort(loc)[0:5]), 'word_cloud': fill_word_cloud(curate_files(gather_files(loc))), 'total': len(curate_files(gather_files(loc))), 'limit': 8, 'cluster': 3, 'page': page}
     return template('diary.tpl', info)
 
 # Entry Page - Feature Template - for articles
@@ -435,7 +454,6 @@ def tag(tagin, page):
     loc = 'diary/entries/'
     assert isinstance(tagin, str)
     assert isinstance(page, int)
-    print(tagin)
     info = {'css': 'diary', 'title': 'blessfrey - developer diary', 'year': find_year(), 'snippets': list_snippets(pull_tag(gather_and_sort(loc), tagin)), 'latest': list_headlines(gather_and_sort(loc)[0:5]), 'total': len(curate_files(gather_files(loc))), 'limit': 8, 'cluster': 3, 'page': page}
     return template('diary.tpl', info)
 

src/static/css/diary.css

@@ -12,14 +12,14 @@ ul { list-style-position: inside; }
 
 .grid {
     display: grid;
-    grid-template-columns: auto 533px 267px auto;
+    grid-template-columns: auto 800px auto;
-    grid-template-rows: 25px 90px 40px auto 40px auto; 
+    grid-template-rows: 25px 90px auto;
     grid-column-gap: 0px;
     grid-row-gap: 0px;
 }
 
 .whitespace {
-    grid-area: 1 / 1 / 2 / 5;
+    grid-area: 1 / 1 / 2 / 4;
     display: flex;
     flex-direction:column;
     justify-content:center;
@@ -28,7 +28,7 @@ ul { list-style-position: inside; }
 }
 
 .blessfrey-logo { 
-    grid-area: 1 / 2 / 2 / 4;
+    grid-area: 1 / 2 / 2 / 3;
     padding-top: 5px;
     color: #FBDAEC;
 }
@@ -36,12 +36,12 @@ ul { list-style-position: inside; }
 /* navigation pane */
 
 .nav-row {
-    grid-area: 2 / 1 / 3 / 5;
+    grid-area: 2 / 1 / 3 / 4;
     background-color: #900C3F;
 }
 
 .nav-grid { 
-    grid-area: 2 / 2 / 3 / 4; 
+    grid-area: 2 / 2 / 3 / 3; 
     display: flex;
     flex-direction:column;
     justify-content:flex-end;
@@ -116,8 +116,22 @@ ul { list-style-position: inside; }
 
 /* Body */
 
+.body-row {
+    grid-area: 3 / 1 / 4 / 4;
+    background-color: #080410;
+}
+
+.content {
+    grid-area: 3 / 2 / 4 / 3;
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    grid-template-rows: 40px auto 40px;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+}
+
 .dir-row {
-    grid-area: 3 / 2 / 4 / 4;
+    grid-area: 1 / 1 / 2 / 3;
     background-color: #080410;
     color: #F9B3D7;
 }
@@ -153,7 +167,7 @@ ul { list-style-position: inside; }
         -1px  0   1px #080410;
 }
 .diary-dir.top {
-    grid-area: 3 / 1 / 4 / 5;
+    grid-area: 1 / 1 / 2 / 3;
     padding-top: 3px;
 }
 .diary-dir-left {
@@ -178,13 +192,8 @@ ul { list-style-position: inside; }
     vertical-align: middle;
 }
 
-.body-row {
-    grid-area: 4 / 1 / 5 / 5;
-    background-color: #080410;
-}
-
 .diary-pages {
-    grid-area: 4 / 2 / 5 / 3;
+    grid-area: 2 / 1 / 3 / 2;
 }
 
 .snippet {
@@ -277,7 +286,7 @@ ul { list-style-position: inside; }
 }
 
 .sidebar {
-    grid-area: 4 / 3 / 5 / 4; 
+    grid-area: 2 / 2 / 3 / 3; 
     display: grid;
     grid-template-columns: auto;
     grid-template-rows: repeat(4, auto);
@@ -299,7 +308,7 @@ ul { list-style-position: inside; }
     color: #945634;
 }
 .about-box {
-    grid-area: 4 / 3 / 5 / 4;
+    grid-area: 1 / 1 / 2 / 2;
     border-radius: 25px;
     background-color: #95939F; 
     color: #111718;
@@ -310,7 +319,7 @@ ul { list-style-position: inside; }
     padding-bottom: 15px;
 }
 .twitter-box {
-    grid-area: 5 / 3 / 6 / 4;
+    grid-area: 2 / 1 / 3 / 2;
     border-radius: 25px;
     background-color: #95939F; 
     color: #111718;
@@ -320,7 +329,7 @@ ul { list-style-position: inside; }
     padding-bottom: 15px;
 }
 .latest {
-    grid-area: 6 / 3 / 7 / 4;
+    grid-area: 3 / 1 / 4 / 2;
     border-radius: 25px;
     background-color: #95939F; 
     color: #111718;
@@ -334,8 +343,18 @@ ul { list-style-position: inside; }
     list-style-position: inside;
     padding: 5px;
 }
+.wordcloud {
+    grid-area: 4 / 1 / 5 / 2;
+    border-radius: 25px;
+    background-color: #95939F; 
+    color: #111718;
+    text-align: center;
+    margin: 15px;
+    padding: 5px;
+    padding-bottom: 15px;
+}
 .disclosure {
-    grid-area: 7 / 3 / 8 / 4;
+    grid-area: 5 / 1 / 6 / 2;
     border-radius: 25px;
     background-color: #95939F; 
     color: #111718;
@@ -346,12 +365,7 @@ ul { list-style-position: inside; }
 }
 
 .diary-dir.bottom {
-    grid-area: 5 / 1 / 6 / 5; 
+    grid-area: 3 / 1 / 4 / 3; 
-}
-
-.footer-row {
-    grid-area: 6 / 1 / 7 / 5;
-    background-color: #080410;
 }
 
 .footer-content {

src/static/css/diary_original.css

@@ -0,0 +1,375 @@
+* {
+    padding:0;
+    margin:0;
+    font-family: "Ubuntu", "Open Sans", "Calibri", "Arial", sans-serif;
+}
+
+a {
+    text-decoration: none;
+}
+
+ul { list-style-position: inside; }
+
+.grid {
+    display: grid;
+    grid-template-columns: auto 533px 267px auto;
+    grid-template-rows: 25px 90px 40px auto 40px auto; 
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+}
+
+.whitespace {
+    grid-area: 1 / 1 / 2 / 5;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+    background-color: #900C3F;
+}
+
+.blessfrey-logo { 
+    grid-area: 1 / 2 / 2 / 4;
+    padding-top: 5px;
+    color: #FBDAEC;
+}
+
+/* navigation pane */
+
+.nav-row {
+    grid-area: 2 / 1 / 3 / 5;
+    background-color: #900C3F;
+}
+
+.nav-grid { 
+    grid-area: 2 / 2 / 3 / 4; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    display: grid;
+    grid-template-columns: auto repeat(4, 70px) auto;
+    grid-template-rows: 90px;
+    grid-column-gap: 17px;
+    grid-row-gap: 0px; 
+    align-items: end;
+    justify-items: center;
+}
+.nav-bar {
+    grid-area: 1 / 1 / 2 / 7;
+    background-image: url(../img/ele/navbar.png);
+    height: 86px;
+    width: 800px;
+} 
+.nav-index { 
+    grid-area: 1 / 2 / 2 / 3; 
+    padding-bottom: 3px;
+    position: relative;
+}
+.nav-game { 
+    grid-area: 1 / 3 / 2 / 4;
+    padding-bottom: 3px;
+    position: relative;
+}
+.nav-diary { 
+    grid-area: 1 / 4 / 2 / 5; 
+    padding-bottom: 3px;
+    position: relative;
+}
+.nav-presskit { 
+    grid-area: 1 / 5 / 2 / 6; 
+    padding-bottom: 3px;
+    position: relative;
+}
+.nav-link {
+    position: absolute;
+    top: 45%;
+    left: 50%;
+    transform: translate(-50%, -50%)
+}
+.nav-link a {
+    font-size: 21px;
+    color: #E6E8EF;
+    font-weight: bold;
+    text-shadow:
+        -1px -1px 1px black,
+        0   -1px 1px black,
+        2px -1px 1px black,
+        2px  0   1px black,
+        2px  2px 1px black,
+        0    2px 1px black,
+        -1px  2px 1px black,
+        -1px  0   1px black;
+}
+.nav-link a:hover {
+    font-size: 21px;
+    color: #ecd5d2;
+    font-weight: bold;
+    text-shadow:
+        -1px -1px 1px black,
+        0   -1px 1px black,
+        2px -1px 1px black,
+        2px  0   1px black,
+        2px  2px 1px black,
+        0    2px 1px black,
+        -1px  2px 1px black,
+        -1px  0   1px black;
+}
+
+/* Body */
+
+.dir-row {
+    grid-area: 3 / 2 / 4 / 4;
+    background-color: #080410;
+    color: #F9B3D7;
+}
+
+.diary-dir {
+    background-color: #080410;
+    font-size: 23px;
+    padding: 0px;
+    margin: 0px;
+    color: #AAA39D;
+    font-weight: bold;
+    text-shadow:
+        -1px -1px 1px #080410,
+        0   -1px 1px #080410,
+        2px -1px 1px #080410,
+        2px  0   1px #080410,
+        2px  2px 1px #080410,
+        0    2px 1px #080410,
+        -1px  2px 1px #080410,
+        -1px  0   1px #080410;
+}
+.diary-dir a {
+    color: #E6E8EF;
+    font-weight: bold;
+    text-shadow:
+        -1px -1px 1px #080410,
+        0   -1px 1px #080410,
+        2px -1px 1px #080410,
+        2px  0   1px #080410,
+        2px  2px 1px #080410,
+        0    2px 1px #080410,
+        -1px  2px 1px #080410,
+        -1px  0   1px #080410;
+}
+.diary-dir.top {
+    grid-area: 3 / 1 / 4 / 5;
+    padding-top: 3px;
+}
+.diary-dir-left {
+    display: inline-block;
+    vertical-align: middle;
+}
+.diary-dir-numbers {
+    height: 29px;
+    display: inline-block;
+    white-space: nowrap;
+}
+.diary-dir-number {
+    background-color: #404664;
+    display: inline-block;
+    white-space: nowrap;
+    border-radius: 25px;
+    padding-left: 4px;
+    padding-right: 4px;
+}
+.diary-dir-right {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.body-row {
+    grid-area: 4 / 1 / 5 / 5;
+    background-color: #080410;
+}
+
+.diary-pages {
+    grid-area: 4 / 2 / 5 / 3;
+}
+
+.snippet {
+    margin-top: 0px;
+    margin-bottom: 50px;
+}
+
+.snippet-title {
+    background-image: url(../img/ele/diaryheader.png);
+    background-size: 100%;
+    height: 40px;
+    padding: 10px;
+    font-size: 10px;
+}
+.snippet-title a {
+    color: #E3E0DE;
+    font-weight: bold;
+    text-shadow:
+        -1px -1px 1px #324832,
+        0   -1px 1px #324832,
+        2px -1px 1px #324832,
+        2px  0   1px #324832,
+        2px  2px 1px #324832,
+        0    2px 1px #324832,
+        -1px  2px 1px #324832,
+        -1px  0   1px #324832;
+}
+.snippet-title a:hover {
+    color: #ecd5d2;
+    font-weight: bold;
+    text-shadow:
+        -1px -1px 1px #324832,
+        0   -1px 1px #324832,
+        2px -1px 1px #324832,
+        2px  0   1px #324832,
+        2px  2px 1px #324832,
+        0    2px 1px #324832,
+        -1px  2px 1px #324832,
+        -1px  0   1px #324832;
+}
+.snippet-content {
+    background-color: #ecd5d2;
+    color: #080410;
+    padding: 10px;
+    font-size: 15px;
+}
+.date-line {
+    background-color: #ecd5d2;
+    color: #080410;
+    padding: 5px;
+    padding-left: 15px;
+    font-size: 15px;
+    text-align: left;
+}
+.snippet-tags {
+    background-color: #ecd5d2;
+    padding: 10px;
+    font-size: 15px;
+}
+.snippet-tag {
+    background-color: #b9b4af;
+    border-radius: 25px;
+    padding: 3px;
+    padding-left: 4px;
+    padding-right: 4px;
+    color: black;
+    font-size: 15px;
+    font-weight: bold;
+    display: inline-block;
+}
+.social-line {
+    background-color: #404664;
+    padding-top: 5px;
+    padding-left: 15px;
+    
+}
+.social-line a {
+    color: #E3E0DE;
+    font-weight: bold;
+}
+.snippet-link {
+    margin-top: -35px;
+    float: right;
+    font-size: 15px;
+}
+.snippet-bottom {
+    background-image: url(../img/ele/diarybottom.png);
+    background-size: 100%;
+    height: 25px;
+}
+
+.sidebar {
+    grid-area: 4 / 3 / 5 / 4; 
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: repeat(5, auto);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+    align-content: start;
+    padding-left: 7px;
+}
+.sidebar a:link {
+    color: #213021;
+}
+.sidebar a:hover {
+    color: #486438;
+}
+.sidebar a:visited {
+    color: #213021;
+}
+.sidebar a:active {
+    color: #945634;
+}
+.about-box {
+    grid-area: 1 / 1 / 2 / 2;
+    border-radius: 25px;
+    background-color: #95939F; 
+    color: #111718;
+    text-align: center;
+    margin: 15px;
+    padding: 5px;
+    margin-top: 0px;
+    padding-bottom: 15px;
+}
+.twitter-box {
+    grid-area: 2 / 1 / 3 / 2;
+    border-radius: 25px;
+    background-color: #95939F; 
+    color: #111718;
+    text-align: center;
+    margin: 15px;
+    padding: 5px;
+    padding-bottom: 15px;
+}
+.latest {
+    grid-area: 3 / 1 / 4 / 2;
+    border-radius: 25px;
+    background-color: #95939F; 
+    color: #111718;
+    text-align: center;
+    list-style-position: inside;
+    margin: 15px;
+    padding: 5px;
+}
+.latest-text {
+    text-align: left;
+    list-style-position: inside;
+    padding: 5px;
+}
+.wordcloud {
+    grid-area: 4 / 1 / 5 / 2;
+    border-radius: 25px;
+    background-color: #95939F; 
+    color: #111718;
+    text-align: center;
+    margin: 15px;
+    padding: 5px;
+    padding-bottom: 15px;
+}
+.disclosure {
+    grid-area: 5 / 1 / 6 / 2;
+    border-radius: 25px;
+    background-color: #95939F; 
+    color: #111718;
+    text-align: center;
+    margin: 15px;
+    padding: 5px;
+    padding-bottom: 15px;
+}
+
+.diary-dir.bottom {
+    grid-area: 5 / 1 / 6 / 5; 
+}
+
+.footer-row {
+    grid-area: 6 / 1 / 7 / 5;
+    background-color: #080410;
+}
+
+.footer-content {
+    background-color: #080410;
+    color: #ecd5d2;
+    padding-top: 5px;
+    padding-right: 25px;
+    box-shadow: 0 100vh 0 100vh #581845;
+    text-align: right;
+    overflow: hidden;
+}

src/static/xml/blessfrey.xml

@@ -9,7 +9,7 @@
 <item>
 <title>how to attack a moving target </title>
 <link>https://www.blessfrey.me/diary/entries/210708</link>
-<description>Househunting has been unexpectedly time-consuming, but I'll share my work in progress towards the ... </description>
+<description>Househunting has been unexpectedly time-consuming, but I'll share the tentative design for the ... </description>
 <pubDate>Thu, 08 Jul 2021 05:00:05 GMT</pubDate>
 <guid>https://www.blessfrey.me/diary/entries/210708</guid>
 </item>

src/views/diary-boxes.tpl

@@ -2,39 +2,24 @@
         <div class="sidebar">
             <div class="about-box">
                 <h1>about</h1>
-            <b>Blessfrey</b> is a 2D action RPG developed for PC in Godot Engine. <br>
-<br>
-Edit your skillbar from hundreds of skills to fight enemies, solve puzzles, + explore. <br>
-<br>
-Inspired by Guild Wars 1 and Magic: The Gathering. <br>
             </div>
     
             <div class="twitter-box">
                 <h1>chat</h1>
-            Twitter: <a href="https://twitter.com/lilchimchooree">@lilchimchooree</a><br>
-            <br>
-            <a href="/contact"  rel="nofollow">contact me</a><br>
             </div>
 
             <div class="latest">
                 <h1>latest</h1>
                 <div class="latest-text">
-                <ul>
+                    latest
-                % if len(latest) > 0:
-                    % print(str(len(latest)))
-                        % for l in latest:
-                            <li>&#9;<a href=/{{l[0]}}  rel="nofollow">{{!l[1]}}</a></li>
-                % end
-                </ul>
-                <br>
                 </div>
             </div>
 
+            <div class="wordcloud">
+                <h1>tags</h1>
+            </div>
+
             <div class="disclosure">
-            Blessfrey.me is not using sponsored posts or affiliate links. <br> 
+                disclosure
-            <br>
-            Blessfrey.me is not collecting personal information + has no cookies. <br>
-            <br>
-            Thank you for following the development of Blessfrey. <br>    
             </div>
         </div>

src/views/diary-boxes_original.tpl

@@ -0,0 +1,45 @@
+<!--right column-->
+    <div class="sidebar">
+        <div class="about-box">
+            <h1>about</h1>
+            <b>Blessfrey</b> is a 2D action RPG developed for PC in Godot Engine. <br>
+<br>
+Edit your skillbar from hundreds of skills to fight enemies, solve puzzles, + explore. <br>
+<br>
+Inspired by Guild Wars 1 and Magic: The Gathering. <br>
+        </div>
+
+        <div class="twitter-box">
+            <h1>chat</h1>
+            Twitter: <a href="https://twitter.com/lilchimchooree">@lilchimchooree</a><br>
+            <br>
+            <a href="/contact"  rel="nofollow">contact me</a><br>
+        </div>
+
+        <div class="latest">
+            <h1>latest</h1>
+            <div class="latest-text">
+                <ul>
+                % if len(latest) > 0:
+                    % print(str(len(latest)))
+                        % for l in latest:
+                            <li>&#9;<a href=/{{l[0]}}  rel="nofollow">{{!l[1]}}</a></li>
+                % end
+                </ul>
+                <br>
+            </div>
+        </div>
+
+        <div class="wordcloud">
+            <h1>tags</h1>
+                <br>
+        </div>
+
+        <div class="disclosure">
+            Blessfrey.me is not using sponsored posts or affiliate links. <br> 
+            <br>
+            Blessfrey.me is not collecting personal information + has no cookies. <br>
+            <br>
+            Thank you for following the development of Blessfrey. <br>    
+        </div>
+    </div>

src/views/diary-original.tpl

@@ -0,0 +1,232 @@
+% rebase('frame.tpl')
+% import re
+    <div class="dir-row"> </div>
+    <div class="diary-dir top">
+    <center>
+        % max_pages = int((total - 1) / limit)
+<%
+        # page never below 0
+        if page <= 0:
+            page = 0
+        end
+        # page never over maximum
+        if page > max_pages:
+            page = max_pages
+        end 
+%>
+        <div class="diary-dir-left">
+        % # << is always active link pointing to 0
+        % #<a href=/diary/0 rel="nofollow">&lt;&lt;</a>
+        <a href=/diary/0>
+            <img src="/static/img/btn/nav_ll.png" alt="&lt;&lt;" width="33" height="29">
+        </a>
+
+        % # < points to 0 if page 0 or below
+        % if page <= 0:
+            % #<a href=/diary/0 rel="nofollow">&lt;</a>
+            <a href=/diary/0>
+                <img src="/static/img/btn/nav_l.png" alt="&lt;" width="27" height="29">
+            </a>
+        % # < points to previous page otherwise
+        % else:
+            % #<a href=/diary/{{page - 1}} rel="nofollow">&lt;</a>
+            <a href=/diary/{{page - 1}}>
+                <img src="/static/img/btn/nav_l.png" alt="&lt;" width="27" height="29">
+            </a>
+        % end
+
+        </div>
+        <div class="diary-dir-numbers">
+
+        % # fill out number cluster to the left when page is high
+        % if max_pages > cluster and page > max_pages - cluster:
+            % for j in range(cluster - max_pages + page):
+                <div class="diary-dir-number">
+                    <a href=/diary/{{max_pages - cluster * 2 + j}} rel="nofollow">{{max_pages - cluster * 2 + j}}</a>
+                </div>
+            % end
+        % end
+
+        % # form cluster of number links around page
+        % for i in range(max(0,page - cluster), min(max_pages + 1,page + cluster + 1)):
+            % # bold current page number
+            % if i == page:
+                <div class="diary-dir-number">
+                    <b>{{i}}</b>
+                </div>
+            % # form neighboring numbers into links
+            % else:
+                <div class="diary-dir-number">
+                    <a href=/diary/{{i}} rel="nofollow">{{i}}</a>
+                </div>
+            % end
+        % end
+
+        % # fill out number cluster to the right when page is low
+        % if page <= cluster - 1 and max_pages > page + cluster:
+            % for j in range(cluster - page):
+                <div class="diary-dir-number">
+                    <a href=/diary/{{page + j + cluster + 1}} rel="nofollow">{{page + j + cluster + 1}}</a>
+                </div>
+            % end
+        % end
+
+        </div>
+        <div class="diary-dir-right">
+
+        % # > points to max if page is at or above maximum
+        % if page >= max_pages:
+            % #<a href=/diary/{{max_pages}} rel="nofollow">&gt;</a>
+            <a href=/diary/{{max_pages}}>
+                <img src="/static/img/btn/nav_r.png" alt="&gt;" width="27" height="29">
+            </a>
+        % # > point to next page otherwise
+        % else:
+            % #<a href=/diary/{{page + 1}} rel="nofollow">&gt;</a>
+            <a href=/diary/{{page + 1}}>
+                <img src="/static/img/btn/nav_r.png" alt="&gt;" width="27" height="29">
+            </a>
+        % end
+
+        % # >> is always active link to maximum page
+        % #<a href=/diary/{{max_pages}} rel="nofollow">&gt;&gt;</a>
+        <a href=/diary/{{max_pages}}>
+            <img src="/static/img/btn/nav_rr.png" alt="&gt;&gt;" width="33" height="29">
+        </a>
+        </div>
+    </center>
+    </div>
+
+<!--left column-->
+
+    <div class="diary-pages">
+        % for s in snippets[page * limit:page * limit + limit]:
+            <div class="snippet">
+                <div class="snippet-title">
+                    <a href={{s[3]}} rel="nofollow"><h1>{{!s[0]}}</h1></a>
+                </div>
+                <div class="date-line">
+                    <b>chimchooree</b>
+                    • <b>{{!s[2]}}</b>
+                </div>
+                <div class="snippet-content">
+                    {{!s[1]}}
+                </div>
+                % if len(s[5]) >= 1:
+                    <div class=snippet-tags>
+                        % for j in s[5]:
+                        <div class="snippet-tag">
+                            {{j}}
+                        </div>
+                        % end
+                    </div>
+                    % end
+                <div class="social-line">
+                    <a class="social-link social-twitter" href='http://twitter.com/share?text={{s[4]}}&url=https://blessfrey.me{{s[3]}}&via=lilchimchooree' target="_blank">tweet</a> 
+                </div>
+                <div class="snippet-link">
+                    <a href={{s[3]}}>
+                        <img src="/static/img/btn/diaryreadmore.png" alt="read more" width="99" height="84">
+                    </a>
+                </div>
+                <div class="snippet-bottom">
+                </div>
+            </div>
+        % end
+    </div>
+    <div class="diary-dir bottom">
+    <center>
+        % max_pages = int((total - 1) / limit)
+<%
+        # page never below 0
+        if page <= 0:
+            page = 0
+        end
+        # page never over maximum
+        if page > max_pages:
+            page = max_pages
+        end 
+%>
+        <div class="diary-dir-left">
+        % # << is always active link pointing to 0
+        % #<a href=/diary/0 rel="nofollow">&lt;&lt;</a>
+        <a href=/diary/0>
+            <img src="/static/img/btn/nav_ll.png" alt="&lt;&lt;" width="33" height="29">
+        </a>
+
+        % # < points to 0 if page 0 or below
+        % if page <= 0:
+            % #<a href=/diary/0 rel="nofollow">&lt;</a>
+            <a href=/diary/0>
+                <img src="/static/img/btn/nav_l.png" alt="&lt;" width="27" height="29">
+            </a>
+        % # < points to previous page otherwise
+        % else:
+            % #<a href=/diary/{{page - 1}} rel="nofollow">&lt;</a>
+            <a href=/diary/{{page - 1}}>
+                <img src="/static/img/btn/nav_l.png" alt="&lt;" width="27" height="29">
+            </a>
+        % end
+
+        </div>
+        <div class="diary-dir-numbers">
+
+        % # fill out number cluster to the left when page is high
+        % if max_pages > cluster and page > max_pages - cluster:
+            % for j in range(cluster - max_pages + page):
+                <div class="diary-dir-number">
+                    <a href=/diary/{{max_pages - cluster * 2 + j}} rel="nofollow">{{max_pages - cluster * 2 + j}}</a>
+                </div>
+            % end
+        % end
+
+        % # form cluster of number links around page
+        % for i in range(max(0,page - cluster), min(max_pages + 1,page + cluster + 1)):
+            % # bold current page number
+            % if i == page:
+                <div class="diary-dir-number">
+                    <b>{{i}}</b>
+                </div>
+            % # form neighboring numbers into links
+            % else:
+                <div class="diary-dir-number">
+                    <a href=/diary/{{i}} rel="nofollow">{{i}}</a>
+                </div>
+            % end
+        % end
+
+        % # fill out number cluster to the right when page is low
+        % if page <= cluster - 1 and max_pages > page + cluster:
+            % for j in range(cluster - page):
+                <div class="diary-dir-number">
+                    <a href=/diary/{{page + j + cluster + 1}} rel="nofollow">{{page + j + cluster + 1}}</a>
+                </div>
+            % end
+        % end
+
+        </div>
+        <div class="diary-dir-right">
+
+        % # > points to max if page is at or above maximum
+        % if page >= max_pages:
+            % #<a href=/diary/{{max_pages}} rel="nofollow">&gt;</a>
+            <a href=/diary/{{max_pages}}>
+                <img src="/static/img/btn/nav_r.png" alt="&gt;" width="27" height="29">
+            </a>
+        % # > point to next page otherwise
+        % else:
+            % #<a href=/diary/{{page + 1}} rel="nofollow">&gt;</a>
+            <a href=/diary/{{page + 1}}>
+                <img src="/static/img/btn/nav_r.png" alt="&gt;" width="27" height="29">
+            </a>
+        % end
+
+        % # >> is always active link to maximum page
+        % #<a href=/diary/{{max_pages}} rel="nofollow">&gt;&gt;</a>
+        <a href=/diary/{{max_pages}}>
+            <img src="/static/img/btn/nav_rr.png" alt="&gt;&gt;" width="33" height="29">
+        </a>
+        </div>
+    </center>
+    </div>
+% include diary-boxes.tpl

src/views/diary.tpl

@@ -1,234 +1,13 @@
 % rebase('frame.tpl')
-% import re
+    <div class="content">
-    <div class="dir-row"> </div>
         <div class="diary-dir top">
-    <center>
+            &lt;&lt;
-        % max_pages = int((total - 1) / limit)
-<%
-        # page never below 0
-        if page <= 0:
-            page = 0
-        end
-        # page never over maximum
-        if page > max_pages:
-            page = max_pages
-        end 
-%>
-        <div class="diary-dir-left">
-        % # << is always active link pointing to 0
-        % #<a href=/diary/0 rel="nofollow">&lt;&lt;</a>
-        <a href=/diary/0>
-            <img src="/static/img/btn/nav_ll.png" alt="&lt;&lt;" width="33" height="29">
-        </a>
-
-        % # < points to 0 if page 0 or below
-        % if page <= 0:
-            % #<a href=/diary/0 rel="nofollow">&lt;</a>
-            <a href=/diary/0>
-                <img src="/static/img/btn/nav_l.png" alt="&lt;" width="27" height="29">
-            </a>
-        % # < points to previous page otherwise
-        % else:
-            % #<a href=/diary/{{page - 1}} rel="nofollow">&lt;</a>
-            <a href=/diary/{{page - 1}}>
-                <img src="/static/img/btn/nav_l.png" alt="&lt;" width="27" height="29">
-            </a>
-        % end
-
         </div>
-        <div class="diary-dir-numbers">
-
-        % # fill out number cluster to the left when page is high
-        % if max_pages > cluster and page > max_pages - cluster:
-            % for j in range(cluster - max_pages + page):
-                <div class="diary-dir-number">
-                    <a href=/diary/{{max_pages - cluster * 2 + j}} rel="nofollow">{{max_pages - cluster * 2 + j}}</a>
-                </div>
-            % end
-        % end
-
-        % # form cluster of number links around page
-        % for i in range(max(0,page - cluster), min(max_pages + 1,page + cluster + 1)):
-            % # bold current page number
-            % if i == page:
-                <div class="diary-dir-number">
-                    <b>{{i}}</b>
-                </div>
-            % # form neighboring numbers into links
-            % else:
-                <div class="diary-dir-number">
-                    <a href=/diary/{{i}} rel="nofollow">{{i}}</a>
-                </div>
-            % end
-        % end
-
-        % # fill out number cluster to the right when page is low
-        % if page <= cluster - 1 and max_pages > page + cluster:
-            % for j in range(cluster - page):
-                <div class="diary-dir-number">
-                    <a href=/diary/{{page + j + cluster + 1}} rel="nofollow">{{page + j + cluster + 1}}</a>
-                </div>
-            % end
-        % end
-
-        </div>
-        <div class="diary-dir-right">
-
-        % # > points to max if page is at or above maximum
-        % if page >= max_pages:
-            % #<a href=/diary/{{max_pages}} rel="nofollow">&gt;</a>
-            <a href=/diary/{{max_pages}}>
-                <img src="/static/img/btn/nav_r.png" alt="&gt;" width="27" height="29">
-            </a>
-        % # > point to next page otherwise
-        % else:
-            % #<a href=/diary/{{page + 1}} rel="nofollow">&gt;</a>
-            <a href=/diary/{{page + 1}}>
-                <img src="/static/img/btn/nav_r.png" alt="&gt;" width="27" height="29">
-            </a>
-        % end
-
-        % # >> is always active link to maximum page
-        % #<a href=/diary/{{max_pages}} rel="nofollow">&gt;&gt;</a>
-        <a href=/diary/{{max_pages}}>
-            <img src="/static/img/btn/nav_rr.png" alt="&gt;&gt;" width="33" height="29">
-        </a>
-        </div>
-    </center>
-    </div>
-
-<!--left column-->
-
         <div class="diary-pages">
-        % for s in snippets[page * limit:page * limit + limit]:
+            Snippet
-            <div class="snippet">
-                <div class="snippet-title">
-                    <a href={{s[3]}} rel="nofollow"><h1>{{!s[0]}}</h1></a>
-                </div>
-                <div class="date-line">
-                    <b>chimchooree</b>
-                    • <b>{{!s[2]}}</b>
-                </div>
-                <div class="snippet-content">
-                    {{!s[1]}}
-                </div>
-                % if len(s[5]) >= 1:
-                    <div class=snippet-tags>
-                        % for j in s[5]:
-                        <div class="snippet-tag">
-                            % tagless = j.replace('#', '')
-                            % print(j)
-                            <a href=/diary/tag/{{tagless}}>{{j}}</a>
-                        </div>
-                        % end
-                    </div>
-                    % end
-                <div class="social-line">
-                    <a class="social-link social-twitter" href='http://twitter.com/share?text={{s[4]}}&url=https://blessfrey.me{{s[3]}}&via=lilchimchooree' target="_blank">tweet</a> 
-                </div>
-                <div class="snippet-link">
-                    <a href={{s[3]}}>
-                        <img src="/static/img/btn/diaryreadmore.png" alt="read more" width="99" height="84">
-                    </a>
-                </div>
-                <div class="snippet-bottom">
-                </div>
-            </div>
-        % end
         </div>
+% include diary-boxes.tpl
         <div class="diary-dir bottom">
-    <center>
+            &gt;&gt;
-        % max_pages = int((total - 1) / limit)
-<%
-        # page never below 0
-        if page <= 0:
-            page = 0
-        end
-        # page never over maximum
-        if page > max_pages:
-            page = max_pages
-        end 
-%>
-        <div class="diary-dir-left">
-        % # << is always active link pointing to 0
-        % #<a href=/diary/0 rel="nofollow">&lt;&lt;</a>
-        <a href=/diary/0>
-            <img src="/static/img/btn/nav_ll.png" alt="&lt;&lt;" width="33" height="29">
-        </a>
-
-        % # < points to 0 if page 0 or below
-        % if page <= 0:
-            % #<a href=/diary/0 rel="nofollow">&lt;</a>
-            <a href=/diary/0>
-                <img src="/static/img/btn/nav_l.png" alt="&lt;" width="27" height="29">
-            </a>
-        % # < points to previous page otherwise
-        % else:
-            % #<a href=/diary/{{page - 1}} rel="nofollow">&lt;</a>
-            <a href=/diary/{{page - 1}}>
-                <img src="/static/img/btn/nav_l.png" alt="&lt;" width="27" height="29">
-            </a>
-        % end
-
-        </div>
-        <div class="diary-dir-numbers">
-
-        % # fill out number cluster to the left when page is high
-        % if max_pages > cluster and page > max_pages - cluster:
-            % for j in range(cluster - max_pages + page):
-                <div class="diary-dir-number">
-                    <a href=/diary/{{max_pages - cluster * 2 + j}} rel="nofollow">{{max_pages - cluster * 2 + j}}</a>
         </div>
-            % end
-        % end
-
-        % # form cluster of number links around page
-        % for i in range(max(0,page - cluster), min(max_pages + 1,page + cluster + 1)):
-            % # bold current page number
-            % if i == page:
-                <div class="diary-dir-number">
-                    <b>{{i}}</b>
     </div>
-            % # form neighboring numbers into links
-            % else:
-                <div class="diary-dir-number">
-                    <a href=/diary/{{i}} rel="nofollow">{{i}}</a>
-                </div>
-            % end
-        % end
-
-        % # fill out number cluster to the right when page is low
-        % if page <= cluster - 1 and max_pages > page + cluster:
-            % for j in range(cluster - page):
-                <div class="diary-dir-number">
-                    <a href=/diary/{{page + j + cluster + 1}} rel="nofollow">{{page + j + cluster + 1}}</a>
-                </div>
-            % end
-        % end
-
-        </div>
-        <div class="diary-dir-right">
-
-        % # > points to max if page is at or above maximum
-        % if page >= max_pages:
-            % #<a href=/diary/{{max_pages}} rel="nofollow">&gt;</a>
-            <a href=/diary/{{max_pages}}>
-                <img src="/static/img/btn/nav_r.png" alt="&gt;" width="27" height="29">
-            </a>
-        % # > point to next page otherwise
-        % else:
-            % #<a href=/diary/{{page + 1}} rel="nofollow">&gt;</a>
-            <a href=/diary/{{page + 1}}>
-                <img src="/static/img/btn/nav_r.png" alt="&gt;" width="27" height="29">
-            </a>
-        % end
-
-        % # >> is always active link to maximum page
-        % #<a href=/diary/{{max_pages}} rel="nofollow">&gt;&gt;</a>
-        <a href=/diary/{{max_pages}}>
-            <img src="/static/img/btn/nav_rr.png" alt="&gt;&gt;" width="33" height="29">
-        </a>
-        </div>
-    </center>
-    </div>
-% include diary-boxes.tpl