Przeglądaj źródła

maj readme + fetching useFetch

master
dje 1 rok temu
rodzic
commit
9368eab11f
3 zmienionych plików z 25 dodań i 38 usunięć
  1. +13
    -4
      App.vue
  2. +9
    -31
      README.md
  3. +3
    -3
      server/api/artworks.html

+ 13
- 4
App.vue Wyświetl plik

@@ -1,11 +1,11 @@
<template>
<img id="banner-media" src="/images/header-banalites.jpg"/>
<header>
<CPMMenu :items="contents.sections"/>
<CPMMenu :items="contents.sections"/>
</header>

<main>
<section v-for="section in innerSections" v-html="section.content">
<section v-for="section in contents.sections.filter((s) => s.content)" v-html="section.content">
</section>
</main>

@@ -14,8 +14,7 @@

<script setup>

const contents = await $fetch('/api/contents');
const innerSections = contents.sections.filter((item) => item.content);
const {data : contents } = await useFetch('/api/contents');

</script>

@@ -38,6 +37,8 @@

section {
margin-top: 50px;
font-size: 1.2rem;
line-height: 175%;

h1 {
font-size : 1.5rem;
@@ -47,6 +48,14 @@
font-size : 1.3rem;
}

ul {
margin-left: 50px;
margin-top: 25px;
list-style-type: square;
}

sup { vertical-align: top; position: relative; top: -0.5em; }

figure {
margin-bottom : 25px;
img {


+ 9
- 31
README.md Wyświetl plik

@@ -1,51 +1,29 @@
# Notes de dev
# Notes
les contenus HTML sont récupérés auprès de l'API (dossier server/api) :
Le fichier contents.ts décrit les sections dans un objet js, récupère les contenus dans les fichiers html du même dossier et retourne cet objet
pour qu'il soit consommé par la partie cliente.

Un simple 'yarn generate' devrait générer le site statique. Ça fonctionne presque, mais ça la version générée exécute quand même les appels sur /api...



# Nuxt 3 Minimal Starter

Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.

## Setup

Make sure to install the dependencies:
# Installation des dép.

```bash
# yarn
yarn install

# npm
npm install

# pnpm
pnpm install --shamefully-hoist
```

## Development Server

Start the development server on http://localhost:3000
# Mode dev & hot reload

```bash
npm run dev
yarn dev
```

## Production

Build the application for production:

# Génération statique
```bash
npm run build
yarn generate
```

Locally preview production build:

# Preview
```bash
npm run preview
yarn preview
```

Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

+ 3
- 3
server/api/artworks.html Wyświetl plik

@@ -4,21 +4,21 @@
<div>
<figure>
<img src="images/artworks/artwork-cassidy-punch-machine.jpg"/>
<figcaption>Dylan Monin x 2017 x 3D</figcaption>
<figcaption>Dylan Monin – 2017 – 3D</figcaption>
</figure>
</div>

<div>
<figure>
<img src="images/artworks/cover-heisenberg.jpg"/>
<figcaption>Alexis Lomoff x 2017 x Feutres</figcaption>
<figcaption>Alexis Lomoff – 2017 – Feutres</figcaption>
</figure>
</div>

<div>
<figure>
<img src="images/artworks/bartleby.jpg"/>
<figcaption>Dylan Monin x 2020x 3D</figcaption>
<figcaption>Dylan Monin – 2020 – 3D</figcaption>
</figure>
</div>
</section>

Ładowanie…
Anuluj
Zapisz