10603833968

Committed 28 Aug 2024 08:21PM UTC coverage: 32.018% (+0.02%) from 32.003%

Build # 10603833968

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9597 from ForumMagnum/linkpost-styling

RSS Feed style AF and linkposts

Run Details

5021 of 40823 branches covered (12.3%)

Branch coverage included in aggregate %.

6 of 16 new or added lines in 4 files covered. (37.5%)

2 existing lines in 1 file now uncovered.

29238 of 66176 relevant lines covered (44.18%)

189.2 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

14.75

/packages/lesswrong/components/posts/PostsPage/LWPostsPageHeader.tsx

import React from 'react';
import { Components, registerComponent } from '../../../lib/vulcan-lib';
import { AnalyticsContext } from "../../../lib/analyticsEvents";
import { extractVersionsFromSemver } from '../../../lib/editor/utils';
import classNames from 'classnames';
import { getHostname, getProtocol } from './PostsPagePostHeader';

const styles = (theme: ThemeType): JssStyles => ({
  root: {
    paddingTop: 110,
    marginBottom: 96,
    [theme.breakpoints.down('xs')]: {
      paddingTop: 16,
      marginBottom: 38
    },
  },
  eventHeader: {
    marginBottom: 0,
  },
  authorAndSecondaryInfo: {
    display: 'flex',
    alignItems: 'center',
    columnGap: 20,
    ...theme.typography.commentStyle,
    flexWrap: 'wrap',
    color: theme.palette.text.dim3,
    marginTop: 12
  },
  authorInfo: {
    maxWidth: "calc(100% - 60px)",
    [theme.breakpoints.down('xs')]: {
      width: "100%",
      marginBottom: 8,
      fontSize: theme.typography.body2.fontSize,
    },
  },
  feedName: {
    fontSize: theme.typography.body2.fontSize,
    [theme.breakpoints.down('sm')]: {
      display: "none"
    }
  },
  topRight: {
    position: 'absolute',
    right: 8, 
    top: -48,
    display: 'flex',
    [theme.breakpoints.down('sm')]: {
      top: -16,
      marginTop: 8,
      marginBottom: 8
    },
    [theme.breakpoints.down('xs')]: {
      display: 'none'
    }
  },
  audioPlayerWrapper: {
    position: 'absolute',
    right: 8, 
    top: 15,
    display: 'flex',
    [theme.breakpoints.down('sm')]: {
      top: 8,
      right: 8
    }
  },
  sequenceNav: {
    marginBottom: 8,
    marginTop: -22
  },
  eventData: {
    marginTop: 48
  },
  titleSection: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  title: {
    [theme.breakpoints.down('sm')]: {
      marginBottom: 10
    }
  },
  mobileHeaderVote: {
    textAlign: 'center',
    fontSize: 42,
    marginTop: -55,
    marginLeft: 12,
    [theme.breakpoints.up("sm")]: {
      display: 'none'
    }
  },
  date: {
    marginTop: 8,
    marginBottom: 8
  },
  mobileButtons: {
    display: 'flex',
    alignItems: 'center',
    [theme.breakpoints.up('sm')]: {
      display: 'none'
    }
  },
  audioToggle: {
    marginRight: 12,
    display: "flex",
    opacity: 0.75
  },
  readTime: {
    marginRight: 20,
  }
}); 

/// LWPostsPageHeader: The metadata block at the top of a post page, with
/// title, author, voting, an actions menu, etc.
const LWPostsPageHeader = ({post, showEmbeddedPlayer, toggleEmbeddedPlayer, classes, dialogueResponses, answerCount}: {
  post: PostsWithNavigation|PostsWithNavigationAndRevision|PostsListWithVotes,
  showEmbeddedPlayer?: boolean,
  toggleEmbeddedPlayer?: () => void,
  classes: ClassesType<typeof styles>,
  dialogueResponses: CommentsList[],
  answerCount?: number,
}) => {
  const { PostsPageTitle, PostsAuthors, LWTooltip, PostsPageDate, CrosspostHeaderIcon, PostsGroupDetails, PostsTopSequencesNav, PostsPageEventData, AddToCalendarButton, GroupLinks, LWPostsPageHeaderTopRight, PostsAudioPlayerWrapper, PostsVote, AudioToggle, PostActionsButton, AlignmentCrosspostLink, ReadTime, LWCommentCount } = Components;
  // eslint-disable-next-line react-hooks/exhaustive-deps

  const rssFeedSource = ('feed' in post) ? post.feed : null;
  const feedLinkDescription = rssFeedSource?.url && getHostname(rssFeedSource.url)
  const feedLink = rssFeedSource?.url && `${getProtocol(rssFeedSource.url)}//${getHostname(rssFeedSource.url)}`;
  const feedDomain = feedLink && new URL(feedLink).hostname;
  const hasMajorRevision = ('version' in post) && extractVersionsFromSemver(post.version).major > 1

  const crosspostNode = post.fmCrosspost?.isCrosspost && !post.fmCrosspost.hostedHere &&
    <CrosspostHeaderIcon post={post} />
  
  // TODO: If we are not the primary author of this post, but it was shared with
  // us as a draft, display a notice and a link to the collaborative editor.

  const linkpostDomain = post.url && new URL(post.url).hostname;
  const linkpostTooltip = <div>This is a linkpost:<br/>{post.url}</div>;
  const linkpostNode = post.url && feedDomain !== linkpostDomain ? <LWTooltip title={linkpostTooltip}>{linkpostDomain}</LWTooltip> : null;

  return <div className={classNames(classes.root, {[classes.eventHeader]: post.isEvent})}>
      {post.group && <PostsGroupDetails post={post} documentId={post.group._id} />}
      <AnalyticsContext pageSectionContext="topSequenceNavigation">
        {('sequence' in post) && !!post.sequence && <div className={classes.sequenceNav}>
          <PostsTopSequencesNav post={post} />
        </div>}
      </AnalyticsContext>
      <div>
        <span className={classes.topRight}>
          <LWPostsPageHeaderTopRight post={post} toggleEmbeddedPlayer={toggleEmbeddedPlayer} showEmbeddedPlayer={showEmbeddedPlayer}/>
        </span>
        {post && <span className={classes.audioPlayerWrapper}>
          <PostsAudioPlayerWrapper showEmbeddedPlayer={!!showEmbeddedPlayer} post={post}/>
        </span>}
      </div>
      <div className={classes.titleSection}>
        <div className={classes.title}>
          <PostsPageTitle post={post} />
          <div className={classes.authorAndSecondaryInfo}>
            <div className={classes.authorInfo}>
              <PostsAuthors post={post} pageSectionContext="post_header" />
            </div>
            {crosspostNode}
            {!post.isEvent && <div className={classes.date}>
              <PostsPageDate post={post} hasMajorRevision={hasMajorRevision} />
            </div>}
            {rssFeedSource && rssFeedSource.user &&
              <LWTooltip title={`Crossposted from ${feedLinkDescription}`} className={classes.feedName}>
                <a href={feedLink}>{rssFeedSource.nickname}</a>
              </LWTooltip>
            }
            <AlignmentCrosspostLink post={post} />
            {linkpostNode}
            {post.isEvent && <GroupLinks document={post} noMargin />}
            <AddToCalendarButton post={post} label="Add to calendar" hideTooltip />
            <div className={classes.mobileButtons}>
              <div className={classes.readTime}>
                <ReadTime post={post} dialogueResponses={dialogueResponses} />
              </div>
              <LWCommentCount answerCount={answerCount} commentCount={post.commentCount} label={false} />
              <div className={classes.audioToggle}>
                <AudioToggle post={post} toggleEmbeddedPlayer={toggleEmbeddedPlayer} showEmbeddedPlayer={showEmbeddedPlayer} />
              </div>
              <PostActionsButton post={post} className={classes.postActionsButton} flip />
            </div>
          </div>
        </div>
        <div className={classes.mobileHeaderVote}>
          <PostsVote post={post} />
        </div>
      </div>
      {post.isEvent && <div className={classes.eventData}>
        <PostsPageEventData post={post}/>
      </div>}
  </div>
}

const LWPostsPageHeaderComponent = registerComponent(
  'LWPostsPageHeader', LWPostsPageHeader, {styles}
);

declare global {
  interface ComponentTypes {
    LWPostsPageHeader: typeof LWPostsPageHeaderComponent,
  }
}


