Update landing page and other tweaks

This commit is contained in:
Kurt Hutten
2021-04-30 07:12:28 +10:00
parent 6c39c4f5a7
commit b9fec2a175
5 changed files with 131 additions and 84 deletions

View File

@@ -12,9 +12,6 @@ tags: []
<img src="https://raw.githubusercontent.com/Irev-Dev/repo-images/main/images/CURATED-CODE-CAD-BANNER2.jpg" />
### [See the web page version](https://kurthutten.com/blog/curated-code-cad/)
## What is Code-CAD?
It's software that allows you to define 3D CAD models with code. It's a niche popular amongst software devs for obvious reasons — it gives you parametric models almost by default and it's easy to maintain and extend models within a team over time when paired with git. The coding nature of it allows teams to build their own abstraction for re-use and quick prototyping. The [Cadhub](https://cadhub.xyz/) homepage has a good breakdown of the potential of the Code-CAD paradigm. Code-CAD is not to be confused with 3d geometry libraries, Code-CAD instead has opinionated abstractions for quickly developing mechanical parts.

View File

@@ -91,7 +91,7 @@ The beauty of this is two fold,
1) We have now given lots of context about what value of `5` actually means, that it relates to the pivot radius and
2) if we ever what to change this value it's easy to just change the first line and the rest will update, for example we can more than double the value and the model stays cohesive, here it is with `pivotRadius=11;`
<Image img={bigRadius} style={{backgroundSize: 'contain'}} />
<Image img={bigRadius} style={{backgroundSize: 'contain', marginBottom: '1rem'}} />
Let's clean up the rest of the magic numbers.

View File

@@ -2,8 +2,6 @@
title: Why OpenSCAD
---
## Code CAD
OpenSCAD is a Code-CAD, which means models are made from a code script rather than from a series of clicks in a user interface.
If you want an un-bias opinion on if this is a good paradigm you'll have to look elsewhere because CadHub are massive advocates for it.

View File

