Compare commits

..

1 commit

Author SHA1 Message Date
f5bb4bf78e Merge pull request 'Mergin dev - new header, updated servants' (#29) from dev into main
All checks were successful
/ checking (push) Successful in 14s
/ build-site (push) Successful in 1m41s
/ release (push) Successful in 7s
Reviewed-on: #29
2024-06-15 17:20:51 +00:00
46 changed files with 4972 additions and 3726 deletions

View file

@ -1,57 +1,41 @@
on:
push:
tags:
- '[0-9]+\.[0-9]+\.[0-9]+-pre\.[0-9]+'
- '[0-9]+\.[0-9]+\.[0-9]+pre[0-9]+'
jobs:
check-tag:
runs-on: docker
steps:
- name: Checking Out Repository Code
uses: https://code.forgejo.org/actions/checkout@v3
- name: Check if Version in package.json matches Tag
run: |
VERSION=$(npm pkg get version --workspaces=false | tr -d \")
if test $VERSION != "${{ github.ref_name }}"; then
echo "Expected Version is: '${{ github.ref_name }}' actual Version is: '$VERSION'";
exit 1
else
echo "Version is: '$VERSION'";
fi
checking:
needs: [ check-tag ]
runs-on: docker
container: forgejo.neshweb.net/ci-docker-images/node-alpine-git:latest
container: node:lts
steps:
- name: Checkout source code
uses: https://code.forgejo.org/actions/checkout@v3
- name: Install packages
run: npm i
run: npm install
- name: Run astro check (linting + static analysis)
run: npm run astro check
build-site:
needs: [ checking ]
needs: [checking]
if: success()
runs-on: dind
steps:
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v3
- name: Log into Docker Package Registry
- name: Login to Docker Hub
uses: docker/login-action@v3
with:
registry: forgejo.neshweb.net
username: ${{ secrets.FORGEJO_USERNAME }}
password: ${{ secrets.FORGEJO_TOKEN }}
- name: Build and push to Docker Package Registry
- name: Push to Package Registry
uses: docker/build-push-action@v5
with:
push: true
tags: forgejo.neshweb.net/firq/firq-dev-website:${{ github.ref_name }}, forgejo.neshweb.net/firq/firq-dev-website:preview
create-release:
needs: [ build-site ]
publish:
needs: [build-site]
if: success()
runs-on: docker
steps:
@ -65,34 +49,6 @@ jobs:
tag: ${{ github.ref_name }}
prerelease: true
auto-deploy-dockge:
needs: [ build-site ]
runs-on: docker
if: success()
container: nikolaik/python-nodejs:python3.11-nodejs21
steps:
- name: Configure pip
run: |
pip config set global.index-url https://pypi.org/simple
pip config set global.extra-index-url https://forgejo.neshweb.net/api/packages/Firq/pypi/simple/
pip config set global.timeout 60
pip config set global.trusted-host "pypi.org forgejo.neshweb.net"
- name: Install Dockge CLI
run: pip install dockge-cli
- name: Configure Dockge CLI
run: |
dockge host https://dockge.firq.dev
dockge login --user ${{ secrets.DOCKGE_USER }} --password ${{ secrets.DOCKGE_CREDENTIAL }}
- name: Check status and redeploy
run: |
dockge status firq-dev-preview
dockge update firq-dev-preview
dockge status firq-dev-preview
- name: Reset CLI
run : |
dockge logout
dockge exit
# doesn't work atm
# unlighthouse:
# needs: [publish]

View file

@ -4,54 +4,38 @@ on:
- '[0-9]+\.[0-9]+\.[0-9]+'
jobs:
check-tag:
runs-on: docker
steps:
- name: Checking Out Repository Code
uses: https://code.forgejo.org/actions/checkout@v3
- name: Check if Version in package.json matches Tag
run: |
VERSION=$(npm pkg get version --workspaces=false | tr -d \")
if test $VERSION != "${{ github.ref_name }}"; then
echo "Expected Version is: '${{ github.ref_name }}' actual Version is: '$VERSION'";
exit 1
else
echo "Version is: '$VERSION'";
fi
checking:
needs: [ check-tag ]
runs-on: docker
container: forgejo.neshweb.net/ci-docker-images/node-alpine-git:latest
container: node:lts
steps:
- name: Checkout source code
uses: https://code.forgejo.org/actions/checkout@v3
- name: Install packages
run: npm i
run: npm install
- name: Run astro check (linting + static analysis)
run: npm run astro check
build-site:
needs: [ checking ]
needs: [checking]
if: success()
runs-on: dind
steps:
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v3
- name: Log into Docker Package Registry
- name: Login to Docker Hub
uses: docker/login-action@v3
with:
registry: forgejo.neshweb.net
username: ${{ secrets.FORGEJO_USERNAME }}
password: ${{ secrets.FORGEJO_TOKEN }}
- name: Build and push to Docker Package Registry
- name: Push to Package Registry
uses: docker/build-push-action@v5
with:
push: true
tags: forgejo.neshweb.net/firq/firq-dev-website:${{ github.ref_name }}, forgejo.neshweb.net/firq/firq-dev-website:latest
create-release:
needs: [ build-site ]
release:
needs: [build-site]
if: success()
runs-on: docker
steps:

View file

@ -1,25 +1,16 @@
on:
push:
branches:
- '**'
- "**"
jobs:
get-version:
checking:
runs-on: docker
steps:
- name: Checking Out Repository Code
uses: https://code.forgejo.org/actions/checkout@v3
- name: Check if Version in package.json matches Tag
run: |
VERSION=$(npm pkg get version --workspaces=false | tr -d \")
echo "Version is: '$VERSION'";
astro-check:
runs-on: docker
container: forgejo.neshweb.net/ci-docker-images/node-alpine-git:latest
container: node:lts
steps:
- name: Checkout source code
uses: https://code.forgejo.org/actions/checkout@v3
- name: Install packages
run: npm i
run: npm install
- name: Run astro check (linting + static analysis)
run: npm run astro check

View file

@ -1,17 +1,18 @@
on:
push:
tags:
- '[0-9]+\.[0-9]+\.[0-9]+-ulh\.[0-9]+'
- '[0-9]+\.[0-9]+\.[0-9]+unlighthouse[0-9]+'
- '[0-9]+\.[0-9]+\.[0-9]+ulh[0-9]+'
jobs:
unlighthouse:
runs-on: docker
container: forgejo.neshweb.net/ci-docker-images/unlighthouse:0.2.1
container: forgejo.neshweb.net/ci-docker-images/unlighthouse:latest
steps:
- name: Checkout repository
uses: https://code.forgejo.org/actions/checkout@v3
- name: Run unlighthouse
run: unlighthouse-ci --site "https://preview.firq.dev/" --disable-dynamic-sampling
run: unlighthouse-ci --site "https://preview.firq.dev/"
- name: Prepare artifacts
run: cp serve.json unlighthouse-reports
- name: Upload reports

6
.gitignore vendored
View file

@ -4,12 +4,6 @@ dist/
public/
maintenance/
# astro stuff
.astro/
# config stuff
.vscode/
# Temp Scripts
scripts/

4
.vscode/extensions.json vendored Normal file
View file

@ -0,0 +1,4 @@
{
"recommendations": ["astro-build.astro-vscode"],
"unwantedRecommendations": []
}

11
.vscode/launch.json vendored Normal file
View file

@ -0,0 +1,11 @@
{
"version": "0.2.0",
"configurations": [
{
"command": "./node_modules/.bin/astro dev",
"name": "Development server",
"request": "launch",
"type": "node-terminal"
}
]
}

12
.vscode/settings.json vendored Normal file
View file

@ -0,0 +1,12 @@
{
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/Thumbs.db": true,
"**/__pycache__": true
},
"hide-files.files": []
}

View file

@ -2,16 +2,15 @@ FROM node:lts AS build
WORKDIR /app
COPY . .
RUN npm i
RUN npm run astro telemetry disable
RUN npm run build
FROM forgejo.neshweb.net/ci-docker-images/website-serve:0.1.3 AS runtime
FROM forgejo.neshweb.net/ci-docker-images/website-serve:latest AS runtime
COPY --from=build /app/dist /public
COPY --from=build /app/serve.json /public/serve.json
RUN rm -r /public/data/
ENV PORT=8081
ENV PORT 8081
EXPOSE 8081
CMD serve public/ -p ${PORT}
CMD [ "serve", "public/", "-p", "8081" ]

View file

@ -2,6 +2,43 @@
This is build using [Astro](https://astro.build)
## 🚀 Project Structure
```
/
├── static/
│ ├── favicon.svg
│ └── other files ...
├── src/
│ ├── components/
│ │ ├── servantCard.astro
│ │ ├── ceCard.astro
│ │ ├── contactCard.astro
│ │ └── taCard.astro
│ │
│ ├── layouts/
│ │ ├── customFooter.astro
│ │ ├── baseSection.astro
│ │ ├── taSection.astro
│ │ ├── contactSection.astro
│ │ └── Layout.astro
│ │
│ └── pages/
│ └── index.astro
├── .gitlab-ci.yml
├── astro.config.mjs
└── package.json
```
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
More routes will follow soon
Any static assets, like images, can be placed in the `static/` directory.
## 🧞 Astro-Specific Commands
All commands are run from the root of the project, from a terminal:
@ -14,3 +51,4 @@ All commands are run from the root of the project, from a terminal:
| `npm run preview` | Preview your build locally, before deploying |
| `npm run astro ...` | Run CLI commands like `astro add`, `astro preview` |
| `npm run astro --help` | Get help using the Astro CLI |

7724
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -1,7 +1,7 @@
{
"name": "@firq/fgosite",
"type": "module",
"version": "0.2.0-pre.4",
"version": "0.1.27",
"private": true,
"scripts": {
"dev": "astro dev",
@ -11,17 +11,15 @@
"astro": "astro"
},
"dependencies": {
"@astro-community/astro-embed-youtube": "^0.5.2",
"@astrojs/check": "^0.8.1",
"@astrojs/mdx": "^3.1.3",
"@astrojs/sitemap": "^3.1.6",
"@fontsource/work-sans": "^5.0.18",
"astro": "^4.11.5",
"astro-meta-tags": "^0.3.0",
"autoprefixer": "^10.4.19",
"iconoir": "^7.7.0",
"postcss-preset-env": "^9.6.0",
"typescript": "^5.5.3"
"@astro-community/astro-embed-youtube": "^0.4.3",
"@astrojs/check": "^0.3.3",
"@astrojs/mdx": "^2.0.3",
"@astrojs/sitemap": "^3.0.3",
"astro": "^4.2.1",
"autoprefixer": "^10.4.16",
"iconoir": "^7.2.0",
"postcss-preset-env": "^9.3.0",
"typescript": "^5.3.3"
},
"browserslist": [
"last 2 versions",

View file

@ -1,9 +1,8 @@
---
export interface Props {
url: string
slug: string
url: string | undefined
title: string
pubdate: Date
pubdate: string
description: string
author: string
}
@ -13,11 +12,11 @@ const options_date: Intl.DateTimeFormatOptions = {
month: 'long',
day: '2-digit',
}
const { author, description, pubdate, url, title, slug } = Astro.props
const { author, description, pubdate, url, title } = Astro.props
const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
---
<a href={`${url}/${slug}`} rel="noopener noreferrer">
<a href={url} rel="noopener noreferrer">
<div class="circle"></div>
<article>
<h2>{title}</h2>
@ -30,14 +29,38 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
.circle {
display: none;
}
@media (min-width: 900px) {
.circle {
margin: 1rem 1rem 1rem 0rem;
position: relative;
display: flex;
visibility: visible;
height: 1.5rem;
width: 1.5rem;
border-radius: 40%;
background-color: var(--c-darkpurple);
transition: transform var(--speed) var(--ease);
}
a:hover > .circle {
height: 1.75rem;
width: 1.75rem;
translate: -0.125rem;
margin-right: 0.825rem;
}
article {
margin-left: 0.5rem;
}
}
a {
align-items: center;
justify-content: center;
display: flex;
text-decoration: none;
height: fit-content;
margin: 0px 0.5rem;
height: auto;
margin: 0.5rem;
width: 100%;
}
p {
@ -65,8 +88,8 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
flex: 1;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
align-content: center;
align-items: flex-start;
align-content: flex-start;
justify-content: center;
background-color: var(--c-darkergray);
padding: 10px;
@ -75,47 +98,7 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
min-height: 100%;
border-radius: 1.25rem;
}
a:hover > article {
transform: scaleY(102.5%) scaleX(101%);
transition: transform var(--speed) var(--ease);
}
@media (min-width: 900px) {
.circle {
margin: 1rem 0.5rem 1rem 0.5rem;
position: relative;
display: flex;
visibility: visible;
height: 1rem;
width: 1rem;
background-color: var(--c-darkpurple);
border-style: solid;
border-width: 0.25rem;
border-color: var(--c-lightgray);
border-radius: 40%;
transition: transform var(--speed) var(--ease);
}
a:hover > .circle {
height: 1.25rem;
width: 1.25rem;
translate: -0.125rem;
margin-right: 4px;
}
a:hover article {
border-color: var(--c-darkpurple);
transform: none;
}
article {
border-style: solid;
border-width: 2px;
border-color: var(--c-darkergray);
align-items: flex-start;
align-content: flex-start;
margin-left: 0.5rem;
}
}
</style>

View file

@ -1,8 +1,8 @@
---
import { Image } from 'astro:assets'
import mlb_ce from '../../assets/ce/mlb.webp'
import type { GlobImage } from '../../types/generic'
import { plsLoadImage } from '../../utils/tools'
import mlb_ce from '../assets/ce/mlb.webp'
import type { GlobImage } from '../types/generic'
import { plsLoadImage } from '../utils/tools'
export interface Props {
name: string

View file

@ -1,7 +1,7 @@
---
import { Image } from 'astro:assets'
import type { GlobImage } from '../../types/generic'
import { plsLoadImage } from '../../utils/tools'
import type { GlobImage } from '../types/generic'
import { plsLoadImage } from '../utils/tools'
export interface Props {
site: string
@ -25,7 +25,7 @@ const loadedLogoImage = plsLoadImage(images_logos, imagePath)
aria-label=`${site} - new window`
>
<article class="contact do-hover">
<Image src={loadedLogoImage} alt={logoAltText} loading={'eager'}/>
<Image src={loadedLogoImage} alt={logoAltText} />
<div>
<h2>{site}</h2>
</div>
@ -63,7 +63,6 @@ const loadedLogoImage = plsLoadImage(images_logos, imagePath)
article:hover div {
border-radius: 1.25rem;
padding: 0 0.5rem;
margin: unset;
display: flex;
align-items: center;
justify-content: center;
@ -72,9 +71,6 @@ const loadedLogoImage = plsLoadImage(images_logos, imagePath)
height: calc(var(--size-value));
width: calc(var(--size-value) - 1rem);
opacity: 90%;
border-style: solid;
border-width: 10px;
border-color: var(--c-darkgray);
z-index: 100;
position: absolute;
}

View file

@ -1,7 +1,7 @@
---
import { Image } from 'astro:assets'
import type { GlobImage } from '../../types/generic'
import { plsLoadImage } from '../../utils/tools'
import type { GlobImage } from '../types/generic'
import { plsLoadImage } from '../utils/tools'
export interface Props {
name: string
@ -25,7 +25,7 @@ const loadedImage = plsLoadImage(images, imagePath)
aria-label=`${name} - new window`
>
<div class="heading">{name}</div>
<Image src={loadedImage} alt={name} loading={'eager'}/>
<Image src={loadedImage} alt={name} />
<h2 class="subtext">
{origin}
</h2>

View file

@ -1,9 +1,4 @@
---
export interface Props {
fadeout?: boolean
}
const { fadeout } = Astro.props
const display = fadeout ? "": "display: none"
---
<div>
@ -11,33 +6,22 @@ const display = fadeout ? "": "display: none"
I am currently working on a site to catalogue past and future TAs.<br/>
Check it out at <a href="https://fgo-ta.com">fgo-ta.com</a>
</span>
<div class="fade" style={display}></div>
</div>
<style>
div {
display: flex;
width: 100%;
flex-wrap: nowrap;
flex-flow: column;
background-color: var(--c-darkergray);
height: 5em;
background-color: var(--c-gray);
text-align: center;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5em;
padding: 2rem 0rem 0rem 0rem;
}
a {
text-align: center;
text-decoration: none;
color: var(--c-darkpurple);
}
.fade {
margin-top: 3rem;
background: linear-gradient(to bottom, transparent, var(--c-lightgray));
height: 2.5rem;
width: 100%;
text-decoration: none;
}
</style>

View file

@ -1,27 +1,21 @@
---
import { Image } from 'astro:assets'
import logo from '../../assets/logo.svg'
import { Image } from 'astro:assets';
import logo from '../assets/logo.svg'
import hamburger from 'iconoir/icons/menu.svg'
const hamburger_src_url = `url("${hamburger.src}")`
const hamburger_src_url = `url("${hamburger.src}")`;
---
<header>
<a href="/" rel="noopener noreferrer" aria-label="Home" role="button">
<Image src={logo} alt="" loading="eager"/>
<span class="visually-hidden">Logo</span>
<a href="/" rel="noopener noreferrer" aria-label="Home" role="navigation">
<Image src={logo} alt="Firq Website Logo"/>
<span class="visually-hidden">Firq Website Logo</span>
</a>
<ul class="desktop">
<slot name="desktop" />
<slot name="desktop"/>
</ul>
<button
class="mobile"
aria-label="Navigation Button"
tabindex="0"
onclick="this.focus()"
role="button"
>
<button class="mobile" aria-label="Navigation Button" tabindex="0" onclick="this.focus()" role="navigation">
<ul>
<slot name="mobile" />
<slot name="mobile"/>
</ul>
<div class="placeholder"></div>
<div class="hamburger-menu" role="navigation"></div>
@ -33,13 +27,12 @@ const hamburger_src_url = `url("${hamburger.src}")`
z-index: 1000;
position: sticky;
top: 0px;
background-color: var(--c-darkergray);
background-color: var(--c-darkgray);
display: flex;
height: auto;
width: 100%;
align-items: flex-start;
line-height: 1.5em;
border-bottom: 2px solid var(--c-darkpurple) ;
}
header > a {
margin-left: 16px;
@ -68,7 +61,7 @@ const hamburger_src_url = `url("${hamburger.src}")`
line-height: 1.5em;
}
.mobile > ul {
background-color: var(--c-darkergray);
background-color: var(--c-darkgray);
align-items: center;
flex-wrap: wrap;
flex-direction: column;
@ -85,7 +78,7 @@ const hamburger_src_url = `url("${hamburger.src}")`
.mobile {
display: flex;
background-color: var(--c-darkergray);
background-color: var(--c-darkgray);
border: 0px;
width: 100%;
height: 64px;
@ -115,14 +108,13 @@ const hamburger_src_url = `url("${hamburger.src}")`
.hamburger-menu {
mask: var(--hamburger_src_url) no-repeat center;
mask-size: cover;
background-color: white;
width: 2.25rem;
height: 2.25rem;
width: 2rem;
height: 2rem;
position: static;
align-self: flex-start;
margin-right: 1rem;
margin-top: 0.825rem;
margin-top: 1rem;
}
@media (min-width: 1140px) {

View file

@ -1,7 +1,7 @@
---
export interface Props {
currentPage?: string
navtype: 'mobile' | 'desktop'
navtype: "mobile" | "desktop"
link: string
text: string
icon: ImageMetadata
@ -18,10 +18,10 @@ if (currentPage === slug) {
currPage = 'current'
}
const icon_src_url = `url("${icon.src}")`
const icon_src_url = `url("${icon.src}")`;
const fulllink = `/${slug}`
let extraattributes = navtype === 'mobile' ? { tabindex: '0' } : {}
let extraattributes = navtype === "mobile" ? { tabindex: "0"} : {}
---
<li>
@ -30,7 +30,7 @@ let extraattributes = navtype === 'mobile' ? { tabindex: '0' } : {}
rel="noopener noreferrer"
aria-label={text}
class={currPage}
role="button"
role="navigation"
{...extraattributes}
>
<div class="icon"></div>
@ -60,11 +60,11 @@ let extraattributes = navtype === 'mobile' ? { tabindex: '0' } : {}
}
li > a:hover {
color: var(--c-purplepink) !important;
color: var(--c-purplepink);
}
li > a:hover > .icon {
background-color: var(--c-purplepink) !important;
background-color: var(--c-purplepink);
}
.current {

View file

@ -1,7 +1,7 @@
---
import { Image } from 'astro:assets';
import type { GlobImage } from '../../types/generic'
import { plsLoadImage } from '../../utils/tools'
import type { GlobImage } from '../types/generic'
import { plsLoadImage } from '../utils/tools'
export interface Props {
name: string

View file

@ -1,7 +1,7 @@
---
import { Image } from 'astro:assets'
import type { GlobImage } from '../../types/generic'
import { plsLoadImage } from '../../utils/tools'
import type { GlobImage } from '../types/generic'
import { plsLoadImage } from '../utils/tools'
export interface Props {
date: string

View file

@ -1,7 +1,7 @@
---
import { Image } from 'astro:assets'
import type { GlobImage } from '../../types/generic'
import { plsLoadImage } from '../../utils/tools'
import type { GlobImage } from '../types/generic'
import { plsLoadImage } from '../utils/tools'
export interface Props {
title: string
@ -20,7 +20,7 @@ const loadedImage = plsLoadImage(images_logos, imagePath)
<a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
<article>
<Image src={loadedImage} alt={logoAltText} loading={'eager'}/>
<Image src={loadedImage} alt={logoAltText} />
<div>
<h2>{title}</h2>
</div>
@ -70,9 +70,6 @@ const loadedImage = plsLoadImage(images_logos, imagePath)
opacity: 90%;
z-index: 100;
position: absolute;
border-style: solid;
border-width: 10px;
border-color: var(--c-darkgray);
}
article:hover h2 {

View file

@ -1,109 +0,0 @@
---
import '@fontsource/work-sans/800.css'
import '@fontsource/work-sans/600.css'
export interface Props {
maintext: string
subtext: string
fadeout?: boolean
baseurl?: string
returnbutton?: boolean
}
const { maintext, subtext, fadeout, baseurl, returnbutton } = Astro.props
const displayFadeout = fadeout ? "": "display: none"
const displayBackButton = returnbutton ? "": "display: none"
---
<div class="wrap">
<div class="head">{maintext}</div>
<div class="sub">{subtext}</div>
<a href=`/${baseurl}` style={displayBackButton}>&lt;&lt; Back to {baseurl}</a>
<div class="fade" style={displayFadeout}></div>
</div>
<style>
a {
font-weight: 600;
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
color: white;
margin: 1rem 0px 0px;
padding: 0.5rem 0.75rem;
text-decoration: none;
background-color: var(--c-lightgray);
border-radius: 10px;
border-style: solid;
border-width: 2px;
border-color: var(--c-lightgray);
text-transform: capitalize;
}
a:hover {
border-color: var(--c-darkpurple);
}
.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;
margin-top: 0.5em;
}
.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

@ -1,75 +0,0 @@
---
import '@fontsource/work-sans/800.css'
---
<div class="wrap">
<div class="head">Hi, I'm <span class="fancy">Firq</span></div>
<div class="sub">Nice to meet you</div>
<div class="fade"></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: 1.5rem;
background: linear-gradient(to bottom, transparent, var(--c-lightgray));
height: 2.5rem;
width: 100%;
}
.head {
padding-top: 2rem;
font-size: 3rem;
font-weight: 800;
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial,
sans-serif;
}
.sub {
font-size: 1rem;
font-weight: 800;
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial,
sans-serif;
}
.fancy {
color: var(--c-darkpurple);
}
@supports (background-clip: text) {
.fancy {
background: linear-gradient(125deg, var(--c-darkpurple), var(--c-purplepink), var(--c-reddish) );
background-clip: text;
color: transparent;
}
}
@media (min-width: 620px) {
.head {
font-size: 4rem;
}
.sub {
font-size: 1.25rem;
}
}
@media (min-width: 1000px) {
.head {
font-size: 6rem;
}
.sub {
font-size: 1.5rem;
}
}
</style>

View file

@ -1,16 +0,0 @@
import { z, defineCollection } from 'astro:content'
const blogCollection = defineCollection({
type: 'content', // v2.5.0 and later
schema: z.object({
title: z.string(),
tags: z.array(z.string()),
pubDate: z.date(),
description: z.string(),
author: z.string(),
}),
})
export const collections = {
blog: blogCollection,
}

1
src/env.d.ts vendored
View file

@ -1,2 +1 @@
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />

View file

@ -1,6 +1,6 @@
---
import Navbar from '../components/navbar/navbar.astro'
import NavbarEntry from '../components/navbar/navbarEntry.astro'
import Navbar from '../components/navbar.astro'
import NavbarEntry from '../components/navbarEntry.astro'
import navdata from '../../static/data/_navdata.json'
import embed from '../assets/embed.png'
@ -77,22 +77,12 @@ const mapped_navdata = navdata.map((item) => ({
<Navbar>
{
mapped_navdata.map((item) => (
<NavbarEntry
currentPage={currentpage}
navtype="desktop"
{...item}
slot="desktop"
/>
<NavbarEntry currentPage={currentpage} navtype="desktop" {...item} slot="desktop"/>
))
}
{
mapped_navdata.map((item) => (
<NavbarEntry
currentPage={currentpage}
navtype="mobile"
{...item}
slot="mobile"
/>
<NavbarEntry currentPage={currentpage} navtype="mobile" {...item} slot="mobile"/>
))
}
</Navbar>
@ -108,12 +98,10 @@ const mapped_navdata = navdata.map((item) => ({
--c-darkgray: #1e1e1e;
--c-duskgray: #242424;
--c-gray: #2e2e2e;
--c-lighter: #eee;
--c-lightgray: #3e3e3e;
--c-darkpurple: #b86cff;
--c-purplepink: #c105ff;
--c-darkergray: #1b1b1b;
--c-reddish: #ff0077;
}
body {
background: var(--c-lightgray);
@ -129,5 +117,5 @@ const mapped_navdata = navdata.map((item) => ({
padding: 0;
position: absolute;
width: 1px;
}
}
</style>

View file

@ -0,0 +1,74 @@
---
export interface Props {
title: string
}
const { title } = Astro.props
---
<section class="base">
<h1>{title}</h1>
<div>
<slot />
</div>
</section>
<style>
h1 {
font-size: 40px;
line-height: 48px;
letter-spacing: -1px;
color: white;
font-size: 2.25rem;
margin-top: 1rem;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
padding: 0.25rem 1.5rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
div {
row-gap: 1em;
column-gap: 1em;
justify-content: center;
align-self: center;
display: flex;
flex-flow: row wrap;
padding: 1em;
color: white;
font-size: 1em;
}
.base {
margin-left: 1rem;
margin-right: 1rem;
}
@media (min-width: 400px) {
.base {
margin-left: 3rem;
margin-right: 3rem;
}
}
@media (min-width: 1500px) {
.base {
margin-left: 10%;
margin-right: 10%;
}
}
@media (min-width: 512px) {
div {
justify-content: left;
}
}
@media (min-width: 520px) {
h1 {
margin: 0.5rem 0.75rem 0.5rem 0.75rem;
}
}
</style>

View file

@ -1,5 +1,4 @@
---
import SmallTitle from '../components/titles/smallTitle.astro'
import Layout from './Layout.astro'
const { frontmatter } = Astro.props
@ -14,12 +13,15 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
'en-GB',
options_date
)
const subtext = `Written by ${frontmatter.author} • Published on ${date}`
---
<Layout title={title} currentpage="blog" descriptionOverride={description}>
<SmallTitle maintext={frontmatter.title} subtext={subtext} fadeout={true} returnbutton={true} baseurl='blog'/>
<a href="/blog"><i class="iconoir-fast-arrow-left"></i>Back to all posts</a>
<div>
<h1>
{frontmatter.title}
</h1>
<p>by {frontmatter.author} • Published on {date}</p>
<article>
<slot />
</article>

View file

@ -1,59 +1,36 @@
---
export interface Props {
title: string
titlehidden?: boolean
displayLine?: boolean
}
const { title, titlehidden, displayLine } = Astro.props
const display = titlehidden ? "display: none" : ""
const line = displayLine ? "flex" : "none"
const { title } = Astro.props
---
<section>
<h1 style={display}>{title}</h1>
<h1>{title}</h1>
<div class="wrapper">
<div class="start hightlighter"></div>
<div class="line"></div>
<slot />
<div class="drop hightlighter"></div>
<div class="drop"></div>
</div>
</section>
<style define:vars={{ line }}>
section {
padding-left: 0.25em;
padding-right: 0.25em;
padding-bottom: 5rem;
}
.hightlighter {
left: 0;
right: 0;
<style>
.drop {
display: flex;
position: absolute;
visibility: visible;
left: 0;
right: 0;
bottom: -5rem;
margin-left: auto;
margin-right: auto;
height: 1.5rem;
width: 1.5rem;
}
.drop {
bottom: -5rem;
border-radius: 0% 50% 50% 50%;
transform: rotate(45deg);
background-color: var(--c-darkpurple);
}
.start {
top: -2rem;
border-radius: 40%;
border-style: solid;
border-width: 0.25rem;
border-color: var(--c-lightgray);
background-color: var(--c-darkpurple);
}
.line {
display: flex;
position: absolute;
@ -69,31 +46,30 @@ const line = displayLine ? "flex" : "none"
z-index: -1;
}
h1 {
font-size: 40px;
line-height: 48px;
letter-spacing: -1px;
color: white;
font-size: 1.6rem;
font-size: 2.25rem;
margin-top: 1rem;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
padding: 0.25rem 1.5rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
justify-self: center;
text-align: center;
}
.wrapper {
margin: 2rem 2rem 0.5rem 2rem;
margin: 2rem 3rem 0.5rem 3rem;
display: flex;
flex-flow: column wrap;
row-gap: 1em;
column-gap: 1em;
align-self: center;
align-items: stretch;
align-content: center;
justify-content: space-around;
padding: 1em;
color: white;
@ -104,41 +80,21 @@ const line = displayLine ? "flex" : "none"
.drop {
margin-left: 1.5rem;
}
.start {
margin-left: 1.25rem;
}
.line {
margin-left: 2.1rem;
}
h1 {
margin-left: 3rem;
font-size: 1.85rem;
}
}
@media (min-width: 1500px) {
.wrapper {
margin-left: 15rem;
margin-right: 15rem;
flex-direction: row;
}
section {
padding-bottom: unset;
}
.drop, .start, .line {
display: var(--line);
margin-left: 2rem;
}
.start {
margin-left: 1.75rem;
}
.line {
margin-left: 2.6rem;
height: calc(100% + 6rem);
translate: 0px -2rem;
margin-left: 20rem;
margin-right: 20rem;
}
h1 {
margin-left: 15rem;
margin-right: 15rem;
margin-left: 20rem;
margin-right: 20rem;
}
}
</style>

View file

@ -1,10 +1,8 @@
---
import '@fontsource/work-sans/500.css'
import '@fontsource/work-sans/600.css'
import { Image } from 'astro:assets'
import Layout from '../layouts/Layout.astro'
import BaseSection from '../layouts/baseSection.astro'
import sadshishou from '../assets/shishousad.webp'
import SmallTitle from '../components/titles/smallTitle.astro'
const description = "Error. This shouldn't happen :/"
---
@ -14,7 +12,7 @@ const description = "Error. This shouldn't happen :/"
currentpage="404"
descriptionOverride={description}
>
<SmallTitle maintext='Error' subtext='FirqhundredandFirq - Not Found' fadeout={true}/>
<BaseSection title="FirqhundredandFirq - Not Found">
<div>
<Image src={sadshishou} alt="Sad Shishou" />
<h2>Well ... you were not supposed to end up here.</h2>
@ -22,51 +20,44 @@ const description = "Error. This shouldn't happen :/"
&lt;&lt; Go back home
</a>
</div>
</BaseSection>
</Layout>
<style>
div {
padding: 0px 2rem;
display: flex;
flex-wrap: nowrap;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}
h2 {
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
font-weight: 500;
color: white;
font-size: 1.25rem;
font-size: 2rem;
font-weight: bold;
margin-top: 1rem;
max-width: max-content;
text-align: center;
font-style: italic;
}
a {
display: flex;
align-items: center;
justify-content: center;
width: 75%;
text-align: center;
width: fit-content;
font-weight: 600;
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
color: white;
margin: 1rem 0px 0px;
padding: 0.5rem 0.75rem;
background-color: var(--c-gray);
padding: 0.5rem 0px;
margin-bottom: 2rem;
text-decoration: none;
background-color: var(--c-darkergray);
border-radius: 10px;
border-style: solid;
border-width: 2px;
border-color: var(--c-darkergray);
text-transform: capitalize;
}
font-size: 1.5rem;
font-weight: bold;
a:hover {
border-color: var(--c-darkpurple);
&:hover {
color: var(--c-darkpurple);
}
}
img {
width: 200px;
height: auto;
border-radius: 10%;
width: 256px;
height: 256px;
}
</style>

View file

@ -1,19 +1,17 @@
---
import Layout from '../layouts/Layout.astro'
import AboutSection from '../layouts/aboutSection.astro'
import ContactSection from '../layouts/contactSection.astro'
import ContactCard from '../components/cards/contactCard.astro'
import ContactCard from '../components/contactCard.astro'
import contactdata from '../../static/data/_contactdata.json'
import CustomFooter from '../layouts/customFooter.astro'
import TechnologyCard from '../components/cards/technologyCard.astro'
import TechnologyCard from '../components/technologyCard.astro'
import technologydata from '../../static/data/_technologydata.json'
import SmallTitle from '../components/titles/smallTitle.astro'
const description =
"A summary of the technologies used as well as my contact information. You'll also find disclaimers and thank you notes for the people that helped me."
const subtext =
"This is a small sideproject that I'm creating. First time doing webdev in general, and first project using Typescript."
---
<Layout
@ -21,7 +19,10 @@ const subtext =
currentpage="about"
descriptionOverride={description}
>
<SmallTitle maintext="About" subtext={subtext} fadeout={true} />
<AboutSection title="About">
This is a small sideproject that I'm creating. First time doing webdev in
general, and first project using Typescript.
</AboutSection>
<ContactSection title="Technologies used">
{technologydata.map((item) => <TechnologyCard {...item} />)}
</ContactSection>

35
src/pages/blog.astro Normal file
View file

@ -0,0 +1,35 @@
---
import Layout from '../layouts/Layout.astro'
import BlogCard from '../components/blogCard.astro'
import BlogSection from '../layouts/blogSection.astro'
const description =
'My own small blog. Topics include FGO, TA, Programming, web technologies and more!'
const allPosts = await Astro.glob('../pages/blog/*.{md,mdx}')
allPosts.sort(
(a, b) =>
Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate)
)
---
<Layout
title="Blog - Firq FGO Site"
currentpage="blog"
descriptionOverride={description}
>
<BlogSection title="Blog Articles">
{
allPosts.map((post) => (
<BlogCard
url={post.url}
title={post.frontmatter.title}
pubdate={post.frontmatter.pubDate}
description={post.frontmatter.description}
author={post.frontmatter.author}
/>
))
}
</BlogSection>
</Layout>
<style></style>

View file

@ -1,17 +0,0 @@
---
import { getCollection } from 'astro:content'
export async function getStaticPaths() {
const blogEntries = await getCollection('blog')
return blogEntries.map((entry) => ({
params: { slug: entry.slug },
props: { entry },
}))
}
const { entry } = Astro.props
const { Content } = await entry.render()
---
<Content />

View file

@ -89,7 +89,7 @@ The container is also published to the docker registry that the Forgejo instance
Since my website is now using a docker container instead of the previous `rsync` + `screen` approach, a new deployment solution was needed.
In the end, Neshura proposed to use <a href="https://github.com/louislam/dockge" target="_blank" rel="noopener noreferrer" >Dockge</a>, a new, simple container management tool build by the developer of the beloved uptime-kuma. With that set up, getting the website only was really really easy:
In the end, Neshura proposed to use <a href="https://github.com/louislam/dockge" target="_blank" rel="noopener noreferrer" style="font-style: unset">Dockge</a>, a new, simple container management tool build by the developer of the beloved uptime-kuma. With that set up, getting the website only was really really easy:
1. Create a new stack
2. Add a container entry
@ -161,4 +161,4 @@ In the end, I must say migrating was a lot more painless than expected. Sure, Fo
I also updated my about page to now reflect the migration, as the old technologies weren't up-to-date anymore.
If you want to check out the repository by yourself, feel free to do so. <a href="https://forgejo.neshweb.net/Firq/firq-dev-website" target="_blank" rel="noopener noreferrer" >It is available on Neshuras Forgejo instance</a>
If you want to check out the repository by yourself, feel free to do so. <a href="https://forgejo.neshweb.net/Firq/firq-dev-website" target="_blank" rel="noopener noreferrer" style="font-style: unset">It is available on Neshuras Forgejo instance</a>

View file

@ -1,39 +0,0 @@
---
import Layout from '../../layouts/Layout.astro'
import BlogCard from '../../components/cards/blogCard.astro'
import BlogSection from '../../layouts/blogSection.astro'
import SmallTitle from '../../components/titles/smallTitle.astro'
import { getCollection } from 'astro:content'
const description =
'My own small blog. Topics include FGO, TA, Programming, web technologies and more!'
const blogEntries = await getCollection('blog')
blogEntries.sort(
(a, b) =>
(b.data.pubDate.valueOf() - a.data.pubDate.valueOf() )
)
---
<Layout
title="Blog - Firq FGO Site"
currentpage="blog"
descriptionOverride={description}
>
<SmallTitle maintext="Blog Articles" subtext="" fadeout={true} />
<BlogSection title="Blog Articles" displayLine={true} titlehidden={true}>
{
blogEntries.map((post) => (
<BlogCard
url="blog"
slug={post.slug}
title={post.data.title}
pubdate={post.data.pubDate}
description={post.data.description}
author={post.data.author}
/>
))
}
</BlogSection>
</Layout>
<style></style>

View file

@ -18,10 +18,10 @@ it doesn't interact with the hitrate, but if you have proof that this is differe
Instant Kill & Instant Death: One of the most rejected systems to exist in FGO. Most players know of it, but discard it because of its unreliability and uselessness against stronger enemies. In this article, I want to dive a bit into the workings of Instant Kill and help you understand how you can, in specific scenarios, use it to your advantage.
There are a multitude of servants that have access to instant-kill, but I will only highlight a few here (You can view the full list on <a href="https://gamepress.gg/grandorder/instant-death" target="_blank" rel="noopener noreferrer" >Gamepress</a>)
There are a multitude of servants that have access to instant-kill, but I will only highlight a few here (You can view the full list on <a href="https://gamepress.gg/grandorder/instant-death" target="_blank" rel="noopener noreferrer" style="font-style: unset">Gamepress</a>)
- **Nitocris (Caster)**: The most prominent figure, as she has easy access to her instant-killing NP and a skill that increases her death hit rate
- **Void Shiki (Saber)**: Another Example of an AOE Instant-Kill servant who also has access to Death Resist debuffs. One quest in her release event even specifically used the Instant Kill mechanic (<a href="https://apps.atlasacademy.io/db/NA/quest/94021308/1" target="_blank" rel="noopener noreferrer" >Quest Link here</a>)
- **Void Shiki (Saber)**: Another Example of an AOE Instant-Kill servant who also has access to Death Resist debuffs. One quest in her release event even specifically used the Instant Kill mechanic (<a href="https://apps.atlasacademy.io/db/NA/quest/94021308/1" target="_blank" rel="noopener noreferrer" style="font-style: unset">Quest Link here</a>)
- **King Hassan (Assassin)**: The only servant that can afflict enemies with instant death on normal attacks (Note: David can do this as well, but only if he has his Bond CE equipped)
But since Instant Kill is based on probability, most players are relucatant to use it in their farming compositions. This thems from the different death rates enemies have:
@ -53,10 +53,10 @@ The parameters here are the following:
## Example
The main reason this came up was because of a farming comp used in <a href="https://apps.atlasacademy.io/db/NA/quest/94061820/1" target="_blank" rel="noopener noreferrer" >Hunting Quest XI - Day 5 - Pride+</a>. The node is structured
The main reason this came up was because of a farming comp used in <a href="https://apps.atlasacademy.io/db/NA/quest/94061820/1" target="_blank" rel="noopener noreferrer" style="font-style: unset">Hunting Quest XI - Day 5 - Pride+</a>. The node is structured
into a 2 - 1 - 1 Layout, meaning using a dual-DPS setup would be the way to go.
Looking at the stats for the first wave, it made sense to use Nitocris: Both Ghouls have a 100% Death Rate <a href="https://apps.atlasacademy.io/db/NA/enemy/9940700" target="_blank" rel="noopener noreferrer" >according to Atlas Academy</a>.
Looking at the stats for the first wave, it made sense to use Nitocris: Both Ghouls have a 100% Death Rate <a href="https://apps.atlasacademy.io/db/NA/enemy/9940700" target="_blank" rel="noopener noreferrer" style="font-style: unset">according to Atlas Academy</a>.
I went with using Nitocris, since she has a 100% NP charge and a skill that increases her Instant Death rate by 100%. Not needing any additional charge meant that no other buffs or AOE charges needed to be used on turn 1.

View file

@ -1,9 +1,9 @@
---
import Layout from '../layouts/Layout.astro'
import Hero from '../components/hero.astro'
import BaseSection from '../layouts/baseSection.astro'
import FavouriteCard from '../components/cards/favouriteCard.astro'
import FavouriteCard from '../components/favouriteCard.astro'
import favouritesdata from '../../static/data/_favouritesdata.json'
import Hi from '../components/titles/title.astro'
const description =
'The very own page of Firq for providing informating about TA servants, listing past TA achievements and hosting a blog for talking about FGO, Programming and other stuff'
@ -14,7 +14,7 @@ const description =
currentpage="home"
descriptionOverride={description}
>
<Hi />
<Hero />
<BaseSection title="Favourites">
{favouritesdata.map((item) => <FavouriteCard {...item} />)}
</BaseSection>

View file

@ -2,12 +2,11 @@
import Layout from '../layouts/Layout.astro'
import BaseSection from '../layouts/baseSection.astro'
import ServantCard from '../components/cards/servantCard.astro'
import ServantCard from '../components/servantCard.astro'
import servantdata from '../../static/data/_servantdata.json'
import CeCard from '../components/cards/ceCard.astro'
import CeCard from '../components/ceCard.astro'
import cedata from '../../static/data/_cedata.json'
import SmallTitle from '../components/titles/smallTitle.astro'
const description =
'A list of all the servants and ces that Firq can offer up on support for TA.'
@ -18,7 +17,6 @@ const description =
currentpage="servants"
descriptionOverride={description}
>
<SmallTitle maintext='TA Offering' subtext='Servants and CEs I can offer for your TAs' fadeout={true}/>
<BaseSection title="Servants">
{servantdata.map((item) => <ServantCard {...item} />)}
</BaseSection>

View file

@ -8,11 +8,10 @@
import Layout from '../layouts/Layout.astro'
import TaSection from '../layouts/taSection.astro'
import TaCard from '../components/cards/taCard.astro'
import TaCard from '../components/taCard.astro'
import tadata from '../../static/data/_tadata.json'
import featured_data from '../../static/data/_featureddata.json'
import FgotaHero from '../components/fgotaHero.astro'
import SmallTitle from '../components/titles/smallTitle.astro'
const important_data = tadata.filter(function (el) {
return [
@ -38,8 +37,7 @@ const description = 'A collection of TAs previously completed be Firq.'
currentpage="ta-collection"
descriptionOverride={description}
>
<SmallTitle maintext='TA Collection' subtext=''/>
<FgotaHero fadeout={true}/>
<FgotaHero />
<TaSection title="Notable TAs" abovetext="My most notable TAs">
{important_data.map((item) => <TaCard {...item} />)}
</TaSection>

View file

@ -190,7 +190,7 @@
"bond10": false
},
{
"name": "Taigong Wang",
"name": "Taigon Wang",
"level": "70",
"np": "1",
"skills": "10 / 9 / 10",