microsoft · dvdsgl · Jul 24, 2018 · Jul 21, 2018 · Jul 21, 2018 · Jul 21, 2018
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,6 @@
+time-travel/zips
+.DS_Store
+
 # Logs
 logs
 *.log

diff --git a/README.md b/README.md
@@ -9,6 +9,22 @@ $ npm install
 $ npm start
 ```
 
+### Time Travel
+
+Time travel displays past versions of the repo based on merged pull requests.
+The build script in `time-travel` folder fetchs each merged pull request's `docs` folder content (except for `docs/time-travel/`) and store them in `docs/time-travel/history`, then writes data to `docs/time-travel/index.json` for later use. Currently this process has to be done manually.
+
+**Note**: Create a `.env` with your github's access token in order to fetch data from Github API.
+
+```shell
+# update build
+$ npm run build-timetravel
+```
+
+The page for time-travel is intentionally kept separated from `docs/` (not reusing `docs/css/style.css`) so it's easier to maintain.
+
+---
+
 There's a [Figma file](https://www.figma.com/file/Nkddv9KabDaTFtqZ5vlSzUxr/Developer-Design-Recruiting-Site?node-id=1%3A2) for the design but it's currently Microsoft internal.
 
 ## Contributing

diff --git a/docs/css/style.css b/docs/css/style.css
@@ -319,3 +319,11 @@ footer [href*="github"]:focus {
     display: block;
   }
 }
+
+.time-travel {
+  text-align: center;
+}
+
+.time-travel a {
+  cursor: pointer;
+}
diff --git a/docs/index.html b/docs/index.html
@@ -64,6 +64,9 @@ <h1>
         </li>
       </ul>
     </div>
+    <div class="time-travel">
+      <a href="./time-travel/" title="See past versions of this site">Time Travel</a>
+    </div>
     <p>
       <span class="footer-piece">
         Designed in
@@ -99,9 +102,7 @@ <h1>
       const style =
         `font-family: Arial; font-size: ${size}px; line-height: 2em; color: #f33525; text-shadow: 0.5em 0 0 #81bc06, 0 0.5em 0 #05a6f0, 0.5em 0.5em 0 #ffba08;`;
       console.log('%c■     ', style);
-      console.log(
-        '👋 Hi there! 👋\n\nIt seems you like to poke around as much as we do.\n\nhttps://github.com/Microsoft/join-dev-design'
-      );
+      console.log('👋 Hi there! 👋\n\nIt seems you like to poke around as much as we do.\n\nhttps://github.com/Microsoft/join-dev-design');
     }
 
     logLogo(100);
@@ -119,4 +120,4 @@ <h1>
   </script>
 </body>
 
