@ndlib/component-library 0.0.55 → 0.0.56

package/dist/components/composites/Seo/index.js

@@ -1,16 +1,16 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useSiteMetadata } from './useSiteMetadata';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { siteMetadata } from './siteMetadata';
 export const Seo = ({ title, description, image, nofollow, noindex, }) => {
-    const { title: defaultTitle, description: defaultDescription, image: defaultImage, siteUrl, twitterUsername, nofollow: defaultNoindex, noindex: defaultNofollow, } = useSiteMetadata();
+    const { title: defaultTitle, description: defaultDescription, image: defaultImage, nofollow: defaultNoindex, noindex: defaultNofollow, siteUrl, twitterUsername, } = siteMetadata();
     const seo = {
         title: title || defaultTitle,
         description: description || defaultDescription,
-        image: image ? siteUrl + image : siteUrl + defaultImage,
+        image: image ? image : defaultImage,
         url: siteUrl + location.pathname || '',
-        twitterUsername,
         nofollow: nofollow || defaultNofollow,
         noindex: noindex || defaultNoindex,
+        twitterUsername,
     };
-    return (_jsxs(_Fragment, { children: [seo.title ? _jsx("title", Object.assign({ "data-testid": "seo-title" }, { children: seo.title })) : null, seo.title ? (_jsx("meta", { "data-testid": "seo-twitter-title", name: "twitter:title", content: seo.title })) : null, seo.title ? (_jsx("meta", { "data-testid": "seo-og-title", property: "og:title", content: seo.title })) : null, seo.url ? (_jsx("meta", { "data-testid": "seo-twitter-url", name: "twitter:url", content: seo.url })) : null, seo.url ? (_jsx("meta", { "data-testid": "seo-og-url", property: "og:url", content: seo.url })) : null, seo.description ? (_jsx("meta", { "data-testid": "seo-twitter-description", name: "twitter:description", content: seo.description })) : null, seo.description ? (_jsx("meta", { "data-testid": "seo-og-description", property: "og:description", content: seo.description })) : null, seo.image ? (_jsx("meta", { "data-testid": "seo-twitter-image", name: "twitter:image", content: seo.image })) : null, seo.image ? (_jsx("meta", { "data-testid": "seo-og-image", name: "og:image", content: seo.image })) : null, seo.twitterUsername ? (_jsx("meta", { "data-testid": "seo-twitter-creator", name: "twitter:creator", content: seo.twitterUsername })) : null, seo.nofollow ? (_jsx("meta", { "data-testid": "seo-nofollow", name: "robots", content: "nofollow" })) : null, seo.noindex ? (_jsx("meta", { "data-testid": "seo-noindex", name: "robots", content: "noindex" })) : null, _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1" })] }));
+    return (_jsxs("head", { children: [seo.title ? _jsx("title", Object.assign({ "data-testid": "seo-title" }, { children: seo.title })) : null, seo.title ? (_jsx("meta", { "data-testid": "seo-twitter-title", name: "twitter:title", content: seo.title })) : null, seo.title ? (_jsx("meta", { "data-testid": "seo-og-title", property: "og:title", content: seo.title })) : null, seo.url ? (_jsx("meta", { "data-testid": "seo-twitter-url", name: "twitter:url", content: seo.url })) : null, seo.url ? (_jsx("meta", { "data-testid": "seo-og-url", property: "og:url", content: seo.url })) : null, seo.description ? (_jsx("meta", { "data-testid": "seo-twitter-description", name: "twitter:description", content: seo.description })) : null, seo.description ? (_jsx("meta", { "data-testid": "seo-og-description", property: "og:description", content: seo.description })) : null, seo.image ? (_jsx("meta", { "data-testid": "seo-twitter-image", name: "twitter:image", content: seo.image })) : null, seo.image ? (_jsx("meta", { "data-testid": "seo-og-image", name: "og:image", content: seo.image })) : null, seo.twitterUsername ? (_jsx("meta", { "data-testid": "seo-twitter-creator", name: "twitter:creator", content: seo.twitterUsername })) : null, seo.nofollow ? (_jsx("meta", { "data-testid": "seo-nofollow", name: "robots", content: "nofollow" })) : null, seo.noindex ? (_jsx("meta", { "data-testid": "seo-noindex", name: "robots", content: "noindex" })) : null, _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1" })] }));
 };
 export default Seo;

package/dist/components/composites/Seo/seo.test.js

@@ -36,12 +36,12 @@ describe('Seo', () => {
     it('renders meta tag for twitter image', () => {
         render(_jsx(Seo, { image: image }));
         const element = screen.getByTestId('seo-twitter-image');
-        expect(element).toContainHTML('https://www.library.nd.edu/image.png');
+        expect(element).toContainHTML('/image.png');
     });
     it('renders meta tag for og image', () => {
         render(_jsx(Seo, { image: image }));
         const element = screen.getByTestId('seo-og-image');
-        expect(element).toContainHTML('https://www.library.nd.edu/image.png');
+        expect(element).toContainHTML('/image.png');
     });
     it('renders meta tag for nofollow', () => {
         render(_jsx(Seo, { nofollow: nofollow }));

package/dist/components/composites/Seo/{useSiteMetadata.d.ts → siteMetadata.d.ts}

@@ -1,4 +1,4 @@
-export declare const useSiteMetadata: () => {
+export declare const siteMetadata: () => {
     title: string;
     image: string;
     description: string;

package/dist/components/composites/Seo/{useSiteMetadata.js → siteMetadata.js}

@@ -1,4 +1,4 @@
-export const useSiteMetadata = () => {
+export const siteMetadata = () => {
     const data = {
         site: {
             siteMetadata: {

package/dist/components/composites/StructuredData/StructuredData.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import StructuredData from './index';
+declare const meta: Meta<typeof StructuredData>;
+export default meta;
+type Story = StoryObj<typeof StructuredData>;
+export declare const Default: Story;

package/dist/components/composites/StructuredData/StructuredData.stories.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import StructuredDataDisplay from './StructuredDataDisplay';
+import StructuredData from './index';
+const meta = {
+    title: 'Composites/StructuredData',
+    component: StructuredData,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => (_jsx(_Fragment, { children: _jsx(StructuredDataDisplay, {}) })),
+};

package/dist/components/composites/StructuredData/StructuredData.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/composites/StructuredData/StructuredData.test.js

@@ -0,0 +1,18 @@
+import { getStructuredDataSchemas } from './';
+describe('getStructuredDataSchemas', () => {
+    it('should generate structured data schemas with default data', () => {
+        const schemas = getStructuredDataSchemas({ events: [], news: [] });
+        expect(schemas).toHaveLength(3);
+    });
+    it('should generate structured data schemas with custom data', () => {
+        const customData = {
+            title: 'Custom Title',
+            description: 'Custom Description',
+            events: [],
+            news: [],
+        };
+        const schemas = getStructuredDataSchemas(customData);
+        expect(schemas).toHaveLength(3);
+        expect(schemas[0]).toContain('Custom Title');
+    });
+});

package/dist/components/composites/StructuredData/StructuredDataDisplay/index.d.ts

@@ -0,0 +1,2 @@
+export declare const StructuredDataDisplay: () => import("react/jsx-runtime").JSX.Element;
+export default StructuredDataDisplay;

package/dist/components/composites/StructuredData/StructuredDataDisplay/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getStructuredDataSchemas } from '../index';
+export const StructuredDataDisplay = () => {
+    const schemas = getStructuredDataSchemas({ events: [], news: [] });
+    return (_jsx(_Fragment, { children: schemas.map((schema, index) => (_jsxs("pre", { children: [_jsx("code", { children: schema }), _jsx("br", {})] }, index))) }));
+};
+export default StructuredDataDisplay;

package/dist/components/composites/StructuredData/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export type StructuredDataProps = {
+    title?: string;
+    description?: string;
+    siteUrl?: string;
+    nofollow?: string;
+    noindex?: string;
+    image?: string;
+    events?: [];
+    news?: [];
+};
+export declare const getStructuredDataSchemas: ({ title, description, nofollow, noindex, image, }: StructuredDataProps) => string[];
+export declare const StructuredData: React.FC<StructuredDataProps>;
+export default StructuredData;

package/dist/components/composites/StructuredData/index.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { siteMetadata } from './siteMetadata';
+import { stringifyWebpageSchema } from './sdWebsite';
+import { stringifyEventSchema } from './sdEvent';
+import { stringifyNewsSchema } from './sdNews';
+export const getStructuredDataSchemas = ({ title, description, nofollow, noindex, image, }) => {
+    const { title: defaultTitle, description: defaultDescription, image: defaultImage, siteUrl, nofollow: defaultNofollow, noindex: defaultNoindex, events, news, } = siteMetadata();
+    const metadata = {
+        title: title || defaultTitle,
+        description: description || defaultDescription,
+        nofollow: nofollow || defaultNofollow,
+        noindex: noindex || defaultNoindex,
+        image: image || defaultImage,
+        url: `${siteUrl}${location.pathname || ''}`,
+        lang: 'en',
+    };
+    const schemas = [];
+    if (location.pathname !== '') {
+        schemas.push(stringifyWebpageSchema({
+            name: metadata.title,
+            description: metadata.description,
+            url: metadata.url,
+            lang: metadata.lang,
+        }));
+        if (location.pathname !== '') {
+            events === null || events === void 0 ? void 0 : events.map((event) => {
+                schemas.push(stringifyEventSchema({
+                    title: event.name,
+                    description: event.shortDescription,
+                    image: event.representationalImage.url,
+                    url: event.slug,
+                    startDate: event.startDate,
+                    endDate: event.endDate,
+                    eventLocation: event.location.address,
+                    eventLocationName: event.locationText.name,
+                    siteUrl: siteUrl,
+                }));
+            });
+        }
+        if (location.pathname !== '') {
+            news === null || news === void 0 ? void 0 : news.map((article) => {
+                schemas.push(stringifyNewsSchema({
+                    title: article.title,
+                    abstract: article.shortDescription,
+                    author: article.author,
+                    image: article.image.url,
+                    url: article.slug,
+                    publishedDate: article.publishedDate,
+                    siteUrl: siteUrl,
+                }));
+            });
+        }
+    }
+    return schemas;
+};
+export const StructuredData = (props) => {
+    const schemas = getStructuredDataSchemas(props);
+    return (_jsx(_Fragment, { children: schemas.map((schema, index) => (_jsx("script", Object.assign({ type: "application/ld+json" }, { children: schema }), index))) }));
+};
+export default StructuredData;

package/dist/components/composites/StructuredData/sdEvent/index.d.ts

@@ -0,0 +1,13 @@
+interface SdEventProps {
+    title: string;
+    startDate?: string;
+    endDate?: string;
+    description: string;
+    eventLocation?: string;
+    eventLocationName?: string;
+    image?: string;
+    url?: string;
+    siteUrl?: string;
+}
+export declare const stringifyEventSchema: (props: SdEventProps) => string;
+export default stringifyEventSchema;

package/dist/components/composites/StructuredData/sdEvent/index.js

@@ -0,0 +1,16 @@
+import { makeEventSchema } from './makeEventSchema';
+export const stringifyEventSchema = ({ title, description, startDate, endDate, eventLocation, eventLocationName, image, url, siteUrl, }) => {
+    const eventSchema = makeEventSchema({
+        title: title,
+        startDate: startDate,
+        endDate: endDate,
+        description: description,
+        image: image,
+        eventLocation: eventLocation,
+        eventLocationName: eventLocationName,
+        url: url,
+        siteUrl: siteUrl,
+    });
+    return JSON.stringify(eventSchema, null, 2);
+};
+export default stringifyEventSchema;

package/dist/components/composites/StructuredData/sdEvent/makeEventSchema.d.ts

@@ -0,0 +1,15 @@
+import { Event } from 'schema-dts';
+type Params = {
+    title: string;
+    startDate?: string;
+    endDate?: string;
+    description?: string;
+    location?: string;
+    eventLocation?: string;
+    eventLocationName?: string;
+    image?: string;
+    url?: string;
+    siteUrl?: string;
+};
+export declare const makeEventSchema: (params: Params) => Event;
+export {};

package/dist/components/composites/StructuredData/sdEvent/makeEventSchema.js

@@ -0,0 +1,16 @@
+export const makeEventSchema = (params) => {
+    return {
+        '@type': 'Event',
+        name: params.title,
+        startDate: params.startDate,
+        endDate: params.endDate,
+        description: params.description,
+        image: params.image,
+        url: params.siteUrl + '/event/' + params.url,
+        location: {
+            '@type': 'Place',
+            name: params.eventLocationName,
+            address: params.eventLocation,
+        },
+    };
+};

package/dist/components/composites/StructuredData/sdNews/index.d.ts

@@ -0,0 +1,11 @@
+interface SdNewsProps {
+    title: string;
+    author: string;
+    abstract: string;
+    image?: string;
+    url?: string;
+    publishedDate?: string;
+    siteUrl?: string;
+}
+export declare const stringifyNewsSchema: (props: SdNewsProps) => string;
+export default stringifyNewsSchema;

package/dist/components/composites/StructuredData/sdNews/index.js

@@ -0,0 +1,14 @@
+import { makeNewsSchema } from './makeNewsSchema';
+export const stringifyNewsSchema = ({ title, author, abstract, image, url, publishedDate, siteUrl, }) => {
+    const newsSchema = makeNewsSchema({
+        title: title,
+        author: author,
+        abstract: abstract,
+        image: image,
+        url: url,
+        publishedDate: publishedDate,
+        siteUrl: siteUrl,
+    });
+    return JSON.stringify(newsSchema, null, 2);
+};
+export default stringifyNewsSchema;

package/dist/components/composites/StructuredData/sdNews/makeNewsSchema.d.ts

@@ -0,0 +1,12 @@
+import { NewsArticle } from 'schema-dts';
+type Params = {
+    title: string;
+    author: string;
+    abstract?: string;
+    image?: string;
+    url?: string;
+    publishedDate?: string;
+    siteUrl?: string;
+};
+export declare const makeNewsSchema: (params: Params) => NewsArticle;
+export {};

package/dist/components/composites/StructuredData/sdNews/makeNewsSchema.js

@@ -0,0 +1,11 @@
+export const makeNewsSchema = (params) => {
+    return {
+        '@type': 'NewsArticle',
+        name: params.title,
+        creator: params.author,
+        abstract: params.abstract,
+        image: params.image,
+        url: params.siteUrl + '/news/' + params.url,
+        datePublished: params.publishedDate,
+    };
+};

package/dist/components/composites/StructuredData/sdWebsite/index.d.ts

@@ -0,0 +1,8 @@
+interface SdWebpageProps {
+    lang: string;
+    name: string;
+    description: string;
+    url: string;
+}
+export declare const stringifyWebpageSchema: (props: SdWebpageProps) => string;
+export default stringifyWebpageSchema;

package/dist/components/composites/StructuredData/sdWebsite/index.js

@@ -0,0 +1,11 @@
+import { makeWebPageSchema } from './makeWebPageSchema';
+export const stringifyWebpageSchema = ({ lang, name, description, url, }) => {
+    const webpageSchema = makeWebPageSchema({
+        lang: lang,
+        name: name,
+        description: description,
+        url: url,
+    });
+    return JSON.stringify(webpageSchema, null, 2);
+};
+export default stringifyWebpageSchema;

package/dist/components/composites/StructuredData/sdWebsite/makeWebPageSchema.d.ts

@@ -0,0 +1,9 @@
+import { WebPage } from 'schema-dts';
+type Params = {
+    lang: string;
+    name: string;
+    description: string;
+    url: string;
+};
+export declare const makeWebPageSchema: (params: Params) => WebPage;
+export {};

package/dist/components/composites/StructuredData/sdWebsite/makeWebPageSchema.js

@@ -0,0 +1,9 @@
+export const makeWebPageSchema = (params) => {
+    return {
+        '@type': 'WebPage',
+        name: params.name,
+        about: params.description,
+        url: params.url,
+        inLanguage: params.lang,
+    };
+};

package/dist/components/composites/StructuredData/siteMetadata.d.ts

@@ -0,0 +1,35 @@
+export declare const siteMetadata: () => {
+    title: string;
+    image: string;
+    description: string;
+    twitterUsername: string;
+    siteUrl: string;
+    nofollow: boolean;
+    noindex: boolean;
+    events: {
+        name: string;
+        startDate: string;
+        endDate: string;
+        slug: string;
+        shortDescription: string;
+        representationalImage: {
+            url: string;
+        };
+        location: {
+            address: string;
+        };
+        locationText: {
+            name: string;
+        };
+    }[];
+    news: {
+        title: string;
+        author: string;
+        shortDescription: string;
+        image: {
+            url: string;
+        };
+        slug: string;
+        publishedDate: string;
+    }[];
+};

package/dist/components/composites/StructuredData/siteMetadata.js

@@ -0,0 +1,42 @@
+export const siteMetadata = () => {
+    const data = {
+        title: 'Hesburgh Component Library',
+        image: '/images/fakeimage.png',
+        description: 'Component library for the Hesburgh Libraries',
+        twitterUsername: 'hlibraries',
+        siteUrl: 'https://www.library.nd.edu',
+        nofollow: false,
+        noindex: false,
+        events: [
+            {
+                name: 'Archival Research Lab II: Inside the Archive',
+                startDate: '2021-10-13T14:00:00.000Z',
+                endDate: '2021-10-13T15:15:00.000Z',
+                slug: 'archival-research-lab-2-inside-the-archive-2021-10-13',
+                shortDescription: 'This two-session workshop provides an introduction to advanced archival research.',
+                representationalImage: {
+                    url: 'https://strapi-prod-library-website-contentbucket52d4b12c-1whgwwl6746tz.s3.amazonaws.com/events_hl_workshop_1403f3079f.jpg?AWSAccessKeyId=AKIATLJDMPVTNRHRTTAL&Expires=1698764137&Signature=oDIw1iGhnDLsDcvvlSHOn5KSRrI%3D',
+                },
+                location: {
+                    address: '103 Hesburgh Library, Rare Books & Special Collections',
+                },
+                locationText: {
+                    name: 'Hesburgh Concourse',
+                },
+            },
+        ],
+        news: [
+            {
+                title: 'Preservation Week 2023: Tips from the Hesburgh Libraries Preservation Team',
+                author: 'Hesburgh Libraries Analog Preservation and Conservation Unit',
+                shortDescription: 'Hesburgh Libraries preservation experts offer some helpful tips on safely preserving your valued collections.',
+                image: {
+                    url: 'https://strapi-prod-library-website-contentbucket52d4b12c-1whgwwl6746tz.s3.amazonaws.com/Preservation_Week_Rep_f85c55dd55.png?AWSAccessKeyId=AKIATLJDMPVTNRHRTTAL&Expires=1698764137&Signature=9jjAAAXWqJ7kBK4Tn5G7jvGK%2BfA%3D',
+                },
+                slug: 'preservation-week-2023',
+                publishedDate: '2023-04-30T04:00:00.000Z',
+            },
+        ],
+    };
+    return data;
+};

package/dist/components/providers/ui.d.ts

@@ -2,7 +2,9 @@ import { PropsWithChildren } from 'react';
 import { ComponentConfigParam } from './componentConfig';
 import { ENVIRONMENT } from './env';
 import { AlertQueryParams } from './alerts';
+import { StructuredDataProps } from '../composites/StructuredData';
 export type UiConfig = {
+    structuredData?: StructuredDataProps;
     env?: ENVIRONMENT;
     components?: ComponentConfigParam;
     alertsConfig?: AlertQueryParams;

package/dist/components/providers/ui.js

@@ -7,9 +7,10 @@ import { FontLoader } from '../../FontLoader';
 import { GlobalStyles } from '../../theme/GlobalStyles';
 import { DialogsProvider } from './dialogs';
 import { MediaSizeProvider } from './media';
+import StructuredData from '../composites/StructuredData';
 import { SnackBarProvider } from './snackBar';
 import { UniqueIdProvider } from './uniqueIds';
-export const UiProvider = ({ env, components, alertsConfig, children, includeTheme = true, loadFonts, loadGlobalStyles, }) => {
-    const core = (_jsxs(EnvironmentProvider, Object.assign({ env: env }, { children: [_jsx(MediaSizeProvider, { children: _jsx(ComponentConfigProvider, Object.assign({ config: components || {} }, { children: _jsx(UniqueIdProvider, { children: _jsx(SnackBarProvider, { children: _jsx(DialogsProvider, { children: _jsx(AlertsProvider, Object.assign({}, alertsConfig, { children: children })) }) }) }) })) }), loadGlobalStyles && _jsx(GlobalStyles, {}), loadFonts && _jsx(FontLoader, {})] })));
+export const UiProvider = ({ structuredData, env, components, alertsConfig, children, includeTheme = true, loadFonts, loadGlobalStyles, }) => {
+    const core = (_jsxs(EnvironmentProvider, Object.assign({ env: env }, { children: [_jsx(MediaSizeProvider, { children: _jsx(ComponentConfigProvider, Object.assign({ config: components || {} }, { children: _jsx(UniqueIdProvider, { children: _jsx(SnackBarProvider, { children: _jsx(DialogsProvider, { children: _jsx(AlertsProvider, Object.assign({}, alertsConfig, { children: children })) }) }) }) })) }), loadGlobalStyles && _jsx(GlobalStyles, {}), loadFonts && _jsx(FontLoader, {}), structuredData && _jsx(StructuredData, Object.assign({}, structuredData))] })));
     return includeTheme ? _jsx(ThemeProvider, { children: core }) : core;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "type": "module",
   "sideEffects": false,
   "files": [
@@ -92,6 +92,7 @@
     "react-markdown": "^8.0.7",
     "react-modal": "^3.16.1",
     "rehype-raw": "^6.1.1",
-    "sanitize-html": "^2.11.0"
+    "sanitize-html": "^2.11.0",
+    "schema-dts": "^1.1.2"
   }
 }