Sourcegraph Learn is Sourcegraph's developer education hub and learning center.

Public URL: https://learn.sourcegraph.com

Hacktoberfest contributors: read how to contribute to this repository in our Hacktoberfest 2021 contributors' guide.

• The website consists of static content generated using Next.js and hosted on Netlify.
• The website code is written in TypeScript and React.
• The content is written in Markdown.

First, make sure that you have Node.js installed. You can use nvm to automatically use the version of Node.js which is specified in the repository's .nvmrc file:

nvm install

Alternatively, you can use n to manage your Node versions. Use the following command to install the version of Node specified in the .nvmrc file:

n <node version>

This repository includes a bootstrap script, ./script/install.sh, that is designed to get you up and running quickly.

From the top level of the project, run the following command to install dependencies:

./script/install.sh

This script does two things:

• It installs the dependencies specified in the package-lock.json file with npm ci.
• It also creates a local .env file with environment variables for local development.

To run the application, type the following command from the top level of the project:

npm run dev

You can now navigate to http://localhost:3000 to inspect the application in action.

Below, please find a list of some of the other available npm commands not covered above:

To enable our pre-commit hook, update the following git config setting:

git config core.hooksPath .githooks

To create a new post, create a new markdown file with the .md extension in the posts/ directory.

At the top of the file, copy the following markdown block as a template to get started:

---
title: Your title
authorSlug: Desired slug for your author page
authorDisplayName: Name you want displayed on your post
tags: [relevant, tags]
publicationDate: Date of merge into project
image: [bucket URL]
imageAlt: Alternative information for header image
description: Your description
alternateTitle: Browser title
type: posts
---

More details about these fields are below.

The block at the top of each markdown file, delimited by --- markers, is the front-matter data which is defined in YAML format.

The data fields that are supported in the front matter are:

In the website code, the front-matter data is accessible as the frontMatter field on the MarkdownFile object

When working with code blocks, we use two components: <PrismSyntaxHighlighter> and <Highlighter>. <PrismSyntaxHighlighter> includes language syntax highlighting and copy functionality, so we use this when we want to add code to a tutorial in a particular programming language (including bash) that readers can copy. We can also pass a matcher prop to the component, to highlight particular parts of the code for emphasis (the emphasized code is styled as a <mark> element).

The <PrismSyntaxHighlighter> component looks like this:

<PrismSyntaxHighlighter
    input='Your code here'  
    language='Your language here'
    matcher='The code you would like to highlight (optional)'
/>

When you have input with line spacing that you would like to preserve, use a template literal for your input and preserve the spacing there. To do this, add an additional blank space to any line where you would like to preserve spacing. For example:

<PrismSyntaxHighlighter
    input={`Your code input
     // Be sure to add a blank space by pressing the spacebar at least once here!
    with multiple lines`} 
    language='Your language here'
    matcher='The code you would like to highlight (optional)'
/>

When displaying output, please use the <Highlighter> component. You do not need to specify a language when using this component, since it does not include language syntax highlighting. You can pass it a matcher, however, to draw attention to any code you would like to emphasize.

<Highlighter
    input='Your code here'
    matcher='The code you would like to highlight (optional)'
/>

The points about spacing above also apply to this component.

When a pull request is created in this repository, Netlify will automatically build and deploy the branch. You can find the link to the deploy preview in the Checks section of the pull request.

When the site is being deployed to production, the following build command is executed and the output is in the out/ directory.

npm run build

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can also check out the Next.js GitHub repository.