h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

Add code backdrops to homepage #522

Merged
Irev-Dev merged 1 commits from kurt/add-code-backdrops-to-home-page into main 2021-09-23 10:14:06 +02:00
Conversation 4 Commits 1 Files Changed 2 +198 -141
2 changed files with 198 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/web/src/components/Hero/AssetWithGooey.tsx
View File

@@ -9,11 +9,9 @@ import { useTexture, MeshDistortMaterial, Sphere } from '@react-three/drei'
const thresholdAngle = 10 const thresholdAngle = 10
export default function AssetWithGooey({ export default function AssetWithGooey({
assetUrl, assetUrl,
offset,
scale, scale,
}: { }: {
assetUrl: string assetUrl: string
offset: number[]
scale: number scale: number
}) { }) {
const geo = useLoader(STLLoader, assetUrl) const geo = useLoader(STLLoader, assetUrl)
@@ -22,7 +20,7 @@ export default function AssetWithGooey({
const mesh = useEdgeSplit((thresholdAngle * Math.PI) / 180, true, geo) const mesh = useEdgeSplit((thresholdAngle * Math.PI) / 180, true, geo)
const colorMap = useTexture(texture) const colorMap = useTexture(texture)
const edges = React.useMemo(() => new THREE.EdgesGeometry(geo, 12), [geo]) const edges = React.useMemo(() => new THREE.EdgesGeometry(geo, 12), [geo])
const position = [offset[0], offset[1], 5] const position = [0, 0, 5]
const scaleArr = Array.from({ length: 3 }).map(() => scale) const scaleArr = Array.from({ length: 3 }).map(() => scale)
const { mouse } = useThree() const { mouse } = useThree()
const [rEuler, rQuaternion] = useMemo( const [rEuler, rQuaternion] = useMemo(

335
app/web/src/components/Hero/Hero.tsx
View File

@@ -13,153 +13,217 @@ import ProjectsCell from 'src/components/ProjectsCell'
import OutBound from 'src/components/OutBound/OutBound' import OutBound from 'src/components/OutBound/OutBound'
// dynamic import to enable pre-render iof the homepage // dynamic import to enable pre-render iof the homepage
const Coffee = React.lazy(() => import('src/components/Hero/AssetWithGooey')) const AssetWithGooey = React.lazy(() => import('src/components/Hero/AssetWithGooey'))
const cqCode = `from cadquery import *
export const Hero = () => { d1 = 58.5
const [width, widthSetter] = React.useState(1024) d2 = 56.5
d3 = 63.5
d4 = 84
d5 = 88
React.useEffect(() => { h1 = 8.5
const onResize = () => { h2 = 154
widthSetter(window.innerWidth)
} l1 = 14.5
window.addEventListener('resize', onResize) l2 = 4.5
onResize()
return () => { cup = (
window.removeEventListener('resize', onResize) Workplane("XY").circle(d1 / 2).extrude(h1)
} .faces(">Z").circle(d3 / 2)
}, []) .workplane(offset=h2).circle(d5 / 2)
const { heroOffset, tutOffset } = React.useMemo(() => { .loft()
if (width < 1024) { .cut(Workplane("XY")
return { .circle((d3 - 3.5) / 2)
heroOffset: [0, -3], .workplane(offset=h2).circle((d5 - 3.5) / 2)
tutOffset: [0, -3], .loft()
.translate([0, 0, h1])
)
`.split('\n')
Irev-Dev commented 2021-09-21 10:04:48 +02:00 (Migrated from github.com)
Review
Copy Link

this was used to move the asset in 3d when screen size changes and can be removed now.

this was used to move the asset in 3d when screen size changes and can be removed now.
const scadCode = `hingeHalfExtrudeLength=hingeLength/2-clearance/2;
mountingHoleMoveIncrement=(hingeLength-2*mountingHoleEdgeOffset)/
(mountingHoleCount-1);
module costomizerEnd() {}
$fn=30;
tiny=0.005;
// modules
module hingeBaseProfile() {
translate([pivotRadius,0,0]){
square([baseWidth,baseThickness]);
}
}
module hingeBodyHalf() {
difference() {
union() {
linear_extrude(hingeHalfExtrudeLength){
offset(1)offset(-2)offset(1){
translate([0,pivotRadius,0]){
circle(pivotRadius);
}
square([pivotRadius,pivotRadius]);
hingeBaseProfile();
}
}
linear_extrude(hingeLength){
offset(1)offset(-1)hingeBaseProfile();
} }
} }
return { plateHoles();
heroOffset: [-5, 0], }
tutOffset: [4, 0], }`.split('\n')
}
}, [width])
export const Hero = () => {
return ( return (
<div className="bg-ch-gray-800"> <div className="bg-ch-gray-800">
<ModelSection assetUrl="/coffee-lid.stl" offset={heroOffset} scale={0.06}> <div className="relative h-0 w-0">
<div className="grid lg:grid-cols-2 py-32"> <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<div className="flex items-end justify-center row-start-2 lg:row-start-1 pt-96 lg:pt-0 pr-12 pl-6"> <defs>
<Link <clipPath id="code-blob-clip-path" clipPathUnits="objectBoundingBox" transform="scale(0.0038 0.0056)">
to={routes.project({ <path d="M68.5 169.159C13.3 167.159 5.69181e-05 144.659 0 71.1594C3.99994 13.1594 50.9244 -14.591 121.5 7.65941C223 39.6594 266 25.1594 263.5 113.659C261.634 179.701 191.5 173.616 68.5 169.159Z" fill="#C4C4C4"/>
userName: 'irevdev', </clipPath>
projectTitle: 'coffee-lid', </defs>
})} </svg>
> </div>
<div className="grid grid-flow-col gap-2 sm:gap-4 items-center bg-ch-gray-760 bg-opacity-95 text-ch-gray-300 rounded-md p-2 font-fira-sans relative z-10 shadow-ch"> <div className="grid lg:grid-cols-5 max-w-8xl mx-auto">
<div className="pl-1 sm:pl-4"> <div className="relative row-start-2 col-start-1 h-full lg:row-start-1 lg:col-span-3 lg:col-start-1">
<Gravatar
image="CadHub/xvrnxvarkv8tdzo4n65u" <div className="absolute inset-0 my-20 mx-10 lg:mr-40 bg-gradient-to-tr from-pink-400 to-blue-600 opacity-40 overflow-hidden" style={{clipPath: 'url(#code-blob-clip-path)'}}>
className="w-12 h-12 mr-4" <pre className="lg:ml-20 mt-12 text-blue-100 font-fira-code">
size={60} {cqCode.map((line, index) => <div key={index}><span className="w-12 pr-6 text-blue-200 text-opacity-50 inline-block text-right">{index+1}</span>{line}</div>)}
/> </pre>
</div>
<div>
<div className="text-xl sm:text-3xl">Coffee Lid</div>
<div>IrevDev</div>
</div>
<div className="flex self-start">
<CadPackage
cadPackage="cadquery"
className="px-3 py-1 sm:text-xl rounded transform translate-x-4 sm:translate-x-10"
/>
</div>
</div>
</Link>
</div>
<div className="col-start-1 lg:col-start-2 px-4">
<div>
<span
className="text-7xl text-ch-blue-400 bg-ch-blue-640 bg-opacity-30 font-fira-code px-6 rounded-2xl shadow-ch"
style={{
boxShadow: 'inset 0 4px 4px 0 rgba(255,255,255, 0.06)',
}}
>
Code
</span>
</div>
<div className="text-6xl font-fira-sans mt-8 text-ch-gray-300">
is the future of CAD
</div>
<div className="text-2xl text-gray-600 mt-8 max-w-4xl">
Designs backed by reliable, easy-to-write code open a world of new
workflows and collaboration. We're building a place where you can
build that future.
</div>
<OutlineButton
color="pink"
isLeft
svgName="terminal"
onClick={() =>
navigate(routes.draftProject({ cadPackage: 'openscad' }))
}
>
Start Hacking
</OutlineButton>
</div> </div>
<ModelSection assetUrl="/coffee-lid.stl" scale={0.06} />
</div> </div>
</ModelSection>
<div className="flex items-end justify-center row-start-2 col-start-1 pt-96 pr-12 pl-6 pb-24 lg:col-span-3 lg:col-start-1 lg:row-start-1 lg:pt-0">
<Link
to={routes.project({
userName: 'irevdev',
projectTitle: 'coffee-lid',
})}
>
<div className="grid grid-flow-col gap-2 sm:gap-4 items-center bg-ch-gray-760 bg-opacity-95 text-ch-gray-300 rounded-md p-2 font-fira-sans relative z-10 shadow-ch">
<div className="pl-1 sm:pl-4">
<Gravatar
image="CadHub/xvrnxvarkv8tdzo4n65u"
className="w-12 h-12 mr-4"
size={60}
/>
</div>
<div>
<div className="text-xl sm:text-3xl">Coffee Lid</div>
<div>IrevDev</div>
</div>
<div className="flex self-start">
<CadPackage
cadPackage="cadquery"
className="px-3 py-1 sm:text-xl rounded transform translate-x-4 sm:translate-x-10"
/>
</div>
</div>
</Link>
</div>
<div className="col-start-1 px-4 py-32 lg:col-start-3 lg:row-start-1 lg:col-span-3 lg:pl-52">
<div>
<span
className="text-7xl text-ch-blue-400 bg-ch-blue-640 bg-opacity-30 font-fira-code px-6 rounded-2xl shadow-ch"
style={{
boxShadow: 'inset 0 4px 4px 0 rgba(255,255,255, 0.06)',
}}
>
Code
</span>
</div>
Irev-Dev commented 2021-09-21 10:07:31 +02:00 (Migrated from github.com)
Review
Copy Link

lots of grid start span etc stuff since I'm forcing much of the content to overlap, and then needs to adjust for smaller screens too.

lots of `grid` `start` `span` etc stuff since I'm forcing much of the content to overlap, and then needs to adjust for smaller screens too.
<div className="text-6xl font-fira-sans mt-8 text-ch-gray-300">
is the future of CAD
</div>
<div className="text-2xl text-gray-600 mt-8 max-w-4xl">
Designs backed by reliable, easy-to-write code open a world of new
workflows and collaboration. We're building a place where you can
build that future.
</div>
<OutlineButton
color="pink"
isLeft
svgName="terminal"
onClick={() =>
navigate(routes.draftProject({ cadPackage: 'openscad' }))
}
>
Start Hacking
</OutlineButton>
</div>
</div>
<ChooseYourCharacter /> <ChooseYourCharacter />
<Community /> <Community />
<ModelSection assetUrl="/hinge.stl" offset={tutOffset} scale={0.12}> <div className="max-w-8xl mx-auto grid lg:grid-cols-5 py-16">
<div className="max-w-7xl mx-auto grid py-16 overflow-hidden"> <div className=" row-start-2 col-start-1 lg:col-span-3 lg:col-start-3 lg:row-start-1 lg:-mx-10 h-full relative">
<div className="py-0 pb-32 lg:py-32 ml-4 col-start-1 lg:col-start-1 pr-12 pl-6">
<div className="text-4xl mb-6 text-ch-gray-300">Learn Code-CAD</div>
<p className="text-gray-600 max-w-lg"> <div className="absolute inset-0 mb-24 mt-16 ml:10 mr:10 lg:ml-40 lg:mr-52 bg-gradient-to-tr from-pink-400 to-blue-600 opacity-30 overflow-hidden" style={{clipPath: 'url(#code-blob-clip-path)'}}>
We want you to learn Code-CAD today so it can change the way you <pre className="ml-10 mt-12 text-blue-100 text-xs font-fira-code">
work tomorrow. Our community is writing tutorials to make this {scadCode.map((line, index) => <div key={index}><span className="w-12 pr-6 text-blue-200 text-opacity-50 inline-block text-right">{index+1}</span>{line}</div>)}
powerful paradigm more accessible to people new to code and CAD. </pre>
</p>
<OutBound
to="https://learn.cadhub.xyz/docs/definitive-beginners/your-openscad-journey"
className=""
>
<OutlineButton color="pink" isLeft svgName="terminal">
Get Started with OpenSCAD
</OutlineButton>
</OutBound>
</div>
<div className="flex items-end justify-center row-start-2 lg:row-start-1 lg:col-start-2 pt-96 lg:pt-0 lg:pr-10">
<Link
to={routes.project({
userName: 'irevdev',
projectTitle: 'tutorial-hinge',
})}
>
<div className="grid grid-flow-col sm:gap-2 items-center bg-ch-gray-760 bg-opacity-95 text-ch-gray-300 rounded-md py-2 pl-2 font-fira-sans relative z-10 shadow-ch">
<div className="pl-1 sm:pl-4">
<Gravatar
image="CadHub/xvrnxvarkv8tdzo4n65u"
className="w-12 h-12 mr-4"
size={60}
/>
</div>
<div>
<div className="text-lg sm:text-2xl w-28 sm:w-auto">
Print in Place Hinge
</div>
<div>IrevDev</div>
</div>
<div className="flex self-start">
<CadPackage
cadPackage="openscad"
className="px-3 py-1 sm:text-xl rounded transform translate-x-4 sm:translate-x-10"
/>
</div>
</div>
</Link>
</div> </div>
<ModelSection assetUrl="/hinge.stl" scale={0.12} />
</div> </div>
</ModelSection>
<div className="py-12 pb-32 ml-4 row-start-1 col-start-1 pr-12 pl-6 lg:py-32 lg:col-start-1 lg:col-span-3">
<div className="text-4xl mb-6 text-ch-gray-300">Learn Code-CAD</div>
<p className="text-gray-600 max-w-lg">
We want you to learn Code-CAD today so it can change the way you
work tomorrow. Our community is writing tutorials to make this
powerful paradigm more accessible to people new to code and CAD.
</p>
<OutBound
to="https://learn.cadhub.xyz/docs/definitive-beginners/your-openscad-journey"
className=""
>
<OutlineButton color="pink" isLeft svgName="terminal">
Get Started with OpenSCAD
</OutlineButton>
</OutBound>
</div>
<div className="flex items-end justify-center row-start-2 col-start-1 pb-24 lg:row-start-1 lg:col-start-3 lg:col-span-3 pt-96 lg:pt-0 lg:pr-10">
<Link
to={routes.project({
userName: 'irevdev',
projectTitle: 'tutorial-hinge',
})}
>
<div className="grid grid-flow-col sm:gap-2 items-center bg-ch-gray-760 bg-opacity-95 text-ch-gray-300 rounded-md py-2 pl-2 font-fira-sans relative z-10 shadow-ch">
<div className="pl-1 sm:pl-4">
<Gravatar
image="CadHub/xvrnxvarkv8tdzo4n65u"
className="w-12 h-12 mr-4"
size={60}
/>
</div>
<div>
<div className="text-lg sm:text-2xl w-28 sm:w-auto">
Print in Place Hinge
</div>
<div>IrevDev</div>
</div>
<div className="flex self-start">
<CadPackage
cadPackage="openscad"
className="px-3 py-1 sm:text-xl rounded transform translate-x-4 sm:translate-x-10"
/>
</div>
</div>
</Link>
</div>
</div>
<Roadmap /> <Roadmap />
<div className="h-3 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500" /> <div className="h-3 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500" />
<Footer /> <Footer />
@@ -171,19 +235,14 @@ const DisableRender = () => useFrame(() => null, 1000)
function ModelSection({ function ModelSection({
assetUrl, assetUrl,
offset,
children,
scale, scale,
}: { }: {
assetUrl: string assetUrl: string
offset: number[]
children: React.ReactNode
scale: number scale: number
}) { }) {
const { ref, inView } = useInView() const { ref, inView } = useInView()
return ( return (
<div className="relative"> <div className="relative h-full">
{children}
<div className="absolute inset-0" ref={ref}> <div className="absolute inset-0" ref={ref}>
<Canvas <Canvas
linear linear
@@ -202,7 +261,7 @@ function ModelSection({
<Suspense <Suspense
fallback={<Html center className="loading" children="Loading..." />} fallback={<Html center className="loading" children="Loading..." />}
> >
<Coffee assetUrl={assetUrl} offset={offset} scale={scale} /> <AssetWithGooey assetUrl={assetUrl} scale={scale} />
</Suspense> </Suspense>
{/* uncomment for framerate and render time */} {/* uncomment for framerate and render time */}