From dff1a28850f0b9ff843fe7d16a991d38ef0c3c31 Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Mon, 13 Apr 2020 04:12:07 +0800 Subject: [PATCH] website: initialize website --- utilities/debounce.js | 8 - website/.gitignore | 20 + website/README.md | 33 + website/docusaurus.config.js | 78 + website/package.json | 31 + website/sidebars.js | 16 + website/src/css/custom.css | 12 + website/src/data/successStories.js | 72 + website/src/pages/index.js | 258 + website/src/pages/styles.module.css | 46 + website/static/img/favicon.png | Bin 0 -> 36679 bytes website/static/img/logo.svg | 1 + website/yarn.lock | 9959 +++++++++++++++++++++++++++ 13 files changed, 10526 insertions(+), 8 deletions(-) delete mode 100644 utilities/debounce.js create mode 100755 website/.gitignore create mode 100755 website/README.md create mode 100755 website/docusaurus.config.js create mode 100755 website/package.json create mode 100755 website/sidebars.js create mode 100755 website/src/css/custom.css create mode 100644 website/src/data/successStories.js create mode 100755 website/src/pages/index.js create mode 100755 website/src/pages/styles.module.css create mode 100644 website/static/img/favicon.png create mode 100644 website/static/img/logo.svg create mode 100644 website/yarn.lock diff --git a/utilities/debounce.js b/utilities/debounce.js deleted file mode 100644 index e0d4ed66a..000000000 --- a/utilities/debounce.js +++ /dev/null @@ -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); - }; -}; diff --git a/website/.gitignore b/website/.gitignore new file mode 100755 index 000000000..1b34df512 --- /dev/null +++ b/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* \ No newline at end of file diff --git a/website/README.md b/website/README.md new file mode 100755 index 000000000..71505291a --- /dev/null +++ b/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= 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. diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js new file mode 100755 index 000000000..4fbbfb95b --- /dev/null +++ b/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'), + }, + }, + ], + ], +}; diff --git a/website/package.json b/website/package.json new file mode 100755 index 000000000..c1e160904 --- /dev/null +++ b/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" + ] + } +} diff --git a/website/sidebars.js b/website/sidebars.js new file mode 100755 index 000000000..12a981650 --- /dev/null +++ b/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', + ], + }, +}; diff --git a/website/src/css/custom.css b/website/src/css/custom.css new file mode 100755 index 000000000..af30533f8 --- /dev/null +++ b/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; +} diff --git a/website/src/data/successStories.js b/website/src/data/successStories.js new file mode 100644 index 000000000..1fcab175e --- /dev/null +++ b/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{' '} + + Front End Interview Handbook + {' '} + 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. +
+
+ 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! +
+
+ 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! + + ), + }, +]; diff --git a/website/src/pages/index.js b/website/src/pages/index.js new file mode 100755 index 000000000..ea08d7f0c --- /dev/null +++ b/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 ( + +
+
+ +

{siteConfig.title}

+

{siteConfig.tagline}

+
+ + Get Started  → + +
+
+