diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..89d1965f --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode" +} \ No newline at end of file diff --git a/index.html b/index.html index e3ebd7e6..09dbf9c6 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,6 @@
- + diff --git a/postcss.config.cjs b/postcss.config.cjs index a0df52e0..9c4aa001 100644 --- a/postcss.config.cjs +++ b/postcss.config.cjs @@ -1,6 +1,6 @@ module.exports = { plugins: { - "postcss-nesting": {}, + 'postcss-nesting': {}, 'tailwindcss/nesting': {}, tailwindcss: {}, autoprefixer: {}, diff --git a/src/components/App.tsx b/src/components/App.tsx index 3cff3e42..b2b26f62 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -26,7 +26,8 @@ function App() { // Load feature definitions from API fetch( - `https://cdn.growthbook.io/api/features/${import.meta.env.VITE_GROWTH_BOOK_KEY + `https://cdn.growthbook.io/api/features/${ + import.meta.env.VITE_GROWTH_BOOK_KEY }`, ) .then((res) => res.json()) @@ -50,7 +51,7 @@ function App() { return (
- { location.pathname !== '/' && } + {location.pathname !== '/' && } diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx index 82b94608..5a037fb4 100644 --- a/src/components/Breadcrumbs.tsx +++ b/src/components/Breadcrumbs.tsx @@ -1,24 +1,28 @@ -import { useMatches } from "react-router-dom"; +import { useMatches } from 'react-router-dom'; import classes from './breadcrumbs.module.css'; function Breadcrumbs() { - const matches = useMatches(); - const crumbs = matches - // first get rid of any matches that don't have handle and crumb - .filter((match) => Boolean(match.handle?.crumb)) - // now map them into an array of elements, passing the loader - // data to each one - .map((match) => match.handle.crumb(match.data)); + const matches = useMatches(); + const crumbs = matches + // first get rid of any matches that don't have handle and crumb + .filter((match) => Boolean(match.handle?.crumb)) + // now map them into an array of elements, passing the loader + // data to each one + .map((match) => match.handle.crumb(match.data)); - return ( -
    - {crumbs.map((crumb, index) => ( - // eslint-disable-next-line react/no-array-index-key -
  1. {crumb}
    2. - ))} -
- ); + return ( +
+
    + {crumbs.map((crumb, index) => ( + // eslint-disable-next-line react/no-array-index-key +
  1. + {crumb} +
    2. + ))} +
+
+ ); } export default Breadcrumbs; diff --git a/src/components/breadcrumbs.module.css b/src/components/breadcrumbs.module.css index 82d0397a..4ee12f85 100644 --- a/src/components/breadcrumbs.module.css +++ b/src/components/breadcrumbs.module.css @@ -1,18 +1,18 @@ .breadcrumbs { - display: flex; - flex-direction: row; - gap: .4rem; + display: flex; + flex-direction: row; + gap: 0.4rem; } .crumb { - &::after { - content: '>'; - margin-left: .4rem; - } + &::after { + content: '>'; + margin-left: 0.4rem; + } - &:last-child { - &::after { - content: ''; - } + &:last-child { + &::after { + content: ''; } + } } diff --git a/src/index.jsx b/src/index.tsx similarity index 82% rename from src/index.jsx rename to src/index.tsx index 759c7c32..d29472ac 100644 --- a/src/index.jsx +++ b/src/index.tsx @@ -5,13 +5,13 @@ import { createBrowserRouter, RouterProvider, Link } from 'react-router-dom'; import './index.css'; const App = lazy(() => import('@components/App')); -const Home = lazy(() => import('./pages')); -const NoMatch = lazy(() => import('./pages/[all]')); +const Home = lazy(() => import('@pages/index')); +const NoMatch = lazy(() => import('@pages/[all]')); -const NewPost = lazy(() => import('./pages/posts/new')); -const EditPost = lazy(() => import('./pages/posts/[postId]/edit')); -const UserInfo = lazy(() => import('./pages/users/[userName]')); -const BlogPost = lazy(() => import('./pages/posts/[postId]')); +const NewPost = lazy(() => import('@pages/posts/new')); +const BlogPost = lazy(() => import('@pages/posts/[postId]')); +const EditPost = lazy(() => import('@pages/posts/[postId]/edit')); +const UserInfo = lazy(() => import('@pages/users/[userName]')); const root = createRoot(document.getElementById('app')); diff --git a/src/pages/[all].tsx b/src/pages/[all].tsx index d3ea1639..28220d94 100644 --- a/src/pages/[all].tsx +++ b/src/pages/[all].tsx @@ -1,6 +1,4 @@ -import { - useLocation -} from "react-router-dom"; +import { useLocation } from 'react-router-dom'; function NoMatch() { const location = useLocation(); @@ -8,7 +6,9 @@ function NoMatch() { return (

404

-

No match for {location.pathname}

+

+ No match for {location.pathname} +

); } diff --git a/tsconfig.json b/tsconfig.json index 2cf484ef..466c4511 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -31,6 +31,7 @@ // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ "paths": { "@components/*": ["./src/components/*"], + "@pages/*": ["./src/pages/*"], "@services/*": ["./src/services/*"] }, /* Specify a set of entries that re-map imports to additional lookup locations. */ // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ diff --git a/vite.config.ts b/vite.config.ts index 24e82865..7bac8924 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -6,7 +6,10 @@ import { VitePWA } from 'vite-plugin-pwa'; // const path = require('node:path'); export default defineConfig({ - base: process.env.NODE_ENV === 'production' ? '/local-microblogging-client/' : '/', + base: + process.env.NODE_ENV === 'production' + ? '/local-microblogging-client/' + : '/', build: { emptyOutDir: true, }, @@ -27,12 +30,14 @@ export default defineConfig({ alias: [ { find: '@components', - // replacement: path.resolve(__dirname, './src'), replacement: '/src/components', }, + { + find: '@pages', + replacement: '/src/pages', + }, { find: '@services', - // replacement: path.resolve(__dirname, './src'), replacement: '/src/services', }, ],