Merge branch 'main' into sidebar-tray
This commit is contained in:
Kurt Hutten
@@ -1,8 +1,9 @@
|
||||
export type CadPackageType = 'openscad' | 'cadquery' | 'jscad'
|
||||
|
||||
export const ideTypeNameMap = {
|
||||
export const ideTypeNameMap: { [key in CadPackageType]: string } = {
|
||||
openscad: 'OpenSCAD',
|
||||
cadquery: 'CadQuery',
|
||||
jscad: 'JSCAD',
|
||||
}
|
||||
|
||||
interface CadPackageProps {
|
||||
@@ -19,18 +20,21 @@ const CadPackage = ({
|
||||
const cadName = ideTypeNameMap[cadPackage] || ''
|
||||
const isOpenScad = cadPackage === 'openscad'
|
||||
const isCadQuery = cadPackage === 'cadquery'
|
||||
const isJsCad = cadPackage === 'jscad'
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
`grid grid-flow-col-dense items-center gap-2 cursor-default text-gray-100 ${
|
||||
`grid grid-flow-col-dense items-center gap-2 text-gray-100 ${
|
||||
isOpenScad && 'bg-yellow-800'
|
||||
} ${isCadQuery && 'bg-ch-blue-700'} bg-opacity-30 ` + className
|
||||
} ${isCadQuery && 'bg-ch-blue-700'} ${
|
||||
isJsCad && 'bg-ch-purple-500'
|
||||
} bg-opacity-30 ` + className
|
||||
}
|
||||
>
|
||||
<div
|
||||
className={`${isOpenScad && 'bg-yellow-200'} ${
|
||||
isCadQuery && 'bg-blue-800'
|
||||
} ${dotClass} rounded-full`}
|
||||
} ${isJsCad && 'bg-yellow-300'} ${dotClass} rounded-full`}
|
||||
/>
|
||||
<div>{cadName}</div>
|
||||
</div>
|
||||
|
||||
113
app/web/src/components/Hero/AssetWithGooey.tsx
Normal file
113
app/web/src/components/Hero/AssetWithGooey.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
import React, { useRef, useMemo } from 'react'
|
||||
import * as THREE from 'three'
|
||||
import { useLoader, useThree, useFrame } from '@react-three/fiber'
|
||||
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
|
||||
import { useEdgeSplit } from 'src/helpers/hooks/useEdgeSplit'
|
||||
import texture from 'src/components/IdeViewer/dullFrontLitMetal.png'
|
||||
import { useTexture, MeshDistortMaterial, Sphere } from '@react-three/drei'
|
||||
|
||||
const thresholdAngle = 10
|
||||
export default function AssetWithGooey({
|
||||
assetUrl,
|
||||
offset,
|
||||
scale,
|
||||
}: {
|
||||
assetUrl: string
|
||||
offset: number[]
|
||||
scale: number
|
||||
}) {
|
||||
const geo = useLoader(STLLoader, assetUrl)
|
||||
const edgeRef = useRef(null)
|
||||
const coffeeRef = useRef(null)
|
||||
const mesh = useEdgeSplit((thresholdAngle * Math.PI) / 180, true, geo)
|
||||
const colorMap = useTexture(texture)
|
||||
const edges = React.useMemo(() => new THREE.EdgesGeometry(geo, 12), [geo])
|
||||
const position = [offset[0], offset[1], 5]
|
||||
const scaleArr = Array.from({ length: 3 }).map(() => scale)
|
||||
const { mouse } = useThree()
|
||||
const [rEuler, rQuaternion] = useMemo(
|
||||
() => [new THREE.Euler(), new THREE.Quaternion()],
|
||||
[]
|
||||
)
|
||||
useFrame((state, delta) => {
|
||||
if (edgeRef.current) {
|
||||
edgeRef.current.rotation.y += 0.01
|
||||
}
|
||||
if (coffeeRef.current) {
|
||||
rEuler.set((-mouse.y * Math.PI) / 4, (mouse.x * Math.PI) / 2, 0)
|
||||
coffeeRef.current.quaternion.slerp(rQuaternion.setFromEuler(rEuler), 0.1)
|
||||
}
|
||||
})
|
||||
return (
|
||||
<group dispose={null} ref={edgeRef} position={position}>
|
||||
<group ref={coffeeRef}>
|
||||
<mesh ref={mesh} scale={scaleArr} geometry={geo}>
|
||||
<meshPhysicalMaterial
|
||||
envMapIntensity={2}
|
||||
color="#F472B6"
|
||||
map={colorMap}
|
||||
clearcoat={0.5}
|
||||
clearcoatRoughness={0.01}
|
||||
roughness={0}
|
||||
metalness={0.7}
|
||||
smoothShading
|
||||
/>
|
||||
</mesh>
|
||||
<lineSegments scale={scale} geometry={edges} renderOrder={100}>
|
||||
<lineBasicMaterial color="#aaaaff" />
|
||||
</lineSegments>
|
||||
</group>
|
||||
<ambientLight intensity={2} />
|
||||
<Gooey />
|
||||
</group>
|
||||
)
|
||||
}
|
||||
|
||||
function randomSign(num: number): number {
|
||||
return Math.random() > 0.5 ? num : -num
|
||||
}
|
||||
|
||||
function Gooey() {
|
||||
const blobsData = useMemo(() => {
|
||||
const firstSet = Array.from({ length: 5 }).map((_, index) => {
|
||||
const dist = Math.random() * 3 + 2.5
|
||||
const x = randomSign(Math.random() * dist)
|
||||
const y = randomSign(Math.sqrt(dist * dist - x * x))
|
||||
const z = randomSign(Math.random() * 3)
|
||||
const position: [number, number, number] = [x, z, y]
|
||||
const size = Math.random() * 0.8 + 0.1
|
||||
const distort = Math.random() * 0.8 + 0.1
|
||||
const speed = (Math.random() * 0.8) / size / size + 0.1
|
||||
return { position, size, distort, speed }
|
||||
})
|
||||
const secondSet = Array.from({ length: 5 }).map((_, index) => {
|
||||
const dist = Math.random() * 3 + 1.5
|
||||
const x = randomSign(Math.random() * dist)
|
||||
const y = randomSign(Math.sqrt(dist * dist - x * x))
|
||||
const z = randomSign(Math.random() * 3)
|
||||
const position: [number, number, number] = [x, z, y]
|
||||
const size = Math.random() * 0.2 + 0.05
|
||||
const distort = Math.random() * 0.8 + 0.1
|
||||
const speed = (Math.random() * 0.5) / size / size + 0.1
|
||||
return { position, size, distort, speed }
|
||||
})
|
||||
return [...firstSet, ...secondSet]
|
||||
}, [])
|
||||
return (
|
||||
<>
|
||||
{blobsData.map(({ position, size, distort, speed }, index) => (
|
||||
<Sphere key={index} visible position={position} args={[size, 16, 200]}>
|
||||
<MeshDistortMaterial
|
||||
color="#173E6F"
|
||||
attach="material"
|
||||
distort={distort} // Strength, 0 disables the effect (default=1)
|
||||
speed={speed} // Speed (default=1)
|
||||
roughness={0.2}
|
||||
opacity={0.6}
|
||||
transparent
|
||||
/>
|
||||
</Sphere>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
504
app/web/src/components/Hero/Hero.tsx
Normal file
504
app/web/src/components/Hero/Hero.tsx
Normal file
@@ -0,0 +1,504 @@
|
||||
import { Canvas, useLoader, useFrame } from '@react-three/fiber'
|
||||
import { Suspense } from 'react'
|
||||
import { Html, Stats } from '@react-three/drei'
|
||||
import CadPackage, {
|
||||
CadPackageType,
|
||||
} from 'src/components/CadPackage/CadPackage'
|
||||
import { navigate, routes, Link } from '@redwoodjs/router'
|
||||
import { useInView } from 'react-intersection-observer'
|
||||
|
||||
import Svg, { SvgNames } from 'src/components/Svg/Svg'
|
||||
import Gravatar from 'src/components/Gravatar/Gravatar'
|
||||
import ProjectsCell from 'src/components/ProjectsCell'
|
||||
import OutBound from 'src/components/OutBound/OutBound'
|
||||
|
||||
// dynamic import to enable pre-render iof the homepage
|
||||
const Coffee = React.lazy(() => import('src/components/Hero/AssetWithGooey'))
|
||||
|
||||
export const Hero = () => {
|
||||
const [width, widthSetter] = React.useState(1024)
|
||||
|
||||
React.useEffect(() => {
|
||||
const onResize = () => {
|
||||
widthSetter(window.innerWidth)
|
||||
}
|
||||
window.addEventListener('resize', onResize)
|
||||
onResize()
|
||||
return () => {
|
||||
window.removeEventListener('resize', onResize)
|
||||
}
|
||||
}, [])
|
||||
const { heroOffset, tutOffset } = React.useMemo(() => {
|
||||
if (width < 1024) {
|
||||
return {
|
||||
heroOffset: [0, -3],
|
||||
tutOffset: [0, -3],
|
||||
}
|
||||
}
|
||||
return {
|
||||
heroOffset: [-5, 0],
|
||||
tutOffset: [4, 0],
|
||||
}
|
||||
}, [width])
|
||||
|
||||
return (
|
||||
<div className="bg-ch-gray-800">
|
||||
<ModelSection assetUrl="/coffee-lid.stl" offset={heroOffset} scale={0.06}>
|
||||
<div className="grid lg:grid-cols-2 py-32">
|
||||
<div className="flex items-end justify-center row-start-2 lg:row-start-1 pt-96 lg:pt-0 pr-12 pl-6">
|
||||
<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 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>
|
||||
<ChooseYourCharacter />
|
||||
<Community />
|
||||
<ModelSection assetUrl="/hinge.stl" offset={tutOffset} scale={0.12}>
|
||||
<div className="max-w-7xl mx-auto grid py-16 overflow-hidden">
|
||||
<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">
|
||||
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 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>
|
||||
<Roadmap />
|
||||
<div className="h-3 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500" />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const DisableRender = () => useFrame(() => null, 1000)
|
||||
|
||||
function ModelSection({
|
||||
assetUrl,
|
||||
offset,
|
||||
children,
|
||||
scale,
|
||||
}: {
|
||||
assetUrl: string
|
||||
offset: number[]
|
||||
children: React.ReactNode
|
||||
scale: number
|
||||
}) {
|
||||
const { ref, inView } = useInView()
|
||||
return (
|
||||
<div className="relative">
|
||||
{children}
|
||||
<div className="absolute inset-0" ref={ref}>
|
||||
<Canvas
|
||||
linear
|
||||
dpr={[1, 2]}
|
||||
orthographic
|
||||
camera={{ zoom: 75, position: [0, 0, 500] }}
|
||||
>
|
||||
{!inView && <DisableRender />}
|
||||
<pointLight position={[2, 3, 5]} color="#FFFFFF" intensity={2} />
|
||||
<pointLight position={[2, 3, -5]} color="#FFFFFF" intensity={2} />
|
||||
<pointLight position={[-6, 3, -5]} color="#FFFFFF" intensity={2} />
|
||||
<pointLight position={[-6, 3, 5]} color="#FFFFFF" intensity={2} />
|
||||
|
||||
<pointLight position={[2, 1.5, 0]} color="#0000FF" intensity={2} />
|
||||
<pointLight position={[2, 1.5, 0]} color="#FF0000" intensity={2} />
|
||||
<Suspense
|
||||
fallback={<Html center className="loading" children="Loading..." />}
|
||||
>
|
||||
<Coffee assetUrl={assetUrl} offset={offset} scale={scale} />
|
||||
</Suspense>
|
||||
|
||||
{/* uncomment for framerate and render time */}
|
||||
{/* <Stats showPanel={0} className="three-debug-panel-1" /> */}
|
||||
{/* <Stats showPanel={1} className="three-debug-panel-2" /> */}
|
||||
</Canvas>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ChooseYourCharacter() {
|
||||
return (
|
||||
<div className="text-ch-gray-300 grid lg:grid-cols-2 gap-12 font-fira-sans py-32 max-w-7xl mx-auto px-4">
|
||||
<div className="">
|
||||
<div className="text-4xl mb-6">Choose your character</div>
|
||||
<p className="text-gray-600 text-2xl">
|
||||
CadHub is the place you can try out Code-CAD packages to find the one
|
||||
that's right for you. Our dedicated community is making CAD easy to
|
||||
learn on the web. Try one of our three integrations today and keep an
|
||||
eye out for more.
|
||||
</p>
|
||||
</div>
|
||||
<ul className="flex-col flex justify-around items-center lg:items-start text-gray-600">
|
||||
{[
|
||||
{
|
||||
cadPackage: 'openscad',
|
||||
desc: 'A mature Code-CAD library focused on Constructed Solid Geometry (CSG) modeling with syntax like C++.',
|
||||
},
|
||||
{
|
||||
cadPackage: 'cadquery',
|
||||
desc: 'A Python-based library with support for CSG and sketch-based modeling and a clean-feeling API.',
|
||||
},
|
||||
{
|
||||
cadPackage: 'jscad',
|
||||
desc: 'A JavaScript Code-CAD library that will feel familiar to web developers, based on the same tech as OpenSCAD.',
|
||||
},
|
||||
].map(
|
||||
({
|
||||
cadPackage,
|
||||
desc,
|
||||
}: {
|
||||
cadPackage: CadPackageType
|
||||
desc: string
|
||||
}) => (
|
||||
<li key={cadPackage} className="flex items-center">
|
||||
<div className="mr-4 sm:mr-12">
|
||||
<button
|
||||
onClick={() => navigate(routes.draftProject({ cadPackage }))}
|
||||
className="flex-shrink-0 cursor-pointer"
|
||||
>
|
||||
<CadPackage
|
||||
cadPackage={cadPackage}
|
||||
className="px-3 py-1 w-40 text-xl rounded"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm my-2 max-w-sm">{desc}</p>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Community() {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto py-40">
|
||||
<div className="text-ch-gray-300 grid lg:grid-cols-2 gap-8 font-fira-sans px-4 mb-6">
|
||||
<div className="text-4xl">Explore with our community</div>
|
||||
|
||||
<p className="text-gray-600 text-sm">
|
||||
CadHub is a social platform. You can ask users how they designed a
|
||||
part, fork their work to put your own spin on it, and find inspiration
|
||||
in abundance.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ProjectsCell shouldFilterProjectsWithoutImage projectLimit={8} />
|
||||
<div className="flex justify-end pr-4">
|
||||
<OutlineButton
|
||||
color="blue"
|
||||
svgName="arrow-right"
|
||||
onClick={() => navigate(routes.projects())}
|
||||
>
|
||||
See All Projects
|
||||
</OutlineButton>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function OutlineButton({
|
||||
color,
|
||||
svgName,
|
||||
isLeft = false,
|
||||
children,
|
||||
onClick,
|
||||
}: {
|
||||
color: 'blue' | 'pink' | 'purple'
|
||||
svgName: SvgNames
|
||||
isLeft?: boolean
|
||||
children: React.ReactNode
|
||||
onClick?: () => void
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={`grid grid-flow-col-dense gap-4 items-center border px-4 py-1 rounded mt-6 relative z-10 ${
|
||||
color === 'pink' && 'border-ch-pink-500'
|
||||
} ${color === 'blue' && 'border-ch-blue-630'} ${
|
||||
color === 'purple' && 'border-ch-purple-500'
|
||||
}`}
|
||||
>
|
||||
{isLeft && (
|
||||
<Svg
|
||||
name={svgName}
|
||||
className={`${color === 'pink' && 'text-ch-pink-500'} ${
|
||||
color === 'blue' && 'text-ch-blue-300'
|
||||
} ${color === 'purple' && 'text-ch-purple-200'} w-6 h-6`}
|
||||
/>
|
||||
)}
|
||||
<span
|
||||
className={`text-2xl ${color === 'pink' && 'text-ch-pink-300'} ${
|
||||
color === 'blue' && 'text-ch-blue-300'
|
||||
} ${color === 'purple' && 'text-ch-purple-200'}`}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
{!isLeft && (
|
||||
<Svg
|
||||
name={svgName}
|
||||
className={`${color === 'pink' && 'text-ch-pink-500'} ${
|
||||
color === 'blue' && 'text-ch-blue-300'
|
||||
} ${color === 'purple' && 'text-ch-purple-200'} w-6 h-6`}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
function Roadmap() {
|
||||
const sections = [
|
||||
{
|
||||
title: 'Read our roadmap',
|
||||
desc: 'Version control with GitHub, multi-file projects, and team collaboration tools. We’ve got a lot planned, and we’re building it in the open.',
|
||||
buttonText: 'View on Github',
|
||||
color: 'purple',
|
||||
url: 'https://github.com/Irev-Dev/cadhub/discussions/212',
|
||||
},
|
||||
{
|
||||
title: 'Join our community',
|
||||
desc: 'CAD is ready to evolve. Join our Discord and opensource community on GitHub and build that future with us!',
|
||||
buttonText: 'Join the Discord',
|
||||
color: 'blue',
|
||||
url: 'https://discord.gg/SD7zFRNjGH',
|
||||
},
|
||||
]
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto grid md:grid-cols-2 py-32 mt-12">
|
||||
{sections.map(({ title, desc, buttonText, color, url }) => (
|
||||
<div className="ml-4 py-6" key={title}>
|
||||
<div className="text-4xl mb-6 text-ch-gray-300">{title}</div>
|
||||
<p className="text-gray-600 text-2xl max-w-lg">{desc}</p>
|
||||
<OutBound to={url} className="">
|
||||
<OutlineButton color={color} svgName="arrow-right">
|
||||
{buttonText}
|
||||
</OutlineButton>
|
||||
</OutBound>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Footer() {
|
||||
const section: {
|
||||
header: string
|
||||
links: { name: string; url: string }[]
|
||||
}[] = [
|
||||
{
|
||||
header: 'Community',
|
||||
links: [
|
||||
{
|
||||
name: 'Github',
|
||||
url: 'https://github.com/Irev-Dev/cadhub',
|
||||
},
|
||||
{
|
||||
name: 'Discord',
|
||||
url: 'https://discord.gg/SD7zFRNjGH',
|
||||
},
|
||||
{
|
||||
name: 'Newsletter',
|
||||
url: 'https://kurthutten.com/signup/',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
header: 'About',
|
||||
links: [
|
||||
{
|
||||
name: 'Road Map',
|
||||
url: 'https://github.com/Irev-Dev/cadhub/discussions/212',
|
||||
},
|
||||
{
|
||||
name: 'Code of Conduct',
|
||||
url: '/policies/code-of-conduct',
|
||||
},
|
||||
{
|
||||
name: 'Privacy Policy',
|
||||
url: '/policies/privacy-policy',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
header: 'Learn',
|
||||
links: [
|
||||
{
|
||||
name: 'Documentation',
|
||||
url: 'https://learn.cadhub.xyz/',
|
||||
},
|
||||
{
|
||||
name: 'Blog',
|
||||
url: 'https://learn.cadhub.xyz/blog',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
header: 'Integrations',
|
||||
links: [
|
||||
{
|
||||
name: 'OpenSCAD',
|
||||
url: 'https://openscad.org/',
|
||||
},
|
||||
{
|
||||
name: 'CadQuery',
|
||||
url: 'https://cadquery.readthedocs.io/en/latest/',
|
||||
},
|
||||
{
|
||||
name: 'JSCAD',
|
||||
url: 'https://github.com/jscad',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto py-16 px-4 grid">
|
||||
<div className="pl-20 lg:pl-0">
|
||||
<div className="flex items-center">
|
||||
<div className="rounded-full overflow-hidden">
|
||||
<Svg className="w-10 md:w-16" name="favicon" />
|
||||
</div>
|
||||
<div className="ml-2 md:ml-8 flex">
|
||||
{/* Because of how specific these styles are to this heading/logo and it doesn't need to be replicated else where as well as it's very precise with the placement of "pre-alpha" I think it's appropriate. */}
|
||||
<h2
|
||||
className="text-indigo-300 text-2xl md:text-5xl font-ropa-sans py-1 md:tracking-wider"
|
||||
style={{ letterSpacing: '0.3em' }}
|
||||
>
|
||||
CadHub
|
||||
</h2>
|
||||
<div
|
||||
className="text-pink-400 text-sm font-bold font-ropa-sans hidden md:block"
|
||||
style={{ paddingBottom: '2rem', marginLeft: '-1.8rem' }}
|
||||
>
|
||||
pre-alpha
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-600 text-xl mt-12 max-w-xs">
|
||||
Built by{' '}
|
||||
<OutBound
|
||||
to="https://github.com/Irev-Dev/cadhub/graphs/contributors"
|
||||
className="font-bold"
|
||||
>
|
||||
16 contributors
|
||||
</OutBound>{' '}
|
||||
from around the world.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid sm:grid-cols-4 gap-4 flex-grow pl-20 row-start-2 lg:col-start-2 lg:row-start-1 mt-20 lg:mt-0">
|
||||
{section.map(({ header, links }) => (
|
||||
<ul
|
||||
className="text-ch-gray-300 font-fira-sans pt-8 sm:pt-0"
|
||||
key={header}
|
||||
>
|
||||
<li className="text-xl font-bold">{header}</li>
|
||||
{links.map(({ name, url }) => (
|
||||
<li className="text-lg mt-6 font-light" key={url}>
|
||||
<a href={url}>{name}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -8,20 +8,15 @@ const InputText = ({ type = 'text', className, name, validation }) => {
|
||||
} = useFormContext()
|
||||
return (
|
||||
<>
|
||||
<div className={getActiveClasses('relative inline-block', className)}>
|
||||
<div className={getActiveClasses('relative mt-5', className)}>
|
||||
<FieldError
|
||||
className="absolute -my-4 text-sm text-red-500 font-ropa-sans"
|
||||
className="absolute -my-5 text-sm text-red-500 font-ropa-sans"
|
||||
name={name}
|
||||
/>
|
||||
<div
|
||||
className={getActiveClasses(
|
||||
'absolute inset-0 mb-2 rounded bg-gray-200 shadow-inner',
|
||||
{ 'border border-red-500': errors[name] }
|
||||
)}
|
||||
/>
|
||||
<TextField
|
||||
className={getActiveClasses(
|
||||
'pl-2 pt-1 text-indigo-800 font-medium mb-px pb-px bg-transparent relative w-full'
|
||||
'text-ch-gray-300 rounded-none bg-ch-gray-600 border border-transparent focus:border-ch-gray-300 px-2 py-1 relative w-full',
|
||||
{ 'border border-red-600': errors[name] }
|
||||
)}
|
||||
name={name}
|
||||
readOnly={false}
|
||||
|
||||
@@ -55,8 +55,17 @@ const LoginModal = ({ open, onClose, shouldStartWithSignup = false }) => {
|
||||
}
|
||||
}
|
||||
return (
|
||||
<Dialog open={open} onClose={onClose} className={classes.root}>
|
||||
<div className="bg-gray-100 max-w-2xl rounded-lg shadow-lg">
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
className={classes.root}
|
||||
PaperProps={{
|
||||
style: {
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div className="bg-ch-gray-700 max-w-2xl rounded-lg shadow-lg text-ch-gray-300">
|
||||
<Tabs
|
||||
value={tab}
|
||||
onChange={onTabChange}
|
||||
@@ -89,8 +98,8 @@ const LoginModal = ({ open, onClose, shouldStartWithSignup = false }) => {
|
||||
|
||||
const Field = ({ name, type = 'text', validation }) => (
|
||||
<>
|
||||
<span className="capitalize text-gray-500 text-sm align-middle my-3">
|
||||
{name}:
|
||||
<span className="capitalize text-ch-gray-300 text-right text-sm align-middle my-3">
|
||||
{name}
|
||||
</span>
|
||||
<InputTextForm
|
||||
type={type}
|
||||
@@ -102,8 +111,8 @@ const Field = ({ name, type = 'text', validation }) => (
|
||||
)
|
||||
|
||||
const HeroButton = ({ text }) => (
|
||||
<Submit className="bg-texture bg-purple-800 py-6 w-full flex items-center justify-center rounded-b border border-indigo-300 border-opacity-0 hover:border-opacity-100 hover:shadow-xl">
|
||||
<span className="font-bold text-2xl text-indigo-200">{text}</span>
|
||||
<Submit className="bg-texture bg-ch-purple-400 bg-opacity-50 py-6 w-full flex items-center justify-center rounded-b border border-indigo-300 border-opacity-0 hover:bg-opacity-80 hover:shadow-xl">
|
||||
<span className="text-3xl text-ch-purple-600">{text}</span>
|
||||
</Submit>
|
||||
)
|
||||
|
||||
@@ -129,13 +138,14 @@ const SignInForm = ({ onSubmitSignIn }) => (
|
||||
type="password"
|
||||
validation={{ required: true }}
|
||||
/>
|
||||
<div></div>
|
||||
<Link
|
||||
to={routes.accountRecovery()}
|
||||
className="underline text-sm text-ch-gray-400 block mt-4"
|
||||
>
|
||||
forgot your password?
|
||||
</Link>
|
||||
</div>
|
||||
<Link
|
||||
to={routes.accountRecovery()}
|
||||
className="underline text-sm text-gray-500 block text-center"
|
||||
>
|
||||
forgot your password?
|
||||
</Link>
|
||||
</div>
|
||||
<HeroButton text="Sign In" />
|
||||
</Form>
|
||||
@@ -174,22 +184,25 @@ const SignUpForm = ({ onSubmitSignUp, checkBox, setCheckBox, onClose }) => (
|
||||
type="password"
|
||||
validation={{ required: true }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex pt-4">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="signup-toc"
|
||||
className="justify-self-end mr-2"
|
||||
checked={checkBox}
|
||||
onChange={() => setCheckBox(!checkBox)}
|
||||
/>{' '}
|
||||
<span className="pl-4 text-gray-500 text-sm max-w-sm">
|
||||
<label
|
||||
htmlFor="signup-toc"
|
||||
className="text-ch-gray-400 text-sm mt-4 cursor-pointer"
|
||||
>
|
||||
Stay up-to-date with CadHub's progress with the founder's (
|
||||
<OutBound className="underline" to="https://twitter.com/IrevDev">
|
||||
Kurt's
|
||||
</OutBound>
|
||||
) newsletter
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<span className="text-sm text-gray-500 block text-center pt-4">
|
||||
<span className="text-sm text-ch-gray-400 block text-center pt-4">
|
||||
Use of CadHub requires you to abide by our{' '}
|
||||
<Link
|
||||
onClick={onClose}
|
||||
|
||||
@@ -1,39 +1,60 @@
|
||||
import { Link, routes } from '@redwoodjs/router'
|
||||
import Svg from 'src/components/Svg/Svg'
|
||||
import { Popover } from '@headlessui/react'
|
||||
import type { CadPackageType } from 'src/components/CadPackage/CadPackage'
|
||||
import { CadPackageType } from 'src/components/CadPackage/CadPackage'
|
||||
|
||||
const menuOptions: {
|
||||
name: string
|
||||
sub: string
|
||||
dotClasses: string
|
||||
bgClasses: string
|
||||
ideType: CadPackageType
|
||||
}[] = [
|
||||
{
|
||||
name: 'OpenSCAD',
|
||||
sub: 'beta',
|
||||
bgClasses: 'bg-yellow-800',
|
||||
dotClasses: 'bg-yellow-200',
|
||||
ideType: 'openscad',
|
||||
},
|
||||
{ name: 'CadQuery', sub: 'beta', ideType: 'cadquery' },
|
||||
// { name: 'JSCAD', sub: 'alpha', ideType: 'jscad' }, // TODO #422, add jscad to db schema when were ready to enable saving of jscad projects
|
||||
{
|
||||
name: 'CadQuery',
|
||||
sub: 'beta',
|
||||
bgClasses: 'bg-ch-blue-700',
|
||||
dotClasses: 'bg-blue-800',
|
||||
ideType: 'cadquery',
|
||||
},
|
||||
{
|
||||
name: 'JSCAD',
|
||||
sub: 'beta',
|
||||
bgClasses: 'bg-ch-purple-500',
|
||||
dotClasses: 'bg-yellow-300',
|
||||
ideType: 'jscad',
|
||||
},
|
||||
]
|
||||
|
||||
const NavPlusButton: React.FC = () => {
|
||||
return (
|
||||
<Popover className="relative outline-none w-full h-full">
|
||||
<Popover.Button className="h-full w-full outline-none hover:bg-ch-gray-550 border rounded-full">
|
||||
<Svg name="plus" className="text-gray-200" />
|
||||
<Popover.Button className="h-full w-full outline-none hover:bg-ch-gray-550 border-ch-gray-400 border-2 rounded-full">
|
||||
<Svg name="plus" className="text-ch-gray-300" />
|
||||
</Popover.Button>
|
||||
|
||||
<Popover.Panel className="absolute z-10 right-0">
|
||||
<ul className="bg-gray-200 mt-4 rounded shadow-md overflow-hidden">
|
||||
{menuOptions.map(({ name, sub, ideType }) => (
|
||||
<Popover.Panel className="absolute z-10 right-0 bg-ch-gray-700 mt-4 px-3 py-2 rounded shadow-md overflow-hidden text-ch-gray-300">
|
||||
<p className="text-lg">New Project</p>
|
||||
<ul className="">
|
||||
{menuOptions.map(({ name, sub, ideType, bgClasses, dotClasses }) => (
|
||||
<li
|
||||
key={name}
|
||||
className="px-4 py-2 hover:bg-gray-400 text-gray-800"
|
||||
className={
|
||||
bgClasses +
|
||||
' px-4 py-1 my-4 bg-opacity-30 hover:bg-opacity-70 grid grid-flow-col-dense items-center gap-2'
|
||||
}
|
||||
>
|
||||
<div className={dotClasses + ' w-5 h-5 rounded-full'}></div>
|
||||
<Link to={routes.draftProject({ cadPackage: ideType })}>
|
||||
<div>{name}</div>
|
||||
<div className="text-xs text-gray-600 font-light">{sub}</div>
|
||||
<div className="text-xs text-ch-gray-400 font-light">{sub}</div>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
|
||||
@@ -5,9 +5,8 @@ import ReactGA from 'react-ga'
|
||||
import Popover from '@material-ui/core/Popover'
|
||||
|
||||
import useUser from 'src/helpers/hooks/useUser'
|
||||
import ImageUploader from 'src/components/ImageUploader'
|
||||
import LoginModal from 'src/components/LoginModal'
|
||||
import Gravatar from 'src/components//Gravatar/Gravatar'
|
||||
import Gravatar from 'src/components/Gravatar/Gravatar'
|
||||
|
||||
const ProfileSlashLogin = () => {
|
||||
const { logOut, isAuthenticated, currentUser, client } = useAuth()
|
||||
|
||||
59
app/web/src/components/ProjectCard/ProjectCard.tsx
Normal file
59
app/web/src/components/ProjectCard/ProjectCard.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import { Link, routes } from '@redwoodjs/router'
|
||||
import Svg from 'src/components/Svg/Svg'
|
||||
import CadPackage from 'src/components/CadPackage/CadPackage'
|
||||
|
||||
import { countEmotes } from 'src/helpers/emote'
|
||||
import ImageUploader from 'src/components/ImageUploader'
|
||||
|
||||
const ProjectCard = ({ title, mainImage, user, Reaction, cadPackage }) => (
|
||||
<li
|
||||
className="rounded p-1.5 bg-ch-gray-760 shadow-ch"
|
||||
key={`${user?.userName}--${title}`}
|
||||
>
|
||||
<Link
|
||||
to={routes.project({
|
||||
userName: user?.userName,
|
||||
projectTitle: title,
|
||||
})}
|
||||
>
|
||||
<div className="relative">
|
||||
<ImageUploader
|
||||
className="rounded"
|
||||
aspectRatio={1.4}
|
||||
imageUrl={mainImage}
|
||||
width={700}
|
||||
/>
|
||||
<CadPackage
|
||||
cadPackage={cadPackage}
|
||||
className="absolute right-0 top-0 p-1.5 rounded-bl text-sm bg-opacity-50"
|
||||
dotClass="w-3 h-3"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center mt-1">
|
||||
<div className="w-8 h-8 overflow-hidden rounded-full border border-ch-gray-300 shadow">
|
||||
<ImageUploader
|
||||
className=""
|
||||
aspectRatio={1}
|
||||
imageUrl={user?.image}
|
||||
width={50}
|
||||
/>
|
||||
</div>
|
||||
<div className="ml-3 text-lg text-ch-gray-300 font-fira-sans">
|
||||
<div className="">{title}</div>
|
||||
<div className="text-sm">{user?.userName}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-flow-col-dense gap-2 justify-start mt-1.5">
|
||||
<div className="px-2 flex items-center bg-ch-gray-600 text-ch-gray-300 rounded-sm">
|
||||
<Svg name="reactions" className="w-4 mr-2" />
|
||||
{countEmotes(Reaction).reduce((prev, { count }) => prev + count, 0)}
|
||||
</div>
|
||||
<div className="px-2 flex items-center bg-ch-blue-650 bg-opacity-30 text-ch-gray-300 rounded-sm">
|
||||
<Svg name="fork-new" className="w-4 mr-2" />0
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
|
||||
export default ProjectCard
|
||||
@@ -5,10 +5,12 @@ import CadPackage from 'src/components/CadPackage/CadPackage'
|
||||
|
||||
import { countEmotes } from 'src/helpers/emote'
|
||||
import ImageUploader from 'src/components/ImageUploader'
|
||||
import ProjectCard from 'src/components/ProjectCard/ProjectCard'
|
||||
|
||||
const ProjectsList = ({
|
||||
projects,
|
||||
shouldFilterProjectsWithoutImage = false,
|
||||
projectLimit = 80,
|
||||
}) => {
|
||||
// temporary filtering projects that don't have images until some kind of search is added and there are more things on the website
|
||||
// it helps avoid the look of the website just being filled with dumby data.
|
||||
@@ -18,7 +20,9 @@ const ProjectsList = ({
|
||||
const filteredProjects = useMemo(
|
||||
() =>
|
||||
(shouldFilterProjectsWithoutImage
|
||||
? projects.filter(({ mainImage }) => mainImage)
|
||||
? projects
|
||||
.filter(({ mainImage }) => mainImage)
|
||||
.slice(0, projectLimit || 80)
|
||||
: [...projects]
|
||||
)
|
||||
// sort should probably be done on the service, but the filtering is temp too
|
||||
@@ -30,64 +34,21 @@ const ProjectsList = ({
|
||||
)
|
||||
|
||||
return (
|
||||
<section className="max-w-6xl mx-auto">
|
||||
<section className="max-w-7xl mx-auto">
|
||||
<ul
|
||||
className="grid gap-x-8 gap-y-12 items-center mx-4 relative"
|
||||
className="grid gap-x-8 gap-y-8 items-center mx-4 relative"
|
||||
style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(16rem, 1fr))' }}
|
||||
>
|
||||
{filteredProjects.map(
|
||||
({ title, mainImage, user, Reaction, cadPackage }) => (
|
||||
<li
|
||||
className="rounded p-1.5 bg-ch-gray-760 shadow-ch"
|
||||
key={`${user?.userName}--${title}`}
|
||||
>
|
||||
<Link
|
||||
to={routes.project({
|
||||
userName: user?.userName,
|
||||
projectTitle: title,
|
||||
})}
|
||||
>
|
||||
<div className="relative">
|
||||
<ImageUploader
|
||||
className="rounded"
|
||||
aspectRatio={1.4}
|
||||
imageUrl={mainImage}
|
||||
width={700}
|
||||
/>
|
||||
<CadPackage
|
||||
cadPackage={cadPackage}
|
||||
className="absolute right-0 top-0 p-1.5 rounded-bl text-sm bg-opacity-50"
|
||||
dotClass="w-3 h-3"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center mt-1">
|
||||
<div className="w-8 h-8 overflow-hidden rounded-full border border-ch-gray-300 shadow">
|
||||
<ImageUploader
|
||||
className=""
|
||||
aspectRatio={1}
|
||||
imageUrl={user?.image}
|
||||
width={50}
|
||||
/>
|
||||
</div>
|
||||
<div className="ml-3 text-lg text-ch-gray-300 font-fira-sans">
|
||||
<div className="">{title}</div>
|
||||
<div className="text-sm">{user?.userName}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-flow-col-dense gap-2 justify-start mt-1.5">
|
||||
<div className="px-2 flex items-center bg-ch-gray-600 text-ch-gray-300 rounded-sm">
|
||||
<Svg name="reactions" className="w-4 mr-2" />
|
||||
{countEmotes(Reaction).reduce(
|
||||
(prev, { count }) => prev + count,
|
||||
0
|
||||
)}
|
||||
</div>
|
||||
<div className="px-2 flex items-center bg-ch-blue-650 bg-opacity-30 text-ch-gray-300 rounded-sm">
|
||||
<Svg name="fork-new" className="w-4 mr-2" />0
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
({ title, mainImage, user, Reaction, cadPackage }, index) => (
|
||||
<ProjectCard
|
||||
key={index}
|
||||
title={title}
|
||||
mainImage={mainImage}
|
||||
user={user}
|
||||
Reaction={Reaction}
|
||||
cadPackage={cadPackage}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</ul>
|
||||
|
||||
@@ -37,12 +37,13 @@ export const Empty = () => {
|
||||
|
||||
export const Success = ({
|
||||
projects,
|
||||
variables: { shouldFilterProjectsWithoutImage },
|
||||
variables: { shouldFilterProjectsWithoutImage, projectLimit },
|
||||
}) => {
|
||||
return (
|
||||
<Projects
|
||||
projects={projects}
|
||||
shouldFilterProjectsWithoutImage={shouldFilterProjectsWithoutImage}
|
||||
projectLimit={projectLimit}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ export type SvgNames =
|
||||
| 'arrow-down'
|
||||
// | 'arrow'
|
||||
| 'arrow-left'
|
||||
| 'arrow-right'
|
||||
| 'camera'
|
||||
| 'check'
|
||||
| 'chevron-down'
|
||||
@@ -74,6 +75,22 @@ const Svg = ({
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
'arrow-right': (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M14 5l7 7m0 0l-7 7m7-7H3"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
camera: (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 21">
|
||||
<path
|
||||
|
||||
Reference in New Issue
Block a user