init
This commit is contained in:
commit
2ba343ff1a
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
node_modules/
|
||||
.cache/
|
||||
public
|
||||
src/gatsby-types.d.ts
|
||||
54
README.md
Normal file
54
README.md
Normal file
@ -0,0 +1,54 @@
|
||||
<p align="center">
|
||||
<a href="https://www.gatsbyjs.com/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts">
|
||||
<img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
|
||||
</a>
|
||||
</p>
|
||||
<h1 align="center">
|
||||
Gatsby minimal TypeScript starter
|
||||
</h1>
|
||||
|
||||
## 🚀 Quick start
|
||||
|
||||
1. **Create a Gatsby site.**
|
||||
|
||||
Use the Gatsby CLI to create a new site, specifying the minimal TypeScript starter.
|
||||
|
||||
```shell
|
||||
# create a new Gatsby site using the minimal TypeScript starter
|
||||
npm init gatsby
|
||||
```
|
||||
|
||||
2. **Start developing.**
|
||||
|
||||
Navigate into your new site’s directory and start it up.
|
||||
|
||||
```shell
|
||||
cd my-gatsby-site/
|
||||
npm run develop
|
||||
```
|
||||
|
||||
3. **Open the code and start customizing!**
|
||||
|
||||
Your site is now running at http://localhost:8000!
|
||||
|
||||
Edit `src/pages/index.tsx` to see your site update in real-time!
|
||||
|
||||
4. **Learn more**
|
||||
|
||||
- [Documentation](https://www.gatsbyjs.com/docs/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts)
|
||||
|
||||
- [Tutorials](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts)
|
||||
|
||||
- [Guides](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts)
|
||||
|
||||
- [API Reference](https://www.gatsbyjs.com/docs/api-reference/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts)
|
||||
|
||||
- [Plugin Library](https://www.gatsbyjs.com/plugins?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts)
|
||||
|
||||
- [Cheat Sheet](https://www.gatsbyjs.com/docs/cheat-sheet/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts)
|
||||
|
||||
## 🚀 Quick start (Gatsby Cloud)
|
||||
|
||||
Deploy this starter with one click on [Gatsby Cloud](https://www.gatsbyjs.com/cloud/):
|
||||
|
||||
[<img src="https://www.gatsbyjs.com/deploynow.svg" alt="Deploy to Gatsby Cloud">](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-starter-minimal-ts)
|
||||
30
contents/2020-08-13-First-Post.mdx
Normal file
30
contents/2020-08-13-First-Post.mdx
Normal file
@ -0,0 +1,30 @@
|
||||
---
|
||||
title: "First Post"
|
||||
date: "2020.08.13"
|
||||
slug: "posts/first-post"
|
||||
---
|
||||
|
||||
New blog
|
||||
|
||||
The old one looked sussy and it was difficult to read the content
|
||||
|
||||
This one look simple, 👍👍👍👍👍👍👍👍👍👍👍👍👍👍
|
||||
|
||||
the challenge is, how to make a good content
|
||||
|
||||
|
||||
```rs
|
||||
bubble_sort<T: Ord>(arr: &mut [T]) {
|
||||
for i in 0..arr.len() {
|
||||
for j in 0..arr.len() - 1 - i {
|
||||
if arr[j] > arr [j + 1] {
|
||||
arr.swap(j, j + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`mdx test`
|
||||
```
|
||||
|
||||
|
||||
|
||||
42
contents/2021-01-20-Supervillain.mdx
Normal file
42
contents/2021-01-20-Supervillain.mdx
Normal file
@ -0,0 +1,42 @@
|
||||
---
|
||||
title: "Supervillain"
|
||||
date: "2020.01.20"
|
||||
slug: "posts/Supervillain"
|
||||
archive: true
|
||||
---
|
||||
|
||||
I got hooked into hip-hop after i watched Straight Outta Compton movie.
|
||||
because of that movie i started to listen pac biggie snoop dre eminem rakim, slick, yada yada
|
||||
but i heavily listened to kendrick and j cole at that time, it was mostly songs from To pimp and butterfly and 4 your eyez only, since it came out in 2015.7:52
|
||||
at first i only listened to the sound of the instrument.
|
||||
|
||||
<br/>
|
||||
|
||||
Daniel Dumile also known as MF DOOM,King Ghidrah, Zev Love, DOOM, Viktor Vaughn is one of the most legendary MC in the world.
|
||||
i've been DOOM fan since i was a teenager.Hes one of my favorite MCs who brought me to hip hop music when my friends are listening to pop-punk, rock, pop, EDM and metal.
|
||||
|
||||
|
||||
my first DOOM song was Accordion
|
||||
|
||||
<p style={{ textAlign: 'center' }}>
|
||||
<iframe src="https://open.spotify.com/embed/track/5jAvbp8kEnRPToi4Bzcvzt?si=9f4dbnThS22Avmvn7O3lhg"
|
||||
width="400" height="80" frameborder="0" allowtrasparency="true" allow="encrypted-media"
|
||||
></iframe>
|
||||
</p>
|
||||
|
||||
i discovered this song by accident
|
||||
i was looking for an new hip hop songs that i want to listen
|
||||
i was watching to Rage Against the Machine - Killing In The Name Live Of on youtube
|
||||
there was no autoplay back then, i belive it was mid 2015.
|
||||
so after the song stopped i had to scroll the "other video" section to start another videos.
|
||||
so, i scrolled the section and it was there "Madvillain Accordion".i was intrigued with the thumbnail of the videos
|
||||
i was like "What's this dude with a mask on , and it has like 4-5m views...well lets try to listened to it i guess"
|
||||
after i listened to it, i cant stop it
|
||||
its so goddamn good
|
||||
the melody, bass, kick, and it has an accordion sound too
|
||||
i was like "goddamn ive never heard this kind of music"
|
||||
my first impression of this song is mainly because of the sounds of the instrument not the vocals
|
||||
|
||||
after i listened this song 3 times i want to know the lyrics cause i wasnt good at english(well right now my engilsh havent get better either)
|
||||
so i played the music and then i read the lyrics at same time, and when i read the lyrics at the beginning till the end of the song i was like
|
||||
"wtf is this rhyme, this wordplay is crazy"
|
||||
37
contents/2021-03-04-Rust-DataType.mdx
Normal file
37
contents/2021-03-04-Rust-DataType.mdx
Normal file
@ -0,0 +1,37 @@
|
||||
---
|
||||
title: "Rust I"
|
||||
date: "2020.03.04"
|
||||
slug: "posts/rust-i"
|
||||
archive: true
|
||||
---
|
||||
|
||||
|
||||
so i tried to implement insertion sort using rust, why ? im bored but i find something interesting stuff
|
||||
|
||||
```rs
|
||||
let mut arr = [5,3,2,4,1,6];
|
||||
for n in 1..arr.len() {
|
||||
let key = arr[n];
|
||||
let mut i = n - 1;
|
||||
while i >= 0 && arr[i] > key {
|
||||
arr[(i+1)] = arr[i];
|
||||
i -= 1;
|
||||
}
|
||||
arr[(i+1)] = key;
|
||||
}
|
||||
println!('{:?}', arr);
|
||||
```
|
||||
|
||||
it's basic stuff no sugarcoated , buuuut it failed of course it and the compiler said
|
||||
```
|
||||
warning: comparison is useless due to type limits
|
||||
--> insertion_sort.rs:26:11
|
||||
|
|
||||
26 | while i >= 0 && arr2[i] > key {
|
||||
| ^^^^^^
|
||||
|
|
||||
= note: `#[warn(unused_comparisons)]` on by default
|
||||
```
|
||||
|
||||
well my lil snailass brain thought "unused comparison??!! what ?
|
||||
|
||||
12
contents/2021-09-30-Daily-Website.mdx
Normal file
12
contents/2021-09-30-Daily-Website.mdx
Normal file
@ -0,0 +1,12 @@
|
||||
---
|
||||
title: "Web Surfing"
|
||||
date: "2021.09.30"
|
||||
slug: "posts/web-surfing"
|
||||
updated: "2022.04.26"
|
||||
---
|
||||
|
||||
|
||||
|
||||
I start to log all website that i surfed, might be useful who knows [here](https://pear-vase-c18.notion.site/Daily-Website-25acb3b7241648218c051e4eb503e72a "DEEZ")
|
||||
|
||||
and some intresting sites that i [bookmarked](https://pear-vase-c18.notion.site/Interesting-sites-3c8e0b02644d49569c27d8895987e34b "NUTS")
|
||||
117
contents/2022-05-13-Snail_sort.mdx
Normal file
117
contents/2022-05-13-Snail_sort.mdx
Normal file
@ -0,0 +1,117 @@
|
||||
---
|
||||
title: "Snail sort"
|
||||
date: "2022.05.13"
|
||||
slug: "posts/refactor"
|
||||
---
|
||||
|
||||
I was looking for some file/s on my computer, but instead i found this:
|
||||
```rs
|
||||
//main.rs
|
||||
fn main () {
|
||||
let mut res: Vec<i32> = Vec::new();
|
||||
let mut pos = "right";
|
||||
let mut vec_index = 0;
|
||||
let mut a = vec!(
|
||||
vec![ 1, 2, 3, 4, 5, 6],
|
||||
vec![20, 21, 22, 23, 24, 7],
|
||||
vec![19, 32, 33, 34, 25, 8],
|
||||
vec![18, 31, 100, 35, 26, 9],
|
||||
vec![17, 30, 29, 28, 27, 10],
|
||||
vec![16, 15, 14, 13, 12, 11],
|
||||
);
|
||||
|
||||
while a.len() != 0 {
|
||||
if pos == "right" {
|
||||
let mut temp_vec = a.clone();
|
||||
for j in 0..a[vec_index].len() {
|
||||
res.push(a[vec_index][j]);
|
||||
temp_vec[vec_index]
|
||||
.retain(|&x| x == a[vec_index][j]);
|
||||
}
|
||||
temp_vec.retain(|x| x.len() != 0 );
|
||||
a = temp_vec;
|
||||
pos = "down";
|
||||
} else if pos == "down" {
|
||||
let mut temp_vec = a.clone();
|
||||
res.push(a[vec_index][a[vec_index].len() - 1]);
|
||||
temp_vec[vec_index]
|
||||
.retain(|&x| x != a[vec_index][a[vec_index].len() - 1]);
|
||||
a = temp_vec;
|
||||
if vec_index + 1 == a.len() {
|
||||
pos = "left";
|
||||
continue;
|
||||
}
|
||||
vec_index += 1;
|
||||
} else if pos == "left" {
|
||||
let rev_temp: Vec<i32> = a[vec_index]
|
||||
.to_vec()
|
||||
.into_iter()
|
||||
.rev()
|
||||
.collect();
|
||||
for j in 0..rev_temp.len() {
|
||||
res.push(rev_temp[j]);
|
||||
}
|
||||
a.pop();
|
||||
pos = "up";
|
||||
} else if pos == "up" {
|
||||
vec_index -= 1;
|
||||
let mut temp_vec = a.clone();
|
||||
if vec_index == 0 {
|
||||
pos = "right";
|
||||
continue;
|
||||
} else {
|
||||
res.push(a[vec_index][0]);
|
||||
temp_vec[vec_index]
|
||||
.retain(|&x| x != a[vec_index][0]);
|
||||
a = temp_vec;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
println!("{:?}", res);
|
||||
}
|
||||
```
|
||||
|
||||
So...I got distracted instead of looking the file/s that I supposed to find,
|
||||
I try to refactor this code 👍.
|
||||
|
||||
Anyway this algorithm is called snailsort algorithm
|
||||
<br/>
|
||||
|
||||
```
|
||||
SnailSort is an algorithm that takes an array of equal-length sub-arrays and then merges them into a
|
||||
single array in a clockwise spiral, starting from the upper-left hand corner[1].
|
||||
|
||||
ex:
|
||||
[
|
||||
[1,2,3],
|
||||
[8,9,4],
|
||||
[7,6,5],
|
||||
]
|
||||
|
||||
return [1,2,3.4.5.6,7,8,9]
|
||||
```
|
||||
|
||||
|
||||
<div style={{ display: "flex", justifyContent: "center" }}>
|
||||
<img src="https://cdn.discordapp.com/attachments/743422487882104837/995679214030291036/unknown.png"/>
|
||||
</div>
|
||||
|
||||
Yeah it's funny.Idk why i worked on snailsort, but i was having fun.
|
||||
<br/>
|
||||
|
||||
anyway here's the refactor [result](https://play.rust-lang.org/?version=stable&mode=debug&edition=2021&gist=f02de1004ba64cde17255802614fed82).Using Match for the routes and Enum to declare the routes avoiding hard coded way
|
||||
like ``pos="left"`` to make it looks cleaner, and i change about those clones fest
|
||||
man, damn look at those clones on my first attempt man we naruto now.Using [VecDeque](https://doc.rust-lang.org/std/collections/struct.VecDeque.html) `VecDeque<slice::Iter<i32>>`
|
||||
i can easily pop, append/extend, and other manipulation that i want.
|
||||
|
||||
<br/>
|
||||
|
||||
aaand i forgor about file/s that i supposed to looking for 💀.
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
References:
|
||||
1. [https://medium.com/@spencerwhitehead7/snail-sort-the-gimmick-sort-goat-310510814eab](https://medium.com/@spencerwhitehead7/snail-sort-the-gimmick-sort-goat-310510814eab)
|
||||
23
data/site-config.ts
Normal file
23
data/site-config.ts
Normal file
@ -0,0 +1,23 @@
|
||||
const siteConfig = {
|
||||
blogPostDir: 'contents',
|
||||
siteTitle: 'nc',
|
||||
pathPrefix: '/',
|
||||
siteDescription: `It's a cold world, bundle up`,
|
||||
siteRss: 'rss.xml',
|
||||
userTwitter: 'ncggro',
|
||||
icon: './src/assets/icons/Ironman-Mask-3-Old-icon.png',
|
||||
userLinks: [
|
||||
{
|
||||
label: 'Twitter',
|
||||
url: 'https://twitter.com/enceanggoro',
|
||||
iconClassName: 'fa fa-twitter'
|
||||
},
|
||||
{
|
||||
label: 'Email',
|
||||
url: 'mailto:ncanggoro@tutanota.com',
|
||||
iconClassName: 'fa fa-envelope'
|
||||
}
|
||||
],
|
||||
}
|
||||
|
||||
export default siteConfig;
|
||||
2
games/snake_game/.gitignore
vendored
Normal file
2
games/snake_game/.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
/target
|
||||
/Cargo.lock
|
||||
12
games/snake_game/Cargo.toml
Normal file
12
games/snake_game/Cargo.toml
Normal file
@ -0,0 +1,12 @@
|
||||
[package]
|
||||
name = "snake_game"
|
||||
version = "0.1.0"
|
||||
edition = "2021"
|
||||
|
||||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||
|
||||
[dependencies]
|
||||
wasm-bindgen = "0.2.84"
|
||||
|
||||
[lib]
|
||||
crate-type = ["cdylib", "rlib"]
|
||||
6
games/snake_game/src/lib.rs
Normal file
6
games/snake_game/src/lib.rs
Normal file
@ -0,0 +1,6 @@
|
||||
use wasm_bindgen::prelude::*;
|
||||
|
||||
#[wasm_bindgen]
|
||||
pub fn greet(s: &str) {
|
||||
println!("hello {s}");
|
||||
}
|
||||
1
gatsby-browser.js
Normal file
1
gatsby-browser.js
Normal file
@ -0,0 +1 @@
|
||||
require("prismjs/themes/prism-tomorrow.css");
|
||||
112
gatsby-config.ts
Normal file
112
gatsby-config.ts
Normal file
@ -0,0 +1,112 @@
|
||||
import type { GatsbyConfig } from "gatsby";
|
||||
|
||||
import siteConfig from './data/site-config';
|
||||
|
||||
const config: GatsbyConfig = {
|
||||
siteMetadata: {
|
||||
title: siteConfig.siteTitle,
|
||||
siteUrl: `https://derivative.my.id`,
|
||||
description: siteConfig.siteDescription,
|
||||
author: siteConfig.siteTitle
|
||||
},
|
||||
// More easily incorporate content into your pages through automatic TypeScript type generation and better GraphQL IntelliSense.
|
||||
// If you use VSCode you can also use the GraphQL plugin
|
||||
// Learn more at: https://gatsby.dev/graphql-typegen
|
||||
graphqlTypegen: true,
|
||||
plugins: [
|
||||
"gatsby-plugin-sass",
|
||||
`gatsby-plugin-image`,
|
||||
"gatsby-remark-images",
|
||||
`gatsby-plugin-sharp`,
|
||||
"gatsby-transformer-sharp",
|
||||
{
|
||||
resolve: "gatsby-transformer-remark",
|
||||
options: {
|
||||
plugins: ["gatsby-remark-gifs"],
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-plugin-mdx`,
|
||||
options: {
|
||||
extensions: [`.md`, `.mdx`],
|
||||
commonmark: true,
|
||||
footnotes: true,
|
||||
pedantic: true,
|
||||
gfm: true,
|
||||
gatsbyRemarkPlugins: [
|
||||
{
|
||||
resolve: `gatsby-remark-images`,
|
||||
options: {
|
||||
maxWidth: 400,
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-remark-prismjs`,
|
||||
options: {
|
||||
classPrefix: "language-",
|
||||
inlineCodeMarker: null,
|
||||
aliases: {
|
||||
sh :"bash",
|
||||
js :"javascript",
|
||||
ts :"typescript",
|
||||
rs :"rust",
|
||||
hs : "haskell",
|
||||
exs :"elixir",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-source-filesystem`,
|
||||
options: {
|
||||
name: `images`,
|
||||
path: `${__dirname}/src/assets/images`,
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-source-filesystem`,
|
||||
options: {
|
||||
name: `gif`,
|
||||
path: `${__dirname}/src/assets/gif`,
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-source-filesystem`,
|
||||
options: {
|
||||
name: `markdown-pages`,
|
||||
path: `${__dirname}/contents`,
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-plugin-manifest`,
|
||||
options: {
|
||||
name: siteConfig.siteTitle,
|
||||
short_name: siteConfig.siteTitle,
|
||||
description: siteConfig.siteDescription,
|
||||
start_url: siteConfig.pathPrefix,
|
||||
background_color: `#4ecca3`,
|
||||
theme_color: `#4ecca3`,
|
||||
display: `minimal-ui`,
|
||||
icon: siteConfig.icon,
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-source-filesystem`,
|
||||
options: {
|
||||
name: `assets`,
|
||||
path: `${__dirname}/src/assets/`,
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: 'gatsby-source-filesystem',
|
||||
options: {
|
||||
"name": "pages",
|
||||
"path": "./src/pages/"
|
||||
},
|
||||
__key: "pages"
|
||||
}]
|
||||
};
|
||||
|
||||
export default config;
|
||||
1
gatsby-develop.sh
Executable file
1
gatsby-develop.sh
Executable file
@ -0,0 +1 @@
|
||||
./node_modules/gatsby-cli/cli.js develop
|
||||
43
gatsby-node.js
Normal file
43
gatsby-node.js
Normal file
@ -0,0 +1,43 @@
|
||||
const path = require("path")
|
||||
|
||||
exports.createPages = async ({ graphql, actions, reporter }) => {
|
||||
const { createPage } = actions
|
||||
const postLayout = path.resolve('./src/pages/Layout/index.tsx');
|
||||
|
||||
const result = await graphql(`
|
||||
query {
|
||||
allMdx {
|
||||
nodes {
|
||||
id
|
||||
frontmatter {
|
||||
slug
|
||||
}
|
||||
internal {
|
||||
contentFilePath
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`)
|
||||
|
||||
if (result.errors) {
|
||||
reporter.panicOnBuild('Error loading MDX result', result.errors)
|
||||
}
|
||||
|
||||
// Create blog post pages.
|
||||
const posts = result.data.allMdx.nodes
|
||||
|
||||
// you'll call `createPage` for each result
|
||||
posts.forEach(node => {
|
||||
createPage({
|
||||
// As mentioned above you could also query something else like frontmatter.title above and use a helper function
|
||||
// like slugify to create a slug
|
||||
path: node.frontmatter.slug,
|
||||
// Provide the path to the MDX content file so webpack can pick it up and transform it into JSX
|
||||
component: `${postLayout}?__contentFilePath=${node.internal.contentFilePath}`,
|
||||
// You can use the values in this context in
|
||||
// our page layout component
|
||||
context: { id: node.id },
|
||||
})
|
||||
})
|
||||
}
|
||||
29526
package-lock.json
generated
Normal file
29526
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
43
package.json
Normal file
43
package.json
Normal file
@ -0,0 +1,43 @@
|
||||
{
|
||||
"name": "not-your-blog",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"description": "not-your-blog",
|
||||
"keywords": [
|
||||
"gatsby"
|
||||
],
|
||||
"scripts": {
|
||||
"start": "gatsby develop",
|
||||
"build": "gatsby build",
|
||||
"serve": "gatsby serve",
|
||||
"clean": "gatsby clean",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mdx-js/react": "^2.3.0",
|
||||
"gatsby": "^5.6.0",
|
||||
"gatsby-plugin-image": "^3.6.0",
|
||||
"gatsby-plugin-manifest": "^5.6.0",
|
||||
"gatsby-plugin-mdx": "^5.6.0",
|
||||
"gatsby-plugin-sass": "^6.6.0",
|
||||
"gatsby-plugin-sharp": "^5.6.0",
|
||||
"gatsby-remark-gifs": "^1.1.0",
|
||||
"gatsby-remark-images": "^7.6.0",
|
||||
"gatsby-remark-prismjs": "^7.6.0",
|
||||
"gatsby-source-filesystem": "^5.6.0",
|
||||
"gatsby-transformer-remark": "^6.6.0",
|
||||
"gatsby-transformer-sharp": "^5.6.0",
|
||||
"prismjs": "^1.29.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"sass": "^1.58.0",
|
||||
"snake_game": "file:games/snake_game/pkg/",
|
||||
"ts-node": "^10.9.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^18.11.18",
|
||||
"@types/react": "^18.0.27",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"typescript": "^4.9.5"
|
||||
}
|
||||
}
|
||||
BIN
src/assets/gif/what.gif
Normal file
BIN
src/assets/gif/what.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/assets/icons/Ironman-Mask-3-Old-icon.png
Normal file
BIN
src/assets/icons/Ironman-Mask-3-Old-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
src/assets/images/12561.png
Normal file
BIN
src/assets/images/12561.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 684 KiB |
BIN
src/assets/images/icon.png
Normal file
BIN
src/assets/images/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/images/mm_food_DOOM.png
Normal file
BIN
src/assets/images/mm_food_DOOM.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
src/assets/images/surf.gif
Normal file
BIN
src/assets/images/surf.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
24
src/components/Base/index.tsx
Normal file
24
src/components/Base/index.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import Header from '../Header';
|
||||
import './styles.scss';
|
||||
import '../../styles/code.scss';
|
||||
|
||||
|
||||
const Base = ({ children }: any) => (
|
||||
<>
|
||||
<div className="ContainerMD">
|
||||
<Header />
|
||||
<div style={{ marginTop: '2rem' }}>
|
||||
<main>{children}</main>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
Base.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
export default Base;
|
||||
326
src/components/Base/styles.scss
Normal file
326
src/components/Base/styles.scss
Normal file
@ -0,0 +1,326 @@
|
||||
html {
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
body {
|
||||
font: 112.5%/1.45em georgia, serif;
|
||||
margin: 0;
|
||||
background-color: #232931;
|
||||
box-sizing: border-box;
|
||||
overflow-y: scroll;
|
||||
font-weight: normal;
|
||||
word-wrap: break-word;
|
||||
font-kerning: normal;
|
||||
font-feature-settings: "kern", "liga", "clig", "calt";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-moz-font-feature-settings: "kern", "liga", "clig", "calt";
|
||||
-ms-font-feature-settings: "kern", "liga", "clig", "calt";
|
||||
-webkit-font-feature-settings: "kern", "liga", "clig", "calt";
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
*:before {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
margin: 0 0 1.45rem 0;
|
||||
padding: 0;
|
||||
}
|
||||
h1 {
|
||||
margin: 0 0 1.45rem 0;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
font-weight: bold;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-size: 2.25rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
h2 {
|
||||
margin: 0 0 1.45rem 0;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
font-family: -apple-system, Helvetica, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
font-weight: bold;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-size: 1.62671rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
h3 {
|
||||
margin: 0 0 1.45rem 0;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
font-weight: bold;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-size: 1.38316rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
h4 {
|
||||
margin: 0 0 1.45rem 0;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
font-family: -apple-system, Helvetica, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
font-weight: bold;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-size: 1rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
h5 {
|
||||
margin: 0 0 1.45rem 0;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
font-weight: bold;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-size: 0.85028rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
h6 {
|
||||
margin: 0 0 1.45rem 0;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
font-weight: bold;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-size: 0.78405rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
hgroup {
|
||||
margin: 0 0 1.45rem 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul {
|
||||
margin: 0 0 1.45rem 1.45rem;
|
||||
padding: 0;
|
||||
list-style-position: outside;
|
||||
list-style-image: none;
|
||||
}
|
||||
ol {
|
||||
margin: 0 0 1.45rem 1.45rem;
|
||||
padding: 0;
|
||||
list-style-position: outside;
|
||||
list-style-image: none;
|
||||
}
|
||||
dl {
|
||||
margin: 0 0 1.45rem 0;
|
||||
padding: 0;
|
||||
}
|
||||
dd {
|
||||
margin: 0 0 1.45rem 0;
|
||||
padding: 0;
|
||||
}
|
||||
p {
|
||||
font-family: "Open Sans",Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
margin: 0 0 0.65rem 0;
|
||||
padding: 0;
|
||||
line-height: 1.9em;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0 0 1.45rem 0;
|
||||
padding: 0;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.42;
|
||||
background: hsla(0, 0%, 0%, 0.04);
|
||||
border-radius: 3px;
|
||||
overflow: auto;
|
||||
word-wrap: normal;
|
||||
padding: 1.45rem;
|
||||
}
|
||||
table {
|
||||
margin: 0 0 1.45rem 0;
|
||||
padding: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.45rem;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
fieldset {
|
||||
margin: 0 0 1.45rem 0;
|
||||
padding: 0;
|
||||
}
|
||||
blockquote {
|
||||
margin: 0 1.45rem 1.45rem 1.45rem;
|
||||
padding: 0;
|
||||
}
|
||||
form {
|
||||
margin: 0 0 1.45rem 0;
|
||||
padding: 0;
|
||||
}
|
||||
noscript {
|
||||
margin: 0 0 1.45rem 0;
|
||||
padding: 0;
|
||||
}
|
||||
iframe {
|
||||
margin: 0 0 1.45rem 0;
|
||||
padding: 0;
|
||||
}
|
||||
hr {
|
||||
margin: 0 0 calc(1.45rem - 1px) 0;
|
||||
padding: 0;;
|
||||
background: hsla(0, 0%, 0%, 0.2);
|
||||
border: none;
|
||||
height: 1px;
|
||||
}
|
||||
address {
|
||||
margin: 0 0 1.45rem 0;
|
||||
padding: 0;
|
||||
}
|
||||
b {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
li {
|
||||
margin-bottom: calc(1.45rem / 2);
|
||||
}
|
||||
ol li {
|
||||
padding-left: 0;
|
||||
}
|
||||
ul li {
|
||||
padding-left: 0;
|
||||
}
|
||||
li > ol {
|
||||
margin-left: 1.45rem;
|
||||
margin-bottom: calc(1.45rem / 2);
|
||||
margin-top: calc(1.45rem / 2);
|
||||
}
|
||||
li > ul {
|
||||
margin-left: 1.45rem;
|
||||
margin-bottom: calc(1.45rem / 2);
|
||||
margin-top: calc(1.45rem / 2);
|
||||
}
|
||||
blockquote *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
li *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
p *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
li > p {
|
||||
margin-bottom: calc(1.45rem / 2);
|
||||
}
|
||||
code {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.45rem;
|
||||
}
|
||||
kbd {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.45rem;
|
||||
}
|
||||
samp {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.45rem;
|
||||
}
|
||||
abbr {
|
||||
border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
|
||||
cursor: help;
|
||||
}
|
||||
acronym {
|
||||
border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
|
||||
cursor: help;
|
||||
}
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
|
||||
cursor: help;
|
||||
text-decoration: none;
|
||||
}
|
||||
thead {
|
||||
text-align: left;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
text-align: left;
|
||||
border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
|
||||
font-feature-settings: "tnum";
|
||||
-moz-font-feature-settings: "tnum";
|
||||
-ms-font-feature-settings: "tnum";
|
||||
-webkit-font-feature-settings: "tnum";
|
||||
padding-left: 0.96667rem;
|
||||
padding-right: 0.96667rem;
|
||||
padding-top: 0.725rem;
|
||||
padding-bottom: calc(0.725rem - 1px);
|
||||
}
|
||||
th:first-child,
|
||||
td:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
th:last-child,
|
||||
td:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
tt,
|
||||
code {
|
||||
background-color: hsla(0, 0%, 0%, 0.04);
|
||||
border-radius: 3px;
|
||||
font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
|
||||
"Liberation Mono", Menlo, Courier, monospace;
|
||||
padding: 0;
|
||||
padding-top: 0.2em;
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
pre code {
|
||||
background: none;
|
||||
line-height: 1.42;
|
||||
}
|
||||
code:before,
|
||||
code:after,
|
||||
tt:before,
|
||||
tt:after {
|
||||
letter-spacing: -0.2em;
|
||||
content: " ";
|
||||
}
|
||||
pre code:before,
|
||||
pre code:after,
|
||||
pre tt:before,
|
||||
pre tt:after {
|
||||
content: "";
|
||||
}
|
||||
.ContainerMD {
|
||||
width: 100%;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-bottom: 150px;
|
||||
}
|
||||
@media only screen and (max-width: 480px) {
|
||||
html {
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
.ContainerMD {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 960px) {
|
||||
.ContainerMD {
|
||||
max-width: 48em;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 600px) {
|
||||
.ContainerMD {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
52
src/components/Header/index.tsx
Normal file
52
src/components/Header/index.tsx
Normal file
@ -0,0 +1,52 @@
|
||||
import { Link } from 'gatsby';
|
||||
import React from 'react';
|
||||
|
||||
import './styles.scss';
|
||||
|
||||
const Header = () => (
|
||||
<header
|
||||
className="HeaderBlock"
|
||||
>
|
||||
<div className="nav-container nav-container-md">
|
||||
<div className="nav-container nav-item nav-item-10">
|
||||
<h4>
|
||||
<Link
|
||||
to="/"
|
||||
className="LinkText"
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
</h4>
|
||||
{/* <h4 className="divider">/</h4>
|
||||
<h4>
|
||||
<Link
|
||||
to="/about"
|
||||
className="LinkText"
|
||||
>
|
||||
Games
|
||||
</Link>
|
||||
</h4>
|
||||
<h4 className="divider">/</h4>
|
||||
<h4>
|
||||
<Link
|
||||
to="/about"
|
||||
className="LinkText"
|
||||
>
|
||||
Gallery
|
||||
</Link>
|
||||
</h4> */}
|
||||
<h4 className="divider">/</h4>
|
||||
<h4>
|
||||
<Link
|
||||
to="/about"
|
||||
className="LinkText"
|
||||
>
|
||||
About
|
||||
</Link>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
export default Header;
|
||||
53
src/components/Header/styles.scss
Normal file
53
src/components/Header/styles.scss
Normal file
@ -0,0 +1,53 @@
|
||||
.LinkText {
|
||||
color: #eeeeee;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
.nav-item-10 {
|
||||
flex-grow: 0;
|
||||
max-width: 83.333333%;
|
||||
flex-basis: 83.333333%;
|
||||
|
||||
.divider {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
color: #eeeeee;
|
||||
}
|
||||
}
|
||||
.nav-item {
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 48em) {
|
||||
.HeaderBlock {
|
||||
margin-top: 4em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.nav-container-md {
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.LinkText {
|
||||
font-size: 14px;
|
||||
}
|
||||
.divider {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
49
src/components/PostList/index.tsx
Normal file
49
src/components/PostList/index.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import './styles.scss';
|
||||
|
||||
class PostList extends React.Component {
|
||||
getPostList() {
|
||||
const postList = [];
|
||||
this.props.postEdges.filter(x => !x.node.frontmatter.archive)
|
||||
.forEach((postEdge) => {
|
||||
postList.push({
|
||||
path: postEdge.node.frontmatter.slug,
|
||||
title: postEdge.node.frontmatter.title,
|
||||
date: postEdge.node.frontmatter.date,
|
||||
});
|
||||
});
|
||||
return postList;
|
||||
}
|
||||
|
||||
render() {
|
||||
const postLists = this.getPostList();
|
||||
|
||||
return (
|
||||
<figure className="listing-figure">
|
||||
<ul className="list">
|
||||
{postLists.map((post) => (
|
||||
<li
|
||||
className="item"
|
||||
key={post.path}
|
||||
>
|
||||
<Link
|
||||
className="link"
|
||||
to={post.path}
|
||||
>
|
||||
<p className="title">
|
||||
{post.title}
|
||||
</p>
|
||||
</Link>
|
||||
<small className="sub">
|
||||
{post.date}
|
||||
</small>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</figure>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PostList;
|
||||
45
src/components/PostList/styles.scss
Normal file
45
src/components/PostList/styles.scss
Normal file
@ -0,0 +1,45 @@
|
||||
.listing-figure {
|
||||
margin: 0 auto;
|
||||
.list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
.link {
|
||||
color: #eeeeee;
|
||||
text-decoration: none;
|
||||
.title {
|
||||
margin: 0;
|
||||
margin-bottom: 0.3em;
|
||||
text-transform: initial;
|
||||
font-size: 20px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.title {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sub {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 0.888888em;
|
||||
color: #eeeeee;
|
||||
justify-content: center;
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
.sub {
|
||||
font-size: 14px
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
36
src/components/seo.tsx
Normal file
36
src/components/seo.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
import { useStaticQuery, graphql } from "gatsby"
|
||||
|
||||
const SEO = ({ description, meta, title }) => {
|
||||
const { site } = useStaticQuery(
|
||||
graphql`
|
||||
query {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
description
|
||||
author
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
)
|
||||
|
||||
const metaDescription = description || site.siteMetadata.description
|
||||
|
||||
return (
|
||||
<>
|
||||
<html lang="en" />
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={metaDescription} />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={metaDescription} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta name="twitter:creator" content={site.siteMetadata.author} />
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default SEO
|
||||
49
src/pages/404.tsx
Normal file
49
src/pages/404.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import * as React from "react"
|
||||
import { Link, HeadFC, PageProps } from "gatsby"
|
||||
|
||||
const pageStyles = {
|
||||
color: "#232129",
|
||||
padding: "96px",
|
||||
fontFamily: "-apple-system, Roboto, sans-serif, serif",
|
||||
}
|
||||
const headingStyles = {
|
||||
marginTop: 0,
|
||||
marginBottom: 64,
|
||||
maxWidth: 320,
|
||||
}
|
||||
|
||||
const paragraphStyles = {
|
||||
marginBottom: 48,
|
||||
}
|
||||
const codeStyles = {
|
||||
color: "#8A6534",
|
||||
padding: 4,
|
||||
backgroundColor: "#FFF4DB",
|
||||
fontSize: "1.25rem",
|
||||
borderRadius: 4,
|
||||
}
|
||||
|
||||
const NotFoundPage: React.FC<PageProps> = () => {
|
||||
return (
|
||||
<main style={pageStyles}>
|
||||
<h1 style={headingStyles}>Page not found</h1>
|
||||
<p style={paragraphStyles}>
|
||||
Sorry 😔, we couldn’t find what you were looking for.
|
||||
<br />
|
||||
{process.env.NODE_ENV === "development" ? (
|
||||
<>
|
||||
<br />
|
||||
Try creating a page in <code style={codeStyles}>src/pages/</code>.
|
||||
<br />
|
||||
</>
|
||||
) : null}
|
||||
<br />
|
||||
<Link to="/">Go home</Link>.
|
||||
</p>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
export default NotFoundPage
|
||||
|
||||
export const Head: HeadFC = () => <title>Not found</title>
|
||||
46
src/pages/Layout/index.tsx
Normal file
46
src/pages/Layout/index.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import React from "react";
|
||||
import { graphql } from "gatsby";
|
||||
import config from '../../../data/site-config';
|
||||
import Base from "../../components/Base";
|
||||
import SEO from "../../components/seo";
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
import './styles.scss';
|
||||
|
||||
const Layout = ({ data, children }) => {
|
||||
const post = data.mdx.frontmatter;
|
||||
return (
|
||||
<Base>
|
||||
<div className="post template">
|
||||
<SEO title={`${post.title} | ${config.siteTitle}`} />
|
||||
<div className="post page">
|
||||
<div className="article figure">
|
||||
<div className="HeaderContainer">
|
||||
<small className="sub">
|
||||
{post.date}
|
||||
</small>
|
||||
<h1 className="title">
|
||||
{post.title}
|
||||
</h1>
|
||||
</div>
|
||||
<MDXProvider>
|
||||
{children}
|
||||
</MDXProvider>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Base>
|
||||
)
|
||||
}
|
||||
|
||||
export const pageQuery = graphql`
|
||||
query($id: String) {
|
||||
mdx(id: { eq: $id }) {
|
||||
frontmatter {
|
||||
title
|
||||
date
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default Layout;
|
||||
29
src/pages/Layout/styles.scss
Normal file
29
src/pages/Layout/styles.scss
Normal file
@ -0,0 +1,29 @@
|
||||
.post {
|
||||
.post {
|
||||
color: white;
|
||||
.HeaderContainer {
|
||||
text-align: center;
|
||||
margin-bottom: 4em;
|
||||
}
|
||||
.article {
|
||||
.article-content {
|
||||
line-height: 150%;
|
||||
letter-spacing: 0.5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.sub {
|
||||
color: white;
|
||||
font-family: Helvetica, serif , sans-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
iframe {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500) {
|
||||
p {
|
||||
font: 16px
|
||||
}
|
||||
}
|
||||
55
src/pages/about/index.tsx
Normal file
55
src/pages/about/index.tsx
Normal file
@ -0,0 +1,55 @@
|
||||
import React from "react"
|
||||
import { GatsbyImage, getImage } from "gatsby-plugin-image";
|
||||
import { useStaticQuery, graphql } from "gatsby"
|
||||
|
||||
import Base from "../../components/Base"
|
||||
import SEO from "../../components/seo"
|
||||
|
||||
import "./styles.scss";
|
||||
|
||||
const AboutPage = () => (
|
||||
<Base>
|
||||
<SEO title="About" />
|
||||
<div style={{ color: '#eeeeee'}}>
|
||||
<h4>Who are you ?</h4>
|
||||
<p>nc</p>
|
||||
<p>
|
||||
<a href="https://twitter.com/ncggro" target="_">Twitter </a>
|
||||
<a href="https://github.com/NCanggoro" target="_">GitHub </a>
|
||||
<a href="https://gitlab.com/cloudcorezip" target="_">GitLab </a>
|
||||
<a href="mailto:ncanggoro@tutanota.com" target="_">Email </a>
|
||||
</p>
|
||||
<h4 className="faq-title">What do you do ?</h4>
|
||||
<p>Professional Typer</p>
|
||||
<h4 className="faq-title">What are your hobbies ?</h4>
|
||||
<p>Yes</p>
|
||||
<h4 className="faq-title">Don't care didn't ask</h4>
|
||||
<div style={{ maxWidth: `500px`}}>
|
||||
<Image />
|
||||
</div>
|
||||
</div>
|
||||
</Base>
|
||||
)
|
||||
|
||||
const Image = () => {
|
||||
const data = useStaticQuery(graphql`
|
||||
query {
|
||||
allImageSharp: file(relativePath: {eq: "12561.png"}) {
|
||||
childImageSharp {
|
||||
gatsbyImageData(
|
||||
width: 300
|
||||
placeholder:BLURRED
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
`)
|
||||
|
||||
|
||||
return <GatsbyImage
|
||||
image={data.allImageSharp.childImageSharp.gatsbyImageData}
|
||||
alt="deez nuts"
|
||||
/>
|
||||
}
|
||||
|
||||
export default AboutPage
|
||||
28
src/pages/about/styles.scss
Normal file
28
src/pages/about/styles.scss
Normal file
@ -0,0 +1,28 @@
|
||||
a {
|
||||
color: #4ecca3;
|
||||
text-decoration: none;
|
||||
&:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.faq-title {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
51
src/pages/index.tsx
Normal file
51
src/pages/index.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import React, { useEffect } from "react"
|
||||
import { graphql } from "gatsby"
|
||||
|
||||
import Base from '../components/Base'
|
||||
import SEO from "../components/seo"
|
||||
import PostList from "../components/PostList"
|
||||
import init, { greet } from "snake_game"
|
||||
|
||||
const IndexPage = (props) => {
|
||||
const postEdges = props.data.allMdx.edges;
|
||||
|
||||
const initWasm = () => {
|
||||
init().then(_ => {
|
||||
console.log("MANN");
|
||||
console.log(greet("BRUH"));
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
initWasm()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Base>
|
||||
<SEO title="Home" />
|
||||
<PostList postEdges={postEdges}/>
|
||||
</Base>
|
||||
)
|
||||
}
|
||||
|
||||
export default IndexPage
|
||||
|
||||
export const pageQuery = graphql`
|
||||
query IndexQuery {
|
||||
allMdx(limit: 1000, sort: {frontmatter: {date: DESC}}) {
|
||||
edges {
|
||||
node {
|
||||
excerpt
|
||||
frontmatter {
|
||||
slug
|
||||
}
|
||||
frontmatter {
|
||||
title
|
||||
date
|
||||
archive
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
27
src/styles/code.scss
Normal file
27
src/styles/code.scss
Normal file
@ -0,0 +1,27 @@
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
color: #e0e0e0;
|
||||
margin: 1.5rem 0;
|
||||
// background: none;
|
||||
font-family: 'Roboto Mono', 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono',
|
||||
monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.6;
|
||||
font-size: 13px;
|
||||
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
|
||||
-ms-overflow-style: none; // IE 10+
|
||||
overflow: -moz-scrollbars-none; // Firefox
|
||||
}
|
||||
102
tsconfig.json
Normal file
102
tsconfig.json
Normal file
@ -0,0 +1,102 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
/* Visit https://aka.ms/tsconfig.json to read more about this file */
|
||||
|
||||
/* Projects */
|
||||
// "incremental": true, /* Enable incremental compilation */
|
||||
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
|
||||
// "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */
|
||||
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */
|
||||
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
|
||||
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
|
||||
|
||||
/* Language and Environment */
|
||||
"target": "esnext", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
|
||||
"lib": ["dom", "esnext"], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
|
||||
"jsx": "react", /* Specify what JSX code is generated. */
|
||||
// "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
|
||||
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
|
||||
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
|
||||
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
|
||||
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
|
||||
// "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
|
||||
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
|
||||
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
|
||||
|
||||
/* Modules */
|
||||
"module": "esnext", /* Specify what module code is generated. */
|
||||
// "rootDir": "./", /* Specify the root folder within your source files. */
|
||||
"moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
|
||||
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
|
||||
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
|
||||
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
|
||||
// "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */
|
||||
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
|
||||
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
|
||||
// "resolveJsonModule": true, /* Enable importing .json files */
|
||||
// "noResolve": true, /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
|
||||
|
||||
/* JavaScript Support */
|
||||
// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
|
||||
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
|
||||
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */
|
||||
|
||||
/* Emit */
|
||||
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
|
||||
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
|
||||
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
|
||||
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
|
||||
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
|
||||
// "outDir": "./", /* Specify an output folder for all emitted files. */
|
||||
// "removeComments": true, /* Disable emitting comments. */
|
||||
// "noEmit": true, /* Disable emitting files from a compilation. */
|
||||
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
|
||||
// "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */
|
||||
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
|
||||
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
|
||||
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
|
||||
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
|
||||
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
|
||||
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
|
||||
// "newLine": "crlf", /* Set the newline character for emitting files. */
|
||||
// "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */
|
||||
// "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */
|
||||
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
|
||||
// "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */
|
||||
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
|
||||
// "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
|
||||
|
||||
/* Interop Constraints */
|
||||
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
|
||||
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
|
||||
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
|
||||
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
|
||||
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
|
||||
|
||||
/* Type Checking */
|
||||
"strict": true, /* Enable all strict type-checking options. */
|
||||
// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */
|
||||
// "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */
|
||||
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
|
||||
// "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
|
||||
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
|
||||
// "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */
|
||||
// "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */
|
||||
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
|
||||
// "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */
|
||||
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */
|
||||
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
|
||||
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
|
||||
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
|
||||
// "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */
|
||||
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
|
||||
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */
|
||||
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
|
||||
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
|
||||
|
||||
/* Completeness */
|
||||
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
|
||||
"skipLibCheck": true /* Skip type checking all .d.ts files. */
|
||||
},
|
||||
"include": ["./src/**/*", "./gatsby-node.ts", "./gatsby-config.ts", "./plugins/**/*"]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user