Introduction

Here is a brief description about Bloggit!

Bloggit! stands as a robust content management system designed to cater to the needs of front-end developers, ensuring that they can create compelling blog websites with little configurations, all without the requirement of intricate backend or database expertise. This user-friendly platform offers an all-in-one solution, providing a secure and efficient database to store and manage all your content effortlessly.

One of the standout features of Bloggit! is its capacity to streamline the creation of dynamic navigation bars. This allows developers to customize their website's menu and improve the overall user experience, all without diving into the complexities of server-side development.

Moreover, Bloggit! simplifies the rendering of blog content. It enables you to effortlessly showcase not only the collective blogs but also individual posts, ensuring a smooth and aesthetically pleasing display. With Bloggit!, you can give your audience a seamless and engaging browsing experience while maintaining full control over your website's content.

In summary, Bloggit! is the go-to choice for developers who seek a hassle-free and efficient means of creating and managing blog websites with little configurations, making it easier than ever to share their ideas and stories with the world.

The following is the full Documentation on how to use this API.

Set Up yor Account

Create an Account for free here

You can now head to your dashboard and manage your posts

You will also need to set up your Site Urls in the API page; you API Key is also there

Site URLS

Blog Page

This is the Page where all your published posts are rendered. All posts have their Post ID, and this will also be returned.
You can also filter these posts by Categories. For example:

localhost:8000?category=lifestyle

If the stated category doesnt exist, all your posts will simply be returned.

Individual Post Page

This is where your single Posts are rendered; Each post has an unique ID. This ID must be included in the url.
You can get the ID to all your posts dynamically from the Blog Page.

localhost:8000/post?id=mypost7823

If the Post doesn't exist, a standard 404 Page is returned(if you're using Bloggit's provided Templates)!

Start Project

Create a script that contains the following; and place it in the head section of your HTML code

bloggit_conf = {
    "api_key": "YOUR_API_KEY_HERE", // This is the only compulsory field
    "preloader": "veron",
    "cont_rend": "classic", // Allows you to make use of our existing template to render your Post(s)
    "header":{ // Makes you use an existing Navigation Bar
        "type": "milky-way", // Check our other navigation bar types the next paragraph
        "brand_name": "Craennie", // This is the name that will appear on the navigation bar
        "links":{
            "Home": "/home",
            "Contact": "/contact",
            // Include others
        }
    }
}

Then, include the following just below the script you've created.

<script src = "https://bloggit.pythonanywhere.com/static/Javascript/config.js" defer></script>

If you decided to use Bloggit's provided templates. you'll have to include the following links too

<script src ="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src ="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src ="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="shortcut icon" href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'type="image/x-icon">

These configurations will be just enough to get you started.

Preloader

Options: veron, loda, growdan, traffic

Add the following to your HTML code to display the Preloader

<section id="bloggit-preloader"></section>

Cont Rend

Options: slimy-vue, classic

Add the following to your HTML code to display the Blog Contents

<section id="bloggit-container"></section>

Header > type

Options: milky-way,

Add the following to your HTML code to display the Navigation Bar

<section id="bloggit-header"></section>

Note: Only the API field is compulsory to be added, the other fields can be left blank or removed completely.

If developer decides not to use the provided template, the data is saved in a "bloggit_data" variable

Comment Feature

Bloggit now includes a robust comment feature, empowering users to engage and interact with blog posts seamlessly. This functionality simplifies the process of managing posts and associated comments.

To activate this feature, simply add the following to your configurations

const bloggit_conf = {
    // ...other configurations
    "comment": {
        "render_form": true, // Set to true to display the comment form
        "render_comments": true // Set to true to display existing comments
    }
}

This comment feature will only work if the "comment": {} is included, the render_form and render_comments are optional.

Add the following to your HTML code to display the Comments

<section id="bloggit-comment-container"></section>

Add the following to your HTML code to display the Comment Form

<section id="bloggit-comment-rf"></section>

Once configured, Bloggit will automatically render a comment form and display existing comments based on your settings.

Bloggit offers flexibility in customizing the comment render and form. Developers can opt to handle the comment render and form creation independently, allowing greater control over the user interface and data management.

Custom Comment Render

By default, Bloggit stores comments in the bloggit_comment_data(A dictionary containing Name of Sender and Comment) variable. Developers can leverage this variable to manage comments programmatically. To integrate custom comment rendering:

Accessing Comment Data: Comments submitted via the provided form are stored in bloggit_comment_data. You can manipulate this data structure as needed to render comments in your preferred format.

// Accessing comments stored in bloggit_comment_data
const comments = bloggit_comment_data;
// Use 'comments' to render comments in a custom format

Custom Comment Form

Developers have the freedom to create their comment submission form, ensuring it includes essential fields identified by their IDs (comment-name, comment-email and comment-comment). This empowers greater customization and integration with existing user interfaces.

The id of the Submit Button must also be bloggit-submit-comment

SMTP

You can apply our SMTP (Simple Mail Transfer Protocol) integration to enable contact forms on your website. With SMTP, your visitors can easily send messages and inquiries to your designated email address.

This feature is coming soon...