mirror of
https://github.com/Xevion/undefined.behavio.rs.git
synced 2025-12-06 15:16:57 -06:00
Decent working Base/Post + index layout
This commit is contained in:
@@ -3,11 +3,11 @@ import '@styles/global.scss';
|
||||
import '@styles/fonts.scss';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
const titleTag = title != null ? `${title} | xevion.blog` : 'xevion.blog';
|
||||
const titleTag = title != undefined ? `${title} | xevion.blog` : 'xevion.blog';
|
||||
const isWide = false;
|
||||
---
|
||||
<!doctype html>
|
||||
@@ -15,11 +15,7 @@ const isWide = false;
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width" name="viewport">
|
||||
<link as="style" href="/assets/main.css" rel="preload">
|
||||
<link href="/assets/main.css" rel="stylesheet">
|
||||
<!-- build-commit-id: {{ site.github.build_revision | default: site.env.GITHUB_SHA }} -->
|
||||
<!-- <link rel="stylesheet" href="/assets/print.css" media="print">-->
|
||||
<link href="/assets/rouge.css" rel="stylesheet">
|
||||
<title>
|
||||
{titleTag}
|
||||
</title>
|
||||
@@ -59,41 +55,41 @@ const isWide = false;
|
||||
<!-- {% endif %} -->
|
||||
</head>
|
||||
<body class={isWide ? 'wide' : ''}>
|
||||
<slot name="header">
|
||||
<header id="header">
|
||||
<div class="stack" style="--stacks: 3;">
|
||||
<span style="--index: 0;">ryan walters</span>
|
||||
<span style="--index: 1;">ryan walters</span>
|
||||
<span style="--index: 2;">ryan walters</span>
|
||||
</div>
|
||||
</header>
|
||||
<nav>
|
||||
<a href="/">~/</a>
|
||||
<span class="no-select">:</span>
|
||||
<a href="https://xevion.dev">~/about/</a>
|
||||
<span class="no-select">:</span>
|
||||
<a href="https://xevion.dev/projects">~/projects/</a>
|
||||
<span class="no-select">:</span>
|
||||
<a href="https://xevion.dev/resume">~/resume/</a>
|
||||
</nav>
|
||||
</slot>
|
||||
<slot />
|
||||
<slot name="header">
|
||||
<header id="header">
|
||||
<div class="stack" style="--stacks: 3;">
|
||||
<span style="--index: 0;">ryan walters</span>
|
||||
<span style="--index: 1;">ryan walters</span>
|
||||
<span style="--index: 2;">ryan walters</span>
|
||||
</div>
|
||||
</header>
|
||||
</slot>
|
||||
<nav>
|
||||
<a href="/">~/</a>
|
||||
<span class="no-select">:</span>
|
||||
<a href="https://xevion.dev">~/about/</a>
|
||||
<span class="no-select">:</span>
|
||||
<a href="https://xevion.dev/projects">~/projects/</a>
|
||||
<span class="no-select">:</span>
|
||||
<a href="https://xevion.dev/resume">~/resume/</a>
|
||||
</nav>
|
||||
<slot name="default">
|
||||
</body>
|
||||
<script type="text/javascript">
|
||||
/** Is all of this too much effort to make the animation play in just the right way? **/
|
||||
window.onbeforeunload = function(){
|
||||
/** Remember the origin so it can be checked for page reloads **/
|
||||
sessionStorage.setItem("origin", window.location.href);
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
/** Display the glitch effect on new page loads or reloads. **/
|
||||
let glitch_seen = sessionStorage.getItem('glitch')
|
||||
if (glitch_seen !== 'true' || window.location.href === sessionStorage.getItem("origin")) {
|
||||
sessionStorage.setItem('glitch', 'true')
|
||||
document.getElementById('header').firstElementChild.classList.add('glitch')
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<!-- <script type="text/javascript"> -->
|
||||
<!-- /** Is all of this too much effort to make the animation play in just the right way? **/ -->
|
||||
<!-- window.onbeforeunload = function(){ -->
|
||||
<!-- /** Remember the origin so it can be checked for page reloads **/ -->
|
||||
<!-- sessionStorage.setItem("origin", window.location.href); -->
|
||||
<!-- } -->
|
||||
<!---->
|
||||
<!-- window.onload = function() { -->
|
||||
<!-- /** Display the glitch effect on new page loads or reloads. **/ -->
|
||||
<!-- let glitch_seen = sessionStorage.getItem('glitch') -->
|
||||
<!-- if (glitch_seen !== 'true' || window.location.href === sessionStorage.getItem("origin")) { -->
|
||||
<!-- sessionStorage.setItem('glitch', 'true') -->
|
||||
<!-- document.getElementById('header').firstElementChild.classList.add('glitch') -->
|
||||
<!-- } -->
|
||||
<!-- -->
|
||||
<!-- } -->
|
||||
<!-- </script> -->
|
||||
</html>
|
||||
|
||||
@@ -1,7 +1,62 @@
|
||||
---
|
||||
import Base from '@layouts/Base.astro';
|
||||
import Base from "@layouts/Base.astro";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
url: string;
|
||||
description: string;
|
||||
pubDate: string;
|
||||
}
|
||||
|
||||
const { title, description, url, pubDate } = Astro.props;
|
||||
---
|
||||
|
||||
<Base>
|
||||
<Base title="test">
|
||||
<div class="body-container">
|
||||
<h1>
|
||||
<a href={url}>
|
||||
{title}
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<i>
|
||||
<a href={url}>
|
||||
<time datetime="{{ page.date | date: '%Y-%m-%dT%H:%M:%SZ' }}">
|
||||
{pubDate}
|
||||
</time>
|
||||
</a>
|
||||
<!-- {%- for tag in page.tags -%} -->
|
||||
<!-- {{- " " -}}{{- tag -}} -->
|
||||
<!-- {%- endfor -%} -->
|
||||
</i>
|
||||
<article>
|
||||
<slot />
|
||||
</article>
|
||||
<!-- <p> -->
|
||||
<!-- {% if page.custom_js %} -->
|
||||
<!-- {% for file in page.custom_js %} -->
|
||||
<!-- <script type="text/javascript" src="{{ site.baseurl }}/assets/js/{{ file }}"></script> -->
|
||||
<!-- {% endfor %} -->
|
||||
<!-- {% endif %} -->
|
||||
<!-- {% if layout.medium_zoom %} -->
|
||||
<!-- <script crossorigin="anonymous" integrity="sha256-EdPgYcPk/IIrw7FYeuJQexva49pVRZNmt3LculEr7zM=" -->
|
||||
<!-- src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.6/dist/medium-zoom.min.js"></script> -->
|
||||
<!-- <script type="text/javascript"> -->
|
||||
<!-- mediumZoom("[data-zoomable]", {background: "#0e0e0e"}) -->
|
||||
<!-- </script> -->
|
||||
<!-- {% endif %} -->
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<!-- <p style="text-align: center;"> -->
|
||||
<!-- <a href="/feed.xml">Atom</a> | -->
|
||||
<!-- <span id="commit-id" class="build-revision"><a -->
|
||||
<!-- href="{{ site.github.repository_url }}/commit/{{ site.github.build_revision | default: site.env.GITHUB_SHA }}"> -->
|
||||
<!-- #{{ site.github.build_revision | default: site.env.GITHUB_SHA | truncate: 7, "" }} -->
|
||||
<!-- </a></span> -->
|
||||
<!-- </p> -->
|
||||
<slot />
|
||||
</Base>
|
||||
|
||||
22
src/pages/index.astro
Normal file
22
src/pages/index.astro
Normal file
@@ -0,0 +1,22 @@
|
||||
---
|
||||
import Base from "@layouts/Base.astro";
|
||||
import Summary from "@components/Summary.astro";
|
||||
const posts = await Astro.glob("/src/pages/posts/*.md");
|
||||
interface Props {
|
||||
pubDate: Date;
|
||||
}
|
||||
---
|
||||
|
||||
<Base>
|
||||
{
|
||||
posts.map((post) => (
|
||||
<Summary
|
||||
url={post.url || "unknown"}
|
||||
description={post.frontmatter.description}
|
||||
date={new Date()}
|
||||
title={post.frontmatter.title}
|
||||
tags={post.frontmatter.tags}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</Base>
|
||||
@@ -1,6 +0,0 @@
|
||||
---
|
||||
import Base from '@layouts/Base.astro';
|
||||
---
|
||||
<Base>
|
||||
Work In Progress
|
||||
</Base>
|
||||
Reference in New Issue
Block a user