Blog Svelte

screenshot of Blog Svelte
svelte
firebase
ghost
strapi

Blog, feito em SvelteKit, Open Source!

Overview:

The Blog Frontend Sveltekit is a responsive blog developed using the Svelte framework. It incorporates various features such as post pagination, responsive layout, comments and comment counter, reading time, Google Analytics, image lazy load and placeholder, custom error page, code highlighting, image zoom, post reactions, SEO optimization, preview link sharing, social sharing buttons, carousel of offers from Amazon, automatically generated sitemap, and category filtering. The roadmap for future improvements includes updating Sveltekit, adding tags to posts, implementing a newsletter, adding search functionality, and creating widgets for GitHub and Spotify.

Features:

  • Listagem de postagens com paginação: Allows users to view posts with pagination.
  • Layout responsivo: Ensures that the blog adapts to different screen sizes and devices.
  • Comentarios e contador de comentarios nas postagens: Enables users to leave comments on posts, with a comment counter to display the total number of comments.
  • Tempo de leitura do post: Calculates and displays the estimated reading time for each post.
  • Google Analytics: Integrates Google Analytics for tracking website traffic and user behavior.
  • Google Performance Monitor: Monitors the performance of the blog using Google's performance monitoring tools.
  • Image Lazy load e placeholder: Delays the loading of images until they are needed, improving page load times. Includes a placeholder image during the loading process.
  • Pagina de erro customizada: Displays a custom error page when there is an error accessing a particular page.
  • Code highlight: Applies syntax highlighting to code snippets within blog posts for improved readability.
  • Image zoom: Allows users to zoom in on images for a closer look.
  • Reações nas postagens: Provides options for users to react to blog posts, such as liking or rating them.
  • SEO otimizado: Optimizes the blog for search engines to improve visibility and organic traffic.
  • Preview ao compartilhar links: Generates a preview when sharing links from the blog on social media or messaging platforms.
  • Botoes de compartilhamento nas postagens: Includes social sharing buttons on blog posts to facilitate easy sharing on various social media platforms.
  • Carrousel de ofertas (Amazon): Displays a carousel of offers from Amazon, allowing users to explore and purchase products.
  • Sitemap gerado automaticamente: Automatically generates a sitemap to aid search engine indexing and website navigation.
  • Filtro por categorias: Allows users to filter posts based on categories.

Summary:

The Blog Frontend Sveltekit is a feature-rich blog developed using the Svelte framework. It offers a responsive layout, post pagination, comments, reading time display, Google Analytics integration, image lazy loading, code highlighting, image zoom, social sharing buttons, and much more. With a roadmap for future improvements, such as adding tags, implementing a newsletter, and integrating search functionality, the blog aims to provide an excellent user experience and enhance its features continuously.

svelte
Svelte

Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.

firebase
Firebase

Firebase offers a comprehensive set of features, including real-time database, authentication, hosting, cloud functions, storage, and more. Firebase provides an easy-to-use interface and allows developers to focus on building features rather than managing infrastructure.

ghost
Ghost

Ghost is an open-source blogging platform designed to simplify the process of creating and publishing online content, with a focus on minimalism, speed, and flexibility.

strapi
Strapi

Strapi is an open source headless CMS that provides a customizable content management system and API for your projects. It allows you to manage content in a visual interface and use a REST or GraphQL API to retrieve the data.

blog
Blog

Blog websites feature posts written by one or more authors, organized by categories and tags, with a section for comments and archives sorted by date or topic. Additional features may include search bar, social media sharing, subscription or RSS feed, about and contact pages, and visual content.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.