Skip to content
Permalink
Browse files

feat: add notes

  • Loading branch information...
tanhauhau committed Jun 21, 2019
1 parent 2d82f8a commit 50c82259749f7608d1c81062eac1f357b9437485
@@ -4,6 +4,11 @@ My personal blog. Generated from [Gatsby's blog starter](https://github.com/gats

To run locally, `yarn` and `yarn dev`, then open `http://localhost:8000`.

## Notes

You can find [my notes here](./content/notes).
They are unstructured, inspired by [@swyx](https://github.com/sw-yx)'s [daily notes](https://github.com/sw-yx/sw-yx.github.io/tree/20f471fbeca350fb5f397aafb71ada9075b9fac0/_posts). It's going to be my daily notes of little things that I learned, discovered, or having in my mind.

## Issue

If you find any typos or you have any comments on the articles, please feel free to [open an issue](https://github.com/tanhauhau/tanhauhau.github.io/issues/new/choose).
File renamed without changes.
@@ -1,6 +1,3 @@

---

**`parsed-resolve` -> `described-resolve`**

## DescriptionFilePlugin
@@ -10,5 +7,5 @@
- `descriptionFileData`
- `descriptionFileRoot`
- `relativePath`
---


@@ -0,0 +1,5 @@
- [awesome-dev-podcast](https://github.com/sw-yx/awesome-dev-podcasts)

- gatsby notes
- graphql editor is in http://localhost:8000/___graphql
@@ -12,20 +12,13 @@ module.exports = {
},
},
plugins: [
{
...['blog', 'talk', 'notes'].map(type => ({
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/blog`,
name: `blog`,
path: `${__dirname}/content/${type}`,
name: type,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/talk`,
name: `talk`,
},
},
})),
{
resolve: `gatsby-source-filesystem`,
options: {
@@ -18,6 +18,8 @@ exports.createPages = ({ graphql, actions }) => {
fields {
slug
type
noteDate
noteTitle
}
frontmatter {
title
@@ -38,23 +40,37 @@ exports.createPages = ({ graphql, actions }) => {
const componentMap = {
blog: path.resolve(`./src/templates/blog-post.js`),
talk: path.resolve(`./src/templates/talk-post.js`),
notes: path.resolve(`./src/templates/note-post.js`),
};

posts.forEach((post, index) => {
const component = componentMap[post.node.fields.type];
const previous =
index === posts.length - 1 ? null : posts[index + 1].node;
const next = index === 0 ? null : posts[index - 1].node;
// split into different lists
const notes = [];
const others = [];
posts.forEach(post => {
if (post.node.fields.type === 'notes') {
notes.push(post);
} else {
others.push(post);
}
});

const lists = [notes, others];
lists.forEach(list => {
list.forEach((post, index) => {
const component = componentMap[post.node.fields.type];
const previous =
index === list.length - 1 ? null : list[index + 1].node;
const next = index === 0 ? null : list[index - 1].node;

createPage({
path: post.node.fields.slug,
component,
context: {
type: post.node.fields.type,
slug: post.node.fields.slug,
previous,
next,
},
createPage({
path: post.node.fields.slug,
component,
context: {
...post.node.fields,
previous,
next,
},
});
});
});

@@ -63,23 +79,41 @@ exports.createPages = ({ graphql, actions }) => {
};

const regexp = new RegExp(`^${__dirname}/content/([^/]+)/`);
const noteRegexp = new RegExp('(\\d{4}-\\d{2}-\\d{2})\\s+-\\s+(.+).md$');
const SLUG_PREFIX = { notes: '/notes' };

exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions;

if (node.internal.type === `MarkdownRemark`) {
const value = createFilePath({ node, getNode });
const postType = node.fileAbsolutePath.match(regexp)[1];

const slugPrefix = SLUG_PREFIX[postType] || '';
createNodeField({
name: `slug`,
node,
value,
value: slugPrefix + createFilePath({ node, getNode }),
});

const postType = node.fileAbsolutePath.match(regexp)[1];
createNodeField({
name: `type`,
node,
value: postType,
});

if (postType === 'notes') {
// create date and title out of filename
const [_, date, noteTitle] = node.fileAbsolutePath.match(noteRegexp);
createNodeField({
name: 'noteDate',
node,
value: date,
});
createNodeField({
name: 'noteTitle',
node,
value: noteTitle,
});
}
}
};
@@ -54,6 +54,8 @@ class Layout extends React.Component {
{'❤️'}
</span>
{''}
<Link to={`/notes`}>notes</Link>
{''}
<a href="https://twitter.com/lihautan">twitter</a>
{''}
<a href="https://github.com/tanhauhau">github</a>
@@ -76,7 +76,10 @@ export const pageQuery = graphql`
}
}
allMarkdownRemark(
filter: { frontmatter: { wip: { ne: true } } }
filter: {
frontmatter: { wip: { ne: true } }
fields: { type: { ne: "notes" } }
}
sort: { fields: [frontmatter___date], order: DESC }
) {
edges {
@@ -0,0 +1,64 @@
import React from 'react';
import { Link, graphql } from 'gatsby';

import Layout from '../components/layout';
import SEO from '../components/seo';
import { rhythm } from '../utils/typography';

class NoteIndex extends React.Component {
render() {
const notes = this.props.data.allMarkdownRemark.edges;

return (
<Layout location={this.props.location} title="Back to Home Page">
<SEO
title="Li Hau's Notes"
keywords={[`blog`, `gatsby`, `javascript`, `react`, 'notes']}
/>
<h1>Li Hau's Notes</h1>
{notes.map(({ node: { fields: { slug, noteDate, noteTitle } } }) => {
return (
<h4
key={slug}
style={{
marginBottom: rhythm(0.75),
marginTop: rhythm(0.75),
}}
>
<Link style={{ boxShadow: `none` }} to={slug}>
{`[${noteDate}] ${noteTitle}`}
</Link>
</h4>
);
})}
<div style={{ marginTop: rhythm(2) }} />
</Layout>
);
}
}
export default NoteIndex;
export const pageQuery = graphql`
query {
allMarkdownRemark(
filter: {
frontmatter: { wip: { ne: true } }
fields: { type: { eq: "notes" } }
}
sort: { fields: [fields___noteDate], order: DESC }
) {
edges {
node {
excerpt
fields {
slug
type
noteDate
noteTitle
}
}
}
}
}
`;
@@ -0,0 +1,84 @@
import React from 'react';
import { Link, graphql } from 'gatsby';

import Layout from '../components/layout';
import SEO from '../components/seo';
import { rhythm, scale } from '../utils/typography';

class NotePostTemplate extends React.Component {
render() {
const {
markdownRemark: {
html,
excerpt,
fields: { noteDate, noteTitle },
},
} = this.props.data;
const { previous, next } = this.props.pageContext;
console.log(previous, next);
return (
<Layout location={this.props.location} title="Li Hau's Notes">
<SEO title={noteTitle} description={excerpt} />
<h1>
<span style={{ ...scale(1 / 2) }}>[{noteDate}]</span> {noteTitle}
</h1>
<div dangerouslySetInnerHTML={{ __html: html }} />
<hr
style={{
marginBottom: rhythm(1),
}}
/>

<ul
style={{
display: `flex`,
flexWrap: `wrap`,
justifyContent: `space-between`,
listStyle: `none`,
padding: 0,
}}
>
<li>
{previous && (
<Link to={previous.fields.slug} rel="prev">
← [{previous.fields.noteDate}] {previous.fields.noteTitle}
</Link>
)}
</li>
<li>
{next && (
<Link to={next.fields.slug} rel="next">
[{next.fields.noteDate}] {next.fields.noteTitle} →
</Link>
)}
</li>
</ul>
</Layout>
);
}
}

export default NotePostTemplate;

export const pageQuery = graphql`
query NotePostBySlug($slug: String!) {
site {
siteMetadata {
title
author
}
}
markdownRemark(fields: { slug: { eq: $slug } }) {
html
excerpt(pruneLength: 160)
fields {
noteDate
noteTitle
}
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
}
}
}
`;

0 comments on commit 50c8225

Please sign in to comment.
You can’t perform that action at this time.