polen 0.10.0-next.16 → 0.10.0-next.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/lib/graphql-document/components/GraphQLDocument.d.ts +0 -2
- package/build/lib/graphql-document/components/GraphQLDocument.d.ts.map +1 -1
- package/build/lib/graphql-document/components/GraphQLDocument.js +5 -5
- package/build/lib/graphql-document/components/GraphQLDocument.js.map +1 -1
- package/build/lib/graphql-document/components/GraphQLDocumentWithSchema.d.ts +1 -1
- package/build/lib/graphql-document/components/GraphQLDocumentWithSchema.d.ts.map +1 -1
- package/build/lib/graphql-document/components/GraphQLDocumentWithSchema.js +1 -3
- package/build/lib/graphql-document/components/GraphQLDocumentWithSchema.js.map +1 -1
- package/build/lib/graphql-document/positioning-simple.d.ts +1 -1
- package/build/lib/graphql-document/positioning-simple.js +1 -1
- package/build/template/entry.client.d.ts +0 -1
- package/build/template/entry.client.d.ts.map +1 -1
- package/build/template/entry.client.js +0 -1
- package/build/template/entry.client.js.map +1 -1
- package/build/template/routes/root.d.ts.map +1 -1
- package/build/template/routes/root.js +2 -3
- package/build/template/routes/root.js.map +1 -1
- package/package.json +2 -3
- package/src/lib/graphql-document/components/GraphQLDocument.tsx +7 -12
- package/src/lib/graphql-document/components/GraphQLDocumentWithSchema.tsx +1 -6
- package/src/lib/graphql-document/demo.md +1 -1
- package/src/lib/graphql-document/positioning-simple.test.ts +5 -5
- package/src/lib/graphql-document/positioning-simple.ts +1 -1
- package/src/template/entry.client.tsx +0 -1
- package/src/template/routes/root.tsx +0 -2
- package/build/template/components/CodeBlockEnhancer.d.ts +0 -2
- package/build/template/components/CodeBlockEnhancer.d.ts.map +0 -1
- package/build/template/components/CodeBlockEnhancer.js +0 -175
- package/build/template/components/CodeBlockEnhancer.js.map +0 -1
- package/build/template/styles/code-block.css +0 -218
- package/src/template/components/CodeBlockEnhancer.tsx +0 -192
- package/src/template/styles/code-block.css +0 -218
|
@@ -25,8 +25,6 @@ export interface GraphQLDocumentProps {
|
|
|
25
25
|
schema?: GraphQLSchema;
|
|
26
26
|
/** Component options */
|
|
27
27
|
options?: GraphQLDocumentOptions;
|
|
28
|
-
/** Pre-rendered Shiki HTML (from build time) */
|
|
29
|
-
highlightedHtml?: string;
|
|
30
28
|
}
|
|
31
29
|
/**
|
|
32
30
|
* Interactive GraphQL document component
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GraphQLDocument.d.ts","sourceRoot":"","sources":["../../../../src/lib/graphql-document/components/GraphQLDocument.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAE7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAU5C;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,qCAAqC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,8CAA8C;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gCAAgC;IAChC,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,uCAAuC;IACvC,QAAQ,EAAE,MAAM,CAAA;IAChB,gDAAgD;IAChD,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,wBAAwB;IACxB,OAAO,CAAC,EAAE,sBAAsB,CAAA;
|
|
1
|
+
{"version":3,"file":"GraphQLDocument.d.ts","sourceRoot":"","sources":["../../../../src/lib/graphql-document/components/GraphQLDocument.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAE7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAU5C;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,qCAAqC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,8CAA8C;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gCAAgC;IAChC,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,uCAAuC;IACvC,QAAQ,EAAE,MAAM,CAAA;IAChB,gDAAgD;IAChD,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,wBAAwB;IACxB,OAAO,CAAC,EAAE,sBAAsB,CAAA;CACjC;AAED;;;;;GAKG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAiN1D,CAAA"}
|
|
@@ -13,7 +13,7 @@ import { IdentifierLink } from './IdentifierLink.js';
|
|
|
13
13
|
* Transforms static GraphQL code blocks into interactive documentation
|
|
14
14
|
* with hyperlinks, tooltips, and schema validation.
|
|
15
15
|
*/
|
|
16
|
-
export const GraphQLDocument = ({ children, schema, options = {},
|
|
16
|
+
export const GraphQLDocument = ({ children, schema, options = {}, }) => {
|
|
17
17
|
const { debug = false, plain = false, onNavigate, validate = true, className = ``, } = options;
|
|
18
18
|
const navigate = useNavigate();
|
|
19
19
|
const handleNavigate = onNavigate || ((url) => navigate(url));
|
|
@@ -79,7 +79,7 @@ export const GraphQLDocument = ({ children, schema, options = {}, highlightedHtm
|
|
|
79
79
|
return;
|
|
80
80
|
}
|
|
81
81
|
// Get the code element within the container
|
|
82
|
-
const codeElement = containerRef.current.querySelector(`pre.
|
|
82
|
+
const codeElement = containerRef.current.querySelector(`pre.code-block code`)
|
|
83
83
|
|| containerRef.current.querySelector(`pre code`)
|
|
84
84
|
|| containerRef.current.querySelector(`code`);
|
|
85
85
|
if (!codeElement) {
|
|
@@ -100,7 +100,7 @@ export const GraphQLDocument = ({ children, schema, options = {}, highlightedHtm
|
|
|
100
100
|
setIsReady(true);
|
|
101
101
|
}
|
|
102
102
|
});
|
|
103
|
-
}, [analysisResult, positionCalculator, plain
|
|
103
|
+
}, [analysisResult, positionCalculator, plain]);
|
|
104
104
|
// Handle resize events with debouncing
|
|
105
105
|
ReactHooks.useEffect(() => {
|
|
106
106
|
if (!containerRef.current || !positionCalculator || plain)
|
|
@@ -109,7 +109,7 @@ export const GraphQLDocument = ({ children, schema, options = {}, highlightedHtm
|
|
|
109
109
|
const handleResize = () => {
|
|
110
110
|
clearTimeout(resizeTimer);
|
|
111
111
|
resizeTimer = setTimeout(() => {
|
|
112
|
-
const codeElement = containerRef.current?.querySelector(`pre.
|
|
112
|
+
const codeElement = containerRef.current?.querySelector(`pre.code-block code`)
|
|
113
113
|
|| containerRef.current?.querySelector(`pre code`)
|
|
114
114
|
|| containerRef.current?.querySelector(`code`);
|
|
115
115
|
if (codeElement && containerRef.current) {
|
|
@@ -130,7 +130,7 @@ export const GraphQLDocument = ({ children, schema, options = {}, highlightedHtm
|
|
|
130
130
|
return [];
|
|
131
131
|
return analysisResult.errors;
|
|
132
132
|
}, [validate, analysisResult, schema]);
|
|
133
|
-
return (_jsxs(_Fragment, { children: [_jsx("style", { dangerouslySetInnerHTML: { __html: graphqlDocumentStyles } }), _jsxs("div", { ref: containerRef, className: `graphql-document ${className} ${debug ? `graphql-debug-mode` : ``} ${!isReady && !plain ? `graphql-loading` : ``}`, "data-testid": 'graphql-document', children: [
|
|
133
|
+
return (_jsxs(_Fragment, { children: [_jsx("style", { dangerouslySetInnerHTML: { __html: graphqlDocumentStyles } }), _jsxs("div", { ref: containerRef, className: `graphql-document ${className} ${debug ? `graphql-debug-mode` : ``} ${!isReady && !plain ? `graphql-loading` : ``}`, "data-testid": 'graphql-document', children: [_jsx("pre", { className: 'code-block', children: _jsx("code", { children: children }) }), !plain && isReady && (_jsx("div", { className: 'graphql-interaction-layer', style: { pointerEvents: `none` }, children: Array.from(positions.entries()).map(([id, { position, identifier }]) => {
|
|
134
134
|
const startPos = identifier.position.start;
|
|
135
135
|
const resolution = resolutions.get(startPos);
|
|
136
136
|
if (!resolution)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GraphQLDocument.js","sourceRoot":"","sources":["../../../../src/lib/graphql-document/components/GraphQLDocument.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAE,8BAA8B,EAAE,MAAM,0BAA0B,CAAA;AACzE,OAAO,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAA;AAEpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAA;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;
|
|
1
|
+
{"version":3,"file":"GraphQLDocument.js","sourceRoot":"","sources":["../../../../src/lib/graphql-document/components/GraphQLDocument.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,5 +3,5 @@ import { type GraphQLDocumentProps } from './GraphQLDocument.js';
|
|
|
3
3
|
/**
|
|
4
4
|
* GraphQL Document component that uses the schema context
|
|
5
5
|
*/
|
|
6
|
-
export declare const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, `schema
|
|
6
|
+
export declare const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, `schema`>>;
|
|
7
7
|
//# sourceMappingURL=GraphQLDocumentWithSchema.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GraphQLDocumentWithSchema.d.ts","sourceRoot":"","sources":["../../../../src/lib/graphql-document/components/GraphQLDocumentWithSchema.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAG7C,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAEjF;;GAEG;AACH,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"GraphQLDocumentWithSchema.d.ts","sourceRoot":"","sources":["../../../../src/lib/graphql-document/components/GraphQLDocumentWithSchema.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAG7C,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAEjF;;GAEG;AACH,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,QAAQ,CAAC,CAqCpF,CAAA"}
|
|
@@ -22,8 +22,6 @@ export const GraphQLDocumentWithSchema = (props) => {
|
|
|
22
22
|
borderRadius: `var(--radius-3)`,
|
|
23
23
|
}, children: _jsx("code", { className: "language-graphql", children: props.children }) }) }));
|
|
24
24
|
}
|
|
25
|
-
|
|
26
|
-
const highlightedHtml = `<pre style="background-color: var(--gray-a2); color: var(--gray-12); padding: var(--space-3); border-radius: var(--radius-3);"><code class="language-graphql">${props.children}</code></pre>`;
|
|
27
|
-
return (_jsx(GraphQLDocument, { ...props, schema: schema, highlightedHtml: highlightedHtml }));
|
|
25
|
+
return (_jsx(GraphQLDocument, { ...props, schema: schema }));
|
|
28
26
|
};
|
|
29
27
|
//# sourceMappingURL=GraphQLDocumentWithSchema.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GraphQLDocumentWithSchema.js","sourceRoot":"","sources":["../../../../src/lib/graphql-document/components/GraphQLDocumentWithSchema.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,eAAe,EAA6B,MAAM,sBAAsB,CAAA;AAEjF;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,
|
|
1
|
+
{"version":3,"file":"GraphQLDocumentWithSchema.js","sourceRoot":"","sources":["../../../../src/lib/graphql-document/components/GraphQLDocumentWithSchema.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,eAAe,EAA6B,MAAM,sBAAsB,CAAA;AAEjF;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAmD,CACvF,KAAK,EACL,EAAE;IACF,MAAM,MAAM,GAAG,gBAAgB,EAAE,CAAA;IACjC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE7C,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,6DAA6D;IAC7D,MAAM,aAAa,GAAG,OAAO,IAAI,MAAM,CAAA;IAEvC,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,kBAAkB;QAClB,OAAO,CACL,cAAK,SAAS,EAAC,0CAA0C,iBAAa,kBAAkB,YACtF,cACE,KAAK,EAAE;oBACL,eAAe,EAAE,gBAAgB;oBACjC,KAAK,EAAE,gBAAgB;oBACvB,OAAO,EAAE,gBAAgB;oBACzB,YAAY,EAAE,iBAAiB;iBAChC,YAED,eAAM,SAAS,EAAC,kBAAkB,YAAE,KAAK,CAAC,QAAQ,GAAQ,GACtD,GACF,CACP,CAAA;IACH,CAAC;IAED,OAAO,CACL,KAAC,eAAe,OACV,KAAK,EACT,MAAM,EAAE,MAAM,GACd,CACH,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -28,7 +28,7 @@ export interface PositionResult {
|
|
|
28
28
|
identifier: Identifier;
|
|
29
29
|
}
|
|
30
30
|
/**
|
|
31
|
-
* Simplified position calculator for
|
|
31
|
+
* Simplified position calculator for syntax-highlighted code
|
|
32
32
|
*
|
|
33
33
|
* This version uses a more straightforward approach:
|
|
34
34
|
* 1. Find the line element by line number
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* This simplified version focuses on working with Polen's existing infrastructure.
|
|
6
6
|
*/
|
|
7
7
|
/**
|
|
8
|
-
* Simplified position calculator for
|
|
8
|
+
* Simplified position calculator for syntax-highlighted code
|
|
9
9
|
*
|
|
10
10
|
* This version uses a more straightforward approach:
|
|
11
11
|
* 1. Find the line element by line number
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"entry.client.d.ts","sourceRoot":"","sources":["../../src/template/entry.client.tsx"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAA
|
|
1
|
+
{"version":3,"file":"entry.client.d.ts","sourceRoot":"","sources":["../../src/template/entry.client.tsx"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAA"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import '@radix-ui/themes/styles.css';
|
|
3
|
-
import './styles/code-block.css';
|
|
4
3
|
import { ReactDomClient } from '#dep/react-dom-client/index';
|
|
5
4
|
import { StrictMode } from 'react';
|
|
6
5
|
import { createBrowserRouter, RouterProvider } from 'react-router';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"entry.client.js","sourceRoot":"","sources":["../../src/template/entry.client.tsx"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAA;AACpC,OAAO,
|
|
1
|
+
{"version":3,"file":"entry.client.js","sourceRoot":"","sources":["../../src/template/entry.client.tsx"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAA;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAClC,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAClE,OAAO,YAAY,MAAM,sCAAsC,CAAA;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEpC,MAAM;AAEN,6CAA6C;AAE7C,+BAA+B;AAC/B,wCAAwC;AACxC,IAAI;AAEJ,MAAM;AAEN,MAAM,MAAM,GAAG,mBAAmB,CAAC,MAAM,EAAE;IACzC,aAAa,EAAE,MAAM,CAAC,2BAA2B;IACjD,QAAQ,EAAE,YAAY,CAAC,QAAQ,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,yCAAyC;CACpI,CAAC,CAAA;AAEF,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;AAClD,IAAI,CAAC,WAAW,EAAE,CAAC;IACjB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAA;AACpD,CAAC;AAED,cAAc,CAAC,WAAW,CACxB,WAAW,EACX,CACE,KAAC,UAAU,cACT,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,GACvB,CACd,CACF,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../../src/template/routes/root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;
|
|
1
|
+
{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../../src/template/routes/root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAoB1D,eAAO,MAAM,SAAS,+CAkBrB,CAAA;AAgGD,eAAO,MAAM,IAAI;;;;CAIf,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { createRoute } from '#lib/react-router-aid/react-router-aid';
|
|
3
3
|
import { Box } from '@radix-ui/themes';
|
|
4
4
|
import { Flex, Theme } from '@radix-ui/themes';
|
|
@@ -9,7 +9,6 @@ import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper';
|
|
|
9
9
|
import { routes } from 'virtual:polen/project/routes.jsx';
|
|
10
10
|
import { templateVariables } from 'virtual:polen/template/variables';
|
|
11
11
|
import { GraphQLSchemaProvider } from '../../lib/graphql-document/schema-context.js';
|
|
12
|
-
import { CodeBlockEnhancer } from '../components/CodeBlockEnhancer.js';
|
|
13
12
|
import { Link } from '../components/Link.js';
|
|
14
13
|
import { Logo } from '../components/Logo.js';
|
|
15
14
|
import { NotFound } from '../components/NotFound.js';
|
|
@@ -25,7 +24,7 @@ export const Component = () => {
|
|
|
25
24
|
;
|
|
26
25
|
window.__POLEN_GRAPHQL_SCHEMA__ = schema;
|
|
27
26
|
}
|
|
28
|
-
return (_jsxs(_Fragment, { children: [_jsx(ThemeProvider, { children:
|
|
27
|
+
return (_jsxs(_Fragment, { children: [_jsx(ThemeProvider, { children: _jsx(GraphQLSchemaProvider, { schema: schema, children: _jsx(Layout, {}) }) }), _jsx(ScrollRestoration, {})] }));
|
|
29
28
|
};
|
|
30
29
|
const Layout = () => {
|
|
31
30
|
const { appearance } = useTheme();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"root.js","sourceRoot":"","sources":["../../../src/template/routes/root.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AACpE,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,cAAc,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,OAAO,MAAM,uCAAuC,CAAA;AAC3D,OAAO,YAAY,MAAM,sCAAsC,CAAA;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAA;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AACpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,8CAA8C,CAAA;AACpF,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"root.js","sourceRoot":"","sources":["../../../src/template/routes/root.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AACpE,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,cAAc,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,OAAO,MAAM,uCAAuC,CAAA;AAC3D,OAAO,YAAY,MAAM,sCAAsC,CAAA;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAA;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AACpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,8CAA8C,CAAA;AACpF,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAA;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,MAAM,GAAG,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,IAAI,CAAA;IAE9D,oDAAoD;IACpD,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,EAAE,CAAC;QAC5C,CAAC;QAAC,MAAc,CAAC,wBAAwB,GAAG,MAAM,CAAA;IACpD,CAAC;IAED,OAAO,CACL,8BACE,KAAC,aAAa,cACZ,KAAC,qBAAqB,IAAC,MAAM,EAAE,MAAM,YACnC,KAAC,MAAM,KAAG,GACY,GACV,EAChB,KAAC,iBAAiB,KAAG,IACpB,CACJ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,GAAG,EAAE;IAClB,MAAM,EAAE,UAAU,EAAE,GAAG,QAAQ,EAAE,CAAA;IAEjC,MAAM,MAAM,GAAG,CACb,MAAC,IAAI,IACH,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAC9B,EAAE,EAAC,GAAG,EACN,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAC7B,KAAK,EAAE;YACL,YAAY,EAAE,yBAAyB;SACxC,aAED,KAAC,eAAe,IACd,EAAE,EAAC,GAAG,EACN,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,EAAE,YAEnD,KAAC,GAAG,IAAC,OAAO,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,YAC7C,KAAC,IAAI,IAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,GAAI,GAC/E,GACU,EAClB,KAAC,IAAI,IAAC,SAAS,EAAC,KAAK,EAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAC7C,YAAY,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,CACtC,KAAC,IAAI,IAAW,KAAK,EAAC,MAAM,EAAC,EAAE,EAAE,IAAI,CAAC,OAAO,YAC1C,IAAI,CAAC,KAAK,IADF,GAAG,CAEP,CACR,CAAC,GACG,EACP,KAAC,WAAW,KAAG,IACV,CACR,CAAA;IAED,OAAO,CACL,KAAC,KAAK,IAAC,OAAO,QAAC,UAAU,EAAE,UAAU,YACnC,MAAC,GAAG,IACF,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,oBAAoB,EAAE,EAChE,QAAQ,EAAC,OAAO,EAChB,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EACtC,EAAE,EAAC,MAAM,EACT,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EACtC,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,aAErC,MAAM,EACP,KAAC,MAAM,KAAG,IACN,GACA,CACT,CAAA;AACH,CAAC,CAAA;AAED,MAAM,QAAQ,GAA8B;IAC1C,KAAK;IACL,GAAG,MAAM;CACV,CAAA;AAED,EAAE;AACF,EAAE;AACF,EAAE;AACF,EAAE;AACF,8DAA8D;AAC9D,EAAE;AACF,EAAE;AACF,EAAE;AAEF,IAAI,YAAY,CAAC,MAAM,EAAE,CAAC;IACxB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IACxB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;AAC1B,CAAC;AAED,EAAE;AACF,EAAE;AACF,EAAE;AACF,EAAE;AACF,mCAAmC;AACnC,EAAE;AACF,EAAE;AACF,EAAE;AAEF,MAAM,aAAa,GAAG,WAAW,CAAC;IAChC,EAAE,EAAE,aAAa;IACjB,IAAI,EAAE,GAAG;IACT,SAAS,EAAE,QAAQ;IACnB,MAAM,EAAE;QACN,UAAU,EAAE,GAAG;KAChB;CACF,CAAC,CAAA;AACF,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;AAE5B,EAAE;AACF,EAAE;AACF,EAAE;AACF,8BAA8B;AAC9B,EAAE;AACF,EAAE;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,WAAW,CAAC;IAC9B,IAAI,EAAE,GAAG;IACT,SAAS;IACT,QAAQ;CACT,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "polen",
|
|
3
|
-
"version": "0.10.0-next.
|
|
3
|
+
"version": "0.10.0-next.17",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A framework for delightful GraphQL developer portals",
|
|
6
6
|
"author": {
|
|
@@ -223,8 +223,7 @@
|
|
|
223
223
|
"prepublishOnly": "pnpm build",
|
|
224
224
|
"prepack": "pnpm build",
|
|
225
225
|
"build:cli:chmodx": "chmod +x ./build/cli/index.js",
|
|
226
|
-
"postbuild": "pnpm run build:cli:chmodx
|
|
227
|
-
"build:copy-assets": "mkdir -p build/template && cp -r src/template/styles build/template/",
|
|
226
|
+
"postbuild": "pnpm run build:cli:chmodx",
|
|
228
227
|
"test": "vitest",
|
|
229
228
|
"check": "pnpm run '/^check:(?!pedantic:).+/'",
|
|
230
229
|
"checkAll": "pnpm run '/^check:.+/'",
|
|
@@ -36,8 +36,6 @@ export interface GraphQLDocumentProps {
|
|
|
36
36
|
schema?: GraphQLSchema
|
|
37
37
|
/** Component options */
|
|
38
38
|
options?: GraphQLDocumentOptions
|
|
39
|
-
/** Pre-rendered Shiki HTML (from build time) */
|
|
40
|
-
highlightedHtml?: string
|
|
41
39
|
}
|
|
42
40
|
|
|
43
41
|
/**
|
|
@@ -50,7 +48,6 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
|
|
|
50
48
|
children,
|
|
51
49
|
schema,
|
|
52
50
|
options = {},
|
|
53
|
-
highlightedHtml,
|
|
54
51
|
}) => {
|
|
55
52
|
const {
|
|
56
53
|
debug = false,
|
|
@@ -135,7 +132,7 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
|
|
|
135
132
|
}
|
|
136
133
|
|
|
137
134
|
// Get the code element within the container
|
|
138
|
-
const codeElement = containerRef.current.querySelector(`pre.
|
|
135
|
+
const codeElement = containerRef.current.querySelector(`pre.code-block code`)
|
|
139
136
|
|| containerRef.current.querySelector(`pre code`)
|
|
140
137
|
|| containerRef.current.querySelector(`code`)
|
|
141
138
|
if (!codeElement) {
|
|
@@ -158,7 +155,7 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
|
|
|
158
155
|
setIsReady(true)
|
|
159
156
|
}
|
|
160
157
|
})
|
|
161
|
-
}, [analysisResult, positionCalculator, plain
|
|
158
|
+
}, [analysisResult, positionCalculator, plain])
|
|
162
159
|
|
|
163
160
|
// Handle resize events with debouncing
|
|
164
161
|
ReactHooks.useEffect(() => {
|
|
@@ -168,7 +165,7 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
|
|
|
168
165
|
const handleResize = () => {
|
|
169
166
|
clearTimeout(resizeTimer)
|
|
170
167
|
resizeTimer = setTimeout(() => {
|
|
171
|
-
const codeElement = containerRef.current?.querySelector(`pre.
|
|
168
|
+
const codeElement = containerRef.current?.querySelector(`pre.code-block code`)
|
|
172
169
|
|| containerRef.current?.querySelector(`pre code`)
|
|
173
170
|
|| containerRef.current?.querySelector(`code`)
|
|
174
171
|
if (codeElement && containerRef.current) {
|
|
@@ -201,12 +198,10 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
|
|
|
201
198
|
}`}
|
|
202
199
|
data-testid='graphql-document'
|
|
203
200
|
>
|
|
204
|
-
{/* Base
|
|
205
|
-
|
|
206
|
-
<
|
|
207
|
-
|
|
208
|
-
</pre>
|
|
209
|
-
)}
|
|
201
|
+
{/* Base code block */}
|
|
202
|
+
<pre className='code-block'>
|
|
203
|
+
<code>{children}</code>
|
|
204
|
+
</pre>
|
|
210
205
|
|
|
211
206
|
{/* Interactive overlay layer */}
|
|
212
207
|
{!plain && isReady && (
|
|
@@ -6,7 +6,7 @@ import { GraphQLDocument, type GraphQLDocumentProps } from './GraphQLDocument.js
|
|
|
6
6
|
/**
|
|
7
7
|
* GraphQL Document component that uses the schema context
|
|
8
8
|
*/
|
|
9
|
-
export const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, `schema
|
|
9
|
+
export const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, `schema`>> = (
|
|
10
10
|
props,
|
|
11
11
|
) => {
|
|
12
12
|
const schema = useGraphQLSchema()
|
|
@@ -37,15 +37,10 @@ export const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, `sch
|
|
|
37
37
|
)
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
// Simple highlighted HTML without syntax highlighting
|
|
41
|
-
const highlightedHtml =
|
|
42
|
-
`<pre style="background-color: var(--gray-a2); color: var(--gray-12); padding: var(--space-3); border-radius: var(--radius-3);"><code class="language-graphql">${props.children}</code></pre>`
|
|
43
|
-
|
|
44
40
|
return (
|
|
45
41
|
<GraphQLDocument
|
|
46
42
|
{...props}
|
|
47
43
|
schema={schema}
|
|
48
|
-
highlightedHtml={highlightedHtml}
|
|
49
44
|
/>
|
|
50
45
|
)
|
|
51
46
|
}
|
|
@@ -133,7 +133,7 @@ The GraphQL Document component provides:
|
|
|
133
133
|
- **Interactive Navigation**: Click on any type or field to navigate to its reference documentation
|
|
134
134
|
- **Hover Tooltips**: See type information, descriptions, and deprecation warnings
|
|
135
135
|
- **Schema Validation**: Invalid queries are highlighted with error messages
|
|
136
|
-
- **Syntax Highlighting**: Beautiful syntax highlighting
|
|
136
|
+
- **Syntax Highlighting**: Beautiful syntax highlighting
|
|
137
137
|
- **Smart Positioning**: Tooltips automatically position themselves to stay within the viewport
|
|
138
138
|
- **Accessibility**: Full keyboard navigation and screen reader support
|
|
139
139
|
|
|
@@ -32,7 +32,7 @@ describe('Simple Positioning Engine', () => {
|
|
|
32
32
|
it('should wrap identifiers in spans', () => {
|
|
33
33
|
const container = document.createElement('div')
|
|
34
34
|
container.innerHTML = `
|
|
35
|
-
<pre class="
|
|
35
|
+
<pre class="code-block">
|
|
36
36
|
<code>query GetUser {
|
|
37
37
|
user {
|
|
38
38
|
name
|
|
@@ -64,7 +64,7 @@ describe('Simple Positioning Engine', () => {
|
|
|
64
64
|
it('should handle multiple identifiers in same line', () => {
|
|
65
65
|
const container = document.createElement('div')
|
|
66
66
|
container.innerHTML = `
|
|
67
|
-
<pre class="
|
|
67
|
+
<pre class="code-block">
|
|
68
68
|
<code>query GetUserById($id: ID!) {</code>
|
|
69
69
|
</pre>
|
|
70
70
|
`
|
|
@@ -86,7 +86,7 @@ describe('Simple Positioning Engine', () => {
|
|
|
86
86
|
it('should get positions of wrapped identifiers', () => {
|
|
87
87
|
const container = document.createElement('div')
|
|
88
88
|
container.innerHTML = `
|
|
89
|
-
<pre class="
|
|
89
|
+
<pre class="code-block">
|
|
90
90
|
<code>
|
|
91
91
|
<span class="line"><span data-graphql-id="0-user-Field" data-graphql-name="user" data-graphql-kind="Field" data-graphql-start="0" data-graphql-end="4" data-graphql-line="1" data-graphql-column="1" data-graphql-path="user">user</span> {</span>
|
|
92
92
|
</code>
|
|
@@ -137,7 +137,7 @@ describe('Simple Positioning Engine', () => {
|
|
|
137
137
|
it('should skip already wrapped identifiers', () => {
|
|
138
138
|
const container = document.createElement('div')
|
|
139
139
|
container.innerHTML = `
|
|
140
|
-
<pre class="
|
|
140
|
+
<pre class="code-block">
|
|
141
141
|
<code><span data-graphql-id="existing">user</span> {</code>
|
|
142
142
|
</pre>
|
|
143
143
|
`
|
|
@@ -158,7 +158,7 @@ describe('Simple Positioning Engine', () => {
|
|
|
158
158
|
it('should handle empty lines gracefully', () => {
|
|
159
159
|
const container = document.createElement('div')
|
|
160
160
|
container.innerHTML = `
|
|
161
|
-
<pre class="
|
|
161
|
+
<pre class="code-block">
|
|
162
162
|
<code>query {
|
|
163
163
|
|
|
164
164
|
user</code>
|
|
@@ -32,7 +32,7 @@ export interface PositionResult {
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
/**
|
|
35
|
-
* Simplified position calculator for
|
|
35
|
+
* Simplified position calculator for syntax-highlighted code
|
|
36
36
|
*
|
|
37
37
|
* This version uses a more straightforward approach:
|
|
38
38
|
* 1. Find the line element by line number
|
|
@@ -9,7 +9,6 @@ import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
|
|
|
9
9
|
import { routes } from 'virtual:polen/project/routes.jsx'
|
|
10
10
|
import { templateVariables } from 'virtual:polen/template/variables'
|
|
11
11
|
import { GraphQLSchemaProvider } from '../../lib/graphql-document/schema-context.js'
|
|
12
|
-
import { CodeBlockEnhancer } from '../components/CodeBlockEnhancer.js'
|
|
13
12
|
import { Link } from '../components/Link.js'
|
|
14
13
|
import { Logo } from '../components/Logo.js'
|
|
15
14
|
import { NotFound } from '../components/NotFound.js'
|
|
@@ -32,7 +31,6 @@ export const Component = () => {
|
|
|
32
31
|
<ThemeProvider>
|
|
33
32
|
<GraphQLSchemaProvider schema={schema}>
|
|
34
33
|
<Layout />
|
|
35
|
-
<CodeBlockEnhancer />
|
|
36
34
|
</GraphQLSchemaProvider>
|
|
37
35
|
</ThemeProvider>
|
|
38
36
|
<ScrollRestoration />
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlockEnhancer.d.ts","sourceRoot":"","sources":["../../../src/template/components/CodeBlockEnhancer.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,YA2L7B,CAAA"}
|
|
@@ -1,175 +0,0 @@
|
|
|
1
|
-
import { useEffect } from 'react';
|
|
2
|
-
import { useLocation } from 'react-router';
|
|
3
|
-
import { useTheme } from '../contexts/ThemeContext.js';
|
|
4
|
-
export const CodeBlockEnhancer = () => {
|
|
5
|
-
const { appearance } = useTheme();
|
|
6
|
-
const location = useLocation();
|
|
7
|
-
useEffect(() => {
|
|
8
|
-
// Add styles for code block enhancements
|
|
9
|
-
const styleId = `code-block-enhancer-styles`;
|
|
10
|
-
let styleElement = document.getElementById(styleId);
|
|
11
|
-
if (!styleElement) {
|
|
12
|
-
styleElement = document.createElement(`style`);
|
|
13
|
-
styleElement.id = styleId;
|
|
14
|
-
document.head.appendChild(styleElement);
|
|
15
|
-
}
|
|
16
|
-
styleElement.textContent = `
|
|
17
|
-
/* Enhanced code block styles */
|
|
18
|
-
pre.shiki {
|
|
19
|
-
position: relative;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
pre.shiki[data-title] {
|
|
23
|
-
margin-top: 0;
|
|
24
|
-
border-radius: 0 0 8px 8px !important;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
pre.shiki[data-title]::before {
|
|
28
|
-
content: attr(data-title);
|
|
29
|
-
display: block;
|
|
30
|
-
position: absolute;
|
|
31
|
-
top: -2.5rem;
|
|
32
|
-
left: -1px;
|
|
33
|
-
right: -1px;
|
|
34
|
-
background-color: ${appearance === `dark` ? `#2a2b3d` : `#f3f4f6`};
|
|
35
|
-
border: 1px solid var(--gray-4);
|
|
36
|
-
border-bottom: 1px solid ${appearance === `dark` ? `#3a3b4d` : `#e5e7eb`};
|
|
37
|
-
border-radius: 8px 8px 0 0;
|
|
38
|
-
padding: 0.5rem 1rem;
|
|
39
|
-
font-size: 0.875rem;
|
|
40
|
-
font-weight: 500;
|
|
41
|
-
color: var(--gray-11);
|
|
42
|
-
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
pre.shiki[data-title][data-language]::after {
|
|
46
|
-
content: attr(data-language);
|
|
47
|
-
position: absolute;
|
|
48
|
-
top: -2rem;
|
|
49
|
-
right: 1rem;
|
|
50
|
-
font-size: 0.75rem;
|
|
51
|
-
color: var(--gray-9);
|
|
52
|
-
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.code-block-copy {
|
|
56
|
-
position: absolute;
|
|
57
|
-
top: 0.5rem;
|
|
58
|
-
right: 0.5rem;
|
|
59
|
-
padding: 0.25rem 0.5rem;
|
|
60
|
-
font-size: 0.75rem;
|
|
61
|
-
cursor: pointer;
|
|
62
|
-
border: none;
|
|
63
|
-
border-radius: 4px;
|
|
64
|
-
transition: all 0.2s;
|
|
65
|
-
background-color: ${appearance === `dark` ? `rgba(0, 0, 0, 0.5)` : `rgba(255, 255, 255, 0.8)`};
|
|
66
|
-
backdrop-filter: blur(4px);
|
|
67
|
-
color: ${appearance === `dark` ? `#fff` : `#000`};
|
|
68
|
-
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
pre.shiki[data-title] .code-block-copy {
|
|
72
|
-
top: -2rem;
|
|
73
|
-
right: 6rem;
|
|
74
|
-
background-color: transparent;
|
|
75
|
-
color: var(--gray-11);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.code-block-copy:hover {
|
|
79
|
-
background-color: var(--accent-9) !important;
|
|
80
|
-
color: white !important;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.code-block-copy[data-copied="true"] {
|
|
84
|
-
background-color: var(--green-9) !important;
|
|
85
|
-
color: white !important;
|
|
86
|
-
}
|
|
87
|
-
`;
|
|
88
|
-
return () => {
|
|
89
|
-
if (styleElement && styleElement.parentNode) {
|
|
90
|
-
styleElement.parentNode.removeChild(styleElement);
|
|
91
|
-
}
|
|
92
|
-
};
|
|
93
|
-
}, [appearance]);
|
|
94
|
-
useEffect(() => {
|
|
95
|
-
const enhanceCodeBlocks = () => {
|
|
96
|
-
const codeBlocks = document.querySelectorAll(`pre.shiki:not([data-enhanced])`);
|
|
97
|
-
codeBlocks.forEach((block) => {
|
|
98
|
-
const preElement = block;
|
|
99
|
-
preElement.setAttribute(`data-enhanced`, `true`);
|
|
100
|
-
// Get language from class name
|
|
101
|
-
const classes = preElement.className.split(` `);
|
|
102
|
-
const language = classes.find(c => c !== `shiki` && c !== `shiki-light` && c !== `shiki-dark`) || `text`;
|
|
103
|
-
// Check for title in first line
|
|
104
|
-
const codeElement = preElement.querySelector(`code`);
|
|
105
|
-
if (!codeElement)
|
|
106
|
-
return;
|
|
107
|
-
const firstLine = codeElement.textContent?.split(`\n`)[0] || ``;
|
|
108
|
-
let title = ``;
|
|
109
|
-
const titleMatch = /^\/\/\s*title:\s*(.+)$/i.exec(firstLine);
|
|
110
|
-
if (titleMatch?.[1]) {
|
|
111
|
-
title = titleMatch[1];
|
|
112
|
-
// Remove title line from display
|
|
113
|
-
const firstLineElement = codeElement.querySelector(`span.line`);
|
|
114
|
-
if (firstLineElement) {
|
|
115
|
-
firstLineElement.style.display = `none`;
|
|
116
|
-
}
|
|
117
|
-
// Set data attributes for CSS
|
|
118
|
-
preElement.setAttribute(`data-title`, title);
|
|
119
|
-
preElement.setAttribute(`data-language`, language);
|
|
120
|
-
preElement.style.marginTop = `3rem`;
|
|
121
|
-
}
|
|
122
|
-
// Create copy button
|
|
123
|
-
const copyButton = document.createElement(`button`);
|
|
124
|
-
copyButton.className = `code-block-copy`;
|
|
125
|
-
copyButton.textContent = `Copy`;
|
|
126
|
-
copyButton.setAttribute(`data-copied`, `false`);
|
|
127
|
-
copyButton.onclick = async (e) => {
|
|
128
|
-
e.preventDefault();
|
|
129
|
-
e.stopPropagation();
|
|
130
|
-
// Get clean code without the title line
|
|
131
|
-
const code = codeElement.textContent || ``;
|
|
132
|
-
const cleanCode = title ? code.split(`\n`).slice(1).join(`\n`) : code;
|
|
133
|
-
try {
|
|
134
|
-
await navigator.clipboard.writeText(cleanCode);
|
|
135
|
-
copyButton.textContent = `Copied!`;
|
|
136
|
-
copyButton.setAttribute(`data-copied`, `true`);
|
|
137
|
-
setTimeout(() => {
|
|
138
|
-
copyButton.textContent = `Copy`;
|
|
139
|
-
copyButton.setAttribute(`data-copied`, `false`);
|
|
140
|
-
}, 2000);
|
|
141
|
-
}
|
|
142
|
-
catch (err) {
|
|
143
|
-
console.error(`Failed to copy:`, err);
|
|
144
|
-
}
|
|
145
|
-
};
|
|
146
|
-
// Append copy button directly to pre element
|
|
147
|
-
preElement.appendChild(copyButton);
|
|
148
|
-
});
|
|
149
|
-
};
|
|
150
|
-
// Small delay to ensure DOM is ready
|
|
151
|
-
const timeoutId = setTimeout(enhanceCodeBlocks, 100);
|
|
152
|
-
return () => {
|
|
153
|
-
clearTimeout(timeoutId);
|
|
154
|
-
// Clean up enhanced code blocks
|
|
155
|
-
document.querySelectorAll(`pre.shiki[data-enhanced]`).forEach(block => {
|
|
156
|
-
block.removeAttribute(`data-enhanced`);
|
|
157
|
-
block.removeAttribute(`data-title`);
|
|
158
|
-
block.removeAttribute(`data-language`);
|
|
159
|
-
const copyButton = block.querySelector(`.code-block-copy`);
|
|
160
|
-
if (copyButton) {
|
|
161
|
-
copyButton.remove();
|
|
162
|
-
}
|
|
163
|
-
// Restore hidden title lines
|
|
164
|
-
const firstLine = block.querySelector(`span.line`);
|
|
165
|
-
if (firstLine && firstLine.style.display === `none`) {
|
|
166
|
-
firstLine.style.display = ``;
|
|
167
|
-
} // Reset margin
|
|
168
|
-
;
|
|
169
|
-
block.style.marginTop = ``;
|
|
170
|
-
});
|
|
171
|
-
};
|
|
172
|
-
}, [location.pathname]); // Re-run when route changes
|
|
173
|
-
return null;
|
|
174
|
-
};
|
|
175
|
-
//# sourceMappingURL=CodeBlockEnhancer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlockEnhancer.js","sourceRoot":"","sources":["../../../src/template/components/CodeBlockEnhancer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,218 +0,0 @@
|
|
|
1
|
-
/* Code Block Styles */
|
|
2
|
-
|
|
3
|
-
/* Base code block container */
|
|
4
|
-
.code-block {
|
|
5
|
-
position: relative;
|
|
6
|
-
margin: 1rem 0;
|
|
7
|
-
border-radius: 8px;
|
|
8
|
-
overflow: hidden;
|
|
9
|
-
font-size: 14px;
|
|
10
|
-
line-height: 1.6;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.code-block pre {
|
|
14
|
-
margin: 0;
|
|
15
|
-
padding: 1rem;
|
|
16
|
-
overflow-x: auto;
|
|
17
|
-
background: inherit;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.code-block code {
|
|
21
|
-
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
22
|
-
font-variant-ligatures: contextual;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
/* Shiki theme switching with CSS variables */
|
|
26
|
-
/* Default to light theme */
|
|
27
|
-
:root {
|
|
28
|
-
color-scheme: light;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
/* When dark mode is active */
|
|
32
|
-
.dark {
|
|
33
|
-
color-scheme: dark;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
/* Shiki token colors for light theme (github-light) */
|
|
37
|
-
:root {
|
|
38
|
-
--shiki-color-text: #24292e;
|
|
39
|
-
--shiki-color-background: #f6f8fa;
|
|
40
|
-
--shiki-token-constant: #005cc5;
|
|
41
|
-
--shiki-token-string: #032f62;
|
|
42
|
-
--shiki-token-comment: #6a737d;
|
|
43
|
-
--shiki-token-keyword: #d73a49;
|
|
44
|
-
--shiki-token-parameter: #e36209;
|
|
45
|
-
--shiki-token-function: #6f42c1;
|
|
46
|
-
--shiki-token-string-expression: #032f62;
|
|
47
|
-
--shiki-token-punctuation: #24292e;
|
|
48
|
-
--shiki-token-link: #032f62;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
/* Shiki token colors for dark theme (tokyo-night) */
|
|
52
|
-
.dark {
|
|
53
|
-
--shiki-color-text: #c0caf5;
|
|
54
|
-
--shiki-color-background: #1a1b26;
|
|
55
|
-
--shiki-token-constant: #ff9e64;
|
|
56
|
-
--shiki-token-string: #9ece6a;
|
|
57
|
-
--shiki-token-comment: #565f89;
|
|
58
|
-
--shiki-token-keyword: #bb9af7;
|
|
59
|
-
--shiki-token-parameter: #e0af68;
|
|
60
|
-
--shiki-token-function: #7aa2f7;
|
|
61
|
-
--shiki-token-string-expression: #9ece6a;
|
|
62
|
-
--shiki-token-punctuation: #c0caf5;
|
|
63
|
-
--shiki-token-link: #9ece6a;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
/* Shiki code blocks */
|
|
67
|
-
pre.shiki {
|
|
68
|
-
margin: 1rem 0;
|
|
69
|
-
padding: 1rem;
|
|
70
|
-
border-radius: 8px;
|
|
71
|
-
overflow-x: auto;
|
|
72
|
-
font-size: 14px;
|
|
73
|
-
line-height: 1.6;
|
|
74
|
-
background-color: var(--shiki-color-background);
|
|
75
|
-
color: var(--shiki-color-text);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
pre.shiki code {
|
|
79
|
-
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
80
|
-
font-variant-ligatures: contextual;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
/* Line numbers */
|
|
84
|
-
.code-block[data-line-numbers="true"] pre {
|
|
85
|
-
padding-left: 3.5rem;
|
|
86
|
-
position: relative;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.code-block[data-line-numbers="true"] .line {
|
|
90
|
-
position: relative;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.code-block[data-line-numbers="true"] .line::before {
|
|
94
|
-
content: attr(data-line);
|
|
95
|
-
position: absolute;
|
|
96
|
-
left: -3rem;
|
|
97
|
-
width: 2.5rem;
|
|
98
|
-
text-align: right;
|
|
99
|
-
color: var(--gray-a6);
|
|
100
|
-
user-select: none;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
/* Line highlighting */
|
|
104
|
-
.code-block .line[data-highlighted="true"] {
|
|
105
|
-
background-color: var(--amber-a3);
|
|
106
|
-
display: block;
|
|
107
|
-
margin: 0 -1rem;
|
|
108
|
-
padding: 0 1rem;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
/* Diff lines */
|
|
112
|
-
.code-block .line[data-diff="+"] {
|
|
113
|
-
background-color: var(--green-a3);
|
|
114
|
-
display: block;
|
|
115
|
-
margin: 0 -1rem;
|
|
116
|
-
padding: 0 1rem;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
.code-block .line[data-diff="-"] {
|
|
120
|
-
background-color: var(--red-a3);
|
|
121
|
-
display: block;
|
|
122
|
-
margin: 0 -1rem;
|
|
123
|
-
padding: 0 1rem;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
.code-block .line[data-diff="+"]::before {
|
|
127
|
-
content: "+ ";
|
|
128
|
-
color: var(--green-11);
|
|
129
|
-
font-weight: bold;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.code-block .line[data-diff="-"]::before {
|
|
133
|
-
content: "- ";
|
|
134
|
-
color: var(--red-11);
|
|
135
|
-
font-weight: bold;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
/* Focus lines */
|
|
139
|
-
.code-block .line:not([data-focus="true"]) {
|
|
140
|
-
opacity: 0.5;
|
|
141
|
-
filter: grayscale(100%);
|
|
142
|
-
transition: opacity 0.2s, filter 0.2s;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
.code-block:hover .line:not([data-focus="true"]) {
|
|
146
|
-
opacity: 0.8;
|
|
147
|
-
filter: grayscale(0%);
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
/* Copy button */
|
|
151
|
-
.code-block-copy {
|
|
152
|
-
position: absolute;
|
|
153
|
-
top: 0.5rem;
|
|
154
|
-
right: 0.5rem;
|
|
155
|
-
padding: 0.25rem 0.5rem;
|
|
156
|
-
border-radius: 4px;
|
|
157
|
-
background: var(--gray-a3);
|
|
158
|
-
color: var(--gray-12);
|
|
159
|
-
border: 1px solid var(--gray-a5);
|
|
160
|
-
cursor: pointer;
|
|
161
|
-
font-size: 12px;
|
|
162
|
-
transition: all 0.2s;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
.code-block-copy:hover {
|
|
166
|
-
background: var(--gray-a4);
|
|
167
|
-
border-color: var(--gray-a6);
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
.code-block-copy.copied {
|
|
171
|
-
background: var(--green-a3);
|
|
172
|
-
border-color: var(--green-a5);
|
|
173
|
-
color: var(--green-11);
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
/* Language badge */
|
|
177
|
-
.code-block-lang {
|
|
178
|
-
position: absolute;
|
|
179
|
-
top: 0;
|
|
180
|
-
right: 0;
|
|
181
|
-
padding: 0.25rem 0.75rem;
|
|
182
|
-
background: var(--gray-a3);
|
|
183
|
-
color: var(--gray-11);
|
|
184
|
-
font-size: 12px;
|
|
185
|
-
font-weight: 500;
|
|
186
|
-
border-bottom-left-radius: 4px;
|
|
187
|
-
user-select: none;
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
/* Scrollbar styling */
|
|
191
|
-
.code-block pre::-webkit-scrollbar {
|
|
192
|
-
height: 8px;
|
|
193
|
-
width: 8px;
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
.code-block pre::-webkit-scrollbar-track {
|
|
197
|
-
background: var(--gray-a3);
|
|
198
|
-
border-radius: 4px;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
.code-block pre::-webkit-scrollbar-thumb {
|
|
202
|
-
background: var(--gray-a6);
|
|
203
|
-
border-radius: 4px;
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
.code-block pre::-webkit-scrollbar-thumb:hover {
|
|
207
|
-
background: var(--gray-a7);
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
/* Inline code */
|
|
211
|
-
code:not(.code-block code) {
|
|
212
|
-
padding: 0.2em 0.4em;
|
|
213
|
-
margin: 0;
|
|
214
|
-
font-size: 0.85em;
|
|
215
|
-
background-color: var(--gray-a3);
|
|
216
|
-
border-radius: 4px;
|
|
217
|
-
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
218
|
-
}
|
|
@@ -1,192 +0,0 @@
|
|
|
1
|
-
import { useEffect } from 'react'
|
|
2
|
-
import { useLocation } from 'react-router'
|
|
3
|
-
import { useTheme } from '../contexts/ThemeContext.js'
|
|
4
|
-
|
|
5
|
-
export const CodeBlockEnhancer = () => {
|
|
6
|
-
const { appearance } = useTheme()
|
|
7
|
-
const location = useLocation()
|
|
8
|
-
|
|
9
|
-
useEffect(() => {
|
|
10
|
-
// Add styles for code block enhancements
|
|
11
|
-
const styleId = `code-block-enhancer-styles`
|
|
12
|
-
let styleElement = document.getElementById(styleId) as HTMLStyleElement
|
|
13
|
-
|
|
14
|
-
if (!styleElement) {
|
|
15
|
-
styleElement = document.createElement(`style`)
|
|
16
|
-
styleElement.id = styleId
|
|
17
|
-
document.head.appendChild(styleElement)
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
styleElement.textContent = `
|
|
21
|
-
/* Enhanced code block styles */
|
|
22
|
-
pre.shiki {
|
|
23
|
-
position: relative;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
pre.shiki[data-title] {
|
|
27
|
-
margin-top: 0;
|
|
28
|
-
border-radius: 0 0 8px 8px !important;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
pre.shiki[data-title]::before {
|
|
32
|
-
content: attr(data-title);
|
|
33
|
-
display: block;
|
|
34
|
-
position: absolute;
|
|
35
|
-
top: -2.5rem;
|
|
36
|
-
left: -1px;
|
|
37
|
-
right: -1px;
|
|
38
|
-
background-color: ${appearance === `dark` ? `#2a2b3d` : `#f3f4f6`};
|
|
39
|
-
border: 1px solid var(--gray-4);
|
|
40
|
-
border-bottom: 1px solid ${appearance === `dark` ? `#3a3b4d` : `#e5e7eb`};
|
|
41
|
-
border-radius: 8px 8px 0 0;
|
|
42
|
-
padding: 0.5rem 1rem;
|
|
43
|
-
font-size: 0.875rem;
|
|
44
|
-
font-weight: 500;
|
|
45
|
-
color: var(--gray-11);
|
|
46
|
-
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
pre.shiki[data-title][data-language]::after {
|
|
50
|
-
content: attr(data-language);
|
|
51
|
-
position: absolute;
|
|
52
|
-
top: -2rem;
|
|
53
|
-
right: 1rem;
|
|
54
|
-
font-size: 0.75rem;
|
|
55
|
-
color: var(--gray-9);
|
|
56
|
-
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.code-block-copy {
|
|
60
|
-
position: absolute;
|
|
61
|
-
top: 0.5rem;
|
|
62
|
-
right: 0.5rem;
|
|
63
|
-
padding: 0.25rem 0.5rem;
|
|
64
|
-
font-size: 0.75rem;
|
|
65
|
-
cursor: pointer;
|
|
66
|
-
border: none;
|
|
67
|
-
border-radius: 4px;
|
|
68
|
-
transition: all 0.2s;
|
|
69
|
-
background-color: ${appearance === `dark` ? `rgba(0, 0, 0, 0.5)` : `rgba(255, 255, 255, 0.8)`};
|
|
70
|
-
backdrop-filter: blur(4px);
|
|
71
|
-
color: ${appearance === `dark` ? `#fff` : `#000`};
|
|
72
|
-
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
pre.shiki[data-title] .code-block-copy {
|
|
76
|
-
top: -2rem;
|
|
77
|
-
right: 6rem;
|
|
78
|
-
background-color: transparent;
|
|
79
|
-
color: var(--gray-11);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.code-block-copy:hover {
|
|
83
|
-
background-color: var(--accent-9) !important;
|
|
84
|
-
color: white !important;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.code-block-copy[data-copied="true"] {
|
|
88
|
-
background-color: var(--green-9) !important;
|
|
89
|
-
color: white !important;
|
|
90
|
-
}
|
|
91
|
-
`
|
|
92
|
-
|
|
93
|
-
return () => {
|
|
94
|
-
if (styleElement && styleElement.parentNode) {
|
|
95
|
-
styleElement.parentNode.removeChild(styleElement)
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
}, [appearance])
|
|
99
|
-
|
|
100
|
-
useEffect(() => {
|
|
101
|
-
const enhanceCodeBlocks = () => {
|
|
102
|
-
const codeBlocks = document.querySelectorAll(`pre.shiki:not([data-enhanced])`)
|
|
103
|
-
|
|
104
|
-
codeBlocks.forEach((block) => {
|
|
105
|
-
const preElement = block as HTMLPreElement
|
|
106
|
-
preElement.setAttribute(`data-enhanced`, `true`)
|
|
107
|
-
|
|
108
|
-
// Get language from class name
|
|
109
|
-
const classes = preElement.className.split(` `)
|
|
110
|
-
const language = classes.find(c => c !== `shiki` && c !== `shiki-light` && c !== `shiki-dark`) || `text`
|
|
111
|
-
|
|
112
|
-
// Check for title in first line
|
|
113
|
-
const codeElement = preElement.querySelector(`code`)
|
|
114
|
-
if (!codeElement) return
|
|
115
|
-
|
|
116
|
-
const firstLine = codeElement.textContent?.split(`\n`)[0] || ``
|
|
117
|
-
let title = ``
|
|
118
|
-
|
|
119
|
-
const titleMatch = /^\/\/\s*title:\s*(.+)$/i.exec(firstLine)
|
|
120
|
-
if (titleMatch?.[1]) {
|
|
121
|
-
title = titleMatch[1]
|
|
122
|
-
// Remove title line from display
|
|
123
|
-
const firstLineElement = codeElement.querySelector(`span.line`) as HTMLElement | null
|
|
124
|
-
if (firstLineElement) {
|
|
125
|
-
firstLineElement.style.display = `none`
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
// Set data attributes for CSS
|
|
129
|
-
preElement.setAttribute(`data-title`, title)
|
|
130
|
-
preElement.setAttribute(`data-language`, language)
|
|
131
|
-
preElement.style.marginTop = `3rem`
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
// Create copy button
|
|
135
|
-
const copyButton = document.createElement(`button`)
|
|
136
|
-
copyButton.className = `code-block-copy`
|
|
137
|
-
copyButton.textContent = `Copy`
|
|
138
|
-
copyButton.setAttribute(`data-copied`, `false`)
|
|
139
|
-
|
|
140
|
-
copyButton.onclick = async (e) => {
|
|
141
|
-
e.preventDefault()
|
|
142
|
-
e.stopPropagation()
|
|
143
|
-
|
|
144
|
-
// Get clean code without the title line
|
|
145
|
-
const code = codeElement.textContent || ``
|
|
146
|
-
const cleanCode = title ? code.split(`\n`).slice(1).join(`\n`) : code
|
|
147
|
-
|
|
148
|
-
try {
|
|
149
|
-
await navigator.clipboard.writeText(cleanCode)
|
|
150
|
-
copyButton.textContent = `Copied!`
|
|
151
|
-
copyButton.setAttribute(`data-copied`, `true`)
|
|
152
|
-
setTimeout(() => {
|
|
153
|
-
copyButton.textContent = `Copy`
|
|
154
|
-
copyButton.setAttribute(`data-copied`, `false`)
|
|
155
|
-
}, 2000)
|
|
156
|
-
} catch (err) {
|
|
157
|
-
console.error(`Failed to copy:`, err)
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
// Append copy button directly to pre element
|
|
162
|
-
preElement.appendChild(copyButton)
|
|
163
|
-
})
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
// Small delay to ensure DOM is ready
|
|
167
|
-
const timeoutId = setTimeout(enhanceCodeBlocks, 100)
|
|
168
|
-
|
|
169
|
-
return () => {
|
|
170
|
-
clearTimeout(timeoutId)
|
|
171
|
-
// Clean up enhanced code blocks
|
|
172
|
-
document.querySelectorAll(`pre.shiki[data-enhanced]`).forEach(block => {
|
|
173
|
-
block.removeAttribute(`data-enhanced`)
|
|
174
|
-
block.removeAttribute(`data-title`)
|
|
175
|
-
block.removeAttribute(`data-language`)
|
|
176
|
-
const copyButton = block.querySelector(`.code-block-copy`)
|
|
177
|
-
if (copyButton) {
|
|
178
|
-
copyButton.remove()
|
|
179
|
-
}
|
|
180
|
-
// Restore hidden title lines
|
|
181
|
-
const firstLine = block.querySelector(`span.line`) as HTMLElement | null
|
|
182
|
-
if (firstLine && firstLine.style.display === `none`) {
|
|
183
|
-
firstLine.style.display = ``
|
|
184
|
-
} // Reset margin
|
|
185
|
-
|
|
186
|
-
;(block as HTMLElement).style.marginTop = ``
|
|
187
|
-
})
|
|
188
|
-
}
|
|
189
|
-
}, [location.pathname]) // Re-run when route changes
|
|
190
|
-
|
|
191
|
-
return null
|
|
192
|
-
}
|
|
@@ -1,218 +0,0 @@
|
|
|
1
|
-
/* Code Block Styles */
|
|
2
|
-
|
|
3
|
-
/* Base code block container */
|
|
4
|
-
.code-block {
|
|
5
|
-
position: relative;
|
|
6
|
-
margin: 1rem 0;
|
|
7
|
-
border-radius: 8px;
|
|
8
|
-
overflow: hidden;
|
|
9
|
-
font-size: 14px;
|
|
10
|
-
line-height: 1.6;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.code-block pre {
|
|
14
|
-
margin: 0;
|
|
15
|
-
padding: 1rem;
|
|
16
|
-
overflow-x: auto;
|
|
17
|
-
background: inherit;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.code-block code {
|
|
21
|
-
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
22
|
-
font-variant-ligatures: contextual;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
/* Shiki theme switching with CSS variables */
|
|
26
|
-
/* Default to light theme */
|
|
27
|
-
:root {
|
|
28
|
-
color-scheme: light;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
/* When dark mode is active */
|
|
32
|
-
.dark {
|
|
33
|
-
color-scheme: dark;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
/* Shiki token colors for light theme (github-light) */
|
|
37
|
-
:root {
|
|
38
|
-
--shiki-color-text: #24292e;
|
|
39
|
-
--shiki-color-background: #f6f8fa;
|
|
40
|
-
--shiki-token-constant: #005cc5;
|
|
41
|
-
--shiki-token-string: #032f62;
|
|
42
|
-
--shiki-token-comment: #6a737d;
|
|
43
|
-
--shiki-token-keyword: #d73a49;
|
|
44
|
-
--shiki-token-parameter: #e36209;
|
|
45
|
-
--shiki-token-function: #6f42c1;
|
|
46
|
-
--shiki-token-string-expression: #032f62;
|
|
47
|
-
--shiki-token-punctuation: #24292e;
|
|
48
|
-
--shiki-token-link: #032f62;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
/* Shiki token colors for dark theme (tokyo-night) */
|
|
52
|
-
.dark {
|
|
53
|
-
--shiki-color-text: #c0caf5;
|
|
54
|
-
--shiki-color-background: #1a1b26;
|
|
55
|
-
--shiki-token-constant: #ff9e64;
|
|
56
|
-
--shiki-token-string: #9ece6a;
|
|
57
|
-
--shiki-token-comment: #565f89;
|
|
58
|
-
--shiki-token-keyword: #bb9af7;
|
|
59
|
-
--shiki-token-parameter: #e0af68;
|
|
60
|
-
--shiki-token-function: #7aa2f7;
|
|
61
|
-
--shiki-token-string-expression: #9ece6a;
|
|
62
|
-
--shiki-token-punctuation: #c0caf5;
|
|
63
|
-
--shiki-token-link: #9ece6a;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
/* Shiki code blocks */
|
|
67
|
-
pre.shiki {
|
|
68
|
-
margin: 1rem 0;
|
|
69
|
-
padding: 1rem;
|
|
70
|
-
border-radius: 8px;
|
|
71
|
-
overflow-x: auto;
|
|
72
|
-
font-size: 14px;
|
|
73
|
-
line-height: 1.6;
|
|
74
|
-
background-color: var(--shiki-color-background);
|
|
75
|
-
color: var(--shiki-color-text);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
pre.shiki code {
|
|
79
|
-
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
80
|
-
font-variant-ligatures: contextual;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
/* Line numbers */
|
|
84
|
-
.code-block[data-line-numbers="true"] pre {
|
|
85
|
-
padding-left: 3.5rem;
|
|
86
|
-
position: relative;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.code-block[data-line-numbers="true"] .line {
|
|
90
|
-
position: relative;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.code-block[data-line-numbers="true"] .line::before {
|
|
94
|
-
content: attr(data-line);
|
|
95
|
-
position: absolute;
|
|
96
|
-
left: -3rem;
|
|
97
|
-
width: 2.5rem;
|
|
98
|
-
text-align: right;
|
|
99
|
-
color: var(--gray-a6);
|
|
100
|
-
user-select: none;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
/* Line highlighting */
|
|
104
|
-
.code-block .line[data-highlighted="true"] {
|
|
105
|
-
background-color: var(--amber-a3);
|
|
106
|
-
display: block;
|
|
107
|
-
margin: 0 -1rem;
|
|
108
|
-
padding: 0 1rem;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
/* Diff lines */
|
|
112
|
-
.code-block .line[data-diff="+"] {
|
|
113
|
-
background-color: var(--green-a3);
|
|
114
|
-
display: block;
|
|
115
|
-
margin: 0 -1rem;
|
|
116
|
-
padding: 0 1rem;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
.code-block .line[data-diff="-"] {
|
|
120
|
-
background-color: var(--red-a3);
|
|
121
|
-
display: block;
|
|
122
|
-
margin: 0 -1rem;
|
|
123
|
-
padding: 0 1rem;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
.code-block .line[data-diff="+"]::before {
|
|
127
|
-
content: "+ ";
|
|
128
|
-
color: var(--green-11);
|
|
129
|
-
font-weight: bold;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.code-block .line[data-diff="-"]::before {
|
|
133
|
-
content: "- ";
|
|
134
|
-
color: var(--red-11);
|
|
135
|
-
font-weight: bold;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
/* Focus lines */
|
|
139
|
-
.code-block .line:not([data-focus="true"]) {
|
|
140
|
-
opacity: 0.5;
|
|
141
|
-
filter: grayscale(100%);
|
|
142
|
-
transition: opacity 0.2s, filter 0.2s;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
.code-block:hover .line:not([data-focus="true"]) {
|
|
146
|
-
opacity: 0.8;
|
|
147
|
-
filter: grayscale(0%);
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
/* Copy button */
|
|
151
|
-
.code-block-copy {
|
|
152
|
-
position: absolute;
|
|
153
|
-
top: 0.5rem;
|
|
154
|
-
right: 0.5rem;
|
|
155
|
-
padding: 0.25rem 0.5rem;
|
|
156
|
-
border-radius: 4px;
|
|
157
|
-
background: var(--gray-a3);
|
|
158
|
-
color: var(--gray-12);
|
|
159
|
-
border: 1px solid var(--gray-a5);
|
|
160
|
-
cursor: pointer;
|
|
161
|
-
font-size: 12px;
|
|
162
|
-
transition: all 0.2s;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
.code-block-copy:hover {
|
|
166
|
-
background: var(--gray-a4);
|
|
167
|
-
border-color: var(--gray-a6);
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
.code-block-copy.copied {
|
|
171
|
-
background: var(--green-a3);
|
|
172
|
-
border-color: var(--green-a5);
|
|
173
|
-
color: var(--green-11);
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
/* Language badge */
|
|
177
|
-
.code-block-lang {
|
|
178
|
-
position: absolute;
|
|
179
|
-
top: 0;
|
|
180
|
-
right: 0;
|
|
181
|
-
padding: 0.25rem 0.75rem;
|
|
182
|
-
background: var(--gray-a3);
|
|
183
|
-
color: var(--gray-11);
|
|
184
|
-
font-size: 12px;
|
|
185
|
-
font-weight: 500;
|
|
186
|
-
border-bottom-left-radius: 4px;
|
|
187
|
-
user-select: none;
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
/* Scrollbar styling */
|
|
191
|
-
.code-block pre::-webkit-scrollbar {
|
|
192
|
-
height: 8px;
|
|
193
|
-
width: 8px;
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
.code-block pre::-webkit-scrollbar-track {
|
|
197
|
-
background: var(--gray-a3);
|
|
198
|
-
border-radius: 4px;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
.code-block pre::-webkit-scrollbar-thumb {
|
|
202
|
-
background: var(--gray-a6);
|
|
203
|
-
border-radius: 4px;
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
.code-block pre::-webkit-scrollbar-thumb:hover {
|
|
207
|
-
background: var(--gray-a7);
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
/* Inline code */
|
|
211
|
-
code:not(.code-block code) {
|
|
212
|
-
padding: 0.2em 0.4em;
|
|
213
|
-
margin: 0;
|
|
214
|
-
font-size: 0.85em;
|
|
215
|
-
background-color: var(--gray-a3);
|
|
216
|
-
border-radius: 4px;
|
|
217
|
-
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
218
|
-
}
|