david-crespo/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Deckset to web page converter

This is a handy script to convert a Deckset presentation into a clean web page with the slides on the left and speaker notes on the right. It uses PNGs generated by the Deckset app for the slides and extracts the speaker notes from the presentation markdown.
Setup

Python 3 is required.
pip install markdown jinja2

Put main.py and template.html in a directory on your computer.
Usage


Put your presentation Markdown in a file called input.md in the same directory you put main.py and template.html
Make a slides directory in the same place
Use the Deckset app to export your slides as PNGs (not including speaker notes) and put the PNGs in slides
run python main.py

You will have a file output.html. Open it in the browser and enjoy your presentation in a new format. You can deploy it as a static site -- make sure you include the slides dir.
Talk title and summary

The template has a couple of spots where you can replace the word Title with the title of your talk, and there is a box where you can add a summary or description.
Redacting slides

If there are any slides you want to leave out, you can just delete the PNG from the directory and they will appear as a blank slide that says redacted.

  
## main.py
import markdown
from jinja2 import Template


def get_notes(slide):
    if "\n^" not in slide:
        return ""

    notes_idx = slide.index("\n^")
    notes = slide[notes_idx:].replace("^ ", "")
    return markdown.markdown(notes)


if __name__ == "__main__":
    with open("template.html") as f:
        template = Template(f.read())

    with open("input.md") as f:
        file_contents = f.read()

    slides = map(get_notes, file_contents.split("\n---\n"))

    with open("output.html", "w") as f:
        f.write(template.render(slides=slides))

## template.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Title</title>
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      p {
        font-size: 14px;
        margin-bottom: 1rem;
      }
      a {
        color: #0645ad;
        text-decoration: underline;
      }
    </style>
  </head>
  <body class="mx-4 text-gray-900">
    <h1 class="text-center text-4xl my-6">Title</h1>
    <div
      class="max-w-xl mx-auto mb-4 rounded p-4 bg-gray-100 border border-gray-300"
    >
      <p>Here's where you might write a summary of your talk.</p>
      <p class="m-0">Another paragraph!</p>
    </div>
    <div class="max-w-4xl sm:grid sm:mx-auto" style="">
      {% for notes in slides %}
      <hr class="col-span-2 border-gray-300 mb-4" />
      <div class="mb-4 sm:mr-4">
        <img
          class="border border-gray-300"
          src="slides/{{loop.index}}.png"
          onerror="this.onerror=null; this.src='slides/redacted.png';"
        />
      </div>
      <div class="mb-4">{{notes}}</div>
      {% endfor %}
    </div>
  </body>
</html>
	import markdown
	from jinja2 import Template


	def get_notes(slide):
	if "\n^" not in slide:
	return ""

	notes_idx = slide.index("\n^")
	notes = slide[notes_idx:].replace("^ ", "")
	return markdown.markdown(notes)


	if __name__ == "__main__":
	with open("template.html") as f:
	template = Template(f.read())

	with open("input.md") as f:
	file_contents = f.read()

	slides = map(get_notes, file_contents.split("\n---\n"))

	with open("output.html", "w") as f:
	f.write(template.render(slides=slides))
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Title</title>
	<link
	href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
	rel="stylesheet"
	/>
	<style>
	p {
	font-size: 14px;
	margin-bottom: 1rem;
	}
	a {
	color: #0645ad;
	text-decoration: underline;
	}
	</style>
	</head>
	<body class="mx-4 text-gray-900">
	<h1 class="text-center text-4xl my-6">Title</h1>
	<div
	class="max-w-xl mx-auto mb-4 rounded p-4 bg-gray-100 border border-gray-300"
	>
	<p>Here's where you might write a summary of your talk.</p>
	<p class="m-0">Another paragraph!</p>
	</div>
	<div class="max-w-4xl sm:grid sm:mx-auto" style="">
	{% for notes in slides %}
	<hr class="col-span-2 border-gray-300 mb-4" />
	<div class="mb-4 sm:mr-4">
	<img
	class="border border-gray-300"
	src="slides/{{loop.index}}.png"
	onerror="this.onerror=null; this.src='slides/redacted.png';"
	/>
	</div>
	<div class="mb-4">{{notes}}</div>
	{% endfor %}
	</div>
	</body>
	</html>