GithubHelp home page GithubHelp logo

danmarshall / jscad-gallery Goto Github PK

View Code? Open in Web Editor NEW
18.0 3.0 11.0 1.38 MB

๐ŸŽฒโšฝ๐Ÿ—ฟ Create a gallery of OpenJSCAD 3D designs

Home Page: https://danmarshall.github.io/jscad-gallery

License: MIT License

HTML 0.36% JavaScript 97.99% CSS 0.04% TypeScript 1.62%

jscad-gallery's Introduction

jscad-gallery

A collection of OpenJSCAD 3D designs

https://danmarshall.github.io/jscad-gallery

This project uses Jekyll to create a web site that you can host on GitHub pages.

Setup

  1. Fork this repo.
  2. On your fork's GitHub page, go to Settings.
  3. On the Settings page, scroll to the GitHub Pages section, and enable it on your master branch.
  4. In about one minute, visit https://your-github-username.github.io/jscad-gallery/ to see your personal jsad-gallery.

Run the site locally

  1. Install Jekyll
  2. Clone your fork on your local machine.
  3. cd to your jscad-gallery clone's folder
  4. npm install
  5. jekyll serve
  6. See your local site on http://localhost:4000

To add your design to the local site:

If your design is a Node module

  1. Install your package:

    npm install your-package-name

    or, if you aren't published to NPM:

    npm install your-git-remote-url

  2. Generate your design files:

    npm run build-design your-package-name

If your design is a .jscad file

  • npm run build-jscad path-to-your-jscad-file.jscad

    Note - this will convert your .jscad file to a Node.js module. Look in your node_modules/@jscad-gallery folder.

    If you would like to edit your design's metadata, change the node_modules/@jscad-gallery/your-package-name/package.json file. You can then regenerate the new Node.js module directly by calling npm run build-design @jscad-gallery/your-jscad-package-name as above.

Finalizing your design preview

After invoking either type of command above, a temporary local web page will appear. Follow the instructions to create a thumbnail image and post metadata. You may need to close all browser tabs to complete the process.

This will create 4 files that enable your jscad design on the site:

  • browser_modules/your-package-name/version-number.js - The browserified executable module that creates your 3D design.
  • browser_modules/your-package-name/compact-binary.js - The cached 3D solid data for a quick preview rendering of your design in the jscad viewer.
  • browser_modules/your-package-name/thumbnail.png - A thumbnail image of your design.
  • _posts/yyyy-mm-dd-your-package-name.md - The Jekyll database entry for your design.

Refresh your http://localhost:4000 to see your design on the site.

To add your design to the GitHub pages site:

  1. Stage your local changes:

    git add .

  2. Commit your local changes:

    git commit -m "added your-package-name"

  3. Push to your remote fork:

    git push

In about a minute, your design will be live on your site at https://your-github-username.github.io/jscad-gallery/

jscad-gallery's People

Contributors

danmarshall avatar dependabot[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

jscad-gallery's Issues

Image dump

Attach images here for hosting ๐Ÿš›

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.