feat: updated todo page (now issues)

we now display issues as todo, bug, fix etc. with leasot
removed old TODO.md
created component Label and Issue

closes #12, closes #14

.vscode/settings.json

@@ -4,6 +4,10 @@
   "editor.codeActionsOnSave": {
     "source.fixAll": true
   },
+  "todo-tree.filtering.excludeGlobs": [
+    "**/node_modules/**",
+    "**/content/**",
+  ],
   "cSpell.words": [
     "dayjs",
     "dribbble",

metadata.js

@@ -49,13 +49,17 @@ module.exports = {
       link: '/changelog',
     },
     {
-      name: 'Todo',
-      link: '/todo',
+      name: 'Issues',
+      link: '/issues',
     },
     {
       name: 'Imprint',
       link: '/imprint',
     },
+    {
+      name: 'Privacy',
+      link: '/privacy',
+    },
   ],
   social: [
     {

src/components/Issue.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import { Link } from '../elements/Link'
+import Time from './Time'
+import Label from './Label'
+import { MDXRenderer } from 'gatsby-plugin-mdx'
+import DataType from './DataType'
+
+const Issue = ({
+  data: {
+    tag,
+    ref,
+    modifiedTime,
+    line,
+    text,
+    value,
+    file: { relativePath },
+  },
+}) => {
+  const fileUrl = `https://github.com/muuvmuuv/portfolio/blob/master/${relativePath}`
+
+  return (
+    <div className="issue">
+      <div className="issue__header">
+        <Label className="issue__label" text={tag} type={tag} />
+        <span className="issue__ref">({ref ? ref : <DataType type="null" />})</span>
+        <span className="issue__separator">@</span>
+        <Link className="issue__link" href={fileUrl} title={`Go to file`}>
+          {relativePath}#{line}
+        </Link>
+        <Time className="issue__modified" date={modifiedTime} format="LLL" />
+      </div>
+      <div className="issue__body">
+        <MDXRenderer>{value || text}</MDXRenderer>
+      </div>
+    </div>
+  )
+}
+
+export default Issue

src/components/Label.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Label = ({ text, type, className }) => {
+  return <span className={`label label--${type.toLowerCase()} ${className}`}>{text}</span>
+}
+
+export default Label

src/layouts/Article.jsx

@@ -92,15 +92,15 @@ class Article extends React.Component {
 
     return (
       <article {...props}>
-        <header>{toc}</header>
+        {toc && <header>{toc}</header>}
 
         {this.props.mdx ? (
           <MDXRenderer slug={this.props.slug}>{this.props.mdx}</MDXRenderer>
         ) : (
           this.props.children
         )}
 
-        <footer>{/* EMPTY */}</footer>
+        {/* <footer>EMPTY</footer> */}
       </article>
     )
   }

src/pages/todo.jsx → src/pages/issues.jsx

@@ -5,10 +5,11 @@ import { HistoryConsumer } from '../provider/history'
 import Head from '../components/Head'
 import Article from '../layouts/Article'
 import HeroPage from '../components/HeroPage'
+import Issue from '../components/Issue'
 
 class Page extends React.Component {
   state = {
-    pageName: 'Whats next?',
+    pageName: 'Issues issues tissues',
   }
 
   componentDidMount() {
@@ -23,12 +24,7 @@ class Page extends React.Component {
 
   render() {
     const {
-      singleFile: {
-        childMdx: {
-          fields: { slug },
-          body,
-        },
-      },
+      allLeasot: { edges: leasotData },
     } = this.props.data
 
     return (
@@ -37,7 +33,14 @@ class Page extends React.Component {
 
         <HeroPage title={this.state.pageName} />
 
-        <Article slug={slug} mdx={body}></Article>
+        <Article>
+          <h4 className="text-center">
+            More issues will come soon. Waiting for an tissue.
+          </h4>
+          {leasotData.map(({ node: { todo } }, index) => {
+            return <Issue key={index} data={todo} />
+          })}
+        </Article>
       </>
     )
   }
@@ -51,12 +54,20 @@ export default React.forwardRef((props, ref) => (
 
 export const query = graphql`
   query TodoQuery {
-    singleFile(name: { eq: "TODO" }) {
-      childMdx {
-        fields {
-          slug
+    allLeasot(sort: { fields: todo___modifiedTime, order: ASC }) {
+      edges {
+        node {
+          todo {
+            tag
+            ref
+            modifiedTime
+            line
+            value
+            file {
+              relativePath
+            }
+          }
         }
-        body
       }
     }
   }

src/pages/privacy.mdx

@@ -0,0 +1,6 @@
+---
+title: 'Privacy'
+---
+
+Is in its makink. If you need informations, feel free to contact me via email (go to
+imprint).

src/styles/app.scss

@@ -46,6 +46,8 @@
 @import 'components/footnote';
 @import 'components/hidden-content';
 @import 'components/icon';
+@import 'components/issue';
+@import 'components/label';
 @import 'components/language';
 @import 'components/lightbox';
 @import 'components/logo';

src/styles/components/_issue.scss

@@ -0,0 +1,61 @@
+.issue {
+  margin-bottom: var(--spacing-sm);
+  padding-bottom: var(--spacing-sm);
+
+  &:not(:first-of-type) {
+    border-bottom: 1px solid var(--divider-color);
+  }
+
+  &__header {
+    display: grid;
+    grid-template-areas:
+      'label label ref time'
+      'sep link link link';
+    grid-template-columns: auto auto auto 1fr;
+    align-items: center;
+    margin-bottom: var(--spacing-xs);
+    column-gap: var(--spacing-xxs);
+    user-select: none;
+    font-feature-settings: 'case' 1;
+
+    @include breakpoint-up(md) {
+      grid-template-areas: 'label ref sep link time';
+      grid-template-columns: auto auto auto 1fr;
+    }
+  }
+
+  &__label {
+    grid-area: label;
+  }
+
+  &__ref {
+    grid-area: ref;
+    margin-top: 1px;
+    color: var(--text-color-medium);
+    font-size: var(--text-sm);
+  }
+
+  &__separator {
+    grid-area: sep;
+    color: var(--text-color-medium);
+    cursor: default;
+  }
+
+  &__link {
+    grid-area: link;
+  }
+
+  &__modified {
+    grid-area: time;
+
+    @include breakpoint-up(md) {
+      justify-self: end;
+    }
+  }
+
+  // we need to reset these because we are in an <Article />
+  &__body p {
+    margin-bottom: 0;
+    text-align: left;
+  }
+}