From fbb64e4e49d3099cc62990cbc645b02215ba38c2 Mon Sep 17 00:00:00 2001 From: 1qk1 <1qk231@gmail.com> Date: Mon, 7 Oct 2019 16:44:46 +0300 Subject: [PATCH 1/4] add instructions for windows and linux --- docs/tutorial/part-zero/index.md | 43 +++++++++++++++----------------- 1 file changed, 20 insertions(+), 23 deletions(-) diff --git a/docs/tutorial/part-zero/index.md b/docs/tutorial/part-zero/index.md index 56b2518ad2301..58b596d6df727 100644 --- a/docs/tutorial/part-zero/index.md +++ b/docs/tutorial/part-zero/index.md @@ -10,47 +10,44 @@ Before you start building your first Gatsby site, you’ll need to familiarize y The command line is a text-based interface used to run commands on your computer. You’ll also often see it referred to as the terminal. In this tutorial, we’ll use both interchangeably. It’s a lot like using the Finder on a Mac or Explorer on Windows. Finder and Explorer are examples of graphical user interfaces (GUI). The command line is a powerful, text-based way to interact with your computer. -Take a moment to locate and open up the command line interface (CLI) for your computer. Depending on which operating system you are using, see [**instructions for Mac**](http://www.macworld.co.uk/feature/mac-software/how-use-terminal-on-mac-3608274/), [**instructions for Windows**](https://www.quora.com/How-do-I-open-terminal-in-windows) or [**instructions for Linux**](https://www.howtogeek.com/140679/beginner-geek-how-to-start-using-the-linux-terminal/). +Take a moment to locate and open up the command line interface (CLI) for your computer. Depending on which operating system you are using, see [**instructions for Mac**](http://www.macworld.co.uk/feature/mac-software/how-use-terminal-on-mac-3608274/), [**instructions for Windows**](https://www.lifewire.com/how-to-open-command-prompt-2618089) or [**instructions for Linux**](https://www.howtogeek.com/140679/beginner-geek-how-to-start-using-the-linux-terminal/). -## Install Homebrew for Node.js +_Note: If you’re new to the command line, "running" a command, means writing the text in the highlighted box in the command prompt, and hitting the Enter key”. Commands will be in a highlighted box like `node --version`, but not every highlighted box is a command! If something is a command it will be mentioned as something you have to run/execute._ -To install Gatsby and Node.js, it is recommended to use [Homebrew](https://brew.sh/). A little set-up in the beginning can save you from some headaches later on! +## Mac prerequisites -How to install or verify Homebrew on your computer: +To install Gatsby and Node.js, we recommend you to use [Homebrew](https://brew.sh/). A little set-up in the beginning can save you from some headaches later on! + +### How to install or verify Homebrew on your computer: 1. Open your Terminal. 1. See if Homebrew is installed by running `brew -v`. You should see "Homebrew" and a version number. -1. If not, download and install [Homebrew with the instructions](https://docs.brew.sh/Installation) for your operating system (Mac, Linux or Windows). +1. If not, download and install [Homebrew with the instructions](https://docs.brew.sh/Installation). 1. Once you've installed Homebrew, repeat step 2 to verify. -### Mac Users: install Xcode Command Line Tools +### Install Xcode Command Line Tools: 1. Open your Terminal. -1. On a Mac, install Xcode Command line tools by running `xcode-select --install`. +1. Install Xcode Command line tools by running `xcode-select --install`. 1. If that fails, download it [directly from the Apple site](https://developer.apple.com/download/more/), after signing-in with Apple developer account 1. After being prompted to start the installation, you'll be prompted again to accept a software license for the tools to download. -## ⌚ Install Node.js and npm +## Installing Node.js and npm -Node.js is an environment that can run JavaScript code outside of a web browser. Gatsby is built with Node.js. To get up and running with Gatsby, you’ll need to have a recent version installed on your computer. +Node.js is an environment that can run JavaScript code outside of a web browser. Gatsby is built with Node.js. To get up and running with Gatsby, you’ll need to have a recent version installed on your computer. npm comes bundled with Node.js so if you don't have npm, chances are that you don't have Node.js too. _Note: Gatsby's minimum supported Node.js version is Node 8, but feel free to use a more recent version._ 1. Open your Terminal. -1. Run `brew update` to make sure you have the latest version of Homebrew. -1. Run this command to install Node and npm in one go: `brew install node` - -Once you have followed the installation steps, make sure everything was installed properly: - -### Check your Node.js installation - -1. Open up your terminal. -2. Run `node --version`. (If you’re new to the command line, “run `command`” means “type `node --version` in the command prompt, and hit the Enter key”. From here on, this is what we mean by “run `command`”). -3. Run `npm --version`. - -The output of each of those commands should be a version number. Your versions may not be the same as those shown below! If entering those commands doesn’t show you a version number, go back and make sure you have installed Node.js. - -![Check node and npm versions in terminal](01-node-npm-versions.png) +1. Install Node.js for your appropriate operating system. + - On **MacOS** with homebrew installed, run `brew install node`. If you don't want to install it through homebrew, download the latest Node.js version from [the official Node.js website](https://nodejs.org/en/), double click on the downloaded file and go through the installation process. + - On **Windows**, download and install the latest Node.js version from [the official Node.js website](https://nodejs.org/en/) + - On **Linux**, run `sudo apt-get install curl`. After it finishes installing, run `curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -` and install Node.js by running `sudo apt-get install nodejs`. If it asks for confirmation, type `y` and press enter. If you're on Fedora, follow [this guide to install Node.js and npm](https://tecadmin.net/install-latest-nodejs-on-fedora/) instead. +1. Verify you have Node.js and npm installed by running `node --version` and `npm --version` in the terminal. +1. The output of each of those commands should be a version number. Your versions may not be the same as those shown below! If entering those commands doesn’t show you a version number, go back and make sure you have installed Node.js. + ![Check node and npm versions in terminal](01-node-npm-versions.png) + +Once you have followed the installation steps and you have checked everything is installed properly, you can continue to the next step: ## Install Git From ba354efa0206427a66ef03534e8abf878c1ee7ef Mon Sep 17 00:00:00 2001 From: 1qk1 <1qk231@gmail.com> Date: Mon, 7 Oct 2019 16:48:30 +0300 Subject: [PATCH 2/4] remove "todo" stub ( ref #15529), make links visible --- docs/docs/gatsby-on-linux.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/docs/docs/gatsby-on-linux.md b/docs/docs/gatsby-on-linux.md index ebc68201d43d2..9acff79f17fde 100644 --- a/docs/docs/gatsby-on-linux.md +++ b/docs/docs/gatsby-on-linux.md @@ -4,12 +4,10 @@ title: Gatsby on Linux # Linux -> This is a TODO. Help our community expand it. - -> Please use the [Gatsby Style Guide](/contributing/gatsby-style-guide/) to ensure your pull request gets accepted. - ## Windows Subsystem Linux (WSL) +This guide assumes that you already have WSL installed with an working Linux distro. If you don't, follow [this guide from microsoft's site](https://docs.microsoft.com/en-us/windows/wsl/install-win10) to install WSL and a Linux distro of your choice. + As of October 17th 2017, Windows 10 ships with WSL and Linux distributions are available via the [Windows Store], there are several different distributions to use which can be configured via `wslconfig` if you have more than one distribution installed. ```shell @@ -64,10 +62,11 @@ Or to install all at the same time and approve `(y)` all installs: sudo apt update && sudo apt -y upgrade && sudo apt install build-essential && sudo apt install git && sudo apt install libpng-dev ``` - +### Additional links and resources -[windows store]: https://www.microsoft.com/en-us/store/p/ubuntu/9nblggh4msv6 -[n]: https://github.com/tj/n -[n-install]: https://github.com/mklement0/n-install -[nvm]: https://github.com/creationix/nvm -[bash startup]: https://github.com/Microsoft/WSL/issues/776#issuecomment-266112578 +- [Super detailed guide to making VSCode work with ESL from VSCode's docs website](https://code.visualstudio.com/docs/remote/wsl) +- [windows store](https://www.microsoft.com/en-us/store/p/ubuntu/9nblggh4msv6) +- [n](https://github.com/tj/n) +- [n-install](https://github.com/mklement0/n-install) +- [nvm](https://github.com/creationix/nvm) +- [bash startup](https://github.com/Microsoft/WSL/issues/776#issuecomment-266112578) From 6f79ff3bdf09d7c9195ac5b8de4463854cbcfcb8 Mon Sep 17 00:00:00 2001 From: 1qk1 <1qk231@gmail.com> Date: Mon, 7 Oct 2019 16:48:47 +0300 Subject: [PATCH 3/4] update links --- docs/docs/preparing-your-environment.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/docs/preparing-your-environment.md b/docs/docs/preparing-your-environment.md index df6543241b11a..fc51a47ca776c 100644 --- a/docs/docs/preparing-your-environment.md +++ b/docs/docs/preparing-your-environment.md @@ -5,9 +5,9 @@ overview: true To get started with Gatsby, you'll need to make sure you have the following software tools installed: -1. [Node.js](/tutorial/part-zero/#install-nodejs) -2. [npm CLI](/tutorial/part-zero/#familiarize-with-npm) -3. [Gatsby CLI](/tutorial/part-zero/#install-the-gatsby-cli) +1. [Node.js and npm](/tutorial/part-zero/#installing-nodejs-and-npm) +2. [Git](/tutorial/part-zero/#install-git) +3. [Gatsby CLI](/tutorial/part-zero/#using-the-gatsby-cli) For step-by-step installation instructions and detailed explanations of the required software, head on over to the [Gatsby tutorial](/tutorial/part-zero/). From 807d12d6227a054775a0843ffcb92193941337fe Mon Sep 17 00:00:00 2001 From: 1qk1 <1qk231@gmail.com> Date: Mon, 7 Oct 2019 16:49:06 +0300 Subject: [PATCH 4/4] add sass recipe, fix typo --- docs/docs/recipes.md | 60 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 59 insertions(+), 1 deletion(-) diff --git a/docs/docs/recipes.md b/docs/docs/recipes.md index 1cfd2dd3ae21e..3a37f3eaa1116 100644 --- a/docs/docs/recipes.md +++ b/docs/docs/recipes.md @@ -276,7 +276,7 @@ There are so many ways to add styles to your website; Gatsby supports almost eve 1. Create a global CSS file as `src/styles/global.css` and paste the following into the file: -```css:title=src/styles/styles/global.css +```css:title=src/styles/global.css html { background-color: lavenderblush; } @@ -468,6 +468,64 @@ Notice that the file extension is `.module.css` instead of `.css`, which tells G - More on [Using CSS Modules](/tutorial/part-two/#css-modules) - [Live example on Using CSS modules](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-css-modules) +### Using SCSS/SASS + +Sass is an extension of CSS that gives you more advanced features like nested rules, variables, mixins, and more. + +Sass has 2 syntaxes. The most commonly used syntax is "SCSS", and is a superset of CSS. That means all valid CSS syntax, is valid SCSS syntax. SCSS files use the extension .scss + +Sass will compile .scss and .sass files to .css files for you, so you can write your stylesheets with more advanced features. + +#### Prerequisites + +- A [Gatsby site](/docs/quick-start/). + +#### Directions + +1. Install the Gatsby plugin [gatsby-plugin-sass](https://www.gatsbyjs.org/packages/gatsby-plugin-sass/) and `node-sass`. + +`npm install --save node-sass gatsby-plugin-sass` + +2. Include the plugin in your `gatsby-config.js` file. + +```javascript:title=gatsby-config.js +plugins: [`gatsby-plugin-sass`], +``` + +3. Write your stylesheets as `.sass` or `.scss` files and import them. If you don't know how to import styles, take a look at [Styling with CSS](/docs/recipes/#2-styling-with-css) + +```css:title=styles.scss +$font-stack: Helvetica, sans-serif; +$primary-color: #333; + +body { + font: 100% $font-stack; + color: $primary-color; +} +``` + +```css:title=styles.sass +$font-stack: Helvetica, sans-serif +$primary-color: #333 + +body + font: 100% $font-stack + color: $primary-color +``` + +```javascript +import "./styles.scss" +import "./styles.sass" +``` + +_Note: You can use SASS/SCSS files as modules too, like mentioned above, with the difference that instead of .css the extensions have to be .scss or .sass_ + +#### Additional resources + +- [Difference between .sass and .scss](https://responsivedesign.is/articles/difference-between-sass-and-scss/) +- [Sass guide from the official Sass website](https://sass-lang.com/guide) +- [A most complete installation tutorial on Sass with some more explanations and more resources](https://www.gatsbyjs.org/docs/sass/) + ### Adding a Local Font #### Prerequisites