chore: rename section to column

shared/data.ts

@@ -1,6 +1,6 @@
 import type { Metadata } from "./types"
 
-export const sectionIds = ["focus", "realtime", "hottest", "china", "world", "tech", "finance"] as const
+export const columnIds = ["focus", "realtime", "hottest", "china", "world", "tech", "finance"] as const
 
 export const metadata: Metadata = {
   focus: {

shared/types.ts

@@ -1,5 +1,5 @@
 import type { colors } from "unocss/preset-mini"
-import type { sectionIds } from "./data"
+import type { columnIds } from "./data"
 import type { originSources } from "./sources"
 
 export type Color = Exclude<keyof typeof colors, "current" | "inherit" | "transparent" | "black" | "white">
@@ -14,8 +14,8 @@ export type SourceID = {
   } | Key : Key;
 }[MainSourceID]
 
-export type SectionID = (typeof sectionIds)[number]
+export type ColumnID = (typeof columnIds)[number]
-export type Metadata = Record<SectionID, Section>
+export type Metadata = Record<ColumnID, Section>
 
 export interface OriginSource {
   name: string

src/atoms.ts

@@ -1,12 +1,12 @@
 import { atom } from "jotai"
-import type { SectionID, SourceID } from "@shared/types"
+import type { ColumnID, SourceID } from "@shared/types"
 import { metadata } from "@shared/data"
 import { sources } from "@shared/sources"
 import { typeSafeObjectEntries, typeSafeObjectFromEntries } from "@shared/type.util"
 import { atomWithLocalStorage } from "./hooks/atomWithLocalStorage"
 
 const initialSources = typeSafeObjectFromEntries(typeSafeObjectEntries(metadata).map(([id, val]) => [id, val.sources]))
-export const localSourcesAtom = atomWithLocalStorage<Record<SectionID, SourceID[]>>("localsources", () => {
+export const localSourcesAtom = atomWithLocalStorage<Record<ColumnID, SourceID[]>>("localsources", () => {
   return initialSources
 }, (stored) => {
   return typeSafeObjectFromEntries(typeSafeObjectEntries({
@@ -45,16 +45,16 @@ function initRefetchSources() {
 
 export const refetchSourcesAtom = atom(initRefetchSources())
 
-export const currentSectionIDAtom = atom<SectionID>("focus")
+export const currentColumnIDAtom = atom<ColumnID>("focus")
 
-export const currentSectionAtom = atom((get) => {
+export const currentColumnAtom = atom((get) => {
-  const id = get(currentSectionIDAtom)
+  const id = get(currentColumnIDAtom)
   return get(localSourcesAtom)[id]
 }, (get, set, update: Update<SourceID[]>) => {
-  const _ = update instanceof Function ? update(get(currentSectionAtom)) : update
+  const _ = update instanceof Function ? update(get(currentColumnAtom)) : update
   set(localSourcesAtom, {
     ...get(localSourcesAtom),
-    [get(currentSectionIDAtom)]: _,
+    [get(currentColumnIDAtom)]: _,
   })
 })
 

src/components/column/dnd.tsx

@@ -17,10 +17,10 @@ import { CSS } from "@dnd-kit/utilities"
 import { motion } from "framer-motion"
 import type { ItemsProps } from "./card"
 import { CardOverlay, CardWrapper } from "./card"
-import { currentSectionAtom } from "~/atoms"
+import { currentColumnAtom } from "~/atoms"
 
 export function Dnd() {
-  const [items, setItems] = useAtom(currentSectionAtom)
+  const [items, setItems] = useAtom(currentColumnAtom)
   return (
     <DndWrapper items={items} setItems={setItems}>
       <motion.div

src/components/column/index.tsx

@@ -1,17 +1,17 @@
-import { metadata, sectionIds } from "@shared/data"
+import { columnIds, metadata } from "@shared/data"
-import type { SectionID } from "@shared/types"
+import type { ColumnID } from "@shared/types"
 import { Link } from "@tanstack/react-router"
 import clsx from "clsx"
 import { useAtom } from "jotai"
 import { useEffect } from "react"
 import { Dnd } from "./dnd"
-import { currentSectionIDAtom } from "~/atoms"
+import { currentColumnIDAtom } from "~/atoms"
 
-export function Section({ id }: { id: SectionID }) {
+export function Column({ id }: { id: ColumnID }) {
-  const [currentSectionID, setCurrentSectionID] = useAtom(currentSectionIDAtom)
+  const [currentColumnID, setCurrentColumnID] = useAtom(currentColumnIDAtom)
   useEffect(() => {
-    setCurrentSectionID(id)
+    setCurrentColumnID(id)
-  }, [id, setCurrentSectionID])
+  }, [id, setCurrentColumnID])
 
   return (
     <>
@@ -21,22 +21,22 @@ export function Section({ id }: { id: SectionID }) {
           "md:(z-100 mb-6)",
         ])}
         >
-          {sectionIds.map(section => (
+          {columnIds.map(columnId => (
             <Link
-              key={section}
+              key={columnId}
-              to="/s/$section"
+              to="/s/$column"
-              params={{ section }}
+              params={{ column: columnId }}
               className={clsx(
                 "text-sm",
-                id === section ? "color-primary font-bold" : "op-70 dark:op-90",
+                id === columnId ? "color-primary font-bold" : "op-70 dark:op-90",
               )}
             >
-              {metadata[section].name}
+              {metadata[columnId].name}
             </Link>
           ))}
         </span>
       </div>
-      { currentSectionID === id && <Dnd />}
+      { currentColumnID === id && <Dnd />}
     </>
   )
 }

src/components/header.tsx

@@ -7,7 +7,7 @@ import type { SourceID } from "@shared/types"
 import { Homepage, Version } from "@shared/consts"
 import logo from "~/assets/icon.svg"
 import { useDark } from "~/hooks/useDark"
-import { currentSectionAtom, goToTopAtom, refetchSourcesAtom } from "~/atoms"
+import { currentColumnAtom, goToTopAtom, refetchSourcesAtom } from "~/atoms"
 
 function ThemeToggle() {
   const { toggleDark } = useDark()
@@ -38,19 +38,19 @@ export function GithubIcon() {
 }
 
 function RefreshButton() {
-  const currentSection = useAtomValue(currentSectionAtom)
+  const currentColumn = useAtomValue(currentColumnAtom)
   const setRefetchSource = useSetAtom(refetchSourcesAtom)
   const refreshAll = useCallback(() => {
-    const obj = Object.fromEntries(currentSection.map(id => [id, Date.now()]))
+    const obj = Object.fromEntries(currentColumn.map(id => [id, Date.now()]))
     setRefetchSource(prev => ({
       ...prev,
       ...obj,
     }))
-  }, [currentSection, setRefetchSource])
+  }, [currentColumn, setRefetchSource])
 
   const isFetching = useIsFetching({
     predicate: (query) => {
-      return currentSection.includes(query.queryKey[0] as SourceID)
+      return currentColumn.includes(query.queryKey[0] as SourceID)
     },
   })
 

src/routeTree.gen.ts

@@ -12,7 +12,7 @@
 
 import { Route as rootRoute } from './routes/__root'
 import { Route as IndexImport } from './routes/index'
-import { Route as SSectionImport } from './routes/s.$section'
+import { Route as SColumnImport } from './routes/s.$column'
 
 // Create/Update Routes
 
@@ -21,8 +21,8 @@ const IndexRoute = IndexImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
-const SSectionRoute = SSectionImport.update({
+const SColumnRoute = SColumnImport.update({
-  path: '/s/$section',
+  path: '/s/$column',
   getParentRoute: () => rootRoute,
 } as any)
 
@@ -37,11 +37,11 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexImport
       parentRoute: typeof rootRoute
     }
-    '/s/$section': {
+    '/s/$column': {
-      id: '/s/$section'
+      id: '/s/$column'
-      path: '/s/$section'
+      path: '/s/$column'
-      fullPath: '/s/$section'
+      fullPath: '/s/$column'
-      preLoaderRoute: typeof SSectionImport
+      preLoaderRoute: typeof SColumnImport
       parentRoute: typeof rootRoute
     }
   }
@@ -51,37 +51,37 @@ declare module '@tanstack/react-router' {
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
-  '/s/$section': typeof SSectionRoute
+  '/s/$column': typeof SColumnRoute
 }
 
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
-  '/s/$section': typeof SSectionRoute
+  '/s/$column': typeof SColumnRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
   '/': typeof IndexRoute
-  '/s/$section': typeof SSectionRoute
+  '/s/$column': typeof SColumnRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/s/$section'
+  fullPaths: '/' | '/s/$column'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/s/$section'
+  to: '/' | '/s/$column'
-  id: '__root__' | '/' | '/s/$section'
+  id: '__root__' | '/' | '/s/$column'
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
-  SSectionRoute: typeof SSectionRoute
+  SColumnRoute: typeof SColumnRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
-  SSectionRoute: SSectionRoute,
+  SColumnRoute: SColumnRoute,
 }
 
 export const routeTree = rootRoute
@@ -97,14 +97,14 @@ export const routeTree = rootRoute
       "filePath": "__root.tsx",
       "children": [
         "/",
-        "/s/$section"
+        "/s/$column"
       ]
     },
     "/": {
       "filePath": "index.tsx"
     },
-    "/s/$section": {
+    "/s/$column": {
-      "filePath": "s.$section.tsx"
+      "filePath": "s.$column.tsx"
     }
   }
 }

src/routes/index.tsx

@@ -2,7 +2,7 @@ import { createFileRoute } from "@tanstack/react-router"
 import { useAtomValue } from "jotai"
 import { useMemo } from "react"
 import { localSourcesAtom } from "~/atoms"
-import { Section } from "~/components/section"
+import { Column } from "~/components/column"
 
 export const Route = createFileRoute("/")({
   component: IndexComponent,
@@ -14,5 +14,5 @@ function IndexComponent() {
     return focusSources.focus.length ? "focus" : "realtime"
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
-  return <Section id={id} />
+  return <Column id={id} />
 }

src/routes/s.$column.tsx

@@ -0,0 +1,28 @@
+import { createFileRoute, redirect } from "@tanstack/react-router"
+import { columnIds } from "@shared/data"
+import { Column } from "~/components/column"
+
+export const Route = createFileRoute("/s/$column")({
+  component: SectionComponent,
+  params: {
+    parse: (params) => {
+      const column = columnIds.find(x => x === params.column.toLowerCase())
+      if (!column)
+        throw new Error(`"${params.column}" is not a valid column.`)
+      return {
+        column,
+      }
+    },
+    stringify: params => params,
+  },
+  onError: (error) => {
+    if (error?.routerCode === "PARSE_PARAMS") {
+      throw redirect({ to: "/" })
+    }
+  },
+})
+
+function SectionComponent() {
+  const { column } = Route.useParams()
+  return <Column id={column} />
+}

src/routes/s.$section.tsx

@@ -1,28 +0,0 @@
-import { createFileRoute, redirect } from "@tanstack/react-router"
-import { sectionIds } from "@shared/data"
-import { Section } from "~/components/section"
-
-export const Route = createFileRoute("/s/$section")({
-  component: SectionComponent,
-  params: {
-    parse: (params) => {
-      const section = sectionIds.find(x => x === params.section.toLowerCase())
-      if (!section)
-        throw new Error(`"${params.section}" is not a valid section.`)
-      return {
-        section,
-      }
-    },
-    stringify: params => params,
-  },
-  onError: (error) => {
-    if (error?.routerCode === "PARSE_PARAMS") {
-      throw redirect({ to: "/" })
-    }
-  },
-})
-
-function SectionComponent() {
-  const { section } = Route.useParams()
-  return <Section id={section} />
-}