new branding

This commit is contained in:
Adam Matthiesen 2024-01-30 10:56:50 -08:00
parent c57a419fcd
commit 0e83cd3f85
10 changed files with 202 additions and 17 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 264 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
www/public/og.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
www/src/assets/og.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

View File

@ -1,16 +1,36 @@
--- ---
import { AstroFont } from 'astro-font'; import { AstroFont } from 'astro-font';
import { ViewTransitions } from 'astro:transitions'; import { ViewTransitions } from 'astro:transitions';
import SEO, { type Props as SEOProps } from './SEO.astro';
import { SiteTitle, SiteDescription } from '../consts'; import { SiteTitle, SiteDescription } from '../consts';
import favicon from '../assets/favicon.svg'; import favicon from '../assets/favicon.svg';
export type Props = Partial<SEOProps>; const canonicalURL = new URL(Astro.url.pathname, Astro.site)
const { title = SiteTitle, name = SiteTitle, description = SiteDescription, ...seo } = Astro.props;
const { title = SiteTitle, name = SiteTitle, description = SiteDescription } = Astro.props;
--- ---
<SEO {title} {description} {name} {...seo} /> <!-- Page Metadata -->
<link rel="canonical" href={canonicalURL} />
<meta name="description" content={description} />
<link rel="icon" type="image/svg" href={favicon.src} /> <link rel="icon" type="image/svg" href={favicon.src} />
<!-- OpenGraph Tags -->
<meta property="og:title" content={title} />
<meta property="og:url" content={canonicalURL} />
<meta property="og:locale" content='en' />
<meta property="og:description" content={description} />
<meta property="og:site_name" content={name} />
<meta property="og:image" content={Astro.url+'og.png'} />
<!-- Twitter Tags -->
<meta name="twitter:card" content='summary_large_image' />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={Astro.url+'og.png'} />
<meta name="twitter:image:alt" content="og_alt" />
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<AstroFont <AstroFont
config={[ config={[

View File

@ -9,7 +9,7 @@ import { Image } from 'astro:assets';
<nav> <nav>
<h2 id="site_title"> <h2 id="site_title">
<a href="/"> <a href="/">
<Image src={favicon} alt="logo" width={64}/> <Image src={favicon} alt="logo" width={64} class="filter-white" />
{SiteTitle} {SiteTitle}
</a> </a>
</h2> </h2>
@ -27,4 +27,7 @@ import { Image } from 'astro:assets';
.links a { .links a {
text-decoration: none; text-decoration: none;
} }
.filter-white{
filter: invert(100%) sepia(0%) saturate(3179%) hue-rotate(226deg) brightness(118%) contrast(101%);
}
</style> </style>

View File

@ -75,8 +75,6 @@ function normalizeImageUrl(image: string | ImageMetadata) {
<meta property="og:locale" content={og.locale} /> <meta property="og:locale" content={og.locale} />
<meta property="og:description" content={og.description} /> <meta property="og:description" content={og.description} />
<meta property="og:site_name" content={og.name} /> <meta property="og:site_name" content={og.name} />
{og.image && <meta property="og:image" content={normalizeImageUrl(og.image.src)} />}
{og.image && <meta property="og:image:alt" content={og.image.alt} />}
<!-- Twitter Tags --> <!-- Twitter Tags -->
<meta name="twitter:card" content={twitter.card} /> <meta name="twitter:card" content={twitter.card} />

View File

@ -2,4 +2,4 @@
// You can import this data from anywhere in your site by using the `import` keyword. // You can import this data from anywhere in your site by using the `import` keyword.
export const SiteTitle = 'Astro-GhostCMS'; export const SiteTitle = 'Astro-GhostCMS';
export const SiteDescription = 'Astro-GhostCMS Integration & API'; export const SiteDescription = 'Easily migrate your Ghost site to Astro';

View File

@ -1,13 +1,9 @@
--- ---
import BaseHead, { type Props as HeadProps } from '../components/BaseHead.astro'; import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro'; import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro'; import Footer from '../components/Footer.astro';
import { SiteTitle } from '../consts'; import { SiteDescription, SiteTitle } from '../consts';
import GhostAstroFooter from '../components/GhostAstroFooter.astro'; import GhostAstroFooter from '../components/GhostAstroFooter.astro';
type Props = HeadProps;
const { ...head } = Astro.props;
--- ---
<!doctype html> <!doctype html>
@ -15,7 +11,7 @@ const { ...head } = Astro.props;
<html lang="en"> <html lang="en">
<head> <head>
<title>{SiteTitle} </title> <title>{SiteTitle} </title>
<BaseHead {...head} /> <BaseHead {SiteTitle} {SiteDescription}/>
<body> <body>
<div class="glow"></div> <div class="glow"></div>
<Header /> <Header />