Skip to content

Commit

Permalink
fix stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@LimesKey
LimesKey committed Dec 20, 2024
1 parent 17e292c commit 8f28477
Show file tree
Hide file tree
Showing 8 changed files with 456 additions and 281 deletions.
2 changes: 1 addition & 1 deletion app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,4 @@
font-family: 'Inter';
src: url('./fonts/Inter-VariableFont_opsz,wght.ttf') format('ttf');
font-optical-sizing: auto;
}
}
119 changes: 6 additions & 113 deletions app/guide/SideBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,128 +1,21 @@
import { Box } from 'theme-ui';
import Link from 'next/link';

const SideBar = () => {
return (
<Box
as="aside"
sx={{
backgroundColor: '#f1f5f9', // bg-slate-100
padding: '1.7rem', // p-4
height: '100vh', // h-screen
borderRight: '4px dashed #64748b', // border-r-4 border-slate-500 border-dashed
maxWidth: '24rem', // max-w-prose
}}
>
<aside className="bg-slate-100 p-4 h-screen border-r-4 border-slate-500 border-dashed max-w-prose">
<nav>
<ul>
<li>
<Link href="/guide" passHref>
<Box
as="a"
sx={{
display: 'block', // block
padding: '1rem 1rem', // py-2 px-4
borderRadius: '0.125rem', // rounded
color: '#1e293b', // text-slate-900
transition: 'all 0.3s', // transition-all
textDecoration: 'none',
'&:hover': {
backgroundColor: '#e2e8f0', // hover:bg-slate-200
color: '#0891b2', // hover:text-cyan-800
},
}}
>
<Link href="/guide" legacyBehavior>
<a className="block py-2 px-4 rounded text-slate-900 transition-all no-underline hover:bg-slate-200 hover:text-cyan-800">
DIY Guide
</Box>
</a>
</Link>
</li>
{/* <li>
<Link href="/resources" passHref>
<Box
as="a"
sx={{
display: 'block', // block
padding: '0.5rem 1rem', // py-2 px-4
borderRadius: '0.125rem', // rounded
color: '#1e293b', // text-slate-900
transition: 'all 0.3s', // transition-all
textDecoration: 'none',
'&:hover': {
backgroundColor: '#e2e8f0', // hover:bg-slate-200
color: '#0891b2', // hover:text-cyan-800
},
}}
>
Resources
</Box>
</Link>
</li>
<li>
<Link href="/parts" passHref>
<Box
as="a"
sx={{
display: 'block', // block
padding: '0.5rem 1rem', // py-2 px-4
borderRadius: '0.125rem', // rounded
color: '#1e293b', // text-slate-900
transition: 'all 0.3s', // transition-all
textDecoration: 'none',
'&:hover': {
backgroundColor: '#e2e8f0', // hover:bg-slate-200
color: '#0891b2', // hover:text-cyan-800
},
}}
>
Approved Parts
</Box>
</Link>
</li>
<li>
<Link href="/submitting" passHref>
<Box
as="a"
sx={{
display: 'block', // block
padding: '0.5rem 1rem', // py-2 px-4
borderRadius: '0.125rem', // rounded
color: '#1e293b', // text-slate-900
transition: 'all 0.3s', // transition-all
textDecoration: 'none',
'&:hover': {
backgroundColor: '#e2e8f0', // hover:bg-slate-200
color: '#0891b2', // hover:text-cyan-800
},
}}
>
Submit your project!
</Box>
</Link>
</li>
<li>
<Link href="/faq" passHref>
<Box
as="a"
sx={{
display: 'block', // block
padding: '0.5rem 1rem', // py-2 px-4
borderRadius: '0.125rem', // rounded
color: '#1e293b', // text-slate-900
transition: 'all 0.3s', // transition-all
textDecoration: 'none',
'&:hover': {
backgroundColor: '#e2e8f0', // hover:bg-slate-200
color: '#0891b2', // hover:text-cyan-800
},
}}
>
FAQ
</Box>
</Link>
</li> */}
{/* Add other links here if needed */}
</ul>
</nav>
</Box>
</aside>
);
};

Expand Down
178 changes: 44 additions & 134 deletions app/guide/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,152 +1,62 @@
"use client";

import { keyframes } from '@emotion/react';
import GuideMD from './guideMD.mdx';
import { MDXProvider } from '@mdx-js/react';
import components from '../components/shared/MDXComponents';
import { Box } from 'theme-ui';
import Image from 'next/image';
import SideBar from "./SideBar";
import Link from 'next/link';
import GuideMD from './guideMD.mdx'; // Import the MDX file

const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });

export default function guide() {
const DocPage = () => {
return (
<Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh', backgroundColor: 'white' }}>
<div className="flex flex-col min-h-screen">
{/* Header */}
<Box
as="header"
sx={{
backgroundColor: '#f1f5f9', // bg-slate-100
color: 'white',
position: 'fixed',
top: 0,
background: 'linear-gradient(180deg, rgba(0,153,255,1) 0%, rgba(130,205,255,1) 100%)',
zIndex: 10,
width: '100%',
borderBottom: '4px dashed #64748b', // border-b-4 border-slate-500 border-dashed
}}
>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '1rem' }}>
<Box as="h1" sx={{ fontSize: '2rem', fontWeight: 'bold', fontFamily: 'monospace' }}>
<Link href="/" passHref legacyBehavior>
<a
style={{
color: 'black',
backgroundColor: '#34d399', // bg-green-400
padding: '0.5rem 1rem',
borderRadius: '0.125rem',
textDecoration: 'none',
}}
>
HACKY HOLIDAYS
</a>
<header className="bg-slate-100 text-white fixed top-0 z-10 w-full border-b-4 border-slate-500 border-dashed">
<div>
<h1 className="text-2xl font-bold font-mono flex justify-between ml-4">
<Link href="/" className="text-black bg-green-400 px-2 py-1 rounded-sm my-2">
HACKY HOLIDAYS
</Link>
</Box>

<Box sx={{ position: 'relative' }}>
<Image src="/OrpheusFlag.svg" alt="Orpheus Flag" width={48} height={48} />
<Box sx={{ marginLeft: 'auto', marginRight: '1.5rem' }}>
<Link href="https://github.com/hackclub/onboard" passHref legacyBehavior>
<a
target="_blank"
rel="noopener noreferrer"
style={{ display: 'block' }}
>
<Box
sx={{
width: '2rem',
height: '2rem',
fill: 'currentColor',
transition: 'all 0.3s',
color: '#1e293b', // text-slate-950
'&:hover': {
color: '#0891b2', // hover:text-cyan-800
},
}}
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
</svg>
</Box>
</a>
</Link>
</Box>
</Box>
</Box>
</Box>
<Image
src="/OrpheusFlag.svg"
alt="Orpheus Flag"
width={48}
height={48}
className="max-w-12 sm:max-w-24 hidden sm:right-20 sm:block absolute"
/>
<Link
href="https://github.com/hackclub/onboard"
className="block"
target="_blank"
rel="noopener noreferrer"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" className="w-8 h-8 fill-current transition-all text-slate-950 hover:text-cyan-800 inline-block my-2 mr-6">
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6z"/>
</svg>
</Link>
</h1>
</div>
</header>

<Box sx={{ display: 'flex', flex: 1, paddingTop: '4rem' }}>
<div className="flex flex-1 pt-16">
{/* Sidebar */}
<Box
as="aside"
sx={{
display: ['none', 'block'],
width: '12rem',
// position: 'fixed',
top: '4rem',
mr: '1rem',
height: '100%',
background: 'white',
}}
>
<aside className="hidden sm:block w-48 fixed top-16 h-full">
<SideBar />
</Box>
</aside>

{/* Main Content */}
<Box
as="main"
sx={{
flex: 1,
padding: '2rem 0rem', // Ensures padding on all devices
ul: {
listStyleType: 'disc',
paddingLeft: '1.25rem', // Adds padding for list items
},
ol: {
listStyleType: 'decimal',
},
'h1, h2, h3, h4, h5, h6': {
marginY: '0.5rem', // Consistent vertical margins for headings
fontWeight: 'semibold',
},
'h1': {
fontSize: '2rem', // Define font size for h1
},
'h2': {
fontSize: '1.75rem', // Define font size for h2
},
'h3': {
fontSize: '1.5rem', // Define font size for h3
},
'h4': {
fontSize: '1.25rem', // Define font size for h4
},
'h5': {
fontSize: '1rem', // Define font size for h5
},
'h6': {
fontSize: '0.875rem', // Define font size for h6
},
'p': {
fontSize: '1rem', // Define font size for paragraphs
},
fontFamily: 'sans-serif',
color: 'black',
width: '100%', // Ensures full width of the content container
maxWidth: '90rem', // Constrains content width for better readability
mx: 'auto', // Centers the content
overflowWrap: 'break-word', // Ensures long words are broken to the next line
wordBreak: 'break-word', // For older browsers
lineHeight: '1.6', // Improved readability
fontSize: '1rem', // Default font size
}}
>
<MDXProvider components={components}>
<GuideMD />
</MDXProvider>
</Box>
</Box>
</Box>
<main className="flex-1 p-8 max-w-4xl mx-auto sm:ml-48">
<div className="prose prose-slate prose-headings:my-4 prose-headings:font-bold prose-a:text-blue-600 hover:prose-a:text-blue-800">
<MDXProvider components={components}>
<GuideMD /> {/* Render the MDX content */}
</MDXProvider>
</div>
</main>
</div>
</div>
);
}
}

export default DocPage;
15 changes: 11 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,22 @@
"@mdx-js/react": "^3.1.0",
"@next/mdx": "^15.1.2",
"@react-three/fiber": "^8.17.10",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/forms": "^0.5.9",
"@tailwindcss/line-clamp": "^0.4.4",
"@tailwindcss/typography": "^0.5.15",
"@types/mdx": "^2.0.13",
"@types/three": "^0.171.0",
"autoprefixer": "^10.4.20",
"install": "^0.13.0",
"next": "^15.1.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-markdown": "^9.0.1",
"react-snowfall": "^2.2.0",
"rehype-highlight": "^7.0.1",
"remark-gfm": "^4.0.0",
"tailwindcss-filters": "^3.0.0",
"theme-ui": "^0.17.1",
"three": "^0.170.0"
},
Expand All @@ -37,9 +45,8 @@
"typescript": "^5.7.2"
},
"pnpm": {
"overrides": {
"three": "0.170.0"
"overrides": {
"three": "0.170.0"
}
}
}

}
Loading

0 comments on commit 8f28477

Please sign in to comment.