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

Initial commit

Browse source
This commit is contained in:
Edward Shen 2020-11-27 11:08:32 -05:00
commit 9f5cc2fcfc
Signed by: edward
GPG key ID: 19182661E818369F
27 changed files with 14772 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.eslintignore Normal file
View file

@ -0,0 +1,6 @@
# don't ever lint node_modules
node_modules
# don't lint build output (make sure it's set to your correct build folder name)
dist
# don't lint nyc coverage output
coverage

14
.eslintrc.js Normal file
View file

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

69
.gitignore vendored Normal file
View file

@ -0,0 +1,69 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Typescript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# dotenv environment variable files
.env*
# gatsby files
.cache/
public
# Mac files
.DS_Store
# Yarn
yarn-error.log
.pnp/
.pnp.js
# Yarn Integrity file
.yarn-integrity

4
.prettierignore Normal file
View file

@ -0,0 +1,4 @@
.cache
package.json
package-lock.json
public

4
.prettierrc Normal file
View file

@ -0,0 +1,4 @@
{
"arrowParens": "avoid",
"semi": false
}

14
LICENSE Normal file
View file

@ -0,0 +1,14 @@
The BSD Zero Clause License (0BSD)
Copyright (c) 2020 Gatsby Inc.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.

99
README.md Normal file
View file

@ -0,0 +1,99 @@
<!-- AUTO-GENERATED-CONTENT:START (STARTER) -->
<p align="center">
<a href="https://www.gatsbyjs.com">
<img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
</a>
</p>
<h1 align="center">
Gatsby's hello-world starter
</h1>
Kick off your project with this hello-world boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.
_Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.com/docs/gatsby-starters/)._
## 🚀 Quick start
1. **Create a Gatsby site.**
Use the Gatsby CLI to create a new site, specifying the hello-world starter.
```shell
# create a new Gatsby site using the hello-world starter
gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-world
```
1. **Start developing.**
Navigate into your new site’s directory and start it up.
```shell
cd my-hello-world-starter/
gatsby develop
```
1. **Open the source code and start editing!**
Your site is now running at `http://localhost:8000`!
_Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.com/tutorial/part-five/#introducing-graphiql)._
Open the `my-hello-world-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!
## 🧐 What's inside?
A quick look at the top-level files and directories you'll see in a Gatsby project.
.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md
1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”.
3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.
4. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.
5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.com/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser.
6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.com/docs/gatsby-config/) for more detail).
7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.com/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
8. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.com/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.
9. **`LICENSE`**: This Gatsby starter is licensed under the 0BSD license. This means that you can see this file as a placeholder and replace it with your own license.
10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**
11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
12. **`README.md`**: A text file containing useful reference information about your project.
## 🎓 Learning Gatsby
Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start:
- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.com/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.com/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
## 💫 Deploy
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-hello-world)
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/gatsbyjs/gatsby-starter-hello-world)
<!-- AUTO-GENERATED-CONTENT:END -->

2
gatsby-browser.js Normal file
View file

@ -0,0 +1,2 @@
import './src/styles/global.css';
import "prismjs/themes/prism-solarizedlight.css";

109
gatsby-config.js Normal file
View file

@ -0,0 +1,109 @@
/**
* Configure your Gatsby site with this file.
*
* See: https://www.gatsbyjs.com/docs/gatsby-config/
*/
module.exports = {
plugins: [
'gatsby-plugin-eslint',
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'pages',
path: `${__dirname}/src/pages`,
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'notes',
path: `${__dirname}/src/notes`,
},
},
{
resolve: 'gatsby-plugin-typography',
options: {
pathToConfigModule: 'src/utils/typography',
},
},
{
resolve: 'gatsby-plugin-mdx',
options: {
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-prismjs`,
options: {
// Class prefix for <pre> tags containing syntax highlighting;
// defaults to 'language-' (e.g. <pre class="language-js">).
// If your site loads Prism into the browser at runtime,
// (e.g. for use with libraries like react-live),
// you may use this to prevent Prism from re-processing syntax.
// This is an uncommon use-case though;
// If you're unsure, it's best to use the default value.
classPrefix: "language-",
// This is used to allow setting a language for inline code
// (i.e. single backticks) by creating a separator.
// This separator is a string and will do no white-space
// stripping.
// A suggested value for English speakers is the non-ascii
// character '›'.
inlineCodeMarker: null,
// This lets you set up language aliases. For example,
// setting this to '{ sh: "bash" }' will let you use
// the language "sh" which will highlight using the
// bash highlighter.
aliases: {},
// This toggles the display of line numbers globally alongside the code.
// To use it, add the following line in gatsby-browser.js
// right after importing the prism color scheme:
// require("prismjs/plugins/line-numbers/prism-line-numbers.css")
// Defaults to false.
// If you wish to only show line numbers on certain code blocks,
// leave false and use the {numberLines: true} syntax below
showLineNumbers: false,
// If setting this to true, the parser won't handle and highlight inline
// code used in markdown i.e. single backtick code like `this`.
noInlineHighlight: false,
// This adds a new language definition to Prism or extend an already
// existing language definition. More details on this option can be
// found under the header "Add new language definition or extend an
// existing language" below.
languageExtensions: [
{
language: "superscript",
extend: "javascript",
definition: {
superscript_types: /(SuperType)/,
},
insertBefore: {
function: {
superscript_keywords: /(superif|superelse)/,
},
},
},
],
// Customize the prompt used in shell output
// Values below are default
prompt: {
user: "root",
host: "localhost",
global: false,
},
// By default the HTML entities <>&'" are escaped.
// Add additional HTML escapes by providing a mapping
// of HTML entities and their escape value IE: { '}': '&#123;' }
escapeEntities: {},
},
},
{
resolve: 'gatsby-remark-smartypants',
options: {
dashes: 'oldschool',
}
},
]
}
},
],
};

