Cat ears #isCat

FossilOrigin-Name: 06fbde2dfe4884d3dfd298fee85ff78c8b3482c38408a2df053aaa4a03ce3b91

dist/treebird20.css

@@ -1720,3 +1720,62 @@ ul.large-list li a
     margin-right: 32px;
 }
 
+.is-cat:before,
+.is-cat:after
+{
+    content: "";
+    display: block;
+    border: 3px solid #ececec !important;
+    background-color: #E6C6E6 !important;
+    width: 24px;
+    height: 30px;
+    box-sizing: border-box;
+    position: absolute;
+    z-index: 0;
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.is-cat img {
+    overflow: visible;
+    border-radius: 100% !important;
+    z-index: 3;
+    position: absolute;
+}
+
+.is-cat:before {
+    transform: rotate(33deg) skew(30deg);
+    border-radius: 0 75% 75% 75%;
+    margin-left: 1px;
+}
+
+.is-cat:after {
+    transform: rotate(-33deg) skew(-30deg);
+    border-radius: 75% 0 75% 75%;
+    margin-left: 31px;
+}
+
+.is-cat:hover:before
+{
+    animation: earwiggleleft 1s infinite;
+}
+
+.is-cat:hover:after
+{
+    animation: earwiggleright 1s infinite;
+}
+
+@keyframes earwiggleleft {
+    0% { transform: rotate(35deg) skew(30deg); }
+    25% { transform: rotate(10deg) skew(30deg); }
+    50% { transform: rotate(20deg) skew(30deg); }
+    75% { transform: rotate(0deg) skew(30deg); }
+    100% { transform: rotate(35deg) skew(30deg); }
+}
+
+@keyframes earwiggleright {
+    0% { transform: rotate(-35deg) skew(-30deg); }
+    27% { transform: rotate(-10deg) skew(-30deg); }
+    50% { transform: rotate(-20deg) skew(-30deg); }
+    70% { transform: rotate(-0deg) skew(-30deg); }
+    100% { transform: rotate(-35deg) skew(-30deg); }
+}

src/base_page.c

@@ -172,6 +172,7 @@ cleanup:
 
 void render_html(char* content_type, char* data, size_t data_len)
 {
+    if (data_len == 0) data_len = strlen(data_len);
     printf("Content-type: %s\r\n"
            "Content-Length: %d\r\n\r\n",
            content_type ? content_type : "text/html",

src/main.c

@@ -94,9 +94,10 @@ int main(void)
         { "/notifications_compact", content_notifications_compact },
         { "/notifications", content_notifications },
         { "/tag/:", content_tl_tag },
+        // API
+        { "/treebird_api/v1/notifications", api_notifications }
     };
 
-    // API
     while (FCGI_Accept() >= 0)
     {
         // Default config

src/notifications.c

@@ -280,3 +280,7 @@ void content_notifications_compact(struct session* ssn, mastodont_t* api, char**
     if (page) free(page);
 }
 
+void api_notifications(struct session* ssn, mastodont_t* api, char** data)
+{
+    render_html("application/json", "{\"error\":0}", 0);
+}

src/notifications.h

@@ -46,4 +46,6 @@ char* construct_notifications_compact(struct session* ssn,
 void content_notifications(struct session* ssn, mastodont_t* api, char** data);
 void content_notifications_compact(struct session* ssn, mastodont_t* api, char** data);
 
+void api_notifications(struct session* ssn, mastodont_t* api, char** data);
+
 #endif // NOTIFICATION_H

src/status.c

@@ -594,6 +594,8 @@ char* construct_status(struct session* ssn,
         .focused = ((flags & STATUS_FOCUSED) == STATUS_FOCUSED ?
                    "focused" : ""),
         .notif_info = notif_info,
+        // TODO doesn't even need to be a hashtag, this is a temporary hack
+        .is_cat = status->account.note && strstr(status->account.note, "isCat") ? "is-cat" : NULL,
         .avatar = status->account.avatar,
         .username = formatted_display_name,
         .prefix = config_url_prefix,

static/account.tmpl

@@ -37,7 +37,9 @@
     
     {{%s:follow_btn}}
   </div>
-  <img class="acct-pfp" src="{{%s:avatar}}">
+  <div class="acct-pfp-wrapper">
+    <img class="acct-pfp" src="{{%s:avatar}}">
+  </div>
 </div>
 
 {{%s:info}}

static/status.tmpl

@@ -1,7 +1,7 @@
 <table id="{{%s:status_id}}" class="status {{%s:focused}} ui-table">
   {{ %s : notif_info }}
   <tr>
-    <td class="pfp-td">
+    <td class="pfp-td {{%s:is_cat}}">
       <img src="{{%s:avatar}}">
     </td>
     <td class="status-info">

static/status_interactions.tmpl

@@ -1,9 +1,9 @@
 <div class="status-interactions">
   <div class="status-interactions-labels">
-    <!-- Favourites count -->
-    {{%s:favourites_count}}
     <!-- Reblog count -->
     {{%s:reblogs_count}}
+    <!-- Favourites count -->
+    {{%s:favourites_count}}
   </div>
   <div class="status-interactions-pfps">
     {{%s:users}}