Giter Club home page Giter Club logo

maxafriedrich / webout Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 247 KB

This GitHub repository contains a webpage/handout that offers text-to-speech and text accessibility features, designed with inspiration from Edward Tufte, along with a good dark theme.

License: MIT License

Python 51.37% CSS 25.05% JavaScript 15.71% HTML 7.88%
accessibility google-text-to-speech-api handout tufte tufte-css dark-theme markdown mermaidjs pandoc plotly notes-tool

webout's Introduction

README

Introduction

This code contains functions that allow you to convert markdown files to HTML, and optionally convert them to MP3 audio files using Google's Text-to-Speech API. It also includes a function that evaluates and replaces any python code blocks in the markdown files. It is heavily inspired by Edward Tufte's work and tufte-css. It is primarily designed for handouts and notes.

Dependencies

The following python modules:

  • google-cloud-texttospeech
  • plotly

The following system packages:

How to Use

  1. Put all the markdown files you want to convert in the "../md" folder.
  2. Optionally, put any static files you want to include in the "../static" folder.
  3. Run the "main()" function to convert the markdown files to HTML and optionally to MP3 audio files. You can turn off the aud:w:io conversion by passing the "-S" or "--no-sound" argument when running the script.
  4. The converted files will be saved in the "../out" folder.
  5. cd into the out folder and run python -m http.server to open a http server that you can use to view the output. Alternatively you can host it on an actual web server, to do that just copy the whole of the out folder to wherever you need for your web server.

Example File

---
title: Hello ๐ŸŒ!
author: Max Friedrich
date: 3/4/23
---


Here is a mermaid diagram.[^1]

[^1]:
```mermaid
graph LR
A[Hard edge] -->B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
```

Here is some inline code:

```language-python
print("Hello World")
for i in range(10):
  print(i)
```
Here is some simple maths:

$$y=5$$
$$x = 5$$
$$z = x+y$$



```py
from graph import Chart
spark={"y":[0.17, 0.16, 0.11, 0.05, 0.02, 0.02, 0.04, 0.02, 0.01, 0.03, 0.03, 0.04, 0.03, 0.03, 0.03, 0.04, 0.04, 0.05, 0.09, 0.16, 0.18, 0.37, 0.57, 0.75, 0.98, 1.07, 1.14, 1.15, 1.10, 0.90, 0.83, 0.98, 1.12, 1.40, 1.96, 2.00, 1.80, 1.79, 1.48, 1.21, 0.83, 0.64, 0.41, 0.33, 0.26, 0.26, 0.24, 0.26, 0.18, 0.14, 0.08, 0.07, 0.06, 0.07, 0.07, 0.13, 0.15, 0.16, 0.19, 0.34, 0.54, 0.98, 1.26, 1.46, 1.23, 1.25, 1.19, 1.30, 1.31, 1.29, 1.19, 1.06, 1.13, 1.35, 1.54, 1.70, 1.91, 1.91, 1.61, 1.42, 1.49, 1.55, 1.54, 1.62, 2.10, 2.71, 3.58, 5.80, 6.65, 5.29, 4.66, 4.67, 5.03, 4.34, 3.70, 3.41, 3.65, 4.72, 6.21, 7.36, 7.40, 6.72, 5.72, 4.27, 2.78, 2.09, 1.80, 1.51, 1.35, 1.37, 1.96, 2.36, 3.20, 3.78, 5.05, 5.52, 4.60, 3.64, 2.46, 2.09, 1.54, 1.30, 1.21, 1.31, 1.47, 1.91, 2.62, 2.99, 3.07, 2.78, 2.31, 1.63, 1.39, 1.50, 1.60, 1.87, 2.08, 4.29, 3.84, 2.48, 1.52, 1.34, 1.47, 1.78, 2.07, 2.20, 2.27],"x":list(range(148))}
Chart(is_pdf).set_data(spark).spark(width=150).md("covid_infection.svg")
```
Covid infections, here estimated by the ONS in the form of a spark line (see [full report](https://www.ons.gov.uk/peoplepopulationandcommunity/healthandsocialcare/conditionsanddiseases/datasets/coronaviruscovid19infectionsurveydata)) ![covid infection estimate over time](covid_infection.svg). Here is some more text, this time with[^2] a footnote.

[^2]: Here is the second footnote.

example rendered

webout's People

Contributors

maxafriedrich avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.