mirror of
https://github.com/Fluffy-Bean/website.git
synced 2025-01-29 17:28:28 +00:00
Fix Post and Project page rendering
Funky button Yeet the GitHub pages stuff, for now
This commit is contained in:
parent
4fc0ee9d9c
commit
6f7b419841
41
.github/workflows/deploy.yml
vendored
41
.github/workflows/deploy.yml
vendored
|
|
@ -1,41 +0,0 @@
|
|||
name: Deploy to GitHub Pages
|
||||
|
||||
# https://docs.astro.build/en/guides/deploy/github/
|
||||
|
||||
on:
|
||||
# Trigger the workflow every time you push to the `main` branch
|
||||
# Using a different branch name? Replace `main` with your branch’s name
|
||||
push:
|
||||
branches: [ main ]
|
||||
# Allows you to run this workflow manually from the Actions tab on GitHub.
|
||||
workflow_dispatch:
|
||||
|
||||
# Allow this job to clone the repo and create a page deployment
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout your repository using git
|
||||
uses: actions/checkout@v4
|
||||
- name: Install, build, and upload your site
|
||||
uses: withastro/action@v2
|
||||
# with:
|
||||
# path: . # The root location of your Astro project inside the repository. (optional)
|
||||
# node-version: 20 # The specific version of Node that should be used to build your site. Defaults to 20. (optional)
|
||||
# package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
|
||||
|
||||
deploy:
|
||||
needs: build
|
||||
runs-on: ubuntu-latest
|
||||
environment:
|
||||
name: github-pages
|
||||
url: ${{ steps.deployment.outputs.page_url }}
|
||||
steps:
|
||||
- name: Deploy to GitHub Pages
|
||||
id: deployment
|
||||
uses: actions/deploy-pages@v4
|
||||
|
|
@ -1,7 +1,4 @@
|
|||
import { defineConfig } from 'astro/config';
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: 'https://Fuffy-Bean.github.io',
|
||||
base: '/website',
|
||||
});
|
||||
export default defineConfig({});
|
||||
|
|
|
|||
|
|
@ -34,7 +34,6 @@ const { href, title, body } = Astro.props;
|
|||
|
||||
box-shadow: 0 0 0 rgba(#000, 0);
|
||||
list-style: none;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
> a {
|
||||
|
|
@ -93,7 +92,7 @@ const { href, title, body } = Astro.props;
|
|||
|
||||
&:hover, &:focus-within {
|
||||
> a {
|
||||
text-decoration: underline;
|
||||
/*text-decoration: underline;*/
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -62,10 +62,6 @@
|
|||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &:focus-visible {
|
||||
background-color: lighten($gray, 1%);
|
||||
}
|
||||
}
|
||||
|
||||
#music-title {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
---
|
||||
layout: ../../layouts/Markdown.astro
|
||||
|
||||
title: This is an example Post
|
||||
description: "Blamby ford"
|
||||
pubDate: 2022-07-08
|
||||
|
|
@ -14,4 +12,4 @@ tags:
|
|||
- "Fortnite"
|
||||
---
|
||||
|
||||
Gay Balls even
|
||||
aurgh
|
||||
|
|
|
|||
130
src/content/posts/markdown-cheat-sheet.md
Normal file
130
src/content/posts/markdown-cheat-sheet.md
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
---
|
||||
title: This is an example Post
|
||||
description: "Cheat Sheet for Markdown"
|
||||
pubDate: 2022-07-08
|
||||
image:
|
||||
url: "https://docs.astro.build/assets/arc.webp"
|
||||
alt: "Thumbnail of Astro arcs."
|
||||
tags:
|
||||
- "Faggor"
|
||||
---
|
||||
|
||||
# Markdown Cheat Sheet
|
||||
|
||||
Thanks for visiting [The Markdown Guide](https://www.markdownguide.org)!
|
||||
|
||||
This Markdown cheat sheet provides a quick overview of all the Markdown syntax elements. It can’t cover every edge case, so if you need more information about any of these elements, refer to the reference guides for [basic syntax](https://www.markdownguide.org/basic-syntax/) and [extended syntax](https://www.markdownguide.org/extended-syntax/).
|
||||
|
||||
## Basic Syntax
|
||||
|
||||
These are the elements outlined in John Gruber’s original design document. All Markdown applications support these elements.
|
||||
|
||||
### Heading
|
||||
|
||||
# H1
|
||||
## H2
|
||||
### H3
|
||||
|
||||
### Bold
|
||||
|
||||
**bold text**
|
||||
|
||||
### Italic
|
||||
|
||||
*italicized text*
|
||||
|
||||
### Blockquote
|
||||
|
||||
> blockquote
|
||||
|
||||
### Ordered List
|
||||
|
||||
1. First item
|
||||
2. Second item
|
||||
3. Third item
|
||||
|
||||
### Unordered List
|
||||
|
||||
- First item
|
||||
- Second item
|
||||
- Third item
|
||||
|
||||
### Code
|
||||
|
||||
`code`
|
||||
|
||||
### Horizontal Rule
|
||||
|
||||
---
|
||||
|
||||
### Link
|
||||
|
||||
[Markdown Guide](https://www.markdownguide.org)
|
||||
|
||||
### Image
|
||||
|
||||
|
||||
|
||||
## Extended Syntax
|
||||
|
||||
These elements extend the basic syntax by adding additional features. Not all Markdown applications support these elements.
|
||||
|
||||
### Table
|
||||
|
||||
| Syntax | Description |
|
||||
| ----------- | ----------- |
|
||||
| Header | Title |
|
||||
| Paragraph | Text |
|
||||
|
||||
### Fenced Code Block
|
||||
|
||||
```
|
||||
{
|
||||
"firstName": "John",
|
||||
"lastName": "Smith",
|
||||
"age": 25
|
||||
}
|
||||
```
|
||||
|
||||
### Footnote
|
||||
|
||||
Here's a sentence with a footnote. [^1]
|
||||
|
||||
[^1]: This is the footnote.
|
||||
|
||||
### Heading ID
|
||||
|
||||
### My Great Heading {#custom-id}
|
||||
|
||||
### Definition List
|
||||
|
||||
term
|
||||
: definition
|
||||
|
||||
### Strikethrough
|
||||
|
||||
~~The world is flat.~~
|
||||
|
||||
### Task List
|
||||
|
||||
- [x] Write the press release
|
||||
- [ ] Update the website
|
||||
- [ ] Contact the media
|
||||
|
||||
### Emoji
|
||||
|
||||
That is so funny! :joy:
|
||||
|
||||
(See also [Copying and Pasting Emoji](https://www.markdownguide.org/extended-syntax/#copying-and-pasting-emoji))
|
||||
|
||||
### Highlight
|
||||
|
||||
I need to highlight these ==very important words==.
|
||||
|
||||
### Subscript
|
||||
|
||||
H~2~O
|
||||
|
||||
### Superscript
|
||||
|
||||
X^2^
|
||||
|
|
@ -1,6 +1,4 @@
|
|||
---
|
||||
layout: ../../layouts/Markdown.astro
|
||||
|
||||
title: Project 2
|
||||
description: Another one
|
||||
image:
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
---
|
||||
layout: ../../layouts/Markdown.astro
|
||||
|
||||
title: Project 1
|
||||
description: Example Project Im working on
|
||||
image:
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
---
|
||||
layout: ../../layouts/Markdown.astro
|
||||
|
||||
title: GwaGwa
|
||||
description: :3
|
||||
image:
|
||||
|
|
|
|||
|
|
@ -27,46 +27,51 @@ const { title, src, alt } = Astro.props;
|
|||
</head>
|
||||
<body>
|
||||
<div class="banner">
|
||||
{src && <img src={src} alt={alt} />}
|
||||
{src && (
|
||||
<img src={src} alt={alt} />
|
||||
<script>
|
||||
const img = document.querySelector(".banner > img");
|
||||
document.addEventListener("scroll", () => {
|
||||
img.style.top = `${window.scrollY}px`;
|
||||
img.style.filter = `blur(${window.scrollY / 100}px)`;
|
||||
})
|
||||
</script>
|
||||
)}
|
||||
</div>
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style is:global lang="scss">
|
||||
@import "../styles/vars";
|
||||
|
||||
.banner {
|
||||
margin: 0 -16px;
|
||||
|
||||
position: relative;
|
||||
|
||||
height: 700px;
|
||||
|
||||
background-color: rgba($light, 0.01);
|
||||
|
||||
box-shadow: 0 8px 8px rgba(#000, 0.3);
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: block;
|
||||
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 0 32px;
|
||||
|
||||
height: 50px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 32px 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,56 +0,0 @@
|
|||
---
|
||||
import Layout from "./Layout.astro";
|
||||
|
||||
const { frontmatter } = Astro.props;
|
||||
---
|
||||
|
||||
<Layout title="Leggy Land" src={frontmatter.image.url} alt={frontmatter.image.alt}>
|
||||
<a id="back" href="/">Back</a>
|
||||
<h1>{frontmatter.title}</h1>
|
||||
<p>By {frontmatter.author}</p>
|
||||
|
||||
<ul id="tags">
|
||||
{frontmatter.tags.map((item: string) => ( <li class="pill">#{item}</li> ))}
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
<slot />
|
||||
</Layout>
|
||||
|
||||
<style is:global lang="scss">
|
||||
@import "../styles/vars";
|
||||
|
||||
#back {
|
||||
margin-bottom: 32px;
|
||||
padding: 0 32px;
|
||||
|
||||
width: max-content;
|
||||
height: 35px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
border-radius: 9999px;
|
||||
border: 0 solid $gray;
|
||||
background-color: $gray;
|
||||
color: $light;
|
||||
|
||||
&:hover, &:focus-visible {
|
||||
background-color: lighten($gray, 1%);
|
||||
}
|
||||
}
|
||||
|
||||
#tags {
|
||||
padding-top: 16px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -22,22 +22,24 @@ const posts = await getCollection('posts');
|
|||
|
||||
<section>
|
||||
<h2>Who am I</h2>
|
||||
<p>My name is Fluffy or Michał, I'm 19 and like computers</p>
|
||||
<br>
|
||||
<p>I mainly do website stuff, work with the front and backend, but I also like networking and breaking things</p>
|
||||
<br>
|
||||
<p>My favorite language currently is Go, but I also know a few other languages that are listed below!</p>
|
||||
<br>
|
||||
<p>I use Arch btw.</p>
|
||||
<p>
|
||||
My name is Michał, I go by Fluffy, I'm 19 and I like computers
|
||||
<br><br>
|
||||
I mainly do website stuff, work with the front and backend, but I also like networking and breaking things
|
||||
<br><br>
|
||||
My favorite language currently is Go, but I also know a few other languages that are listed below!
|
||||
<br><br>
|
||||
I use Arch btw.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Find me on</h2>
|
||||
<ul class="pill-list">
|
||||
<li><a class="button" href="#">Twitter</a></li>
|
||||
<li><a class="button" href="#">BlueSky</a></li>
|
||||
<li><a class="button" href="#">Discord</a></li>
|
||||
<li><a class="button" href="#">Telegram</a></li>
|
||||
<li><a class="button" href="https://www.twitter.com/fluffybeanUwU" target="_blank">Twitter</a></li>
|
||||
<li><a class="button" href="https://bsky.app/profile/leggy.dev" target="_blank">BlueSky</a></li>
|
||||
<li><a class="button" href="https://t.me/Fluffy_Bean" target="_blank">Telegram</a></li>
|
||||
<li><a class="button" href="https://github.com/Fluffy-Bean" target="_blank">GitHub</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import { getCollection } from 'astro:content';
|
||||
import { getCollection } from "astro:content";
|
||||
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
|
||||
|
|
@ -10,10 +10,12 @@ export async function getStaticPaths() {
|
|||
params: { slug: post.slug },
|
||||
props: { post: post },
|
||||
};
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const { post } = Astro.props;
|
||||
|
||||
const { Content } = await post.render()
|
||||
---
|
||||
|
||||
<Layout title="Leggy Land" src={post.data.image.url} alt={post.data.image.alt}>
|
||||
|
|
@ -26,7 +28,7 @@ const { post } = Astro.props;
|
|||
<hr>
|
||||
|
||||
<div>
|
||||
{post.body}
|
||||
<Content />
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,10 +10,12 @@ export async function getStaticPaths() {
|
|||
params: { slug: project.slug },
|
||||
props: { project: project },
|
||||
};
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
const { project } = Astro.props;
|
||||
|
||||
const { Content } = await project.render()
|
||||
---
|
||||
|
||||
<Layout title="Leggy Land" src={project.data.image.url} alt={project.data.image.alt}>
|
||||
|
|
@ -27,7 +29,7 @@ const { project } = Astro.props;
|
|||
<hr>
|
||||
|
||||
<div>
|
||||
{project.body}
|
||||
<Content />
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
|
|
|
|||
|
|
@ -15,8 +15,9 @@
|
|||
text-decoration: none;
|
||||
|
||||
border-radius: 9999px;
|
||||
border: 0 solid $gray;
|
||||
background-color: rgba($light, 0.05);
|
||||
border: 0 solid transparent;
|
||||
//border: 2px solid rgba($light, 0.04);
|
||||
background-color: rgba($light, 0.04);
|
||||
color: $light;
|
||||
|
||||
overflow: hidden;
|
||||
|
|
@ -32,10 +33,10 @@
|
|||
left: 0;
|
||||
|
||||
border-radius: 9999px;
|
||||
background-color: rgba($light, 0.05);
|
||||
background-color: rgba($light, 0.04);
|
||||
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
transform: scaleX(0%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -43,10 +44,9 @@
|
|||
outline: 0 solid transparent;
|
||||
|
||||
&:before {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
|
||||
transition: opacity 0.3s cubic-bezier(0,1,0,1), transform 0.5s cubic-bezier(0,1,0,1);
|
||||
transform: scaleX(100%);
|
||||
transition: opacity 0.5s cubic-bezier(0,1,0,1), transform 0.5s cubic-bezier(0,1,0,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,10 @@ main {
|
|||
background-color: $dark;
|
||||
|
||||
box-shadow: 0 8px 8px rgba(#000, 0.3);
|
||||
animation: mainSlide 1s cubic-bezier(0,1,0,1) forwards;
|
||||
z-index: 10;
|
||||
|
||||
// causes problems on chrome
|
||||
//animation: mainSlide 1s cubic-bezier(0,1,0,1) forwards;
|
||||
|
||||
> h1 {
|
||||
padding-bottom: 8px;
|
||||
|
|
|
|||
|
|
@ -19,5 +19,5 @@ body {
|
|||
flex-direction: column;
|
||||
|
||||
background-color: #261f1b;
|
||||
color: $light
|
||||
color: $light;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue