Help with final stages of new site

Hi, a few questions to finalize (hopefully) the site I’m working on!

First of all, this is a great and versatile template! I did some customization, mostly to simplify the really cool features that I didn’t need on my humble site. But the template has been super easy to use with very few limitations to the pre-existing code — at least for my simple needs.

Heads up on these questions … I’m a decent coder, but all DIY so have a lot of gaps in my knowledge. Thank you for your patience & understanding…

Here is the temporary site, FWIW. theMeditationPodcast.com/tmp-new/index.html

1. Validator Error

On every page I get this error: Failed to load resource: the server responded with a status of 404 (HTTP/2.0 404) https://cdn.ampproject.org/v0/validator_minified.js.sourcemap — the link returns a 404 (obviously), but I don’t see where this URL is linked anywhere in my code.

2. Best Practices for multiple “episodes” pages?

We have been using a $_GET to populate the content of each podcast episode dynamically to a single page — for example: episodes.html?ep=47, episodes.html?ep=6, etc., and PHP uses $id from the GET to pull database content into the page.

AMP doesn’t like this, and it’s giving me an Access-Control-Allow-Origin error on both the page itself, and on the Soundcloud embed.

To address this, I would like to use PHP to write to a permalink static html file:

1.) We already have static permalinks in the database that are better named, for example: /episodes/tmp47-unconditional-love.html or /episodes/tmp06-falling-asleep.html. Until now, I have been manually copying the source code of the dynamic page into the static html file.

2.) I would like to use PHP (or other) to write the static html file, and then put a simple html redirect in the old page episode.html?ep=(int), so that it redirects to the permalink file.

3.) What I’m having trouble with is I want to use PHP to write the entire source code of the ?ep=(int) to the permalink, and either put a php script on the server that I can run as needed to re-write every episode’s HTML all at once, whenever I run the script, or have PHP write to the permalink automatically as part of the redirect, each time the dynamic page is visited. I’m not totally clear on how to do either of these — I have tried and failed a few times. Stack Overflow is full of conflicting advice on this. I’m lost. Suggestions appreciated. :slight_smile:

In general: Is it the right idea? On StackOverflow there seems to be a lot of concern about security with this kind of PHP writing. Is there a better way that I’m not considering? .htaccess? Again, a link to a step-by-step would be really helpful.

Here is my basic PHP for populating the dynamic page episodes.html?ep=(int)
$i=$_GET['ep'];
if(is_null($_GET['ep'])) { $i=$num; } 
$i=(int)$i; 
if($i>$num) { $i=$num; } 
$i--; 
if($i<0) { $i=0; } 

// Line 1 obviously the GET method for which episode.
// Line 2 if there is no ?ep=, sets page to most recent episode
// Line 3 is a safeguard for any funny business, makes sure the page only gets an Integer
// Lines 4-6 keep the number within boundary of existing episodes, and fix computer-starts-at-0 vs human-starts-at-1

3. Google AdSense and <AMP-AD>

We use Google Adsense on the site. I understand how to manually put in an amp-ad — this is pretty basic — but AdSense has a lot of ‘smart’ features, like choosing when/whether/where to place an ad. Can AMP do this yet? (Feature Request: On your template, amp-ad would be a helpful update to the template — perhaps with 3 or 4 of the main/typical ad sizes & locations, optimized for this template…)

To go a little deeper down this rabbit hole, does anyone have any thoughts or experiences on better alternatives to Google AdSense?

aTdHvAaNnKcSe
(THANKS in advance)

P.S. I added a cute little right-side nav menu in my header bar. It’s pretty simple, and will probably look dumb to a real coder — but since we only have 4 pages, I thought it would be nice to make them all visible. In case anyone is interested, here is the code.

Header Nav Menu ALT Example
/* Add/modify this in the CSS */

.dark-scheme .header-icon-1, .dark-scheme .header-icon-2, .dark-scheme .header-icon-3, .dark-scheme .header-icon-4, .dark-scheme .header-icon-5{color:#FFFFFF;}

/* add max-width: 40%; to header-icons-box, to account for super narrow iPhone view
width is 60px per icon (excluding header-icon-1, which is your sidebar) */

header-icons-box {display:block;position:absolute;top:0px;right:0px;width: 240px;max-width: 40%;}

.header-icon-1, .header-icon-2, .header-icon-3, .header-icon-4, .header-icon-5 {float:left;line-height:60px;text-align:center;width:25%;display:block;font-size:14px;background-color:transparent;}

<header>
<a href="index.html" class="header-logo header-logo-center"></a>
<div class="header-icons-box">
<a href="index.html" class="header-icon-2"><i class="fa fa-home active-icon"></i></a>
<a href="listen.html" class="header-icon-3"><i class="fa fa-headphones"></i></a>
<a href="support.html" class="header-icon-4"><i class="fa fa-heart"></i></a>
<a href="contact.html" class="header-icon-5"><i class="fa fa-envelope"></i></a>
</div>
</header>

Bump … anyone?