I am programming an AMP website www-dev.example.com that points users to a sign-up page.
The sign up page is hosted on an identity server using the subdomain auth.www-dev.example.com.
I now want to deploy my AMP website to a staging environment www-stg.example.com and at the same time point users to it's respective staging identity server auth.www-stg.example.com.
Ideally I would have a config per environment in a relative appsettings.json file and use amp-mustache to map the environment variables into the the urls of <button> or a tags.
I'm currently achieving the desired functionality, somewhat, with amp-list, but it looks like a dogs breakfast causing some undesired and painstaking effects on the font end with alignment and scaling due to the fixed dimensions.
Is there a simple way to set environment variables in AMP for use in links?
HTML Implementation
<amp-list width="130" height="45" layout="flex-item" src="/appsettings.json">
<template type="amp-mustache">
<button type="button" on="tap:AMP.navigateTo(url='{{signup-url}}', target='_top')">Sign Up</button>
</template>
</amp-list>
appsettings.json Implementation
{
"items":[{
"login-url":"https://auth.www-dev.example.com/login",
"logout-url":"https://auth.www-dev.example.com/logout",
"signup-url":"https://auth.www-dev.example.com/signup",
"unsubscribe-url":"https://auth.www-dev.example.com/unsubscribe"
}]
}
Any help or suggestions would be much appreciated!
Edit - Example showing the start of the front end issues I'm looking to avoid
<!DOCTYPE html>
<html ⚡ lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bug</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<link rel="canonical" href="https://example.com">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style amp-custom>
/* Delete this to reveal amp-list*/
.flex {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;}
.left {
border: solid 1px blue;
}
.right {
border:solid 1px green;
}
</style>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</style><noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</style>
</noscript>
<template id="foo" type="amp-mustache">
<button class="button-secondary" type="button"
on="tap:AMP.navigateTo(url='{{signup-url}}', target='_top')">Sign Up</button>
</template>
</head>
<body>
<div class="flex">
<div class="left">
<p>Flex Left</p>
<button on="tap:foobar.changeToLayoutContainer()">Change Layout</button>
</div>
<div class="right">
<amp-list id="foobar" width="auto" height="1" src="/appsettings.json" template="foo">
<div placeholder>Loading</div>
<div fallback>Failed to load data.</div>
</amp-list>
</div>
</div>
</body>
</html>
I ended up using Terraform and parsing the html file through as a template during deployment, prior to uploading the html to its hosting destination.
HCL
HTML