diff --git a/packages/web/data.json b/packages/web/data.json new file mode 100644 index 0000000..a826c48 --- /dev/null +++ b/packages/web/data.json @@ -0,0 +1,272 @@ +{ + "make": [ + { + "id": 1, + "url": "http://www.example.com", + "date": "2023-07-03", + "type": "code", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 2, + "url": "http://www.example.com", + "date": "2023-07-03", + "type": "code", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 3, + "url": "http://www.example.com", + "date": "2023-07-03", + "type": "code", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 4, + "url": "http://www.example.com", + "date": "2023-07-03", + "type": "code", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 5, + "url": "http://www.example.com", + "date": "2023-07-03", + "type": "code", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 6, + "url": "http://www.example.com", + "date": "2023-07-03", + "type": "code", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 7, + "url": "http://www.example.com", + "date": "2023-07-03", + "type": "code", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 8, + "url": "http://www.example.com", + "date": "2023-07-03", + "type": "code", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 9, + "url": "http://www.example.com", + "date": "2023-07-03", + "type": "code", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 10, + "url": "http://www.example.com", + "date": "2023-07-03", + "type": "code", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 11, + "url": "http://www.example.com", + "date": "2023-07-03", + "type": "code", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 12, + "url": "http://www.example.com", + "date": "2023-07-03", + "type": "code", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 13, + "url": "http://www.example.com", + "date": "2023-07-03", + "type": "code", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 14, + "url": "http://www.example.com", + "date": "2023-07-03", + "type": "code", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 15, + "url": "http://www.example.com", + "date": "2023-07-03", + "type": "code", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 16, + "url": "http://www.example.com", + "date": "2023-07-03", + "type": "code", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 17, + "url": "http://www.example.com", + "date": "2023-07-03", + "type": "code", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 18, + "url": "http://www.example.com", + "date": "2023-07-03", + "type": "code", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 19, + "url": "http://www.example.com", + "date": "2023-07-03", + "type": "code", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 20, + "url": "http://www.example.com", + "date": "2023-07-03", + "type": "code", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + } + ], + "envision": [ + { + "id": 1, + "url": "http://www.example.com", + "imageUrl": "http://placehold.it/1", + "title": "Lorem ipsum dolor sit amet", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 2, + "url": "http://www.example.com", + "imageUrl": "http://placehold.it/1", + "title": "Lorem ipsum dolor sit amet", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 3, + "url": "http://www.example.com", + "imageUrl": "http://placehold.it/1", + "title": "Lorem ipsum dolor sit amet", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 4, + "url": "http://www.example.com", + "imageUrl": "http://placehold.it/1", + "title": "Lorem ipsum dolor sit amet", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 5, + "url": "http://www.example.com", + "imageUrl": "http://placehold.it/1", + "title": "Lorem ipsum dolor sit amet", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + }, + { + "id": 6, + "url": "http://www.example.com", + "imageUrl": "http://placehold.it/1", + "title": "Lorem ipsum dolor sit amet", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget nunc aliquam vestibulum. Sed vitae diam eget nunc aliquam vestibulum." + } + ], + "featured": [ + { + "title": "yasumi", + "description": "HATEOAS-first, resource-based backend framework in Node.", + "links": [ + { + "href": "https://code.modal.sh/modal-soft/yasumi", + "children": "Explore Code", + "primary": true + } + ], + "showcase": { + "type": "img", + "src": "/images/a96d02d8cc43cc3b9f1e77c43dfa5644.png" + } + }, + { + "title": "formxtra", + "description": "Extract and set form values through the DOM—no frameworks required!", + "links": [ + { + "href": "https://codepen.io/theoryofnekomata/pen/xxajmvJ", + "children": "View Demo" + }, + { + "href": "https://code.modal.sh/TheoryOfNekomata/formxtra", + "children": "Explore Code", + "primary": true + } + ], + "showcase": { + "type": "iframe", + "allowFullScreen": true, + "src": "https://codepen.io/theoryofnekomata/embed/xxajmvJ?default-tab=result&theme-id=dark", + "sandbox": "allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation", + "allow": "accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share" + } + }, + { + "title": "tesseract", + "description": "Functional, accessible, aesthetic design system.", + "links": [ + { + "href": "https://code.modal.sh/tesseract-design/tesseract", + "children": "Explore Code", + "primary": true + } + ], + "showcase": { + "type": "img", + "src": "/images/162cab44da8420c50900d8f11c6da6fd.jpg" + } + }, + { + "title": "numerica", + "description": "Gets the name of a number, even if it's stupidly big.", + "links": [ + { + "href": "https://code.modal.sh/modal-soft/numerica", + "children": "Explore Code", + "primary": true + } + ], + "showcase": { + "type": "img", + "src": "/images/d69ab7f4e5747b5b8f297e4ebe9770f5.png" + } + }, + { + "title": "webvideo-transcript-summarizer", + "description": "Get transcript summaries of Web videos. Powered by OpenAI.", + "links": [ + { + "href": "https://code.modal.sh/modal-soft/webvideo-transcript-summary", + "children": "Explore Code", + "primary": true + } + ], + "showcase": { + "type": "img", + "src": "/images/3cd237361eada7fd30eb96d42d55ec00.jpg" + } + } + ] +} diff --git a/packages/web/src/components/molecules/ContactCtaBanner/index.tsx b/packages/web/src/components/molecules/ContactCtaBanner/index.tsx index dbee0db..b764354 100644 --- a/packages/web/src/components/molecules/ContactCtaBanner/index.tsx +++ b/packages/web/src/components/molecules/ContactCtaBanner/index.tsx @@ -8,14 +8,12 @@ import * as WebActionReact from '@tesseract-design/web-action-react'; import {Brand} from '@/components/molecules/Brand'; export interface ContactCtaBannerProps { - onSubmit?: React.FormEventHandler; visible?: boolean; hasBrand?: boolean; iceformProps?: Partial>; } export const ContactCtaBanner: React.FC = ({ - onSubmit, visible: visibleProp = false, hasBrand = false, iceformProps = {}, @@ -83,7 +81,6 @@ export const ContactCtaBanner: React.FC = ({ {...iceformProps} className="mt-8" aria-label="Contact Form" - onSubmit={onSubmit} method="post" action="/a/contact" clientAction="/api/contact" diff --git a/packages/web/src/components/molecules/MakeSection/index.tsx b/packages/web/src/components/molecules/MakeSection/index.tsx index 305a8f5..35e5b18 100644 --- a/packages/web/src/components/molecules/MakeSection/index.tsx +++ b/packages/web/src/components/molecules/MakeSection/index.tsx @@ -18,13 +18,18 @@ export const MakeSection: React.FC = ({ data, }) => { const groupedData = data.reduce( - (grouped, datum) => ({ - ...grouped, - [datum.date.getFullYear()]: [ - ...(grouped[datum.date.getFullYear()] ?? []), - datum, - ], - }), + (grouped, datum) => { + const year = new Date(datum.date).getFullYear(); + return { + ...grouped, + [year]: [ + ...( + grouped[year] ?? [] + ), + datum, + ], + }; + }, {} as Record, ); @@ -86,7 +91,7 @@ export const MakeSection: React.FC = ({ key={id} > - + ))} diff --git a/packages/web/src/components/organisms/BlogLayout/index.tsx b/packages/web/src/components/organisms/BlogLayout/index.tsx new file mode 100644 index 0000000..b748a82 --- /dev/null +++ b/packages/web/src/components/organisms/BlogLayout/index.tsx @@ -0,0 +1,64 @@ +import * as React from 'react'; +import {Layouts, Widgets} from '@tesseract-design/viewfinder-react'; +import Link from 'next/link'; +import * as WebNavigationReact from '@tesseract-design/web-navigation-react'; + +export interface BlogLayoutProps {} + +export const BlogLayout: React.FC = () => ( + + + + + + } + > + +
+
+
+

+ Article title +

+ +
+
+ Excerpt lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod aliquam. + Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod aliquam. + Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod aliquam. + Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod aliquam. + Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod aliquam. +
+
+
+ + Read more + +
+
+
+
+
+
+); diff --git a/packages/web/src/components/organisms/IndexLayout/index.tsx b/packages/web/src/components/organisms/IndexLayout/index.tsx index 4e399bf..8c54fa8 100644 --- a/packages/web/src/components/organisms/IndexLayout/index.tsx +++ b/packages/web/src/components/organisms/IndexLayout/index.tsx @@ -14,7 +14,6 @@ export interface IndexLayoutProps { makeSectionData?: MakeSectionProps['data']; envisionSectionData?: EnvisionSectionProps['data']; featuredProjectData?: FeaturedProjectSectionProps[]; - onSubmit?: React.FormEventHandler; contactVisible?: boolean; hasMainLandingSection?: boolean; contactHasBrand?: boolean; @@ -26,7 +25,6 @@ export const IndexLayout: React.FC = ({ makeSectionData, envisionSectionData, featuredProjectData = [], - onSubmit, contactVisible = false, hasMainLandingSection = false, contactHasBrand = false, @@ -40,36 +38,37 @@ export const IndexLayout: React.FC = ({ - {hasMainLandingSection && ( - <> - + {hasMainLandingSection && ( + <> + +
+ + )} + {Array.isArray(makeSectionData) && ( + -
- - )} - {Array.isArray(makeSectionData) && ( - - )} - {Array.isArray(envisionSectionData) && ( - - )} - {featuredProjectData.map((featuredProjectProps) => ( - + )} + {featuredProjectData.map((featuredProjectProps) => ( + + ))} + - ))} - +