diff options
Diffstat (limited to 'pydis_site/apps/content/resources')
4 files changed, 84 insertions, 10 deletions
diff --git a/pydis_site/apps/content/resources/_info.yml b/pydis_site/apps/content/resources/_info.yml index 583cab18..6553dcc6 100644 --- a/pydis_site/apps/content/resources/_info.yml +++ b/pydis_site/apps/content/resources/_info.yml @@ -1,2 +1,2 @@ -name: Pages +title: Pages description: Guides, articles, and pages hosted on the site. diff --git a/pydis_site/apps/content/resources/guides/_info.yml b/pydis_site/apps/content/resources/guides/_info.yml index 59c60a7b..2f65eaf9 100644 --- a/pydis_site/apps/content/resources/guides/_info.yml +++ b/pydis_site/apps/content/resources/guides/_info.yml @@ -1,2 +1,2 @@ -name: Guides +title: Guides description: Made by us, for you. diff --git a/pydis_site/apps/content/resources/guides/pydis-guides/_info.yml b/pydis_site/apps/content/resources/guides/pydis-guides/_info.yml index 7c9a2225..c126a68a 100644 --- a/pydis_site/apps/content/resources/guides/pydis-guides/_info.yml +++ b/pydis_site/apps/content/resources/guides/pydis-guides/_info.yml @@ -1,2 +1,2 @@ -name: Python Discord Guides +title: Python Discord Guides description: Guides related to the Python Discord server and community. diff --git a/pydis_site/apps/content/resources/guides/pydis-guides/how-to-contribute-a-page.md b/pydis_site/apps/content/resources/guides/pydis-guides/how-to-contribute-a-page.md index f258ef74..726cb7b2 100644 --- a/pydis_site/apps/content/resources/guides/pydis-guides/how-to-contribute-a-page.md +++ b/pydis_site/apps/content/resources/guides/pydis-guides/how-to-contribute-a-page.md @@ -1,11 +1,11 @@ --- title: How to Contribute a Page description: Learn how to write and publish a page to this website. -icon_class: fas -icon: fa-info +icon: fas fa-info relevant_links: Contributing to Site: https://pythondiscord.com/pages/contributing/site/ Using Git: https://pythondiscord.com/pages/contributing/working-with-git/ +toc: 4 --- Pages, which include guides, articles, and other static content, are stored in markdown files in the `site` repository on Github. @@ -22,17 +22,39 @@ As website changes require staff approval, discussing the page content beforehan ## Creating the Page All pages are located in the `site` repo, at the path `pydis_site/apps/content/resources/`. This is the root folder, which corresponds to the URL `www.pythondiscord.com/pages/`. + For example, the file `pydis_site/apps/content/resources/hello-world.md` will result in a page available at `www.pythondiscord.com/pages/hello-world`. +#### Page Categories Nested folders represent page categories on the website. Each folder under the root folder must include a `_info.yml` file with the following: ```yml -name: Category name +title: Category name description: Category description +icon: fas fa-folder # Optional ``` All the markdown files in this folder will then be under this category. +#### Having the Category Also Be a Page +In order to make categories a page, just create a page **with the same name as the category folder** in the category's parent directory. + +```plaintext +guides +├── contributing.md +├── contributing +│ ├── _info.yml +│ └── bot.md +└── _info.yml +``` + +In the above example, `www.pythondiscord.com/guides/` will list `Contributing` as a category entry with information from `contributing/_info.yml`. + +However, `www.pythondiscord.com/guides/contributing` will render `contributing.md` rather than show the category contents. +A dropdown menu will be automatically generated in the top right corner of the page listing the children of the category page. + +Therefore, `www.pythondiscord.com/guides/contributing/bot` will then render `bot.md`, with backlinks to `contributing.md`. + ## Writing the Page Files representing pages are in `.md` (Markdown) format, with all-lowercase filenames and spaces replaced with `-` characters. @@ -44,8 +66,7 @@ The metadata is written in YAML, and should be enclosed in triple dashes `---` * --- title: How to Contribute a Page description: Learn how to write and publish a page to this website. -icon_class: fas -icon: fa-info +icon: fas fa-info relevant_links: Contributing to Site: https://pythondiscord.com/pages/contributing/site/ Using Git: https://pythondiscord.com/pages/contributing/working-with-git/ @@ -59,9 +80,10 @@ Pages, which include guides, articles, and other static content,... - **description:** Short, 1-2 line description of the page's content. ### Optional Fields -- **icon_class:** Favicon class for the category entry for the page. Default: `fab` -- **icon:** Favicon for the category entry for the page. Default: `fa-python` <i class="fab fa-python is-black" aria-hidden="true"></i> +- **icon:** Icon for the category entry for the page. Default: `fab fa-python` <i class="fab fa-python is-black" aria-hidden="true"></i> - **relevant_links:** A YAML dictionary containing `text:link` pairs. See the example above. +- **toc:** A number representing the smallest heading tag to show in the table of contents. + See: [Table of Contents](#table-of-contents) ## Extended Markdown @@ -141,3 +163,55 @@ import os path = os.path.join("foo", "bar") ``` + +--- + +### HTML Attributes +To add HTML attributes to certain lines/paragraphs, [see this page](https://python-markdown.github.io/extensions/attr_list/#the-list) for the format and where to put it. + +This can be useful for setting the image size when adding an image using markdown (see the [Image Captions](#image-captions) section for an example), or for adding bulma styles to certain elements (like the warning notification [here](/pages/guides/pydis-guides/contributing/sir-lancebot#setup-instructions)). +**This should be used sparingly, as it reduces readability and simplicity of the article.** + +--- + +### Image Captions +To add an image caption, place a sentence with italics *right below* the image link + +**Markdown:** +```nohighlight +{: width="400" } +*Summmer Code Jam 2020 banner with event information.* +``` + +**Output:** + +{: width="400"} +*Summer Code Jam 2020 banner with event information.* + +> Note: To display a regular italicized line below an image, leave an empty line between the two. + +--- + +### Table of Contents +In order to show the table of contents on a page, simply define the `toc` key in the page metadata. + +The value of the `toc` key corresponds to the smallest heading to list in the table of contents. +For example, with markdown content like this: + +```markdown +# Header 1 +words +### Header 3 +more words +# Another Header 1 +## Header 2 +even more words +``` + +and `toc: 2` in the page metadata, only `Header 1`, `Another Header 1` and `Header 2` will be listed in the table of contents. + +To use a custom label in the table of contents for a heading, set the `data-toc-label` attribute in the heading line. See [HTML Attributes](#html-attributes) for more information. + +```markdown +# Header 1 {: data-toc-label="Header One" } +``` |