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

refactor: rename "folder" to "package" throughout codebase

Browse source 
- Rename CSS files: _card-folder.scss → card-package
- Rename template files: _folder.scss → package
- Update all CSS class names and selectors
- Delete old folder blueprints and templates
- Add new package blueprints with improved structure
- Update investigation-summary template and blueprint
- Add "Dossiers" menu item in panel configuration
- Improve package blueprint with linkedContent field

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-11 12:40:18 +01:00
parent e228c1757e
commit 15581752b8
11 changed files with 298 additions and 346 deletions
Download patch file Download diff file Expand all files Collapse all files

252
assets/css/components/_card-folder.scss
View file

@ -1,171 +1,145 @@
.card--folder{ .card--package {
position: relative; position: relative;
max-width: var(--max-w-cards); max-width: var(--max-w-cards);
border: var(--border-light); border: var(--border-light);
padding: var(--padding-inner); padding: var(--padding-inner);
@include grid-content(); @include grid-content();
@include figure-16-9(); @include figure-16-9();
container-type: inline-size;
container-name: cardpackage;
container-type: inline-size; figure {
container-name: cardfolder; border-radius: var(--radius-small);
background-color: var(--color-accent);
img {
opacity: 0.8;
filter: grayscale(1);
}
}
figure{ .content {
display: flex;
border-radius: var(--radius-small); flex-direction: column;
background-color: var(--color-accent); font-size: var(--fs-small);
}
img{
opacity: 0.8;
filter: grayscale(1);
}
.title {
font-weight: 500;
font-size: var(--fs-normal);
line-height: var(--leading-title);
margin-bottom: 0.75em;
text-wrap: balance;
max-width: 42ch;
text-transform: uppercase;
padding-top: calc(var(--spacing) * 0.25);
a {
text-decoration: none;
} }
.content{ @media #{$small} {
display: flex; font-size: var(--fs-normal);
flex-direction: column;
font-size: var(--fs-small);
} }
.icon {
.title{ padding-right: 1ch;
position: relative;
font-weight: 500; top: 1px;
font-size: var(--fs-normal); svg {
line-height: var(--leading-title); height: 15px;
width: 15px;
margin-bottom: 0.75em; fill: var(--color-txt);
text-wrap: balance; }
max-width: 42ch;
text-transform: uppercase;
padding-top: calc(var(--spacing)*0.25);
a{ text-decoration: none;}
@media #{$small}{
font-size: var(--fs-normal);
}
.icon{
padding-right: 1ch;
position: relative;
top: 1px;
svg{
height: 15px;
width: 15px;
fill: var(--color-txt);
}
}
} }
}
.short{ .short {
@include clamp(3); @include clamp(3);
flex-grow: 1; flex-grow: 1;
padding-right: calc(var(--padding-inner)*2); padding-right: calc(var(--padding-inner) * 2);
}
ul {
display: flex;
list-style: none;
gap: 1ch;
color: var(--color-txt-light);
padding-top: calc(var(--spacing) * 0.5);
li + li {
&::before {
content: "|";
padding-right: 1ch;
}
} }
@media #{$small} {
ul{ font-size: var(--fs-small);
display: flex;
list-style: none;
gap: 1ch;
color: var(--color-txt-light);
padding-top: calc(var(--spacing)*0.5);
li + li{
&::before{
content: "|";
padding-right: 1ch;
}
}
@media #{$small}{
font-size: var(--fs-small);
}
} }
}
.btn--go-to{ .btn--go-to {
position: absolute; position: absolute;
right: calc(var(--padding-inner)*1); right: calc(var(--padding-inner) * 1);
bottom: var(--padding-inner); bottom: var(--padding-inner);
} }
@include btn--go-to(); @include btn--go-to();
&:hover{ &:hover {
background-color: var(--grey-950); background-color: var(--grey-950);
border-color: var(--color-txt); border-color: var(--color-txt);
} }
} }
[data-template="investigation-summary"] .card--package {
border: none;
padding-left: 0;
padding-right: 0;
border-bottom: var(--border-light);
&:first-of-type {
border-top: var(--border-light);
}
&.has-link {
@include hover-card-line();
}
[data-template="investigation-summary"] .card--folder{ figure {
@media #{$x-small} {
border: none; margin-left: 0px;
padding-left: 0;
padding-right: 0;
border-bottom: var(--border-light);
&:first-of-type{
border-top: var(--border-light);
}
&.has-link {
@include hover-card-line();
} }
}
figure{ .title {
@media #{$x-small}{ margin-left: 0px; } font-size: var(--fs-small);
}
}
.title{
font-size: var(--fs-small);
}
} }
@media #{$x-small} { @media #{$x-small} {
.card--package {
.card--folder{ .content {
display: contents;
.content { }
display: contents; figure {
} grid-row: 1/3;
figure {
grid-row: 1/3;
}
.title {
font-size: var(--fs-small);
padding-top: calc(var(--spacing)*0.25);
margin-bottom: 0;
}
.short {
grid-column: span 2;
}
ul{
grid-column: 2;
grid-row: 2;
padding-top: 0;
}
} }
.title {
font-size: var(--fs-small);
padding-top: calc(var(--spacing) * 0.25);
margin-bottom: 0;
}
.short {
grid-column: span 2;
}
ul {
grid-column: 2;
grid-row: 2;
padding-top: 0;
}
}
} }

