Show author and date

src/github.js

@@ -21,7 +21,7 @@ export async function getHistory(repo, sha, path, top = 10) {
   const commitsJson = await commitsResponse.json();
   console.log(commitsJson);
   const commits = commitsJson
-
+    .slice(0, top)
     .map(commit => ({
       sha: commit.sha,
       date: new Date(commit.commit.author.date),
@@ -34,8 +34,7 @@ export async function getHistory(repo, sha, path, top = 10) {
     }))
     .sort(function(a, b) {
       return a.date - b.date;
-    })
-    .slice(0, top);
+    });
 
   await Promise.all(
     commits.map(async commit => {

src/history.js

@@ -3,6 +3,41 @@ import { getSlides } from "./differ";
 import { useSpring } from "react-use";
 import Slide from "./slide";
 
+function CommitInfo({ commit }) {
+  const message = commit.message.split("\n")[0].slice(0, 80);
+  return (
+    <div
+      style={{
+        height: "50px",
+        width: "200px",
+        overflow: "hidden",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+    >
+      <img
+        src={commit.author.avatar}
+        height={40}
+        width={40}
+        style={{ borderRadius: "4px" }}
+      />
+      <div style={{ paddingLeft: "6px" }}>
+        <div style={{ fontSize: "1.1rem", fontWeight: "500" }}>
+          {commit.author.login}
+        </div>
+        <div style={{ fontSize: "0.85rem", opacity: "0.9" }}>
+          on {commit.date.toDateString()}
+        </div>
+      </div>
+      {/* <div title={commit.message}>
+        {message}
+        {message !== commit.message ? "..." : ""}
+      </div> */}
+    </div>
+  );
+}
+
 export default function History({ commits, language }) {
   const codes = commits.map(commit => commit.content);
   const slideLines = getSlides(codes);
@@ -25,6 +60,7 @@ export default function History({ commits, language }) {
   });
   return (
     <React.Fragment>
+      <CommitInfo commit={commits[index]} />
       <Slide time={current - index} lines={slideLines[index]} />
     </React.Fragment>
   );

src/slide.js

@@ -10,7 +10,7 @@ export default function Slide({ time, lines }) {
         backgroundColor: theme.plain.backgroundColor,
         color: theme.plain.color,
         overflow: "hidden",
-        width: "100%",
+        width: "calc(100% - 20px)",
         maxWidth: "978px",
         margin: "auto",
         padding: "10px"