Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Convert /pathogens to App Router #1066

Closed
Tracked by #1052
genehack opened this issue Nov 13, 2024 · 3 comments · Fixed by #1124
Closed
Tracked by #1052

Convert /pathogens to App Router #1066

genehack opened this issue Nov 13, 2024 · 3 comments · Fixed by #1124
Assignees
@genehack
Labels
enhancement New feature or request

Comments

@genehack
Copy link
Contributor

genehack commented Nov 13, 2024 •
edited by victorlin
Loading

Context

This is part of the Convert static-site from Pages Router to App Router work. See there for additional context.

The /pathogens page uses only the GenericPage and ListResources components.

The GenericPage component is a simple bit of HTML and will be trivial to convert.

ListResources is a fairly massive component that uses some client-side state. On the plus side, it depends on very few things outside itself, and it has already been rewritten in Typescript (albeit, still making extensive use of Styled Components). Converting this component over is expected to be the bulk of the work.
@genehack genehack added the enhancement New feature or request label Nov 13, 2024
This was referenced Nov 13, 2024
Open
Open
@genehack genehack self-assigned this Nov 13, 2024
@victorlin
Copy link
Member

I have some ListResources TypeScript work that I plan to make a PR for soon. Hopefully the app router work can wait for that.

@genehack
Copy link
Contributor Author

I have some ListResources TypeScript work that I plan to make a PR for soon. Hopefully the app router work can wait for that.

yeah, i'm gonna jump back into the blog PR and deal with the redirect issue there before i pick this back up — yesterday i got right to the point where i was gonna touch ListResources and ran out of day, so once that other PR is merged, i can rebase my WIP on top of it.

@victorlin
Copy link
Member

PR for the TypeScript work: #1073

genehack added a commit that referenced this issue Feb 20, 2025
@genehack
Prevent line breaks in <code> tags in <p> tags [#1066]
66d30b5 
Adding this rule stops a small code bit in the rabies/lassa/et al blog
post (`mafft --extend-alignment`) from having an awkward line break
inserted between the command name and the argument.

It's scoped fairly narrowly (`p > code`) so that it (ideally!) will
not have an impact on larger code blocks.
genehack added a commit that referenced this issue Feb 21, 2025
@genehack
Update blog post styling for tables and inline <code> tags [#1066]
b6de18f 
Adds a `blogPost` style to `app/blog/[id]/styles.module.css`, which
includes several additional styling rules, and adds the resulting class
to the `<article>` tag that wraps each blog article.

Added styles improve the visual formatting of tables; see comment in
the `app/blog/[id]/styles.module.css` for specifics.

Additional added style for `<code>` tags inside `<p>` tags stops a
small code bit in the rabies/lassa/et al blog post (`mafft
--extend-alignment`) from having an awkward line break inserted
between the command name and the argument. The narrow scoping is so
that it (ideally!) will not have an impact on larger code blocks.
genehack added a commit that referenced this issue Feb 26, 2025
@genehack
Initial move of /pathogens page into App Router style [#1066]
832e834 
Note: this will leave the site in a broken state; doing this to ensure
better Git tracking of file renames.
genehack added a commit that referenced this issue Feb 26, 2025
@genehack
Initial copy of ExpandableTiles component into App Router style [#1066]
52639e4 
Note: this is a copy, not a move, as `<ExpandableTiles>` is also used
in the `splash` and `Groups` components in addition to the
`ListResources` component that is consumed by the `/pathogens` page.
genehack added a commit that referenced this issue Feb 26, 2025
@genehack
Initial copy of ErrorBoundary component into App Router style [#1066]
4ad805e 
Note: this is a copy, not a move, as `<ErrorBoundary>` is used
elsewhere in the site, in addition to the `ListResources` component
that is consumed by the `/pathogens` page.
genehack added a commit that referenced this issue Feb 26, 2025
@genehack
Initial copy of ListResources component into App Router style [#1066]
365f622 
Note: this is a copy, not a move, as `<ListResources>` is used
elsewhere in the site, in addition to the `/pathogens` page.
genehack added a commit that referenced this issue Feb 26, 2025
@genehack
Initial move of Spinner component into App Router style [#1066]
bf36e84 
Note: despite the placement of the component outside the
<ListResources> component, it is only used within that component.

I considered relocating it to
`static-site/components/list-resources/spinner.tsx` but elected to
maintain it outside of the <ListResources> component to better support
future re-use, which seems not unlikely.

Note also: the component is likely broken as of this commit, due to
this move; doing this as a distinct commit to better track the file
move.
genehack added a commit that referenced this issue Feb 26, 2025
@genehack
Port <ExpandableTiles> component to App Router style [#1066]
9563c60 
* add `use client` because of use of `useState`
* rename `Tile` type to `GenericTileBase`; rename `AnyTile` to `Tile`
* converted styled components to CSS module
* swap various prop-driven styled components bits to dynamic inline
  styles
genehack added a commit that referenced this issue Feb 26, 2025
@genehack
Port <ErrorBoundary> component to App Router style [#1066]
a9022b2 
* move `div.errorContainer` into global CSS file because it is
  used in multiple places
genehack added a commit that referenced this issue Feb 26, 2025
@genehack
Port <ListResources> types file to App Router style [#1066]
c5f6324 
* segregate types and functions
* update formatting
genehack added a commit that referenced this issue Feb 26, 2025
@genehack
Port <ListResources> dodge.js file to App Router [#1066]
da0eb3a 
* adjust leading/trailing whitespace
genehack added a commit that referenced this issue Feb 26, 2025
@genehack
Port <ResourceModal> (part of <ListResources>) to App Router [#1066]
c3a0fde 
* move styling from styled components to CSS module
* refactor <ResourceModal> to `useContext` and `useCallback` to build
  `dismissModal()` function, rather than passing it in — this was
  necessary because all props of React Client Components need to be
  serializable (i.e., not functions), and <ResourceModal> needs to
  "use client" because it depends on `useState` and `useEffect`
* refactor the `_draw` function out into a distinct
  file (`modal_draw.js`) to reflect the lack of typing in that code (I
  briefly explored converting that file to Typescript and concluded
  the juice was not worth the squeeze)
  * note that this also means we don't need to add @types/d3 to
    devDependencies
genehack added a commit that referenced this issue Feb 26, 2025
@genehack
Port <Spinner> component to App Router style [#1066]
12fae78 
* export component as a function
* convert to Typescript; light reformatting
genehack added a commit that referenced this issue Feb 26, 2025
@genehack
Port <IndividualResource> to App Router style [#1066]
b9852d2 
* Refactor <Name>, <ResourceLinkWrapper>, and <ResourceLink> into
  <IndividualResourceLink>, and migrate into distinct file; in the
  future, <GroupLink> will also be refactored into that file, which is
  reflected in the `group-and-resource-links` file name
* Refactor <IconContainer> into distinct file, rework to avoid need to
  pass non-serializable prop
* Refactor <IndividualResource> and associated components from Styled
  to CSS Module
* Refactor <IndividualResource> component to be passed `gapWidth`
  prop, which supports cleaner separation of concerns with where that
  constant is defined and used
* Refactor <TooltipWrapper> into a distinct file, because it doesn't
  need to be a React Client component
genehack added a commit that referenced this issue Feb 26, 2025
@genehack
Port <ResourceGroup> component to App Router style [#1066]
7c47d3f 
* Refactored styles from structured component to CSS Module
* Refactored <GroupLink> and <IndividualQuickLink> components out into
  `group-and-resource-links.tsx`
* Refactored <ResourceGroup> and contained components
genehack added a commit that referenced this issue Feb 26, 2025
@genehack
Port useSortAndFilter() to App Router style [#1066]
12cd98b 
* convert `export const`` to `export default function`
* add "use client"
* refactor and update code
genehack added a commit that referenced this issue Feb 26, 2025
@genehack
Port createFilterOptions and useFilterOptions to App Router style [#1066
e645f71 
]

* formatting consistency with other code
genehack added a commit that referenced this issue Feb 26, 2025
@genehack
Port useDataFetch to App Router style [#1066]
7fe3855 
* convert to React Client Component
* refactor code lightly
genehack added a commit that referenced this issue Feb 26, 2025
@genehack
Port <ListResources> to App Router style [#1066]
0fa4269 
* convert from styled comp to css module
* convert const fat-arrows to functions
* update imports, etc.
genehack added a commit that referenced this issue Feb 26, 2025
@genehack
Port /pathogens to App Router [#1066]
2c61411
genehack added a commit that referenced this issue Feb 26, 2025
@genehack
Port <IndividualResource> to App Router style [#1066]
5594103 
* Refactor <Name>, <ResourceLinkWrapper>, and <ResourceLink> into
  <IndividualResourceLink>, and migrate into distinct file; in the
  future, <GroupLink> will also be refactored into that file, which is
  reflected in the `group-and-resource-links` file name
* Refactor <IconContainer> into distinct file, rework to avoid need to
  pass non-serializable prop
* Refactor <IndividualResource> and associated components from Styled
  to CSS Module
* Refactor <IndividualResource> component to be passed `gapWidth`
  prop, which supports cleaner separation of concerns with where that
  constant is defined and used
* Refactor <TooltipWrapper> into a distinct file, because it doesn't
  need to be a React Client component
genehack added a commit that referenced this issue Feb 26, 2025
@genehack
Port <ResourceGroup> component to App Router style [#1066]
5c608af 
* Refactored styles from structured component to CSS Module
* Refactored <GroupLink> and <IndividualQuickLink> components out into
  `group-and-resource-links.tsx`
* Refactored <ResourceGroup> and contained components
genehack added a commit that referenced this issue Feb 26, 2025
@genehack
Port useSortAndFilter() to App Router style [#1066]
21e0bcd 
* convert `export const`` to `export default function`
* add "use client"
* refactor and update code
genehack added a commit that referenced this issue Mar 6, 2025
@genehack
Port <ListResources> types file to App Router style [#1066]
ee705d7 
* segregate types and functions
* update formatting
genehack added a commit that referenced this issue Mar 6, 2025
@genehack
Port <ListResources> dodge.js file to App Router [#1066]
020ea7a 
* adjust leading/trailing whitespace
genehack added a commit that referenced this issue Mar 6, 2025
@genehack
Port <ResourceModal> (part of <ListResources>) to App Router [#1066]
48185e7 
* move styling from styled components to CSS module
* refactor <ResourceModal> to `useContext` and `useCallback` to build
  `dismissModal()` function, rather than passing it in — this was
  necessary because all props of React Client Components need to be
  serializable (i.e., not functions), and <ResourceModal> needs to
  "use client" because it depends on `useState` and `useEffect`
* refactor the `_draw` function out into a distinct
  file (`modal_draw.js`) to reflect the lack of typing in that code (I
  briefly explored converting that file to Typescript and concluded
  the juice was not worth the squeeze)
  * note that this also means we don't need to add @types/d3 to
    devDependencies
genehack added a commit that referenced this issue Mar 6, 2025
@genehack
Port <Spinner> component to App Router style [#1066]
282af83 
* export component as a function
* convert to Typescript; light reformatting
genehack added a commit that referenced this issue Mar 6, 2025
@genehack
Port <IndividualResource> to App Router style [#1066]
87dd7e8 
* Refactor <Name>, <ResourceLinkWrapper>, and <ResourceLink> into
  <IndividualResourceLink>, and migrate into distinct file; in the
  future, <GroupLink> will also be refactored into that file, which is
  reflected in the `group-and-resource-links` file name
* Refactor <IconContainer> into distinct file, rework to avoid need to
  pass non-serializable prop
* Refactor <IndividualResource> and associated components from Styled
  to CSS Module
* Refactor <IndividualResource> component to be passed `gapWidth`
  prop, which supports cleaner separation of concerns with where that
  constant is defined and used
* Refactor <TooltipWrapper> into a distinct file, because it doesn't
  need to be a React Client component
genehack added a commit that referenced this issue Mar 6, 2025
@genehack
Port <ResourceGroup> component to App Router style [#1066]
1a884d3 
* Refactored styles from structured component to CSS Module
* Refactored <GroupLink> and <IndividualQuickLink> components out into
  `group-and-resource-links.tsx`
* Refactored <ResourceGroup> and contained components
genehack added a commit that referenced this issue Mar 6, 2025
@genehack
Port useSortAndFilter() to App Router style [#1066]
02cc533 
* convert `export const`` to `export default function`
* add "use client"
* refactor and update code
genehack added a commit that referenced this issue Mar 6, 2025
@genehack
Port createFilterOptions and useFilterOptions to App Router style [#1066
ef759d5 
]

* formatting consistency with other code
genehack added a commit that referenced this issue Mar 6, 2025
@genehack
Port useDataFetch to App Router style [#1066]
007865b 
* convert to React Client Component
* refactor code lightly
genehack added a commit that referenced this issue Mar 6, 2025
@genehack
Port <ListResources> to App Router style [#1066]
40199b3 
* convert from styled comp to css module
* convert const fat-arrows to functions
* update imports, etc.
genehack added a commit that referenced this issue Mar 6, 2025
@genehack
Port /pathogens to App Router [#1066]
d6f0962
genehack added a commit that referenced this issue Mar 6, 2025
@genehack
Port <ResourceGroup> component to App Router style [#1066]
43ea816 
* Refactored styles from structured component to CSS Module
* Refactored <GroupLink> and <IndividualQuickLink> components out into
  `group-and-resource-links.tsx`
* Refactored <ResourceGroup> and contained components
genehack added a commit that referenced this issue Mar 6, 2025
@genehack
Port useSortAndFilter() to App Router style [#1066]
153b38c 
* convert `export const`` to `export default function`
* add "use client"
* refactor and update code
genehack added a commit that referenced this issue Mar 6, 2025
@genehack
Port createFilterOptions and useFilterOptions to App Router style [#1066
a9555dd 
]

* formatting consistency with other code
genehack added a commit that referenced this issue Mar 6, 2025
@genehack
Port useDataFetch to App Router style [#1066]
87b0c78 
* convert to React Client Component
* refactor code lightly
genehack added a commit that referenced this issue Mar 6, 2025
@genehack
Port <ListResources> to App Router style [#1066]
81a1bac 
* convert from styled comp to css module
* convert const fat-arrows to functions
* update imports, etc.
genehack added a commit that referenced this issue Mar 6, 2025
@genehack
Port /pathogens to App Router [#1066]
4cfe238
genehack added a commit that referenced this issue Mar 6, 2025
@genehack
Port <ListResources> to App Router style [#1066]
d974cb0 
* convert from styled comp to css module
* convert const fat-arrows to functions
* update imports, etc.
genehack added a commit that referenced this issue Mar 6, 2025
@genehack
Port /pathogens to App Router [#1066]
feb55a3 
This moves the resource listing callback into a distinct file; this is
because Next.js Pages are limited in the types of methods that can be
exported from them.

The resource listing code was moved into a distinct method, which is
imported by the `<ListResources>` component, so that this page file
can remain a React Server Component, which allows for the Metadata API
to be used to generate content in the page `<head>` during SSR, prior
to hydration.
genehack added a commit that referenced this issue Mar 10, 2025
@genehack
Port <ResourceModal> (part of <ListResources>) to App Router [#1066]
678d367 
* move styling from styled components to CSS module
* refactor <ResourceModal> to `useContext` and `useCallback` to build
  `dismissModal()` function, rather than passing it in — this was
  necessary because all props of React Client Components need to be
  serializable (i.e., not functions), and <ResourceModal> needs to
  "use client" because it depends on `useState` and `useEffect`
* refactor the `_draw` function out into a distinct
  file (`modal_draw.js`) to reflect the lack of typing in that code (I
  briefly explored converting that file to Typescript and concluded
  the juice was not worth the squeeze)
  * note that this also means we don't need to add @types/d3 to
    devDependencies
genehack added a commit that referenced this issue Mar 10, 2025
@genehack
Port <Spinner> component to App Router style [#1066]
9a289d1 
* export component as a function
* convert to Typescript; light reformatting
genehack added a commit that referenced this issue Mar 10, 2025
@genehack
Port <IndividualResource> to App Router style [#1066]
90708fc 
* Refactor <Name>, <ResourceLinkWrapper>, and <ResourceLink> into
  <IndividualResourceLink>, and migrate into distinct file; in the
  future, <GroupLink> will also be refactored into that file, which is
  reflected in the `group-and-resource-links` file name
* Refactor <IconContainer> into distinct file, rework to avoid need to
  pass non-serializable prop
* Refactor <IndividualResource> and associated components from Styled
  to CSS Module
* Refactor <IndividualResource> component to be passed `gapWidth`
  prop, which supports cleaner separation of concerns with where that
  constant is defined and used
* Refactor <TooltipWrapper> into a distinct file, because it doesn't
  need to be a React Client component
genehack added a commit that referenced this issue Mar 10, 2025
@genehack
Port <ResourceGroup> component to App Router style [#1066]
4ce3f3c 
* Refactored styles from structured component to CSS Module
* Refactored <GroupLink> and <IndividualQuickLink> components out into
  `group-and-resource-links.tsx`
* Refactored <ResourceGroup> and contained components
genehack added a commit that referenced this issue Mar 10, 2025
@genehack
Port useSortAndFilter() to App Router style [#1066]
b686a1c 
* convert `export const`` to `export default function`
* add "use client"
* refactor and update code
genehack added a commit that referenced this issue Mar 10, 2025
@genehack
Port createFilterOptions and useFilterOptions to App Router style [#1066
1c125bd 
]

* formatting consistency with other code
genehack added a commit that referenced this issue Mar 10, 2025
@genehack
Port useDataFetch to App Router style [#1066]
5426b24 
* convert to React Client Component
* refactor code lightly
genehack added a commit that referenced this issue Mar 10, 2025
@genehack
Port <ListResources> to App Router style [#1066]
4e65913 
* convert from styled comp to css module
* convert const fat-arrows to functions
* update imports, etc.
genehack added a commit that referenced this issue Mar 10, 2025
@genehack
Port /pathogens to App Router [#1066]
3a75a9a 
This moves the resource listing callback into a distinct file; this is
because Next.js Pages are limited in the types of methods that can be
exported from them.

The resource listing code was moved into a distinct method, which is
imported by the `<ListResources>` component, so that this page file
can remain a React Server Component, which allows for the Metadata API
to be used to generate content in the page `<head>` during SSR, prior
to hydration.
genehack added a commit that referenced this issue Mar 10, 2025
@genehack
Merge pull request #1124 from nextstrain/convert-pathogens-to-app-rou…
be1c8c1 
…ter-1066

Convert pathogens to app router [#1066]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@genehack genehack

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Convert pathogens to app router [#1066] nextstrain/nextstrain.org
2 participants
@genehack @victorlin