new branding
Before Width: | Height: | Size: 264 KiB |
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 5.1 KiB |
After Width: | Height: | Size: 36 KiB |
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 5.1 KiB |
After Width: | Height: | Size: 36 KiB |
|
@ -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={[
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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} />
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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 />
|
||||||
|
|