Skydust/psychartherapie-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleaned up some code and added a somewhat responsive header burger
Some checks failed
A gitea test / Random test (pull_request) Has been cancelled
Details

Browse Source
This commit was merged in pull request #13.
This commit is contained in:
Skydust
2023-09-19 14:56:09 +02:00
parent f6107de735
commit e583858edb
28 changed files with 112 additions and 1527 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/blocks/carousel.tsx
View File

@@ -1,6 +1,6 @@
import * as React from "react";
import { Section } from "../util/section";
import { PageBlocks, PageBlocksCarousel, PageBlocksMutation } from "../../tina/__generated__/types";
import { PageBlocksCarousel } from "../../tina/__generated__/types";
import { Anchoring, anchoringSchema } from "../util/anchoring";
import { Template } from "tinacms";
import { PageBlockFunction } from "../blocks-renderer";
@@ -12,7 +12,9 @@ import "react-responsive-carousel/lib/styles/carousel.min.css";
* @param {PageBlocksCarousel} data The data from the carousel
* @constructor
*/
export const Carousel: PageBlockFunction<PageBlocksCarousel> = ({ data }) => {
export const Carousel: PageBlockFunction<PageBlocksCarousel> = ({
data
}: { data: PageBlocksCarousel}): React.ReactElement => {
return (
<Section>
<div className="w-[100%]">

1
components/blocks/content.tsx
View File

@@ -7,7 +7,6 @@ import { PageBlocksContent } from "../../tina/__generated__/types";
import { tinaField } from "tinacms/dist/react";
import { PageBlockFunction } from "../blocks-renderer";
import inlineComponents, { richTextTemplates } from "../inline/inline-definitions";
import sanitizeHtml from "sanitize-html";
export const Content: PageBlockFunction<PageBlocksContent> = ({ data }) => {
return (

3
components/inline/block-quote.tsx
View File

@@ -1,12 +1,13 @@
import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
import { RichTextTemplate } from "@tinacms/schema-tools";
import React from "react";
export interface BlockQuoteProps {
children: TinaMarkdownContent;
authorName: string;
}
const BlockQuote = (props: BlockQuoteProps) => (
const BlockQuote = (props: BlockQuoteProps): React.ReactElement => (
<div>
<blockquote>
<TinaMarkdown content={ props.children } />

2
components/inline/image.tsx
View File

@@ -89,7 +89,7 @@ const Image = (props: ImageProps) => {
export const imageSchema: RichTextTemplate = {
name: "Image",
label: "Image",
label: "Advanced Image",
ui: {
defaultItem: {
size: Object.values(imageSize)[0],

4
components/inline/inline-definitions.tsx
View File

@@ -1,7 +1,6 @@
import { Components } from "tinacms/dist/rich-text";
import BlockQuote, { BlockQuoteProps, blockQuoteSchema } from "./block-quote";
import DateTime, { DateTimeProps, dateTimeSchema } from "./date-time";
import NewsletterSignup, { NewsletterSignupProps, newsletterSignupSchema } from "./newsletter-signup";
import { Prism } from "tinacms/dist/rich-text/prism";
import React from "react";
import Image, { ImageProps, imageSchema } from "./image";
@@ -23,7 +22,6 @@ const HTMLInline = (props: { value: string }) => {
const inlineComponents: Components<{
BlockQuote: BlockQuoteProps;
DateTime: DateTimeProps;
NewsletterSignup: NewsletterSignupProps;
Image: ImageProps;
}> = {
code_block: (props) => <Prism { ...props } />,
@@ -38,14 +36,12 @@ const inlineComponents: Components<{
),
BlockQuote,
DateTime,
NewsletterSignup,
Image
};
export const richTextTemplates: RichTextTemplate[] = [
dateTimeSchema,
blockQuoteSchema,
newsletterSignupSchema,
imageSchema
];

82
components/inline/newsletter-signup.tsx
View File

@@ -1,82 +0,0 @@
import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
import React from "react";
import { RichTextTemplate } from "@tinacms/schema-tools";
export interface NewsletterSignupProps {
placeholder: string;
buttonText: string;
children: TinaMarkdownContent;
disclaimer?: TinaMarkdownContent;
}
const NewsletterSignup = (props: NewsletterSignupProps) => (
<div className="bg-white">
<div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
<div className="">
<TinaMarkdown content={ props.children } />
</div>
<div className="mt-8 ">
<form className="sm:flex">
<label htmlFor="email-address" className="sr-only">
Email address
</label>
<input
id="email-address"
name="email-address"
type="email"
autoComplete="email"
required
className="w-full px-5 py-3 border border-gray-300 shadow-sm placeholder-gray-400 focus:ring-1 focus:ring-teal-500 focus:border-teal-500 sm:max-w-xs rounded-md"
placeholder={ props.placeholder }
/>
<div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
<button
type="submit"
className="w-full flex items-center justify-center py-3 px-5 border border-transparent text-base font-medium rounded-md text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500"
>
{ props.buttonText }
</button>
</div>
</form>
<div className="mt-3 text-sm text-gray-500">
{ props.disclaimer && <TinaMarkdown content={ props.disclaimer } /> }
</div>
</div>
</div>
</div>
);
export const newsletterSignupSchema: RichTextTemplate = {
name: "NewsletterSignup",
label: "Newsletter Sign Up",
fields: [
{
name: "children",
label: "CTA",
type: "rich-text"
},
{
name: "placeholder",
label: "Placeholder",
type: "string"
},
{
name: "buttonText",
label: "Button Text",
type: "string"
},
{
name: "disclaimer",
label: "Disclaimer",
type: "rich-text"
}
],
ui: {
defaultItem: {
placeholder: "Enter your email",
buttonText: "Notify Me"
}
}
};
export default NewsletterSignup;

22
components/layout/footer/footer.tsx → components/layout/footer.tsx
View File

@@ -1,12 +1,14 @@
import React from "react";
import { Container } from "../../util/container";
import { Container } from "../util/container";
import { ObjectField } from "@tinacms/schema-tools/dist/types";
import facebookImage from "../../../assets/img/facebook.svg";
import instagramImage from "../../../assets/img/instagram.svg";
import facebookImage from "../../public/icons/facebook.svg";
import instagramImage from "../../public/icons/instagram.svg";
import NextImage from "next/image";
import { tinaField } from "tinacms/dist/react";
import { TinaMarkdown } from "tinacms/dist/rich-text";
import { GlobalFooter } from "../../tina/__generated__/types";
export const Footer = ({ data, rawData }) => {
export const Footer = ({ data }: { data: GlobalFooter }): React.ReactElement => {
return (
<footer>
<Container className="relative" size="small">
@@ -44,26 +46,26 @@ export const Footer = ({ data, rawData }) => {
<a href={ data?.social?.facebook }
onClick={ () => { /* window.dataLayer.push({ socials: "fb-click" });*/ } }
className="py-2 me-2">
<img src={ facebookImage } alt="Facebook"/>
<NextImage src={ facebookImage } alt={ "Facebook" }/>
</a> }
{ data?.social?.instagram &&
<a href={ data?.social?.instagram }
onClick={ () => { /* window.dataLayer.push({ socials: "insta-click" });*/ } }
className="py-2">
<img src={ instagramImage } alt="Instagram"/>
<NextImage src={ instagramImage } alt={ "Facebook" }/>
</a> }
</div>
</div>
<div>
<p data-tina-field={ tinaField(data, "copyright") }>
<div className="flex flex-row" data-tina-field={ tinaField(data, "copyright") }>
&copy; { data?.copyright?.year }
{ data?.copyright?.subtext?.children?.length > 0 &&
<> &#8211;<div className={ "ml-1 float-right" }>
<> &#8211;<span className={ "ml-1" }>
<TinaMarkdown content={ data.copyright?.subtext } />
</div>
</span>
</> }
</p>
</div>
</div>
</div>
</Container>

1
components/layout/footer/index.tsx
View File

@@ -1 +0,0 @@
export { Footer } from "./footer";

92
components/layout/footer/rawRenderer.tsx
View File

@@ -1,92 +0,0 @@
import React from "react";
import { Fragment, useState } from "react";
import { Dialog, Transition } from "@headlessui/react";
export const RawRenderer = ({ rawData, parentColor }) => {
const buttonColorClasses = {
blue: "text-blue-500",
teal: "text-teal-500",
green: "text-green-500",
red: "text-red-500",
pink: "text-pink-500",
purple: "text-purple-500",
orange: "text-orange-500",
yellow: "text-yellow-600"
};
const [isOpen, setIsOpen] = useState(false);
function closeModal() {
setIsOpen(false);
}
function openModal() {
setIsOpen(true);
}
return (
<>
<button
type="button"
onClick={ openModal }
className={ `z-10 relative flex items-center px-5 py-2 mx-3 my-2 font-semibold shadow-sm text-sm transition duration-150 ease-out rounded transform focus:shadow-outline focus:outline-none whitespace-nowrap opacity-80 hover:opacity-100 shadow-md ${
buttonColorClasses[buttonColorClasses.blue]
}` }
>
View Raw Data
<span
className={ `absolute w-full h-full left-0 top-0 rounded -z-1 ${
parentColor === "primary"
? "bg-white opacity-80"
: "bg-current opacity-15"
}` }
/>
</button>
<Transition appear show={ isOpen } as={ Fragment }>
<Dialog
as="div"
className="fixed inset-0 z-10 overflow-y-auto"
onClose={ closeModal }
>
<div className="min-h-screen max-h-screen px-4 py-12 text-center flex flex-col items-center justify-center">
<Transition.Child
as={ Fragment }
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-out duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="">
<Dialog.Overlay className="fixed inset-0 bg-gradient-to-br from-gray-800 to-gray-1000 opacity-80" />
</div>
</Transition.Child>
<Transition.Child
as={ Fragment }
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<div className="flex-1 w-full prose dark:prose-dark max-w-3xl p-6 overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-gray-1000 shadow-xl rounded-xl inline-flex flex-col max-h-full">
<pre className="flex-1 overflow-y-auto">
<code>{ JSON.stringify(rawData, null, 2) }</code>
</pre>
<button
type="button"
className="flex-0 font-semibold text-lg transition duration-150 ease-out opacity-80 hover:opacity-100"
onClick={ closeModal }
>
Great, thanks!
</button>
</div>
</Transition.Child>
</div>
</Dialog>
</Transition>
</>
);
};

24
components/layout/header.tsx
View File

@@ -1,20 +1,23 @@
import React from "react";
import React, { useState } from "react";
import Link from "next/link";
import { tinaField } from "tinacms/dist/react";
import defaultLogo from "../../public/logo.png";
import { GlobalHeader } from "../../tina/__generated__/types";
import { ObjectField } from "@tinacms/schema-tools/dist/types";
export const Header = ({ data }: { data: GlobalHeader }) => {
const navbarToggler: JSX.Element = (
<button className="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
export const Header = ({ data }: { data: GlobalHeader }): React.ReactElement => {
const [expanded, setExpanded] = useState(false);
const navbarToggler: React.ReactElement = (
<button
className="navbar-toggler"
type="button"
onClick={ () => { setExpanded(!expanded); } }
aria-label="Toggle navigation">
<span className="navbar-toggler-icon" />
</button>
);
return (
<nav className="navbar flex flex-wrap content-between sticky top-0 py-2">
<nav className={ `navbar${ expanded ? " navbar-expanded": "" } flex flex-wrap content-between sticky top-0 py-2` }>
<div className="flex grow justify-between px-6 h-full">
<div className="flex navbar-brand">
<Link
@@ -29,9 +32,8 @@ export const Header = ({ data }: { data: GlobalHeader }) => {
</Link>
</div>
{ navbarToggler }
<div className={ "navbar-items flex items-center" } id="navbarSupportedContent">
<ul className="flex md:flex-row">
{ data.nav &&
<ul className="navbar-items">
{ data.nav &&
data.nav.map((item, i) => {
return (
<li
@@ -42,14 +44,14 @@ export const Header = ({ data }: { data: GlobalHeader }) => {
data-tina-field={ tinaField(item, "label") }
href={ `${ item.external? "" : "/" }${ item.href }` }
className={ `nav-link p-2 ${ item.external ? "external-link-icon" : "" }` }
onClick={ () => setExpanded(false) }
>
{ item.label }
</Link>
</li>
);
}) }
</ul>
</div>
</ul>
</div>
</nav>
);

1
components/layout/index.tsx
View File

@@ -1 +0,0 @@
export { Layout } from "./layout";

5
components/layout/layout.tsx
View File

@@ -34,10 +34,7 @@ export const Layout = ({
<div className="flex-1 flex flex-col">
{ children }
</div>
<Footer
rawData={ rawData }
data={ data?.footer }
/>
<Footer data={ data?.footer } />
</div>
</>
);

2
components/util/anchoring.tsx
View File

@@ -48,7 +48,7 @@ export const Anchoring: React.FC<AnchoringProps> = (props) => {
ref={ anchoringRef }
style={ { opacity: opacity } }
>
<a onClick={ handleScrollClick }>
<a role="button" onClick={ handleScrollClick }>
<h1 data-tina-field={ tinaField(props, "text") }>{ props.text }</h1>
<img
src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjI1OCAxNi4yNDItNi02YTEuMDUgMS4wNSAwIDEgMSAxLjQ4NC0xLjQ4NEwxMiAxNC4wMTVsNS4yNTgtNS4yNTdhMS4wNSAxLjA1IDAgMSAxIDEuNDg0IDEuNDg0bC02IDZhMS4wNSAxLjA1IDAgMCAxLTEuNDg0IDBaIiBmaWxsPSIjZmZmZmZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGNsYXNzPSJmaWxsLTAwMDAwMCI+PC9wYXRoPjwvc3ZnPg=="/>