https://idyll-lang.org/_next/static/chunks/pages/docs/configuration-and-styles-25cc85b37512f49f774e.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[545],{82280:function(e){"use strict";var t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e};e.exports=function e(n,o){if(n.length>=0&&n.raw||o&&o.length&&o.raw)throw new Error("you forgot to add 'markdown-in-js/babel' to your babel plugins");return"function"===typeof n?e({},n):o?"function"===typeof o?o(t({br:"br",a:"a",img:"img",em:"em",strong:"strong",p:"p",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",code:"code",pre:"pre",hr:"hr",blockquote:"blockquote",ul:"ul",ol:"ol",li:"li"},n)):void 0:function(t){return e(n,t)}}},38909:function(e,t,n){"use strict";n.r(t);n(67294);var o=n(41664),i=n(82280),s=n.n(i),l=n(83445),a=n(53951),r=n(85893),h=function(){return s()((function(e){return(0,r.jsxs)("div",{className:"_markdown_",children:[(0,r.jsx)(e.h2,{children:"Themes and page layout"}),(0,r.jsxs)(e.p,{children:["Idyll exposes two options to help you style your project, ",(0,r.jsx)(e.code,{children:"layout"})," and ",(0,r.jsx)(e.code,{children:"theme"}),". ",(0,r.jsx)(e.code,{children:"layout"})," deals with CSS styles related to how your content is layed out on the page: width, columns, etc. The ",(0,r.jsx)(e.code,{children:"theme"})," option allows you to choose different stylesheets to change the style of the content itself (text color, font, and so on)."]}),(0,r.jsx)(e.p,{children:'If more customization is required, you can provide a custom HTML template, and Idyll will generate articles within that custom template (see the "template" option above).'}),(0,r.jsx)(e.h3,{children:"Layout"}),(0,r.jsx)(e.p,{children:"Idyll currently ships with several page layouts that can be used to modify how content is displayed on the page, allowing you to quickly test out different narrative styles for you project."}),(0,r.jsx)(e.h4,{children:"Centered"}),(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"centered"})," layout puts your content in the center of the page and is mobile responsive."]}),(0,r.jsx)(e.p,{children:(0,r.jsx)(e.img,{src:"/static/images/layout-centered.png",alt:"centered"})}),(0,r.jsx)(e.h4,{children:"Blog"}),(0,r.jsxs)(e.p,{children:["This is the default layout. The ",(0,r.jsx)(e.code,{children:"blog"})," layout is fairly traditional article layout with room in the margin to put notes and other callouts. See ",(0,r.jsx)(e.a,{href:"https://mathisonian.github.io/trig/etymology/",children:"https://mathisonian.github.io/trig/etymology/"})," for an example of this layout."]}),(0,r.jsx)(e.p,{children:(0,r.jsx)(e.img,{src:"/static/images/layout-blog.png",alt:"centered"})}),(0,r.jsx)(e.h4,{children:"None"}),(0,r.jsxs)(e.p,{children:["If you set ",(0,r.jsx)(e.code,{children:"--layout none"})," Idyll won't provide any structural CSS, allowing you to customize things to your heart's content."]}),(0,r.jsx)(e.h3,{children:"Themes"}),(0,r.jsx)(e.h4,{children:"Default"}),(0,r.jsx)(e.p,{children:"This is the default theme. Use this as a starting point and add CSS to make posts your own."}),(0,r.jsx)(e.p,{children:(0,r.jsx)(e.img,{src:"/static/images/layout-blog.png",alt:"centered"})}),(0,r.jsx)(e.h4,{children:"GitHub"}),(0,r.jsx)(e.p,{children:"This theme is inspired by the style of GitHub README pages."}),(0,r.jsx)(e.h4,{children:"Tufte"}),(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"Tufte"})," theme uses styles from ",(0,r.jsx)(e.a,{href:"https://edwardtufte.github.io/tufte-css/",children:"https://edwardtufte.github.io/tufte-css/"}),"."]}),(0,r.jsx)(e.p,{children:(0,r.jsx)(e.img,{src:"/static/images/tufte.png",alt:"tufte"})})]})}))};t.default=function(e){var t=e.url;return(0,r.jsxs)(l.Z,{url:t,title:"Idyll Documentation | Configuration and Styles",children:[(0,r.jsx)("link",{rel:"stylesheet",href:"../../static/styles/tomorrow-night-eighties.css"}),(0,r.jsx)("h1",{children:"Configuration and Styles"}),(0,r.jsx)("p",{children:"Idyll is typically configured via options set in package.json, but all these same options can be configured via command line flags or when using Idyll as an API."}),(0,r.jsx)("p",{children:"Idyll looks for package.json file starting from the current directory where Idyll was run and searches through the parent directories till the root directory for another package.json file. This is useful for multipage projects where package.json need not be duplicated for each page. In cases where multiple package.json files are present with the same options configured, the local package.json will be given higher preference over options from package.json found in any parent folder."}),(0,r.jsx)("h2",{children:"Options"}),(0,r.jsxs)("ul",{children:[(0,r.jsxs)("li",{children:[(0,r.jsx)("b",{children:"layout"}),' - the name of the layout to use. By default this is "blog". More on layouts below.']}),(0,r.jsxs)("li",{children:[(0,r.jsx)("b",{children:"theme"}),' - the name of the theme to use. By default this is "default". More on themes below.']}),(0,r.jsxs)("li",{children:[(0,r.jsx)("b",{children:"authorView"}),' - whether to display component information on the page or not. By default this is "false"']}),(0,r.jsxs)("li",{children:[(0,r.jsx)("b",{children:"googleFonts"})," - a list of Google font names to include via CSS. This can be an array of str

