add api documentation page

commafeed-client/package.json

@@ -39,6 +39,7 @@
         "react-infinite-scroller": "^1.2.6",
         "react-redux": "^8.0.2",
         "react-router-dom": "^6.3.0",
+        "swagger-ui-react": "^4.13.2",
         "tinycon": "^0.6.8"
     },
     "devDependencies": {
@@ -48,6 +49,7 @@
         "@types/react": "^18.0.17",
         "@types/react-dom": "^18.0.6",
         "@types/react-infinite-scroller": "^1.2.3",
+        "@types/swagger-ui-react": "^4.11.0",
         "@types/tinycon": "^0.6.3",
         "@vitejs/plugin-react": "^2.0.1",
         "eslint": "^8.22.0",

commafeed-client/src/App.tsx

@@ -17,6 +17,7 @@ import { AdminUsersPage } from "pages/admin/AdminUsersPage"
 import { MetricsPage } from "pages/admin/MetricsPage"
 import { AboutPage } from "pages/app/AboutPage"
 import { AddPage } from "pages/app/AddPage"
+import { ApiDocumentationPage } from "pages/app/ApiDocumentationPage"
 import { CategoryDetailsPage } from "pages/app/CategoryDetailsPage"
 import { FeedDetailsPage } from "pages/app/FeedDetailsPage"
 import { FeedEntriesPage } from "pages/app/FeedEntriesPage"
@@ -83,6 +84,7 @@ function AppRoutes() {
                     <Route path="metrics" element={<MetricsPage />} />
                 </Route>
                 <Route path="about" element={<AboutPage />} />
+                <Route path="api" element={<ApiDocumentationPage />} />
             </Route>
             <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>

commafeed-client/src/app/slices/redirect.ts

@@ -41,6 +41,7 @@ export const redirectToMetrics = createAsyncThunk("redirect/admin/metrics", (_,
     thunkApi.dispatch(redirectTo("/app/admin/metrics"))
 )
 export const redirectToAbout = createAsyncThunk("redirect/about", (_, thunkApi) => thunkApi.dispatch(redirectTo("/app/about")))
+export const redirectToApiDocumentation = createAsyncThunk("redirect/api", (_, thunkApi) => thunkApi.dispatch(redirectTo("/app/api")))
 
 export const redirectSlice = createSlice({
     name: "redirect",

commafeed-client/src/locales/en/messages.po

@@ -283,6 +283,10 @@ msgstr "Generate new API key"
 msgid "Generated feed url"
 msgstr "Generated feed url"
 
+#: src/pages/app/AboutPage.tsx
+msgid "Go to the API documentation."
+msgstr "Go to the API documentation."
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Go to the All view"
 msgstr "Go to the All view"
@@ -341,10 +345,6 @@ msgstr "Last refresh message"
 msgid "Link"
 msgstr "Link"
 
-#: src/pages/app/AboutPage.tsx
-msgid "Link to the API documentation."
-msgstr "Link to the API documentation."
-
 #: src/hooks/useAppLoading.ts
 msgid "Loading profile..."
 msgstr "Loading profile..."

commafeed-client/src/locales/fr/messages.po

@@ -283,6 +283,10 @@ msgstr "Générer une nouvelle clé API"
 msgid "Generated feed url"
 msgstr "URL du flux généré"
 
+#: src/pages/app/AboutPage.tsx
+msgid "Go to the API documentation."
+msgstr "Aller à la documentation de l'API."
+
 #: src/components/KeyboardShortcutsHelp.tsx
 msgid "Go to the All view"
 msgstr "Aller à la catégorie Tout"
@@ -341,10 +345,6 @@ msgstr "Dernier message de mise à jour"
 msgid "Link"
 msgstr "Lien"
 
-#: src/pages/app/AboutPage.tsx
-msgid "Link to the API documentation."
-msgstr "Lien vers la documentation de l'API."
-
 #: src/hooks/useAppLoading.ts
 msgid "Loading profile..."
 msgstr "Chargement du profil ..."

commafeed-client/src/main.tsx

@@ -5,6 +5,7 @@ import relativeTime from "dayjs/plugin/relativeTime"
 import React from "react"
 import ReactDOM from "react-dom/client"
 import { Provider } from "react-redux"
+import "swagger-ui-react/swagger-ui.css"
 import { App } from "./App"
 
 dayjs.extend(relativeTime)

commafeed-client/src/pages/app/AboutPage.tsx

@@ -1,7 +1,8 @@
 import { t, Trans } from "@lingui/macro"
 import { Anchor, Box, Center, Container, Group, List, NativeSelect, SimpleGrid, Title } from "@mantine/core"
 import { Constants } from "app/constants"
-import { useAppSelector } from "app/store"
+import { redirectToApiDocumentation } from "app/slices/redirect"
+import { useAppDispatch, useAppSelector } from "app/store"
 import { CategorySelect } from "components/content/add/CategorySelect"
 import { KeyboardShortcutsHelp } from "components/KeyboardShortcutsHelp"
 import React, { useState } from "react"
@@ -49,6 +50,7 @@ function NextUnreadBookmarklet() {
 export function AboutPage() {
     const version = useAppSelector(state => state.server.serverInfos?.version)
     const revision = useAppSelector(state => state.server.serverInfos?.gitCommit)
+    const dispatch = useAppDispatch()
     return (
         <Container size="xl">
             <SimpleGrid cols={2} breakpoints={[{ maxWidth: Constants.layout.mobileBreakpoint, cols: 1 }]}>
@@ -149,8 +151,8 @@ export function AboutPage() {
                     </List>
                 </Section>
                 <Section title={t`REST API`} icon={<TbRocket size={24} />}>
-                    <Anchor href="api/" target="_blank" rel="noreferrer">
+                    <Anchor onClick={() => dispatch(redirectToApiDocumentation())}>
-                        <Trans>Link to the API documentation.</Trans>
+                        <Trans>Go to the API documentation.</Trans>
                     </Anchor>
                 </Section>
             </SimpleGrid>

commafeed-client/src/pages/app/ApiDocumentationPage.tsx

@@ -0,0 +1,12 @@
+import { Loader } from "components/Loader"
+import React, { Suspense } from "react"
+
+export function ApiDocumentationPage() {
+    // swagger-ui is very large, load only on-demand
+    const SwaggerUI = React.lazy(() => import("swagger-ui-react"))
+    return (
+        <Suspense fallback={<Loader />}>
+            <SwaggerUI url="swagger/swagger.json" />
+        </Suspense>
+    )
+}

commafeed-client/vite.config.ts

@@ -13,7 +13,7 @@ export default defineConfig({
                 plugins: ["macros"],
             },
         }),
-        eslint(),
+        eslint({ exclude: ["**/node_modules/**"] }),
         tsconfigPaths(),
         visualizer(),
     ],
@@ -22,9 +22,11 @@ export default defineConfig({
         port: 8082,
         proxy: {
             "/rest": "http://localhost:8083",
+            "/swagger": "http://localhost:8083",
         },
     },
     build: {
+        chunkSizeWarningLimit: 1000,
         rollupOptions: {
             output: {
                 manualChunks: id => {

commafeed-server/pom.xml

@@ -138,7 +138,7 @@
 								<location>com.commafeed.frontend.model</location>
 								<location>com.commafeed.frontend.model.request</location>
 							</locations>
-							<swaggerDirectory>target/swagger</swaggerDirectory>
+							<swaggerDirectory>${project.build.directory}/classes/assets/swagger</swaggerDirectory>
 							<basePath>/rest</basePath>
 							<info>
 								<title>CommaFeed</title>