add some about text

eslint.config.js

@@ -14,8 +14,8 @@ export default [
     },
     rules: {
       'no-unused-vars': ['error', {
-        varsIgnorePattern: "[A-Z][a-z]+",
-      }]
+        varsIgnorePattern: '[A-Z](?:[A-Z_]+|[a-z]+)',
+      }],
     },
     files: ["src/**/*.js", "src/**/*.jsx"],
   },

src/components/Header.jsx

@@ -1,9 +1,14 @@
 import { useLocation } from 'preact-iso';
 import openneptuneLogo from '../assets/OpenNept4une.svg';
+import githubLogo from '../assets/github-mark.svg';
 
 export function Header() {
 	const { url } = useLocation();
 
+	// @ts-ignore
+	// eslint-disable-next-line no-undef
+	const githubRepo = __GITHUB_REPO__;
+
 	return (
 		<header>
 			<a href={import.meta.env.BASE_URL}>
@@ -16,6 +21,9 @@ export function Header() {
 				<a href={import.meta.env.BASE_URL+"about"} class={url == import.meta.env.BASE_URL+'about' && 'active'}>
 					About
 				</a>
+				<a href={githubRepo}>
+					<img src={githubLogo} class="github" />
+				</a>
 			</nav>
 		</header>
 	);

src/pages/About/index.jsx

@@ -1,8 +1,26 @@
 import './style.css';
 
 export function About() {
+	// @ts-ignore
+	// eslint-disable-next-line no-undef
+	const githubRepo = __GITHUB_REPO__;
+	// @ts-ignore
+	// eslint-disable-next-line no-undef
+	const discordInvite = __DISCORD_INVITE__;
 	return (
 		<div class="about">
+			<h1>About</h1>
+			<div class="about_box box">
+				<p>The OpenNeptune3D Slicer Generator is a simple tool to generate configuration profiles for slicers supported by the OpenNeptune3D project.</p>
+				<p>It is designed to be a simple way to generate a configuration profile for your printer, with the ability to select the filaments and print processes you want to include in your profile.</p>
+			</div>
+
+			<div class="about_box box">
+				<h2>Community Contributed Profiles</h2>
+				<p>We are also collecting a list of community contributed profiles to include in this tool.</p>
+				<p>You can create a <a href={githubRepo + "/pulls"} target="_blank">Pull Request on Github</a> with your printer, filament or print process profiles to contribute to this list.</p>
+				<p>Alternatively you can provide your profile in our <a href={discordInvite} target="_blank">Discord</a> if you do not have a Github account.</p>
+			</div>
 		</div>
 	);
 }

src/pages/About/style.css

@@ -0,0 +1,7 @@
+.about_box {
+	padding: 0.75rem 1.5rem;
+	border-radius: 0.5rem;
+	text-align: left;
+	text-decoration: none;
+	margin-top: 2rem;
+}

src/pages/Generator/style.css

@@ -18,9 +18,6 @@
 	border-radius: 0.5rem;
 	text-align: left;
 	text-decoration: none;
-	color: #222;
-	background-color: #f1f1f1;
-	border: 1px solid transparent;
 	margin-top: 1rem;
 }
 
@@ -33,9 +30,6 @@
 	border-radius: 0.5rem;
 	text-align: left;
 	text-decoration: none;
-	color: #222;
-	background-color: #f1f1f1;
-	border: 1px solid transparent;
 	margin-top: 2rem;
 }
 
@@ -44,9 +38,6 @@
 	border-radius: 0.5rem;
 	text-align: center;
 	text-decoration: none;
-	color: #222;
-	background-color: #f1f1f1;
-	border: 1px solid transparent;
 	cursor: pointer;
 	flex: calc(100% / 4);
 }
@@ -142,17 +133,19 @@ input {
 	accent-color: #408edf;
 }
 
+.empty {
+	text-align: center;
+	margin: 2rem 0rem;
+	color: #666;
+}
+
+.github {
+	width: 28px;
+	height: 28px;
+}
+
 @media (prefers-color-scheme: dark) {
-	.resource {
-		color: #ccc;
-		background-color: #222;
-	}
 
-	.generator-type {
-		color: #ccc;
-		background-color: #222;
-	}
-
 	.generator-type:hover {
 		border: 1px solid #408edf;
 	}

src/style.css

@@ -73,6 +73,12 @@ main {
 	margin: 0 auto;
 	text-align: center;
 	margin-bottom: 5rem;
+	max-width: 900px;
+}
+
+a {
+	text-decoration: none;
+	color: #5aaaff;
 }
 
 @media (max-width: 639px) {

vite.config.js

@@ -7,6 +7,10 @@ export default defineConfig({
 	build: {
 		sourcemap: true,
 	},
+	define: {
+		__GITHUB_REPO__: JSON.stringify('https://github.com/OpenNeptune3D/slicer-generator'),
+		__DISCORD_INVITE__: JSON.stringify('https://discord.gg/rzRnvh5NFv'),
+	},
 	plugins: [
 		preact({
 			prerender: {