akkoma-fe/docs/site/user_guide/index.html
2022-07-15 11:07:43 +01:00

669 lines
No EOL
21 KiB
HTML

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="../images/pleroma_logo_vector_bg_32.png">
<meta name="generator" content="mkdocs-1.3.0, mkdocs-material-8.3.9">
<title>General overview - Pleroma-FE Documentation</title>
<link rel="stylesheet" href="../assets/stylesheets/main.1d29e8d0.min.css">
<link rel="stylesheet" href="../assets/stylesheets/palette.cbb835fc.min.css">
<meta name="theme-color" content="#7e56c2">
<link rel="stylesheet" href="../css/extra.css">
<script>__md_scope=new URL("..",location),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
</head>
<body dir="ltr" data-md-color-scheme="" data-md-color-primary="deep-purple" data-md-color-accent="blue-grey">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#general-overview" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href=".." title="Pleroma-FE Documentation" class="md-header__button md-logo" aria-label="Pleroma-FE Documentation" data-md-component="logo">
<img src="../images/pleroma_logo_vector_nobg.svg" alt="logo">
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Pleroma-FE Documentation
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
General overview
</span>
</div>
</div>
</div>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<!--
Copyright (c) 2016-2019 Martin Donath <martin.donath@squidfunk.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
-->
<!--
Check whether the repository is hosted on one of the supported code hosting
platforms (GitHub, GitLab or Bitbucket) to show icon.
-->
<!-- Repository containing source -->
<a href="https://akkoma.dev/AkkomaGang/pleroma-fe" title="Go to repository"
class="md-source" data-md-source="">
<div class="md-source__repository">
AkkomaGang/pleroma-fe
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href=".." title="Pleroma-FE Documentation" class="md-nav__button md-logo" aria-label="Pleroma-FE Documentation" data-md-component="logo">
<img src="../images/pleroma_logo_vector_nobg.svg" alt="logo">
</a>
Pleroma-FE Documentation
</label>
<div class="md-nav__source">
<!--
Copyright (c) 2016-2019 Martin Donath <martin.donath@squidfunk.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
-->
<!--
Check whether the repository is hosted on one of the supported code hosting
platforms (GitHub, GitLab or Bitbucket) to show icon.
-->
<!-- Repository containing source -->
<a href="https://akkoma.dev/AkkomaGang/pleroma-fe" title="Go to repository"
class="md-source" data-md-source="">
<div class="md-source__repository">
AkkomaGang/pleroma-fe
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href=".." class="md-nav__link">
Introduction to Pleroma-FE
</a>
</li>
<li class="md-nav__item">
<a href="../CONFIGURATION/" class="md-nav__link">
Pleroma-FE configuration and customization for instance administrators
</a>
</li>
<li class="md-nav__item">
<a href="../HACKING/" class="md-nav__link">
Hacking, tweaking, contributing
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" checked>
<label class="md-nav__link" for="__nav_4">
User guide
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="User guide" data-md-level="1">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
User guide
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
General overview
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
General overview
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#left-column" class="md-nav__link">
Left column
</a>
</li>
<li class="md-nav__item">
<a href="#right-column" class="md-nav__link">
Right column
</a>
</li>
<li class="md-nav__item">
<a href="#top-right" class="md-nav__link">
Top right
</a>
</li>
<li class="md-nav__item">
<a href="#bottom-right" class="md-nav__link">
Bottom right
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="posting_reading_basic_functions/" class="md-nav__link">
Posting, reading, basic functions.
</a>
</li>
<li class="md-nav__item">
<a href="settings/" class="md-nav__link">
Settings
</a>
</li>
<li class="md-nav__item">
<a href="timelines/" class="md-nav__link">
Timelines
</a>
</li>
<li class="md-nav__item">
<a href="users_follow_mute_block/" class="md-nav__link">
Users: follow, mute, block
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#left-column" class="md-nav__link">
Left column
</a>
</li>
<li class="md-nav__item">
<a href="#right-column" class="md-nav__link">
Right column
</a>
</li>
<li class="md-nav__item">
<a href="#top-right" class="md-nav__link">
Top right
</a>
</li>
<li class="md-nav__item">
<a href="#bottom-right" class="md-nav__link">
Bottom right
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="general-overview">General overview<a class="headerlink" href="#general-overview" title="Permanent link">&para;</a></h1>
<blockquote>
<p>Be prepared for breaking changes, unexpected behavior and this user guide becoming obsolete and wrong.</p>
<p>If there was no insanity</p>
<p>it would be necessary to create it.</p>
<p>--Catbag</p>
</blockquote>
<p>Pleroma-FE is the default user-facing frontend for Pleroma. If your instance uses Pleroma-FE, you can access it by going to your instance (e.g. <a href="https://pleroma.soykaf.com">https://pleroma.soykaf.com</a>). After logging in you will have two columns in front of you. Here we're going to keep it to the default behaviour, but some instances swap the left and right columns. If you're on such an instance what we refer to as the left column will be on your right and vice versa.</p>
<h3 id="left-column">Left column<a class="headerlink" href="#left-column" title="Permanent link">&para;</a></h3>
<ul>
<li>first block: This section is dedicated to <a href="posting_reading_basic_functions/">posting</a></li>
<li>second block: Here you can switch between the different views for the right column.</li>
<li>Optional third block: This is the Instance panel that can be activated, but is deactivated by default. It's fully customisable by instance admins and by default has links to the Pleroma-FE and Mastodon-FE.</li>
<li>fourth block: This is the Notifications block, here you will get notified whenever somebody mentions you, follows you, repeats or favorites one of your statuses</li>
</ul>
<h3 id="right-column">Right column<a class="headerlink" href="#right-column" title="Permanent link">&para;</a></h3>
<p>This is where the interesting stuff happens! There are different views depending on what you choose in the second block of the left panel.</p>
<ul>
<li><strong>Timelines</strong> Depending on the <a href="timelines/">timeline</a> you will see different statuses, but each status has a standard structure:<ul>
<li>Profile pic, name and link to profile. An optional left-arrow if it's a reply to another status (hovering will reveal the reply-to status). Clicking on the profile pic will uncollapse the user's profile where you can find information about the account and can <a href="users_follow_mute_block/">follow, mute or block the account</a>.</li>
<li>An arrow icon on the right side allows you to open the status on the instance where it's originating from.</li>
<li>A <code>+</code> button on the rightmost side allows you to Expand/Collapse an entire discussion thread.</li>
<li>The text of the status, including mentions and attachments. If you click on a mention, it will automatically open the profile page of that person.</li>
<li>Four buttons (left to right): Reply, Repeat, Favorite and Add Reaction. The three dots next to it are a dropdown menu for extra options including simple moderation, bookmarking, deleting posts, pinning your own posts to your profile and more.</li>
</ul>
</li>
<li><strong>Interactions</strong> shows all interactions you've had with people on the network, basically same as notifications except grouped in convenient way.</li>
<li><strong>Chats</strong> is the chat feature. You can find your friends and start chatting with them. At the moment chat are only one-on-one, but once groups are introduced groupchats will also be possible.</li>
<li><strong>About</strong> is the about-page and lists the staff, the TOS, activated MRF's, and enabled features</li>
</ul>
<h3 id="top-right">Top right<a class="headerlink" href="#top-right" title="Permanent link">&para;</a></h3>
<ul>
<li>The magnifier icon opens the search screen<ul>
<li>You can search for statuses, people and hashtags.</li>
<li>You can import statuses from remote servers by pasting the url to the post in the search field.</li>
<li>If you want to search for users that your instance doesn't know about yet, you can search for them using the full <code>name@instance.tld</code> handle. You can also use the full url from their remote profile.</li>
</ul>
</li>
<li>The gear icon gives you <a href="settings/">settings</a></li>
<li>If you have admin rights, you'll see an icon that opens the admin interface</li>
<li>The last icon is to log out</li>
</ul>
<h3 id="bottom-right">Bottom right<a class="headerlink" href="#bottom-right" title="Permanent link">&para;</a></h3>
<p>On the bottom right you have the Shoutbox. Here you can communicate with people on the same instance in realtime. It is local-only, very basic and will most probably be removed once the Chats functionality allows group chats.</p>
</article>
</div>
</div>
</main>
<footer class="md-footer">
<nav class="md-footer__inner md-grid" aria-label="Footer" >
<a href="../HACKING/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Hacking, tweaking, contributing" rel="prev">
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
</div>
<div class="md-footer__title">
<div class="md-ellipsis">
<span class="md-footer__direction">
Previous
</span>
Hacking, tweaking, contributing
</div>
</div>
</a>
<a href="posting_reading_basic_functions/" class="md-footer__link md-footer__link--next" aria-label="Next: Posting, reading, basic functions." rel="next">
<div class="md-footer__title">
<div class="md-ellipsis">
<span class="md-footer__direction">
Next
</span>
Posting, reading, basic functions.
</div>
</div>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4Z"/></svg>
</div>
</a>
</nav>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "..", "features": ["tabs"], "search": "../assets/javascripts/workers/search.b97dbffb.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version.title": "Select version"}}</script>
<script src="../assets/javascripts/bundle.6c7ad80a.min.js"></script>
</body>
</html>