Forem: CY

Put Footer at The Bottom with CSS Flexbox

CY — Mon, 02 Aug 2021 10:17:07 +0000

I thought I knew how to use Flexbox to put a footer at the bottom until I read @5t3ph's "ModernCSS 01". I used to wrap <header> and <main> in a div together along with a <footer> then add justify-content: space-between; on the body to make <footer> at the bottom. But Stephanie's solution is using margin-top: auto;! It's extremely inspiring.

To figure out this one trick I learned and discovered more things.

By the way, the cover image is my solution, it's not bad, but it could be better.

I've learned from Josh W Comeau's CSS course that flexbox is a completely different layout mode than "the normal one". And margins don't collapse on flexbox.
For block level elements (with certain width size), the auto value of margin would take up all available space in the given direction (left/right). This is why we use margin: 0 auto; to center a block element.
Because there's no margin collapse on flexbox, when apply an margin-top: auto to an flexbox element, the margin would horizontally take up that available space, just like the vertical effect on block elements. This is why there's a margin-top: auto; trick in Stephanie's solution.

In this pen I put in an article block with margin-left: auto; for compare.

I hope this article could help people know more about CSS flexbox.

Export Multiple Components in Index File

CY — Mon, 05 Jul 2021 06:30:11 +0000

Export Multiple Components

When I structure a React app, I'd like to put the components which are in the same category but with different styles in the same folder. Something like this:

/- components
    /- Card
        /- CardLeftMedia.js
        /- CardRightMedia.js
        /- CardTopMedia.js

So, I need to import & export them in a index.js file. Here's the simple solution:

// components/Card/index.js

export { default as CardLeftMedia } from "./CardLeftMedia";
export { default as CardRightMedia } from "./CardRightMedia";
export { default as CardTopMedia } from "./CardTopMedia";

They're named exports, and I import them with curly braces:

// pages/Home.js

import { CardLeftMedia } from "../components/Card";

Export One Component as Default

There's another scenario like this:

/- components
    /- Card
        /- Card.js
        /- Card.module.css

To export Card.js, I also add an index file:

// components/Card/index.js

export { default } import "./Card";

It's a default export and I could import it directly:

// pages/Home.js

import Card from "../components/Card";

More information about ES6 modules: ECMAScript 6 modules: the final syntax.

Table of Content for MDX with Next.js

CY — Mon, 21 Jun 2021 12:08:52 +0000

I use Next.js & MDX for my personal website and some documents, I want to display a "table of content", a list of headings, for each article.

I've tried the plugin remark-toc but it's too complex (for me). I spend hours still couldn't make the toc work... So, I tried to write it by myself.

Get The List of Headings

Here's the code for getting the list of headings:

// ./components/PostLayout.js

import { renderToString } from "react-dom/server";
import { MDXProvider } from "@mdx-js/react";

import MDXComponents from "./MDXComponents";

const PostLayout = ({ children }) => {
  const contentString = renderToString(children);

  const getHeadings = (source) => {
    const regex = /<h2>(.*?)<\/h2>/g;

    if (source.match(regex)) {
      return source.match(regex).map((heading) => {
        const headingText = heading.replace("<h2>", "").replace("</h2>", "");

        const link = "#" + headingText.replace(/ /g, "_").toLowerCase();

        return {
          text: headingText,
          link,
        };
      });
    }

    return [];
  };

  const headings = getHeadings(contentString);

  return (
    <>
      {/* ... */}

      {headings.length > 0 ? (
        <ol>
          {headings.map((heading) => (
            <li key={heading.text}>
              <a href={heading.link}>{heading.text}</a>
            </li>
          ))}
        </ol>
      ) : null}

      <MDXProvider components={MDXComponents}>
        <Container>{children}</Container>
      </MDXProvider>
    </>
  );
};

Add IDs to Headings

I use the MDXProvider to render the Markdown content, then customize the components in a separated file.

Here's the customized h2:

// ./components/MDXComponents.js

const Heading2 = ({ children }) => {
  const idText = children.replace(/ /g, "_").toLowerCase();

  return <h2 id={idText}>{children}</h2>;
};

const MDXComponents = {
  h2: Heading2,
  // ...
};

export default MDXComponents;

Now, everything works as I expected. I made a Next.js & MDX starter, click here to visit the repo could find the whole code.