13800800535

Committed 12 Mar 2025 12:18AM UTC coverage: 86.583%. Remained the same

Build # 13800800535

Build Type

Pull #1907

github

Committed by

web-flow

Commit Message

chore(deps): bump shiki from 2.3.2 to 3.2.1

Bumps [shiki](https://github.com/shikijs/shiki/tree/HEAD/packages/shiki) from 2.3.2 to 3.2.1.
- [Release notes](https://github.com/shikijs/shiki/releases)
- [Commits](https://github.com/shikijs/shiki/commits/v3.2.1/packages/shiki)

---
updated-dependencies:
- dependency-name: shiki
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

Pull Request Pull Request #1907: chore(deps): bump shiki from 2.3.2 to 3.2.1

Run Details

119 of 146 branches covered (81.51%)

Branch coverage included in aggregate %.

294 of 331 relevant lines covered (88.82%)

8.97 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

91.38

/src/components/layout/Header/Header.tsx

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useTheme } from 'next-themes';
import { useEffect, useRef, useState } from 'react';
import { useClickAway } from 'react-use';

import ColorModeToggle from '@/components/ColorModeToggle';
import SkipToContent from '@/components/layout/Header/SkipToContent';
import UnstyledLink from '@/components/links/UnstyledLink';
import PageProgress from '@/components/PageProgress';
import clsxm from '@/lib/clsxm';

import AnimatedTitle from './animated-title';

type Links = {
  href: string;
  label: string;
}[];

export const links: Links = [
  { href: '/projects', label: 'Projects' },
  { href: '/about', label: 'About' },
  { href: '/blog', label: 'Blog' },
];

const Header = ({ ...rest }: React.ComponentPropsWithoutRef<'header'>) => {
  const { theme, setTheme } = useTheme();

  //#region  //*=========== Route Functionality ===========
  const pathname = usePathname();
  /** Ex: /sigma/titid -> ['', 'sigma', 'titid'] */
  const arrOfRoute = pathname?.split('/') || [];
  const baseRoute = `/${arrOfRoute[1]}`;
  //#endregion  //*======== Route Functionality ===========

  //#region  //*=========== Scroll Shadow ===========
  const [onTop, setOnTop] = useState<boolean>(true);
  useEffect(() => {
    const handleScroll = () => {
      setOnTop(window.scrollY === 0);
    };
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);
  //#endregion  //*======== Scroll Shadow ===========

  const [sideNav, setSideNav] = useState(false);

  const [isSideNavClosed, setIsSideNavClosed] = useState(true);

  const closeSideNav = () => {
    setSideNav(false);
    setTimeout(() => setIsSideNavClosed(true), 310);
  };

  const ref = useRef(null);

  useClickAway(ref, () => {
    if (sideNav) {
      closeSideNav();
    }
  });

  return (
    <header
      className={clsxm(
        'sticky top-0 z-50 transition-shadow',
        !onTop && 'shadow-lg',
      )}
      {...rest}
    >
      <SkipToContent />
      <PageProgress color='#ff9a9a' />
      <div className='bg-light transition-all dark:bg-dark dark:text-light'>
        <nav className={clsxm('layout flex items-center justify-between py-4')}>
          <Link href='/' passHref>
            <AnimatedTitle baseRoute={baseRoute} />
          </Link>
          <ul className='hidden items-center justify-between space-x-3 text-xs md:flex md:space-x-4 md:text-base'>
            {links.map(({ href, label }) => (
              <li key={`${href}${label}`}>
                <UnstyledLink
                  href={href}
                  className={clsxm(
                    'animated-underline rounded-xs py-1 transition-all',
                    'font-medium text-black dark:text-light',
                    'group dark:hover:text-primary-300',
                    'focus:outline-hidden focus-visible:ring-3 focus-visible:ring-primary-300',
                    href === baseRoute && 'font-bold',
                  )}
                >
                  <span
                    className={clsxm(
                      'transition-all',
                      'bg-primary-300/0 group-hover:bg-primary-300/20 dark:group-hover:bg-primary-300/10 p-0.5 rounded-xs',
                      href === baseRoute &&
                        'bg-primary-300/50 group-hover:bg-primary-300/50 dark:bg-linear-to-tr dark:from-primary-300 dark:to-primary-400 dark:bg-clip-text dark:text-transparent',
                    )}
                  >
                    {label}
                  </span>
                </UnstyledLink>
              </li>
            ))}
          </ul>
          <label className='swap swap-rotate btn-circle btn border-transparent bg-transparent text-dark outline-primary-200 hover:border-transparent hover:bg-gray-300 hover:outline-1 dark:text-light dark:hover:bg-gray-600 md:hidden'>
            <input
              type='checkbox'
              className='hidden'
              onChange={() => {
                if (isSideNavClosed) {
                  setSideNav(true);
                  setIsSideNavClosed(false);
                }
              }}
              checked={sideNav}
            />
            <svg
              className='swap-off fill-current'
              xmlns='http://www.w3.org/2000/svg'
              width='32'
              height='32'
              viewBox='0 0 512 512'
            >
              <path d='M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z' />
            </svg>
            <svg
              className='swap-on fill-current'
              xmlns='http://www.w3.org/2000/svg'
              width='32'
              height='32'
              viewBox='0 0 512 512'
            >
              <polygon points='400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49' />
            </svg>
          </label>
          <ColorModeToggle
            value={theme}
            onChange={setTheme}
            className='hidden md:block'
          />
        </nav>
      </div>
      <div
        id='drawer-navigation'
        ref={ref}
        className={clsxm(
          'fixed left-0 top-0 z-99 h-screen w-80 overflow-y-auto bg-light p-4 duration-300 dark:bg-dark',
          !sideNav && '-translate-x-full',
        )}
        tabIndex={-1}
        aria-labelledby='drawer-navigation-label'
      >
        <button
          type='button'
          aria-controls='drawer-navigation'
          aria-label='Close sidebar button'
          className='absolute right-2.5 top-2.5 inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white'
          onClick={() => closeSideNav()}
        >
          <svg
            aria-hidden='true'
            className='h-5 w-5'
            fill='currentColor'
            viewBox='0 0 20 20'
            xmlns='http://www.w3.org/2000/svg'
          >
            <path
              fillRule='evenodd'
              d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z'
              clipRule='evenodd'
            />
          </svg>
          <span className='sr-only'>Close menu</span>
        </button>
        <div className='mt-4 overflow-y-auto py-4'>
          <ul className='space-y-2'>
            {links.map(({ href, label }) => (
              <li
                key={`${href}${label}`}
                className={clsxm(
                  'flex items-center justify-center rounded-lg py-1 text-lg',
                  href === baseRoute &&
                    'bg-primary-100/50 dark:bg-primary-800/50',
                )}
              >
                <UnstyledLink
                  href={href}
                  className={clsxm(
                    'animated-underline rounded-xs py-1 transition-all',
                    'font-medium text-black dark:text-light',
                    'group dark:hover:text-primary-300',
                    'focus:outline-hidden focus-visible:ring-3 focus-visible:ring-primary-300',
                    href === baseRoute && 'font-bold',
                  )}
                >
                  <span
                    className={clsxm(
                      'transition-all',
                      'bg-primary-300/0 group-hover:bg-primary-300/20 dark:group-hover:bg-primary-300/0 p-0.5 rounded-xs',
                      href === baseRoute &&
                        'bg-primary-300/50 dark:bg-linear-to-tr dark:from-primary-300 dark:to-primary-400 dark:bg-clip-text dark:text-transparent',
                    )}
                  >
                    {label}
                  </span>
                </UnstyledLink>
              </li>
            ))}
          </ul>
          <div className='mt-8 flex items-center justify-center'>
            <ColorModeToggle
              value={theme}
              onChange={setTheme}
              className='h-12 w-12'
              iconClassName='text-4xl'
            />
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;

1	import Link from 'next/link';	1✔
2	import { usePathname } from 'next/navigation';	1✔
3	import { useTheme } from 'next-themes';	1✔
4	import { useEffect, useRef, useState } from 'react';	1✔
5	import { useClickAway } from 'react-use';	1✔
6
7	import ColorModeToggle from '@/components/ColorModeToggle';	1✔
8	import SkipToContent from '@/components/layout/Header/SkipToContent';	1✔
9	import UnstyledLink from '@/components/links/UnstyledLink';	1✔
10	import PageProgress from '@/components/PageProgress';	1✔
11	import clsxm from '@/lib/clsxm';	1✔
12
13	import AnimatedTitle from './animated-title';	1✔
14
15	type Links = {
16	href: string;
17	label: string;
18	}[];
19
20	export const links: Links = [	1✔
21	{ href: '/projects', label: 'Projects' },
22	{ href: '/about', label: 'About' },
23	{ href: '/blog', label: 'Blog' },
24	];
25
26	const Header = ({ ...rest }: React.ComponentPropsWithoutRef<'header'>) => {	1✔
27	const { theme, setTheme } = useTheme();	12✔
28
29	//#region //*=========== Route Functionality ===========
30	const pathname = usePathname();	12✔
31	/** Ex: /sigma/titid -> ['', 'sigma', 'titid'] */
32	const arrOfRoute = pathname?.split('/') \|\| [];	12✔
33	const baseRoute = `/${arrOfRoute[1]}`;	12✔
34	//#endregion //*======== Route Functionality ===========
35
36	//#region //*=========== Scroll Shadow ===========
37	const [onTop, setOnTop] = useState<boolean>(true);	12✔
38	useEffect(() => {	12✔
39	const handleScroll = () => {	5✔
40	setOnTop(window.scrollY === 0);	2✔
41	};
42	window.addEventListener('scroll', handleScroll, { passive: true });	5✔
43	return () => {	5✔
44	window.removeEventListener('scroll', handleScroll);	5✔
45	};
46	}, []);
47	//#endregion //*======== Scroll Shadow ===========
48
49	const [sideNav, setSideNav] = useState(false);	12✔
50
51	const [isSideNavClosed, setIsSideNavClosed] = useState(true);	12✔
52
53	const closeSideNav = () => {	12✔
54	setSideNav(false);	2✔
55	setTimeout(() => setIsSideNavClosed(true), 310);	2✔
56	};
57
58	const ref = useRef(null);	12✔
59
60	useClickAway(ref, () => {	12✔
61	if (sideNav) {	1✔
62	closeSideNav();	1✔
63	}
64	});
65
66	return (
67	<header
68	className={clsxm(
69	'sticky top-0 z-50 transition-shadow',
70	!onTop && 'shadow-lg',	14✔
71	)}
72	{...rest}
73	>
74	<SkipToContent />
75	<PageProgress color='#ff9a9a' />
76	<div className='bg-light transition-all dark:bg-dark dark:text-light'>
77	<nav className={clsxm('layout flex items-center justify-between py-4')}>
78	<Link href='/' passHref>
79	<AnimatedTitle baseRoute={baseRoute} />
80	</Link>
81	<ul className='hidden items-center justify-between space-x-3 text-xs md:flex md:space-x-4 md:text-base'>
82	{links.map(({ href, label }) => (
83	<li key={`${href}${label}`}>	36✔
84	<UnstyledLink
85	href={href}
86	className={clsxm(
87	'animated-underline rounded-xs py-1 transition-all',
88	'font-medium text-black dark:text-light',
89	'group dark:hover:text-primary-300',
90	'focus:outline-hidden focus-visible:ring-3 focus-visible:ring-primary-300',
91	href === baseRoute && 'font-bold',	36!
92	)}
93	>
94	<span
95	className={clsxm(
96	'transition-all',
97	'bg-primary-300/0 group-hover:bg-primary-300/20 dark:group-hover:bg-primary-300/10 p-0.5 rounded-xs',
98	href === baseRoute &&	36!
99	'bg-primary-300/50 group-hover:bg-primary-300/50 dark:bg-linear-to-tr dark:from-primary-300 dark:to-primary-400 dark:bg-clip-text dark:text-transparent',
100	)}
101	>
102	{label}
103	</span>
104	</UnstyledLink>
105	</li>
106	))}
107	</ul>
108	<label className='swap swap-rotate btn-circle btn border-transparent bg-transparent text-dark outline-primary-200 hover:border-transparent hover:bg-gray-300 hover:outline-1 dark:text-light dark:hover:bg-gray-600 md:hidden'>
109	<input
110	type='checkbox'
111	className='hidden'
112	onChange={() => {
113	if (isSideNavClosed) {	3✔
114	setSideNav(true);	3✔
115	setIsSideNavClosed(false);	3✔
116	}
117	}}
118	checked={sideNav}
119	/>
120	<svg
121	className='swap-off fill-current'
122	xmlns='http://www.w3.org/2000/svg'
123	width='32'
124	height='32'
125	viewBox='0 0 512 512'
126	>
127	<path d='M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z' />
128	</svg>
129	<svg
130	className='swap-on fill-current'
131	xmlns='http://www.w3.org/2000/svg'
132	width='32'
133	height='32'
134	viewBox='0 0 512 512'
135	>
136	<polygon points='400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49' />
137	</svg>
138	</label>
139	<ColorModeToggle
140	value={theme}
141	onChange={setTheme}
142	className='hidden md:block'
143	/>
144	</nav>
145	</div>
146	<div
147	id='drawer-navigation'
148	ref={ref}
149	className={clsxm(
150	'fixed left-0 top-0 z-99 h-screen w-80 overflow-y-auto bg-light p-4 duration-300 dark:bg-dark',
151	!sideNav && '-translate-x-full',	21✔
152	)}
153	tabIndex={-1}
154	aria-labelledby='drawer-navigation-label'
155	>
156	<button
157	type='button'
158	aria-controls='drawer-navigation'
159	aria-label='Close sidebar button'
160	className='absolute right-2.5 top-2.5 inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white'
161	onClick={() => closeSideNav()}	1✔
162	>
163	<svg
164	aria-hidden='true'
165	className='h-5 w-5'
166	fill='currentColor'
167	viewBox='0 0 20 20'
168	xmlns='http://www.w3.org/2000/svg'
169	>
170	<path
171	fillRule='evenodd'
172	d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z'
173	clipRule='evenodd'
174	/>
175	</svg>
176	<span className='sr-only'>Close menu</span>
177	</button>
178	<div className='mt-4 overflow-y-auto py-4'>
179	<ul className='space-y-2'>
180	{links.map(({ href, label }) => (
181	<li	36✔
182	key={`${href}${label}`}
183	className={clsxm(
184	'flex items-center justify-center rounded-lg py-1 text-lg',
185	href === baseRoute &&	36!
186	'bg-primary-100/50 dark:bg-primary-800/50',
187	)}
188	>
189	<UnstyledLink
190	href={href}
191	className={clsxm(
192	'animated-underline rounded-xs py-1 transition-all',
193	'font-medium text-black dark:text-light',
194	'group dark:hover:text-primary-300',
195	'focus:outline-hidden focus-visible:ring-3 focus-visible:ring-primary-300',
196	href === baseRoute && 'font-bold',	36!
197	)}
198	>
199	<span
200	className={clsxm(
201	'transition-all',
202	'bg-primary-300/0 group-hover:bg-primary-300/20 dark:group-hover:bg-primary-300/0 p-0.5 rounded-xs',
203	href === baseRoute &&	36!
204	'bg-primary-300/50 dark:bg-linear-to-tr dark:from-primary-300 dark:to-primary-400 dark:bg-clip-text dark:text-transparent',
205	)}
206	>
207	{label}
208	</span>
209	</UnstyledLink>
210	</li>
211	))}
212	</ul>
213	<div className='mt-8 flex items-center justify-center'>
214	<ColorModeToggle
215	value={theme}
216	onChange={setTheme}
217	className='h-12 w-12'
218	iconClassName='text-4xl'
219	/>
220	</div>
221	</div>
222	</div>
223	</header>
224	);
225	};
226
227	export default Header;	5✔

LordRonz / lordronz-site / 13800800535

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous