Главная страница>Связанные с программированием>Другой исходный код
Скачать

Фанпи

Минималистичный и самоуверенный веб-клиент Mastodon.

Необычный скриншот

?️ Произношение : /fænpi/ ( FAN-pee ) ? Слушать

Это альтернативный веб-клиент для Mastodon.

  • ? Производство : https://phanpy.social
    • production отрасль
    • реже ломайся
    • более медленные исправления, кроме критических
  • ?️ Разработка : https://dev.phanpy.social
    • main филиал
    • возможно, раньше увидим новые крутые вещи
    • может ломаться чаще
    • тоже можно исправить гораздо быстрее

? Следите за обновлениями @phanpy на Mastodon ✨

Все спроектировано и спроектировано в соответствии с моим вкусом и видением. Это мой личный побочный проект, позволяющий узнать о Mastodon и поэкспериментировать с новыми идеями UI/UX.

Функции

  • ? Несколько учетных записей
  • ? Всплывающее окно создания сообщения
  • ? Светлая/темная/автоматическая тема
  • ? Сгруппированные уведомления
  • ? Вложенная цепочка комментариев
  • ? Неотправленный черновик восстановления
  • ? Карусель повышения™️
  • ⚡ Ярлыки™️ с такими режимами просмотра, как несколько столбцов или панель вкладок.
  • #️⃣ Лента с несколькими хэштегами

Дизайнерские решения

  • Действия со статусом (ответить, повысить, добавить в избранное, добавить в закладки и т. д.) по умолчанию скрыты .
    Они появляются только на отдельной странице статуса. Это делается для того, чтобы уменьшить беспорядок и отвлечение внимания. Это может привести к снижению вовлеченности, но мы здесь не гонимся за цифрами.
  • Повышение представлено значком ракеты .
    Зелёная иконка с двойной стрелкой (ретвит для Твиттера) не подходит для термина «повышение». Зеленая ракета выглядит странно, поэтому я использую фиолетовый.
  • Короткие имена пользователей ( @username ) отображаются на временных шкалах вместо полного имени пользователя учетной записи ( @username@instance ) .
    Несмотря на то, что в руководстве упоминается, что «Децентрализация должна быть прозрачной для пользователя», я не думаю, что нам следует каждый раз бросать это в глаза. Существуют также некоторые проблемы с доступностью полного имени пользователя, связанные с программой чтения с экрана, хотя это веб-приложение, к сожалению, пока недоступно.
  • Нет автозапуска видео/GIF/чего угодно на временной шкале .
    Хронология уже представляет собой огромный беспорядок: множество людей, брендов, новостей и средств массовой информации пытаются привлечь ваше внимание. Давайте не будем делать хуже. (Текущим исключением теперь будут анимированные смайлы.)
  • URL-адреса на основе хеша .
    Это веб-приложение не предназначено для полноценной замены существующего интерфейса Mastodon. Здесь нет SEO, баз данных, бессерверных или долго работающих серверов. Однажды я могу ошибаться.

Тонкие реализации пользовательского интерфейса

Отображение имени пользователя

Отображение имени пользователя

  • На временной шкале имя пользователя отображается как [NAME] @[username] .
  • Для @[username] всегда исключайте доменное имя экземпляра.
  • Если [NAME] выглядит так же, как @[username] , то @[username] также исключается.

Ускоряет Карусель

Ускоряет Карусель

  • Из полученных сообщений (например, 20 сообщений за одно получение), если количество повышений превышает четверть от общего числа сообщений или более 3 последовательных повышений, будет запущен пользовательский интерфейс карусели повышения.
  • Если количество рекламных сообщений превышает 3 четверти от общего числа сообщений, пользовательский интерфейс карусели повышения будет размещен в конце общего количества полученных сообщений (на «страницу»).
  • В противном случае пользовательский интерфейс карусели Boosts будет располагаться между публикациями.

Значок номера резьбы (например, резьба 1/X)

Значок номера резьбы

  • Проверяйте каждое сообщение на наличие inReplyToId из кеша или дополнительных запросов API, пока не будет найдено корневое сообщение.
  • Если корневое сообщение найдено, на значке будет показан порядковый номер сообщения в теме.
  • Ограничьте до трех запросов API, так как корневое сообщение может быть очень старым или поток очень длинный.
  • Если индексный номер не найден, значок вернется к отображению Thread без номера.

Набивка хэштегов сворачивается

Набивка хэштегов сворачивается

  • Первый абзац публикации с более чем 3 хэштегами будет свернут до 3 строк.
  • Последующие абзацы после первого абзаца с более чем 3 хэштегами будут свернуты в 1 строку.
  • Соседние абзацы с более чем 1 хэштегом после свернутых абзацев будут свернуты до 1 строки.
  • Если вокруг или между хэштегами есть текст, они не будут свернуты.
  • Свернутые хэштеги будут дополнены ... в конце.
  • Они также слегка затемнены, чтобы уменьшить визуальный шум.
  • Открытие просмотра публикации покажет хэштеги в развернутом виде.

Отфильтрованные сообщения

  • Сообщения с фильтром «Скрыть полностью» будут скрыты без пользовательского интерфейса, который мог бы их показать.
  • Сообщения, отфильтрованные по принципу «Скрыть с предупреждением», будут частично скрыты, показывая имя фильтра и имя автора.
    • Содержимое можно частично раскрыть, наведя курсор на публикацию, при этом всплывающая подсказка покажет текст публикации.
    • Нажав на нее, вы откроете страницу публикации.
    • Длительное нажатие или щелчок правой кнопкой мыши «просмотрит» публикацию с пользовательским интерфейсом нижнего листа.
    • На карусели бустов они сортируются до конца карусели.

Разработка

