├── .gitignore ├── Gemfile ├── Gemfile.lock ├── README.md ├── _config.yml ├── _layouts └── default.html ├── contributing ├── frontend │ └── index.md └── index.md ├── features ├── app-settings │ ├── index.md │ ├── modal-collapsed-toots.png │ ├── modal-compose-box.png │ ├── modal-content-warnings.png │ ├── modal-general.png │ └── modal-media.png ├── collapsible-toots │ ├── collapsed-notifs.png │ ├── collapsed.png │ ├── index.md │ └── loong.png ├── colored-visibility-icons │ ├── colored.png │ └── index.md ├── doodle │ ├── doodle_1.png │ ├── doodle_2.png │ ├── doodle_3.png │ ├── doodle_controls.png │ └── index.md ├── hide-follower-count │ ├── hidden-count.png │ ├── index.md │ ├── site-settings.png │ └── user-settings.png ├── local-only-toots │ ├── compose.png │ ├── in-timeline.png │ └── index.md ├── media │ ├── cw-media.png │ ├── fullwidth.png │ ├── index.md │ ├── letterbox-off.png │ └── letterbox-on.png ├── misleading-link-highlighting │ ├── index.md │ └── misleading-link.png ├── rich-text │ ├── app-settings.png │ ├── content-type-dropdown.png │ ├── formatted-toot.png │ ├── index.md │ └── user-settings.png ├── status-data-attributes │ └── index.md ├── themes │ └── index.md └── threaded-mode │ ├── compose-reply.png │ ├── compose.png │ └── index.md ├── icon ├── android-chrome-192x192.png ├── apple-touch-icon.png ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico └── mstile-150x150.png ├── index.md ├── src ├── browserconfig.xml ├── manifest.json └── style.scss └── upstreamed-features ├── bookmarks ├── bookmarked_toot.png ├── bookmarks_column.png ├── getting_started.png └── index.md ├── filter-improvements ├── app-settings.png ├── filtered-show-why.png ├── filtered.png ├── index.md ├── show-why-collapsed.png ├── show-why-expanded.png ├── toot-added-cw.png └── toot.png ├── lists-show-replies-to ├── index.md └── settings.png ├── optional-boost-hiding ├── boost_hide.png ├── boost_show.png └── index.md ├── optional-notification-muting ├── index.md ├── mute-dialog.png ├── mute-list-hard-mute.png └── mute-list-soft-mute.png └── profile-metadata ├── detailed.png ├── index.md └── static.png /.gitignore: -------------------------------------------------------------------------------- 1 | /_site/ 2 | /.bundle/ 3 | /vendor/ 4 | /.idea/ 5 | *~ 6 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | gem 'github-pages', group: :jekyll_plugins 3 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | activesupport (4.2.10) 5 | i18n (~> 0.7) 6 | minitest (~> 5.1) 7 | thread_safe (~> 0.3, >= 0.3.4) 8 | tzinfo (~> 1.1) 9 | addressable (2.5.2) 10 | public_suffix (>= 2.0.2, < 4.0) 11 | coffee-script (2.4.1) 12 | coffee-script-source 13 | execjs 14 | coffee-script-source (1.11.1) 15 | colorator (1.1.0) 16 | commonmarker (0.17.9) 17 | ruby-enum (~> 0.5) 18 | concurrent-ruby (1.0.5) 19 | dnsruby (1.61.2) 20 | addressable (~> 2.5) 21 | em-websocket (0.5.1) 22 | eventmachine (>= 0.12.9) 23 | http_parser.rb (~> 0.6.0) 24 | ethon (0.11.0) 25 | ffi (>= 1.3.0) 26 | eventmachine (1.2.7) 27 | execjs (2.7.0) 28 | faraday (0.15.2) 29 | multipart-post (>= 1.2, < 3) 30 | ffi (1.9.25) 31 | forwardable-extended (2.6.0) 32 | gemoji (3.0.0) 33 | github-pages (188) 34 | activesupport (= 4.2.10) 35 | github-pages-health-check (= 1.8.1) 36 | jekyll (= 3.7.3) 37 | jekyll-avatar (= 0.6.0) 38 | jekyll-coffeescript (= 1.1.1) 39 | jekyll-commonmark-ghpages (= 0.1.5) 40 | jekyll-default-layout (= 0.1.4) 41 | jekyll-feed (= 0.10.0) 42 | jekyll-gist (= 1.5.0) 43 | jekyll-github-metadata (= 2.9.4) 44 | jekyll-mentions (= 1.4.0) 45 | jekyll-optional-front-matter (= 0.3.0) 46 | jekyll-paginate (= 1.1.0) 47 | jekyll-readme-index (= 0.2.0) 48 | jekyll-redirect-from (= 0.14.0) 49 | jekyll-relative-links (= 0.5.3) 50 | jekyll-remote-theme (= 0.3.1) 51 | jekyll-sass-converter (= 1.5.2) 52 | jekyll-seo-tag (= 2.5.0) 53 | jekyll-sitemap (= 1.2.0) 54 | jekyll-swiss (= 0.4.0) 55 | jekyll-theme-architect (= 0.1.1) 56 | jekyll-theme-cayman (= 0.1.1) 57 | jekyll-theme-dinky (= 0.1.1) 58 | jekyll-theme-hacker (= 0.1.1) 59 | jekyll-theme-leap-day (= 0.1.1) 60 | jekyll-theme-merlot (= 0.1.1) 61 | jekyll-theme-midnight (= 0.1.1) 62 | jekyll-theme-minimal (= 0.1.1) 63 | jekyll-theme-modernist (= 0.1.1) 64 | jekyll-theme-primer (= 0.5.3) 65 | jekyll-theme-slate (= 0.1.1) 66 | jekyll-theme-tactile (= 0.1.1) 67 | jekyll-theme-time-machine (= 0.1.1) 68 | jekyll-titles-from-headings (= 0.5.1) 69 | jemoji (= 0.10.0) 70 | kramdown (= 1.16.2) 71 | liquid (= 4.0.0) 72 | listen (= 3.1.5) 73 | mercenary (~> 0.3) 74 | minima (= 2.5.0) 75 | nokogiri (>= 1.8.2, < 2.0) 76 | rouge (= 2.2.1) 77 | terminal-table (~> 1.4) 78 | github-pages-health-check (1.8.1) 79 | addressable (~> 2.3) 80 | dnsruby (~> 1.60) 81 | octokit (~> 4.0) 82 | public_suffix (~> 2.0) 83 | typhoeus (~> 1.3) 84 | html-pipeline (2.8.4) 85 | activesupport (>= 2) 86 | nokogiri (>= 1.4) 87 | http_parser.rb (0.6.0) 88 | i18n (0.9.5) 89 | concurrent-ruby (~> 1.0) 90 | jekyll (3.7.3) 91 | addressable (~> 2.4) 92 | colorator (~> 1.0) 93 | em-websocket (~> 0.5) 94 | i18n (~> 0.7) 95 | jekyll-sass-converter (~> 1.0) 96 | jekyll-watch (~> 2.0) 97 | kramdown (~> 1.14) 98 | liquid (~> 4.0) 99 | mercenary (~> 0.3.3) 100 | pathutil (~> 0.9) 101 | rouge (>= 1.7, < 4) 102 | safe_yaml (~> 1.0) 103 | jekyll-avatar (0.6.0) 104 | jekyll (~> 3.0) 105 | jekyll-coffeescript (1.1.1) 106 | coffee-script (~> 2.2) 107 | coffee-script-source (~> 1.11.1) 108 | jekyll-commonmark (1.2.0) 109 | commonmarker (~> 0.14) 110 | jekyll (>= 3.0, < 4.0) 111 | jekyll-commonmark-ghpages (0.1.5) 112 | commonmarker (~> 0.17.6) 113 | jekyll-commonmark (~> 1) 114 | rouge (~> 2) 115 | jekyll-default-layout (0.1.4) 116 | jekyll (~> 3.0) 117 | jekyll-feed (0.10.0) 118 | jekyll (~> 3.3) 119 | jekyll-gist (1.5.0) 120 | octokit (~> 4.2) 121 | jekyll-github-metadata (2.9.4) 122 | jekyll (~> 3.1) 123 | octokit (~> 4.0, != 4.4.0) 124 | jekyll-mentions (1.4.0) 125 | html-pipeline (~> 2.3) 126 | jekyll (~> 3.0) 127 | jekyll-optional-front-matter (0.3.0) 128 | jekyll (~> 3.0) 129 | jekyll-paginate (1.1.0) 130 | jekyll-readme-index (0.2.0) 131 | jekyll (~> 3.0) 132 | jekyll-redirect-from (0.14.0) 133 | jekyll (~> 3.3) 134 | jekyll-relative-links (0.5.3) 135 | jekyll (~> 3.3) 136 | jekyll-remote-theme (0.3.1) 137 | jekyll (~> 3.5) 138 | rubyzip (>= 1.2.1, < 3.0) 139 | jekyll-sass-converter (1.5.2) 140 | sass (~> 3.4) 141 | jekyll-seo-tag (2.5.0) 142 | jekyll (~> 3.3) 143 | jekyll-sitemap (1.2.0) 144 | jekyll (~> 3.3) 145 | jekyll-swiss (0.4.0) 146 | jekyll-theme-architect (0.1.1) 147 | jekyll (~> 3.5) 148 | jekyll-seo-tag (~> 2.0) 149 | jekyll-theme-cayman (0.1.1) 150 | jekyll (~> 3.5) 151 | jekyll-seo-tag (~> 2.0) 152 | jekyll-theme-dinky (0.1.1) 153 | jekyll (~> 3.5) 154 | jekyll-seo-tag (~> 2.0) 155 | jekyll-theme-hacker (0.1.1) 156 | jekyll (~> 3.5) 157 | jekyll-seo-tag (~> 2.0) 158 | jekyll-theme-leap-day (0.1.1) 159 | jekyll (~> 3.5) 160 | jekyll-seo-tag (~> 2.0) 161 | jekyll-theme-merlot (0.1.1) 162 | jekyll (~> 3.5) 163 | jekyll-seo-tag (~> 2.0) 164 | jekyll-theme-midnight (0.1.1) 165 | jekyll (~> 3.5) 166 | jekyll-seo-tag (~> 2.0) 167 | jekyll-theme-minimal (0.1.1) 168 | jekyll (~> 3.5) 169 | jekyll-seo-tag (~> 2.0) 170 | jekyll-theme-modernist (0.1.1) 171 | jekyll (~> 3.5) 172 | jekyll-seo-tag (~> 2.0) 173 | jekyll-theme-primer (0.5.3) 174 | jekyll (~> 3.5) 175 | jekyll-github-metadata (~> 2.9) 176 | jekyll-seo-tag (~> 2.0) 177 | jekyll-theme-slate (0.1.1) 178 | jekyll (~> 3.5) 179 | jekyll-seo-tag (~> 2.0) 180 | jekyll-theme-tactile (0.1.1) 181 | jekyll (~> 3.5) 182 | jekyll-seo-tag (~> 2.0) 183 | jekyll-theme-time-machine (0.1.1) 184 | jekyll (~> 3.5) 185 | jekyll-seo-tag (~> 2.0) 186 | jekyll-titles-from-headings (0.5.1) 187 | jekyll (~> 3.3) 188 | jekyll-watch (2.0.0) 189 | listen (~> 3.0) 190 | jemoji (0.10.0) 191 | gemoji (~> 3.0) 192 | html-pipeline (~> 2.2) 193 | jekyll (~> 3.0) 194 | kramdown (1.16.2) 195 | liquid (4.0.0) 196 | listen (3.1.5) 197 | rb-fsevent (~> 0.9, >= 0.9.4) 198 | rb-inotify (~> 0.9, >= 0.9.7) 199 | ruby_dep (~> 1.2) 200 | mercenary (0.3.6) 201 | mini_portile2 (2.4.0) 202 | minima (2.5.0) 203 | jekyll (~> 3.5) 204 | jekyll-feed (~> 0.9) 205 | jekyll-seo-tag (~> 2.1) 206 | minitest (5.11.3) 207 | multipart-post (2.0.0) 208 | nokogiri (1.10.4) 209 | mini_portile2 (~> 2.4.0) 210 | octokit (4.9.0) 211 | sawyer (~> 0.8.0, >= 0.5.3) 212 | pathutil (0.16.1) 213 | forwardable-extended (~> 2.6) 214 | public_suffix (2.0.5) 215 | rb-fsevent (0.10.3) 216 | rb-inotify (0.9.10) 217 | ffi (>= 0.5.0, < 2) 218 | rouge (2.2.1) 219 | ruby-enum (0.7.2) 220 | i18n 221 | ruby_dep (1.5.0) 222 | rubyzip (1.2.1) 223 | safe_yaml (1.0.4) 224 | sass (3.5.7) 225 | sass-listen (~> 4.0.0) 226 | sass-listen (4.0.0) 227 | rb-fsevent (~> 0.9, >= 0.9.4) 228 | rb-inotify (~> 0.9, >= 0.9.7) 229 | sawyer (0.8.1) 230 | addressable (>= 2.3.5, < 2.6) 231 | faraday (~> 0.8, < 1.0) 232 | terminal-table (1.8.0) 233 | unicode-display_width (~> 1.1, >= 1.1.1) 234 | thread_safe (0.3.6) 235 | typhoeus (1.3.0) 236 | ethon (>= 0.9.0) 237 | tzinfo (1.2.5) 238 | thread_safe (~> 0.1) 239 | unicode-display_width (1.4.0) 240 | 241 | PLATFORMS 242 | ruby 243 | 244 | DEPENDENCIES 245 | github-pages 246 | 247 | BUNDLED WITH 248 | 1.16.3 249 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Documentation # 2 | 3 | This repository contains the documentation files for [`glitch-soc`](https://github.com/glitch-soc/mastodon), a fork of [`mastodon`](https://github.com/tootsuite/mastodon). 4 | You can view these pages live at . 5 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | title: "Mastodon Glitch Edition" 2 | description: "A friendly fork of the open-source social network software Mastodon." 3 | lang: "en" 4 | timezone: "America/Toronto" 5 | gems: 6 | - "jemoji" 7 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% if page.title %}{{ page.title | strip_html }} | {% endif %}{{ site.title | default: site.github.repository_name }} 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

