feat: Initial NodeByUri logic and frontend
This commit is contained in:
154
wp-content/themes/moonshine/acf-json/group_abstract_builder.json
Normal file
154
wp-content/themes/moonshine/acf-json/group_abstract_builder.json
Normal file
@@ -0,0 +1,154 @@
|
|||||||
|
{
|
||||||
|
"key": "group_abstract_builder",
|
||||||
|
"title": "Abstract - Builder",
|
||||||
|
"fields": [
|
||||||
|
{
|
||||||
|
"key": "field_builder_sections",
|
||||||
|
"label": "Section(s)",
|
||||||
|
"name": "sections",
|
||||||
|
"aria-label": "",
|
||||||
|
"type": "flexible_content",
|
||||||
|
"instructions": "",
|
||||||
|
"required": 0,
|
||||||
|
"conditional_logic": 0,
|
||||||
|
"wrapper": {
|
||||||
|
"width": "",
|
||||||
|
"class": "",
|
||||||
|
"id": ""
|
||||||
|
},
|
||||||
|
"acfe_flexible_advanced": 1,
|
||||||
|
"acfe_flexible_stylised_button": 0,
|
||||||
|
"acfe_flexible_hide_empty_message": 0,
|
||||||
|
"acfe_flexible_empty_message": "",
|
||||||
|
"acfe_flexible_layouts_templates": 0,
|
||||||
|
"acfe_flexible_layouts_placeholder": 0,
|
||||||
|
"acfe_flexible_layouts_thumbnails": 0,
|
||||||
|
"acfe_flexible_async": [],
|
||||||
|
"acfe_flexible_add_actions": [
|
||||||
|
"copy",
|
||||||
|
"title",
|
||||||
|
"toggle"
|
||||||
|
],
|
||||||
|
"acfe_flexible_remove_button": [],
|
||||||
|
"acfe_flexible_remove_top_actions": [],
|
||||||
|
"acfe_flexible_modal_edit": {
|
||||||
|
"acfe_flexible_modal_edit_enabled": "1",
|
||||||
|
"acfe_flexible_modal_edit_size": "xlarge"
|
||||||
|
},
|
||||||
|
"acfe_flexible_modal": {
|
||||||
|
"acfe_flexible_modal_enabled": "0",
|
||||||
|
"acfe_flexible_modal_title": false,
|
||||||
|
"acfe_flexible_modal_size": "xlarge",
|
||||||
|
"acfe_flexible_modal_col": "4",
|
||||||
|
"acfe_flexible_modal_categories": false
|
||||||
|
},
|
||||||
|
"acfe_flexible_modal_settings": {
|
||||||
|
"acfe_flexible_modal_settings_enabled": "1",
|
||||||
|
"acfe_flexible_modal_settings_size": "large",
|
||||||
|
"acfe_flexible_modal_settings_close": "1",
|
||||||
|
"acfe_flexible_modal_settings_close_label": ""
|
||||||
|
},
|
||||||
|
"layouts": {
|
||||||
|
"layout_6852f761e95b0": {
|
||||||
|
"key": "layout_6852f761e95b0",
|
||||||
|
"name": "text_block",
|
||||||
|
"label": "Bloc de texte",
|
||||||
|
"display": "block",
|
||||||
|
"sub_fields": [
|
||||||
|
{
|
||||||
|
"key": "field_68eeceb62b8a6",
|
||||||
|
"label": "Contenu",
|
||||||
|
"name": "content",
|
||||||
|
"aria-label": "",
|
||||||
|
"type": "wysiwyg",
|
||||||
|
"instructions": "",
|
||||||
|
"required": 1,
|
||||||
|
"conditional_logic": 0,
|
||||||
|
"wrapper": {
|
||||||
|
"width": "",
|
||||||
|
"class": "",
|
||||||
|
"id": ""
|
||||||
|
},
|
||||||
|
"default_value": "",
|
||||||
|
"acfe_wysiwyg_height": 300,
|
||||||
|
"acfe_wysiwyg_max_height": "",
|
||||||
|
"acfe_wysiwyg_valid_elements": "",
|
||||||
|
"acfe_wysiwyg_custom_style": "",
|
||||||
|
"acfe_wysiwyg_disable_wp_style": 0,
|
||||||
|
"acfe_wysiwyg_autoresize": 0,
|
||||||
|
"acfe_wysiwyg_disable_resize": 0,
|
||||||
|
"acfe_wysiwyg_remove_path": 0,
|
||||||
|
"acfe_wysiwyg_menubar": 0,
|
||||||
|
"acfe_wysiwyg_transparent": 0,
|
||||||
|
"acfe_wysiwyg_merge_toolbar": 0,
|
||||||
|
"acfe_wysiwyg_custom_toolbar": 0,
|
||||||
|
"required_message": "",
|
||||||
|
"allow_in_bindings": 0,
|
||||||
|
"tabs": "all",
|
||||||
|
"toolbar": "full",
|
||||||
|
"media_upload": 1,
|
||||||
|
"delay": 0,
|
||||||
|
"show_in_graphql": 1,
|
||||||
|
"graphql_description": "",
|
||||||
|
"graphql_field_name": "content",
|
||||||
|
"graphql_non_null": 1,
|
||||||
|
"acfe_wysiwyg_auto_init": 0,
|
||||||
|
"acfe_wysiwyg_min_height": 300,
|
||||||
|
"acfe_wysiwyg_toolbar_buttons": []
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"min": "",
|
||||||
|
"max": "",
|
||||||
|
"acfe_flexible_modal_edit_size": "",
|
||||||
|
"acfe_flexible_settings": "",
|
||||||
|
"acfe_flexible_settings_size": "large",
|
||||||
|
"acfe_flexible_render_template": false,
|
||||||
|
"acfe_flexible_render_style": false,
|
||||||
|
"acfe_flexible_render_script": false,
|
||||||
|
"acfe_flexible_thumbnail": false,
|
||||||
|
"acfe_flexible_category": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"min": "",
|
||||||
|
"max": "",
|
||||||
|
"button_label": "Ajouter un élément",
|
||||||
|
"show_in_graphql": 1,
|
||||||
|
"graphql_description": "",
|
||||||
|
"graphql_field_name": "sections",
|
||||||
|
"graphql_non_null": 0,
|
||||||
|
"acfe_flexible_layouts_previews": false,
|
||||||
|
"acfe_flexible_close_button_label": "",
|
||||||
|
"acfe_flexible_layouts_state": false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"location": [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"param": "abstract"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"menu_order": 0,
|
||||||
|
"position": "acf_after_title",
|
||||||
|
"style": "seamless",
|
||||||
|
"label_placement": "top",
|
||||||
|
"instruction_placement": "label",
|
||||||
|
"hide_on_screen": [
|
||||||
|
"the_content"
|
||||||
|
],
|
||||||
|
"active": true,
|
||||||
|
"description": "",
|
||||||
|
"show_in_rest": 0,
|
||||||
|
"display_title": "",
|
||||||
|
"acfe_autosync": [
|
||||||
|
"json"
|
||||||
|
],
|
||||||
|
"acfe_form": 0,
|
||||||
|
"show_in_graphql": 1,
|
||||||
|
"graphql_field_name": "GroupAbstractBuilder",
|
||||||
|
"map_graphql_types_from_location_rules": 0,
|
||||||
|
"graphql_types": "",
|
||||||
|
"acfe_meta": "",
|
||||||
|
"acfe_note": "",
|
||||||
|
"modified": 1768336919
|
||||||
|
}
|
||||||
66
wp-content/themes/moonshine/acf-json/group_post_page.json
Normal file
66
wp-content/themes/moonshine/acf-json/group_post_page.json
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
{
|
||||||
|
"key": "group_post_page",
|
||||||
|
"title": "Post - Page",
|
||||||
|
"fields": [
|
||||||
|
{
|
||||||
|
"key": "field_690cbda0abcbb",
|
||||||
|
"label": "Constructeur de page",
|
||||||
|
"name": "builder",
|
||||||
|
"aria-label": "",
|
||||||
|
"type": "clone",
|
||||||
|
"instructions": "",
|
||||||
|
"required": 0,
|
||||||
|
"conditional_logic": 0,
|
||||||
|
"wrapper": {
|
||||||
|
"width": "",
|
||||||
|
"class": "",
|
||||||
|
"id": ""
|
||||||
|
},
|
||||||
|
"graphql_field_name": "builder",
|
||||||
|
"clone": [
|
||||||
|
"group_abstract_builder"
|
||||||
|
],
|
||||||
|
"display": "seamless",
|
||||||
|
"layout": "block",
|
||||||
|
"prefix_label": 0,
|
||||||
|
"prefix_name": 0,
|
||||||
|
"acfe_seamless_style": 0,
|
||||||
|
"acfe_clone_modal": 0,
|
||||||
|
"acfe_clone_modal_close": 0,
|
||||||
|
"acfe_clone_modal_button": "",
|
||||||
|
"acfe_clone_modal_size": "large"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"location": [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"param": "post_type",
|
||||||
|
"operator": "==",
|
||||||
|
"value": "page"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"menu_order": 0,
|
||||||
|
"position": "normal",
|
||||||
|
"style": "seamless",
|
||||||
|
"label_placement": "top",
|
||||||
|
"instruction_placement": "label",
|
||||||
|
"hide_on_screen": [
|
||||||
|
"the_content"
|
||||||
|
],
|
||||||
|
"active": true,
|
||||||
|
"description": "",
|
||||||
|
"show_in_rest": 0,
|
||||||
|
"display_title": "",
|
||||||
|
"acfe_autosync": [
|
||||||
|
"json"
|
||||||
|
],
|
||||||
|
"acfe_form": 0,
|
||||||
|
"show_in_graphql": 1,
|
||||||
|
"graphql_field_name": "GroupPostPage",
|
||||||
|
"map_graphql_types_from_location_rules": 0,
|
||||||
|
"graphql_types": "",
|
||||||
|
"acfe_meta": "",
|
||||||
|
"acfe_note": "",
|
||||||
|
"modified": 1768336934
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
fragment BuilderSections on GroupAbstractBuilder_Fields {
|
||||||
|
sections {
|
||||||
|
__typename
|
||||||
|
... on GroupAbstractBuilderSectionsTextBlockLayout {
|
||||||
|
... SectionTextBlock
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { BuilderSectionsFragment } from "#graphql/typed-documents";
|
||||||
|
|
||||||
|
defineProps<BuilderSectionsFragment>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<pre>{{ sections }}</pre>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
fragment NodePage on Page {
|
||||||
|
title
|
||||||
|
groupPostPage {
|
||||||
|
... BuilderSections
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { NodePageFragment } from "#graphql/typed-documents";
|
||||||
|
|
||||||
|
defineProps<NodePageFragment>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div id="node-page">
|
||||||
|
<h1 class="font-bold text-4xl">
|
||||||
|
{{ title }}
|
||||||
|
</h1>
|
||||||
|
<BuilderSections v-bind="groupPostPage" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
fragment SectionTextBlock on GroupAbstractBuilderSectionsTextBlockLayout {
|
||||||
|
content
|
||||||
|
}
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { SectionTextBlockFragment } from "#graphql/typed-documents";
|
||||||
|
|
||||||
|
defineProps<SectionTextBlockFragment>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div v-html="content" />
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
query NodeByUri($uri: String!) {
|
||||||
|
nodeByUri(uri: $uri) {
|
||||||
|
__typename
|
||||||
|
... on Page {
|
||||||
|
... NodePage
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,6 +1,19 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
const { path: uri } = useRoute();
|
||||||
|
const { data } = await useGraphQLQuery("NodeByUri", { uri });
|
||||||
|
|
||||||
|
// Resolve and validate Node component
|
||||||
|
if (!data.value.nodeByUri) {
|
||||||
|
throw createError({ statusCode: 404, message: `La page demandée est introuvable: ${uri}` });
|
||||||
|
}
|
||||||
|
const componentName = `Node${data.value.nodeByUri.__typename}`;
|
||||||
|
if (!useNuxtApp().vueApp.component(componentName)) {
|
||||||
|
throw createError({ statusCode: 404, message: `La page demandée ne peut pas être affichée correctement: ${componentName}` });
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="page-node-from-uri" />
|
<div v-if="data.nodeByUri" id="page-node-from-uri">
|
||||||
|
<Component :is="componentName" v-bind="data.nodeByUri" />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user