feat: filter by tag

blog/2019-05-28-first-blog-post.md

@@ -6,7 +6,7 @@ authors:
   title: Docusaurus Core Team
   url: https://github.com/wgao19
   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

src/theme/BlogLayout/index.js

-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>
-  );
-}

src/theme/BlogListPage/index.js

@@ -27,11 +27,15 @@ function BlogListPageMetadata(props) {
 }
 function BlogListPageContent(props) {
   const {metadata, items, sidebar} = props;
+  console.log(sidebar)
+  const stuff = []
+  items.forEach(element => {
+    element.content.frontMatter.tags.includes("Lydra") && stuff.push(element)
+  });
   return (
     <>
-    lol
     <BlogLayout sidebar={sidebar}>
-      <BlogPostItems items={items} />
+      <BlogPostItems items={stuff} />
       <BlogListPaginator metadata={metadata} />
     </BlogLayout>
     </>

src/theme/Tag/index.js

-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>
-  );
-}

src/theme/Tag/styles.module.css

-: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;
-}

src/theme/TagsListByLetter/index.js

-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>
-  );
-}

src/theme/TagsListByLetter/styles.module.css

-.tag {
-  display: inline-block;
-  margin: 0.5rem 0.5rem 0 1rem;
-}

src/theme/TagsListInline/index.js

-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>
-    </>
-  );
-}

src/theme/TagsListInline/styles.module.css

-.tags {
-  display: inline;
-}
-
-.tag {
-  margin: 0 0.4rem 0.5rem 0;
-  display: inline-block;
-}