diff --git a/doc/developing_skeleton.md b/doc/developing_skeleton.md index c4e32c6..447a165 100644 --- a/doc/developing_skeleton.md +++ b/doc/developing_skeleton.md @@ -7,19 +7,20 @@ This page consists of the following parts: ## _Adding a page_ -A new page can be added with the following steps: +Add a new page with the following steps: -- Create a new file for your page under /src/pages. (The name of the file wil be the slug and will be used as a breadcrumb) -- When creating a page for the PIP-template you want to add the 'DashboardTemplate' in your page -- Then you can add a template to the page (this is not necessary but makes the code base clean and organized) - - Create a new folder under /src/templates - - Create a tsx file - - Create a module.css file (if necessary) +- Create a new file for your page under `/src/pages`. The file should be named `[name].tsx`(The name of the file will be the slug displayed as a breadcrumb) +- When creating a page for the PIP template, you want to add the 'DashboardTemplate' to your `[name] .tsx'by importing it. +- You can add a template to the page (this is not necessary but makes the code base clean and organized) + - Create a new folder under `/src/templates` + - Create a `.tsx` file in `/src/templates/[templateName]` + - Create a `module.css` file (if necessary) in `/src/templates/[templateName]` -As an example I will create a file 'test' with a template called 'testTemplate'. -The code of the 'test' file looks like this: +For example, below is a `test.tsx` template with a `testTemplate`. +The code of the `test.tsx` file looks like this: ```TypeScript +// /src/pages/test.tsx import * as React from "react"; import { DashboardTemplate } from "../templates/dashboard/DashboardTemplate"; import { TestTemplate }from "../templates/testFolder/TestTemplate"; @@ -37,6 +38,7 @@ export default TestPage; The code of the 'TestTemplate' file looks like this: ```TypeScript +// /src/templates/testFolder/TestTemplate.tsx import * as React from "react"; export const TestTemplate: React.FC = () => { @@ -46,10 +48,9 @@ export const TestTemplate: React.FC = () => { }; ``` -Now we only have to add a sidenav item for this page to navigate to it. -This can be done in the DashboardTemplate. There is a const menuItems, here you can add a new item. +To demonstrate how to add elements like a `sideNav` item. We are going to add one. There is a variable called'menuItems` in the `DashboardTemplate.tsx`. Here you will add the new item. -The menuItems const should look like this +Replace the `menuItems` codeblock so it looks like this: ```TypeScript const menuItems: MenuItem[] = [ { label: t("Home"), href: "/", current: pathname === "/", icon: }, @@ -57,7 +58,7 @@ const menuItems: MenuItem[] = [ ]; ``` -Now navigate to localhost:8000 then click on the sideNav item 'Test page' +Now, if you navigate to `localhost:8000` then click on the `sideNav` item 'Test page' You should see this: ![Example](./images/testPage.png) @@ -66,28 +67,30 @@ You should see this: ## _Adding a detail page_ -A new detail page can be added with the following steps: +You can add a new detail page with the following steps: -- Create a new folder under /src/pages (The name of this folder wil be the slug and will be used as a breadcrumb) +- Create a new folder under `/src/pages/[name]` (The name of this folder will be the slug and used as a breadcrumb) - Add the page you created above to the folder -- Create an index file to the folder. This wil import and export the main page - - The code should look like this: +- Create an `index.tsx` file in the folder. This file will import and export the main page + +The code should look like this: + ```Typescript -import TestPage from "./test"; +import TestPage from "../test"; export default TestPage; ``` -As an example I added the test file to the folder 'testFolder'. -Now go to localhost:8000/testFolder. +For example, I added the test file to the folder `testFolder`. +Now go to `localhost:8000/testFolder`. You will see the same result as above. Now it's time to add the detail page -- Create a folder named [testId] under the testFolder (the parentheses around the name makes gatsby see this as a variable) +- Create a folder named `[testId]` under the `testFolder` (the square brackets around the name makes Gatsby see this as a variable) - Create a new file for the detail page. (same as described above) - Create an index file with the import and export of the detail page -Now go to localhost:8000/testFolder/testDetail. (testDetail can be anything) +Now go to `localhost:8000/testFolder/testDetai`l. (testDetail can be anything) You should see this. ![Example](./images/testDetailPage.png) @@ -95,15 +98,15 @@ You should see this. > **_NOTE_** > The breadcrumbs will be automatically generated, but we can change this. -To change the breadcrumb you have to go to the /pwa/gatsby-config.js file -Go to the gatsby-plugin-breadcrumb block in the file. -Under options, you can add an array crumbLabelUpdates. -Within that you can add an object with pathName and crumbLabel. -For the pathName we can add the folder name as it is. crumbLabel will be the outcome. +To change the breadcrumb, you have to go to the `/pwa/gatsby-config.js` file +Go to the `gatsby-plugin-breadcrumb` block in the file. +Under options, you can add an array `crumbLabelUpdates`. +Within that array, add an object with `pathName` and `crumbLabel`. +For the pathName we can add the folder name as it is. `crumbLabel` will be the outcome. Here I am editing the breadcrumbs of the pages we just created. -```Typescript +"`Typescript crumbLabelUpdates: [ { pathname: "/testFolder",