Blog

<script setup> import { onMounted } from 'vue' import { data as posts } from './data/posts.data.ts' import ElectricElephant from '/static/img/blog/electric-elephant.jpg?url' import BlogPostListing from './src/components/BlogPostListing.vue' import NetlifyImage from './src/components/NetlifyImage.vue' onMounted(async () => { if (typeof window !== 'undefined' && document.querySelector) { const githubLinks = document.querySelectorAll( '.actions a[href="https://github.com/electric-sql/electric"]' ) let icon = document.querySelector('.actions .vpi-social-github') if (!icon) { githubLinks.forEach((link) => { const icon = document.createElement('span') icon.classList.add('vpi-social-github') link.prepend(icon) }) } const discordLinks = document.querySelectorAll( '.actions a[href="https://discord.electric-sql.com"]' ) icon = document.querySelector('.actions .vpi-social-discord') if (!icon) { discordLinks.forEach((link) => { const icon = document.createElement('span') icon.classList.add('vpi-social-discord') link.prepend(icon) }) } } }) </script> <style scoped> .header { text-align: center; padding: 0; margin: 60px 48px 32px; } .header img { width: 100%; max-width: 720px; margin: 0 auto 36px; } @media (max-width: 949px) { .header { margin: 58px 40px 32px; } } @media (max-width: 749px) { .header { margin: 54px 32px 32px; } } @media (max-width: 549px) { .header { margin: 42px 24px 24px; } } .header hr { margin: 48px 24px 32px; } p { font-size: 18px; } .listing { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 24px 48px; overflow: hidden; } @media (max-width: 1049px) { .listing { grid-template-columns: 1fr 1fr; } } @media (max-width: 949px) { .listing { gap: 32px; margin: 24px 40px; } } @media (max-width: 749px) { .listing { grid-template-columns: 1fr; gap: 32px; margin: 20px 32px; } } @media (max-width: 549px) { .listing { margin: 20px 24px; } } .actions { margin-top: 24px; } </style> <div class="vp-doc"> <div class="container"> <main> <div class="header"> <NetlifyImage :src="ElectricElephant" :width="720" :height="440" /> <h1> ElectricSQL Blog </h1> <p> The latest news and updates from the ElectricSQL&nbsp;project. </p> <div class="actions cta-actions"> <div class="action hidden-sm"> <VPButton href="https://discord.electric-sql.com" text="Join the Community" theme="brand" /> </div> <div class="action inline-sm"> <VPButton href="https://discord.electric-sql.com" text="Community" theme="brand" /> </div> <div class="action hidden-sm"> <VPButton href="https://github.com/electric-sql/electric" target="_blank" text="Star on GitHub" theme="alt" /> </div> <div class="action inline-sm"> <VPButton href="https://github.com/electric-sql/electric" target="_blank" text="GitHub" theme="alt" /> </div> </div> <hr /> </div> <div class="listing"> <BlogPostListing v-for="post in posts" :key="post.slug" :post="post" /> </div> </main> </div> </div>