PyPI - xlwings-server - Versions diffs - 1.1.0__py3-none-any.whl - Mend

xlwings-server 1.1.0__py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (313) hide show

xlwings_server/templates/base.html ADDED Viewed

@@ -0,0 +1,117 @@
+<!doctype html>
+<html lang="en">
+  <head hx-head="merge">
+    {% block head %}
+      <meta charset="utf-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <title>Task pane</title>
+      <link rel="icon" type="image/png" href="{{ url_for('static', path='/images/favicon.png') }}" />
+      {# xlwings Wasm #}
+      {% if settings.enable_wasm %}
+        {% if settings.cdn_pyodide %}
+          <script
+            src="https://cdn.jsdelivr.net/pyodide/v0.27.5/full/pyodide.js"
+            integrity="sha384-rm4QcPMX69sqmX2kWiJa3BF02sgdJkVyATWkw5NHAxBUAvmLXhToWZYaP2wCcyEe"
+            crossorigin="anonymous"></script>
+        {% else %}
+          <script src="{{ url_for('static', path='/vendor/pyodide/pyodide.js') }}"></script>
+        {% endif %}
+      {% endif %}
+      {# Config #}
+      <script src="{{ url_for('static', path='/js/config.js') }}" defer></script>
+      {# htmx #}
+      {% if settings.enable_htmx %}
+        <script src="{{ url_for('static', path='/vendor/htmx.org/dist/htmx.min.js') }}"></script>
+        <script src="{{ url_for('static', path='/vendor/htmx-ext-head-support/head-support.js') }}"></script>
+        <script src="{{ url_for('static', path='/vendor/htmx-ext-loading-states/loading-states.js') }}"></script>
+        <script src="{{ url_for('static', path='/js/core/htmx-handlers.js') }}" defer></script>
+      {% endif %}
+      <script src="{{ url_for('static', path='/js/core/officejs-history-fix-part1.js') }}"></script>
+      {# Office.js #}
+      {% if settings.cdn_officejs %}
+        <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
+      {% else %}
+        <script src="{{ url_for('static', path='/vendor/@microsoft/office-js/dist/office.js') }}"></script>
+      {% endif %}
+      <script src="{{ url_for('static', path='/js/core/officejs-history-fix-part2.js') }}"></script>
+      {# Socket.io (must come before xlwings.js) #}
+      {% block socketio %}
+        {% if settings.enable_socketio %}
+          <script src="{{ url_for('static', path='/vendor/socket.io/client-dist/socket.io.min.js') }}"></script>
+        {% endif %}
+      {% endblock socketio %}
+      {# xlwings.js (must come before custom-function-code) #}
+      <script type="module" src="{{ url_for('static', path='/js/core/xlwingsjs/xlwings.js') }}" defer></script>
+      {% block socketio2 %}
+        {% if settings.enable_socketio %}
+          {# Must come after xlwings.js #}
+          <script src="{{ url_for('static', path='/js/core/socketio-handlers.js') }}" defer></script>
+        {% endif %}
+      {% endblock socketio2 %}
+      {# Alpine.js CSP boilerplate (must come before custom JS, which must come before alpinejs library) #}
+      {% if settings.enable_alpinejs_csp %}
+        <script src="{{ url_for('static', path='/js/core/alpinejs-csp-boilerplate.js') }}"></script>
+      {% endif %}
+      {# JS Config #}
+      {# prettier-ignore-start #}
+      <script id="config" type="application/json">
+        {{ settings.jsconfig|tojson }}
+      </script>
+      {# prettier-ignore-end #}
+      <script src="{{ url_for('static', path='/js/auth.js') }}"></script>
+      {% block custom_functions_code %}
+        <script src="{{ url_for('custom_functions_code') }}" defer></script>
+        {% if settings.environment == "dev" or settings.enable_wasm %}
+          <script src="{{ url_for('static', path='/js/core/reload-custom-functions.js') }}" defer></script>
+        {% endif %}
+      {% endblock custom_functions_code %}
+      {# Bootstrap with the xlwings theme #}
+      {% if settings.enable_bootstrap %}
+        <link
+          rel="stylesheet"
+          href="{{ url_for('static', path='/vendor/bootstrap-xlwings/dist/bootstrap-xlwings.min.css') }}" />
+        <script src="{{ url_for('static', path='/vendor/bootstrap/dist/js/bootstrap.bundle.min.js') }}"></script>
+        <script src="{{ url_for('static', path='/js/core/bootstrap-customizations.js') }}" defer></script>
+      {% endif %}
+      {# Axios #}
+      <script src="{{ url_for('static', path='/vendor/axios/dist/axios.min.js') }}" defer></script>
+      {# Examples #}
+      {% if settings.enable_examples %}
+        <script src="{{ url_for('static', path='/js/core/examples.js') }}" defer></script>
+      {% endif %}
+      {# Own #}
+      <link rel="stylesheet" href="{{ url_for('static', path='/css/core.css') }}" />
+      <link rel="stylesheet" href="{{ url_for('static', path='/css/style.css') }}" />
+      <script type="module" src="{{ url_for('static', path='/js/main.js') }}" defer></script>
+      <script src="{{ url_for('static', path='/js/ribbon.js') }}" defer></script>
+      {% block hotreload %}
+        {% if settings.environment == "dev" and settings.enable_socketio %}
+          <script src="{{ url_for('static', path='/js/core/hotreload.js') }}" defer></script>
+        {% endif %}
+      {% endblock hotreload %}
+      {% block extra_head %}
+        {# This allows to selectively load Alpine.js components #}
+      {% endblock extra_head %}
+      {# Alpine.js CSP build (must come after alpinejs-csp-boilerplate.js and custom code such as main.js) #}
+      {% if settings.enable_alpinejs_csp %}
+        <script src="{{ url_for('static', path='/vendor/@alpinejs/csp/dist/cdn.min.js') }}" defer></script>
+      {% endif %}
+    {% endblock head %}
+  </head>
+  <body hx-ext="head-support">
+    <div
+      id="global-error-alert"
+      class="alert alert-danger alert-dismissible fade show d-none z-index-1000"
+      role="alert">
+      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+      <span></span>
+    </div>
+    <div id="global-status-alert" class="alert alert-warning alert-dismissible fade show d-none" role="alert">
+      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+      <span></span>
+    </div>
+    {% block content %}
+    {% endblock content %}
+  </body>
+</html>

xlwings_server/templates/examples/alpine/README.md ADDED Viewed

@@ -0,0 +1,26 @@
+# Alpine.js sample
+This example demonstrates a few common Alpine.js features. They are explained on the task pane itself.
+To try it out, replace `app/routers/taskpane.py` with the following code:
+```python
+from fastapi import APIRouter, Request
+from ..config import settings
+from ..templates import TemplateResponse
+router = APIRouter(prefix=settings.app_path)
+@router.get("/taskpane.html")
+async def taskpane(request: Request):
+    return TemplateResponse(
+        request=request,
+        name="examples/alpine/taskpane.html",
+    )
+```
+This sample also depends on:
+- `app/static/js/core/examples.js`

xlwings_server/templates/examples/alpine/taskpane.html ADDED Viewed

@@ -0,0 +1,47 @@
+{% extends "base.html" %}
+{% block content %}
+  <div class="container-fluid ps-3">
+    <h1 class="mt-4">1. Visibility</h1>
+    <p>Show and hide an element.</p>
+    <div x-data="visibility">
+      <button @click="toggle" class="btn btn-primary w-25" x-text="label"></button>
+      <span class="ms-4" x-show="isOpen">The Magic of Alpine.js!</span>
+    </div>
+    <h1 class="mt-4">2. Slider</h1>
+    <p>You can change the values either on the slider or as number and the other control will move in sync.</p>
+    <div x-data="slider" class="mt-4 mb-4">
+      <input type="range" min="0" max="100" class="form-range" :value="percentage" @input="update" />
+      <input type="number" min="0" max="100" class="form-control mt-2" :value="percentage" @input="update" />
+    </div>
+    <h1>3. Names</h1>
+    <p>
+      Concatenates the first and last name as you type. You can activate the First Name input box via the
+      <code>/</code> keyboard shortcut.
+    </p>
+    <div x-data="nameForm">
+      <form>
+        <div class="mb-3">
+          <label for="firstName" class="form-label">First Name</label>
+          <input
+            name="firstName"
+            type="text"
+            class="form-control"
+            @input="handleInput"
+            @keydown.window.slash.prevent="focus"
+            autocorrect="off" />
+        </div>
+        <div class="mb-3">
+          <label for="lastName" class="form-label">Last Name</label>
+          <input name="lastName" type="text" class="form-control" @input="handleInput" autocorrect="off" />
+        </div>
+        <p>Full Name</p>
+        <p x-text="fullName"></p>
+      </form>
+    </div>
+  </div>
+{% endblock content %}

xlwings_server/templates/examples/auth/README.md ADDED Viewed

@@ -0,0 +1,38 @@
+# Task pane authentication with htmx
+- The task pane landing page has to be publicly accessible.
+- Everything else can be locked down using the `dep.User` dependency.
+- Since it is htmx that provides the `Authorization` header with every request, you'll end up with an authentication error if you use `hx-push-url="true"` or `hx-boost="true"` when right-clicking on the task pane and selecting `Reload`. This happens also with hot-reloading during development. The reason is that a full page reload isn't handled by htmx, which means that the Authorization header is missing. Therefore, the example doesn't push the url: you won't see any authentication errors when reloading, but in return, a reload always brings you back to the landing page.
+To try it out, replace `app/routers/taskpane.py` with the following code:
+```python
+from fastapi import APIRouter, Request
+from .. import dependencies as dep
+from ..config import settings
+from ..templates import TemplateResponse
+router = APIRouter(prefix=settings.app_path)
+@router.get("/taskpane.html")
+async def taskpane(request: Request):
+    return TemplateResponse(
+        request=request,
+        name="examples/auth/public.html",
+    )
+@router.get("/taskpane/protected")
+async def taskpane_protected(request: Request, current_user: dep.User):
+    return TemplateResponse(
+        request=request,
+        name="examples/auth/protected.html",
+        context={"current_user": current_user},
+    )
+```
+This sample also depends on:
+- `app/static/js/htmx-handlers.js`

xlwings_server/templates/examples/auth/protected.html ADDED Viewed

@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+{% block content %}
+  <div class="container-fluid pt-3 ps-3">
+    <h1>Protected Task Pane</h1>
+    <p>Your are logged in as {{ current_user.name }}.</p>
+  </div>
+{% endblock content %}

xlwings_server/templates/examples/auth/public.html ADDED Viewed

@@ -0,0 +1,11 @@
+{# manifest.xml requires the landing page to be public. Once loaded, htmx loads the protected endpoint.
+hx-trigger requires a delay as otherwise it's fired before the rest of the htmx attributes are loaded. #}
+{% extends "base.html" %}
+{% block content %}
+  <div class="container-fluid pt-3 ps-3">
+    <a id="btn-protected" hx-get="{{ url_for('taskpane_protected') }}" hx-target="body" hx-trigger="load delay:1ms"
+      >Loading...</a
+    >
+  </div>
+{% endblock content %}

xlwings_server/templates/examples/excel_object_model/README.md ADDED Viewed

@@ -0,0 +1,49 @@
+# Manipulating the Excel Object Model from the Task Pane
+This example demonstrates how to manipulate Excel using htmx. You can enter a name in the text box and after clicking the button, it will add it to the bottom of column A in the active sheet.
+To try it out, replace `app/routers/taskpane.py` with the following code:
+```python
+from fastapi import APIRouter, Form, Request
+from .. import dependencies as dep
+from ..templates import TemplateResponse
+router = APIRouter()
+@router.get("/taskpane.html")
+async def taskpane(request: Request):
+    return TemplateResponse(
+        request=request,
+        name="examples/excel_object_model/add_name_form.html",
+    )
+@router.post("/name")
+async def name(request: Request, book: dep.Book, name: str = Form(None)):
+    # Error handling
+    error = "Please provide a name!" if name == "" else None
+    # Excel manipulations
+    sheet = book.sheets.active
+    row_ix = sheet["A1"].end("down").row if sheet["A1"].value else 0
+    book.sheets.active[row_ix, 0].value = name
+    # Include your book object as "book" in the context
+    return TemplateResponse(
+        request=request,
+        name="examples/excel_object_model/add_name_form.html",
+        context={
+            "error": error,
+            "book": book,
+        },
+        block_names="content",
+    )
+```
+This sample also depends on:
+- `static/js/core/htmx-handlers.js`
+- `templates/_book.html`

xlwings_server/templates/examples/excel_object_model/add_name_form.html ADDED Viewed

@@ -0,0 +1,27 @@
+{% extends "base.html" %}
+{% block content %}
+  <div class="container-fluid pt-3 ps-3" hx-target="this">
+    {% include "_book.html" %}
+    <form>
+      <div class="mb-3">
+        <label for="inputName" class="form-label">Name</label>
+        <input class="form-control" name="name" id="inputName" autocorrect="off" />
+      </div>
+      <button
+        type="submit"
+        class="btn btn-primary ps-4 pe-1"
+        xw-book="true"
+        xw-config='{"exclude": "MySheet"}'
+        hx-post="{{ url_for('name') }}"
+        hx-swap="outerHTML"
+        hx-disabled-elt="this">
+        Add Name to Excel
+        <span class="spinner-border spinner-border-sm htmx-indicator" role="status" aria-hidden="true"></span>
+      </button>
+    </form>
+    {% if error %}
+      <div class="alert alert-danger mt-4" role="alert">{{ error }}</div>
+    {% endif %}
+  </div>
+{% endblock content %}

xlwings_server/templates/examples/hello_world/README.md ADDED Viewed

@@ -0,0 +1,9 @@
+# Hello World
+This example alternately prints `Hello xlwings!` and `Bye xlwings!` in cell A1 of the first sheet whenever you click the button on the task pane.
+It is the default example in `app/routers/taskpane.py`.
+The sample also depends on:
+- `app/custom_scripts/examples.py`

xlwings_server/templates/examples/hello_world/taskpane_hello.html ADDED Viewed

@@ -0,0 +1,24 @@
+{% extends "base.html" %}
+{% block content %}
+  <div class="container-fluid pt-3 ps-3">
+    <h1>Example Task Pane</h1>
+    <div class="mb-3 d-flex flex-column gap-2">
+      <button xw-click="hello_world" class="btn btn-primary btn-sm" type="button">
+        Write 'Hello/Bye xlwings!' to A1
+      </button>
+      <button
+        xw-click="setup_custom_functions"
+        xw-config='{"exclude": "MySheet"}'
+        class="btn btn-primary btn-sm"
+        type="button">
+        Insert sheet with custom functions
+      </button>
+      {% if not settings.enable_wasm %}
+        <button xw-click="show_alert" class="btn btn-primary btn-sm" type="button">Show an alert</button>
+      {% endif %}
+      <button xw-click="show_plot" class="btn btn-primary btn-sm" type="button">Insert a Matplotlib Plot</button>
+      <button xw-click="show_error" class="btn btn-primary btn-sm" type="button">Show an error message</button>
+    </div>
+  </div>
+{% endblock content %}

xlwings_server/templates/examples/htmx_form/README.md ADDED Viewed

@@ -0,0 +1,44 @@
+# htmx form sample
+This example uses a Bootstrap form, adopted from:
+https://getbootstrap.com/docs/5.3/forms/overview/#overview
+- It sends the content of the input field (requires a "name" tag) to the backend using [htmx](https://htmx.org/)
+- On the backend, it calls a custom function and
+- returns the result via the `_greeting.html` template. The leading underscore means that it is a partial HTML snippet, not a full page.
+- Back on the frontend, htmx takes care of displaying that HTML snippet in the `#result` div via `hx-target` tag.
+To try it out, replace `app/routers/taskpane.py` with the following code:
+```python
+from fastapi import APIRouter, Form, Request
+from .. import custom_functions
+from ..config import settings
+from ..templates import TemplateResponse
+router = APIRouter(prefix=settings.app_path)
+@router.get("/taskpane.html")
+async def taskpane(request: Request):
+    return TemplateResponse(
+        request=request,
+        name="examples/htmx_form/taskpane_htmx_form.html",
+    )
+@router.post("/hello")
+async def hello(request: Request, fullname: str = Form()):
+    error = "Please provide a name!" if not fullname else None
+    greeting = custom_functions.hello(fullname)
+    return TemplateResponse(
+        request=request,
+        name="examples/htmx_form/_greeting.html",
+        context={"greeting": greeting, "error": error},
+    )
+```
+This sample also depends on:
+- no dependencies

xlwings_server/templates/examples/htmx_form/_greeting.html ADDED Viewed

@@ -0,0 +1,6 @@
+<h1>Result</h1>
+{% if error %}
+  <div class="alert alert-danger" role="alert">{{ error }}</div>
+{% else %}
+  <p>{{ greeting }}</p>
+{% endif %}

xlwings_server/templates/examples/htmx_form/taskpane_htmx_form.html ADDED Viewed

@@ -0,0 +1,21 @@
+{% extends "base.html" %}
+{% block content %}
+  <div class="container-fluid pt-3 ps-3">
+    <form>
+      <div class="mb-3">
+        <label for="inputName" class="form-label">Name</label>
+        <input class="form-control" name="fullname" id="inputName" autocorrect="off" />
+      </div>
+      <button
+        type="submit"
+        class="btn btn-primary ps-4 pe-1"
+        hx-post="{{ url_for('hello') }}"
+        hx-target="#result"
+        hx-disabled-elt="this">
+        Submit <span class="spinner-border spinner-border-sm htmx-indicator" role="status" aria-hidden="true"></span>
+      </button>
+    </form>
+    <div id="result" class="mt-4"></div>
+  </div>
+{% endblock content %}

xlwings_server/templates/examples/live_form_validation/README.md ADDED Viewed

@@ -0,0 +1,60 @@
+# Live Form Validation
+This example demonstrates how to validate a form input live on the backend via htmx. If you provide a name that has less than 4 characters, you'll get a validation error shown.
+To try it out, replace `app/routers/taskpane.py` with the following code:
+```python
+from fastapi import APIRouter, Form, Request, status
+from fastapi.responses import PlainTextResponse, Response
+from .. import dependencies as dep
+from ..templates import TemplateResponse
+router = APIRouter()
+@router.get("/taskpane.html")
+async def taskpane(request: Request):
+    return TemplateResponse(
+        request=request,
+        name="examples/live_form_validation/add_name_form.html",
+    )
+def validate_name(name: str):
+    if 0 < len(name) < 4:
+        return "Name must have at least 4 characters!"
+@router.post("/name")
+async def name(request: Request, book: dep.Book, name: str = Form(None)):
+    # Validation
+    error = validate_name(name)
+    if error:
+        return Response(status_code=status.HTTP_204_NO_CONTENT)
+    # Excel manipulations
+    sheet = book.sheets.active
+    row_ix = sheet["A1"].end("down").row if sheet["A1"].value else 0
+    book.sheets.active[row_ix, 0].value = name
+    # Include your book object as "book" in the context
+    return TemplateResponse(
+        request=request,
+        name="examples/live_form_validation/add_name_form.html",
+        context={"book": book},
+        block_names="content",
+    )
+@router.get("/name/validation")
+async def validate_name_input(request: Request, name: str):
+    error = validate_name(name)
+    return PlainTextResponse(error if error else "&nbsp;")
+```
+This sample also depends on:
+- `static/js/core/htmx-handlers.js`
+- `templates/_book.html`

xlwings_server/templates/examples/live_form_validation/add_name_form.html ADDED Viewed

@@ -0,0 +1,33 @@
+{% extends "base.html" %}
+{% block content %}
+  <div class="container-fluid pt-3 ps-3" id="mycontainer">
+    {% include "_book.html" %}
+    <form>
+      <div class="mb-3">
+        <label for="inputName" class="form-label">Name</label>
+        <input
+          class="form-control"
+          name="name"
+          id="inputName"
+          autocorrect="off"
+          hx-get="{{ url_for('validate_name_input') }}"
+          hx-target="next .invalid-feedback"
+          hx-trigger="keyup delay:300ms changed" />
+        <div class="invalid-feedback d-block">&nbsp;</div>
+      </div>
+      <button
+        type="submit"
+        class="btn btn-primary ps-4 pe-1"
+        xw-book="true"
+        xw-config='{"exclude": "MySheet"}'
+        hx-post="{{ url_for('name') }}"
+        hx-swap="outerHTML"
+        hx-target="#mycontainer"
+        hx-disabled-elt="this">
+        Add Name to Excel
+        <span class="spinner-border spinner-border-sm htmx-indicator" role="status" aria-hidden="true"></span>
+      </button>
+    </form>
+  </div>
+{% endblock content %}

xlwings_server/templates/examples/multi_app/README.md ADDED Viewed

@@ -0,0 +1,34 @@
+# Multiple Apps
+This example loads a different task pane depending on the name of the workbook.
+To try it out, replace `app/routers/taskpane.py` with the following code:
+```python
+from fastapi import APIRouter, Request
+from ..config import settings
+from ..templates import TemplateResponse
+router = APIRouter(prefix=settings.app_path)
+@router.get("/taskpane")
+@router.get("/taskpane.html")
+async def taskpane(request: Request, app: str = None):
+    if not app:
+        template = "examples/multi_app/taskpane_loader.html"
+    elif app == "1":
+        template = "examples/multi_app/taskpane1.html"
+    elif app == "2":
+        template = "examples/multi_app/taskpane2.html"
+    return TemplateResponse(
+        request=request,
+        name=template,
+    )
+```
+The sample also depends on:
+- `app/static/js/core/examples.js`

xlwings_server/templates/examples/multi_app/taskpane1.html ADDED Viewed

@@ -0,0 +1,7 @@
+{% extends "base.html" %}
+{% block content %}
+  <div class="container-fluid pt-3 ps-3">
+    <h1>App 1</h1>
+  </div>
+{% endblock content %}

xlwings_server/templates/examples/multi_app/taskpane2.html ADDED Viewed

@@ -0,0 +1,7 @@
+{% extends "base.html" %}
+{% block content %}
+  <div class="container-fluid pt-3 ps-3">
+    <h1>App 2</h1>
+  </div>
+{% endblock content %}

xlwings_server/templates/examples/multi_app/taskpane_loader.html ADDED Viewed

@@ -0,0 +1,5 @@
+{% extends "base.html" %}
+{% block content %}
+  <div x-data="appLoader" :hx-get="url" hx-target="body" hx-trigger="app:loadTaskpane"></div>
+{% endblock content %}

xlwings_server/templates/examples/navigation/README.md ADDED Viewed

@@ -0,0 +1,28 @@
+# Navigation via htmx and Bootstrap
+This sample uses a Bootstrap nav (see https://getbootstrap.com/docs/5.3/components/navs-tabs/#underline) to navigate between 3 different pages, but using only a single taskpane. It makes use of the htmx tag `hx-boost`, which converts traditional anchor tags into partial page loads.
+To try it out, replace `app/routers/taskpane.py` with the following code:
+```python
+from fastapi import APIRouter, Request
+from ..config import settings
+from ..templates import TemplateResponse
+router = APIRouter(prefix=settings.app_path)
+@router.get("/taskpane.html")
+@router.get("/taskpane/{page}")
+async def taskpane(request: Request, page: str = "one"):
+    return TemplateResponse(
+        request=request,
+        name=f"examples/navigation/taskpane_{page}.html",
+        context={"page": page},
+    )
+```
+This sample also depends on:
+- no dependencies

xlwings_server/templates/examples/navigation/_navigation.html ADDED Viewed

@@ -0,0 +1,16 @@
+<ul class="nav nav-underline pb-4" hx-boost="true">
+  {%
+    set pages = [
+      ('One', url_for('taskpane', page='one')),
+      ('Two', url_for('taskpane', page='two')),
+      ('Three', url_for('taskpane', page='three'))
+    ]
+  %}
+  {% for name, url in pages %}
+    <li class="nav-item">
+      <a class="nav-link {% if page == name|lower %}active{% endif %}" aria-current="page" href="{{ url }}"
+        >{{ name }}</a
+      >
+    </li>
+  {% endfor %}
+</ul>

xlwings_server/templates/examples/navigation/taskpane_one.html ADDED Viewed

@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+{% block content %}
+  <div class="container-fluid ps-3">
+    {% include "examples/navigation/_navigation.html" %}
+    <h1>This is Page 1</h1>
+  </div>
+{% endblock content %}