Project Structure

This article provides an overview of the NUS Digital Twin code base.

General Structure

• astro.config.mjs
• package.json
• README.md
• tsconfig.json
• Directory.husky/

  • …
• Directorypublic/

  • …
• Directorysrc

  • Directoryassets/

    • …
  • Directorycomponents/

    • …
  • Directorycontent/

    • …
  • Directorylayouts/

    • …
  • Directorypages/

    • …
  • Directorystyles/

    • …
  • content.config.ts
  • store.ts
  • types.ts

The Astro config File

The Astro config file at the root of the repository contains the configuration for the whole Astro project.

• astro.config.mjs
• Directorypublic/

  • …
• Directorysrc/

  • …
• …

Read Astro’s configuration reference for a full overview of all supported configuration options.

The public/ directory

The public/ directory contains assets that are directly added to the application without being processed by Astro.

• …
• Directorypublic/

  • …
• Directorysrc/

  • …
• …

The public/ directory includes the following files:

• 3D Models files, such as .glTF, .dae, and .3dm files
• GIS Shapefiles and its accompanying files
• EnergyPlus .idf files
• Tutorial videos
• Other downloadable assets, such as .zip files

The public/ directory is organised such that assets for each building is stored in its respective sub-directories. The sub-directories are as follows:

• Directorypublic

  • Directory<building-name> For building-level models and EnergyPlus

    • <building-name>.idf
    • <building-name>.glTF
    • <building-name>.3dm
  • Directoryshapefiles For GIS shapefiles

    • Directory<shapefile-type>

      • <name>.shp
      • <name>.zip
      • …
  • Directorytutorials For tutorial videos

    • <name>.mp4
    • …
  • Directoryurban For Urban Scale Rhino model

    • rhino-urban.glTF
    • Directorydata/ Cesium 3DTiles

      • …

The src/ directory

The src/ directory contains the main source code that powers NUS Digital Twin.

• …
• Directorypublic/

  • …
• Directorysrc/

  • …
• …

The assets/ directory

The assets/ directory contains assets that are processed by Astro, such as images.

• Directorysrc

  • Directoryassets/

    • …
  • Directorycomponents/

    • …
  • …

The assets/ directory is organised such that assets for each building is stored in its respective sub-directories. Global assets are stored within the assets/ directory.

• Directorysrc/assets

  • Directory<building-name> For building images

    • image.png
    • image.jpg
    • …
  • global-asset.png For global images
  • …

Refer to Astro’s image documentation for more details.

The components/ directory

The components/ directory contains Astro and React components used across the application.

• Directorysrc

  • Directoryassets/

    • …
  • Directorycomponents/

    • …
  • …

There are several sub-directories and files contained within the components/ directory:

• bottom-bar/: The bottom bar on the main application.
• cesium/: The cesium view on the main application.
• docs/: Custom components used for the documentation site. See Writing Documentation.
• menu/: The left, right and bottom menus on the main application.
• notifications/: The notification system (toast) on the main application.
• primitives/: Reusable UI components.
• toolbar/: The toolbar found at the bottom of the screen, such as the Reset View button.

The content/ directory and content config File

The content/ directory contains the json, md and mdx files for Content Collections in Astro. This includes the content files for the documentation site, building and point data used across the application.

The content.config.ts file specify the shape of the content. See The collection config file in Astro’s documentation for more details.

• Directorysrc

  • Directoryassets/

    • …
  • Directorycontent/

    • …
  • content.config.ts
  • …

The layouts/ directory

The layouts/ directory contains reusable page templates used for the application. See Layouts in Astro’s documentation.

• Directorysrc

  • Directoryassets/

    • …
  • Directorycontent/

    • …
  • Directorylayouts/

    • …
  • …

The pages/ directory

The pages/ directory contains the pages for the application. Astro utilises a file-based routing strategy. See Pages in Astro’s documentation for more information.

• Directorysrc

  • Directoryassets/

    • …
  • Directorycontent/

    • …
  • Directorypages/

    • …
  • …

The styles/ directory

The styles/ directory contains the styles used across the application, mostly in .scss and .css files.

• Directorysrc

  • Directoryassets/

    • …
  • Directorycontent/

    • …
  • Directorypages/

    • …
  • Directorystyles/

    • …
  • …