SP-03: Fix urls

package.json

@@ -6,7 +6,6 @@
     "dev": "astro dev",
     "start": "astro dev",
     "build": "astro check && astro build",
-    "postbuild": "node ./postbuild.mjs -path https://tihi321.github.io/astro-start-tab/",
     "preview": "astro preview",
     "astro": "astro"
   },

src/layouts/BaseHead.astro

@@ -1,6 +1,7 @@
 ---
 // Import the global.css file here so that it is included on
 // all pages through the use of the <BaseHead /> component.
+import { getWebsiteUrl } from "../utils";
 import "../styles/global.css";
 
 interface Props {
@@ -10,19 +11,23 @@ interface Props {
 }
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
-
+const siteUrl = getWebsiteUrl();
 const { title, description, image = "/content/images/blog-placeholder-1.jpg" } = Astro.props;
 ---
 
 <!-- Global Metadata -->
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="icon" type="image/svg+xml" href=`${siteUrl}/favicon.svg` />
 <meta name="generator" content={Astro.generator} />
 
 <!-- Font preloads -->
-<link rel="preload" href="/fonts/RobotoSlab-Regular.woff" as="font" type="font/woff" crossorigin />
-<link rel="preload" href="/fonts/RobotoSlab-Bold.woff" as="font" type="font/woff" crossorigin />
+<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:wght@400;700&display=swap"
+  rel="stylesheet"
+/>
 
 <!-- Canonical URL -->
 <link rel="canonical" href={canonicalURL} />

src/pages/index.astro

@@ -1,6 +1,8 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
+import { getWebsiteUrl } from "../utils";
+const siteUrl = getWebsiteUrl();
 ---
 
 <Layout title={SITE_TITLE} description={SITE_DESCRIPTION}>
@@ -12,7 +14,7 @@ import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
       <div class="services-title heading">Team</div>
       <ul role="list" class="team">
         <li class="member">
-          <img src="/images/caricature.png" alt="" /><div class="member-info">
+          <img src=`${siteUrl}/images/caricature.png` alt="" /><div class="member-info">
             <div class="member-name">Tihomir Selak</div>
             <div class="member-role">CEO/CTO</div>
             <div class="member-background">

src/styles/global.css

@@ -13,25 +13,12 @@ html {
 	--text-color: rgba(51, 51, 51, 1);
 }
 
-@font-face {
-	font-family: 'Roboto Slab';
-	src: url('/fonts/RobotoSlab-Regular.woff') format('woff');
-	font-weight: 400;
-	font-style: normal;
-	font-display: swap;
-}
-@font-face {
-	font-family: 'Roboto Slab';
-	src: url('/fonts/RobotoSlab-Bold.woff') format('woff');
-	font-weight: 700;
-	font-style: normal;
-	font-display: swap;
-}
 * {
 	box-sizing: border-box;
 }
 body {
-	font-family: 'Roboto Slab', serif;
+  font-family: "Roboto", sans-serif;
+	font-weight: 400;
 	margin: 0;
 	padding: 0;
 	background: var(--focus);

src/utils.ts

@@ -0,0 +1,5 @@
+export const getWebsiteUrl = () => {
+  return process.env.NODE_ENV === "development"
+    ? "http://localhost:4321"
+    : "https://tihi321.github.io/astro-start-tab";
+};