This is the source for pyscript.recipes, a site highlight short, drop-in code snippets for PyScript and Pyodide.
A recipe is short snippet of code intended to do one simple thing. It is different from an example*, which might be a fully-realized page accomplishing some holistic task; and a tutorial, which gives an in-depth explanation of the full usage of a specific piece of functionality or API.
Once installed, run pipenv install to install the relevant packages, and pipenv shell to enter an interactive virtual environment shell.
Once your shell is active, you can view the current status of the docs with mkdocs serve, or preview already released versions with mike serve.
The site itself is built from source in a GitHub action when there is a merge to the main branch; you don't need to build/upload a static copy.
Please ensure your idea is, at its core a recipe; if there are additional clarifying details, consider adding a tutorial section following your recipe, so interested readers can learn more. See the File Download page for an example of this.
All pages in the basic section are, by default, formatted with a set of tabs across the top of the page for PyScript, Pyodide, and Micropython.
Each page has a section of text at the top that is common to the recipes for both PyScript and Pyodide. This is content is in index.html. The pyscript-specific content is in pyscript.html and the pyodide-specific content is in pyodide.html. If both tutorials are identical, you can place the content in a file called both.html, and the content will be duplicated to both tabs.
For instanance, to create two new recipes, one which has different content for PyScript and Pyodide and one which has identical content, their file structures might be:
└── content/
└── basic/
├── my-new-post/
│ ├── index.html
│ ├── pyscript.html
│ └── pyodide.html
└── my-universal-post/
├── index.html
└── both.html
Each index.html file should contain some front matter which defines the page's Title (as displayed), its template (usually 'basic'), and its order on the sidebar ('weight'). Feel free to change the weights of other posts as necessary.
---
Title: "File Download"
flavor: 'basic'
weight: 5
---
This is the first sentence of content for this recipe
Files pyscript.html, pyodide.html, and both.html, when the exist, must include some front matter so that Hugo will recognize and parse them. This can be empty frontmatter:
---
---
This is the first sentence in the pyscript-specific part of this recipe
Hugo includes simple access to source code highlighting via chroma, in the form of a template shortcode. For style reasons, highlight tags should be wrapped in an additional div with formatting, like so:
<div class="code-wrapper" style="overflow-x: auto; ">
{{< highlight python "linenos=True,hl_lines=3 22">}}
print("Hello, world") #Your source here
{{< /highlight >}}
</div>The first argument to the highlight shortcore is the language to be highlighted. The second argument takes a variety of options as a comma-separated string, for managing things like line numbers and line highlights. If you don't need/want any of these options, the second argument should be an empty string ("").