feat: add version in header

yeonjuan · yeonjuan · commit 5e82289ef21c · 2020-10-12T22:21:49.000+09:00
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "typescript-eslint-demo",
-  "version": "1.0.0",
+  "version": "0.0.2",
   "description": "",
   "main": "index.js",
   "scripts": {
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,17 +1,50 @@
 import React from "react";
+import { Navbar, Badge } from "react-bootstrap";
 import type { FC } from "react";
 import "@/css/header.css";
 import pkgJson from "../../package.json";
 
 export const Header: FC = () => (
-  <header>
-    <h2 style={{ color: "#666" }}>TypeScript ESlint Demo</h2>
-    <ul className="versions">
-      <li>
-        TypeScript-ESLint v
-        {pkgJson.dependencies["@typescript-eslint/eslint-plugin"]}
-      </li>
-      <li>TypeScript v{pkgJson.dependencies["typescript"]}</li>
-    </ul>
-  </header>
+  <Navbar bg="light">
+    <Navbar.Brand>
+      TypeScript ESLint Demo
+      <Badge variant="secondary">v{pkgJson.version}</Badge>
+    </Navbar.Brand>
+
+    <Navbar.Collapse className="justify-content-end">
+      <Navbar.Text>
+        <a
+          className="github-button"
+          href="https://github.com/yeonjuan/typescript-eslint-demo"
+          data-icon="octicon-star"
+          aria-label="Star yeonjuan/typescript-eslint-demo on GitHub"
+        >
+          Star
+        </a>
+      </Navbar.Text>
+      <Navbar.Text>
+        <a
+          className="github-button"
+          href="https://github.com/yeonjuan/typescript-eslint-demo/issues"
+          data-icon="octicon-issue-opened"
+          aria-label="Issue yeonjuan/typescript-eslint-demo on GitHub"
+        >
+          Issue
+        </a>
+      </Navbar.Text>
+      <ul className="version-list">
+        <li>
+          <Navbar.Text className="version">
+            TypeScript-ESLint v
+            {pkgJson.dependencies["@typescript-eslint/eslint-plugin"]}
+          </Navbar.Text>
+        </li>
+        <li>
+          <Navbar.Text className="version">
+            TypeScript v{pkgJson.dependencies["typescript"]}
+          </Navbar.Text>
+        </li>
+      </ul>
+    </Navbar.Collapse>
+  </Navbar>
 );
diff --git a/src/css/app.css b/src/css/app.css
@@ -7,3 +7,6 @@ main {
 .row {
   margin-top: 20px;
 }
+.versions {
+  float: right;
+}
diff --git a/src/css/header.css b/src/css/header.css
@@ -7,7 +7,13 @@ header h2 {
   margin: 0 0 10px;
   padding: 0;
 }
+ul {
+  margin-bottom: 0;
+}
 
-.versions {
-  float: right;
+li {
+  list-style: none;
+}
+.version {
+  font-size: 10px;
 }
diff --git a/src/index.html b/src/index.html
@@ -19,6 +19,7 @@
         background: #fff;
       }
     </style>
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
   </head>
   <body>
     <div id="app"></div>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "typescript-eslint-demo",`
`3`		`- "version": "1.0.0",`
	`3`	`+ "version": "0.0.2",`
`4`	`4`	`"description": "",`
`5`	`5`	`"main": "index.js",`
`6`	`6`	`"scripts": {`
Original file line number	Diff line number	Diff line change
`@@ -7,3 +7,6 @@ main {`
`7`	`7`	`.row {`
`8`	`8`	`margin-top: 20px;`
`9`	`9`	`}`
	`10`	`+.versions {`
	`11`	`+ float: right;`
	`12`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@`
`19`	`19`	`background: #fff;`
`20`	`20`	`}`
`21`	`21`	`</style>`
	`22`	`+ <script async defer src="https://buttons.github.io/buttons.js"></script>`
`22`	`23`	`</head>`
`23`	`24`	`<body>`
`24`	`25`	`<div id="app"></div>`