extension API

pkg/http/theme.go

@@ -119,7 +119,7 @@ func (t *Theme) ScriptIncludes() string {
 	for _, script := range t.Scripts() {
 		hash := t.HashInclude(script)
 		include := fmt.Sprintf(
-			"<script type=\"text/javascript\" src=\"%s/%s?%s\"></script>",
+			"<script type=\"text/javascript\" src=\"%s/%s?%s\" defer></script>",
 			t.Config.BasePath, script, hash,
 		)
 		includes = append(includes, include)

ui/src/api.js

@@ -0,0 +1,52 @@
+
+/**
+ * Alice public theming and extension API
+ */
+
+const apiFunc = () => {
+  let subs = [];
+  let props = [];
+
+  const apply = () => {
+    let called = false;
+    for (const sub of subs) {
+      for (const prop of props) {
+        sub(...prop);
+        called = true;
+      }
+    }
+    if (called) {
+      subs = [];
+    }
+  }
+
+  const call = (...params) => {
+    props.push(params);
+    apply();
+  };
+
+  const subscribe = (fn) => {
+    subs = [...subs, fn];
+    apply();
+  };
+
+  return ([
+    call, subscribe
+  ])
+}
+
+export const apiCallback = () => {
+  const [call, subscribe] = apiFunc();
+  const callback = (...args) => subscribe((fn) => fn(...args));
+  return [call, callback];
+}
+
+export const [updateContent, updateContentApi] = apiFunc();
+export const [onLayoutReady, onLayoutReadyApi] = apiCallback();
+
+const Api = {
+  updateContent,
+  onLayoutReady,
+};
+
+export default Api;

ui/src/app/components/page/Layout.js

@@ -4,6 +4,12 @@
  * and a content view in the middle.
  */
 
+import { useEffect, useRef }
+  from 'react';
+
+import { onLayoutReadyApi }
+  from 'api';
+
 import Content
   from 'app/components/content/Content';
 import Errors
@@ -11,12 +17,16 @@ import Errors
 import NavigationSidebar
   from 'app/components/navigation/Sidebar';
 
-
 const Layout = ({children}) => {
+  const pageRef = useRef();
+
+  useEffect(() => {
+    onLayoutReadyApi(pageRef.current);
+  }, [pageRef]);
 
   // Main Layout
   return (
-    <div className="page">
+    <div className="page" ref={pageRef}>
       <Errors />
       <NavigationSidebar />
       <div className="page-body">

ui/src/app/context/content.js

@@ -5,6 +5,8 @@ import { useState
        }
   from 'react';
 
+import { updateContentApi } from 'api';
+
 export const ContentContext = createContext({});
 
 export const useContent = () => useContext(ContentContext);
@@ -12,12 +14,9 @@ export const useContent = () => useContext(ContentContext);
 export const ContentProvider = ({children}) => {
   const [content, setContent] = useState({});
 
-  // Expose setContent as API??
   useEffect(() => {
-    if (!window.API) {
-      window.API = {};
-    }
-    window.API.setContent = setContent;
+    // Expose setContent in API
+    updateContentApi(setContent);
   }, [setContent]);
 
   return (

ui/src/index.js

@@ -11,6 +11,12 @@ import './scss/main.scss';
 import Main 
   from './app/Main';
 
+import Api
+  from './api'
+
+// Alice theme and extension API 
+window.Alice = Api;
+
 const root = createRoot(document.getElementById('app'));
 
 root.render(<Main />);