feat: add Changelog component and integrate with SupportPage

Author: shuvomohajan

frontend/components/Changelog/data/useChangelog.ts

@@ -0,0 +1,26 @@
+import config from '@config/config'
+import { useQuery } from '@tanstack/react-query'
+
+const importReadmeFile = async () => {
+  const response = await fetch(`${config.ROOT_URL}/readme.txt`)
+  if (!response.ok) {
+    throw new Error('Failed to fetch the README.txt file')
+  }
+  return response.text()
+}
+
+export default function useChangelog() {
+  const { data } = useQuery({
+    queryFn: importReadmeFile,
+    queryKey: ['changelog'],
+    select: res =>
+      res
+        .match(/==\s*Changelog\s*==\s*([\S\s]*?)(?=\s*==|$)/g)?.[0]
+        ?.replaceAll('== Changelog ==', '') // Convert changelog heading
+        ?.replaceAll(/^= (.+?) =/gm, '## $1') // Convert version headings
+  })
+
+  return {
+    changelog: data
+  }
+}

frontend/components/Changelog/index.ts

@@ -0,0 +1 @@
+export { default } from './ui/Changelog'

frontend/components/Changelog/ui/Changelog.tsx

@@ -0,0 +1,37 @@
+import { __ } from '@common/helpers/i18nwrap'
+import LucideIcn from '@icons/LucideIcn'
+import { Button, Drawer } from 'antd'
+import { useToggle } from 'react-use'
+import { twMerge } from 'tailwind-merge'
+
+import ChangelogContent from './ChangelogContent'
+
+const drawerClassNames =
+  'mt-[33px] h-[calc(100vh-40px)] rounded-md border-2 border-[var(--wp-bg-color)] ring-4 ring-[var(--wp-bg-color)] dark:border-[#1f1f1f] dark:bg-slate-950'
+const wrapperClassName = 'drawer-decoration mr-1 shadow-none'
+
+export default function Changelog() {
+  const [isOpen, toggle] = useToggle(false)
+
+  const handleClose = () => toggle(false)
+
+  return (
+    <div>
+      <Button className="mb-12" icon={<LucideIcn name="file-clock" />} onClick={toggle}>
+        {`Changelog`}
+      </Button>
+
+      <Drawer
+        className={twMerge([drawerClassNames, 'bg-slate-50'])}
+        classNames={{ wrapper: wrapperClassName }}
+        mask={false}
+        onClose={handleClose}
+        open={isOpen}
+        title={__('Changelog')}
+        width={500}
+      >
+        <ChangelogContent />
+      </Drawer>
+    </div>
+  )
+}

frontend/components/Changelog/ui/ChangelogContent.tsx

@@ -0,0 +1,16 @@
+import Markdown from 'react-markdown'
+
+import useChangelog from '../data/useChangelog'
+import cls from './changelog.module.css'
+
+export default function ChangelogContent() {
+  const { changelog } = useChangelog()
+
+  if (!changelog) return
+
+  return (
+    <div className={cls.changelog}>
+      <Markdown>{changelog}</Markdown>
+    </div>
+  )
+}

frontend/components/Changelog/ui/changelog.module.css

@@ -0,0 +1,13 @@
+.changelog ul {
+  list-style-type: disc;
+  margin-left: 20px;
+}
+
+.changelog h2 {
+  margin-bottom: 15px;
+}
+
+.changelog h2:first-child {
+  margin-bottom: 20px;
+  font-size: 1.25rem;
+}

frontend/components/SupportPage/SupportPage.tsx

@@ -2,6 +2,7 @@ import { __ } from '@common/helpers/i18nwrap'
 import { Col, Row, theme, Typography } from 'antd'
 import { type ReactNode } from 'react'
 
+import Changelog from '../Changelog'
 import FacebookCommunityCard from '../FacebookCommunityCard'
 import License from '../License.pro'
 import pluginInfoData from './data/pluginInfoData'
@@ -46,6 +47,8 @@ export default function SupportPage({
 
           {isTelemetryVisible && <Improvement />}
 
+          <Changelog />
+
           <SupportLinks pluginSlug={pluginSlug} />
         </Col>
 

package.json

@@ -58,6 +58,8 @@
     "simplebar-react": "^3.2.6",
     "tippy.js": "^6.3.7",
     "use-immer": "^0.10.0",
+    "tailwind-merge": "^2.6.0",
+    "react-markdown": "^9.0.3",
     "vite-plugin-mkcert": "^1.17.5"
   },
   "devDependencies": {
@@ -142,4 +144,4 @@
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^1.6.0"
   }
-}
+}