Configure new theme when changing theme.

Author: ibz

admin/index.html

@@ -101,7 +101,13 @@
             themes.sort((a, b) => a.name.localeCompare(b.name));
         }
 
-        async function saveConfig(themes, desiredThemeId) {
+        async function getExtraConfig(themeId) {
+            let endpoint = `${getApiBaseUrl()}/api/themes/${themeId}`;
+            let res = await fetch(new URL(endpoint));
+            return (await res.json())['extra_config'];
+        }
+
+        async function saveConfig(themes, desiredThemeId, themeExtraConfig) {
             let endpoint = `${getApiBaseUrl()}/api/config`;
             let headers = {
                 ...{
@@ -114,7 +120,7 @@
             let response = await fetch(endpoint, {
                 method: 'PUT',
                 headers: headers,
-                body: JSON.stringify({ theme: desiredThemeId }),
+                body: JSON.stringify({ theme: desiredThemeId, extra_config: themeExtraConfig }),
             });
             if (response.ok) {
                 for (let theme of themes) {
@@ -174,21 +180,36 @@ <h2 class="card-title" x-text="site.domain"></h2>
             </div>
         </template>
         <template x-if="host">
-            <div class="w-full mx-auto" x-data="{themes: []}" x-init="await getConfig(themes);">
+            <div class="w-full mx-auto" x-data="{themes: [], theme: null, themeExtraConfig: ''}"
+                x-init="await getConfig(themes);">
                 <div>
+                    <dialog id="themeExtraConfigModal" class="modal">
+                        <div class="modal-box">
+                            <form method="dialog">
+                                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+                                <h3 class="text-lg font-bold">Configure theme</h3>
+                                <p class="py-4">
+                                    <textarea class="textarea textarea-bordered w-full h-80" x-model="themeExtraConfig">
+                                    </textarea>
+                                </p>
+                                <button class="btn btn-primary"
+                                    x-on:click="await saveConfig(themes, theme.id, themeExtraConfig);">Ok</button>
+                            </form>
+                        </div>
+                    </dialog>
                     <div class="mt-12">
                         <div class="w-full mt-24">
                             <div class="flex flex-wrap gap-4">
-                                <template x-for="theme in themes">
-                                    <div :class="theme.selected ? 'bg-primary text-primary-content' : 'bg-neutral text-neutral-content'"
+                                <template x-for="t in themes">
+                                    <div :class="t.selected ? 'bg-primary text-primary-content' : 'bg-neutral text-neutral-content'"
                                         class="card w-96 card-xs shadow-sm">
                                         <div class="card-body">
-                                            <h2 class="card-title" x-text="theme.name"></h2>
-                                            <p x-text="theme.description"></p>
-                                            <p>License: <span x-text="theme.license"></span></p>
+                                            <h2 class="card-title" x-text="t.name"></h2>
+                                            <p x-text="t.description"></p>
+                                            <p>License: <span x-text="t.license"></span></p>
                                             <div class="justify-end card-actions">
-                                                <button :class="{'btn-primary': !theme.selected}" class="btn"
-                                                    x-on:click="await saveConfig(themes, theme.id);">Select</button>
+                                                <button :class="{'btn-primary': !t.selected}" class="btn"
+                                                    x-on:click="theme = t; themeExtraConfig = await getExtraConfig(t.id); themeExtraConfigModal.showModal();">Select</button>
                                             </div>
                                         </div>
                                     </div>

src/main.rs

@@ -93,6 +93,7 @@ struct PostSiteRequestBody {
 #[derive(Deserialize, Serialize)]
 struct PutSiteConfigRequestBody {
     theme: String,
+    extra_config: Option<String>,
 }
 
 #[derive(Deserialize, Serialize)]
@@ -685,10 +686,27 @@ async fn handle_put_site_config(mut request: Request<State>) -> tide::Result<Res
 
     let old_theme = config.theme;
 
+    let body: PutSiteConfigRequestBody = request.body_json().await?;
+
+    config.theme = body.theme;
+
+    if let Some(extra_config) = body.extra_config {
+        match toml::from_str(&extra_config) {
+            Ok(extra_config) => {
+                config = config.with_extra(extra_config, true);
+            }
+            Err(_) => {
+                return Err(tide::Error::from_str(
+                    StatusCode::BadRequest,
+                    "Cannot parse theme config",
+                ));
+            }
+        };
+    }
+
     // NB: we need to load config from the file rather than using the one already loaded,
     // which is already merged with the theme's config! That means... we need to save it first!
     // TODO: How can this be improved?
-    config.theme = request.body_json::<PutSiteConfigRequestBody>().await?.theme;
     site::save_config(&config_path, &config)?;
 
     let Ok(themes) = request.state().themes.read() else {
@@ -1087,7 +1105,7 @@ fn validate_themes(
         let mut empty_site = Site::empty(&theme_id);
         match toml::from_str(&theme.extra_config) {
             Ok(extra_config) => {
-                empty_site.config = empty_site.config.with_extra(extra_config);
+                empty_site.config = empty_site.config.with_extra(extra_config, false);
             }
             Err(e) => {
                 log::warn!("Failed to load theme extra config {}: {}", theme_id, e);

src/site.rs

@@ -90,8 +90,15 @@ impl SiteConfig {
         Self { pubkey, ..self }
     }
 
-    pub fn with_extra(mut self, extra_config: HashMap<String, toml::Value>) -> Self {
+    pub fn with_extra(
+        mut self,
+        extra_config: HashMap<String, toml::Value>,
+        overwrite: bool,
+    ) -> Self {
         for (k, v) in &extra_config {
+            if overwrite && self.extra.contains_key(k) {
+                self.extra.remove(k);
+            }
             if !self.extra.contains_key(k) {
                 self.extra.insert(k.to_string(), v.clone());
             }
@@ -539,7 +546,7 @@ pub fn load_site(
 
     if let Some(theme) = themes.get(&config.theme) {
         let extra_config: HashMap<String, toml::Value> = toml::from_str(&theme.extra_config)?;
-        config = config.with_extra(extra_config);
+        config = config.with_extra(extra_config, false);
     }
 
     let mut site = Site {