chore: wip and publish

gatsby-config.js

@@ -113,6 +113,7 @@ module.exports = {
  nodeType: 'Mdx',
  // set `fields.draft` to `false` for all nodes when NODE_ENV is
  // 'development'
+ pickDraft: node => node.frontmatter.publish !== true,
  publishDraft: process.env.NODE_ENV === 'development',
  },
  },

gatsby-node.js

@@ -12,7 +12,6 @@ const LOAD_ALL_MDX_QUERY = print(gql`
  frontmatter {
  title
  date
- draft
  slug
  }
  }

package.json

@@ -7,7 +7,7 @@
  "dev": "gatsby develop",
  "start": "gatsby develop",
  "build": "gatsby build",
- "serve": "gatsby serve",
+ "serve": "gatsby serve -p 8001",
  "clean": "gatsby clean",
  "vercel:prod": "vercel --prod"
  },

src/pages/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import classnames from 'classnames';
 import { graphql as gql, useStaticQuery, Link } from 'gatsby';
 import { CalendarIcon, TagIcon } from '@primer/octicons-react';
 import dayjs from 'dayjs';
@@ -8,8 +9,11 @@ import Layout from 'components/layout';
 export const LOAD_ALL_POSTS_QUERY = gql`
  query LoadAllPosts {
  allMdx(
+ filter: {
+ frontmatter: { type: { eq: "post" } }
+ fields: { draft: { eq: false } }
+ }
  sort: { order: DESC, fields: frontmatter___date }
- filter: { frontmatter: { type: { eq: "post" } }, fields: { draft: { eq: false } } }
  ) {
  totalCount
  edges {
@@ -19,6 +23,8 @@ export const LOAD_ALL_POSTS_QUERY = gql`
  date
  tags
  slug
+ publish
+ wip
  }
  }
  }
@@ -47,13 +53,27 @@ const Index: React.FC = () => {
  <Layout padding={false} siteMetadata={siteMetadata}>
  {allMdx.edges.map(({ node }) => {
  const {
- frontmatter: { slug, title, date, tags },
+ frontmatter: { slug, title, date, tags, publish, wip },
  } = node;
  return (
  <article className="border-bottom px-3 pt-3 pb-2" key={slug}>
- <Link className="text-color-primary" to={slug}>
- {title}
- </Link>
+ <span className="d-flex flex-items-center">
+ {!publish && (
+ <span className="State State--small mr-2 f6">Local</span>
+ )}
+ {wip && (
+ <span className="Label Label--secondary mr-2 f6">WIP</span>
+ )}
+ <Link
+ className={classnames({
+ 'text-color-primary': publish,
+ 'text-color-secondary-muted': !publish,
+ })}
+ to={slug}
+ >
+ {title}
+ </Link>
+ </span>
  <p className="f6 mt-2 text-color-secondary">
  <span className="d-inline-block mr-3">
  <CalendarIcon size={14} verticalAlign="text-top" />

src/styles/index.scss

@@ -4,6 +4,7 @@
 @import "@primer/css/layout";
 @import "@primer/css/markdown";
 @import "@primer/css/alerts";
+@import "@primer/css/labels";
 @import "@primer/css/buttons";
 @import "@primer/css/tooltips";
 @import "@primer/css/blankslate";

src/templates/post.tsx

@@ -3,6 +3,7 @@ import { Helmet } from 'react-helmet';
 import { graphql as gql } from 'gatsby';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
 import {
+ ToolsIcon,
  ClockIcon,
  StopIcon,
  CalendarIcon,
@@ -41,6 +42,7 @@ export const LOAD_POST_QUERY = gql`
  link
  tags
  keywords
+ wip
  lasting
  translated
  invalid
@@ -61,22 +63,28 @@ export const LOAD_POST_QUERY = gql`
 `;
 
 const Post: React.FC<Props> = ({ data }) => {
- const { mdx, site: { siteMetadata } } = data;
+ const {
+ mdx,
+ site: { siteMetadata },
+ } = data;
  const {
  type,
  title,
  date,
  tags,
  keywords,
  link,
+ wip,
  lasting,
  translated,
  invalid,
  no_comment,
  } = mdx.frontmatter;
 
  useLayoutEffect(() => {
- const pres = document.querySelectorAll<HTMLPreElement>('pre.grvsc-container');
+ const pres = document.querySelectorAll<HTMLPreElement>(
+ 'pre.grvsc-container'
+ );
  pres.forEach((pre) => {
  const code = pre.querySelector('code');
  const div = document.createElement('div');
@@ -87,9 +95,17 @@ const Post: React.FC<Props> = ({ data }) => {
 
  if (pre.className.includes('prompt-')) {
  pre.querySelectorAll<HTMLSpanElement>('.grvsc-line').forEach((line) => {
- const source = line.querySelector<HTMLSpanElement>('.grvsc-source > span');
- if (!source || !source.innerText.trim().length || source.innerText.startsWith(' ')) {
- line.querySelector('.grvsc-line-number').classList.add('no-line-number');
+ const source = line.querySelector<HTMLSpanElement>(
+ '.grvsc-source > span'
+ );
+ if (
+ !source ||
+ !source.innerText.trim().length ||
+ source.innerText.startsWith(' ')
+ ) {
+ line
+ .querySelector('.grvsc-line-number')
+ .classList.add('no-line-number');
  }
  });
  }
@@ -117,33 +133,36 @@ const Post: React.FC<Props> = ({ data }) => {
  )}
  {link && (
  <span className="d-inline-block mr-3">
- <CopyIcon
- className="mr-1"
- size={12}
- verticalAlign="unset"
- />
+ <CopyIcon className="mr-1" size={12} verticalAlign="unset" />
  <Copy link={link} />
  </span>
  )}
  </p>
  )}
+ {wip && (
+ <Alert>
+ <ToolsIcon />
+ This post is a work in progress, come back later.
+ </Alert>
+ )}
  {!invalid && outdated && (
  <Alert>
  <ClockIcon />
- This post was written more than {createdAt.fromNow()}, some
- information may be outdated.
+ This post was written more than {createdAt.fromNow()}, it may be
+ partially or completely outdated.
  </Alert>
  )}
  {!invalid && translated && (
  <Alert color="warn">
  <Googletranslate className="octicon" size="1em" />
- This post was translated by Google, some wording may be incorrect.
+ This post was translated by Google.
  </Alert>
  )}
  {invalid && (
  <Alert color="error" closeable={false}>
  <StopIcon />
- This post is no longer valid (likely due to the content is way too outdated).
+ This post is no longer valid (likely due to the content is way too
+ outdated).
  </Alert>
  )}
  {!invalid && (