8
assets/css/style.scss
View file

@ -14,9 +14,6 @@
@import "components/sort"; @import "components/sort";
@import "components/btn-group-mobile"; @import "components/btn-group-mobile";
@import "components/figures"; @import "components/figures";
@import "components/summary-hero"; @import "components/summary-hero";
@import "components/form-newsletter"; @import "components/form-newsletter";
@ -29,12 +26,11 @@
@import "components/card-article-small"; @import "components/card-article-small";
@import "components/card-impact"; @import "components/card-impact";
@import "components/card-impact-small"; @import "components/card-impact-small";
@import "components/card-folder"; @import "components/card-package";
@import "components/card-open-graph"; @import "components/card-open-graph";
@import "components/swiper"; @import "components/swiper";
@import "components/slider-before-after"; @import "components/slider-before-after";
@import "partials/site-header"; @import "partials/site-header";
@import "partials/site-menu"; @import "partials/site-menu";
@import "partials/site-footer"; @import "partials/site-footer";
@ -45,5 +41,5 @@
@import "template/home"; @import "template/home";
@import "template/investigation-summary"; @import "template/investigation-summary";
@import "template/report"; @import "template/report";
@import "template/folder"; @import "template/package";
@import "template/impacts"; @import "template/impacts";

150
assets/css/template/_folder.scss
View file

