Skip to content

Commit

Permalink
fix: fetch component code from github
Browse files Browse the repository at this point in the history
  • Loading branch information
@Pagebakers
Pagebakers committed Nov 5, 2023
1 parent cdbc711 commit 801c184
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 126 deletions.
2 changes: 1 addition & 1 deletion apps/website/src/components/blocks/component-canvas.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export function ComponentCanvas(props: UiComponent & { zIndex: number }) {

const [code, setCode] = useState(props.code)
const { get, response } = useFetch(
`/api/blocks/${props.attributes.category}/${props.slug}`
`/api/blocks/${props.attributes.category}/${props.slug}?version=${props.attributes.version}`
)

const fetchCode = async () => {
Expand Down
13 changes: 7 additions & 6 deletions apps/website/src/data/blocks/components.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,7 @@ function getComponentCode(componentFolder: string, componentName: string) {
.filter(
(item) =>
(item.endsWith('.tsx') && !item.endsWith('.stories.tsx')) ||
item.endsWith('.ts') ||
item.endsWith('.css')
item.endsWith('.ts')
)

const mainFileContent = removeReact(
Expand Down Expand Up @@ -108,11 +107,13 @@ export function getAllComponents(): ComponentInfo[] {

export function getComponent(
categoryName: string,
componentName: string,
rootFolder
componentName: string
): ComponentInfo | null {
const componentDirectory = path.join(rootFolder, categoryName, componentName)
console.log(componentDirectory)
const componentDirectory = path.join(
getRootFolder(),
categoryName,
componentName
)
const componentAttributes = path.join(componentDirectory, 'attributes.json')

if (fs.lstatSync(componentDirectory).isDirectory()) {
Expand Down
87 changes: 74 additions & 13 deletions apps/website/src/pages/api/blocks/[category]/[component].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,15 @@ import { createServerClient } from '@supabase/ssr'

import { getComponent } from '../../../../data/blocks/components'
import { NextApiRequest, NextApiResponse } from 'next'
import { pascalCase } from 'change-case'
import { z } from 'zod'

const isDev = process.env.NODE_ENV === 'development'

const schema = z.object({
category: z.string().regex(/^[a-z0-9-]+$/i),
component: z.string().regex(/^[a-z0-9-]+$/i),
})

export default async function handler(
req: NextApiRequest,
Expand All @@ -23,25 +32,77 @@ export default async function handler(

const { data, error } = await supabase.auth.getSession()

const { category, component } = req.query

const categoryName = category?.toString()
const componentName = component?.toString()
const { category, component } = schema.parse(req.query)

if (!categoryName || !componentName) {
return res.status(404).json({ error: 'Missing component name' })
let attributes
if (isDev) {
attributes = getComponent(category, component)
} else {
attributes = await getComponentFromRepo(category, component)
}

const attributes = getComponent(
categoryName,
componentName,
process.env.TEMPLATE_ROOT ||
'/var/task/apps/website/.next/server/templates/src/'
)

if ((!attributes?.attributes.public && !data.session) || error) {
return res.status(401).json({ error: 'Unauthorized' })
}

res.setHeader('Cache-Control', 'max-age=604800, stale-while-revalidate=86400')

res.status(200).json(attributes)
}

const getComponentFromRepo = async (
categoryName: string,
componentName: string
) => {
const token = Buffer.from(process.env.GITHUB_PERSONAL_TOKEN!).toString(
'base64'
)
const templateRoot = process.env.GITHUB_TEMPLATES_ROOT ?? '/'

const [codeResponse, attrResponse] = await Promise.all([
fetch(
`https://raw.githubusercontent.com/${templateRoot}/${categoryName}/${componentName}/${componentName}.tsx`,
{
headers: {
Authorization: `Basic ${token}`,
},

redirect: 'follow',
}
),
fetch(
`https://raw.githubusercontent.com/${templateRoot}/${categoryName}/${componentName}/attributes.json`,
{
headers: {
Authorization: `Basic ${token}`,
},
redirect: 'follow',
}
),
])

if (!codeResponse.ok) {
throw new Error('Component not found')
}

const code = await codeResponse.text()

let attributes = {}
try {
const attr = await attrResponse.text()
attributes = JSON.parse(attr)
} catch {}

return {
component: pascalCase(componentName),
slug: componentName,
code: [
{
fileName: `${componentName}.tsx`,
language: 'tsx',
code: code,
},
],
attributes,
}
}
118 changes: 12 additions & 106 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1520,16 +1520,7 @@ __metadata:
languageName: node
linkType: hard

"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.3, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
version: 7.22.5
resolution: "@babel/runtime@npm:7.22.5"
dependencies:
regenerator-runtime: ^0.13.11
checksum: 12a50b7de2531beef38840d17af50c55a094253697600cee255311222390c68eed704829308d4fd305e1b3dfbce113272e428e9d9d45b1730e0fede997eaceb1
languageName: node
linkType: hard

"@babel/runtime@npm:^7.23.2":
"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.3, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
version: 7.23.2
resolution: "@babel/runtime@npm:7.23.2"
dependencies:
Expand Down Expand Up @@ -10950,7 +10941,7 @@ __metadata:
languageName: node
linkType: hard

"aria-query@npm:5.1.3, aria-query@npm:^5.0.0":
"aria-query@npm:5.1.3":
version: 5.1.3
resolution: "aria-query@npm:5.1.3"
dependencies:
Expand All @@ -10959,7 +10950,7 @@ __metadata:
languageName: node
linkType: hard

"aria-query@npm:^5.3.0":
"aria-query@npm:^5.0.0, aria-query@npm:^5.3.0":
version: 5.3.0
resolution: "aria-query@npm:5.3.0"
dependencies:
Expand All @@ -10985,20 +10976,7 @@ __metadata:
languageName: node
linkType: hard

"array-includes@npm:^3.1.5, array-includes@npm:^3.1.6":
version: 3.1.6
resolution: "array-includes@npm:3.1.6"
dependencies:
call-bind: ^1.0.2
define-properties: ^1.1.4
es-abstract: ^1.20.4
get-intrinsic: ^1.1.3
is-string: ^1.0.7
checksum: f22f8cd8ba8a6448d91eebdc69f04e4e55085d09232b5216ee2d476dab3ef59984e8d1889e662c6a0ed939dcb1b57fd05b2c0209c3370942fc41b752c82a2ca5
languageName: node
linkType: hard

"array-includes@npm:^3.1.7":
"array-includes@npm:^3.1.6, array-includes@npm:^3.1.7":
version: 3.1.7
resolution: "array-includes@npm:3.1.7"
dependencies:
Expand Down Expand Up @@ -11050,19 +11028,7 @@ __metadata:
languageName: node
linkType: hard

"array.prototype.flatmap@npm:^1.3.1":
version: 1.3.1
resolution: "array.prototype.flatmap@npm:1.3.1"
dependencies:
call-bind: ^1.0.2
define-properties: ^1.1.4
es-abstract: ^1.20.4
es-shim-unscopables: ^1.0.0
checksum: 8c1c43a4995f12cf12523436da28515184c753807b3f0bc2ca6c075f71c470b099e2090cc67dba8e5280958fea401c1d0c59e1db0143272aef6cd1103921a987
languageName: node
linkType: hard

"array.prototype.flatmap@npm:^1.3.2":
"array.prototype.flatmap@npm:^1.3.1, array.prototype.flatmap@npm:^1.3.2":
version: 1.3.2
resolution: "array.prototype.flatmap@npm:1.3.2"
dependencies:
Expand Down Expand Up @@ -13559,17 +13525,7 @@ __metadata:
languageName: node
linkType: hard

"define-properties@npm:^1.1.3, define-properties@npm:^1.1.4, define-properties@npm:^1.2.0":
version: 1.2.0
resolution: "define-properties@npm:1.2.0"
dependencies:
has-property-descriptors: ^1.0.0
object-keys: ^1.1.1
checksum: e60aee6a19b102df4e2b1f301816804e81ab48bb91f00d0d935f269bf4b3f79c88b39e4f89eaa132890d23267335fd1140dfcd8d5ccd61031a0a2c41a54e33a6
languageName: node
linkType: hard

"define-properties@npm:^1.2.1":
"define-properties@npm:^1.1.3, define-properties@npm:^1.1.4, define-properties@npm:^1.2.0, define-properties@npm:^1.2.1":
version: 1.2.1
resolution: "define-properties@npm:1.2.1"
dependencies:
Expand Down Expand Up @@ -15831,14 +15787,7 @@ __metadata:
languageName: node
linkType: hard

"function-bind@npm:^1.1.1":
version: 1.1.1
resolution: "function-bind@npm:1.1.1"
checksum: b32fbaebb3f8ec4969f033073b43f5c8befbb58f1a79e12f1d7490358150359ebd92f49e72ff0144f65f2c48ea2a605bff2d07965f548f6474fd8efd95bf361a
languageName: node
linkType: hard

"function-bind@npm:^1.1.2":
"function-bind@npm:^1.1.1, function-bind@npm:^1.1.2":
version: 1.1.2
resolution: "function-bind@npm:1.1.2"
checksum: 2b0ff4ce708d99715ad14a6d1f894e2a83242e4a52ccfcefaee5e40050562e5f6dafc1adbb4ce2d4ab47279a45dc736ab91ea5042d843c3c092820dfe032efb1
Expand Down Expand Up @@ -18490,17 +18439,7 @@ __metadata:
languageName: node
linkType: hard

"jsx-ast-utils@npm:^2.4.1 || ^3.0.0":
version: 3.3.3
resolution: "jsx-ast-utils@npm:3.3.3"
dependencies:
array-includes: ^3.1.5
object.assign: ^4.1.3
checksum: a2ed78cac49a0f0c4be8b1eafe3c5257a1411341d8e7f1ac740debae003de04e5f6372bfcfbd9d082e954ffd99aac85bcda85b7c6bc11609992483f4cdc0f745
languageName: node
linkType: hard

"jsx-ast-utils@npm:^3.3.5":
"jsx-ast-utils@npm:^2.4.1 || ^3.0.0, jsx-ast-utils@npm:^3.3.5":
version: 3.3.5
resolution: "jsx-ast-utils@npm:3.3.5"
dependencies:
Expand Down Expand Up @@ -21047,7 +20986,7 @@ __metadata:
languageName: node
linkType: hard

"object.assign@npm:^4.1.3, object.assign@npm:^4.1.4":
"object.assign@npm:^4.1.4":
version: 4.1.4
resolution: "object.assign@npm:4.1.4"
dependencies:
Expand All @@ -21059,18 +20998,7 @@ __metadata:
languageName: node
linkType: hard

"object.entries@npm:^1.1.6":
version: 1.1.6
resolution: "object.entries@npm:1.1.6"
dependencies:
call-bind: ^1.0.2
define-properties: ^1.1.4
es-abstract: ^1.20.4
checksum: 0f8c47517e6a9a980241eafe3b73de11e59511883173c2b93d67424a008e47e11b77c80e431ad1d8a806f6108b225a1cab9223e53e555776c612a24297117d28
languageName: node
linkType: hard

"object.entries@npm:^1.1.7":
"object.entries@npm:^1.1.6, object.entries@npm:^1.1.7":
version: 1.1.7
resolution: "object.entries@npm:1.1.7"
dependencies:
Expand All @@ -21081,18 +21009,7 @@ __metadata:
languageName: node
linkType: hard

"object.fromentries@npm:^2.0.6":
version: 2.0.6
resolution: "object.fromentries@npm:2.0.6"
dependencies:
call-bind: ^1.0.2
define-properties: ^1.1.4
es-abstract: ^1.20.4
checksum: 453c6d694180c0c30df451b60eaf27a5b9bca3fb43c37908fd2b78af895803dc631242bcf05582173afa40d8d0e9c96e16e8874b39471aa53f3ac1f98a085d85
languageName: node
linkType: hard

"object.fromentries@npm:^2.0.7":
"object.fromentries@npm:^2.0.6, object.fromentries@npm:^2.0.7":
version: 2.0.7
resolution: "object.fromentries@npm:2.0.7"
dependencies:
Expand Down Expand Up @@ -21998,7 +21915,7 @@ __metadata:
languageName: node
linkType: hard

"postcss@npm:8.4.31":
"postcss@npm:8.4.31, postcss@npm:^8.4.19, postcss@npm:^8.4.27":
version: 8.4.31
resolution: "postcss@npm:8.4.31"
dependencies:
Expand All @@ -22009,17 +21926,6 @@ __metadata:
languageName: node
linkType: hard

"postcss@npm:^8.4.19, postcss@npm:^8.4.27":
version: 8.4.29
resolution: "postcss@npm:8.4.29"
dependencies:
nanoid: ^3.3.6
picocolors: ^1.0.0
source-map-js: ^1.0.2
checksum: dd6daa25e781db9ae5b651d9b7bfde0ec6e60e86a37da69a18eb4773d5ddd51e28fc4ff054fbdc04636a31462e6bf09a1e50986f69ac52b10d46b7457cd36d12
languageName: node
linkType: hard

"prebuild-install@npm:^7.1.1":
version: 7.1.1
resolution: "prebuild-install@npm:7.1.1"
Expand Down

0 comments on commit 801c184

Please sign in to comment.