/brython-project-template

See it in action here

Primary LanguageHTMLMIT LicenseMIT

brython-project-template

What is it?

This template contains the following characteristics that are likely useful when starting a new Brython-powered project.

  • The index.html embeds a loading animation to give end user a hint to be patient. This can be helpful because the first time loading of Brython is slower. (Note to Developer: The loading animation does not represent the real progress. If your website stuck with the loading animation, open the browser console to check for error messages.)
  • Although not a Brython-relevant feature, this template includes a github workflow to deploy your each push to Github Pages (After the first deployment which prepares your website into the default gh-pages branch, you need a one-time effort to enable Github Pages for your github repo nowadays Github seems to automatically create a "github-pages" environment for you, so that your website will be available to the world on https://your_github_username.github.io/your_project_name.)
  • The index.html automatically loads latest released version of Brython from CDN. You can easily switch to use the not-yet-released latest Brython source from github.
  • The index.html references bootstrap from CDN for better layout.
  • An optional browser-console simulator, useful if you are browsing from Android device. (All these can be easily comment or uncomment from the index.html.)
  • The website root directory is nested inside this project. This setup would provide better separation when you also creates virtual env .venv inside your project directory. (Otherwise you could hit a known issue.)

How to use it?

You can use this repo as a template to start your own project.

  1. Your options are:
  2. Run python3 -m http.server to start a web server, and then visit http://localhost:8000 to see it in action.
  3. Once you are familiar with this project's structure, you can modify it by changing the content between <!-- The real project content starts from here --> and <!-- The real project content ends here --> in index.html, and content inside main.py.

That is all.

Again, your website will also be available to the world on https://your_github_username.github.io/your_project_name after your pushing back to github.

Appendix: Using the loading animation only

If you already have an existing project, and you only want to use the loading animation from this project, you can add the loading animation by including this snippet into your own index.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://rayluo.github.io/brython-project-template/loader.js"></script>
<script type="text/javascript">update_loader_message("Loading System...")</script>