fix participants.html

(pyenv)

.gitignore

@@ -1,2 +1,44 @@
-index.html
+
 .vscode/
+.python-version
+*.ai
+
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+/.firebase/
+/.firebaserc
+/.idea/
+/venv/
+firebase.json
+
+
+##
+original_collider.svg
+original.svg
+
+data

README.md

@@ -1,24 +1,24 @@
 # 환대의 조각
 
 ### 설명
-디스트리뷰시(distribusi)를 커스텀하기 위한 레포지토리입니다.
-작업을 빠르게 하기 위해서 디스트리뷰시를 직접 설치해서 사용하기보다는
-Glitch에서처럼 스크립트를 그대로 실행시키는 것 방식으로 작동합니다.
+디스트리부시(distribusi)를 커스텀하기 위한 레포지토리입니다.
+작업을 빠르게 하기 위해서 디스트리부시를 직접 설치해서 사용하기보다는
+glitch.com에서처럼 스크립트를 그대로 실행시키는 방식으로 작동합니다.
 `distribusi/distribusi`폴더 안에 있는 코드를 수정하고
-root폴더에 위한 `test.sh`를 실행시키면 `test_data`안에 있는
+root폴더에 위치한 `test.sh`를 실행시키면 `test_data`안에 있는
 파일들을 곧바로 렌더링합니다. 폴더 안에는 현재 다른 분들이 올려주신
 다양한 데이터들을 다운로드 받은 것들이 있습니다. (혹시 문제가 된다면 알려주세요!)
 
 작업할 때는 각자 자신의 브랜치를 만들어주시고, (예를들면 `feature/peer-tube`)
-작업중인 부분이 완료되면 main 브랜치에서 작업중인 branch를 merge해주세요!
-만약 충돌하는 부분이 생기면 이야기하고 해결하면 좋을 것 같아요.
+작업중인 부분이 완료되면 master branch로 작업한 branch를 merge해주세요!
+만약 충돌하는 부분이 생기면, 함께 이야기하고 해결하면 좋을 것 같아요.
 
 컴퓨터에 conda가 설치되어 있다면 바로 init.sh을 누르면
 모든 필요한 라이브러리가 설치될 것이고,
 test.sh를 누르면 index.html이 생기는 것을 보실 수 있을 것입니다!
 혹시 제대로 되지 않으면 말씀해주세요!
 
-- /test_data에는 cloud처럼 사용자의 데이터(저희가 시험해볼 것들)가 있습니다.
+- /test_data에는 [cloud](https://cloud.dianaband.info)처럼 사용자의 데이터(저희가 시험해볼 것들)가 있습니다.
 - /distribusi는 저희가 개조할 라이브러리 파일들이 있습니다.
 - /src는 웹작업을 위한 리소스가 들어갈 예정입니다
 

deploy.sh

@@ -1,3 +1,33 @@
-# HELP 도움이 필요해요 HELP
-# 깃허브에서 이 repository를 clone해서
-# 그걸 바로 재설치하면 될 것 같아서 구현 예정!
+#!/bin/bash
+
+#monitoring each command invokations (on)
+set -x
+
+git fetch
+git pull
+
+rm data/.ignore
+cp test_data/.ignore data/
+
+rm -r data/src
+cp -r test_data/src/ data/
+
+rm data/about.html
+cp test_data/about.html data/
+
+rm data/home.html
+cp test_data/home.html data/
+
+rm data/participants.html
+cp test_data/participants.html data/
+
+rm data/index.html
+cp test_data/index.html data/
+
+rm data/events/list.html
+cp test_data/events/list.html data/events/
+
+python distribusi/test.py -t -d ./data/
+
+#monitoring each command invokations (off)
+set +x

distribusi/distribusi/cli.py

@@ -1,3 +1,4 @@
+# -*- coding: utf-8 -*- 
 import argparse
 import os
 

distribusi/distribusi/distribusi.py

@@ -1,17 +1,29 @@
+# -*- coding: utf-8 -*-
+
 import base64
 import os
 import subprocess
+
 from io import BytesIO
 
 import magic
-from PIL import Image
+from PIL import Image, ExifTags
 import markdown
 
 from distribusi.page_template import html_footer, html_head
+from distribusi.page_template_event import html_footer_event, html_head_event
 from distribusi.mappings import CODE_TYPES, FILE_TYPES, SUB_TYPES
+from distribusi import fragments
+import uuid
+from distribusi.ignore import Ignore
+
+import traceback
+import json
 
 MIME_TYPE = magic.Magic(mime=True)
 
+ignore = Ignore()
+
 
 def caption(image):
     try:
@@ -26,15 +38,35 @@ def caption(image):
     except Exception as e:
         caption = ''
         print(e)
+
     return caption
 
 
-def thumbnail(image, name, args):
+def thumbnail(image, name, args, size=(450,450)):
+
     try:
-        size = (450, 450)
+        # size = (450, 450)
+        alt = ''
         im = Image.open(image)
+        exif = None
+        try:
+            for orientation in ExifTags.TAGS.keys():
+                if ExifTags.TAGS[orientation] == 'Orientation':
+                    break
+            exif = im._getexif()
+        except (AttributeError, KeyError, IndexError):
+            pass
+
         im.thumbnail(size)
 
+        if exif is not None:
+            if exif[orientation] == 3:
+                im = im.rotate(180, expand=True)
+            elif exif[orientation] == 6:
+                im = im.rotate(270, expand=True)
+            elif exif[orientation] == 8:
+                im = im.rotate(90, expand=True)
+
         if (im.mode == 'RGBA'):
             bg = Image.new('RGBA', im.size, (255,255,255))
             composite = Image.alpha_composite(bg, im)
@@ -48,31 +80,53 @@ def thumbnail(image, name, args):
             cap = caption(image)
         else:
             cap = name
+        # alt
+        alt_path = image + ".alt"
+        if os.path.isfile(alt_path):
+            f = open(alt_path, 'r', encoding='utf-8')
+            while True:
+                line = f.readline()
+                if not line: break
+                alt = alt + line + ' '
         return (
-            "<figure><a href='{}'><img class='thumbnail' src='data:image/jpg;base64,{}'></a><figcaption>{}</figcaption></figure>"
-        ).format(name, data_url, cap)
+            "<figure><a href='{}'><img class='thumbnail' src='data:image/jpg;base64,{}' alt='{}'></a><figcaption>{}</figcaption></figure>"
+        ).format(name, data_url, alt, cap)
     except Exception as e:
+        traceback.print_exc()
         print('Thumbnailer:', e)
-        return "<figure><a href='{}'><img src='{}'></a><figcaption>{}</figcaption></figure>".format(name, name, name)
+        return "<figure><a href='{}'><img src='{}' alt='{}'></a><figcaption>{}</figcaption></figure>".format(name, name, alt, name)
 
 
-def div(args, type_, subtype, tag, name):
-    id_name = name.split('.')[0].replace(' ', '_')
+def div(args, type_, subtype, tag, name, fid):
+    '''
+    fid: fragment_id
+    '''
     if args.no_filenames:
         filename = ''
     else:
         filename = '<span class="filename">{}</span>'.format(name)
 
+    if len(str(fid)) >= 36 or int(fid) < 0: # detect if fid is uuid
         if 'image' in type_:
-        html = '<div id="{}" class="{}">{}</div>'
+            html = '<div class="{}">{}</div>'
         elif 'pdf' in subtype:
-        html = '<div id="{}" class="{}">{}' + filename + '</div>'
+            html = '<div class="{}">{}' + filename + '</div>'
         elif 'dir' in type_ or 'html' in subtype or 'unkown-file' in subtype:
-        html = '<div id="{}" class="{}">{}</div>'
+            html = '<div class="{}">{}</div>'
         else:
-        html = '<div id="{}" class="{}">{}' + filename + '</div>'
-
-    return html.format(id_name, subtype, tag)
+            html = '<div class="{}">{}' + filename + '</div>'
+        html = html.format(subtype, tag)
+    else:
+        if 'image' in type_:
+            html = '<div class="{}"><a class="anchor" id="{}"></a>{}<span class="fid">#{}</span></div>'
+        elif 'pdf' in subtype:
+            html = '<div class="{}"><a class="anchor" id="{}"></a>{}' + filename + '<span class="fid">#{}</span></div>'
+        elif 'dir' in type_ or 'html' in subtype or 'unkown-file' in subtype:
+            html = '<div class="{}"><a class="anchor" id="{}"></a>{}<span class="fid">#{}</span></div>'
+        else:
+            html = '<div class="{}"><a class="anchor" id="{}"></a>{}' + filename + '<span class="fid">#{}</span></div>'
+        html = html.format(subtype, fid, tag, fid)
+    return html
 
 
 def check_distribusi_index(args, index):
@@ -91,15 +145,17 @@ def check_distribusi_index(args, index):
     elif args.force:
         return True
 
-def write_index(args,index, html, html_head, html_footer):
+
+def write_index(args, index, html, html_head, html_footer):
     with open(index, 'w') as f:
         if not args.no_template:
             if args.style:
                 fs = open(args.style, "r")
                 style = fs.read()
-                styled_html_head = html_head % style
+                styled_html_head = html_head # % style
             else:
                 styled_html_head = html_head % ''
+                print("---")
             f.write(styled_html_head)
 
         for line in html:
@@ -109,8 +165,104 @@ def write_index(args,index, html, html_head, html_footer):
             f.write(html_footer)
 
 
-def distribusify(args, directory):  # noqa
+def render_dir(args, directory):
+    html = []
+    print(directory)
+
     for root, dirs, files in os.walk(directory):
+        for name in sorted(files):
+            lv = root.split("/")
+            relative = lv[len(lv) - 1]
+            relative_path = "./{}/{}".format(relative, name)
+
+            if ignore.test(name):
+                pass
+            elif 'index.html' not in name:
+                full_path = os.path.join(root, name)
+                mime = MIME_TYPE.from_file(full_path)
+                # example: MIME plain/text becomes 'type' plain 'subtype' text
+                type_, subtype = mime.split('/')
+
+                c = name
+
+                if args.verbose:
+                    print('Found file in dir ', name, 'as', mime)
+
+                if type_ in FILE_TYPES:
+                    a = FILE_TYPES[type_].format(relative_path, c, c)
+
+                    # expansion for different kind of text files
+                    if type_ == 'text':
+                        if name.endswith('.html') or subtype == 'html':
+                            subtype = 'html'
+                            # what types of text files to expand
+                            a = '<section id="{}">{}</section>'.format(name, open(full_path).read())
+                        elif subtype in CODE_TYPES or name.endswith('.txt'):
+                            # if the plain text is code,
+                            # which types do we wrap in pre-tags?
+                            a = "<div>" + open(full_path).read() + "</div>"
+                        elif subtype == 'markdown' or name.endswith('.md'):
+                            a = "<div>" + markdown.markdown(open(full_path).read()) + "</div>"
+                            pass
+                        else:
+                            subtype = subtype + ' unkown-file'
+                            a = "<a href='{}'>{}</a>"
+                            # a = FILE_TYPES[type_]
+
+                    if type_ == 'image':
+                        a = FILE_TYPES[type_].format(relative_path, c, c)
+                        if args.no_filenames:
+                            c = ""
+                        if args.captions:
+                            c = caption(relative_path)
+                            a = FILE_TYPES[type_].format(relative_path, c, c)
+                        # ALT 처리
+                        alt_path = full_path + ".alt"
+                        if os.path.isfile(alt_path):
+                            f = open(alt_path, 'r', encoding='utf-8')
+                            alt = ''
+                            while True:
+                                line = f.readline()
+                                if not line: break
+                                alt = alt + line + ' '
+
+                            a = FILE_TYPES[type_].format(relative_path, alt, c)
+                        # if thumbnail, override.
+                        if args.thumbnail:
+                            thumbconf_path = "./{}/{}".format(root, "thumbconf.json")
+                            size = (450, 450)
+                            if os.path.isfile(thumbconf_path):
+                                with open(thumbconf_path) as json_file:
+                                    json_data = json.load(json_file)
+                                    size = tuple(json_data['size'])
+                                    print("applying thumbconf.json: size: ", size)
+                            a = thumbnail(full_path, relative_path, args, size)
+
+                if subtype in SUB_TYPES:
+                    a = SUB_TYPES[subtype]
+
+                if type_ not in FILE_TYPES and subtype not in SUB_TYPES:
+                    # catch exceptions not yet defined in FILE_TYPES or SUB_TYPES
+                    a = "<a href='{}'>{}</a>"
+                    if args.verbose:
+                        message = 'not in list of file types, adding as plain href: \n'
+                        print(type_, subtype, message, name)
+                        subtype = subtype + ' unkown-file'
+
+                a = a.replace('{}', relative_path)
+                id = uuid.uuid1()
+                html.append(div(args, type_, subtype, a, name, id))
+    result = ""
+    for line in html:
+        result += line + "\n"
+    return result
+
+
+def distribusify(args, directory, freg):  # noqa
+    for root, dirs, files in os.walk(directory):
+        ignore.add(root)
+        if ignore.testRoot(root):
+            continue
 
         if args.exclude_directory:
             if args.verbose:
@@ -124,6 +276,18 @@ def distribusify(args, directory):  # noqa
         dirs.sort()
         files.sort()
 
+        #
+        # fragments index
+        # 작가 폴더 내인 경우 아티스트명 저장
+        #
+        artist = None
+        path = root.split('/')
+        if len(path) > 2:
+            artist = path[2].strip()
+
+        print(path)
+        print(artist)
+
         if not args.remove_index:
             html = []
 
@@ -131,21 +295,22 @@ def distribusify(args, directory):  # noqa
                 print('Generating directory listing for', root)
 
             for name in sorted(files):
-
-                if 'index.html' not in name:
+                if ignore.test(name):
+                    print("Ignore : " + name)
+                elif 'index.html' not in name:
                     full_path = os.path.join(root, name)
                     mime = MIME_TYPE.from_file(full_path)
                     # example: MIME plain/text becomes 'type' plain 'subtype' text
                     type_, subtype = mime.split('/')
 
-                    caption = name
+                    c = name
 
                     if args.verbose:
                         print('Found', name, 'as', mime)
 
                     if type_ in FILE_TYPES:
 
-                        a = FILE_TYPES[type_].format(name, caption)
+                        a = FILE_TYPES[type_].format(name, c, c)
 
                         # expansion for different kind of text files
                         if type_ == 'text':
@@ -156,9 +321,9 @@ def distribusify(args, directory):  # noqa
                             elif subtype in CODE_TYPES or name.endswith('.txt'):
                                 # if the plain text is code,
                                 # which types do we wrap in pre-tags?
-                                a = "<pre>" + open(full_path).read() + "</pre>"
+                                a = "<div>" + open(full_path).read() + "</div>"
                             elif subtype == 'markdown' or name.endswith('.md'):
-                                a = "<pre>" + markdown.markdown(open(full_path).read()) + "</pre>"
+                                a = "<div>" + markdown.markdown(open(full_path).read()) + "</div>"
                                 pass
                             else:
                                 subtype = subtype+' unkown-file'
@@ -169,10 +334,31 @@ def distribusify(args, directory):  # noqa
                             if args.thumbnail:
                                 a = thumbnail(full_path, name, args)
                             if args.no_filenames:
-                                caption = ""
+                                c = ""
                             if args.captions:
-                                caption = caption(full_path)
-                                a = FILE_TYPES[type_].format(name, caption)
+                                c = caption(full_path)
+                                a = FILE_TYPES[type_].format(name, c, c)
+                            # ALT 처리
+                            alt_path = full_path + ".alt"
+                            if os.path.isfile(alt_path):
+                                f = open(alt_path, 'r', encoding='utf-8')
+                                alt = ''
+                                while True:
+                                    line = f.readline()
+                                    if not line: break
+                                    alt = alt + line + ' '
+
+                                a = FILE_TYPES[type_].format(name, alt, c)
+                            # # if thumbnail, override.
+                            # if args.thumbnail:
+                            #     thumbconf_path = "./{}/{}".format(root, "thumbconf.json")
+                            #     size = (450, 450)
+                            #     if os.path.isfile(thumbconf_path):
+                            #         with open(thumbconf_path) as json_file:
+                            #             json_data = json.load(json_file)
+                            #             size = tuple(json_data['size'])
+                            #             print("applying thumbconf.json: size: ", size)
+                            #     a = thumbnail(full_path, relative_path, args, size)
 
                     if subtype in SUB_TYPES:
                         a = SUB_TYPES[subtype]
@@ -186,8 +372,9 @@ def distribusify(args, directory):  # noqa
                             subtype = subtype + ' unkown-file'
 
                     a = a.replace('{}', name)
-
-                    html.append(div(args, type_, subtype, a, name))
+                    if (len(path) == 3 and artist) or (len(path) == 4 and artist == "events"):
+                        fid = freg.get_index(artist, name)
+                        html.append(div(args, type_, subtype, a, name, fid))
 
             if root != directory:
                 if args.menu_with_index:
@@ -196,19 +383,29 @@ def distribusify(args, directory):  # noqa
                     html.append('<a href="../">../</a>')
 
             for name in dirs:
-                if args.menu_with_index:
-                    a = "<a href='{}/index.html'>{}</a>".replace('{}', name)
-                else:
-                    a = "<a href='{}'>{}/</a>".replace('{}', name)
-
-                html.insert(0, div(args, 'dir', 'dir', a, 'folder'))
+                if ignore.test(name):
+                    pass
+                elif (len(path) == 3 and artist) or (len(path) == 4 and artist == "events"):
+                    # dirs 내부의 콘텐츠를 렌더링해 가져와야 함
+                    fid = freg.get_index(artist, name)
+                    rd = render_dir(args, "{}/{}".format(root, name))
+                    # h = '<div id="{}">\n{}</div>'
+                    h = '<div class="folder"><a class="anchor" id="{}"></a>\n{}<span class="fid">#{}</span></div>'.format(fid, rd, fid)
+                    html.append(h)
 
+            if not directory == root:
                 index = os.path.join(root, 'index.html')
                 if os.path.exists(index):
                     if check_distribusi_index(args, index):
-                   write_index(args,index,html, html_head, html_footer)
+                        if artist == "events":
+                            write_index(args, index, html, html_head_event, html_footer_event)
+                        else:
+                            write_index(args, index, html, html_head, html_footer)
                 elif not os.path.exists(index):
-                write_index(args,index,html, html_head, html_footer)
+                    if artist == "events":
+                        write_index(args, index, html, html_head_event, html_footer_event)
+                    else:
+                        write_index(args, index, html, html_head, html_footer)
 
         if args.remove_index:
             index = os.path.join(root, 'index.html')

distribusi/distribusi/fragments.py

@@ -0,0 +1,208 @@
+# -*- coding: utf-8 -*- 
+import os
+import platform
+import json
+from operator import itemgetter
+from distribusi.ignore import Ignore
+
+class Fragment:
+    def __init__(self, index, update, directory, artist, file):
+        self.index = index
+        self.update = update
+        self.directory = directory
+        self.artist = artist
+        self.file = file
+
+    def __repr__(self):
+        return repr((self.index, self.update, self.directory, self.artist, self.file))
+
+
+class Fragments:
+    def __init__(self):
+        self.json_data = {}
+        self.index = {}
+        self.indextable = []
+        self.timetable = []
+        self.ignore = Ignore()
+
+        self.index_file = 'index.json'
+
+    def init_json(self, directory):
+        self.index_path = index_path = os.path.join(directory, self.index_file)
+        if os.path.isfile(self.index_path):
+            with open(self.index_path) as json_file:
+                self.json_data = json.load(json_file)
+
+        self.temp_data = {"fragments":[]}
+        self.count = len(self.json_data)
+
+
+    def creation_date(self, path_to_file):
+        """
+        Try to get the date that a file was created, falling back to when it was
+        last modified if that isn't possible.
+        See http://stackoverflow.com/a/39501288/1709587 for explanation.
+        """
+        if platform.system() == 'Windows':
+            return os.path.getctime(path_to_file)
+        else:
+            stat = os.stat(path_to_file)
+            try:
+                return stat.st_mtime
+            except AttributeError:
+                return stat.st_birthtime
+
+    def occupancy(self, directory, file):
+        f = file + ".meta"
+        meta_path = os.path.join(directory, f)
+        with open(meta_path) as json_file:
+            meta = json.load(json_file)
+        try:
+            occupation = meta["occupation"]
+        except KeyError:
+            return
+
+        if occupation > -1:
+            origin_path = os.path.join(directory, file)
+            date = self.creation_date(origin_path)
+            arr = directory\
+                .split("/")
+            if arr.__len__() == 2:
+                artist = arr[1]
+            else:
+                artist = arr[2]
+            self.index[occupation] = Fragment(occupation, date, directory, artist, file)
+
+    def is_meta(self, file):
+        fa = file.split(".")
+        i = len(fa)-1
+        if i>0 and fa[i] == "meta":
+            return True
+        else:
+            return False
+
+    def has_meta(self, directory, file):
+        f = file+".meta"
+        meta_path = os.path.join(directory, f)
+        if os.path.isfile(meta_path):
+            return True
+        else:
+            return False
+
+    def preindex(self, directory):
+        self.init_json(directory)
+        for root, dirs, files in os.walk(directory):
+            self.ignore.add(root)
+
+            arr = root.split("/")
+
+            if self.ignore.test(arr[2]):
+                pass # ignore 폴더 처리
+            else:
+                # 2뎁스까지만 인덱스 함.
+                if arr.__len__() < 4:
+                    # files index
+                    for f in files:
+                        if self.is_meta(f):
+                            pass
+                        elif self.ignore.test(f):
+                            pass
+                        elif self.has_meta(root, f):
+                            self.occupancy(root, f)
+                        else:
+                            self.add_timetable(root, f)
+                if arr.__len__() > 2 and arr[2]:
+                    # dirs index
+                    for d in dirs:
+                        if self.has_meta(root, d):
+                            self.occupancy(root, d)
+                        elif self.ignore.test(d):
+                            pass
+                        else:
+                            self.add_timetable(root, d)
+
+    def postindex(self):
+        self.timetable = sorted(self.timetable, key=lambda fragment: fragment.update)
+        print("----------- INDEXING ------------")
+        # indexing
+        for f in self.timetable:
+            f.index = self.get_lastindex()
+            self.index[f.index] = f
+        self.update_indextable()
+        self.save()
+
+    def update_indextable(self):
+        self.indextable = []
+        for f in self.index:
+            self.indextable.append(self.index[f])
+        self.indextable = sorted(self.indextable, key=lambda fragment: fragment.index)
+
+    def get_lastindex(self):
+        last = 0
+        self.update_indextable()
+        for f in self.indextable:
+            if f.index == last:
+                last = last + 1
+        return last
+
+    def add_timetable(self, directory, file):
+        path = os.path.join(directory, file)
+        date = self.creation_date(path)
+        arr = directory.split("/")
+        if arr.__len__() > 2:
+            artist = arr[2]
+            self.timetable.append(Fragment(-1, date, directory, artist, file))
+
+    '''
+    # [deprecated] preindex 하기 전 소소
+    def add(self, artist, fragment):
+        temp = {
+            "index" : 0,
+            "update" : 0,
+            "file" : {
+                "artist": artist,
+                "fragment": fragment
+            }
+        }
+
+        added = False
+        for f in self.json_data['fragments']:
+            # 기존 조각과 비교
+            if f['file'] == temp['file']:
+                added = True
+
+        if added:
+            print("Already added - artist:", artist, ", fragment: ", fragment)
+        else:
+            self.count = self.count + 1
+            print("Add fragment - artist:", artist, ", fragment: ", fragment)
+            temp["index"] = self.count
+            temp["update"] = int(time.time())
+            self.temp_data['fragments'].append(temp)
+    '''
+
+    def save(self):
+        #print(json.dumps(self.indextable, cls=CustomEncoder))
+        with open(self.index_path, 'w') as outfile:
+            json.dump(self.indextable, outfile, indent=4, cls=CustomEncoder)
+        self.count = len(self.indextable)
+
+    def get_fragments(self):
+        return self.indextable
+
+    def get_count(self):
+        return self.count
+
+    def get_index(self, artist, name):
+        for f in self.indextable:
+            if f.artist == artist and f.file == name:
+                return ("{}".format(f.index)).zfill(4)
+        return -1;
+
+
+class CustomEncoder(json.JSONEncoder):
+    def default(self, o):
+        return {'__{}__'.format(o.__class__.__name__): o.__dict__}
+
+if __name__ == "__main__":
+    freg = Fragments()

distribusi/distribusi/ignore.py

@@ -0,0 +1,54 @@
+import os
+import re
+
+class Ignore:
+    def __init__(self):
+        self.ignore = ['.ignore']
+        self.ignore_file = '.ignore'
+        return
+
+    def add(self, directory):
+        ignore_path = os.path.join(directory, self.ignore_file)
+        if os.path.isfile(ignore_path):
+            ignore = open(ignore_path, 'r')
+            ignore_lines = ignore.readlines()
+            for line in ignore_lines:
+                stripped_line = line.rstrip()
+                self.ignore.append(stripped_line)
+
+    def test(self, target):
+        if target in self.ignore:
+            return True
+
+        for ig in self.ignore:
+            reg = re.compile(ig)
+            if bool(re.match(reg, target)):
+                return True
+
+        return False
+
+    def testRoot(self, target):
+        path = target.split('/')
+        path_len = len(path)
+        if path_len > 2:
+            artist = path[2].strip()
+
+        # 이벤트 폴더가 아닌 폴더는 3depth 이상은 무시
+        if path_len > 3:
+            if artist == "events":
+                pass
+            else:
+                return True
+
+        if path_len > 4:
+            return True
+
+        if path[path_len-1] in self.ignore or path[path_len-1] == "":
+            return True
+
+        for ig in self.ignore:
+            reg = re.compile(ig)
+            if bool(re.match(reg, target)):
+                return True
+
+        return False

distribusi/distribusi/mappings.py

