mirror of
https://github.com/OneUptime/oneuptime.git
synced 2026-04-06 08:42:13 +02:00
96 lines
5.8 KiB
Plaintext
96 lines
5.8 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en" id="home">
|
|
|
|
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
|
|
|
<head>
|
|
<title>
|
|
OneUptime Blog - Latest posts on Observability, Monitoring, Reliability and more.
|
|
</title>
|
|
<meta name="description" content="Learn more about Observability, Monitoring, Reliability and more.">
|
|
<%- include('../head') -%>
|
|
<link rel="alternate" type="application/rss+xml" title="OneUptime Blog RSS Feed" href="/blog/rss.xml">
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<%- include('../nav') -%>
|
|
|
|
<div class="relative isolate overflow-hidden bg-white">
|
|
|
|
<div class="py-24 sm:py-32">
|
|
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<%- include('./Partials/BlogTitleAndDescription', { title: 'Engineering Uptime', smallTitle: '- Blog by OneUptime', description: 'Latest posts on Observability, Monitoring, Reliability and more.' }) -%>
|
|
|
|
<div class="flex justify-center mb-6">
|
|
<a href="/blog/rss.xml" target="_blank" rel="noopener" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-500 border border-gray-200 rounded-full hover:text-orange-600 hover:border-orange-300 hover:bg-orange-50 transition-all duration-200">
|
|
<svg class="w-4 h-4 text-orange-400" viewBox="0 0 24 24" fill="currentColor"><path d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20C5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1Z"/></svg>
|
|
RSS Feed
|
|
</a>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<% if(blogPosts.length> 0){ %>
|
|
<% const featured = blogPosts[0]; const rest = blogPosts.slice(1); %>
|
|
<!-- Featured Post -->
|
|
<div class="group/featured relative mb-14 rounded-2xl overflow-hidden border border-gray-200 bg-white p-8 md:p-12 shadow-sm ring-1 ring-gray-100 hover:shadow-lg hover:border-blue-200 hover:ring-blue-100 transition-all duration-300 cursor-pointer">
|
|
<!-- Subtle gradient on hover -->
|
|
<div class="absolute inset-0 bg-gradient-to-br from-blue-50/0 via-transparent to-emerald-50/0 group-hover/featured:from-blue-50/30 group-hover/featured:to-emerald-50/20 transition-all duration-500 pointer-events-none"></div>
|
|
<div class="relative z-10">
|
|
<div class="">
|
|
<a href="<%- featured.blogUrl %>" class="group no-underline">
|
|
<p class="inline-flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-blue-600 bg-blue-50 px-3 py-1.5 rounded-full ring-1 ring-blue-100 shadow-sm">
|
|
<span class="h-1.5 w-1.5 rounded-full bg-blue-500 animate-pulse"></span>
|
|
Featured
|
|
</p>
|
|
<h2 class="mt-5 text-3xl md:text-4xl font-bold tracking-tight text-gray-900 group-hover:text-blue-600 transition-colors duration-200"><%- featured.title %></h2>
|
|
<p class="mt-5 text-base md:text-lg leading-relaxed text-gray-600 line-clamp-5"><%- featured.description %></p>
|
|
<div class="mt-6 text-xs text-gray-500 flex flex-wrap items-center gap-3">
|
|
<img class="h-9 w-9 rounded-full ring-2 ring-white shadow-sm" src="https://avatars.githubusercontent.com/<%- featured.authorGitHubUsername -%>?s=80" alt="@<%- featured.authorGitHubUsername -%>" width="36" height="36" loading="lazy" decoding="async">
|
|
<span class="font-medium text-gray-600">@<%- featured.authorGitHubUsername -%></span>
|
|
<span class="select-none text-gray-300">•</span>
|
|
<span><%- featured.formattedPostDate -%></span>
|
|
</div>
|
|
<div class="mt-6">
|
|
<%- include('./Partials/Tags', { blogPost: featured }) -%>
|
|
</div>
|
|
<div class="mt-8 inline-flex items-center gap-2 text-sm font-semibold text-blue-600 group-hover:text-blue-500 transition-all duration-200">Read article <svg class="w-4 h-4 transition-transform duration-200 group-hover:translate-x-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" /></svg></div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Posts Grid -->
|
|
<div id="blog-posts-grid" class="grid grid-cols-1 gap-10 sm:grid-cols-2 xl:grid-cols-3 items-stretch">
|
|
<% for(var i=0; i<rest.length; i++) { const post = rest[i]; %>
|
|
<div data-blog-card class="h-full" data-search="<%- (post.title + ' ' + post.description + ' ' + post.tags.join(' ')).toLowerCase() -%>">
|
|
<%- include('./Partials/ListItem', { blogPost: post, colorIndex: i }) -%>
|
|
</div>
|
|
<% } %>
|
|
</div>
|
|
<div id="no-search-results" class="hidden text-center text-gray-500 text-sm py-16">No posts match your search.</div>
|
|
<%- include('./Partials/Pagination', { page: page, pageSize: pageSize, totalPages: totalPages, totalPosts: totalPosts, basePath: basePath }) -%>
|
|
<% } else { %>
|
|
<div class="text-center text-gray-600 text-lg py-12">No blog posts found.</div>
|
|
<% } %>
|
|
<div class="mt-24">
|
|
<%- include('./Partials/OpenSourceCommitment', {blogPost: null}) -%>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<%- include('./Partials/BlogCta') -%>
|
|
<%- include('../footer') -%>
|
|
<%- include("../Partials/cta-tracking") -%>
|
|
</body>
|
|
|
|
</html> |