Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Focused Improvements] Use the app name as the prefix value for placeholders #830

Merged
merged 10 commits into from
Oct 13, 2021
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Apply prefix for Vue
illiakovalenko committed Oct 12, 2021
commit 6a5ea4070ab4a96d734ea37324427558b1a3323b
4 changes: 2 additions & 2 deletions samples/vue/data/routes/en.yml
Original file line number Diff line number Diff line change
@@ -16,10 +16,10 @@ id: home-page
# Define route level fields in /sitecore/definitions/routes.sitecore
fields:
pageTitle: Welcome to Sitecore JSS
# Define the page layout starting at the root placeholder - in this case, 'jss-main'
# Define the page layout starting at the root placeholder - in this case, 'JssVueWeb-main'
# root placeholder names are defined in the package.json config section (required for Sitecore deployment)
placeholders:
jss-main:
JssVueWeb-main:
- componentName: ContentBlock
fields:
heading: Welcome to Sitecore JSS
4 changes: 2 additions & 2 deletions samples/vue/data/routes/graphql/en.yml
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
fields:
pageTitle: GraphQL | Sitecore JSS
placeholders:
jss-main:
JssVueWeb-main:
- componentName: ContentBlock
fields:
heading: Using GraphQL with JSS
@@ -10,7 +10,7 @@ placeholders:
For more information on GraphQL use in JSS, please see <a href="https://jss.sitecore.com" target="_blank" rel="noopener noreferrer">the documentation</a>.</p>
- componentName: GraphQL-Layout
placeholders:
jss-graphql-layout:
JssVueWeb-graphql-layout:
- componentName: GraphQL-IntegratedDemo
fields:
sample1: Hello integrated GraphQL world!
2 changes: 1 addition & 1 deletion samples/vue/data/routes/graphql/sample-1/en.yml
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
fields:
pageTitle: Sample 1 Page Title
placeholders:
jss-main:
JssVueWeb-main:
- componentName: ContentBlock
fields:
heading: GraphQL Sample 1
2 changes: 1 addition & 1 deletion samples/vue/data/routes/graphql/sample-2/en.yml
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
fields:
pageTitle: Sample 2 Page Title
placeholders:
jss-main:
JssVueWeb-main:
- componentName: ContentBlock
fields:
heading: GraphQL Sample 2
Original file line number Diff line number Diff line change
@@ -8,5 +8,5 @@ fields:
author: Myrtle
content: <p>Custom route type fields are good for things like articles, where you may wish to have a filter UI on content fields, such as author or category. Route level fields are easy to query against, whereas component-level fields are not because it's possible to remove a component from a route. Note that route level fields <em>cannot be personalized</em> because you cannot conditionally swap out the route item for a different content item.</p>
placeholders:
jss-main:
JssVueWeb-main:
- componentName: Styleguide-CustomRouteType
6 changes: 3 additions & 3 deletions samples/vue/data/routes/styleguide/da-DK.yml
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
fields:
pageTitle: Styleguide | Sitecore JSS
placeholders:
jss-main:
JssVueWeb-main:
- componentName: ContentBlock
fields:
heading: JSS Styleguide
@@ -13,12 +13,12 @@ placeholders:
<p>Indholdet og layoutet på denne side er defineret i <code>/data/routes/styleguide/da-DK.yml</code></p>
- componentName: Styleguide-Layout
placeholders:
jss-styleguide-layout:
JssVueWeb-styleguide-layout:
- componentName: Styleguide-Section
fields:
heading: Flersprogede mønstre
placeholders:
jss-styleguide-section:
JssVueWeb-styleguide-section:
- componentName: Styleguide-Multilingual
fields:
heading: Brug af ordbogen
18 changes: 9 additions & 9 deletions samples/vue/data/routes/styleguide/en.yml
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
fields:
pageTitle: Styleguide | Sitecore JSS
placeholders:
jss-main:
JssVueWeb-main:
- componentName: ContentBlock
fields:
heading: JSS Styleguide
@@ -10,12 +10,12 @@ placeholders:
<p>The content and layout of this page is defined in <code>/data/routes/styleguide/en.yml</code></p>
- componentName: Styleguide-Layout
placeholders:
jss-styleguide-layout:
JssVueWeb-styleguide-layout:
- componentName: Styleguide-Section
fields:
heading: Content Data
placeholders:
jss-styleguide-section:
JssVueWeb-styleguide-section:
- componentName: Styleguide-FieldUsage-Text
fields:
heading: Single-Line Text
@@ -171,15 +171,15 @@ placeholders:
fields:
heading: Layout Patterns
placeholders:
jss-header:
JssVueWeb-header:
- componentName: Styleguide-Layout-Reuse
jss-styleguide-section:
JssVueWeb-styleguide-section:
- componentName: Styleguide-Layout-Reuse
fields:
heading: Reusing Content
description: <p>JSS provides powerful options to reuse content, whether it's sharing a common piece of text across pages or sketching out a site with repeating <em>lorem ipsum</em> content.</p>
placeholders:
jss-reuse-example:
JssVueWeb-reuse-example:
# Reference shared content using its ID (this is defined in /data/component/content/Styleguide/ContentReuse/LoremIpsumContentBlock/en.yml)
# Shared content is an 'edit once, reflected everywhere' operation for a content author.
- id: lorem-ipsum-content-block
@@ -196,7 +196,7 @@ placeholders:
heading: Tabs
description: <p>Creating hierarchical components like tabs is made simpler in JSS because it's easy to introspect the layout structure.</p>
placeholders:
jss-tabs:
JssVueWeb-tabs:
- componentName: Styleguide-Layout-Tabs-Tab
fields:
title: Tab 1
@@ -213,7 +213,7 @@ placeholders:
fields:
heading: Sitecore Patterns
placeholders:
jss-styleguide-section:
JssVueWeb-styleguide-section:
- componentName: Styleguide-SitecoreContext
fields:
heading: Sitecore Context
@@ -240,7 +240,7 @@ placeholders:
fields:
heading: Multilingual Patterns
placeholders:
jss-styleguide-section:
JssVueWeb-styleguide-section:
- componentName: Styleguide-Multilingual
fields:
heading: Translation Patterns
2 changes: 1 addition & 1 deletion samples/vue/package.json
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@
"config": {
"appName": "JssVueWeb",
"rootPlaceholders": [
"jss-main"
"JssVueWeb-main"
],
"sitecoreDistPath": "/dist/JssVueWeb",
"sitecoreConfigPath": "/App_Config/Include/zzz",
Original file line number Diff line number Diff line change
@@ -11,6 +11,6 @@ export default function(manifest) {
name: 'GraphQL-Layout',
templateName: 'JssVueWeb-GraphQL-Layout',
icon: SitecoreIcon.Layout,
placeholders: ['jss-graphql-layout'],
placeholders: ['JssVueWeb-graphql-layout'],
});
}
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@ export default function(manifest) {
name: 'Styleguide-Layout-Reuse',
templateName: 'JssVueWeb-Styleguide-Layout-Reuse',
icon: SitecoreIcon.DocumentsExchange,
placeholders: ['jss-reuse-example'],
placeholders: ['JssVueWeb-reuse-example'],
// inherit fields from another template (../templates/Styleguide-Explanatory-Component)
// inheritance adds fields defined on the base template(s) implicitly to this component
inherits: ['JssVueWeb-styleguide-explanatory-component-template'],
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@ export default function(manifest) {
name: 'Styleguide-Layout-Tabs',
templateName: 'JssVueWeb-Styleguide-Layout-Tabs',
icon: SitecoreIcon.DocumentTag,
placeholders: ['jss-tabs'],
placeholders: ['JssVueWeb-tabs'],
// inherit fields from another template (../templates/Styleguide-Explanatory-Component)
// inheritance adds fields defined on the base template(s) implicitly to this component
inherits: ['JssVueWeb-styleguide-explanatory-component-template'],
Original file line number Diff line number Diff line change
@@ -11,6 +11,6 @@ export default function(manifest) {
name: 'Styleguide-Layout',
templateName: 'JssVueWeb-Styleguide-Layout',
icon: SitecoreIcon.Layout,
placeholders: ['jss-styleguide-layout'],
placeholders: ['JssVueWeb-styleguide-layout'],
});
}
Original file line number Diff line number Diff line change
@@ -12,6 +12,6 @@ export default function(manifest) {
templateName: 'JssVueWeb-Styleguide-Section',
icon: SitecoreIcon.DocumentTag,
fields: [{ name: 'heading', type: CommonFieldTypes.SingleLineText }],
placeholders: ['jss-styleguide-section'],
placeholders: ['JssVueWeb-styleguide-section'],
});
}
4 changes: 2 additions & 2 deletions samples/vue/sitecore/definitions/placeholders.sitecore.js
Original file line number Diff line number Diff line change
@@ -9,10 +9,10 @@ import { Manifest } from '@sitecore-jss/sitecore-jss-manifest';
*/
export default function addPlaceholdersToManifest(manifest) {
manifest.addPlaceholder(
{ name: 'jss-main', displayName: 'Main' },
{ name: 'JssVueWeb-main', displayName: 'Main' },
// you can optionally pass a GUID or unique (app-wide) string as an ID
// this will inform the ID that is set when imported into Sitecore.
// If the ID is not set, an ID is created based on the placeholder name.
{ name: 'jss-tabs', displayName: 'Tabs', id: 'tabs-placeholder' }
{ name: 'JssVueWeb-tabs', displayName: 'Tabs', id: 'tabs-placeholder' }
);
}
2 changes: 1 addition & 1 deletion samples/vue/src/Layout.vue
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@
<visitor-identification />
<navigation />
<div class="container">
<placeholder name="jss-main" :rendering="route" />
<placeholder name="JssVueWeb-main" :rendering="route" />
</div>
</div>
</template>
2 changes: 1 addition & 1 deletion samples/vue/src/components/GraphQL/GraphQL-Layout.vue
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@
deploy the app to Sitecore to run in integrated mode per the JSS documentation.
</p>
</template>
<sc-placeholder name="jss-graphql-layout" :rendering="rendering" v-else />
<sc-placeholder name="JssVueWeb-graphql-layout" :rendering="rendering" v-else />
</div>
</template>

