pretty big refactoring
This commit is contained in:
14
mdsvex.config.js
Normal file
14
mdsvex.config.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { defineMDSveXConfig as defineConfig } from "mdsvex";
|
||||||
|
|
||||||
|
const config = defineConfig({
|
||||||
|
extensions: [".svelte.md", ".md", ".svx"],
|
||||||
|
|
||||||
|
smartypants: {
|
||||||
|
dashes: "oldschool",
|
||||||
|
},
|
||||||
|
|
||||||
|
remarkPlugins: [],
|
||||||
|
rehypePlugins: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
export default config;
|
||||||
78
package-lock.json
generated
78
package-lock.json
generated
@ -7,6 +7,9 @@
|
|||||||
"": {
|
"": {
|
||||||
"name": "livecodingfr",
|
"name": "livecodingfr",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
|
"dependencies": {
|
||||||
|
"marked": "^9.1.5"
|
||||||
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@sveltejs/adapter-auto": "^2.0.0",
|
"@sveltejs/adapter-auto": "^2.0.0",
|
||||||
"@sveltejs/adapter-static": "^2.0.3",
|
"@sveltejs/adapter-static": "^2.0.3",
|
||||||
@ -14,6 +17,7 @@
|
|||||||
"@tailwindcss/typography": "^0.5.9",
|
"@tailwindcss/typography": "^0.5.9",
|
||||||
"autoprefixer": "^10.4.14",
|
"autoprefixer": "^10.4.14",
|
||||||
"daisyui": "^3.1.6",
|
"daisyui": "^3.1.6",
|
||||||
|
"mdsvex": "^0.11.0",
|
||||||
"postcss": "^8.4.24",
|
"postcss": "^8.4.24",
|
||||||
"postcss-load-config": "^4.0.1",
|
"postcss-load-config": "^4.0.1",
|
||||||
"svelte": "^4.0.5",
|
"svelte": "^4.0.5",
|
||||||
@ -624,6 +628,12 @@
|
|||||||
"integrity": "sha512-QzhsZ1dMGyJbn/D9V80zp4GIA4J4rfAjCCxc3MP+new0E8dyVdSkR735Lx+n3LIaHNFcjHL5+TbziccuT+fdoQ==",
|
"integrity": "sha512-QzhsZ1dMGyJbn/D9V80zp4GIA4J4rfAjCCxc3MP+new0E8dyVdSkR735Lx+n3LIaHNFcjHL5+TbziccuT+fdoQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/unist": {
|
||||||
|
"version": "2.0.9",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.9.tgz",
|
||||||
|
"integrity": "sha512-zC0iXxAv1C1ERURduJueYzkzZ2zaGyc+P2c95hgkikHPr3z8EdUZOlgEQ5X0DRmwDZn+hekycQnoeiiRVrmilQ==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"node_modules/acorn": {
|
"node_modules/acorn": {
|
||||||
"version": "8.11.2",
|
"version": "8.11.2",
|
||||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz",
|
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz",
|
||||||
@ -1413,12 +1423,38 @@
|
|||||||
"node": ">=12"
|
"node": ">=12"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/marked": {
|
||||||
|
"version": "9.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/marked/-/marked-9.1.5.tgz",
|
||||||
|
"integrity": "sha512-14QG3shv8Kg/xc0Yh6TNkMj90wXH9mmldi5941I2OevfJ/FQAFLEwtwU2/FfgSAOMlWHrEukWSGQf8MiVYNG2A==",
|
||||||
|
"bin": {
|
||||||
|
"marked": "bin/marked.js"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 16"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/mdn-data": {
|
"node_modules/mdn-data": {
|
||||||
"version": "2.0.30",
|
"version": "2.0.30",
|
||||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
|
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
|
||||||
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
|
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/mdsvex": {
|
||||||
|
"version": "0.11.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/mdsvex/-/mdsvex-0.11.0.tgz",
|
||||||
|
"integrity": "sha512-gJF1s0N2nCmdxcKn8HDn0LKrN8poStqAicp6bBcsKFd/zkUBGLP5e7vnxu+g0pjBbDFOscUyI1mtHz+YK2TCDw==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@types/unist": "^2.0.3",
|
||||||
|
"prism-svelte": "^0.4.7",
|
||||||
|
"prismjs": "^1.17.1",
|
||||||
|
"vfile-message": "^2.0.4"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"svelte": ">=3 <5"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/merge2": {
|
"node_modules/merge2": {
|
||||||
"version": "1.4.1",
|
"version": "1.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
|
||||||
@ -1805,6 +1841,21 @@
|
|||||||
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
|
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/prism-svelte": {
|
||||||
|
"version": "0.4.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/prism-svelte/-/prism-svelte-0.4.7.tgz",
|
||||||
|
"integrity": "sha512-yABh19CYbM24V7aS7TuPYRNMqthxwbvx6FF/Rw920YbyBWO3tnyPIqRMgHuSVsLmuHkkBS1Akyof463FVdkeDQ==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
|
"node_modules/prismjs": {
|
||||||
|
"version": "1.29.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
|
||||||
|
"integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
|
||||||
|
"dev": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/queue-microtask": {
|
"node_modules/queue-microtask": {
|
||||||
"version": "1.2.3",
|
"version": "1.2.3",
|
||||||
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
|
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
|
||||||
@ -2350,6 +2401,19 @@
|
|||||||
"node": ">=14.0"
|
"node": ">=14.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/unist-util-stringify-position": {
|
||||||
|
"version": "2.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
|
||||||
|
"integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@types/unist": "^2.0.2"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/unified"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/update-browserslist-db": {
|
"node_modules/update-browserslist-db": {
|
||||||
"version": "1.0.13",
|
"version": "1.0.13",
|
||||||
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
|
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
|
||||||
@ -2386,6 +2450,20 @@
|
|||||||
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
|
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/vfile-message": {
|
||||||
|
"version": "2.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
|
||||||
|
"integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@types/unist": "^2.0.0",
|
||||||
|
"unist-util-stringify-position": "^2.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/unified"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/vite": {
|
"node_modules/vite": {
|
||||||
"version": "4.5.0",
|
"version": "4.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
|
||||||
|
|||||||
@ -16,6 +16,7 @@
|
|||||||
"@tailwindcss/typography": "^0.5.9",
|
"@tailwindcss/typography": "^0.5.9",
|
||||||
"autoprefixer": "^10.4.14",
|
"autoprefixer": "^10.4.14",
|
||||||
"daisyui": "^3.1.6",
|
"daisyui": "^3.1.6",
|
||||||
|
"mdsvex": "^0.11.0",
|
||||||
"postcss": "^8.4.24",
|
"postcss": "^8.4.24",
|
||||||
"postcss-load-config": "^4.0.1",
|
"postcss-load-config": "^4.0.1",
|
||||||
"svelte": "^4.0.5",
|
"svelte": "^4.0.5",
|
||||||
@ -25,5 +26,8 @@
|
|||||||
"typescript": "^5.0.0",
|
"typescript": "^5.0.0",
|
||||||
"vite": "^4.4.2"
|
"vite": "^4.4.2"
|
||||||
},
|
},
|
||||||
"type": "module"
|
"type": "module",
|
||||||
|
"dependencies": {
|
||||||
|
"marked": "^9.1.5"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,28 @@
|
|||||||
/* Write your global styles here, in PostCSS syntax */
|
/* Write your global styles here, in PostCSS syntax */
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
a {
|
||||||
|
@apply text-orange-300;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
@apply text-xl;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
@apply list-disc text-xl;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
@apply text-3xl border-b-2 py-2 font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-300 to-orange-200;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
@apply text-2xl border-b-2 py-2 font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-300 to-orange-200;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
@apply text-2xl bg-white text-right underline py-2 font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-200 to-orange-300 pr-4;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
@apply text-2xl text-right underline py-2 font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-200 to-orange-300 pr-4;
|
||||||
|
}
|
||||||
|
}
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|||||||
17
src/lib/Accueil.svelte.md
Normal file
17
src/lib/Accueil.svelte.md
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<script>
|
||||||
|
import Info from "$lib/Info.svelte"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
# Qu'est-ce que le live-coding ?
|
||||||
|
|
||||||
|
<Info info="Le <i>live coding</i> est une pratique artistique qui fait de l'acte de programmation un geste expressif et performatif. Les <i>live coders</i> considèrent l'interface de programmation comme un instrument de musique. Le <i>live coding</i> est un art au croisement entre synthèse sonore, improvisation musicale et musique algorithmique générative.<br><br> Le <i>live coding</i> est au croisement de plusieurs arts et encourage des approches transdisciplinaires de la création : musique, arts visuels, informatique, jeux vidéos, danse, etc. Plus largement, le <i>live coding</i> est un domaine critique qui encourage les artistes à repenser leur rapport à l'informatique. Le <i>live coding</i> est traversé par la culture <i>hacker</i>, par la philosophie du logiciel libre et <i>open source</i>. Il souhaite également développer une nouvelle forme d'expressivité au sein des arts, en considérant l'ordinateur comme une interface pour la <i>programmation exploratoire</i> ou <i>programmation conversationnelle</i>." markdown=false />
|
||||||
|
|
||||||
|
Historiquement, le _live coding_ est un type de création porté par le collectif [TOPLAP](https://toplap.org). Il existe de nombreux groupes en Europe et dans le monde qui promeuvent ce type de pratiques : [TOPLAP Barcelona](https://toplap.cat/en/home), [Livecode NYC](https://livecode.nyc/), parmi d'autres. La pratique du _live coding_ s'est popularisée au travers du [Manifeste TOPLAP]() et des [Algoraves](https://algorave.com) (_algorithmic rave parties_). Il est pourtant délicat de limiter la pratique à ces seuls exemples.
|
||||||
|
|
||||||
|
# À propos de ce site
|
||||||
|
|
||||||
|
Ce site est une collection de ressources. Il est conçu pour combler le vide qui existe aujourd'hui dans la communauté francophone du _live coding_. Il peut être édité et modifié par tout le monde à [cette adresse](https://github.com/Bubobubobubobubo/livecodingfr). Rajoutez vos logiciels, vos coordonnées ou toute information qui vous semble importante.
|
||||||
|
|
||||||
|
# Comment contribuer ?
|
||||||
|
|
||||||
|
Le site est hébergé sur [GitHub](https://github.com/Bubobubobubobubo/livecodingfr). Pour ajouter une information au site, veuillez créer une [Pull Request](https://docs.github.com/fr/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request). Vous pouvez aussi contacter l'un des membres qui se chargera de transmettre l'information.
|
||||||
28
src/lib/Calendar.svelte
Normal file
28
src/lib/Calendar.svelte
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let date: string;
|
||||||
|
export let title: string;
|
||||||
|
export let description: string;
|
||||||
|
|
||||||
|
let realDate = date.split(" ");
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="flex flex-row">
|
||||||
|
<div
|
||||||
|
class="w-42 block rounded-t overflow-hidden bg-white text-center min-w-max"
|
||||||
|
>
|
||||||
|
<div class="bg-red-800 text-white py-1">{realDate[1]}</div>
|
||||||
|
<div class="pt-1 border-l border-r">
|
||||||
|
<span class="text-4xl font-bold">{realDate[0]}</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="pb-2 px-2 border-l border-r border-b rounded-b flex justify-between"
|
||||||
|
>
|
||||||
|
<span class="text-xs font-bold">{realDate[2]}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Info -->
|
||||||
|
<div class="block">
|
||||||
|
<h3 class="pl-4 flex">{title}</h3>
|
||||||
|
<p class="pl-4">{description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
15
src/lib/Contact.svelte.md
Normal file
15
src/lib/Contact.svelte.md
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<script>
|
||||||
|
import Info from "$lib/Info.svelte"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
# Contact
|
||||||
|
|
||||||
|
<Info info="<b>Livecoding.fr</b> n'est pas ni un collectif ni une organisation. L'objectif de ce site est uniquement de centraliser l'information et de donner plus de visibilité à la scène <i>live coding</i> francophone." markdown=false />
|
||||||
|
|
||||||
|
## Contacter un artiste
|
||||||
|
|
||||||
|
- Consulter le site web sur la page **Membres**.
|
||||||
|
|
||||||
|
## Contacter un collectif
|
||||||
|
|
||||||
|
- Consulter le site web sur la page **Réseaux**.
|
||||||
37
src/lib/Evenements.svelte.md
Normal file
37
src/lib/Evenements.svelte.md
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
<script>
|
||||||
|
import Calendar from "$lib/Calendar.svelte";
|
||||||
|
import Info from "$lib/Info.svelte";
|
||||||
|
|
||||||
|
let avenir = [
|
||||||
|
{
|
||||||
|
date: "1 jan 2023",
|
||||||
|
description: "Description de l'évènement",
|
||||||
|
title: "Template pour un évènement",
|
||||||
|
}
|
||||||
|
]
|
||||||
|
let passe = [
|
||||||
|
{
|
||||||
|
date: "1 jan 2023",
|
||||||
|
description: "Description de l'évènement",
|
||||||
|
title: "Template pour un évènement",
|
||||||
|
}
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
# Évènements
|
||||||
|
|
||||||
|
<Info info="Cette page recense tout les évènements dédiés au <i>live coding</i> organisés par la scène francophone. Ajoutez vos évènements. N'oubliez pas de fournir un lien si possible. Renseignez les évènements pour archivage !" markdown=false />
|
||||||
|
|
||||||
|
## À venir
|
||||||
|
|
||||||
|
<!-- Format attendu : 3 Fev 2023 -->
|
||||||
|
|
||||||
|
{#each avenir as {title, description, date}, i}
|
||||||
|
<Calendar date={date} description={description} title={title} />
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
## Passés
|
||||||
|
|
||||||
|
{#each avenir as {title, description, date}, i}
|
||||||
|
<Calendar date={date} description={description} title={title} />
|
||||||
|
{/each}
|
||||||
@ -1,58 +0,0 @@
|
|||||||
<footer class="footer p-10 bg-neutral text-neutral-content">
|
|
||||||
<aside>
|
|
||||||
<svg
|
|
||||||
width="50"
|
|
||||||
height="50"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill-rule="evenodd"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
class="fill-current"
|
|
||||||
><path
|
|
||||||
d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
<p>Raphaël Maurice Forment<br /></p>
|
|
||||||
</aside>
|
|
||||||
<nav>
|
|
||||||
<header class="footer-title">Social</header>
|
|
||||||
<div class="grid grid-flow-col gap-4">
|
|
||||||
<a
|
|
||||||
><svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
class="fill-current"
|
|
||||||
><path
|
|
||||||
d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
|
|
||||||
/></svg
|
|
||||||
></a
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
><svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
class="fill-current"
|
|
||||||
><path
|
|
||||||
d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"
|
|
||||||
/></svg
|
|
||||||
></a
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
><svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
class="fill-current"
|
|
||||||
><path
|
|
||||||
d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"
|
|
||||||
/></svg
|
|
||||||
></a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</footer>
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
<div class="navbar bg-base-100">
|
|
||||||
<div class="flex-1">
|
|
||||||
<a class="btn btn-ghost text-xl uppercase">livecoding.fr</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex-none">
|
|
||||||
<ul class="menu menu-horizontal px-1">
|
|
||||||
<li>
|
|
||||||
<details>
|
|
||||||
<summary> Logiciels </summary>
|
|
||||||
<ul class="p-2 bg-base-100">
|
|
||||||
<li><a>Lien 1</a></li>
|
|
||||||
<li><a>Lien 2</a></li>
|
|
||||||
</ul>
|
|
||||||
</details>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<details>
|
|
||||||
<summary> Collectifs </summary>
|
|
||||||
<ul class="p-2 bg-base-100">
|
|
||||||
<li><a>Lien 1</a></li>
|
|
||||||
<li><a>Lien 2</a></li>
|
|
||||||
</ul>
|
|
||||||
</details>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
<hero>
|
|
||||||
<div
|
|
||||||
class="hero min-h-screen bg-base-200 background-animate bg-gradient-to-r
|
|
||||||
from-pink-500
|
|
||||||
via-red-500
|
|
||||||
to-yellow-500
|
|
||||||
background-animate
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="hero-content text-center">
|
|
||||||
<div class="max-w-md">
|
|
||||||
<h1 class="text-6xl text-center text-white font-bold uppercase">
|
|
||||||
Livecoding.fr
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</hero>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.background-animate {
|
|
||||||
background-size: 400%;
|
|
||||||
|
|
||||||
-webkit-animation: AnimationName 9s ease infinite;
|
|
||||||
-moz-animation: AnimationName 9s ease infinite;
|
|
||||||
animation: AnimationName 9s ease infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes AnimationName {
|
|
||||||
0%,
|
|
||||||
100% {
|
|
||||||
background-position: 0% 50%;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
background-position: 100% 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
31
src/lib/Info.svelte
Normal file
31
src/lib/Info.svelte
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
import { marked } from "marked";
|
||||||
|
export let info: string;
|
||||||
|
export let markdown: boolean;
|
||||||
|
let htmlContent = "";
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
if (markdown) {
|
||||||
|
htmlContent = marked(info);
|
||||||
|
} else {
|
||||||
|
htmlContent = info;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="alert">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
class="stroke-current shrink-0 w-6 h-6"
|
||||||
|
><path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||||
|
/></svg
|
||||||
|
>
|
||||||
|
<span class="text-2xl">{@html info}</span>
|
||||||
|
</div>
|
||||||
42
src/lib/Membres.svelte.md
Normal file
42
src/lib/Membres.svelte.md
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
<script>
|
||||||
|
import Portrait from "$lib/Portrait.svelte";
|
||||||
|
let members = [
|
||||||
|
{
|
||||||
|
name: "Raphaël Forment",
|
||||||
|
description: "BuboBubo",
|
||||||
|
image: "https://avatars.githubusercontent.com/u/45191785?s=400&u=3ee9062082ce04b6f08f811e657797fe9528d106&v=4",
|
||||||
|
site: "https://raphaelforment.fr",
|
||||||
|
mail: ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Rémi Georges",
|
||||||
|
description: "Ralt144Mi",
|
||||||
|
image: "https://avatars.githubusercontent.com/u/75539795?v=4",
|
||||||
|
site: "https://remigeorges.fr/",
|
||||||
|
mail: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Agathe Herrou",
|
||||||
|
description: "th4",
|
||||||
|
image : "https://club.tidalcycles.org/user_avatar/club.tidalcycles.org/th4/144/505_2.png",
|
||||||
|
site: "https://th4music.net",
|
||||||
|
mail: "",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: "Raphaël Bastide",
|
||||||
|
description: "",
|
||||||
|
image: "https://radicalnetworks.org/archives/2018/participants/raphael-bastide/raphaelbastide.jpg",
|
||||||
|
site: "https://raphaelbastide.com",
|
||||||
|
mail: "",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
# Membres
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-3 grid-rows-3 md:grid-rows-2 gap-4 h-5/6 w-4/5 mx-auto">
|
||||||
|
{#each members as {name, description, image, site, mail}, i}
|
||||||
|
<Portrait name={name} description={description} image={image} site={site} mail={mail}/>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
49
src/lib/Outils.svelte.md
Normal file
49
src/lib/Outils.svelte.md
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
<script>
|
||||||
|
import SoftwareCard from "$lib/SoftwareCard.svelte"
|
||||||
|
|
||||||
|
let softwares = [
|
||||||
|
{
|
||||||
|
name:"Sardine",
|
||||||
|
creator:"Raphaël Forment",
|
||||||
|
description:"Sardine est un logiciel libre et open source pour Python 3.10+. Sardine transforme Python en un instrument de musique. C'est un framework pour live coder et contrôler du matérial audio depuis Python. Sardine peut se synchroniser à d'autres logiciels ou instances du même logiciel.", image:"https://sardine.raphaelforment.fr/sardine_logo.svg#center",
|
||||||
|
link:"https://sardine.raphaelforment.fr"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name:"Été",
|
||||||
|
creator:"Raphaël Bastide",
|
||||||
|
description:"Été mélange live coding (écriture musicale temps réel au travers du code) et percussions. Le programme considère le clavier comme un instrument percussif. Le musicien peut écrire des instructions algorithmiques et des instructions percussives très précises au sein du même environnement de programmation. Été est une expérimentation qui essaie de lier dans un même programme le temps dédié à la composition algorithmique et celui dédié à l'improvisation spontanée.",
|
||||||
|
image:"https://gitlab.com/uploads/-/system/project/avatar/35391245/Screenshot_2023-09-19_16-09-44.jpg",
|
||||||
|
link:"https://raphaelbastide.com/ete/"
|
||||||
|
} ,
|
||||||
|
{
|
||||||
|
name:"Topos",
|
||||||
|
creator:"Raphaël Forment",
|
||||||
|
description:"Topos est un séquenceur algorithmique expérimental dans le web sequencer programmé par BuboBubo (Raphaël Forment) et Amiika (Miika Alonen). Il est écrit en TypeScript, avec Vite. Ce projet est basé sur le Monome Teletype de Brian Crabtree et Kelli Cain. Nous espérons respecter le même esprit de partage et d'expérimentation que les concepteurs originels ! Comment rendre le Teletype plus accessible tout en étendant ses capacités sur le web ?", image:"https://raphaelforment.fr/img/inline_annotation.png",
|
||||||
|
link:"https://topos.raphaelforment.fr"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "OSCII",
|
||||||
|
creator: "Adel Faure",
|
||||||
|
description: "OSCII est un logiciel pour dessiner et live coder des visuels en text-mode. OSCII produit également du son grâce à WebAudio.",
|
||||||
|
image: "https://i1.sndcdn.com/avatars-1Kjtq0wbLSNSpNQH-AqRXfQ-t500x500.jpg",
|
||||||
|
link: "https://gitlab.com/adelfaure/oscii",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name:"Cascade",
|
||||||
|
creator:"Raphaël Bastide",
|
||||||
|
description:"Cascade est un environnement de live-coding pour le navigateur web. Il transforme les règles du langage CSS en sons !",
|
||||||
|
image:"https://raphaelbastide.com/cascade/website/img/poster.svg",
|
||||||
|
link:"https://raphaelbastide.com/cascade/"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
# Outils
|
||||||
|
|
||||||
|
Si vous souhaitez consulter une liste fréquemment mise à jour de logiciels et d'interfaces pour le _live coding_, consulter [Awesome LiveCoding](https://github.com/toplap/awesome-livecoding). Pour élargir un petit peu, consultez également [Awesome Music](https://github.com/noteflakes/awesome-music).
|
||||||
|
|
||||||
|
{#each softwares as {name, creator, description, image, link}}
|
||||||
|
<SoftwareCard name={name} creator={creator} description={description} image={image} link={link} />
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
Éditez le site pour rajouter votre outil ! **Toutes les contributions sont acceptées !**
|
||||||
27
src/lib/Portrait.svelte
Normal file
27
src/lib/Portrait.svelte
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let image: string;
|
||||||
|
export let name: string;
|
||||||
|
export let mail: string;
|
||||||
|
export let site: string;
|
||||||
|
export let description: string;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="mx-2 w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700"
|
||||||
|
>
|
||||||
|
<div class="flex justify-end px-4 pt-4" />
|
||||||
|
<div class="flex flex-col items-center pb-10">
|
||||||
|
<img
|
||||||
|
class="w-24 h-24 mb-3 rounded-full shadow-lg"
|
||||||
|
src={image}
|
||||||
|
alt="Portrait"
|
||||||
|
/>
|
||||||
|
<h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">
|
||||||
|
{name}
|
||||||
|
</h5>
|
||||||
|
<span class="text-sm text-gray-500 dark:text-gray-400">{description}</span>
|
||||||
|
<div class="flex mt-4 space-x-3 md:mt-6">
|
||||||
|
<a href={site} class="btn btn-tertiary">Site</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
51
src/lib/Press.svelte
Normal file
51
src/lib/Press.svelte
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let title: string;
|
||||||
|
export let description: string;
|
||||||
|
export let image: string;
|
||||||
|
export let link: string;
|
||||||
|
|
||||||
|
const truncateString = (title: string, length: number) => {
|
||||||
|
return title.length > length ? title.slice(0, length - 3) + "..." : title;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="max-w-sm w-80 h-fit bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700"
|
||||||
|
>
|
||||||
|
<a href="#">
|
||||||
|
<img class="rounded-t-lg h-48 w-80 object-cover" src={image} alt="" />
|
||||||
|
</a>
|
||||||
|
<div class="p-5">
|
||||||
|
<a href="#">
|
||||||
|
<h5
|
||||||
|
class="mb-2 text-lg font-bold tracking-tight text-gray-900 dark:text-white"
|
||||||
|
>
|
||||||
|
{truncateString(title, 50)}
|
||||||
|
</h5>
|
||||||
|
</a>
|
||||||
|
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href={link}
|
||||||
|
class="inline-flex items-center btn btn-primary text-sm font-medium text-center"
|
||||||
|
>
|
||||||
|
En savoir plus
|
||||||
|
<svg
|
||||||
|
class="w-3.5 h-3.5 ml-2"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns={link}
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 14 10"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M1 5h12m0 0L9 1m4 4L9 9"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
45
src/lib/Presse.svelte.md
Normal file
45
src/lib/Presse.svelte.md
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
<script>
|
||||||
|
import Press from "$lib/Press.svelte";
|
||||||
|
|
||||||
|
let general_press = [
|
||||||
|
{
|
||||||
|
title: "Aux « algoraves », on danse sur une musique codée en direct",
|
||||||
|
picture: "https://img.lemde.fr/2019/04/12/0/0/5122/3467/800/0/75/0/f22d969_x_FC8S1alEp4TYxEfX9-vnhW.jpg",
|
||||||
|
link: "https://www.lemonde.fr/pixels/article/2019/04/13/aux-algoraves-on-danse-sur-une-musique-codee-en-direct_5449894_4408996.html",
|
||||||
|
author: "Bruno Lus (Le Monde)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "OK Computer: Live coding creates music for dancing or dreaming in France's biggest algorave",
|
||||||
|
picture: "https://static.euronews.com/articles/stories/07/52/54/80/1200x675_cmsv2_eb8921b9-1953-5db0-853f-6479b45a22c6-7525480.jpg",
|
||||||
|
link: "https://www.euronews.com/culture/2023/05/03/ok-computer-live-coding-creates-music-for-dancing-or-dreaming-in-frances-biggest-algorave",
|
||||||
|
author: "Gaël Camba (Euronews)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Live coding : de la musique codée en direct pour danser ou rêver",
|
||||||
|
picture: "https://static.euronews.com/articles/stories/07/52/54/80/1200x675_cmsv2_2c54c051-fb9c-5807-8429-da05ee6ef77d-7525480.jpg",
|
||||||
|
link: "https://fr.euronews.com/culture/2023/04/26/live-coding-de-la-musique-codee-en-direct-pour-danser-ou-rever#:~:text=Live%20coding%20:%20de%20la%20musique%20cod%C3%A9e%20en%20direct%20pour%20danser%20ou%20r%C3%AAver,-Francesco%20Corvi%20se&text=Entre%20technique%20exp%C3%A9rimentale%20et%20composition,en%20programmant%20du%20code%20informatique.",
|
||||||
|
author: "Gaël Camba (Euronews)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Culture numérique : la Micro-folie sillonnera le territoire Barséquanais",
|
||||||
|
picture: "",
|
||||||
|
link: "https://www.lest-eclair.fr/id531959/article/2023-10-20/la-micro-folie-sillonnera-le-territoire-barsequanais",
|
||||||
|
author: "??? (L'Est Éclair)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Qu’est-ce que l’algorave, ce nouveau clubbing où ...",
|
||||||
|
picture: "https://trxprds3.s3.amazonaws.com/uploads/2020/03/by-dan-hett.jpg",
|
||||||
|
link: "https://www.traxmag.com/algorave-live-coding-dancefloor/",
|
||||||
|
author: "Loïc Hecht (Trax Magazine)",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
# Presse
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-3 grid-rows-3 md:grid-rows-2 gap-8 mx-auto gap-4"> {#each general_press as {title, picture, link, author}, i}
|
||||||
|
<Press title={title} description={author} image={picture} link={link} />
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
12
src/lib/Reseaux.svelte.md
Normal file
12
src/lib/Reseaux.svelte.md
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
import SoftwareCard from "$lib/SoftwareCard.svelte";
|
||||||
|
import Info from "$lib/Info.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
# Réseaux
|
||||||
|
|
||||||
|
<Info info="Il existe plusieurs collectifs et groupes qui promeuvent la pratique du <i>live coding</i>. Cette page est un recensement des groupes connus. Si vous êtes actifs, ajoutez quelque chose ici." markdown=false />
|
||||||
|
|
||||||
|
<SoftwareCard name="Cookie Collective" creator="Paris" description=" Le Cookie Collective rassemble des artistes impliqués dans la création numérique temps réel.Cela couvre le domaine du jeu vidéo, des installations artistiques, du mapping vidéo, la demoscene, les algoraves, etc. Nous organisons des jams au cours desquelles les artistes réalisent des créations sonores ou visuelles devant un public. Nous publions des fanzines qui mettent l'accent sur nos manières de créer. Nous accueillons tout ceux qui partagent un intérêt commun pour la création temps réel. Contactez nous ou rejoignez le serveur Discord." image="https://www.cookie.paris/image.jpg" link="https://cookie.paris" />
|
||||||
|
|
||||||
|
<SoftwareCard name="Digital Audio Community" creator="Lyon" description="Creative Code Lyon est une communauté lyonnaise dédiée à la programmation créative. En son sein existe un petit groupe, nommé le DAC (Digital Audio Community). Il se réunit toutes les deux semaines au Laboratoire Ouvert Lyonnais (LOL) pour discuter de synthèse sonore, de live coding, de création sonore. Pour nous contacter, rejoignez le serveur Discord !" image="https://scontent-cdg4-3.xx.fbcdn.net/v/t39.30808-6/325617656_5771358802943616_8147684973704857965_n.jpg?_nc_cat=106&ccb=1-7&_nc_sid=5f2048&_nc_ohc=Cujn9ocml5QAX8S0sxA&_nc_ht=scontent-cdg4-3.xx&oh=00_AfC1nrCZnzRiCGGCfhJnH9QciEYvNRbhfsS5T0mKqzyRdQ&oe=65496DE6" link="https://discord.gg/B2e5a3Y3uk" />
|
||||||
5
src/lib/Ressources.svelte.md
Normal file
5
src/lib/Ressources.svelte.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
# Ressources
|
||||||
|
|
||||||
|
## Sites internet
|
||||||
|
|
||||||
|
- [Labomedia](https://ressources.labomedia.org/live_coding)
|
||||||
21
src/lib/SoftwareCard.svelte
Normal file
21
src/lib/SoftwareCard.svelte
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let name: string;
|
||||||
|
export let creator: string;
|
||||||
|
export let link: string;
|
||||||
|
export let image: string;
|
||||||
|
export let description: string;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="card card-side bg-base-100 shadow-xl">
|
||||||
|
<figure class="object-cover h-80 w-1/2">
|
||||||
|
<img src={image} alt={description} class="object-cover" />
|
||||||
|
</figure>
|
||||||
|
<div class="card-body">
|
||||||
|
<h2 class="card-title pt-0 mt-0">{name}</h2>
|
||||||
|
<h3>{creator}</h3>
|
||||||
|
<p class="indent-0">{description}</p>
|
||||||
|
<div class="card-actions justify-end">
|
||||||
|
<a class="btn btn-primary" href={link}>Lien</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -1,11 +1,172 @@
|
|||||||
<script>
|
<script lang="ts">
|
||||||
import Footer from "$lib/Footer.svelte";
|
import Accueil from "$lib/Accueil.svelte.md";
|
||||||
import Header from "$lib/Header.svelte";
|
import Evenements from "$lib/Evenements.svelte.md";
|
||||||
import HeroAccueil from "$lib/HeroAccueil.svelte";
|
import Contact from "$lib/Contact.svelte.md";
|
||||||
|
import Presse from "$lib/Presse.svelte.md";
|
||||||
|
import Membres from "$lib/Membres.svelte.md";
|
||||||
|
import Outils from "$lib/Outils.svelte.md";
|
||||||
|
import Reseaux from "$lib/Reseaux.svelte.md";
|
||||||
|
import Ressources from "$lib/Ressources.svelte.md";
|
||||||
|
const pages = {
|
||||||
|
accueil: Accueil,
|
||||||
|
evenements: Evenements,
|
||||||
|
membres: Membres,
|
||||||
|
outils: Outils,
|
||||||
|
réseaux: Reseaux,
|
||||||
|
presse: Presse,
|
||||||
|
ressources: Ressources,
|
||||||
|
contact: Contact,
|
||||||
|
};
|
||||||
|
let active_page = pages["accueil"];
|
||||||
|
|
||||||
|
let showMenu = false;
|
||||||
|
|
||||||
|
function toggleNavbar() {
|
||||||
|
showMenu = !showMenu;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Changes the active page based on the provided page name.
|
||||||
|
*
|
||||||
|
* @param {string} pageName - The name of the page to activate.
|
||||||
|
*/
|
||||||
|
function changePage(pageName: string): void {
|
||||||
|
const pageKey = pageName.toLowerCase(); // Convert to lowercase to match the keys in the pages object.
|
||||||
|
if (pages[pageKey]) {
|
||||||
|
active_page = pages[pageKey];
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="bg-base-300">
|
||||||
|
<nav class="pl-8 py-2 md:flex md:justify-between md:items-center pr-8">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<a
|
||||||
|
on:click={() => changePage("Accueil")}
|
||||||
|
class="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-300 to-orange-200 uppercase"
|
||||||
|
>livecoding.fr</a
|
||||||
|
>
|
||||||
|
<!-- Mobile menu button -->
|
||||||
|
<div on:click={toggleNavbar} class="flex md:hidden">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="text-gray-100 hover:text-gray-400 focus:outline-none focus:text-gray-400"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
class="w-6 h-6"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||||
|
<div
|
||||||
|
class="flex-col mt-8 space-y-4 md:flex md:space-y-0 md:flex-row md:items-center md:space-x-10 md:mt-0 {showMenu
|
||||||
|
? 'flex'
|
||||||
|
: 'hidden'}"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
on:click={() => changePage("Evenements")}
|
||||||
|
class="text-gray-100 hover:text-orange-300 flex md:hidden"
|
||||||
|
>Évènements</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
on:click={() => changePage("Membres")}
|
||||||
|
class="text-gray-100 hover:text-orange-300 flex md:hidden">Membres</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
on:click={() => changePage("Outils")}
|
||||||
|
class="text-gray-100 hover:text-orange-300 flex md:hidden">Outils</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
on:click={() => changePage("Réseaux")}
|
||||||
|
class="text-gray-100 hover:text-orange-300 flex md:hidden">Réseaux</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
on:click={() => changePage("Ressources")}
|
||||||
|
class="text-gray-100 hover:text-orange-300 flex md:hidden"
|
||||||
|
>Ressources</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
on:click={() => changePage("Presse")}
|
||||||
|
class="text-gray-100 hover:text-orange-300 flex md:hidden">Presse</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
on:click={() => changePage("Contact")}
|
||||||
|
class="text-gray-100 hover:text-orange-300 flex md:hidden">Contact</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<Header />
|
<div class="drawer lg:drawer-open">
|
||||||
<HeroAccueil />
|
<input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
|
||||||
<Footer />
|
<div class="drawer-content space-y-4 flex flex-col px-16 py-8">
|
||||||
|
<svelte:component this={active_page} />
|
||||||
|
</div>
|
||||||
|
<div class="drawer-side">
|
||||||
|
<label
|
||||||
|
for="my-drawer-2"
|
||||||
|
aria-label="close sidebar"
|
||||||
|
class="drawer-overlay"
|
||||||
|
/>
|
||||||
|
<ul class="menu p-4 w-40 min-h-full bg-base-300 text-base-content">
|
||||||
|
<li class="text-xl">
|
||||||
|
<a class="text-white" on:click={() => changePage("Evenements")}
|
||||||
|
>Évènements</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="text-xl">
|
||||||
|
<a class="text-white" on:click={() => changePage("Membres")}
|
||||||
|
>Membres</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="text-xl">
|
||||||
|
<a class="text-white" on:click={() => changePage("Outils")}>Outils</a>
|
||||||
|
</li>
|
||||||
|
<li class="text-xl">
|
||||||
|
<a class="text-white" on:click={() => changePage("Réseaux")}
|
||||||
|
>Réseaux</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="text-xl">
|
||||||
|
<a class="text-white" on:click={() => changePage("Ressources")}
|
||||||
|
>Ressources</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="text-xl">
|
||||||
|
<a class="text-white" on:click={() => changePage("Presse")}>Presse</a>
|
||||||
|
</li>
|
||||||
|
<li class="text-xl">
|
||||||
|
<a class="text-white" on:click={() => changePage("Contact")}
|
||||||
|
>Contact</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="footer ml-0 pl-0 pb-4 pt-4 bg-base-300 justify-between pr-16">
|
||||||
|
<p class="indent-4 text-base">Raphaël Forment</p>
|
||||||
|
<p>
|
||||||
|
<a class="pl-4" href="https://github.com/Bubobubobubobubo/livecodingfr"
|
||||||
|
>GitHub</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@ -1,11 +1,15 @@
|
|||||||
import adapter from '@sveltejs/adapter-static';
|
import { mdsvex } from "mdsvex";
|
||||||
|
import mdsvexConfig from "./mdsvex.config.js";
|
||||||
|
import adapter from "@sveltejs/adapter-static";
|
||||||
import { vitePreprocess } from "@sveltejs/kit/vite";
|
import { vitePreprocess } from "@sveltejs/kit/vite";
|
||||||
|
|
||||||
/** @type {import('@sveltejs/kit').Config} */
|
/** @type {import('@sveltejs/kit').Config} */
|
||||||
const config = {
|
const config = {
|
||||||
|
extensions: [".svelte", ...mdsvexConfig.extensions],
|
||||||
|
|
||||||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||||
// for more information about preprocessors
|
// for more information about preprocessors
|
||||||
preprocess: [vitePreprocess({})],
|
preprocess: [vitePreprocess({}), mdsvex(mdsvexConfig)],
|
||||||
|
|
||||||
kit: {
|
kit: {
|
||||||
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
||||||
|
|||||||
Reference in New Issue
Block a user