Reader /discover SEO: Enable SSR and add a localized meta description (…

…#94957)

client/reader/discover/discover-document-head.js

@@ -0,0 +1,22 @@
+import { useTranslate } from 'i18n-calypso';
+import DocumentHead from 'calypso/components/data/document-head';
+
+export const DiscoverDocumentHead = ( { tabTitle } ) => {
+	const translate = useTranslate();
+
+	const title = translate( 'Browse %s blogs & read articles ‹ Reader', {
+		args: [ tabTitle ],
+		comment: '%s is the type of blog being explored e.g. food, art, technology etc.',
+	} );
+
+	const meta = [
+		{
+			name: 'description',
+			content: translate(
+				'Explore millions of blogs on WordPress.com. Discover posts, from food and art to travel and photography, and find popular sites that inspire and inform.'
+			),
+		},
+	];
+
+	return <DocumentHead title={ title } meta={ meta } />;
+};

client/reader/discover/discover-stream.js

@@ -23,6 +23,35 @@ import {
 	FIRST_POSTS_TAB,
 } from './helper';
 
+const DISCOVER_HEADER_NAVIGATION_ITEMS = [];
+
+export const DiscoverHeader = ( props ) => {
+	const translate = useTranslate();
+
+	const { selectedTab } = props;
+	const tabTitle = getSelectedTabTitle( selectedTab );
+	let subHeaderText = translate( 'Explore %s blogs that inspire, educate, and entertain.', {
+		args: [ tabTitle ],
+		comment: '%s is the type of blog being explored e.g. food, art, technology etc.',
+	} );
+	if ( selectedTab === FIRST_POSTS_TAB ) {
+		subHeaderText = translate(
+			'Fresh voices, fresh views. Explore first-time posts from new bloggers.'
+		);
+	}
+
+	return (
+		<NavigationHeader
+			navigationItems={ DISCOVER_HEADER_NAVIGATION_ITEMS }
+			title={ translate( 'Discover' ) }
+			subtitle={ subHeaderText }
+			className={ clsx( 'discover-stream-header', {
+				'reader-dual-column': props.width > WIDE_DISPLAY_CUTOFF,
+			} ) }
+		/>
+	);
+};
+
 const DiscoverStream = ( props ) => {
 	const locale = useLocale();
 	const translate = useTranslate();
@@ -67,27 +96,6 @@ const DiscoverStream = ( props ) => {
 		isLoggedIn
 	);
 	const streamKey = buildDiscoverStreamKey( selectedTab, recommendedStreamTags );
-	const tabTitle = getSelectedTabTitle( selectedTab );
-	let subHeaderText = translate( 'Explore %s blogs that inspire, educate, and entertain.', {
-		args: [ tabTitle ],
-		comment: '%s is the type of blog being explored e.g. food, art, technology etc.',
-	} );
-	if ( selectedTab === FIRST_POSTS_TAB ) {
-		subHeaderText = translate(
-			'Fresh voices, fresh views. Explore first-time posts from new bloggers.'
-		);
-	}
-
-	const DiscoverHeader = () => (
-		<NavigationHeader
-			navigationItems={ [] }
-			title={ translate( 'Discover' ) }
-			subtitle={ subHeaderText }
-			className={ clsx( 'discover-stream-header', {
-				'reader-dual-column': props.width > WIDE_DISPLAY_CUTOFF,
-			} ) }
-		/>
-	);
 
 	const streamSidebar = () => {
 		if ( selectedTab === FIRST_POSTS_TAB && recommendedSites?.length ) {
@@ -127,16 +135,14 @@ const DiscoverStream = ( props ) => {
 	};
 
 	return (
-		<>
-			<Stream { ...streamProps }>
-				{ DiscoverHeader() }
-				<DiscoverNavigation
-					width={ props.width }
-					selectedTab={ selectedTab }
-					recommendedTags={ interestTags }
-				/>
-			</Stream>
-		</>
+		<Stream { ...streamProps }>
+			<DiscoverHeader selectedTab={ selectedTab } width={ props.width } />
+			<DiscoverNavigation
+				width={ props.width }
+				selectedTab={ selectedTab }
+				recommendedTags={ interestTags }
+			/>
+		</Stream>
 	);
 };
 

client/reader/discover/index.node.js

@@ -0,0 +1,28 @@
+import { getAnyLanguageRouteParam } from '@automattic/i18n-utils';
+import { makeLayout, ssrSetupLocale } from 'calypso/controller';
+import PostPlaceholder from 'calypso/reader/stream/post-placeholder';
+import renderHeaderSection from '../lib/header-section';
+import { DiscoverDocumentHead } from './discover-document-head';
+import { DiscoverHeader } from './discover-stream';
+import { getSelectedTabTitle, DEFAULT_TAB } from './helper';
+
+const discoverSsr = ( context, next ) => {
+	context.renderHeaderSection = renderHeaderSection;
+
+	const selectedTab = context.query.selectedTab || DEFAULT_TAB;
+	const tabTitle = getSelectedTabTitle( selectedTab );
+	context.primary = (
+		<>
+			<DiscoverDocumentHead tabTitle={ tabTitle } />
+			<DiscoverHeader selectedTab={ selectedTab } />
+			<PostPlaceholder />
+		</>
+	);
+	next();
+};
+
+export default function ( router ) {
+	const anyLangParam = getAnyLanguageRouteParam();
+
+	router( [ '/discover', `/${ anyLangParam }/discover` ], ssrSetupLocale, discoverSsr, makeLayout );
+}

client/reader/discover/index.web.js

@@ -0,0 +1,91 @@
+import { getAnyLanguageRouteParam } from '@automattic/i18n-utils';
+import AsyncLoad from 'calypso/components/async-load';
+import {
+	makeLayout,
+	redirectInvalidLanguage,
+	redirectWithoutLocaleParamInFrontIfLoggedIn,
+	render as clientRender,
+} from 'calypso/controller';
+import { setLocaleMiddleware } from 'calypso/controller/shared';
+import { sectionify } from 'calypso/lib/route';
+import { sidebar, updateLastRoute } from 'calypso/reader/controller';
+import {
+	trackPageLoad,
+	trackUpdatesLoaded,
+	trackScrollPage,
+} from 'calypso/reader/controller-helper';
+import { recordTrack } from 'calypso/reader/stats';
+import { isUserLoggedIn } from 'calypso/state/current-user/selectors';
+import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';
+import getCurrentRoute from 'calypso/state/selectors/get-current-route';
+import renderHeaderSection from '../lib/header-section';
+import { DiscoverDocumentHead } from './discover-document-head';
+import { getSelectedTabTitle, DEFAULT_TAB } from './helper';
+
+const ANALYTICS_PAGE_TITLE = 'Reader';
+
+const discover = ( context, next ) => {
+	const basePath = sectionify( context.path );
+	const fullAnalyticsPageTitle = ANALYTICS_PAGE_TITLE + ' > Discover';
+	const streamKey = 'discover:recommended';
+	const mcKey = 'discover';
+	const state = context.store.getState();
+
+	const currentRoute = getCurrentRoute( state );
+	const currentQueryArgs = new URLSearchParams( getCurrentQueryArguments( state ) ).toString();
+
+	trackPageLoad( basePath, fullAnalyticsPageTitle, mcKey );
+	recordTrack(
+		'calypso_reader_discover_viewed',
+		{},
+		{ pathnameOverride: `${ currentRoute }?${ currentQueryArgs }` }
+	);
+
+	if ( ! isUserLoggedIn( state ) ) {
+		context.renderHeaderSection = renderHeaderSection;
+	}
+	const selectedTab = context.query.selectedTab || DEFAULT_TAB;
+	const tabTitle = getSelectedTabTitle( selectedTab );
+	context.primary = (
+		<>
+			<DiscoverDocumentHead tabTitle={ tabTitle } />
+			<AsyncLoad
+				require="calypso/reader/discover/discover-stream"
+				key="discover-page"
+				streamKey={ streamKey }
+				title="Discover"
+				trackScrollPage={ trackScrollPage.bind(
+					null,
+					basePath,
+					fullAnalyticsPageTitle,
+					ANALYTICS_PAGE_TITLE,
+					mcKey
+				) }
+				onUpdatesShown={ trackUpdatesLoaded.bind( null, mcKey ) }
+				suppressSiteNameLink
+				isDiscoverStream
+				useCompactCards
+				showBack={ false }
+				className="is-discover-stream"
+				selectedTab={ selectedTab }
+			/>
+		</>
+	);
+	next();
+};
+
+export default function ( router ) {
+	const anyLangParam = getAnyLanguageRouteParam();
+
+	router(
+		[ '/discover', `/${ anyLangParam }/discover` ],
+		redirectInvalidLanguage,
+		redirectWithoutLocaleParamInFrontIfLoggedIn,
+		setLocaleMiddleware(),
+		updateLastRoute,
+		sidebar,
+		discover,
+		makeLayout,
+		clientRender
+	);
+}

client/reader/discover/package.json

@@ -0,0 +1,4 @@
+{
+	"main": "index.node.js",
+	"browser": "index.web.js"
+}

client/reader/lib/header-section/index.tsx

@@ -1,16 +1,22 @@
-import { translate } from 'i18n-calypso';
+import { useTranslate } from 'i18n-calypso';
 import React from 'react';
 
-const renderHeaderSection = () => (
-	<div className="logged-out-reader-header">
-		<h2>
-			{
-				// translators: The title of the reader tag page
-				translate( 'WordPress Reader' )
-			}
-		</h2>
-		<h1>{ translate( 'Enjoy millions of blogs at your fingertips.' ) }</h1>
-	</div>
-);
+const ReaderHeader = () => {
+	const translate = useTranslate();
+
+	return (
+		<div className="logged-out-reader-header">
+			<h2>
+				{
+					// translators: The title of the reader tag page
+					translate( 'WordPress Reader' )
+				}
+			</h2>
+			<h1>{ translate( 'Enjoy millions of blogs at your fingertips.' ) }</h1>
+		</div>
+	);
+};
+
+const renderHeaderSection = () => <ReaderHeader />;
 
 export default renderHeaderSection;

client/sections.js

@@ -416,6 +416,7 @@ const sections = [
 		group: 'reader',
 		enableLoggedOut: true,
 		trackLoadPerformance: true,
+		isomorphic: true,
 	},
 	{
 		name: 'reader',