feat(studio): add aboutUsPage page (#46)

### **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** 📝 <table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td><strong>Enhancement </strong></td><td><details><summary>15 files</summary><table> <tr> <td> <details> <summary><strong>index.ts</strong><dd><code>Integrate `aboutUsPage` into plugin configuration</code>                </dd></summary> <hr> apps/studio/plugins/index.ts <li>Added <code>aboutUsPage</code> to the plugin imports and structure configuration.<br> </details> </td> <td><a href="https://github.com/mheob/tsg-irlich-web/pull/46/files#diff-9dd45aa1302024e77ddf2cd3b3b0aebe803247d15997cb5b9424788204fc7c48">+3/-0</a>      </td> </tr> <tr> <td> <details> <summary><strong>index.ts</strong><dd><code>Add `aboutUsPage` and `imageCard` to schema types</code>                </dd></summary> <hr> apps/studio/schemas/index.ts <li>Imported <code>aboutUsPage</code> and <code>imageCard</code> schemas.<br> <li> Added <code>aboutUsPage</code> and <code>imageCard</code> to the schema types.<br> </details> </td> <td><a href="https://github.com/mheob/tsg-irlich-web/pull/46/files#diff-0b99cc8331c92bfa2c0470d04d7a359ab75283efa85f9fc1d5bf716b9e35c60c">+4/-0</a>      </td> </tr> <tr> <td> <details> <summary><strong>image-card.ts</strong><dd><code>Create `imageCard` schema</code>                                                                </dd></summary> <hr> apps/studio/schemas/objects/image-card.ts <li>Created <code>imageCard</code> schema with fields for title, description, and <br>image.<br> </details> </td> <td><a href="https://github.com/mheob/tsg-irlich-web/pull/46/files#diff-bc762e394cd3822507003f6dd5a85b8b4a5dc76ea2364fc3c1bd962953fe048b">+29/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>_groups.ts</strong><dd><code>Define groups for `aboutUsPage`</code>                                                    </dd></summary> <hr> apps/studio/schemas/single-pages/about-us/_groups.ts <li>Defined groups for <code>aboutUsPage</code> including chronicle, contactPersons, <br>gallery, stats, and vision.<br> </details> </td> <td><a href="https://github.com/mheob/tsg-irlich-web/pull/46/files#diff-e8a6d68d19d0f92aa28d5a49d24c4608f2b4ab73a0f4688c6c02bd3077fa1cfe">+24/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>chronicle.ts</strong><dd><code>Create `chronicleField` schema for `aboutUsPage`</code>                  </dd></summary> <hr> apps/studio/schemas/single-pages/about-us/chronicle.ts - Created `chronicleField` schema with fields for chronicle section. </details> </td> <td><a href="https://github.com/mheob/tsg-irlich-web/pull/46/files#diff-c862e48a8e7ec21e120639e47f5ec997951e9bb4d53a15d705c48dbfc8b23cce">+23/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>gallery.ts</strong><dd><code>Create `galleryField` schema for `aboutUsPage`</code>                      </dd></summary> <hr> apps/studio/schemas/single-pages/about-us/gallery.ts - Created `galleryField` schema with fields for gallery section. </details> </td> <td><a href="https://github.com/mheob/tsg-irlich-web/pull/46/files#diff-a6f21e36861b8bc7729df33b6bbb639bcf9f1c714cf551f8b776d5ca83f72e6b">+25/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>index.ts</strong><dd><code>Create `aboutUsPage` schema</code>                                                            </dd></summary> <hr> apps/studio/schemas/single-pages/about-us/index.ts <li>Created <code>aboutUsPage</code> schema with fields for general, meta, and content <br>sections.<br> </details> </td> <td><a href="https://github.com/mheob/tsg-irlich-web/pull/46/files#diff-9eb58f1c0d464f52047332e3873811a34420d813077f8990e7c0ba77e440da07">+48/-0</a>    </td> </tr> <tr> <td> <details> <summary><strong>_groups.ts</strong><dd><code>Translate group titles to German for `groupsPage`</code>                </dd></summary> <hr> apps/studio/schemas/single-pages/groups/_groups.ts - Translated group titles to German. </details> </td> <td><a href="https://github.com/mheob/tsg-irlich-web/pull/46/files#diff-2cf6510c238afd0420eb2e3af7afe3c2f3f2d90f2ddcb03bc706c7db5e563b7b">+3/-3</a>      </td> </tr> <tr> <td> <details> <summary><strong>_groups.ts</strong><dd><code>Translate group titles to German for `homePage`</code>                    </dd></summary> <hr> apps/studio/schemas/single-pages/home/_groups.ts - Translated group titles to German. </details> </td> <td><a href="https://github.com/mheob/tsg-irlich-web/pull/46/files#diff-3992879546826d5f970ee104f7f9776a424d7ad6a2bd6ee10db2dfc283653d97">+5/-5</a>      </td> </tr> <tr> <td> <details> <summary><strong>index.ts</strong><dd><code>Add `visionField` to `homePage` schema</code>                                      </dd></summary> <hr> apps/studio/schemas/single-pages/home/index.ts - Added `visionField` to `homePage` schema. </details> </td> <td><a href="https://github.com/mheob/tsg-irlich-web/pull/46/files#diff-5cd74a552147b502372c1e672656b55d1752fade9dd99211a7cde58ac9d9b97c">+1/-1</a>      </td> </tr> <tr> <td> <details> <summary><strong>_groups.ts</strong><dd><code>Translate group titles to German for `singleGroupPage`</code>      </dd></summary> <hr> apps/studio/schemas/single-pages/single-group/_groups.ts - Translated group titles to German. </details> </td> <td><a href="https://github.com/mheob/tsg-irlich-web/pull/46/files#diff-054a38a6f7aefbbc81f3633a91cad281dd251f0ecbd8a2a25aae033b6983f905">+1/-1</a>      </td> </tr> <tr> <td> <details> <summary><strong>gallery.ts</strong><dd><code>Create `galleryField` schema for `singleGroupPage`</code>              </dd></summary> <hr> apps/studio/schemas/single-pages/single-group/gallery.ts - Created `galleryField` schema with fields for gallery section. </details> </td> <td><a href="https://github.com/mheob/tsg-irlich-web/pull/46/files#diff-4964412f0e1776adcbf2da32a8df0321be31bb12a23b0aff900efd3bb8c2ae09">+29/-1</a>    </td> </tr> <tr> <td> <details> <summary><strong>index.ts</strong><dd><code>Update `singleGroupPage` schema to use `galleryField`</code>        </dd></summary> <hr> apps/studio/schemas/single-pages/single-group/index.ts - Updated `singleGroupPage` schema to use `galleryField`. </details> </td> <td><a href="https://github.com/mheob/tsg-irlich-web/pull/46/files#diff-3654a0c465da4010c6435cd25ca080c45f291c81629d996561efb35c049dd9f5">+1/-2</a>      </td> </tr> <tr> <td> <details> <summary><strong>vision.ts</strong><dd><code>Create `visionField` schema</code>                                                            </dd></summary> <hr> apps/studio/shared/sections/vision.ts - Created `visionField` schema with fields for vision section. </details> </td> <td><a href="https://github.com/mheob/tsg-irlich-web/pull/46/files#diff-715506254458e167853593443d17e0ec66cafdfe3296f5e4c1ba07fe7e118fdb">+28/-1</a>    </td> </tr> <tr> <td> <details> <summary><strong>validation-rules.ts</strong><dd><code>Enhance validation rules with length checks</code>                            </dd></summary> <hr> apps/studio/shared/validation-rules.ts <li>Added <code>getLengthRule</code> function for validation.<br> <li> Updated <code>getMaxLengthRule</code> and <code>getMinLengthRule</code> to handle different <br>input types.<br> </details> </td> <td><a href="https://github.com/mheob/tsg-irlich-web/pull/46/files#diff-e93f4590a8d9f05e518c771c3a8aa8ad67ccd8a3275749c29b42b9311cf31aaf">+27/-3</a>    </td> </tr> </table></details></td></tr></tr></tbody></table> ___ > 💡 **PR-Agent usage**: >Comment `/help` on the PR to get a list of all available PR-Agent tools and their descriptions
mheob · Jun 22, 2024 · 0cf2a73 · 0cf2a73
1 parent a18fcb7
commit 0cf2a73
Show file tree

Hide file tree

Showing 15 changed files with 194 additions and 15 deletions.
diff --git a/apps/studio/plugins/index.ts b/apps/studio/plugins/index.ts
@@ -6,6 +6,7 @@ import type { PluginOptions } from 'sanity';
 import { structureTool } from 'sanity/structure';
 import { media } from 'sanity-plugin-media';
 
+import aboutUsPage from '@/schemas/single-pages/about-us';
 import contactPage from '@/schemas/single-pages/contact';
 import groupsPage from '@/schemas/single-pages/groups';
 import homePage from '@/schemas/single-pages/home';
@@ -26,6 +27,7 @@ export function getPlugins() {
 		structureTool({
 			structure: pageStructure([
 				homePage,
+				aboutUsPage,
 				contactPage,
 				membershipPage,
 				newsArticlePage,
@@ -41,6 +43,7 @@ export function getPlugins() {
 		// to suit the Settings document singleton
 		singletonPlugin([
 			homePage.name,
+			aboutUsPage.name,
 			contactPage.name,
 			membershipPage.name,
 			newsArticlePage.name,

diff --git a/apps/studio/schemas/index.ts b/apps/studio/schemas/index.ts
@@ -8,6 +8,7 @@ import columns from './objects/columns';
 import contactTo from './objects/contact-to';
 import extendedImage from './objects/extended-image';
 import externalLink from './objects/external-link';
+import imageCard from './objects/image-card';
 import internalLink from './objects/internal-link';
 import link from './objects/link';
 import metFields from './objects/meta';
@@ -18,6 +19,7 @@ import blockContent from './sections/block-content';
 import grid from './sections/grid';
 import mainImage from './sections/main-image';
 import spacer from './sections/spacer';
+import aboutUsPage from './single-pages/about-us';
 import contactPage from './single-pages/contact';
 import groupsPage from './single-pages/groups';
 import homePage from './single-pages/home';
@@ -47,6 +49,7 @@ export const schemaTypes = [
 	contactTo,
 	extendedImage,
 	externalLink,
+	imageCard,
 	internalLink,
 	link,
 	metFields,
@@ -61,6 +64,7 @@ export const schemaTypes = [
 	spacer,
 
 	// Single Pages
+	aboutUsPage,
 	contactPage,
 	groupsPage,
 	homePage,

diff --git a/apps/studio/schemas/objects/image-card.ts b/apps/studio/schemas/objects/image-card.ts
@@ -0,0 +1,29 @@
+import { RiExternalLinkLine } from 'react-icons/ri';
+import { defineField } from 'sanity';
+
+const imageCard = defineField({
+	title: 'Kachel mit Bild',
+	name: 'imageCard',
+	type: 'object',
+	description: 'Die Abschnitte der Chronik.',
+	icon: RiExternalLinkLine,
+	fields: [
+		defineField({
+			title: 'Titel',
+			name: 'title',
+			type: 'string',
+		}),
+		defineField({
+			title: 'Beschreibung',
+			name: 'description',
+			type: 'text',
+		}),
+		defineField({
+			title: 'Bild',
+			name: 'image',
+			type: 'extendedImage',
+		}),
+	],
+});
+
+export default imageCard;
diff --git a/apps/studio/schemas/single-pages/about-us/_groups.ts b/apps/studio/schemas/single-pages/about-us/_groups.ts
@@ -0,0 +1,24 @@
+export const chronicle = {
+	title: 'Chronik',
+	name: 'chronicle',
+};
+
+export const contactPersons = {
+	title: 'Ansprechpartner',
+	name: 'contactPersons',
+};
+
+export const gallery = {
+	title: 'Galerie',
+	name: 'gallery',
+};
+
+export const stats = {
+	title: 'Stats',
+	name: 'stats',
+};
+
+export const vision = {
+	title: 'Vision',
+	name: 'vision',
+};
diff --git a/apps/studio/schemas/single-pages/about-us/chronicle.ts b/apps/studio/schemas/single-pages/about-us/chronicle.ts
@@ -0,0 +1,23 @@
+import { RiLinksLine } from 'react-icons/ri';
+import { defineField } from 'sanity';
+
+import { getDefaultPageFieldsWithGroup } from '@/shared/fields/general';
+
+export const chronicleField = defineField({
+	title: 'Chronik',
+	name: 'chronicleSection',
+	type: 'object',
+	icon: RiLinksLine,
+	group: 'chronicle',
+	fields: [
+		...getDefaultPageFieldsWithGroup(),
+
+		defineField({
+			title: 'Chronik',
+			name: 'chronicle',
+			type: 'array',
+			of: [{ type: 'imageCard' }],
+			description: 'Die Abschnitte der Chronik.',
+		}),
+	],
+});
diff --git a/apps/studio/schemas/single-pages/about-us/gallery.ts b/apps/studio/schemas/single-pages/about-us/gallery.ts
@@ -0,0 +1,25 @@
+import { RiLinksLine } from 'react-icons/ri';
+import { defineField } from 'sanity';
+
+import { getDefaultPageFieldsWithGroup } from '@/shared/fields/general';
+import { getLengthRule } from '@/shared/validation-rules';
+
+export const galleryField = defineField({
+	title: 'Galerie',
+	name: 'gallerySection',
+	type: 'object',
+	icon: RiLinksLine,
+	group: 'gallery',
+	fields: [
+		...getDefaultPageFieldsWithGroup(),
+
+		defineField({
+			title: 'Bilder',
+			name: 'venues',
+			type: 'array',
+			of: [{ type: 'extendedImage' }],
+			description: 'Diese gewählten Bilder werden in der gewünschten Reihenfolge angezeigt.',
+			validation: rule => [getLengthRule(rule, 3, 'Es müssen genau 3 Bilder ausgewählt werden.')],
+		}),
+	],
+});
diff --git a/apps/studio/schemas/single-pages/about-us/index.ts b/apps/studio/schemas/single-pages/about-us/index.ts
@@ -0,0 +1,48 @@
+// cSpell:words verein
+import { RiBookletLine, RiLinksLine } from 'react-icons/ri';
+import { defineField, defineType } from 'sanity';
+
+import { content, general, meta } from '@/shared/field-groups';
+import { defaultPageFields, getHiddenSlugField } from '@/shared/fields/general';
+import { metaField } from '@/shared/fields/meta';
+import { contactPersonsSectionField } from '@/shared/sections/contact-persons';
+import { statsField } from '@/shared/sections/stats';
+import { visionField } from '@/shared/sections/vision';
+
+import { chronicle, contactPersons, gallery, stats, vision } from './_groups';
+import { chronicleField } from './chronicle';
+import { galleryField } from './gallery';
+
+const aboutUsPage = defineType({
+	title: 'Über uns',
+	name: 'aboutUs',
+	type: 'document',
+	icon: RiBookletLine,
+	groups: [general, meta, content],
+	fields: [
+		// (hidden)
+		getHiddenSlugField('verein'),
+
+		// general
+		...defaultPageFields,
+
+		// meta
+		metaField,
+
+		// content
+		defineField({
+			title: 'Inhalte',
+			name: 'content',
+			type: 'object',
+			icon: RiLinksLine,
+			group: 'content',
+			groups: [gallery, chronicle, vision, stats, contactPersons],
+			fields: [galleryField, chronicleField, visionField, statsField, contactPersonsSectionField],
+		}),
+	],
+	preview: {
+		prepare: () => ({ title: 'Über uns' }),
+	},
+});
+
+export default aboutUsPage;
diff --git a/apps/studio/schemas/single-pages/groups/_groups.ts b/apps/studio/schemas/single-pages/groups/_groups.ts
@@ -1,15 +1,15 @@
 export const contactPersons = {
-	title: 'ContactPersons',
+	title: 'Ansprechpartner',
 	name: 'contactPersons',
 };
 
 export const groups = {
-	title: 'Groups',
+	title: 'Gruppen',
 	name: 'groups',
 };
 
 export const venues = {
-	title: 'venues',
+	title: 'Sportstätten',
 	name: 'venues',
 };
 

diff --git a/apps/studio/schemas/single-pages/home/_groups.ts b/apps/studio/schemas/single-pages/home/_groups.ts
@@ -1,15 +1,15 @@
 export const contactPersons = {
-	title: 'ContactPersons',
+	title: 'Ansprechpartner',
 	name: 'contactPersons',
 };
 
 export const features = {
-	title: 'Features',
+	title: 'Merkmale',
 	name: 'features',
 };
 
 export const groups = {
-	title: 'Groups',
+	title: 'Gruppen',
 	name: 'groups',
 };
 
@@ -19,7 +19,7 @@ export const news = {
 };
 
 export const pricing = {
-	title: 'Pricing',
+	title: 'Preise',
 	name: 'pricing',
 };
 
@@ -29,7 +29,7 @@ export const stats = {
 };
 
 export const testimonial = {
-	title: 'Testimonial',
+	title: 'Referenz',
 	name: 'testimonial',
 };
 

diff --git a/apps/studio/schemas/single-pages/home/index.ts b/apps/studio/schemas/single-pages/home/index.ts
@@ -6,6 +6,7 @@ import { defaultPageFields, getHiddenSlugField } from '@/shared/fields/general';
 import { metaField } from '@/shared/fields/meta';
 import { contactPersonsSectionField } from '@/shared/sections/contact-persons';
 import { statsField } from '@/shared/sections/stats';
+import { visionField } from '@/shared/sections/vision';
 
 import {
 	contactPersons,
@@ -22,7 +23,6 @@ import { groupsField } from './groups';
 import { newsField } from './news';
 import { pricingField } from './pricing';
 import { testimonialField } from './testimonial';
-import { visionField } from './vision';
 
 const homePage = defineType({
 	title: 'Home',

diff --git a/apps/studio/schemas/single-pages/single-group/_groups.ts b/apps/studio/schemas/single-pages/single-group/_groups.ts
@@ -1,5 +1,5 @@
 export const contactPersons = {
-	title: 'ContactPersons',
+	title: 'Ansprechpartner',
 	name: 'contactPersons',
 };
 

diff --git a/...hemas/single-pages/single-group/groups.ts → ...emas/single-pages/single-group/gallery.ts b/...hemas/single-pages/single-group/groups.ts → ...emas/single-pages/single-group/gallery.ts
diff --git a/apps/studio/schemas/single-pages/single-group/index.ts b/apps/studio/schemas/single-pages/single-group/index.ts
@@ -1,4 +1,3 @@
-// cSpell:words angebot
 import { RiBookletLine, RiLinksLine } from 'react-icons/ri';
 import { defineField, defineType } from 'sanity';
 
@@ -8,7 +7,7 @@ import { metaField } from '@/shared/fields/meta';
 import { contactPersonsSectionField } from '@/shared/sections/contact-persons';
 
 import { contactPersons, gallery } from './_groups';
-import { galleryField } from './groups';
+import { galleryField } from './gallery';
 
 const singleGroupPage = defineType({
 	title: 'Einzel-Gruppe',

diff --git a/...tudio/schemas/single-pages/home/vision.ts → apps/studio/shared/sections/vision.ts b/...tudio/schemas/single-pages/home/vision.ts → apps/studio/shared/sections/vision.ts
diff --git a/apps/studio/shared/validation-rules.ts b/apps/studio/shared/validation-rules.ts
@@ -1,11 +1,12 @@
 import type { StringRule } from 'sanity';
 
 interface RuleOptions {
+	inputType?: 'array' | 'text';
 	message?: string;
 	type?: 'error' | 'warning';
 }
 
-const defaultRuleOptions: RuleOptions = { type: 'error' };
+const defaultRuleOptions: RuleOptions = { inputType: 'text', type: 'error' };
 
 interface BaseRule<Rule> {
 	error: (message: string) => Rule;
@@ -16,6 +17,10 @@ interface RequiredRule<Rule> extends BaseRule<Rule> {
 	required: () => Rule;
 }
 
+interface LengthRule<Rule> extends BaseRule<Rule>, RequiredRule<Rule> {
+	length: (length: number) => Rule;
+}
+
 interface MaxLengthRule<Rule> extends BaseRule<Rule> {
 	max: (length: number) => Rule;
 }
@@ -24,14 +29,32 @@ interface MinLengthRule<Rule> extends BaseRule<Rule>, RequiredRule<Rule> {
 	min: (length: number) => Rule;
 }
 
+function getTextByInputType(inputType: RuleOptions['inputType'], length: number) {
+	const arrayOutput = length === 1 ? 'Eintrag' : 'Einträge';
+	return inputType === 'array' ? arrayOutput : 'Zeichen';
+}
+
+export function getLengthRule<Rule extends LengthRule<Rule>>(
+	rule: Rule,
+	length: number,
+	title: string,
+	options = { ...defaultRuleOptions, type: 'warning' },
+) {
+	const validationRule = rule.length(length);
+	const itemText = getTextByInputType(options.inputType, length);
+	const message = options.message ?? `${title} muss genau ${length} ${itemText} lang sein`;
+	return options.type === 'error' ? validationRule.error(message) : validationRule.warning(message);
+}
+
 export function getMaxLengthRule<Rule extends MaxLengthRule<Rule>>(
 	rule: Rule,
 	length: number,
 	title: string,
 	options = { ...defaultRuleOptions, type: 'warning' },
 ) {
 	const validationRule = rule.max(length);
-	const message = options.message ?? `${title} sollte maximal ${length} Zeichen lang sein`;
+	const itemText = getTextByInputType(options.inputType, length);
+	const message = options.message ?? `${title} sollte maximal ${length} ${itemText} lang sein`;
 	return options.type === 'error' ? validationRule.error(message) : validationRule.warning(message);
 }
 
@@ -42,7 +65,8 @@ export function getMinLengthRule<Rule extends MinLengthRule<Rule>>(
 	options = defaultRuleOptions,
 ) {
 	const validationRule = rule.required().min(length);
-	const message = options.message ?? `${title} muss mindestens ${length} Zeichen lang sein`;
+	const itemText = getTextByInputType(options.inputType, length);
+	const message = options.message ?? `${title} muss mindestens ${length} ${itemText} lang sein`;
 	return options.type === 'error' ? validationRule.error(message) : validationRule.warning(message);
 }