Giter Club home page Giter Club logo

dpel-website's Introduction

DPEL Website Doc

DPEL: Digital Production Example Library A library of digital assets - 3D scenes, digital cinema footage, etc. - that demonstrate the scale and complexity of modern feature film production, including computer graphics, visual effects and animation.

๐Ÿš€ Project Structure

Inside the DPEL project, you'll see the following folders and files:

/
โ”œโ”€โ”€ public/
โ”‚   โ””โ”€โ”€ favicon.svg ( This is the icon that shows up in the browser tab )
โ”‚   โ””โ”€โ”€ images/ ( All images for the site is stored here )
โ”œโ”€โ”€ src/
โ”‚   โ””โ”€โ”€ component/ ( templated elements for the pages )
โ”‚   โ””โ”€โ”€ content/ ( markdown files are all in here )
โ”‚   โ””โ”€โ”€ utils/ ( utility function and constants that augment the site's data & paths & urls )
โ”‚       โ””โ”€โ”€ constants.js ( Augments the site's image paths and urls )
โ”‚   โ””โ”€โ”€ layout/ ( layout of the markdown data and layout of the page )
โ”‚   โ””โ”€โ”€ pages/ 
โ”‚       โ””โ”€โ”€ index.astro ( this is the home page wrapper )
โ”‚   โ””โ”€โ”€ styles/ ( includes the global style of the entire site )
โ””โ”€โ”€ package.json ( dependencies file )

About Astro: Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name. Any static assets, like images, can be placed in the public/ directory.

Project Commands

All commands are run from the root of the project, from a terminal:

Command Action
npm install Installs dependencies
npm run dev Starts local dev server at localhost:3000
npm run build Build your production site to ./dist/
npm run preview Preview your build locally, before deploying
npm run astro ... Run CLI commands like astro add, astro check
npm run astro --help Get help using the Astro CLI

Need NPM, what is NPM?

To run the above commands on your local environment, you will need to install NPM on your own environment. You can install it from here: https://nodejs.org/en/download. Please install based on the OS you are working on. To test if you have the it installed you should be able to type npm install or node -v.

License

Astro: https://github.com/withastro/astro/blob/main/LICENSE

To create a new article page

1.) Go to the src > pages folder and create a new folder. Name the folder to the url name you want. ie. name: 4004-moore-lane -> url end will be /4004-moore-lane. 2.) Create an index.astro file under the new folder. 3.) Copy and paste the code from /alab ( under the same src/pages folder ) and use that as a starter. 4.) Go to the src > content > articles folder and create a .md file. 5.) Copy and paste the markdown layout from DPEL-coming-soon.md. Fill/Edit in the appropriate info as needed. 6.) Go back to the index.astro file under the project folder you set up earlier from /pages. Update this line with your markdown (.md) file name --> const assetContent = await Astro.glob("../../content/articles/fileName.md"); 7.) Save your files and run npm start dev to run the project. 8.) You can check this page by going to the name of the folder you set under the pages/ folder.

To create a new license page

1.) Go under the new folder you made for the article page and create new folder again with the url name you want. 2.) Create an index.astro file under the new folder. 3.) Copy and paste the code from /alab-license ( under the same src/pages folder ) and use that as a starter. 4.) Go to the src > content > license folder and create a .md file. 5.) Copy and paste the markdown layout from alab-license.md. Fill/Edit in the appropriate info as needed. 6.) Go back to the index.astro file under the project's license folder you set up earlier from /pages. Update this line with your markdown (.md) file name --> const licenseContent = await Astro.glob("../../../content/license/license-markdown-file-name.md"); 7.) Save your files and run npm start dev to run the project. 8.) You can check this page by going to the name of the folder you set under the pages/ folder.

There are images on the page

All images should be stored in the public/images/ folder. It is important that they are separated by project/page topic that they will be under for organization.

Still need help?

Please reach out to [email protected] or find us on the ASWF Slack at #assets

dpel-website's People

Contributors

cecilia-dwa avatar ee33 avatar fabiopalumbo avatar jmertic avatar skomatireddy avatar tykeal avatar

Stargazers

 avatar

Watchers

 avatar

Forkers

ceciceciceci

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.