Skip to content

Commit

Permalink
feat: update CSS (#2)
Browse files Browse the repository at this point in the history 
* feat: update css

* fix: add compose override for docker changes
  • Loading branch information
@ginifizz
ginifizz authored Aug 20, 2024
1 parent 77de115 commit f1cbfdf
Show file tree
Hide file tree
Showing 11 changed files with 2,443 additions and 86 deletions.
8 changes: 8 additions & 0 deletions api/compose.override.yaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
services:
php:
volumes:
- caddy_data:/data
- caddy_config:/config
- ./:/app
- /app/vendor
- /app/var
1 change: 0 additions & 1 deletion api/frankenphp/docker-entrypoint.sh
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ if [ "$1" = 'frankenphp' ] || [ "$1" = 'php' ] || [ "$1" = 'bin/console' ]; then
php bin/console doctrine:migrations:migrate --no-interaction --all-or-nothing
fi
fi

setfacl -R -m u:www-data:rwX -m u:"$(whoami)":rwX var
setfacl -dR -m u:www-data:rwX -m u:"$(whoami)":rwX var
fi
Expand Down
78 changes: 39 additions & 39 deletions api/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,32 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edge side APIs</title>
<script src="https://cdn.tailwindcss.com"></script>
<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",
"@tailwindcss/forms": "https://esm.sh/@tailwindcss/forms"
"@api-platform/mercure": "./mercure.js"
}
}
</script>
</head>


<body class="text-black">
<header class="py-6">
<div class="container mx-auto flex justify-between items-center px-6">
<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 font-semibold ml-3"><a href="/">Edge Side APIs</a></h1>
<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="hover:text-gray-300">White Paper</a>
<a href="/linked-data" class="hover:text-gray-300">Linked Data</a>
<a href="/mercure" class="hover:text-gray-300">Mercure</a>
<a href="https://github.com/api-platform/esa" class="hover:text-gray-300">GitHub</a>
<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">
Expand All @@ -42,14 +41,13 @@ <h1 class="text-2xl font-semibold ml-3"><a href="/">Edge Side APIs</a></h1>
</div>
</div>
</header>
<main class="container mx-auto px-6 py-12">
<div class="flex h-screen">
<div class="flex-1 overflow-y-auto">
<div class="p-4">
<ul class="mx-auto space-y-4">
<li class="p-4 rounded-lg">
<h2 class="text-2xl font-bold">Atomic resource</h2>
<p class="text-gray-900">
<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>
<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
Expand All @@ -60,42 +58,44 @@ <h2 class="text-2xl font-bold">Atomic resource</h2>
See @api-platform/ld documentation.
</p>
</li>
<li class="p-4 rounded-lg">
<h2 class="text-2xl font-bold">Pre-generate</h2>
<p class="text-gray-900">This website's API is full static and can be hosted at edge.</p>
<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 class="p-4 rounded-lg">
<h2 class="text-2xl font-bold">HTTP</h2>
<p class="text-gray-900">Click on the links to show status codes, benefit from private browser's cache
<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 class="p-4 rounded-lg">
<h2 class="text-2xl font-bold">Preload</h2>
<p class="text-gray-900">We preloaded the <code>/books</code> resource on this page.</p>
<li>
<h2>Preload</h2>
<p class="text-slate-600 ">We preloaded the <code>/books</code> resource on this page.</p>
</li>
<li class="p-4 rounded-lg">
<h2 class="text-2xl font-bold">Push</h2>
<p class="text-gray-900">Live updates to every clients</p>
<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-gray-700">Resource to update</span>
<select id="resources" name="topic" onchange="selectResource(event)" class="block w-full mt-1">
<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-gray-700">Data</span>
<textarea id="data" name="data" class="mt-1 block w-full" rows="5"></textarea>
<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-4 bg-gray-100" data-testid="mercure">Update</button>
<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>
<div class="w-5/12 bg-gray-100 p-4">
<pre><code id="json"></code></pre>
<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>
Expand Down
5 changes: 0 additions & 5 deletions api/public/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import ld, { resources } from "@api-platform/ld";
import mercure from "@api-platform/mercure";
import { URLPattern } from "urlpattern-polyfill";
import tailwindForm from "@tailwindcss/forms";
let books = undefined

const pattern = new URLPattern(window.origin+'/(books|authors)/:id')
Expand Down Expand Up @@ -30,10 +29,6 @@ ld('/books', { fetchFn: fetchFn, urlPattern: pattern, onUpdate })
updateView(d)
})

tailwind.config = {
theme: {},
plugins: [tailwindForm]
}

function updateForm() {
const select = document.getElementById('resources')
Expand Down
Loading

0 comments on commit f1cbfdf

Please sign in to comment.