Skip to content

Commit 6fd8f96

Browse files
benjagmbenjagm
authored
Merge pull request #61 from json-schema-org/cleanup-new-layout
new branch with the clean up of nav, buttons and others
2 parents 47af649 + be3973c commit 6fd8f96

17 files changed

+1740
-1632
lines changed

‎components/Layout.tsx

+50-215
Large diffs are not rendered by default.

‎components/Sidebar.tsx

+235-25
Large diffs are not rendered by default.

‎components/SiteLayout.tsx

+8-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
import Layout from '../components/Layout'
22
import React from 'react'
33

4-
export const SiteLayout = ({ children }: { children: React.ReactNode}): JSX.Element => {
4+
type SiteLayoutProps = {
5+
children: React.ReactNode
6+
isDropdown?: boolean
7+
}
8+
9+
export const SiteLayout: React.FC<SiteLayoutProps> = ({ children }): JSX.Element => {
510
return (
6-
<Layout>
11+
<Layout >
712
{children}
813
</Layout>
914
)
1015
}
1116

1217
export const getLayout = (page: React.ReactNode): JSX.Element => {
1318
return <SiteLayout >{page}</SiteLayout>
14-
}
19+
}

‎components/StyledMarkdown.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -382,7 +382,7 @@ export function TableOfContentMarkdown ({ markdown, depth = 2 }: { markdown: str
382382
)
383383
}
384384
} : { component: () => null },
385-
...hiddenElements('strong', 'p', 'a', 'ul', 'table', 'code', 'pre', 'blockquote', 'span', 'div', 'figure', 'Bigquote'),
385+
...hiddenElements('strong', 'p', 'a', 'ul', 'li', 'table', 'code', 'pre', 'blockquote', 'span', 'div', 'figure', 'Bigquote'),
386386
}
387387
}}
388388
>

‎next.config.js

+1-9
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,7 @@
11
/** @type {import('next').NextConfig} */
22
const nextConfig = {
33
reactStrictMode: true,
4-
pageExtensions: ['page.tsx'],
5-
async redirects () {
6-
return [{
7-
source: '/slack',
8-
destination: 'https://json-schema.slack.com/join/shared_invite/zt-1tc77c02b-z~UiKXqpM2gHchClKbUoXw#/shared-invite/email',
9-
permanent: false,
10-
basePath: false,
11-
}]
12-
}
4+
pageExtensions: ['page.tsx']
135
}
146

157
module.exports = nextConfig

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@
1111
"lint-fix": "eslint . --ext .tsx --ext .ts --fix --max-warnings 0",
1212
"ts": "tsc --noEmit"
1313
},
14+
"engines": {
15+
"node": "16.0.0"
16+
},
1417
"dependencies": {
1518
"@docsearch/react": "3.3.3",
1619
"@types/js-yaml": "^4.0.5",

‎pages/blog/index.page.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,8 @@ export default function StaticMarkdownPage({ blogPosts }: { blogPosts: any[] })
5555
const setOfTags: any[] = blogPosts.map((tag) => tag.frontmatter.type)
5656
const spreadTags: any[] = [...setOfTags]
5757
const allTags = [...new Set(spreadTags)]
58-
58+
//add tag for all
59+
allTags.unshift('All')
5960
const [filterTag, setFilterTag] = useState('')
6061
const handleClick = (event: { currentTarget: { value: any } }) => {
6162
const clickedTag = event.currentTarget.value
@@ -132,6 +133,7 @@ export default function StaticMarkdownPage({ blogPosts }: { blogPosts: any[] })
132133
}).filter(
133134
post => {
134135
if (post.frontmatter.type === filterTag) return true
136+
else if (filterTag === 'All') return true
135137
else if (filterTag === '') return true
136138
}
137139
)

‎pages/blog/posts/[slug].page.tsx

