dwindown/dewedev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: WCAG AA accessibility, code splitting, responsive ads layout

Browse Source 
- Add React.lazy code splitting for all 15 tool pages
- Fix WCAG AA contrast issues (304 text color fixes)
- Add ARIA labels and aria-expanded to navigation buttons
- Add aria-live for error announcements in tools
- Implement responsive ad layout:
  - Desktop (≥1280px): Right sidebar with 3 ad units
  - Tablet (1024-1279px): Bottom section with 3 horizontal units
  - Mobile (<1024px): Fixed bottom banner
- Add TabletAdSection component for tablet ad placement
- Integrate Onidel affiliate partnership
- Update all Adsterra domains to solutionbiologyisle.com
- Add release notes for 2026-02-18 updates
This commit is contained in:
dwindown
2026-02-18 18:57:31 +07:00
parent 9dc3285adb
commit 3a475e9df2
41 changed files with 391 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/PostmanTable.js
View File

@@ -292,7 +292,7 @@ const PostmanTable = ({ data, title = "JSON Data" }) => {
<div className="flex items-center space-x-1 text-sm">
{getBreadcrumb().map((part, index) => (
<React.Fragment key={index}>
{index > 0 && <span className="text-gray-400 dark:text-gray-500">/</span>}
{index > 0 && <span className="text-gray-600 dark:text-gray-600">/</span>}
<button
onClick={() => handleBreadcrumbClick(index)}
className={`px-2 py-1 rounded transition-colors ${
@@ -309,14 +309,14 @@ const PostmanTable = ({ data, title = "JSON Data" }) => {
</div>
</div>
<div className="flex items-center justify-between">
<div className="text-sm text-gray-500 dark:text-gray-400">
<div className="text-sm text-gray-600 dark:text-gray-600">
{isArrayView && `${currentData.length} items`}
{isObjectView && `${Object.keys(currentData).length} properties`}
</div>
{/* Global HTML/Raw Toggle */}
<div className="flex items-center space-x-2">
<span className="text-xs text-gray-500 dark:text-gray-400">Text Display:</span>
<span className="text-xs text-gray-600 dark:text-gray-600">Text Display:</span>
<div className="flex rounded-md overflow-hidden border border-gray-300 dark:border-gray-600">
<button
onClick={() => setRenderHtml(true)}
@@ -353,11 +353,11 @@ const PostmanTable = ({ data, title = "JSON Data" }) => {
<table className="w-full">
<thead className="bg-gray-50 dark:bg-gray-700 sticky top-0 z-10">
<tr>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-12">
<th className="px-4 py-3 text-left text-xs font-medium text-gray-600 dark:text-gray-300 uppercase tracking-wider w-12">
#
</th>
{headers.map(header => (
<th key={header} className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
<th key={header} className="px-4 py-3 text-left text-xs font-medium text-gray-600 dark:text-gray-300 uppercase tracking-wider">
{header}
</th>
))}
@@ -372,7 +372,7 @@ const PostmanTable = ({ data, title = "JSON Data" }) => {
onClick={() => handleRowClick(index)}
className="hover:bg-blue-50 dark:hover:bg-blue-900/20 cursor-pointer transition-colors duration-150"
>
<td className="px-4 py-3 text-sm font-mono text-gray-500 dark:text-gray-400">
<td className="px-4 py-3 text-sm font-mono text-gray-600 dark:text-gray-600">
{index}
</td>
{isPrimitiveArray ? (
@@ -396,13 +396,13 @@ const PostmanTable = ({ data, title = "JSON Data" }) => {
<table className="w-full">
<thead className="bg-gray-50 dark:bg-gray-700 sticky top-0 z-10">
<tr>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-1/3">
<th className="px-4 py-3 text-left text-xs font-medium text-gray-600 dark:text-gray-300 uppercase tracking-wider w-1/3">
Key
</th>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
<th className="px-4 py-3 text-left text-xs font-medium text-gray-600 dark:text-gray-300 uppercase tracking-wider">
Value
</th>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-16">
<th className="px-4 py-3 text-left text-xs font-medium text-gray-600 dark:text-gray-300 uppercase tracking-wider w-16">
</th>
</tr>
@@ -438,7 +438,7 @@ const PostmanTable = ({ data, title = "JSON Data" }) => {
{copiedItems.has(`${currentPath.join('.')}.${key}`) ? (
<Check className="h-3 w-3 text-green-500" />
) : (
<Copy className="h-3 w-3 text-gray-500 dark:text-gray-400" />
<Copy className="h-3 w-3 text-gray-600 dark:text-gray-600" />
)}
</button>
</td>
@@ -450,7 +450,7 @@ const PostmanTable = ({ data, title = "JSON Data" }) => {
) : (
// Fallback for primitive values
<div className="p-4">
<div className="text-center text-gray-500 dark:text-gray-400">
<div className="text-center text-gray-600 dark:text-gray-600">
<div className="text-lg font-mono text-gray-900 dark:text-gray-100 whitespace-pre-wrap break-words">
{formatFullValue(currentData)}
</div>