@ -1,92 +1,88 @@
.content-folder{ .content-package {
// max-width: 1300px; // max-width: 1300px;
max-width: var(--max-w-cards); max-width: var(--max-w-cards);
margin: 0 auto; margin: 0 auto;
display: grid; display: grid;
grid-gap: calc(var(--padding-body)*1.5); grid-gap: calc(var(--padding-body) * 1.5);
// grid-template-columns: 60% cacl(40% - var(--padding-body)*1.5); // grid-template-columns: 60% cacl(40% - var(--padding-body)*1.5);
position: relative; position: relative;
.container-cards{ .container-cards {
display: block; display: block;
align-self: start; align-self: start;
}
#section__investigations article {
margin-bottom: calc(var(--spacing) * 1);
}
.container__title {
font-weight: normal;
font-size: var(--fs-small);
font-weight: 500;
text-transform: uppercase;
margin-bottom: calc(var(--spacing) * 0.75);
}
@media #{$medium} {
#section__investigations {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: calc(var(--padding-inner) * 1.5) !important;
margin-bottom: calc(var(--spacing) * 3);
article {
margin-bottom: 0px;
}
.container__title {
grid-column: span 2;
margin-bottom: 0px;
}
} }
section:target {
#section__investigations article{ padding-top: calc(var(--header-h) + var(--spacing));
margin-bottom: calc(var(--spacing)*1);
} }
}
@media #{$medium-up} {
.container__title{ #nav-package {
font-weight: normal; display: none;
font-size: var(--fs-small);
font-weight: 500;
text-transform: uppercase;
margin-bottom: calc(var(--spacing)*0.75);
} }
grid-template-columns: 1fr 1fr;
#section__investigations {
display: block;
margin-bottom: 0px;
@media #{$medium}{ article {
#section__investigations{ margin-bottom: calc(var(--spacing) * 1);
display: grid; }
grid-template-columns: 1fr 1fr;
grid-gap: calc(var(--padding-inner)*1.5)!important;
margin-bottom: calc(var(--spacing)*3);
article{ margin-bottom: 0px;}
.container__title{
grid-column: span 2;
margin-bottom: 0px;
}
}
section:target{
padding-top: calc(var(--header-h) + var(--spacing));
}
} }
}
@media #{$medium-up}{ @media #{$small} {
#nav-folder{ display: none; } display: block;
grid-template-columns: 1fr 1fr; #section__investigations {
#section__investigations{ display: block;
display: block;
margin-bottom: 0px;
article{
margin-bottom: calc(var(--spacing)*1);
}
}
} }
.container__title {
margin-bottom: calc(var(--spacing) * 0.5) !important;
@media #{$small}{
display: block;
#section__investigations{
display: block;
}
.container__title{
margin-bottom: calc(var(--spacing)*0.5)!important;
}
} }
}
} }
#nav-package {
display: flex;
margin-top: calc(var(--spacing) * -1);
margin-bottom: calc(var(--spacing) * 2);
#nav-folder{ svg {
display: flex; width: 10px;
margin-top: calc(var(--spacing)*-1); height: 10px;
margin-bottom: calc(var(--spacing)*2); transform: rotate(90deg);
}
svg{
width: 10px;
height: 10px;
transform: rotate(90deg);
}
} }
@media #{$medium-up}{ @media #{$medium-up} {
#nav-folder{ display: none;} #nav-package {
display: none;
}
} }

124
assets/css/template/_investigation-summary.scss
View file

