@prisma/client#ghSites TypeScript Examples
The following examples show how to use
@prisma/client#ghSites.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: GitHubSiteCard.tsx From pagely with MIT License | 6 votes |
|
SiteCard: React.FC<{ siteData: ghSites }> = ({ siteData }) => {
const { siteName, id, repoUrl } = siteData;
return (
<div className='max-w-[400px] mx-auto'>
<Link href={`/github-site/${id}`}>
<a>
<div className='mb-8 transition-all duration-500 border border-gray-300 rounded hover:shadow-xl'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={`https://opengraph.githubassets.com/pagely/${
gh(repoUrl).repository
}`}
alt={siteName}
className='object-scale-down w-full h-32 mx-auto rounded-t'
/>
<div className='px-3 pt-4 pb-5'>
<h2 className='text-2xl font-bold'>{siteName}</h2>
</div>
</div>
</a>
</Link>
</div>
);
}
Example #2
| Source File: index.tsx From pagely with MIT License | 5 votes |
|
Page = () => {
const router = useRouter();
const { data } = useClerkSWR<ghSites>(
`/api/getSiteData/github/?siteId=${router.query.siteId}`
);
return (
<div>
<GitHubSiteLayout activeTab='setup'>
<h1 className='text-4xl font-extrabold capitalize'>
{data?.siteName || 'Just a second...'}
</h1>
<div className='flex flex-wrap mt-8'>
<a href={data?.repoUrl} target='_blank' rel='noopener noreferrer'>
<div className='inline-block px-3 py-4 my-2 mr-3 transition-all bg-yellow-100 border rounded-md hover:shadow hover:border-yellow-500'>
<SiGithub className='relative inline-block mx-2 bottom-[2px]' />
Open in GitHub
</div>
</a>
<a
href={
'https://developers.google.com/speed/pagespeed/insights/?url=https://' +
data?.subdomain +
'.pagely.site'
}
target='_blank'
rel='noopener noreferrer'>
<div className='inline-block px-3 py-4 my-2 mr-3 transition-all bg-blue-100 border rounded-md hover:shadow hover:border-blue-500'>
<SiLighthouse className='relative inline-block mx-2 bottom-[2px]' />
Open Lighthouse score
</div>
</a>
<a
href={'https://' + data?.subdomain + '.pagely.site'}
target='_blank'
rel='noopener noreferrer'>
<div className='inline-block px-3 py-4 my-2 mr-3 transition-all bg-green-100 border rounded-md hover:shadow hover:border-green-500'>
<VscGlobe className='relative inline-block mx-2 bottom-[2px]' />
Open website
</div>
</a>
</div>
</GitHubSiteLayout>
</div>
);
}
Example #3
| Source File: GitHubSiteLayout.tsx From pagely with MIT License | 4 votes |
|
SidebarLayout: React.FC<{
activeTab: 'code' | 'setup' | 'settings';
title?: string;
}> = ({ activeTab, title, ...props }) => {
const { emailAddresses, profileImageUrl, fullName, firstName } = useUser();
const { signOut } = useClerk();
const router = useRouter();
const { data } = useClerkSWR<ghSites>(
`/api/getSiteData/github/?siteId=${router.query.siteId}`
);
return (
<div>
<div className='block lg:hidden'>
<DashboardNav />
<Head>
<title>
{title ||
data?.siteName +
' - ' +
activeTab.charAt(0).toUpperCase() +
activeTab.slice(1) +
' | ' +
'Pagely'}
</title>
</Head>
</div>
<div className='lg:flex'>
{/* <div className='sticky top-0 overflow-y-hidden'> */}
<div
style={{ position: 'sticky' }}
className='absolute top-0 h-screen left-0 px-10 py-5 bg-gray-50 w-[20vw] border-r hidden flex-col justify-between lg:flex'>
<div>
<Link href='/dashboard'>
<a>
<small className='text-gray-700 hover:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-700'>
{' '}
{'<'}- Go back
</small>
</a>
</Link>
<ul className='mt-10'>
<li
className={`my-2 rounded ${
activeTab === 'setup' ? ' bg-gray-200' : ' hover:bg-gray-300'
}`}>
<Link href={`/github-site/${data?.id}`}>
<a className='block px-3 py-2 my-2 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-700'>
{' '}
<GoInbox className='relative inline-block bottom-[2px]' />{' '}
Setup
</a>
</Link>
</li>
<li
className={`my-2 rounded ${
activeTab === 'code' ? ' bg-gray-200' : ' hover:bg-gray-300'
}`}>
<Link href={`/github-site/${data?.id}/code`}>
<a className='block px-3 py-2 my-2 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-700'>
{' '}
<BiCode className='relative inline-block bottom-[2px]' />{' '}
Code injection
</a>
</Link>
</li>
<li
className={`my-2 rounded ${
activeTab === 'settings'
? ' bg-gray-200'
: ' hover:bg-gray-300'
}`}>
<Link href={`/github-site/${data?.id}/settings`}>
<a className='block px-3 py-2 my-2 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-700'>
{' '}
<FiSettings className='relative inline-block bottom-[2px]' />{' '}
Settings
</a>
</Link>
</li>
</ul>
</div>
<ProfileDropdown
emailAddresses={emailAddresses}
profileImageUrl={profileImageUrl}
fullName={fullName}
firstName={firstName}
signOut={signOut}
/>
</div>
<div className='mx-10 mt-20'>{props.children}</div>
</div>
<Toaster />
</div>
);
}
Example #4
| Source File: dashboard.tsx From pagely with MIT License | 4 votes |
|
Dashboard = () => {
const { data: notionSites, error } = useClerkSWR<notionSites[]>(
'/api/getAllSites/notion'
);
const { data: githubSites, error: errorFetchingGithubSites } = useClerkSWR<
ghSites[]
>('/api/getAllSites/github');
const { data: showcaseWebsites } = useClerkSWR<ShowcaseWebsites[]>(
'/api/getShowcaseWebsites'
);
return (
<MainLayout>
<div>
<div className='max-w-5xl mx-auto'>
<h1 className='text-4xl font-bold text-center lg:text-left md:relative lg:left-14'>
Your websites
</h1>
<div className='flex'>
<div
className='flex-1 mr-2 mt-10 h-[70vh] overflow-y-scroll pb-5'
id='websites'>
<div>
<h3 className='mb-5 text-lg font-medium lg:text-left md:relative lg:left-14'>
Notion websites
</h3>
{notionSites?.map((site) => (
// @ts-ignore
<SiteCard key={site.id} siteData={site} />
))}
{error && (
<h1>
Your Notion sites could not be fetched. Please reload and
try again
</h1>
)}
{!error && !notionSites && (
<Skeleton
width='384px'
height='200px'
count={3}
className='!block mb-8 mx-auto'
/>
)}
</div>
<hr className='w-[80%] my-5 text-gray-300 mx-auto' />
<div className='mb-5'>
<h3 className='mb-5 text-lg font-medium lg:text-left md:relative lg:left-14'>
GitHub websites
</h3>
{githubSites?.map((site) => (
// @ts-ignore
<GitHubSiteCard key={site.id} siteData={site} />
// <p key={site.id}>{JSON.stringify(site, null, 2)}</p>
))}
{errorFetchingGithubSites && (
<h1>
Your GitHub sites could not be fetched. Please reload and
try again
</h1>
)}
{!errorFetchingGithubSites && !githubSites && (
<Skeleton
width='384px'
height='200px'
count={3}
className='!block mb-8 mx-auto'
/>
)}
</div>
</div>
<div className='sticky top-0 flex-1 hidden mt-10 lg:block'>
<div className='text-center transition-all bg-blue-100 border border-blue-300 rounded shadow-sm hover:bg-blue-200'>
<Link href='/new'>
<a className='block px-4 py-3 text-lg -mt-[50px]'>
<HiOutlinePlusCircle className='relative inline-block w-8 h-8 mr-1 text-gray-600 bottom-[2px]' />
Create new website
</a>
</Link>
</div>
<hr className='my-5 w-[80%] mx-auto text-gray-300' />
<div className='mt-4 text-center'>
<h3 className='text-2xl font-medium'>
Some awesome websites made with Pagely
</h3>
<div
className='flex flex-wrap px-2 mt-3 overflow-y-auto h-[50vh] pb-5'
id='showcase-websites'>
{showcaseWebsites?.map((site) => {
return (
<div
key={site.siteName}
style={{ zoom: '0.6' }}
className='mr-1'>
<a
href={'https://' + site.subdomain + '.pagely.site'}
target='_blank'
rel='noopener noreferrer'>
<div className='max-w-sm px-3 mx-auto text-center transition-all duration-500 rounded-lg py-7 hover:border border-bluegray-200 hover:shadow-lg group'>
{(
// eslint-disable-next-line @next/next/no-img-element
<img
src={site.ogImageUrl || '/no-og-image.png'}
alt={site.siteName}
className='w-[80%] mx-auto mb-4 rounded-lg group-hover:scale-105 object-cover transform transition-all duration-500 border border-gray-300'
/>
) || (
<Skeleton className='w-[80%] mx-auto mb-4 rounded-lg group-hover:scale-105 object-cover transform transition-all duration-500 border border-gray-300' />
)}
<h3 className='text-2xl font-medium'>
{truncate(site.siteName, { length: 30 })}
</h3>
</div>
</a>
</div>
);
})}
</div>
</div>
</div>
</div>
</div>
</div>
<style jsx>{`
#showcase-websites::-webkit-scrollbar {
display: none;
}
#showcase-websites {
-ms-overflow-style: none;
}
#websites::-webkit-scrollbar {
display: none;
}
#websites {
-ms-overflow-style: none;
}
`}</style>
</MainLayout>
);
}
Example #5
| Source File: code.tsx From pagely with MIT License | 4 votes |
|
Page = () => {
const router = useRouter();
const { data } = useClerkSWR<ghSites>(
`/api/getSiteData/github/?siteId=${router.query.siteId}`
);
const [css, setCss] = useState<string>(data?.customCss);
const [head, setHead] = useState<string>(data?.customHead);
let [isOpen, setIsOpen] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const urlWithSession = useUserWithSession('/api/updateSiteData/github/code');
function closeModal() {
setIsOpen(false);
}
function openModal() {
setIsOpen(true);
}
useEffect(() => {
window.addEventListener('keydown', (e) => {
if (e.metaKey && e.key === 's') {
e.preventDefault();
document.getElementById('update-custom-code-btn').click();
}
});
}, []);
return (
<div>
<div>
<GitHubSiteLayout activeTab='code'>
<h1 className='text-4xl font-extrabold'>Code Injection</h1>
<p className='mt-4 text-gray-800 font-base'>
{data?.siteName || 'Just a second...'}
</p>
<div className='my-3'>
<button
onClick={openModal}
className='px-2 py-1 text-green-600 border border-green-500 rounded shadow bg-green-50 hover:bg-green-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-green-200'>
Open styling tools
</button>
</div>
<div className='mt-8'>
<p className='my-3 font-mono text-xl font-bold text-gray-500'>{`<style>`}</p>
<TextareaAutosize
spellCheck={false}
value={css}
onChange={(e) => setCss(e.target.value)}
className='w-[70vw] py-5 font-mono border text-sm min-h-[100px] border-gray-600 rounded-md shadow-sm block text-gray-500 focus:outline-none focus:border-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500'
onKeyDown={(e) => handleHotkeys(e)}
/>
<p className='my-3 font-mono text-xl font-bold text-gray-500'>{`</style>`}</p>
</div>
<hr className='my-10 text-gray-300' />
<div className='mt-8'>
<p className='my-3 font-mono text-xl font-bold text-gray-500'>{`<head>`}</p>
<TextareaAutosize
spellCheck={false}
value={head}
onChange={(e) => setHead(e.target.value)}
className='w-[70vw] py-5 font-mono border text-sm min-h-[100px] border-gray-600 rounded-md shadow-sm block text-gray-500 focus:outline-none focus:border-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500'
/>
<p className='my-3 font-mono text-xl font-bold text-gray-500'>{`</head>`}</p>
<div className='my-10'>
<button
id='update-custom-code-btn'
onClick={() => {
setIsLoading(true);
axios
.post(urlWithSession, {
customCss: css,
customHead: head,
siteId: data.id,
})
.then((res) => {
console.log(res);
toast.success('Successfully updated site code.', {
duration: 5000,
});
setIsLoading(false);
});
}}
className={`h-10 px-3 mb-10 bg-gray-800 rounded shadow-md text-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800 hover:bg-gray-700 ${
isLoading && 'opacity-50 cursor-wait'
}`}>
Update Custom Code
</button>
<p className='mt-3 text-base text-gray-600'>
You can press <b>Cmd + S</b> to save the code too ✌️
</p>
</div>
</div>
</GitHubSiteLayout>
<Transition appear show={isOpen} as={Fragment}>
<Dialog
as='div'
className='fixed inset-0 z-10 overflow-y-auto'
onClose={closeModal}>
<div className='min-h-screen px-4 text-center'>
<Transition.Child
as={Fragment}
enter='ease-out duration-300'
enterFrom='opacity-0'
enterTo='opacity-100'
leave='ease-in duration-200'
leaveFrom='opacity-100'
leaveTo='opacity-0'>
<Dialog.Overlay className='fixed inset-0 backdrop-filter backdrop-blur-sm bg-white/40' />
</Transition.Child>
{/* This element is to trick the browser into centering the modal contents. */}
<span
className='inline-block h-screen align-middle'
aria-hidden='true'>
​
</span>
<Transition.Child
as={Fragment}
enter='ease-out duration-300'
enterFrom='opacity-0 scale-95'
enterTo='opacity-100 scale-100'
leave='ease-in duration-200'
leaveFrom='opacity-100 scale-100'
leaveTo='opacity-0 scale-95'>
<div className='inline-block w-full max-w-3xl p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white border rounded-md shadow-xl border-gray-500/40'>
<Dialog.Title
as='h3'
className='text-lg font-medium leading-6 text-gray-900'>
CSS Utilities ?
</Dialog.Title>
<div className='mt-2 mb-10'>
<p className='text-sm text-gray-500'>
A tiny set of utilities to help you style your app and
make it look great. Many more utilities are coming soon.
</p>
<hr className='w-full mx-auto my-5 text-gray-200' />
<Utility />
</div>
<div className='mt-4'>
<button
type='button'
className='inline-flex justify-center px-4 py-1 text-sm font-medium text-blue-900 bg-blue-100 border border-blue-500 rounded-md hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500'
onClick={openModal}>
Thanks!
</button>
</div>
</div>
</Transition.Child>
</div>
</Dialog>
</Transition>
</div>
</div>
);
}
Example #6
| Source File: settings.tsx From pagely with MIT License | 4 votes |
|
Page = () => {
const router = useRouter();
const { data } = useClerkSWR<ghSites>(
`/api/getSiteData/github/?siteId=${router.query.siteId}`
);
const urlWithSession = useUserWithSession(
'/api/updateSiteData/github/showcase'
);
const deleteUrlWithSession = useUserWithSession('/api/deleteSite/github');
const [enabled, setEnabled] = useState(data?.inShowcase);
const [isLoading, setIsLoading] = useState(false);
const [isOpen, setIsOpen] = useState(false);
function closeModal() {
setIsOpen(false);
}
function openModal() {
setIsOpen(true);
}
return (
<div>
<div>
<GitHubSiteLayout activeTab='settings'>
<h1 className='text-4xl font-extrabold'>Settings</h1>
<p className='mt-4 text-gray-800 font-base'>
{data?.siteName || 'Just a second...'}
</p>
<div className='mt-8'>
<h2 className='text-2xl font-bold'>Showcase Settings</h2>
<div className='flex items-center my-5'>
<span className='inline-block mr-2'>
I prefer not to display{' '}
<strong title={data?.siteName}>
{truncate(data?.siteName, {
length: 15,
})}
</strong>{' '}
in showcase
</span>
<Switch
checked={enabled}
onChange={setEnabled}
style={{ zoom: 0.5 }}
className={`${enabled ? 'bg-gray-900' : 'bg-gray-700'}
relative inline-flex flex-shrink-0 h-[38px] w-[74px] border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`}>
<span className='sr-only'>Use setting</span>
<span
aria-hidden='true'
className={`${enabled ? 'translate-x-9' : 'translate-x-0'}
pointer-events-none inline-block h-[34px] w-[34px] rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200`}
/>
</Switch>
<span className='inline-block ml-2'>
Display{' '}
<strong title={data?.siteName}>
{truncate(data?.siteName, {
length: 15,
})}
</strong>{' '}
in{' '}
<Link href='/showcase'>
<a className='text-blue-500 hover:underline'>Showcase</a>
</Link>
</span>
</div>
<button
onClick={() => {
setIsLoading(true);
axios
.post(urlWithSession, {
inShowcase: enabled,
siteId: data.id,
})
.then((res) => {
console.log(res);
toast.success(
enabled
? `Yay ?, ${data?.siteName} will be displayed in showcase soon.`
: `${data?.siteName} will be removed showcase soon.`,
{
duration: 5000,
}
);
setIsLoading(false);
});
}}
className={`h-10 px-3 mb-10 bg-gray-800 rounded shadow-md text-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800 hover:bg-gray-700 ${
isLoading && 'opacity-50 cursor-wait'
}`}>
Update Showcase Settings
</button>
</div>
<hr className='w-[70vw] my-3 text-gray-200' />
<div className='mt-8'>
<h2 className='text-2xl font-bold text-red-500'>Danger Zone</h2>
<div className='mt-5'>
<button
onClick={openModal}
className='h-10 px-3 mb-10 bg-red-600 rounded shadow-md text-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-800 hover:bg-red-400'>
{/* <button className='px-2 py-1 text-red-600 border border-red-500 rounded shadow bg-red-50 hover:bg-red-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-red-200'> */}
Delete <strong>{data?.siteName}</strong>
</button>
</div>
</div>
</GitHubSiteLayout>
<Transition appear show={isOpen} as={Fragment}>
<Dialog
as='div'
className='fixed inset-0 z-10 overflow-y-auto'
onClose={closeModal}>
<div className='min-h-screen px-4 text-center'>
<Transition.Child
as={Fragment}
enter='ease-out duration-300'
enterFrom='opacity-0'
enterTo='opacity-100'
leave='ease-in duration-200'
leaveFrom='opacity-100'
leaveTo='opacity-0'>
<Dialog.Overlay className='fixed inset-0 backdrop-filter backdrop-blur-sm bg-white/40' />
</Transition.Child>
{/* This element is to trick the browser into centering the modal contents. */}
<span
className='inline-block h-screen align-middle'
aria-hidden='true'>
​
</span>
<Transition.Child
as={Fragment}
enter='ease-out duration-300'
enterFrom='opacity-0 scale-95'
enterTo='opacity-100 scale-100'
leave='ease-in duration-200'
leaveFrom='opacity-100 scale-100'
leaveTo='opacity-0 scale-95'>
<div className='inline-block w-full max-w-lg p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white border rounded-md shadow-xl border-gray-500/40'>
<Dialog.Title
as='h3'
className='text-lg font-medium leading-6 text-red-700'>
Are you sure that you want to delete{' '}
<strong>{data?.siteName}</strong>?
</Dialog.Title>
<div className='mt-2 mb-10'>
<p className='text-sm text-gray-500'>
Proceed with caution. This action cannot be reversed.
</p>
</div>
<div className='mt-4'>
<button
type='button'
className='inline-flex justify-center px-4 py-1 mr-2 text-sm font-medium text-blue-900 bg-blue-100 border border-blue-500 rounded-md hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500'
onClick={closeModal}>
Cancel
</button>
<button
type='button'
className='inline-flex justify-center px-4 py-1 text-sm font-medium text-red-900 bg-red-100 border border-red-500 rounded-md hover:bg-red-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-red-500'
onClick={() => {
axios
.post(deleteUrlWithSession, {
siteId: data?.id,
})
.then((res) => {
if (res.data.success) {
toast.success('Site deleted successfully', {
duration: 2000,
});
setTimeout(() => {
router.push('/dashboard');
}, 2000);
} else {
toast.error('Site deletion failed');
}
});
}}>
Delete
</button>
</div>
</div>
</Transition.Child>
</div>
</Dialog>
</Transition>
</div>
</div>
);
}
