Skip to content

Upgrade to current Bootstrap - brings small design changes #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Zegnat wants to merge 7 commits into
base: main
Choose a base branch
from
+74 −92
Open

Upgrade to current Bootstrap - brings small design changes #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3136d04
Move header and footer outside main; add section grouping
Zegnat Jul 11, 2026
c6f16de
Upgrade Bootstrap from 4.0.0-alpha.6 to 5.3.8
Zegnat Jul 11, 2026
49ea5da
Replace custom style overrides with Bootstrap 5 utilities
Zegnat Jul 11, 2026
95a2e35
Wrap page content in a container div
Zegnat Jul 11, 2026
96fce1b
Refine the section headings and spacing
Zegnat Jul 11, 2026
589a621
Describe the mf2util option with Bootstrap form-text instead of a tit…
Zegnat Jul 11, 2026
15227c8
Update the README and add Martijn van der Ven as a contributor
Zegnat Jul 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 11 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ https://python.microformats.io

## Deployment

All commits to the `master` branch get auto-deployed to the live website (running on [Heroku](https://python.microformats.io))
All commits to the `main` branch get auto-deployed to the live website (running on [Heroku](https://python.microformats.io))

## Getting Started

Expand All @@ -15,8 +15,8 @@ This website is built using Python Flask.
To start working with this project, first clone the repository for this project:

```
git clone https://github.com/indieweb/microformats-python-parser-website.git
cd microformats-python-parser-website
git clone https://github.com/microformats/microformats-parser-website-python.git
cd microformats-parser-website-python
```

Next, install the required dependencies:
Expand All @@ -32,6 +32,8 @@ uv run -- app.py --debug (debug mode)
uv run -- gunicorn --bind localhost:8080 app:app (production mode)
```

In debug mode the port defaults to 8080; use `-p`/`--port` to change it.

You can view your running local application at this URL:

```
Expand All @@ -40,19 +42,20 @@ http://localhost:8080

## Requirements

- Python 3.9
- Python 3.14.5
- [uv](https://docs.astral.sh/uv/)

## Contributions

1. Fork it
2. Get it running (see Installation above)
2. Get it running (see Getting Started above)
3. Create your feature branch (`git checkout -b my-new-feature`)
4. Commit your changes (`git commit -am 'Add some feature'`)
5. Push to the branch (`git push origin my-new-feature`)
6. Create new Pull Request

If you find bugs, have feature requests or questions, please
[file an issue](https://github.com/indieweb/microformats-parser-website-python/issues).
[file an issue](https://github.com/microformats/microformats-parser-website-python/issues).

## License

Expand All @@ -63,4 +66,5 @@ http://creativecommons.org/publicdomain/zero/1.0
## Contributors

- Kyle Mahan / [@kylewm](https://github.com/kylewm) (Author)
- [@capjamesg](https://github.com/capjamesg) (Contributor)
- [@capjamesg](https://github.com/capjamesg) (Contributor)
- Martijn van der Ven / [@Zegnat](https://github.com/Zegnat) (Contributor)
148 changes: 63 additions & 85 deletions templates/index.jinja2
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,98 +6,77 @@

<title>Python Microformats Parser</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
form label {
font-weight: bold;
display: block;
}

form textarea,
form input[type=url] {
font-family: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

form .form-control:disabled {
cursor: default;
background: #efefef;
color: black;
}

.help {
color: #999;
font-weight: normal;
}

#json {
font-size: 0.7em;
}

/* disable bootstrap animations */
.form-control, .btn {
transition: none;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

<body>
<main id="mf2" class="container">

<div class="container">
<h1 class="mt-5 mb-3">
Microformats Parser (Python)
{{ mf2py_version }}
</h1>

<form action="/" accept-charset="UTF-8" method="get">
<div class="form-group">
<label for="url">Enter a URL</label>
<input required id="url" class="form-control form-control-lg" type="url" name="url" placeholder="https://example.com/person.html" />
</div>

<div class="form-group">
<label for="parser">Parser</label>
<select id="parser" name="parser">
<option>html5lib</option>
<option>lxml</option>
<option>html.parser</option>
</select>
</div>

<div class="form-check">
<label title="mf2util interprets certain post types (currently h-entry and h-event) and returns a normalized result" class="form-check-label" for="util">
<input id="util" name="util" class="form-check-input" type="checkbox" value="true">
Process with mf2util
</label>
</div>

<button type="submit" class="btn btn-lg btn-success">Parse</button>
</form>

<h2 class="h4 my-5">OR parse just a snippet of HTML</h2>

<form method="post" action="/" class="mb-5">
<div class="form-group">
<label for="doc">HTML</label>
<textarea required id="doc" name="doc" rows="6" class="form-control form-control-lg"></textarea>
</div>

<div class="form-group">
<label for="base-url">Base URL</label>
<input id="base-url" name="url" type="url" class="form-control form-control-lg" />
</div>

<div class="form-group">
<label for="doc-parser">Parser</label>
<select id="doc-parser" name="parser">
<option>html5lib</option>
<option>lxml</option>
<option>html.parser</option>
</select>
</div>

<button type="submit" class="btn btn-lg btn-success">Parse</button>
</form>
<main>

<section class="mb-5">
<h2 class="h4">Parse a URL</h2>

<form action="/" accept-charset="UTF-8" method="get">
<div class="mb-3">
<label for="url" class="form-label fw-bold">Enter a URL</label>
<input required id="url" class="form-control form-control-lg font-monospace" type="url" name="url" placeholder="https://example.com/person.html" />
</div>

<div class="mb-3">
<label for="parser" class="form-label fw-bold">Parser</label>
<select id="parser" name="parser" class="form-select form-select-lg">
<option>html5lib</option>
<option>lxml</option>
<option>html.parser</option>
</select>
</div>

<div class="form-check mb-3">
<input id="util" name="util" class="form-check-input" type="checkbox" value="true" aria-describedby="util-help">
<label class="form-check-label fw-bold" for="util">
Process with mf2util
</label>
<div id="util-help" class="form-text">mf2util interprets certain post types (currently h-entry and h-event) and returns a normalized result.</div>
</div>

<button type="submit" class="btn btn-lg btn-success">Parse</button>
</form>
</section>

<section class="mb-5">
<h2 class="h4 mb-5">OR parse just a snippet of HTML</h2>

<form method="post" action="/">
<div class="mb-3">
<label for="doc" class="form-label fw-bold">HTML</label>
<textarea required id="doc" name="doc" rows="6" class="form-control form-control-lg font-monospace"></textarea>
</div>

<div class="mb-3">
<label for="base-url" class="form-label fw-bold">Base URL</label>
<input id="base-url" name="url" type="url" class="form-control form-control-lg font-monospace" />
</div>

<div class="mb-3">
<label for="doc-parser" class="form-label fw-bold">Parser</label>
<select id="doc-parser" name="parser" class="form-select form-select-lg">
<option>html5lib</option>
<option>lxml</option>
<option>html.parser</option>
</select>
</div>

<button type="submit" class="btn btn-lg btn-success">Parse</button>
</form>
</section>

</main>

<footer class="my-5">
<ul>
Expand All @@ -114,7 +93,6 @@
</li>
</ul>
</footer>

</main>
</div>
</body>
</html>