diff --git a/src/TerribleDev.Blog.Web/Controllers/HomeController.cs b/src/TerribleDev.Blog.Web/Controllers/HomeController.cs index 99d2de6..da13b42 100644 --- a/src/TerribleDev.Blog.Web/Controllers/HomeController.cs +++ b/src/TerribleDev.Blog.Web/Controllers/HomeController.cs @@ -65,9 +65,14 @@ namespace TerribleDev.Blog.Web.Controllers { return Redirect($"/404/?from=/{postUrl}/{amp}/"); } - this.ViewData["amp"] = amp == "amp"; + var isAmp = amp == "amp"; + this.ViewData["amp"] = isAmp; if(postCache.UrlToPost.TryGetValue(postUrl, out var currentPost)) { + if(isAmp && !currentPost.isAmp) + { + return Redirect($"/{postUrl}/"); + } return View("Post", model: new PostViewModel() { Post = currentPost }); } if(postCache.LandingPagesUrl.TryGetValue(postUrl, out var landingPage)) diff --git a/src/TerribleDev.Blog.Web/Controllers/SeoController.cs b/src/TerribleDev.Blog.Web/Controllers/SeoController.cs index fdd7c7a..d2649fa 100644 --- a/src/TerribleDev.Blog.Web/Controllers/SeoController.cs +++ b/src/TerribleDev.Blog.Web/Controllers/SeoController.cs @@ -65,7 +65,7 @@ namespace TerribleDev.Blog.Web.Controllers Urls = postCache.PostsAsLists.Select(a => new SiteMapItem() { LastModified = DateTime.UtcNow, Location = a.CanonicalUrl }).ToList() }; sitemap.Urls.AddRange(sitewideLinks); - sitemap.Urls.AddRange(postCache.PostsAsLists.Select(a => new SiteMapItem() { LastModified = DateTime.UtcNow, Location = a.AMPUrl }).ToList()); + sitemap.Urls.AddRange(postCache.PostsAsLists.Where(i => i.isAmp).Select(a => new SiteMapItem() { LastModified = DateTime.UtcNow, Location = a.AMPUrl }).ToList()); ser.Serialize(this.Response.Body, sitemap); } } diff --git a/src/TerribleDev.Blog.Web/Factories/BlogFactory.cs b/src/TerribleDev.Blog.Web/Factories/BlogFactory.cs index a482b15..b7b7c33 100644 --- a/src/TerribleDev.Blog.Web/Factories/BlogFactory.cs +++ b/src/TerribleDev.Blog.Web/Factories/BlogFactory.cs @@ -125,7 +125,9 @@ namespace TerribleDev.Blog.Web JsonLDBreadcrumbString = breadcrumb.ToHtmlEscapedString().Replace("https://schema.org", "https://schema.org/true"), HasCode = hasCode }; - + var thumbNailUrl = string.IsNullOrWhiteSpace(postSettings.thumbnailImage) ? + postImages?.FirstOrDefault() ?? "https://www.gravatar.com/avatar/333e3cea32cd17ff2007d131df336061?s=640" : + $"{canonicalUrl}/{postSettings.thumbnailImage}"; return new Post() { PublishDate = postSettings.date.ToUniversalTime(), @@ -137,7 +139,9 @@ namespace TerribleDev.Blog.Web AMPUrl = ampUrl, UrlWithoutPath = resolvedUrl, isLanding = postSettings.isLanding, - Content = content + Content = content, + isAmp = postSettings.isAmp, + ThumbnailImage = thumbNailUrl, }; } private async Task BuildLandingPage(string fileName, string domain, string markdownText, PostSettings postSettings, string resolvedUrl, string canonicalUrl, string ampUrl) @@ -184,7 +188,8 @@ namespace TerribleDev.Blog.Web AMPUrl = ampUrl, UrlWithoutPath = resolvedUrl, isLanding = postSettings.isLanding, - Content = content + Content = content, + isAmp = postSettings.isAmp }; } } diff --git a/src/TerribleDev.Blog.Web/Models/IPost.cs b/src/TerribleDev.Blog.Web/Models/IPost.cs index 2cf771e..7961f9e 100644 --- a/src/TerribleDev.Blog.Web/Models/IPost.cs +++ b/src/TerribleDev.Blog.Web/Models/IPost.cs @@ -18,6 +18,8 @@ namespace TerribleDev.Blog.Web.Models DateTime? UpdatedDate { get; set; } IPostContent Content { get; set; } bool isLanding { get; set; } + bool isAmp { get; set; } + string ThumbnailImage { get; } } } diff --git a/src/TerribleDev.Blog.Web/Models/LandingPage.cs b/src/TerribleDev.Blog.Web/Models/LandingPage.cs index ae9008b..aa32eb9 100644 --- a/src/TerribleDev.Blog.Web/Models/LandingPage.cs +++ b/src/TerribleDev.Blog.Web/Models/LandingPage.cs @@ -19,5 +19,7 @@ namespace TerribleDev.Blog.Web.Models public IPostContent Content { get; set; } public bool isLanding { get; set; } = false; + public bool isAmp { get; set; } = true; + public string ThumbnailImage { get => "https://www.gravatar.com/avatar/333e3cea32cd17ff2007d131df336061?s=640"; } } } diff --git a/src/TerribleDev.Blog.Web/Models/Post.cs b/src/TerribleDev.Blog.Web/Models/Post.cs index b30358e..f931be2 100644 --- a/src/TerribleDev.Blog.Web/Models/Post.cs +++ b/src/TerribleDev.Blog.Web/Models/Post.cs @@ -20,5 +20,8 @@ namespace TerribleDev.Blog.Web.Models public IPostContent Content { get; set; } public bool isLanding { get; set; } = false; + public bool isAmp { get; set; } = true; + + public string ThumbnailImage { get; set; } } } diff --git a/src/TerribleDev.Blog.Web/Models/PostSettings.cs b/src/TerribleDev.Blog.Web/Models/PostSettings.cs index 6c0756b..dfa0902 100644 --- a/src/TerribleDev.Blog.Web/Models/PostSettings.cs +++ b/src/TerribleDev.Blog.Web/Models/PostSettings.cs @@ -17,5 +17,7 @@ namespace TerribleDev.Blog.Web.Models public string layout { get; set; } public bool isLanding { get; set; } = false; + + public bool isAmp { get; set; } = true; } } diff --git a/src/TerribleDev.Blog.Web/Posts/Dynamically-changing-the-site-theme-meta-tag.md b/src/TerribleDev.Blog.Web/Posts/Dynamically-changing-the-site-theme-meta-tag.md new file mode 100644 index 0000000..64d327a --- /dev/null +++ b/src/TerribleDev.Blog.Web/Posts/Dynamically-changing-the-site-theme-meta-tag.md @@ -0,0 +1,92 @@ +title: Dynamically changing the site-theme meta tag +date: 2022-04-12 11:05 +isAmp: false +thumbnailImage: 1.jpg +tags: +- javascript +- js +- react +--- + +So, incase you are unfamiliar, there is a meta tag called `` that is used to change the color of the navbar on desktop safari, mobile safari, and mobile chrome. If you don't set a value these browsers tend to find a color that match the site to the best of their ability. However, sometimes even setting the value can cause the site to look ugly. + + + +So, I've been recently working on an NFT project called [Squiggle Squatches](http://squigglesquatches.io/). NFT projects are essentially digital art projects for sale. Our website, really needs to reflect our look and feel as much as we can. When I first loaded our page, I noticed this **huge** white bar on the top of Safari. + +![An un-themed page with a big white bar at the top of the page](1.jpg) + + +> So I set out to change this. I knew there was a `` tag that can add the theme. + +I first made the theme be the color of the top section, and this looked great! + +![An theme where the top bar color clashes on scroll](2.jpg) + +However after scrolling, I noticed this looked super ugly. + +![An theme where the top bar color clashes on scroll](3.jpg) + +So I decided to write some code to fix this problem. + +## Listening to scroll events + +So, I started with decorating certain tags with a `data-scroll-theme` attribute that signaled our code to look at this div to manipulate the theme color. This looks like `
content
` + +I then ended up crafting this JS code. Basically, make a throttle function so we only fire our event every 100ms. Grab the default color. Then on scroll figure out if any boxes are at the top of the page, and if so set the meta tag to that color. + +```js +// a function to only call the wrapped functions every x milliseconds so the scroll event doesn't make our function run all the time +function throttle(func, timeFrame) { + var lastTime = 0; + return function(...args) { + var now = new Date().getTime(); + if (now - lastTime >= timeFrame) { + func(...args); + lastTime = now; + } + }; +} + +// get the theme color on load so we can revert to this +const ogColor = document.querySelector('meta[name="theme-color"]')?.getAttribute('content'); + +// handle scroll event +const handleScroll = throttle(() => { + // find all tags that have `data-scroll as a property` + const targets = document.querySelectorAll('[data-scroll-theme]') + // are any targets at the top of the window? + const isTop = Array.from(targets).map((target) => { + const rect = target.getBoundingClientRect(); + if (rect.y > 1) { + return null; + } + return { target, rect } + }).filter(Boolean).sort((a, b) => b.rect.y - a.rect.y)[0] + // if we found an element at the top of the document then + if (isTop) { + + // set theme color meta tag to the background color of div + const color = window.getComputedStyle(isTop.target).getPropertyValue('background-color') + if (color) { + // find the theme color meta tag and set the attribute to it + document.querySelector('meta[name="theme-color"]')?.setAttribute('content', color); + } + } else if (ogColor) { + // set theme color meta tag to original + document.querySelector('meta[name="theme-color"]')?.setAttribute('content', ogColor); + } + // run every 100ms +}, 100) + +document.addEventListener('scroll', handleScroll, { passive: true }) + +``` + +## End result + +The end result is the top bar of safari changes as you scroll between blocks. This has made [Squiggle Squatches](http://squigglesquatches.io/) look way better on mobile. + + + + \ No newline at end of file diff --git a/src/TerribleDev.Blog.Web/Views/Home/Post.cshtml b/src/TerribleDev.Blog.Web/Views/Home/Post.cshtml index 70ea2b5..43b4157 100644 --- a/src/TerribleDev.Blog.Web/Views/Home/Post.cshtml +++ b/src/TerribleDev.Blog.Web/Views/Home/Post.cshtml @@ -23,16 +23,16 @@ - - @foreach(var image in Model.Post.Content.Images.Take(6)) + @if(Model.Post.isAmp) { - + } - @if(Model.Post.Content.Images.Count > 0) + @if(!string.IsNullOrEmpty(Model.Post.ThumbnailImage)) { - + + } - + diff --git a/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/.keep b/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/.keep new file mode 100644 index 0000000..e69de29 diff --git a/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/1.jpg b/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/1.jpg new file mode 100644 index 0000000..e947b4a Binary files /dev/null and b/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/1.jpg differ diff --git a/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/1.jpg.webp b/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/1.jpg.webp new file mode 100644 index 0000000..927578f Binary files /dev/null and b/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/1.jpg.webp differ diff --git a/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/2.jpg b/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/2.jpg new file mode 100644 index 0000000..877ead2 Binary files /dev/null and b/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/2.jpg differ diff --git a/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/2.jpg.webp b/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/2.jpg.webp new file mode 100644 index 0000000..5bb02be Binary files /dev/null and b/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/2.jpg.webp differ diff --git a/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/3.jpg b/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/3.jpg new file mode 100644 index 0000000..5adf87e Binary files /dev/null and b/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/3.jpg differ diff --git a/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/3.jpg.webp b/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/3.jpg.webp new file mode 100644 index 0000000..49fdce5 Binary files /dev/null and b/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/3.jpg.webp differ diff --git a/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/4.png b/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/4.png new file mode 100644 index 0000000..8edfbd4 Binary files /dev/null and b/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/4.png differ diff --git a/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/4.png.webp b/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/4.png.webp new file mode 100644 index 0000000..30c15f3 Binary files /dev/null and b/src/TerribleDev.Blog.Web/wwwroot/img/Dynamically-changing-the-site-theme-meta-tag/4.png.webp differ