website: initialize website

utilities/debounce.js

@@ -1,8 +0,0 @@
-const debounce = (fn, time) => {
-    let timerId;
-    return function(...args) {
-        const functionCall = () => fn.apply(this, args);
-        clearTimeout(timerId);
-        timerId = setTimeout(functionCall, time);
-    };
-};

website/.gitignore

@@ -0,0 +1,20 @@
+# dependencies
+/node_modules
+
+# production
+/build
+
+# generated files
+.docusaurus
+.cache-loader
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

website/README.md

@@ -0,0 +1,33 @@
+# Website
+
+This website is built using Docusaurus 2, a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+```
+$ GIT_USER=<Your GitHub username> USE_SSH=1 yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

website/docusaurus.config.js

@@ -0,0 +1,78 @@
+module.exports = {
+  title: 'Front End Interview Handbook',
+  tagline:
+    'Almost complete answers to "Front-end Job Interview Questions" which you can use to interview potential candidates, test yourself or completely ignore',
+  url: 'https://yangshun.github.io',
+  baseUrl: '/front-end-interview-handbook/',
+  favicon: 'img/favicon.png',
+  organizationName: 'yangshun',
+  projectName: 'front-end-interview-handbook',
+  themeConfig: {
+    navbar: {
+      title: 'Front End Interview Handbook',
+      logo: {
+        alt: 'Front End Interview Handbook Logo',
+        src: 'img/logo.svg',
+      },
+      links: [
+        {
+          label: 'Contents',
+          to: '', // "fake" link
+          position: 'left',
+          activeBasePath: 'docs',
+          items: [
+            {
+              label: 'English',
+              to: 'en/questions/html-questions',
+            },
+            {
+              label: '简体中文',
+              to: 'zh/questions/html-questions',
+            },
+          ],
+        },
+        {
+          to: 'introduction',
+          label: 'Getting Started',
+          position: 'right',
+        },
+        {
+          href: 'https://github.com/yangshun/front-end-interview-handbook',
+          label: 'GitHub',
+          position: 'right',
+        },
+      ],
+    },
+    footer: {
+      style: 'dark',
+      copyright: `Copyright © ${new Date().getFullYear()} Yangshun Tay. Built with Docusaurus.`,
+    },
+    gtag: {
+      // trackingID: "UA-44622716-2",
+    },
+    algolia: {
+      // TODO
+      // apiKey: "bd359779d1c4c71ade6062e8f13f5a83",
+      // indexName: "yangshun-tech-interview",
+    },
+  },
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        docs: {
+          path: '../contents',
+          routeBasePath: '',
+          sidebarPath: require.resolve('./sidebars.js'),
+          editUrl:
+            'https://github.com/yangshun/front-end-interview-handbook/edit/master/contents/',
+          showLastUpdateAuthor: true,
+          showLastUpdateTime: true,
+        },
+        theme: {
+          customCss: require.resolve('./src/css/custom.css'),
+        },
+      },
+    ],
+  ],
+};

website/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "website",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy"
+  },
+  "dependencies": {
+    "@docusaurus/core": "^2.0.0-alpha.50",
+    "@docusaurus/preset-classic": "^2.0.0-alpha.50",
+    "classnames": "^2.2.6",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

website/sidebars.js

@@ -0,0 +1,16 @@
+module.exports = {
+  en: {
+    Questions: [
+      'en/questions/html-questions',
+      'en/questions/css-questions',
+      'en/questions/javascript-questions',
+    ],
+  },
+  zh: {
+    问题: [
+      'zh/questions/html-questions',
+      'zh/questions/css-questions',
+      'zh/questions/javascript-questions',
+    ],
+  },
+};

website/src/css/custom.css

@@ -0,0 +1,12 @@
+:root {
+  --ifm-color-primary: #ffb322;
+  --ifm-color-primary-dark: #ffa905;
+  --ifm-color-primary-darker: #f6a100;
+  --ifm-color-primary-darkest: #ca8500;
+  --ifm-color-primary-light: #ffbd3f;
+  --ifm-color-primary-lighter: #ffc24d;
+  --ifm-color-primary-lightest: #ffd179;
+
+  --ifm-font-size-base: 16px;
+  --ifm-code-font-size: 0.8rem;
+}

website/src/data/successStories.js

@@ -0,0 +1,72 @@
+import React from 'react';
+
+export default [
+  {
+    name: 'Erin Teo',
+    title: 'Front End Engineer, Facebook',
+    thumbnail: 'https://avatars1.githubusercontent.com/u/5081708?s=460&v=4',
+    quote: (
+      <>
+        Preparing for my first rounds of tech interviews was really daunting - I
+        wasn't sure what to expect and where to start. This handbook together
+        with the{' '}
+        <a
+          href="https://github.com/yangshun/front-end-interview-handbook"
+          target="_blank"
+          rel="noreferrer noopener">
+          Front End Interview Handbook
+        </a>{' '}
+        was a great starting point for me. It clearly describes each part of the
+        process and has tons of awesome tips and resources. With this handbook
+        and lots of practice, I managed to get offers from Facebook, Dropbox and
+        Amazon!
+      </>
+    ),
+  },
+  {
+    name: 'Siddhesh Karekar',
+    title: 'Software Engineer, Google',
+    thumbnail: 'https://avatars1.githubusercontent.com/u/18223888?s=460&v=4',
+    quote: (
+      <>
+        Most of us are familiar with having the prospect of having to grind tons
+        of LeetCode problems before the interview, but I really wanted a sense
+        of direction, an outline of sorts to prepare efficiently; I wanted to
+        pick questions that covered all the important concepts one can be tested
+        on. The Tech Interview Handbook provides just that; the Algorithms
+        section was an absolutely invaluable resource and a great overall
+        reference to brush up my fundamentals with the helpful hints and tips
+        provided, and also solve some of the most popular questions categorized
+        by type. I certainly have Yangshun to thank for helping me land my dream
+        job at Google!
+      </>
+    ),
+  },
+  {
+    name: 'Kevin Huang',
+    title: 'Software Engineer, Uber',
+    thumbnail: 'https://avatars1.githubusercontent.com/u/25380336?s=460&v=4',
+    quote: (
+      <>
+        The Tech Interview Handbook played a crucial role in the success of my
+        previous job search. The contents are carefully curated and well
+        organized. It served as an excellent roadmap for my interview prep.
+        <br />
+        <br />
+        In addition to the thorough Data Structures and Algorithms section, the
+        handbook also provides a lot of resources on other aspects of the
+        application process that helped me see the tech interviews in a more
+        holistic way. My favorite non-technical part was "Questions To Ask"! I
+        used quite a few insightful questions from there to challenge and
+        impress my interviewers. The results were great!
+        <br />
+        <br />
+        With the help of Tech Interview Handbook, I was able to land offers from
+        Google, Amazon, Uber and several other great companies. Really
+        appreciate Yangshun and other contributors for putting out such quality
+        content for the community. I'd wholeheartedly recommend this handbook to
+        anyone!
+      </>
+    ),
+  },
+];

website/src/pages/index.js

@@ -0,0 +1,258 @@
+import React from 'react';
+import classnames from 'classnames';
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import styles from './styles.module.css';
+
+import successStories from '@site/src/data/successStories';
+
+function Home() {
+  const context = useDocusaurusContext();
+  const {siteConfig = {}} = context;
+  return (
+    <Layout title={siteConfig.title} description={siteConfig.tagline}>
+      <header className={classnames('hero', styles.heroBanner)}>
+        <div className="container">
+          <img
+            className={classnames(styles.heroBannerLogo, 'margin-vert--md')}
+            src={useBaseUrl('img/logo.svg')}
+          />
+          <h1 className="hero__title">{siteConfig.title}</h1>
+          <p className="hero__subtitle">{siteConfig.tagline}</p>
+          <div className={styles.buttons}>
+            <Link
+              className={classnames(
+                'button button--primary button--lg',
+                styles.getStarted,
+              )}
+              to={useBaseUrl('en/questions/html-questions')}>
+              Get Started&nbsp;&nbsp;→
+            </Link>
+          </div>
+          <div className="margin-top--lg">
+            <iframe
+              src="https://ghbtns.com/github-btn.html?user=yangshun&amp;repo=front-end-interview-handbook&amp;type=star&amp;count=true&amp;size=large"
+              frameBorder={0}
+              scrolling={0}
+              width={160}
+              height={30}
+              title="GitHub Stars"
+            />
+          </div>
+        </div>
+      </header>
+      <div>
+        <div
+          className={classnames(
+            'margin-bottom--lg',
+            'padding-vert--lg',
+            styles.sectionPrimary,
+          )}>
+          <div className="container">
+            <div className="row">
+              <div className="col col--8 col--offset-2">
+                <div className="margin-vert--lg text--center">
+                  <h2 className={styles.sectionPrimaryTitle}>
+                    Job hunting? Sign up with Triplebyte to efficiently
+                    interview with top tech companies and land your dream job!
+                    💰
+                  </h2>
+                  <div className="margin-vert--lg">
+                    <a
+                      className="button button--secondary button--lg"
+                      href="https://triplebyte.com/a/PJaJNpO/tihw"
+                      rel="noreferrer noopener"
+                      target="_blank">
+                      Sign up for free!
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className={classnames('margin-vert--lg', 'padding-vert--lg')}>
+          <div className="container">
+            <div className="row">
+              <div className="col col--10 col--offset-1">
+                <h2
+                  className={classnames(
+                    'text--center',
+                    'margin-bottom--xl',
+                    styles.sectionTitle,
+                  )}>
+                  Why Front End Interview Handbook?
+                </h2>
+                <div className="row margin-vert--lg">
+                  <div className="col">
+                    <h3>From Zero to Hero</h3>
+                    <p>
+                      Go from zero to tech interview hero with this handbook. No
+                      prior interview experience needed.
+                    </p>
+                  </div>
+                  <div className="col">
+                    <h3>Curated Practice Questions</h3>
+                    <p>
+                      No one has time to practice a few hundred LeetCode
+                      questions. We tell you which are the best questions to
+                      practice.
+                    </p>
+                  </div>
+                  <div className="col">
+                    <h3>Interview Cheatsheet</h3>
+                    <p>
+                      Straight-to-the-point Do's and Don'ts during an interview.
+                      Knowing these, the battle is already half won.
+                    </p>
+                  </div>
+                </div>
+                <div className="row margin-vert--lg">
+                  <div className="col">
+                    <h3>Practical Algorithm Tips</h3>
+                    <p>
+                      Practical tips for every algorithm topic - common
+                      techniques and corner cases to look out for.
+                    </p>
+                  </div>
+                  <div className="col">
+                    <h3>Behavioral Questions</h3>
+                    <p>
+                      Check out what behavioral questions companies commonly ask
+                      and you can prepare your answers ahead of time.
+                    </p>
+                  </div>
+                  <div className="col">
+                    <h3>Tested and Proven</h3>
+                    <p>
+                      Countless engineers have gotten their dream jobs with its
+                      help.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className={classnames(
+            'margin-vert--lg',
+            'padding-vert--lg',
+            styles.sectionAlt,
+          )}>
+          <div className="container">
+            <div className="row">
+              <div className="col col--6 col--offset-3">
+                <h2
+                  className={classnames(
+                    'margin-vert--lg',
+                    'text--center',
+                    styles.sectionTitle,
+                  )}>
+                  Success Stories
+                </h2>
+                {successStories.map((user) => (
+                  <div className="card margin-vert--lg" key={user.name}>
+                    <div className="card__body">
+                      <p className={styles.quote}>"{user.quote}"</p>
+                    </div>
+                    <div className="card__header">
+                      <div className="avatar">
+                        <img className="avatar__photo" src={user.thumbnail} />
+                        <div className="avatar__intro">
+                          <h4 className="avatar__name">{user.name}</h4>
+                          <small className="avatar__subtitle">
+                            {user.title}
+                          </small>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className={classnames(
+            'margin-vert--lg',
+            'padding-vert--lg',
+            'text--center',
+          )}>
+          <div className="container">
+            <div className="row">
+              <div className="col col--8 col--offset-2">
+                <h2
+                  className={classnames(
+                    'margin-vert--lg',
+                    styles.sectionTitle,
+                  )}>
+                  Enjoying Front End Interview Handbook so far?
+                </h2>
+                <p className={classnames(styles.sectionTagline)}>
+                  Support this project by becoming a sponsor! Your logo/profile
+                  picture will show up here with a link to your website.
+                </p>
+                <div>
+                  <a
+                    href="https://opencollective.com/tech-interview-handbook/sponsor/0/website"
+                    target="_blank">
+                    <img src="https://opencollective.com/tech-interview-handbook/sponsor/0/avatar.svg" />
+                  </a>
+                  <a
+                    href="https://opencollective.com/tech-interview-handbook/sponsor/3/website"
+                    target="_blank">
+                    <img src="https://opencollective.com/tech-interview-handbook/sponsor/3/avatar.svg" />
+                  </a>{' '}
+                  <a
+                    href="https://opencollective.com/tech-interview-handbook/sponsor/4/website"
+                    target="_blank">
+                    <img src="https://opencollective.com/tech-interview-handbook/sponsor/4/avatar.svg" />
+                  </a>{' '}
+                  <a
+                    href="https://opencollective.com/tech-interview-handbook/sponsor/5/website"
+                    target="_blank">
+                    <img src="https://opencollective.com/tech-interview-handbook/sponsor/5/avatar.svg" />
+                  </a>{' '}
+                  <a
+                    href="https://opencollective.com/tech-interview-handbook/sponsor/6/website"
+                    target="_blank">
+                    <img src="https://opencollective.com/tech-interview-handbook/sponsor/6/avatar.svg" />
+                  </a>{' '}
+                  <a
+                    href="https://opencollective.com/tech-interview-handbook/sponsor/7/website"
+                    target="_blank">
+                    <img src="https://opencollective.com/tech-interview-handbook/sponsor/7/avatar.svg" />
+                  </a>{' '}
+                  <a
+                    href="https://opencollective.com/tech-interview-handbook/sponsor/8/website"
+                    target="_blank">
+                    <img src="https://opencollective.com/tech-interview-handbook/sponsor/8/avatar.svg" />
+                  </a>{' '}
+                  <a
+                    href="https://opencollective.com/tech-interview-handbook/sponsor/9/website"
+                    target="_blank">
+                    <img src="https://opencollective.com/tech-interview-handbook/sponsor/9/avatar.svg" />
+                  </a>
+                </div>
+                <div className="margin-vert--lg">
+                  <a
+                    className="button button--primary button--lg"
+                    href="https://opencollective.com/tech-interview-handbook"
+                    rel="noreferrer noopener"
+                    target="_blank">
+                    Become a sponsor!
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}
+
+export default Home;

website/src/pages/styles.module.css

@@ -0,0 +1,46 @@
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.heroBannerLogo {
+  max-width: 300px;
+}
+
+@media screen and (max-width: 966px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sectionTitle {
+  font-size: 2rem;
+}
+
+.sectionTagline {
+  font-size: 1.25rem;
+}
+
+.sectionAlt {
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+.sectionPrimary {
+  background-color: var(--ifm-color-primary);
+}
+
+.sectionPrimaryTitle {
+  color: var(--ifm-color-white);
+}
+
+.quote {
+  font-size: 1.1rem;
+}