[ANN] StippleCodeMirror.jl - A highlighting editor for the GenieFramework

[hhaensel]

I’m happy to announce the release of StippleCodeMirror.jl, a new package in the GenieFramework ecosystem that brings the powerful CodeMirror code editor to your web apps, with built-in syntax highlighting for Julia, Python, and JavaScript — and support for many more languages with minimal setup.

Julia syntax highlighting is supported both via CodeMirror’s native mode or using OhMyREPL color schemes server-side.

Use case highlight: StippleCodeMirror.jl can be especially useful for editing server-side files in environments where direct file access is limited or restricted.

Beyond its functionality, this package also serves as a reference for integrating external JavaScript libraries into the GenieFramework in a clean, reactive, and idiomatic way.

Give it a try and feel free to share feedback or contributions!

[andreeco]

This is a useful feature! It can be used to build page editors like Gutenberg, Elementor, or Shopware’s Shopping Experiences, enabling interactive editing interfaces within a web app.

(It would be great if GenieFramework, or a third party, offered a Docker container preconfigured with user management and a page builder. This would make deployment much easier for those who aren’t deeply familiar with Genie’s source code.)

[hhaensel]

Interesting thought, could be be more precise in what you think the docker image should do? How would you want to use that image?
Maybe a better idea would be a template that contains a preconfigured Genie app with user management and an admin page and including a Dockerfile to build your own image?

[andreeco]

This I already have, but it’s not (yet?) published. It’s built using the source code of GenieAuthentication and GenieAuthorisation, but has been heavily modified. I still need to complete the password reset functionality via email and implement multi-factor authentication and more security things.

xxx@xxx:~/.julia/dev/AuthPlugin$ tree # Small adjustments
├── files
│   ├── app
│   │   ├── layouts
│   │   │   ├── authapp.jl.html
│   │   │   └── authapp_stipple.jl.html
│   │   └── resources
│   │       ├── accounts
│   │       │   ├── AccountsController.jl
│   │       │   └── views
│   │       │       └── account_index.jl.html
│   │       ├── admins
│   │       │   ├── AdminsController.jl
│   │       │   └── views
│   │       │       └── index.jl.html
│   │       ├── legals
│   │       │   ├── LegalsController.jl
│   │       │   └── views
│   │       │       ├── imprint.jl.html
│   │       │       └── privacy.jl.html
│   │       ├── mains
│   │       │   ├── MainsController.jl
│   │       │   └── views
│   │       │       └── index.jl.html
│   │       └── panels
│   │           ├── PanelsController.jl
│   │           └── views
│   │               └── panels.jl
│   ├── config
│   │   └── initializers
│   │       └── authplugin_init.jl
│   ├── locales
│   │   ├── de
│   │   └── en
│   │       ├── accounts.toml
│   │       ├── admins.toml
│   │       ├── layout.toml
│   │       ├── legals.toml
│   │       └── mains.toml
│   ├── plugins
│   │   └── authplugin.jl
│   └── public
│       └── css
│           ├── authpluginstyle.css
├── index.md
├── LICENSE
├── Manifest.toml
├── Project.toml
├── README.md
├── src
│   ├── Authentication.jl
│   ├── Authorisation.jl
│   ├── AuthPlugin.jl
│   ├── install.jl
│   ├── internal
│   │   ├── AuthautoRoutes.jl
│   │   ├── db
│   │   │   ├── migrations
│   │   │   │   ├── 2019052410085235_create_table_users.jl
│   │   │   │   ├── 2021061519495560_create_table_roles.jl
│   │   │   │   ├── 2021061519503270_create_table_permissions.jl
│   │   │   │   ├── 2021061519532446_create_table_roles_users.jl
│   │   │   │   ├── 2021061519540214_create_table_permissions_roles.jl
│   │   │   │   └── 2024010112000000_create_table_bananas.jl
│   │   │   └── seeds
│   │   │       └── AuthSeeds.jl
│   │   ├── helpers
│   │   │   └── AuthenticationViewHelper.jl
│   │   ├── locales
│   │   │   ├── de
│   │   │   │   ├── authentication.toml
│   │   │   │   ├── mailers.toml
│   │   │   │   └── users.toml
│   │   │   ├── en
│   │   │   │   ├── authentication.toml
│   │   │   │   ├── mailers.toml
│   │   │   │   └── users.toml
│   │   │   ├── es
│   │   │   │   ├── authentication.toml
│   │   │   │   ├── mailers.toml
│   │   │   │   └── users.toml
│   │   │   └── fr
│   │   │       ├── authentication.toml
│   │   │       ├── mailers.toml
│   │   │       └── users.toml
│   │   └── resources
│   │       ├── authentication
│   │       │   ├── AuthenticationController.jl
│   │       │   └── views
│   │       │       ├── forgot.jl.html
│   │       │       ├── login.jl.html
│   │       │       ├── register.jl.html
│   │       │       ├── reset.jl.html
│   │       │       └── success.jl.html
│   │       └── users
│   │           ├── UsersController.jl
│   │           ├── Users.jl
│   │           ├── UsersValidator.jl
│   │           └── views
│   │               ├── admin_access_index.jl.html
│   │               ├── admin_permissions_edit.jl.html
│   │               ├── admin_permissions_index.jl.html
│   │               ├── admin_permissions_new.jl.html
│   │               ├── admin_roles_edit.jl.html
│   │               ├── admin_roles_index.jl.html
│   │               ├── admin_roles_new.jl.html
│   │               ├── admin_users_edit.jl.html
│   │               ├── admin_users_index.jl.html
│   │               ├── admin_users_new.jl.html
│   │               ├── edit.jl.html
│   │               └── index.jl.html
│   ├── Mailers.jl
│   └── SearchLightExt.jl
└── test
    └── runtests.jl

This app basically keeps most of the user management in the plugin, so updating is easier. The one how installs it can modify the accounts and admins resources and has some other nice template files to edit.

Installing is simple:

julia> using Genie, AuthPlugin, SearchLight

julia> # Create a new MVC APP with Genie Generator

julia> AuthPlugin.install(@__DIR__; force=true)

julia> SearchLight.Migrations.init()

julia>  AuthPlugin.SearchLightExt.all_up_for!!(AuthPlugin) # run all plugin migrations

julia> AuthPlugin.seed_admin_account!() # create an “admin” user

julia> AuthPlugin.seed_permissions_and_roles!() # populate users/roles/perms

The layout can be modified by adjusting a constant dict using plugins/authplugin.jl in his app.

AuthPlugin.LAYOUT[:user] = "authapp.jl.html" # "authapp_stipple.jl.html"
AuthPlugin.LAYOUT[:admin] = "authapp.jl.html" # "authapp_stipple.jl.html"

and so forth…

I also have a nice bash script for deployment which does basically this (the real script is a little different):

• Local: Prepare Secrets

  • Reads API‐keys and the secret from ~/.bashrc
  • Writes each to ~/.secrets/VAR.txt with 600 perms

• Local: Build & Package

  • Builds a Docker image (thisapp:latest) from the project directory
  • Saves it to thisapp.tar

• Local → Remote: Transfer

  • Uses scp (one‑time SSH login with key) to copy thisapp.tar to server:~/thisapp
  • Also copies the prepared .secrets directory to the remote host

• Remote: Deploy
  Over a single ssh server <<EOF…EOF block it does:

  • cd ~/deploy
  • docker compose down (stop/remove old container)
  • docker rmi -f thisapp (remove old image)
  • docker load -i thisapp.tar && rm thisapp.tar (load new image & delete tar)
  • docker compose up -d (start new container)

• Local: Cleanup

  • Deletes the local thisapp.tar

---

But I do believe that having a ready container where you only need to define a new Stipple app and can adjust other pages via a pagebuilder like in Wordpress is easier for most. And this is where your new package might be handy.

Then one just needs to have a docker file like this (untested) in a folder and the respective Caddyfile:

services:
  web:
    image: genieframework:latest
    container_name: genieframework
    restart: always
    environment:
      GENIE_ENV: prod
    volumes:
      - genie_db:/app/db/prod.sqlite3
      #- geniedata ?
    secrets:
      - genie_secret
      - openai_api_key

  caddy:
    image: caddy:latest
    container_name: caddy
    restart: always
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./Caddyfile:/etc/caddy/Caddyfile:ro
      - caddy_data:/data
      - caddy_config:/config

secrets:
  genie_secret:
    file: /home/thisuser/.secrets/GENIE_SECRET.txt
  openai_api_key:
    file: /home/thisuser/.secrets/OPENAI_API_KEY.txt

volumes:
  db:
  #geniedata: ?
  caddy_data:
  caddy_config:

thiswebsite.de {
    reverse_proxy web:8000
    header {
        Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
    }
    tls max.mustermann@musterdomain.de
}

and one has just to do:

cd ~/genieapp
docker compose up -d

But this is kind of a whole new product based on the Framework and needs much time to be implemented.

Here are some screenshots. I know that the design could be better… but it’s work in progress.