fix subscription unread count calculation

.dockerignore

@@ -4,3 +4,5 @@
 data/db/*
 data/static/avatars/*
 !data/static/avatars/default.webp
+
+.local/

.env

@@ -0,0 +1 @@
+FLASK_SECRET_KEY=dev_test

.gitignore

@@ -4,3 +4,7 @@
 data/db/*
 data/static/avatars/*
 !data/static/avatars/default.webp
+
+config/secrets.prod.env
+
+.local/

Dockerfile

@@ -5,11 +5,11 @@ RUN apt-get update && apt-get install -y \
     uwsgi \
     uwsgi-plugin-python3 \
     sqlite3 \
-    libargon2 \
+    libargon2-1 \
     imagemagick \
     && rm -rf /var/lib/apt/lists/*
 
-RUN python -m venv /opt/venv
+RUN python -m venv --system-site-packages /opt/venv
 ENV PATH="/opt/venv/bin:$PATH"
 
 WORKDIR /app

LICENSE.md

@@ -0,0 +1,483 @@
+THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS
+COOPERATIVE NON-VIOLENT PUBLIC LICENSE (\"LICENSE\"). THE WORK IS
+PROTECTED BY COPYRIGHT AND ALL OTHER APPLICABLE LAWS. ANY USE OF THE
+WORK OTHER THAN AS AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS
+PROHIBITED. BY EXERCISING ANY RIGHTS TO THE WORK PROVIDED IN THIS
+LICENSE, YOU AGREE TO BE BOUND BY THE TERMS OF THIS LICENSE. TO THE
+EXTENT THIS LICENSE MAY BE CONSIDERED TO BE A CONTRACT, THE LICENSOR
+GRANTS YOU THE RIGHTS CONTAINED HERE IN AS CONSIDERATION FOR ACCEPTING
+THE TERMS AND CONDITIONS OF THIS LICENSE AND FOR AGREEING TO BE BOUND BY
+THE TERMS AND CONDITIONS OF THIS LICENSE.
+
+# Definitions
+
+An Act of War is any action of one country against any group either with
+an intention to provoke a conflict or an action that occurs during a
+declared war or during armed conflict between military forces of any
+origin. This includes but is not limited to enforcing sanctions or
+sieges, supplying armed forces, or profiting from the manufacture of
+tools or weaponry used in military conflict.
+
+An Adaptation is a work based upon the Work, or upon the Work and other
+pre-existing works, such as a translation, adaptation, derivative work,
+arrangement of music or other alterations of a literary or artistic
+work, or phonogram or performance and includes cinematographic
+adaptations or any other form in which the Work may be recast,
+transformed, or adapted including in any form recognizably derived from
+the original, except that a work that constitutes a Collection will not
+be considered an Adaptation for the purpose of this License. For the
+avoidance of doubt, where the Work is a musical work, performance or
+phonogram, the synchronization of the Work in timed-relation with a
+moving image (\"synching\") will be considered an Adaptation for the
+purpose of this License. In addition, where the Work is designed to
+output a neural network the output of the neural network will be
+considered an Adaptation for the purpose of this license.
+
+Bodily Harm is any physical hurt or injury to a person that interferes
+with the health or comfort of the person and that is more than merely
+transient or trifling in nature.
+
+Distribute is to make available to the public the original and copies of
+the Work or Adaptation, as appropriate, through sale, gift or any other
+transfer of possession or ownership.
+
+Incarceration is Confinement in a jail, prison, or any other place where
+individuals of any kind are held against either their will or (if their
+will cannot be determined) the will of their legal guardian or
+guardians. In the case of a conflict between the will of the individual
+and the will of their legal guardian or guardians, the will of the
+individual will take precedence.
+
+Licensor is The individual, individuals, entity, or entities that
+offer(s) the Work under the terms of this License
+
+Original Author is in the case of a literary or artistic work, the
+individual, individuals, entity or entities who created the Work or if
+no individual or entity can be identified, the publisher; and in
+addition
+
+-   in the case of a performance the actors, singers, musicians,
+    dancers, and other persons who act, sing, deliver, declaim, play in,
+    interpret or otherwise perform literary or artistic works or
+    expressions of folklore;
+
+-   in the case of a phonogram the producer being the person or legal
+    entity who first fixes the sounds of a performance or other sounds;
+    and,
+
+-   in the case of broadcasts, the organization that transmits the
+    broadcast.
+
+Work is the literary and/or artistic work offered under the terms of
+this License including without limitation any production in the
+literary, scientific and artistic domain, whatever may be the mode or
+form of its expression including digital form, such as a book, pamphlet
+and other writing; a lecture, address, sermon or other work of the same
+nature; a dramatic or dramatico-musical work; a choreographic work or
+entertainment in dumb show; a musical composition with or without words;
+a cinematographic work to which are assimilated works expressed by a
+process analogous to cinematography; a work of drawing, painting,
+architecture, sculpture, engraving or lithography; a photographic work
+to which are assimilated works expressed by a process analogous to
+photography; a work of applied art; an illustration, map, plan, sketch
+or three-dimensional work relative to geography, topography,
+architecture or science; a performance; a broadcast; a phonogram; a
+compilation of data to the extent it is protected as a copyrightable
+work; or a work performed by a variety or circus performer to the extent
+it is not otherwise considered a literary or artistic work.
+
+You means an individual or entity exercising rights under this License
+who has not previously violated the terms of this License with respect
+to the Work, or who has received express permission from the Licensor to
+exercise rights under this License despite a previous violation.
+
+Publicly Perform means to perform public recitations of the Work and to
+communicate to the public those public recitations, by any means or
+process, including by wire or wireless means or public digital
+performances; to make available to the public Works in such a way that
+members of the public may access these Works from a place and at a place
+individually chosen by them; to perform the Work to the public by any
+means or process and the communication to the public of the performances
+of the Work, including by public digital performance; to broadcast and
+rebroadcast the Work by any means including signs, sounds or images.
+
+Reproduce is to make copies of the Work by any means including without
+limitation by sound or visual recordings and the right of fixation and
+reproducing fixations of the Work, including storage of a protected
+performance or phonogram in digital form or other electronic medium.
+
+Software is any digital Work which, through use of a third-party piece
+of Software or through the direct usage of itself on a computer system,
+the memory of the computer is modified dynamically or semi-dynamically.
+\"Software\", secondly, processes or interprets information.
+
+Source Code is Any digital Work which, through use of a third-party
+piece of Software or through the direct usage of itself on a computer
+system, the memory of the computer is modified dynamically or
+semi-dynamically. \"Software\", secondly, processes or interprets
+information.
+
+Surveilling is the use of the Work to either overtly or covertly observe
+and record persons and or their activities.
+
+A Network Service is the use of a piece of Software to interpret or
+modify information that is subsequently and directly served to users
+over the Internet.
+
+To Discriminate is use of a work to differentiate between humans in a
+such a way which prioritizes some above others on the basis of percieved
+membership within certain groups.
+
+Hate Speech is Communication or any form of expression which is solely
+for the purpose of expressing hatred for some group or advocating a form
+of Discrimination between humans.
+
+Coercion is leveraging of the threat of force or use of force to
+intimidate a person in order to gain compliance, or to offer large
+incentives which aim to entice a person to act against their will.
+
+# Fair Dealing Rights
+
+Nothing in this License is intended to reduce, limit, or restrict any
+uses free from copyright or rights arising from limitations or
+exceptions that are provided for in connection with the copyright
+protection under copyright law or other applicable laws.
+
+# License Grant
+
+Subject to the terms and conditions of this License, Licensor hereby
+grants You a worldwide, royalty-free, non-exclusive, perpetual (for the
+duration of the applicable copyright) license to exercise the rights in
+the Work as stated below:
+
+To Reproduce the Work, to incorporate the Work into one or more
+Collections, and to Reproduce the Work as incorporated in the
+Collections
+
+To create and Reproduce Adaptations provided that any such Adaptation,
+including any translation in any medium, takes reasonable steps to
+clearly label, demarcate or otherwise identify that changes were made to
+the original Work. For example, a translation could be marked \"The
+original work was translated from English to Spanish,\" or a
+modification could indicate \"The original work has been modified.\"
+
+To Distribute and Publicly Perform the Work including as incorporated in
+Collections.
+
+To Distribute and Publicly Perform Adaptations. The above rights may be
+exercised in all media and formats whether now known or hereafter
+devised. The above rights include the right to make such modifications
+as are technically necessary to exercise the rights in other media and
+formats. This License constitutes the entire agreement between the
+parties with respect to the Work licensed here. There are no
+understandings, agreements or representations with respect to the Work
+not specified here. Licensor shall not be bound by any additional
+provisions that may appear in any communication from You. This License
+may not be modified without the mutual written agreement of the Licensor
+and You. All rights not expressly granted by Licensor are hereby
+reserved, including but not limited to the rights set forth in
+Non-waivable Compulsory License Schemes, Waivable Compulsory License
+Schemes, and Voluntary License Schemes in the restrictions.
+
+# Restrictions
+
+The license granted in the license grant above is expressly made subject
+to and limited by the following restrictions:
+
+You may Distribute or Publicly Perform the Work only under the terms of
+this License. You must include a copy of, or the Uniform Resource
+Identifier (URI) for, this License with every copy of the Work You
+Distribute or Publicly Perform. You may not offer or impose any terms on
+the Work that restrict the terms of this License or the ability of the
+recipient of the Work to exercise the rights granted to that recipient
+under the terms of the License. You may not sublicense the Work. You
+must keep intact all notices that refer to this License and to the
+disclaimer of warranties with every copy of the Work You Distribute or
+Publicly Perform. When You Distribute or Publicly Perform the Work, You
+may not impose any effective technological measures on the Work that
+restrict the ability of a recipient of the Work from You to exercise the
+rights granted to that recipient under the terms of the License. This
+Section applies to the Work as incorporated in a Collection, but this
+does not require the Collection apart from the Work itself to be made
+subject to the terms of this License. If You create a Collection, upon
+notice from any Licensor You must, to the extent practicable, remove
+from the Collection any credit as requested. If You create an
+Adaptation, upon notice from any Licensor You must, to the extent
+practicable, remove from the Adaptation any credit as requested.
+
+## Commercial Restrictions
+
+You may not exercise any of the rights granted to You in the above
+section in any manner that is primarily intended for or directed toward
+commercial advantage or private monetary compensation unless you meet
+the following requirements.
+
+i.  You are a worker-owned business or worker-owned collective.
+
+ii. after tax, all financial gain, surplus, profits and benefits
+    produced by the business or collective are distributed among the
+    worker-owners unless a set amount is to be allocated towards
+    community projects as decided by a previously-established consensus
+    agreement between the worker-owners where all worker-owners agreed.
+
+iii. You are not using such rights on behalf of a business other than
+     those specified in (i) or (ii) above, nor are using such rights as
+     a proxy on behalf of a business with the intent to circumvent the
+     aforementioned restrictions on such a business.
+
+The exchange of the Work for other copyrighted works by means of digital
+file-sharing or otherwise shall not be considered to be intended for or
+directed toward commercial advantage or private monetary compensation,
+provided there is no payment of any monetary compensation in connection
+with the exchange of copyrighted works.
+
+If the Work meets the definition of Software, You may exercise the
+rights granted in the license grant only if You provide a copy of the
+corresponding Source Code from which the Work was derived in digital
+form, or You provide a URI for the corresponding Source Code of the
+Work, to any recipients upon request.
+
+If the Work is used as or for a Network Service, You may exercise the
+rights granted in the license grant only if You provide a copy of the
+corresponding Source Code from which the Work was derived in digital
+form, or You provide a URI for the corresponding Source Code to the
+Work, to any recipients of the data served or modified by the Web
+Service.
+
+Any use by a business that is privately owned and managed, and that
+seeks to generate profit from the labor of employees paid by salary or
+other wages, is not permitted under this license.
+
+## 
+
+You may exercise the rights granted in the license grant for any
+purposes only if:
+
+i.  You do not use the Work for the purpose of inflicting Bodily Harm on
+    human beings (subject to criminal prosecution or otherwise) outside
+    of providing medical aid or undergoing a voluntary procedure under
+    no form of Coercion.
+
+ii. You do not use the Work for the purpose of Surveilling or tracking
+    individuals for financial gain.
+
+iii. You do not use the Work in an Act of War.
+
+iv. You do not use the Work for the purpose of supporting or profiting
+    from an Act of War.
+
+v.  You do not use the Work for the purpose of Incarceration.
+
+vi. You do not use the Work for the purpose of extracting, processing,
+    or refining, oil, gas, or coal. Or to in any other way to
+    deliberately pollute the environment as a byproduct of manufacturing
+    or irresponsible disposal of hazardous materials.
+
+vii. You do not use the Work for the purpose of expediting,
+     coordinating, or facilitating paid work undertaken by individuals
+     under the age of 12 years.
+
+viii. You do not use the Work to either Discriminate or spread Hate
+      Speech on the basis of sex, sexual orientation, gender identity,
+      race, age, disability, color, national origin, religion, caste, or
+      lower economic status.
+
+## 
+
+If You Distribute, or Publicly Perform the Work or any Adaptations or
+Collections, You must, unless a request has been made by any Licensor to
+remove credit from a Collection or Adaptation, keep intact all copyright
+notices for the Work and provide, reasonable to the medium or means You
+are utilizing:
+
+i.  the name of the Original Author (or pseudonym, if applicable) if
+    supplied, and/or if the Original Author and/or Licensor designate
+    another party or parties (e.g., a sponsor institute, publishing
+    entity, journal) for attribution (\"Attribution Parties\") in
+    Licensor\'s copyright notice, terms of service or by other
+    reasonable means, the name of such party or parties;
+
+ii. the title of the Work if supplied;
+
+iii. to the extent reasonably practicable, the URI, if any, that
+     Licensor to be associated with the Work, unless such URI does not
+     refer to the copyright notice or licensing information for the
+     Work; and,
+
+iv. in the case of an Adaptation, a credit identifying the use of the
+    Work in the Adaptation (e.g., \"French translation of the Work by
+    Original Author,\" or \"Screenplay based on original Work by
+    Original Author\").
+
+If any Licensor has sent notice to request removing credit, You must, to
+the extent practicable, remove any credit as requested. The credit
+required by this Section may be implemented in any reasonable manner;
+provided, however, that in the case of an Adaptation or Collection, at a
+minimum such credit will appear, if a credit for all contributing
+authors of the Adaptation or Collection appears, then as part of these
+credits and in a manner at least as prominent as the credits for the
+other contributing authors. For the avoidance of doubt, You may only use
+the credit required by this Section for the purpose of attribution in
+the manner set out above and, by exercising Your rights under this
+License, You may not implicitly or explicitly assert or imply any
+connection with, sponsorship or endorsement by the Original Author,
+Licensor and/or Attribution Parties, as appropriate, of You or Your use
+of the Work, without the separate, express prior written permission of
+the Original Author, Licensor and/or Attribution Parties.
+
+Non-waivable Compulsory License Schemes. In those jurisdictions in which
+the right to collect royalties through any statutory or compulsory
+licensing scheme cannot be waived, the Licensor reserves the exclusive
+right to collect such royalties for any exercise by You of the rights
+granted under this License
+
+Waivable Compulsory License Schemes. In those jurisdictions in which the
+right to collect royalties through any statutory or compulsory licensing
+scheme can be waived, the Licensor reserves the exclusive right to
+collect such royalties for any exercise by You of the rights granted
+under this License if Your exercise of such rights is for a purpose or
+use which is otherwise than noncommercial as permitted under Commercial
+Restrictions and otherwise waives the right to collect royalties through
+any statutory or compulsory licensing scheme.
+
+Voluntary License Schemes. The Licensor reserves the right to collect
+royalties, whether individually or, in the event that the Licensor is a
+member of a collecting society that administers voluntary licensing
+schemes, via that society, from any exercise by You of the rights
+granted under this License that is for a purpose or use which is
+otherwise than noncommercial as permitted under the license grant.
+
+Except as otherwise agreed in writing by the Licensor or as may be
+otherwise permitted by applicable law, if You Reproduce, Distribute or
+Publicly Perform the Work either by itself or as part of any Adaptations
+or Collections, You must not distort, mutilate, modify or take other
+derogatory action in relation to the Work which would be prejudicial to
+the Original Author\'s honor or reputation. Licensor agrees that in
+those jurisdictions (e.g. Japan), in which any exercise of the right
+granted in the license grant of this License (the right to make
+Adaptations) would be deemed to be a distortion, mutilation,
+modification or other derogatory action prejudicial to the Original
+Author\'s honor and reputation, the Licensor will waive or not assert,
+as appropriate, this Section, to the fullest extent permitted by the
+applicable national law, to enable You to reasonably exercise Your right
+under the license grant of this License (right to make Adaptations) but
+not otherwise.
+
+Do not make any legal claim against anyone accusing the Work, with or
+without changes, alone or with other works, of infringing any patent
+claim.
+
+# Representations Warranties and Disclaimer
+
+UNLESS OTHERWISE MUTUALLY AGREED TO BY THE PARTIES IN WRITING, LICENSOR
+OFFERS THE WORK AS-IS AND MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY
+KIND CONCERNING THE WORK, EXPRESS, IMPLIED, STATUTORY OR OTHERWISE,
+INCLUDING, WITHOUT LIMITATION, WARRANTIES OF TITLE, MERCHANTIBILITY,
+FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE ABSENCE OF
+LATENT OR OTHER DEFECTS, ACCURACY, OR THE PRESENCE OF ABSENCE OF ERRORS,
+WHETHER OR NOT DISCOVERABLE. SOME JURISDICTIONS DO NOT ALLOW THE
+EXCLUSION OF IMPLIED WARRANTIES, SO SUCH EXCLUSION MAY NOT APPLY TO YOU.
+
+# Limitation on Liability
+
+EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE LAW, IN NO EVENT WILL
+LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR ANY SPECIAL,
+INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES ARISING OUT OF
+THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS BEEN ADVISED
+OF THE POSSIBILITY OF SUCH DAMAGES.
+
+# Termination
+
+This License and the rights granted hereunder will terminate
+automatically upon any breach by You of the terms of this License.
+Individuals or entities who have received Adaptations or Collections
+from You under this License, however, will not have their licenses
+terminated provided such individuals or entities remain in full
+compliance with those licenses. The Sections on definitions, fair
+dealing rights, representations, warranties, and disclaimer, limitation
+on liability, termination, and revised license versions will survive any
+termination of this License.
+
+Subject to the above terms and conditions, the license granted here is
+perpetual (for the duration of the applicable copyright in the Work).
+Notwithstanding the above, Licensor reserves the right to release the
+Work under different license terms or to stop distributing the Work at
+any time; provided, however that any such election will not serve to
+withdraw this License (or any other license that has been, or is
+required to be, granted under the terms of this License), and this
+License will continue in full force and effect unless terminated as
+stated above.
+
+# Revised License Versions
+
+This License may receive future revisions in the original spirit of the
+license intended to strengthen This License. Each version of This
+License has an incrementing version number.
+
+Unless otherwise specified like in the below subsection The Licensor has
+only granted this current version of This License for The Work. In this
+case future revisions do not apply.
+
+The Licensor may specify that the latest available revision of This
+License be used for The Work by either explicitly writing so or by
+suffixing the License URI with a \"+\" symbol.
+
+The Licensor may specify that The Work is also available under the terms
+of This License\'s current revision as well as specific future
+revisions. The Licensor may do this by writing it explicitly or
+suffixing the License URI with any additional version numbers each
+separated by a comma.
+
+# Miscellaneous
+
+Each time You Distribute or Publicly Perform the Work or a Collection,
+the Licensor offers to the recipient a license to the Work on the same
+terms and conditions as the license granted to You under this License.
+
+Each time You Distribute or Publicly Perform an Adaptation, Licensor
+offers to the recipient a license to the original Work on the same terms
+and conditions as the license granted to You under this License.
+
+If the Work is classified as Software, each time You Distribute or
+Publicly Perform an Adaptation, Licensor offers to the recipient a copy
+and/or URI of the corresponding Source Code on the same terms and
+conditions as the license granted to You under this License.
+
+If the Work is used as a Network Service, each time You Distribute or
+Publicly Perform an Adaptation, or serve data derived from the Software,
+the Licensor offers to any recipients of the data a copy and/or URI of
+the corresponding Source Code on the same terms and conditions as the
+license granted to You under this License.
+
+If any provision of this License is invalid or unenforceable under
+applicable law, it shall not affect the validity or enforceability of
+the remainder of the terms of this License, and without further action
+by the parties to this agreement, such provision shall be reformed to
+the minimum extent necessary to make such provision valid and
+enforceable.
+
+No term or provision of this License shall be deemed waived and no
+breach consented to unless such waiver or consent shall be in writing
+and signed by the party to be charged with such waiver or consent.
+
+This License constitutes the entire agreement between the parties with
+respect to the Work licensed here. There are no understandings,
+agreements or representations with respect to the Work not specified
+here. Licensor shall not be bound by any additional provisions that may
+appear in any communication from You. This License may not be modified
+without the mutual written agreement of the Licensor and You.
+
+The rights granted under, and the subject matter referenced, in this
+License were drafted utilizing the terminology of the Berne Convention
+for the Protection of Literary and Artistic Works (as amended on
+September 28, 1979), the Rome Convention of 1961, the WIPO Copyright
+Treaty of 1996, the WIPO Performances and Phonograms Treaty of 1996 and
+the Universal Copyright Convention (as revised on July 24, 1971). These
+rights and subject matter take effect in the relevant jurisdiction in
+which the License terms are sought to be enforced according to the
+corresponding provisions of the implementation of those treaty
+provisions in the applicable national law. If the standard suite of
+rights granted under applicable copyright law includes additional rights
+not granted under this License, such additional rights are deemed to be
+included in the License; this License is not intended to restrict the
+license of any rights under applicable law.

README.md

@@ -0,0 +1,63 @@
+# Pyrom
+python/flask port of [porom](https://git.poto.cafe/yagich/porom)
+
+this is now the canonical implementation of porom. it's compatible with the database of porom.
+
+# License
+Released under [CNPLv7+](https://thufie.lain.haus/NPL.html).
+Please read the [full terms](./LICENSE.md) for proper wording.
+
+# installing & first time setup
+## docker (production)
+create `config/secrets.prod.env` according to `config/secrets.prod.env.example`
+
+```bash
+$ docker compose up
+```
+
+- opens port 8080
+- exposes `data/db` and `data/static` for data backup and persistence
+
+make sure to run it in an interactive session the first time, because it will spit out the password to the auto-created admin account.
+
+alternatively, if you already had porom running before, put the db file (`db.prod.sqlite`) in `data/db` and it will Just Work.
+
+## manual (development)
+1. install python >= 3.11, sqlite3, libargon2, and imagemagick & clone repo
+2. create a venv:
+
+```bash
+$ python -m venv .venv
+$ source .venv/bin/activate
+```
+
+3. install requirements:
+
+```bash
+$ pip install -r requirements.txt
+```
+
+4. run dev server:
+
+```bash
+$ python -m app.run
+```
+
+the server will run on localhost:8080. when run for the first time, it will create an admin account and print its credentials to the terminal, so make sure to run this in an interactive session.
+
+press <kbd>Ctrl</kbd>+<kbd>C</kbd> to stop the server.
+
+to deactivate the venv:
+
+```bash
+$ deactivate
+```
+
+when you want to run the server again, make sure to activate the venv first:
+```bash
+$ source .venv/bin/activate
+$ python -m app.run
+```
+
+# icons
+the icons in the `data/static/misc/` folder are by [Gabriele Malaspina](https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license)

THIRDPARTY.md

@@ -0,0 +1,40 @@
+# Acknowledgments
+
+## Flask
+
+URL: https://flask.palletsprojects.com/en/stable/  
+Copyright: `Copyright 2010 Pallets`  
+License: BSD-3-Clause  
+Repo: https://github.com/pallets/flask
+
+## ChicagoFLF
+
+Affected files: [`data/static/fonts/ChicagoFLF.woff2`](./data/static/fonts/ChicagoFLF.woff2)  
+No canonical URL that I could find.  
+Obtained from: https://usemodify.com/fonts/chicago/  
+License: Public Domain  
+Designers:  Susan Kare, Robin Casady  
+
+## Cadman
+
+Affected files: [`data/static/fonts/Cadman_Bold.woff2`](./data/static/fonts/Cadman_Bold.woff2) [`data/static/fonts/Cadman_BoldItalic.woff2`](./data/static/fonts/Cadman_BoldItalic.woff2) [`data/static/fonts/Cadman_Italic.woff2`](./data/static/fonts/Cadman_Italic.woff2) [`data/static/fonts/Cadman_Roman.woff2`](./data/static/fonts/Cadman_Roman.woff2)  
+URL: https://localfonts.eu/shop/cyrillic-script/serbian/serbian-cyrillic-sans-serif/cadman/  
+Copyright: `© 2017-2020 by Paul James Miller. All rights reserved.`  
+License: SIL Open Font License 1.1  
+Designers: Paul James Miller  
+
+## ICONCINO
+
+Affected files: [`data/static/misc/error.svg`](./data/static/misc/error.svg) [`data/static/misc/image.svg`](./data/static/misc/image.svg) [`data/static/misc/info.svg`](./data/static/misc/info.svg) [`data/static/misc/lock.svg`](./data/static/misc/lock.svg) [`data/static/misc/spoiler.svg`](./data/static/misc/spoiler.svg) [`data/static/misc/sticky.svg`](./data/static/misc/sticky.svg) [`data/static/misc/warn.svg`](./data/static/misc/warn.svg)  
+URL: https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license  
+Copyright: Gabriele Malaspina  
+Designers: Gabriele Malaspina  
+License: CC0 1.0/CC BY 4.0  
+CC BY 4.0 compliance: Modified to indicate the URL. Modified size.
+
+## Forumoji
+
+Affected files: everything in [`data/static/emoji`](./data/static/emoji) except [`data/static/emoji/scissors.png`](data/static/emoji/scissors.png)  
+URL: https://gh.vercte.net/forumoji/  
+License: CC0 1.0  
+Designers: lolecksdeehaha; Scratch137; 64lu; stickfiregames; mybearworld (the project has many more contributors, but these are the people whose designs were reproduced here)

app/__init__.py

@@ -1,23 +1,201 @@
-from flask import Flask
+from flask import Flask, session
+from dotenv import load_dotenv
+from .models import Avatars, Users, PostHistory, Posts
+from .auth import digest
+from .routes.users import is_logged_in, get_active_user, get_prefers_theme
+from .routes.threads import get_post_url
+from .constants import (
+    PermissionLevel, permission_level_string,
+    InfoboxKind, InfoboxIcons, InfoboxHTMLClass,
+    REACTION_EMOJI,
+    )
+from .lib.babycode import babycode_to_html, EMOJI, BABYCODE_VERSION
+from datetime import datetime
 import os
+import time
+import secrets
+import tomllib
+
+def create_default_avatar():
+    if Avatars.count() == 0:
+        print("Creating default avatar reference")
+        Avatars.create({
+            "file_path": "/static/avatars/default.webp",
+            "uploaded_at": int(time.time())
+            })
+
+def create_admin():
+    username = "admin"
+    if Users.count({"username": username}) == 0:
+        print("!!!!!Creating admin account!!!!!")
+        password_length = 16
+        password = secrets.token_urlsafe(password_length)
+        hashed = digest(password)
+        Users.create({
+            "username": username,
+            "password_hash": hashed,
+            "permission": PermissionLevel.ADMIN.value,
+        })
+        print(f"!!!!!Administrator account created, use '{username}' as the login and '{password}' as the password. This will only be shown once!!!!!")
+
+def create_deleted_user():
+    username = "DeletedUser"
+    if Users.count({"username": username}) == 0:
+        print("Creating DeletedUser")
+        Users.create({
+            "username": username,
+            "password_hash": "",
+            "permission": PermissionLevel.SYSTEM.value,
+        })
+
+def reparse_posts():
+    from .db import db
+    post_histories = PostHistory.findall([
+        ('markup_language', '=', 'babycode'),
+        ('format_version', 'IS NOT', BABYCODE_VERSION)
+        ])
+    if len(post_histories) == 0:
+        return
+    print('Re-parsing babycode, this may take a while...')
+    with db.transaction():
+        for ph in post_histories:
+            ph.update({
+                'content': babycode_to_html(ph['original_markup']),
+                'format_version': BABYCODE_VERSION,
+                })
+    print('Re-parsing done.')
 
 def create_app():
     app = Flask(__name__)
+    app.config.from_file('../config/pyrom_config.toml', load=tomllib.load, text=False)
 
-    app.config["DB_PATH"] = "data/db/db.sqlite"
+    if os.getenv("PYROM_PROD") is None:
+        app.static_folder = os.path.join(os.path.dirname(__file__), "../data/static")
+        app.debug = True
+        app.config["DB_PATH"] = "data/db/db.dev.sqlite"
+        load_dotenv()
+    else:
+        app.config["DB_PATH"] = "data/db/db.prod.sqlite"
+
+    app.config["SECRET_KEY"] = os.getenv("FLASK_SECRET_KEY")
+
+    app.config['AVATAR_UPLOAD_PATH'] = 'data/static/avatars/'
+    app.config['MAX_CONTENT_LENGTH'] = 1000 * 1000
 
     os.makedirs(os.path.dirname(app.config["DB_PATH"]), exist_ok = True)
+
+    css_dir = 'data/static/css/'
+    allowed_themes = []
+    for f in os.listdir(css_dir):
+        if not os.path.isfile(os.path.join(css_dir, f)):
+            continue
+        theme_name = os.path.splitext(os.path.basename(f))[0]
+        allowed_themes.append(theme_name)
+
+    allowed_themes.sort(key=(lambda x: (x != 'style', x)))
+    app.config['allowed_themes'] = allowed_themes
+
     with app.app_context():
         from .schema import create as create_tables
         from .migrations import run_migrations
         create_tables()
         run_migrations()
 
-    if os.getenv("PYROM_PROD") is None:
-        app.static_folder = os.path.join(os.path.dirname(__file__), "../data/static")
-        app.debug = True
+        create_default_avatar()
+        create_admin()
+        create_deleted_user()
+
+        reparse_posts()
 
     from app.routes.app import bp as app_bp
+    from app.routes.topics import bp as topics_bp
+    from app.routes.threads import bp as threads_bp
+    from app.routes.users import bp as users_bp
+    from app.routes.mod import bp as mod_bp
+    from app.routes.api import bp as api_bp
+    from app.routes.posts import bp as posts_bp
     app.register_blueprint(app_bp)
+    app.register_blueprint(topics_bp)
+    app.register_blueprint(threads_bp)
+    app.register_blueprint(users_bp)
+    app.register_blueprint(mod_bp)
+    app.register_blueprint(api_bp)
+    app.register_blueprint(posts_bp)
+
+    app.config['SESSION_COOKIE_SECURE'] = True
+
+    @app.before_request
+    def make_session_permanent():
+        session.permanent = True
+
+    commit = ""
+    with open('.git/refs/heads/main') as f:
+        commit = f.read().strip()
+
+    @app.context_processor
+    def inject_constants():
+        return {
+            "InfoboxIcons": InfoboxIcons,
+            "InfoboxHTMLClass": InfoboxHTMLClass,
+            "InfoboxKind": InfoboxKind,
+            "PermissionLevel": PermissionLevel,
+            "__commit": commit,
+            "__emoji": EMOJI,
+            "REACTION_EMOJI": REACTION_EMOJI,
+        }
+
+    @app.context_processor
+    def inject_auth():
+        return {"is_logged_in": is_logged_in, "get_active_user": get_active_user, "active_user": get_active_user()}
+
+    @app.context_processor
+    def inject_funcs():
+        return {
+            'get_post_url': get_post_url,
+            'get_prefers_theme': get_prefers_theme,
+        }
+
+    @app.template_filter("ts_datetime")
+    def ts_datetime(ts, format):
+        return datetime.utcfromtimestamp(ts or int(time.time())).strftime(format)
+
+    @app.template_filter("pluralize")
+    def pluralize(subject, num=1, singular = "", plural = "s"):
+        if int(num) == 1:
+            return subject + singular
+
+        return subject + plural
+
+    @app.template_filter("permission_string")
+    def permission_string(term):
+        return permission_level_string(term)
+
+    @app.template_filter('babycode')
+    def babycode_filter(markup):
+        return babycode_to_html(markup)
+
+    @app.template_filter('extract_h2')
+    def extract_h2(content):
+        import re
+        pattern = r'<h2\s+id="([^"]+)"[^>]*>(.*?)<\/h2>'
+        matches = re.findall(pattern, content, re.IGNORECASE | re.DOTALL)
+        return [
+            {'id': id_.strip(), 'text': text.strip()}
+            for id_, text in matches
+        ]
+
+    # this only happens at build time but
+    # build time is when updates are done anyway
+    # sooo... /shrug
+    @app.template_filter('cachebust')
+    def cachebust(subject):
+        return f"{subject}?v={str(int(time.time()))}"
+
+    @app.template_filter('theme_name')
+    def get_theme_name(subject: str):
+        if subject == 'style':
+            return 'Default'
+
+        return f'{subject.removeprefix('theme-').capitalize()} (beta)'
 
     return app

app/auth.py

@@ -2,7 +2,7 @@ from argon2 import PasswordHasher
 
 ph = PasswordHasher()
 
-def hash_password(password):
+def digest(password):
     return ph.hash(password)
 
 def verify(expected, given):

app/constants.py

@@ -0,0 +1,71 @@
+from enum import Enum, IntEnum
+
+class PermissionLevel(Enum):
+    GUEST = 0
+    USER = 1
+    MODERATOR = 2
+    SYSTEM = 3
+    ADMIN = 4
+
+PermissionLevelString = {
+    PermissionLevel.GUEST: 'Guest',
+    PermissionLevel.USER: 'User',
+    PermissionLevel.MODERATOR: 'Moderator',
+    PermissionLevel.SYSTEM: 'System',
+    PermissionLevel.ADMIN: 'Administrator',
+}
+
+REACTION_EMOJI = [
+    'smile',
+    'grin',
+
+    'neutral',
+
+    'wink',
+
+    'frown',
+    'angry',
+
+    'think',
+
+    'sob',
+
+    'surprised',
+
+    'smiletear',
+
+    'tongue',
+
+    'pensive',
+    'weary',
+
+    'imp',
+    'impangry',
+
+    'lobster',
+
+    'scissors',
+]
+
+def permission_level_string(perm):
+    return PermissionLevelString[PermissionLevel(int(perm))]
+
+class InfoboxKind(IntEnum):
+    INFO = 0
+    LOCK = 1
+    WARN = 2
+    ERROR = 3
+
+InfoboxIcons = {
+    InfoboxKind.INFO: "/static/misc/info.svg",
+    InfoboxKind.LOCK: "/static/misc/lock.svg",
+    InfoboxKind.WARN: "/static/misc/warn.svg",
+    InfoboxKind.ERROR: "/static/misc/error.svg",
+}
+
+InfoboxHTMLClass = {
+    InfoboxKind.INFO: "",
+    InfoboxKind.LOCK: "warn",
+    InfoboxKind.WARN: "warn",
+    InfoboxKind.ERROR: "critical",
+}

app/db.py

@@ -4,13 +4,13 @@ from flask import current_app
 
 class DB:
     def __init__(self):
-        self._transaction_depth = 0
         self._connection = None
+        self._transaction_depth = 0
 
 
     @contextmanager
-    def _get_connection(self):
-        if self._connection and self._transaction_depth > 0:
+    def connection(self, in_transaction = False):
+        if self._connection:
             yield self._connection
             return
 
@@ -19,60 +19,43 @@ class DB:
         conn.execute("PRAGMA FOREIGN_KEYS = 1")
 
         try:
+            if in_transaction:
+                self._connection = conn
+                self._transaction_depth += 1
+                conn.execute("BEGIN")
+
             yield conn
+
+            if in_transaction:
+                conn.commit()
+        except Exception:
+            if in_transaction and self._connection:
+                conn.rollback()
         finally:
-            if self._transaction_depth == 0:
-                conn.close()
+            if in_transaction:
+                self._transaction_depth -= 1
+                if self._transaction_depth == 0:
+                    self._connection = None
+                    conn.close()
 
 
     @contextmanager
     def transaction(self):
         """Transaction context."""
-        self.begin()
-        try:
-            yield
-            self.commit()
-        except Exception:
-            self.rollback()
-            raise
-
-
-    def begin(self):
-        """Begins a new transaction."""
-        if self._transaction_depth == 0:
-            if not self._connection:
-                self._connection = sqlite3.connect(current_app.config["DB_PATH"])
-                self._connection.row_factory = sqlite3.Row
-                self._connection.execute("PRAGMA FOREIGN_KEYS = 1")
-            self._connection.execute("BEGIN")
-        self._transaction_depth += 1
-
-
-    def commit(self):
-        """Commits the current transaction."""
-        if self._transaction_depth > 0:
-            self._transaction_depth -= 1
-            if self._transaction_depth == 0:
-                self._connection.commit()
-
-
-    def rollback(self):
-        """Rolls back the current transaction."""
-        if self._transaction_depth > 0:
-            self._transaction_depth = 0
-            self._connection.rollback()
+        with self.connection(in_transaction=True) as conn:
+            yield conn
 
 
     def query(self, sql, *args):
         """Executes a query and returns a list of dictionaries."""
-        with self._get_connection() as conn:
+        with self.connection() as conn:
             rows = conn.execute(sql, args).fetchall()
             return [dict(row) for row in rows]
 
 
     def insert(self, table, columns, *values):
         if isinstance(columns, (list, tuple)):
-            columns = ", ".join(columns)
+            columns = ", ".join([f'"{column}"' for column in columns])
 
         placeholders = ", ".join(["?"] * len(values))
         sql = f"""
@@ -81,7 +64,7 @@ class DB:
             RETURNING *
         """
 
-        with self._get_connection() as conn:
+        with self.connection() as conn:
             result = conn.execute(sql, values).fetchone()
             conn.commit()
             return dict(result) if result else None
@@ -89,14 +72,14 @@ class DB:
 
     def execute(self, sql, *args):
         """Executes a query without returning."""
-        with self._get_connection() as conn:
+        with self.connection() as conn:
             conn.execute(sql, args)
             conn.commit()
 
 
     def fetch_one(self, sql, *args):
         """Grabs the first row of a query."""
-        with self._get_connection() as conn:
+        with self.connection() as conn:
             row = conn.execute(sql, args).fetchone()
             return dict(row) if row else None
 
@@ -104,9 +87,35 @@ class DB:
     class QueryBuilder:
         def __init__(self, table):
             self.table = table
-            self._where = {}
+            self._where = [] # list of tuples
             self._select = "*"
-            self._params = []
+            self._group_by = ""
+            self._order_by = ""
+            self._order_asc = True
+
+
+        def _build_where(self):
+            if not self._where:
+                return "", []
+
+            conditions = []
+            params = []
+            for col, op, val in self._where:
+                conditions.append(f"{col} {op} ?")
+                params.append(val)
+
+            return " WHERE " + " AND ".join(conditions), params
+
+
+        def group_by(self, stmt):
+            self._group_by = stmt
+            return self
+
+
+        def order_by(self, stmt, asc = True):
+            self._order_by = stmt
+            self._order_asc = asc
+            return self
 
 
         def select(self, columns = "*"):
@@ -114,40 +123,47 @@ class DB:
             return self
 
 
-        def where(self, condition):
-            self._where.update(condition)
+        def where(self, condition, operator = "="):
+            if isinstance(condition, dict):
+                for key, value in condition.items():
+                    self._where.append((key, "=", value))
+            elif isinstance(condition, list):
+                for c in condition:
+                    self._where.append(c)
             return self
 
 
         def build_select(self):
             sql = f"SELECT {self._select} FROM {self.table}"
-            if self._where:
-                conditions = " AND ".join(f"{k} = ?" for k in self._where.keys())
-                sql += f" WHERE {conditions}"
-            return sql, list(self._where.values())
+            where_clause, params = self._build_where()
+
+            stmt = sql + where_clause
+
+            if self._group_by:
+                stmt += " GROUP BY " + self._group_by
+
+            if self._order_by:
+                stmt += " ORDER BY " + self._order_by + (" ASC" if self._order_asc else " DESC")
+
+            return stmt, params
 
 
         def build_update(self, data):
             columns = ", ".join(f"{k} = ?" for k in data.keys())
             sql = f"UPDATE {self.table} SET {columns}"
-            if self._where:
-                conditions = " AND ".join(f"{k} = ?" for k in self._where.keys())
-                sql += f" WHERE {conditions}"
-            params = list(data.values()) + list(self._where.values())
-            return sql, params
+            where_clause, where_params = self._build_where()
+            params = list(data.values()) + list(where_params)
+            return sql + where_clause, params
 
 
         def build_delete(self):
             sql = f"DELETE FROM {self.table}"
-            if self._where:
-                conditions = " AND ".join(f"{k} = ?" for k in self._where.keys())
-                sql += f" WHERE {conditions}"
-            return sql, list(self._where.values())
+            where_clause, params = self._build_where()
+            return sql + where_clause, params
 
 
         def first(self):
             sql, params = self.build_select()
-            print(sql, params)
             return db.fetch_one(f"{sql} LIMIT 1", *params)
 
 
@@ -185,6 +201,19 @@ class Model:
         return instance
 
 
+    @classmethod
+    def findall(cls, condition, operator='='):
+        rows = db.QueryBuilder(cls.table)\
+            .where(condition, operator)\
+            .all()
+        res = []
+        for row in rows:
+            instance = cls(cls.table)
+            instance._data = dict(row)
+            res.append(instance)
+        return res
+
+
     @classmethod
     def create(cls, values):
         if not values:
@@ -200,6 +229,23 @@ class Model:
         return None
 
 
+    @classmethod
+    def count(cls, conditions = None):
+        qb = db.QueryBuilder(cls.table).select("COUNT(*) AS c")
+        if conditions is not None:
+            qb.where(conditions)
+
+        result = qb.first()
+        return result["c"] if result else 0
+
+
+    @classmethod
+    def select(cls, sel = "*"):
+        qb = db.QueryBuilder(cls.table).select(sel)
+        result = qb.all()
+        return result if result else []
+
+
     def update(self, data):
         qb = db.QueryBuilder(self.table)\
             .where({"id": self._data["id"]})

app/lib/babycode.py

@@ -0,0 +1,261 @@
+from .babycode_parser import Parser
+from markupsafe import Markup, escape
+import re
+
+BABYCODE_VERSION = 3
+
+NAMED_COLORS = [
+    'black', 'silver', 'gray', 'white', 'maroon', 'red',
+    'purple', 'fuchsia', 'green', 'lime', 'olive', 'yellow',
+    'navy', 'blue', 'teal', 'aqua', 'aliceblue', 'antiquewhite',
+    'aqua', 'aquamarine', 'azure', 'beige', 'bisque', 'black',
+    'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue',
+    'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson',
+    'cyan', 'aqua', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray',
+    'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange',
+    'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray',
+    'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray',
+    'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fuchsia',
+    'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green',
+    'greenyellow', 'grey', 'gray', 'honeydew', 'hotpink', 'indianred',
+    'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen',
+    'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray',
+    'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue',
+    'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'lime', 'limegreen',
+    'linen', 'magenta', 'fuchsia', 'maroon', 'mediumaquamarine', 'mediumblue',
+    'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise',
+    'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite',
+    'navy', 'oldlace', 'olive', 'olivedrab', 'orange', 'orangered',
+    'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip',
+    'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple',
+    'rebeccapurple', 'red', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon',
+    'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue',
+    'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue',
+    'tan', 'teal', 'thistle', 'tomato', 'transparent', 'turquoise',
+    'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen',
+]
+
+def is_tag(e, tag=None):
+    if e is None:
+        return False
+    if isinstance(e, str):
+        return False
+    if e['type'] != 'bbcode':
+        return False
+
+    if tag is None:
+        return True
+
+    return e['name'] == tag
+
+def is_text(e):
+    return isinstance(e, str)
+
+def tag_code(children, attr, surrounding):
+    is_inline = children.find('\n') == -1
+    if is_inline:
+        return f"<code class=\"inline-code\">{children}</code>"
+    else:
+        t = children.strip()
+        button = f"<button type=button class=\"copy-code\" value=\"{t}\">Copy</button>"
+        return f"<pre><span class=\"copy-code-container\">{button}</span><code>{t}</code></pre>"
+
+def tag_list(children):
+    list_body = re.sub(r"  +\n", "<br>", children.strip())
+    list_body = re.sub(r"\n\n+", "\1", list_body)
+    return " ".join([f"<li>{x}</li>" for x in list_body.split("\1") if x])
+
+def tag_color(children, attr, surrounding):
+    hex_re = r"^#?([0-9a-f]{6}|[0-9a-f]{3})$"
+    potential_color = attr.lower().strip()
+
+    if potential_color in NAMED_COLORS:
+        return f"<span style='color: {potential_color};'>{children}</span>"
+
+    m = re.match(hex_re, potential_color)
+    if m:
+        return f"<span style='color: #{m.group(1)};'>{children}</span>"
+
+    # return just the way it was if we can't parse it
+    return f"[color={attr}]{children}[/color]"
+
+def tag_spoiler(children, attr, surrounding):
+    spoiler_name = attr if attr else "Spoiler"
+    content = f"<div class='accordion-content post-accordion-content hidden'>{children}</div>"
+    container = f"""<div class='accordion hidden'><div class='accordion-header'><button type='button' class='accordion-toggle'>+</button><span>{spoiler_name}</span></div>{content}</div>"""
+    return container
+
+def tag_image(children, attr, surrounding):
+    img = f"<img class=\"post-image\" src=\"{attr}\" alt=\"{children}\">"
+    if not is_tag(surrounding[0], 'img'):
+        img = f"<div class=post-img-container>{img}"
+    if not is_tag(surrounding[1], 'img'):
+        img = f"{img}</div>"
+    return img
+
+TAGS = {
+    "b": lambda children, attr, _: f"<strong>{children}</strong>",
+    "i": lambda children, attr, _: f"<em>{children}</em>",
+    "s": lambda children, attr, _: f"<del>{children}</del>",
+    "u": lambda children, attr, _: f"<u>{children}</u>",
+
+    "img": tag_image,
+    "url": lambda children, attr, _: f"<a href={attr}>{children}</a>",
+    "quote": lambda children, attr, _: f"<blockquote>{children}</blockquote>",
+    "code": tag_code,
+    "ul": lambda children, attr, _: f"<ul>{tag_list(children)}</ul>",
+    "ol": lambda children, attr, _: f"<ol>{tag_list(children)}</ol>",
+
+    "big": lambda children, attr, _: f"<span style='font-size: 2rem;'>{children}</span>",
+    "small": lambda children, attr, _: f"<span style='font-size: 0.75rem;'>{children}</span>",
+    "color": tag_color,
+
+    "center": lambda children, attr, _: f"<div style='text-align: center;'>{children}</div>",
+    "right": lambda children, attr, _: f"<div style='text-align: right;'>{children}</div>",
+
+    "spoiler": tag_spoiler,
+}
+
+# [img] is considered block for the purposes of collapsing whitespace,
+# despite being potentially inline (since the resulting <img> tag is inline, but creates a block container around itself and sibling images).
+# [code] has a special case in is_inline().
+INLINE_TAGS = {
+    'b', 'i', 's', 'u', 'color', 'big', 'small', 'url'
+}
+
+def make_emoji(name, code):
+    return f' <img class=emoji src="/static/emoji/{name}.png" alt="{name}" title=":{code}:">'
+
+EMOJI = {
+    'angry': make_emoji('angry', 'angry'),
+
+    '(': make_emoji('frown', '('),
+
+    'D': make_emoji('grin', 'D'),
+
+    'imp': make_emoji('imp', 'imp'),
+
+    'angryimp': make_emoji('impangry', 'angryimp'),
+    'impangry': make_emoji('impangry', 'impangry'),
+
+    'lobster': make_emoji('lobster', 'lobster'),
+
+    '|': make_emoji('neutral', '|'),
+
+    'pensive': make_emoji('pensive', 'pensive'),
+
+    'scissors': make_emoji('scissors', 'scissors'),
+
+    ')': make_emoji('smile', ')'),
+
+    'smiletear': make_emoji('smiletear', 'smiletear'),
+    'crytear': make_emoji('smiletear', 'crytear'),
+
+    ',': make_emoji('sob', ','),
+    'T': make_emoji('sob', 'T'),
+    'cry': make_emoji('sob', 'cry'),
+    'sob': make_emoji('sob', 'sob'),
+
+    'o': make_emoji('surprised', 'o'),
+    'O': make_emoji('surprised', 'O'),
+
+    'hmm': make_emoji('think', 'hmm'),
+    'think': make_emoji('think', 'think'),
+    'thinking': make_emoji('think', 'thinking'),
+
+    'P': make_emoji('tongue', 'P'),
+    'p': make_emoji('tongue', 'p'),
+
+    'weary': make_emoji('weary', 'weary'),
+
+    ';': make_emoji('wink', ';'),
+    'wink': make_emoji('wink', 'wink'),
+}
+
+TEXT_ONLY = ["code"]
+
+def break_lines(text):
+    text = re.sub(r"  +\n", "<br>", text)
+    text = re.sub(r"\n\n+", "<br><br>", text)
+    return text
+
+def is_inline(e):
+    if e is None:
+        return False # i think
+
+    if is_text(e):
+        return True
+
+    if is_tag(e):
+        if is_tag(e, 'code'): # special case, since [code] can be inline OR block
+            return '\n' not in e['children']
+
+        return e['name'] in INLINE_TAGS
+
+    return e['type'] != 'rule'
+
+def should_collapse(text, surrounding):
+    if not isinstance(text, str):
+        return False
+
+    if not text:
+        return True
+
+    if not text.strip() and '\n' not in text:
+        return not is_inline(surrounding[0]) and not is_inline(surrounding[1])
+
+    return False
+
+def babycode_to_html(s):
+    subj = escape(s.strip().replace('\r\n', '\n').replace('\r', '\n'))
+    parser = Parser(subj)
+    parser.valid_bbcode_tags = TAGS.keys()
+    parser.bbcode_tags_only_text_children = TEXT_ONLY
+    parser.valid_emotes = EMOJI.keys()
+
+    uncollapsed = parser.parse()
+    elements = []
+    for i in range(len(uncollapsed)):
+        e = uncollapsed[i]
+        surrounding = (
+            uncollapsed[i - 1] if i-1 >= 0 else None,
+            uncollapsed[i + 1] if i+1 < len(uncollapsed) else None
+            )
+        if not should_collapse(e, surrounding):
+            elements.append(e)
+
+    out = ""
+    def fold(element, nobr, surrounding):
+        if isinstance(element, str):
+            if nobr:
+                return element
+            return break_lines(element)
+
+        match element['type']:
+            case "bbcode":
+                c = ""
+                for i in range(len(element['children'])):
+                    child = element['children'][i]
+                    _surrounding = (
+                        element['children'][i - 1] if i-1 >= 0 else None,
+                        element['children'][i + 1] if i+1 < len(element['children']) else None
+                        )
+                    _nobr = element['name'] == "code" or element['name'] == "ul" or element['name'] == "ol"
+                    c = c + Markup(fold(child, _nobr, _surrounding))
+                res = TAGS[element['name']](c, element['attr'], surrounding)
+                return res
+            case "link":
+                return f"<a href=\"{element['url']}\">{element['url']}</a>"
+            case 'emote':
+                return EMOJI[element['name']]
+            case "rule":
+                return "<hr>"
+
+    for i in range(len(elements)):
+        e = elements[i]
+        surrounding = (
+            elements[i - 1] if i-1 >= 0 else None,
+            elements[i + 1] if i+1 < len(elements) else None
+            )
+        out = out + fold(e, False, surrounding)
+    return out

app/lib/babycode_parser.py

@@ -0,0 +1,242 @@
+# originally written in lua by kaesa
+
+import re
+
+PAT_EMOTE = r"[^\s:]"
+PAT_BBCODE_TAG = r"\w"
+PAT_BBCODE_ATTR = r"[^\]]"
+PAT_LINK = r"https?:\/\/[\w\-_.?:\/=&~@#%]+[\w\-\/]"
+
+class Parser:
+    def __init__(self, src_str):
+        self.valid_bbcode_tags = []
+        self.valid_emotes = []
+        self.bbcode_tags_only_text_children = [],
+        self.source = src_str
+        self.position = 0
+        self.position_stack = []
+
+
+    def advance(self, count = 1):
+        self.position += count
+
+
+    def is_end_of_source(self, offset = 0):
+        return self.position + offset >= len(self.source)
+
+
+    def save_position(self):
+        self.position_stack.append(self.position)
+
+
+    def restore_position(self):
+        self.position = self.position_stack.pop()
+
+
+    def forget_position(self):
+        self.position_stack.pop()
+
+
+    def peek_char(self, offset = 0):
+        if self.is_end_of_source(offset):
+            return ""
+        return self.source[self.position + offset]
+
+
+    def get_char(self):
+        char = self.peek_char()
+        self.advance()
+        return char
+
+
+    def check_char(self, wanted):
+        char = self.peek_char()
+
+        if char == wanted:
+            self.advance()
+            return True
+
+        return False
+
+
+    def check_str(self, wanted):
+        self.save_position()
+
+        # for each char in wanted
+        for i in range(len(wanted)):
+            if not self.check_char(wanted[i]):
+                self.restore_position()
+                return False
+
+        self.forget_position()
+        return True
+
+
+    def match_pattern(self, pattern):
+        buf = ""
+        while not self.is_end_of_source():
+            ch = self.peek_char()
+
+            if not re.match(pattern, ch):
+                break
+
+            self.advance()
+            buf = buf + ch
+
+        return buf
+
+
+    def parse_emote(self):
+        self.save_position()
+
+        if not self.check_char(":"):
+            self.restore_position()
+            return None
+
+        name = self.match_pattern(PAT_EMOTE)
+
+        if not self.check_char(":"):
+            self.restore_position()
+            return None
+
+        if not name in self.valid_emotes:
+            self.restore_position()
+            return None
+
+        self.forget_position()
+        return {
+            "type": "emote",
+            "name": name
+        }
+
+
+    def parse_bbcode_open(self):
+        self.save_position()
+
+        if not self.check_char("["):
+            self.restore_position()
+            return None, None
+
+        name = self.match_pattern(PAT_BBCODE_TAG)
+
+        if name == "":
+            self.restore_position()
+            return None, None
+
+        attr = None
+
+        if self.check_char("="):
+            attr = self.match_pattern(PAT_BBCODE_ATTR)
+
+        if not self.check_char("]"):
+            self.restore_position()
+            return None, None
+
+        if not name in self.valid_bbcode_tags:
+            self.restore_position()
+            return None, None
+
+        self.forget_position()
+        return name, attr
+
+
+    def parse_bbcode(self):
+        self.save_position()
+
+        name, attr = self.parse_bbcode_open()
+
+        if name is None:
+            self.restore_position()
+            return None
+
+        children = []
+
+        while not self.is_end_of_source():
+            if self.check_str(f"[/{name}]"):
+                break
+
+            if name in self.bbcode_tags_only_text_children:
+                ch = self.get_char()
+
+                if len(children) == 0:
+                    children.append(ch)
+                else:
+                    children[0] = children[0] + ch
+            else:
+                element = self.parse_element(children)
+
+                if element is None:
+                    self.restore_position()
+                    return None
+
+                children.append(element)
+
+        self.forget_position()
+        return {
+            "type": "bbcode",
+            "name": name,
+            "attr": attr,
+            "children": children,
+        }
+
+
+    def parse_rule(self):
+        if not self.check_str("---"):
+            return None
+
+        return {
+            "type": "rule"
+        }
+
+
+    def parse_link(self):
+        self.save_position()
+
+        # extract printable chars (extreme hack edition)
+        word = self.match_pattern(r'[!-~]')
+
+        match = re.match(PAT_LINK, word)
+        if not match:
+            self.restore_position()
+            return None
+
+        self.forget_position()
+        return {
+            "type": "link",
+            "url": word
+        }
+
+
+    def parse_element(self, siblings):
+        if self.is_end_of_source():
+            return None
+
+        element = self.parse_emote() \
+            or self.parse_bbcode() \
+            or self.parse_rule() \
+            or self.parse_link()
+
+        if element is None:
+            if len(siblings) > 0:
+                last = siblings[-1]
+
+                if isinstance(last, str):
+                    siblings.pop()
+                    return last + self.get_char()
+
+            return self.get_char()
+
+        return element
+
+
+    def parse(self):
+        elements = []
+
+        while True:
+            element = self.parse_element(elements)
+            if element is None:
+                break
+
+            elements.append(element)
+
+        return elements

app/migrations.py

@@ -1,30 +1,44 @@
 from .db import db
 
-# format: {integer: str|list<str>}
-MIGRATIONS = {
+def migrate_old_avatars():
+    for avatar in db.query('SELECT id, file_path FROM avatars WHERE file_path LIKE "/avatars/%"'):
+        new_path = f"/static{avatar['file_path']}"
+        db.execute('UPDATE avatars SET file_path = ? WHERE id = ?', new_path, avatar['id'])
 
-}
+# format: [str|tuple(str, any...)|callable]
+MIGRATIONS = [
+    migrate_old_avatars,
+    'DELETE FROM sessions', # delete old lua porom sessions
+    'ALTER TABLE "users" ADD COLUMN "invited_by" INTEGER REFERENCES users(id)', # invitation system
+    'ALTER TABLE "post_history" ADD COLUMN "format_version" INTEGER DEFAULT NULL',
+]
 
 def run_migrations():
-    print("Running migrations...")
-    ran = 0
     db.execute("""
         CREATE TABLE IF NOT EXISTS _migrations(
             id INTEGER PRIMARY KEY
         )
     """)
-    completed = [row["id"] for row in db.query("SELECT id FROM _migrations")]
-    for migration_id in sorted(MIGRATIONS.keys()):
-        if migration_id not in completed:
-            print(f"Running migration #{migration_id}")
+    if len(MIGRATIONS) == 0:
+        print("No migrations defined.")
+        return
+    print("Running migrations...")
+    ran = 0
+    completed = {int(row["id"]) for row in db.query("SELECT id FROM _migrations")}
+    to_run = {idx: migration_obj for idx, migration_obj in enumerate(MIGRATIONS) if idx not in completed}
+    if not to_run:
+        print('No migrations need to run.')
+        return
+
+    with db.transaction():
+        for migration_id, migration_obj in to_run.items():
+            if isinstance(migration_obj, str):
+                db.execute(migration_obj)
+            elif isinstance(migration_obj, tuple):
+                db.execute(migration_obj[0], *migration_obj[1:])
+            elif callable(migration_obj):
+                migration_obj()
+
+            db.execute('INSERT INTO _migrations (id) VALUES (?)', migration_id)
             ran += 1
-            statements = MIGRATIONS[migration_id]
-            # support both strings and lists
-            if isinstance(statements, str):
-                statements = [statements]
-
-            for sql in statements:
-                db.execute(sql)
-
-            db.execute("INSERT INTO _migrations (id) VALUES (?)", migration_id)
     print(f"Ran {ran} migrations.")

app/models.py

@@ -1 +1,319 @@
-from .db import Model
+from .db import Model, db
+from .constants import PermissionLevel
+from flask import current_app
+import time
+
+class Users(Model):
+    table = "users"
+
+    def get_avatar_url(self):
+        return Avatars.find({"id": self.avatar_id}).file_path
+
+    def is_default_avatar(self):
+        return int(Avatars.find({'id': self.avatar_id}).id) == 1
+
+    def is_guest(self):
+        return self.permission == PermissionLevel.GUEST.value
+
+    def is_mod(self):
+        return self.permission >= PermissionLevel.MODERATOR.value
+
+    def is_mod_only(self):
+        return self.permission == PermissionLevel.MODERATOR.value
+
+    def is_admin(self):
+        return self.permission == PermissionLevel.ADMIN.value
+
+    def is_system(self):
+        return self.permission == PermissionLevel.SYSTEM.value
+
+    def is_default_avatar(self):
+        return self.avatar_id == 1
+
+    def get_latest_posts(self):
+        q = """SELECT
+                posts.id, posts.created_at, post_history.content, post_history.edited_at, threads.title AS thread_title, topics.name as topic_name, threads.slug as thread_slug
+            FROM
+                posts
+            JOIN
+                post_history ON posts.current_revision_id = post_history.id
+            JOIN
+                threads ON posts.thread_id = threads.id
+            JOIN
+                topics ON threads.topic_id = topics.id
+            WHERE
+                posts.user_id = ?
+            ORDER BY posts.created_at DESC
+            LIMIT 10"""
+        return db.query(q, self.id)
+
+    def get_post_stats(self):
+        q = """SELECT
+                COUNT(DISTINCT posts.id) AS post_count,
+                COUNT(DISTINCT threads.id) AS thread_count,
+                MAX(threads.title) FILTER (WHERE threads.created_at = latest.created_at) AS latest_thread_title,
+                MAX(threads.slug) FILTER (WHERE threads.created_at = latest.created_at) AS latest_thread_slug,
+                inviter.username AS inviter_username
+            FROM users
+            LEFT JOIN posts ON posts.user_id = users.id
+            LEFT JOIN threads ON threads.user_id = users.id
+            LEFT JOIN (
+                SELECT user_id, MAX(created_at) AS created_at
+                FROM threads
+                GROUP BY user_id
+                ) latest ON latest.user_id = users.id
+            LEFT JOIN users AS inviter ON inviter.id = users.invited_by
+            WHERE users.id = ?"""
+        return db.fetch_one(q, self.id)
+
+    def get_all_subscriptions(self):
+        q = """
+            SELECT threads.title AS thread_title, threads.slug AS thread_slug
+            FROM
+                threads
+            JOIN
+                subscriptions ON subscriptions.thread_id = threads.id
+            WHERE
+                subscriptions.user_id = ?"""
+        return db.query(q, self.id)
+
+    def can_post_to_topic(self, topic):
+        if self.is_guest():
+            return False
+
+        if self.is_mod():
+            return True
+
+        if topic['is_locked']:
+            return False
+
+        return True
+
+    def can_invite(self):
+        if not current_app.config['DISABLE_SIGNUP']:
+            return True
+
+        if current_app.config['MODS_CAN_INVITE'] and self.is_mod():
+            return True
+
+        if current_app.config['USERS_CAN_INVITE'] and not self.is_guest():
+            return True
+
+        return False
+
+
+class Topics(Model):
+    table = "topics"
+
+    @classmethod
+    def get_list(_cls):
+        q = """
+            SELECT
+                topics.id, topics.name, topics.slug, topics.description, topics.is_locked,
+                users.username AS latest_thread_username,
+                threads.title AS latest_thread_title,
+                threads.slug AS latest_thread_slug,
+                threads.created_at AS latest_thread_created_at
+            FROM
+                topics
+            LEFT JOIN (
+                SELECT
+                *,
+                row_number() OVER (PARTITION BY threads.topic_id ORDER BY threads.created_at DESC) as rn
+            FROM
+                threads
+            ) threads ON threads.topic_id = topics.id AND threads.rn = 1
+            LEFT JOIN
+                users on users.id = threads.user_id
+            ORDER BY
+                topics.sort_order ASC"""
+        return db.query(q)
+
+    @classmethod
+    def get_active_threads(cls):
+        q = """
+            WITH ranked_threads AS (
+                SELECT
+                    threads.topic_id, threads.id AS thread_id, threads.title AS thread_title, threads.slug AS thread_slug,
+                    posts.id AS post_id, posts.created_at AS post_created_at,
+                    users.username,
+                    ROW_NUMBER() OVER (PARTITION BY threads.topic_id ORDER BY posts.created_at DESC) AS rn
+                FROM
+                    threads
+                JOIN
+                    posts ON threads.id = posts.thread_id
+                LEFT JOIN
+                    users ON posts.user_id = users.id
+            )
+            SELECT
+                topic_id,
+                thread_id, thread_title, thread_slug,
+                post_id, post_created_at,
+                username
+            FROM
+                ranked_threads
+            WHERE
+                rn = 1
+            ORDER BY
+                topic_id"""
+
+        active_threads_raw = db.query(q)
+        active_threads = {}
+        for thread in active_threads_raw:
+            active_threads[int(thread['topic_id'])] = {
+                'thread_title': thread['thread_title'],
+                'thread_slug': thread['thread_slug'],
+                'post_id': thread['post_id'],
+                'username': thread['username'],
+                'post_created_at': thread['post_created_at']
+            }
+        return active_threads
+
+    def get_threads(self, per_page, page, sort_by = "activity"):
+        order_clause = ""
+        if sort_by == "thread":
+            order_clause = "ORDER BY threads.is_stickied DESC, threads.created_at DESC"
+        else:
+            order_clause = "ORDER BY threads.is_stickied DESC, latest_post_created_at DESC"
+
+        q = """
+            SELECT
+                threads.id, threads.title, threads.slug, threads.created_at, threads.is_locked, threads.is_stickied,
+                users.username AS started_by,
+            u.username AS latest_post_username,
+                ph.content AS latest_post_content,
+                posts.created_at AS latest_post_created_at,
+                posts.id AS latest_post_id
+            FROM
+                threads
+            JOIN users ON users.id = threads.user_id
+            JOIN (
+                SELECT
+                    posts.thread_id,
+                    posts.id,
+                    posts.user_id,
+                    posts.created_at,
+                    posts.current_revision_id,
+                    ROW_NUMBER() OVER (PARTITION BY posts.thread_id ORDER BY posts.created_at DESC) AS rn
+            FROM
+                posts
+            ) posts ON posts.thread_id = threads.id AND posts.rn = 1
+            JOIN
+                post_history ph ON ph.id = posts.current_revision_id
+            JOIN
+                users u ON u.id = posts.user_id
+            WHERE
+            threads.topic_id = ?
+        """ + order_clause + " LIMIT ? OFFSET ?"
+
+        return db.query(q, self.id, per_page, (page - 1) * per_page)
+
+
+class Threads(Model):
+    table = "threads"
+
+    def get_posts(self, limit, offset):
+        q = Posts.FULL_POSTS_QUERY + " WHERE posts.thread_id = ? ORDER BY posts.created_at ASC LIMIT ? OFFSET ?"
+        return db.query(q, self.id, limit, offset)
+
+    def locked(self):
+        return bool(self.is_locked)
+
+    def stickied(self):
+        return bool(self.is_stickied)
+
+class Posts(Model):
+    FULL_POSTS_QUERY = """
+        SELECT
+            posts.id, posts.created_at, post_history.content, post_history.edited_at, users.username, users.status, avatars.file_path AS avatar_path, posts.thread_id, users.id AS user_id, post_history.original_markup, users.signature_rendered, threads.slug AS thread_slug, threads.is_locked AS thread_is_locked
+        FROM
+            posts
+        JOIN
+            post_history ON posts.current_revision_id = post_history.id
+        JOIN
+            users ON posts.user_id = users.id
+        JOIN
+            threads ON posts.thread_id = threads.id
+        LEFT JOIN
+            avatars ON users.avatar_id = avatars.id"""
+
+    table = "posts"
+
+class PostHistory(Model):
+    table = "post_history"
+
+class Sessions(Model):
+    table = "sessions"
+
+class Avatars(Model):
+    table = "avatars"
+
+class Subscriptions(Model):
+    table = "subscriptions"
+
+    def get_unread_count(self):
+        q = """SELECT COUNT(*) AS unread_count
+            FROM posts
+            LEFT JOIN subscriptions ON subscriptions.thread_id = posts.thread_id
+            WHERE subscriptions.user_id = ? AND posts.created_at > subscriptions.last_seen AND posts.thread_id = ?"""
+        res = db.fetch_one(q, self.user_id, self.thread_id)
+        if res:
+            return res['unread_count']
+        return None
+
+class APIRateLimits(Model):
+    table = 'api_rate_limits'
+
+    @classmethod
+    def is_allowed(cls, user_id, method, seconds):
+        q = """
+        SELECT logged_at FROM api_rate_limits
+        WHERE user_id = ? AND method = ?
+        ORDER BY logged_at DESC LIMIT 1"""
+        last_call = db.fetch_one(q, user_id, method)
+        if last_call is None or (int(time.time()) - int(last_call['logged_at']) >= seconds):
+            with db.transaction():
+                db.query(
+                    'DELETE FROM api_rate_limits WHERE user_id = ? AND method = ?',
+                    user_id, method
+                )
+                db.query(
+                    'INSERT INTO api_rate_limits (user_id, method) VALUES (?, ?)',
+                    user_id, method
+                )
+                return True
+        else:
+            return False
+
+class Reactions(Model):
+    table = "reactions"
+
+    @classmethod
+    def for_post(cls, post_id):
+        qb = db.QueryBuilder(cls.table)\
+            .select("reaction_text, COUNT(*) as c")\
+            .where({"post_id": post_id})\
+            .group_by("reaction_text")\
+            .order_by("c", False)
+        result = qb.all()
+        return result if result else []
+
+    @classmethod
+    def get_users(cls, post_id, reaction_text):
+        q = """
+            SELECT user_id, username FROM reactions
+            JOIN
+                users ON users.id = user_id
+            WHERE
+                post_id = ? AND reaction_text = ?
+        """
+
+        return db.query(q, post_id, reaction_text)
+
+
+class PasswordResetLinks(Model):
+    table = "password_reset_links"
+
+
+class InviteKeys(Model):
+    table = 'invite_keys'

app/routes/api.py

@@ -0,0 +1,98 @@
+from flask import Blueprint, request, url_for
+from ..lib.babycode import babycode_to_html
+from ..constants import REACTION_EMOJI
+from .users import is_logged_in, get_active_user
+from ..models import APIRateLimits, Threads, Reactions
+from ..db import db
+
+bp = Blueprint("api", __name__, url_prefix="/api/")
+
+
+@bp.post('/thread-updates/<thread_id>')
+def thread_updates(thread_id):
+    thread = Threads.find({'id': thread_id})
+    if not thread:
+        return {'error': 'no such thread'}, 404
+    target_time = request.json.get('since')
+    if not target_time:
+        return {'error': 'missing parameter "since"'}, 400
+    try:
+        target_time = int(target_time)
+    except:
+        return {'error': 'parameter "since" is not/cannot be converted to a number'}, 400
+
+    q = 'SELECT id FROM posts WHERE thread_id = ? AND posts.created_at > ? ORDER BY posts.created_at ASC LIMIT 1'
+    new_post = db.fetch_one(q, thread_id, target_time)
+    if not new_post:
+        return {'status': 'none'}
+
+    url = url_for('threads.thread', slug=thread.slug, after=new_post['id'], _anchor=f"post-{new_post['id']}")
+    return {'status': 'new_post', 'url': url}
+
+
+@bp.post('/babycode-preview')
+def babycode_preview():
+    if not is_logged_in():
+        return {'error': 'not authorized'}, 401
+    user = get_active_user()
+    if not APIRateLimits.is_allowed(user.id, 'babycode_preview', 5):
+        return {'error': 'too many requests'}, 429
+    markup = request.json.get('markup')
+    if not markup or not isinstance(markup, str):
+        return {'error': 'markup field missing or invalid type'}, 400
+    rendered = babycode_to_html(markup)
+    return {'html': rendered}
+
+
+@bp.post('/add-reaction/<post_id>')
+def add_reaction(post_id):
+    if not is_logged_in():
+        return {'error': 'not authorized', 'error_code': 401}, 401
+    user = get_active_user()
+    reaction_text = request.json.get('emoji')
+    if not reaction_text or not isinstance(reaction_text, str):
+        return {'error': 'emoji field missing or invalid type', 'error_code': 400}, 400
+    if reaction_text not in REACTION_EMOJI:
+        return {'error': 'unsupported reaction', 'error_code': 400}, 400
+
+    reaction = Reactions.find({
+        'user_id': user.id,
+        'post_id': int(post_id),
+        'reaction_text': reaction_text,
+    })
+
+    if reaction:
+        return {'error': 'reaction already exists', 'error_code': 409}, 409
+
+    reaction = Reactions.create({
+        'user_id': user.id,
+        'post_id': int(post_id),
+        'reaction_text': reaction_text,
+    })
+
+    return {'status': 'added'}
+
+
+@bp.post('/remove-reaction/<post_id>')
+def remove_reaction(post_id):
+    if not is_logged_in():
+        return {'error': 'not authorized'}, 401
+    user = get_active_user()
+    reaction_text = request.json.get('emoji')
+    if not reaction_text or not isinstance(reaction_text, str):
+        return {'error': 'emoji field missing or invalid type'}, 400
+    if reaction_text not in REACTION_EMOJI:
+        return {'error': 'unsupported reaction'}, 400
+
+    reaction = Reactions.find({
+        'user_id': user.id,
+        'post_id': int(post_id),
+        'reaction_text': reaction_text,
+    })
+
+    if not reaction:
+        return {'error': 'reaction does not exist'}, 404
+
+    reaction.delete()
+
+    return {'status': 'removed'}

app/routes/app.py

@@ -1,7 +1,12 @@
-from flask import Blueprint
+from flask import Blueprint, redirect, url_for, render_template
 
 bp = Blueprint("app", __name__, url_prefix = "/")
 
 @bp.route("/")
-def hello_world():
-    return f"<img src='static/avatars/default.webp'></img>"
+def index():
+    return redirect(url_for("topics.all_topics"))
+
+
+@bp.route("/babycode")
+def babycode_guide():
+    return render_template('babycode.html')

app/routes/mod.py

@@ -0,0 +1,51 @@
+from flask import (
+    Blueprint, render_template, request, redirect, url_for
+    )
+from .users import login_required, mod_only, get_active_user, admin_only
+from ..models import Users, PasswordResetLinks
+from ..db import db, DB
+import secrets
+import time
+
+bp = Blueprint("mod", __name__, url_prefix = "/mod/")
+
+@bp.get("/sort-topics")
+@login_required
+@mod_only("topics.all_topics")
+def sort_topics():
+    topics = db.query("SELECT * FROM topics ORDER BY sort_order ASC")
+    return render_template("mod/sort-topics.html", topics = topics)
+
+
+@bp.post("/sort-topics")
+@login_required
+@mod_only("topics.all_topics")
+def sort_topics_post():
+    with db.transaction():
+        for topic_id, new_order in request.form.items():
+            db.execute("UPDATE topics SET sort_order = ? WHERE id = ?", new_order, topic_id)
+
+    return redirect(url_for(".sort_topics"))
+
+
+@bp.get("/user-list")
+@login_required
+@mod_only("users.page", username = lambda: get_active_user().username)
+def user_list():
+    users = Users.select()
+    return render_template("mod/user-list.html", users = users)
+
+
+@bp.post("/reset-pass/<user_id>")
+@login_required
+@mod_only("topics.all_topics")
+def create_reset_pass(user_id):
+    now = int(time.time())
+    key = secrets.token_urlsafe(20)
+    reset_link = PasswordResetLinks.create({
+        'user_id': int(user_id),
+        'expires_at': now + 24 * 60 * 60,
+        'key': key,
+    })
+
+    return redirect(url_for('users.reset_link_login', key=key))

app/routes/posts.py

@@ -0,0 +1,127 @@
+from flask import (
+    Blueprint, redirect, url_for, flash, render_template, request
+    )
+from .users import login_required, get_active_user
+from ..lib.babycode import babycode_to_html, BABYCODE_VERSION
+from ..constants import InfoboxKind
+from ..db import db
+from ..models import Posts, PostHistory, Threads, Topics
+
+bp = Blueprint("posts", __name__, url_prefix = "/post")
+
+
+def create_post(thread_id, user_id, content, markup_language="babycode"):
+    parsed_content = babycode_to_html(content)
+    with db.transaction():
+        post = Posts.create({
+            "thread_id": thread_id,
+            "user_id": user_id,
+            "current_revision_id": None,
+        })
+
+        revision = PostHistory.create({
+            "post_id": post.id,
+            "content": parsed_content,
+            "is_initial_revision": True,
+            "original_markup": content,
+            "markup_language": markup_language,
+            "format_version": BABYCODE_VERSION,
+        })
+
+        post.update({"current_revision_id": revision.id})
+        return post
+
+
+def update_post(post_id, new_content, markup_language='babycode'):
+    parsed_content = babycode_to_html(new_content)
+    with db.transaction():
+        post = Posts.find({'id': post_id})
+        new_revision = PostHistory.create({
+            'post_id': post.id,
+            'content': parsed_content,
+            'is_initial_revision': False,
+            'original_markup': new_content,
+            'markup_language': markup_language,
+            'format_version': BABYCODE_VERSION,
+        })
+
+        post.update({'current_revision_id': new_revision.id})
+
+
+@bp.post("/<post_id>/delete")
+@login_required
+def delete(post_id):
+    post = Posts.find({'id': post_id})
+    if not post:
+        return redirect(url_for('topics.all_topics'))
+
+    thread = Threads.find({'id': post.thread_id})
+    user = get_active_user()
+    if not user:
+        return redirect(url_for('threads.thread', slug=thread.slug))
+
+    if user.is_mod() or post.user_id == user.id:
+        post.delete()
+
+        post_count = Posts.count({
+            'thread_id': thread.id,
+        })
+
+        if post_count == 0:
+            topic = Topics.find({
+                'id': thread.topic_id,
+            })
+            thread.delete()
+            flash('Thread deleted.', InfoboxKind.INFO)
+            return redirect(url_for('topics.topic', slug=topic.slug))
+
+        flash('Post deleted.', InfoboxKind.INFO)
+
+    return redirect(url_for('threads.thread', slug=thread.slug))
+
+
+@bp.get("/<post_id>/edit")
+@login_required
+def edit(post_id):
+    post = Posts.find({'id': post_id})
+    if not post:
+        return redirect(url_for('topics.all_topics'))
+
+    user = get_active_user()
+    q = f"{Posts.FULL_POSTS_QUERY} WHERE posts.id = ?"
+    editing_post = db.fetch_one(q, post_id)
+    if not editing_post:
+        return redirect(url_for('topics.all_topics'))
+    if editing_post['user_id'] != user.id:
+        return redirect(url_for('topics.all_topics'))
+
+    thread = Threads.find({'id': editing_post['thread_id']})
+
+    thread_predicate = f'{Posts.FULL_POSTS_QUERY} WHERE posts.thread_id = ?'
+
+    context_prev_q = f'{thread_predicate} AND posts.created_at < ? ORDER BY posts.created_at DESC LIMIT 2'
+    context_next_q = f'{thread_predicate} AND posts.created_at > ? ORDER BY posts.created_at ASC LIMIT 2'
+    prev_context = db.query(context_prev_q, thread.id, editing_post['created_at'])
+    next_context = db.query(context_next_q, thread.id, editing_post['created_at'])
+
+    return render_template('posts/edit.html',
+                           editing_post = editing_post,
+                           thread = thread,
+                           prev_context = prev_context,
+                           next_context = next_context,
+                           )
+
+
+@bp.post("/<post_id>/edit")
+@login_required
+def edit_form(post_id):
+    user = get_active_user()
+    post = Posts.find({'id': post_id})
+    if not post:
+        return redirect(url_for('topics.all_topics'))
+    if post.user_id != user.id:
+        return redirect(url_for('topics.all_topics'))
+
+    update_post(post.id, request.form.get('new_content', default=''))
+    thread = Threads.find({'id': post.thread_id})
+    return redirect(url_for('threads.thread', slug=thread.slug, after=post.id, _anchor=f'post-{post.id}'))

app/routes/threads.py

@@ -0,0 +1,243 @@
+from flask import (
+    Blueprint, render_template, request, redirect, url_for, flash
+    )
+from .users import login_required, mod_only, get_active_user, is_logged_in
+from ..db import db
+from ..models import Threads, Topics, Posts, Subscriptions, Reactions
+from ..constants import InfoboxKind
+from .posts import create_post
+from slugify import slugify
+import math
+import time
+
+bp = Blueprint("threads", __name__, url_prefix = "/threads/")
+
+
+def get_post_url(post_id, _anchor=False):
+    post = Posts.find({'id': post_id})
+    if not post:
+        return ""
+
+    thread = Threads.find({'id': post.thread_id})
+
+    res = url_for('threads.thread', slug=thread.slug, after=post_id)
+    if not _anchor:
+        return res
+
+    return f"{res}#post-{post_id}"
+
+
+@bp.get("/<slug>")
+def thread(slug):
+    POSTS_PER_PAGE = 10
+    thread = Threads.find({"slug": slug})
+    if not thread:
+        return redirect(url_for('topics.all_topics'))
+
+    post_count = Posts.count({"thread_id": thread.id})
+    page_count = max(math.ceil(post_count / POSTS_PER_PAGE), 1)
+
+    page = 1
+    after = request.args.get("after", default=None)
+    if after is not None:
+        after_id = int(after)
+        post_position = Posts.count([
+            ("thread_id", "=", thread.id),
+            ("id", "<=", after_id),
+        ])
+        page = math.ceil((post_position) / POSTS_PER_PAGE)
+    else:
+        page = max(1, min(page_count, int(request.args.get("page", default = 1))))
+
+    posts = thread.get_posts(POSTS_PER_PAGE, (page - 1) * POSTS_PER_PAGE)
+    topic = Topics.find({"id": thread.topic_id})
+    other_topics = Topics.select()
+
+    is_subscribed = False
+    unread_count = None
+    if is_logged_in():
+        subscription = Subscriptions.find({
+            'thread_id': thread.id,
+            'user_id': get_active_user().id,
+        })
+        if subscription:
+            unread_count = subscription.get_unread_count()
+            if int(posts[-1]['created_at']) > int(subscription.last_seen):
+                subscription.update({
+                    'last_seen': int(posts[-1]['created_at'])
+                })
+            is_subscribed = True
+
+    return render_template(
+        "threads/thread.html",
+        thread = thread,
+        current_page = page,
+        page_count = page_count,
+        posts = posts,
+        topic = topic,
+        topics = other_topics,
+        is_subscribed = is_subscribed,
+        Reactions = Reactions,
+        unread_count = unread_count,
+    )
+
+
+@bp.post("/<slug>")
+@login_required
+def reply(slug):
+    thread = Threads.find({"slug": slug})
+    if not thread:
+        return redirect(url_for('topics.all_topics'))
+    user = get_active_user()
+    if user.is_guest():
+        return redirect(url_for('.thread', slug=slug))
+    if thread.locked() and not user.is_mod():
+        return redirect(url_for('.thread', slug=slug))
+
+    post_content = request.form['post_content']
+    post = create_post(thread.id, user.id, post_content)
+
+    subscription = Subscriptions.find({'user_id': user.id, 'thread_id': thread.id})
+
+    if subscription:
+        subscription.update({'last_seen': int(time.time())})
+    elif request.form.get('subscribe', default=None) == 'on':
+        Subscriptions.create({'user_id': user.id, 'thread_id': thread.id, 'last_seen': int(time.time())})
+
+    return redirect(url_for(".thread", slug=slug, after=post.id, _anchor="latest-post"))
+
+
+@bp.get("/create")
+@login_required
+def create():
+    all_topics = Topics.select()
+    return render_template("threads/create.html", all_topics = all_topics)
+
+
+@bp.post("/create")
+@login_required
+def create_form():
+    topic = Topics.find({"id": request.form['topic_id']})
+    user = get_active_user()
+    if not topic:
+        flash('Invalid topic', InfoboxKind.ERROR)
+        return redirect(url_for('.create'))
+
+    if topic.is_locked and not get_active_user().is_mod():
+        flash(f'Topic "{topic.name}" is locked', InfoboxKind.ERROR)
+        return redirect(url_for('.create'))
+
+    title = request.form['title'].strip()
+    now = int(time.time())
+    slug = f"{slugify(title)}-{now}"
+
+    post_content = request.form['initial_post']
+    thread = Threads.create({
+        "topic_id": topic.id,
+        "user_id": user.id,
+        "title": title,
+        "slug": slug,
+        "created_at": now,
+    })
+    post = create_post(thread.id, user.id, post_content)
+    return redirect(url_for(".thread", slug = thread.slug))
+
+
+@bp.post("/<slug>/lock")
+@login_required
+def lock(slug):
+    user = get_active_user()
+    thread = Threads.find({'slug': slug})
+    if not thread:
+        return redirect(url_for('topics.all_topics'))
+    if not ((thread.user_id == user.id) or user.is_mod()):
+        return redirect(url_for('.thread', slug=slug))
+    target_op = request.form.get('target_op')
+    thread.update({
+        'is_locked': target_op
+    })
+    return redirect(url_for('.thread', slug=slug))
+
+
+@bp.post("/<slug>/sticky")
+@login_required
+@mod_only(".thread", slug = lambda slug: slug)
+def sticky(slug):
+    user = get_active_user()
+    thread = Threads.find({'slug': slug})
+    if not thread:
+        return redirect(url_for('topics.all_topics'))
+    if not ((thread.user_id == user.id) or user.is_mod()):
+        return redirect(url_for('.thread', slug=slug))
+    target_op = request.form.get('target_op')
+    thread.update({
+        'is_stickied': target_op
+    })
+    return redirect(url_for('.thread', slug=slug))
+
+
+@bp.post("/<slug>/move")
+@login_required
+@mod_only(".thread", slug = lambda slug: slug)
+def move(slug):
+    user = get_active_user()
+
+    new_topic_id = request.form.get('new_topic_id', default=None)
+    if new_topic_id is None:
+        flash('Thread is already in this topic.', InfoboxKind.ERROR)
+        return redirect(url_for('.thread', slug=slug))
+
+    new_topic = Topics.find({
+        'id': new_topic_id
+    })
+    if not new_topic:
+        return redirect(url_for('topics.all_topics'))
+    thread = Threads.find({
+        'slug': slug
+    })
+    if not thread:
+        return redirect(url_for('topics.all_topics'))
+    if new_topic.id == thread.topic_id:
+        flash('Thread is already in this topic.', InfoboxKind.ERROR)
+        return redirect(url_for('.thread', slug=slug))
+
+    old_topic = Topics.find({'id': thread.topic_id})
+    thread.update({'topic_id': new_topic_id})
+    flash(f'Topic moved from "{old_topic.name}" to "{new_topic.name}".', InfoboxKind.INFO)
+    return redirect(url_for('.thread', slug=slug))
+
+
+@bp.post("/<slug>/subscribe")
+@login_required
+def subscribe(slug):
+    user = get_active_user()
+    thread = Threads.find({'slug': slug})
+    if not thread:
+        return redirect(url_for('topics.all_topics'))
+    subscription = Subscriptions.find({
+        'user_id': user.id,
+        'thread_id': thread.id,
+    })
+    if request.form['subscribe'] == 'subscribe':
+        if subscription:
+            subscription.delete()
+        Subscriptions.create({
+            'user_id': user.id,
+            'thread_id': thread.id,
+            'last_seen': int(time.time()),
+        })
+    elif request.form['subscribe'] == 'unsubscribe':
+        if not subscription:
+            return redirect(url_for('.thread', slug=slug))
+        subscription.delete()
+    elif request.form['subscribe'] == 'read':
+        if not subscription:
+            return redirect(url_for('.thread', slug=slug))
+        subscription.update({
+            'last_seen': int(time.time())
+        })
+    last_visible_post = request.form.get('last_visible_post', default=None)
+    if last_visible_post is not None:
+        return redirect(url_for('.thread', slug=thread.slug, after=last_visible_post))
+    else:
+        return redirect(url_for('users.inbox', username=user.username))

app/routes/topics.py

@@ -0,0 +1,124 @@
+from flask import (
+    Blueprint, render_template, request, redirect, url_for, flash, session
+    )
+from .users import login_required, mod_only, get_active_user, is_logged_in
+from ..models import Users, Topics, Threads, Subscriptions
+from ..constants import InfoboxKind
+from slugify import slugify
+import time
+import math
+
+bp = Blueprint("topics", __name__, url_prefix = "/topics/")
+
+
+@bp.get("/")
+def all_topics():
+    admin = Users.find({"id": 1})
+    return render_template("topics/topics.html", topic_list = Topics.get_list(), active_threads = Topics.get_active_threads())
+
+
+@bp.get("/create")
+@login_required
+@mod_only(".all_topics")
+def create():
+    return render_template("topics/create.html")
+
+
+@bp.post("/create")
+@login_required
+@mod_only(".all_topics")
+def create_post():
+    topic_name = request.form['name'].strip()
+    now = int(time.time())
+    slug = f"{slugify(topic_name)}-{now}"
+
+    topic_count = Topics.count()
+    topic = Topics.create({
+        "name": topic_name,
+        "description": request.form['description'],
+        "slug": slug,
+        "sort_order": topic_count + 1,
+    })
+
+    flash("Topic created.", InfoboxKind.INFO)
+    return redirect(url_for("topics.topic", slug = slug))
+
+
+@bp.get("/<slug>")
+def topic(slug):
+    THREADS_PER_PAGE = 10
+    target_topic = Topics.find({
+        "slug": slug
+    })
+    if not target_topic:
+        return redirect(url_for('.all_topics'))
+
+    threads_count = Threads.count({
+        "topic_id": target_topic.id
+    })
+
+    sort_by = session.get('sort_by', default="activity")
+
+    page_count = max(math.ceil(threads_count / THREADS_PER_PAGE), 1)
+    page = max(1, min(int(request.args.get('page', default=1)), page_count))
+
+    threads_list = target_topic.get_threads(THREADS_PER_PAGE, page, sort_by)
+    subscriptions = {}
+    if is_logged_in():
+        for thread in threads_list:
+            subscription = Subscriptions.find({
+                'user_id': get_active_user().id,
+                'thread_id': thread['id'],
+                })
+            if subscription:
+                subscriptions[thread['id']] = subscription.get_unread_count()
+
+    return render_template(
+        "topics/topic.html",
+        threads_list = threads_list,
+        subscriptions = subscriptions,
+        topic = target_topic,
+        current_page = page,
+        page_count = page_count
+    )
+
+
+@bp.get("/<slug>/edit")
+@login_required
+@mod_only(".topic", slug = lambda slug: slug)
+def edit(slug):
+    topic = Topics.find({"slug": slug})
+    if not topic:
+        return redirect(url_for('.all_topics'))
+    return render_template("topics/edit.html", topic=topic)
+
+
+@bp.post("/<slug>/edit")
+@login_required
+@mod_only(".topic", slug = lambda slug: slug)
+def edit_post(slug):
+    topic = Topics.find({"slug": slug})
+    if not topic:
+        return redirect(url_for('.all_topics'))
+
+    topic.update({
+        "name": request.form.get('name', default = topic.name).strip(),
+        "description": request.form.get('description', default = topic.description),
+        "is_locked": int(request.form.get("is_locked", default = topic.is_locked)),
+    })
+
+    return redirect(url_for("topics.topic", slug=slug))
+
+
+@bp.post("/<slug>/delete")
+@login_required
+@mod_only(".topic", slug = lambda slug: slug)
+def delete(slug):
+    topic = Topics.find({"slug": slug})
+    if not topic:
+        return redirect(url_for('.all_topics'))
+
+    topic.delete()
+
+    flash("Topic deleted.", InfoboxKind.INFO)
+    return redirect(url_for("topics.all_topics"))

app/routes/users.py

@@ -0,0 +1,685 @@
+from flask import (
+    Blueprint, render_template, request, redirect, url_for, flash, session, current_app
+    )
+from functools import wraps
+from ..db import db
+from ..lib.babycode import babycode_to_html
+from ..models import Users, Sessions, Subscriptions, Avatars, PasswordResetLinks, InviteKeys
+from ..constants import InfoboxKind, PermissionLevel
+from ..auth import digest, verify
+from wand.image import Image
+from wand.exceptions import WandException
+from datetime import datetime, timedelta
+import secrets
+import time
+import re
+import os
+
+bp = Blueprint("users", __name__, url_prefix = "/users/")
+
+
+def validate_and_create_avatar(input_image, filename):
+    try:
+        with Image(blob=input_image) as img:
+            img.strip()
+            img.gravity = 'center'
+
+            width, height = img.width, img.height
+            min_dim = min(width, height)
+            if min_dim > 256:
+                ratio = 256.0 / min_dim
+                new_width = int(width * ratio)
+                new_height = int(height * ratio)
+                img.resize(new_width, new_height)
+
+            width, height = img.width, img.height
+            crop_size = min(width, height)
+            x_offset = (width - crop_size) // 2
+            y_offset = (height - crop_size) // 2
+            img.crop(left=x_offset, top=y_offset,
+                    width=crop_size, height=crop_size)
+
+            img.resize(256, 256)
+            img.format = 'webp'
+            img.compression_quality = 85
+            img.save(filename=filename)
+            return True
+    except WandException:
+        return False
+
+
+def is_logged_in():
+    return "pyrom_session_key" in session
+
+
+def get_active_user():
+    if not is_logged_in():
+        return None
+    sess = Sessions.find({"key": session["pyrom_session_key"]})
+    if not sess:
+        return None
+    return Users.find({"id": sess.user_id})
+
+
+def create_session(user_id):
+    return Sessions.create({
+        "key": secrets.token_hex(16),
+        "user_id": user_id,
+        "expires_at": int(time.time()) + 31 * 24 * 60 * 60,
+    })
+
+def extend_session(user_id):
+    session_obj = Sessions.find({'key': session['pyrom_session_key']})
+    if not session_obj:
+        return
+    new_duration = timedelta(31)
+    current_app.permanent_session_lifetime = new_duration
+    session.modified = True
+    session_obj.update({
+        'expires_at': int(time.time()) + 31 * 24 * 60 * 60
+    })
+
+
+def validate_password(password):
+    pattern = r'^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_])(?!.*\s).{10,255}$'
+    return bool(re.fullmatch(pattern, password))
+
+
+def validate_username(username):
+    pattern = r'^[a-zA-Z0-9_-]{3,20}$'
+    return bool(re.fullmatch(pattern, username))
+
+
+def redirect_if_logged_in(*args, **kwargs):
+    def decorator(view_func):
+        @wraps(view_func)
+        def wrapper(*view_args, **view_kwargs):
+            if is_logged_in():
+                # resolve callables
+                processed_kwargs = {
+                    k: v(**view_kwargs) if callable(v) else v
+                    for k, v in kwargs.items()
+                }
+                endpoint = args[0] if args else processed_kwargs.get("endpoint")
+                if endpoint.startswith("."):
+                    blueprint = current_app.blueprints.get(view_func.__name__.split(".")[0])
+                    if blueprint:
+                        endpoint = endpoint.lstrip(".")
+                        return redirect(url_for(f"{blueprint.name}.{endpoint}", **processed_kwargs))
+                return redirect(url_for(*args, **processed_kwargs))
+            return view_func(*view_args, **view_kwargs)
+        return wrapper
+    return decorator
+
+
+def login_required(view_func):
+    @wraps(view_func)
+    def wrapper(*args, **kwargs):
+        if not is_logged_in():
+            return redirect(url_for("users.log_in"))
+        return view_func(*args, **kwargs)
+    return wrapper
+
+
+def mod_only(*args, **kwargs):
+    def decorator(view_func):
+        @wraps(view_func)
+        def wrapper(*view_args, **view_kwargs):
+            if not get_active_user().is_mod():
+                # resolve callables
+                processed_kwargs = {
+                    k: v(**view_kwargs) if callable(v) else v
+                    for k, v in kwargs.items()
+                }
+                endpoint = args[0] if args else processed_kwargs.get("endpoint")
+                if endpoint.startswith("."):
+                    blueprint = current_app.blueprints.get(view_func.__name__.split(".")[0])
+                    if blueprint:
+                        endpoint = endpoint.lstrip(".")
+                        return redirect(url_for(f"{blueprint.name}.{endpoint}", **processed_kwargs))
+                return redirect(url_for(*args, **processed_kwargs))
+            return view_func(*view_args, **view_kwargs)
+        return wrapper
+    return decorator
+
+
+def admin_only(*args, **kwargs):
+    def decorator(view_func):
+        @wraps(view_func)
+        def wrapper(*view_args, **view_kwargs):
+            if not get_active_user().is_admin():
+                # resolve callables
+                processed_kwargs = {
+                    k: v(**view_kwargs) if callable(v) else v
+                    for k, v in kwargs.items()
+                }
+                endpoint = args[0] if args else processed_kwargs.get("endpoint")
+                if endpoint.startswith("."):
+                    blueprint = current_app.blueprints.get(view_func.__name__.split(".")[0])
+                    if blueprint:
+                        endpoint = endpoint.lstrip(".")
+                        return redirect(url_for(f"{blueprint.name}.{endpoint}", **processed_kwargs))
+                return redirect(url_for(*args, **processed_kwargs))
+            return view_func(*view_args, **view_kwargs)
+        return wrapper
+    return decorator
+
+
+def get_prefers_theme():
+    if not 'theme' in session:
+        return 'style'
+
+    if session['theme'] not in current_app.config['allowed_themes']:
+        return 'style'
+
+    return session['theme']
+
+@bp.get("/log_in")
+@redirect_if_logged_in(".page", username = lambda: get_active_user().username)
+def log_in():
+    return render_template("users/log_in.html")
+
+
+@bp.post("/log_in")
+@redirect_if_logged_in(".page", username = lambda: get_active_user().username)
+def log_in_post():
+    target_user = Users.find({
+        "username": request.form['username']
+    })
+    if not target_user:
+        flash("Incorrect username or password.", InfoboxKind.ERROR)
+        return redirect(url_for("users.log_in"))
+
+    if not verify(target_user.password_hash, request.form['password']):
+        flash("Incorrect username or password.", InfoboxKind.ERROR)
+        return redirect(url_for("users.log_in"))
+
+    session_obj = create_session(target_user.id)
+
+    session['pyrom_session_key'] = session_obj.key
+    flash("Logged in!", InfoboxKind.INFO)
+    return redirect(url_for("users.log_in"))
+
+
+@bp.get("/sign_up")
+@redirect_if_logged_in(".page", username = lambda: get_active_user().username)
+def sign_up():
+    if current_app.config['DISABLE_SIGNUP']:
+        key = request.args.get('key', default=None)
+        if key is None:
+            return redirect(url_for('topics.all_topics'))
+
+        invite = InviteKeys.find({'key': key})
+        if not invite:
+            return redirect(url_for('topics.all_topics'))
+
+        inviter = Users.find({'id': invite.created_by})
+        return render_template("users/sign_up.html", inviter=inviter, key=key)
+
+    return render_template("users/sign_up.html")
+
+
+@bp.post("/sign_up")
+@redirect_if_logged_in(".page", username = lambda: get_active_user().username)
+def sign_up_post():
+    key = request.form.get('key', default=None)
+
+    if current_app.config['DISABLE_SIGNUP']:
+        if not key:
+            return redirect(url_for("topics.all_topics"))
+        invite_key = InviteKeys.find({'key': key})
+        if not invite_key:
+            return redirect(url_for("topics.all_topics"))
+
+    username = request.form['username']
+    password = request.form['password']
+    password_confirm = request.form['password-confirm']
+
+    if not validate_username(username):
+        flash("Invalid username.", InfoboxKind.ERROR)
+        return redirect(url_for("users.sign_up", key=key))
+
+    user_exists = Users.count({"username": username}) > 0
+    if user_exists:
+        flash(f"Username '{username}' is already taken.", InfoboxKind.ERROR)
+        return redirect(url_for("users.sign_up", key=key))
+
+    if not validate_password(password):
+        flash("Invalid password.", InfoboxKind.ERROR)
+        return redirect(url_for("users.sign_up", key=key))
+
+    if password != password_confirm:
+        flash("Passwords do not match.", InfoboxKind.ERROR)
+        return redirect(url_for("users.sign_up", key=key))
+
+    hashed = digest(password)
+
+    new_user = Users.create({
+        "username": username,
+        "password_hash": hashed,
+        "permission": PermissionLevel.GUEST.value,
+    })
+
+    if current_app.config['DISABLE_SIGNUP']:
+        invite_key = InviteKeys.find({'key': key})
+        new_user.update({
+            'invited_by': invite_key.created_by,
+            'permission': PermissionLevel.USER.value,
+        })
+        invite_key.delete()
+
+    session_obj = create_session(new_user.id)
+
+    session['pyrom_session_key'] = session_obj.key
+    flash("Signed up successfully!", InfoboxKind.INFO)
+    return redirect(url_for("topics.all_topics"))
+
+
+@bp.get("/<username>")
+def page(username):
+    target_user = Users.find({"username": username})
+    return render_template("users/user.html", target_user = target_user)
+
+
+@bp.get("/<username>/settings")
+@login_required
+def settings(username):
+    target_user = Users.find({'username': username})
+    if target_user.id != get_active_user().id:
+        return redirect('.settings', username = get_active_user().username)
+
+    return render_template('users/settings.html')
+
+
+@bp.post('/<username>/settings')
+@login_required
+def settings_form(username):
+    # we silently ignore the passed username
+    # and grab the correct user from the session
+    user = get_active_user()
+    theme = request.form.get('theme', default='style')
+    if theme == 'style':
+        if 'theme' in session:
+            session.pop('theme')
+    else:
+        session['theme'] = theme
+    topic_sort_by = request.form.get('topic_sort_by', default='activity')
+    if topic_sort_by == 'activity' or topic_sort_by == 'thread':
+        sort_by = session['sort_by'] = topic_sort_by
+    status = request.form.get('status', default="")[:100]
+    original_sig = request.form.get('signature', default='')
+    rendered_sig = babycode_to_html(original_sig)
+    session['subscribe_by_default'] = request.form.get('subscribe_by_default', default='off') == 'on'
+
+    user.update({
+        'status': status,
+        'signature_original_markup': original_sig,
+        'signature_rendered': rendered_sig,
+    })
+    flash('Settings updated.', InfoboxKind.INFO)
+    return redirect(url_for('.settings', username=user.username))
+
+
+@bp.post('/<username>/set_avatar')
+@login_required
+def set_avatar(username):
+    user = get_active_user()
+    if user.is_guest():
+        flash('You are a guest. Your account must be confirmed by a moderator to perform this action.', InfoboxKind.ERROR)
+        return redirect(url_for('.settings', username=user.username))
+    if 'avatar' not in request.files:
+        flash('Avatar missing.', InfoboxKind.ERROR)
+        return redirect(url_for('.settings', username=user.username))
+
+    file = request.files['avatar']
+
+    if file.filename == '':
+        flash('Avatar missing.', InfoboxKind.ERROR)
+        return redirect(url_for('.settings', username=user.username))
+
+    file_bytes = file.read()
+
+    now = int(time.time())
+    filename = f"u{user.id}d{now}.webp"
+    output_path = os.path.join(current_app.config['AVATAR_UPLOAD_PATH'], filename)
+    proxied_filename = f"/static/avatars/{filename}"
+    res = validate_and_create_avatar(file_bytes, output_path)
+    if res:
+        flash('Avatar updated.', InfoboxKind.INFO)
+        avatar = Avatars.create({
+            'file_path': proxied_filename,
+            'uploaded_at': now,
+        })
+        old_avatar = Avatars.find({'id': user.avatar_id})
+        user.update({'avatar_id': avatar.id})
+        if int(old_avatar.id) != 1:
+            # delete old avi, but not default
+            filename = os.path.join(current_app.config['AVATAR_UPLOAD_PATH'], os.path.basename(old_avatar.file_path))
+            os.remove(filename)
+            old_avatar.delete()
+        return redirect(url_for('.settings', username=user.username))
+    else:
+        flash('Something went wrong. Please try again later.', InfoboxKind.WARN)
+        return redirect(url_for('.settings', username=user.username))
+
+
+@bp.post('/<username>/change_password')
+@login_required
+def change_password(username):
+    user = get_active_user()
+    password = request.form.get('new_password')
+    password2 = request.form.get('new_password2')
+
+    if not validate_password(password):
+        flash("Invalid password.", InfoboxKind.ERROR)
+        return redirect(url_for('.settings', username=user.username))
+
+    if password != password2:
+        flash("Passwords do not match.", InfoboxKind.ERROR)
+        return redirect(url_for('.settings', username=user.username))
+
+    hashed = digest(password)
+    user.update({'password_hash': hashed})
+    extend_session(user.id)
+    flash('Password updated.', InfoboxKind.INFO)
+    return redirect(url_for('.settings', username=user.username))
+
+
+@bp.post('/<username>/clear_avatar')
+@login_required
+def clear_avatar(username):
+    user = get_active_user()
+    if user.is_default_avatar():
+        return redirect(url_for('.settings', user.username))
+
+    old_avatar = Avatars.find({'id': user.avatar_id})
+    user.update({'avatar_id': 1})
+    # delete old avi
+    filename = os.path.join(current_app.config['AVATAR_UPLOAD_PATH'], os.path.basename(old_avatar.file_path))
+    os.remove(filename)
+    old_avatar.delete()
+    return redirect(url_for('.settings', username=user.username))
+
+
+@bp.post("/log_out")
+@login_required
+def log_out():
+    user = get_active_user()
+    session_obj = Sessions.find({"key": session['pyrom_session_key']})
+    session_obj.delete()
+
+    session.clear()
+    return redirect(url_for(".log_in"))
+
+
+@bp.post("/confirm_user/<user_id>")
+@login_required
+@mod_only("topics.all_topics")
+def confirm_user(user_id):
+    target_user = Users.find({"id": user_id})
+    if not target_user:
+        return redirect(url_for('.all_topics'))
+    if int(target_user.permission) > PermissionLevel.GUEST.value:
+        return redirect(url_for('.page', username=target_user.username))
+
+    target_user.update({
+        "permission": PermissionLevel.USER.value,
+        "confirmed_on": int(time.time()),
+    })
+    return redirect(url_for(".page", username=target_user.username))
+
+
+@bp.post("/mod_user/<user_id>")
+@login_required
+@admin_only("topics.all_topics")
+def mod_user(user_id):
+    target_user = Users.find({"id": user_id})
+    if not target_user:
+        return redirect(url_for('.all_topics'))
+    if target_user.is_mod():
+        return redirect(url_for('.page', username=target_user.username))
+
+    target_user.update({
+        "permission": PermissionLevel.MODERATOR.value,
+    })
+    return redirect(url_for(".page", username=target_user.username))
+
+
+@bp.post("/demod_user/<user_id>")
+@login_required
+@admin_only("topics.all_topics")
+def demod_user(user_id):
+    target_user = Users.find({"id": user_id})
+    if not target_user:
+        return redirect(url_for('.all_topics'))
+    if not target_user.is_mod():
+        return redirect(url_for('.page', username=target_user.username))
+
+    target_user.update({
+        "permission": PermissionLevel.USER.value,
+    })
+    return redirect(url_for(".page", username=target_user.username))
+
+
+@bp.post("/guest_user/<user_id>")
+@login_required
+@mod_only("topics.all_topics")
+def guest_user(user_id):
+    target_user = Users.find({"id": user_id})
+    if not target_user:
+        return redirect(url_for('.all_topics'))
+    if get_active_user().is_mod_only() and target_user.is_mod():
+        return redirect(url_for('.page', username=target_user.username))
+
+    target_user.update({
+        "permission": PermissionLevel.GUEST.value,
+    })
+    return redirect(url_for(".page", username=target_user.username))
+
+
+@bp.get("/<username>/inbox")
+@login_required
+def inbox(username):
+    user = get_active_user()
+    if username != user.username:
+        return redirect(url_for(".inbox", username = user.username))
+
+    new_posts = []
+    subscription = Subscriptions.find({"user_id": user.id})
+    all_subscriptions = None
+    total_unreads_count = None
+    if subscription:
+        all_subscriptions = user.get_all_subscriptions()
+        q = """
+            WITH thread_metadata AS (
+                SELECT
+                    posts.thread_id, threads.slug AS thread_slug, threads.title AS thread_title, COUNT(*) AS unread_count, MAX(posts.created_at) AS newest_post_time
+                FROM
+                    posts
+                LEFT JOIN
+                    threads ON threads.id = posts.thread_id
+                LEFT JOIN
+                    subscriptions ON subscriptions.thread_id = posts.thread_id
+                WHERE subscriptions.user_id = ? AND posts.created_at > subscriptions.last_seen
+                GROUP BY posts.thread_id
+            )
+
+            SELECT
+                tm.thread_id, tm.thread_slug, tm.thread_title, tm.unread_count, tm.newest_post_time,
+
+                posts.id, posts.created_at, post_history.content, post_history.edited_at, users.username, users.status, avatars.file_path AS avatar_path, posts.thread_id, users.id AS user_id, post_history.original_markup, users.signature_rendered
+            FROM
+                thread_metadata tm
+            JOIN
+                posts ON posts.thread_id = tm.thread_id
+            JOIN
+                post_history ON posts.current_revision_id = post_history.id
+            JOIN
+                users ON posts.user_id = users.id
+            LEFT JOIN
+                threads ON threads.id = posts.thread_id
+            LEFT JOIN
+                avatars ON users.avatar_id = avatars.id
+            LEFT JOIN
+                subscriptions ON subscriptions.thread_id = posts.thread_id
+            WHERE
+                subscriptions.user_id = ? AND posts.created_at > subscriptions.last_seen
+            ORDER BY
+                tm.newest_post_time DESC, posts.created_at ASC"""
+        new_posts_raw = db.query(q, user.id, user.id)
+        current_thread_id = None
+        current_thread_group = None
+        total_unreads_count = 0
+        for row in new_posts_raw:
+            if row['thread_id'] != current_thread_id:
+                current_thread_group = {
+                    'thread_id': row['thread_id'],
+                    'thread_title': row['thread_title'],
+                    'unread_count': row['unread_count'],
+                    'thread_slug': row['thread_slug'],
+                    'newest_post_time': row['newest_post_time'],
+                    'posts': [],
+                }
+                total_unreads_count += int(row['unread_count'])
+                new_posts.append(current_thread_group)
+                current_thread_id = row['thread_id']
+            current_thread_group['posts'].append({
+                'id': row['id'],
+                'created_at': row['created_at'],
+                'content': row['content'],
+                'edited_at': row['edited_at'],
+                'username': row['username'],
+                'status': row['status'],
+                'avatar_path': row['avatar_path'],
+                'thread_id': row['thread_id'],
+                'user_id': row['user_id'],
+                'original_markup': row['original_markup'],
+                'signature_rendered': row['signature_rendered'],
+
+                'thread_slug': row['thread_slug'],
+            })
+
+    return render_template("users/inbox.html", new_posts = new_posts, total_unreads_count = total_unreads_count, all_subscriptions = all_subscriptions)
+
+
+@bp.get('/reset-link/<key>')
+def reset_link_login(key):
+    reset_link = PasswordResetLinks.find({
+        'key': key
+    })
+    if not reset_link:
+        return redirect(url_for('topics.all_topics'))
+
+    if int(time.time()) > int(reset_link.expires_at):
+        reset_link.delete()
+        return redirect(url_for('topics.all_topics'))
+
+    target_user = Users.find({
+        'id': reset_link.user_id
+    })
+
+    return render_template('users/reset_link_login.html', username = target_user.username)
+
+
+@bp.post('/reset-link/<key>')
+def reset_link_login_form(key):
+    reset_link = PasswordResetLinks.find({
+        'key': key
+    })
+    if not reset_link:
+        return redirect('topics.all_topics')
+
+    if int(time.time()) > int(reset_link.expires_at):
+        reset_link.delete()
+        return redirect('topics.all_topics')
+
+    password = request.form.get('password')
+    password2 = request.form.get('password2')
+
+    if not validate_password(password):
+        flash("Invalid password.", InfoboxKind.ERROR)
+        return redirect(url_for('.reset_link_login', key=key))
+
+    if password != password2:
+        flash("Passwords do not match.", InfoboxKind.ERROR)
+        return redirect(url_for('.reset_link_login', key=key))
+
+    target_user = Users.find({
+        'id': reset_link.user_id
+    })
+    reset_link.delete()
+
+    hashed = digest(password)
+    target_user.update({'password_hash': hashed})
+    session_obj = create_session(target_user.id)
+
+    session['pyrom_session_key'] = session_obj.key
+    flash("Logged in!", InfoboxKind.INFO)
+
+    return redirect(url_for('.page', username=target_user.username))
+
+
+@bp.get('/<username>/invite-links/')
+@login_required
+def invite_links(username):
+    target_user = Users.find({
+        'username': username
+    })
+    if not target_user or not target_user.can_invite():
+        return redirect(url_for('.page', username=username))
+
+    if target_user.username != get_active_user().username:
+        return redirect(url_for('.invite_links', username=target_user.username))
+
+    invites = InviteKeys.findall({
+        'created_by': target_user.id
+    })
+
+    return render_template('users/invite_links.html', invites=invites)
+
+
+@bp.post('/<username>/invite-links/create')
+@login_required
+def create_invite_link(username):
+    target_user = Users.find({
+        'username': username
+    })
+    if not target_user or not target_user.can_invite():
+        return redirect(url_for('.page', username=username))
+
+    if target_user.username != get_active_user().username:
+        return redirect(url_for('.invite_links', username=target_user.username))
+
+    invite = InviteKeys.create({
+        'created_by': target_user.id,
+        'key': secrets.token_urlsafe(20),
+    })
+
+    return redirect(url_for('.invite_links', username=target_user.username))
+
+
+@bp.post('/<username>/invite-links/revoke')
+@login_required
+def revoke_invite_link(username):
+    target_user = Users.find({
+        'username': username
+    })
+    if not target_user or not target_user.can_invite():
+        return redirect(url_for('.page', username=username))
+
+    if target_user.username != get_active_user().username:
+        return redirect(url_for('.invite_links', username=target_user.username))
+
+    invite = InviteKeys.find({
+        'key': request.form.get('key'),
+    })
+
+    if not invite:
+        return redirect(url_for('.invite_links', username=target_user.username))
+
+    if invite.created_by != target_user.id:
+        return redirect(url_for('.invite_links', username=target_user.username))
+
+    invite.delete()
+
+    return redirect(url_for('.invite_links', username=target_user.username))

app/schema.py

@@ -2,7 +2,114 @@ from .db import db
 
 # list of statements
 SCHEMA = [
+    """CREATE TABLE IF NOT EXISTS "api_rate_limits" (
+    "id" INTEGER NOT NULL PRIMARY KEY,
+    "method" TEXT NOT NULL,
+    "user_id" INTEGER REFERENCES users(id) ON DELETE CASCADE,
+    "logged_at" INTEGER DEFAULT (unixepoch(CURRENT_TIMESTAMP))
+    )""",
 
+    """CREATE TABLE IF NOT EXISTS "avatars" (
+    "id" INTEGER NOT NULL PRIMARY KEY,
+    "file_path" TEXT NOT NULL UNIQUE,
+    "uploaded_at" INTEGER DEFAULT (unixepoch(CURRENT_TIMESTAMP))
+    )""",
+
+    """CREATE TABLE IF NOT EXISTS "post_history" (
+    "id" INTEGER NOT NULL PRIMARY KEY,
+    "post_id" INTEGER REFERENCES posts(id) ON DELETE CASCADE,
+    "content" TEXT NOT NULL,
+    "edited_at" INTEGER DEFAULT (unixepoch(CURRENT_TIMESTAMP)),
+    "is_initial_revision" BOOLEAN DEFAULT FALSE
+    , "original_markup" TEXT NOT NULL, "markup_language" TEXT NOT NULL DEFAULT 'babycode'
+    )""",
+
+    """CREATE TABLE IF NOT EXISTS "posts" (
+    "id" INTEGER NOT NULL PRIMARY KEY,
+    "thread_id" INTEGER REFERENCES threads(id) ON DELETE CASCADE,
+    "user_id" INTEGER REFERENCES users(id) ON DELETE SET NULL,
+    "created_at" INTEGER DEFAULT (unixepoch(CURRENT_TIMESTAMP)),
+    "current_revision_id" INTEGER REFERENCES post_history(id)
+    )""",
+
+    """CREATE TABLE IF NOT EXISTS "sessions" (
+    "id" INTEGER NOT NULL PRIMARY KEY,
+    "key" TEXT NOT NULL UNIQUE,
+    "user_id" INTEGER REFERENCES users(id) ON DELETE CASCADE,
+    "expires_at" INTEGER NOT NULL,
+    "created_at" INTEGER DEFAULT (unixepoch(CURRENT_TIMESTAMP))
+    )""",
+
+    """CREATE TABLE IF NOT EXISTS "subscriptions" (
+    "id" INTEGER NOT NULL PRIMARY KEY,
+    "user_id" INTEGER REFERENCES users(id) ON DELETE CASCADE,
+    "thread_id" INTEGER REFERENCES threads(id) ON DELETE CASCADE,
+    "last_seen" INTEGER DEFAULT (unixepoch(CURRENT_TIMESTAMP)) NOT NULL
+    )""",
+
+    """CREATE TABLE IF NOT EXISTS "threads" (
+    "id" INTEGER NOT NULL PRIMARY KEY,
+    "topic_id" INTEGER REFERENCES topics(id) ON DELETE CASCADE,
+    "user_id" INTEGER REFERENCES users(id) ON DELETE SET NULL,
+    "title" TEXT NOT NULL,
+    "slug" TEXT NOT NULL UNIQUE,
+    "created_at" INTEGER DEFAULT (unixepoch(CURRENT_TIMESTAMP)),
+    "is_locked" BOOLEAN DEFAULT FALSE, "is_stickied" BOOLEAN DEFAULT FALSE
+    )""",
+
+    """CREATE TABLE IF NOT EXISTS "topics" (
+    "id" INTEGER NOT NULL PRIMARY KEY,
+    "name" TEXT NOT NULL,
+    "slug" TEXT NOT NULL UNIQUE,
+    "description" TEXT NOT NULL DEFAULT '', "is_locked" BOOLEAN DEFAULT FALSE, "sort_order" INTEGER NOT NULL DEFAULT 0
+    )""",
+
+    """CREATE TABLE IF NOT EXISTS "users" (
+    "id" INTEGER NOT NULL PRIMARY KEY,
+    "username" TEXT NOT NULL UNIQUE,
+    "password_hash" TEXT NOT NULL,
+    "permission" INTEGER NOT NULL DEFAULT 0,
+    "created_at" INTEGER DEFAULT (unixepoch(CURRENT_TIMESTAMP)),
+    "confirmed_on" INTEGER, "status" TEXT DEFAULT '',
+    "avatar_id" REFERENCES avatars(id) DEFAULT 1,
+    "signature_original_markup" TEXT NOT NULL DEFAULT '',
+    "signature_rendered" TEXT NOT NULL DEFAULT ''
+    )""",
+
+    """CREATE TABLE IF NOT EXISTS "reactions" (
+    "id" INTEGER NOT NULL PRIMARY KEY,
+    "user_id" REFERENCES users(id) ON DELETE CASCADE,
+    "post_id" REFERENCES posts(id) ON DELETE CASCADE,
+    "reaction_text" TEXT NOT NULL DEFAULT ''
+    )""",
+
+    """CREATE TABLE IF NOT EXISTS "password_reset_links" (
+    "id" INTEGER NOT NULL PRIMARY KEY,
+    "user_id" REFERENCES users(id) ON DELETE CASCADE,
+    "expires_at" INTEGER DEFAULT (unixepoch(CURRENT_TIMESTAMP)),
+    "key" TEXT NOT NULL UNIQUE
+    )""",
+
+    """CREATE TABLE IF NOT EXISTS "invite_keys" (
+    "id" INTEGER NOT NULL PRIMARY KEY,
+    "created_by" REFERENCES users(id) ON DELETE CASCADE,
+    "key" TEXT NOT NULL UNIQUE
+    )""",
+
+    # INDEXES
+    "CREATE INDEX IF NOT EXISTS idx_post_history_post_id ON post_history(post_id)",
+    "CREATE INDEX IF NOT EXISTS idx_posts_thread ON posts(thread_id, created_at, id)",
+    "CREATE INDEX IF NOT EXISTS idx_posts_thread_id ON posts(thread_id)",
+    "CREATE INDEX IF NOT EXISTS idx_rate_limit_user_method ON api_rate_limits (user_id, method)",
+    "CREATE INDEX IF NOT EXISTS idx_subscription_user_thread ON subscriptions (user_id, thread_id)",
+    "CREATE INDEX IF NOT EXISTS idx_threads_slug ON threads(slug)",
+    "CREATE INDEX IF NOT EXISTS idx_threads_topic_id ON threads(topic_id)",
+    "CREATE INDEX IF NOT EXISTS idx_topics_slug ON topics(slug)",
+    "CREATE INDEX IF NOT EXISTS session_keys ON sessions(key)",
+    "CREATE INDEX IF NOT EXISTS sessions_user_id ON sessions(user_id)",
+
+    "CREATE INDEX IF NOT EXISTS reaction_post_text ON reactions(post_id, reaction_text)",
+    "CREATE INDEX IF NOT EXISTS reaction_user_post_text ON reactions(user_id, post_id, reaction_text)",
 ]
 
 def create():

app/templates/babycode.html

@@ -0,0 +1,178 @@
+<!-- kate: remove-trailing-space off; -->
+{% extends 'base.html' %}
+{% block title %}babycode guide{% endblock %}
+{% block content %}
+<div class=darkbg>
+  <h1 class="thread-title">Babycode guide</h1>
+</div>
+<div class="babycode-guide-container">
+  <div class="guide-topics">
+    {% set sections %}
+      <section class="babycode-guide-section">
+        <h2 id="what-is-babycode">What is babycode?</h2>
+        <p>You may be familiar with BBCode, a loosely related family of markup languages popular on forums. Babycode is another, simplified, dialect of those languages. It is a way of formatting text by enclosing parts of it in special tags.</p>
+      </section>
+      <section class="babycode-guide-section">
+        <h2 id="text-formatting-tags">Text formatting tags</h2>
+        <ul class='babycode-guide-list'>
+          <li>To make some text <strong>bold</strong>, enclose it in <code class="inline-code">[b][/b]</code>:<br>
+          [b]Hello World[/b]<br>
+          Will become<br>
+          <strong>Hello World</strong>
+          </li>
+        </ul>
+        <ul class='babycode-guide-list'>
+          <li>To <em>italicize</em> text, enclose it in <code class="inline-code">[i][/i]</code>:<br>
+          [i]Hello World[/i]<br>
+          Will become<br>
+          <em>Hello World</em>
+          </li>
+        </ul>
+        <ul class='babycode-guide-list'>
+          <li>To make some text <del>strikethrough</del>, enclose it in <code class="inline-code">[s][/s]</code>:<br>
+          [s]Hello World[/s]<br>
+          Will become<br>
+          <del>Hello World</del>
+          </li>
+        </ul>
+        <ul class='babycode-guide-list'>
+          <li>To <u>underline</u> some text, enclose it in <code class="inline-code">[u][/u]</code>:<br>
+          [u]Hello World[/u]<br>
+          Will become<br>
+          <u>Hello World</u>
+          </li>
+        </ul>
+        <ul class='babycode-guide-list'>
+          <li>To make some text {{ "[big]big[/big]" | babycode | safe }}, enclose it in <code class="inline-code">[big][/big]</code>:<br>
+          [big]Hello World[/big]<br>
+          Will become<br>
+          {{ "[big]Hello World[/big]" | babycode | safe }}
+          <li>Similarly, you can make text {{ "[small]small[/small]" | babycode | safe }} with <code class="inline-code">[small][/small]</code>:<br>
+          [small]Hello World[/small]<br>
+          Will become<br>
+          {{ "[small]Hello World[/small]" | babycode | safe }}
+          </li>
+        </ul>
+        <ul class='babycode-guide-list'>
+          <li>You can change the text color by using <code class="inline-code">[color][/color]</code>:<br>
+          [color=red]Red text[/color]<br>
+          [color=white]White text[/color]<br>
+          [color=#3b08f0]Blueish text[/color]<br>
+          Will become<br>
+          {{ "[color=red]Red text[/color]" | babycode | safe }}<br>
+          {{ "[color=white]White text[/color]" | babycode | safe }}<br>
+          {{ "[color=#3b08f0]Blueish text[/color]" | babycode | safe }}<br>
+          </li>
+        </ul>
+        <ul class='babycode-guide-list'>
+          <li>You can center text by enclosing it in <code class="inline-code">[center][/center]</code>:<br>
+          [center]Hello World[/center]<br>
+          Will become<br>
+          {{ "[center]Hello World[/center]" | babycode | safe }}
+          </li>
+          <li>You can right-align text by enclosing it in <code class="inline-code">[right][/right]</code>:<br>
+          [right]Hello World[/right]<br>
+          Will become<br>
+          {{ "[right]Hello World[/right]" | babycode | safe }}
+          </li>
+          Note: the center and right tags will break the paragraph. See <a href="#paragraph-rules">Paragraph rules</a> for more details.
+        </ul>
+      </section>
+      <section class="babycode-guide-section">
+        <h2 id="emoji">Emoji</h2>
+        <p>There are a few emoji in the style of old forum emotes:</p>
+        <table class="emoji-table">
+          <tr>
+            <th>Short code</th>
+            <th>Emoji result</th>
+          </tr>
+          {% for emoji in __emoji %}
+            <tr>
+              <td>{{ ("[code]:%s:[/code]" % emoji) | babycode | safe }}</td>
+              <td>{{ __emoji[emoji] | safe }}</td>
+            </tr>
+          {% endfor %}
+        </table>
+        <p>Special thanks to the <a href="https://gh.vercte.net/forumoji/">Forumoji project</a> and its contributors for these graphics.</p>
+      </section>
+      <section class="babycode-guide-section">
+        <h2 id="paragraph-rules">Paragraph rules</h2>
+        <p>Line breaks in babycode work like Markdown: to start a new paragraph, use two line breaks:</p>
+        {{ '[code]paragraph 1\n\nparagraph 2[/code]' | babycode | safe }}
+        Will produce:<br>
+        {{ 'paragraph 1\n\nparagraph 2' | babycode | safe }}
+        <p>To break a line without starting a new paragraph, end a line with two spaces:</p>
+        {{ '[code]paragraph 1  \nstill paragraph 1[/code]' | babycode | safe }}
+        That will produce:<br>
+        {{ 'paragraph 1  \nstill paragraph 1' | babycode | safe }}
+        <p>Additionally, the following tags will break into a new paragraph:</p>
+        <ul>
+          <li><code class="inline-code">[code]</code> (code block, not inline);</li>
+          <li><code class="inline-code">[img]</code>;</li>
+          <li><code class="inline-code">[center]</code>;</li>
+          <li><code class="inline-code">[right]</code>;</li>
+          <li><code class="inline-code">[ul]</code> and <code class="inline-code">[ol]</code>;</li>
+          <li><code class="inline-code">[quote]</code>.</li>
+        </ul>
+      </section>
+      <section class="babycode-guide-section">
+        <h2 id="links">Links</h2>
+        <p>Loose links (starting with http:// or https://) will automatically get converted to clickable links. To add a label to a link, use<br><code class="inline-code">[url=https://example.com]Link label[/url]</code>:<br>
+        <a href="https://example.com">Link label</a></p>
+      </section>
+      <section class="babycode-guide-section">
+        <h2 id="attaching-an-image">Attaching an image</h2>
+        <p>To add an image to your post, use the <code class="inline-code">[img]</code> tag:<br>
+        <code class="inline-code">[img=https://forum.poto.cafe/avatars/default.webp]the Python logo with a cowboy hat[/img]</code>
+        {{ '[img=/static/avatars/default.webp]the Python logo with a cowboy hat[/img]' | babycode | safe }}
+        </p>
+        <p>Text inside the tag becomes the alt text. The attribute is the image URL. The text inside the tag will become the image's alt text.</p>
+        <p>Images will always break up a paragraph and will get scaled down to a maximum of 400px. However, consecutive image tags will try to stay in one line, wrapping if necessary. Break the paragraph if you wish to keep images on their own paragraph.</p>
+        <p>Multiple images attached to a post can be clicked to open a dialog to view them.</p>
+      </section>
+      <section class="babycode-guide-section">
+        <h2 id="adding-code-blocks">Adding code blocks</h2>
+        {% set code = 'func _ready() -> void:\n\tprint("hello world!")' %}
+        <p>There are two kinds of code blocks recognized by babycode: inline and block. Inline code blocks do not break a paragraph. They can be added with <code class="inline-code">[code]your code here[/code]</code>. As long as there are no line breaks inside the code block, it is considered inline. If there are any, it will produce this:</p>
+        {{ ('[code]%s[/code]' % code) | babycode | safe }}
+        <br>
+        <p>Inline code tags look like this: {{ '[code]Inline code[/code]' | babycode | safe }}</p>
+        <p>Babycodes are not parsed inside code blocks.</p>
+      </section>
+      <section class="babycode-guide-section">
+        <h2 id="quoting">Quoting</h2>
+        <p>Text enclosed within <code class="inline-code">[quote][/quote]</code> will look like a quote:</p>
+        <blockquote>A man provided with paper, pencil, and rubber, and subject to strict discipline, is in effect a universal machine.</blockquote>
+      </section>
+      <section class="babycode-guide-section">
+        <h2 id="lists">Lists</h2>
+        {% set list = '[ul]\nitem 1\n\nitem 2\n\nitem 3  \nstill item 3 (break line without inserting a new item by using two spaces at the end of a line)\n[/ul]' %}
+        <p>There are two kinds of lists, ordered (1, 2, 3, ...) and unordered (bullet points). Ordered lists are made with <code class="inline-code">[ol][/ol]</code> tags, and unordered with <code class="inline-code">[ul][/ul]</code>. Every new paragraph according to the <a href="#paragraph-rules">usual paragraph rules</a> will create a new list item. For example:</p>
+        {{ ('[code]%s[/code]' % list) | babycode | safe }}
+        Will produce the following list:
+        {{ list | babycode | safe }}
+      </section>
+      <section class="babycode-guide-section">
+      <h2 id="spoilers">Spoilers</h2>
+      {% set spoiler = "[spoiler=Major Metal Gear Spoilers]Snake dies[/spoiler]" %}
+      <p>You can make a section collapsible by using the <code class="inline-code">[spoiler]</code> tag:</p>
+      {{ ("[code]\n%s[/code]" % spoiler) | babycode | safe }}
+      Will produce:
+      {{ spoiler | babycode | safe }}
+      All other tags are supported inside spoilers.
+      </section>
+    {% endset %}
+    {{ sections | safe }}
+  </div>
+  <div class="guide-toc">
+    <h2>Table of contents</h2>
+    {% set toc = sections | extract_h2 %}
+    <ul>
+      {% for heading in toc %}
+        <li><a href='#{{ heading.id }}'>{{ heading.text }}</a></li>
+      {% endfor %}
+    </ul>
+  </div>
+</div>
+
+{% endblock %}

app/templates/base.html

@@ -0,0 +1,29 @@
+{% from 'common/macros.html' import infobox with context %}
+<!DOCTYPE HTML>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  {% if self.title() %}
+    <title>{{config.SITE_NAME}} - {% block title %}{% endblock %}</title>
+  {% else %}
+    <title>{{config.SITE_NAME}}</title>
+  {% endif %}
+  <link rel="stylesheet" href="{{ ("/static/css/%s.css" % get_prefers_theme()) | cachebust }}">
+  <link rel="icon" type="image/png" href="/static/favicon.png">
+</head>
+<body>
+  {% include 'common/topnav.html' %}
+  {% with messages = get_flashed_messages(with_categories=true) %}
+    {% if messages %}
+      {% for category, message in messages %}
+        {{ infobox(message, category) }}
+      {% endfor %}
+    {% endif %}
+  {% endwith %}
+  {% block content %}{% endblock %}
+  <footer class="darkbg">
+    <span>Pyrom commit <a href="{{ "https://git.poto.cafe/yagich/pyrom/commit/" + __commit }}">{{ __commit[:8] }}</a></span>
+  </footer>
+  <script src="{{ "/static/js/ui.js" | cachebust }}"></script>
+  <script src="{{ "/static/js/date-fmt.js" | cachebust }}"></script>
+</body>

app/templates/common/macros.html

@@ -0,0 +1,222 @@
+{% macro pager(current_page, page_count) %}
+{% set left_start = [1, current_page - 5] | max %}
+{% set right_end = [page_count, current_page + 5] | min %}
+<div class="pager">
+  <span>Page:</span>
+  {% if current_page > 5 %}
+    <a href="?page=1" class="pagebutton">1</a>
+    {% if left_start > 2 %}
+      <span class="currentpage">&hellip;</span>
+    {% endif %}
+  {% endif %}
+  {% for i in range(left_start, current_page) %}
+    <a href="?page={{i}}" class="pagebutton">{{i}}</a>
+  {% endfor %}
+  {% if page_count > 0 %}
+    <span class="currentpage">{{current_page}}</span>
+  {% endif %}
+  {% for i in range(current_page + 1, right_end + 1) %}
+    <a href="?page={{i}}" class="pagebutton">{{i}}</a>
+  {% endfor %}
+  {% if right_end < page_count %}
+    {% if right_end < page_count - 1 %}
+      <span class="currentpage">&hellip;</span>
+    {% endif %}
+    <a href="?page={{page_count}}" class="pagebutton">{{page_count}}</a>
+  {% endif %}
+</div>
+{% endmacro %}
+
+{% macro infobox(message, kind=InfoboxKind.INFO) %}
+<div class="{{ "infobox " + InfoboxHTMLClass[kind] }}">
+  <span>
+  <div class="infobox-icon-container">
+    <img src="{{ InfoboxIcons[kind] }}">
+  </div>
+  {{ message }}
+  </span>
+</div>
+{% endmacro %}
+
+{% macro timestamp(unix_ts) %}
+<span class="timestamp" data-utc="{{ unix_ts }}">{{ unix_ts | ts_datetime('%Y-%m-%d %H:%M')}} <abbr title="Server Time">ST</abbr></span>
+{% endmacro %}
+
+{% macro babycode_editor_component(ta_name, ta_placeholder="Post body", optional=False, prefill="") %}
+<div class="babycode-editor-container">
+  <div class="tab-buttons">
+    <button type=button class="tab-button active" data-target-id="tab-edit">Write</button>
+    <button type=button class="tab-button" data-target-id="tab-preview">Preview</button>
+  </div>
+  <div class="tab-content active" id="tab-edit">
+    <span class="babycode-button-container">
+      <button class="babycode-button" type=button id="post-editor-bold" title="Insert Bold"><strong>B</strong></button>
+      <button class="babycode-button" type=button id="post-editor-italics" title="Insert Italics"><em>I</em></button>
+      <button class="babycode-button" type=button id="post-editor-strike" title="Insert Strikethrough"><del>S</del></button>
+      <button class="babycode-button" type=button id="post-editor-underline" title="Insert Underline"><u>U</u></button>
+      <button class="babycode-button" type=button id="post-editor-url" title="Insert Link"><code>://</code></button>
+      <button class="babycode-button" type=button id="post-editor-code" title="Insert Code block"><code>&lt;/&gt;</code></button>
+      <button class="babycode-button contain-svg full" type=button id="post-editor-img" title="Insert Image"><img src="/static/misc/image.svg"></button>
+      <button class="babycode-button" type=button id="post-editor-ol" title="Insert Ordered list">1.</button>
+      <button class="babycode-button" type=button id="post-editor-ul" title="Insert Unordered list">&bullet;</button>
+      <button class="babycode-button contain-svg full" type=button id="post-editor-spoiler" title="Insert spoiler"><img src="/static/misc/spoiler.svg"></button>
+    </span>
+    <textarea class="babycode-editor" name="{{ ta_name }}" id="babycode-content" placeholder="{{ ta_placeholder }}" {{ "required" if not optional else "" }}>{{ prefill }}</textarea>
+    <a href="{{ url_for("app.babycode_guide") }}" target="_blank">babycode guide</a>
+  </div>
+  <div class="tab-content" id="tab-preview">
+    <div id="babycode-preview-errors-container">Type something!</div>
+    <div id="babycode-preview-container"></div>
+  </div>
+</div>
+<script src="{{ "/static/js/babycode-editor.js" | cachebust }}"></script>
+{% endmacro %}
+
+{% macro babycode_editor_form(ta_name, prefill = "", cancel_url="", endpoint="") %}
+{% set save_button_text = "Post reply" if not cancel_url else "Save" %}
+<form class="post-edit-form" method="post" action={{ endpoint }}>
+  {{babycode_editor_component(ta_name, prefill = prefill)}}
+  {% if not cancel_url %}
+    <span>
+      <input type="checkbox" id="subscribe" name="subscribe" {{ "checked" if session.get('subscribe_by_default', default=true) else "" }}>
+      <label for="subscribe">Subscribe to thread</label>
+    </span>
+  {% endif %}
+  <span>
+    <input type="submit" value="{{ save_button_text }}">
+    {% if cancel_url %}
+      <a class="linkbutton warn" href="{{ cancel_url }}">Cancel</a>
+    {% endif %}
+  </span>
+</form>
+{% endmacro %}
+
+{% macro full_post(post, render_sig = True, is_latest = False, editing = False, active_user = None, no_reply = false, Reactions = none) %}
+{% set postclass = "post" %}
+{% if editing %}
+  {% set postclass = postclass + " editing" %}
+{% endif %}
+{% set post_permalink = url_for("threads.thread", slug = post['thread_slug'], after = post['id'], _anchor = ("post-" + (post['id'] | string))) %}
+<div class=" {{ postclass }}" id="post-{{ post['id'] }}" data-post-id="{{ post['id'] }}">
+  <div class="usercard">
+    <div class="usercard-inner">
+      <a href="{{ url_for("users.page", username=post['username']) }}" style="display: contents;">
+      <img src="{{ post['avatar_path'] }}" class="avatar">
+      </a>
+      <a href="{{ url_for("users.page", username=post['username']) }}" class="username-link">{{ post['username'] }}</a>
+      {% if post['status'] %}
+        <em class="user-status">{{ post['status'] }}</em>
+      {% endif %}
+    </div>
+  </div>
+
+  <div class="post-content-container" {{ "id=latest-post" if is_latest else "" }}>
+    <div class="post-info">
+      <a href="{{ post_permalink }}" title="Permalink"><i>
+        {% if (post['edited_at'] | int) > (post['created_at'] | int) %}
+          Edited on {{ timestamp(post['edited_at']) }}
+        {% else %}
+          Posted on {{ timestamp(post['edited_at']) }}
+        {% endif %}
+      </i></a>
+      <span>
+        {% set show_edit = false %}
+        {% if active_user %}
+          {% set show_edit = (active_user.id | string) == (post['user_id'] | string) and (not post['thread_is_locked'] or active_user.is_mod()) and not no_reply %}
+        {% endif %}
+        {% if show_edit %}
+          <a class="linkbutton" href="{{ url_for('posts.edit', post_id=post.id, _anchor='babycode-content') }}">Edit</a>
+        {% endif %}
+
+        {% set show_reply = true %}
+
+        {% if not active_user %}
+          {% set show_reply = false %}
+        {% elif post['thread_is_locked'] and not active_user.is_mod() %}
+          {% set show_reply = false %}
+        {% elif active_user.is_guest() %}
+          {% set show_reply = false %}
+        {% elif editing %}
+          {% set show_reply = false %}
+        {% elif no_reply %}
+          {% set show_reply = false %}
+        {% endif %}
+
+        {% if show_reply %}
+          {% set qtext = "[url=%s]%s said:[/url]" | format(post_permalink, post['username']) %}
+          {% set reply_text = "%s\n[quote]\n%s\n[/quote]\n" | format(qtext, post['original_markup']) %}
+          <button value="{{ reply_text }}" class="reply-button">Quote</button>
+        {% endif %}
+
+        {% set show_delete = false %}
+
+        {% if active_user %}
+          {% set show_delete = (((post['user_id'] | string) == (active_user.id | string) and not post['thread_is_locked']) or active_user.is_mod()) and not no_reply %}
+        {% endif %}
+
+        {% if show_delete %}
+          <button class="critical post-delete-button" value="{{ post['id'] }}">Delete</button>
+        {% endif %}
+      </span>
+    </div>
+    <div class="post-content">
+      {% if not editing %}
+        <div class="post-inner" data-post-permalink="{{ post_permalink }}" data-author-username="{{ post.username }}">{{ post['content'] | safe }}</div>
+        {% if render_sig and post['signature_rendered'] %}
+          <div class="signature-container">
+            {{ post['signature_rendered'] | safe }}
+          </div>
+        {% endif %}
+      {% else %}
+        {{ babycode_editor_form(cancel_url = post_permalink, prefill = post['original_markup'], ta_name = "new_content") }}
+      {% endif %}
+    </div>
+    {% if Reactions -%}
+      {% set can_react = true -%}
+
+      {% if not active_user -%}
+        {% set can_react = false -%}
+      {% elif post['thread_is_locked'] and not active_user.is_mod() -%}
+        {% set can_react = false -%}
+      {% elif active_user.is_guest() -%}
+        {% set can_react = false -%}
+      {% elif editing -%}
+        {% set can_react = false -%}
+      {% endif -%}
+
+      {% set reactions = Reactions.for_post(post.id) -%}
+        <div class="post-reactions">
+        {% for reaction in reactions %}
+          {% set reactors = Reactions.get_users(post.id, reaction.reaction_text) | map(attribute='username') | list %}
+          {% set reactors_trimmed = reactors[:10] %}
+          {% set reactors_str = reactors_trimmed | join (',\n') %}
+          {% if reactors | count > 10 %}
+            {% set reactors_str = reactors_str + '\n...and many others' %}
+          {% endif %}
+          {% set has_reacted = active_user is not none and active_user.username in reactors %}
+          <span class="reaction-container" data-emoji="{{ reaction.reaction_text }}" data-post-id="{{ post.id }}"><button type="button" class="reduced reaction-button {{"active" if has_reacted else ""}}" {{ "disabled" if not can_react else ""}} title="{{reactors_str}}"><img class=emoji src="/static/emoji/{{reaction.reaction_text}}.png"> x<span class="reaction-count" data-emoji="{{ reaction.reaction_text }}">{{reaction.c}}</span></button>
+          </span>
+        {% endfor %}
+        {% if can_react %}
+          <button type="button" class="reduced add-reaction-button" data-post-id="{{ post.id }}">Add reaction</button>
+        {% endif %}
+        </div>
+    {% endif %}
+  </div>
+</div>
+{% endmacro %}
+
+{% macro accordion(hidden=false, style="", disabled=false) %}
+{% if disabled %}
+{% set hidden = true %}
+{% endif %}
+<div class="accordion {{ "hidden" if hidden else ""}}" style="{{style}}">
+  <div class="accordion-header">
+    <button type="button" class="accordion-toggle" {{"disabled" if disabled else ""}}>{{ "+" if hidden else "-" }}</button>
+    {{ caller('header') }}
+  </div>
+  <div class="accordion-content {{ "hidden" if hidden else "" }}">
+    {{ caller('content') }}
+  </div>
+</div>
+{% endmacro %}

app/templates/common/topnav.html

@@ -0,0 +1,30 @@
+<nav id="topnav">
+  <span>
+    <a class="site-title" href="{{url_for('topics.all_topics')}}">{{config.SITE_NAME}}</a>
+  </span>
+  <span>
+  {% if not is_logged_in() %}
+    {% if not config.DISABLE_SIGNUP %}
+    Welcome, guest. Please <a href="{{url_for('users.sign_up')}}">sign up</a> or <a href="{{url_for('users.log_in')}}">log in</a>
+    {% else %}
+    Welcome, guest. Please <a href="{{url_for('users.log_in')}}">log in</a>
+    {% endif %}
+  {% else %}
+    {% with user = get_active_user() %}
+      Welcome, <a href="{{ url_for("users.page", username = user.username) }}">{{user.username}}</a>
+      &bullet;
+      <a href="{{ url_for("users.settings", username = user.username) }}">Settings</a>
+      &bullet;
+      <a href="{{ url_for("users.inbox", username = user.username) }}">Inbox</a>
+      {% if config.DISABLE_SIGNUP and user.can_invite() %}
+        &bullet;
+        <a href="{{ url_for('users.invite_links', username=user.username )}}">Invite to {{ config.SITE_NAME }}</a>
+      {% endif %}
+      {% if user.is_mod() %}
+        &bullet;
+        <a href="{{ url_for("mod.user_list") }}">User list</a>
+      {% endif %}
+    {% endwith %}
+  {% endif %}
+  </span>
+</nav>

app/templates/mod/sort-topics.html

@@ -0,0 +1,18 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="darkbg settings-container">
+  <h1>Change topics order</h1>
+  <p>Drag topic titles to reoder them. Press submit when done. The topics will appear to users in the order set here.</p>
+  <form method="post" id=topics-container>
+      {% for topic in topics %}
+        <div draggable="true" class="draggable-topic" ondragover="dragOver(event)" ondragstart="dragStart(event)" ondragend="dragEnd()">
+          <div class="thread-title">{{ topic['name'] }}</div>
+          <div>{{ topic.description }}</div>
+          <input type="hidden" name="{{ topic['id'] }}" value="{{ topic['sort-order'] }}" class="topic-input">
+        </div>
+      {% endfor %}
+      <input type=submit value="Save order">
+    </form>
+</div>
+<script src="{{ "/static/js/sort-topics.js" | cachebust }}"></script>
+{% endblock %}

app/templates/mod/user-list.html

@@ -0,0 +1,69 @@
+{% from "common/macros.html" import timestamp, accordion %}
+{% extends "base.html" %}
+{% block content %}
+<div class="darkbg inbox-container">
+  {% set guests = (users | selectattr('permission', 'eq', PermissionLevel.GUEST.value) | list) %}
+  {% set not_guests = (users | selectattr('permission', 'gt', PermissionLevel.GUEST.value) | list) %}
+  {% call(section) accordion(disabled=(guests | count==0)) %}
+    {% if section == "header" %}
+      <span>Unconfirmed guests</span>
+    {% elif section == "content" %}
+      <table class="colorful-table">
+        <thead>
+          <th>Username</th>
+          <th class="small">Signed up on</th>
+        </thead>
+        {% for user in guests %}
+          <tr>
+            <td>
+              <a href="{{url_for("users.page", username=user['username'])}}">{{user['username']}}
+              </a>
+            </td>
+            <td>
+              {{ timestamp(user.created_at) }}
+            </td>
+          </tr>
+        {% endfor %}
+      </table>
+    {% endif %}
+  {% endcall %}
+
+  {% call(section) accordion() %}
+    {% if section == "header" %}
+      <span>Other users</span>
+    {% elif section == "content" %}
+      <table class="colorful-table">
+        <thead>
+          <th>Username</th>
+          <th class="small">Permission</th>
+          <th class="small">Signed up on</th>
+          {% if active_user.is_admin() %}
+            <th class="small">Create password reset link</th>
+          {% endif %}
+        </thead>
+        {% for user in not_guests %}
+          <tr>
+            <td>
+              <a href="{{url_for("users.page", username=user['username'])}}">{{user['username']}}
+              </a>
+            </td>
+            <td>
+              {{ user.permission | permission_string }}
+            </td>
+            <td>
+              {{ timestamp(user.created_at) }}
+            </td>
+            {% if active_user.is_admin() %}
+              <td>
+                <form method="post" action="{{url_for('mod.create_reset_pass', user_id=user.id)}}">
+                  <input type="submit" class="warn" value="Create password reset link">
+                </form>
+              </td>
+            {% endif %}
+          </tr>
+        {% endfor %}
+      </table>
+    {% endif %}
+  {% endcall %}
+</div>
+{% endblock %}

app/templates/posts/edit.html

@@ -0,0 +1,18 @@
+{% from 'common/macros.html' import full_post %}
+{% extends 'base.html' %}
+{% block title %}editing a post{% endblock %}
+{% block content %}
+{% for post in prev_context | reverse %}
+  {{ full_post(post=post, no_reply=true, active_user=active_user) }}
+{% endfor %}
+<span class="context-explain">
+  <span>&uarr;&uarr;&uarr;</span><i>Context</i><span>&uarr;&uarr;&uarr;</span>
+</span>
+{{ full_post(post=editing_post, editing=true, no_reply=true, active_user=active_user) }}
+<span class="context-explain">
+  <span>&darr;&darr;&darr;</span><i>Context</i><span>&darr;&darr;&darr;</span>
+</span>
+{% for post in next_context %}
+  {{ full_post(post=post, no_reply=true, active_user=active_user) }}
+{% endfor %}
+{% endblock %}

app/templates/threads/create.html

@@ -0,0 +1,22 @@
+{% from "common/macros.html" import babycode_editor_component %}
+{% extends "base.html" %}
+{% block title %}drafting a thread{% endblock %}
+{% block content %}
+<div class="darkbg settings-container">
+  <h1>New thread</h1>
+  <form method="post">
+    <label for="topic_id">Topic</label>
+    <select name="topic_id" id="topic_id" autocomplete="off">
+      {% for topic in all_topics %}
+        {% set disable_topic = active_user and not active_user.can_post_to_topic(topic) %}
+        <option value="{{ topic['id'] }}" {{"selected" if (request.args.get('topic_id')) == (topic['id'] | string) else ""}} {{'disabled' if disable_topic else ''}} >{{ topic['name'] }}{{ ' (locked)' if topic.is_locked }}</option>
+      {% endfor %}
+    </select><br>
+    <label for="title">Thread title</label>
+    <input type="text" id="title" name="title" placeholder="Required" required>
+    <label for="initial_post">Post body</label><br>
+    {{ babycode_editor_component("initial_post") }}
+    <input type="submit" value="Create thread">
+  </form>
+</div>
+{% endblock %}

app/templates/threads/thread.html

@@ -0,0 +1,88 @@
+{% from 'common/macros.html' import pager, babycode_editor_form, full_post %}
+{% extends "base.html" %}
+{% block title %}{{ thread.title }}{% endblock %}
+{% block content %}
+{% set can_post = false %}
+{% set can_lock = false %}
+{% set can_subscribe = false %}
+{% if active_user %}
+  {% set can_subscribe = true %}
+  {% set can_post = (not thread.is_locked and not active_user.is_guest()) or active_user.is_mod() %}
+  {% set can_lock = ((active_user.id | int) == (thread.user_id | int)) or active_user.is_mod() %}
+{% endif %}
+<main>
+  <nav class="darkbg">
+    <h1 class="thread-title">{{ thread.title }}{% if unread_count is not none %} ({{ unread_count }} unread){% endif %}</h1>
+    <span>Posted in <a href="{{ url_for("topics.topic", slug=topic.slug) }}">{{ topic.name }}</a>
+    {% if thread.is_stickied %}
+      &bullet; <i>stickied, so it's probably important</i>
+    {% endif %}
+    </span>
+    <div>
+      {% if can_subscribe %}
+        <form class="modform" action="{{ url_for('threads.subscribe', slug=thread.slug) }}" method="post">
+          <input type='hidden' name='last_visible_post' value='{{posts[-1].id}}'>
+          <input type='hidden' name='subscribe' value='{{ 'unsubscribe' if is_subscribed else 'subscribe' }}'>
+          <input type='submit' value='{{ 'Unsubscribe' if is_subscribed else 'Subscribe' }}'>
+        </form>
+      {% endif %}
+      {% if can_lock %}
+        <form class="modform" action="{{ url_for("threads.lock", slug=thread.slug) }}" method="post">
+          <input type=hidden name='target_op' value="{{ (not thread.is_locked) | int }}">
+          <input class="warn" type="submit" value="{{"Unlock thread" if thread.is_locked else "Lock thread"}}">
+        </form>
+      {% endif %}
+      {% if active_user and active_user.is_mod() %}
+        <form class="modform" action="{{ url_for("threads.sticky", slug=thread.slug) }}" method="post">
+          <input type=hidden name='target_op' value="{{ (not thread.is_stickied) | int }}">
+          <input class="warn" type="submit" value="{{"Unsticky thread" if thread.is_stickied else "Sticky thread"}}">
+        </form>
+        <form class="modform" action="{{ url_for("threads.move", slug=thread.slug) }}" method="post">
+          <label for="new_topic_id">Move to topic:</label>
+          <select style="width:200px;" id="new_topic_id" name="new_topic_id" autocomplete="off">
+            {% for topic in topics %}
+              <option value="{{ topic['id'] }}" {{ "selected disabled" if (thread.topic_id | string) == (topic['id'] | string) else "" }}>{{ topic['name'] }}</option>
+            {% endfor %}
+          </select>
+          <input class="warn" type="submit" value="Move thread">
+        </form>
+      {% endif %}
+    </div>
+  </nav>
+  {% for post in posts %}
+    {{ full_post(post = post, active_user = active_user, is_latest = loop.index == (posts | length), Reactions = Reactions) }}
+  {% endfor %}
+</main>
+
+<nav id="bottomnav">
+  {{ pager(current_page = current_page, page_count = page_count) }}
+</nav>
+
+{% if can_post %}
+  <h1>Respond to "{{ thread.title }}"</h1>
+  {{ babycode_editor_form(ta_name = "post_content")}}
+{% endif %}
+<dialog id="delete-dialog">
+  <div class=delete-dialog-inner>
+    Are you sure you want to delete the highlighted post?
+    <span>
+      <button id=post-delete-dialog-close>Cancel</button>
+      <button class="critical" form=post-delete-form>Delete</button>
+      <form id="post-delete-form" method="post"></form>
+    </span>
+  </div>
+</dialog>
+<input type='hidden' id='allowed-reaction-emoji' value='{{ REACTION_EMOJI | join(' ') }}'>
+<input type='hidden' id='thread-subscribe-endpoint' value='{{ url_for('api.thread_updates', thread_id=thread.id) }}'>
+<div id="new-post-notification" class="new-concept-notification hidden">
+  <div class="new-notification-content">
+    <p>New post in thread!</p>
+    <span class="notification-buttons">
+      <button id="dismiss-new-post-button">Dismiss</button>
+      <a class="linkbutton" id="go-to-new-post-button">View post</a>
+      <button id="unsub-new-post-button">Stop updates</button>
+    </span>
+  </div>
+</div>
+<script src="{{ "/static/js/thread.js" | cachebust }}"></script>
+{% endblock %}

app/templates/topics/create.html

@@ -0,0 +1,14 @@
+{% extends "base.html" %}
+{% block title %}creating a topic{% endblock %}
+{% block content %}
+<div class="darkbg settings-container">
+  <h1>Create topic</h1>
+  <form method="post">
+    <label for=name>Name</label>
+    <input type="text" name="name" id="name" required><br>
+    <label for="description">Description</label>
+    <textarea id="description" name="description" required rows=5></textarea><br>
+    <input type="submit" value="Create topic">
+  </form>
+</div>
+{% endblock %}

app/templates/topics/edit.html

@@ -0,0 +1,16 @@
+{% extends "base.html" %}
+{% block title %}creating a topic{% endblock %}
+{% block content %}
+<div class="darkbg settings-container">
+  <h1>Editing topic {{ topic['name'] }}</h1>
+  <form method="post">
+    <label for=name>Name</label>
+    <input type="text" name="name" id="name" required value="{{ topic['name'] }}"><br>
+    <label for="description">Description</label>
+    <textarea id="description" name="description" required rows=5>{{ topic['description'] }}</textarea><br>
+    <input type="submit" value="Save changes">
+    <a class="linkbutton warn" href={{ url_for("topics.topic", slug=topic['slug'] )}}>Cancel</a><br>
+    <i> Note: to preserve history, you cannot change the topic URL.</i>
+  </form>
+</div>
+{% endblock %}

app/templates/topics/topic.html

@@ -0,0 +1,82 @@
+{% from 'common/macros.html' import pager, timestamp %}
+{% extends "base.html" %}
+{% block title %}browsing topic {{ topic['name'] }}{% endblock %}
+{% block content %}
+<nav class="darkbg">
+  <h1 class="thread-title">All threads in "{{topic['name']}}"</h1>
+  <span>{{topic['description']}}</span>
+  <div>
+    {% if active_user %}
+      {% if not (topic['is_locked']) | int or active_user.is_mod() %}
+        <a class="linkbutton" href="{{ url_for("threads.create", topic_id=topic['id']) }}">New thread</a>
+      {% endif %}
+      {% if active_user.is_mod() %}
+        <a class="linkbutton" href="{{url_for("topics.edit", slug=topic['slug'])}}">Edit topic</a>
+        <form class="modform" method="post" action="{{url_for("topics.edit", slug=topic['slug']) }}">
+          <input type="hidden" name="is_locked" value="{{ (not topic.is_locked) | int }}">
+          <input class="warn" type="submit" id="lock" value="{{"Unlock topic" if topic['is_locked'] else "Lock topic"}}">
+        </form>
+        <button type="button" class="critical" id="topic-delete-dialog-open">Delete</button>
+      {% endif %}
+    {% endif %}
+  </div>
+</nav>
+
+{% if topic['is_locked'] %}
+  {{ infobox("This topic is locked. Only moderators can create new threads.", InfoboxKind.INFO) }}
+{% endif %}
+
+{% if threads_list | length == 0 %}
+  <p>There are no threads in this topic.</p>
+{% else %}
+  {% for thread in threads_list %}
+    <div class="thread">
+      <div class="thread-sticky-container contain-svg">
+        {% if thread['is_stickied'] %}
+          <img src="/static/misc/sticky.svg">
+          <i>Stickied</i>
+        {% endif %}
+      </div>
+      <div class="thread-info-container">
+        <span>
+          <span class="thread-title"><a href="{{ url_for("threads.thread", slug=thread['slug']) }}">{{thread['title']}}</a></span>
+          {% if thread['id'] in subscriptions %}
+          ({{ subscriptions[thread['id']] }} unread)
+          {% endif %}
+          &bullet;
+          Started by <a href="{{ url_for("users.page", username=thread['started_by']) }}">{{ thread['started_by'] }}</a> on {{ timestamp(thread['created_at'])}}
+        </span>
+        <span>
+          Latest post by <a href="{{ url_for("users.page", username=thread['latest_post_username']) }}">{{ thread['latest_post_username'] }}</a>
+          on <a href="{{ url_for("threads.thread", slug=thread['slug'], after=thread['latest_post_id']) }}">on {{ timestamp(thread['latest_post_created_at']) }}</a>:
+        </span>
+        <span class="thread-info-post-preview">
+          {{ thread['latest_post_content'] | safe }}
+        </span>
+      </div>
+      <div class="thread-locked-container contain-svg">
+        {% if thread['is_locked'] %}
+          <img src="/static/misc/lock.svg">
+          <i>Locked</i>
+        {% endif %}
+      </div>
+    </div>
+  {% endfor %}
+{% endif %}
+<nav id="bottomnav">
+  {{ pager(current_page = current_page, page_count = page_count) }}
+</nav>
+
+<dialog id="delete-dialog">
+  <div class="delete-dialog-inner">
+    Are you sure you want to delete this topic?
+    <span>
+      <button id=topic-delete-dialog-close>Cancel</button>
+      <button class="critical" form=topic-delete-form>Delete</button>
+      <form id="topic-delete-form" method="post" action="{{ url_for("topics.delete", slug = topic.slug) }}"></form>
+    </span>
+  </div>
+</dialog>
+
+<script src="{{ "/static/js/topic.js" | cachebust }}"></script>
+{% endblock %}

app/templates/topics/topics.html

@@ -0,0 +1,43 @@
+{% from 'common/macros.html' import timestamp %}
+{% extends "base.html" %}
+{% block content %}
+<nav class="darkbg">
+  <h1 class="thread-title">All topics</h1>
+  {% if active_user and active_user.is_mod() %}
+    <a class="linkbutton" href={{ url_for("topics.create") }}>Create new topic</a>
+    <a class="linkbutton" href={{ url_for("mod.sort_topics") }}>Sort topics</a>
+  {% endif %}
+</nav>
+{% if topic_list | length == 0 %}
+  <p>There are no topics.</p>
+{% else %}
+  {% for topic in topic_list %}
+    <div class="topic">
+      <div class="topic-info-container">
+        <a class="thread-title" href="{{ url_for("topics.topic", slug=topic['slug']) }}">{{ topic['name'] }}</a>
+        {{ topic['description'] }}
+        {% if topic['latest_thread_username'] %}
+          <span>
+            Latest thread: <a href="{{ url_for("threads.thread", slug=topic['latest_thread_slug'])}}">{{topic['latest_thread_title']}}</a> by <a href="{{url_for("users.page", username=topic['latest_thread_username'])}}">{{topic['latest_thread_username']}}</a> on {{ timestamp(topic['latest_thread_created_at']) }}
+          </span>
+          {% if topic['id'] in active_threads %}
+            {% with thread=active_threads[topic['id']] %}
+              <span>
+                Latest post in: <a href="{{ url_for("threads.thread", slug=thread['thread_slug'])}}">{{ thread['thread_title'] }}</a> by <a href="{{ url_for("users.page", username=thread['username'])}}">{{ thread['username'] }}</a> at <a href="{{ get_post_url(thread.post_id, _anchor=true) }}">{{ timestamp(thread['post_created_at']) }}</a>
+              </span>
+            {% endwith %}
+          {% endif %}
+        {% else %}
+          <i>No threads yet.</i>
+        {% endif %}
+        </div>
+        <div class="topic-locked-container contain-svg">
+          {% if topic['is_locked'] %}
+            <img src="/static/misc/lock.svg"></img>
+            <i>Locked</i>
+          {% endif %}
+        </div>
+    </div>
+  {% endfor %}
+{% endif %}
+{% endblock %}

app/templates/users/inbox.html

@@ -0,0 +1,65 @@
+{% from "common/macros.html" import timestamp, full_post, accordion %}
+{% extends "base.html" %}
+{% block title %}inbox{% endblock %}
+{% block content %}
+<div class="darkbg inbox-container">
+  {% set has_subscriptions = all_subscriptions is not none %}
+  {% call(section) accordion(disabled=not has_subscriptions) %}
+    {% if section == "header" %}
+      {% if not has_subscriptions %}
+        (You have no subscriptions)
+      {% else %}
+        Your subscriptions
+      {% endif %}
+    {% elif section == "content" and has_subscriptions %}
+      <table class="colorful-table">
+        <thead>
+          <th>Thread</th>
+          <th class="small">Unsubscribe</th>
+        </thead>
+        {% for sub in all_subscriptions %}
+          <tr>
+            <td>
+              <a href=" {{ url_for("threads.thread", slug=sub.thread_slug) }} ">{{ sub.thread_title }}</a>
+            </td>
+            <td>
+              <form class="modform" method="post" action="{{ url_for("threads.subscribe", slug = sub.thread_slug) }}">
+                <input type="hidden" name="subscribe" value="unsubscribe">
+                <input class="warn" type="submit" value="Unsubscribe">
+              </form>
+            </td>
+          </tr>
+        {% endfor %}
+      </table>
+    {% endif %}
+  {% endcall %}
+  {% if has_subscriptions %}
+    {% if not new_posts %}
+      You have no unread posts.
+    {% else %}
+      You have {{ total_unreads_count }} total unread {{("post" | pluralize(num=total_unreads_count))}}:
+      {% for thread in new_posts %}
+        {% call(section) accordion() %}
+          {% if section == "header" %}
+            {% set latest_post_id = thread.posts[-1].id %}
+            {% set unread_posts_text = " (" + (thread.unread_count | string) + (" unread post" | pluralize(num=thread.unread_count)) %}
+            <a class="accordion-title" href="{{ url_for("threads.thread", slug=thread.thread_slug, after=latest_post_id, _anchor="post-" + (latest_post_id | string)) }}" title="Jump to latest post">{{thread.thread_title + unread_posts_text}}, latest at {{ timestamp(thread.newest_post_time) }})</a>
+            <form class="modform" method="post" action="{{ url_for("threads.subscribe", slug = thread.thread_slug) }}">
+              <input type="hidden" name="subscribe" value="read">
+              <input type="submit" value="Mark thread as Read">
+            </form>
+            <form class="modform" method="post" action="{{ url_for("threads.subscribe", slug = thread.thread_slug) }}">
+              <input type="hidden" name="subscribe" value="unsubscribe">
+              <input class="warn" type="submit" value="Unsubscribe">
+            </form>
+          {% elif section == "content" %}
+            {% for post in thread.posts %}
+              {{ full_post(post, no_reply = true) }}
+            {% endfor %}
+          {% endif %}
+        {% endcall %}
+      {% endfor %}
+    {% endif %}
+  {% endif %}
+</div>
+{% endblock %}

app/templates/users/invite_links.html

@@ -0,0 +1,36 @@
+{% from 'common/macros.html' import accordion %}
+{% extends 'base.html' %}
+{% block title %}invites{% endblock %}
+{% block content %}
+<div class="darkbg inbox-container">
+  <p>To manage growth, {{ config.SITE_NAME }} disallows direct sign ups. Instead, users already with an account may invite people they know. You can create invite links here. Once an invite link is used to sign up, it can no longer be used.</p>
+  {% call(section) accordion(disabled=invites | length == 0) %}
+    {% if section == 'header' %}
+    Your invites
+    {% else %}
+      {% if invites %}
+        <table class="colorful-table">
+          <thead>
+            <th class='small'>Link</th>
+            <th class='small'>Revoke</th>
+          </thead>
+        {% for invite in invites %}
+          <tr>
+            <td><a href="{{url_for('users.sign_up', key=invite.key)}}">Link</a></td>
+            <td>
+              <form method="post" action="{{ url_for('users.revoke_invite_link', username=active_user.username) }}">
+                <input type=hidden value="{{ invite.key }}" name="key">
+                <input type=submit class=warn value="Revoke">
+              </form>
+            </td>
+          </tr>
+        {% endfor %}
+        </table>
+      {% endif %}
+    {% endif %}
+  {% endcall %}
+  <form method="post" action="{{ url_for('users.create_invite_link', username=active_user.username) }}">
+    <input type=submit value="Create new invite">
+  </form>
+</div>
+{% endblock %}

app/templates/users/log_in.html

@@ -0,0 +1,14 @@
+{% extends 'base.html' %}
+{% block title %}Log in{% endblock %}
+{% block content %}
+<div class="darkbg login-container">
+  <h1>Log in</h1>
+  <form method="post">
+    <label for="username">Username</label><br>
+    <input type="text" id="username" name="username" required autocomplete="username"><br>
+    <label for="password">Password</label><br>
+    <input type="password" id="password" name="password" required autocomplete="current-password"><br>
+    <input type="submit" value="Log in">
+  </form>
+</div>
+{% endblock %}

app/templates/users/reset_link_login.html

@@ -0,0 +1,15 @@
+{% extends 'base.html' %}
+{% block title %}Reset password{% endblock %}
+{% block content %}
+<div class="darkbg login-container">
+  <h1>Reset password for {{username}}</h1>
+  <p>Send this link to {{username}} to allow them to reset their password.</p>
+  <form method="post">
+    <label for="password">New password</label><br>
+    <input type="password" id="password" name="password" autocomplete="new-password" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_])(?!.*\s).{10,}" title="10+ chars with: 1 uppercase, 1 lowercase, 1 number, 1 special char, and no spaces" required><br>
+    <label for="password2">Confirm password</label><br>
+    <input type="password" id="password2" name="password2" autocomplete="new-password" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_])(?!.*\s).{10,}" title="10+ chars with: 1 uppercase, 1 lowercase, 1 number, 1 special char, and no spaces" required><br>
+    <input type="submit" value="Reset password">
+  </form>
+</div>
+{% endblock %}

app/templates/users/settings.html

@@ -0,0 +1,45 @@
+{% from 'common/macros.html' import babycode_editor_component %}
+{% extends 'base.html' %}
+{% block title %}settings{% endblock %}
+{% block content %}
+{% set disable_avatar = not is_logged_in() %}
+<div class='darkbg settings-container'>
+  <h1>User settings</h1>
+  <form class='avatar-form' method='post' action='{{ url_for('users.set_avatar', username=active_user.username) }}' enctype='multipart/form-data'>
+    <span>Set avatar (1mb max)</span>
+    <img src='{{ active_user.get_avatar_url() }}'>
+    <input id='file' type='file' name='avatar' accept='image/*' required>
+    <div>
+      <input type='submit' value='Upload avatar' {{ 'disabled' if disable_avatar else '' }}>
+      <input type='submit' value='Clear avatar' formaction='{{ url_for('users.clear_avatar', username=active_user.username) }}' formnovalidate {{ 'disabled' if active_user.is_default_avatar() else '' }}>
+    </div>
+  </form>
+  <form method='post'>
+    <label for='theme'>Theme (beta)</label>
+    <select autocomplete='off' id='theme' name='theme'>
+      {% for theme in config.allowed_themes %}
+        <option value="{{ theme }}" {{ 'selected' if get_prefers_theme() == theme }}>{{ theme | theme_name }}</option>
+      {% endfor %}
+    </select>
+    <label for='topic_sort_by'>Sort threads by:</label>
+    <select id='topic_sort_by' name='topic_sort_by'>
+      <option value='activity' {{ 'selected' if session['sort_by'] == 'activity' else '' }}>Latest activity</option>
+      <option value='thread' {{ 'selected' if session['sort_by'] == 'thread' else '' }}>Thread creation date</option>
+    </select>
+    <label for='status'>Status</label>
+    <input type='text' id='status' name='status' value='{{ active_user.status }}' maxlength=100 placeholder='Will be shown under your name. Max 100 characters.'>
+    <label for='babycode-content'>Signature</label>
+    {{ babycode_editor_component(ta_name='signature', prefill=active_user.signature_original_markup, ta_placeholder='Will be shown under each of your posts', optional=true) }}
+    <input autocomplete='off' type='checkbox' id='subscribe_by_default' name='subscribe_by_default' {{ 'checked' if session.get('subscribe_by_default', default=true) else '' }}>
+    <label for='subscribe_by_default'>Subscribe to thread by default when responding</label><br>
+    <input type='submit' value='Save settings'>
+  </form>
+  <form method='post' action='{{ url_for('users.change_password', username=active_user.username) }}'>
+    <label for="new_password">Change password</label><br>
+    <input type="password" id="new_password" name="new_password" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_])(?!.*\s).{10,}" title="10+ chars with: 1 uppercase, 1 lowercase, 1 number, 1 special char, and no spaces" required autocomplete="new-password"><br>
+    <label for="new_password2">Confirm new password</label><br>
+    <input type="password" id="new_password2" name="new_password2" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_])(?!.*\s).{10,}" title="10+ chars with: 1 uppercase, 1 lowercase, 1 number, 1 special char, and no spaces" required autocomplete="new-password"><br>
+    <input class="warn" type="submit" value="Change password">
+  </form>
+</div>
+{% endblock %}

app/templates/users/sign_up.html

@@ -0,0 +1,25 @@
+{% extends 'base.html' %}
+{% block title %}Sign up{% endblock %}
+{% block content %}
+<div class="darkbg login-container">
+  <h1>Sign up</h1>
+  {% if inviter %}
+  <p>You have been invited by <a href="{{ url_for('users.page', username=inviter.username) }}">{{ inviter.username }}</a> to join {{ config.SITE_NAME }}. Create an identity below.</p>
+  {% endif %}
+  <form method="post">
+    {% if key %}
+      <input type="hidden" value={{key}} name="key">
+    {% endif %}
+    <label for="username">Username</label><br>
+    <input type="text" id="username" name="username" pattern="[a-zA-Z0-9_-]{3,20}" title="3-20 characters. Only upper and lowercase letters, digits, hyphens, and underscores" required autocomplete="username"><br>
+    <label for="password">Password</label>
+    <input type="password" id="password" name="password" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_])(?!.*\s).{10,255}" title="10+ chars with: 1 uppercase, 1 lowercase, 1 number, 1 special char, and no spaces" required autocomplete="new-password"><br>
+    <label for="password-confirm">Confirm Password</label>
+    <input type="password" id="password-confirm" name="password-confirm" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_])(?!.*\s).{10,255}" title="10+ chars with: 1 uppercase, 1 lowercase, 1 number, 1 special char, and no spaces" required autocomplete="new-password"><br>
+    <input type="submit" value="Sign up">
+  </form>
+  {% if not inviter %}
+  <span>After you sign up, a moderator will need to confirm your account before you will be allowed to post.</span>
+  {% endif %}
+</div>
+{% endblock %}

app/templates/users/user.html

@@ -0,0 +1,95 @@
+{% from 'common/macros.html' import timestamp %}
+{% extends 'base.html' %}
+{% block title %}{{ target_user.username }}'s profile{% endblock %}
+{% block content %}
+<div class="darkbg">
+  <h1 class="thread-title"><i>{{ target_user.username }}</i>'s profile</h1>
+  {% if active_user.id == target_user.id %}
+    <div class="user-actions">
+      <a class="linkbutton" href="{{ url_for("users.settings", username = active_user.username) }}">Settings</a>
+      <form method="post" action="{{ url_for("users.log_out") }}">
+        <input class="warn" type="submit" value="Log out">
+      </form>
+    </div>
+    {% if active_user.is_guest() %}
+      <h2>You are a guest. A Moderator needs to approve your account before you will be able to post.</h2>
+    {% endif %}
+  {% endif %}
+  {% if active_user and active_user.is_mod() and not target_user.is_system() %}
+    <h1 class="thread-title">Moderation controls</h1>
+    {% if target_user.is_guest() %}
+      <p>This user is a guest. They signed up on {{ timestamp(target_user['created_at']) }}</p>
+      <form class="modform" method="post" action="{{ url_for("users.confirm_user", user_id=target_user.id) }}">
+        <input type="submit" value="Confirm user">
+      </form>
+    {% else %}
+      <p>This user signed up on {{ timestamp(target_user['created_at']) }} and was confirmed on {{ timestamp(target_user['confirmed_on']) }}</p>
+      {% if (target_user.permission | int) < (active_user.permission | int) %}
+        <form class="modform" method="post" action="{{ url_for("users.guest_user", user_id=target_user.id) }}">
+          <input class="warn" type="submit" value="Demote user to guest (soft ban)">
+        </form>
+      {% endif %}
+      {% if active_user.is_admin() and not target_user.is_mod() %}
+        <form class="modform" method="post" action="{{ url_for("users.mod_user", user_id=target_user.id) }}">
+          <input class="warn" type="submit" value="Promote user to moderator">
+        </form>
+      {% elif target_user.is_mod() and (target_user.permission | int) < (active_user.permission | int) %}
+        <form class="modform" method="post" action="{{ url_for("users.demod_user", user_id=target_user.id) }}">
+          <input class="critical" type="submit" value="Demote user to regular user">
+        </form>
+      {% endif %}
+    {% endif %}
+  {% endif %}
+</div>
+<div class="user-info">
+  <div class="user-page-usercard">
+    <div class="usercard-inner">
+      <img class="avatar" src="{{ target_user.get_avatar_url() }}">
+      <strong class="big">{{ target_user.username }}</strong>
+      {% if target_user.status %}
+        <em class="user-status">{{ target_user.status }}</em>
+      {% endif %}
+      {% if target_user.signature_rendered %}
+        Signature:
+        <div>{{ target_user.signature_rendered | safe }}</div>
+      {% endif %}
+    </div>
+  </div>
+  <div class="user-page-stats">
+    {% with stats = target_user.get_post_stats() %}
+      <ul class="user-stats-list">
+        <li>Permission: {{ target_user.permission | permission_string }}</li>
+        <li>Posts created: {{ stats.post_count }}</li>
+        <li>Threads started: {{ stats.thread_count }}</li>
+        {% if stats.latest_thread_title %}
+          <li>Latest started thread: <a href="{{ url_for("threads.thread", slug = stats.latest_thread_slug) }}">{{ stats.latest_thread_title }}</a>
+        {% endif %}
+        {% if stats.inviter_username %}
+          <li>Invited by <a href="{{ url_for('users.page', username=stats.inviter_username) }}">{{ stats.inviter_username }}</a></li>
+        {% endif %}
+      </ul>
+    {% endwith %}
+    Latest posts:
+    {% with posts = target_user.get_latest_posts() %}
+      <div class="user-page-posts">
+        {% for post in posts %}
+          <div class="post-content-container">
+            <div class="post-info">
+              <a href="{{ url_for("threads.thread", slug=post.thread_slug, after=post.id) }}" title="permalink"><i>
+              {% if (post.edited_at | int) > (post.created_at | int) %}
+                Edited on {{ timestamp(post.edited_at) }}
+              {% else %}
+                Posted on {{ timestamp(post.edited_at) }}
+              {% endif %}
+              </i></a>
+            </div>
+            <div class="post-content user-page-post-preview">
+              <div class="post-inner wider">{{ post.content | safe }}</div>
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+    {% endwith %}
+  </div>
+</div>
+{% endblock %}

build-themes.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+set -e
+
+sass_dir="sass"
+css_dir="data/static/css"
+
+if [[ "$1" == "--watch" && -n "$2" ]]; then
+  file="$2"
+  [[ $(basename "$file") = _* ]] && exit 1
+  sass --no-source-map --watch "$file" "$css_dir/theme-$(basename "$file" .scss).css"
+else
+  set -u
+  rm -r "$css_dir/"
+  #build default first
+  sass --no-source-map "$sass_dir/_default.scss" "$css_dir/style.css"
+  for file in "$sass_dir"/*.scss; do
+    [[ $(basename "$file") = _* ]] && continue
+    sass --no-source-map "$file" "$css_dir/theme-$(basename "$file" .scss).css"
+  done
+fi

config/pyrom_config.toml

@@ -0,0 +1,8 @@
+SITE_NAME = "Porom"
+DISABLE_SIGNUP = false # if true, no one can sign up.
+
+# if neither of the following two options is true,
+# no one can sign up. this may be useful later when/if LDAP is implemented.
+
+MODS_CAN_INVITE = true # if true, allows moderators to create invite links. useless unless DISABLE_SIGNUP to be true.
+USERS_CAN_INVITE = false # if true, allows users to create invite links. useless unless DISABLE_SIGNUP to be true.

config/secrets.prod.env.example

@@ -0,0 +1 @@
+FLASK_SECRET_KEY=your_cryptographically_secure_key_here

data/static/css/style.css

@@ -0,0 +1,900 @@
+@font-face {
+  font-family: "site-title";
+  src: url("/static/fonts/ChicagoFLF.woff2");
+}
+@font-face {
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_Roman.woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_Bold.woff2");
+  font-weight: bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_Italic.woff2");
+  font-weight: normal;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_BoldItalic.woff2");
+  font-weight: bold;
+  font-style: italic;
+}
+.reaction-button.active, .tab-button, .currentpage, .pagebutton, input[type=file]::file-selector-button, button.warn, input[type=submit].warn, .linkbutton.warn, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton {
+  cursor: default;
+  font-size: 0.9em;
+  font-family: "Cadman";
+  text-decoration: none;
+  border: 1px solid black;
+  border-radius: 4px;
+  padding: 5px 20px;
+  margin: 10px 0;
+}
+
+body {
+  font-family: "Cadman";
+  margin: 20px 100px;
+  background-color: rgb(173.5214173228, 183.6737007874, 161.0262992126);
+  color: black;
+}
+
+a:link {
+  color: #c11c1c;
+}
+a:visited {
+  color: #730c0c;
+}
+
+.big {
+  font-size: 1.8rem;
+}
+
+#topnav {
+  padding: 10px;
+  margin: 0;
+  display: flex;
+  justify-content: end;
+  background-color: #c1ceb1;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+#bottomnav {
+  padding: 10px;
+  margin: 0;
+  display: flex;
+  justify-content: end;
+  background-color: rgb(143.7039271654, 144.3879625984, 142.8620374016);
+}
+
+.darkbg {
+  padding-bottom: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  background-color: rgb(143.7039271654, 144.3879625984, 142.8620374016);
+}
+
+.user-actions {
+  display: flex;
+  column-gap: 15px;
+}
+
+.site-title {
+  font-family: "site-title";
+  font-size: 3rem;
+  margin: 0 20px;
+  text-decoration: none;
+  color: black !important;
+}
+
+.thread-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.post {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  grid-template-rows: 1fr;
+  gap: 0;
+  grid-auto-flow: row;
+  grid-template-areas: "usercard post-content-container";
+  border: 2px outset rgb(135.1928346457, 145.0974015748, 123.0025984252);
+}
+
+.usercard {
+  grid-area: usercard;
+  padding: 20px 10px;
+  border: 4px outset rgb(217.26, 220.38, 213.42);
+  background-color: rgb(143.7039271654, 144.3879625984, 142.8620374016);
+  border-right: solid 2px;
+}
+
+.usercard-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  top: 10px;
+  position: sticky;
+}
+
+.post-content-container {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: min-content 1fr min-content;
+  gap: 0;
+  grid-auto-flow: row;
+  grid-template-areas: "post-info" "post-content" "post-reactions";
+  grid-area: post-content-container;
+  min-height: 100%;
+}
+
+.post-info {
+  grid-area: post-info;
+  display: flex;
+  min-height: 70px;
+  justify-content: space-between;
+  padding: 5px 20px;
+  align-items: center;
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+  background-color: rgb(173.5214173228, 183.6737007874, 161.0262992126);
+}
+
+.post-content {
+  grid-area: post-content;
+  padding: 20px 20px 0 20px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: #c1ceb1;
+}
+
+.post-reactions {
+  grid-area: post-reactions;
+  min-height: 50px;
+  display: flex;
+  padding: 5px 20px;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 5px;
+  background-color: rgb(173.5214173228, 183.6737007874, 161.0262992126);
+  border-top: 2px dotted gray;
+}
+
+.post-inner {
+  height: 100%;
+  padding-right: 25%;
+}
+.post-inner.wider {
+  padding-right: 12.5%;
+}
+
+.signature-container {
+  border-top: 2px dotted gray;
+  padding: 10px 0;
+}
+
+pre code {
+  display: block;
+  background-color: rgb(38.5714173228, 40.9237007874, 35.6762992126);
+  font-size: 1rem;
+  color: white;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+  border-left: 10px solid rgb(229.84, 231.92, 227.28);
+  padding: 20px;
+  overflow: scroll;
+  tab-size: 4;
+}
+
+.copy-code-container {
+  position: sticky;
+  width: calc(100% - 4px);
+  display: flex;
+  justify-content: space-between;
+  align-items: last baseline;
+  font-family: "Cadman";
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+  background-color: #c1ceb1;
+  border-left: 2px solid black;
+  border-right: 2px solid black;
+  border-top: 2px solid black;
+}
+.copy-code-container::before {
+  content: "code block";
+  font-style: italic;
+  margin-left: 10px;
+}
+
+.copy-code {
+  margin-right: 10px;
+}
+
+.inline-code {
+  background-color: rgb(38.5714173228, 40.9237007874, 35.6762992126);
+  color: white;
+  padding: 5px 10px;
+  display: inline-block;
+  margin: 4px;
+  border-radius: 4px;
+  font-size: 1rem;
+  white-space: pre;
+}
+
+#delete-dialog, .lightbox-dialog {
+  padding: 0;
+  border-radius: 4px;
+  border: 2px solid black;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
+}
+
+.delete-dialog-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+}
+
+.lightbox-inner {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  min-width: 400px;
+  background-color: #c1ceb1;
+  color: black;
+  gap: 10px;
+}
+
+.lightbox-image {
+  max-width: 70vw;
+  max-height: 70vh;
+  object-fit: scale-down;
+}
+
+.lightbox-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+blockquote {
+  padding: 10px 20px;
+  margin: 10px;
+  border-radius: 4px;
+  border-left: 10px solid rgb(229.84, 231.92, 227.28);
+  background-color: rgba(0, 0, 0, 0.1490196078);
+}
+
+.user-info {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  grid-template-rows: 1fr;
+  gap: 0;
+  grid-template-areas: "user-page-usercard user-page-stats";
+}
+
+.user-page-usercard {
+  grid-area: user-page-usercard;
+  padding: 20px 10px;
+  border: 4px outset rgb(217.26, 220.38, 213.42);
+  background-color: rgb(143.7039271654, 144.3879625984, 142.8620374016);
+  border-right: solid 2px;
+}
+
+.user-page-stats {
+  grid-area: user-page-stats;
+  padding: 20px 30px;
+  border: 1px solid black;
+}
+
+.user-stats-list {
+  list-style: none;
+  margin: 0 0 10px 0;
+}
+
+.user-page-posts {
+  border-left: 1px solid black;
+  border-right: 1px solid black;
+  border-bottom: 1px solid black;
+  background-color: #c1ceb1;
+}
+
+.user-page-post-preview {
+  max-height: 200px;
+  mask-image: linear-gradient(180deg, #000 60%, transparent);
+}
+
+.avatar {
+  width: 90%;
+  height: 90%;
+  object-fit: contain;
+  margin-bottom: 10px;
+}
+
+.username-link {
+  overflow-wrap: anywhere;
+}
+
+.user-status {
+  text-align: center;
+}
+
+button, input[type=submit], .linkbutton {
+  display: inline-block;
+  background-color: rgb(177, 206, 204.5);
+  color: black !important;
+}
+button:hover, input[type=submit]:hover, .linkbutton:hover {
+  background-color: rgb(192.6, 215.8, 214.6);
+}
+button:active, input[type=submit]:active, .linkbutton:active {
+  background-color: rgb(166.6881496063, 178.0118503937, 177.4261417323);
+}
+button:disabled, input[type=submit]:disabled, .linkbutton:disabled {
+  background-color: rgb(209.535, 211.565, 211.46);
+}
+button.reduced, input[type=submit].reduced, .linkbutton.reduced {
+  margin: 0;
+  padding: 5px;
+}
+button.critical, input[type=submit].critical, .linkbutton.critical {
+  background-color: red;
+  color: white !important;
+}
+button.critical:hover, input[type=submit].critical:hover, .linkbutton.critical:hover {
+  background-color: #ff3333;
+}
+button.critical:active, input[type=submit].critical:active, .linkbutton.critical:active {
+  background-color: rgb(149.175, 80.325, 80.325);
+}
+button.critical:disabled, input[type=submit].critical:disabled, .linkbutton.critical:disabled {
+  background-color: rgb(174.675, 156.825, 156.825);
+}
+button.critical.reduced, input[type=submit].critical.reduced, .linkbutton.critical.reduced {
+  margin: 0;
+  padding: 5px;
+}
+button.warn, input[type=submit].warn, .linkbutton.warn {
+  background-color: #fbfb8d;
+  color: black !important;
+}
+button.warn:hover, input[type=submit].warn:hover, .linkbutton.warn:hover {
+  background-color: rgb(251.8, 251.8, 163.8);
+}
+button.warn:active, input[type=submit].warn:active, .linkbutton.warn:active {
+  background-color: rgb(198.3813559322, 198.3813559322, 154.4186440678);
+}
+button.warn:disabled, input[type=submit].warn:disabled, .linkbutton.warn:disabled {
+  background-color: rgb(217.55, 217.55, 209.85);
+}
+button.warn.reduced, input[type=submit].warn.reduced, .linkbutton.warn.reduced {
+  margin: 0;
+  padding: 5px;
+}
+
+input[type=file]::file-selector-button {
+  background-color: rgb(177, 206, 204.5);
+  color: black !important;
+  margin: 10px;
+}
+input[type=file]::file-selector-button:hover {
+  background-color: rgb(192.6, 215.8, 214.6);
+}
+input[type=file]::file-selector-button:active {
+  background-color: rgb(166.6881496063, 178.0118503937, 177.4261417323);
+}
+input[type=file]::file-selector-button:disabled {
+  background-color: rgb(209.535, 211.565, 211.46);
+}
+input[type=file]::file-selector-button.reduced {
+  margin: 0;
+  padding: 5px;
+}
+
+p {
+  margin: 15px 0;
+}
+
+.pagebutton {
+  background-color: rgb(177, 206, 204.5);
+  color: black !important;
+  padding: 5px 5px;
+  margin: 0;
+  display: inline-block;
+  min-width: 20px;
+  text-align: center;
+}
+.pagebutton:hover {
+  background-color: rgb(192.6, 215.8, 214.6);
+}
+.pagebutton:active {
+  background-color: rgb(166.6881496063, 178.0118503937, 177.4261417323);
+}
+.pagebutton:disabled {
+  background-color: rgb(209.535, 211.565, 211.46);
+}
+.pagebutton.reduced {
+  margin: 0;
+  padding: 5px;
+}
+
+.currentpage {
+  border: none;
+  padding: 5px 5px;
+  margin: 0;
+  display: inline-block;
+  min-width: 20px;
+  text-align: center;
+}
+
+.modform {
+  display: inline;
+}
+
+.login-container > * {
+  width: 40%;
+  margin: auto;
+}
+
+.settings-container > * {
+  width: 40%;
+  margin: auto;
+}
+
+.avatar-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px 0;
+}
+
+input[type=text], input[type=password], textarea, select {
+  border: 1px solid black;
+  border-radius: 4px;
+  padding: 7px 10px;
+  width: 100%;
+  box-sizing: border-box;
+  resize: vertical;
+  color: black;
+  background-color: rgb(217.8, 225.6, 208.2);
+}
+input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
+  background-color: rgb(230.2, 235.4, 223.8);
+}
+
+.infobox {
+  border: 2px solid black;
+  background-color: #81a3e6;
+  padding: 20px 15px;
+  color: black;
+}
+.infobox.critical {
+  background-color: #ed8181;
+  color: black;
+}
+.infobox.warn {
+  background-color: #fbfb8d;
+  color: black;
+}
+
+.infobox > span {
+  display: flex;
+  align-items: center;
+}
+
+.infobox-icon-container {
+  min-width: 60px;
+  padding-right: 15px;
+}
+
+.thread {
+  display: grid;
+  grid-template-columns: 96px 1.6fr 96px;
+  grid-template-rows: 1fr;
+  gap: 0;
+  grid-auto-flow: row;
+  min-height: 96px;
+  grid-template-areas: "thread-sticky-container thread-info-container thread-locked-container";
+}
+
+.thread-sticky-container {
+  grid-area: thread-sticky-container;
+  border: 2px outset rgb(217.26, 220.38, 213.42);
+  background-color: none;
+}
+
+.thread-locked-container {
+  grid-area: thread-locked-container;
+  border: 2px outset rgb(217.26, 220.38, 213.42);
+  background-color: none;
+}
+
+.contain-svg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.contain-svg:not(.full) > svg, .contain-svg:not(.full) > img {
+  height: 50%;
+  width: 50%;
+}
+.contain-svg.full > svg, .contain-svg.full > img {
+  height: 100%;
+  width: 100%;
+}
+
+.post-img-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.post-image {
+  object-fit: contain;
+  max-width: 400px;
+  max-height: 400px;
+  min-width: 200px;
+  min-height: 200px;
+  flex: 1 1 0%;
+  width: auto;
+  height: auto;
+}
+
+.thread-info-container {
+  grid-area: thread-info-container;
+  background-color: #c1ceb1;
+  padding: 5px 20px;
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  max-height: 110px;
+  mask-image: linear-gradient(180deg, #000 60%, transparent);
+}
+
+.thread-info-post-preview {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline;
+  margin-right: 25%;
+}
+
+.babycode-guide-section {
+  background-color: #c1ceb1;
+  padding: 5px 20px;
+  border: 1px solid black;
+  padding-right: 25%;
+}
+
+.babycode-guide-container {
+  display: grid;
+  grid-template-columns: 1.5fr 300px;
+  grid-template-rows: 1fr;
+  gap: 0;
+  grid-auto-flow: row;
+  grid-template-areas: "guide-topics guide-toc";
+}
+
+.guide-topics {
+  grid-area: guide-topics;
+  overflow: hidden;
+}
+
+.guide-toc {
+  grid-area: guide-toc;
+  position: sticky;
+  top: 100px;
+  align-self: start;
+  padding: 10px;
+  border-bottom-right-radius: 8px;
+  background-color: rgb(177, 206, 204.5);
+  border-right: 1px solid black;
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+}
+
+.emoji-table tr td {
+  text-align: center;
+}
+
+.emoji-table tr th {
+  padding-left: 50px;
+  padding-right: 50px;
+}
+
+.emoji-table {
+  margin: auto;
+}
+
+.emoji-table, th, td {
+  border: 1px solid black;
+  border-collapse: collapse;
+}
+
+.colorful-table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 10px 0;
+  overflow: hidden;
+}
+
+.colorful-table tr th {
+  background-color: #beb1ce;
+  padding: 5px 0;
+}
+
+.colorful-table tr td {
+  background-color: rgb(177, 206, 204.5);
+  padding: 5px 0;
+  text-align: center;
+}
+
+.colorful-table .small {
+  width: 250px;
+}
+
+.topic {
+  display: grid;
+  grid-template-columns: 1.5fr 96px;
+  grid-template-rows: 1fr;
+  gap: 0;
+  grid-auto-flow: row;
+  grid-template-areas: "topic-info-container topic-locked-container";
+}
+
+.topic-info-container {
+  grid-area: topic-info-container;
+  background-color: #c1ceb1;
+  padding: 5px 20px;
+  border: 1px solid black;
+  display: flex;
+  flex-direction: column;
+}
+
+.topic-locked-container {
+  grid-area: topic-locked-container;
+  border: 2px outset rgb(217.26, 220.38, 213.42);
+  background-color: none;
+}
+
+.draggable-topic {
+  cursor: pointer;
+  user-select: none;
+  background-color: #c1ceb1;
+  padding: 20px;
+  margin: 15px 0;
+  border-top: 5px outset rgb(217.26, 220.38, 213.42);
+  border-bottom: 5px outset rgb(135.1928346457, 145.0974015748, 123.0025984252);
+}
+.draggable-topic.dragged {
+  background-color: rgb(177, 206, 204.5);
+}
+
+.editing {
+  background-color: rgb(217.26, 220.38, 213.42);
+}
+
+.context-explain {
+  margin: 20px 0;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.post-edit-form {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  height: 100%;
+}
+
+.babycode-editor {
+  height: 150px;
+  font-size: 1rem;
+}
+
+.babycode-editor-container {
+  width: 100%;
+}
+
+.babycode-preview-errors-container {
+  font-size: 0.8rem;
+}
+
+.tab-button {
+  background-color: rgb(177, 206, 204.5);
+  color: black !important;
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-bottom: 0;
+}
+.tab-button:hover {
+  background-color: rgb(192.6, 215.8, 214.6);
+}
+.tab-button:active {
+  background-color: rgb(166.6881496063, 178.0118503937, 177.4261417323);
+}
+.tab-button:disabled {
+  background-color: rgb(209.535, 211.565, 211.46);
+}
+.tab-button.reduced {
+  margin: 0;
+  padding: 5px;
+}
+.tab-button.active {
+  background-color: #beb1ce;
+  padding-top: 8px;
+}
+
+.tab-content {
+  display: none;
+}
+.tab-content.active {
+  min-height: 250px;
+  display: block;
+  background-color: rgb(191.3137931034, 189.7, 193.3);
+  border: 1px solid black;
+  padding: 10px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+ul, ol {
+  margin: 10px 0 10px 30px;
+  padding: 0;
+}
+
+.new-concept-notification.hidden {
+  display: none;
+}
+
+.new-concept-notification {
+  position: fixed;
+  bottom: 80px;
+  right: 80px;
+  border: 1px solid black;
+  background-color: #81a3e6;
+  padding: 20px 15px;
+  border-radius: 4px;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
+}
+
+.emoji {
+  max-width: 15px;
+  max-height: 15px;
+}
+
+.accordion {
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+  box-sizing: border-box;
+  border: 1px solid black;
+  margin: 10px 5px;
+  overflow: hidden;
+}
+
+.accordion.hidden {
+  border-bottom: none;
+}
+
+.accordion-header {
+  display: flex;
+  align-items: center;
+  background-color: rgb(159.0271653543, 162.0727712915, 172.9728346457);
+  padding: 0 10px;
+  gap: 10px;
+  border-bottom: 1px solid black;
+}
+
+.accordion-toggle {
+  padding: 0;
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  min-height: 36px;
+}
+
+.accordion-title {
+  margin-right: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.accordion-content {
+  padding: 0 15px;
+}
+
+.accordion-content.hidden {
+  display: none;
+}
+
+.post-accordion-content {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background-color: rgb(173.5214173228, 183.6737007874, 161.0262992126);
+}
+
+.inbox-container {
+  padding: 10px;
+}
+
+.babycode-button-container {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+}
+
+.babycode-button {
+  padding: 5px 10px;
+  min-width: 36px;
+}
+.babycode-button > * {
+  font-size: 1rem;
+}
+
+.quote-popover {
+  position: absolute;
+  transform: translateX(-50%);
+  margin: 0;
+  border: none;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.5019607843);
+  padding: 5px 10px;
+}
+
+footer {
+  border-top: 1px solid black;
+}
+
+.reaction-button.active {
+  background-color: #beb1ce;
+  color: black !important;
+}
+.reaction-button.active:hover {
+  background-color: rgb(203, 192.6, 215.8);
+}
+.reaction-button.active:active {
+  background-color: rgb(171.7642913386, 166.6881496063, 178.0118503937);
+}
+.reaction-button.active:disabled {
+  background-color: rgb(210.445, 209.535, 211.565);
+}
+.reaction-button.active.reduced {
+  margin: 0;
+  padding: 5px;
+}
+
+.reaction-popover {
+  position: relative;
+  margin: 0;
+  border: none;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.5019607843);
+  padding: 5px 10px;
+  width: 250px;
+}
+
+.reaction-popover-inner {
+  display: flex;
+  flex-wrap: wrap;
+  overflow: scroll;
+  margin: auto;
+  justify-content: center;
+}
+
+.babycode-guide-list {
+  border-bottom: 1px dashed;
+}

data/static/css/theme-otomotone.css

@@ -0,0 +1,909 @@
+@font-face {
+  font-family: "site-title";
+  src: url("/static/fonts/ChicagoFLF.woff2");
+}
+@font-face {
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_Roman.woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_Bold.woff2");
+  font-weight: bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_Italic.woff2");
+  font-weight: normal;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_BoldItalic.woff2");
+  font-weight: bold;
+  font-style: italic;
+}
+.reaction-button.active, .tab-button, .currentpage, .pagebutton, input[type=file]::file-selector-button, button.warn, input[type=submit].warn, .linkbutton.warn, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton {
+  cursor: default;
+  font-size: 0.9em;
+  font-family: "Cadman";
+  text-decoration: none;
+  border: 1px solid black;
+  border-radius: 4px;
+  padding: 5px 20px;
+  margin: 10px 0;
+}
+
+body {
+  font-family: "Cadman";
+  margin: 20px 100px;
+  background-color: #220d16;
+  color: #e6e6e6;
+}
+
+a:link {
+  color: #e87fe1;
+}
+a:visited {
+  color: #ed4fb1;
+}
+
+.big {
+  font-size: 1.8rem;
+}
+
+#topnav {
+  padding: 10px;
+  margin: 0;
+  display: flex;
+  justify-content: end;
+  background-color: #303030;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+#bottomnav {
+  padding: 10px;
+  margin: 0;
+  display: flex;
+  justify-content: end;
+  background-color: #231c23;
+}
+
+.darkbg {
+  padding-bottom: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  background-color: #502d50;
+}
+
+.user-actions {
+  display: flex;
+  column-gap: 15px;
+}
+
+.site-title {
+  font-family: "site-title";
+  font-size: 3rem;
+  margin: 0 20px;
+  text-decoration: none;
+  color: white !important;
+}
+
+.thread-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.post {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  grid-template-rows: 1fr;
+  gap: 0;
+  grid-auto-flow: row;
+  grid-template-areas: "usercard post-content-container";
+  border: 2px outset rgb(96.95, 81.55, 96.95);
+}
+
+.usercard {
+  grid-area: usercard;
+  padding: 20px 10px;
+  border: 4px outset #503250;
+  background-color: #502d50;
+  border-right: solid 2px;
+}
+
+.usercard-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  top: 10px;
+  position: sticky;
+}
+
+.post-content-container {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: min-content 1fr min-content;
+  gap: 0;
+  grid-auto-flow: row;
+  grid-template-areas: "post-info" "post-content" "post-reactions";
+  grid-area: post-content-container;
+  min-height: 100%;
+}
+
+.post-info {
+  grid-area: post-info;
+  display: flex;
+  min-height: 70px;
+  justify-content: space-between;
+  padding: 5px 20px;
+  align-items: center;
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+  background-color: #412841;
+}
+
+.post-content {
+  grid-area: post-content;
+  padding: 20px 20px 0 20px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: #231c23;
+}
+
+.post-reactions {
+  grid-area: post-reactions;
+  min-height: 50px;
+  display: flex;
+  padding: 5px 20px;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 5px;
+  background-color: #503250;
+  border-top: 2px dotted gray;
+}
+
+.post-inner {
+  height: 100%;
+  padding-right: 25%;
+}
+.post-inner.wider {
+  padding-right: 12.5%;
+}
+
+.signature-container {
+  border-top: 2px dotted gray;
+  padding: 10px 0;
+}
+
+pre code {
+  display: block;
+  background-color: #302731;
+  font-size: 1rem;
+  color: white;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+  border-left: 10px solid #ae6bae;
+  padding: 20px;
+  overflow: scroll;
+  tab-size: 4;
+}
+
+.copy-code-container {
+  position: sticky;
+  width: calc(100% - 4px);
+  display: flex;
+  justify-content: space-between;
+  align-items: last baseline;
+  font-family: "Cadman";
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+  background-color: #9b649b;
+  border-left: 2px solid black;
+  border-right: 2px solid black;
+  border-top: 2px solid black;
+}
+.copy-code-container::before {
+  content: "code block";
+  font-style: italic;
+  margin-left: 10px;
+}
+
+.copy-code {
+  margin-right: 10px;
+}
+
+.inline-code {
+  background-color: #302731;
+  color: white;
+  padding: 5px 10px;
+  display: inline-block;
+  margin: 4px;
+  border-radius: 4px;
+  font-size: 1rem;
+  white-space: pre;
+}
+
+#delete-dialog, .lightbox-dialog {
+  padding: 0;
+  border-radius: 4px;
+  border: 2px solid black;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
+}
+
+.delete-dialog-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+}
+
+.lightbox-inner {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  min-width: 400px;
+  background-color: #503250;
+  color: #e6e6e6;
+  gap: 10px;
+}
+
+.lightbox-image {
+  max-width: 70vw;
+  max-height: 70vh;
+  object-fit: scale-down;
+}
+
+.lightbox-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+blockquote {
+  padding: 10px 20px;
+  margin: 10px;
+  border-radius: 4px;
+  border-left: 10px solid #ae6bae;
+  background-color: rgba(251, 175, 207, 0.0392156863);
+}
+
+.user-info {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  grid-template-rows: 1fr;
+  gap: 0;
+  grid-template-areas: "user-page-usercard user-page-stats";
+}
+
+.user-page-usercard {
+  grid-area: user-page-usercard;
+  padding: 20px 10px;
+  border: 4px outset #503250;
+  background-color: #502d50;
+  border-right: solid 2px;
+}
+
+.user-page-stats {
+  grid-area: user-page-stats;
+  padding: 20px 30px;
+  border: 1px solid black;
+}
+
+.user-stats-list {
+  list-style: none;
+  margin: 0 0 10px 0;
+}
+
+.user-page-posts {
+  border-left: 1px solid black;
+  border-right: 1px solid black;
+  border-bottom: 1px solid black;
+  background-color: #9b649b;
+}
+
+.user-page-post-preview {
+  max-height: 200px;
+  mask-image: linear-gradient(180deg, #000 60%, transparent);
+}
+
+.avatar {
+  width: 90%;
+  height: 90%;
+  object-fit: contain;
+  margin-bottom: 10px;
+}
+
+.username-link {
+  overflow-wrap: anywhere;
+}
+
+.user-status {
+  text-align: center;
+}
+
+button, input[type=submit], .linkbutton {
+  display: inline-block;
+  background-color: #3c283c;
+  color: #e6e6e6 !important;
+}
+button:hover, input[type=submit]:hover, .linkbutton:hover {
+  background-color: rgb(109.2, 72.8, 109.2);
+}
+button:active, input[type=submit]:active, .linkbutton:active {
+  background-color: rgb(47.7, 42.3, 47.7);
+}
+button:disabled, input[type=submit]:disabled, .linkbutton:disabled {
+  background-color: rgb(113.73, 109.27, 113.73);
+}
+button.reduced, input[type=submit].reduced, .linkbutton.reduced {
+  margin: 0;
+  padding: 5px;
+}
+button.critical, input[type=submit].critical, .linkbutton.critical {
+  background-color: #d53232;
+  color: #e6e6e6 !important;
+}
+button.critical:hover, input[type=submit].critical:hover, .linkbutton.critical:hover {
+  background-color: rgb(221.4, 91, 91);
+}
+button.critical:active, input[type=submit].critical:active, .linkbutton.critical:active {
+  background-color: rgb(141.7804251012, 94.9195748988, 94.9195748988);
+}
+button.critical:disabled, input[type=submit].critical:disabled, .linkbutton.critical:disabled {
+  background-color: rgb(174.255, 162.845, 162.845);
+}
+button.critical.reduced, input[type=submit].critical.reduced, .linkbutton.critical.reduced {
+  margin: 0;
+  padding: 5px;
+}
+button.warn, input[type=submit].warn, .linkbutton.warn {
+  background-color: #eaea6a;
+  color: black !important;
+}
+button.warn:hover, input[type=submit].warn:hover, .linkbutton.warn:hover {
+  background-color: rgb(238.2, 238.2, 135.8);
+}
+button.warn:active, input[type=submit].warn:active, .linkbutton.warn:active {
+  background-color: rgb(176.04, 176.04, 129.96);
+}
+button.warn:disabled, input[type=submit].warn:disabled, .linkbutton.warn:disabled {
+  background-color: rgb(199.98, 199.98, 191.02);
+}
+button.warn.reduced, input[type=submit].warn.reduced, .linkbutton.warn.reduced {
+  margin: 0;
+  padding: 5px;
+}
+
+input[type=file]::file-selector-button {
+  background-color: #3c283c;
+  color: #e6e6e6 !important;
+  margin: 10px;
+}
+input[type=file]::file-selector-button:hover {
+  background-color: rgb(109.2, 72.8, 109.2);
+}
+input[type=file]::file-selector-button:active {
+  background-color: rgb(47.7, 42.3, 47.7);
+}
+input[type=file]::file-selector-button:disabled {
+  background-color: rgb(113.73, 109.27, 113.73);
+}
+input[type=file]::file-selector-button.reduced {
+  margin: 0;
+  padding: 5px;
+}
+
+p {
+  margin: 15px 0;
+}
+
+.pagebutton {
+  background-color: #3c283c;
+  color: #e6e6e6 !important;
+  padding: 5px 5px;
+  margin: 0;
+  display: inline-block;
+  min-width: 20px;
+  text-align: center;
+}
+.pagebutton:hover {
+  background-color: rgb(109.2, 72.8, 109.2);
+}
+.pagebutton:active {
+  background-color: rgb(47.7, 42.3, 47.7);
+}
+.pagebutton:disabled {
+  background-color: rgb(113.73, 109.27, 113.73);
+}
+.pagebutton.reduced {
+  margin: 0;
+  padding: 5px;
+}
+
+.currentpage {
+  border: none;
+  padding: 5px 5px;
+  margin: 0;
+  display: inline-block;
+  min-width: 20px;
+  text-align: center;
+}
+
+.modform {
+  display: inline;
+}
+
+.login-container > * {
+  width: 40%;
+  margin: auto;
+}
+
+.settings-container > * {
+  width: 40%;
+  margin: auto;
+}
+
+.avatar-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px 0;
+}
+
+input[type=text], input[type=password], textarea, select {
+  border: 1px solid black;
+  border-radius: 4px;
+  padding: 7px 10px;
+  width: 100%;
+  box-sizing: border-box;
+  resize: vertical;
+  color: #e6e6e6;
+  background-color: #371e37;
+}
+input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
+  background-color: #514151;
+}
+
+.infobox {
+  border: 2px solid black;
+  background-color: #775891;
+  padding: 20px 15px;
+  color: #e6e6e6;
+}
+.infobox.critical {
+  background-color: #d53232;
+  color: #e6e6e6;
+}
+.infobox.warn {
+  background-color: #eaea6a;
+  color: black;
+}
+
+.infobox > span {
+  display: flex;
+  align-items: center;
+}
+
+.infobox-icon-container {
+  min-width: 60px;
+  padding-right: 15px;
+}
+
+.thread {
+  display: grid;
+  grid-template-columns: 96px 1.6fr 96px;
+  grid-template-rows: 1fr;
+  gap: 0;
+  grid-auto-flow: row;
+  min-height: 96px;
+  grid-template-areas: "thread-sticky-container thread-info-container thread-locked-container";
+}
+
+.thread-sticky-container {
+  grid-area: thread-sticky-container;
+  border: 2px outset #231c23;
+  background-color: #503250;
+}
+
+.thread-locked-container {
+  grid-area: thread-locked-container;
+  border: 2px outset #231c23;
+  background-color: #503250;
+}
+
+.contain-svg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.contain-svg:not(.full) > svg, .contain-svg:not(.full) > img {
+  height: 50%;
+  width: 50%;
+}
+.contain-svg.full > svg, .contain-svg.full > img {
+  height: 100%;
+  width: 100%;
+}
+
+.post-img-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.post-image {
+  object-fit: contain;
+  max-width: 400px;
+  max-height: 400px;
+  min-width: 200px;
+  min-height: 200px;
+  flex: 1 1 0%;
+  width: auto;
+  height: auto;
+}
+
+.thread-info-container {
+  grid-area: thread-info-container;
+  background-color: #231c23;
+  padding: 5px 20px;
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  max-height: 110px;
+  mask-image: linear-gradient(180deg, #000 60%, transparent);
+}
+
+.thread-info-post-preview {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline;
+  margin-right: 25%;
+}
+
+.babycode-guide-section {
+  background-color: #231c23;
+  padding: 5px 20px;
+  border: 1px solid black;
+  padding-right: 25%;
+}
+
+.babycode-guide-container {
+  display: grid;
+  grid-template-columns: 1.5fr 300px;
+  grid-template-rows: 1fr;
+  gap: 0;
+  grid-auto-flow: row;
+  grid-template-areas: "guide-topics guide-toc";
+}
+
+.guide-topics {
+  grid-area: guide-topics;
+  overflow: hidden;
+}
+
+.guide-toc {
+  grid-area: guide-toc;
+  position: sticky;
+  top: 100px;
+  align-self: start;
+  padding: 10px;
+  border-bottom-right-radius: 8px;
+  background-color: #3c233c;
+  border-right: 1px solid black;
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+}
+
+.emoji-table tr td {
+  text-align: center;
+}
+
+.emoji-table tr th {
+  padding-left: 50px;
+  padding-right: 50px;
+}
+
+.emoji-table {
+  margin: auto;
+}
+
+.emoji-table, th, td {
+  border: 1px solid black;
+  border-collapse: collapse;
+}
+
+.colorful-table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 10px 0;
+  overflow: hidden;
+}
+
+.colorful-table tr th {
+  background-color: #503250;
+  padding: 5px 0;
+}
+
+.colorful-table tr td {
+  background-color: #231c23;
+  padding: 5px 0;
+  text-align: center;
+}
+
+.colorful-table .small {
+  width: 250px;
+}
+
+.topic {
+  display: grid;
+  grid-template-columns: 1.5fr 96px;
+  grid-template-rows: 1fr;
+  gap: 0;
+  grid-auto-flow: row;
+  grid-template-areas: "topic-info-container topic-locked-container";
+}
+
+.topic-info-container {
+  grid-area: topic-info-container;
+  background-color: #231c23;
+  padding: 5px 20px;
+  border: 1px solid black;
+  display: flex;
+  flex-direction: column;
+}
+
+.topic-locked-container {
+  grid-area: topic-locked-container;
+  border: 2px outset #231c23;
+  background-color: #503250;
+}
+
+.draggable-topic {
+  cursor: pointer;
+  user-select: none;
+  background-color: #9b649b;
+  padding: 20px;
+  margin: 15px 0;
+  border-top: 5px outset #503250;
+  border-bottom: 5px outset rgb(96.95, 81.55, 96.95);
+}
+.draggable-topic.dragged {
+  background-color: #3c283c;
+}
+
+.editing {
+  background-color: #503250;
+}
+
+.context-explain {
+  margin: 20px 0;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.post-edit-form {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  height: 100%;
+}
+
+.babycode-editor {
+  height: 150px;
+  font-size: 1rem;
+}
+
+.babycode-editor-container {
+  width: 100%;
+}
+
+.babycode-preview-errors-container {
+  font-size: 0.8rem;
+}
+
+.tab-button {
+  background-color: #3c283c;
+  color: #e6e6e6 !important;
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-bottom: 0;
+}
+.tab-button:hover {
+  background-color: rgb(109.2, 72.8, 109.2);
+}
+.tab-button:active {
+  background-color: rgb(47.7, 42.3, 47.7);
+}
+.tab-button:disabled {
+  background-color: rgb(113.73, 109.27, 113.73);
+}
+.tab-button.reduced {
+  margin: 0;
+  padding: 5px;
+}
+.tab-button.active {
+  background-color: #8a5584;
+  padding-top: 8px;
+}
+
+.tab-content {
+  display: none;
+}
+.tab-content.active {
+  min-height: 250px;
+  display: block;
+  background-color: #503250;
+  border: 1px solid black;
+  padding: 10px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+ul, ol {
+  margin: 10px 0 10px 30px;
+  padding: 0;
+}
+
+.new-concept-notification.hidden {
+  display: none;
+}
+
+.new-concept-notification {
+  position: fixed;
+  bottom: 80px;
+  right: 80px;
+  border: 1px solid black;
+  background-color: #775891;
+  padding: 20px 15px;
+  border-radius: 4px;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
+}
+
+.emoji {
+  max-width: 15px;
+  max-height: 15px;
+}
+
+.accordion {
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+  box-sizing: border-box;
+  border: 1px solid black;
+  margin: 10px 5px;
+  overflow: hidden;
+}
+
+.accordion.hidden {
+  border-bottom: none;
+}
+
+.accordion-header {
+  display: flex;
+  align-items: center;
+  background-color: #7d467d;
+  padding: 0 10px;
+  gap: 10px;
+  border-bottom: 1px solid black;
+}
+
+.accordion-toggle {
+  padding: 0;
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  min-height: 36px;
+}
+
+.accordion-title {
+  margin-right: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.accordion-content {
+  padding: 0 15px;
+}
+
+.accordion-content.hidden {
+  display: none;
+}
+
+.post-accordion-content {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background-color: #2d212d;
+}
+
+.inbox-container {
+  padding: 10px;
+}
+
+.babycode-button-container {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+}
+
+.babycode-button {
+  padding: 5px 10px;
+  min-width: 36px;
+}
+.babycode-button > * {
+  font-size: 1rem;
+}
+
+.quote-popover {
+  position: absolute;
+  transform: translateX(-50%);
+  margin: 0;
+  border: none;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.5019607843);
+  padding: 5px 10px;
+}
+
+footer {
+  border-top: 1px solid black;
+}
+
+.reaction-button.active {
+  background-color: #8a5584;
+  color: #e6e6e6 !important;
+}
+.reaction-button.active:hover {
+  background-color: rgb(167.4843049327, 112.9156950673, 161.3067264574);
+}
+.reaction-button.active:active {
+  background-color: rgb(107.505, 93.195, 105.885);
+}
+.reaction-button.active:disabled {
+  background-color: rgb(156.9373766816, 152.1626233184, 156.396838565);
+}
+.reaction-button.active.reduced {
+  margin: 0;
+  padding: 5px;
+}
+
+.reaction-popover {
+  position: relative;
+  margin: 0;
+  border: none;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.5019607843);
+  padding: 5px 10px;
+  width: 250px;
+}
+
+.reaction-popover-inner {
+  display: flex;
+  flex-wrap: wrap;
+  overflow: scroll;
+  margin: auto;
+  justify-content: center;
+}
+
+.babycode-guide-list {
+  border-bottom: 1px dashed;
+}
+
+#topnav {
+  margin-bottom: 10px;
+  border: 10px solid rgb(40, 40, 40);
+}
+
+footer {
+  margin-top: 10px;
+}

data/static/css/theme-peachy.css

@@ -0,0 +1,929 @@
+@font-face {
+  font-family: "site-title";
+  src: url("/static/fonts/ChicagoFLF.woff2");
+}
+@font-face {
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_Roman.woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_Bold.woff2");
+  font-weight: bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_Italic.woff2");
+  font-weight: normal;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_BoldItalic.woff2");
+  font-weight: bold;
+  font-style: italic;
+}
+.reaction-button.active, .tab-button, .currentpage, .pagebutton, input[type=file]::file-selector-button, button.warn, input[type=submit].warn, .linkbutton.warn, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton {
+  cursor: default;
+  font-size: 0.9em;
+  font-family: "Cadman";
+  text-decoration: none;
+  border: 1px solid black;
+  border-radius: 16px;
+  padding: 8px 12px;
+  margin: 6px 0;
+}
+
+body {
+  font-family: "Cadman";
+  margin: 12px 50px;
+  background-color: #c85d45;
+  color: black;
+}
+
+a:link {
+  color: black;
+}
+a:visited {
+  color: black;
+}
+
+.big {
+  font-size: 1.8rem;
+}
+
+#topnav {
+  padding: 6px;
+  margin: 0;
+  display: flex;
+  justify-content: end;
+  background-color: #f27a5a;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+#bottomnav {
+  padding: 6px;
+  margin: 0;
+  display: flex;
+  justify-content: end;
+  background-color: #88486d;
+}
+
+.darkbg {
+  padding-bottom: 6px;
+  padding-left: 6px;
+  padding-right: 6px;
+  background-color: #88486d;
+}
+
+.user-actions {
+  display: flex;
+  column-gap: 8px;
+}
+
+.site-title {
+  font-family: "site-title";
+  font-size: 3rem;
+  margin: 0 12px;
+  text-decoration: none;
+  color: black !important;
+}
+
+.thread-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.post {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  grid-template-rows: 1fr;
+  gap: 0;
+  grid-auto-flow: row;
+  grid-template-areas: "usercard post-content-container";
+  border: 2px outset rgb(155.8907865169, 93.2211235955, 76.5092134831);
+}
+
+.usercard {
+  grid-area: usercard;
+  padding: 12px 6px;
+  border: none;
+  background-color: #88486d;
+  border-right: none;
+}
+
+.usercard-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  top: 6px;
+  position: sticky;
+}
+
+.post-content-container {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: min-content 1fr min-content;
+  gap: 0;
+  grid-auto-flow: row;
+  grid-template-areas: "post-info" "post-content" "post-reactions";
+  grid-area: post-content-container;
+  min-height: 100%;
+}
+
+.post-info {
+  grid-area: post-info;
+  display: flex;
+  min-height: 35px;
+  justify-content: space-between;
+  padding: 3px 12px;
+  align-items: center;
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+  background-color: #c85d45;
+}
+
+.post-content {
+  grid-area: post-content;
+  padding: 12px 12px 0 12px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: #f27a5a;
+}
+
+.post-reactions {
+  grid-area: post-reactions;
+  min-height: 50px;
+  display: flex;
+  padding: 6px 12px;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  background-color: #c85d45;
+  border-top: 2px dotted #f7bfdf;
+}
+
+.post-inner {
+  height: 100%;
+  padding-right: 25%;
+}
+.post-inner.wider {
+  padding-right: 12.5%;
+}
+
+.signature-container {
+  border-top: 2px dotted #f7bfdf;
+  padding: 6px 0;
+}
+
+pre code {
+  display: block;
+  background-color: rgb(41.7051685393, 28.2759550562, 24.6948314607);
+  font-size: 1rem;
+  color: white;
+  border-bottom-right-radius: 16px;
+  border-bottom-left-radius: 16px;
+  border-left: 6px solid rgb(231.56, 212.36, 207.24);
+  padding: 12px;
+  overflow: scroll;
+  tab-size: 4;
+}
+
+.copy-code-container {
+  position: sticky;
+  width: calc(100% - 4px);
+  display: flex;
+  justify-content: space-between;
+  align-items: last baseline;
+  font-family: "Cadman";
+  border-top-right-radius: 16px;
+  border-top-left-radius: 16px;
+  background-color: #f27a5a;
+  border-left: 2px solid black;
+  border-right: 2px solid black;
+  border-top: 2px solid black;
+}
+.copy-code-container::before {
+  content: "code block";
+  font-style: italic;
+  margin-left: 6px;
+}
+
+.copy-code {
+  margin-right: 6px;
+}
+
+.inline-code {
+  background-color: rgb(41.7051685393, 28.2759550562, 24.6948314607);
+  color: white;
+  padding: 3px 6px;
+  display: inline-block;
+  margin: 4px;
+  border-radius: 16px;
+  font-size: 1rem;
+  white-space: pre;
+}
+
+#delete-dialog, .lightbox-dialog {
+  padding: 0;
+  border-radius: 16px;
+  border: 2px solid black;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
+}
+
+.delete-dialog-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px;
+}
+
+.lightbox-inner {
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  min-width: 400px;
+  background-color: #f27a5a;
+  color: black;
+  gap: 6px;
+}
+
+.lightbox-image {
+  max-width: 70vw;
+  max-height: 70vh;
+  object-fit: scale-down;
+}
+
+.lightbox-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+blockquote {
+  padding: 6px 12px;
+  margin: 6px;
+  border-radius: 16px;
+  border-left: 6px solid rgb(231.56, 212.36, 207.24);
+  background-color: rgba(0, 0, 0, 0.1333333333);
+}
+
+.user-info {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  grid-template-rows: 1fr;
+  gap: 0;
+  grid-template-areas: "user-page-usercard user-page-stats";
+}
+
+.user-page-usercard {
+  grid-area: user-page-usercard;
+  padding: 12px 6px;
+  border: none;
+  background-color: #88486d;
+  border-right: none;
+}
+
+.user-page-stats {
+  grid-area: user-page-stats;
+  padding: 12px 16px;
+  border: 1px solid black;
+}
+
+.user-stats-list {
+  list-style: none;
+  margin: 0 0 6px 0;
+}
+
+.user-page-posts {
+  border-left: 1px solid black;
+  border-right: 1px solid black;
+  border-bottom: 1px solid black;
+  background-color: #f27a5a;
+}
+
+.user-page-post-preview {
+  max-height: 200px;
+  mask-image: linear-gradient(180deg, #000 60%, transparent);
+}
+
+.avatar {
+  width: 90%;
+  height: 90%;
+  object-fit: contain;
+  margin-bottom: 6px;
+}
+
+.username-link {
+  overflow-wrap: anywhere;
+}
+
+.user-status {
+  text-align: center;
+}
+
+button, input[type=submit], .linkbutton {
+  display: inline-block;
+  background-color: #f27a5a;
+  color: black !important;
+}
+button:hover, input[type=submit]:hover, .linkbutton:hover {
+  background-color: rgb(244.6, 148.6, 123);
+}
+button:active, input[type=submit]:active, .linkbutton:active {
+  background-color: rgb(176.4525842697, 133.7379775281, 122.3474157303);
+}
+button:disabled, input[type=submit]:disabled, .linkbutton:disabled {
+  background-color: rgb(198.02, 189.62, 187.38);
+}
+button.reduced, input[type=submit].reduced, .linkbutton.reduced {
+  margin: 0;
+  padding: 6px;
+}
+button.critical, input[type=submit].critical, .linkbutton.critical {
+  background-color: #f73030;
+  color: white !important;
+}
+button.critical:hover, input[type=submit].critical:hover, .linkbutton.critical:hover {
+  background-color: rgb(248.6, 89.4, 89.4);
+}
+button.critical:active, input[type=submit].critical:active, .linkbutton.critical:active {
+  background-color: rgb(166.6956976744, 98.8043023256, 98.8043023256);
+}
+button.critical:disabled, input[type=submit].critical:disabled, .linkbutton.critical:disabled {
+  background-color: rgb(186.715, 172.785, 172.785);
+}
+button.critical.reduced, input[type=submit].critical.reduced, .linkbutton.critical.reduced {
+  margin: 0;
+  padding: 6px;
+}
+button.warn, input[type=submit].warn, .linkbutton.warn {
+  background-color: #fbfb8d;
+  color: black !important;
+}
+button.warn:hover, input[type=submit].warn:hover, .linkbutton.warn:hover {
+  background-color: rgb(251.8, 251.8, 163.8);
+}
+button.warn:active, input[type=submit].warn:active, .linkbutton.warn:active {
+  background-color: rgb(198.3813559322, 198.3813559322, 154.4186440678);
+}
+button.warn:disabled, input[type=submit].warn:disabled, .linkbutton.warn:disabled {
+  background-color: rgb(217.55, 217.55, 209.85);
+}
+button.warn.reduced, input[type=submit].warn.reduced, .linkbutton.warn.reduced {
+  margin: 0;
+  padding: 6px;
+}
+
+input[type=file]::file-selector-button {
+  background-color: #f27a5a;
+  color: black !important;
+  margin: 6px;
+}
+input[type=file]::file-selector-button:hover {
+  background-color: rgb(244.6, 148.6, 123);
+}
+input[type=file]::file-selector-button:active {
+  background-color: rgb(176.4525842697, 133.7379775281, 122.3474157303);
+}
+input[type=file]::file-selector-button:disabled {
+  background-color: rgb(198.02, 189.62, 187.38);
+}
+input[type=file]::file-selector-button.reduced {
+  margin: 0;
+  padding: 6px;
+}
+
+p {
+  margin: 8px 0;
+}
+
+.pagebutton {
+  background-color: #f27a5a;
+  color: black !important;
+  padding: 3px 3px;
+  margin: 0;
+  display: inline-block;
+  min-width: 36px;
+  text-align: center;
+}
+.pagebutton:hover {
+  background-color: rgb(244.6, 148.6, 123);
+}
+.pagebutton:active {
+  background-color: rgb(176.4525842697, 133.7379775281, 122.3474157303);
+}
+.pagebutton:disabled {
+  background-color: rgb(198.02, 189.62, 187.38);
+}
+.pagebutton.reduced {
+  margin: 0;
+  padding: 6px;
+}
+
+.currentpage {
+  border: none;
+  padding: 3px 3px;
+  margin: 0;
+  display: inline-block;
+  min-width: 36px;
+  text-align: center;
+}
+
+.modform {
+  display: inline;
+}
+
+.login-container > * {
+  width: 60%;
+  margin: auto;
+}
+
+.settings-container > * {
+  width: 60%;
+  margin: auto;
+}
+
+.avatar-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px 0;
+}
+
+input[type=text], input[type=password], textarea, select {
+  border: 1px solid black;
+  border-radius: 16px;
+  padding: 8px;
+  width: 100%;
+  box-sizing: border-box;
+  resize: vertical;
+  color: black;
+  background-color: rgb(247.2, 175.2, 156);
+}
+input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
+  background-color: rgb(249.8, 201.8, 189);
+}
+
+.infobox {
+  border: 2px solid black;
+  background-color: #81a3e6;
+  padding: 12px 8px;
+  color: black;
+}
+.infobox.critical {
+  background-color: #f73030;
+  color: white;
+}
+.infobox.warn {
+  background-color: #fbfb8d;
+  color: black;
+}
+
+.infobox > span {
+  display: flex;
+  align-items: center;
+}
+
+.infobox-icon-container {
+  min-width: 60px;
+  padding-right: 8px;
+}
+
+.thread {
+  display: grid;
+  grid-template-columns: 96px 1.6fr 96px;
+  grid-template-rows: 1fr;
+  gap: 0;
+  grid-auto-flow: row;
+  min-height: 96px;
+  grid-template-areas: "thread-sticky-container thread-info-container thread-locked-container";
+}
+
+.thread-sticky-container {
+  grid-area: thread-sticky-container;
+  border: 1px solid black;
+  background-color: #f27a5a;
+}
+
+.thread-locked-container {
+  grid-area: thread-locked-container;
+  border: 1px solid black;
+  background-color: #f27a5a;
+}
+
+.contain-svg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.contain-svg:not(.full) > svg, .contain-svg:not(.full) > img {
+  height: 50%;
+  width: 50%;
+}
+.contain-svg.full > svg, .contain-svg.full > img {
+  height: 100%;
+  width: 100%;
+}
+
+.post-img-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px;
+}
+
+.post-image {
+  object-fit: contain;
+  max-width: 400px;
+  max-height: 400px;
+  min-width: 200px;
+  min-height: 200px;
+  flex: 1 1 0%;
+  width: auto;
+  height: auto;
+}
+
+.thread-info-container {
+  grid-area: thread-info-container;
+  background-color: #f27a5a;
+  padding: 3px 12px;
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  max-height: 110px;
+  mask-image: linear-gradient(180deg, #000 60%, transparent);
+}
+
+.thread-info-post-preview {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline;
+  margin-right: 25%;
+}
+
+.babycode-guide-section {
+  background-color: #f27a5a;
+  padding: 3px 12px;
+  border: 1px solid black;
+  padding-right: 25%;
+}
+
+.babycode-guide-container {
+  display: grid;
+  grid-template-columns: 1.5fr 300px;
+  grid-template-rows: 1fr;
+  gap: 0;
+  grid-auto-flow: row;
+  grid-template-areas: "guide-topics guide-toc";
+}
+
+.guide-topics {
+  grid-area: guide-topics;
+  overflow: hidden;
+}
+
+.guide-toc {
+  grid-area: guide-toc;
+  position: sticky;
+  top: 100px;
+  align-self: start;
+  padding: 6px;
+  border-bottom-right-radius: 8px;
+  background-color: #f27a5a;
+  border-right: 1px solid black;
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+}
+
+.emoji-table tr td {
+  text-align: center;
+}
+
+.emoji-table tr th {
+  padding-left: 50px;
+  padding-right: 50px;
+}
+
+.emoji-table {
+  margin: auto;
+}
+
+.emoji-table, th, td {
+  border: 1px solid black;
+  border-collapse: collapse;
+}
+
+.colorful-table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 6px 0;
+  overflow: hidden;
+}
+
+.colorful-table tr th {
+  background-color: #b54444;
+  padding: 3px 0;
+}
+
+.colorful-table tr td {
+  background-color: #f27a5a;
+  padding: 3px 0;
+  text-align: center;
+}
+
+.colorful-table .small {
+  width: 250px;
+}
+
+.topic {
+  display: grid;
+  grid-template-columns: 1.5fr 96px;
+  grid-template-rows: 1fr;
+  gap: 0;
+  grid-auto-flow: row;
+  grid-template-areas: "topic-info-container topic-locked-container";
+}
+
+.topic-info-container {
+  grid-area: topic-info-container;
+  background-color: #f27a5a;
+  padding: 3px 12px;
+  border: 1px solid black;
+  display: flex;
+  flex-direction: column;
+}
+
+.topic-locked-container {
+  grid-area: topic-locked-container;
+  border: 1px solid black;
+  background-color: #f27a5a;
+}
+
+.draggable-topic {
+  cursor: pointer;
+  user-select: none;
+  background-color: #f27a5a;
+  padding: 12px;
+  margin: 8px 0;
+  border-top: 5px outset rgb(219.84, 191.04, 183.36);
+  border-bottom: 5px outset rgb(155.8907865169, 93.2211235955, 76.5092134831);
+}
+.draggable-topic.dragged {
+  background-color: #f27a5a;
+}
+
+.editing {
+  background-color: rgb(219.84, 191.04, 183.36);
+}
+
+.context-explain {
+  margin: 12px 0;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.post-edit-form {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  height: 100%;
+}
+
+.babycode-editor {
+  height: 150px;
+  font-size: 1rem;
+}
+
+.babycode-editor-container {
+  width: 100%;
+}
+
+.babycode-preview-errors-container {
+  font-size: 0.8rem;
+}
+
+.tab-button {
+  background-color: #f27a5a;
+  color: black !important;
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-bottom: 0;
+}
+.tab-button:hover {
+  background-color: rgb(244.6, 148.6, 123);
+}
+.tab-button:active {
+  background-color: rgb(176.4525842697, 133.7379775281, 122.3474157303);
+}
+.tab-button:disabled {
+  background-color: rgb(198.02, 189.62, 187.38);
+}
+.tab-button.reduced {
+  margin: 0;
+  padding: 6px;
+}
+.tab-button.active {
+  background-color: #b54444;
+  padding-top: 8px;
+}
+
+.tab-content {
+  display: none;
+}
+.tab-content.active {
+  min-height: 250px;
+  display: block;
+  background-color: rgb(156.1, 92.9, 92.9);
+  border: 1px solid black;
+  padding: 6px;
+  border-top-right-radius: 16px;
+  border-bottom-right-radius: 16px;
+  border-bottom-left-radius: 16px;
+}
+
+ul, ol {
+  margin: 6px 0 6px 16px;
+  padding: 0;
+}
+
+.new-concept-notification.hidden {
+  display: none;
+}
+
+.new-concept-notification {
+  position: fixed;
+  bottom: 80px;
+  right: 80px;
+  border: 1px solid black;
+  background-color: #81a3e6;
+  padding: 12px 8px;
+  border-radius: 16px;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
+}
+
+.emoji {
+  max-width: 15px;
+  max-height: 15px;
+}
+
+.accordion {
+  border-top-right-radius: 16px;
+  border-top-left-radius: 16px;
+  box-sizing: border-box;
+  border: 1px solid black;
+  margin: 6px 3px;
+  overflow: hidden;
+}
+
+.accordion.hidden {
+  border-bottom: none;
+}
+
+.accordion-header {
+  display: flex;
+  align-items: center;
+  background-color: #c6655b;
+  padding: 0 6px;
+  gap: 6px;
+  border-bottom: 1px solid black;
+}
+
+.accordion-toggle {
+  padding: 0;
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  min-height: 36px;
+}
+
+.accordion-title {
+  margin-right: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.accordion-content {
+  padding: 0 8px;
+}
+
+.accordion-content.hidden {
+  display: none;
+}
+
+.post-accordion-content {
+  padding-top: 6px;
+  padding-bottom: 6px;
+  background-color: #c85d45;
+}
+
+.inbox-container {
+  padding: 6px;
+}
+
+.babycode-button-container {
+  display: flex;
+  gap: 3px;
+  flex-wrap: wrap;
+}
+
+.babycode-button {
+  padding: 3px 6px;
+  min-width: 36px;
+}
+.babycode-button > * {
+  font-size: 1rem;
+}
+
+.quote-popover {
+  position: absolute;
+  transform: translateX(-50%);
+  margin: 0;
+  border: none;
+  border-radius: 16px;
+  background-color: rgba(0, 0, 0, 0.5019607843);
+  padding: 3px 6px;
+}
+
+footer {
+  border-top: 1px solid black;
+}
+
+.reaction-button.active {
+  background-color: #b54444;
+  color: white !important;
+}
+.reaction-button.active:hover {
+  background-color: rgb(197.978313253, 103.221686747, 103.221686747);
+}
+.reaction-button.active:active {
+  background-color: rgb(127.305, 96.795, 96.795);
+}
+.reaction-button.active:disabled {
+  background-color: rgb(167.7956024096, 159.5043975904, 159.5043975904);
+}
+.reaction-button.active.reduced {
+  margin: 0;
+  padding: 6px;
+}
+
+.reaction-popover {
+  position: relative;
+  margin: 0;
+  border: none;
+  border-radius: 16px;
+  background-color: rgba(0, 0, 0, 0.5019607843);
+  padding: 3px 6px;
+  width: 250px;
+}
+
+.reaction-popover-inner {
+  display: flex;
+  flex-wrap: wrap;
+  overflow: scroll;
+  margin: auto;
+  justify-content: center;
+}
+
+.babycode-guide-list {
+  border-bottom: 1px dashed;
+}
+
+#topnav {
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+}
+
+#bottomnav {
+  border-bottom-left-radius: 16px;
+  border-bottom-right-radius: 16px;
+  color: white;
+}
+
+textarea {
+  padding: 12px 16px;
+}
+
+footer {
+  margin-top: 10px;
+  border-radius: 16px;
+  border: none;
+  text-align: center;
+}
+
+.darkbg {
+  color: white;
+}
+.darkbg a {
+  color: white;
+}

data/static/js/babycode-editor.js

@@ -0,0 +1,185 @@
+{
+  let ta = document.getElementById("babycode-content");
+  
+  ta.addEventListener("keydown", (e) => {
+    if(e.key === "Enter" && e.ctrlKey) {
+      // console.log(e.target.form)
+      if (inThread()) {
+        localStorage.removeItem(window.location.pathname);
+      }
+      e.target.form?.submit();
+    }
+  })
+  
+  const inThread = () => {
+    const scheme = window.location.pathname.split("/");
+    return scheme[1] === "threads" && scheme[2] !== "create";
+  }
+  
+  ta.addEventListener("input", () => {
+    if (!inThread()) return;
+    
+    localStorage.setItem(window.location.pathname, ta.value);
+  })
+
+  if (inThread()) {
+    const form = ta.closest('.post-edit-form');
+    console.log(ta.closest('.post-edit-form'));
+    if (form){
+      form.addEventListener("submit", () => {
+        localStorage.removeItem(window.location.pathname);
+      })
+    }
+  }
+
+  document.addEventListener("DOMContentLoaded", () => {
+    if (!inThread()) return;
+    const prevContent = localStorage.getItem(window.location.pathname);
+    if (!prevContent) return;
+    ta.value = prevContent;
+  })
+  
+  const buttonBold = document.getElementById("post-editor-bold");
+  const buttonItalics = document.getElementById("post-editor-italics");
+  const buttonStrike = document.getElementById("post-editor-strike");
+  const buttonUnderline = document.getElementById("post-editor-underline");
+  const buttonUrl = document.getElementById("post-editor-url");
+  const buttonCode = document.getElementById("post-editor-code");
+  const buttonImg = document.getElementById("post-editor-img");
+  const buttonOl = document.getElementById("post-editor-ol");
+  const buttonUl = document.getElementById("post-editor-ul");
+  const buttonSpoiler = document.getElementById("post-editor-spoiler");
+
+  function insertTag(tagStart, newline = false, prefill = "") {
+    const hasAttr = tagStart[tagStart.length - 1] === "=";
+    let tagEnd = tagStart;
+    let tagInsertStart = `[${tagStart}]${newline ? "\n" : ""}`;
+    if (hasAttr) {
+      tagEnd = tagEnd.slice(0, -1);
+    }
+    const tagInsertEnd = `${newline ? "\n" : ""}[/${tagEnd}]`;
+    const hasSelection = ta.selectionStart !== ta.selectionEnd;
+    const text = ta.value;
+    if (hasSelection) {
+      const realStart = Math.min(ta.selectionStart, ta.selectionEnd);
+      const realEnd = Math.max(ta.selectionStart, ta.selectionEnd);
+      const selectionLength = realEnd - realStart;
+      
+      const strStart = text.slice(0, realStart);
+      const strEnd = text.substring(realEnd);
+      const frag = `${tagInsertStart}${text.slice(realStart, realEnd)}${tagInsertEnd}`;
+      const reconst = `${strStart}${frag}${strEnd}`;
+      ta.value = reconst;
+      if (!hasAttr){
+        ta.setSelectionRange(realStart + tagInsertStart.length, realStart + tagInsertStart.length + selectionLength);
+      } else {
+        ta.setSelectionRange(realStart + tagInsertEnd.length - 1, realStart + tagInsertEnd.length - 1); // cursor on attr
+      }
+      ta.focus()
+    } else {
+      if (hasAttr) {
+        tagInsertStart += prefill;
+      }
+      const cursor = ta.selectionStart;
+      const strStart = text.slice(0, cursor);
+      const strEnd = text.substr(cursor);
+      
+      let newCursor = strStart.length + tagInsertStart.length;
+      if (hasAttr) {
+        newCursor = cursor + tagInsertStart.length - prefill.length - 1;
+      }
+      const reconst = `${strStart}${tagInsertStart}${tagInsertEnd}${strEnd}`;
+      ta.value = reconst;
+      ta.setSelectionRange(newCursor, newCursor);
+      ta.focus()
+    }
+  }
+
+  buttonBold.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("b")
+  })
+  buttonItalics.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("i")
+  })
+  buttonStrike.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("s")
+  })
+  buttonUnderline.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("u")
+  })
+  buttonUrl.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("url=", false, "link label");
+  })
+  buttonCode.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("code", true)
+  })
+  buttonImg.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("img=", false, "alt text");
+  })
+  buttonOl.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("ol", true);
+  })
+  buttonUl.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("ul", true);
+  })
+  buttonSpoiler.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("spoiler=", true, "hidden content");
+  })
+  
+  const previewEndpoint = "/api/babycode-preview";
+  let previousMarkup = "";
+  const previewTab = document.getElementById("tab-preview");
+  previewTab.addEventListener("tab-activated", async () => {
+    const previewContainer = document.getElementById("babycode-preview-container");
+    const previewErrorsContainer = document.getElementById("babycode-preview-errors-container");
+    // previewErrorsContainer.textContent = "";
+    const markup = ta.value.trim();
+    if (markup === "" || markup === previousMarkup) {
+      return;
+    }
+    previousMarkup = markup;
+      const req = await fetch(previewEndpoint, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({markup: markup})
+      })
+      if (!req.ok) {
+        switch (req.status) {
+          case 429:
+            previewErrorsContainer.textContent = "(Old preview, try again in a few seconds.)"
+            previousMarkup = "";
+            break;
+          case 400:
+            previewErrorsContainer.textContent = "(Request got malformed.)"
+            break;
+          case 401:
+            previewErrorsContainer.textContent = "(You are not logged in.)"
+            break;
+          default:
+            previewErrorsContainer.textContent = "(Error. Check console.)"
+            console.error(req.error);
+            break;
+        }
+        return;
+      }
+      
+      const json_resp = await req.json();
+      previewContainer.innerHTML = json_resp.html;
+      previewErrorsContainer.textContent = "";
+
+      const accordionRefreshEvt = new CustomEvent("refresh_accordions");
+      document.body.dispatchEvent(accordionRefreshEvt);
+  });
+}

data/static/js/date-fmt.js

@@ -0,0 +1,10 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const timestampSpans = document.getElementsByClassName("timestamp");
+  for (let timestampSpan of timestampSpans) {
+    const timestamp = parseInt(timestampSpan.dataset.utc);
+    if (!isNaN(timestamp)) {
+      const date = new Date(timestamp * 1000);
+      timestampSpan.textContent = date.toLocaleString();
+    }
+  }
+})

data/static/js/sort-topics.js

@@ -0,0 +1,45 @@
+// https://codepen.io/crouchingtigerhiddenadam/pen/qKXgap
+let selected = null;
+let container = document.getElementById("topics-container")
+
+function isBefore(el1, el2) {
+  let cur
+  if (el2.parentNode === el1.parentNode) {
+    for (cur = el1.previousSibling; cur; cur = cur.previousSibling) {
+      if (cur === el2) return true
+    }
+  }
+  return false;
+}
+
+function dragOver(e) {
+  let target = e.target.closest(".draggable-topic")
+  
+  if (!target || target === selected) {
+    return;
+  }
+  
+  if (isBefore(selected, target)) {
+    container.insertBefore(selected, target)
+  } else {
+    container.insertBefore(selected, target.nextSibling)
+  }
+}
+
+function dragEnd() {
+  if (!selected) return;
+  
+  selected.classList.remove("dragged")
+  selected = null;
+  for (let i = 0; i < container.childElementCount - 1; i++) {
+    let input = container.children[i].querySelector(".topic-input");
+    input.value = i + 1;
+  }
+}
+
+function dragStart(e) {
+  e.dataTransfer.effectAllowed = 'move'
+  e.dataTransfer.setData('text/plain', null)
+  selected = e.target
+  selected.classList.add("dragged")
+}

data/static/js/thread.js

@@ -0,0 +1,369 @@
+{
+  const ta = document.getElementById("babycode-content");
+  
+  for (let button of document.querySelectorAll(".reply-button")) {
+    button.addEventListener("click", (e) => {
+      ta.value += button.value;
+      ta.scrollIntoView()
+      ta.focus();
+    })
+  }
+
+  function supportsPopover() {
+    return Object.hasOwn(HTMLElement.prototype, "popover");
+  }
+
+  if (supportsPopover()){
+    let quotedPostContainer = null;
+    function isQuoteSelectionValid() {
+      const selection = document.getSelection();
+
+      if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+        return false;
+      }
+
+      const range = selection.getRangeAt(0);
+      const commonAncestor = range.commonAncestorContainer;
+
+      const ancestorElement = commonAncestor.nodeType === Node.TEXT_NODE
+      ? commonAncestor.parentNode
+      : commonAncestor;
+
+      const container = ancestorElement.closest(".post-inner");
+      if (!container) {
+        return false;
+      }
+      const success = container.contains(ancestorElement);
+      if (success) {
+        quotedPostContainer = container;
+      }
+      return success;
+    }
+
+    let quotePopover = null;
+    let isSelecting = false;
+
+    document.addEventListener("mousedown", () => {
+      isSelecting = true;
+    })
+
+    document.addEventListener("mouseup", () => {
+      isSelecting = false;
+      handlePossibleSelection();
+    })
+
+    document.addEventListener("keyup", (e) => {
+      if (e.shiftKey && (e.key.startsWith('Arrow') || e.key === 'Home' || e.key === 'End')) {
+        handlePossibleSelection();
+      }
+    })
+
+    function handlePossibleSelection() {
+      setTimeout(() => {
+        const valid = isQuoteSelectionValid();
+        if (isSelecting || !valid) {
+          removeQuotePopover();
+          return;
+        }
+
+        const selection = document.getSelection();
+        const selectionStr = selection.toString().trim();
+        if (selection.isCollapsed || selectionStr === "") {
+          removeQuotePopover();
+          return;
+        }
+
+        showQuotePopover();
+      }, 50)
+    }
+
+    function removeQuotePopover() {
+      quotePopover?.hidePopover();
+    }
+
+    function createQuotePopover() {
+      quotePopover = document.createElement("div");
+      quotePopover.popover = "auto";
+      quotePopover.className = "quote-popover";
+
+      const quoteButton = document.createElement("button");
+      quoteButton.textContent = "Quote fragment"
+      quoteButton.className = "reduced"
+      quotePopover.appendChild(quoteButton);
+
+      document.body.appendChild(quotePopover);
+      return quoteButton;
+    }
+
+    function showQuotePopover() {
+      if (!quotePopover) {
+        const quoteButton = createQuotePopover();
+        quoteButton.addEventListener("click", () => {
+          console.log("Quoting:", document.getSelection().toString());
+          const postPermalink = quotedPostContainer.dataset.postPermalink;
+          const authorUsername = quotedPostContainer.dataset.authorUsername;
+          console.log(postPermalink, authorUsername);
+          if (ta.value.trim() !== "") {
+            ta.value += "\n"
+          }
+          ta.value += `[url=${postPermalink}]${authorUsername} said:[/url]\n[quote]< :scissors: > ${document.getSelection().toString()} < :scissors: >[/quote]\n`;
+          ta.scrollIntoView()
+          ta.focus();
+
+          document.getSelection().empty();
+          removeQuotePopover();
+        })
+      }
+
+      const range = document.getSelection().getRangeAt(0);
+      const rect = range.getBoundingClientRect();
+      const scrollY = window.scrollY || window.pageYOffset;
+
+      quotePopover.style.setProperty("top", `${rect.top + scrollY - 55}px`)
+      quotePopover.style.setProperty("left", `${rect.left + rect.width/2}px`)
+
+      if (!quotePopover.matches(':popover-open')) {
+        quotePopover.showPopover();
+      }
+    }
+  }
+  
+  const deleteDialog = document.getElementById("delete-dialog");
+  const deleteDialogCloseButton = document.getElementById("post-delete-dialog-close");
+  let deletionTargetPostContainer;
+  
+  function closeDeleteDialog() {
+    deletionTargetPostContainer.style.removeProperty("background-color");
+    deleteDialog.close();
+  }
+  
+  deleteDialogCloseButton.addEventListener("click", (e) => {
+    closeDeleteDialog();
+  })
+  deleteDialog.addEventListener("click", (e) => {
+    if (e.target === deleteDialog) {
+      closeDeleteDialog();
+    }
+  })
+  for (let button of document.querySelectorAll(".post-delete-button")) {
+    button.addEventListener("click", (e) => {
+      deleteDialog.showModal();
+      const postId = button.value;
+      deletionTargetPostContainer = document.getElementById("post-" + postId).querySelector(".post-content-container");
+      deletionTargetPostContainer.style.setProperty("background-color", "#fff");
+      const form = document.getElementById("post-delete-form");
+      form.action = `/post/${postId}/delete`
+    })
+  }
+  
+  const threadEndpoint = document.getElementById("thread-subscribe-endpoint").value;
+  let now = Math.floor(new Date() / 1000);
+  function hideNotification() {
+    const notification = document.getElementById('new-post-notification');
+    notification.classList.add('hidden');
+  }
+  
+  function showNewPostNotification(url) {
+    const notification = document.getElementById("new-post-notification");
+    
+    notification.classList.remove("hidden");
+    
+    document.getElementById("dismiss-new-post-button").onclick = () => {
+      now = Math.floor(new Date() / 1000);
+      hideNotification();
+      tryFetchUpdate();
+    }
+    
+    document.getElementById("go-to-new-post-button").href = url;
+    
+    document.getElementById("unsub-new-post-button").onclick = () => {
+      hideNotification();
+    }
+  }
+
+  function tryFetchUpdate() {
+    if (!threadEndpoint) return;
+    const body = JSON.stringify({'since': now});
+    fetch(threadEndpoint, {method: "POST", headers: {"Content-Type": "application/json"}, body: body})
+      .then(res => res.json())
+      .then(json => {
+        if (json.status === "none") {
+          setTimeout(tryFetchUpdate, 5000);
+        } else if (json.status === "new_post") {
+          showNewPostNotification(json.url);
+        }
+      })
+      .catch(error => console.log(error))
+  }
+  tryFetchUpdate();
+
+  if (supportsPopover()){
+    const reactionEmoji = document.getElementById("allowed-reaction-emoji").value.split(" ");
+    let reactionPopover = null;
+    let reactionTargetPostId = null;
+
+    function tryAddReaction(emoji, postId = reactionTargetPostId) {
+      const body = JSON.stringify({
+        "emoji": emoji,
+      });
+      fetch(`/api/add-reaction/${postId}`, {method: "POST", headers: {"Content-Type": "application/json"}, body: body})
+        .then(res => res.json())
+        .then(json => {
+          if (json.status === "added") {
+            const post = document.getElementById(`post-${postId}`);
+            const spans = Array.from(post.querySelectorAll(".reaction-count")).filter((span) => {
+              return span.dataset.emoji === emoji
+            });
+            if (spans.length > 0) {
+              const currentValue = spans[0].textContent;
+              spans[0].textContent = `${parseInt(currentValue) + 1}`;
+              const button = spans[0].closest(".reaction-button");
+              button.classList.add("active");
+            } else {
+              const span = document.createElement("span");
+              span.classList = "reaction-container";
+              span.dataset.emoji = emoji;
+
+              const button = document.createElement("button");
+              button.type = "button";
+              button.className = "reduced reaction-button active";
+
+              button.addEventListener("click", () => {
+                tryAddReaction(emoji, postId);
+              })
+
+              const img = document.createElement("img");
+              img.src = `/static/emoji/${emoji}.png`;
+
+              button.textContent = " x";
+
+              const reactionCountSpan = document.createElement("span")
+              reactionCountSpan.className = "reaction-count"
+              reactionCountSpan.textContent = "1"
+
+              button.insertAdjacentElement("afterbegin", img);
+              button.appendChild(reactionCountSpan);
+
+              span.appendChild(button);
+
+              const post = document.getElementById(`post-${postId}`);
+              post.querySelector(".post-reactions").insertBefore(span, post.querySelector(".add-reaction-button"));
+            }
+          } else if (json.error_code === 409) {
+            console.log("reaction exists, gonna try and remove");
+            tryRemoveReaction(emoji, postId);
+          } else {
+            console.warn(json)
+          }
+        })
+      .catch(error => console.error(error));
+    }
+
+    function tryRemoveReaction(emoji, postId = reactionTargetPostId) {
+      const body = JSON.stringify({
+        "emoji": emoji,
+      });
+
+      fetch(`/api/remove-reaction/${postId}`, {method: "POST", headers: {"Content-Type": "application/json"}, body: body})
+      .then(res => res.json())
+      .then(json => {
+        if (json.status === "removed") {
+          const post = document.getElementById(`post-${postId}`);
+          const spans = Array.from(post.querySelectorAll(".reaction-container")).filter((span) => {
+            return span.dataset.emoji === emoji
+          });
+          if (spans.length > 0) {
+            const reactionCountSpan = spans[0].querySelector(".reaction-count");
+            const currentValue = parseInt(reactionCountSpan.textContent);
+            if (currentValue - 1 === 0) {
+              spans[0].remove();
+            } else {
+              reactionCountSpan.textContent = `${parseInt(currentValue) - 1}`;
+              const button = reactionCountSpan.closest(".reaction-button");
+              button.classList.remove("active");
+            }
+          }
+        } else {
+          console.warn(json)
+        }
+      })
+      .catch(error => console.error(error));
+    }
+
+    function createReactionPopover() {
+      reactionPopover = document.createElement("div");
+      reactionPopover.className = "reaction-popover";
+      reactionPopover.popover = "auto";
+
+      const inner = document.createElement("div");
+      inner.className = "reaction-popover-inner";
+
+      reactionPopover.appendChild(inner);
+
+      for (let emoji of reactionEmoji) {
+        const img = document.createElement("img");
+        img.src = `/static/emoji/${emoji}.png`;
+
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "reduced";
+        button.appendChild(img);
+        button.addEventListener("click", () => {
+          tryAddReaction(emoji);
+        })
+
+        button.dataset.emojiName = emoji;
+
+        inner.appendChild(button);
+      }
+
+      reactionPopover.addEventListener("beforetoggle", (e) => {
+        if (e.newState === "closed") {
+          reactionTargetPostId = null;
+        }
+      })
+
+      document.body.appendChild(reactionPopover);
+    }
+
+    function showReactionPopover() {
+      if (!reactionPopover) {
+        createReactionPopover();
+      }
+
+      if (!reactionPopover.matches(':popover-open')) {
+        reactionPopover.showPopover();
+      }
+    }
+
+    for (let button of document.querySelectorAll(".add-reaction-button")) {
+      button.addEventListener("click", (e) => {
+        showReactionPopover();
+        reactionTargetPostId = e.target.dataset.postId;
+
+        const rect = e.target.getBoundingClientRect();
+        const popoverRect = reactionPopover.getBoundingClientRect();
+        const scrollY = window.scrollY || window.pageYOffset;
+
+        reactionPopover.style.setProperty("top", `${rect.top + scrollY + rect.height}px`)
+        reactionPopover.style.setProperty("left", `${rect.left + rect.width/2 - popoverRect.width/2}px`)
+      })
+    }
+
+    for (let button of document.querySelectorAll(".reaction-button")) {
+      button.addEventListener("click", () => {
+        const reactionContainer = button.closest(".reaction-container")
+        const emoji = reactionContainer.dataset.emoji;
+        const postId = reactionContainer.dataset.postId;
+        console.log(reactionContainer);
+        tryAddReaction(emoji, postId);
+      })
+    }
+
+  } else {
+    for (let button of document.querySelectorAll(".add-reaction-button")) {
+      button.disabled = true;
+      button.title = "Enable JS to add reactions."
+    }
+  }
+}

data/static/js/topic.js

@@ -0,0 +1,16 @@
+{
+  const deleteDialog = document.getElementById("delete-dialog");
+  const deleteDialogOpenButton = document.getElementById("topic-delete-dialog-open");
+  deleteDialogOpenButton.addEventListener("click", (e) => {
+    deleteDialog.showModal();
+  });
+  const deleteDialogCloseButton = document.getElementById("topic-delete-dialog-close");
+  deleteDialogCloseButton.addEventListener("click", (e) => {
+    deleteDialog.close();
+  })
+  deleteDialog.addEventListener("click", (e) => {
+    if (e.target === deleteDialog) {
+      deleteDialog.close();
+    }
+  })
+}

data/static/js/ui.js

@@ -0,0 +1,204 @@
+function activateSelfDeactivateSibs(button) {
+  if (button.classList.contains("active")) return;
+  
+  Array.from(button.parentNode.children).forEach(s => {
+    if (s === button){
+      button.classList.add('active');
+    } else {
+      s.classList.remove('active');
+    }
+    const targetId = s.dataset.targetId;
+    const target = document.getElementById(targetId);
+    
+    if (!target) return;
+    
+    if (s.classList.contains('active')) {
+      target.classList.add('active');
+      target.dispatchEvent(new CustomEvent("tab-activated", {bubbles: false}))
+    } else {
+      target.classList.remove('active');
+    }
+  });
+}
+
+function openLightbox(post, idx) {
+  lightboxCurrentPost = post;
+  lightboxCurrentIdx = idx;
+  lightboxObj.img.src = lightboxImages.get(post)[idx].src;
+  lightboxObj.openOriginalAnchor.href = lightboxImages.get(post)[idx].src
+  lightboxObj.prevButton.disabled = lightboxImages.get(post).length === 1
+  lightboxObj.nextButton.disabled = lightboxImages.get(post).length === 1
+  lightboxObj.imageCount.textContent = `Image ${idx + 1} of ${lightboxImages.get(post).length}`
+  
+  if (!lightboxObj.dialog.open) {
+    lightboxObj.dialog.showModal();
+  }
+}
+
+const modulo = (n, m) => ((n % m) + m) % m
+
+function lightboxNext() {
+  const l = lightboxImages.get(lightboxCurrentPost).length;
+  const target = modulo(lightboxCurrentIdx + 1, l);
+  openLightbox(lightboxCurrentPost, target);
+}
+
+function lightboxPrev() {
+  const l = lightboxImages.get(lightboxCurrentPost).length;
+  const target = modulo(lightboxCurrentIdx - 1, l);
+  openLightbox(lightboxCurrentPost, target);
+}
+
+function constructLightbox() {
+  const dialog = document.createElement("dialog");
+  dialog.classList.add("lightbox-dialog");
+  dialog.addEventListener("click", (e) => {
+    if (e.target === dialog) {
+      dialog.close();
+    }
+  })
+  const dialogInner = document.createElement("div");
+  dialogInner.classList.add("lightbox-inner");
+  dialog.appendChild(dialogInner);
+  const img = document.createElement("img");
+  img.classList.add("lightbox-image")
+  dialogInner.appendChild(img);
+  const openOriginalAnchor = document.createElement("a")
+  openOriginalAnchor.text = "Open original in new window"
+  openOriginalAnchor.target = "_blank"
+  openOriginalAnchor.rel = "noopener noreferrer nofollow"
+  dialogInner.appendChild(openOriginalAnchor);
+  
+  const navSpan = document.createElement("span");
+  navSpan.classList.add("lightbox-nav");
+  const prevButton = document.createElement("button");
+  prevButton.type = "button";
+  prevButton.textContent = "Previous";
+  prevButton.addEventListener("click", lightboxPrev);
+  const nextButton = document.createElement("button");
+  nextButton.type = "button";
+  nextButton.textContent = "Next";
+  nextButton.addEventListener("click", lightboxNext);
+  const imageCount = document.createElement("span");
+  imageCount.textContent = "Image of ";
+  navSpan.appendChild(prevButton);
+  navSpan.appendChild(imageCount);
+  navSpan.appendChild(nextButton);
+  
+  dialogInner.appendChild(navSpan);
+  return {
+    img: img,
+    dialog: dialog,
+    openOriginalAnchor: openOriginalAnchor,
+    prevButton: prevButton,
+    nextButton: nextButton,
+    imageCount: imageCount,
+  }
+}
+
+let lightboxImages = new Map(); //.post-inner : Array<Object>
+let lightboxObj = null;
+let lightboxCurrentPost = null;
+let lightboxCurrentIdx = -1;
+
+document.addEventListener("DOMContentLoaded", () => {
+  // tabs
+  document.querySelectorAll(".tab-button").forEach(button => {
+    button.addEventListener("click", () => {
+      activateSelfDeactivateSibs(button);
+    });
+  });
+  
+  // accordions
+  const handledAccordions = new Set();
+  function attachAccordionHandlers(accordion){
+    if(handledAccordions.has(accordion)) {
+      return;
+    }
+
+    handledAccordions.add(accordion)
+    const header = accordion.querySelector(".accordion-header");
+    const toggleButton = header.querySelector(".accordion-toggle");
+    const content = accordion.querySelector(".accordion-content");
+
+    const toggle = (e) => {
+      e.stopPropagation();
+      accordion.classList.toggle("hidden");
+      content.classList.toggle("hidden");
+      toggleButton.textContent = content.classList.contains("hidden") ? "+" : "-"
+    }
+
+    toggleButton.addEventListener("click", toggle);
+  }
+
+  function refreshAccordions(){
+    const accordions = document.querySelectorAll(".accordion");
+    accordions.forEach(attachAccordionHandlers);
+  }
+  refreshAccordions()
+
+  document.body.addEventListener('refresh_accordions', refreshAccordions)
+  
+  //lightboxes
+  lightboxObj = constructLightbox();
+  document.body.appendChild(lightboxObj.dialog);
+
+  function setImageMaxSize(img) {
+    const {
+      maxWidth: origMaxWidth,
+      maxHeight: origMaxHeight,
+      minWidth: origMinWidth,
+      minHeight: origMinHeight,
+    } = getComputedStyle(img);
+    console.log(img, img.naturalWidth, img.naturalHeight, origMinWidth, origMinHeight, origMaxWidth, origMaxHeight)
+    if (img.naturalWidth < parseInt(origMinWidth)) {
+      console.log(1)
+      img.style.minWidth = img.naturalWidth + "px";
+    }
+    if (img.naturalHeight < parseInt(origMinHeight)) {
+      console.log(2)
+      img.style.minHeight = img.naturalHeight + "px";
+    }
+    if (img.naturalWidth < parseInt(origMaxWidth)) {
+      console.log(3)
+      img.style.maxWidth = img.naturalWidth + "px";
+    }
+    if (img.naturalHeight < parseInt(origMaxHeight)) {
+      console.log(4)
+      img.style.maxHeight = img.naturalHeight + "px";
+    }
+  }
+
+  const postImages = document.querySelectorAll(".post-inner img.post-image");
+  postImages.forEach(postImage => {
+    const belongingTo = postImage.closest(".post-inner");
+    const images = lightboxImages.get(belongingTo) ?? [];
+    images.push({
+      src: postImage.src,
+      alt: postImage.alt,
+    });
+    const idx = images.length - 1;
+    lightboxImages.set(belongingTo, images);
+    postImage.style.cursor = "pointer";
+    postImage.addEventListener("click", () => {
+      openLightbox(belongingTo, idx);
+    });
+  });
+  const postAndSigImages = document.querySelectorAll("img.post-image");
+  postAndSigImages.forEach(image => {
+    if (image.complete) {
+      setImageMaxSize(image);
+    } else {
+      image.addEventListener("load", () => setImageMaxSize(image));
+    }
+  })
+
+  // copy code blocks
+  for (let button of document.querySelectorAll(".copy-code")) {
+    button.addEventListener("click", async () => {
+      await navigator.clipboard.writeText(button.value)
+      button.textContent = "Copied!"
+      setTimeout(() => {button.textContent = "Copy"}, 1000.0)
+    })
+  };
+});

data/static/misc/error.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="60px" height="60px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.364 5.63604C19.9926 7.26472 21 9.51472 21 12C21 16.9706 16.9706 21 12 21C9.51472 21 7.26472 19.9926 5.63604 18.364M18.364 5.63604C16.7353 4.00736 14.4853 3 12 3C7.02944 3 3 7.02944 3 12C3 14.4853 4.00736 16.7353 5.63604 18.364M18.364 5.63604L5.63604 18.364" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+<!-- https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license -->

data/static/misc/image.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 17L7.58959 13.7694C8.38025 13.0578 9.58958 13.0896 10.3417 13.8417L11.5 15L15.0858 11.4142C15.8668 10.6332 17.1332 10.6332 17.9142 11.4142L20 13.5M11 9C11 9.55228 10.5523 10 10 10C9.44772 10 9 9.55228 9 9C9 8.44772 9.44772 8 10 8C10.5523 8 11 8.44772 11 9ZM6 20H18C19.1046 20 20 19.1046 20 18V6C20 4.89543 19.1046 4 18 4H6C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+<!-- https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license -->

data/static/misc/info.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="60px" height="60px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 8V8.5M12 12V16M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+<!-- https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license -->

data/static/misc/lock.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="60px" height="60px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 14V16M8 9V6C8 3.79086 9.79086 2 12 2C14.2091 2 16 3.79086 16 6V9M7 21H17C18.1046 21 19 20.1046 19 19V11C19 9.89543 18.1046 9 17 9H7C5.89543 9 5 9.89543 5 11V19C5 20.1046 5.89543 21 7 21Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+<!-- https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license -->

data/static/misc/spoiler.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 4L9.87868 9.87868M20 20L14.1213 14.1213M9.87868 9.87868C9.33579 10.4216 9 11.1716 9 12C9 13.6569 10.3431 15 12 15C12.8284 15 13.5784 14.6642 14.1213 14.1213M9.87868 9.87868L14.1213 14.1213M6.76821 6.76821C4.72843 8.09899 2.96378 10.026 2 11.9998C3.74646 15.5764 8.12201 19 11.9998 19C13.7376 19 15.5753 18.3124 17.2317 17.2317M9.76138 5.34717C10.5114 5.12316 11.2649 5 12.0005 5C15.8782 5 20.2531 8.42398 22 12.0002C21.448 13.1302 20.6336 14.2449 19.6554 15.2412" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+<!-- https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license -->

data/static/misc/sticky.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4H18C19.1046 4 20 4.89543 20 6V13M13 20L20 13M13 20V14C13 13.4477 13.4477 13 14 13H20" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+<!-- https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license -->

data/static/misc/warn.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="60px" height="60px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 15H12.01M12 12V9M4.98207 19H19.0179C20.5615 19 21.5233 17.3256 20.7455 15.9923L13.7276 3.96153C12.9558 2.63852 11.0442 2.63852 10.2724 3.96153L3.25452 15.9923C2.47675 17.3256 3.43849 19 4.98207 19Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+<!-- https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license -->

docker-compose.yml

@@ -10,4 +10,6 @@ services:
       - ./data/db:/app/data/db
     environment:
       - PYROM_PROD=true
+    env_file:
+      - config/secrets.prod.env
     restart: unless-stopped

nginx.conf

@@ -3,12 +3,13 @@ events {
 }
 
 http {
+    include /etc/nginx/mime.types;
     server {
         listen 8080;
         server_name localhost;
 
         location /static/ {
-            alias /data/static/;
+            alias /app/data/static/;
         }
 
         location / {

requirements.txt

@@ -1,3 +1,16 @@
-flask
-argon2-cffi
-wand
+argon2-cffi==25.1.0
+argon2-cffi-bindings==21.2.0
+blinker==1.9.0
+cffi==1.17.1
+click==8.2.1
+dotenv==0.9.9
+Flask==3.1.1
+itsdangerous==2.2.0
+Jinja2==3.1.6
+MarkupSafe==3.0.2
+pycparser==2.22
+python-dotenv==1.1.1
+python-slugify==8.0.4
+text-unidecode==1.3
+Wand==0.6.13
+Werkzeug==3.1.3

sass/otomotone.scss

@@ -0,0 +1,85 @@
+$fc: #e6e6e6;
+$fci: black;
+
+$lightish_accent: #503250;
+$lightish_accent2: #502d50;
+$dark_accent: #231c23;
+
+$warn: #eaea6a;
+$crit: #d53232;
+
+@use 'default' with (
+  $ACCENT_COLOR: #9b649b,
+
+  $MAIN_BG: #220d16,
+  $DARK_1: $lightish_accent2,
+  $DARK_3: #302731,
+
+  $LIGHT_2: #ae6bae,
+  $LIGHT: $lightish_accent,
+
+  $DEFAULT_FONT_COLOR: $fc,
+  $DEFAULT_FONT_COLOR_INVERSE: $fci,
+
+  $BUTTON_COLOR: #3c283c,
+  $BUTTON_COLOR_2: #8a5584,
+  $BUTTON_FONT_COLOR: $fc,
+  $BUTTON_COLOR_WARN: $warn,
+  $BUTTON_WARN_FONT_COLOR: $fci,
+  $BUTTON_COLOR_CRITICAL: $crit,
+  $BUTTON_CRITICAL_FONT_COLOR: $fc,
+  $ACCORDION_COLOR: #7d467d,
+
+  $bottomnav_color: $dark_accent,
+
+  $topic_info_background: $dark_accent,
+  $topic_locked_background: $lightish_accent,
+  $thread_locked_background: $lightish_accent,
+  $thread_locked_border: 2px outset $dark_accent,
+
+  $site_title_color: white,
+  $topnav_color: #303030,
+
+  $quote_background_color: #fbafcf0a,
+
+  $link_color: #e87fe1,
+  $link_color_visited: #ed4fb1,
+
+  $post_info_background: #412841,
+  $post_content_background: $dark_accent,
+
+  $thread_info_background_color: $dark_accent,
+
+  $post_reactions_background: $lightish_accent,
+
+  $post_accordion_content_background: #2d212d,
+
+  $babycode_guide_toc_background: #3c233c,
+  $babycode_guide_section_background: $dark_accent,
+
+  $text_input_background: #371e37,
+  $text_input_background_focus: #514151,
+  $text_input_font_color: $fc,
+
+  $colorful_table_th_color: $lightish_accent,
+  $colorful_table_td_color: $dark_accent,
+
+  $lightbox_background: $lightish_accent,
+
+  $infobox_info_color: #775891,
+  $infobox_warn_color: $warn,
+  $infobox_warn_font_color: $fci,
+  $infobox_critical_color: $crit,
+
+  $tab_content_background: $lightish_accent,
+  $tab_button_active_color: #8a5584,
+);
+
+#topnav {
+  margin-bottom: 10px;
+  border: 10px solid rgb(40, 40, 40);
+}
+
+footer {
+  margin-top: 10px;
+}

sass/peachy.scss

@@ -0,0 +1,97 @@
+// $accent: #dd5536;
+$accent: #f27a5a;
+
+$br: 16px;
+
+@use 'default' with (
+  $ACCENT_COLOR: $accent,
+  $thread_locked_background: $accent,
+  $topic_locked_background: $accent,
+
+  // $DARK_1: #e36286,
+  $DARK_1: #88486d,
+  $MAIN_BG: #c85d45,
+
+  $usercard_border: none,
+  $usercard_border_right: none,
+  $thread_locked_border: 1px solid black,
+
+  $SETTINGS_WIDTH: 60%,
+  $PAGE_SIDE_MARGIN: 50px,
+
+  $link_color: black,
+  $link_color_visited: black,
+  $reaction_button_active_font_color: white,
+  // $DEFAULT_FONT_COLOR: white,
+  // $DEFAULT_FONT_COLOR_INVERSE: black,
+
+  $text_input_font_color: black,
+
+  $BUTTON_COLOR: $accent,
+  $BUTTON_COLOR_2: #b54444,
+  $BUTTON_COLOR_CRITICAL: #f73030,
+  $ACCORDION_COLOR: #c6655b,
+  $BUTTON_WARN_FONT_COLOR: black,
+  $BUTTON_CRITICAL_FONT_COLOR: white,
+
+  $SMALL_PADDING: 3px,
+  $MEDIUM_PADDING: 6px,
+  $MEDIUM_BIG_PADDING: 8px,
+  $BIG_PADDING: 12px,
+  $BIGGER_PADDING: 16px,
+
+  $DEFAULT_BORDER_RADIUS: $br,
+  $code_border_radius: $br,
+  $button_padding: 8px 12px,
+  $reduced_button_padding: 6px,
+
+  $post_reactions_border_top: 2px dotted #f7bfdf,
+
+  $post_info_min_height: 35px,
+  $post_reactions_padding: 6px 12px,
+  $post_reactions_gap: 6px,
+
+  $text_input_padding: 8px,
+
+  $infobox_info_color: #81a3e6,
+  $infobox_critical_color: #f73030,
+  $infobox_warn_color: #fbfb8d,
+
+  $infobox_info_font_color: black,
+  $infobox_critical_font_color: white,
+  $infobox_warn_font_color: black,
+
+  $pagebutton_min_width: 36px,
+  $quote_background_color: #0002,
+);
+
+#topnav {
+  border-top-left-radius: $br;
+  border-top-right-radius: $br;
+}
+
+#bottomnav {
+  border-bottom-left-radius: $br;
+  border-bottom-right-radius: $br;
+
+  color: white;
+}
+
+textarea {
+  padding: 12px 16px;
+}
+
+footer {
+  margin-top: 10px;
+  border-radius: $br;
+  border: none;
+  text-align: center;
+}
+
+.darkbg {
+  color: white;
+
+  & a {
+    color: white;
+  }
+}

uwsgi.ini

@@ -8,7 +8,7 @@ chmod-socket = 666
 plugins = python3
 
 virtualenv = /opt/venv
-pythonpath = /opt/venv/lib/python3.13/site-packages
+pythonpath = /opt/venv/lib/python3.11/site-packages
 
 uid = www-data
 gid = www-data