mirror of
https://github.com/JuLi0n21/homepage.git
synced 2026-06-05 01:46:29 +00:00
init
This commit is contained in:
+24
@@ -0,0 +1,24 @@
|
|||||||
|
# build output
|
||||||
|
dist/
|
||||||
|
# generated types
|
||||||
|
.astro/
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# logs
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
|
||||||
|
# environment variables
|
||||||
|
.env
|
||||||
|
.env.production
|
||||||
|
|
||||||
|
# macOS-specific files
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# jetbrains setting folder
|
||||||
|
.idea/
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
# New Homepage
|
||||||
|
The general idea is showing off all the software(websites) that have been create in the past (only worth showing (skip ai slop)
|
||||||
|
- Idea is to configure a base with astro and just use the Markdown files to manage the frontend
|
||||||
|
- to host each service probably expand / create a demo-deploy repo? either crate managed docker containers? or kubernetes?...( overkill but its fine )
|
||||||
|
|
||||||
|
# Freetime - Active Dev
|
||||||
|
- [Horsa](https://horsa-dev.illegalesachen.download) -- issues: authwall
|
||||||
|
- [Fileclap](https://fileclap.com) -- issuse: authwall
|
||||||
|
- [Argocd](https://argocd.illegalesachen.download/) -- just for me should not be public?
|
||||||
|
- [Metrics](https://metrics.illegalesachen.download/) -- just for me should not be public?
|
||||||
|
- [Repository](https://docker-ui.illegalesachen.download/) -- just for me should not be public?
|
||||||
|
|
||||||
|
# Freetime - Dead (maybe needs some minor/ major touchups to be presentable)
|
||||||
|
- pwa-player-(https://music.illegalesachen.download) -- issuse: authwall and active setup required
|
||||||
|
- osuProgress-online -(https://progress.illegalesachen.download) -- issuse: authwall
|
||||||
|
- osu!Progress-local -(http:localhost:4200) -- issuse: authwall local only requires stable?
|
||||||
|
|
||||||
|
# University - Group Projects
|
||||||
|
- eai
|
||||||
|
- projekt-1
|
||||||
|
- eai-xmpp
|
||||||
|
- eai-presentation-oriented-integration
|
||||||
|
- Pic-Share
|
||||||
|
- ISE-Tweeter
|
||||||
|
- GC-project?
|
||||||
|
- Messenger App?
|
||||||
|
|
||||||
|
# University - Single Dev (idk if i havent just deleted them :shrug:)
|
||||||
|
- Ina2?
|
||||||
|
- MandelBrot?
|
||||||
|
- SplineInterpolation?
|
||||||
|
|
||||||
|
# What about no website Services?
|
||||||
|
- thumbnailservice, go-osu-parser?, general other offline or cli only apps?
|
||||||
|
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
# Astro Starter Kit: Blog
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm create astro@latest -- --template blog
|
||||||
|
```
|
||||||
|
|
||||||
|
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||||
|
|
||||||
|
Features:
|
||||||
|
|
||||||
|
- ✅ Minimal styling (make it your own!)
|
||||||
|
- ✅ 100/100 Lighthouse performance
|
||||||
|
- ✅ SEO-friendly with canonical URLs and OpenGraph data
|
||||||
|
- ✅ Sitemap support
|
||||||
|
- ✅ RSS Feed support
|
||||||
|
- ✅ Markdown & MDX support
|
||||||
|
|
||||||
|
## 🚀 Project Structure
|
||||||
|
|
||||||
|
Inside of your Astro project, you'll see the following folders and files:
|
||||||
|
|
||||||
|
```text
|
||||||
|
├── public/
|
||||||
|
├── src/
|
||||||
|
│ ├── components/
|
||||||
|
│ ├── content/
|
||||||
|
│ ├── layouts/
|
||||||
|
│ └── pages/
|
||||||
|
├── astro.config.mjs
|
||||||
|
├── README.md
|
||||||
|
├── package.json
|
||||||
|
└── tsconfig.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.
|
||||||
|
|
||||||
|
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||||
|
|
||||||
|
The `src/content/` directory contains "collections" of related Markdown and MDX documents. Use `getCollection()` to retrieve posts from `src/content/blog/`, and type-check your frontmatter using an optional schema. See [Astro's Content Collections docs](https://docs.astro.build/en/guides/content-collections/) to learn more.
|
||||||
|
|
||||||
|
Any static assets, like images, can be placed in the `public/` directory.
|
||||||
|
|
||||||
|
## 🧞 Commands
|
||||||
|
|
||||||
|
All commands are run from the root of the project, from a terminal:
|
||||||
|
|
||||||
|
| Command | Action |
|
||||||
|
| :------------------------ | :----------------------------------------------- |
|
||||||
|
| `npm install` | Installs dependencies |
|
||||||
|
| `npm run dev` | Starts local dev server at `localhost:4321` |
|
||||||
|
| `npm run build` | Build your production site to `./dist/` |
|
||||||
|
| `npm run preview` | Preview your build locally, before deploying |
|
||||||
|
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||||
|
| `npm run astro -- --help` | Get help using the Astro CLI |
|
||||||
|
|
||||||
|
## 👀 Want to learn more?
|
||||||
|
|
||||||
|
Check out [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||||
|
|
||||||
|
## Credit
|
||||||
|
|
||||||
|
This theme is based off of the lovely [Bear Blog](https://github.com/HermanMartinus/bearblog/).
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
// @ts-check
|
||||||
|
|
||||||
|
import mdx from '@astrojs/mdx';
|
||||||
|
import sitemap from '@astrojs/sitemap';
|
||||||
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
||||||
|
// https://astro.build/config
|
||||||
|
export default defineConfig({
|
||||||
|
site: 'https://example.com',
|
||||||
|
integrations: [mdx(), sitemap()],
|
||||||
|
});
|
||||||
Generated
+27
@@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
"nodes": {
|
||||||
|
"nixpkgs": {
|
||||||
|
"locked": {
|
||||||
|
"lastModified": 1771848320,
|
||||||
|
"narHash": "sha256-0MAd+0mun3K/Ns8JATeHT1sX28faLII5hVLq0L3BdZU=",
|
||||||
|
"owner": "NixOS",
|
||||||
|
"repo": "nixpkgs",
|
||||||
|
"rev": "2fc6539b481e1d2569f25f8799236694180c0993",
|
||||||
|
"type": "github"
|
||||||
|
},
|
||||||
|
"original": {
|
||||||
|
"owner": "NixOS",
|
||||||
|
"ref": "nixos-unstable",
|
||||||
|
"repo": "nixpkgs",
|
||||||
|
"type": "github"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"root": {
|
||||||
|
"inputs": {
|
||||||
|
"nixpkgs": "nixpkgs"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"root": "root",
|
||||||
|
"version": 7
|
||||||
|
}
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
description = "Dev environment for Horsa";
|
||||||
|
|
||||||
|
inputs = {
|
||||||
|
nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
|
||||||
|
};
|
||||||
|
|
||||||
|
outputs = { self, nixpkgs, ... }:
|
||||||
|
let
|
||||||
|
pkgs = import nixpkgs { system = "x86_64-linux"; };
|
||||||
|
in
|
||||||
|
{
|
||||||
|
devShells.x86_64-linux.default = pkgs.mkShell {
|
||||||
|
packages = with pkgs; [
|
||||||
|
nodejs_25
|
||||||
|
nodePackages.npm
|
||||||
|
];
|
||||||
|
|
||||||
|
env = {
|
||||||
|
};
|
||||||
|
|
||||||
|
shellHook = ''
|
||||||
|
'';
|
||||||
|
};
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
Generated
+6321
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"name": "astro",
|
||||||
|
"type": "module",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "astro dev",
|
||||||
|
"build": "astro build",
|
||||||
|
"preview": "astro preview",
|
||||||
|
"astro": "astro"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@astrojs/mdx": "^4.3.13",
|
||||||
|
"@astrojs/rss": "^4.0.15",
|
||||||
|
"@astrojs/sitemap": "^3.7.0",
|
||||||
|
"astro": "^5.17.1",
|
||||||
|
"sharp": "^0.34.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 655 B |
@@ -0,0 +1,9 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||||
|
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||||
|
<style>
|
||||||
|
path { fill: #000; }
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
path { fill: #FFF; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 749 B |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 317 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 261 KiB |
@@ -0,0 +1,55 @@
|
|||||||
|
---
|
||||||
|
// Import the global.css file here so that it is included on
|
||||||
|
// all pages through the use of the <BaseHead /> component.
|
||||||
|
import '../styles/global.css';
|
||||||
|
import type { ImageMetadata } from 'astro';
|
||||||
|
import { SITE_TITLE } from '../consts';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
image?: ImageMetadata;
|
||||||
|
}
|
||||||
|
|
||||||
|
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||||
|
|
||||||
|
const { title, description } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- Global Metadata -->
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<link rel="sitemap" href="/sitemap-index.xml" />
|
||||||
|
<link
|
||||||
|
rel="alternate"
|
||||||
|
type="application/rss+xml"
|
||||||
|
title={SITE_TITLE}
|
||||||
|
href={new URL('rss.xml', Astro.site)}
|
||||||
|
/>
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
|
||||||
|
<!-- Font preloads -->
|
||||||
|
<link rel="preload" href="/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin />
|
||||||
|
<link rel="preload" href="/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin />
|
||||||
|
|
||||||
|
<!-- Canonical URL -->
|
||||||
|
<link rel="canonical" href={canonicalURL} />
|
||||||
|
|
||||||
|
<!-- Primary Meta Tags -->
|
||||||
|
<title>{title}</title>
|
||||||
|
<meta name="title" content={title} />
|
||||||
|
<meta name="description" content={description} />
|
||||||
|
|
||||||
|
<!-- Open Graph / Facebook -->
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:url" content={Astro.url} />
|
||||||
|
<meta property="og:title" content={title} />
|
||||||
|
<meta property="og:description" content={description} />
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta property="twitter:card" content="summary_large_image" />
|
||||||
|
<meta property="twitter:url" content={Astro.url} />
|
||||||
|
<meta property="twitter:title" content={title} />
|
||||||
|
<meta property="twitter:description" content={description} />
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
---
|
||||||
|
const today = new Date();
|
||||||
|
---
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
This is my Foot
|
||||||
|
</footer>
|
||||||
|
<style>
|
||||||
|
footer {
|
||||||
|
padding: 2em 1em 6em 1em;
|
||||||
|
background: linear-gradient(var(--gray-gradient)) no-repeat;
|
||||||
|
color: rgb(var(--gray));
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
---
|
||||||
|
interface Props {
|
||||||
|
date: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { date } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<time datetime={date.toISOString()}>
|
||||||
|
{
|
||||||
|
date.toLocaleDateString('en-us', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</time>
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
---
|
||||||
|
import { SITE_TITLE } from '../consts';
|
||||||
|
import HeaderLink from './HeaderLink.astro';
|
||||||
|
import { getCollection } from 'astro:content';
|
||||||
|
|
||||||
|
const posts = (await getCollection('blog')).sort(
|
||||||
|
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
|
||||||
|
);
|
||||||
|
---
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<h2><a href="/">{SITE_TITLE}</a></h2>
|
||||||
|
<ul>
|
||||||
|
{
|
||||||
|
posts.map((post) => (
|
||||||
|
<li>
|
||||||
|
<HeaderLink href={`/blog/${post.id}/`}>{post.data.title}</HeaderLink>
|
||||||
|
</li>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<style>
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 1em;
|
||||||
|
width: 8vw;
|
||||||
|
}
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: start;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
---
|
||||||
|
import type { HTMLAttributes } from 'astro/types';
|
||||||
|
|
||||||
|
type Props = HTMLAttributes<'a'>;
|
||||||
|
|
||||||
|
const { href, class: className, ...props } = Astro.props;
|
||||||
|
const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, '');
|
||||||
|
const subpath = pathname.match(/[^\/]+/g);
|
||||||
|
const isActive = href === pathname || href === '/' + (subpath?.[0] || '');
|
||||||
|
---
|
||||||
|
|
||||||
|
<a href={href} class:list={[className, { active: isActive }]} {...props}>
|
||||||
|
<slot />
|
||||||
|
</a>
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
// Place any global data in this file.
|
||||||
|
// You can import this data from anywhere in your site by using the `import` keyword.
|
||||||
|
|
||||||
|
export const SITE_TITLE = 'Projects';
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
import { defineCollection, z } from 'astro:content';
|
||||||
|
import { glob } from 'astro/loaders';
|
||||||
|
|
||||||
|
const blog = defineCollection({
|
||||||
|
// Load Markdown and MDX files in the `src/content/blog/` directory.
|
||||||
|
loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
|
||||||
|
// Type-check frontmatter using a schema
|
||||||
|
schema: ({ image }) =>
|
||||||
|
z.object({
|
||||||
|
title: z.string(),
|
||||||
|
description: z.string(),
|
||||||
|
// Transform string to Date object
|
||||||
|
pubDate: z.coerce.date(),
|
||||||
|
updatedDate: z.coerce.date().optional(),
|
||||||
|
heroImage: image().optional(),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const collections = { blog };
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
---
|
||||||
|
title: 'FileClap'
|
||||||
|
description: 'Doormat'
|
||||||
|
pubDate: 'Jul 08 2022'
|
||||||
|
---
|
||||||
|
<style is:global>
|
||||||
|
/* either do it this way or uh yeah */
|
||||||
|
h1 { color: #ffdf20 }
|
||||||
|
body {background: #030712 }
|
||||||
|
.wrapper {background: #101828 }
|
||||||
|
p { color: #cacbcd}
|
||||||
|
a { color: #cacbcd }
|
||||||
|
img { border: 10px solid;
|
||||||
|
border-color: #ffdf20; }
|
||||||
|
</style>
|
||||||
|
# FileClap: Clear the paperwork off the table
|
||||||
|
Your digital assistant for students and trainees
|
||||||
|
|
||||||
|
No more paper chaos! FileClap helps you easily organize photos, receipts, and important documents. Securely stored and accessible from anywhere—for a stress-free daily life with more clarity!
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Uses Vector embeddings to aid in context aware searching
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a href="fileclap.com/home"><h1>check it out!</h1></a>
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
---
|
||||||
|
title: 'Horsa'
|
||||||
|
description: 'Lorem ipsum dolor sit amet'
|
||||||
|
pubDate: 'Jul 08 2022'
|
||||||
|
---
|
||||||
|
<style is:global>
|
||||||
|
h1 { color: #bb4d00 }
|
||||||
|
h2 { color: #bb4d00 }
|
||||||
|
h3 { color: #bb4d00 }
|
||||||
|
h4 { color: #bb4d00 }
|
||||||
|
body {background: #27272a }
|
||||||
|
.wrapper {background: #18181b }
|
||||||
|
p { color: #e2e2e2}
|
||||||
|
a { color: #e2e2e2 }
|
||||||
|
img { border: 10px solid;
|
||||||
|
border-color: #bb4d00; }
|
||||||
|
</style>
|
||||||
|
# Horsa Haas HorseShoe as a Service
|
||||||
|
|
||||||
|
Horsa is an Mobile First all in One Solution for ur BlackSmithing Shop
|
||||||
|
|
||||||
|
## Features
|
||||||
|
- Invoice Management
|
||||||
|
- Appointment Planning
|
||||||
|
- Automatic VRT planning
|
||||||
|
- Customer Management
|
||||||
|
- Inventory Management
|
||||||
|
- WorkUnit preperation
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
---
|
||||||
|
title: 'pwa-player'
|
||||||
|
description: 'Lorem ipsum dolor sit amet'
|
||||||
|
pubDate: 'Jul 08 2022'
|
||||||
|
---
|
||||||
|
<style is:global>
|
||||||
|
h1 { color: #eab308 }
|
||||||
|
h2 { color: #eab308 }
|
||||||
|
h3 { color: #eab308 }
|
||||||
|
h4 { color: #eab308 }
|
||||||
|
body {background: #1c1719 }
|
||||||
|
.wrapper {background: #1c1719 }
|
||||||
|
p { color: #ec4889}
|
||||||
|
a { color: #ec4889 }
|
||||||
|
img { border: 10px solid;
|
||||||
|
border-color: #ec4889; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
# Osu!Music (Pwa Player)
|
||||||
|
Pwa player is a Website that allows u to play and share ur local osu music with ur friends and listen to it on the go
|
||||||
|
|
||||||
|
The Focus is on easy setup, customization and most emportantly Enjoying the music
|
||||||
|
|
||||||
|
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
---
|
||||||
|
import { Image } from 'astro:assets';
|
||||||
|
import type { CollectionEntry } from 'astro:content';
|
||||||
|
import BaseHead from '../components/BaseHead.astro';
|
||||||
|
import Footer from '../components/Footer.astro';
|
||||||
|
import FormattedDate from '../components/FormattedDate.astro';
|
||||||
|
import Header from '../components/Header.astro';
|
||||||
|
|
||||||
|
type Props = CollectionEntry<'blog'>['data'];
|
||||||
|
|
||||||
|
const { title, description, pubDate, updatedDate } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<BaseHead title={title} description={description} />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<Header />
|
||||||
|
<div class="wrapper">
|
||||||
|
<slot />
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
display:flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
main { display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: start;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
min-width: 0;
|
||||||
|
width: 0;
|
||||||
|
padding: 1cm;
|
||||||
|
margin: 1cm;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
---
|
||||||
|
import { type CollectionEntry, getCollection, render } from 'astro:content';
|
||||||
|
import BlogPost from '../../layouts/BlogPost.astro';
|
||||||
|
|
||||||
|
export async function getStaticPaths() {
|
||||||
|
const posts = await getCollection('blog');
|
||||||
|
return posts.map((post) => ({
|
||||||
|
params: { slug: post.id },
|
||||||
|
props: post,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
type Props = CollectionEntry<'blog'>;
|
||||||
|
|
||||||
|
const post = Astro.props;
|
||||||
|
const { Content } = await render(post);
|
||||||
|
---
|
||||||
|
|
||||||
|
<BlogPost {...post.data}>
|
||||||
|
<Content />
|
||||||
|
</BlogPost>
|
||||||
@@ -0,0 +1,114 @@
|
|||||||
|
---
|
||||||
|
import { Image } from 'astro:assets';
|
||||||
|
import { getCollection } from 'astro:content';
|
||||||
|
import BaseHead from '../../components/BaseHead.astro';
|
||||||
|
import Footer from '../../components/Footer.astro';
|
||||||
|
import FormattedDate from '../../components/FormattedDate.astro';
|
||||||
|
import Header from '../../components/Header.astro';
|
||||||
|
import { SITE_DESCRIPTION, SITE_TITLE } from '../../consts';
|
||||||
|
|
||||||
|
const posts = (await getCollection('blog')).sort(
|
||||||
|
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
|
||||||
|
);
|
||||||
|
---
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||||
|
<style>
|
||||||
|
main {
|
||||||
|
width: 960px;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 2rem;
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
ul li {
|
||||||
|
width: calc(50% - 1rem);
|
||||||
|
}
|
||||||
|
ul li * {
|
||||||
|
text-decoration: none;
|
||||||
|
transition: 0.2s ease;
|
||||||
|
}
|
||||||
|
ul li:first-child {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
ul li:first-child img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
ul li:first-child .title {
|
||||||
|
font-size: 2.369rem;
|
||||||
|
}
|
||||||
|
ul li img {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
ul li a {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
margin: 0;
|
||||||
|
color: rgb(var(--black));
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.date {
|
||||||
|
margin: 0;
|
||||||
|
color: rgb(var(--gray));
|
||||||
|
}
|
||||||
|
ul li a:hover h4,
|
||||||
|
ul li a:hover .date {
|
||||||
|
color: rgb(var(--accent));
|
||||||
|
}
|
||||||
|
ul a:hover img {
|
||||||
|
box-shadow: var(--box-shadow);
|
||||||
|
}
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
ul {
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
ul li {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
ul li:first-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
ul li:first-child .title {
|
||||||
|
font-size: 1.563em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<Header />
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<ul>
|
||||||
|
{
|
||||||
|
posts.map((post) => (
|
||||||
|
<li>
|
||||||
|
<a href={`/blog/${post.id}/`}>
|
||||||
|
{post.data.heroImage && (
|
||||||
|
<Image width={720} height={360} src={post.data.heroImage} alt="" />
|
||||||
|
)}
|
||||||
|
<h4 class="title">{post.data.title}</h4>
|
||||||
|
<p class="date">
|
||||||
|
<FormattedDate date={post.data.pubDate} />
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
---
|
||||||
|
import BaseHead from '../components/BaseHead.astro';
|
||||||
|
import Footer from '../components/Footer.astro';
|
||||||
|
import Header from '../components/Header.astro';
|
||||||
|
import { SITE_DESCRIPTION, SITE_TITLE } from '../consts';
|
||||||
|
---
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<Header />
|
||||||
|
<main>
|
||||||
|
<h1>🧑🚀 Hello, Astronaut!</h1>
|
||||||
|
<p>
|
||||||
|
Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This template
|
||||||
|
serves as a lightweight, minimally-styled starting point for anyone looking to build a personal
|
||||||
|
website, blog, or portfolio with Astro.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
This template comes with a few integrations already configured in your
|
||||||
|
<code>astro.config.mjs</code> file. You can customize your setup with
|
||||||
|
<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind,
|
||||||
|
React, or Vue to your project.
|
||||||
|
</p>
|
||||||
|
<p>Here are a few ideas on how to get started with the template:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Edit this page in <code>src/pages/index.astro</code></li>
|
||||||
|
<li>Edit the site header items in <code>src/components/Header.astro</code></li>
|
||||||
|
<li>Add your name to the footer in <code>src/components/Footer.astro</code></li>
|
||||||
|
<li>Check out the included blog posts in <code>src/content/blog/</code></li>
|
||||||
|
<li>Customize the blog post page layout in <code>src/layouts/BlogPost.astro</code></li>
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
Have fun! If you get stuck, remember to
|
||||||
|
<a href="https://docs.astro.build/">read the docs</a>
|
||||||
|
or <a href="https://astro.build/chat">join us on Discord</a> to ask questions.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Looking for a blog template with a bit more personality? Check out
|
||||||
|
<a href="https://github.com/Charca/astro-blog-template">astro-blog-template</a>
|
||||||
|
by <a href="https://twitter.com/Charca">Maxi Ferreira</a>.
|
||||||
|
</p>
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import { getCollection } from 'astro:content';
|
||||||
|
import rss from '@astrojs/rss';
|
||||||
|
import { SITE_DESCRIPTION, SITE_TITLE } from '../consts';
|
||||||
|
|
||||||
|
export async function GET(context) {
|
||||||
|
const posts = await getCollection('blog');
|
||||||
|
return rss({
|
||||||
|
title: SITE_TITLE,
|
||||||
|
description: SITE_DESCRIPTION,
|
||||||
|
site: context.site,
|
||||||
|
items: posts.map((post) => ({
|
||||||
|
...post.data,
|
||||||
|
link: `/blog/${post.id}/`,
|
||||||
|
})),
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -0,0 +1,155 @@
|
|||||||
|
/*
|
||||||
|
The CSS in this style tag is based off of Bear Blog's default CSS.
|
||||||
|
https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css
|
||||||
|
License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
|
||||||
|
*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--accent: #2337ff;
|
||||||
|
--accent-dark: #000d8a;
|
||||||
|
--black: 15, 18, 25;
|
||||||
|
--gray: 96, 115, 159;
|
||||||
|
--gray-light: 229, 233, 240;
|
||||||
|
--gray-dark: 34, 41, 57;
|
||||||
|
--gray-gradient: rgba(var(--gray-light), 50%), #fff;
|
||||||
|
--box-shadow:
|
||||||
|
0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%), 0 16px 32px
|
||||||
|
rgba(var(--gray), 33%);
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "Atkinson";
|
||||||
|
src: url("/fonts/atkinson-regular.woff") format("woff");
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "Atkinson";
|
||||||
|
src: url("/fonts/atkinson-bold.woff") format("woff");
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: "Atkinson", sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
text-align: left;
|
||||||
|
background: linear-gradient(var(--gray-gradient)) no-repeat;
|
||||||
|
background-size: 100% 600px;
|
||||||
|
word-wrap: break-word;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
color: rgb(var(--gray-dark));
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
width: 720px;
|
||||||
|
max-width: calc(100% - 2em);
|
||||||
|
margin: auto;
|
||||||
|
padding: 3em 1em;
|
||||||
|
}
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
margin: 0 0 0.5rem 0;
|
||||||
|
color: rgb(var(--black));
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 3.052em;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 2.441em;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 1.953em;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size: 1.563em;
|
||||||
|
}
|
||||||
|
h5 {
|
||||||
|
font-size: 1.25em;
|
||||||
|
}
|
||||||
|
strong,
|
||||||
|
b {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
.prose p {
|
||||||
|
margin-bottom: 2em;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
code {
|
||||||
|
padding: 2px 5px;
|
||||||
|
background-color: rgb(var(--gray-light));
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
padding: 1.5em;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
pre > code {
|
||||||
|
all: unset;
|
||||||
|
}
|
||||||
|
blockquote {
|
||||||
|
border-left: 4px solid var(--accent);
|
||||||
|
padding: 0 0 0 20px;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.333em;
|
||||||
|
}
|
||||||
|
hr {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid rgb(var(--gray-light));
|
||||||
|
}
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
body {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sr-only {
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
position: absolute !important;
|
||||||
|
height: 1px;
|
||||||
|
width: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
/* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
|
||||||
|
clip: rect(1px 1px 1px 1px);
|
||||||
|
/* maybe deprecated but we need to support legacy browsers */
|
||||||
|
clip: rect(1px, 1px, 1px, 1px);
|
||||||
|
/* modern browsers, clip-path works inwards from each corner */
|
||||||
|
clip-path: inset(50%);
|
||||||
|
/* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space */
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"extends": "astro/tsconfigs/strict",
|
||||||
|
"include": [".astro/types.d.ts", "**/*"],
|
||||||
|
"exclude": ["dist"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"strictNullChecks": true
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user