Added basic Next.js boilerplate + simple openjscad-react example

aeksco · Oct 20, 2020 · 0cb68be · 0cb68be
1 parent 3b930f9
commit 0cb68be
Show file tree

Hide file tree

Showing 14 changed files with 6,212 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+.next/
+out/
+yarn-error.log
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+# openjscad-react-next-starter
+
+A web starter project with OpenJSCAD, React, Next.js, TypeScript, and Netlify. Built with [openjscad-react](https://github.com/aeksco/openjscad-react).
diff --git a/netlify.toml b/netlify.toml
@@ -0,0 +1,4 @@
+# Doc: https://www.netlify.com/docs/netlify-toml-reference/
+[build]
+  command = "yarn build && yarn export"
+  publish = "out"
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
diff --git a/package.json b/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "openjscad-react-next-starter",
+  "version": "0.1.0",
+  "description": "A web starter project with OpenJSCAD React, Next.js, TypeScript, TailwindCSS and Netlify",
+  "main": "index.js",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "export": "next export",
+    "start": "next start"
+  },
+  "author": "Alexander Schwartzberg",
+  "license": "MIT",
+  "dependencies": {
+    "@types/downloadjs": "^1.4.2",
+    "downloadjs": "^1.4.7",
+    "lodash.debounce": "^4.0.8",
+    "next": "^9.0.1",
+    "openjscad-react": "^0.0.1-canary-04",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "tailwindcss": "^1.8.10"
+  },
+  "devDependencies": {
+    "@types/lodash.debounce": "^4.0.6",
+    "@types/node": "^12.6.2",
+    "@types/react": "^16.8.23",
+    "@types/react-dom": "^16.8.4",
+    "postcss-preset-env": "^6.7.0",
+    "typescript": "^3.5.3"
+  }
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { PageHeader } from "../src/PageHeader";
+import App from "next/app";
+import "../styles/index.css";
+
+export default class extends App {
+  render() {
+    const { Component, pageProps } = this.props;
+    return (
+      <React.Fragment>
+        <PageHeader />
+        <div className="container mx-auto">
+          <Component {...pageProps} />
+        </div>
+      </React.Fragment>
+    );
+  }
+}
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -0,0 +1,19 @@
+import Document, { Html, Head, Main, NextScript } from "next/document";
+
+class MyDocument extends Document {
+  render() {
+    return (
+      <Html>
+        <Head>
+          <title>OpenJSCAD React Next.js Starter</title>
+        </Head>
+        <body className="bg-gray-200">
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -0,0 +1,86 @@
+import React from "react";
+import dynamic from "next/dynamic";
+import { OpenJSCADProps } from "openjscad-react/dist/types";
+
+const STLB_FORMAT = {
+  name: "stlb",
+  displayName: "STL (Binary)",
+  description: "STereoLithography, Binary",
+  extension: "stl",
+  mimetype: "application/sla",
+  convertCSG: true,
+  convertCAG: false
+};
+
+// Dynamic import
+const OpenJSCAD: React.ComponentType<OpenJSCADProps> = dynamic(
+  () => import("openjscad-react/dist").then(mod => mod.OpenJSCAD),
+  { ssr: false }
+);
+
+// // // //
+
+export const DEFAULT_SCRIPT = `
+function main () {
+  return union(
+    difference(
+      cube({size: 3, center: true}),
+      sphere({r: 2, center: true})
+    ),
+    intersection(
+      sphere({r: 1.3, center: true}),
+      cube({size: 2.1, center: true})
+    )
+  ).translate([0, 0, 1.5]).scale(10);
+}
+`;
+
+const Index = () => {
+  if (typeof window == "undefined" || typeof document == "undefined") {
+    return null;
+  }
+
+  return (
+    <OpenJSCAD
+      className="grid grid-cols-1 mt-5"
+      jscadScript={DEFAULT_SCRIPT}
+      viewerOptions={{}}
+      // defaultOutputFileFormat="stl"
+    >
+      {({ viewerElement, outputFile }) => {
+        // NOTE - processor is null, must be fixed
+        // if (processor !== null) {
+        //   // setTimeout(() => {
+        //   //   processor.generateOutputFile(STLB_FORMAT);
+        //   // }, 3000);
+        // }
+
+        return (
+          <div>
+            {viewerElement}
+            {/* <button
+              className="btn btn-blue"
+              onClick={() => {
+                processor.generateOutputFile(STLB_FORMAT);
+              }}
+            >
+              Download STL
+            </button> */}
+            {outputFile !== null && (
+              <a
+                href={outputFile.data}
+                download="stl-export.stl"
+                className="btn btn-blue"
+              >
+                Download STL
+              </a>
+            )}
+            <pre>{JSON.stringify({ outputFile }, null, 4)}</pre>
+          </div>
+        );
+      }}
+    </OpenJSCAD>
+  );
+};
+
+export default Index;
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: ["tailwindcss", "postcss-preset-env"]
+};
diff --git a/src/PageHeader.tsx b/src/PageHeader.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+
+// // // //
+
+export function PageHeader() {
+  return (
+    <nav className="flex items-center justify-between flex-wrap bg-blue-400 p-6">
+      <div className="flex items-center flex-no-shrink text-white mr-6">
+        <span className="font-semibold text-xl tracking-tight">
+          OpenJSCAD React Next.js Starter
+        </span>
+      </div>
+      <div className="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
+        <div className="text-sm lg:flex-grow">
+          <a
+            href="#responsive-header"
+            className="block mt-4 lg:inline-block lg:mt-0 text-blue-300 hover:text-white mr-4"
+          >
+            Documentation
+          </a>
+          <a
+            href="#responsive-header"
+            className="block mt-4 lg:inline-block lg:mt-0 text-blue-300 hover:text-white mr-4"
+          >
+            Examples
+          </a>
+          <a
+            href="#responsive-header"
+            className="block mt-4 lg:inline-block lg:mt-0 text-blue-300 hover:text-white"
+          >
+            Blog
+          </a>
+        </div>
+      </div>
+    </nav>
+  );
+}
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,14 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Tailwind abstractions */
+.btn {
+  @apply font-bold py-2 px-4 rounded;
+}
+.btn-blue {
+  @apply bg-blue-500 text-white;
+}
+.btn-blue:hover {
+  @apply bg-blue-700;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  future: {},
+  purge: [],
+  theme: {
+    extend: {}
+  },
+  variants: {},
+  plugins: []
+};
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "alwaysStrict": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "lib": [
+      "dom",
+      "es2017"
+    ],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "strict": true,
+    "target": "esnext",
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true
+  },
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ]
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# openjscad-react-next-starter

		A web starter project with OpenJSCAD, React, Next.js, TypeScript, and Netlify. Built with [openjscad-react](https://github.com/aeksco/openjscad-react).
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="next" />
		/// <reference types="next/types/global" />