Mastodon/Mathjax: Difference between revisions

4,734 bytes added ,  02:08, 1 December 2023
no edit summary
(Created page with "Up to: Part of::Mastodon/Hacks == Description == Mathstodon has nice mathjax support. We don't :( Let's use theirs! * See: References::https://mathstodon.xyz/@albertcardona/109440700541878151 == Code == * '''Pull Request:''' Has Pull Request::https://github.com/NeuromatchAcademy/mastodon/pull/2 == TODO == * Pare down the pull request to just select the mathjax parts * Actually make the merge work Category:Mastodon Category:Hack")
 
No edit summary
 
(13 intermediate revisions by the same user not shown)
Line 1: Line 1:
Up to: [[Part of::Mastodon/Hacks]]
{{Project
|Description=Borrowing mathjax from mathstodon :)
|Part Of=Mastdon/Hacking
|Contributors=Jonny Saunders
|Has Git Repository=https://github.com/NeuromatchAcademy/mastodon
|Completion Status=Completed
|Active Status=Completed
|Approval Status=Approved
}}
Up to: [[Part Of::Mastodon/Hacking]]
 
 


== Description ==
== Description ==
Line 7: Line 18:
Let's use theirs!
Let's use theirs!


* See: [[References::https://mathstodon.xyz/@albertcardona/109440700541878151]]
* See: [[References Post::https://mathstodon.xyz/@albertcardona/109440700541878151]]
 
== Usage ==
 
* Anything within a tag like <code>\( x = y \)</code> for inline equations or <code>\[ x = y \]</code> for lined equations should be rendered by mathjax!
* There is also an equation insert button on the compose box below the emoji bar!


== Code ==
== Code ==


* '''Pull Request:''' [[Has Pull Request::https://github.com/NeuromatchAcademy/mastodon/pull/2]]
* '''Pull Requests:'''
** Original: [[Has Pull Request::https://github.com/NeuromatchAcademy/mastodon/pull/2]]
** (Supercedes original) Pulled into local <code>mathstodon-4.0.2</code> branch, removing font before pulling to feature branch: [[Has Pull Request::https://github.com/NeuromatchAcademy/mastodon/pull/3]]
** Pulling into dev: [[Has Pull Request::https://github.com/NeuromatchAcademy/mastodon/pull/6]]
* '''Feature Branch:''' [[Has Branch::https://github.com/NeuromatchAcademy/mastodon/tree/feature-mathtex]]
 
== Details of Implementation ==
 
glitch-soc uses "flavors" to style the frontend, which is different than base mastodon! To do this we'll need to move the mathstodon implementation into the 'glitch' flavor.
 
To do that, we can take account of what the mathstodon implementation does:
 
=== New Components ===
 
'''Scripts'''
 
* <code>app/javascript/mastodon/features/compose/util/autolatex/autolatex.js</code> - utility functions for writing latex
'''Components'''
 
* <code>app/javascript/mastodon/components/autosuggest_latex.js</code> - autosuggestions menu
* <code>app/javascript/mastodon/features/compose/components/latex_dropdown.js</code> - latex dropdown menu
** <code>app/javascript/mastodon/features/compose/containers/latex_dropdown_container.js</code> container for ^
 
=== Integration ===
 
'''On Feeds'''
* <code>app/javascript/mastodon/components/status_content.js</code> - renders mathjax present in any existing status
 
'''Composing'''
* <code>app/javascript/mastodon/actions/compose.js</code> imports autolatex and integrated in the compose component
* <code>app/javascript/mastodon/components/autosuggest_input.js</code> Adds additional AutosuggestLatex component
* <code>app/javascript/mastodon/components/autosuggest_textarea.js</code> Text area that import AutosuggestLatex
* <code>app/javascript/mastodon/features/compose/components/compose_form.js</code> Adds latex selection button
** <code>app/javascript/mastodon/features/compose/containers/compose_form_container.js</code> Container for ^
 
 
== Git Patching the Glitch Flavor ==
 
Dang that's complicated. So why don't we try to just apply the diff from the mathstodon changes in the main code directory and apply them in the 'glitch' flavor subdirectory, which seems to have the same structure?
 
https://www.howtogeek.com/devops/how-to-apply-git-commit-diffs-to-different-files/
 
== Patches ==
 
* Fix problems with CSP
** Issue: [[Has Issue::https://github.com/NeuromatchAcademy/mastodon/issues/32]]
** Pull Request: [[Has Pull Request::https://github.com/NeuromatchAcademy/mastodon/pull/33]]
 


== TODO ==
== TODO ==


* Pare down the pull request to just select the mathjax parts
<markdown>
* Actually make the merge work
- [x] Pare down the pull request to just select the mathjax parts
- [x] Actually make the merge work
- [x] Merge it!
</markdown>
== References ==
 
* How to actually goddamn initialize mathjax when loaded in an es6 module: https://github.com/mathjax/MathJax/issues/2194#issuecomment-530623540


[[Category:Mastodon]]
[[Category:Mastodon]]
[[Category:Hack]]
[[Category:Hack]]
== Stumpted ==
{{Message
|Author=sneakers-the-rat
|Avatar=https://cdn.discordapp.com/avatars/305044217393053697/2970b22bd769d0cd0ee1de79be500e85.png?size=1024
|Date Sent=22-12-12 08:37:18
|Channel=mathjax
|Text=Aight i'm totally flummoxed about how to get [[Mastodon/Mathjax#Stumpted]] to load. it <really really> wants you to use the <script> tag loading method, which i would rather not do since that makes it way less portable or else requires a call-out to an external CDN, but I can't get the startup functions to trigger programmatically, and i've tried all the various things in their docs as well as some other stuff that isn't. I am tempted to just rewrite the mathstodon stuff using a react component that i was able to find but idk <@451520217139511306> u know anything else about this?
|Link=https://discord.com/channels/1049136631065628772/1051399594363326504/1051779771333357618
}}
== Discord ==
{{Message
|Author=sneakers-the-rat
|Avatar=https://cdn.discordapp.com/avatars/305044217393053697/2970b22bd769d0cd0ee1de79be500e85.png?size=1024
|Date Sent=22-12-12 20:53:43
|Channel=mathjax
|Text=[[Mastodon/Mathjax]]: information in this thread about different possible implementation approaches
[[Mastodon/Hacking#Dev Environment]]: Details on setting up [[Vagrant]] for local development
[[Wikibot#TODO]]: implement n-back archiving of threads and previous posts, the parser already supports it
|Link=https://discord.com/channels/1049136631065628772/1051399594363326504/1051965097561567342
}}