From f124e2812ef70fa76868e01137ae648302459f2c Mon Sep 17 00:00:00 2001 From: FloatingGhost Date: Sun, 6 Aug 2023 18:47:00 +0100 Subject: [PATCH] Revert "use html generator for some things, fix x(x) styling" This reverts commit 48d0da81e060fdfb161696fc4e7e8e19190c8746. --- lib/encoder.ex | 224 ++++++++++++++++++++++-------------------- mix.exs | 6 +- test/encoder_test.exs | 2 +- 3 files changed, 122 insertions(+), 110 deletions(-) diff --git a/lib/encoder.ex b/lib/encoder.ex index 43fe995..b510168 100644 --- a/lib/encoder.ex +++ b/lib/encoder.ex @@ -1,7 +1,6 @@ defmodule MfmParser.Encoder do alias MfmParser.Parser alias MfmParser.Node - import Temple @moduledoc """ An encoder who can turn a tree into HTML. @@ -28,156 +27,171 @@ defmodule MfmParser.Encoder do """ def to_html(tree) when is_list(tree) do - to_html_styles(tree) + {html, _styles} = to_html_styles(tree) + + html end def to_html(input) when is_binary(input) do Parser.parse(input) |> to_html() end - defp to_html_styles(tree) do + defp to_html_styles(tree, _style \\ []) do tree - |> Enum.reduce("", fn node, html -> - html <> - case node do - %Node.Text{} -> - node.props.text + |> Enum.reduce({"", []}, fn node, {html, styles} -> + case node do + %Node.Text{} -> + {html <> node.props.text, styles} - %Node.Newline{} -> - node.props.text + %Node.Newline{} -> + {html <> node.props.text, styles} - %Node.MFM.Flip{} -> - html_child = to_html_styles(node.children) + %Node.MFM.Flip{} -> + {html_child, styles_child} = to_html_styles(node.children) - case node.props do - %{v: true, h: true} -> - temple do - span class: "mfm", style: "display: inline-block; transform: scale(-1);" do - html_child - end - end + case node.props do + %{v: true, h: true} -> + {html <> + "#{html_child}", + styles} - %{v: true} -> - "#{html_child}" + %{v: true} -> + {html <> + "#{html_child}", + styles} - _ -> - "#{html_child}" - end + _ -> + {html <> + "#{html_child}", + styles ++ styles_child} + end - %Node.MFM.Font{} -> - html_child = to_html_styles(node.children) + %Node.MFM.Font{} -> + {html_child, styles_child} = to_html_styles(node.children) - temple do - span class: "mfm", - style: "display: inline-block; font-family: #{node.props.font};" do - html_child - end - end + {html <> + "#{html_child}", + styles ++ styles_child} - %Node.MFM.X{} -> - html_child = to_html_styles(node.children) - prop_map = %{"200%" => "2", "400%" => "3", "600%" => "4"} + %Node.MFM.X{} -> + prop_map = %{"200%" => "2", "400%" => "3", "600%" => "4"} + {html_child, styles_child} = to_html_styles(node.children) - temple do - span style: "font-size: #{node.props.size}", class: "mfm _mfm_x#{prop_map[node.props.size]}_" do - html_child - end - end + {html <> + "#{html_child}", + styles ++ styles_child} - %Node.MFM.Blur{} -> - html_child = to_html_styles(node.children) + %Node.MFM.Blur{} -> + {html_child, styles_child} = to_html_styles(node.children) - temple do - span(class: "mfm _mfm_blur_", do: html_child) - end + {html <> "#{html_child}", + styles ++ + [ + "._mfm_blur_ { filter: blur(6px); transition: filter .3s; } ._mfm_blur_:hover { filter: blur(0px); }" + ] ++ styles_child} - %Node.MFM.Jelly{} -> - html_child = to_html_styles(node.children) + %Node.MFM.Jelly{} -> + {html_child, styles_child} = to_html_styles(node.children) - "#{html_child}" + "#{html_child}" - %Node.MFM.Tada{} -> - html_child = to_html_styles(node.children) + %Node.MFM.Tada{} -> + {html_child, styles_child} = to_html_styles(node.children) - temple do - span class: "mfm _mfm_tada_", - style: - "display: inline-block; font-size: 150%; animation: #{node.props.speed} linear 0s infinite normal both running mfm-tada;" do - html_child - end - end + {html <> + "#{html_child}"} - %Node.MFM.Jump{} -> - html_child = to_html_styles(node.children) + %Node.MFM.Jump{} -> + {html_child, styles_child} = to_html_styles(node.children) "#{html_child}" - %Node.MFM.Bounce{} -> - html_child = to_html_styles(node.children) + %Node.MFM.Bounce{} -> + {html_child, styles_child} = to_html_styles(node.children) "#{html_child}" - %Node.MFM.Spin{} -> - html_child = to_html_styles(node.children) + %Node.MFM.Spin{} -> + {html_child, styles_child} = to_html_styles(node.children) - keyframe_names_map = %{ - "x" => "mfm-spinX", - "y" => "mfm-spinY", - "z" => "mfm-spin" - } + styles_map = %{ + "x" => + "@keyframes mfm-spinX { 0% { transform:perspective(128px) rotateX(0) } to { transform:perspective(128px) rotateX(360deg) }}", + "y" => + "@keyframes mfm-spinY { 0% { transform:perspective(128px) rotateY(0) } to { transform:perspective(128px) rotateY(360deg) }}", + "z" => + "@keyframes mfm-spin { 0% { transform:rotate(0) } to { transform:rotate(360deg) }}" + } - directions_map = %{ - "left" => "reverse" - } + keyframe_names_map = %{ + "x" => "mfm-spinX", + "y" => "mfm-spinY", + "z" => "mfm-spin" + } "#{html_child}" - %Node.MFM.Shake{} -> - html_child = to_html_styles(node.children) + {html <> + "#{html_child}", + styles ++ [Map.get(styles_map, node.props.axis, "")] ++ styles_child} - temple do - span class: "mfm", - style: - "display: inline-block; animation: #{node.props.speed} ease 0s infinite normal none running mfm-shake;" do - html_child - end - end + %Node.MFM.Shake{} -> + {html_child, styles_child} = to_html_styles(node.children) - %Node.MFM.Twitch{} -> - html_child = to_html_styles(node.children) + {html <> + "#{html_child}", + styles ++ + [ + "@keyframes mfm-shake { 0% { transform:translate(-3px,-1px) rotate(-8deg) } 5% { transform:translateY(-1px) rotate(-10deg) } 10% { transform:translate(1px,-3px) rotate(0) } 15% { transform:translate(1px,1px) rotate(11deg) } 20% { transform:translate(-2px,1px) rotate(1deg) } 25% { transform:translate(-1px,-2px) rotate(-2deg) } 30% { transform:translate(-1px,2px) rotate(-3deg) } 35% { transform:translate(2px,1px) rotate(6deg) } 40% { transform:translate(-2px,-3px) rotate(-9deg) } 45% { transform:translateY(-1px) rotate(-12deg) } 50% { transform:translate(1px,2px) rotate(10deg) } 55% { transform:translateY(-3px) rotate(8deg) } 60% { transform:translate(1px,-1px) rotate(8deg) } 65% { transform:translateY(-1px) rotate(-7deg) } 70% { transform:translate(-1px,-3px) rotate(6deg) } 75% { transform:translateY(-2px) rotate(4deg) } 80% { transform:translate(-2px,-1px) rotate(3deg) } 85% { transform:translate(1px,-3px) rotate(-10deg) } 90% { transform:translate(1px) rotate(3deg) } 95% { transform:translate(-2px) rotate(-3deg) } to { transform:translate(2px,1px) rotate(2deg) }}" + ] ++ styles_child} - temple do - span class: "mfm", - style: - "display: inline-block; animation: #{node.props.speed} ease 0s infinite normal none running mfm-twitch;" do - html_child - end - end + %Node.MFM.Twitch{} -> + {html_child, styles_child} = to_html_styles(node.children) - %Node.MFM.Rainbow{} -> - html_child = to_html_styles(node.children) + {html <> + "#{html_child}", + styles ++ + [ + "@keyframes mfm-twitch { 0% { transform:translate(7px,-2px) } 5% { transform:translate(-3px,1px) } 10% { transform:translate(-7px,-1px) } 15% { transform:translateY(-1px) } 20% { transform:translate(-8px,6px) } 25% { transform:translate(-4px,-3px) } 30% { transform:translate(-4px,-6px) } 35% { transform:translate(-8px,-8px) } 40% { transform:translate(4px,6px) } 45% { transform:translate(-3px,1px) } 50% { transform:translate(2px,-10px) } 55% { transform:translate(-7px) } 60% { transform:translate(-2px,4px) } 65% { transform:translate(3px,-8px) } 70% { transform:translate(6px,7px) } 75% { transform:translate(-7px,-2px) } 80% { transform:translate(-7px,-8px) } 85% { transform:translate(9px,3px) } 90% { transform:translate(-3px,-2px) } 95% { transform:translate(-10px,2px) } to { transform:translate(-2px,-6px) }}" + ] ++ styles_child} - "#{html_child}" + %Node.MFM.Rainbow{} -> + {html_child, styles_child} = to_html_styles(node.children) - %Node.MFM.Sparkle{} -> - # TODO: This is not how Misskey does it and should be changed to make it work like Misskey. - html_child = to_html_styles(node.children) + {html <> + "#{html_child}", + styles ++ + [ + "@keyframes mfm-rainbow { 0% { filter:hue-rotate(0deg) contrast(150%) saturate(150%) } to { filter:hue-rotate(360deg) contrast(150%) saturate(150%) }}" + ] ++ styles_child} - "#{html_child}" + %Node.MFM.Sparkle{} -> + # TODO: This is not how Misskey does it and should be changed to make it work like Misskey. + {html_child, styles_child} = to_html_styles(node.children) - %Node.MFM.Rotate{} -> - html_child = to_html_styles(node.children) + {html <> + "#{html_child}", + styles ++ + [ + "@keyframes mfm-sparkle { 0% { filter: brightness(100%) } to { filter: brightness(300%) }}" + ] ++ styles_child} - "#{html_child}" + %Node.MFM.Rotate{} -> + {html_child, styles_child} = to_html_styles(node.children) - %Node.MFM.Undefined{} -> - html_child = to_html_styles(node.children) + {html <> + "#{html_child}", + styles ++ styles_child} - "#{html_child}" + %Node.MFM.Undefined{} -> + {html_child, styles_child} = to_html_styles(node.children) - _ -> - html - end + {html <> + "#{html_child}", styles ++ styles_child} + + _ -> + {html, styles} + end end) end end diff --git a/mix.exs b/mix.exs index 6c201bd..7bc337a 100644 --- a/mix.exs +++ b/mix.exs @@ -4,7 +4,7 @@ defmodule MfmParser.MixProject do def project do [ app: :mfm_parser, - version: "0.1.1", + version: "0.1.0", elixir: "~> 1.13", start_permanent: Mix.env() == :prod, deps: deps() @@ -20,8 +20,6 @@ defmodule MfmParser.MixProject do # Run "mix help deps" to learn about dependencies. defp deps do - [ - {:temple, git: "https://akkoma.dev/AkkomaGang/temple.git", ref: "066a699ade472d8fa42a9d730b29a61af9bc8b59"} - ] + [] end end diff --git a/test/encoder_test.exs b/test/encoder_test.exs index 974b107..6557e36 100644 --- a/test/encoder_test.exs +++ b/test/encoder_test.exs @@ -92,7 +92,7 @@ defmodule MfmParser.EncoderTest do } ] - expected = ~s[Misskey expands the world of the Fediverse] + expected = ~s[Misskey expands the world of the Fediverse] assert Encoder.to_html(input_tree) == expected end