feat: footer, dark mode and functionality card

2026-06-06 01:16:54 +00:00 · 2023-06-10 16:53:22 +02:00
parent aa628f33a7
commit 02be1b8a1e
11 changed files with 225 additions and 41 deletions
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,5 @@
+{
+    "tabWidth": 4,
+    "useTabs": true,
+    "singleQuote": true
+}
--- a/package.json
+++ b/package.json
@@ -8,6 +8,11 @@
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-brands-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.13.4",
    "electron": "^25.1.0",
    "electron-is-dev": "^2.0.0",
--- a/public/electron.js
+++ b/public/electron.js
@@ -1,41 +1,44 @@
-const path = require('path')
+const path = require('path');
 const { app, BrowserWindow } = require('electron');
 const isDev = require('electron-is-dev');

 function createWindow() {
-  const mainWindow = new BrowserWindow({
-    width: 800,
-    height: 600,
-    webPreferences: {
-      nodeIntegration: true,
-    },
-    icon: './icons/icon.png',
-    show: false,
-    autoHideMenuBar: true,
-    title: 'sern'
-  });
+	const mainWindow = new BrowserWindow({
+		width: 800,
+		height: 600,
+		webPreferences: {
+			nodeIntegration: true,
+		},
+		icon: './icons/icon.png',
+		show: false,
+		autoHideMenuBar: true,
+		title: 'sern',
+	});
+	if (isDev) {
+		mainWindow.loadURL('http://localhost:3000');
+	} else {
+		mainWindow.loadFile(path.join(__dirname, '../build/index.html'));
+	}

-  isDev ? mainWindow.loadURL('http://localhost:3000') : mainWindow.loadFile(path.join(__dirname, '../build/index.html'))
+	mainWindow.on('ready-to-show', () => {
+		mainWindow.show();
+	});

-  mainWindow.on('ready-to-show', () => {
-    mainWindow.show()
-  })
-
-  mainWindow.on('page-title-updated', function(e) {
-    e.preventDefault()
-  });
+	mainWindow.on('page-title-updated', function (e) {
+		e.preventDefault();
+	});
 }

 app.whenReady().then(createWindow);

 app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit();
-  }
+	if (process.platform !== 'darwin') {
+		app.quit();
+	}
 });

 app.on('activate', () => {
-  if (BrowserWindow.getAllWindows().length === 0) {
-    createWindow();
-  }
-});
+	if (BrowserWindow.getAllWindows().length === 0) {
+		createWindow();
+	}
+});
--- a/public/index.html
+++ b/public/index.html
@@ -24,7 +24,7 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>React App</title>
+    <title>sern</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,22 @@
+@font-face {
+	font-family: 'Classic Console Neue';
+	src: local('Classic Console Neue'),
+		url('https://fonts.srizan.dev/clacon2.ttf') format('truetype');
+}
+
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
+
+.titleHeader {
+	color: #4af626;
+	font-family: 'JetBrains Mono', 'Courier New', Courier, monospace;
+	text-align: center;
+}
+
+.functionalityCards {
+	display: flex;
+	gap: 30px;
+	padding: 20px;
+	align-items: center;
+	display: 'grid';
+	grid-template-columns: 'repeat(2, 1fr)';
+}
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,37 @@
 import './App.css';
+import Footer from './Footer.js';
+import './FunctionalityCard.js';
+import FunctionalityCard from './FunctionalityCard.js';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+const darkTheme = createTheme({
+	palette: {
+		mode: 'dark',
+		primary: {
+			main: '#C9426E'
+		}
+	},
+});

 function App() {
-  return (
-    <div className='body'>
-      
-    </div>
-  );
+	return (
+		<div className="App">
+			<ThemeProvider theme={darkTheme}>
+				<h1 className="titleHeader">~$ sern</h1>
+				<div className="functionalityCards">
+					<FunctionalityCard
+						command="init"
+						description="Scaffold a new project"
+					/>
+					<FunctionalityCard
+						command="plugins"
+						description="Install plugins on your existing project"
+					/>
+				</div>
+				<Footer />
+			</ThemeProvider>
+		</div>
+	);
 }

 export default App;
