studio-variable/designtopack
4
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

test

Browse source
This commit is contained in:
isUnknown 2024-10-16 17:32:15 +02:00
parent 4b6540dfcd
commit 965c015c2c
22 changed files with 396 additions and 299 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/21361147_au-commencement-du-college-chloe-avait-donc-fait-la-connaissance-dun-garcon.-il-etait-plus-vieux.pdf
View file

Binary file not shown.

9
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/21361147_au-commencement-du-college-chloe-avait-donc-fait-la-connaissance-dun-garcon.-il-etait-plus-vieux.pdf.txt
View file

@ -1,9 +0,0 @@
Date: 2024-10-16 01:15
----
Uuid: fGa7zaC6S5zprMyo
----
Template: document

BIN
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/4034442471_bleu-divague.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 48 KiB

17
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/4034442471_bleu-divague.jpg.txt Normal file
View file

@ -0,0 +1,17 @@
Date: 2024-10-16 02:10
----
Description:
----
Tags: DA globale
----
Uuid: BvOqspCnL024Ar9u
----
Template: image

BIN
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/black-1984277_1280.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 232 KiB

17
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/black-1984277_1280.jpg.txt Normal file
View file

@ -0,0 +1,17 @@
Description: description
----
Tags:
----
Sort: 7
----
Uuid: zIZTny7xOE28rckL
----
Template: image

10
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/client-brief.txt
View file

@ -6,7 +6,7 @@ Stepname: clientBrief
---- ----
Pdf: - file://fGa7zaC6S5zprMyo Pdf:
---- ----
@ -14,7 +14,13 @@ Description:
---- ----
Moodboard: Moodboard:
- file://YV7aUYle8hcLrzb6
- file://zIZTny7xOE28rckL
- file://Z5m6jEomcOt9bJqR
- file://C2zFxRDOmD5PeXD6
- file://BvOqspCnL024Ar9u
---- ----

BIN
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/perfume-144546_1280.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 213 KiB

17
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/perfume-144546_1280.jpg.txt Normal file
View file

@ -0,0 +1,17 @@
Description:
----
Tags:
----
Sort: 8
----
Uuid: Z5m6jEomcOt9bJqR
----
Template: image

BIN
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/perfume-2643349_1280.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 217 KiB

17
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/perfume-2643349_1280.jpg.txt Normal file
View file

@ -0,0 +1,17 @@
Description:
----
Tags:
----
Sort: 10
----
Uuid: C2zFxRDOmD5PeXD6
----
Template: image

BIN
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/perfume-4718455_1280.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 116 KiB

17
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/perfume-4718455_1280.jpg.txt Normal file
View file

@ -0,0 +1,17 @@
Description:
----
Tags:
----
Sort: 12
----
Uuid: YV7aUYle8hcLrzb6
----
Template: image

11
public/site/models/project.php
View file

