Pārlūkot izejas kodu

maj readme + fetching useFetch

master
dje pirms 1 gada
vecāks
revīzija
9368eab11f
3 mainītis faili ar 25 papildinājumiem un 38 dzēšanām
  1. +13
    -4
      App.vue
  2. +9
    -31
      README.md
  3. +3
    -3
      server/api/artworks.html

+ 13
- 4
App.vue Parādīt failu

@@ -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 Parādīt failu

@@ -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 Parādīt failu

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

Notiek ielāde…
Atcelt
Saglabāt