Предварительные требования: Node.js 18+.

  • npm install — установка зависимостей
  • npm run dev — параллельно запустить сервер разработки и messages:extract ( clean + ``watch`)
  • npm run build — сборка для производства
  • npm run preview — предварительный просмотр производственной сборки.
  • npm run fetch-instances — получить список экземпляров с сайта joinmastodon.org/servers, сохранить его в src/data/instances.json
  • npm run sourcemap — запустить source-map-explorer в производственной сборке.
  • npm run messages:extract — извлекает сообщения из исходных файлов и обновляет каталоги сообщений локали.

Технический стек

  • Vite — инструмент для сборки
  • Preact — библиотека пользовательского интерфейса
  • Валтио - Управление государством
  • React Router — Маршрутизация
  • masto.js — API-клиент Mastodon
  • Iconify — библиотека иконок
    • МинМилые иконки
  • Лингви — Интернационализация
  • Ванильный CSS. Да, я олдскульный.

Некоторые из них могут измениться в будущем. Мир фронтенда постоянно меняется.

Интернационализация

Все переводы доступны в виде файлов gettext .po в папке src/locales . Язык по умолчанию — английский ( en ). Правила множественного числа CLDR используются для множественного числа. Языки RTL (с письмом справа налево) также поддерживаются с правильным направлением текста, отображением значков и макетом.

При загрузке страницы язык по умолчанию определяется с помощью следующих методов (используется первое совпадение):

  1. lang параметра URL, например /?lang=zh-Hant
  2. lang ключа localStorage
  3. navigator.language браузера

Пользователи могут изменить язык в настройках, который задает ключ localStorage lang .

Руководство для переводчиков

*На основе руководства по Translate WordPress:

  • Не переводите буквально, переводите органично.
  • Постарайтесь сохранить тот же уровень формальности (или неформальности).
  • Не используйте сленг или термины, относящиеся к конкретной аудитории.
  • Будьте внимательны к заполнителям для переменных. Многие строки имеют заполнители, например {account} (переменная), <0>{name}</0> (тег с переменной) и # (заполнитель числа).
  • Многоточие (…) введено намеренно. Не удаляйте его.
    • Nielsen Norman Group: «Включите многоточие в текст команды, чтобы указать, когда требуется дополнительная информация»
    • Рекомендации Apple по пользовательскому интерфейсу: «Добавьте многоточие к метке пункта меню, если для выполнения действия требуется дополнительная информация. Символ многоточия (…) сигнализирует о том, что людям необходимо ввести информацию или сделать дополнительный выбор, обычно в другом представлении».
    • Разработка приложений для Windows: «Многоточие означает незавершенность».
  • Метки времени, диапазоны дат, числа, названия языков и сегментация текста обрабатываются API интернационализации ECMAScript.
    • Intl.DateTimeFormat — например, «8 августа», «08.08.2024».
    • Intl.RelativeTimeFormat — например, «2 дня назад», «через 2 дня».
    • Intl.NumberFormat — например, «1000», «10K».
    • Intl.DisplayNames — например, «Английский» ( en ) в традиционном китайском ( zh-Hant ) — это «英文».
    • Intl.Locale (с полифиллом для старых браузеров)
    • Intl.Segmenter (с полифиллом для старых браузеров)

Технические примечания

  • Идентификаторы строк генерируются автоматически, а не определяются явно. Некоторые из преимуществ заключаются в том, чтобы избежать проблемы «именования вещей» и дублирования.
    • Явные идентификаторы могут быть введены в будущем, когда изменятся требования и приоритеты. Библиотека (Lingui) позволяет и то, и другое.
    • Сообщайте о проблемах, если определенные строки переводятся по-разному в зависимости от контекста, культуры или региона.
  • Для push-уведомлений нет строк. Язык устанавливается на сервере экземпляра.
  • Собственные средства выбора даты в HTML, например <input type="month"> всегда будут следовать языковому стандарту системы, а не языковому стандарту, установленному пользователем.
  • «ALT» в значке ALT не переводится. Он служит узнаваемым стандартом на всех языках.
  • Пользовательские имена смайлов не локализуются, поэтому поиск не работает для языков, отличных от английского.
  • GIPHY API поддерживает список языков для поиска.
  • Знак справа налево в Юникоде (RLM) ( U+200F , &rlm; ), возможно, потребуется использовать для смешанного текста RTL/LTR, особенно для элемента <title> ( document.title ).
  • В разработке имеется дополнительная локаль pseudo-LOCALE , используемая для псевдолокализации. Это для тестирования и не появится в производстве.
  • При сборке для производства сообщения каталога на английском языке ( en ) не группируются отдельно. Другие локали упакованы в отдельные файлы и загружаются по требованию. Это гарантирует, что en всегда будет доступен в качестве резервного варианта.

Волонтерские переводы

Переводы управляются на Crowdin. Вы можете помочь, добровольно предоставив переводы.

Чтобы начать, прочтите вступительную документацию.

Самостоятельный хостинг

Это чисто статическое веб-приложение . Вы можете разместить его где угодно.

Два способа (выберите один):

Простой способ

Перейдите в раздел «Релизы» и загрузите последнюю версию phanpy-dist.zip или phanpy-dist.tar.gz . Он предварительно создан, поэтому не нужно запускать какие-либо команды установки/сборки. Извлеките его. Служите папке с извлеченными файлами.

Индивидуальный способ сборки

Требуется Node.js.

Загрузите или git clone . Используйте production ветку для стабильных выпусков, main — для последних версий . Соберите его, запустив npm run build (после npm install ). Обслужить папку dist .

Настройку можно выполнить, передав переменные среды команде сборки. Примеры: 

PHANPY_CLIENT_NAME= " Phanpy Dev " 
    PHANPY_WEBSITE= " https://dev.phanpy.social " 
    npm run build
PHANPY_DEFAULT_INSTANCE=hachyderm.io 
    PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL=https://hachyderm.io/auth/sign_up 
    PHANPY_PRIVACY_POLICY_URL=https://hachyderm.io/privacy-policy 
    npm run build

Их также можно установить в файле .env .

Доступные переменные:

  • PHANPY_CLIENT_NAME (необязательно, по умолчанию: Phanpy ) влияет на:
    • Заголовок веб-страницы, отображаемый в окне браузера или заголовке вкладки
    • Название приложения, если оно установлено как PWA, отображается на главном экране, в доке macOS, на панели задач Windows и т. д.
    • Название карты OpenGraph при публикации в социальных сетях
    • Имя клиента при регистрации приложения для аутентификации и отображается как клиент, используемый в сообщениях в некоторых приложениях/клиентах.
  • PHANPY_WEBSITE (необязательно, но рекомендуется, по умолчанию: https://phanpy.social ) влияет на:
    • Канонический URL-адрес веб-сайта
    • URL-адрес карты OpenGraph при публикации в социальных сетях
    • Корневой путь для образа карты OpenGraph
    • URL-адрес клиента при регистрации приложения для аутентификации и отображается как клиент, используемый в сообщениях в некоторых приложениях/клиентах.
  • PHANPY_DEFAULT_INSTANCE (необязательно, без значений по умолчанию):
    • например, «mastodon.social», без https://
    • Экземпляр по умолчанию для входа в систему
    • При входе в систему пользователь будет мгновенно перенаправлен на страницу аутентификации экземпляра вместо того, чтобы вручную вводить URL-адрес экземпляра и отправлять его.
  • PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL (необязательно, без значений по умолчанию):
    • URL страницы регистрации экземпляра
    • Например, https://mastodon.social/auth/sign_up
  • PHANPY_PRIVACY_POLICY_URL (необязательно, по умолчанию используется политика конфиденциальности официального экземпляра):
    • URL страницы политики конфиденциальности
    • Может указывать собственную политику конфиденциальности экземпляра.
  • PHANPY_DEFAULT_LANG (необязательно):
    • Язык по умолчанию — английский ( en ), если не указан.
    • Резервный язык после нескольких методов обнаружения (параметр запроса lang , ключ lang в localStorage и navigator.language ).
  • PHANPY_LINGVA_INSTANCES (необязательный, список через пробел, по умолчанию: lingva.phanpy.social [...hard-coded list of fallback instances] ):
    • Укажите список экземпляров, разделенный пробелами. Сначала будет использоваться по умолчанию, прежде чем вернуться к последующим экземплярам. Если есть только 1 экземпляр, это означает отсутствие резервного варианта.
    • Можно указать самостоятельный экземпляр Lingva, работающий на базе lingva-translate или lingva-api.
    • Список резервных экземпляров, жестко закодированных в /.env
    • ↗️ Список экземпляров lingva-translate
  • PHANPY_IMG_ALT_API_URL (необязательно, без значений по умолчанию):
    • Конечная точка API для локального экземпляра img-alt-api.
    • Если это предусмотрено, для пользователей появится настройка, позволяющая включить генератор описания изображений в композиторе. По умолчанию отключено.
  • PHANPY_GIPHY_API_KEY (необязательно, без значений по умолчанию):
    • API-ключ для GIPHY. См. документацию по API.
    • Если это предусмотрено, пользователям появится настройка, позволяющая включить средство выбора GIF в композиторе. По умолчанию отключено.
    • Это не самостоятельный хостинг.

Хостинг статического сайта

Попробуйте поискать в Интернете запрос «как самостоятельно размещать статические сайты», поскольку существует множество способов сделать это.

Хостинг Lingva-translate или lingva-api

См. документацию по lingva-translate или lingva-api.

Развертывания сообщества

Они организованы другими замечательными людьми.

Примечание. Добавьте свой, создав запрос на включение.

Затраты

Затраты на запуск и разработку этого веб-приложения:

  • Доменное имя (.social): 23,18 долларов США в год (6,87 долларов США в первый год)
  • Хостинг: Бесплатно
  • Разработка, дизайн, сопровождение: "Бесплатно" (Мое драгоценное время)

Талисман

Фанпи — покемон Земляного типа.

Мейнтейнеры + участники

  • Чи Аун (Мастодонт) (Твиттер)

Волонтёры-переводчики

  • alidsds11 (арабский)
  • альтернатива (корейский)
  • BoFFire (арабский, французский, кабильский)
  • Бравару (русский)
  • cbasje (голландский)
  • cbo92 (французский)
  • CDN (китайский упрощенный)
  • dannypsnl (традиционный китайский)
  • датабио (каталанский)
  • Дизро (итальянский)
  • Drift6944 (Чехия)
  • Драйдэнву (традиционный китайский)
  • Элиссарк (французский)
  • ЭльПамплина (испанский)
  • Фитик (эсперанто, иврит)
  • Фреезия (яп.)
  • гош (галисийский)
  • Хонминхи (корейский)
  • Гугоглиф (эсперанто, испанский)
  • изард (каталанский)
  • калиуву (польский)
  • Карлафей (Чешский)
  • катулло11 (итальянский)
  • Китта (немецкий)
  • лунь (тайский)
  • lucasofchirst (окситанский, португальский, португальский, бразильский)
  • Люкхонг (традиционный китайский)
  • марцин Козински (польский)
  • mkljczkk (польский)
  • моджосон (корейский)
  • Мореаль (корейский)
  • MrWillCom (китайский упрощенный)
  • нклм (французский)
  • паспи (итальянский)
  • punkrockgirl (баскский)
  • радекос (французский)
  • Разем (Чехия)
  • Realpixelcode (немецкий)
  • Резахоссейнзаде (персидский)
  • rwmpelstilzchen (эсперанто, иврит)
  • СадмЛ (русский)
  • SadmL_AI (русский)
  • сюдзи3 (японский)
  • Sky_NiniKo (фр.)
  • Steffo99 (итальянский)
  • Su5hicz (Чехия)
  • тферрермо (испанский)
  • tkbremnes (норвежский букмаль)
  • тукс93 (немецкий)
  • Вак31. (Литовский)
  • Валтлай (финский)
  • васирири (польский)
  • путешествие (традиционный китайский)
  • xabi_itzultzaile (баскский)
  • xen4n (украинский)
  • xqueralt (каталанский)
  • ЗириСут (Кабиле)
  • Зкремль (Чешский)

Предыстория

Я один из первых пользователей Twitter. Твиттер был запущен 15 июля 2006 года. Я присоединился к нему в декабре 2006 года, а мой первый твит был опубликован 18 декабря 2006 года.

Я знаю, как выглядит ранний Твиттер. Это было весело.

Тогда я сделал клон Twitter под названием «Twig», написанный на Python и Google App Engine. Я почти сделал свой собственный настольный клиент Twitter, написанный на Appcelerator Titanium. Один из своих лучших докладов о клиенте Twitter я сделал на мини-конференции. Я создал эту штуку под названием «Колонки Твиттера», веб-приложение, которое показывает список ваших подписчиков, подписчиков ваших подписчиков, ваших подписчиков, подписчиков ваших подписчиков и так далее. В 2009 году я написал запись в блоге под названием «Как я начал работать с Twitter». Я создал две темы для DestroyTwitter (клиент для настольных компьютеров, созданный Джонни Холлманом в Adobe Air), и одна из них называется «Vimeo». В 2013 году я написал собственный сайт резервного копирования твитов с интерфейсом для просмотра моих твитов и серверной частью CouchDB для их хранения.

Прошло более 15 лет .

И вот я здесь. Создание веб-клиента Mastodon.

Альтернативные веб-клиенты

  • Фанпи вилки ↓
    • Агора
  • Передник (пенсионер) - вилки ↓
    • Семафор
    • Наперёд
  • Кукушка+
  • Сенги
  • Мыльница
  • Лось - вилки ↓
    • elk.fedified.com
  • Мастодек
  • Стволы
  • Тути
  • туалетный лоток
  • Статузер
  • клыкастый
  • Mastodon Glitch Edition (автономный интерфейс)
  • Марганец
  • TheDesk
  • Более...

?‍♂️ Уведомление всем остальным разработчикам клиентов социальных сетей.

Пожалуйста, скопируйте идеи пользовательского интерфейса и эксперименты из этого приложения. Я думаю, что некоторые из них довольно хороши, и было бы здорово, если бы они были в большем количестве приложений.

Если вы не разработчик, расскажите своим любимым разработчикам клиентов социальных сетей об этом приложении и попросите их скопировать идеи и эксперименты пользовательского интерфейса.

Лицензия

Массачусетский технологический институт.

Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все