feat(studio): add aboutUsPage page

[mheob]

User description

closes: #19

---

PR Type

Enhancement

---

Description

• Added aboutUsPage schema and integrated it into the plugin and schema configurations.
• Created imageCard schema for use in various sections.
• Defined groups and fields for aboutUsPage, including chronicle, gallery, vision, stats, and contact persons.
• Translated group titles to German for groupsPage, homePage, and singleGroupPage.
• Enhanced validation rules to include length checks for different input types.

---

Changes walkthrough 📝

Relevant files

Enhancement

15 files index.ts Integrate `aboutUsPage` into plugin configuration                apps/studio/plugins/index.ts Added aboutUsPage to the plugin imports and structure configuration. +3/-0      index.ts Add `aboutUsPage` and `imageCard` to schema types                apps/studio/schemas/index.ts Imported aboutUsPage and imageCard schemas. Added aboutUsPage and imageCard to the schema types. +4/-0      image-card.ts Create `imageCard` schema                                                                apps/studio/schemas/objects/image-card.ts Created imageCard schema with fields for title, description, and image. +29/-0    _groups.ts Define groups for `aboutUsPage`                                                    apps/studio/schemas/single-pages/about-us/_groups.ts Defined groups for aboutUsPage including chronicle, contactPersons, gallery, stats, and vision. +24/-0    chronicle.ts Create `chronicleField` schema for `aboutUsPage`                  apps/studio/schemas/single-pages/about-us/chronicle.ts Created chronicleField schema with fields for chronicle section. +23/-0    gallery.ts Create `galleryField` schema for `aboutUsPage`                      apps/studio/schemas/single-pages/about-us/gallery.ts Created galleryField schema with fields for gallery section. +25/-0    index.ts Create `aboutUsPage` schema                                                            apps/studio/schemas/single-pages/about-us/index.ts Created aboutUsPage schema with fields for general, meta, and content sections. +48/-0    _groups.ts Translate group titles to German for `groupsPage`                apps/studio/schemas/single-pages/groups/_groups.ts Translated group titles to German. +3/-3      _groups.ts Translate group titles to German for `homePage`                    apps/studio/schemas/single-pages/home/_groups.ts Translated group titles to German. +5/-5      index.ts Add `visionField` to `homePage` schema                                      apps/studio/schemas/single-pages/home/index.ts Added visionField to homePage schema. +1/-1      _groups.ts Translate group titles to German for `singleGroupPage`      apps/studio/schemas/single-pages/single-group/_groups.ts Translated group titles to German. +1/-1      gallery.ts Create `galleryField` schema for `singleGroupPage`              apps/studio/schemas/single-pages/single-group/gallery.ts Created galleryField schema with fields for gallery section. +29/-1    index.ts Update `singleGroupPage` schema to use `galleryField`        apps/studio/schemas/single-pages/single-group/index.ts Updated singleGroupPage schema to use galleryField. +1/-2      vision.ts Create `visionField` schema                                                            apps/studio/shared/sections/vision.ts Created visionField schema with fields for vision section. +28/-1    validation-rules.ts Enhance validation rules with length checks                            apps/studio/shared/validation-rules.ts Added getLengthRule function for validation. Updated getMaxLengthRule and getMinLengthRule to handle different input types. +27/-3

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

Summary by CodeRabbit

• New Features

  • Introduced 'About Us' page schema to the Sanity Studio application.
  • Added 'imageCard' schema for image tiles.

• Localization

  • Translated various schema titles to German, including 'ContactPersons' to 'Ansprechpartner' and 'Groups' to 'Gruppen'.

• Enhancements

  • Updated validation rules to support different input types for more contextual error messages.

[linear]

WEB-76 Sanity - page `About Us`

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tsg-irlich-web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 22, 2024 10:58am
tsg-irlich-web-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 22, 2024 10:58am

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[github-actions]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review [1-5]	3
🧪 Relevant tests	No
🔒 Security concerns	No
⚡ Key issues to review	Possible Bug: The galleryField in apps/studio/schemas/single-pages/about-us/gallery.ts and apps/studio/schemas/single-pages/single-group/gallery.ts uses the field name 'venues' for images, which might be misleading or incorrect. Consider renaming it to 'images' or a more appropriate name that accurately describes its content.
	Validation Consistency: The validation rules for the length of arrays and text fields should be consistently applied and reviewed across different schemas to ensure they meet the intended requirements.

[github-actions]

PR Code Suggestions ✨

