avior/template-web-astro
Template
1
0
Fork 0
Code Pull Requests 10 Actions Packages Activity

feat: Upgrade template based on projects made with it
Some checks failed
Build, check & Test / run (push) Failing after 42s
Details

Browse Source 
Signed-off-by: Florian Bouillon <f.bouillon@aptatio.com>
This commit is contained in:
Florian Bouillon
2023-10-09 11:47:11 +02:00
parent bf06e41238
commit e26b4eb4a5
42 changed files with 934 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/layouts/Base.astro
View File

@ -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
View 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()} />
))}

11
src/layouts/Layout.astro
View File

@ -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
View 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>