Formatted astro files
This commit is contained in:
parent
04ec083b19
commit
c5af572d38
9 changed files with 91 additions and 73 deletions
|
@ -1,63 +1,65 @@
|
||||||
---
|
---
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string;
|
title: string
|
||||||
body: string;
|
body: string
|
||||||
href: string;
|
href: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const { href, title, body } = Astro.props;
|
const { href, title, body } = Astro.props
|
||||||
---
|
---
|
||||||
|
|
||||||
<li class="link-card">
|
<li class="link-card">
|
||||||
<a href={href}>
|
<a href={href}>
|
||||||
<h2>
|
<h2>
|
||||||
{title}
|
{title}
|
||||||
<span>→</span>
|
<span>→</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p>
|
<p>
|
||||||
{body}
|
{body}
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<style>
|
<style>
|
||||||
.link-card {
|
.link-card {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 0.25rem;
|
padding: 0.25rem;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-size: 400%;
|
background-size: 400%;
|
||||||
border-radius: 0.6rem;
|
border-radius: 0.6rem;
|
||||||
background-position: 100%;
|
background-position: 100%;
|
||||||
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
box-shadow:
|
||||||
}
|
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||||
|
0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
.link-card > a {
|
.link-card > a {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
padding: 1rem 1.3rem;
|
padding: 1rem 1.3rem;
|
||||||
border-radius: 0.35rem;
|
border-radius: 0.35rem;
|
||||||
color: #111;
|
color: #111;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
h2 {
|
h2 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
color: #444;
|
color: #444;
|
||||||
}
|
}
|
||||||
.link-card:is(:hover, :focus-within) {
|
.link-card:is(:hover, :focus-within) {
|
||||||
background-position: 0;
|
background-position: 0;
|
||||||
background-image: var(--accent-gradient);
|
background-image: var(--accent-gradient);
|
||||||
}
|
}
|
||||||
.link-card:is(:hover, :focus-within) h2 {
|
.link-card:is(:hover, :focus-within) h2 {
|
||||||
color: rgb(var(--accent));
|
color: rgb(var(--accent));
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -11,9 +11,17 @@ const release = `https://forgejo.neshweb.net/Firq/fgo-ta-com-website/releases/ta
|
||||||
In the future, it will be used to catalogue information around FGO TA and the
|
In the future, it will be used to catalogue information around FGO TA and the
|
||||||
game in general.
|
game in general.
|
||||||
<br />
|
<br />
|
||||||
<a href="https://firq.dev" target="_blank" rel="noopener noreferrer">Feel free to check out my own site.</a>
|
<a href="https://firq.dev" target="_blank" rel="noopener noreferrer"
|
||||||
|
>Feel free to check out my own site.</a
|
||||||
|
>
|
||||||
<br />
|
<br />
|
||||||
<span class="version">(Website version: <a href={release} target="_blank" rel="noopener noreferrer">{version}</a>)</span>
|
<span class="version"
|
||||||
|
>(Website version: <a
|
||||||
|
href={release}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer">{version}</a
|
||||||
|
>)</span
|
||||||
|
>
|
||||||
</span>
|
</span>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,18 +1,23 @@
|
||||||
---
|
---
|
||||||
import { Image } from 'astro:assets';
|
import { Image } from 'astro:assets'
|
||||||
import logo from '../assets/logo.svg'
|
import logo from '../assets/logo.svg'
|
||||||
import hamburger from 'iconoir/icons/menu.svg'
|
import hamburger from 'iconoir/icons/menu.svg'
|
||||||
const hamburger_src_url = `url("${hamburger.src}")`;
|
const hamburger_src_url = `url("${hamburger.src}")`
|
||||||
---
|
---
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<a href="/" rel="noopener noreferrer" aria-label="Home">
|
<a href="/" rel="noopener noreferrer" aria-label="Home">
|
||||||
<Image src={logo} alt="Website Logo"/>
|
<Image src={logo} alt="Website Logo" />
|
||||||
</a>
|
</a>
|
||||||
<ul class="desktop">
|
<ul class="desktop">
|
||||||
<slot />
|
<slot />
|
||||||
</ul>
|
</ul>
|
||||||
<button class="mobile" aria-label="Navigation Button" tabindex="0" onclick="this.focus()">
|
<button
|
||||||
|
class="mobile"
|
||||||
|
aria-label="Navigation Button"
|
||||||
|
tabindex="0"
|
||||||
|
onclick="this.focus()"
|
||||||
|
>
|
||||||
<ul>
|
<ul>
|
||||||
<slot />
|
<slot />
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
@ -17,7 +17,7 @@ if (currentPage === slug) {
|
||||||
currPage = 'current'
|
currPage = 'current'
|
||||||
}
|
}
|
||||||
|
|
||||||
const icon_src_url = `url("${icon.src}")`;
|
const icon_src_url = `url("${icon.src}")`
|
||||||
const fulllink = `/${slug}`
|
const fulllink = `/${slug}`
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
|
@ -12,7 +12,10 @@ const options_date: Intl.DateTimeFormatOptions = {
|
||||||
day: '2-digit',
|
day: '2-digit',
|
||||||
}
|
}
|
||||||
const { shortdescription, questReleaseDate, url, title } = Astro.props
|
const { shortdescription, questReleaseDate, url, title } = Astro.props
|
||||||
const render_date = new Date(questReleaseDate).toLocaleDateString('en-GB', options_date)
|
const render_date = new Date(questReleaseDate).toLocaleDateString(
|
||||||
|
'en-GB',
|
||||||
|
options_date
|
||||||
|
)
|
||||||
---
|
---
|
||||||
|
|
||||||
<a href={url} rel="noopener noreferrer">
|
<a href={url} rel="noopener noreferrer">
|
||||||
|
|
|
@ -2,16 +2,15 @@
|
||||||
import type { ImageMetadata } from 'astro'
|
import type { ImageMetadata } from 'astro'
|
||||||
import { Image } from 'astro:assets'
|
import { Image } from 'astro:assets'
|
||||||
export interface Props {
|
export interface Props {
|
||||||
title: string,
|
title: string
|
||||||
link: string,
|
link: string
|
||||||
date: string,
|
date: string
|
||||||
servant: string,
|
servant: string
|
||||||
turns: string,
|
turns: string
|
||||||
runner: string
|
runner: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const { turns, runner, date, servant, link, title } =
|
const { turns, runner, date, servant, link, title } = Astro.props
|
||||||
Astro.props
|
|
||||||
|
|
||||||
const options_date: Intl.DateTimeFormatOptions = {
|
const options_date: Intl.DateTimeFormatOptions = {
|
||||||
year: 'numeric',
|
year: 'numeric',
|
||||||
|
@ -25,12 +24,11 @@ const formatted_date = new Date(date).toLocaleDateString('de-DE', options_date)
|
||||||
const servant_images = import.meta.glob<{ default: ImageMetadata }>(
|
const servant_images = import.meta.glob<{ default: ImageMetadata }>(
|
||||||
'/src/assets/ta_servants/*.png'
|
'/src/assets/ta_servants/*.png'
|
||||||
)
|
)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
|
<a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
|
||||||
<article>
|
<article>
|
||||||
<Image src={servant_images[servantImagePath]()} alt="" class="icon"/>
|
<Image src={servant_images[servantImagePath]()} alt="" class="icon" />
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<h2>{title}</h2>
|
<h2>{title}</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -15,7 +15,7 @@ export interface Props {
|
||||||
|
|
||||||
const icons: IconsLookup = {
|
const icons: IconsLookup = {
|
||||||
home: home,
|
home: home,
|
||||||
database: database
|
database: database,
|
||||||
}
|
}
|
||||||
|
|
||||||
const { descriptionOverride, currentpage, title } = Astro.props
|
const { descriptionOverride, currentpage, title } = Astro.props
|
||||||
|
@ -38,7 +38,7 @@ const mapped_navdata = navdata.map((item) => ({
|
||||||
}))
|
}))
|
||||||
---
|
---
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
|
|
|
@ -9,7 +9,9 @@ const description =
|
||||||
'My own small blog. Topics include FGO, TA, Programming, web technologies and more!'
|
'My own small blog. Topics include FGO, TA, Programming, web technologies and more!'
|
||||||
|
|
||||||
const questInfo = []
|
const questInfo = []
|
||||||
const fulldata = import.meta.glob<{ default: filedata }>(`../content/data/*.json`)
|
const fulldata = import.meta.glob<{ default: filedata }>(
|
||||||
|
`../content/data/*.json`
|
||||||
|
)
|
||||||
|
|
||||||
for (const [key, value] of Object.entries(fulldata)) {
|
for (const [key, value] of Object.entries(fulldata)) {
|
||||||
const url = `${Astro.url}/${findSlug(key)}`
|
const url = `${Astro.url}/${findSlug(key)}`
|
||||||
|
|
|
@ -11,7 +11,7 @@ const description =
|
||||||
currentpage="home"
|
currentpage="home"
|
||||||
descriptionOverride={description}
|
descriptionOverride={description}
|
||||||
>
|
>
|
||||||
<Hero />
|
<Hero />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<style></style>
|
<style></style>
|
||||||
|
|
Loading…
Reference in a new issue