iFrame notifications sidebar

FossilOrigin-Name: fcb690387596d29439591f84589fba848c20a2f1bd72ea3aa3259e427a9d372f

Makefile

@@ -66,6 +66,8 @@ $(PAGES_DIR)/test.chtml: $(PAGES_DIR)/test.html
 	./filec $< data_test_html > $@
 $(PAGES_DIR)/notifications_page.chtml: $(PAGES_DIR)/notifications_page.html
 	./filec $< data_notifications_page_html > $@
+$(PAGES_DIR)/notifications_embed.chtml: $(PAGES_DIR)/notifications_embed.html
+	./filec $< data_notifications_embed_html > $@
 $(PAGES_DIR)/notifications.chtml: $(PAGES_DIR)/notifications.html
 	./filec $< data_notifications_html > $@
 $(PAGES_DIR)/notification.chtml: $(PAGES_DIR)/notification.html
@@ -141,6 +143,8 @@ $(PAGES_DIR)/account_sidebar.chtml: $(PAGES_DIR)/account_sidebar.html
 	./filec $< data_account_sidebar_html > $@
 $(PAGES_DIR)/about.chtml: $(PAGES_DIR)/about.html
 	./filec $< data_about_html > $@
+$(PAGES_DIR)/instance.chtml: $(PAGES_DIR)/instance.html
+	./filec $< data_instance_html > $@
 
 $(MASTODONT_DIR): 
 	cd ..; fossil clone $(MASTODONT_URL) || true

dist/treebird20.css

@@ -184,6 +184,44 @@ table.ui-table td
     background-color: #eaecf0;
 }
 
+.sidebar-frame
+{
+    border: none;
+    width: 100%;
+    min-height: 600px;
+    border-bottom: 1px dashed #cacaca;
+}
+
+
+.sidebar-embed-container .navigation
+{
+    position: sticky;
+    top: 0px;
+    width: 100%;
+    z-index: 100;
+    background-color: rgba(234, 236, 240, .7);
+    padding: 0;
+}
+
+.sidebar-embed-container .btn,
+.sidebar-embed-container .nav-btn
+{
+    background: unset;
+    padding: 2px !important;
+    font-size: 13px;
+}
+
+.sidebar-embed-container .btn-disabled
+{
+    background: unset;
+}
+
+.sidebar-embed-container .btn:hover
+{
+    background: unset;
+    background-color: rgba(0, 0, 0, 0.2);
+}
+
 #leftbar
 {
     border-right: 1px solid #dadada;
@@ -335,8 +373,8 @@ table.present th, table.present td
 
 .btn-disabled
 {
-    color: #cacaca !important;
-    background: #f3f3f3 !important;
+    color: #cacaca;
+    background: #f3f3f3;
 }
 
 .btn-disabled:hover

src/base_page.c

@@ -39,7 +39,8 @@ void render_base_page(struct base_page* page, struct session* ssn, mastodont_t*
 {
     char* cookie = getenv("HTTP_COOKIE");
     enum l10n_locale locale = page->locale;
-    char* login_string = "<a href=\"login\" id=\"login-header\">Login / Register</a>";
+    const char* login_string = "<a href=\"login\" id=\"login-header\">Login / Register</a>";
+    const char* sidebar_embed = "<iframe class=\"sidebar-frame\" src=\"/notifications_compact\"></iframe>";
     char* background_url_css = NULL;
     // Sidebar
     char* sidebar_str,
@@ -70,26 +71,32 @@ void render_base_page(struct base_page* page, struct session* ssn, mastodont_t*
         mastodont_storage_cleanup(&storage); // reuse it later
 
         // Get / Show notifications on sidebar
-        struct mstdnt_get_notifications_args args = {
-            .exclude_types = 0,
-            .account_id = NULL,
-            .exclude_visibilities = 0,
-            .include_types = 0,
-            .with_muted = 1,
-            .max_id = NULL,
-            .min_id = NULL,
-            .since_id = NULL,
-            .offset = 0,
-            .limit = 8,
-        };
-        
-        if (mastodont_get_notifications(api, &args, &storage, &notifs, &notifs_len) == 0)
+        if (ssn->config.notif_embed)
         {
-            main_sidebar_str = construct_notifications_compact(ssn, api, notifs, notifs_len, NULL);
+            main_sidebar_str = (char*)sidebar_embed;
         }
+        else {
+            struct mstdnt_get_notifications_args args = {
+                .exclude_types = 0,
+                .account_id = NULL,
+                .exclude_visibilities = 0,
+                .include_types = 0,
+                .with_muted = 1,
+                .max_id = NULL,
+                .min_id = NULL,
+                .since_id = NULL,
+                .offset = 0,
+                .limit = 8,
+            };
+        
+            if (mastodont_get_notifications(api, &args, &storage, &notifs, &notifs_len) == 0)
+            {
+                main_sidebar_str = construct_notifications_compact(ssn, api, notifs, notifs_len, NULL);
+            }
 
-        mstdnt_cleanup_notifications(notifs, notifs_len);
-        mastodont_storage_cleanup(&storage);
+            mstdnt_cleanup_notifications(notifs, notifs_len);
+            mastodont_storage_cleanup(&storage);
+        }
     }
     else {
         // Construct small login page
@@ -156,16 +163,21 @@ void render_base_page(struct base_page* page, struct session* ssn, mastodont_t*
         goto cleanup;
     }
     
-    fputs("Content-type: text/html\r\n", stdout);
-    printf("Content-Length: %d\r\n\r\n", len + 1);
-    puts(data);
+    render_html(data, len);
 
     // Cleanup
 /* cleanup_all: */
     free(data);
 cleanup:
-    if (sidebar_str) free(sidebar_str);
-    if (main_sidebar_str) free(main_sidebar_str);
-    if (account_sidebar_str) free(account_sidebar_str);
-    if (background_url_css) free(background_url_css);
+    free(sidebar_str);
+    if (main_sidebar_str != sidebar_embed) free(main_sidebar_str);
+    free(account_sidebar_str);
+    free(background_url_css);
+}
+
+void render_html(char* data, size_t data_len)
+{
+    fputs("Content-type: text/html\r\n", stdout);
+    printf("Content-Length: %d\r\n\r\n", data_len + 1);
+    puts(data);    
 }

src/base_page.h

@@ -47,4 +47,12 @@ struct base_page
 
 void render_base_page(struct base_page* page, struct session* ssn, mastodont_t* api);
 
+/**
+ * Outputs HTML in format for CGI. This can only be called once!
+ *
+ * @param data HTML content
+ * @param data_len Length of data.
+ */
+void render_html(char* data, size_t data_len);
+
 #endif // BASE_PAGE_H

src/cookie.c

@@ -58,6 +58,7 @@ char* read_cookies_env(struct cookie_values* cookies)
         { "client_secret", &(cookies->client_secret), key_string },
         { "themeclr", &(cookies->themeclr), key_int },
         { "jsactions", &(cookies->jsactions), key_int },
+        { "notifembed", &(cookies->notif_embed), key_int },
         { "jsreply", &(cookies->jsreply), key_int },
         { "jslive", &(cookies->jslive), key_int },
         { "js", &(cookies->js), key_int },

src/cookie.h

@@ -43,6 +43,7 @@ struct cookie_values
     struct key stat_hide_muted;
     struct key instance_show_shoutbox;
     struct key instance_panel;
+    struct key notif_embed;
 };
 
 struct http_cookie_info

src/local_config.h

@@ -38,6 +38,7 @@ struct local_config
     int stat_hide_muted;
     int instance_show_shoutbox;
     int instance_panel;
+    int notif_embed;
 };
 
 #endif // LOCAL_CONFIG_H

src/local_config_set.c

@@ -94,4 +94,5 @@ void load_config(struct session* ssn, mastodont_t* api)
     set_config_int(LOAD_CFG_SIM("stathidemuted",        stat_hide_muted));
     set_config_int(LOAD_CFG_SIM("instanceshowshoutbox", instance_show_shoutbox));
     set_config_int(LOAD_CFG_SIM("instancepanel",        instance_panel));
+    set_config_int(LOAD_CFG_SIM("notifembed",           notif_embed));
 }

src/main.c

@@ -91,6 +91,7 @@ int main(void)
         { "/local", content_tl_local },
         { "/bookmarks", content_account_bookmarks },
         { "/favourites", content_account_favourites },
+        { "/notifications_compact", content_notifications_compact },
         { "/notifications", content_notifications },
         { "/tag/:", content_tl_tag },
     };
@@ -115,6 +116,7 @@ int main(void)
                 .stat_hide_muted = 0,
                 .instance_show_shoutbox = 1,
                 .instance_panel = 1,
+                .notif_embed = 1,
             },
             .cookies = {{}},
             .post = {{}},

src/notifications.c

@@ -36,6 +36,7 @@
 #include "../static/notification_compact.chtml"
 #include "../static/like_svg.chtml"
 #include "../static/repeat_svg.chtml"
+#include "../static/notifications_embed.chtml"
 
 struct notification_args
 {
@@ -231,3 +232,55 @@ void content_notifications(struct session* ssn, mastodont_t* api, char** data)
     if (page) free(page);
 }
 
+void content_notifications_compact(struct session* ssn, mastodont_t* api, char** data)
+{
+    char* page, *notif_html = NULL;
+    struct mstdnt_storage storage;
+    struct mstdnt_notification* notifs;
+    size_t notifs_len;
+    char* start_id;
+    char* navigation_box = NULL;
+
+    if (keystr(ssn->cookies.logged_in))
+    {
+        struct mstdnt_get_notifications_args args = {
+            .exclude_types = 0,
+            .account_id = NULL,
+            .exclude_visibilities = 0,
+            .include_types = 0,
+            .with_muted = 1,
+            .max_id = keystr(ssn->post.max_id),
+            .min_id = keystr(ssn->post.min_id),
+            .since_id = NULL,
+            .offset = 0,
+            .limit = 20,
+        };
+
+        if (mastodont_get_notifications(api, &args, &storage, &notifs, &notifs_len) == 0)
+        {
+            notif_html = construct_notifications_compact(ssn, api, notifs, notifs_len, NULL);
+            start_id = keystr(ssn->post.start_id) ? keystr(ssn->post.start_id) : notifs[0].id;
+            navigation_box = construct_navigation_box(start_id,
+                                                      notifs[0].id,
+                                                      notifs[notifs_len-1].id,
+                                                      NULL);
+            mstdnt_cleanup_notifications(notifs, notifs_len);}
+                
+        else
+            notif_html = construct_error(storage.error, E_NOTICE, 1, NULL);
+
+    }
+ 
+    size_t len = easprintf(&page, data_notifications_embed_html,
+                           ssn->config.theme,
+                           ssn->config.themeclr ? "-dark" : "",
+                           navigation_box ? navigation_box : "",
+                           notif_html ? notif_html : "");
+
+    render_html(page, len);
+
+    if (notif_html) free(notif_html);
+    if (navigation_box) free(navigation_box);
+    if (page) free(page);
+}
+

src/notifications.h

@@ -44,5 +44,6 @@ char* construct_notifications_compact(struct session* ssn,
 
 // Page contents
 void content_notifications(struct session* ssn, mastodont_t* api, char** data);
+void content_notifications_compact(struct session* ssn, mastodont_t* api, char** data);
 
 #endif // NOTIFICATION_H

src/page_config.c

@@ -80,7 +80,8 @@ void content_config_general(struct session* ssn, mastodont_t* api, char** data)
               bool_checked(stat_emojo_likes),
               bool_checked(stat_hide_muted),
               bool_checked(instance_show_shoutbox),
-              bool_checked(instance_panel));
+              bool_checked(instance_panel),
+              bool_checked(notif_embed));
 
     load_config(ssn, api);
     

src/query.c

@@ -112,6 +112,7 @@ char* read_post_data(struct post_values* post)
         { "stathidemuted", &(post->stat_hide_muted), key_int },
         { "instanceshowshoutbox", &(post->instance_show_shoutbox), key_int },
         { "instancepanel", &(post->instance_panel), key_int },
+        { "notifembed", &(post->notif_embed), key_int },
         { "file", &(post->files), key_files }
     };
     // END Query references

src/query.h

@@ -45,6 +45,7 @@ struct post_values
     struct key stat_hide_muted; // Int
     struct key instance_show_shoutbox; // Int
     struct key instance_panel; // Int
+    struct key notif_embed; // Int
     struct key set; // Int
     
     struct key content; // String

static/config_general.html

@@ -64,6 +64,14 @@
       </li>
     </ul>
 
+    <h3>Notifications</h3>
+    <ul>
+      <li>
+        <input type="checkbox" id="cfgnotifembed" name="notifembed" value="1" %s>
+        <label for="cfgnotifembed">Display notifications in iFrame - iFrames separate loading from the main page</label>
+      </li>
+    </ul>
+
     <input class="btn btn-single" type="submit" value="Save">
   </form>
 </div>

static/notifications_embed.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Notifications embed</title>
+    <link rel="stylesheet" type="text/css" href="/%s%s.css">
+    <style>
+      html, body
+      {
+          background-color: unset;
+          scrollbar-color: #808080 #eaecf0;
+          scrollbar-width: thin;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="sidebar-embed-container">
+      %s
+      <div class="sidebar-embed-notifs">
+        %s
+      </div>
+    </div>
+  </body>
+</html>