Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit 8aaa0656 authored by Plumtree3D's avatar Plumtree3D
Browse files

feat: filter by tag

parent 3a8f616e
No related branches found
No related tags found
1 merge request!10Draft: Resolve "Howto filter blog article from erternal git repo"
Pipeline #12603 passed
...@@ -6,7 +6,7 @@ authors: ...@@ -6,7 +6,7 @@ authors:
title: Docusaurus Core Team title: Docusaurus Core Team
url: https://github.com/wgao19 url: https://github.com/wgao19
image_url: https://github.com/wgao19.png image_url: https://github.com/wgao19.png
tags: [hola, docusaurus] tags: [hola, docusaurus, Lydra]
--- ---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
import React from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import BlogSidebar from '@theme/BlogSidebar';
export default function BlogLayout(props) {
const {sidebar, toc, children, ...layoutProps} = props;
const hasSidebar = sidebar && sidebar.items.length > 0;
return (
<Layout {...layoutProps}>
<div className="container margin-vert--lg">
<div className="row">
LOL
<BlogSidebar sidebar={sidebar} />
<main
className={clsx('col', {
'col--7': hasSidebar,
'col--9 col--offset-1': !hasSidebar,
})}
itemScope
itemType="http://schema.org/Blog">
lol
{children}
</main>
{toc && <div className="col col--2">{toc}</div>}
</div>
</div>
</Layout>
);
}
...@@ -27,11 +27,15 @@ function BlogListPageMetadata(props) { ...@@ -27,11 +27,15 @@ function BlogListPageMetadata(props) {
} }
function BlogListPageContent(props) { function BlogListPageContent(props) {
const {metadata, items, sidebar} = props; const {metadata, items, sidebar} = props;
console.log(sidebar)
const stuff = []
items.forEach(element => {
element.content.frontMatter.tags.includes("Lydra") && stuff.push(element)
});
return ( return (
<> <>
lol
<BlogLayout sidebar={sidebar}> <BlogLayout sidebar={sidebar}>
<BlogPostItems items={items} /> <BlogPostItems items={stuff} />
<BlogListPaginator metadata={metadata} /> <BlogListPaginator metadata={metadata} />
</BlogLayout> </BlogLayout>
</> </>
......
import React from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import styles from './styles.module.css';
export default function Tag({permalink, label, count}) {
return (
<Link
href={permalink}
className={clsx(
styles.tag,
count ? styles.tagWithCount : styles.tagRegular,
)}>
{label}
{count && <span>{count}</span>}
</Link>
);
}
:root {
--docusaurus-tag-list-border: var(--ifm-color-emphasis-300);
}
.tag {
border: 1px solid var(--docusaurus-tag-list-border);
transition: border var(--ifm-transition-fast);
}
.tag:hover {
--docusaurus-tag-list-border: var(--ifm-link-color);
text-decoration: none;
}
.tagRegular {
border-radius: var(--ifm-global-radius);
padding: 0.2rem 0.5rem 0.3rem;
font-size: 90%;
}
.tagWithCount {
display: flex;
align-items: center;
position: relative;
padding: 0 0.5rem 0 1rem;
border-left: 0;
}
.tagWithCount::before,
.tagWithCount::after {
content: '';
position: absolute;
top: 50%;
border: 1px solid var(--docusaurus-tag-list-border);
transition: inherit;
}
.tagWithCount::before {
right: 100%;
transform: translate(50%, -50%) rotate(-45deg);
width: 1.18rem;
height: 1.18rem;
border-right: 0;
border-bottom: 0;
}
.tagWithCount::after {
left: 0;
transform: translateY(-50%);
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
}
.tagWithCount span {
background: var(--ifm-color-secondary);
color: var(--ifm-color-black);
font-size: 0.7rem;
line-height: 1.2;
border-radius: var(--ifm-global-radius);
padding: 0.1rem 0.4rem;
margin-left: 0.3rem;
}
import React from 'react';
import {listTagsByLetters} from '@docusaurus/theme-common';
import Tag from '@theme/Tag';
import styles from './styles.module.css';
function TagLetterEntryItem({letterEntry}) {
return (
<article>
<h2>{letterEntry.letter}</h2>
<ul className="padding--none">
{letterEntry.tags.map((tag) => (
<li key={tag.permalink} className={styles.tag}>
LOLilol
<Tag {...tag} />
</li>
))}
</ul>
<hr />
</article>
);
}
export default function TagsListByLetter({tags}) {
const letterList = listTagsByLetters(tags);
return (
<section className="margin-vert--lg">
LOLOL
{letterList.map((letterEntry) => (
<TagLetterEntryItem
key={letterEntry.letter}
letterEntry={letterEntry}
/>
))}
</section>
);
}
.tag {
display: inline-block;
margin: 0.5rem 0.5rem 0 1rem;
}
import React from 'react';
import clsx from 'clsx';
import Translate from '@docusaurus/Translate';
import Tag from '@theme/Tag';
import styles from './styles.module.css';
export default function TagsListInline({tags}) {
return (
<>
<b>
<Translate
id="theme.tags.tagsListLabel"
description="The label alongside a tag list">
Tags:
</Translate>
</b>
<ul className={clsx(styles.tags, 'padding--none', 'margin-left--sm')}>
{tags.map(({label, permalink: tagPermalink}) => (
<li key={tagPermalink} className={styles.tag}>
<Tag label={label} permalink={tagPermalink} />
</li>
))}
</ul>
</>
);
}
.tags {
display: inline;
}
.tag {
margin: 0 0.4rem 0.5rem 0;
display: inline-block;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment