about.html

<!--
Copyright (c) 2018 Eai
Released under the MIT license.
-->
<script>
    document.title = "About more - PCGamer Social";
</script>
<div id="activity-embed">
</div>
<script>
    {
        // Config Begin.
        const domain = "pcgamer.social";
        const showDomain = false;
        // Config End.
        const activityEmbed = document.getElementById("activity-embed");
        const isLight = document.querySelectorAll(`link[rel="stylesheet"]`)[1].href.match(/light/);
        let theme;
        if (isLight) {
            theme = "light";
        } else {
            theme = "dark";
        }
        const html = `<iframe src="https://eai04191.github.io/Mastodon-Activity-Embed/embed.html?domain=${domain}&showDomain=${Number(showDomain)}&theme=${theme}" frameborder="0" scrolling="no"></iframe>`;
        activityEmbed.innerHTML = html;
    }
</script>
</div>
</div>
</div>

<style>
    .rich-formatting {
        line-height: 0;
        padding-right: 0;
    }

    #activity-embed iframe {
        width: 100%;
        height: 164px;
    }

    .column-fullwidth {
        grid-column: 1/3;
    }
    
</style>
<style>
    .rich-formatting hr.spacer {
        margin: 30px 0;
    }

    .rich-formatting hr.spacer.small {
        margin: 11px 0;
    }


    .qa *::before {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 2em;
        filter: opacity(0.3);
        font-weight: 700;
    }

    .qa .question::before {
        content: "Q";
    }

    .qa .answer::before {
        content: "A";
    }

    .qa .question>*,
    .qa .answer>* {
        margin-left: 2.5em;
    }

    .qa .question p,
    .qa .answer p {
        margin-bottom: 5px;
    }

    .qa .question h3,
    .qa .answer h3 {
        margin-top: 20px;
    }

    .qa .question ul,
    .qa .answer ul {
        margin-bottom: 20px;
        margin-left: 4em;
    }

    .qa .question,
    .qa .answer {
        position: relative;
        margin-bottom: 12px;
    }

    .qa hr {
        height: 1px;
        border: 0;
        margin: 10px 0;
    }

    #netdata-badges {
        position: relative;
        margin: 12px 0;
    }
    #netdata-badges a {
        text-decoration: none;
    }
    #netdata-badges div {
        display: flex;
        flex-wrap: wrap;
    }
    #netdata-badges h3 {
        width: 125px;
        margin: 10px 0;
        line-height: 20px;
    }
    #netdata-badges embed {
        height: 20px;
        margin: 10px 2px;
    }
    #netdata-link {
        position: absolute;
        bottom: 0;
        right: 0;
    }
</style>

<div class="column-fullwidth">
    <div class="box-widget">
        <div class="rich-formatting" style="line-height: 30px;" id="emoji-showcase">
            <style>
                #emoji-showcase a {
                    text-decoration: none;
                    cursor: pointer;
                }

                #emoji-showcase .invisible {
                    display: none;
                }

                #emoji-showcase .emoji-container {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                #emoji-showcase .emoji-container .emoji {
                    width: 5rem;
                    height: 5rem;
                    margin-right: 1em;
                    flex-shrink: 0;
                }

                #emoji-showcase .emoji-container .info {
                    display: flex;
                    flex-direction: column;
                }

                #emoji-showcase .emoji-container .info p {
                    margin: 0;
                }

                #emoji-showcase .emoji-container .info .name {
                    font-size: 1.8em;
                    font-weight: 500;
                    word-break: break-all;
                }

                #emoji-showcase .emoji-container .info .counter .emoji-index {
                    font-size: 1.5em;
                }

                #emoji-showcase .emoji-container .info .counter .separator {
                    margin: 0 0.5em;
                }

                #emoji-showcase .emoji-container .info .counter .emojis-count {
                    font-size: 1em;
                }

                #emoji-showcase #all-emoji-container {
                    display: grid;
                    grid-template-columns: 50% 50%;
                    margin-top: 3em;
                }

                #emoji-showcase #all-emoji-container .emoji-container {
                    justify-content: start;
                    margin-bottom: 1em;
                }

                #emoji-showcase #all-emoji-container .emoji-container .emoji {
                    width: 3rem;
                    height: 3rem;
                    margin-right: 0.7em;
                }

                #emoji-showcase #all-emoji-container .emoji-container .info .name {
                    font-size: 1.2em;
                }

                #emoji-showcase #all-emoji-container .emoji-container .info .counter .emoji-index {
                    font-size: 1em;
                }

                #emoji-showcase #all-emoji-container .emoji-container .info .counter .separator {
                    margin: 0 0.25em;
                }

                #emoji-showcase #all-emoji-container .emoji-container .info .counter .emojis-count {
                    font-size: 0.7em;
                }

                #emoji-showcase.dark .container .info .name {
                    color: #d9e1e8;
                }

                #emoji-showcase.light .container .info .name {
                    color: #282c37;
                }

                #emoji-showcase .fadeIn {
                    animation: fadeIn 0.5s ease 0s 1 normal;
                    -webkit-animation: fadeIn 0.5s ease 0s 1 normal;
                }

                @keyframes fadeIn {
                    0% {
                        opacity: 0;
                    }
                    100% {
                        opacity: 1;
                    }
                }
            </style>
            <h1>ランダム絵文字ショーケース</h1>
            <div class="emoji-container">
                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="emoji">
                <div class="info">
                    <p><span class="name"></span></p>
                    <p class="counter">
                        <span class="emoji-index"></span>
                        <span class="separator">/</span>
                        <span class="emojis-count"></span>
                    </p>
                </div>
            </div>
            <p style="text-align: right;">
                <a id="see-all-emojis">全ての絵文字を見る...</a>
                <a id="close-all-emojis" class="invisible">全ての絵文字を閉じる</a>
            </p>
        </div>
        <script>
            {
                themeDetect();
                var domain = window.location.host;
                getEmojiList()
                    .then(data => loop(data))
                    .catch(error => console.error(error));

                function themeDetect() {
                    const isLight = document.querySelectorAll(`link[rel="stylesheet"]`)[1].href.match(/light/);
                    const elem = document.getElementById("emoji-showcase");
                    if (isLight) {
                        elem.classList.add("light");
                    } else {
                        elem.classList.add("dark");
                    }
                }

                function getEmojiList() {
                    return fetch(`https://${domain}/api/v1/custom_emojis`, {
                        method: "GET"
                    })
                        .then(response => response.json())
                        .catch(error => console.error(error));
                }

                function loop(obj) {
                    const random = getRandomEmoji(obj);
                    setEmoji(random.emoji, random.index, random.emojisCount);
                    setTimeout(function () { loop(obj) }, 5000);
                }

                function getRandomEmoji(obj) {
                    const emojisCount = Object.keys(obj).length;
                    const index = Math.floor(Math.random() * emojisCount);
                    const emoji = obj[index];
                    // console.log(emoji);
                    return { emoji, index, emojisCount };
                }

                function setEmoji(obj, num, max) {
                    const container_elem = document.querySelector("#emoji-showcase > .emoji-container");
                    const img_elem = document.querySelector("#emoji-showcase > .emoji-container img");
                    const name_elem = document.querySelector("#emoji-showcase > .emoji-container .name");
                    const num_elem = document.querySelector("#emoji-showcase > .emoji-container .counter .emoji-index");
                    const max_elem = document.querySelector(" #emoji-showcase > .emoji-container .counter .emojis-count");
                    img_elem.src = obj.url;
                    name_elem.innerText = `:${obj.shortcode}:`;
                    num_elem.innerText = (num + 1).toLocaleString();
                    max_elem.innerText = max.toLocaleString();
                    addFade(container_elem);
                }

                function addFade(elem) {
                    // .fadeInを追加する
                    elem.classList.add("fadeIn");
                    // クローンをつくる
                    const clone = elem.cloneNode(true);
                    // オリジナルの真下に入れる
                    elem.insertAdjacentElement("afterend", clone);
                    // 初めのfadeInを削除する
                    document.querySelectorAll(".fadeIn")[0].remove();
                }

                document.getElementById("see-all-emojis").addEventListener("click", function (event) {
                    function addEmoji(emoji, emojiIndex, emojisCount) {
                        let emojiContainer = document.getElementById("all-emoji-container");
                        if (!emojiContainer) {
                            const container = document.querySelector("#emoji-showcase > .emoji-container");
                            let emojiContainer = document.createElement('div');
                            container.insertAdjacentHTML("afterend", `<div id="all-emoji-container" class="fadeIn"></div>`);
                        }
                        emojiContainer = document.getElementById("all-emoji-container");
                        emojiContainer.insertAdjacentHTML("beforeend",
                            `<div class="emoji-container">
                            <img src="${emoji.url}" class="emoji">
                            <div class="info">
                                <p><span class="name">:${emoji.shortcode}:</span></p>
                                <p class="counter">
                                    <span class="emoji-index">${(Number(emojiIndex) + 1).toLocaleString()}</span >
                                    <span class="separator">/</span>
                                    <span class="emojis-count">${emojisCount.toLocaleString()}</span>
                                </p >
                            </div >
                        </div >`);
                    }
                    getEmojiList()
                        .then(function (emojis) {
                            const emojisCount = Object.keys(emojis).length;
                            Object.keys(emojis).forEach(function (emojiIndex) {
                                addEmoji(emojis[emojiIndex], emojiIndex, emojisCount);
                            });
                        })
                        .catch(error => console.error(error));
                    this.classList.add("invisible");
                    document.getElementById("close-all-emojis").classList.remove("invisible");
                }, false);

                document.getElementById("close-all-emojis").addEventListener("click", function (event) {
                    document.getElementById("all-emoji-container").remove();
                    this.classList.add("invisible");
                    document.getElementById("see-all-emojis").classList.remove("invisible");
                }, false);
            }
        </script>
    </div>
