aboutsummaryrefslogtreecommitdiffstats
path: root/src/components
Commit message (Collapse)AuthorAgeFilesLines
* fix(styles): increase CSS specifity for some selectorsArmand Philippot2023-12-206-138/+139
| | | | | | | | | | | Since `sideEffects` has been added to activate tree shakings, the styles are imported in the wrong order in production build. There is an open issue (again) on Next.js repo. I'm not sure it will be fixed soon so in the meantime I had to increase the specifity of some selectors to avoid broken styles. I also fixed two minor layout errors: * CV page widgets should use headings of level 2 * Homepage should wrap the cards in list items
* build: improve bundle sizeArmand Philippot2023-12-204-32/+94
| | | | | | | | | * add `sideEffects` in package.json to activate tree shaking for barrel files * use dynamic imports on social links and icons * resize social media images * resize large project image (demo apcom) * resize website logo
* fix(layout): refine pagination when JS is disabledArmand Philippot2023-12-192-2/+15
| | | | | | | | * fix the total number of pages * hide the load more button and the progress bar * remove the informative notice since it is no longer necessary * if the page number is equal to 1, use Blog route directly (NextJS is not able to redirect the user when JS is disabled)
* fix(components): make navbar usable with javascript disabledArmand Philippot2023-12-195-56/+36
|
* fix(components): prevent search form overflow on small devicesArmand Philippot2023-12-191-0/+4
|
* chore(layout): improve noscript banner stylesArmand Philippot2023-12-181-1/+9
|
* fix(branding): do not reanimate branding on route changeArmand Philippot2023-12-161-1/+10
| | | | | | | The branding animation should occurs only once. Since we're changing the heading from a h1 to a p and vice-versa, the CSS animation was retriggered. By using a ref to make sure it is the first render, we can prevent this behaviour.
* fix(layout): reset focus on route changeArmand Philippot2023-12-161-2/+16
| | | | | | | I mistakenly removed the `giveFocusToTop` on route change but Next router is still not fully accessible. It is important for keyboard users to be redirected at the top of the page when changing page so we need to reset the focus.
* fix(build): handle Next.js errors and warnings during buildArmand Philippot2023-12-163-3/+18
| | | | | | | | | | | | * extract Blog component from BlogPage (paginated) and extract Article component from ArticlePage to avoid `Cannot read properties` errors due to fallback route * fix sitemap build (cjs not supported) * fix eslint warnings (react/jsx-no-literals) * update `start` script since I'm using standalone output * update `postbuild` script since we need to copy public and static files to standalone directory (Next.js does not handle it itself because we should use a CDN...)
* build(deps): bump all dependencies except undiciArmand Philippot2023-12-151-1/+0
| | | | undici v6 is breaking Jest tests (ReadableStream, structuredClone)
* refactor(stories): migrate stories to CSF3 formatArmand Philippot2023-12-15130-6913/+5080
|
* refactor(pages): rewrite helpers to output schema in json-ld formatArmand Philippot2023-12-146-53/+17
| | | | | | | | | | | | | * make sure url are absolutes * nest breadcrumb schema in webpage schema * trim HTML tags from content/description * use a regular script instead of next/script (with the latter the schema is not updated on route change) * place the script in document head * add keywords, wordCount and readingTime keys in BlogPosting schema * fix breadcrumbs in search page (without query) * add tests (a `MatchInlineSnapshot` will be better but Prettier 3 is not supported yet)
* refactor(hooks): rewrite useBreadcrumbs hookArmand Philippot2023-12-125-19/+19
| | | | | | | * use next/router to get the slug instead of using props * handle cases where the current page title is not provided * update JSON-LD schema to match the example in documentation * add tests
* refactor(pages): refine 404 pageArmand Philippot2023-12-091-3/+6
| | | | | * refresh topics and thematics list using hooks * add Cypress tests
* refactor(pages): refine Project pagesArmand Philippot2023-12-084-108/+56
| | | | | | | | | | | * refactor ProjectOverview component to let consumers handle the value * extract project overview depending on Github to avoid fetching Github API if the project is not on Github * wrap dynamic import in a useMemo hook to avoid infinite rerender * fix table of contents by adding a useMutationObserver hook to refresh headings tree (without it useHeadingsTree is not retriggered once the dynamic import is done) * add Cypress tests
* refactor(pages): refine Topic pagesArmand Philippot2023-12-011-1/+13
| | | | | | * add useTopic and useTopicsList hooks to refresh data * add a table of contents * add Cypress tests
* refactor(pages): refine Article pagesArmand Philippot2023-12-0111-9/+156
| | | | | | | | | | | * use rehype to update code blocks class names * fix widget heading level (after a level 1 it should always be a level 2 and not 3) * replace Spinner with LoadingPage and LoadingPageComments components to keep layout coherent * refactor useArticle and useComments hooks * fix URLs in JSON LD schema * add Cypress tests
* refactor(pages): improve HomepageArmand Philippot2023-11-295-1/+78
| | | | | | | | | * move custom homepage components that does not require props to the MDX file (links should not need to be translated here but where they are defined) * move SEO title and meta desc to MDX file * make Page component the wrapper instead of using a React fragment * fix MDX module types
* fix(pages,services): make thematics & topics pages usable againArmand Philippot2023-11-291-1/+1
| | | | | | | | | | When I refactored the fetchers and convertors in #f111685 I forgot to convert WPThematicPreview and WPTopicPreview so the thematics and topics pages was broken. I also: * removed the ToC added by error in #70b4f63 * fix heading styles * fix website url in topics pages
* refactor(services, types): reorganize GraphQL fetchers and data typesArmand Philippot2023-11-271-4/+6
| | | | | | | | | | | | The Typescript mapped types was useful for autocompletion in fetchers but their are harder to maintain. I think it's better to keep each query close to its fetcher to have a better understanding of the fetched data. So I: * colocate queries with their own fetcher * colocate mutations with their own mutator * remove Typescript mapped types for queries and mutations * move data convertors inside graphql services * rename most of data types and fetchers
* refactor(components): refine Card component stylesArmand Philippot2023-11-231-15/+29
| | | | | | | * remove cover img absolute positioning * remove fixed height on card variant 1 * make title always centered on card variant 2 * make header meta centered on card variant 2 on small containers
* refactor(components): integrate sectioned page template into PageArmand Philippot2023-11-2318-340/+241
| | | | | | | | * replace Section component by a generic one (other components should be able to use it) * add a PageSection component * add `hasSections` prop to Page component * remove sectioned-page template
* refactor(components): replace items prop in Grid with children propArmand Philippot2023-11-227-113/+245
| | | | | | | | | It is easier to read and to maintain this way. The `items` prop was not useful since we are not manipulating the items. Changes: * extract GridItem component from Grid component * replace `items` prop of type Array<ReactNode> with `children` prop of type ReactNode * remove GridItem styles
* refactor(components,pages): extract MDX components mapping from pagesArmand Philippot2023-11-224-8/+98
| | | | | | | Instead of repeating the overriding on each pages, we should define it in one place and reuse it in pages. By default it is not possible to override native HTML tags with MDX so I added a plugin in next config to allow it.
* refactor(components): split Layout component in smaller componentsArmand Philippot2023-11-2218-565/+799
| | | | | The previous component was too long and hardly readable. So I splitted it in different part and added tests.
* refactor(components): replace items prop in Navbar componentArmand Philippot2023-11-2111-283/+216
| | | | | | | | | | | | | | * replace `items` prop with `children` prop: it is more readable this way, * handle navbar item state inside NavbarItem component: it avoid using three differents states and their methods to do exactly the same thing * remove useAutofocus hook since we can't use it anymore * add `onActivation` and `activationHandlerDelay` prop to NavbarItem component to be able to focus the search input only when the item is activated (it replicates the functioning of useAutofocus hook) * replace `ref` type in SearchForm component: it does not make sense to use an input ref for a form. Instead I use useImperativeHandle to provide different a focus method to the given ref.
* refactor(components): replace PageLayout template with PageArmand Philippot2023-11-2035-1450/+1858
| | | | | | | | | * split pages in smaller components (it is both easier to maintain and more readable, we avoid the use of fragments in pages directory) * extract breadcrumbs from article tag (the navigation is not related to the page contents) * remove useReadingTime hook * remove layout options except `isHome`
* refactor(components): extract MetaItem from MetaListArmand Philippot2023-11-2016-508/+423
| | | | | | * replace `items` prop on MetaList with `children` prop: it was too restrictive and the global options was not really useful. It is better too give control to the consumers.
* fix: generate an id for each headings in the page main contentsArmand Philippot2023-11-183-13/+10
| | | | | | | | | | | | | | | | | | | | Since #be4d907 the ids was no longer addded to headings in useHeadingsTree hook. It was a bad practice to manipulate the DOM that way. However, I did not move the implementation elsewhere... To fix this, I now use rehype-slug on both markdown contents and html string coming from WordPress. I'm not sure the dynamic imports are really useful here since the table of contents is on almost all pages but Jest was failing with regular import because of ESM. It is the only thing that makes the tests functional again so... However if we want to test the `updateContentTree` function, Jest fails for the same reason. So I decided to not test this function. I've already spend too much time on this issue. Another problem: the ToC on projects page. Currently we use the ref on the body but the page contents are imported dynamically so the hook is executed before the contents are loaded. It makes the ToC empty... We should refactor the pages so we can use the ref directly on the imported contents.
* build(components, hooks): fix type errors introduced by deps upgradeArmand Philippot2023-11-161-2/+4
| | | | Since #7e37f2b Typescript was complaining about some types.
* feat(components): add an option to CommentsList to forbid repliesArmand Philippot2023-11-163-4/+56
|
* refactor(hooks): replace useRouteChange with useOnRouteChange hookArmand Philippot2023-11-151-3/+3
| | | | | | * handle both event start and event complete * clean the effect * add tests
* refactor(hooks): rewrite useScrollPosition hookArmand Philippot2023-11-151-14/+10
| | | | | | * return the scroll position (both X and Y) * no longer accepts arguments * add tests
* refactor(hooks): remove useSettings hookArmand Philippot2023-11-153-11/+14
| | | | | | | It does not make sense to re-export an existing object through a hook. On some pages both the hook and the object was imported... It is better to use the CONFIG (previously settings) object directly and by doing it we avoid potential errors because of conditional hooks.
* refactor(components, hooks): rewrite ToC and useHeadingsTreeArmand Philippot2023-11-1410-128/+150
| | | | | | | | | | | | * replace TableOfContents component with TocWidget to keep the name of widget components coherent * replace `wrapper` prop with `tree` prop (the component no longer uses the hook, it is up to the consumer to provide the headings tree) * let consumer handle the widget title * add options to useHeadingsTree hook to retrieve only the wanted headings (and do not assume that h1 is unwanted) * expect an ref object instead of an element in useHeadingsTree hook * rename most of the types involved
* refactor(components): replace LinksListWidget with LinksWidgetArmand Philippot2023-11-1412-320/+320
| | | | | | | * avoid List component repeat * rewrite tests and CSS * add an id to LinksWidgetItemData (previously LinksListItems) type because the label could be duplicated
* refactor(components): replace Sharing with SharingWidget componentArmand Philippot2023-11-149-312/+341
| | | | | | | * all the widgets should have a coherent name * fix mailto uri * remove useless CSS * add tests
* refactor(components): replace SocialMedia with SocialMediaWidgetArmand Philippot2023-11-138-98/+77
| | | | | | * the goal is to make the name of the widgets coherent * remove useless CSS * replace Media type with SocialMediaData
* refactor(components): rewrite ImageWidget componentArmand Philippot2023-11-139-335/+253
| | | | | | | | * remove `imageClassName` prop * replace `image` prop with `img` and expect an image instead of an object * remove `alignment prop` * remove useless CSS
* refactor(components): rewrite PostsList componentArmand Philippot2023-11-1316-611/+424
| | | | | | | | | | | | | | | * remove NoResults component and move logic to Search page * add a usePostsList hook * remove Pagination from PostsList (it is only used if javascript is disabled and not on every posts list) * replace `byYear` prop with `sortByYear` * replace `loadMore` prop with `onLoadMore` * remove `showLoadMoreBtn` (we can use `loadMore` prop instead to determine if we need to display the button) * replace `titleLevel` prop with `headingLvl` * add `firstNewResult` prop to handle focus on the new results when loading more article (we should not focus a useless span but the item directly)
* refactor(components): replace Overview with ProjectOverview componentArmand Philippot2023-11-1111-193/+440
| | | | | | * `cover` prop is now expecting a ReactElement (NextImage) * `meta` prop is now limited to a specific set of meta items * add a `name` prop to add an accessible name to the figure element
* refactor(components): rewrite CommentsList componentArmand Philippot2023-11-1114-334/+703
| | | | | | * use ApprovedCommentProps to make CommentData type * add the author name of the parent on reply form heading * add tests
* refactor(components): split Comment component into 3 componentsArmand Philippot2023-11-1125-427/+707
| | | | | | | | | * add ApprovedComment, PendingComment and ReplyCommentForm components * let consumer handle reply form visibility * move structured data into article page (each article already has the comments data and already handle json ltd schema so I prefered to move the schema in the final consumer instead of adding a script element foreach comment)
* refactor(components): replace Summary component with PostPreviewArmand Philippot2023-11-1117-454/+804
| | | | | | | | | | | * rename component to PostPreview because Summary is an HTML element and it could lead to confusion * replace `title` and `titleLevel` with `heading` and `headingLvl` because `title` is a native attribute * rename `intro` prop to `excerpt` * extract `cover` from `meta` prop * rewrite meta type * extract meta logic into a new component
* refactor(components): rewrite CommentForm componentArmand Philippot2023-11-1114-448/+382
| | | | | | * remove `Notice` prop to handle it directly in the form * replace `saveComment` prop with `onSubmit` * use `useForm` hook to handle the form
* refactor(components): rewrite ContactForm componentArmand Philippot2023-11-114-254/+308
| | | | | | * remove `Notice` props to handle it directly inside the form * replace `sendMail` prop with `onSubmit` prop * use `useForm` hook to handle fields
* refactor(components): rewrite SearchForm componentArmand Philippot2023-11-1113-231/+245
| | | | | | * remove searchPage prop (the consumer should handle the submit) * change onSubmit type * use `useForm` hook to handle the form
* refactor(components): replace Toolbar with Navbar componentArmand Philippot2023-11-1150-1516/+959
| | | | | | | | * remove SearchModal and SettingsModal components * add a generic NavbarItem component (instead of the previous toolbar items to avoid unreadable styles...) * move FlippingLabel component logic into NavbarItem since it is only used here
* refactor(hooks): replace useInputAutofocus with useAutofocus hookArmand Philippot2023-11-111-7/+4
| | | | | | * extract setTimeout logic using useTimeout * change condition to be a function * return a ref
* refactor(hooks): rewrite useOnClickOutside hookArmand Philippot2023-11-111-4/+6
| | | | | | | * remove `useCapture` parameter (it does not make sense to use bubbling here) * return a MutableRefObject instead of a RefObject to be able to test the hook