{"id":28377,"date":"2022-04-19T08:25:41","date_gmt":"2022-04-19T08:25:41","guid":{"rendered":"http:\/\/make-an-internal-docs-system"},"modified":"2022-04-19T08:25:41","modified_gmt":"2022-04-19T08:25:41","slug":"make-an-internal-docs-system","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/","title":{"rendered":"Make an Internal Docs System"},"content":{"rendered":"

Many companies face the issue of how to maintain internal documentation that connects all of the departments or products. Notion or other SaaS tools are the common answer to try and address this problem, but they usually miss some of the things you might want to customize internally.<\/p>\n

That\u2019s why we\u2019re going to make a Next.js app that will let us build our own internal docs system. We\u2019ll be able to upload screenshots or other images to Cloudinary and render Markdown on the page. You\u2019ll be able to expand this system to meet your own needs.<\/p>\n

Setting up a few things<\/h2>\n

Before we jump into writing code, there are a few tools we need to have in place. First, we\u2019ll be using Cloudinary as the host for any images we need in our docs. So go make a free account here<\/a>.<\/p>\n

We\u2019ll be working with a PostgreSQL database to save the Markdown and any other data associated with a document. If you don\u2019t have a local instance, you can download it for free here<\/a>. Make sure you note your username and password. You\u2019ll need that for the connection string to let your app interact with the database.<\/p>\n

Generating the Next app<\/h2>\n

Now that we have the tools ready to use, let\u2019s create a new Next app by running the following command in your terminal.<\/p>\n

$ yarn create next-app --typescript\n<\/code><\/span><\/pre>\n
You will be prompted for a project name in the terminal. I\u2019ve creatively called this app internal-docs<\/code>, but feel free to name it anything. This will generate a fully functional project that we can modify.<\/p>\n
There\u2019s one file we can go ahead and edit now. We know that we\u2019ll be working with Cloudinary for images and the Next app needs to know that it\u2019s ok to reference Cloudinary in the image sources. In the root of your project, open the next.config.js<\/code> file and add the following code.<\/p>\n
\/\/ next.config.js<\/span>\n...\n  reactStrictMode: true<\/span>,\n  images<\/span>: {\n    domains<\/span>: ['res.cloudinary.com'<\/span>]\n  }\n...\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now let\u2019s go ahead and install the packages that we\u2019ll be using with the following command.<\/p>\n
$ yarn add autoprefixer postcss tailwindcss axios prisma @prisma\/client @heroicons\/react\n<\/code><\/span><\/pre>\n
We\u2019ll be using Tailwind CSS to handle our styles so there\u2019s a little bit of setup we need to do for this package.<\/p>\n
Initializing Tailwind CSS<\/h3>\n
With the packages installed, we can run the following CLI command to intialize Tailwind in our project.<\/p>\n
$ npx tailwindcss init -p\n<\/code><\/span><\/pre>\n
This will generate a couple of files that let our project use Tailwind. We need to edit the tailwind.config.js<\/code> file so that it applies the styles to the files in our project. Open this file and add the following code.<\/p>\n
\/\/ tailwind.config.js<\/span>\n\nmodule<\/span>.exports = {\n  content<\/span>: [\n    \".\/pages\/**\/*.{js,ts,jsx,tsx}\"<\/span>,\n    \".\/components\/**\/*.{js,ts,jsx,tsx}\"<\/span>,\n  ],\n...\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now we need to update the stylesheet in the project to use the Tailwind directives. Go to the styles<\/code> directory and open the global.css<\/code> file. You can delete all of the code out of this file and add the following.<\/p>\n
@tailwind<\/span> base;\n@tailwind<\/span> components;\n@tailwind<\/span> utilities;\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
These directives let us use all of the Tailwind functionality throughout the project because it\u2019s imported in the _app.tsx<\/code> file, which is the top-level component in the project. That\u2019s all for our styles. Now we can set up the database schema.<\/p>\n
Using Prisma for database operations<\/h2>\n
Most apps use some type of ORM that make it easier to interact with the database and we\u2019re going to use Prisma. This package was part of the ones we installed towards the beginning. Now we can initialize it in the project with this command:<\/p>\n
$ npx prisma init\n<\/code><\/span><\/pre>\n
This will generate a .env<\/code> file at the root of your project and a new prisma<\/code> directory that has a schema.prisma<\/code> file. The schema file connects the whole app to Postgres and is also where we will define the database schema. Let\u2019s start by editing the .env<\/code> file and update the connection string with your local Postgres username, password, and database name. So that file should look similar to this.<\/p>\n
# .env<\/span>\n\nDATABASE_URL=\"postgresql:\/\/username:password@localhost:5432\/product_inventory\"<\/span>\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
Now we can dig into the schema.prisma<\/code> file and start defining the schema that we\u2019ll eventually migrate to the database. So open that file and add the following code.<\/p>\n
\/\/ schema.prisma<\/span>\n\ngenerator client {\n  provider = \"prisma-client-js\"<\/span>\n}\n\ndatasource db {\n  provider = \"postgresql\"<\/span>\n  url      = env(\"DATABASE_URL\"<\/span>)\n}\n\nmodel Document {\n  id      String<\/span> @id @default<\/span>(uuid())\n  title   String<\/span>\n  content String<\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The Document<\/code> model includes all of the fields we need in the database. The content<\/code> field is going to store all of our Markdown which will contain any images that are uploaded to Cloudinary. This is the only model we\u2019ll have to get this started, but feel free to add to this as you see fit.<\/p>\n
Running the database migration<\/h3>\n
Now that the model is in place, we can run a migration to get this table schema into our database. In your terminal, run the following command.<\/p>\n
$ npx prisma migrate dev --name init\n<\/code><\/span><\/pre>\n
This will create a new database for you if you don\u2019t have it already and it will connect to the database and create a table called Document<\/code> with the fields we defined. Now we can dive into the core functionality of the app and finally write some code.<\/p>\n
Building CRUD functionality for documents<\/h2>\n
The base functionality we need for this system is the ability to look at all of the documents we have available, some way to add and edit docs, and a way to delete them. We\u2019ll start by creating the API routes that will handle all of this. Go to the pages > api<\/code> directory and delete the placeholder hello.ts<\/code> file and add a new file called new-doc.ts<\/code>.<\/p>\n
Creating a new document<\/h3>\n
This will be the route we call to create a new document. Open this new file and add the following code.<\/p>\n
\/\/ new-doc.ts<\/span>\n\nimport<\/span> type { NextApiRequest, NextApiResponse } from<\/span> \"next\"<\/span>;\nimport<\/span> { PrismaClient } from<\/span> \"@prisma\/client\"<\/span>;\n\nexport<\/span> type Document = {\n  title<\/span>: string;\n  content: string;\n};\n\nconst<\/span> prisma = new<\/span> PrismaClient();\n\nexport<\/span> default<\/span> async<\/span> function<\/span> handler<\/span>(\n  req: NextApiRequest,\n  res: NextApiResponse<Document>\n<\/span>) <\/span>{\n  const<\/span> docData = req.body;\n  const<\/span> newDoc = await<\/span> prisma.document.create({\n    data<\/span>: {\n      title<\/span>: docData.title,\n      content<\/span>: docData.content,\n    },\n  });\n\n  res.status(200<\/span>).json(newDoc);\n\n  await<\/span> prisma.$disconnect();\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This code allows us to connect to Postgres using Prisma and then it creates a new record for the document. It takes the body from the request and uses that data to define the document. If you were working on a production-level app, you\u2019d need to include some validation around these user inputs to avoid potential security vulnerabilities.<\/p>\n
Looking at existing documents<\/h3>\n
Let\u2019s add a new file called docs.ts<\/code> in the pages > api<\/code> directory. This is how we will fetch all of the existing documents or a specific document by its ID. Now open your docs.ts<\/code> file and add the following code.<\/p>\n
\/\/ docs.ts<\/span>\n\nimport<\/span> type { NextApiRequest, NextApiResponse } from<\/span> \"next\"<\/span>;\nimport<\/span> { PrismaClient } from<\/span> \"@prisma\/client\"<\/span>;\nimport<\/span> { Document } from<\/span> \".\/new-doc\"<\/span>;\n\nconst<\/span> prisma = new<\/span> PrismaClient();\n\nexport<\/span> default<\/span> async<\/span> function<\/span> handler<\/span>(\n  req: NextApiRequest,\n  res: NextApiResponse<Document | Document[] | null>\n<\/span>) <\/span>{\n  const<\/span> { id } = req.query;\n\n  if<\/span> (id) {\n    const<\/span> document<\/span> = await<\/span> prisma.document.findUnique({\n      where<\/span>: {\n        id<\/span>: id as<\/span> string,\n      },\n    });\n\n    res.status(200<\/span>).json(document<\/span>);\n\n    await<\/span> prisma.$disconnect();\n  } else<\/span> {\n    const<\/span> documents = await<\/span> prisma.document.findMany();\n\n    res.status(200<\/span>).json(documents);\n\n    await<\/span> prisma.$disconnect();\n  }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This code checks if there is an id<\/code> query in the request URL. If there is one, this will query the database for a specific document. Without the id<\/code> query, we return all of the documents from the database. Another thing for production to note is that you still need validation for the id<\/code> value and possibly some pagination for returning all the docs.<\/p>\n
Editing documents<\/h3>\n
Sometimes internal processes will change or big features will need a lot of research before work starts, so being able to update docs with new information is crucial. In the pages > api<\/code> directory, add a new file called edit-doc.ts<\/code> and add the following code.<\/p>\n
\/\/ edit-doc.ts<\/span>\n\nimport<\/span> type { NextApiRequest, NextApiResponse } from<\/span> \"next\"<\/span>;\nimport<\/span> { PrismaClient } from<\/span> \"@prisma\/client\"<\/span>;\nimport<\/span> { Document } from<\/span> \".\/new-doc\"<\/span>;\n\nconst<\/span> prisma = new<\/span> PrismaClient();\n\nexport<\/span> default<\/span> async<\/span> function<\/span> handler<\/span>(\n  req: NextApiRequest,\n  res: NextApiResponse<Document>\n<\/span>) <\/span>{\n  const<\/span> docData = req.body;\n\n  const<\/span> updatedDoc = await<\/span> prisma.document.update({\n    where<\/span>: { id<\/span>: docData.id },\n    data<\/span>: {\n      title<\/span>: docData.title,\n      content<\/span>: docData.content,\n    },\n  });\n\n  res.status(200<\/span>).json(updatedDoc);\n\n  await<\/span> prisma.$disconnect();\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Here, the document ID is sent as part of the request body and we use it along with the updated data to the database to change the record. More production notes, you\u2019d want to record when these changes happened and who did them as well and of course, you can\u2019t forget the validation. You\u2019d also want some error handling just in case you run into issues updating a document.<\/p>\n
Deleting a document<\/h3>\n
This can be a fun part of documentation maintenance. When you can go through and delete documentation, it usually means that things are moving forward and changing. So let\u2019s add one more file to the pages > api<\/code> called delete-doc.ts<\/code> and add the following code to it.<\/p>\n
\/\/ delete-doc.ts<\/span>\n\nimport<\/span> type { NextApiRequest, NextApiResponse } from<\/span> \"next\"<\/span>;\nimport<\/span> { PrismaClient } from<\/span> \"@prisma\/client\"<\/span>;\nimport<\/span> { Document } from<\/span> \".\/new-doc\"<\/span>;\n\nconst<\/span> prisma = new<\/span> PrismaClient();\n\nexport<\/span> default<\/span> async<\/span> function<\/span> handler<\/span>(\n  req: NextApiRequest,\n  res: NextApiResponse<Document>\n<\/span>) <\/span>{\n  const<\/span> docId = req.body;\n\n  const<\/span> deleteProduct = await<\/span> prisma.document.delete({\n    where<\/span>: { id<\/span>: docId },\n  });\n\n  res.status(200<\/span>).json(deleteProduct);\n\n  await<\/span> prisma.$disconnect();\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This gets the document ID from the request body and runs the delete query in our database. An important thing to note is how we keep disconnecting from Prisma at the end of all of the responses. This makes sure we don\u2019t accidentally end up with 10 open Prisma clients.<\/p>\n
We just finished making all of the back-end CRUD functionality for this app, so it\u2019s time to build out the front-end that employees can interact with.<\/p>\n
Displaying the documents<\/h2>\n
All of the docs will be displayed in a table and employees will be able to click on buttons in the rows to view, edit, or update an individual document. There will also be a button to allow employees to add new docs. Let\u2019s start by building the functionality for that button.<\/p>\n
The new document button<\/h3>\n
Go to the pages<\/code> directory and open the index.tsx<\/code> file. Delete everything inside the <main><\/code> element. The first element we\u2019re going to add is the button to create a new document. Update your file to the following code.<\/p>\n
\/\/ index.tsx<\/span>\n\nimport<\/span> type { NextPage } from<\/span> \"next\"<\/span>;\nimport<\/span> Head from<\/span> \"next\/head\"<\/span>;\nimport<\/span> { PlusCircleIcon } from<\/span> \"@heroicons\/react\/solid\"<\/span>;\nimport<\/span> Link from<\/span> \"next\/link\"<\/span>;\n\nconst<\/span> Home: NextPage = ()<\/span> =><\/span> {\n  return<\/span> (\n    <div<\/span>><\/span>\n      <Head<\/span>><\/span>\n        <title<\/span>><\/span>Internal Docs<\/title<\/span>><\/span>\n        <meta<\/span> name<\/span>=\"description\"<\/span> content<\/span>=\"This is our internal docs system\"<\/span> \/><\/span>\n        <link<\/span> rel<\/span>=\"icon\"<\/span> href<\/span>=\"\/favicon.ico\"<\/span> \/><\/span>\n      <\/Head<\/span>><\/span>\n\n      <main<\/span>><\/span>\n        <Link<\/span> href<\/span>=\"\/doc\"<\/span> passHref<\/span>><\/span>\n          <div<\/span> className<\/span>=\"flex gap-2 bg-gray-700 hover:bg-gray-300 text-white font-bold py-2 px-4 rounded-full m-6\"<\/span>><\/span>\n            <PlusCircleIcon<\/span> className<\/span>=\"h-6 w-6 text-green-500\"<\/span> \/><\/span>\n            Add new document\n          <\/div<\/span>><\/span>\n        <\/Link<\/span>><\/span>\n      <\/main<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> Home;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This button links to the new document page that will have the form you add your content to. It\u2019ll look like this in the browser if you run the app with yarn dev<\/code>.<\/p>\n
\"add<\/p>\n
New document page<\/h3>\n
Since we have the button linking to a page called doc<\/code>, let\u2019s add some new things to our project directory. Create a new folder in the pages<\/code> directory called docs<\/code>. Inside this folder, add a new file called index.tsx<\/code> and add the following code.<\/p>\n
\/\/ docs > index.tsx<\/span>\n\nimport<\/span> axios from<\/span> \"axios\"<\/span>;\nimport<\/span> Link from<\/span> \"next\/link\"<\/span>;\n\nexport<\/span> default<\/span> function<\/span> NewDoc<\/span>(<\/span>) <\/span>{\n  const<\/span> submitDoc = async<\/span> (e) => {\n    e.preventDefault();\n\n    const<\/span> document<\/span> = {\n      title<\/span>: e.target.title.value,\n      content<\/span>: e.target.content.value,\n    };\n\n    await<\/span> axios.post(\"\/api\/new-doc\"<\/span>, document<\/span>);\n  };\n\n  return<\/span> (\n    <div<\/span> className<\/span>=\"mt-4 ml-4\"<\/span>><\/span>\n      <h2<\/span> className<\/span>=\"text-3xl mb-12\"<\/span>><\/span>New Document<\/h2<\/span>><\/span>\n      <form<\/span> className<\/span>=\"w-full mb-12\"<\/span> onSubmit<\/span>={submitDoc}<\/span>><\/span>\n        <div<\/span> className<\/span>=\"mb-6\"<\/span>><\/span>\n          <label<\/span>\n            className<\/span>=\"block text-gray-500 font-bold mb-1 md:mb-0 pr-4\"<\/span>\n            htmlFor<\/span>=\"title\"<\/span>\n          ><\/span>\n            Title\n          <\/label<\/span>><\/span>\n          <div<\/span> className<\/span>=\"md:w-2\/3\"<\/span>><\/span>\n            <input<\/span>\n              className<\/span>=\"bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500\"<\/span>\n              id<\/span>=\"product-name\"<\/span>\n              name<\/span>=\"title\"<\/span>\n              type<\/span>=\"text\"<\/span>\n            \/><\/span>\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n        <div<\/span> className<\/span>=\"mb-6\"<\/span>><\/span>\n          <div<\/span>><\/span>\n            <label<\/span>\n              className<\/span>=\"block text-gray-500 font-bold mb-1 md:mb-0 pr-4\"<\/span>\n              htmlFor<\/span>=\"content\"<\/span>\n            ><\/span>\n              Content\n            <\/label<\/span>><\/span>\n          <\/div<\/span>><\/span>\n          <div<\/span> className<\/span>=\"md:w-2\/3\"<\/span>><\/span>\n            <textarea<\/span>\n              className<\/span>=\"bg-gray-200 appearance-none border-2 border-gray-200 rounded block w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500\"<\/span>\n              rows<\/span>={50}<\/span>\n              id<\/span>=\"content\"<\/span>\n              name<\/span>=\"content\"<\/span>\n            ><\/span><\/textarea<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n        <div<\/span> className<\/span>=\"md:flex md:items-center gap-6\"<\/span>><\/span>\n          <div<\/span> className<\/span>=\"md:w-1\/3\"<\/span>><\/span><\/div<\/span>><\/span>\n          <div<\/span>><\/span>\n            <div<\/span> className<\/span>=\"shadow bg-blue-400 hover:bg-blue-500 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded\"<\/span>><\/span>\n              <Link<\/span> href<\/span>=\"\/\"<\/span> passHref<\/span>><\/span>\n                Back\n              <\/Link<\/span>><\/span>\n            <\/div<\/span>><\/span>\n          <\/div<\/span>><\/span>\n          <div<\/span> className<\/span>=\"md:w-2\/3\"<\/span>><\/span>\n            <button<\/span>\n              className<\/span>=\"shadow bg-blue-400 hover:bg-blue-500 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded\"<\/span>\n              type<\/span>=\"submit\"<\/span>\n            ><\/span>\n              Save Document\n            <\/button<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      <\/form<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
On this page, we created a form that takes the title and content values for the new document and it calls the new-doc<\/code> endpoint when an employee submits the form and it goes back to the main page when they cancel. A few more notes on production improvements, it would be great to have some kind of message show when an employee submits the form and have form validation on this page. Here\u2019s what the new document page looks like.<\/p>\n
\"new<\/p>\n
Now that we\u2019ve added a document, let\u2019s make the table for the main page to display all of the documents we have.<\/p>\n
Displaying all the documents<\/h3>\n
To get all of the documents we have available, we\u2019re going to add some new functionality to the pages > index.tsx<\/code> file. Open this file and update the existing code to match the following code.<\/p>\n
\/\/ pages > index.tsx<\/span>\n\nimport<\/span> Head from<\/span> \"next\/head\"<\/span>;\nimport<\/span> {\n  PencilAltIcon,\n  PlusCircleIcon,\n  TrashIcon,\n} from<\/span> \"@heroicons\/react\/solid\"<\/span>;\nimport<\/span> Link from<\/span> \"next\/link\"<\/span>;\nimport<\/span> { Document } from<\/span> \".\/api\/new-doc\"<\/span>;\nimport<\/span> axios from<\/span> \"axios\"<\/span>;\n\nconst<\/span> Home = ({ documents }: { documents: Document[] }<\/span>) =><\/span> {\n  return<\/span> (\n    <div<\/span>><\/span>\n      <Head<\/span>><\/span>\n        <title<\/span>><\/span>Internal Docs<\/title<\/span>><\/span>\n        <meta<\/span> name<\/span>=\"description\"<\/span> content<\/span>=\"This is our internal docs system\"<\/span> \/><\/span>\n        <link<\/span> rel<\/span>=\"icon\"<\/span> href<\/span>=\"\/favicon.ico\"<\/span> \/><\/span>\n      <\/Head<\/span>><\/span>\n\n      <main<\/span>><\/span>\n        <Link<\/span> href<\/span>=\"\/doc\"<\/span> passHref<\/span>><\/span>\n          <div<\/span> className<\/span>=\"flex gap-2 bg-gray-700 hover:bg-gray-300 text-white font-bold py-2 px-4 rounded-full m-6\"<\/span>><\/span>\n            <PlusCircleIcon<\/span> className<\/span>=\"h-6 w-6 text-green-500\"<\/span> \/><\/span>\n            Add new document\n          <\/div<\/span>><\/span>\n        <\/Link<\/span>><\/span>\n        <div<\/span> className<\/span>=\"flex flex-col gap-2\"<\/span>><\/span>\n          {documents.length > 0 ? (\n            documents.map((doc: Document) => (\n              <div<\/span> key<\/span>={doc.id}<\/span> className<\/span>=\"flex gap-6 border-b-2 w-full p-4\"<\/span>><\/span>\n                <div<\/span>><\/span>{doc.title}<\/div<\/span>><\/span>\n                <Link<\/span> passHref<\/span> href<\/span>={<\/span>`\/doc<\/span>\/${doc.id<\/span>}`}><\/span>\n                  <PencilAltIcon<\/span> className<\/span>=\"h-6 w-6 text-teal-500\"<\/span> \/><\/span>\n                <\/Link<\/span>><\/span>\n                <TrashIcon<\/span> className<\/span>=\"h-6 w-6 text-rose-400\"<\/span> \/><\/span>\n              <\/div<\/span>><\/span>\n            ))\n          ) : (\n            <div<\/span>><\/span>Add some new products<\/div<\/span>><\/span>\n          )}\n        <\/div<\/span>><\/span>\n      <\/main<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n};\n\nexport<\/span> async<\/span> function<\/span> getServerSideProps<\/span>(<\/span>) <\/span>{\n  const<\/span> docsRes = await<\/span> axios.get(\"http:\/\/localhost:3000\/api\/docs\"<\/span>);\n\n  const<\/span> documents = await<\/span> docsRes.data;\n\n  return<\/span> {\n    props<\/span>: {\n      documents,\n    },\n  };\n}\n\nexport<\/span> default<\/span> Home;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We\u2019ve added a few more imports to get new icons and the axios<\/code> package. There\u2019s also a new call to the getServerSideProps<\/code> method and that\u2019s where we call the back-end to get all of the documents we have in our database table. It returns the documents<\/code> array as a prop to the Home<\/code> component.<\/p>\n
After the new document button, we check the length of the array and show a list of documents or a message inviting users to make a new document. This is what the app will look like with the document we added earlier.<\/p>\n
\"one<\/p>\n
Now we can add the deletion functionality since we have that button on the document record and it\u2019ll be fast to implement.<\/p>\n
Deleting a document<\/h3>\n
We need to add a function that calls the back-end with the correct document ID to delete. Add the deleteDoc<\/code> function at the beginning of the Home<\/code> component like below.<\/p>\n
\/\/ pages > index.tsx<\/span>\n\n...\nconst Home = ({ documents }: { documents: Document[] }<\/span>) =><\/span> {\n  const<\/span> deleteDoc = async<\/span> (docId: string) => {\n    await<\/span> axios.delete(\"\/api\/delete-doc\"<\/span>, { data<\/span>: docId });\n  };\n\n  return<\/span> (\n    <div<\/span>><\/span>\n      <Head<\/span>><\/span>\n        <title<\/span>><\/span>Internal Docs<\/title<\/span>><\/span>\n        <meta<\/span> name<\/span>=\"description\"<\/span> content<\/span>=\"This is our internal docs system\"<\/span> \/><\/span>\n        <link<\/span> rel<\/span>=\"icon\"<\/span> href<\/span>=\"\/favicon.ico\"<\/span> \/><\/span>\n      <\/Head<\/span>><\/span>\n...\n<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Then we\u2019ll call this function when someone clicks the trash icon on the row with the following code change.<\/p>\n
\/\/ pages > index.tsx\n\n...\n<Link<\/span> passHref<\/span> href<\/span>={<\/span>`\/doc<\/span>\/${doc.id<\/span>}`}><\/span>\n  <PencilAltIcon<\/span> className<\/span>=\"h-6 w-6 text-teal-500\"<\/span> \/><\/span>\n<\/Link<\/span>><\/span>\n<TrashIcon<\/span>\n  className<\/span>=\"h-6 w-6 text-rose-400\"<\/span>\n  onClick<\/span>={()<\/span> =><\/span> deleteDoc(doc.id)}\n\/>\n...\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
That\u2019s all we needed for the delete functionality! Let\u2019s finish up with the edit functionality.<\/p>\n
Edit document page<\/h3>\n
We\u2019ll need to add a new page to the pages > doc<\/code> directory called [id].tsx<\/code>. This page will show a form with the current document title and content and let employees edit the fields and save the changes. Add the following code to this new file.<\/p>\n
\/\/ pages > doc > [id].tsx<\/span>\n\nimport<\/span> axios from<\/span> \"axios\"<\/span>;\nimport<\/span> Link from<\/span> \"next\/link\"<\/span>;\nimport<\/span> { Document } from<\/span> \"..\/api\/new-doc\"<\/span>;\n\nexport<\/span> default<\/span> function<\/span> EditDoc<\/span>({ doc }: { doc: Document }<\/span>) <\/span>{\n  const<\/span> submitDoc = async<\/span> (e) => {\n    e.preventDefault();\n\n    const<\/span> modifiedDoc = {\n      id<\/span>: doc.id,\n      title<\/span>: e.target.title.value,\n      content<\/span>: e.target.content.value,\n    };\n\n    await<\/span> axios.patch(\"\/api\/edit-doc\"<\/span>, modifiedDoc);\n  };\n\n  return<\/span> (\n    <div<\/span> className<\/span>=\"mt-4 ml-4\"<\/span>><\/span>\n      <h2<\/span> className<\/span>=\"text-3xl mb-12\"<\/span>><\/span>Edit {doc?.title || \"Document\"}<\/h2<\/span>><\/span>\n      <form<\/span> className<\/span>=\"w-full mb-12\"<\/span> onSubmit<\/span>={submitDoc}<\/span>><\/span>\n        <div<\/span> className<\/span>=\"mb-6\"<\/span>><\/span>\n          <label<\/span>\n            className<\/span>=\"block text-gray-500 font-bold mb-1 md:mb-0 pr-4\"<\/span>\n            htmlFor<\/span>=\"title\"<\/span>\n          ><\/span>\n            Title\n          <\/label<\/span>><\/span>\n          <div<\/span> className<\/span>=\"md:w-2\/3\"<\/span>><\/span>\n            <input<\/span>\n              className<\/span>=\"bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500\"<\/span>\n              id<\/span>=\"product-name\"<\/span>\n              name<\/span>=\"title\"<\/span>\n              type<\/span>=\"text\"<\/span>\n              defaultValue<\/span>={doc<\/span> ? doc.title<\/span> :<\/span> \"\"}\n            \/><\/span>\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n        <div<\/span> className<\/span>=\"mb-6\"<\/span>><\/span>\n          <div<\/span>><\/span>\n            <label<\/span>\n              className<\/span>=\"block text-gray-500 font-bold mb-1 md:mb-0 pr-4\"<\/span>\n              htmlFor<\/span>=\"content\"<\/span>\n            ><\/span>\n              Content\n            <\/label<\/span>><\/span>\n          <\/div<\/span>><\/span>\n          <div<\/span> className<\/span>=\"md:w-2\/3\"<\/span>><\/span>\n            <textarea<\/span>\n              className<\/span>=\"bg-gray-200 appearance-none border-2 border-gray-200 rounded block w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500\"<\/span>\n              rows<\/span>={50}<\/span>\n              id<\/span>=\"content\"<\/span>\n              name<\/span>=\"content\"<\/span>\n              defaultValue<\/span>={doc<\/span> ? doc.content<\/span> :<\/span> \"\"}\n            ><\/span><\/textarea<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n        <div<\/span> className<\/span>=\"md:flex md:items-center gap-6\"<\/span>><\/span>\n          <div<\/span> className<\/span>=\"md:w-1\/3\"<\/span>><\/span><\/div<\/span>><\/span>\n          <div<\/span>><\/span>\n            <div<\/span> className<\/span>=\"shadow bg-blue-400 hover:bg-blue-500 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded\"<\/span>><\/span>\n              <Link<\/span> href<\/span>=\"\/\"<\/span> passHref<\/span>><\/span>\n                Back\n              <\/Link<\/span>><\/span>\n            <\/div<\/span>><\/span>\n          <\/div<\/span>><\/span>\n          <div<\/span> className<\/span>=\"md:w-2\/3\"<\/span>><\/span>\n            <button<\/span>\n              className<\/span>=\"shadow bg-blue-400 hover:bg-blue-500 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded\"<\/span>\n              type<\/span>=\"submit\"<\/span>\n            ><\/span>\n              Save Document\n            <\/button<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      <\/form<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n}\n\nexport<\/span> async<\/span> function<\/span> getServerSideProps<\/span>(context<\/span>) <\/span>{\n  const<\/span> docId = context.params.id;\n\n  const<\/span> docRes = await<\/span> axios.get(\"http:\/\/localhost:3000\/api\/docs\"<\/span>, {\n    params<\/span>: {\n      id<\/span>: docId,\n    },\n  });\n\n  const<\/span> doc = await<\/span> docRes.data;\n\n  return<\/span> {\n    props<\/span>: {\n      doc,\n    },\n  };\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This page starts off by calling the getServerSideProps<\/code> method to fetch the data for the selected document based on the document ID passed in the URL and returns this as a prop to the EditDoc<\/code> component.<\/p>\n
Then we render a form that uses the document data as the default values for the fields so that an employee can start making direct edits. There\u2019s also a function that will save any changes to the fields via a call to the back-end once the form is submitted.<\/p>\n
Just to keep up with the other sections, there are a few things you can do to improve this for production. Having some kind of authorization around who can make edits to certain documents could be useful. Adding a way to handle real-time team editing or locking a document until someone is finished editing can help prevent conflicts. Of course, form validation will always help with some security vulnerabilities.<\/p>\n
That\u2019s all! You now have an internal docs system template that you can expand in a number of directions.<\/p>\n
Finished code<\/h2>\n
You can check out the complete code in the internal-docs<\/code> folder of this repo<\/a>. You can also check it out in this Code Sandbox<\/a>.<\/p>\n
<CodeSandBox\ntitle=\u201crestless-water-nyh02q\u201d\nid=\u201crestless-water-nyh02q\u201d\n\/><\/p>\n
Conclusion<\/h2>\n
There are a lot of different needs that your company or team might need for documentation and this gives you a simple starting point. You can make this as complex as you want or you can keep it as simple as you like. Either way, it\u2019ll be a fun way to start looking at documentation management.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28378,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,212,246,371],"class_list":["post-28377","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-next-js","tag-react","tag-under-review"],"acf":[],"yoast_head":"\nMake an Internal Docs System<\/title>\n<meta name=\"description\" content=\"Managing company-wide docs can get messy quickly when everyone is using slightly different systems and standards to access and maintain everything. That's why we're going to make a small internal documentation managemenet system template with Next.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Make an Internal Docs System\" \/>\n<meta property=\"og:description\" content=\"Managing company-wide docs can get messy quickly when everyone is using slightly different systems and standards to access and maintain everything. That's why we're going to make a small internal documentation managemenet system template with Next.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-19T08:25:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924648\/Web_Assets\/blog\/bd90568a1ef4c077adb9a39e73d1ce279095a062-2592x1728-1_28378ef2f9\/bd90568a1ef4c077adb9a39e73d1ce279095a062-2592x1728-1_28378ef2f9.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2592\" \/>\n\t<meta property=\"og:image:height\" content=\"1728\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Make an Internal Docs System\",\"datePublished\":\"2022-04-19T08:25:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924648\/Web_Assets\/blog\/bd90568a1ef4c077adb9a39e73d1ce279095a062-2592x1728-1_28378ef2f9\/bd90568a1ef4c077adb9a39e73d1ce279095a062-2592x1728-1_28378ef2f9.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Next.js\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/\",\"name\":\"Make an Internal Docs System\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924648\/Web_Assets\/blog\/bd90568a1ef4c077adb9a39e73d1ce279095a062-2592x1728-1_28378ef2f9\/bd90568a1ef4c077adb9a39e73d1ce279095a062-2592x1728-1_28378ef2f9.jpg?_i=AA\",\"datePublished\":\"2022-04-19T08:25:41+00:00\",\"description\":\"Managing company-wide docs can get messy quickly when everyone is using slightly different systems and standards to access and maintain everything. That's why we're going to make a small internal documentation managemenet system template with Next.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924648\/Web_Assets\/blog\/bd90568a1ef4c077adb9a39e73d1ce279095a062-2592x1728-1_28378ef2f9\/bd90568a1ef4c077adb9a39e73d1ce279095a062-2592x1728-1_28378ef2f9.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924648\/Web_Assets\/blog\/bd90568a1ef4c077adb9a39e73d1ce279095a062-2592x1728-1_28378ef2f9\/bd90568a1ef4c077adb9a39e73d1ce279095a062-2592x1728-1_28378ef2f9.jpg?_i=AA\",\"width\":2592,\"height\":1728},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Make an Internal Docs System\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Make an Internal Docs System","description":"Managing company-wide docs can get messy quickly when everyone is using slightly different systems and standards to access and maintain everything. That's why we're going to make a small internal documentation managemenet system template with Next.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/","og_locale":"en_US","og_type":"article","og_title":"Make an Internal Docs System","og_description":"Managing company-wide docs can get messy quickly when everyone is using slightly different systems and standards to access and maintain everything. That's why we're going to make a small internal documentation managemenet system template with Next.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-04-19T08:25:41+00:00","og_image":[{"width":2592,"height":1728,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924648\/Web_Assets\/blog\/bd90568a1ef4c077adb9a39e73d1ce279095a062-2592x1728-1_28378ef2f9\/bd90568a1ef4c077adb9a39e73d1ce279095a062-2592x1728-1_28378ef2f9.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/"},"author":{"name":"","@id":""},"headline":"Make an Internal Docs System","datePublished":"2022-04-19T08:25:41+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/"},"wordCount":5,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924648\/Web_Assets\/blog\/bd90568a1ef4c077adb9a39e73d1ce279095a062-2592x1728-1_28378ef2f9\/bd90568a1ef4c077adb9a39e73d1ce279095a062-2592x1728-1_28378ef2f9.jpg?_i=AA","keywords":["Guest Post","Next.js","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/","name":"Make an Internal Docs System","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924648\/Web_Assets\/blog\/bd90568a1ef4c077adb9a39e73d1ce279095a062-2592x1728-1_28378ef2f9\/bd90568a1ef4c077adb9a39e73d1ce279095a062-2592x1728-1_28378ef2f9.jpg?_i=AA","datePublished":"2022-04-19T08:25:41+00:00","description":"Managing company-wide docs can get messy quickly when everyone is using slightly different systems and standards to access and maintain everything. That's why we're going to make a small internal documentation managemenet system template with Next.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924648\/Web_Assets\/blog\/bd90568a1ef4c077adb9a39e73d1ce279095a062-2592x1728-1_28378ef2f9\/bd90568a1ef4c077adb9a39e73d1ce279095a062-2592x1728-1_28378ef2f9.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924648\/Web_Assets\/blog\/bd90568a1ef4c077adb9a39e73d1ce279095a062-2592x1728-1_28378ef2f9\/bd90568a1ef4c077adb9a39e73d1ce279095a062-2592x1728-1_28378ef2f9.jpg?_i=AA","width":2592,"height":1728},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-an-internal-docs-system\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Make an Internal Docs System"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924648\/Web_Assets\/blog\/bd90568a1ef4c077adb9a39e73d1ce279095a062-2592x1728-1_28378ef2f9\/bd90568a1ef4c077adb9a39e73d1ce279095a062-2592x1728-1_28378ef2f9.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28377"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28377\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28378"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}