From c1272788f011dfac20f1b2f2b21fbc074e8f8f81 Mon Sep 17 00:00:00 2001 From: evilchili Date: Sun, 12 Oct 2025 15:36:38 -0700 Subject: [PATCH] web ui checkpoint --- src/ttfrog/app.py | 5 +- src/ttfrog/bootstrap.py | 71 ++++++++ src/ttfrog/themes/default/base.html | 33 ++-- src/ttfrog/themes/default/breadcrumbs.html | 6 +- src/ttfrog/themes/default/page.html | 50 ++++-- src/ttfrog/themes/default/static/site.css | 199 ++++++++++++++++----- src/ttfrog/themes/default/static/theme.css | 21 +++ src/ttfrog/web.py | 35 ++-- 8 files changed, 333 insertions(+), 87 deletions(-) create mode 100644 src/ttfrog/bootstrap.py create mode 100644 src/ttfrog/themes/default/static/theme.css diff --git a/src/ttfrog/app.py b/src/ttfrog/app.py index 341ed24..90a21cd 100644 --- a/src/ttfrog/app.py +++ b/src/ttfrog/app.py @@ -96,15 +96,16 @@ VIEW_URI=/ schema, self.path.database, sort_keys=True, indent=4, separators=(",", ": ") ) - self.theme = Path(__file__).parent / "themes" / "default" + self.theme = Path(__file__).parent / "themes" / self.config.THEME - self.web = Flask(self.config.NAME, template_folder=self.theme) + self.web = Flask(self.config.NAME, template_folder=self.theme, static_folder=self.theme / 'static') self.web.config["SECRET_KEY"] = self.config.SECRET_KEY self.web.config["SEND_FILE_MAX_AGE_DEFAULT"] = 0 self.web.config["DEBUG"] = True self.web.config["SESSION_TYPE"] = "filesystem" self.web.config["SESSION_REFRESH_EACH_REQUEST"] = True self.web.config["SESSION_FILE_DIR"] = self.path.sessions + Session(self.web) self._initialized = True diff --git a/src/ttfrog/bootstrap.py b/src/ttfrog/bootstrap.py new file mode 100644 index 0000000..48d3103 --- /dev/null +++ b/src/ttfrog/bootstrap.py @@ -0,0 +1,71 @@ +from ttfrog import app, schema + +TEMPLATE = """ +# Heading 1 + +## Heading 2 + +### Heading 3 + +#### Heading 4 + +##### Heading 5 + +###### Heading 6 + +*** + +Normal text. +**Bold text.** +*Italic Text.* +[A link](/). + +1. a +2. numbered +3. list. + +> a block quote + +| A | Table | Section | +| --- | ----- | ------- | +| foo | bar | baz | + +""" + + +def bootstrap(): + """ + Bootstrap the database entries by populating the first Page, the Admin user and the Admins group. + """ + app.check_state() + + # create the top-level pages + root = app.db.save(schema.Page(name=app.config.VIEW_URI, title="Home", body="This is the home page")) + + users = root.add_member(schema.Page(name="User", title="Users", body="users go here.")) + groups = root.add_member(schema.Page(name="Group", title="Groups", body="groups go here.")) + npcs = root.add_member(schema.Page(name="NPC", title="NPCS!", body="NPCS!")) + wiki = root.add_member(schema.Page(name="Wiki", title="Wiki", body=TEMPLATE)) + + # create the NPCs + npcs.add_member(schema.NPC(name="Sabetha", body="")) + npcs.add_member(schema.NPC(name="John", body="")) + + # create the users + guest = users.add_member(schema.User(name="guest")) + admin = users.add_member( + schema.User(name=app.config.ADMIN_USERNAME, password="fnord", email=app.config.ADMIN_EMAIL) + ) + + # create the admin user and admins group + admins = groups.add_member(schema.Group(name="administrators", members=[admin])) + + # admins get full access + root.set_permissions( + admins, permissions=[schema.Permissions.READ, schema.Permissions.WRITE, schema.Permissions.DELETE] + ) + + # guests get read access by default, except on Groups and Users + groups.set_permissions(guest, permissions=[]) + users.set_permissions(guest, permissions=[]) + root.set_permissions(guest, permissions=[schema.Permissions.READ]) diff --git a/src/ttfrog/themes/default/base.html b/src/ttfrog/themes/default/base.html index d52ecc4..1aa379d 100644 --- a/src/ttfrog/themes/default/base.html +++ b/src/ttfrog/themes/default/base.html @@ -13,23 +13,26 @@ -
- {% block nav %} - {% include "nav.html" %} - {% endblock %} - {% for message in g.messages %} -
- {{ message }} -
- {% endfor %} - {% block content %}{% endblock %} -
- - +
+
+ {% for message in g.messages %} +
+ {{ message }} +
+ {% endfor %} + {% block content %}{% endblock %} +
+
+ + {% block scripts %}{% endblock %} diff --git a/src/ttfrog/themes/default/breadcrumbs.html b/src/ttfrog/themes/default/breadcrumbs.html index f3644c1..819d4b7 100644 --- a/src/ttfrog/themes/default/breadcrumbs.html +++ b/src/ttfrog/themes/default/breadcrumbs.html @@ -1,3 +1,7 @@ -
+ diff --git a/src/ttfrog/themes/default/page.html b/src/ttfrog/themes/default/page.html index a70cf41..db34764 100644 --- a/src/ttfrog/themes/default/page.html +++ b/src/ttfrog/themes/default/page.html @@ -5,14 +5,9 @@ {% endblock %} {% block content %} -
- -

