Skip to content

Commit

Permalink
Autoformat entire codebase (streamlit#152)
Browse files Browse the repository at this point in the history
Co-authored-by: Snehan Kekre <[email protected]>
  • Loading branch information
Juan Martín García and snehankekre authored Nov 8, 2021
1 parent 9185a25 commit 05ccd4f
Show file tree
Hide file tree
Showing 259 changed files with 51,652 additions and 6,576 deletions.
98 changes: 49 additions & 49 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ The directory structure of `content/` does not matter as the files will be recur

### Add a new page

Do you want to add a new page to the docs?
Do you want to add a new page to the docs?

1. First, decide which section the page should live in (Streamlit Library, Streamlit Cloud, or Knowledge Base).

Expand All @@ -67,7 +67,7 @@ Now that you've decided where the file should live and have named the file, it's

**File format**:

Every `.md` file has front matter at the very top that defines the page title which appears in the browser tab bar, and the URL slug which appears after the slash in `docs.streamlit.io/` and `localhost:3000/`.
Every `.md` file has front matter at the very top that defines the page title which appears in the browser tab bar, and the URL slug which appears after the slash in `docs.streamlit.io/` and `localhost:3000/`.

E.g. For a page titled "Create a component" that should exist at `docs.streamlit.io/library/components/create`, the front matter at the top of `create-component.md` is:

Expand Down Expand Up @@ -96,21 +96,21 @@ This is a **note** that links to our [website](https://docs.streamlit.io/).

**Embed code:**

Enclose code within \` \` to embed it inline. E.g.
Enclose code within \` \` to embed it inline. E.g.

```markdown
Create a header with `st.header`.
```

Embed code blocks like so:

```markdown
````markdown
```python
import streamlit as st

st.text("Hello world")
```
```
````

We support syntax highlighting for Python, Bash, TOML, SQL, and JSX.

Expand All @@ -122,39 +122,37 @@ Use standard Markdown to link to other pages in the docs. E.g. Add an inline lin
Learn how to [Create an app](/library/get-started/create-an-app).
```



**Add images:**

Store images you want to display in `/public/images/`. There are two ways to display images.

1. To display a single image, use regular Markdown. Make sure to start the path of your images from `/images/` instead of `/public/images/`. E.g.:

```markdown
![Secrets manager screenshot](/images/databases/edit-secrets.png)
```
```markdown
![Secrets manager screenshot](/images/databases/edit-secrets.png)
```

2. To display multiple images on the same line, add an `<Image />` tag containing the alt text and path to the image, for each image, and enclose all of them within `<Flex>` `</Flex>` tags. E.g. To display 3 images stored in `/public/images/databases/` :

```markdown
<Flex>
<Image alt="Bigquery screenshot 7" src="/images/databases/big-query-7.png" />
<Image alt="Bigquery screenshot 8" src="/images/databases/big-query-8.png" />
<Image alt="Bigquery screenshot 9" src="/images/databases/big-query-9.png" />
</Flex>
```
```markdown
<Flex>
<Image alt="Bigquery screenshot 7" src="/images/databases/big-query-7.png" />
<Image alt="Bigquery screenshot 8" src="/images/databases/big-query-8.png" />
<Image alt="Bigquery screenshot 9" src="/images/databases/big-query-9.png" />
</Flex>
```

**Discoverability:**

All it takes for a new page to be available at a URL is to create a Markdown file in the format described above, containing the title and slug in the front matter.

However, a user has to know the URL to visit the page. The page is therefore *reachable but not discoverable*. The next section describes how to add pages to the docs Menu so that users can find your page.
However, a user has to know the URL to visit the page. The page is therefore _reachable but not discoverable_. The next section describes how to add pages to the docs Menu so that users can find your page.

### Add pages to the Menu

How do you make the page you created appear in the Menu? Edit the special markdown file `content/menu.md`. All it has is front matter in YAML.

Suppose you have created an "Installation" page that is available at `docs.streamlit.io/library/get-started/installation`. You want to it to appear in the Menu within the "Streamlit Library" section, nested under the "Get Started" page.
Suppose you have created an "Installation" page that is available at `docs.streamlit.io/library/get-started/installation`. You want to it to appear in the Menu within the "Streamlit Library" section, nested under the "Get Started" page.

To do so, find the lines that define the `category` and `url` for "Get Started" in `menu.md` and add two new lines below it, containing:

Expand Down Expand Up @@ -184,23 +182,23 @@ Suppose a new Streamlit release includes a `st.my_chart` function that you want
2. Create Markdown file (`my_chart.md`) in `content/library/api/charts/`
3. Add the following to `my_chart.md`:

```markdown
---
title: st.my_chart
slug: /library/api-reference/charts/st.my_chart
---
```markdown
---
title: st.my_chart
slug: /library/api-reference/charts/st.my_chart
---
<Autofunction function="streamlit.my_chart" />
```
<Autofunction function="streamlit.my_chart" />
```

4. Add the following under the "Chart elements" heading in `content/library/api/api-reference.md`:
1. A RefCard MDX function containing the URL slug defined in `my_chart.md` . This is the card that will appear on the API Reference landing page.
2. An Image MDX function containing alt text and the location of the image to be displayed on the card.
3. A bold heading that will appear on the card (`#### Heading`). It appears below the card image.
4. A brief description of the `st.my_chart` . It appears below the card heading.
5. A code block illustrating how to use `st.my_chart`. It appears below the card description and has a Copy icon that when clicked copies the code block to the users' clipboard.
1. A RefCard MDX function containing the URL slug defined in `my_chart.md` . This is the card that will appear on the API Reference landing page.
2. An Image MDX function containing alt text and the location of the image to be displayed on the card.
3. A bold heading that will appear on the card (`#### Heading`). It appears below the card image.
4. A brief description of the `st.my_chart` . It appears below the card heading.
5. A code block illustrating how to use `st.my_chart`. It appears below the card description and has a Copy icon that when clicked copies the code block to the users' clipboard.

```markdown
````markdown
<RefCard href="/library/api-reference/charts/st.my_chart">
<Image pure alt="Tux, the Linux mascot" src="/img/data-table.png" />

Expand All @@ -213,14 +211,14 @@ Suppose a new Streamlit release includes a `st.my_chart` function that you want
```

</RefCard>
```
````

5. Add the following 2 new lines to `menu.md` so that `st.my_chart` appears in the Menu:

```YAML
- category: Streamlit Library / API Reference / Chart elements / st.my_chart
url: /library/api-reference/charts/st.my_chart
```
```YAML
- category: Streamlit Library / API Reference / Chart elements / st.my_chart
url: /library/api-reference/charts/st.my_chart
```

6. Save your changes and refresh the browser tab. If all went well, you should see a new entry in the Menu, a new card in the API Reference, and a new page for `st.my_chart`.

Expand All @@ -239,21 +237,23 @@ If you know the answer to a Streamlit user's pain point and want to add it to th
1. Decide which of the above sections your article belongs to
2. Navigate to the relevant section's folder in `kb/` and
3. Create a `.md` file in the above specified format containing your article
- Make sure the title in the front matter and the file header in Markdown are identical. E.g.

```markdown
---
title: How do I add a Component to the sidebar?
slug: /knowledge-base/components/add-component-sidebar
---
- Make sure the title in the front matter and the file header in Markdown are identical. E.g.

```markdown
---
title: How do I add a Component to the sidebar?
slug: /knowledge-base/components/add-component-sidebar
---
# How do I add a Component to the sidebar?
```

# How do I add a Component to the sidebar?
```
4. Add a line to the existing `index.md` file in the same folder as your article. It should contain the title and URL slug specified in your article's front matter. This step ensures that users are able to discover your article in the index page of the relevant KB section. E.g.

```markdown
- [How do I add a Component to the sidebar?](/knowledge-base/components/add-component-sidebar)
```
```markdown
- [How do I add a Component to the sidebar?](/knowledge-base/components/add-component-sidebar)
```

## Publishing

Expand All @@ -263,4 +263,4 @@ To publish your changes to the docs site:
2. Create a Pull Request and mark Snehan and Randy as reviewers.
3. Once the checks have completed, checkout the Preview build.
4. Snehan and Randy will review your changes and merge your changes into the `main` branch.
5. Once merged, your changes will be live at [https://docs.streamlit.io/](https://docs.streamlit.io/).
5. Once merged, your changes will be live at [https://docs.streamlit.io/](https://docs.streamlit.io/).
27 changes: 6 additions & 21 deletions algolia/index_config.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,15 @@
"minWordSizefor2Typos": 8,
"hitsPerPage": 20,
"maxValuesPerFacet": 100,
"searchableAttributes": [
"keywords",
"title",
"content"
],
"searchableAttributes": ["keywords", "title", "content"],
"numericAttributesToIndex": null,
"attributesToRetrieve": null,
"replaceSynonymsInHighlight": true,
"unretrievableAttributes": null,
"optionalWords": null,
"attributesForFaceting": [
"filterOnly(version)"
],
"attributesToSnippet": [
"content:15"
],
"attributesToHighlight": [
"category",
"content",
"title"
],
"attributesForFaceting": ["filterOnly(version)"],
"attributesToSnippet": ["content:15"],
"attributesToHighlight": ["category", "content", "title"],
"paginationLimitedTo": 1000,
"attributeForDistinct": null,
"exactOnSingleWordQuery": "attribute",
Expand All @@ -45,11 +33,8 @@
"highlightPreTag": "<em>",
"highlightPostTag": "</em>",
"snippetEllipsisText": "",
"alternativesAsExact": [
"ignorePlurals",
"singleWordSynonym"
]
"alternativesAsExact": ["ignorePlurals", "singleWordSynonym"]
},
"rules": [],
"synonyms": []
}
}
Loading

0 comments on commit 05ccd4f

Please sign in to comment.