Develop

.eslintrc.cjs

@@ -1,3 +1,6 @@
+/**
+ * @type {import("eslint").Linter.Config}
+ */
 module.exports = {
   globals: {
     __PATH_PREFIX__: true,
@@ -24,6 +27,11 @@ module.exports = {
     es6: true,
     jest: true,
   },
+  settings: {
+    "import/resolver": {
+      typescript: {},
+    },
+  },
   rules: {
     "prettier/prettier": [
       "warn",

gatsby-config.ts

@@ -43,6 +43,7 @@ const config: GatsbyConfig = {
         siteId: `rockman`,
       },
     },
+    `gatsby-plugin-tsconfig-paths`,
     {
       resolve: `gatsby-source-filesystem`,
       options: {

gatsby/gatsby-node/onCreateNode.ts

@@ -1,5 +1,5 @@
 import type { CreateNodeArgs, Node } from "gatsby";
-import { getYomi } from "../../src/utils/sortByYomi";
+import { getYomi } from "../../src/utils/sort-by-yomi";
 import type { Program, Tune } from "../../types";
 
 function isProgramNode(node: Node | Program<"bare">): node is Program<"bare"> {

package.json

@@ -29,28 +29,29 @@
   "dependencies": {
     "@cieloazul310/gatsby-theme-aoi": "^3.3.0",
     "@cieloazul310/gatsby-theme-aoi-blog-components": "^3.3.0",
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^5.16.7",
-    "@mui/material": "^5.16.7",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^5.16.13",
+    "@mui/material": "^5.16.13",
     "d3-dsv": "^3.0.1",
-    "gatsby": "^5.13.7",
-    "gatsby-plugin-canonical-urls": "^5.13.1",
+    "gatsby": "^5.14.1",
+    "gatsby-plugin-canonical-urls": "^5.14.0",
     "gatsby-plugin-eslint": "^4.0.4",
-    "gatsby-plugin-google-gtag": "5.13.1",
-    "gatsby-plugin-manifest": "^5.13.1",
-    "gatsby-plugin-sitemap": "^6.13.1",
-    "gatsby-source-filesystem": "^5.13.1",
-    "gatsby-transformer-yaml": "^5.13.1",
+    "gatsby-plugin-google-gtag": "^5.14.0",
+    "gatsby-plugin-manifest": "^5.14.0",
+    "gatsby-plugin-sitemap": "^6.14.0",
+    "gatsby-plugin-tsconfig-paths": "^1.0.6",
+    "gatsby-source-filesystem": "^5.14.0",
+    "gatsby-transformer-yaml": "^5.14.0",
     "iso-3166-1": "^2.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-intersection-observer": "^9.13.0",
+    "react-intersection-observer": "^9.14.0",
     "react-swipeable-views": "^0.14.0",
     "react-swipeable-views-utils": "^0.14.0",
     "react-virtualized": "^9.22.5",
-    "react-window": "^1.8.10",
-    "yaml": "^2.5.0"
+    "react-window": "^1.8.11",
+    "yaml": "^2.6.1"
   },
   "devDependencies": {
     "@babel/core": "^7.23.0",
@@ -70,10 +71,10 @@
     "@types/node": "^20.8.3",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
-    "@types/react-swipeable-views": "^0.13.3",
-    "@types/react-swipeable-views-utils": "^0.13.5",
-    "@types/react-virtualized": "^9.21.23",
-    "@types/react-window": "^1.8.6",
+    "@types/react-swipeable-views": "^0.13.6",
+    "@types/react-swipeable-views-utils": "^0.13.7",
+    "@types/react-virtualized": "^9.22.0",
+    "@types/react-window": "^1.8.8",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
     "babel-jest": "^29.7.0",
@@ -84,23 +85,24 @@
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.8.0",
-    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-import-resolver-typescript": "^3.7.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest": "^28.10.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.35.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react": "^7.37.3",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-webpack-plugin": "^4.2.0",
-    "husky": "^9.1.5",
+    "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
-    "lint-staged": "^15.2.9",
-    "prettier": "^3.3.3",
-    "react-docgen-typescript-plugin": "^1.0.5",
+    "lint-staged": "^15.3.0",
+    "prettier": "^3.4.2",
+    "react-docgen-typescript-plugin": "^1.0.8",
     "react-test-renderer": "^18.3.1",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
-    "typescript": "^5.5.4"
+    "typescript": "^5.7.2"
   },
   "lint-staged": {
     "./src/**/*.{js,jsx,ts,tsx}": [

src/@cieloazul310/gatsby-theme-aoi-layout/Footer/index.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { Article } from "@cieloazul310/gatsby-theme-aoi";
+import { AdInFooter } from "@/components/ads";
+import InView from "@/components/in-view";
 import Socials from "./Socials";
 import Copyrights from "./Copyrights";
-import { AdInFooter } from "../../../components/Ads";
-import InView from "../../../components/InView";
 
 function Footer() {
   return (

src/components/Ads.tsx → src/components/ads.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import { useLocation } from "@reach/router";
-import InView from "./InView";
+import InView from "./in-view";
 
 declare global {
   interface Window {

src/components/ArtistItem/Container.tsx → src/components/artist-item/container.tsx

@@ -5,8 +5,8 @@ import Typography from "@mui/material/Typography";
 import Grid from "@mui/material/Grid";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTheme } from "@mui/material/styles";
-import ArtistItem from "./Item";
-import { MinimumArtist } from "../../../types";
+import { MinimumArtist } from "types";
+import ArtistItem from "./item";
 
 function isolateTouch(event: React.TouchEvent) {
   event.stopPropagation();

src/components/ArtistItem/Item.tsx → src/components/artist-item/item.tsx

@@ -2,8 +2,8 @@ import * as React from "react";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import { AppLink } from "@cieloazul310/gatsby-theme-aoi";
-import { ArtistIcon } from "../../icons";
-import { MinimumArtist } from "../../../types";
+import { ArtistIcon } from "@/icons";
+import { MinimumArtist } from "types";
 
 type ArtistItemProps = {
   artist: MinimumArtist;

src/components/ArtistItem/Top25.tsx → src/components/artist-item/top25.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import ArtistItemContainer from "./Container";
-import { useProgramTop25 } from "../../utils/graphql-hooks";
+import { useProgramTop25 } from "@/utils/graphql-hooks";
+import ArtistItemContainer from "./container";
 
 function ProgramTop25() {
   const top25 = useProgramTop25();

src/components/ArtistList/Container.tsx → src/components/artist-list/container.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { FixedSizeList, ListChildComponentProps } from "react-window";
-import ArtistListItem from "./Item";
-import type { ArtistListItem as ArtistListItemType } from "../../../types";
+import type { ArtistListItem as ArtistListItemType } from "types";
+import ArtistListItem from "./item";
 
 function renderRow({
   index,

src/components/ArtistList/Item.tsx → src/components/artist-list/item.tsx

@@ -3,8 +3,8 @@ import Typography from "@mui/material/Typography";
 import ListItemAvatar from "@mui/material/ListItemAvatar";
 import ListItemText from "@mui/material/ListItemText";
 import { ListItemAppLink } from "@cieloazul310/gatsby-theme-aoi";
-import NationAvatar from "../NationAvatar";
-import type { ArtistListItem as ArtistListItemType } from "../../../types";
+import type { ArtistListItem as ArtistListItemType } from "types";
+import NationAvatar from "../nation-avatar";
 
 type ArtistListItemProps = {
   data: ArtistListItemType;

src/components/InView.tsx → src/components/in-view.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useInView } from "react-intersection-observer";
-import Loader from "./Loader";
+import Loader from "./loader";
 
 type InViewProps = {
   children: React.ReactNode;

src/components/NationAvatar.tsx → src/components/nation-avatar.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import Avatar from "@mui/material/Avatar";
-import useNationColor from "../utils/useNationColor";
+import useNationColor from "@/utils/use-nation-color";
 
 type NationAvatarProps = {
   nation: string;

src/components/NationLabel.tsx → src/components/nation-label.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import Box from "@mui/material/Box";
 import Typography, { type TypographyProps } from "@mui/material/Typography";
-import useNationColor from "../utils/useNationColor";
+import useNationColor from "@/utils/use-nation-color";
 
 type NationLabelProps = {
   nation: string;

src/components/ProgramList/Container.tsx → src/components/program-list/container.tsx

@@ -7,8 +7,8 @@ import ListItemText from "@mui/material/ListItemText";
 import Collapse from "@mui/material/Collapse";
 import ExpandLess from "@mui/icons-material/ExpandLess";
 import ExpandMore from "@mui/icons-material/ExpandMore";
-import ProgramListItem from "./Item";
-import type { ProgramListFragment } from "../../../types";
+import type { ProgramListFragment } from "types";
+import ProgramListItem from "./item";
 
 type ProgramYearsGroup = {
   fieldValue: string;

src/components/ProgramList/Item.tsx → src/components/program-list/item.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import Avatar from "@mui/material/Avatar";
-import ListItemLink from "./ListItemLink";
-import type { ProgramListFragment } from "../../../types";
+import type { ProgramListFragment } from "types";
+import ListItemLink from "./list-item-link";
 
 type ProgramListItemProps = {
   program: ProgramListFragment;

src/components/Seo.tsx → src/components/seo.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Seo, type SeoProps } from "@cieloazul310/gatsby-theme-aoi";
-import ogImage from "../assets/ogimage.png";
+import ogImage from "@/assets/ogimage.png";
 
 function RockmanSeo({ image, ...props }: SeoProps) {
   return <Seo image={image ?? ogImage} {...props} />;

src/components/Stat.tsx → src/components/stat.tsx

@@ -4,8 +4,8 @@ import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 import { useInView } from "react-intersection-observer";
-import { ProgramIcon, ArtistIcon, TuneIcon } from "../icons";
-import useAnimation from "../utils/useAnimation";
+import { ProgramIcon, ArtistIcon, TuneIcon } from "@/icons";
+import useAnimation from "@/utils/use-animation";
 
 type StatProps = {
   icon: React.ReactNode;

src/components/TakeOffAlbum.tsx → src/components/take-off-album.tsx

@@ -2,8 +2,8 @@ import * as React from "react";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import { AppLink } from "@cieloazul310/gatsby-theme-aoi";
-import TextSpan from "./TextSpan";
-import type { Program, SpitzAlbum, SpitzTune } from "../../types";
+import type { Program, SpitzAlbum, SpitzTune } from "types";
+import TextSpan from "./text-span";
 
 type TakeOffAlbumProps = {
   album: Pick<SpitzAlbum, "id" | "albumIdNum" | "title" | "year"> & {

src/components/Tunes/Container.tsx → src/components/tunes/container.tsx

@@ -5,9 +5,9 @@ import Container from "@mui/material/Container";
 import Typography from "@mui/material/Typography";
 import Skeleton from "@mui/material/Skeleton";
 import { AppLink, Section } from "@cieloazul310/gatsby-theme-aoi";
-import Tune, { TuneBare } from "./Item";
-import TextSpan from "../TextSpan";
-import type { Program, TuneItemFragment } from "../../../types";
+import type { Program, TuneItemFragment } from "types";
+import Tune, { TuneBare } from "./item";
+import TextSpan from "../text-span";
 
 type TunesByProgramBareProps = {
   headerText?: React.ReactNode;

src/components/Tunes/Item.tsx → src/components/tunes/item.tsx

@@ -6,11 +6,11 @@ import MuiLink from "@mui/material/Link";
 import Skeleton from "@mui/material/Skeleton";
 import { AppLink } from "@cieloazul310/gatsby-theme-aoi";
 import PlayCircleIcon from "@mui/icons-material/PlayCircleOutline";
-import TextSpan from "../TextSpan";
-import NationLabel from "../NationLabel";
-import { TuneIcon } from "../../icons";
-import useIsMobile from "../../utils/useIsMobile";
-import type { TuneItemFragment } from "../../../types";
+import { TuneIcon } from "@/icons";
+import useIsMobile from "@/utils/use-is-mobile";
+import type { TuneItemFragment } from "types";
+import TextSpan from "../text-span";
+import NationLabel from "../nation-label";
 
 type YouTubeLinkProps = {
   href: string;

src/components/Tunes/LazyViewer.tsx → src/components/tunes/lazy-viewer.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { useInView } from "react-intersection-observer";
 import { SectionWrapper } from "@cieloazul310/gatsby-theme-aoi";
-import TunesByProgram, { TunesByProgramSkeleton } from "./TunesByProgram";
-import { useDividedPrograms } from "../../utils/useDividedArray";
-import type { Program, TuneItemFragment } from "../../../types";
+import { useDividedPrograms } from "@/utils/use-divided-array";
+import type { Program, TuneItemFragment } from "types";
+import TunesByProgram, { TunesByProgramSkeleton } from "./tunes-by-program";
 
 type DisplayOnScreenProps = {
   children: React.ReactNode;

src/components/Tunes/ProgramByTune.tsx → src/components/tunes/program-by-tune.tsx

@@ -3,9 +3,9 @@ import * as React from "react";
 import Container from "@mui/material/Container";
 // import Skeleton from '@mui/material/Skeleton';
 import { Section } from "@cieloazul310/gatsby-theme-aoi";
-import ProgramTitle from "./ProgramTitle";
-import Tune from "./Item";
-import type { Program, TuneItemFragment } from "../../../types";
+import type { Program, TuneItemFragment } from "types";
+import ProgramTitle from "./program-title";
+import Tune from "./item";
 
 type ProgramByTuneProps = {
   tune: TuneItemFragment & {

src/components/Tunes/ProgramTitle.tsx → src/components/tunes/program-title.tsx

@@ -3,8 +3,8 @@ import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Skeleton from "@mui/material/Skeleton";
 import { AppLink } from "@cieloazul310/gatsby-theme-aoi";
-import TextSpan from "../TextSpan";
-import type { Program } from "../../../types";
+import type { Program } from "types";
+import TextSpan from "../text-span";
 
 type ProgramTitleBareProps = {
   headerText?: React.ReactNode;

src/components/Tunes/TunesByProgram.tsx → src/components/tunes/tunes-by-program.tsx

@@ -3,10 +3,10 @@ import Stack from "@mui/material/Stack";
 import Container from "@mui/material/Container";
 import Skeleton from "@mui/material/Skeleton";
 import { AppLink, Section } from "@cieloazul310/gatsby-theme-aoi";
-import { ProgramTitleBare } from "./ProgramTitle";
-import Tune, { TuneBare } from "./Item";
-import TextSpan from "../TextSpan";
-import type { Program, TuneItemFragment } from "../../../types";
+import type { Program, TuneItemFragment } from "types";
+import { ProgramTitleBare } from "./program-title";
+import Tune, { TuneBare } from "./item";
+import TextSpan from "../text-span";
 
 type TunesByProgramBareProps = {
   headerText?: React.ReactNode;

src/layout/TabTemplate.tsx → src/layout/tab-template.tsx

@@ -14,11 +14,11 @@ import {
   SectionWrapper,
   TabPane,
 } from "@cieloazul310/gatsby-theme-aoi";
-import Layout from "./TabLayout";
-import Jumbotron from "../components/Jumbotron";
-import Tab from "../components/MuiTab";
-import { AdInSectionDivider } from "../components/Ads";
-import { useParseHash, useHash } from "../utils/useHash";
+import Jumbotron from "@/components/jumbotron";
+import Tab from "@/components/mui-tab";
+import { AdInSectionDivider } from "@/components/ads";
+import { useParseHash, useHash } from "@/utils/use-hash";
+import Layout from "./tab-layout";
 
 const BindKeyboardSwipeableViews = bindKeyboard(SwipeableViews);
 

src/pages/404.tsx

@@ -6,7 +6,7 @@ import {
   Article,
   Alert,
 } from "@cieloazul310/gatsby-theme-aoi";
-import Jumbotron from "../components/Jumbotron";
+import Jumbotron from "@/components/jumbotron";
 
 function NotFoundPage() {
   const location = useLocation();

src/pages/about.tsx

@@ -8,10 +8,10 @@ import {
   AppLink,
 } from "@cieloazul310/gatsby-theme-aoi";
 
-import Layout from "../layout";
-import Seo from "../components/Seo";
-import Jumbotron from "../components/Jumbotron";
-import { AdInSectionDivider } from "../components/Ads";
+import Layout from "@/layout";
+import Seo from "@/components/seo";
+import Jumbotron from "@/components/jumbotron";
+import { AdInSectionDivider } from "@/components/ads";
 
 function About() {
   return (