CSS : Improve appearance for narrower displays;

Python : Add branding and correct cached data; TOML : Add keys for branding and add default values; XHTML : Modify HTML code for branding.
2024-10-16 13:24:11 +03:00 · 2024-10-16 13:24:11 +03:00 · 714103a331
commit 714103a331
parent 11c832a2bf
9 changed files with 127 additions and 69 deletions
--- a/configuration.toml
+++ b/configuration.toml
@ -4,3 +4,10 @@
 alias = "FASI" # Alias
 xmpp = ""      # Jabber ID
 pass = ""      # Password
+
+[brand]
+name = "XMPP"             # Name of brand
+chat = "XMPP Client"      # Name of chat software
+news = "Reeder"           # Name of news software
+site = "https://xmpp.org" # Address of site
+
--- a/css/stylesheet.css
+++ b/css/stylesheet.css
@ -513,9 +513,17 @@ h3, h4, h5 {
 }
 */

+@media (max-width: 1150px) {
+
+  #action > #view {
+    display: none;
+  }
+
+}
+
@media (max-width: 950px) {

-  #action-bar > #vcard,
+  #action-bar > #view,
  #profile-top img,
  #number-of-pages #first,
  #number-of-pages #last {
@ -579,6 +587,17 @@ h3, h4, h5 {

@media (max-width: 725px) {

+  #action > a,
+  #action-bar > a {
+    padding-left: 2em;
+    padding-right: 2em;
+  }
+
+  #action > #add,
+  #action-bar > #add {
+    display: none;
+  }
+
  body {
    background: #f5f5f5;
  }
@ -655,6 +674,14 @@ h3, h4, h5 {

@media (max-width: 572px) {

+  #action > a,
+  #action-bar > a,
+  #number-of-pages > a {
+    font-size: unset;
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+
  #bar,
  #logo {
    height: 2.6em;
@ -667,13 +694,4 @@ h3, h4, h5 {
    padding-right: 1.4em;
  }

-  #action > a:nth-child(2) {
-    border-bottom-right-radius: 2em;
-    border-top-right-radius: 2em;
-  }
-
-  #action > a:nth-child(3) {
-    display: none;
-  }
-
 }
--- a/fasi.py
+++ b/fasi.py
@ -58,7 +58,18 @@ class XmppInstance(ClientXMPP):
        #self.disconnect()

 class HttpInstance:
-    def __init__(self, jabber_id, password, alias):
+    def __init__(self, configuration):
+
+        account = configuration['account']
+        jabber_id = account['xmpp']
+        password = account['pass']
+        alias = account['alias']
+
+        brand = configuration['brand']
+        brand_name = brand['name']
+        brand_site = brand['site']
+        chat_client = brand['chat']
+        news_client = brand['news']

        self.app = FastAPI()
        templates = Jinja2Templates(directory='xhtml')
@ -146,7 +157,7 @@ class HttpInstance:
                if number_of_pages < len(messages) / 10: number_of_pages += 1

                # Query URI links
