migrate from nextjs to astro
This commit is contained in:
commit
745e9850a6
|
|
@ -0,0 +1,21 @@
|
||||||
|
# build output
|
||||||
|
dist/
|
||||||
|
|
||||||
|
# generated types
|
||||||
|
.astro/
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# logs
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# environment variables
|
||||||
|
.env
|
||||||
|
.env.production
|
||||||
|
|
||||||
|
# macOS-specific files
|
||||||
|
.DS_Store
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"recommendations": ["astro-build.astro-vscode"],
|
||||||
|
"unwantedRecommendations": []
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"command": "./node_modules/.bin/astro dev",
|
||||||
|
"name": "Development server",
|
||||||
|
"request": "launch",
|
||||||
|
"type": "node-terminal"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
# Astro Starter Kit: Basics
|
||||||
|
|
||||||
|
```
|
||||||
|
npm create astro@latest -- --template basics
|
||||||
|
```
|
||||||
|
|
||||||
|
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
|
||||||
|
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
|
||||||
|
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
|
||||||
|
|
||||||
|
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 🚀 Project Structure
|
||||||
|
|
||||||
|
Inside of your Astro project, you'll see the following folders and files:
|
||||||
|
|
||||||
|
```
|
||||||
|
/
|
||||||
|
├── public/
|
||||||
|
│ └── favicon.svg
|
||||||
|
├── src/
|
||||||
|
│ ├── components/
|
||||||
|
│ │ └── Card.astro
|
||||||
|
│ ├── layouts/
|
||||||
|
│ │ └── Layout.astro
|
||||||
|
│ └── pages/
|
||||||
|
│ └── index.astro
|
||||||
|
└── package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||||
|
|
||||||
|
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||||
|
|
||||||
|
Any static assets, like images, can be placed in the `public/` directory.
|
||||||
|
|
||||||
|
## 🧞 Commands
|
||||||
|
|
||||||
|
All commands are run from the root of the project, from a terminal:
|
||||||
|
|
||||||
|
| Command | Action |
|
||||||
|
| :------------------------ | :----------------------------------------------- |
|
||||||
|
| `npm install` | Installs dependencies |
|
||||||
|
| `npm run dev` | Starts local dev server at `localhost:4321` |
|
||||||
|
| `npm run build` | Build your production site to `./dist/` |
|
||||||
|
| `npm run preview` | Preview your build locally, before deploying |
|
||||||
|
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||||
|
| `npm run astro -- --help` | Get help using the Astro CLI |
|
||||||
|
|
||||||
|
## 👀 Want to learn more?
|
||||||
|
|
||||||
|
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { defineConfig } from 'astro/config';
|
||||||
|
import tailwind from "@astrojs/tailwind";
|
||||||
|
|
||||||
|
// https://astro.build/config
|
||||||
|
export default defineConfig({
|
||||||
|
integrations: [tailwind()]
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
{
|
||||||
|
"name": "pchl-astro",
|
||||||
|
"type": "module",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "astro dev",
|
||||||
|
"start": "astro dev",
|
||||||
|
"build": "astro build",
|
||||||
|
"preview": "astro preview",
|
||||||
|
"astro": "astro"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@astrojs/tailwind": "^5.0.0",
|
||||||
|
"astro": "^3.0.12",
|
||||||
|
"tailwindcss": "^3.0.24"
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 337 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 325 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 325 KiB |
|
|
@ -0,0 +1,61 @@
|
||||||
|
---
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
body: string;
|
||||||
|
href: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { href, title, body } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<li class="link-card">
|
||||||
|
<a href={href}>
|
||||||
|
<h2>
|
||||||
|
{title}
|
||||||
|
<span>→</span>
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
{body}
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<style>
|
||||||
|
.link-card {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
padding: 1px;
|
||||||
|
background-color: #23262d;
|
||||||
|
background-image: none;
|
||||||
|
background-size: 400%;
|
||||||
|
border-radius: 7px;
|
||||||
|
background-position: 100%;
|
||||||
|
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||||
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
.link-card > a {
|
||||||
|
width: 100%;
|
||||||
|
text-decoration: none;
|
||||||
|
line-height: 1.4;
|
||||||
|
padding: calc(1.5rem - 1px);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: white;
|
||||||
|
background-color: #23262d;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.link-card:is(:hover, :focus-within) {
|
||||||
|
background-position: 0;
|
||||||
|
background-image: var(--accent-gradient);
|
||||||
|
}
|
||||||
|
.link-card:is(:hover, :focus-within) h2 {
|
||||||
|
color: rgb(var(--accent-light));
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
|
||||||
|
<footer class="w-full bg-neutral-800">
|
||||||
|
<div class="container mx-auto p-8">
|
||||||
|
<div class="flex items-center justify-around md:flex-row">
|
||||||
|
<a class="flex items-center" href="/">
|
||||||
|
<img
|
||||||
|
src="/logo.png"
|
||||||
|
alt="Logo photo club haute lozère"
|
||||||
|
width={128}
|
||||||
|
height={77}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<div class="ml-4 flex flex-col items-center">
|
||||||
|
<span class="text-neutral-300">
|
||||||
|
© 2023 Photo Club de Haute Lozère
|
||||||
|
</span>
|
||||||
|
<span class="text-neutral-300">Tous droits réservés</span>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4 flex">
|
||||||
|
<span class="text-neutral-300">
|
||||||
|
Développé par{" "}
|
||||||
|
<a
|
||||||
|
href="https://github.com/polynux"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
polynux
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
---
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
<header class="flex w-full items-center justify-between bg-gray-800 p-8 text-white">
|
||||||
|
<a href="/">
|
||||||
|
<img src="/logo.png" alt="My Site Logo" width={128} height={77} />
|
||||||
|
</a>
|
||||||
|
<nav>
|
||||||
|
<ul class="flex items-center gap-2 space-x-4">
|
||||||
|
<li>
|
||||||
|
<a href="/le-club" class="font-poppins text-xl">
|
||||||
|
Le club
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/galeries" class="font-poppins text-xl">
|
||||||
|
Galeries
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/contact" class="font-poppins text-xl">
|
||||||
|
Contact
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="/espace-membres"
|
||||||
|
class="bg-white px-6 py-2 font-poppins text-xl text-stone-900"
|
||||||
|
>
|
||||||
|
Espace membres
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="astro/client" />
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
---
|
||||||
|
import Header from '../components/Header.astro';
|
||||||
|
import Footer from '../components/Footer.astro';
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
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" />
|
||||||
|
<link rel="icon" type="image/ico" href="/favicon.ico" />
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
<title>{title}</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<Header />
|
||||||
|
<slot />
|
||||||
|
<Footer />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
---
|
||||||
|
import Layout from "../layouts/Layout.astro";
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title="Contact">
|
||||||
|
<div class="container mx-auto p-8">
|
||||||
|
<div class="flex flex-col gap-6">
|
||||||
|
<h1 class="text-4xl font-bold">Contact</h1>
|
||||||
|
<div class="flex flex-col gap-6">
|
||||||
|
<p class="text-xl">
|
||||||
|
Vous pouvez nous contacter par mail à l'adresse suivante : {" "}
|
||||||
|
<a href="mailto:contact@pchl.fr" class="text-stone-900">contact@pchl.fr</a>
|
||||||
|
</p>
|
||||||
|
<p class="text-xl">
|
||||||
|
Vous pouvez également nous contacter par téléphone au : {" "}
|
||||||
|
<a href="tel:+336 12 34 56 78" class="text-stone-900">06 12 34 56 78</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
---
|
||||||
|
import Layout from "../layouts/Layout.astro";
|
||||||
|
|
||||||
|
type Picture = {
|
||||||
|
src: string;
|
||||||
|
alt: string;
|
||||||
|
class?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const pictures: Picture[] = [];
|
||||||
|
const classes = ["wide", "tall", "big", ""];
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
pictures.push({
|
||||||
|
src: `https://picsum.photos/500/500?random=${i}`,
|
||||||
|
alt: "random image",
|
||||||
|
class: classes[Math.floor(Math.random() * classes.length)],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title="Galeries">
|
||||||
|
<div class="container mx-auto p-8">
|
||||||
|
<div class="flex flex-col gap-6">
|
||||||
|
<div class="heading flex flex-col items-center gap-2">
|
||||||
|
<h1 class="text-4xl font-bold">Retrouvez toutes nos photos</h1>
|
||||||
|
<div class="separator w-1/2 border-b-2 border-slate-800"></div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-wrapper">
|
||||||
|
{pictures?.map((picture: Picture) => (
|
||||||
|
<div key={picture.src} class={picture.class}>
|
||||||
|
<img
|
||||||
|
src={picture.src}
|
||||||
|
alt={picture.alt}
|
||||||
|
width={500}
|
||||||
|
height={500}
|
||||||
|
key={picture.src}
|
||||||
|
class="img"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
<style>
|
||||||
|
img.img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
vertical-align: middle;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-wrapper > div {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.grid-wrapper > div > img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-wrapper {
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 10px;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
grid-auto-rows: 200px;
|
||||||
|
grid-auto-flow: dense;
|
||||||
|
}
|
||||||
|
.grid-wrapper .wide {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
.grid-wrapper .tall {
|
||||||
|
grid-row: span 2;
|
||||||
|
}
|
||||||
|
.grid-wrapper .big {
|
||||||
|
grid-column: span 2;
|
||||||
|
grid-row: span 2;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
---
|
||||||
|
import Layout from '../layouts/Layout.astro';
|
||||||
|
import Card from '../components/Card.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title="Accueil">
|
||||||
|
<main>
|
||||||
|
<div class="container mx-auto p-8">
|
||||||
|
<div class="mb-4 flex gap-10">
|
||||||
|
<div class="w-1/2">
|
||||||
|
<h1 class="font-poppins text-5xl">Notre club photo</h1>
|
||||||
|
<div class="line h-1 w-full bg-black"></div>
|
||||||
|
</div>
|
||||||
|
<div class="w-1/2"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-10">
|
||||||
|
<div class="flex w-1/2 flex-col gap-8">
|
||||||
|
<p class="text-xl">
|
||||||
|
Le Photo Club de Haute Lozère est une association loi 1901 créée
|
||||||
|
en 2018.
|
||||||
|
</p>
|
||||||
|
<p class="text-xl">
|
||||||
|
Le club propose à ses adhérents de partager en groupe la pratique
|
||||||
|
de la photographie, de l'initiation à des techniques plus
|
||||||
|
avancées et en découvrir les multiples facettes.
|
||||||
|
</p>
|
||||||
|
<p class="text-xl">
|
||||||
|
L’échange de connaissances et de savoir-faire autour des
|
||||||
|
techniques et de l’art photographiques ainsi que l’organisation
|
||||||
|
d’événements (rencontres, sorties, reportages, concours liés à la
|
||||||
|
pratique photographique) travaux informatiques de post traitement
|
||||||
|
font parties de nos activités.
|
||||||
|
</p>
|
||||||
|
<img
|
||||||
|
src={"/forum-eaee.png"}
|
||||||
|
alt="Forum photo club haute lozère"
|
||||||
|
width={740}
|
||||||
|
height={320}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex w-1/2 flex-col gap-6">
|
||||||
|
<img
|
||||||
|
src={"/132108978_o.png"}
|
||||||
|
alt="Forum photo club haute lozère"
|
||||||
|
width={740}
|
||||||
|
height={320}
|
||||||
|
/>
|
||||||
|
<p class="text-xl">
|
||||||
|
Ainsi, des sorties à thème sont programmées avec des séances
|
||||||
|
d’analyse des photos réalisées.
|
||||||
|
</p>
|
||||||
|
<p class="text-xl">
|
||||||
|
Nous proposons également des séances de formations aux différentes
|
||||||
|
techniques de la photographie (l’appareil photo, la prise de vue,
|
||||||
|
gestion de la lumière…).
|
||||||
|
</p>
|
||||||
|
<p class="text-xl">
|
||||||
|
En fin de saison, pour finaliser et mettre en valeur nos travaux,
|
||||||
|
une exposition de nos photographies sera proposée au public. Nous
|
||||||
|
invitons tous les amateurs de photos à nous rejoindre et partager
|
||||||
|
cette passion.
|
||||||
|
</p>
|
||||||
|
<p class="text-xl">
|
||||||
|
N’hésitez à contacter le Président : Bernard Sapin au
|
||||||
|
<a href="tel:0681818181" class="font-bold">
|
||||||
|
{" "}
|
||||||
|
06 81 81 81 81
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</Layout>
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
---
|
||||||
|
import Layout from "../layouts/Layout.astro";
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title="Le club">
|
||||||
|
<div class="container mx-auto p-8">
|
||||||
|
<div class="flex flex-col gap-6">
|
||||||
|
<h1 class="text-4xl font-bold">Le club</h1>
|
||||||
|
<div class="flex flex-col gap-6">
|
||||||
|
<p class="text-xl">
|
||||||
|
Le club photo de la Haute Lozère a été créé en 1982 par un groupe
|
||||||
|
d’amateurs de photographie. Il a été reconnu d’utilité publique en
|
||||||
|
1987 et a obtenu le statut de club de la Fédération Française de
|
||||||
|
Photographie en 1992. Il compte aujourd’hui une centaine d’adhérents
|
||||||
|
et est affilié à la Fédération Française de Photographie.
|
||||||
|
</p>
|
||||||
|
<p class="text-xl">
|
||||||
|
Le club propose à ses adhérents de partager en groupe la pratique de
|
||||||
|
la photographie, de l'initiation à des techniques plus
|
||||||
|
avancées et en découvrir les multiples facettes.
|
||||||
|
</p>
|
||||||
|
<p class="text-xl">
|
||||||
|
L’échange de connaissances et de savoir-faire autour des techniques
|
||||||
|
et de l’art photographiques ainsi que l’organisation d’événements
|
||||||
|
(rencontres, sorties, reportages, concours liés à la pratique
|
||||||
|
photographique) travaux informatiques de post traitement font parties
|
||||||
|
de nos activités.
|
||||||
|
</p>
|
||||||
|
<img
|
||||||
|
src={"/forum-eaee.png"}
|
||||||
|
alt="Forum photo club haute lozère"
|
||||||
|
width={740}
|
||||||
|
height={320}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-6">
|
||||||
|
<img
|
||||||
|
src={"/132108978_o.png"}
|
||||||
|
alt="Forum photo club haute lozère"
|
||||||
|
width={740}
|
||||||
|
height={320}
|
||||||
|
/>
|
||||||
|
<p class="text-xl">
|
||||||
|
Ainsi, des sorties à thème sont programmées avec des séances
|
||||||
|
d’analyse des photos réalisées.
|
||||||
|
</p>
|
||||||
|
<p class="text-xl">
|
||||||
|
Nous proposons également des séances de formations aux différentes
|
||||||
|
techniques de la photographie (l’appareil photo, la prise de vue,
|
||||||
|
gestion de la lumière…).
|
||||||
|
</p>
|
||||||
|
<p class="text-xl">
|
||||||
|
Le club organise également des expositions et des concours
|
||||||
|
photographiques.
|
||||||
|
</p>
|
||||||
|
<p class="text-xl">
|
||||||
|
Le club est affilié à la Fédération Française de Photographie et
|
||||||
|
participe à ses concours nationaux.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"extends": "astro/tsconfigs/strict"
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue