@@ -186,19 +186,19 @@ class Article extends React.Component {
186186 </ div >
187187 < div className = { theme . bannerInnerRight } >
188188 {
189- fields . featuredImage ? (
190- < div className = { theme [ 'site-header-background' ] } >
191- < svg className = { theme . bannerSvg } >
192- < clipPath id = "thrive-banner-clip-path" clipPathUnits = "objectBoundingBox" >
193- < path d = "M0.477,1 C0.72,0.999,1,0.804,1,0.56 C1,0.316,0.766,-0.067,0.528,0.021 C0.343,0.089,0.145,-0.088,0.076,0.063 C0.016,0.193,-0.071,0.456,0.101,0.618 C0.274,0.782,0.234,1,0.477,1" />
194- </ clipPath >
195- </ svg >
196- < div className = { theme . bannerClippedImageHolder } style = { { backgroundImage : `url(${ subData . assets . items [ fields . featuredImage . sys . id ] . fields . file . url } )` } } />
197- </ div >
198- ) : (
199- < img src = { DEFAULT_BANNER_IMAGE } alt = "Thrive - default banner" className = { theme [ 'site-header-background' ] } />
200- )
201- }
189+ fields . featuredImage ? (
190+ < div className = { theme [ 'site-header-background' ] } >
191+ < svg className = { theme . bannerSvg } >
192+ < clipPath id = "thrive-banner-clip-path" clipPathUnits = "objectBoundingBox" >
193+ < path d = "M0.477,1 C0.72,0.999,1,0.804,1,0.56 C1,0.316,0.766,-0.067,0.528,0.021 C0.343,0.089,0.145,-0.088,0.076,0.063 C0.016,0.193,-0.071,0.456,0.101,0.618 C0.274,0.782,0.234,1,0.477,1" />
194+ </ clipPath >
195+ </ svg >
196+ < div className = { theme . bannerClippedImageHolder } style = { { backgroundImage : `url(${ subData . assets . items [ fields . featuredImage . sys . id ] . fields . file . url } )` } } />
197+ </ div >
198+ ) : (
199+ < img src = { DEFAULT_BANNER_IMAGE } alt = "Thrive - default banner" className = { theme [ 'site-header-background' ] } />
200+ )
201+ }
202202 </ div >
203203 </ div >
204204 < img src = "https://images.ctfassets.net/piwi0eufbb2g/3StLyQh5ne1Lk9H7C1oVxv/52f17a02122212052e44585d3e79fcf7/29320408-E820-48E1-B0FD-539EAC296910.svg" alt = "Thrive banner shape" className = { theme . bannerBottShape } />
@@ -212,37 +212,37 @@ class Article extends React.Component {
212212 { /* Authors */ }
213213 < div className = { theme . authorContainer } >
214214 {
215- _ . map ( fields . contentAuthor , author => (
216- < div key = { author . sys . id } className = { theme . authorWrapper } >
215+ _ . map ( fields . contentAuthor , author => (
216+ < div key = { author . sys . id } className = { theme . authorWrapper } >
217+ {
218+ subData . entries . items [ author . sys . id ] . fields . avatar ? (
219+ < ContentfulLoader
220+ assetIds = { subData . entries . items [ author . sys . id ] . fields . avatar . sys . id }
221+ preview = { preview }
222+ spaceName = { spaceName }
223+ environment = { environment }
224+ render = { avatarData => (
225+ < img src = { avatarData . assets . items [ subData . entries . items [ author . sys . id ] . fields . avatar . sys . id ] . fields . file . url } alt = "article author avatar" className = { theme . avatar } />
226+ ) }
227+ renderPlaceholder = { LoadingIndicator }
228+ />
229+ ) : null
230+ }
231+ < div className = { theme . authorInfos } >
232+ < span className = { theme . name } >
233+ { subData . entries . items [ author . sys . id ] . fields . name }
234+ </ span >
217235 {
218- subData . entries . items [ author . sys . id ] . fields . avatar ? (
219- < ContentfulLoader
220- assetIds = { subData . entries . items [ author . sys . id ] . fields . avatar . sys . id }
221- preview = { preview }
222- spaceName = { spaceName }
223- environment = { environment }
224- render = { avatarData => (
225- < img src = { avatarData . assets . items [ subData . entries . items [ author . sys . id ] . fields . avatar . sys . id ] . fields . file . url } alt = "article author avatar" className = { theme . avatar } />
226- ) }
227- renderPlaceholder = { LoadingIndicator }
228- />
236+ subData . entries . items [ author . sys . id ] . fields . tcHandle ? (
237+ < span className = { theme . handle } >
238+ { subData . entries . items [ author . sys . id ] . fields . tcHandle }
239+ </ span >
229240 ) : null
230241 }
231- < div className = { theme . authorInfos } >
232- < span className = { theme . name } >
233- { subData . entries . items [ author . sys . id ] . fields . name }
234- </ span >
235- {
236- subData . entries . items [ author . sys . id ] . fields . tcHandle ? (
237- < span className = { theme . handle } >
238- { subData . entries . items [ author . sys . id ] . fields . tcHandle }
239- </ span >
240- ) : null
241- }
242- </ div >
243242 </ div >
244- ) )
245- }
243+ </ div >
244+ ) )
245+ }
246246 </ div >
247247 < div className = { theme . separator } />
248248 < h3 className = { theme . label } > DURATION</ h3 >
@@ -275,12 +275,12 @@ class Article extends React.Component {
275275 { /* Tags */ }
276276 < div className = { theme . tagContainer } >
277277 {
278- _ . map ( fields . tags , tag => (
279- < div className = { theme . tagItem } key = { tag } title = { `Search for articles labelled as ${ tag } ` } >
280- < Link to = { `${ config . TC_EDU_BASE_PATH } ${ config . TC_EDU_SEARCH_PATH } ?${ qs . stringify ( { tags : tag } ) } ` } key = { `${ tag } ` } > { tag } </ Link >
281- </ div >
282- ) )
283- }
278+ _ . map ( fields . tags , tag => (
279+ < div className = { theme . tagItem } key = { tag } title = { `Search for articles labelled as ${ tag } ` } >
280+ < Link to = { `${ config . TC_EDU_BASE_PATH } ${ config . TC_EDU_SEARCH_PATH } ?${ qs . stringify ( { tags : tag } ) } ` } key = { `${ tag } ` } > { tag } </ Link >
281+ </ div >
282+ ) )
283+ }
284284 </ div >
285285 < div className = { theme . separator } />
286286 < h3 className = { theme . label } > share</ h3 >
@@ -315,10 +315,10 @@ class Article extends React.Component {
315315 >
316316 < MarkdownRenderer markdown = { fields . content } { ...contentfulConfig } />
317317 {
318- fields . type === 'Video' && fields . contentUrl ? (
319- < YouTubeVideo src = { fields . contentUrl } />
320- ) : null
321- }
318+ fields . type === 'Video' && fields . contentUrl ? (
319+ < YouTubeVideo src = { fields . contentUrl } />
320+ ) : null
321+ }
322322 { /* Voting */ }
323323 < div className = { theme . actionContainer } >
324324 < div className = { theme . action } >
@@ -327,8 +327,8 @@ class Article extends React.Component {
327327 </ div >
328328 < span >
329329 {
330- upvotes
331- }
330+ upvotes
331+ }
332332 </ span >
333333 </ div >
334334 < div className = { theme . action } >
@@ -354,38 +354,38 @@ class Article extends React.Component {
354354 </ div >
355355 { /* Recommended */ }
356356 {
357- fields . recommended ? (
358- < div className = { theme . recommendedContainer } >
359- < div className = { theme . recommendedTopShape } />
360- < h3 className = { theme . recommendedTitle } > Recommended for you</ h3 >
361- < div className = { theme . recommended } >
362- {
363- _ . map ( fields . recommended , rec => (
364- < div key = { rec . sys . id } className = { theme . recommendedCard } >
357+ fields . recommended ? (
358+ < div className = { theme . recommendedContainer } >
359+ < div className = { theme . recommendedTopShape } />
360+ < h3 className = { theme . recommendedTitle } > Recommended for you</ h3 >
361+ < div className = { theme . recommended } >
362+ {
363+ _ . map ( fields . recommended , rec => (
364+ < div key = { rec . sys . id } className = { theme . recommendedCard } >
365+ {
366+ subData . entries . items [ rec . sys . id ] . fields . featuredImage ? (
367+ < ContentfulLoader
368+ assetIds = { subData . entries . items [ rec . sys . id ] . fields . featuredImage . sys . id }
369+ preview = { preview }
370+ spaceName = { spaceName }
371+ environment = { environment }
372+ render = { imageData => (
373+ < React . Fragment >
374+ < div
375+ style = { { backgroundImage : `url(${ imageData . assets . items [ subData . entries . items [ rec . sys . id ] . fields . featuredImage . sys . id ] . fields . file . url } )` } }
376+ className = { theme . recommendedImage }
377+ />
378+ < div className = { theme . recommendedImageBottomShape } />
379+ </ React . Fragment >
380+ ) }
381+ renderPlaceholder = { LoadingIndicator }
382+ />
383+ ) : null
384+ }
385+ < h3 className = { theme . recommendedCardTitle } >
365386 {
366- subData . entries . items [ rec . sys . id ] . fields . featuredImage ? (
367- < ContentfulLoader
368- assetIds = { subData . entries . items [ rec . sys . id ] . fields . featuredImage . sys . id }
369- preview = { preview }
370- spaceName = { spaceName }
371- environment = { environment }
372- render = { imageData => (
373- < React . Fragment >
374- < div
375- style = { { backgroundImage : `url(${ imageData . assets . items [ subData . entries . items [ rec . sys . id ] . fields . featuredImage . sys . id ] . fields . file . url } )` } }
376- className = { theme . recommendedImage }
377- />
378- < div className = { theme . recommendedImageBottomShape } />
379- </ React . Fragment >
380- ) }
381- renderPlaceholder = { LoadingIndicator }
382- />
383- ) : null
384- }
385- < h3 className = { theme . recommendedCardTitle } >
386- {
387- subData . entries . items [ rec . sys . id ] . fields . externalArticle
388- && subData . entries . items [ rec . sys . id ] . fields . contentUrl ? (
387+ subData . entries . items [ rec . sys . id ] . fields . externalArticle
388+ && subData . entries . items [ rec . sys . id ] . fields . contentUrl ? (
389389 < a href = { subData . entries . items [ rec . sys . id ] . fields . contentUrl } target = "_blank" rel = "noopener noreferrer" >
390390 { subData . entries . items [ rec . sys . id ] . fields . title }
391391 </ a >
@@ -394,26 +394,26 @@ class Article extends React.Component {
394394 { subData . entries . items [ rec . sys . id ] . fields . title }
395395 </ Link >
396396 )
397- }
398- </ h3 >
399- < div className = { theme . recommendedCardContent } >
400- {
401- `${ htmlToText . fromString (
402- ReactDOMServer . renderToString ( markdown (
403- subData . entries . items [ rec . sys . id ] . fields . content ,
404- ) ) ,
405- {
406- ignoreHref : true ,
407- ignoreImage : true ,
408- singleNewLineParagraphs : true ,
409- uppercaseHeadings : false ,
410- } ,
411- ) . substring ( 0 , CONTENT_PREVIEW_LENGTH ) } ...`
412- }
413- </ div >
397+ }
398+ </ h3 >
399+ < div className = { theme . recommendedCardContent } >
414400 {
415- subData . entries . items [ rec . sys . id ] . fields . externalArticle
416- && subData . entries . items [ rec . sys . id ] . fields . contentUrl ? (
401+ `${ htmlToText . fromString (
402+ ReactDOMServer . renderToString ( markdown (
403+ subData . entries . items [ rec . sys . id ] . fields . content ,
404+ ) ) ,
405+ {
406+ ignoreHref : true ,
407+ ignoreImage : true ,
408+ singleNewLineParagraphs : true ,
409+ uppercaseHeadings : false ,
410+ } ,
411+ ) . substring ( 0 , CONTENT_PREVIEW_LENGTH ) } ...`
412+ }
413+ </ div >
414+ {
415+ subData . entries . items [ rec . sys . id ] . fields . externalArticle
416+ && subData . entries . items [ rec . sys . id ] . fields . contentUrl ? (
417417 < a href = { subData . entries . items [ rec . sys . id ] . fields . contentUrl } target = "_blank" rel = "noopener noreferrer" className = { theme . readMore } >
418418 Read More < ReadMoreArrow />
419419 </ a >
@@ -422,26 +422,26 @@ class Article extends React.Component {
422422 Read More < ReadMoreArrow />
423423 </ Link >
424424 )
425- }
426- </ div >
427- ) )
428- }
429- </ div >
425+ }
426+ </ div >
427+ ) )
428+ }
430429 </ div >
431- ) : null
432- }
430+ </ div >
431+ ) : null
432+ }
433433 </ div >
434434 {
435435 showLogin && (
436- < LoginModal
437- // eslint-disable-next-line no-restricted-globals
438- retUrl = { isomorphy . isClientSide ( ) ? location . href : null }
439- onCancel = { ( ) => this . setState ( { showLogin : false } ) }
440- modalTitle = "Want to vote?"
441- modalText = "You must be a Topcoder member to do that."
442- utmSource = "thrive_article"
443- infoNode = { < p className = { modalStyle . regTxt } > Discover < a href = "/community/learn" target = "_blank" rel = "noreferrer" > other features</ a > you can access by becoming a member.</ p > }
444- />
436+ < LoginModal
437+ // eslint-disable-next-line no-restricted-globals
438+ retUrl = { isomorphy . isClientSide ( ) ? location . href : null }
439+ onCancel = { ( ) => this . setState ( { showLogin : false } ) }
440+ modalTitle = "Want to vote?"
441+ modalText = "You must be a Topcoder member to do that."
442+ utmSource = "thrive_article"
443+ infoNode = { < p className = { modalStyle . regTxt } > Discover < a href = "/community/learn" target = "_blank" rel = "noreferrer" > other features</ a > you can access by becoming a member.</ p > }
444+ />
445445 )
446446 }
447447 </ React . Fragment >
0 commit comments