Skip to content

Commit

Permalink
πŸ’„ ν…Œλ§ˆ μˆ˜μ •
Browse files Browse the repository at this point in the history
  • Loading branch information
@padosum
padosum committed Dec 12, 2022
1 parent 559e9b2 commit 1c77e24
Show file tree
Hide file tree
Showing 23 changed files with 1,010 additions and 669 deletions.
124 changes: 63 additions & 61 deletions .layouts/src/gatsby-theme-primer-wiki/components/anchor-tag.js
View file
@@ -1,13 +1,13 @@
import React from 'react'
import { Link as GatsbyLink } from 'gatsby'
import Tippy from '@tippyjs/react'
import { MDXProvider } from '@mdx-js/react'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import { Link, Box, Heading, Button, Text } from '@primer/components'
import isRelativeUrl from 'is-relative-url'
import { ZapIcon } from '@primer/octicons-react'
import { useTheme } from '@primer/components'
import { encodeSlug } from 'gatsby-theme-primer-wiki/src/utils/encode'
import React from "react";
import { Link as GatsbyLink } from "gatsby";
import Tippy from "@tippyjs/react";
import { MDXProvider } from "@mdx-js/react";
import { MDXRenderer } from "gatsby-plugin-mdx";
import { Link, Box, Heading, Button, Text } from "@primer/components";
import isRelativeUrl from "is-relative-url";
import { ZapIcon } from "@primer/octicons-react";
import { useTheme } from "@primer/components";
import { encodeSlug } from "gatsby-theme-primer-wiki/src/utils/encode";

const AnchorTag = ({
title,
Expand All @@ -17,50 +17,52 @@ const AnchorTag = ({
withoutPopup,
...restProps
}) => {
const theme = useTheme()
const colorMode = theme.resolvedColorMode
const theme = useTheme();
const colorMode = theme.resolvedColorMode;
const ref = references.find(
x => x.fields.slug === href || encodeSlug(x.fields.slug) === href
)
);

let instance = null
let instance = null;
const onCreate = theInstance => {
instance = theInstance
}
let popupContent
let child
instance = theInstance;
};
let popupContent;
let child;
const show = () => {
if (instance) {
instance.show()
instance.show();
}
}
};

