Welcome to the Svelte Website Template repository! This project provides a foundational template for creating dynamic websites using Svelte. Please note that this project is currently a work in progress, so some features might not work as expected. Your contributions and feedback are highly appreciated! You may also modify and use the source code in any way you like.
- Responsive Design: The template uses TailwindCSS to ensure responsive design and modern UI elements.
- Dark Mode: The template comes with a built in dark mode switch.
- Animated Elements: Enhance user experience with smoothly animated elements.
- User Authentication: A complete user system for login and signup.
- Persistent Sessions: Uses cookies to maintain user login sessions.
- Forum Functionality: Users can create, view, and interact with posts.
- User Dashboard: A personal dashboard for users to manage their posts and profile settings.
- Database Integration: Supports databases compatible with Prisma.
- Data Persistence: Main functionality includes saving user details and forum posts in the database.
Before you begin, ensure you have met the following requirements:
- Node.js: Ensure Node.js is installed on your machine. You can download it from Node.js official website.
- npm: npm is included with Node.js, but you can check if it’s installed by running
npm -vin your terminal. - Prisma: Prisma CLI installed globally. Install it via npm:
npm install -g prisma# Clone the repository using HTTPS
git clone https://github.com/s-marshal-dev/svelte-website-template.git
# Navigate to the project directory
cd svelte-website-template# prisma generate is included in the script
npm run buildMake sure you are using a database that is compatible with Prisma.
# Make sure to run npx prisma generate if you edit the ENV file
DATABASE_URL="your database URL"npx prisma db seedThis seeder creates 3 Users, JohnDoe, Admin, Moderator. They all have the Password "1234". Additionally it creates 4 Placeholder Forum posts.
import { PrismaClient } from '@prisma/client';
import { hashSync } from 'bcrypt-ts';
const prisma = new PrismaClient();
let passworduser1 = hashSync("1234")
let passworduser2 = hashSync("1234")
let passworduser3 = hashSync("1234")
async function main() {
// Create users
const user1 = await prisma.user.create({
data: {
user_username: 'JohnDoe',
user_username_lower: 'johndoe',
user_password_hash: passworduser1,
user_email: '[email protected]',
user_description: 'A regular user',
user_role: 'USER',
},
});
const user2 = await prisma.user.create({
data: {
user_username: 'Admin',
user_username_lower: 'admin',
user_password_hash: passworduser2,
user_email: '[email protected]',
user_description: 'An admin user',
user_role: 'ADMIN',
},
});
const user3 = await prisma.user.create({
data: {
user_username: 'Moderator',
user_username_lower: 'moderator',
user_password_hash: passworduser3,
user_email: '[email protected]',
user_description: 'A moderator user',
user_role: 'MODERATOR',
},
});
// Create posts
const post1 = await prisma.post.create({
data: {
title: 'My First Post!',
content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit ',
author: { connect: { user_id: user1.user_id } },
},
});
const post4 = await prisma.post.create({
data: {
title: 'My Second Post!',
content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit ',
author: { connect: { user_id: user1.user_id } },
},
});
const post2 = await prisma.post.create({
data: {
title: 'Forum Rules',
content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit ',
author: { connect: { user_id: user2.user_id } },
},
});
const post3 = await prisma.post.create({
data: {
title: 'A Guide to Moderating',
content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit ',
author: { connect: { user_id: user3.user_id } },
},
});
}
main()
.catch((e) => {
console.error(e);
process.exit(1);
})
.finally(async () => {
await prisma.$disconnect();
});This is a list of currently used Plugins;
- Tailwindcss
- Prisma
- svelte-splide
- tailwindcss-animated
- bcrypt-ts
To start the development server, run:
# Runs only locally, so you can test before commiting anything
npm run devContributions are what make the open-source community such an amazing place to be, learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (git checkout -b feature/AmazingFeature)
- Commit your Changes (git commit -m 'Add some AmazingFeature')
- Push to the Branch (git push origin feature/AmazingFeature)
- Open a Pull Request
Distributed under the Unlicense License. See LICENSE for more information.
Happy coding!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent