Refactor: Decompose <head> content into separate partials (favicon, b…

…ase, og-twitter, fonts) within the new 'head' directory
astik-dev · Apr 17, 2024 · c03838e · c03838e
1 parent 756cdee
commit c03838e
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 56 deletions.
diff --git a/gulp/config/path.js b/gulp/config/path.js
@@ -34,6 +34,7 @@ export const path = {
  html: [
  `${srcFolder}/pages/**/*.html`,
  `${srcFolder}/components/**/*.html`,
+ `${srcFolder}/head/**/*.html`,
  ],
  images: `${srcFolder}/img/**/*.*`,
  },

diff --git a/src/files/.gitkeep b/src/files/.gitkeep
diff --git a/src/head/base.html b/src/head/base.html
@@ -0,0 +1,3 @@
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="format-detection" content="telephone=no">
diff --git a/src/head/favicon.html b/src/head/favicon.html
@@ -0,0 +1,4 @@
+<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
+<link rel="manifest" href="img/favicon/site.webmanifest">
diff --git a/src/head/fonts.html b/src/head/fonts.html
@@ -0,0 +1,3 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<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">
diff --git a/src/head/og-twitter.html b/src/head/og-twitter.html
@@ -0,0 +1,10 @@
+<meta property="og:locale" content="en_US">
+<meta property="og:type" content="website">
+<meta property="og:image" content="@@image">
+<meta property="og:url" content="@@url">
+<meta property="og:site_name" content="@@title">
+
+<meta property="twitter:card" content="summary">
+<meta property="twitter:title" content="@@title">
+<meta property="twitter:description" content="@@description">
+<meta property="twitter:image" content="@@image">
diff --git a/src/pages/index.html b/src/pages/index.html
@@ -1,41 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
- <title>ASTIK | Front-end Developer | Portfolio</title>
+ @@include('./../head/base.html')
 
- <link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
- <link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
- <link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
- <link rel="manifest" href="img/favicon/site.webmanifest">
+ <title>ASTIK | Front-end Developer | Portfolio</title>
+ <meta name="description" content="Front-end developer specializing in developing responsive and user-friendly web interfaces, optimizing website performance, and ensuring cross-browser compatibility.">
+ <meta name="keywords" content="astik, astik dev, astik developer, astik front-end, astik frontend, astik oleksandr, oleksandr astik, astik freelance, astik freelancer, ast, astik portfolio">
+
+ @@include('./../head/favicon.html')
 
- <meta charset="UTF-8">
+ @@include('./../head/og-twitter.html', {
+ "title": "ASTIK | Front-end Developer | Portfolio",
+ "description": "Front-end developer specializing in developing responsive and user-friendly web interfaces, optimizing website performance, and ensuring cross-browser compatibility.",
+ "image": "https://astik.dev/img/meta.png",
+ "url": "https://astik.dev/",
+ })
 
- <!-- Fonts -->
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <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">
+ @@include('./../head/fonts.html')
 
- <!-- CSS -->
  <link rel="stylesheet" href="css/vendors/swiper-bundle.min.css">
  <link rel="stylesheet" type="text/css" href="css/style.min.css">
-
- <meta name="viewport" content="width=device-width, initial-scale=1">
-
- <meta name="format-detection" content="telephone=no">
-
- <meta name="description" content="Front-end developer specializing in developing responsive and user-friendly web interfaces, optimizing website performance, and ensuring cross-browser compatibility.">
- <meta name="keywords" content="astik, astik dev, astik developer, astik front-end, astik frontend, astik oleksandr, oleksandr astik, astik freelance, astik freelancer, ast, astik portfolio">
-
- <meta property="og:locale" content="en_US">
- <meta property="og:type" content="website">
- <meta property="og:image" content="https://astik.dev/img/meta.png">
- <meta property="og:url" content="https://astik.dev/">
- <meta property="og:site_name" content="ASTIK | Front-end Developer | Portfolio">
-
- <meta property="twitter:card" content="summary">
- <meta property="twitter:title" content="ASTIK | Front-end Developer | Portfolio">
- <meta property="twitter:description" content="Front-end developer specializing in developing responsive and user-friendly web interfaces, optimizing website performance, and ensuring cross-browser compatibility.">
- <meta property="twitter:image" content="https://astik.dev/img/meta.png">
  </head>
  <body>
  <div class="wrapper">

diff --git a/src/pages/privacy.html b/src/pages/privacy.html
@@ -1,39 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
- <title>ASTIK | Portfolio | Privacy Policy</title>
-
- <link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
- <link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
- <link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
- <link rel="manifest" href="img/favicon/site.webmanifest">
-
- <meta charset="UTF-8">
+ @@include('./../head/base.html')
 
- <!-- Fonts -->
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <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">
-
- <!-- CSS -->
- <link rel="stylesheet" type="text/css" href="css/style.min.css">
+ <title>ASTIK | Portfolio | Privacy Policy</title>
 
- <meta name="viewport" content="width=device-width, initial-scale=1">
+ @@include('./../head/favicon.html')
 
- <meta name="format-detection" content="telephone=no">
+ @@include('./../head/og-twitter.html', {
+ "title": "ASTIK | Portfolio | Privacy Policy",
+ "description": "Your privacy is important to us, and we are committed to protecting and safeguarding your personal information. This Privacy Policy outlines how we collect, use, and safeguard information when you visit our website.",
+ "image": "https://astik.dev/img/meta.png",
+ "url": "https://astik.dev/privacy.html",
+ })
 
- <meta property="og:locale" content="en_US">
- <meta property="og:type" content="website">
- <meta property="og:image" content="https://astik.dev/img/meta.png">
- <meta property="og:url" content="https://astik.dev/privacy.html">
- <meta property="og:site_name" content="ASTIK | Portfolio | Privacy Policy">
+ <meta name="robots" content="noindex">
 
- <meta property="twitter:card" content="summary">
- <meta property="twitter:title" content="ASTIK | Portfolio | Privacy Policy">
- <meta property="twitter:description" content="Your privacy is important to us, and we are committed to protecting and safeguarding your personal information. This Privacy Policy outlines how we collect, use, and safeguard information when you visit our website.">
- <meta property="twitter:image" content="https://astik.dev/img/meta.png">
+ @@include('./../head/fonts.html')
 
- <meta name="robots" content="noindex">
+ <link rel="stylesheet" type="text/css" href="css/style.min.css">
  </head>
  <body>