37
gatsby-node.js Normal file
View file

@ -0,0 +1,37 @@
const path = require("path");
exports.createPages = async ({ actions, graphql, reporter }) => {
const { createPage } = actions;
const noteTemplate = path.resolve(`src/templates/note.tsx`);
const result = await graphql(`{
allMdx(
limit: 10,
filter: {fileAbsolutePath: {glob: "**/src/notes/*"}}
) {
edges {
node {
frontmatter {
path
}
id
}
}
}
}`);
if (result.errors) {
reporter.panicOnBuild(`Error while running GraphQL query.`);
return;
}
result.data.allMdx.edges.forEach(({ node }) => {
createPage({
path: `/notes/${node.frontmatter.path}`,
component: noteTemplate,
context: {
id: node.id,
}
});
});
}

50
package.json Normal file
View file

@ -0,0 +1,50 @@
{
"name": "gatsby-starter-hello-world",
"private": true,
"description": "A simplified bare-bones starter for Gatsby",
"version": "0.1.0",
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"dependencies": {
"@mdx-js/mdx": "^1.6.18",
"@mdx-js/react": "^1.6.18",
"gatsby": "^2.24.63",
"gatsby-plugin-mdx": "^1.2.41",
"gatsby-plugin-react-helmet": "^3.3.11",
"gatsby-plugin-typography": "^2.5.11",
"gatsby-remark-prismjs": "^3.5.13",
"gatsby-remark-smartypants": "^2.3.11",
"gatsby-source-filesystem": "^2.3.30",
"gatsby-transformer-remark": "^2.8.35",
"prismjs": "^1.21.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-helmet": "^6.1.0",
"react-typography": "^0.16.19",
"typography": "^0.16.19"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.2.0",
"@typescript-eslint/parser": "^4.2.0",
"eslint": "^7.9.0",
"eslint-loader": "^4.0.2",
"gatsby-plugin-eslint": "^2.0.8",
"prettier": "2.1.1",
"typescript": "^4.0.3"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}

8
src/components/item.module.css Normal file
View file

@ -0,0 +1,8 @@
.project-item {
display: flex;
align-items: baseline;
}
.project-title {
margin-right: 1rem;
}

10
src/components/item.tsx Normal file
View file

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

20
src/components/navbar.tsx Normal file
View file

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

58
src/notes/2020-09-24-moral-licenses-cant-exist copy.mdx Normal file
View file

@ -0,0 +1,58 @@
---
path: "test"
date: 2020-09-24
title: "Moral licenses can't exist"
---
In the last few years there has been multiple pushes for software developers to
take responsibility for the social damage their software causes. While sentiment
for large tech corportaions have never been too positive, there's been a recent
trend social responsibility in the open source and libre communities. The most
well known instance of this is when a Lerna maintainer merged in a [modified MIT
license][lerna-license] forbidding specific entities from using Lerna, but this
isn't the only instance of such "social good" licenses. You
#### Licenses aren't nuanced
#### Case study: Lerna License
The original GitHub Pull Request can be found [here][lerna-pr], and I highly
suggest reading all of it and the related links in lieu of the recap below.
##### What happened?
The sudden change from the MIT license to the Lerna license brought upon a very
dramatic response from the internet. That one PR was hit the top of many
subreddits and the top of hackernews. Microsoft, a directly named forbidden
entity, had temporarily paused some of its work due to legal concerns The internet then responds, drawing dozens of
comments and issues on GitHub on both the original Pull Request and the
subsequent reversion, forcing the original author of the Lerna license to step
in, before finally removing the original author of the Lerna license from the
GitHub organization before comments stopped. At some point, Lerna was forked
multiple times in as a contingecy plan in case Lerna kept with its now
short-lived license.
##### Are moral licenses censorship?
> The [inter]Net interprets censorship as damage and routes around it.
The parallels with John Gilmore's message back in 1993 is undeniable, but it
doesn't necessarily mean that these licenses are considered censorship. It
doesn't hurt to consider the question, either.
#### Case study: Anti-Capitialist License
#### Case study: The Hippocratic License
#### Ethical licenses
#### Violations need to be caught
#### Moral licenses can't exist
[lerna-license]: https://raw.githubusercontent.com/lerna/lerna/7963cb713ae77a243336efb422d027928292cf3d/LICENSE
[lerna-pr]: https://github.com/lerna/lerna/pull/1616
[emergence]: https://en.wikipedia.org/wiki/Emergence

239
src/notes/2020-09-30-lorem-ipsum.mdx Normal file
View file

@ -0,0 +1,239 @@
---
path: "lorem-ipsum"
date: 2020-01-01
title: "Lorem Ipsum"
---
# h1 Heading 8-)
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading
## Horizontal Rules
___
---
***
## Typographic replacements
Enable typographer option to see result.
(c) (C) (r) (R) (tm) (TM) (p) (P) +-
test.. test... test..... test?..... test!....
!!!!!! ???? ,, -- ---
"Smartypants, double quotes" and 'single quotes'
## Emphasis
**This is bold text**
__This is bold text__
*This is italic text*
_This is italic text_
~~Strikethrough~~
## Blockquotes
> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.
## Lists
Unordered
+ Create a list by starting a line with `+`, `-`, or `*`
+ Sub-lists are made by indenting 2 spaces:
- Marker character change forces new list start:
* Ac tristique libero volutpat at
+ Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
+ Very easy!
Ordered
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
1. You can use sequential numbers...
1. ...or keep all the numbers as `1.`
Start numbering with offset:
57. foo
1. bar
## Code
Inline `code`
Indented code
// Some comments
line 1 of code
line 2 of code
line 3 of code
Block code "fences"
```
Sample text here...
```
Syntax highlighting
``` js
var foo = function (bar) {
return bar++;
};
...
console.log(foo(5));
```
## Tables
| Option | Description |
| ------ | ----------- |
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
Right aligned columns
| Option | Description |
| ------:| -----------:|
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
## Links
[link text](http://dev.nodeca.com)
[link with title](http://nodeca.github.io/pica/demo/ "title text!")
Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
## Images
![Minion](https://octodex.github.com/images/minion.png)
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
Like links, Images also have a footnote style syntax
![Alt text][id]
With a reference later in the document defining the URL location:
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
## Plugins
The killer feature of `markdown-it` is very effective support of
[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).
### [Emojies](https://github.com/markdown-it/markdown-it-emoji)
> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
>
> Shortcuts (emoticons): :-) :-( 8-) ;)
see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.
### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)
- 19^th^
- H~2~O
<!-- ### [\<ins>](https://github.com/markdown-it/markdown-it-ins) -->
++Inserted text++
<!-- ### [\<mark>](https://github.com/markdown-it/markdown-it-mark) -->
==Marked text==
### [Footnotes](https://github.com/markdown-it/markdown-it-footnote)
Footnote 1 link[^first].
Footnote 2 link[^second].
Inline footnote^[Text of inline footnote] definition.
Duplicated footnote reference[^second].
[^first]: Footnote **can have markup**
and multiple paragraphs.
[^second]: Footnote text.
### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)
Term 1
: Definition 1
with lazy continuation.
Term 2 with *inline markup*
: Definition 2
{ some code, part of Definition 2 }
Third paragraph of definition 2.
_Compact style:_
Term 1
~ Definition 1
Term 2
~ Definition 2a
~ Definition 2b
### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)
This is HTML abbreviation example.
It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
*[HTML]: Hyper Text Markup Language
### [Custom containers](https://github.com/markdown-it/markdown-it-container)
::: warning
*here be dragons*
:::

26
src/notes/2020-10-04-nixies-planning.mdx Normal file
View file

@ -0,0 +1,26 @@
---
path: "nixies-part-1"
date: 2020-10-24
title: "Nixie device: The planning"
---
So one day on eBay I saw a very peculiar listing, a set of 8 B5441A (Also known
as NL5441A). With some goading from my friends, I purchased it. They're small,
only 0.75 inches in diameter, so they can't be too expensive, right?
They were 100 USD each, excluding shipping and taxes.
Yikes.
Welp, I'm now obligated to create something with it---there's no way I'm going
to let nearly a grand sit in a closet. Time to start planning.
### Did I get ripped off?
Short answer: probably. Longer answer: maybe not.
B5441As are a considered a [late style nixie tube][sphere-bc-ca]
[sphere-bc-ca]: https://www.sphere.bc.ca/test/nixies.html#:~:text=B-5441A
http://tube-tester.com/sites/nixie/trade06-nixie-tubes.htm

13
src/pages/404.tsx Normal file
View file

@ -0,0 +1,13 @@
import React from 'react';
import Navbar from "../components/navbar";
export default ({ location }) => {
console.log(location);
return <>
<Navbar />
<p>
In your attempt to search for <code>{location.pathname}</code>, you seem to
have gotten lost instead. Fret not, for there is always a path <a href="/">home</a>.
</p>
</>;
};

25
src/pages/index.mdx Normal file
View file

@ -0,0 +1,25 @@
import Navbar from "../components/navbar";
<Navbar />
-----
> There was once a young man looking in digust, <br />
> looking at code whose memory was unjust. <br />
> &nbsp;&nbsp;&nbsp;&nbsp;In a sleepless stupor he spoke, <br />
> &nbsp;&nbsp;&nbsp;&nbsp;thinking he was quite woke, <br />
> "Ha, I'll just rewrite it in Rust!" <br />
-----
Hey there. I'm just an software engineer with interests in distributed systems,
safety and correctness, cybersecurity, homelabbing, homebrewing (both kinds!),
and keyboards. My favorite language is Rust, and my most disliked is
Python&mdash;I've been bitten by its&hellip; "features" too many times,
unfortunately.
#### Contact Info
The best way to contact me for any reason is by email. My address is [hi (at)
this website], and I'll generally respond in a few days. Feel free to send an
another email if I don't respond in a week or so.

4
src/pages/notes.module.css Normal file
View file

@ -0,0 +1,4 @@
.note-title {
display: flex;
justify-content: space-between;
}

41
src/pages/notes.tsx Normal file
View file

@ -0,0 +1,41 @@
import React from "react";
import Navbar from "../components/navbar";
import { graphql } from "gatsby";
import style from "./notes.module.css";
export default ({ data }) => {
console.log(data);
const posts = data.allMdx.edges;
return <>
<Navbar />
{
posts.map(({ node }) => {
return <article>
<div className={style.noteTitle}>
<h3><a href={`${node.frontmatter.path}`}>{node.frontmatter.title}</a></h3>
<time dateTime={node.frontmatter.date}>{node.frontmatter.date}</time>
</div>
<p>{node.excerpt}</p>
</article>;
})
}
</>;
};
export const query = graphql`
query IndexQuery {
allMdx(sort: {order: ASC, fields: [fileAbsolutePath]}, filter: {fileAbsolutePath: {glob: "**/src/notes/*"}}) {
edges {
node {
excerpt(pruneLength: 250)
frontmatter {
title
date(formatString: "YYYY-MM-DD")
path
}
id
}
}
}
}
`;

22
src/pages/projects/index.tsx Normal file
View file

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

32
src/styles/global.css Normal file
View file

@ -0,0 +1,32 @@
body {
display: flex;
flex-direction: column;
align-items: center;
min-width: 30rem;
width: 30rem;
max-width: 30rem;
margin: 0 auto;
align-items: stretch;
}
a {
color: #000;
}
pre {
padding: 1rem;
}
nav {
display: flex;
align-items: baseline;
margin-top: 2rem;
}
nav h1 {
flex-grow: 1;
font-weight: 100;
}
nav h3 {
margin-left: 1rem;
}

32
src/templates/note.tsx Normal file
View file

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

20
src/utils/typography.js Normal file
View file

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

BIN
static/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

13814
yarn.lock Normal file
View file

File diff suppressed because it is too large Load diff