Merge pull request #13 from swift502/astro-v5

Astro v5
swift502 · Sep 13, 2024 · 3e45320 · 3e45320
2 parents 14883f7 + ff9684c
commit 3e45320
Show file tree

Hide file tree

Showing 25 changed files with 456 additions and 343 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,13 +9,13 @@
   },
   "devDependencies": {
     "@astrojs/sitemap": "^3.1.6",
-    "@fontsource/catamaran": "^5.0.21",
-    "@fontsource/solway": "^5.0.13",
-    "@fontsource/sono": "^5.0.21",
+    "@fontsource/catamaran": "^5.1.0",
+    "@fontsource/fragment-mono": "^5.1.0",
+    "@fontsource/solway": "^5.1.0",
     "@rollup/plugin-yaml": "^4.1.2",
-    "astro": "^4.15.1",
+    "astro": "^4.15.4",
     "image-size": "^1.1.1",
-    "marked": "^14.1.0",
+    "marked": "^14.1.2",
     "normalize.css": "^8.0.1"
   }
 }
diff --git a/public/scripts/global.js b/public/scripts/global.js
diff --git a/public/sketchbook/latest/index.html b/public/sketchbook/latest/index.html
@@ -7,6 +7,7 @@
 </script>
 </head>
 
-<body/>
+<body>
+</body>
 
 </html>
diff --git a/src/components/core/Footer.astro b/src/components/core/Footer.astro
@@ -5,15 +5,15 @@ import '../../styles/tiles.css';
 
 <div class="footer">
 	<div class="tile-row">
-		{links.map((link) =>
+		{links.map((link) => (
 			<a href={link.link} target="_blank" title={link.name}>
 				<div class="tile"> 
 					<div class="tile-icon">
 						<img src={link.icon} alt="" onload="fadeIn(this);"/>
 					</div>
 				</div>
 			</a>
-		)}
+		))}
 	</div>
 </div>
 

diff --git a/src/components/core/Head.astro b/src/components/core/Head.astro
@@ -1,24 +1,37 @@
 ---
-import { constructPageTitle } from '../../scripts/astro-helpers';
-import siteData from '../../data/site.yml';
+import '@fontsource/catamaran/600.css';
+import '@fontsource/catamaran/900.css';
+import '@fontsource/solway/400.css';
+import '@fontsource/solway/500.css';
+import '@fontsource/solway/700.css';
+import 'normalize.css';
 
-const { pageInfo } = Astro.props;
+import '../../styles/global.css';
+import type { PageInfo } from '../../scripts/astro-helpers';
 
-const pageTitle = constructPageTitle(pageInfo);
-const pageDescription = pageInfo.description ?? siteData.description;
-const pageImage = import.meta.env.SITE + (pageInfo.image ?? siteData.image);
+interface Props { pageInfo: PageInfo; }
+const { pageInfo } = Astro.props;
 ---
 
 <meta charset="utf-8">
 
-<title>{pageTitle}</title>
-<meta name="description" content={pageDescription}>
+<title>{pageInfo.title}</title>
+<meta name="description" content={pageInfo.description}>
 <meta name="viewport" content="width=device-width,initial-scale=1">
+{pageInfo.noIndex && (
+    <meta name="robots" content="noindex"/>
+)}
 
-<meta property="og:title" content={pageTitle}>
+<meta property="og:title" content={pageInfo.title}>
 <meta property="og:url" content={Astro.url}>
-<meta property="og:description" content={pageDescription}>
-<meta property="og:type" content="website"/>
-<meta property="og:image" content={pageImage}>
+<meta property="og:description" content={pageInfo.description}>
+<meta property="og:type" content="website">
+<meta property="og:image" content={pageInfo.image}>
 
-<script is:inline src="/scripts/global.js"/>
+<script is:inline>
+    function fadeIn(element)
+    {
+        element.style.animation = 'fadeIn 0.2s ease-out';
+        element.style.opacity = 1;
+    }
+</script>
diff --git a/src/components/core/Navbar.astro b/src/components/core/Navbar.astro
@@ -1,6 +1,8 @@
 ---
 import tabs from '../../data/tabs.yml';
+import type { PageInfo } from '../../scripts/astro-helpers';
 
+interface Props { pageInfo: PageInfo; }
 const { pageInfo } = Astro.props;
 
 function tabHighlight(tab)
@@ -11,14 +13,14 @@ function tabHighlight(tab)
 
 <div id="navbar" class="navbar">
 	<div class="navigation">
-		{tabs.map((tab) =>
+		{tabs.map((tab) => (
 			<a
 				href={tab.link}
 				class={'navigation-item' + tabHighlight(tab)}
 			>
 				{tab.name}
 			</a>
-		)}
+		))}
 	</div>
 </div>
 

diff --git a/src/components/projects/ProjectTile.astro b/src/components/projects/ProjectTile.astro
@@ -15,9 +15,9 @@ const { project } = Astro.props
 		{project.data.title}
 	</div>
 	<div class="project-tags">
-		{project.data.tags.map((tag) =>
+		{project.data.tags.map((tag) => (
 			<span class="tag">{tag}</span>
-		)}
+		))}
 	</div>
 	{'badge' in project.data && (
 		<div class="project-badges">

diff --git a/src/content_blocks/Code.astro b/src/content_blocks/Code.astro
@@ -1,10 +1,11 @@
 ---
+import '@fontsource/fragment-mono/400.css';
 import { Code as CodeComponent } from 'astro:components';
 
 import ContentBlock from '../components/content_block/ContentBlock.astro';
 import ContentDescription from "../components/content_block/ContentDescription.astro";
 
-const { project, contentBlock } = Astro.props;
+const { contentBlock } = Astro.props;
 
 const contentBlockId = "code-block-" + contentBlock.index;
 const borderClass = 'desc' in contentBlock.properties ? ' border-radius-top' : ' border-radius-full';
@@ -89,9 +90,8 @@ const borderClass = 'desc' in contentBlock.properties ? ' border-radius-top' : '
 
 <style is:global>
     .code-window code, .code-window span {
-        font-size: 16px;
-        font-family: 'Sono', sans-serif;
-        letter-spacing: -0.5px;
+        font-size: 15px;
+        font-family: "Fragment Mono";
         font-style: normal !important;
     }
 </style>
diff --git a/src/content_blocks/Sketchfab.astro b/src/content_blocks/Sketchfab.astro
@@ -7,13 +7,16 @@ const { project, contentBlock } = Astro.props;
 const id = "sketchfab-" + contentBlock.index;
 let source;
 
-if ('model' in contentBlock.properties) {
+if ('model' in contentBlock.properties)
+{
 	source = `https://sketchfab.com/models/${contentBlock.properties.model}/embed`;
 }
-else if ('collection' in contentBlock.properties) {
+else if ('collection' in contentBlock.properties)
+{
 	source = `https://sketchfab.com/playlists/embed?collection=${contentBlock.properties.collection}`;
 }
-else {
+else
+{
 	logError(`Source was not defined for content block "${id}"`);
 }
 ---

diff --git a/src/data/projects/projection-converter.yml b/src/data/projects/projection-converter.yml
@@ -1,5 +1,5 @@
 title: Map projection converter
-description: Placeholder
+description: A blazing fast, shader based image projection converter. Converts between the equirectangular and mercator projections. Can be used via a CLI or directly in Python.
 tags:
   - 2024
   - Python

diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
@@ -3,16 +3,6 @@ import Head from '../components/core/Head.astro';
 import Navbar from '../components/core/Navbar.astro';
 import Footer from '../components/core/Footer.astro';
 
-import '@fontsource/catamaran/600.css';
-import '@fontsource/catamaran/900.css';
-import '@fontsource/solway/400.css';
-import '@fontsource/solway/500.css';
-import '@fontsource/solway/700.css';
-import '@fontsource/sono/400.css';
-
-import 'normalize.css';
-import '../styles/global.css';
-
 const { pageInfo } = Astro.props;
 ---
 

diff --git a/src/layouts/FullScreen.astro b/src/layouts/FullScreen.astro
@@ -0,0 +1,15 @@
+---
+import Head from '../components/core/Head.astro';
+
+const { pageInfo } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<Head pageInfo={pageInfo} />
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>
diff --git a/src/layouts/NoIndex.astro b/src/layouts/NoIndex.astro
diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -1,15 +1,17 @@
 ---
-import Layout from '../layouts/NoIndex.astro';
+import Layout from '../layouts/FullScreen.astro';
 import BigButton from '../components/core/BigButton.astro';
+import { getPageInfo } from '../scripts/astro-helpers';
 
 // Layout variables
-const pageInfo = {
-	'title': 'Page Not Found',
-};
+const pageInfo = getPageInfo({
+	title: 'Page Not Found',
+	noIndex: true
+});
 ---
 
 <Layout pageInfo={pageInfo}>
-	<div class="content">
+	<div class="model-background">
 		<model-viewer
 			src="/models/404.glb"
 			environment-image="/assets/env.hdr"
@@ -66,7 +68,7 @@ const pageInfo = {
 		margin-bottom: 30px;
 	}
 
-	.content {
+	.model-background {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -80,7 +82,7 @@ const pageInfo = {
 	}
 
 	@media (max-width: 776px) {
-		.content {
+		.model-background {
 			display: none;
 		}
 

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,12 +1,13 @@
 ---
 import Layout from '../layouts/Default.astro';
 import BigButton from '../components/core/BigButton.astro';
+import { getPageInfo } from '../scripts/astro-helpers';
 
 // Layout variables
-const pageInfo = {
-	'titleAppend': '3D art and programming',
-	'tab': 'home',
-};
+const pageInfo = getPageInfo({
+	titleAppend: '3D art and programming',
+	tab: 'home',
+});
 ---
 
 <Layout pageInfo={pageInfo}>
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,7 @@ @@
     </script>
     </head>
-    <body/>
+    <body>
+    </body>
     </html>