Card component can be optimized for cleaner code in pages

[mrboen94]

Currently the card component is structured poorly. We can make the title into props and pass them into the card component like so
<Card title={node.frontmatter.title} /> etc

This means that the card components itself can have more styling options according to this design:

We want a color in the top right corner of the card to make it possible to easily see the different types of posts on the all posts page.

There is a nice little guide here on how to restructure the code in blogpostCard component: https://medium.com/better-programming/build-a-reusable-responsive-card-component-with-styled-components-3ca14933f7e5

[ARKEOLOGIST]

I would like to work on this issue if possible. Some guidance is always welcome!

[mrboen94]

Help is always appreciated, I will make a little writeup sometime tomorrow if you need some help getting started 👌🏻

[mrboen94]

I would like to work on this issue if possible. Some guidance is always welcome!

I will try to give you some guidance in this comment, if you have any further questions don't be afraid to ask.

The blogpostCard.js component currently has a lot of useless css in it as you can see here:

Removing the css is not necessary, but I want the component to take in a few other props like /title, description, color, etc../. Where color is the color of the dot in the top right corner. (The rest is pretty much self explanatory).

Something akin to this:

(Dont look at the comment, we currently have no use for non linked cards as there will always be provided a link).

This way we will be able to map through the markdown posts like so:

This means that the code in index.js, other.js and notes.js can go from this:

         <Card important={important}>
            <article key={node.fields.slug}>
              <small>{node.frontmatter.date}</small>
              {tags && tags.length > 0 ? ` - ` : ``}
              <Tags
                style={{
                  color: important ? "white" : "gray",
                }}
              >
                {tags}
              </Tags>
              <StyledH2>
                <StyledLink
                  to={node.fields.slug}
                  style={{
                    color: important ? "white" : "black",
                    textDecorationColor: important ? "white" : "black",
                  }}
                >
                  {title}
                </StyledLink>
              </StyledH2>
              <section>
                <p
                  dangerouslySetInnerHTML={{
                    __html: node.frontmatter.description || node.excerpt,
                  }}
                />
              </section>
            </article>
          </Card>

To this:

<Card color={color} title={title} tags={tags} description={description} important={important} /*etc...*/ />

You dont need to implement the color to be chosen (this will be done with a new metadata tag in the markdown files or something similar). But it should be implemented like the image represents in the original issue. So basically a div with background color x, that will be chosen through a prop in the card component.

I havent tested the css below, but I imagine the code will look something like this:

const ColorDot = styled.css`
    position: fixed;
    top: 12px;
    right: 12px;
    background-color: ${(props) => (color ? "color-if-provided" : "color-if-not-provided";
    width: 24px;
    height: 24px;
    border-radius: 12px;
`;

I hope this explains it a bit further and that you are able to use this information to solve this issue. Good luck! 😄