In my final thoughts, I said:

While I'm happy with what I created, there are still some things I'd like to work on. Having more security rules for the PocketBase collection is number one, however, I want to add an option that will display total views in the iframe. Doing so would require better security, and possibly a backend server.

Thankfully (for my budget) I was wrong about needing a backend server. PocketBase, alone, is enough to accomplish everything.

Goals

• Include an option (like show=true) in the URL that will display total views.

• Make it so - for security - only the number of views (aka, entries in my PocketBase collection) can be queried, not any of the analytics data.

After a rough start trying to experiment with PocketBase rules, I asked the community for help with my problem. Below, is the reply from @ganigeorgiev which saved me from resorting to creating a backend server.

Updating our PocketBase

Turns out, in order to only allow viewing the number of results and not the content of said results, another collection is needed. However, not the same type of collection. I didn't know about this, but PocketBase has a "view" collection type which is a collection that's content reflects another collection's (or multiple), with filters applied.

With a little modification to group counts by our slug (title of blog post), I ended up with this:

SELECT id, slug, COUNT(*) as total
FROM `basic_analytics`
GROUP BY slug

Your new collection settings in PocketBase should look something like this:

But there's still one more change to make, in the API Rules section, unlock both methods. This will allow anyone with your PocketBase URL to view only the number of views for each post.

