From b62f2611eac6880a330bff17d746d45c94ca93e2 Mon Sep 17 00:00:00 2001
From: Martin Berg Alstad <600878@stud.hvl.no>
Date: Wed, 21 Dec 2022 15:47:08 +0100
Subject: [PATCH] Changed font to mono, added footer with source-code, card use
 flex-wrap and should not overlap with anything else

---
 .idea/runConfigurations/build.xml | 12 ++++++++++++
 index.html                        |  1 +
 package.json                      |  2 +-
 src/components/card.tsx           |  6 +++---
 src/components/footer.tsx         | 15 +++++++++++++++
 src/components/header.tsx         |  6 +++---
 src/components/layout.tsx         | 14 +++++++++-----
 src/components/link.tsx           |  2 +-
 src/components/text.tsx           | 12 ++----------
 src/index.tsx                     |  6 +++---
 src/types/interfaces.ts           |  4 ++--
 11 files changed, 52 insertions(+), 28 deletions(-)
 create mode 100644 .idea/runConfigurations/build.xml
 create mode 100644 src/components/footer.tsx
diff --git a/.idea/runConfigurations/build.xml b/.idea/runConfigurations/build.xml
new file mode 100644
index 0000000..0a4f98f
--- /dev/null
+++ b/.idea/runConfigurations/build.xml
@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="build" type="js.build_tools.npm" nameIsGenerated="true">
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="build" />
+    </scripts>
+    <node-interpreter value="project" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>
\ No newline at end of file
diff --git a/index.html b/index.html
index 64d5621..970e23f 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#181a1b" />
         <title>Hjem | Martials.no</title>
+        <meta name="description" content="Hjemmeside for API og diverse">
         <link rel="icon" type="image/x-icon" href="resources/code.svg">
     </head>
     <body>
