Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature/OP-95/optional-starting-page #363

Merged
merged 2 commits into from
Oct 25, 2023
Merged

feature/OP-95/optional-starting-page #363

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5c733ac
added optional mardkdown landing page
remko48 Oct 25, 2023
c831215
Prevents going over githubapi limit to quickly
remko48 Oct 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion pwa/src/hooks/markdown.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,18 @@ export const useMarkdown = () => {
const API: APIService | null = React.useContext(APIContext);

const getContent = (filePath: string) =>
useQuery<any, Error>(["contents", filePath], () => API?.Markdown.getContent(filePath), {
useQuery<any, Error>({
queryKey: ["contents", filePath],
queryFn: () => API?.Markdown.getContent(filePath),
onError: (error) => {
console.warn(error.message);
},
refetchOnWindowFocus: false,
refetchOnMount: false,
refetchOnReconnect: false,
retry: 1,
retryDelay: 2000,
staleTime: 1000 * 60 * 60, // one hour
});

return { getContent };
Expand Down
5 changes: 4 additions & 1 deletion pwa/src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import * as React from "react";
import { LandingTemplate } from "../templates/landing/LandingTemplate";
import { PageProps } from "gatsby";

const IndexPage: React.FC = () => <LandingTemplate />;
const IndexPage: React.FC<PageProps> = (props: PageProps) => {
return <LandingTemplate params={props.params} />;
};

export default IndexPage;
138 changes: 77 additions & 61 deletions pwa/src/templates/landing/LandingTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,79 +9,95 @@ import { LandingDisplayTemplate } from "../templateParts/landingDisplayTemplates
import { GatsbyContext } from "../../context/gatsby";
import ResultsDisplaySwitch from "../../components/resultsDisplaySwitch/ResultsDisplaySwitch";
import { Heading, Separator } from "@utrecht/component-library-react/dist/css-module";
import { MarkdownContentTemplate } from "../markdown/MarkdownContentTemplate";

export const LandingTemplate: React.FC = () => {
interface LandingTemplateProps {
params: any;
}

export const LandingTemplate: React.FC<LandingTemplateProps> = ({ params }) => {
const [filters] = React.useContext(FiltersContext);
const { screenSize } = React.useContext(GatsbyContext);

const detailPageSlug = params.detailPageSlug;
const pageSlug = params.pageSlug;

return (
<Container layoutClassName={styles.container}>
<section className={styles.section}>
<ResultsDisplaySwitch
resultsDisplayType="landingDisplayLayout"
layoutClassName={styles.landingDisplaySwitchButtons}
/>

<LandingDisplayTemplate type={filters.landingDisplayLayout} />
</section>
{process.env.GATSBY_OPTIONAL_START_PAGE !== "false" && process.env.GATSBY_OPTIONAL_START_PAGE !== undefined && (
<MarkdownContentTemplate link={process.env.GATSBY_OPTIONAL_START_PAGE} {...{ pageSlug, detailPageSlug }} />
)}

<section className={styles.section}>
<Heading level={3} className={styles.textColor}>
Veelbezochte pagina's
</Heading>
{screenSize === "desktop" && (
<div className={styles.cards}>
<ImageAndDetailsCard
layoutClassName={styles.textColor}
title="Over OpenCatalogi"
image={<img src={overOpenCatalogiImage} />}
introduction="OpenCatalogi is een weergave van Componenten verdeeld over de 5 lagen zoals gedefinieerd door VNG in het Gegevenslandschap."
link={{ label: "Ga naar Over OpenCatalogi", href: "/documentation/about" }}
{process.env.GATSBY_OPTIONAL_START_PAGE === "false" && (
<>
<section className={styles.section}>
<ResultsDisplaySwitch
resultsDisplayType="landingDisplayLayout"
layoutClassName={styles.landingDisplaySwitchButtons}
/>

<ImageAndDetailsCard
layoutClassName={styles.textColor}
title="Aan de slag met OpenCatalogi"
image={<img src={aanDeSlagMetOpenCatalogiImage} />}
introduction="Wilt u uw component op OpenCatalogi aanbieden zodat andere uw component kunnen (her)gebruiken of bij dragen aan de doorontwikkeling van uw component?"
link={{ label: "Aan de slag met OpenCatalogi", href: "documentation/usage" }}
/>
</div>
)}
{screenSize === "tablet" && (
<div className={styles.cards}>
<DetailsCard
layoutClassName={styles.textColor}
title="Over OpenCatalogi"
link={{ label: "Ga naar Over OpenCatalogi", href: "/documentation/about" }}
/>
<DetailsCard
layoutClassName={styles.textColor}
title="Aan de slag met OpenCatalogi"
link={{ label: "Aan de slag met OpenCatalogi", href: "documentation/usage" }}
/>
</div>
)}
<LandingDisplayTemplate type={filters.landingDisplayLayout} />
</section>

{screenSize === "mobile" && (
<div className={styles.cards}>
<DetailsCard
layoutClassName={styles.textColor}
title="Over OpenCatalogi"
link={{ label: "Ga naar Over OpenCatalogi", href: "/documentation/about" }}
/>
<DetailsCard
layoutClassName={styles.textColor}
title="Aan de slag met OpenCatalogi"
link={{ label: "Aan de slag met OpenCatalogi", href: "documentation/usage" }}
/>
</div>
)}
</section>
<section className={styles.section}>
<Heading level={3} className={styles.textColor}>
Veelbezochte pagina's
</Heading>
{screenSize === "desktop" && (
<div className={styles.cards}>
<ImageAndDetailsCard
layoutClassName={styles.textColor}
title="Over OpenCatalogi"
image={<img src={overOpenCatalogiImage} />}
introduction="OpenCatalogi is een weergave van Componenten verdeeld over de 5 lagen zoals gedefinieerd door VNG in het Gegevenslandschap."
link={{ label: "Ga naar Over OpenCatalogi", href: "/documentation/about" }}
/>

<ImageAndDetailsCard
layoutClassName={styles.textColor}
title="Aan de slag met OpenCatalogi"
image={<img src={aanDeSlagMetOpenCatalogiImage} />}
introduction="Wilt u uw component op OpenCatalogi aanbieden zodat andere uw component kunnen (her)gebruiken of bij dragen aan de doorontwikkeling van uw component?"
link={{ label: "Aan de slag met OpenCatalogi", href: "documentation/usage" }}
/>
</div>
)}
{screenSize === "tablet" && (
<div className={styles.cards}>
<DetailsCard
layoutClassName={styles.textColor}
title="Over OpenCatalogi"
link={{ label: "Ga naar Over OpenCatalogi", href: "/documentation/about" }}
/>
<DetailsCard
layoutClassName={styles.textColor}
title="Aan de slag met OpenCatalogi"
link={{ label: "Aan de slag met OpenCatalogi", href: "documentation/usage" }}
/>
</div>
)}

{screenSize === "mobile" && (
<div className={styles.cards}>
<DetailsCard
layoutClassName={styles.textColor}
title="Over OpenCatalogi"
link={{ label: "Ga naar Over OpenCatalogi", href: "/documentation/about" }}
/>
<DetailsCard
layoutClassName={styles.textColor}
title="Aan de slag met OpenCatalogi"
link={{ label: "Aan de slag met OpenCatalogi", href: "documentation/usage" }}
/>
</div>
)}
</section>

<Separator />
<Separator />

<FeedbackTemplate layoutClassName={styles.feedback} />
<FeedbackTemplate layoutClassName={styles.feedback} />
</>
)}
</Container>
);
};
9 changes: 1 addition & 8 deletions pwa/src/templates/markdown/MarkdownContentTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import * as React from "react";
import { useMarkdown } from "../../hooks/markdown";
import { ParsedHTML } from "../../components/ParsedHTML/ParsedHTML";
import { useMarkdownDirectories } from "../../hooks/useMarkdownDirectories";
import { Page, PageContent } from "@utrecht/component-library-react/dist/css-module";

interface MarkdownContentTemplateProps {
pageSlug: string;
Expand All @@ -26,11 +25,5 @@ export const MarkdownContentTemplate: React.FC<MarkdownContentTemplateProps> = (
content = useMarkdown().getContent(link.includes("https://api.github.com/repos/") ? link : link);
}

return (
<Page>
<PageContent>
<ParsedHTML contentQuery={content} {...{ location }} />
</PageContent>
</Page>
);
return <ParsedHTML contentQuery={content} {...{ location }} />;
};
2 changes: 2 additions & 0 deletions pwa/src/templates/templateParts/header/HeaderTemplate.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,8 @@
.headerSearchForm {
display: flex;
flex-direction: column;
padding-inline-start: var(--web-app-size-sm);
padding-inline-end: var(--web-app-size-md);
}

.section > *:not(:last-child) {
Expand Down
2 changes: 1 addition & 1 deletion pwa/src/templates/templateParts/header/HeaderTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ export const HeaderTemplate: React.FC<HeaderTemplateProps> = ({ layoutClassName
process.env.GATSBY_HEADER_SHOW_LOGIN === "true"
? setTopNavItems([...itemsArray, ...secondaryTopNavItemsMobile])
: setTopNavItems(itemsArray);
}, [screenSize, pathname, crumbs, filters]);
}, [screenSize, pathname, crumbs, filters, getHeaderContent.isSuccess]);

return (
<PageHeader
Expand Down
3 changes: 3 additions & 0 deletions pwa/static/.env.development
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,6 @@ GATSBY_HEADER_CONTENT=https://raw.githubusercontent.com/OpenCatalogi/web-app/348
GATSBY_FOOTER_SHOW_CREATOR="false"
GATSBY_FOOTER_LOGO_URL="false"
GATSBY_FOOTER_CONTENT="https://raw.githubusercontent.com/OpenCatalogi/web-app/25995205e1dbb043822d1c58c5c23f8e6f77ff7e/pwa/src/templates/templateParts/footer/FooterContent.json"

# Home
GATSBY_OPTIONAL_START_PAGE="false"
Loading