Merge pull request #132 from pacstall/fix-repology-filter-and-client-…

…deps

Fix repology filter and client deps

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:lts-alpine AS client
+FROM node:18-alpine AS client
 
 ARG version='development'
 

client/Makefile

@@ -7,4 +7,4 @@ dist: $(shell find . -not \( -path dist -prune \) -not \( -path .parcel-cache -p
 	npm run build
 
 dist/swagger: dist
-	mv dist/public/swagger dist/swagger
+	mv dist/public/public/swagger dist/swagger

client/package.json

@@ -1,4 +1,5 @@
 {
+    "license": "AGPL-3.0-or-later",
     "scripts": {
         "start": "npm run clean && mkdir -p dist/public && cp -r public/ dist/public && npx parcel index.html",
         "build": "rm -rf dist && NODE_ENV=production VERSION=\"$(npm run version)\" npx parcel build index.production.html && cp -r public/ dist/public && mv dist/index.production.html dist/index.html",
@@ -8,42 +9,41 @@
         "clean": "rm -rf .parcel-cache && rm -rf dist"
     },
     "devDependencies": {
-        "@chakra-ui/icons": "^1.1.7",
-        "@types/node": "^17.0.23",
-        "@types/react": "^17.0.43",
-        "@types/react-dom": "^17.0.14",
+        "@types/node": "^18.7.18",
+        "@types/react": "^18.0.20",
+        "@types/react-dom": "^18.0.6",
         "@types/react-helmet": "^6.1.5",
         "@types/react-router-dom": "^5.3.3",
-        "autoprefixer": "^10.4.8",
-        "parcel": "^2.4.1",
+        "autoprefixer": "^10.4.11",
+        "buffer": "^6.0.3",
+        "parcel": "^2.7.0",
         "parcel-plugin-static-files-copy": "^2.6.0",
-        "postcss": "^8.4.12",
-        "postcss-modules": "^4.3.1",
-        "prettier": "2.6.2",
-        "typescript": "^4.6.3"
+        "postcss": "^8.4.16",
+        "postcss-modules": "^5.0.0",
+        "prettier": "^2.7.1",
+        "typescript": "^4.8.3"
     },
     "dependencies": {
-        "@chakra-ui/icons": "^1.1.7",
-        "@chakra-ui/react": "^1.8.7",
-        "@emotion/react": "^11",
-        "@emotion/styled": "^11",
+        "@chakra-ui/icons": "^2.0.10",
+        "@chakra-ui/react": "^2.3.4",
+        "@emotion/react": "^11.10.4",
+        "@emotion/styled": "^11.10.4",
         "axios": "^0.27.2",
-        "axios-cache-adapter": "^2.7.3",
+        "framer-motion": "^7.3.6",
         "joi": "^17.6.0",
         "lodash": "^4.17.21",
         "query-string": "^7.1.1",
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "react-helmet": "^6.1.0",
-        "react-router-dom": "^6.3.0",
+        "react-router-dom": "^6.4.0",
         "react-use-cookie": "^1.4.0",
         "recoil": "^0.7.5",
-        "use-query-params": "^1.2.3"
+        "use-query-params": "^2.1.1"
     },
     "staticFiles": {
         "staticPath": [
             "public"
         ]
     }
 }
-

client/src/components/AsciinemaFrame.tsx

@@ -21,7 +21,7 @@ const AsciinemaFrame: FC<{
             width: '100%',
             float: 'none',
             visibility: 'visible',
-            height: 'min(75vw, 650px)',
+            aspectRatio: '16 / 9',
         }}
     ></iframe>
 )

client/src/components/Card.tsx

@@ -1,7 +1,10 @@
-import { FC } from 'react'
+import { FC, ReactNode } from 'react'
 import { Stack, Text } from '@chakra-ui/react'
 
