Skip to content

Instantly share code, notes, and snippets.

@fercomunello

fercomunello/index-partial.html

Last active November 21, 2023 00:45
Show Gist options
  • Save fercomunello/701c36db4acf47580e324e6e2202c655 to your computer and use it in GitHub Desktop.
Save fercomunello/701c36db4acf47580e324e6e2202c655 to your computer and use it in GitHub Desktop.
Download ZIP
Demo: Boosting pages with HTMX.
Raw
index-partial.html
<head>
<title>Index | @htmx.org</title>
</head>
<h1>Home</h1>
<p>Having fun with htmx ^^</p>
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" hx-preserve="true">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" hx-preserve="true">
<meta http-equiv="X-UA-Compatible" content="ie=edge" hx-preserve="true">
<!--<meta name="htmx-config" content='{"useTemplateFragments": true}' hx-preserve="true">-->
<title>Index | @htmx.org</title>
<script src="https://unpkg.com/htmx.org@1.9.8" integrity="sha384-rgjA7mptc2ETQqXoYC3/zJvkU7K/aP44Y+z7xQuJiVnB/422P/Ak+F/AqFR7E4Wr" crossorigin="anonymous" hx-preserve="true"></script>
<script src="https://unpkg.com/htmx.org/dist/ext/head-support.js" hx-preserve="true"></script>
<style hx-preserve="true">
* {
font-family: Arial, sans-serif;
font-size: 24px;
color: black;
}
body {
background: ghostwhite;
}
#content {
background: lightgreen;
padding: 1rem;
border-radius: 1rem;
}
a {
color: cornflowerblue;
}
nav > ul {
display: flex;
gap: 1rem;
list-style: none;
}
.logo {
color: inherit;
text-decoration: none;
font-size: 28px;
font-weight: bold;
}
.logo a {
color: black;
}
.logo b {
color: dodgerblue;
}
</style>
</head>
<body hx-ext="head-support">
<header hx-boost="true"
hx-target="#content"
hx-swap="innerHTML show:window:top"
hx-push-url="false">
<a href="index-partial.html" class="logo">&lt;<b>/</b>&gt; htmx</a>
<nav>
<ul id="menu" role="menu">
<li><a href="index-partial.html">Home</a></li>
<li><a href="other-content.html">See other content</a></li>
</ul>
</nav>
</header>
<main id="content">
<h1>Home</h1>
<p>Having fun with htmx ^^</p>
</main>
<br> <hr>
<footer>
Powered by <strong>htmx v.1.9.8</strong>.
</footer>
</body>
</html>
Raw
other-content.html
<head>
<title>Other content | @htmx.org</title>
</head>
<h1>Swapped content</h1>
<p>We are so back! ;D</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment