Epitech/ratrapage_T-WEB
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 1 Wiki Activity

add astro template for front #13

Merged
Clement merged 18 commits from feat/astro-template-for-front into master 2024-05-21 08:07:58 +00:00
Conversation 1 Commits 18 Files Changed 145 +489 -489
9 changed files with 489 additions and 489 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c4f7d60016 - Show all commits

2
front/src/components/ui/Button.astro
View File

@ -6,6 +6,7 @@ import type { CallToAction as Props } from '~/types';
const { const {
variant = 'secondary', variant = 'secondary',
target, target,
link,
text = Astro.slots.render('default'), text = Astro.slots.render('default'),
icon = '', icon = '',
class: className = '', class: className = '',
@ -31,6 +32,7 @@ const variants = {
<a <a
class={twMerge(variants[variant] || '', className)} class={twMerge(variants[variant] || '', className)}
{...(target ? { target: target, rel: 'noopener noreferrer' } : {})} {...(target ? { target: target, rel: 'noopener noreferrer' } : {})}
{...(link ? { href: link} : {})}
{...rest} {...rest}
> >
<Fragment set:html={text} /> <Fragment set:html={text} />

73
front/src/components/widgets/Header.astro
View File

@ -1,37 +1,40 @@
--- ---
import { Icon } from 'astro-icon/components'; import { Icon } from 'astro-icon/components'
import Logo from '~/components/Logo.astro'; import Logo from 'components/Logo.astro'
import ToggleTheme from '~/components/common/ToggleTheme.astro'; import ToggleTheme from 'components/common/ToggleTheme.astro'
import ToggleMenu from '~/components/common/ToggleMenu.astro'; import ToggleMenu from 'components/common/ToggleMenu.astro'
import Button from '~/components/ui/Button.astro'; import Button from 'components/ui/Button.astro'
import { getHomePermalink } from '~/utils/permalinks'; import { getHomePermalink } from 'utils/permalinks'
import { trimSlash, getAsset } from '~/utils/permalinks'; import { trimSlash, getAsset } from 'utils/permalinks'
import type { CallToAction } from '~/types'; import type { CallToAction } from 'types'
const pb = Astro.locals.pb
const connected = pb.authStore.isValid
interface Link { interface Link {
text?: string; text?: string
href?: string; href?: string
ariaLabel?: string; ariaLabel?: string
icon?: string; icon?: string
} }
interface ActionLink extends CallToAction {} interface ActionLink extends CallToAction {}
interface MenuLink extends Link { interface MenuLink extends Link {
links?: Array<MenuLink>; links?: Array<MenuLink>
} }
export interface Props { export interface Props {
id?: string; id?: string
links?: Array<MenuLink>; links?: Array<MenuLink>
actions?: Array<ActionLink>; actions?: Array<ActionLink>
isSticky?: boolean; isSticky?: boolean
isDark?: boolean; isDark?: boolean
isFullWidth?: boolean; isFullWidth?: boolean
showToggleTheme?: boolean; showToggleTheme?: boolean
showRssFeed?: boolean; showRssFeed?: boolean
position?: string; position?: string
} }
const { const {
@ -44,9 +47,9 @@ const {
showToggleTheme = false, showToggleTheme = false,
showRssFeed = false, showRssFeed = false,
position = 'center', position = 'center',
} = Astro.props; } = Astro.props
const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`; const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`
--- ---
<header <header
@ -149,17 +152,21 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
) )
} }
</div> </div>
{ { !connected && (
actions?.length ? (
<span class="ml-4 rtl:ml-0 rtl:mr-4"> <span class="ml-4 rtl:ml-0 rtl:mr-4">
{actions.map((btnProps) => ( <Button link='/account/login' variant='primary' class="ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm w-auto">
<Button {...btnProps} class="ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm w-auto" /> Connexion
))} </Button>
<Button link='/account/register' variant='secondary' class="ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm w-auto">
Inscription
</Button>
</span> </span>
) : ( )}
'' { connected && (
) <Button link='/account/logout' variant='primary' class="ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm w-auto">
} Déconnexion
</Button>
)}
</div> </div>
</div> </div>
</div> </div>

2
front/src/layouts/PageLayout.astro
View File

@ -21,7 +21,7 @@ const { metadata } = Astro.props;
<Announcement /> <Announcement />
</slot> --> </slot> -->
<slot name="header"> <slot name="header">
<Header {...headerData} isSticky showRssFeed showToggleTheme /> <Header {...headerData} isSticky showToggleTheme />
</slot> </slot>
<main> <main>
<slot /> <slot />

47
front/src/navigation.js
View File

@ -1,4 +1,4 @@
import { getPermalink, getBlogPermalink, getAsset } from './utils/permalinks'; import { getPermalink, getBlogPermalink } from './utils/permalinks'
export const headerData = { export const headerData = {
links: [ links: [
@ -94,7 +94,10 @@ export const headerData = {
}, },
{ {
text: 'Article', text: 'Article',
href: getPermalink('get-started-website-with-astro-tailwind-css', 'post'), href: getPermalink(
'get-started-website-with-astro-tailwind-css',
'post'
),
}, },
{ {
text: 'Article (with MDX)', text: 'Article (with MDX)',
@ -115,8 +118,14 @@ export const headerData = {
href: '#', href: '#',
}, },
], ],
actions: [{ text: 'Download', href: 'https://github.com/onwidget/astrowind', target: '_blank' }], // actions: [
}; // {
// text: 'Connexion',
// href: '',
// target: '_blank',
// },
// ],
}
export const footerData = { export const footerData = {
links: [ links: [
@ -125,11 +134,6 @@ export const footerData = {
links: [ links: [
{ text: 'Features', href: '#' }, { text: 'Features', href: '#' },
{ text: 'Security', href: '#' }, { text: 'Security', href: '#' },
{ text: 'Team', href: '#' },
{ text: 'Enterprise', href: '#' },
{ text: 'Customer stories', href: '#' },
{ text: 'Pricing', href: '#' },
{ text: 'Resources', href: '#' },
], ],
}, },
{ {
@ -137,9 +141,6 @@ export const footerData = {
links: [ links: [
{ text: 'Developer API', href: '#' }, { text: 'Developer API', href: '#' },
{ text: 'Partners', href: '#' }, { text: 'Partners', href: '#' },
{ text: 'Atom', href: '#' },
{ text: 'Electron', href: '#' },
{ text: 'AstroWind Desktop', href: '#' },
], ],
}, },
{ {
@ -147,9 +148,6 @@ export const footerData = {
links: [ links: [
{ text: 'Docs', href: '#' }, { text: 'Docs', href: '#' },
{ text: 'Community Forum', href: '#' }, { text: 'Community Forum', href: '#' },
{ text: 'Professional Services', href: '#' },
{ text: 'Skills', href: '#' },
{ text: 'Status', href: '#' },
], ],
}, },
{ {
@ -157,11 +155,6 @@ export const footerData = {
links: [ links: [
{ text: 'About', href: '#' }, { text: 'About', href: '#' },
{ text: 'Blog', href: '#' }, { text: 'Blog', href: '#' },
{ text: 'Careers', href: '#' },
{ text: 'Press', href: '#' },
{ text: 'Inclusion', href: '#' },
{ text: 'Social Impact', href: '#' },
{ text: 'Shop', href: '#' },
], ],
}, },
], ],
@ -169,15 +162,5 @@ export const footerData = {
{ text: 'Terms', href: getPermalink('/terms') }, { text: 'Terms', href: getPermalink('/terms') },
{ text: 'Privacy Policy', href: getPermalink('/privacy') }, { text: 'Privacy Policy', href: getPermalink('/privacy') },
], ],
socialLinks: [ socialLinks:[]
{ ariaLabel: 'X', icon: 'tabler:brand-x', href: '#' }, }
{ ariaLabel: 'Instagram', icon: 'tabler:brand-instagram', href: '#' },
{ ariaLabel: 'Facebook', icon: 'tabler:brand-facebook', href: '#' },
{ ariaLabel: 'RSS', icon: 'tabler:rss', href: getAsset('/rss.xml') },
{ ariaLabel: 'Github', icon: 'tabler:brand-github', href: 'https://github.com/onwidget/astrowind' },
],
footNote: `
<img class="w-5 h-5 md:w-6 md:h-6 md:-mt-0.5 bg-cover mr-1.5 rtl:mr-0 rtl:ml-1.5 float-left rtl:float-right rounded-sm" src="https://onwidget.com/favicon/favicon-32x32.png" alt="onWidget logo" loading="lazy"></img>
Made by <a class="text-blue-600 underline dark:text-muted" href="https://onwidget.com/"> onWidget</a> · All rights reserved.
`,
};

12
front/src/pages/account/index.astro
View File

@ -1,5 +1,6 @@
--- ---
import Layout from 'layouts/Layout.astro' import Layout from 'layouts/PageLayout.astro';
//import Layout from 'layouts/Layout.astro';
import PocketBase from 'pocketbase' import PocketBase from 'pocketbase'
@ -11,11 +12,12 @@ if(!auth.isValid){
return Astro.redirect("/account/login"); return Astro.redirect("/account/login");
} }
const metadata = {
title: 'Account',
ignoreTitleTemplate: true,
};
--- ---
<Layout title="Account setting"> <Layout metadata={metadata}>
<h1>Bonjour {user!.username}</h1> <h1>Bonjour {user!.username}</h1>
<div>
<a href="/account/logout">deconnexion</a>
</div>
</Layout> </Layout>

10
front/src/pages/account/login.astro
View File

@ -1,5 +1,6 @@
--- ---
import Layout from "layouts/Layout.astro"; import Layout from 'layouts/PageLayout.astro';
//import Layout from 'layouts/Layout.astro';
import AstroUtils from "libs/AstroUtils"; import AstroUtils from "libs/AstroUtils";
import PocketBase from 'pocketbase' import PocketBase from 'pocketbase'
@ -29,9 +30,14 @@ const res = await AstroUtils.wrap(async () => {
return Astro.redirect("/account/login");// route('/account/login', {message: 'Compte invalide, valider les identifiants'})) //XXX: comprendre comment le system de route fonctionne return Astro.redirect("/account/login");// route('/account/login', {message: 'Compte invalide, valider les identifiants'})) //XXX: comprendre comment le system de route fonctionne
} }
}) })
const metadata = {
title: 'Login',
ignoreTitleTemplate: true,
};
--- ---
<Layout title="login"> <Layout metadata={metadata}>
<form id="account-creation" method="post" enctype="multipart/form-data"> <form id="account-creation" method="post" enctype="multipart/form-data">
<input required name="username" placeholder="Pseudo ou email"/> <input required name="username" placeholder="Pseudo ou email"/>
<input required name="password" type="password" placeholder="Mot de passe" /> <input required name="password" type="password" placeholder="Mot de passe" />

2
front/src/pages/account/logout.astro
View File

@ -8,6 +8,6 @@ if(pb.authStore.isValid){
pb.authStore.clear() pb.authStore.clear()
} }
return Astro.redirect('/account/login') return Astro.redirect('/')
--- ---

2
front/src/pages/account/register.astro
View File

@ -58,7 +58,7 @@ await AstroUtils.wrap(async () => {
}) })
const metadata = { const metadata = {
title: 'register', title: 'Register',
ignoreTitleTemplate: true, ignoreTitleTemplate: true,
}; };
--- ---

306
front/src/types.d.ts vendored
View File

@ -1,288 +1,288 @@
import type { AstroComponentFactory } from 'astro/runtime/server/index.js'; import type { AstroComponentFactory } from 'astro/runtime/server/index.js'
import type { HTMLAttributes, ImageMetadata } from 'astro/types'; import type { HTMLAttributes, ImageMetadata } from 'astro/types'
export interface Post { export interface Post {
/** A unique ID number that identifies a post. */ /** A unique ID number that identifies a post. */
id: string; id: string
/** A post’s unique slug – part of the post’s URL based on its name, i.e. a post called “My Sample Page” has a slug “my-sample-page”. */ /** A post’s unique slug – part of the post’s URL based on its name, i.e. a post called “My Sample Page” has a slug “my-sample-page”. */
slug: string; slug: string
/** */ /** */
permalink: string; permalink: string
/** */ /** */
publishDate: Date; publishDate: Date
/** */ /** */
updateDate?: Date; updateDate?: Date
/** */ /** */
title: string; title: string
/** Optional summary of post content. */ /** Optional summary of post content. */
excerpt?: string; excerpt?: string
/** */ /** */
image?: ImageMetadata | string; image?: ImageMetadata | string
/** */ /** */
category?: Taxonomy; category?: Taxonomy
/** */ /** */
tags?: Taxonomy[]; tags?: Taxonomy[]
/** */ /** */
author?: string; author?: string
/** */ /** */
metadata?: MetaData; metadata?: MetaData
/** */ /** */
draft?: boolean; draft?: boolean
/** */ /** */
Content?: AstroComponentFactory; Content?: AstroComponentFactory
content?: string; content?: string
/** */ /** */
readingTime?: number; readingTime?: number
} }
export interface Taxonomy { export interface Taxonomy {
slug: string; slug: string
title: string; title: string
} }
export interface MetaData { export interface MetaData {
title?: string; title?: string
ignoreTitleTemplate?: boolean; ignoreTitleTemplate?: boolean
canonical?: string; canonical?: string
robots?: MetaDataRobots; robots?: MetaDataRobots
description?: string; description?: string
openGraph?: MetaDataOpenGraph; openGraph?: MetaDataOpenGraph
twitter?: MetaDataTwitter; twitter?: MetaDataTwitter
} }
export interface MetaDataRobots { export interface MetaDataRobots {
index?: boolean; index?: boolean
follow?: boolean; follow?: boolean
} }
export interface MetaDataImage { export interface MetaDataImage {
url: string; url: string
width?: number; width?: number
height?: number; height?: number
} }
export interface MetaDataOpenGraph { export interface MetaDataOpenGraph {
url?: string; url?: string
siteName?: string; siteName?: string
images?: Array<MetaDataImage>; images?: Array<MetaDataImage>
locale?: string; locale?: string
type?: string; type?: string
} }
export interface MetaDataTwitter { export interface MetaDataTwitter {
handle?: string; handle?: string
site?: string; site?: string
cardType?: string; cardType?: string
} }
export interface Image { export interface Image {
src: string; src: string
alt?: string; alt?: string
} }
export interface Video { export interface Video {
src: string; src: string
type?: string; type?: string
} }
export interface Widget { export interface Widget {
id?: string; id?: string
isDark?: boolean; isDark?: boolean
bg?: string; bg?: string
classes?: Record<string, string | Record<string, string>>; classes?: Record<string, string | Record<string, string>>
} }
export interface Headline { export interface Headline {
title?: string; title?: string
subtitle?: string; subtitle?: string
tagline?: string; tagline?: string
classes?: Record<string, string>; classes?: Record<string, string>
} }
interface TeamMember { interface TeamMember {
name?: string; name?: string
job?: string; job?: string
image?: Image; image?: Image
socials?: Array<Social>; socials?: Array<Social>
description?: string; description?: string
classes?: Record<string, string>; classes?: Record<string, string>
} }
interface Social { interface Social {
icon?: string; icon?: string
href?: string; href?: string
} }
export interface Stat { export interface Stat {
amount?: number | string; amount?: number | string
title?: string; title?: string
icon?: string; icon?: string
} }
export interface Item { export interface Item {
title?: string; title?: string
description?: string; description?: string
icon?: string; icon?: string
classes?: Record<string, string>; classes?: Record<string, string>
callToAction?: CallToAction; callToAction?: CallToAction
image?: Image; image?: Image
} }
export interface Price { export interface Price {
title?: string; title?: string
subtitle?: string; subtitle?: string
description?: string; description?: string
price?: number | string; price?: number | string
period?: string; period?: string
items?: Array<Item>; items?: Array<Item>
callToAction?: CallToAction; callToAction?: CallToAction
hasRibbon?: boolean; hasRibbon?: boolean
ribbonTitle?: string; ribbonTitle?: string
} }
export interface Testimonial { export interface Testimonial {
title?: string; title?: string
testimonial?: string; testimonial?: string
name?: string; name?: string
job?: string; job?: string
image?: string | unknown; image?: string | unknown
} }
export interface Input { export interface Input {
type: HTMLInputTypeAttribute; type: HTMLInputTypeAttribute
name: string; name: string
label?: string; label?: string
autocomplete?: string; autocomplete?: string
placeholder?: string; placeholder?: string
} }
export interface Textarea { export interface Textarea {
label?: string; label?: string
name?: string; name?: string
placeholder?: string; placeholder?: string
rows?: number; rows?: number
} }
export interface Disclaimer { export interface Disclaimer {
label?: string; label?: string
} }
// COMPONENTS // COMPONENTS
export interface CallToAction extends Omit<HTMLAttributes<'a'>, 'slot'> { export interface CallToAction extends Omit<HTMLAttributes<'a'>, 'slot'> {
variant?: 'primary' | 'secondary' | 'tertiary' | 'link'; variant?: 'primary' | 'secondary' | 'tertiary' | 'link'
text?: string; text?: string
icon?: string; icon?: string
classes?: Record<string, string>; classes?: Record<string, string>
type?: 'button' | 'submit' | 'reset'; type?: 'button' | 'submit' | 'reset'
} }
export interface ItemGrid { export interface ItemGrid {
items?: Array<Item>; items?: Array<Item>
columns?: number; columns?: number
defaultIcon?: string; defaultIcon?: string
classes?: Record<string, string>; classes?: Record<string, string>
} }
export interface Collapse { export interface Collapse {
iconUp?: string; iconUp?: string
iconDown?: string; iconDown?: string
items?: Array<Item>; items?: Array<Item>
columns?: number; columns?: number
classes?: Record<string, string>; classes?: Record<string, string>
} }
export interface Form { export interface Form {
inputs?: Array<Input>; inputs?: Array<Input>
textarea?: Textarea; textarea?: Textarea
disclaimer?: Disclaimer; disclaimer?: Disclaimer
button?: string; button?: string
description?: string; description?: string
} }
// WIDGETS // WIDGETS
export interface Hero extends Omit<Headline, 'classes'>, Widget { export interface Hero extends Omit<Headline, 'classes'>, Widget {
content?: string; content?: string
image?: string | unknown; image?: string | unknown
callToAction1?: CallToAction; callToAction1?: CallToAction
callToAction2?: CallToAction; callToAction2?: CallToAction
isReversed?: boolean; isReversed?: boolean
} }
export interface Team extends Omit<Headline, 'classes'>, Widget { export interface Team extends Omit<Headline, 'classes'>, Widget {
team?: Array<TeamMember>; team?: Array<TeamMember>
} }
export interface Stats extends Omit<Headline, 'classes'>, Widget { export interface Stats extends Omit<Headline, 'classes'>, Widget {
stats?: Array<Stat>; stats?: Array<Stat>
} }
export interface Pricing extends Omit<Headline, 'classes'>, Widget { export interface Pricing extends Omit<Headline, 'classes'>, Widget {
prices?: Array<Price>; prices?: Array<Price>
} }
export interface Testimonials extends Omit<Headline, 'classes'>, Widget { export interface Testimonials extends Omit<Headline, 'classes'>, Widget {
testimonials?: Array<Testimonial>; testimonials?: Array<Testimonial>
callToAction?: CallToAction; callToAction?: CallToAction
} }
export interface Brands extends Omit<Headline, 'classes'>, Widget { export interface Brands extends Omit<Headline, 'classes'>, Widget {
icons?: Array<string>; icons?: Array<string>
images?: Array<Image>; images?: Array<Image>
} }
export interface Features extends Omit<Headline, 'classes'>, Widget { export interface Features extends Omit<Headline, 'classes'>, Widget {
image?: string | unknown; image?: string | unknown
video?: Video; video?: Video
items?: Array<Item>; items?: Array<Item>
columns?: number; columns?: number
defaultIcon?: string; defaultIcon?: string
callToAction1?: CallToAction; callToAction1?: CallToAction
callToAction2?: CallToAction; callToAction2?: CallToAction
isReversed?: boolean; isReversed?: boolean
isBeforeContent?: boolean; isBeforeContent?: boolean
isAfterContent?: boolean; isAfterContent?: boolean
} }
export interface Faqs extends Omit<Headline, 'classes'>, Widget { export interface Faqs extends Omit<Headline, 'classes'>, Widget {
iconUp?: string; iconUp?: string
iconDown?: string; iconDown?: string
items?: Array<Item>; items?: Array<Item>
columns?: number; columns?: number
} }
export interface Steps extends Omit<Headline, 'classes'>, Widget { export interface Steps extends Omit<Headline, 'classes'>, Widget {
items: Array<{ items: Array<{
title: string; title: string
description?: string; description?: string
icon?: string; icon?: string
classes?: Record<string, string>; classes?: Record<string, string>
}>; }>
callToAction?: string | CallToAction; callToAction?: string | CallToAction
image?: string | Image; image?: string | Image
isReversed?: boolean; isReversed?: boolean
} }
export interface Content extends Omit<Headline, 'classes'>, Widget { export interface Content extends Omit<Headline, 'classes'>, Widget {
content?: string; content?: string
image?: string | unknown; image?: string | unknown
items?: Array<Item>; items?: Array<Item>
columns?: number; columns?: number
isReversed?: boolean; isReversed?: boolean
isAfterContent?: boolean; isAfterContent?: boolean
callToAction?: CallToAction; callToAction?: CallToAction
} }
export interface Contact extends Omit<Headline, 'classes'>, Form, Widget {} export interface Contact extends Omit<Headline, 'classes'>, Form, Widget {}