-{% include "breadcrumbs.html" %} - -
- -
+ {% include "breadcrumbs.html" %} +
+
{% endblock %} @@ -20,15 +15,46 @@ {% block scripts %} {% endblock %} diff --git a/src/ttfrog/themes/default/static/site.css b/src/ttfrog/themes/default/static/site.css index 3fc4a25..2641f3f 100644 --- a/src/ttfrog/themes/default/static/site.css +++ b/src/ttfrog/themes/default/static/site.css @@ -1,22 +1,105 @@ +@import "theme.css"; + html { - height:100%; padding: 0px; - margin: 0px; + margin: 0px; + height: 100vh; + box-sizing: border-box; +} +body { + font-family: var(--default-font-family); + font-size: var(--default-font-size); + height: inherit; + width: 100%; + margin: 0px; + box-sizing: border-box; + overflow-wrap: break-word; + overflow-y: scroll; + scrollbar-gutter: stable; } -body { - display: block; - margin: 0px 20px; - font-family: sans-serif; - width: calc(100%; - 20px); - height: 100%; +h1, .toastui-editor-contents h1 { + font-size: var(--h1-size) !important; + font-weight: var(--header-weight) !important; + font-family: var(--header-font) !important; + text-decoration: inherit !important; + font-variant: inherit !important; + border: none !important; + margin: initial !important; + line-height: initial !important; + padding: initial !important; } + +h2, .toastui-editor-contents h2 { + font-size: var(--h2-size) !important; + font-weight: var(--header2-weight) !important; + font-family: var(--header-font) !important; + text-decoration: inherit !important; + font-variant: inherit !important; + border: none !important; + margin: initial !important; + line-height: initial !important; + padding: initial !important; +} + + +h3, .toastui-editor-contents h3 { + font-size: var(--h3-size) !important; + font-weight: var(--header3-weight) !important; + font-family: var(--header-font) !important; + text-decoration: inherit !important; + font-variant: inherit !important; + border: none !important; + margin: initial !important; + line-height: initial !important; + padding: initial !important; +} + + +h4, .toastui-editor-contents h4 { + font-size: var(--h4-size) !important; + font-weight: var(--header4-weight) !important; + font-family: var(--header-font) !important; + text-decoration: inherit !important; + font-variant: inherit !important; + border: none !important; + margin: initial !important; + line-height: initial !important; + padding: initial !important; +} + + +h5, .toastui-editor-contents h5 { + font-size: var(--h5-size) !important; + font-weight: var(--header5-weight) !important; + font-family: var(--header-font) !important; + text-decoration: inherit !important; + font-variant: inherit !important; + border: none !important; + margin: initial !important; + line-height: initial !important; + padding: initial !important; +} + + +h6, .toastui-editor-contents h6 { + font-size: var(--h6-size) !important; + font-weight: var(--header6-weight) !important; + font-family: var(--header-font) !important; + text-decoration: inherit !important; + font-variant: inherit !important; + border: none !important; + margin: initial !important; + line-height: initial !important; + padding: initial !important; +} + + a {text-decoration: none;} -.container { +nav ul.container { margin: auto; - width: 100%; } ul { @@ -27,10 +110,11 @@ ul { } nav { + display: block; + margin: 0px; + padding: 0px; + height: var(--nav-height); background: #0ca0d6; - font-size: 0; - position: relative; - } nav > ul > li { @@ -91,52 +175,87 @@ nav > ul > li:hover > a { } -.breadcrumbs { - font-size: 14px; - margin-bottom: 10px; -} - -main { - display: table; - width: 100%; - height: 100%; +#breadcrumbs { + height: var(--breadcrumbs-height); + border-bottom: 1px dotted #DEDEDE; } #data_form { display: none; } -main h1 { - padding: 0px; - margin: 0px; -} -main h1 > input { - border: none; - font-size: inherit; - font-weight: inherit; - width: 100%; - border-bottom: 1px dotted #000; - margin-bottom: 0px; +#editor { + display: none; } -#editor_form { - display: table; - width: 100%; -} - -#page_body { +#viewer { display: inline; } +#actions { + display: flex; + float: right; +} + +#actions > a { + display: flex; + border: 1px solid black; + border-radius: 5px; + padding: 5px; + background: #FFF; + color: blue; + cursor: pointer; + margin-left: 5px; + +} +#actions a:hover { + color: white; + background: blue; +} + + +.table-wrapper { + padding: 0px; + padding-top: var(--wrapper-padding); + display: table; + margin: auto; + width: var(--max-width); + max-width: 960px; +} + +main { + display: table-row; + height: var(--main-height); +} + +footer { + display: block; + position: relative; + bottom: 100vh - var(--footer-height); + height: var(--footer-height); + background-color: #DEDEDE; +} .toastui-editor-main-container { display: contents; } +.toastui-editor, +.toastui-editor-main, +.toastui-editor-md-container, .toastui-editor-defaultUI, -.toastui-editor-contents { +.toastui-editor-contents, +.toastui-editor-ww-mode, +.toastui-editor-md-preview, +.toastui-editor-md, +.ProseMirror { border: 0px !important; padding: 0px !important; margin: 0px !important; + font-size: var(--default-font-size) !important; + font-family: var(--default-font-family) !important; } +menu { + display: none; +} diff --git a/src/ttfrog/themes/default/static/theme.css b/src/ttfrog/themes/default/static/theme.css new file mode 100644 index 0000000..e9eba74 --- /dev/null +++ b/src/ttfrog/themes/default/static/theme.css @@ -0,0 +1,21 @@ +:root { + /* Typography */ + --default-font-family: sans-serif; + --default-font-size: 16px; + --header-font: sans-serif; + --header-weight: 700; + --h1-size: 32px; + --h2-size: 24px; + --h3-size: 18.72px; + --h4-size: 16px; + --h5-size: 13.28px; + --h6-size: 10.72px; + + /* Layout */ + --nav-height: 50px; + --footer-height: 150px; + --breadcrumbs-height: 50px; + --wrapper-padding: 20px; + --main-height: calc(100vh - var(--nav-height) - var(--footer-height) - var(--breadcrumbs-height) + var(--wrapper-padding)); + --max-width: calc(100vw - 20px); +} diff --git a/src/ttfrog/web.py b/src/ttfrog/web.py index c8e9b43..9d40569 100644 --- a/src/ttfrog/web.py +++ b/src/ttfrog/web.py @@ -3,8 +3,6 @@ from tinydb import where from ttfrog import app, forms, schema -STATIC = ["static"] - def relative_uri(path: str = ""): """ @@ -23,12 +21,12 @@ def get_parent(table: str, uri: str): return get_page(parent_uri, table=table if "/" in parent_uri else "Page", create_okay=False) -def get_page(path: str = "", table: str = "Page", create_okay: bool = False): +def get_page(path: str, table: str = "Page", create_okay: bool = False): """ Get one page, including its members, but not recursively. """ - uri = path.strip("/") or relative_uri(request.path) - app.web.logger.debug(f"Need a page in {table} for {uri = }") + uri = relative_uri(path) + if table not in app.db.tables(): return None @@ -58,29 +56,31 @@ def get_page(path: str = "", table: str = "Page", create_okay: bool = False): def rendered(page: schema.Record, template: str = "page.html"): if not page: return Response("Page not found", status=404) - return render_template(template, page=page, app=app, breadcrumbs=breadcrumbs(), user=session["user"], g=g) - -def get_static(path): - return Response("OK", status=200) + return render_template( + template, + page=page, + app=app, + breadcrumbs=breadcrumbs(), + root=g.root, + user=g.user, + g=g + ) def breadcrumbs(): """ Return (uri, name) pairs for the parents leading from the VIEW_URI to the current request. """ - if app.config.VIEW_URI != "/": - root = get_page() - yield (app.config.VIEW_URI, root.name) uri = "" for name in relative_uri().split("/"): - uri = "/".join([uri, name]).lstrip("/") + uri = "/".join([uri, name]) yield (uri, name) -@app.web.route("/") +@app.web.route(app.config.VIEW_URI) def index(): - return rendered(get_page(create_okay=False)) + return rendered(get_page(app.config.VIEW_URI, create_okay=False)) @app.web.route("/login", methods=["GET", "POST"]) @@ -94,7 +94,6 @@ def login(): g.user = user session["user_id"] = g.user.doc_id session["user"] = dict(g.user.serialize()) - app.web.logger.debug(f"Session for {user.name} ({user.doc_id}) started.") return redirect(url_for("index")) g.messages.append(f"Invalid login for {username}") return rendered(schema.Page(name="Login", title="Please enter your login details"), "login.html") @@ -112,7 +111,8 @@ def logout(): @app.web.route(f"{app.config.VIEW_URI}/", methods=["GET"], defaults={"table": "Page"}) def view(table, path): parent = get_parent(table, relative_uri()) - return rendered(get_page(request.path, table=table, create_okay=(parent and parent.doc_id is not None))) + page = get_page(request.path, table=table, create_okay=(parent and parent.doc_id is not None)) + return rendered(page) @app.web.route(f"{app.config.VIEW_URI}//", methods=["POST"]) @@ -146,6 +146,7 @@ def before_request(): g.user = app.db.User.get(doc_id=user_id) session["user_id"] = user_id session["user"] = dict(g.user.serialize()) + g.root = get_page(app.config.VIEW_URI) @app.web.after_request