restructure donw, rearing 1.0.0 release

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@firq/fgosite",
 	"type": "module",
-	"version": "0.2.0-pre.66",
+	"version": "0.2.0-pre.67",
 	"private": true,
 	"scripts": {
 		"dev": "astro dev",

src/components/cards/projectCard.astro

@@ -0,0 +1,78 @@
+---
+export interface Props {
+  url: string
+  description: string,
+  name: string
+}
+
+const { url, description, name } = Astro.props
+const target = url.startsWith("/") ? "" : "_blank" 
+---
+
+<a href={url} rel="noopener noreferrer" target={target}>
+  <h2>{name}</h2>
+  <p>{description}</p>
+</a>
+
+<style>
+  * {
+    transition: all var(--a-time-default) var(--a-animation-1);
+  }
+
+  a {
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    flex-direction: column;
+    
+    height: fit-content;
+    min-height: 100%;
+    width: 100%;
+    min-width: 12em;
+
+    text-align: center;
+    text-decoration: none;
+    align-content: center;
+
+    padding: 10px;
+    margin: 0px 0.5rem;
+
+    background-color: var(--c-primary-background);
+    border: 2px solid var(--c-primary-background);
+    border-radius: 1.25rem;
+  }
+  p {
+    color: var(--c-primary-text);
+    text-align: justify;
+    font-size: 1.1em;
+    margin: 0.5em;
+  }
+  a > h2 {
+    margin: 0.3rem 0.5rem;
+    color: var(--c-accent-1);
+    font-size: 1.5rem;
+    line-height: normal;
+    text-decoration: none;
+  }
+  a > h3 {
+    margin: 0.2em 0.5rem;
+    color: var(--c-primary-text);
+    font-size: 1rem;
+    line-height: normal;
+    text-decoration: none;
+  }
+
+  a:hover {
+    border-color: var(--c-accent-1);
+  }
+
+  @media (min-width: 420px) {
+    a {
+      min-width: 24em;
+      max-width: 24em;
+    }
+  }
+
+</style>

src/components/titles/smallTitle.astro

@@ -5,16 +5,18 @@ export interface Props {
   fadeout?: boolean
   baseurl?: string
   returnbutton?: boolean
+  buttontext?: string
 }
-const { maintext, subtext, fadeout, baseurl, returnbutton } = Astro.props
+const { maintext, subtext, fadeout, baseurl, returnbutton, buttontext } = Astro.props
 const displayFadeout = fadeout ? "": "display: none"
 const displayBackButton = returnbutton ? "": "display: none"
+const text = buttontext || baseurl
 ---
 
 <div class="wrap">
   <div class="head">{maintext}</div>
   <div class="sub">{subtext}</div>
-  <a href=`/${baseurl}` style={displayBackButton}>&lt;&lt; Back to {baseurl}</a>
+  <a href=`/${baseurl}` style={displayBackButton}>&lt;&lt; Back to {text}</a>
   <div class="fade" style={displayFadeout}></div>
 </div>
 

src/data/datafiles/navdata.json

@@ -5,14 +5,14 @@
         "icon": "home"
 	},
     {
-        "link": "/servants",
+        "link": "/fgo",
-        "text": "Servants",
+        "text": "FGO",
-        "icon": "servants"
+        "icon": "fgo"
 	},
     {
-        "link": "/ta-collection",
+        "link": "/projects",
-        "text": "TA Collection",
+        "text": "Projects",
-        "icon": "ta_collection"
+        "icon": "projects"
 	},
     {
         "link": "/blog",

src/data/datafiles/projectdata.json

@@ -0,0 +1,27 @@
+[
+  {
+    "name": "skyeweave",
+    "description": "A small sideproject for a Python package to easily generate expressions from spritesheets for FGO. Works using the AtlasAcademy API",
+    "url": "https://forgejo.neshweb.net/Firq/skyeweave"
+  },
+  {
+    "name": "dockge-cli",
+    "description": "A Python CLI script for controlling the docker tool dockge, both by a user and from a CI (uni project about websockets)",
+    "url": "https://forgejo.neshweb.net/Firq/dockge-cli"
+  },
+  {
+    "name": "fgo-ta.com",
+    "description": "A site for archiving and organizing TA runs completed by the FGO commuity. Still WIP, with a preview available @ preview.fgo-ta.com",
+    "url": "https://fgo-ta.com"
+  },
+  {
+    "name": "this website",
+    "description": "My first real webdev project, born from a hand-written HTML page on GitLab Pages - feel free to read the related blog posts",
+    "url": "/"
+  },
+  {
+    "name": "my personal blog",
+    "description": "My own small blog - I'm not posting that much, but trying to share my experience in developing software and playing FGO.",
+    "url": "/blog"
+  }
+]

src/layouts/Layout.astro

@@ -8,11 +8,11 @@ import navdata from '@datafiles/navdata.json'
 import embed from '@assets/embed.png'
 import favicon from '@assets/favicon.ico'
 
-import home from 'iconoir/icons/home.svg'
+import home from 'iconoir/icons/home-simple.svg'
-import servants from 'iconoir/icons/task-list.svg'
+import fgo from 'iconoir/icons/gamepad.svg'
-import ta_collection from 'iconoir/icons/database.svg'
 import blog from 'iconoir/icons/bookmark-book.svg'
 import about from 'iconoir/icons/mail.svg'
+import projects from 'iconoir/icons/network-right.svg'
 
 export interface Props {
   title: string
@@ -26,8 +26,8 @@ interface IconsLookup {
 
 const icons: IconsLookup = {
   home: home,
-  servants: servants,
+  fgo: fgo,
-  ta_collection: ta_collection,
+  projects: projects,
   blog: blog,
   about: about,
 }

src/layouts/baseSection.astro

@@ -1,13 +1,15 @@
 ---
 export interface Props {
-  title: string
+  title: string,
+  titleHidden?: boolean
 }
 
-const { title } = Astro.props
+const { title, titleHidden } = Astro.props
+const hidden = titleHidden || false ? "visually-hidden" : ""
 ---
 
 <div class="base">
-  <h1>{title}</h1>
+  <h1 class={hidden}>{title}</h1>
   <div>
     <slot />
   </div>

src/pages/blog/index.astro

@@ -7,6 +7,8 @@ import { getCollection } from 'astro:content'
 
 const description =
   'My own small blog. Topics include FGO, TA, Programming, web technologies and more!'
+const subtext = 
+  'My personal blog. Includes rambling about FGO, coding and other stuff!'
 const blogEntries = await getCollection('blog')
 blogEntries.sort(
   (a, b) =>
@@ -19,7 +21,7 @@ blogEntries.sort(
   currentpage="blog"
   descriptionOverride={description}
 >
-  <SmallTitle maintext="Blog Articles" subtext="" fadeout={true} />
+  <SmallTitle maintext="Blog Articles" subtext={subtext} fadeout={true} />
   <BlogSection title="Blog Articles" displayLine={true} titlehidden={true}>
     {
       blogEntries.map((post) => (

src/pages/fgo.astro

@@ -0,0 +1,47 @@
+---
+import FavouriteCard from '@components/cards/favouriteCard.astro'
+import ProjectCard from '@components/cards/projectCard.astro'
+import SmallTitle from '@components/titles/smallTitle.astro'
+import favouritesdata from '@datafiles/favouritesdata.json'
+import BaseSection from '@layouts/baseSection.astro'
+import Layout from '@layouts/Layout.astro'
+
+
+const description =
+  "Information about my Fate/Grand Order account. This includes TA runs, my personal TA offering and other interesting stuff."
+const subtext = 
+  "Fate/Grand Order is a game I really love - here are some of my details you might find interesting or useful"
+
+const projects = [
+  {
+    name: "TA Offering",
+    description: "A listing of servants I can offer for your own TA attempts. Feel free to contact me if you need any of them.",
+    url: "/servants"
+  },
+  {
+    name: "TA Collection",
+    description: "A collection of my own TA runs, as well as some community ones. See fgo-ta.com or Youtube for more.",
+    url: "/ta-collection"
+  }
+]
+
+
+const data = structuredClone(favouritesdata);
+data.map((item) => { item.origin = "First 120 on NA" })
+---
+
+<Layout
+  title="FGO - Firq FGO Site"
+  currentpage="fgo"
+  descriptionOverride={description}
+>
+  <SmallTitle maintext="FGO Information" subtext={subtext} fadeout={true} />
+  <BaseSection title="Highlights">
+    {data.map((item) => <FavouriteCard {...item} />)}
+  </BaseSection>
+  <BaseSection title="Infos" titleHidden={true}>
+    {projects.map((item) => <ProjectCard {...item} />)}
+  </BaseSection>
+</Layout>
+
+<style></style>

src/pages/index.astro

@@ -19,7 +19,7 @@ const description =
   <BaseSection title="About me">
     <AboutText/>
   </BaseSection>
-  <BaseSection title="Favourite Things">
+  <BaseSection title="Favourites">
     {favouritesdata.map((item) => <FavouriteCard {...item} />)}
   </BaseSection>
 </Layout>

src/pages/projects.astro

@@ -0,0 +1,26 @@
+---
+import Layout from '@layouts/Layout.astro'
+import ProjectCard from '@components/cards/projectCard.astro'
+import projects from '@datafiles/projectdata.json'
+import SmallTitle from '@components/titles/smallTitle.astro'
+import BaseSection from '@layouts/baseSection.astro'
+
+const description =
+  "My personal projects I am currently working on. Some of them are born from necessity, while others are for uni or similar."
+const subtext = 
+  "Usually born out of necessity, but some were actually developed as uni projects for my masters degree."
+
+---
+
+<Layout
+  title="Projects - Firq FGO Site"
+  currentpage="projects"
+  descriptionOverride={description}
+>
+  <SmallTitle maintext="Personal Projects" subtext={subtext} fadeout={true} />
+  <BaseSection title="Projects" titleHidden={true}>
+    {projects.map((item) => <ProjectCard {...item} />)}
+  </BaseSection>
+</Layout>
+
+<style></style>

src/pages/servants.astro

@@ -15,10 +15,10 @@ const description =
 
 <Layout
   title="Servants - Firq FGO Site"
-  currentpage="servants"
+  currentpage="fgo"
   descriptionOverride={description}
 >
-  <SmallTitle maintext='TA Offering' subtext='Servants and CEs I can offer for your TAs' fadeout={true}/>
+  <SmallTitle maintext='TA Offering' subtext='Servants and CEs I can offer for your TAs' fadeout={true} baseurl='fgo' returnbutton={true} buttontext='FGO'/>
   <ServantSection title="Servants">
     {servantdata.map((item, index) => <ServantCard {...item} index={index} />)}
   </ServantSection>

src/pages/ta-collection.astro

@@ -35,10 +35,10 @@ const description = 'A collection of TAs previously completed be Firq.'
 
 <Layout
   title="TA Collection - Firq FGO Site"
-  currentpage="ta-collection"
+  currentpage="fgo"
   descriptionOverride={description}
 >
-  <SmallTitle maintext='TA Collection' subtext=''/>
+  <SmallTitle maintext='TA Collection' subtext='' baseurl='fgo' returnbutton={true} buttontext='FGO'/>
   <FgotaHero fadeout={true}/>
   <TaSection title="Notable TAs" abovetext="My most notable TAs">
     {important_data.map((item) => <TaCard {...item} />)}