+8-9
Original file line numberDiff line numberDiff line change
@@ -21,18 +21,17 @@ export default function StaticMarkdownPage ({ frontmatter, content }: { frontmat
2121
<Head>
2222
<title>{frontmatter.title}</title>
2323
</Head>
24-
<div className='flex flex-col py-12'>
24+
<div className='flex flex-col pt-6'>
2525
{frontmatter.date && (
26-
<div className='text-center text-sm text-slate-500'>
26+
<div className='text-center text-sm text-slate-500 mt-16'>
2727
{date.toLocaleDateString('en-us', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })} &middot; {timeToRead} min read
2828
</div>
2929
)}
3030
<Headline1 attributes={{ className: 'text-center' }}>{frontmatter.title || 'NO TITLE!'}</Headline1>
3131
</div>
32-
3332
<div className='relative flex flex-col lg:flex-row'>
34-
<div className='flex lg:w-1/4 pr-4 pr-8'>
35-
<div className='block -mt-4 w-full'>
33+
<div className='flex pr-4 ml-10 lg:w-1/4'>
34+
<div className='block -mt-2 w-full'>
3635
<div className='sticky top-0 overflow-y-auto h-auto pt-4 w-full w-full items-center lg:items-start flex justify-between flex-row lg:flex-col'>
3736
<Link href='/blog'>
3837
<a className='font-semibold text-sm pb-0 lg:pb-5 text-slate-700 hover:text-slate-800 inline-flex flex-row items-center'>
@@ -42,7 +41,7 @@ export default function StaticMarkdownPage ({ frontmatter, content }: { frontmat
4241
<div className='pt-6 lg:border-t border-slate-100 pr-4 border-none lg:border-r border-slate-100'>
4342
{(frontmatter.authors || []).map((author: any, index: number) => {
4443
return (
45-
<div key={index} className='flex flex-row items-center mb-3'>
44+
<div key={index} className='flex flex-row items-center mb-3 w-full'>
4645
<div
4746
className='bg-slate-50 h-[44px] w-[44px] rounded-full mr-3 bg-cover bg-center'
4847
style={{ backgroundImage: `url(${author.photo})` }}
@@ -59,15 +58,15 @@ export default function StaticMarkdownPage ({ frontmatter, content }: { frontmat
5958
)
6059
})}
6160
</div>
62-
<div className='pt-12 pr-4 border-r border-slate-100 hidden lg:block'>
61+
<div className='pt-12 pr-4 border-r border-slate-100 hidden lg:block w-full'>
6362
<div className='uppercase text-xs text-slate-400 mb-4'>on this page</div>
64-
<TableOfContentMarkdown markdown={content} />
63+
<TableOfContentMarkdown markdown={content} depth={0} />
6564
</div>
6665
</div>
6766
</div>
6867

6968
</div>
70-
<div className='flex-1'>
69+
<div className='flex-1 mr-4 ml-4 lg:w-3/4'>
7170
<div
7271
className='bg-slate-50 h-[400px] w-full rounded-lg mr-3 bg-cover mb-10 bg-center'
7372
style={{ backgroundImage: `url(${frontmatter.cover})` }}

‎pages/blog/posts/the-last-breaking-change.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: "The Last Breaking Change"
3-
date: "2023-02-22"
3+
date: "2023-02-23"
44
tags:
55
- Specification
66
type: Engineering

‎pages/implementations/index.page.tsx

+11-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { getLayout } from '~/components/Sidebar'
2+
import { getLayout } from '~/components/SiteLayout'
33
import fs from 'fs'
44
import matter from 'gray-matter'
55
import StyledMarkdown from '~/components/StyledMarkdown'
@@ -39,12 +39,14 @@ type ImplementationByLanguage = { name: string }
3939
export default function ImplementationsPages ({ blocks, validators, hyperLibaries }: { blocks: any, validators: ImplementationByLanguage[], hyperLibaries: ImplementationByLanguage[] }) {
4040
return (
4141
<SectionContext.Provider value='implementations'>
42-
<Headline1>Implementations</Headline1>
43-
<StyledMarkdown markdown={blocks.intro} />
44-
<Headline2>Validators</Headline2>
45-
<ImplementationTable implementationsByLanguage={validators} prefix='validators-' />
46-
<StyledMarkdown markdown={blocks.main} />
47-
<ImplementationTable implementationsByLanguage={hyperLibaries} prefix='hyper-libaries-' />
42+
<div className='w-5/6 mx-auto mt-12'>
43+
<Headline1>Implementations</Headline1>
44+
<StyledMarkdown markdown={blocks.intro} />
45+
<Headline2>Validators</Headline2>
46+
<ImplementationTable implementationsByLanguage={validators} prefix='validators-' />
47+
<StyledMarkdown markdown={blocks.main} />
48+
<ImplementationTable implementationsByLanguage={hyperLibaries} prefix='hyper-libaries-' />
49+
</div>
4850
</SectionContext.Provider>
4951
)
5052
}
@@ -110,15 +112,15 @@ function ImplementationTable ({ implementationsByLanguage, prefix }: { implement
110112
]
111113
return (
112114
<tr key={index}
113-
className='pl-4 list-disc list-inside pl-2'
115+
className='pl-4 list-disc list-inside pl-2 separation-line'
114116
>
115117
<td className=''>
116118
<a className='text-blue-500' href={implementation.url}>{implementation.name}</a>
117119
</td>
118120
<td className='pl-6'>
119121
<StyledMarkdown markdown={implementation.notes} />
120122
</td>
121-
<td className='pl-6 pb-2'>
123+
<td className='pl-6 pb-2 pt-2'>
122124
{allDrafts
123125
?.sort((a, b) => DRAFT_ORDER.indexOf(a) < DRAFT_ORDER.indexOf(b) ? -1 : 1)
124126
?.map((draft: string | number) => (

‎pages/index.page.tsx

+28-22
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,6 @@ import { GetStaticProps } from 'next'
1515
import axios from 'axios'
1616
import ical from 'node-ical'
1717
import moment from 'moment'
18-
// import dayjs from 'dayjs'
19-
// import localizedFormat from 'dayjs/plugin/localizedFormat'
20-
// import isBetween from 'dayjs/plugin/isBetween'
2118

2219
/* eslint-enable */
2320
export const getStaticProps: GetStaticProps = async () => {
@@ -68,8 +65,6 @@ export const getStaticProps: GetStaticProps = async () => {
6865
}
6966
// Function to filter and print events for the next 4 weeks from today
7067
function printEventsForNextFourWeeks(icalData: { [x: string]: any }) {
71-
// dayjs.extend(localizedFormat)
72-
// dayjs.extend(isBetween)
7368
const arrayDates = []
7469
if (!icalData) {
7570
console.error('iCal data is empty or invalid.')
@@ -79,6 +74,8 @@ function printEventsForNextFourWeeks(icalData: { [x: string]: any }) {
7974
// Calculate the range of dates for the next 4 weeks from today
8075
const today = moment().startOf('day')
8176
const nextFourWeeksEnd = moment().add(4, 'weeks').endOf('day')
77+
78+
8279

8380
// Loop through the events in the iCal data
8481
for (const k in icalData) {
@@ -89,7 +86,7 @@ function printEventsForNextFourWeeks(icalData: { [x: string]: any }) {
8986

9087
// Get the timezone of the event
9188
const timezone = event.tz || 'UTC' // Default to UTC if timezone information is not provided
92-
89+
9390
// Complicated case - if an RRULE exists, handle multiple recurrences of the event.
9491
if (event.rrule !== undefined) {
9592
// For recurring events, get the set of event start dates that fall within the range
@@ -114,13 +111,23 @@ function printEventsForNextFourWeeks(icalData: { [x: string]: any }) {
114111
}
115112
}
116113
}
114+
else {
115+
// Simple case - no recurrences, just print out the calendar event.
116+
if (startDate.isBetween(today, nextFourWeeksEnd, undefined, '[]')) {
117+
const time = startDate.format('MMMM Do YYYY, h:mm a')
118+
const day = startDate.format('D')
119+
arrayDates.push({ title, time, day, timezone })
120+
}
121+
}
117122
}
118123
}
124+
125+
arrayDates.sort((x, y) => +new Date(x.time) - +new Date(y.time))
126+
119127
return arrayDates
120128
}
121129
const Home = (props: any) => {
122130
const blogPosts = props.blogPosts
123-
// console.log('anything', props.datesInfo)
124131
const timeToRead = Math.ceil(readingTime(blogPosts[0].content).minutes)
125132

126133
return (
@@ -148,16 +155,16 @@ const Home = (props: any) => {
148155
</div>
149156
</div>
150157

151-
<div className='mb-16 md:mb-36 mx-auto w-2/3 md:w-5/6 lg:w-full'>
158+
<div className='mb-16 md:mb-36 mx-auto w-full md:w-5/6 lg:w-full'>
152159
<h3 className='text-white text-xl mb-4'>Used by</h3>
153160

154-
<div className='grid md:grid-cols-2 lg:grid-cols-4 gap-6 mx-auto items-center w-1/2 md:w-100'>
161+
<div className='grid md:grid-cols-2 lg:grid-cols-4 gap-6 mx-auto items-center w-1/3 md:w-100'>
155162
<img src='/img/logos/usedby/zapier-logo_white.png' className='w-40 mr-4' />
156163
<img src='/img/logos/usedby/microsoft-white.png' className='w-40 mr-4' />
157164
<img src='/img/logos/usedby/postman-white.png' className='w-40 mr-4' />
158165
<img src='/img/logos/usedby/github-white.png' className='w-40' />
159166
</div>
160-
<p className='text-white my-8'>More than 200 implementations generating over 100 million weekly downloads</p>
167+
<p className='text-white mx-4 my-8'>More than 200 implementations generating over 100 million weekly downloads</p>
161168
</div>
162169
</div>
163170
</section>
@@ -211,16 +218,16 @@ const Home = (props: any) => {
211218
<section className='lg:my-12 max-w-[1400px]'>
212219
<div className='mb-12 md:w-3/4 mx-auto text-center'>
213220
<h2 className='text-h3mobile md:text-h3 font-semibold mb-2'>Welcome to the JSON Schema Community</h2>
214-
<p className='mx-4 md:w-3/4 md:mx-auto lg:text-h5'>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.
221+
<p className='mx-6 md:w-3/4 md:mx-auto lg:text-h5'>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.
215222
</p>
216223
</div>
217-
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12 mx-auto w-5/6'>
224+
<div className='grid grid-cols-1 lg:grid-cols-3 gap-6 mb-12 mx-auto w-5/6 md:w-3/5 lg:w-5/6'>
218225
<div className='w-full mb-6'>
219226
<h3 className='mb-4 font-semibold' >Join the JSON Schema Community Slack!</h3>
220227
<img src='/img/home-page/slack-json-schema.png' className='w-full mb-4' />
221228
{/* <h3 className='mb-4 font-semibold' >Event</h3> */}
222229
<p className='mb-4'>Join our Slack to ask questions, get feedback on your projects, and connect with +5000 practitioners and experts.</p>
223-
<button className='w-full lg:w-1/2 rounded border-2 bg-primary text-white h-[40px] '><a href='https://json-schema.org/slack'>Join us</a></button>
230+
<button className='w-full lg:w-1/2 rounded border-2 bg-primary text-white h-[40px] '><a href='https://json-schema.slack.com/join/shared_invite/zt-1ywpdj4yd-bXiBLjYEbKWUjzon0qiY9Q#/shared-invite/email'>Join us</a></button>
224231
</div>
225232
{/* BlogPost Data */}
226233
<div className='w-full '>
@@ -247,7 +254,7 @@ const Home = (props: any) => {
247254
</Link>
248255
</div>
249256
</div>
250-
<div className=' '>
257+
<div>
251258
<div className='md:w-full mb-6 mr-4'>
252259
<h3 className='mb-2 font-semibold' >JSON Schema Community Meetings & Events</h3>
253260
<p className='mb-4'>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.
@@ -258,7 +265,7 @@ const Home = (props: any) => {
258265
>Office Hours</a></button>
259266
</div>
260267
</div>
261-
<div>
268+
<div >
262269
<div>
263270
<Headline4 >
264271
Upcoming events
@@ -273,7 +280,7 @@ const Home = (props: any) => {
273280
</p>
274281
<div>
275282
<p className=''>{event.title}</p>
276-
<p>{event.time}</p>
283+
<p>{event.time} {event.timezone}</p>
277284
</div>
278285
</div>
279286
</li>
@@ -320,12 +327,11 @@ const Home = (props: any) => {
320327
<section className='my-20'>
321328
<div className='text-center mb-12'>
322329
<h2 className='text-h3mobile md:text-h3 font-semibold mb-4'>Supported by</h2>
323-
<p className='w-1/2 mx-auto'>The following companies support us by letting us use their products. <a href='mailto:[email protected]' className='border-b border-black'>Email us</a> for more info.</p>
330+
<p className='px-4 md:w-1/2 mx-auto'>The following companies support us by letting us use their products.<br /><a href='mailto:[email protected]' className='border-b border-black'>Email us</a> for more info.</p>
324331
</div>
325-
<div className='grid grid-cols-2 md:gap-24 items-center mx-auto w-3/4 md:w-3/5 lg:w-1/2'>
326-
<a href='https://orbit.love/' className='w-44'><img src='/img/logos/supported/orbit-logo-color.png' /></a>
327-
<a href='https://json-schema.org/slack' className='w-44'><img src='/img/logos/supported/slack-logo.svg' /></a>
328-
332+
<div className='flex justify-center items-center'>
333+
<a href='https://orbit.love/' ><img src='/img/logos/supported/orbit-logo-color.png' className='w-44 mr-8' /></a>
334+
<a href='https://json-schema.slack.com/join/shared_invite/zt-1ywpdj4yd-bXiBLjYEbKWUjzon0qiY9Q#/shared-invite/email' ><img src='/img/logos/supported/slack-logo.svg' className='w-44 ml-8' /></a>
329335
</div>
330336
</section>
331337
</div>
@@ -334,4 +340,4 @@ const Home = (props: any) => {
334340
}
335341

336342
export default Home
337-
Home.getLayout = getLayout
343+
Home.getLayout = getLayout

0 commit comments

Comments
 (0)