</div>


<div class="column-fullwidth">
    <div class="box-widget">
        <div class="rich-formatting" style="line-height: 30px;">

            <p></p>

            <h1>PCGamer Socialへようこそ！</h1>

            <p>PCでゲームをする人たちがゆるく集うMastodonインスタンスです。</p>



            <hr class="spacer">



            <h2><i class="fa fa-fw fa-plus-square-o" aria-hidden="true"></i>追加済みの独自機能・設定</h2>

            <h3><i class="fa fa-fw fa-user" aria-hidden="true"></i>プロフィール</h3>
            <ul>
                <li>表示名の最大文字数が30から
                    <em>50</em> に
                </li>
                <li>ユーザー名の最大文字数が30から
                    <em>50</em> に
                </li>
                <li>プロフィールの最大文字数が160から
                    <em>500</em> に
                </li>
                <li>
                    プロフィールのヘッダー画像のアスペクト比が自由
                </li>
                <li>
                    たくさんのゲーム関連のカスタム絵文字
                </li>
            </ul>

            <hr class="spacer small">

            <h3><i class="fa fa-fw fa-envelope-o" aria-hidden="true"></i>投稿</h3>
            <ul>
                <li>
                    4K解像度のスクリーンショットをリサイズ無しで投稿可能
                </li>
            </ul>



            <hr class="spacer">



            <h2><i class="fa fa-fw fa-wrench " aria-hidden="true"></i>追加中の独自機能</h2>

            <h3><i class="fa fa-fw fa-cube" aria-hidden="true"></i>Bot</h3>
            <ul>
                <li>
                    Steamゲームのアイコンを絵文字として自動追加機能
                </li>
            </ul>

            <hr class="spacer small">

            <p>その他機能リクエストは<a href="https://pcgamer.social/@Eai">@Eai</a> まで！</p>



            <hr class="spacer">



            <h2><i class="fa fa-fw fa-flag-o" aria-hidden="true"></i>インスタンスルール</h2>

            <h3><i class="fa fa-fw fa-exclamation" aria-hidden="true"></i>大事なこと</h3>
            <ul>
                <li>📜 法律を守る</li>
                <li>🤟 人に優しく</li>
                <li>🏠 家に帰ったら手洗いうがい</li>
                <li>🌞 早寝早起き朝ごはん</li>
                <li>🤝 みんななかよく</li>
            </ul>


            <hr class="spacer small">


            <h3><i class="fa fa-fw fa-times" aria-hidden="true"></i>禁止行為</h3>
            <ul>
                <li>サーバーに過度な負荷をかけることを目的とした大量のフォロー・お気に入り・ブースト・投稿を禁止します。</li>
                <li>日本法に反する行為や唆す内容の投稿を禁止します。</li>
                <li>宗教や人種、性などを差別する支持や主張する投稿を禁止します。</li>
                <li>CWを用いない過度なゴア、わいせつな内容の投稿を禁止します。</li>
                <li>他人へARENAへのCALLを強要を禁止します。</li>
            </ul>

            <hr class="spacer small">

            <p>これらの禁止行為が確認された場合、直ちに当該ユーザーのアカウントを停止します。また、警察や裁判所などの機関から要請があった場合は収集している情報を開示します。<br>
                収集している情報の内容については<a href="https://pcgamer.social/terms">プライバシーポリシー</a>を確認してください。
            </p>



            <hr class="spacer">



            <h2><i class="fa fa-fw fa-file-image-o" aria-hidden="true"></i>カスタム絵文字の追加について</h2>

            <p>PCゲームに関連するソフトウェア・メーカー・プラットフォーム・ゲーム・その他のアイコンをカスタム絵文字として追加しています。</p>
            <p>現在1,000個追加を目標にしています。追加してほしい絵文字があれば
                <a href="https://pcgamer.social/@Eai">@Eai</a> までご連絡ください。
            </p>
            <!-- <p>
                256 x 256pxの画像を添えて申請してくれると大変助かります。ない場合は
                <a href="https://pcgamer.social/@Eai">@Eai</a>が頑張って作ります。
            </p>
            <p>絵文字の画像を作るお手伝いをしてくれる方も随時募集しています。</p> -->



            <hr class="spacer">



            <h2><i class="fa fa-fw fa-question" aria-hidden="true"></i>よくありそうな質問</h2>

            <p>ないかもしれない。</p>

            <div class="qa">
                <div class="question">
                    <p>
                        どんなことを話せばいいですか？
                    </p>
                </div>
                <div class="answer">
                    <p>
                        なにを話しても自由です！
                    </p>
                    <p>
                        管理者としてはFPS･TPS･RTS･ADV･RPG･洋ゲー･和ゲー･フリーゲーム･自作PC･デバイス･とかとかとか……そこら辺の話題を想定しています。
                    </p>
                </div>
                <div class="question">
                    <p>
                        最初にフォローしているアカウントはなんですか？
                    </p>
                </div>
                <div class="answer">
                    <p>
                        <a href="https://pcgamer.social/@PotatOS">@PotatOS</a> はこのインスタンスの更新情報に関する
                        <a href="https://pcgamer.social/@Eai">@Eai</a> のトゥートをBT（ブースト）するアカウントです。
                    </p>
                    <p>
                        フォローを外しても問題ありませんが、フォローしておいたほうがメンテナンスの時間や更新されたことがわかって便利だと思います。
                    </p>
                </div>
                <hr>
                <div class="question">
                    <p>
                        えっちなゲームのことを話してもいいですか？
                    </p>
                </div>
                <div class="answer">
                    <p>
                        えっちなゲームはeSportsなのでOKです。
                    </p>
                    <p>
                        えっちな（露出の激しい・R-15/R-18に分類されるもの）絵や文を投稿する際にはCW（コンテンツワーニング）や閲覧注意タグをつけるのを忘れないでください。最悪の場合サイレンス対象になります。
                    </p>
                </div>
                <hr>
                <div class="question">
                    <p>
                        人来るんですか？人いるんですか？
                    </p>
                </div>
                <div class="answer">
                    <p>
                        きてね。
                    </p>
                </div>
                <hr>
                <hr>
                <div class="question">
                    <p>
                        迷惑行為を受けたら、禁止されている投稿を見つけたらどうすればいいですか？
                    </p>
                </div>
                <div class="answer">
                    <p>
                        投稿の通報からご連絡ください。
                    </p>
                </div>
                <hr>
                <div class="question">
                    <p>
                        Botアカウントを作ってもいいですか？
                    </p>
                </div>
                <div class="answer">
                    <p>
                        OKです。ただし、下記のBotアカウントルールに従ってください。
                    </p>
                    <h3>Botアカウントルール</h3>
                    <ul>
                        <li>
                            プロフィールへBotバッジをつけること
                        </li>
                        <li>
                            Public（公開）トゥートをしないこと
                            <br> Botのトゥートでローカルタイムラインが埋まってしまいます。Unlisted（未収載）やPrivate（フォロワー限定）、Direct（ダイレクト）を使用してください。
                        </li>
                        <li>
                            フォロワー以外へ能動的にフォロー・お気に入り・ブースト・返信をしないこと
                            <br> Botへの返信に対しての反応ならOKです。
                        </li>
                    </ul>
                    <p>あなたのBotをお待ちしています。</p>
                </div>
                <hr>
                <div class="question">
                    <p>
                        ソースコードはどこで公開されていますか？
                    </p>
                </div>
                <div class="answer">
                    <p>
                        GitHubの<a href="https://github.com/PCGamer-Social">PCGamer Social Organization</a>上で公開しています。
                    </p>
                </div>
            </div>

            <p>その他質問は
                <a href="https://pcgamer.social/@Eai">pcgamer.social/@Eai</a>（もしくは<a href="https://twitter.com/eai04191">twitter.com/eai04191</a>）までお気軽に。
            </p>



            <hr class="spacer">



            <h2><i class="fa fa-fw fa-tachometer" aria-hidden="true"></i>サーバー情報</h2>

            <div class="row landing-page__call-to-action" style="position: relative;">
                <div class="row">
                    <div class="row__information-board">
                        <div class="information-board__section">
                            <span>OS</span>
                            <strong>Ubuntu 18.04</strong>
                            <span>LTS</span>
                        </div>
                        <div class="information-board__section">
                            <span>vCPU</span>
                            <strong>2</strong>
                            <span>Cores</span>
                        </div>
                        <div class="information-board__section">
                            <span>RAM</span>
                            <strong>4</strong>
                            <span>GB</span>
                        </div>
                        <div class="information-board__section">
                            <span>Location</span>
                            <strong>Tokyo</strong>
                            <span>Japan</span>
                        </div>
                    </div>
                    <div class="row__mascot">
                        <div class="landing-page__mascot" style="position: absolute; left: 1rem;">
                            <a href="https://www.linode.com/?r=67f2c1a402a83cc4f1bbb918423329f315627d2d" target="_blank">
                                <img id="linode-logo" src="https://i.imgur.com/NsQLS0H.png" style="height: 100%;">
                                <script>
                                    const isLight = document.querySelectorAll(`link[rel="stylesheet"]`)[1].href.match(/light/);
                                    if (isLight) {
                                        document.getElementById("linode-logo").src = "https://i.imgur.com/nrSrJgV.png";
                                    }
                                </script>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div id="netdata-badges">
                <div>
                    <h3><i class="fa fa-fw fa-microchip" aria-hidden="true"></i>CPU</h3>
                    <embed src="https://netdata.pcgamer.social/api/v1/badge.svg?chart=system.cpu&alarm=10min_cpu_usage&label=10min%20usage&refresh=auto"
                        type="image/svg+xml" lazyload="on" />
                    <embed src="https://netdata.pcgamer.social/api/v1/badge.svg?chart=system.cpu&alarm=10min_cpu_iowait&label=10min%20iowait&refresh=auto"
                        type="image/svg+xml" lazyload="on" />
                    <embed src="https://netdata.pcgamer.social/api/v1/badge.svg?chart=system.load&alarm=load_average_5&refresh=auto"
                        type="image/svg+xml" lazyload="on" />
                </div>
                <div>
                    <h3><i class="fa fa-fw fa-tasks" aria-hidden="true"></i>MEM</h3>
                    <embed src="https://netdata.pcgamer.social/api/v1/badge.svg?chart=system.ram&alarm=ram_in_use&label=in%20use&refresh=auto"
                        type="image/svg+xml" lazyload="on" />
                    <embed src="https://netdata.pcgamer.social/api/v1/badge.svg?chart=system.swapio&alarm=30min_ram_swapped_out&labe=30min%20swapped%20out&units=%25&refresh=auto"
                        type="image/svg+xml" lazyload="on" />
                    <embed src="https://netdata.pcgamer.social/api/v1/badge.svg?chart=mem.available&value_color=blue&label=avilable&refresh=auto"
                        type="image/svg+xml" lazyload="on" />
                    <embed src="https://netdata.pcgamer.social/api/v1/badge.svg?chart=mem.committed&value_color=blue&label=comitted&refresh=auto"
                        type="image/svg+xml" lazyload="on" />
                </div>
                <div>
                    <h3><i class="fa fa-fw fa-exchange" aria-hidden="true"></i>nginx</h3>
                    <embed src="https://netdata.pcgamer.social/api/v1/badge.svg?chart=nginx_local.connections&value_color=blue&label=connections&refresh=auto"
                        type="image/svg+xml" lazyload="on" />
                    <embed src="https://netdata.pcgamer.social/api/v1/badge.svg?chart=nginx_local.requests&value_color=blue&label=requests&refresh=auto"
                        type="image/svg+xml" lazyload="on" />
                    <embed src="https://netdata.pcgamer.social/api/v1/badge.svg?chart=web_log_pcgs.response_statuses&dimensions=bad&value_color=blue&label=bad%20requests&refresh=auto"
                        type="image/svg+xml" lazyload="on" />
                </div>
                <div>
                    <h3><i class="fa fa-fw fa-cogs" aria-hidden="true"></i>Others</h3>
                    <embed src="https://netdata.pcgamer.social/api/v1/badge.svg?chart=system.uptime&value_color=blue&label=uptime&refresh=auto"
                        type="image/svg+xml" lazyload="on" />
                    <embed src="https://netdata.pcgamer.social/api/v1/badge.svg?chart=tc.world_out&dimensions=web_server&after=-86400&options=unaligned&group=sum&divide=8388608&value_color=blue&label=24h%20web%20server%20sent&units=GB&refresh=auto"
                        type="image/svg+xml" lazyload="on" />
                    <embed src="https://netdata.pcgamer.social/api/v1/badge.svg?chart=tc.world_in&dimensions=web_server&after=-86400&options=unaligned&group=sum&divide=8388608&value_color=blue&label=24h%20web%20server%20received&units=GB&refresh=auto"
                        type="image/svg+xml" lazyload="on" />
                </div>
                <div id="netdata-link">
                    <a href="https://netdata.pcgamer.social">
                        <p>Powered by <span>netdata</span>.</p>
                        <img src="https://netdata.pcgamer.social/images/netdata.svg">
                    </a>
                </div>
            </div>

            <hr class="spacer small">

            <h3><i class="fa fa-fw fa-cloud" aria-hidden="true"></i>オブジェクトストレージ</h3>

            <p>投稿された画像や動画などのメディアは
                <a href="https://wasabi.com/">Wasabi</a>でホストしています。
            </p>



            <hr class="spacer">



            <h2><i class="fa fa-fw fa-level-up" aria-hidden="true"></i>Mastodonのアップデート</h2>

            <p>タグ付きリリースを出来るだけ早くマージします。基本的にmaster追従はしませんが、面白い機能が追加されたらするかもしれません。</p>



            <hr class="spacer">



            <h2><i class="fa fa-fw fa-coffee" aria-hidden="true"></i>寄付</h2>

            <p><a href="https://blog.pcgamer.social/entry/2018/09/27/153156">寄付について - Blog PCGS</a>を参照ください。</p>



            <hr class="spacer">


            <p>このページの編集履歴は<a href="https://github.com/PCGamer-Social/config/commits/master/about.html">GitHub</a>で管理されています。</p>