feat: Instagram-shaped URLs, Instagram-shaped gestures, iOS-feel animations
Docker Build and Publish / build-and-push (push) Failing after 10s
Docker Build and Publish / build-and-push (push) Failing after 10s
Navigation gestures Horizontal swipe used to advance the carousel and then, on the last slide, fling you into the next post — one gesture meaning two things. Horizontal is now carousel-only. On touch, vertical swipe moves between posts (down on the first post still dismisses, keeping drag-to-close where it can't mean "previous"). Desktop keeps the arrows outside the modal. URLs Permalinks now mirror Instagram: /<archive>/ profile /<archive>/reels/ tab /<archive>/p/<shortcode>/ post A post URL carries no tab, as on Instagram; the tab is re-derived from the post's source, so opening a reel link lands on the Reels tab with next/prev paging through reels. Sidecar posts keep directory-scoped ids internally but expose only the shortcode. The old ?a=&t=&p= form is still parsed so existing links keep working, and reserved prefixes (api, archives, assets…) can never be mistaken for a profile name. Animations Adds a shared motion vocabulary tuned to feel native: critically damped springs rather than fixed-duration easing, and gestures hand their exit velocity to the animation so a flick continues instead of restarting. Post transitions animate along the axis the input implies — vertical for a swipe, horizontal for the arrows. Modal and story viewer present/dismiss with a scale, tiles and highlight circles get touch-down feedback, and prefers-reduced-motion is honoured throughout. Adds 22 routing tests (58 total). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011uBWhwV3wFQ5MBCcMHHem7
This commit is contained in:
co-authored by
Claude Opus 5
parent
0cff91edae
commit
877d21ff1f
@@ -0,0 +1,85 @@
|
||||
import { Post, SourceKind } from '../types';
|
||||
|
||||
/**
|
||||
* Instagram-shaped paths.
|
||||
*
|
||||
* / the archive explorer
|
||||
* /<archive>/ a profile, posts tab
|
||||
* /<archive>/reels/ a profile, reels tab
|
||||
* /<archive>/saved/
|
||||
* /<archive>/p/<shortcode>/ a single post
|
||||
*
|
||||
* The older `?a=&t=&p=` query form is still parsed so existing links keep
|
||||
* working; it is never written back.
|
||||
*/
|
||||
|
||||
export type Tab = 'posts' | 'reels' | 'saved';
|
||||
|
||||
const TABS: Tab[] = ['posts', 'reels', 'saved'];
|
||||
|
||||
/**
|
||||
* Path prefixes the app must never treat as an archive name, or a profile
|
||||
* called "api" would shadow the backend.
|
||||
*/
|
||||
const RESERVED = new Set(['api', 'archives', 'assets', 'p', 'fonts', 'sw.js', 'manifest.webmanifest']);
|
||||
|
||||
export interface Route {
|
||||
archive: string | null;
|
||||
tab: Tab;
|
||||
/** Post shortcode, i.e. the trailing segment of a post id. */
|
||||
post: string | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* A post's URL slug.
|
||||
*
|
||||
* Sidecar posts carry a directory-scoped id (`story highlights - u - H/ABC`)
|
||||
* so ids stay unique across sources, but only the shortcode belongs in a URL.
|
||||
*/
|
||||
export const postSlug = (post: Pick<Post, 'id'>): string => {
|
||||
const tail = post.id.split('/').pop() ?? post.id;
|
||||
return encodeURIComponent(tail);
|
||||
};
|
||||
|
||||
/** Find the post a slug refers to, preferring an exact id match. */
|
||||
export const findPostBySlug = (posts: Post[], slug: string): Post | undefined => {
|
||||
const decoded = decodeURIComponent(slug);
|
||||
return posts.find(p => p.id === decoded)
|
||||
?? posts.find(p => (p.id.split('/').pop() ?? p.id) === decoded);
|
||||
};
|
||||
|
||||
/** Which tab shows a given post, so a deep link lands on the right one. */
|
||||
export const tabForSource = (source?: SourceKind): Tab => (source === 'reels' ? 'reels' : 'posts');
|
||||
|
||||
export const parseRoute = (pathname: string, search = ''): Route => {
|
||||
const segments = pathname.split('/').filter(Boolean).map(decodeURIComponent);
|
||||
|
||||
if (segments.length && !RESERVED.has(segments[0])) {
|
||||
const [archive, second, third] = segments;
|
||||
|
||||
if (second === 'p' && third) return { archive, tab: 'posts', post: third };
|
||||
if (second && TABS.includes(second as Tab)) return { archive, tab: second as Tab, post: null };
|
||||
return { archive, tab: 'posts', post: null };
|
||||
}
|
||||
|
||||
// Legacy query form: ?a=<archive>&t=<tab>&p=<post id>
|
||||
const params = new URLSearchParams(search);
|
||||
const archive = params.get('a');
|
||||
const tab = params.get('t');
|
||||
return {
|
||||
archive: archive || null,
|
||||
tab: tab && TABS.includes(tab as Tab) ? (tab as Tab) : 'posts',
|
||||
post: params.get('p'),
|
||||
};
|
||||
};
|
||||
|
||||
export const buildPath = ({ archive, tab, post }: Route): string => {
|
||||
if (!archive) return '/';
|
||||
|
||||
const base = `/${encodeURIComponent(archive)}`;
|
||||
// A post URL omits the tab, matching Instagram; the tab is re-derived from
|
||||
// the post itself when the link is opened.
|
||||
if (post) return `${base}/p/${post}/`;
|
||||
if (tab !== 'posts') return `${base}/${tab}/`;
|
||||
return `${base}/`;
|
||||
};
|
||||
Reference in New Issue
Block a user