Category	Suggestion	Score
Enhancement	Rename the 'venues' field to 'images' to correctly represent its content The 'galleryField' object's 'venues' field uses an incorrect name that suggests it might be intended for a different type of content. Given the context, it should be renamed to 'images' to accurately reflect its purpose. apps/studio/schemas/single-pages/about-us/gallery.ts [18] -name: 'venues' +name: 'images' Suggestion importance[1-10]: 9 Why: Renaming the field to 'images' improves code readability and accurately reflects the field's purpose, reducing confusion and potential misuse.	9
	Modify the validation rule to enforce exactly 3 images The validation rule for the 'venues' field in the 'galleryField' object should ensure that exactly 3 images are selected, as per the original requirement. The current implementation allows for a minimum of 3 and a maximum of 3, which could be simplified to an exact count check for better clarity and enforcement. apps/studio/schemas/single-pages/about-us/gallery.ts [22] -validation: rule => [getLengthRule(rule, 3, 'Es müssen genau 3 Bilder ausgewählt werden.')] +validation: rule => [getExactLengthRule(rule, 3, 'Es müssen genau 3 Bilder ausgewählt werden.')] Suggestion importance[1-10]: 8 Why: This suggestion improves code clarity and enforces the exact requirement of selecting 3 images, which aligns with the original intent. It simplifies the validation rule, making it more readable and maintainable.	8
Possible issue	Update the 'type' for the 'chronicle' field to match the expected content The 'chronicle' field within the 'chronicleField' object should specify a more descriptive 'type' for the array elements to ensure the data structure is correctly enforced. Currently, it uses 'imageCard', which might not be appropriate for a chronicle section. apps/studio/schemas/single-pages/about-us/chronicle.ts [19] -of: [{ type: 'imageCard' }] +of: [{ type: 'chronicleEntry' }] Suggestion importance[1-10]: 7 Why: This suggestion addresses a potential issue by ensuring the data type used in the 'chronicle' field is more appropriate for its context. However, it assumes the existence of 'chronicleEntry' type, which may require additional implementation.	7
Possible bug	Add missing 'contactPersons' group to the 'groups' array in 'aboutUsPage' The 'aboutUsPage' definition includes a 'groups' array that is missing the 'contactPersons' group. This group is referenced in the 'fields' array but not declared in the 'groups' array, which could lead to inconsistencies or errors. apps/studio/schemas/single-pages/about-us/index.ts [21] -groups: [general, meta, content] +groups: [general, meta, content, contactPersons] Suggestion importance[1-10]: 6 Why: Adding the 'contactPersons' group to the 'groups' array helps maintain consistency and prevents potential errors. However, it is not critical as it depends on how the groups are used in the application.	6

[coderabbitai]

Warning

Review failed

The pull request is closed.

Walkthrough

The updates introduce an About Us page schema and supporting functionalities in a Sanity Studio application. This involves creating new schema objects and groups, enhancing validation rules, and making translations for better localization. The changes ensure that the About Us page accommodates various sections like Gallery, Chronicle, Vision, Stats, and Contact Persons, adhering to defined structures and incorporating new validations.

Changes

Files/Groups	Change Summary
apps/studio/plugins/index.ts	Added import for aboutUsPage schema and included it in the plugin configuration.
apps/studio/schemas/index.ts	Imported imageCard and aboutUsPage and added them to schemaTypes array.
apps/studio/schemas/objects/image-card.ts	Introduced imageCard schema object with fields for title, description, and image.
.../schemas/single-pages/about-us/_groups.ts	Exported constants for sections (chronicle, contact persons, gallery, stats, vision) with title and name.
.../schemas/single-pages/about-us/chronicle.ts	Added chronicleField object with fields for chronicle section including an array of image cards.
.../schemas/single-pages/about-us/index.ts	Defined aboutUsPage schema and included fields for various sections in an 'Über uns' document.
.../schemas/single-pages/about-us/gallery.ts	Defined galleryField object with fields for a gallery section and utilizing shared functions for field definitions.
.../schemas/single-pages/groups/_groups.ts	Translated titles of constants (e.g., ContactPersons → Ansprechpartner).
.../schemas/single-pages/home/_groups.ts	Translated titles of constants for localization (e.g., Features → Merkmale).
.../schemas/single-pages/single-group/_groups.ts	Updated the title of the constant to Ansprechpartner.
.../schemas/single-pages/single-group/index.ts	Changed the import statement for galleryField.
apps/studio/shared/validation-rules.ts	Enhanced validation rules: added inputType field to RuleOptions, modified defaultRuleOptions, included LengthRule and updated rule functions.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Editor
    participant SanityStudio

    User->>Editor: Access 'About Us' page editor
    Editor->>SanityStudio: Request schema for 'About Us' page
    SanityStudio-->>Editor: Response with schema details
    Editor->>Editor: Populate editor with fields (Gallery, Chronicle, Vision, Stats, Contact Persons)
    User->>Editor: Fill out page details
    Editor->>SanityStudio: Save 'About Us' page data
    SanityStudio-->>User: Display saved 'About Us' page

Loading

Assessment against linked issues

Objective from Linked Issues (#19)	Addressed	Explanation
Define General/Hero section with slug, title, subtitle, and intro	✅
Include Gallery section with title, subtitle, intro, images array	✅
Define Chronicle section with title, subtitle, episode array	✅
Incorporate Vision section with title, subtitle, intro, cta	✅
Define Stats section with stat array	✅
Include Contact Persons section with title, subtitle, intro, contactPersons relation	✅

Poem

In the Studio where schemas grow,
About Us now will smoothly flow.
With chronicles and visions bright,
Gallery images in sight.
Contact persons stand so neat,
Our About Us page is quite the feat!
🐇✨📜

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.