From d2ff8925692f3847936a8630b9b86b22300b1141 Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Sat, 2 Mar 2024 20:44:31 +0000
Subject: [PATCH] Update footer and BlogPostUtil***

---
 App/FeatureSet/Home/Utils/BlogPost.ts     |  22 ++-
 App/FeatureSet/Home/Views/Blog/Post.ejs   | 185 ++++++++++++++--------
 App/FeatureSet/Home/Views/footer.ejs      |   2 +-
 App/FeatureSet/Home/Views/head-basic.ejs  | 120 ++++++++++++++
 App/FeatureSet/Home/Views/head-social.ejs |  32 ++++
 App/FeatureSet/Home/Views/head.ejs        | 154 +-----------------
 6 files changed, 298 insertions(+), 217 deletions(-)
 create mode 100644 App/FeatureSet/Home/Views/head-basic.ejs
 create mode 100644 App/FeatureSet/Home/Views/head-social.ejs

diff --git a/App/FeatureSet/Home/Utils/BlogPost.ts b/App/FeatureSet/Home/Utils/BlogPost.ts
index 9a5ec2b458..e5df8db699 100644
--- a/App/FeatureSet/Home/Utils/BlogPost.ts
+++ b/App/FeatureSet/Home/Utils/BlogPost.ts
@@ -27,6 +27,9 @@ export interface BlogPost {
     fileName: string;
     tags: string[];
     postDate: string;
+    formattedPostDate: string;
+    socialMediaImageUrl: string;
+    blogUrl: string;
 }
 
 const GitHubRawUrl = 'https://raw.githubusercontent.com/oneuptime/blog/master'
@@ -146,6 +149,7 @@ export default class BlogPostUtil {
         );
 
         const postDate = this.getPostDateFromFileName(fileName);
+        const formattedPostDate = this.getFormattedPostDateFromFileName(fileName);
 
         const fileData:
             | HTTPResponse<
@@ -193,12 +197,28 @@ export default class BlogPostUtil {
             markdownBody: markdownContent,
             fileName,
             tags,
-            postDate: postDate,
+            postDate,
+            formattedPostDate,
+            socialMediaImageUrl: `${GitHubRawUrl}/posts/${fileName}/social-media.png`,
+            blogUrl: `https://oneuptime.com/blog/post/${fileName}`,
         };
 
         return blogPost;
     }