1	import React from 'react';	1✔
2	import { Components, registerComponent } from '../../../lib/vulcan-lib';	1✔
3	import { AnalyticsContext } from "../../../lib/analyticsEvents";	1✔
4	import { extractVersionsFromSemver } from '../../../lib/editor/utils';	1✔
5	import classNames from 'classnames';	1✔
6	import { getHostname, getProtocol } from './PostsPagePostHeader';	1✔
7
8	const styles = (theme: ThemeType): JssStyles => ({	1✔
9	root: {
10	paddingTop: 110,
11	marginBottom: 96,
12	[theme.breakpoints.down('xs')]: {
13	paddingTop: 16,
14	marginBottom: 38
15	},
16	},
17	eventHeader: {
18	marginBottom: 0,
19	},
20	authorAndSecondaryInfo: {
21	display: 'flex',
22	alignItems: 'center',
23	columnGap: 20,
24	...theme.typography.commentStyle,
25	flexWrap: 'wrap',
26	color: theme.palette.text.dim3,
27	marginTop: 12
28	},
29	authorInfo: {
30	maxWidth: "calc(100% - 60px)",
31	[theme.breakpoints.down('xs')]: {
32	width: "100%",
33	marginBottom: 8,
34	fontSize: theme.typography.body2.fontSize,
35	},
36	},
37	feedName: {
38	fontSize: theme.typography.body2.fontSize,
39	[theme.breakpoints.down('sm')]: {
40	display: "none"
41	}
42	},
43	topRight: {
44	position: 'absolute',
45	right: 8,
46	top: -48,
47	display: 'flex',
48	[theme.breakpoints.down('sm')]: {
49	top: -16,
50	marginTop: 8,
51	marginBottom: 8
52	},
53	[theme.breakpoints.down('xs')]: {
54	display: 'none'
55	}
56	},
57	audioPlayerWrapper: {
58	position: 'absolute',
59	right: 8,
60	top: 15,
61	display: 'flex',
62	[theme.breakpoints.down('sm')]: {
63	top: 8,
64	right: 8
65	}
66	},
67	sequenceNav: {
68	marginBottom: 8,
69	marginTop: -22
70	},
71	eventData: {
72	marginTop: 48
73	},
74	titleSection: {
75	display: 'flex',
76	alignItems: 'center',
77	justifyContent: 'space-between'
78	},
79	title: {
80	[theme.breakpoints.down('sm')]: {
81	marginBottom: 10
82	}
83	},
84	mobileHeaderVote: {
85	textAlign: 'center',
86	fontSize: 42,
87	marginTop: -55,
88	marginLeft: 12,
89	[theme.breakpoints.up("sm")]: {
90	display: 'none'
91	}
92	},
93	date: {
94	marginTop: 8,
95	marginBottom: 8
96	},
97	mobileButtons: {
98	display: 'flex',
99	alignItems: 'center',
100	[theme.breakpoints.up('sm')]: {
101	display: 'none'
102	}
103	},
104	audioToggle: {
105	marginRight: 12,
106	display: "flex",
107	opacity: 0.75
108	},
109	readTime: {
110	marginRight: 20,
111	}
112	});
113
114	/// LWPostsPageHeader: The metadata block at the top of a post page, with
115	/// title, author, voting, an actions menu, etc.
116	const LWPostsPageHeader = ({post, showEmbeddedPlayer, toggleEmbeddedPlayer, classes, dialogueResponses, answerCount}: {	1✔
117	post: PostsWithNavigation\|PostsWithNavigationAndRevision\|PostsListWithVotes,
118	showEmbeddedPlayer?: boolean,
119	toggleEmbeddedPlayer?: () => void,
120	classes: ClassesType<typeof styles>,
121	dialogueResponses: CommentsList[],
122	answerCount?: number,
123	}) => {
NEW 124	const { PostsPageTitle, PostsAuthors, LWTooltip, PostsPageDate, CrosspostHeaderIcon, PostsGroupDetails, PostsTopSequencesNav, PostsPageEventData, AddToCalendarButton, GroupLinks, LWPostsPageHeaderTopRight, PostsAudioPlayerWrapper, PostsVote, AudioToggle, PostActionsButton, AlignmentCrosspostLink, ReadTime, LWCommentCount } = Components;	×
125	// eslint-disable-next-line react-hooks/exhaustive-deps
126
127	const rssFeedSource = ('feed' in post) ? post.feed : null;	×
128	const feedLinkDescription = rssFeedSource?.url && getHostname(rssFeedSource.url)	×
129	const feedLink = rssFeedSource?.url && `${getProtocol(rssFeedSource.url)}//${getHostname(rssFeedSource.url)}`;	×
NEW 130	const feedDomain = feedLink && new URL(feedLink).hostname;	×
UNCOV 131	const hasMajorRevision = ('version' in post) && extractVersionsFromSemver(post.version).major > 1	×
132
133	const crosspostNode = post.fmCrosspost?.isCrosspost && !post.fmCrosspost.hostedHere &&	×
134	<CrosspostHeaderIcon post={post} />
135
136	// TODO: If we are not the primary author of this post, but it was shared with
137	// us as a draft, display a notice and a link to the collaborative editor.
138
NEW 139	const linkpostDomain = post.url && new URL(post.url).hostname;	×
NEW 140	const linkpostTooltip = <div>This is a linkpost:<br/>{post.url}</div>;	×
NEW 141	const linkpostNode = post.url && feedDomain !== linkpostDomain ? <LWTooltip title={linkpostTooltip}>{linkpostDomain}</LWTooltip> : null;	×
142
UNCOV 143	return <div className={classNames(classes.root, {[classes.eventHeader]: post.isEvent})}>	×
144	{post.group && <PostsGroupDetails post={post} documentId={post.group._id} />}	×
145	<AnalyticsContext pageSectionContext="topSequenceNavigation">
146	{('sequence' in post) && !!post.sequence && <div className={classes.sequenceNav}>	×
147	<PostsTopSequencesNav post={post} />
148	</div>}
149	</AnalyticsContext>
150	<div>
151	<span className={classes.topRight}>
152	<LWPostsPageHeaderTopRight post={post} toggleEmbeddedPlayer={toggleEmbeddedPlayer} showEmbeddedPlayer={showEmbeddedPlayer}/>
153	</span>
154	{post && <span className={classes.audioPlayerWrapper}>	×
155	<PostsAudioPlayerWrapper showEmbeddedPlayer={!!showEmbeddedPlayer} post={post}/>
156	</span>}
157	</div>
158	<div className={classes.titleSection}>
159	<div className={classes.title}>
160	<PostsPageTitle post={post} />
161	<div className={classes.authorAndSecondaryInfo}>
162	<div className={classes.authorInfo}>
163	<PostsAuthors post={post} pageSectionContext="post_header" />
164	</div>
165	{crosspostNode}
166	{!post.isEvent && <div className={classes.date}>	×
167	<PostsPageDate post={post} hasMajorRevision={hasMajorRevision} />
168	</div>}
169	{rssFeedSource && rssFeedSource.user &&	×
170	<LWTooltip title={`Crossposted from ${feedLinkDescription}`} className={classes.feedName}>
171	<a href={feedLink}>{rssFeedSource.nickname}</a>
172	</LWTooltip>
173	}
174	<AlignmentCrosspostLink post={post} />
175	{linkpostNode}
176	{post.isEvent && <GroupLinks document={post} noMargin />}	×
177	<AddToCalendarButton post={post} label="Add to calendar" hideTooltip />
178	<div className={classes.mobileButtons}>
179	<div className={classes.readTime}>
180	<ReadTime post={post} dialogueResponses={dialogueResponses} />
181	</div>
182	<LWCommentCount answerCount={answerCount} commentCount={post.commentCount} label={false} />
183	<div className={classes.audioToggle}>
184	<AudioToggle post={post} toggleEmbeddedPlayer={toggleEmbeddedPlayer} showEmbeddedPlayer={showEmbeddedPlayer} />
185	</div>
186	<PostActionsButton post={post} className={classes.postActionsButton} flip />
187	</div>
188	</div>
189	</div>
190	<div className={classes.mobileHeaderVote}>
191	<PostsVote post={post} />
192	</div>
193	</div>
194	{post.isEvent && <div className={classes.eventData}>	×
195	<PostsPageEventData post={post}/>
196	</div>}
197	</div>
198	}
199
200	const LWPostsPageHeaderComponent = registerComponent(	1✔
201	'LWPostsPageHeader', LWPostsPageHeader, {styles}
202	);
203
204	declare global {
205	interface ComponentTypes {
206	LWPostsPageHeader: typeof LWPostsPageHeaderComponent,
207	}
208	}
209

ForumMagnum / ForumMagnum / 10603833968

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous