From 0fdbe42825e487ae6371aba2931451aed030a312 Mon Sep 17 00:00:00 2001 From: OlliesWorld Date: Wed, 16 Aug 2023 11:19:01 -0600 Subject: [PATCH 1/4] test with blog/index new look --- components/Layout.tsx | 2 +- package.json | 3 + pages/blog/index.page.tsx | 275 +++++++++++++++---------- pages/index.page.tsx | 410 +++++++++++++++++++++++++++++--------- tsconfig.json | 3 +- yarn.lock | 100 +++++++++- 6 files changed, 586 insertions(+), 207 deletions(-) diff --git a/components/Layout.tsx b/components/Layout.tsx index 5e4df7b65..629117582 100644 --- a/components/Layout.tsx +++ b/components/Layout.tsx @@ -16,7 +16,7 @@ type Props = { hideAds?: boolean } -const responsiveClasses = 'w-full xl:w-[1200px] px-2 sm:px-4 lg:px-8' +const responsiveClasses = 'w-screen' export default function Layout({ children, mainClassName, metaTitle, whiteBg, hideAds }: Props) { const showMobileNav = useStore(s => s.overlayNavigation === 'docs') diff --git a/package.json b/package.json index 7176475ae..cc591aa4c 100644 --- a/package.json +++ b/package.json @@ -15,12 +15,15 @@ "@docsearch/react": "3.3.3", "@types/js-yaml": "^4.0.5", "@types/react-syntax-highlighter": "^15.5.1", + "axios": "1.4.0", "classnames": "^2.3.1", "feed": "^4.2.2", "gray-matter": "^4.0.3", "js-yaml": "^4.1.0", "markdown-to-jsx": "^7.1.6", + "moment": "2.29.4", "next": "12.1.0", + "node-ical": "0.16.1", "react": "17.0.2", "react-dom": "17.0.2", "react-syntax-highlighter": "^15.5.0", diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx index 0c9ec256b..c3d24f640 100644 --- a/pages/blog/index.page.tsx +++ b/pages/blog/index.page.tsx @@ -1,9 +1,9 @@ -import Layout from '~/components/Layout' -import { Headline1 } from '~/components/Headlines' -import fs from 'fs' +import React, { useState } from 'react' import Head from 'next/head' import Link from 'next/link' -import React from 'react' +import fs from 'fs' +// import { getLayout } from '~/components/SiteLayout' +import { Headline1 } from '~/components/Headlines' import matter from 'gray-matter' import readingTime from 'reading-time' const PATH = 'pages/blog/posts' @@ -12,6 +12,7 @@ import generateRssFeed from './generateRssFeed' import { useRouter } from 'next/router' import useSetUrlParam from '~/lib/useSetUrlParam' import { SectionContext } from '~/context' +import Layout from '~/components/Layout' export async function getStaticProps() { const files = fs.readdirSync(PATH) @@ -37,134 +38,188 @@ export async function getStaticProps() { } } -export default function StaticMarkdownPage ({ blogPosts }: { blogPosts: any[] }) { +export default function StaticMarkdownPage({ blogPosts }: { blogPosts: any[] }) { const router = useRouter() const typeFilter: null | string = Array.isArray(router.query?.type) ? router.query?.type?.[0] : router.query?.type || null const setParam = useSetUrlParam() + + const recentBlog = blogPosts.sort((a, b) => { + const dateA = new Date(a.frontmatter.date).getTime() + const dateB = new Date(b.frontmatter.date).getTime() + return dateA < dateB ? 1 : -1 + }) + + const timeToRead = Math.ceil(readingTime(recentBlog[0].content).minutes) + const setOfTags: any[] = blogPosts.map((tag) => tag.frontmatter.type) + const spreadTags: any[] = [...setOfTags] + const allTags = [...new Set(spreadTags)] + + const [filterTag, setFilterTag] = useState('') + const handleClick = (event: { currentTarget: { value: any } }) => { + const clickedTag = event.currentTarget.value + setFilterTag(clickedTag) + } + + return ( + // @ts-ignore JSON Schema Blog -
- Blog - - - RSS Feed - -
+
+ {recentBlog[0] && ( +
+
+ hero image example +
- {typeFilter && ( -
- -
setParam('type', null)} - > - {typeFilter} - - - +
+
+ {recentBlog[0].frontmatter.type} +
+
+ {recentBlog[0].frontmatter.title} +
+
+
+
+

{recentBlog[0].frontmatter.authors[0].name}

+
+ + {recentBlog[0].frontmatter.date} · {timeToRead} min read + +
+
+
+
+
+ )} +
+
Blog

Filter blog post by category...

+
- )} - -
- {blogPosts - .filter(post => { - if (!typeFilter) return true - const blogType = post.frontmatter.type as string | undefined - if (!blogType) return false - return blogType.toLowerCase() === typeFilter.toLowerCase() - }) - .sort((a, b) => { - const dateA = new Date(a.frontmatter.date).getTime() - const dateB = new Date(b.frontmatter.date).getTime() - return dateA < dateB ? 1 : -1 - }) - .map((blogPost: any) => { - const { frontmatter, content } = blogPost - const date = new Date(frontmatter.date) - const timeToRead = Math.ceil(readingTime(content).minutes) - - return ( -
- - -
-
-
-
-
{ - e.preventDefault() - e.stopPropagation() - setParam('type', frontmatter.type) - }} - > - {frontmatter.type} -
-
-
- {frontmatter.title} -
-
- -
-
-
-
- {(frontmatter.authors || []).map((author: any, index: number) => { - return ( -
- ) - })} -
+ {/* Filter Buttons */} +
{allTags.map((tag) => ( + + ))}
+ + {/* filterTag === frontmatter.type && */} +
+ + {blogPosts + .filter(post => { + if (!typeFilter) return true + const blogType = post.frontmatter.type as string | undefined + if (!blogType) return false + return blogType.toLowerCase() === typeFilter.toLowerCase() + }).filter( + post => { + if (post.frontmatter.type === filterTag) return true + else if (filterTag === '') return true + } + ) + .sort((a, b) => { + const dateA = new Date(a.frontmatter.date).getTime() + const dateB = new Date(b.frontmatter.date).getTime() + return dateA < dateB ? 1 : -1 + }) + .map((blogPost: any) => { + const { frontmatter, content } = blogPost + const date = new Date(frontmatter.date) + const timeToRead = Math.ceil(readingTime(content).minutes) - ) } + +// StaticMarkdownPage.getLayout = getLayout \ No newline at end of file diff --git a/pages/index.page.tsx b/pages/index.page.tsx index 3ece99fad..4e61174dd 100644 --- a/pages/index.page.tsx +++ b/pages/index.page.tsx @@ -1,118 +1,340 @@ import React from 'react' +// import { getLayout } from '../components/SiteLayout' import Layout from '~/components/Layout' +import { DocSearch } from '@docsearch/react' import fs from 'fs' import matter from 'gray-matter' -import StyledMarkdown from '~/components/StyledMarkdown' +const PATH = 'pages/blog/posts' +import readingTime from 'reading-time' import Link from 'next/link' -import { Headline2 } from '~/components/Headlines' -import Code from '~/components/Code' +import TextTruncate from 'react-text-truncate' -export async function getStaticProps() { - const block1 = fs.readFileSync('pages/_index.md', 'utf-8') - const { content: block1Content } = matter(block1) +import { Headline4 } from '~/components/Headlines' +import { GetStaticProps } from 'next' + +/* eslint-disable */ +import axios from 'axios' +import ical from 'node-ical' +import moment from 'moment' +// import dayjs from 'dayjs' +// import localizedFormat from 'dayjs/plugin/localizedFormat' +// import isBetween from 'dayjs/plugin/isBetween' + +/* eslint-enable */ +export const getStaticProps: GetStaticProps = async () => { + const files = fs.readdirSync(PATH) + const blogPosts = files + .filter(file => file.substr(-3) === '.md') + .map((fileName) => { + const slug = fileName.replace('.md', '') + const fullFileName = fs.readFileSync(`pages/blog/posts/${slug}.md`, 'utf-8') + const { data: frontmatter, content } = matter(fullFileName) + return ({ + slug: slug, + frontmatter, + content + }) + }) + .sort((a, b) => { + const dateA = new Date(a.frontmatter.date).getTime() + const dateB = new Date(b.frontmatter.date).getTime() + return dateA < dateB ? 1 : -1 + }) + .slice(0, 5) + + // Function to fetch the remote iCal file + async function fetchRemoteICalFile(url: string) { + try { + const response = await axios.get(url, { method: 'no-cors' }) + return response.data + } catch (error) { + console.error('Error fetching iCal file:', error) + return null + } + } + // Example usage: + const remoteICalUrl = 'https://calendar.google.com/calendar/ical/c_8r4g9r3etmrmt83fm2gljbatos%40group.calendar.google.com/public/basic.ics' // Replace with the actual URL + const datesInfo = await fetchRemoteICalFile(remoteICalUrl) + .then((icalData) => printEventsForNextFourWeeks(ical.parseICS(icalData))) + .catch((error) => console.error('Error:', error)) + // console.log('this is fetched data', datesInfo) return { props: { - blocks: [block1Content] + blogPosts, + datesInfo, + fallback: false, + }, + revalidate: 10, + } +} +// Function to filter and print events for the next 4 weeks from today +function printEventsForNextFourWeeks(icalData: { [x: string]: any }) { + // dayjs.extend(localizedFormat) + // dayjs.extend(isBetween) + const arrayDates = [] + if (!icalData) { + console.error('iCal data is empty or invalid.') + return + } + + // Calculate the range of dates for the next 4 weeks from today + const today = moment().startOf('day') + const nextFourWeeksEnd = moment().add(4, 'weeks').endOf('day') + + // Loop through the events in the iCal data + for (const k in icalData) { + const event = icalData[k] + if (event.type === 'VEVENT') { + const title = event.summary + let startDate = moment(event.start) + + // Get the timezone of the event + const timezone = event.tz || 'UTC' // Default to UTC if timezone information is not provided + + // Complicated case - if an RRULE exists, handle multiple recurrences of the event. + if (event.rrule !== undefined) { + // For recurring events, get the set of event start dates that fall within the range + // of dates we're looking for. + const dates = event.rrule.between( + today.toDate(), + nextFourWeeksEnd.toDate(), + true, + ) + + // Loop through the set of date entries to see which recurrences should be printed. + for (const date of dates) { + startDate = moment(date) + + // Check if the event falls within the next 4 weeks from today + if (startDate.isBetween(today, nextFourWeeksEnd, undefined, '[]')) { + const time = startDate.format('MMMM Do YYYY, h:mm a') + const day = startDate.format('D') + + arrayDates.push({ title, time, day, timezone }) + + } + } + } } } + return arrayDates } +const Home = (props: any) => { + const blogPosts = props.blogPosts + // console.log('anything', props.datesInfo) + const timeToRead = Math.ceil(readingTime(blogPosts[0].content).minutes) -const Home = ({ blocks }: { blocks: any[] }) => { return ( - -
-
-

- Describe and validate JSON documents -

-

- JSON schema is the standard vocabulary for describing JSON data.
It validates documents and provides a clear human- and machine- readable documentation. -

-
-
- - -
- πŸ‘‹ + +
+
+ {/* Hero */} +
+
+

+ Build more. Break less. Empower others. +

+

+ JSON Schema enables the confident and reliable use of the JSON data format. +

+ + +
+

Used by

+ +
+ + + + +
+

More than 200 implementations generating over 100 million weekly downloads

- Getting started - - - - -
- πŸ“– +
+
+ {/* Feature */} +
+
+

Why JSON Schema?

+

While JSON is probably the most popular format for exchanging data, JSON Schema is the vocabulary that allows JSON data consistency, validity, and interoperability at scale.

+
+ {/* Feature 4 section*/} + +
+

Document your data

+

Create a clear, standardized representation of your data to improve understanding and collaboration among developers, stakeholders, and collaborators.

+
+
+

Vibrant tooling ecosystem

+

Adopt JSON Schema with an expansive range of community-driven tools, libraries, and frameworks across many programming languages.

+
+
+ +
+
+

Start learning JSON Schema

+ +
+
- - Community - -

- We have an active and growing community. All are welcome to be part of our community, help shape it, or simply observe. - We want to keep our community welcoming and inclusive, so please read our JSON Schema Organizational Code of Conduct. (This is a combination of the Contributor Covenant and IETF BCP 54.) - The JSON Schema team and community are here to help! - At any point, feel free to join our Slack server. - Our Slack server has limited history, so we also use GitHub Discussions. - We monitor the jsonschema tag on StackOverflow. -

- + {/* SidebySide section*/} +
+ +
+

Explore the JSON Schema Ecosystem

+

Discover trusted JSON Schema tooling to help your organization leverage the benefits of JSON Schema. Because JSON Schema is much more than a Specification, it is a vibrant ecosystem of Validators, Generators, Linters, and other JSON Schema Utilities made by this amazing Community.

+ + +
+
+ + {/* Join community */} +

+
+
+

Welcome to the JSON Schema Community

+

With over 60 million weekly installs, JSON Schema has a large and active developer community across the world. Join the Community to learn, share ideas, ask questions, develop JSON Schema tooling and build new connections. +

+
+
+
+

Join the JSON Schema Community Slack!

+ + {/*

Event

*/} +

Join our Slack to ask questions, get feedback on your projects, and connect with +5000 practitioners and experts.

+ +
+ {/* BlogPost Data */} +
+

Welcome to our blog!

+ +

{blogPosts[0].frontmatter.title}

+
+
+
+
+

{blogPosts[0].frontmatter.authors[0].name}

+
+ + {blogPosts[0].frontmatter.date} · {timeToRead} min read + +
+
+
+
+ + Read more + +
+
+
+
+

JSON Schema Community Meetings & Events

+

We hold monthly Office Hours and weekly Open Community Working Meetings. Office Hours are every first Tuesday of the month at 15:00 BST, and by appointment. Open Community Working Meetings are every Monday at 14:00 PT. +

+ +
+
+
+ + Upcoming events + +
+
    + {props.datesInfo.slice(0, 3).map((event: any, index: any) => ( +
  • +
    +

    + {event.day} +

    +
    +

    {event.title}

    +

    {event.time}

    +
    +
    +
    • + ))} +
+
- +
+ View Calendar +
+
+
+
+ + {/* News & Blogs */} +
+
+

Contribute to the JSON Schema

+ +
+
+ + {/* Sponsors */} + +
+
+

Sponsors

+

Want to become a sponsor? Support us!

+
+
+ + + + + + +
+ +
+ + {/* Supported */} + +
+
+

Supported by

+

The following companies support us by letting us use their products. Email us for more info.

+
+
+ + + +
+
+
+
) } export default Home +// Home.getLayout = getLayout \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 1be366e98..3bd4253cc 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "target": "es5", + "target": "es2015", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, @@ -16,6 +16,7 @@ "incremental": true, "baseUrl": ".", "paths": { + "react": [ "./node_modules/@types/react" ], "~/*": ["./*"], "@public/*": ["./public/*"] } diff --git a/yarn.lock b/yarn.lock index 6dc9b80ee..450ef12d1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -685,6 +685,11 @@ ast-types-flow@^0.0.7: resolved "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz" integrity sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag== +asynckit@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" + integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q== + autoprefixer@^10.4.2: version "10.4.2" resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.2.tgz" @@ -707,6 +712,15 @@ axe-core@^4.3.5: resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.7.0.tgz" integrity sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ== +axios@1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f" + integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA== + dependencies: + follow-redirects "^1.15.0" + form-data "^4.0.0" + proxy-from-env "^1.1.0" + axobject-query@^2.2.0: version "2.2.0" resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz" @@ -847,6 +861,13 @@ color-name@^1.1.4, color-name@~1.1.4: resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== +combined-stream@^1.0.8: + version "1.0.8" + resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f" + integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg== + dependencies: + delayed-stream "~1.0.0" + comma-separated-tokens@^1.0.0: version "1.0.8" resolved "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz" @@ -948,6 +969,11 @@ defined@^1.0.0: resolved "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz" integrity sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q== +delayed-stream@~1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" + integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ== + detective@^5.2.0: version "5.2.0" resolved "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz" @@ -1532,6 +1558,11 @@ flatted@^3.1.0: resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz" integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ== +follow-redirects@^1.15.0: + version "1.15.2" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13" + integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA== + for-each@^0.3.3: version "0.3.3" resolved "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz" @@ -1539,6 +1570,15 @@ for-each@^0.3.3: dependencies: is-callable "^1.1.3" +form-data@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452" + integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww== + dependencies: + asynckit "^0.4.0" + combined-stream "^1.0.8" + mime-types "^2.1.12" + format@^0.2.0: version "0.2.2" resolved "https://registry.npmjs.org/format/-/format-0.2.2.tgz" @@ -2109,6 +2149,11 @@ lru-cache@^6.0.0: dependencies: yallist "^4.0.0" +luxon@^1.21.3: + version "1.28.1" + resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.28.1.tgz#528cdf3624a54506d710290a2341aa8e6e6c61b0" + integrity sha512-gYHAa180mKrNIUJCbwpmD0aTu9kV0dREDrwNnuyFAsO1Wt0EVYSZelPnJlbj9HplzXX/YWXHFTL45kvZ53M0pw== + markdown-to-jsx@^7.1.6: version "7.1.6" resolved "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.1.6.tgz" @@ -2127,6 +2172,18 @@ micromatch@^4.0.4: braces "^3.0.2" picomatch "^2.3.1" +mime-db@1.52.0: + version "1.52.0" + resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70" + integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg== + +mime-types@^2.1.12: + version "2.1.35" + resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a" + integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw== + dependencies: + mime-db "1.52.0" + minimatch@^3.0.4, minimatch@^3.1.2: version "3.1.2" resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz" @@ -2139,6 +2196,18 @@ minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.6: resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz" integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA== +moment-timezone@^0.5.31: + version "0.5.43" + resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.43.tgz#3dd7f3d0c67f78c23cd1906b9b2137a09b3c4790" + integrity sha512-72j3aNyuIsDxdF1i7CEgV2FfxM1r6aaqJyLB2vwb33mXYyoyLly+F1zbWqhA3/bVIoJ4szlUoMbUnVdid32NUQ== + dependencies: + moment "^2.29.4" + +moment@2.29.4, moment@^2.29.4: + version "2.29.4" + resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108" + integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w== + ms@2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz" @@ -2187,6 +2256,16 @@ next@12.1.0: "@next/swc-win32-ia32-msvc" "12.1.0" "@next/swc-win32-x64-msvc" "12.1.0" +node-ical@0.16.1: + version "0.16.1" + resolved "https://registry.yarnpkg.com/node-ical/-/node-ical-0.16.1.tgz#1d0de8548124d87b35cb8d07a6924c018d152543" + integrity sha512-AAlJbvyRlQ5QT3LtYAvveY/gZlvHAIjHR/suQp1YVX/RySCxI/qZcyauRDKv2QSH0zNG0J8iv5T1gv6FadoETA== + dependencies: + axios "1.4.0" + moment-timezone "^0.5.31" + rrule "2.6.4" + uuid "^9.0.0" + node-releases@^2.0.2: version "2.0.10" resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz" @@ -2468,6 +2547,11 @@ property-information@^5.0.0: dependencies: xtend "^4.0.0" +proxy-from-env@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2" + integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg== + punycode@^2.1.0: version "2.3.0" resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz" @@ -2597,6 +2681,15 @@ rimraf@^3.0.2: dependencies: glob "^7.1.3" +rrule@2.6.4: + version "2.6.4" + resolved "https://registry.yarnpkg.com/rrule/-/rrule-2.6.4.tgz#7f4f31fda12bc7249bb176c891109a9bc448e035" + integrity sha512-sLdnh4lmjUqq8liFiOUXD5kWp/FcnbDLPwq5YAc/RrN6120XOPb86Ae5zxF7ttBVq8O3LxjjORMEit1baluahA== + dependencies: + tslib "^1.10.0" + optionalDependencies: + luxon "^1.21.3" + run-parallel@^1.1.9: version "1.2.0" resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz" @@ -2878,7 +2971,7 @@ tsconfig-paths@^3.14.1: minimist "^1.2.6" strip-bom "^3.0.0" -tslib@^1.8.1: +tslib@^1.10.0, tslib@^1.8.1: version "1.14.1" resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== @@ -2950,6 +3043,11 @@ util-deprecate@^1.0.2: resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz" integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw== +uuid@^9.0.0: + version "9.0.0" + resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5" + integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg== + v8-compile-cache@^2.0.3: version "2.3.0" resolved "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz" From 748b8ea72e1ebab6fe6b265452b2c83fe1f98b82 Mon Sep 17 00:00:00 2001 From: OlliesWorld Date: Wed, 16 Aug 2023 12:09:00 -0600 Subject: [PATCH 2/4] add layout and config files with images --- components/Headlines.tsx | 10 +- components/JsonEditor.tsx | 2 +- components/Layout.tsx | 544 ++++++++++-------- components/Sidebar.tsx | 58 ++ components/SiteLayout.tsx | 14 + components/StyledMarkdown.tsx | 16 +- context.ts | 2 +- next.config.js | 8 - pages/[slug].page.tsx | 20 +- pages/_app.page.tsx | 4 +- pages/_document.page.tsx | 2 +- pages/index.page.tsx | 349 ++++++----- public/icons/book.svg | 4 + public/icons/clipboard.svg | 4 + public/icons/compass.svg | 4 + public/icons/eye.svg | 4 + .../img/home-page/community-illustration.svg | 104 ++++ public/img/home-page/community.svg | 109 ++++ public/img/home-page/cover-1.jpeg | Bin 0 -> 38896 bytes public/img/home-page/cover-2.jpeg | Bin 0 -> 37247 bytes public/img/home-page/slack-json-schema.png | Bin 0 -> 30109 bytes public/img/logos/Postman_logo-grey.svg | 9 + public/img/logos/algolia-logo-white.png | Bin 0 -> 1855 bytes public/img/logos/github_logo-white.svg | 3 + public/img/logos/globe-white.svg | 12 + public/img/logos/icons8-linkedin-2.svg | 1 + public/img/logos/icons8-youtube.svg | 1 + public/img/logos/logo-blue.svg | 16 + public/img/logos/logo-white.svg | 16 + public/img/logos/netlify-white-logo.png | Bin 0 -> 39020 bytes ...penjs_foundation-logo-horizontal-white.svg | 26 + public/img/logos/orbit-logo-white.png | Bin 0 -> 13686 bytes public/img/logos/postman_logo-white.svg | 18 + public/img/logos/slack.svg | 29 - public/img/logos/slack_logo_small-white.svg | 17 + public/img/logos/speaker-white.svg | 11 + .../logos/sponsors/Postman_logo-orange.svg | 9 + public/img/logos/sponsors/airbnb-logo.svg | 31 + public/img/logos/sponsors/apideck-logo.png | Bin 0 -> 20425 bytes .../img/logos/sponsors/asyncapi-logo-dark.svg | 55 ++ public/img/logos/sponsors/retool-logo.svg | 37 ++ public/img/logos/sponsors/stoplight-logo.svg | 1 + public/img/logos/supported/netlify-logo.png | Bin 0 -> 39030 bytes .../img/logos/supported/orbit-logo-color.png | Bin 0 -> 2289 bytes public/img/logos/supported/slack-logo.svg | 1 + public/img/logos/toast_logo-white.svg | 13 + public/img/logos/toast_logo.svg | 7 + public/img/logos/twitter_logo-white.svg | 10 + public/img/logos/usedby/github-white.png | Bin 0 -> 17305 bytes public/img/logos/usedby/microsoft-white.png | Bin 0 -> 30220 bytes public/img/logos/usedby/postman-white.png | Bin 0 -> 4824 bytes public/img/logos/usedby/zapier-logo_white.png | Bin 0 -> 6549 bytes public/img/what-is-json-schema.png | Bin 112963 -> 0 bytes styles/globals.css | 157 ++++- tailwind.config.js | 49 +- 55 files changed, 1304 insertions(+), 483 deletions(-) create mode 100644 components/Sidebar.tsx create mode 100644 components/SiteLayout.tsx create mode 100644 public/icons/book.svg create mode 100644 public/icons/clipboard.svg create mode 100644 public/icons/compass.svg create mode 100644 public/icons/eye.svg create mode 100644 public/img/home-page/community-illustration.svg create mode 100644 public/img/home-page/community.svg create mode 100644 public/img/home-page/cover-1.jpeg create mode 100644 public/img/home-page/cover-2.jpeg create mode 100644 public/img/home-page/slack-json-schema.png create mode 100644 public/img/logos/Postman_logo-grey.svg create mode 100644 public/img/logos/algolia-logo-white.png create mode 100644 public/img/logos/github_logo-white.svg create mode 100644 public/img/logos/globe-white.svg create mode 100644 public/img/logos/icons8-linkedin-2.svg create mode 100644 public/img/logos/icons8-youtube.svg create mode 100644 public/img/logos/logo-blue.svg create mode 100644 public/img/logos/logo-white.svg create mode 100644 public/img/logos/netlify-white-logo.png create mode 100644 public/img/logos/openjs_foundation-logo-horizontal-white.svg create mode 100644 public/img/logos/orbit-logo-white.png create mode 100644 public/img/logos/postman_logo-white.svg delete mode 100644 public/img/logos/slack.svg create mode 100644 public/img/logos/slack_logo_small-white.svg create mode 100644 public/img/logos/speaker-white.svg create mode 100644 public/img/logos/sponsors/Postman_logo-orange.svg create mode 100644 public/img/logos/sponsors/airbnb-logo.svg create mode 100644 public/img/logos/sponsors/apideck-logo.png create mode 100644 public/img/logos/sponsors/asyncapi-logo-dark.svg create mode 100644 public/img/logos/sponsors/retool-logo.svg create mode 100644 public/img/logos/sponsors/stoplight-logo.svg create mode 100644 public/img/logos/supported/netlify-logo.png create mode 100644 public/img/logos/supported/orbit-logo-color.png create mode 100644 public/img/logos/supported/slack-logo.svg create mode 100644 public/img/logos/toast_logo-white.svg create mode 100644 public/img/logos/toast_logo.svg create mode 100644 public/img/logos/twitter_logo-white.svg create mode 100644 public/img/logos/usedby/github-white.png create mode 100644 public/img/logos/usedby/microsoft-white.png create mode 100644 public/img/logos/usedby/postman-white.png create mode 100644 public/img/logos/usedby/zapier-logo_white.png delete mode 100644 public/img/what-is-json-schema.png diff --git a/components/Headlines.tsx b/components/Headlines.tsx index 3352cb0df..65ea052c6 100644 --- a/components/Headlines.tsx +++ b/components/Headlines.tsx @@ -53,14 +53,14 @@ const filterFragment = (children: string | React.ReactNode[]) => { type TagProps = { children: React.ReactNode, attributes: Record } const Headline1Tag = ({ children, attributes }: TagProps) => ( -

{children}

+

{children}

) const Headline2Tag = ({ children, attributes }: TagProps) => ( -

{children}

+

{children}

) const Headline3Tag = ({ children, attributes }: TagProps) => ( -

{children}

+

{children}

) const Headline4Tag = ({ children, attributes }: TagProps) => ( -

{children}

-) +

{children}

+) \ No newline at end of file diff --git a/components/JsonEditor.tsx b/components/JsonEditor.tsx index 13fce33ab..841134bb2 100644 --- a/components/JsonEditor.tsx +++ b/components/JsonEditor.tsx @@ -246,7 +246,7 @@ export default function JsonEditor ({ initialCode }: { initialCode: string }) { if (!link) return router.push(link) }} - className={classnames('p-b-2', textStyles)} + className={classnames('pb-2', textStyles)} title={leaf.syntaxPart?.type} {...attributes} >{children} diff --git a/components/Layout.tsx b/components/Layout.tsx index 629117582..1c15a608b 100644 --- a/components/Layout.tsx +++ b/components/Layout.tsx @@ -1,4 +1,4 @@ -import React, { useContext } from 'react' +import React, { useContext, useState } from 'react' import Head from 'next/head' import Link from 'next/link' import classnames from 'classnames' @@ -7,6 +7,8 @@ import { DocSearch } from '@docsearch/react' import { HOST } from '~/lib/config' import useStore from '~/store' import { SectionContext } from '~/context' +// import { SidebarData } from './SidebarData' + type Props = { children: React.ReactNode @@ -19,6 +21,7 @@ type Props = { const responsiveClasses = 'w-screen' export default function Layout({ children, mainClassName, metaTitle, whiteBg, hideAds }: Props) { + const showMobileNav = useStore(s => s.overlayNavigation === 'docs') const router = useRouter() React.useEffect(() => useStore.setState({ overlayNavigation: null }), [router.asPath]) @@ -29,246 +32,335 @@ export default function Layout({ children, mainClassName, metaTitle, whiteBg, hi JSON Schema {metaTitle ? ` - ${metaTitle}` : ''} + +
+
+
+
+ + +
+
-
-
-
- -
- -
- -
-
- {!hideAds && ( -
-