Skip to content

Commit

Permalink
Use proper links for directory entries (denoland#1201)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucacasonato
lucacasonato authored Jun 22, 2020
1 parent cb0b370 commit bf5c086
Showing 1 changed file with 71 additions and 55 deletions.
126 changes: 71 additions & 55 deletions components/Registry.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -441,77 +441,93 @@ function DirectoryListing(props: {
<tbody className="bg-white">
{props.dirEntries
.sort((a, b) => a.type.localeCompare(b.type))
.map((entry, i) => (
<Link
key={i}
href={`${isStd ? "" : "/x"}/[identifier]/[...path]`}
as={`${isStd ? "" : "/x"}/${props.name}${
props.version ? `@${props.version}` : ""
}${props.path}/${entry.name}`}
>
{/* TODO(lucacasonato): currently not activatable with keyboard: https://github.com/zeit/next.js/issues/12179 */}
.map((entry, i) => {
const href = `${isStd ? "" : "/x"}/[identifier]/[...path]`;
const as = `${isStd ? "" : "/x"}/${props.name}${
props.version ? `@${props.version}` : ""
}${props.path}/${entry.name}`;
return (
<tr
tabIndex={0}
role="button"
className={`table-row hover:bg-gray-100 cursor-pointer${
key={i}
className={`table-row hover:bg-gray-100${
i !== props.dirEntries.length - 1
? " border-b border-gray-200"
: ""
}`}
>
<td className="px-2 sm:pl-3 md:pl-4 py-1 whitespace-no-wrap text-sm leading-5 text-gray-400 w-6">
<svg
fill="currentColor"
viewBox="0 0 20 20"
className="w-5 h-5"
>
{(() => {
switch (entry.type) {
case "file":
if (isReadme(entry.name)) {
return (
<path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z"></path>
);
<td className="whitespace-no-wrap text-sm leading-5 text-gray-400 w-6">
<Link href={href} as={as}>
<a
className="px-2 sm:pl-3 md:pl-4 py-1 w-full block"
tabIndex={-1}
>
<svg
fill="currentColor"
viewBox="0 0 20 20"
className="w-5 h-5"
>
{(() => {
switch (entry.type) {
case "file":
if (isReadme(entry.name)) {
return (
<path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z"></path>
);
}
return (
<path
fillRule="evenodd"
d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"
clipRule="evenodd"
></path>
);
case "dir":
return (
<path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path>
);
case "symlink":
return (
<path
fillRule="evenodd"
d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z"
clipRule="evenodd"
></path>
);
}
return (
<path
fillRule="evenodd"
d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"
clipRule="evenodd"
></path>
);
case "dir":
return (
<path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path>
);
case "symlink":
return (
<path
fillRule="evenodd"
d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z"
clipRule="evenodd"
></path>
);
}
})()}
</svg>
})()}
</svg>
</a>
</Link>
</td>
<td
className={
"px-2 py-1 whitespace-no-wrap text-sm text-blue-500 leading-5" +
"whitespace-no-wrap text-sm text-blue-500 leading-5" +
(isReadme(entry.name) ? " font-medium" : "")
}
>
{entry.name}
<Link href={href} as={as}>
<a className="px-2 py-1 w-full block">
{entry.name}
</a>
</Link>
</td>
<td className="px-4 py-1 whitespace-no-wrap text-sm leading-5 text-gray-500 text-right">
{entry.type !== "dir" && entry.size
? bytesToSize(entry.size)
: ""}
<td className="whitespace-no-wrap text-sm leading-5 text-gray-500 text-right">
<Link href={href} as={as}>
<a
className="px-4 py-1 w-full h-full block"
tabIndex={-1}
>
{entry.type !== "dir" && entry.size ? (
bytesToSize(entry.size)
) : (
<>&nbsp;</>
)}
</a>
</Link>
</td>
</tr>
</Link>
))}
);
})}
</tbody>
</table>
</div>
Expand Down

0 comments on commit bf5c086

Please sign in to comment.