Merge pull request #32 from KNowledgeOnWebScale/EDC_active

Changing the branding, some small bug fixes, and QoL improvements

README.md

@@ -1,43 +1,45 @@
-# TRIPLE_upload_dev
+![Solid Cockpit Header Logo](./src/assets/full-sc-logo.png "SC Logo")
 
-## This is an early workflow for: 
-1. Setting up and locally hosting Solid pod
-2. Uploading data into that pod via the TRIPLE App
-3. Future aims -- see pod contents, edit data privacy, query data via sparql queries
 
 
-#### Requirements:
-- [Node.js](https://nodejs.org/en/)
-    -Version 18 or higher.
+---
 
-#### Getting Started:
-1. Navigate to the webpage (where there are some nice instructions):
+# Solid Cockpit
 
-   `https://ecrum19.github.io/TRIPLE_App/`
+This repository contains all code and guides for the Solid Cockpit web application. Solid Cockpit is an intuitive web application for accessing, editing, and interacting with Solid Pods. 
 
-2. Clone this git repo
+This applicaiton was originally made for the CHIST-ERA TRIPLE project. For additional getting started guides and information about this project please see ... .
 
-   `git clone https://github.com/ecrum19/TRIPLE_App.git`
+**To use this App, you need to already have a Solid Pod! **
 
-3. Navigate to the created directory
 
-   `cd TRIPLE_App/`
 
-4. Follow the instructions on the home page of the [TRIPLE App](ecrum19.github.io/TRIPLE_App/) website!
+## Ways to Get a Solid Pod:
 
+- [Community Solid Server](https://communitysolidserver.github.io/CommunitySolidServer/latest/): For hosting a Solid Pod on your local machine or on a custom server.
+- [Solidcommunity.net](https://solidcommunity.net/): A community-run Solid server (very easy).
+- [Other Solid Pod Hosting Services](https://solidproject.org/for-developers#hosted-pod-services): A catologue of other services that offer Solid Pod hosting.
 
-#### Notes:
-**General issues:**
 
-- The Pod Browser does not work properly yet. That is something that will be implemented in the near future.
-- When uploading a file, the "Success" message will almost always appear (has to do with Promise handling). I will fix this issue and add a loading icon while file is uploading soon as well.
+
+## Contribute
+
+Code contributions are welcome! Please commit any pull requests against the `main` branch. Learn more about how to contribute by reading the [Contributing Guidelines](https://contributing.bitwarden.com/contributing/). Check out the [Contributing Documentation](https://contributing.bitwarden.com/) for how to get started with your first contribution.
+
+Issue reporting and other general feedback are welcome. Please use GitHub Issues open an issue or GitHub Discussions where applicable.
+
+
+
+## Development Notes:
+
+#### General issues:
+
+- The Pod Browser and query functionalities do not work properly yet. That is something that will be implemented in the near future.
 - If weird things start to happen with athn issues, clear browser history and cookies and it should fix things.
 
+
+
 #### TO DO:
-- (Optional) -- 
-  - A. ...
-  - B. Fix Pod Browser so that it actually displays pod contents
-
 
 **Data Upload:**
 
@@ -60,4 +62,13 @@
 **Data Privacy:**
 
 10. A view of the current privacy
+
 11. A way to add/change privacy
+
+
+
+---
+
+
+
+Enjoy using Solid Cockpit!

TRIPLE-guide.md

@@ -0,0 +1,91 @@
+# TRIPLE Getting Started Guide
+
+👋 Welcome to the TRIPLE Getting Started Guide! This document will help you set up a Solid Pod and introduce you to the features of the Solid Cockpit app. Follow the steps carefully to get up and running 🚀
+
+
+
+## 🎯 Objectives of This Guide
+
+1. Setting up a Solid Pod (that is accessible via the internet)
+2. Logging into your Pod at any time (after setting it up)
+3. Understanding the features and functionalities of the Solid Cockpit app.
+4. Overview of future capabilities, such as managing pod contents, adjusting data privacy, and querying data using SPARQL.
+
+
+
+## 🌐 Setting Up a Solid Pod (Online)
+
+To **set up** your Solid Pod using the TRIPLE platform, follow these steps:
+
+1. **🔗 Navigate to our Solid Pod Hosting website**
+   - Go to [https://triple.ilabt.imec.be/](https://triple.ilabt.imec.be/)
+   - ~~Use the following credentials to enter the site:~~
+     - ~~**Username**: `triple`~~
+     - ~~**Password**: `solid`~~
+
+2. **🔐 Sign Up to make a Pod**
+   - Click **Sign Up** (assuming this is your first time)
+
+3. **🛠️ Create Your Solid Pod**
+   - Once you are on the **Your Account** page, click on **Create Pod**.
+   - Enter a name for your new pod and click **Create Pod**.
+   - After creating your pod, return to the home page by clicking **Back**.
+
+## 🔑 Logging into your Solid Pod (after creation)
+1. **Navigate to our Solid Pod Hosting website**
+
+   - Go to [https://triple.ilabt.imec.be/](https://triple.ilabt.imec.be/)
+   - ~~Use the following credentials to enter the site:~~
+     - ~~**Username**: `triple`~~
+     - ~~**Password**: `solid`~~
+
+2. **Login using your credentials**
+
+   - Click **Login** (assuming you have already made an account)
+
+     
+
+## 🛫 Using the Solid Cockpit App
+
+The Solid Cockpit app provides several functionalities for managing and interacting with your Solid Pod.
+
+### ✨ Available Features
+
+1. 📝 **Data Upload**
+   - Upload data to your Pod.
+   - When uploading RDF data, file validity can be assessed before uploading.
+   - Specify and modify the metadata of uploaded files.
+
+2. 🗂️ **Data Browser**
+   - View, modify, move, and delete the contents of your Pod.
+   - Explore and edit the container structure of your Pod.
+
+3. 🔍 **Data Query** (under construction)
+   - An editor to write SPARQL queries to interact with data in your Pod, the Pods of others, and SPARQL Endpoints.
+   - A user input to designate the sources for the queries.
+   - Options that impact the the output formats, query execution, and other relevant parameters.
+
+4. 🔒 **Data Privacy Management**
+   - View the current privacy settings for your data (Read, Write, and Append).
+   - Add or change privacy settings to containers and resources in your Pod.
+   - Give and receive notifications related to new access rights to the data of others.
+
+
+
+## 🔮 In the Near Future
+
+- Improve the functionality of the Pod Browser for displaying pod contents effectively.
+- Create interface for querying pod(s) (and SPARQL endpoints).
+- Integrate example query catalogue for the querying functionality.
+- Enhance privacy management display
+
+> Stay tuned for future updates that will bring more features and improvements to the Solid Cockpit app, making it more powerful and easier to use.
+
+
+
+## 🤝 Support and Further Information
+
+If you encounter issues during setup or usage, please consult our support resources or reach out to our support team for assistance.
+
+---
+🙏 We hope you find this guide helpful in setting up and exploring your Solid Pod. For questions or comments: [go here](https://github.com/KNowledgeOnWebScale/solid-cockpit/discussions). To report bugs or problems: [try here](https://github.com/KNowledgeOnWebScale/solid-cockpit/issues).

src/assets/color_palette.md

@@ -0,0 +1,6 @@
+* **main**: `68, 85, 96` | `#445560` <span style="background-color: #445560; color: white; padding: 3px 10px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
+* **darker1**: `40, 53, 62` | `#28353e` <span style="background-color: #28353e; color: white; padding: 3px 10px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
+* **lighter**: `169, 167, 173` | `#a9a7ad` <span style="background-color: #a9a7ad; color: black; padding: 3px 10px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
+* **purple**: `117, 79, 246` | `#754ff6` <span style="background-color: #754ff6; color: white; padding: 3px 10px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
+* **purple1**: `236, 231, 245` | `#EDE7F6` <span style="background-color: #EDE7F6; color: black; padding: 3px 10px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
+* **black**: `0, 0, 0` | `#000000` <span style="background-color: #000000; color: white; padding: 3px 10px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>

src/assets/main.css

@@ -1,10 +1,9 @@
 body {
-  background-color: #b0c4de; /* This is a light grey color */
-  font-family: "Arial", sans-serif; /* This sets the font to Arial */margin: 0;
+  background-color: #a9a7ad;
   margin: 0;
 }
 
 #app {
-  color: #333; /* This sets the text color inside the #app div to a dark grey */
+  color: #EDE7F6; /* This sets the text color inside the #app div to a dark grey */
 }