API: demo individual community response with x_api theme

app/api/alpha/routes.py

@@ -406,6 +406,7 @@ def alpha_emoji():
 
 # HTML routes
 from flask import abort, render_template
+from app.models import Community
 from app.utils import current_theme
 import os
 
@@ -463,3 +464,19 @@ def get_alpha_communities():
         return render_template(f'themes/{theme}/{template_name}')
     else:
         return render_template(template_name)
+
+
+@bp.route('/api/alpha/c/<actor>', methods=['GET'])
+def community_profile(actor):
+    if '@' in actor:
+        community = Community.query.filter_by(ap_id=actor.lower(), banned=False).first()
+    else:
+        community = Community.query.filter_by(name=actor, ap_id=None).first()
+
+    template_name = "community.html"
+
+    theme = current_theme()
+    if theme != '' and os.path.exists(f'app/templates/themes/{theme}/{template_name}'):
+        return render_template(f'themes/{theme}/{template_name}', community_id=community.id)
+    else:
+        return render_template(template_name, community_id=community.id)

app/templates/themes/x_api/auth/login.html

@@ -1,7 +1,7 @@
 {% extends 'themes/' + theme() + '/base.html' %}
 
 {% block app_content %}
-  <p class="mb-0">GET <code>/api/alpha/site</code></p>
+  <p class="mb-0" id="site_request"></p>
   <details><summary>JSON</summary><pre id="site_json"></pre></details>
 
   <p class="mb-0">POST <code>/api/alpha/user/login</code></p>

app/templates/themes/x_api/community.html

@@ -0,0 +1,12 @@
+{% extends 'themes/' + theme() + '/base.html' %}
+
+{% block app_content %}
+  <p class="mb-0" id="site_request"></p>
+  <details><summary>JSON</summary><pre id="site_json"></pre></details>
+  <p class="mb-0" id="community_request" data-value="{{ community_id }}">GET <code>/api/alpha/community?id={{ community_id }}</code></p>
+  <details><summary>JSON</summary><pre id="community_json"></pre></details>
+  <p class="mb-0" id="community_post_list_request">GET <code>/api/alpha/post/list?sort=Hot&page=1&community_id={{ community_id }}</code></p>
+  <details><summary>JSON</summary><pre id="community_post_list_json"></pre></details>
+
+  <script src="{{ '/static/themes/' + theme() + '/js/community.js' }}" type="module" data-param1="{{ community_id }}"></script>
+{% endblock %}

app/templates/themes/x_api/js/community.js

@@ -0,0 +1,26 @@
+const element = document.getElementById('community_request');
+const community_id = element.getAttribute('data-value');
+
+import { baseUrl } from './site.js';
+const community_api = baseUrl + '/api/alpha/community?id=' + community_id;
+const community_post_list_api = baseUrl + '/api/alpha/post/list?sort=Hot&page=1&community_id=' + community_id;
+
+import { jwt } from './site.js';
+if (jwt != null) {
+  var request = {method: "GET", headers: {Authorization: `Bearer ${jwt}`}};
+} else {
+  var request = {method: "GET"};
+}
+
+fetch(community_api, request)
+  .then(response => response.json())
+  .then(data => {
+        document.querySelector('#community_json').textContent = JSON.stringify(data, null, 2);
+  })
+
+
+fetch(community_post_list_api, request)
+  .then(response => response.json())
+  .then(data => {
+        document.querySelector('#community_post_list_json').textContent = JSON.stringify(data, null, 2);
+  })

app/templates/themes/x_api/js/site.js