--- a/src/Footer.css
+++ b/src/Footer.css
@@ -0,0 +1,7 @@
+.footer {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+}
--- a/src/Footer.js
+++ b/src/Footer.js
@@ -0,0 +1,41 @@
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import PublicIcon from '@mui/icons-material/Public';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import { faDiscord } from '@fortawesome/free-brands-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import './Footer.css'
+
+export default function Footer() {
+	return (
+	  <div className="footer">
+		<Typography color="primary">
+			<Link href="https://sern.dev">
+			<PublicIcon color="primary" sx={{ fontSize: 'inherit', verticalAlign: 'middle', marginRight: '4px' }} />
+			<Typography variant="body1" component="span" sx={{ display: 'inline-block', verticalAlign: 'middle' }}>
+				front page
+			</Typography>
+			</Link>
+	
+			<span style={{ margin: '0 4px' }}>•</span>
+	
+			<Link href="https://github.com/sern-handler">
+			<GitHubIcon color="primary" sx={{ fontSize: 'inherit', verticalAlign: 'middle', marginRight: '4px' }} />
+			<Typography variant="body1" component="span" sx={{ display: 'inline-block', verticalAlign: 'middle' }}>
+				github
+			</Typography>
+			</Link>
+	
+			<span style={{ margin: '0 4px' }}>•</span>
+	
+			<Link href="https://sern.dev/discord">
+			<FontAwesomeIcon icon={faDiscord} style={{ fontSize: 'inherit', verticalAlign: 'middle', marginRight: '4px' }} />
+			<Typography variant="body1" component="span" sx={{ display: 'inline-block', verticalAlign: 'middle' }}>
+				discord
+			</Typography>
+			</Link>
+		</Typography>
+		
+	  </div>
+	);
+}
--- a/src/FunctionalityCard.js
+++ b/src/FunctionalityCard.js
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+
+export default function FunctionalityCard({ command, description }) {
+  return (
+    <Card sx={{ width: window.innerWidth / 2 }}>
+      <CardContent>
+        <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+          {description}
+        </Typography>
+        <Typography color="text.primary">
+          <code>~$ sern {command}</code>
+        </Typography>
+      </CardContent>
+      <CardActions>
+        <Button size="small">Get started</Button>
+      </CardActions>
+    </Card>
+  );
+}
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,24 @@
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
+
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+	margin: 0;
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+		'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+		'Helvetica Neue', sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	background-color: #121212;
+	padding: 5vh;
 }

 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+	font-family: 'JetBrains Mono', source-code-pro, Menlo, Monaco, Consolas,
+		'Courier New', monospace;
+}
+
+footer {
+	background-color: gray;
+	text-align: center;
+	margin-top: auto;
+	padding: 8px;
 }
--- a/yarn.lock
+++ b/yarn.lock
@@ -1478,6 +1478,39 @@
  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.42.0.tgz#484a1d638de2911e6f5a30c12f49c7e4a3270fb6"
  integrity sha512-6SWlXpWU5AvId8Ac7zjzmIOqMOba/JWY8XZ4A7q7Gn1Vlfg/SFFIlrtHXt9nPn4op9ZPAkl91Jao+QQv3r/ukw==

+"@fortawesome/fontawesome-common-types@6.4.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz#88da2b70d6ca18aaa6ed3687832e11f39e80624b"
+  integrity sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==
+
+"@fortawesome/fontawesome-svg-core@^6.4.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz#3727552eff9179506e9203d72feb5b1063c11a21"
+  integrity sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.0"
+
+"@fortawesome/free-brands-svg-icons@^6.4.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.0.tgz#c785cf5563231eadc5ef5f8cd0274e0b8920433f"
+  integrity sha512-qvxTCo0FQ5k2N+VCXb/PZQ+QMhqRVM4OORiO6MXdG6bKolIojGU/srQ1ptvKk0JTbRgaJOfL2qMqGvBEZG7Z6g==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.0"
+
+"@fortawesome/free-solid-svg-icons@^6.4.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz#48c0e790847fa56299e2f26b82b39663b8ad7119"
+  integrity sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.0"
+
+"@fortawesome/react-fontawesome@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz#d90dd8a9211830b4e3c08e94b63a0ba7291ddcf4"
+  integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==
+  dependencies:
+    prop-types "^15.8.1"
+
 "@hapi/hoek@^9.0.0":
  version "9.3.0"
  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb"
@@ -1811,6 +1844,13 @@
  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.13.4.tgz#7e4b491d8081b6d45ae51556d82cb16b31315a19"
  integrity sha512-yFrMWcrlI0TqRN5jpb6Ma9iI7sGTHpytdzzL33oskFHNQ8UgrtPas33Y1K7sWAMwCrr1qbWDrOHLAQG4tAzuSw==

+"@mui/icons-material@^5.11.16":
+  version "5.11.16"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.11.16.tgz#417fa773c56672e39d6ccfed9ac55591985f0d38"
+  integrity sha512-oKkx9z9Kwg40NtcIajF9uOXhxiyTZrrm9nmIJ4UjkU2IdHpd4QVLbCc/5hZN/y0C6qzi2Zlxyr9TGddQx2vx2A==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
 "@mui/material@^5.13.4":
  version "5.13.4"
  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.13.4.tgz#1fed8249c980ed37f9767f9dba8aa3a589495ff3"