Compare commits
1 commit
0.2.0-pre.
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| f5bb4bf78e |
59 changed files with 5974 additions and 4860 deletions
|
|
@ -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,33 +49,22 @@ jobs:
|
|||
tag: ${{ github.ref_name }}
|
||||
prerelease: true
|
||||
|
||||
auto-deploy-dockge:
|
||||
needs: [ build-site ]
|
||||
if: success()
|
||||
runs-on: docker
|
||||
container: forgejo.neshweb.net/firq/dockge-cli:0.1.2
|
||||
steps:
|
||||
- name: Configure Dockge CLI
|
||||
run: |
|
||||
dockge host '${{ vars.DOCKGE_HOST }}'
|
||||
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
|
||||
|
||||
run-unlighthouse:
|
||||
needs: [ build-site ]
|
||||
if: success()
|
||||
runs-on: docker
|
||||
steps:
|
||||
- name: Launch workflow
|
||||
run: |
|
||||
payload="{\"ref\": \"${GITHUB_REF_NAME}\", \"inputs\": { \"containertag\": \"${GITHUB_REF_NAME}\" }}"
|
||||
curl -X "POST" \
|
||||
-H "accept: application/json" \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: token ${GITHUB_TOKEN}" \
|
||||
-d "${payload}" \
|
||||
"${GITHUB_API_URL}/repos/${GITHUB_REPOSITORY}/actions/workflows/unlighthouse.yml/dispatches" -v
|
||||
# doesn't work atm
|
||||
# unlighthouse:
|
||||
# needs: [publish]
|
||||
# if: success()
|
||||
# runs-on: docker
|
||||
# container: registry.gitlab.com/gitlab-ci-utils/lighthouse:latest
|
||||
# services:
|
||||
# website:
|
||||
# image: forgejo.neshweb.net/firq/firq-dev-website:preview
|
||||
# steps:
|
||||
# - name: Install Dependencies
|
||||
# run: npm install @unlighthouse/cli puppeteer
|
||||
# - name: Run unlighthouse
|
||||
# run: node_modules/.bin/unlighthouse-ci
|
||||
# - name: Upload reports
|
||||
# uses: actions/upload-artifact@v3
|
||||
# with:
|
||||
# name: unlighthouse-reports
|
||||
# path: unlighthouse-reports/
|
||||
|
|
|
|||
|
|
@ -4,85 +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
|
||||
|
||||
auto-deploy-dockge:
|
||||
needs: [ build-site ]
|
||||
if: success()
|
||||
runs-on: docker
|
||||
container: forgejo.neshweb.net/firq/dockge-cli:0.1.2
|
||||
steps:
|
||||
- name: Configure Dockge CLI
|
||||
run: |
|
||||
dockge host '${{ vars.DOCKGE_HOST }}'
|
||||
dockge login --user '${{ secrets.DOCKGE_USER }}' --password '${{ secrets.DOCKGE_CREDENTIAL }}'
|
||||
- name: Check status and redeploy
|
||||
run: |
|
||||
dockge status firq-dev
|
||||
dockge update firq-dev
|
||||
dockge status firq-dev
|
||||
|
||||
run-unlighthouse:
|
||||
needs: [ build-site ]
|
||||
if: success()
|
||||
runs-on: docker
|
||||
steps:
|
||||
- name: Launch workflow
|
||||
run: |
|
||||
payload="{\"ref\": \"${GITHUB_REF_NAME}\", \"inputs\": { \"containertag\": \"${GITHUB_REF_NAME}\" }}"
|
||||
curl -X "POST" \
|
||||
-H "accept: application/json" \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: token ${GITHUB_TOKEN}" \
|
||||
-d "${payload}" \
|
||||
"${GITHUB_API_URL}/repos/${GITHUB_REPOSITORY}/actions/workflows/unlighthouse.yml/dispatches" -v
|
||||
|
||||
create-release:
|
||||
needs: [ build-site ]
|
||||
release:
|
||||
needs: [build-site]
|
||||
if: success()
|
||||
runs-on: docker
|
||||
steps:
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,26 +1,18 @@
|
|||
on:
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
containertag:
|
||||
description: "Tag of the container to test"
|
||||
default: "preview"
|
||||
type: "string"
|
||||
push:
|
||||
tags:
|
||||
- '[0-9]+\.[0-9]+\.[0-9]+unlighthouse[0-9]+'
|
||||
- '[0-9]+\.[0-9]+\.[0-9]+ulh[0-9]+'
|
||||
|
||||
jobs:
|
||||
unlighthouse:
|
||||
runs-on: docker
|
||||
container:
|
||||
image: forgejo.neshweb.net/ci-docker-images/unlighthouse:0.3.0
|
||||
services:
|
||||
website:
|
||||
image: forgejo.neshweb.net/firq/firq-dev-website:${{ inputs.containertag }}
|
||||
options: >-
|
||||
--workdir /
|
||||
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 "http://localhost:8081/"
|
||||
run: unlighthouse-ci --site "https://preview.firq.dev/"
|
||||
- name: Prepare artifacts
|
||||
run: cp serve.json unlighthouse-reports
|
||||
- name: Upload reports
|
||||
|
|
|
|||
6
.gitignore
vendored
6
.gitignore
vendored
|
|
@ -4,12 +4,6 @@ dist/
|
|||
public/
|
||||
maintenance/
|
||||
|
||||
# astro stuff
|
||||
.astro/
|
||||
|
||||
# config stuff
|
||||
.vscode/
|
||||
|
||||
# Temp Scripts
|
||||
scripts/
|
||||
|
||||
|
|
|
|||
4
.vscode/extensions.json
vendored
Normal file
4
.vscode/extensions.json
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"recommendations": ["astro-build.astro-vscode"],
|
||||
"unwantedRecommendations": []
|
||||
}
|
||||
11
.vscode/launch.json
vendored
Normal file
11
.vscode/launch.json
vendored
Normal 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
12
.vscode/settings.json
vendored
Normal 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": []
|
||||
}
|
||||
|
|
@ -1,15 +1,16 @@
|
|||
FROM node:22-alpine AS build
|
||||
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:2 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
|
||||
EXPOSE 8081
|
||||
CMD serve public/ -p 8081
|
||||
|
||||
CMD [ "serve", "public/", "-p", "8081" ]
|
||||
|
|
|
|||
38
README.md
38
README.md
|
|
@ -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 |
|
||||
|
||||
|
|
|
|||
9546
package-lock.json
generated
9546
package-lock.json
generated
File diff suppressed because it is too large
Load diff
22
package.json
22
package.json
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@firq/fgosite",
|
||||
"type": "module",
|
||||
"version": "0.2.0-pre.17",
|
||||
"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.9.4",
|
||||
"@astrojs/mdx": "^3.1.8",
|
||||
"@astrojs/sitemap": "^3.2.1",
|
||||
"@fontsource/work-sans": "^5.0.18",
|
||||
"astro": "^4.16.6",
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -17,15 +17,6 @@
|
|||
"value" : "max-age=31536000"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"source": "**/*.woff2",
|
||||
"headers": [
|
||||
{
|
||||
"key": "Cache-Control",
|
||||
"value": "no-cache"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"source" : "**/*.@(jpg|jpeg|gif|png|webp|svg)",
|
||||
"headers" : [{
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 425 KiB After Width: | Height: | Size: 554 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 421 KiB After Width: | Height: | Size: 565 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 436 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 120 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 107 KiB |
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
@ -35,12 +35,14 @@ const mlb_image = mlb ? 'mlbalign' : 'hidemlb'
|
|||
|
||||
article {
|
||||
border-radius: 1.25rem;
|
||||
border: 2px var(--c-darkgray) solid;
|
||||
background-color: var(--c-darkergray);
|
||||
padding: 20px;
|
||||
padding-top: 5px;
|
||||
width: 35%;
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
transition: transform var(--speed) var(--ease);
|
||||
margin: 0px;
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
|
|
@ -53,11 +55,11 @@ const mlb_image = mlb ? 'mlbalign' : 'hidemlb'
|
|||
}
|
||||
|
||||
article:hover {
|
||||
border: 2px var(--c-darkpurple) solid;
|
||||
transform: scale(var(--hover-scale));
|
||||
}
|
||||
|
||||
article div {
|
||||
margin: auto;
|
||||
margin: 0.5em auto;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -68,17 +70,27 @@ const mlb_image = mlb ? 'mlbalign' : 'hidemlb'
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
.heading-center {
|
||||
display: flex;
|
||||
height: 4rem;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25em;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ce-crop {
|
||||
width: min(85%, 85px);
|
||||
height: auto;
|
||||
width: 6em;
|
||||
height: 6em;
|
||||
}
|
||||
|
||||
.mlb {
|
||||
width: min(85%, 85px);
|
||||
width: 5.5rem;
|
||||
height: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.mlbalign {
|
||||
|
|
@ -89,18 +101,18 @@ const mlb_image = mlb ? 'mlbalign' : 'hidemlb'
|
|||
|
||||
@media (min-width: 512px) {
|
||||
.ce-crop {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 7.5em;
|
||||
height: 7.5em;
|
||||
}
|
||||
article {
|
||||
width: 128px;
|
||||
width: 10em;
|
||||
}
|
||||
.mlbalign {
|
||||
width: 85px;
|
||||
width: 7.5em;
|
||||
}
|
||||
|
||||
.mlb {
|
||||
width: 85px;
|
||||
width: 7rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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'} width={100} height={100} quality={100}/>
|
||||
<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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -34,9 +34,7 @@ const loadedImage = plsLoadImage(images, imagePath)
|
|||
<style>
|
||||
.heading {
|
||||
display: flex;
|
||||
height: fit-content;
|
||||
min-height: 2.5rem;
|
||||
line-height: 1.75rem;
|
||||
height: 4rem;
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
max-width: 200px;
|
||||
|
|
@ -53,25 +51,24 @@ const loadedImage = plsLoadImage(images, imagePath)
|
|||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
background-color: var(--c-darkergray);
|
||||
padding: 0em 0.25em;
|
||||
width: max(40%, 128px);
|
||||
border-color: var(--c-darkgray);
|
||||
padding: 0em 0.75em;
|
||||
width: 40%;
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
transition: transform var(--speed) var(--ease);
|
||||
text-decoration: none;
|
||||
border: 2px var(--c-darkgray) solid;
|
||||
|
||||
&:hover {
|
||||
border: 2px var(--c-darkpurple) solid;
|
||||
transform: scale(var(--hover-scale));
|
||||
}
|
||||
|
||||
img {
|
||||
width: min(90%, 100px);
|
||||
margin: 0px 0.5rem;
|
||||
padding: 0px 0.25em;
|
||||
width: 90%;
|
||||
height: auto;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -81,7 +78,8 @@ const loadedImage = plsLoadImage(images, imagePath)
|
|||
width: auto;
|
||||
height: auto;
|
||||
img {
|
||||
width: 160px;
|
||||
padding: 0px 1.5em;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -90,7 +88,7 @@ const loadedImage = plsLoadImage(images, imagePath)
|
|||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 0.5rem;
|
||||
margin: 5;
|
||||
line-height: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,70 +1,27 @@
|
|||
---
|
||||
import '@fontsource/work-sans/500.css'
|
||||
|
||||
export interface Props {
|
||||
fadeout?: boolean
|
||||
}
|
||||
const { fadeout } = Astro.props
|
||||
const display = fadeout ? "": "display: none"
|
||||
---
|
||||
|
||||
<div>
|
||||
<span>
|
||||
I am currently creating a site to catalogue past and future TAs for the whole community.
|
||||
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>
|
||||
<a href=`https://fgo-ta.com/`><span class="fancy">Visit fgo-ta.com >></span></a>
|
||||
<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;
|
||||
font-weight: 400;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
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-duskgray);
|
||||
border-radius: 10px;
|
||||
border: 2px var(--c-darkpurple) solid;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
border-color: var(--c-purplepink);
|
||||
}
|
||||
|
||||
.fade {
|
||||
margin-top: 3rem;
|
||||
background: linear-gradient(to bottom, transparent, var(--c-lightgray));
|
||||
height: 2.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fancy {
|
||||
color: var(--c-darkpurple);
|
||||
}
|
||||
|
||||
@supports (background-clip: text) {
|
||||
a:hover .fancy {
|
||||
background: linear-gradient(125deg, var(--c-darkpurple), var(--c-purplepink), var(--c-reddish) );
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
@ -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 {
|
||||
|
|
@ -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
|
||||
|
|
@ -30,7 +30,7 @@ if (bond10 === false) {
|
|||
---
|
||||
|
||||
<article>
|
||||
<Image src={loadedServantImage} width={128} height={128} alt={name} quality={100} />
|
||||
<Image src={loadedServantImage} alt={name} />
|
||||
<h2 class="subtext">
|
||||
Level {level}<br />
|
||||
{skills}<br />
|
||||
|
|
@ -64,8 +64,7 @@ if (bond10 === false) {
|
|||
}
|
||||
|
||||
article:hover {
|
||||
transform: scale(1);
|
||||
border-color: var(--c-darkpurple);
|
||||
transform: scale(var(--hover-scale));
|
||||
}
|
||||
|
||||
article {
|
||||
|
|
@ -73,19 +72,20 @@ if (bond10 === false) {
|
|||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
background-color: var(--c-darkergray);
|
||||
border: 2px var(--c-darkgray) solid;
|
||||
padding: 10px;
|
||||
width: max(30%, 100px);
|
||||
border-color: var(--c-darkgray);
|
||||
padding: 0em 0.75em 0.5rem 0.75em;
|
||||
width: 40%;
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
transition: transform var(--speed) var(--ease);
|
||||
border-radius: 1.25rem;
|
||||
}
|
||||
|
||||
article > img {
|
||||
width: 90%;
|
||||
height: auto;
|
||||
width: 7.5rem;
|
||||
height: 7.5rem;
|
||||
border-radius: 2.5rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
|
@ -98,25 +98,25 @@ if (bond10 === false) {
|
|||
}
|
||||
|
||||
.expand-on-hover {
|
||||
background-color: var(--c-darkergray);
|
||||
border: 2px var(--c-darkpurple) solid;
|
||||
border-top: 0px;
|
||||
background-color: var(--c-duskgray);
|
||||
z-index: 99;
|
||||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
position: absolute;
|
||||
top: 92.5%;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
border-radius: 0px 0px 1.25rem 1.25rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
article:hover .expand-on-hover {
|
||||
transform: scaleY(1);
|
||||
transition: transform 200ms ease-in-out;
|
||||
background-color: var(--c-duskgray);
|
||||
}
|
||||
|
||||
.bond-ce {
|
||||
padding-top: 0.25rem;
|
||||
padding-top: 0.75rem;
|
||||
width: auto;
|
||||
height: 3rem;
|
||||
}
|
||||
|
|
@ -133,12 +133,16 @@ if (bond10 === false) {
|
|||
}
|
||||
|
||||
article > img {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.bond-ce {
|
||||
height: 3rem;
|
||||
height: 3.5rem;
|
||||
}
|
||||
|
||||
.expand-on-hover {
|
||||
top: 95%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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
|
||||
|
|
@ -80,9 +80,10 @@ if (user !== undefined) {
|
|||
|
||||
article {
|
||||
background-color: var(--c-darkergray);
|
||||
border: 2px var(--c-darkgray) solid;
|
||||
border-color: var(--c-darkgray);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
transition: transform var(--speed) var(--ease);
|
||||
height: auto;
|
||||
width: auto;
|
||||
max-width: 8rem;
|
||||
|
|
@ -96,8 +97,7 @@ if (user !== undefined) {
|
|||
}
|
||||
|
||||
article:hover {
|
||||
transform: scale(1);
|
||||
border-color: var(--c-darkpurple);
|
||||
transform: scale(var(--hover-scale));
|
||||
}
|
||||
|
||||
article > .icon {
|
||||
|
|
@ -114,12 +114,11 @@ if (user !== undefined) {
|
|||
justify-content: center;
|
||||
text-align: center;
|
||||
background-color: var(--c-darkgray);
|
||||
height: var(--size-value);
|
||||
width: var(--size-value);
|
||||
padding: 1px;
|
||||
height: calc(var(--size-value) + 0.1rem);
|
||||
width: calc(var(--size-value) + 0.1rem);
|
||||
opacity: 90%;
|
||||
border-radius: 1.25rem;
|
||||
top: calc(0.5rem + 9px);
|
||||
top: 1.1em;
|
||||
}
|
||||
|
||||
article:hover .title h2 {
|
||||
|
|
@ -166,24 +165,24 @@ if (user !== undefined) {
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: top;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
background-color: var(--c-darkergray);
|
||||
border: 2px var(--c-darkpurple) solid;
|
||||
border-top: 0px;
|
||||
background-color: var(--c-duskgray);
|
||||
z-index: 99;
|
||||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
position: absolute;
|
||||
top: 90%;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
color: white;
|
||||
border-radius: 0px 0px 1.25rem 1.25rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.expand-on-hover img {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
|
@ -195,6 +194,6 @@ if (user !== undefined) {
|
|||
article:hover .expand-on-hover {
|
||||
transform: scaleY(1);
|
||||
transition: transform 200ms ease-in-out;
|
||||
background-color: var(--c-darkergray);
|
||||
background-color: var(--c-duskgray);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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
|
||||
|
|
@ -10,6 +10,7 @@ export interface Props {
|
|||
}
|
||||
|
||||
const { imageFile, link, title } = Astro.props
|
||||
const logoAltText = `${title} Logo`
|
||||
const imagePath = `/src/assets/technologies/${imageFile}`
|
||||
const images_logos = import.meta.glob<GlobImage>(
|
||||
'/src/assets/technologies/*.{png,webp}'
|
||||
|
|
@ -19,12 +20,12 @@ const loadedImage = plsLoadImage(images_logos, imagePath)
|
|||
|
||||
<a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
|
||||
<article>
|
||||
<Image src={loadedImage} alt={title} loading={'eager'} width={100} height={100} quality={100}/>
|
||||
<Image src={loadedImage} alt={logoAltText} />
|
||||
<div>
|
||||
<h2>{title}</h2>
|
||||
</div>
|
||||
</article>
|
||||
<span class="visually-hidden">{title}</span>
|
||||
<span class="visually-hidden">{logoAltText}</span>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
|
|
@ -69,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 {
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
---
|
||||
import '@fontsource/work-sans/700.css'
|
||||
import '@fontsource/work-sans/500.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}><< Back to {baseurl}</a>
|
||||
<div class="fade" style={displayFadeout}></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
a {
|
||||
font-weight: 500;
|
||||
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: 700;
|
||||
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.sub {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
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: 1.2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
---
|
||||
import '@fontsource/work-sans/700.css'
|
||||
import '@fontsource/work-sans/500.css'
|
||||
---
|
||||
|
||||
<div class="wrap">
|
||||
<div class="head">Hi, I'm <span class="fancy">Firq</span></div>
|
||||
<div class="sub"></ Software dev / Scathach enthusiast / Germany /></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: 700;
|
||||
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.sub {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
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: 3rem;
|
||||
}
|
||||
.sub {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.head {
|
||||
font-size: 4rem;
|
||||
}
|
||||
.sub {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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
1
src/env.d.ts
vendored
|
|
@ -1,2 +1 @@
|
|||
/// <reference path="../.astro/types.d.ts" />
|
||||
/// <reference types="astro/client" />
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
@ -10,10 +10,6 @@ import ta_collection from 'iconoir/icons/database.svg'
|
|||
import blog from 'iconoir/icons/bookmark-book.svg'
|
||||
import about from 'iconoir/icons/mail.svg'
|
||||
|
||||
import workSans500 from '@fontsource/work-sans/files/work-sans-latin-500-normal.woff2?url';
|
||||
import workSans600 from '@fontsource/work-sans/files/work-sans-latin-600-normal.woff2?url';
|
||||
import workSans700 from '@fontsource/work-sans/files/work-sans-latin-700-normal.woff2?url';
|
||||
|
||||
export interface Props {
|
||||
title: string
|
||||
currentpage: string
|
||||
|
|
@ -72,12 +68,7 @@ const mapped_navdata = navdata.map((item) => ({
|
|||
name="google-site-verification"
|
||||
content="SmcWcewh7DCANcLeTe3ntU0R-LESbo_bsolICJnmulE"
|
||||
/>
|
||||
<!-- Disable DarkReader, as site is already in dark mode -->
|
||||
<meta name="darkreader-lock" content="this site only has darkmode">
|
||||
<!-- Links -->
|
||||
<link rel="preload" as="font" type="font/woff2" href={workSans500} crossorigin="anonymous" />
|
||||
<link rel="preload" as="font" type="font/woff2" href={workSans600} crossorigin="anonymous" />
|
||||
<link rel="preload" as="font" type="font/woff2" href={workSans700} crossorigin="anonymous" />
|
||||
<link rel="icon" type="image/ico" href="/favicon.ico" />
|
||||
<link rel="sitemap" href="/sitemap-index.xml" />
|
||||
<link href="https://mastodon.neshweb.net/@Firq" rel="me" />
|
||||
|
|
@ -86,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>
|
||||
|
|
@ -117,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);
|
||||
|
|
@ -138,5 +117,5 @@ const mapped_navdata = navdata.map((item) => ({
|
|||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,59 +6,69 @@ export interface Props {
|
|||
const { title } = Astro.props
|
||||
---
|
||||
|
||||
<div class="base">
|
||||
<section class="base">
|
||||
<h1>{title}</h1>
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.base {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.base div {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: row wrap;
|
||||
row-gap: 1em;
|
||||
column-gap: 1em;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.base h1 {
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
line-height: 48px;
|
||||
letter-spacing: -1px;
|
||||
color: white;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0px;
|
||||
font-size: 2.25rem;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 0.25rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
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;
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.base div {
|
||||
.base {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 400px) {
|
||||
.base {
|
||||
margin-left: 3rem;
|
||||
margin-right: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1500px) {
|
||||
.base div {
|
||||
.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>
|
||||
|
|
@ -52,6 +52,11 @@ const { title } = Astro.props
|
|||
}
|
||||
}
|
||||
|
||||
.base {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.base {
|
||||
margin-left: 3rem;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 :/"
|
|||
<< 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>
|
||||
|
|
|
|||
|
|
@ -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
35
src/pages/blog.astro
Normal 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>
|
||||
|
|
@ -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 />
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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.
|
||||
|
||||
|
|
@ -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,8 +14,8 @@ const description =
|
|||
currentpage="home"
|
||||
descriptionOverride={description}
|
||||
>
|
||||
<Hi />
|
||||
<BaseSection title="Favourite Things">
|
||||
<Hero />
|
||||
<BaseSection title="Favourites">
|
||||
{favouritesdata.map((item) => <FavouriteCard {...item} />)}
|
||||
</BaseSection>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import ServantSection from '../layouts/servantSection.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,14 +17,13 @@ const description =
|
|||
currentpage="servants"
|
||||
descriptionOverride={description}
|
||||
>
|
||||
<SmallTitle maintext='TA Offering' subtext='Servants and CEs I can offer for your TAs' fadeout={true}/>
|
||||
<ServantSection title="Servants">
|
||||
<BaseSection title="Servants">
|
||||
{servantdata.map((item) => <ServantCard {...item} />)}
|
||||
</ServantSection>
|
||||
</BaseSection>
|
||||
<div class="placeholder"></div>
|
||||
<ServantSection title="CEs">
|
||||
<BaseSection title="CEs">
|
||||
{cedata.map((item) => <CeCard {...item} />)}
|
||||
</ServantSection>
|
||||
</BaseSection>
|
||||
<div class="placeholder"></div>
|
||||
</Layout>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
{
|
||||
"name": "Vessel of the Saint",
|
||||
"imageFile": "vessel.png",
|
||||
"mlb": true
|
||||
"mlb": false
|
||||
},
|
||||
{
|
||||
"name": "Devilish Bodhisattva",
|
||||
|
|
|
|||
|
|
@ -10,11 +10,5 @@
|
|||
"origin": "Fate/Grand Order",
|
||||
"imageFile": "skadi.png",
|
||||
"link": "https://twitter.com/firq_ow/status/1544321985995489280"
|
||||
},
|
||||
{
|
||||
"name": "Summer Skadi",
|
||||
"origin": "Fate/Grand Order",
|
||||
"imageFile": "summerskadi.png",
|
||||
"link": "https://twitter.com/firq_ow/status/1816355501216596073"
|
||||
}
|
||||
]
|
||||
|
|
@ -9,16 +9,6 @@
|
|||
"bondceImageFile": "scathach.png",
|
||||
"bond10": true
|
||||
},
|
||||
{
|
||||
"name": "Summer Skadi",
|
||||
"level": "120",
|
||||
"np": "5",
|
||||
"skills": "10 / 10 / 10",
|
||||
"ml": "10",
|
||||
"servantImageFile": "summerskadi_03.png",
|
||||
"bondceImageFile": "summerskadi.png",
|
||||
"bond10": true
|
||||
},
|
||||
{
|
||||
"name": "Skadi",
|
||||
"level": "120",
|
||||
|
|
@ -29,16 +19,6 @@
|
|||
"bondceImageFile": "skadi.png",
|
||||
"bond10": true
|
||||
},
|
||||
{
|
||||
"name": "Summer Skadi",
|
||||
"level": "70",
|
||||
"np": "1",
|
||||
"skills": "10 / 10 / 10",
|
||||
"ml": "1",
|
||||
"servantImageFile": "summerskadi_02.png",
|
||||
"bondceImageFile": "summerskadi.png",
|
||||
"bond10": true
|
||||
},
|
||||
{
|
||||
"name": "Skadi",
|
||||
"level": "70",
|
||||
|
|
@ -69,16 +49,6 @@
|
|||
"bondceImageFile": "koyanlight.png",
|
||||
"bond10": true
|
||||
},
|
||||
{
|
||||
"name": "Koyanskaya of Light",
|
||||
"level": "70",
|
||||
"np": "1",
|
||||
"skills": "10 / 10 / 10",
|
||||
"ml": "Not Unlocked",
|
||||
"servantImageFile": "koyanlight_02.png",
|
||||
"bondceImageFile": "koyanlight.png",
|
||||
"bond10": true
|
||||
},
|
||||
{
|
||||
"name": "Castoria",
|
||||
"level": "90",
|
||||
|
|
@ -187,7 +157,7 @@
|
|||
"ml": "10",
|
||||
"servantImageFile": "douman_01.png",
|
||||
"bondceImageFile": "douman.png",
|
||||
"bond10": true
|
||||
"bond10": false
|
||||
},
|
||||
{
|
||||
"name": "Himiko",
|
||||
|
|
@ -220,7 +190,7 @@
|
|||
"bond10": false
|
||||
},
|
||||
{
|
||||
"name": "Taigong Wang",
|
||||
"name": "Taigon Wang",
|
||||
"level": "70",
|
||||
"np": "1",
|
||||
"skills": "10 / 9 / 10",
|
||||
|
|
@ -255,16 +225,6 @@
|
|||
"np": "1",
|
||||
"skills": "9 / 9 / X",
|
||||
"ml": "Not Unlocked",
|
||||
"servantImageFile": "liz_02.png",
|
||||
"bondceImageFile": "liz.png",
|
||||
"bond10": false
|
||||
},
|
||||
{
|
||||
"name": "Elisabeth Báthory",
|
||||
"level": "1",
|
||||
"np": "1",
|
||||
"skills": "9 / X / X",
|
||||
"ml": "Not Unlocked",
|
||||
"servantImageFile": "liz_01.png",
|
||||
"bondceImageFile": "liz.png",
|
||||
"bond10": false
|
||||
|
|
|
|||
|
|
@ -1,22 +1,10 @@
|
|||
export default {
|
||||
puppeteerOptions: {
|
||||
args: [
|
||||
"--no-sandbox",
|
||||
"--disable-setuid-sandbox"
|
||||
],
|
||||
},
|
||||
puppeteerClusterOptions: {
|
||||
maxConcurrency: 1
|
||||
args: ["--no-sandbox", "--disable-setuid-sandbox"],
|
||||
},
|
||||
ci: {
|
||||
budget: 50,
|
||||
buildStatic: true,
|
||||
},
|
||||
scanner: {
|
||||
device: 'mobile',
|
||||
sitemap: true,
|
||||
throttle: false,
|
||||
dynamicSampling: false,
|
||||
buildStatic: true
|
||||
},
|
||||
outputPath: "unlighthouse-reports",
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue