Feat/update header (#559)

* chore: update header

* chore: update header

* chore: update header

* chore: update header

* feat: support iframe theme sync with main site

* chore: landingpage use  button instead of div

* chore: update header

* fix: script add fefer

* chore: add header process env

* chore: add header process env

Co-authored-by: zwlafk <[email protected]>
Co-authored-by: DaiQiangReal <[email protected]>

gatsby-node.js

@@ -176,7 +176,8 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) =>
             ],
         },
         plugins: [plugins.extractText(),plugins.define({
-            "THEME_SWITCHER_URL":JSON.stringify(process.env['THEME_SWITCHER_URL'])
+            "THEME_SWITCHER_URL":JSON.stringify(process.env['THEME_SWITCHER_URL']),
+            'process.env.SEMI_SITE_HEADER':JSON.stringify(process.env.SEMI_SITE_HEADER)
         })],
     });
 };

package.json

@@ -40,7 +40,7 @@
   "dependencies": {
     "@douyinfe/semi-site-banner": "0.0.1",
     "@douyinfe/semi-site-doc-style": "0.0.1",
-    "@douyinfe/semi-site-header": "0.0.3",
+    "@douyinfe/semi-site-header": "0.0.6-alpha.3",
     "@douyinfe/semi-site-markdown-blocks": "0.0.1",
     "@mdx-js/react": "^1.6.22",
     "@svgr/core": "^5.5.0",

src/html.js

@@ -156,9 +156,9 @@ export default function HTML(props) {
                 <meta httpEquiv="x-ua-compatible" content="ie=edge" />
                 <meta name="viewport" content="width=1440, initial-scale=0, shrink-to-fit=no" />
                 <script src="https://lf1-cdn-tos.bytescm.com/goofy/semi_convenience/semi-analyze.js" />
-                {/*{*/}
-                {/*    THEME_SWITCHER_URL?<script src={THEME_SWITCHER_URL}/>:<script src="https://unpkg.byted-static.com/latest/ies/semi-theme-switcher-opensource/dist/semi-theme-switcher.js"/>*/}
-                {/*}*/}
+                {
+                    THEME_SWITCHER_URL?<script src={THEME_SWITCHER_URL} defer={true}/>:<script src="https://unpkg.byted-static.com/latest/ies/semi-theme-switcher-opensource/dist/semi-theme-switcher.js" defer={true}/>
+                }
                 <link rel="icon" href="https://lf9-static.semi.design/obj/semi-tos/images/favicon.ico" />
                 <script dangerouslySetInnerHTML={{ __html: `(${darkmodeProcesser.toString()})()` }} />
                 {props.headComponents}

src/sitePages/newHome/components/banner/banner.jsx

@@ -24,8 +24,8 @@ function Banner() {
                     </div>
                     <div className={styles.group2835}>
                         <Button onClick={goStart} size="large" theme="solid" className={styles.extraLarge}>{_t("start_using", { }, "开始使用")}</Button>
-                        <div onClick={goGithub} className={styles.buttonSecondarySolid_4427b030} role="button" tabIndex={0}><IconGithubLogo size="extra-large" /><p className={styles.text_bff7eaeb}>GitHub</p>
-                        </div>
+                        <Button onClick={goGithub}  size="large" type={'tertiary'} theme="borderless" style={{border:'1px solid var(--semi-color-border)',color:'var(--semi-color-text-0)',marginLeft:'16px'}} className={styles.extraLarge}  icon={<IconGithubLogo size={'large'}/>}>GitHub</Button>
+
                     </div>
                 </div>
                 <div className={styles.autoWrapper_4fa00029}>

src/templates/toUEDUtils/toUED.ts

@@ -51,6 +51,8 @@ const transContent=(site:'main'|'design')=>{
                 try {
                     const data=JSON.parse(e.data);
                     if (data['scrollHeight']){
+                        // @ts-ignore
+                        window.syncThemeToIframe && window.syncThemeToIframe();
                         iframeDOM.style['height']=`${data['scrollHeight']}px`;
                         iframeContainer.style['height']=`${data['scrollHeight']}px`;
                         console.log('height===>',data['scrollHeight']);

yarn.lock

@@ -1676,13 +1676,14 @@
   resolved "https://registry.npmjs.org/@douyinfe/semi-site-doc-style/-/semi-site-doc-style-0.0.1.tgz#c3c803014218ec00441dac32db9a875f6222ed0b"
   integrity sha512-y7Jc1i9q/O2idfaqckSJvghpt4AboQJgZ4iTEK8UMqjQkyWmb5I/NRzVWjOP9S0LEbJNs76OKfZil7DwsOmY/A==
 
-"@douyinfe/[email protected]":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-site-header/-/semi-site-header-0.0.3.tgz#3cf22161d70101e9191e28738242254601d17e81"
-  integrity sha512-pRDwL701g3KQIueTh5mNg/uUK9JJLUfFzC7g7I8k7MSZ8KxtaqdrNqZkulBJY2Cchd3De7UY1aVi4q8bNp0A4A==
+"@douyinfe/[email protected].6-alpha.3":
+  version "0.0.6-alpha.3"
+  resolved "https://registry.yarnpkg.com/@douyinfe/semi-site-header/-/semi-site-header-0.0.6-alpha.3.tgz#b3f6943ca340c97556ada9ef1886b52485e21db5"
+  integrity sha512-tRE9AXguPWt6mkkCCgTm0DflnC2k+GrX87DmDUuLrxp1M8c0t5DoLoTONc0Jwme0M+fHVsJqqCC/cto8os71zQ==
   dependencies:
     "@douyinfe/semi-icons" "2.0.0"
     "@douyinfe/semi-ui" "2.0.0"
+    axios "^0.23.0"
     chroma-js "^2.1.0"
     classnames "^2.3.1"
     i18next "^21.3.2"