[#365] Blog.Add path aliases. (#421)

* [#365] Blog.Add path aliases. Fix paths. Add some entry points (index.ts) * [#365] Add aliases for tests * [#365] Fix vite and ts configs for aliases, add vite-tsconfig-paths plugin * [#394] Fix import points i18n and Utils, fix paths with alias * [#394] Update vite-tsconfig-paths to 4.2.0 in ligretto-frontend, fix unexpected change in layout.tsx
MemeBattle · Sep 5, 2023 · 6fedc59 · 6fedc59 · github-actions · Sep 5, 2023
1 parent 7386e4d
commit 6fedc59
Show file tree

Hide file tree

Showing 22 changed files with 86 additions and 97 deletions.
diff --git a/apps/blog/package.json b/apps/blog/package.json
@@ -45,6 +45,7 @@
     "tailwindcss": "^3.3.1",
     "typescript": "^5.0.4",
     "unist-util-visit": "^4.1.2",
+    "vite-tsconfig-paths": "^4.2.0",
     "vitest": "^0.32.0"
   }
 }
diff --git a/apps/blog/src/app/[locale]/layout.tsx b/apps/blog/src/app/[locale]/layout.tsx
@@ -2,13 +2,14 @@ import './globals.css'
 import type { Metadata } from 'next'
 import localFont from 'next/font/local'
 import { dir } from 'i18next'
-import type { Language } from '../../i18n/i18n.settings'
-import { languages } from '../../i18n/i18n.settings'
-import { useTranslation } from '../../i18n'
-import { LanguageSwitcher } from '../../components/LanguageSwitcher'
-import { generateFullUrl } from '../../utils/generateFullUrl'
-import { Footer } from '../../components/Footer'
-import { Amplitude } from '../../components/Amplitude'
+
+import { Amplitude } from '@/components/Amplitude'
+import { LanguageSwitcher } from '@/components/LanguageSwitcher'
+import { Footer } from '@/components/Footer'
+import { generateFullUrl } from '@/utils/generateFullUrl'
+import { languages } from '@/i18n/i18n.settings'
+import type { Language } from '@/i18n/i18n.settings'
+import { useTranslation } from '@/i18n'
 
 type RootLayoutParams = { locale: Language }
 

diff --git a/apps/blog/src/app/[locale]/page.tsx b/apps/blog/src/app/[locale]/page.tsx
@@ -1,5 +1,5 @@
 import { redirect } from 'next/navigation'