{{ site.title | default: site.github.repository_name }}

20 |
21 |
22 |
23 |
24 |
25 | {% if page.title %}

{{ page.title }}

{% endif %} 26 |
27 | {{ content }} 28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /contributing/frontend/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title : Contributing to the Frontend 3 | --- 4 | 5 | > Hey there! 6 | > Glad you're interested in helping us with this project. 7 | > Below are some guidelines and important things to note when contributing to the `glitch-soc` frontend (the "web view" app). 8 | > If you have any questions, don't be afraid to reach out!! 9 | > 10 | > 11 | 12 | Mastodon's frontend is developed with [React](https://facebook.github.io/react/) and [Redux](http://redux.js.org/) and served using [Webpack](https://webpack.js.org/). 13 | Depending on what you're hoping to work on, you can get by without understanding the specifics of Redux or Webpack but knowledge of React is a must. 14 | That said, React isn't too difficult to pick up and they have some very nice reference materials on their website :woman_technologist:. 15 | 16 | Mastodon runs its code through a linter to make sure it maintains some semblance of order and consistency, and you should run these tests before you push. 17 | You can use `npm test` to do this; on Vagrant, that's `vagrant ssh -c "cd /vagrant && npm test"` (assuming you have already called `vagrant up`). 18 | 19 | In general, it's best if you have a development environment so that you can test your code, and you should reach out to someone on the `glitch-soc` development team if you need help setting that up. 20 | 21 | ### Basic guidelines 22 | 23 | Mastodon uses :v: two (2) spaces for indentation everywhere. 24 | 25 | In JavaScript files, variable names are usually `camelCased`, except in the case of global constants, which are often in `SCREAMING_SNAKE_CAPS`. 26 | JSX components are naturally `PascalCased`, as JSX requires a leading capital letter. 27 | 28 | With regard to HTML `class` names, everything is lowercase and components are typically separated with a double-underscore, with hyphens betwen words. 29 | For example, `.status__header-button__smile` would describe the "smile" component inside of the "header button" component inside of "status". 30 | `class` names are kinda arbitrary so don't worry about it too much lol. 31 | 32 | Try to make sure every file ends in a blank line to keep Git happy :kissing_heart:. 33 | Also try to make sure lines don't have trailing spaces to keep things clean. 34 | Many editors have plugins that will do this for you. 35 | 36 | There are a few other rules that you'll notice when linting because they'll throw errors; for example, curly braces need whitespace around them and list items should terminate in a comma when they're on their own line (even if they're the last item). 37 | You'll pick these up as you go along and just try to make everything look consistent. 38 | 39 | ### Long lines 40 | 41 | Generally, I like to avoid long lines. 42 | It's possible to go too far with this (and I probably have in places :sweat_smile:) but just try to keep things looking nice. 43 | It's less of a big deal with code, but with documentation especially you should make an effort to keep it readable. 44 | 45 | I tend to wrap lines after 71 characters (such that the terminal `LF` is № 72) if anyone is wondering. 46 | I think upstream development favours a number closer to 80. 47 | 48 | ### Components and structure 49 | 50 | All of the frontend assets which Mastodon uses are stored in the `app/javascript/` folder. 51 | There are a few places of interest here: 52 | 53 | #### :file_folder: The `mastodon` folder 54 | 55 | The `mastodon` folder contains components from upstream (vanilla) Mastodon. 56 | These components might have some glitch modifications, but if so they should be kept small. 57 | __Not all of these files are used :scream:.__ 58 | In certain cases, we have replaced Mastodon's vanilla components with our own. 59 | 60 | You'll find a number of subfolders inside the `mastodon` folder with various scripts and components. 61 | This folder follows the same basic structure as our own `glitch` folder (see below), but ours is better-organized. 62 | 63 | #### :file_folder: The `glitch` folder 64 | 65 | The `glitch` folder contains our custom in-house components. 66 | You can change these files as much as you want, since they will never conflict with anything upstream. 67 | If you're creating a new file to add to the frontend, you should create it here. 68 | 69 | Inside the `glitch` folder, there are the following subfolders: 70 | 71 | - `actions`: 72 | These are Redux action scripts. 73 | 74 | - `components`: 75 | These are all of the React components. 76 | The components in this folder __must not__ have direct access to the Redux store, with the exception of files with the name `container`, which __must not__ have render methods of their own. 77 | 78 | Components should be placed into one or more subfolders according to where they appear. 79 | The name of the component should reflect this structure; for example the component at `components/status/gallery/item` is named `StatusGalleryItem`. 80 | 81 | Ideally, each file should contain (and export) only a single component. 82 | 83 | - `locales`: 84 | Here live Glitchsoc custom translations and overrides to the original mastodon messages. 85 | We decided to split this off from `mastodon/locales` to avoid merge conflicts. 86 | We have adjusted the locale script, so messages in `glitch/locales` are added to, and replace if needed, messages with matching keys from `mastodon/locales`. 87 | 88 | **Please try to avoid modifying the original files** (eg. by running `yarn manage:translations` and commiting the 89 | changes). 90 | Don't worry about `defaultMessages.json`, it's presently not used for anything—all the important stuff 91 | goes in `en.json` (or other languages, if you like). 92 | 93 | - `reducers`: 94 | These are Redux reducers, to complement the actions provided by the `actions` folder. 95 | 96 | - `util`: 97 | These are generic scripts which do not fit into any of the categories above. 98 | 99 | #### :file_folder: The `styles` folder 100 | 101 | The `styles` folder contains all of Mastodon's styles, for both the frontend application and its static pages. 102 | 98% of the time the only file you'll be interested in here is `components.scss`. 103 | It's incredibly disorganized but try to make do :bowing_woman:. 104 | 105 | ### Documentation 106 | 107 | With respect to files in the `mastodon` or `styles` folder, try to document your code, but keep things somewhat minimal so that we don't have conflicts with upstream. 108 | With files in the `glitch` folder, document everything liberally. 109 | I favour Markdown syntax inside of block comments, personally. 110 | If you feel up to it, include a Fediverse username by your code so that people know who to contact if they have any questions :information_desk_person:. 111 | 112 | I am of the opinion that someone should be able to figure out more-or-less everything a file does just by reading the comments (ie, without understanding a line of code), and this will make it much easier for others who come along to do [`glitch-soc/docs`](https://github.com/glitch-soc/docs/) documentation work, who might not be fluent programmers. 113 | 114 | Open-source is only open to those people who can read the source, and having a well-commented codebase greatly improves accessibility and helps users stay informed about what the application is doing behind their back :100::fire::ok_hand:. 115 | 116 | - - - 117 | 118 | 123 | -------------------------------------------------------------------------------- /contributing/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title : Contributing 3 | --- 4 | 5 | Click one of the following links to learn more: 6 | 7 | - [Contributing to the Frontend](./frontend/) 8 | 9 | Persons interested in contributing to `glitch-soc` should also read [CONTRIBUTING.md](https://github.com/glitch-soc/mastodon/blob/main/CONTRIBUTING.md) in the `glitch-soc/mastodon` repository. 10 | -------------------------------------------------------------------------------- /features/app-settings/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: App settings 3 | --- 4 | 5 | `glitch-soc` provides an App Settings modal to allow users to personalize the `glitch-soc` frontend. 6 | This modal is accessible by clicking the "cogs" icon above the compose window, or from the Getting Started menu. 7 | 8 | The settings made available by this modal are as follows: 9 | 10 | ### General 11 | 12 | ![modal-general](modal-general.png) 13 | 14 | | Name | Description | 15 | | ---- | ----------- | 16 | | Reply count | Display an estimate of the reply count | 17 | | High color privacy icons | Display privacy icons in bright and easily distinguishable colors | 18 | | Tag misleading links | Add a visual indication with the link target host to every link not mentioning it explicitly | 19 | 20 | #### Rewrite mentions 21 | 22 | Rewrite mentions in displayed statuses 23 | 24 | | Name | 25 | | ------ | 26 | | Do not rewrite mentions | 27 | | Rewrite with username and domain (when the account is remote) | 28 | | Rewrite with username | 29 | 30 | #### Notifications options 31 | 32 | | Name | Description | 33 | | ---- | ----------- | 34 | | Unread notifications badge | Display a badge for unread notifications in the column icons when the notifications column isn't open | 35 | | Unread notifications favicon badge | Add a badge for unread notifications to the favicon | 36 | 37 | #### Toot icons 38 | 39 | | Name | 40 | | ------ | 41 | | Language indicator | 42 | | Reply indicator | 43 | | Local-only indicator | 44 | | Media and poll indicators | 45 | | Toot privacy indicators | 46 | 47 | #### Layout 48 | 49 | | Name | Description | 50 | | ---- | ----------- | 51 | | Layout | Automatically find the most suitable layout, enforce Desktop mode or enforce Mobile mode. | 52 | | Wide view | Stretches columns to better fill the available space. This setting only has an effect in Desktop mode. | 53 | 54 | ### Compose box 55 | 56 | ![modal-compose-box](modal-compose-box.png) 57 | 58 | | Name | Description | 59 | | ---- | ----------- | 60 | | Content warning | Add ability to always show content warnings, prepend "re:" to content warnings when replying | 61 | | Replies | Pre-select usernames when replying to multiple people | 62 | | Confirmations | Show confirmation dialogs before sending toots lacking media descriptions or overwriting the message being composed | 63 | | Content type | Show a content-type choice when authoring toots | 64 | | Secondary toot button | Add a secondary toot button in order to quickly post toots using the specified alternate privacy setting. | 65 | | When replying to a toot | Change the behavior of the secondary toot button when replying to a toot. It can be set to keep the privacy value set above, copy that of the toot being replied to, or select the strictest privacy setting between the default one and that of the toot being replied to. | 66 | 67 | ### Content warnings 68 | 69 | ![modal-content-warnings](modal-content-warnings.png) 70 | 71 | | Name | Description | 72 | | ---- | ----------- | 73 | | Show/hide content of all copies at once | Reproduce upstream Mastodon behavior by having the Content Warning button affect all copies of a post at once. This will prevent automatic collapsing of any copy of a toot with unfolded CW | 74 | | Display media attachments outside content warnings | Reproduce upstream Mastodon behavior by having the Content Warning toggle not affect media attachments | 75 | | Content warnings to not automatically unfold | Specify a regular expression for content warnings that should not be automatically unfolded | 76 | 77 | ### Collapsed toots 78 | 79 | ![modal-collapsed-toots](modal-collapsed-toots.png) 80 | 81 | | Name | Description | 82 | | ---- | ----------- | 83 | | Enable collapsed toots | Enables [collapsible toot](../collapsible-toots/) functionality. | 84 | | Show action buttons in collapsed toots | | 85 | 86 | 87 | #### Automatic collapsing 88 | 89 | | Name | Description | 90 | | ---- | ----------- | 91 | | Everything | Every toot will be automatically collapsed when it first appears on the screen. | 92 | | Notifications | Favourite and boost notifications (but not mentions) will be collapsed in the Notifications column. | 93 | | Lengthy toots | Toots taller than 400px (or 650px with media) will be automatically collapsed. | 94 | | Replies | Any toot which is replying to another toot, including self-replies, will be collapsed when it appears onscreen. | 95 | | Boosts | Any boost will be automatically collapsed. | 96 | | Toots with media | Toots containing media (images, videos) will be automatically collapsed. | 97 | 98 | #### Image backgrounds 99 | 100 | | Name | Description | 101 | | ---- | ----------- | 102 | | Give collapsed toots an image background | Toots which have been collapsed will be given a background reflecting the poster's header image. | 103 | | Preview collapsed toot media | If a toot contains media (and that media is not hidden behind a CW or sensitive content marker), a preview of the media will be set as the toot's background. | 104 | 105 | ### Media 106 | 107 | ![modal-media](modal-media.png) 108 | 109 | | Name | Description | 110 | | ---- | ----------- | 111 | | Letterbox media | Wide images and videos will be displayed in full, with black bars at the top and bottom, as opposed to zoomed-in. | 112 | | Full-width media | Images and videos will span the entire column width, as opposed to being confined to the text width. | 113 | | Inline preview cards | Inline preview cards for external links | 114 | | Reveal sensitive media | Reveal sensitive media behind a CW by default | 115 | | Pop-in player | Enable a pop-in player and choose its position | -------------------------------------------------------------------------------- /features/app-settings/modal-collapsed-toots.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/app-settings/modal-collapsed-toots.png -------------------------------------------------------------------------------- /features/app-settings/modal-compose-box.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/app-settings/modal-compose-box.png -------------------------------------------------------------------------------- /features/app-settings/modal-content-warnings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/app-settings/modal-content-warnings.png -------------------------------------------------------------------------------- /features/app-settings/modal-general.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/app-settings/modal-general.png -------------------------------------------------------------------------------- /features/app-settings/modal-media.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/app-settings/modal-media.png -------------------------------------------------------------------------------- /features/collapsible-toots/collapsed-notifs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/collapsible-toots/collapsed-notifs.png -------------------------------------------------------------------------------- /features/collapsible-toots/collapsed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/collapsible-toots/collapsed.png -------------------------------------------------------------------------------- /features/collapsible-toots/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Collapsible toots 3 | --- 4 | 5 | `glitch-soc` introduces a new feature to Mastodon known as "collapsible toots". 6 | By clicking on the small double-angle icon in the top right of a toot or holding the "shift" key when clicking on the toot, you can reduce the toot's size and hide away its contents. 7 | This functionality can be configured, or disabled entirely, in [App Settings](../app-settings/). 8 | 9 | This means you can finally put an end to madness like this: 10 | 11 | ![loong](loong.png) 12 | 13 | By collapsing it to a single line: 14 | 15 | ![collapsed](collapsed.png) 16 | 17 | In addition to regular toots, you can also auto-collapse your notifications to save space. 18 | 19 | ![notifs](collapsed-notifs.png) 20 | -------------------------------------------------------------------------------- /features/collapsible-toots/loong.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/collapsible-toots/loong.png -------------------------------------------------------------------------------- /features/colored-visibility-icons/colored.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/colored-visibility-icons/colored.png -------------------------------------------------------------------------------- /features/colored-visibility-icons/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Colored toot visibility icons 3 | --- 4 | 5 | The visibility of a toot can be a bit hard to see at a glance on Mastodon, because the icon in the right of each toot has always the same grey color whatever the visibility. 6 | 7 | By enabling it in the [app settings](../app-settings/), those visibility icons can be made more colorful, so that you can tell them apart much more easily. 8 | 9 | ![colored visibility icons](colored.png) 10 | -------------------------------------------------------------------------------- /features/doodle/doodle_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/doodle/doodle_1.png -------------------------------------------------------------------------------- /features/doodle/doodle_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/doodle/doodle_2.png -------------------------------------------------------------------------------- /features/doodle/doodle_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/doodle/doodle_3.png -------------------------------------------------------------------------------- /features/doodle/doodle_controls.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/doodle/doodle_controls.png -------------------------------------------------------------------------------- /features/doodle/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Doodles 3 | --- 4 | 5 | `glitch-soc` provides a way to draw picture and toot them 6 | 7 | 8 | ### Doodles 9 | 10 | 11 | Doodles are accessible via the file upload button. 12 | ![Compose textbox](doodle_1.png) 13 | 14 | 15 | 16 | Here is a screenshot of the doodle modal opened. 17 | ![View of glitch-soc with the doodle open](doodle_2.png) 18 | 19 | 20 | 21 | The interface allow you to do basic drawings: 22 | ![The image of the doodle window saying "Doodle, Yay"](doodle_3.png) 23 | 24 | 25 | 26 | The controls are as follow: 27 | ![A screenshot of the controls](doodle_controls.png) 28 | - Smoothing: the stroke will look less pixelated 29 | - Adaptative: 30 | - Weight: how large the stroke will be 31 | - Drop down: Choose the size of the image (square 500, tootbanner, 480p, SVGA, 16:9) 32 | - Pencil: draw lines 33 | - Shower bath: draw the background 34 | - Arrow: undo the last action 35 | - Bin: clean the drawing 36 | - Colour square: select a colour to draw with 37 | 38 | -------------------------------------------------------------------------------- /features/hide-follower-count/hidden-count.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/hide-follower-count/hidden-count.png -------------------------------------------------------------------------------- /features/hide-follower-count/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Hiding follower count 3 | --- 4 | 5 | In `glitch-soc`, it is possible to hide followers counts, either instance-wide 6 | as an admin, or as a user setting. 7 | 8 | ### Hiding followers count as an admin 9 | 10 | As an instance administrator, you can hide followers count for the whole instance, 11 | by enabling the corresponding option in Site settings. 12 | 13 | ![Screenshot of the server-wide “Hide followers count” option](site-settings.png) 14 | 15 | In doing so, the client API will return `-1` instead of the actual count for every 16 | request, for both local and remote accounts, which, in glitch-soc flavor, will 17 | result in displaying “-” instead of the actual count: 18 | 19 | ![Screenshot of user statistics with hidden followers count](hidden-count.png) 20 | 21 | Furthermore, it will not export followers count over ActivityPub for any local user. 22 | 23 | ### Hiding followers count as a user 24 | 25 | If the instance has not opted to hide followers count instance-wide, you can still 26 | opt in to hide your own followers count from “Preferences > Other” settings. 27 | 28 | ![Screenshot of user-wide “Hide followers count” option](user-settings.png) 29 | 30 | This will hide your own followers count from the client API and ActivityPub, but 31 | it will still display other people's followers count. 32 | -------------------------------------------------------------------------------- /features/hide-follower-count/site-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/hide-follower-count/site-settings.png -------------------------------------------------------------------------------- /features/hide-follower-count/user-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/hide-follower-count/user-settings.png -------------------------------------------------------------------------------- /features/local-only-toots/compose.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/local-only-toots/compose.png -------------------------------------------------------------------------------- /features/local-only-toots/in-timeline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/local-only-toots/in-timeline.png -------------------------------------------------------------------------------- /features/local-only-toots/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Local-only toots 3 | --- 4 | 5 | `glitch-soc` adds a feature called "local-only" or "non-federated" toots. Toots marked as such do not automatically federate to other instances, making them ideal for example for local server announcements and meta-discussion. 6 | 7 | ### Compose UI 8 | 9 | A toot is marked as local-only using a dropdown in the compose UI: 10 | 11 | ![compose](compose.png) 12 | 13 | Additionally, this can be done by appending the eye (:eye:) emoji at the very end of the toot. 14 | 15 | In the timeline, it then looks like this: 16 | 17 | ![ltl](in-timeline.png) 18 | -------------------------------------------------------------------------------- /features/media/cw-media.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/media/cw-media.png -------------------------------------------------------------------------------- /features/media/fullwidth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/media/fullwidth.png -------------------------------------------------------------------------------- /features/media/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Media improvements 3 | --- 4 | 5 | `glitch-soc` has made a number of improvements to how media displays itself in the frontend. 6 | These are outlined below. 7 | 8 | ### Media is hidden by CWs 9 | 10 | `glitch-soc` considers media to be a part of a toot's contents, so any media attachments are hidden behind CWs, just like any other aspect of the toot. 11 | A media icon, representing the type of media which has been hidden, appears inside the SHOW MORE button to inform users as to the toot's contents. 12 | 13 | ![cwd media](cw-media.png) 14 | 15 | ### Fullwidth images and videos 16 | 17 | Images on `glitch-soc` stretch horizontally to fill the entire toot container, instead of being confined to the width of the text body. 18 | This allows image previews to be rendered in greater clarity and provides an aesthetically pleasing experience. 19 | 20 | This option is configurable in [App Settings](../app-settings/). 21 | 22 | ![fullwidth img](fullwidth.png) 23 | 24 | ### Media letterboxing (preview scaling mode) 25 | 26 | Users can opt to view wide images in a letterbox format instead of stretching them to fill the image container. In letterbox mode, the image is scaled down to be fully visible in the available space. 27 | 28 | This option is configurable in [App Settings](../app-settings/). 29 | 30 | **Letterbox ON** 31 | 32 | ![letterbox on](letterbox-on.png) 33 | 34 | **Letterbox OFF** 35 | 36 | ![letterbox off](letterbox-off.png) 37 | -------------------------------------------------------------------------------- /features/media/letterbox-off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/media/letterbox-off.png -------------------------------------------------------------------------------- /features/media/letterbox-on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/media/letterbox-on.png -------------------------------------------------------------------------------- /features/misleading-link-highlighting/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Misleading links highlighting 3 | --- 4 | 5 | By default, `glitch-soc` will display the target domain of any link that does not 6 | unambiguously start with it, in order to avoid misleading links such as spoofing 7 | attempts. 8 | 9 | ![highlighted misleading link](./misleading-link.png) 10 | 11 | This behavior can be disabled from the [app settings](../app-settings). 12 | -------------------------------------------------------------------------------- /features/misleading-link-highlighting/misleading-link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/misleading-link-highlighting/misleading-link.png -------------------------------------------------------------------------------- /features/rich-text/app-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/rich-text/app-settings.png -------------------------------------------------------------------------------- /features/rich-text/content-type-dropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/rich-text/content-type-dropdown.png -------------------------------------------------------------------------------- /features/rich-text/formatted-toot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/rich-text/formatted-toot.png -------------------------------------------------------------------------------- /features/rich-text/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Formatted toots 3 | --- 4 | 5 | Unlike `Mastodon`, `glitch-soc` supports some formatting in toots. 6 | 7 | Formatted toots are displayed as such in the `glitch` flavor but can be degraded 8 | in the `vanilla` flavor and some mobile apps. 9 | 10 | Please be aware that most of the toot formatting will be stripped by mainline `Mastodon`, 11 | which may lead to the meaning of your toots being altered. 12 | 13 | ### Allowed formatting 14 | 15 | Allowed formatting is in glitch-soc toots include: headers, bold, italics, strikethrough, 16 | blockquotes, inline code, code blocks, subscript, superscript and lists. 17 | 18 | ![Screenshot of a formatted toot](formatted-toot.png) 19 | 20 | ### Authoring formatted toots 21 | 22 | Toots can be written in three source formats: 23 | - Plain text: toots are treated like in vanilla Mastodon, and are not formatted 24 | - Markdown: toots can be written in [Markdown][markdown], as understood by [Redcarpet][redcarpet] 25 | - HTML: toots are written directly in HTML (but sanitized to strip any unsupported formatting) 26 | 27 | You can write toots in Markdown or HTML from the `glitch` flavour by first enabling “Show content-type choice when authoring toots” 28 | in the “Compose box” tab of the [app settings](../app-settings/). 29 | 30 | ![Content-type choice option in app settings](app-settings.png) 31 | 32 | Then, for each toot, you can select whether you want to want to author them in Plain text, Markdown or HTML by using the *content-type drop-down*: 33 | 34 | ![Screenshot of the content-type dropdown](content-type-dropdown.png) 35 | 36 | In addition to that, you can set your *default content-type* from the user settings. 37 | Toots posted from applications which do not support glitch-soc's toot formatting will be understood as written in that selected content-type. 38 | 39 | ![Screenshot of user settings](user-settings.png) 40 | 41 | [markdown]: https://en.wikipedia.org/wiki/Markdown 42 | [redcarpet]: https://github.com/vmg/redcarpet 43 | -------------------------------------------------------------------------------- /features/rich-text/user-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/rich-text/user-settings.png -------------------------------------------------------------------------------- /features/status-data-attributes/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Data-* attributes on statuses and notifications for custom CSS targeting 3 | --- 4 | 5 | `glitch-soc` adds the following HTML attributes to all statuses, boosts and favourites: 6 | 7 | - `data-status-by="@alice@example.com"` 8 | - `data-boosted-by="@bob@example.com"` 9 | - `data-favourited-by="@charlie@example.com"` 10 | 11 | The domain part is left out for users on the same server (eg. `@eve@example.com` will be just 12 | `@eve` for `example.com` users). 13 | 14 | Those attributes can be used for writing custom CSS via UserStyle. To use UserStyle, you need 15 | a browser extension/add-on, such as Stylish: 16 | 17 | - [Stylus for Firefox][StyFF] 18 | - [Stylus for Chrome][StyGC] 19 | 20 | ### Example styles 21 | 22 | **Changing user avatars** 23 | 24 | Have you ever unfollowed or muted a user just because of their HORRIBLE avatar? No more! 25 | Now you can replace them with any image of your choosing with a style like this: 26 | 27 | ```css 28 | [data-status-by="@alice@example.com"] .account__avatar, 29 | [data-favourited-by="@alice@example.com"] .account__avatar-overlay-overlay, 30 | [data-boosted-by="@alice@example.com"] .account__avatar-overlay-overlay { 31 | background-image: url(______) !important; 32 | } 33 | ``` 34 | 35 | `.account__avatar` is the regular full-sized avatar, whereas `.account__avatar-overlay-overlay` is the 36 | tiny avatar overlay in boosts or favourites. 37 | 38 | We may add a better way to do avatar replacement in the future, but for now this is the way to go. 39 | 40 | **Hiding boosts by a user** 41 | 42 | With this, you can hide boosts by any user you follow or see in the timelines. The `:not()` piece 43 | is to stop it from hiding notifications about that user boosting your own toots. 44 | 45 | ```css 46 | [data-boosted-by="@alice@example.com"]:not([data-status-by="@YourName"]) { 47 | display: none !important; 48 | } 49 | ``` 50 | 51 | There are sure to be other fun uses for those data attributes, let us know if you find anything worth 52 | sharing so we can add it here! 53 | 54 | [StyFF]: https://addons.mozilla.org/en-US/firefox/addon/styl-us/ 55 | [StyGC]: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne 56 | -------------------------------------------------------------------------------- /features/themes/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Flavours and Skins 3 | --- 4 | 5 | Upstream Mastodon supports changing the site CSS on a per-user basis by specifying files in a special `config/themes.yml` file. 6 | This approach works for simple themes, but it has its limitations: 7 | 8 | 1. You can only change the CSS of a page, not its JavaScript or other elements. 9 | 2. The same theme is applied to all pages, regardless of type. 10 | 11 | `glitch-soc` uses a flavour+skin system which addresses both of these problems, while making the creation of themes even simpler than it is on upstream. 12 | The system works as follows: 13 | 14 | 1. Each instance can have any number of _flavours_, which can contain JavaScript, CSS, or anything else. 15 | By default, `glitch-soc` comes with two flavours: `glitch`, which is the default, and `vanilla`, which is the frontend used by upstream. 16 | 17 | 2. Each flavour can have any number of _skins_, which are alternate stylesheets used with the flavour. 18 | [The `win95` theme](https://github.com/cybrespace/mastodon/blob/cybrespace/app/javascript/styles/win95.scss) from `cybrespace:mastodon` is an example alternate skin for the `vanilla` flavour. 19 | 20 | The flavour and skin of the Mastodon web app can be changed in the user preferences. 21 | For details on creating and installing additional skins and flavours, see below. 22 | 23 | ### Installing 24 | 25 | To install an existing flavour or skin, you need only to place the flavour or skin file/folder into the appropriate location. 26 | For flavours, this is: 27 | 28 | app/javascript/flavours/ 29 | 30 | For skins (where `FLAVOUR-NAME` is the name of the flavour that the skin applies to), this is: 31 | 32 | app/javascript/skins/FLAVOUR-NAME/ 33 | 34 | Mastodon will automatically detect flavours and skins installed into these locations, although you will likely have to restart your server (and, naturally, recompile your assets). 35 | This system works well with installation methods such as git submodules, although of course you can simply add the files manually as well. 36 | 37 | ### Skins 38 | 39 | Glitch skins are automatically loaded from the folder `app/javascript/skins/FLAVOUR-NAME/`, where `FLAVOUR-NAME` is the name of the flavour that the skin should apply to. 40 | For example, if you are looking to reskin the `glitch` flavour, you should place your skin in the file `app/javascript/skins/glitch/`. 41 | 42 | The simplest skin is just a single (S)CSS file, the name of which will be taken as the name of the skin. 43 | This stylesheet will be served instead of the `common` styles, which hold all of Mastodon's default styling. 44 | When you specify a skin, the default styling for a flavour is *not* automatically loaded, so be sure to import it in your stylesheet if needed. 45 | 46 | ### Packs 47 | 48 | If you want to provide different stylesheets for various pages, you can do this by providing a folder instead of a single stylesheet as your skin. 49 | This folder should contain a number of files, each of which provides the styling for a different _pack_, which is served depending on page type. 50 | The available packs are as follows: 51 | 52 | - __`about`:__ Rendered on the `about/` page (but *not* `about/more`, etc) and on hashtag pages; this pack provides the timeline component. 53 | - __`admin`:__ Rendered on all admin pages. 54 | - __`auth`:__ Rendered on auth pages. 55 | - __`common`:__ Rendered on all pages, except those with the `use_common` property set to `false`. 56 | - __`embed`:__ Rendered on embedded pages. 57 | - __`error`:__ Rendered on error pages. 58 | - __`home`:__ Rendered on the home page; ie, the Mastodon web view. 59 | - __`modal`:__ Rendered on modal pages (ie, for remote follows). 60 | - __`public`:__ Rendered on public pages, like static user profiles. 61 | - __`settings`:__ Rendered on all settings pages. 62 | - __`share`:__ Rendered on the "share" page; this pack provides a standalone composer. 63 | 64 | The names of the files inside the skin folder should match the pack that they are meant to replace. 65 | For example, if I have styling that I want to show on the web app but *not* on static pages, I should specify it in `app/javascript/skins/FLAVOUR-NAME/SKIN-NAME/home.scss`. 66 | 67 | The `glitch` and `vanilla` flavours only use the `common` pack for styling, but you are welcome to add additional styles to other packs if you wish. 68 | 69 | ### Flavours 70 | 71 | Like skins, flavours are all loaded from a specific folder; namely, `app/javascript/flavours`. 72 | Flavours are specified as folders with a special file, called `theme.yml`, which provides the necessarily metadata for Mastodon to load its files. 73 | Aside from this one required file, the contents of a flavour folder are left entirely up to authors. 74 | 75 | The `theme.yml` for a flavour **_must_** have a `pack` property, whose own properties specify the JavaScript files to load for each pack (see above). 76 | These properties must have one of the following values: 77 | 78 | - If the property is not specified, then the fallback pack will be used, if applicable. 79 | - If the property is specified but is `null`, then no pack will be used. 80 | - If the property is specified but is a string, then this is interpreted as the pack's filename, and the default options are used. 81 | - Otherwise, the property must be an object specifying options for the pack. 82 | 83 | Here is a sample `theme.yml` file that could be used to generate a flavour: 84 | 85 | ```yaml 86 | pack: # Pack files 87 | common: # Options for the `common` pack 88 | filename: pack/common.js # This file contains all the scripts and styles for the pack 89 | stylesheet: true # This must be specified for packs which serve styling 90 | home: pack/home.js # A string can be used if only a filename is needed 91 | 92 | fallback: glitch # The fallback flavour for any unspecified packs 93 | ``` 94 | 95 | ### Pack options 96 | 97 | The following options can be provided to packs: 98 | 99 | - __`filename`:__ The filename of the pack. Must be specified for a pack to be loaded. 100 | - __`preload`:__ An array of scripts to preload when rendering the pack, for use with async components. By default, no files are preloaded. 101 | - __`stylesheet`:__ If `true`, this pack contains a stylesheet. Must be specified for styles to be loaded. Defaults to `false`. 102 | - __`use_common`:__ Unless this property is `false`, the `common` pack will also be loaded. Defaults to `true`. 103 | 104 | ### Locales 105 | 106 | The `locales` property specifies a folder from which to draw locale files to be served with your JavaScript. 107 | The contents of this directory must be `.js` or `.json` files whose names correspond to language tags and whose default exports are a messages object of the same form as provided by vanilla Mastodon. 108 | This messages object can be made accessible in your source by importing `getLocale()` from `locales`. 109 | 110 | ### Screenshots 111 | 112 | You can specify one or more screenshots to render in the flavour's description page using the `screenshot` property. 113 | Webpack ignores the paths of image assets, so this property should specify *only* the filename. 114 | It is a good idea to namespace the filename of this file using your flavour name to guarantee uniqueness. 115 | 116 | The value of the `screenshot` property must be an image file that Webpack already knows about—we won't try to load it for you. 117 | Requiring it somewhere in one of your JavaScript files is probably sufficient. 118 | 119 | ### Fallbacks 120 | 121 | The `fallback` property specifies a flavour or flavours from which to draw unspecified packs. 122 | By default, unspecified packs are drawn from the default theme. 123 | The value of this property can be either the name of a flavour, or an array of names, in which case the first present flavour will be used. 124 | Setting this property to `null` disables fallback behaviour. 125 | 126 | ### Pack directory 127 | 128 | Generally speaking, your pack files should be inside of your flavour folder. 129 | If for some reason they aren't (as is the case with the `vanilla` flavour, to maintain upstream compatibility), you can specify a different folder inside which to look for packs with the `pack_directory` property. 130 | This should have a string value, and is resolved relative to the application root, *not* `app/javascript`. 131 | 132 | ### Localization 133 | 134 | You can provide localization strings for your skins and/or flavours by including a `names.yml` file inside the skin/flavour folder. 135 | For themes, this file should take the following form: 136 | 137 | ```yml 138 | en: 139 | flavours: 140 | FLAVOUR-NAME: 141 | description: [A description of your flavour] 142 | name: [Your flavour's name] 143 | skins: 144 | FLAVOUR-NAME: 145 | default: [The name of the default skin for your flavour] 146 | # …more localizations for other languages 147 | ``` 148 | 149 | For skins, you only need the `skins` part of the above file: 150 | 151 | ```yml 152 | en: 153 | skins: 154 | FLAVOUR-NAME: 155 | SKIN-NAME: [The name of your skin] 156 | # …more localizations for other languages 157 | ``` 158 | 159 | This file is loaded alongside all of the other localization data when your server first starts. 160 | -------------------------------------------------------------------------------- /features/threaded-mode/compose-reply.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/threaded-mode/compose-reply.png -------------------------------------------------------------------------------- /features/threaded-mode/compose.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/features/threaded-mode/compose.png -------------------------------------------------------------------------------- /features/threaded-mode/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Threaded mode 3 | --- 4 | 5 | `glitch-soc` adds a "threaded mode" feature to the toot compose interface. 6 | This eases writing "threads" of several toots. 7 | 8 | ### Compose UI 9 | 10 | Threaded mode is enabled by using the dropdown in the compose UI: 11 | 12 | ![compose](compose.png) 13 | 14 | A reply is prepared as soon as the toot is sent, pre-filled with any used hashtag: 15 | 16 | ![compose-reply](compose-reply.png) 17 | 18 | Discarding the reply will exit threaded mode. 19 | -------------------------------------------------------------------------------- /icon/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/icon/android-chrome-192x192.png -------------------------------------------------------------------------------- /icon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/icon/apple-touch-icon.png -------------------------------------------------------------------------------- /icon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/icon/favicon-16x16.png -------------------------------------------------------------------------------- /icon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/icon/favicon-32x32.png -------------------------------------------------------------------------------- /icon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/icon/favicon.ico -------------------------------------------------------------------------------- /icon/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/icon/mstile-150x150.png -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title : Introduction 3 | ... 4 | 5 | Welcome to the documentation site for `glitch-soc`! 6 | `glitch-soc` is a friendly [fork][] of the open-source social media software [Mastodon][], with the aim of providing additional features at the risk of potentially less stable software. 7 | You can browse our source code and contribute to the project [on Github][glitch-soc]. 8 | 9 | ### What's different? 10 | 11 | `glitch-soc` adds a number of experimental features to Mastodon, such as: 12 | 13 | - [Media improvements](./features/media/)
14 | - Images inside the CW spoiler 15 | - fullwidth images 16 | - scaling options 17 | - [Formatted toots](./features/rich-text) 18 | - [Highlighting of misleading links](./features/misleading-link-highlighting/) 19 | - [Hiding follower count](./features/hide-follower-count/) 20 | - [An app settings modal](./features/app-settings/) 21 | - [Collapsible toots](./features/collapsible-toots/) 22 | - [Colored toot visibility icons](./features/colored-visibility-icons/) 23 | - [Local-only toots](./features/local-only-toots/) 24 | - [Threaded mode](./features/threaded-mode/) 25 | - [`data-*` attributes on statuses](./features/status-data-attributes/) for custom CSS targeting 26 | - [Advanced theming via flavours+skins](./features/themes/) 27 | - [Doodle](./features/doodle/) 28 | 29 | ### Features that have made their way upstream 30 | 31 | Some of the features originally implemented in glitch-soc have been adopted in 32 | Mastodon: 33 | 34 | - [Optional boost hiding](./upstreamed-features/optional-boost-hiding/) 35 | - [Optional notification muting](./upstreamed-features/optional-notification-muting/) 36 | - [Custom profile metadata](./upstreamed-features/profile-metadata/) 37 | - [Bookmarks](./upstreamed-features/bookmarks/) 38 | - Upload of audio-only media 39 | - Toot visibility icon (at the top right of a toot) 40 | - [Reply selection in lists](./upstreamed-features/lists-show-replies-to/) 41 | - [Filter improvements](./upstreamed-features/filter-improvements/) 42 | 43 | ### How to install and update `glitch-soc`? 44 | 45 | `glitch-soc` is based on Mastodon's `main` branch. The installation steps are thus 46 | the same as [described in the Mastodon documentation](https://docs.joinmastodon.org/admin/install/). 47 | 48 | Updating from Mastodon (or from an earlier `glitch-soc` version) is exactly like updating from one Mastodon version 49 | to another, and will in general require the following steps: 50 | 51 | 0. Switch to glitch-soc, for instance by: 52 | - adding a new remote `git remote add glitch-soc https://github.com/glitch-soc/mastodon` 53 | - fetching it (`git fetch glitch-soc`) 54 | - switching to the `main` branch from that repo (`git checkout glitch-soc/main`) 55 | 1. Fetch the source code (typically, `git pull`) 56 | 2. Install dependencies: `bundle install && yarn install` 57 | 3. Run the pre-deployment database migrations: `RAILS_ENV=production SKIP_POST_DEPLOYMENT_MIGRATIONS=true bundle exec rails db:migrate` 58 | 4. Pre-compile static assets: `RAILS_ENV=production bundle exec rails assets:precompile` 59 | 60 | Due to glitch-soc shipping with two front-end flavours, this step requires more resources than it does on mainline Mastodon. 61 | 5. Restart the services: `systemctl reload mastodon-web && systemctl restart mastodon-{sidekiq,streaming}` 62 | 6. Clean Rails' cache: `RAILS_ENV=production bin/tootctl cache clear` 63 | 7. Run the post-deployment database migrations: `RAILS_ENV=production bundle exec rails db:migrate` 64 | 65 | ### How to migrate back to upstream Mastodon? 66 | 67 | Should you wish to migrate back to upstream Mastodon for any reason, this is possible, at the cost of 68 | every glitch-specific feature, of course. There are a few things that you need to be aware of: 69 | - Toots written in HTML or Markdown will not render as such anymore and will display the raw source instead. 70 | - Local-only toots will not be local-only anymore, remote instances and users will be able to see them and 71 | interact with them, should they be mentionned in any way. 72 | - If you have migrated to glitch-soc before Mastodon implemented bookmarks, migrations from Mastodon's source 73 | code will fail to execute until you edit `db/migrate/20180831171112_create_bookmarks.rb` to remove 74 | everything between `def change` and the corresponding `end`. 75 | 76 | ### How can I help? 77 | 78 | You can get information on contributing [here][Contributing]. 79 | 80 | ### Disclaimer 81 | 82 | `glitch-soc` is beta software, and under active development. 83 | Use at your own risk! 84 | 85 | [Contributing]: ./contributing/ 86 | [Features]: ./features/ 87 | [fork]: https://en.wikipedia.org/wiki/Fork_(software_development) 88 | [glitch-soc]: https://github.com/glitch-soc/mastodon/ 89 | [Mastodon]: https://joinmastodon.org/ 90 | -------------------------------------------------------------------------------- /src/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #000000 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Glitch-Soc", 3 | "icons": [ 4 | { 5 | "src": "../icon/android-chrome-192x192.png", 6 | "sizes": "192x192", 7 | "type": "image/png" 8 | } 9 | ], 10 | "theme_color": "#000000", 11 | "background_color": "#000000" 12 | } 13 | -------------------------------------------------------------------------------- /src/style.scss: -------------------------------------------------------------------------------- 1 | --- 2 | ... 3 | @charset "UTF-8"; 4 | 5 | @import url('https://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,400i,700,700i|VT323|Anonymous+Pro:400,400i,700,700i&subset=latin-ext'); 6 | @import url(//fonts.googleapis.com/earlyaccess/roundedmplus1c.css); 7 | 8 | /* BASIC WEB STYLING */ 9 | /* Color palette taken from the \u2764 64-colour palette */ 10 | 11 | $web-background-color: #1c1c1c; // _01 12 | $web-foreground-color: #ebebeb; // _09 13 | $web-text-color: #1c1c1c; // _01 14 | $web-accent-color: #528572; // ♠︎65 15 | $web-bright-color: #82dcb9; // ♠︎68 16 | $web-link-color: inherit; // inherited 17 | $web-link-hover-color: #528572; // ♠︎65 18 | $web-alternate-color: #28323f; // ♢22 19 | $web-aside-color: #717c88; // ♢25 20 | $web-faded-color: #c1cbd5; // ♢28 – Low contrast 21 | 22 | /* SYNTAX HIGHLIGHTING BY KIBIGO */ 23 | /* Color palette taken from the \u2764 64-colour palette */ 24 | 25 | // General 26 | $syntax-text-color: #ebebeb; // _09 27 | $syntax-background-color: #28323f; // ♢22 28 | 29 | // Gutter 30 | $syntax-gutter-text-color: #d6c6c9; // ♡28 31 | $syntax-gutter-background-color: #28323f; // ♢22 32 | 33 | // Syntax 34 | $syntax-comment: #c05979; // ♡A5 35 | $syntax-string: #2fe4b1; // ♠︎A8 36 | $syntax-number: #d6d02f; // ☂A8 37 | $syntax-bracket: #f9b9c6; // ♡68 38 | $syntax-operator: #7c70ba; // ☃A5 39 | $syntax-variable: #ffa9c5; // ♡A8 40 | $syntax-keyword: #82dcb9; // ♠︎68 41 | $syntax-function: #f6c442; // ♣︎A8 42 | $syntax-definition: #a2cff5; // ♢68 43 | $syntax-property: #c8c5f4; // ☃68 44 | $syntax-tag: #c05979; // ♡A5 45 | $syntax-attribute: #ffa9c5; // ♡A8 46 | $syntax-error: #f9b9c6; // ♡68 47 | $syntax-header: #c05979; // ♡A5 48 | $syntax-link: #1c81bf; // ♢A5 49 | $syntax-plus: #79dbcd; // ☾68 50 | $syntax-minus: #977630; // ♣︎65 51 | $syntax-em: #e8c77c; // ♣︎68 52 | $syntax-strong: #7c70ba; // ☃A5 53 | $syntax-quote: #c8c5f4; // ☃68 54 | 55 | .highlight { 56 | color: $syntax-text-color; 57 | background: $syntax-background-color; 58 | 59 | .c,.cm,.cp,.c1,.cs,.gt { color: $syntax-comment; font-style: italic } 60 | .err,.ge,.ne { color: $syntax-error; font-style: italic; text-decoration: underline } 61 | .k,.kc,.kd,.kp,.kr,.kt,.nb,.ni,.bp { color: $syntax-keyword } 62 | .o,.ow { color: $syntax-operator } 63 | .gd { color: $syntax-background-color; background-color: $syntax-minus } 64 | .ge { color: $syntax-em; font-style: italic } 65 | .gh,.gu { color: $syntax-header; font-weight: bold } 66 | .gi { color: $syntax-background-color; background-color: $syntax-plus } 67 | .go,.w { color: inherit } 68 | .gp { color: inherit; font-style: italic } 69 | .gs { color: $syntax-strong; font-weight: bold } 70 | .m,.mf,.mh,.mi,.mo,.il { color: $syntax-number } 71 | .s,.sc,.sd.s2,.se,.sh,.si,.so,.sr,.s1,.ss { color: $syntax-string } 72 | .na { color: $syntax-attribute } 73 | .nf,.nc,.nn,.vc { color: $syntax-function } 74 | .nt { color: $syntax-tag } 75 | .nv,.no,.vg,.vi,.nx { color: $syntax-variable } 76 | .sb { color: $syntax-bracket } 77 | } 78 | 79 | /* GLOBAL RULES */ 80 | 81 | *:root { 82 | font-family: "Gentium Book Basic", serif; 83 | font-size: large; 84 | font-weight: 400; 85 | font-synthesis: none; 86 | text-align: justify; 87 | quotes: "“" "”" "‘" "’"; 88 | } 89 | 90 | *:root:root:root:root:root [hidden] { 91 | display: none; 92 | } 93 | 94 | *[title]:not([title=""]):not(a) { 95 | border-bottom: dotted currentcolor solid; 96 | cursor: help; 97 | } 98 | 99 | @supports (text-decoration-style: dotted) { 100 | *[title]:not([title=""]):not(a) { 101 | border: none; 102 | text-decoration-line: underline; 103 | text-decoration-style: dotted; 104 | } 105 | } 106 | 107 | *:lang(en) { 108 | quotes: "“" "”" "‘" "’"; 109 | } 110 | 111 | blockquote:lang(en), blockquote *:lang(en) { 112 | quotes: "‘" "’" "“" "”"; 113 | } 114 | 115 | /* PAGE */ 116 | 117 | html { 118 | margin: 0; 119 | padding: 0; 120 | line-height: 1.35; 121 | color: $web-foreground-color; 122 | background: $web-background-color; 123 | } 124 | 125 | body { 126 | margin: 0; 127 | padding: 3.5rem 3rem; 128 | } 129 | 130 | /* SECTIONING */ 131 | 132 | article, section, aside, header, footer, div { 133 | display: block; 134 | margin: 0; 135 | padding: 0; 136 | } 137 | 138 | nav { 139 | margin: .675rem 1rem; 140 | text-align: center; 141 | } 142 | 143 | aside { 144 | margin: .3375rem 0; 145 | border: thick currentColor double; 146 | border-color: transparent $web-faded-color; 147 | padding: .3375rem 1rem; 148 | color: $web-aside-color; 149 | font-size: .85em; 150 | line-height: 1.25; 151 | } 152 | 153 | footer { 154 | margin: .3375rem 0; 155 | border: none; 156 | padding: 0; 157 | color: $web-alternate-color; 158 | font-size: .85em; 159 | line-height: 1.25; 160 | text-align: right; 161 | 162 | blockquote > &:last-child::before { 163 | content: "– "; 164 | } 165 | } 166 | 167 | header { 168 | text-align: left; 169 | } 170 | 171 | main { 172 | display: block; 173 | position: relative; 174 | margin: 1rem auto 0; 175 | padding: 1.35rem 1rem 2.7rem; 176 | max-width: 48rem; 177 | color: $web-text-color; 178 | background: $web-foreground-color; 179 | -webkit-hyphens: auto; 180 | -ms-hyphens: auto; 181 | hyphens: auto; 182 | } 183 | 184 | article:not(:first-child), section:not(:first-child) { 185 | margin-top: 2.7rem; 186 | } 187 | 188 | article:not(:last-child), section:not(:last-child) { 189 | margin-bottom: 2.7rem; 190 | } 191 | 192 | /* TABLES */ 193 | 194 | caption { 195 | margin: 0; 196 | padding: .3375rem .25rem; 197 | } 198 | 199 | table { 200 | margin: .675rem auto; 201 | border-collapse: collapse; 202 | padding: .3375rem .25rem; 203 | padding: 0; 204 | width: 100%; 205 | text-align: left; 206 | 207 | td > &:only-child { 208 | margin: auto; 209 | width: 100%; 210 | } 211 | } 212 | 213 | thead { 214 | font-weight: 700; 215 | text-align: center; 216 | } 217 | 218 | tbody + tbody::before { 219 | display: table-row; 220 | height: .675rem; 221 | content: ""; 222 | } 223 | 224 | td, th { 225 | border: none; 226 | border-radius: .125em; 227 | padding: .5em; 228 | vertical-align: top; 229 | } 230 | 231 | th { 232 | text-align: center; 233 | text-decoration: underline; 234 | } 235 | 236 | /* LISTS */ 237 | 238 | ul, ol, dl { 239 | margin: .3375em 0; 240 | padding: 0 0 0 2rem; 241 | } 242 | 243 | dt { 244 | display: inline-block; 245 | float: left; 246 | margin: 0 -.25rem; 247 | padding: 0 .25rem; 248 | font-weight: bold; 249 | 250 | dt + &::before { 251 | content: ", "; 252 | } 253 | } 254 | 255 | dd { 256 | margin: 0 0 0 2rem; 257 | padding: 0; 258 | 259 | &::before { 260 | display: inline; 261 | white-space: pre-wrap; 262 | content: " : "; 263 | 264 | dd + & { 265 | content: "″ : "; 266 | } 267 | } 268 | 269 | &:after { 270 | display: block; 271 | clear: both; 272 | margin: 0; 273 | padding: 0; 274 | content: ""; 275 | } 276 | } 277 | 278 | /* BLOCK ELEMENTS */ 279 | 280 | blockquote { 281 | position: relative; 282 | margin: .675rem 0 .675rem .5rem; 283 | border-left: 5px $web-aside-color double; 284 | padding: 0 2rem 0 calc(1.5rem - 5px); 285 | color: $web-alternate-color; 286 | font-style: italic; 287 | 288 | & blockquote { 289 | margin: .675rem 0; 290 | padding: 0 1rem 0 calc(1rem - 1px); 291 | border-left: 1px $web-aside-color solid; 292 | } 293 | } 294 | 295 | figcaption { 296 | margin: .3375rem 0; 297 | font-size: .85em; 298 | font-weight: 200; 299 | text-align: center; 300 | line-height: 1.25; 301 | } 302 | 303 | figure, iframe, img, svg, video { 304 | display: block; 305 | margin: 0; 306 | border: none; 307 | padding: 0; 308 | max-width: 100%; 309 | } 310 | 311 | main figure, main iframe, main img, main svg, main video { 312 | margin: auto; 313 | width: -webkit-fit-content; 314 | width: -moz-fit-content; 315 | width: fit-content; 316 | } 317 | 318 | figure, main figure { 319 | margin: .675rem auto; 320 | } 321 | 322 | h1, h2, h3, h4, h5, h6 { 323 | margin: 0; 324 | padding: 0; 325 | font-family: 'Rounded Mplus 1c', sans-serif; 326 | font-weight: inherit; 327 | text-align: left; 328 | } 329 | 330 | h1 { 331 | font-family: "VT323", monospace; 332 | margin: 1.35rem auto; 333 | font-size: 3.5em; 334 | font-weight: 500; 335 | line-height: 1; 336 | color: $web-bright-color; 337 | text-align: center; 338 | } 339 | 340 | h2 { 341 | margin: 0 0 1.35rem; 342 | font-size: 1.75em; 343 | font-weight: 900; 344 | line-height: 1; 345 | } 346 | 347 | h3 { 348 | margin: 2.025rem 0 .675rem; 349 | font-size: 1.4em; 350 | font-weight: 700; 351 | line-height: 1.25; 352 | } 353 | 354 | h4 { 355 | margin: 1.35rem 0 .675rem; 356 | color: $web-accent-color; 357 | font-size: 1.2em; 358 | text-decoration: underline; 359 | line-height: 1.125; 360 | 361 | &::before { 362 | content: "> "; 363 | } 364 | 365 | &::after { 366 | white-space: pre; 367 | content: " "; 368 | } 369 | } 370 | 371 | h5 { 372 | margin: .675rem 0; 373 | font-size: inherit; 374 | font-weight: 700; 375 | line-height: inherit; 376 | } 377 | 378 | h6 { 379 | margin: .675rem 0; 380 | font-size: inherit; 381 | line-height: inherit; 382 | } 383 | 384 | hr { 385 | display: block; 386 | position: relative; 387 | margin: 1.35rem 0; 388 | border: none; 389 | padding: 0; 390 | width: 100%; 391 | height: 1.35rem; 392 | background: none; 393 | overflow: hidden; 394 | color: $web-accent-color; 395 | font-family: "VT323", monospace; 396 | text-align: center; 397 | white-space: pre; 398 | } 399 | 400 | hr::after { 401 | display: block; 402 | position: absolute; 403 | top: 0; 404 | left: 0; 405 | right: 0; 406 | height: 1.35rem; 407 | content: "*   *   *"; 408 | } 409 | 410 | iframe[src*="//youtube.com/embed/"], iframe[src*="//www.youtube.com/embed/"] { 411 | width: 560px; 412 | height: 315px; 413 | } 414 | 415 | img.emoji, svg.emoji { 416 | display: inline-block; 417 | margin: 0; 418 | padding: 0; 419 | max-height: .85em; 420 | max-width: .85em; 421 | vertical-align: baseline; 422 | } 423 | 424 | img.inline, svg.inline { 425 | display: inline-block; 426 | margin: 0; 427 | padding: calc(.25em / 1.5); 428 | max-height: calc(1em / 1.5); 429 | max-width: calc(1em / 1.5); 430 | vertical-align: middle; 431 | } 432 | 433 | p { 434 | margin: 0; 435 | padding: 0; 436 | position: relative; 437 | text-align: justify; 438 | 439 | & + p, li:not(:first-child) & { 440 | margin-top: .675em; 441 | } 442 | } 443 | 444 | pre { 445 | margin: .675rem auto; 446 | border: $syntax-background-color solid; 447 | border-width: .675rem 1rem; 448 | width: 100%; 449 | box-sizing: border-box; 450 | color: $syntax-text-color; 451 | background: $syntax-background-color; 452 | font-family: "Anonymous Pro", monospace; 453 | font-size: .8em; 454 | font-weight: 400; 455 | line-height: 1.1; 456 | white-space: pre; 457 | overflow: auto; 458 | -webkit-hyphens: none; 459 | -ms-hyphens: none; 460 | hyphens: none; 461 | } 462 | 463 | svg { 464 | color: inherit; 465 | } 466 | 467 | /* PHRASING */ 468 | 469 | a[href] { 470 | color: $web-link-color; 471 | text-decoration: none; 472 | -webkit-text-decoration-color: inherit; 473 | text-decoration-color: inherit; 474 | transition: color .3s; 475 | transition: color .3s, -webkit-text-decoration-color .3s; 476 | transition: color .3s, text-decoration-color .3s; 477 | 478 | &:hover { 479 | color: $web-link-hover-color; 480 | -webkit-text-decoration-color: transparent; 481 | text-decoration-color: transparent; 482 | } 483 | 484 | main & { 485 | display: inline; 486 | text-decoration: underline; 487 | -webkit-text-decoration-style: dashed; 488 | text-decoration-style: dashed; 489 | } 490 | 491 | header &, nav & { 492 | text-decoration: none; 493 | } 494 | 495 | @media print { 496 | text-decoration: none; 497 | 498 | &::after { 499 | content: " [" attr(href) "]"; 500 | } 501 | } 502 | } 503 | 504 | code, samp, kbd { 505 | font-family: "VT323", monospace; 506 | line-height: 1; 507 | -webkit-hyphens: none; 508 | -ms-hyphens: none; 509 | hyphens: none; 510 | 511 | pre > & { 512 | font-family: inherit; 513 | line-height: inherit; 514 | } 515 | } 516 | 517 | dfn { 518 | font-style: italic; 519 | font-weight: 700; 520 | } 521 | 522 | small { 523 | font-size: .85em; 524 | line-height: 1.25; 525 | } 526 | 527 | strong { 528 | font-weight: 700; 529 | font-variant: small-caps; 530 | 531 | a[href] { 532 | text-decoration: none; 533 | } 534 | } 535 | 536 | -------------------------------------------------------------------------------- /upstreamed-features/bookmarks/bookmarked_toot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/upstreamed-features/bookmarks/bookmarked_toot.png -------------------------------------------------------------------------------- /upstreamed-features/bookmarks/bookmarks_column.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/upstreamed-features/bookmarks/bookmarks_column.png -------------------------------------------------------------------------------- /upstreamed-features/bookmarks/getting_started.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/upstreamed-features/bookmarks/getting_started.png -------------------------------------------------------------------------------- /upstreamed-features/bookmarks/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Bookmarks 3 | --- 4 | 5 | `glitch-soc` allows users to bookmark toots for accessing them later. 6 | 7 | Like favourites, the list of bookmarked toots is stored server-side so that it 8 | can be accessed from different devices. Unlike favourites, though, that 9 | information is not shared with any other user, not even the author of the 10 | bookmarked toot. 11 | 12 | The bookmark button is located in the toot's action bar and changes colors when the toot is bookmarked: 13 | 14 | ![Bookmarked toot](bookmarked_toot.png) 15 | 16 | Bookmarked toots can then be accessed from the "Getting started menu": 17 | 18 | ![Getting started menu](getting_started.png) 19 | 20 | ![Bookmarks column](bookmarks_column.png) 21 | 22 | ### API 23 | 24 | When using the API to interact with `glitch-soc`, you can use a `POST` to the `/api/v1/statuses/:id/bookmark` endpoint to bookmark a toot and `/api/v1/statuses/:id/unbookmark` to remove a bookmark. 25 | 26 | You can also `GET` `/api/v1/bookmarks` to get the list of toots bookmarked by the logged-in user. 27 | -------------------------------------------------------------------------------- /upstreamed-features/filter-improvements/app-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/upstreamed-features/filter-improvements/app-settings.png -------------------------------------------------------------------------------- /upstreamed-features/filter-improvements/filtered-show-why.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/upstreamed-features/filter-improvements/filtered-show-why.png -------------------------------------------------------------------------------- /upstreamed-features/filter-improvements/filtered.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/upstreamed-features/filter-improvements/filtered.png -------------------------------------------------------------------------------- /upstreamed-features/filter-improvements/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Improved filters 3 | --- 4 | 5 | `glitch-soc`'s interface lets you handle filtered toots in a number of different ways, 6 | configurable through the [app settings](../../features/app-settings/). 7 | 8 | ![app settings](./app-settings.png) 9 | 10 | Those options only apply to filters that are *not* marked as “Drop instead of hide”. 11 | 12 | ### Hide filtered toots completely 13 | 14 | You can temporarily hide filtered toots completely instead of having having a 15 | “Filtered” placeholder show up in your timelines. 16 | 17 | ### Show “filtered” like vanilla Mastodon 18 | 19 | This shows a “Filtered” placeholder that cannot be acted upon in the timeline. 20 | 21 | ![filtered](./filtered.png) 22 | 23 | ### Show “filtered” and add a button to display why 24 | 25 | This shows a “Filtered” placeholder in the timeline, along with a clickable 26 | button to show the reasons. 27 | 28 | ![filtered (show why)](./filtered-show-why.png) 29 | 30 | Clicking on that button brings up a modal allowing you to individually inspect 31 | who the author of the toot is, and what filters matched the toot. 32 | 33 | ![show why popup, collapsed](./show-why-collapsed.png) 34 | 35 | ![show why popup, expanded](./show-why-expanded.png) 36 | 37 | Finally, clicking the “Show” button of that popup lets you see the toot, with 38 | an additional button to hide it again. 39 | 40 | ![expanded toot](./toot.png) 41 | 42 | ### Still display the post, and add filtered words to content warning 43 | 44 | Still display the post in the timeline, but if any matching filter word was not 45 | already present in a content warning, add it. 46 | 47 | ![toot with added CW](./toot-added-cw.png) 48 | -------------------------------------------------------------------------------- /upstreamed-features/filter-improvements/show-why-collapsed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/upstreamed-features/filter-improvements/show-why-collapsed.png -------------------------------------------------------------------------------- /upstreamed-features/filter-improvements/show-why-expanded.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/upstreamed-features/filter-improvements/show-why-expanded.png -------------------------------------------------------------------------------- /upstreamed-features/filter-improvements/toot-added-cw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/upstreamed-features/filter-improvements/toot-added-cw.png -------------------------------------------------------------------------------- /upstreamed-features/filter-improvements/toot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/upstreamed-features/filter-improvements/toot.png -------------------------------------------------------------------------------- /upstreamed-features/lists-show-replies-to/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Replies in lists 3 | --- 4 | 5 | `glitch-soc` lets you chose which replies to see in your list timelines. 6 | 7 | ![settings](settings.png) 8 | 9 | By selecting “no one”, only self-replies will show up in that list timeline. 10 | 11 | By selecting “members of the list”, only replies to other members of the list 12 | will show up. 13 | 14 | By selecting “any followed user”, replies to anyone you follow will appear in 15 | the list timeline. 16 | -------------------------------------------------------------------------------- /upstreamed-features/lists-show-replies-to/settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/upstreamed-features/lists-show-replies-to/settings.png -------------------------------------------------------------------------------- /upstreamed-features/optional-boost-hiding/boost_hide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/upstreamed-features/optional-boost-hiding/boost_hide.png -------------------------------------------------------------------------------- /upstreamed-features/optional-boost-hiding/boost_show.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/upstreamed-features/optional-boost-hiding/boost_show.png -------------------------------------------------------------------------------- /upstreamed-features/optional-boost-hiding/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Optional boost hiding 3 | --- 4 | 5 | `glitch-soc` allows users to hide content boosted by accounts they follow. 6 | 7 | When viewing a user's information page, clicking on the menu button brings up a list of actions, including "Hide boosts from @username": 8 | 9 | ![The account action menu](boost_hide.png) 10 | 11 | When selecting this option, future boosts from that user will not appear in your feed. Old boosts from that user will remain in your feed, and boosts *of* that user's toots will also appear in your feed. Only new boosts *from* that user will be hidden. 12 | 13 | To reverse this action, simply select the "Show boosts from @username" option: 14 | 15 | ![The account action menu, showing the "show boosts" option](boost_show.png) 16 | 17 | ### API 18 | 19 | When using the API to interact with `glitch-soc`, you can use a `POST` to the `/api/v1/accounts/:id/follow` endpoint with a `reblogs` parameter (either set in the query-string, or via a JSON post similar to `{"reblogs":false}`) to disable or enable showing boosts. Setting the `reblogs` parameter to `false` will hide boosts from a user, and setting it to `true` (the default) will show boosts from a user. 20 | 21 | This endpoint is idempotent, and can be `POST`ed to even if the account is already being followed. The endpoint can of course be used when initiating a follow: even if the follow is a remote follow or must be approved by the other user, the `reblogs` setting will be kept when the follow succeeds. 22 | -------------------------------------------------------------------------------- /upstreamed-features/optional-notification-muting/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Optional notification muting 3 | --- 4 | 5 | `glitch-soc` allows users to decide when muting another user whether they wish to continue to receive notifications from the muted user. This allows users to choose between `tootsuite`'s current muting behavior and its behavior prior to v1.5.0. 6 | 7 | When muting a user, the confirmation dialog includes a checkbox asking "Hide notifications from this user?", pictured below: 8 | 9 | ![The mute modal](mute-dialog.png) 10 | 11 | With "Hide notifications from this user?" checked, mutes behave like they do on ordinary Mastodon or on Twitter: you no longer see toots from the user in timelines or in the context for other toots, and you no longer receive notifications from the user. With it unchecked, mutes behave the same except you continue to receive notifications from the muted user. 12 | 13 | In the list of muted users, in users' following/followers lists, and similar lists of users, muted users have a bell-shaped button to toggle whether the mute hides notifications. When the mute currently does not hide notifications, the button reverses this behavior, hiding notifications from the user. It looks like: 14 | 15 | ![Mute list display of mutes which allow notifications](mute-list-soft-mute.png) 16 | 17 | and when the mute is set to hide notifications, the button disables notification hiding and looks like: 18 | 19 | ![Mute list display of mutes which hide notifications](mute-list-hard-mute.png) -------------------------------------------------------------------------------- /upstreamed-features/optional-notification-muting/mute-dialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/upstreamed-features/optional-notification-muting/mute-dialog.png -------------------------------------------------------------------------------- /upstreamed-features/optional-notification-muting/mute-list-hard-mute.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/upstreamed-features/optional-notification-muting/mute-list-hard-mute.png -------------------------------------------------------------------------------- /upstreamed-features/optional-notification-muting/mute-list-soft-mute.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/upstreamed-features/optional-notification-muting/mute-list-soft-mute.png -------------------------------------------------------------------------------- /upstreamed-features/profile-metadata/detailed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/upstreamed-features/profile-metadata/detailed.png -------------------------------------------------------------------------------- /upstreamed-features/profile-metadata/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Profile metadata 3 | --- 4 | 5 | Both `Mastodon` and `glitch-soc` allow users to input optional `key: value` pairs in their bios, rendered in a table by the frontend and on static pages. 6 | 7 | This is what it looks like for logged-in users on a glitch-soc server: 8 | 9 | ![detailed](detailed.png) 10 | 11 | And for everyone else, it shows to the right of the avatar: 12 | 13 | ![static](static.png) 14 | 15 | This is done from the profile edition page in glitch-soc's settings. 16 | 17 | ## Legacy glitch-soc implementation 18 | 19 | Before being adopted upstream, `glitch-soc` users used optional `key: value` pairs as YAML-esque frontmatter at the beginning of their bios. 20 | 21 | An example of a bio with this frontmatter is as follows: 22 | 23 | ```yaml 24 | --- 25 | Pronouns: any you like 26 | Website: example.com 27 | Whois: Unknown 28 | Call me: Maybe 29 | ... 30 | 31 | what's up 32 | ``` 33 | 34 | ### Syntax 35 | 36 | > *In brief:* start with `---`, then add `key: value` one per line, 37 | > and close it with `...` on it's own line. Anything that follows 38 | > is your bio text. 39 | 40 | The syntax for profile frontmatter matches that used for single-line YAML implicit keys. 41 | Strings may be provided in single-quoted, double-quoted or plain (unquoted) styles. 42 | 43 | Although `glitch-soc` borrows the *syntax* of YAML for its profile frontmatter, it does not borrow the *semantics*: Ordering and duplicate keys are preserved, and every value is interpreted as a string. 44 | Links, hashtags, and mentions are all valid inside of frontmatter keys or values. 45 | -------------------------------------------------------------------------------- /upstreamed-features/profile-metadata/static.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/glitch-soc/docs/f90f469aa97a5f91bacaad8a98698f934b354b53/upstreamed-features/profile-metadata/static.png --------------------------------------------------------------------------------