@ -5,12 +5,21 @@ class ProjectPage extends Page {
$steps = []; $steps = [];
foreach ($this->children() as $child) { foreach ($this->children() as $child) {
$files = [];
if ($child->stepName() == 'clientBrief') {
foreach ($child->moodboard()->toFiles() as $file) {
$files[] = getFileData($file);
}
}
$steps[] = [ $steps[] = [
'text' => $child->title()->value(), 'text' => $child->title()->value(),
'value' => $child->stepName()->value(), 'value' => $child->stepName()->value(),
'index' => $child->stepIndex()->value(), 'index' => $child->stepIndex()->value(),
'modified' => $child->modified('Y-MM-dd'), 'modified' => $child->modified('Y-MM-dd'),
'uri' => $child->uri() 'uri' => $child->uri(),
'files' => $files
]; ];
} }

16
public/site/plugins/helpers/index.php Normal file
View file

@ -0,0 +1,16 @@
<?php
function getFileData($file) {
$data = [
'url' => $file->url(),
'uuid' => (string) $file->uuid(),
'name' => $file->filename(),
];
if ($file->description()->exists()) {
$data['description'] = $file->description();
$data['tags'] = $file->tags()->split();
};
return $data;
}

466
public/site/plugins/kql/README.md
View file

@ -16,21 +16,21 @@ Given a POST request to: `/api/query`
```json ```json
{ {
"query": "page('photography').children", "query": "page('photography').children",
"select": { "select": {
"url": true, "url": true,
"title": true, "title": true,
"text": "page.text.markdown", "text": "page.text.markdown",
"images": { "images": {
"query": "page.images", "query": "page.moodboard",
"select": { "select": {
"url": true "url": true
} }
}
},
"pagination": {
"limit": 10
} }
},
"pagination": {
"limit": 10
}
} }
``` ```
@ -39,48 +39,48 @@ Given a POST request to: `/api/query`
```json ```json
{ {
"code": 200, "code": 200,
"result": { "result": {
"data": [ "data": [
{ {
"url": "https://example.com/photography/trees", "url": "https://example.com/photography/trees",
"title": "Trees", "title": "Trees",
"text": "Lorem <strong>ipsum</strong> …", "text": "Lorem <strong>ipsum</strong> …",
"images": [ "images": [
{ {
"url": "https://example.com/media/pages/photography/trees/1353177920-1579007734/cheesy-autumn.jpg" "url": "https://example.com/media/pages/photography/trees/1353177920-1579007734/cheesy-autumn.jpg"
}, },
{ {
"url": "https://example.com/media/pages/photography/trees/1940579124-1579007734/last-tree-standing.jpg" "url": "https://example.com/media/pages/photography/trees/1940579124-1579007734/last-tree-standing.jpg"
}, },
{ {
"url": "https://example.com/media/pages/photography/trees/3506294441-1579007734/monster-trees-in-the-fog.jpg" "url": "https://example.com/media/pages/photography/trees/3506294441-1579007734/monster-trees-in-the-fog.jpg"
} }
] ]
}, },
{ {
"url": "https://example.com/photography/sky", "url": "https://example.com/photography/sky",
"title": "Sky", "title": "Sky",
"text": "<h1>Dolor sit amet</h1> …", "text": "<h1>Dolor sit amet</h1> …",
"images": [ "images": [
{ {
"url": "https://example.com/media/pages/photography/sky/183363500-1579007734/blood-moon.jpg" "url": "https://example.com/media/pages/photography/sky/183363500-1579007734/blood-moon.jpg"
}, },
{ {
"url": "https://example.com/media/pages/photography/sky/3904851178-1579007734/coconut-milkyway.jpg" "url": "https://example.com/media/pages/photography/sky/3904851178-1579007734/coconut-milkyway.jpg"
} }
] ]
} }
], ],
"pagination": { "pagination": {
"page": 1, "page": 1,
"pages": 1, "pages": 1,
"offset": 0, "offset": 0,
"limit": 10, "limit": 10,
"total": 2 "total": 2
} }
}, },
"status": "ok" "status": "ok"
} }
``` ```
@ -124,23 +124,24 @@ const username = "apiuser";
const password = "strong-secret-api-password"; const password = "strong-secret-api-password";
const headers = { const headers = {
Authorization: "Basic " + Buffer.from(`${username}:${password}`).toString("base64"), Authorization:
"Content-Type": "application/json", "Basic " + Buffer.from(`${username}:${password}`).toString("base64"),
Accept: "application/json", "Content-Type": "application/json",
Accept: "application/json",
}; };
const response = await fetch(api, { const response = await fetch(api, {
method: "post", method: "post",
body: JSON.stringify({ body: JSON.stringify({
query: "page('notes').children", query: "page('notes').children",
select: { select: {
title: true, title: true,
text: "page.text.kirbytext", text: "page.text.kirbytext",
slug: true, slug: true,
date: "page.date.toDate('d.m.Y')", date: "page.date.toDate('d.m.Y')",
}, },
}), }),
headers, headers,
}); });
console.log(await response.json()); console.log(await response.json());
@ -158,11 +159,11 @@ When you don't pass the select option, Kirby will try to come up with the most u
```js ```js
const response = await fetch(api, { const response = await fetch(api, {
method: "post", method: "post",
body: JSON.stringify({ body: JSON.stringify({
query: "site.title", query: "site.title",
}), }),
headers, headers,
}); });
console.log(await response.json()); console.log(await response.json());
@ -185,11 +186,11 @@ console.log(await response.json());
```js ```js
const response = await fetch(api, { const response = await fetch(api, {
method: "post", method: "post",
body: JSON.stringify({ body: JSON.stringify({
query: "site.children", query: "site.children",
}), }),
headers, headers,
}); });
console.log(await response.json()); console.log(await response.json());
@ -220,11 +221,11 @@ Queries can even execute field methods.
```js ```js
const response = await fetch(api, { const response = await fetch(api, {
method: "post", method: "post",
body: JSON.stringify({ body: JSON.stringify({
query: "site.title.upper", query: "site.title.upper",
}), }),
headers, headers,
}); });
console.log(await response.json()); console.log(await response.json());
@ -253,12 +254,12 @@ To include a property or field in your results, list them as an array. Check out
```js ```js
const response = await fetch(api, { const response = await fetch(api, {
method: "post", method: "post",
body: JSON.stringify({ body: JSON.stringify({
query: "site.children", query: "site.children",
select: ["title", "url"], select: ["title", "url"],
}), }),
headers, headers,
}); });
console.log(await response.json()); console.log(await response.json());
@ -311,15 +312,15 @@ You can also use the object notation and pass true for each key/property you wan
```js ```js
const response = await fetch(api, { const response = await fetch(api, {
method: "post", method: "post",
body: JSON.stringify({ body: JSON.stringify({
query: "site.children", query: "site.children",
select: { select: {
title: true, title: true,
url: true, url: true,
}, },
}), }),
headers, headers,
}); });
console.log(await response.json()); console.log(await response.json());
@ -368,14 +369,14 @@ Instead of passing true, you can also pass a string query to specify what you wa
```js ```js
const response = await fetch(api, { const response = await fetch(api, {
method: "post", method: "post",
body: JSON.stringify({ body: JSON.stringify({
query: "site.children", query: "site.children",
select: { select: {
title: "page.title", title: "page.title",
}, },
}), }),
headers, headers,
}); });
console.log(await response.json()); console.log(await response.json());
@ -409,14 +410,14 @@ console.log(await response.json());
```js ```js
const response = await fetch(api, { const response = await fetch(api, {
method: "post", method: "post",
body: JSON.stringify({ body: JSON.stringify({
query: "site.children", query: "site.children",
select: { select: {
title: "page.title.upper", title: "page.title.upper",
}, },
}), }),
headers, headers,
}); });
console.log(await response.json()); console.log(await response.json());
@ -452,19 +453,19 @@ String queries are a perfect way to create aliases or return variations of the s
```js ```js
const response = await fetch(api, { const response = await fetch(api, {
method: "post", method: "post",
body: JSON.stringify({ body: JSON.stringify({
query: "page('notes').children", query: "page('notes').children",
select: { select: {
title: "page.title", title: "page.title",
upperCaseTitle: "page.title.upper", upperCaseTitle: "page.title.upper",
lowerCaseTitle: "page.title.lower", lowerCaseTitle: "page.title.lower",
guid: "page.id", guid: "page.id",
date: "page.date.toDate('d.m.Y')", date: "page.date.toDate('d.m.Y')",
timestamp: "page.date.toTimestamp", timestamp: "page.date.toTimestamp",
}, },
}), }),
headers, headers,
}); });
console.log(await response.json()); console.log(await response.json());
@ -504,15 +505,15 @@ With such string queries you can of course also include nested data
```js ```js
const response = await fetch(api, { const response = await fetch(api, {
method: "post", method: "post",
body: JSON.stringify({ body: JSON.stringify({
query: "page('photography').children", query: "page('photography').children",
select: { select: {
title: "page.title", title: "page.title",
images: "page.images", images: "page.moodboard",
}, },
}), }),
headers, headers,
}); });
console.log(await response.json()); console.log(await response.json());
@ -554,20 +555,20 @@ You can also pass an object with a `query` and a `select` option
```js ```js
const response = await fetch(api, { const response = await fetch(api, {
method: "post", method: "post",
body: JSON.stringify({ body: JSON.stringify({
query: "page('photography').children", query: "page('photography').children",
select: {
title: "page.title",
images: {
query: "page.images",
select: { select: {
filename: true, title: "page.title",
images: {
query: "page.moodboard",
select: {
filename: true,
},
},
}, },
}, }),
}, headers,
}),
headers,
}); });
console.log(await response.json()); console.log(await response.json());
@ -623,17 +624,17 @@ You can specify a custom limit with the limit option. The default limit for coll
```js ```js
const response = await fetch(api, { const response = await fetch(api, {
method: "post", method: "post",
body: JSON.stringify({ body: JSON.stringify({
query: "page('notes').children", query: "page('notes').children",
pagination: { pagination: {
limit: 5, limit: 5,
}, },
select: { select: {
title: "page.title", title: "page.title",
}, },
}), }),
headers, headers,
}); });
console.log(await response.json()); console.log(await response.json());
@ -683,18 +684,18 @@ You can jump to any page in the resultset with the `page` option.
```js ```js
const response = await fetch(api, { const response = await fetch(api, {
method: "post", method: "post",
body: JSON.stringify({ body: JSON.stringify({
query: "page('notes').children", query: "page('notes').children",
pagination: { pagination: {
page: 2, page: 2,
limit: 5, limit: 5,
}, },
select: { select: {
title: "page.title", title: "page.title",
}, },
}), }),
headers, headers,
}); });
console.log(await response.json()); console.log(await response.json());
@ -735,24 +736,24 @@ Pagination settings also work for subqueries.
```js ```js
const response = await fetch(api, { const response = await fetch(api, {
method: "post", method: "post",
body: JSON.stringify({ body: JSON.stringify({
query: "page('photography').children", query: "page('photography').children",
select: {
title: "page.title",
images: {
query: "page.images",
pagination: {
page: 2,
limit: 5,
},
select: { select: {
filename: true, title: "page.title",
images: {
query: "page.moodboard",
pagination: {
page: 2,
limit: 5,
},
select: {
filename: true,
},
},
}, },
}, }),
}, headers,
}),
headers,
}); });
console.log(await response.json()); console.log(await response.json());
@ -764,41 +765,41 @@ With the power of selects and subqueries you can basically query the entire site
```js ```js
const response = await fetch(api, { const response = await fetch(api, {
method: "post", method: "post",
body: JSON.stringify({ body: JSON.stringify({
query: "site", query: "site",
select: {
title: "site.title",
url: "site.url",
notes: {
query: "page('notes').children.listed",
select: { select: {
title: true, title: "site.title",
url: true, url: "site.url",
date: "page.date.toDate('d.m.Y')", notes: {
text: "page.text.kirbytext", query: "page('notes').children.listed",
}, select: {
}, title: true,
photography: { url: true,
query: "page('photography').children.listed", date: "page.date.toDate('d.m.Y')",
select: { text: "page.text.kirbytext",
title: true, },
images: { },
query: "page.images", photography: {
select: { query: "page('photography').children.listed",
url: true, select: {
alt: true, title: true,
caption: "file.caption.kirbytext", images: {
query: "page.moodboard",
select: {
url: true,
alt: true,
caption: "file.caption.kirbytext",
},
},
},
},
about: {
text: "page.text.kirbytext",
}, },
},
}, },
}, }),
about: { headers,
text: "page.text.kirbytext",
},
},
}),
headers,
}); });
console.log(await response.json()); console.log(await response.json());
@ -966,19 +967,20 @@ KQL only offers access to data in your site. It does not support any mutations.
## Plugins ## Plugins
- [KQL + 11ty](https://github.com/getkirby/eleventykit) - [KQL + 11ty](https://github.com/getkirby/eleventykit)
- [KQL + Nuxt](https://nuxt-kql.jhnn.dev) - [KQL + Nuxt](https://nuxt-kql.jhnn.dev)
## What's Kirby? ## What's Kirby?
- **[getkirby.com](https://getkirby.com)** – Get to know the CMS.
- **[Try it](https://getkirby.com/try)** – Take a test ride with our online demo. Or download one of our kits to get started. - **[getkirby.com](https://getkirby.com)** – Get to know the CMS.
- **[Documentation](https://getkirby.com/docs/guide)** – Read the official guide, reference and cookbook recipes. - **[Try it](https://getkirby.com/try)** – Take a test ride with our online demo. Or download one of our kits to get started.
- **[Issues](https://github.com/getkirby/kirby/issues)** – Report bugs and other problems. - **[Documentation](https://getkirby.com/docs/guide)** – Read the official guide, reference and cookbook recipes.
- **[Feedback](https://feedback.getkirby.com)** – You have an idea for Kirby? Share it. - **[Issues](https://github.com/getkirby/kirby/issues)** – Report bugs and other problems.
- **[Forum](https://forum.getkirby.com)** – Whenever you get stuck, don't hesitate to reach out for questions and support. - **[Feedback](https://feedback.getkirby.com)** – You have an idea for Kirby? Share it.
- **[Discord](https://chat.getkirby.com)** – Hang out and meet the community. - **[Forum](https://forum.getkirby.com)** – Whenever you get stuck, don't hesitate to reach out for questions and support.
- **[Mastodon](https://mastodon.social/@getkirby)** – Spread the word. - **[Discord](https://chat.getkirby.com)** – Hang out and meet the community.
- **[Instagram](https://www.instagram.com/getkirby/)** – Share your creations: #madewithkirby. - **[Mastodon](https://mastodon.social/@getkirby)** – Spread the word.
- **[Instagram](https://www.instagram.com/getkirby/)** – Share your creations: #madewithkirby.
--- ---

12
public/site/templates/client-brief.json.php
View file

@ -1,20 +1,14 @@
<?php <?php
$images = []; $moodboard = [];
foreach ($page->moodboard()->toFiles() as $image) { foreach ($page->moodboard()->toFiles() as $image) {
$images[] = [ $moodboard[] = getFileData($image);
'url' => $image->url(),
'uuid' => (string) $image->uuid(),
'tags' => $image->tags()->split(),
'name' => $image->filename(),
'description' => $image->description()->value(),
];
} }
$specificData = [ $specificData = [
"tags" => $page->parent()->parent()->clientBriefImageTags()->split(), "tags" => $page->parent()->parent()->clientBriefImageTags()->split(),
"images" => $images "moodboard" => $moodboard
]; ];
$data = array_merge($genericData, $specificData); $data = array_merge($genericData, $specificData);

4
public/site/templates/project.json.php
View file

@ -1,13 +1,11 @@
<?php <?php
$project = [ $project = [
'title' => $page->title()->value(), 'title' => $page->title()->value(),
'url' => $page->url(), 'url' => $page->url(),
'modified' => $page->modified('Y-MM-d'), 'modified' => $page->modified('Y-MM-d'),
'status' => $page->status(), 'status' => $page->status(),
'logo' => $page->client()->toPage()->logo()->toFile()->url(), 'logo' => $page->client()->toPage()->logo()->toFile()->url(),
'currentStep' => $page->currentStep()->value(), 'steps' => $page->getSteps(),
'steps' => $page->getSteps()
]; ];
$data = array_merge($genericData, $project); $data = array_merge($genericData, $project);

70
src/components/project/ProjectStep.vue
View file

@ -4,37 +4,34 @@
aria-labelledby="votre-brief-label" aria-labelledby="votre-brief-label"
:data-status="status" :data-status="status"
> >
<h2 id="votre-brief-label"> <router-link :to="'/' + step.uri">
<span data-icon="votre-brief">{{ step.text }}</span> <h2 id="votre-brief-label">
</h2> <span data-icon="votre-brief">{{ step.text }}</span>
<div class="cards | flow"> </h2>
<article class="card"> <div class="cards | flow">
<hgroup class="order-last"> <article class="card">
<h3 class="card__title | font-serif | text-lg">{{ step.text }}</h3> <hgroup class="order-last">
</hgroup> <h3 class="card__title | font-serif | text-lg">{{ step.text }}</h3>
<div class="card__meta | flex"> </hgroup>
<time class="card__date | text-grey-700" datetime="2024-06-12">{{ <div class="card__meta | flex">
dayjs(step.modified).format("DD MMMM YYYY") <time class="card__date | text-grey-700" datetime="2024-06-12">{{
}}</time> dayjs(step.modified).format("DD MMMM YYYY")
</div> }}</time>
<router-link :to="'/' + step.uri"> </div>
<figure class="card__images" data-count="13">
<img <template v-if="step.value === 'clientBrief'">
src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png" <figure class="card__images" :data-count="step.files.length - 3">
alt="" <img
/> v-for="image in step.files.slice(0, 3)"
<img :key="image.uuid"
src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/7b0fcc5012-1725442486/37a038883c87973036232aa0e43f6da2.png" :src="image.url"
alt="" :alt="image.alt"
/> />
<img </figure>
src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png" </template>
alt="" </article>
/> </div>
</figure> </router-link>
</router-link>
</article>
</div>
</section> </section>
</template> </template>
@ -51,14 +48,9 @@ dayjs.locale("fr");
const { page } = usePageStore(); const { page } = usePageStore();
const steps = [ const steps = page.steps.map((item) => {
"clientBrief", return item.value;
"proposal", });
"extended-brief",
"industrialIdeation",
"virtualSample",
"physicalSample",
];
const status = setStatus(); const status = setStatus();

4
src/components/project/client-brief/Images.vue
View file

@ -12,7 +12,7 @@
> >
Ajouter une ou plusieurs images Ajouter une ou plusieurs images
</button> </button>
<template v-for="image in page.images" :key="image.uri"> <template v-for="image in page.moodboard" :key="image.uri">
<figure <figure
v-if=" v-if="
selectedTags.length === 0 || selectedTags.length === 0 ||
@ -66,7 +66,7 @@ function changeSelectedTags(newTags) {
function removeImage(target) { function removeImage(target) {
console.log("remove", target); console.log("remove", target);
page.value.images = page.value.images.filter( page.value.moodboard = page.value.moodboard.filter(
(image) => image.uuid !== target.uuid (image) => image.uuid !== target.uuid
); );
} }

2
src/components/project/client-brief/add-images-modal/ImagesEditPanel.vue
View file

@ -198,7 +198,7 @@ function addImagesToBrief() {
}) })
.then((res) => res.json()) .then((res) => res.json())
.then((json) => { .then((json) => {
page.value.images = json.images; page.value.moodboard = json.images;
console.log(json); console.log(json);
}) })
.catch((error) => console.error("Error:", error)); .catch((error) => console.error("Error:", error));

6
src/views/ClientBrief.vue
View file

@ -1,7 +1,11 @@
<template> <template>
<main class="flex flex-col items-stretch | w-full" style="--row-gap: 2rem"> <main class="flex flex-col items-stretch | w-full" style="--row-gap: 2rem">
<header class="flex | bg-white | rounded-2xl | p-8"> <header class="flex | bg-white | rounded-2xl | p-8">
<router-link :to="'/' + page.parent" class="btn btn--white" data-icon="arrow-left"> <router-link
:to="'/' + page.parent"
class="btn btn--white"
data-icon="arrow-left"
>
<span>Retour au projet</span> <span>Retour au projet</span>
</router-link> </router-link>
<button class="btn | ml-auto">Valider et envoyer le brief</button> <button class="btn | ml-auto">Valider et envoyer le brief</button>