Added Case Studies page in Overview Section #473

TamannaVerma99 · 2024-03-06T13:08:07Z

What kind of change does this PR introduce?
Added a new page in Overview section to show the case studies published in the blog. Currently, since I don't have access to the data file that has information related to blogs published, I have created a sample file of my own named casestudies.json with the same data format as mentioned in the issue and linked it to the card component. This makes the JSON file easily replaceable with the type of data we'll be using.

Issue Number:

Related to ✨ Enhancement: Page in overview section to show Case Studies #440

Does this PR introduce a breaking change?
No

benjagm

This a really great first draft TamannaVerma99 !!!

I am leaving some comments to reorganize the solution but great job so far. Remember we'll use the card component that is being in process in #433

benjagm · 2024-03-06T14:06:22Z

components/Sidebar.tsx

@@ -284,6 +286,7 @@ export const DocsNav = () => {
            label='Similar Technologies'
          />
          <DocLink uri='/overview/code-of-conduct' label='Code of Conduct' />
+          <DocLink uri='/overview/casestudies' label='Casestudies' />


Suggested change

<DocLink uri='/overview/casestudies' label='Casestudies' />

<DocLink uri='/overview/casestudies' label='Case Studies' />

benjagm · 2024-03-06T14:08:02Z

pages/overview/casestudies.md

@@ -0,0 +1,7 @@
+---


Instead of md file i think it will be better to create a tsx file this way: pages/overview/casestudies/index.page.tsx.

See an example of this type of page in the sponsors page inside overview. You can have the title and intro paragraph in a md file and later put the grid code in the tsx page. See implementations page for inspiration.

benjagm · 2024-03-06T14:11:59Z

components/CustomComponent.tsx

@@ -0,0 +1,24 @@
+import React from 'react';


Instead of a component for the whole list, we will be using a standard component created in this PR:#433

I think you are not going to need to create a component, instead use the one created by Michael-Obele in #433.

The logic to build the grid is something you will add in pages/overview/casestudies/index.page.tsx.

TamannaVerma99 · 2024-03-06T15:59:50Z

Thanks @benjagm !
I just want to reconfirm are we going to use standardized cards for this page too?As in the issue you mentioned we are not going to use standardized cards we are instead going to use them for welcome page.
I am working on other feedbacks you have given.Thanks :)

benjagm · 2024-03-06T16:14:23Z

Thanks @benjagm ! I just want to reconfirm are we going to use standardized cards for this page too?As in the issue you mentioned we are not going to use standardized cards we are instead going to use them for welcome page. I am working on other feedbacks you have given.Thanks :)

Thanks! In the initial requirements of this issue we did not speak about common card component, however I did it in this other comment of that issue. I realized that 3 people were working in a very similar problem so is better to standarize and reuse.

#433 (comment)

benjagm · 2024-03-06T17:45:09Z

Can you please change the target branch of this PR to : https://github.com/json-schema-org/website/tree/web-release-3

Reference docs: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/changing-the-base-branch-of-a-pull-request

TamannaVerma99 · 2024-03-12T11:01:06Z

Made the required changes @benjagm .
However, since I am unable to view the new web3-release-branch in my forked repo, pulling changes from that branch is a difficult affair. Also, even though the card component already exists merged in the target branch, it still shows the same as a new addition in my PR which am unable to understand. Rest, the working is completely fine.

benjagm

Amazing progress. We are really close.

Left some comments. There is extra space after the blue footer that we need to avoid. We fixed it for other pages some days ago.

Have you done a rebase to bring the changes from the new parent branch?

benjagm · 2024-03-12T11:35:46Z

data/casestudies.json

@@ -0,0 +1,59 @@
+[


Can you please build a real data set with our case studies? This is the list:
https://json-schema.org/blog?type=Case%20Study

Hey @benjagm
where do we want to direct the link we are adding in each casestudy card? According to card's implementation the link I am adding is shown as read more.
e.g if I have added homepage url in link prop of card it is showing read more and on clicking read more i am directed to home page.

where do we want to direct the link we are adding in each casestudy card?

The url will be the case study blog post.

Okay! Got it

Hey @benjagm I have some doubts regarding data set
What are we going to add at the place of logo and are we going to add complete title of blog post if yes then it will be too large because in the implementation of card title it is made by using h3 so how should I proceed with it.

We need to find the company logos and add them to the folder: https://github.com/json-schema-org/website/tree/main/public/img/logos

okay! and what about the size of card title do I need to change the card component?

Why changing the size of the card? Try to use this one and if you need to make some adjustments do it but just for the card features that you need. Remember that the card is now going to be used in 3 different pages.

For example you can change the logo size or fix a bug but not the whole card component without reason. Right?

Sorry for the confusion @benjagm
I am not asking to change the card size but the bug is related to title if I directly put title in this component it will look like this

It is because title is written with h3 size in card component.
I will definitely not change the card component directly but if there is no other way I will just make a copy of this component and make changes to that one .

In this case feel free to modify it

components/Sidebar.tsx

benjagm · 2024-03-12T11:36:49Z

components/Layout.tsx

@@ -164,7 +164,12 @@ const MainNavigation = () => {
        isActive={section === 'community'}
      />
      <div className='flex max-sm:ml-4 items-center gap-6 md:gap-4'>
-        <div className='flex justify-center rounded border-2 border-gray-100 ml-0 w-[120px] md:w-full'>
+        <div


You don't need to edit this page.

benjagm · 2024-03-12T11:38:44Z

components/Card.tsx

@@ -0,0 +1,53 @@
+import React from 'react';


Please use the Card component available in the branch and modify it if necessary.

benjagm · 2024-03-12T11:40:08Z

pages/overview/casestudies/_index.md

@@ -0,0 +1,4 @@
+../../../_includes/community/programs/casestudies/casestudies.md


Please remove this md file. Let's put all the content in the tsx page.

Working on it :)

benjagm · 2024-03-12T11:40:36Z

pages/overview/casestudies/index.page.tsx

+import { SectionContext } from '~/context';
+import data from 'data/casestudies.json';
+import Card from '~/components/Card';
+export async function getStaticProps() {


Let's not use a md file here. Let's add all the content here.

benjagm · 2024-03-12T11:41:03Z

pages/overview/casestudies/index.page.tsx

+        <title>{newTitle}</title>
+      </Head>
+      <Headline1>{newTitle}</Headline1>
+      <StyledMarkdown markdown={blocks[0]} />


It will be great to have a title and an intro paragraph. You can use the typical lorem ipsum.

Thanks for the feedback :)
I will soon implement all the points mentioned above.

TamannaVerma99 · 2024-03-14T11:50:17Z

Hey @benjagm .
Because of the issues caused in this PR since the branch was based on main instead of web-release-3.0, I have now created a new PR #540 with all the recommended changes. I would suggest closing this PR hereafter, and continuing our discussions on the other one. Thanks!

benjagm

Amazing job!!! This is ready to go to the dev branch. I pushed some code to make some adjustments with the logos but really great work.

Congrats!!!!

TamannaVerma99 · 2024-03-20T15:54:36Z

Amazing job!!! This is ready to go to the dev branch. I pushed some code to make some adjustments with the logos but really great work.

Congrats!!!!

Thanks:)

benjagm requested changes Mar 6, 2024

View reviewed changes

benjagm mentioned this pull request Mar 6, 2024

Execute the documentation strategy #158

Open

33 tasks

benjagm added this to the Docs Release 3 milestone Mar 6, 2024

TamannaVerma99 changed the base branch from main to web-release-3 March 7, 2024 14:19

benjagm requested changes Mar 12, 2024

View reviewed changes

TamannaVerma99 requested a review from a team as a code owner March 20, 2024 09:36

TamannaVerma99 and others added 12 commits March 20, 2024 10:46

updated UI of blog-page

22660a2

Added Case Studies Page

d6bf52c

fixed linting errors

94c309c

Added casestudies

944c175

changing index.page.tsx

61b9c16

Delete components/CustomComponent.tsx

aa9acca

Delete pages/overview/casestudies.md

2870661

removed unnecessary changes

0547435

removed unnecessary files

ab7bf30

fixed bug

f08b64c

removed changes

d8699b3

removed unnecessary files

66b5ef3

benjagm force-pushed the Issue-421 branch from e5d9fdd to 66b5ef3 Compare March 20, 2024 09:53

benjagm approved these changes Mar 20, 2024

View reviewed changes

Pushing last changes.

e7378cd

benjagm merged commit ee6bfdf into json-schema-org:web-release-3 Mar 20, 2024
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added Case Studies page in Overview Section #473

Added Case Studies page in Overview Section #473

TamannaVerma99 commented Mar 6, 2024

benjagm left a comment

benjagm Mar 6, 2024

benjagm Mar 6, 2024

benjagm Mar 6, 2024

TamannaVerma99 commented Mar 6, 2024

benjagm commented Mar 6, 2024

benjagm commented Mar 6, 2024

TamannaVerma99 commented Mar 12, 2024

benjagm left a comment •

edited

Loading

benjagm Mar 12, 2024

TamannaVerma99 Mar 13, 2024

benjagm Mar 13, 2024

TamannaVerma99 Mar 13, 2024

TamannaVerma99 Mar 13, 2024

benjagm Mar 13, 2024

TamannaVerma99 Mar 13, 2024

benjagm Mar 13, 2024

TamannaVerma99 Mar 13, 2024

benjagm Mar 13, 2024

benjagm Mar 12, 2024

benjagm Mar 12, 2024

benjagm Mar 12, 2024

TamannaVerma99 Mar 13, 2024

benjagm Mar 12, 2024

benjagm Mar 12, 2024

TamannaVerma99 Mar 12, 2024

TamannaVerma99 commented Mar 14, 2024

benjagm left a comment

TamannaVerma99 commented Mar 20, 2024

	<DocLink uri='/overview/casestudies' label='Casestudies' />
	<DocLink uri='/overview/casestudies' label='Case Studies' />

		@@ -0,0 +1,4 @@
		../../../_includes/community/programs/casestudies/casestudies.md

Added Case Studies page in Overview Section #473

Added Case Studies page in Overview Section #473

Conversation

TamannaVerma99 commented Mar 6, 2024

benjagm left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TamannaVerma99 commented Mar 6, 2024

benjagm commented Mar 6, 2024

benjagm commented Mar 6, 2024

TamannaVerma99 commented Mar 12, 2024

benjagm left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TamannaVerma99 commented Mar 14, 2024

benjagm left a comment

Choose a reason for hiding this comment

TamannaVerma99 commented Mar 20, 2024

benjagm left a comment •

edited

Loading