feat: Upgrade template based on projects made with it
Some checks failed
Build, check & Test / run (push) Failing after 42s
Some checks failed
Build, check & Test / run (push) Failing after 42s
Signed-off-by: Florian Bouillon <f.bouillon@aptatio.com>
This commit is contained in:
@ -1,28 +1,18 @@
|
||||
---
|
||||
export interface Props {
|
||||
title: string
|
||||
import Head, { type Props as HeadProps } from './Head.astro'
|
||||
|
||||
export interface Props extends HeadProps {
|
||||
class?: string
|
||||
}
|
||||
|
||||
import Favicon from '../components/Favicon/Favicon.astro'
|
||||
import IconSVG from '../assets/layouts/Base/favicon.svg'
|
||||
import IconPNG from '../assets/layouts/Base/favicon.png'
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content="Astro description">
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<!-- Analytics -->
|
||||
<script defer data-domain="example.com" src="/js/script.js"></script>
|
||||
|
||||
<Favicon svg={IconSVG} png={IconPNG} icoPath="/favicon.ico" />
|
||||
<title>{title}</title>
|
||||
<Head {...Astro.props} />
|
||||
<slot name="head" />
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<body class:list={["bg-primary-50 dark:bg-slate-950 text-slate-950 dark:text-primary-50", Astro.props.class]}>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
132
src/layouts/Head.astro
Normal file
132
src/layouts/Head.astro
Normal file
@ -0,0 +1,132 @@
|
||||
---
|
||||
import Favicon from 'components/layouts/Favicon/Favicon.astro'
|
||||
import IconSVG from 'assets/layouts/Head/favicon.svg'
|
||||
import IconPNG from 'assets/layouts/Head/favicon.png'
|
||||
|
||||
export interface Props {
|
||||
/**
|
||||
* Site display name
|
||||
*/
|
||||
siteName?: string | undefined
|
||||
/**
|
||||
* Page Title
|
||||
*/
|
||||
title?: string | undefined
|
||||
/**
|
||||
* Page description
|
||||
*/
|
||||
description?: string | undefined
|
||||
/**
|
||||
* define the cannonical url
|
||||
*/
|
||||
canonical?: string | false | undefined
|
||||
/**
|
||||
* OpenGraph image(s)
|
||||
*/
|
||||
image?: typeof IconPNG | Array<typeof IconPNG> | undefined
|
||||
/**
|
||||
* Twitter/X Specific options
|
||||
*/
|
||||
twitter?: {
|
||||
title?: string | undefined
|
||||
card?: "summary" | "summary_large_image" | "app" | "player" | undefined
|
||||
site?: string | undefined
|
||||
creator?: string | undefined
|
||||
} | undefined
|
||||
/**
|
||||
* OpenGraph Specific options (override defaults set by other options)
|
||||
*/
|
||||
og?: {
|
||||
title?: string | undefined
|
||||
type?: string | undefined
|
||||
description?: string | undefined
|
||||
url?: string | undefined
|
||||
} | undefined
|
||||
}
|
||||
|
||||
const props = Astro.props
|
||||
|
||||
const image = props.image ? Array.isArray(props.image) ? props.image : [props.image] : undefined
|
||||
|
||||
const canonical = typeof Astro.props.canonical === 'string' ? Astro.props.canonical : Astro.props.canonical === false ? undefined : Astro.url.href
|
||||
---
|
||||
|
||||
<!-- Charset -->
|
||||
<meta charset="UTF-8" />
|
||||
|
||||
<!-- Viewport -->
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
|
||||
<!-- Analytics -->
|
||||
<script defer data-domain="avior.me" src="/js/script.js"></script>
|
||||
|
||||
<!-- Favicon -->
|
||||
<Favicon svg={IconSVG} png={IconPNG} icoPath="/favicon.ico" />
|
||||
|
||||
<!-- OpenGraph Sitename -->
|
||||
{props.siteName && (
|
||||
<meta property="og:site_name" content={props.siteName} />
|
||||
)}
|
||||
|
||||
<!-- Title -->
|
||||
{props.title && (
|
||||
<title>{props.title}</title>
|
||||
// <meta property="twitter:title" content={props.twitter?.title ?? props.title} />
|
||||
)}
|
||||
|
||||
<!-- Description -->
|
||||
{props.description && (
|
||||
<meta name="description" content={props.description} />
|
||||
)}
|
||||
|
||||
<!-- Canonical -->
|
||||
{canonical && (
|
||||
<link rel="canonical" href={canonical} />
|
||||
)}
|
||||
|
||||
<!-- Twitter -->
|
||||
<!-- Twitter Card -->
|
||||
<meta property="twitter:card" content={props.twitter?.card ?? 'summary'} />
|
||||
|
||||
<!-- Twitter Site -->
|
||||
{props.twitter?.site && (
|
||||
<meta property="twitter:site" content={props.twitter.site} />
|
||||
)}
|
||||
|
||||
<!-- Twitter Creator -->
|
||||
{props.twitter?.creator && (
|
||||
<meta property="twitter:creator" content={props.twitter.creator} />
|
||||
)}
|
||||
|
||||
<!-- Twitter Title -->
|
||||
{(props.twitter?.title ?? props.title) && (
|
||||
<meta property="twitter:title" content={props.twitter?.title ?? props.title} />
|
||||
)}
|
||||
|
||||
<!-- OpenGraph -->
|
||||
<!-- OpenGraph Title -->
|
||||
{(props.og?.title ?? props.title) && (
|
||||
<meta property="og:title" content={props.og?.title ?? props.title} />
|
||||
)}
|
||||
|
||||
<!-- OpenGraph Description -->
|
||||
{(props.og?.description ?? props.description) && (
|
||||
<meta property="og:description" content={props.og?.description ?? props.description} />
|
||||
)}
|
||||
|
||||
<!-- OpenGraph Type -->
|
||||
<meta property="og:type" content={props.og?.type ?? 'website'} />
|
||||
|
||||
<!-- OpenGraph URL -->
|
||||
{(props.og?.url ?? canonical) && (
|
||||
<meta property="og:url" content={props.og?.url ?? canonical} />
|
||||
)}
|
||||
|
||||
<!-- OpenGraph Image -->
|
||||
{image?.map((img) => (
|
||||
<meta property="og:image" content={img.src} />
|
||||
<meta property="og:image:type" content={`image/${img.format}`} />
|
||||
<meta property="og:image:width" content={img.width.toString()} />
|
||||
<meta property="og:image:height" content={img.height.toString()} />
|
||||
))}
|
@ -1,11 +0,0 @@
|
||||
---
|
||||
import Base, { type Props as BaseProps } from './Base.astro'
|
||||
|
||||
export interface Props extends BaseProps {}
|
||||
---
|
||||
|
||||
<Base {...Astro.props}>
|
||||
<main class="container">
|
||||
<slot />
|
||||
</main>
|
||||
</Base>
|
30
src/layouts/MainLayout.astro
Normal file
30
src/layouts/MainLayout.astro
Normal file
@ -0,0 +1,30 @@
|
||||
---
|
||||
import Footer from 'components/layouts/Footer.astro'
|
||||
import Base, { type Props as BaseProps } from './Base.astro'
|
||||
import Header from 'components/layouts/Header.astro'
|
||||
import { Mail, Phone } from 'lucide-astro'
|
||||
import { Github, Linkedin } from 'simple-icons-astro'
|
||||
|
||||
export interface Props extends BaseProps {
|
||||
/**
|
||||
* remove the default top padding top allow the content to overflow with the header
|
||||
*/
|
||||
hasHero?: boolean
|
||||
}
|
||||
---
|
||||
|
||||
<Base {...Astro.props}>
|
||||
<slot slot="head" name="head" />
|
||||
<Header />
|
||||
<div class:list={{'pt-24': !Astro.props.hasHero}}>
|
||||
<slot />
|
||||
</div>
|
||||
<Footer links={[
|
||||
{href: 'https://www.avior.me', display: 'About'}
|
||||
]} socials={[
|
||||
{href: 'https://linkedin.com', icon: Linkedin},
|
||||
{href: 'mailto:contact@example.com', target: '', icon: Mail},
|
||||
{href: 'tel:+33601020304', target: '', icon: Phone},
|
||||
{href: 'https://github.com/dzeiocom', icon: Github},
|
||||
]} />
|
||||
</Base>
|
Reference in New Issue
Block a user