if (ref) {
const nestedComponents = {
a(props) {
return <AnchorTag {...props} references={references} withoutPopup />
return <AnchorTag {...props} references={references} withoutPopup />;
},
}
const fields = ref.fields || {}
const frontmatter = ref.frontmatter || {}
};
const fields = ref.fields || {};
const frontmatter = ref.frontmatter || {};
const dateLog = /^\/wiki\/\d{4}\/\d{2}\/\d{4}-\d{2}\//.test(
restProps.postSlug
)
);
const shouldShowTitle =
fields.shouldShowTitle !== undefined ? fields.shouldShowTitle : false
const documentTitle = fields.title
fields.shouldShowTitle !== undefined ? fields.shouldShowTitle : false;
const documentTitle = fields.title;
popupContent = (
<Box
width={['100%', '400px']}
width={["100%", "400px"]}
maxHeight="300px"
minHeight="100px"
overflowY="scroll"
px="2"
py="1"
bg="bg.primary"
color="text.primary"
>
{shouldShowTitle && documentTitle && (
<Box mb={4}>
<Box display="flex" sx={{ alignItems: 'center' }}>
<Box display="flex" sx={{ alignItems: "center" }}>
<Heading as="h1" mr={2}>
{documentTitle}
</Heading>
Expand All @@ -75,43 +77,43 @@ const AnchorTag = ({
</MDXProvider>
)}
</Box>
)
);
child = (
<Text
data-test="ref-tag"
sx={{
':before': {
":before": {
content: "'['",
color: 'text.disabled',
mr: '1px',
opacity: '0.5',
color: "text.disabled",
mr: "1px",
opacity: "0.5",
},
':after': {
":after": {
content: "']'",
color: 'text.disabled',
opacity: '0.5',
ml: '1px',
color: "text.disabled",
opacity: "0.5",
ml: "1px",
},
':hover': {
textDecoration: 'none',
":hover": {
textDecoration: "none",
},
}}
{...restProps}
>
<Text
sx={{
':before': {
mr: '2px',
":before": {
mr: "2px",
content: "'['",
color: 'text.disabled',
opacity: '0.5',
color: "text.disabled",
opacity: "0.5",
},
}}
></Text>
<Link
sx={{
':hover': {
textDecoration: 'none',
":hover": {
textDecoration: "none",
},
}}
as={GatsbyLink}
Expand All @@ -125,7 +127,7 @@ const AnchorTag = ({
</Link>

<Button
display={['inline-block', 'inline-block', 'inline-block', 'none']}
display={["inline-block", "inline-block", "inline-block", "none"]}
bg="transparent"
px="1"
py="0"
Expand All @@ -138,20 +140,20 @@ const AnchorTag = ({
</Button>
<Text
sx={{
':after': {
ml: '2px',
":after": {
ml: "2px",
content: "']'",
color: 'text.disabled',
opacity: '0.5',
color: "text.disabled",
opacity: "0.5",
},
}}
></Text>
</Text>
)
);
} else {
// eslint-disable-next-line jsx-a11y/anchor-has-content
const externalLink =
!isRelativeUrl(href) || (restProps && restProps.target === '_blank')
!isRelativeUrl(href) || (restProps && restProps.target === "_blank");

child = externalLink ? (
<Link
Expand All @@ -168,17 +170,17 @@ const AnchorTag = ({
<Link {...restProps} as={GatsbyLink} to={href} title={title}>
{restProps.children}
</Link>
)
return child
);
return child;
}

if (withoutPopup) {
return child
return child;
}

return (
<Tippy
theme={colorMode === 'night' ? 'dark' : 'light'}
theme={colorMode === "night" ? "dark" : "light"}
delay={100}
interactiveDebounce={0}
interactive={true}
Expand All @@ -187,11 +189,11 @@ const AnchorTag = ({
maxWidth="none"
arrow={false}
placement="bottom"
touch={['hold', 5000]}
touch={["hold", 5000]}
onCreate={onCreate}
>
{child}
</Tippy>
)
}
export default AnchorTag
);
};
export default AnchorTag;
41 changes: 41 additions & 0 deletions .layouts/src/gatsby-theme-primer-wiki/components/clipboard-copy.js
View file
@@ -0,0 +1,41 @@
import { Button, StyledOcticon } from "@primer/components";
import { CheckIcon, CopyIcon } from "@primer/octicons-react";
import copy from "copy-to-clipboard";
import React from "react";

function ClipboardCopy({ value }) {
const [copied, setCopied] = React.useState(false);

React.useEffect(() => {
const timeout = setTimeout(() => {
if (copied) setCopied(false);
}, 1000);

return () => clearTimeout(timeout);
}, [copied]);

return (
<Button
px={2}
aria-label="Copy to clipboard"
onClick={() => {
copy(value);
setCopied(true);
}}
backgroundColor="bg.primary"
sx={{
":hover": {
backgroundColor: "bg.alt",
},
}}
>
{copied ? (
<StyledOcticon icon={CheckIcon} color="text.link" />
) : (
<StyledOcticon icon={CopyIcon} color="text.placeholder" />
)}
</Button>
);
}

export default ClipboardCopy;
42 changes: 21 additions & 21 deletions .layouts/src/gatsby-theme-primer-wiki/components/code.js
View file
@@ -1,21 +1,21 @@
import { Box, Text } from '@primer/components'
import Highlight, { defaultProps } from 'prism-react-renderer'
import Prism from 'gatsby-theme-primer-wiki/src/prism'
import githubTheme from 'gatsby-theme-primer-wiki/src/github'
import vsDarkTheme from 'gatsby-theme-primer-wiki/src/vs-dark'
import React from 'react'
import ClipboardCopy from 'gatsby-theme-primer-wiki/src/components/clipboard-copy'
import LiveCode from 'gatsby-theme-primer-wiki/src/components/live-code'
import { useTheme } from '@primer/components'
import { Box, Text } from "@primer/components";
import Highlight, { defaultProps } from "prism-react-renderer";
import Prism from "gatsby-theme-primer-wiki/src/prism";
import duotoneEarthTheme from "../duotone-earth";
import vsDarkTheme from "gatsby-theme-primer-wiki/src/vs-dark";
import React from "react";
import ClipboardCopy from "./clipboard-copy";
import LiveCode from "gatsby-theme-primer-wiki/src/components/live-code";
import { useTheme } from "@primer/components";

function Code({ className, children, live, noinline }) {
const language = className ? className.replace(/language-/, '') : ''
const code = children.trim()
const theme = useTheme()
const colorMode = theme.resolvedColorMode
const language = className ? className.replace(/language-/, "") : "";
const code = children.trim();
const theme = useTheme();
const colorMode = theme.resolvedColorMode;

if (live) {
return <LiveCode code={code} language={language} noinline={noinline} />
return <LiveCode code={code} language={language} noinline={noinline} />;
}

return (
Expand All @@ -24,9 +24,9 @@ function Code({ className, children, live, noinline }) {
sx={{
// Make <pre> adjust to the width of the container
// https://stackoverflow.com/a/14406386
display: 'table',
tableLayout: 'fixed',
width: '100%',
display: "table",
tableLayout: "fixed",
width: "100%",
}}
>
<Box position="absolute" top={0} right={0} p={2}>
Expand All @@ -37,7 +37,7 @@ function Code({ className, children, live, noinline }) {
Prism={Prism}
code={code}
language={language}
theme={colorMode === 'night' ? vsDarkTheme : githubTheme}
theme={colorMode === "night" ? vsDarkTheme : duotoneEarthTheme}
>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<Box
Expand All @@ -47,7 +47,7 @@ function Code({ className, children, live, noinline }) {
mb={3}
p={3}
border={0}
style={{ ...style, overflow: 'auto' }}
style={{ ...style, overflow: "auto" }}
sx={{
borderRadius: 2,
}}
Expand All @@ -68,7 +68,7 @@ function Code({ className, children, live, noinline }) {
)}
</Highlight>
</Box>
)
);
}

export default Code
export default Code;
19 changes: 14 additions & 5 deletions .layouts/src/gatsby-theme-primer-wiki/components/dark-button.js
View file
@@ -1,10 +1,19 @@
import { ButtonOutline, themeGet } from '@primer/components'
import styled from 'styled-components'
import { ButtonOutline, themeGet } from "@primer/components";
import styled from "styled-components";

const DarkButton = styled(ButtonOutline)`
color: ${themeGet('colors.header.text')};
color: ${themeGet("colors.header.text")};
background-color: transparent;
box-shadow: none;
`
&:hover {
background-color: hsl(31, 45%, 20%);
}
&:hover > div {
color: #fff;
}
&:hover svg {
fill: #fff;
}
`;

export default DarkButton
export default DarkButton;

0 comments on commit 1c77e24

Please sign in to comment.