More work on the new site. Still a long way to go.
This commit is contained in:
parent
c0f9019baa
commit
db728a6140
7 changed files with 194 additions and 12 deletions
58
public/images/angrybeanie.svg
Normal file
58
public/images/angrybeanie.svg
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="178.2231mm"
|
||||
height="154.4136mm"
|
||||
viewBox="0 0 178.2231 154.4136"
|
||||
version="1.1"
|
||||
id="svg236"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview238"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false" />
|
||||
<defs
|
||||
id="defs233" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-21.214167,-73.891462)">
|
||||
<g
|
||||
id="g891-0"
|
||||
transform="matrix(0.5573153,0,0,0.55360346,-182.66243,-89.541294)"
|
||||
inkscape:export-filename="/home/purserj/Graphics/angrybeanie/ab_twitter.png"
|
||||
inkscape:export-xdpi="22.709999"
|
||||
inkscape:export-ydpi="22.709999">
|
||||
<path
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccscsssscscsssc"
|
||||
id="path2908-35"
|
||||
d="m 391.3746,561.70048 -16.99327,-4.45511 c 0,0 -10.22746,-51.57704 -0.54364,-67.19951 9.6838,-15.62247 8.71932,-17.27235 8.71932,-17.27235 0,0 9.05197,-103.80042 40.18416,-131.96107 31.13219,-28.16064 60.76633,-39.94978 91.92309,-41.56059 31.15675,-1.6108 95.95737,6.99577 120.13286,42.67127 24.17549,35.67548 39.16169,101.0733 38.97081,117.78751 -0.19089,16.7142 7.80398,34.17743 7.80398,34.17743 0,0 2.2326,34.11381 -8.75839,49.39358 -10.99099,15.27978 -21.23294,22.3738 -21.23294,22.3738 0,0 10.1292,-54.62229 -4.12247,-69.5348 -14.25168,-14.9125 -39.98884,-28.64509 -86.89534,-25.57528 -46.90648,3.0698 -111.55527,9.87026 -138.08053,36.44465 -26.52527,26.57439 -31.79304,57.32482 -31.10764,54.71047 z"
|
||||
style="fill:#e41011;fill-opacity:1;stroke:#000000;stroke-width:7.7;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||
<path
|
||||
sodipodi:nodetypes="ccccc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="rect3150-2"
|
||||
d="m 628.1478,376.90719 -54.7834,50.75718 -0.99938,10.71008 69.39194,-31.16964 z"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.214771;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dashoffset:0;stroke-opacity:1" />
|
||||
<path
|
||||
sodipodi:nodetypes="ccccc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="rect3150-5-0"
|
||||
d="m 448.39189,382.94181 69.1924,44.49821 3.10811,10.61413 -81.39439,-23.17994 z"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.226492;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dashoffset:0;stroke-opacity:1" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3 KiB |
|
|
@ -1,7 +1,28 @@
|
|||
export default function Footer() {
|
||||
return (
|
||||
<footer className="bg-gray-800 py-4">
|
||||
<p className="text-center text-white">Copyright 2023</p>
|
||||
<div className="grid grid-cols-3">
|
||||
<div>
|
||||
<h3 className="text-white">Socials</h3>
|
||||
<ul>
|
||||
<li>Mastodon</li>
|
||||
<li>Bluesky</li>
|
||||
<li>Pixelfed</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-white">Copyright 2025</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-white">Follow on RSS</h3>
|
||||
<ul>
|
||||
<li>General News</li>
|
||||
<li>Tech and Disability</li>
|
||||
<li>Photograph Feed</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
import Link from 'next/link'
|
||||
|
||||
export default function LastFiveStories({storyList}: {storyList: any}) {
|
||||
export default function LastFiveStories({storyList, projectFilter}: {storyList: any, projectFilter: String}) {
|
||||
|
||||
return (
|
||||
<div className="w-full md:w-1/4 px-4">
|
||||
<div className="w-full md:w-4/12 px-4">
|
||||
<div className="bg-gray-100 p-4">
|
||||
<h2 className="text-xl font-bold text-gray-800 mb-4">Recent Posts</h2>
|
||||
<h2 className="text-xl font-bold text-gray-800 mb-4">Recent Posts - {projectFilter}</h2>
|
||||
<ul className="list-none">
|
||||
{storyList.data.map((story: any) => (
|
||||
<li className="mb-2">
|
||||
|
|
|
|||
56
src/app/components/NavBar.tsx
Normal file
56
src/app/components/NavBar.tsx
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
export default function NavBar() {
|
||||
return (
|
||||
<nav className="bg-white border-gray-200 py-2.5 dark:bg-gray-900">
|
||||
<div className="flex flex-wrap items-center justify-between max-w-screen-xl px-4 mx-auto">
|
||||
<a href="/" className="flex items-center">
|
||||
<img src="https://www.svgrepo.com/show/499962/music.svg" className="h-6 mr-3 sm:h-9" alt="Landwind Logo" />
|
||||
<span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Landwind</span>
|
||||
</a>
|
||||
<div className="flex items-center lg:order-2">
|
||||
<div className="hidden mt-2 mr-4 sm:inline-block">
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<a href="https://themesberg.com/product/tailwind-css/landing-page"
|
||||
className="text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 sm:mr-2 lg:mr-0 dark:bg-purple-600 dark:hover:bg-purple-700 focus:outline-none dark:focus:ring-purple-800">Download</a>
|
||||
<button data-collapse-toggle="mobile-menu-2" type="button"
|
||||
className="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
|
||||
aria-controls="mobile-menu-2" aria-expanded="true">
|
||||
<span className="sr-only">Open main menu</span>
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fillRule="evenodd"
|
||||
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
|
||||
clipRule="evenodd"></path>
|
||||
</svg>
|
||||
<svg className="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fillRule="evenodd"
|
||||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||
clipRule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="items-center justify-between w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2">
|
||||
<ul className="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
|
||||
<li>
|
||||
<a href="news/"
|
||||
className="block py-2 pl-3 pr-4 text-white bg-purple-700 rounded lg:bg-transparent lg:text-purple-700 lg:p-0 dark:text-white"
|
||||
aria-current="page">News and things</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="photography/"
|
||||
className="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Photography</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="tech-and-disability"
|
||||
className="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Tech and Disability</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="podcasts"
|
||||
className="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Podcasts</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
|
@ -20,6 +20,10 @@ body {
|
|||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: 900
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,14 @@
|
|||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import Head from "next/head";
|
||||
import NavBar from "./components/NavBar";
|
||||
import { Inter } from 'next/font/google'
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
// If loading a variable font, you don't need to specify the font weight
|
||||
const inter = Inter({
|
||||
subsets: ['latin'],
|
||||
weight: "300"
|
||||
})
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
|
|
@ -55,7 +60,9 @@ export default function RootLayout({
|
|||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={inter.className}>{children}</body>
|
||||
<body className={inter.className}>
|
||||
<NavBar></NavBar>
|
||||
<main>{children}</main></body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,45 @@
|
|||
import Image from "next/image";
|
||||
import Footer from "./components/Footer";
|
||||
import { getLatestPost } from "./lib/api";
|
||||
|
||||
export default function Home() {
|
||||
export async function generateMetadata({params}: {params: {slug: string}}) {
|
||||
return {
|
||||
title: "Angry Beanie",
|
||||
description: "A place where my mind lives",
|
||||
openGraph: {
|
||||
url: "https://angrybeanie.com",
|
||||
title: "Angry Beanie",
|
||||
description: "A place where my mind lives",
|
||||
type: "article"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default async function Home() {
|
||||
const latestPost = await(getLatestPost())
|
||||
console.log(latestPost)
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col items-center justify-between p-24">
|
||||
|
||||
<main className="p-20 w-auto flex px-24 justify-center relative">
|
||||
<div id="container" className="p-20 sm:p-16 md:p-20 lg:p-24 xl:p-20 w-auto flex flex-col md:flex-row px-4 sm:px-8 md:px-24 lg:px-24 xl:px-24 relative">
|
||||
<div className="mr-10">
|
||||
<img
|
||||
className="rounded-xl min-w-[100px] w-1/2 h-auto md:w-1/2 md:h-auto"
|
||||
src="/images/angrybeanie.svg"
|
||||
alt="Angry Beanie logo"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full sm:w-[70%] md:w-[60%] lg:w-[50%]">
|
||||
<h1 className="font-bold text-3xl mt-6 mb-8">
|
||||
Latest Post
|
||||
</h1>
|
||||
<div>
|
||||
<a href={"/news/" + latestPost.Slug}>
|
||||
<h2 className="pb-3 black">{latestPost.Title}</h2>
|
||||
<img className="rounded-xl min-w-[100px] w-full h-auto md:w-auto md:h-auto" src={process.env.MEDIA_BASE + latestPost.FeatureImage.data.attributes.formats.large.url} alt={latestPost.FeatureImage.data.attributes.alternativeText}></img>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue