Skip to content

Commit 67f1aeb

Browse files
zeel0mmohitmalibetterbugs
zeel0m
and
mohitmalibetterbugs
authored
feat: add class-validator dependency and update page styles (#81)
- Added `class-validator` package to `package.json`. - Adjusted styles in `page.tsx` for sidebar positioning and button margin. - Refined text styles in `[slug]/page.tsx` for better readability. - Updated descriptions in `constants.tsx` for JSON tools to enhance clarity. Co-authored-by: Mohit Mali <mohit@linearloop.io>
1 parent 328cdfa commit 67f1aeb

6 files changed

Lines changed: 1039 additions & 367 deletions

File tree

‎app/[slug]/page.tsx‎

Lines changed: 196 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -355,7 +355,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
355355

356356
return (
357357
<p
358-
className="text-base mt-3 text-white/70"
358+
className="text-base mt-3"
359359
key={`about_description_${index}`}
360360
>
361361
{splitDescriptions.map(
@@ -388,7 +388,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
388388
return (
389389
<span
390390
key={`about_description_part_${index}_${subIndex}`}
391-
className={isQuoted ? "text-white" : ""}
391+
className={isQuoted ? "text-white" : "text-white/70"}
392392
>
393393
{text}
394394
</span>
@@ -462,122 +462,6 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
462462
</div>
463463
)}
464464

465-
{/* example section */}
466-
{development_tool_example && (
467-
<div className="mt-8">
468-
{development_tool_example?.example_title && (
469-
<h4 className="text-2xl font-semibold text-white mb-2">
470-
{development_tool_example?.example_title}
471-
</h4>
472-
)}
473-
{development_tool_example?.example_description && (
474-
<p className="text-white/70 text-base mt-2">
475-
{development_tool_example?.example_description}
476-
</p>
477-
)}
478-
479-
{development_tool_example?.example_input && (
480-
<div className="mt-4">
481-
{development_tool_example?.example_input?.title && (
482-
<p className="text-white text-base font-medium mb-2">
483-
{development_tool_example?.example_input?.title}
484-
</p>
485-
)}
486-
{development_tool_example?.example_input?.json_data && (
487-
<pre className={`${DevelopmentToolsStyles.modernScrollbar} bg-[#1a1a1a] border border-white/10 rounded-lg p-4 mt-2`}>
488-
<code className="text-white/90 text-sm whitespace-pre">
489-
{development_tool_example?.example_input?.json_data}
490-
</code>
491-
</pre>
492-
)}
493-
</div>
494-
)}
495-
496-
{development_tool_example?.example_outputs && (
497-
<div className="mt-6">
498-
{development_tool_example?.example_outputs?.intro && (
499-
<p className="text-white/70 text-base mb-4">
500-
{development_tool_example?.example_outputs?.intro}
501-
</p>
502-
)}
503-
{development_tool_example?.example_outputs?.outputs?.map(
504-
(output: any, index: number) => (
505-
<div key={`example_output_${index}`} className="mt-4">
506-
{output?.mode && (
507-
<p className="text-white text-base font-medium mb-2">
508-
{output?.mode}
509-
</p>
510-
)}
511-
{output?.title && (
512-
<p className="text-white/70 text-base mb-2">
513-
{output?.title}
514-
</p>
515-
)}
516-
{output?.content && (
517-
<pre className={`${DevelopmentToolsStyles.modernScrollbar} bg-[#1a1a1a] border border-white/10 rounded-lg p-4 mt-2`}>
518-
<code className="text-white/90 text-sm whitespace-pre">
519-
{output?.content}
520-
</code>
521-
</pre>
522-
)}
523-
{output?.note && (
524-
<p className="text-white/60 text-sm mt-2 italic">
525-
{output?.note}
526-
</p>
527-
)}
528-
</div>
529-
)
530-
)}
531-
</div>
532-
)}
533-
</div>
534-
)}
535-
536-
{/* what section */}
537-
{development_tools_what && (
538-
<div className="mt-8">
539-
{development_tools_what?.about_title && (
540-
<h4 className="text-2xl font-semibold text-white mb-2">
541-
{development_tools_what?.about_title}
542-
</h4>
543-
)}
544-
{development_tools_what?.what_description?.map(
545-
(desc: any, index: number) => {
546-
const descriptions = desc?.descriptions;
547-
const splitDescriptions =
548-
descriptions.split(/(".*?")/); // Split quoted and unquoted text
549-
550-
return (
551-
<p
552-
className="text-white/70 text-base mt-2"
553-
key={`what_description_${index}`}
554-
>
555-
{splitDescriptions.map(
556-
(text: any, subIndex: any) => {
557-
const isQuoted =
558-
text.startsWith("") && text.endsWith("");
559-
560-
return (
561-
<span
562-
key={`what_description_part_${index}_${subIndex}`}
563-
className={
564-
isQuoted
565-
? "text-white"
566-
: "text-white/70"
567-
}
568-
>
569-
{text}
570-
</span>
571-
);
572-
}
573-
)}
574-
</p>
575-
);
576-
}
577-
)}
578-
</div>
579-
)}
580-
581465
{/* step-by-step guide */}
582466
<div className="my-10">
583467
{development_tools_steps_guide?.guide_title && (
@@ -646,7 +530,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
646530
part.endsWith("") ? (
647531
<span
648532
key={i}
649-
className="font-semibold text-white/90"
533+
className="font-semibold text-white/70"
650534
>
651535
{part}
652536
</span>
@@ -669,7 +553,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
669553
) ? (
670554
<span
671555
key={`${i}-${j}`}
672-
className="font-semibold text-white/90"
556+
className="font-semibold text-white/70"
673557
>
674558
{sub.slice(
675559
2,
@@ -811,6 +695,198 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
811695
)}
812696
</div>
813697

698+
{/* example section */}
699+
{development_tool_example && (
700+
<div className="mt-8">
701+
{development_tool_example?.example_title && (
702+
<h4 className="text-2xl font-semibold text-white mb-2">
703+
{development_tool_example?.example_title}
704+
</h4>
705+
)}
706+
{development_tool_example?.example_description && (
707+
<p className="text-white/70 text-base mt-2">
708+
{development_tool_example?.example_description}
709+
</p>
710+
)}
711+
712+
{development_tool_example?.example_input && (
713+
<div className="mt-4">
714+
{development_tool_example?.example_input?.title && (
715+
<p className="text-white text-base font-medium mb-2">
716+
{development_tool_example?.example_input?.title}
717+
</p>
718+
)}
719+
{development_tool_example?.example_input?.json_data && (
720+
<pre className={`${DevelopmentToolsStyles.modernScrollbar} bg-[#1a1a1a] border border-white/10 rounded-lg p-4 mt-2`}>
721+
<code className="text-white/90 text-sm whitespace-pre">
722+
{development_tool_example?.example_input?.json_data}
723+
</code>
724+
</pre>
725+
)}
726+
</div>
727+
)}
728+
729+
{development_tool_example?.example_outputs && (
730+
<div className="mt-6">
731+
{development_tool_example?.example_outputs?.intro && (
732+
<p className="text-white/70 text-base mb-4">
733+
{development_tool_example?.example_outputs?.intro}
734+
</p>
735+
)}
736+
{development_tool_example?.example_outputs?.outputs?.map(
737+
(output: any, index: number) => (
738+
<div key={`example_output_${index}`} className="mt-4">
739+
{output?.mode && (
740+
<p className="text-white text-base font-medium mb-2">
741+
{output?.mode}
742+
</p>
743+
)}
744+
{output?.title && (
745+
<p className="text-white/70 text-base mb-2">
746+
{output?.title}
747+
</p>
748+
)}
749+
{output?.content && (
750+
<pre className={`${DevelopmentToolsStyles.modernScrollbar} bg-[#1a1a1a] border border-white/10 rounded-lg p-4 mt-2`}>
751+
<code className="text-white/90 text-sm whitespace-pre">
752+
{output?.content}
753+
</code>
754+
</pre>
755+
)}
756+
{output?.note && (
757+
<p className="text-white/60 text-sm mt-2 italic">
758+
{output?.note}
759+
</p>
760+
)}
761+
</div>
762+
)
763+
)}
764+
</div>
765+
)}
766+
767+
{/* JavaScript example section (optional) */}
768+
{development_tool_example?.javascript_example && (
769+
<div className="mt-8">
770+
{development_tool_example?.javascript_example?.title && (
771+
<h5 className="text-xl font-semibold text-white mb-2">
772+
{development_tool_example?.javascript_example?.title}
773+
</h5>
774+
)}
775+
{development_tool_example?.javascript_example?.description && (
776+
<p className="text-white/70 text-base mt-2">
777+
{development_tool_example?.javascript_example?.description}
778+
</p>
779+
)}
780+
781+
{development_tool_example?.javascript_example?.methods?.length >
782+
0 && (
783+
<div className="mt-4">
784+
<ul className="list-disc space-y-3 pl-6">
785+
{development_tool_example?.javascript_example?.methods?.map(
786+
(method: any, index: number) => (
787+
<li
788+
key={`js_method_${index}`}
789+
className="text-base"
790+
>
791+
{method?.name && (
792+
<span className="text-white font-semibold">
793+
{method?.name}{" "}
794+
</span>
795+
)}
796+
{method?.description && (
797+
<span className="text-white/70">
798+
{method?.description}
799+
</span>
800+
)}
801+
</li>
802+
)
803+
)}
804+
</ul>
805+
</div>
806+
)}
807+
808+
{development_tool_example?.javascript_example?.examples?.length >
809+
0 && (
810+
<div className="mt-6">
811+
{development_tool_example?.javascript_example?.examples?.map(
812+
(example: any, index: number) => (
813+
<div
814+
key={`js_example_${index}`}
815+
className="mt-4"
816+
>
817+
{example?.title && (
818+
<p className="text-white text-base font-medium mb-2">
819+
{example?.title}
820+
</p>
821+
)}
822+
{example?.code && (
823+
<pre className={`${DevelopmentToolsStyles.modernScrollbar} bg-[#1a1a1a] border border-white/10 rounded-lg p-4 mt-2`}>
824+
<code className="text-white/90 text-sm whitespace-pre">
825+
{example?.code}
826+
</code>
827+
</pre>
828+
)}
829+
</div>
830+
)
831+
)}
832+
</div>
833+
)}
834+
835+
{development_tool_example?.javascript_example?.note && (
836+
<p className="text-white/60 text-sm mt-4">
837+
{development_tool_example?.javascript_example?.note}
838+
</p>
839+
)}
840+
</div>
841+
)}
842+
</div>
843+
)}
844+
845+
{/* what section */}
846+
{development_tools_what && (
847+
<div className="mt-8">
848+
{development_tools_what?.about_title && (
849+
<h4 className="text-2xl font-semibold text-white mb-2">
850+
{development_tools_what?.about_title}
851+
</h4>
852+
)}
853+
{development_tools_what?.what_description?.map(
854+
(desc: any, index: number) => {
855+
const descriptions = desc?.descriptions;
856+
const splitDescriptions =
857+
descriptions.split(/(".*?")/); // Split quoted and unquoted text
858+
859+
return (
860+
<p
861+
className="text-white/70 text-base mt-2"
862+
key={`what_description_${index}`}
863+
>
864+
{splitDescriptions.map(
865+
(text: any, subIndex: any) => {
866+
const isQuoted =
867+
text.startsWith("") && text.endsWith("");
868+
869+
return (
870+
<span
871+
key={`what_description_part_${index}_${subIndex}`}
872+
className={
873+
isQuoted
874+
? "text-white"
875+
: "text-white/70"
876+
}
877+
>
878+
{text}
879+
</span>
880+
);
881+
}
882+
)}
883+
</p>
884+
);
885+
}
886+
)}
887+
</div>
888+
)}
889+
814890
{/* how to use */}
815891
<div className="my-10">
816892
{development_tools_how_use?.how_use_title && (

0 commit comments

Comments
 (0)