style(lint): fix lint errors and warnings

configure ESLint to ignore server.ts
use deno to lint server.ts

.eslintignore

@@ -7,5 +7,8 @@ dist
 # Remix
 public/build
 
+# Remix with Deno
+server.ts
+
 # Next.js
 .next/

app/components/action-cards.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { classNames } from '../utils/class-names'
 import { Link } from '@remix-run/react'
+import { classNames } from '../utils/class-names'
 import { Categories } from '../model/categories'
 
 export function ActionCards({ categories }: { categories: Categories }) {

app/components/activities-grid.tsx

@@ -14,7 +14,7 @@ export function ActivitesGrid({ activities }: { activities: Activity[] }) {
   const addNewActivityLink = `${senaraiForm}?usp=pp_url&entry.1040472985=${encodeURIComponent(category.title)}`
   if (activities.length) {
     return (
-      <ul role="list" className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+      <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
         {activities.map(({ id, nama, link, ringkasan, image, usia, categorySlug }) => {
           const { icon, iconForeground, iconBackground, title } = getCategoryByCategorySlug(categorySlug)
           return (

app/components/breadcrumbs.tsx

@@ -9,7 +9,7 @@ export default function Breadcrumbs() {
   if (filteredMatches.length && filteredMatches[0].pathname === '/activities') {
     return (
       <nav className="flex" aria-label="Breadcrumbs">
-        <ol role="list" className="bg-white rounded-md shadow px-6 flex space-x-4 min-w-full">
+        <ol className="bg-white rounded-md shadow px-6 flex space-x-4 min-w-full">
           <li className="flex">
             <div className="flex items-center">
               <Link to="/" className="text-gray-500 hover:text-gray-700">

app/components/card.tsx

@@ -1,7 +1,7 @@
 /* This example requires Tailwind CSS v2.0+ */
 import * as React from 'react'
-import { classNames } from '../utils/class-names'
 import { Link } from '@remix-run/react'
+import { classNames } from '../utils/class-names'
 import { ArrowUpRightFromSquare, PenToSquare } from '../icons/duotone'
 
 export type CardProps = {

app/components/contacts-grid.tsx

@@ -5,7 +5,7 @@ import { Card } from './card'
 
 export function ContactsGrid({ contacts }: { contacts: Contacts }) {
   return (
-    <ul role="list" className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+    <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
       {contacts.map(({ name, role, platform, link, description, image, foregroundColor, backgroundColor }) => {
         return (
           <Card

app/components/taxonomy.tsx

@@ -15,7 +15,7 @@ export function Taxonomy({
   else
     return (
       <nav className="flex py-2" aria-label="Taxonomy">
-        <ol role="list" className="flex items-center space-x-1">
+        <ol className="flex items-center space-x-1">
           <li>
             <div className="flex items-center">
               <div className="text-sm font-medium text-gray-500 hover:text-gray-700">{first}</div>

app/components/top-navigation.tsx

@@ -2,8 +2,8 @@ import * as React from 'react'
 import { Disclosure } from '@headlessui/react'
 import { Link, useMatches } from '@remix-run/react'
 import { classNames } from '../utils/class-names'
-import Breadcrumbs from './breadcrumbs'
 import { ArrowUpRightFromSquare, Bars, MagnifyingGlass, X } from '../icons/duotone'
+import Breadcrumbs from './breadcrumbs'
 
 export const senaraiForm = '/go/form'
 

app/routes/go/$shortlink.ts

@@ -1,4 +1,5 @@
-import { LoaderFunction, redirect } from '@remix-run/deno'
+import type { LoaderFunction } from '@remix-run/deno'
+import { redirect } from '@remix-run/deno'
 
 const shortlinks = {
   draft: 'https://docs.google.com/spreadsheets/d/1-nl7RHGsQwF12GzGfj22YJiqlwLjm1ix-hqcR1mJxWs/edit#gid=0',

app/routes/go/index.ts

@@ -1,4 +1,5 @@
-import { LoaderFunction, redirect } from '@remix-run/deno'
+import type { LoaderFunction } from '@remix-run/deno'
+import { redirect } from '@remix-run/deno'
 
 export const loader: LoaderFunction = async () => {
   return redirect('/')

package.json

@@ -16,6 +16,7 @@
     "fetch": "node --require esbuild-register app/scripts/fetch-db.ts",
     "format": "pkode format",
     "lint": "pkode lint",
+    "lint:deno": "deno lint server.ts",
     "start": "cross-env NODE_ENV=production deno run --unstable --allow-net --allow-read --allow-env ./build/index.js"
   },
   "dependencies": {

tailwind.config.js

@@ -12,3 +12,5 @@ module.exports = {
   },
   plugins: [],
 }
+
+/* eslint @typescript-eslint/no-var-requires:"off" */