Use time element

elements/AMV/AMV.pixy

@@ -10,6 +10,6 @@ component AMVFooter(amv *arn.AMV, user *arn.User)
 		else
 			a(href=amv.Link())= amv.Title.ByUser(user)
 		span  posted 
-		span.utc-date.no-tip(data-date=amv.Created)
+		time.utc-date.no-tip(datetime=amv.Created)
 		span  by 
-		a(href=amv.Creator().Link())= amv.Creator().Nick + " "
+		a(href=amv.Creator().Link())= amv.Creator().Nick + " "

elements/AnimeList/AnimeListScrollable.pixy

@@ -17,7 +17,7 @@ component AnimeListScrollable(animeListItems []*arn.AnimeListItem, viewUser *arn
 
 			.anime-list-item-airing-date
 				if item.Status != arn.AnimeListStatusCompleted && item.Anime().UpcomingEpisode() != nil
-					span.utc-airing-date(data-start-date=item.Anime().UpcomingEpisode().Episode.AiringDate.Start, data-end-date=item.Anime().UpcomingEpisode().Episode.AiringDate.End, data-episode-number=item.Anime().UpcomingEpisode().Episode.Number)
+					time.utc-airing-date(datetime=item.Anime().UpcomingEpisode().Episode.AiringDate.Start, data-end-date=item.Anime().UpcomingEpisode().Episode.AiringDate.End, data-episode-number=item.Anime().UpcomingEpisode().Episode.Number)
 
 			if item.Status != arn.AnimeListStatusCompleted
 				.anime-list-item-episodes

elements/Postable/Postable.pixy

@@ -34,7 +34,7 @@ component Postable(post arn.Postable, user *arn.User, includeReplies bool, showP
 					a.post-action.post-header-action.tip(href=post.Link(), aria-label="Link")
 						RawIcon("link")
 					
-					.post-date.utc-date(data-date=post.GetCreated())
+					time.post-date.utc-date(datetime=post.GetCreated())
 
 				.post-content(id="render-" + post.GetID())!= post.HTML()
 

elements/Quote/QuoteFooter.pixy

@@ -1,6 +1,6 @@
 component QuoteFooter(quote *arn.Quote)
 	footer.quote-footer
 		span  posted 
-		span.utc-date.no-tip(data-date=quote.Created)
+		time.utc-date.no-tip(datetime=quote.Created)
 		span  by 
-		a(href=quote.Creator().Link())= quote.Creator().Nick
+		a(href=quote.Creator().Link())= quote.Creator().Nick

elements/SoundTrack/SoundTrack.pixy

@@ -34,6 +34,6 @@ component SoundTrackFooter(track *arn.SoundTrack, user *arn.User)
 		else
 			a(href=track.Link())= track.Title.ByUser(user)
 		span  posted 
-		span.utc-date.no-tip(data-date=track.Created)
+		time.utc-date.no-tip(datetime=track.Created)
 		span  by 
 		a(href=track.Creator().Link())= track.Creator().Nick + " "

pages/activity/activity.pixy

@@ -82,7 +82,7 @@ component ActivityConsumeAnime(activity *arn.ActivityConsumeAnime, user *arn.Use
 				.post-header-info
 					ActivityConsumeAnimeTitle(activity, user)
 				
-				.post-date.utc-date(data-date=activity.GetCreated())
+				time.post-date.utc-date(datetime=activity.GetCreated())
 			
 			.post-content
 				ActivityConsumeAnimeText(activity, user)

pages/admin/clienterrors.pixy

@@ -11,7 +11,8 @@ component ClientErrors(reports []*arn.ClientErrorReport)
 					td
 						each line in strings.Split(report.Stack, "\n")
 							p= line
-					td.utc-date(data-date=report.Created)
+					td
+						time.utc-date(datetime=report.Created)
 					td.edit-log-user
 						if report.CreatedBy != ""
 							Avatar(report.Creator())

pages/admin/crashes.pixy

@@ -12,7 +12,8 @@ component Crashes(crashes []*arn.Crash)
 					td
 						each line in strings.Split(crash.Stack, "\n")
 							p= line
-					td.utc-date(data-date=crash.Created)
+					td
+						time.utc-date(datetime=crash.Created)
 					td.edit-log-user
 						if crash.CreatedBy != ""
 							Avatar(crash.Creator())

pages/admin/payments.pixy

@@ -17,4 +17,5 @@ component GlobalPaymentHistory(payments []*arn.PayPalPayment)
 						a(href=payment.User().Link())= payment.User().Nick
 					td.history-price= payment.Amount
 					td.history-price= payment.Currency
-					td.history-date.utc-date(data-date=payment.Created)
+					td.history-date
+						time.utc-date(datetime=payment.Created)

pages/anime/episodes.pixy

@@ -21,7 +21,7 @@ component AnimeEpisodes(anime *arn.Anime, episodes []*arn.Episode, episodeToFrie
 							span.episode-title -
 						
 						if validate.DateTime(episode.AiringDate.Start)
-							.episode-airing-date-start.utc-airing-date.no-tip(data-start-date=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman()
+							time.episode-airing-date-start.utc-airing-date.no-tip(datetime=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman()
 						
 						//- Show friends in reverse order
 						.episode-friends

pages/calendar/calendar.pixy

@@ -36,5 +36,5 @@ component CalendarView(day *utils.CalendarDay, entry *utils.CalendarEntry, user
 		.calendar-entry-info
 			.calendar-entry-title= entry.Anime.Title.ByUser(user)
 			.calendar-entry-time-and-episode
-				.calendar-entry-time.utc-date-absolute(data-date=entry.Episode.AiringDate.Start)
+				time.calendar-entry-time.utc-date-absolute(datetime=entry.Episode.AiringDate.Start)
-				.calendar-entry-episode= "Ep: " + strconv.Itoa(entry.Episode.Number)
+				.calendar-entry-episode= "Ep: " + strconv.Itoa(entry.Episode.Number)

pages/editlog/editlog.pixy

@@ -89,4 +89,4 @@ component EditLogScrollable(entries []*arn.EditLogEntry, user *arn.User)
 				else
 					span.clip-long-text= entry.NewValue
 
-			.edit-log-date.utc-date(data-date=entry.Created)
+			time.edit-log-date.utc-date(datetime=entry.Created)

pages/episode/episode.pixy

@@ -35,7 +35,7 @@ component Episode(anime *arn.Anime, episode *arn.Episode, episodeIndex int, uplo
 
 	if validate.DateTime(episode.AiringDate.Start)
 		p.episode-view-airing-date
-			span.utc-airing-date(data-start-date=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman()
+			time.utc-airing-date(datetime=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman()
 	
 	footer.footer
-		p Make sure to support the anime you're watching by buying officially released Blu-rays and merchandise.
+		p Make sure to support the anime you're watching by buying officially released Blu-rays and merchandise.

pages/notifications/notifications.pixy

@@ -33,8 +33,8 @@ component Notification(notification *arn.Notification)
 
 			footer.notification-footer
 				p.notification-text= notification.Message
-				.notification-date.utc-date(data-date=notification.Created)
+				time.notification-date.utc-date(datetime=notification.Created)
 		
 		if notification.Seen != ""
 			.notification-seen
-				RawIcon("check")
+				RawIcon("check")

pages/quote/quote.pixy

@@ -20,12 +20,12 @@ component QuoteMainColumn(quote *arn.Quote, user *arn.User)
 	footer.footer.mountable
 		if quote.EditedBy != ""
 			span Edited 
-			span.utc-date(data-date=quote.Edited)
+			time.utc-date(datetime=quote.Edited)
 			span  by 
 			a(href=quote.Editor().Link())= quote.Editor().Nick
 		else
 			span Posted 
-			span.utc-date(data-date=quote.Created)
+			time.utc-date(datetime=quote.Created)
 			span  by 
 			a(href=quote.Creator().Link())= quote.Creator().Nick
 			span .
@@ -40,4 +40,4 @@ component QuoteTabs(quote *arn.Quote, user *arn.User)
 
 component QuoteAnime(anime *arn.Anime, user *arn.User)
 	a.quote-anime-list-item(href=anime.Link(), title=anime.Title.ByUser(user))
-		img.quote-anime-list-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))
+		img.quote-anime-list-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))

pages/settings/extras.pixy

@@ -62,7 +62,7 @@ component SettingsExtras(user *arn.User)
 				.widget-section
 					label
 						span Your PRO account expires in 
-						span.utc-date(data-date=user.ProExpires)
+						time.utc-date(datetime=user.ProExpires)
 						span .
 					a.button(href="/shop")
 						Icon("star")
@@ -72,4 +72,4 @@ component SettingsExtras(user *arn.User)
 					label Would you like to make this website more awesome?
 					a.button(href="/support")
 						Icon("star")
-						span Go PRO
+						span Go PRO

pages/shop/history.pixy

@@ -25,4 +25,5 @@ component PurchaseInfo(purchase *arn.Purchase)
 	td= purchase.Item().Name
 	td.history-quantity= purchase.Quantity
 	td.history-price= purchase.Price
-	td.history-date.utc-date(data-date=purchase.Date)
+	td.history-date
+		time.utc-date(datetime=purchase.Date)

pages/soundtrack/soundtrack.pixy

@@ -59,12 +59,12 @@ component SoundTrackPage(track *arn.SoundTrack, relatedTracks []*arn.SoundTrack,
 		footer.footer.mountable
 			if track.EditedBy != ""
 				span Edited 
-				span.utc-date(data-date=track.Edited)
+				time.utc-date(datetime=track.Edited)
 				span  by 
 				span= track.Editor().Nick
 			else
 				span Posted 
-				span.utc-date(data-date=track.Created)
+				time.utc-date(datetime=track.Created)
 				span  by 
 				span= track.Creator().Nick
 

scripts/DateView.ts

@@ -59,13 +59,13 @@ function getRemainingTime(remaining: number): string {
 	return "Just now"
 }
 
-export function displayAiringDate(element: HTMLElement, now: Date) {
+export function displayAiringDate(element: HTMLTimeElement, now: Date) {
-	if(!element.dataset.startDate || !element.dataset.endDate) {
+	if(!element.dateTime || !element.dataset.endDate) {
 		element.textContent = ""
 		return
 	}
 
-	const startDate = new Date(element.dataset.startDate)
+	const startDate = new Date(element.dateTime)
 	const endDate = new Date(element.dataset.endDate)
 
 	let h = startDate.getHours()
@@ -102,13 +102,13 @@ export function displayAiringDate(element: HTMLElement, now: Date) {
 	}
 }
 
-export function displayDate(element: HTMLElement, now: Date) {
+export function displayDate(element: HTMLTimeElement, now: Date) {
-	if(!element.dataset.date) {
+	if(!element.dateTime) {
 		element.textContent = ""
 		return
 	}
 
-	const startDate = new Date(element.dataset.date)
+	const startDate = new Date(element.dateTime)
 
 	const h = startDate.getHours()
 	const m = startDate.getMinutes()
@@ -133,13 +133,13 @@ export function displayDate(element: HTMLElement, now: Date) {
 	}
 }
 
-export function displayTime(element: HTMLElement) {
+export function displayTime(element: HTMLTimeElement) {
-	if(!element.dataset.date) {
+	if(!element.dateTime) {
 		element.textContent = ""
 		return
 	}
 
-	const startDate = new Date(element.dataset.date)
+	const startDate = new Date(element.dateTime)
 
 	const h = startDate.getHours()
 	const m = startDate.getMinutes()

scripts/Diff.ts

@@ -17,13 +17,16 @@ export default class Diff {
 	static mutations: MutationQueue = new MutationQueue()
 
 	// innerHTML will diff the element with the given HTML string and apply DOM mutations.
-	static innerHTML(aRoot: HTMLElement, html: string): Promise<void> {
+	static innerHTML(aRoot: HTMLElement, html: string) {
 		const container = document.createElement("main")
 		container.innerHTML = html
 
 		return new Promise((resolve, _) => {
 			Diff.childNodes(aRoot, container)
-			this.mutations.wait(resolve)
+
+			this.mutations.wait(() => {
+				resolve(null)
+			})
 		})
 	}
 
@@ -34,7 +37,10 @@ export default class Diff {
 			rootContainer.innerHTML = html.replace("<!DOCTYPE html>", "")
 
 			Diff.childNodes(aRoot.getElementsByTagName("body")[0], rootContainer.getElementsByTagName("body")[0])
-			this.mutations.wait(resolve)
+
+			this.mutations.wait(() => {
+				resolve(null)
+			})
 		})
 	}
 
@@ -82,9 +88,7 @@ export default class Diff {
 
 				const removeAttributes: Attr[] = []
 
-				for(let x = 0; x < elemA.attributes.length; x++) {
+				for(const attrib of elemA.attributes) {
-					const attrib = elemA.attributes[x]
-
 					if(attrib.specified) {
 						if(!elemB.hasAttribute(attrib.name) && !Diff.persistentAttributes.has(attrib.name)) {
 							removeAttributes.push(attrib)
@@ -98,9 +102,7 @@ export default class Diff {
 					}
 				})
 
-				for(let x = 0; x < elemB.attributes.length; x++) {
+				for(const attrib of elemB.attributes) {
-					const attrib = elemB.attributes[x]
-
 					if(!attrib.specified) {
 						continue
 					}

scripts/MutationQueue.ts

@@ -39,10 +39,10 @@ export default class MutationQueue {
 	}
 
 	private mutateAll() {
-		const start = performance.now()
+		const start = Date.now()
 
 		for(let i = 0; i < this.mutations.length; i++) {
-			if(performance.now() - start > timeCapacity) {
+			if(Date.now() - start > timeCapacity) {
 				this.mutations = this.mutations.slice(i)
 				window.requestAnimationFrame(() => this.mutateAll())
 				return

styles/mixins/media-footer.scarlet

@@ -2,6 +2,4 @@ mixin media-footer
 	text-align center
 	margin-top 0.4rem
 	font-size 0.9em
-
+	color hsla(text-color-h, text-color-s, text-color-l, 0.65)
-	span
-		color hsla(text-color-h, text-color-s, text-color-l, 0.65)