feat(directory): performance and style optimization

directory/src/App.css

@@ -4,6 +4,7 @@
 
 :root {
   --text-color: rgba(255, 255, 255, 0.87);
+  --secondary-text-color: #686a72;
   --date-color: rgba(255, 255, 255, 0.2);
   --border-color: #707070;
   --link-highlight-color: #33b5e5;
@@ -16,16 +17,12 @@
 
   font-family: "Geometos", "Noto Sans SC", sans-serif;
   font-size: 16px;
-  line-height: 24px;
+  line-height: 1.1em;
   font-weight: 400;
 
   color: var(--text-color);
   background-color: var(--root-background-color);
   min-height: 100vh;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-
 }
 
 #root {

directory/src/component/main_border.jsx

@@ -2,6 +2,8 @@ import './main_border.css';
 
 export default function MainBorder(props) {
   return (
-    <section className="main-border"/>
+    <section className="main-border">
+      {props.children}
+    </section>
   )
 }

directory/src/component/popup.css

@@ -41,18 +41,18 @@
 .popup .title {
     font-size: 3rem;
     font-weight: 700;
-    border-bottom: 1px solid var(--border-color);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-content: center;
     align-items: center;
-    padding-bottom: 1rem;
+    text-transform: uppercase;
+    font-family: "Geometos", "Noto Sans SC", sans-serif;
 }
 
 .popup .content {
-  line-height: 1.5rem;
+  line-height: 1.3em;
-  padding: 1rem;
+  padding: 1rem 1rem 0 1rem;
 }
 
 .popup .overlay {

directory/src/component/popup.jsx

@@ -4,6 +4,7 @@ import {
 } from 'react'
 import './popup.css'
 import ReturnButton from '@/component/return_button';
+import MainBorder from '@/component/main_border';
 
 export default function Popup(props) {
   const [hidden, setHidden] = useState(true)
@@ -20,6 +21,7 @@ export default function Popup(props) {
             <span>{props.title}</span>
             <ReturnButton onClick={toggle} className="return-button"/>
           </section>
+          <MainBorder/>
           <section className='content'>
             {props.children}
           </section>

directory/src/context/useConfigContext.jsx

@@ -3,7 +3,7 @@ import { createContext, useState, useEffect } from "react"
 export const ConfigContext = createContext()
 
 export function ConfigProvider(props) {
-  const [config, setConfig] = useState(null)
+  const [config, setConfig] = useState([])
 
   useEffect(() => {
     fetch("/_assets/directory.json").then(res => res.json()).then(data => {

directory/src/routes/path/home.css

@@ -24,8 +24,16 @@
     background-image: repeating-linear-gradient(90deg, var(--home-item-background-linear-gradient-color) 0, var(--home-item-background-linear-gradient-color) 1px, transparent 1px, transparent 5px);
 }
 
+.home .item-group .item .item-background-filler {
+    border-right: 1px solid var(--home-item-background-linear-gradient-color);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: -1px;
+    bottom: 0;
+}
+
 .home .item-group .item .item-outline {
-    content: "";
     display: block;
     position: absolute;
     opacity: 0;
@@ -94,20 +102,23 @@
     font-weight: bold;
 }
 
-.home .item-group .item .item-info .item-title-container .item-title,
+.home .item-group .item .item-info .item-title-container .item-title {
-.home .item-group .item .item-info .item-text-wrapper {
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
+.home .item-group .item .item-info .item-title-container .item-title {
+    line-height: 1.1em;
+    height: 1.25rem;
+}
+
 .home .item-group .item .item-info .item-title-container .item-type {
     width: 1.5rem;
     fill: var(--text-color)
 }
 
 .home .item-group .item .item-info .item-text {
-    color: var(--text-color);
     font-size: 0.75rem;
     font-family: "Geometos";
     margin-top: 1rem; 
@@ -123,4 +134,10 @@
     visibility: hidden;
     transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
     background-image: linear-gradient(70deg, transparent 40%, currentColor 150%);
+}
+
+.home .item-group .item .item-info .item-text-wrapper {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--secondary-text-color);
 }

directory/src/routes/path/home.jsx

@@ -19,7 +19,7 @@ export default function Home() {
   const _trackEvt = useUmami('/')
   const {
     setTitle,
-    setTabs,
+    tabs, setTabs,
     currentTab, setCurrentTab } = useContext(HeaderContext)
   const { config } = useContext(ConfigContext)
   const {
@@ -28,6 +28,7 @@ export default function Home() {
     alternateLang,
     i18n
   } = useContext(LanguageContext)
+  const [content, setContent] = useState([])
 
   useEffect(() => {
     setTitle('dynamic_compile')
@@ -46,70 +47,63 @@ export default function Home() {
     setCurrentTab('all')
   }, [])
 
-  const renderContent = () => {
+  useEffect(() => {
-    const list = config?.filter((v) => currentTab === 'all' || currentTab === v.type)
+    const value = config.reduce((acc, cur) => {
-    const content = []
+      const date = cur.date
-    if (list) {
+      if (acc[date]) {
-      console.log(list)
+        acc[date].push(cur)
-      let items = {}
+      } else {
-      list.forEach(element => {
+        acc[date] = [cur]
-        if (items[element.date]) {
-          items[element.date].push(toItemEl(element))
-        } else {
-          items[element.date] = [toItemEl(element)]
-        }
-      });
-      items = Object.keys(items).sort().reverse().reduce((r, k) => {
-        r[k] = items[k]
-        return r
-      }, {})
-      for (const [date, group] of Object.entries(items)) {
-        content.push(
-          <section className="item-group-wrapper" key={date}>
-            <section className="item-group">
-              {group.map((v) => v)}
-              <section className='item-group-date'>{date}</section>
-            </section>
-            <MainBorder />
-          </section>
-        )
       }
-    }
+      return acc
-    return content
+    }, {})
-  }
+    setContent(Object.values(value).sort((a, b) => new Date(b[0].date) - new Date(a[0].date)))
-  const toItemEl = (item) => {
+  }, [config])
-    return (
+
-      <Link reloadDocument to={`/${item.link}`} className="item" key={item.link}>
+  const isShown = (type) => currentTab === 'all' || currentTab === type
-        <section className="item-outline"/>
-        <section className="item-img">
-          <img src={`/${item.link}/assets/${item.fallback_name.replace("#", "%23")}_portrait.png`} alt={item.codename[language]} />
-        </section>
-        <section className="item-info">
-          <section className="item-title-container">
-            <section className="item-title">{item.codename[language]}</section>
-            <section className="item-type">
-              <CharIcon
-                type={item.type}
-                viewBox={ 
-                  item.type === 'operator' ? '0 0 88.969 71.469' : '0 0 94.563 67.437'
-                } />
-            </section>
-          </section>
-          <section className="item-text-wrapper">
-            <span className='item-text'>{item.codename[language.startsWith("en") ? alternateLang : textDefaultLang]}</span>
-          </section>
-          <section className="item-info-background" style={{
-            color: item.color
-          }} />
-        </section>
-      </Link>
-    )
-  }
-  const content = useMemo(() => renderContent(), [currentTab, config, language])
 
   return (
     <section className="home">
-      {content}
+      {
+        content.map((v) => {
+          const length = v.filter((v) => isShown(v.type)).length
+          return (
+            <section className="item-group-wrapper" key={v[0].date} hidden={length === 0}>
+              <section className="item-group">
+                {v.map(item => {
+                  return (<Link reloadDocument to={`/${item.link}`} className="item" key={item.link} hidden={!isShown(item.type)}>
+                    <section className="item-background-filler" />
+                    <section className="item-outline" />
+                    <section className="item-img">
+                      <img src={`/${item.link}/assets/${item.fallback_name.replace("#", "%23")}_portrait.png`} alt={item.codename[language]} />
+                    </section>
+                    <section className="item-info">
+                      <section className="item-title-container">
+                        <section className="item-title">{item.codename[language]}</section>
+                        <section className="item-type">
+                          <CharIcon
+                            type={item.type}
+                            viewBox={
+                              item.type === 'operator' ? '0 0 88.969 71.469' : '0 0 94.563 67.437'
+                            } />
+                        </section>
+                      </section>
+                      <section className="item-text-wrapper">
+                        <span className='item-text'>{item.codename[language.startsWith("en") ? alternateLang : textDefaultLang]}</span>
+                      </section>
+                      <section className="item-info-background" style={{
+                        color: item.color
+                      }} />
+                    </section>
+                  </Link>)
+                })}
+                <section className='item-group-date'>{v[0].date}</section>
+              </section>
+              <MainBorder />
+            </section>
+          )
+        })
+      }
     </section>
   )
 }

directory/src/routes/root.css

@@ -140,6 +140,7 @@
   font-size: 3rem;
   font-weight: 700;
   text-transform: uppercase;
+  line-height: 1.1em;
 }
 
 .main .main-header .main-tab {
@@ -150,7 +151,7 @@
 
 .main .main-header .main-tab .main-tab-item {
     font-size: 1em;
-    line-height: 3rem;
+    line-height: 3em;
     font-weight: 700;
     padding: 0 1rem;
     text-transform: uppercase;
@@ -164,15 +165,21 @@
     border-bottom-color: var(--link-highlight-color);
 }
 
-.main .main-header .return-button {
+.main .return-button {
     position: absolute;
     right: -4rem;
-    bottom: -1.5rem;
+    bottom: -24px;
     color: #666;
     transition: color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
 }
 
-.main .main-header .return-button:hover {
+@media (max-width: 768px) {
+    .main .main-header .return-button {
+        right: -3.4rem;
+    }
+}
+
+.main .return-button:hover {
     color: var(--text-color);
 }
 

directory/src/routes/root.jsx

@@ -141,14 +141,15 @@ export default function Root(props) {
           <section className='main-tab'>
             {headerTabs}
           </section>
-          <ReturnButton 
+        </section>
+        <MainBorder>
+          <ReturnButton
             className='return-button'
             onClick={() => {
               navigate("/")
             }}
           />
-        </section>
+        </MainBorder>
-        <MainBorder />
         <Outlet />
       </main>
       <footer className='footer'>