From b87b1132304a4230909959d98fdace0aef671231 Mon Sep 17 00:00:00 2001 From: Tamanna Date: Fri, 1 Mar 2024 22:38:52 +0530 Subject: [PATCH 1/6] Fixed Community Link navigation --- styles/globals.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/globals.css b/styles/globals.css index 29c12d6ea..5003c2826 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -185,6 +185,6 @@ border-radius: 4px; */ .anchor #community { position: absolute; left: 0; - top: -80px; + top: 35px; /* change this value to match the height of the header */ } \ No newline at end of file From 790d4adfe3580cb365da93c8655504b11b7711bb Mon Sep 17 00:00:00 2001 From: Tamanna Date: Sun, 3 Mar 2024 16:40:49 +0530 Subject: [PATCH 2/6] updated UI of blog-page --- pages/blog/index.page.tsx | 294 ++++++++++++++------------------------ 1 file changed, 110 insertions(+), 184 deletions(-) diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx index 933dc690b..a070da0d7 100644 --- a/pages/blog/index.page.tsx +++ b/pages/blog/index.page.tsx @@ -1,78 +1,56 @@ -import React, { useState, useEffect } from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; -import fs from 'fs'; -import { getLayout } from '~/components/SiteLayout'; -import matter from 'gray-matter'; -import readingTime from 'reading-time'; -const PATH = 'pages/blog/posts'; -import TextTruncate from 'react-text-truncate'; -import generateRssFeed from './generateRssFeed'; -import { useRouter } from 'next/router'; -import useSetUrlParam from '~/lib/useSetUrlParam'; -import { SectionContext } from '~/context'; - -export type blogCategories = - | 'All' - | 'Community' - | 'Case Study' - | 'Engineering' - | 'Update' - | 'Opinion'; - -export async function getStaticProps({ query }: { query: any }) { - const files = fs.readdirSync(PATH); +import React, { useState, useEffect } from 'react' +import Head from 'next/head' +import Link from 'next/link' +import fs from 'fs' +import { getLayout } from '~/components/SiteLayout' +import matter from 'gray-matter' +import readingTime from 'reading-time' +const PATH = 'pages/blog/posts' +import TextTruncate from 'react-text-truncate' +import generateRssFeed from './generateRssFeed' +import { useRouter } from 'next/router' +import useSetUrlParam from '~/lib/useSetUrlParam' +import { SectionContext } from '~/context' + +export type blogCategories = 'All' | 'Community' | 'Case Study' | 'Engineering' | 'Update' | 'Opinion' + +export async function getStaticProps({ params, query} : { + params: string, query: any +}) { + const files = fs.readdirSync(PATH) const blogPosts = files - .filter((file) => file.substr(-3) === '.md') + .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 { + 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, - }; - }); + content + }) + }) - await generateRssFeed(blogPosts); + await generateRssFeed(blogPosts) const filterTag: string = query?.type || 'All'; return { props: { blogPosts, - filterTag, - }, - }; + filterTag + } + } } function isValidCategory(category: any): category is blogCategories { - return [ - 'All', - 'Community', - 'Case Study', - 'Engineering', - 'Update', - 'Opinion', - ].includes(category); + return ['All', 'Community', 'Case Study', 'Engineering', 'Update', 'Opinion'].includes(category); } -export default function StaticMarkdownPage({ - blogPosts, - filterTag, -}: { - blogPosts: any[]; - filterTag: any; -}) { - const router = useRouter(); - const setParam = useSetUrlParam(); - const [currentFilterTag, setCurrentFilterTag] = useState( - filterTag || 'All', - ); +export default function StaticMarkdownPage({ blogPosts, filterTag }: { blogPosts: any[], filterTag: any }) { + const router = useRouter() + const setParam = useSetUrlParam() + const [currentFilterTag, setCurrentFilterTag] = useState(filterTag ||'All') useEffect(() => { const { query } = router; @@ -86,40 +64,37 @@ export default function StaticMarkdownPage({ setCurrentFilterTag(filterTag); }, [filterTag]); - const handleClick = (event: { currentTarget: { value: any } }) => { - const clickedTag = event.currentTarget.value; + const handleClick = (event: { currentTarget: { value: any }}) => { + const clickedTag = event.currentTarget.value setCurrentFilterTag(clickedTag); // Check if the user is already on the "/blog" page - if (router.pathname === '/blog') { + if (router.pathname === "/blog") { if (router.query.type) { // Remove the 'type' query parameter from the URL - setParam('type', null); + setParam('type', null) } - setCurrentFilterTag(clickedTag); - } else { + setCurrentFilterTag(clickedTag) + } + else { // If not on the "/blog" page, navigate to the "/blog" page with the type tag as a query parameter - router.replace( - { pathname: '/blog', query: { type: clickedTag } }, - undefined, - { shallow: true }, - ); + router.replace({ pathname: '/blog', query: { type: clickedTag } }, undefined, { shallow: true }); } }; 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 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)] //add tag for all - allTags.unshift('All'); + allTags.unshift('All') return ( // @ts-ignore @@ -129,8 +104,8 @@ export default function StaticMarkdownPage({
{recentBlog[0] && ( -
-
+
+
-
+
{recentBlog[0].frontmatter.type}
-

+

{recentBlog[0].frontmatter.title}

-
-
-

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

+
+

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

- {recentBlog[0].frontmatter.date} · {timeToRead}{' '} - min read + {recentBlog[0].frontmatter.date} · {timeToRead} min read
@@ -169,80 +138,51 @@ export default function StaticMarkdownPage({
)}
+
-

- Welcome to the JSON Schema Blog! -

+

Welcome to the JSON Schema Blog!

-

- Want to publish a blog post? Check out the  - - guidelines - -  and submit yours! -

+

Want to publish a blog post? Check out the guidelines and submit yours!

{/* Filter Buttons */} -
- {allTags.map((tag) => ( - - ))} - - Filter blog posts by category... - -
+
{allTags.map((tag) => ( + + ))}Filter blog posts by category...
{/* filterTag === frontmatter.type && */}
{blogPosts - .filter((post) => { - if (!currentFilterTag || currentFilterTag === 'All') return true; - const blogType = post.frontmatter.type as string | undefined; - if (!blogType) return false; - return blogType.toLowerCase() === currentFilterTag.toLowerCase(); + .filter(post => { + if (!currentFilterTag || currentFilterTag === 'All') return true + const blogType = post.frontmatter.type as string | undefined + if (!blogType) return false + return blogType.toLowerCase() === currentFilterTag.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; + 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); + 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); + e.preventDefault() + e.stopPropagation() + setParam('type', frontmatter.type) }} > {frontmatter.type} @@ -265,62 +205,48 @@ export default function StaticMarkdownPage({ {frontmatter.title}
- +
- {(frontmatter.authors || []).map( - (author: any, index: number) => { - return ( -
- ); - }, - )} + {(frontmatter.authors || []).map((author: any, index: number) => { + return ( +
+ ) + })}
- {frontmatter.authors - .map((author: any) => author.name) - .join(' & ')} + {(frontmatter.authors.map((author: any) => author.name).join(' & '))}
{frontmatter.date && ( - {date.toLocaleDateString('en-us', { - year: 'numeric', - month: 'long', - day: 'numeric', - })} + {date.toLocaleDateString('en-us', { year: 'numeric', month: 'long', day: 'numeric' })} - )}{' '} - · {timeToRead} min read + )} · {timeToRead} min read
+
- ); - })} + ) + }) + }
- - ); + + ) } -StaticMarkdownPage.getLayout = getLayout; +StaticMarkdownPage.getLayout = getLayout From e1b3eb188c3cde9efa5a8c62276f4ea3dc1a7166 Mon Sep 17 00:00:00 2001 From: Tamanna Date: Mon, 4 Mar 2024 10:07:47 +0530 Subject: [PATCH 3/6] Fixed height of blog image --- pages/blog/index.page.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx index df9c0b1cc..f5af0179c 100644 --- a/pages/blog/index.page.tsx +++ b/pages/blog/index.page.tsx @@ -104,20 +104,20 @@ export default function StaticMarkdownPage({ blogPosts, filterTag }: { blogPosts
{recentBlog[0] && ( -
-
+
+
hero image example
-
+
{recentBlog[0].frontmatter.type}
-

+

{recentBlog[0].frontmatter.title}

@@ -126,7 +126,7 @@ export default function StaticMarkdownPage({ blogPosts, filterTag }: { blogPosts />

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

-
+
{recentBlog[0].frontmatter.date} · {timeToRead} min read From 4ba80f3c11eff54c3d01958ab9ec71166030f2bf Mon Sep 17 00:00:00 2001 From: Tamanna Date: Mon, 4 Mar 2024 23:09:13 +0530 Subject: [PATCH 4/6] made required changes --- pages/blog/index.page.tsx | 8 ++++---- tailwind.config.js | 3 +++ 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx index f5af0179c..298f86aec 100644 --- a/pages/blog/index.page.tsx +++ b/pages/blog/index.page.tsx @@ -105,19 +105,19 @@ export default function StaticMarkdownPage({ blogPosts, filterTag }: { blogPosts
{recentBlog[0] && (
-
+
hero image example
-
-
+
+
{recentBlog[0].frontmatter.type}
-

+

{recentBlog[0].frontmatter.title}

diff --git a/tailwind.config.js b/tailwind.config.js index d32f746b6..92e0ff48b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,6 +4,9 @@ module.exports = { './components/**/*.{js,ts,jsx,tsx,md}', ], theme: { + screens: { + 'sm1':'890px' + }, fontFamily: { 'sans': ['Inter', 'ui-sans-serif', 'system-ui'], 'serif': ['ui-serif', 'Georgia'], From 3417c78673760282cd3ab3cf0f711c6d1222dc3c Mon Sep 17 00:00:00 2001 From: Tamanna Date: Tue, 5 Mar 2024 12:49:38 +0530 Subject: [PATCH 5/6] fixed issues caused by custom screen size --- pages/blog/index.page.tsx | 4 ++-- tailwind.config.js | 17 ++++++++++++++++- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx index 298f86aec..3f526faa9 100644 --- a/pages/blog/index.page.tsx +++ b/pages/blog/index.page.tsx @@ -112,12 +112,12 @@ export default function StaticMarkdownPage({ blogPosts, filterTag }: { blogPosts alt='hero image example' />
-
+
{recentBlog[0].frontmatter.type}
-

+

{recentBlog[0].frontmatter.title}

diff --git a/tailwind.config.js b/tailwind.config.js index 92e0ff48b..00cb2c158 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -5,7 +5,22 @@ module.exports = { ], theme: { screens: { - 'sm1':'890px' + 'sm': '640px', + // => @media (min-width: 640px) { ... } + + 'md': '768px', + // => @media (min-width: 768px) { ... } + + 'lg': '1024px', + // => @media (min-width: 1024px) { ... } + + 'xl': '1280px', + // => @media (min-width: 1280px) { ... } + + '2xl': '1536px', + // => @media (min-width: 1536px) { ... } + ab1:'890px' + }, fontFamily: { 'sans': ['Inter', 'ui-sans-serif', 'system-ui'], From 8ce90beee87834a335ec91d7241bd7d6b11d330d Mon Sep 17 00:00:00 2001 From: Tamanna Date: Tue, 5 Mar 2024 12:49:58 +0530 Subject: [PATCH 6/6] css changes --- styles/globals.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/styles/globals.css b/styles/globals.css index 8e6ff5bda..a6515a0b2 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -187,3 +187,8 @@ border-radius: 4px; */ top: 35px; /* change this value to match the height of the header */ } +/* In your CSS file */ +.mt-custom { + margin-top: 4.4rem; +} +