├── plugins ├── splitting.client.js └── README.md ├── static ├── favicon.ico └── README.md ├── slices ├── Summary │ ├── default-slice │ │ └── preview.png │ ├── index.vue │ └── model.json └── index.js ├── sm.json ├── .editorconfig ├── layouts ├── README.md └── default.vue ├── pages ├── README.md └── index.vue ├── assets └── README.md ├── tailwind.config.js ├── middleware └── README.md ├── store └── README.md ├── README.md ├── package.json ├── LICENSE ├── utils.js ├── customtypes └── getting-started │ └── index.json ├── .gitignore ├── nuxt.config.js └── vue-essential-slices ├── TestimonialsSlider └── model.json └── FeatureTestimonials └── model.json /plugins/splitting.client.js: -------------------------------------------------------------------------------- 1 | import Splitting from "splitting"; 2 | 3 | Splitting(); 4 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/user-test-sm/main/static/favicon.ico -------------------------------------------------------------------------------- /slices/Summary/default-slice/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/user-test-sm/main/slices/Summary/default-slice/preview.png -------------------------------------------------------------------------------- /slices/index.js: -------------------------------------------------------------------------------- 1 | // This file is generated by Prismic local builder. Update with care! 2 | 3 | export { default as Summary } from './Summary' 4 | -------------------------------------------------------------------------------- /sm.json: -------------------------------------------------------------------------------- 1 | { 2 | "apiEndpoint": "https://project-name-user-test.cdn.prismic.io/api/v2", 3 | "libraries": [ 4 | "@/slices" 5 | ], 6 | "_latest": "0.1.0", 7 | "storybook": "http://localhost:3003" 8 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode: "jit", 3 | purge: ["./slices/**/*.vue"], 4 | theme: { 5 | container: { 6 | padding: "8rem" 7 | }, 8 | colors: { 9 | velvet: "#e31e3c", 10 | white: "#fefefe", 11 | black: "#111111", 12 | grey: "#858585" 13 | } 14 | } 15 | }; 16 | -------------------------------------------------------------------------------- /plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # prismic-user-test-sm 2 | 3 | A demo website for Design Team. 4 | 5 | ## Build Setup 6 | 7 | ```bash 8 | # install dependencies 9 | $ npm install 10 | 11 | # serve with hot reload at localhost:3000 12 | $ npm run dev 13 | 14 | # build for production and launch server 15 | $ npm run build 16 | $ npm run start 17 | 18 | # generate static project 19 | $ npm run generate 20 | ``` 21 | 22 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org). 23 | 24 | ## License 25 | 26 | [MIT License](./LICENSE) 27 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 26 | -------------------------------------------------------------------------------- /slices/Summary/index.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 33 | -------------------------------------------------------------------------------- /slices/Summary/model.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "summary", 3 | "type": "SharedSlice", 4 | "name": "Summary", 5 | "description": "Summary", 6 | "variations": [ 7 | { 8 | "id": "default-slice", 9 | "name": "Default slice", 10 | "docURL": "...", 11 | "version": "sktwi1xtmkfgx8626", 12 | "description": "Summary", 13 | "primary": { 14 | "title": { 15 | "config": { 16 | "label": "Title", 17 | "placeholder": "This is where it all begins...", 18 | "allowTargetBlank": true, 19 | "single": "heading2" 20 | }, 21 | "type": "StructuredText" 22 | } 23 | }, 24 | "items": { 25 | "item": { 26 | "config": { 27 | "label": "", 28 | "placeholder": "How to do this", 29 | "allowTargetBlank": true, 30 | "multi": "paragraph,embed" 31 | }, 32 | "type": "StructuredText" 33 | } 34 | } 35 | } 36 | ] 37 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "project-name", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate", 10 | "slicemachine": "start-slicemachine --port 9999", 11 | "storybook": "nuxt storybook", 12 | "build-storybook": "nuxt storybook build" 13 | }, 14 | "dependencies": { 15 | "@fontsource/montserrat": "^4.4.5", 16 | "@fontsource/yeseva-one": "^4.4.5", 17 | "core-js": "^3.14.0", 18 | "gsap": "3.7.0", 19 | "nuxt": "^2.15.6", 20 | "nuxt-sm": "^0.0.8", 21 | "sass": "^1.35.2", 22 | "sass-loader": "^10.1.1", 23 | "splitting": "1.0.6", 24 | "vue-essential-slices": "^0.3.0", 25 | "vue-slicezone": "^0.1.0" 26 | }, 27 | "devDependencies": { 28 | "@nuxt/image": "0.4.14", 29 | "@nuxtjs/prismic": "^1.3.1", 30 | "@nuxtjs/storybook": "4.0.4", 31 | "@nuxtjs/tailwindcss": "^4.1.3", 32 | "postcss": "^8.3.1", 33 | "slice-machine-ui": "alpha" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021-present, Lucie Haberer (https://lihbr.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /utils.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | export const isRichText = data => Array.isArray(data) 3 | 4 | export const maybeRichTextValidator = prop => { 5 | const type = typeof prop 6 | return ['string', 'object'].includes(type) 7 | } 8 | 9 | const camelizeRE = /-(\w)/g 10 | export const camelize = str => { 11 | str = str.replace(/_/g, '-').replace(camelizeRE, (_, c) => { 12 | return c ? c.toUpperCase() : '' 13 | }) 14 | return str[0].toUpperCase() + str.slice(1) 15 | } 16 | 17 | export const computeProp = 18 | (propName)=> (props) => Object.keys(props.theme).length ? props.theme[propName] : props[propName] 19 | 20 | export const createComputedProps = (...args) => args.reduce((acc, propName) => ({ 21 | ...acc, 22 | [`applied${propName.charAt(0).toUpperCase()}${propName.slice(1)}`]: computeProp(propName) 23 | }), {}) 24 | 25 | export const commonProps = { 26 | slice: { 27 | validator: function({ slice_type: sliceType, primary, items }) { 28 | return sliceType && primary && items 29 | } 30 | }, 31 | theme: { 32 | type: Object, 33 | required: false, 34 | default() { 35 | return {} 36 | } 37 | }, 38 | darkMode: { 39 | type: Boolean, 40 | required: false, 41 | default: false 42 | } 43 | } -------------------------------------------------------------------------------- /customtypes/getting-started/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "getting-started", 3 | "label": "Getting Started", 4 | "status": true, 5 | "repeatable": false, 6 | "json": { 7 | "Main": { 8 | "uid": { 9 | "type": "UID", 10 | "config": { 11 | "label": "", 12 | "placeholder": "" 13 | } 14 | }, 15 | "title": { 16 | "type": "StructuredText", 17 | "config": { 18 | "label": "", 19 | "placeholder": "", 20 | "allowTargetBlank": true, 21 | "single": "paragraph,preformatted,heading1,heading2,heading3,heading4,heading5,heading6,strong,em,hyperlink,image,embed,list-item,o-list-item,rtl" 22 | } 23 | }, 24 | "paragraph": { 25 | "type": "StructuredText", 26 | "config": { 27 | "label": "", 28 | "placeholder": "", 29 | "allowTargetBlank": true, 30 | "single": "paragraph,preformatted,heading1,heading2,heading3,heading4,heading5,heading6,strong,em,hyperlink,image,embed,list-item,o-list-item,rtl" 31 | } 32 | }, 33 | "link": { 34 | "type": "StructuredText", 35 | "config": { 36 | "label": "", 37 | "placeholder": "", 38 | "allowTargetBlank": true, 39 | "single": "hyperlink,paragraph" 40 | } 41 | }, 42 | "slices": { 43 | "type": "Slices", 44 | "fieldset": "Slice Zone", 45 | "config": { 46 | "choices": { 47 | "summary": { 48 | "type": "SharedSlice" 49 | } 50 | } 51 | } 52 | } 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .nuxt-storybook 2 | storybook-static 3 | .slicemachine 4 | 5 | # Created by .ignore support plugin (hsz.mobi) 6 | ### Node template 7 | # Logs 8 | /logs 9 | *.log 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Runtime data 15 | pids 16 | *.pid 17 | *.seed 18 | *.pid.lock 19 | 20 | # Directory for instrumented libs generated by jscoverage/JSCover 21 | lib-cov 22 | 23 | # Coverage directory used by tools like istanbul 24 | coverage 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # TypeScript v1 declaration files 46 | typings/ 47 | 48 | # Optional npm cache directory 49 | .npm 50 | 51 | # Optional eslint cache 52 | .eslintcache 53 | 54 | # Optional REPL history 55 | .node_repl_history 56 | 57 | # Output of 'npm pack' 58 | *.tgz 59 | 60 | # Yarn Integrity file 61 | .yarn-integrity 62 | 63 | # dotenv environment variables file 64 | .env 65 | 66 | # parcel-bundler cache (https://parceljs.org/) 67 | .cache 68 | 69 | # next.js build output 70 | .next 71 | 72 | # nuxt.js build output 73 | .nuxt 74 | 75 | # Nuxt generate 76 | dist 77 | 78 | # vuepress build output 79 | .vuepress/dist 80 | 81 | # Serverless directories 82 | .serverless 83 | 84 | # IDE / Editor 85 | .idea 86 | 87 | # Service worker 88 | sw.* 89 | 90 | # macOS 91 | .DS_Store 92 | 93 | # Vim swap files 94 | *.swp 95 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | import { getStoriesPaths } from "slice-machine-ui/helpers/storybook"; 2 | 3 | export default { 4 | // Target: https://go.nuxtjs.dev/config-target 5 | target: "static", 6 | 7 | // Global page headers: https://go.nuxtjs.dev/config-head 8 | head: { 9 | title: "User test - project-name", 10 | htmlAttrs: { 11 | lang: "en" 12 | }, 13 | meta: [ 14 | { 15 | charset: "utf-8" 16 | }, 17 | { 18 | name: "viewport", 19 | content: "width=device-width, initial-scale=1" 20 | }, 21 | { 22 | hid: "description", 23 | name: "description", 24 | content: "" 25 | } 26 | ], 27 | link: [ 28 | { 29 | rel: "icon", 30 | type: "image/x-icon", 31 | href: "/favicon.ico" 32 | } 33 | ], 34 | script: [] 35 | }, 36 | 37 | // Global CSS: https://go.nuxtjs.dev/config-css 38 | css: ["@fontsource/montserrat", "@fontsource/yeseva-one"], 39 | 40 | // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins 41 | 42 | // Auto import components: https://go.nuxtjs.dev/config-components 43 | components: true, 44 | 45 | // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules 46 | buildModules: ["@nuxtjs/prismic", "@nuxtjs/tailwindcss", "@nuxt/image"], 47 | 48 | // Modules: https://go.nuxtjs.dev/config-modules 49 | modules: ["nuxt-sm"], 50 | 51 | image: { 52 | provider: "prismic", 53 | prismic: {} 54 | }, 55 | 56 | prismic: { 57 | endpoint: "https://project-name-user-test.cdn.prismic.io/api/v2" 58 | }, 59 | 60 | storybook: { 61 | stories: [...getStoriesPaths()] 62 | }, 63 | 64 | ignore: ["**/*.stories.js"], 65 | 66 | // Build Configuration: https://go.nuxtjs.dev/config-build 67 | build: { 68 | transpile: ["vue-slicezone", "nuxt-sm"] 69 | } 70 | }; 71 | -------------------------------------------------------------------------------- /vue-essential-slices/TestimonialsSlider/model.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "testimonials_slider", 3 | "type": "SharedSlice", 4 | "name": "TestimonialsSlider", 5 | "description": "Testimonials Slider", 6 | "variations": [ 7 | { 8 | "id": "default-slice", 9 | "name": "Default slice", 10 | "docURL": "...", 11 | "version": "sktwin81krgj8k0l", 12 | "description": "Testimonials Slider", 13 | "primary": { 14 | "eyebrow_headline": { 15 | "type": "StructuredText", 16 | "config": { 17 | "multi": "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, o-list-item", 18 | "allowTargetBlank": true, 19 | "label": "Eyebrow headline" 20 | } 21 | }, 22 | "title": { 23 | "type": "StructuredText", 24 | "config": { 25 | "single": "heading1, heading2, heading3, heading4, heading5, heading6", 26 | "label": "Title" 27 | } 28 | }, 29 | "paragraph": { 30 | "type": "StructuredText", 31 | "config": { 32 | "multi": "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, o-list-item", 33 | "label": "Paragraph" 34 | } 35 | }, 36 | "button_link": { 37 | "type": "Link", 38 | "config": { 39 | "label": "Button Link" 40 | } 41 | }, 42 | "button_label": { 43 | "type": "Text", 44 | "config": { 45 | "label": "Button Label", 46 | "placeholder": "Text for button" 47 | } 48 | } 49 | }, 50 | "items": { 51 | "image": { 52 | "type": "Image", 53 | "config": { 54 | "constraint": {}, 55 | "thumbnails": [], 56 | "label": "image" 57 | } 58 | }, 59 | "testimonial": { 60 | "type": "StructuredText", 61 | "config": { 62 | "multi": "paragraph, preformatted, strong, em, hyperlink, image, embed, list-item, o-list-item, o-list-item", 63 | "label": "testimonial" 64 | } 65 | }, 66 | "person": { 67 | "type": "Text", 68 | "config": { 69 | "label": "person", 70 | "placeholder": "Their full name" 71 | } 72 | }, 73 | "title": { 74 | "type": "Text", 75 | "config": { 76 | "label": "title", 77 | "placeholder": "Their title" 78 | } 79 | } 80 | } 81 | } 82 | ] 83 | } -------------------------------------------------------------------------------- /vue-essential-slices/FeatureTestimonials/model.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "feature_testimonials", 3 | "type": "SharedSlice", 4 | "name": "FeatureTestimonials", 5 | "description": "Feature Testimonials", 6 | "variations": [ 7 | { 8 | "id": "default-slice", 9 | "name": "Default slice", 10 | "docURL": "...", 11 | "version": "sktwin81krgj8k0i", 12 | "description": "Feature Testimonials", 13 | "primary": { 14 | "eyebrow_headline": { 15 | "type": "StructuredText", 16 | "config": { 17 | "label": "Eyebrow headline", 18 | "placeholder": "Reinforce your copy with a key-worded text, to be displayed before title", 19 | "single": "paragraph" 20 | } 21 | }, 22 | "title": { 23 | "type": "StructuredText", 24 | "config": { 25 | "label": "Title", 26 | "placeholder": "Our testimonial", 27 | "single": "heading2" 28 | } 29 | }, 30 | "description": { 31 | "type": "StructuredText", 32 | "config": { 33 | "label": "Description", 34 | "placeholder": "These are some awesome tutorials from our awesome clients ...", 35 | "multi": "paragraph, strong, em, hyperlink", 36 | "allowTargetBlank": true 37 | } 38 | }, 39 | "feature_illustration": { 40 | "type": "Image", 41 | "config": { 42 | "constraint": {}, 43 | "thumbnails": [], 44 | "label": "Feature Illustration" 45 | } 46 | } 47 | }, 48 | "items": { 49 | "client_logo": { 50 | "type": "Image", 51 | "config": { 52 | "constraint": { 53 | "width": 100, 54 | "height": 100 55 | }, 56 | "thumbnails": [], 57 | "label": "Client logo" 58 | } 59 | }, 60 | "profile_pic": { 61 | "type": "Image", 62 | "config": { 63 | "constraint": { 64 | "width": 80, 65 | "height": 80 66 | }, 67 | "thumbnails": [], 68 | "label": "Profile Pic" 69 | } 70 | }, 71 | "quote": { 72 | "type": "StructuredText", 73 | "config": { 74 | "multi": "paragraph", 75 | "label": "Quote", 76 | "placeholder": "Lorem ipsum dolor sit amet, ...." 77 | } 78 | }, 79 | "name": { 80 | "type": "StructuredText", 81 | "config": { 82 | "single": "paragraph", 83 | "label": "Name", 84 | "placeholder": "John McJohn" 85 | } 86 | }, 87 | "role_position": { 88 | "type": "StructuredText", 89 | "config": { 90 | "single": "paragraph", 91 | "label": "Role position", 92 | "placeholder": "Creative Director" 93 | } 94 | } 95 | } 96 | } 97 | ] 98 | } --------------------------------------------------------------------------------