A collection of notes and snippets about code.
Created using Docusaurus.
cd website && yarn && yarn start
Navigate to the /website directory, install dependencies, and run the start script.
yarn build
Steps to configure your Docusaurus-powered site on Netlify.
-
Select New site from Git
-
Connect to your preferred Git provider.
-
Select the branch to deploy. Default is
master -
Configure your build steps:
- For your build command enter:
cd website; npm install; npm run build; - For publish directory:
website/build/<projectName>(use theprojectNamefrom yoursiteConfig)
- For your build command enter:
-
Click Deploy site
You can also configure Netlify to rebuild on every commit to your repository, or only master branch commits.
- Create a new Markdown file in
/docs.
Slug is based on the folder structure and filename (e.g.
/react/react-snippets.mdwould be/docs/react/react-snippets/).
- Add the following frontmatter:
---
id: css-snippets
title: CSS Snippets
sidebar_label: Snippets
---
idis internal slug,sidebar_labelis optional and sets different title in Sidebar.
- Optionally add the new "docs" to the Sidebar (
/website/sidebars.json).
Documents use the following markdown header fields that are enclosed by a line --- on either side:
id: A unique document id. If this field is not present, the document'sidwill default to its file name (without the extension).title: The title of your document. If this field is not present, the document'stitlewill default to itsid.hide_title: Whether to hide the title at the top of the doc. By default it isfalse.hide_table_of_contents: Whether to hide the table of contents to the right. By default it isfalse.sidebar_label: The text shown in the document sidebar and in the next/previous button for this document. If this field is not present, the document'ssidebar_labelwill default to itstitle.custom_edit_url: The URL for editing this document. If this field is not present, the document's edit URL will fall back toeditUrlfrom options fields passed todocusaurus-plugin-content-docs.keywords: Keywords meta tag for the document page, for search engines.description: The description of your document, which will become the<meta name="description" content="..."/>and<meta property="og:description" content="..."/>in<head>, used by search engines. If this field is not present, it will default to the first line of the contents.image: Cover or thumbnail image that will be used when displaying the link to your post.
Example:
---
id: doc-markdown
title: Markdown Features
hide_title: false
hide_table_of_contents: false
sidebar_label: Markdown :)
custom_edit_url: https://github.com/facebook/docusaurus/edit/master/docs/api-doc-markdown.md
description: How do I find you when I cannot solve this problem
keywords:
- docs
- docusaurus
image: https://i.imgur.com/mErPwqL.png
---Since Docusaurus uses MDX, you can define React components on the top of your MDX file, then use them anywhere in the content.
export const Highlight = ({children, color}) => (
<span
style={{
backgroundColor: color,
borderRadius: '2px',
color: '#fff',
padding: '0.2rem',
}}>
{children}
</span>
);
<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
I can write **Markdown** alongside my _JSX_!You can also import components from NPM or other libraries:
import Highlight from "component-library";
<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
I can write **Markdown** alongside my _JSX_!To draw attention to certain lines of code you can add the line number in brackets next to the language/syntax name.
function HighlightSomeText(highlight) {
if (highlight) {
return 'This text is highlighted!';
}
return 'Nothing highlighted';
}Highlighting multiple lines
import React from 'react';
function MyComponent(props) {
if (props.isBar) {
return <div>Bar</div>;
}
return <div>Foo</div>;
}
export default MyComponent;Docusaurus v2 uses MDX to parse it's Markdown content, allowing you to use React components. They provide default components that create a tabbed navigation and separate code examples.
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
<Tabs
defaultValue="js"
values={[
{ label: 'JavaScript', value: 'js', },
{ label: 'Python', value: 'py', },
{ label: 'Java', value: 'java', },
]
}>
<TabItem value="js">
```js
function helloWorld() {
console.log('Hello, world!');
}def hello_world():
print 'Hello, world!'class HelloWorld {
public static void main(String args[]) {
System.out.println("Hello, World");
}
}Docusaurus uses remark-admonitions to add support for
:::tip Title
The content and title *can* include markdown.
:::The default keywords are:
important- Bluetip- Greennote- Graywarning- Yellowdanger- Red
You can also use these aliases instead:
info=>importantsuccess=>tipsecondary=>notedanger=>warning
Colors and typography are contained in /website/siteConfig.js. Custom CSS overrides are contained in /website/static/css/custom.css.