After saving the new collection, if you have records in your basic_analytics collection, your new collection will look like this (I've named mine view_analytics):

Mine has some genuine, and some test data. It took me a while to work out all the issues.

Updating our HTML/JavaScript

As our website will be embedded in Hashnode posts, I'm not going to focus on styling. Also because I despise CSS. So let's create a simple div , hidden at first, where we can display the number of views.

<div id='views' style='display: none'>
    <h1>Total Views: <span id='viewnum'>...</span></h1>
</div>

Next, we need a function to query the new collection and update the element. You may ask, why am I doing this in the same function? Well, the PocketBase SDK actually uses asynchronous functions. Previously, I didn't use await as our functions were synchronous - I just assume the promise will eventually resolve (which it seems to do so just fine).

This time, I'll write an async function, so we can get the value from PocketBase and then use it. However, the function still won't be awaited properly, and we will assume it resolves again. If someone would like to leave a comment with fully asynchronous code I would appreciate it, for now I think I'll stick to "if it ain't broke, don't fix it".

Getting view count in JavaScript

async function getTotalViews(span_id) {
    // get matches for slug from URL params
    const count = await pb.collection('view_analytics').getFirstListItem(
        `slug="${params.get('slug')}"`
    );
    // update the element with the view count
    document.getElementById(span_id).innerText = count.total;
}

If you're confused, you really should read my first post, which explains how we got to this point.

Next, let's update our main function - where we create the entry in our collection. Right after our console.log where we log the new record, and the data it contains, we'll add a simple if statement which will toggle the visibility of our view count div, and call our getTotalViews function.

if (params.get('show')) {
    document.getElementById('views').style.display = 'block';
    getTotalViews('viewnum');
}

As I mentioned earlier, we can't use await as the function containing this code is synchronous. But, that's it!

At the end of this post, I have inserted some HTML with Hasnode, to use our analytics and display the view count. Here is the code:

<iframe src='https://<your-repl>.<your-replit-username>.repl.co/?slug=custom_analytics_pt2&show=true'></iframe>

See it in action

So, Hashnode has some very nice analytics. I like how you can see how much time people spend on your articles. But one feature that I'd like to see is more location data collected, I want to know where my readers are coming from. Why? Previously, I misjudged potential revenue due to not realizing over 60% of my userbase resided in Myanmar and were only using my service for its free nature.

Initial ideas

Initially, my plan was to create a Hashnode widget with some JavaScript that would collect some user data and then send it off to a database, however, Hashnode seems to disallow Javascript, oddly.

Iframes, on the other hand, are allowed to execute JavaScript (I assume so that pages can still function). To save costs on hosting, I decided to use an HTML Repl, and a PocketBase instance hosted on linode for the database.

Development

After creating a blank website on replit, I used cdnjs to find the libraries I need. For the PocketBase connection, I used their provided SDK. For analyzing browser information, I will use the platform.js library.

<!-- pocketbase sdk -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pocketbase/0.8.0-rc1/pocketbase.umd.min.js" integrity="sha512-0NJSuVFhF9NPZ/UAp98rCmJTTLhvjYwn2Uu4HN5eXE3uYfT6xad6WV6XuTmoKMMnj43yPT+kEyaCix1/t+8Tkw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- platform.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.6/platform.min.js" integrity="sha512-eYPrm8TgYWg3aa6tvSRZjN4v0Z9Qx69q3RhfSj+Mf89QqwOMqmwSlsVqfp4N8NVAcZe/YeUhh9x/nM2CAOp6cA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- jquery -->
<script src='https://code.jquery.com/jquery.min/js'></script>

Now let's set up the collection in PocketBase. Once you have a PocketBase instance set up following their instructions (make sure you remember the admin user password), you can create a new collection for the data. I called mine basic_analytics. Make sure to add all the fields you need, mine looks like this:

For security, I'm not going to do too much. You may want to make some changes, but I'm fairly new to PocketBase, and what I made works for me. In the API Rules, keep everything on admins only mode, but unlock the Create rule and leave it blank (allowing anyone to create new records). It should look like this:

Everything not shown above has been left as the default.

JavaScript

Going back to your website, the HTML repl, let's create the connection to your PocketBase instance.

const pb = new PocketBase('https://<your pocketbase server>');

As we don't require authentication to create records, we don't need to worry about keys or anything.

Now let's add some JavaScript which will collect some analytics data, and add a new entry to our database. We will be using a URL parameter to let our script know which post we are collecting data for.

const agent = navigator.userAgent; // get userAgent string
var info = platform.parse(agent); // parse with platform.js
var params = new URLSearchParams(window.location.search); // get req params

// ipinfo is a free service to get ip and location
$.getJSON('https://ipinfo.io', (resp) => {
    var data = {
        'slug': params.get('slug'), // blog post slug

        'ip': resp.ip, 
        'country': resp.country // country code
        'postal': resp.postal, // only the first couple characters

        'browser': info.name, // e.g., Chrome
        'os': info.os.family // e.g., Windows
    }

    // create record (basic_analytics is our collection name)
    let doc_p = pb.collection('basic_analytics').create(data);
    // log for debugging purposes
    console.log({
        doc_p,
        data
    });
})

Now, when we attempt to visit our website, we see a blank page, but a record is added to our database!

Collecting analytics

In order to collect analytics for your blog post, use the new "Insert HTML" feature when writing, and link to your website like so:

<iframe src='https://<repl-name>.<your-repl-username>.repl.co/?slug=post_slug_or_identifier'></iframe>

It's as simple as that!

Viewing analytics with Python

We could just log into our PocketBase instance every time we desired to view our analytics, but that's not fun. So let's write a simple Python script that authenticates with PocketBase as an admin and shows us a pretty table of analytics.

Before we start, we need to ensure these libraries are installed (with pip install library-name ):

• pocketbase - python client for PocketBase

• rich - a library for pretty outputs (and creating a table in the console)

Now let's start writing. Create a new Python file, call it whatever you want. First, we need to import everything that we will use.

from argparse import ArgumentParser # to make a cli interface
from pocketbase import PocketBase # pocketbase client
from rich.table import Table # creating tables in the console
from getpass import getpass # get password input securely
from rich import print # pretty printing

Run the file to make sure everything is installed and working. Next, let's create the CLI.

parser = ArgumentParser() # new arg parser
parser.add_argument(
    '-s', '--slug', # name
    help='The slug of the blog post to get analytics for' # desc
)
parser.add_argument(
    '-p', '--password', 
    help='The password to use to authenticate with the API'
)
args = parser.parse_args() # read args from command line args

Now we're ready to authenticate with PocketBase. We will add a fallback from the CLI that will prompt the user if a password was not given via argument.

pb = PocketBase('https://<your-pb-server>')
adminData = pb.admins.auth_with_password(
    '<admin-email-addr>',
    (args.password or getpass()) # use args, or fallback to prompt 
)
pb.auth_store.save(adminData.token) # it took me 1 hour to figure this out

Now that we are authenticated as an admin, we can access all the "locked" methods for our PocketBase collection. Let's create our query parameters and get the results from our database.

query_params = {
    'per_page': 100 # up to 100 results returned
}
if args.slug: # if not given, will just return all posts' analytics
    query_params['filter'] = f'slug="{args.slug}"'

records = pb.collection('basic_analytics').get_full_list(query_params=query_params)

Now, using the rich library, let's show the results in a nice, readable way.

# create the table
table = Table(
    title=f'Analytics for {args.slug or "all posts"}. Total: {len(records)}.'
)
table.add_column('Date')
table.add_column('IP')
table.add_column('Country')
table.add_column('Postal')
table.add_column('Browser')
table.add_column('OS')
if not args.slug:
    table.add_column('Slug')

# populate
for record in records: 
    data = record.collection_id # contains entry data
    row = [
        f"[green]{data['created']}[/green]",
        data['ip'],
        f"[green]{data.get('country', 'Unknown')}[/green]",
        data.get('postal', 'Unknown'),
        f"[green]{data.get('browser', 'Unknown')}[/green]",
        data.get('os', 'Unknown')
    ]
    if not args.slug:
        row.append(f"[green]{data['slug']}[/green]")

    table.add_row(*row) # add row to table

# display table
print(table) # remember, this print is imported from rich

I decided to add color to every other row to make the final result more readable.

Final thoughts

While I'm happy with what I created, there are still some things I'd like to work on. Having more security rules for the PocketBase collection is number one, however, I want to add an option that will display total views in the iframe. Doing so would require better security, and possibly a backend server.

For now, I will be using it on all future posts.

View part 2 of this article here!

Choosing a library

My requirements were simple; I wanted two verticle panels. One that displays information that updates occasionally, another that acts as a console.

Initially, I was drawn to Textual. I had seen demos of what it could do not long ago, and it was impressive. They also provided an example of a split-pane layout. However, I could not figure out how to print to one of the panes. The documentation was confusing, and either I couldn't find the relevant section or it just didn't exist yet, so I gave up with that.

After contemplating writing one myself, I eventually stumbled upon talk of rich (from the same organisation as Textual) being used to create a split screen. I had used rich before. It's simple. I like it. They had a new feature, called Live, that would run a loop displaying updated information. All I needed was a way to use all those print and input statements.

Turns out, rich wasn't exactly the most suited for such a task, either. But, thanks to the help of @zuhataslan on GitHub, I had everything I needed to put it together.

Building the framework

I decided, to make things as simple as possible, I was going to achieve this split screen with a simple table. This seemed to be the easiest way of dividing the screen. So I created a basic class:

from rich.live import Live
from rich.table import Table

class TUI(object):
    def __init__(self):
        self.table = Table(title='1337GPT') # title of my application
        self.table.add_column('Data') # left pane
        self.table.add_column('Console') # right pane

# ensure that it works
import time
tui = TUI()
with Live(tui.table, refresh_per_second=4):
    for i in range(100):
        tui.table.add_row('b' * i, 'a' * i)
        time.sleep(0.2)

The last bit is just how I tested it to see how everything would look. Which, was something like this:

Alright. Good starting point. Next I wanted to expand the table so that it took up the whole terminal window. To do that, I used the get_terminal_size from the built-in os library. Since there's not much code so far, I'll just show you the whole updated file.

from rich.live import Live
from rich.table import Table
import os

class TUI(object):
    def __init__(self):
        # give us some slack for the max line size
        # this accounts for the "|"s when formatting the table
        self.max_lines = os.get_terminal_size().lines - 7
        self.total_cols = os.get_terminal_size().columns - 4

        # if total_cols is odd, make it even
        if self.total_cols % 2 == 1:
            self.total_cols -= 1

        # length of characters in each pane
        self.half_cols = self.total_cols // 2

        # make the table
        self.table = Table(title='1337GPT')
        self.table.add_column('Data')
        self.table.add_column('Console')

        # create some empty rows
        for i in range(os.get_terminal_size().lines - 7):
            self.table.add_row(' ' * self.half_cols, ' ' * self.half_cols)

    # this function will be useful later for padding text
    def pad(self, text):
        return text.ljust(self.half_cols)

Now, by experimenting in the Python console, I found out a little more about how rich's tables work. See, the only method that was shown in the documentation for adding data was table.add_row, which would update both "panes" at the same time. To work around this, I found out that once I had all those blank rows, I could simply replace a single cell using table.columns[0]._cells which contained a list of cells within the first column.

Next, I created a Console class which would allow me to interact with the right pane as if it were a console.

# update the second import
from rich.table import Table, Row

# ... other code above

class Console(object):
    def __init__(self, tui: TUI):
        self.tui = tui # to access the table contained within
        self.history = [] # for when we run out of space for lines

    # gets the current "lines" in console
    def getlines(self):
        return self.tui.table.columns[1]._cells # columns[1] is the Console

    # adds a line
    def add_line(self, line: str):
        # padding it ensures the width of the table remains the same
        line = self.tui.pad(line)

        # "scroll down" and add line
        lines = self.getlines()
        self.history.append(lines.pop(0)) # preserve history
        lines.append(line)
        self.tui.table.columns[1]._cells = lines # update table

This method of adding a line to the "console" ensures that it will always have the same number of rows so that we can always see the title of the table (and application) within the current terminal view.

Now, we need an input method. This will be awkward to implement, as the rich Live changes how inputs behave. Anything printed (including input prompts) will be displayed above the table - which is not what I want. Here's how I added this functionality myself (the ... represents code which was shown earlier).

# we need the getch function to get a single character during the Live loop
if os.name == 'nt':
    # windows
    from msvcrt import getch
else:
    # linux based
    from getch import getch

class Console(object):
    def __init__(self, tui: TUI):
        ...
        self._input = ''

    # updates the text of the last line
    def update_last(self, text: str):
        lines = self.getlines()
        lines[-1] = self.tui.pad(text)
        self.tui.table.columns[1]._cells = lines

    # our print function
    def print(self, *args):
        args_str = map(repr, args) # convert to string representation
        args_line = ' '.join(args_str) # list to string
        self.add_line(args_line) # "print"

    # our input function
    def input(self, prompt: str):
        # print the prompt 
        self.add_line(prompt)

        # loop until input is done
        while True:
            ch = getch().decode() # gets a single character
            if ch == '\x03': # Ctrl+c
                raise KeyboardInterrupt
            elif ch in ('\n', '\r'): # new line characters means we're done
                inp = self._input
                self._input = '' # clear it for next time
                return inp # return the value - exiting the loop
            elif ord(ch) == 127: # backspace
                self._input = self._input[:-1] # remove last char
                self.update_last(prompt + self._input) # update line
            else: # valid char
                self._input += ch # add it to the input
                self.update_last(prompt + self._input) # update line

Surprisingly, this works! Here's an example of how you would use it all together:

# put this at the end of the file
tui = TUI()
console = Console(tui)

with Live(tui.table, refresh_per_second=10): # increased refresh for typing
    while True:
        cmd = console.input('>>> ')

        if cmd in ('exit', 'break', 'exit()'):
            break

        elif cmd:
            res = eval(cmd)
            console.print(cmd)

Use with 1337GPT

If you want to see how I integrated it with my AI Task Manager (used in 1337GPT), you can view the finished source code, here!

How does it work?

1337GPT starts off with a goal that the user sets. It will come up with a list of tasks that it thinks it will need to complete to achieve this goal. As it iterates through this list of tasks, it will give the task (along with some contextual information) to a langchain agent - equipped with tools. The result of this agent chain will be fed back into the task manager, where it will do a few things:

• Save information for later tasks

• Save information for the final result (when the goal is complete)

• Add any tasks (if it thinks necessary)

And this refinement step is what makes the process so effective. When given a chance to ponder the results of an action 1337GPT has taken, it can better select it's next steps.

Cool features

• Modify tasks before running, or skip them entirely

• Persistent sessions - if something goes wrong, you can pick up from where you left (also means you can edit data, as it is stored in JSON format)

• Some custom tools I wrote to help 1337GPT pentest effectively, listed below

Provided tools

These can be found in tools/, and are written using the langchain library. But you can also write your own custom tools for the job!

• Execute shell commands (asks for user confirmation before executing for safety)

• Search Google (uses googlesearch.py to avoid needing an API key)

• Scrape text from websites (requires API key from extractor)

• Search Shodan.io using their API (requires API key)

• Read/write local files

• Ask the user for input

Usage

See the Usage section in my README.md.