Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Misc fixes #36

Merged
merged 10 commits into from
Dec 12, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 16 additions & 25 deletions components/MiniGraphiQL.jsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { createGraphiQLFetcher } from '@graphiql/toolkit';
import { useTheme } from 'next-themes';
import PropTypes from 'prop-types';
import React, { useEffect, useState } from 'react';
Expand Down Expand Up @@ -42,33 +43,23 @@ const MiniGraphiQLClient = ({ initialQuery, initialVariables, endpoint, readOnly
}
}, [theme]);

const fetcher = async (graphQLParams) => {
try {
const response = await fetch(endpoint, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(graphQLParams),
// Create a fetcher that only uses GET requests
const fetcher = createGraphiQLFetcher({
url: endpoint,
fetch: async (url, options) => {
// Construct query parameters
const params = new URLSearchParams({
query: options.body.query,
variables: JSON.stringify(options.body.variables),
});

if (!response.ok) {
throw new Error(`Network response was not ok: ${response.statusText}`);
}

return await response.json();
} catch (error) {
console.error('Error fetching data:', error);
throw error; // Re-throw to make sure GraphiQL displays the error
}
};

let parsedVariables = initialVariables;
if (typeof initialVariables === 'string') {
try {
parsedVariables = JSON.parse(initialVariables);
} catch (e) {
console.error('Failed to parse variables as JSON:', e);
// Make the GET request
return fetch(`${url}?${params.toString()}`, {
method: 'GET',
headers: { 'Accept': 'application/json' }
});
}
}
});

const graphiqlStyles = `
.graphiql-container {
Expand Down Expand Up @@ -125,7 +116,7 @@ const MiniGraphiQLClient = ({ initialQuery, initialVariables, endpoint, readOnly
fetcher={fetcher}
shouldPersistHeaders={false}
query={initialQuery}
variables={parsedVariables}
variables={initialVariables}
readOnly={readOnly}
/>
) : (
Expand Down
2 changes: 1 addition & 1 deletion components/ui/tabs.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const TabsList = React.forwardRef(({ className, ...props }, ref) => (
<TabsPrimitive.List
ref={ref}
className={cn(
'inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
'inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground mb-4',
className,
)}
{...props}
Expand Down
68 changes: 68 additions & 0 deletions lib/highlightCode.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import clsx from 'clsx';
import { useTheme } from 'next-themes';
import Highlight, { defaultProps } from 'prism-react-renderer';
import Prism from 'prism-react-renderer/prism';
import darkTheme from 'prism-react-renderer/themes/nightOwl';
import lightTheme from 'prism-react-renderer/themes/nightOwlLight';

(typeof global !== "undefined" ? global : window).Prism = Prism;
require('prismjs/components/prism-php');

export const HighlightCode = (code, language, highlightLines = []) => {
const { theme, systemTheme, resolvedTheme } = useTheme();

const getTheme = () => {
if (!resolvedTheme) return darkTheme; // Default or loading theme
return theme === 'dark' || (theme === 'system' && systemTheme === 'dark') ? darkTheme : lightTheme;
};

// Based on the primary color for the ACF site #00e4bc.
const highlightedLineStyle = {
backgroundColor: theme === 'dark'
? 'rgba(0, 228, 188, 0.2)' // dark
: 'rgba(0, 228, 188, 0.1)', // light
boxShadow: theme === 'dark'
? '-10px 0 0 rgba(0, 228, 188, 0.4), 10px 0 0 rgba(0, 228, 188, 0.2)' // dark
: '-10px 0 0 rgba(0, 228, 188, 0.2), 10px 0 0 rgba(0, 228, 188, 0.1)', // light
display: 'block',
};

const lineContentStyle = {
display: 'inline-block',
width: '100%',
paddingLeft: '10px',
};

return (
<Highlight {...defaultProps} code={code} language={language} theme={getTheme()}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div className={clsx(className, 'code-highlight', 'not-prose')} style={{ display: 'flex' }}>
<pre className="flex-1 overflow-x-auto p-2 text-sm" style={style}>
<code>
{tokens.map((line, i) => {
const lineNumber = i + 1;
const isHighlighted = highlightLines.includes(lineNumber);
const lineProps = getLineProps({ line, key: i });

return (
<div
key={i}
{...lineProps}
style={isHighlighted ? {...lineProps.style, ...highlightedLineStyle} : lineProps.style}
className={clsx({ 'highlighted-line': isHighlighted })}
>
<span className="line-content" style={lineContentStyle}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</span>
</div>
);
})}
</code>
</pre>
</div>
)}
</Highlight>
);
};
14 changes: 14 additions & 0 deletions lib/stringToHash.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import crypto from 'crypto';

export function stringToHash(inputString, length = 8) {
// Create a SHA-256 hash of the input string
const hash = crypto.createHash('sha256').update(inputString).digest('hex');

// Convert the hash (hex) to a BigInt (integer)
const hashBigInt = BigInt('0x' + hash);

// Convert the BigInt to a string and return the first 'length' characters
// Ensure that the length does not exceed the length of the number
const numberString = hashBigInt.toString();
return numberString.substring(0, Math.min(length, numberString.length));
}
20 changes: 2 additions & 18 deletions next.config.mjs
Original file line number Diff line number Diff line change
@@ -1,23 +1,7 @@
import { withFaust, getWpHostname } from '@faustwp/core';
import nextMDX from '@next/mdx';
import withMarkdoc from '@markdoc/next.js'
import withSearch from './markdoc/search.mjs'
import rehypePrettyCode from 'rehype-pretty-code';

/** @type {import('rehype-pretty-code').Options} */
const options = {
theme: 'one-dark-pro',
};

const withMDX = nextMDX({
extension: /\.mdx?$/,
options: {
remarkPlugins: [],
rehypePlugins: [[rehypePrettyCode, options]],
},
});

/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
Expand All @@ -26,8 +10,8 @@ const nextConfig = {
},
trailingSlash: true,
images: {
domains: ['bpacfwpgraphql.wpengine.com'],
domains: [getWpHostname()],
},
};

export default withFaust( withMDX( withSearch( withMarkdoc({ schemaPath: './src/markdoc' })(nextConfig) ) ) );
export default withFaust( withSearch( withMarkdoc({ schemaPath: './src/markdoc' })(nextConfig) ) );
Loading