@ -1,47 +1,41 @@
[data-template="investigation-summary"] main { [data-template="investigation-summary"] main {
position: relative; position: relative;
.page__header {
.page__header{
margin-inline: auto; margin-inline: auto;
max-width: var(--max-w-content); max-width: var(--max-w-content);
} }
.panel-left {
width: calc((100vw - var(--max-w-cards) - var(--padding-body) * 4) * 0.5);
.panel-left{
width: calc((100vw - var(--max-w-cards) - var(--padding-body)*4)*0.5);
} }
@media screen and (max-width: 1340px){ @media screen and (max-width: 1340px) {
margin-left: auto; margin-left: auto;
margin-right: calc(var(--padding-body)*3); margin-right: calc(var(--padding-body) * 3);
.panel-left{ .panel-left {
width: calc(100vw - var(--max-w-cards) - var(--padding-body)*6); width: calc(100vw - var(--max-w-cards) - var(--padding-body) * 6);
} }
} }
@media screen and (max-width: 1220px) {
@media screen and (max-width: 1220px){
margin-left: auto; margin-left: auto;
margin-right: 0px; margin-right: 0px;
width: calc(100% - var(--panel-w)*0.5 - var(--padding-body)); width: calc(100% - var(--panel-w) * 0.5 - var(--padding-body));
.panel-left{ .panel-left {
width: calc(var(--panel-w)*0.5); width: calc(var(--panel-w) * 0.5);
} }
} }
.section__article { .section__article {
margin-top: calc(var(--spacing) * 3); margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 3);
max-width: var(--max-w-content); max-width: var(--max-w-content);
margin-inline: auto; margin-inline: auto;
&:target{ &:target {
padding-top: calc(var(--header-h) + var(--spacing)*1); padding-top: calc(var(--header-h) + var(--spacing) * 1);
} }
a:hover { a:hover {
color: var(--grey-200); color: var(--grey-200);
@ -56,18 +50,13 @@
} }
} }
#section__dl, #section__dl,
#section__impacts, #section__impacts,
#section__folder, #section__package,
#section__related-articles{ #section__related-articles {
font-size: var(--fs-small); font-size: var(--fs-small);
} }
#section__dl { #section__dl {
margin-top: calc(var(--spacing) * 1.5); margin-top: calc(var(--spacing) * 1.5);
border-bottom: var(--border-light); border-bottom: var(--border-light);
@ -95,14 +84,11 @@
} }
} }
#section__synthese { #section__synthese {
max-width: var(--max-w-content); max-width: var(--max-w-content);
margin-inline: auto; margin-inline: auto;
p+p { p + p {
margin-top: 1em; margin-top: 1em;
} }
@ -116,66 +102,54 @@
} }
} }
.panel-left {
.panel-left{
//background-color: yellow; //background-color: yellow;
height: calc(100vh - var(--header-h)); height: calc(100vh - var(--header-h));
position: fixed; position: fixed;
left: var(--padding-body); left: var(--padding-body);
padding-bottom: calc(var(--padding-body)*1); padding-bottom: calc(var(--padding-body) * 1);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
z-index: calc(var(--z-header) - 1); z-index: calc(var(--z-header) - 1);
#nav--page { #nav--page {
padding-bottom: var(--spacing); padding-bottom: var(--spacing);
width: calc(var(--panel-w)*0.5); width: calc(var(--panel-w) * 0.5);
ul { ul {
list-style: none; list-style: none;
li { li {
text-align: center; text-align: center;
color: var(--color-txt-light); color: var(--color-txt-light);
margin-bottom: 4px; margin-bottom: 4px;
font-weight: 500; font-weight: 500;
font-size: var(--fs-small); font-size: var(--fs-small);
a { a {
display: block; display: block;
padding: 5px 1ch; padding: 5px 1ch;
text-decoration: none; text-decoration: none;
}
} }
} }
} }
}
.btn--group{ .btn--group {
width: calc(var(--panel-w)*0.5); width: calc(var(--panel-w) * 0.5);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap:calc(var(--spacing)*0.25); gap: calc(var(--spacing) * 0.25);
button, .dropdown{ button,
flex-grow: 1; .dropdown {
width: 100%; flex-grow: 1;
width: 100%;
}
} }
} }
}
} }
// SMALL ---------------------------------------------------------- // SMALL ----------------------------------------------------------
@ -194,8 +168,6 @@
margin-bottom: calc(var(--spacing) * 2); margin-bottom: calc(var(--spacing) * 2);
} }
.panel-left { .panel-left {
display: none; display: none;
} }

2
site/blueprints/pages/investigation-summary.yml
View file

@ -88,7 +88,7 @@ tabs:
label: Métadonnées label: Métadonnées
icon: table icon: table
fields: fields:
folder: package:
label: Dossier label: Dossier
type: select type: select
options: query options: query

14
site/blueprints/pages/folder.yml → site/blueprints/pages/package.yml
View file

@ -5,18 +5,22 @@ tabs:
label: Contenu label: Contenu
icon: page icon: page
fields: fields:
description:
label: Description
type: textarea
size: medium
buttons: false
cover: cover:
label: Visuel de couverture label: Visuel de couverture
type: files type: files
multiple: false multiple: false
layout: cards layout: cards
width: 1/3
image: image:
ratio: 12/7 ratio: 12/7
cover: true cover: true
help: Image utilisée dans la liste des dossiers help: Image utilisée dans la liste des dossiers
description:
label: Description
type: writer
width: 2/3
linkedContent:
label: Contenu
type: pages
query: site.find('enquetes').children
seo: seo/page seo: seo/page

7
site/blueprints/pages/folders.yml → site/blueprints/pages/packages.yml
View file

