Convert 'contact', 'team', and 'whoami' to app router; partially convert '404' [#134] #1032

genehack · 2024-09-27T19:54:12Z

Description of proposed changes

This converts the global/shared layout and navigation bits, the /contact, /team, and /whoami pages (including login state display in that page and the global nav), and the general outline of the 404/not-found page over to using the App Router. The 404 page is currently only loading a "stub" version of the <Splash /> component; it will be fully ported over soon.

This also required converting all styled-components usage in those parts over to either regular CSS, or to CSS Modules, depending on the scope of the usage. In general, I have tried to keep things scoped either very tightly (i.e., in specific CSS Modules imported into a single component) or put them in a global CSS file that is imported in the root layout.

I have elected to migrate components to /static-site/components as they are converted over for use with App Router; that felt like the cleanest option. I also elected to put page content directly into the app/*/pages.tsx files, rather than propagating the "page content is actually under static-site/src/pages/*.jsx" pattern, reasoning that this reduces the number of moving parts and makes it more clear where the content is relative to the the URL it is displayed at.

To be explicit: when this conversion work is done, I expect the contents of /static-site to be:

README.md
app/
components/
content/        ; maybe unify 
data/           ; these two?
next-env.d.ts
next.config.mjs
public/
static/         ; maybe unify with data?
tsconfig.json
types.d.ts
vendored/

Related issue(s)

#1052
#134

Checklist

Checks pass
Check if changes affect the resource index JSON revision

tsibley · 2024-09-30T17:54:41Z

Comparison via flicker:

genehack · 2024-10-01T16:36:18Z

Is that level of whitespace variation worth trying to nail down, IyourO?

tsibley · 2024-10-01T17:05:43Z

Maybe not? Though if I were doing the work I'd probably still try. It also might have more impact on mobile viewports? Would be good to check. The logo position change seems like it'll have more impact when navigating between a page like the contact page and an Auspice page.

genehack · 2024-10-01T19:14:25Z

Maybe not? Though if I were doing the work I'd probably still try.

Oh believe me, there has been some previous effort in this direction, I assure you.

On first blush, I think I would push further effort getting the header alignment perfect to after adding the login/user tracking bit, as I suspect some of the delta is due to that.

It also might have more impact on mobile viewports? Would be good to check. The logo position change seems like it'll have more impact when navigating between a page like the contact page and an Auspice page.

Yeah, fair; I haven't done a lot of checking around mobile viewport sizes.

package.json

static-site/app/styles/browserCompatability.css

genehack · 2024-10-01T22:35:56Z

BTW, what browser is this, and do you happen to remember the rough viewport size?

genehack · 2024-10-02T18:57:28Z

BTW, what browser is this, and do you happen to remember the rough viewport size?

@tsibley this was a question for you, about that comparison GIF — I'm having trouble reproducing some of the differences visible there with Firefox v131 on macOS.

tsibley · 2024-10-03T04:44:04Z

BTW, what browser is this, and do you happen to remember the rough viewport size?

Firefox 113.0.2 on Linux (specifically 113.0.2+build1-0ubuntu0.18.04.1) with a viewport that's as wide as you see in the full size image (minus the red border).

static-site/app/contact/page.tsx

joverlee521

I really like the direction this is heading, thank you for simplifying the styling ❤️

static-site/app/layout.tsx

static-site/components/footer/index.tsx

joverlee521 · 2024-10-04T23:08:48Z

static-site/app/styles/bootstrap.css

+@media (min-width: 1200px) {
+  .container, .container-sm, .container-md, .container-lg, .container-xl {
+    max-width: 1140px;
+  }
+}


I noticed some additional whitespace on a wider screen and traced it back to the container class. The App router layout is respecting the bootstrap.css max-width of 1140px while the Pages router styled component Container has an additional @media rule

nextstrain.org/static-site/src/components/splash/styles.tsx

Lines 20 to 22 in 7617c38

@media (min-width: 1550px) {

width: 1500px;

}

I'll have to dig and see where I got that 1500px rule from and how it's working on the current prod site...

Ah, sorry I wasn't clear. I meant the 1500px rule is included in the current prod site but is not here.

@joverlee521 Actually, it is there, unless I'm still misunderstanding you.

I do see a layout difference on a larger screen, but it's only in the width of the divs starting with the team avatar icons -- from what I see, the layout from the top of the page down to and including "The core Nextstrain team is" matches exactly; stuff after that is clamped to 1140 ...

but yeah that's because the @media(min-width: 1550px) rule isn't cascading down from the html selector... 🤔

ugh, nvm, stupid bootstrap.

static-site/components/people/avatars.tsx

genehack · 2024-10-17T23:18:08Z

If folks want to take another look at this, I've addressed the feedback about the basic layout (I think! 🤞 ) and also finished the /team page port.

Heroku seems to be having some deployment issues at the moment; when a review app finally builds, I'll link a preview.

Next stage: dealing with the user context.

_Largely_ derived from material in Pages Router pages and components, but with a number of redundant or otherwise unneeded styling elements excised for minimalism. Does not yet implement logged in state, and explicitly drops "minimized" as a nav-bar concept, at least for the moment.

Note: this includes some updates to the FocusParagraph component which required some knock-on changes in the 'contact' page, due to the exports of FocusParagraph changing.

Note: the '404' page uses the same `<Splash />` component as the home page. I currently need to port the '404' page to the App Router, to resolve some test failures, but I do not want to get bogged down into porting the `<Splash />` component right now. Instead, I am adding this stub, which should allow the 404 page to load and (most importantly) satisfy the test suite. The full `<Splash />` component will be fully ported later, at which point the older version of the component will be removed.

Also updates the 404 content test to match the new behavior of not returning the full page. Note: file renaming (`404.jsx` -> `not-found.tsx`) is because Next.js App Router requires the latter name. Note: old `pages/404.jsx` and `src/pages/404.jsx` are left in place because the `ListResources` component depends on the `ErrorContainer` style being exported from them. This will be addressed in a subsequent commit.

* Add <UserDataWrapper> component to base layout to provide access to logged in user via React Context * Wrap username or login link display into <UserOrLoginLink> Client Component; add to <Nav> component

Note: updates the page to use the default layout with the toolbar and team avatars, in addition to the sponsor logos.

genehack · 2024-10-25T19:09:21Z

static-site/app/whoami/styles.module.css

+
+.userGroupList {
+  display: table;
+  margin: 0 auto !important;


note to self: see if you can remove the !important

genehack · 2024-10-25T19:13:40Z

static-site/components/footer/site-map.module.css

@@ -0,0 +1,46 @@
+.siteMap {
+  /* Center contents */
+  margin: 0 auto !important;


note to self: another !important to try removing.

genehack · 2024-10-25T19:14:06Z

static-site/components/footer/site-map.module.css

+  margin: 0 auto !important;
+
+  /* Ensure that, on wide screens, 4 sections renders to roughly align
+  with the width of IconParagraph (rendered below this element) */


note to self: check if IconParagraph is still the correct label here.

genehack · 2024-10-25T19:17:31Z

static-site/components/logos/index.tsx

+  href: string;
+  imgSrc: string;
+  width: number;


note to self: can probably re-use the Logo type here

genehack · 2024-10-25T19:19:26Z

static-site/components/nav/nav-logo.tsx

+  const rainbowTitle = siteTitle
+    .split("")
+    .map((letter, i) => (
+      <span key={i} style={{ color: "var(--titleColor" + i + ")" }}>{letter}</span>


note to self: can you use variable interpolation here and make this string a little cleaner?

nextstrain-bot temporarily deployed to nextstrain-s-convert-bl-qibzaw September 27, 2024 19:54 Inactive

genehack force-pushed the convert-blog-to-app-router-134 branch from dea7987 to 163efe8 Compare September 27, 2024 20:03

nextstrain-bot had a problem deploying to nextstrain-s-convert-bl-wpltic September 27, 2024 20:03 Failure

genehack force-pushed the convert-blog-to-app-router-134 branch from 163efe8 to 91dede0 Compare September 27, 2024 20:04

genehack temporarily deployed to nextstrain-s-convert-bl-wpltic September 27, 2024 20:05 Inactive

genehack force-pushed the convert-blog-to-app-router-134 branch from 91dede0 to 65263b2 Compare September 27, 2024 22:53

nextstrain-bot temporarily deployed to nextstrain-s-convert-bl-z0mywy September 27, 2024 22:53 Inactive

genehack force-pushed the convert-blog-to-app-router-134 branch from 65263b2 to 1f5099a Compare September 27, 2024 22:57

nextstrain-bot temporarily deployed to nextstrain-s-convert-bl-cmum7s September 27, 2024 22:57 Inactive

jameshadfield reviewed Oct 1, 2024

View reviewed changes

package.json Outdated Show resolved Hide resolved

static-site/app/styles/browserCompatability.css Show resolved Hide resolved

victorlin mentioned this pull request Oct 2, 2024

Reflect on the various styling approaches #963

Open

victorlin reviewed Oct 3, 2024

View reviewed changes

static-site/app/contact/page.tsx Outdated Show resolved Hide resolved

joverlee521 reviewed Oct 4, 2024

View reviewed changes

genehack force-pushed the convert-blog-to-app-router-134 branch from 1f5099a to 8d1e000 Compare October 17, 2024 19:39

victorlin reviewed Oct 17, 2024

View reviewed changes

static-site/components/people/avatars.tsx Outdated Show resolved Hide resolved

genehack force-pushed the convert-blog-to-app-router-134 branch from 8d1e000 to 2104fe7 Compare October 17, 2024 23:12

genehack changed the title ~~Convert 'contact' to app router [#134]~~ Convert 'contact' and 'team' to app router [#134] Oct 17, 2024

victorlin temporarily deployed to nextstrain-s-convert-bl-98fca6 October 17, 2024 23:20 Inactive

genehack force-pushed the convert-blog-to-app-router-134 branch from 2104fe7 to b3216b1 Compare October 22, 2024 23:09

genehack temporarily deployed to nextstrain-s-convert-bl-98fca6 October 22, 2024 23:09 Inactive

Update tsconfig for new layout [#134]

9dc9280

genehack force-pushed the convert-blog-to-app-router-134 branch from b3216b1 to d07e6ea Compare October 22, 2024 23:44

genehack force-pushed the convert-blog-to-app-router-134 branch from cba088b to 6c2f71b Compare October 23, 2024 03:01

genehack temporarily deployed to nextstrain-s-convert-bl-98fca6 October 23, 2024 03:01 Inactive

genehack force-pushed the convert-blog-to-app-router-134 branch from 6c2f71b to 12d68b3 Compare October 23, 2024 03:30

genehack temporarily deployed to nextstrain-s-convert-bl-98fca6 October 23, 2024 03:31 Inactive

genehack added 5 commits October 24, 2024 16:59

Convert 'contact' page to App Router [#134]

e5e36f8

Convert 'team' page to App Router [#134]

03b63e3

Note: this includes some updates to the FocusParagraph component which required some knock-on changes in the 'contact' page, due to the exports of FocusParagraph changing.

genehack force-pushed the convert-blog-to-app-router-134 branch from 12d68b3 to db15727 Compare October 25, 2024 00:08

genehack had a problem deploying to nextstrain-s-convert-bl-98fca6 October 25, 2024 00:08 Failure

genehack changed the title ~~Convert 'contact' and 'team' to app router; partially convert '404' [#134]~~ Convert 'contact', 'team', and 'whoami' to app router; partially convert '404' [#134] Oct 25, 2024

genehack force-pushed the convert-blog-to-app-router-134 branch from db15727 to 4007ac1 Compare October 25, 2024 00:17

genehack had a problem deploying to nextstrain-s-convert-bl-98fca6 October 25, 2024 00:17 Failure

genehack force-pushed the convert-blog-to-app-router-134 branch from 4007ac1 to 0e36145 Compare October 25, 2024 00:22

genehack had a problem deploying to nextstrain-s-convert-bl-98fca6 October 25, 2024 00:22 Failure

genehack force-pushed the convert-blog-to-app-router-134 branch from 0e36145 to 167a7c5 Compare October 25, 2024 00:26

genehack had a problem deploying to nextstrain-s-convert-bl-98fca6 October 25, 2024 00:27 Failure

genehack added 2 commits October 24, 2024 17:37

Add context for login state display in nav [#134]

af85251

* Add <UserDataWrapper> component to base layout to provide access to logged in user via React Context * Wrap username or login link display into <UserOrLoginLink> Client Component; add to <Nav> component

Convert 'whoami' page to App Router [#134]

c15a78d

Note: updates the page to use the default layout with the toolbar and team avatars, in addition to the sponsor logos.

genehack force-pushed the convert-blog-to-app-router-134 branch from 167a7c5 to c15a78d Compare October 25, 2024 00:38

genehack deployed to nextstrain-s-convert-bl-98fca6 October 25, 2024 00:38 View deployment

genehack commented Oct 25, 2024

View reviewed changes

genehack marked this pull request as ready for review October 25, 2024 19:23

This was referenced Oct 25, 2024

Convert static-site from Pages Router to App Router #1052

Open

Port /blog to App router; add blog preview cards [#134] #1059

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Convert 'contact', 'team', and 'whoami' to app router; partially convert '404' [#134] #1032

Convert 'contact', 'team', and 'whoami' to app router; partially convert '404' [#134] #1032

genehack commented Sep 27, 2024 •

edited

Loading

tsibley commented Sep 30, 2024 •

edited

Loading

genehack commented Oct 1, 2024

tsibley commented Oct 1, 2024

genehack commented Oct 1, 2024

genehack commented Oct 1, 2024

genehack commented Oct 2, 2024

tsibley commented Oct 3, 2024

joverlee521 left a comment

joverlee521 Oct 4, 2024

genehack Oct 7, 2024

joverlee521 Oct 7, 2024

genehack Oct 16, 2024

genehack Oct 16, 2024

genehack commented Oct 17, 2024

genehack Oct 25, 2024

genehack Oct 25, 2024

genehack Oct 25, 2024

genehack Oct 25, 2024

genehack Oct 25, 2024

Convert 'contact', 'team', and 'whoami' to app router; partially convert '404' [#134] #1032

Are you sure you want to change the base?

Convert 'contact', 'team', and 'whoami' to app router; partially convert '404' [#134] #1032

Conversation

genehack commented Sep 27, 2024 • edited Loading

Description of proposed changes

Related issue(s)

Checklist

tsibley commented Sep 30, 2024 • edited Loading

genehack commented Oct 1, 2024

tsibley commented Oct 1, 2024

genehack commented Oct 1, 2024

genehack commented Oct 1, 2024

genehack commented Oct 2, 2024

tsibley commented Oct 3, 2024

joverlee521 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

genehack commented Oct 17, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

genehack commented Sep 27, 2024 •

edited

Loading

tsibley commented Sep 30, 2024 •

edited

Loading