[153] Add path aliases

README.project.md

@@ -8,7 +8,7 @@ This is a starter app for [Next.js](https://nextjs.org/) (bootstrapped with [`cr
 * [Stylelint](https://stylelint.io/)
 * [Prettier](https://prettier.io/)
 
-Note that Next v14 comes with the following installed already:
+Note that Next v15 comes with the following installed already:
 * [Webpack v5](https://webpack.js.org/concepts/)
 * [CSS Modules](https://github.com/css-modules/css-modules)
 
@@ -84,6 +84,18 @@ ddev nextjs icons
 - `util`: Utility functions for working with CMSes or working with queries. Front-end
   utilities and Storybook helpers are in `source/06-utility`
 
+## Path alias
+TypeScript is configured with several path aliases for use in imports.
+- `~global/`: `source/01-global/`
+- `~layouts/`: `source/02-layouts/`
+- `~components/`: `source/03-components/`
+- `~templates/`: `source/04-templates/`
+- `~pages/`: `source/05-pages/`
+- `~utility`: `source/06-utilities/`
+- `~/`: project root
+
+Other aliases can be added in tsconfig.json.
+
 ## Helpful commands
 
 ### Monitoring the applications

app/about/page.tsx

@@ -1,5 +1,5 @@
 import { Metadata } from 'next';
-import Page from '../../source/04-templates/Page/Page';
+import Page from '~templates/Page/Page';
 
 const title = 'About Forum One Next.js Starter App';
 

app/layout.tsx

@@ -1,18 +1,18 @@
-import '../source/00-config/index.css';
+import '~/source/00-config/index.css';
 
 import { JSX, PropsWithChildren } from 'react';
-import sourceSansPro from '../source/01-global/fonts/source-sans';
-import '../source/01-global/index.css';
-import Footer from '../source/02-layouts/Footer/Footer';
-import Header from '../source/02-layouts/Header/Header';
-import SiteContainer from '../source/02-layouts/SiteContainer/SiteContainer';
-import BackToTop from '../source/03-components/BackToTop/BackToTop';
-import Menu from '../source/03-components/Menu/Menu';
-import ResponsiveMenu from '../source/03-components/Menu/ResponsiveMenu/ResponsiveMenu';
-import footerStyles from '../source/03-components/Menu/menu-footer.module.css';
-import SiteName from '../source/03-components/SiteName/SiteName';
-import Skiplink from '../source/03-components/Skiplink/Skiplink';
-import '../source/06-utility/index.css';
+import BackToTop from '~components/BackToTop/BackToTop';
+import Menu from '~components/Menu/Menu';
+import ResponsiveMenu from '~components/Menu/ResponsiveMenu/ResponsiveMenu';
+import footerStyles from '~components/Menu/menu-footer.module.css';
+import SiteName from '~components/SiteName/SiteName';
+import Skiplink from '~components/Skiplink/Skiplink';
+import sourceSansPro from '~global/fonts/source-sans';
+import '~global/index.css';
+import Footer from '~layouts/Footer/Footer';
+import Header from '~layouts/Header/Header';
+import SiteContainer from '~layouts/SiteContainer/SiteContainer';
+import '~utility/index.css';
 
 function RootLayout({ children }: PropsWithChildren): JSX.Element {
   return (

app/page.tsx

@@ -1,10 +1,10 @@
 import { Metadata } from 'next';
 import Image from 'next/image';
-import heroPlaceholder from '../public/images/hero-placeholder.jpg';
-import Section from '../source/02-layouts/Section/Section';
-import HeroBgImage from '../source/03-components/HeroBgImage/HeroBgImage';
-import Wysiwyg from '../source/03-components/Wysiwyg/Wysiwyg';
-import LandingPage from '../source/04-templates/LandingPage/LandingPage';
+import heroPlaceholder from '~/public/images/hero-placeholder.jpg';
+import HeroBgImage from '~components/HeroBgImage/HeroBgImage';
+import Wysiwyg from '~components/Wysiwyg/Wysiwyg';
+import Section from '~layouts/Section/Section';
+import LandingPage from '~templates/LandingPage/LandingPage';
 
 const title = 'Forum One Next.js Starter App';
 

source/02-layouts/Constrain/Constrain.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/nextjs';
-import SampleContent from '../../06-utility/storybook/SampleContent';
+import SampleContent from '~utility/storybook/SampleContent';
 import ConstrainLayout from './Constrain';
 import constrainArgs from './constrainArgs';
 

source/02-layouts/Constrain/constrainArgs.ts

@@ -1,4 +1,4 @@
-import { ConstrainProps } from '@/source/02-layouts/Constrain/Constrain';
+import { ConstrainProps } from '~layouts/Constrain/Constrain';
 
 export default {
   modifierClasses: '',

source/02-layouts/Footer/Footer.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/nextjs';
-import SampleContent from '../../06-utility/storybook/SampleContent';
+import SampleContent from '~utility/storybook/SampleContent';
 import FooterLayout from './Footer';
 import footerArgs from './footerArgs';
 

source/02-layouts/Footer/Footer.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { ConstrainComponent } from 'gesso';
 import { JSX, ReactNode } from 'react';
-import Constrain from '../Constrain/Constrain';
+import Constrain from '~layouts/Constrain/Constrain';
 import styles from './footer.module.css';
 
 interface FooterProps extends ConstrainComponent {

source/02-layouts/Footer/footerArgs.ts

@@ -1,4 +1,4 @@
-import { FooterProps } from '@/source/02-layouts/Footer/Footer';
+import { FooterProps } from '~layouts/Footer/Footer';
 
 export default {
   hasConstrain: true,

source/02-layouts/Grid/Grid.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/nextjs';
-import SampleContent from '../../06-utility/storybook/SampleContent';
+import SampleContent from '~utility/storybook/SampleContent';
 import GridLayout from './Grid';
 import gridArgs from './gridArgs';
 

source/02-layouts/Grid/gridArgs.ts

@@ -1,4 +1,4 @@
-import { GridProps } from '@/source/02-layouts/Grid/Grid';
+import { GridProps } from '~layouts/Grid/Grid';
 
 export default {
   numCols: 3,

source/02-layouts/Header/Header.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/nextjs';
-import SampleContent from '../../06-utility/storybook/SampleContent';
+import SampleContent from '~utility/storybook/SampleContent';
 import HeaderLayout from './Header';
 import headerArgs from './headerArgs';
 

source/02-layouts/Header/Header.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { ConstrainComponent } from 'gesso';
 import { JSX, ReactNode } from 'react';
-import Constrain from '../Constrain/Constrain';
+import Constrain from '~layouts/Constrain/Constrain';
 import styles from './header.module.css';
 
 interface HeaderProps extends ConstrainComponent {

source/02-layouts/Header/headerArgs.ts

@@ -1,4 +1,4 @@
-import { HeaderProps } from '@/source/02-layouts/Header/Header';
+import { HeaderProps } from '~layouts/Header/Header';
 
 export default {
   hasConstrain: true,

source/02-layouts/InlineForm/InlineForm.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/nextjs';
-import SampleContent from '../../06-utility/storybook/SampleContent';
+import SampleContent from '~utility/storybook/SampleContent';
 import InlineFormLayout from './InlineForm';
 import inlineFormArgs from './inlineFormArgs';
 

source/02-layouts/InlineForm/inlineFormArgs.ts

@@ -1,4 +1,4 @@
-import { InlineFormProps } from '@/source/02-layouts/InlineForm/InlineForm';
+import { InlineFormProps } from '~layouts/InlineForm/InlineForm';
 
 export default {
   wrap: true,

source/02-layouts/Main/Main.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/nextjs';
-import SampleContent from '../../06-utility/storybook/SampleContent';
+import SampleContent from '~utility/storybook/SampleContent';
 import MainLayout from './Main';
 import mainArgs from './mainArgs';
 

source/02-layouts/Main/Main.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { ConstrainComponent } from 'gesso';
 import { JSX, ReactNode } from 'react';
-import Constrain from '../Constrain/Constrain';
+import Constrain from '~layouts/Constrain/Constrain';
 import styles from './main.module.css';
 
 interface MainProps extends ConstrainComponent {