fix: admin/themes add layout config

Author: shuai

cmd/wire_gen.go

@@ -1,22 +1,3 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
 // Package docs Code generated by swaggo/swag. DO NOT EDIT
 package docs
 

docs/docs.go

@@ -1,20 +1,3 @@
-# Licensed to the Apache Software Foundation (ASF) under one
-# or more contributor license agreements.  See the NOTICE file
-# distributed with this work for additional information
-# regarding copyright ownership.  The ASF licenses this file
-# to you under the Apache License, Version 2.0 (the
-# "License"); you may not use this file except in compliance
-# with the License.  You may obtain a copy of the License at
-#
-#   http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing,
-# software distributed under the License is distributed on an
-# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-# KIND, either express or implied.  See the License for the
-# specific language governing permissions and limitations
-# under the License.
-
 basePath: /
 definitions:
   constant.NotificationChannelKey:

docs/swagger.yaml

@@ -2186,6 +2186,10 @@ ui:
       primary_color:
         label: Primary color
         text: Modify the colors used by your themes
+      layout:
+        label: Layout
+        full_width: Full-width
+        fixed_width: Fixed-width
     css_and_html:
       page_title: CSS and HTML
       custom_css:

i18n/en_US.yaml

@@ -469,6 +469,7 @@ export type themeConfig = {
 export interface AdminSettingsTheme {
   theme: string;
   color_scheme: string;
+  layout: string;
   theme_options?: { label: string; value: string }[];
   theme_config: Record<string, themeConfig>;
 }

internal/service/mock/siteinfo_repo_mock.go

@@ -18,6 +18,7 @@
  */
 
 import { FC, memo, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 
 import { customizeStore } from '@/stores';
 
@@ -117,6 +118,8 @@ const Index: FC = () => {
   const { custom_head, custom_header, custom_footer } = customizeStore(
     (state) => state,
   );
+  const { pathname } = useLocation();
+
   useEffect(() => {
     const isSeo = document.querySelector('meta[name="go-template"]');
     if (!isSeo) {
@@ -125,8 +128,41 @@ const Index: FC = () => {
       }, 1000);
       handleCustomHeader(custom_header);
       handleCustomFooter(custom_footer);
+    } else {
+      isSeo.remove();
     }
   }, [custom_head, custom_header, custom_footer]);
+
+  useEffect(() => {
+    /**
+     * description:  Activate scripts with data-client attribute when route changes
+     */
+    const allScript = document.body.querySelectorAll('script[data-client]');
+    console.log('allScript', allScript);
+    allScript.forEach((scriptNode) => {
+      const script = document.createElement('script');
+      script.setAttribute('data-client', 'true');
+      // If the script is already wrapped in an IIFE, use it directly; otherwise, wrap it in an IIFE
+      if (
+        /^\s*\(\s*function\s*\(\s*\)\s*{/.test(
+          (scriptNode as HTMLScriptElement).text,
+        ) ||
+        /^\s*\(\s*\(\s*\)\s*=>\s*{/.test((scriptNode as HTMLScriptElement).text)
+      ) {
+        script.text = (scriptNode as HTMLScriptElement).text;
+      } else {
+        script.text = `(() => {${(scriptNode as HTMLScriptElement).text}})();`;
+      }
+      for (let i = 0; i < scriptNode.attributes.length; i += 1) {
+        const attr = scriptNode.attributes[i];
+        if (attr.name !== 'data-client') {
+          script.setAttribute(attr.name, attr.value);
+        }
+      }
+      scriptNode.parentElement?.replaceChild(script, scriptNode);
+    });
+  }, [pathname]);
+
   return null;
 };
 

ui/src/common/interface.ts

@@ -83,7 +83,7 @@ const Header: FC = () => {
 
   let navbarStyle = 'theme-light';
   let themeMode = 'light';
-  const { theme, theme_config } = themeSettingStore((_) => _);
+  const { theme, theme_config, layout } = themeSettingStore((_) => _);
   if (theme_config?.[theme]?.navbar_style) {
     // const color = theme_config[theme].navbar_style.startsWith('#')
     themeMode = isLight(theme_config[theme].navbar_style) ? 'light' : 'dark';
@@ -113,7 +113,11 @@ const Header: FC = () => {
         backgroundColor: theme_config[theme].navbar_style,
       }}
       id="header">
-      <div className="w-100 d-flex align-items-center px-3">
+      <div
+        className={classnames(
+          'w-100 d-flex align-items-center px-3',
+          layout === 'Fixed-width' ? 'container-xxl' : '',
+        )}>
         <Navbar.Toggle
           className="answer-navBar me-2"
           onClick={() => {

ui/src/components/Customize/index.tsx

@@ -46,6 +46,13 @@ const Index: FC = () => {
         enumNames: themeSetting?.theme_options?.map((_) => _.label),
         default: themeSetting?.theme_options?.[0]?.value,
       },
+      layout: {
+        type: 'string',
+        title: t('layout.label'),
+        enum: ['Full-width', 'Fixed-width'],
+        enumNames: [t('layout.full_width'), t('layout.fixed_width')],
+        default: themeSetting?.layout,
+      },
       color_scheme: {
         type: 'string',
         title: t('color_scheme.label'),
@@ -77,6 +84,9 @@ const Index: FC = () => {
     color_scheme: {
       'ui:widget': 'select',
     },
+    layout: {
+      'ui:widget': 'select',
+    },
     navbar_style: {
       'ui:widget': 'input_group',
       'ui:options': {
@@ -131,6 +141,7 @@ const Index: FC = () => {
     const reqParams: Type.AdminSettingsTheme = {
       theme: themeName,
       color_scheme: formData.color_scheme.value,
+      layout: formData.layout.value,
       theme_config: {
         [themeName]: {
           navbar_style: formData.navbar_style.value,