@ -4,15 +4,16 @@ tabs:
contentTab: contentTab:
label: Contenu label: Contenu
sections: sections:
folders: packages:
label: Dossiers
type: pages type: pages
text: "{{ page.title }}" text: "{{ page.title }}"
info: "{{ page.description }}" info: "{{ page.linkedContent.toPages.count }} contenus"
layout: cards layout: cards
size: huge size: huge
search: true search: true
image: image:
cover: true cover: true
ratio: 12/7 ratio: 12/7
template: folder template: package
seo: seo/page seo: seo/page

9
site/config/menu.php
View file

@ -22,6 +22,15 @@ return [
], ],
'-' '-'
, ,
'dossiers' => [
'label' => 'Dossiers',
'icon' => 'folder',
'link' => 'pages/dossiers',
'current' => function (string $current): bool {
$path = Kirby\Cms\App::instance()->path();
return Str::contains($path, 'pages/dossiers');
}
],
'database' => [ 'database' => [
'label' => 'Bases de données', 'label' => 'Bases de données',
'icon' => 'table', 'icon' => 'table',

44
site/templates/investigation-summary.php
View file

@ -40,14 +40,14 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
<li><a href="#section__impacts">Impacts</a></li> <li><a href="#section__impacts">Impacts</a></li>
<?php <?php
// Vérifier si un dossier existe pour cette investigation // Vérifier si un dossier existe pour cette investigation
$folderSlug = $page->folder()->value(); $packageSlug = $page->package()->value();
$hasFolder = false; $hasPackage = false;
if (!empty($folderSlug) && site()->find('dossiers')) { if (!empty($packageSlug) && site()->find('dossiers')) {
$hasFolder = site()->find('dossiers')->children()->filterBy('slug', $folderSlug)->first(); $hasPackage = site()->find('dossiers')->children()->filterBy('slug', $packageSlug)->first();
} }
if ($hasFolder): if ($hasPackage):
?> ?>
<li><a href="#section__folder">Dossier</a></li> <li><a href="#section__package">Dossier</a></li>
<?php endif ?> <?php endif ?>
<?php <?php
// Vérifier s'il y a des enquêtes en lien // Vérifier s'il y a des enquêtes en lien
@ -305,34 +305,34 @@ if ($relatedInvestigations->isEmpty()) {
<?php <?php
// Récupérer le dossier associé à cette investigation // Récupérer le dossier associé à cette investigation
$folderSlug = $page->folder()->value(); $packageSlug = $page->package()->value();
$folder = null; $package = null;
if (!empty($folderSlug) && site()->find('dossiers')) { if (!empty($packageSlug) && site()->find('dossiers')) {
$folder = site()->find('dossiers')->children()->filterBy('slug', $folderSlug)->first(); $package = site()->find('dossiers')->children()->filterBy('slug', $packageSlug)->first();
} }
if ($folder): if ($package):
?> ?>
<aside class="section__article" id="section__folder"> <aside class="section__article" id="section__package">
<h3 class="section__title">Dans le dossier</h3> <h3 class="section__title">Dans le dossier</h3>
<article class="card--folder"> <article class="card--package">
<?php if ($cover = $folder->cover()->toFile()): ?> <?php if ($cover = $package->cover()->toFile()): ?>
<figure> <figure>
<img src="<?= $cover->url() ?>" alt="<?= $folder->title()->esc() ?>"> <img src="<?= $cover->url() ?>" alt="<?= $package->title()->esc() ?>">
</figure> </figure>
<?php endif ?> <?php endif ?>
<div class="content"> <div class="content">
<h4 class="title"><a href="<?= $folder->url() ?>"><span class="icon"><?= svg('assets/icons/folder.svg') ?></span><?= $folder->title()->esc() ?></a></h4> <h4 class="title"><a href="<?= $package->url() ?>"><span class="icon"><?= svg('assets/icons/package.svg') ?></span><?= $package->title()->esc() ?></a></h4>
<?php if ($folder->description()->isNotEmpty()): ?> <?php if ($package->description()->isNotEmpty()): ?>
<p class="short"><?= $folder->description()->excerpt(200) ?></p> <p class="short"><?= $package->description()->excerpt(200) ?></p>
<?php endif ?> <?php endif ?>
<?php <?php
// Compter les enquêtes associées à ce dossier // Compter les enquêtes associées à ce dossier
$investigationsCount = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($folder) { $investigationsCount = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($package) {
return $investigation->folder()->value() === $folder->slug(); return $investigation->package()->value() === $package->slug();
})->count(); })->count();
?> ?>
@ -344,8 +344,8 @@ if ($folder):
</ul> </ul>
</div> </div>
<button class="btn--go-to"><a href="<?= $folder->url() ?>" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button> <button class="btn--go-to"><a href="<?= $package->url() ?>" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
<a class="link-block" href="<?= $folder->url() ?>" target="_blank" aria-hidden="true"></a> <a class="link-block" href="<?= $package->url() ?>" target="_blank" aria-hidden="true"></a>
</article> </article>

6
site/templates/folder.php → site/templates/package.php
View file

@ -16,17 +16,17 @@
<?php <?php
// Récupérer les enquêtes associées à ce dossier // Récupérer les enquêtes associées à ce dossier
$investigations = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($page) { $investigations = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($page) {
return $investigation->folder()->value() === $page->slug(); return $investigation->package()->value() === $page->slug();
}); });
?> ?>
<div class="btn--group" id="nav-folder"> <div class="btn--group" id="nav-package">
<button class="btn--small"><a href="#section__investigations">Enquêtes <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button> <button class="btn--small"><a href="#section__investigations">Enquêtes <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button>
<button class="btn--small"><a href="#section__impacts">Impacts <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button> <button class="btn--small"><a href="#section__impacts">Impacts <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button>
</div> </div>
<div class="content-folder"> <div class="content-package">
<?php if ($investigations->isNotEmpty()): ?> <?php if ($investigations->isNotEmpty()): ?>