-import type { Language } from '../../i18n/i18n.settings'
+import type { Language } from '@/i18n/i18n.settings'
 
 export default function BlogPage({ params: { locale } }: { params: { locale: Language } }) {
   return redirect(`/${locale}/posts`)

diff --git a/apps/blog/src/app/[locale]/posts/[slug]/page.tsx b/apps/blog/src/app/[locale]/posts/[slug]/page.tsx
@@ -3,21 +3,20 @@ import type { Metadata, Route } from 'next'
 import Image from 'next/image'
 import type { WithContext, BlogPosting } from 'schema-dts'
 
-import { Mdx } from '../../../../components/Mdx'
+import { Mdx } from '@/components/Mdx'
 import type { BlogPost } from 'contentlayer/generated'
 import { allBlogPosts, allMemebers } from 'contentlayer/generated'
-import { Chip } from '../../../../components/Chip'
-import { JsonLDScript } from '../../../../components/JsonLDScript'
-import type { Language } from '../../../../i18n/i18n.settings'
-import { ChipsRow } from '../../../../components/ChipsRow'
-import { formatDate } from '../../../../utils/formatDate'
-
+import { Chip } from '@/components/Chip'
+import { JsonLDScript } from '@/components/JsonLDScript'
+import { ChipsRow } from '@/components/ChipsRow'
 import { isPostShouldBePickedByLocale } from '../_utils/isPostShouldBePickedByLocale'
 import { allBlogPostsWithTranslates } from '../_content'
-import { generateFullUrl } from '../../../../utils/generateFullUrl'
-import { memeberToPostAuthor } from '../../../../utils/memeberToPostAuthor'
-import { TOC } from '../../../../components/TOC'
-import { PostAuthor } from '../../../../components/PostAuthor'
+import { TOC } from '@/components/TOC'
+import { PostAuthor } from '@/components/PostAuthor'
+import { generateFullUrl } from '@/utils/generateFullUrl'
+import { memeberToPostAuthor } from '@/utils/memeberToPostAuthor'
+import { formatDate } from '@/utils/formatDate'
+import type { Language } from '@/i18n/i18n.settings'
 
 interface BlogProps {
   params: {

diff --git a/apps/blog/src/app/[locale]/posts/_content/index.ts b/apps/blog/src/app/[locale]/posts/_content/index.ts
@@ -1,6 +1,6 @@
 import type { BlogPost } from 'contentlayer/generated'
 import { allBlogPosts } from 'contentlayer/generated'
-import type { Language } from '../../../../i18n/i18n.settings'
+import type { Language } from '@/i18n/i18n.settings'
 
 export { allBlogPosts }
 export type BlogPostWithTranslates = BlogPost & { translates: { [key in Language]?: BlogPost } }

diff --git a/apps/blog/src/app/[locale]/posts/_utils/filterBlogPosts.ts b/apps/blog/src/app/[locale]/posts/_utils/filterBlogPosts.ts
@@ -1,6 +1,6 @@
-import type { Language } from '../../../../i18n/i18n.settings'
 import { isPostShouldBePickedByLocale } from './isPostShouldBePickedByLocale'
 import type { BlogPostWithTranslates } from '../_content'
+import type { Language } from '@/i18n/i18n.settings'
 
 export function filterBlogPosts<T extends Pick<BlogPostWithTranslates, 'title' | 'summary' | 'tags' | 'slug' | 'lang' | 'translates' | 'body'>>(
   blogPosts: T[],

diff --git a/apps/blog/src/app/[locale]/posts/_utils/isPostShouldBePickedByLocale.ts b/apps/blog/src/app/[locale]/posts/_utils/isPostShouldBePickedByLocale.ts
@@ -1,6 +1,6 @@
 import type { BlogPostWithTranslates } from '../_content'
-import type { Language } from '../../../../i18n/i18n.settings'
-import { fallbackLanguage } from '../../../../i18n/i18n.settings'
+import type { Language } from '@/i18n/i18n.settings'
+import { fallbackLanguage } from '@/i18n/i18n.settings'
 
 export const isPostShouldBePickedByLocale = (post: Pick<BlogPostWithTranslates, 'slug' | 'lang' | 'translates'>, locale: Language): boolean => {
   /**

diff --git a/apps/blog/src/app/[locale]/posts/layout.tsx b/apps/blog/src/app/[locale]/posts/layout.tsx
@@ -2,11 +2,11 @@ import type { ReactNode } from 'react'
 import type { Metadata } from 'next'
 import { Suspense } from 'react'
 
-import { Breadcrumbs } from '../../../components/Breadcrumbs'
-import type { Language } from '../../../i18n/i18n.settings'
-import { useTranslation } from '../../../i18n'
-import { generateFullUrl } from '../../../utils/generateFullUrl'
-import memebattleLogo from '../../../assets/memebattle-logo.svg'
+import { Breadcrumbs } from '@/components/Breadcrumbs'
+import memebattleLogo from '@/assets/memebattle-logo.svg'
+import { generateFullUrl } from '@/utils/generateFullUrl'
+import type { Language } from '@/i18n/i18n.settings'
+import { useTranslation } from '@/i18n'
 
 export async function generateMetadata({ params }: { params: { locale: Language } }): Promise<Metadata> {
   // useTranslation on server isn't react hook

diff --git a/apps/blog/src/app/[locale]/posts/page.tsx b/apps/blog/src/app/[locale]/posts/page.tsx
@@ -1,17 +1,18 @@
 import Link from 'next/link'
 import type { Metadata } from 'next'
+
 import { allBlogPostsWithTranslates, uniqTags } from './_content'
 import { filterBlogPosts } from './_utils/filterBlogPosts'
-import { useTranslation } from '../../../i18n'
-import type { Language } from '../../../i18n/i18n.settings'
-import { SearchInput } from '../../../components/SearchInput'
+import { useTranslation } from '@/i18n'
+import { SearchInput } from '@/components/SearchInput'
 import { Suspense } from 'react'
-import { formatDate } from '../../../utils/formatDate'
-import { TagsSelector } from '../../../components/TagsSelector'
-import { ChipsRow } from '../../../components/ChipsRow'
-import { Chip } from '../../../components/Chip'
-import { EmptyPlaceholder } from '../../../components/PostsList/EmptyPlaceholder'
-import { PostsListItem } from '../../../components/PostsListItem'
+import { TagsSelector } from '@/components/TagsSelector'
+import { ChipsRow } from '@/components/ChipsRow'
+import { Chip } from '@/components/Chip'
+import { EmptyPlaceholder } from '@/components/PostsList'
+import { PostsListItem } from '@/components/PostsListItem'
+import { formatDate } from '@/utils/formatDate'
+import type { Language } from '@/i18n/i18n.settings'
 
 function SearchLoader() {
   return <div className="rounded-md shadow-sm h-16 border-0 text-gray-900" />

diff --git a/apps/blog/src/components/Breadcrumbs/Breadcrumbs.tsx b/apps/blog/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -2,7 +2,7 @@
 
 import Link from 'next/link'
 import { useSelectedLayoutSegment } from 'next/navigation'
-import type { Language } from '../../i18n/i18n.settings'
+import type { Language } from '@/i18n/i18n.settings'
 
 export function Breadcrumbs({ locale, translates }: { locale: Language; translates: { mainPage: string; posts: string } }) {
   const segment = useSelectedLayoutSegment()

diff --git a/apps/blog/src/components/Footer/Footer.tsx b/apps/blog/src/components/Footer/Footer.tsx
@@ -1,8 +1,8 @@
 import Image from 'next/image'
 
 import gitHubLogo from './GitHub_Logo_White.png'
-import type { Language } from '../../i18n/i18n.settings'
-import { useTranslation } from '../../i18n'
+import type { Language } from '@/i18n/i18n.settings'
+import { useTranslation } from '@/i18n'
 import memebattleLogo from '../../assets/memebattle-logo.svg'
 
 export async function Footer({ locale }: { locale: Language }) {

diff --git a/apps/blog/src/components/LanguageSwitcher/Dropdown.tsx b/apps/blog/src/components/LanguageSwitcher/Dropdown.tsx
@@ -3,7 +3,7 @@
 import Link from 'next/link'
 import { usePathname, useSearchParams } from 'next/navigation'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
-import type { Language } from '../../i18n/i18n.settings'
+import type { Language } from '@/i18n/i18n.settings'
 import type { ReactNode } from 'react'
 import { useMemo } from 'react'
 import type { Route } from 'next'

diff --git a/apps/blog/src/components/LanguageSwitcher/LanguageSwitcher.tsx b/apps/blog/src/components/LanguageSwitcher/LanguageSwitcher.tsx
@@ -1,6 +1,6 @@
-import type { Language } from '../../i18n/i18n.settings'
-import { languages } from '../../i18n/i18n.settings'
-import { useTranslation } from '../../i18n'
+import type { Language } from '@/i18n/i18n.settings'
+import { languages } from '@/i18n/i18n.settings'
+import { useTranslation } from '@/i18n'
 import { Dropdown } from './Dropdown'
 import { Suspense } from 'react'
 

diff --git a/apps/blog/src/components/PostsList/EmptyPlaceholder.tsx b/apps/blog/src/components/PostsList/EmptyPlaceholder.tsx
@@ -1,8 +1,9 @@
 import Image from 'next/image'
 import emptyImage from './empty_image.svg'
 import { Trans } from 'react-i18next/TransWithoutContext'
-import { useTranslation } from '../../i18n'
-import type { Language } from '../../i18n/i18n.settings'
+import { useTranslation } from '@/i18n'
+import type { Language } from '@/i18n/i18n.settings'
+
 export async function EmptyPlaceholder({ language }: { language: Language }) {
   const { t } = await useTranslation(language, 'posts')
 

diff --git a/apps/blog/src/components/PostsList/index.ts b/apps/blog/src/components/PostsList/index.ts
@@ -0,0 +1 @@
+export { EmptyPlaceholder } from './EmptyPlaceholder'
diff --git a/apps/blog/src/components/TOC/TOC.tsx b/apps/blog/src/components/TOC/TOC.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 import type { TOCTree, TOCTreeItem } from '../../types'
-import { useTranslation } from '../../i18n'
-import type { Language } from '../../i18n/i18n.settings'
+import { useTranslation } from '@/i18n'
+import type { Language } from '@/i18n/i18n.settings'
 
 interface TOCProps {
   toc: TOCTree

diff --git a/apps/blog/src/middleware.ts b/apps/blog/src/middleware.ts
@@ -1,7 +1,7 @@
 import type { NextRequest } from 'next/server'
 import { NextResponse } from 'next/server'
 import Negotiator from 'negotiator'
-import { fallbackLanguage, languages } from './i18n/i18n.settings'
+import { fallbackLanguage, languages } from '@/i18n/i18n.settings'
 
 export const config = {
   // matcher: '/:lng*'

diff --git a/apps/blog/src/utils/formatDate.ts b/apps/blog/src/utils/formatDate.ts
@@ -1,4 +1,4 @@
-import type { Language } from '../i18n/i18n.settings'
+import type { Language } from '@/i18n/i18n.settings'
 
 export function formatDate(dateString: string, locale: Language) {
   return new Intl.DateTimeFormat(locale).format(new Date(dateString))

diff --git a/apps/blog/tsconfig.json b/apps/blog/tsconfig.json
@@ -21,7 +21,8 @@
     "paths": {
       "contentlayer/generated": [
         "./.contentlayer/generated"
-      ]
+      ],
+      "@/*": ["./src/*"]
     },
     "types": ["./src/i18n/i18next.d.ts", "vitest/globals"],
     "plugins": [

diff --git a/apps/blog/vitest.config.ts b/apps/blog/vitest.config.ts
@@ -1,20 +1,13 @@
-import { fileURLToPath } from 'node:url'
 import { defineConfig } from 'vitest/config'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
 import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tsconfigPaths()],
   test: {
     globals: true,
     environment: 'jsdom',
   },
-  resolve: {
-    alias: [
-      {
-        find: 'contentlayer/generated',
-        replacement: fileURLToPath(new URL('./.contentlayer/generated', import.meta.url)),
-      },
-    ],
-  },
 })
diff --git a/apps/ligretto-frontend/package.json b/apps/ligretto-frontend/package.json
@@ -23,7 +23,7 @@
     "typescript": "^5.0.4",
     "vite": "^4.3.9",
     "vite-plugin-svgr": "^2.2.0",
-    "vite-tsconfig-paths": "^3.5.0",
+    "vite-tsconfig-paths": "^4.2.0",
     "vitest": "^0.32.0"
   },
   "dependencies": {

diff --git a/yarn.lock b/yarn.lock
@@ -2107,13 +2107,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@cush/relative@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "@cush/relative@npm:1.0.0"
-  checksum: 708681b61986e5f74e44ca5824503c23adb02c088b998429e8ecbbb8e7a4133b9be491cdb6d2b24b39fd9b55fcef109d41ac4f69b74f1f9466268f3c49c020a5
-  languageName: node
-  linkType: hard
-
 "@discoveryjs/json-ext@npm:^0.5.0, @discoveryjs/json-ext@npm:^0.5.3":
   version: 0.5.7
   resolution: "@discoveryjs/json-ext@npm:0.5.7"
@@ -3285,6 +3278,7 @@ __metadata:
     tailwindcss: ^3.3.1
     typescript: ^5.0.4
     unist-util-visit: ^4.1.2
+    vite-tsconfig-paths: ^4.2.0
     vitest: ^0.32.0
   languageName: unknown
   linkType: soft
@@ -3379,7 +3373,7 @@ __metadata:
     typescript: ^5.0.4
     vite: ^4.3.9
     vite-plugin-svgr: ^2.2.0
-    vite-tsconfig-paths: ^3.5.0
+    vite-tsconfig-paths: ^4.2.0
     vitest: ^0.32.0
   languageName: unknown
   linkType: soft
@@ -12293,13 +12287,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob-regex@npm:^0.3.0":
-  version: 0.3.2
-  resolution: "glob-regex@npm:0.3.2"
-  checksum: 4f7adee18e750cbc3a328acb879631feca56dbfc03016cec53d5a54e50663ddc96e24e244ec8c1a5ee883515126754d89deb825eba529d32b869a0ae46f95e5c
-  languageName: node
-  linkType: hard
-
 "glob-to-regexp@npm:^0.3.0":
   version: 0.3.0
   resolution: "glob-to-regexp@npm:0.3.0"
@@ -19294,18 +19281,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"recrawl-sync@npm:^2.0.3":
-  version: 2.2.2
-  resolution: "recrawl-sync@npm:2.2.2"
-  dependencies:
-    "@cush/relative": ^1.0.0
-    glob-regex: ^0.3.0
-    slash: ^3.0.0
-    tslib: ^1.9.3
-  checksum: ee0a3fdbb6c4fa7124a93ef13b87f69f9a4e7bdd0be157ca98e1951ae8d1a7bbee2ebc25de6946b0b53426f804c712ff32f6c93b916b719e865c90233386a126
-  languageName: node
-  linkType: hard
-
 "redent@npm:^3.0.0":
   version: 3.0.0
   resolution: "redent@npm:3.0.0"
@@ -21930,6 +21905,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tsconfck@npm:^2.1.0":
+  version: 2.1.2
+  resolution: "tsconfck@npm:2.1.2"
+  peerDependencies:
+    typescript: ^4.3.5 || ^5.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  bin:
+    tsconfck: bin/tsconfck.js
+  checksum: 6fd2f7de012a724f6b4bf48ae76cc7dae2b59dd5cad2dc50bac58d224d4ed7d5c43c6b26e55d3e00636f426f8b5373c996523d73b7830d05f8479a9b83282192
+  languageName: node
+  linkType: hard
+
 "tsconfig-paths-webpack-plugin@npm:^4.0.0":
   version: 4.0.0
   resolution: "tsconfig-paths-webpack-plugin@npm:4.0.0"
@@ -21964,7 +21953,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^1.8.1, tslib@npm:^1.9.0, tslib@npm:^1.9.3":
+"tslib@npm:^1.8.1, tslib@npm:^1.9.0":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"
   checksum: dbe628ef87f66691d5d2959b3e41b9ca0045c3ee3c7c7b906cc1e328b39f199bb1ad9e671c39025bd56122ac57dfbf7385a94843b1cc07c60a4db74795829acd
@@ -22892,17 +22881,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-tsconfig-paths@npm:^3.5.0":
-  version: 3.5.0
-  resolution: "vite-tsconfig-paths@npm:3.5.0"
+"vite-tsconfig-paths@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "vite-tsconfig-paths@npm:4.2.0"
   dependencies:
     debug: ^4.1.1
     globrex: ^0.1.2
-    recrawl-sync: ^2.0.3
-    tsconfig-paths: ^4.0.0
+    tsconfck: ^2.1.0
   peerDependencies:
-    vite: ">2.0.0-0"
-  checksum: d6d4828fdba639445251b3baf06901f2eb46a98b2741ba5e30e3d791c8a25f8533d23df13c5422eece63cf449865750dcd57e825dbe43b5c985e5edf42b17fea
+    vite: "*"
+  peerDependenciesMeta:
+    vite:
+      optional: true
+  checksum: 73a8467de72d7ac502328454fd00c19571cd4bad2dd5982643b24718bb95e449a3f4153cfc2d58a358bfc8f37e592fb442fc10884b59ae82138c1329160cd952
   languageName: node
   linkType: hard
St.^❔	Category	Percentage	Covered / Total
🔴	Statements	48.63%	373/767
🔴	Branches	24.53%	26/106
🔴	Functions	26.07%	55/211
🔴	Lines	46.27%	310/670