mfm support

src/render.ts

@@ -1,11 +1,20 @@
-import config from './config';
 import views from 'koa-views';
+import { parse, toHtml } from 'mfmf';
+import { parsePlain } from 'mfmf/dist/script/mfm/parse';
+
+
+import config from './config';
 import { User } from './models/User';
 import { Note } from './models/Note';
 
 export const render = views(__dirname + '/views', {
 	extension: 'pug', options: {
 		...config,
+		mfmToHtml: (text: string, plain = false) => {
+			return toHtml(plain ? parsePlain(text) : parse(text), [], {
+				url: '',
+			});
+		},
 		getAcct: (user: User) =>  user.host ? `@${user.username}@${user.host}` : `@${user.username}`,
 		getUserName: (user: User) => user.name || user.username,
 		getVisibility: (note: Note) => {

src/views/_base.pug

@@ -7,6 +7,10 @@ html
         meta(name="viewport", content="width=device-width, initial-scale=1.0")
         block meta
         title= title
+        style.
+            body {
+                font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
+            }
     body
         header
             h1: a(href="/") Simpkey
@@ -21,5 +25,5 @@ html
                 | ・
                 a(href="/terms") 利用規約
             p (C)2020 Xeltica - 
-                a(href="/about") version !{version}
+                a(href="/about") version #{version}
             block footer

src/views/_components.pug

@@ -23,10 +23,10 @@ mixin sub-note(note)
         p
             if note.cw
                 details
-                    summary !{note.cw} (!{note.text.length}文字)
+                    summary #{note.cw} (#{note.text.length}文字)
-                    != note.text
+                    != mfmToHtml(note.text)
             else
-                != note.text
+                != mfmToHtml(note.text)
         aside
             span.visibility= getVisibility(note)
             a.date(href="/notes/" + note.id)= new Date(note.createdAt).toLocaleString()
@@ -35,7 +35,7 @@ mixin note(note)
     if note.reply
         +sub-note(note.reply)(style="opacity: 0.5")
     if note.renote && !note.text
-        p: b 🔁 !{getUserName(note.user)} がRenote
+        p: b 🔁 #{getUserName(note.user)} がRenote
         +note(note.renote)
     else
         .note&attributes(attributes)
@@ -46,10 +46,10 @@ mixin note(note)
                     | ↩
                 if note.cw
                     details
-                        summary !{note.cw} (!{note.text.length}文字)
+                        summary #{note.cw} (#{note.text.length}文字)
-                        != note.text
+                        != mfmToHtml(note.text)
                 else
-                    != note.text
+                    != mfmToHtml(note.text)
             if note.renote
                 p RN:
                 +sub-note(note.renote)
@@ -61,11 +61,11 @@ mixin note(note)
                     span(class=(key === note.myReaction ? 'my reaction' : 'reaction'))=`${key} ${val}`
             footer
                 |[
-                a(href="/reply/" + note.id) ﾘﾌﾟﾗｲ !{note.repliesCount}
+                a(href="/reply/" + note.id) ﾘﾌﾟﾗｲ #{note.repliesCount}
                 |]
                 if canRenote && canRenote(note)
                     |[
-                    a(href="/renote/" + note.id) ﾘﾉｰﾄ !{note.renoteCount}
+                    a(href="/renote/" + note.id) ﾘﾉｰﾄ #{note.renoteCount}
                     |]
                 if canReact && canReact(note)
                     if !note.myReaction
@@ -138,28 +138,26 @@ mixin user-header(user, detail = false)
             span.bot [CAT]
     if detail
         if user.description
-            .description= user.description
+            .description !{mfmToHtml(user.description)}
         if user.birthday
-            .birthday 🎂 !{user.birthday}
+            .birthday 🎂 #{user.birthday}
         if user.location
-            .birthday 📍!{user.location}
+            .birthday 📍#{user.location}
         if user.sex
-            .sex 性別: !{user.sex}
+            .sex 性別: #{user.sex}
-        if user.sex
-            .sex 性別: !{user.sex}
         dl
             each field in user.fields
-                dt= field.name
+                dt= mfmToHtml(field.name)
-                dd= field.value
+                dd= mfmToHtml(field.value)
                 
     .count
-        a.notes(href="/" + getAcct(user)) !{user.notesCount} ノート
+        a.notes(href="/" + getAcct(user)) #{user.notesCount} ノート
         |  
         //- a.following(href="/" + getAcct(user) + "/following") 
-        | !{user.followingCount} フォロー
+        | #{user.followingCount} フォロー
         |  
         //- a.followers(href="/" + getAcct(user) + "/followers")
-        | !{user.followersCount} フォロワー
+        | #{user.followersCount} フォロワー
 
 mixin timeline(notes)
     each note in notes

src/views/about.pug

@@ -2,7 +2,7 @@ extends _base
 
 block content
     p Simpkey は、JavaScript のいらない Misskey クライアントです。
-    h2 バージョン !{version}
+    h2 バージョン #{version}
     ul
     each val in changelog
         li= val

src/views/notifications.pug

@@ -11,23 +11,23 @@ block content
                 hr
                 case val.type
                     when 'follow'
-                        p !{getUserName(val.user)} さんにフォローされました
+                        p #{getUserName(val.user)} さんにフォローされました
                     when 'mention'
                     when 'reply'
                     when 'renote'
                     when 'quote'
                         +note(val.note)
                     when 'reaction'
-                        p !{getUserName(val.user)} さんが !{val.reaction} とリアクションしました
+                        p #{getUserName(val.user)} さんが #{val.reaction} とリアクションしました
                         +sub-note(val.note)
                     when 'pollVote'
-                        p !{getUserName(val.user)} さんが投票しました
+                        p #{getUserName(val.user)} さんが投票しました
                         +sub-note(val.note)                        
                     when 'receiveFollowRequest'
-                        p !{getUserName(val.user)} さんからフォローリクエストされました
+                        p #{getUserName(val.user)} さんからフォローリクエストされました
                     when 'followRequestAccepted'
-                        p !{getUserName(val.user)} さんへのフォローが承認されました
+                        p #{getUserName(val.user)} さんへのフォローが承認されました
                     when 'groupInvited'
                     when 'app'
                     default
-                        p !{val.type} 通知(未実装)
+                        p #{val.type} 通知(未実装)