20
site/templates/folders.php → site/templates/packages.php
View file

@ -16,28 +16,28 @@
<?php foreach ($page->children()->listed() as $folder): ?> <?php foreach ($page->children()->listed() as $package): ?>
<article class="card--folder"> <article class="card--package">
<?php if ($cover = $folder->cover()->toFile()): ?> <?php if ($cover = $package->cover()->toFile()): ?>
<figure> <figure>
<img src="<?= $cover->url() ?>" alt="<?= $folder->title()->esc() ?>"> <img src="<?= $cover->url() ?>" alt="<?= $package->title()->esc() ?>">
</figure> </figure>
<?php endif ?> <?php endif ?>
<div class="content"> <div class="content">
<h4 class="title"><a href="<?= $folder->url() ?>"><span class="icon"><?= svg('assets/icons/folder.svg') ?></span><?= $folder->title()->esc() ?></a></h4> <h4 class="title"><a href="<?= $package->url() ?>"><span class="icon"><?= svg('assets/icons/package.svg') ?></span><?= $package->title()->esc() ?></a></h4>
<?php if ($folder->description()->isNotEmpty()): ?> <?php if ($package->description()->isNotEmpty()): ?>
<p class="short"><?= $folder->description()->excerpt(200) ?></p> <p class="short"><?= $package->description()->excerpt(200) ?></p>
<?php endif ?> <?php endif ?>
<?php <?php
// Compter les enquêtes associées à ce dossier // Compter les enquêtes associées à ce dossier
$investigationsCount = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($folder) { $investigationsCount = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($package) {
return $investigation->folder()->value() === $folder->slug(); return $investigation->package()->value() === $package->slug();
})->count(); })->count();
?> ?>
@ -50,7 +50,7 @@
</div> </div>
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button> <button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
<a class="link-block" href="<?= $folder->url() ?>"></a> <a class="link-block" href="<?= $package->url() ?>"></a>
</article> </article>
<?php endforeach ?> <?php endforeach ?>