Hide unnecessary js and css files from Artifact tab

I have created orb which is used to do scan of repository and based on scanning response it generates html report, so I have referred bootstrap,datatable,google chart libraries, I don’t want js and css to take from cdn, I have referred those files from temp location inside html file, but user is seeing html, js and css files, I don’t want to user see js and css files, is it possible in circleci ?


Following orb code attaching files in artifact tab

  • store_artifacts:
    path: /tmp/ScanResult/
    destination: artifact-file
1 Like

Hello

I do not believe it is possible to exclude a specific file type when uploading artifacts, you could use a command to move the files out of the folder temporarily and then run the upload and move the files back this would stop them from being included.

Kind Regards
Owen Oliver

I am working on it. I will get back to you in a while.

To hide the JavaScript and CSS files from users while still allowing your orb to use them, you can utilize a method called “inline embedding” for your styles and scripts directly within the HTML file. This way, users will only see the HTML file, and the referenced scripts and styles will be embedded within it.

Here’s a high-level guide on how you can achieve this:

  1. Inline the CSS and JS:

    • Open your HTML file.
    • Copy the content of your CSS file and paste it within a <style> tag in the <head> section of your HTML.
    • Similarly, copy the content of your JS file and paste it within a <script> tag, preferably just before the closing </body> tag.
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
          /* Your CSS content here */
        </style>
      </head>
      <body>
        <!-- Your HTML content here -->
        <script>
          // Your JS content here
        </script>
      </body>
    </html>
    
  2. Update Your CircleCI Configuration:

    • Ensure that your artifact includes only the HTML file.
    store_artifacts:
      path: /tmp/ScanResult/your-html-file.html
      destination: artifact-file
    
  3. Serve HTML File:

    • When sharing the generated report, serve the HTML file. You can use GitHub Pages, an HTTP server, or any other means to serve the HTML file.

By inline embedding your CSS and JS directly within the HTML file, users won’t need to access separate JS and CSS files. They will only interact with the HTML file, making it cleaner and more user-friendly.

Below are the finest learning platforms

  1. HTML Tutorial
  2. https://iqratechnology.com/academy/css-training/
  3. Learn JavaScript Tutorial - javatpoint