add: route to stand along page

src/App.js

@@ -6,6 +6,7 @@ import MainNavigation from "./components/Navigations/MainNavigation";
 import SideNavigation from "./components/Navigations/SideNavigation";
 import MarkdownContent from "./components/Markdowns/MarkdownContent";
 import MarkdownEditor from "./components/Markdowns/MarkdownEditor";
+import StandaloneMarkdownPage from "./components/Markdowns/StandaloneMarkdownPage";
 import "./App.css";
 import Callback from "./components/KeycloakCallbacks/Callback";
 import Footer from "./components/Footer";
@@ -18,6 +19,9 @@ const App = () => {
     return (
         <Provider store={store}>
             <Router>
+                <Routes>
+                    <Route path="/pg/*" element={<StandaloneMarkdownPage />} />
+                    <Route path="*" element={
                         <div className="app-container">
                             <MainNavigation />
                             <div className="content-container">
@@ -42,6 +46,8 @@ const App = () => {
                                 </main>
                             </div>
                         </div>
+                    } />
+                </Routes>
                 <Footer />
             </Router>
         </Provider>

src/components/MarkdownTemplate/ParametersManager.js

@@ -70,9 +70,11 @@ const ParametersManager = ({ parameters, onChange }) => {
             <div style={{ maxHeight: "50vh", overflowY: "auto" }}>
                 {_parameters.map((param, index) => (
                     <div key={index} className="box" style={{ marginBottom: "0.5rem" }}>
-                        <div className="field is-grouped is-grouped-multiline">
+                        <div className="field is-grouped is-align-items-end">
+                            <div className="control">
+                                <label className="label">Name:</label>
+                            </div>
                             <div className="control is-expanded">
-                                <label className="label mb-1">Name:</label>
                                 <input
                                     type="text"
                                     className="input"

src/components/MarkdownTemplate/TypeEditor.js

@@ -69,7 +69,6 @@ const TypeEditor = ({ type, onChange }) => {
             case 'template':
                 return (
                     <div className="field">
-                        <label className="label">Template</label>
                         <div className="control">
                             <TemplateSelector
                                 template={_type.definition.template}
@@ -95,7 +94,7 @@ const TypeEditor = ({ type, onChange }) => {
     return (
         <div className="box">
             <div className="field">
-                <label className="label">Type</label>
+                {/*<label className="label">Type</label>*/}
                 <div className="control">
                     <div className="select is-fullwidth">
                         <select

src/components/Markdowns/MarkdownContent.js

@@ -9,11 +9,13 @@ import {usePath} from "../../utils/queries/path-queries";
 import {useMarkdownSetting} from "../../utils/queries/markdown-setting-queries";
 import {useMarkdownTemplate} from "../../utils/queries/markdown-template-queries";
 import {useMarkdownTemplateSetting} from "../../utils/queries/markdown-template-setting-queries";
+import MarkdownSettingModal from "../Modals/MarkdownSettingModal";
 
 const MarkdownContent = () => {
     const { strId } = useParams();
     const id = Number(strId);
     const [indexTitle, setIndexTitle] = useState(null);
+    const [isSettingModalOpen, setSettingModalOpen] = useState(false);
     const {data: markdown, isLoading, error} = useMarkdown(id);
     const {data: path, isFetching: isPathFetching} = usePath(markdown?.path_id);
     const {data: setting, isFetching: isSettingFetching} = useMarkdownSetting(markdown?.setting_id);
@@ -50,15 +52,28 @@ const MarkdownContent = () => {
 
     return (
         <div className="markdown-content-container">
-            <div className="field has-addons markdown-content-container-header">
+            <div className="is-flex is-justify-content-space-between is-align-items-center markdown-content-container-header">
-                <h1 className="title control">{markdown.title === "index" ? indexTitle : markdown.title}</h1>
+                <h1 className="title">{markdown.title === "index" ? indexTitle : markdown.title}</h1>
                 <PermissionGuard rolesRequired={['admin']}>
+                    <div className="field has-addons">
+                        <button
+                            className="control button is-info is-light"
+                            onClick={() => setSettingModalOpen(true)}
+                        >
+                            Settings
+                        </button>
                         <Link to={`/markdown/edit/${id}`} className="control button is-primary is-light">
                             Edit
                         </Link>
+                    </div>
                 </PermissionGuard>
             </div>
             <MarkdownView content={JSON.parse(markdown.content)} template={template}/>
+            <MarkdownSettingModal 
+                isOpen={isSettingModalOpen}
+                markdown={markdown}
+                onClose={() => setSettingModalOpen(false)}
+            />
         </div>
     );
 };

src/utils/queries/markdown-queries.js

@@ -52,6 +52,7 @@ export const useMarkdownsByPath = (pathId) => {
     });
 };
 
+
 export const useSaveMarkdown = () => {
     const queryClient = useQueryClient();
     const config = useConfig();