-</html>
+</html>
diff --git a/docs/time-travel/.DS_Store b/docs/time-travel/.DS_Store
diff --git a/docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNDU2ODA2/docs/index.html b/docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNDU2ODA2/docs/index.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <link rel="SHORTCUT ICON" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Join Microsoft Developer Design</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<style>
+    body {
+        background-color: #080808;
+        color: #BBB;
+        font-family: sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    }
+
+    .container {
+        max-width: 600px;
+        min-height: calc(100vh - 80px);
+        margin: 0 auto;
+    }
+
+    .container img {
+        margin: 40px auto;
+        width: 100%;
+    }
+
+    .container p {
+        font-size: 19px;
+        line-height: 1.3em;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        margin-bottom: 1.1em;
+    }
+
+    .container p a {
+        text-decoration: none;
+        color: pink;
+    }
+
+    .container p a:hover {
+        color: lightblue;
+    }
+
+    footer {
+        color: #999;
+        text-align: center;
+        height: 40px;
+    }
+
+    footer a {
+        color: #DDD;
+        text-decoration: none;
+    }
+    footer a:hover {
+        color: lightblue;
+    }
+
+    @media only screen and (max-width: 600px) {
+        .container p {
+            font-size: 18px;
+        }
+        footer {
+            text-align: unset;
+            padding: 1em 0 2em;
+        }
+        footer span {
+            display: block;
+        }
+    }
+</style>
+
+<body>
+    <div class="container">
+        <a href="https://microsoft.com">
+            <img src="msft-square.svg" alt="Microsoft logo" width="80" height="80" />
+        </a>
+        <p>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services on
+            the planet.
+        </p>
+
+        <p>We have open positions for technical product designers &amp; design leaders in San Francisco, Seattle, and elsewhere.</p>
+
+        <p>We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build
+            the future of software development.</p>
+
+        <p>We believe in diversity, openness, and building delightful tools that empower every person and organization to achieve
+            more.
+        </p>
+
+        <p>Interested? Send a PR with any improvement to
+            <a href="https://github.com/Microsoft/join-dev-design">microsoft/join-dev-design</a> or
+            <a href="mailto:[email protected]">email us</a>.</p>
+    </div>
+    <footer>
+        <span>
+            Designed in
+            <a href="http://figma.com">Figma</a>.</span>
+        <span>Built in
+            <a href="https://code.visualstudio.com">Code</a>.</span>
+        <span>Open source on
+            <a href="https://github.com/Microsoft/join-dev-design">GitHub</a>.</span>
+    </footer>
+</body>
+
+</html>
diff --git a/docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNDU2ODA2/docs/msft-square.svg b/docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNDU2ODA2/docs/msft-square.svg
diff --git a/docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNDU4Mzc4/docs/index.html b/docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNDU4Mzc4/docs/index.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <link rel="SHORTCUT ICON" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Join Microsoft Developer Design</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<style>
+    body {
+        background-color: black;
+        color: #DDD;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    }
+
+    .container {
+        max-width: 600px;
+        min-height: calc(100vh - 80px);
+        margin: 0 auto;
+    }
+
+    .container img {
+        margin: 40px auto;
+        width: 100%;
+    }
+
+    .container p {
+        font-weight: 300;
+        font-size: 22px;
+    }
+
+    .container p a {
+        text-decoration: none;
+        color: pink;
+    }
+
+    .container p a:hover {
+        color: salmon;
+    }
+
+    footer {
+        color: #999;
+        text-align: center;
+        height: 40px;
+    }
+
+    footer a {
+        color: #DDD;
+        text-decoration: none;
+    }
+
+    @media only screen and (max-width: 600px) {
+        .container p {
+            font-size: 18px;
+        }
+        footer {
+            text-align: unset;
+            padding: 1em 0 2em;
+        }
+        footer span {
+            display: block;
+        }
+    }
+</style>
+
+<body>
+    <div class="container">
+        <a href="https://microsoft.com">
+            <img src="msft-square.svg" alt="Microsoft logo" width="100" height="100" />
+        </a>
+        <p>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services on
+            the planet.
+        </p>
+
+        <p>We have open positions for technical product designers &amp; design leaders in San Francisco, Seattle, and elsewhere.</p>
+
+        <p>We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build
+            the future of software development.</p>
+
+        <p>We believe in diversity, openness, and building delightful tools that empower every person and organization to achieve
+            more.
+        </p>
+
+        <p>Interested? Send a PR with any improvement to
+            <a href="https://github.com/Microsoft/join-dev-design">microsoft/join-dev-design</a> or
+            <a href="mailto:[email protected]">email us</a>.</p>
+    </div>
+    <footer>
+        <span>
+            Designed in
+            <a href="http://figma.com">Figma</a>.</span>
+        <span>Built in
+            <a href="https://code.visualstudio.com">Code</a>.</span>
+        <span>Open source on
+            <a href="https://github.com/Microsoft/join-dev-design">GitHub</a>.</span>
+    </footer>
+</body>
+
+</html>
diff --git a/docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNDU4Mzc4/docs/msft-square.svg b/docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNDU4Mzc4/docs/msft-square.svg
diff --git a/docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNTk0MzQw/docs/css/style.css b/docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNTk0MzQw/docs/css/style.css
@@ -0,0 +1,61 @@
+body {
+  background-color: #080808;
+  color: #bbb;
+  font-family: sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+.container {
+  max-width: 600px;
+  min-height: calc(100vh - 80px);
+  margin: 0 auto;
+}
+
+.container img {
+  margin: 40px auto;
+  width: 100%;
+}
+
+.container p {
+  font-size: 19px;
+  line-height: 1.3em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin-bottom: 1.1em;
+}
+
+.container p a {
+  text-decoration: none;
+  color: pink;
+}
+
+.container p a:hover {
+  color: lightblue;
+}
+
+footer {
+  color: #999;
+  text-align: center;
+  height: 40px;
+}
+
+footer a {
+  color: #ddd;
+  text-decoration: none;
+}
+footer a:hover {
+  color: lightblue;
+}
+
+@media only screen and (max-width: 600px) {
+  .container p {
+    font-size: 18px;
+  }
+  footer {
+    text-align: unset;
+    padding: 1em 0 2em;
+  }
+  footer span {
+    display: block;
+  }
+}