From 3ae82d6898d06d0f6d8ae34e163c062783e09a26 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 16 Dec 2022 09:20:30 +0800 Subject: [PATCH 1/4] Handle "unknown" media On mastodon.social, images have type:image, but hachyderm returns type:unknown Found this when editing a post and add two images, on mastodon.social. --- src/components/status.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/status.jsx b/src/components/status.jsx index 595361ba..dc135046 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -54,7 +54,8 @@ function Media({ media, showOriginal, onClick }) { focalBackgroundPosition = `${x.toFixed(0)}% ${y.toFixed(0)}%`; } - if (type === 'image') { + if (type === 'image' || (type === 'unknown' && previewUrl && url)) { + // Note: type: unknown might not have width/height return (
Date: Fri, 16 Dec 2022 13:26:38 +0800 Subject: [PATCH 2/4] Try this 50% width for card image It's tough trying to balance the space required by the image vs the card title/desc/etc --- src/components/status.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/status.css b/src/components/status.css index 1c640b28..2be410d8 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -312,7 +312,8 @@ background: var(--bg-color); } .card .image { - min-width: 120px; + /* min-width: 120px; */ + width: 50%; max-width: 160px; height: auto; min-height: 120px; From 665b9086985b4ad51c939c03cc03543654a6feee Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 16 Dec 2022 13:27:04 +0800 Subject: [PATCH 3/4] Put names into every export --- src/components/account.jsx | 6 ++++-- src/components/avatar.jsx | 6 ++++-- src/components/icon.jsx | 6 ++++-- src/components/loader.jsx | 22 +++++++++++++--------- src/components/modal.jsx | 6 ++++-- src/components/name-text.jsx | 6 ++++-- src/pages/home.jsx | 6 ++++-- src/pages/login.jsx | 6 ++++-- src/pages/notifications.jsx | 7 ++++--- src/pages/settings.jsx | 6 ++++-- src/pages/status.jsx | 6 ++++-- src/pages/welcome.jsx | 6 ++++-- src/utils/enhance-content.js | 6 ++++-- src/utils/html-content-length.js | 4 ++-- src/utils/open-compose.js | 4 ++-- src/utils/useTitle.js | 4 ++-- 16 files changed, 67 insertions(+), 40 deletions(-) diff --git a/src/components/account.jsx b/src/components/account.jsx index 199846bd..b5310217 100644 --- a/src/components/account.jsx +++ b/src/components/account.jsx @@ -9,7 +9,7 @@ import store from '../utils/store'; import Avatar from './avatar'; import NameText from './name-text'; -export default ({ account }) => { +function Account({ account }) { const [uiState, setUIState] = useState('default'); const isString = typeof account === 'string'; const [info, setInfo] = useState(isString ? null : account); @@ -181,4 +181,6 @@ export default ({ account }) => { )}
); -}; +} + +export default Account; diff --git a/src/components/avatar.jsx b/src/components/avatar.jsx index 1f6d98b8..3059b1e2 100644 --- a/src/components/avatar.jsx +++ b/src/components/avatar.jsx @@ -8,7 +8,7 @@ const SIZES = { xxl: 50, }; -export default ({ url, size, alt = '' }) => { +function Avatar({ url, size, alt = '' }) { size = SIZES[size] || size || SIZES.m; return ( { )} ); -}; +} + +export default Avatar; diff --git a/src/components/icon.jsx b/src/components/icon.jsx index 2fec0714..b16af646 100644 --- a/src/components/icon.jsx +++ b/src/components/icon.jsx @@ -43,7 +43,7 @@ const ICONS = { plus: 'mingcute:add-circle-line', }; -export default ({ icon, size = 'm', alt, title, class: className = '' }) => { +function Icon({ icon, size = 'm', alt, title, class: className = '' }) { if (!icon) return null; const iconSize = SIZES[size]; @@ -74,4 +74,6 @@ export default ({ icon, size = 'm', alt, title, class: className = '' }) => { ); -}; +} + +export default Icon; diff --git a/src/components/loader.jsx b/src/components/loader.jsx index 84dcf683..9ef93583 100644 --- a/src/components/loader.jsx +++ b/src/components/loader.jsx @@ -1,11 +1,15 @@ import './loader.css'; -export default ({ abrupt, hidden }) => ( - ); -}; +} + +export default Home; diff --git a/src/pages/login.jsx b/src/pages/login.jsx index ef703c27..39975136 100644 --- a/src/pages/login.jsx +++ b/src/pages/login.jsx @@ -6,7 +6,7 @@ import { getAuthorizationURL, registerApplication } from '../utils/auth'; import store from '../utils/store'; import useTitle from '../utils/useTitle'; -export default () => { +function Login() { useTitle('Log in'); const instanceURLRef = useRef(); const cachedInstanceURL = store.local.get('instanceURL'); @@ -96,4 +96,6 @@ export default () => { ); -}; +} + +export default Login; diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx index 4a4c4720..b82cf2c5 100644 --- a/src/pages/notifications.jsx +++ b/src/pages/notifications.jsx @@ -187,7 +187,7 @@ function NotificationsList({ notifications, emptyCopy }) { ); } -export default () => { +function Notifications() { useTitle('Notifications'); const snapStates = useSnapshot(states); const [uiState, setUIState] = useState('default'); @@ -271,7 +271,6 @@ export default () => { { today: [], yesterday: [], older: [] }, ); // console.log(groupedNotifications); - return (
@@ -371,4 +370,6 @@ export default () => {
); -}; +} + +export default Notifications; diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx index 0875c474..925d6a25 100644 --- a/src/pages/settings.jsx +++ b/src/pages/settings.jsx @@ -13,7 +13,7 @@ import store from '../utils/store'; - Dark/light/auto theme switch (done with adding/removing 'is-light' or 'is-dark' class on the body) */ -export default ({ onClose }) => { +function Settings({ onClose }) { // Accounts const accounts = store.local.getJSON('accounts'); const currentAccount = store.session.get('currentAccount'); @@ -206,4 +206,6 @@ export default ({ onClose }) => { )} ); -}; +} + +export default Settings; diff --git a/src/pages/status.jsx b/src/pages/status.jsx index 1f2b8d7f..8b27f7b6 100644 --- a/src/pages/status.jsx +++ b/src/pages/status.jsx @@ -14,7 +14,7 @@ import Status from '../components/status'; import states from '../utils/states'; import useTitle from '../utils/useTitle'; -export default ({ id }) => { +function StatusPage({ id }) { const snapStates = useSnapshot(states); const [statuses, setStatuses] = useState([{ id }]); const [uiState, setUIState] = useState('default'); @@ -215,4 +215,6 @@ export default ({ id }) => { ); -}; +} + +export default StatusPage; diff --git a/src/pages/welcome.jsx b/src/pages/welcome.jsx index 27657f28..f9940a98 100644 --- a/src/pages/welcome.jsx +++ b/src/pages/welcome.jsx @@ -3,7 +3,7 @@ import './welcome.css'; import logo from '../assets/logo.svg'; import useTitle from '../utils/useTitle'; -export default () => { +function Welcome() { useTitle(); return (
@@ -44,4 +44,6 @@ export default () => {

); -}; +} + +export default Welcome; diff --git a/src/utils/enhance-content.js b/src/utils/enhance-content.js index 1034cfc5..783bcffe 100644 --- a/src/utils/enhance-content.js +++ b/src/utils/enhance-content.js @@ -2,7 +2,7 @@ import emojifyText from './emojify-text'; const fauxDiv = document.createElement('div'); -export default (content, opts = {}) => { +function enhanceContent(content, opts = {}) { const { emojis, postEnhanceDOM = () => {} } = opts; let enhancedContent = content; const dom = document.createElement('div'); @@ -64,7 +64,7 @@ export default (content, opts = {}) => { enhancedContent = dom.innerHTML; return enhancedContent; -}; +} function extractTextNodes(dom) { const textNodes = []; @@ -80,3 +80,5 @@ function extractTextNodes(dom) { } return textNodes; } + +export default enhanceContent; diff --git a/src/utils/html-content-length.js b/src/utils/html-content-length.js index 039edef2..d01cb130 100644 --- a/src/utils/html-content-length.js +++ b/src/utils/html-content-length.js @@ -1,5 +1,5 @@ const div = document.createElement('div'); -export default (html) => { +export default function htmlContentLength(html) { div.innerHTML = html; return div.innerText.length; -}; +} diff --git a/src/utils/open-compose.js b/src/utils/open-compose.js index daa026af..48579c4e 100644 --- a/src/utils/open-compose.js +++ b/src/utils/open-compose.js @@ -1,4 +1,4 @@ -export default (opts) => { +export default function openCompose(opts) { const url = new URL('/compose/', window.location); const { width: screenWidth, height: screenHeight } = window.screen; const left = Math.max(0, (screenWidth - 600) / 2); @@ -20,4 +20,4 @@ export default (opts) => { } return newWin; -}; +} diff --git a/src/utils/useTitle.js b/src/utils/useTitle.js index 70e297cf..e0f61ece 100644 --- a/src/utils/useTitle.js +++ b/src/utils/useTitle.js @@ -2,8 +2,8 @@ import { useEffect } from 'preact/hooks'; const { VITE_CLIENT_NAME: CLIENT_NAME } = import.meta.env; -export default (title) => { +export default function useTitle(title) { useEffect(() => { document.title = title ? `${title} / ${CLIENT_NAME}` : CLIENT_NAME; }, [title]); -}; +} From ec0b76901a47d73944e7f855763ecb6aecdeedcd Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 16 Dec 2022 13:30:07 +0800 Subject: [PATCH 4/4] Disable this faded out hash character It's annoying when folks post many many hashtags in a sentence but at the same time I need this to be the "identifier" that it's a link and clickable As Phanpy doesn't handle hashtag links yet (in itself), this needs to be distinct. --- src/app.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app.css b/src/app.css index 4066f341..3cdd82e4 100644 --- a/src/app.css +++ b/src/app.css @@ -24,9 +24,9 @@ a.mention span { text-decoration-line: underline; text-decoration-color: inherit; } -a.mention:has(span).hashtag { +/* a.mention:has(span).hashtag { color: var(--link-light-color); -} +} */ a.mention span { color: var(--text-color); }