Redesign
All checks were successful
/ checking (push) Successful in 13s
/ build-site (push) Successful in 2m20s
/ publish (push) Successful in 1m4s

This commit is contained in:
Firq 2024-07-14 21:15:16 +02:00
parent 0b4bca36ed
commit f1bb9b80ca
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
18 changed files with 372 additions and 43 deletions

10
package-lock.json generated
View file

@ -1,16 +1,17 @@
{
"name": "fgo-ta-com-website",
"version": "0.2.1",
"version": "0.2.2-pre.1",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "fgo-ta-com-website",
"version": "0.2.1",
"version": "0.2.2-pre.1",
"dependencies": {
"@astro-community/astro-embed-youtube": "^0.4.3",
"@astrojs/check": "^0.5.10",
"@astrojs/sitemap": "^3.1.4",
"@fontsource/work-sans": "^5.0.18",
"astro": "^4.7.0",
"astro-meta-tags": "^0.1.3",
"autoprefixer": "^10.4.16",
@ -1746,6 +1747,11 @@
"node": ">=12"
}
},
"node_modules/@fontsource/work-sans": {
"version": "5.0.18",
"resolved": "https://registry.npmjs.org/@fontsource/work-sans/-/work-sans-5.0.18.tgz",
"integrity": "sha512-kFZEEPfWhALOweNTc+J60Jnok1bNuKC/L6wbM05f716pZFU9AAlKl0zmOYbJSkY4yhpHsYDL/X7A4zF9vPpE2g=="
},
"node_modules/@img/sharp-darwin-arm64": {
"version": "0.33.3",
"resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.3.tgz",

View file

@ -1,7 +1,7 @@
{
"name": "fgo-ta-com-website",
"type": "module",
"version": "0.2.2-pre.1",
"version": "0.2.2-pre.2",
"scripts": {
"dev": "astro dev",
"start": "astro dev",
@ -13,6 +13,7 @@
"@astro-community/astro-embed-youtube": "^0.4.3",
"@astrojs/check": "^0.5.10",
"@astrojs/sitemap": "^3.1.4",
"@fontsource/work-sans": "^5.0.18",
"astro": "^4.7.0",
"astro-meta-tags": "^0.1.3",
"autoprefixer": "^10.4.16",

View file

@ -1,5 +1,11 @@
---
import packagejson from '../../package.json'
export interface Props {
fadeout?: boolean
}
const { fadeout } = Astro.props
const display = fadeout ? "": "display: none"
const version = packagejson.version
const release = `https://forgejo.neshweb.net/Firq/fgo-ta-com-website/releases/tag/${version}`
---
@ -8,36 +14,34 @@ const release = `https://forgejo.neshweb.net/Firq/fgo-ta-com-website/releases/ta
<span>
This site is a project by Firq.
<br />
In the future, it will be used to catalogue information around FGO TA and the
game in general.
<br />
<a href="https://firq.dev" target="_blank" rel="noopener noreferrer"
>Feel free to check out my personal site.</a
>
<br />
<span class="version"
>( Website version: <a
>Website version: <a
href={release}
target="_blank"
rel="noopener noreferrer">{version}</a
> )</span
></span
>
</span>
<slot />
<div class="fade" style={display}></div>
</div>
<style>
div {
display: flex;
width: 100%;
max-height: auto;
background-color: var(--c-duskgray);
flex-wrap: nowrap;
flex-flow: column;
background-color: var(--c-darkergray);
text-align: center;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5em;
padding: 2rem 0rem;
padding: 2rem 0rem 0rem 0rem;
}
a {
text-align: center;
@ -45,7 +49,14 @@ const release = `https://forgejo.neshweb.net/Firq/fgo-ta-com-website/releases/ta
color: var(--c-darkpurple);
}
.fade {
margin-top: 3rem;
background: linear-gradient(to bottom, transparent, var(--c-lightgray));
height: 2.5rem;
width: 100%;
}
.version {
font-size: 0.7em;
font-size: 0.65em;
}
</style>

View file

@ -0,0 +1,95 @@
---
import '@fontsource/work-sans/800.css'
import '@fontsource/work-sans/600.css'
export interface Props {
maintext: string
subtext: string
fadeout?: boolean
baseurl?: string
}
const { maintext, subtext, fadeout, baseurl } = Astro.props
const display = fadeout ? "": "display: none"
---
<div class="wrap">
<div class="head">{maintext}</div>
<div class="sub">{subtext}</div>
<a href=`/${baseurl}`>&lt&lt Back to database</a>
<div class="fade" style={display}></div>
</div>
<style>
a {
font-weight: 600;
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
color: white;
padding: 0.5rem 0px;
text-decoration: none;
}
.wrap {
position: relative;
width: 100%;
display: flex;
text-align: center;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
color: var(--c-lighter);
background-color: var(--c-darkergray);
}
.fade {
margin-top: 2rem;
background: linear-gradient(to bottom, transparent, var(--c-lightgray));
height: 2.5rem;
width: 100%;
}
.head {
hyphens: auto;
padding-top: 2rem;
font-size: 2rem;
font-weight: 800;
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial,
sans-serif;
}
.sub {
font-size: 0.75rem;
font-weight: 600;
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial,
sans-serif;
}
.head {
color: var(--c-darkpurple);
}
@supports (background-clip: text) {
.head {
background: linear-gradient(125deg, var(--c-darkpurple), var(--c-purplepink), var(--c-reddish) );
background-clip: text;
color: transparent;
}
}
@media (min-width: 620px) {
.head {
hyphens: none;
font-size: 3rem;
}
.sub {
font-size: 0.75rem;
}
}
@media (min-width: 1000px) {
.head {
font-size: 4rem;
}
.sub {
font-size: 1rem;
}
}
</style>

View file

@ -0,0 +1,84 @@
---
import '@fontsource/work-sans/800.css'
export interface Props {
maintext: string
subtext: string
fadeout?: boolean
}
const { maintext, subtext, fadeout } = Astro.props
const display = fadeout ? "": "display: none"
---
<div class="wrap">
<div class="head">{maintext}</div>
<div class="sub">{subtext}</div>
<div class="fade" style={display}></div>
</div>
<style>
.wrap {
position: relative;
width: 100%;
display: flex;
text-align: center;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
color: var(--c-lighter);
background-color: var(--c-darkergray);
}
.fade {
margin-top: 2rem;
background: linear-gradient(to bottom, transparent, var(--c-lightgray));
height: 2.5rem;
width: 100%;
}
.head {
hyphens: auto;
padding-top: 2rem;
font-size: 4rem;
font-weight: 800;
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial,
sans-serif;
}
.sub {
font-size: 1.5rem;
font-weight: 800;
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial,
sans-serif;
}
.head {
color: var(--c-darkpurple);
}
@supports (background-clip: text) {
.head {
background: linear-gradient(125deg, var(--c-darkpurple), var(--c-purplepink), var(--c-reddish) );
background-clip: text;
color: transparent;
}
}
@media (min-width: 620px) {
.head {
hyphens: none;
font-size: 6rem;
}
.sub {
font-size: 1.5rem;
}
}
@media (min-width: 1000px) {
.head {
font-size: 8rem;
}
.sub {
font-size: 2rem;
}
}
</style>

View file

@ -14,7 +14,7 @@ const entry = z.object({
const quest = z.object({
questTitle: z.string(),
description: z.string(),
data: z.array(entry)
data: z.array(entry),
})
// Basic info block for page
@ -34,7 +34,13 @@ const taData = defineCollection({
}),
})
const groupDescription = defineCollection({
type: 'data',
schema: z.object({ info: info }),
})
export const collections = {
taInfoData: taData,
teslafest: taData,
groups: groupDescription,
}

View file

@ -0,0 +1,8 @@
{
"info": {
"title": "Lostbelt 6",
"releaseDate": "2023-07-10",
"shortdescription": "Lostbelt 6",
"releaseNumber": 1
}
}

View file

@ -1,13 +1,13 @@
{
"info": {
"title": "[Lostbelt 6] Albion",
"title": "Albion",
"releaseDate": "2023-07-10",
"shortdescription": "Albion shows up with a new mechanic, but will it be enough?",
"releaseNumber": 1
},
"quests": [
{
"questTitle": "[Lostbelt 6] Albion",
"questTitle": "Albion",
"description": "Albion shows up with a new mechanic, but will it be enough? No, because the mechanics are only seen as a small challenge and were quickly rendered a sideeffect during this quest - to the dismay of Melusine",
"data": [
{

View file

@ -1,13 +1,13 @@
{
"info": {
"title": "[Lostbelt 6] Cernunnos",
"title": "Cernunnos",
"releaseDate": "2023-07-10",
"shortdescription": "One of FGOs most notorious boss fights due to up to 100% special defense, strong DoT damage and powerful field effects",
"releaseNumber": 2
},
"quests": [
{
"questTitle": "[Lostbelt 6] Cernunnos",
"questTitle": "Cernunnos",
"description": "One of FGOs most notorious boss fights due to up to 100% special defense, strong DoT damage and powerful field effects - and still, the TA community prevailed and created some of the most amazing runs of all time",
"data": [
{

View file

@ -1,13 +1,13 @@
{
"info": {
"title": "[Lostbelt 6] Queen Morgan",
"title": "Queen Morgan",
"releaseDate": "2023-06-20",
"shortdescription": "The fight against the Lostbelt 6 Queen as the conclusion of LB 6 Part 2",
"releaseNumber": 1
},
"quests": [
{
"questTitle": "[Lostbelt 6] Queen Morgan",
"questTitle": "Queen Morgan",
"description": "The fight against the Lostbelt 6 Queen as the conclusion of LB 6 Part 2 - Interesting field effects and a berserker enemy were making this fight interesting, as Morgan is hitting like an actual truck, meaning support cycling was a lot easier than usual.",
"data": [
{

View file

@ -2,13 +2,13 @@
"info": {
"title": "The Green Comet",
"releaseDate": "2024-03-21",
"shortdescription": "When Achillis decends, he brings swith him destruction ...",
"shortdescription": "When Achillis decends, he brings with him destruction ...",
"releaseNumber": 6
},
"quests": [
{
"questTitle": "The Green Comet",
"description": "When Achillis decends, he brings swith him destruction - time to teach him that this is a bad thing!",
"description": "When Achillis decends, he brings with him destruction - time to teach him that this is a bad thing!",
"data": [
{
"title": "Kama 2T",

View file

@ -103,6 +103,8 @@ const mapped_navdata = navdata.map((item) => ({
--c-lighterpurple: #c98fff;
--c-purplepink: #c105ff;
--c-darkergray: #1b1b1b;
--c-reddish: #ff0077;
--c-lighter: #eee;
}
body {
background: var(--c-lightgray);

View file

@ -1,13 +1,15 @@
---
export interface Props {
title: string
titlehidden?: boolean
}
const { title } = Astro.props
const { title, titlehidden } = Astro.props
const display = titlehidden ? "display: none" : ""
---
<section>
<h1>{title}</h1>
<h1 style={display}>{title}</h1>
<div class="wrapper">
<div class="line"></div>
<slot />

View file

@ -0,0 +1,115 @@
---
import { getCollection } from 'astro:content'
import TaShowcaseLayout from '../../layouts/taShowcaseLayout.astro'
import Layout from '../../layouts/Layout.astro'
import DatabaseSection from '../../layouts/databaseSection.astro'
import QuestListing from '../../components/questListing.astro'
import SmallTitle from '../../components/smallTitle.astro'
interface store {
slug: string
group: boolean
questinfo:
| undefined
| {
slug: string
info: {
title: string
releaseDate: Date
shortdescription: string
releaseNumber: number
}
}[]
pageinfo:
| undefined
| {
title: string
shortdescription: string
}
}
export async function getStaticPaths() {
const fulldata = await getCollection('taInfoData')
const slugdata: store[] = fulldata.map((data) => {
return {
slug: data.id,
group: false,
questinfo: undefined,
pageinfo: undefined,
}
})
const groupdata = await getCollection('groups')
const groups: store[] = groupdata.map((data) => {
return {
slug: data.id,
group: true,
questinfo: undefined,
pageinfo: undefined,
}
})
const full = slugdata.concat(groups as any)
full.map((data) => {
if (data.group) {
const coll = fulldata.filter((d) => d.id.startsWith(data.slug))
data.questinfo = coll.map((d) => {
return { slug: d.id, info: d.data.info }
})
data.questinfo.sort(
(a, b) =>
b.info.releaseDate.valueOf() - a.info.releaseDate.valueOf() ||
b.info.releaseNumber - a.info.releaseNumber
)
const page = groupdata.find((d) => d.id === data.slug)
data.pageinfo = page?.data.info
}
})
return full.map((data) => ({
params: { slug: data.slug },
props: {
key: data.slug,
group: data.group,
questinfo: data.questinfo,
pageinfo: data.pageinfo,
},
}))
}
const { key, group, questinfo, pageinfo } = Astro.props
---
{
!group && (
<TaShowcaseLayout
collection="taInfoData"
collectionKey={key}
baseurl="database"
/>
)
}
{
group && (
<Layout
title={`${pageinfo!.title} - TA Database - FGO TA`}
currentpage="database"
descriptionOverride={pageinfo!.shortdescription}
>
<SmallTitle
maintext={pageinfo!.title}
subtext={pageinfo!.shortdescription}
fadeout={true}
baseurl="database"
/>
<DatabaseSection title="" titlehidden={true}>
{questinfo!.map((quest) => (
<QuestListing
{...{ ...quest.info, slug: quest.slug }}
baseurl="database"
/>
))}
</DatabaseSection>
</Layout>
)
}

View file

@ -1,13 +0,0 @@
---
import { getCollection } from 'astro:content';
import TaShowcaseLayout from '../../layouts/taShowcaseLayout.astro'
export async function getStaticPaths() {
const fulldata = (await getCollection('taInfoData')).map((data) => data.id)
return fulldata.map((slug) => ({ params: { slug } }))
}
const { slug } = Astro.params
---
<TaShowcaseLayout collection="taInfoData" collectionKey={slug} baseurl="database"/>

View file

@ -3,11 +3,19 @@ import { getCollection } from 'astro:content';
import Layout from '../../layouts/Layout.astro'
import QuestListing from '../../components/questListing.astro'
import DatabaseSection from '../../layouts/databaseSection.astro'
import Title from '../../components/title.astro';
const description = 'FGO NA TA Database'
const fulldata = await getCollection('taInfoData')
const fulldata = await getCollection('taInfoData')
const groups = await getCollection('groups')
let combined = fulldata
fulldata.sort(
for (const group of groups) {
combined = combined.filter(data => !data.id.startsWith(group.id))
}
combined = combined.concat(groups as any)
combined.sort(
(a, b) => b.data.info.releaseDate.valueOf() - a.data.info.releaseDate.valueOf() || b.data.info.releaseNumber - a.data.info.releaseNumber
)
@ -18,8 +26,9 @@ fulldata.sort(
currentpage="database"
descriptionOverride={description}
>
<DatabaseSection title="NA Runs">
{fulldata.map((quest) => <QuestListing { ...{...quest.data.info, slug: quest.id} } baseurl="database" />)}
<Title maintext='TA DATA&shy;BASE' subtext='A mostly up-to-date list of NA TA runs' fadeout={true}/>
<DatabaseSection title="NA Runs" titlehidden={true}>
{combined.map((quest) => <QuestListing { ...{...quest.data.info, slug: quest.id} } baseurl="database" />)}
</DatabaseSection>
</Layout>

View file

@ -1,6 +1,7 @@
---
import Layout from '../layouts/Layout.astro'
import Hero from '../components/hero.astro'
import Title from '../components/title.astro'
const description =
'This site is a WIP project by Firq. In the future, it will be used to catalogue information around FGO TA and the game in general.'
@ -11,7 +12,8 @@ const description =
currentpage="home"
descriptionOverride={description}
>
<Hero />
<Title maintext='FGO NA TA DATA&shy;BASE' subtext='The all-in-one lookup for your all TA needs'/>
<Hero fadeout={true}/>
</Layout>
<style></style>

View file

@ -4,6 +4,7 @@ import Layout from '../../layouts/Layout.astro'
import QuestListing from '../../components/questListing.astro'
import DatabaseSection from '../../layouts/databaseSection.astro'
import GenericHero from '../../components/genericHero.astro';
import Title from '../../components/title.astro';
const description = 'One of the most anticipated events of 2024 - Teslafest. Were the two weeks of time enough for all those quests, even with a parallel lottery?'
const fulldata = await getCollection('teslafest')
@ -25,7 +26,7 @@ const eq_2020 = fulldata.filter((value) => value.id.startsWith("eq-2020"))
currentpage="teslafest"
descriptionOverride={description}
>
<GenericHero text="TESLAFEST"></GenericHero>
<Title maintext='TESLA&shy;FEST' subtext='' fadeout={true}/>
<DatabaseSection title="Challenge Quest">
{cq.map((quest) => <QuestListing { ...{...quest.data.info, slug: quest.id} } baseurl="teslafest" />)}
</DatabaseSection>