chore: Modularize and streamline linked data and Webpack configuration (#63)

warnyul · web-flow · commit ada4a6561d1c · 2024-11-30T17:25:08.000+01:00
- Moved structured data JSON-LD to a separate `linkedData.ejs` template for reusability and clarity in `index.ejs`.
- Refactored Webpack configuration to dynamically load links from a JSON file, reducing redundancy and improving maintainability.
diff --git a/src/data/links.json b/src/data/links.json
@@ -0,0 +1,39 @@
+{
+    "links":
+    [
+        {
+            "name": "LinkedIn",
+            "url": "https://www.linkedin.com/in/-balazs-varga-/"
+        },
+        {
+            "name": "Bluesky",
+            "url": "https://bsky.app/profile/balzsvarga.bsky.social"
+        },
+        {
+            "name": "GitHub",
+            "url": "https://github.com/warnyul"
+        },
+        {
+            "name": "The Apter Blog",
+            "url": "https://blog.apter.tech/"
+        }
+    ],
+    "socialLinks":
+    [
+        {
+            "icon": "linkedin",
+            "name": "LinkedIn",
+            "url": "https://www.linkedin.com/in/-balazs-varga-/"
+        },
+        {
+            "icon": "bluesky",
+            "name": "Bluesky",
+            "url": "https://bsky.app/profile/balzsvarga.bsky.social"
+        },
+        {
+            "icon": "github",
+            "name": "GitHub",
+            "url": "https://github.com/warnyul"
+        }
+    ]
+}
diff --git a/src/views/index.ejs b/src/views/index.ejs
@@ -21,21 +21,7 @@
     <link rel="preload" href="../assets/fonts/Poppins-Regular-latin-ext.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
     <link rel="preload" href="../../node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
     <link rel="preload" href="../../node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
-    <script type="application/ld+json">
-        {
-          "@context": "https://schema.org",
-          "@type": "Person",
-          "name": "Balázs Varga",
-          "url": "<%- baseUrl %>",
-          "sameAs": [
-            "https://www.linkedin.com/in/-balazs-varga-/",
-            "https://github.com/warnyul",
-            "https://bsky.app/profile/balzsvarga.bsky.social"
-          ],
-          "image": "<%- baseUrl + '/' + profilePictureUrlPath %>",
-          "description": "Discover the professional profile of Balázs Varga. Links to LinkedIn, GitHub, Bluesky, and blog. Connect now!"
-        }
-    </script>
+    <%- include('./linkedData.ejs', { baseUrl: baseUrl, profilePictureUrlPath: profilePictureUrlPath }); %>
 </head>
 <body>
     <div class="clazz-container">
diff --git a/src/views/linkedData.ejs b/src/views/linkedData.ejs
@@ -0,0 +1,17 @@
+
+<% 
+    const linkedData = {
+        "@context": "https://schema.org",
+        "@type": "Person",
+        "name": "Balázs Varga",
+        "url": baseUrl,
+        "sameAs": [
+            "https://www.linkedin.com/in/-balazs-varga-/",
+            "https://github.com/warnyul",
+            "https://bsky.app/profile/balzsvarga.bsky.social"
+        ],
+        "image": `${baseUrl}/${profilePictureUrlPath}`,
+        "description": "Discover the professional profile of Balázs Varga. Links to LinkedIn, GitHub, Bluesky, and blog. Connect now!",
+    };
+%>
+<script type="application/ld+json"><%- JSON.stringify(linkedData) %></script>
diff --git a/webpack.config.js b/webpack.config.js
@@ -17,11 +17,15 @@ const { interpolateName } = require('loader-utils');
 const fs = require('fs');
 const glob = require('glob');
 const path = require('path');
-const { sources } = require('webpack');
 const context = path.join(__dirname, 'src');
 const outputDir = path.join(__dirname, 'dist');
 const baseUrl = 'https://bvarga.dev';
 
+const links = function() {
+  const links = fs.readFileSync(`${context}/data/links.json`);
+  return JSON.parse(links);
+}();
+
 module.exports = {
     mode: "production",
     entry: {
@@ -114,42 +118,8 @@ module.exports = {
                   content: pngContent,
                 }
               );
-          }(),
-            links: [
-              {
-                name: 'LinkedIn',
-                url: 'https://www.linkedin.com/in/-balazs-varga-/'
-              },
-              {
-                name: 'Bluesky',
-                url: 'https://bsky.app/profile/balzsvarga.bsky.social'
-              },
-              {
-                name: 'GitHub',
-                url: 'https://github.com/warnyul'
-              },
-              {
-                name: 'The Apter Blog',
-                url: 'https://blog.apter.tech/'
-              },
-            ],
-            socialLinks: [
-              {
-                icon: 'linkedin',
-                name: 'LinkedIn',
-                url: 'https://www.linkedin.com/in/-balazs-varga-/'
-              },
-              {
-                icon: 'bluesky',
-                name: 'Bluesky',
-                url: 'https://bsky.app/profile/balzsvarga.bsky.social'
-              },
-              {
-                icon: 'github',
-                name: 'GitHub',
-                url: 'https://github.com/warnyul'
-              },
-            ],
+            }(),
+            ...links,
           },
         }
       }),