@@ -64,11 +64,11 @@ fetch(api_site, request)
             for (let mods of data.my_user.moderates) {
               let moderated_community_item = document.createElement('li');
               if (mods.community.local) {
-                moderated_community_item.innerHTML =  '<a class="dropdown-item" href="' + baseUrl + '/c/' + mods.community.name + '">' +
+                moderated_community_item.innerHTML =  '<a class="dropdown-item" href="' + baseUrl + '/api/alpha/c/' + mods.community.name + '">' +
                                                         mods.community.title + '<span class="text-body-secondary">' + ' (' + mods.community.ap_domain + ')</span>' +
                                                       '</a>'
               } else {
-                moderated_community_item.innerHTML =  '<a class="dropdown-item" href="' + baseUrl + '/c/' + mods.community.name + '@' + mods.community.ap_domain + '">' +
+                moderated_community_item.innerHTML =  '<a class="dropdown-item" href="' + baseUrl + '/api/alpha/c/' + mods.community.name + '@' + mods.community.ap_domain + '">' +
                                                         mods.community.title + '<span class="text-body-secondary">' + ' (' + mods.community.ap_domain + ')</span>' +
                                                       '</a>'
               }
@@ -87,11 +87,11 @@ fetch(api_site, request)
             for (let follows of data.my_user.follows) {
               let followed_community_item = document.createElement('li');
               if (follows.community.local) {
-                followed_community_item.innerHTML =  '<a class="dropdown-item" href="' + baseUrl + '/c/' + follows.community.name + '">' +
+                followed_community_item.innerHTML =  '<a class="dropdown-item" href="' + baseUrl + '/api/alpha/c/' + follows.community.name + '">' +
                                                         follows.community.title + '<span class="text-body-secondary">' + ' (' + follows.community.ap_domain + ')</span>' +
                                                       '</a>'
               } else {
-                followed_community_item.innerHTML =  '<a class="dropdown-item" href="' + baseUrl + '/c/' + follows.community.name + '@' + follows.community.ap_domain + '">' +
+                followed_community_item.innerHTML =  '<a class="dropdown-item" href="' + baseUrl + '/api/alpha/c/' + follows.community.name + '@' + follows.community.ap_domain + '">' +
                                                         follows.community.title + '<span class="text-body-secondary">' + ' (' + follows.community.ap_domain + ')</span>' +
                                                       '</a>'
               }
@@ -117,27 +117,34 @@ fetch(api_site, request)
         }
 
         // site info
+        let postlist = document.querySelector('#post_list_request')
         if (jwt != null) {
           document.querySelector('#site_request').innerHTML = 'GET <code>/api/alpha/site</code> [LOGGED IN]'
-          document.querySelector('#post_list_request').innerHTML = 'GET <code>/api/alpha/post/list?type_=Subscribed&sort=New&page=1</code></p>'
+          if (postlist) {
+            postlist.innerHTML = 'GET <code>/api/alpha/post/list?type_=Subscribed&sort=New&page=1</code></p>'
+          }
         } else {
           document.querySelector('#site_request').innerHTML = 'GET <code>/api/alpha/site</code> [LOGGED OUT]'
-          document.querySelector('#post_list_request').innerHTML = 'GET <code>/api/alpha/post/list?type_=Popular&sort=Hot&page=1</code></p>'
+          if (postlist) {
+            postlist.innerHTML = 'GET <code>/api/alpha/post/list?type_=Popular&sort=Hot&page=1</code></p>'
+          }
         }
 
         document.querySelector('#site_json').textContent = JSON.stringify(data, null, 2);
   })
 
 
-if (jwt != null) {
+let postlist = document.querySelector('#post_list_request');
-  var api_postlist = baseUrl + '/api/alpha/post/list?type_=Subscribed&sort=New&page=1';
+if (postlist) {
-} else {
+  if (jwt != null) {
-  var api_postlist = baseUrl + '/api/alpha/post/list?type_=Popular&sort=Hot&page=1';
+    var api_postlist = baseUrl + '/api/alpha/post/list?type_=Subscribed&sort=New&page=1';
-}
+  } else {
-
+    var api_postlist = baseUrl + '/api/alpha/post/list?type_=Popular&sort=Hot&page=1';
-fetch(api_postlist, request)
+  }
-  .then(response => response.json())
-  .then(data => {
-    document.querySelector('#post_list_json').textContent = JSON.stringify(data, null, 2);
 
+  fetch(api_postlist, request)
+    .then(response => response.json())
+    .then(data => {
+      document.querySelector('#post_list_json').textContent = JSON.stringify(data, null, 2);
   })
+}

app/templates/themes/x_api/list_communities.html

@@ -1,7 +1,7 @@
 {% extends 'themes/' + theme() + '/base.html' %}
 
 {% block app_content %}
-  <p class="mb-0">GET <code>/api/alpha/site</code></p>
+  <p class="mb-0" id="site_request"></p>
   <details><summary>JSON</summary><pre id="site_json"></pre></details>
   <p class="mb-0">GET <code>/api/alpha/community/list</code></p>
   <details><summary>JSON</summary><pre id="community_list_json"></pre></details>