Add embedded Instagram posts #129
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Enhanced the documentation for the Card component and its subcomponents by adding detailed JSDoc comments, including usage examples. This improves code readability and helps developers understand component usage.
Added JSDoc comments to the ClickableBorder component for better clarity and usability. Reformatted the code to improve readability and maintain consistent code style.
Introduced JSDoc comments to the Container component for improved code documentation. These comments detail the props, including an example of using the component with and without additional classes.
Introduced JSDoc comments to improve code documentation and readability. Also removed unnecessary whitespace and fixed minor formatting issues for better code consistency.
Included description, transformation steps, parameter, return type, and an example in the JSDoc. This enhances code clarity and aids developers in understanding the function's behavior and usage.
Enhanced code documentation by adding JSDoc comments to the `EditorPreview` and `CustomEditorCreateNew` components. This includes param and return descriptions, as well as usage examples, to improve code readability and maintainability.
Added detailed JSDoc comments to the Header, InputField, Button, and BaseForm components in CustomForm.tsx. These comments enhance code readability and provide clear examples of usage for each component.
Cleared unnecessary commented code from the CustomSlider.tsx file. This improves code readability and maintains a clean codebase.
Enhanced the CustomSlider component with detailed JSDoc comments for better documentation and understanding of its usage. Included an example showcasing how to utilize the component for rendering a list of items.
Documented the Fancybox component with JSDoc comments, including the description of props and an example usage. This improves code readability and provides developers with clear usage instructions.
Introduced JSDoc comments to the HorizontalLines component for better code documentation
Enhanced the Loader component by adding detailed JSDoc comments, including a usage example. This improves code readability and helps developers understand how to use the component effectively.
Removed redundant blank lines and commented-out code to improve readability and maintainability of the Modal component. This change enhances code quality without affecting the functionality.
Enhanced the documentation for the Modal component by adding JSDoc comments. This provides detailed descriptions of the props and an example of how to use the component.
Added detailed documentation to the `NavbarSide` component, including usage examples and parameter descriptions. Also adjusted the formatting to align with common code style conventions.
Enhanced the Paragraph component by adding JSDoc comments for better documentation and understanding. These comments describe the component's props and provide a usage example.
Introduced a JSDoc comment block to the Popup component to provide an example usage and enhance code documentation. The format of the import statement and some indentation inconsistencies were also adjusted for better code readability.
This update documents the getPostDataById function with JSDoc comments, including parameter descriptions and an example usage. These comments improve code readability and provide clear usage instructions for developers.
Enhanced the sortPostsByDatesDesc function with comprehensive JSDoc comments. These additions include detailed descriptions of parameters, return values, and an example usage to improve code readability and maintainability.
Enhanced the ParsedPostBody component with JSDoc comments to improve code documentation and readability. The added comments provide information about the prop types and usage examples for better developer understanding.
Annotated the Post component with JSDoc comments to improve readability and provide detailed descriptions for properties and usage. Included an example usage snippet for better understanding.
Enhanced the SidebarItem component with JSDoc comments to improve code documentation. This includes descriptions for props and examples for rendering different types of sidebar items.
Reorganized and cleaned up the Sidebar component code to improve readability and maintainability. Enhanced documentation with a comprehensive JSDoc comment block, including usage examples and detailed descriptions of the component's functionality and props.
Enhance WikiContentWithSideBar with comprehensive JSDoc comments, providing descriptions and usage examples. Improves code readability and aids developers in understanding the component's structure and purpose.
fix bug with cropping group label for hero page
Leo/docs/update shared
Changed the import path for useTheme from preparedApp/providers to app/_providers in ThemeSwitcher.test.tsx. This ensures that the mock implementation aligns with the updated module location.
Refactored test descriptions for clarity and replaced undefined URL handling with 'about:blank' to ensure a blank tab is opened when no URL is provided. This improves the robustness and readability of the test cases.
Corrected the import path used in the jest.mock function to match the actual module location. This ensures the mock accurately references the intended ThemeProvider.
… desktop logic, add JSDoc documentation
Joni/bug/81-fix-mobiletablet-sidebar
Reorder the background-color style to come after custom-scrollbar mixin in index.scss for better browser compatibility. This change ensures that the custom scrollbar styles are applied correctly across different browsers.
Changed the background color in the light theme from a medium blue shade to a darker blue. This enhances contrast and readability for users of the light theme.
Replace outline with box-shadow to improve button aesthetics and alignment with design requirements. This change retains the original emphasis by preserving visual distinction with an updated approach.
Removed commented-out CSS rules to clean up the NavbarMobileV2 stylesheet. Adjusted the langSwitcher outline to use a box shadow for better visual consistency.
Removed unnecessary margins and cleaned up CSS for NavbarMobileV2. Updated langSwitcher to use border instead of box-shadow and added focus styles to improve accessibility.
Deleted unused CSS code related to button animations in the Sidebar module. This cleanup improves readability and maintains a cleaner codebase.
Added CSS rules to manage text-overflow, opacity, and visibility of sidebar items. This ensures smooth transition effects when the sidebar is toggled between collapsed and expanded states.
Enhanced scrollbar detection by adding a MutationObserver to monitor DOM changes. This ensures the scrollbar state is updated more accurately when the document content changes.
This cleanup improves readability and reduces potential confusion by eliminating imports that are not used in the code. Specifically, the removed imports include `Navbar` and `ScrollTop`, which were previously not utilized in the file.
Added serif as a fallback font in the SectionMembers h2 element. This ensures that if the main font fails to load, the text will still be rendered adequately.
Updated the MembersSection font-family to include serif and set a fixed min-height for better layout control. Removed commented-out and unnecessary lines for improved code clarity and maintenance. Adjusted .workmanComponent and related elements for streamlined styling and readability.
Replaced `.item` selector with `& *` in Sidebar to encompass all child elements and ensure text overflow handling with ellipsis. Additionally, removed unnecessary blank lines in the NavbarMobileV2 module.
Eliminated the `backgroundOpacity` class and redundant comments from `MembersPage.module.scss`. This cleanup improves readability and ensures that only necessary styles are included in the stylesheet.
Updated reset.scss to apply box-sizing: border-box to all elements, including pseudo-elements. This ensures consistent sizing across components and improves layout handling.
Added max-width and padding to the members list container for improved layout. Also, adjusted text properties to handle overflow and hyphens more gracefully.
The 'word-break: break-all;' property was commented out and is now removed from the SectionMembers.module.scss file. This cleanup helps maintain a tidy and readable codebase.
leolabdev
requested changes
Oct 3, 2024
There was a problem hiding this comment.
Yes, but no. It seems to me that the component is too small to be a full-fledged widget. I would make it part of the widget responsible for displaying Game Art.
Take a look at the layout in Figma—the idea is that we have a widget which can have two versions inside: full and shortened. The shortened version includes a button at the bottom that will take us to the Game Art page, where the full version of the widget is displayed.
I think this widget should accept something like this as props:
{ version: "full" | "preview", options: { artPageLink: string } }TypeScript also allows us to configure a parameter dependent on another. So, when we pass version: "preview", the artPageLink option should be required, but if we pass version: "full", artPageLink should not be allowed. If artPageLink is provided with the full version, TypeScript will throw an error.
Full version is used in picture-gallery page and preview version is used in main page. Also removes unused widgets SectionEmbedLink and SectionImageWall.
leolabdev
requested changes
Oct 10, 2024
There was a problem hiding this comment.
Shared components should be as reusable as possible. It's better to avoid direct dependencies like those in the current implementation, where Instagram links are hardcoded. Instead, these links should be passed through props, allowing for more flexibility and reuse across different parts of the application.
Action Required:
- Refactor the EmbedInstagramLinks component to accept Instagram links as props instead of using direct dependencies.
- Delete import React from "react" (In newer React versions, it is no longer necessary to import React.)
- Delete 'use client'; (in my opinion it could be server component?)
| @@ -27,6 +27,7 @@ | |||
| "@hookform/resolvers": "^3.3.2", | |||
| "@next/bundle-analyzer": "^14.0.1", | |||
| "@reduxjs/toolkit": "^1.9.7", | |||
| "@types/webpack-env": "^1.18.5", | |||
There was a problem hiding this comment.
Please remove the @types/webpack-env dependency and reinstall it as a dev dependency with the following commands:
npm uninstall @types/webpack-env
npm install @types/webpack-env --save-devThere was a problem hiding this comment.
Refactor ImageWall Component
To improve the structure and maintainability of the ImageWall component, let's move the logic for loading and filtering images into a separate custom hook. This will help keep the component cleaner and easier to manage. The new hook should be placed in entities/Gallery/api and can be named something like useGetStrapiGalleryImages—the term "strapi" will serve as a placeholder for future adjustments.
Key changes:
- Move the image import and filtering logic from ImageWall into a custom hook (useGetStrapiGalleryImages).
- Call the new hook directly within widgets/SectionGallery.
- Pass the images as props from SectionGallery to the ImageWall component.
|
|
||
| const { ref, inView } = useInView({ | ||
| rootMargin: '-150px 0px', | ||
| triggerOnce: true, |
There was a problem hiding this comment.
you use this const { ref, inView } = useInView({ rootMargin: '-150px 0px', triggerOnce: true,in MainPage/ui/_components/sections/Gallery/Gallery.tsx , so I think it could be deleted here , or ?
| className={cls.MasonryGrid} | ||
| columnClassName={cls.MasonryGridColumn} | ||
| > | ||
| {Object.keys(images) |
There was a problem hiding this comment.
Try to separate by moving such a logic to the top of the component. It doesn't look good when logic like Object.keys(images).map(...) is placed directly in the UI part (JSX).
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds embedded Instagram posts and descriptive texts to gallery page