refactor: activate styles according to platform

src/components/SideBar.tsx

@@ -34,7 +34,7 @@ import { SideBarResizeHandler } from './SideBarResizeHandler'
 export function SideBar() {
   usePJAXAPI()
   platform.usePlatformHooks?.()
-  useMarkGitakoReadyState()
+  useMarkGitakoGlobalAttributes()
 
   const error = useLoadedContext(SideBarErrorContext).value
 
@@ -181,7 +181,12 @@ function useFocusSidebarOnExpand(shouldExpand: boolean) {
   }, [shouldExpand])
 }
 
-function useMarkGitakoReadyState() {
+function useMarkGitakoGlobalAttributes() {
+  React.useEffect(() => {
+    const detach = DOMHelper.attachStickyGitakoPlatform()
+    DOMHelper.markGitakoPlatform()
+    return () => detach()
+  }, [])
   React.useEffect(() => {
     const detach = DOMHelper.attachStickyGitakoReadyState()
     DOMHelper.markGitakoReadyState(true)

src/styles/clippy.scss

@@ -31,3 +31,15 @@
     }
   }
 }
+
+// TODO: use react to render the button content and set color with CSS variables
+@media (prefers-color-scheme: dark) {
+  :root[data-color-mode='auto'] .markdown-body .clippy .icon {
+    filter: invert(0.7); // hack to make it looks like a normal color :P
+  }
+}
+:root[data-color-mode='dark'] {
+  .markdown-body .clippy .icon {
+    filter: invert(0.7); // hack to make it looks like a normal color :P
+  }
+}

src/styles/code-folding.scss

@@ -1,4 +1,4 @@
-@mixin github-code-folding {
+@mixin code-folding {
   .blob-wrapper table .blob-num {
     position: relative; // for positioning
     min-width: 60px;

src/styles/gitee.scss

@@ -1,51 +1,47 @@
-$name: gitako; // duplicated
 $gitee-header-z-index: 1002;
 
-[data-#{$name}-ready='true'] {
-  &.git-project {
-    #git-header-nav {
-      position: static;
-      padding-left: 0;
-      padding-right: 0;
+@mixin gitee($name) {
+  [data-gitako-platform='Gitee'] {
+    &[data-#{$name}-ready='true'] {
+      #git-header-nav {
+        position: static;
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      // reset styles
+      .#{$name}-side-bar {
+        input[type='text'],
+        input[type='password'],
+        .ui-autocomplete-input,
+        textarea,
+        .uneditable-input {
+          padding: initial;
+          border: none;
+        }
+      }
+
+      padding-top: 0;
+
+      .#{$name}-side-bar {
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          margin: 0;
+        }
+      }
     }
 
-    padding-top: 0;
-
-    .#{$name}-side-bar {
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        margin: 0;
+    &[data-with-gitako-spacing='true'] {
+      body {
+        width: auto; // shrink width
+        .site-content {
+          min-width: 1040px;
+        }
       }
     }
   }
 }
-
-html[data-with-gitako-spacing='true'] {
-  body {
-    &.git-project {
-      width: auto; // shrink width
-      .site-content {
-        min-width: 1040px;
-      }
-    }
-  }
-}
-
-// gitee
-.git-project {
-  // reset styles
-  .#{$name}-side-bar {
-    input[type='text'],
-    input[type='password'],
-    .ui-autocomplete-input,
-    textarea,
-    .uneditable-input {
-      padding: initial;
-      border: none;
-    }
-  }
-}

src/styles/github.scss

@@ -0,0 +1,9 @@
+@mixin github($github-content-width) {
+  [data-gitako-platform='GitHub'] {
+    @media (min-width: $github-content-width) {
+      body {
+        min-width: $github-content-width;
+      }
+    }
+  }
+}

src/styles/index.scss

@@ -6,6 +6,7 @@
 @import './code-folding.scss';
 @import './clippy.scss';
 @import './gitee.scss';
+@import './github.scss';
 @import './keyframes.scss';
 
 $name: gitako;
@@ -32,7 +33,7 @@ $minimal-z-index: max(
 }
 
 [data-#{$name}-ready='true'] {
-  @include github-code-folding;
+  @include code-folding;
 
   .markdown-body {
     @include clippy;
@@ -47,24 +48,9 @@ html[data-with-gitako-spacing='true'] {
   }
 }
 
-@media (min-width: $github-content-width) {
-  // github
-  body.env-production {
-    min-width: $github-content-width;
-  }
-}
-
-// TODO: use react to render the button content and set color with CSS variables
-@media (prefers-color-scheme: dark) {
-  :root[data-color-mode='auto'] .markdown-body .clippy .icon {
-    filter: invert(0.7); // hack to make it looks like a normal color :P
-  }
-}
-:root[data-color-mode='dark'] {
-  .markdown-body .clippy .icon {
-    filter: invert(0.7); // hack to make it looks like a normal color :P
-  }
-}
+// platform-specific overrides
+@include gitee($name);
+@include github($github-content-width);
 
 .progress-pjax-loader.is-loading {
   left: 0; /* reposition progress bar of GitHub */
@@ -591,7 +577,7 @@ html[data-with-gitako-spacing='true'] {
       }
     }
 
-    .gitako-footer {
+    .#{$name}-footer {
       flex-shrink: 0;
       display: flex;
       justify-content: space-between;

src/utils/DOMHelper.ts

@@ -2,6 +2,7 @@
  * this helper helps manipulating DOM
  */
 
+import { platformName } from 'platforms'
 import { $ } from './$'
 
 export const rootElementID = 'gitako-root'
@@ -61,6 +62,19 @@ export function markGitakoReadyState(ready: boolean) {
   return gitakoDescriptionTarget.setAttribute(readyDataAttributeName, `${ready}`)
 }
 
+/**
+ * indicate current platform to activate specific CSS styles
+ */
+const platformDataAttributeName = 'data-gitako-platform'
+export const attachStickyGitakoPlatform = () =>
+  attachStickyDataAttribute(gitakoDescriptionTarget, platformDataAttributeName, () =>
+    markGitakoPlatform(),
+  )
+export function markGitakoPlatform() {
+  if (platformName)
+    return gitakoDescriptionTarget.setAttribute(platformDataAttributeName, platformName)
+}
+
 /**
  * if should show gitako, then move body right to make space for showing gitako
  * otherwise, hide the space