Merge pull request #71 from webdevhome/jump-links

Jump links

Author: alinnert

index.css

@@ -4,8 +4,7 @@
 
 @layer base {
   svg {
-    vertical-align: middle;
-    fill: currentColor;
+    @apply align-middle fill-current;
   }
 }
 

package.json

@@ -1,11 +1,11 @@
 {
   "name": "webdevhome.github.io",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "npm test && vite build",
     "preview": "vite preview",
-    "typecheck": "tsc"
+    "test": "tsc && eslint src"
   },
   "dependencies": {
     "@mdi/react": "^1.4.0",

src/components/App/App.tsx

@@ -1,4 +1,5 @@
 import {
+  mdiArrowCollapseUp,
   mdiArrowLeft,
   mdiCheck,
   mdiFormatListChecks,
@@ -17,6 +18,7 @@ import { FooterDivider } from '../Footer/FooterDivider'
 import { FooterGroup } from '../Footer/FooterGroup'
 import { AppAction } from '../Header/AppAction'
 import { AppHeader } from '../Header/AppHeader'
+import { JumpLinks } from '../JumpLinks/JumpLinks'
 import { LinkGroup } from '../Links/LinkGroup'
 import { Search } from '../Search/Search'
 import { AppContent } from './AppContent'
@@ -34,6 +36,13 @@ export const WebdevHome: FC = () => {
   const allLinks = useAllLinks()
   const hiddenLinksCount = useHiddenLinksCount()
 
+  function handleScrollTopClick() {
+    const htmlEl = document.children.item(0)
+    if (htmlEl === null) return
+
+    htmlEl.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
   return (
     <div className="min-h-full">
       <div
@@ -50,6 +59,11 @@ export const WebdevHome: FC = () => {
             <>
               {isCurrentAppMode(AppMode.default) ? (
                 <>
+                  <AppAction
+                    icon={mdiArrowCollapseUp}
+                    label="Top"
+                    action={handleScrollTopClick}
+                  />
                   <AppAction
                     icon={mdiMagnify}
                     label="Search"
@@ -64,7 +78,7 @@ export const WebdevHome: FC = () => {
                   <AppAction
                     icon={mdiStickerTextOutline}
                     active={toggleDescriptions.showDescriptions}
-                    label="Descriptions"
+                    label="Link info"
                     action={toggleDescriptions.toggle}
                   />
                   <AppAction
@@ -123,11 +137,14 @@ export const WebdevHome: FC = () => {
 
       <div className="h-full">
         {isCurrentAppMode(AppMode.default, AppMode.customize) ? (
-          <AppContent>
-            {links.items.map((group) => (
-              <LinkGroup group={group} key={group.name} />
-            ))}
-          </AppContent>
+          <>
+            <JumpLinks />
+            <AppContent>
+              {links.items.map((group, index) => (
+                <LinkGroup group={group} key={group.name} />
+              ))}
+            </AppContent>
+          </>
         ) : (
           <Search />
         )}

src/components/App/AppContent.tsx

@@ -6,7 +6,7 @@ export const AppContent: FC<PropsWithChildren> = ({ children }) => {
     <div
       className={classNames(
         'grid grid-cols-[repeat(auto-fill,minmax(290px,1fr))]',
-        'gap-x-2 sm:gap-x-4 lg:gap-x-8 gap-y-20',
+        'gap-x-2 sm:gap-x-4 lg:gap-x-8 gap-y-8',
         'px-page py-4 lg:py-8',
       )}
     >

src/components/Header/AppAction.tsx

@@ -20,7 +20,7 @@ export const AppAction: FC<Props> = ({
   return (
     <div
       className={classNames(
-        'flex items-center',
+        'flex flex-col items-center md:flex-row',
         'p-2',
         'rounded-md',
         'select-none',
@@ -44,7 +44,7 @@ export const AppAction: FC<Props> = ({
     >
       <MdiIcon path={icon} />
 
-      <div className="ml-2 text-sm font-semibold tracking-wide">{label}</div>
+      <div className="md:ml-2 text-xs md:text-sm font-semibold">{label}</div>
     </div>
   )
 }

src/components/Header/AppHeader.tsx

@@ -11,7 +11,7 @@ export const AppHeader: FC<Props> = ({ actions }) => {
     <div
       className={classNames(
         'grid items-center',
-        'grid-rows-[auto,auto] md:grid-rows-[auto] md:grid-cols-[1fr,auto]',
+        'grid-rows-[auto,auto] lg:grid-rows-[auto] lg:grid-cols-[1fr,auto]',
         'px-page',
       )}
     >
@@ -20,7 +20,7 @@ export const AppHeader: FC<Props> = ({ actions }) => {
       {actions !== null ? (
         <div
           className={classNames(
-            'flex gap-x-2 justify-center flex-wrap',
+            'flex md:gap-x-2 justify-center flex-wrap',
             'py-2',
           )}
         >

src/components/Header/Logo.tsx

@@ -7,8 +7,9 @@ export const Logo: FC = () => {
       className={classNames(
         'font-mono text-2xl',
         'tracking-wide',
-        'text-center md:text-left text-gray-400 dark:text-gray-200',
-        'pt-2 md:pt-0',
+        'text-center lg:text-left text-gray-400 dark:text-gray-200',
+        'pt-2 lg:pt-0',
+        'text-nowrap',
       )}
     >
       <span>&lt;</span>

src/components/JumpLinks/JumpLink.tsx

@@ -0,0 +1,34 @@
+import classNames from 'classnames'
+import { FC } from 'react'
+import { slugify } from '../../utils/slugify'
+
+interface Props {
+  label: string
+  color?: string
+}
+
+export const JumpLink: FC<Props> = ({ label, color = 'gray' }) => {
+  function handleClick() {
+    const target = document.getElementById(slugify(label))
+    if (target === null) return
+
+    target.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  return (
+    <div
+      className={classNames(
+        'jump-link',
+        'px-3 py-1 md:px-2.5 md:py-0.5',
+        'rounded-md',
+        'cursor-pointer',
+        'text-sm font-semibold',
+        `bg-${color}-100 dark:bg-${color}-600`,
+        `text-${color}-800 dark:text-${color}-50`,
+      )}
+      onClick={handleClick}
+    >
+      {label}
+    </div>
+  )
+}

src/components/JumpLinks/JumpLinks.tsx

@@ -0,0 +1,45 @@
+import { mdiChevronDown, mdiChevronUp } from '@mdi/js'
+import classNames from 'classnames'
+import { FC, useState } from 'react'
+import { MdiIcon } from '../Icon/MdiIcon'
+import { JumpLink } from './JumpLink'
+import { links } from '../../links'
+import { useAllLinksInGroupAreHidden } from '../../stores/hiddenLinks/hiddenLinksHooks'
+
+export const JumpLinks: FC = () => {
+  const allLinksInGroupAreHidden = useAllLinksInGroupAreHidden()
+
+  const [isOpen, setIsOpen] = useState(false)
+
+  function handleToggleClick() {
+    setIsOpen(!isOpen)
+  }
+
+  return (
+    <div className="jump-links px-page pt-4 lg:pt-8">
+      <div
+        className="flex items-center gap-x-2 md:hidden dark:text-white cursor-default select-none"
+        onClick={handleToggleClick}
+      >
+        <MdiIcon path={isOpen ? mdiChevronUp : mdiChevronDown}></MdiIcon>
+        <div>Jump to</div>
+      </div>
+      <div
+        className={classNames('flex flex-wrap gap-1 md:flex pt-2', {
+          hidden: !isOpen,
+          block: isOpen,
+        })}
+      >
+        {links.items
+          .filter((group) => !allLinksInGroupAreHidden(group))
+          .map((linkGroup, index) => (
+            <JumpLink
+              key={index}
+              label={linkGroup.name}
+              color={linkGroup.color}
+            />
+          ))}
+      </div>
+    </div>
+  )
+}

src/components/Links/LinkGroup.tsx

@@ -13,6 +13,7 @@ import {
   useAllLinksInGroupAreHidden,
   useGetIsLinkHidden,
 } from '../../stores/hiddenLinks/hiddenLinksHooks'
+import { slugify } from '../../utils/slugify'
 import { MdiIcon } from '../Icon/MdiIcon'
 import { Link } from './Link'
 import { LinkGroupButton } from './LinkGroupButton'
@@ -34,20 +35,20 @@ export const LinkGroup: FC<Props> = ({ group }) => {
   }, [group.items, getIsLinkHidden])
 
   const allGroupLinksAreHidden = useMemo(
-    () => allLinksInGroupAreHidden(group.items.map((link) => link.url)),
-    [allLinksInGroupAreHidden, group.items],
+    () => allLinksInGroupAreHidden(group),
+    [allLinksInGroupAreHidden, group],
   )
 
   const handleToggleGroupClick = useCallback(
     (...items: LinkItem[]): void => {
-      dispatch(toggleHiddenLinksGroup(items.map((link) => link.url)))
+      dispatch(toggleHiddenLinksGroup(items))
     },
     [dispatch],
   )
 
   const noVisibleLinksInGroup = useMemo(() => {
-    return allLinksInGroupAreHidden(group.items.map((link) => link.url))
-  }, [allLinksInGroupAreHidden, group.items])
+    return allLinksInGroupAreHidden(group)
+  }, [allLinksInGroupAreHidden, group])
 
   const showHiddenLinksButtonLabel = useMemo(() => {
     const hiddenLinksCount = hiddenLinks.length
@@ -67,14 +68,17 @@ export const LinkGroup: FC<Props> = ({ group }) => {
   }
 
   return (
-    <div>
+    <div
+      id={slugify(group.name)}
+      className="scroll-mt-32 md:scroll-mt-28 lg:scroll-mt-20"
+    >
       <div className="flex gap-x-1 mb-2">
         <div
           className={classNames(
             'flex-auto',
             'px-4 py-2',
             `bg-${group.color ?? 'gray'}-100 dark:bg-${group.color ?? 'gray'}-600`,
-            'font-semibold uppercase tracking-wider',
+            'text-center font-semibold uppercase tracking-wider',
             `text-${group.color ?? 'gray'}-800 dark:text-${group.color ?? 'gray'}-50`,
             'rounded-md',
           )}