Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

[Enhancement]: TOC lacks active section highlighting and auto-scroll

Abierto
#53 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
48/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
html
Área
frontend

Línea de trabajo

Empieza en la página del tutorial enlazada en el issue y localiza la plantilla o el componente que renderiza el TOC de la derecha. Comprueba cómo se gestionan actualmente los encabezados y el desplazamiento; se considera terminado cuando la sección visible está resaltada y el TOC mantiene esa entrada a la vista al leer tutoriales largos.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Description

On the tutorial pages for example, The Basic Tools of the Deep Life Sciences, the right-hand sidebar containing the Table of Contents (TOC) for the current page has two usability issues:

  1. No Active Section Highlighting (Scrollspy): As the user scrolls through the main document, the TOC does not highlight or indicate which section is currently being read.
  2. No Auto-scrolling: The TOC does not scroll automatically to keep the active section in view or as the user progresses deep into the document.
Image

Enhancement

  • Active state: The section currently in the viewport on the main page should be highlighted in the right TOC ( a scrollspy feature).
  • Auto-scroll: The TOC should ideally scroll to ensure the currently active section remains visible within the sidebar.

Expected Outcome

It will look something like this (TOC on the right):

https://github.com/user-attachments/assets/874d7019-45e9-4af0-b587-4e726c4dfca1

Why it matters

Adding this would:

  • Make it easier for users to navigate long tutorials without losing their place.
  • Improve the overall usability and polish of the tutorials, which are often a new user's first hands-on introduction to DeepChem.
Lenguaje dominante
HTML
Estrellas
4
Forks
18
Métricas de merge de PR
Sin PR fusionados en 30 d

Preparar el entorno

Aún no hemos revisado los archivos de configuración de este proyecto. Empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de deepchem/deepchem.github.io

Todos los issues de deepchem/deepchem.github.io

Issues similares

Más issues de Web Dev

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.