feat: Add conditional link behavior in Link component
This commit is contained in:
parent
57a64b7102
commit
dcf128a2d8
@ -4,9 +4,15 @@ import clsx from "clsx";
|
|||||||
export function Link(props: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) {
|
export function Link(props: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) {
|
||||||
const { urlPathname } = usePageContext();
|
const { urlPathname } = usePageContext();
|
||||||
const isActive = props.href === "/" ? urlPathname === props.href : urlPathname.startsWith(props.href);
|
const isActive = props.href === "/" ? urlPathname === props.href : urlPathname.startsWith(props.href);
|
||||||
|
const isSameDomain = !(props.href.startsWith("http") || props.href.startsWith("mailto"));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<a {...props} href={props.href} className={clsx(isActive && "is-active", props.className)}>
|
<a
|
||||||
|
{...props}
|
||||||
|
href={props.href}
|
||||||
|
className={clsx(isActive && "is-active", props.className)}
|
||||||
|
{...(!isSameDomain ? { target: "_blank", rel: "noopener noreferrer" } : {})}
|
||||||
|
>
|
||||||
{props.children}
|
{props.children}
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -40,13 +40,6 @@ Il peut s'agir d'un HUB _(Linktree, Bento, etc.)_ où l'on peut retrouver tous t
|
|||||||
|
|
||||||
{% /callout %}
|
{% /callout %}
|
||||||
|
|
||||||
{% callout type="warning" title="Ordre d'apparition" %}
|
|
||||||
|
|
||||||
Aucun influenceur ou créateur de contenu, en dehors des coups de coeurs de Memento Dev, n'est mis en avant par rapport à un autre dans cette page.
|
|
||||||
Les noms sont listés par ordre alphabétique, peu importe le nombre d'abonnés ou de vues.
|
|
||||||
|
|
||||||
{% /callout %}
|
|
||||||
|
|
||||||
## 🥷 Disparaître de cette page
|
## 🥷 Disparaître de cette page
|
||||||
|
|
||||||
Pour retirer ton nom de cette page, même fonctionnement que pour apparaître sur cette page : tu peux m'envoyer un [email _(gauthier@gauthierdaniels.fr)_](mailto:gauthier@gauthierdaniels?subject=Demande%20de%20suppression%20de%20la%20page%20des%20influenceurs%20Memento%20Dev).
|
Pour retirer ton nom de cette page, même fonctionnement que pour apparaître sur cette page : tu peux m'envoyer un [email _(gauthier@gauthierdaniels.fr)_](mailto:gauthier@gauthierdaniels?subject=Demande%20de%20suppression%20de%20la%20page%20des%20influenceurs%20Memento%20Dev).
|
||||||
|
|||||||
35
app/data/docs/communaute/partages/page.md
Normal file
35
app/data/docs/communaute/partages/page.md
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
---
|
||||||
|
title: Partages et réutilisations du contenu de Memento Dev
|
||||||
|
description: "Partagez et réutilisez le contenu de Memento Dev : Exportez, collaborez, intégrez !"
|
||||||
|
tags: []
|
||||||
|
---
|
||||||
|
|
||||||
|
Tu souhaites partager ou réutiliser le contenu de Memento Dev ?
|
||||||
|
Tout d'abord, permet-moi de te remercier pour ton intérêt ! 🙏
|
||||||
|
|
||||||
|
L'entièreté du contenu de Memento Dev est disponible publiquement et est sous licence **CC BY-NC-SA 4.0**.
|
||||||
|
Cela signifie que tu peux le partager et le réutiliser, tant que tu respectes les conditions de la licence.
|
||||||
|
|
||||||
|
## Conditions de la licence
|
||||||
|
|
||||||
|
La licence **CC BY-NC-SA 4.0** impose les conditions suivantes :
|
||||||
|
|
||||||
|
- **Attribution** : Tu dois donner le crédit approprié, fournir un lien vers la licence et indiquer si des modifications ont été apportées.
|
||||||
|
Tu peux le faire de la manière suivante :
|
||||||
|
- En ajoutant un lien vers la page d'accueil de Memento Dev : [https://memento-dev.fr](https://memento-dev.fr)
|
||||||
|
- En ajoutant un lien vers la licence : [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)
|
||||||
|
- **Pas d'utilisation commerciale** : Tu ne peux pas utiliser le matériel à des fins commerciales.
|
||||||
|
|
||||||
|
## Écoles, entreprises et utilisateurs réutilisant le contenu de Memento Dev
|
||||||
|
|
||||||
|
Un grand merci à ces entités qui utilisent le contenu de Memento Dev pour leurs formations ou leurs projets ! 🙏
|
||||||
|
|
||||||
|
- [Coda](https://coda.school)
|
||||||
|
- [O'clock](https://oclock.io)
|
||||||
|
- [Wild Code School](https://wildcodeschool.com)
|
||||||
|
|
||||||
|
{% callout type="note" title="Tu utilises mon contenu et tu souhaites apparaître ici ?" %}
|
||||||
|
|
||||||
|
Pour figurer sur cette page, tu peux tout simplement m'en faire la demande par [email _(gauthier@gauthierdaniels.fr)_](mailto:gauthier@gauthierdaniels?subject=Demande%20d'ajout%20sur%20la%20page%20partages%20et%20r%C3%A9utilisations%20Memento%20Dev).
|
||||||
|
|
||||||
|
{% /callout %}
|
||||||
@ -5,6 +5,7 @@ import { DocsLayout } from "@syntax/DocsLayout";
|
|||||||
import Markdoc from "@markdoc/markdoc";
|
import Markdoc from "@markdoc/markdoc";
|
||||||
import { Fence } from "@syntax/Fence";
|
import { Fence } from "@syntax/Fence";
|
||||||
import yaml from "js-yaml";
|
import yaml from "js-yaml";
|
||||||
|
import { Link } from "@/components/common/Link";
|
||||||
|
|
||||||
const { nodes: defaultNodes, Tag } = Markdoc;
|
const { nodes: defaultNodes, Tag } = Markdoc;
|
||||||
|
|
||||||
@ -68,6 +69,10 @@ const nodes = {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
link: {
|
||||||
|
...defaultNodes.link,
|
||||||
|
render: Link,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default nodes;
|
export default nodes;
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
import type { OnPageTransitionEndAsync } from "vike/types";
|
import type { OnPageTransitionEndAsync } from "vike/types";
|
||||||
|
|
||||||
export const onPageTransitionEnd: OnPageTransitionEndAsync = async () => {
|
export const onPageTransitionEnd: OnPageTransitionEndAsync = async () => {
|
||||||
console.log("Page transition end");
|
|
||||||
document.querySelector("body")?.classList.remove("page-is-transitioning");
|
document.querySelector("body")?.classList.remove("page-is-transitioning");
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
import type { OnPageTransitionStartAsync } from "vike/types";
|
import type { OnPageTransitionStartAsync } from "vike/types";
|
||||||
|
|
||||||
export const onPageTransitionStart: OnPageTransitionStartAsync = async () => {
|
export const onPageTransitionStart: OnPageTransitionStartAsync = async () => {
|
||||||
console.log("Page transition start");
|
|
||||||
document.querySelector("body")?.classList.add("page-is-transitioning");
|
document.querySelector("body")?.classList.add("page-is-transitioning");
|
||||||
};
|
};
|
||||||
|
|||||||
@ -91,7 +91,7 @@ class DocsService {
|
|||||||
|
|
||||||
const ast = Markdoc.parse(content);
|
const ast = Markdoc.parse(content);
|
||||||
const title = ast.attributes?.frontmatter?.match(/^title:\s*(.*?)\s*$/m)?.[1];
|
const title = ast.attributes?.frontmatter?.match(/^title:\s*(.*?)\s*$/m)?.[1];
|
||||||
const description = ast.attributes?.frontmatter?.match(/^description:\s*(.*?)\s*$/m)?.[1];
|
const description = ast.attributes?.frontmatter?.match(/^description:\s*(.*?)\s*$/m)?.[1]?.replaceAll('"', "");
|
||||||
const sections: DocSection[] = [[title, null, []]];
|
const sections: DocSection[] = [[title, null, []]];
|
||||||
|
|
||||||
this.extractSections(ast, sections);
|
this.extractSections(ast, sections);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user