Original file line number Diff line number Diff line change
@@ -36,7 +36,7 @@
Using a separate template when the `isEmpty` scoped property is true allows us to customize the rendering of an empty placeholder
and place it within a column div so that we can select it correctly.
-->
<sc-placeholder :rendering="rendering" name="jss-reuse-example">
<sc-placeholder :rendering="rendering" name="JssVueWeb-reuse-example">
<template v-slot="{ components, isEmpty }">
<div class="row">
<template v-if="!isEmpty">
Original file line number Diff line number Diff line change
@@ -83,7 +83,7 @@ export default {
return {
placeholders: [
{
placeholder: 'jss-tabs',
placeholder: 'JssVueWeb-tabs',
computedPropName: 'tabsPlaceholder',
},
],
6 changes: 3 additions & 3 deletions samples/vue/src/components/Styleguide/Styleguide-Layout.vue
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@
<template>
<div class="row">
<div class="col-sm-8 col-lg-10">
<sc-placeholder name="jss-styleguide-layout" :rendering="rendering" />
<sc-placeholder name="JssVueWeb-styleguide-layout" :rendering="rendering" />
</div>
<div class="col-sm-4 col-lg-2 order-sm-first pt-2">
<nav v-for="section in sections" :key="section.heading" class="nav flex-column pt-2">
@@ -38,12 +38,12 @@ export default {
sections() {
// this code reads the components in the child placeholders of this component,
// and the template projects them into the left navigation column for the styleguide
return getChildPlaceholder(this.rendering, 'jss-styleguide-layout')
return getChildPlaceholder(this.rendering, 'JssVueWeb-styleguide-layout')
.filter((section) => getFieldValue(section, 'heading'))
.map((section) => ({
heading: getFieldValue(section, 'heading'),
id: `i${section.uid.replace(/[{}]/g, '')}`,
children: getChildPlaceholder(section, 'jss-styleguide-section')
children: getChildPlaceholder(section, 'JssVueWeb-styleguide-section')
.filter((component) => getFieldValue(component, 'heading'))
.map((component) => ({
heading: getFieldValue(component, 'heading'),
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@
<template>
<div class="pt-3" :id="`i${rendering.uid.replace(/[{}]/g, '')}`">
<sc-text class="border-bottom" :field="fields.heading" tag="h3" />
<sc-placeholder name="jss-styleguide-section" :rendering="rendering" />
<sc-placeholder name="JssVueWeb-styleguide-section" :rendering="rendering" />
</div>
</template>