Skip to content

Commit 3e39538

Browse files
author
Wonkook Lee
committed
update readme
1 parent 9d0f11b commit 3e39538

File tree

1 file changed

+96
-30
lines changed

1 file changed

+96
-30
lines changed

README.md

Lines changed: 96 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -14,71 +14,137 @@
1414
<br />
1515
<br />
1616

17+
`next-pathmap` is a tool that automatically extracts paths from the pages folder of the **next.js** project and converts them into `JSON` path-maps.
18+
It was created to manage all the metadata for each page in one file or to use as a hashmap.
19+
20+
<br />
21+
1722
## Requirements
1823

1924
- node.js >= 14.0.0
2025

26+
<br />
27+
2128
## Core dependencies
2229

2330
- [globby](https://github.com/sindresorhus/globby)
2431
- [inquirer](https://github.com/SBoudrias/Inquirer.js)
2532
- [json-format](https://github.com/luizstacio/json-format)
2633

27-
## How to use
34+
<br />
35+
36+
## Installations
2837

29-
npx script running fashion.
38+
You can run the binary without installation via the npx command. Or you can use it by installing it as a dependency.
3039

3140
```sh
32-
npx next-pathmap # cannot define config file.
41+
$ npx next-pathmap
42+
```
3343
or
34-
npm install next-pathmap
44+
```sh
45+
$ npm install -D next-pathmap
46+
```
47+
You can also enter the command directly through the global installation.
48+
```sh
49+
$ npm install -g next-path
50+
$ next-path
3551
```
3652

37-
## Configuration vs. Cli Interactions
53+
<br />
3854

39-
To configure required properties you should define either configuration in `pathmap.config.json` or `via CLI-input`.
55+
## Configurations
4056

41-
### pathmap.config.json
57+
To configure required properties you should define either use `pathmap.config.json` or configure via command-line input.
58+
If `pathmap.config.json` file is detected at the root of your project, script will use automatically as a configuration.
4259

43-
```json
44-
{
45-
"pathToPages": "src/pages",
46-
"pathToSave": "path/path.json",
47-
"includes": ["**/*.page.{ts,tsx}"],
48-
"excludes": ["!node_modules"], // remember, path expression in excludes must start with exclamation mark.
49-
"schema": {
50-
"query": []
51-
// any key:value pairs..
52-
}
53-
}
60+
<br />
61+
62+
### 1. `pathmap.config.js` (Recommended)
63+
64+
```js
65+
/** @type {import('next-pathmap/config').PathmapConfig} */
66+
const PathmapConfig = {
67+
pathToPages: "src/pages",
68+
pathToSave: "src/pathmap/pathmap.json",
69+
includes: ["**/*.page.{ts,tsx}"],
70+
excludes: ["!**/_*.{ts,tsx}", "!**/[A-Z]*.{ts,tsx}", "!api"],
71+
schema: {
72+
/* properties you want */
73+
},
74+
categories: [
75+
{
76+
/* first matching segment map of the path */
77+
key: value,
78+
},
79+
{
80+
/* second matching segment map of the path */
81+
key: value,
82+
},
83+
// and so on...
84+
],
85+
};
86+
87+
module.exports = PathmapConfig;
5488
```
5589

56-
### Interactive CLI Dialogs.
90+
<br />
5791

58-
```sh
92+
### 2. Configure with command-line interface
93+
94+
You can configure with command-line interface unless you don't have configuration file.
95+
You can select only basic options compared to setting via config file.
96+
97+
```
5998
? Enter the path to the '/pages' directory. src/pages
6099
? Enter the destination to save jsonized pathmap file. pathmap/pathmap.json
61100
? includes: **/*.page.{ts,tsx}
62101
? excludes: **/[!_]*.{ts,tsx}, **/[!A-Z]*.page.{ts,tsx}, !api
102+
.
103+
.
63104
```
64105

106+
<br />
107+
65108
## Result
66109

110+
All paths in the project are mapped to a JSON object as shown below. Use it as meta information on the page by importing it or refer to it as an alias in the path.
111+
67112
```json
68113
{
69-
"/": {
70-
"alias": "",
71-
"trackPageView": true,
72-
"query": []
73-
},
74-
"/services/loan": {
75-
"alias": "",
76-
"trackPageView": true,
77-
"query": []
78-
}
114+
"/services/insurance": {
115+
"alias": "serv-insurance-page-viewed",
116+
"trackPageView": true,
117+
"categories": [
118+
"customer-service",
119+
"insurance/main"
120+
],
121+
"query": []
122+
},
123+
"/services/loan": {
124+
"alias": "serv-loan-page-viewed",
125+
"trackPageView": true,
126+
"categories": [
127+
"customer-service",
128+
"loan/main"
129+
],
130+
"query": []
131+
},
132+
"/services/products/[id]": {
133+
"alias": "serv-prod-id-page-viewed",
134+
"trackPageView": true,
135+
"categories": [
136+
"customer-service",
137+
"product/detail"
138+
],
139+
"query": [
140+
"id"
141+
]
142+
},
79143
}
80144
```
81145

82146
<br />
83147

84148
© WONKOOK LEE
149+
150+
<br />

0 commit comments

Comments
 (0)