localgov
localgov copied to clipboard
localgovdrupal
Header and footer templates
Councils want to re-use their LGD design work on other platforms. We're experimenting with the method used by Modern Gov, where a Drupal page is created that can be crawled by a third party.
For our proof of concept we need to provide a complete header and footer on separate pages at /header and /footer.
They should be fully styled and include all of the content in the council's header and footer. They should also update as the council changes design and content.
This sounds interesting, and kinda tricky. I'll have a think about while @Adnan-cds is also having a think about it.
Hi Will,
I have deployed the first cut in one of our dev sites. At this point, it is not entirely clear to me what's needed from these template. So these test URLs are more for feedback gathering than anything else. The code is incomplete as well. I can only finish it once we know for sure if the header and footer templates are taking the right direction. Here are the Test URLs:
Waiting for feedback for the above URLs (particularly the first two).
@Adnan-cds message from Paul
Could you create updated versions of the header and footer in https://github.com/localgovdrupal/localgov/issues/630 to include the necessary CSS and JS links?
Could you create updated versions of the header and footer in https://github.com/localgovdrupal/localgov/issues/630 to include the necessary CSS and JS links?
This is now done. Test URLs:
Sample output from header template:
<div class="scripts-n-links">
<link rel="stylesheet" href="https://example.net/css/style-0.css">
<link rel="stylesheet" href="https://example.net/css/style-1.css">
<script src="https://example.net/scripts/script-0.js"></script>
<script src="https://example.net/scripts/script-1.js"></script>
</div>
<div class="pre-header-body-scripts">
<script>document.querySelector('body').classList.remove('no-js');</script>
</div>
<header>
...
</header>
Sample output from footer template:
<footer>
...
</footer>
<div class="post-footer-body-scripts">
<script src="https://example.net/scripts/script-2.js"></script>
<script src="https://example.net/scripts/script-3.js"></script>
</div>
The above two are based on the following page markup:
<html>
<head>
<meta name="Generator" content="LocalGov Drupal">
<link rel="icon" href="https://example.net/misc/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="stylesheet" href="https://example.net/css/style-0.css">
<link rel="stylesheet" href="https://example.net/css/style-1.css">
<script src="https://example.net/scripts/script-0.js"></script>
<script src="https://example.net/scripts/script-1.js"></script>
</head>
<body>
<script>document.querySelector('body').classList.remove('no-js');</script>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
<script src="https://example.net/scripts/script-2.js"></script>
<script src="https://example.net/scripts/script-3.js"></script>
</body>
</html>
This looks great @Adnan-cds. I'm looking forward to looking at it in more detail when I get a chance.