@@ -1,7 +1,8 @@
+# -*- coding: utf-8 -*- 
 CODE_TYPES = ['x-c', 'x-shellscript', 'x-python']
 
 FILE_TYPES = {
-    'image': '<figure><img class="image" src="{}"><figcaption>{}</figcaption></figure>',
+    'image': '<figure><img class="image" src="{}" alt="{}" ><figcaption>{}</figcaption></figure>',
     'text': '<a href="{}" class="text">{}</a>',
     'video': ('<video controls>' '<source src="{}"></video>'),
     'audio': ('<audio controls class="audio">' '<source src="{}"></audio>'),

distribusi/distribusi/page_template.py

@@ -1,25 +1,78 @@
+# -*- coding: utf-8 -*-
 html_head = """
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
+    <title>환대의 조각들 Fragments of Hospitality</title>
     <!-- Generated with distribusi https://git.vvvvvvaria.org/varia/distribusi -->
     <meta name="generator" content="distribusi" />
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
-    <style>
-      .image{max-width: 100%%;}
-      .pdf object{width:640px;height: 640px;}
-      .dir::before{content:"📁 ";font-size:18px;}
-      .filename{display:block;font-family:mono;}
-      .unkown-file::before{content:"📄 ";font-size:18px;}
-      div{max-width: 640px;display:inline-block;vertical-align:top;margin:1em;padding:1em;}
-      video {width:640px;max-height:640px;}
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     %s
-    </style>
+    <link rel="stylesheet" type="text/css" href="/src/style/common.css" />
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script src="/src/scripts/mobileScroll.js"></script>
+    <script src="./main.js"></script>
   </head>
   <body>
+<div>
+  <div id="menu">
+    <div id="logo_wrapper" class="svg_wrapper">
+      <a href="/">
+      <img id="logo_foh"src="/src/img/logo.svg" alt="환대의 조각 로고">
+    </a>
+    </div>
+
+    <span id="to_about">
+      <a href="/about.html">
+        ABOUT
+      </a>
+      </span>
+    <span id="to_fragments">
+      <a href="/participants.html">
+        FRAGMENTS
+      </a>
+      </span>
+    <span id="to_timeline">
+      <a href="/events/list.html">
+        TIMELINE
+      </a>
+      </span>
+  </div>
+
+  <div id="margin">
+    <!-- to avoid overlapping -->
+  </div>
+
+  <div id="wrapper_author">
+    <div id="fragment_wrapper">
+    </div>
+    <div id="introduction">
+    </div>
+  </div>
+
+  <div id="archive_exit" style="display:none;"></div>
+  <div id="archive">
+    <button id="archive_button">ARCHIVE
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
+    </button>
+    <div id="archive_list">
+    </div>
+  </div>
+
+  <div id="contents">
+    <div id="frags">
 """
 
 html_footer = """
-  </body>
+    </div>
+  </div>
+</div>
+<script src="/src/scripts/updateIntroduction.js"></script>
+<script src="/src/scripts/updateArchive.js"></script>
+<script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
+</body>
 </html>
 """

distribusi/distribusi/page_template_event.py

@@ -0,0 +1,89 @@
+# -*- coding: utf-8 -*-
+
+# This template is used for generating each event pages
+# Please refer `event/0000/events_sample.html`
+
+html_head_event = """
+<!DOCTYPE html>
+<html>
+  <head>
+
+    <!-- EVENTS TEMPLATE -->
+
+    <title>환대의 조각들 Fragments of Hospitality</title>
+    <!-- Generated with distribusi https://git.vvvvvvaria.org/varia/distribusi -->
+    <meta name="generator" content="distribusi" />
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    %s
+    <link rel="stylesheet" type="text/css" href="/src/style/common.css" />
+    <link rel="stylesheet" type="text/css" href="/src/style/event.css" />
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script src="/src/scripts/mobileScroll.js"></script>
+    <script src="./main.js"></script>
+  </head>
+  <body>
+<div>
+  <div id="menu">
+    <div id="logo_wrapper" class="svg_wrapper">
+      <a href="/">
+      <img id="logo_foh"src="/src/img/logo.svg" alt="환대의 조각 로고">
+    </a>
+    </div>
+
+    <div id="timeline_icon_wrapper" class="svg_wrapper">
+      <a href="/events/list.html">
+      <img id="about_icon"src="/src/img/events_events-back.svg" alt="구름 모양 타임라인 버튼">
+      </a>
+    </div>
+
+    <span id="to_about">
+      <a href="/about.html">
+        ABOUT
+      </a>
+      </span>
+    <span id="to_fragments">
+      <a href="/participants.html">
+        FRAGMENTS
+      </a>
+      </span>
+    <span id="to_timeline">
+      <a href="/events/list.html">
+        TIMELINE
+      </a>
+      </span>
+  </div>
+
+  <div id="margin">
+    <!-- to avoid overlapping -->
+  </div>
+
+  <div id="wrapper_author">
+    <div id="fragment_wrapper">
+    </div>
+    <div id="event_description">
+      <div id="event_title">
+        <!-- this part will be load dynamically -->
+      </div>
+      <div id="event_date">
+        <!-- this part will be load dynamically -->
+      </div>
+      <div id="event_details">
+        <!-- this part will be load dynamically -->
+      </div>
+    </div>
+  </div>
+
+  <div id="contents">
+    <div id="frags">
+"""
+
+html_footer_event = """
+    </div>
+  </div>
+</div>
+  <script src="/src/scripts/updateEventDescription.js"></script>
+</body>
+</html>
+"""

distribusi/distribusi/page_template_events.py

@@ -0,0 +1,61 @@
+# -*- coding: utf-8 -*-
+
+# This template is used for generating the list of event
+# Each folders should be diplayed as `div` with className 'row_event'
+# Please refer `event/events_sample.html`
+
+html_head_events = """
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>환대의 조각들 Fragments of Hospitality</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="/src/style/common.css" />
+    <link rel="stylesheet" type="text/css" href="/src/style/event.css" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script src="/src/scripts/mobileScroll.js"></script>
+  </head>
+  <body>
+<div>
+  <div id="menu">
+    <div id="logo_wrapper" class="svg_wrapper">
+      <a href="/">
+      <img id="logo_foh"src="/src/img/logo.svg" alt="환대의 조각 로고">
+    </a>
+    </div>
+
+  <span id="to_about">
+    <a href="/about.html">
+      ABOUT
+    </a>
+    </span>
+  <span id="to_fragments">
+    <a href="/participants.html">
+      FRAGMENTS
+    </a>
+    </span>
+  <span id="to_timeline">
+    <a href="/events/list.html">
+      TIMELINE
+    </a>
+    </span>
+  </div>
+
+  <div id="margin">
+    <!-- to avoid overlapping -->
+  </div>
+
+  <div id="contents">
+    <div id="about_wrapper">
+"""
+
+html_footer_events = """
+    </div>
+  </div>
+
+
+</div>
+</body>
+</html>
+"""

distribusi/test.py

@@ -1,7 +1,15 @@
 # Added by Hyunchul
 # 2020. 10. 26
 from distribusi.cli import build_argparser, distribusify
+from distribusi import fragments
 
 parser = build_argparser()
 args = parser.parse_args()
-distribusify(args, args.directory)
+
+data_path = args.directory
+
+freg = fragments.Fragments()
+freg.preindex(data_path)
+freg.postindex()
+
+distribusify(args, data_path, freg)

init.sh

@@ -1,2 +1,6 @@
-pip install update
-pip install -r requirements.txt
+#(1) using pyenv/pip
+#pip install update
+#pip install -r requirements.txt
+
+#(2) using poetry (fancier)
+poetry install

poetry.lock

@@ -0,0 +1,82 @@
+[[package]]
+name = "markdown"
+version = "3.3.4"
+description = "Python implementation of Markdown."
+category = "main"
+optional = false
+python-versions = ">=3.6"
+
+[package.extras]
+testing = ["coverage", "pyyaml"]
+
+[[package]]
+name = "pillow"
+version = "8.3.1"
+description = "Python Imaging Library (Fork)"
+category = "main"
+optional = false
+python-versions = ">=3.6"
+
+[[package]]
+name = "python-magic"
+version = "0.4.24"
+description = "File type identification using libmagic"
+category = "main"
+optional = false
+python-versions = ">=2.7, !=3.0.*, !=3.1.*, !=3.2.*, !=3.3.*, !=3.4.*"
+
+[metadata]
+lock-version = "1.1"
+python-versions = "^3.8"
+content-hash = "e17d31e9ee7949d99baf929cdd55b9565284dbe08e81d3cb7691f58cb5a04c74"
+
+[metadata.files]
+markdown = [
+    {file = "Markdown-3.3.4-py3-none-any.whl", hash = "sha256:96c3ba1261de2f7547b46a00ea8463832c921d3f9d6aba3f255a6f71386db20c"},
+    {file = "Markdown-3.3.4.tar.gz", hash = "sha256:31b5b491868dcc87d6c24b7e3d19a0d730d59d3e46f4eea6430a321bed387a49"},
+]
+pillow = [
+    {file = "Pillow-8.3.1-1-cp36-cp36m-win_amd64.whl", hash = "sha256:fd7eef578f5b2200d066db1b50c4aa66410786201669fb76d5238b007918fb24"},
+    {file = "Pillow-8.3.1-1-cp37-cp37m-win_amd64.whl", hash = "sha256:75e09042a3b39e0ea61ce37e941221313d51a9c26b8e54e12b3ececccb71718a"},
+    {file = "Pillow-8.3.1-1-cp38-cp38-win_amd64.whl", hash = "sha256:c0e0550a404c69aab1e04ae89cca3e2a042b56ab043f7f729d984bf73ed2a093"},
+    {file = "Pillow-8.3.1-1-cp39-cp39-win_amd64.whl", hash = "sha256:479ab11cbd69612acefa8286481f65c5dece2002ffaa4f9db62682379ca3bb77"},
+    {file = "Pillow-8.3.1-1-pp37-pypy37_pp73-win_amd64.whl", hash = "sha256:f156d6ecfc747ee111c167f8faf5f4953761b5e66e91a4e6767e548d0f80129c"},
+    {file = "Pillow-8.3.1-cp36-cp36m-macosx_10_10_x86_64.whl", hash = "sha256:196560dba4da7a72c5e7085fccc5938ab4075fd37fe8b5468869724109812edd"},
+    {file = "Pillow-8.3.1-cp36-cp36m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:29c9569049d04aaacd690573a0398dbd8e0bf0255684fee512b413c2142ab723"},
+    {file = "Pillow-8.3.1-cp36-cp36m-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:c088a000dfdd88c184cc7271bfac8c5b82d9efa8637cd2b68183771e3cf56f04"},
+    {file = "Pillow-8.3.1-cp36-cp36m-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:fc214a6b75d2e0ea7745488da7da3c381f41790812988c7a92345978414fad37"},
+    {file = "Pillow-8.3.1-cp36-cp36m-win32.whl", hash = "sha256:a17ca41f45cf78c2216ebfab03add7cc350c305c38ff34ef4eef66b7d76c5229"},
+    {file = "Pillow-8.3.1-cp36-cp36m-win_amd64.whl", hash = "sha256:67b3666b544b953a2777cb3f5a922e991be73ab32635666ee72e05876b8a92de"},
+    {file = "Pillow-8.3.1-cp37-cp37m-macosx_10_10_x86_64.whl", hash = "sha256:ff04c373477723430dce2e9d024c708a047d44cf17166bf16e604b379bf0ca14"},
+    {file = "Pillow-8.3.1-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:9364c81b252d8348e9cc0cb63e856b8f7c1b340caba6ee7a7a65c968312f7dab"},
+    {file = "Pillow-8.3.1-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:a2f381932dca2cf775811a008aa3027671ace723b7a38838045b1aee8669fdcf"},
+    {file = "Pillow-8.3.1-cp37-cp37m-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:d0da39795049a9afcaadec532e7b669b5ebbb2a9134576ebcc15dd5bdae33cc0"},
+    {file = "Pillow-8.3.1-cp37-cp37m-win32.whl", hash = "sha256:2b6dfa068a8b6137da34a4936f5a816aba0ecc967af2feeb32c4393ddd671cba"},
+    {file = "Pillow-8.3.1-cp37-cp37m-win_amd64.whl", hash = "sha256:a4eef1ff2d62676deabf076f963eda4da34b51bc0517c70239fafed1d5b51500"},
+    {file = "Pillow-8.3.1-cp38-cp38-macosx_10_10_x86_64.whl", hash = "sha256:660a87085925c61a0dcc80efb967512ac34dbb256ff7dd2b9b4ee8dbdab58cf4"},
+    {file = "Pillow-8.3.1-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:15a2808e269a1cf2131930183dcc0419bc77bb73eb54285dde2706ac9939fa8e"},
+    {file = "Pillow-8.3.1-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:969cc558cca859cadf24f890fc009e1bce7d7d0386ba7c0478641a60199adf79"},
+    {file = "Pillow-8.3.1-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:2ee77c14a0299d0541d26f3d8500bb57e081233e3fa915fa35abd02c51fa7fae"},
+    {file = "Pillow-8.3.1-cp38-cp38-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:c11003197f908878164f0e6da15fce22373ac3fc320cda8c9d16e6bba105b844"},
+    {file = "Pillow-8.3.1-cp38-cp38-win32.whl", hash = "sha256:3f08bd8d785204149b5b33e3b5f0ebbfe2190ea58d1a051c578e29e39bfd2367"},
+    {file = "Pillow-8.3.1-cp38-cp38-win_amd64.whl", hash = "sha256:70af7d222df0ff81a2da601fab42decb009dc721545ed78549cb96e3a1c5f0c8"},
+    {file = "Pillow-8.3.1-cp39-cp39-macosx_10_10_x86_64.whl", hash = "sha256:37730f6e68bdc6a3f02d2079c34c532330d206429f3cee651aab6b66839a9f0e"},
+    {file = "Pillow-8.3.1-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:4bc3c7ef940eeb200ca65bd83005eb3aae8083d47e8fcbf5f0943baa50726856"},
+    {file = "Pillow-8.3.1-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:c35d09db702f4185ba22bb33ef1751ad49c266534339a5cebeb5159d364f6f82"},
+    {file = "Pillow-8.3.1-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:0b2efa07f69dc395d95bb9ef3299f4ca29bcb2157dc615bae0b42c3c20668ffc"},
+    {file = "Pillow-8.3.1-cp39-cp39-manylinux_2_5_x86_64.manylinux1_x86_64.whl", hash = "sha256:cc866706d56bd3a7dbf8bac8660c6f6462f2f2b8a49add2ba617bc0c54473d83"},
+    {file = "Pillow-8.3.1-cp39-cp39-win32.whl", hash = "sha256:9a211b663cf2314edbdb4cf897beeb5c9ee3810d1d53f0e423f06d6ebbf9cd5d"},
+    {file = "Pillow-8.3.1-cp39-cp39-win_amd64.whl", hash = "sha256:c2a5ff58751670292b406b9f06e07ed1446a4b13ffced6b6cab75b857485cbc8"},
+    {file = "Pillow-8.3.1-pp36-pypy36_pp73-macosx_10_10_x86_64.whl", hash = "sha256:c379425c2707078dfb6bfad2430728831d399dc95a7deeb92015eb4c92345eaf"},
+    {file = "Pillow-8.3.1-pp36-pypy36_pp73-manylinux_2_12_i686.manylinux2010_i686.whl", hash = "sha256:114f816e4f73f9ec06997b2fde81a92cbf0777c9e8f462005550eed6bae57e63"},
+    {file = "Pillow-8.3.1-pp36-pypy36_pp73-manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:8960a8a9f4598974e4c2aeb1bff9bdd5db03ee65fd1fce8adf3223721aa2a636"},
+    {file = "Pillow-8.3.1-pp37-pypy37_pp73-macosx_10_10_x86_64.whl", hash = "sha256:147bd9e71fb9dcf08357b4d530b5167941e222a6fd21f869c7911bac40b9994d"},
+    {file = "Pillow-8.3.1-pp37-pypy37_pp73-manylinux_2_12_i686.manylinux2010_i686.whl", hash = "sha256:1fd5066cd343b5db88c048d971994e56b296868766e461b82fa4e22498f34d77"},
+    {file = "Pillow-8.3.1-pp37-pypy37_pp73-manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:f4ebde71785f8bceb39dcd1e7f06bcc5d5c3cf48b9f69ab52636309387b097c8"},
+    {file = "Pillow-8.3.1-pp37-pypy37_pp73-win_amd64.whl", hash = "sha256:1c03e24be975e2afe70dfc5da6f187eea0b49a68bb2b69db0f30a61b7031cee4"},
+    {file = "Pillow-8.3.1.tar.gz", hash = "sha256:2cac53839bfc5cece8fdbe7f084d5e3ee61e1303cccc86511d351adcb9e2c792"},
+]
+python-magic = [
+    {file = "python-magic-0.4.24.tar.gz", hash = "sha256:de800df9fb50f8ec5974761054a708af6e4246b03b4bdaee993f948947b0ebcf"},
+    {file = "python_magic-0.4.24-py2.py3-none-any.whl", hash = "sha256:4fec8ee805fea30c07afccd1592c0f17977089895bdfaae5fec870a84e997626"},
+]

pyproject.toml

@@ -0,0 +1,17 @@
+[tool.poetry]
+name = "distribusi-foh"
+version = "0.1.0"
+description = ""
+authors = ["Your Name <you@example.com>"]
+
+[tool.poetry.dependencies]
+python = "^3.8"
+Pillow = "^8.3.1"
+python-magic = "^0.4.24"
+Markdown = "^3.3.4"
+
+[tool.poetry.dev-dependencies]
+
+[build-system]
+requires = ["poetry-core>=1.0.0"]
+build-backend = "poetry.core.masonry.api"

requirements.txt

@@ -1,4 +1,3 @@
 pillow
 python-magic
-python-magic-bin
 markdown

system/crontab/crontab.as_a_ref

@@ -0,0 +1,2 @@
+@reboot sleep 60 && nohup /home/nextcloud/distribusi-watcher.sh >> /home/nextcloud/distribusi-watcher-sh.log 2>&1
+

system/inotifywait-watcher/distribusi-watcher.sh

@@ -0,0 +1,30 @@
+#!/bin/bash
+
+#set minimal required path
+export PATH=$PATH:$HOME/.local/bin
+
+#load pyenv of 'nextcloud' user
+export PYENV_ROOT="/home/nextcloud/.pyenv"
+export PATH="$PYENV_ROOT/bin:$PATH"
+if command -v pyenv 1>/dev/null 2>&1; then
+  eval "$(pyenv init --path)"
+fi
+eval "$(pyenv virtualenv-init -)"
+
+#load env for the proj. 'distribusi-foh'
+pyenv shell distribusi-foh
+
+#change directory
+cd /home/nextcloud/distribusi-foh
+
+#start to watch.. (with thumbnailing)
+# python distribusi/test.py -t -d ./data/
+# while inotifywait -e modify,move,create,delete,close_write -r ./data/ ; do
+#   python distribusi/test.py -t -d ./data/
+# done
+
+#start to watch.. (without thumbnailing)
+python distribusi/test.py -d ./data/
+while inotifywait -e modify,move,create,delete,close_write -r ./data/ ; do
+  python distribusi/test.py -d ./data/
+done

test.sh

@@ -15,5 +15,5 @@
 #                         distribusi, use at own risk!
 #   --no-hidden           Exclude hidden directories
 #   --menu-with-index     Append index.html to menu items to aid navigation
-conda activate foh
-python distribusi/test.py -d ./test_data/
+
+python distribusi/test.py -t -d ./test_data/

test_data/.ignore

@@ -0,0 +1,16 @@
+.DS_Store
+about.html
+hello.txt
+home.html
+index.html
+index.json
+Readme.md
+src
+.+/src+.
+participants.html
+style.css
+404.html
+main.js
+.+.alt
+events
+thumbconf.json

test_data/404.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Page Not Found</title>
+
+    <style media="screen">
+      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
+      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
+      #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
+      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
+      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
+      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
+      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
+      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
+      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
+      @media (max-width: 600px) {
+        body, #message { margin-top: 0; background: white; box-shadow: none; }
+        body { border-top: 16px solid #ffa100; }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="message">
+      <h2>404</h2>
+      <h1>Page Not Found</h1>
+      <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
+      <h3>Why am I seeing this?</h3>
+      <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
+    </div>
+  </body>
+</html>

test_data/about.html

@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>환대의 조각들 Fragments of Hospitality</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="/src/style/common.css" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script src="/src/scripts/mobileScroll.js"></script>
+  </head>
+  <body>
+<div>
+  <div id="menu">
+    <div id="logo_wrapper" class="svg_wrapper">
+      <a href="/">
+      <img id="logo_foh"src="src/img/logo.svg" alt="환대의 조각 로고">
+    </a>
+    </div>
+
+    <div id="about_icon_wrapper" class="svg_wrapper">
+      <a href="/about.html">
+        <img id="about_icon"src="src/img/icon_about_g.svg" alt="각진 꽃 모양 어바웃 버튼">
+      </a>
+    </div>
+
+    <div id="timeline_icon_wrapper" class="svg_wrapper">
+      <a href="/events/list.html">
+      <img id="about_icon"src="src/img/icon_timeline.svg" alt="구름 모양 타임라인 버튼">
+      </a>
+    </div>
+
+  <span id="to_about">
+    <a href="/about.html">
+      ABOUT
+    </a>
+    </span>
+  <span id="to_fragments">
+    <a href="/participants.html">
+      FRAGMENTS
+    </a>
+    </span>
+  <span id="to_timeline">
+    <a href="/events/list.html">
+      TIMELINE
+    </a>
+    </span>
+  </div>
+
+  <div id="margin">
+    <!-- to avoid overlapping -->
+  </div>
+
+  <div id="contents" class="en">
+    <div id="about_wrapper">
+      <p class="col">
+        We are collecting some fragments. The mutually dependent differences exist like the snow crystals that drift without any past, future, or memory, while refusing to become identical, and revealing each one of them as they glitter. We try to imagine the art of the future based on these fragments.
+        <a id="wrapper_coc" href="http://never.gonetis.com:9002/p/0000fregments_of_hospitality" target="_blank">
+            <img id="icon_coc" src="src/img/icon_coc.svg" alt="꽃모양 선언문 버튼">
+            go to code of conduct
+          </a>
+      </p>
+      <p class="col">
+        <b>Co-creators</b></br>
+        109, blblblg, MC.mama, Eunjeong Gu, Grace-Kim, Hyunchul Kim, Dah Yee Noh, Nodl, *diana lab, Dolgoreh, mooming, Insook Bae, Korean_Peoples_Solidarity_Against_Poverty, Song Soo, Min Shin, Jae Shin, Sewon An, Seungwook Yang, Oro Minkyung, Wonjung, yuhee, doohoyi, yiyagi, Ichimura Misako, Jinho Jeong, Ueta Jiro, Hamamu, Megumi, Hong Seo Yeon</br>
+        </br>
+	*dianalab is a group that studies and carries out the expression to share and join in with the social minorities. It is a collective of diverse people, who do media art, sound art, textile, photography, film, etc. for their individual work, and have been working on the delicate work of creating an entirety of work from physical space to moments and invisible air.
+        </br></br>
+
+
+	Design: Dah Yee Noh</br>
+	Video & Streaming: Jiro Ueta, 이야기</br>
+	Web: Hyunchul Kim, Sewon An, doohoyi, Wonjung</br>
+	Promotion: Eunhye</br>
+	translation: Soonyoung Choi</br>
+
+      </p>
+      <p class="col">
+        <b>Story Behind the Design of Fragments of Hospitality</b></br>
+        In an academic paper on “snow crystals”, Dr. Ukichiro Nakaya presents years of his observation pertaining to how and in what forms the snow crystals are formed. Contrary to the common understanding that they only take a couple of forms, snow crystals actually assume numerous forms depending on climate, temperature, and region. The fact that white snow crystals that come to us on a dark winter night as if they are giving us hospitality, in fact, reveal such diverse types and shapes, seems to fit right into our “fragments of hospitality” project. Like Dr. Nakaya,  inspired by the work done by various artists and participants, we draw forms that have become abstract. Eventually, those fragments would diversify to have emotions, glitter like the snow crystals, or become mixed together and turn into water.
+       </br></br>
+       <b>Methods of connection</b></br>
+       Individuals collecting fragments each have their own folder. When they put a story, picture, audio, or video file inside a folder, each fragment is assigned a serial number, and gets accumulated in the fragments of hospitality website.The fragments connect us.
+  We hope that we can choose the “nature and attitude” of the medium that mediates our connection.
+        <img onclick="showKorean()" src="src/img/language_kor.svg" style="width:20px; vertical-align:text-top; cursor:pointer;">
+	</br></br>
+       *We borrowed the method of exchange and sharing from distribusi, a project that proposes the form of publication that documents and updates communal project.
+        <a href="https://test.roelof.info/nooo2-three-takes-on-taking-care.html" target="_blank">디스트리붓시</a>
+      </p>
+
+      <div id="wrapper_sns">
+        <a href="https://instagram.com/fragments_1444/" target="_blank">
+        <img id="icon_ig" src="src/img/instagram.svg" alt="인스타그램 버튼 instagram button"></a>
+        <a href="https://www.facebook.com/fragments1444/" target="_blank">
+        <img id="icon_fb" src="src/img/facebook.svg" alt="페이스북 버튼 facebook button"></a>
+      </div>
+    </div>
+  </div>
+
+  <div id="contents" class="ko">
+    <div id="about_wrapper">
+      <p class="col">
+        우리는 어떤 조각들을 모으고 있습니다. 과거도 미래도 기억도 없이, 흩날리는 눈 하나하나의 결정처럼, 서로 같아지려 하지 않고, 반짝이는 스스로를 드러내며, 상호의존하는 차이들. 이 조각들에 기반하여 미래의 예술을 상상하려고 합니다.
+        <a id="wrapper_coc" href="http://never.gonetis.com:9002/p/0000fregments_of_hospitality" target="_blank">
+            <img id="icon_coc" src="src/img/icon_coc.svg" alt="꽃모양 선언문 버튼">
+            약속문 열어보기
+          </a>
+      </p>
+      <p class="col">
+        <b>함께 만드는 사람들</b></br>
+        109, blblblg, MC.mama, 구은정, 그레이스, 김현철, 노다예, 노들장애인야학, *다이애나랩, 돌고래, 무밍, 배인숙, 빈곤사회연대(윤영, 성철, 재임), 송수연, 신민, 신재, 안세원, 양승욱, 오로민경, 원정, 유희, 이두호, 이야기, 이치무라 미사코, 정진호, 지로, 하마무, 호시노 메구미, 홍서연</br>
+        </br>
+	*다이애나랩은 사회적 소수자와 함께 하는 표현을 연구하고 실행하는 그룹이다. 미디어 아트, 사운드 아트, 텍스타일, 사진, 영상 등 개인 작업을 하는 다양한 사람들이 모여 만든 콜렉티브(collective)로 물리적인 공간부터 순간, 보이지 않는 공기까지 전체를 섬세하게 만드는 작업을 해오고 있다.
+        </br></br>
+
+        디자인: 노다예 </br>
+	영상/스트리밍:  온, 우에타 지로</br>
+	웹: 김현철, 안세원, 이두호, 신원정</br>
+	홍보: 은혜</br>
+	번역: 최순영</br>
+
+      </p>
+      <p class="col">
+        <b>환대의 조각들 디자인 이야기</b></br>
+        나카야 우키치로 박사의 ‘눈(snow crystals)’에 대한 학술 논문에는 눈의 결정이 어떠한 형태들로 어떻게 형성되고
+        그 형태들을 몇년에 걸쳐 관찰한 기록의 결과물이 실려있다. 흔히 한 두가지의 단편적인 형태로 이해하고 있던 눈의 결정은
+        사실 기후와 온도, 지역마다 수없이 다양한 형태를 띠고 있다. 어두운 겨울 밤에 항상 환하게 우리를 환대해주는
+        새하얀 눈송이들이 현미경으로 봤을 때 이렇게 다양한 유형과 형태를 가지고 있다는 사실이 ‘환대의 조각들’ 프로젝트와
+        꼭 들어맞는다. 다양한 눈의 결정을 관찰하며 그리던 나카야 우키치로 박사처럼 다양한 작가들과 작업에 영감을 받아
+        추상화된 조각들을 그린다. 그리고 그 조각들은 점점 다양해져 감정을 갖기도 하고, 눈의 결정처럼 빛나다가 뒤섞여 물로 변하기도 한다.
+       </br></br>
+       <b>연결의 방향</b></br>
+       환대의 조각들을 모으고 있는 개인은 자기만의 폴더를 가지고 있다. 각자의 이야기, 그림, 소리, 영상 파일을 하나씩 폴더에 넣으면, 각각의 조각은 일련의 번호를 부여받고, 환대의 조각들 페이지에 차곡히 쌓인다. 조각들이 우리를 연결한다.
+       우리의 연결을 매개하는 매체의 ‘성질과 태도'를 우리가 선택할 수 있으면 좋겠다.
+       <img onclick="showEnglish()" src="src/img/language_en.svg" style="width:20px; vertical-align:text-top; cursor:pointer;">
+
+	</br></br>
+       *공동 프로젝트를 문서화하고 업데이트하는 새로운 방식의 출판을 제안하는 프로젝트, 디스트리붓시의 공유 방식을 빌려왔다.
+        <a href="https://test.roelof.info/nooo2-three-takes-on-taking-care.html" target="_blank">디스트리붓시</a>
+      </p>
+      <div id="wrapper_sns">
+        <a href="https://instagram.com/fragments_1444/" target="_blank">
+        <img id="icon_ig" src="src/img/instagram.svg" alt="인스타그램 버튼 instagram button"></a>
+        <a href="https://www.facebook.com/fragments1444/" target="_blank">
+        <img id="icon_fb" src="src/img/facebook.svg" alt="페이스북 버튼 facebook button"></a>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    // reference https://blog.naver.com/jaelong191/221509952654
+    // console.log("cookie~!")
+
+    if (getCookie('lang') ==='en') {
+      showEnglish();
+    } else {
+      showKorean();
+    }
+
+
+    function setCookie(cookie_name, value, days) {
+      let exdate = new Date();
+      exdate.setDate(exdate.getDate() +  days);
+
+      var cookie_value = escape(value) + ((days == null)? '':'; expires=' + exdate.toUTCString());
+      document.cookie = cookie_name + '=' + cookie_value;
+    }
+
+    // function deleteCookie (cookie_name) {
+    //   let expireDate = new Date();
+    //   expireDate.setDate(expireDate.getDate() - 1);
+    //   document.cookie = cookie_name + "= " + "; expires=" + expireDate.toGMTString();
+    // }
+
+    function getCookie(cookie_name) {
+      let x, y;
+      let val = document.cookie.split(';');
+
+      for (let i = 0; i < val.length; i++) {
+        x = val[i].substring(0, val[i].indexOf('='));
+        y = val[i].substr(val[i].indexOf('=') + 1);
+        x = x.replace(/^\s+|\s+$/g, '');
+        if (x == cookie_name) {
+          return unescape(y);
+        }
+      }
+    }
+
+    function showEnglish(){
+      console.log("english")
+      document.querySelector(".ko").style.display = 'none';
+      document.querySelector(".en").style.display = '';
+      setCookie('lang', 'en', 100);
+    }
+
+    function showKorean(){
+      console.log("korean")
+      document.querySelector(".en").style.display = 'none';
+      document.querySelector(".ko").style.display = '';
+      setCookie('lang', 'ko', 100);
+    }
+
+  </script>
+
+</div>
+</body>
+</html>

test_data/about_en.html

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>환대의 조각들 Fragments of Hospitality</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="/src/style/common.css" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script src="/src/scripts/mobileScroll.js"></script>
+  <script type="text/javascript" src="/ynh_portal.js"></script><link type="text/css" rel="stylesheet" href="/ynh_overlay.css"></link><script type="text/javascript" src="/ynhtheme/custom_portal.js"></script><link type="text/css" rel="stylesheet" href="/ynhtheme/custom_overlay.css"></link><script type="text/javascript" src="/ynh_portal.js"></script><link type="text/css" rel="stylesheet" href="/ynh_overlay.css"></link><script type="text/javascript" src="/ynhtheme/custom_portal.js"></script><link type="text/css" rel="stylesheet" href="/ynhtheme/custom_overlay.css"></link></head>
+  <body>
+<div>
+  <div id="menu">
+    <div id="logo_wrapper" class="svg_wrapper">
+      <a href="/">
+      <img id="logo_foh"src="src/img/logo.svg" alt="환대의 조각 로고">
+    </a>
+    </div>
+
+    <div id="about_icon_wrapper" class="svg_wrapper">
+      <a href="/about.html">
+        <img id="about_icon"src="src/img/icon_about_g.svg" alt="각진 꽃 모양 어바웃 버튼">
+      </a>
+    </div>
+
+    <div id="timeline_icon_wrapper" class="svg_wrapper">
+      <a href="/events/list.html">
+      <img id="about_icon"src="src/img/icon_timeline.svg" alt="구름 모양 타임라인 버튼">
+      </a>
+    </div>
+
+  <span id="to_about">
+    <a href="/about.html">
+      ABOUT
+    </a>
+    </span>
+  <span id="to_fragments">
+    <a href="/participants.html">
+      FRAGMENTS
+    </a>
+    </span>
+  <span id="to_timeline">
+    <a href="/events/list.html">
+      TIMELINE
+    </a>
+    </span>
+  </div>
+
+  <div id="margin">
+    <!-- to avoid overlapping -->
+  </div>
+
+  <div id="contents">
+    <div id="about_wrapper">
+      <p class="col">
+        We are collecting some fragments. The mutually dependent differences exist like the snow crystals that drift without any past, future, or memory, while refusing to become identical, and revealing each one of them as they glitter. We try to imagine the art of the future based on these fragments.
+        <a id="wrapper_coc" href="http://never.gonetis.com:9002/p/0000fregments_of_hospitality" target="_blank">
+            <img id="icon_coc" src="src/img/icon_coc.svg" alt="꽃모양 선언문 버튼">
+            go to code of conduct
+          </a>
+      </p>
+      <p class="col">
+        <b>Co-creators</b></br>
+        109, blblblg, MC.mama, Eunjeong Gu, Grace-Kim, Hyunchul Kim, Dah Yee Noh, Nodl, *diana lab, Dolgoreh, mooming, Insook Bae, Korean_Peoples_Solidarity_Against_Poverty, Song Soo, Min Shin, Jae Shin, Sewon An, Seungwook Yang, Oro Minkyung, Wonjung, yuhee, doohoyi, yiyagi, Ichimura Misako, Jinho Jeong, Ueta Jiro, Hamamu, Megumi, Hong Seo Yeon</br>
+        </br>
+	*dianalab is a group that studies and carries out the expression to share and join in with the social minorities. It is a collective of diverse people, who do media art, sound art, textile, photography, film, etc. for their individual work, and have been working on the delicate work of creating an entirety of work from physical space to moments and invisible air.
+        </br></br>
+
+
+	Design: Dah Yee Noh</br>
+	Video & Streaming: Jiro Ueta, 이야기</br>
+	Web: Hyunchul Kim, Sewon An, doohoyi, Wonjung</br>
+	Promotion: Eunhye</br>
+	translation: Soonyoung Choi</br>
+
+      </p>
+      <p class="col">
+        <b>Story Behind the Design of Fragments of Hospitality</b></br>
+        In an academic paper on “snow crystals”, Dr. Ukichiro Nakaya presents years of his observation pertaining to how and in what forms the snow crystals are formed. Contrary to the common understanding that they only take a couple of forms, snow crystals actually assume numerous forms depending on climate, temperature, and region. The fact that white snow crystals that come to us on a dark winter night as if they are giving us hospitality, in fact, reveal such diverse types and shapes, seems to fit right into our “fragments of hospitality” project. Like Dr. Nakaya,  inspired by the work done by various artists and participants, we draw forms that have become abstract. Eventually, those fragments would diversify to have emotions, glitter like the snow crystals, or become mixed together and turn into water.
+       </br></br>
+       <b>Methods of connection</b></br>
+       Individuals collecting fragments each have their own folder. When they put a story, picture, audio, or video file inside a folder, each fragment is assigned a serial number, and gets accumulated in the fragments of hospitality website.The fragments connect us.
+	We hope that we can choose the “nature and attitude” of the medium that mediates our connection.
+	</br></br>
+       *We borrowed the method of exchange and sharing from distribusi, a project that proposes the form of publication that documents and updates communal project.
+        <a href="https://test.roelof.info/nooo2-three-takes-on-taking-care.html" target="_blank">디스트리붓시</a>
+      </p>
+
+      <div id="wrapper_sns">
+        <a href="https://instagram.com/fragments_1444/" target="_blank">
+        <img id="icon_ig" src="src/img/instagram.svg" alt="인스타그램 버튼 instagram button"></a>
+        <a href="https://www.facebook.com/fragments1444/" target="_blank">
+        <img id="icon_fb" src="src/img/facebook.svg" alt="페이스북 버튼 facebook button"></a>
+      </div>
+    </div>
+  </div>
+
+
+</div>
+</body>
+</html>

test_data/carrot/1030.txt

@@ -0,0 +1 @@
+ㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁA AaAAAAAㅁㅁㅁㅁㅁA AaAAAAAㅁㅁㅁㅁㅁA AaAAAAAㅁㅁㅁㅁㅁAA aAAAAAㅁㅁㅁㅁㅁAA aAAAAAㅁㅁㅁ ㅁㅁAAaAAAAAㅁㅁㅁㅁ ㅁAAaAAAAAㅁㅁㅁ ㅁㅁAAaAAAAA

test_data/carrot/index.html

@@ -0,0 +1,87 @@
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>환대의 조각들 Fragments of Hospitality</title>
+    <!-- Generated with distribusi https://git.vvvvvvaria.org/varia/distribusi -->
+    <meta name="generator" content="distribusi" />
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <link rel="stylesheet" type="text/css" href="/src/style/common.css" />
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script src="/src/scripts/mobileScroll.js"></script>
+    <script src="./main.js"></script>
+  </head>
+  <body>
+<div>
+  <div id="menu">
+    <div id="logo_wrapper" class="svg_wrapper">
+      <a href="/">
+      <img id="logo_foh"src="/src/img/logo.svg" alt="환대의 조각 로고">
+    </a>
+    </div>
+
+    <span id="to_about">
+      <a href="/about.html">
+        ABOUT
+      </a>
+      </span>
+    <span id="to_fragments">
+      <a href="/participants.html">
+        FRAGMENTS
+      </a>
+      </span>
+    <span id="to_timeline">
+      <a href="/events/list.html">
+        TIMELINE
+      </a>
+      </span>
+  </div>
+
+  <div id="margin">
+    <!-- to avoid overlapping -->
+  </div>
+
+  <div id="wrapper_author">
+    <div id="fragment_wrapper">
+    </div>
+    <div id="introduction">
+    </div>
+  </div>
+
+  <div id="archive_exit" style="display:none;"></div>
+  <div id="archive">
+    <button id="archive_button">ARCHIVE
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
+    </button>
+    <div id="archive_list">
+    </div>
+  </div>
+
+  <div id="contents">
+    <div id="frags">
+<div class="plain"><a class="anchor" id="0000"></a><div>ㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁAAaAAAAAㅁㅁㅁㅁㅁA AaAAAAAㅁㅁㅁㅁㅁA AaAAAAAㅁㅁㅁㅁㅁA AaAAAAAㅁㅁㅁㅁㅁAA aAAAAAㅁㅁㅁㅁㅁAA aAAAAAㅁㅁㅁ ㅁㅁAAaAAAAAㅁㅁㅁㅁ ㅁAAaAAAAAㅁㅁㅁ ㅁㅁAAaAAAAA</div><span class="filename">1030.txt</span><span class="fid">#0000</span></div>
+<div class="rtf unkown-file"><a class="anchor" id="0001"></a><a href='RTF테스트.rtf'>RTF테스트.rtf</a><span class="fid">#0001</span></div>
+<div class="plain"><a class="anchor" id="0002"></a><div><h3>test</h3>
+<p>test입니다.</p>
+<p><code>code ///</code></p>
+<p>이런 저런 이야기를 써볼 수 있겠죠</p></div><span class="filename">md쓰기.md</span><span class="fid">#0002</span></div>
+<div class="x-empty"><a class="anchor" id="0003"></a><a href='test002.txt'>test002.txt</a><span class="filename">test002.txt</span><span class="fid">#0003</span></div>
+<div class="plain"><a class="anchor" id="0004"></a><div>오늘은 11월입니다. 시간은 너무 빨라.
+띄어쓰기보다는 
+탭  탭  탭</div><span class="filename">txt쓰기.txt</span><span class="fid">#0004</span></div>
+<div class="quicktime"><a class="anchor" id="0005"></a><video controls><source src="꾸물꾸물.mov"></video><span class="filename">꾸물꾸물.mov</span><span class="fid">#0005</span></div>
+<div class="mp4"><a class="anchor" id="0006"></a><video controls><source src="질주.mp4"></video><span class="filename">질주.mp4</span><span class="fid">#0006</span></div>
+<a href="../">../</a>
+
+    </div>
+  </div>
+</div>
+<script src="/src/scripts/updateIntroduction.js"></script>
+<script src="/src/scripts/updateArchive.js"></script>
+<script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
+</body>
+</html>

test_data/events/0001/humming_score.jpeg.alt

@@ -0,0 +1 @@
+허밍을 악보로 그리듯이 적어보았다.

test_data/events/0001/text 3.txt

@@ -0,0 +1,5 @@
+콧- 노래
+	0.	입을 다문 채 코로 소리를 내어 부르는 노래
+	0.	코와 입 중간 인중 어딘가에서 나는 소리 혹은 울림
+	0.	스스로를 위로하기 위한 행동
+	0.	다른 사람에게 쉽게 전염시킬 수 있는 공명

test_data/events/0001/text 4.txt

@@ -0,0 +1 @@
+음성은 촉각적이다.

test_data/events/0001/text 6.txt

@@ -0,0 +1,17 @@
+1.
+나의 콧노래의 시작은 어디일까
+낮잠을 재우려는 엄마의 토닥임과 
+낮은 흥얼거림에서 시작되었을 수도 있고 
+맛이라는 것을 처음 알았을 때의 놀라움에서 
+시작되었을지도 모르겠다. 
+
+2.
+콧노래는 온도와 맞닿아 있는지도 모르겠다. 
+어떤 콧노래는 뜨겁고 어떤 콧노래는 스산하다. 
+
+3.
+잘 부르는 콧노래와 못 부르는 콧노래를 
+구분 지을 수 있을까? 
+우열이 없다는 게 안심이 된다. 
+애쓰지 않아도 된다는 게 위로가 된다.
+

test_data/events/0001/text 7.txt

@@ -0,0 +1,7 @@
+코와 입 사이 인중 어딘가
+혹은
+눈와 눈사이
+혹은 
+양쪽 콧볼과 팔자주름이 만나는 지점에서 
+시작되는 콧_노래
+

test_data/events/0001/text.txt

@@ -0,0 +1,7 @@
+콧노래를 수집하면
+사람의 체온, 그날의 날씨, 공기가 같이 수집된다. 
+누군가의 콧노래는 축축하고 
+누군가의 콧노래는 햇볕에 냄새가 나며
+누군가의 콧노래는 무겁게 내려앉은 새벽에 공기가 느껴진다. 
+
+

test_data/events/0002/2020.10.13/1013.txt

@@ -0,0 +1,5 @@
+하늘
+
+하루에 하늘을 몇번이나 볼까요?
+하늘은 누구에게나 열려있는 둘도 없는 공공재가 아닐까 합니다.
+60여일간 각각 다른 하늘을 찍고 짧은 단상을 적어보려고 합니다.

test_data/events/0002/2020.10.14/1014.txt

@@ -0,0 +1,5 @@
+지하철 플랫폼.
+발 디딜틈 없이 수 많은 인파.
+한명의 예외없이 모두 고개를 숙이고 각자의 세계에 몰입 중이다.
+스마트폰이라는 세계.
+각박한 현실에서 그나마 볼 수 있는 작은 꿈의 조각.

test_data/events/0002/2020.10.15/1015.txt

@@ -0,0 +1,4 @@
+특별히 자주 보게 되는 하늘이 있다.
+의도하지 않아도 늘 보게 되는 하늘.
+출근길 지하철 출구를 올라오며 마주하는 하늘.
+무심하게 스쳐 지나갔다.

test_data/events/data.json

@@ -0,0 +1,24 @@
+{
+    "0000":{
+        "date":"2021. 1. 31. 목요일",
+        "title": "눈사람 만들기 라이브",
+        "host": "두호",
+        "place": "설악산",
+        "details": "환대를 사유한다. 우리가 사유하고자 하는 것은 손님을 접대하기 위한 기술이 아니다. 시장을 넓히기 위한 전략이 아니며, 아군을 얻기 위한 정치도 아니다. 환대의 이러한 측면들은 자주, 혼란스럽게 또는 교묘하게 전면에 내세워졌다. 환대는 그보다 더 근본적이고 본질적인 어떤 것이다. 사람들은 환대에 의해 사람됨을 승인받으며 결속하고 교류한다. 환대의 몸짓은 타인에 대한 인정을 표현하며, 이러한 표현은 집단적으로 창조되고 전승되어 소통의 수단으로 기능한다. 이 강의에서 우리는 타인에 대한 윤리적 물음으로부터 시작하여 경계선 긋기와 배제의 메커니즘에 대한 이해로 나아갈 것이다. 그리고 적대, 혐오, 무관심이 창궐하는 이 시대에 우리에게 주어진 환대의 조건들을 살펴보고, 적대를 해소하고 배제를 배제하는 환대의 조각들을 모아볼 것이다.<br/>홍서연<br/>문명사와 문화인류학을 강의한다. 신체의 기술, 생활의 기술, 표현의 기술을 넘나드는 인간의 활동을 주제로, 그리고 나눔을 주제로 연구하고 있다. <br/>indooa@gmail.com<br/>*온라인 스트리밍으로 진행되며, 신청하신 분들께 접속 링크를 보내드립니다.<br/><br/>1강 사람됨의 조건 [11월 7일 오후 2시-4시30분]<br/>#공포감으로_다가오는_타인<br/>#침시아_신화<br/>#북아메리카_인디언_의례<br/>#인정과_성원권<br/>#자기_서사의_편집권과_정체성<br/>#마스크를_쓸_권리<br/>2강 유대와 배제의 메커니즘 [11월 21일 오후 2시-4시30분]<br/>#쳄바가_마링_족의_축제와_전쟁<br/>#나눔과_환대<br/>#신화_속의_이방인들<br/>#데리다와_레비나스의_문제제기<br/>#순수한_환대는_가능한가<br/>#낙인의_구조<br/>3강 전망과 탐색 [11월 28일 오후 2시-4시30분]<br/>#적대를_해소하는_기술<br/>#피의_보복과_표범가죽_추장<br/>#오염의_관념과_혐오<br/>#팬데믹_시대의_적대와_혐오<br/>#지구_반대편의_석양<br/>#비인간_존재의_자리<br/>#배제를_배제하기<br/>*[0000환대의조각들]은 한국문화예술위원회 공공예술사업 지원으로 열립니다."
+    },
+    "0001":{
+        "date":"2021. 1. 31. 목요일",
+        "title": "커피를 마셔봐요",
+        "host": "세원",
+        "place": "테라로사",
+        "details": "커피를 마시기 전에는 속을 든든히"
+    },
+    "0002":{
+        "date":"2021. 1. 31. 목요일",
+        "title": "복식 호흡 연습하기",
+        "host": "원정",
+        "place": "거실",
+        "details": "복식 호흡을 하면 무엇이 좋을까요?",
+        "signlang": "https://www.youtube.com/watch?v=mvl4PkUjdUM"
+    }
+}

test_data/events/event_sample.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>환대의 조각들 Fragments of Hospitality</title>
+    <!-- Generated with distribusi https://git.vvvvvvaria.org/varia/distribusi -->
+    <meta name="generator" content="distribusi" />
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" type="text/css" href="/src/style/common.css" />
+    <link rel="stylesheet" type="text/css" href="/src/style/event.css" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script src="/src/scripts/mobileScroll.js"></script>
+
+  </head>
+  <body>
+<div>
+
+
+
+  <div id="menu">
+    <div id="logo_wrapper" class="svg_wrapper">
+      <a href="/">
+      <img id="logo_foh"src="/src/img/logo.svg" alt="환대의 조각 로고">
+    </a>
+    </div>
+
+    <span id="to_about">
+      <a href="/about.html">
+        ABOUT
+      </a>
+      </span>
+    <span id="to_fragments">
+      <a href="/participants.html">
+        FRAGMENTS
+      </a>
+      </span>
+    <span id="to_timeline">
+      <a href="#">
+        TIMELINE
+      </a>
+      </span>
+  </div>
+
+  <div id="margin">
+    <!-- to avoid overlapping -->
+  </div>
+
+  <div id="wrapper_author">
+    <div id="fragment_wrapper">
+    </div>
+    <div id="event_description">
+      <div id="event_date">
+        <!-- this part will be load dynamically -->
+      </div>
+      <div id="event_title">
+        <!-- this part will be load dynamically -->
+      </div>
+      <div id="event_details">
+        <!-- this part will be load dynamically -->
+      </div>
+    </div>
+  </div>
+
+  <div id="contents">
+    <div id="frags">
+      <!-- the part generated by distribusi begins-->
+      <!-- the part generated by distribusi ends-->
+    </div>
+  </div>
+</div>
+
+
+
+  <script src="/src/scripts/updateEventDescription.js"></script>
+
+
+</body>
+</html>

test_data/events/list.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>환대의 조각들 Fragments of Hospitality</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="/src/style/common.css" />
+    <link rel="stylesheet" type="text/css" href="/src/style/event.css" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script src="/src/scripts/mobileScroll.js"></script>
+  </head>
+  <body>
+<div>
+  <div id="menu">
+    <div id="logo_wrapper" class="svg_wrapper">
+      <a href="/">
+      <img id="logo_foh"src="/src/img/logo.svg" alt="환대의 조각 로고">
+    </a>
+    </div>
+
+    <div id="timeline_icon_wrapper" class="svg_wrapper">
+      <a href="/events/list.html">
+      <img id="about_icon"src="/src/img/events_events.svg" alt="구름 모양 타임라인 버튼">
+      </a>
+  </div>
+
+  <span id="to_about">
+    <a href="/about.html">
+      ABOUT
+    </a>
+    </span>
+  <span id="to_fragments">
+    <a href="/participants.html">
+      FRAGMENTS
+    </a>
+    </span>
+  <span id="to_timeline">
+    <a href="#">
+      TIMELINE
+    </a>
+    </span>
+  </div>
+
+  <div id="margin">
+    <!-- to avoid overlapping -->
+  </div>
+
+  <div id="contents">
+    <div id="about_wrapper">
+    </div>
+  </div>
+
+
+</div>
+<script src="/src/scripts/updateEventList.js"></script>
+
+</body>
+</html>

test_data/fig/20201020/index.html

@@ -0,0 +1,74 @@
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <!-- Generated with distribusi https://git.vvvvvvaria.org/varia/distribusi -->
+    <meta name="generator" content="distribusi" />
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <link rel="stylesheet" type="text/css" href="/src/style/common.css" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script src="/src/scripts/mobileScroll.js"></script>
+
+  </head>
+  <body>
+<div>
+  <div id="menu">
+    <div id="logo_wrapper" class="svg_wrapper">
+      <a href="/index.html">
+      <img id="logo_foh"src="/src/img/logo.svg" alt="환대의 조각 로고">
+    </a>
+    </div>
+
+    <span id="to_about">
+      <a href="/about.html">
+        ABOUT
+      </a>
+      </span>
+    <span id="to_fragments">
+      <a href="/participants.html">
+        FRAGMENTS
+      </a>
+      </span>
+    <span id="to_timeline">
+      <a href="#">
+        TIMELINE
+      </a>
+      </span>
+  </div>
+
+  <div id="margin">
+    <!-- to avoid overlapping -->
+  </div>
+
+  <div id="wrapper_author">
+    <div id="fragment_wrapper">
+    </div>
+    <div id="introduction">
+    </div>
+  </div>
+
+  <div id="archive_exit" style="display:none;"></div>
+  <div id="archive">
+    <button id="archive_button">ARCHIVE
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
+    </button>
+    <div id="archive_list">
+    </div>
+  </div>
+
+  <div id="contents">
+    <div id="frags">
+<a href="../">../</a>
+
+    </div>
+  </div>
+</div>
+<script src="/src/scripts/updateIntroduction.js"></script>
+<script src="/src/scripts/updateArchive.js"></script>
+<script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
+</body>
+</html>

test_data/fig/20201020/일기.txt

@@ -1,2 +1,3 @@
 언론·출판에 대한 허가나 검열과 집회·결사에 대한 허가는 인정되지 아니한다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다.
 대통령은 내우·외환·천재·지변 또는 중대한 재정·경제상의 위기에 있어서 국가의 안전보장 또는 공공의 안녕질서를 유지하기 위하여 긴급한 조치가 필요하고 국회의 집회를 기다릴 여유가 없을 때에 한하여 최소한으로 필요한 재정·경제상의 처분을 하거나 이에 관하여 법률의 효력을 가지는 명령을 발할 수 있다.
+새로운 글 업데이트

test_data/fig/20201022/index.html

@@ -0,0 +1,74 @@
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <!-- Generated with distribusi https://git.vvvvvvaria.org/varia/distribusi -->
+    <meta name="generator" content="distribusi" />
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <link rel="stylesheet" type="text/css" href="/src/style/common.css" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script src="/src/scripts/mobileScroll.js"></script>
+
+  </head>
+  <body>
+<div>
+  <div id="menu">
+    <div id="logo_wrapper" class="svg_wrapper">
+      <a href="/index.html">
+      <img id="logo_foh"src="/src/img/logo.svg" alt="환대의 조각 로고">
+    </a>
+    </div>
+
+    <span id="to_about">
+      <a href="/about.html">
+        ABOUT
+      </a>
+      </span>
+    <span id="to_fragments">
+      <a href="/participants.html">
+        FRAGMENTS
+      </a>
+      </span>
+    <span id="to_timeline">
+      <a href="#">
+        TIMELINE
+      </a>
+      </span>
+  </div>
+
+  <div id="margin">
+    <!-- to avoid overlapping -->
+  </div>
+
+  <div id="wrapper_author">
+    <div id="fragment_wrapper">
+    </div>
+    <div id="introduction">
+    </div>
+  </div>
+
+  <div id="archive_exit" style="display:none;"></div>
+  <div id="archive">
+    <button id="archive_button">ARCHIVE
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
+    </button>
+    <div id="archive_list">
+    </div>
+  </div>
+
+  <div id="contents">
+    <div id="frags">
+<a href="../">../</a>
+
+    </div>
+  </div>
+</div>
+<script src="/src/scripts/updateIntroduction.js"></script>
+<script src="/src/scripts/updateArchive.js"></script>
+<script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
+</body>
+</html>

test_data/fig/20201029/index.html

@@ -0,0 +1,74 @@
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <!-- Generated with distribusi https://git.vvvvvvaria.org/varia/distribusi -->
+    <meta name="generator" content="distribusi" />
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <link rel="stylesheet" type="text/css" href="/src/style/common.css" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script src="/src/scripts/mobileScroll.js"></script>
+
+  </head>
+  <body>
+<div>
+  <div id="menu">
+    <div id="logo_wrapper" class="svg_wrapper">
+      <a href="/index.html">
+      <img id="logo_foh"src="/src/img/logo.svg" alt="환대의 조각 로고">
+    </a>
+    </div>
+
+    <span id="to_about">
+      <a href="/about.html">
+        ABOUT
+      </a>
+      </span>
+    <span id="to_fragments">
+      <a href="/participants.html">
+        FRAGMENTS
+      </a>
+      </span>
+    <span id="to_timeline">
+      <a href="#">
+        TIMELINE
+      </a>
+      </span>
+  </div>
+
+  <div id="margin">
+    <!-- to avoid overlapping -->
+  </div>
+
+  <div id="wrapper_author">
+    <div id="fragment_wrapper">
+    </div>
+    <div id="introduction">
+    </div>
+  </div>
+
+  <div id="archive_exit" style="display:none;"></div>
+  <div id="archive">
+    <button id="archive_button">ARCHIVE
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
+    </button>
+    <div id="archive_list">
+    </div>
+  </div>
+
+  <div id="contents">
+    <div id="frags">
+<a href="../">../</a>
+
+    </div>
+  </div>
+</div>
+<script src="/src/scripts/updateIntroduction.js"></script>
+<script src="/src/scripts/updateArchive.js"></script>
+<script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
+</body>
+</html>

test_data/fig/index.html

@@ -0,0 +1,96 @@
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>환대의 조각들 Fragments of Hospitality</title>
+    <!-- Generated with distribusi https://git.vvvvvvaria.org/varia/distribusi -->
+    <meta name="generator" content="distribusi" />
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <link rel="stylesheet" type="text/css" href="/src/style/common.css" />
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script src="/src/scripts/mobileScroll.js"></script>
+    <script src="./main.js"></script>
+  </head>
+  <body>
+<div>
+  <div id="menu">
+    <div id="logo_wrapper" class="svg_wrapper">
+      <a href="/">
+      <img id="logo_foh"src="/src/img/logo.svg" alt="환대의 조각 로고">
+    </a>
+    </div>
+
+    <span id="to_about">
+      <a href="/about.html">
+        ABOUT
+      </a>
+      </span>
+    <span id="to_fragments">
+      <a href="/participants.html">
+        FRAGMENTS
+      </a>
+      </span>
+    <span id="to_timeline">
+      <a href="/events/list.html">
+        TIMELINE
+      </a>
+      </span>
+  </div>
+
+  <div id="margin">
+    <!-- to avoid overlapping -->
+  </div>
+
+  <div id="wrapper_author">
+    <div id="fragment_wrapper">
+    </div>
+    <div id="introduction">
+    </div>
+  </div>
+
+  <div id="archive_exit" style="display:none;"></div>
+  <div id="archive">
+    <button id="archive_button">ARCHIVE
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
+    </button>
+    <div id="archive_list">
+    </div>
+  </div>
+
+  <div id="contents">
+    <div id="frags">
+<div class="vnd.ms-fontobject"><a class="anchor" id="0007"></a><a href='SLEIGothicTTF.eot'>SLEIGothicTTF.eot</a><span class="filename">SLEIGothicTTF.eot</span><span class="fid">#0007</span></div>
+<div class="octet-stream"><a class="anchor" id="0008"></a><a href='SLEIGothicTTF.woff'>SLEIGothicTTF.woff</a><span class="filename">SLEIGothicTTF.woff</span><span class="fid">#0008</span></div>
+<div class="x-empty"><a class="anchor" id="0009"></a><a href='fig002.txt'>fig002.txt</a><span class="filename">fig002.txt</span><span class="fid">#0009</span></div>
+<div class="x-empty"><a class="anchor" id="0010"></a><a href='test.txt'>test.txt</a><span class="filename">test.txt</span><span class="fid">#0010</span></div>
+<div class="x-empty"><a class="anchor" id="0011"></a><a href='test001.txt'>test001.txt</a><span class="filename">test001.txt</span><span class="fid">#0011</span></div>
+<a href="../">../</a>
+<div class="folder"><a class="anchor" id="0018"></a>
+<div class="plain"><div>언론·출판에 대한 허가나 검열과 집회·결사에 대한 허가는 인정되지 아니한다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다.
+대통령은 내우·외환·천재·지변 또는 중대한 재정·경제상의 위기에 있어서 국가의 안전보장 또는 공공의 안녕질서를 유지하기 위하여 긴급한 조치가 필요하고 국회의 집회를 기다릴 여유가 없을 때에 한하여 최소한으로 필요한 재정·경제상의 처분을 하거나 이에 관하여 법률의 효력을 가지는 명령을 발할 수 있다.
+새로운 글 업데이트</div><span class="filename">일기.txt</span></div>
+<div class="png"><figure><a href='./20201020/파도가_치네요.png'><img src='./20201020/파도가_치네요.png'></a><figcaption>./20201020/파도가_치네요.png</figcaption></figure></div>
+<span class="fid">#0018</span></div>
+<div class="folder"><a class="anchor" id="0019"></a>
+<div class="png"><figure><a href='./20201022/아름다운별.png'><img src='./20201022/아름다운별.png'></a><figcaption>./20201022/아름다운별.png</figcaption></figure></div>
+<div class="plain"><div>착목한는 생의 꽃 많이 운다. 천자만홍이 넣는 수 아니다. 위하여서, 기쁘며, 얼음 할지니, 칼이다. 자신과 바로 장식하는 청춘의 것이다. 청춘의 방지하는 이상이 심장은 공자는 거친 미묘한 있는가? 심장은 같지 옷을 피는 끓는 시들어 날카로우나 뿐이다. 얼음이 찬미를 그러므로 칼이다. 찬미를 옷을 이상을 것이다. 가치를 같은 그들은 속에서 위하여 인간의 생명을 거친 것이다.
+설레는 얼음 이것을 그들의 속에 많이 눈에 트고, 설산에서 끓는다. 얼마나 보이는 것은 때문이다. 무엇이 창공에 가치를 커다란 오아이스도 뭇 황금시대다. 유소년에게서 못할 가진 안고, 무엇이 수 용감하고 이상의 있는가? 일월과 있는 청춘이 것이다. 싶이 있는 유소년에게서 못하다 위하여 물방아 것이다. 피고 능히 우리의 사람은 아니다. 오직 커다란 밥을 갑 안고, 그것은 못하다 청춘은 아니더면, 것이다. 무엇을 그들은 없으면, 이것이다. 살 위하여 그들의 청춘에서만 풍부하게 말이다.
+크고 돋고, 꽃이 위하여 이상의 봄바람이다. 미인을 속에 싶이 기관과 피는 아름다우냐? 인류의 용기가 구하지 현저하게 것이 가는 가치를 그리하였는가? 같은 곧 속잎나고, 이것은 피는 얼마나 눈에 꽃이 이상의 약동하다. 미묘한 열락의 새 노년에게서 소리다.이것은 그러므로 그림자는 뜨거운지라, 하는 봄바람이다. 대한 수 인간의 노래하며 이 맺어, 청춘 운다. 밥을 우리의 그들의 것은 쓸쓸하랴? 인도하겠다는 풀밭에 무엇을 우리의 수 되는 풍부하게 것이다. 가치를 풀이 밥을 듣는다. 오아이스도 관현악이며, 이성은 타오르고 무엇을 청춘이 속에서 되는 봄바람이다. 위하여, 끝까지 소담스러운 청춘 할지니, 돋고, 약동하다.</div><span class="filename">일기.txt</span></div>
+<span class="fid">#0019</span></div>
+<div class="folder"><a class="anchor" id="0020"></a>
+<div class="plain"><div>속의 이름과, 않은 애기 프랑시스 보고, 어머니, 듯합니다. 어머니, 아무 별들을 노루, 이런 그리고 있습니다. 위에 라이너 시와 너무나 별을 가슴속에 덮어 아침이 언덕 듯합니다. 아직 경, 파란 별 때 잠, 하나에 아름다운 슬퍼하는 봅니다. 까닭이요, 풀이 하나에 위에 옥 별빛이 아스라히 있습니다. 청춘이 내일 풀이 남은 오는 없이 지나고 둘 못 까닭입니다. 같이 슬퍼하는 어머니, 별이 있습니다. 하나에 별 헤는 보고, 가슴속에 너무나 이네들은 나의 애기 까닭입니다. 멀듯이, 했던 아침이 까닭입니다.</div><span class="filename">그냥.txt</span></div>
+<div class="png"><figure><a href='./20201029/상자를 열어요.png'><img src='./20201029/상자를 열어요.png'></a><figcaption>./20201029/상자를 열어요.png</figcaption></figure></div>
+<span class="fid">#0020</span></div>
+
+    </div>
+  </div>
+</div>
+<script src="/src/scripts/updateIntroduction.js"></script>
+<script src="/src/scripts/updateArchive.js"></script>
+<script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
+</body>
+</html>

test_data/fig/style.css

@@ -0,0 +1,18 @@
+@font-face {
+    font-family: 'SLEI Gothic TTF';
+    src: url('SLEIGothicTTF.eot');
+    src: url('SLEIGothicTTF.eot?#iefix') format('embedded-opentype'),
+        url('SLEIGothicTTF.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+
+.fid { 
+	font-size: 24pt;
+	font-family: 'SLEI Gothic TTF'; 
+	font-weight: normal; 
+	font-style: normal;
+	margin-top: 10px;
+}

test_data/fragment.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>환대의 조각들 Fragments of Hospitality</title>
+    <!-- Generated with distribusi https://git.vvvvvvaria.org/varia/distribusi -->
+    <meta name="generator" content="distribusi" />
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" type="text/css" href="/src/style/common.css" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script src="/src/scripts/mobileScroll.js"></script>
+
+  </head>
+  <body>
+<div>
+
+
+
+  <div id="menu">
+    <div id="logo_wrapper" class="svg_wrapper">
+      <a href="/">
+      <img id="logo_foh"src="/img/logo.svg" alt="환대의 조각 로고">
+    </a>
+    </div>
+
+    <div id="timeline_icon_wrapper" class="svg_wrapper">
+      <a href="/events/list.html">
+      <img id="about_icon"src="src/img/icon_timeline.svg" alt="구름 모양 타임라인 버튼">
+      </a>
+    </div>
+
+    <span id="to_about">
+      <a href="/about.html">
+        ABOUT
+      </a>
+      </span>
+    <span id="to_fragments">
+      <a href="/participants.html">
+        FRAGMENTS
+      </a>
+      </span>
+    <span id="to_timeline">
+      <a href="/events/list.html">
+        TIMELINE
+      </a>
+      </span>
+  </div>
+
+  <div id="margin">
+    <!-- to avoid overlapping -->
+  </div>
+
+  <div id="wrapper_author">
+    <div id="fragment_wrapper">
+    </div>
+    <div id="introduction">
+    </div>
+  </div>
+
+  <div id="archive_exit" style="display:none;"></div>
+  <div id="archive">
+    <button id="archive_button">ARCHIVE
+      <!-- <img id="icon_archive_more" src="src/img/icon_timeline.svg" alt=""> -->
+    </button>
+    <div id="archive_list">
+      <a href="#">조각#1234</a>
+    </div>
+  </div>
+
+  <div id="contents">
+    <div id="frags">
+      <!-- the part generated by distribusi begins-->
+      <!-- the part generated by distribusi ends-->
+    </div>
+  </div>
+</div>
+<script src="/src/scripts/updateIntroduction.js"></script>
+<script src="/src/scripts/updateArchive.js"></script>
+<script src="/src/scripts/hashEvent.js"></script>
+<script src="/src/scripts/mobileArchiveEvent.js"></script>
+
+
+  </script>
+
+
+</body>
+</html>

test_data/index.json

@@ -0,0 +1,209 @@
+[
+    {
+        "__Fragment__": {
+            "index": 0,
+            "update": 1630842955.5488675,
+            "directory": "./test_data/carrot",
+            "artist": "carrot",
+            "file": "1030.txt"
+        }
+    },
+    {
+        "__Fragment__": {
+            "index": 1,
+            "update": 1630842955.549031,
+            "directory": "./test_data/carrot",
+            "artist": "carrot",
+            "file": "RTF\u1110\u1166\u1109\u1173\u1110\u1173.rtf"
+        }
+    },
+    {
+        "__Fragment__": {
+            "index": 2,
+            "update": 1630842955.5493538,
+            "directory": "./test_data/carrot",
+            "artist": "carrot",
+            "file": "md\u110a\u1173\u1100\u1175.md"
+        }
+    },
+    {
+        "__Fragment__": {
+            "index": 3,
+            "update": 1630842955.5494354,
+            "directory": "./test_data/carrot",
+            "artist": "carrot",
+            "file": "test002.txt"
+        }
+    },
+    {
+        "__Fragment__": {
+            "index": 4,
+            "update": 1630842955.5495822,
+            "directory": "./test_data/carrot",
+            "artist": "carrot",
+            "file": "txt\u110a\u1173\u1100\u1175.txt"
+        }
+    },
+    {
+        "__Fragment__": {
+            "index": 5,
+            "update": 1630842955.5624416,
+            "directory": "./test_data/carrot",
+            "artist": "carrot",
+            "file": "\u1101\u116e\u1106\u116e\u11af\u1101\u116e\u1106\u116e\u11af.mov"
+        }
+    },
+    {
+        "__Fragment__": {
+            "index": 6,
+            "update": 1630842955.5765293,
+            "directory": "./test_data/carrot",
+            "artist": "carrot",
+            "file": "\u110c\u1175\u11af\u110c\u116e.mp4"
+        }
+    },
+    {
+        "__Fragment__": {
+            "index": 7,
+            "update": 1630842955.6996605,
+            "directory": "./test_data/fig",
+            "artist": "fig",
+            "file": "SLEIGothicTTF.eot"
+        }
+    },
+    {
+        "__Fragment__": {
+            "index": 8,
+            "update": 1630842955.701553,
+            "directory": "./test_data/fig",
+            "artist": "fig",
+            "file": "SLEIGothicTTF.woff"
+        }
+    },
+    {
+        "__Fragment__": {
+            "index": 9,
+            "update": 1630842955.7020693,
+            "directory": "./test_data/fig",
+            "artist": "fig",
+            "file": "fig002.txt"
+        }
+    },
+    {
+        "__Fragment__": {
+            "index": 10,
+            "update": 1630842955.7029076,
+            "directory": "./test_data/fig",
+            "artist": "fig",
+            "file": "test.txt"
+        }
+    },
+    {
+        "__Fragment__": {
+            "index": 11,
+            "update": 1630842955.703022,
+            "directory": "./test_data/fig",
+            "artist": "fig",
+            "file": "test001.txt"
+        }
+    },
+    {
+        "__Fragment__": {
+            "index": 12,
+            "update": 1630842955.784991,
+            "directory": "./test_data/grape",
+            "artist": "grape",
+            "file": "IMG_1334.png"
+        }
+    },
+    {
+        "__Fragment__": {
+            "index": 13,
+            "update": 1630842955.7952254,
+            "directory": "./test_data/grape",
+            "artist": "grape",
+            "file": "IMG_1340.jpg"
+        }
+    },
+    {
+        "__Fragment__": {
+            "index": 14,
+            "update": 1630842955.8633168,
+            "directory": "./test_data/grape",
+            "artist": "grape",
+            "file": "IMG_1690.png"
+        }
+    },
+    {
+        "__Fragment__": {
+            "index": 15,
+            "update": 1630842955.9269447,
+            "directory": "./test_data/grape",
+            "artist": "grape",
+            "file": "IMG_1693.png"
+        }
+    },
+    {
+        "__Fragment__": {
+            "index": 16,
+            "update": 1630842955.9333959,
+            "directory": "./test_data/grape",
+            "artist": "grape",
+            "file": "fbdbdbf54d766dd86e5964de01ddc16b.jpg"
+        }
+    },
+    {
+        "__Fragment__": {
+            "index": 17,
+            "update": 1630842955.933797,
+            "directory": "./test_data/grape",
+            "artist": "grape",
+            "file": "sample.pdf"
+        }
+    },
+    {
+        "__Fragment__": {
+            "index": 18,
+            "update": 1630842957.7187104,
+            "directory": "./test_data/fig",
+            "artist": "fig",
+            "file": "20201020"
+        }
+    },
+    {
+        "__Fragment__": {
+            "index": 19,
+            "update": 1630842957.7617738,
+            "directory": "./test_data/fig",
+            "artist": "fig",
+            "file": "20201022"
+        }
+    },
+    {
+        "__Fragment__": {
+            "index": 20,
+            "update": 1630842957.9107025,
+            "directory": "./test_data/fig",
+            "artist": "fig",
+            "file": "20201029"
+        }
+    },
+    {
+        "__Fragment__": {
+            "index": 21,
+            "update": 1635599943.8518016,
+            "directory": "./test_data/",
+            "artist": "",
+            "file": "about_en.html"
+        }
+    },
+    {
+        "__Fragment__": {
+            "index": 22,
+            "update": 1635599957.0509331,
+            "directory": "./test_data/",
+            "artist": "",
+            "file": "fragment.html"
+        }
+    }
+]

test_data/src/img/author__0set.svg

@@ -0,0 +1,22 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 91 94">
+    <defs>
+        <style>
+            .cls-1 {
+                fill: #8f8f8f;
+            }
+
+            .cls-2 {
+                font-size: 16.47px;
+                fill: #231f20;
+                font-family: ArialMT, Arial;
+            }
+
+            .shape{fill:none;}
+        </style>
+    </defs>
+    <g id="_0set" data-name="0set">
+        <path class="shape" d="M21 2 90 0 91 91 17 94 0 60 21 2" />
+        <path
+            d="M22.94,84.06c-.8,0-1.68,0-2.69-.1a4.34,4.34,0,0,1-3.68-2.61l-.33-.69A20.44,20.44,0,0,1,15,77.57c-.93-3.12-1.67-5.88-2.25-8.42-.34-1.48-.56-3-.78-4.42-.1-.65-.19-1.3-.3-2a2.71,2.71,0,0,0-.09-.41,11.5,11.5,0,0,1-.26-5.77,60.13,60.13,0,0,0,.92-8.24A41.69,41.69,0,0,1,13.38,41c.44-1.78.84-3.62,1.22-5.39.3-1.34.59-2.68.9-4,.49-2.11,1-4.16,1.58-6.18a31.54,31.54,0,0,1,1.64-4.27,30.58,30.58,0,0,0,1.8-4.84,15.3,15.3,0,0,1,2.21-5,11.69,11.69,0,0,1,.76-1,4.53,4.53,0,0,1,3.67-1.63c1.7,0,3.4,0,5.1,0h4.12L38,8.65c2.08-.11,4.24-.22,6.37-.27l1.07,0c2.7-.07,5.5-.14,8.27.05,3.1.21,6.42.39,9.74.32,2.22-.05,4.5-.15,6.69-.25l2.61-.11.82,0c1,0,1.94-.08,2.89-.16a19.74,19.74,0,0,0,2.42-.37,3.79,3.79,0,0,1,4.23,1.74A5.46,5.46,0,0,1,84,12.42a4.45,4.45,0,0,0,0,.5,46.06,46.06,0,0,1,.34,6.67v.27c0,2,0,4-.08,5.95,0,1.31-.07,2.62-.11,3.92l0,1.73c-.06,2.17.08,4.31.22,6.58,0,.6.08,1.2.11,1.8.21,3.58.44,7.64.36,11.64a49,49,0,0,0,.54,7.14,37,37,0,0,1,.35,4.2c.07,4.37.07,7.71,0,10.85a22.21,22.21,0,0,1-.54,4.14A6.47,6.47,0,0,1,81,82.32a8.72,8.72,0,0,1-4.21.69c-.42,0-.88,0-1.37,0s-.86,0-1.3,0c-.68,0-1.36-.1-2-.16L71,82.69c-.38,0-.78-.06-1.15-.06H66.69c-3,0-6.06,0-9.08,0-1.25,0-2.5.12-3.81.23L51.92,83c-.63,0-1.26.08-1.89.11l-.67,0-8.83.4c-.66,0-1.33,0-2,0H36.23c-2,0-4.17,0-6.27,0a29.41,29.41,0,0,0-3.31.23c-.61.06-1.22.13-1.83.17S23.61,84.06,22.94,84.06ZM27.1,12.15a1.15,1.15,0,0,0-1,.43,8.37,8.37,0,0,0-.54.66,12.26,12.26,0,0,0-1.72,3.93,33.05,33.05,0,0,1-2,5.41,29.48,29.48,0,0,0-1.47,3.82c-.57,1.93-1.05,3.93-1.53,6-.3,1.33-.59,2.65-.88,4-.4,1.79-.8,3.64-1.25,5.46a40,40,0,0,0-1.1,6.76,63.87,63.87,0,0,1-1,8.71,8.05,8.05,0,0,0,.18,4.08,5.16,5.16,0,0,1,.19.85c.11.66.21,1.33.31,2,.22,1.45.42,2.81.73,4.16.57,2.47,1.29,5.16,2.2,8.21a18.46,18.46,0,0,0,1.09,2.59c.12.23.23.47.34.71.29.61.66.64.81.65a28.2,28.2,0,0,0,4.09,0c.57,0,1.15-.1,1.72-.16A31.82,31.82,0,0,1,30,80.16c2.06,0,4.17,0,6.21,0h2.31c.62,0,1.24,0,1.86,0l8.81-.4.67,0,1.82-.1,1.83-.14c1.31-.11,2.67-.22,4-.24,3.05,0,6.15,0,9.14,0h3.14a12.74,12.74,0,0,1,1.42.07l1.17.1c.64.06,1.27.12,1.91.16.36,0,.73,0,1.09,0a16.87,16.87,0,0,1,1.72,0,5.13,5.13,0,0,0,2.55-.44c1.68-.7,2-1.42,2.16-2a20.12,20.12,0,0,0,.47-3.51c.05-3.1.05-6.41,0-10.74A36.65,36.65,0,0,0,82,59.05a52,52,0,0,1-.57-7.63c.07-3.87-.15-7.86-.35-11.38,0-.6-.08-1.19-.11-1.79-.15-2.24-.3-4.56-.23-6.89l0-1.73c0-1.3.08-2.59.11-3.89,0-2,.06-3.94.08-5.91v-.27a43.64,43.64,0,0,0-.32-6.19l-.06-.64a2.4,2.4,0,0,0-.27-1.17,2.15,2.15,0,0,0-.39-.44h0a2.09,2.09,0,0,0-.36.05,23.89,23.89,0,0,1-2.82.42c-1,.09-2,.13-3,.16l-.81,0-2.59.11c-2.22.1-4.51.2-6.78.25-3.45.07-6.86-.12-10-.33-2.62-.18-5.33-.11-8,0l-1.08,0c-2.08,0-4.21.16-6.27.26l-2.78.14-1.7.08v-.13h-1.4c-1.71,0-3.42,0-5.13,0Z" />
+        <text class="cls-2" transform="translate(33.52 51.36)">0set</text></g>
+</svg>

test_data/src/img/author__109.svg

@@ -0,0 +1,21 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90">
+    <defs>
+        <style>
+            .cls-1 {
+                fill: #777;
+            }
+
+            .cls-2 {
+                font-size: 16.39px;
+                fill: #231f20;
+                font-family: ArialMT, Arial;
+            }
+            .shape{fill:none;}
+        </style>
+    </defs>
+    <g id="_109" data-name="109">
+        <path class="shape" d="M0 69 23 10 38 0 60 7 90 57 87 76 62 90 6 85 0 69" />
+        <path
+            d="M45.87,84.69c-2.22-.06-4.44-.07-6.66-.2-1.28-.07-2.56-.3-3.83-.49-1.66-.24-3.31-.59-5-.76a57.63,57.63,0,0,1-6.54-1.12,35.58,35.58,0,0,1-5.06-1.54,25,25,0,0,0-3.06-.91,9.78,9.78,0,0,1-3.3-1.42,10.57,10.57,0,0,0-1.4-.77A12.21,12.21,0,0,1,7,74.16a5.44,5.44,0,0,1-1.41-4c.19-2.13,0-4.28.48-6.37a14.2,14.2,0,0,1,.53-1.86A62.76,62.76,0,0,0,8.6,55.23c.24-.86.51-1.72.8-2.57a44.58,44.58,0,0,0,1.72-6.41,29,29,0,0,1,2.42-7.07A77.59,77.59,0,0,1,18,30.59c1.05-1.73,2-3.5,3-5.29a46.84,46.84,0,0,1,5.3-7.58c2.2-2.73,4.36-5.5,6.55-8.24a15.06,15.06,0,0,1,1.44-1.65A2.2,2.2,0,0,1,37,7.46a2.57,2.57,0,0,0,1.47.12,17.7,17.7,0,0,1,6,.26,7.3,7.3,0,0,1,1.94.78,22.79,22.79,0,0,0,2.91,1.49,14.32,14.32,0,0,1,2.2,1.22,27.32,27.32,0,0,1,6.33,5.76,21.14,21.14,0,0,0,2.62,2.73A17.73,17.73,0,0,1,65,25.6c.37.79.85,1.52,1.23,2.3,1,2.11,2.11,4.21,3.09,6.36A20.84,20.84,0,0,0,72,38.76a89.11,89.11,0,0,1,6.44,8.75c1,1.51,2.11,2.9,3.2,4.33a6.05,6.05,0,0,1,1.23,2.73,23.79,23.79,0,0,0,1.24,4.28,18.5,18.5,0,0,1,1.19,6.33,44.53,44.53,0,0,1-.24,4.62,5.46,5.46,0,0,1-3,4.48c-2.16,1.13-4.31,2.31-6.53,3.31-2.58,1.16-5.24,2.12-7.86,3.21A13.07,13.07,0,0,0,65.29,82a10.86,10.86,0,0,1-6.49,2,24.58,24.58,0,0,0-3.93.4,24.92,24.92,0,0,1-2.85.25c-2.05,0-4.1,0-6.15,0ZM35.56,12.08c-2.47,3.13-4.9,6.23-7.36,9.29A38.49,38.49,0,0,0,24,27.74c-.79,1.52-1.63,3-2.52,4.48a75,75,0,0,0-4.4,8.43,27.21,27.21,0,0,0-2.22,6.43,44.13,44.13,0,0,1-1.75,6.59c-.33,1-.63,2-.91,3-.61,2.22-1.24,4.43-2,6.6a12.44,12.44,0,0,0-.61,3c-.14,1.26-.11,2.53-.18,3.79A2.35,2.35,0,0,0,10,71.84a9.18,9.18,0,0,0,2.88,2.29c.61.28,1.16.68,1.76,1a15.45,15.45,0,0,0,1.92.83c1.17.38,2.39.61,3.54,1a33.48,33.48,0,0,0,4.82,1.46,45.89,45.89,0,0,0,6.72,1.08,21.79,21.79,0,0,1,3.32.49,33.43,33.43,0,0,0,7.52.8c3.32,0,6.63,0,9.95,0a10.23,10.23,0,0,0,1.34-.11,29.1,29.1,0,0,1,5.18-.55,6.52,6.52,0,0,0,4.18-1.28,14.22,14.22,0,0,1,3.36-1.72c2.55-1,5.13-2,7.64-3.1,2-.92,4-2,6-3a2,2,0,0,0,1.21-1.7c.09-1.31.24-2.63.23-3.94a14.87,14.87,0,0,0-.94-5.11,35.23,35.23,0,0,1-1.43-4.83,3.7,3.7,0,0,0-.6-1.36c-1.08-1.51-2.3-2.93-3.29-4.49a83.66,83.66,0,0,0-6.13-8.35,23.93,23.93,0,0,1-3.38-5.5c-.9-2-1.89-3.94-2.86-5.9-.44-.88-1-1.72-1.39-2.6a13.41,13.41,0,0,0-3.46-4.51A29,29,0,0,1,54.53,19,22,22,0,0,0,52,16.43a16.37,16.37,0,0,0-5.39-3.38,6,6,0,0,1-1.47-.8,4.67,4.67,0,0,0-2.67-.91c-1.4,0-2.8,0-4.2.05a.82.82,0,0,0-.53.19A2.08,2.08,0,0,1,35.56,12.08Z" />
+        <text class="cls-2" transform="translate(30.59 51.97)">109</text></g>
+</svg>

test_data/src/img/author_blblbg.svg

@@ -0,0 +1,21 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 185 111">
+    <defs>
+        <style>
+            .cls-1 {
+                fill: #868686;
+            }
+
+            .cls-2 {
+                font-size: 16.47px;
+                fill: #231f20;
+                font-family: ArialMT, Arial;
+            }
+            .shape{fill:none;}
+        </style>
+    </defs>
+    <g id="blblbg">
+        <path class="shape" d="M80 0 178 15 185 58 178 105 139 111 40 106 0 86 14 20 80 0" />
+        <path
+            d="M137.76,104.54a9.12,9.12,0,0,1-4.27-1.34c-2.12-1.19-4.17-2.6-6.14-4-4.49-3.09-8.72-6-13.68-6.42-3.59-.3-7.16.78-10.94,1.93-4.09,1.24-8.31,2.52-12.74,2-3.64-.43-6.95-2-10.16-3.58C76,91.31,72.35,89.56,68.55,90s-6.86,2.86-10.18,5.44c-.91.72-1.86,1.46-2.82,2.14-4.9,3.52-11.92,5.87-16.92,1.89-2.06-1.64-3.15-3.91-4.2-6.1-.23-.48-.45-1-.69-1.43-2.41-4.71-5.93-8.08-9.93-9.49-4.43-1.56-9.51-.36-12.08,2.86l-1.55,2L8.91,85.11c-3.72-6.29-2.93-14.94,2.27-25,.63-1.21,1.29-2.42,1.94-3.64,3.17-5.84,6.44-11.89,6.35-18.27-.06-4.73.09-9.55,2.6-12A5.25,5.25,0,0,1,26,24.65a8.92,8.92,0,0,1,4.83,2L41.7,34.41c1.71,1.21,3.52,2.37,5.13,2.06,2.23-.44,2.77-2.86,3.47-6.76.47-2.58.94-5.24,2.3-7.43,3.2-5.15,10.5-5.62,15.43-3.1,3.76,1.92,6.56,5.18,8.85,8.32A48,48,0,0,0,87,11.43l.84-2.2,1.83,1.47c3.17,2.52,6.76,5.38,10.79,6.5,3.33.93,8,.51,10.3-2.61l.79-1.06,1.22.48a24.33,24.33,0,0,1,7,4.89c2.43,2.15,4.72,4.18,7.52,4.57,2.11.29,4.31-.38,6.63-1.1l.7-.21a79.72,79.72,0,0,1,28.68-3.26c2.88.2,5.85.66,8.05,2.7,1.91,1.77,2.69,4.29,3.27,6.52a116,116,0,0,1-.79,61.45c-.32,1.12-1,3.45-3.08,4.38-1.82.82-3.72.12-4.86-.3l-20.18-7.43a80.7,80.7,0,0,1-2.24,12.44c-.55,2.09-1.5,4.62-3.94,5.56A5,5,0,0,1,137.76,104.54Zm-25.31-15.2c.5,0,1,0,1.51.06,5.86.49,10.68,3.81,15.33,7,1.92,1.32,3.89,2.68,5.87,3.79.93.52,2.25,1.16,3.16.82s1.53-2,1.85-3.24a77,77,0,0,0,2.33-14.07l.16-2.28,24.44,9a3.73,3.73,0,0,0,2.27.39c.63-.28,1-1.63,1.19-2.2A112.58,112.58,0,0,0,171.32,29c-.48-1.84-1-3.73-2.28-4.87-1.42-1.31-3.7-1.64-6-1.79a76,76,0,0,0-27.44,3.11l-.69.21c-2.58.8-5.25,1.62-8.11,1.22-3.83-.53-6.63-3-9.33-5.41a26.8,26.8,0,0,0-4.91-3.75c-3.44,3.48-8.89,4-13.06,2.8a30.1,30.1,0,0,1-10.2-5.71A51.54,51.54,0,0,1,75.82,33.25l-2.24-2.59.82-.74c-2.16-3-4.65-6-7.93-7.68-3.59-1.84-8.85-1.53-10.95,1.85-1,1.63-1.43,4-1.84,6.22-.72,4-1.54,8.62-6.2,9.52-2.94.58-5.55-1-7.77-2.62L28.83,29.49a6.07,6.07,0,0,0-2.93-1.41,1.8,1.8,0,0,0-1.42.5c-1.68,1.67-1.61,6.8-1.57,9.55.1,7.27-3.39,13.72-6.77,20-.65,1.19-1.29,2.39-1.91,3.58C11.32,67.3,8.58,75,10.9,81.32A14.82,14.82,0,0,1,25,79.21c4.83,1.71,9,5.67,11.83,11.17.25.49.5,1,.74,1.51.92,1.93,1.8,3.75,3.24,4.9,3.5,2.79,9.07.67,12.78-2,.9-.65,1.82-1.37,2.72-2.06,3.54-2.76,7.21-5.61,11.88-6.15s9.06,1.5,13.18,3.49c3.08,1.49,6,2.9,9.06,3.26,3.72.44,7.42-.69,11.35-1.88C105.19,90.42,108.75,89.34,112.45,89.34Z" />
+        <text class="cls-2" transform="translate(75.21 63.72)">blblbg</text></g>
+</svg>

test_data/src/img/author_dahYeeNoh.svg

@@ -0,0 +1,32 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 188 159">
+    <defs>
+        <style>
+            .cls-1 {
+                fill: #898989;
+            }
+
+            .cls-2 {
+                font-size: 16.47px;
+                fill: #231f20;
+                font-family: ArialMT, Arial;
+            }
+
+            .cls-3 {
+                letter-spacing: -0.02em;
+            }
+
+            .cls-4 {
+                letter-spacing: -0.09em;
+            }
+            .shape{fill:none;}
+        </style>
+    </defs>
+    <g id="dahYeeNoh">
+        <path class="shape" d="M174 28 188 96 134 154 40 159 0 107 30 21 106 0 174 28" />
+        <path
+            d="M67.43,153.84c-2.23,0-4.57-.12-7.06-.36-2.23-.22-4.45-.49-6.8-.78l-3.35-.4L47.85,152l1-2.16c2.66-5.63,2.23-8.35-1.91-12.11-5.74-5.22-11.72-10.38-17.51-15.38q-3.48-3-6.95-6c-1.07-.93-2.2-1.87-3.38-2.8l-.2-.16c-1.79-1.42-4-3.18-3.58-6.8a3.79,3.79,0,0,0-1-2.13,5.48,5.48,0,0,1-.89-5.71,196.09,196.09,0,0,1,12.07-30.1C27.38,65,29.28,61,31.17,57a45.06,45.06,0,0,0,3.69-12c.51-3.29,2.21-5.9,3.85-8.42.51-.78,1-1.59,1.51-2.39l.58-1,1.15.17c4,.58,7.54-.92,11.31-2.51l3.41-1.44c8-3.38,16.35-6.88,24.4-10.54a35.83,35.83,0,0,1,25.71-1.73,7.35,7.35,0,0,0,5.7-.72l.87-.45,3.76,2.39,6.51,4.15c3.89,2.49,8.34,3.36,12.56,3.93a82.18,82.18,0,0,1,28.57,9.34,6.32,6.32,0,0,1,3.65,5.15c1.4,11.9,2.62,21.85,3.84,31.29.3,2.33.73,4.7,1.14,7,.22,1.21.44,2.41.64,3.62.28,1.68.7,4.22-1.64,6.48-1,1-1.06,2.56-.77,4.76l.11.77-.52.59-.23.28a3.82,3.82,0,0,1-.83.83c-7.9,5.41-13.79,12.78-18.51,19.27-6.25,8.59-13.21,16.78-19.95,24.71l-2.44,2.87a6.46,6.46,0,0,1-5.05,2.37c-3.18.15-6.41.37-9.53.59l-5.4.36c-8.36.53-17.37,2.24-28.35,5.38A48.41,48.41,0,0,1,67.43,153.84Zm-14.54-4.68,1.1.14c2.32.28,4.52.55,6.71.76,7.51.72,13.63.31,19.26-1.3,11.23-3.21,20.47-5,29.09-5.5,1.79-.11,3.58-.24,5.37-.36,3.14-.22,6.39-.45,9.61-.6a3.08,3.08,0,0,0,2.59-1.16l2.45-2.88c6.69-7.87,13.61-16,19.78-24.5,4.88-6.7,11-14.32,19.27-20-.23-1.93-.31-4.82,1.87-6.93.9-.86.95-1.62.64-3.45q-.3-1.78-.63-3.57c-.42-2.34-.85-4.76-1.16-7.17-1.22-9.46-2.44-19.41-3.84-31.33a3,3,0,0,0-1.9-2.54,78.86,78.86,0,0,0-27.37-8.95c-4.4-.59-9.5-1.58-14-4.44l-6.5-4.14-2.13-1.36a10.39,10.39,0,0,1-7.33.53A32.12,32.12,0,0,0,82.49,22C74.39,25.63,66.06,29.14,58,32.53L54.6,34c-3.72,1.57-7.57,3.19-12,2.87l-1,1.57c-1.51,2.32-2.94,4.51-3.34,7.08a49,49,0,0,1-4,12.9c-1.91,4.13-3.83,8.1-5.71,11.82A192.36,192.36,0,0,0,16.72,99.79c-.4,1.28-.36,1.77.23,2.45a6.75,6.75,0,0,1,1.8,4.77c-.2,1.64.61,2.36,2.3,3.7l.21.16c1.21,1,2.39,1.94,3.49,2.9l6.94,6c5.8,5,11.81,10.18,17.58,15.43C54,139.47,55.05,143.41,52.89,149.16Z" />
+        <text class="cls-2" transform="translate(54.32 84.66)">Dah<tspan class="cls-3" x="30.21" y="0"> </tspan>
+            <tspan class="cls-4" x="34.49" y="0">Y</tspan>
+            <tspan x="43.97" y="0">ee Noh</tspan>
+        </text></g>
+</svg>

test_data/src/img/author_eunjeongGu.svg

@@ -0,0 +1,21 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205 121">
+    <defs>
+        <style>
+            .cls-1 {
+                fill: #818181;
+            }
+
+            .cls-2 {
+                font-size: 16.47px;
+                fill: #231f20;
+                font-family: ArialMT, Arial;
+            }
+            .shape{fill:none;}
+        </style>
+    </defs>
+    <g id="eunjeongGu">
+        <path class="shape" d="M12 0 205 34 179 115 159 121 0 99 12 0" />
+        <path
+            d="M20.53,14.67c.32,6.54-1.18,12.51-2.13,18.63-1.17,7.53-1.72,15.17-2.14,22.86a147.94,147.94,0,0,1-3.13,22.1c-.57,2.79-.84,5.73-1.27,8.78,3.29,1.9,6.33,3.85,9.67,4.58a83.7,83.7,0,0,0,16.3,2.07c6.73.14,13.38,1.56,20,2.82a35.19,35.19,0,0,0,14.2-.11c9.17-2,18.29-1,27.41.76,3.25.64,6.53.79,9.78,1.4,5.09,1,10.15,2.16,15.24,3.15a50.35,50.35,0,0,0,6.68.82,54.72,54.72,0,0,1,13.45,2.66,30.14,30.14,0,0,0,14.81,1.08,16.26,16.26,0,0,0,3-1c3.39-1.35,6.76-2.75,10.28-3.09a3.66,3.66,0,0,1,1.92.28,2.22,2.22,0,0,1,.9,2.52c-.22,1.11-.81,1.58-1.66,1.44a5.33,5.33,0,0,0-2.24-.12,78,78,0,0,0-7.85,2.54,26.8,26.8,0,0,1-17.53.77c-5.7-1.56-11.38-3-17.19-3.31-3.58-.19-7.14-1.43-10.71-2-5-.89-10.09-1.64-15.13-2.45-4.83-.77-9.65-1.64-14.48-2.29a39.76,39.76,0,0,0-14.22.38,45.88,45.88,0,0,1-20.88-.22,96.63,96.63,0,0,0-17.78-2.17A60.21,60.21,0,0,1,19,94.82c-2.86-1-5.59-2.82-8.35-4.38-1-.59-1.5-2-1.31-3.59.39-3.3.67-6.67,1.33-9.85a153.29,153.29,0,0,0,3.23-25.3,187.83,187.83,0,0,1,2.78-24.2c.27-1.59.51-3.19.79-4.78a3.21,3.21,0,0,0-.33-2.24,4.5,4.5,0,0,1-.26-2.23c.13-1.35.43-2.67.71-4.25a6,6,0,0,1-1.28.28A9.92,9.92,0,0,1,14.08,14c-.65-.18-1.06-.89-1-1.95s.58-1.81,1.32-1.81a25.45,25.45,0,0,1,5.38.25,23.06,23.06,0,0,1,5.71,2.18,20.16,20.16,0,0,0,9.8,2.43A43.69,43.69,0,0,1,50.58,17.5a53,53,0,0,1,5.82,2.55A11.49,11.49,0,0,0,62,21.43c6.27-.28,12.41,1.17,18.5,3.16A23.61,23.61,0,0,0,94,25.17a49.42,49.42,0,0,1,18-1.58c2,.23,3.89.81,5.84,1.1a43.72,43.72,0,0,0,6.52.69,67.1,67.1,0,0,1,19,2.81c2.73.78,5.51,1.19,8.26,1.76,4.43.92,8.87,1.77,13.29,2.78a35.18,35.18,0,0,1,4.45,1.64c2.21.86,4.43,1.7,6.63,2.63,1.84.77,3.65,1.66,5.48,2.52s3.83,1.94,5.78,2.74a13.32,13.32,0,0,0,3.07.58c1,.15,1.94.28,2.92.39a2.26,2.26,0,0,0,1.24,0c1-.47,1.6.2,2.18,1.13a2.1,2.1,0,0,1-.26,2.85,3.47,3.47,0,0,0-1.19,2.17c-1.3,5.77-3.24,11.1-5,16.56-2.63,8.1-4.91,16.46-7.35,24.71-.6,2-1.18,4.06-1.85,6a10.35,10.35,0,0,1-2.88,4.6,1.54,1.54,0,0,1-2.42-.43,4,4,0,0,1-.19-3c.31-1.19.74-1.39,2.27-1.19A20.6,20.6,0,0,0,180,91c2.5-8.56,4.95-17.16,7.49-25.7.83-2.76,1.95-5.33,2.8-8.08,1-3.18,1.81-6.47,2.81-10.1a10.18,10.18,0,0,0-2.27-.38A13.11,13.11,0,0,1,184.05,45c-1.82-.9-3.59-2-5.4-2.93-1.14-.58-2.3-1-3.47-1.48-.64,1.11-.58,3.25-2,2.71-1.17-.44-.93-1.94-1-3.23-1.51-.46-2.95-.88-4.38-1.35a2,2,0,0,1-1.21-.67c-1-1.7-2.44-1.64-3.77-1.91-6.38-1.3-12.78-2.39-19.13-3.89-4.59-1.08-9.13-2.52-13.78-2.77-.17,0-.33-.07-.49-.07a75.62,75.62,0,0,1-16.3-1.77c-6-1.24-12.1-.25-18.11,1.18-3.63.86-7.26,1.49-10.92.61-2.48-.6-5-1.23-7.41-2A45.15,45.15,0,0,0,62.06,25.3a13.56,13.56,0,0,1-6.43-1.56,40.29,40.29,0,0,0-18.49-4.68c-3.17,0-6.34,0-9.43-1.31-2.05-.87-4.09-1.82-6.13-2.72C21.27,14.89,21,14.81,20.53,14.67Z" />
+        <text class="cls-2" transform="translate(45.49 64.66)">Eunjeong Gu</text></g>
+</svg>

test_data/src/img/author_graceKim.svg

@@ -0,0 +1,21 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 236 115">
+    <defs>
+        <style>
+            .cls-1 {
+                fill: #d2d2d2;
+            }
+
+            .cls-2 {
+                font-size: 16.47px;
+                fill: #231f20;
+                font-family: ArialMT, Arial;
+            }
+            .shape{fill:none;}
+        </style>
+    </defs>
+    <g id="graceKim">
+        <path class="shape" d="M5 22 236 0 234 89 141 110 53 115 0 99 5 22" />
+        <path
+            d="M136.37,98.36c-11.75.13-23.51.15-35.27.47a41.2,41.2,0,0,0-9.41,1.73,50.19,50.19,0,0,1-18.43,1.83,85.76,85.76,0,0,0-10.5-.52,43.45,43.45,0,0,1-13.65-2.3,95.47,95.47,0,0,0-17.79-4.06,66.72,66.72,0,0,0-10,.2c-2.08.09-4.15.37-6.22.53a4.16,4.16,0,0,1-1.31-.12c-1.42-.39-1.84-1.24-1.8-3.37.11-5.74.24-11.48.26-17.21,0-12,0-24,0-35.95,0-1.14,0-2.3,0-3.44.06-2.07.53-2.77,1.91-2.85,2-.11,3.93-.21,5.9-.25,3.74-.08,7.36-1.42,11-2.36,8.38-2.13,16.78-3.46,25.29-2.39a16.85,16.85,0,0,0,2.13.07c7.28,0,14.56.16,21.83-.05,5.08-.14,10.15-.77,15.23-1.18,2.18-.18,4.37-.33,6.55-.58,5.23-.59,10.45-1.25,15.68-1.83a43.66,43.66,0,0,1,4.43-.23c7,0,14-.1,21,0a50.41,50.41,0,0,0,12.22-1.69,128.25,128.25,0,0,1,17.87-3.34c6.66-.58,13.3-1.51,20-2,4.64-.36,9.3-.17,13.94-.41A27.24,27.24,0,0,0,215,16a12.93,12.93,0,0,1,5.1-.94c1.29.08,2.59.28,3.88.46.62.08.93.7,1.13,1.55.26,1.06.65,2.06.88,3.13A24.07,24.07,0,0,1,226.6,24a54,54,0,0,1-.68,10.48c-.34,2.39-.49,4.85-.59,7.29-.08,2,0,4.11,0,6.16.19,7.51-.68,14.86-1.48,22.23-.38,3.55-.59,7.15-.82,10.73-.16,2.66-.83,4-2.59,4.14-5.63.36-11.16,2.08-16.76,2.85-2.34.32-4.69.4-7,.56-5.63.38-11.26.56-16.88,1.14a108,108,0,0,0-18.95,4.09c-4.93,1.45-9.87,2.77-14.82,4A18.07,18.07,0,0,1,142,98c-1.86.05-3.72,0-5.58,0ZM220.26,81c.24-3.05.34-5.92.69-8.72A184.55,184.55,0,0,0,222.69,42a58.4,58.4,0,0,1,.75-9.73A69.23,69.23,0,0,0,224,24c0-3-1.66-5.14-3.45-4.83-2.54.45-5.08,1.06-7.63,1.27-5.35.44-10.71.68-16.06,1-1.64.09-3.29,0-4.92.12-5.78.57-11.55,1.35-17.33,1.83A125.9,125.9,0,0,0,156,26.72a50.69,50.69,0,0,1-12.55,1.73c-7.11-.14-14.23,0-21.34,0a26.47,26.47,0,0,0-3,.13c-5.29.61-10.57,1.28-15.85,1.87-2.18.25-4.37.36-6.55.56-4.53.42-9,1.19-13.58,1.23-10.28.09-20.57,0-30.85-.33a74.87,74.87,0,0,0-20.7,2.73C26.44,36,21.25,37.53,15.9,37.23a3.75,3.75,0,0,0-1,.21V92.2c1.87-.12,3.65-.3,5.44-.36,3.93-.12,7.88-.54,11.8-.18,5.94.56,11.78,2.33,17.63,4a52.6,52.6,0,0,0,9.55,2.08c4.69.48,9.4.49,14.1.65,5.41.18,10.81.22,16.17-1.4a41.11,41.11,0,0,1,10.21-2c14-.5,27.89-.66,41.84-1a16.72,16.72,0,0,0,3.93-.28c6.66-1.73,13.32-3.56,20-5.4a93.75,93.75,0,0,1,18.88-3.18c4.09-.28,8.2-.45,12.29-.7A62,62,0,0,0,203,84c4.61-.74,9.21-1.64,13.82-2.45C217.9,81.3,219.05,81.2,220.26,81Z" />
+        <text class="cls-2" transform="translate(63.8 65.34)">Grace Kim</text></g>
+</svg>

test_data/src/img/author_hamamu.svg

@@ -0,0 +1,21 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 139 93">
+    <defs>
+        <style>
+            .cls-1 {
+                fill: #8d8d8d;
+            }
+
+            .cls-2 {
+                font-size: 16.47px;
+                fill: #231f20;
+                font-family: ArialMT, Arial;
+            }
+            .shape{fill:none;}
+        </style>
+    </defs>
+    <g id="hamamu">
+        <path class="shape" d="M139 66 15 93 5 65 0 24 83 0 131 23 139 66" />
+        <path
+            d="M20.66,87a3.73,3.73,0,0,1-3.42-2.21c-.56-1.17-1-2.33-1.5-3.41a81.17,81.17,0,0,1-3.06-9.62l-.13-.47c-.63-2.3-1.31-4.76-2.06-7.24a60.12,60.12,0,0,1-1.67-7.79c-.11-.7-.21-1.4-.31-2.11l-.39-2.61h0l0-.21c-.23-1.46-.47-3-.63-4.47-.18-1.71-.27-3.43-.35-5.09l0-1a74,74,0,0,0-.91-8.21l0-.11c0-.27-.09-.57-.11-.91a3.63,3.63,0,0,1,1.74-3.39l.65-.4a15.36,15.36,0,0,1,4.07-2c.62-.16,1.21-.26,1.79-.36l.78-.13.13,0a5.69,5.69,0,0,1,2.37-.8l1.86-.31c2.17-.36,4.41-.73,6.58-1.18a32.73,32.73,0,0,0,3.78-1.12l.64-.21a36.41,36.41,0,0,1,7.17-1.85A24.83,24.83,0,0,0,44.06,18a25.51,25.51,0,0,1,6.58-1.75,28.73,28.73,0,0,0,6.69-1.67,21.37,21.37,0,0,1,2.27-.67c.37-.09.74-.18,1.1-.29s.88-.26,1.32-.4a29,29,0,0,1,2.82-.79,23.32,23.32,0,0,0,3.48-1.11c.88-.32,1.78-.66,2.73-.93.4-.12.81-.23,1.21-.33l1-.26.71-.2c.94-.26,1.87-.53,2.8-.82l3-1L82.24,7c.89-.28,1.79-.53,2.55-.73a4.49,4.49,0,0,1,3.11.38,66.42,66.42,0,0,1,8.81,4.89,14.61,14.61,0,0,0,2,1l.35.16c.39.17.8.32,1.24.47l1,.4a16,16,0,0,1,4.27,2.45A13.55,13.55,0,0,0,108.92,18l.42.17a33.21,33.21,0,0,1,5.43,2.66l.54.35a7.2,7.2,0,0,0,.74.48c1.11.64,2.2,1.26,3.31,1.85l2.58,1.32,2,1a4.8,4.8,0,0,1,2.63,3.88,81.84,81.84,0,0,0,1.6,8.6,49.7,49.7,0,0,1,.89,5.26,36,36,0,0,0,1.61,6.88c.63,1.94,1.31,3.89,2,5.79l.44,1.25a3.79,3.79,0,0,1-2.94,5.29c-1.51.33-3.05.72-4.6,1.15l-6.08,1.72-4.36,1.24-.3.09c-2.24.63-4.56,1.28-6.86,1.89-1.37.35-2.82.69-4.72,1.08C98,71,92.56,71.88,87.35,72.71c-1.93.31-3.86.61-5.79.93a70.78,70.78,0,0,0-7.51,1.69L72,75.88c-.72.18-1.43.36-2.14.56l-2.06.62c-.92.28-1.87.56-2.82.82l-.28.07c-2.07.56-4.22,1.13-6.37,1.57-2.84.59-5.72,1.09-8.51,1.57l-.34,0c-.77.14-1.54.24-2.28.33s-1.68.22-2.48.37c-2.54.48-5.13,1-7.63,1.55l-.53.11c-1.75.37-3.3.72-4.73,1.08-.68.17-1.35.35-2,.54-.94.26-1.92.53-2.92.76-1.68.37-3.51.7-5.57,1A4.72,4.72,0,0,1,20.66,87ZM12,54.37c.07.44.13.88.2,1.31A56.51,56.51,0,0,0,13.78,63c.75,2.52,1.44,5,2.08,7.32l.13.47A78.52,78.52,0,0,0,18.92,80c.42,1,.89,2.14,1.41,3.22.12.26.22.29.45.26,2-.31,3.74-.63,5.35-1,.91-.21,1.8-.45,2.74-.72.71-.19,1.41-.39,2.12-.56,1.47-.37,3.06-.73,4.85-1.11l.53-.11c2.52-.53,5.13-1.08,7.71-1.56.9-.17,1.8-.29,2.67-.4s1.44-.19,2.14-.31l.34-.06c2.76-.47,5.62-1,8.39-1.54,2.06-.42,4.16-1,6.18-1.52l.29-.08c.89-.24,1.81-.52,2.7-.79.71-.21,1.42-.43,2.13-.63s1.47-.4,2.21-.59l2-.52A72.24,72.24,0,0,1,81,70.25l5.81-.93c5.18-.82,10.53-1.67,15.72-2.75,1.84-.38,3.25-.7,4.55-1,2.27-.6,4.57-1.25,6.8-1.88l.3-.08,4.35-1.24,6.1-1.73c1.6-.44,3.21-.84,4.77-1.19a1,1,0,0,0,.54-.23,1,1,0,0,0-.09-.57l-.44-1.25c-.67-1.92-1.36-3.9-2-5.87A40.34,40.34,0,0,1,125.65,44a45.86,45.86,0,0,0-.82-4.91,85.5,85.5,0,0,1-1.67-9,1.35,1.35,0,0,0-.79-1.23l-2-1-2.62-1.34c-1.17-.62-2.29-1.26-3.43-1.91-.33-.19-.65-.4-1-.62l-.46-.31a31.31,31.31,0,0,0-4.9-2.37l-.42-.17a17,17,0,0,1-4.17-2.43A13.33,13.33,0,0,0,100,16.78c-.31-.13-.62-.24-.93-.35-.47-.17-1-.35-1.45-.56l-.34-.15a16.42,16.42,0,0,1-2.5-1.28A64.48,64.48,0,0,0,86.45,9.8a1.2,1.2,0,0,0-.79-.17c-.71.19-1.56.42-2.38.68l-2.51.81c-1,.33-2,.66-3,1s-1.94.58-2.89.84l-.7.2-1,.28-1.13.3c-.82.24-1.62.54-2.48.86a26.44,26.44,0,0,1-4,1.25c-.81.17-1.62.43-2.48.7-.47.15-.94.3-1.41.43s-.8.22-1.21.32a18,18,0,0,0-1.91.56A32.29,32.29,0,0,1,51,19.69a21.55,21.55,0,0,0-5.67,1.52,28.26,28.26,0,0,1-7.33,2,33.59,33.59,0,0,0-6.51,1.7l-.63.21a34,34,0,0,1-4.19,1.23c-2.23.46-4.51.84-6.71,1.2l-1.84.31a2.54,2.54,0,0,0-1.09.31,2.46,2.46,0,0,1-1.27.49l-.08,0-.86.15a14,14,0,0,0-1.46.29,12.09,12.09,0,0,0-3.16,1.57l-.69.41s-.07.1-.07.33a3.4,3.4,0,0,0,.07.46l0,.13a78.2,78.2,0,0,1,.95,8.59l.05,1c.08,1.61.16,3.28.33,4.89.16,1.42.39,2.89.61,4.3l.3,1.93.25,1.7Z" />
+        <text class="cls-2" transform="translate(37.23 50.7)">Hamamu</text></g>
+</svg>

test_data/src/img/author_hongSeoYeon.svg

@@ -0,0 +1,33 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 161">
+    <defs>
+        <style>
+            .cls-1 {
+                fill: #9d9d9d;
+            }
+
+            .cls-2 {
+                font-size: 16.47px;
+                fill: #231f20;
+                font-family: ArialMT, Arial;
+            }
+
+            .cls-3 {
+                letter-spacing: -0.02em;
+            }
+
+            .cls-4 {
+                letter-spacing: -0.09em;
+            }
+            .shape{fill:none;}
+        </style>
+    </defs>
+    <g id="hongSeoYeon">
+        <path class="shape" d="M0 6 3 96 239 161 264 86 185 26 72 0 0 6" />
+        <path
+            d="M39.21,86.2c-1.13.49-2.17.93-3.2,1.4a27.54,27.54,0,0,1-11.93,2.87,11.19,11.19,0,0,0-7,2.18c-2.12,1.53-4.28-.54-4.77-3.93a136,136,0,0,1-1-15.89,74.63,74.63,0,0,0-2-14.63,72.57,72.57,0,0,1-2-16.39c0-5.31.4-10.63.61-15.94.1-2.61.19-5.23.29-7.84,0-.82,0-1.65.12-2.44.33-2.51.83-2.89,2.49-2.77,2.66.19,5.33.18,8,.22,1.8,0,3.59,0,5.58,0,.54-1.21,1.54-1.22,2.61-1.26A16.63,16.63,0,0,0,31.5,11a24.09,24.09,0,0,1,9.93-.85,165.19,165.19,0,0,0,24.87.27c4.91-.26,9.81-.69,14.72-.67A52.07,52.07,0,0,1,102.21,14a36.09,36.09,0,0,0,16.34,3.13,83.86,83.86,0,0,1,21.35,2.24c5.12,1.1,9.81,3.9,14.51,6.79s9.48,6,14.42,8.15c1.83.8,3.74,1.18,5.6,1.82a27.19,27.19,0,0,1,4.11,1.66c5.51,3,11,6,16.49,9,3.64,2,7.27,4.09,10.89,6.15,3.22,1.83,6.46,3.59,9.65,5.55,1.51.92,2.89,2.3,4.37,3.35,4.64,3.28,9.35,6.36,13.94,9.8A64.79,64.79,0,0,1,241,78.14a42,42,0,0,0,8.53,6.75,7.84,7.84,0,0,1,1.31,1,10.39,10.39,0,0,0,4.83,2.9,3,3,0,0,1,1.09.53c1,.66,1.27,1.49,1,3-.74,3.43-1.38,6.93-2.88,9.87a35.93,35.93,0,0,0-3,8.94A142.21,142.21,0,0,1,246.47,129a96.71,96.71,0,0,0-3.14,11.33,88.45,88.45,0,0,1-5.06,15.11c-1,2.43-1.71,2.77-3.36,1.33-2.69-2.35-5.36-4.75-7.93-7.36-3.43-3.49-6.69-7.36-10.16-10.75a26.76,26.76,0,0,0-6.16-4.52c-4.69-2.47-9.44-4.72-14.22-6.8a32.41,32.41,0,0,0-6.91-2,24.86,24.86,0,0,1-10.81-5.47,6.52,6.52,0,0,0-1-.78c-6.41-3.33-12.6-7.56-19.15-10.27-2.74-1.13-5.42-2.6-8.11-4a17.45,17.45,0,0,0-6.27-1.72,20.1,20.1,0,0,1-6.24-1.89c-6.33-2.87-12.66-5.75-19.06-8.22-3.53-1.37-7.2-1.92-10.8-2.87-3-.79-5.89-1.82-8.86-2.43a49.94,49.94,0,0,0-15.53-.21A24.54,24.54,0,0,1,72.5,86.12a14.26,14.26,0,0,0-8-.62,52.46,52.46,0,0,1-14.37,1.3,13,13,0,0,0-7.39,1.79,5.22,5.22,0,0,0-1.6,1.52c-.52.74-1,.9-1.62.47a2.13,2.13,0,0,1-.66-2C39,87.82,39.08,87.13,39.21,86.2ZM11,17.14c-.08,2.59-.12,5.12-.24,7.64-.19,4.09-.44,8.16-.66,12.25A67,67,0,0,0,11.9,56.86c1.72,6.89,2,14,2.33,21.25.13,3.18.41,6.35.7,9.51.14,1.58.5,1.9,1.42,1.21a12.25,12.25,0,0,1,7.81-2.28,25.9,25.9,0,0,0,11-2.65c.84-.38,1.68-.72,2.51-1.13A14.56,14.56,0,0,1,48.31,82a19.92,19.92,0,0,0,9.09.75c2.22-.45,4.46-.63,6.68-1.1a16.83,16.83,0,0,1,8.94.62c2.88,1,5.75,1.88,8.75,1.53s6.21-.39,9.32-.52a37.69,37.69,0,0,1,12.7,1.57c2.25.68,4.49,1.48,6.76,1.94a80.82,80.82,0,0,1,15.54,4.89c4.52,1.94,9,4.2,13.48,6.23a12.47,12.47,0,0,0,3.84,1.16,32.33,32.33,0,0,1,11.18,3.58c7.89,3.95,15.77,7.93,23.5,12.52a20,20,0,0,1,2.08,1.45,22.91,22.91,0,0,0,8.28,4.52,55.42,55.42,0,0,1,8.21,2.23c4.59,1.89,9.09,4.22,13.63,6.35a36.1,36.1,0,0,1,11,8.61c3.7,4,7.45,8,11.23,11.9,1.1,1.14,2.22,2.35,3.65,2.68a6.94,6.94,0,0,0,.42-.8c1.4-4,3.1-7.71,4-12.08a82.28,82.28,0,0,1,3.68-13.4A99,99,0,0,0,249,111a51.86,51.86,0,0,1,4-12,18.74,18.74,0,0,0,1.63-6c-2.13-1.56-4.12-3.26-6.23-4.52a49.84,49.84,0,0,1-9.9-8.09A52.12,52.12,0,0,0,232.34,75c-4.56-3.35-9.19-6.45-13.79-9.7-1.52-1.09-3-2.52-4.52-3.43-4.8-2.77-9.64-5.33-14.46-8-4.15-2.32-8.28-4.69-12.42-7.05-.3-.18-.58-.48-.89-.63-3.93-2-7.81-4.26-11.82-5.86-3.8-1.51-7.69-2.51-11.36-4.71-3.86-2.31-7.7-4.69-11.57-7-4.12-2.41-8.24-4.72-12.72-5.41S129.63,21,125,21.1q-3.76.06-7.53,0c-4.88,0-9.75-.52-14.41-2.72a50.63,50.63,0,0,0-17.89-4.48c-5.11-.4-10.25.1-15.38.31-9.49.41-19,.87-28.48-.14a21.74,21.74,0,0,0-9.12.76,29.65,29.65,0,0,1-4.55.86c-.6.1-1.16.09-1.61.9a1.44,1.44,0,0,1-1.94.73,7.93,7.93,0,0,0-2.42-.44c-3.33,0-6.66,0-10,0A2.36,2.36,0,0,0,11,17.14Z" />
+        <text class="cls-2" transform="translate(77.08 52.34) rotate(17.51)">Hong Seo<tspan class="cls-3" x="73.26"
+                y="0"> </tspan>
+            <tspan class="cls-4" x="77.54" y="0">Y</tspan>
+            <tspan x="87.01" y="0">eon</tspan>
+        </text></g>
+</svg>

test_data/src/img/author_hyunchul.svg

@@ -0,0 +1,25 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156 185">
+    <defs>
+        <style>
+            .cls-1 {
+                fill: #b4b4b4;
+            }
+
+            .cls-2,
+            .cls-3 {
+                fill: #231f20;
+            }
+
+            .cls-3 {
+                font-size: 16.47px;
+                font-family: ArialMT, Arial;
+            }
+            .shape{fill:none;}
+        </style>
+    </defs>
+    <g id="hyunchul">
+        <path class="shape" d="M0 15 147 0 156 32 140 181 78 185 0 82 0 15" />
+        <path class="cls-2"
+            d="M85.54,177.36a4.92,4.92,0,0,1-.69-.06l-.35,0-1.38-.15L83,175.72l-.09-.76a15.1,15.1,0,0,1-.16-2c0-2.18,0-4.36,0-6.55v-2.68a158.81,158.81,0,0,0-1.6-23.59,36.09,36.09,0,0,1-.38-4.62,125.8,125.8,0,0,0-1.13-14.11c-.3-2.1-.51-4.23-.72-6.29s-.45-4.38-.76-6.54a115.71,115.71,0,0,0-4.7-20.55,20,20,0,0,1-.53-2c-.1-.45-.2-.9-.33-1.34a23.82,23.82,0,0,0-.93-2.64,3.25,3.25,0,0,0-2.3-1.88,9.86,9.86,0,0,0-1.92-.32,245.72,245.72,0,0,0-32.54-.31c-3,.18-6.12.51-9.1.84-2.37.25-4.82.52-7.25.71-2.75.21-5.54.28-8.24.35l-2.8.08a4.47,4.47,0,0,1-1.32-.2,1.89,1.89,0,0,0-.34-.09L4.54,81l-.11-1.85c0-.4,0-.77-.06-1.14q-.09-3.57-.2-7.14C4,65.38,3.83,59.68,3.81,54.07c0-5.92.12-11.92.25-17.73.05-2.19.1-4.39.14-6.58,0-1.3.09-2.6.15-3.85,0-.56.05-1.12.08-1.68l.15-3.33L6,20.75l1.11-.14a15.24,15.24,0,0,1,2.56-.22,81.48,81.48,0,0,0,17.72-1.93,30,30,0,0,1,9-.4c1,.1,2.07.1,3,.11h5.26c3,0,6.08,0,9.12,0,3.38,0,6.81.13,10.13.22l4.23.11h.11a2.71,2.71,0,0,1,1.26.21c1.74.78,3.52.34,5.58-.16l1.08-.26c2.94-.67,5.95-1.15,8.86-1.62l1.33-.21a90.29,90.29,0,0,1,11.15-.88c1.61-.06,3.28-.13,4.91-.23,5.84-.37,12.7-1.06,19.33-3.39a32.1,32.1,0,0,1,7.82-1.7c1.58-.15,3.14-.43,4.79-.72,1.2-.22,2.45-.44,3.7-.61s2.63-.23,3.91-.3l1.72-.09L145,8.48l.45,1.18.2.49a7.08,7.08,0,0,1,.41,1.18,39.57,39.57,0,0,1,1.27,10.07c0,1.57,0,3.19,0,4.75,0,2,0,4.05-.09,6.09-.15,2.68-.4,5.39-.64,8-.16,1.73-.33,3.52-.46,5.28-.07.91-.14,1.81-.22,2.72-.3,3.84-.61,7.81-.71,11.69a154,154,0,0,1-1.64,17.65,263.92,263.92,0,0,0-3,35.58c0,1.61,0,3.22,0,4.83-.05,4.16-.1,8.47-.08,12.7A110.55,110.55,0,0,1,139,147c-.39,2.73-.74,5.52-1.08,8.22s-.65,5.29-1,7.93-.8,5-1.27,7.54c-.21,1.15-.42,2.32-.62,3.5l-.25,1.42H133.3l-2.81,0c-1.93,0-3.74,0-5.54,0-3.61.15-7.28.34-10.82.52-2.94.15-5.88.31-8.81.44-4.91.22-9.91.41-14.73.59l-4.93.19ZM48.32,75.78c6.19,0,12.6.24,19.33.72a12.37,12.37,0,0,1,2.61.44,6.7,6.7,0,0,1,4.53,3.83,28.78,28.78,0,0,1,1.06,3c.15.52.27,1,.39,1.54s.26,1.14.43,1.65a118.92,118.92,0,0,1,4.85,21.15c.32,2.23.55,4.49.77,6.68.21,2,.42,4.13.7,6.17a130.18,130.18,0,0,1,1.17,14.49,33.21,33.21,0,0,0,.34,4.2,161.5,161.5,0,0,1,1.64,24.1v2.68c0,2.18,0,4.35,0,6.52,0,.3,0,.61.06.94l4.24-.17c4.82-.18,9.8-.37,14.7-.59,2.93-.13,5.86-.28,8.79-.43,3.56-.19,7.23-.38,10.85-.53,1.89-.08,3.75-.06,5.72,0h1.34c.12-.7.25-1.4.37-2.09.47-2.55.9-5,1.25-7.42.38-2.61.71-5.28,1-7.86s.68-5.53,1.08-8.29a107.59,107.59,0,0,0,1.33-15.8c0-4.25,0-8.57.08-12.75,0-1.61,0-3.21.05-4.82a267.36,267.36,0,0,1,3-36,151.88,151.88,0,0,0,1.61-17.25c.1-4,.42-8,.72-11.86l.21-2.72c.14-1.79.31-3.59.47-5.34.24-2.58.49-5.25.63-7.86.11-1.94.1-4,.09-5.89,0-1.6,0-3.25,0-4.89a37.08,37.08,0,0,0-1.2-9.2v0l-.52,0c-1.26.06-2.45.12-3.62.28s-2.38.37-3.55.58c-1.65.29-3.35.59-5.07.76a28.85,28.85,0,0,0-7,1.51c-7,2.48-14.18,3.2-20.26,3.59-1.67.1-3.36.16-5,.23a88,88,0,0,0-10.74.84l-1.32.21c-2.86.46-5.82.93-8.65,1.58-.34.07-.68.16-1,.24-2.28.56-4.85,1.19-7.59.05h-.26l-4.24-.11c-3.31-.09-6.73-.18-10.08-.22-3,0-6.1,0-9.07,0H39.4c-1,0-2.19,0-3.36-.13a26.85,26.85,0,0,0-7.95.35,84.85,84.85,0,0,1-18.46,2A11.51,11.51,0,0,0,7.87,24v.4c0,.57-.06,1.14-.08,1.7-.06,1.24-.12,2.51-.15,3.75q-.06,3.3-.14,6.6c-.13,5.78-.27,11.77-.24,17.64,0,5.57.18,11.24.35,16.73.07,2.38.14,4.77.2,7.15,0,.07,0,.14,0,.21l2.39-.07c2.65-.06,5.39-.13,8.05-.34,2.38-.19,4.8-.45,7.15-.7,3-.33,6.16-.67,9.27-.86C39.13,75.92,43.66,75.78,48.32,75.78Z" />
+        <text class="cls-3" transform="translate(27.46 53.04)">Hyunchul Kim</text></g>
+</svg>

test_data/src/img/author_hyunjin.svg

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="Layer_1"
+   data-name="Layer 1"
+   viewBox="0 0 114 94"
+   version="1.1"
+   sodipodi:docname="author_hyunjin.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <metadata
+     id="metadata16">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1440"
+     inkscape:window-height="843"
+     id="namedview14"
+     showgrid="false"
+     inkscape:zoom="2.5106383"
+     inkscape:cx="52.220339"
+     inkscape:cy="47"
+     inkscape:window-x="0"
+     inkscape:window-y="31"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" />
+  <defs
+     id="defs4">
+    <style
+       id="style2">
+            .cls-1 {
+                fill: #8d8d8d;
+            }
+
+            .cls-2 {
+                font-size: 16.47px;
+                fill: #231f20;
+                font-family: ArialMT, Arial;
+            }
+            .shape{fill:none;}
+        </style>
+  </defs>
+  <g
+     id="hyunjin">
+    <path
+       class="shape"
+       d="M8 0 98 30 114 86 105 94 14 94 0 82 0 6 8 0"
+       id="path6" />
+    <path
+       d="M78.56,89.62c-2.52,0-5.1-.11-7.8-.33s-5.32-.38-7.93-.54-5.49-.32-8.24-.56a39.07,39.07,0,0,1-4-.6A35.39,35.39,0,0,0,46.7,87c-3-.2-6.06-.26-9-.32l-3.46-.08c-.41,0-.82,0-1.23,0a19,19,0,0,1-2.37-.06A49.13,49.13,0,0,0,18.85,87a15.17,15.17,0,0,1-2.45.15c-3.85-.08-6.26-2.23-6.79-6.07a2.34,2.34,0,0,0,0-.26l-.36,0,0-1.63c0-1,.05-2.06.07-3.09.05-2.27.1-4.63.25-7A81,81,0,0,0,8.86,55.3c-.11-1-.23-2.09-.33-3.14Q7.15,38.56,5.82,25L4.71,13.76l0-.32A6.56,6.56,0,0,1,6.86,7.77,6.44,6.44,0,0,1,12.73,6.7c.93.24,1.84.52,2.71.79s1.92.6,2.87.83c4.33,1,8.91,2.11,13.63,3.15A61.4,61.4,0,0,1,49.8,18a55.3,55.3,0,0,0,10.7,4.32l.62.2c9.21,3,17.44,5.9,25.05,11l.13.08a6.08,6.08,0,0,1,2,1.89,2.25,2.25,0,0,0,1.24,1c.72.3,1.43.6,2.13,1a7.88,7.88,0,0,1,4.51,6,3.83,3.83,0,0,0,.58,1.06,31.47,31.47,0,0,1,5.66,14.72,69.21,69.21,0,0,0,2.2,11.15c.41,1.5.68,3,1,4.5.13.74.27,1.47.41,2.2.1.46.21.91.32,1.37a22.44,22.44,0,0,1,.56,2.87,6.21,6.21,0,0,1-5.58,7c-1.4.16-2.81.22-4.18.28-.75,0-1.51.07-2.26.12h-.08c-3.19.21-6.49.43-9.72.7C82.93,89.54,80.77,89.62,78.56,89.62ZM33.81,83.17h.49l3.44.08c3,.06,6.12.12,9.19.33a36.77,36.77,0,0,1,4.3.63c1.26.23,2.46.45,3.65.55,2.71.23,5.48.4,8.15.56s5.34.31,8,.54A84.18,84.18,0,0,0,84.78,86c3.26-.27,6.57-.49,9.77-.7h.08c.78,0,1.56-.08,2.34-.12,1.37-.06,2.65-.11,3.94-.26a2.76,2.76,0,0,0,2.56-3.19,19.37,19.37,0,0,0-.49-2.43c-.12-.5-.24-1-.34-1.49-.15-.76-.29-1.52-.43-2.27-.26-1.48-.52-2.87-.88-4.24A72.32,72.32,0,0,1,99,59.54,28.11,28.11,0,0,0,93.93,46.4a6,6,0,0,1-1.12-2.47,4.5,4.5,0,0,0-2.71-3.45c-.57-.29-1.18-.55-1.86-.83a5.68,5.68,0,0,1-2.88-2.39,4.06,4.06,0,0,0-1-.77l-.14-.09C77,31.56,69,28.74,60.06,25.82l-.62-.2A59,59,0,0,1,48.08,21a58.43,58.43,0,0,0-16.89-6.19c-4.73-1.05-9.34-2.11-13.69-3.17-1.05-.25-2.08-.57-3.08-.88s-1.7-.53-2.54-.75a3.13,3.13,0,0,0-2.83.39,3.26,3.26,0,0,0-.94,2.82s0,.1,0,.16l0,.14L9.23,24.61q1.35,13.61,2.71,27.21c.1,1,.22,2.07.33,3.11A84,84,0,0,1,13,69.36c-.14,2.25-.19,4.57-.24,6.81,0,.68,0,1.35,0,2l.16,1.38c0,.36.08.72.13,1.07.29,2.14,1.33,3.07,3.47,3.11a10.93,10.93,0,0,0,1.91-.12A52.1,52.1,0,0,1,31,83.15a17.28,17.28,0,0,0,1.93,0Z"
+       id="path8" />
+    <text
+       class="cls-2"
+       transform="translate(26.29 62.72)"
+       id="text10">Dolgoreh</text>
+  </g>
+</svg>

test_data/src/img/author_ichimuraMisako.svg

@@ -0,0 +1,22 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 138 206">
+    <defs>
+        <style>
+            .cls-1 {
+                fill: #b4b4b4;
+            }
+
+            .cls-2 {
+                font-size: 16.47px;
+                fill: #231f20;
+                font-family: ArialMT, Arial;
+            }
+            .shape{fill:none;}
+        </style>
+    </defs>
+    <g id="ichimuraMisako">
+        <path class="shape" d="M51 3 80 0 130 54 138 158 79 206 4 188 0 72 51 3" />
+        <path
+            d="M75.2,195.65a7,7,0,0,1-3.44-1,13.19,13.19,0,0,1-2.69-1.95,20.56,20.56,0,0,0-9.9-5.36c-2.29-.52-4.57-1.16-6.77-1.78s-4.52-1.26-6.79-1.78a89.27,89.27,0,0,0-19.19-2.15c-3.72,0-6.78-.14-9.64-.37a17.42,17.42,0,0,1-3.91-.92l-.72-.23A5.66,5.66,0,0,1,8.27,176l-.08-.35a28.53,28.53,0,0,1-1-6A171.39,171.39,0,0,1,8.44,145c.37-3.21.68-6.5,1-9.67.33-3.49.67-7.1,1.1-10.64,1.27-10.64,1.24-21.18,1.09-31.07,0-2.27-.06-4.54-.08-6.81,0-3.3-.06-6.71-.13-10a8.56,8.56,0,0,1,2.46-6.33,39.44,39.44,0,0,0,4.9-6.48A224,224,0,0,1,38.6,36.43,129.74,129.74,0,0,0,48.69,22c1.4-2.26,3-4.46,4.46-6.58l1.07-1.52a14.27,14.27,0,0,1,1.6-1.83l.28-.29c2.81-2.9,5.72-4,8.89-3.23a5.34,5.34,0,0,1,.39-.44,5.51,5.51,0,0,1,7.78-.42,48.32,48.32,0,0,1,9.67,10.7,35,35,0,0,0,9.84,10.16c1,.73,2.07,1.5,3.06,2.24L97.37,32a44.75,44.75,0,0,1,12,13.18c1.29,2.14,2.7,4.32,4.34,6.67a31.59,31.59,0,0,0,7.4,7.51A6.32,6.32,0,0,1,124,65a260.76,260.76,0,0,0,1.26,26.25c1.43,17.42,2,35.94,1.77,60.05,0,3.85-1.29,5.55-5,6.73a11.09,11.09,0,0,0-1.79.84,38.09,38.09,0,0,0-10.45,7.66A50.23,50.23,0,0,1,98.21,176a54.22,54.22,0,0,0-16,14.73,23.19,23.19,0,0,1-2.43,2.9A6.39,6.39,0,0,1,75.2,195.65ZM63.11,11.08c-1.72,0-3.33.85-5,2.61l-.29.3a12.72,12.72,0,0,0-1.32,1.49L55.39,17c-1.48,2.09-3,4.25-4.37,6.45a133.62,133.62,0,0,1-10.3,14.72,221.48,221.48,0,0,0-19.6,27.16,42,42,0,0,1-5.25,6.93,5.85,5.85,0,0,0-1.73,4.41c.08,3.36.11,6.78.14,10.08,0,2.27,0,4.53.07,6.8.15,9.54.19,20.63-1.11,31.43-.42,3.51-.76,7.1-1.09,10.58-.3,3.19-.61,6.48-1,9.73A170.17,170.17,0,0,0,9.9,169.58a26.79,26.79,0,0,0,.95,5.43l.09.35a2.88,2.88,0,0,0,2,2.15l.74.23a15.46,15.46,0,0,0,3.29.81c2.79.22,5.79.34,9.43.36a91.54,91.54,0,0,1,19.79,2.22c2.33.53,4.66,1.18,6.92,1.81s4.42,1.24,6.64,1.75A23.15,23.15,0,0,1,71,190.75a11,11,0,0,0,2.15,1.54,3.53,3.53,0,0,0,4.68-.6,20.88,20.88,0,0,0,2.13-2.56A57.21,57.21,0,0,1,96.8,173.66a47.33,47.33,0,0,0,10.93-9,40.66,40.66,0,0,1,11.17-8.24,13.64,13.64,0,0,1,2.27-1.05c2.55-.82,3-1.47,3.06-4.13.21-24-.33-42.47-1.76-59.81a259.33,259.33,0,0,1-1.26-26.52,3.63,3.63,0,0,0-1.66-3.32,34.3,34.3,0,0,1-8-8.17c-1.67-2.4-3.13-4.64-4.44-6.83A42.23,42.23,0,0,0,95.75,34.22L94.09,33c-1-.73-2-1.49-3-2.2a37.67,37.67,0,0,1-10.6-11A45.56,45.56,0,0,0,71.36,9.76a2.75,2.75,0,0,0-4,.25c-.17.18-.32.37-.49.58s-.2.26-.32.4l-.6.73-.89-.3A6,6,0,0,0,63.11,11.08Z" />
+        <text class="cls-2" transform="translate(33.2 109.6)">Ichimura <tspan x="7.78" y="19.76">Misako</tspan></text>
+    </g>
+</svg>

test_data/src/img/author_insookBae.svg

@@ -0,0 +1,22 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 135.52">
+    <defs>
+        <style>
+            .cls-1 {
+                fill: #c1c1c1;
+            }
+
+            .cls-2 {
+                font-size: 14.27px;
+                fill: #231f20;
+                font-family: ArialMT, Arial;
+            }
+            .shape{fill:none;}
+        </style>
+    </defs>
+    <g id="insookBae">
+        <path class="shape" d="M7.13 4.75 124.23 0 170 64.79 170 82.03 101.05 135.52 0 133.15 7.13 4.75" /><text
+            class="cls-2" transform="translate(38.93 67.37)">Insook Bae</text>
+        <path
+            d="M90.11,127.35H90c-3.51-.06-7.07-.19-10.52-.32H79c-1.06,0-2.15,0-3.21-.06a57.17,57.17,0,0,1-7.91-.46,95.58,95.58,0,0,0-15.67-.65c-2.56,0-5.2.06-7.82,0-6.11-.15-12.44-.34-18.8-.56-3.25-.11-6.53-.28-9.71-.45h-.22a20.5,20.5,0,0,1-2.7-.32,7.24,7.24,0,0,1-6-7,28.38,28.38,0,0,1,1.72-10.82,45.28,45.28,0,0,0,2.65-15c0-2.21,0-4.58.19-6.92.63-9.6.52-19.41.41-28.89-.08-6.41-.16-13,0-19.59.13-5.28.46-10.63.79-15.81l.2-3.23a20.6,20.6,0,0,1,.83-4.19,6.61,6.61,0,0,1,6.92-5.37c3.7,0,7.46,0,11.1,0h6.39v.08l2.68,0c3.24,0,6.59-.09,9.9.07,10.43.51,21.06.32,31.35.13,3.21-.06,6.43-.12,9.65-.15,7.37-.09,14.86,0,22.1,0a26.11,26.11,0,0,1,5.11.48,10.24,10.24,0,0,1,5.83,3.62,68.35,68.35,0,0,1,4.64,6.06c2.75,4.18,5.52,8.45,8.19,12.58q3.55,5.49,7.13,11c1,1.58,2.16,3.15,3.25,4.67.78,1.08,1.55,2.15,2.31,3.25,3.37,4.9,7.11,10.7,8.88,17.61a33.08,33.08,0,0,1,1.17,8.82,9,9,0,0,1-4.25,7.91,72,72,0,0,1-6.59,3.81,64.29,64.29,0,0,0-13.58,9.24,61.32,61.32,0,0,1-10.83,7.49,47.86,47.86,0,0,0-13.57,11,16.13,16.13,0,0,1-2.71,2.53,74.83,74.83,0,0,1-15.72,9A7.85,7.85,0,0,1,90.11,127.35Zm-33.46-5.11a78.26,78.26,0,0,1,11.79.73,54,54,0,0,0,7.41.42c1.08,0,2.2,0,3.3.07h.44c3.43.12,7,.25,10.45.31a4.22,4.22,0,0,0,1.68-.31,70.79,70.79,0,0,0,15-8.6,12.24,12.24,0,0,0,2.12-2,51.44,51.44,0,0,1,14.56-11.77,57.52,57.52,0,0,0,10.21-7,67.9,67.9,0,0,1,14.34-9.75,70.11,70.11,0,0,0,6.26-3.63,5.49,5.49,0,0,0,2.62-5,29.94,29.94,0,0,0-1.06-7.89c-1.46-5.7-4.4-10.71-8.37-16.47-.74-1.07-1.5-2.13-2.26-3.19-1.11-1.55-2.26-3.15-3.34-4.79q-3.58-5.47-7.14-11c-2.67-4.12-5.43-8.39-8.18-12.56a63.22,63.22,0,0,0-4.4-5.73,6.68,6.68,0,0,0-3.8-2.42,22.76,22.76,0,0,0-4.37-.4c-7.28,0-14.75-.08-22.09,0-3.21,0-6.42.1-9.63.16-10.34.19-21,.38-31.59-.13-3.2-.16-6.49-.12-9.67-.08-1.5,0-3,0-4.5,0H34.61v-.08H31.76c-3.63,0-7.38,0-11.07,0-2,0-3,.73-3.5,2.73a17.78,17.78,0,0,0-.71,3.48l-.2,3.23c-.33,5.14-.66,10.46-.78,15.68-.15,6.47-.07,13.07,0,19.46.11,9.55.23,19.42-.41,29.16-.15,2.25-.17,4.55-.19,6.72a48.77,48.77,0,0,1-2.85,16.17,24.86,24.86,0,0,0-1.52,9.45A3.63,3.63,0,0,0,13.65,121a16.46,16.46,0,0,0,2.21.27h.23c3.16.17,6.43.34,9.64.45,6.35.21,12.67.4,18.77.56,2.55.07,5.16,0,7.69,0C53.66,122.26,55.15,122.24,56.65,122.24Z" />
+    </g>
+</svg>

test_data/src/img/author_jaeShin.svg

@@ -0,0 +1,21 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 154 84">
+    <defs>
+        <style>
+            .cls-1 {
+                fill: #9d9d9d;
+            }
+
+            .cls-2 {
+                font-size: 16.47px;
+                fill: #231f20;
+                font-family: ArialMT, Arial;
+            }
+            .shape{fill:none;}
+        </style>
+    </defs>
+    <g id="jaeShin">
+        <path class="shape" d="M154 20 137 84 44 78 0 35 0 26 105 0 154 20" />
+        <path
+            d="M132.94,78.35l-1.37-.13-3.25-.32c-2.27-.23-4.41-.44-6.57-.6l-4.88-.38c-7.56-.58-15.37-1.17-23.05-1.65-5.93-.37-12-.67-17.81-1-3.8-.19-7.59-.38-11.38-.59a48,48,0,0,1-5-.6,7,7,0,0,1-2.39-.85c-2.8-1.63-3.74-1.49-5.88.87a2.38,2.38,0,0,1-.87.59l-.18.08-1,.54L47.21,72.5,44.35,70C35,61.6,27,55,19.21,49A61,61,0,0,1,8.73,38.43c-.42-.51-1.67-2.08-1.09-3.81.38-1.15,1.44-1.95,3.13-2.38a45.09,45.09,0,0,1,6.15-1.19,108.7,108.7,0,0,0,17.63-3.86c3.45-1,7-1.83,10.39-2.64l4.89-1.19,5.1-1.3,2.38-.6,1.78-.5a27,27,0,0,1,4.3-1c7.52-.89,14.87-3.27,22-5.58l.38-.12c2.35-.77,4.72-1.73,7-2.65,1.31-.53,2.62-1.06,3.94-1.56l.16-.06a5.78,5.78,0,0,1,3-.54,4.3,4.3,0,0,0,4.36-1.36l.71-.85,1.06.3,4.49,1.28c3.37,1,6.56,1.87,9.82,2.76,4.48,1.23,9,2.43,13.44,3.64l5.22,1.4.28,0a3,3,0,0,1,1.92.84c1.3,1.43,3.16,1.9,5.32,2.45l1.33.34v1.38a22.38,22.38,0,0,1-2.2,8.41c-2.75,6.43-4.37,13.33-5.79,19.84-.55,2.51-1.09,5-1.64,7.55-1,4.58-2,9.31-3.06,14a36.18,36.18,0,0,1-1.2,3.94c-.2.56-.39,1.11-.57,1.67ZM54.37,67.77A9.4,9.4,0,0,1,59,69.3a3.69,3.69,0,0,0,1.2.43c1.67.26,3.16.49,4.63.57l11.36.58c5.85.3,11.9.6,17.85,1,7.71.47,15.53,1.07,23.1,1.65l4.88.37c2.2.17,4.36.39,6.65.62l1.89.18.15-.43a33.52,33.52,0,0,0,1.1-3.56c1-4.64,2.06-9.36,3-13.93.54-2.52,1.09-5,1.64-7.57,1.46-6.67,3.12-13.74,6-20.45a22.62,22.62,0,0,0,1.81-5.81,11.63,11.63,0,0,1-5.4-2.85h-.08a4.61,4.61,0,0,1-.72-.13l-5.22-1.4q-6.74-1.8-13.46-3.64c-3.27-.9-6.47-1.81-9.85-2.77l-3.51-1a7.8,7.8,0,0,1-6.73,1.72,4.45,4.45,0,0,0-1.24.36l-.16.06c-1.3.49-2.59,1-3.88,1.53-2.35,1-4.77,1.93-7.24,2.73l-.38.12c-7.26,2.36-14.77,4.8-22.63,5.73a24.23,24.23,0,0,0-3.74.88c-.63.19-1.26.37-1.89.53l-2.38.61-5.12,1.3c-1.64.41-3.28.8-4.92,1.19-3.38.81-6.87,1.65-10.25,2.61a112,112,0,0,1-18.19,4,42.53,42.53,0,0,0-5.69,1.11,3.37,3.37,0,0,0-.57.19,3.87,3.87,0,0,0,.36.52,57.42,57.42,0,0,0,9.9,10c7.87,6,15.92,12.71,25.34,21.12l2.85,2.54.13.11A6.77,6.77,0,0,1,54.37,67.77Z" />
+        <text class="cls-2" transform="translate(58.8 48.65)">Jae Shin</text></g>
+</svg>