https://github.com/forthtilliath/preact-page-navigation

Système de navigation dynamique avec Preact et Tailwind CSS
https://github.com/forthtilliath/preact-page-navigation

highlight-js marked preact tailwind-merge tailwindcss typescript

Last synced: 15 days ago
JSON representation

Système de navigation dynamique avec Preact et Tailwind CSS

• Host: GitHub
• URL: https://github.com/forthtilliath/preact-page-navigation
• Owner: Forthtilliath
• Created: 2024-07-12T15:13:36.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-07-30T17:23:59.000Z (4 months ago)
• Last Synced: 2024-10-16T11:25:22.201Z (30 days ago)
• Topics: highlight-js, marked, preact, tailwind-merge, tailwindcss, typescript
• Language: TypeScript
• Homepage: https://preact-page-navigation.vercel.app
• Size: 156 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Explication du fonction de la sidebar de la Page1

## Librairies Utilisées

Dans ce projet, nous avons utilisé les librairies suivantes :

- **Preact**: Une alternative plus légère à React pour construire des interfaces utilisateur.

- **Tailwind CSS**: Un framework CSS utilitaire-first pour styliser rapidement les composants.

- **TypeScript**: Un sur-ensemble typé de JavaScript qui ajoute des types statiques optionnels.

- **tailwind-variants**: Permet d'ajouter facilement des variants personnalisés à Tailwind CSS.

- **tailwindcss-animate**: Intègre les animations de animate.css dans Tailwind CSS.

Ces outils ont été choisis pour leur performance, leur flexibilité et leur facilité d'intégration dans un projet Preact.

## Structure du composant

```tsx

import { useNavigation } from "@/lib/hooks/useNavigation";

import { H2, H3, Sidebar } from "@/components/layout";

export default function Page1() {

  const [articleRef, nav, activeHeading] = useNavigation();

  return (

    <>

      

        {/* Contenu de la page */}

      

      

    >

  );

}

```

### Composants H2 et H3

Simplification via composants intermédiaires pour les headings.

```tsx

Installation

```


#### Composant H2

Génère un ID à partir du titre et ajoute un attribut `data-anchor`.

```tsx

type Props = React.PropsWithChildren<{}>;

export function H2({ children }: Props) {

  if (!children) return null;

  const id = children.toString().replace(/\s+/g, "-").toLowerCase();

  return (

    


      {children}

    

  );

}

```


## Custom Hook `useNavigation()`

Gère la navigation. Accepte un paramètre pour personnaliser l'attribut observé.

### Méthodes internes

- `buildNavigationStructure()`: Génère la structure de navigation à partir des headings.

- `useActiveItem()`: Observe les éléments pour mettre à jour l'élément actif.

## Composant Sidebar

Génère la liste de navigation récursivement à partir des items fournis.

```tsx

```

Utilise `tailwind-merge` pour le style.

# Améliorations possibles

- Commencer un article avec d'autres éléments que `
`.