edward
/
website
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Run prettier

master
Edward Shen 2020-11-27 19:39:21 -05:00
parent e4df0010b5
commit f766bf3eaf
Signed by: edward
GPG Key ID: F350507060ED6C90
11 changed files with 133 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.eslintrc.js
View File

@ -1,14 +1,9 @@
module.exports = { module.exports = {
root: true, root: true,
parser: '@typescript-eslint/parser', parser: '@typescript-eslint/parser',
plugins: [ plugins: ['@typescript-eslint'],
'@typescript-eslint',
],
globals: { globals: {
__PATH_PREFIX__: true, __PATH_PREFIX__: true,
}, },
extends: [ extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
'eslint:recommended', };
'plugin:@typescript-eslint/recommended',
],
};

4
.prettierrc
View File

@ -1,4 +1,4 @@
{ {
"arrowParens": "avoid", "singleQuote": true,
"semi": false "jsxSingleQuote": true,
} }

18
gatsby-config.js
View File

@ -41,7 +41,7 @@ module.exports = {
// you may use this to prevent Prism from re-processing syntax. // you may use this to prevent Prism from re-processing syntax.
// This is an uncommon use-case though; // This is an uncommon use-case though;
// If you're unsure, it's best to use the default value. // If you're unsure, it's best to use the default value.
classPrefix: "language-", classPrefix: 'language-',
// This is used to allow setting a language for inline code // This is used to allow setting a language for inline code
// (i.e. single backticks) by creating a separator. // (i.e. single backticks) by creating a separator.
// This separator is a string and will do no white-space // This separator is a string and will do no white-space
@ -71,8 +71,8 @@ module.exports = {
// existing language" below. // existing language" below.
languageExtensions: [ languageExtensions: [
{ {
language: "superscript", language: 'superscript',
extend: "javascript", extend: 'javascript',
definition: { definition: {
superscript_types: /(SuperType)/, superscript_types: /(SuperType)/,
}, },
@ -86,8 +86,8 @@ module.exports = {
// Customize the prompt used in shell output // Customize the prompt used in shell output
// Values below are default // Values below are default
prompt: { prompt: {
user: "root", user: 'root',
host: "localhost", host: 'localhost',
global: false, global: false,
}, },
// By default the HTML entities <>&'" are escaped. // By default the HTML entities <>&'" are escaped.
@ -100,13 +100,13 @@ module.exports = {
resolve: 'gatsby-remark-smartypants', resolve: 'gatsby-remark-smartypants',
options: { options: {
dashes: 'oldschool', dashes: 'oldschool',
} },
}, },
] ],
} },
}, },
{ {
resolve: 'gatsby-plugin-mdx-frontmatter' resolve: 'gatsby-plugin-mdx-frontmatter',
}, },
], ],
}; };

14
gatsby-node.js
View File

