add embed support

Faithful-Resource-Pack · Apr 7, 2024 · ba0552a · ba0552a
1 parent f6d5609
commit ba0552a
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 51 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 <img src="https://raw.githubusercontent.com/Faithful-Resource-Pack/Branding/main/logos/transparent/256/plain_logo.png" alt="Faithful Logo" align="right">
 <div align="center">
   <h1>Faithful Web App</h1>
-  <h3>The official Web Application for the Faithful website.</h3>
+  <h3>The official web application for the Faithful website.</h3>
 
 ![RepoSize](https://img.shields.io/github/repo-size/Faithful-Resource-Pack/App)
 ![Issues](https://img.shields.io/github/issues/Faithful-Resource-Pack/App)

diff --git a/index.html b/index.html
@@ -1,23 +1,6 @@
 <!doctype html>
 <html lang="EN">
 	<head>
-		<link
-			href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
-			rel="stylesheet"
-		/>
-		<link
-			href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css"
-			rel="stylesheet"
-		/>
-		<link
-			href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css"
-			rel="stylesheet"
-		/>
-		<meta
-			name="viewport"
-			content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
-		/>
-		<meta name="theme-color" content="#272727" />
 		<link
 			rel="icon"
 			type="image/png"
@@ -41,8 +24,65 @@
 			sizes="180x180"
 			href="https://faithfulpack.net/image/pwa/apple-touch-180x180.png"
 		/>
-		<link rel="stylesheet" href="./resources/css/webapp.css" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
+		/>
+		<meta name="theme-color" content="#272727" />
+
+		<!-- HTML Meta Tags -->
+		<meta name="description" content="The official web application for the Faithful website." />
+
+		<!-- Open Graph Meta Tags -->
+		<meta property="og:type" content="website" />
+		<meta
+			property="og:description"
+			content="The official web application for the Faithful website."
+		/>
+		<meta
+			property="og:image"
+			content="https://database.faithfulpack.net/images/branding/site/banners/universal_banner.png"
+		/>
+
+		<!-- Twitter Meta Tags -->
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta
+			name="twitter:description"
+			content="The official web application for the Faithful website."
+		/>
+		<meta
+			name="twitter:image"
+			content="https://database.faithfulpack.net/images/branding/site/banners/universal_banner.png"
+		/>
+
 		<title>Faithful Web Application</title>
+
+		<!-- CSS -->
+		<link
+			href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
+			rel="stylesheet"
+		/>
+		<link
+			href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css"
+			rel="stylesheet"
+		/>
+		<link
+			href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css"
+			rel="stylesheet"
+		/>
+		<link
+			rel="stylesheet"
+			href="https://cdn.jsdelivr.net/npm/[email protected]/dist/prismeditor.min.css"
+		/>
+		<link
+			rel="stylesheet"
+			href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.min.css"
+		/>
+		<link
+			rel="stylesheet"
+			href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-calendar-heatmap.min.css"
+		/>
+		<link rel="stylesheet" href="./resources/css/webapp.css" />
 	</head>
 	<body>
 		<v-app id="app" ref="app" :dark="dark" :light="!dark">
@@ -75,9 +115,9 @@
 									:alt="user.username.charAt(0)"
 									:src="user.avatar"
 								/>
-								<span class="text-center primary font-weight-bold" v-else>{{
-									user.username.charAt(0)
-								}}</span>
+								<span class="text-center primary font-weight-bold" v-else>
+									{{ user.username[0] }}
+								</span>
 							</v-avatar>
 							<span class="white--text">{{ user.username }}</span>
 						</v-card-title>
@@ -202,7 +242,7 @@
 					</v-radio-group>
 				</v-list>
 
-				<!-- Correct problem on firefox on mobile where bar disappears and elements fixed are hidden -->
+				<!-- Fix problem on firefox on mobile where bar disappears and elements fixed are hidden -->
 				<div class="py-8" v-if="!isDesktop"></div>
 			</v-navigation-drawer>
 
@@ -227,35 +267,12 @@
 			</v-snackbar>
 		</v-app>
 
-		<!-- Dashboard -->
-		<script>
-			window.Promise ||
-				document.write(
-					'<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>',
-				);
-			window.Promise ||
-				document.write(
-					'<script src="https://cdn.jsdelivr.net/npm/[email protected]/classList.min.js"><\/script>',
-				);
-			window.Promise ||
-				document.write(
-					'<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>',
-				);
-		</script>
+		<!-- Polyfills -->
+		<script src="https://cdn.jsdelivr.net/npm/[email protected]/classList.min.js"></script>
+		<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
+		<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"></script>
 
 		<!-- main script -->
 		<script src="./index.js" type="module"></script>
-		<link
-			rel="stylesheet"
-			href="https://cdn.jsdelivr.net/npm/[email protected]/dist/prismeditor.min.css"
-		/>
-		<link
-			rel="stylesheet"
-			href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.min.css"
-		/>
-		<link
-			rel="stylesheet"
-			href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-calendar-heatmap.min.css"
-		/>
 	</body>
 </html>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "faithful-web-app",
 	"version": "1.0.0",
-	"description": "The official Web Application for the Faithful website.",
+	"description": "The official web application for the Faithful website.",
 	"main": "index.js",
 	"type": "module",
 	"scripts": {