Skip to content

Commit

Permalink
feat: add mobile menu (#4)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ginifizz
ginifizz authored Aug 27, 2024
1 parent 21d9403 commit 7a7aeb3
Show file tree
Hide file tree
Showing 5 changed files with 521 additions and 166 deletions.
242 changes: 127 additions & 115 deletions api/public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,118 +1,130 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edge side APIs</title>
<link rel="preload" href="books" as="fetch" type="application/ld+json" crossorigin />
<link href="/output.css" rel="stylesheet">
<script type="importmap">
{
"imports": {
"urlpattern-polyfill": "https://esm.sh/[email protected]",
"@api-platform/ld": "./ld.js",
"eventsource": "https://esm.sh/eventsource",
"@api-platform/mercure": "./mercure.js"
}
}
</script>
</head>


<body class="text-slate-700 h-screen w-full ">
<header class="h-20 flex items-center shadow-[0px_5px_28px_-4px_rgba(0,0,0,0.2)] fixed w-full bg-white z-10">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center">
<h1 class="text-2xl text-cyan-700 font-extrabold ml-3"><a href="/">Edge Side <span class="font-normal">APIs</span></a></h1>
</div>
<nav class="hidden md:flex space-x-6">
<a href="/white-paper" class="p-2 rounded-md transition-colors hover:bg-cyan-100 ">White Paper</a>
<a href="/linked-data" class="p-2 rounded-md transition-colors hover:bg-cyan-100 ">Linked Data</a>
<a href="/mercure" class="p-2 rounded-md transition-colors hover:bg-cyan-100">Mercure</a>
<a target="_blank" href="https://github.com/api-platform/esa" class="p-2 rounded-md transition-colors hover:text-cyan-500 "><svg viewBox="0 0 16 16" class="fill-current h-6 w-6" aria-hidden="true"><path d="M8 0C3.58.0.0 3.58.0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38.0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95.0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12.0.0.67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15.0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48.0 1.07-.01 1.93-.01 2.2.0.21.15.46.55.38A8.013 8.013.0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a>
</nav>
<div class="md:hidden">
<button class="focus:outline-none">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
</div>
</header>
<main class="container mx-auto relative">
<div class="flex h-screen pt-20">
<div class="w-[60%] overflow-y-auto pb-4 prose-slate prose-h2:mb-2 prose-h2:mt-8 max-w-none prose">
<ul class="flex flex-col pl-0 pr-8">
<li>
<p class="text-slate-600">
Edge Side APIs (ESA) is an architecture pattern, that allows the creation of more reliable, more efficient, and less resource-intensive APIs. This architecture revives the main REST/HATEOAS principles while taking full advantage of the new capabilities provided by the web platform.
</p>

<p class="text-slate-600">
ESA promotes a mixed approach, synchronous and asynchronous, which allows a great simplicity of development and use, performances rarely reached, and the possibility for the clients to receive updates of the resource it fetched in real-time. Finally, ESA proposes to build on existing standards to expose documentation allowing the creation of generic clients, capable of discovering the capabilities of the API at runtime.
</p>

<p class="text-slate-600">
<a href="/white-paper">Read the White Paper</a> or <a href="https://dunglas.dev/2021/10/edge-side-apis/">browse Kevin Dunglas's presentation:</a>
</p>

<iframe class="speakerdeck-iframe" style="border: 0px; background: rgba(0, 0, 0, 0.1) padding-box; margin: 0px; padding: 0px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 40px; width: 100%; height: auto; aspect-ratio: 560 / 315;" frameborder="0" src="https://speakerdeck.com/player/82b42a9c6de44f3dbaf0e0cc579e9588" title="Edge Side APIs" allowfullscreen="true" data-ratio="1.7777777777777777"></iframe>
<li>
<h2 class="mt-4">Atomic resource</h2>
<p class="text-slate-600 ">
Resources served by the API must be small, atomic documents. The API must not embed related resources
but
instead expose them through an URL. Big resources should be splitted using one-to-one relations
exposed by
an
URL.
<br>
More informations at the <a href="/linked-data">@api-platform/ld documentation</a>
</p>
</li>
<li>
<h2>Pre-generate</h2>
<p class="text-slate-600 ">This website's API is full static and can be hosted at edge.</p>
</li>
<li>
<h2>HTTP</h2>
<p class="text-slate-600 ">Click on the links to show status codes, benefit from private browser's cache
without any configuration.</p>
</li>
<li>
<h2>Preload</h2>
<p class="text-slate-600 ">We preloaded the <code>/books</code> resource on this page.</p>
</li>
<li>
<h2>Push</h2>
<p class="text-slate-600 ">Live updates to every clients</p>
<form class="mt-8 max-w-md" onsubmit="handleSubmit(event)">
<div class="grid grid-cols-1 gap-6">
<label class="block">
<span class="text-slate-500 text-sm">Resource to update</span>
<select id="resources" name="topic" onchange="selectResource(event)" class="font-mono text-sm block w-full mt-1 border-slate-400 rounded-lg">
</select>
</label>
<label class="block">
<span class="text-slate-500 text-sm">Data</span>
<textarea id="data" name="data" class="font-mono text-sm mt-1 block w-full border-slate-400 rounded-lg" rows="5"></textarea>
</label>
<button type="submit" class="rounded-lg p-2 bg-cyan-700 text-white font-bold" data-testid="mercure">Update</button>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edge side APIs</title>
<link rel="preload" href="books" as="fetch" type="application/ld+json" crossorigin />
<link href="/output.css" rel="stylesheet">
<script type="importmap">
{
"imports": {
"urlpattern-polyfill": "https://esm.sh/[email protected]",
"@api-platform/ld": "./ld.js",
"eventsource": "https://esm.sh/eventsource",
"@api-platform/mercure": "./mercure.js"
}
}
</script>
</head>
<body class="text-slate-700 h-screen w-full ">
<header class="h-20 flex items-center shadow-[0px_5px_28px_-4px_rgba(0,0,0,0.2)] fixed w-full bg-white z-10">
<div class="px-4 xl:px-0 container mx-auto flex justify-between items-center">
<div class="flex items-center">
<h1 class="text-2xl text-cyan-700 font-extrabold ml-3"><a href="/">Edge Side <span class="font-normal">APIs</span></a></h1>
</div>
</form>
</li>
</ul>
</div>
<div class="relative w-[40%]">
<!-- calcul largeur : 50vw - (1000 / pourcentage taille)% -->
<div class="bg-slate-100 absolute top-0 bottom-0 left-0 overflow-y-auto w-[calc(50vw-25%)] overflow-auto p-8">
<pre class="text-sm font-mono leading-relaxed"><code id="json"></code></pre>
</div>
</div>
</div>
</main>
<script type="module" src="index.js"></script>
</body>
</html>
<input class="peer hidden" type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="inset-0 bg-cyan-950/50 fixed left-full peer-checked:left-0 opacity-0 peer-checked:opacity-100 transition-opacity duration-300"></label>
<nav class="transition-all duration-500 mobile-only:text-xl mobile-only:translate-x-96 group mobile-only:peer-checked:translate-x-0 mobile-only:right-0 mobile-only:max-w-[80%] mobile-only:w-96 mobile-only:inset-y-0 mobile-only:fixed mobile-only:bg-white flex mobile-only:flex-col gap-6 mobile-only:justify-between">
<label for="menu-toggle" class="md:hidden text-cyan-700 peer-checked:group-[]:-translate-x-6 mt-2 rounded-full bg-white transition">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-10">
<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</label>
<div class="flex flex-col gap-6 md:flex-row p-8 mobile-only:font-bold">
<a href="/white-paper" class="p-2 rounded-md transition-colors hover:bg-cyan-100 ">White Paper</a>
<a href="/linked-data" class="p-2 rounded-md transition-colors hover:bg-cyan-100 ">Linked Data</a>
<a href="/mercure" class="p-2 rounded-md transition-colors hover:bg-cyan-100">Mercure</a>
<a target="_blank" href="https://github.com/api-platform/esa" class="p-2 rounded-md transition-colors hover:text-cyan-500 ">
<svg viewBox="0 0 16 16" class="fill-current h-6 w-6" aria-hidden="true">
<path d="M8 0C3.58.0.0 3.58.0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38.0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95.0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12.0.0.67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15.0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48.0 1.07-.01 1.93-.01 2.2.0.21.15.46.55.38A8.013 8.013.0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>
</a>
</div>
<div class="md:hidden text-center bg-cyan-700 w-full text-white">
<p class="text-3xl sm:text-4xl py-16 font-extrabold ml-3">Edge Side <span class="font-normal">APIs</span></p>
</div>
</nav>
<label for="menu-toggle" class="md:hidden">
<div class="cursor-pointer">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</div>
</label>
</div>
</header>
<main class="container px-4 xl:px-0 mx-auto relative">
<div class="flex flex-col md:flex-row md:h-screen pt-20">
<div class="w-full md:w-[60%] overflow-y-auto pb-4 prose-slate prose-h2:mb-2 prose-h2:mt-8 max-w-none prose">
<ul class="flex flex-col pl-0 pr-8">
<li>
<p class="text-slate-600">
Edge Side APIs (ESA) is an architecture pattern, that allows the creation of more reliable, more efficient, and less resource-intensive APIs. This architecture revives the main REST/HATEOAS principles while taking full advantage of the new capabilities provided by the web platform.
</p>
<p class="text-slate-600">
ESA promotes a mixed approach, synchronous and asynchronous, which allows a great simplicity of development and use, performances rarely reached, and the possibility for the clients to receive updates of the resource it fetched in real-time. Finally, ESA proposes to build on existing standards to expose documentation allowing the creation of generic clients, capable of discovering the capabilities of the API at runtime.
</p>
<p class="text-slate-600">
<a href="/white-paper">Read the White Paper</a> or <a href="https://dunglas.dev/2021/10/edge-side-apis/">browse Kevin Dunglas's presentation:</a>
</p>
<iframe class="speakerdeck-iframe" style="border: 0px; background: rgba(0, 0, 0, 0.1) padding-box; margin: 0px; padding: 0px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 40px; width: 100%; height: auto; aspect-ratio: 560 / 315;" frameborder="0" src="https://speakerdeck.com/player/82b42a9c6de44f3dbaf0e0cc579e9588" title="Edge Side APIs" allowfullscreen="true" data-ratio="1.7777777777777777"></iframe>
</li>
<li>
<h2 class="mt-4">Atomic resource</h2>
<p class="text-slate-600 ">
Resources served by the API must be small, atomic documents. The API must not embed related resources
but
instead expose them through an URL. Big resources should be splitted using one-to-one relations
exposed by
an
URL.
<br>
More informations at the <a href="/linked-data">@api-platform/ld documentation</a>
</p>
</li>
<li>
<h2>Pre-generate</h2>
<p class="text-slate-600 ">This website's API is full static and can be hosted at edge.</p>
</li>
<li>
<h2>HTTP</h2>
<p class="text-slate-600 ">Click on the links to show status codes, benefit from private browser's cache
without any configuration.
</p>
</li>
<li>
<h2>Preload</h2>
<p class="text-slate-600 ">We preloaded the <code>/books</code> resource on this page.</p>
</li>
<li>
<h2>Push</h2>
<p class="text-slate-600 ">Live updates to every clients</p>
<form class="mt-8 max-w-md" onsubmit="handleSubmit(event)">
<div class="grid grid-cols-1 gap-6">
<label class="block">
<span class="text-slate-500 text-sm">Resource to update</span>
<select id="resources" name="topic" onchange="selectResource(event)" class="font-mono text-sm block w-full mt-1 border-slate-400 rounded-lg">
</select>
</label>
<label class="block">
<span class="text-slate-500 text-sm">Data</span>
<textarea id="data" name="data" class="font-mono text-sm mt-1 block w-full border-slate-400 rounded-lg" rows="5"></textarea>
</label>
<button type="submit" class="rounded-lg p-2 bg-cyan-700 text-white font-bold" data-testid="mercure">Update</button>
</div>
</form>
</li>
</ul>
</div>
<div class="relative w-full md:w-[40%] mb-8 md:mb-0">
<!-- calcul largeur : 50vw - (1000 / pourcentage taille)% -->
<div class="bg-slate-100 md:absolute md:top-0 md:bottom-0 md:left-0 md:overflow-y-auto md:w-[calc(50vw-25%)] md:overflow-auto p-8">
<pre class="text-sm font-mono leading-relaxed"><code id="json"></code></pre>
</div>
</div>
</div>
</main>
<script type="module" src="index.js"></script>
</body>
</html>
Loading

0 comments on commit 7a7aeb3

Please sign in to comment.