소스 검색

maj readme + fetching useFetch

master
dje 1 년 전
부모
커밋
9368eab11f
3개의 변경된 파일25개의 추가작업 그리고 38개의 파일을 삭제
  1. +13
    -4
      App.vue
  2. +9
    -31
      README.md
  3. +3
    -3
      server/api/artworks.html

+ 13
- 4
App.vue 파일 보기

@@ -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 파일 보기

@@ -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 파일 보기

@@ -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>

불러오는 중...
취소
저장