gnusocialjp
/
SocialCiter


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
							<!DOCTYPE html>
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8" />
    <meta name="author" content="SENOO, Ken" />
    <title>Social Citer</title>
    <link rel="shortcut icon" href="#" />
  </head>
  <body>
    <h1>Social Citer</h1>
    <p>Format social post for citation. Currently support Mastodon/Misskey/Twitter (for GNU social only and except for media)/Bluesky API.</p>
    <p><a href="https://notabug.org/gnusocialjp/socialciter">Repository</a>/License=CC0. <a href="https://web.gnusocial.jp/post/2023/01/01/866/">Introduction</a>. <a href="https://socialciter.gnusocial.jp">Site</a>.</p>
    <main>
      <section>
        <h1>Form</h1>
        <form>
          <fieldset>
            <legend>Input</legend>
            <p><input id="input" type="text" placeholder="post URL" value="" style="width:100%"/></p>
            <p><button id="button" type="button">Go&amp;Copy</button>
            <input id="handle" name="username" type="text" placeholder="handle" value="senooken.bsky.social" style="width:15em" autocomplete="on" />
            <input id="password" name="password" type="password" placeholder="password" value="" style="width:15em" autocomplete="on" /> (for Bluesky)
            </p>
          </fieldset>
        </form>
        <form>
          <fieldset>
            <legend>Output</legend>
            <textarea id="output" placeholder="Output here" style="width:100%"></textarea>
          </fieldset>
        </form>
        <form>
          <fieldset>
            <legend>View</legend>
            <output id="view">
              <blockquote style="background:rgb(99,100,255);background-image:linear-gradient(hsla(0,0%,100%,0.5),hsla(0,0%,100%,0.5))">
                <article>
                  <header style="display:flex;line-height:1.5">
                    <img referrerpolicy="no-referrer" alt="avatar" src="" style="width:4.5em" />
                    <div>
                      <div><a href="#">YYYY-mm-ddTHH:MM:SS.fffZ</a></div>
                      <div>display name|<a href="#">username@host</a></div>
                      <div><a href="#">replying to</a> display name|<a href="#">username@host</a></div>
                    </div>
                  </header>
                  <main>contents</main>
                  <footer><img referrerpolicy="no-referrer" alt="attachments" src="" /></footer>
                </article>
              </blockquote>
            </output>
          </fieldset>
        </form>
      </section>
      <section>
        <h1>Example</h1>
        <ul>
          <li><a href="https://mstdn.jp/@senooken/109607459358722821">Mastodon</a></li>
          <li><a href="https://misskey.io/notes/9a85p8ho8t">Misskey</a></li>
          <li><a href="https://gnusocial.jp/notice/2354517">GNU social</a></li>
          <li><a href="https://bsky.app/profile/senooken.bsky.social/post/3jtsnogl2je2g">Bluesky</a></li>
        </ul>
      </section>
    </main>
    <script src="main.js"></script>
  </body>
</html>