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">
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user