Skip to content

Commit 6171772

Browse files
author
Matt Rothenberg
committed
feat: use tailwind CDN
1 parent e33a65a commit 6171772

File tree

6 files changed

+47
-59
lines changed

6 files changed

+47
-59
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>GitHub Blocks: Custom Blocks</title>
8-
<script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
8+
<script src="https://cdn.tailwindcss.com"></script>
99
<link
1010
href="https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"
1111
rel="stylesheet"

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@
192192
"@excalidraw/excalidraw": "^0.10.0",
193193
"@fullstackio/cq": "^6.0.9",
194194
"@fullstackio/remark-cq": "^6.1.2",
195-
"@githubnext/utils": "^0.15.0",
195+
"@githubnext/utils": "^0.15.1",
196196
"@githubocto/flat-ui": "^0.13.4",
197197
"@loadable/component": "^5.15.0",
198198
"@octokit/rest": "^18.12.0",

‎src/blocks/file-blocks/css.tsx‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,6 @@ import { FileBlockProps } from "@githubnext/utils";
66
export default function (props: FileBlockProps) {
77
const { content } = props;
88

9-
useEffect(() => {
10-
if (typeof document === "undefined") return;
11-
12-
const script = document.createElement("script");
13-
14-
script.src = "https://cdn-tailwindcss.vercel.app";
15-
script.async = true;
16-
17-
document.body.appendChild(script);
18-
19-
return () => {
20-
document.body.removeChild(script);
21-
};
22-
}, []);
23-
249
const { tree, flattenedRules, widelyApplicableAttributes } = useMemo(() => {
2510
const tree = toJSON(content);
2611
// const rules = getRulesFromTreeItem(tree)

‎src/blocks/file-blocks/live-markdown/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ const indexHtml = `
1414
</head>
1515
<body>
1616
<!-- this won't load if added to the head -->
17-
<script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
1817
<link href="https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" />
1918
<div id="root"></div>
2019
</body>
@@ -39,6 +38,7 @@ export default (props: FileBlockProps) => {
3938
}}
4039
>
4140
<SandpackProvider
41+
externalResources={["https://cdn.tailwindcss.com"]}
4242
template="react"
4343
customSetup={{
4444
dependencies: {

‎src/components/production-block.tsx‎

Lines changed: 40 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import { SandpackProvider, SandpackPreview } from "@codesandbox/sandpack-react";
22
import { useEffect, useRef, useState } from "react";
33
// @ts-ignore
4-
import { FileContext, FolderContext, RepoFiles, bundleCodesandboxFiles } from "@githubnext/utils";
4+
import {
5+
FileContext,
6+
FolderContext,
7+
RepoFiles,
8+
bundleCodesandboxFiles,
9+
} from "@githubnext/utils";
510
import uniqueId from "lodash.uniqueid";
611

712
type Block = {
@@ -11,79 +16,77 @@ type Block = {
1116
description: string;
1217
entry: string;
1318
extensions?: string[];
14-
}
19+
};
1520
interface ProductionBlockProps {
1621
block: Block;
1722
contents?: string;
1823
tree?: RepoFiles;
1924
metadata?: any;
20-
context: FileContext | FolderContext
25+
context: FileContext | FolderContext;
2126
}
2227
interface BundleCode {
2328
name: string;
2429
content: string;
2530
}
2631
export const ProductionBlock = (props: ProductionBlockProps) => {
27-
const {
28-
block,
29-
contents,
30-
tree,
31-
metadata = {},
32-
context,
33-
} = props;
32+
const { block, contents, tree, metadata = {}, context } = props;
3433

3534
const [bundleCode, setBundleCode] = useState<BundleCode[]>([]);
3635
const sandpackWrapper = useRef<HTMLDivElement>(null);
3736
const id = useRef(uniqueId("sandboxed-block-"));
3837

3938
const getContents = async () => {
40-
const allContent = await import.meta.glob(
41-
`./../../dist/**`
42-
)
43-
const relevantPaths = Object.keys(allContent).filter((d: string) => (
39+
const allContent = await import.meta.glob(`./../../dist/**`);
40+
const relevantPaths = Object.keys(allContent).filter((d: string) =>
4441
d.startsWith(`./../../dist/${block.id}`)
45-
))
46-
let relevantContent = []
42+
);
43+
let relevantContent = [];
4744
for (const path of relevantPaths) {
48-
const importType = path.endsWith(".css") ? "inline" : "raw"
45+
const importType = path.endsWith(".css") ? "inline" : "raw";
4946
const content = await import(
5047
/* @vite-ignore */ `${path}?${importType}`
51-
).then((d) => d.default)
48+
).then((d) => d.default);
5249
relevantContent.push({
5350
name: path.slice(13),
5451
content,
55-
})
52+
});
5653
}
57-
setBundleCode(relevantContent)
58-
}
59-
useEffect(() => { getContents() }, [block.entry])
54+
setBundleCode(relevantContent);
55+
};
56+
useEffect(() => {
57+
getContents();
58+
}, [block.entry]);
6059

6160
if (!bundleCode.length) {
62-
return (
63-
<div>
64-
No bundle found
65-
</div>
66-
)
61+
return <div>No bundle found</div>;
6762
}
6863

6964
const files = bundleCodesandboxFiles({
70-
block, bundleCode, context,
65+
block,
66+
bundleCode,
67+
context,
7168
id: id.current,
72-
contents, tree, metadata,
69+
contents,
70+
tree,
71+
metadata,
7372
});
7473

75-
if (!bundleCode) return null
74+
if (!bundleCode) return null;
7675

7776
return (
78-
<div ref={sandpackWrapper} style={{
79-
width: "100%",
80-
height: "100%",
81-
}}>
77+
<div
78+
ref={sandpackWrapper}
79+
style={{
80+
width: "100%",
81+
height: "100%",
82+
}}
83+
>
8284
<SandpackProvider
85+
externalResources={["https://cdn.tailwindcss.com"]}
8386
template="react"
8487
customSetup={{
8588
dependencies: {},
86-
files: files
89+
files: files,
8790
}}
8891
autorun
8992
>
@@ -93,5 +96,5 @@ export const ProductionBlock = (props: ProductionBlockProps) => {
9396
/>
9497
</SandpackProvider>
9598
</div>
96-
)
97-
}
99+
);
100+
};

‎yarn.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -633,10 +633,10 @@
633633
unist-util-visit "^1.0.0"
634634
uuid "^3.3.2"
635635

636-
"@githubnext/utils@^0.15.0":
637-
version "0.15.0"
638-
resolved "https://registry.yarnpkg.com/@githubnext/utils/-/utils-0.15.0.tgz#a6ca88829908b95c404c32a60fbdb78e4daa0dc1"
639-
integrity sha512-hf2cSAQY/iijwSvAoq992nx/wgVV40LlR6z2XkXMJuy8AlD0tsThsnL+B3ObbZS6FYkExSv1b4/N+4YZrQRmmA==
636+
"@githubnext/utils@^0.15.1":
637+
version "0.15.1"
638+
resolved "https://registry.yarnpkg.com/@githubnext/utils/-/utils-0.15.1.tgz#2c7fd21bebb24ea3203ee632012b3c57db9d07c2"
639+
integrity sha512-7Et5MK+YBmGWAVfJcDKm0z80vFzHEpu8LdV4c6bDC1DP4PQ4XHdn/s3+AnBBV/Zme3DIFrgwNwd+0kD7QGa/og==
640640
dependencies:
641641
"@types/lodash.uniqueid" "^4.0.6"
642642
git-url-parse "^11.6.0"

0 commit comments

Comments
 (0)