1ings or a single string."]}),(0,r.jsxs)("li",{children:[(0,r.jsx)("b",{children:"favicon"}),' - an ico file to use as the favicon, should be inside of the static folder, e.g. "static/favicon.ico".']}),(0,r.jsxs)("li",{children:[(0,r.jsx)("b",{children:"alias"})," - Customize component resolution, for example"," ",(0,r.jsx)("code",{children:'{ "VL": "IdyllVegaLite" }'})," would let you use tags like"," ",(0,r.jsx)("code",{children:"[VL /]"})," in your markup, instead of"," ",(0,r.jsx)("code",{children:"[IdyllVegaLite /]"}),"."]}),(0,r.jsxs)("li",{children:[(0,r.jsx)("b",{children:"template"})," - a custom HTML template to use. The default template can be found"," ",(0,r.jsx)("a",{href:"https://github.com/idyll-lang/idyll/blob/master/packages/idyll-cli/src/client/_index.html",children:"here"})]}),(0,r.jsxs)("li",{children:[(0,r.jsx)("b",{children:"components"}),' - the path to your custom components. By default this points to "components". This can be a string (a single path), or an array.']}),(0,r.jsxs)("li",{children:[(0,r.jsx)("b",{children:"css"})," - the path to a CSS file. You can use this to override Idyll's default styles."]}),(0,r.jsxs)("li",{children:[(0,r.jsx)("b",{children:"datasets"}),' - the path to the folder containing your datasets. By default this points to "data/".']}),(0,r.jsxs)("li",{children:[(0,r.jsx)("b",{children:"no-minify"})," - turn code minification off when building for production."]}),(0,r.jsxs)("li",{children:[(0,r.jsx)("b",{children:"no-ssr"})," - turn server-side rendering off when building for production."]}),(0,r.jsxs)("li",{children:[(0,r.jsx)("b",{children:"output"})," - the folder in which to place build output.."]}),(0,r.jsxs)("li",{children:[(0,r.jsx)("b",{children:"inputString"})," - string of Idyll markup. Use this flag to compile a string instead of a file."]})]}),"For example, package.json might contain the following:",(0,r.jsx)(a.default,{className:"json",children:'"idyll": {\n  "layout": "blog",\n  "theme": "my-custom-theme.css",\n  "components": ["./components/", "../some-other-components/"],\n  "googleFonts": ["Hanalei Fill"],\n  "favicon": "static/favicon.ico",\n  "alias": {\n    "VL": "IdyllVegaLite"\n  }\n}'}),(0,r.jsx)("p",{children:(0,r.jsx)("em",{children:"Note, when modifying these options you may need to restart the idyll server for the change to take effect."})}),(0,r.jsx)(h,{}),(0,r.jsxs)("section",{children:[(0,r.jsx)("h2",{children:"Using Idyll as an API"}),(0,r.jsx)("p",{children:"You can use Idyll directly from JavaScript as well; this is useful if you want to build on top of Idyll. For example, you could make a static blog engine that uses Idyll to compile the blog posts."}),(0,r.jsx)("h3",{children:"Example"}),(0,r.jsx)(a.default,{className:"javascript",children:"var Idyll = require('idyll');\n\nvar idyll = Idyll({\n  inputFile: 'my-file.idl'\n  output: 'build/',\n  htmlTemplate: '_index.html',\n  componentFolder: './components/'\n  dataFolder: './data',\n  layout: 'centered',\n  theme: 'default'\n});\n\nidyll.build()\n     .on('update', () => {}) // the compilation finished.\n     .on('error', () => {}) // there was an error\n"}),(0,r.jsxs)("p",{children:["If you pass ",(0,r.jsx)("code",{children:"live: true"})," to Idyll, it will continue to watch the input files for changes, and will emit the update event each time that the output is rebuilt."]}),(0,r.jsx)("p",{children:"You can also compile an input string directly instead of a file:"}),(0,r.jsx)(a.default,{className:"javascript",children:"var idyll = Idyll();\n\nidyll\n  .build('# My Idyll markup')\n  .on('update', () => { console.log('Finished.') });\n"})]}),(0,r.jsxs)("section",{children:[(0,r.jsx)("h2",{children:"Selecting Idyll options using the env parameter"}),(0,r.jsx)("p",{children:"Oftentimes it can be helpful to change your options based on where You are running Idyll. Idyll supports an env paramter you can use either by API or with the command-line with \\`--env my-env\\`"}),(0,r.jsx)("p",{children:"To use the env parameter you need to change the format of package.json to support multiple options."}),(0,r.jsx)("h3",{children:"package.json example"}),(0,r.jsx)(a.default,{className:"json",children:'"idyll": [\n        "my-env", {\n          "layout": "blog",\n          "theme": "my-custom-theme.css",\n          "components": ["./components/", "../some-other-components/"],\n          "googleFonts": ["Hanalei Fill"],\n          "favicon": "static/favicon.ico",\n          "alias": {\n            "VL": "IdyllVegaLite"\n          }

1],\n          [\n            "prod-env", {\n              "theme": "my-custom-prod-theme.css",\n          }]\n    ]}'}),(0,r.jsx)("p",{children:"If no env is supplied and package.json is in list format, the first env will be used by default."})]}),(0,r.jsxs)("p",{children:["Continue to the next section to learn about"," ",(0,r.jsx)(o.default,{href:"/docs/components",children:(0,r.jsx)("a",{children:"Idyll components"})}),"."]})]})}},29551:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/configuration-and-styles",function(){return n(38909)}])}},function(e){e.O(0,[774,470,951,445,888,179],(function(){return t=29551,e(e.s=t);var t}));var t=e.O();_N_E=t}]);