landing page

namachan10777 · Sep 11, 2021 · 6baaab8 · 6baaab8
1 parent d802b09
commit 6baaab8
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 51 deletions.
diff --git a/articles/index.md b/articles/index.md
@@ -0,0 +1,60 @@
++++
+title = "namachan10777"
++++
+
+## About
+
+![300,300: green box with eyes](/icon.webp)
+
+![40,15: life-failing badge](https://img.shields.io/badge/life-failing-red.svg?style=plastic)
+
+* Masaki Nakano
+* B3, College of computer and information science, University of Tsukuba.
+* [namachan10777@gmail.com](mailto:namachan10777@gmail.com)
+
+## Navigation
+
+* [Keybase](https://keybase.io/namachan10777)
+* [GitHub](https://github.com/namachan10777)
+* [Twitter](https://twitter.com/namachan10777)
+* [AtCoder](https://atcoder.jp/users/namachan10777)
+* [ActivityPub](https://social.namachan10777.dev)
+* [Blog](https://blog.namachan10777.dev)
+* [Pixiv](https://www.pixiv.net/users/16972899)
+* [Amazon Wishlit](https://www.amazon.jp/hz/wishlist/ls/7N5AKQ9XX3HY?ref_=wl_share)
+
+## Qualifications
+
+* TOEIC L&R 765
+* 応用情報技術者試験
+* ネットワークスペシャリスト試験
+
+## Timeline
+
+敬称略
+
+* `2015-04` 香川高等専門学校 機械工学科入学
+* `2016-04` 香川高等専門学校 電気情報工学科転科
+* `2018-08` jig.jpインターン(4週間)
+* `2018-12-01` mixi git challenge 2位
+* `2019-3` mixi bug shooting challenge
+* `2020-03` 日本音響学会 春季研究発表会 ポスター発表（開催扱い）
+* `2020-03` 香川高等専門学校 電気情報工学科卒業
+* `2020-04` 筑波大学 情報学群 情報科学類入学
+* `2020-08` 株式会社はてな サマーインターン
+* `2020-09` 株式会社ACCESS 2day インターン
+* `2021-03` クックパッド株式会社 spring internship 最優秀賞
+
+## Papers
+
+### 1st author
+
+* [ユーザーからの補助情報を用いるインタラクティブ音源システム](https://kitalab.net/pdf/2020_ASJspr_nakano.pdf)
+
+### Others
+
+* [ユーザーからの補助情報を用いる独立低ランク行列分析](https://kitalab.net/pdf/2020_ASJaut_oshima.pdf)
+
+### PGP public key
+
+Please import `Masaki Nakano (Master)` from a gpg server (e.g. `keys.gnupg.net`).
diff --git a/articles/nextjs-blog.md b/articles/nextjs-blog.md
diff --git a/components/md.tsx b/components/md.tsx
@@ -1,91 +1,124 @@
 import * as Unist from "unist";
 import * as MdAst from "mdast";
 import * as React from "react";
+import Image from "next/image";
 
 export type Props = {
   mdast: MdAst.Root;
 };
 
-function calcHash(ast: Unist.Node): string {
+function isIncludeImage(ast: Unist.Node): boolean {
+  if (ast.type == 'image') return true;
   switch (ast.type) {
-    case "heading": {
-      const heading = ast as MdAst.Heading;
-      return `<h${heading.depth}>${heading.children.map(calcHash)}</h>`;
-    }
-    case "text": {
-      const text = ast as MdAst.Text;
-      return text.value;
-    }
-    case "paragraph": {
-      const paragraph = ast as MdAst.Paragraph;
-      return `<p>${paragraph.children.map(calcHash)}</p>`;
-    }
+    case 'heading':
+    case 'paragraph':
+      const parent = ast as MdAst.Parent;
+      return parent.children.some(isIncludeImage);
     default:
-      throw new Error(`unsupported ast type ${ast.type}`);
+      return false;
   }
 }
 
-function constructDom(ast: Unist.Node) {
+function constructDom(ast: Unist.Node, key = 0) {
   switch (ast.type) {
     case "heading": {
       const heading = ast as MdAst.Heading;
       switch (heading.depth) {
         case 1:
           return (
-            <h1 key={calcHash(ast)}>
-              {heading.children.map((c) => constructDom(c))}
+            <h1 key={key} className="text-4xl font-medium">
+              {heading.children.map(constructDom)}
             </h1>
           );
         case 2:
           return (
-            <h2 key={calcHash(ast)}>
-              {heading.children.map((c) => constructDom(c))}
+            <h2 key={key} className="text-3xl font-medium">
+              {heading.children.map(constructDom)}
             </h2>
           );
         case 3:
           return (
-            <h3 key={calcHash(ast)}>
-              {heading.children.map((c) => constructDom(c))}
+            <h3 key={key} className="text-2xl font-medium">
+              {heading.children.map(constructDom)}
             </h3>
           );
         case 4:
           return (
-            <h4 key={calcHash(ast)}>
-              {heading.children.map((c) => constructDom(c))}
+            <h4 key={key} className="text-xl font-medium">
+              {heading.children.map(constructDom)}
             </h4>
           );
         case 5:
           return (
-            <h5 key={calcHash(ast)}>
-              {heading.children.map((c) => constructDom(c))}
+            <h5 key={key} className="text-lg font-medium">
+              {heading.children.map(constructDom)}
             </h5>
           );
         case 6:
           return (
-            <h6 key={calcHash(ast)}>
-              {heading.children.map((c) => constructDom(c))}
+            <h6 key={key} className="text-base font-medium">
+              {heading.children.map(constructDom)}
             </h6>
           );
       }
       break;
     }
+    case "image": {
+      const img = ast as MdAst.Image;
+      const alt = img.alt ? img.alt : "";
+      const altMatched = /(\d+),(\d+)\:/.exec(alt);
+      if (altMatched) {
+        const w = parseInt(altMatched[1], 10);
+        const h = parseInt(altMatched[2], 10)
+        return <Image key={key} src={img.url} width={w} height={h} alt={alt} />;
+      }
+      else {
+        return <Image key={key} src={img.url} width={100} height={100} alt={alt} />;
+      }
+    }
     case "text": {
       const text = ast as MdAst.Text;
       return text.value;
     }
     case "paragraph": {
       const paragraph = ast as MdAst.Paragraph;
-      return <p key={calcHash(ast)}>{paragraph.children.map(constructDom)}</p>;
+      if (isIncludeImage(paragraph)) {
+        return <div key={key} className="my-2">{paragraph.children.map(constructDom)}</div>;
+      }
+      else {
+        return <p key={key} className="my-2">{paragraph.children.map(constructDom)}</p>;
+      }
+    }
+    case "list": {
+      const list = ast as MdAst.List;
+      if (list.ordered) {
+        return <ol key={key}>{list.children.map(constructDom)}</ol>
+      }
+      else {
+        return <ul key={key}>{list.children.map(constructDom)}</ul>
+      }
+    }
+    case "listItem": {
+      const listitem = ast as MdAst.ListItem;
+      return <li key={key}>{listitem.children.map(constructDom)}</li>
+    }
+    case "link": {
+      const link = ast as MdAst.Link;
+      return <a className="underline text-gray-700 hover:text-black hover:font-medium" key={key} href={link.url}>{link.children.map(constructDom)}</a>
+    }
+    case "inlineCode": {
+      const inlineCode = ast as MdAst.InlineCode;
+      return <span key={key} className="font-mono bg-yellow-50 p-1 rounded-sm">{inlineCode.value}</span>
     }
     case "toml":
       return null;
     default:
-      return <div key={calcHash(ast)}>UNSUPPORTED TYPE {ast.type}</div>;
+      return <span key={key}>UNSUPPORTED TYPE {ast.type}</span>;
   }
 }
 const Md: React.FC<Props> = (props: Props) => {
   const rootChildren = props.mdast.children;
-  return <React.Fragment>{rootChildren.map(constructDom)}</React.Fragment>;
+  return <div>{rootChildren.map(constructDom)}</div>;
 };
 
 export default Md;
diff --git a/next.config.js b/next.config.js
@@ -1,4 +1,7 @@
 module.exports = {
+  images: {
+    domains: ['img.shields.io']
+  },
   webpack(config) {
     config.resolve.extensions.push(".md");
     config.module.rules.push({

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,30 +1,26 @@
 import React from "react";
 import Head from "next/head";
 import Md from "../components/md";
-import readme from "../articles/nextjs-blog.md";
+import index from "../articles/index.md";
 import { unified } from "unified";
 import remarkParse from "remark-parse";
 import remarkGfm from "remark-gfm";
 import remarkFrontmatter from "remark-frontmatter";
 import * as MdAst from "mdast";
 
-export const config = { amp: true };
-
 type Props = {
   mdast: MdAst.Root;
 };
 
 export default function Home(props: Props) {
-  console.log(props.mdast);
   return (
     <div>
       <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
+        <title>namachan10777</title>
+        <meta name="description" content="namachan10777 profile page" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-
-      <main>
+      <main className="p-5">
         <Md mdast={props.mdast} />
       </main>
     </div>
@@ -36,7 +32,7 @@ export async function getStaticProps() {
     .use(remarkParse)
     .use(remarkFrontmatter, ["toml", "yaml"])
     .use(remarkGfm)
-    .parse(readme);
+    .parse(index);
   return {
     props: { mdast: md },
   };

diff --git a/public/icon.webp b/public/icon.webp
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  purge: ['./pages/**/*.{ts,tsx"', './components/**/*.{ts,tsx}'],
+  purge: ['./pages/**/*.{ts,tsx}"', './components/**/*.{ts,tsx}'],
   mode: 'jit',
   darkMode: false, // or 'media' or 'class'
   theme: {