diff --git a/.github/workflows/prodtag.yml b/.github/workflows/prodtag.yml
index 8d62deb7..8a2b4392 100644
--- a/.github/workflows/prodtag.yml
+++ b/.github/workflows/prodtag.yml
@@ -20,11 +20,13 @@ jobs:
with:
node-version: 18
- run: npm ci && npm run build
- - run: cd dist && zip -r ../phanpy-dist.zip . && cd ..
+ - run: cd dist && zip -r ../phanpy-dist.zip . && tar -czf ../phanpy-dist.tar.gz . && cd ..
- id: tag_name
run: echo ::set-output name=tag_name::$(date +%Y.%m.%d).$(git rev-parse --short HEAD)
- uses: softprops/action-gh-release@v1
with:
tag_name: ${{ steps.tag_name.outputs.tag_name }}
generate_release_notes: true
- files: phanpy-dist.zip
+ files: |
+ phanpy-dist.zip
+ phanpy-dist.tar.gz
diff --git a/.gitignore b/.gitignore
index a007290c..09deb601 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,4 +26,5 @@ dist-ssr
# Custom
.env.dev
src/data/instances-full.json
-phanpy-dist.zip
\ No newline at end of file
+phanpy-dist.zip
+phanpy-dist.tar.gz
\ No newline at end of file
diff --git a/README.md b/README.md
index ffb5f9eb..13533043 100644
--- a/README.md
+++ b/README.md
@@ -172,6 +172,7 @@ And here I am. Building a Mastodon web client.
- [Litterbox](https://litterbox.koyu.space/)
- [Statuzer](https://statuzer.com/)
- [Tusked](https://tusked.app/)
+- [Mastodon Glitch Edition (standalone frontend)](https://iceshrimp.dev/iceshrimp/masto-fe-standalone)
- [More...](https://github.com/hueyy/awesome-mastodon/#clients)
## 💁♂️ Notice to all other social media client developers
diff --git a/package-lock.json b/package-lock.json
index 92f2498b..1aae5cce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,8 @@
"name": "phanpy",
"version": "0.1.0",
"dependencies": {
- "@formatjs/intl-localematcher": "~0.4.2",
- "@formkit/auto-animate": "~0.8.0",
+ "@formatjs/intl-localematcher": "~0.5.0",
+ "@formkit/auto-animate": "~0.8.1",
"@github/text-expander-element": "~2.5.0",
"@iconify-icons/mingcute": "~1.2.9",
"@justinribeiro/lite-youtube": "~1.5.0",
@@ -36,7 +36,7 @@
"swiped-events": "~1.1.7",
"toastify-js": "~1.12.0",
"uid": "~2.0.2",
- "use-debounce": "~9.0.4",
+ "use-debounce": "~10.0.0",
"use-long-press": "~3.2.0",
"use-resize-observer": "~9.1.0",
"valtio": "1.9.0"
@@ -51,7 +51,7 @@
"vite": "~4.5.0",
"vite-plugin-generate-file": "~0.0.4",
"vite-plugin-html-config": "~1.0.11",
- "vite-plugin-pwa": "~0.16.6",
+ "vite-plugin-pwa": "~0.16.7",
"vite-plugin-remove-console": "~2.1.1",
"workbox-cacheable-response": "~7.0.0",
"workbox-expiration": "~7.0.0",
@@ -3082,17 +3082,17 @@
}
},
"node_modules/@formatjs/intl-localematcher": {
- "version": "0.4.2",
- "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.2.tgz",
- "integrity": "sha512-BGdtJFmaNJy5An/Zan4OId/yR9Ih1OojFjcduX/xOvq798OgWSyDtd6Qd5jqJXwJs1ipe4Fxu9+cshic5Ox2tA==",
+ "version": "0.5.0",
+ "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.0.tgz",
+ "integrity": "sha512-K1Xpg/8oyfCMxisJQa/fILoeoeyndcM0wcN8QiNG/uM5OAe1BcO1+2yd0gIboDI2tRJEsUi/sSBEYPbgkIdq4A==",
"dependencies": {
"tslib": "^2.4.0"
}
},
"node_modules/@formkit/auto-animate": {
- "version": "0.8.0",
- "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-0.8.0.tgz",
- "integrity": "sha512-G8f7489ka0mWyi+1IEZT+xgIwcpWtRMmE2x+IrVoQ+KM1cP6VDj/TbujZjwxdb0P8w8b16/qBfViRmydbYHwMw=="
+ "version": "0.8.1",
+ "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-0.8.1.tgz",
+ "integrity": "sha512-0/Z2cuNXWVVIG/l0SpcHAWFhGdvLJ8DRvEfRWvmojtmRWfEy+LWNwgDazbZqY0qQYtkHcoEK3jBLkhiZaB/4Ig=="
},
"node_modules/@github/combobox-nav": {
"version": "2.1.5",
@@ -7232,11 +7232,11 @@
}
},
"node_modules/use-debounce": {
- "version": "9.0.4",
- "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-9.0.4.tgz",
- "integrity": "sha512-6X8H/mikbrt0XE8e+JXRtZ8yYVvKkdYRfmIhWZYsP8rcNs9hk3APV8Ua2mFkKRLcJKVdnX2/Vwrmg2GWKUQEaQ==",
+ "version": "10.0.0",
+ "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.0.tgz",
+ "integrity": "sha512-XRjvlvCB46bah9IBXVnq/ACP2lxqXyZj0D9hj4K5OzNroMDpTEBg8Anuh1/UfRTRs7pLhQ+RiNxxwZu9+MVl1A==",
"engines": {
- "node": ">= 10.0.0"
+ "node": ">= 16.0.0"
},
"peerDependencies": {
"react": ">=16.8.0"
@@ -7446,9 +7446,9 @@
}
},
"node_modules/vite-plugin-pwa": {
- "version": "0.16.6",
- "resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.16.6.tgz",
- "integrity": "sha512-bQPDOWvhPMwydMoWqohXvIzvrq4X8iuCF+q95qEiaM4yC0ybViGKWMnWcpWp0vcnoLk7QvxHDlK65KUZvqB3Sg==",
+ "version": "0.16.7",
+ "resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.16.7.tgz",
+ "integrity": "sha512-4WMA5unuKlHs+koNoykeuCfTcqEGbiTRr8sVYUQMhc6tWxZpSRnv9Ojk4LKmqVhoPGHfBVCdGaMo8t9Qidkc1Q==",
"dev": true,
"dependencies": {
"debug": "^4.3.4",
@@ -9602,17 +9602,17 @@
"optional": true
},
"@formatjs/intl-localematcher": {
- "version": "0.4.2",
- "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.2.tgz",
- "integrity": "sha512-BGdtJFmaNJy5An/Zan4OId/yR9Ih1OojFjcduX/xOvq798OgWSyDtd6Qd5jqJXwJs1ipe4Fxu9+cshic5Ox2tA==",
+ "version": "0.5.0",
+ "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.0.tgz",
+ "integrity": "sha512-K1Xpg/8oyfCMxisJQa/fILoeoeyndcM0wcN8QiNG/uM5OAe1BcO1+2yd0gIboDI2tRJEsUi/sSBEYPbgkIdq4A==",
"requires": {
"tslib": "^2.4.0"
}
},
"@formkit/auto-animate": {
- "version": "0.8.0",
- "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-0.8.0.tgz",
- "integrity": "sha512-G8f7489ka0mWyi+1IEZT+xgIwcpWtRMmE2x+IrVoQ+KM1cP6VDj/TbujZjwxdb0P8w8b16/qBfViRmydbYHwMw=="
+ "version": "0.8.1",
+ "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-0.8.1.tgz",
+ "integrity": "sha512-0/Z2cuNXWVVIG/l0SpcHAWFhGdvLJ8DRvEfRWvmojtmRWfEy+LWNwgDazbZqY0qQYtkHcoEK3jBLkhiZaB/4Ig=="
},
"@github/combobox-nav": {
"version": "2.1.5",
@@ -12457,9 +12457,9 @@
}
},
"use-debounce": {
- "version": "9.0.4",
- "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-9.0.4.tgz",
- "integrity": "sha512-6X8H/mikbrt0XE8e+JXRtZ8yYVvKkdYRfmIhWZYsP8rcNs9hk3APV8Ua2mFkKRLcJKVdnX2/Vwrmg2GWKUQEaQ==",
+ "version": "10.0.0",
+ "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.0.tgz",
+ "integrity": "sha512-XRjvlvCB46bah9IBXVnq/ACP2lxqXyZj0D9hj4K5OzNroMDpTEBg8Anuh1/UfRTRs7pLhQ+RiNxxwZu9+MVl1A==",
"requires": {}
},
"use-long-press": {
@@ -12580,9 +12580,9 @@
"requires": {}
},
"vite-plugin-pwa": {
- "version": "0.16.6",
- "resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.16.6.tgz",
- "integrity": "sha512-bQPDOWvhPMwydMoWqohXvIzvrq4X8iuCF+q95qEiaM4yC0ybViGKWMnWcpWp0vcnoLk7QvxHDlK65KUZvqB3Sg==",
+ "version": "0.16.7",
+ "resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.16.7.tgz",
+ "integrity": "sha512-4WMA5unuKlHs+koNoykeuCfTcqEGbiTRr8sVYUQMhc6tWxZpSRnv9Ojk4LKmqVhoPGHfBVCdGaMo8t9Qidkc1Q==",
"dev": true,
"requires": {
"debug": "^4.3.4",
diff --git a/package.json b/package.json
index 4a16dc92..0b64c0c4 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,8 @@
"sourcemap": "npx source-map-explorer dist/assets/*.js"
},
"dependencies": {
- "@formatjs/intl-localematcher": "~0.4.2",
- "@formkit/auto-animate": "~0.8.0",
+ "@formatjs/intl-localematcher": "~0.5.0",
+ "@formkit/auto-animate": "~0.8.1",
"@github/text-expander-element": "~2.5.0",
"@iconify-icons/mingcute": "~1.2.9",
"@justinribeiro/lite-youtube": "~1.5.0",
@@ -38,7 +38,7 @@
"swiped-events": "~1.1.7",
"toastify-js": "~1.12.0",
"uid": "~2.0.2",
- "use-debounce": "~9.0.4",
+ "use-debounce": "~10.0.0",
"use-long-press": "~3.2.0",
"use-resize-observer": "~9.1.0",
"valtio": "1.9.0"
@@ -53,7 +53,7 @@
"vite": "~4.5.0",
"vite-plugin-generate-file": "~0.0.4",
"vite-plugin-html-config": "~1.0.11",
- "vite-plugin-pwa": "~0.16.6",
+ "vite-plugin-pwa": "~0.16.7",
"vite-plugin-remove-console": "~2.1.1",
"workbox-cacheable-response": "~7.0.0",
"workbox-expiration": "~7.0.0",
diff --git a/src/app.css b/src/app.css
index a196c571..32b93812 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1135,6 +1135,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
touch-action: pan-x;
user-select: none;
width: 100%;
+ gap: 16px;
}
.carousel::-webkit-scrollbar {
display: none;
diff --git a/src/components/account-block.jsx b/src/components/account-block.jsx
index 13c680be..08bbe4fb 100644
--- a/src/components/account-block.jsx
+++ b/src/components/account-block.jsx
@@ -13,6 +13,7 @@ function AccountBlock({
skeleton,
account,
avatarSize = 'xl',
+ useAvatarStatic = false,
instance,
external,
internal,
@@ -81,7 +82,11 @@ function AccountBlock({
}
}}
>
-
+
{!hideDisplayName && (
<>
diff --git a/src/components/compose.css b/src/components/compose.css
index 4870063c..504ee99a 100644
--- a/src/components/compose.css
+++ b/src/components/compose.css
@@ -137,14 +137,6 @@
border-color: transparent;
&.compose-field {
- @media (width < 30em) {
- margin-inline: calc(-1 * var(--form-padding-inline));
- width: 100vw !important;
- max-width: 100vw;
- border-radius: 0;
- border: 0;
- }
-
@media (min-width: 40em) {
max-height: 65vh;
}
@@ -212,11 +204,12 @@
left: -100vw !important;
}
#compose-container .toolbar-button select {
- background-color: inherit;
+ background-color: transparent;
border: 0;
padding: 0 0 0 8px;
margin: 0;
appearance: none;
+ line-height: 1em;
}
#compose-container .toolbar-button:not(.show-field) select {
right: 0;
@@ -619,3 +612,91 @@
#custom-emojis-sheet .custom-emojis-list button:is(:hover, :focus) img {
transform: scale(1.5);
}
+
+.compose-field-container {
+ display: grid !important;
+
+ @media (width < 30em) {
+ margin-inline: calc(-1 * var(--form-padding-inline));
+ width: 100vw !important;
+ max-width: 100vw;
+
+ .compose-field {
+ border-radius: 0;
+ outline-offset: -2px;
+ }
+ }
+
+ &.debug {
+ grid-template-columns: 1fr 1fr;
+ }
+
+ > * {
+ grid-area: 1 / 1 / 2 / 2;
+ }
+
+ .compose-highlight {
+ user-drag: none;
+ user-select: none;
+ pointer-events: none;
+ touch-action: none;
+ padding: 8px;
+ color: transparent;
+ background-color: transparent;
+ border: 2px solid transparent;
+ line-height: 1.4;
+ overflow: auto;
+ unicode-bidi: plaintext;
+ -webkit-rtl-ordering: logical;
+ rtl-ordering: logical;
+ overflow-wrap: break-word;
+ white-space: pre-wrap;
+ min-height: 5em;
+ max-height: 50vh;
+
+ /* Follow textarea styles */
+ @media (min-width: 40em) {
+ max-height: 65vh;
+ }
+
+ mark {
+ color: inherit;
+ }
+
+ .compose-highlight-url,
+ .compose-highlight-hashtag {
+ background-color: transparent;
+ text-decoration: underline;
+ text-decoration-color: var(--link-faded-color);
+ text-decoration-thickness: 2px;
+ text-underline-offset: 2px;
+ }
+ .compose-highlight-mention,
+ .compose-highlight-emoji-shortcode,
+ .compose-highlight-exceeded {
+ mix-blend-mode: multiply;
+ border-radius: 4px;
+ box-shadow: 0 0 0 1px;
+ }
+ .compose-highlight-mention {
+ background-color: var(--orange-light-bg-color);
+ box-shadow-color: var(--orange-light-bg-color);
+ }
+ .compose-highlight-emoji-shortcode {
+ background-color: var(--bg-faded-color);
+ box-shadow-color: var(--bg-faded-color);
+ }
+ .compose-highlight-exceeded {
+ background-color: var(--red-bg-color);
+ box-shadow-color: var(--red-bg-color);
+ }
+
+ @media (prefers-color-scheme: dark) {
+ .compose-highlight-mention,
+ .compose-highlight-emoji-shortcode,
+ .compose-highlight-exceeded {
+ mix-blend-mode: screen;
+ }
+ }
+ }
+}
diff --git a/src/components/compose.jsx b/src/components/compose.jsx
index 18480db7..ed06d3e2 100644
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@@ -7,7 +7,7 @@ import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
import { useHotkeys } from 'react-hotkeys-hook';
import stringLength from 'string-length';
import { uid } from 'uid/single';
-import { useDebouncedCallback } from 'use-debounce';
+import { useDebouncedCallback, useThrottledCallback } from 'use-debounce';
import { useSnapshot } from 'valtio';
import supportedLanguages from '../data/status-supported-languages';
@@ -104,6 +104,54 @@ function countableText(inputText) {
.replace(usernameRegex, '$1@$3');
}
+// https://github.com/mastodon/mastodon/blob/c03bd2a238741a012aa4b98dc4902d6cf948ab63/app/models/account.rb#L69
+const USERNAME_RE = /[a-z0-9_]+([a-z0-9_.-]+[a-z0-9_]+)?/i;
+const MENTION_RE = new RegExp(
+ `(? maxCharacters) {
+ const leftoverCount = composerCharacterCount - maxCharacters;
+ // Highlight exceeded characters
+ leftoverHTML =
+ '' +
+ html.slice(-leftoverCount) +
+ '';
+ html = html.slice(0, -leftoverCount);
+ }
+
+ html = html
+ .replace(urlRegexObj, '$2$3') // URLs
+ .replace(MENTION_RE, '$&') // Mentions
+ .replace(HASHTAG_RE, '#$1') // Hashtags
+ .replace(
+ SCAN_RE,
+ '$&',
+ ); // Emoji shortcodes
+
+ return html + leftoverHTML;
+}
+
function Compose({
onClose,
replyToStatus,
@@ -565,6 +613,7 @@ function Compose({
account={currentAccountInfo}
accountInstance={currentAccount.instanceURL}
hideDisplayName
+ useAvatarStatic
/>
)}
{!standalone ? (
@@ -1221,7 +1270,8 @@ function autoResizeTextarea(textarea) {
// NOTE: This check is needed because the offsetHeight return 50000 (really large number) on first render
// No idea why it does that, will re-investigate in far future
const offset = offsetHeight - clientHeight;
- textarea.style.height = value ? scrollHeight + offset + 'px' : null;
+ const height = value ? scrollHeight + offset + 'px' : null;
+ textarea.style.height = height;
}
}
@@ -1387,6 +1437,11 @@ const Textarea = forwardRef((props, ref) => {
handleCommited = (e) => {
const { input } = e.detail;
setText(input.value);
+ // fire input event
+ if (ref.current) {
+ const event = new Event('input', { bubbles: true });
+ ref.current.dispatchEvent(event);
+ }
};
textExpanderRef.current.addEventListener(
@@ -1413,8 +1468,33 @@ const Textarea = forwardRef((props, ref) => {
};
}, []);
+ useEffect(() => {
+ // Resize observer for textarea
+ const textarea = ref.current;
+ if (!textarea) return;
+ const resizeObserver = new ResizeObserver(() => {
+ // Get height of textarea, set height to textExpander
+ const { height } = textarea.getBoundingClientRect();
+ textExpanderRef.current.style.height = height + 'px';
+ });
+ resizeObserver.observe(textarea);
+ }, []);
+
+ const composeHighlightRef = useRef();
+ const throttleHighlightText = useThrottledCallback((text) => {
+ composeHighlightRef.current.innerHTML =
+ highlightText(text, {
+ maxCharacters,
+ }) + '\n';
+ // Newline to prevent multiple line breaks at the end from being collapsed, no idea why
+ }, 500);
+
return (
-
+