+
     static getPostDateFromFileName(fileName: string): string {
+        const year = fileName.split('-')[0];
+        const month = fileName.split('-')[1];
+        const day = fileName.split('-')[2];
+
+        if(!year || !month || !day) {
+            throw new BadDataException('Invalid file name');
+        }
+
+        return `${year}-${month}-${day}`;
+    }
+
+    static getFormattedPostDateFromFileName(fileName: string): string {
         // file name is of the format YYYY-MM-DD-Title.md
         const year = fileName.split('-')[0];
         const month = fileName.split('-')[1];
diff --git a/App/FeatureSet/Home/Views/Blog/Post.ejs b/App/FeatureSet/Home/Views/Blog/Post.ejs
index 7d886f266d..78b72d30b3 100644
--- a/App/FeatureSet/Home/Views/Blog/Post.ejs
+++ b/App/FeatureSet/Home/Views/Blog/Post.ejs
@@ -8,11 +8,61 @@
         <%= blogPost.title %>
     </title>
     <meta name="description" content="<%= blogPost.description %>">
-    <%- include('../head') -%>
+    <%- include('../head-basic') -%>
+        <link rel="canonical" href="https://oneuptime.com/blog/post/<%= blogPost.fileName %>" />
+        <meta property="og:site_name" content="OneUptime | One Complete Observability platform.">
+        <meta property="og:type" content="article">
+        <meta property="og:title" content="<%= blogPost.title %>">
+        <meta property="og:description" content="<%= blogPost.description %>">
+        <meta property="og:url"
+            content="<%= blogPost.blogUrl %>">
+        <meta property="og:image"
+            content="<%= blogPost.socialMediaImageUrl %>">
+        <meta property="article:published_time" content="<%- blogPost.postDate -%>T00:00:00.000Z">
+        <meta property="article:modified_time" content="<%- blogPost.postDate -%>T00:00:00.000Z">
+        <meta property="article:publisher" content="https://www.facebook.com/OneUptime">
+        <meta name="twitter:card" content="summary_large_image">
+        <meta name="twitter:title" content="<%= blogPost.title %>">
+        <meta name="twitter:description" content="<%= blogPost.description %>">
+        <meta name="twitter:url"
+            content="<%= blogPost.blogUrl %>">
+        <meta name="twitter:image"
+            content="<%= blogPost.socialMediaImageUrl %>">
+        <meta name="twitter:label1" content="Written by">
+        <meta name="twitter:data1" content="<%= blogPost.author.name %>">
+        <meta name="twitter:site" content="@OneUptimeHQ">
+        <meta property="og:image:width" content="1280">
+        <meta property="og:image:height" content="720">
+        <script type="application/ld+json">
+{
+    "@context": "https://schema.org",
+    "@type": "Article",
+    "publisher": {
+        "@type": "Organization",
+        "name": "OneUptime",
+        "url": "https://oneuptime.com/",
+        "logo": {
+            "@type": "ImageObject",
+            "url": "https://oneuptime.com/img/OneUptimePNG/1.png",
+            "width": 60,
+            "height": 60
+        }
+    },
+    "author": {
+        "@type": "Person",
+        "name": "<%= blogPost.author.name %>",
+        "url": "<%= blogPost.author.githubUrl %>",
+        "sameAs": []
+    },
+    "headline": "<%= blogPost.title %>",
+    "url": "<%= blogPost.blogUrl %>",
+    "datePublished": "<%- blogPost.postDate -%>T00:00:00.000Z",
+    "dateModified": "<%- blogPost.postDate -%>T00:00:00.000Z",
+    "description": "<%- blogPost.description -%>",
+    "mainEntityOfPage": "<%= blogPost.blogUrl %>"
+}
+    </script>
 
-        <style>
-
-        </style>
 
 </head>
 
@@ -28,7 +78,7 @@
                         <h1 class="text-4xl font-bold tracking-tight text-gray-900">
                             <%= blogPost.title %>
                         </h1>
-                        <p class="mt-6 text-xl sm:text-2xl leading-8 text-gray-600">
+                        <p class="mt-2 text-xl sm:text-2xl leading-8 text-gray-600">
                             <%= blogPost.description %>
                         </p>
 
@@ -38,69 +88,78 @@
                         <%- blogPost.htmlBody -%>
                     </div>
 
-                    <% if(blogPost.tags.length > 0){ %>
-                    <div class="flex mt-10">
-                        <div class="space-x-1">
-                        <!-- Loop over blogPost.tags and show them here-->
-                        <% for(var i=0; i<blogPost.tags.length; i++) {%>
-                            <a href="/blog/tag/<%- blogPost.tags[i].replace(' ','-').toLowerCase() -%>">
-                            <div class="relative inline-flex items-center rounded-full border border-gray-300 px-3 py-0.5 text-sm">
-                                <div class="absolute flex flex-shrink-0 items-center justify-center">
-                                    <div
-                                        class="h-1.5 w-1.5 rounded-full bg-indigo-500"
-                                        aria-hidden="true"
-                                    ></div>
-                                </div>
-                                <div class="ml-3.5 font-medium text-gray-900">
-                                    <%- blogPost.tags[i] -%>
-                                </div>
-                            </div>
-                            </a>
-                           
-                        <% } %>
-                    </div>
-                    </div>
-                    <% } %>
-
-                    <div class="bg-white my-10">
-                        <div class="">
-                            <ul role="list" class="">
-                                <li>
-                                    <a href="<%- blogPost.author.githubUrl -%>" target="_blank">
-                                        <div class="flex items-center gap-x-6">
-                                            <img class="h-12 w-12 rounded-full"
-                                                src="<%- blogPost.author.profileImageUrl -%>" alt="">
-                                            <div class="-ml-4">
-                                                <h3
-                                                    class="text-base font-semibold leading-7 tracking-tight text-gray-600">
-                                                    Written by <%- blogPost.author.name -%> on <%- blogPost.postDate -%>
-                                                </h3>
-                                                <p class="text-sm font-semibold leading-6 text-indigo-500 -mt-1">@<%-
-                                                        blogPost.author.username -%></p>
+                    <% if(blogPost.tags.length> 0){ %>
+                        <div class="flex mt-10">
+                            <div class="space-x-1">
+                                <!-- Loop over blogPost.tags and show them here-->
+                                <% for(var i=0; i<blogPost.tags.length; i++) {%>
+                                    <a href="/blog/tag/<%- blogPost.tags[i].replace(' ','-').toLowerCase() -%>">
+                                        <div
+                                            class="relative inline-flex items-center rounded-full border border-gray-300 px-3 py-0.5 text-sm">
+                                            <div class="absolute flex flex-shrink-0 items-center justify-center">
+                                                <div class="h-1.5 w-1.5 rounded-full bg-indigo-500" aria-hidden="true">
+                                                </div>
+                                            </div>
+                                            <div class="ml-3.5 font-medium text-gray-900">
+                                                <%- blogPost.tags[i] -%>
                                             </div>
                                         </div>
                                     </a>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
 
-                    
-                        <div class="text-sm font-medium leading-6 text-gray-900 mt-24">Our commitment to open-source</div>
-                        <div class="mt-2 text-sm text-gray-900">
-                          <ul role="list" class="divide-y divide-gray-100 rounded-md border border-gray-200">
-                            <li class="flex items-center justify-between py-4 pl-4 pr-5 text-sm leading-6">
-                              <div class="flex w-0 flex-1 items-center">
-                                
-                                <div class="ml-4 flex min-w-0 flex-1 gap-2">
-                                  <span>Everything we do at OneUptime is 100% open-source, including this blog post. You can make edits to this post and improve it <a class="underline" target="_blank" href="https://github.com/oneuptime/blog/tree/master/posts/<%- blogPost.fileName -%>">here</a>. <br/> You can even contribute by writing a post just like this. Please check contributing guidelines <a class="underline" target="_blank" href="https://github.com/oneuptime/blog">here</a></span>
-                                </div>
-                              </div>
-                            </li>
-                            
-                          </ul>
+                                    <% } %>
+                            </div>
                         </div>
-                    
+                        <% } %>
+
+                            <div class="bg-white my-10 mt-20">
+                                <div class="">
+                                    <ul role="list" class="">
+                                        <li>
+                                            <a href="<%- blogPost.author.githubUrl -%>" target="_blank">
+                                                <div class="flex items-center gap-x-6">
+                                                    <img class="h-12 w-12 rounded-full"
+                                                        src="<%- blogPost.author.profileImageUrl -%>" alt="">
+                                                    <div class="-ml-4">
+                                                        <h3
+                                                            class="text-base font-medium leading-7 tracking-tight text-gray-600">
+                                                            <span class="text-gray-400">By</span> <%-
+                                                                blogPost.author.name -%> <span class="text-gray-400"> on
+                                                                    <%- blogPost.formattedPostDate -%></span>
+                                                        </h3>
+                                                        <p class="text-sm font-medium leading-6 text-indigo-500 -mt-1">
+                                                            @<%- blogPost.author.username -%></p>
+                                                    </div>
+                                                </div>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+
+
+                            <div class="text-sm font-medium leading-6 text-gray-900 mt-24">Our Commitment to Open Source
+                            </div>
+                            <div class="mt-2 text-sm text-gray-900">
+                                <ul role="list" class="divide-y divide-gray-100 rounded-md border border-gray-200">
+                                    <li class="flex items-center justify-between py-4 pl-4 pr-5 text-sm leading-6">
+                                        <div class="flex w-0 flex-1 items-center">
+
+                                            <div class="ml-4 flex min-w-0 flex-1 gap-2">
+                                                <span>Everything we do at OneUptime is 100% open-source, including this
+                                                    blog post. You can make edits to this post and improve it <a
+                                                        class="underline" target="_blank"
+                                                        href="https://github.com/oneuptime/blog/tree/master/posts/<%- blogPost.fileName -%>">here</a>.
+                                                    <br /> You can even contribute by writing a post just like this.
+                                                    Please check contributing guidelines <a class="underline"
+                                                        target="_blank"
+                                                        href="https://github.com/oneuptime/blog">here</a></span>
+                                            </div>
+                                        </div>
+                                    </li>
+
+                                </ul>
+                            </div>
+
 
 
 
diff --git a/App/FeatureSet/Home/Views/footer.ejs b/App/FeatureSet/Home/Views/footer.ejs
index 4af0afba5c..3ccf4f4989 100644
--- a/App/FeatureSet/Home/Views/footer.ejs
+++ b/App/FeatureSet/Home/Views/footer.ejs
@@ -6,7 +6,7 @@
       <div class="xl:grid xl:grid-cols-3 xl:gap-8">
         <div class="space-y-8">
           <img class="h-20 -ml-2 -mb-5 -mt-5" src="/img/logo-gray.svg" alt="OneUptime">
-          <p class="text-sm leading-6 text-gray-600">OneUptime is the complete open-source observability platform.</p>
+          <p class="text-sm leading-6 text-gray-600">OneUptime is the complete observability platform. OneUptime is open-source and always will be.</p>
           <div class="flex space-x-6">
 
             <a href="https://twitter.com/oneuptimehq" target="_blank" class="text-gray-400 hover:text-gray-500">
diff --git a/App/FeatureSet/Home/Views/head-basic.ejs b/App/FeatureSet/Home/Views/head-basic.ejs
new file mode 100644
index 0000000000..63926826e4
--- /dev/null
+++ b/App/FeatureSet/Home/Views/head-basic.ejs
@@ -0,0 +1,120 @@
+<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=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
+    rel="stylesheet">
+<style>
+    * {
+        font-family: Inter;
+    }
+
+
+    input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+        background: transparent;
+        bottom: 0;
+        color: transparent;
+        cursor: pointer;
+        height: auto;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: auto;
+    }
+
+    input[type="date"]::-webkit-calendar-picker-indicator {
+        background: transparent;
+        bottom: 0;
+        color: transparent;
+        cursor: pointer;
+        height: auto;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: auto;
+    }
+</style>
+<script src="https://cdn.tailwindcss.com"></script>
+
+<!-- Google Tag Manager -->
+<script>(function (w, d, s, l, i) {
+        w[l] = w[l] || []; w[l].push({
+            'gtm.start':
+                new Date().getTime(), event: 'gtm.js'
+        }); var f = d.getElementsByTagName(s)[0],
+            j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+                'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+    })(window, document, 'script', 'dataLayer', 'GTM-PKQD5WH');</script>
+<!-- End Google Tag Manager -->
+
+
+<style>
+    .async-hide {
+        opacity: 0 !important
+    }
+</style>
+
+<script>
+    !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+    posthog.init('phc_lrbfSHsDc1YOhfbabPI8ncLCKz8eqeGdmu0O6IRKaz1',{api_host:'https://eu.posthog.com', autocapture: false})
+</script>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        //check if utm_source is present in the URL and save it to localstorage. 
+
+        if(posthog){
+            posthog.capture('home/page_view', {
+                'page': {
+                    'path': window.location.pathname,
+                    'referrer': document.referrer,
+                    'search': window.location.search,
+                    'url': window.location.href,
+                    'title': document.title,
+                }
+            });
+        }
+
+        var urlParams = new URLSearchParams(window.location.search);
+        var utm_source = urlParams.get('utm_source');
+        var utm_medium = urlParams.get('utm_medium');
+        var utm_campaign = urlParams.get('utm_campaign');
+        var utm_term = urlParams.get('utm_term');
+        var utm_content = urlParams.get('utm_content');
+        var utm_url = window.location.href;
+
+        if (utm_source != null) {
+            localStorage.setItem('utmSource', utm_source);
+            localStorage.setItem('utmMedium', utm_medium);
+            localStorage.setItem('utmCampaign', utm_campaign);
+            localStorage.setItem('utmTerm', utm_term);
+            localStorage.setItem('utmContent', utm_content);
+            localStorage.setItem('utmUrl', utm_url);
+
+            if (posthog) {
+                posthog.capture('home/utm_event', {
+                    utm_source: utm_source,
+                    utm_medium: utm_medium,
+                    utm_campaign: utm_campaign,
+                    utm_term: utm_term,
+                    utm_content: utm_content,
+                    utm_url: utm_url
+                })
+            }
+        }
+    });
+</script>
+
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="shortcut icon" href="/img/favicons/favicon.ico">
+<link rel="apple-touch-icon" sizes="180x180" href="/img/favicons/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/img/favicons/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/img/favicons/favicon-16x16.png">
+<link rel="mask-icon" href="/img/favicons/safari-pinned-tab.svg" color="#32335b">
+<meta name="msapplication-TileColor" content="#32335b">
+<link rel="apple-touch-icon-precomposed" href="/img/ou-wb.svg">
+<link rel="icon" href="/img/ou-wb.svg">
+<link rel="image_src" type="image/png" href="/img/hou-wb.svg">
+<link rel="canonical" href="/">
+<link rel="manifest" href="/manifest.json">
diff --git a/App/FeatureSet/Home/Views/head-social.ejs b/App/FeatureSet/Home/Views/head-social.ejs
new file mode 100644
index 0000000000..a745f9b2cd
--- /dev/null
+++ b/App/FeatureSet/Home/Views/head-social.ejs
@@ -0,0 +1,32 @@
+<meta property="og:title" content="OneUptime - One Complete Observability platform.">
+<meta property="og:url" content="https://oneuptime.com">
+<meta property="og:type" content="website" />
+<meta property="og:description"
+    content="OneUptime monitors websites, API's, and servers and alerts your team if something goes wrong. It also keeps your customers updated about any downtime. ">
+<meta property="og:image" content="https://oneuptime.com/img/hou-wb.svg">
+
+<meta name="twitter:card" content="summary">
+<meta name="theme-color" content="#000000">
+<meta name="twitter:image" content="/img/ou-wb.svg">
+<meta name="twitter:site" content="@oneuptimeinc">
+<meta name="twitter:title" content="OneUptime - One Complete Observability platform.">
+<meta name="twitter:description"
+    content="OneUptime monitors websites, API's, and servers and alerts your team if something goes wrong. It also keeps your customers updated about any downtime.">
+
+
+
+<script type="application/ld+json">
+    {
+    "@context": "http://schema.org",
+    "@type": "Corporation",
+    "name": "OneUptime",
+    "url": "https://www.oneuptime.com",
+    "logo": "https://oneuptime.com/img/ou-bb.svg",
+    "sameAs": [
+        "https://www.facebook.com/oneuptimeinc",
+        "https://twitter.com/OneUptimeInc",
+        "https://www.linkedin.com/company/oneuptime"
+    ],
+    "description": "OneUptime monitors websites, API's, and servers and alerts your team if something goes wrong. It also keeps your customers updated about any downtime."
+}
+</script>
\ No newline at end of file
diff --git a/App/FeatureSet/Home/Views/head.ejs b/App/FeatureSet/Home/Views/head.ejs
index 59c31de355..6a73a30eff 100644
--- a/App/FeatureSet/Home/Views/head.ejs
+++ b/App/FeatureSet/Home/Views/head.ejs
@@ -1,152 +1,2 @@
-<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=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
-    rel="stylesheet">
-<style>
-    * {
-        font-family: Inter;
-    }
-
-
-    input[type="datetime-local"]::-webkit-calendar-picker-indicator {
-        background: transparent;
-        bottom: 0;
-        color: transparent;
-        cursor: pointer;
-        height: auto;
-        left: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-        width: auto;
-    }
-
-    input[type="date"]::-webkit-calendar-picker-indicator {
-        background: transparent;
-        bottom: 0;
-        color: transparent;
-        cursor: pointer;
-        height: auto;
-        left: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-        width: auto;
-    }
-</style>
-<script src="https://cdn.tailwindcss.com"></script>
-
-<!-- Google Tag Manager -->
-<script>(function (w, d, s, l, i) {
-        w[l] = w[l] || []; w[l].push({
-            'gtm.start':
-                new Date().getTime(), event: 'gtm.js'
-        }); var f = d.getElementsByTagName(s)[0],
-            j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
-                'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
-    })(window, document, 'script', 'dataLayer', 'GTM-PKQD5WH');</script>
-<!-- End Google Tag Manager -->
-
-
-<style>
-    .async-hide {
-        opacity: 0 !important
-    }
-</style>
-
-<script>
-    !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
-    posthog.init('phc_lrbfSHsDc1YOhfbabPI8ncLCKz8eqeGdmu0O6IRKaz1',{api_host:'https://eu.posthog.com', autocapture: false})
-</script>
-
-<script>
-    document.addEventListener('DOMContentLoaded', function () {
-        //check if utm_source is present in the URL and save it to localstorage. 
-
-        if(posthog){
-            posthog.capture('home/page_view', {
-                'page': {
-                    'path': window.location.pathname,
-                    'referrer': document.referrer,
-                    'search': window.location.search,
-                    'url': window.location.href,
-                    'title': document.title,
-                }
-            });
-        }
-
-        var urlParams = new URLSearchParams(window.location.search);
-        var utm_source = urlParams.get('utm_source');
-        var utm_medium = urlParams.get('utm_medium');
-        var utm_campaign = urlParams.get('utm_campaign');
-        var utm_term = urlParams.get('utm_term');
-        var utm_content = urlParams.get('utm_content');
-        var utm_url = window.location.href;
-
-        if (utm_source != null) {
-            localStorage.setItem('utmSource', utm_source);
-            localStorage.setItem('utmMedium', utm_medium);
-            localStorage.setItem('utmCampaign', utm_campaign);
-            localStorage.setItem('utmTerm', utm_term);
-            localStorage.setItem('utmContent', utm_content);
-            localStorage.setItem('utmUrl', utm_url);
-
-            if (posthog) {
-                posthog.capture('home/utm_event', {
-                    utm_source: utm_source,
-                    utm_medium: utm_medium,
-                    utm_campaign: utm_campaign,
-                    utm_term: utm_term,
-                    utm_content: utm_content,
-                    utm_url: utm_url
-                })
-            }
-        }
-    });
-</script>
-
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<link rel="shortcut icon" href="/img/favicons/favicon.ico">
-<link rel="apple-touch-icon" sizes="180x180" href="/img/favicons/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="/img/favicons/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="/img/favicons/favicon-16x16.png">
-<link rel="mask-icon" href="/img/favicons/safari-pinned-tab.svg" color="#32335b">
-<meta name="msapplication-TileColor" content="#32335b">
-<link rel="apple-touch-icon-precomposed" href="/img/ou-wb.svg">
-<link rel="icon" href="/img/ou-wb.svg">
-<link rel="image_src" type="image/png" href="/img/hou-wb.svg">
-<link rel="canonical" href="/">
-<link rel="manifest" href="/manifest.json">
-<meta property="og:title" content="OneUptime - One Complete Observability platform.">
-<meta property="og:url" content="https://oneuptime.com">
-<meta property="og:type" content="website" />
-<meta property="og:description"
-    content="OneUptime monitors websites, API's, and servers and alerts your team if something goes wrong. It also keeps your customers updated about any downtime. ">
-<meta property="og:image" content="https://oneuptime.com/img/hou-wb.svg">
-
-<meta name="twitter:card" content="summary">
-<meta name="theme-color" content="#000000">
-<meta name="twitter:image" content="/img/ou-wb.svg">
-<meta name="twitter:site" content="@oneuptimeinc">
-<meta name="twitter:title" content="OneUptime - One Complete Observability platform.">
-<meta name="twitter:description"
-    content="OneUptime monitors websites, API's, and servers and alerts your team if something goes wrong. It also keeps your customers updated about any downtime.">
-
-
-
-<script type="application/ld+json">
-    {
-    "@context": "http://schema.org",
-    "@type": "Corporation",
-    "name": "OneUptime",
-    "url": "https://www.oneuptime.com",
-    "logo": "https://oneuptime.com/img/ou-bb.svg",
-    "sameAs": [
-        "https://www.facebook.com/oneuptimeinc",
-        "https://twitter.com/OneUptimeInc",
-        "https://www.linkedin.com/company/oneuptime"
-    ],
-    "description": "OneUptime monitors websites, API's, and servers and alerts your team if something goes wrong. It also keeps your customers updated about any downtime."
-}
-</script>
\ No newline at end of file
+<%- include('./head-basic') -%>
+<%- include('./head-social') -%>