feat: centralize page content when gitako is open

This simplifies layout logic

src/components/Resizable.tsx

@@ -1,6 +1,5 @@
 import { HorizontalResizeHandler } from 'components/ResizeHandler'
 import { useConfigs } from 'containers/ConfigsContext'
-import { platform } from 'platforms'
 import * as React from 'react'
 import { useWindowSize } from 'react-use'
 import { cx } from 'utils/cx'
@@ -33,8 +32,6 @@ export function Resizable({ baseSize, className, children }: React.PropsWithChil
     configContext.set({ sideBarWidth: size })
   }, [size])
 
-  platform.useResizeStylesheets(size)
-
   const onResize = React.useCallback((size: number) => {
     if (size < window.innerWidth - MINIMAL_CONTENT_VIEWPORT_WIDTH) setSize(size)
   }, [])

src/content.scss

@@ -44,6 +44,8 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 }
 
 .with-gitako-spacing {
+  margin-left: var(--gitako-width);
+
   // gitee
   &.git-project {
     width: auto; // shrink width

src/platforms/GitHub/index.ts

@@ -2,9 +2,7 @@ import { GITHUB_OAUTH } from 'env'
 import { platform } from 'platforms'
 import * as React from 'react'
 import { useEvent } from 'react-use'
-import { bodySpacingClassName } from 'utils/DOMHelper'
 import { resolveGitModules } from 'utils/gitSubmodule'
-import { useMediaStyleSheet } from 'utils/hooks/useMediaStyleSheet'
 import { sortFoldersToFront } from 'utils/treeParser'
 import * as API from './API'
 import * as DOMHelper from './DOMHelper'
@@ -20,8 +18,8 @@ function parseTreeData(treeData: GitHubAPI.TreeData, metaData: MetaData) {
   const root: TreeNode = { name: '', path: '', contents: [], type: 'tree' }
   pathToNode.set('', root)
 
-  tree.forEach(item => pathToItem.set(item.path, item))
-  tree.forEach(item => {
+  tree.forEach((item) => pathToItem.set(item.path, item))
+  tree.forEach((item) => {
     // bottom-up search for the deepest node created
     let path = item.path
     const itemsToCreateTreeNode: GitHubAPI.TreeItem[] = []
@@ -116,7 +114,7 @@ export const GitHub: Platform = {
     const treeData = await API.getTreeData(userName, repoName, branchName)
     const root = parseTreeData(treeData, metaData)
 
-    const gitModules = root.contents?.find(item => item.name === '.gitmodules')
+    const gitModules = root.contents?.find((item) => item.name === '.gitmodules')
     if (gitModules) {
       if (metaData.userName && metaData.repoName && gitModules.sha) {
         const blobData = await API.getBlobData(
@@ -155,7 +153,6 @@ export const GitHub: Platform = {
     }
     return accessToken
   },
-  useResizeStylesheets,
   getOAuthLink() {
     const params = new URLSearchParams({
       client_id: GITHUB_OAUTH.clientId,
@@ -189,17 +186,3 @@ export function useGitHubAttachCopyFileButton(copyFileButton: boolean) {
   React.useEffect(attachCopyFileButton, [copyFileButton])
   useEvent('pjax:complete', attachCopyFileButton, window)
 }
-
-function useResizeStylesheets(size: number) {
-  const CONTENT_WIDTH = 1020
-  useMediaStyleSheet(
-    `.${bodySpacingClassName} { margin-left: calc(var(--gitako-width) * 2 + 1020px - 100vw); }`,
-    size => [`min-width: ${size + CONTENT_WIDTH}px`, `max-width: ${size * 2 + CONTENT_WIDTH}px`],
-    size,
-  )
-  useMediaStyleSheet(
-    `.${bodySpacingClassName} { margin-left: var(--gitako-width); }`,
-    size => [`max-width: ${size + CONTENT_WIDTH}px`],
-    size,
-  )
-}

src/platforms/Gitee/index.ts

@@ -2,9 +2,7 @@ import { GITEE_OAUTH } from 'env'
 import { platform } from 'platforms'
 import * as React from 'react'
 import { useEvent } from 'react-use'
-import { bodySpacingClassName } from 'utils/DOMHelper'
 import { resolveGitModules } from 'utils/gitSubmodule'
-import { useMediaStyleSheet } from 'utils/hooks/useMediaStyleSheet'
 import { sortFoldersToFront } from 'utils/treeParser'
 import * as API from './API'
 import * as DOMHelper from './DOMHelper'
@@ -20,8 +18,8 @@ function parseTreeData(treeData: GiteeAPI.TreeData, metaData: MetaData) {
   const root: TreeNode = { name: '', path: '', contents: [], type: 'tree' }
   pathToNode.set('', root)
 
-  tree.forEach(item => pathToItem.set(item.path, item))
-  tree.forEach(item => {
+  tree.forEach((item) => pathToItem.set(item.path, item))
+  tree.forEach((item) => {
     // bottom-up search for the deepest node created
     let path = item.path
     const itemsToCreateTreeNode: GiteeAPI.TreeItem[] = []
@@ -116,7 +114,7 @@ export const Gitee: Platform = {
     const treeData = await API.getTreeData(userName, repoName, branchName)
     const root = parseTreeData(treeData, metaData)
 
-    const gitModules = root.contents?.find(item => item.name === '.gitmodules')
+    const gitModules = root.contents?.find((item) => item.name === '.gitmodules')
     if (gitModules) {
       if (metaData.userName && metaData.repoName && gitModules.sha) {
         const blobData = await API.getBlobData(
@@ -140,7 +138,6 @@ export const Gitee: Platform = {
   getCurrentPath(branchName) {
     return URLHelper.getCurrentPath(branchName)
   },
-  useResizeStylesheets,
   getOAuthLink() {
     const params = new URLSearchParams({
       client_id: GITEE_OAUTH.clientId,
@@ -178,17 +175,3 @@ export function useGiteeAttachCopySnippetButton(copySnippetButton: boolean) {
   React.useEffect(attachCopySnippetButton, [copySnippetButton])
   useEvent('pjax:complete', attachCopySnippetButton, window)
 }
-
-function useResizeStylesheets(size: number) {
-  const CONTENT_WIDTH = 1040
-  useMediaStyleSheet(
-    `.${bodySpacingClassName} { margin-left: calc(var(--gitako-width) * 2 + ${CONTENT_WIDTH}px - 100vw); }`,
-    size => [`min-width: ${size + CONTENT_WIDTH}px`, `max-width: ${size * 2 + CONTENT_WIDTH}px`],
-    size,
-  )
-  useMediaStyleSheet(
-    `.${bodySpacingClassName} { margin-left: var(--gitako-width); }`,
-    size => [`max-width: ${size + CONTENT_WIDTH}px`],
-    size,
-  )
-}

src/platforms/dummyPlatformForTypeSafety.ts

@@ -9,7 +9,6 @@ export const dummyPlatformForTypeSafety: Platform = {
   },
   getCurrentPath: dummyPlatformMethod,
   setOAuth: dummyPlatformMethod,
-  useResizeStylesheets: dummyPlatformMethod,
   getOAuthLink: dummyPlatformMethod,
 }
 

src/platforms/platform.d.ts

@@ -4,7 +4,6 @@ type Platform = {
   getTreeData(metaData: MetaData, accessToken?: string): Promise<TreeNode>
   shouldShow(metaData?: Partial<MetaData>): boolean
   getCurrentPath(branchName: string): string[] | null
-  useResizeStylesheets(size: number): void
   setOAuth(code: string): Promise<string | null>
   getOAuthLink(): string
 }