@ -1,4 +1,4 @@
const path = require("path"); const path = require('path');
exports.createPages = async ({ actions, graphql, reporter }) => { exports.createPages = async ({ actions, graphql, reporter }) => {
const { createPage } = actions; const { createPage } = actions;
@ -28,15 +28,17 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
return; return;
} }
const posts = result.data.allMdx.edges.filter(({ node }) => !node.frontmatter.hidden); const posts = result.data.allMdx.edges.filter(
({ node }) => !node.frontmatter.hidden
);
const postsPerPage = 10; const postsPerPage = 10;
const numPages = Math.ceil(posts.length / postsPerPage); const numPages = Math.ceil(posts.length / postsPerPage);
const rootPath = "/notes"; const rootPath = '/notes';
Array.from({ length: numPages }).forEach((_, i) => { Array.from({ length: numPages }).forEach((_, i) => {
createPage({ createPage({
path: rootPath + (i === 0 ? '' : `/${i + 1}`), path: rootPath + (i === 0 ? '' : `/${i + 1}`),
component: path.resolve("./src/templates/notes.tsx"), component: path.resolve('./src/templates/notes.tsx'),
context: { context: {
limit: postsPerPage, limit: postsPerPage,
skip: i * postsPerPage, skip: i * postsPerPage,
@ -44,7 +46,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
currentPage: i + 1, currentPage: i + 1,
rootPath, rootPath,
}, },
}) });
}); });
// Must decouple to ensure hidden pages are still rendered, just excluded from // Must decouple to ensure hidden pages are still rendered, just excluded from
@ -58,7 +60,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
}, },
}); });
}); });
} };
exports.createSchemaCustomization = ({ actions: { createTypes } }) => { exports.createSchemaCustomization = ({ actions: { createTypes } }) => {
createTypes(` createTypes(`
type Mdx implements Node { type Mdx implements Node {

8
src/components/item.tsx
View File

@ -1,10 +1,10 @@
import React from "react"; import React from 'react';
import style from "./item.module.css"; import style from './item.module.css';
import { Link } from "gatsby"; import { Link } from 'gatsby';
export default (props) => ( export default (props) => (
<Link to={props.to} className={style.projectItem}> <Link to={props.to} className={style.projectItem}>
<h3 className={style.projectTitle}>{props.title}</h3> <h3 className={style.projectTitle}>{props.title}</h3>
<p className={style.projectSubtitle}>{props.subtitle}</p> <p className={style.projectSubtitle}>{props.subtitle}</p>
</Link> </Link>
); );

37
src/components/navbar.tsx
View File

@ -1,20 +1,31 @@
import React from 'react'; import React from 'react';
import { Link } from "gatsby"; import { Link } from 'gatsby';
const ExactLink = (props) => <Link const ExactLink = (props) => (
to={props.to} <Link
style={{ textDecoration: "none" }} to={props.to}
activeStyle={{ color: "red" }} style={{ textDecoration: 'none' }}
partiallyActive={!props.home}> activeStyle={{ color: 'red' }}
{props.children} partiallyActive={!props.home}
</Link >; >
{props.children}
</Link>
);
export default function Navbar() { export default function Navbar() {
return ( return (
<nav> <nav>
<h1><ExactLink to="/" home={true}>Edward Shen</ExactLink></h1> <h1>
<h3><ExactLink to="/projects">Projects</ExactLink></h3> <ExactLink to='/' home={true}>
<h3><ExactLink to="/notes">Notes</ExactLink></h3> Edward Shen
</nav > </ExactLink>
</h1>
<h3>
<ExactLink to='/projects'>Projects</ExactLink>
</h3>
<h3>
<ExactLink to='/notes'>Notes</ExactLink>
</h3>
</nav>
); );
}; }

21
src/pages/404.tsx
View File

@ -1,17 +1,22 @@
import { PageProps } from 'gatsby'; import { PageProps } from 'gatsby';
import React from 'react'; import React from 'react';
import Navbar from "../components/navbar"; import Navbar from '../components/navbar';
export default ({ location }: PageProps): JSX.Element => { export default ({ location }: PageProps): JSX.Element => {
const messages = [ const messages = [
<p> <p>
In your attempt to search for <code>{location.pathname}</code>, you seem to In your attempt to search for <code>{location.pathname}</code>, you seem
have gotten lost instead. Fret not, for there is always a path <a href="/">home</a>. to have gotten lost instead. Fret not, for there is always a path{' '}
<a href='/'>home</a>.
</p>,
<p>
Not all who wander are lost, but you seem to be. Go <a href='/'>home</a>?
</p>, </p>,
<p>Not all who wander are lost, but you seem to be. Go <a href="/">home</a>?</p>
]; ];
return <> return (
<Navbar /> <>
{messages[Math.floor(Math.random() * messages.length)]} <Navbar />
</>; {messages[Math.floor(Math.random() * messages.length)]}
</>
);
}; };

20
src/pages/projects/index.tsx
View File

@ -1,22 +1,12 @@
import React from "react"; import React from 'react';
import Navbar from '../../components/navbar'; import Navbar from '../../components/navbar';
import Item from "../../components/item"; import Item from '../../components/item';
export default (): JSX.Element => ( export default (): JSX.Element => (
<> <>
<Navbar /> <Navbar />
<Item <Item title='Shlink' subtitle='subtitle' to='test' />
title="Shlink" <Item title='hello world' subtitle='subtitle' />
subtitle="subtitle" <Item title='hello world' subtitle='subtitle' />
to="test"
/>
<Item
title="hello world"
subtitle="subtitle"
/>
<Item
title="hello world"
subtitle="subtitle"
/>
</> </>
); );

35
src/templates/note.tsx
View File

@ -1,27 +1,30 @@
import React from "react"; import React from 'react';
import Navbar from '../components/navbar'; import Navbar from '../components/navbar';
import { graphql } from "gatsby"; import { graphql } from 'gatsby';
import { MDXRenderer } from 'gatsby-plugin-mdx'; import { MDXRenderer } from 'gatsby-plugin-mdx';
export default ({ data }) => { export default ({ data }) => {
const { frontmatter, body } = data.mdx; const { frontmatter, body } = data.mdx;
return <> return (
<Navbar /> <>
<main> <Navbar />
<h1>{frontmatter.title}</h1> <main>
<MDXRenderer>{body}</MDXRenderer> <h1>{frontmatter.title}</h1>
</main> <MDXRenderer>{body}</MDXRenderer>
</>; </main>
</>
);
}; };
export const query = graphql` export const query = graphql`
query NotesIndexQuery($id: String!) { query NotesIndexQuery($id: String!) {
mdx(id: {eq: $id}) { mdx(id: { eq: $id }) {
frontmatter { frontmatter {
title title
}
tableOfContents
body
} }
tableOfContents
body
} }
}`; `;

53
src/templates/notes.tsx
View File

@ -3,10 +3,10 @@
* See note.tsx for rendering a single note. * See note.tsx for rendering a single note.
*/ */
import React from "react"; import React from 'react';
import Navbar from "../components/navbar"; import Navbar from '../components/navbar';
import { graphql } from "gatsby"; import { graphql } from 'gatsby';
import style from "./notes.module.css"; import style from './notes.module.css';
export default ({ data, pageContext }): JSX.Element => { export default ({ data, pageContext }): JSX.Element => {
const posts = data.allMdx.edges; const posts = data.allMdx.edges;
@ -14,9 +14,20 @@ export default ({ data, pageContext }): JSX.Element => {
let prevPageLink = null; let prevPageLink = null;
if (currentPage === 2) { if (currentPage === 2) {
prevPageLink = <a href={rootPath} className={style.prevPageLink}>&lt;&lt;</a>; prevPageLink = (
<a href={rootPath} className={style.prevPageLink}>
&lt;&lt;
</a>
);
} else if (currentPage !== 1) { } else if (currentPage !== 1) {
prevPageLink = <a href={rootPath + '/' + (currentPage - 1)} className={style.prevPageLink}>&lt;&lt;</a>; prevPageLink = (
<a
href={rootPath + '/' + (currentPage - 1)}
className={style.prevPageLink}
>
&lt;&lt;
</a>
);
} }
const shouldDisplayNav = numPages !== 1; const shouldDisplayNav = numPages !== 1;
@ -25,41 +36,47 @@ export default ({ data, pageContext }): JSX.Element => {
<> <>
<Navbar /> <Navbar />
{posts.map(({ node }) => { {posts.map(({ node }) => {
const frontmatter = node.frontmatter const frontmatter = node.frontmatter;
return ( return (
<article key={frontmatter.title}> <article key={frontmatter.title}>
<div className={style.noteTitle}> <div className={style.noteTitle}>
<h3> <h3>
<a href={`${rootPath + '/' + frontmatter.path}`}>{frontmatter.title}</a> <a href={`${rootPath + '/' + frontmatter.path}`}>
{frontmatter.title}
</a>
</h3> </h3>
<time dateTime={frontmatter.date}>{frontmatter.date}</time> <time dateTime={frontmatter.date}>{frontmatter.date}</time>
</div> </div>
<p>{node.excerpt}</p> <p>{node.excerpt}</p>
</article> </article>
) );
})} })}
{shouldDisplayNav && {shouldDisplayNav && (
<p className={style.paginationNav}> <p className={style.paginationNav}>
{prevPageLink} {prevPageLink}
{currentPage} {currentPage}
{currentPage !== numPages && {currentPage !== numPages && (
<a <a
href={rootPath + '/' + (currentPage + 1)} href={rootPath + '/' + (currentPage + 1)}
className={style.nextPageLink}> className={style.nextPageLink}
>
&gt;&gt; &gt;&gt;
</a> </a>
} )}
</p> </p>
} )}
</> </>
) );
} };
export const query = graphql` export const query = graphql`
query IndexQuery($skip: Int!, $limit: Int!) { query IndexQuery($skip: Int!, $limit: Int!) {
allMdx( allMdx(
sort: { order: DESC, fields: [frontmatter___date] } sort: { order: DESC, fields: [frontmatter___date] }
filter: { fileAbsolutePath: { glob: "**/src/notes/*" }, frontmatter: {hidden: {ne: true}} } filter: {
fileAbsolutePath: { glob: "**/src/notes/*" }
frontmatter: { hidden: { ne: true } }
}
limit: $limit limit: $limit
skip: $skip skip: $skip
) { ) {
@ -76,4 +93,4 @@ export const query = graphql`
} }
} }
} }
` `;

17
src/utils/typography.js
View File

@ -1,20 +1,25 @@
import Typography from "typography"; import Typography from 'typography';
const typography = new Typography({ const typography = new Typography({
baseFontSize: '18px', baseFontSize: '18px',
baseLineHeight: 1.666, baseLineHeight: 1.666,
headerFontFamily: [ headerFontFamily: [
'M PLUS 1p', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif' 'M PLUS 1p',
'Helvetica Neue',
'Segoe UI',
'Helvetica',
'Arial',
'sans-serif',
], ],
bodyFontFamily: ['Georgia', 'serif'], bodyFontFamily: ['Georgia', 'serif'],
googleFonts: [ googleFonts: [
{ {
name: "M PLUS 1p", name: 'M PLUS 1p',
styles: ['100', '400'], styles: ['100', '400'],
} },
] ],
}); });
// Export helper functions // Export helper functions
export const { scale, rhythm, options } = typography; export const { scale, rhythm, options } = typography;
export default typography; export default typography;