add smooth scroll to top and separate id and selectors

Author: nemanjam

.github/workflows/bash__deploy-docker.yml

@@ -5,7 +5,7 @@ on:
     workflows:
       - 'Build and push Docker'
     types:
-      - completed
+      - success
 
   workflow_dispatch:
 

docs/working-notes/todo3.md

@@ -499,5 +499,8 @@ custom my-prose-links
 // dark theme for github markdown
 https://github.com/sindresorhus/github-markdown-css/issues/104
 https://github.com/sindresorhus/github-markdown-css
+
+table of contents id links
+a href open in new tab
 ------------
 ```

src/components/Giscus.astro

@@ -1,16 +1,19 @@
 ---
+import { SELECTORS } from '@/constants/dom';
 import { cn } from '@/utils/styles';
 
 import type { HTMLAttributes } from 'astro/types';
 
 export interface Props extends HTMLAttributes<'div'> {}
 
+const { GISCUS_WIDGET_ID } = SELECTORS;
+
 const { class: className } = Astro.props;
 ---
 
 <div class={cn('giscus', className)}>
   <giscus-widget
-    id="giscus-comments"
+    id={GISCUS_WIDGET_ID}
     repo="nemanjam/nemanjam.github.io"
     repoid="R_kgDOKc-LeA"
     category="General"

src/components/Header.astro

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 
 import HeaderLink from '@/components/HeaderLink.astro';
 import ThemeToggle from '@/components/ThemeToggle.astro';
+import { SELECTORS } from '@/constants/dom';
 import { IMAGE_SIZES } from '@/constants/image';
 import { NAVIGATION_ITEMS } from '@/constants/navigation';
 import { ROUTES } from '@/constants/routes';
@@ -14,14 +15,16 @@ import { getActiveNavItemPath } from '@/utils/navigation';
 
 import Avatar from '@/assets/images/avatar.jpg';
 
+const { SCROLL_TO_TOP_ID } = SELECTORS;
+
 const { pathname: routePathname } = Astro.url;
 const activeNavItemPath = getActiveNavItemPath(routePathname);
 
 // group-[.menu-open]: increases specificity everywhere
 // group-[.menu-open]:flex-col md:!flex-row, both on flex-direction
 ---
 
-<header id="main-header" class="group border-b border-base-300">
+<header id={SCROLL_TO_TOP_ID} class="group border-b border-base-300">
   <div
     class={clsx(
       'flex gap-2',

src/components/react/ScrollToTop.tsx

@@ -1,13 +1,16 @@
 import React, { useEffect, useRef, useState } from 'react';
 
+import { SELECTORS } from '@/constants/dom';
 import { cn } from '@/utils/styles';
 
-import type { ReactNode } from 'react';
+import type { MouseEvent, ReactNode } from 'react';
 
 interface Props {
   children: ReactNode;
 }
 
+const { SCROLL_TO_TOP_SELECTOR } = SELECTORS;
+
 const fixedClasses = ['opacity-1', 'translate-y-0'];
 const hiddenClasses = ['opacity-0', 'translate-y-20'];
 
@@ -77,6 +80,15 @@ const ScrollToTop: React.FC<Props> = ({ children }) => {
     };
   }, []);
 
+  const handleScrollToTop = (event: MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+
+    const anchorElement = document.querySelector(SCROLL_TO_TOP_SELECTOR);
+    if (!anchorElement) return;
+
+    anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' });
+  };
+
   return (
     <>
       <div
@@ -93,7 +105,8 @@ const ScrollToTop: React.FC<Props> = ({ children }) => {
       <a
         ref={linkRef}
         id="to-top"
-        href="#top"
+        href={SCROLL_TO_TOP_SELECTOR}
+        onClick={handleScrollToTop}
         className={cn(
           // default styles
           'z-10 fixed bottom-6 right-6 rounded bg-base-200 border border-base-300',

src/constants/dom.ts

@@ -1,5 +1,9 @@
 export const SELECTORS = {
+  GISCUS_WIDGET_ID: 'giscus-comments',
   GISCUS_WIDGET_SELECTOR: '#giscus-comments',
   GISCUS_IFRAME_SELECTOR: 'iframe[title="Comments"]',
+  GITHUB_MARKDOWN_BODY_ID: 'markdown-body-id',
   GITHUB_MARKDOWN_BODY_SELECTOR: '#markdown-body-id',
+  SCROLL_TO_TOP_ID: 'main-header',
+  SCROLL_TO_TOP_SELECTOR: '#main-header',
 } as const;

src/pages/links.astro

@@ -7,17 +7,21 @@ import { getPageMetadata } from '@/utils/metadata';
 
 import '@/assets/styles/github-markdown.css';
 
+import { SELECTORS } from '@/constants/dom';
+
 const { README_RAW_URL, REPO } = BOOKMARKS;
 
 const readmeContent = await fetch(README_RAW_URL).then((response) => response.text());
 
 const metadata = getPageMetadata('lists/links');
 
+const { GITHUB_MARKDOWN_BODY_ID } = SELECTORS;
+
 // not generating id="..." links href="#..."
 ---
 
 <List {metadata}>
-  <div id="markdown-body-id" class="markdown-body">
+  <div id={GITHUB_MARKDOWN_BODY_ID} class="markdown-body">
     <p>
       My personal bookmarks collection which is hosted in this repo: <a href={REPO} target="_blank"
         >{REPO}</a
@@ -49,8 +53,9 @@ const metadata = getPageMetadata('lists/links');
   import type { ChangeThemeCustomEvent, Mode } from '@/types/constants';
 
   const { CHANGE_EVENT } = THEME_CONFIG;
+  const { GITHUB_MARKDOWN_BODY_SELECTOR } = SELECTORS;
 
-  const markdownBodyElement = document.querySelector(SELECTORS.GITHUB_MARKDOWN_BODY_SELECTOR);
+  const markdownBodyElement = document.querySelector(GITHUB_MARKDOWN_BODY_SELECTOR);
 
   const loadGithubTheme = (mode: Mode) => {
     if (!markdownBodyElement) return;