Skip to content

Commit

Permalink
Working <structured-text /> component
Browse files Browse the repository at this point in the history
  • Loading branch information
@stefanoverna
stefanoverna committed Jan 12, 2021
1 parent 274a771 commit 9e8e7ce
Show file tree
Hide file tree
Showing 9 changed files with 706 additions and 33 deletions.
10 changes: 9 additions & 1 deletion build/rollup.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,17 @@ export default {
globals: {
"@znck/prop-types": "PropTypes",
"hyphenate-style-name": "hypenateStyleName",
"datocms-structured-text-generic-html-renderer":
"datocmsStructuredTextGenericHtmlRenderer",
"datocms-structured-text-utils": "datocmsStructuredTextUtils",
},
},
external: ["@znck/prop-types", "hyphenate-style-name"],
external: [
"@znck/prop-types",
"hyphenate-style-name",
"datocms-structured-text-generic-html-renderer",
"datocms-structured-text-utils",
],
plugins: [
babel({
exclude: "node_modules/**",
Expand Down
274 changes: 264 additions & 10 deletions examples/with-nuxt/pages/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@
<template>
<div>
<div class="seo-inspect">
Inspect the HTML source and look at all the juicy SEO meta tags we're generating!
Inspect the HTML source and look at all the juicy SEO meta tags we're
generating!
</div>
<div class="app">
<div class="app-title">DatoCMS Blog</div>
<div class="app-subtitle">
News, tips, highlights, and other updates from the team at DatoCMS.
</div>
<structured-text
:structuredText="structuredText"
:renderInlineRecord="renderInlineRecord"
:renderLinkToRecord="renderLinkToRecord"
:renderBlock="renderBlock"
/>
<article
v-for="blogPost in data.blogPosts"
:key="blogPost.id"
Expand Down Expand Up @@ -43,29 +50,276 @@
<script>
import { request } from "~/lib/datocms";
import { query } from "~/lib/query";
import { Image, toHead } from "vue-datocms";
import { Image, StructuredText, toHead } from "vue-datocms";
export default {
components: {
"datocms-image": Image
"datocms-image": Image,
"structured-text": StructuredText,
},
methods: {
renderInlineRecord: ({ record, h, key }) => {
switch (record.__typename) {
case "DocPageRecord":
return h(
"a",
{ attrs: { href: `/docs/${record.slug}` }, key },
record.title,
);
default:
return null;
}
},
renderLinkToRecord: ({ record, children, h, key }) => {
switch (record.__typename) {
case "DocPageRecord":
return h(
"a",
{ attrs: { href: `/docs/${record.slug}` }, key },
children,
);
default:
return null;
}
},
renderBlock: ({ record, key, h }) => {
switch (record.__typename) {
case "QuoteRecord":
return h("figure", { key }, [
h("blockquote", {}, record.quote),
h("figcaption", {}, record.author),
]);
default:
return null;
}
},
},
async asyncData({ params }) {
const data = await request({
query
query,
});
return { data };
return {
data,
structuredText: {
value: {
schema: "dast",
document: {
type: "root",
children: [
{
type: "heading",
level: 1,
children: [
{
type: "span",
value: "This is a ",
},
{
type: "span",
marks: ["highlight"],
value: "motherfucking website",
},
{
type: "span",
value: ".",
},
],
},
{
type: "paragraph",
children: [
{
type: "span",
value: "And it's ",
},
{
type: "span",
marks: ["strong"],
value: "fucking perfect",
},
{
type: "span",
value: ".",
},
],
},
{
type: "heading",
level: 2,
children: [
{
type: "span",
value: "Seriously, what the fuck else do you want?",
},
],
},
{
type: "list",
style: "bulleted",
children: [
{
type: "listItem",
children: [
{
type: "paragraph",
children: [
{
type: "span",
value: "Shit's lightweight and loads fast",
},
],
},
{
type: "list",
style: "bulleted",
children: [
{
type: "listItem",
children: [
{
type: "paragraph",
children: [
{
type: "span",
value: "Fits on all your shitty screens",
},
],
},
],
},
],
},
],
},
{
type: "listItem",
children: [
{
type: "paragraph",
children: [
{
type: "span",
value: "Looks the same in all your shitty browsers",
},
],
},
],
},
{
type: "listItem",
children: [
{
type: "paragraph",
children: [
{
type: "span",
value:
"The motherfucker's accessible to every asshole that visits your site",
},
],
},
{
type: "list",
style: "bulleted",
children: [
{
type: "listItem",
children: [
{
type: "paragraph",
children: [
{
type: "span",
value:
"Shit's legible and gets your fucking point across (if you had one instead of just 5mb pics of hipsters drinking coffee)",
},
],
},
],
},
],
},
],
},
],
},
{
type: "heading",
level: 2,
children: [
{
type: "span",
value: "It fucking works",
},
],
},
{
type: "blockquote",
children: [
{
type: "paragraph",
children: [
{
type: "span",
value:
'"Good design is as little design as possible." ',
},
],
},
{
type: "paragraph",
children: [
{
type: "span",
marks: ["emphasis"],
value: "- some German motherfucker",
},
{
type: "span",
value: " ",
},
],
},
],
},
{
type: "paragraph",
children: [
{
type: "span",
value: "From the philosophies expressed (poorly) above, ",
},
{
url: "http://txti.es",
type: "link",
children: [
{
type: "span",
value: "txti",
},
],
},
{
type: "span",
value:
" was created. You should try it today to make your own motherfucking websites.",
},
],
},
],
},
},
},
};
},
head() {
if (!this || !this.data) {
return;
}
return toHead(
this.data.page.seo,
this.data.site.favicon,
);
}
return toHead(this.data.page.seo, this.data.site.favicon);
},
};
</script>

Expand Down
Loading

0 comments on commit 9e8e7ce

Please sign in to comment.