diff --git a/package.json b/package.json
index b8f9189..7aa299a 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "vite-template-solid",
+  "name": "martials-no",
   "version": "0.1",
   "description": "",
   "scripts": {
diff --git a/src/components/card.tsx b/src/components/card.tsx
index 1391a1b..fcf61fe 100644
--- a/src/components/card.tsx
+++ b/src/components/card.tsx
@@ -2,12 +2,12 @@
 import { type Component } from "solid-js";
 import type { CardProps } from "../types/interfaces";
 import { H3 } from "./text";
-import { A } from "./link";
+import { Link } from "./link";
 
 const Card: Component<CardProps> = ({ children, className, title, to, newTab = false }) => {
     return (
         <>
-            <A className={"text-white"} to={ to } newTab={ newTab }>
+            <Link className={ "text-white" } to={ to } newTab={ newTab }>
                 <div
                     class={ `relative bg-gradient-to-r from-cyan-600 to-cyan-500 min-w-64 rounded-2xl ${ className }` }>
                     <div class="relative p-5">
@@ -15,7 +15,7 @@ const Card: Component<CardProps> = ({ children, className, title, to, newTab = f
                         { children }
                     </div>
                 </div>
-            </A>
+            </Link>
         </>
     );
 };
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
new file mode 100644
index 0000000..eac1467
--- /dev/null
+++ b/src/components/footer.tsx
@@ -0,0 +1,15 @@
+/* @refresh reload */
+import { type Component } from "solid-js";
+import type { SimpleProps } from "../types/interfaces";
+import { Link } from "./link";
+
+const Footer: Component<SimpleProps> = ({ className }) => {
+    return (
+        <footer class={ `text-center py-5 absolute bottom-0 container ${ className }` }>
+            <p>Kildekode på <Link to={ "https://github.com/h600878/martials.no" }>GitHub</Link></p>
+            <p>Self-hosted on Raspberry Pi 4</p>
+        </footer>
+    );
+};
+
+export default Footer;
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 3890a38..fdf3a92 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,13 +1,13 @@
 /* @refresh reload */
 
-import { Component } from "solid-js";
-import { SimpleProps, TitleProps } from "../types/interfaces";
+import { type Component } from "solid-js";
+import type { TitleProps } from "../types/interfaces";
 import { H1 } from "./text";
 
 const Header: Component<TitleProps> = ({ className, title }) => {
     return (
         <header class={ className }>
-            <H1 className={ "text-center" }>{ title }</H1>
+            <H1 className={ "text-center text-cyan-500" }>{ title }</H1>
             <div class={"mx-auto w-fit"}>
                 <p>Av Martin Berg Alstad</p>
             </div>
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index 4557ddb..ec791f6 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -2,16 +2,20 @@
 import { type Component } from "solid-js";
 import type { TitleProps } from "../types/interfaces";
 import Header from "./header";
+import Footer from "./footer";
 
-export const Layout: Component<TitleProps> = ({ children, title, className }) => {
+const Layout: Component<TitleProps> = ({ children, title, className }) => {
     return (
-        <div class={ `bg-default-bg text-white min-h-screen font-mono ${ className }` }>
-            <div class="container mx-auto debug">
-                <Header className={"my-3"} title={ title } />
+        <div class={ `bg-default-bg text-white min-h-screen relative font-mono ${ className }` }>
+            <div class="container mx-auto">
+                <Header className={ "py-3" } title={ title } />
                 <main>
-                    { children }
+                    <div class={ "pb-28" }>{ children }</div>
+                    <Footer />
                 </main>
             </div>
         </div>
     );
 };
+
+export default Layout;
diff --git a/src/components/link.tsx b/src/components/link.tsx
index ac0153b..040ab97 100644
--- a/src/components/link.tsx
+++ b/src/components/link.tsx
@@ -2,7 +2,7 @@
 import { type Component } from "solid-js";
 import type { LinkProps } from "../types/interfaces";
 
-export const A: Component<LinkProps> = (
+export const Link: Component<LinkProps> = (
     {
         to,
         rel,
diff --git a/src/components/text.tsx b/src/components/text.tsx
index 18cd405..828571a 100644
--- a/src/components/text.tsx
+++ b/src/components/text.tsx
@@ -2,17 +2,9 @@ import { type Component } from "solid-js";
 import type { ChildProps } from "../types/interfaces";
 
 export const H1: Component<ChildProps> = ({ children, className }) => {
-    return (
-        <>
-            <h1 class={ `text-4xl ${ className }` }>{ children }</h1>
-        </>
-    );
+    return <h1 class={ `text-4xl ${ className }` }>{ children }</h1>;
 };
 
 export const H3: Component<ChildProps> = ({ children, className }) => {
-    return (
-        <>
-            <h3 class={ `text-2xl ${ className }` }>{ children }</h3>
-        </>
-    );
+    return <h3 class={ `text-2xl ${ className }` }>{ children }</h3>;
 };
diff --git a/src/index.tsx b/src/index.tsx
index 55abc31..973f5dc 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,8 +2,8 @@
 import { For, render } from "solid-js/web";
 
 import "./index.css";
-import type { Component } from "solid-js";
-import { Layout } from "./components/layout";
+import { type Component } from "solid-js";
+import Layout from "./components/layout";
 import Card from "./components/card";
 import type { CardProps } from "./types/interfaces";
 
@@ -23,7 +23,7 @@ const cards = [
 const HomePage: Component = () => {
     return (
         <Layout title={ "Velkommen!" }>
-            <div class={ "flex justify-center mt-10" }>
+            <div class={ "flex flex-wrap justify-center mt-10" }>
                 <For each={ cards }>
                     { card =>
                         <Card title={ card.title } className={ "m-4" } to={ card.to }>{ card.children }</Card>
diff --git a/src/types/interfaces.ts b/src/types/interfaces.ts
index 27765ac..25ec902 100644
--- a/src/types/interfaces.ts
+++ b/src/types/interfaces.ts
@@ -17,9 +17,9 @@ export interface LinkProps extends ChildProps {
 }
 
 export interface TitleProps extends ChildProps {
-    title: string,
+    title?: string,
 }
 
 export interface CardProps extends LinkProps {
-    title: string;
+    title?: string;
 }
\ No newline at end of file
