Merge pull request #5 from matthieubosquet/minimal-styles

Added minimal styling to form interface, Added .env to gitignore, int…

Author: matthieubosquet

.env.example

@@ -0,0 +1,16 @@
+# Example environment variables for this project
+# Copy this file to `.env.local` (or `.env`) and fill in real values before running the app.
+
+# The URI of the Solid container used by the demo Community Solid Server
+# Default for local dev (Community Solid Server started by `npm run start:css`)
+NEXT_PUBLIC_BASE_URI="http://localhost:3001/"
+
+# The manifest resource file used by the app (relative to the container root)
+NEXT_PUBLIC_MANIFEST_RESOURCE_URI="resource.ttl"
+
+# Admin WebID used for booting the demo (replace with your WebID)
+NEXT_PUBLIC_ADMIN_WEBID="https://id.inrupt.com/your-webid"
+
+# Notes:
+# - Never commit secrets. This file is safe to commit because it contains placeholders only.
+# - For private credentials (if any), keep them in `.env` or `.env.local` which are ignored by git.

.env.local

@@ -41,3 +41,4 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 /.vs
+.env.local

.gitignore

@@ -11,7 +11,16 @@ Therefore, you need a [WebID](https://solid.github.io/webid-profile/) to correct
 
 A WebID is a URL you control and can use to sign in to Solid Apps.
 
-Before running the app, set the `NEXT_PUBLIC_ADMIN_WEBID` environment variable in .env.local.
+Before running the app, set the `NEXT_PUBLIC_ADMIN_WEBID` environment variable in `.env.local`.
+
+Environment variables
+---------------------
+
+This project includes a `.env.example` file with the placeholders for environment variables used by the app (for example `NEXT_PUBLIC_BASE_URI`, `NEXT_PUBLIC_MANIFEST_RESOURCE_URI`, and `NEXT_PUBLIC_ADMIN_WEBID`).
+
+Copy the example to a local env file and edit values before running the app
+
+Note: `.env` and `.env.local` are ignored by git by default (see `.gitignore`), so you can keep private credentials locally without committing them. The `.env.example` file is safe to commit and documents which variables are required.
 
 ### Creating a WebID
 

README.md

@@ -12,6 +12,7 @@ import { List, Item } from "../../ldo/Model.typings";
 import { Config } from "../../Config";
 import { ListViewer } from "../../components/ui/ListViewer";
 import { fetchList } from "../../fetchList";
+import style from "../../styles/ListEditorStyle.module.css";
 
 export function ListEditor() {
     const [newName, setNewName] = useState("");
@@ -31,12 +32,12 @@ export function ListEditor() {
             <>
                 <ListViewer data={list} deleteHandler={removeItem} />
 
-                <form onSubmit={addItem}>
-                    <fieldset>
-                        <legend>new item</legend>
+                <form onSubmit={addItem} className={style.form_cont}>
+                    <fieldset className={style.fieldset_cont}>
+                        <legend>New Item</legend>
                         <div>
                             <label>
-                                <span>name</span>
+                                <span>Name</span>
                                 <input
                                     required
                                     value={newName}
@@ -46,7 +47,7 @@ export function ListEditor() {
                         </div>
                         <div>
                             <label>
-                                <span>description</span>
+                                <span>Description</span>
                                 <input
                                     required
                                     value={newDescription}
@@ -57,8 +58,8 @@ export function ListEditor() {
                             </label>
                         </div>
                         <div>
-                            <label>
-                                <span>featured</span>
+                            <label className={style.checkbox_label}>
+                                <span>Featured</span>
                                 <input
                                     type="checkbox"
                                     checked={newFeatured}
@@ -70,7 +71,7 @@ export function ListEditor() {
                         </div>
                         <div>
                             <label>
-                                <span>website</span>
+                                <span>Website</span>
                                 <input
                                     required
                                     type="url"
@@ -83,7 +84,7 @@ export function ListEditor() {
                         </div>
                         <div>
                             <label>
-                                <span>thumbnail</span>
+                                <span>Thumbnail</span>
                                 <input
                                     required
                                     type="file"

package-lock.json

@@ -0,0 +1,45 @@
+.form_cont {
+    background-color: white;
+    padding: 1rem;
+    border-radius: 8px;
+}
+
+.fieldset_cont {
+    max-width: 600px;
+    margin: 0 auto;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border: none;
+    border-radius: 8px;
+    padding: 20px 16px;
+}
+
+.checkbox_label {
+    display: flex;
+    flex-direction: row !important;
+    align-items: center;
+    gap: 8px;
+}
+
+.fieldset_cont label {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.fieldset_cont label span {
+    font-weight: 600;
+    color: #333;
+}
+
+.fieldset_cont input[type="text"],
+.fieldset_cont input[type="url"],
+.fieldset_cont input[type="file"] {
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 1rem;
+}