Merge pull request #286 from Irev-Dev/kurt/259

Add docs to subdomain
This commit was merged in pull request #286.
This commit is contained in:
Kurt Hutten
2021-04-30 16:27:10 +10:00
committed by GitHub
69 changed files with 5421 additions and 118 deletions

20
docs/.gitignore vendored Normal file
View File

@@ -0,0 +1,20 @@
# Dependencies
/node_modules
# Production
/build
# Generated files
.docusaurus
.cache-loader
# Misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

33
docs/README.md Normal file
View File

@@ -0,0 +1,33 @@
# Website
This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.
## Installation
```console
yarn install
```
## Local Development
```console
yarn start
```
This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
## Build
```console
yarn build
```
This command generates static content into the `build` directory and can be served using any static contents hosting service.
## Deployment
```console
GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
```
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

3
docs/babel.config.js Normal file
View File

@@ -0,0 +1,3 @@
module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
};

View File

@@ -0,0 +1,292 @@
---
slug: curated-code-cad
title: Curated Code CAD
author: Kurt Hutten
author_title: CadHub Core Team
author_url: https://github.com/Irev-Dev
author_image_url: https://avatars.githubusercontent.com/u/29681384?v=4
tags: []
---
# Curated Code Cad ⚙️ 👩‍🔧
<img src="https://raw.githubusercontent.com/Irev-Dev/repo-images/main/images/CURATED-CODE-CAD-BANNER2.jpg" />
## 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.
## Which one should you use?
I recommend reading through the entire list below to see if one chimes with you and your needs, beyond that I can make the following recommendation and points:
<!--truncate-->
- My main recommendation is to use one of the packages that wrap OpenCascade (a mature C++ CAD library). Packages that do so are CadQuery, CascadeStudio, DeclaraCAD and pythonOCC. My reasons for recommending these are as follows:
- Most of Code-CAD tools are plagued with a CSG mindset (that is unions, subtractions and intersections of primitive shapes; cubes spheres etc). This is an inherently limited paradigm (one simple example of this is how internal fillets, which are important for reducing stress concentrations in parts, become very difficult). While CadQuery, CascadeStudio, DeclaraCAD and pythonOCC still offer CSG functionality, you're also able to move beyond it with concepts like lofts and sweeps.
- OpenCascade uses a B-rep (boundary representation) kernel, In my opinion, this means you'll be learning a future-proof tool that won't limit the types of applications you can model for, which is likely the case for mesh kernels, which will cause trouble in for some applications like optics and injection moulding.
- OpenSCAD is tried and true, with lots of examples and tutorials floating around the internet. It also has a very intuitive syntax that many people without prior programming experience have been able to quickly pick up. However, some reasons you might want to look elsewhere are:
- It can be hard to build powerful abstractions since they've rolled their own language. Consequences of this include that it doesn't have a package manager like many modern languages, and the presence of quirks with the language, such as function definitions that aren't ergonomic.
- Performance can start to suffer with complex parts.
- Its mesh-based kernel has limitations if you want to move beyond 3d-printed parts.
- Check out the birdhouse example, while anecdotal, seeing the same part made with three different tools might help you decide which syntax you like the most.
- You might want to simply pick a tool based on your language of choice. Clojure, enaml, Go, Haskell, Lisp, Javascript and Python are all represented below.
- If you want to make 3D art, Curv is specifically trying to hit that niche.
No matter which one is your tool of choice, if you're here and you love Code-CAD and you'll want to checkout [Cadhub](https://cadhub.xyz/). Think of it as Codepen crossed with a thing repository, and it's our love letter to the Maker community. Currently, CascadeStudio is the only Code-CAD integration, but we're working on more. [Site](https://cadhub.xyz/), [repo](https://github.com/Irev-Dev/cadhub).
## Special mention
### [OpenScad](http://www.openscad.org/)
- [Repo](https://github.com/openscad/openscad)
- [Community](http://www.openscad.org/community.html)
- [Docs](http://www.openscad.org/documentation.html)
- License: GPL-2
- ~~Online editor~~
The rest of the packages are in alphabetical order, but OpenScad gets a special mention because it's the OG. Many of the projects below were inspired by OpenScad and is the most well-known choice. If you're new to code-cad this is the safest choice. The syntax is easy to pick up and there lots of guides around the internet.
### [OpenCascade](https://www.opencascade.com/)
- [Repo](https://github.com/tpaviot/oce)
- [Community](https://dev.opencascade.org/)
- [Docs](https://old.opencascade.com/doc/occt-6.9.1/refman/html/index.html)
- License: LGPL-2.1
- ~~Online editor~~
It's a c++ library that a number the projects below wrap. OpenCascade uses a Boundary representation (B-rep) kernel, which is a powerful way representing solid geometry, this is a point of difference for some many of the other projects that use a polygon mesh.
## Contributing
There are a couple of ways you can help:
- Know of a package that we missed? tell us with an issue or open up a PR.
- Contribute a birdhouse design in one of the tools that are missing.
- Do you think we missed an important point for one of the projects, suggest more details.
## Here they are:
### [AngelCAD](https://arnholm.github.io/angelcad-docs/)
- [Repo](https://github.com/arnholm/angelcad)
- [Community](https://forum.abmesh.com/index.php)
- [Docs](https://arnholm.github.io/angelcad-docs/)
- License: GPL-2 or GPL-3
- ~~Online editor~~
AngelCAD aim to do two things:
1) Offer an embedded, but general-purpose scripting language for Constructive Solid Geometry, via [AngelScript](https://www.angelcode.com/angelscript/). This allows for a natural programming style with true variables, user-defined functions and even classes. Programmers should feel at home. See [AngelCAD sample scripts](https://github.com/arnholm/angelcad-samples).
2) Offer a fast boolean engine, which is powered by [Carve](https://github.com/arnholm/carve) is used for this purpose. This means that AngelCAD is generally many times faster than other mesh-based systems.
AngelCAD is capable of running OpenSCAD script for interoperability and has features like text support and DXF import coming soon.
### [bitbybit](https://bitbybit.dev/home)
- [Repo](https://github.com/bitbybit-dev/bitbybit)
- [Community](https://discord.com/invite/GSe3VMe)
- [Docs](https://docs.bitbybit.dev/)
- License: MIT
- [Online editor](https://bitbybit.dev/app)
bitbybit is both a node editor and Code-CAD as they have exposed a [typescript](https://medium.com/@bitbybit/v0-3-0-release-typescript-in-monaco-editor-for-bit-by-bit-developers-46bcb1a3b91) interface that can be used in their app.
### [CadHub](https://cadhub.xyz/)
- [Repo](https://github.com/Irev-Dev/cadhub)
- [Community](https://discord.com/invite/SD7zFRNjGH)
- ~~Docs~~
- License: GPL-3
- [Online editor](https://cadhub.xyz/)
A community hub for sharing code-cad projects. Currently integrates with the excellent [CascadeStudio](https://zalo.github.io/CascadeStudio/). Built and maintained by yours truly.
### [CadQuery](https://cadquery.readthedocs.io/en/latest/intro.html)
- [Repo](https://github.com/CadQuery/cadquery)
- [Community](https://discord.gg/qz3uAdF)
- [Docs](https://cadquery.readthedocs.io/en/latest/intro.html)
- License: Apache, 2.0
- ~~Online editor~~
CadQuery is a Python library that wraps and extends [OpenCascade](https://github.com/tpaviot/oce). It has a philosophy of capturing design intent. The API has been designed to be as close as possible to how youd describe the object to a human. An example of this is its ability to "select" parts of the model's geometry to run operations on, such as the following code that selects only the edges running along the Z-axis and fillets them.
```python
result = cq.Workplane("XY" ).box(3, 3, 0.5).edges("|Z").fillet(0.125)
```
![z edge select example](https://raw.githubusercontent.com/Irev-Dev/repo-images/main/images/Z-edge-select.png)
### [CascadeStudio](https://zalo.github.io/CascadeStudio/)
- [Repo](https://github.com/zalo/CascadeStudio)
- [Community](https://github.com/zalo/CascadeStudio/discussions)
- ~~Docs~~
- License: MIT
- [Online editor](https://zalo.github.io/CascadeStudio/)
A javascript wrapper for [OpenCascade](https://github.com/tpaviot/oce) that runs in the browser. (OpenCascade can run in the browser when compiled to web-assembly). [CadHub](https://cadhub.xyz/) integrates with CascadeStudio.
### [Curv](http://www.curv3d.org/)
- [Repo](https://github.com/curv3d/curv)
- [Community](https://groups.google.com/d/forum/curv) (mailing list)
- [Docs](https://github.com/curv3d/curv/tree/master/docs)
- License: Apache, 2.0
- ~~Online editor~~
Curv is a programming language for creating art using mathematics. Its a 2D and 3D geometric modelling tool that supports full colour, animation and 3D printing. It was inspired by OpenScad and [shadertoy](https://www.shadertoy.com/).
### [DeclaraCAD](https://declaracad.com/)
- [Repo](https://github.com/codelv/declaracad)
- ~~Community~~
- [Docs](https://declaracad.com/docs/introduction/)
- License: GPL-3
- ~~Online editor~~
A declarative parametric 3D modelling program built using [OpenCASCADE](https://github.com/LaughlinResearch/pyOCCT)
and [enaml](https://github.com/nucleic/enaml/).
### [FreeCAD](https://www.freecadweb.org/)
- [Repo](https://github.com/FreeCAD/FreeCAD)
- [Community](https://forum.freecadweb.org/)
- [Docs](https://wiki.freecadweb.org/Getting_started)
- License: LGPLv2
- ~~Online editor~~
FreeCad is a more traditional CAD package that supports python scripting, Both for modelling as well as controlling the FreeCAD GUI itself. Not only that it has a built in [OpenScad workbench](https://wiki.freecadweb.org/OpenSCAD_Module) as well as an external [CadQuery workbench](https://wiki.freecadweb.org/CadQuery_Workbench), making it the best in this list at interoperability. FreeCAD uses OpenCascade under-the-hood.
### [ImplicitCAD](http://www.implicitcad.org/)
- [Repo](https://github.com/colah/ImplicitCAD)
- ~~Community~~
- [Docs](http://www.implicitcad.org/docs/tutorial)
- License: AGPL-3
- [Online editor](http://www.implicitcad.org/editor)
Inspired by OpenScad with a very similar language, implemented in Haskell and includes the ability to write definitions in Haskell, instead of just OpenSCAD, and is part of an 'almost stack' of tools including ExplicitCAD (for a GUI), and HSlice (for an STL slicer).
### [JSCAD](http://www.jscad.xyz/)
- [Repo](https://github.com/jscad/OpenJSCAD.org)
- [Community](https://openjscad.nodebb.com/)
- [Docs](https://openjscad.org/dokuwiki/doku.php?id=jscad_quick_reference)
- License: MIT
- [Online editor](https://openjscad.org/)
JSCAD (formally know as OpenJSCAD) provides a programmers approach to develop 3D models. In particular, this functionality is tuned towards creating precise models for 3D printing.
JSCAD provides the ability to:
- Create and manipulate 3D models, as well as 2D models
- Use JavaScript programming concepts, and libraries
- Save 3D models as STL (and other) formats
JSCAD is available as a:
- [Website](https://www.jscad.xyz/)
- Command line application for backend processing
- User application
- Set of packages (libraries) for building custom applications
JSCAD allows anyone to create 3D (or 2D) designs by combining simple shapes. And any shape can be rotated, moved, scaled, etc. Complex shapes can be saved as parts, which can used later. And the final design can be exported into various standard formats, i.e. STL, DXF, SVG, etc.
### [libfive](https://libfive.com/)
- [Repo](https://github.com/libfive/libfive)
- [Community](https://github.com/libfive/libfive/issues) (Github Issues)
- [Docs](https://libfive.com/examples/)
- License: Mozilla Public License 2.0 and GPL-2 or later
- ~~Online editor~~
Libfive is a software library and set of tools for solid modelling, especially suited for parametric and procedural design. Lisp based language, (so (you (((((can expect ) lots of parentheses))))).
### [pythonOCC](http://www.pythonocc.org/)
- [Repo](https://github.com/tpaviot/pythonocc-core)
- ~~Community~~
- [Docs](http://www.pythonocc.org/category/documentation/)
- License: LGPL-3
- [Online editor](https://mybinder.org/v2/gh/tpaviot/pythonocc-binderhub/7.4.0)
Python-based, Also uses [OpenCascade](https://github.com/tpaviot/oce).
### [RapCAD](https://gilesbathgate.com/category/rapcad/)
- [Repo](https://github.com/GilesBathgate/RapCAD)
- ~~Community~~
- ~~Docs~~
- License: GPL-3
- ~~Online editor~~
Another project inspired by OpenScad. The author considers key differences to be procedural vs functional programming language style, (i.e variables can be modified) and the use of arbitrary precision arithmetic throughout (meaning there are no unexpected double/float rounding errors). There is a handy [feature matrix](https://github.com/GilesBathgate/RapCAD/blob/master/doc/feature_matrix.asciidoc) between RapCAD, OpenScad and ImplicitCad.
### [scad-clj](https://github.com/farrellm/scad-clj)
- [Repo](https://github.com/farrellm/scad-clj)
- ~~Community~~
- ~~Docs~~ (No docs but mirrors openscad functions)
- License: EPL-1.0
- ~~Online editor~~
OpenSCAD DSL in Clojure. Functions generally mirror OpenSCAD, with a couple of notable exceptions.
### [scad-hs](https://github.com/farrellm/scad-hs)
- [Repo](https://github.com/farrellm/scad-hs)
- ~~Community~~
- ~~Docs~~ (No docs but mirrors openscad functions)
- License: BSD-3-Clause License
- ~~Online editor~~
Same author as scad-cji, he likes functional programming languages clearly.
### [sdfx](https://github.com/deadsy/sdfx)
- [Repo](https://github.com/deadsy/sdfx)
- [Community](https://github.com/deadsy/sdfx/issues)
- [Docs](https://godoc.org/github.com/deadsy/sdfx/sdf)
- License: MIT
- ~~Online editor~~
Go-based Code-CAD package that uses a signed distance functions (SDFs) kernel. Is capable of doing fillets and chamfering. The repo includes a [standard-library](https://github.com/deadsy/sdfx/tree/master/obj).
### [SolidPython](https://solidpython.readthedocs.io/en/latest/)
- [Repo](https://github.com/SolidCode/SolidPython)
- ~~Community~~
- [Docs](https://solidpython.readthedocs.io/en/latest/)
- License: GPL-2 or later
- ~~Online editor~~
Python-based library that wraps OpenScad, i.e. it outputs OpenScad code.
### [Tovero](https://www.gitlab.com/kavalogic-inc/tovero)
- [Repo](https://www.gitlab.com/kavalogic-inc/tovero)
- [Community](https://gitlab.com/kavalogic-inc/tovero/-/issues) (Gitlab Issues)
- [Docs](https://gitlab.com/kavalogic-inc/tovero/-/blob/master/README)
- License: LGPL-2.1 or later and GPL-2 or later
- ~~Online editor~~
Tovero is a binding of Libfive to Common Lisp, including a standalone REPL-based viewer. Tovero can be integrated with [Clive](https://www.gitlab.com/kavalogic-inc/clive), a Common Lisp scene graph and 3D GUI, to build more complex modelling applications.
## Node editors / other
Not quiet Code-Cad, but they do embody much of the same thought process.
### [BlocksCAD](https://www.blockscad3d.com)
Looks to be unmaintained.
- [Repo](https://github.com/einsteinsworkshop/blockscad)
- [Community](https://www.blockscad3d.com)
- [Docs](https://www.blockscad3d.com/training-resources)
- License: GPL-3
- [Online editor](https://www.blockscad3d.com)
### [Dynamo](https://github.com/infeeeee/DynFreeCAD)
- [Repo](https://github.com/DynamoDS/Dynamo)
- [Community](https://forum.dynamobim.com/)
- [Docs](https://primer.dynamobim.org/)
- License: Apache 2.0
- ~~Online editor~~
Dynamo is, quite literally, what you make it. Working with Dynamo may include using the application, either in connection with other Autodesk software or not, engaging a Visual Programming process, or participating in a broad community of users and contributors. Works with [FreeCad](https://github.com/infeeeee/DynFreeCAD)
### [MakeCode](https://makecode.buildbee.com/)
- [Repo](https://github.com/buildbee/makecode)
- ~~Community~~
- [Docs](https://makecode.buildbee.com/) (tutorials)
- License: MIT
- [Online editor](https://makecode.buildbee.com/)
MakeCode's block editor supplies many great deal of helpers that make it perfect for making functional 3d prints, for example, there are functions that help stack and layout parts, as well as fillet utils (called styled edges). It also has a fast hull function (called wrap shapes). MakeCode is sponsored by [BuildBee]( https://buildbee.com).
### [Sverchok](https://github.com/nortikin/sverchok)
- [Repo](https://github.com/nortikin/sverchok)
- ~~Community~~
- [Docs](http://nikitron.cc.ua/sverch/html/main.html)
- License: GPL-3
- ~~Online editor~~
Add-on for blender. Sverchok is a powerful parametric tool for architects, allowing geometry to be programmed visually with nodes.

View File

@@ -0,0 +1,113 @@
---
title: Adding Clearances
---
import Image from '@theme/IdealImage';
import pivotGap from '../../static/img/openscad-tutorial/pivot-gap.png';
import clearancePivot from '../../static/img/openscad-tutorial/clearance-pivot.png';
import rotate from '../../static/img/openscad-tutorial/rotate.png';
import readScad from '../../static/img/openscad-tutorial/read-scad.png';
Since we've started thinking about how the hinge will be assembled with the pin taper, we also need to think about tolerances and clearance gaps. Because we want this hinge to be "print in place" which mean it prints pre-assembled, we need to add clearance gaps so that our part doesn't print solid!
Let start by adding a `clearance` variable and first thing we need to do is extrude our `hingeBodyHalf` slightly less than `hingeLength/2` since there needs to be some play between the two halves.
```cpp
// highlight-next-line
clearance=0.2;
module hingeBodyHalf() {
// highlight-next-line
linear_extrude(hingeLength/2-clearance/2){
// ... rest of module definition
}
```
Oh no! there now a gap between our `pin` and `hingeBodyHalf`
<Image img={pivotGap} style={{backgroundSize: 'contain'}} />
Here's the fix for that:
```cpp
// highlight-next-line
hingeHalfExtrudeLength=hingeLength/2-clearance/2;
module hingeBodyHalf() {
linear_extrude(hingeHalfExtrudeLength){
// ... rest of module definiton
}
module pin() {
// highlight-next-line
translate([0,pivotRadius,hingeHalfExtrudeLength]){
// highlight-next-line
cylinder(h=hingeLength/2+clearance/2, r1=pinRadius, r2=pinRadius+pinTaper);
}
}
```
We've done something new here, we've defined a variable with other variables and some arithmetic with `hingeHalfExtrudeLength=hingeLength/2-clearance/2;`.
This variable is then used both in `hingeBodyHalf` and `pin`.
The benefit of doing so is if we need to update this length again we only need to update it in one place since both of the modules need the same calculated length.
Also notice that've we increased the length of the `cylinder` too so that it reaches the full `hingeLength`.
Much better
<Image img={clearancePivot} style={{backgroundSize: 'contain'}} />
We still have more work to do on the pin though. We want to re-use the pin to "subtract" its shape from the other of the hinge, basically we can use our current pint to make a hole.
Lets make a temporary new module called `pin2` in this new module and we're going to introduce a new function `rotate` to re-orientate the pin
```cpp
module pin2() {
translate([0,pivotRadius,hingeHalfExtrudeLength+tiny]){
// highlight-next-line
rotate([0,45,0]){
cylinder(h=hingeLength/2+clearance/2, r1=pinRadius, r2=pinRadius+pinTaper);
}
}
}
hingeBodyHalf();
pin2();
```
<Image img={rotate} style={{backgroundSize: 'contain'}} />
This is not where we want to leave our pin, but it's a good way to introduce `rotate` as well as using multiple modifiers, i.e. we're using both `translate` and `rotate` together here.
`rotate` is similar to `translate` in that it takes an argument `[x, y, z]` but instead of moving, it rotates about each of those axes. In the above example of `[0, 45, 0]` it's as if were were to put a pin into the object along the `y` axis and then rotate 45 degrees around that pin.
## How To Read Chained Operations
Notice the order that we applied the `rotate` and `transform` we applied the `rotate` first and then the`transform`.
This might seem counter intuitive because `translate` is on top, but nesting operations should be read from the most nest outward in openscad.
Here's the correct way to read the above code:
<Image img={readScad} style={{backgroundSize: 'contain'}} />
The same thing applies to `hingeBodyHalf` that should read as follows:
```cpp
// read as
// 1) Add circle, square and hingeBaseProfile
// 2) Apply an offset of 1 (far right offset)
// 3) then on offset of -2 (middle) then an offset of 1 (far left)
// 4) Extrude the 2d shape of hingeHalfExtrudeLength
module hingeBodyHalf() {
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();
}
}
```
Back to our pin and `rotate`. The reason we `rotate` first is because openscad shapes always rotates around the origin point `[0,0,0]` and translating first can make things very confusing, in general you should ALWAYS `rotate` first unless you have a good reason not to.

View File

@@ -0,0 +1,53 @@
---
title: Adding Fillets
---
import Image from '@theme/IdealImage';
import offset1 from '../../static/img/openscad-tutorial/offset1.png';
import offset2 from '../../static/img/openscad-tutorial/offset2.png';
import offset3 from '../../static/img/openscad-tutorial/offset3.png';
Next we're going to learn about a hack that every OpenSCAD coder should know, and that's you can create fillets with `offset`.
Fillets are often ignored in OpenSCAD because they can be difficult to do, but you're not going to ignore them because you're a good engineer.
We need to give fillets their due because they play an important role in reducing stress concentrations, have you ever seen an airplane with sharp square windows?? [Exactly](https://www.youtube.com/watch?v=7rXGRPMD-GQ)!
## Offset
Offset works by "expanding" the skin of your 2d shape but importantly it rounds external corners in the process. See our swole hinge profile below:
```cpp
// ... variables above
// highlight-next-line
offset(1){
translate([0,pivotRadius,0]){
circle(pivotRadius);
}
square([pivotRadius,pivotRadius]);
translate([pivotRadius,0,0]){
square([baseWidth,baseThickness]);
}
}
```
<Image img={offset1} style={{backgroundSize: 'contain'}} />
## Double Offset
Here's the rub, we can do this again in reverse using a negative number to bring us back to our original dimensions but with an internal fillet.
```cpp
offset(-1)offset(1){
// ... hinge profile
}
```
<Image img={offset2} style={{backgroundSize: 'contain'}} />
## Triple Offset
It gets even better, we can double our negative value and apply a third offset to get external fillets as well, to better understand what's happening here let overlay the shapes after each offset.
<Image img={offset3} style={{backgroundSize: 'contain'}} />
In essence we over expand, then under expand before finally expanding back to the original dimensions, but we have gained fillets in the process, it like kneading bread, the more you do it the better the bread . . . not really stick to 3 max.

View File

@@ -0,0 +1,86 @@
---
title: Extruding 2d Shapes
---
import Image from '@theme/IdealImage';
import extrude from '../../static/img/openscad-tutorial/extrude.png';
import differenceMarkup from '../../static/img/openscad-tutorial/difference-markup.png';
import extrude2 from '../../static/img/openscad-tutorial/extrude2.png';
import noFillet from '../../static/img/openscad-tutorial/no-fillet.png';
### Let get 3 dimensional
We've looked at this 2d shape long enough, we can give it some depth by extruding it, `linear_extrude`ing to be precise, let's add a new variable `hingeLength` too.
```cpp
// ... other variables above
hingeLength=30;
// highlight-next-line
linear_extrude(hingeLength){
offset(1)offset(-2)offset(1){
translate([0,pivotRadius,0]){
circle(pivotRadius);
}
square([pivotRadius,pivotRadius]);
translate([pivotRadius,0,0]){
square([baseWidth,baseThickness]);
}
}
}
```
<Image img={extrude} style={{backgroundSize: 'contain'}} />
We do have a bit of a problem though because while want the base to go the full length of the hinge, the pivot should only go half that to make room for the other part of the hinge.
Red scribbles shows what we want to remove.
<Image img={differenceMarkup} style={{backgroundSize: 'contain'}} />
The best way around this problem is to extrude the base again separately so to stretch further than the pivot.
```cpp
// ... variables above
linear_extrude(hingeLength/2){
offset(1)offset(-2)offset(1){
translate([0,pivotRadius,0]){
circle(pivotRadius);
}
square([pivotRadius,pivotRadius]);
translate([pivotRadius,0,0]){
square([baseWidth,baseThickness]);
}
}
}
// highlight-start
linear_extrude(hingeLength){
offset(1)offset(-1)translate([pivotRadius,0,0]){
square([baseWidth,baseThickness]);
}
}
// highlight-end
```
<Image img={extrude2} style={{backgroundSize: 'contain'}} />
## Math Operations
Great, starting to take shape, couple things to go over, first you may have noticed that we just did some inline math with `hingeLength/2`.
This works fine, normal math operations can be preformed and it's fine to mix variables with numbers (also `2` here doesn't count as a magic number since `hingeLength/2` is easy to read as "half of `hingeLength`".
You may notice that we've included the code that forms the hinge base:
```cpp
translate([pivotRadius,0,0]){
square([baseWidth,baseThickness]);
}
```
within both of the `linear_extrude`s, at first it might seem like we could remove it from first `linear_extrude` since it only goes half the `hingeLength` but this would cause us to loose our internal fillet.
<Image img={noFillet} style={{backgroundSize: 'contain'}} />
As it needs to be within `offset` group for this fillet to work.
Okay so we leave it in both `linear_extrude`s but this leaves us in a situation similar to before we introduced variables, in that we have repeated code that would be difficult to determine why to someone reading our code.
Well similar to variables we can solve this with `module`s.

View File

@@ -0,0 +1,209 @@
---
title: Loops
---
import Image from '@theme/IdealImage';
import hole1 from '../../static/img/openscad-tutorial/hole1.png';
import hole2 from '../../static/img/openscad-tutorial/hole2.png';
import hole3 from '../../static/img/openscad-tutorial/hole3.png';
import hole4 from '../../static/img/openscad-tutorial/hole4.png';
import hole5 from '../../static/img/openscad-tutorial/hole5.png';
import hole6 from '../../static/img/openscad-tutorial/hole6.png';
import finishedHinge from '../../static/img/openscad-tutorial/finished-hinge.png';
Let's remove the male hinge for now and add a new `module` called `plateHoles`.
We'll start by adding adding a cylinder that's definitely longer than the plate is thick, we'll than rotate it by 90 degrees and move it a little:
```cpp
// ... other variable definitions
mountingHoleRadius=1.5;
// ... other module definitions
// highlight-start
module plateHoles() {
translate([baseWidth/2+pivotRadius,-baseThickness,0]){
rotate([-90,0,0]){
cylinder(r=mountingHoleRadius,h=baseThickness*4);
}
}
}
// highlight-end
%hingeHalfFemale();
// hingeHalfMale();
plateHoles();
```
<Image img={hole1} style={{backgroundSize: 'contain'}} />
## Basic Loop
From here we can see how we can use this new `cylinder` along with `difference` to make a hole in the hinge base, but it's not quiet in the right place (it's half hanging off the edge), lets add a variable for how close we want the hole to sit from the edge `mountingHoleEdgeOffset=4;`.
But bear in mind we also want to want multiple of these hole and it would be good if we could avoid "hard-coding" each one. Luckly we're able to layout a number of holes efficiently with a `for` loop.
Lets add another variable `mountingHoleCount=3;`. There's a few ways to use a `for` loop in OpenSCAD, but we're going to use the simplest case, it's defined as
`for(increment=[startNumber:endNmuber]){ /* your code ... */ }`
`increment` is another variable, we can name it anything we want (`i` is very common) but increment is a good name.
The code that runs within the curly braces `{}` is run multiple times for each number in the range between `startNumber` and `endNumber`, and the value of `increment` will update each time it's run. To make this concrete, we want 3 holes so lets add the following to `plateHoles`:
```cpp
module plateHoles() {
// highlight-start
for(increment=[0:2]){
echo("increment is currently", increment);
// highlight-end
translate([baseWidth/2+pivotRadius,-baseThickness,0]){
rotate([-90,0,0]){
cylinder(r=mountingHoleRadius,h=baseThickness*4);
}
}
}
}
```
The reason we're using `[0:2]` and not `[0:3]` is because `0` counts so the code still runs 3 times.
I've also introduced another function `echo`, this function can be used to display text to the console, we've added it as a temporary measure to help demonstrate that the code in the `for` loop is run multiple times.
You should see in the console the following:
```cpp
ECHO: "increment is currently", 0
ECHO: "increment is currently", 1
ECHO: "increment is currently", 2
// followed by some internal OpenSCAD messages
```
## Repeating Geometry
Great, `echo` runs three times. Since we know the value of `increment` changes, lets use that to our advantage and change the value `translate` Z-axis like so:
```cpp
module plateHoles() {
for(increment=[0:2]){
// highlight-next-line
translate([baseWidth/2+pivotRadius,-baseThickness,increment*10]){
rotate([-90,0,0]){
cylinder(r=mountingHoleRadius,h=baseThickness*4);
}
}
}
}
```
<Image img={hole2} style={{backgroundSize: 'contain'}} />
And just like that we have three evenly spaced `cylinders`!
## Calculating distribution
I'm sure you can see where this is going, we need to make a few tweaks to get this all polished though.
First lets use our variables, both the new `mountingHoleCount` and we can use that calculate a new variable `mountingHoleMoveIncrement=hingeLength/(mountingHoleCount-1);`
This will be the gap between each of the holes, the reason we're using `(mountingHoleCount-1)` is because counting the gaps between holes, there's one less than the amount of holes. let's now add `increment*mountingHoleMoveIncrement`:
```cpp
// highlight-next-line
mountingHoleMoveIncrement=hingeLength/(mountingHoleCount-1);
module plateHoles() {
// highlight-start
for(i=[0:mountingHoleCount-1]){
translate([baseWidth/2+pivotRadius,-baseThickness,i*mountingHoleMoveIncrement]){
// highlight-end
rotate([-90,0,0]){
cylinder(r=mountingHoleRadius,h=baseThickness*4);
}
}
}
}
```
<Image img={hole3} style={{backgroundSize: 'contain'}} />
Awesome, it obvious that the hole spacing is related to the length of the hinge now, we can even increase the amount of holes with mountingHoleCount=4; and it looks correct:
<Image img={hole4} style={{backgroundSize: 'contain'}} />
Though we still have the problem if the holes sitting right on the edge.
We defined `mountingHoleEdgeOffset` earlier lets now use it in the `mountingHoleMoveIncrement` calculation.
```cpp
mountingHoleEdgeOffset=4;
// highlight-start
mountingHoleMoveIncrement=(hingeLength-2*mountingHoleEdgeOffset)/
(mountingHoleCount-1);
// highlight-end
module plateHoles() {
// highlight-start
for(i=[0:mountingHoleCount-1]){
translate([baseWidth/2+pivotRadius,-baseThickness,i*mountingHoleMoveIncrement]){
// highlight-end
rotate([-90,0,0]){
cylinder(r=mountingHoleRadius,h=baseThickness*4);
}
}
}
}
```
<Image img={hole5} style={{backgroundSize: 'contain'}} />
We subtract `2*mountingHoleEdgeOffset` from the `hingeLength` because we are limiting the amount of space the holes can spread out in, it `2*` the offset because we want that space of both sides, but clearly we don't have a gap on each side yet, but this is just a matter of where the first hole starts, so the last step for our `for` loop is to shift it over a little:
```cpp
module plateHoles() {
for(i=[0:mountingHoleCount-1]){
translate([
baseWidth/2+pivotRadius,
-baseThickness,
// highlight-next-line
i*mountingHoleMoveIncrement+mountingHoleEdgeOffset // <-- add offset
]){
rotate([-90,0,0]){
cylinder(r=mountingHoleRadius,h=baseThickness*4);
}
}
}
}
```
<Image img={hole6} style={{backgroundSize: 'contain'}} />
Fantastic! now that we have our holes place, we need to use `difference` to actually cut the holes into the part, but where to do it?? We could use difference in both the mail and female parts but that would require doing the same thing twice. The best place to do it is in `hingeBodyHalf` since this module is common to both sides of the hinge:
```cpp
module hingeBodyHalf() {
// highlight-start
difference() {
union() {
// highlight-end
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();
}
}
// highlight-next-line
plateHoles();
}
}
// .. more code
hingeHalfFemale();
hingeHalfMale();
```
We're using `difference` here as planned, but we've also introduced a new operation `union`.
`union` allows us to combine shapes into one, which is important here since `difference` works by subtracting the second child from the first and because both of the `linear_extrudes` are children `union` lets us combine them into a single child so that we can subtract `plateHoles`.
Here's the result!
<Image img={finishedHinge} style={{backgroundSize: 'contain'}} />

View File

@@ -0,0 +1,70 @@
---
title: Modifiers
---
import Image from '@theme/IdealImage';
import transparentRotate from '../../static/img/openscad-tutorial/transparent-rotate.png';
import difference from '../../static/img/openscad-tutorial/difference.png';
import removeArtifact from '../../static/img/openscad-tutorial/remove-artifact.png';
The reason we're using `rotate` here is because we want to re-orientate our `pin2` to be inside to form a hole, tricky part is that it can be hard to visualise parts that are going to be subtracted from another shape so we're going to use a modifying character `%` for our `hingeBodyHalf`
```cpp
module pin2() {
translate([0,pivotRadius,hingeHalfExtrudeLength+tiny]){
rotate([0,175,0]){
cylinder(h=hingeLength/2+clearance/2, r1=pinRadius, r2=pinRadius+pinTaper);
}
}
}
// highlight-next-line
%hingeBodyHalf();
pin2();
```
<Image img={transparentRotate} style={{backgroundSize: 'contain'}} />
The `%` character before `hingeBodyHalf()` makes it transparent so that we can see `pin2` within it, and one thing becomes obvious with this view is that a `rotate` of `175` is no right, it needs to be `180`! The `%` character is a "debugging" step, which means it's not going to end up in our final code, it's just helpful in the mean time. There are other characters that can be useful, the full list is
```xml
* disable
! show only
# highlight / debug
% transparent / background
```
To actually make the hole we'll use a `difference` operation like so:
```cpp
module pin2() {
translate([0,pivotRadius,hingeHalfExtrudeLength]){
rotate([0,180,0]){
cylinder(h=hingeLength/2+clearance/2, r1=pinRadius, r2=pinRadius+pinTaper);
}
}
}
// highlight-next-line
difference() {
hingeBodyHalf();
pin2();
}
```
<Image img={difference} style={{backgroundSize: 'contain'}} />
There we, go a hole! The way conceptualise how `difference` works is to think of it as subtracting the second child from the first. "child" simply means nested with `difference` so in the above example `pin2` is the second child that we are subtracting from `hingeBodyHalf`.
There is one minor annoyance is that the end of the hole looks like it's glitching a little, this can happen in openscad when two surfaces line up.
In this case the end of the `hingeBodyHalf` and the start of `pin2`, it only effects the preview and not the 3d STL export, but to make the preview a little nicer in this situations I'll define a variable with a very small value `tiny=0.005;` and add it strategically to resolve this issue, this part is optional but here's where I added it for pin2:
```cpp
module pin2() {
translate([0,pivotRadius,hingeHalfExtrudeLength+tiny]){
//
```
Fixed!
<Image img={removeArtifact} style={{backgroundSize: 'contain'}} />

View File

@@ -0,0 +1,154 @@
---
title: Module Arguments
---
import Image from '@theme/IdealImage';
import multiRotate from '../../static/img/openscad-tutorial/multi-rotate.png';
import bothHalves from '../../static/img/openscad-tutorial/both-halves.png';
import exaggeratedClearance from '../../static/img/openscad-tutorial/exaggerated-clearance.png';
import transparentAssembly from '../../static/img/openscad-tutorial/transparent-assembly.png';
Problem still stands that we now have two modules that are almost identical but not quiet, `pin2` was supposed to be temporary.
we can resolve this issue by using module arguments, lets start by comparing the two modules.
```cpp
module pin() {
translate([0,pivotRadius,hingeHalfExtrudeLength+tiny]){
cylinder(h=hingeLength/2+clearance/2, r1=pinRadius, r2=pinRadius+pinTaper);
}
}
module pin2() {
translate([0,pivotRadius,hingeHalfExtrudeLength+tiny]){
rotate([0,180,0]){
cylinder(h=hingeLength/2+clearance/2, r1=pinRadius, r2=pinRadius+pinTaper);
}
}
}
```
The only difference between the two is the `rotate` in `pin2`, further if we add a `rotate([0,0,0])` to `pin` it has no effect on the shape but it it does mean now the only difference between the two is the amount the pin is rotated.
```cpp
module pin() {
translate([0,pivotRadius,hingeHalfExtrudeLength+tiny]){
// highlight-next-line
rotate([0,0,0]) {
cylinder(h=hingeLength/2+clearance/2, r1=pinRadius, r2=pinRadius+pinTaper);
}
}
}
module pin2() {
translate([0,pivotRadius,hingeHalfExtrudeLength+tiny]){
rotate([0,180,0]){
cylinder(h=hingeLength/2+clearance/2, r1=pinRadius, r2=pinRadius+pinTaper);
}
}
}
```
This is perfect for an argument! What's an argument? Its a value that we can pass into the module instead of having to define it ahead of time, this makes our module more flexible.
Here's how we'd modify `pin` to use an argument for the rotation:
```cpp
// highlight-next-line
module pin(rotateY) {
translate([0,pivotRadius,hingeHalfExtrudeLength+tiny]){
// highlight-next-line
rotate([0,rotateY,0]) {
cylinder(h=hingeLength/2+clearance/2, r1=pinRadius, r2=pinRadius+pinTaper);
}
}
}
pin(0);
pin(45);
pin(120);
```
<Image img={multiRotate} style={{backgroundSize: 'contain'}} />
Earlier I said that the syntax was for modules was `module yourName() { /* your code */ }`, lets revise that to `module yourName(yourArguments) { /* your code that uses arguments */ }`.
As you can see we're using the argument `rotateY` within `rotate` so that that we can change `pin`'s ordination each time we use it by as demonstrated by using `0`, `45` and `120`.
An argument is much like a variable in that we should name it well, the difference is that it's passed to a module and can only be used within the module.
Here our code using our new module instead of `pin2`
```cpp
// ... rest of code above
module pin(rotateY) {
translate([0,pivotRadius,hingeHalfExtrudeLength+tiny]){
rotate([0,rotateY,0]) {
cylinder(h=hingeLength/2+clearance/2, r1=pinRadius, r2=pinRadius+pinTaper);
}
}
}
difference() {
hingeBodyHalf();
// I wouldn't count 180 as a "magic number"
// since it's easy to tell it's for a half turn
pin(rotateY=180);
}
```
And now we can use the pin as both the hole and the shaft, above is the hole, both looks like the following:
<Image img={bothHalves} style={{backgroundSize: 'contain'}} />
We're still not done with `pin` though! one more thing. Technically we can use the same module `pin` for the hole and shaft, but practically we can't because we haven't added any clearance between the two.
If we tried to print these together they would print solid.
We can fix this with another argument that makes the hole a bit larger:
```cpp
// highlight-next-line
module pin(rotateY, radiusOffset) {
translate([0,pivotRadius,hingeHalfExtrudeLength+tiny]){
rotate([0,rotateY,0]) {
cylinder(
h=hingeLength/2+clearance/2,
// highlight-start
r1=pinRadius+radiusOffset,
r2=pinRadius+pinTaper+radiusOffset
// highlight-end
);
}
}
}
```
The new argument allows us to increase the radius of the pin, here's an exaggerated example:
<Image img={exaggeratedClearance} style={{backgroundSize: 'contain'}} />
That's too much clearance just to demonstrate the principle, in reality we'll use the `clearance` variable that we've already defined with a value of `0.2`. we're ready to put the hinge together now, lets make two modules `hingeHalfMale` and `hingeHalfFemale` which will just be assemblies of modules we've already made.
```cpp
// ... previous module definitions above
module hingeHalfFemale() {
difference() {
hingeBodyHalf();
// highlight-next-line
pin(rotateY=180, radiusOffset=clearance);
}
}
module hingeHalfMale() {
translate([0,0,hingeLength]) {
rotate([0,180,0]) {
hingeBodyHalf();
// highlight-next-line
pin(rotateY=0, radiusOffset=0);
}
}
}
%hingeHalfFemale(); // make female hinge transparent
hingeHalfMale();
```
<Image img={transparentAssembly} style={{backgroundSize: 'contain'}} />
Well done, it's really coming together (I made the female hinge transparent so we can see how it fits together).
The only thing left to do is add mounting holes on the plates.

View File

@@ -0,0 +1,98 @@
---
title: Modules
---
import Image from '@theme/IdealImage';
import pivot from '../../static/img/openscad-tutorial/pivot.png';
We can also define our own `module`s to associate some code with a name. Here's what it looks like.
```cpp
// highlight-start
module hingeBaseProfile() {
translate([pivotRadius,0,0]){
square([baseWidth,baseThickness]);
}
}
// highlight-end
linear_extrude(hingeLength/2){
offset(1)offset(-2)offset(1){
translate([0,pivotRadius,0]){
circle(pivotRadius);
}
square([pivotRadius,pivotRadius]);
// highlight-next-line
hingeBaseProfile(); // <- used here
}
}
linear_extrude(hingeLength){
// highlight-next-line
offset(1)offset(-1)hingeBaseProfile(); // <- and here
}
```
## Module Syntax
At the top is the module definition, the syntax here is `module yourName() { /* your code */ }` and then when we want to use it we put parenthesis `()` at the end i.e. `yourName();`.
The parenthesis are there because we can also pass arguments to modules which we'll cover soon!
Now that we know how to use modules, let's wrap everything we've done so far into one, as it's a good way to name and therefore express intent of the code we've written.
```cpp
// ... variables above
module hingeBaseProfile() {
translate([pivotRadius,0,0]){
square([baseWidth,baseThickness]);
}
}
module hingeBodyHalf() {
linear_extrude(hingeLength/2){
offset(1)offset(-2)offset(1){
translate([0,pivotRadius,0]){
circle(pivotRadius);
}
square([pivotRadius,pivotRadius]);
hingeBaseProfile();
}
}
linear_extrude(hingeLength){
offset(1)offset(-1)hingeBaseProfile();
}
}
hingeBodyHalf();
```
## 3D Primitives
Next lets work on the pin, ie. what the other half of the hinge will pivot about.
We're going to introduce a new module `cylinder` and to get in good habits lets put this immediately in a module that describes what we're making.
```cpp
// ... other variables above
pinRadius=2;
pinTaper=0.25;
// ... other module definitions above
// highlight-start
module pin() {
translate([0,pivotRadius,hingeLength/2]){
cylinder(h=hingeLength/2, r1=pinRadius, r2=pinRadius+pinTaper);
}
}
// highlight-end
hingeBodyHalf();
pin();
```
<Image img={pivot} style={{backgroundSize: 'contain'}} />
A couple notes about the above.
- `cylinder` is the 3d version of `circle` when `h` for height is the length that we would need to extrude `circle` by. It can also take one or two radii, here we're using two because it allows us to add a taper to the pin. The reason why we want to add a taper is because we're starting to think about the assemble of this hinge and if we taper the pin it means the other half of the hinge will be locked on.
- In order to add the taper we've defined two variables `pinRadius` and `pitTaper` when, the latter is extra we add to the second `cylinder` radius.
- The `translate` is there move the `cylinder` up so that it's centred with the hinge pivot and along so that it's protruding out of the hinge pivot.

View File

@@ -0,0 +1,111 @@
---
title: The Basics
---
import Image from '@theme/IdealImage';
import profile from '../../static/img/openscad-tutorial/profile.png';
import circleCube from '../../static/img/openscad-tutorial/circle-cube.png';
import translate from '../../static/img/openscad-tutorial/translate.png';
import unroundedProfile from '../../static/img/openscad-tutorial/unrounded-profile.png';
import bigRadius from '../../static/img/openscad-tutorial/big-radius.png';
## 2D Primitives
Designing parts in OpenSCAD is a matter of combining shapes and iterating until you get what you want, so with that in mind lets start with this from this perspective focusing just on one half of the hinge, let look at the blue half.
<Image img={profile} style={{backgroundSize: 'contain'}} />
We can see at the very least some circles and rectangles will be of use, so lets start there.
```cpp
circle(5);
square([15,3]);
```
`circle(5);` gives us a circle with a radius of `5` and `square` is the 2d version of `cube` . Here we've given it dimensions of 15 and 2 for x and y respectively (or width and height if you prefer) .
<Image img={circleCube} style={{backgroundSize: 'contain'}} />
## Translate
It's a start but we need to shift things around a little (I've colored these so we can tell them apart). The cross-hairs represent the origin of the environment and we can see that lines up with the circle's center the corner of the square. Since `5` is the radius of the circle, if want the circle to sit on top of the origin we need to shift it up by the same amount, we do that with `translate` like so:
```cpp
// highlight-next-line
translate([0,5,0]){
circle(5);
}
square([15,3]);
```
<Image img={translate} style={{backgroundSize: 'contain'}} />
`translate` is little different to the modules we've see so far is instead of ending with a semicolon `;` it ends with `{ children }` in the case above it has one child, the `circle`. `tranlates` shifts its children around, we're using it to shift it up by `5`. We put `5` in the second position in the square braces is because we want to shift it along the Y axis, if you're ever not sure which axis you need to shift something just try each until you find the one you're after.
We also don't want to have the undercut where the circle meets the square, we can fix that with another square so that there's a nice 90 degree transition. Also for reasons we'll get to later, we don't actually want any overlap between these two squares so it will need shift with translate as well. Here's what we're left with:
```cpp
translate([0,5,0]){
circle(5);
}
// highlight-next-line
square([5,5]);
// highlight-next-line
translate([5,0,0]){
square([11,2]);
}
```
<Image img={unroundedProfile} style={{backgroundSize: 'contain'}} />
I'm sure you can see the profile of the hinge coming together, that's great, but before we move forward we should quickly reflect on what we've done so far.
## Variables
We've written 7 lines and there are 5 module calls and . . . . a bunch of numbers, we have to ask ourselves If we came back to this code in a month would we be able to tell what it's supposed to do?
We definitely could, but all of the numbers makes it difficult because it's not easy to tell why each value is that value.
Have you ever walked into a room only to forget why?
You know you came here for a reason but it completely eludes you!? Well reading old code, even only a couple weeks later is a bit like that, you know you put these numbers here for a reason . . .right!
In programming expressing intent in one of the most important principles for making code understandable and to remember what we were doing.
Isolated values like the ones in our code so far are commonly called "magic numbers" since we can't tell what they do, they might as well be magical.
Luckily this can be solved by variables. Variables are a way of giving a number a name, so that we can reference that same number over and over again.
This what it looks like in action.
```cpp
pivotRadius=5;
translate([0,pivotRadius,0]){
circle(pivotRadius);
}
square([pivotRadius,pivotRadius]);
translate([pivotRadius,0,0]){
square([11,2]);
}
```
The first line `pivotRadius=5;` is where the variable is assigned, that is the value of `5` is assigned to the name `pivotRadius`, Then we can use it everywhere we need that value.
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', marginBottom: '1rem'}} />
Let's clean up the rest of the magic numbers.
```cpp
pivotRadius=5;
baseThickness=3;
baseWidth=15;
translate([0,pivotRadius,0]){
circle(pivotRadius);
}
square([pivotRadius,pivotRadius]);
translate([pivotRadius,0,0]){
square([baseWidth,baseThickness]);
}
```
There are some exceptions to the "magic number" rule, for example above `0` isn't a "magic number" since this conveys "no value for this axis" quite well.

View File

@@ -0,0 +1,124 @@
---
title: Wrap Up
---
import Image from '@theme/IdealImage';
import parametric from '../../static/img/openscad-tutorial/parametric.png';
We're done coding and here's the final code in full:
```cpp
baseWidth=15;
hingeLength=30;
baseThickness=3;
pivotRadius=5;
pinRadius=2;
pinTaper=0.25;
mountingHoleRadius=1.5;
mountingHoleCount=3;
mountingHoleEdgeOffset=4;
clearance=0.2;
tiny=0.005;
// calculated values
hingeHalfExtrudeLength=hingeLength/2-clearance/2;
mountingHoleMoveIncrement=(hingeLength-2*mountingHoleEdgeOffset)/
(mountingHoleCount-1);
// 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();
}
}
plateHoles();
}
}
module pin(rotateY, radiusOffset) {
translate([0,pivotRadius,hingeHalfExtrudeLength+tiny]){
rotate([0,rotateY,0]) {
cylinder(
h=hingeLength/2+clearance/2,
r1=pinRadius+radiusOffset,
r2=pinRadius+pinTaper+radiusOffset
);
}
}
}
module hingeHalfFemale() {
difference() {
hingeBodyHalf();
pin(rotateY=180, radiusOffset=clearance);
}
}
module hingeHalfMale() {
translate([0,0,hingeLength]) {
rotate([0,180,0]) {
hingeBodyHalf();
pin(rotateY=0, radiusOffset=0);
}
}
}
module plateHoles() {
for(i=[0:mountingHoleCount-1]){
translate([
baseWidth/2+pivotRadius,
-baseThickness,
i*mountingHoleMoveIncrement+mountingHoleEdgeOffset
]){
rotate([-90,0,0]){
cylinder(r=mountingHoleRadius,h=baseThickness*4);
}
}
}
}
// using high-level modules
hingeHalfFemale();
hingeHalfMale();
```
Lets reflect on what you've achieved
### Parametric
By diligently using variables instead of hardcoding values, you have create some code that is not only much easier to read and re-use, but it's now parametric by default, which means we can change the value of the variables and the model adjusts
Here are some variations:
<Image img={parametric} style={{backgroundSize: 'contain'}} />
### Composed of many small well named modules
By keeping modules small and making lots of them you've also done a great job of making the code easier to read.
### Included fillets
By taking extra steps to add fillets to you part, you've made the part stronger and already puts you head and shoulders above many OpenSCAD designs.
### Print in place
You've already tackled clearances for getting parts to fit together or print-in-place.
<!-- Now that you up to speed with openscad you might be interested to learn how to host an OpenSCAD project -->

View File

@@ -0,0 +1,51 @@
---
title: Your Openscad Journey
---
import Image from '@theme/IdealImage';
import hinge from '../../static/img/getting-started/complete-hinge.png';
import plainCube from '../../static/img/openscad-tutorial/plain-cube.png';
import tallCube from '../../static/img/openscad-tutorial/tall-cube.png';
In order to maximise our learning we're actually going to tackle 3 things, that is feed 3 birds with one scone.
We're going to learn:
1. The basics programming and the OpenSCAD syntax
2. Some best practices so that you can read your own code a couple days after you wrote it
3. Get practise designing a real thing with tolerances and all so that you're well equiped to make your next thing
We're going to achieve that by making this cute print-in-place hinge, print in place means that there will be no assembly step, both parts of the hinge will be printed pre-assembled.
<Image img={hinge} style={{backgroundSize: 'contain'}} />
This tutorial makes no assumption about previous knowledge, which means it's fine you you haven't done any programming before, we'll walk you through it.
If you have done some programming before and prefer a more concise guide that focuses more on OpenSCAD syntax you might prefer the Definitive OpenSCAD Primer instead.
If you came here from "[getting started](/docs)" then you would have already got a shape on screen with `cube([10,10,10]);`.
If you came from elsewhere, open the OpenSCAD desktop app or go to our [online editor](https://cadhub.xyz/dev-ide/openScad), and add `cube([10,10,10]);` to get the following cube:
<Image img={plainCube} style={{backgroundSize: 'contain'}} />
OpenSCAD has a number of modules available that allow us to make shapes and cube is one of them.
Modules take the form `moduleName(moduleParameters);` or `moduleName(moduleParameters){children}`.
Using the `cube` as an example, it take the first form where the moduleName is `cube` and it takes one parameter, though that parameter is an array denoted by the square brackets `[]`, which is basically a series of values.
Try changes the line to `cube([10,10,20]);`. You should see the cube grow twice as tall as it was previously
<Image img={tallCube} style={{backgroundSize: 'contain'}} />
That's because the `[10,10,20]` is giving the cube's dimensions in each axis, the order is `[x, y, z]`, and as we've seen the `z` axis is the vertical axis.
Before we go any further, now is a good time to mention a couple of principles that you should always keep in mind for OpenSCAD and programming in general
1. Computers are incredibly stupid, but do exactly what you tell them to do, which means if there's even a small part of code that's incorrect, then OpenSCAD will display errors, it's normal for this to happen often and bears no reflection on your ability to program keep at it! which leads to the next point.
2. Never get intimidated, if you don't understand a part of the syntax or code try changing the parameters, see what happens. Playing with the code in this manner is one of the best ways to learn.
3. The [OpenSCAD](https://www.openscad.org/cheatsheet/) cheatsheet is very useful as a reference. You should always have it open in a tab.
4. There are multiple ways to call these modules, i.e. `cube([10,10,10]); cube(size=[10,10,10]); cube([10,10,10], false);` all have the same result, it depends on if you prefer shorthand or not, to avoid confusion, for this tutorial we'll longhand `argumentName=value` in circumstances where we're using more than one argument, and shorthand if it's only one, i.e. `cube([10,10,10]);` (`[10,10,10]` is considered one value because it a single array).
5. Don't worry about units. nominally the units are in the metric millimetre, since that is the standard global engineering unit, but because it exists in virtual space they are effectively unit-less and can be scaled later.
6. If you code isn't working, 9 out of 10 times it's because you are missing a semi-colon `;`, all lines apart from ones with curly brace `}` need to end with a semi-colon.

View File

@@ -0,0 +1,40 @@
---
title: Getting Started
slug: /
---
import Image from '@theme/IdealImage';
import plus from '../../static/img/getting-started/plus.jpg';
import openscadSelect from '../../static/img/getting-started/openscad-select.jpg';
import ide from '../../static/img/getting-started/ide.png';
import cube from '../../static/img/getting-started/cube.jpg';
import hinge from '../../static/img/getting-started/complete-hinge.png';
To get started click the "+" button on the top right of CadHub
<Image img={plus} style={{backgroundSize: 'contain', paddingBottom: '2rem', width: '400px', margin: '0 auto'}} />
Then select OpenSCAD. Note that [CadQuery](https://cadquery.readthedocs.io/en/latest/) is available too, but OpenSCAD is recomended and the rest of this tutorial is based on OpenSCAD.
<Image img={openscadSelect} style={{backgroundSize: 'contain', paddingBottom: '2rem', width: '300px', margin: '0 auto'}} size={300} />
You should now see the OpenSCAD IDE (integrated development environment)
<Image img={ide} style={{backgroundSize: 'contain'}} />
Here we should see the default code in the editor on the left-hand-side, the editor is where we design our CAD parts and we'll cover that more soon. You will also see the result will show up on the right-hand-side (along with the console which gives us extra information). You can click and drag inside the viewer to change the perspective, though the image will only update once you let go of the mouse.
You can also move the object with with right-click and drag, and scrolling will zoom in and out.
### What about the editor?
For that we'll need to learn about the OpenSCAD language. For now, try replacing all of the existing code with `cube([10,10,10]);` and then hit `ctrl + s` to tell CadHub to render a new image. You should see a cube appear!
<Image img={cube} style={{backgroundSize: 'contain'}} />
Don't worry if you don't understand the specifics of what happen here, we'll give you the whole run down next in our introductory tutorial, where you'll learn the basics of OpenSCAD by making a hinge.
<Image img={hinge} style={{backgroundSize: 'contain'}} />
Already familiar with OpenSCAD? no worries, you can skip ahead to learn more about how to host a OpenSCAD project on CadHub

View File

@@ -0,0 +1,10 @@
---
title: Why OpenSCAD
---
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.
A quick run down is that you get all the benifits of git version control. It makes reusing cad logic with a team much easier, and if you think of CAD models as a communication medium between colleagues and machine, what better way of storing it than in an auditable script.
We're going to learn OpenSCAD now over [the alternatives](/blog/curated-code-cad) because not only is it very mature and stable, it's also easy to pick up. Let's get started!

101
docs/docusaurus.config.js Normal file
View File

@@ -0,0 +1,101 @@
/** @type {import('@docusaurus/types').DocusaurusConfig} */
module.exports = {
title: 'CadHub',
tagline: '',
url: 'https://your-docusaurus-test-site.com',
baseUrl: '/',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
favicon: 'img/favicon.svg',
organizationName: 'IrevDev', // Usually your GitHub org/user name.
projectName: 'Cadhub', // Usually your repo name.
plugins: ['@docusaurus/plugin-ideal-image', 'docusaurus-tailwindcss-loader'],
themeConfig: {
navbar: {
title: 'CadHub',
logo: {
alt: 'CadHub Logo',
src: 'img/logo.svg',
},
items: [
{
to: 'docs/',
activeBasePath: 'docs',
label: 'Docs',
position: 'left',
},
{ to: 'blog', label: 'Blog', position: 'left' },
{
href: 'https://github.com/Irev-Dev/cadhub',
label: 'GitHub',
position: 'right',
},
],
},
footer: {
style: 'dark',
links: [
{
title: 'Docs',
items: [
{
label: 'Getting Started',
to: 'docs/',
},
],
},
{
title: 'Community',
items: [
{
label: 'Road Map',
href: 'https://github.com/Irev-Dev/cadhub/discussions/212',
},
{
label: 'Discord',
href: 'https://discord.gg/SD7zFRNjGH',
},
{
label: 'Twitter',
href: 'https://twitter.com/IrevDev',
},
],
},
{
title: 'More',
items: [
{
label: 'Blog',
to: 'blog',
},
{
label: 'GitHub',
href: 'https://github.com/Irev-Dev/cadhub',
},
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} Kurt Hutten. Built with Docusaurus.`,
},
},
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
sidebarPath: require.resolve('./sidebars.js'),
editUrl:
'https://github.com/facebook/docusaurus/edit/master/website/',
},
blog: {
showReadingTime: true,
editUrl:
'https://github.com/facebook/docusaurus/edit/master/website/blog/',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
}

43
docs/package.json Normal file
View File

@@ -0,0 +1,43 @@
{
"name": "docs",
"version": "0.0.0",
"private": true,
"scripts": {
"docusaurus": "docusaurus",
"start": "docusaurus start",
"build": "docusaurus build",
"swizzle": "docusaurus swizzle",
"deploy": "docusaurus deploy",
"clear": "docusaurus clear",
"serve": "docusaurus serve",
"write-translations": "docusaurus write-translations",
"write-heading-ids": "docusaurus write-heading-ids"
},
"dependencies": {
"@docusaurus/core": "2.0.0-alpha.72",
"@docusaurus/plugin-ideal-image": "^2.0.0-alpha.72",
"@docusaurus/preset-classic": "2.0.0-alpha.72",
"@mdx-js/react": "^1.6.21",
"clsx": "^1.1.1",
"docusaurus-tailwindcss-loader": "file:plugins/docusaurus-tailwindcss-loader",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"browserslist": {
"production": [
">0.5%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@tailwindcss/postcss7-compat": "npm:@tailwindcss/postcss7-compat",
"postcss-import": "^14.0.1",
"tailwindcss": "^2.1.2"
}
}

View File

@@ -0,0 +1,19 @@
// See this GH comment, https://github.com/facebook/docusaurus/issues/2961#issuecomment-735355912
module.exports = function (context, options) {
return {
name: 'postcss-tailwindcss-loader',
configurePostCss(postcssOptions) {
postcssOptions.plugins.push(
require('postcss-import'),
require('tailwindcss'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 4,
})
)
return postcssOptions
},
}
}

27
docs/sidebars.js Normal file
View File

@@ -0,0 +1,27 @@
module.exports = {
docs: [
'getting-started/getting-started',
'why-code-cad',
{
type: 'category',
label: 'Definitive OpenSCAD Tutorial for Beginners',
items: [
'definitive-beginners/your-openscad-journey',
'definitive-beginners/the-basics',
'definitive-beginners/adding-fillets',
'definitive-beginners/extruding-2d-shapes',
'definitive-beginners/modules',
'definitive-beginners/adding-clearances',
'definitive-beginners/modifiers',
'definitive-beginners/module-arguments',
'definitive-beginners/loops',
'definitive-beginners/wrap-up',
// {
// type: 'category',
// label: 'OpenSCAD tutorial',
// items: ['create-a-page'],
// },
],
},
],
}

60
docs/src/css/custom.css Normal file
View File

@@ -0,0 +1,60 @@
/* stylelint-disable docusaurus/copyright-header */
/**
* Any CSS included here will be global. The classic template
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
*/
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Ropa+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,500;1,700&display=swap');
/* h1 {
font-size: 56px;
} */
@layer base {
h1 {
@apply text-4xl font-bold
}
h2 {
@apply text-3xl font-bold
}
h3 {
@apply text-2xl font-bold
}
ul li {
@apply list-disc ml-4
}
.table-of-contents li {
@apply list-none
}
a {
@apply text-indigo-700
}
}
/* You can override the default Infima variables here. */
:root {
--ifm-color-primary: rgb(79, 70, 229);
--ifm-color-primary-dark: rgb(67, 56, 202);
--ifm-color-primary-darker: rgb(55, 48, 163);
--ifm-color-primary-darkest: rgb(49, 46, 129);
--ifm-color-primary-light: rgb(99, 102, 241);
--ifm-color-primary-lighter: rgb(129, 140, 248);
--ifm-color-primary-lightest: rgb(146, 224, 208);
--ifm-code-font-size: 95%;
}
.docusaurus-highlight-code-line {
background-color: rgb(72, 77, 91);
display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
}

147
docs/src/pages/index.js Normal file
View File

@@ -0,0 +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'
export default function Home() {
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('bg-pink-100', styles.heroBanner)}>
<div className="container">
<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(
'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/')}
>
Get Started
</Link>
</div>
</div>
</header>
<main>
<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>
<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>
)
}

View File

@@ -0,0 +1,7 @@
---
title: Markdown page example
---
# Markdown page example
You don't need React to write simple standalone pages.

View File

@@ -0,0 +1,37 @@
/* stylelint-disable docusaurus/copyright-header */
/**
* CSS files with the .module.css suffix will be treated as CSS modules
* and scoped locally.
*/
.heroBanner {
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
@media screen and (max-width: 966px) {
.heroBanner {
padding: 2rem;
}
}
.buttons {
display: flex;
align-items: center;
justify-content: center;
}
.features {
display: flex;
align-items: center;
padding: 2rem 0;
width: 100%;
}
.featureImage {
height: 200px;
width: 200px;
}

0
docs/static/.nojekyll vendored Normal file
View File

3
docs/static/img/favicon.svg vendored Normal file
View File

@@ -0,0 +1,3 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 62">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.784 6.309C3.276 7.56-.986 13.85.266 20.359L6.31 51.783c1.251 6.508 7.542 10.77 14.05 9.518l31.424-6.042c6.508-1.252 10.77-7.542 9.518-14.05L55.26 9.783C54.007 3.276 47.717-.986 41.209.266L9.783 6.31zM23.233 9.68c2.185-1.15 4.668-1.63 7.122-1.677 2.119-.033 4.255.231 6.275.885a11.784 11.784 0 014.445 2.57c1.786 1.643 3.018 3.813 3.785 6.098.404 1.173.667 2.388.866 3.611l.058.37c.101.63.202 1.261.207 1.9a.788.788 0 01-.083.438c-.037.06-.11.087-.184.114-.045.017-.089.033-.125.057h-8.372a1.047 1.047 0 01-.503-.073c-.02-.04-.044-.08-.07-.12-.054-.085-.109-.17-.104-.275-.038-.345-.07-.692-.101-1.038-.066-.717-.132-1.435-.253-2.146-.19-1.06-.501-2.157-1.232-2.98-.636-.727-1.574-1.101-2.505-1.27-1.302-.22-2.673-.256-3.942.158a4.54 4.54 0 00-2.522 1.995c-.759 1.305-1.075 2.81-1.255 4.294-.231 1.987-.266 3.979-.29 5.974-.018 2.433-.013 4.874.079 7.296.032.815.076 1.603.145 2.41l.036.387.013.14c.13 1.18.298 2.373.727 3.488.043.107.104.253.142.333A4.78 4.78 0 0027 44.4c.804.644 1.842.903 2.855.958.985.048 1.982.008 2.948-.196.828-.176 1.645-.557 2.186-1.227.666-.815.953-1.858 1.162-2.87l.003-.015c.03-.16.066-.35.087-.489.1-.671.167-1.347.203-2.025.01-.078.012-.158.014-.238.006-.182.012-.365.102-.528.04-.06.113-.087.186-.114.044-.017.088-.033.125-.057h8.54c.162-.026.305.04.447.108.057.041.077.117.097.193.012.046.024.092.044.13-.17 1.837-.37 3.686-.898 5.461-.659 2.251-1.813 4.387-3.504 6.03-1.628 1.602-3.717 2.688-5.919 3.26-2.284.608-4.674.69-7.023.534a4.598 4.598 0 01-.283-.025c-1.948-.21-3.873-.755-5.592-1.707-1.97-1.079-3.622-2.697-4.816-4.592-1.047-1.623-1.699-3.465-2.172-5.327a26.466 26.466 0 01-.713-4.715c-.091-1.782-.083-3.566-.074-5.35l.005-1.042.01-1.498c.01-1.547.02-3.095.065-4.642.024-1.23.235-2.447.487-3.649.51-2.413 1.397-4.773 2.81-6.806.778-1.04 1.695-1.97 2.669-2.825.656-.585 1.406-1.05 2.182-1.456z" fill="#ED64A6"/>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

BIN
docs/static/img/getting-started/cube.jpg vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

BIN
docs/static/img/getting-started/ide.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 321 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

BIN
docs/static/img/getting-started/plus.jpg vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

97
docs/static/img/logo.svg vendored Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 478 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 558 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 533 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 180 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 218 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 159 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 306 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 180 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 964 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 246 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 158 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

2
docs/tailwind.config.js Normal file
View File

@@ -0,0 +1,2 @@
const webConfig = require('../web/tailwind.config.js')
module.exports = webConfig

View File

@@ -3,7 +3,11 @@
"workspaces": {
"packages": [
"api",
"web"
"web",
"docs"
],
"nohoist": [
"docs/**"
]
},
"scripts": {},

3523
yarn.lock

File diff suppressed because it is too large Load Diff