-                action, instance, link_href, links, node_name, view_href, xmpp_uri = XmppUtilities.set_query_uri_link(
+                action, instance, link_href, links, view_href, xmpp_uri = XmppUtilities.set_query_uri_link(
                    jid_bare, jid_info, jid_kind, node_name)

                # Graphic files
@ -168,6 +179,9 @@ class HttpInstance:
            template_file = 'conference.xhtml'
            template_dict = {
                'action' : action,
+                'brand_name' : brand_name,
+                'brand_site' : brand_site,
+                'chat_client' : chat_client,
                'exception' : exception,
                'filename' : filename,
                'jid_bare' : jid,
@ -207,11 +221,6 @@ class HttpInstance:
                entries = []
                exception = jid_vcard = note = node_note =  number_of_pages = \
                page_number = previous = selection =  services_sorted = None
-                node_title = node_name
-                link_href = 'xmpp:{}?pubsub;node={};action=subscribe'.format(
-                    jid_bare, node_name)
-                link_text = 'Subscribe'
-                xmpp_uri = '{}?;node={}'.format(jid_bare, node_name)

                filename = 'details/{}.toml'.format(jid_bare)
                if os.path.exists(filename) and os.path.getsize(filename) > 0:
@ -235,12 +244,19 @@ class HttpInstance:
                    'type' : jid_details['image_type']}
                link_href = jid_details['link_href']
                messages = jid_details['messages']
+                node_title = jid_details['name']
                nodes = jid_details['nodes']
                note = jid_details['note']
-                title = jid_details['name']
+                #title = nodes[node_name]['title'] if node_name else jid_details['name']
+                title = nodes[node_name]['title']
                xmpp_uri = jid_details['uri']
                view_href = jid_details['view_href']

+                #link_href = 'xmpp:{}?pubsub;node={};action=subscribe'.format(
+                #    jid_bare, node_name)
+                #link_text = 'Subscribe'
+                #xmpp_uri = '{}?;node={}'.format(jid_bare, node_name)
+
                xmpp_instance = XmppInstance(jabber_id, password, jid_bare)
                xmpp_instance.connect()

@ -252,9 +268,11 @@ class HttpInstance:
                    #node_item_ids = await XmppUtilities.get_item_ids_of_node(
                    #    jabber_id, password, jid_bare, node_name, nodes)
                    if isinstance(node_item_ids['iq'], stanza.iq.Iq):
-                        nodes[node_name]['count'] = len(node_item_ids['iq']['disco_items']['items'])
+                        iq_disco_items_items = node_item_ids['iq']['disco_items']['items']
+                        #nodes[node_name]['title'] = 
+                        nodes[node_name]['count'] = len(iq_disco_items_items)
                        nodes[node_name]['item_ids'] = []
-                        for item in node_item_ids['iq']['disco_items']['items']:
+                        for item in iq_disco_items_items:
                            nodes[node_name]['item_ids'].append(
                                [item[0] or '', item[1] or '', item[2] or ''])

@ -304,7 +322,8 @@ class HttpInstance:
                else:
                    #title = title or node_name
                    if not node_title: node_title = node_name
-                    node_note = jid_bare
+                    #node_note = nodes[node_name]['title'] if node_name else jid_details['name']
+                    node_note = xmpp_uri # jid_bare
                    for item in node_items['pubsub']['items']:
                        item_payload = item['payload']
                        entry = Syndication.extract_items(item_payload)
@ -316,7 +335,7 @@ class HttpInstance:
                xmpp_instance.disconnect()

                # Query URI links
-                action, instance, link_href, links, node_name, view_href, xmpp_uri = XmppUtilities.set_query_uri_link(
+                action, instance, link_href, links, view_href, xmpp_uri = XmppUtilities.set_query_uri_link(
                    jid_bare, jid_info, jid_kind, node_name, item_id)

                # Graphic files
@ -338,6 +357,9 @@ class HttpInstance:
            template_file = 'node.xhtml'
            template_dict = {
                'action' : action,
+                'brand_name' : brand_name,
+                'brand_site' : brand_site,
+                'chat_client' : chat_client,
                'entries' : entries,
                'exception' : exception,
                'filename' : filename,
@ -455,8 +477,11 @@ class HttpInstance:
            template_file = 'disco.xhtml'
            template_dict = {
                'action' : action,
-                'exception' : exception,
                'filename' : 'default.svg',
+                'brand_name' : brand_name,
+                'brand_site' : brand_site,
+                'chat_client' : chat_client,
+                'exception' : exception,
                'jid_bare' : jid,
                'note' : note,
                'request' : request,
@ -537,7 +562,7 @@ class HttpInstance:
                    'type' : jid_details['image_type']}
                link_href = jid_details['link_href']
                messages = jid_details['messages']
-                note = jid_details['note']
+                note = nodes[node_name]['title'] if node_name else jid_details['note']
                title = jid_details['name']
                xmpp_uri = jid_details['uri']
                view_href = jid_details['view_href']
@ -547,7 +572,7 @@ class HttpInstance:
                        jabber_id, password, jid_bare, node_name, nodes)

                # Query URI links
-                action, instance, link_href, links, node_name, view_href, xmpp_uri = XmppUtilities.set_query_uri_link(
+                action, instance, link_href, links, view_href, xmpp_uri = XmppUtilities.set_query_uri_link(
                    jid_bare, jid_info, jid_kind, node_name)

                # Graphic files
@ -566,6 +591,9 @@ class HttpInstance:
            template_file = 'jid.xhtml'
            template_dict = {
                'action' : action,
+                'brand_name' : brand_name,
+                'brand_site' : brand_site,
+                'chat_client' : chat_client,
                'count' : count,
                'instance' : instance,
                'exception' : exception,
@ -601,6 +629,9 @@ class HttpInstance:
            template_file = 'result.xhtml'
            template_dict = {
                'action' : action,
+                'brand_name' : brand_name,
+                'brand_site' : brand_site,
+                'chat_client' : chat_client,
                'request' : request,
                'title' : title,
                'url' : request.url._url}
@ -616,6 +647,9 @@ class HttpInstance:
            else:
                template_file = 'main.xhtml'
                template_dict = {
+                    'brand_name' : brand_name,
+                    'brand_site' : brand_site,
+                    'chat_client' : chat_client,
                    'request' : request,
                    'url' : request.url._url}
                response = templates.TemplateResponse(template_file, template_dict)
@ -661,7 +695,7 @@ class FileUtilities:

        # Query URI links
        print('Query URI links')
-        action, instance, link_href, links, node_name, view_href, xmpp_uri = XmppUtilities.set_query_uri_link(
+        action, instance, link_href, links, view_href, xmpp_uri = XmppUtilities.set_query_uri_link(
            jid_bare, jid_info, jid_kind, node_name)

        # JID info
@ -680,8 +714,7 @@ class FileUtilities:
                'name' : vcard_temp['FN'] or conference_title or '',
                'note' : vcard_temp['notes'] or node_id or '',
                'type' : vcard_temp['PHOTO']['TYPE'] or '',
-                'bin' : vcard_temp['PHOTO']['BINVAL'] or ''
-            }
+                'bin' : vcard_temp['PHOTO']['BINVAL'] or ''}

        # TODO /d/pubsub.nicoco.fr/blog/urn-uuid-53e43061-1962-3112-bb8a-1473dca61719
        count = ''
@ -707,7 +740,9 @@ class FileUtilities:

        # Title
        print('Title')
-        if jid_kind not in ('conference', 'mix', 'muc') and '@' in jid_bare:
+        if (jid_kind not in ('conference', 'mix', 'muc') and
+            '@' in jid_bare and
+            not node_name):
            # NOTE Variables node_name and node_title do not appear to be utilized.
            node_name = 'urn:xmpp:microblog:0'
            node_title = 'Journal'
@ -715,8 +750,7 @@ class FileUtilities:
            category = 'unsorted'
            for item in iq_disco_items_items:
                if item[2] and item[1] == node_name:
-                    #title = item[2]
-                    title = node_title = item[2]
+                    node_title = item[2]
                    break
        else:
            jid_items = None
@ -793,6 +827,7 @@ class FileUtilities:
            node_item_ids = await XmppXep0060.get_node_item_ids(xmpp_instance, jid_bare, node_name)
            if isinstance(node_item_ids['iq'], stanza.iq.Iq):
                nodes[node_name] = {}
+                nodes[node_name]['title'] = node_title
                nodes[node_name]['count'] = len(node_item_ids['iq']['disco_items']['items'])
                nodes[node_name]['item_ids'] = []
                for item_id in node_item_ids['iq']['disco_items']['items']:
@ -1072,6 +1107,9 @@ class XmppUtilities:
            links.append({'name' : 'Connect',
                          'href' : link_href,
                          'iden' : 'connect'})
+            links.append({'name' : 'Add',
+                          'href' : 'xmpp:{}?roster'.format(jid_bare),
+                          'iden' : 'add'})
            xmpp_uri = jid_bare
            instance = view_href = ''
        elif jid_kind in ('conference', 'server'):
@ -1120,12 +1158,12 @@ class XmppUtilities:
            action = 'Message'
            instance = 'articles'
            link_href = 'xmpp:{}?message'.format(jid_bare)
-            links.append({'name' : 'Add',
-                          'href' : 'xmpp:{}?roster'.format(jid_bare),
-                          'iden' : 'add'})
            links.append({'name' : 'Message',
                          'href' : link_href,
                          'iden' : 'message'})
+            links.append({'name' : 'Add',
+                          'href' : 'xmpp:{}?roster'.format(jid_bare),
+                          'iden' : 'add'})
            #node_name = 'urn:xmpp:microblog:0'
            view_href = '/d/{}/{}'.format(jid_bare, node_name)
            xmpp_uri = jid_bare
@ -1146,7 +1184,7 @@ class XmppUtilities:
        links.append({'name' : 'vCard',
                      'href' : 'xmpp:{}?vcard'.format(jid_bare),
                      'iden' : 'vcard'})
-        return action, instance, link_href, links, node_name, view_href, xmpp_uri
+        return action, instance, link_href, links, view_href, xmpp_uri

 class XmppXep0030:

@ -1385,14 +1423,9 @@ class XmppXep0369:

 def main():
    filename_configuration = 'configuration.toml'
-    data = Data.open_file_toml(filename_configuration)
+    configuration = Data.open_file_toml(filename_configuration)

-    account = data['account']
-    jabber_id = account['xmpp']
-    password = account['pass']
-    alias = account['alias']
-
-    http_instance = HttpInstance(jabber_id, password, alias)
+    http_instance = HttpInstance(configuration)
    return http_instance.app

 app = main()
--- a/xhtml/conference.xhtml
+++ b/xhtml/conference.xhtml
@ -6,14 +6,14 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
-    <title>XMPP: {{action}} {% if title %}{{title}}{% else %}{{jid_bare}}{% endif %}</title>
+    <title>{{brand_name}}: {{action}} {% if title %}{{title}}{% else %}{{jid_bare}}{% endif %}</title>
    <meta name="description" content="{{action}} {{title}}" />
    <meta name="generator" content="Fast And Sleek Invite" />
    <meta name="uri" content="{{xmpp_uri}}" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta property="og:description" content="{{action}} {{title}}" />
    <meta property="og:image" content="/photo/{{filename}}" />
-    <meta property="og:site_name" content="XMPP" />
+    <meta property="og:site_name" content="{{brand_name}}" />
    <meta property="og:title" content="{{title}}" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="{{url}}" />
@ -24,10 +24,10 @@
  <body>
    <div id="overlay">
      <div id="bar">
-        <a href="https://xmpp.org">
+        <a href="{{brand_site}}">
          <img id="logo" src="/img/logo-wordmark-horizontal.svg" />
        </a>
-        <a id="download" href="https://xmpp.org/software/">
+        <a id="download" href="https://monocles.chat/software/">
          Download
        </a>
      </div>
@ -121,7 +121,7 @@
              </a>
          </div -->
          <!-- div>
-            <a href="https://xmpp.org">
+            <a href="{{brand_site}}">
              <img id="logo-bottom" src="/img/logo-wordmark-vertical.svg" />
            </a>
          </div -->
--- a/xhtml/disco.xhtml
+++ b/xhtml/disco.xhtml
@ -6,14 +6,14 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
-    <title>XMPP: {{action}} {{title}}</title>
+    <title>{{brand_name}}: {{action}} {{title}}</title>
    <meta name="description" content="{{action}} {{title}}" />
    <meta name="generator" content="Fast And Sleek Invite" />
    <meta name="uri" content="{{xmpp_uri}}" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta property="og:description" content="{{action}} {{title}}" />
    <meta property="og:image" content="/photo/{{filename}}" />
-    <meta property="og:site_name" content="XMPP" />
+    <meta property="og:site_name" content="{{brand_name}}" />
    <meta property="og:title" content="{{title}}" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="{{url}}" />
@ -24,7 +24,7 @@
  <body>
    <div id="overlay">
      <div id="bar">
-        <a href="https://xmpp.org">
+        <a href="{{brand_site}}">
          <img id="logo" src="/img/logo-wordmark-horizontal.svg" />
        </a>
        <a id="download" href="https://xmpp.org/software/">
@ -117,7 +117,7 @@
              </a>
          </div -->
          <!-- div>
-            <a href="https://xmpp.org">
+            <a href="{{brand_site}}">
              <img id="logo-bottom" src="/img/logo-wordmark-vertical.svg" />
            </a>
          </div -->
--- a/xhtml/jid.xhtml
+++ b/xhtml/jid.xhtml
@ -6,14 +6,14 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
-    <title>XMPP: {{action}} {{title}}</title>
+    <title>{{brand_name}}: {{action}} {{title}}</title>
    <meta name="description" content="{{action}} {{title}}" />
    <meta name="generator" content="Fast And Sleek Invite" />
    <meta name="uri" content="{{xmpp_uri}}" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta property="og:description" content="{{action}} {{title}}" />
    <meta property="og:image" content="/photo/{{filename}}" />
-    <meta property="og:site_name" content="XMPP" />
+    <meta property="og:site_name" content="{{brand_name}}" />
    <meta property="og:title" content="{{title}}" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="{{url}}" />
@ -59,7 +59,7 @@
  <body>
    <div id="overlay">
      <div id="bar">
-        <a href="https://xmpp.org">
+        <a href="{{brand_site}}">
          <img id="logo" src="/img/logo-wordmark-horizontal.svg" />
        </a>
        <a id="download" href="https://xmpp.org/software/">
@ -115,7 +115,7 @@
          {% endif %}
        </div>
        <div id="notice">
-          If you already have an <strong>XMPP Client</strong> you can
+          If you already have <strong>{% if chat_client %}{{chat_client}}{% else %}an XMPP Client{% endif %}</strong> you can
          <br/>
          {% if jid_kind in ('conference', 'mix', 'muc') %}
            join to
--- a/xhtml/main.xhtml
+++ b/xhtml/main.xhtml
@ -6,14 +6,14 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
-    <title>FASI : Welcome</title>
+    <title>{{brand_name}} : Welcome</title>
    <meta name="description" content="This is an XMPP lookup service, powered by FASI (Fast And Sleek Invite)." />
    <meta name="generator" content="Fast And Sleek Invite" />
    <meta name="uri" content="{{xmpp_uri}}" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta property="og:description" content="FASI : Welcome" />
    <meta property="og:image" content="/img/logo-wordmark-vertical.svg" />
-    <meta property="og:site_name" content="XMPP" />
+    <meta property="og:site_name" content="{{brand_name}}" />
    <meta property="og:title" content="FASI : Welcome" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="{{url}}" />
@ -24,7 +24,7 @@
  <body>
    <div id="overlay">
      <div id="bar">
-        <a href="https://xmpp.org">
+        <a href="{{brand_site}}">
          <img id="logo" src="/img/logo-wordmark-horizontal.svg" />
        </a>
        <span id="space" />
@ -50,7 +50,7 @@
            </form>
          </div>
          <div>
-            <a href="https://xmpp.org">
+            <a href="{{brand_site}}">
              <img id="logo-bottom" src="/img/logo-wordmark-vertical.svg" />
            </a>
          </div>
--- a/xhtml/node.xhtml
+++ b/xhtml/node.xhtml
@ -6,14 +6,14 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
-    <title>XMPP: {{action}} {% if title %}{{title}}{% else %}{{jid_bare}}{% endif %}</title>
+    <title>{{brand_name}}: {{action}} {% if title %}{{title}}{% else %}{{jid_bare}}{% endif %}</title>
    <meta name="description" content="{{action}} {{title}}" />
    <meta name="generator" content="Fast And Sleek Invite" />
    <meta name="uri" content="{{xmpp_uri}}" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta property="og:description" content="{{action}} {{title}}" />
    <meta property="og:image" content="/photo/{{filename}}" />
-    <meta property="og:site_name" content="XMPP" />
+    <meta property="og:site_name" content="{{brand_name}}" />
    <meta property="og:title" content="{{title}}" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="{{url}}" />
@ -24,7 +24,7 @@
  <body>
    <div id="overlay">
      <div id="bar">
-        <a href="https://xmpp.org">
+        <a href="{{brand_site}}">
          <img id="logo" src="/img/logo-wordmark-horizontal.svg" />
        </a>
        <a id="download" href="https://xmpp.org/software/">
@ -131,7 +131,7 @@
              </a>
          </div -->
          <!-- div>
-            <a href="https://xmpp.org">
+            <a href="{{brand_site}}">
              <img id="logo-bottom" src="/img/logo-wordmark-vertical.svg" />
            </a>
          </div -->
--- a/xhtml/result.xhtml
+++ b/xhtml/result.xhtml
@ -6,12 +6,12 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
-    <title>XMPP: {{action}} {{title}}</title>
+    <title>{{brand_name}}: {{action}} {{title}}</title>
    <meta name="description" content="{{action}} {{title}}" />
    <meta name="generator" content="Fast And Sleek Invite" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta property="og:description" content="{{action}} {{title}}" />
-    <meta property="og:site_name" content="XMPP" />
+    <meta property="og:site_name" content="{{brand_name}}" />
    <meta property="og:title" content="{{title}}" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="{{url}}" />
@ -22,7 +22,7 @@
  <body>
    <div id="overlay">
      <div id="bar">
-        <a href="https://xmpp.org">
+        <a href="{{brand_site}}">
          <img id="logo" src="/img/logo-wordmark-horizontal.svg" />
        </a>
        <a id="download" href="https://xmpp.org/software/">
@ -47,7 +47,7 @@
            <a href="/">Main</a>
          </div>
          <div>
-            <a href="https://xmpp.org">
+            <a href="{{brand_site}}">
              <img id="logo-bottom" src="/img/logo-wordmark-vertical.svg" />
            </a>
          </div>