Use // to instead of / for target index in the URL to avoid conflicts

src/client/utils/__tests__/getInfoFromHash.spec.ts

@@ -37,7 +37,7 @@ describe('getInfoFromHash', () => {
 	});
 
 	it('should extract target index when the URL ends with a number', () => {
-		const result = getInfoFromHash('#/Documentation/Files/Buttons/5');
+		const result = getInfoFromHash('#/Documentation/Files/Buttons//5');
 		expect(result).toEqual({
 			isolate: false,
 			hashArray: ['Documentation', 'Files', 'Buttons'],
@@ -46,6 +46,16 @@ describe('getInfoFromHash', () => {
 		});
 	});
 
+	it('should extract target index when the URL ends with a string', () => {
+		const result = getInfoFromHash('#/Documentation/Files/Buttons//basic');
+		expect(result).toEqual({
+			isolate: false,
+			hashArray: ['Documentation', 'Files', 'Buttons'],
+			targetName: 'Documentation',
+			targetIndex: 'basic',
+		});
+	});
+
 	it('should return a proper parsed result even though the hash starts with a number', () => {
 		const result = getInfoFromHash('#/1.Documentation');
 		expect(result).toEqual({

src/client/utils/__tests__/getUrl.spec.ts

@@ -46,22 +46,27 @@ describe('getUrl', () => {
 
 	it('should return an isolated example URL', () => {
 		const result = getUrl({ name, slug, exampleIndex: 3, isolated: true }, loc);
-		expect(result).toBe('/styleguide/#!/Components/FooBar/3');
+		expect(result).toBe('/styleguide/#!/Components/FooBar//3');
 	});
 
-	it('should return an isolated example for a HashedURL', () => {
+	it('should return an isolated example URL with a string index', () => {
+		const result = getUrl({ name, slug, exampleIndex: 'basic', isolated: true }, loc);
+		expect(result).toBe('/styleguide/#!/Components/FooBar//basic');
+	});
+
+	it('should return an isolated example for a hashed URL', () => {
 		const result = getUrl({ name, slug, exampleIndex: 0, isolated: true }, locHashedURL);
-		expect(result).toBe('/styleguide/#!/FooBar/0');
+		expect(result).toBe('/styleguide/#!/FooBar//0');
 	});
 
 	it('should return an isolated example=0 URL', () => {
 		const result = getUrl({ name, slug, exampleIndex: 0, isolated: true }, loc);
-		expect(result).toBe('/styleguide/#!/Components/FooBar/0');
+		expect(result).toBe('/styleguide/#!/Components/FooBar//0');
 	});
 
 	it('should return an absolute isolated example URL', () => {
 		const result = getUrl({ name, slug, exampleIndex: 3, isolated: true, absolute: true }, loc);
-		expect(result).toBe('http://example.com/styleguide/#!/Components/FooBar/3');
+		expect(result).toBe('http://example.com/styleguide/#!/Components/FooBar//3');
 	});
 
 	it('should return a nochrome URL', () => {

src/client/utils/getInfoFromHash.ts

@@ -1,17 +1,11 @@
 import { hasInHash, getHashAsArray } from './handleHash';
 
-function hasDigitsOnly(item: string): boolean {
-	return item.match(/^\d+$/) !== null;
-}
-
 /**
  * Returns an object containing component/section name and, optionally, an example index
  * from hash part or page URL:
  * #!/Button → { targetName: 'Button' }
- * #!/Button/1 → { targetName: 'Button', targetIndex: 1 }
- *
- * @param {string} hash
- * @returns {object}
+ * #!/Button//1 → { targetName: 'Button', targetIndex: 1 }
+ * #!/Button//basic → { targetName: 'Button', targetIndex: 'basic' }
  */
 export default function getInfoFromHash(
 	hash: string
@@ -23,13 +17,13 @@ export default function getInfoFromHash(
 } {
 	const shouldIsolate = hasInHash(hash, '#!/');
 	if (shouldIsolate || hasInHash(hash, '#/')) {
-		const hashArray = getHashAsArray(hash, shouldIsolate ? '#!/' : '#/');
-		const targetHash = hashArray[hashArray.length - 1];
+		const [baseHash, targetHash] = hash.split('//');
+		const hashArray = getHashAsArray(baseHash, shouldIsolate ? '#!/' : '#/');
 		return {
 			isolate: shouldIsolate,
-			hashArray: hashArray.filter((item) => !hasDigitsOnly(item)),
+			hashArray,
 			targetName: hashArray[0],
-			targetIndex: hasDigitsOnly(targetHash) ? parseInt(targetHash, 10) : targetHash,
+			targetIndex: parseInt(targetHash, 10) || targetHash,
 		};
 	}
 	return {};

src/client/utils/getUrl.ts

@@ -132,7 +132,7 @@ export default function getUrl(
 	}
 
 	if (exampleIndex !== undefined) {
-		url += `/${exampleIndex}`;
+		url += `//${exampleIndex}`;
 	}
 
 	if (absolute) {