-const Card: FC<{ title: string }> = ({ title, children }) => {
+const Card: FC<{ title: string; children: ReactNode }> = ({
+    title,
+    children,
+}) => {
     return (
         <Stack p='4' boxShadow='lg' m='4' borderRadius='sm'>
             <Stack direction='row' alignItems='center'>

client/src/components/OneLineCodeSnippet.tsx

@@ -4,7 +4,7 @@ import {
     Tooltip,
     useColorModeValue,
 } from '@chakra-ui/react'
-import { CSSProperties, FC, MutableRefObject, useRef } from 'react'
+import { CSSProperties, FC, MutableRefObject, ReactNode, useRef } from 'react'
 import { useRecoilState } from 'recoil'
 import useNotification from '../hooks/useNotification'
 import { featureFlagsState } from '../state/feature-flags'
@@ -58,10 +58,10 @@ const nonSelectableStyle: CSSProperties = {
     userSelect: 'none',
 }
 
-const OneLineCodeSnippet: FC<{ size?: 'xs' | 'sm' | 'md' | 'lg' }> = ({
-    children,
-    size,
-}) => {
+const OneLineCodeSnippet: FC<{
+    size?: 'xs' | 'sm' | 'md' | 'lg'
+    children: ReactNode
+}> = ({ children, size }) => {
     const notify = useNotification()
     const ref = useRef<HTMLInputElement>()
     const text = children!.toString() as string

client/src/components/animations/PageAnimation.tsx

@@ -1,10 +1,10 @@
 import { Fade } from '@chakra-ui/react'
-import { FC, useMemo } from 'react'
+import { FC, ReactNode, useMemo } from 'react'
 import browser from '../../util/browser'
 
 const Empty: FC<any> = ({ children }) => <>{children}</>
 
-const PageAnimation: FC = ({ children }) => {
+const PageAnimation: FC<{ children: ReactNode }> = ({ children }) => {
     const Fader: typeof Fade = useMemo(
         () => (browser.isFirefox ? (Empty as any) : Fade),
         [],

client/src/components/package-details/PackageDetailsTable.tsx

@@ -10,18 +10,18 @@ import {
     Icon,
     UseDisclosureProps,
 } from '@chakra-ui/react'
-import { FC } from 'react'
+import { FC, ReactNode } from 'react'
 import { Link as Rlink } from 'react-router-dom'
 import { useFeatureFlag } from '../../state/feature-flags'
 import PackageInfo from '../../types/package-info'
 import SemanticVersionColor from '../SemanticVersionColor'
 import PackageDetailsMaintainer from './PackageDetailsMaintainer'
 
-const Entry: FC<{ header: string; disabled?: boolean }> = ({
-    header,
-    children,
-    disabled,
-}) => (
+const Entry: FC<{
+    header: string
+    disabled?: boolean
+    children: ReactNode
+}> = ({ header, children, disabled }) => (
     <>
         {!disabled && (
             <Tr>

client/src/components/packages/PackageList.tsx

@@ -1,4 +1,4 @@
-import { Box, Center, Text } from '@chakra-ui/react'
+import { Box, Center, Text, chakra } from '@chakra-ui/react'
 import { FC } from 'react'
 import PackageInfo from '../../types/package-info'
 import PackageTable from './PackageTable'
@@ -7,9 +7,20 @@ const PackageList: FC<{ data: PackageInfo[] }> = ({ data }) => (
     <Box mt='10'>
         <PackageTable packages={data} />
         {data.length === 0 && (
-            <Box mt='5'>
+            <Box my='5'>
                 <Center>
-                    <Text>No packages found</Text>
+                    <Text>
+                        Not finding the App you wanted?{' '}
+                        <chakra.a
+                            href='https://github.com/pacstall/pacstall-programs/issues/new?assignees=&labels=package+request&template=PACKAGE-REQUEST.yml&title=PacReq%3A+%3Cname_of_the_package%3E'
+                            target='_blank'
+                            color='pink.400'
+                            textDecoration='underline'
+                            fontWeight='800'
+                        >
+                            Create a request!
+                        </chakra.a>
+                    </Text>
                 </Center>
             </Box>
         )}

client/src/index.tsx

@@ -1,31 +1,24 @@
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import { FC, lazy, Suspense } from 'react'
-import Home from './pages/Home'
-import NotFound from './pages/NotFound'
 import { QueryParamProvider } from 'use-query-params'
-import axios from 'axios'
-import { setupCache } from 'axios-cache-adapter'
+import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6'
 import { RecoilRoot } from 'recoil'
 import {
     ChakraProvider,
+    createStylesContext,
     extendTheme,
     localStorageManager,
-    StylesProvider,
     Text,
 } from '@chakra-ui/react'
 
 import serverConfig from './config/server'
 import CookieBanner from './components/CookieBanner'
 import Navigation from './components/Navigation'
 
-axios.defaults.adapter = setupCache({
-    clearOnError: true,
-    clearOnStale: true,
-    maxAge: 1000 * 5 * 60,
-}).adapter
-
+const Home = lazy(() => import('./pages/Home'))
+const NotFound = lazy(() => import('./pages/NotFound'))
 const Packages = lazy(() => import('./pages/Packages'))
 const PackageDetails = lazy(() => import('./pages/PackageDetails'))
 const PrivacyPolicy = lazy(() => import('./pages/PrivacyPolicy'))
@@ -56,51 +49,67 @@ const theme = extendTheme({
 })
 
 const Footer: FC = () => (
-    <Text
-        position='fixed'
-        right='15px'
-        bottom='15px'
-        color='gray.500'
-        fontSize='md'
-    >
-        {serverConfig.version}
-    </Text>
+    <>
+        <div style={{ marginTop: '50px' }}></div>
+        <Text
+            position='fixed'
+            right='15px'
+            bottom='15px'
+            color='gray.500'
+            fontSize='md'
+        >
+            {serverConfig.version}
+        </Text>
+    </>
 )
 
 const app = document.getElementById('app')
-ReactDOM.render(
-    <>
-        <ChakraProvider theme={theme} colorModeManager={localStorageManager}>
-            <StylesProvider value={{}}>
-                <RecoilRoot>
-                    <QueryParamProvider>
+const root = createRoot(app)
+
+const App = () => {
+    const [StylesProvider, useStyles] = createStylesContext('App')
+
+    return (
+        <>
+            <ChakraProvider
+                theme={theme}
+                colorModeManager={localStorageManager}
+            >
+                <StylesProvider value={{}}>
+                    <RecoilRoot>
                         <BrowserRouter>
-                            <Navigation />
-                            <Suspense fallback={<></>}>
-                                <Routes>
-                                    <Route index element={<Home />} />
-                                    <Route
-                                        path='/packages'
-                                        element={<Packages />}
-                                    />
-                                    <Route
-                                        path='/packages/:name'
-                                        element={<PackageDetails />}
-                                    />
-                                    <Route
-                                        path='/privacy'
-                                        element={<PrivacyPolicy />}
-                                    />
-                                    <Route path='*' element={<NotFound />} />
-                                </Routes>
-                            </Suspense>
-                            <Footer />
-                            <CookieBanner />
+                            <QueryParamProvider adapter={ReactRouter6Adapter}>
+                                <Navigation />
+                                <Suspense fallback={<></>}>
+                                    <Routes>
+                                        <Route index element={<Home />} />
+                                        <Route
+                                            path='/packages'
+                                            element={<Packages />}
+                                        />
+                                        <Route
+                                            path='/packages/:name'
+                                            element={<PackageDetails />}
+                                        />
+                                        <Route
+                                            path='/privacy'
+                                            element={<PrivacyPolicy />}
+                                        />
+                                        <Route
+                                            path='*'
+                                            element={<NotFound />}
+                                        />
+                                    </Routes>
+                                </Suspense>
+                                <Footer />
+                                <CookieBanner />
+                            </QueryParamProvider>
                         </BrowserRouter>
-                    </QueryParamProvider>
-                </RecoilRoot>
-            </StylesProvider>
-        </ChakraProvider>
-    </>,
-    app,
-)
+                    </RecoilRoot>
+                </StylesProvider>
+            </ChakraProvider>
+        </>
+    )
+}
+
+root.render(<App />)

client/src/pages/Home.tsx

@@ -102,7 +102,8 @@ const Home: FC = () => {
                         Installation Instructions
                     </Heading>
                     <OneLineCodeSnippet>
-                    sudo bash -c "$(curl -fsSL https://git.io/JsADh || wget -q https://git.io/JsADh -O -)"
+                        sudo bash -c "$(curl -fsSL https://git.io/JsADh || wget
+                        -q https://git.io/JsADh -O -)"
                     </OneLineCodeSnippet>
                     <Heading size={'lg'} mb='3' mt='10'>
                         Showcase

server/parser/parse.go

@@ -19,6 +19,8 @@ import (
 	"pacstall.dev/webserver/types/pac"
 )
 
+const PACKAGE_LIST_FILE_NAME = "./packagelist"
+
 func ParseAll() {
 	if err := git.RefreshPrograms(config.PacstallPrograms.Path, config.PacstallPrograms.URL); err != nil {
 		log.Error.Panicln("Could not update repository 'pacstall-programs'", err)
@@ -40,7 +42,7 @@ func ParseAll() {
 }
 
 func readKnownPacscriptNames() (list.List[string], error) {
-	pkglistPath := path.Join(config.PacstallPrograms.Path, "./packagelist")
+	pkglistPath := path.Join(config.PacstallPrograms.Path, PACKAGE_LIST_FILE_NAME)
 	bytes, err := os.ReadFile(pkglistPath)
 	if err != nil {
 		return nil, err