Skip to content

Ruby fixes #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 23 commits into from
Feb 18, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
4902b02
Added light and dark mode support with CSS variables and button for t…
codehath Dec 14, 2024
413f3a0
Fixed nav buttons being inactive on login page
codehath Dec 14, 2024
e9071e1
Restored gradient for background and added gradient for dark mode
codehath Dec 14, 2024
3eb0e0f
Reformatted all files with prettier
codehath Dec 14, 2024
cc74979
Replaced css hex codes with variables
codehath Dec 15, 2024
04178b4
Replaced img tags with inline SVGs to implement dark mode
codehath Dec 15, 2024
59473a4
Refactored triplet-container code and fixed transparent dashboard con…
codehath Dec 15, 2024
3f09ad7
Added inline svg to dashboard for dark mode - top buttons aren't cent…
codehath Dec 16, 2024
80227cc
fix: merge conflict - deleted package-lock
codehath Feb 7, 2025
fdd30da
fix: formatting
codehath Feb 7, 2025
cb80400
fix: formatting
codehath Feb 7, 2025
c128158
Merged main into dark-mode branch
codehath Feb 7, 2025
a96757a
feat: replaced all hard coded colours with css vars
codehath Feb 7, 2025
30884cc
fix: Changed colours of multiple pages for dark mode and changed css …
codehath Feb 13, 2025
1325419
fix: Fixed some dark mode colour issues
codehath Feb 13, 2025
4e4d276
fix: more dark mode colour changes
codehath Feb 14, 2025
2e15434
fix: missied file for last commt
codehath Feb 14, 2025
c44ebd9
fix: Remove system dark mode preference detection and default to ligh…
codehath Feb 14, 2025
910786e
Addeed db.local.ts for local postgres instance
codehath Feb 18, 2025
9bcb8ab
Addeed setup instructions and vars to .env
codehath Feb 18, 2025
2458251
fix: removed svgs, created divs and tweaked colours
seresino Feb 18, 2025
41d1f05
Changed db.ts to work with serverless db
codehath Feb 18, 2025
847755b
Remove duplicate css variables
codehath Feb 18, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion .env.example
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,7 @@ VITE_DATABASE_HOST=localhost
VITE_DATABASE_USERNAME=
VITE_DATABASE_PASSWORD=
VITE_DATABASE_PORT=
VITE_DATABASE_NAME=dipp
VITE_DATABASE_NAME=dipp
VITE_DB_URL=
POSTGRES_URL=

4 changes: 1 addition & 3 deletions .vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
{
"recommendations": [
"tabnine.tabnine-vscode"
]
"recommendations": ["tabnine.tabnine-vscode"]
}
108 changes: 86 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,38 +1,102 @@
# create-svelte
# DIPP

Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
A SvelteKit application with TypeScript support.

## Creating a project
## Prerequisites

If you're seeing this, you've probably already done this step. Congrats!
- Node.js (v18 or higher recommended)
- pnpm (v8 or higher)

```bash
# create a new project in the current directory
npm create svelte@latest
## Setup Instructions

# create a new project in dipp
npm create svelte@latest dipp
```
1. Install pnpm if you haven't already:
```bash
npm install -g pnpm
```

## Developing
2. Install dependencies:
```bash
pnpm install
```

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
3. Start the development server:
```bash
pnpm dev
```

```bash
npm run dev
4. Build for production:
```bash
pnpm build
```

# or start the server and open the app in a new browser tab
npm run dev -- --open
```
5. Preview production build:
```bash
pnpm preview
```

## Development

- The application uses SvelteKit as the framework
- TypeScript for type safety
- Local database configuration in `src/lib/server/db.local.ts`
- Dashboard routes available at `/dashboard`

## Scripts

- `pnpm dev` - Start development server
- `pnpm build` - Create production build
- `pnpm preview` - Preview production build
- `pnpm check` - Run svelte-check
- `pnpm lint` - Run linter
- `pnpm format` - Format code with Prettier

## Building
## Environment Variables

To create a production version of your app:
Create a `.env` file in the root directory with the following variables:

```bash
npm run build
# Firebase Configuration
VITE_API_KEY=your_firebase_api_key
VITE_AUTH_DOMAIN=your_firebase_auth_domain
VITE_PROJECT_ID=your_firebase_project_id
VITE_STORAGE_BUCKET=your_firebase_storage_bucket
VITE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
VITE_APP_ID=your_firebase_app_id

# Database Configuration
VITE_DATABASE_HOST=localhost
VITE_DATABASE_USERNAME=your_database_username
VITE_DATABASE_PASSWORD=your_database_password
VITE_DATABASE_PORT=5432

# Constructed Database URL (used internally)
VITE_DB_URL=postgres://${VITE_DATABASE_USERNAME}:${VITE_DATABASE_PASSWORD}@${VITE_DATABASE_HOST}:${VITE_DATABASE_PORT}/your_database_name
```

You can preview the production build with `npm run preview`.
### How to Get the Variables

1. **Firebase Configuration**:
- Go to your Firebase Console (https://console.firebase.google.com/)
- Select your project (or create a new one)
- Go to Project Settings > General
- Scroll down to "Your apps" and create or select a web app
- The configuration variables will be shown in the Firebase SDK snippet

2. **Database Configuration**:
- If using a local PostgreSQL database:
- Set `VITE_DATABASE_HOST` to `localhost`
- Use your local PostgreSQL username, password, and port
- If using a hosted PostgreSQL service (like Supabase, Neon, etc.):
- Get the connection details from your database provider's dashboard
- Fill in the host, username, password, and port accordingly

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
Remember to never commit the `.env` file to version control. A `.env.example` file is provided as a template.

## Project Structure

```
src/
├── lib/
│ └── server/ # Server-side code including database
└── routes/ # SvelteKit routes
└── dashboard/ # Dashboard related components
12 changes: 6 additions & 6 deletions drizzle.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import "dotenv/config";
import { defineConfig } from "drizzle-kit";

export default defineConfig({
out: "./drizzle",
schema: "./src/lib/server/schema.ts",
dialect: "postgresql",
dbCredentials: {
url: process.env.VITE_DB_URL!,
},
out: "./drizzle",
schema: "./src/lib/server/schema.ts",
dialect: "postgresql",
dbCredentials: {
url: process.env.VITE_DB_URL!,
},
});
Loading