@@ -1,7 +1,7 @@
/** @type {import('@docusaurus/types').DocusaurusConfig} */
module.exports = {
title: 'CadHub',
tagline: 'Pushing the advent of CodeCad',
tagline: '',
url: 'https://your-docusaurus-test-site.com',
baseUrl: '/',
onBrokenLinks: 'throw',
@@ -12,9 +12,9 @@ module.exports = {
plugins: ['@docusaurus/plugin-ideal-image', 'docusaurus-tailwindcss-loader'],
themeConfig: {
navbar: {
title: 'My Site',
title: 'CadHub',
logo: {
alt: 'My Site Logo',
alt: 'CadHub Logo',
src: 'img/logo.svg',
},
items: [

View File

@@ -1,95 +1,147 @@
import React from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';
import styles from './styles.module.css';
const features = [
{
title: 'Easy to Use',
imageUrl: 'img/undraw_docusaurus_mountain.svg',
description: (
<>
Docusaurus was designed from the ground up to be easily installed and
used to get your website up and running quickly.
</>
),
},
{
title: 'Focus on What Matters',
imageUrl: 'img/undraw_docusaurus_tree.svg',
description: (
<>
Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
ahead and move your docs into the <code>docs</code> directory.
</>
),
},
{
title: 'Powered by React',
imageUrl: 'img/undraw_docusaurus_react.svg',
description: (
<>
Extend or customize your website layout by reusing React. Docusaurus can
be extended while reusing the same header and footer.
</>
),
},
];
function Feature({imageUrl, title, description}) {
const imgUrl = useBaseUrl(imageUrl);
return (
<div className={clsx('col col--4', styles.feature)}>
{imgUrl && (
<div className="text--center">
<img className={styles.featureImage} src={imgUrl} alt={title} />
</div>
)}
<h3>{title}</h3>
<p>{description}</p>
</div>
);
}
import React from 'react'
import clsx from 'clsx'
import Layout from '@theme/Layout'
import Link from '@docusaurus/Link'
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
import useBaseUrl from '@docusaurus/useBaseUrl'
import styles from './styles.module.css'
export default function Home() {
const context = useDocusaurusContext();
const {siteConfig = {}} = context;
const context = useDocusaurusContext()
const { siteConfig = {} } = context
return (
<Layout
title={`Hello from ${siteConfig.title}`}
description="Description will go into a meta tag in <head />">
<header className={clsx('hero hero--primary', styles.heroBanner)}>
description="Description will go into a meta tag in <head />"
>
<header className={clsx('bg-pink-100', styles.heroBanner)}>
<div className="container">
<h1 className="hero__title">{siteConfig.title}</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
<h1 className="font-ropa-sans text-6xl pb-8 text-indigo-600">
{siteConfig.title}
</h1>
<p className="font-ropa-sans text-indigo-700 max-w-3xl mx-auto text-lg">
Cadhub is a community hub for Code-CAD projects aiming to push the
paradigm forward.
</p>
<p className="font-ropa-sans text-indigo-700 max-w-3xl mx-auto text-lg">
Code-CAD is the premier way to design parts, it fits into
software-dev work-flow and is right level of abstraction having,
parts defined as auditable scripts.
</p>
<p className="font-ropa-sans text-indigo-700 max-w-3xl mx-auto text-lg pb-6">
We have beta integrations with OpenSCAD and CadQuery. The best way
to learn more is to:
</p>
<div className={styles.buttons}>
<Link
className={clsx(
'button button--outline button--secondary button--lg',
styles.getStarted,
'font-mono border-indigo-100 border rounded-md py-2 px-4 bg-pink-200 text-indigo-800 font-bold shadow hover:shadow-md',
styles.getStarted
)}
to={useBaseUrl('docs/')}>
to={useBaseUrl('docs/')}
>
Get Started
</Link>
</div>
</div>
</header>
<main>
{features && features.length > 0 && (
<section className={styles.features}>
<div className="container">
<div className="row">
{features.map((props, idx) => (
<Feature key={idx} {...props} />
))}
<div className="max-w-6xl mx-auto px-2 pb-32">
<h2 className="text-indigo-700 text-5xl font-roboto my-16 tracking-widest font-light">
What's the potential of code-cad?
</h2>
<MarketingPoint
leadingPoint="Communication"
title="Tech-drawing and CAD as communication medium"
>
<p className="max-w-2xl">
Have you ever started frantically reaching for a pen when trying
to explain an idea?
</p>
<p className="pt-4">
Engineers love drawings and CAD extends that, though now
communicating with machines is just as important as with
colleagues. What better way to do that than with a deterministic,
expressive and auditable script?
</p>
</MarketingPoint>
<div className="mt-24">
<div className="text-2xl text-pink-400 font-bold tracking-widest">
Extensible
</div>
<h3 className="text-indigo-700 text-4xl mt-4">
If <span className="line-through">it bleeds</span> it's text, we
can <span className="line-through">kill</span> hack it
</h3>
<div className="text-gray-600 max-w-3xl text-2xl font-light mt-4">
<ul className="list-disc pl-6">
<li>Build your own helper functions and abstractions</li>
<li>
Trigger{' '}
<a href="https://en.wikipedia.org/wiki/Finite_element_method">
FEM
</a>{' '}
or regenerate tool paths with a{' '}
<a href="https://www.redhat.com/en/topics/devops/what-is-ci-cd">
CI/CD
</a>{' '}
process
</li>
<li>
Auto-generate a{' '}
<a href="https://en.wikipedia.org/wiki/Bill_of_materials">
BOM
</a>
</li>
<li>
Integrate it into your{' '}
<a href="https://www.ptc.com/en/technologies/plm">PLM</a>{' '}
tools
</li>
</ul>
</div>
</div>
</section>
)}
<MarketingPoint
leadingPoint="Git Good"
title="All of the benefits of version control"
>
<p>
Team coordination doesn't get any better than git. Multiple people
working on a complex assembly without treading on each other --
what else is there to say?
</p>
</MarketingPoint>
<MarketingPoint
leadingPoint="Rise of the developer"
title="Leverage a growing industry"
>
<p>
Software is taking over the world, and so are developers. In the
U.S. developers are 1.4M strong and are predicted to increase
their{' '}
<a href="https://www.bls.gov/ooh/computer-and-information-technology/software-developers.htm">
ranks by 22%
</a>{' '}
over the next 10 years. As coders proliferate, so will the number
of areas in which they operate, including CAD.
</p>
</MarketingPoint>
</div>
</main>
</Layout>
);
)
}
function MarketingPoint({ leadingPoint, title, children }) {
return (
<div className="mt-24">
<div className="text-2xl text-pink-400 font-bold tracking-widest">
{leadingPoint}
</div>
<h3 className="text-indigo-700 text-4xl mt-4">{title}</h3>
<div className="text-gray-600 max-w-3xl text-2xl font-light mt-4">
{children}
</div>
</div>
)
}