diff --git a/404.html b/404.html index 338c5df1e..2faa8d232 100644 --- a/404.html +++ b/404.html @@ -5,10 +5,10 @@ Page Not Found | Touying - - + + -
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

+
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

\ No newline at end of file diff --git a/assets/js/06e97d6d.81d6b0db.js b/assets/js/06e97d6d.81d6b0db.js new file mode 100644 index 000000000..a0d54bba7 --- /dev/null +++ b/assets/js/06e97d6d.81d6b0db.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7899],{225:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>p,contentTitle:()=>r,default:()=>u,frontMatter:()=>o,metadata:()=>a,toc:()=>l});var t=n(5893),i=n(1151);const o={sidebar_position:2},r="Pympress",a={id:"external/pympress",title:"Pympress",description:"Pympress is a PDF presentation tool designed for dual-screen setups such as presentations and public talks. Highly configurable, fully-featured, and portable",source:"@site/versioned_docs/version-0.4.2/external/pympress.md",sourceDirName:"external",slug:"/external/pympress",permalink:"/touying/docs/external/pympress",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/external/pympress.md",tags:[],version:"0.4.2",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Pdfpc",permalink:"/touying/docs/external/pdfpc"},next:{title:"Typst Preview",permalink:"/touying/docs/external/typst-preview"}},p={},l=[{value:"Speaker Notes",id:"speaker-notes",level:2}];function c(e){const s={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.h1,{id:"pympress",children:"Pympress"}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.a,{href:"https://github.com/Cimbali/pympress",children:"Pympress"})," is a PDF presentation tool designed for dual-screen setups such as presentations and public talks. Highly configurable, fully-featured, and portable"]}),"\n",(0,t.jsx)(s.h2,{id:"speaker-notes",children:"Speaker Notes"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n\n// Set the speaker notes configuration, you can show it by pympress\n#let s = (s.methods.show-notes-on-second-screen)(self: s, right)\n\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Animation\n\n== Simple Animation\n\nWe can use `#pause` to #pause display something later.\n\n#pause\n\nJust like this.\n\n#meanwhile\n\nMeanwhile, #pause we can also use `#meanwhile` to #pause display other content synchronously.\n\n#speaker-note[\n + This is a speaker note.\n + You won\'t see it unless you use `#let s = (s.math.show-notes-on-second-screen)(self: s, right)`\n]\n'})}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/b43c7f99-c5f9-4084-aa70-c1561e8aafee",alt:"image"})}),"\n",(0,t.jsx)(s.p,{children:"Then we can use the pympress to show it."}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/afbe17cb-46d4-4507-90e8-959c53de95d5",alt:"image"})})]})}function u(e={}){const{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>a,a:()=>r});var t=n(7294);const i={},o=t.createContext(i);function r(e){const s=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/e52dffae.2ec51e8f.js b/assets/js/072a110d.69f17c9c.js similarity index 94% rename from assets/js/e52dffae.2ec51e8f.js rename to assets/js/072a110d.69f17c9c.js index 8f6515c06..4e5b3e4b0 100644 --- a/assets/js/e52dffae.2ec51e8f.js +++ b/assets/js/072a110d.69f17c9c.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7603],{9916:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>r});var i=n(5893),t=n(1151);const l={sidebar_position:4},o="Code Style",d={id:"code-styles",title:"Code Style",description:"Simple Style",source:"@site/versioned_docs/version-0.4.1/code-styles.md",sourceDirName:".",slug:"/code-styles",permalink:"/touying/docs/code-styles",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/code-styles.md",tags:[],version:"0.4.1",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Sections and Subsections",permalink:"/touying/docs/sections"},next:{title:"Page Layout",permalink:"/touying/docs/layout"}},c={},r=[{value:"Simple Style",id:"simple-style",level:2},{value:"Block Style",id:"block-style",level:2},{value:"Convention Over Configuration",id:"convention-over-configuration",level:2}];function a(e){const s={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",...(0,t.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.h1,{id:"code-style",children:"Code Style"}),"\n",(0,i.jsx)(s.h2,{id:"simple-style",children:"Simple Style"}),"\n",(0,i.jsxs)(s.p,{children:["If we only need simplicity, we can directly input content under the heading, just like writing a normal Typst document. The heading here serves to divide the pages, and we can use commands like ",(0,i.jsx)(s.code,{children:"#pause"})," to achieve animation effects."]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/f5bdbf8f-7bf9-45fd-9923-0fa5d66450b2",alt:"image"})}),"\n",(0,i.jsxs)(s.p,{children:["You can use an empty heading ",(0,i.jsx)(s.code,{children:"=="})," to create a new page. This skill also helps clear the continuation of the previous title."]}),"\n",(0,i.jsxs)(s.p,{children:["PS: We can use the ",(0,i.jsx)(s.code,{children:"#slides-end"})," marker to signify the end of ",(0,i.jsx)(s.code,{children:"#show: slides"}),"."]}),"\n",(0,i.jsx)(s.h2,{id:"block-style",children:"Block Style"}),"\n",(0,i.jsxs)(s.p,{children:["Many times, using simple style alone cannot achieve all the functions we need. For more powerful features and clearer structure, we can also use block style in the form of ",(0,i.jsx)(s.code,{children:"#slide[...]"}),". The ",(0,i.jsx)(s.code,{children:"#slide"})," function needs to be unpacked using the syntax ",(0,i.jsx)(s.code,{children:"#let (slide, empty-slide) = utils.slides(s)"})," to be used correctly after ",(0,i.jsx)(s.code,{children:"#show: slides"}),"."]}),"\n",(0,i.jsx)(s.p,{children:"For example, the previous example can be transformed into:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\n#slide[\n Hello, Touying!\n\n #pause\n\n Hello, Typst!\n]\n'})}),"\n",(0,i.jsxs)(s.p,{children:["and ",(0,i.jsx)(s.code,{children:"#empty-slide[]"})," to create an empty slide without header and footer."]}),"\n",(0,i.jsx)(s.p,{children:"There are many advantages to doing this:"}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsxs)(s.li,{children:["Many times, we not only need the default ",(0,i.jsx)(s.code,{children:"#slide[...]"})," but also special ",(0,i.jsx)(s.code,{children:"slide"})," functions like ",(0,i.jsx)(s.code,{children:"#focus-slide[...]"}),"."]}),"\n",(0,i.jsxs)(s.li,{children:["Different themes' ",(0,i.jsx)(s.code,{children:"#slide[...]"})," functions may have more parameters than the default, such as the university theme's ",(0,i.jsx)(s.code,{children:"#slide[...]"})," function having a ",(0,i.jsx)(s.code,{children:"subtitle"})," parameter."]}),"\n",(0,i.jsxs)(s.li,{children:["Only ",(0,i.jsx)(s.code,{children:"slide"})," functions can use the callback-style content block to achieve complex animation effects with ",(0,i.jsx)(s.code,{children:"#only"})," and ",(0,i.jsx)(s.code,{children:"#uncover"})," functions."]}),"\n",(0,i.jsxs)(s.li,{children:["It has a clearer structure. By identifying ",(0,i.jsx)(s.code,{children:"#slide[...]"})," blocks, we can easily distinguish the specific pagination effects of slides."]}),"\n"]}),"\n",(0,i.jsx)(s.h2,{id:"convention-over-configuration",children:"Convention Over Configuration"}),"\n",(0,i.jsxs)(s.p,{children:["You may have noticed that when using the simple theme, using a level-one heading automatically creates a new section slide. This is because the simple theme registers an ",(0,i.jsx)(s.code,{children:"s.methods.touying-new-section-slide"})," method, so Touying will automatically call this method."]}),"\n",(0,i.jsx)(s.p,{children:"If we don't want it to automatically create such a section slide, we can delete this method:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register()\n#(s.methods.touying-new-section-slide = none)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/17a89a59-9491-4e1f-95c0-09a22105ab35",alt:"image"})}),"\n",(0,i.jsx)(s.p,{children:"As you can see, there are only two pages left, and the default section slide is gone."}),"\n",(0,i.jsx)(s.p,{children:"Similarly, we can register a new section slide:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register()\n#(s.methods.touying-new-section-slide = (self: none, section, ..args) => {\n self = utils.empty-page(self)\n (s.methods.touying-slide)(self: self, section: section, {\n set align(center + horizon)\n set text(size: 2em, fill: s.colors.primary, style: "italic", weight: "bold")\n section\n }, ..args)\n})\n#let (init, slides, touying-outline) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/5305efda-0cd4-42eb-9f2e-89abc30b6ca2",alt:"image"})}),"\n",(0,i.jsxs)(s.p,{children:["Similarly, we can modify ",(0,i.jsx)(s.code,{children:"s.methods.touying-new-subsection-slide"})," to do the same for ",(0,i.jsx)(s.code,{children:"subsection"}),"."]}),"\n",(0,i.jsxs)(s.p,{children:["In fact, besides ",(0,i.jsx)(s.code,{children:"s.methods.touying-new-section-slide"}),", another special ",(0,i.jsx)(s.code,{children:"slide"})," function is the ",(0,i.jsx)(s.code,{children:"s.methods.slide"})," function, which will be called by default in simple style when ",(0,i.jsx)(s.code,{children:"#slide[...]"})," is not explicitly used."]}),"\n",(0,i.jsxs)(s.p,{children:["Also, since ",(0,i.jsx)(s.code,{children:"#slide[...]"})," is registered in ",(0,i.jsx)(s.code,{children:'s.slides = ("slide",)'}),", the ",(0,i.jsx)(s.code,{children:"section"}),", ",(0,i.jsx)(s.code,{children:"subsection"}),", and ",(0,i.jsx)(s.code,{children:"title"})," parameters will be automatically passed, while others like ",(0,i.jsx)(s.code,{children:"#focus-slide[...]"})," will not automatically receive these three parameters."]}),"\n",(0,i.jsxs)(s.admonition,{title:"Principle",type:"tip",children:[(0,i.jsxs)(s.p,{children:["In fact, you can also not use ",(0,i.jsx)(s.code,{children:"#show: slides"})," and ",(0,i.jsx)(s.code,{children:"utils.slides(s)"}),", but only use ",(0,i.jsx)(s.code,{children:"utils.methods(s)"}),", for example:"]}),(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register()\n#let (init, touying-outline, slide) = utils.methods(s)\n#show: init\n\n#slide(section: [Title], title: [First Slide])[\n Hello, Touying!\n\n #pause\n\n Hello, Typst!\n]\n'})}),(0,i.jsxs)(s.p,{children:["Here, you need to manually pass in ",(0,i.jsx)(s.code,{children:"section"}),", ",(0,i.jsx)(s.code,{children:"subsection"}),", and ",(0,i.jsx)(s.code,{children:"title"}),", but it will have better performance, suitable for cases where faster performance is needed, such as when there are more than dozens or hundreds of pages."]})]})]})}function h(e={}){const{wrapper:s}={...(0,t.a)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>d,a:()=>o});var i=n(7294);const t={},l=i.createContext(t);function o(e){const s=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function d(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),i.createElement(l.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4061],{3074:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>r});var i=n(5893),t=n(1151);const l={sidebar_position:4},o="Code Style",d={id:"code-styles",title:"Code Style",description:"Simple Style",source:"@site/versioned_docs/version-0.4.2/code-styles.md",sourceDirName:".",slug:"/code-styles",permalink:"/touying/docs/code-styles",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/code-styles.md",tags:[],version:"0.4.2",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Sections and Subsections",permalink:"/touying/docs/sections"},next:{title:"Page Layout",permalink:"/touying/docs/layout"}},c={},r=[{value:"Simple Style",id:"simple-style",level:2},{value:"Block Style",id:"block-style",level:2},{value:"Convention Over Configuration",id:"convention-over-configuration",level:2}];function a(e){const s={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",...(0,t.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.h1,{id:"code-style",children:"Code Style"}),"\n",(0,i.jsx)(s.h2,{id:"simple-style",children:"Simple Style"}),"\n",(0,i.jsxs)(s.p,{children:["If we only need simplicity, we can directly input content under the heading, just like writing a normal Typst document. The heading here serves to divide the pages, and we can use commands like ",(0,i.jsx)(s.code,{children:"#pause"})," to achieve animation effects."]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.simple.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/f5bdbf8f-7bf9-45fd-9923-0fa5d66450b2",alt:"image"})}),"\n",(0,i.jsxs)(s.p,{children:["You can use an empty heading ",(0,i.jsx)(s.code,{children:"=="})," to create a new page. This skill also helps clear the continuation of the previous title."]}),"\n",(0,i.jsxs)(s.p,{children:["PS: We can use the ",(0,i.jsx)(s.code,{children:"#slides-end"})," marker to signify the end of ",(0,i.jsx)(s.code,{children:"#show: slides"}),"."]}),"\n",(0,i.jsx)(s.h2,{id:"block-style",children:"Block Style"}),"\n",(0,i.jsxs)(s.p,{children:["Many times, using simple style alone cannot achieve all the functions we need. For more powerful features and clearer structure, we can also use block style in the form of ",(0,i.jsx)(s.code,{children:"#slide[...]"}),". The ",(0,i.jsx)(s.code,{children:"#slide"})," function needs to be unpacked using the syntax ",(0,i.jsx)(s.code,{children:"#let (slide, empty-slide) = utils.slides(s)"})," to be used correctly after ",(0,i.jsx)(s.code,{children:"#show: slides"}),"."]}),"\n",(0,i.jsx)(s.p,{children:"For example, the previous example can be transformed into:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.simple.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\n#slide[\n Hello, Touying!\n\n #pause\n\n Hello, Typst!\n]\n'})}),"\n",(0,i.jsxs)(s.p,{children:["and ",(0,i.jsx)(s.code,{children:"#empty-slide[]"})," to create an empty slide without header and footer."]}),"\n",(0,i.jsx)(s.p,{children:"There are many advantages to doing this:"}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsxs)(s.li,{children:["Many times, we not only need the default ",(0,i.jsx)(s.code,{children:"#slide[...]"})," but also special ",(0,i.jsx)(s.code,{children:"slide"})," functions like ",(0,i.jsx)(s.code,{children:"#focus-slide[...]"}),"."]}),"\n",(0,i.jsxs)(s.li,{children:["Different themes' ",(0,i.jsx)(s.code,{children:"#slide[...]"})," functions may have more parameters than the default, such as the university theme's ",(0,i.jsx)(s.code,{children:"#slide[...]"})," function having a ",(0,i.jsx)(s.code,{children:"subtitle"})," parameter."]}),"\n",(0,i.jsxs)(s.li,{children:["Only ",(0,i.jsx)(s.code,{children:"slide"})," functions can use the callback-style content block to achieve complex animation effects with ",(0,i.jsx)(s.code,{children:"#only"})," and ",(0,i.jsx)(s.code,{children:"#uncover"})," functions."]}),"\n",(0,i.jsxs)(s.li,{children:["It has a clearer structure. By identifying ",(0,i.jsx)(s.code,{children:"#slide[...]"})," blocks, we can easily distinguish the specific pagination effects of slides."]}),"\n"]}),"\n",(0,i.jsx)(s.h2,{id:"convention-over-configuration",children:"Convention Over Configuration"}),"\n",(0,i.jsxs)(s.p,{children:["You may have noticed that when using the simple theme, using a level-one heading automatically creates a new section slide. This is because the simple theme registers an ",(0,i.jsx)(s.code,{children:"s.methods.touying-new-section-slide"})," method, so Touying will automatically call this method."]}),"\n",(0,i.jsx)(s.p,{children:"If we don't want it to automatically create such a section slide, we can delete this method:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.simple.register()\n#(s.methods.touying-new-section-slide = none)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/17a89a59-9491-4e1f-95c0-09a22105ab35",alt:"image"})}),"\n",(0,i.jsx)(s.p,{children:"As you can see, there are only two pages left, and the default section slide is gone."}),"\n",(0,i.jsx)(s.p,{children:"Similarly, we can register a new section slide:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.simple.register()\n#(s.methods.touying-new-section-slide = (self: none, section, ..args) => {\n self = utils.empty-page(self)\n (s.methods.touying-slide)(self: self, section: section, {\n set align(center + horizon)\n set text(size: 2em, fill: s.colors.primary, style: "italic", weight: "bold")\n section\n }, ..args)\n})\n#let (init, slides, touying-outline) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/5305efda-0cd4-42eb-9f2e-89abc30b6ca2",alt:"image"})}),"\n",(0,i.jsxs)(s.p,{children:["Similarly, we can modify ",(0,i.jsx)(s.code,{children:"s.methods.touying-new-subsection-slide"})," to do the same for ",(0,i.jsx)(s.code,{children:"subsection"}),"."]}),"\n",(0,i.jsxs)(s.p,{children:["In fact, besides ",(0,i.jsx)(s.code,{children:"s.methods.touying-new-section-slide"}),", another special ",(0,i.jsx)(s.code,{children:"slide"})," function is the ",(0,i.jsx)(s.code,{children:"s.methods.slide"})," function, which will be called by default in simple style when ",(0,i.jsx)(s.code,{children:"#slide[...]"})," is not explicitly used."]}),"\n",(0,i.jsxs)(s.p,{children:["Also, since ",(0,i.jsx)(s.code,{children:"#slide[...]"})," is registered in ",(0,i.jsx)(s.code,{children:'s.slides = ("slide",)'}),", the ",(0,i.jsx)(s.code,{children:"section"}),", ",(0,i.jsx)(s.code,{children:"subsection"}),", and ",(0,i.jsx)(s.code,{children:"title"})," parameters will be automatically passed, while others like ",(0,i.jsx)(s.code,{children:"#focus-slide[...]"})," will not automatically receive these three parameters."]}),"\n",(0,i.jsxs)(s.admonition,{title:"Principle",type:"tip",children:[(0,i.jsxs)(s.p,{children:["In fact, you can also not use ",(0,i.jsx)(s.code,{children:"#show: slides"})," and ",(0,i.jsx)(s.code,{children:"utils.slides(s)"}),", but only use ",(0,i.jsx)(s.code,{children:"utils.methods(s)"}),", for example:"]}),(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.simple.register()\n#let (init, touying-outline, slide) = utils.methods(s)\n#show: init\n\n#slide(section: [Title], title: [First Slide])[\n Hello, Touying!\n\n #pause\n\n Hello, Typst!\n]\n'})}),(0,i.jsxs)(s.p,{children:["Here, you need to manually pass in ",(0,i.jsx)(s.code,{children:"section"}),", ",(0,i.jsx)(s.code,{children:"subsection"}),", and ",(0,i.jsx)(s.code,{children:"title"}),", but it will have better performance, suitable for cases where faster performance is needed, such as when there are more than dozens or hundreds of pages."]})]})]})}function h(e={}){const{wrapper:s}={...(0,t.a)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>d,a:()=>o});var i=n(7294);const t={},l=i.createContext(t);function o(e){const s=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function d(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),i.createElement(l.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/1ea66885.82216cb7.js b/assets/js/0b163c46.891343f1.js similarity index 94% rename from assets/js/1ea66885.82216cb7.js rename to assets/js/0b163c46.891343f1.js index fce88e82d..b57aea587 100644 --- a/assets/js/1ea66885.82216cb7.js +++ b/assets/js/0b163c46.891343f1.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9985],{5099:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>a});var i=t(5893),s=t(1151);const o={sidebar_position:7},l="Multi-File Architecture",c={id:"multi-file",title:"Multi-File Architecture",description:"Touying features a syntax as concise as native Typst documents, along with numerous customizable configuration options, yet it still maintains real-time incremental compilation performance, making it suitable for writing large-scale slides.",source:"@site/versioned_docs/version-0.4.1/multi-file.md",sourceDirName:".",slug:"/multi-file",permalink:"/touying/docs/multi-file",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/multi-file.md",tags:[],version:"0.4.1",sidebarPosition:7,frontMatter:{sidebar_position:7},sidebar:"tutorialSidebar",previous:{title:"Global Settings",permalink:"/touying/docs/global-settings"},next:{title:"Dynamic Slides",permalink:"/touying/docs/category/dynamic-slides"}},r={},a=[{value:"Configuration and Content Separation",id:"configuration-and-content-separation",level:2},{value:"Multiple Sections",id:"multiple-sections",level:2}];function d(e){const n={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"multi-file-architecture",children:"Multi-File Architecture"}),"\n",(0,i.jsx)(n.p,{children:"Touying features a syntax as concise as native Typst documents, along with numerous customizable configuration options, yet it still maintains real-time incremental compilation performance, making it suitable for writing large-scale slides."}),"\n",(0,i.jsx)(n.p,{children:"If you need to write a large set of slides, such as a course manual spanning tens or hundreds of pages, you can also try Touying's multi-file architecture."}),"\n",(0,i.jsx)(n.h2,{id:"configuration-and-content-separation",children:"Configuration and Content Separation"}),"\n",(0,i.jsxs)(n.p,{children:["A simple Touying multi-file architecture consists of three files: a global configuration file ",(0,i.jsx)(n.code,{children:"globals.typ"}),", a main entry file ",(0,i.jsx)(n.code,{children:"main.typ"}),", and a content file ",(0,i.jsx)(n.code,{children:"content.typ"})," for storing the actual content."]}),"\n",(0,i.jsxs)(n.p,{children:["These three files are separated to allow both ",(0,i.jsx)(n.code,{children:"main.typ"})," and ",(0,i.jsx)(n.code,{children:"content.typ"})," to import ",(0,i.jsx)(n.code,{children:"globals.typ"})," without causing circular references."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"globals.typ"})," can be used to store some global custom functions and initialize Touying themes:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// globals.typ\n#import "@preview/touying:0.4.1": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#let (slide, empty-slide, title-slide, focus-slide, matrix-slide) = utils.slides(s)\n\n// as well as some utility functions\n'})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"main.typ"}),", as the main entry point of the project, applies show rules by importing ",(0,i.jsx)(n.code,{children:"globals.typ"})," and includes ",(0,i.jsx)(n.code,{children:"content.typ"})," using ",(0,i.jsx)(n.code,{children:"#include"}),":"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// main.typ\n#import "/globals.typ": *\n\n#show: init\n#show strong: alert\n#show: slides\n\n#include "content.typ"\n'})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"content.typ"})," is where you write the actual content:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// content.typ\n#import "/globals.typ": *\n\n= The Section\n\n== Slide Title\n\nHello, Touying!\n\n#focus-slide[\n Focus on me.\n]\n'})}),"\n",(0,i.jsx)(n.h2,{id:"multiple-sections",children:"Multiple Sections"}),"\n",(0,i.jsxs)(n.p,{children:["Implementing multiple sections is also straightforward. You only need to create a ",(0,i.jsx)(n.code,{children:"sections"})," directory and move the ",(0,i.jsx)(n.code,{children:"content.typ"})," file to the ",(0,i.jsx)(n.code,{children:"sections.typ"})," directory, for example:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// main.typ\n#import "/globals.typ": *\n\n#show: init\n#show strong: alert\n#show: slides\n\n#include "sections/content.typ"\n// #include "sections/another-section.typ"\n'})}),"\n",(0,i.jsx)(n.p,{children:"And"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// sections/content.typ\n#import "/globals.typ": *\n\n= The Section\n\n== Slide Title\n\nHello, Touying!\n\n#focus-slide[\n Focus on me.\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:"Now, you have learned how to use Touying to achieve a multi-file architecture for large-scale slides."})]})}function u(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>l});var i=t(7294);const s={},o=i.createContext(s);function l(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6486],{2502:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>a});var i=t(5893),s=t(1151);const o={sidebar_position:7},l="Multi-File Architecture",c={id:"multi-file",title:"Multi-File Architecture",description:"Touying features a syntax as concise as native Typst documents, along with numerous customizable configuration options, yet it still maintains real-time incremental compilation performance, making it suitable for writing large-scale slides.",source:"@site/versioned_docs/version-0.4.2/multi-file.md",sourceDirName:".",slug:"/multi-file",permalink:"/touying/docs/multi-file",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/multi-file.md",tags:[],version:"0.4.2",sidebarPosition:7,frontMatter:{sidebar_position:7},sidebar:"tutorialSidebar",previous:{title:"Global Settings",permalink:"/touying/docs/global-settings"},next:{title:"Dynamic Slides",permalink:"/touying/docs/category/dynamic-slides"}},r={},a=[{value:"Configuration and Content Separation",id:"configuration-and-content-separation",level:2},{value:"Multiple Sections",id:"multiple-sections",level:2}];function d(e){const n={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"multi-file-architecture",children:"Multi-File Architecture"}),"\n",(0,i.jsx)(n.p,{children:"Touying features a syntax as concise as native Typst documents, along with numerous customizable configuration options, yet it still maintains real-time incremental compilation performance, making it suitable for writing large-scale slides."}),"\n",(0,i.jsx)(n.p,{children:"If you need to write a large set of slides, such as a course manual spanning tens or hundreds of pages, you can also try Touying's multi-file architecture."}),"\n",(0,i.jsx)(n.h2,{id:"configuration-and-content-separation",children:"Configuration and Content Separation"}),"\n",(0,i.jsxs)(n.p,{children:["A simple Touying multi-file architecture consists of three files: a global configuration file ",(0,i.jsx)(n.code,{children:"globals.typ"}),", a main entry file ",(0,i.jsx)(n.code,{children:"main.typ"}),", and a content file ",(0,i.jsx)(n.code,{children:"content.typ"})," for storing the actual content."]}),"\n",(0,i.jsxs)(n.p,{children:["These three files are separated to allow both ",(0,i.jsx)(n.code,{children:"main.typ"})," and ",(0,i.jsx)(n.code,{children:"content.typ"})," to import ",(0,i.jsx)(n.code,{children:"globals.typ"})," without causing circular references."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"globals.typ"})," can be used to store some global custom functions and initialize Touying themes:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// globals.typ\n#import "@preview/touying:0.4.2": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#let (slide, empty-slide, title-slide, focus-slide, matrix-slide) = utils.slides(s)\n\n// as well as some utility functions\n'})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"main.typ"}),", as the main entry point of the project, applies show rules by importing ",(0,i.jsx)(n.code,{children:"globals.typ"})," and includes ",(0,i.jsx)(n.code,{children:"content.typ"})," using ",(0,i.jsx)(n.code,{children:"#include"}),":"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// main.typ\n#import "/globals.typ": *\n\n#show: init\n#show strong: alert\n#show: slides\n\n#include "content.typ"\n'})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"content.typ"})," is where you write the actual content:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// content.typ\n#import "/globals.typ": *\n\n= The Section\n\n== Slide Title\n\nHello, Touying!\n\n#focus-slide[\n Focus on me.\n]\n'})}),"\n",(0,i.jsx)(n.h2,{id:"multiple-sections",children:"Multiple Sections"}),"\n",(0,i.jsxs)(n.p,{children:["Implementing multiple sections is also straightforward. You only need to create a ",(0,i.jsx)(n.code,{children:"sections"})," directory and move the ",(0,i.jsx)(n.code,{children:"content.typ"})," file to the ",(0,i.jsx)(n.code,{children:"sections.typ"})," directory, for example:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// main.typ\n#import "/globals.typ": *\n\n#show: init\n#show strong: alert\n#show: slides\n\n#include "sections/content.typ"\n// #include "sections/another-section.typ"\n'})}),"\n",(0,i.jsx)(n.p,{children:"And"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// sections/content.typ\n#import "/globals.typ": *\n\n= The Section\n\n== Slide Title\n\nHello, Touying!\n\n#focus-slide[\n Focus on me.\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:"Now, you have learned how to use Touying to achieve a multi-file architecture for large-scale slides."})]})}function u(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>l});var i=t(7294);const s={},o=i.createContext(s);function l(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/0d1c87af.fa2a147e.js b/assets/js/0d1c87af.44d4dfc0.js similarity index 97% rename from assets/js/0d1c87af.fa2a147e.js rename to assets/js/0d1c87af.44d4dfc0.js index ad601e2ba..e0f9c3a87 100644 --- a/assets/js/0d1c87af.fa2a147e.js +++ b/assets/js/0d1c87af.44d4dfc0.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2792],{2006:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>a});var s=i(5893),t=i(1151);const l={sidebar_position:5},o="Aqua Theme",d={id:"themes/aqua",title:"Aqua Theme",description:"image",source:"@site/docs/themes/aqua.md",sourceDirName:"themes",slug:"/themes/aqua",permalink:"/touying/docs/next/themes/aqua",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/themes/aqua.md",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"University Theme",permalink:"/touying/docs/next/themes/university"},next:{title:"Creating Your Own Theme",permalink:"/touying/docs/next/build-your-own-theme"}},r={},a=[{value:"Initialization",id:"initialization",level:2},{value:"Color Themes",id:"color-themes",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",hr:"hr",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"aqua-theme",children:"Aqua Theme"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/5f9b3c99-a22a-4f3d-a266-93dd75997593",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["This theme is created by ",(0,s.jsx)(n.a,{href:"https://github.com/pride7",children:"@pride7"}),", featuring beautiful backgrounds made with Typst's visualization capabilities."]}),"\n",(0,s.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,s.jsx)(n.p,{children:"You can initialize it with the following code:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.aqua.register(aspect-ratio: "16-9", lang: "en")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, outline-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,s.jsxs)(n.p,{children:["Where ",(0,s.jsx)(n.code,{children:"register"})," takes parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"aspect-ratio"}),': The aspect ratio of slides, either "16-9" or "4-3", default is "16-9".']}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer"}),": Content shown on the right side of the footer, default is ",(0,s.jsx)(n.code,{children:"states.slide-counter.display()"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"lang"}),": Language configuration, currently supports ",(0,s.jsx)(n.code,{children:'"en"'})," and ",(0,s.jsx)(n.code,{children:'"zh"'}),", default is ",(0,s.jsx)(n.code,{children:'"en"'}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Aqua theme also provides an ",(0,s.jsx)(n.code,{children:"#alert[..]"})," function, which you can utilize with ",(0,s.jsx)(n.code,{children:"#show strong: alert"})," using ",(0,s.jsx)(n.code,{children:"*alert text*"})," syntax."]}),"\n",(0,s.jsx)(n.h2,{id:"color-themes",children:"Color Themes"}),"\n",(0,s.jsx)(n.p,{children:"Aqua by default uses:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.colors)(\n self: s,\n primary: rgb("#003F88"),\n primary-light: rgb("#2159A5"),\n primary-lightest: rgb("#F2F4F8"),\n'})}),"\n",(0,s.jsxs)(n.p,{children:["color themes, which you can modify by ",(0,s.jsx)(n.code,{children:"#let s = (s.methods.colors)(self: s, ..)"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,s.jsx)(n.p,{children:"Aqua theme offers a series of custom slide functions:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#title-slide(..args)\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"title-slide"})," will read information from ",(0,s.jsx)(n.code,{children:"self.info"})," for display."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#let outline-slide(self: none, enum-args: (:), leading: 50pt)\n"})}),"\n",(0,s.jsx)(n.p,{children:"Display an outline slide."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // Aqua theme\n title: auto,\n)[\n ...\n]\n"})}),"\n",(0,s.jsxs)(n.p,{children:["A default ordinary slide function with title and footer, where ",(0,s.jsx)(n.code,{children:"title"})," defaults to the current section title."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#focus-slide[\n ...\n]\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Used to draw the audience's attention. The background color is ",(0,s.jsx)(n.code,{children:"self.colors.primary"}),"."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#new-section-slide(title)\n"})}),"\n",(0,s.jsx)(n.p,{children:"Start a new section with the given title."}),"\n",(0,s.jsxs)(n.h2,{id:"slides-function",children:[(0,s.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"slides"})," function has parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"title-slide"}),": Default is ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"outline-slide"}),": Default is ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"slide-level"}),": Default is ",(0,s.jsx)(n.code,{children:"1"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["They can be set via ",(0,s.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["PS: The outline title can be modified via ",(0,s.jsx)(n.code,{children:"#(s.outline-title = [Outline])"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["Additionally, you can disable the automatic inclusion of ",(0,s.jsx)(n.code,{children:"new-section-slide"})," functionality by ",(0,s.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.aqua.register(aspect-ratio: "16-9", lang: "en")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, outline-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/eea4df8d-d9fd-43ac-aaf7-bb459864a9ac",alt:"image"})}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.aqua.register(aspect-ratio: "16-9", lang: "en")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, outline-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= The Section\n\n== Slide Title\n\n#slide[\n #lorem(40)\n]\n\n#focus-slide[\n Another variant with primary color in background...\n]\n\n== Summary\n\n#align(center + horizon)[\n #set text(size: 3em, weight: "bold", s.colors.primary)\n THANKS FOR ALL\n]\n'})})]})}function h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>d,a:()=>o});var s=i(7294);const t={},l=s.createContext(t);function o(e){const n=s.useContext(l);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),s.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2792],{2006:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>a});var s=i(5893),t=i(1151);const l={sidebar_position:5},o="Aqua Theme",d={id:"themes/aqua",title:"Aqua Theme",description:"image",source:"@site/docs/themes/aqua.md",sourceDirName:"themes",slug:"/themes/aqua",permalink:"/touying/docs/next/themes/aqua",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/themes/aqua.md",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"University Theme",permalink:"/touying/docs/next/themes/university"},next:{title:"Creating Your Own Theme",permalink:"/touying/docs/next/build-your-own-theme"}},r={},a=[{value:"Initialization",id:"initialization",level:2},{value:"Color Themes",id:"color-themes",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",hr:"hr",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"aqua-theme",children:"Aqua Theme"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/5f9b3c99-a22a-4f3d-a266-93dd75997593",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["This theme is created by ",(0,s.jsx)(n.a,{href:"https://github.com/pride7",children:"@pride7"}),", featuring beautiful backgrounds made with Typst's visualization capabilities."]}),"\n",(0,s.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,s.jsx)(n.p,{children:"You can initialize it with the following code:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.aqua.register(aspect-ratio: "16-9", lang: "en")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, outline-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,s.jsxs)(n.p,{children:["Where ",(0,s.jsx)(n.code,{children:"register"})," takes parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"aspect-ratio"}),': The aspect ratio of slides, either "16-9" or "4-3", default is "16-9".']}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer"}),": Content shown on the right side of the footer, default is ",(0,s.jsx)(n.code,{children:"states.slide-counter.display()"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"lang"}),": Language configuration, currently supports ",(0,s.jsx)(n.code,{children:'"en"'})," and ",(0,s.jsx)(n.code,{children:'"zh"'}),", default is ",(0,s.jsx)(n.code,{children:'"en"'}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Aqua theme also provides an ",(0,s.jsx)(n.code,{children:"#alert[..]"})," function, which you can utilize with ",(0,s.jsx)(n.code,{children:"#show strong: alert"})," using ",(0,s.jsx)(n.code,{children:"*alert text*"})," syntax."]}),"\n",(0,s.jsx)(n.h2,{id:"color-themes",children:"Color Themes"}),"\n",(0,s.jsx)(n.p,{children:"Aqua by default uses:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.colors)(\n self: s,\n primary: rgb("#003F88"),\n primary-light: rgb("#2159A5"),\n primary-lightest: rgb("#F2F4F8"),\n'})}),"\n",(0,s.jsxs)(n.p,{children:["color themes, which you can modify by ",(0,s.jsx)(n.code,{children:"#let s = (s.methods.colors)(self: s, ..)"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,s.jsx)(n.p,{children:"Aqua theme offers a series of custom slide functions:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#title-slide(..args)\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"title-slide"})," will read information from ",(0,s.jsx)(n.code,{children:"self.info"})," for display."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#let outline-slide(self: none, enum-args: (:), leading: 50pt)\n"})}),"\n",(0,s.jsx)(n.p,{children:"Display an outline slide."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // Aqua theme\n title: auto,\n)[\n ...\n]\n"})}),"\n",(0,s.jsxs)(n.p,{children:["A default ordinary slide function with title and footer, where ",(0,s.jsx)(n.code,{children:"title"})," defaults to the current section title."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#focus-slide[\n ...\n]\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Used to draw the audience's attention. The background color is ",(0,s.jsx)(n.code,{children:"self.colors.primary"}),"."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#new-section-slide(title)\n"})}),"\n",(0,s.jsx)(n.p,{children:"Start a new section with the given title."}),"\n",(0,s.jsxs)(n.h2,{id:"slides-function",children:[(0,s.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"slides"})," function has parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"title-slide"}),": Default is ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"outline-slide"}),": Default is ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"slide-level"}),": Default is ",(0,s.jsx)(n.code,{children:"1"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["They can be set via ",(0,s.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["PS: The outline title can be modified via ",(0,s.jsx)(n.code,{children:"#(s.outline-title = [Outline])"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["Additionally, you can disable the automatic inclusion of ",(0,s.jsx)(n.code,{children:"new-section-slide"})," functionality by ",(0,s.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.aqua.register(aspect-ratio: "16-9", lang: "en")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, outline-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/eea4df8d-d9fd-43ac-aaf7-bb459864a9ac",alt:"image"})}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.aqua.register(aspect-ratio: "16-9", lang: "en")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, outline-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= The Section\n\n== Slide Title\n\n#slide[\n #lorem(40)\n]\n\n#focus-slide[\n Another variant with primary color in background...\n]\n\n== Summary\n\n#align(center + horizon)[\n #set text(size: 3em, weight: "bold", s.colors.primary)\n THANKS FOR ALL\n]\n'})})]})}function h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>d,a:()=>o});var s=i(7294);const t={},l=s.createContext(t);function o(e){const n=s.useContext(l);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),s.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5a3af86b.fb070044.js b/assets/js/0ed1cf13.7e48b36a.js similarity index 95% rename from assets/js/5a3af86b.fb070044.js rename to assets/js/0ed1cf13.7e48b36a.js index cdb55efcb..a177ba35f 100644 --- a/assets/js/5a3af86b.fb070044.js +++ b/assets/js/0ed1cf13.7e48b36a.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7991],{7906:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>d,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>r,toc:()=>c});var t=i(5893),s=i(1151);const l={sidebar_position:4},o="University Theme",r={id:"themes/university",title:"University Theme",description:"image",source:"@site/versioned_docs/version-0.4.1/themes/university.md",sourceDirName:"themes",slug:"/themes/university",permalink:"/touying/docs/themes/university",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/themes/university.md",tags:[],version:"0.4.1",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Dewdrop Theme",permalink:"/touying/docs/themes/dewdrop"},next:{title:"Aqua Theme",permalink:"/touying/docs/themes/aqua"}},d={},c=[{value:"Initialization",id:"initialization",level:2},{value:"Color Theme",id:"color-theme",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"Title Slide",id:"title-slide",level:3},{value:"Regular Slide",id:"regular-slide",level:3},{value:"Focus Slide",id:"focus-slide",level:3},{value:"Matrix Slide",id:"matrix-slide",level:3},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"university-theme",children:"University Theme"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/4095163c-0c16-4760-b370-8adc1cdd7e6c",alt:"image"})}),"\n",(0,t.jsxs)(n.p,{children:["This aesthetically pleasing theme is courtesy of ",(0,t.jsx)(n.a,{href:"https://github.com/drupol",children:"Pol Dellaiera"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,t.jsx)(n.p,{children:"You can initialize the University theme using the following code:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, focus-slide, matrix-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"register"})," function accepts the following parameters:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"aspect-ratio"}),': Sets the aspect ratio of the slides to "16-9" or "4-3," with the default being "16-9."']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"progress-bar"}),": Controls whether the progress bar at the top of each slide is displayed, with the default being ",(0,t.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"display-current-section"}),": Whether to display the current section."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"footer-columns"}),": The width of the footer in the bottom three columns, the default is ",(0,t.jsx)(n.code,{children:"(25%, 1fr, 25%)"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"footer-a"}),": The first column, default is ",(0,t.jsx)(n.code,{children:"self => self.info.author"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"footer-b"}),": Second column, default is ",(0,t.jsx)(n.code,{children:"self => if self.info.short-title == auto { self.info.title } else { self.info.short-title }"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"footer-c"}),": third column, default is"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'self => {\n h(1fr)\n utils.info-date(self)\n h(1fr)\n states.slide-counter.display() + " / " + states.last-slide-number\n h(1fr)\n}\n'})}),"\n",(0,t.jsxs)(n.p,{children:["Additionally, the University theme provides an ",(0,t.jsx)(n.code,{children:"#alert[..]"})," function, which you can use with the ",(0,t.jsx)(n.code,{children:"#show strong: alert"})," syntax for emphasizing text with ",(0,t.jsx)(n.code,{children:"*alert text*"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"color-theme",children:"Color Theme"}),"\n",(0,t.jsx)(n.p,{children:"The University theme defaults to the following color theme:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.colors)(\n self: s,\n primary: rgb("#04364A"),\n secondary: rgb("#176B87"),\n tertiary: rgb("#448C95"),\n)\n'})}),"\n",(0,t.jsxs)(n.p,{children:["You can modify this color theme using ",(0,t.jsx)(n.code,{children:"#let s = (s.methods.colors)(self: s, ..)"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,t.jsx)(n.p,{children:"The University theme provides a series of custom slide functions:"}),"\n",(0,t.jsx)(n.h3,{id:"title-slide",children:"Title Slide"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#title-slide(logo: none, authors: none, ..args)\n"})}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"title-slide"})," function reads information from ",(0,t.jsx)(n.code,{children:"self.info"})," for display. You can also pass the ",(0,t.jsx)(n.code,{children:"logo"})," parameter and an array-type ",(0,t.jsx)(n.code,{children:"authors"})," parameter."]}),"\n",(0,t.jsx)(n.h3,{id:"regular-slide",children:"Regular Slide"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // university theme\n title: none,\n subtitle: none,\n header: none,\n footer: auto,\n)[\n ...\n]\n"})}),"\n",(0,t.jsxs)(n.p,{children:["The default slide function with a title and footer. The ",(0,t.jsx)(n.code,{children:"title"})," defaults to the current section title, and the footer is set as per your configuration."]}),"\n",(0,t.jsx)(n.h3,{id:"focus-slide",children:"Focus Slide"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#focus-slide(background-img: ..., background-color: ...)[\n ...\n]\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Used to capture the audience's attention. The default background color is ",(0,t.jsx)(n.code,{children:"self.colors.primary"}),"."]}),"\n",(0,t.jsx)(n.h3,{id:"matrix-slide",children:"Matrix Slide"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#matrix-slide(columns: ..., rows: ...)[\n ...\n][\n ...\n]\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Refer to the ",(0,t.jsx)(n.a,{href:"https://polylux.dev/book/themes/gallery/university.html",children:"documentation"}),"."]}),"\n",(0,t.jsxs)(n.h2,{id:"slides-function",children:[(0,t.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"slides"})," function has parameters:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"title-slide"}),": Defaults to ",(0,t.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"slide-level"}),": Defaults to ",(0,t.jsx)(n.code,{children:"1"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["You can set these parameters using ",(0,t.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["And the function of automatically adding ",(0,t.jsx)(n.code,{children:"new-section-slide"})," can be turned off by ",(0,t.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, focus-slide, matrix-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/58971045-0b0d-46cb-acc2-caf766c2432d",alt:"image"})}),"\n",(0,t.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, focus-slide, matrix-slide) = utils.slides(s)\n#show: slides.with(title-slide: false)\n\n#title-slide(authors: ([Author A], [Author B]))\n\n= The Section\n\n== Slide Title\n\n#slide[\n #lorem(40)\n]\n\n#slide(subtitle: emph[What is the problem?])[\n #lorem(40)\n]\n\n#focus-slide[\n Another variant with primary color in background...\n]\n\n#matrix-slide[\n left\n][\n middle\n][\n right\n]\n\n#matrix-slide(columns: 1)[\n top\n][\n bottom\n]\n\n#matrix-slide(columns: (1fr, 2fr, 1fr), ..(lorem(8),) * 9)\n'})})]})}function h(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>r,a:()=>o});var t=i(7294);const s={},l=t.createContext(s);function o(e){const n=t.useContext(l);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),t.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4245],{2936:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>d,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>r,toc:()=>c});var t=i(5893),s=i(1151);const l={sidebar_position:4},o="University Theme",r={id:"themes/university",title:"University Theme",description:"image",source:"@site/versioned_docs/version-0.4.2/themes/university.md",sourceDirName:"themes",slug:"/themes/university",permalink:"/touying/docs/themes/university",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/themes/university.md",tags:[],version:"0.4.2",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Dewdrop Theme",permalink:"/touying/docs/themes/dewdrop"},next:{title:"Aqua Theme",permalink:"/touying/docs/themes/aqua"}},d={},c=[{value:"Initialization",id:"initialization",level:2},{value:"Color Theme",id:"color-theme",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"Title Slide",id:"title-slide",level:3},{value:"Regular Slide",id:"regular-slide",level:3},{value:"Focus Slide",id:"focus-slide",level:3},{value:"Matrix Slide",id:"matrix-slide",level:3},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"university-theme",children:"University Theme"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/4095163c-0c16-4760-b370-8adc1cdd7e6c",alt:"image"})}),"\n",(0,t.jsxs)(n.p,{children:["This aesthetically pleasing theme is courtesy of ",(0,t.jsx)(n.a,{href:"https://github.com/drupol",children:"Pol Dellaiera"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,t.jsx)(n.p,{children:"You can initialize the University theme using the following code:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, focus-slide, matrix-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"register"})," function accepts the following parameters:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"aspect-ratio"}),': Sets the aspect ratio of the slides to "16-9" or "4-3," with the default being "16-9."']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"progress-bar"}),": Controls whether the progress bar at the top of each slide is displayed, with the default being ",(0,t.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"display-current-section"}),": Whether to display the current section."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"footer-columns"}),": The width of the footer in the bottom three columns, the default is ",(0,t.jsx)(n.code,{children:"(25%, 1fr, 25%)"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"footer-a"}),": The first column, default is ",(0,t.jsx)(n.code,{children:"self => self.info.author"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"footer-b"}),": Second column, default is ",(0,t.jsx)(n.code,{children:"self => if self.info.short-title == auto { self.info.title } else { self.info.short-title }"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"footer-c"}),": third column, default is"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'self => {\n h(1fr)\n utils.info-date(self)\n h(1fr)\n states.slide-counter.display() + " / " + states.last-slide-number\n h(1fr)\n}\n'})}),"\n",(0,t.jsxs)(n.p,{children:["Additionally, the University theme provides an ",(0,t.jsx)(n.code,{children:"#alert[..]"})," function, which you can use with the ",(0,t.jsx)(n.code,{children:"#show strong: alert"})," syntax for emphasizing text with ",(0,t.jsx)(n.code,{children:"*alert text*"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"color-theme",children:"Color Theme"}),"\n",(0,t.jsx)(n.p,{children:"The University theme defaults to the following color theme:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.colors)(\n self: s,\n primary: rgb("#04364A"),\n secondary: rgb("#176B87"),\n tertiary: rgb("#448C95"),\n)\n'})}),"\n",(0,t.jsxs)(n.p,{children:["You can modify this color theme using ",(0,t.jsx)(n.code,{children:"#let s = (s.methods.colors)(self: s, ..)"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,t.jsx)(n.p,{children:"The University theme provides a series of custom slide functions:"}),"\n",(0,t.jsx)(n.h3,{id:"title-slide",children:"Title Slide"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#title-slide(logo: none, authors: none, ..args)\n"})}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"title-slide"})," function reads information from ",(0,t.jsx)(n.code,{children:"self.info"})," for display. You can also pass the ",(0,t.jsx)(n.code,{children:"logo"})," parameter and an array-type ",(0,t.jsx)(n.code,{children:"authors"})," parameter."]}),"\n",(0,t.jsx)(n.h3,{id:"regular-slide",children:"Regular Slide"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // university theme\n title: none,\n subtitle: none,\n header: none,\n footer: auto,\n)[\n ...\n]\n"})}),"\n",(0,t.jsxs)(n.p,{children:["The default slide function with a title and footer. The ",(0,t.jsx)(n.code,{children:"title"})," defaults to the current section title, and the footer is set as per your configuration."]}),"\n",(0,t.jsx)(n.h3,{id:"focus-slide",children:"Focus Slide"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#focus-slide(background-img: ..., background-color: ...)[\n ...\n]\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Used to capture the audience's attention. The default background color is ",(0,t.jsx)(n.code,{children:"self.colors.primary"}),"."]}),"\n",(0,t.jsx)(n.h3,{id:"matrix-slide",children:"Matrix Slide"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#matrix-slide(columns: ..., rows: ...)[\n ...\n][\n ...\n]\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Refer to the ",(0,t.jsx)(n.a,{href:"https://polylux.dev/book/themes/gallery/university.html",children:"documentation"}),"."]}),"\n",(0,t.jsxs)(n.h2,{id:"slides-function",children:[(0,t.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"slides"})," function has parameters:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"title-slide"}),": Defaults to ",(0,t.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"slide-level"}),": Defaults to ",(0,t.jsx)(n.code,{children:"1"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["You can set these parameters using ",(0,t.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["And the function of automatically adding ",(0,t.jsx)(n.code,{children:"new-section-slide"})," can be turned off by ",(0,t.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, focus-slide, matrix-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/58971045-0b0d-46cb-acc2-caf766c2432d",alt:"image"})}),"\n",(0,t.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, focus-slide, matrix-slide) = utils.slides(s)\n#show: slides.with(title-slide: false)\n\n#title-slide(authors: ([Author A], [Author B]))\n\n= The Section\n\n== Slide Title\n\n#slide[\n #lorem(40)\n]\n\n#slide(subtitle: emph[What is the problem?])[\n #lorem(40)\n]\n\n#focus-slide[\n Another variant with primary color in background...\n]\n\n#matrix-slide[\n left\n][\n middle\n][\n right\n]\n\n#matrix-slide(columns: 1)[\n top\n][\n bottom\n]\n\n#matrix-slide(columns: (1fr, 2fr, 1fr), ..(lorem(8),) * 9)\n'})})]})}function h(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>r,a:()=>o});var t=i(7294);const s={},l=t.createContext(s);function o(e){const n=t.useContext(l);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),t.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/0f02b06b.20ab019a.js b/assets/js/0f02b06b.20ab019a.js new file mode 100644 index 000000000..e978cd2c0 --- /dev/null +++ b/assets/js/0f02b06b.20ab019a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[378],{3356:e=>{e.exports=JSON.parse('{"title":"Progress","description":"Manage and display progress in Touying, such as counters and sections.","slug":"/category/progress","permalink":"/touying/docs/0.4.1/category/progress","navigation":{"previous":{"title":"Creating Your Own Theme","permalink":"/touying/docs/0.4.1/build-your-own-theme"},"next":{"title":"Touying Counters","permalink":"/touying/docs/0.4.1/progress/counters"}}}')}}]); \ No newline at end of file diff --git a/assets/js/16a5b323.a868fb98.js b/assets/js/16a5b323.a868fb98.js new file mode 100644 index 000000000..f88223aaf --- /dev/null +++ b/assets/js/16a5b323.a868fb98.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7140],{1871:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>s,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>a});var i=t(5893),r=t(1151);const o={sidebar_position:4},s="Fletcher",c={id:"integration/fletcher",title:"Fletcher",description:"Touying provides the touying-reducer, which adds pause and meanwhile animations to Fletcher.",source:"@site/versioned_docs/version-0.4.1/integration/fletcher.md",sourceDirName:"integration",slug:"/integration/fletcher",permalink:"/touying/docs/0.4.1/integration/fletcher",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/integration/fletcher.md",tags:[],version:"0.4.1",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"CeTZ",permalink:"/touying/docs/0.4.1/integration/cetz"},next:{title:"Codly",permalink:"/touying/docs/0.4.1/integration/codly"}},d={},a=[];function l(e){const n={code:"code",h1:"h1",img:"img",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"fletcher",children:"Fletcher"}),"\n",(0,i.jsxs)(n.p,{children:["Touying provides the ",(0,i.jsx)(n.code,{children:"touying-reducer"}),", which adds ",(0,i.jsx)(n.code,{children:"pause"})," and ",(0,i.jsx)(n.code,{children:"meanwhile"})," animations to Fletcher."]}),"\n",(0,i.jsx)(n.p,{children:"An example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/cetz:0.2.2"\n#import "@preview/fletcher:0.4.4" as fletcher: node, edge\n\n// cetz and fletcher bindings for touying\n#let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true))\n#let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide)\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides.with(title-slide: false, outline-slide: false)\n\n// cetz animation\n#slide[\n Cetz in Touying:\n\n #cetz-canvas({\n import cetz.draw: *\n \n rect((0,0), (5,5))\n\n (pause,)\n\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n\n (pause,)\n\n line((0,0), (2.5, 2.5), name: "line")\n })\n]\n\n// fletcher animation\n#slide[\n Fletcher in Touying:\n\n #fletcher-diagram(\n node-stroke: .1em,\n node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),\n spacing: 4em,\n edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),\n node((0,0), `reading`, radius: 2em),\n edge((0,0), (0,0), `read()`, "--|>", bend: 130deg),\n pause,\n edge(`read()`, "-|>"),\n node((1,0), `eof`, radius: 2em),\n pause,\n edge(`close()`, "-|>"),\n node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)),\n edge((0,0), (2,0), `close()`, "-|>", bend: -40deg),\n )\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc",alt:"image"})})]})}function u(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>s});var i=t(7294);const r={},o=i.createContext(r);function s(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/1bf261d1.69b8cc69.js b/assets/js/1bf261d1.69b8cc69.js new file mode 100644 index 000000000..4a6925068 --- /dev/null +++ b/assets/js/1bf261d1.69b8cc69.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8271],{8593:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>r,toc:()=>a});var s=t(5893),i=t(1151);const o={sidebar_position:2},l="Metropolis Theme",r={id:"themes/metropolis",title:"Metropolis Theme",description:"image",source:"@site/versioned_docs/version-0.4.1/themes/metropolis.md",sourceDirName:"themes",slug:"/themes/metropolis",permalink:"/touying/docs/0.4.1/themes/metropolis",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/themes/metropolis.md",tags:[],version:"0.4.1",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Simple Theme",permalink:"/touying/docs/0.4.1/themes/simple"},next:{title:"Dewdrop Theme",permalink:"/touying/docs/0.4.1/themes/dewdrop"}},d={},a=[{value:"Initialization",id:"initialization",level:2},{value:"Color Theme",id:"color-theme",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",hr:"hr",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"metropolis-theme",children:"Metropolis Theme"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/383ceb22-f696-4450-83a6-c0f17e4597e1",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["This theme draws inspiration from Matthias Vogelgesang's ",(0,s.jsx)(n.a,{href:"https://github.com/matze/mtheme",children:"Metropolis beamer"})," theme and has been modified by ",(0,s.jsx)(n.a,{href:"https://github.com/Enivex",children:"Enivex"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"The Metropolis theme is elegant and suitable for everyday use. It is recommended to have Fira Sans and Fira Math fonts installed on your computer for the best results."}),"\n",(0,s.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,s.jsx)(n.p,{children:"You can initialize it using the following code:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"register"})," function takes the following parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"aspect-ratio"}),': The aspect ratio of the slides, either "16-9" or "4-3," defaulting to "16-9."']}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"header"}),": Content displayed in the header, defaulting to ",(0,s.jsx)(n.code,{children:"states.current-section-title"}),", or it can be passed as a function like ",(0,s.jsx)(n.code,{children:"self => self.info.title"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer"}),": Content displayed in the footer, defaulting to ",(0,s.jsx)(n.code,{children:"[]"}),", or it can be passed as a function like ",(0,s.jsx)(n.code,{children:"self => self.info.author"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer-right"}),": Content displayed on the right side of the footer, defaulting to ",(0,s.jsx)(n.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer-progress"}),": Whether to show the progress bar at the bottom of the slide, defaulting to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["The Metropolis theme also provides an ",(0,s.jsx)(n.code,{children:"#alert[..]"})," function, which you can use with ",(0,s.jsx)(n.code,{children:"#show strong: alert"})," using the ",(0,s.jsx)(n.code,{children:"*alert text*"})," syntax."]}),"\n",(0,s.jsx)(n.h2,{id:"color-theme",children:"Color Theme"}),"\n",(0,s.jsx)(n.p,{children:"Metropolis uses the following default color theme:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.colors)(\n self: s,\n neutral-lightest: rgb("#fafafa"),\n primary-dark: rgb("#23373b"),\n secondary-light: rgb("#eb811b"),\n secondary-lighter: rgb("#d6c6b7"),\n)\n'})}),"\n",(0,s.jsxs)(n.p,{children:["You can modify this color theme using ",(0,s.jsx)(n.code,{children:"#let s = (s.methods.colors)(self: s, ..)"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,s.jsx)(n.p,{children:"The Metropolis theme provides a variety of custom slide functions:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#title-slide(extra: none, ..args)\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"title-slide"})," reads information from ",(0,s.jsx)(n.code,{children:"self.info"})," for display, and you can also pass in an ",(0,s.jsx)(n.code,{children:"extra"})," parameter to display additional information."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // metropolis theme\n title: auto,\n footer: auto,\n align: horizon,\n)[\n ...\n]\n"})}),"\n",(0,s.jsx)(n.p,{children:"A default slide with headers and footers, where the title defaults to the current section title, and the footer is what you set."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#focus-slide[\n ...\n]\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Used to draw attention, with the background color set to ",(0,s.jsx)(n.code,{children:"self.colors.primary-dark"}),"."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#new-section-slide(short-title: auto, title)\n"})}),"\n",(0,s.jsx)(n.p,{children:"Creates a new section with the given title."}),"\n",(0,s.jsxs)(n.h2,{id:"slides-function",children:[(0,s.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"slides"})," function has the following parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"title-slide"}),": Defaults to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"outline-slide"}),": Defaults to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"slide-level"}),": Defaults to ",(0,s.jsx)(n.code,{children:"1"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["You can set these using ",(0,s.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["PS: You can modify the outline title using ",(0,s.jsx)(n.code,{children:"#(s.outline-title = [Outline])"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["And the function of automatically adding ",(0,s.jsx)(n.code,{children:"new-section-slide"})," can be turned off by ",(0,s.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slide, slides, title-slide, new-section-slide, focus-slide, touying-outline, alert) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/4ab45ee6-09f7-498b-b349-e889d6e42e3e",alt:"image"})}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#set text(font: "Fira Sans", weight: "light", size: 20pt)\n#show math.equation: set text(font: "Fira Math")\n#set strong(delta: 100)\n#set par(justify: true)\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= First Section\n\n#slide[\n A slide without a title but with some *important* information.\n]\n\n== A long long long long long long long long long long long long long long long long long long long long long long long long Title\n\n#slide[\n A slide with equation:\n\n $ x_(n+1) = (x_n + a/x_n) / 2 $\n\n #lorem(200)\n]\n\n= Second Section\n\n#focus-slide[\n Wake up!\n]\n\n== Simple Animation\n\n#slide[\n A simple #pause dynamic slide with #alert[alert]\n\n #pause\n \n text.\n]\n\n// appendix by freezing last-slide-number\n#let s = (s.methods.appendix)(self: s)\n#let (slide, empty-slide) = utils.slides(s)\n\n= Appendix\n\n#slide[\n Appendix.\n]\n'})})]})}function h(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>l});var s=t(7294);const i={},o=s.createContext(i);function l(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/1ea66885.f7c0e3e1.js b/assets/js/1ea66885.f7c0e3e1.js new file mode 100644 index 000000000..2700782ab --- /dev/null +++ b/assets/js/1ea66885.f7c0e3e1.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9985],{5099:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>a});var i=t(5893),s=t(1151);const o={sidebar_position:7},l="Multi-File Architecture",c={id:"multi-file",title:"Multi-File Architecture",description:"Touying features a syntax as concise as native Typst documents, along with numerous customizable configuration options, yet it still maintains real-time incremental compilation performance, making it suitable for writing large-scale slides.",source:"@site/versioned_docs/version-0.4.1/multi-file.md",sourceDirName:".",slug:"/multi-file",permalink:"/touying/docs/0.4.1/multi-file",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/multi-file.md",tags:[],version:"0.4.1",sidebarPosition:7,frontMatter:{sidebar_position:7},sidebar:"tutorialSidebar",previous:{title:"Global Settings",permalink:"/touying/docs/0.4.1/global-settings"},next:{title:"Dynamic Slides",permalink:"/touying/docs/0.4.1/category/dynamic-slides"}},r={},a=[{value:"Configuration and Content Separation",id:"configuration-and-content-separation",level:2},{value:"Multiple Sections",id:"multiple-sections",level:2}];function d(e){const n={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"multi-file-architecture",children:"Multi-File Architecture"}),"\n",(0,i.jsx)(n.p,{children:"Touying features a syntax as concise as native Typst documents, along with numerous customizable configuration options, yet it still maintains real-time incremental compilation performance, making it suitable for writing large-scale slides."}),"\n",(0,i.jsx)(n.p,{children:"If you need to write a large set of slides, such as a course manual spanning tens or hundreds of pages, you can also try Touying's multi-file architecture."}),"\n",(0,i.jsx)(n.h2,{id:"configuration-and-content-separation",children:"Configuration and Content Separation"}),"\n",(0,i.jsxs)(n.p,{children:["A simple Touying multi-file architecture consists of three files: a global configuration file ",(0,i.jsx)(n.code,{children:"globals.typ"}),", a main entry file ",(0,i.jsx)(n.code,{children:"main.typ"}),", and a content file ",(0,i.jsx)(n.code,{children:"content.typ"})," for storing the actual content."]}),"\n",(0,i.jsxs)(n.p,{children:["These three files are separated to allow both ",(0,i.jsx)(n.code,{children:"main.typ"})," and ",(0,i.jsx)(n.code,{children:"content.typ"})," to import ",(0,i.jsx)(n.code,{children:"globals.typ"})," without causing circular references."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"globals.typ"})," can be used to store some global custom functions and initialize Touying themes:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// globals.typ\n#import "@preview/touying:0.4.1": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#let (slide, empty-slide, title-slide, focus-slide, matrix-slide) = utils.slides(s)\n\n// as well as some utility functions\n'})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"main.typ"}),", as the main entry point of the project, applies show rules by importing ",(0,i.jsx)(n.code,{children:"globals.typ"})," and includes ",(0,i.jsx)(n.code,{children:"content.typ"})," using ",(0,i.jsx)(n.code,{children:"#include"}),":"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// main.typ\n#import "/globals.typ": *\n\n#show: init\n#show strong: alert\n#show: slides\n\n#include "content.typ"\n'})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"content.typ"})," is where you write the actual content:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// content.typ\n#import "/globals.typ": *\n\n= The Section\n\n== Slide Title\n\nHello, Touying!\n\n#focus-slide[\n Focus on me.\n]\n'})}),"\n",(0,i.jsx)(n.h2,{id:"multiple-sections",children:"Multiple Sections"}),"\n",(0,i.jsxs)(n.p,{children:["Implementing multiple sections is also straightforward. You only need to create a ",(0,i.jsx)(n.code,{children:"sections"})," directory and move the ",(0,i.jsx)(n.code,{children:"content.typ"})," file to the ",(0,i.jsx)(n.code,{children:"sections.typ"})," directory, for example:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// main.typ\n#import "/globals.typ": *\n\n#show: init\n#show strong: alert\n#show: slides\n\n#include "sections/content.typ"\n// #include "sections/another-section.typ"\n'})}),"\n",(0,i.jsx)(n.p,{children:"And"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// sections/content.typ\n#import "/globals.typ": *\n\n= The Section\n\n== Slide Title\n\nHello, Touying!\n\n#focus-slide[\n Focus on me.\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:"Now, you have learned how to use Touying to achieve a multi-file architecture for large-scale slides."})]})}function u(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>l});var i=t(7294);const s={},o=i.createContext(s);function l(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/76911421.4dd677bd.js b/assets/js/2073d020.a761cc63.js similarity index 95% rename from assets/js/76911421.4dd677bd.js rename to assets/js/2073d020.a761cc63.js index 13010e663..1d642bb58 100644 --- a/assets/js/76911421.4dd677bd.js +++ b/assets/js/2073d020.a761cc63.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7577],{7441:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>s,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});var o=t(5893),c=t(1151);const i={sidebar_position:4},s="Cover Function",r={id:"dynamic/cover",title:"Cover Function",description:"As you already know, both uncover and #pause use the cover function to conceal content that is not visible. So, what exactly is the cover function here?",source:"@site/versioned_docs/version-0.4.1/dynamic/cover.md",sourceDirName:"dynamic",slug:"/dynamic/cover",permalink:"/touying/docs/dynamic/cover",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/dynamic/cover.md",tags:[],version:"0.4.1",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Math Equation Animations",permalink:"/touying/docs/dynamic/equation"},next:{title:"Other Animations",permalink:"/touying/docs/dynamic/other"}},a={},d=[{value:"Default Cover Function: hide",id:"default-cover-function-hide",level:2},{value:"Updating the Cover Function",id:"updating-the-cover-function",level:2},{value:"hack: handle enum and list",id:"hack-handle-enum-and-list",level:2},{value:"Semi-Transparent Cover Function",id:"semi-transparent-cover-function",level:2}];function l(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,c.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{id:"cover-function",children:"Cover Function"}),"\n",(0,o.jsxs)(n.p,{children:["As you already know, both ",(0,o.jsx)(n.code,{children:"uncover"})," and ",(0,o.jsx)(n.code,{children:"#pause"})," use the ",(0,o.jsx)(n.code,{children:"cover"})," function to conceal content that is not visible. So, what exactly is the ",(0,o.jsx)(n.code,{children:"cover"})," function here?"]}),"\n",(0,o.jsxs)(n.h2,{id:"default-cover-function-hide",children:["Default Cover Function: ",(0,o.jsx)(n.code,{children:"hide"})]}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"cover"})," function is a method stored in ",(0,o.jsx)(n.code,{children:"s.methods.cover"}),", which is later used by ",(0,o.jsx)(n.code,{children:"uncover"})," and ",(0,o.jsx)(n.code,{children:"#pause"}),"."]}),"\n",(0,o.jsxs)(n.p,{children:["The default ",(0,o.jsx)(n.code,{children:"cover"})," function is the ",(0,o.jsx)(n.a,{href:"https://typst.app/docs/reference/layout/hide/",children:"hide"})," function. This function makes the internal content invisible without affecting the layout."]}),"\n",(0,o.jsx)(n.h2,{id:"updating-the-cover-function",children:"Updating the Cover Function"}),"\n",(0,o.jsxs)(n.p,{children:["In some cases, you might want to use your own ",(0,o.jsx)(n.code,{children:"cover"})," function. In that case, you can set your own ",(0,o.jsx)(n.code,{children:"cover"})," function using:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-typst",children:"let s = (s.methods.update-cover)(self: s, is-method: true, cover-fn)\n"})}),"\n",(0,o.jsxs)(n.p,{children:["Here, if you set ",(0,o.jsx)(n.code,{children:"is-method: false"}),", Touying will wrap ",(0,o.jsx)(n.code,{children:"cover-fn"})," into a method for you."]}),"\n",(0,o.jsx)(n.h2,{id:"hack-handle-enum-and-list",children:"hack: handle enum and list"}),"\n",(0,o.jsxs)(n.p,{children:["You will find that the existing cover function cannot hide the mark of enum and list, refer to ",(0,o.jsx)(n.a,{href:"https://github.com/touying-typ/touying/issues/10",children:"here"}),", so you can hack:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-typst",children:"#let s = (s.methods.update-cover)(self: s, body => box(scale(x: 0%, body)))\n"})}),"\n",(0,o.jsx)(n.h2,{id:"semi-transparent-cover-function",children:"Semi-Transparent Cover Function"}),"\n",(0,o.jsx)(n.p,{children:"Touying supports a semi-transparent cover function, which can be enabled by adding:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-typst",children:"#let s = (s.methods.enable-transparent-cover)(self: s)\n"})}),"\n",(0,o.jsxs)(n.p,{children:["You can adjust the transparency through the ",(0,o.jsx)(n.code,{children:"alpha: .."})," parameter."]}),"\n",(0,o.jsx)(n.admonition,{title:"Warning",type:"warning",children:(0,o.jsxs)(n.p,{children:["Note that the ",(0,o.jsx)(n.code,{children:"transparent-cover"})," here does not preserve text layout like ",(0,o.jsx)(n.code,{children:"hide"})," does because it adds an extra layer of ",(0,o.jsx)(n.code,{children:"box"}),", which may disrupt the original structure of the page."]})}),"\n",(0,o.jsxs)(n.admonition,{title:"Internals",type:"tip",children:[(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"enable-transparent-cover"})," method is defined as:"]}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-typst",children:"#let s.methods.enable-transparent-cover = (\n self: none,\n constructor: rgb,\n alpha: 85%,\n) => {\n self.methods.cover = (self: none, body) => {\n utils.cover-with-rect(\n fill: utils.update-alpha(\n constructor: constructor,\n self.page-args.fill,\n alpha,\n ),\n body\n )\n }\n self\n}\n"})}),(0,o.jsxs)(n.p,{children:["It creates a semi-transparent rectangular mask with the same color as the background to simulate the effect of transparent content. Here, ",(0,o.jsx)(n.code,{children:"constructor: rgb"})," and ",(0,o.jsx)(n.code,{children:"alpha: 85%"})," indicate the background color's construction function and transparency level, respectively."]})]})]})}function h(e={}){const{wrapper:n}={...(0,c.a)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>s});var o=t(7294);const c={},i=o.createContext(c);function s(e){const n=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(c):e.components||c:s(e.components),o.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2964],{3701:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>s,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});var o=t(5893),c=t(1151);const i={sidebar_position:4},s="Cover Function",r={id:"dynamic/cover",title:"Cover Function",description:"As you already know, both uncover and #pause use the cover function to conceal content that is not visible. So, what exactly is the cover function here?",source:"@site/versioned_docs/version-0.4.2/dynamic/cover.md",sourceDirName:"dynamic",slug:"/dynamic/cover",permalink:"/touying/docs/dynamic/cover",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/dynamic/cover.md",tags:[],version:"0.4.2",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Math Equation Animations",permalink:"/touying/docs/dynamic/equation"},next:{title:"Other Animations",permalink:"/touying/docs/dynamic/other"}},a={},d=[{value:"Default Cover Function: hide",id:"default-cover-function-hide",level:2},{value:"Updating the Cover Function",id:"updating-the-cover-function",level:2},{value:"hack: handle enum and list",id:"hack-handle-enum-and-list",level:2},{value:"Semi-Transparent Cover Function",id:"semi-transparent-cover-function",level:2}];function l(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,c.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{id:"cover-function",children:"Cover Function"}),"\n",(0,o.jsxs)(n.p,{children:["As you already know, both ",(0,o.jsx)(n.code,{children:"uncover"})," and ",(0,o.jsx)(n.code,{children:"#pause"})," use the ",(0,o.jsx)(n.code,{children:"cover"})," function to conceal content that is not visible. So, what exactly is the ",(0,o.jsx)(n.code,{children:"cover"})," function here?"]}),"\n",(0,o.jsxs)(n.h2,{id:"default-cover-function-hide",children:["Default Cover Function: ",(0,o.jsx)(n.code,{children:"hide"})]}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"cover"})," function is a method stored in ",(0,o.jsx)(n.code,{children:"s.methods.cover"}),", which is later used by ",(0,o.jsx)(n.code,{children:"uncover"})," and ",(0,o.jsx)(n.code,{children:"#pause"}),"."]}),"\n",(0,o.jsxs)(n.p,{children:["The default ",(0,o.jsx)(n.code,{children:"cover"})," function is the ",(0,o.jsx)(n.a,{href:"https://typst.app/docs/reference/layout/hide/",children:"hide"})," function. This function makes the internal content invisible without affecting the layout."]}),"\n",(0,o.jsx)(n.h2,{id:"updating-the-cover-function",children:"Updating the Cover Function"}),"\n",(0,o.jsxs)(n.p,{children:["In some cases, you might want to use your own ",(0,o.jsx)(n.code,{children:"cover"})," function. In that case, you can set your own ",(0,o.jsx)(n.code,{children:"cover"})," function using:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-typst",children:"let s = (s.methods.update-cover)(self: s, is-method: true, cover-fn)\n"})}),"\n",(0,o.jsxs)(n.p,{children:["Here, if you set ",(0,o.jsx)(n.code,{children:"is-method: false"}),", Touying will wrap ",(0,o.jsx)(n.code,{children:"cover-fn"})," into a method for you."]}),"\n",(0,o.jsx)(n.h2,{id:"hack-handle-enum-and-list",children:"hack: handle enum and list"}),"\n",(0,o.jsxs)(n.p,{children:["You will find that the existing cover function cannot hide the mark of enum and list, refer to ",(0,o.jsx)(n.a,{href:"https://github.com/touying-typ/touying/issues/10",children:"here"}),", so you can hack:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-typst",children:"#let s = (s.methods.update-cover)(self: s, body => box(scale(x: 0%, body)))\n"})}),"\n",(0,o.jsx)(n.h2,{id:"semi-transparent-cover-function",children:"Semi-Transparent Cover Function"}),"\n",(0,o.jsx)(n.p,{children:"Touying supports a semi-transparent cover function, which can be enabled by adding:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-typst",children:"#let s = (s.methods.enable-transparent-cover)(self: s)\n"})}),"\n",(0,o.jsxs)(n.p,{children:["You can adjust the transparency through the ",(0,o.jsx)(n.code,{children:"alpha: .."})," parameter."]}),"\n",(0,o.jsx)(n.admonition,{title:"Warning",type:"warning",children:(0,o.jsxs)(n.p,{children:["Note that the ",(0,o.jsx)(n.code,{children:"transparent-cover"})," here does not preserve text layout like ",(0,o.jsx)(n.code,{children:"hide"})," does because it adds an extra layer of ",(0,o.jsx)(n.code,{children:"box"}),", which may disrupt the original structure of the page."]})}),"\n",(0,o.jsxs)(n.admonition,{title:"Internals",type:"tip",children:[(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"enable-transparent-cover"})," method is defined as:"]}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-typst",children:"#let s.methods.enable-transparent-cover = (\n self: none,\n constructor: rgb,\n alpha: 85%,\n) => {\n self.methods.cover = (self: none, body) => {\n utils.cover-with-rect(\n fill: utils.update-alpha(\n constructor: constructor,\n self.page-args.fill,\n alpha,\n ),\n body\n )\n }\n self\n}\n"})}),(0,o.jsxs)(n.p,{children:["It creates a semi-transparent rectangular mask with the same color as the background to simulate the effect of transparent content. Here, ",(0,o.jsx)(n.code,{children:"constructor: rgb"})," and ",(0,o.jsx)(n.code,{children:"alpha: 85%"})," indicate the background color's construction function and transparency level, respectively."]})]})]})}function h(e={}){const{wrapper:n}={...(0,c.a)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>s});var o=t(7294);const c={},i=o.createContext(c);function s(e){const n=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(c):e.components||c:s(e.components),o.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/29255e1b.5027673a.js b/assets/js/29255e1b.5027673a.js new file mode 100644 index 000000000..e3c494ca5 --- /dev/null +++ b/assets/js/29255e1b.5027673a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6533],{1784:t=>{t.exports=JSON.parse('{"title":"Package Integration","description":"Discover how to integrate third-party packages with Touying.","slug":"/category/package-integration","permalink":"/touying/docs/0.4.1/category/package-integration","navigation":{"previous":{"title":"Handout Mode","permalink":"/touying/docs/0.4.1/dynamic/handout"},"next":{"title":"Pinit","permalink":"/touying/docs/0.4.1/integration/pinit"}}}')}}]); \ No newline at end of file diff --git a/assets/js/293f9c83.3b48b842.js b/assets/js/293f9c83.ff042e2e.js similarity index 98% rename from assets/js/293f9c83.3b48b842.js rename to assets/js/293f9c83.ff042e2e.js index 6431010a4..8ef1ebdda 100644 --- a/assets/js/293f9c83.3b48b842.js +++ b/assets/js/293f9c83.ff042e2e.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8088],{9547:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>o,default:()=>u,frontMatter:()=>r,metadata:()=>c,toc:()=>a});var i=t(5893),s=t(1151);const r={sidebar_position:3},o="CeTZ",c={id:"integration/cetz",title:"CeTZ",description:"Touying provides the touying-reducer, which adds pause and meanwhile animations to CeTZ and Fletcher.",source:"@site/docs/integration/cetz.md",sourceDirName:"integration",slug:"/integration/cetz",permalink:"/touying/docs/next/integration/cetz",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/integration/cetz.md",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"MiTeX",permalink:"/touying/docs/next/integration/mitex"},next:{title:"Fletcher",permalink:"/touying/docs/next/integration/fletcher"}},d={},a=[{value:"Simple Animation",id:"simple-animation",level:2},{value:"only and uncover",id:"only-and-uncover",level:2}];function l(e){const n={code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"cetz",children:"CeTZ"}),"\n",(0,i.jsxs)(n.p,{children:["Touying provides the ",(0,i.jsx)(n.code,{children:"touying-reducer"}),", which adds ",(0,i.jsx)(n.code,{children:"pause"})," and ",(0,i.jsx)(n.code,{children:"meanwhile"})," animations to CeTZ and Fletcher."]}),"\n",(0,i.jsx)(n.h2,{id:"simple-animation",children:"Simple Animation"}),"\n",(0,i.jsx)(n.p,{children:"An example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/cetz:0.2.2"\n#import "@preview/fletcher:0.4.4" as fletcher: node, edge\n\n// cetz and fletcher bindings for touying\n#let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true))\n#let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide)\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides.with(title-slide: false, outline-slide: false)\n\n// cetz animation\n#slide[\n Cetz in Touying:\n\n #cetz-canvas({\n import cetz.draw: *\n \n rect((0,0), (5,5))\n\n (pause,)\n\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n\n (pause,)\n\n line((0,0), (2.5, 2.5), name: "line")\n })\n]\n\n// fletcher animation\n#slide[\n Fletcher in Touying:\n\n #fletcher-diagram(\n node-stroke: .1em,\n node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),\n spacing: 4em,\n edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),\n node((0,0), `reading`, radius: 2em),\n edge((0,0), (0,0), `read()`, "--|>", bend: 130deg),\n pause,\n edge(`read()`, "-|>"),\n node((1,0), `eof`, radius: 2em),\n pause,\n edge(`close()`, "-|>"),\n node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)),\n edge((0,0), (2,0), `close()`, "-|>", bend: -40deg),\n )\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc",alt:"image"})}),"\n",(0,i.jsx)(n.h2,{id:"only-and-uncover",children:"only and uncover"}),"\n",(0,i.jsxs)(n.p,{children:["In fact, we can also use ",(0,i.jsx)(n.code,{children:"only"})," and ",(0,i.jsx)(n.code,{children:"uncover"})," within CeTZ, but it requires a bit of technique:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#slide(repeat: 3, self => [\n #let (uncover, only) = utils.methods(self)\n\n Cetz in Touying in subslide #self.subslide:\n\n #cetz.canvas({\n import cetz.draw: *\n let self = (self.methods.update-cover)(self: self, hide.with(bounds: true))\n let (uncover,) = utils.methods(self)\n \n rect((0,0), (5,5))\n\n uncover("2-3", {\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n })\n\n only(3, line((0,0), (2.5, 2.5), name: "line"))\n })\n])\n'})})]})}function u(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>o});var i=t(7294);const s={},r=i.createContext(s);function o(e){const n=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),i.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8088],{9547:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>o,default:()=>u,frontMatter:()=>r,metadata:()=>c,toc:()=>a});var i=t(5893),s=t(1151);const r={sidebar_position:3},o="CeTZ",c={id:"integration/cetz",title:"CeTZ",description:"Touying provides the touying-reducer, which adds pause and meanwhile animations to CeTZ and Fletcher.",source:"@site/docs/integration/cetz.md",sourceDirName:"integration",slug:"/integration/cetz",permalink:"/touying/docs/next/integration/cetz",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/integration/cetz.md",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"MiTeX",permalink:"/touying/docs/next/integration/mitex"},next:{title:"Fletcher",permalink:"/touying/docs/next/integration/fletcher"}},d={},a=[{value:"Simple Animation",id:"simple-animation",level:2},{value:"only and uncover",id:"only-and-uncover",level:2}];function l(e){const n={code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"cetz",children:"CeTZ"}),"\n",(0,i.jsxs)(n.p,{children:["Touying provides the ",(0,i.jsx)(n.code,{children:"touying-reducer"}),", which adds ",(0,i.jsx)(n.code,{children:"pause"})," and ",(0,i.jsx)(n.code,{children:"meanwhile"})," animations to CeTZ and Fletcher."]}),"\n",(0,i.jsx)(n.h2,{id:"simple-animation",children:"Simple Animation"}),"\n",(0,i.jsx)(n.p,{children:"An example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n#import "@preview/cetz:0.2.2"\n#import "@preview/fletcher:0.4.4" as fletcher: node, edge\n\n// cetz and fletcher bindings for touying\n#let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true))\n#let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide)\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides.with(title-slide: false, outline-slide: false)\n\n// cetz animation\n#slide[\n Cetz in Touying:\n\n #cetz-canvas({\n import cetz.draw: *\n \n rect((0,0), (5,5))\n\n (pause,)\n\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n\n (pause,)\n\n line((0,0), (2.5, 2.5), name: "line")\n })\n]\n\n// fletcher animation\n#slide[\n Fletcher in Touying:\n\n #fletcher-diagram(\n node-stroke: .1em,\n node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),\n spacing: 4em,\n edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),\n node((0,0), `reading`, radius: 2em),\n edge((0,0), (0,0), `read()`, "--|>", bend: 130deg),\n pause,\n edge(`read()`, "-|>"),\n node((1,0), `eof`, radius: 2em),\n pause,\n edge(`close()`, "-|>"),\n node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)),\n edge((0,0), (2,0), `close()`, "-|>", bend: -40deg),\n )\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc",alt:"image"})}),"\n",(0,i.jsx)(n.h2,{id:"only-and-uncover",children:"only and uncover"}),"\n",(0,i.jsxs)(n.p,{children:["In fact, we can also use ",(0,i.jsx)(n.code,{children:"only"})," and ",(0,i.jsx)(n.code,{children:"uncover"})," within CeTZ, but it requires a bit of technique:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#slide(repeat: 3, self => [\n #let (uncover, only) = utils.methods(self)\n\n Cetz in Touying in subslide #self.subslide:\n\n #cetz.canvas({\n import cetz.draw: *\n let self = (self.methods.update-cover)(self: self, hide.with(bounds: true))\n let (uncover,) = utils.methods(self)\n \n rect((0,0), (5,5))\n\n uncover("2-3", {\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n })\n\n only(3, line((0,0), (2.5, 2.5), name: "line"))\n })\n])\n'})})]})}function u(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>o});var i=t(7294);const s={},r=i.createContext(s);function o(e){const n=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),i.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/73a6f857.0174c396.js b/assets/js/2b886b59.f9ac1295.js similarity index 93% rename from assets/js/73a6f857.0174c396.js rename to assets/js/2b886b59.f9ac1295.js index d2252d0ae..1555b60f5 100644 --- a/assets/js/73a6f857.0174c396.js +++ b/assets/js/2b886b59.f9ac1295.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9632],{8813:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>r,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>a});var i=t(5893),s=t(1151);const o={sidebar_position:3},r="CeTZ",c={id:"integration/cetz",title:"CeTZ",description:"Touying provides the touying-reducer, which adds pause and meanwhile animations to CeTZ and Fletcher.",source:"@site/versioned_docs/version-0.4.1/integration/cetz.md",sourceDirName:"integration",slug:"/integration/cetz",permalink:"/touying/docs/integration/cetz",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/integration/cetz.md",tags:[],version:"0.4.1",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"MiTeX",permalink:"/touying/docs/integration/mitex"},next:{title:"Fletcher",permalink:"/touying/docs/integration/fletcher"}},d={},a=[{value:"Simple Animation",id:"simple-animation",level:2},{value:"only and uncover",id:"only-and-uncover",level:2}];function l(e){const n={code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"cetz",children:"CeTZ"}),"\n",(0,i.jsxs)(n.p,{children:["Touying provides the ",(0,i.jsx)(n.code,{children:"touying-reducer"}),", which adds ",(0,i.jsx)(n.code,{children:"pause"})," and ",(0,i.jsx)(n.code,{children:"meanwhile"})," animations to CeTZ and Fletcher."]}),"\n",(0,i.jsx)(n.h2,{id:"simple-animation",children:"Simple Animation"}),"\n",(0,i.jsx)(n.p,{children:"An example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/cetz:0.2.2"\n#import "@preview/fletcher:0.4.4" as fletcher: node, edge\n\n// cetz and fletcher bindings for touying\n#let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true))\n#let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide)\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides.with(title-slide: false, outline-slide: false)\n\n// cetz animation\n#slide[\n Cetz in Touying:\n\n #cetz-canvas({\n import cetz.draw: *\n \n rect((0,0), (5,5))\n\n (pause,)\n\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n\n (pause,)\n\n line((0,0), (2.5, 2.5), name: "line")\n })\n]\n\n// fletcher animation\n#slide[\n Fletcher in Touying:\n\n #fletcher-diagram(\n node-stroke: .1em,\n node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),\n spacing: 4em,\n edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),\n node((0,0), `reading`, radius: 2em),\n edge((0,0), (0,0), `read()`, "--|>", bend: 130deg),\n pause,\n edge(`read()`, "-|>"),\n node((1,0), `eof`, radius: 2em),\n pause,\n edge(`close()`, "-|>"),\n node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)),\n edge((0,0), (2,0), `close()`, "-|>", bend: -40deg),\n )\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc",alt:"image"})}),"\n",(0,i.jsx)(n.h2,{id:"only-and-uncover",children:"only and uncover"}),"\n",(0,i.jsxs)(n.p,{children:["In fact, we can also use ",(0,i.jsx)(n.code,{children:"only"})," and ",(0,i.jsx)(n.code,{children:"uncover"})," within CeTZ, but it requires a bit of technique:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#slide(repeat: 3, self => [\n #let (uncover, only) = utils.methods(self)\n\n Cetz in Touying in subslide #self.subslide:\n\n #cetz.canvas({\n import cetz.draw: *\n let self = (self.methods.update-cover)(self: self, hide.with(bounds: true))\n let (uncover,) = utils.methods(self)\n \n rect((0,0), (5,5))\n\n uncover("2-3", {\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n })\n\n only(3, line((0,0), (2.5, 2.5), name: "line"))\n })\n])\n'})})]})}function u(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>r});var i=t(7294);const s={},o=i.createContext(s);function r(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4645],{5186:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>r,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>a});var i=t(5893),s=t(1151);const o={sidebar_position:3},r="CeTZ",c={id:"integration/cetz",title:"CeTZ",description:"Touying provides the touying-reducer, which adds pause and meanwhile animations to CeTZ and Fletcher.",source:"@site/versioned_docs/version-0.4.2/integration/cetz.md",sourceDirName:"integration",slug:"/integration/cetz",permalink:"/touying/docs/integration/cetz",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/integration/cetz.md",tags:[],version:"0.4.2",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"MiTeX",permalink:"/touying/docs/integration/mitex"},next:{title:"Fletcher",permalink:"/touying/docs/integration/fletcher"}},d={},a=[{value:"Simple Animation",id:"simple-animation",level:2},{value:"only and uncover",id:"only-and-uncover",level:2}];function l(e){const n={code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"cetz",children:"CeTZ"}),"\n",(0,i.jsxs)(n.p,{children:["Touying provides the ",(0,i.jsx)(n.code,{children:"touying-reducer"}),", which adds ",(0,i.jsx)(n.code,{children:"pause"})," and ",(0,i.jsx)(n.code,{children:"meanwhile"})," animations to CeTZ and Fletcher."]}),"\n",(0,i.jsx)(n.h2,{id:"simple-animation",children:"Simple Animation"}),"\n",(0,i.jsx)(n.p,{children:"An example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n#import "@preview/cetz:0.2.2"\n#import "@preview/fletcher:0.4.4" as fletcher: node, edge\n\n// cetz and fletcher bindings for touying\n#let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true))\n#let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide)\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides.with(title-slide: false, outline-slide: false)\n\n// cetz animation\n#slide[\n Cetz in Touying:\n\n #cetz-canvas({\n import cetz.draw: *\n \n rect((0,0), (5,5))\n\n (pause,)\n\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n\n (pause,)\n\n line((0,0), (2.5, 2.5), name: "line")\n })\n]\n\n// fletcher animation\n#slide[\n Fletcher in Touying:\n\n #fletcher-diagram(\n node-stroke: .1em,\n node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),\n spacing: 4em,\n edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),\n node((0,0), `reading`, radius: 2em),\n edge((0,0), (0,0), `read()`, "--|>", bend: 130deg),\n pause,\n edge(`read()`, "-|>"),\n node((1,0), `eof`, radius: 2em),\n pause,\n edge(`close()`, "-|>"),\n node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)),\n edge((0,0), (2,0), `close()`, "-|>", bend: -40deg),\n )\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc",alt:"image"})}),"\n",(0,i.jsx)(n.h2,{id:"only-and-uncover",children:"only and uncover"}),"\n",(0,i.jsxs)(n.p,{children:["In fact, we can also use ",(0,i.jsx)(n.code,{children:"only"})," and ",(0,i.jsx)(n.code,{children:"uncover"})," within CeTZ, but it requires a bit of technique:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#slide(repeat: 3, self => [\n #let (uncover, only) = utils.methods(self)\n\n Cetz in Touying in subslide #self.subslide:\n\n #cetz.canvas({\n import cetz.draw: *\n let self = (self.methods.update-cover)(self: self, hide.with(bounds: true))\n let (uncover,) = utils.methods(self)\n \n rect((0,0), (5,5))\n\n uncover("2-3", {\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n })\n\n only(3, line((0,0), (2.5, 2.5), name: "line"))\n })\n])\n'})})]})}function u(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>r});var i=t(7294);const s={},o=i.createContext(s);function r(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/332622f2.b7c45f45.js b/assets/js/332622f2.b7c45f45.js new file mode 100644 index 000000000..b60f8399c --- /dev/null +++ b/assets/js/332622f2.b7c45f45.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7256],{4149:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>r,contentTitle:()=>a,default:()=>u,frontMatter:()=>s,metadata:()=>c,toc:()=>l});var t=i(5893),o=i(1151);const s={sidebar_position:3},a="Math Equation Animations",c={id:"dynamic/equation",title:"Math Equation Animations",description:"Touying also provides a unique and highly useful feature\u2014math equation animations, allowing you to conveniently use pause and meanwhile within math equations.",source:"@site/versioned_docs/version-0.4.1/dynamic/equation.md",sourceDirName:"dynamic",slug:"/dynamic/equation",permalink:"/touying/docs/0.4.1/dynamic/equation",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/dynamic/equation.md",tags:[],version:"0.4.1",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Complex Animations",permalink:"/touying/docs/0.4.1/dynamic/complex"},next:{title:"Cover Function",permalink:"/touying/docs/0.4.1/dynamic/cover"}},r={},l=[{value:"Simple Animation",id:"simple-animation",level:2},{value:"Complex Animation",id:"complex-animation",level:2},{value:"Parameters",id:"parameters",level:2}];function d(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"math-equation-animations",children:"Math Equation Animations"}),"\n",(0,t.jsxs)(n.p,{children:["Touying also provides a unique and highly useful feature\u2014math equation animations, allowing you to conveniently use ",(0,t.jsx)(n.code,{children:"pause"})," and ",(0,t.jsx)(n.code,{children:"meanwhile"})," within math equations."]}),"\n",(0,t.jsx)(n.h2,{id:"simple-animation",children:"Simple Animation"}),"\n",(0,t.jsx)(n.p,{children:"Let's start with an example:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#slide[\n Touying equation with pause:\n\n #touying-equation(`\n f(x) &= pause x^2 + 2x + 1 \\\n &= pause (x + 1)^2 \\\n `)\n\n #meanwhile\n\n Touying equation is very simple.\n]\n"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/d176e61f-c0da-4c2a-a1bf-52621be5adb2",alt:"image"})}),"\n",(0,t.jsxs)(n.p,{children:["We use the ",(0,t.jsx)(n.code,{children:"touying-equation"})," function to incorporate ",(0,t.jsx)(n.code,{children:"pause"})," and ",(0,t.jsx)(n.code,{children:"meanwhile"})," within the text of math equations (in fact, you can also use ",(0,t.jsx)(n.code,{children:"#pause"})," or ",(0,t.jsx)(n.code,{children:"#pause;"}),")."]}),"\n",(0,t.jsx)(n.p,{children:"As you would expect, the math equation is displayed step by step, making it suitable for presenters to demonstrate their math reasoning."}),"\n",(0,t.jsx)(n.admonition,{title:"Warning",type:"warning",children:(0,t.jsxs)(n.p,{children:["While the ",(0,t.jsx)(n.code,{children:"touying-equation"})," function is convenient, you should always be aware that it doesn't perform complex syntax analysis. It simply splits the string using regular expressions. Therefore, you should not use ",(0,t.jsx)(n.code,{children:"pause"})," or ",(0,t.jsx)(n.code,{children:"meanwhile"})," within functions like ",(0,t.jsx)(n.code,{children:"display(..)"}),"!"]})}),"\n",(0,t.jsx)(n.h2,{id:"complex-animation",children:"Complex Animation"}),"\n",(0,t.jsxs)(n.p,{children:["In fact, we can also use ",(0,t.jsx)(n.code,{children:"only"}),", ",(0,t.jsx)(n.code,{children:"uncover"}),", and ",(0,t.jsx)(n.code,{children:"alternatives"})," within ",(0,t.jsx)(n.code,{children:"touying-equation"})," with a little trick:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#slide(repeat: 3, self => [\n #let (uncover, only, alternatives) = utils.methods(self)\n\n #touying-equation(scope: (uncover: uncover), `\n f(x) &= pause x^2 + 2x + uncover("3-", 1) \\\n &= pause (x + 1)^2 \\\n `)\n])\n'})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/f2df14a2-6424-4c53-81f7-1595aa330660",alt:"image"})}),"\n",(0,t.jsxs)(n.p,{children:["We can pass the functions we need into the ",(0,t.jsx)(n.code,{children:"touying-equation"})," through the ",(0,t.jsx)(n.code,{children:"scope"})," parameter, such as ",(0,t.jsx)(n.code,{children:"uncover"})," in this example."]}),"\n",(0,t.jsx)(n.h2,{id:"parameters",children:"Parameters"}),"\n",(0,t.jsxs)(n.p,{children:["The function definition of ",(0,t.jsx)(n.code,{children:"touying-equation"})," is:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#let touying-equation(block: true, numbering: none, supplement: auto, scope: (:), body) = { .. }\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Therefore, you can pass parameters like ",(0,t.jsx)(n.code,{children:"block"}),", ",(0,t.jsx)(n.code,{children:"numbering"}),", and ",(0,t.jsx)(n.code,{children:"supplement"})," to ",(0,t.jsx)(n.code,{children:"touying-equation"})," just like using normal math equations."]})]})}function u(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>c,a:()=>a});var t=i(7294);const o={},s=t.createContext(o);function a(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/33b22e37.4ebbbed0.js b/assets/js/33b22e37.4ebbbed0.js new file mode 100644 index 000000000..48f53faed --- /dev/null +++ b/assets/js/33b22e37.4ebbbed0.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8937],{4911:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>r,default:()=>d,frontMatter:()=>s,metadata:()=>a,toc:()=>l});var o=t(5893),i=t(1151);const s={sidebar_position:6},r="Ctheorems",a={id:"integration/ctheorems",title:"Ctheorems",description:"Touying can work seamlessly with the ctheorems package, allowing you to directly use the ctheorems package.",source:"@site/versioned_docs/version-0.4.1/integration/ctheorems.md",sourceDirName:"integration",slug:"/integration/ctheorems",permalink:"/touying/docs/0.4.1/integration/ctheorems",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/integration/ctheorems.md",tags:[],version:"0.4.1",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"tutorialSidebar",previous:{title:"Codly",permalink:"/touying/docs/0.4.1/integration/codly"},next:{title:"Themes",permalink:"/touying/docs/0.4.1/category/themes"}},c={},l=[];function m(e){const n={code:"code",h1:"h1",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{id:"ctheorems",children:"Ctheorems"}),"\n",(0,o.jsxs)(n.p,{children:["Touying can work seamlessly with the ",(0,o.jsx)(n.code,{children:"ctheorems"})," package, allowing you to directly use the ",(0,o.jsx)(n.code,{children:"ctheorems"})," package."]}),"\n",(0,o.jsxs)(n.p,{children:["Moreover, you can utilize ",(0,o.jsx)(n.code,{children:'#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")'})," to set numbering for sections and subsections."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/ctheorems:1.1.2": *\n\n// Register university theme\n#let s = themes.simple.register(aspect-ratio: "16-9")\n\n// Set the numbering of section and subsection\n#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")\n\n// Theroems configuration by ctheorems\n#show: thmrules.with(qed-symbol: $square$)\n#let theorem = thmbox("theorem", "Theorem", fill: rgb("#eeffee"))\n#let corollary = thmplain(\n "corollary",\n "Corollary",\n base: "theorem",\n titlefmt: strong\n)\n#let definition = thmbox("definition", "Definition", inset: (x: 1.2em, top: 1em))\n#let example = thmplain("example", "Example").with(numbering: none)\n#let proof = thmproof("proof", "Proof")\n\n// Extract methods\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n// Extract slide functions\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Theroems\n\n== Prime numbers\n\n#definition[\n A natural number is called a #highlight[_prime number_] if it is greater\n than 1 and cannot be written as the product of two smaller natural numbers.\n]\n#example[\n The numbers $2$, $3$, and $17$ are prime.\n @cor_largest_prime shows that this list is not exhaustive!\n]\n\n#theorem("Euclid")[\n There are infinitely many primes.\n]\n#proof[\n Suppose to the contrary that $p_1, p_2, dots, p_n$ is a finite enumeration\n of all primes. Set $P = p_1 p_2 dots p_n$. Since $P + 1$ is not in our list,\n it cannot be prime. Thus, some prime factor $p_j$ divides $P + 1$. Since\n $p_j$ also divides $P$, it must divide the difference $(P + 1) - P = 1$, a\n contradiction.\n]\n\n#corollary[\n There is no largest prime number.\n] \n#corollary[\n There are infinitely many composite numbers.\n]\n\n#theorem[\n There are arbitrarily long stretches of composite numbers.\n]\n\n#proof[\n For any $n > 2$, consider $\n n! + 2, quad n! + 3, quad ..., quad n! + n #qedhere\n $\n]\n'})}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/b506da7e-b7d6-4493-b35a-2307cfd38ddc",alt:"image"})})]})}function d(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>r});var o=t(7294);const i={},s=o.createContext(i);function r(e){const n=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/39430005.282e5018.js b/assets/js/39430005.8f67d18b.js similarity index 98% rename from assets/js/39430005.282e5018.js rename to assets/js/39430005.8f67d18b.js index 6517de829..d5763c548 100644 --- a/assets/js/39430005.282e5018.js +++ b/assets/js/39430005.8f67d18b.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9619],{4057:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>r,default:()=>u,frontMatter:()=>o,metadata:()=>d,toc:()=>a});var i=t(5893),s=t(1151);const o={sidebar_position:5},r="Other Animations",d={id:"dynamic/other",title:"Other Animations",description:"Touying also provides touying-reducer, which adds pause and meanwhile animations to cetz and fletcher.",source:"@site/docs/dynamic/other.md",sourceDirName:"dynamic",slug:"/dynamic/other",permalink:"/touying/docs/next/dynamic/other",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/dynamic/other.md",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Cover Function",permalink:"/touying/docs/next/dynamic/cover"},next:{title:"Handout Mode",permalink:"/touying/docs/next/dynamic/handout"}},c={},a=[{value:"Simple Animations",id:"simple-animations",level:2},{value:"only and uncover",id:"only-and-uncover",level:2}];function l(e){const n={code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"other-animations",children:"Other Animations"}),"\n",(0,i.jsxs)(n.p,{children:["Touying also provides ",(0,i.jsx)(n.code,{children:"touying-reducer"}),", which adds ",(0,i.jsx)(n.code,{children:"pause"})," and ",(0,i.jsx)(n.code,{children:"meanwhile"})," animations to cetz and fletcher."]}),"\n",(0,i.jsx)(n.h2,{id:"simple-animations",children:"Simple Animations"}),"\n",(0,i.jsx)(n.p,{children:"Here's an example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/cetz:0.2.2"\n#import "@preview/fletcher:0.4.4" as fletcher: node, edge\n\n// cetz and fletcher bindings for touying\n#let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true))\n#let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide)\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides.with(title-slide: false, outline-slide: false)\n\n// cetz animation\n#slide[\n Cetz in Touying:\n\n #cetz-canvas({\n import cetz.draw: *\n \n rect((0,0), (5,5))\n\n (pause,)\n\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n\n (pause,)\n\n line((0,0), (2.5, 2.5), name: "line")\n })\n]\n\n// fletcher animation\n#slide[\n Fletcher in Touying:\n\n #fletcher-diagram(\n node-stroke: .1em,\n node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),\n spacing: 4em,\n edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),\n node((0,0), `reading`, radius: 2em),\n edge((0,0), (0,0), `read()`, "--|>", bend: 130deg),\n pause,\n edge(`read()`, "-|>"),\n node((1,0), `eof`, radius: 2em),\n pause,\n edge(`close()`, "-|>"),\n node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)),\n edge((0,0), (2,0), `close()`, "-|>", bend: -40deg),\n )\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc",alt:"image"})}),"\n",(0,i.jsx)(n.h2,{id:"only-and-uncover",children:"only and uncover"}),"\n",(0,i.jsxs)(n.p,{children:["In fact, we can also use ",(0,i.jsx)(n.code,{children:"only"})," and ",(0,i.jsx)(n.code,{children:"uncover"})," within cetz, just requiring a bit of skill:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#slide(repeat: 3, self => [\n #let (uncover, only) = utils.methods(self)\n\n Cetz in Touying in subslide #self.subslide:\n\n #cetz.canvas({\n import cetz.draw: *\n let self = (self.methods.update-cover)(self: self, hide.with(bounds: true))\n let (uncover,) = utils.methods(self)\n \n rect((0,0), (5,5))\n\n uncover("2-3", {\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n })\n\n only(3, line((0,0), (2.5, 2.5), name: "line"))\n })\n])\n'})})]})}function u(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>d,a:()=>r});var i=t(7294);const s={},o=i.createContext(s);function r(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9619],{4057:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>r,default:()=>u,frontMatter:()=>o,metadata:()=>d,toc:()=>a});var i=t(5893),s=t(1151);const o={sidebar_position:5},r="Other Animations",d={id:"dynamic/other",title:"Other Animations",description:"Touying also provides touying-reducer, which adds pause and meanwhile animations to cetz and fletcher.",source:"@site/docs/dynamic/other.md",sourceDirName:"dynamic",slug:"/dynamic/other",permalink:"/touying/docs/next/dynamic/other",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/dynamic/other.md",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Cover Function",permalink:"/touying/docs/next/dynamic/cover"},next:{title:"Handout Mode",permalink:"/touying/docs/next/dynamic/handout"}},c={},a=[{value:"Simple Animations",id:"simple-animations",level:2},{value:"only and uncover",id:"only-and-uncover",level:2}];function l(e){const n={code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"other-animations",children:"Other Animations"}),"\n",(0,i.jsxs)(n.p,{children:["Touying also provides ",(0,i.jsx)(n.code,{children:"touying-reducer"}),", which adds ",(0,i.jsx)(n.code,{children:"pause"})," and ",(0,i.jsx)(n.code,{children:"meanwhile"})," animations to cetz and fletcher."]}),"\n",(0,i.jsx)(n.h2,{id:"simple-animations",children:"Simple Animations"}),"\n",(0,i.jsx)(n.p,{children:"Here's an example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n#import "@preview/cetz:0.2.2"\n#import "@preview/fletcher:0.4.4" as fletcher: node, edge\n\n// cetz and fletcher bindings for touying\n#let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true))\n#let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide)\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides.with(title-slide: false, outline-slide: false)\n\n// cetz animation\n#slide[\n Cetz in Touying:\n\n #cetz-canvas({\n import cetz.draw: *\n \n rect((0,0), (5,5))\n\n (pause,)\n\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n\n (pause,)\n\n line((0,0), (2.5, 2.5), name: "line")\n })\n]\n\n// fletcher animation\n#slide[\n Fletcher in Touying:\n\n #fletcher-diagram(\n node-stroke: .1em,\n node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),\n spacing: 4em,\n edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),\n node((0,0), `reading`, radius: 2em),\n edge((0,0), (0,0), `read()`, "--|>", bend: 130deg),\n pause,\n edge(`read()`, "-|>"),\n node((1,0), `eof`, radius: 2em),\n pause,\n edge(`close()`, "-|>"),\n node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)),\n edge((0,0), (2,0), `close()`, "-|>", bend: -40deg),\n )\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc",alt:"image"})}),"\n",(0,i.jsx)(n.h2,{id:"only-and-uncover",children:"only and uncover"}),"\n",(0,i.jsxs)(n.p,{children:["In fact, we can also use ",(0,i.jsx)(n.code,{children:"only"})," and ",(0,i.jsx)(n.code,{children:"uncover"})," within cetz, just requiring a bit of skill:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#slide(repeat: 3, self => [\n #let (uncover, only) = utils.methods(self)\n\n Cetz in Touying in subslide #self.subslide:\n\n #cetz.canvas({\n import cetz.draw: *\n let self = (self.methods.update-cover)(self: self, hide.with(bounds: true))\n let (uncover,) = utils.methods(self)\n \n rect((0,0), (5,5))\n\n uncover("2-3", {\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n })\n\n only(3, line((0,0), (2.5, 2.5), name: "line"))\n })\n])\n'})})]})}function u(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>d,a:()=>r});var i=t(7294);const s={},o=i.createContext(s);function r(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/3b0a1f02.6e49f860.js b/assets/js/3b0a1f02.6e49f860.js new file mode 100644 index 000000000..1be86f3ba --- /dev/null +++ b/assets/js/3b0a1f02.6e49f860.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7460],{5644:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>r,contentTitle:()=>a,default:()=>d,frontMatter:()=>s,metadata:()=>p,toc:()=>l});var i=t(5893),o=t(1151);const s={sidebar_position:1},a="Pinit",p={id:"integration/pinit",title:"Pinit",description:'Pinit package provides the ability to perform absolute positioning based on the page and relative positioning based on "pins," making it convenient to implement arrow pointing and explanatory effects for slides.',source:"@site/versioned_docs/version-0.4.1/integration/pinit.md",sourceDirName:"integration",slug:"/integration/pinit",permalink:"/touying/docs/0.4.1/integration/pinit",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/integration/pinit.md",tags:[],version:"0.4.1",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Package Integration",permalink:"/touying/docs/0.4.1/category/package-integration"},next:{title:"MiTeX",permalink:"/touying/docs/0.4.1/integration/mitex"}},r={},l=[{value:"Simple Example",id:"simple-example",level:2},{value:"Complex Example",id:"complex-example",level:2}];function c(n){const e={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,o.a)(),...n.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h1,{id:"pinit",children:"Pinit"}),"\n",(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.a,{href:"https://github.com/OrangeX4/typst-pinit/",children:"Pinit"}),' package provides the ability to perform absolute positioning based on the page and relative positioning based on "pins," making it convenient to implement arrow pointing and explanatory effects for slides.']}),"\n",(0,i.jsx)(e.h2,{id:"simple-example",children:"Simple Example"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-typst",children:'#import "@preview/pinit:0.1.3": *\n\n#set text(size: 24pt)\n\nA simple #pin(1)highlighted text#pin(2).\n\n#pinit-highlight(1, 2)\n\n#pinit-point-from(2)[It is simple.]\n'})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{src:"https://github.com/touying-typ/touying/assets/34951714/b17f9b80-5a8b-4943-a222-bcb0eb38611d",alt:"image"})}),"\n",(0,i.jsxs)(e.p,{children:["Another ",(0,i.jsx)(e.a,{href:"https://github.com/OrangeX4/typst-pinit/blob/main/examples/equation-desc.typ",children:"example"}),":"]}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9b4a6b50-fcfd-497d-9649-ae1f7762ee3f",alt:"image"})}),"\n",(0,i.jsx)(e.h2,{id:"complex-example",children:"Complex Example"}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{src:"https://github.com/touying-typ/touying/assets/34951714/7fb0095a-fd86-49ec-af95-15bc81a341c2",alt:"image"})}),"\n",(0,i.jsx)(e.p,{children:"An example of shared usage with Touying:"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/pinit:0.1.3": *\n\n#(s.page-args.paper = "presentation-4-3")\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#set text(size: 20pt, font: "Calibri", ligatures: false)\n#show heading: set text(weight: "regular")\n#show heading: set block(above: 1.4em, below: 1em)\n#show heading.where(level: 1): set text(size: 1.5em)\n\n// Useful functions\n#let crimson = rgb("#c00000")\n#let greybox(..args, body) = rect(fill: luma(95%), stroke: 0.5pt, inset: 0pt, outset: 10pt, ..args, body)\n#let redbold(body) = {\n set text(fill: crimson, weight: "bold")\n body\n}\n#let blueit(body) = {\n set text(fill: blue)\n body\n}\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n// Main body\n#slide(self => [\n #let (uncover, only) = utils.methods(self)\n\n = Asymptotic Notation: $O$\n\n Use #pin("h1")asymptotic notations#pin("h2") to describe asymptotic efficiency of algorithms.\n (Ignore constant coefficients and lower-order terms.)\n\n #pause\n\n #greybox[\n Given a function $g(n)$, we denote by $O(g(n))$ the following *set of functions*:\n #redbold(${f(n): "exists" c > 0 "and" n_0 > 0, "such that" f(n) <= c dot g(n) "for all" n >= n_0}$)\n ]\n\n #pinit-highlight("h1", "h2")\n\n #pause\n\n $f(n) = O(g(n))$: #pin(1)$f(n)$ is *asymptotically smaller* than $g(n)$.#pin(2)\n\n // #absolute-place(dx: 550pt, dy: 320pt, image(width: 25%, "asymptotic.png"))\n\n #pause\n\n $f(n) redbold(in) O(g(n))$: $f(n)$ is *asymptotically* #redbold[at most] $g(n)$.\n\n #only("4-", pinit-line(stroke: 3pt + crimson, start-dy: -0.25em, end-dy: -0.25em, 1, 2))\n\n #pause\n\n #block[Insertion Sort as an #pin("r1")example#pin("r2"):]\n\n - Best Case: $T(n) approx c n + c\' n - c\'\'$ #pin(3)\n - Worst case: $T(n) approx c n + (c\' \\/ 2) n^2 - c\'\'$ #pin(4)\n\n #pinit-rect("r1", "r2")\n\n #pause\n\n #pinit-place(3, dx: 15pt, dy: -15pt)[#redbold[$T(n) = O(n)$]]\n #pinit-place(4, dx: 15pt, dy: -15pt)[#redbold[$T(n) = O(n)$]]\n\n #pause\n\n #blueit[Q: Is $n^(3) = O(n^2)$#pin("que")? How to prove your answer#pin("ans")?]\n\n #pause\n\n #only("8-", pinit-point-to("que", fill: crimson, redbold[No.]))\n #only("8-", pinit-point-from("ans", body-dx: -150pt)[\n Show that the equation $(3/2)^n >= c$ \\\n has infinitely many solutions for $n$.\n ])\n])\n'})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{src:"https://github.com/touying-typ/touying/assets/34951714/f36a026f-491c-4290-90d5-0aa3c2086567",alt:"image"})})]})}function d(n={}){const{wrapper:e}={...(0,o.a)(),...n.components};return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(c,{...n})}):c(n)}},1151:(n,e,t)=>{t.d(e,{Z:()=>p,a:()=>a});var i=t(7294);const o={},s=i.createContext(o);function a(n){const e=i.useContext(s);return i.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function p(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(o):n.components||o:a(n.components),i.createElement(s.Provider,{value:e},n.children)}}}]); \ No newline at end of file diff --git a/assets/js/3c6c49a5.03e0ba35.js b/assets/js/3c6c49a5.03e0ba35.js new file mode 100644 index 000000000..33ed0f125 --- /dev/null +++ b/assets/js/3c6c49a5.03e0ba35.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9799],{9342:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>u,contentTitle:()=>r,default:()=>a,frontMatter:()=>o,metadata:()=>c,toc:()=>l});var t=n(5893),i=n(1151);const o={sidebar_position:2},r="Touying Sections",c={id:"progress/sections",title:"Touying Sections",description:"Touying maintains its own sections state to record the sections and subsections of slides.",source:"@site/versioned_docs/version-0.4.1/progress/sections.md",sourceDirName:"progress",slug:"/progress/sections",permalink:"/touying/docs/0.4.1/progress/sections",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/progress/sections.md",tags:[],version:"0.4.1",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Touying Counters",permalink:"/touying/docs/0.4.1/progress/counters"},next:{title:"Utilities",permalink:"/touying/docs/0.4.1/category/utilities"}},u={},l=[{value:"touying-outline",id:"touying-outline",level:2},{value:"touying-final-sections",id:"touying-final-sections",level:2},{value:"touying-progress-with-sections",id:"touying-progress-with-sections",level:2}];function d(e){const s={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.h1,{id:"touying-sections",children:"Touying Sections"}),"\n",(0,t.jsx)(s.p,{children:"Touying maintains its own sections state to record the sections and subsections of slides."}),"\n",(0,t.jsx)(s.h2,{id:"touying-outline",children:"touying-outline"}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"#touying-outline(enum-args: (:), padding: 0pt)"})," is used to display a simple outline."]}),"\n",(0,t.jsxs)(s.p,{children:["Of course, you can now just use ",(0,t.jsx)(s.code,{children:"#outline(indent: 2em, title: none)"}),"."]}),"\n",(0,t.jsx)(s.h2,{id:"touying-final-sections",children:"touying-final-sections"}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"#states.touying-final-sections(final-sections => ..)"})," is used to customize the display of the outline."]}),"\n",(0,t.jsx)(s.h2,{id:"touying-progress-with-sections",children:"touying-progress-with-sections"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-typst",children:"#states.touying-progress-with-sections((current-sections: .., final-sections: .., current-slide-number: .., last-slide-number: ..) => ..)\n"})}),"\n",(0,t.jsx)(s.p,{children:"This is the most powerful one, allowing you to build any complex progress display with its functionalities."})]})}function a(e={}){const{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>c,a:()=>r});var t=n(7294);const i={},o=t.createContext(i);function r(e){const s=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function c(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/3f2877b5.4796c932.js b/assets/js/3f2877b5.b3751fc2.js similarity index 98% rename from assets/js/3f2877b5.4796c932.js rename to assets/js/3f2877b5.b3751fc2.js index 369ad506b..354a73b1d 100644 --- a/assets/js/3f2877b5.4796c932.js +++ b/assets/js/3f2877b5.b3751fc2.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8350],{5813:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>s,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>a});var i=t(5893),r=t(1151);const o={sidebar_position:4},s="Fletcher",c={id:"integration/fletcher",title:"Fletcher",description:"Touying provides the touying-reducer, which adds pause and meanwhile animations to Fletcher.",source:"@site/docs/integration/fletcher.md",sourceDirName:"integration",slug:"/integration/fletcher",permalink:"/touying/docs/next/integration/fletcher",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/integration/fletcher.md",tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"CeTZ",permalink:"/touying/docs/next/integration/cetz"},next:{title:"Codly",permalink:"/touying/docs/next/integration/codly"}},d={},a=[];function l(e){const n={code:"code",h1:"h1",img:"img",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"fletcher",children:"Fletcher"}),"\n",(0,i.jsxs)(n.p,{children:["Touying provides the ",(0,i.jsx)(n.code,{children:"touying-reducer"}),", which adds ",(0,i.jsx)(n.code,{children:"pause"})," and ",(0,i.jsx)(n.code,{children:"meanwhile"})," animations to Fletcher."]}),"\n",(0,i.jsx)(n.p,{children:"An example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/cetz:0.2.2"\n#import "@preview/fletcher:0.4.4" as fletcher: node, edge\n\n// cetz and fletcher bindings for touying\n#let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true))\n#let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide)\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides.with(title-slide: false, outline-slide: false)\n\n// cetz animation\n#slide[\n Cetz in Touying:\n\n #cetz-canvas({\n import cetz.draw: *\n \n rect((0,0), (5,5))\n\n (pause,)\n\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n\n (pause,)\n\n line((0,0), (2.5, 2.5), name: "line")\n })\n]\n\n// fletcher animation\n#slide[\n Fletcher in Touying:\n\n #fletcher-diagram(\n node-stroke: .1em,\n node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),\n spacing: 4em,\n edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),\n node((0,0), `reading`, radius: 2em),\n edge((0,0), (0,0), `read()`, "--|>", bend: 130deg),\n pause,\n edge(`read()`, "-|>"),\n node((1,0), `eof`, radius: 2em),\n pause,\n edge(`close()`, "-|>"),\n node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)),\n edge((0,0), (2,0), `close()`, "-|>", bend: -40deg),\n )\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc",alt:"image"})})]})}function u(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>s});var i=t(7294);const r={},o=i.createContext(r);function s(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8350],{5813:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>s,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>a});var i=t(5893),r=t(1151);const o={sidebar_position:4},s="Fletcher",c={id:"integration/fletcher",title:"Fletcher",description:"Touying provides the touying-reducer, which adds pause and meanwhile animations to Fletcher.",source:"@site/docs/integration/fletcher.md",sourceDirName:"integration",slug:"/integration/fletcher",permalink:"/touying/docs/next/integration/fletcher",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/integration/fletcher.md",tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"CeTZ",permalink:"/touying/docs/next/integration/cetz"},next:{title:"Codly",permalink:"/touying/docs/next/integration/codly"}},d={},a=[];function l(e){const n={code:"code",h1:"h1",img:"img",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"fletcher",children:"Fletcher"}),"\n",(0,i.jsxs)(n.p,{children:["Touying provides the ",(0,i.jsx)(n.code,{children:"touying-reducer"}),", which adds ",(0,i.jsx)(n.code,{children:"pause"})," and ",(0,i.jsx)(n.code,{children:"meanwhile"})," animations to Fletcher."]}),"\n",(0,i.jsx)(n.p,{children:"An example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n#import "@preview/cetz:0.2.2"\n#import "@preview/fletcher:0.4.4" as fletcher: node, edge\n\n// cetz and fletcher bindings for touying\n#let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true))\n#let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide)\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides.with(title-slide: false, outline-slide: false)\n\n// cetz animation\n#slide[\n Cetz in Touying:\n\n #cetz-canvas({\n import cetz.draw: *\n \n rect((0,0), (5,5))\n\n (pause,)\n\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n\n (pause,)\n\n line((0,0), (2.5, 2.5), name: "line")\n })\n]\n\n// fletcher animation\n#slide[\n Fletcher in Touying:\n\n #fletcher-diagram(\n node-stroke: .1em,\n node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),\n spacing: 4em,\n edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),\n node((0,0), `reading`, radius: 2em),\n edge((0,0), (0,0), `read()`, "--|>", bend: 130deg),\n pause,\n edge(`read()`, "-|>"),\n node((1,0), `eof`, radius: 2em),\n pause,\n edge(`close()`, "-|>"),\n node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)),\n edge((0,0), (2,0), `close()`, "-|>", bend: -40deg),\n )\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc",alt:"image"})})]})}function u(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>s});var i=t(7294);const r={},o=i.createContext(r);function s(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/78b57648.36b69bbe.js b/assets/js/40f02aaa.6778d6e3.js similarity index 90% rename from assets/js/78b57648.36b69bbe.js rename to assets/js/40f02aaa.6778d6e3.js index d403b8c77..67aa9488e 100644 --- a/assets/js/78b57648.36b69bbe.js +++ b/assets/js/40f02aaa.6778d6e3.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4952],{9508:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>a,frontMatter:()=>r,metadata:()=>d,toc:()=>l});var s=n(5893),i=n(1151);const r={sidebar_position:3},o="Typst Preview",d={id:"external/typst-preview",title:"Typst Preview",description:"The Typst Preview extension for VS Code provides an excellent slide mode, allowing us to preview and present slides.",source:"@site/versioned_docs/version-0.4.1/external/typst-preview.md",sourceDirName:"external",slug:"/external/typst-preview",permalink:"/touying/docs/external/typst-preview",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/external/typst-preview.md",tags:[],version:"0.4.1",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Pympress",permalink:"/touying/docs/external/pympress"}},c={},l=[];function p(e){const t={code:"code",h1:"h1",p:"p",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"typst-preview",children:"Typst Preview"}),"\n",(0,s.jsx)(t.p,{children:"The Typst Preview extension for VS Code provides an excellent slide mode, allowing us to preview and present slides."}),"\n",(0,s.jsxs)(t.p,{children:["Press ",(0,s.jsx)(t.code,{children:"Ctrl/Cmd + Shift + P"})," and type ",(0,s.jsx)(t.code,{children:"Typst Preview: Preview current file in slide mode"})," to open the preview in slide mode."]}),"\n",(0,s.jsxs)(t.p,{children:["Press ",(0,s.jsx)(t.code,{children:"Ctrl/Cmd + Shift + P"})," and type ",(0,s.jsx)(t.code,{children:"Typst Preview: Preview current file in browser and slide mode"})," to open the slide mode in the browser."]}),"\n",(0,s.jsxs)(t.p,{children:["Now, you can press keys like ",(0,s.jsx)(t.code,{children:"F11"})," to enter fullscreen mode in the browser, making it suitable for slide presentations."]}),"\n",(0,s.jsx)(t.p,{children:"Since Typst Preview is based on SVG, it can play GIF animations, which is very helpful for dynamic slides."})]})}function a(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>d,a:()=>o});var s=n(7294);const i={},r=s.createContext(i);function o(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7857],{6239:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>a,frontMatter:()=>r,metadata:()=>d,toc:()=>l});var s=n(5893),i=n(1151);const r={sidebar_position:3},o="Typst Preview",d={id:"external/typst-preview",title:"Typst Preview",description:"The Typst Preview extension for VS Code provides an excellent slide mode, allowing us to preview and present slides.",source:"@site/versioned_docs/version-0.4.2/external/typst-preview.md",sourceDirName:"external",slug:"/external/typst-preview",permalink:"/touying/docs/external/typst-preview",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/external/typst-preview.md",tags:[],version:"0.4.2",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Pympress",permalink:"/touying/docs/external/pympress"}},c={},l=[];function p(e){const t={code:"code",h1:"h1",p:"p",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"typst-preview",children:"Typst Preview"}),"\n",(0,s.jsx)(t.p,{children:"The Typst Preview extension for VS Code provides an excellent slide mode, allowing us to preview and present slides."}),"\n",(0,s.jsxs)(t.p,{children:["Press ",(0,s.jsx)(t.code,{children:"Ctrl/Cmd + Shift + P"})," and type ",(0,s.jsx)(t.code,{children:"Typst Preview: Preview current file in slide mode"})," to open the preview in slide mode."]}),"\n",(0,s.jsxs)(t.p,{children:["Press ",(0,s.jsx)(t.code,{children:"Ctrl/Cmd + Shift + P"})," and type ",(0,s.jsx)(t.code,{children:"Typst Preview: Preview current file in browser and slide mode"})," to open the slide mode in the browser."]}),"\n",(0,s.jsxs)(t.p,{children:["Now, you can press keys like ",(0,s.jsx)(t.code,{children:"F11"})," to enter fullscreen mode in the browser, making it suitable for slide presentations."]}),"\n",(0,s.jsx)(t.p,{children:"Since Typst Preview is based on SVG, it can play GIF animations, which is very helpful for dynamic slides."})]})}function a(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>d,a:()=>o});var s=n(7294);const i={},r=s.createContext(i);function o(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/472f8a66.6827c4cb.js b/assets/js/472f8a66.36c35859.js similarity index 99% rename from assets/js/472f8a66.6827c4cb.js rename to assets/js/472f8a66.36c35859.js index 50f839432..f7a51d554 100644 --- a/assets/js/472f8a66.6827c4cb.js +++ b/assets/js/472f8a66.36c35859.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8565],{2857:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>s,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>l});var i=t(5893),o=t(1151);const a={sidebar_position:5},s="Page Layout",r={id:"layout",title:"Page Layout",description:"Basic Concepts",source:"@site/docs/layout.md",sourceDirName:".",slug:"/layout",permalink:"/touying/docs/next/layout",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/layout.md",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Code Style",permalink:"/touying/docs/next/code-styles"},next:{title:"Global Settings",permalink:"/touying/docs/next/global-settings"}},d={},l=[{value:"Basic Concepts",id:"basic-concepts",level:2},{value:"Page Management",id:"page-management",level:2},{value:"Application: Adding a Logo",id:"application-adding-a-logo",level:2},{value:"Page Columns",id:"page-columns",level:2}];function c(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"page-layout",children:"Page Layout"}),"\n",(0,i.jsx)(n.h2,{id:"basic-concepts",children:"Basic Concepts"}),"\n",(0,i.jsx)(n.p,{children:"To create stylish slides using Typst, it's essential to understand Typst's page model correctly. If you're not concerned with customizing page styles, you can choose to skip this section. However, it's still recommended to go through it."}),"\n",(0,i.jsx)(n.p,{children:"Let's illustrate Typst's default page model through a specific example."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#let container = rect.with(height: 100%, width: 100%, inset: 0pt)\n#let innerbox = rect.with(stroke: (dash: "dashed"))\n\n#set text(size: 30pt)\n#set page(\n paper: "presentation-16-9",\n header: container[#innerbox[Header]],\n header-ascent: 30%,\n footer: container[#innerbox[Footer]],\n footer-descent: 30%,\n)\n\n#place(top + right)[Margin\u2192]\n#container[\n #container[\n #innerbox[Content]\n ]\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/70d48053-c777-4253-a9ca-ada360b5a987",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:"We need to distinguish the following concepts:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Model:"})," Typst has a model similar to the CSS Box Model, divided into Margin, Padding, and Content. However, padding is not a property of ",(0,i.jsx)(n.code,{children:"set page(..)"})," but is obtained by manually adding ",(0,i.jsx)(n.code,{children:"#pad(..)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Margin:"})," Margins are the edges of the page, divided into top, bottom, left, and right. They are the core of Typst's page model, and all other properties are influenced by margins, especially Header and Footer. Header and Footer are actually located within the Margin."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Header:"})," The Header is the content at the top of the page, divided into container and innerbox. We can observe that the edge of the header container and padding does not align but has some space in between, which is actually ",(0,i.jsx)(n.code,{children:"header-ascent: 30%"}),", where the percentage is relative to the margin-top. Additionally, we notice that the header innerbox is actually located at the bottom left corner of the header container, meaning innerbox defaults to ",(0,i.jsx)(n.code,{children:"#set align(left + bottom)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Footer:"})," The Footer is the content at the bottom of the page, similar to the Header but in the opposite direction."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Place:"})," The ",(0,i.jsx)(n.code,{children:"place"})," function enables absolute positioning relative to the parent container without affecting other elements inside the parent container. It allows specifying ",(0,i.jsx)(n.code,{children:"alignment"}),", ",(0,i.jsx)(n.code,{children:"dx"}),", and ",(0,i.jsx)(n.code,{children:"dy"}),", making it suitable for placing decorative elements like logos."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Therefore, to apply Typst to create slides, we only need to set:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#set page(\n margin: (x: 4em, y: 2em),\n header: align(top)[Header],\n footer: align(bottom)[Footer],\n header-ascent: 0em,\n footer-descent: 0em,\n)\n"})}),"\n",(0,i.jsx)(n.p,{children:"However, we still need to address how the header occupies the entire page width. Here, we use negative padding to achieve this. For instance:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#let container = rect.with(stroke: (dash: "dashed"), height: 100%, width: 100%, inset: 0pt)\n#let innerbox = rect.with(fill: rgb("#d0d0d0"))\n#let margin = (x: 4em, y: 2em)\n\n// negative padding for header and footer\n#let negative-padding = pad.with(x: -margin.x, y: 0em)\n\n#set text(size: 30pt)\n#set page(\n paper: "presentation-16-9",\n margin: margin,\n header: negative-padding[#container[#align(top)[#innerbox(width: 100%)[Header]]]],\n header-ascent: 0em,\n footer: negative-padding[#container[#align(bottom)[#innerbox(width: 100%)[Footer]]]],\n footer-descent: 0em,\n)\n\n#place(top + right)[\u2191Margin\u2192]\n#container[\n #container[\n #innerbox[Content]\n ]\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/d74896f4-90e7-4b36-a5a9-9c44307eb192",alt:"image"})}),"\n",(0,i.jsx)(n.h2,{id:"page-management",children:"Page Management"}),"\n",(0,i.jsxs)(n.p,{children:["Since modifying page parameters using the ",(0,i.jsx)(n.code,{children:"set page(..)"})," command in Typst creates a new page instead of modifying the current one, Touying chooses to maintain a ",(0,i.jsx)(n.code,{children:"s.page-args"})," member variable and a ",(0,i.jsx)(n.code,{children:"s.padding"})," member variable. These parameters are only applied when Touying creates a new slide, so users only need to focus on ",(0,i.jsx)(n.code,{children:"s.page-args"})," and ",(0,i.jsx)(n.code,{children:"s.padding"}),"."]}),"\n",(0,i.jsx)(n.p,{children:"For example, the previous example can be modified as follows:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#(s.page-args += (\n margin: (x: 4em, y: 2em),\n header: align(top)[Header],\n footer: align(bottom)[Footer],\n header-ascent: 0em,\n footer-descent: 0em,\n))\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Touying automatically detects the value of ",(0,i.jsx)(n.code,{children:"margin.x"})," and adds negative padding to the header if ",(0,i.jsx)(n.code,{children:"self.full-header == true"}),"."]}),"\n",(0,i.jsx)(n.p,{children:"Similarly, if you're unsatisfied with the header or footer style of a particular theme, you can change it using:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#(s.page-args.footer = [Custom Footer])\n"})}),"\n",(0,i.jsxs)(n.p,{children:["However, it's essential to note that if you change page parameters in this way, you need to place it before ",(0,i.jsx)(n.code,{children:"#let (slide, empty-slide) = utils.slides(s)"}),", or you'll have to call ",(0,i.jsx)(n.code,{children:"#let (slide, empty-slide) = utils.slides(s)"})," again."]}),"\n",(0,i.jsx)(n.admonition,{title:"Warning",type:"warning",children:(0,i.jsxs)(n.p,{children:["Therefore, you should not use the ",(0,i.jsx)(n.code,{children:"set page(..)"})," command directly but instead modify the ",(0,i.jsx)(n.code,{children:"s.page-args"})," member variable internally."]})}),"\n",(0,i.jsxs)(n.p,{children:["This approach also allows us to query the current page parameters in real-time using ",(0,i.jsx)(n.code,{children:"s.page-args"}),", which is useful for functions that need to obtain margins or the current page's background color, such as ",(0,i.jsx)(n.code,{children:"transparent-cover"}),". This is partially equivalent to context get rule and is actually more convenient to use."]}),"\n",(0,i.jsx)(n.h2,{id:"application-adding-a-logo",children:"Application: Adding a Logo"}),"\n",(0,i.jsxs)(n.p,{children:["Adding a logo to slides is a very common but also a very versatile requirement. The difficulty lies in the fact that the required size and position of the logo often vary from person to person. Therefore, most of Touying's themes do not include configuration options for logos. But with the concepts of page layout mentioned in this section, we know that we can use the ",(0,i.jsx)(n.code,{children:"place"})," function in the header or footer to place a logo image."]}),"\n",(0,i.jsx)(n.p,{children:"For example, suppose we decide to add the GitHub icon to the metropolis theme. We can implement it like this:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/octique:0.1.0": *\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9")\n#(s.page-args.header = self => {\n // display the original header\n utils.call-or-display(self, s.page-args.header)\n // place logo at the top-right\n place(top + right, dx: -0.5em, dy: 0.3em)[\n #octique("mark-github", color: rgb("#fafafa"), width: 1.5em, height: 1.5em)\n ]\n})\n#let (init, slide) = utils.methods(s)\n#show: init\n\n#slide(title: [Title])[\n Logo example.\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/055d77e7-5087-4248-b969-d8ef9d50c54b",alt:"image"})}),"\n",(0,i.jsxs)(n.p,{children:["Here, ",(0,i.jsx)(n.code,{children:"utils.call-or-display(self, body)"})," can be used to display ",(0,i.jsx)(n.code,{children:"body"})," as content or a callback function in the form ",(0,i.jsx)(n.code,{children:"self => content"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"page-columns",children:"Page Columns"}),"\n",(0,i.jsxs)(n.p,{children:["If you need to divide the page into two or three columns, you can use the ",(0,i.jsx)(n.code,{children:"compose"})," feature provided by the default ",(0,i.jsx)(n.code,{children:"slide"})," function in Touying. The simplest example is as follows:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide[\n First column.\n][\n Second column.\n]\n"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/a39f88a2-f1ba-4420-8f78-6a0fc644704e",alt:"image"})}),"\n",(0,i.jsxs)(n.p,{children:["If you need to change the way columns are composed, you can modify the ",(0,i.jsx)(n.code,{children:"composer"})," parameter of ",(0,i.jsx)(n.code,{children:"slide"}),". The default parameter is ",(0,i.jsx)(n.code,{children:"utils.side-by-side.with(columns: auto, gutter: 1em)"}),". If we want the left column to occupy the remaining width, we can use"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide(composer: (1fr, auto))[\n First column.\n][\n Second column.\n]\n"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/aa84192a-4082-495d-9773-b06df32ab8dc",alt:"image"})})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>s});var i=t(7294);const o={},a=i.createContext(o);function s(e){const n=i.useContext(a);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),i.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8565],{2857:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>s,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>l});var i=t(5893),o=t(1151);const a={sidebar_position:5},s="Page Layout",r={id:"layout",title:"Page Layout",description:"Basic Concepts",source:"@site/docs/layout.md",sourceDirName:".",slug:"/layout",permalink:"/touying/docs/next/layout",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/layout.md",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Code Style",permalink:"/touying/docs/next/code-styles"},next:{title:"Global Settings",permalink:"/touying/docs/next/global-settings"}},d={},l=[{value:"Basic Concepts",id:"basic-concepts",level:2},{value:"Page Management",id:"page-management",level:2},{value:"Application: Adding a Logo",id:"application-adding-a-logo",level:2},{value:"Page Columns",id:"page-columns",level:2}];function c(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"page-layout",children:"Page Layout"}),"\n",(0,i.jsx)(n.h2,{id:"basic-concepts",children:"Basic Concepts"}),"\n",(0,i.jsx)(n.p,{children:"To create stylish slides using Typst, it's essential to understand Typst's page model correctly. If you're not concerned with customizing page styles, you can choose to skip this section. However, it's still recommended to go through it."}),"\n",(0,i.jsx)(n.p,{children:"Let's illustrate Typst's default page model through a specific example."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#let container = rect.with(height: 100%, width: 100%, inset: 0pt)\n#let innerbox = rect.with(stroke: (dash: "dashed"))\n\n#set text(size: 30pt)\n#set page(\n paper: "presentation-16-9",\n header: container[#innerbox[Header]],\n header-ascent: 30%,\n footer: container[#innerbox[Footer]],\n footer-descent: 30%,\n)\n\n#place(top + right)[Margin\u2192]\n#container[\n #container[\n #innerbox[Content]\n ]\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/70d48053-c777-4253-a9ca-ada360b5a987",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:"We need to distinguish the following concepts:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Model:"})," Typst has a model similar to the CSS Box Model, divided into Margin, Padding, and Content. However, padding is not a property of ",(0,i.jsx)(n.code,{children:"set page(..)"})," but is obtained by manually adding ",(0,i.jsx)(n.code,{children:"#pad(..)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Margin:"})," Margins are the edges of the page, divided into top, bottom, left, and right. They are the core of Typst's page model, and all other properties are influenced by margins, especially Header and Footer. Header and Footer are actually located within the Margin."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Header:"})," The Header is the content at the top of the page, divided into container and innerbox. We can observe that the edge of the header container and padding does not align but has some space in between, which is actually ",(0,i.jsx)(n.code,{children:"header-ascent: 30%"}),", where the percentage is relative to the margin-top. Additionally, we notice that the header innerbox is actually located at the bottom left corner of the header container, meaning innerbox defaults to ",(0,i.jsx)(n.code,{children:"#set align(left + bottom)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Footer:"})," The Footer is the content at the bottom of the page, similar to the Header but in the opposite direction."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Place:"})," The ",(0,i.jsx)(n.code,{children:"place"})," function enables absolute positioning relative to the parent container without affecting other elements inside the parent container. It allows specifying ",(0,i.jsx)(n.code,{children:"alignment"}),", ",(0,i.jsx)(n.code,{children:"dx"}),", and ",(0,i.jsx)(n.code,{children:"dy"}),", making it suitable for placing decorative elements like logos."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Therefore, to apply Typst to create slides, we only need to set:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#set page(\n margin: (x: 4em, y: 2em),\n header: align(top)[Header],\n footer: align(bottom)[Footer],\n header-ascent: 0em,\n footer-descent: 0em,\n)\n"})}),"\n",(0,i.jsx)(n.p,{children:"However, we still need to address how the header occupies the entire page width. Here, we use negative padding to achieve this. For instance:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#let container = rect.with(stroke: (dash: "dashed"), height: 100%, width: 100%, inset: 0pt)\n#let innerbox = rect.with(fill: rgb("#d0d0d0"))\n#let margin = (x: 4em, y: 2em)\n\n// negative padding for header and footer\n#let negative-padding = pad.with(x: -margin.x, y: 0em)\n\n#set text(size: 30pt)\n#set page(\n paper: "presentation-16-9",\n margin: margin,\n header: negative-padding[#container[#align(top)[#innerbox(width: 100%)[Header]]]],\n header-ascent: 0em,\n footer: negative-padding[#container[#align(bottom)[#innerbox(width: 100%)[Footer]]]],\n footer-descent: 0em,\n)\n\n#place(top + right)[\u2191Margin\u2192]\n#container[\n #container[\n #innerbox[Content]\n ]\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/d74896f4-90e7-4b36-a5a9-9c44307eb192",alt:"image"})}),"\n",(0,i.jsx)(n.h2,{id:"page-management",children:"Page Management"}),"\n",(0,i.jsxs)(n.p,{children:["Since modifying page parameters using the ",(0,i.jsx)(n.code,{children:"set page(..)"})," command in Typst creates a new page instead of modifying the current one, Touying chooses to maintain a ",(0,i.jsx)(n.code,{children:"s.page-args"})," member variable and a ",(0,i.jsx)(n.code,{children:"s.padding"})," member variable. These parameters are only applied when Touying creates a new slide, so users only need to focus on ",(0,i.jsx)(n.code,{children:"s.page-args"})," and ",(0,i.jsx)(n.code,{children:"s.padding"}),"."]}),"\n",(0,i.jsx)(n.p,{children:"For example, the previous example can be modified as follows:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#(s.page-args += (\n margin: (x: 4em, y: 2em),\n header: align(top)[Header],\n footer: align(bottom)[Footer],\n header-ascent: 0em,\n footer-descent: 0em,\n))\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Touying automatically detects the value of ",(0,i.jsx)(n.code,{children:"margin.x"})," and adds negative padding to the header if ",(0,i.jsx)(n.code,{children:"self.full-header == true"}),"."]}),"\n",(0,i.jsx)(n.p,{children:"Similarly, if you're unsatisfied with the header or footer style of a particular theme, you can change it using:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#(s.page-args.footer = [Custom Footer])\n"})}),"\n",(0,i.jsxs)(n.p,{children:["However, it's essential to note that if you change page parameters in this way, you need to place it before ",(0,i.jsx)(n.code,{children:"#let (slide, empty-slide) = utils.slides(s)"}),", or you'll have to call ",(0,i.jsx)(n.code,{children:"#let (slide, empty-slide) = utils.slides(s)"})," again."]}),"\n",(0,i.jsx)(n.admonition,{title:"Warning",type:"warning",children:(0,i.jsxs)(n.p,{children:["Therefore, you should not use the ",(0,i.jsx)(n.code,{children:"set page(..)"})," command directly but instead modify the ",(0,i.jsx)(n.code,{children:"s.page-args"})," member variable internally."]})}),"\n",(0,i.jsxs)(n.p,{children:["This approach also allows us to query the current page parameters in real-time using ",(0,i.jsx)(n.code,{children:"s.page-args"}),", which is useful for functions that need to obtain margins or the current page's background color, such as ",(0,i.jsx)(n.code,{children:"transparent-cover"}),". This is partially equivalent to context get rule and is actually more convenient to use."]}),"\n",(0,i.jsx)(n.h2,{id:"application-adding-a-logo",children:"Application: Adding a Logo"}),"\n",(0,i.jsxs)(n.p,{children:["Adding a logo to slides is a very common but also a very versatile requirement. The difficulty lies in the fact that the required size and position of the logo often vary from person to person. Therefore, most of Touying's themes do not include configuration options for logos. But with the concepts of page layout mentioned in this section, we know that we can use the ",(0,i.jsx)(n.code,{children:"place"})," function in the header or footer to place a logo image."]}),"\n",(0,i.jsx)(n.p,{children:"For example, suppose we decide to add the GitHub icon to the metropolis theme. We can implement it like this:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n#import "@preview/octique:0.1.0": *\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9")\n#(s.page-args.header = self => {\n // display the original header\n utils.call-or-display(self, s.page-args.header)\n // place logo at the top-right\n place(top + right, dx: -0.5em, dy: 0.3em)[\n #octique("mark-github", color: rgb("#fafafa"), width: 1.5em, height: 1.5em)\n ]\n})\n#let (init, slide) = utils.methods(s)\n#show: init\n\n#slide(title: [Title])[\n Logo example.\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/055d77e7-5087-4248-b969-d8ef9d50c54b",alt:"image"})}),"\n",(0,i.jsxs)(n.p,{children:["Here, ",(0,i.jsx)(n.code,{children:"utils.call-or-display(self, body)"})," can be used to display ",(0,i.jsx)(n.code,{children:"body"})," as content or a callback function in the form ",(0,i.jsx)(n.code,{children:"self => content"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"page-columns",children:"Page Columns"}),"\n",(0,i.jsxs)(n.p,{children:["If you need to divide the page into two or three columns, you can use the ",(0,i.jsx)(n.code,{children:"compose"})," feature provided by the default ",(0,i.jsx)(n.code,{children:"slide"})," function in Touying. The simplest example is as follows:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide[\n First column.\n][\n Second column.\n]\n"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/a39f88a2-f1ba-4420-8f78-6a0fc644704e",alt:"image"})}),"\n",(0,i.jsxs)(n.p,{children:["If you need to change the way columns are composed, you can modify the ",(0,i.jsx)(n.code,{children:"composer"})," parameter of ",(0,i.jsx)(n.code,{children:"slide"}),". The default parameter is ",(0,i.jsx)(n.code,{children:"utils.side-by-side.with(columns: auto, gutter: 1em)"}),". If we want the left column to occupy the remaining width, we can use"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide(composer: (1fr, auto))[\n First column.\n][\n Second column.\n]\n"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/aa84192a-4082-495d-9773-b06df32ab8dc",alt:"image"})})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>s});var i=t(7294);const o={},a=i.createContext(o);function s(e){const n=i.useContext(a);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),i.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/49841adc.54b40f47.js b/assets/js/49841adc.54b40f47.js new file mode 100644 index 000000000..f76f78c07 --- /dev/null +++ b/assets/js/49841adc.54b40f47.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[819],{4847:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>u,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var i=t(5893),s=t(1151);const o={sidebar_position:2},r="Getting Started",a={id:"start",title:"Getting Started",description:"Before you begin, make sure you have the Typst environment installed. If not, you can use the Web App or install the Tinymist LSP and Typst Preview plugins for VS Code.",source:"@site/versioned_docs/version-0.4.1/start.md",sourceDirName:".",slug:"/start",permalink:"/touying/docs/0.4.1/start",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/start.md",tags:[],version:"0.4.1",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Introduction to Touying",permalink:"/touying/docs/0.4.1/intro"},next:{title:"Sections and Subsections",permalink:"/touying/docs/0.4.1/sections"}},l={},d=[{value:"More Complex Examples",id:"more-complex-examples",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"getting-started",children:"Getting Started"}),"\n",(0,i.jsxs)(n.p,{children:["Before you begin, make sure you have the Typst environment installed. If not, you can use the ",(0,i.jsx)(n.a,{href:"https://typst.app/",children:"Web App"})," or install the ",(0,i.jsx)(n.a,{href:"https://marketplace.visualstudio.com/items?itemName=myriad-dreamin.tinymist",children:"Tinymist LSP"})," and ",(0,i.jsx)(n.a,{href:"https://marketplace.visualstudio.com/items?itemName=mgt19937.typst-preview",children:"Typst Preview"})," plugins for VS Code."]}),"\n",(0,i.jsx)(n.p,{children:"To use Touying, you just need to include the following in your document:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/f5bdbf8f-7bf9-45fd-9923-0fa5d66450b2",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:"It's that simple! You've created your first Touying slides. Congratulations! \ud83c\udf89"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Tip:"})," You can use Typst syntax like ",(0,i.jsx)(n.code,{children:'#import "config.typ": *'})," or ",(0,i.jsx)(n.code,{children:'#include "content.typ"'})," to implement Touying's multi-file architecture."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Warning:"})," The comma in ",(0,i.jsx)(n.code,{children:"#let (slide, empty-slide) = utils.slides(s)"})," is necessary for the unpacking syntax."]}),"\n",(0,i.jsx)(n.h2,{id:"more-complex-examples",children:"More Complex Examples"}),"\n",(0,i.jsxs)(n.p,{children:["In fact, Touying provides various styles for slide writing. You can also use the ",(0,i.jsx)(n.code,{children:"#slide[..]"})," syntax to access more powerful features provided by Touying."]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/fcecb505-d2d1-4e36-945a-225f4661a694",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:"Touying offers many built-in themes to easily create beautiful slides. For example, in this case:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:'#let s = themes.university.register(aspect-ratio: "16-9")\n'})}),"\n",(0,i.jsx)(n.p,{children:"you can use the university theme. For more detailed tutorials on themes, you can refer to the following sections."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/cetz:0.2.2"\n#import "@preview/fletcher:0.4.4" as fletcher: node, edge\n#import "@preview/ctheorems:1.1.2": *\n\n// cetz and fletcher bindings for touying\n#let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true))\n#let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide)\n\n// Register university theme\n// You can replace it with other themes and it can still work normally\n#let s = themes.university.register(aspect-ratio: "16-9")\n\n// Set the numbering of section and subsection\n#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")\n\n// Global information configuration\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n\n// Pdfpc configuration\n// typst query --root . ./example.typ --field value --one "" > ./example.pdfpc\n#let s = (s.methods.append-preamble)(self: s, pdfpc.config(\n duration-minutes: 30,\n start-time: datetime(hour: 14, minute: 10, second: 0),\n end-time: datetime(hour: 14, minute: 40, second: 0),\n last-minutes: 5,\n note-font-size: 12,\n disable-markdown: false,\n default-transition: (\n type: "push",\n duration-seconds: 2,\n angle: ltr,\n alignment: "vertical",\n direction: "inward",\n ),\n))\n\n// Theroems configuration by ctheorems\n#show: thmrules.with(qed-symbol: $square$)\n#let theorem = thmbox("theorem", "Theorem", fill: rgb("#eeffee"))\n#let corollary = thmplain(\n "corollary",\n "Corollary",\n base: "theorem",\n titlefmt: strong\n)\n#let definition = thmbox("definition", "Definition", inset: (x: 1.2em, top: 1em))\n#let example = thmplain("example", "Example").with(numbering: none)\n#let proof = thmproof("proof", "Proof")\n\n// Extract methods\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n// Extract slide functions\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Animation\n\n== Simple Animation\n\nWe can use `#pause` to #pause display something later.\n\n#pause\n\nJust like this.\n\n#meanwhile\n\nMeanwhile, #pause we can also use `#meanwhile` to #pause display other content synchronously.\n\n\n== Complex Animation\n\n#slide(repeat: 3, self => [\n #let (uncover, only, alternatives) = utils.methods(self)\n\n At subslide #self.subslide, we can\n\n use #uncover("2-")[`#uncover` function] for reserving space,\n\n use #only("2-")[`#only` function] for not reserving space,\n\n #alternatives[call `#only` multiple times \\u{2717}][use `#alternatives` function #sym.checkmark] for choosing one of the alternatives.\n])\n\n\n== Math Equation Animation\n\nTouying equation with `pause`:\n\n#touying-equation(`\n f(x) &= pause x^2 + 2x + 1 \\\n &= pause (x + 1)^2 \\\n`)\n\n#meanwhile\n\nHere, #pause we have the expression of $f(x)$.\n\n#pause\n\nBy factorizing, we can obtain this result.\n\n\n== CeTZ Animation\n\nCeTZ Animation in Touying:\n\n#cetz-canvas({\n import cetz.draw: *\n \n rect((0,0), (5,5))\n\n (pause,)\n\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n\n (pause,)\n\n line((0,0), (2.5, 2.5), name: "line")\n})\n\n\n== Fletcher Animation\n\nFletcher Animation in Touying:\n\n#fletcher-diagram(\n node-stroke: .1em,\n node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),\n spacing: 4em,\n edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),\n node((0,0), `reading`, radius: 2em),\n edge((0,0), (0,0), `read()`, "--|>", bend: 130deg),\n pause,\n edge(`read()`, "-|>"),\n node((1,0), `eof`, radius: 2em),\n pause,\n edge(`close()`, "-|>"),\n node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)),\n edge((0,0), (2,0), `close()`, "-|>", bend: -40deg),\n)\n\n\n= Theroems\n\n== Prime numbers\n\n#definition[\n A natural number is called a #highlight[_prime number_] if it is greater\n than 1 and cannot be written as the product of two smaller natural numbers.\n]\n#example[\n The numbers $2$, $3$, and $17$ are prime.\n @cor_largest_prime shows that this list is not exhaustive!\n]\n\n#theorem("Euclid")[\n There are infinitely many primes.\n]\n#proof[\n Suppose to the contrary that $p_1, p_2, dots, p_n$ is a finite enumeration\n of all primes. Set $P = p_1 p_2 dots p_n$. Since $P + 1$ is not in our list,\n it cannot be prime. Thus, some prime factor $p_j$ divides $P + 1$. Since\n $p_j$ also divides $P$, it must divide the difference $(P + 1) - P = 1$, a\n contradiction.\n]\n\n#corollary[\n There is no largest prime number.\n] \n#corollary[\n There are infinitely many composite numbers.\n]\n\n#theorem[\n There are arbitrarily long stretches of composite numbers.\n]\n\n#proof[\n For any $n > 2$, consider $\n n! + 2, quad n! + 3, quad ..., quad n! + n #qedhere\n $\n]\n\n\n= Others\n\n== Side-by-side\n\n#slide(composer: (1fr, 1fr))[\n First column.\n][\n Second column.\n]\n\n\n== Multiple Pages\n\n#lorem(200)\n\n\n// appendix by freezing last-slide-number\n#let s = (s.methods.appendix)(self: s)\n#let (slide, empty-slide) = utils.slides(s)\n\n== Appendix\n\n#slide[\n Please pay attention to the current slide number.\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/fcecb505-d2d1-4e36-945a-225f4661a694",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:"Touying offers many built-in themes to easily create beautiful slides. For example, in this case:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:'#let s = themes.university.register(aspect-ratio: "16-9")\n'})}),"\n",(0,i.jsx)(n.p,{children:"you can use the university theme. For more detailed tutorials on themes, you can refer to the following sections."})]})}function u(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>r});var i=t(7294);const s={},o=i.createContext(s);function r(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/49841adc.7038a44a.js b/assets/js/49841adc.7038a44a.js deleted file mode 100644 index fde56ceb9..000000000 --- a/assets/js/49841adc.7038a44a.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[819],{4847:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>u,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var i=t(5893),s=t(1151);const o={sidebar_position:2},r="Getting Started",a={id:"start",title:"Getting Started",description:"Before you begin, make sure you have the Typst environment installed. If not, you can use the Web App or install the Tinymist LSP and Typst Preview plugins for VS Code.",source:"@site/versioned_docs/version-0.4.1/start.md",sourceDirName:".",slug:"/start",permalink:"/touying/docs/start",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/start.md",tags:[],version:"0.4.1",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Introduction to Touying",permalink:"/touying/docs/intro"},next:{title:"Sections and Subsections",permalink:"/touying/docs/sections"}},l={},d=[{value:"More Complex Examples",id:"more-complex-examples",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"getting-started",children:"Getting Started"}),"\n",(0,i.jsxs)(n.p,{children:["Before you begin, make sure you have the Typst environment installed. If not, you can use the ",(0,i.jsx)(n.a,{href:"https://typst.app/",children:"Web App"})," or install the ",(0,i.jsx)(n.a,{href:"https://marketplace.visualstudio.com/items?itemName=myriad-dreamin.tinymist",children:"Tinymist LSP"})," and ",(0,i.jsx)(n.a,{href:"https://marketplace.visualstudio.com/items?itemName=mgt19937.typst-preview",children:"Typst Preview"})," plugins for VS Code."]}),"\n",(0,i.jsx)(n.p,{children:"To use Touying, you just need to include the following in your document:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/f5bdbf8f-7bf9-45fd-9923-0fa5d66450b2",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:"It's that simple! You've created your first Touying slides. Congratulations! \ud83c\udf89"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Tip:"})," You can use Typst syntax like ",(0,i.jsx)(n.code,{children:'#import "config.typ": *'})," or ",(0,i.jsx)(n.code,{children:'#include "content.typ"'})," to implement Touying's multi-file architecture."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Warning:"})," The comma in ",(0,i.jsx)(n.code,{children:"#let (slide, empty-slide) = utils.slides(s)"})," is necessary for the unpacking syntax."]}),"\n",(0,i.jsx)(n.h2,{id:"more-complex-examples",children:"More Complex Examples"}),"\n",(0,i.jsxs)(n.p,{children:["In fact, Touying provides various styles for slide writing. You can also use the ",(0,i.jsx)(n.code,{children:"#slide[..]"})," syntax to access more powerful features provided by Touying."]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/fcecb505-d2d1-4e36-945a-225f4661a694",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:"Touying offers many built-in themes to easily create beautiful slides. For example, in this case:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:'#let s = themes.university.register(aspect-ratio: "16-9")\n'})}),"\n",(0,i.jsx)(n.p,{children:"you can use the university theme. For more detailed tutorials on themes, you can refer to the following sections."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/cetz:0.2.2"\n#import "@preview/fletcher:0.4.4" as fletcher: node, edge\n#import "@preview/ctheorems:1.1.2": *\n\n// cetz and fletcher bindings for touying\n#let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true))\n#let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide)\n\n// Register university theme\n// You can replace it with other themes and it can still work normally\n#let s = themes.university.register(aspect-ratio: "16-9")\n\n// Set the numbering of section and subsection\n#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")\n\n// Global information configuration\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n\n// Pdfpc configuration\n// typst query --root . ./example.typ --field value --one "" > ./example.pdfpc\n#let s = (s.methods.append-preamble)(self: s, pdfpc.config(\n duration-minutes: 30,\n start-time: datetime(hour: 14, minute: 10, second: 0),\n end-time: datetime(hour: 14, minute: 40, second: 0),\n last-minutes: 5,\n note-font-size: 12,\n disable-markdown: false,\n default-transition: (\n type: "push",\n duration-seconds: 2,\n angle: ltr,\n alignment: "vertical",\n direction: "inward",\n ),\n))\n\n// Theroems configuration by ctheorems\n#show: thmrules.with(qed-symbol: $square$)\n#let theorem = thmbox("theorem", "Theorem", fill: rgb("#eeffee"))\n#let corollary = thmplain(\n "corollary",\n "Corollary",\n base: "theorem",\n titlefmt: strong\n)\n#let definition = thmbox("definition", "Definition", inset: (x: 1.2em, top: 1em))\n#let example = thmplain("example", "Example").with(numbering: none)\n#let proof = thmproof("proof", "Proof")\n\n// Extract methods\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n// Extract slide functions\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Animation\n\n== Simple Animation\n\nWe can use `#pause` to #pause display something later.\n\n#pause\n\nJust like this.\n\n#meanwhile\n\nMeanwhile, #pause we can also use `#meanwhile` to #pause display other content synchronously.\n\n\n== Complex Animation\n\n#slide(repeat: 3, self => [\n #let (uncover, only, alternatives) = utils.methods(self)\n\n At subslide #self.subslide, we can\n\n use #uncover("2-")[`#uncover` function] for reserving space,\n\n use #only("2-")[`#only` function] for not reserving space,\n\n #alternatives[call `#only` multiple times \\u{2717}][use `#alternatives` function #sym.checkmark] for choosing one of the alternatives.\n])\n\n\n== Math Equation Animation\n\nTouying equation with `pause`:\n\n#touying-equation(`\n f(x) &= pause x^2 + 2x + 1 \\\n &= pause (x + 1)^2 \\\n`)\n\n#meanwhile\n\nHere, #pause we have the expression of $f(x)$.\n\n#pause\n\nBy factorizing, we can obtain this result.\n\n\n== CeTZ Animation\n\nCeTZ Animation in Touying:\n\n#cetz-canvas({\n import cetz.draw: *\n \n rect((0,0), (5,5))\n\n (pause,)\n\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n\n (pause,)\n\n line((0,0), (2.5, 2.5), name: "line")\n})\n\n\n== Fletcher Animation\n\nFletcher Animation in Touying:\n\n#fletcher-diagram(\n node-stroke: .1em,\n node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),\n spacing: 4em,\n edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),\n node((0,0), `reading`, radius: 2em),\n edge((0,0), (0,0), `read()`, "--|>", bend: 130deg),\n pause,\n edge(`read()`, "-|>"),\n node((1,0), `eof`, radius: 2em),\n pause,\n edge(`close()`, "-|>"),\n node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)),\n edge((0,0), (2,0), `close()`, "-|>", bend: -40deg),\n)\n\n\n= Theroems\n\n== Prime numbers\n\n#definition[\n A natural number is called a #highlight[_prime number_] if it is greater\n than 1 and cannot be written as the product of two smaller natural numbers.\n]\n#example[\n The numbers $2$, $3$, and $17$ are prime.\n @cor_largest_prime shows that this list is not exhaustive!\n]\n\n#theorem("Euclid")[\n There are infinitely many primes.\n]\n#proof[\n Suppose to the contrary that $p_1, p_2, dots, p_n$ is a finite enumeration\n of all primes. Set $P = p_1 p_2 dots p_n$. Since $P + 1$ is not in our list,\n it cannot be prime. Thus, some prime factor $p_j$ divides $P + 1$. Since\n $p_j$ also divides $P$, it must divide the difference $(P + 1) - P = 1$, a\n contradiction.\n]\n\n#corollary[\n There is no largest prime number.\n] \n#corollary[\n There are infinitely many composite numbers.\n]\n\n#theorem[\n There are arbitrarily long stretches of composite numbers.\n]\n\n#proof[\n For any $n > 2$, consider $\n n! + 2, quad n! + 3, quad ..., quad n! + n #qedhere\n $\n]\n\n\n= Others\n\n== Side-by-side\n\n#slide(composer: (1fr, 1fr))[\n First column.\n][\n Second column.\n]\n\n\n== Multiple Pages\n\n#lorem(200)\n\n\n// appendix by freezing last-slide-number\n#let s = (s.methods.appendix)(self: s)\n#let (slide, empty-slide) = utils.slides(s)\n\n== Appendix\n\n#slide[\n Please pay attention to the current slide number.\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/fcecb505-d2d1-4e36-945a-225f4661a694",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:"Touying offers many built-in themes to easily create beautiful slides. For example, in this case:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:'#let s = themes.university.register(aspect-ratio: "16-9")\n'})}),"\n",(0,i.jsx)(n.p,{children:"you can use the university theme. For more detailed tutorials on themes, you can refer to the following sections."})]})}function u(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>r});var i=t(7294);const s={},o=i.createContext(s);function r(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/cbb499f0.2b9f1276.js b/assets/js/49c05bac.f3be3120.js similarity index 92% rename from assets/js/cbb499f0.2b9f1276.js rename to assets/js/49c05bac.f3be3120.js index 02965a364..8c08bfbd2 100644 --- a/assets/js/cbb499f0.2b9f1276.js +++ b/assets/js/49c05bac.f3be3120.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1001],{7717:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>a,default:()=>h,frontMatter:()=>r,metadata:()=>s,toc:()=>c});var o=n(5893),i=n(1151);const r={sidebar_position:6},a="Handout Mode",s={id:"dynamic/handout",title:"Handout Mode",description:"While watching slides and attending lectures, the audience often wishes to have handouts for reviewing challenging concepts. Therefore, it's beneficial for the author to provide handouts for the audience, preferably before the lecture for better preparation.",source:"@site/versioned_docs/version-0.4.1/dynamic/handout.md",sourceDirName:"dynamic",slug:"/dynamic/handout",permalink:"/touying/docs/dynamic/handout",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/dynamic/handout.md",tags:[],version:"0.4.1",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"tutorialSidebar",previous:{title:"Other Animations",permalink:"/touying/docs/dynamic/other"},next:{title:"Package Integration",permalink:"/touying/docs/category/package-integration"}},d={},c=[];function u(e){const t={code:"code",h1:"h1",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{id:"handout-mode",children:"Handout Mode"}),"\n",(0,o.jsx)(t.p,{children:"While watching slides and attending lectures, the audience often wishes to have handouts for reviewing challenging concepts. Therefore, it's beneficial for the author to provide handouts for the audience, preferably before the lecture for better preparation."}),"\n",(0,o.jsx)(t.p,{children:"The handout mode differs from the regular mode as it doesn't require intricate animation effects. It retains only the last subslide of each slide."}),"\n",(0,o.jsx)(t.p,{children:"Enabling handout mode is simple:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-typst",children:"#let s = (s.methods.enable-handout-mode)(self: s)\n"})})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(u,{...e})}):u(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var o=n(7294);const i={},r=o.createContext(i);function a(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8235],{7965:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>a,default:()=>h,frontMatter:()=>r,metadata:()=>s,toc:()=>c});var o=n(5893),i=n(1151);const r={sidebar_position:6},a="Handout Mode",s={id:"dynamic/handout",title:"Handout Mode",description:"While watching slides and attending lectures, the audience often wishes to have handouts for reviewing challenging concepts. Therefore, it's beneficial for the author to provide handouts for the audience, preferably before the lecture for better preparation.",source:"@site/versioned_docs/version-0.4.2/dynamic/handout.md",sourceDirName:"dynamic",slug:"/dynamic/handout",permalink:"/touying/docs/dynamic/handout",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/dynamic/handout.md",tags:[],version:"0.4.2",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"tutorialSidebar",previous:{title:"Other Animations",permalink:"/touying/docs/dynamic/other"},next:{title:"Package Integration",permalink:"/touying/docs/category/package-integration"}},d={},c=[];function u(e){const t={code:"code",h1:"h1",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{id:"handout-mode",children:"Handout Mode"}),"\n",(0,o.jsx)(t.p,{children:"While watching slides and attending lectures, the audience often wishes to have handouts for reviewing challenging concepts. Therefore, it's beneficial for the author to provide handouts for the audience, preferably before the lecture for better preparation."}),"\n",(0,o.jsx)(t.p,{children:"The handout mode differs from the regular mode as it doesn't require intricate animation effects. It retains only the last subslide of each slide."}),"\n",(0,o.jsx)(t.p,{children:"Enabling handout mode is simple:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-typst",children:"#let s = (s.methods.enable-handout-mode)(self: s)\n"})})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(u,{...e})}):u(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var o=n(7294);const i={},r=o.createContext(i);function a(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5057383c.b6c158ad.js b/assets/js/5057383c.a8c6bf9e.js similarity index 98% rename from assets/js/5057383c.b6c158ad.js rename to assets/js/5057383c.a8c6bf9e.js index 68080323b..005773da4 100644 --- a/assets/js/5057383c.b6c158ad.js +++ b/assets/js/5057383c.a8c6bf9e.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[5854],{3242:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>p,contentTitle:()=>r,default:()=>u,frontMatter:()=>o,metadata:()=>a,toc:()=>l});var n=t(5893),i=t(1151);const o={sidebar_position:2},r="Pympress",a={id:"external/pympress",title:"Pympress",description:"Pympress is a PDF presentation tool designed for dual-screen setups such as presentations and public talks. Highly configurable, fully-featured, and portable",source:"@site/docs/external/pympress.md",sourceDirName:"external",slug:"/external/pympress",permalink:"/touying/docs/next/external/pympress",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/external/pympress.md",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Pdfpc",permalink:"/touying/docs/next/external/pdfpc"},next:{title:"Typst Preview",permalink:"/touying/docs/next/external/typst-preview"}},p={},l=[{value:"Speaker Notes",id:"speaker-notes",level:2}];function c(e){const s={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s.h1,{id:"pympress",children:"Pympress"}),"\n",(0,n.jsxs)(s.p,{children:[(0,n.jsx)(s.a,{href:"https://github.com/Cimbali/pympress",children:"Pympress"})," is a PDF presentation tool designed for dual-screen setups such as presentations and public talks. Highly configurable, fully-featured, and portable"]}),"\n",(0,n.jsx)(s.h2,{id:"speaker-notes",children:"Speaker Notes"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n\n// Set the speaker notes configuration, you can show it by pympress\n#let s = (s.methods.show-notes-on-second-screen)(self: s, right)\n\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Animation\n\n== Simple Animation\n\nWe can use `#pause` to #pause display something later.\n\n#pause\n\nJust like this.\n\n#meanwhile\n\nMeanwhile, #pause we can also use `#meanwhile` to #pause display other content synchronously.\n\n#speaker-note[\n + This is a speaker note.\n + You won\'t see it unless you use `#let s = (s.math.show-notes-on-second-screen)(self: s, right)`\n]\n'})}),"\n",(0,n.jsx)(s.p,{children:(0,n.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/b43c7f99-c5f9-4084-aa70-c1561e8aafee",alt:"image"})}),"\n",(0,n.jsx)(s.p,{children:"Then we can use the pympress to show it."}),"\n",(0,n.jsx)(s.p,{children:(0,n.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/afbe17cb-46d4-4507-90e8-959c53de95d5",alt:"image"})})]})}function u(e={}){const{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},1151:(e,s,t)=>{t.d(s,{Z:()=>a,a:()=>r});var n=t(7294);const i={},o=n.createContext(i);function r(e){const s=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),n.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[5854],{3242:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>p,contentTitle:()=>r,default:()=>u,frontMatter:()=>o,metadata:()=>a,toc:()=>l});var n=t(5893),i=t(1151);const o={sidebar_position:2},r="Pympress",a={id:"external/pympress",title:"Pympress",description:"Pympress is a PDF presentation tool designed for dual-screen setups such as presentations and public talks. Highly configurable, fully-featured, and portable",source:"@site/docs/external/pympress.md",sourceDirName:"external",slug:"/external/pympress",permalink:"/touying/docs/next/external/pympress",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/external/pympress.md",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Pdfpc",permalink:"/touying/docs/next/external/pdfpc"},next:{title:"Typst Preview",permalink:"/touying/docs/next/external/typst-preview"}},p={},l=[{value:"Speaker Notes",id:"speaker-notes",level:2}];function c(e){const s={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s.h1,{id:"pympress",children:"Pympress"}),"\n",(0,n.jsxs)(s.p,{children:[(0,n.jsx)(s.a,{href:"https://github.com/Cimbali/pympress",children:"Pympress"})," is a PDF presentation tool designed for dual-screen setups such as presentations and public talks. Highly configurable, fully-featured, and portable"]}),"\n",(0,n.jsx)(s.h2,{id:"speaker-notes",children:"Speaker Notes"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n\n// Set the speaker notes configuration, you can show it by pympress\n#let s = (s.methods.show-notes-on-second-screen)(self: s, right)\n\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Animation\n\n== Simple Animation\n\nWe can use `#pause` to #pause display something later.\n\n#pause\n\nJust like this.\n\n#meanwhile\n\nMeanwhile, #pause we can also use `#meanwhile` to #pause display other content synchronously.\n\n#speaker-note[\n + This is a speaker note.\n + You won\'t see it unless you use `#let s = (s.math.show-notes-on-second-screen)(self: s, right)`\n]\n'})}),"\n",(0,n.jsx)(s.p,{children:(0,n.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/b43c7f99-c5f9-4084-aa70-c1561e8aafee",alt:"image"})}),"\n",(0,n.jsx)(s.p,{children:"Then we can use the pympress to show it."}),"\n",(0,n.jsx)(s.p,{children:(0,n.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/afbe17cb-46d4-4507-90e8-959c53de95d5",alt:"image"})})]})}function u(e={}){const{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},1151:(e,s,t)=>{t.d(s,{Z:()=>a,a:()=>r});var n=t(7294);const i={},o=n.createContext(i);function r(e){const s=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),n.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/51a4d3bf.67d62bc7.js b/assets/js/51a4d3bf.67d62bc7.js deleted file mode 100644 index 056d64e93..000000000 --- a/assets/js/51a4d3bf.67d62bc7.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2289],{4728:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>c,default:()=>h,frontMatter:()=>o,metadata:()=>l,toc:()=>d});var s=t(5893),i=t(1151);const o={sidebar_position:2},c="Complex Animations",l={id:"dynamic/complex",title:"Complex Animations",description:"Thanks to the syntax provided by Polylux, we can also use only, uncover, and alternatives in Touying.",source:"@site/docs/dynamic/complex.md",sourceDirName:"dynamic",slug:"/dynamic/complex",permalink:"/touying/docs/next/dynamic/complex",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/dynamic/complex.md",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Simple Animations",permalink:"/touying/docs/next/dynamic/simple"},next:{title:"Math Equation Animations",permalink:"/touying/docs/next/dynamic/equation"}},a={},d=[{value:"Callback-Style Functions",id:"callback-style-functions",level:2},{value:"only",id:"only",level:2},{value:"uncover",id:"uncover",level:2},{value:"alternatives",id:"alternatives",level:2}];function r(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"complex-animations",children:"Complex Animations"}),"\n",(0,s.jsxs)(n.p,{children:["Thanks to the syntax provided by ",(0,s.jsx)(n.a,{href:"https://polylux.dev/book/dynamic/syntax.html",children:"Polylux"}),", we can also use ",(0,s.jsx)(n.code,{children:"only"}),", ",(0,s.jsx)(n.code,{children:"uncover"}),", and ",(0,s.jsx)(n.code,{children:"alternatives"})," in Touying."]}),"\n",(0,s.jsx)(n.h2,{id:"callback-style-functions",children:"Callback-Style Functions"}),"\n",(0,s.jsxs)(n.p,{children:["To overcome the limitations of ",(0,s.jsx)(n.code,{children:"styled"})," and ",(0,s.jsx)(n.code,{children:"layout"})," mentioned earlier, Touying cleverly implements always-effective ",(0,s.jsx)(n.code,{children:"only"}),", ",(0,s.jsx)(n.code,{children:"uncover"}),", and ",(0,s.jsx)(n.code,{children:"alternatives"})," using callback functions. Specifically, you need to introduce these three functions as follows:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#slide(repeat: 3, self => [\n #let (uncover, only, alternatives) = utils.methods(self)\n\n In subslide #self.subslide,\n\n test #uncover("2-")[uncover] function,\n\n and test #only("2-")[only] function,\n\n #pause\n\n and paused text.\n])\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/e9a6b8c5-daf0-4cf2-8d39-1a768ce1dfea",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["Notice that we no longer pass a content block but instead pass a callback function with a ",(0,s.jsx)(n.code,{children:"self"})," parameter. Later, we extract ",(0,s.jsx)(n.code,{children:"only"}),", ",(0,s.jsx)(n.code,{children:"uncover"}),", and ",(0,s.jsx)(n.code,{children:"alternatives"})," functions from ",(0,s.jsx)(n.code,{children:"self"})," using:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#let (uncover, only, alternatives) = utils.methods(self)\n"})}),"\n",(0,s.jsx)(n.p,{children:"We then call these functions in subsequent steps."}),"\n",(0,s.jsxs)(n.p,{children:["Here's an interesting fact: the ",(0,s.jsx)(n.code,{children:"self.subslide"})," of type int indicates the current subslide index, and in fact, the ",(0,s.jsx)(n.code,{children:"only"}),", ",(0,s.jsx)(n.code,{children:"uncover"}),", and ",(0,s.jsx)(n.code,{children:"alternatives"})," functions rely on ",(0,s.jsx)(n.code,{children:"self.subslide"})," to determine the current subslide index."]}),"\n",(0,s.jsx)(n.admonition,{title:"Warning",type:"warning",children:(0,s.jsxs)(n.p,{children:["We manually specify the ",(0,s.jsx)(n.code,{children:"repeat: 3"})," parameter, indicating the display of 3 subslides. We need to do this manually because Touying cannot infer how many subslides ",(0,s.jsx)(n.code,{children:"only"}),", ",(0,s.jsx)(n.code,{children:"uncover"}),", and ",(0,s.jsx)(n.code,{children:"alternatives"})," should display."]})}),"\n",(0,s.jsx)(n.h2,{id:"only",children:"only"}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"only"})," function means it \"appears\" only on selected subslides. If it doesn't appear, it completely disappears and doesn't occupy any space. In other words, ",(0,s.jsx)(n.code,{children:"#only(index, body)"})," is either ",(0,s.jsx)(n.code,{children:"body"})," or ",(0,s.jsx)(n.code,{children:"none"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["The index can be an int type or a str type like ",(0,s.jsx)(n.code,{children:'"2-"'})," or ",(0,s.jsx)(n.code,{children:'"2-3"'}),". For more usage, refer to ",(0,s.jsx)(n.a,{href:"https://polylux.dev/book/dynamic/complex.html",children:"Polylux"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"uncover",children:"uncover"}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"uncover"}),' function means it "displays" only on selected subslides; otherwise, it will be covered by the ',(0,s.jsx)(n.code,{children:"cover"})," function but still occupies the original space. In other words, ",(0,s.jsx)(n.code,{children:"#uncover(index, body)"})," is either ",(0,s.jsx)(n.code,{children:"body"})," or ",(0,s.jsx)(n.code,{children:"cover(body)"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["The index can be an int type or a str type like ",(0,s.jsx)(n.code,{children:'"2-"'})," or ",(0,s.jsx)(n.code,{children:'"2-3"'}),". For more usage, refer to ",(0,s.jsx)(n.a,{href:"https://polylux.dev/book/dynamic/complex.html",children:"Polylux"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["You may also have noticed that ",(0,s.jsx)(n.code,{children:"#pause"})," actually uses the ",(0,s.jsx)(n.code,{children:"cover"})," function, providing a more convenient syntax. In reality, their effects are almost identical."]}),"\n",(0,s.jsx)(n.h2,{id:"alternatives",children:"alternatives"}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"alternatives"})," function displays a series of different content in different subslides. For example:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#slide(repeat: 3, self => [\n #let (uncover, only, alternatives) = utils.methods(self)\n\n #alternatives[Ann][Bob][Christopher]\n likes\n #alternatives[chocolate][strawberry][vanilla]\n ice cream.\n])\n"})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/392707ea-0bcd-426b-b232-5bc63b9a13a3",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["As you can see, ",(0,s.jsx)(n.code,{children:"alternatives"})," can automatically expand to the most suitable width and height, a capability that ",(0,s.jsx)(n.code,{children:"only"})," and ",(0,s.jsx)(n.code,{children:"uncover"})," lack. In fact, ",(0,s.jsx)(n.code,{children:"alternatives"})," has other parameters, such as ",(0,s.jsx)(n.code,{children:"start: 2"}),", ",(0,s.jsx)(n.code,{children:"repeat-last: true"}),", and ",(0,s.jsx)(n.code,{children:"position: center + horizon"}),". For more usage, refer to ",(0,s.jsx)(n.a,{href:"https://polylux.dev/book/dynamic/alternatives.html",children:"Polylux"}),"."]})]})}function h(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(r,{...e})}):r(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>l,a:()=>c});var s=t(7294);const i={},o=s.createContext(i);function c(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:c(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/51a4d3bf.bd721ab8.js b/assets/js/51a4d3bf.bd721ab8.js new file mode 100644 index 000000000..f9fd2a22b --- /dev/null +++ b/assets/js/51a4d3bf.bd721ab8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2289],{4728:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>r,contentTitle:()=>c,default:()=>u,frontMatter:()=>o,metadata:()=>l,toc:()=>a});var t=s(5893),i=s(1151);const o={sidebar_position:2},c="Complex Animations",l={id:"dynamic/complex",title:"Complex Animations",description:"Thanks to the syntax provided by Polylux, we can also use only, uncover, and alternatives in Touying.",source:"@site/docs/dynamic/complex.md",sourceDirName:"dynamic",slug:"/dynamic/complex",permalink:"/touying/docs/next/dynamic/complex",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/dynamic/complex.md",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Simple Animations",permalink:"/touying/docs/next/dynamic/simple"},next:{title:"Math Equation Animations",permalink:"/touying/docs/next/dynamic/equation"}},r={},a=[{value:"Mark-Style Functions",id:"mark-style-functions",level:2},{value:"Callback-Style Functions",id:"callback-style-functions",level:2},{value:"only",id:"only",level:2},{value:"uncover",id:"uncover",level:2},{value:"alternatives",id:"alternatives",level:2}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"complex-animations",children:"Complex Animations"}),"\n",(0,t.jsxs)(n.p,{children:["Thanks to the syntax provided by ",(0,t.jsx)(n.a,{href:"https://polylux.dev/book/dynamic/syntax.html",children:"Polylux"}),", we can also use ",(0,t.jsx)(n.code,{children:"only"}),", ",(0,t.jsx)(n.code,{children:"uncover"}),", and ",(0,t.jsx)(n.code,{children:"alternatives"})," in Touying."]}),"\n",(0,t.jsx)(n.h2,{id:"mark-style-functions",children:"Mark-Style Functions"}),"\n",(0,t.jsx)(n.p,{children:"We can use mark-style functions, which are very convenient to use."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'At subslide #utils.touying-wrapper((self: none) => str(self.subslide)), we can\n\nuse #uncover("2-")[`#uncover` function] for reserving space,\n\nuse #only("2-")[`#only` function] for not reserving space,\n\n#alternatives[call `#only` multiple times \\u{2717}][use `#alternatives` function #sym.checkmark] for choosing one of the alternatives.\n'})}),"\n",(0,t.jsxs)(n.p,{children:["However, this does not work in all cases, for example if you put ",(0,t.jsx)(n.code,{children:"uncover"})," into the layout function like ",(0,t.jsx)(n.code,{children:"grid"})," function, you will get an error."]}),"\n",(0,t.jsx)(n.h2,{id:"callback-style-functions",children:"Callback-Style Functions"}),"\n",(0,t.jsxs)(n.p,{children:["To overcome the limitations of layout functions mentioned earlier, Touying cleverly implements always-effective ",(0,t.jsx)(n.code,{children:"only"}),", ",(0,t.jsx)(n.code,{children:"uncover"}),", and ",(0,t.jsx)(n.code,{children:"alternatives"})," using callback functions. Specifically, you need to introduce these three functions as follows:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#slide(repeat: 3, self => [\n #let (uncover, only, alternatives) = utils.methods(self)\n\n At subslide #self.subslide, we can\n\n use #uncover("2-")[`#uncover` function] for reserving space,\n\n use #only("2-")[`#only` function] for not reserving space,\n\n #alternatives[call `#only` multiple times \\u{2717}][use `#alternatives` function #sym.checkmark] for choosing one of the alternatives.\n])\n'})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/e9a6b8c5-daf0-4cf2-8d39-1a768ce1dfea",alt:"image"})}),"\n",(0,t.jsxs)(n.p,{children:["Notice that we no longer pass a content block but instead pass a callback function with a ",(0,t.jsx)(n.code,{children:"self"})," parameter. Later, we extract ",(0,t.jsx)(n.code,{children:"only"}),", ",(0,t.jsx)(n.code,{children:"uncover"}),", and ",(0,t.jsx)(n.code,{children:"alternatives"})," functions from ",(0,t.jsx)(n.code,{children:"self"})," using:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#let (uncover, only, alternatives) = utils.methods(self)\n"})}),"\n",(0,t.jsx)(n.p,{children:"We then call these functions in subsequent steps."}),"\n",(0,t.jsxs)(n.p,{children:["Here's an interesting fact: the ",(0,t.jsx)(n.code,{children:"self.subslide"})," of type int indicates the current subslide index, and in fact, the ",(0,t.jsx)(n.code,{children:"only"}),", ",(0,t.jsx)(n.code,{children:"uncover"}),", and ",(0,t.jsx)(n.code,{children:"alternatives"})," functions rely on ",(0,t.jsx)(n.code,{children:"self.subslide"})," to determine the current subslide index."]}),"\n",(0,t.jsx)(n.admonition,{title:"Warning",type:"warning",children:(0,t.jsxs)(n.p,{children:["We manually specify the ",(0,t.jsx)(n.code,{children:"repeat: 3"})," parameter, indicating the display of 3 subslides. We need to do this manually because Touying cannot infer how many subslides ",(0,t.jsx)(n.code,{children:"only"}),", ",(0,t.jsx)(n.code,{children:"uncover"}),", and ",(0,t.jsx)(n.code,{children:"alternatives"})," should display."]})}),"\n",(0,t.jsx)(n.h2,{id:"only",children:"only"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"only"})," function means it \"appears\" only on selected subslides. If it doesn't appear, it completely disappears and doesn't occupy any space. In other words, ",(0,t.jsx)(n.code,{children:"#only(index, body)"})," is either ",(0,t.jsx)(n.code,{children:"body"})," or ",(0,t.jsx)(n.code,{children:"none"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["The index can be an int type or a str type like ",(0,t.jsx)(n.code,{children:'"2-"'})," or ",(0,t.jsx)(n.code,{children:'"2-3"'}),". For more usage, refer to ",(0,t.jsx)(n.a,{href:"https://polylux.dev/book/dynamic/complex.html",children:"Polylux"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"uncover",children:"uncover"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"uncover"}),' function means it "displays" only on selected subslides; otherwise, it will be covered by the ',(0,t.jsx)(n.code,{children:"cover"})," function but still occupies the original space. In other words, ",(0,t.jsx)(n.code,{children:"#uncover(index, body)"})," is either ",(0,t.jsx)(n.code,{children:"body"})," or ",(0,t.jsx)(n.code,{children:"cover(body)"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["The index can be an int type or a str type like ",(0,t.jsx)(n.code,{children:'"2-"'})," or ",(0,t.jsx)(n.code,{children:'"2-3"'}),". For more usage, refer to ",(0,t.jsx)(n.a,{href:"https://polylux.dev/book/dynamic/complex.html",children:"Polylux"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["You may also have noticed that ",(0,t.jsx)(n.code,{children:"#pause"})," actually uses the ",(0,t.jsx)(n.code,{children:"cover"})," function, providing a more convenient syntax. In reality, their effects are almost identical."]}),"\n",(0,t.jsx)(n.h2,{id:"alternatives",children:"alternatives"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"alternatives"})," function displays a series of different content in different subslides. For example:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#slide(repeat: 3, self => [\n #let (uncover, only, alternatives) = utils.methods(self)\n\n #alternatives[Ann][Bob][Christopher]\n likes\n #alternatives[chocolate][strawberry][vanilla]\n ice cream.\n])\n"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/392707ea-0bcd-426b-b232-5bc63b9a13a3",alt:"image"})}),"\n",(0,t.jsxs)(n.p,{children:["As you can see, ",(0,t.jsx)(n.code,{children:"alternatives"})," can automatically expand to the most suitable width and height, a capability that ",(0,t.jsx)(n.code,{children:"only"})," and ",(0,t.jsx)(n.code,{children:"uncover"})," lack. In fact, ",(0,t.jsx)(n.code,{children:"alternatives"})," has other parameters, such as ",(0,t.jsx)(n.code,{children:"start: 2"}),", ",(0,t.jsx)(n.code,{children:"repeat-last: true"}),", and ",(0,t.jsx)(n.code,{children:"position: center + horizon"}),". For more usage, refer to ",(0,t.jsx)(n.a,{href:"https://polylux.dev/book/dynamic/alternatives.html",children:"Polylux"}),"."]})]})}function u(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>l,a:()=>c});var t=s(7294);const i={},o=t.createContext(i);function c(e){const n=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:c(e.components),t.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/51f6a377.253d011d.js b/assets/js/51f6a377.253d011d.js deleted file mode 100644 index b85400cbd..000000000 --- a/assets/js/51f6a377.253d011d.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[873],{2334:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>a,contentTitle:()=>c,default:()=>h,frontMatter:()=>o,metadata:()=>l,toc:()=>d});var t=s(5893),i=s(1151);const o={sidebar_position:2},c="Complex Animations",l={id:"dynamic/complex",title:"Complex Animations",description:"Thanks to the syntax provided by Polylux, we can also use only, uncover, and alternatives in Touying.",source:"@site/versioned_docs/version-0.4.1/dynamic/complex.md",sourceDirName:"dynamic",slug:"/dynamic/complex",permalink:"/touying/docs/dynamic/complex",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/dynamic/complex.md",tags:[],version:"0.4.1",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Simple Animations",permalink:"/touying/docs/dynamic/simple"},next:{title:"Math Equation Animations",permalink:"/touying/docs/dynamic/equation"}},a={},d=[{value:"Callback-Style Functions",id:"callback-style-functions",level:2},{value:"only",id:"only",level:2},{value:"uncover",id:"uncover",level:2},{value:"alternatives",id:"alternatives",level:2}];function r(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"complex-animations",children:"Complex Animations"}),"\n",(0,t.jsxs)(n.p,{children:["Thanks to the syntax provided by ",(0,t.jsx)(n.a,{href:"https://polylux.dev/book/dynamic/syntax.html",children:"Polylux"}),", we can also use ",(0,t.jsx)(n.code,{children:"only"}),", ",(0,t.jsx)(n.code,{children:"uncover"}),", and ",(0,t.jsx)(n.code,{children:"alternatives"})," in Touying."]}),"\n",(0,t.jsx)(n.h2,{id:"callback-style-functions",children:"Callback-Style Functions"}),"\n",(0,t.jsxs)(n.p,{children:["To overcome the limitations of ",(0,t.jsx)(n.code,{children:"styled"})," and ",(0,t.jsx)(n.code,{children:"layout"})," mentioned earlier, Touying cleverly implements always-effective ",(0,t.jsx)(n.code,{children:"only"}),", ",(0,t.jsx)(n.code,{children:"uncover"}),", and ",(0,t.jsx)(n.code,{children:"alternatives"})," using callback functions. Specifically, you need to introduce these three functions as follows:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#slide(repeat: 3, self => [\n #let (uncover, only, alternatives) = utils.methods(self)\n\n In subslide #self.subslide,\n\n test #uncover("2-")[uncover] function,\n\n and test #only("2-")[only] function,\n\n #pause\n\n and paused text.\n])\n'})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/e9a6b8c5-daf0-4cf2-8d39-1a768ce1dfea",alt:"image"})}),"\n",(0,t.jsxs)(n.p,{children:["Notice that we no longer pass a content block but instead pass a callback function with a ",(0,t.jsx)(n.code,{children:"self"})," parameter. Later, we extract ",(0,t.jsx)(n.code,{children:"only"}),", ",(0,t.jsx)(n.code,{children:"uncover"}),", and ",(0,t.jsx)(n.code,{children:"alternatives"})," functions from ",(0,t.jsx)(n.code,{children:"self"})," using:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#let (uncover, only, alternatives) = utils.methods(self)\n"})}),"\n",(0,t.jsx)(n.p,{children:"We then call these functions in subsequent steps."}),"\n",(0,t.jsxs)(n.p,{children:["Here's an interesting fact: the ",(0,t.jsx)(n.code,{children:"self.subslide"})," of type int indicates the current subslide index, and in fact, the ",(0,t.jsx)(n.code,{children:"only"}),", ",(0,t.jsx)(n.code,{children:"uncover"}),", and ",(0,t.jsx)(n.code,{children:"alternatives"})," functions rely on ",(0,t.jsx)(n.code,{children:"self.subslide"})," to determine the current subslide index."]}),"\n",(0,t.jsx)(n.admonition,{title:"Warning",type:"warning",children:(0,t.jsxs)(n.p,{children:["We manually specify the ",(0,t.jsx)(n.code,{children:"repeat: 3"})," parameter, indicating the display of 3 subslides. We need to do this manually because Touying cannot infer how many subslides ",(0,t.jsx)(n.code,{children:"only"}),", ",(0,t.jsx)(n.code,{children:"uncover"}),", and ",(0,t.jsx)(n.code,{children:"alternatives"})," should display."]})}),"\n",(0,t.jsx)(n.h2,{id:"only",children:"only"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"only"})," function means it \"appears\" only on selected subslides. If it doesn't appear, it completely disappears and doesn't occupy any space. In other words, ",(0,t.jsx)(n.code,{children:"#only(index, body)"})," is either ",(0,t.jsx)(n.code,{children:"body"})," or ",(0,t.jsx)(n.code,{children:"none"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["The index can be an int type or a str type like ",(0,t.jsx)(n.code,{children:'"2-"'})," or ",(0,t.jsx)(n.code,{children:'"2-3"'}),". For more usage, refer to ",(0,t.jsx)(n.a,{href:"https://polylux.dev/book/dynamic/complex.html",children:"Polylux"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"uncover",children:"uncover"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"uncover"}),' function means it "displays" only on selected subslides; otherwise, it will be covered by the ',(0,t.jsx)(n.code,{children:"cover"})," function but still occupies the original space. In other words, ",(0,t.jsx)(n.code,{children:"#uncover(index, body)"})," is either ",(0,t.jsx)(n.code,{children:"body"})," or ",(0,t.jsx)(n.code,{children:"cover(body)"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["The index can be an int type or a str type like ",(0,t.jsx)(n.code,{children:'"2-"'})," or ",(0,t.jsx)(n.code,{children:'"2-3"'}),". For more usage, refer to ",(0,t.jsx)(n.a,{href:"https://polylux.dev/book/dynamic/complex.html",children:"Polylux"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["You may also have noticed that ",(0,t.jsx)(n.code,{children:"#pause"})," actually uses the ",(0,t.jsx)(n.code,{children:"cover"})," function, providing a more convenient syntax. In reality, their effects are almost identical."]}),"\n",(0,t.jsx)(n.h2,{id:"alternatives",children:"alternatives"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"alternatives"})," function displays a series of different content in different subslides. For example:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#slide(repeat: 3, self => [\n #let (uncover, only, alternatives) = utils.methods(self)\n\n #alternatives[Ann][Bob][Christopher]\n likes\n #alternatives[chocolate][strawberry][vanilla]\n ice cream.\n])\n"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/392707ea-0bcd-426b-b232-5bc63b9a13a3",alt:"image"})}),"\n",(0,t.jsxs)(n.p,{children:["As you can see, ",(0,t.jsx)(n.code,{children:"alternatives"})," can automatically expand to the most suitable width and height, a capability that ",(0,t.jsx)(n.code,{children:"only"})," and ",(0,t.jsx)(n.code,{children:"uncover"})," lack. In fact, ",(0,t.jsx)(n.code,{children:"alternatives"})," has other parameters, such as ",(0,t.jsx)(n.code,{children:"start: 2"}),", ",(0,t.jsx)(n.code,{children:"repeat-last: true"}),", and ",(0,t.jsx)(n.code,{children:"position: center + horizon"}),". For more usage, refer to ",(0,t.jsx)(n.a,{href:"https://polylux.dev/book/dynamic/alternatives.html",children:"Polylux"}),"."]})]})}function h(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(r,{...e})}):r(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>l,a:()=>c});var t=s(7294);const i={},o=t.createContext(i);function c(e){const n=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:c(e.components),t.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/51f6a377.8dc48c29.js b/assets/js/51f6a377.8dc48c29.js new file mode 100644 index 000000000..3bfce0493 --- /dev/null +++ b/assets/js/51f6a377.8dc48c29.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[873],{2334:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>a,contentTitle:()=>c,default:()=>h,frontMatter:()=>o,metadata:()=>l,toc:()=>d});var t=s(5893),i=s(1151);const o={sidebar_position:2},c="Complex Animations",l={id:"dynamic/complex",title:"Complex Animations",description:"Thanks to the syntax provided by Polylux, we can also use only, uncover, and alternatives in Touying.",source:"@site/versioned_docs/version-0.4.1/dynamic/complex.md",sourceDirName:"dynamic",slug:"/dynamic/complex",permalink:"/touying/docs/0.4.1/dynamic/complex",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/dynamic/complex.md",tags:[],version:"0.4.1",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Simple Animations",permalink:"/touying/docs/0.4.1/dynamic/simple"},next:{title:"Math Equation Animations",permalink:"/touying/docs/0.4.1/dynamic/equation"}},a={},d=[{value:"Callback-Style Functions",id:"callback-style-functions",level:2},{value:"only",id:"only",level:2},{value:"uncover",id:"uncover",level:2},{value:"alternatives",id:"alternatives",level:2}];function r(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"complex-animations",children:"Complex Animations"}),"\n",(0,t.jsxs)(n.p,{children:["Thanks to the syntax provided by ",(0,t.jsx)(n.a,{href:"https://polylux.dev/book/dynamic/syntax.html",children:"Polylux"}),", we can also use ",(0,t.jsx)(n.code,{children:"only"}),", ",(0,t.jsx)(n.code,{children:"uncover"}),", and ",(0,t.jsx)(n.code,{children:"alternatives"})," in Touying."]}),"\n",(0,t.jsx)(n.h2,{id:"callback-style-functions",children:"Callback-Style Functions"}),"\n",(0,t.jsxs)(n.p,{children:["To overcome the limitations of ",(0,t.jsx)(n.code,{children:"styled"})," and ",(0,t.jsx)(n.code,{children:"layout"})," mentioned earlier, Touying cleverly implements always-effective ",(0,t.jsx)(n.code,{children:"only"}),", ",(0,t.jsx)(n.code,{children:"uncover"}),", and ",(0,t.jsx)(n.code,{children:"alternatives"})," using callback functions. Specifically, you need to introduce these three functions as follows:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#slide(repeat: 3, self => [\n #let (uncover, only, alternatives) = utils.methods(self)\n\n In subslide #self.subslide,\n\n test #uncover("2-")[uncover] function,\n\n and test #only("2-")[only] function,\n\n #pause\n\n and paused text.\n])\n'})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/e9a6b8c5-daf0-4cf2-8d39-1a768ce1dfea",alt:"image"})}),"\n",(0,t.jsxs)(n.p,{children:["Notice that we no longer pass a content block but instead pass a callback function with a ",(0,t.jsx)(n.code,{children:"self"})," parameter. Later, we extract ",(0,t.jsx)(n.code,{children:"only"}),", ",(0,t.jsx)(n.code,{children:"uncover"}),", and ",(0,t.jsx)(n.code,{children:"alternatives"})," functions from ",(0,t.jsx)(n.code,{children:"self"})," using:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#let (uncover, only, alternatives) = utils.methods(self)\n"})}),"\n",(0,t.jsx)(n.p,{children:"We then call these functions in subsequent steps."}),"\n",(0,t.jsxs)(n.p,{children:["Here's an interesting fact: the ",(0,t.jsx)(n.code,{children:"self.subslide"})," of type int indicates the current subslide index, and in fact, the ",(0,t.jsx)(n.code,{children:"only"}),", ",(0,t.jsx)(n.code,{children:"uncover"}),", and ",(0,t.jsx)(n.code,{children:"alternatives"})," functions rely on ",(0,t.jsx)(n.code,{children:"self.subslide"})," to determine the current subslide index."]}),"\n",(0,t.jsx)(n.admonition,{title:"Warning",type:"warning",children:(0,t.jsxs)(n.p,{children:["We manually specify the ",(0,t.jsx)(n.code,{children:"repeat: 3"})," parameter, indicating the display of 3 subslides. We need to do this manually because Touying cannot infer how many subslides ",(0,t.jsx)(n.code,{children:"only"}),", ",(0,t.jsx)(n.code,{children:"uncover"}),", and ",(0,t.jsx)(n.code,{children:"alternatives"})," should display."]})}),"\n",(0,t.jsx)(n.h2,{id:"only",children:"only"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"only"})," function means it \"appears\" only on selected subslides. If it doesn't appear, it completely disappears and doesn't occupy any space. In other words, ",(0,t.jsx)(n.code,{children:"#only(index, body)"})," is either ",(0,t.jsx)(n.code,{children:"body"})," or ",(0,t.jsx)(n.code,{children:"none"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["The index can be an int type or a str type like ",(0,t.jsx)(n.code,{children:'"2-"'})," or ",(0,t.jsx)(n.code,{children:'"2-3"'}),". For more usage, refer to ",(0,t.jsx)(n.a,{href:"https://polylux.dev/book/dynamic/complex.html",children:"Polylux"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"uncover",children:"uncover"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"uncover"}),' function means it "displays" only on selected subslides; otherwise, it will be covered by the ',(0,t.jsx)(n.code,{children:"cover"})," function but still occupies the original space. In other words, ",(0,t.jsx)(n.code,{children:"#uncover(index, body)"})," is either ",(0,t.jsx)(n.code,{children:"body"})," or ",(0,t.jsx)(n.code,{children:"cover(body)"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["The index can be an int type or a str type like ",(0,t.jsx)(n.code,{children:'"2-"'})," or ",(0,t.jsx)(n.code,{children:'"2-3"'}),". For more usage, refer to ",(0,t.jsx)(n.a,{href:"https://polylux.dev/book/dynamic/complex.html",children:"Polylux"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["You may also have noticed that ",(0,t.jsx)(n.code,{children:"#pause"})," actually uses the ",(0,t.jsx)(n.code,{children:"cover"})," function, providing a more convenient syntax. In reality, their effects are almost identical."]}),"\n",(0,t.jsx)(n.h2,{id:"alternatives",children:"alternatives"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"alternatives"})," function displays a series of different content in different subslides. For example:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#slide(repeat: 3, self => [\n #let (uncover, only, alternatives) = utils.methods(self)\n\n #alternatives[Ann][Bob][Christopher]\n likes\n #alternatives[chocolate][strawberry][vanilla]\n ice cream.\n])\n"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/392707ea-0bcd-426b-b232-5bc63b9a13a3",alt:"image"})}),"\n",(0,t.jsxs)(n.p,{children:["As you can see, ",(0,t.jsx)(n.code,{children:"alternatives"})," can automatically expand to the most suitable width and height, a capability that ",(0,t.jsx)(n.code,{children:"only"})," and ",(0,t.jsx)(n.code,{children:"uncover"})," lack. In fact, ",(0,t.jsx)(n.code,{children:"alternatives"})," has other parameters, such as ",(0,t.jsx)(n.code,{children:"start: 2"}),", ",(0,t.jsx)(n.code,{children:"repeat-last: true"}),", and ",(0,t.jsx)(n.code,{children:"position: center + horizon"}),". For more usage, refer to ",(0,t.jsx)(n.a,{href:"https://polylux.dev/book/dynamic/alternatives.html",children:"Polylux"}),"."]})]})}function h(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(r,{...e})}):r(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>l,a:()=>c});var t=s(7294);const i={},o=t.createContext(i);function c(e){const n=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:c(e.components),t.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/332622f2.52eeb8b7.js b/assets/js/54e3aac2.72f2f60f.js similarity index 96% rename from assets/js/332622f2.52eeb8b7.js rename to assets/js/54e3aac2.72f2f60f.js index d1a02b189..09bebfcc5 100644 --- a/assets/js/332622f2.52eeb8b7.js +++ b/assets/js/54e3aac2.72f2f60f.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7256],{4149:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>r,contentTitle:()=>a,default:()=>u,frontMatter:()=>s,metadata:()=>c,toc:()=>l});var t=i(5893),o=i(1151);const s={sidebar_position:3},a="Math Equation Animations",c={id:"dynamic/equation",title:"Math Equation Animations",description:"Touying also provides a unique and highly useful feature\u2014math equation animations, allowing you to conveniently use pause and meanwhile within math equations.",source:"@site/versioned_docs/version-0.4.1/dynamic/equation.md",sourceDirName:"dynamic",slug:"/dynamic/equation",permalink:"/touying/docs/dynamic/equation",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/dynamic/equation.md",tags:[],version:"0.4.1",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Complex Animations",permalink:"/touying/docs/dynamic/complex"},next:{title:"Cover Function",permalink:"/touying/docs/dynamic/cover"}},r={},l=[{value:"Simple Animation",id:"simple-animation",level:2},{value:"Complex Animation",id:"complex-animation",level:2},{value:"Parameters",id:"parameters",level:2}];function d(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"math-equation-animations",children:"Math Equation Animations"}),"\n",(0,t.jsxs)(n.p,{children:["Touying also provides a unique and highly useful feature\u2014math equation animations, allowing you to conveniently use ",(0,t.jsx)(n.code,{children:"pause"})," and ",(0,t.jsx)(n.code,{children:"meanwhile"})," within math equations."]}),"\n",(0,t.jsx)(n.h2,{id:"simple-animation",children:"Simple Animation"}),"\n",(0,t.jsx)(n.p,{children:"Let's start with an example:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#slide[\n Touying equation with pause:\n\n #touying-equation(`\n f(x) &= pause x^2 + 2x + 1 \\\n &= pause (x + 1)^2 \\\n `)\n\n #meanwhile\n\n Touying equation is very simple.\n]\n"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/d176e61f-c0da-4c2a-a1bf-52621be5adb2",alt:"image"})}),"\n",(0,t.jsxs)(n.p,{children:["We use the ",(0,t.jsx)(n.code,{children:"touying-equation"})," function to incorporate ",(0,t.jsx)(n.code,{children:"pause"})," and ",(0,t.jsx)(n.code,{children:"meanwhile"})," within the text of math equations (in fact, you can also use ",(0,t.jsx)(n.code,{children:"#pause"})," or ",(0,t.jsx)(n.code,{children:"#pause;"}),")."]}),"\n",(0,t.jsx)(n.p,{children:"As you would expect, the math equation is displayed step by step, making it suitable for presenters to demonstrate their math reasoning."}),"\n",(0,t.jsx)(n.admonition,{title:"Warning",type:"warning",children:(0,t.jsxs)(n.p,{children:["While the ",(0,t.jsx)(n.code,{children:"touying-equation"})," function is convenient, you should always be aware that it doesn't perform complex syntax analysis. It simply splits the string using regular expressions. Therefore, you should not use ",(0,t.jsx)(n.code,{children:"pause"})," or ",(0,t.jsx)(n.code,{children:"meanwhile"})," within functions like ",(0,t.jsx)(n.code,{children:"display(..)"}),"!"]})}),"\n",(0,t.jsx)(n.h2,{id:"complex-animation",children:"Complex Animation"}),"\n",(0,t.jsxs)(n.p,{children:["In fact, we can also use ",(0,t.jsx)(n.code,{children:"only"}),", ",(0,t.jsx)(n.code,{children:"uncover"}),", and ",(0,t.jsx)(n.code,{children:"alternatives"})," within ",(0,t.jsx)(n.code,{children:"touying-equation"})," with a little trick:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#slide(repeat: 3, self => [\n #let (uncover, only, alternatives) = utils.methods(self)\n\n #touying-equation(scope: (uncover: uncover), `\n f(x) &= pause x^2 + 2x + uncover("3-", 1) \\\n &= pause (x + 1)^2 \\\n `)\n])\n'})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/f2df14a2-6424-4c53-81f7-1595aa330660",alt:"image"})}),"\n",(0,t.jsxs)(n.p,{children:["We can pass the functions we need into the ",(0,t.jsx)(n.code,{children:"touying-equation"})," through the ",(0,t.jsx)(n.code,{children:"scope"})," parameter, such as ",(0,t.jsx)(n.code,{children:"uncover"})," in this example."]}),"\n",(0,t.jsx)(n.h2,{id:"parameters",children:"Parameters"}),"\n",(0,t.jsxs)(n.p,{children:["The function definition of ",(0,t.jsx)(n.code,{children:"touying-equation"})," is:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#let touying-equation(block: true, numbering: none, supplement: auto, scope: (:), body) = { .. }\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Therefore, you can pass parameters like ",(0,t.jsx)(n.code,{children:"block"}),", ",(0,t.jsx)(n.code,{children:"numbering"}),", and ",(0,t.jsx)(n.code,{children:"supplement"})," to ",(0,t.jsx)(n.code,{children:"touying-equation"})," just like using normal math equations."]})]})}function u(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>c,a:()=>a});var t=i(7294);const o={},s=t.createContext(o);function a(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9213],{9919:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>r,contentTitle:()=>a,default:()=>u,frontMatter:()=>s,metadata:()=>c,toc:()=>l});var t=i(5893),o=i(1151);const s={sidebar_position:3},a="Math Equation Animations",c={id:"dynamic/equation",title:"Math Equation Animations",description:"Touying also provides a unique and highly useful feature\u2014math equation animations, allowing you to conveniently use pause and meanwhile within math equations.",source:"@site/versioned_docs/version-0.4.2/dynamic/equation.md",sourceDirName:"dynamic",slug:"/dynamic/equation",permalink:"/touying/docs/dynamic/equation",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/dynamic/equation.md",tags:[],version:"0.4.2",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Complex Animations",permalink:"/touying/docs/dynamic/complex"},next:{title:"Cover Function",permalink:"/touying/docs/dynamic/cover"}},r={},l=[{value:"Simple Animation",id:"simple-animation",level:2},{value:"Complex Animation",id:"complex-animation",level:2},{value:"Parameters",id:"parameters",level:2}];function d(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"math-equation-animations",children:"Math Equation Animations"}),"\n",(0,t.jsxs)(n.p,{children:["Touying also provides a unique and highly useful feature\u2014math equation animations, allowing you to conveniently use ",(0,t.jsx)(n.code,{children:"pause"})," and ",(0,t.jsx)(n.code,{children:"meanwhile"})," within math equations."]}),"\n",(0,t.jsx)(n.h2,{id:"simple-animation",children:"Simple Animation"}),"\n",(0,t.jsx)(n.p,{children:"Let's start with an example:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#slide[\n Touying equation with pause:\n\n #touying-equation(`\n f(x) &= pause x^2 + 2x + 1 \\\n &= pause (x + 1)^2 \\\n `)\n\n #meanwhile\n\n Touying equation is very simple.\n]\n"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/d176e61f-c0da-4c2a-a1bf-52621be5adb2",alt:"image"})}),"\n",(0,t.jsxs)(n.p,{children:["We use the ",(0,t.jsx)(n.code,{children:"touying-equation"})," function to incorporate ",(0,t.jsx)(n.code,{children:"pause"})," and ",(0,t.jsx)(n.code,{children:"meanwhile"})," within the text of math equations (in fact, you can also use ",(0,t.jsx)(n.code,{children:"#pause"})," or ",(0,t.jsx)(n.code,{children:"#pause;"}),")."]}),"\n",(0,t.jsx)(n.p,{children:"As you would expect, the math equation is displayed step by step, making it suitable for presenters to demonstrate their math reasoning."}),"\n",(0,t.jsx)(n.admonition,{title:"Warning",type:"warning",children:(0,t.jsxs)(n.p,{children:["While the ",(0,t.jsx)(n.code,{children:"touying-equation"})," function is convenient, you should always be aware that it doesn't perform complex syntax analysis. It simply splits the string using regular expressions. Therefore, you should not use ",(0,t.jsx)(n.code,{children:"pause"})," or ",(0,t.jsx)(n.code,{children:"meanwhile"})," within functions like ",(0,t.jsx)(n.code,{children:"display(..)"}),"!"]})}),"\n",(0,t.jsx)(n.h2,{id:"complex-animation",children:"Complex Animation"}),"\n",(0,t.jsxs)(n.p,{children:["In fact, we can also use ",(0,t.jsx)(n.code,{children:"only"}),", ",(0,t.jsx)(n.code,{children:"uncover"}),", and ",(0,t.jsx)(n.code,{children:"alternatives"})," within ",(0,t.jsx)(n.code,{children:"touying-equation"})," with a little trick:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#slide(repeat: 3, self => [\n #let (uncover, only, alternatives) = utils.methods(self)\n\n #touying-equation(scope: (uncover: uncover), `\n f(x) &= pause x^2 + 2x + uncover("3-", 1) \\\n &= pause (x + 1)^2 \\\n `)\n])\n'})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/f2df14a2-6424-4c53-81f7-1595aa330660",alt:"image"})}),"\n",(0,t.jsxs)(n.p,{children:["We can pass the functions we need into the ",(0,t.jsx)(n.code,{children:"touying-equation"})," through the ",(0,t.jsx)(n.code,{children:"scope"})," parameter, such as ",(0,t.jsx)(n.code,{children:"uncover"})," in this example."]}),"\n",(0,t.jsx)(n.h2,{id:"parameters",children:"Parameters"}),"\n",(0,t.jsxs)(n.p,{children:["The function definition of ",(0,t.jsx)(n.code,{children:"touying-equation"})," is:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#let touying-equation(block: true, numbering: none, supplement: auto, scope: (:), body) = { .. }\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Therefore, you can pass parameters like ",(0,t.jsx)(n.code,{children:"block"}),", ",(0,t.jsx)(n.code,{children:"numbering"}),", and ",(0,t.jsx)(n.code,{children:"supplement"})," to ",(0,t.jsx)(n.code,{children:"touying-equation"})," just like using normal math equations."]})]})}function u(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>c,a:()=>a});var t=i(7294);const o={},s=t.createContext(o);function a(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/55b57bd3.d0afb18d.js b/assets/js/55b57bd3.0dc30e84.js similarity index 98% rename from assets/js/55b57bd3.d0afb18d.js rename to assets/js/55b57bd3.0dc30e84.js index 703f15990..362df130a 100644 --- a/assets/js/55b57bd3.d0afb18d.js +++ b/assets/js/55b57bd3.0dc30e84.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6259],{4628:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>s,default:()=>h,frontMatter:()=>r,metadata:()=>a,toc:()=>l});var o=t(5893),i=t(1151);const r={sidebar_position:6},s="Ctheorems",a={id:"integration/ctheorems",title:"Ctheorems",description:"Touying can work seamlessly with the ctheorems package, allowing you to directly use the ctheorems package.",source:"@site/docs/integration/ctheorems.md",sourceDirName:"integration",slug:"/integration/ctheorems",permalink:"/touying/docs/next/integration/ctheorems",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/integration/ctheorems.md",tags:[],version:"current",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"tutorialSidebar",previous:{title:"Codly",permalink:"/touying/docs/next/integration/codly"},next:{title:"Themes",permalink:"/touying/docs/next/category/themes"}},c={},l=[];function m(e){const n={code:"code",h1:"h1",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{id:"ctheorems",children:"Ctheorems"}),"\n",(0,o.jsxs)(n.p,{children:["Touying can work seamlessly with the ",(0,o.jsx)(n.code,{children:"ctheorems"})," package, allowing you to directly use the ",(0,o.jsx)(n.code,{children:"ctheorems"})," package."]}),"\n",(0,o.jsxs)(n.p,{children:["Moreover, you can utilize ",(0,o.jsx)(n.code,{children:'#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")'})," to set numbering for sections and subsections."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/ctheorems:1.1.2": *\n\n// Register university theme\n#let s = themes.simple.register(aspect-ratio: "16-9")\n\n// Set the numbering of section and subsection\n#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")\n\n// Theroems configuration by ctheorems\n#show: thmrules.with(qed-symbol: $square$)\n#let theorem = thmbox("theorem", "Theorem", fill: rgb("#eeffee"))\n#let corollary = thmplain(\n "corollary",\n "Corollary",\n base: "theorem",\n titlefmt: strong\n)\n#let definition = thmbox("definition", "Definition", inset: (x: 1.2em, top: 1em))\n#let example = thmplain("example", "Example").with(numbering: none)\n#let proof = thmproof("proof", "Proof")\n\n// Extract methods\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n// Extract slide functions\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Theroems\n\n== Prime numbers\n\n#definition[\n A natural number is called a #highlight[_prime number_] if it is greater\n than 1 and cannot be written as the product of two smaller natural numbers.\n]\n#example[\n The numbers $2$, $3$, and $17$ are prime.\n @cor_largest_prime shows that this list is not exhaustive!\n]\n\n#theorem("Euclid")[\n There are infinitely many primes.\n]\n#proof[\n Suppose to the contrary that $p_1, p_2, dots, p_n$ is a finite enumeration\n of all primes. Set $P = p_1 p_2 dots p_n$. Since $P + 1$ is not in our list,\n it cannot be prime. Thus, some prime factor $p_j$ divides $P + 1$. Since\n $p_j$ also divides $P$, it must divide the difference $(P + 1) - P = 1$, a\n contradiction.\n]\n\n#corollary[\n There is no largest prime number.\n] \n#corollary[\n There are infinitely many composite numbers.\n]\n\n#theorem[\n There are arbitrarily long stretches of composite numbers.\n]\n\n#proof[\n For any $n > 2$, consider $\n n! + 2, quad n! + 3, quad ..., quad n! + n #qedhere\n $\n]\n'})}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/b506da7e-b7d6-4493-b35a-2307cfd38ddc",alt:"image"})})]})}function h(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>s});var o=t(7294);const i={},r=o.createContext(i);function s(e){const n=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),o.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6259],{4628:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>s,default:()=>h,frontMatter:()=>r,metadata:()=>a,toc:()=>l});var o=t(5893),i=t(1151);const r={sidebar_position:6},s="Ctheorems",a={id:"integration/ctheorems",title:"Ctheorems",description:"Touying can work seamlessly with the ctheorems package, allowing you to directly use the ctheorems package.",source:"@site/docs/integration/ctheorems.md",sourceDirName:"integration",slug:"/integration/ctheorems",permalink:"/touying/docs/next/integration/ctheorems",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/integration/ctheorems.md",tags:[],version:"current",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"tutorialSidebar",previous:{title:"Codly",permalink:"/touying/docs/next/integration/codly"},next:{title:"Themes",permalink:"/touying/docs/next/category/themes"}},c={},l=[];function m(e){const n={code:"code",h1:"h1",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{id:"ctheorems",children:"Ctheorems"}),"\n",(0,o.jsxs)(n.p,{children:["Touying can work seamlessly with the ",(0,o.jsx)(n.code,{children:"ctheorems"})," package, allowing you to directly use the ",(0,o.jsx)(n.code,{children:"ctheorems"})," package."]}),"\n",(0,o.jsxs)(n.p,{children:["Moreover, you can utilize ",(0,o.jsx)(n.code,{children:'#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")'})," to set numbering for sections and subsections."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n#import "@preview/ctheorems:1.1.2": *\n\n// Register university theme\n#let s = themes.simple.register(aspect-ratio: "16-9")\n\n// Set the numbering of section and subsection\n#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")\n\n// Theroems configuration by ctheorems\n#show: thmrules.with(qed-symbol: $square$)\n#let theorem = thmbox("theorem", "Theorem", fill: rgb("#eeffee"))\n#let corollary = thmplain(\n "corollary",\n "Corollary",\n base: "theorem",\n titlefmt: strong\n)\n#let definition = thmbox("definition", "Definition", inset: (x: 1.2em, top: 1em))\n#let example = thmplain("example", "Example").with(numbering: none)\n#let proof = thmproof("proof", "Proof")\n\n// Extract methods\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n// Extract slide functions\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Theroems\n\n== Prime numbers\n\n#definition[\n A natural number is called a #highlight[_prime number_] if it is greater\n than 1 and cannot be written as the product of two smaller natural numbers.\n]\n#example[\n The numbers $2$, $3$, and $17$ are prime.\n @cor_largest_prime shows that this list is not exhaustive!\n]\n\n#theorem("Euclid")[\n There are infinitely many primes.\n]\n#proof[\n Suppose to the contrary that $p_1, p_2, dots, p_n$ is a finite enumeration\n of all primes. Set $P = p_1 p_2 dots p_n$. Since $P + 1$ is not in our list,\n it cannot be prime. Thus, some prime factor $p_j$ divides $P + 1$. Since\n $p_j$ also divides $P$, it must divide the difference $(P + 1) - P = 1$, a\n contradiction.\n]\n\n#corollary[\n There is no largest prime number.\n] \n#corollary[\n There are infinitely many composite numbers.\n]\n\n#theorem[\n There are arbitrarily long stretches of composite numbers.\n]\n\n#proof[\n For any $n > 2$, consider $\n n! + 2, quad n! + 3, quad ..., quad n! + n #qedhere\n $\n]\n'})}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/b506da7e-b7d6-4493-b35a-2307cfd38ddc",alt:"image"})})]})}function h(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>s});var o=t(7294);const i={},r=o.createContext(i);function s(e){const n=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),o.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5670b452.719efa11.js b/assets/js/5670b452.8689bd1a.js similarity index 97% rename from assets/js/5670b452.719efa11.js rename to assets/js/5670b452.8689bd1a.js index cf0392382..2a74e11db 100644 --- a/assets/js/5670b452.719efa11.js +++ b/assets/js/5670b452.8689bd1a.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[997],{2261:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>r,toc:()=>a});var n=s(5893),i=s(1151);const o={sidebar_position:11},l="Creating Your Own Theme",r={id:"build-your-own-theme",title:"Creating Your Own Theme",description:"Creating your own theme with Touying might seem a bit complex initially due to the introduction of various concepts. However, fear not; if you successfully create a custom theme with Touying, you'll likely experience the convenience and powerful customization features it offers. You can refer to the source code of existing themes for guidance. The key steps to implement are:",source:"@site/docs/build-your-own-theme.md",sourceDirName:".",slug:"/build-your-own-theme",permalink:"/touying/docs/next/build-your-own-theme",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/build-your-own-theme.md",tags:[],version:"current",sidebarPosition:11,frontMatter:{sidebar_position:11},sidebar:"tutorialSidebar",previous:{title:"Aqua Theme",permalink:"/touying/docs/next/themes/aqua"},next:{title:"Progress",permalink:"/touying/docs/next/category/progress"}},d={},a=[{value:"Modifying Existing Themes",id:"modifying-existing-themes",level:2},{value:"Import",id:"import",level:2},{value:"Register Function and Init Method",id:"register-function-and-init-method",level:2},{value:"Color Theme",id:"color-theme",level:2},{value:"Practical: Custom Alert Method",id:"practical-custom-alert-method",level:2},{value:"Custom Header and Footer",id:"custom-header-and-footer",level:2},{value:"Custom Special Slide",id:"custom-special-slide",level:2},{value:"Conclusion",id:"conclusion",level:2}];function c(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"creating-your-own-theme",children:"Creating Your Own Theme"}),"\n",(0,n.jsxs)(t.p,{children:["Creating your own theme with Touying might seem a bit complex initially due to the introduction of various concepts. However, fear not; if you successfully create a custom theme with Touying, you'll likely experience the convenience and powerful customization features it offers. You can refer to the ",(0,n.jsx)(t.a,{href:"https://github.com/touying-typ/touying/tree/main/themes",children:"source code of existing themes"})," for guidance. The key steps to implement are:"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"register"})," function to initialize the global singleton ",(0,n.jsx)(t.code,{children:"s"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"init"})," method."]}),"\n",(0,n.jsxs)(t.li,{children:["Define a color theme by modifying the ",(0,n.jsx)(t.code,{children:"self.colors"})," member variable."]}),"\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"alert"})," method (optional)."]}),"\n",(0,n.jsx)(t.li,{children:"Customize the header."}),"\n",(0,n.jsx)(t.li,{children:"Customize the footer."}),"\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"slide"})," method."]}),"\n",(0,n.jsxs)(t.li,{children:["Customize special slide methods, such as ",(0,n.jsx)(t.code,{children:"title-slide"})," and ",(0,n.jsx)(t.code,{children:"focus-slide"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"slides"})," method (optional)."]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"To demonstrate creating a simple and elegant Bamboo theme, let's follow the steps."}),"\n",(0,n.jsx)(t.h2,{id:"modifying-existing-themes",children:"Modifying Existing Themes"}),"\n",(0,n.jsx)(t.p,{children:"If you wish to modify a theme within the Touying package locally instead of creating one from scratch, you can achieve this by following these steps:"}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["Copy the ",(0,n.jsx)(t.a,{href:"https://github.com/touying-typ/touying/tree/main/themes",children:"theme code"})," from the ",(0,n.jsx)(t.code,{children:"themes"})," directory to your local machine. For example, copy ",(0,n.jsx)(t.code,{children:"themes/university.typ"})," to a local file named ",(0,n.jsx)(t.code,{children:"university.typ"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:["Remove all ",(0,n.jsx)(t.code,{children:'#import "../xxx.typ"'})," commands at the top of the ",(0,n.jsx)(t.code,{children:"university.typ"})," file."]}),"\n",(0,n.jsxs)(t.li,{children:["Add ",(0,n.jsx)(t.code,{children:'#import "@preview/touying:0.4.1": *'})," at the top of the ",(0,n.jsx)(t.code,{children:"university.typ"})," file to import all modules."]}),"\n",(0,n.jsxs)(t.li,{children:["Replace ",(0,n.jsx)(t.code,{children:"self: s"})," in the ",(0,n.jsx)(t.code,{children:"register"})," function with ",(0,n.jsx)(t.code,{children:"self: themes.default.register()"})," ",(0,n.jsx)(t.strong,{children:"(Important)"}),"."]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"You can then import and use the theme by:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "university.typ"\n\n#let s = university.register(aspect-ratio: "16-9")\n'})}),"\n",(0,n.jsxs)(t.p,{children:["For a specific example, refer to: ",(0,n.jsx)(t.a,{href:"https://typst.app/project/rqRuzg0keo_ZEB5AdxjweA",children:"https://typst.app/project/rqRuzg0keo_ZEB5AdxjweA"})]}),"\n",(0,n.jsx)(t.h2,{id:"import",children:"Import"}),"\n",(0,n.jsx)(t.p,{children:"Depending on whether the theme is for personal use or part of Touying, you can import in two ways:"}),"\n",(0,n.jsx)(t.p,{children:"If for personal use:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n'})}),"\n",(0,n.jsx)(t.p,{children:"If part of Touying themes:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#import "../utils/utils.typ"\n#import "../utils/states.typ"\n#import "../utils/components.typ"\n'})}),"\n",(0,n.jsxs)(t.p,{children:["Additionally, add the import statement in Touying's ",(0,n.jsx)(t.code,{children:"themes/themes.typ"}),":"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{children:'#import "bamboo.typ"\n'})}),"\n",(0,n.jsx)(t.h2,{id:"register-function-and-init-method",children:"Register Function and Init Method"}),"\n",(0,n.jsx)(t.p,{children:"Next, we'll distinguish between the bamboo.typ template file and the main.typ file, the latter of which is sometimes omitted."}),"\n",(0,n.jsx)(t.p,{children:"Generally, the first step in creating slides is to determine font size and page aspect ratio. Therefore, we need to register an initialization method:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'// bamboo.typ\n#import "@preview/touying:0.4.1": *\n\n#let register(\n self: themes.default.register(),\n aspect-ratio: "16-9",\n) = {\n self.page-args += (\n paper: "presentation-" + aspect-ratio,\n )\n self.methods.init = (self: none, body) => {\n set text(size: 20pt)\n body\n }\n self\n}\n\n// main.typ\n#import "@preview/touying:0.4.1": *\n#import "bamboo.typ"\n\n#let s = bamboo.register(aspect-ratio: "16-9")\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= First Section\n\n== First Slide\n\n#slide[\n A slide with a title and an *important* information.\n]\n'})}),"\n",(0,n.jsxs)(t.p,{children:["As you can see, we created a ",(0,n.jsx)(t.code,{children:"register"})," function and passed an ",(0,n.jsx)(t.code,{children:"aspect-ratio"})," parameter to set the page aspect ratio. We get default ",(0,n.jsx)(t.code,{children:"self"})," by ",(0,n.jsx)(t.code,{children:"self: themes.default.register()"}),". As you might already know, in Touying, we should not use ",(0,n.jsx)(t.code,{children:"set page(..)"})," to set page parameters but rather use the syntax ",(0,n.jsx)(t.code,{children:"self.page-args += (..)"})," to set them, as explained in the Page Layout section."]}),"\n",(0,n.jsxs)(t.p,{children:["In addition, we registered a ",(0,n.jsx)(t.code,{children:"self.methods.init"})," method, which can be used for some global style settings. For example, in this case, we added ",(0,n.jsx)(t.code,{children:"set text(size: 20pt)"})," to set the font size. You can also place additional global style settings here, such as ",(0,n.jsx)(t.code,{children:"set par(justify: true)"}),". Since the ",(0,n.jsx)(t.code,{children:"init"})," function is placed inside ",(0,n.jsx)(t.code,{children:"self.methods"}),", it is a method, not a regular function. Therefore, we need to add the parameter ",(0,n.jsx)(t.code,{children:"self: none"})," to use it properly."]}),"\n",(0,n.jsxs)(t.p,{children:["As you can see, later in ",(0,n.jsx)(t.code,{children:"main.typ"}),", we apply the global style settings in ",(0,n.jsx)(t.code,{children:"init"})," using ",(0,n.jsx)(t.code,{children:"#show: init"}),", where ",(0,n.jsx)(t.code,{children:"init"})," is bound and unpacked through ",(0,n.jsx)(t.code,{children:"utils.methods(s)"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["If you pay extra attention, you'll notice that the ",(0,n.jsx)(t.code,{children:"register"})," function has an independent ",(0,n.jsx)(t.code,{children:"self"})," at the end. This actually represents returning the modified ",(0,n.jsx)(t.code,{children:"self"})," as the return value, which will be saved in ",(0,n.jsx)(t.code,{children:"#let s = .."}),". This line is therefore indispensable."]}),"\n",(0,n.jsx)(t.h2,{id:"color-theme",children:"Color Theme"}),"\n",(0,n.jsxs)(t.p,{children:["Choosing an attractive color theme for your slides is crucial. Touying provides built-in color theme support to minimize API differences between different themes. Touying offers two dimensions of color selection: the first is ",(0,n.jsx)(t.code,{children:"neutral"}),", ",(0,n.jsx)(t.code,{children:"primary"}),", ",(0,n.jsx)(t.code,{children:"secondary"}),", and ",(0,n.jsx)(t.code,{children:"tertiary"})," for hue distinction, with ",(0,n.jsx)(t.code,{children:"primary"})," being the most commonly used; the second is ",(0,n.jsx)(t.code,{children:"default"}),", ",(0,n.jsx)(t.code,{children:"light"}),", ",(0,n.jsx)(t.code,{children:"lighter"}),", ",(0,n.jsx)(t.code,{children:"lightest"}),", ",(0,n.jsx)(t.code,{children:"dark"}),", ",(0,n.jsx)(t.code,{children:"darker"}),", and ",(0,n.jsx)(t.code,{children:"darkest"})," for brightness distinction."]}),"\n",(0,n.jsxs)(t.p,{children:["As we are creating the Bamboo theme, we chose a color for the ",(0,n.jsx)(t.code,{children:"primary"})," theme, similar to bamboo (",(0,n.jsx)(t.code,{children:'rgb("#5E8B65")'}),"), and included neutral lightest/darkest as background and font colors."]}),"\n",(0,n.jsxs)(t.p,{children:["As shown in the code below, we use ",(0,n.jsx)(t.code,{children:"(self.methods.colors)(self: self, ..)"})," to modify the color theme. Essentially, it is a wrapper for ",(0,n.jsx)(t.code,{children:"self.colors += (..)"}),"."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#let register(\n self: themes.default.register(),\n aspect-ratio: "16-9",\n) = {\n // color theme\n self = (self.methods.colors)(\n self: self,\n primary: rgb("#5E8B65"),\n neutral-lightest: rgb("#ffffff"),\n neutral-darkest: rgb("#000000"),\n )\n self.page-args += (\n paper: "presentation-" + aspect-ratio,\n )\n self.methods.init = (self: none, body) => {\n set text(size: 20pt)\n body\n }\n self\n}\n'})}),"\n",(0,n.jsxs)(t.p,{children:["After adding the color theme, we can access the color using syntax like ",(0,n.jsx)(t.code,{children:"self.colors.primary"}),"."]}),"\n",(0,n.jsx)(t.p,{children:"It's worth noting that users can change the theme color at any time using:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#let s = (s.methods.colors)(self: s, primary: rgb("#3578B9"))\n'})}),"\n",(0,n.jsx)(t.p,{children:"This flexibility demonstrates Touying's powerful customization capabilities."}),"\n",(0,n.jsx)(t.h2,{id:"practical-custom-alert-method",children:"Practical: Custom Alert Method"}),"\n",(0,n.jsxs)(t.p,{children:["In general, we need to provide a ",(0,n.jsx)(t.code,{children:"#alert[..]"})," function for users, similar to ",(0,n.jsx)(t.code,{children:"#strong[..]"}),". Typically, ",(0,n.jsx)(t.code,{children:"#alert[..]"})," emphasizes text using the primary theme color for aesthetics. We add a line in the ",(0,n.jsx)(t.code,{children:"register"})," function:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:"self.methods.alert = (self: none, it) => text(fill: self.colors.primary, it)\n"})}),"\n",(0,n.jsxs)(t.p,{children:["This code sets the text color to ",(0,n.jsx)(t.code,{children:"self.colors.primary"}),", utilizing the theme's primary color."]}),"\n",(0,n.jsx)(t.h2,{id:"custom-header-and-footer",children:"Custom Header and Footer"}),"\n",(0,n.jsx)(t.p,{children:"Here, assuming you've already read the Page Layout section, we know we should add headers and footers to the slides."}),"\n",(0,n.jsxs)(t.p,{children:["Firstly, we add ",(0,n.jsx)(t.code,{children:"self.bamboo-title = []"}),". This means we save the title of the current slide as a member variable ",(0,n.jsx)(t.code,{children:"self.bamboo-title"}),", stored in ",(0,n.jsx)(t.code,{children:"self"}),". This makes it easy to use in the header and later modifications. Similarly, we create ",(0,n.jsx)(t.code,{children:"self.bamboo-footer"}),", saving the ",(0,n.jsx)(t.code,{children:"footer: []"})," parameter from the ",(0,n.jsx)(t.code,{children:"register"})," function for displaying in the bottom-left corner."]}),"\n",(0,n.jsxs)(t.p,{children:["It's worth noting that our header is actually a content function in the form of ",(0,n.jsx)(t.code,{children:"let header(self) = { .. }"})," with the ",(0,n.jsx)(t.code,{children:"self"})," parameter, allowing us to get the latest information from ",(0,n.jsx)(t.code,{children:"self"}),". For example, ",(0,n.jsx)(t.code,{children:"self.bamboo-title"}),". The footer is similar."]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"components.cell"})," used inside is actually ",(0,n.jsx)(t.code,{children:"#let cell = block.with(width: 100%, height: 100%, above: 0pt, below: 0pt, breakable: false)"}),", and ",(0,n.jsx)(t.code,{children:"show: components.cell"})," is shorthand for ",(0,n.jsx)(t.code,{children:"components.cell(body)"}),". The ",(0,n.jsx)(t.code,{children:"show: pad.with(.4em)"})," in the footer is similar."]}),"\n",(0,n.jsxs)(t.p,{children:["Another point to note is the ",(0,n.jsx)(t.code,{children:"states"})," module, which contains many counters and state-related content. For example, ",(0,n.jsx)(t.code,{children:"states.current-section-title"})," is used to display the current ",(0,n.jsx)(t.code,{children:"section"}),", and ",(0,n.jsx)(t.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'})," is used to display the current page number and total number of pages."]}),"\n",(0,n.jsxs)(t.p,{children:["We observe the usage of ",(0,n.jsx)(t.code,{children:"utils.call-or-display(self, self.bamboo-footer)"})," to display ",(0,n.jsx)(t.code,{children:"self.bamboo-footer"}),". This is used to handle situations like ",(0,n.jsx)(t.code,{children:"self.bamboo-footer = (self) => {..}"}),", ensuring a unified approach to displaying content functions and content."]}),"\n",(0,n.jsxs)(t.p,{children:["To ensure proper display of the header and footer and sufficient spacing from the main content, we also set margins, such as ",(0,n.jsx)(t.code,{children:"self.page-args += (margin: (top: 4em, bottom: 1.5em, x: 2em))"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["We also need to customize a ",(0,n.jsx)(t.code,{children:"slide"})," method that accepts ",(0,n.jsx)(t.code,{children:"slide(self: none, title: auto, ..args)"}),". The first ",(0,n.jsx)(t.code,{children:"self: none"})," is a required method parameter for getting the latest ",(0,n.jsx)(t.code,{children:"self"}),". The second ",(0,n.jsx)(t.code,{children:"title"})," is used to update ",(0,n.jsx)(t.code,{children:"self.bamboo-title"})," for displaying in the header. The third ",(0,n.jsx)(t.code,{children:"..args"})," collects the remaining parameters and passes them to ",(0,n.jsx)(t.code,{children:"(self.methods.touying-slide)(self: self, ..args)"}),", which is necessary for the Touying ",(0,n.jsx)(t.code,{children:"slide"})," functionality to work properly. Additionally, we need to register this method in the ",(0,n.jsx)(t.code,{children:"register"})," function with ",(0,n.jsx)(t.code,{children:"self.methods.slide = slide"}),"."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'// bamboo.typ\n#import "@preview/touying:0.4.1": *\n\n#let slide(self: none, title: auto, ..args) = {\n if title != auto {\n self.bamboo-title = title\n }\n (self.methods.touying-slide)(self: self, ..args)\n}\n\n#let register(\n self: themes.default.register(),\n aspect-ratio: "16-9",\n footer: [],\n) = {\n // color theme\n self = (self.methods.colors)(\n self: self,\n primary: rgb("#5E8B65"),\n neutral-lightest: rgb("#ffffff"),\n neutral-darkest: rgb("#000000"),\n )\n // variables for later use\n self.bamboo-title = []\n self.bamboo-footer = footer\n // set page\n let header(self) = {\n set align(top)\n show: components.cell.with(fill: self.colors.primary, inset: 1em)\n set align(horizon)\n set text(fill: self.colors.neutral-lightest, size: .7em)\n states.current-section-title\n linebreak()\n set text(size: 1.5em)\n utils.call-or-display(self, self.bamboo-title)\n }\n let footer(self) = {\n set align(bottom)\n show: pad.with(.4em)\n set text(fill: self.colors.neutral-darkest, size: .8em)\n utils.call-or-display(self, self.bamboo-footer)\n h(1fr)\n states.slide-counter.display() + " / " + states.last-slide-number\n }\n self.page-args += (\n paper: "presentation-" + aspect-ratio,\n header: header,\n footer: footer,\n margin: (top: 4em, bottom: 1.5em, x: 2em),\n )\n // register methods\n self.methods.slide = slide\n self.methods.alert = (self: none, it) => text(fill: self.colors.primary, it)\n self.methods.init = (self: none, body) => {\n set text(size: 20pt)\n body\n }\n self\n}\n\n\n// main.typ\n#import "@preview/touying:0.4.1": *\n#import "bamboo.typ"\n\n#let s = bamboo.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= First Section\n\n== First Slide\n\n#slide[\n A slide with a title and an *important* information.\n]\n'})}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://github.com/touying-typ/touying/assets/34951714/d33bcda7-c032-4b11-b392-5b939d9a0a47",alt:"image"})}),"\n",(0,n.jsx)(t.h2,{id:"custom-special-slide",children:"Custom Special Slide"}),"\n",(0,n.jsxs)(t.p,{children:["Building upon the basic slide, we further add some special slide functions such as ",(0,n.jsx)(t.code,{children:"title-slide"}),", ",(0,n.jsx)(t.code,{children:"focus-slide"}),", and a custom ",(0,n.jsx)(t.code,{children:"slides"})," method."]}),"\n",(0,n.jsxs)(t.p,{children:["For the ",(0,n.jsx)(t.code,{children:"title-slide"})," method, first, we call ",(0,n.jsx)(t.code,{children:"self = utils.empty-page(self)"}),". This function clears ",(0,n.jsx)(t.code,{children:"self.page-args.header"}),", ",(0,n.jsx)(t.code,{children:"self.page-args.footer"}),", and sets ",(0,n.jsx)(t.code,{children:"margin"})," to ",(0,n.jsx)(t.code,{children:"0em"}),", creating a blank page effect. Then, we use ",(0,n.jsx)(t.code,{children:"let info = self.info + args.named()"})," to get information stored in ",(0,n.jsx)(t.code,{children:"self.info"})," and update it with the passed ",(0,n.jsx)(t.code,{children:"args.named()"})," for later use as ",(0,n.jsx)(t.code,{children:"info.title"}),". The specific page content ",(0,n.jsx)(t.code,{children:"body"})," will vary for each theme, so we won't go into details here. Finally, we call `(self.methods.touying-slide)(self: self, repeat: none, body"]}),"\n",(0,n.jsxs)(t.p,{children:[")",(0,n.jsx)(t.code,{children:", where "}),"repeat: none",(0,n.jsx)(t.code,{children:"indicates that this page does not require animation effects, and passing the"}),"body` parameter displays its content."]}),"\n",(0,n.jsxs)(t.p,{children:["For the ",(0,n.jsx)(t.code,{children:"new-section-slide"})," method, the process is similar. The only thing to note is that in ",(0,n.jsx)(t.code,{children:"(self.methods.touying-slide)(self: self, repeat: none, section: section, body)"}),", we pass an additional ",(0,n.jsx)(t.code,{children:"section: section"})," parameter to declare the creation of a new section. Another point to note is that besides ",(0,n.jsx)(t.code,{children:"self.methods.new-section-slide = new-section-slide"}),", we also register ",(0,n.jsx)(t.code,{children:"self.methods.touying-new-section-slide = new-section-slide"}),", so ",(0,n.jsx)(t.code,{children:"new-section-slide"})," will be automatically called when encountering a first-level title."]}),"\n",(0,n.jsxs)(t.p,{children:["For the ",(0,n.jsx)(t.code,{children:"focus-slide"})," method, most of the content is similar, but it's worth noting that we use ",(0,n.jsx)(t.code,{children:"self.page-args += (..)"})," to update the page's background color."]}),"\n",(0,n.jsxs)(t.p,{children:["Finally, we update the ",(0,n.jsx)(t.code,{children:"slides(self: none, title-slide: true, slide-level: 1, ..args)"})," method. When ",(0,n.jsx)(t.code,{children:"title-slide"})," is ",(0,n.jsx)(t.code,{children:"true"}),", using ",(0,n.jsx)(t.code,{children:"#show: slides"})," will automatically create a ",(0,n.jsx)(t.code,{children:"title-slide"}),". Setting ",(0,n.jsx)(t.code,{children:"slide-level: 1"})," indicates that the first-level and second-level titles correspond to ",(0,n.jsx)(t.code,{children:"section"})," and ",(0,n.jsx)(t.code,{children:"title"}),", respectively."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{children:'// bamboo.typ\n#import "@preview/touying:0.4.1": *\n\n#let slide(self: none, title: auto, ..args) = {\n if title != auto {\n self.bamboo-title = title\n }\n (self.methods.touying-slide)(self: self, ..args)\n}\n\n#let title-slide(self: none, ..args) = {\n self = utils.empty-page(self)\n let info = self.info + args.named()\n let body = {\n set align(center + horizon)\n block(\n fill: self.colors.primary,\n width: 80%,\n inset: (y: 1em),\n radius: 1em,\n text(size: 2em, fill: self.colors.neutral-lightest, weight: "bold", info.title)\n )\n set text(fill: self.colors.neutral-darkest)\n if info.author != none {\n block(info.author)\n }\n if info.date != none {\n block(if type(info.date) == datetime { info.date.display(self.datetime-format) } else { info.date })\n }\n }\n (self.methods.touying-slide)(self: self, repeat: none, body)\n}\n\n#let new-section-slide(self: none, section) = {\n self = utils.empty-page(self)\n let body = {\n set align(center + horizon)\n set text(size: 2em, fill: self.colors.primary, weight: "bold", style: "italic")\n section\n }\n (self.methods.touying-slide)(self: self, repeat: none, section: section, body)\n}\n\n#let focus-slide(self: none, body) = {\n self = utils.empty-page(self)\n self.page-args += (\n fill: self.colors.primary,\n margin: 2em,\n )\n set text(fill: self.colors.neutral-lightest, size: 2em)\n (self.methods.touying-slide)(self: self, repeat: none, align(horizon + center, body))\n}\n\n#let slides(self: none, title-slide: true, slide-level: 1, ..args) = {\n if title-slide {\n (self.methods.title-slide)(self: self)\n }\n (self.methods.touying-slides)(self: self, slide-level: slide-level, ..args)\n}\n\n#let register(\n self: themes.default.register(),\n aspect-ratio: "16-9",\n footer: [],\n) = {\n // color theme\n self = (self.methods.colors)(\n self: self,\n primary: rgb("#5E8B65"),\n neutral-lightest: rgb("#ffffff"),\n neutral-darkest: rgb("#000000"),\n )\n // variables for later use\n self.bamboo-title = []\n self.bamboo-footer = footer\n // set page\n let header(self) = {\n set align(top)\n show: components.cell.with(fill: self.colors.primary, inset: 1em)\n set align(horizon)\n set text(fill: self.colors.neutral-lightest, size: .7em)\n states.current-section-title\n linebreak()\n set text(size: 1.5em)\n utils.call-or-display(self, self.bamboo-title)\n }\n let footer(self) = {\n set align(bottom)\n show: pad.with(.4em)\n set text(fill: self.colors.neutral-darkest, size: .8em)\n utils.call-or-display(self, self.bamboo-footer)\n h(1fr)\n states.slide-counter.display() + " / " + states.last-slide-number\n }\n self.page-args += (\n paper: "presentation-" + aspect-ratio,\n header: header,\n footer: footer,\n margin: (top: 4em, bottom: 1.5em, x: 2em),\n )\n // register methods\n self.methods.slide = slide\n self.methods.title-slide = title-slide\n self.methods.new-section-slide = new-section-slide\n self.methods.touying-new-section-slide = new-section-slide\n self.methods.focus-slide = focus-slide\n self.methods.slides = slides\n self.methods.alert = (self: none, it) => text(fill: self.colors.primary, it)\n self.methods.init = (self: none, body) => {\n set text(size: 20pt)\n body\n }\n self\n}\n\n\n// main.typ\n#import "@preview/touying:0.4.1": *\n#import "bamboo.typ"\n\n#let s = bamboo.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= First Section\n\n== First Slide\n\n#slide[\n A slide with a title and an *important* information.\n]\n\n#focus-slide[\n Focus on it!\n]\n'})}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://github.com/touying-typ/touying/assets/34951714/03c5ad02-8ff4-4068-9664-d9cfad79baaf",alt:"image"})}),"\n",(0,n.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsx)(t.p,{children:"Congratulations! You've created a simple and elegant theme. Perhaps you may find that Touying introduces a wealth of concepts, making it initially challenging to grasp. This is normal, as Touying opts for functionality over simplicity. However, thanks to Touying's comprehensive and unified approach, you can easily extract commonalities between different themes and transfer your knowledge seamlessly. You can also save global variables, modify existing themes, or switch between themes effortlessly, showcasing the benefits of Touying's decoupling and object-oriented programming."})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>r,a:()=>l});var n=s(7294);const i={},o=n.createContext(i);function l(e){const t=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[997],{2261:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>r,toc:()=>a});var n=s(5893),i=s(1151);const o={sidebar_position:11},l="Creating Your Own Theme",r={id:"build-your-own-theme",title:"Creating Your Own Theme",description:"Creating your own theme with Touying might seem a bit complex initially due to the introduction of various concepts. However, fear not; if you successfully create a custom theme with Touying, you'll likely experience the convenience and powerful customization features it offers. You can refer to the source code of existing themes for guidance. The key steps to implement are:",source:"@site/docs/build-your-own-theme.md",sourceDirName:".",slug:"/build-your-own-theme",permalink:"/touying/docs/next/build-your-own-theme",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/build-your-own-theme.md",tags:[],version:"current",sidebarPosition:11,frontMatter:{sidebar_position:11},sidebar:"tutorialSidebar",previous:{title:"Aqua Theme",permalink:"/touying/docs/next/themes/aqua"},next:{title:"Progress",permalink:"/touying/docs/next/category/progress"}},d={},a=[{value:"Modifying Existing Themes",id:"modifying-existing-themes",level:2},{value:"Import",id:"import",level:2},{value:"Register Function and Init Method",id:"register-function-and-init-method",level:2},{value:"Color Theme",id:"color-theme",level:2},{value:"Practical: Custom Alert Method",id:"practical-custom-alert-method",level:2},{value:"Custom Header and Footer",id:"custom-header-and-footer",level:2},{value:"Custom Special Slide",id:"custom-special-slide",level:2},{value:"Conclusion",id:"conclusion",level:2}];function c(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"creating-your-own-theme",children:"Creating Your Own Theme"}),"\n",(0,n.jsxs)(t.p,{children:["Creating your own theme with Touying might seem a bit complex initially due to the introduction of various concepts. However, fear not; if you successfully create a custom theme with Touying, you'll likely experience the convenience and powerful customization features it offers. You can refer to the ",(0,n.jsx)(t.a,{href:"https://github.com/touying-typ/touying/tree/main/themes",children:"source code of existing themes"})," for guidance. The key steps to implement are:"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"register"})," function to initialize the global singleton ",(0,n.jsx)(t.code,{children:"s"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"init"})," method."]}),"\n",(0,n.jsxs)(t.li,{children:["Define a color theme by modifying the ",(0,n.jsx)(t.code,{children:"self.colors"})," member variable."]}),"\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"alert"})," method (optional)."]}),"\n",(0,n.jsx)(t.li,{children:"Customize the header."}),"\n",(0,n.jsx)(t.li,{children:"Customize the footer."}),"\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"slide"})," method."]}),"\n",(0,n.jsxs)(t.li,{children:["Customize special slide methods, such as ",(0,n.jsx)(t.code,{children:"title-slide"})," and ",(0,n.jsx)(t.code,{children:"focus-slide"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"slides"})," method (optional)."]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"To demonstrate creating a simple and elegant Bamboo theme, let's follow the steps."}),"\n",(0,n.jsx)(t.h2,{id:"modifying-existing-themes",children:"Modifying Existing Themes"}),"\n",(0,n.jsx)(t.p,{children:"If you wish to modify a theme within the Touying package locally instead of creating one from scratch, you can achieve this by following these steps:"}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["Copy the ",(0,n.jsx)(t.a,{href:"https://github.com/touying-typ/touying/tree/main/themes",children:"theme code"})," from the ",(0,n.jsx)(t.code,{children:"themes"})," directory to your local machine. For example, copy ",(0,n.jsx)(t.code,{children:"themes/university.typ"})," to a local file named ",(0,n.jsx)(t.code,{children:"university.typ"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:["Remove all ",(0,n.jsx)(t.code,{children:'#import "../xxx.typ"'})," commands at the top of the ",(0,n.jsx)(t.code,{children:"university.typ"})," file."]}),"\n",(0,n.jsxs)(t.li,{children:["Add ",(0,n.jsx)(t.code,{children:'#import "@preview/touying:0.4.2": *'})," at the top of the ",(0,n.jsx)(t.code,{children:"university.typ"})," file to import all modules."]}),"\n",(0,n.jsxs)(t.li,{children:["Replace ",(0,n.jsx)(t.code,{children:"self: s"})," in the ",(0,n.jsx)(t.code,{children:"register"})," function with ",(0,n.jsx)(t.code,{children:"self: themes.default.register()"})," ",(0,n.jsx)(t.strong,{children:"(Important)"}),"."]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"You can then import and use the theme by:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n#import "university.typ"\n\n#let s = university.register(aspect-ratio: "16-9")\n'})}),"\n",(0,n.jsxs)(t.p,{children:["For a specific example, refer to: ",(0,n.jsx)(t.a,{href:"https://typst.app/project/rqRuzg0keo_ZEB5AdxjweA",children:"https://typst.app/project/rqRuzg0keo_ZEB5AdxjweA"})]}),"\n",(0,n.jsx)(t.h2,{id:"import",children:"Import"}),"\n",(0,n.jsx)(t.p,{children:"Depending on whether the theme is for personal use or part of Touying, you can import in two ways:"}),"\n",(0,n.jsx)(t.p,{children:"If for personal use:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n'})}),"\n",(0,n.jsx)(t.p,{children:"If part of Touying themes:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#import "../utils/utils.typ"\n#import "../utils/states.typ"\n#import "../utils/components.typ"\n'})}),"\n",(0,n.jsxs)(t.p,{children:["Additionally, add the import statement in Touying's ",(0,n.jsx)(t.code,{children:"themes/themes.typ"}),":"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{children:'#import "bamboo.typ"\n'})}),"\n",(0,n.jsx)(t.h2,{id:"register-function-and-init-method",children:"Register Function and Init Method"}),"\n",(0,n.jsx)(t.p,{children:"Next, we'll distinguish between the bamboo.typ template file and the main.typ file, the latter of which is sometimes omitted."}),"\n",(0,n.jsx)(t.p,{children:"Generally, the first step in creating slides is to determine font size and page aspect ratio. Therefore, we need to register an initialization method:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'// bamboo.typ\n#import "@preview/touying:0.4.2": *\n\n#let register(\n self: themes.default.register(),\n aspect-ratio: "16-9",\n) = {\n self.page-args += (\n paper: "presentation-" + aspect-ratio,\n )\n self.methods.init = (self: none, body) => {\n set text(size: 20pt)\n body\n }\n self\n}\n\n// main.typ\n#import "@preview/touying:0.4.2": *\n#import "bamboo.typ"\n\n#let s = bamboo.register(aspect-ratio: "16-9")\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= First Section\n\n== First Slide\n\n#slide[\n A slide with a title and an *important* information.\n]\n'})}),"\n",(0,n.jsxs)(t.p,{children:["As you can see, we created a ",(0,n.jsx)(t.code,{children:"register"})," function and passed an ",(0,n.jsx)(t.code,{children:"aspect-ratio"})," parameter to set the page aspect ratio. We get default ",(0,n.jsx)(t.code,{children:"self"})," by ",(0,n.jsx)(t.code,{children:"self: themes.default.register()"}),". As you might already know, in Touying, we should not use ",(0,n.jsx)(t.code,{children:"set page(..)"})," to set page parameters but rather use the syntax ",(0,n.jsx)(t.code,{children:"self.page-args += (..)"})," to set them, as explained in the Page Layout section."]}),"\n",(0,n.jsxs)(t.p,{children:["In addition, we registered a ",(0,n.jsx)(t.code,{children:"self.methods.init"})," method, which can be used for some global style settings. For example, in this case, we added ",(0,n.jsx)(t.code,{children:"set text(size: 20pt)"})," to set the font size. You can also place additional global style settings here, such as ",(0,n.jsx)(t.code,{children:"set par(justify: true)"}),". Since the ",(0,n.jsx)(t.code,{children:"init"})," function is placed inside ",(0,n.jsx)(t.code,{children:"self.methods"}),", it is a method, not a regular function. Therefore, we need to add the parameter ",(0,n.jsx)(t.code,{children:"self: none"})," to use it properly."]}),"\n",(0,n.jsxs)(t.p,{children:["As you can see, later in ",(0,n.jsx)(t.code,{children:"main.typ"}),", we apply the global style settings in ",(0,n.jsx)(t.code,{children:"init"})," using ",(0,n.jsx)(t.code,{children:"#show: init"}),", where ",(0,n.jsx)(t.code,{children:"init"})," is bound and unpacked through ",(0,n.jsx)(t.code,{children:"utils.methods(s)"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["If you pay extra attention, you'll notice that the ",(0,n.jsx)(t.code,{children:"register"})," function has an independent ",(0,n.jsx)(t.code,{children:"self"})," at the end. This actually represents returning the modified ",(0,n.jsx)(t.code,{children:"self"})," as the return value, which will be saved in ",(0,n.jsx)(t.code,{children:"#let s = .."}),". This line is therefore indispensable."]}),"\n",(0,n.jsx)(t.h2,{id:"color-theme",children:"Color Theme"}),"\n",(0,n.jsxs)(t.p,{children:["Choosing an attractive color theme for your slides is crucial. Touying provides built-in color theme support to minimize API differences between different themes. Touying offers two dimensions of color selection: the first is ",(0,n.jsx)(t.code,{children:"neutral"}),", ",(0,n.jsx)(t.code,{children:"primary"}),", ",(0,n.jsx)(t.code,{children:"secondary"}),", and ",(0,n.jsx)(t.code,{children:"tertiary"})," for hue distinction, with ",(0,n.jsx)(t.code,{children:"primary"})," being the most commonly used; the second is ",(0,n.jsx)(t.code,{children:"default"}),", ",(0,n.jsx)(t.code,{children:"light"}),", ",(0,n.jsx)(t.code,{children:"lighter"}),", ",(0,n.jsx)(t.code,{children:"lightest"}),", ",(0,n.jsx)(t.code,{children:"dark"}),", ",(0,n.jsx)(t.code,{children:"darker"}),", and ",(0,n.jsx)(t.code,{children:"darkest"})," for brightness distinction."]}),"\n",(0,n.jsxs)(t.p,{children:["As we are creating the Bamboo theme, we chose a color for the ",(0,n.jsx)(t.code,{children:"primary"})," theme, similar to bamboo (",(0,n.jsx)(t.code,{children:'rgb("#5E8B65")'}),"), and included neutral lightest/darkest as background and font colors."]}),"\n",(0,n.jsxs)(t.p,{children:["As shown in the code below, we use ",(0,n.jsx)(t.code,{children:"(self.methods.colors)(self: self, ..)"})," to modify the color theme. Essentially, it is a wrapper for ",(0,n.jsx)(t.code,{children:"self.colors += (..)"}),"."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#let register(\n self: themes.default.register(),\n aspect-ratio: "16-9",\n) = {\n // color theme\n self = (self.methods.colors)(\n self: self,\n primary: rgb("#5E8B65"),\n neutral-lightest: rgb("#ffffff"),\n neutral-darkest: rgb("#000000"),\n )\n self.page-args += (\n paper: "presentation-" + aspect-ratio,\n )\n self.methods.init = (self: none, body) => {\n set text(size: 20pt)\n body\n }\n self\n}\n'})}),"\n",(0,n.jsxs)(t.p,{children:["After adding the color theme, we can access the color using syntax like ",(0,n.jsx)(t.code,{children:"self.colors.primary"}),"."]}),"\n",(0,n.jsx)(t.p,{children:"It's worth noting that users can change the theme color at any time using:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#let s = (s.methods.colors)(self: s, primary: rgb("#3578B9"))\n'})}),"\n",(0,n.jsx)(t.p,{children:"This flexibility demonstrates Touying's powerful customization capabilities."}),"\n",(0,n.jsx)(t.h2,{id:"practical-custom-alert-method",children:"Practical: Custom Alert Method"}),"\n",(0,n.jsxs)(t.p,{children:["In general, we need to provide a ",(0,n.jsx)(t.code,{children:"#alert[..]"})," function for users, similar to ",(0,n.jsx)(t.code,{children:"#strong[..]"}),". Typically, ",(0,n.jsx)(t.code,{children:"#alert[..]"})," emphasizes text using the primary theme color for aesthetics. We add a line in the ",(0,n.jsx)(t.code,{children:"register"})," function:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:"self.methods.alert = (self: none, it) => text(fill: self.colors.primary, it)\n"})}),"\n",(0,n.jsxs)(t.p,{children:["This code sets the text color to ",(0,n.jsx)(t.code,{children:"self.colors.primary"}),", utilizing the theme's primary color."]}),"\n",(0,n.jsx)(t.h2,{id:"custom-header-and-footer",children:"Custom Header and Footer"}),"\n",(0,n.jsx)(t.p,{children:"Here, assuming you've already read the Page Layout section, we know we should add headers and footers to the slides."}),"\n",(0,n.jsxs)(t.p,{children:["Firstly, we add ",(0,n.jsx)(t.code,{children:"self.bamboo-title = []"}),". This means we save the title of the current slide as a member variable ",(0,n.jsx)(t.code,{children:"self.bamboo-title"}),", stored in ",(0,n.jsx)(t.code,{children:"self"}),". This makes it easy to use in the header and later modifications. Similarly, we create ",(0,n.jsx)(t.code,{children:"self.bamboo-footer"}),", saving the ",(0,n.jsx)(t.code,{children:"footer: []"})," parameter from the ",(0,n.jsx)(t.code,{children:"register"})," function for displaying in the bottom-left corner."]}),"\n",(0,n.jsxs)(t.p,{children:["It's worth noting that our header is actually a content function in the form of ",(0,n.jsx)(t.code,{children:"let header(self) = { .. }"})," with the ",(0,n.jsx)(t.code,{children:"self"})," parameter, allowing us to get the latest information from ",(0,n.jsx)(t.code,{children:"self"}),". For example, ",(0,n.jsx)(t.code,{children:"self.bamboo-title"}),". The footer is similar."]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"components.cell"})," used inside is actually ",(0,n.jsx)(t.code,{children:"#let cell = block.with(width: 100%, height: 100%, above: 0pt, below: 0pt, breakable: false)"}),", and ",(0,n.jsx)(t.code,{children:"show: components.cell"})," is shorthand for ",(0,n.jsx)(t.code,{children:"components.cell(body)"}),". The ",(0,n.jsx)(t.code,{children:"show: pad.with(.4em)"})," in the footer is similar."]}),"\n",(0,n.jsxs)(t.p,{children:["Another point to note is the ",(0,n.jsx)(t.code,{children:"states"})," module, which contains many counters and state-related content. For example, ",(0,n.jsx)(t.code,{children:"states.current-section-title"})," is used to display the current ",(0,n.jsx)(t.code,{children:"section"}),", and ",(0,n.jsx)(t.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'})," is used to display the current page number and total number of pages."]}),"\n",(0,n.jsxs)(t.p,{children:["We observe the usage of ",(0,n.jsx)(t.code,{children:"utils.call-or-display(self, self.bamboo-footer)"})," to display ",(0,n.jsx)(t.code,{children:"self.bamboo-footer"}),". This is used to handle situations like ",(0,n.jsx)(t.code,{children:"self.bamboo-footer = (self) => {..}"}),", ensuring a unified approach to displaying content functions and content."]}),"\n",(0,n.jsxs)(t.p,{children:["To ensure proper display of the header and footer and sufficient spacing from the main content, we also set margins, such as ",(0,n.jsx)(t.code,{children:"self.page-args += (margin: (top: 4em, bottom: 1.5em, x: 2em))"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["We also need to customize a ",(0,n.jsx)(t.code,{children:"slide"})," method that accepts ",(0,n.jsx)(t.code,{children:"slide(self: none, title: auto, ..args)"}),". The first ",(0,n.jsx)(t.code,{children:"self: none"})," is a required method parameter for getting the latest ",(0,n.jsx)(t.code,{children:"self"}),". The second ",(0,n.jsx)(t.code,{children:"title"})," is used to update ",(0,n.jsx)(t.code,{children:"self.bamboo-title"})," for displaying in the header. The third ",(0,n.jsx)(t.code,{children:"..args"})," collects the remaining parameters and passes them to ",(0,n.jsx)(t.code,{children:"(self.methods.touying-slide)(self: self, ..args)"}),", which is necessary for the Touying ",(0,n.jsx)(t.code,{children:"slide"})," functionality to work properly. Additionally, we need to register this method in the ",(0,n.jsx)(t.code,{children:"register"})," function with ",(0,n.jsx)(t.code,{children:"self.methods.slide = slide"}),"."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'// bamboo.typ\n#import "@preview/touying:0.4.2": *\n\n#let slide(self: none, title: auto, ..args) = {\n if title != auto {\n self.bamboo-title = title\n }\n (self.methods.touying-slide)(self: self, ..args)\n}\n\n#let register(\n self: themes.default.register(),\n aspect-ratio: "16-9",\n footer: [],\n) = {\n // color theme\n self = (self.methods.colors)(\n self: self,\n primary: rgb("#5E8B65"),\n neutral-lightest: rgb("#ffffff"),\n neutral-darkest: rgb("#000000"),\n )\n // variables for later use\n self.bamboo-title = []\n self.bamboo-footer = footer\n // set page\n let header(self) = {\n set align(top)\n show: components.cell.with(fill: self.colors.primary, inset: 1em)\n set align(horizon)\n set text(fill: self.colors.neutral-lightest, size: .7em)\n states.current-section-title\n linebreak()\n set text(size: 1.5em)\n utils.call-or-display(self, self.bamboo-title)\n }\n let footer(self) = {\n set align(bottom)\n show: pad.with(.4em)\n set text(fill: self.colors.neutral-darkest, size: .8em)\n utils.call-or-display(self, self.bamboo-footer)\n h(1fr)\n states.slide-counter.display() + " / " + states.last-slide-number\n }\n self.page-args += (\n paper: "presentation-" + aspect-ratio,\n header: header,\n footer: footer,\n margin: (top: 4em, bottom: 1.5em, x: 2em),\n )\n // register methods\n self.methods.slide = slide\n self.methods.alert = (self: none, it) => text(fill: self.colors.primary, it)\n self.methods.init = (self: none, body) => {\n set text(size: 20pt)\n body\n }\n self\n}\n\n\n// main.typ\n#import "@preview/touying:0.4.2": *\n#import "bamboo.typ"\n\n#let s = bamboo.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= First Section\n\n== First Slide\n\n#slide[\n A slide with a title and an *important* information.\n]\n'})}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://github.com/touying-typ/touying/assets/34951714/d33bcda7-c032-4b11-b392-5b939d9a0a47",alt:"image"})}),"\n",(0,n.jsx)(t.h2,{id:"custom-special-slide",children:"Custom Special Slide"}),"\n",(0,n.jsxs)(t.p,{children:["Building upon the basic slide, we further add some special slide functions such as ",(0,n.jsx)(t.code,{children:"title-slide"}),", ",(0,n.jsx)(t.code,{children:"focus-slide"}),", and a custom ",(0,n.jsx)(t.code,{children:"slides"})," method."]}),"\n",(0,n.jsxs)(t.p,{children:["For the ",(0,n.jsx)(t.code,{children:"title-slide"})," method, first, we call ",(0,n.jsx)(t.code,{children:"self = utils.empty-page(self)"}),". This function clears ",(0,n.jsx)(t.code,{children:"self.page-args.header"}),", ",(0,n.jsx)(t.code,{children:"self.page-args.footer"}),", and sets ",(0,n.jsx)(t.code,{children:"margin"})," to ",(0,n.jsx)(t.code,{children:"0em"}),", creating a blank page effect. Then, we use ",(0,n.jsx)(t.code,{children:"let info = self.info + args.named()"})," to get information stored in ",(0,n.jsx)(t.code,{children:"self.info"})," and update it with the passed ",(0,n.jsx)(t.code,{children:"args.named()"})," for later use as ",(0,n.jsx)(t.code,{children:"info.title"}),". The specific page content ",(0,n.jsx)(t.code,{children:"body"})," will vary for each theme, so we won't go into details here. Finally, we call `(self.methods.touying-slide)(self: self, repeat: none, body"]}),"\n",(0,n.jsxs)(t.p,{children:[")",(0,n.jsx)(t.code,{children:", where "}),"repeat: none",(0,n.jsx)(t.code,{children:"indicates that this page does not require animation effects, and passing the"}),"body` parameter displays its content."]}),"\n",(0,n.jsxs)(t.p,{children:["For the ",(0,n.jsx)(t.code,{children:"new-section-slide"})," method, the process is similar. The only thing to note is that in ",(0,n.jsx)(t.code,{children:"(self.methods.touying-slide)(self: self, repeat: none, section: section, body)"}),", we pass an additional ",(0,n.jsx)(t.code,{children:"section: section"})," parameter to declare the creation of a new section. Another point to note is that besides ",(0,n.jsx)(t.code,{children:"self.methods.new-section-slide = new-section-slide"}),", we also register ",(0,n.jsx)(t.code,{children:"self.methods.touying-new-section-slide = new-section-slide"}),", so ",(0,n.jsx)(t.code,{children:"new-section-slide"})," will be automatically called when encountering a first-level title."]}),"\n",(0,n.jsxs)(t.p,{children:["For the ",(0,n.jsx)(t.code,{children:"focus-slide"})," method, most of the content is similar, but it's worth noting that we use ",(0,n.jsx)(t.code,{children:"self.page-args += (..)"})," to update the page's background color."]}),"\n",(0,n.jsxs)(t.p,{children:["Finally, we update the ",(0,n.jsx)(t.code,{children:"slides(self: none, title-slide: true, slide-level: 1, ..args)"})," method. When ",(0,n.jsx)(t.code,{children:"title-slide"})," is ",(0,n.jsx)(t.code,{children:"true"}),", using ",(0,n.jsx)(t.code,{children:"#show: slides"})," will automatically create a ",(0,n.jsx)(t.code,{children:"title-slide"}),". Setting ",(0,n.jsx)(t.code,{children:"slide-level: 1"})," indicates that the first-level and second-level titles correspond to ",(0,n.jsx)(t.code,{children:"section"})," and ",(0,n.jsx)(t.code,{children:"title"}),", respectively."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{children:'// bamboo.typ\n#import "@preview/touying:0.4.2": *\n\n#let slide(self: none, title: auto, ..args) = {\n if title != auto {\n self.bamboo-title = title\n }\n (self.methods.touying-slide)(self: self, ..args)\n}\n\n#let title-slide(self: none, ..args) = {\n self = utils.empty-page(self)\n let info = self.info + args.named()\n let body = {\n set align(center + horizon)\n block(\n fill: self.colors.primary,\n width: 80%,\n inset: (y: 1em),\n radius: 1em,\n text(size: 2em, fill: self.colors.neutral-lightest, weight: "bold", info.title)\n )\n set text(fill: self.colors.neutral-darkest)\n if info.author != none {\n block(info.author)\n }\n if info.date != none {\n block(if type(info.date) == datetime { info.date.display(self.datetime-format) } else { info.date })\n }\n }\n (self.methods.touying-slide)(self: self, repeat: none, body)\n}\n\n#let new-section-slide(self: none, section) = {\n self = utils.empty-page(self)\n let body = {\n set align(center + horizon)\n set text(size: 2em, fill: self.colors.primary, weight: "bold", style: "italic")\n section\n }\n (self.methods.touying-slide)(self: self, repeat: none, section: section, body)\n}\n\n#let focus-slide(self: none, body) = {\n self = utils.empty-page(self)\n self.page-args += (\n fill: self.colors.primary,\n margin: 2em,\n )\n set text(fill: self.colors.neutral-lightest, size: 2em)\n (self.methods.touying-slide)(self: self, repeat: none, align(horizon + center, body))\n}\n\n#let slides(self: none, title-slide: true, slide-level: 1, ..args) = {\n if title-slide {\n (self.methods.title-slide)(self: self)\n }\n (self.methods.touying-slides)(self: self, slide-level: slide-level, ..args)\n}\n\n#let register(\n self: themes.default.register(),\n aspect-ratio: "16-9",\n footer: [],\n) = {\n // color theme\n self = (self.methods.colors)(\n self: self,\n primary: rgb("#5E8B65"),\n neutral-lightest: rgb("#ffffff"),\n neutral-darkest: rgb("#000000"),\n )\n // variables for later use\n self.bamboo-title = []\n self.bamboo-footer = footer\n // set page\n let header(self) = {\n set align(top)\n show: components.cell.with(fill: self.colors.primary, inset: 1em)\n set align(horizon)\n set text(fill: self.colors.neutral-lightest, size: .7em)\n states.current-section-title\n linebreak()\n set text(size: 1.5em)\n utils.call-or-display(self, self.bamboo-title)\n }\n let footer(self) = {\n set align(bottom)\n show: pad.with(.4em)\n set text(fill: self.colors.neutral-darkest, size: .8em)\n utils.call-or-display(self, self.bamboo-footer)\n h(1fr)\n states.slide-counter.display() + " / " + states.last-slide-number\n }\n self.page-args += (\n paper: "presentation-" + aspect-ratio,\n header: header,\n footer: footer,\n margin: (top: 4em, bottom: 1.5em, x: 2em),\n )\n // register methods\n self.methods.slide = slide\n self.methods.title-slide = title-slide\n self.methods.new-section-slide = new-section-slide\n self.methods.touying-new-section-slide = new-section-slide\n self.methods.focus-slide = focus-slide\n self.methods.slides = slides\n self.methods.alert = (self: none, it) => text(fill: self.colors.primary, it)\n self.methods.init = (self: none, body) => {\n set text(size: 20pt)\n body\n }\n self\n}\n\n\n// main.typ\n#import "@preview/touying:0.4.2": *\n#import "bamboo.typ"\n\n#let s = bamboo.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= First Section\n\n== First Slide\n\n#slide[\n A slide with a title and an *important* information.\n]\n\n#focus-slide[\n Focus on it!\n]\n'})}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://github.com/touying-typ/touying/assets/34951714/03c5ad02-8ff4-4068-9664-d9cfad79baaf",alt:"image"})}),"\n",(0,n.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsx)(t.p,{children:"Congratulations! You've created a simple and elegant theme. Perhaps you may find that Touying introduces a wealth of concepts, making it initially challenging to grasp. This is normal, as Touying opts for functionality over simplicity. However, thanks to Touying's comprehensive and unified approach, you can easily extract commonalities between different themes and transfer your knowledge seamlessly. You can also save global variables, modify existing themes, or switch between themes effortlessly, showcasing the benefits of Touying's decoupling and object-oriented programming."})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>r,a:()=>l});var n=s(7294);const i={},o=n.createContext(i);function l(e){const t=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/acb203b2.542ba921.js b/assets/js/5848d47c.60392616.js similarity index 96% rename from assets/js/acb203b2.542ba921.js rename to assets/js/5848d47c.60392616.js index f9291c3f2..02e1ad2f9 100644 --- a/assets/js/acb203b2.542ba921.js +++ b/assets/js/5848d47c.60392616.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1956],{4955:(e,t,i)=>{i.r(t),i.d(t,{assets:()=>r,contentTitle:()=>d,default:()=>a,frontMatter:()=>o,metadata:()=>h,toc:()=>c});var n=i(5893),s=i(1151);const o={sidebar_position:2},d="Fit to Height / Width",h={id:"utilities/fit-to",title:"Fit to Height / Width",description:"Thanks to ntjess for the code.",source:"@site/versioned_docs/version-0.4.1/utilities/fit-to.md",sourceDirName:"utilities",slug:"/utilities/fit-to",permalink:"/touying/docs/utilities/fit-to",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/utilities/fit-to.md",tags:[],version:"0.4.1",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Object-Oriented Programming",permalink:"/touying/docs/utilities/oop"},next:{title:"Changelog",permalink:"/touying/docs/changelog"}},r={},c=[{value:"Fit to Height",id:"fit-to-height",level:2},{value:"Fit to Width",id:"fit-to-width",level:2}];function l(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"fit-to-height--width",children:"Fit to Height / Width"}),"\n",(0,n.jsxs)(t.p,{children:["Thanks to ",(0,n.jsx)(t.a,{href:"https://github.com/ntjess",children:"ntjess"})," for the code."]}),"\n",(0,n.jsx)(t.h2,{id:"fit-to-height",children:"Fit to Height"}),"\n",(0,n.jsxs)(t.p,{children:["If you need to make an image fill the remaining slide height, you can try the ",(0,n.jsx)(t.code,{children:"fit-to-height"})," function:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:"#utils.fit-to-height(1fr)[BIG]\n"})}),"\n",(0,n.jsx)(t.p,{children:"Function definition:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:"#let fit-to-height(\n width: none, prescale-width: none, grow: true, shrink: true, height, body\n) = { .. }\n"})}),"\n",(0,n.jsx)(t.p,{children:"Parameters:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"width"}),": If specified, this will determine the width of the content after scaling. So, if you want the scaled content to fill half of the slide width, you can use ",(0,n.jsx)(t.code,{children:"width: 50%"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"prescale-width"}),": This parameter allows you to make Typst's layout assume that the given content is to be laid out in a container of a certain width before scaling. For example, you can use ",(0,n.jsx)(t.code,{children:"prescale-width: 200%"})," assuming the slide's width is twice the original."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"grow"}),": Whether it can grow, default is ",(0,n.jsx)(t.code,{children:"true"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"shrink"}),": Whether it can shrink, default is ",(0,n.jsx)(t.code,{children:"true"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"height"}),": The specified height."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"body"}),": The specific content."]}),"\n"]}),"\n",(0,n.jsx)(t.h2,{id:"fit-to-width",children:"Fit to Width"}),"\n",(0,n.jsxs)(t.p,{children:["If you need to limit the title width to exactly fill the slide width, you can try the ",(0,n.jsx)(t.code,{children:"fit-to-width"})," function:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:"#utils.fit-to-width(1fr)[#lorem(20)]\n"})}),"\n",(0,n.jsx)(t.p,{children:"Function definition:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:"#let fit-to-width(grow: true, shrink: true, width, body) = { .. }\n"})}),"\n",(0,n.jsx)(t.p,{children:"Parameters:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"grow"}),": Whether it can grow, default is ",(0,n.jsx)(t.code,{children:"true"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"shrink"}),": Whether it can shrink, default is ",(0,n.jsx)(t.code,{children:"true"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"width"}),": The specified width."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"body"}),": The specific content."]}),"\n"]})]})}function a(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}},1151:(e,t,i)=>{i.d(t,{Z:()=>h,a:()=>d});var n=i(7294);const s={},o=n.createContext(s);function d(e){const t=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function h(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:d(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3845],{9456:(e,t,i)=>{i.r(t),i.d(t,{assets:()=>r,contentTitle:()=>d,default:()=>a,frontMatter:()=>o,metadata:()=>h,toc:()=>c});var n=i(5893),s=i(1151);const o={sidebar_position:2},d="Fit to Height / Width",h={id:"utilities/fit-to",title:"Fit to Height / Width",description:"Thanks to ntjess for the code.",source:"@site/versioned_docs/version-0.4.2/utilities/fit-to.md",sourceDirName:"utilities",slug:"/utilities/fit-to",permalink:"/touying/docs/utilities/fit-to",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/utilities/fit-to.md",tags:[],version:"0.4.2",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Object-Oriented Programming",permalink:"/touying/docs/utilities/oop"},next:{title:"Changelog",permalink:"/touying/docs/changelog"}},r={},c=[{value:"Fit to Height",id:"fit-to-height",level:2},{value:"Fit to Width",id:"fit-to-width",level:2}];function l(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"fit-to-height--width",children:"Fit to Height / Width"}),"\n",(0,n.jsxs)(t.p,{children:["Thanks to ",(0,n.jsx)(t.a,{href:"https://github.com/ntjess",children:"ntjess"})," for the code."]}),"\n",(0,n.jsx)(t.h2,{id:"fit-to-height",children:"Fit to Height"}),"\n",(0,n.jsxs)(t.p,{children:["If you need to make an image fill the remaining slide height, you can try the ",(0,n.jsx)(t.code,{children:"fit-to-height"})," function:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:"#utils.fit-to-height(1fr)[BIG]\n"})}),"\n",(0,n.jsx)(t.p,{children:"Function definition:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:"#let fit-to-height(\n width: none, prescale-width: none, grow: true, shrink: true, height, body\n) = { .. }\n"})}),"\n",(0,n.jsx)(t.p,{children:"Parameters:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"width"}),": If specified, this will determine the width of the content after scaling. So, if you want the scaled content to fill half of the slide width, you can use ",(0,n.jsx)(t.code,{children:"width: 50%"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"prescale-width"}),": This parameter allows you to make Typst's layout assume that the given content is to be laid out in a container of a certain width before scaling. For example, you can use ",(0,n.jsx)(t.code,{children:"prescale-width: 200%"})," assuming the slide's width is twice the original."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"grow"}),": Whether it can grow, default is ",(0,n.jsx)(t.code,{children:"true"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"shrink"}),": Whether it can shrink, default is ",(0,n.jsx)(t.code,{children:"true"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"height"}),": The specified height."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"body"}),": The specific content."]}),"\n"]}),"\n",(0,n.jsx)(t.h2,{id:"fit-to-width",children:"Fit to Width"}),"\n",(0,n.jsxs)(t.p,{children:["If you need to limit the title width to exactly fill the slide width, you can try the ",(0,n.jsx)(t.code,{children:"fit-to-width"})," function:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:"#utils.fit-to-width(1fr)[#lorem(20)]\n"})}),"\n",(0,n.jsx)(t.p,{children:"Function definition:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:"#let fit-to-width(grow: true, shrink: true, width, body) = { .. }\n"})}),"\n",(0,n.jsx)(t.p,{children:"Parameters:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"grow"}),": Whether it can grow, default is ",(0,n.jsx)(t.code,{children:"true"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"shrink"}),": Whether it can shrink, default is ",(0,n.jsx)(t.code,{children:"true"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"width"}),": The specified width."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"body"}),": The specific content."]}),"\n"]})]})}function a(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}},1151:(e,t,i)=>{i.d(t,{Z:()=>h,a:()=>d});var n=i(7294);const s={},o=n.createContext(s);function d(e){const t=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function h(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:d(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5a3af86b.85499e63.js b/assets/js/5a3af86b.85499e63.js new file mode 100644 index 000000000..e49202dd1 --- /dev/null +++ b/assets/js/5a3af86b.85499e63.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7991],{7906:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>d,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>r,toc:()=>c});var t=i(5893),s=i(1151);const l={sidebar_position:4},o="University Theme",r={id:"themes/university",title:"University Theme",description:"image",source:"@site/versioned_docs/version-0.4.1/themes/university.md",sourceDirName:"themes",slug:"/themes/university",permalink:"/touying/docs/0.4.1/themes/university",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/themes/university.md",tags:[],version:"0.4.1",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Dewdrop Theme",permalink:"/touying/docs/0.4.1/themes/dewdrop"},next:{title:"Aqua Theme",permalink:"/touying/docs/0.4.1/themes/aqua"}},d={},c=[{value:"Initialization",id:"initialization",level:2},{value:"Color Theme",id:"color-theme",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"Title Slide",id:"title-slide",level:3},{value:"Regular Slide",id:"regular-slide",level:3},{value:"Focus Slide",id:"focus-slide",level:3},{value:"Matrix Slide",id:"matrix-slide",level:3},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"university-theme",children:"University Theme"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/4095163c-0c16-4760-b370-8adc1cdd7e6c",alt:"image"})}),"\n",(0,t.jsxs)(n.p,{children:["This aesthetically pleasing theme is courtesy of ",(0,t.jsx)(n.a,{href:"https://github.com/drupol",children:"Pol Dellaiera"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,t.jsx)(n.p,{children:"You can initialize the University theme using the following code:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, focus-slide, matrix-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"register"})," function accepts the following parameters:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"aspect-ratio"}),': Sets the aspect ratio of the slides to "16-9" or "4-3," with the default being "16-9."']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"progress-bar"}),": Controls whether the progress bar at the top of each slide is displayed, with the default being ",(0,t.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"display-current-section"}),": Whether to display the current section."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"footer-columns"}),": The width of the footer in the bottom three columns, the default is ",(0,t.jsx)(n.code,{children:"(25%, 1fr, 25%)"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"footer-a"}),": The first column, default is ",(0,t.jsx)(n.code,{children:"self => self.info.author"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"footer-b"}),": Second column, default is ",(0,t.jsx)(n.code,{children:"self => if self.info.short-title == auto { self.info.title } else { self.info.short-title }"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"footer-c"}),": third column, default is"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'self => {\n h(1fr)\n utils.info-date(self)\n h(1fr)\n states.slide-counter.display() + " / " + states.last-slide-number\n h(1fr)\n}\n'})}),"\n",(0,t.jsxs)(n.p,{children:["Additionally, the University theme provides an ",(0,t.jsx)(n.code,{children:"#alert[..]"})," function, which you can use with the ",(0,t.jsx)(n.code,{children:"#show strong: alert"})," syntax for emphasizing text with ",(0,t.jsx)(n.code,{children:"*alert text*"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"color-theme",children:"Color Theme"}),"\n",(0,t.jsx)(n.p,{children:"The University theme defaults to the following color theme:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.colors)(\n self: s,\n primary: rgb("#04364A"),\n secondary: rgb("#176B87"),\n tertiary: rgb("#448C95"),\n)\n'})}),"\n",(0,t.jsxs)(n.p,{children:["You can modify this color theme using ",(0,t.jsx)(n.code,{children:"#let s = (s.methods.colors)(self: s, ..)"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,t.jsx)(n.p,{children:"The University theme provides a series of custom slide functions:"}),"\n",(0,t.jsx)(n.h3,{id:"title-slide",children:"Title Slide"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#title-slide(logo: none, authors: none, ..args)\n"})}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"title-slide"})," function reads information from ",(0,t.jsx)(n.code,{children:"self.info"})," for display. You can also pass the ",(0,t.jsx)(n.code,{children:"logo"})," parameter and an array-type ",(0,t.jsx)(n.code,{children:"authors"})," parameter."]}),"\n",(0,t.jsx)(n.h3,{id:"regular-slide",children:"Regular Slide"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // university theme\n title: none,\n subtitle: none,\n header: none,\n footer: auto,\n)[\n ...\n]\n"})}),"\n",(0,t.jsxs)(n.p,{children:["The default slide function with a title and footer. The ",(0,t.jsx)(n.code,{children:"title"})," defaults to the current section title, and the footer is set as per your configuration."]}),"\n",(0,t.jsx)(n.h3,{id:"focus-slide",children:"Focus Slide"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#focus-slide(background-img: ..., background-color: ...)[\n ...\n]\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Used to capture the audience's attention. The default background color is ",(0,t.jsx)(n.code,{children:"self.colors.primary"}),"."]}),"\n",(0,t.jsx)(n.h3,{id:"matrix-slide",children:"Matrix Slide"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#matrix-slide(columns: ..., rows: ...)[\n ...\n][\n ...\n]\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Refer to the ",(0,t.jsx)(n.a,{href:"https://polylux.dev/book/themes/gallery/university.html",children:"documentation"}),"."]}),"\n",(0,t.jsxs)(n.h2,{id:"slides-function",children:[(0,t.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"slides"})," function has parameters:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"title-slide"}),": Defaults to ",(0,t.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"slide-level"}),": Defaults to ",(0,t.jsx)(n.code,{children:"1"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["You can set these parameters using ",(0,t.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["And the function of automatically adding ",(0,t.jsx)(n.code,{children:"new-section-slide"})," can be turned off by ",(0,t.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, focus-slide, matrix-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/58971045-0b0d-46cb-acc2-caf766c2432d",alt:"image"})}),"\n",(0,t.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, focus-slide, matrix-slide) = utils.slides(s)\n#show: slides.with(title-slide: false)\n\n#title-slide(authors: ([Author A], [Author B]))\n\n= The Section\n\n== Slide Title\n\n#slide[\n #lorem(40)\n]\n\n#slide(subtitle: emph[What is the problem?])[\n #lorem(40)\n]\n\n#focus-slide[\n Another variant with primary color in background...\n]\n\n#matrix-slide[\n left\n][\n middle\n][\n right\n]\n\n#matrix-slide(columns: 1)[\n top\n][\n bottom\n]\n\n#matrix-slide(columns: (1fr, 2fr, 1fr), ..(lorem(8),) * 9)\n'})})]})}function h(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>r,a:()=>o});var t=i(7294);const s={},l=t.createContext(s);function o(e){const n=t.useContext(l);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),t.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5a57e638.e978d988.js b/assets/js/5a57e638.4fc8b231.js similarity index 97% rename from assets/js/5a57e638.e978d988.js rename to assets/js/5a57e638.4fc8b231.js index 82691db4d..a8a71bb7c 100644 --- a/assets/js/5a57e638.e978d988.js +++ b/assets/js/5a57e638.4fc8b231.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2143],{8811:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>c});var i=s(5893),t=s(1151);const l={sidebar_position:1},o="Simple Theme",d={id:"themes/simple",title:"Simple Theme",description:"image",source:"@site/docs/themes/simple.md",sourceDirName:"themes",slug:"/themes/simple",permalink:"/touying/docs/next/themes/simple",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/themes/simple.md",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Themes",permalink:"/touying/docs/next/category/themes"},next:{title:"Metropolis Theme",permalink:"/touying/docs/next/themes/metropolis"}},r={},c=[{value:"Initialization",id:"initialization",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",hr:"hr",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"simple-theme",children:"Simple Theme"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/83d5295e-f961-4ffd-bc56-a7049848d408",alt:"image"})}),"\n",(0,i.jsxs)(n.p,{children:["This theme originates from ",(0,i.jsx)(n.a,{href:"https://polylux.dev/book/themes/gallery/simple.html",children:"Polylux"}),", created by Andreas Kr\xf6pelin."]}),"\n",(0,i.jsx)(n.p,{children:"Considered a relatively straightforward theme, you can use it to create simple slides and freely incorporate features you like."}),"\n",(0,i.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,i.jsx)(n.p,{children:"You can initialize it using the following code:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9", footer: [Simple slides])\n#let s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide, title-slide, centered-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"register"})," function takes the following parameters:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"aspect-ratio"}),': The aspect ratio of the slides, either "16-9" or "4-3," defaulting to "16-9."']}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"footer"}),": Content displayed in the footer, defaulting to ",(0,i.jsx)(n.code,{children:"[]"}),", or it can be passed as a function like ",(0,i.jsx)(n.code,{children:"self => self.info.author"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"footer-right"}),": Content displayed on the right side of the footer, defaulting to ",(0,i.jsx)(n.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"background"}),": Background color, defaulting to white."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"foreground"}),": Text color, defaulting to black."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"primary"}),": Theme color, defaulting to ",(0,i.jsx)(n.code,{children:"aqua.darken(50%)"}),"."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,i.jsx)(n.p,{children:"The Simple theme provides a variety of custom slide functions:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#centered-slide(section: ..)[\n ...\n]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["A slide with content centered, and the ",(0,i.jsx)(n.code,{children:"section"})," parameter can be used to create a new section."]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#title-slide[\n ...\n]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Similar to ",(0,i.jsx)(n.code,{children:"centered-slide"}),", this is provided for consistency with Polylux syntax."]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // simple theme args\n footer: auto,\n)[\n ...\n]\n"})}),"\n",(0,i.jsx)(n.p,{children:"A default slide with headers and footers, where the header corresponds to the current section, and the footer is what you set."}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#focus-slide(foreground: ..., background: ...)[\n ...\n]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Used to draw attention, it optionally accepts a foreground color (defaulting to ",(0,i.jsx)(n.code,{children:"white"}),") and a background color (defaulting to ",(0,i.jsx)(n.code,{children:"auto"}),", i.e., ",(0,i.jsx)(n.code,{children:"self.colors.primary"}),")."]}),"\n",(0,i.jsxs)(n.h2,{id:"slides-function",children:[(0,i.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"slides"})," function has the following parameter:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"slide-level"}),": Defaults to ",(0,i.jsx)(n.code,{children:"1"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["You can set it using ",(0,i.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["And the function of automatically adding ",(0,i.jsx)(n.code,{children:"new-section-slide"})," can be turned off by ",(0,i.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9", footer: [Simple slides])\n#let s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide, title-slide, centered-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/2c599bd1-6250-497f-a65b-f19ae02a16cb",alt:"image"})}),"\n",(0,i.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9", footer: [Simple slides])\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide, title-slide, centered-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n#title-slide[\n = Keep it simple!\n #v(2em)\n\n Alpha #footnote[Uni Augsburg] #h(1em)\n Bravo #footnote[Uni Bayreuth] #h(1em)\n Charlie #footnote[Uni Chemnitz] #h(1em)\n\n July 23\n]\n\n== First slide\n\n#slide[\n #lorem(20)\n]\n\n#focus-slide[\n _Focus!_\n\n This is very important.\n]\n\n= Let\'s start a new section!\n\n== Dynamic slide\n\n#slide[\n Did you know that...\n\n #pause\n\n ...you can see the current section at the top of the slide?\n]\n'})})]})}function h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>d,a:()=>o});var i=s(7294);const t={},l=i.createContext(t);function o(e){const n=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),i.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2143],{8811:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>c});var i=s(5893),t=s(1151);const l={sidebar_position:1},o="Simple Theme",d={id:"themes/simple",title:"Simple Theme",description:"image",source:"@site/docs/themes/simple.md",sourceDirName:"themes",slug:"/themes/simple",permalink:"/touying/docs/next/themes/simple",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/themes/simple.md",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Themes",permalink:"/touying/docs/next/category/themes"},next:{title:"Metropolis Theme",permalink:"/touying/docs/next/themes/metropolis"}},r={},c=[{value:"Initialization",id:"initialization",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",hr:"hr",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"simple-theme",children:"Simple Theme"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/83d5295e-f961-4ffd-bc56-a7049848d408",alt:"image"})}),"\n",(0,i.jsxs)(n.p,{children:["This theme originates from ",(0,i.jsx)(n.a,{href:"https://polylux.dev/book/themes/gallery/simple.html",children:"Polylux"}),", created by Andreas Kr\xf6pelin."]}),"\n",(0,i.jsx)(n.p,{children:"Considered a relatively straightforward theme, you can use it to create simple slides and freely incorporate features you like."}),"\n",(0,i.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,i.jsx)(n.p,{children:"You can initialize it using the following code:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9", footer: [Simple slides])\n#let s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide, title-slide, centered-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"register"})," function takes the following parameters:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"aspect-ratio"}),': The aspect ratio of the slides, either "16-9" or "4-3," defaulting to "16-9."']}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"footer"}),": Content displayed in the footer, defaulting to ",(0,i.jsx)(n.code,{children:"[]"}),", or it can be passed as a function like ",(0,i.jsx)(n.code,{children:"self => self.info.author"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"footer-right"}),": Content displayed on the right side of the footer, defaulting to ",(0,i.jsx)(n.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"background"}),": Background color, defaulting to white."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"foreground"}),": Text color, defaulting to black."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"primary"}),": Theme color, defaulting to ",(0,i.jsx)(n.code,{children:"aqua.darken(50%)"}),"."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,i.jsx)(n.p,{children:"The Simple theme provides a variety of custom slide functions:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#centered-slide(section: ..)[\n ...\n]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["A slide with content centered, and the ",(0,i.jsx)(n.code,{children:"section"})," parameter can be used to create a new section."]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#title-slide[\n ...\n]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Similar to ",(0,i.jsx)(n.code,{children:"centered-slide"}),", this is provided for consistency with Polylux syntax."]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // simple theme args\n footer: auto,\n)[\n ...\n]\n"})}),"\n",(0,i.jsx)(n.p,{children:"A default slide with headers and footers, where the header corresponds to the current section, and the footer is what you set."}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#focus-slide(foreground: ..., background: ...)[\n ...\n]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Used to draw attention, it optionally accepts a foreground color (defaulting to ",(0,i.jsx)(n.code,{children:"white"}),") and a background color (defaulting to ",(0,i.jsx)(n.code,{children:"auto"}),", i.e., ",(0,i.jsx)(n.code,{children:"self.colors.primary"}),")."]}),"\n",(0,i.jsxs)(n.h2,{id:"slides-function",children:[(0,i.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"slides"})," function has the following parameter:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"slide-level"}),": Defaults to ",(0,i.jsx)(n.code,{children:"1"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["You can set it using ",(0,i.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["And the function of automatically adding ",(0,i.jsx)(n.code,{children:"new-section-slide"})," can be turned off by ",(0,i.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9", footer: [Simple slides])\n#let s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide, title-slide, centered-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/2c599bd1-6250-497f-a65b-f19ae02a16cb",alt:"image"})}),"\n",(0,i.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9", footer: [Simple slides])\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide, title-slide, centered-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n#title-slide[\n = Keep it simple!\n #v(2em)\n\n Alpha #footnote[Uni Augsburg] #h(1em)\n Bravo #footnote[Uni Bayreuth] #h(1em)\n Charlie #footnote[Uni Chemnitz] #h(1em)\n\n July 23\n]\n\n== First slide\n\n#slide[\n #lorem(20)\n]\n\n#focus-slide[\n _Focus!_\n\n This is very important.\n]\n\n= Let\'s start a new section!\n\n== Dynamic slide\n\n#slide[\n Did you know that...\n\n #pause\n\n ...you can see the current section at the top of the slide?\n]\n'})})]})}function h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>d,a:()=>o});var i=s(7294);const t={},l=i.createContext(t);function o(e){const n=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),i.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5d410c12.a14c5473.js b/assets/js/5d410c12.a14c5473.js new file mode 100644 index 000000000..b1a8210c1 --- /dev/null +++ b/assets/js/5d410c12.a14c5473.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8912],{4734:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>c,contentTitle:()=>i,default:()=>u,frontMatter:()=>o,metadata:()=>d,toc:()=>l});var t=n(5893),r=n(1151);const o={sidebar_position:1},i="Touying Counters",d={id:"progress/counters",title:"Touying Counters",description:"The states of Touying are placed under the states namespace, including all counters.",source:"@site/versioned_docs/version-0.4.1/progress/counters.md",sourceDirName:"progress",slug:"/progress/counters",permalink:"/touying/docs/0.4.1/progress/counters",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/progress/counters.md",tags:[],version:"0.4.1",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Progress",permalink:"/touying/docs/0.4.1/category/progress"},next:{title:"Touying Sections",permalink:"/touying/docs/0.4.1/progress/sections"}},c={},l=[{value:"Slide Counter",id:"slide-counter",level:2},{value:"Last-Slide Counter",id:"last-slide-counter",level:2},{value:"Progress",id:"progress",level:2},{value:"Appendix",id:"appendix",level:2}];function a(e){const s={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.h1,{id:"touying-counters",children:"Touying Counters"}),"\n",(0,t.jsxs)(s.p,{children:["The states of Touying are placed under the ",(0,t.jsx)(s.code,{children:"states"})," namespace, including all counters."]}),"\n",(0,t.jsx)(s.h2,{id:"slide-counter",children:"Slide Counter"}),"\n",(0,t.jsxs)(s.p,{children:["You can access the slide counter using ",(0,t.jsx)(s.code,{children:"states.slide-counter"})," and display the current slide number with ",(0,t.jsx)(s.code,{children:"states.slide-counter.display()"}),"."]}),"\n",(0,t.jsx)(s.h2,{id:"last-slide-counter",children:"Last-Slide Counter"}),"\n",(0,t.jsx)(s.p,{children:"In some cases, we may need to add an appendix to slides, leading to the requirement to freeze the last-slide counter. Therefore, a second counter is maintained here."}),"\n",(0,t.jsxs)(s.p,{children:["You can use ",(0,t.jsx)(s.code,{children:"states.last-slide-number"})," to display the number of the last slide before the appendix."]}),"\n",(0,t.jsx)(s.h2,{id:"progress",children:"Progress"}),"\n",(0,t.jsx)(s.p,{children:"You can use"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-typst",children:"#states.touying-progress(ratio => ..)\n"})}),"\n",(0,t.jsx)(s.p,{children:"to show the current progress."}),"\n",(0,t.jsx)(s.h2,{id:"appendix",children:"Appendix"}),"\n",(0,t.jsx)(s.p,{children:"You can use"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-typst",children:"// appendix by freezing last-slide-number\n#let s = (s.methods.appendix)(self: s)\n#let (slide, empty-slide) = utils.methods(s)\n\n#slide[\n appendix\n]\n"})}),"\n",(0,t.jsx)(s.p,{children:"syntax to enter the appendix."}),"\n",(0,t.jsxs)(s.p,{children:["Additionally, ",(0,t.jsx)(s.code,{children:"#let s = (s.methods.appendix-in-outline)(self: s, false)"})," can be used to hide the appendix section from the outline."]})]})}function u(e={}){const{wrapper:s}={...(0,r.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>d,a:()=>i});var t=n(7294);const r={},o=t.createContext(r);function i(e){const s=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function d(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5ed554a8.bb250a33.js b/assets/js/5ed554a8.bb250a33.js deleted file mode 100644 index cfacb5f0a..000000000 --- a/assets/js/5ed554a8.bb250a33.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2829],{828:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>c});var i=s(5893),t=s(1151);const l={sidebar_position:1},o="Simple Theme",d={id:"themes/simple",title:"Simple Theme",description:"image",source:"@site/versioned_docs/version-0.4.1/themes/simple.md",sourceDirName:"themes",slug:"/themes/simple",permalink:"/touying/docs/themes/simple",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/themes/simple.md",tags:[],version:"0.4.1",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Themes",permalink:"/touying/docs/category/themes"},next:{title:"Metropolis Theme",permalink:"/touying/docs/themes/metropolis"}},r={},c=[{value:"Initialization",id:"initialization",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",hr:"hr",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"simple-theme",children:"Simple Theme"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/83d5295e-f961-4ffd-bc56-a7049848d408",alt:"image"})}),"\n",(0,i.jsxs)(n.p,{children:["This theme originates from ",(0,i.jsx)(n.a,{href:"https://polylux.dev/book/themes/gallery/simple.html",children:"Polylux"}),", created by Andreas Kr\xf6pelin."]}),"\n",(0,i.jsx)(n.p,{children:"Considered a relatively straightforward theme, you can use it to create simple slides and freely incorporate features you like."}),"\n",(0,i.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,i.jsx)(n.p,{children:"You can initialize it using the following code:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9", footer: [Simple slides])\n#let s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide, title-slide, centered-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"register"})," function takes the following parameters:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"aspect-ratio"}),': The aspect ratio of the slides, either "16-9" or "4-3," defaulting to "16-9."']}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"footer"}),": Content displayed in the footer, defaulting to ",(0,i.jsx)(n.code,{children:"[]"}),", or it can be passed as a function like ",(0,i.jsx)(n.code,{children:"self => self.info.author"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"footer-right"}),": Content displayed on the right side of the footer, defaulting to ",(0,i.jsx)(n.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"background"}),": Background color, defaulting to white."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"foreground"}),": Text color, defaulting to black."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"primary"}),": Theme color, defaulting to ",(0,i.jsx)(n.code,{children:"aqua.darken(50%)"}),"."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,i.jsx)(n.p,{children:"The Simple theme provides a variety of custom slide functions:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#centered-slide(section: ..)[\n ...\n]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["A slide with content centered, and the ",(0,i.jsx)(n.code,{children:"section"})," parameter can be used to create a new section."]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#title-slide[\n ...\n]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Similar to ",(0,i.jsx)(n.code,{children:"centered-slide"}),", this is provided for consistency with Polylux syntax."]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // simple theme args\n footer: auto,\n)[\n ...\n]\n"})}),"\n",(0,i.jsx)(n.p,{children:"A default slide with headers and footers, where the header corresponds to the current section, and the footer is what you set."}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#focus-slide(foreground: ..., background: ...)[\n ...\n]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Used to draw attention, it optionally accepts a foreground color (defaulting to ",(0,i.jsx)(n.code,{children:"white"}),") and a background color (defaulting to ",(0,i.jsx)(n.code,{children:"auto"}),", i.e., ",(0,i.jsx)(n.code,{children:"self.colors.primary"}),")."]}),"\n",(0,i.jsxs)(n.h2,{id:"slides-function",children:[(0,i.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"slides"})," function has the following parameter:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"slide-level"}),": Defaults to ",(0,i.jsx)(n.code,{children:"1"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["You can set it using ",(0,i.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["And the function of automatically adding ",(0,i.jsx)(n.code,{children:"new-section-slide"})," can be turned off by ",(0,i.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9", footer: [Simple slides])\n#let s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide, title-slide, centered-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/2c599bd1-6250-497f-a65b-f19ae02a16cb",alt:"image"})}),"\n",(0,i.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9", footer: [Simple slides])\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide, title-slide, centered-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n#title-slide[\n = Keep it simple!\n #v(2em)\n\n Alpha #footnote[Uni Augsburg] #h(1em)\n Bravo #footnote[Uni Bayreuth] #h(1em)\n Charlie #footnote[Uni Chemnitz] #h(1em)\n\n July 23\n]\n\n== First slide\n\n#slide[\n #lorem(20)\n]\n\n#focus-slide[\n _Focus!_\n\n This is very important.\n]\n\n= Let\'s start a new section!\n\n== Dynamic slide\n\n#slide[\n Did you know that...\n\n #pause\n\n ...you can see the current section at the top of the slide?\n]\n'})})]})}function h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>d,a:()=>o});var i=s(7294);const t={},l=i.createContext(t);function o(e){const n=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),i.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5ed554a8.cadb3faa.js b/assets/js/5ed554a8.cadb3faa.js new file mode 100644 index 000000000..850ea6f49 --- /dev/null +++ b/assets/js/5ed554a8.cadb3faa.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2829],{828:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>c});var i=s(5893),t=s(1151);const l={sidebar_position:1},o="Simple Theme",d={id:"themes/simple",title:"Simple Theme",description:"image",source:"@site/versioned_docs/version-0.4.1/themes/simple.md",sourceDirName:"themes",slug:"/themes/simple",permalink:"/touying/docs/0.4.1/themes/simple",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/themes/simple.md",tags:[],version:"0.4.1",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Themes",permalink:"/touying/docs/0.4.1/category/themes"},next:{title:"Metropolis Theme",permalink:"/touying/docs/0.4.1/themes/metropolis"}},r={},c=[{value:"Initialization",id:"initialization",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",hr:"hr",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"simple-theme",children:"Simple Theme"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/83d5295e-f961-4ffd-bc56-a7049848d408",alt:"image"})}),"\n",(0,i.jsxs)(n.p,{children:["This theme originates from ",(0,i.jsx)(n.a,{href:"https://polylux.dev/book/themes/gallery/simple.html",children:"Polylux"}),", created by Andreas Kr\xf6pelin."]}),"\n",(0,i.jsx)(n.p,{children:"Considered a relatively straightforward theme, you can use it to create simple slides and freely incorporate features you like."}),"\n",(0,i.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,i.jsx)(n.p,{children:"You can initialize it using the following code:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9", footer: [Simple slides])\n#let s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide, title-slide, centered-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"register"})," function takes the following parameters:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"aspect-ratio"}),': The aspect ratio of the slides, either "16-9" or "4-3," defaulting to "16-9."']}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"footer"}),": Content displayed in the footer, defaulting to ",(0,i.jsx)(n.code,{children:"[]"}),", or it can be passed as a function like ",(0,i.jsx)(n.code,{children:"self => self.info.author"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"footer-right"}),": Content displayed on the right side of the footer, defaulting to ",(0,i.jsx)(n.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"background"}),": Background color, defaulting to white."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"foreground"}),": Text color, defaulting to black."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"primary"}),": Theme color, defaulting to ",(0,i.jsx)(n.code,{children:"aqua.darken(50%)"}),"."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,i.jsx)(n.p,{children:"The Simple theme provides a variety of custom slide functions:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#centered-slide(section: ..)[\n ...\n]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["A slide with content centered, and the ",(0,i.jsx)(n.code,{children:"section"})," parameter can be used to create a new section."]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#title-slide[\n ...\n]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Similar to ",(0,i.jsx)(n.code,{children:"centered-slide"}),", this is provided for consistency with Polylux syntax."]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // simple theme args\n footer: auto,\n)[\n ...\n]\n"})}),"\n",(0,i.jsx)(n.p,{children:"A default slide with headers and footers, where the header corresponds to the current section, and the footer is what you set."}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#focus-slide(foreground: ..., background: ...)[\n ...\n]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Used to draw attention, it optionally accepts a foreground color (defaulting to ",(0,i.jsx)(n.code,{children:"white"}),") and a background color (defaulting to ",(0,i.jsx)(n.code,{children:"auto"}),", i.e., ",(0,i.jsx)(n.code,{children:"self.colors.primary"}),")."]}),"\n",(0,i.jsxs)(n.h2,{id:"slides-function",children:[(0,i.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"slides"})," function has the following parameter:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"slide-level"}),": Defaults to ",(0,i.jsx)(n.code,{children:"1"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["You can set it using ",(0,i.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["And the function of automatically adding ",(0,i.jsx)(n.code,{children:"new-section-slide"})," can be turned off by ",(0,i.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9", footer: [Simple slides])\n#let s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide, title-slide, centered-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/2c599bd1-6250-497f-a65b-f19ae02a16cb",alt:"image"})}),"\n",(0,i.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9", footer: [Simple slides])\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide, title-slide, centered-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n#title-slide[\n = Keep it simple!\n #v(2em)\n\n Alpha #footnote[Uni Augsburg] #h(1em)\n Bravo #footnote[Uni Bayreuth] #h(1em)\n Charlie #footnote[Uni Chemnitz] #h(1em)\n\n July 23\n]\n\n== First slide\n\n#slide[\n #lorem(20)\n]\n\n#focus-slide[\n _Focus!_\n\n This is very important.\n]\n\n= Let\'s start a new section!\n\n== Dynamic slide\n\n#slide[\n Did you know that...\n\n #pause\n\n ...you can see the current section at the top of the slide?\n]\n'})})]})}function h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>d,a:()=>o});var i=s(7294);const t={},l=i.createContext(t);function o(e){const n=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),i.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5fecb693.e32b34bb.js b/assets/js/5fecb693.e32b34bb.js new file mode 100644 index 000000000..c5458796e --- /dev/null +++ b/assets/js/5fecb693.e32b34bb.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[64],{9588:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>c});var i=s(5893),t=s(1151);const l={sidebar_position:1},o="Simple Theme",d={id:"themes/simple",title:"Simple Theme",description:"image",source:"@site/versioned_docs/version-0.4.2/themes/simple.md",sourceDirName:"themes",slug:"/themes/simple",permalink:"/touying/docs/themes/simple",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/themes/simple.md",tags:[],version:"0.4.2",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Themes",permalink:"/touying/docs/category/themes"},next:{title:"Metropolis Theme",permalink:"/touying/docs/themes/metropolis"}},r={},c=[{value:"Initialization",id:"initialization",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",hr:"hr",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"simple-theme",children:"Simple Theme"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/83d5295e-f961-4ffd-bc56-a7049848d408",alt:"image"})}),"\n",(0,i.jsxs)(n.p,{children:["This theme originates from ",(0,i.jsx)(n.a,{href:"https://polylux.dev/book/themes/gallery/simple.html",children:"Polylux"}),", created by Andreas Kr\xf6pelin."]}),"\n",(0,i.jsx)(n.p,{children:"Considered a relatively straightforward theme, you can use it to create simple slides and freely incorporate features you like."}),"\n",(0,i.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,i.jsx)(n.p,{children:"You can initialize it using the following code:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9", footer: [Simple slides])\n#let s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide, title-slide, centered-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"register"})," function takes the following parameters:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"aspect-ratio"}),': The aspect ratio of the slides, either "16-9" or "4-3," defaulting to "16-9."']}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"footer"}),": Content displayed in the footer, defaulting to ",(0,i.jsx)(n.code,{children:"[]"}),", or it can be passed as a function like ",(0,i.jsx)(n.code,{children:"self => self.info.author"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"footer-right"}),": Content displayed on the right side of the footer, defaulting to ",(0,i.jsx)(n.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"background"}),": Background color, defaulting to white."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"foreground"}),": Text color, defaulting to black."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"primary"}),": Theme color, defaulting to ",(0,i.jsx)(n.code,{children:"aqua.darken(50%)"}),"."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,i.jsx)(n.p,{children:"The Simple theme provides a variety of custom slide functions:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#centered-slide(section: ..)[\n ...\n]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["A slide with content centered, and the ",(0,i.jsx)(n.code,{children:"section"})," parameter can be used to create a new section."]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#title-slide[\n ...\n]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Similar to ",(0,i.jsx)(n.code,{children:"centered-slide"}),", this is provided for consistency with Polylux syntax."]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // simple theme args\n footer: auto,\n)[\n ...\n]\n"})}),"\n",(0,i.jsx)(n.p,{children:"A default slide with headers and footers, where the header corresponds to the current section, and the footer is what you set."}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#focus-slide(foreground: ..., background: ...)[\n ...\n]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Used to draw attention, it optionally accepts a foreground color (defaulting to ",(0,i.jsx)(n.code,{children:"white"}),") and a background color (defaulting to ",(0,i.jsx)(n.code,{children:"auto"}),", i.e., ",(0,i.jsx)(n.code,{children:"self.colors.primary"}),")."]}),"\n",(0,i.jsxs)(n.h2,{id:"slides-function",children:[(0,i.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"slides"})," function has the following parameter:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"slide-level"}),": Defaults to ",(0,i.jsx)(n.code,{children:"1"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["You can set it using ",(0,i.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["And the function of automatically adding ",(0,i.jsx)(n.code,{children:"new-section-slide"})," can be turned off by ",(0,i.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9", footer: [Simple slides])\n#let s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide, title-slide, centered-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/2c599bd1-6250-497f-a65b-f19ae02a16cb",alt:"image"})}),"\n",(0,i.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9", footer: [Simple slides])\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide, title-slide, centered-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n#title-slide[\n = Keep it simple!\n #v(2em)\n\n Alpha #footnote[Uni Augsburg] #h(1em)\n Bravo #footnote[Uni Bayreuth] #h(1em)\n Charlie #footnote[Uni Chemnitz] #h(1em)\n\n July 23\n]\n\n== First slide\n\n#slide[\n #lorem(20)\n]\n\n#focus-slide[\n _Focus!_\n\n This is very important.\n]\n\n= Let\'s start a new section!\n\n== Dynamic slide\n\n#slide[\n Did you know that...\n\n #pause\n\n ...you can see the current section at the top of the slide?\n]\n'})})]})}function h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>d,a:()=>o});var i=s(7294);const t={},l=i.createContext(t);function o(e){const n=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),i.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5ff4e923.99171a69.js b/assets/js/5ff4e923.99171a69.js new file mode 100644 index 000000000..921cc9e77 --- /dev/null +++ b/assets/js/5ff4e923.99171a69.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4372],{2588:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>d,default:()=>p,frontMatter:()=>s,metadata:()=>r,toc:()=>c});var i=t(5893),o=t(1151);const s={sidebar_position:1},d="Pdfpc",r={id:"external/pdfpc",title:"Pdfpc",description:'pdfpc is a "Presenter Console with multi-monitor support for PDF files." This means you can use it to display slides in the form of PDF pages and it comes with some known excellent features, much like PowerPoint.',source:"@site/versioned_docs/version-0.4.1/external/pdfpc.md",sourceDirName:"external",slug:"/external/pdfpc",permalink:"/touying/docs/0.4.1/external/pdfpc",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/external/pdfpc.md",tags:[],version:"0.4.1",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"External Tools",permalink:"/touying/docs/0.4.1/category/external-tools"},next:{title:"Pympress",permalink:"/touying/docs/0.4.1/external/pympress"}},a={},c=[{value:"Adding Metadata",id:"adding-metadata",level:2},{value:"Pdfpc Configuration",id:"pdfpc-configuration",level:2},{value:"Exporting .pdfpc File",id:"exporting-pdfpc-file",level:2}];function l(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"pdfpc",children:"Pdfpc"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://pdfpc.github.io/",children:"pdfpc"}),' is a "Presenter Console with multi-monitor support for PDF files." This means you can use it to display slides in the form of PDF pages and it comes with some known excellent features, much like PowerPoint.']}),"\n",(0,i.jsxs)(n.p,{children:["pdfpc has a JSON-formatted ",(0,i.jsx)(n.code,{children:".pdfpc"})," file that can provide additional information for PDF slides. While you can manually write this file, you can also manage it through Touying."]}),"\n",(0,i.jsx)(n.h2,{id:"adding-metadata",children:"Adding Metadata"}),"\n",(0,i.jsxs)(n.p,{children:["Touying remains consistent with ",(0,i.jsx)(n.a,{href:"https://polylux.dev/book/external/pdfpc.html",children:"Polylux"})," to avoid conflicts between APIs."]}),"\n",(0,i.jsxs)(n.p,{children:["For example, you can add notes using ",(0,i.jsx)(n.code,{children:'#pdfpc.speaker-note("This is a note that only the speaker will see.")'}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"pdfpc-configuration",children:"Pdfpc Configuration"}),"\n",(0,i.jsx)(n.p,{children:"To add pdfpc configurations, you can use"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.append-preamble)(self: s, pdfpc.config(\n duration-minutes: 30,\n start-time: datetime(hour: 14, minute: 10, second: 0),\n end-time: datetime(hour: 14, minute: 40, second: 0),\n last-minutes: 5,\n note-font-size: 12,\n disable-markdown: false,\n default-transition: (\n type: "push",\n duration-seconds: 2,\n angle: ltr,\n alignment: "vertical",\n direction: "inward",\n ),\n))\n'})}),"\n",(0,i.jsxs)(n.p,{children:["Add the corresponding configurations. Refer to ",(0,i.jsx)(n.a,{href:"https://polylux.dev/book/external/pdfpc.html",children:"Polylux"})," for specific configuration details."]}),"\n",(0,i.jsx)(n.h2,{id:"exporting-pdfpc-file",children:"Exporting .pdfpc File"}),"\n",(0,i.jsxs)(n.p,{children:["Assuming your document is ",(0,i.jsx)(n.code,{children:"./example.typ"}),", you can export the ",(0,i.jsx)(n.code,{children:".pdfpc"})," file directly using:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-sh",children:'typst query --root . ./example.typ --field value --one "" > ./example.pdfpc\n'})}),"\n",(0,i.jsx)(n.p,{children:"With the compatibility of Touying and Polylux, you can make Polylux also support direct export by adding the following code:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1"\n\n#locate(loc => touying.pdfpc.pdfpc-file(loc))\n'})})]})}function p(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>d});var i=t(7294);const o={},s=i.createContext(o);function d(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:d(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/64ea200d.23e36957.js b/assets/js/64ea200d.23e36957.js new file mode 100644 index 000000000..423c693f2 --- /dev/null +++ b/assets/js/64ea200d.23e36957.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2112],{128:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>r,default:()=>u,frontMatter:()=>o,metadata:()=>d,toc:()=>a});var i=t(5893),s=t(1151);const o={sidebar_position:5},r="Other Animations",d={id:"dynamic/other",title:"Other Animations",description:"Touying also provides touying-reducer, which adds pause and meanwhile animations to cetz and fletcher.",source:"@site/versioned_docs/version-0.4.2/dynamic/other.md",sourceDirName:"dynamic",slug:"/dynamic/other",permalink:"/touying/docs/dynamic/other",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/dynamic/other.md",tags:[],version:"0.4.2",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Cover Function",permalink:"/touying/docs/dynamic/cover"},next:{title:"Handout Mode",permalink:"/touying/docs/dynamic/handout"}},c={},a=[{value:"Simple Animations",id:"simple-animations",level:2},{value:"only and uncover",id:"only-and-uncover",level:2}];function l(e){const n={code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"other-animations",children:"Other Animations"}),"\n",(0,i.jsxs)(n.p,{children:["Touying also provides ",(0,i.jsx)(n.code,{children:"touying-reducer"}),", which adds ",(0,i.jsx)(n.code,{children:"pause"})," and ",(0,i.jsx)(n.code,{children:"meanwhile"})," animations to cetz and fletcher."]}),"\n",(0,i.jsx)(n.h2,{id:"simple-animations",children:"Simple Animations"}),"\n",(0,i.jsx)(n.p,{children:"Here's an example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n#import "@preview/cetz:0.2.2"\n#import "@preview/fletcher:0.4.4" as fletcher: node, edge\n\n// cetz and fletcher bindings for touying\n#let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true))\n#let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide)\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides.with(title-slide: false, outline-slide: false)\n\n// cetz animation\n#slide[\n Cetz in Touying:\n\n #cetz-canvas({\n import cetz.draw: *\n \n rect((0,0), (5,5))\n\n (pause,)\n\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n\n (pause,)\n\n line((0,0), (2.5, 2.5), name: "line")\n })\n]\n\n// fletcher animation\n#slide[\n Fletcher in Touying:\n\n #fletcher-diagram(\n node-stroke: .1em,\n node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),\n spacing: 4em,\n edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),\n node((0,0), `reading`, radius: 2em),\n edge((0,0), (0,0), `read()`, "--|>", bend: 130deg),\n pause,\n edge(`read()`, "-|>"),\n node((1,0), `eof`, radius: 2em),\n pause,\n edge(`close()`, "-|>"),\n node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)),\n edge((0,0), (2,0), `close()`, "-|>", bend: -40deg),\n )\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc",alt:"image"})}),"\n",(0,i.jsx)(n.h2,{id:"only-and-uncover",children:"only and uncover"}),"\n",(0,i.jsxs)(n.p,{children:["In fact, we can also use ",(0,i.jsx)(n.code,{children:"only"})," and ",(0,i.jsx)(n.code,{children:"uncover"})," within cetz, just requiring a bit of skill:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#slide(repeat: 3, self => [\n #let (uncover, only) = utils.methods(self)\n\n Cetz in Touying in subslide #self.subslide:\n\n #cetz.canvas({\n import cetz.draw: *\n let self = (self.methods.update-cover)(self: self, hide.with(bounds: true))\n let (uncover,) = utils.methods(self)\n \n rect((0,0), (5,5))\n\n uncover("2-3", {\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n })\n\n only(3, line((0,0), (2.5, 2.5), name: "line"))\n })\n])\n'})})]})}function u(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>d,a:()=>r});var i=t(7294);const s={},o=i.createContext(s);function r(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/6607fcb6.3ca9b793.js b/assets/js/6607fcb6.c81db23e.js similarity index 98% rename from assets/js/6607fcb6.3ca9b793.js rename to assets/js/6607fcb6.c81db23e.js index f017ed415..1438c9f3f 100644 --- a/assets/js/6607fcb6.3ca9b793.js +++ b/assets/js/6607fcb6.c81db23e.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8332],{3732:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>r});var i=t(5893),s=t(1151);const o={sidebar_position:7},l="Multi-File Architecture",c={id:"multi-file",title:"Multi-File Architecture",description:"Touying features a syntax as concise as native Typst documents, along with numerous customizable configuration options, yet it still maintains real-time incremental compilation performance, making it suitable for writing large-scale slides.",source:"@site/docs/multi-file.md",sourceDirName:".",slug:"/multi-file",permalink:"/touying/docs/next/multi-file",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/multi-file.md",tags:[],version:"current",sidebarPosition:7,frontMatter:{sidebar_position:7},sidebar:"tutorialSidebar",previous:{title:"Global Settings",permalink:"/touying/docs/next/global-settings"},next:{title:"Dynamic Slides",permalink:"/touying/docs/next/category/dynamic-slides"}},a={},r=[{value:"Configuration and Content Separation",id:"configuration-and-content-separation",level:2},{value:"Multiple Sections",id:"multiple-sections",level:2}];function d(e){const n={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"multi-file-architecture",children:"Multi-File Architecture"}),"\n",(0,i.jsx)(n.p,{children:"Touying features a syntax as concise as native Typst documents, along with numerous customizable configuration options, yet it still maintains real-time incremental compilation performance, making it suitable for writing large-scale slides."}),"\n",(0,i.jsx)(n.p,{children:"If you need to write a large set of slides, such as a course manual spanning tens or hundreds of pages, you can also try Touying's multi-file architecture."}),"\n",(0,i.jsx)(n.h2,{id:"configuration-and-content-separation",children:"Configuration and Content Separation"}),"\n",(0,i.jsxs)(n.p,{children:["A simple Touying multi-file architecture consists of three files: a global configuration file ",(0,i.jsx)(n.code,{children:"globals.typ"}),", a main entry file ",(0,i.jsx)(n.code,{children:"main.typ"}),", and a content file ",(0,i.jsx)(n.code,{children:"content.typ"})," for storing the actual content."]}),"\n",(0,i.jsxs)(n.p,{children:["These three files are separated to allow both ",(0,i.jsx)(n.code,{children:"main.typ"})," and ",(0,i.jsx)(n.code,{children:"content.typ"})," to import ",(0,i.jsx)(n.code,{children:"globals.typ"})," without causing circular references."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"globals.typ"})," can be used to store some global custom functions and initialize Touying themes:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// globals.typ\n#import "@preview/touying:0.4.1": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#let (slide, empty-slide, title-slide, focus-slide, matrix-slide) = utils.slides(s)\n\n// as well as some utility functions\n'})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"main.typ"}),", as the main entry point of the project, applies show rules by importing ",(0,i.jsx)(n.code,{children:"globals.typ"})," and includes ",(0,i.jsx)(n.code,{children:"content.typ"})," using ",(0,i.jsx)(n.code,{children:"#include"}),":"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// main.typ\n#import "/globals.typ": *\n\n#show: init\n#show strong: alert\n#show: slides\n\n#include "content.typ"\n'})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"content.typ"})," is where you write the actual content:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// content.typ\n#import "/globals.typ": *\n\n= The Section\n\n== Slide Title\n\nHello, Touying!\n\n#focus-slide[\n Focus on me.\n]\n'})}),"\n",(0,i.jsx)(n.h2,{id:"multiple-sections",children:"Multiple Sections"}),"\n",(0,i.jsxs)(n.p,{children:["Implementing multiple sections is also straightforward. You only need to create a ",(0,i.jsx)(n.code,{children:"sections"})," directory and move the ",(0,i.jsx)(n.code,{children:"content.typ"})," file to the ",(0,i.jsx)(n.code,{children:"sections.typ"})," directory, for example:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// main.typ\n#import "/globals.typ": *\n\n#show: init\n#show strong: alert\n#show: slides\n\n#include "sections/content.typ"\n// #include "sections/another-section.typ"\n'})}),"\n",(0,i.jsx)(n.p,{children:"And"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// sections/content.typ\n#import "/globals.typ": *\n\n= The Section\n\n== Slide Title\n\nHello, Touying!\n\n#focus-slide[\n Focus on me.\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:"Now, you have learned how to use Touying to achieve a multi-file architecture for large-scale slides."})]})}function u(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>l});var i=t(7294);const s={},o=i.createContext(s);function l(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8332],{3732:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>r});var i=t(5893),s=t(1151);const o={sidebar_position:7},l="Multi-File Architecture",c={id:"multi-file",title:"Multi-File Architecture",description:"Touying features a syntax as concise as native Typst documents, along with numerous customizable configuration options, yet it still maintains real-time incremental compilation performance, making it suitable for writing large-scale slides.",source:"@site/docs/multi-file.md",sourceDirName:".",slug:"/multi-file",permalink:"/touying/docs/next/multi-file",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/multi-file.md",tags:[],version:"current",sidebarPosition:7,frontMatter:{sidebar_position:7},sidebar:"tutorialSidebar",previous:{title:"Global Settings",permalink:"/touying/docs/next/global-settings"},next:{title:"Dynamic Slides",permalink:"/touying/docs/next/category/dynamic-slides"}},a={},r=[{value:"Configuration and Content Separation",id:"configuration-and-content-separation",level:2},{value:"Multiple Sections",id:"multiple-sections",level:2}];function d(e){const n={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"multi-file-architecture",children:"Multi-File Architecture"}),"\n",(0,i.jsx)(n.p,{children:"Touying features a syntax as concise as native Typst documents, along with numerous customizable configuration options, yet it still maintains real-time incremental compilation performance, making it suitable for writing large-scale slides."}),"\n",(0,i.jsx)(n.p,{children:"If you need to write a large set of slides, such as a course manual spanning tens or hundreds of pages, you can also try Touying's multi-file architecture."}),"\n",(0,i.jsx)(n.h2,{id:"configuration-and-content-separation",children:"Configuration and Content Separation"}),"\n",(0,i.jsxs)(n.p,{children:["A simple Touying multi-file architecture consists of three files: a global configuration file ",(0,i.jsx)(n.code,{children:"globals.typ"}),", a main entry file ",(0,i.jsx)(n.code,{children:"main.typ"}),", and a content file ",(0,i.jsx)(n.code,{children:"content.typ"})," for storing the actual content."]}),"\n",(0,i.jsxs)(n.p,{children:["These three files are separated to allow both ",(0,i.jsx)(n.code,{children:"main.typ"})," and ",(0,i.jsx)(n.code,{children:"content.typ"})," to import ",(0,i.jsx)(n.code,{children:"globals.typ"})," without causing circular references."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"globals.typ"})," can be used to store some global custom functions and initialize Touying themes:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// globals.typ\n#import "@preview/touying:0.4.2": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#let (slide, empty-slide, title-slide, focus-slide, matrix-slide) = utils.slides(s)\n\n// as well as some utility functions\n'})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"main.typ"}),", as the main entry point of the project, applies show rules by importing ",(0,i.jsx)(n.code,{children:"globals.typ"})," and includes ",(0,i.jsx)(n.code,{children:"content.typ"})," using ",(0,i.jsx)(n.code,{children:"#include"}),":"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// main.typ\n#import "/globals.typ": *\n\n#show: init\n#show strong: alert\n#show: slides\n\n#include "content.typ"\n'})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"content.typ"})," is where you write the actual content:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// content.typ\n#import "/globals.typ": *\n\n= The Section\n\n== Slide Title\n\nHello, Touying!\n\n#focus-slide[\n Focus on me.\n]\n'})}),"\n",(0,i.jsx)(n.h2,{id:"multiple-sections",children:"Multiple Sections"}),"\n",(0,i.jsxs)(n.p,{children:["Implementing multiple sections is also straightforward. You only need to create a ",(0,i.jsx)(n.code,{children:"sections"})," directory and move the ",(0,i.jsx)(n.code,{children:"content.typ"})," file to the ",(0,i.jsx)(n.code,{children:"sections.typ"})," directory, for example:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// main.typ\n#import "/globals.typ": *\n\n#show: init\n#show strong: alert\n#show: slides\n\n#include "sections/content.typ"\n// #include "sections/another-section.typ"\n'})}),"\n",(0,i.jsx)(n.p,{children:"And"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'// sections/content.typ\n#import "/globals.typ": *\n\n= The Section\n\n== Slide Title\n\nHello, Touying!\n\n#focus-slide[\n Focus on me.\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:"Now, you have learned how to use Touying to achieve a multi-file architecture for large-scale slides."})]})}function u(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>l});var i=t(7294);const s={},o=i.createContext(s);function l(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/678a4048.93fdb357.js b/assets/js/678a4048.93fdb357.js new file mode 100644 index 000000000..5a7086301 --- /dev/null +++ b/assets/js/678a4048.93fdb357.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[5122],{269:(e,n,o)=>{o.r(n),o.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>c,frontMatter:()=>s,metadata:()=>a,toc:()=>d});var i=o(5893),t=o(1151);const s={sidebar_position:1},r="Introduction to Touying",a={id:"intro",title:"Introduction to Touying",description:'Touying is a slide/presentation package developed for Typst. Touying is similar to LaTeX Beamer but benefits from Typst, providing faster rendering speed and a more concise syntax. After, we use "slides" to refer to slideshows, "slide" for a single slide, and "subslide" for a sub-slide.',source:"@site/versioned_docs/version-0.4.2/intro.md",sourceDirName:".",slug:"/intro",permalink:"/touying/docs/intro",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/intro.md",tags:[],version:"0.4.2",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",next:{title:"Getting Started",permalink:"/touying/docs/start"}},l={},d=[{value:"Why Use Touying",id:"why-use-touying",level:2},{value:"About the Name",id:"about-the-name",level:2},{value:"About the Documentation",id:"about-the-documentation",level:2},{value:"Contribution",id:"contribution",level:2},{value:"Gallery",id:"gallery",level:2},{value:"License",id:"license",level:2}];function u(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"introduction-to-touying",children:"Introduction to Touying"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://github.com/touying-typ/touying",children:"Touying"}),' is a slide/presentation package developed for Typst. Touying is similar to LaTeX Beamer but benefits from Typst, providing faster rendering speed and a more concise syntax. After, we use "slides" to refer to slideshows, "slide" for a single slide, and "subslide" for a sub-slide.']}),"\n",(0,i.jsx)(n.h2,{id:"why-use-touying",children:"Why Use Touying"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:'Unlike PowerPoint, Touying is not a "what you see is what you get" tool. You can write your slides in a "content and style separation" manner, especially with Typst, which offers a concise yet powerful syntax, better supporting content like code blocks, mathematical formulas, and theorems. Another advantage is that, with templates, writing slides with Touying is much faster than PowerPoint. Therefore, Touying is more suitable for users with a demand for "research writing."'}),"\n",(0,i.jsxs)(n.li,{children:["Compared to Markdown Slides, Touying, relying on Typst, has more powerful typesetting control, such as headers, footers, layout, and convenient custom functions. These are capabilities that Markdown struggles to provide, or does not do well. Additionally, Touying offers ",(0,i.jsx)(n.code,{children:"#pause"})," and ",(0,i.jsx)(n.code,{children:"#meanwhile"})," markers, providing more convenient dynamic slide capabilities."]}),"\n",(0,i.jsx)(n.li,{children:"Compared to Beamer, Touying has faster compilation speed, a more concise syntax, and simpler theme customization capabilities. Touying's compilation speed can be maintained in milliseconds or tens of milliseconds, compared to Beamer's compilation time of seconds or tens of seconds. Touying's syntax is more concise than Beamer, making it easier to change templates and create your own templates. In terms of features, Touying supports most of Beamer's capabilities and provides some convenient features that Beamer lacks."}),"\n",(0,i.jsxs)(n.li,{children:['Compared to Polylux, Touying provides an object-oriented programming (OOP) style syntax, allowing the simulation of "global variables" through a global singleton. This makes it easy to write themes. Touying does not rely on ',(0,i.jsx)(n.code,{children:"counter"})," and ",(0,i.jsx)(n.code,{children:"locate"})," to implement ",(0,i.jsx)(n.code,{children:"#pause"}),", resulting in better performance. Touying is a community-driven project (we welcome more people to join), and it does not overly emphasize maintaining API consistency. Instead, it chooses to maintain documentation for multiple versions, providing more novel yet powerful features."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"about-the-name",children:"About the Name"}),"\n",(0,i.jsx)(n.p,{children:'"Touying" is derived from the Chinese word "\u6295\u5f71" (t\xf3uy\u01d0ng), which means "projection" In English, it also conveys the meaning of a "project". In comparison, the term "beamer" in LaTeX means a projector in German.'}),"\n",(0,i.jsx)(n.h2,{id:"about-the-documentation",children:"About the Documentation"}),"\n",(0,i.jsxs)(n.p,{children:["This documentation is powered by ",(0,i.jsx)(n.a,{href:"https://docusaurus.io/",children:"Docusaurus"}),". We will maintain English and Chinese versions of the documentation for Touying, and for each major version, we will maintain a documentation copy. This allows you to easily refer to old versions of the Touying documentation and migrate to new versions."]}),"\n",(0,i.jsx)(n.p,{children:"Docusaurus creates a new version:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-sh",children:"npm run docusaurus docs:version 0.y.x\n"})}),"\n",(0,i.jsx)(n.h2,{id:"contribution",children:"Contribution"}),"\n",(0,i.jsxs)(n.p,{children:["Touying is free, open-source, and community-driven. If you're interested, you can visit ",(0,i.jsx)(n.a,{href:"https://github.com/touying-typ/touying",children:"GitHub"})," anytime and raise issues or submit pull requests. We also welcome you to join the ",(0,i.jsx)(n.a,{href:"https://github.com/touying-typ",children:"touying-typ"})," organization."]}),"\n",(0,i.jsx)(n.h2,{id:"gallery",children:"Gallery"}),"\n",(0,i.jsxs)(n.p,{children:["Touying offers ",(0,i.jsx)(n.a,{href:"https://github.com/touying-typ/touying/wiki",children:"a gallery page"})," via wiki, where you can browse elegant slides created by Touying users. You're also encouraged to contribute your own beautiful slides here!"]}),"\n",(0,i.jsx)(n.h2,{id:"license",children:"License"}),"\n",(0,i.jsxs)(n.p,{children:["Touying is released under the ",(0,i.jsx)(n.a,{href:"https://github.com/touying-typ/touying/blob/main/LICENSE",children:"MIT license"}),"."]})]})}function c(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}},1151:(e,n,o)=>{o.d(n,{Z:()=>a,a:()=>r});var i=o(7294);const t={},s=i.createContext(t);function r(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/7032e634.ceba7b3a.js b/assets/js/7032e634.ceba7b3a.js new file mode 100644 index 000000000..a09b1bdb7 --- /dev/null +++ b/assets/js/7032e634.ceba7b3a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[108],{2218:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>r,toc:()=>a});var n=s(5893),i=s(1151);const o={sidebar_position:11},l="Creating Your Own Theme",r={id:"build-your-own-theme",title:"Creating Your Own Theme",description:"Creating your own theme with Touying might seem a bit complex initially due to the introduction of various concepts. However, fear not; if you successfully create a custom theme with Touying, you'll likely experience the convenience and powerful customization features it offers. You can refer to the source code of existing themes for guidance. The key steps to implement are:",source:"@site/versioned_docs/version-0.4.2/build-your-own-theme.md",sourceDirName:".",slug:"/build-your-own-theme",permalink:"/touying/docs/build-your-own-theme",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/build-your-own-theme.md",tags:[],version:"0.4.2",sidebarPosition:11,frontMatter:{sidebar_position:11},sidebar:"tutorialSidebar",previous:{title:"Aqua Theme",permalink:"/touying/docs/themes/aqua"},next:{title:"Progress",permalink:"/touying/docs/category/progress"}},d={},a=[{value:"Modifying Existing Themes",id:"modifying-existing-themes",level:2},{value:"Import",id:"import",level:2},{value:"Register Function and Init Method",id:"register-function-and-init-method",level:2},{value:"Color Theme",id:"color-theme",level:2},{value:"Practical: Custom Alert Method",id:"practical-custom-alert-method",level:2},{value:"Custom Header and Footer",id:"custom-header-and-footer",level:2},{value:"Custom Special Slide",id:"custom-special-slide",level:2},{value:"Conclusion",id:"conclusion",level:2}];function c(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"creating-your-own-theme",children:"Creating Your Own Theme"}),"\n",(0,n.jsxs)(t.p,{children:["Creating your own theme with Touying might seem a bit complex initially due to the introduction of various concepts. However, fear not; if you successfully create a custom theme with Touying, you'll likely experience the convenience and powerful customization features it offers. You can refer to the ",(0,n.jsx)(t.a,{href:"https://github.com/touying-typ/touying/tree/main/themes",children:"source code of existing themes"})," for guidance. The key steps to implement are:"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"register"})," function to initialize the global singleton ",(0,n.jsx)(t.code,{children:"s"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"init"})," method."]}),"\n",(0,n.jsxs)(t.li,{children:["Define a color theme by modifying the ",(0,n.jsx)(t.code,{children:"self.colors"})," member variable."]}),"\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"alert"})," method (optional)."]}),"\n",(0,n.jsx)(t.li,{children:"Customize the header."}),"\n",(0,n.jsx)(t.li,{children:"Customize the footer."}),"\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"slide"})," method."]}),"\n",(0,n.jsxs)(t.li,{children:["Customize special slide methods, such as ",(0,n.jsx)(t.code,{children:"title-slide"})," and ",(0,n.jsx)(t.code,{children:"focus-slide"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"slides"})," method (optional)."]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"To demonstrate creating a simple and elegant Bamboo theme, let's follow the steps."}),"\n",(0,n.jsx)(t.h2,{id:"modifying-existing-themes",children:"Modifying Existing Themes"}),"\n",(0,n.jsx)(t.p,{children:"If you wish to modify a theme within the Touying package locally instead of creating one from scratch, you can achieve this by following these steps:"}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["Copy the ",(0,n.jsx)(t.a,{href:"https://github.com/touying-typ/touying/tree/main/themes",children:"theme code"})," from the ",(0,n.jsx)(t.code,{children:"themes"})," directory to your local machine. For example, copy ",(0,n.jsx)(t.code,{children:"themes/university.typ"})," to a local file named ",(0,n.jsx)(t.code,{children:"university.typ"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:["Remove all ",(0,n.jsx)(t.code,{children:'#import "../xxx.typ"'})," commands at the top of the ",(0,n.jsx)(t.code,{children:"university.typ"})," file."]}),"\n",(0,n.jsxs)(t.li,{children:["Add ",(0,n.jsx)(t.code,{children:'#import "@preview/touying:0.4.2": *'})," at the top of the ",(0,n.jsx)(t.code,{children:"university.typ"})," file to import all modules."]}),"\n",(0,n.jsxs)(t.li,{children:["Replace ",(0,n.jsx)(t.code,{children:"self: s"})," in the ",(0,n.jsx)(t.code,{children:"register"})," function with ",(0,n.jsx)(t.code,{children:"self: themes.default.register()"})," ",(0,n.jsx)(t.strong,{children:"(Important)"}),"."]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"You can then import and use the theme by:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n#import "university.typ"\n\n#let s = university.register(aspect-ratio: "16-9")\n'})}),"\n",(0,n.jsxs)(t.p,{children:["For a specific example, refer to: ",(0,n.jsx)(t.a,{href:"https://typst.app/project/rqRuzg0keo_ZEB5AdxjweA",children:"https://typst.app/project/rqRuzg0keo_ZEB5AdxjweA"})]}),"\n",(0,n.jsx)(t.h2,{id:"import",children:"Import"}),"\n",(0,n.jsx)(t.p,{children:"Depending on whether the theme is for personal use or part of Touying, you can import in two ways:"}),"\n",(0,n.jsx)(t.p,{children:"If for personal use:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n'})}),"\n",(0,n.jsx)(t.p,{children:"If part of Touying themes:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#import "../utils/utils.typ"\n#import "../utils/states.typ"\n#import "../utils/components.typ"\n'})}),"\n",(0,n.jsxs)(t.p,{children:["Additionally, add the import statement in Touying's ",(0,n.jsx)(t.code,{children:"themes/themes.typ"}),":"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{children:'#import "bamboo.typ"\n'})}),"\n",(0,n.jsx)(t.h2,{id:"register-function-and-init-method",children:"Register Function and Init Method"}),"\n",(0,n.jsx)(t.p,{children:"Next, we'll distinguish between the bamboo.typ template file and the main.typ file, the latter of which is sometimes omitted."}),"\n",(0,n.jsx)(t.p,{children:"Generally, the first step in creating slides is to determine font size and page aspect ratio. Therefore, we need to register an initialization method:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'// bamboo.typ\n#import "@preview/touying:0.4.2": *\n\n#let register(\n self: themes.default.register(),\n aspect-ratio: "16-9",\n) = {\n self.page-args += (\n paper: "presentation-" + aspect-ratio,\n )\n self.methods.init = (self: none, body) => {\n set text(size: 20pt)\n body\n }\n self\n}\n\n// main.typ\n#import "@preview/touying:0.4.2": *\n#import "bamboo.typ"\n\n#let s = bamboo.register(aspect-ratio: "16-9")\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= First Section\n\n== First Slide\n\n#slide[\n A slide with a title and an *important* information.\n]\n'})}),"\n",(0,n.jsxs)(t.p,{children:["As you can see, we created a ",(0,n.jsx)(t.code,{children:"register"})," function and passed an ",(0,n.jsx)(t.code,{children:"aspect-ratio"})," parameter to set the page aspect ratio. We get default ",(0,n.jsx)(t.code,{children:"self"})," by ",(0,n.jsx)(t.code,{children:"self: themes.default.register()"}),". As you might already know, in Touying, we should not use ",(0,n.jsx)(t.code,{children:"set page(..)"})," to set page parameters but rather use the syntax ",(0,n.jsx)(t.code,{children:"self.page-args += (..)"})," to set them, as explained in the Page Layout section."]}),"\n",(0,n.jsxs)(t.p,{children:["In addition, we registered a ",(0,n.jsx)(t.code,{children:"self.methods.init"})," method, which can be used for some global style settings. For example, in this case, we added ",(0,n.jsx)(t.code,{children:"set text(size: 20pt)"})," to set the font size. You can also place additional global style settings here, such as ",(0,n.jsx)(t.code,{children:"set par(justify: true)"}),". Since the ",(0,n.jsx)(t.code,{children:"init"})," function is placed inside ",(0,n.jsx)(t.code,{children:"self.methods"}),", it is a method, not a regular function. Therefore, we need to add the parameter ",(0,n.jsx)(t.code,{children:"self: none"})," to use it properly."]}),"\n",(0,n.jsxs)(t.p,{children:["As you can see, later in ",(0,n.jsx)(t.code,{children:"main.typ"}),", we apply the global style settings in ",(0,n.jsx)(t.code,{children:"init"})," using ",(0,n.jsx)(t.code,{children:"#show: init"}),", where ",(0,n.jsx)(t.code,{children:"init"})," is bound and unpacked through ",(0,n.jsx)(t.code,{children:"utils.methods(s)"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["If you pay extra attention, you'll notice that the ",(0,n.jsx)(t.code,{children:"register"})," function has an independent ",(0,n.jsx)(t.code,{children:"self"})," at the end. This actually represents returning the modified ",(0,n.jsx)(t.code,{children:"self"})," as the return value, which will be saved in ",(0,n.jsx)(t.code,{children:"#let s = .."}),". This line is therefore indispensable."]}),"\n",(0,n.jsx)(t.h2,{id:"color-theme",children:"Color Theme"}),"\n",(0,n.jsxs)(t.p,{children:["Choosing an attractive color theme for your slides is crucial. Touying provides built-in color theme support to minimize API differences between different themes. Touying offers two dimensions of color selection: the first is ",(0,n.jsx)(t.code,{children:"neutral"}),", ",(0,n.jsx)(t.code,{children:"primary"}),", ",(0,n.jsx)(t.code,{children:"secondary"}),", and ",(0,n.jsx)(t.code,{children:"tertiary"})," for hue distinction, with ",(0,n.jsx)(t.code,{children:"primary"})," being the most commonly used; the second is ",(0,n.jsx)(t.code,{children:"default"}),", ",(0,n.jsx)(t.code,{children:"light"}),", ",(0,n.jsx)(t.code,{children:"lighter"}),", ",(0,n.jsx)(t.code,{children:"lightest"}),", ",(0,n.jsx)(t.code,{children:"dark"}),", ",(0,n.jsx)(t.code,{children:"darker"}),", and ",(0,n.jsx)(t.code,{children:"darkest"})," for brightness distinction."]}),"\n",(0,n.jsxs)(t.p,{children:["As we are creating the Bamboo theme, we chose a color for the ",(0,n.jsx)(t.code,{children:"primary"})," theme, similar to bamboo (",(0,n.jsx)(t.code,{children:'rgb("#5E8B65")'}),"), and included neutral lightest/darkest as background and font colors."]}),"\n",(0,n.jsxs)(t.p,{children:["As shown in the code below, we use ",(0,n.jsx)(t.code,{children:"(self.methods.colors)(self: self, ..)"})," to modify the color theme. Essentially, it is a wrapper for ",(0,n.jsx)(t.code,{children:"self.colors += (..)"}),"."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#let register(\n self: themes.default.register(),\n aspect-ratio: "16-9",\n) = {\n // color theme\n self = (self.methods.colors)(\n self: self,\n primary: rgb("#5E8B65"),\n neutral-lightest: rgb("#ffffff"),\n neutral-darkest: rgb("#000000"),\n )\n self.page-args += (\n paper: "presentation-" + aspect-ratio,\n )\n self.methods.init = (self: none, body) => {\n set text(size: 20pt)\n body\n }\n self\n}\n'})}),"\n",(0,n.jsxs)(t.p,{children:["After adding the color theme, we can access the color using syntax like ",(0,n.jsx)(t.code,{children:"self.colors.primary"}),"."]}),"\n",(0,n.jsx)(t.p,{children:"It's worth noting that users can change the theme color at any time using:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#let s = (s.methods.colors)(self: s, primary: rgb("#3578B9"))\n'})}),"\n",(0,n.jsx)(t.p,{children:"This flexibility demonstrates Touying's powerful customization capabilities."}),"\n",(0,n.jsx)(t.h2,{id:"practical-custom-alert-method",children:"Practical: Custom Alert Method"}),"\n",(0,n.jsxs)(t.p,{children:["In general, we need to provide a ",(0,n.jsx)(t.code,{children:"#alert[..]"})," function for users, similar to ",(0,n.jsx)(t.code,{children:"#strong[..]"}),". Typically, ",(0,n.jsx)(t.code,{children:"#alert[..]"})," emphasizes text using the primary theme color for aesthetics. We add a line in the ",(0,n.jsx)(t.code,{children:"register"})," function:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:"self.methods.alert = (self: none, it) => text(fill: self.colors.primary, it)\n"})}),"\n",(0,n.jsxs)(t.p,{children:["This code sets the text color to ",(0,n.jsx)(t.code,{children:"self.colors.primary"}),", utilizing the theme's primary color."]}),"\n",(0,n.jsx)(t.h2,{id:"custom-header-and-footer",children:"Custom Header and Footer"}),"\n",(0,n.jsx)(t.p,{children:"Here, assuming you've already read the Page Layout section, we know we should add headers and footers to the slides."}),"\n",(0,n.jsxs)(t.p,{children:["Firstly, we add ",(0,n.jsx)(t.code,{children:"self.bamboo-title = []"}),". This means we save the title of the current slide as a member variable ",(0,n.jsx)(t.code,{children:"self.bamboo-title"}),", stored in ",(0,n.jsx)(t.code,{children:"self"}),". This makes it easy to use in the header and later modifications. Similarly, we create ",(0,n.jsx)(t.code,{children:"self.bamboo-footer"}),", saving the ",(0,n.jsx)(t.code,{children:"footer: []"})," parameter from the ",(0,n.jsx)(t.code,{children:"register"})," function for displaying in the bottom-left corner."]}),"\n",(0,n.jsxs)(t.p,{children:["It's worth noting that our header is actually a content function in the form of ",(0,n.jsx)(t.code,{children:"let header(self) = { .. }"})," with the ",(0,n.jsx)(t.code,{children:"self"})," parameter, allowing us to get the latest information from ",(0,n.jsx)(t.code,{children:"self"}),". For example, ",(0,n.jsx)(t.code,{children:"self.bamboo-title"}),". The footer is similar."]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"components.cell"})," used inside is actually ",(0,n.jsx)(t.code,{children:"#let cell = block.with(width: 100%, height: 100%, above: 0pt, below: 0pt, breakable: false)"}),", and ",(0,n.jsx)(t.code,{children:"show: components.cell"})," is shorthand for ",(0,n.jsx)(t.code,{children:"components.cell(body)"}),". The ",(0,n.jsx)(t.code,{children:"show: pad.with(.4em)"})," in the footer is similar."]}),"\n",(0,n.jsxs)(t.p,{children:["Another point to note is the ",(0,n.jsx)(t.code,{children:"states"})," module, which contains many counters and state-related content. For example, ",(0,n.jsx)(t.code,{children:"states.current-section-title"})," is used to display the current ",(0,n.jsx)(t.code,{children:"section"}),", and ",(0,n.jsx)(t.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'})," is used to display the current page number and total number of pages."]}),"\n",(0,n.jsxs)(t.p,{children:["We observe the usage of ",(0,n.jsx)(t.code,{children:"utils.call-or-display(self, self.bamboo-footer)"})," to display ",(0,n.jsx)(t.code,{children:"self.bamboo-footer"}),". This is used to handle situations like ",(0,n.jsx)(t.code,{children:"self.bamboo-footer = (self) => {..}"}),", ensuring a unified approach to displaying content functions and content."]}),"\n",(0,n.jsxs)(t.p,{children:["To ensure proper display of the header and footer and sufficient spacing from the main content, we also set margins, such as ",(0,n.jsx)(t.code,{children:"self.page-args += (margin: (top: 4em, bottom: 1.5em, x: 2em))"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["We also need to customize a ",(0,n.jsx)(t.code,{children:"slide"})," method that accepts ",(0,n.jsx)(t.code,{children:"slide(self: none, title: auto, ..args)"}),". The first ",(0,n.jsx)(t.code,{children:"self: none"})," is a required method parameter for getting the latest ",(0,n.jsx)(t.code,{children:"self"}),". The second ",(0,n.jsx)(t.code,{children:"title"})," is used to update ",(0,n.jsx)(t.code,{children:"self.bamboo-title"})," for displaying in the header. The third ",(0,n.jsx)(t.code,{children:"..args"})," collects the remaining parameters and passes them to ",(0,n.jsx)(t.code,{children:"(self.methods.touying-slide)(self: self, ..args)"}),", which is necessary for the Touying ",(0,n.jsx)(t.code,{children:"slide"})," functionality to work properly. Additionally, we need to register this method in the ",(0,n.jsx)(t.code,{children:"register"})," function with ",(0,n.jsx)(t.code,{children:"self.methods.slide = slide"}),"."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'// bamboo.typ\n#import "@preview/touying:0.4.2": *\n\n#let slide(self: none, title: auto, ..args) = {\n if title != auto {\n self.bamboo-title = title\n }\n (self.methods.touying-slide)(self: self, ..args)\n}\n\n#let register(\n self: themes.default.register(),\n aspect-ratio: "16-9",\n footer: [],\n) = {\n // color theme\n self = (self.methods.colors)(\n self: self,\n primary: rgb("#5E8B65"),\n neutral-lightest: rgb("#ffffff"),\n neutral-darkest: rgb("#000000"),\n )\n // variables for later use\n self.bamboo-title = []\n self.bamboo-footer = footer\n // set page\n let header(self) = {\n set align(top)\n show: components.cell.with(fill: self.colors.primary, inset: 1em)\n set align(horizon)\n set text(fill: self.colors.neutral-lightest, size: .7em)\n states.current-section-title\n linebreak()\n set text(size: 1.5em)\n utils.call-or-display(self, self.bamboo-title)\n }\n let footer(self) = {\n set align(bottom)\n show: pad.with(.4em)\n set text(fill: self.colors.neutral-darkest, size: .8em)\n utils.call-or-display(self, self.bamboo-footer)\n h(1fr)\n states.slide-counter.display() + " / " + states.last-slide-number\n }\n self.page-args += (\n paper: "presentation-" + aspect-ratio,\n header: header,\n footer: footer,\n margin: (top: 4em, bottom: 1.5em, x: 2em),\n )\n // register methods\n self.methods.slide = slide\n self.methods.alert = (self: none, it) => text(fill: self.colors.primary, it)\n self.methods.init = (self: none, body) => {\n set text(size: 20pt)\n body\n }\n self\n}\n\n\n// main.typ\n#import "@preview/touying:0.4.2": *\n#import "bamboo.typ"\n\n#let s = bamboo.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= First Section\n\n== First Slide\n\n#slide[\n A slide with a title and an *important* information.\n]\n'})}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://github.com/touying-typ/touying/assets/34951714/d33bcda7-c032-4b11-b392-5b939d9a0a47",alt:"image"})}),"\n",(0,n.jsx)(t.h2,{id:"custom-special-slide",children:"Custom Special Slide"}),"\n",(0,n.jsxs)(t.p,{children:["Building upon the basic slide, we further add some special slide functions such as ",(0,n.jsx)(t.code,{children:"title-slide"}),", ",(0,n.jsx)(t.code,{children:"focus-slide"}),", and a custom ",(0,n.jsx)(t.code,{children:"slides"})," method."]}),"\n",(0,n.jsxs)(t.p,{children:["For the ",(0,n.jsx)(t.code,{children:"title-slide"})," method, first, we call ",(0,n.jsx)(t.code,{children:"self = utils.empty-page(self)"}),". This function clears ",(0,n.jsx)(t.code,{children:"self.page-args.header"}),", ",(0,n.jsx)(t.code,{children:"self.page-args.footer"}),", and sets ",(0,n.jsx)(t.code,{children:"margin"})," to ",(0,n.jsx)(t.code,{children:"0em"}),", creating a blank page effect. Then, we use ",(0,n.jsx)(t.code,{children:"let info = self.info + args.named()"})," to get information stored in ",(0,n.jsx)(t.code,{children:"self.info"})," and update it with the passed ",(0,n.jsx)(t.code,{children:"args.named()"})," for later use as ",(0,n.jsx)(t.code,{children:"info.title"}),". The specific page content ",(0,n.jsx)(t.code,{children:"body"})," will vary for each theme, so we won't go into details here. Finally, we call `(self.methods.touying-slide)(self: self, repeat: none, body"]}),"\n",(0,n.jsxs)(t.p,{children:[")",(0,n.jsx)(t.code,{children:", where "}),"repeat: none",(0,n.jsx)(t.code,{children:"indicates that this page does not require animation effects, and passing the"}),"body` parameter displays its content."]}),"\n",(0,n.jsxs)(t.p,{children:["For the ",(0,n.jsx)(t.code,{children:"new-section-slide"})," method, the process is similar. The only thing to note is that in ",(0,n.jsx)(t.code,{children:"(self.methods.touying-slide)(self: self, repeat: none, section: section, body)"}),", we pass an additional ",(0,n.jsx)(t.code,{children:"section: section"})," parameter to declare the creation of a new section. Another point to note is that besides ",(0,n.jsx)(t.code,{children:"self.methods.new-section-slide = new-section-slide"}),", we also register ",(0,n.jsx)(t.code,{children:"self.methods.touying-new-section-slide = new-section-slide"}),", so ",(0,n.jsx)(t.code,{children:"new-section-slide"})," will be automatically called when encountering a first-level title."]}),"\n",(0,n.jsxs)(t.p,{children:["For the ",(0,n.jsx)(t.code,{children:"focus-slide"})," method, most of the content is similar, but it's worth noting that we use ",(0,n.jsx)(t.code,{children:"self.page-args += (..)"})," to update the page's background color."]}),"\n",(0,n.jsxs)(t.p,{children:["Finally, we update the ",(0,n.jsx)(t.code,{children:"slides(self: none, title-slide: true, slide-level: 1, ..args)"})," method. When ",(0,n.jsx)(t.code,{children:"title-slide"})," is ",(0,n.jsx)(t.code,{children:"true"}),", using ",(0,n.jsx)(t.code,{children:"#show: slides"})," will automatically create a ",(0,n.jsx)(t.code,{children:"title-slide"}),". Setting ",(0,n.jsx)(t.code,{children:"slide-level: 1"})," indicates that the first-level and second-level titles correspond to ",(0,n.jsx)(t.code,{children:"section"})," and ",(0,n.jsx)(t.code,{children:"title"}),", respectively."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{children:'// bamboo.typ\n#import "@preview/touying:0.4.2": *\n\n#let slide(self: none, title: auto, ..args) = {\n if title != auto {\n self.bamboo-title = title\n }\n (self.methods.touying-slide)(self: self, ..args)\n}\n\n#let title-slide(self: none, ..args) = {\n self = utils.empty-page(self)\n let info = self.info + args.named()\n let body = {\n set align(center + horizon)\n block(\n fill: self.colors.primary,\n width: 80%,\n inset: (y: 1em),\n radius: 1em,\n text(size: 2em, fill: self.colors.neutral-lightest, weight: "bold", info.title)\n )\n set text(fill: self.colors.neutral-darkest)\n if info.author != none {\n block(info.author)\n }\n if info.date != none {\n block(if type(info.date) == datetime { info.date.display(self.datetime-format) } else { info.date })\n }\n }\n (self.methods.touying-slide)(self: self, repeat: none, body)\n}\n\n#let new-section-slide(self: none, section) = {\n self = utils.empty-page(self)\n let body = {\n set align(center + horizon)\n set text(size: 2em, fill: self.colors.primary, weight: "bold", style: "italic")\n section\n }\n (self.methods.touying-slide)(self: self, repeat: none, section: section, body)\n}\n\n#let focus-slide(self: none, body) = {\n self = utils.empty-page(self)\n self.page-args += (\n fill: self.colors.primary,\n margin: 2em,\n )\n set text(fill: self.colors.neutral-lightest, size: 2em)\n (self.methods.touying-slide)(self: self, repeat: none, align(horizon + center, body))\n}\n\n#let slides(self: none, title-slide: true, slide-level: 1, ..args) = {\n if title-slide {\n (self.methods.title-slide)(self: self)\n }\n (self.methods.touying-slides)(self: self, slide-level: slide-level, ..args)\n}\n\n#let register(\n self: themes.default.register(),\n aspect-ratio: "16-9",\n footer: [],\n) = {\n // color theme\n self = (self.methods.colors)(\n self: self,\n primary: rgb("#5E8B65"),\n neutral-lightest: rgb("#ffffff"),\n neutral-darkest: rgb("#000000"),\n )\n // variables for later use\n self.bamboo-title = []\n self.bamboo-footer = footer\n // set page\n let header(self) = {\n set align(top)\n show: components.cell.with(fill: self.colors.primary, inset: 1em)\n set align(horizon)\n set text(fill: self.colors.neutral-lightest, size: .7em)\n states.current-section-title\n linebreak()\n set text(size: 1.5em)\n utils.call-or-display(self, self.bamboo-title)\n }\n let footer(self) = {\n set align(bottom)\n show: pad.with(.4em)\n set text(fill: self.colors.neutral-darkest, size: .8em)\n utils.call-or-display(self, self.bamboo-footer)\n h(1fr)\n states.slide-counter.display() + " / " + states.last-slide-number\n }\n self.page-args += (\n paper: "presentation-" + aspect-ratio,\n header: header,\n footer: footer,\n margin: (top: 4em, bottom: 1.5em, x: 2em),\n )\n // register methods\n self.methods.slide = slide\n self.methods.title-slide = title-slide\n self.methods.new-section-slide = new-section-slide\n self.methods.touying-new-section-slide = new-section-slide\n self.methods.focus-slide = focus-slide\n self.methods.slides = slides\n self.methods.alert = (self: none, it) => text(fill: self.colors.primary, it)\n self.methods.init = (self: none, body) => {\n set text(size: 20pt)\n body\n }\n self\n}\n\n\n// main.typ\n#import "@preview/touying:0.4.2": *\n#import "bamboo.typ"\n\n#let s = bamboo.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= First Section\n\n== First Slide\n\n#slide[\n A slide with a title and an *important* information.\n]\n\n#focus-slide[\n Focus on it!\n]\n'})}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://github.com/touying-typ/touying/assets/34951714/03c5ad02-8ff4-4068-9664-d9cfad79baaf",alt:"image"})}),"\n",(0,n.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsx)(t.p,{children:"Congratulations! You've created a simple and elegant theme. Perhaps you may find that Touying introduces a wealth of concepts, making it initially challenging to grasp. This is normal, as Touying opts for functionality over simplicity. However, thanks to Touying's comprehensive and unified approach, you can easily extract commonalities between different themes and transfer your knowledge seamlessly. You can also save global variables, modify existing themes, or switch between themes effortlessly, showcasing the benefits of Touying's decoupling and object-oriented programming."})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>r,a:()=>l});var n=s(7294);const i={},o=n.createContext(i);function l(e){const t=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/33b22e37.b85085a7.js b/assets/js/71b26582.dd10909a.js similarity index 92% rename from assets/js/33b22e37.b85085a7.js rename to assets/js/71b26582.dd10909a.js index d88d4be82..f6a43729d 100644 --- a/assets/js/33b22e37.b85085a7.js +++ b/assets/js/71b26582.dd10909a.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8937],{4911:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>r,default:()=>d,frontMatter:()=>s,metadata:()=>a,toc:()=>l});var o=t(5893),i=t(1151);const s={sidebar_position:6},r="Ctheorems",a={id:"integration/ctheorems",title:"Ctheorems",description:"Touying can work seamlessly with the ctheorems package, allowing you to directly use the ctheorems package.",source:"@site/versioned_docs/version-0.4.1/integration/ctheorems.md",sourceDirName:"integration",slug:"/integration/ctheorems",permalink:"/touying/docs/integration/ctheorems",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/integration/ctheorems.md",tags:[],version:"0.4.1",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"tutorialSidebar",previous:{title:"Codly",permalink:"/touying/docs/integration/codly"},next:{title:"Themes",permalink:"/touying/docs/category/themes"}},c={},l=[];function m(e){const n={code:"code",h1:"h1",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{id:"ctheorems",children:"Ctheorems"}),"\n",(0,o.jsxs)(n.p,{children:["Touying can work seamlessly with the ",(0,o.jsx)(n.code,{children:"ctheorems"})," package, allowing you to directly use the ",(0,o.jsx)(n.code,{children:"ctheorems"})," package."]}),"\n",(0,o.jsxs)(n.p,{children:["Moreover, you can utilize ",(0,o.jsx)(n.code,{children:'#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")'})," to set numbering for sections and subsections."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/ctheorems:1.1.2": *\n\n// Register university theme\n#let s = themes.simple.register(aspect-ratio: "16-9")\n\n// Set the numbering of section and subsection\n#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")\n\n// Theroems configuration by ctheorems\n#show: thmrules.with(qed-symbol: $square$)\n#let theorem = thmbox("theorem", "Theorem", fill: rgb("#eeffee"))\n#let corollary = thmplain(\n "corollary",\n "Corollary",\n base: "theorem",\n titlefmt: strong\n)\n#let definition = thmbox("definition", "Definition", inset: (x: 1.2em, top: 1em))\n#let example = thmplain("example", "Example").with(numbering: none)\n#let proof = thmproof("proof", "Proof")\n\n// Extract methods\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n// Extract slide functions\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Theroems\n\n== Prime numbers\n\n#definition[\n A natural number is called a #highlight[_prime number_] if it is greater\n than 1 and cannot be written as the product of two smaller natural numbers.\n]\n#example[\n The numbers $2$, $3$, and $17$ are prime.\n @cor_largest_prime shows that this list is not exhaustive!\n]\n\n#theorem("Euclid")[\n There are infinitely many primes.\n]\n#proof[\n Suppose to the contrary that $p_1, p_2, dots, p_n$ is a finite enumeration\n of all primes. Set $P = p_1 p_2 dots p_n$. Since $P + 1$ is not in our list,\n it cannot be prime. Thus, some prime factor $p_j$ divides $P + 1$. Since\n $p_j$ also divides $P$, it must divide the difference $(P + 1) - P = 1$, a\n contradiction.\n]\n\n#corollary[\n There is no largest prime number.\n] \n#corollary[\n There are infinitely many composite numbers.\n]\n\n#theorem[\n There are arbitrarily long stretches of composite numbers.\n]\n\n#proof[\n For any $n > 2$, consider $\n n! + 2, quad n! + 3, quad ..., quad n! + n #qedhere\n $\n]\n'})}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/b506da7e-b7d6-4493-b35a-2307cfd38ddc",alt:"image"})})]})}function d(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>r});var o=t(7294);const i={},s=o.createContext(i);function r(e){const n=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4187],{8194:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>r,default:()=>d,frontMatter:()=>s,metadata:()=>a,toc:()=>l});var o=t(5893),i=t(1151);const s={sidebar_position:6},r="Ctheorems",a={id:"integration/ctheorems",title:"Ctheorems",description:"Touying can work seamlessly with the ctheorems package, allowing you to directly use the ctheorems package.",source:"@site/versioned_docs/version-0.4.2/integration/ctheorems.md",sourceDirName:"integration",slug:"/integration/ctheorems",permalink:"/touying/docs/integration/ctheorems",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/integration/ctheorems.md",tags:[],version:"0.4.2",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"tutorialSidebar",previous:{title:"Codly",permalink:"/touying/docs/integration/codly"},next:{title:"Themes",permalink:"/touying/docs/category/themes"}},c={},l=[];function m(e){const n={code:"code",h1:"h1",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{id:"ctheorems",children:"Ctheorems"}),"\n",(0,o.jsxs)(n.p,{children:["Touying can work seamlessly with the ",(0,o.jsx)(n.code,{children:"ctheorems"})," package, allowing you to directly use the ",(0,o.jsx)(n.code,{children:"ctheorems"})," package."]}),"\n",(0,o.jsxs)(n.p,{children:["Moreover, you can utilize ",(0,o.jsx)(n.code,{children:'#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")'})," to set numbering for sections and subsections."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n#import "@preview/ctheorems:1.1.2": *\n\n// Register university theme\n#let s = themes.simple.register(aspect-ratio: "16-9")\n\n// Set the numbering of section and subsection\n#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")\n\n// Theroems configuration by ctheorems\n#show: thmrules.with(qed-symbol: $square$)\n#let theorem = thmbox("theorem", "Theorem", fill: rgb("#eeffee"))\n#let corollary = thmplain(\n "corollary",\n "Corollary",\n base: "theorem",\n titlefmt: strong\n)\n#let definition = thmbox("definition", "Definition", inset: (x: 1.2em, top: 1em))\n#let example = thmplain("example", "Example").with(numbering: none)\n#let proof = thmproof("proof", "Proof")\n\n// Extract methods\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n// Extract slide functions\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Theroems\n\n== Prime numbers\n\n#definition[\n A natural number is called a #highlight[_prime number_] if it is greater\n than 1 and cannot be written as the product of two smaller natural numbers.\n]\n#example[\n The numbers $2$, $3$, and $17$ are prime.\n @cor_largest_prime shows that this list is not exhaustive!\n]\n\n#theorem("Euclid")[\n There are infinitely many primes.\n]\n#proof[\n Suppose to the contrary that $p_1, p_2, dots, p_n$ is a finite enumeration\n of all primes. Set $P = p_1 p_2 dots p_n$. Since $P + 1$ is not in our list,\n it cannot be prime. Thus, some prime factor $p_j$ divides $P + 1$. Since\n $p_j$ also divides $P$, it must divide the difference $(P + 1) - P = 1$, a\n contradiction.\n]\n\n#corollary[\n There is no largest prime number.\n] \n#corollary[\n There are infinitely many composite numbers.\n]\n\n#theorem[\n There are arbitrarily long stretches of composite numbers.\n]\n\n#proof[\n For any $n > 2$, consider $\n n! + 2, quad n! + 3, quad ..., quad n! + n #qedhere\n $\n]\n'})}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/b506da7e-b7d6-4493-b35a-2307cfd38ddc",alt:"image"})})]})}function d(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>r});var o=t(7294);const i={},s=o.createContext(i);function r(e){const n=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/7240ac5a.c698faee.js b/assets/js/7240ac5a.c698faee.js new file mode 100644 index 000000000..f2359b33f --- /dev/null +++ b/assets/js/7240ac5a.c698faee.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3564],{9697:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>d,frontMatter:()=>o,metadata:()=>a,toc:()=>c});var i=t(5893),s=t(1151);const o={sidebar_position:2},r="Getting Started",a={id:"start",title:"Getting Started",description:"Before you begin, make sure you have the Typst environment installed. If not, you can use the Web App or install the Tinymist LSP and Typst Preview plugins for VS Code.",source:"@site/versioned_docs/version-0.4.2/start.md",sourceDirName:".",slug:"/start",permalink:"/touying/docs/start",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/start.md",tags:[],version:"0.4.2",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Introduction to Touying",permalink:"/touying/docs/intro"},next:{title:"Sections and Subsections",permalink:"/touying/docs/sections"}},l={},c=[{value:"More Complex Examples",id:"more-complex-examples",level:2}];function u(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"getting-started",children:"Getting Started"}),"\n",(0,i.jsxs)(n.p,{children:["Before you begin, make sure you have the Typst environment installed. If not, you can use the ",(0,i.jsx)(n.a,{href:"https://typst.app/",children:"Web App"})," or install the ",(0,i.jsx)(n.a,{href:"https://marketplace.visualstudio.com/items?itemName=myriad-dreamin.tinymist",children:"Tinymist LSP"})," and ",(0,i.jsx)(n.a,{href:"https://marketplace.visualstudio.com/items?itemName=mgt19937.typst-preview",children:"Typst Preview"})," plugins for VS Code."]}),"\n",(0,i.jsx)(n.p,{children:"To use Touying, you just need to include the following in your document:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.simple.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/f5bdbf8f-7bf9-45fd-9923-0fa5d66450b2",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:"It's that simple! You've created your first Touying slides. Congratulations! \ud83c\udf89"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Tip:"})," You can use Typst syntax like ",(0,i.jsx)(n.code,{children:'#import "config.typ": *'})," or ",(0,i.jsx)(n.code,{children:'#include "content.typ"'})," to implement Touying's multi-file architecture."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Warning:"})," The comma in ",(0,i.jsx)(n.code,{children:"#let (slide, empty-slide) = utils.slides(s)"})," is necessary for the unpacking syntax."]}),"\n",(0,i.jsx)(n.h2,{id:"more-complex-examples",children:"More Complex Examples"}),"\n",(0,i.jsxs)(n.p,{children:["In fact, Touying provides various styles for slide writing. You can also use the ",(0,i.jsx)(n.code,{children:"#slide[..]"})," syntax to access more powerful features provided by Touying."]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/fcecb505-d2d1-4e36-945a-225f4661a694",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:"Touying offers many built-in themes to easily create beautiful slides. For example, in this case:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:'#let s = themes.university.register(aspect-ratio: "16-9")\n'})}),"\n",(0,i.jsx)(n.p,{children:"you can use the university theme. For more detailed tutorials on themes, you can refer to the following sections."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n#import "@preview/cetz:0.2.2"\n#import "@preview/fletcher:0.4.4" as fletcher: node, edge\n#import "@preview/ctheorems:1.1.2": *\n\n// cetz and fletcher bindings for touying\n#let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true))\n#let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide)\n\n// Register university theme\n// You can replace it with other themes and it can still work normally\n#let s = themes.university.register(aspect-ratio: "16-9")\n\n// Set the numbering of section and subsection\n#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")\n\n// Set the speaker notes configuration\n// #let s = (s.methods.show-notes-on-second-screen)(self: s, right)\n\n// Global information configuration\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n\n// Pdfpc configuration\n// typst query --root . ./example.typ --field value --one "" > ./example.pdfpc\n#let s = (s.methods.append-preamble)(self: s, pdfpc.config(\n duration-minutes: 30,\n start-time: datetime(hour: 14, minute: 10, second: 0),\n end-time: datetime(hour: 14, minute: 40, second: 0),\n last-minutes: 5,\n note-font-size: 12,\n disable-markdown: false,\n default-transition: (\n type: "push",\n duration-seconds: 2,\n angle: ltr,\n alignment: "vertical",\n direction: "inward",\n ),\n))\n\n// Theroems configuration by ctheorems\n#show: thmrules.with(qed-symbol: $square$)\n#let theorem = thmbox("theorem", "Theorem", fill: rgb("#eeffee"))\n#let corollary = thmplain(\n "corollary",\n "Corollary",\n base: "theorem",\n titlefmt: strong\n)\n#let definition = thmbox("definition", "Definition", inset: (x: 1.2em, top: 1em))\n#let example = thmplain("example", "Example").with(numbering: none)\n#let proof = thmproof("proof", "Proof")\n\n// Extract methods\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n// Extract slide functions\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Animation\n\n== Simple Animation\n\nWe can use `#pause` to #pause display something later.\n\n#pause\n\nJust like this.\n\n#meanwhile\n\nMeanwhile, #pause we can also use `#meanwhile` to #pause display other content synchronously.\n\n#speaker-note[\n + This is a speaker note.\n + You won\'t see it unless you use `#let s = (s.math.show-notes-on-second-screen)(self: s, right)`\n]\n\n\n== Complex Animation - Mark-Style\n\nAt subslide #utils.touying-wrapper((self: none) => str(self.subslide)), we can\n\nuse #uncover("2-")[`#uncover` function] for reserving space,\n\nuse #only("2-")[`#only` function] for not reserving space,\n\n#alternatives[call `#only` multiple times \\u{2717}][use `#alternatives` function #sym.checkmark] for choosing one of the alternatives.\n\n\n== Complex Animation - Callback-Style\n\n#slide(repeat: 3, self => [\n #let (uncover, only, alternatives) = utils.methods(self)\n\n At subslide #self.subslide, we can\n\n use #uncover("2-")[`#uncover` function] for reserving space,\n\n use #only("2-")[`#only` function] for not reserving space,\n\n #alternatives[call `#only` multiple times \\u{2717}][use `#alternatives` function #sym.checkmark] for choosing one of the alternatives.\n])\n\n\n== Math Equation Animation\n\nTouying equation with `pause`:\n\n#touying-equation(`\n f(x) &= pause x^2 + 2x + 1 \\\n &= pause (x + 1)^2 \\\n`)\n\n#meanwhile\n\nHere, #pause we have the expression of $f(x)$.\n\n#pause\n\nBy factorizing, we can obtain this result.\n\n\n== CeTZ Animation\n\nCeTZ Animation in Touying:\n\n#cetz-canvas({\n import cetz.draw: *\n \n rect((0,0), (5,5))\n\n (pause,)\n\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n\n (pause,)\n\n line((0,0), (2.5, 2.5), name: "line")\n})\n\n\n== Fletcher Animation\n\nFletcher Animation in Touying:\n\n#fletcher-diagram(\n node-stroke: .1em,\n node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),\n spacing: 4em,\n edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),\n node((0,0), `reading`, radius: 2em),\n edge((0,0), (0,0), `read()`, "--|>", bend: 130deg),\n pause,\n edge(`read()`, "-|>"),\n node((1,0), `eof`, radius: 2em),\n pause,\n edge(`close()`, "-|>"),\n node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)),\n edge((0,0), (2,0), `close()`, "-|>", bend: -40deg),\n)\n\n\n= Theroems\n\n== Prime numbers\n\n#definition[\n A natural number is called a #highlight[_prime number_] if it is greater\n than 1 and cannot be written as the product of two smaller natural numbers.\n]\n#example[\n The numbers $2$, $3$, and $17$ are prime.\n @cor_largest_prime shows that this list is not exhaustive!\n]\n\n#theorem("Euclid")[\n There are infinitely many primes.\n]\n#proof[\n Suppose to the contrary that $p_1, p_2, dots, p_n$ is a finite enumeration\n of all primes. Set $P = p_1 p_2 dots p_n$. Since $P + 1$ is not in our list,\n it cannot be prime. Thus, some prime factor $p_j$ divides $P + 1$. Since\n $p_j$ also divides $P$, it must divide the difference $(P + 1) - P = 1$, a\n contradiction.\n]\n\n#corollary[\n There is no largest prime number.\n] \n#corollary[\n There are infinitely many composite numbers.\n]\n\n#theorem[\n There are arbitrarily long stretches of composite numbers.\n]\n\n#proof[\n For any $n > 2$, consider $\n n! + 2, quad n! + 3, quad ..., quad n! + n #qedhere\n $\n]\n\n\n= Others\n\n== Side-by-side\n\n#slide(composer: (1fr, 1fr))[\n First column.\n][\n Second column.\n]\n\n\n== Multiple Pages\n\n#lorem(200)\n\n\n// appendix by freezing last-slide-number\n#let s = (s.methods.appendix)(self: s)\n#let (slide, empty-slide) = utils.slides(s)\n\n== Appendix\n\n#slide[\n Please pay attention to the current slide number.\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/fcecb505-d2d1-4e36-945a-225f4661a694",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:"Touying offers many built-in themes to easily create beautiful slides. For example, in this case:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:'#let s = themes.university.register(aspect-ratio: "16-9")\n'})}),"\n",(0,i.jsx)(n.p,{children:"you can use the university theme. For more detailed tutorials on themes, you can refer to the following sections."})]})}function d(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>r});var i=t(7294);const s={},o=i.createContext(s);function r(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/ed5e9b8d.47a6fdae.js b/assets/js/7381b349.fd34ac00.js similarity index 96% rename from assets/js/ed5e9b8d.47a6fdae.js rename to assets/js/7381b349.fd34ac00.js index 19bda9759..d47b73597 100644 --- a/assets/js/ed5e9b8d.47a6fdae.js +++ b/assets/js/7381b349.fd34ac00.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8207],{2307:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>c});var s=i(5893),t=i(1151);const l={sidebar_position:3},o="Dewdrop Theme",d={id:"themes/dewdrop",title:"Dewdrop Theme",description:"image",source:"@site/versioned_docs/version-0.4.1/themes/dewdrop.md",sourceDirName:"themes",slug:"/themes/dewdrop",permalink:"/touying/docs/themes/dewdrop",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/themes/dewdrop.md",tags:[],version:"0.4.1",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Metropolis Theme",permalink:"/touying/docs/themes/metropolis"},next:{title:"University Theme",permalink:"/touying/docs/themes/university"}},r={},c=[{value:"Initialization",id:"initialization",level:2},{value:"Color Theme",id:"color-theme",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"Special Functions",id:"special-functions",level:2},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",hr:"hr",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"dewdrop-theme",children:"Dewdrop Theme"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/0b5b2bb2-c6ec-45c0-9cea-0af2ed896bba",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["This theme takes inspiration from Zhibo Wang's ",(0,s.jsx)(n.a,{href:"https://github.com/zbowang/BeamerTheme",children:"BeamerTheme"})," and has been modified by ",(0,s.jsx)(n.a,{href:"https://github.com/OrangeX4",children:"OrangeX4"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["The Dewdrop theme features an elegantly designed navigation, including two modes: ",(0,s.jsx)(n.code,{children:"sidebar"})," and ",(0,s.jsx)(n.code,{children:"mini-slides"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,s.jsx)(n.p,{children:"You can initialize it using the following code:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.dewdrop.register(\n aspect-ratio: "16-9",\n footer: [Dewdrop],\n navigation: "mini-slides",\n // navigation: "sidebar",\n // navigation: none,\n)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"register"})," function takes the following parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"aspect-ratio"}),': The aspect ratio of the slides, either "16-9" or "4-3," defaulting to "16-9."']}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"navigation"}),": The navigation bar style, which can be ",(0,s.jsx)(n.code,{children:'"sidebar"'}),", ",(0,s.jsx)(n.code,{children:'"mini-slides"'}),", or ",(0,s.jsx)(n.code,{children:"none"}),", defaulting to ",(0,s.jsx)(n.code,{children:'"sidebar"'}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"sidebar"}),": Sidebar navigation settings, defaulting to ",(0,s.jsx)(n.code,{children:"(width: 10em)"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"mini-slides"}),": Mini-slides settings, defaulting to ",(0,s.jsx)(n.code,{children:"(height: 2em, x: 2em, section: false, subsection: true)"}),".","\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"height"}),": The height of mini-slides, defaulting to ",(0,s.jsx)(n.code,{children:"2em"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"x"}),": Padding on the x-axis for mini-slides, defaulting to ",(0,s.jsx)(n.code,{children:"2em"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"section"}),": Whether to display slides after the section and before the subsection, defaulting to ",(0,s.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"subsection"}),": Whether to split mini-slides based on subsections or compress them into one line, defaulting to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer"}),": Content displayed in the footer, defaulting to ",(0,s.jsx)(n.code,{children:"[]"}),", or it can be passed as a function like ",(0,s.jsx)(n.code,{children:"self => self.info.author"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer-right"}),": Content displayed on the right side of the footer, defaulting to ",(0,s.jsx)(n.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"primary"}),": Primary color, defaulting to ",(0,s.jsx)(n.code,{children:'rgb("#0c4842")'}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"alpha"}),": Transparency, defaulting to ",(0,s.jsx)(n.code,{children:"70%"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["The Dewdrop theme also provides an ",(0,s.jsx)(n.code,{children:"#alert[..]"})," function, which you can use with ",(0,s.jsx)(n.code,{children:"#show strong: alert"})," using the ",(0,s.jsx)(n.code,{children:"*alert text*"})," syntax."]}),"\n",(0,s.jsx)(n.h2,{id:"color-theme",children:"Color Theme"}),"\n",(0,s.jsx)(n.p,{children:"Dewdrop uses the following default color theme:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.colors)(\n self: s,\n neutral-darkest: rgb("#000000"),\n neutral-dark: rgb("#202020"),\n neutral-light: rgb("#f3f3f3"),\n neutral-lightest: rgb("#ffffff"),\n primary: primary,\n)\n'})}),"\n",(0,s.jsxs)(n.p,{children:["You can modify this color theme using ",(0,s.jsx)(n.code,{children:"#let s = (s.methods.colors)(self: s, ..)"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,s.jsx)(n.p,{children:"The Dewdrop theme provides a variety of custom slide functions:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#title-slide(extra: none, ..args)\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"title-slide"})," reads information from ",(0,s.jsx)(n.code,{children:"self.info"})," for display, and you can also pass in an ",(0,s.jsx)(n.code,{children:"extra"})," parameter to display additional information."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // Dewdrop theme\n footer: auto,\n)[\n ...\n]\n"})}),"\n",(0,s.jsx)(n.p,{children:"A default slide with navigation and footer, where the footer is what you set."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#focus-slide[\n ...\n]\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Used to draw attention, with the background color set to ",(0,s.jsx)(n.code,{children:"self.colors.primary"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"special-functions",children:"Special Functions"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#d-outline(enum-args: (:), list-args: (:), cover: true)\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Displays the current table of contents. The ",(0,s.jsx)(n.code,{children:"cover"})," parameter specifies whether to hide sections in an inactive state."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#d-sidebar()\n"})}),"\n",(0,s.jsx)(n.p,{children:"An internal function used to display the sidebar."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#d-mini-slides()\n"})}),"\n",(0,s.jsx)(n.p,{children:"An internal function used to display mini-slides."}),"\n",(0,s.jsxs)(n.h2,{id:"slides-function",children:[(0,s.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"slides"})," function has the following parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"title-slide"}),": Defaults to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"outline-slide"}),": Defaults to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"slide-level"}),": Defaults to ",(0,s.jsx)(n.code,{children:"2"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["You can set these using ",(0,s.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["PS: You can modify the outline title using ",(0,s.jsx)(n.code,{children:"#(s.outline-title = [Outline])"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["And the function of automatically adding ",(0,s.jsx)(n.code,{children:"new-section-slide"})," can be turned off by ",(0,s.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.dewdrop.register(aspect-ratio: "16-9", footer: [Dewdrop])\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/09ddfb40-4f97-4062-8261-23f87690c33e",alt:"image"})}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.dewdrop.register(\n aspect-ratio: "16-9",\n footer: [Dewdrop],\n navigation: "mini-slides",\n // navigation: none,\n)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= Section A\n\n== Subsection A.1\n\n#slide[\n A slide with equation:\n\n $ x_(n+1) = (x_n + a/x_n) / 2 $\n]\n\n== Subsection A.2\n\n#slide[\n A slide without a title but with *important* infos\n]\n\n= Section B\n\n== Subsection B.1\n\n#slide[\n #lorem(80)\n]\n\n#focus-slide[\n Wake up!\n]\n\n== Subsection B.2\n\n#slide[\n We can use `#pause` to #pause display something later.\n\n #pause\n \n Just like this.\n\n #meanwhile\n \n Meanwhile, #pause we can also use `#meanwhile` to #pause display other content synchronously.\n]\n\n// appendix by freezing last-slide-number\n#let s = (s.methods.appendix)(self: s)\n#let (slide, empty-slide) = utils.slides(s)\n\n= Appendix\n\n=== Appendix\n\n#slide[\n Please pay attention to the current slide number.\n]\n'})})]})}function h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>d,a:()=>o});var s=i(7294);const t={},l=s.createContext(t);function o(e){const n=s.useContext(l);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),s.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9116],{3788:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>c});var s=i(5893),t=i(1151);const l={sidebar_position:3},o="Dewdrop Theme",d={id:"themes/dewdrop",title:"Dewdrop Theme",description:"image",source:"@site/versioned_docs/version-0.4.2/themes/dewdrop.md",sourceDirName:"themes",slug:"/themes/dewdrop",permalink:"/touying/docs/themes/dewdrop",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/themes/dewdrop.md",tags:[],version:"0.4.2",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Metropolis Theme",permalink:"/touying/docs/themes/metropolis"},next:{title:"University Theme",permalink:"/touying/docs/themes/university"}},r={},c=[{value:"Initialization",id:"initialization",level:2},{value:"Color Theme",id:"color-theme",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"Special Functions",id:"special-functions",level:2},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",hr:"hr",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"dewdrop-theme",children:"Dewdrop Theme"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/0b5b2bb2-c6ec-45c0-9cea-0af2ed896bba",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["This theme takes inspiration from Zhibo Wang's ",(0,s.jsx)(n.a,{href:"https://github.com/zbowang/BeamerTheme",children:"BeamerTheme"})," and has been modified by ",(0,s.jsx)(n.a,{href:"https://github.com/OrangeX4",children:"OrangeX4"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["The Dewdrop theme features an elegantly designed navigation, including two modes: ",(0,s.jsx)(n.code,{children:"sidebar"})," and ",(0,s.jsx)(n.code,{children:"mini-slides"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,s.jsx)(n.p,{children:"You can initialize it using the following code:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.dewdrop.register(\n aspect-ratio: "16-9",\n footer: [Dewdrop],\n navigation: "mini-slides",\n // navigation: "sidebar",\n // navigation: none,\n)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"register"})," function takes the following parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"aspect-ratio"}),': The aspect ratio of the slides, either "16-9" or "4-3," defaulting to "16-9."']}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"navigation"}),": The navigation bar style, which can be ",(0,s.jsx)(n.code,{children:'"sidebar"'}),", ",(0,s.jsx)(n.code,{children:'"mini-slides"'}),", or ",(0,s.jsx)(n.code,{children:"none"}),", defaulting to ",(0,s.jsx)(n.code,{children:'"sidebar"'}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"sidebar"}),": Sidebar navigation settings, defaulting to ",(0,s.jsx)(n.code,{children:"(width: 10em)"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"mini-slides"}),": Mini-slides settings, defaulting to ",(0,s.jsx)(n.code,{children:"(height: 2em, x: 2em, section: false, subsection: true)"}),".","\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"height"}),": The height of mini-slides, defaulting to ",(0,s.jsx)(n.code,{children:"2em"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"x"}),": Padding on the x-axis for mini-slides, defaulting to ",(0,s.jsx)(n.code,{children:"2em"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"section"}),": Whether to display slides after the section and before the subsection, defaulting to ",(0,s.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"subsection"}),": Whether to split mini-slides based on subsections or compress them into one line, defaulting to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer"}),": Content displayed in the footer, defaulting to ",(0,s.jsx)(n.code,{children:"[]"}),", or it can be passed as a function like ",(0,s.jsx)(n.code,{children:"self => self.info.author"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer-right"}),": Content displayed on the right side of the footer, defaulting to ",(0,s.jsx)(n.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"primary"}),": Primary color, defaulting to ",(0,s.jsx)(n.code,{children:'rgb("#0c4842")'}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"alpha"}),": Transparency, defaulting to ",(0,s.jsx)(n.code,{children:"70%"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["The Dewdrop theme also provides an ",(0,s.jsx)(n.code,{children:"#alert[..]"})," function, which you can use with ",(0,s.jsx)(n.code,{children:"#show strong: alert"})," using the ",(0,s.jsx)(n.code,{children:"*alert text*"})," syntax."]}),"\n",(0,s.jsx)(n.h2,{id:"color-theme",children:"Color Theme"}),"\n",(0,s.jsx)(n.p,{children:"Dewdrop uses the following default color theme:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.colors)(\n self: s,\n neutral-darkest: rgb("#000000"),\n neutral-dark: rgb("#202020"),\n neutral-light: rgb("#f3f3f3"),\n neutral-lightest: rgb("#ffffff"),\n primary: primary,\n)\n'})}),"\n",(0,s.jsxs)(n.p,{children:["You can modify this color theme using ",(0,s.jsx)(n.code,{children:"#let s = (s.methods.colors)(self: s, ..)"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,s.jsx)(n.p,{children:"The Dewdrop theme provides a variety of custom slide functions:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#title-slide(extra: none, ..args)\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"title-slide"})," reads information from ",(0,s.jsx)(n.code,{children:"self.info"})," for display, and you can also pass in an ",(0,s.jsx)(n.code,{children:"extra"})," parameter to display additional information."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // Dewdrop theme\n footer: auto,\n)[\n ...\n]\n"})}),"\n",(0,s.jsx)(n.p,{children:"A default slide with navigation and footer, where the footer is what you set."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#focus-slide[\n ...\n]\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Used to draw attention, with the background color set to ",(0,s.jsx)(n.code,{children:"self.colors.primary"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"special-functions",children:"Special Functions"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#d-outline(enum-args: (:), list-args: (:), cover: true)\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Displays the current table of contents. The ",(0,s.jsx)(n.code,{children:"cover"})," parameter specifies whether to hide sections in an inactive state."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#d-sidebar()\n"})}),"\n",(0,s.jsx)(n.p,{children:"An internal function used to display the sidebar."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#d-mini-slides()\n"})}),"\n",(0,s.jsx)(n.p,{children:"An internal function used to display mini-slides."}),"\n",(0,s.jsxs)(n.h2,{id:"slides-function",children:[(0,s.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"slides"})," function has the following parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"title-slide"}),": Defaults to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"outline-slide"}),": Defaults to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"slide-level"}),": Defaults to ",(0,s.jsx)(n.code,{children:"2"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["You can set these using ",(0,s.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["PS: You can modify the outline title using ",(0,s.jsx)(n.code,{children:"#(s.outline-title = [Outline])"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["And the function of automatically adding ",(0,s.jsx)(n.code,{children:"new-section-slide"})," can be turned off by ",(0,s.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.dewdrop.register(aspect-ratio: "16-9", footer: [Dewdrop])\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/09ddfb40-4f97-4062-8261-23f87690c33e",alt:"image"})}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.dewdrop.register(\n aspect-ratio: "16-9",\n footer: [Dewdrop],\n navigation: "mini-slides",\n // navigation: none,\n)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= Section A\n\n== Subsection A.1\n\n#slide[\n A slide with equation:\n\n $ x_(n+1) = (x_n + a/x_n) / 2 $\n]\n\n== Subsection A.2\n\n#slide[\n A slide without a title but with *important* infos\n]\n\n= Section B\n\n== Subsection B.1\n\n#slide[\n #lorem(80)\n]\n\n#focus-slide[\n Wake up!\n]\n\n== Subsection B.2\n\n#slide[\n We can use `#pause` to #pause display something later.\n\n #pause\n \n Just like this.\n\n #meanwhile\n \n Meanwhile, #pause we can also use `#meanwhile` to #pause display other content synchronously.\n]\n\n// appendix by freezing last-slide-number\n#let s = (s.methods.appendix)(self: s)\n#let (slide, empty-slide) = utils.slides(s)\n\n= Appendix\n\n=== Appendix\n\n#slide[\n Please pay attention to the current slide number.\n]\n'})})]})}function h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>d,a:()=>o});var s=i(7294);const t={},l=s.createContext(t);function o(e){const n=s.useContext(l);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),s.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/73a6f857.98ce2a05.js b/assets/js/73a6f857.98ce2a05.js new file mode 100644 index 000000000..2e49fe041 --- /dev/null +++ b/assets/js/73a6f857.98ce2a05.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9632],{8813:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>r,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>a});var i=t(5893),s=t(1151);const o={sidebar_position:3},r="CeTZ",c={id:"integration/cetz",title:"CeTZ",description:"Touying provides the touying-reducer, which adds pause and meanwhile animations to CeTZ and Fletcher.",source:"@site/versioned_docs/version-0.4.1/integration/cetz.md",sourceDirName:"integration",slug:"/integration/cetz",permalink:"/touying/docs/0.4.1/integration/cetz",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/integration/cetz.md",tags:[],version:"0.4.1",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"MiTeX",permalink:"/touying/docs/0.4.1/integration/mitex"},next:{title:"Fletcher",permalink:"/touying/docs/0.4.1/integration/fletcher"}},d={},a=[{value:"Simple Animation",id:"simple-animation",level:2},{value:"only and uncover",id:"only-and-uncover",level:2}];function l(e){const n={code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"cetz",children:"CeTZ"}),"\n",(0,i.jsxs)(n.p,{children:["Touying provides the ",(0,i.jsx)(n.code,{children:"touying-reducer"}),", which adds ",(0,i.jsx)(n.code,{children:"pause"})," and ",(0,i.jsx)(n.code,{children:"meanwhile"})," animations to CeTZ and Fletcher."]}),"\n",(0,i.jsx)(n.h2,{id:"simple-animation",children:"Simple Animation"}),"\n",(0,i.jsx)(n.p,{children:"An example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/cetz:0.2.2"\n#import "@preview/fletcher:0.4.4" as fletcher: node, edge\n\n// cetz and fletcher bindings for touying\n#let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true))\n#let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide)\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides.with(title-slide: false, outline-slide: false)\n\n// cetz animation\n#slide[\n Cetz in Touying:\n\n #cetz-canvas({\n import cetz.draw: *\n \n rect((0,0), (5,5))\n\n (pause,)\n\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n\n (pause,)\n\n line((0,0), (2.5, 2.5), name: "line")\n })\n]\n\n// fletcher animation\n#slide[\n Fletcher in Touying:\n\n #fletcher-diagram(\n node-stroke: .1em,\n node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),\n spacing: 4em,\n edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),\n node((0,0), `reading`, radius: 2em),\n edge((0,0), (0,0), `read()`, "--|>", bend: 130deg),\n pause,\n edge(`read()`, "-|>"),\n node((1,0), `eof`, radius: 2em),\n pause,\n edge(`close()`, "-|>"),\n node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)),\n edge((0,0), (2,0), `close()`, "-|>", bend: -40deg),\n )\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc",alt:"image"})}),"\n",(0,i.jsx)(n.h2,{id:"only-and-uncover",children:"only and uncover"}),"\n",(0,i.jsxs)(n.p,{children:["In fact, we can also use ",(0,i.jsx)(n.code,{children:"only"})," and ",(0,i.jsx)(n.code,{children:"uncover"})," within CeTZ, but it requires a bit of technique:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#slide(repeat: 3, self => [\n #let (uncover, only) = utils.methods(self)\n\n Cetz in Touying in subslide #self.subslide:\n\n #cetz.canvas({\n import cetz.draw: *\n let self = (self.methods.update-cover)(self: self, hide.with(bounds: true))\n let (uncover,) = utils.methods(self)\n \n rect((0,0), (5,5))\n\n uncover("2-3", {\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n })\n\n only(3, line((0,0), (2.5, 2.5), name: "line"))\n })\n])\n'})})]})}function u(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>r});var i=t(7294);const s={},o=i.createContext(s);function r(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/743177ed.6a02bd92.js b/assets/js/743177ed.6a02bd92.js deleted file mode 100644 index 72dd64260..000000000 --- a/assets/js/743177ed.6a02bd92.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4432],{9230:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>s,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>l});var i=t(5893),o=t(1151);const a={sidebar_position:5},s="Page Layout",r={id:"layout",title:"Page Layout",description:"Basic Concepts",source:"@site/versioned_docs/version-0.4.1/layout.md",sourceDirName:".",slug:"/layout",permalink:"/touying/docs/layout",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/layout.md",tags:[],version:"0.4.1",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Code Style",permalink:"/touying/docs/code-styles"},next:{title:"Global Settings",permalink:"/touying/docs/global-settings"}},d={},l=[{value:"Basic Concepts",id:"basic-concepts",level:2},{value:"Page Management",id:"page-management",level:2},{value:"Application: Adding a Logo",id:"application-adding-a-logo",level:2},{value:"Page Columns",id:"page-columns",level:2}];function c(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"page-layout",children:"Page Layout"}),"\n",(0,i.jsx)(n.h2,{id:"basic-concepts",children:"Basic Concepts"}),"\n",(0,i.jsx)(n.p,{children:"To create stylish slides using Typst, it's essential to understand Typst's page model correctly. If you're not concerned with customizing page styles, you can choose to skip this section. However, it's still recommended to go through it."}),"\n",(0,i.jsx)(n.p,{children:"Let's illustrate Typst's default page model through a specific example."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#let container = rect.with(height: 100%, width: 100%, inset: 0pt)\n#let innerbox = rect.with(stroke: (dash: "dashed"))\n\n#set text(size: 30pt)\n#set page(\n paper: "presentation-16-9",\n header: container[#innerbox[Header]],\n header-ascent: 30%,\n footer: container[#innerbox[Footer]],\n footer-descent: 30%,\n)\n\n#place(top + right)[Margin\u2192]\n#container[\n #container[\n #innerbox[Content]\n ]\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/70d48053-c777-4253-a9ca-ada360b5a987",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:"We need to distinguish the following concepts:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Model:"})," Typst has a model similar to the CSS Box Model, divided into Margin, Padding, and Content. However, padding is not a property of ",(0,i.jsx)(n.code,{children:"set page(..)"})," but is obtained by manually adding ",(0,i.jsx)(n.code,{children:"#pad(..)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Margin:"})," Margins are the edges of the page, divided into top, bottom, left, and right. They are the core of Typst's page model, and all other properties are influenced by margins, especially Header and Footer. Header and Footer are actually located within the Margin."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Header:"})," The Header is the content at the top of the page, divided into container and innerbox. We can observe that the edge of the header container and padding does not align but has some space in between, which is actually ",(0,i.jsx)(n.code,{children:"header-ascent: 30%"}),", where the percentage is relative to the margin-top. Additionally, we notice that the header innerbox is actually located at the bottom left corner of the header container, meaning innerbox defaults to ",(0,i.jsx)(n.code,{children:"#set align(left + bottom)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Footer:"})," The Footer is the content at the bottom of the page, similar to the Header but in the opposite direction."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Place:"})," The ",(0,i.jsx)(n.code,{children:"place"})," function enables absolute positioning relative to the parent container without affecting other elements inside the parent container. It allows specifying ",(0,i.jsx)(n.code,{children:"alignment"}),", ",(0,i.jsx)(n.code,{children:"dx"}),", and ",(0,i.jsx)(n.code,{children:"dy"}),", making it suitable for placing decorative elements like logos."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Therefore, to apply Typst to create slides, we only need to set:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#set page(\n margin: (x: 4em, y: 2em),\n header: align(top)[Header],\n footer: align(bottom)[Footer],\n header-ascent: 0em,\n footer-descent: 0em,\n)\n"})}),"\n",(0,i.jsx)(n.p,{children:"However, we still need to address how the header occupies the entire page width. Here, we use negative padding to achieve this. For instance:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#let container = rect.with(stroke: (dash: "dashed"), height: 100%, width: 100%, inset: 0pt)\n#let innerbox = rect.with(fill: rgb("#d0d0d0"))\n#let margin = (x: 4em, y: 2em)\n\n// negative padding for header and footer\n#let negative-padding = pad.with(x: -margin.x, y: 0em)\n\n#set text(size: 30pt)\n#set page(\n paper: "presentation-16-9",\n margin: margin,\n header: negative-padding[#container[#align(top)[#innerbox(width: 100%)[Header]]]],\n header-ascent: 0em,\n footer: negative-padding[#container[#align(bottom)[#innerbox(width: 100%)[Footer]]]],\n footer-descent: 0em,\n)\n\n#place(top + right)[\u2191Margin\u2192]\n#container[\n #container[\n #innerbox[Content]\n ]\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/d74896f4-90e7-4b36-a5a9-9c44307eb192",alt:"image"})}),"\n",(0,i.jsx)(n.h2,{id:"page-management",children:"Page Management"}),"\n",(0,i.jsxs)(n.p,{children:["Since modifying page parameters using the ",(0,i.jsx)(n.code,{children:"set page(..)"})," command in Typst creates a new page instead of modifying the current one, Touying chooses to maintain a ",(0,i.jsx)(n.code,{children:"s.page-args"})," member variable and a ",(0,i.jsx)(n.code,{children:"s.padding"})," member variable. These parameters are only applied when Touying creates a new slide, so users only need to focus on ",(0,i.jsx)(n.code,{children:"s.page-args"})," and ",(0,i.jsx)(n.code,{children:"s.padding"}),"."]}),"\n",(0,i.jsx)(n.p,{children:"For example, the previous example can be modified as follows:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#(s.page-args += (\n margin: (x: 4em, y: 2em),\n header: align(top)[Header],\n footer: align(bottom)[Footer],\n header-ascent: 0em,\n footer-descent: 0em,\n))\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Touying automatically detects the value of ",(0,i.jsx)(n.code,{children:"margin.x"})," and adds negative padding to the header if ",(0,i.jsx)(n.code,{children:"self.full-header == true"}),"."]}),"\n",(0,i.jsx)(n.p,{children:"Similarly, if you're unsatisfied with the header or footer style of a particular theme, you can change it using:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#(s.page-args.footer = [Custom Footer])\n"})}),"\n",(0,i.jsxs)(n.p,{children:["However, it's essential to note that if you change page parameters in this way, you need to place it before ",(0,i.jsx)(n.code,{children:"#let (slide, empty-slide) = utils.slides(s)"}),", or you'll have to call ",(0,i.jsx)(n.code,{children:"#let (slide, empty-slide) = utils.slides(s)"})," again."]}),"\n",(0,i.jsx)(n.admonition,{title:"Warning",type:"warning",children:(0,i.jsxs)(n.p,{children:["Therefore, you should not use the ",(0,i.jsx)(n.code,{children:"set page(..)"})," command directly but instead modify the ",(0,i.jsx)(n.code,{children:"s.page-args"})," member variable internally."]})}),"\n",(0,i.jsxs)(n.p,{children:["This approach also allows us to query the current page parameters in real-time using ",(0,i.jsx)(n.code,{children:"s.page-args"}),", which is useful for functions that need to obtain margins or the current page's background color, such as ",(0,i.jsx)(n.code,{children:"transparent-cover"}),". This is partially equivalent to context get rule and is actually more convenient to use."]}),"\n",(0,i.jsx)(n.h2,{id:"application-adding-a-logo",children:"Application: Adding a Logo"}),"\n",(0,i.jsxs)(n.p,{children:["Adding a logo to slides is a very common but also a very versatile requirement. The difficulty lies in the fact that the required size and position of the logo often vary from person to person. Therefore, most of Touying's themes do not include configuration options for logos. But with the concepts of page layout mentioned in this section, we know that we can use the ",(0,i.jsx)(n.code,{children:"place"})," function in the header or footer to place a logo image."]}),"\n",(0,i.jsx)(n.p,{children:"For example, suppose we decide to add the GitHub icon to the metropolis theme. We can implement it like this:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/octique:0.1.0": *\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9")\n#(s.page-args.header = self => {\n // display the original header\n utils.call-or-display(self, s.page-args.header)\n // place logo at the top-right\n place(top + right, dx: -0.5em, dy: 0.3em)[\n #octique("mark-github", color: rgb("#fafafa"), width: 1.5em, height: 1.5em)\n ]\n})\n#let (init, slide) = utils.methods(s)\n#show: init\n\n#slide(title: [Title])[\n Logo example.\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/055d77e7-5087-4248-b969-d8ef9d50c54b",alt:"image"})}),"\n",(0,i.jsxs)(n.p,{children:["Here, ",(0,i.jsx)(n.code,{children:"utils.call-or-display(self, body)"})," can be used to display ",(0,i.jsx)(n.code,{children:"body"})," as content or a callback function in the form ",(0,i.jsx)(n.code,{children:"self => content"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"page-columns",children:"Page Columns"}),"\n",(0,i.jsxs)(n.p,{children:["If you need to divide the page into two or three columns, you can use the ",(0,i.jsx)(n.code,{children:"compose"})," feature provided by the default ",(0,i.jsx)(n.code,{children:"slide"})," function in Touying. The simplest example is as follows:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide[\n First column.\n][\n Second column.\n]\n"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/a39f88a2-f1ba-4420-8f78-6a0fc644704e",alt:"image"})}),"\n",(0,i.jsxs)(n.p,{children:["If you need to change the way columns are composed, you can modify the ",(0,i.jsx)(n.code,{children:"composer"})," parameter of ",(0,i.jsx)(n.code,{children:"slide"}),". The default parameter is ",(0,i.jsx)(n.code,{children:"utils.side-by-side.with(columns: auto, gutter: 1em)"}),". If we want the left column to occupy the remaining width, we can use"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide(composer: (1fr, auto))[\n First column.\n][\n Second column.\n]\n"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/aa84192a-4082-495d-9773-b06df32ab8dc",alt:"image"})})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>s});var i=t(7294);const o={},a=i.createContext(o);function s(e){const n=i.useContext(a);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),i.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/743177ed.ae7f38c2.js b/assets/js/743177ed.ae7f38c2.js new file mode 100644 index 000000000..6449e4c2a --- /dev/null +++ b/assets/js/743177ed.ae7f38c2.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4432],{9230:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>s,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>l});var i=t(5893),o=t(1151);const a={sidebar_position:5},s="Page Layout",r={id:"layout",title:"Page Layout",description:"Basic Concepts",source:"@site/versioned_docs/version-0.4.1/layout.md",sourceDirName:".",slug:"/layout",permalink:"/touying/docs/0.4.1/layout",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/layout.md",tags:[],version:"0.4.1",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Code Style",permalink:"/touying/docs/0.4.1/code-styles"},next:{title:"Global Settings",permalink:"/touying/docs/0.4.1/global-settings"}},d={},l=[{value:"Basic Concepts",id:"basic-concepts",level:2},{value:"Page Management",id:"page-management",level:2},{value:"Application: Adding a Logo",id:"application-adding-a-logo",level:2},{value:"Page Columns",id:"page-columns",level:2}];function c(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"page-layout",children:"Page Layout"}),"\n",(0,i.jsx)(n.h2,{id:"basic-concepts",children:"Basic Concepts"}),"\n",(0,i.jsx)(n.p,{children:"To create stylish slides using Typst, it's essential to understand Typst's page model correctly. If you're not concerned with customizing page styles, you can choose to skip this section. However, it's still recommended to go through it."}),"\n",(0,i.jsx)(n.p,{children:"Let's illustrate Typst's default page model through a specific example."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#let container = rect.with(height: 100%, width: 100%, inset: 0pt)\n#let innerbox = rect.with(stroke: (dash: "dashed"))\n\n#set text(size: 30pt)\n#set page(\n paper: "presentation-16-9",\n header: container[#innerbox[Header]],\n header-ascent: 30%,\n footer: container[#innerbox[Footer]],\n footer-descent: 30%,\n)\n\n#place(top + right)[Margin\u2192]\n#container[\n #container[\n #innerbox[Content]\n ]\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/70d48053-c777-4253-a9ca-ada360b5a987",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:"We need to distinguish the following concepts:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Model:"})," Typst has a model similar to the CSS Box Model, divided into Margin, Padding, and Content. However, padding is not a property of ",(0,i.jsx)(n.code,{children:"set page(..)"})," but is obtained by manually adding ",(0,i.jsx)(n.code,{children:"#pad(..)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Margin:"})," Margins are the edges of the page, divided into top, bottom, left, and right. They are the core of Typst's page model, and all other properties are influenced by margins, especially Header and Footer. Header and Footer are actually located within the Margin."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Header:"})," The Header is the content at the top of the page, divided into container and innerbox. We can observe that the edge of the header container and padding does not align but has some space in between, which is actually ",(0,i.jsx)(n.code,{children:"header-ascent: 30%"}),", where the percentage is relative to the margin-top. Additionally, we notice that the header innerbox is actually located at the bottom left corner of the header container, meaning innerbox defaults to ",(0,i.jsx)(n.code,{children:"#set align(left + bottom)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Footer:"})," The Footer is the content at the bottom of the page, similar to the Header but in the opposite direction."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Place:"})," The ",(0,i.jsx)(n.code,{children:"place"})," function enables absolute positioning relative to the parent container without affecting other elements inside the parent container. It allows specifying ",(0,i.jsx)(n.code,{children:"alignment"}),", ",(0,i.jsx)(n.code,{children:"dx"}),", and ",(0,i.jsx)(n.code,{children:"dy"}),", making it suitable for placing decorative elements like logos."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Therefore, to apply Typst to create slides, we only need to set:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#set page(\n margin: (x: 4em, y: 2em),\n header: align(top)[Header],\n footer: align(bottom)[Footer],\n header-ascent: 0em,\n footer-descent: 0em,\n)\n"})}),"\n",(0,i.jsx)(n.p,{children:"However, we still need to address how the header occupies the entire page width. Here, we use negative padding to achieve this. For instance:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#let container = rect.with(stroke: (dash: "dashed"), height: 100%, width: 100%, inset: 0pt)\n#let innerbox = rect.with(fill: rgb("#d0d0d0"))\n#let margin = (x: 4em, y: 2em)\n\n// negative padding for header and footer\n#let negative-padding = pad.with(x: -margin.x, y: 0em)\n\n#set text(size: 30pt)\n#set page(\n paper: "presentation-16-9",\n margin: margin,\n header: negative-padding[#container[#align(top)[#innerbox(width: 100%)[Header]]]],\n header-ascent: 0em,\n footer: negative-padding[#container[#align(bottom)[#innerbox(width: 100%)[Footer]]]],\n footer-descent: 0em,\n)\n\n#place(top + right)[\u2191Margin\u2192]\n#container[\n #container[\n #innerbox[Content]\n ]\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/d74896f4-90e7-4b36-a5a9-9c44307eb192",alt:"image"})}),"\n",(0,i.jsx)(n.h2,{id:"page-management",children:"Page Management"}),"\n",(0,i.jsxs)(n.p,{children:["Since modifying page parameters using the ",(0,i.jsx)(n.code,{children:"set page(..)"})," command in Typst creates a new page instead of modifying the current one, Touying chooses to maintain a ",(0,i.jsx)(n.code,{children:"s.page-args"})," member variable and a ",(0,i.jsx)(n.code,{children:"s.padding"})," member variable. These parameters are only applied when Touying creates a new slide, so users only need to focus on ",(0,i.jsx)(n.code,{children:"s.page-args"})," and ",(0,i.jsx)(n.code,{children:"s.padding"}),"."]}),"\n",(0,i.jsx)(n.p,{children:"For example, the previous example can be modified as follows:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#(s.page-args += (\n margin: (x: 4em, y: 2em),\n header: align(top)[Header],\n footer: align(bottom)[Footer],\n header-ascent: 0em,\n footer-descent: 0em,\n))\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Touying automatically detects the value of ",(0,i.jsx)(n.code,{children:"margin.x"})," and adds negative padding to the header if ",(0,i.jsx)(n.code,{children:"self.full-header == true"}),"."]}),"\n",(0,i.jsx)(n.p,{children:"Similarly, if you're unsatisfied with the header or footer style of a particular theme, you can change it using:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#(s.page-args.footer = [Custom Footer])\n"})}),"\n",(0,i.jsxs)(n.p,{children:["However, it's essential to note that if you change page parameters in this way, you need to place it before ",(0,i.jsx)(n.code,{children:"#let (slide, empty-slide) = utils.slides(s)"}),", or you'll have to call ",(0,i.jsx)(n.code,{children:"#let (slide, empty-slide) = utils.slides(s)"})," again."]}),"\n",(0,i.jsx)(n.admonition,{title:"Warning",type:"warning",children:(0,i.jsxs)(n.p,{children:["Therefore, you should not use the ",(0,i.jsx)(n.code,{children:"set page(..)"})," command directly but instead modify the ",(0,i.jsx)(n.code,{children:"s.page-args"})," member variable internally."]})}),"\n",(0,i.jsxs)(n.p,{children:["This approach also allows us to query the current page parameters in real-time using ",(0,i.jsx)(n.code,{children:"s.page-args"}),", which is useful for functions that need to obtain margins or the current page's background color, such as ",(0,i.jsx)(n.code,{children:"transparent-cover"}),". This is partially equivalent to context get rule and is actually more convenient to use."]}),"\n",(0,i.jsx)(n.h2,{id:"application-adding-a-logo",children:"Application: Adding a Logo"}),"\n",(0,i.jsxs)(n.p,{children:["Adding a logo to slides is a very common but also a very versatile requirement. The difficulty lies in the fact that the required size and position of the logo often vary from person to person. Therefore, most of Touying's themes do not include configuration options for logos. But with the concepts of page layout mentioned in this section, we know that we can use the ",(0,i.jsx)(n.code,{children:"place"})," function in the header or footer to place a logo image."]}),"\n",(0,i.jsx)(n.p,{children:"For example, suppose we decide to add the GitHub icon to the metropolis theme. We can implement it like this:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/octique:0.1.0": *\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9")\n#(s.page-args.header = self => {\n // display the original header\n utils.call-or-display(self, s.page-args.header)\n // place logo at the top-right\n place(top + right, dx: -0.5em, dy: 0.3em)[\n #octique("mark-github", color: rgb("#fafafa"), width: 1.5em, height: 1.5em)\n ]\n})\n#let (init, slide) = utils.methods(s)\n#show: init\n\n#slide(title: [Title])[\n Logo example.\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/055d77e7-5087-4248-b969-d8ef9d50c54b",alt:"image"})}),"\n",(0,i.jsxs)(n.p,{children:["Here, ",(0,i.jsx)(n.code,{children:"utils.call-or-display(self, body)"})," can be used to display ",(0,i.jsx)(n.code,{children:"body"})," as content or a callback function in the form ",(0,i.jsx)(n.code,{children:"self => content"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"page-columns",children:"Page Columns"}),"\n",(0,i.jsxs)(n.p,{children:["If you need to divide the page into two or three columns, you can use the ",(0,i.jsx)(n.code,{children:"compose"})," feature provided by the default ",(0,i.jsx)(n.code,{children:"slide"})," function in Touying. The simplest example is as follows:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide[\n First column.\n][\n Second column.\n]\n"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/a39f88a2-f1ba-4420-8f78-6a0fc644704e",alt:"image"})}),"\n",(0,i.jsxs)(n.p,{children:["If you need to change the way columns are composed, you can modify the ",(0,i.jsx)(n.code,{children:"composer"})," parameter of ",(0,i.jsx)(n.code,{children:"slide"}),". The default parameter is ",(0,i.jsx)(n.code,{children:"utils.side-by-side.with(columns: auto, gutter: 1em)"}),". If we want the left column to occupy the remaining width, we can use"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide(composer: (1fr, auto))[\n First column.\n][\n Second column.\n]\n"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/aa84192a-4082-495d-9773-b06df32ab8dc",alt:"image"})})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>s});var i=t(7294);const o={},a=i.createContext(o);function s(e){const n=i.useContext(a);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),i.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/76911421.20cad92a.js b/assets/js/76911421.20cad92a.js new file mode 100644 index 000000000..269ac5b21 --- /dev/null +++ b/assets/js/76911421.20cad92a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7577],{7441:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>s,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});var o=t(5893),c=t(1151);const i={sidebar_position:4},s="Cover Function",r={id:"dynamic/cover",title:"Cover Function",description:"As you already know, both uncover and #pause use the cover function to conceal content that is not visible. So, what exactly is the cover function here?",source:"@site/versioned_docs/version-0.4.1/dynamic/cover.md",sourceDirName:"dynamic",slug:"/dynamic/cover",permalink:"/touying/docs/0.4.1/dynamic/cover",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/dynamic/cover.md",tags:[],version:"0.4.1",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Math Equation Animations",permalink:"/touying/docs/0.4.1/dynamic/equation"},next:{title:"Other Animations",permalink:"/touying/docs/0.4.1/dynamic/other"}},a={},d=[{value:"Default Cover Function: hide",id:"default-cover-function-hide",level:2},{value:"Updating the Cover Function",id:"updating-the-cover-function",level:2},{value:"hack: handle enum and list",id:"hack-handle-enum-and-list",level:2},{value:"Semi-Transparent Cover Function",id:"semi-transparent-cover-function",level:2}];function l(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,c.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{id:"cover-function",children:"Cover Function"}),"\n",(0,o.jsxs)(n.p,{children:["As you already know, both ",(0,o.jsx)(n.code,{children:"uncover"})," and ",(0,o.jsx)(n.code,{children:"#pause"})," use the ",(0,o.jsx)(n.code,{children:"cover"})," function to conceal content that is not visible. So, what exactly is the ",(0,o.jsx)(n.code,{children:"cover"})," function here?"]}),"\n",(0,o.jsxs)(n.h2,{id:"default-cover-function-hide",children:["Default Cover Function: ",(0,o.jsx)(n.code,{children:"hide"})]}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"cover"})," function is a method stored in ",(0,o.jsx)(n.code,{children:"s.methods.cover"}),", which is later used by ",(0,o.jsx)(n.code,{children:"uncover"})," and ",(0,o.jsx)(n.code,{children:"#pause"}),"."]}),"\n",(0,o.jsxs)(n.p,{children:["The default ",(0,o.jsx)(n.code,{children:"cover"})," function is the ",(0,o.jsx)(n.a,{href:"https://typst.app/docs/reference/layout/hide/",children:"hide"})," function. This function makes the internal content invisible without affecting the layout."]}),"\n",(0,o.jsx)(n.h2,{id:"updating-the-cover-function",children:"Updating the Cover Function"}),"\n",(0,o.jsxs)(n.p,{children:["In some cases, you might want to use your own ",(0,o.jsx)(n.code,{children:"cover"})," function. In that case, you can set your own ",(0,o.jsx)(n.code,{children:"cover"})," function using:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-typst",children:"let s = (s.methods.update-cover)(self: s, is-method: true, cover-fn)\n"})}),"\n",(0,o.jsxs)(n.p,{children:["Here, if you set ",(0,o.jsx)(n.code,{children:"is-method: false"}),", Touying will wrap ",(0,o.jsx)(n.code,{children:"cover-fn"})," into a method for you."]}),"\n",(0,o.jsx)(n.h2,{id:"hack-handle-enum-and-list",children:"hack: handle enum and list"}),"\n",(0,o.jsxs)(n.p,{children:["You will find that the existing cover function cannot hide the mark of enum and list, refer to ",(0,o.jsx)(n.a,{href:"https://github.com/touying-typ/touying/issues/10",children:"here"}),", so you can hack:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-typst",children:"#let s = (s.methods.update-cover)(self: s, body => box(scale(x: 0%, body)))\n"})}),"\n",(0,o.jsx)(n.h2,{id:"semi-transparent-cover-function",children:"Semi-Transparent Cover Function"}),"\n",(0,o.jsx)(n.p,{children:"Touying supports a semi-transparent cover function, which can be enabled by adding:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-typst",children:"#let s = (s.methods.enable-transparent-cover)(self: s)\n"})}),"\n",(0,o.jsxs)(n.p,{children:["You can adjust the transparency through the ",(0,o.jsx)(n.code,{children:"alpha: .."})," parameter."]}),"\n",(0,o.jsx)(n.admonition,{title:"Warning",type:"warning",children:(0,o.jsxs)(n.p,{children:["Note that the ",(0,o.jsx)(n.code,{children:"transparent-cover"})," here does not preserve text layout like ",(0,o.jsx)(n.code,{children:"hide"})," does because it adds an extra layer of ",(0,o.jsx)(n.code,{children:"box"}),", which may disrupt the original structure of the page."]})}),"\n",(0,o.jsxs)(n.admonition,{title:"Internals",type:"tip",children:[(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"enable-transparent-cover"})," method is defined as:"]}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-typst",children:"#let s.methods.enable-transparent-cover = (\n self: none,\n constructor: rgb,\n alpha: 85%,\n) => {\n self.methods.cover = (self: none, body) => {\n utils.cover-with-rect(\n fill: utils.update-alpha(\n constructor: constructor,\n self.page-args.fill,\n alpha,\n ),\n body\n )\n }\n self\n}\n"})}),(0,o.jsxs)(n.p,{children:["It creates a semi-transparent rectangular mask with the same color as the background to simulate the effect of transparent content. Here, ",(0,o.jsx)(n.code,{children:"constructor: rgb"})," and ",(0,o.jsx)(n.code,{children:"alpha: 85%"})," indicate the background color's construction function and transparency level, respectively."]})]})]})}function h(e={}){const{wrapper:n}={...(0,c.a)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>s});var o=t(7294);const c={},i=o.createContext(c);function s(e){const n=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(c):e.components||c:s(e.components),o.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/77a6cbd2.388e43b2.js b/assets/js/77a6cbd2.388e43b2.js new file mode 100644 index 000000000..42d8792a5 --- /dev/null +++ b/assets/js/77a6cbd2.388e43b2.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1537],{3350:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>a});var s=i(5893),t=i(1151);const l={sidebar_position:5},o="Aqua Theme",d={id:"themes/aqua",title:"Aqua Theme",description:"image",source:"@site/versioned_docs/version-0.4.1/themes/aqua.md",sourceDirName:"themes",slug:"/themes/aqua",permalink:"/touying/docs/0.4.1/themes/aqua",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/themes/aqua.md",tags:[],version:"0.4.1",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"University Theme",permalink:"/touying/docs/0.4.1/themes/university"},next:{title:"Creating Your Own Theme",permalink:"/touying/docs/0.4.1/build-your-own-theme"}},r={},a=[{value:"Initialization",id:"initialization",level:2},{value:"Color Themes",id:"color-themes",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",hr:"hr",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"aqua-theme",children:"Aqua Theme"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/5f9b3c99-a22a-4f3d-a266-93dd75997593",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["This theme is created by ",(0,s.jsx)(n.a,{href:"https://github.com/pride7",children:"@pride7"}),", featuring beautiful backgrounds made with Typst's visualization capabilities."]}),"\n",(0,s.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,s.jsx)(n.p,{children:"You can initialize it with the following code:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.aqua.register(aspect-ratio: "16-9", lang: "en")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, outline-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,s.jsxs)(n.p,{children:["Where ",(0,s.jsx)(n.code,{children:"register"})," takes parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"aspect-ratio"}),': The aspect ratio of slides, either "16-9" or "4-3", default is "16-9".']}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer"}),": Content shown on the right side of the footer, default is ",(0,s.jsx)(n.code,{children:"states.slide-counter.display()"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"lang"}),": Language configuration, currently supports ",(0,s.jsx)(n.code,{children:'"en"'})," and ",(0,s.jsx)(n.code,{children:'"zh"'}),", default is ",(0,s.jsx)(n.code,{children:'"en"'}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Aqua theme also provides an ",(0,s.jsx)(n.code,{children:"#alert[..]"})," function, which you can utilize with ",(0,s.jsx)(n.code,{children:"#show strong: alert"})," using ",(0,s.jsx)(n.code,{children:"*alert text*"})," syntax."]}),"\n",(0,s.jsx)(n.h2,{id:"color-themes",children:"Color Themes"}),"\n",(0,s.jsx)(n.p,{children:"Aqua by default uses:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.colors)(\n self: s,\n primary: rgb("#003F88"),\n primary-light: rgb("#2159A5"),\n primary-lightest: rgb("#F2F4F8"),\n'})}),"\n",(0,s.jsxs)(n.p,{children:["color themes, which you can modify by ",(0,s.jsx)(n.code,{children:"#let s = (s.methods.colors)(self: s, ..)"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,s.jsx)(n.p,{children:"Aqua theme offers a series of custom slide functions:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#title-slide(..args)\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"title-slide"})," will read information from ",(0,s.jsx)(n.code,{children:"self.info"})," for display."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#let outline-slide(self: none, enum-args: (:), leading: 50pt)\n"})}),"\n",(0,s.jsx)(n.p,{children:"Display an outline slide."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // Aqua theme\n title: auto,\n)[\n ...\n]\n"})}),"\n",(0,s.jsxs)(n.p,{children:["A default ordinary slide function with title and footer, where ",(0,s.jsx)(n.code,{children:"title"})," defaults to the current section title."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#focus-slide[\n ...\n]\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Used to draw the audience's attention. The background color is ",(0,s.jsx)(n.code,{children:"self.colors.primary"}),"."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#new-section-slide(title)\n"})}),"\n",(0,s.jsx)(n.p,{children:"Start a new section with the given title."}),"\n",(0,s.jsxs)(n.h2,{id:"slides-function",children:[(0,s.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"slides"})," function has parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"title-slide"}),": Default is ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"outline-slide"}),": Default is ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"slide-level"}),": Default is ",(0,s.jsx)(n.code,{children:"1"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["They can be set via ",(0,s.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["PS: The outline title can be modified via ",(0,s.jsx)(n.code,{children:"#(s.outline-title = [Outline])"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["Additionally, you can disable the automatic inclusion of ",(0,s.jsx)(n.code,{children:"new-section-slide"})," functionality by ",(0,s.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.aqua.register(aspect-ratio: "16-9", lang: "en")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, outline-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/eea4df8d-d9fd-43ac-aaf7-bb459864a9ac",alt:"image"})}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.aqua.register(aspect-ratio: "16-9", lang: "en")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, outline-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= The Section\n\n== Slide Title\n\n#slide[\n #lorem(40)\n]\n\n#focus-slide[\n Another variant with primary color in background...\n]\n\n== Summary\n\n#align(center + horizon)[\n #set text(size: 3em, weight: "bold", s.colors.primary)\n THANKS FOR ALL\n]\n'})})]})}function h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>d,a:()=>o});var s=i(7294);const t={},l=s.createContext(t);function o(e){const n=s.useContext(l);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),s.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/78b57648.ec12056f.js b/assets/js/78b57648.ec12056f.js new file mode 100644 index 000000000..a368f7bca --- /dev/null +++ b/assets/js/78b57648.ec12056f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4952],{9508:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>a,frontMatter:()=>r,metadata:()=>d,toc:()=>l});var s=n(5893),i=n(1151);const r={sidebar_position:3},o="Typst Preview",d={id:"external/typst-preview",title:"Typst Preview",description:"The Typst Preview extension for VS Code provides an excellent slide mode, allowing us to preview and present slides.",source:"@site/versioned_docs/version-0.4.1/external/typst-preview.md",sourceDirName:"external",slug:"/external/typst-preview",permalink:"/touying/docs/0.4.1/external/typst-preview",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/external/typst-preview.md",tags:[],version:"0.4.1",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Pympress",permalink:"/touying/docs/0.4.1/external/pympress"}},c={},l=[];function p(e){const t={code:"code",h1:"h1",p:"p",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"typst-preview",children:"Typst Preview"}),"\n",(0,s.jsx)(t.p,{children:"The Typst Preview extension for VS Code provides an excellent slide mode, allowing us to preview and present slides."}),"\n",(0,s.jsxs)(t.p,{children:["Press ",(0,s.jsx)(t.code,{children:"Ctrl/Cmd + Shift + P"})," and type ",(0,s.jsx)(t.code,{children:"Typst Preview: Preview current file in slide mode"})," to open the preview in slide mode."]}),"\n",(0,s.jsxs)(t.p,{children:["Press ",(0,s.jsx)(t.code,{children:"Ctrl/Cmd + Shift + P"})," and type ",(0,s.jsx)(t.code,{children:"Typst Preview: Preview current file in browser and slide mode"})," to open the slide mode in the browser."]}),"\n",(0,s.jsxs)(t.p,{children:["Now, you can press keys like ",(0,s.jsx)(t.code,{children:"F11"})," to enter fullscreen mode in the browser, making it suitable for slide presentations."]}),"\n",(0,s.jsx)(t.p,{children:"Since Typst Preview is based on SVG, it can play GIF animations, which is very helpful for dynamic slides."})]})}function a(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>d,a:()=>o});var s=n(7294);const i={},r=s.createContext(i);function o(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/7b7fae98.05f02add.js b/assets/js/7b7fae98.05f02add.js new file mode 100644 index 000000000..fa1a83a2f --- /dev/null +++ b/assets/js/7b7fae98.05f02add.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8861],{4700:e=>{e.exports=JSON.parse('{"title":"External Tools","description":"Integrate external tools with Touying.","slug":"/category/external-tools","permalink":"/touying/docs/0.4.1/category/external-tools","navigation":{"previous":{"title":"Changelog","permalink":"/touying/docs/0.4.1/changelog"},"next":{"title":"Pdfpc","permalink":"/touying/docs/0.4.1/external/pdfpc"}}}')}}]); \ No newline at end of file diff --git a/assets/js/7bec2371.bcab5d58.js b/assets/js/7bec2371.bcab5d58.js new file mode 100644 index 000000000..6e5c06ee9 --- /dev/null +++ b/assets/js/7bec2371.bcab5d58.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8250],{8509:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>o,contentTitle:()=>t,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>c});var i=s(5893),r=s(1151);const l={sidebar_position:14},t="Changelog",d={id:"changelog",title:"Changelog",description:"v0.4.2",source:"@site/versioned_docs/version-0.4.2/changelog.md",sourceDirName:".",slug:"/changelog",permalink:"/touying/docs/changelog",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/changelog.md",tags:[],version:"0.4.2",sidebarPosition:14,frontMatter:{sidebar_position:14},sidebar:"tutorialSidebar",previous:{title:"Fit to Height / Width",permalink:"/touying/docs/utilities/fit-to"},next:{title:"External Tools",permalink:"/touying/docs/category/external-tools"}},o={},c=[{value:"v0.4.2",id:"v042",level:2},{value:"v0.4.1",id:"v041",level:2},{value:"Features",id:"features",level:3},{value:"Fixes",id:"fixes",level:3},{value:"Miscellaneous Improvements",id:"miscellaneous-improvements",level:3},{value:"v0.4.0",id:"v040",level:2},{value:"Features",id:"features-1",level:3},{value:"Fixes",id:"fixes-1",level:3},{value:"Breaking changes",id:"breaking-changes",level:2},{value:"v0.3.3",id:"v033",level:2},{value:"v0.3.2",id:"v032",level:2},{value:"v0.3.1",id:"v031",level:2},{value:"v0.3.0",id:"v030",level:2},{value:"Features",id:"features-2",level:3},{value:"Documentation",id:"documentation",level:3},{value:"Refactor",id:"refactor",level:3},{value:"Fix",id:"fix",level:3},{value:"v0.2.1",id:"v021",level:2},{value:"Features",id:"features-3",level:3},{value:"Fix",id:"fix-1",level:3},{value:"v0.2.0",id:"v020",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"changelog",children:"Changelog"}),"\n",(0,i.jsx)(n.h2,{id:"v042",children:"v0.4.2"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["theme(metropolis): decoupled text color with ",(0,i.jsx)(n.code,{children:"neutral-dark"})," (Breaking change)"]}),"\n",(0,i.jsx)(n.li,{children:"feat: add mark-style uncover, only and alternatives"}),"\n",(0,i.jsx)(n.li,{children:"feat: add warning for styled block for slides"}),"\n",(0,i.jsx)(n.li,{children:"feat: add warning for touying-temporary-mark"}),"\n",(0,i.jsx)(n.li,{children:"feat: add markup-text for speaker-note"}),"\n",(0,i.jsx)(n.li,{children:"fix: fix bug of slides"}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v041",children:"v0.4.1"}),"\n",(0,i.jsx)(n.h3,{id:"features",children:"Features"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"feat: support builtin outline and bookmark"}),"\n",(0,i.jsx)(n.li,{children:"feat: support speaker note for dual-screen"}),"\n",(0,i.jsx)(n.li,{children:"feat: add touying-mitex function"}),"\n",(0,i.jsxs)(n.li,{children:["feat: touying offers ",(0,i.jsx)(n.a,{href:"https://github.com/touying-typ/touying/wiki",children:"a gallery page"})," via wiki"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"fixes",children:"Fixes"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"fix: add outline-slide for dewdrop theme"}),"\n",(0,i.jsx)(n.li,{children:'fix: fix regression of default value "auto" for repeat'}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"miscellaneous-improvements",children:"Miscellaneous Improvements"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["feat: add list support for ",(0,i.jsx)(n.code,{children:"touying-outline"})," function"]}),"\n",(0,i.jsx)(n.li,{children:"feat: add auto-reset-footnote"}),"\n",(0,i.jsxs)(n.li,{children:["feat: add ",(0,i.jsx)(n.code,{children:"freeze-in-empty-page"})," for better page counter"]}),"\n",(0,i.jsxs)(n.li,{children:["feat: add ",(0,i.jsx)(n.code,{children:"..args"})," for register method to capture unused arguments"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v040",children:"v0.4.0"}),"\n",(0,i.jsx)(n.h3,{id:"features-1",children:"Features"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," support ",(0,i.jsx)(n.code,{children:"#footnote[]"})," for all themes."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," access subslide and repeat in footer and header by ",(0,i.jsx)(n.code,{children:"self => self.subslide"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," support numbered theorem environments by ",(0,i.jsx)(n.a,{href:"https://typst.app/universe/package/ctheorems",children:"ctheorems"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," support numbering for sections and subsections."]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"fixes-1",children:"Fixes"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"fix:"})," make nested includes work correctly."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"fix:"})," disable multi-page slides from creating the same section multiple times."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"breaking-changes",children:"Breaking changes"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"refactor:"})," remove ",(0,i.jsx)(n.code,{children:"self.padding"})," and add ",(0,i.jsx)(n.code,{children:"self.full-header"})," ",(0,i.jsx)(n.code,{children:"self.full-footer"})," config."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v033",children:"v0.3.3"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"template:"})," move template to ",(0,i.jsx)(n.code,{children:"touying-aqua"})," package, make Touying searchable in ",(0,i.jsx)(n.a,{href:"https://typst.app/universe/search?kind=packages",children:"Typst Universe Packages"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"themes:"})," fix bugs in university and dewdrop theme"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," make set-show rule work without ",(0,i.jsx)(n.code,{children:"setting"})," parameter"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," make ",(0,i.jsx)(n.code,{children:"composer"})," parameter more simpler"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," add ",(0,i.jsx)(n.code,{children:"empty-slide"})," function"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v032",children:"v0.3.2"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"fix critical bug:"})," fix ",(0,i.jsx)(n.code,{children:"is-sequence"})," function, make ",(0,i.jsx)(n.code,{children:"grid"})," and ",(0,i.jsx)(n.code,{children:"table"})," work correctly in touying"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"theme:"})," add aqua theme, thanks for pride7"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"theme:"})," make university theme more configurable"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"refactor:"})," don't export variable ",(0,i.jsx)(n.code,{children:"s"})," by default anymore, it will be extracted by ",(0,i.jsx)(n.code,{children:"register"})," function (",(0,i.jsx)(n.strong,{children:"Breaking Change"}),")"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"meta:"})," add ",(0,i.jsx)(n.code,{children:"categories"})," and ",(0,i.jsx)(n.code,{children:"template"})," config to ",(0,i.jsx)(n.code,{children:"typst.toml"})," for Typst 0.11"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v031",children:"v0.3.1"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"fix some typos"}),"\n",(0,i.jsx)(n.li,{children:"fix slide-level bug"}),"\n",(0,i.jsx)(n.li,{children:"fix bug of pdfpc label"}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v030",children:"v0.3.0"}),"\n",(0,i.jsx)(n.h3,{id:"features-2",children:"Features"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"better show-slides mode."}),"\n",(0,i.jsx)(n.li,{children:"support align and pad."}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"documentation",children:"Documentation"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Add more detailed documentation."}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"refactor",children:"Refactor"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"simplify theme."}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"fix",children:"Fix"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"fix many bugs."}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v021",children:"v0.2.1"}),"\n",(0,i.jsx)(n.h3,{id:"features-3",children:"Features"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Touying-reducer"}),": support cetz and fletcher animation"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"university theme"}),": add university theme"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"fix-1",children:"Fix"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"fix footer progress in metropolis theme"}),"\n",(0,i.jsx)(n.li,{children:"fix some bugs in simple and dewdrop themes"}),"\n",(0,i.jsx)(n.li,{children:"fix bug that outline does not display more than 4 sections"}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v020",children:"v0.2.0"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Object-oriented programming:"})," Singleton ",(0,i.jsx)(n.code,{children:"s"}),", binding methods ",(0,i.jsx)(n.code,{children:"utils.methods(s)"})," and ",(0,i.jsx)(n.code,{children:"(self: obj, ..) => {..}"})," methods."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Page arguments management:"})," Instead of using ",(0,i.jsx)(n.code,{children:"#set page(..)"}),", you should use ",(0,i.jsx)(n.code,{children:"self.page-args"})," to retrieve or set page parameters, thereby avoiding unnecessary creation of new pages."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:[(0,i.jsx)(n.code,{children:"#pause"})," for sequence content:"]})," You can use #pause at the outermost level of a slide, including inline and list."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:[(0,i.jsx)(n.code,{children:"#pause"})," for layout functions:"]})," You can use the ",(0,i.jsx)(n.code,{children:"composer"})," parameter to add yourself layout function like ",(0,i.jsx)(n.code,{children:"utils.side-by-side"}),", and simply use multiple pos parameters like ",(0,i.jsx)(n.code,{children:"#slide[..][..]"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:[(0,i.jsx)(n.code,{children:"#meanwhile"})," for synchronous display:"]})," Provide a ",(0,i.jsx)(n.code,{children:"#meanwhile"})," for resetting subslides counter."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:[(0,i.jsx)(n.code,{children:"#pause"})," and ",(0,i.jsx)(n.code,{children:"#meanwhile"})," for math equation:"]})," Provide a ",(0,i.jsx)(n.code,{children:'#touying-equation("x + y pause + z")'})," for math equation animations."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Slides:"})," Create simple slides using standard headings."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:["Callback-style ",(0,i.jsx)(n.code,{children:"uncover"}),", ",(0,i.jsx)(n.code,{children:"only"})," and ",(0,i.jsx)(n.code,{children:"alternatives"}),":"]})," Based on the concise syntax provided by Polylux, allow precise control of the timing for displaying content.","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["You should manually control the number of subslides using the ",(0,i.jsx)(n.code,{children:"repeat"})," parameter."]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Transparent cover:"})," Enable transparent cover using oop syntax like ",(0,i.jsx)(n.code,{children:"#let s = (s.methods.enable-transparent-cover)(self: s)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Handout mode:"})," enable handout mode by ",(0,i.jsx)(n.code,{children:"#let s = (s.methods.enable-handout-mode)(self: s)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Fit-to-width and fit-to-height:"})," Fit-to-width for title in header and fit-to-height for image.","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"utils.fit-to-width(grow: true, shrink: true, width, body)"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"utils.fit-to-height(width: none, prescale-width: none, grow: true, shrink: true, height, body)"})}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Slides counter:"})," ",(0,i.jsx)(n.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'})," and ",(0,i.jsx)(n.code,{children:"states.touying-progress(ratio => ..)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Appendix:"})," Freeze the ",(0,i.jsx)(n.code,{children:"last-slide-number"})," to prevent the slide number from increasing further."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Sections:"})," Touying's built-in section support can be used to display the current section title and show progress.","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"section"})," and ",(0,i.jsx)(n.code,{children:"subsection"})," parameter in ",(0,i.jsx)(n.code,{children:"#slide"})," to register a new section or subsection."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"states.current-section-title"})," to get the current section."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"states.touying-outline"})," or ",(0,i.jsx)(n.code,{children:"s.methods.touying-outline"})," to display a outline of sections."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"states.touying-final-sections(sections => ..)"})," for custom outline display."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"states.touying-progress-with-sections((current-sections: .., final-sections: .., current-slide-number: .., last-slide-number: ..) => ..)"})," for powerful progress display."]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Navigation bar"}),": Navigation bar like ",(0,i.jsx)(n.a,{href:"https://github.com/zbowang/BeamerTheme",children:"here"})," by ",(0,i.jsx)(n.code,{children:"states.touying-progress-with-sections(..)"}),", in ",(0,i.jsx)(n.code,{children:"dewdrop"})," theme."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Pdfpc:"})," pdfpc support and export ",(0,i.jsx)(n.code,{children:".pdfpc"})," file without external tool by ",(0,i.jsx)(n.code,{children:"typst query"})," command simply."]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>d,a:()=>t});var i=s(7294);const r={},l=i.createContext(r);function t(e){const n=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:t(e.components),i.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/7d3539b2.0efb155b.js b/assets/js/7d3539b2.7e348ebf.js similarity index 98% rename from assets/js/7d3539b2.0efb155b.js rename to assets/js/7d3539b2.7e348ebf.js index 0d91e5271..2c12015a2 100644 --- a/assets/js/7d3539b2.0efb155b.js +++ b/assets/js/7d3539b2.7e348ebf.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4481],{6594:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>r,toc:()=>c});var i=t(5893),s=t(1151);const l={sidebar_position:4},o="University Theme",r={id:"themes/university",title:"University Theme",description:"image",source:"@site/docs/themes/university.md",sourceDirName:"themes",slug:"/themes/university",permalink:"/touying/docs/next/themes/university",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/themes/university.md",tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Dewdrop Theme",permalink:"/touying/docs/next/themes/dewdrop"},next:{title:"Aqua Theme",permalink:"/touying/docs/next/themes/aqua"}},d={},c=[{value:"Initialization",id:"initialization",level:2},{value:"Color Theme",id:"color-theme",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"Title Slide",id:"title-slide",level:3},{value:"Regular Slide",id:"regular-slide",level:3},{value:"Focus Slide",id:"focus-slide",level:3},{value:"Matrix Slide",id:"matrix-slide",level:3},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"university-theme",children:"University Theme"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/4095163c-0c16-4760-b370-8adc1cdd7e6c",alt:"image"})}),"\n",(0,i.jsxs)(n.p,{children:["This aesthetically pleasing theme is courtesy of ",(0,i.jsx)(n.a,{href:"https://github.com/drupol",children:"Pol Dellaiera"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,i.jsx)(n.p,{children:"You can initialize the University theme using the following code:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, focus-slide, matrix-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"register"})," function accepts the following parameters:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"aspect-ratio"}),': Sets the aspect ratio of the slides to "16-9" or "4-3," with the default being "16-9."']}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"progress-bar"}),": Controls whether the progress bar at the top of each slide is displayed, with the default being ",(0,i.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"display-current-section"}),": Whether to display the current section."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"footer-columns"}),": The width of the footer in the bottom three columns, the default is ",(0,i.jsx)(n.code,{children:"(25%, 1fr, 25%)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"footer-a"}),": The first column, default is ",(0,i.jsx)(n.code,{children:"self => self.info.author"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"footer-b"}),": Second column, default is ",(0,i.jsx)(n.code,{children:"self => if self.info.short-title == auto { self.info.title } else { self.info.short-title }"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"footer-c"}),": third column, default is"]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'self => {\n h(1fr)\n utils.info-date(self)\n h(1fr)\n states.slide-counter.display() + " / " + states.last-slide-number\n h(1fr)\n}\n'})}),"\n",(0,i.jsxs)(n.p,{children:["Additionally, the University theme provides an ",(0,i.jsx)(n.code,{children:"#alert[..]"})," function, which you can use with the ",(0,i.jsx)(n.code,{children:"#show strong: alert"})," syntax for emphasizing text with ",(0,i.jsx)(n.code,{children:"*alert text*"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"color-theme",children:"Color Theme"}),"\n",(0,i.jsx)(n.p,{children:"The University theme defaults to the following color theme:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.colors)(\n self: s,\n primary: rgb("#04364A"),\n secondary: rgb("#176B87"),\n tertiary: rgb("#448C95"),\n)\n'})}),"\n",(0,i.jsxs)(n.p,{children:["You can modify this color theme using ",(0,i.jsx)(n.code,{children:"#let s = (s.methods.colors)(self: s, ..)"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,i.jsx)(n.p,{children:"The University theme provides a series of custom slide functions:"}),"\n",(0,i.jsx)(n.h3,{id:"title-slide",children:"Title Slide"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#title-slide(logo: none, authors: none, ..args)\n"})}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"title-slide"})," function reads information from ",(0,i.jsx)(n.code,{children:"self.info"})," for display. You can also pass the ",(0,i.jsx)(n.code,{children:"logo"})," parameter and an array-type ",(0,i.jsx)(n.code,{children:"authors"})," parameter."]}),"\n",(0,i.jsx)(n.h3,{id:"regular-slide",children:"Regular Slide"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // university theme\n title: none,\n subtitle: none,\n header: none,\n footer: auto,\n)[\n ...\n]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["The default slide function with a title and footer. The ",(0,i.jsx)(n.code,{children:"title"})," defaults to the current section title, and the footer is set as per your configuration."]}),"\n",(0,i.jsx)(n.h3,{id:"focus-slide",children:"Focus Slide"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#focus-slide(background-img: ..., background-color: ...)[\n ...\n]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Used to capture the audience's attention. The default background color is ",(0,i.jsx)(n.code,{children:"self.colors.primary"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"matrix-slide",children:"Matrix Slide"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#matrix-slide(columns: ..., rows: ...)[\n ...\n][\n ...\n]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Refer to the ",(0,i.jsx)(n.a,{href:"https://polylux.dev/book/themes/gallery/university.html",children:"documentation"}),"."]}),"\n",(0,i.jsxs)(n.h2,{id:"slides-function",children:[(0,i.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"slides"})," function has parameters:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"title-slide"}),": Defaults to ",(0,i.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"slide-level"}),": Defaults to ",(0,i.jsx)(n.code,{children:"1"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["You can set these parameters using ",(0,i.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["And the function of automatically adding ",(0,i.jsx)(n.code,{children:"new-section-slide"})," can be turned off by ",(0,i.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, focus-slide, matrix-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/58971045-0b0d-46cb-acc2-caf766c2432d",alt:"image"})}),"\n",(0,i.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, focus-slide, matrix-slide) = utils.slides(s)\n#show: slides.with(title-slide: false)\n\n#title-slide(authors: ([Author A], [Author B]))\n\n= The Section\n\n== Slide Title\n\n#slide[\n #lorem(40)\n]\n\n#slide(subtitle: emph[What is the problem?])[\n #lorem(40)\n]\n\n#focus-slide[\n Another variant with primary color in background...\n]\n\n#matrix-slide[\n left\n][\n middle\n][\n right\n]\n\n#matrix-slide(columns: 1)[\n top\n][\n bottom\n]\n\n#matrix-slide(columns: (1fr, 2fr, 1fr), ..(lorem(8),) * 9)\n'})})]})}function h(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>o});var i=t(7294);const s={},l=i.createContext(s);function o(e){const n=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),i.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4481],{6594:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>r,toc:()=>c});var i=t(5893),s=t(1151);const l={sidebar_position:4},o="University Theme",r={id:"themes/university",title:"University Theme",description:"image",source:"@site/docs/themes/university.md",sourceDirName:"themes",slug:"/themes/university",permalink:"/touying/docs/next/themes/university",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/themes/university.md",tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Dewdrop Theme",permalink:"/touying/docs/next/themes/dewdrop"},next:{title:"Aqua Theme",permalink:"/touying/docs/next/themes/aqua"}},d={},c=[{value:"Initialization",id:"initialization",level:2},{value:"Color Theme",id:"color-theme",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"Title Slide",id:"title-slide",level:3},{value:"Regular Slide",id:"regular-slide",level:3},{value:"Focus Slide",id:"focus-slide",level:3},{value:"Matrix Slide",id:"matrix-slide",level:3},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"university-theme",children:"University Theme"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/4095163c-0c16-4760-b370-8adc1cdd7e6c",alt:"image"})}),"\n",(0,i.jsxs)(n.p,{children:["This aesthetically pleasing theme is courtesy of ",(0,i.jsx)(n.a,{href:"https://github.com/drupol",children:"Pol Dellaiera"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,i.jsx)(n.p,{children:"You can initialize the University theme using the following code:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, focus-slide, matrix-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"register"})," function accepts the following parameters:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"aspect-ratio"}),': Sets the aspect ratio of the slides to "16-9" or "4-3," with the default being "16-9."']}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"progress-bar"}),": Controls whether the progress bar at the top of each slide is displayed, with the default being ",(0,i.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"display-current-section"}),": Whether to display the current section."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"footer-columns"}),": The width of the footer in the bottom three columns, the default is ",(0,i.jsx)(n.code,{children:"(25%, 1fr, 25%)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"footer-a"}),": The first column, default is ",(0,i.jsx)(n.code,{children:"self => self.info.author"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"footer-b"}),": Second column, default is ",(0,i.jsx)(n.code,{children:"self => if self.info.short-title == auto { self.info.title } else { self.info.short-title }"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"footer-c"}),": third column, default is"]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'self => {\n h(1fr)\n utils.info-date(self)\n h(1fr)\n states.slide-counter.display() + " / " + states.last-slide-number\n h(1fr)\n}\n'})}),"\n",(0,i.jsxs)(n.p,{children:["Additionally, the University theme provides an ",(0,i.jsx)(n.code,{children:"#alert[..]"})," function, which you can use with the ",(0,i.jsx)(n.code,{children:"#show strong: alert"})," syntax for emphasizing text with ",(0,i.jsx)(n.code,{children:"*alert text*"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"color-theme",children:"Color Theme"}),"\n",(0,i.jsx)(n.p,{children:"The University theme defaults to the following color theme:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.colors)(\n self: s,\n primary: rgb("#04364A"),\n secondary: rgb("#176B87"),\n tertiary: rgb("#448C95"),\n)\n'})}),"\n",(0,i.jsxs)(n.p,{children:["You can modify this color theme using ",(0,i.jsx)(n.code,{children:"#let s = (s.methods.colors)(self: s, ..)"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,i.jsx)(n.p,{children:"The University theme provides a series of custom slide functions:"}),"\n",(0,i.jsx)(n.h3,{id:"title-slide",children:"Title Slide"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#title-slide(logo: none, authors: none, ..args)\n"})}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"title-slide"})," function reads information from ",(0,i.jsx)(n.code,{children:"self.info"})," for display. You can also pass the ",(0,i.jsx)(n.code,{children:"logo"})," parameter and an array-type ",(0,i.jsx)(n.code,{children:"authors"})," parameter."]}),"\n",(0,i.jsx)(n.h3,{id:"regular-slide",children:"Regular Slide"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // university theme\n title: none,\n subtitle: none,\n header: none,\n footer: auto,\n)[\n ...\n]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["The default slide function with a title and footer. The ",(0,i.jsx)(n.code,{children:"title"})," defaults to the current section title, and the footer is set as per your configuration."]}),"\n",(0,i.jsx)(n.h3,{id:"focus-slide",children:"Focus Slide"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#focus-slide(background-img: ..., background-color: ...)[\n ...\n]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Used to capture the audience's attention. The default background color is ",(0,i.jsx)(n.code,{children:"self.colors.primary"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"matrix-slide",children:"Matrix Slide"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#matrix-slide(columns: ..., rows: ...)[\n ...\n][\n ...\n]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Refer to the ",(0,i.jsx)(n.a,{href:"https://polylux.dev/book/themes/gallery/university.html",children:"documentation"}),"."]}),"\n",(0,i.jsxs)(n.h2,{id:"slides-function",children:[(0,i.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"slides"})," function has parameters:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"title-slide"}),": Defaults to ",(0,i.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"slide-level"}),": Defaults to ",(0,i.jsx)(n.code,{children:"1"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["You can set these parameters using ",(0,i.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["And the function of automatically adding ",(0,i.jsx)(n.code,{children:"new-section-slide"})," can be turned off by ",(0,i.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, focus-slide, matrix-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/58971045-0b0d-46cb-acc2-caf766c2432d",alt:"image"})}),"\n",(0,i.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, focus-slide, matrix-slide) = utils.slides(s)\n#show: slides.with(title-slide: false)\n\n#title-slide(authors: ([Author A], [Author B]))\n\n= The Section\n\n== Slide Title\n\n#slide[\n #lorem(40)\n]\n\n#slide(subtitle: emph[What is the problem?])[\n #lorem(40)\n]\n\n#focus-slide[\n Another variant with primary color in background...\n]\n\n#matrix-slide[\n left\n][\n middle\n][\n right\n]\n\n#matrix-slide(columns: 1)[\n top\n][\n bottom\n]\n\n#matrix-slide(columns: (1fr, 2fr, 1fr), ..(lorem(8),) * 9)\n'})})]})}function h(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>o});var i=t(7294);const s={},l=i.createContext(s);function o(e){const n=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),i.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/7f65dfb7.26d35ace.js b/assets/js/7f65dfb7.cb61dc14.js similarity index 96% rename from assets/js/7f65dfb7.26d35ace.js rename to assets/js/7f65dfb7.cb61dc14.js index 8dd5036c8..fb41c6b4d 100644 --- a/assets/js/7f65dfb7.26d35ace.js +++ b/assets/js/7f65dfb7.cb61dc14.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6917],{2049:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>r});var i=n(5893),t=n(1151);const l={sidebar_position:4},o="Code Style",d={id:"code-styles",title:"Code Style",description:"Simple Style",source:"@site/docs/code-styles.md",sourceDirName:".",slug:"/code-styles",permalink:"/touying/docs/next/code-styles",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/code-styles.md",tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Sections and Subsections",permalink:"/touying/docs/next/sections"},next:{title:"Page Layout",permalink:"/touying/docs/next/layout"}},c={},r=[{value:"Simple Style",id:"simple-style",level:2},{value:"Block Style",id:"block-style",level:2},{value:"Convention Over Configuration",id:"convention-over-configuration",level:2}];function a(e){const s={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",...(0,t.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.h1,{id:"code-style",children:"Code Style"}),"\n",(0,i.jsx)(s.h2,{id:"simple-style",children:"Simple Style"}),"\n",(0,i.jsxs)(s.p,{children:["If we only need simplicity, we can directly input content under the heading, just like writing a normal Typst document. The heading here serves to divide the pages, and we can use commands like ",(0,i.jsx)(s.code,{children:"#pause"})," to achieve animation effects."]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/f5bdbf8f-7bf9-45fd-9923-0fa5d66450b2",alt:"image"})}),"\n",(0,i.jsxs)(s.p,{children:["You can use an empty heading ",(0,i.jsx)(s.code,{children:"=="})," to create a new page. This skill also helps clear the continuation of the previous title."]}),"\n",(0,i.jsxs)(s.p,{children:["PS: We can use the ",(0,i.jsx)(s.code,{children:"#slides-end"})," marker to signify the end of ",(0,i.jsx)(s.code,{children:"#show: slides"}),"."]}),"\n",(0,i.jsx)(s.h2,{id:"block-style",children:"Block Style"}),"\n",(0,i.jsxs)(s.p,{children:["Many times, using simple style alone cannot achieve all the functions we need. For more powerful features and clearer structure, we can also use block style in the form of ",(0,i.jsx)(s.code,{children:"#slide[...]"}),". The ",(0,i.jsx)(s.code,{children:"#slide"})," function needs to be unpacked using the syntax ",(0,i.jsx)(s.code,{children:"#let (slide, empty-slide) = utils.slides(s)"})," to be used correctly after ",(0,i.jsx)(s.code,{children:"#show: slides"}),"."]}),"\n",(0,i.jsx)(s.p,{children:"For example, the previous example can be transformed into:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\n#slide[\n Hello, Touying!\n\n #pause\n\n Hello, Typst!\n]\n'})}),"\n",(0,i.jsxs)(s.p,{children:["and ",(0,i.jsx)(s.code,{children:"#empty-slide[]"})," to create an empty slide without header and footer."]}),"\n",(0,i.jsx)(s.p,{children:"There are many advantages to doing this:"}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsxs)(s.li,{children:["Many times, we not only need the default ",(0,i.jsx)(s.code,{children:"#slide[...]"})," but also special ",(0,i.jsx)(s.code,{children:"slide"})," functions like ",(0,i.jsx)(s.code,{children:"#focus-slide[...]"}),"."]}),"\n",(0,i.jsxs)(s.li,{children:["Different themes' ",(0,i.jsx)(s.code,{children:"#slide[...]"})," functions may have more parameters than the default, such as the university theme's ",(0,i.jsx)(s.code,{children:"#slide[...]"})," function having a ",(0,i.jsx)(s.code,{children:"subtitle"})," parameter."]}),"\n",(0,i.jsxs)(s.li,{children:["Only ",(0,i.jsx)(s.code,{children:"slide"})," functions can use the callback-style content block to achieve complex animation effects with ",(0,i.jsx)(s.code,{children:"#only"})," and ",(0,i.jsx)(s.code,{children:"#uncover"})," functions."]}),"\n",(0,i.jsxs)(s.li,{children:["It has a clearer structure. By identifying ",(0,i.jsx)(s.code,{children:"#slide[...]"})," blocks, we can easily distinguish the specific pagination effects of slides."]}),"\n"]}),"\n",(0,i.jsx)(s.h2,{id:"convention-over-configuration",children:"Convention Over Configuration"}),"\n",(0,i.jsxs)(s.p,{children:["You may have noticed that when using the simple theme, using a level-one heading automatically creates a new section slide. This is because the simple theme registers an ",(0,i.jsx)(s.code,{children:"s.methods.touying-new-section-slide"})," method, so Touying will automatically call this method."]}),"\n",(0,i.jsx)(s.p,{children:"If we don't want it to automatically create such a section slide, we can delete this method:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register()\n#(s.methods.touying-new-section-slide = none)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/17a89a59-9491-4e1f-95c0-09a22105ab35",alt:"image"})}),"\n",(0,i.jsx)(s.p,{children:"As you can see, there are only two pages left, and the default section slide is gone."}),"\n",(0,i.jsx)(s.p,{children:"Similarly, we can register a new section slide:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register()\n#(s.methods.touying-new-section-slide = (self: none, section, ..args) => {\n self = utils.empty-page(self)\n (s.methods.touying-slide)(self: self, section: section, {\n set align(center + horizon)\n set text(size: 2em, fill: s.colors.primary, style: "italic", weight: "bold")\n section\n }, ..args)\n})\n#let (init, slides, touying-outline) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/5305efda-0cd4-42eb-9f2e-89abc30b6ca2",alt:"image"})}),"\n",(0,i.jsxs)(s.p,{children:["Similarly, we can modify ",(0,i.jsx)(s.code,{children:"s.methods.touying-new-subsection-slide"})," to do the same for ",(0,i.jsx)(s.code,{children:"subsection"}),"."]}),"\n",(0,i.jsxs)(s.p,{children:["In fact, besides ",(0,i.jsx)(s.code,{children:"s.methods.touying-new-section-slide"}),", another special ",(0,i.jsx)(s.code,{children:"slide"})," function is the ",(0,i.jsx)(s.code,{children:"s.methods.slide"})," function, which will be called by default in simple style when ",(0,i.jsx)(s.code,{children:"#slide[...]"})," is not explicitly used."]}),"\n",(0,i.jsxs)(s.p,{children:["Also, since ",(0,i.jsx)(s.code,{children:"#slide[...]"})," is registered in ",(0,i.jsx)(s.code,{children:'s.slides = ("slide",)'}),", the ",(0,i.jsx)(s.code,{children:"section"}),", ",(0,i.jsx)(s.code,{children:"subsection"}),", and ",(0,i.jsx)(s.code,{children:"title"})," parameters will be automatically passed, while others like ",(0,i.jsx)(s.code,{children:"#focus-slide[...]"})," will not automatically receive these three parameters."]}),"\n",(0,i.jsxs)(s.admonition,{title:"Principle",type:"tip",children:[(0,i.jsxs)(s.p,{children:["In fact, you can also not use ",(0,i.jsx)(s.code,{children:"#show: slides"})," and ",(0,i.jsx)(s.code,{children:"utils.slides(s)"}),", but only use ",(0,i.jsx)(s.code,{children:"utils.methods(s)"}),", for example:"]}),(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register()\n#let (init, touying-outline, slide) = utils.methods(s)\n#show: init\n\n#slide(section: [Title], title: [First Slide])[\n Hello, Touying!\n\n #pause\n\n Hello, Typst!\n]\n'})}),(0,i.jsxs)(s.p,{children:["Here, you need to manually pass in ",(0,i.jsx)(s.code,{children:"section"}),", ",(0,i.jsx)(s.code,{children:"subsection"}),", and ",(0,i.jsx)(s.code,{children:"title"}),", but it will have better performance, suitable for cases where faster performance is needed, such as when there are more than dozens or hundreds of pages."]})]})]})}function h(e={}){const{wrapper:s}={...(0,t.a)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>d,a:()=>o});var i=n(7294);const t={},l=i.createContext(t);function o(e){const s=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function d(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),i.createElement(l.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6917],{2049:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>r});var i=n(5893),t=n(1151);const l={sidebar_position:4},o="Code Style",d={id:"code-styles",title:"Code Style",description:"Simple Style",source:"@site/docs/code-styles.md",sourceDirName:".",slug:"/code-styles",permalink:"/touying/docs/next/code-styles",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/code-styles.md",tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Sections and Subsections",permalink:"/touying/docs/next/sections"},next:{title:"Page Layout",permalink:"/touying/docs/next/layout"}},c={},r=[{value:"Simple Style",id:"simple-style",level:2},{value:"Block Style",id:"block-style",level:2},{value:"Convention Over Configuration",id:"convention-over-configuration",level:2}];function a(e){const s={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",...(0,t.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.h1,{id:"code-style",children:"Code Style"}),"\n",(0,i.jsx)(s.h2,{id:"simple-style",children:"Simple Style"}),"\n",(0,i.jsxs)(s.p,{children:["If we only need simplicity, we can directly input content under the heading, just like writing a normal Typst document. The heading here serves to divide the pages, and we can use commands like ",(0,i.jsx)(s.code,{children:"#pause"})," to achieve animation effects."]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.simple.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/f5bdbf8f-7bf9-45fd-9923-0fa5d66450b2",alt:"image"})}),"\n",(0,i.jsxs)(s.p,{children:["You can use an empty heading ",(0,i.jsx)(s.code,{children:"=="})," to create a new page. This skill also helps clear the continuation of the previous title."]}),"\n",(0,i.jsxs)(s.p,{children:["PS: We can use the ",(0,i.jsx)(s.code,{children:"#slides-end"})," marker to signify the end of ",(0,i.jsx)(s.code,{children:"#show: slides"}),"."]}),"\n",(0,i.jsx)(s.h2,{id:"block-style",children:"Block Style"}),"\n",(0,i.jsxs)(s.p,{children:["Many times, using simple style alone cannot achieve all the functions we need. For more powerful features and clearer structure, we can also use block style in the form of ",(0,i.jsx)(s.code,{children:"#slide[...]"}),". The ",(0,i.jsx)(s.code,{children:"#slide"})," function needs to be unpacked using the syntax ",(0,i.jsx)(s.code,{children:"#let (slide, empty-slide) = utils.slides(s)"})," to be used correctly after ",(0,i.jsx)(s.code,{children:"#show: slides"}),"."]}),"\n",(0,i.jsx)(s.p,{children:"For example, the previous example can be transformed into:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.simple.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\n#slide[\n Hello, Touying!\n\n #pause\n\n Hello, Typst!\n]\n'})}),"\n",(0,i.jsxs)(s.p,{children:["and ",(0,i.jsx)(s.code,{children:"#empty-slide[]"})," to create an empty slide without header and footer."]}),"\n",(0,i.jsx)(s.p,{children:"There are many advantages to doing this:"}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsxs)(s.li,{children:["Many times, we not only need the default ",(0,i.jsx)(s.code,{children:"#slide[...]"})," but also special ",(0,i.jsx)(s.code,{children:"slide"})," functions like ",(0,i.jsx)(s.code,{children:"#focus-slide[...]"}),"."]}),"\n",(0,i.jsxs)(s.li,{children:["Different themes' ",(0,i.jsx)(s.code,{children:"#slide[...]"})," functions may have more parameters than the default, such as the university theme's ",(0,i.jsx)(s.code,{children:"#slide[...]"})," function having a ",(0,i.jsx)(s.code,{children:"subtitle"})," parameter."]}),"\n",(0,i.jsxs)(s.li,{children:["Only ",(0,i.jsx)(s.code,{children:"slide"})," functions can use the callback-style content block to achieve complex animation effects with ",(0,i.jsx)(s.code,{children:"#only"})," and ",(0,i.jsx)(s.code,{children:"#uncover"})," functions."]}),"\n",(0,i.jsxs)(s.li,{children:["It has a clearer structure. By identifying ",(0,i.jsx)(s.code,{children:"#slide[...]"})," blocks, we can easily distinguish the specific pagination effects of slides."]}),"\n"]}),"\n",(0,i.jsx)(s.h2,{id:"convention-over-configuration",children:"Convention Over Configuration"}),"\n",(0,i.jsxs)(s.p,{children:["You may have noticed that when using the simple theme, using a level-one heading automatically creates a new section slide. This is because the simple theme registers an ",(0,i.jsx)(s.code,{children:"s.methods.touying-new-section-slide"})," method, so Touying will automatically call this method."]}),"\n",(0,i.jsx)(s.p,{children:"If we don't want it to automatically create such a section slide, we can delete this method:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.simple.register()\n#(s.methods.touying-new-section-slide = none)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/17a89a59-9491-4e1f-95c0-09a22105ab35",alt:"image"})}),"\n",(0,i.jsx)(s.p,{children:"As you can see, there are only two pages left, and the default section slide is gone."}),"\n",(0,i.jsx)(s.p,{children:"Similarly, we can register a new section slide:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.simple.register()\n#(s.methods.touying-new-section-slide = (self: none, section, ..args) => {\n self = utils.empty-page(self)\n (s.methods.touying-slide)(self: self, section: section, {\n set align(center + horizon)\n set text(size: 2em, fill: s.colors.primary, style: "italic", weight: "bold")\n section\n }, ..args)\n})\n#let (init, slides, touying-outline) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/5305efda-0cd4-42eb-9f2e-89abc30b6ca2",alt:"image"})}),"\n",(0,i.jsxs)(s.p,{children:["Similarly, we can modify ",(0,i.jsx)(s.code,{children:"s.methods.touying-new-subsection-slide"})," to do the same for ",(0,i.jsx)(s.code,{children:"subsection"}),"."]}),"\n",(0,i.jsxs)(s.p,{children:["In fact, besides ",(0,i.jsx)(s.code,{children:"s.methods.touying-new-section-slide"}),", another special ",(0,i.jsx)(s.code,{children:"slide"})," function is the ",(0,i.jsx)(s.code,{children:"s.methods.slide"})," function, which will be called by default in simple style when ",(0,i.jsx)(s.code,{children:"#slide[...]"})," is not explicitly used."]}),"\n",(0,i.jsxs)(s.p,{children:["Also, since ",(0,i.jsx)(s.code,{children:"#slide[...]"})," is registered in ",(0,i.jsx)(s.code,{children:'s.slides = ("slide",)'}),", the ",(0,i.jsx)(s.code,{children:"section"}),", ",(0,i.jsx)(s.code,{children:"subsection"}),", and ",(0,i.jsx)(s.code,{children:"title"})," parameters will be automatically passed, while others like ",(0,i.jsx)(s.code,{children:"#focus-slide[...]"})," will not automatically receive these three parameters."]}),"\n",(0,i.jsxs)(s.admonition,{title:"Principle",type:"tip",children:[(0,i.jsxs)(s.p,{children:["In fact, you can also not use ",(0,i.jsx)(s.code,{children:"#show: slides"})," and ",(0,i.jsx)(s.code,{children:"utils.slides(s)"}),", but only use ",(0,i.jsx)(s.code,{children:"utils.methods(s)"}),", for example:"]}),(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.simple.register()\n#let (init, touying-outline, slide) = utils.methods(s)\n#show: init\n\n#slide(section: [Title], title: [First Slide])[\n Hello, Touying!\n\n #pause\n\n Hello, Typst!\n]\n'})}),(0,i.jsxs)(s.p,{children:["Here, you need to manually pass in ",(0,i.jsx)(s.code,{children:"section"}),", ",(0,i.jsx)(s.code,{children:"subsection"}),", and ",(0,i.jsx)(s.code,{children:"title"}),", but it will have better performance, suitable for cases where faster performance is needed, such as when there are more than dozens or hundreds of pages."]})]})]})}function h(e={}){const{wrapper:s}={...(0,t.a)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>d,a:()=>o});var i=n(7294);const t={},l=i.createContext(t);function o(e){const s=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function d(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),i.createElement(l.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/80a0c88e.2655d01e.js b/assets/js/80a0c88e.fbf7f998.js similarity index 98% rename from assets/js/80a0c88e.2655d01e.js rename to assets/js/80a0c88e.fbf7f998.js index 43bc03f43..fc139cb9b 100644 --- a/assets/js/80a0c88e.2655d01e.js +++ b/assets/js/80a0c88e.fbf7f998.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3209],{8135:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>r,toc:()=>a});var s=t(5893),i=t(1151);const o={sidebar_position:2},l="Metropolis Theme",r={id:"themes/metropolis",title:"Metropolis Theme",description:"image",source:"@site/docs/themes/metropolis.md",sourceDirName:"themes",slug:"/themes/metropolis",permalink:"/touying/docs/next/themes/metropolis",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/themes/metropolis.md",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Simple Theme",permalink:"/touying/docs/next/themes/simple"},next:{title:"Dewdrop Theme",permalink:"/touying/docs/next/themes/dewdrop"}},d={},a=[{value:"Initialization",id:"initialization",level:2},{value:"Color Theme",id:"color-theme",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",hr:"hr",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"metropolis-theme",children:"Metropolis Theme"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/383ceb22-f696-4450-83a6-c0f17e4597e1",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["This theme draws inspiration from Matthias Vogelgesang's ",(0,s.jsx)(n.a,{href:"https://github.com/matze/mtheme",children:"Metropolis beamer"})," theme and has been modified by ",(0,s.jsx)(n.a,{href:"https://github.com/Enivex",children:"Enivex"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"The Metropolis theme is elegant and suitable for everyday use. It is recommended to have Fira Sans and Fira Math fonts installed on your computer for the best results."}),"\n",(0,s.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,s.jsx)(n.p,{children:"You can initialize it using the following code:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"register"})," function takes the following parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"aspect-ratio"}),': The aspect ratio of the slides, either "16-9" or "4-3," defaulting to "16-9."']}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"header"}),": Content displayed in the header, defaulting to ",(0,s.jsx)(n.code,{children:"states.current-section-title"}),", or it can be passed as a function like ",(0,s.jsx)(n.code,{children:"self => self.info.title"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer"}),": Content displayed in the footer, defaulting to ",(0,s.jsx)(n.code,{children:"[]"}),", or it can be passed as a function like ",(0,s.jsx)(n.code,{children:"self => self.info.author"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer-right"}),": Content displayed on the right side of the footer, defaulting to ",(0,s.jsx)(n.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer-progress"}),": Whether to show the progress bar at the bottom of the slide, defaulting to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["The Metropolis theme also provides an ",(0,s.jsx)(n.code,{children:"#alert[..]"})," function, which you can use with ",(0,s.jsx)(n.code,{children:"#show strong: alert"})," using the ",(0,s.jsx)(n.code,{children:"*alert text*"})," syntax."]}),"\n",(0,s.jsx)(n.h2,{id:"color-theme",children:"Color Theme"}),"\n",(0,s.jsx)(n.p,{children:"Metropolis uses the following default color theme:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.colors)(\n self: s,\n neutral-lightest: rgb("#fafafa"),\n primary-dark: rgb("#23373b"),\n secondary-light: rgb("#eb811b"),\n secondary-lighter: rgb("#d6c6b7"),\n)\n'})}),"\n",(0,s.jsxs)(n.p,{children:["You can modify this color theme using ",(0,s.jsx)(n.code,{children:"#let s = (s.methods.colors)(self: s, ..)"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,s.jsx)(n.p,{children:"The Metropolis theme provides a variety of custom slide functions:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#title-slide(extra: none, ..args)\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"title-slide"})," reads information from ",(0,s.jsx)(n.code,{children:"self.info"})," for display, and you can also pass in an ",(0,s.jsx)(n.code,{children:"extra"})," parameter to display additional information."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // metropolis theme\n title: auto,\n footer: auto,\n align: horizon,\n)[\n ...\n]\n"})}),"\n",(0,s.jsx)(n.p,{children:"A default slide with headers and footers, where the title defaults to the current section title, and the footer is what you set."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#focus-slide[\n ...\n]\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Used to draw attention, with the background color set to ",(0,s.jsx)(n.code,{children:"self.colors.primary-dark"}),"."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#new-section-slide(short-title: auto, title)\n"})}),"\n",(0,s.jsx)(n.p,{children:"Creates a new section with the given title."}),"\n",(0,s.jsxs)(n.h2,{id:"slides-function",children:[(0,s.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"slides"})," function has the following parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"title-slide"}),": Defaults to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"outline-slide"}),": Defaults to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"slide-level"}),": Defaults to ",(0,s.jsx)(n.code,{children:"1"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["You can set these using ",(0,s.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["PS: You can modify the outline title using ",(0,s.jsx)(n.code,{children:"#(s.outline-title = [Outline])"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["And the function of automatically adding ",(0,s.jsx)(n.code,{children:"new-section-slide"})," can be turned off by ",(0,s.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slide, slides, title-slide, new-section-slide, focus-slide, touying-outline, alert) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/4ab45ee6-09f7-498b-b349-e889d6e42e3e",alt:"image"})}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#set text(font: "Fira Sans", weight: "light", size: 20pt)\n#show math.equation: set text(font: "Fira Math")\n#set strong(delta: 100)\n#set par(justify: true)\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= First Section\n\n#slide[\n A slide without a title but with some *important* information.\n]\n\n== A long long long long long long long long long long long long long long long long long long long long long long long long Title\n\n#slide[\n A slide with equation:\n\n $ x_(n+1) = (x_n + a/x_n) / 2 $\n\n #lorem(200)\n]\n\n= Second Section\n\n#focus-slide[\n Wake up!\n]\n\n== Simple Animation\n\n#slide[\n A simple #pause dynamic slide with #alert[alert]\n\n #pause\n \n text.\n]\n\n// appendix by freezing last-slide-number\n#let s = (s.methods.appendix)(self: s)\n#let (slide, empty-slide) = utils.slides(s)\n\n= Appendix\n\n#slide[\n Appendix.\n]\n'})})]})}function h(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>l});var s=t(7294);const i={},o=s.createContext(i);function l(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3209],{8135:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>r,toc:()=>a});var s=t(5893),i=t(1151);const o={sidebar_position:2},l="Metropolis Theme",r={id:"themes/metropolis",title:"Metropolis Theme",description:"image",source:"@site/docs/themes/metropolis.md",sourceDirName:"themes",slug:"/themes/metropolis",permalink:"/touying/docs/next/themes/metropolis",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/themes/metropolis.md",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Simple Theme",permalink:"/touying/docs/next/themes/simple"},next:{title:"Dewdrop Theme",permalink:"/touying/docs/next/themes/dewdrop"}},d={},a=[{value:"Initialization",id:"initialization",level:2},{value:"Color Theme",id:"color-theme",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",hr:"hr",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"metropolis-theme",children:"Metropolis Theme"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/383ceb22-f696-4450-83a6-c0f17e4597e1",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["This theme draws inspiration from Matthias Vogelgesang's ",(0,s.jsx)(n.a,{href:"https://github.com/matze/mtheme",children:"Metropolis beamer"})," theme and has been modified by ",(0,s.jsx)(n.a,{href:"https://github.com/Enivex",children:"Enivex"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"The Metropolis theme is elegant and suitable for everyday use. It is recommended to have Fira Sans and Fira Math fonts installed on your computer for the best results."}),"\n",(0,s.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,s.jsx)(n.p,{children:"You can initialize it using the following code:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"register"})," function takes the following parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"aspect-ratio"}),': The aspect ratio of the slides, either "16-9" or "4-3," defaulting to "16-9."']}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"header"}),": Content displayed in the header, defaulting to ",(0,s.jsx)(n.code,{children:"states.current-section-title"}),", or it can be passed as a function like ",(0,s.jsx)(n.code,{children:"self => self.info.title"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer"}),": Content displayed in the footer, defaulting to ",(0,s.jsx)(n.code,{children:"[]"}),", or it can be passed as a function like ",(0,s.jsx)(n.code,{children:"self => self.info.author"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer-right"}),": Content displayed on the right side of the footer, defaulting to ",(0,s.jsx)(n.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer-progress"}),": Whether to show the progress bar at the bottom of the slide, defaulting to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["The Metropolis theme also provides an ",(0,s.jsx)(n.code,{children:"#alert[..]"})," function, which you can use with ",(0,s.jsx)(n.code,{children:"#show strong: alert"})," using the ",(0,s.jsx)(n.code,{children:"*alert text*"})," syntax."]}),"\n",(0,s.jsx)(n.h2,{id:"color-theme",children:"Color Theme"}),"\n",(0,s.jsx)(n.p,{children:"Metropolis uses the following default color theme:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.colors)(\n self: s,\n neutral-lightest: rgb("#fafafa"),\n primary-dark: rgb("#23373b"),\n secondary-light: rgb("#eb811b"),\n secondary-lighter: rgb("#d6c6b7"),\n)\n'})}),"\n",(0,s.jsxs)(n.p,{children:["You can modify this color theme using ",(0,s.jsx)(n.code,{children:"#let s = (s.methods.colors)(self: s, ..)"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,s.jsx)(n.p,{children:"The Metropolis theme provides a variety of custom slide functions:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#title-slide(extra: none, ..args)\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"title-slide"})," reads information from ",(0,s.jsx)(n.code,{children:"self.info"})," for display, and you can also pass in an ",(0,s.jsx)(n.code,{children:"extra"})," parameter to display additional information."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // metropolis theme\n title: auto,\n footer: auto,\n align: horizon,\n)[\n ...\n]\n"})}),"\n",(0,s.jsx)(n.p,{children:"A default slide with headers and footers, where the title defaults to the current section title, and the footer is what you set."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#focus-slide[\n ...\n]\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Used to draw attention, with the background color set to ",(0,s.jsx)(n.code,{children:"self.colors.primary-dark"}),"."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#new-section-slide(short-title: auto, title)\n"})}),"\n",(0,s.jsx)(n.p,{children:"Creates a new section with the given title."}),"\n",(0,s.jsxs)(n.h2,{id:"slides-function",children:[(0,s.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"slides"})," function has the following parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"title-slide"}),": Defaults to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"outline-slide"}),": Defaults to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"slide-level"}),": Defaults to ",(0,s.jsx)(n.code,{children:"1"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["You can set these using ",(0,s.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["PS: You can modify the outline title using ",(0,s.jsx)(n.code,{children:"#(s.outline-title = [Outline])"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["And the function of automatically adding ",(0,s.jsx)(n.code,{children:"new-section-slide"})," can be turned off by ",(0,s.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slide, slides, title-slide, new-section-slide, focus-slide, touying-outline, alert) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/4ab45ee6-09f7-498b-b349-e889d6e42e3e",alt:"image"})}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#set text(font: "Fira Sans", weight: "light", size: 20pt)\n#show math.equation: set text(font: "Fira Math")\n#set strong(delta: 100)\n#set par(justify: true)\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= First Section\n\n#slide[\n A slide without a title but with some *important* information.\n]\n\n== A long long long long long long long long long long long long long long long long long long long long long long long long Title\n\n#slide[\n A slide with equation:\n\n $ x_(n+1) = (x_n + a/x_n) / 2 $\n\n #lorem(200)\n]\n\n= Second Section\n\n#focus-slide[\n Wake up!\n]\n\n== Simple Animation\n\n#slide[\n A simple #pause dynamic slide with #alert[alert]\n\n #pause\n \n text.\n]\n\n// appendix by freezing last-slide-number\n#let s = (s.methods.appendix)(self: s)\n#let (slide, empty-slide) = utils.slides(s)\n\n= Appendix\n\n#slide[\n Appendix.\n]\n'})})]})}function h(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>l});var s=t(7294);const i={},o=s.createContext(i);function l(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/886cfe15.7c81df6b.js b/assets/js/886cfe15.7c81df6b.js new file mode 100644 index 000000000..138676f23 --- /dev/null +++ b/assets/js/886cfe15.7c81df6b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8563],{7027:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>r,toc:()=>a});var n=s(5893),i=s(1151);const o={sidebar_position:11},l="Creating Your Own Theme",r={id:"build-your-own-theme",title:"Creating Your Own Theme",description:"Creating your own theme with Touying might seem a bit complex initially due to the introduction of various concepts. However, fear not; if you successfully create a custom theme with Touying, you'll likely experience the convenience and powerful customization features it offers. You can refer to the source code of existing themes for guidance. The key steps to implement are:",source:"@site/versioned_docs/version-0.4.1/build-your-own-theme.md",sourceDirName:".",slug:"/build-your-own-theme",permalink:"/touying/docs/0.4.1/build-your-own-theme",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/build-your-own-theme.md",tags:[],version:"0.4.1",sidebarPosition:11,frontMatter:{sidebar_position:11},sidebar:"tutorialSidebar",previous:{title:"Aqua Theme",permalink:"/touying/docs/0.4.1/themes/aqua"},next:{title:"Progress",permalink:"/touying/docs/0.4.1/category/progress"}},d={},a=[{value:"Modifying Existing Themes",id:"modifying-existing-themes",level:2},{value:"Import",id:"import",level:2},{value:"Register Function and Init Method",id:"register-function-and-init-method",level:2},{value:"Color Theme",id:"color-theme",level:2},{value:"Practical: Custom Alert Method",id:"practical-custom-alert-method",level:2},{value:"Custom Header and Footer",id:"custom-header-and-footer",level:2},{value:"Custom Special Slide",id:"custom-special-slide",level:2},{value:"Conclusion",id:"conclusion",level:2}];function c(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"creating-your-own-theme",children:"Creating Your Own Theme"}),"\n",(0,n.jsxs)(t.p,{children:["Creating your own theme with Touying might seem a bit complex initially due to the introduction of various concepts. However, fear not; if you successfully create a custom theme with Touying, you'll likely experience the convenience and powerful customization features it offers. You can refer to the ",(0,n.jsx)(t.a,{href:"https://github.com/touying-typ/touying/tree/main/themes",children:"source code of existing themes"})," for guidance. The key steps to implement are:"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"register"})," function to initialize the global singleton ",(0,n.jsx)(t.code,{children:"s"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"init"})," method."]}),"\n",(0,n.jsxs)(t.li,{children:["Define a color theme by modifying the ",(0,n.jsx)(t.code,{children:"self.colors"})," member variable."]}),"\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"alert"})," method (optional)."]}),"\n",(0,n.jsx)(t.li,{children:"Customize the header."}),"\n",(0,n.jsx)(t.li,{children:"Customize the footer."}),"\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"slide"})," method."]}),"\n",(0,n.jsxs)(t.li,{children:["Customize special slide methods, such as ",(0,n.jsx)(t.code,{children:"title-slide"})," and ",(0,n.jsx)(t.code,{children:"focus-slide"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"slides"})," method (optional)."]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"To demonstrate creating a simple and elegant Bamboo theme, let's follow the steps."}),"\n",(0,n.jsx)(t.h2,{id:"modifying-existing-themes",children:"Modifying Existing Themes"}),"\n",(0,n.jsx)(t.p,{children:"If you wish to modify a theme within the Touying package locally instead of creating one from scratch, you can achieve this by following these steps:"}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["Copy the ",(0,n.jsx)(t.a,{href:"https://github.com/touying-typ/touying/tree/main/themes",children:"theme code"})," from the ",(0,n.jsx)(t.code,{children:"themes"})," directory to your local machine. For example, copy ",(0,n.jsx)(t.code,{children:"themes/university.typ"})," to a local file named ",(0,n.jsx)(t.code,{children:"university.typ"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:["Remove all ",(0,n.jsx)(t.code,{children:'#import "../xxx.typ"'})," commands at the top of the ",(0,n.jsx)(t.code,{children:"university.typ"})," file."]}),"\n",(0,n.jsxs)(t.li,{children:["Add ",(0,n.jsx)(t.code,{children:'#import "@preview/touying:0.4.1": *'})," at the top of the ",(0,n.jsx)(t.code,{children:"university.typ"})," file to import all modules."]}),"\n",(0,n.jsxs)(t.li,{children:["Replace ",(0,n.jsx)(t.code,{children:"self: s"})," in the ",(0,n.jsx)(t.code,{children:"register"})," function with ",(0,n.jsx)(t.code,{children:"self: themes.default.register()"})," ",(0,n.jsx)(t.strong,{children:"(Important)"}),"."]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"You can then import and use the theme by:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "university.typ"\n\n#let s = university.register(aspect-ratio: "16-9")\n'})}),"\n",(0,n.jsxs)(t.p,{children:["For a specific example, refer to: ",(0,n.jsx)(t.a,{href:"https://typst.app/project/rqRuzg0keo_ZEB5AdxjweA",children:"https://typst.app/project/rqRuzg0keo_ZEB5AdxjweA"})]}),"\n",(0,n.jsx)(t.h2,{id:"import",children:"Import"}),"\n",(0,n.jsx)(t.p,{children:"Depending on whether the theme is for personal use or part of Touying, you can import in two ways:"}),"\n",(0,n.jsx)(t.p,{children:"If for personal use:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n'})}),"\n",(0,n.jsx)(t.p,{children:"If part of Touying themes:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#import "../utils/utils.typ"\n#import "../utils/states.typ"\n#import "../utils/components.typ"\n'})}),"\n",(0,n.jsxs)(t.p,{children:["Additionally, add the import statement in Touying's ",(0,n.jsx)(t.code,{children:"themes/themes.typ"}),":"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{children:'#import "bamboo.typ"\n'})}),"\n",(0,n.jsx)(t.h2,{id:"register-function-and-init-method",children:"Register Function and Init Method"}),"\n",(0,n.jsx)(t.p,{children:"Next, we'll distinguish between the bamboo.typ template file and the main.typ file, the latter of which is sometimes omitted."}),"\n",(0,n.jsx)(t.p,{children:"Generally, the first step in creating slides is to determine font size and page aspect ratio. Therefore, we need to register an initialization method:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'// bamboo.typ\n#import "@preview/touying:0.4.1": *\n\n#let register(\n self: themes.default.register(),\n aspect-ratio: "16-9",\n) = {\n self.page-args += (\n paper: "presentation-" + aspect-ratio,\n )\n self.methods.init = (self: none, body) => {\n set text(size: 20pt)\n body\n }\n self\n}\n\n// main.typ\n#import "@preview/touying:0.4.1": *\n#import "bamboo.typ"\n\n#let s = bamboo.register(aspect-ratio: "16-9")\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= First Section\n\n== First Slide\n\n#slide[\n A slide with a title and an *important* information.\n]\n'})}),"\n",(0,n.jsxs)(t.p,{children:["As you can see, we created a ",(0,n.jsx)(t.code,{children:"register"})," function and passed an ",(0,n.jsx)(t.code,{children:"aspect-ratio"})," parameter to set the page aspect ratio. We get default ",(0,n.jsx)(t.code,{children:"self"})," by ",(0,n.jsx)(t.code,{children:"self: themes.default.register()"}),". As you might already know, in Touying, we should not use ",(0,n.jsx)(t.code,{children:"set page(..)"})," to set page parameters but rather use the syntax ",(0,n.jsx)(t.code,{children:"self.page-args += (..)"})," to set them, as explained in the Page Layout section."]}),"\n",(0,n.jsxs)(t.p,{children:["In addition, we registered a ",(0,n.jsx)(t.code,{children:"self.methods.init"})," method, which can be used for some global style settings. For example, in this case, we added ",(0,n.jsx)(t.code,{children:"set text(size: 20pt)"})," to set the font size. You can also place additional global style settings here, such as ",(0,n.jsx)(t.code,{children:"set par(justify: true)"}),". Since the ",(0,n.jsx)(t.code,{children:"init"})," function is placed inside ",(0,n.jsx)(t.code,{children:"self.methods"}),", it is a method, not a regular function. Therefore, we need to add the parameter ",(0,n.jsx)(t.code,{children:"self: none"})," to use it properly."]}),"\n",(0,n.jsxs)(t.p,{children:["As you can see, later in ",(0,n.jsx)(t.code,{children:"main.typ"}),", we apply the global style settings in ",(0,n.jsx)(t.code,{children:"init"})," using ",(0,n.jsx)(t.code,{children:"#show: init"}),", where ",(0,n.jsx)(t.code,{children:"init"})," is bound and unpacked through ",(0,n.jsx)(t.code,{children:"utils.methods(s)"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["If you pay extra attention, you'll notice that the ",(0,n.jsx)(t.code,{children:"register"})," function has an independent ",(0,n.jsx)(t.code,{children:"self"})," at the end. This actually represents returning the modified ",(0,n.jsx)(t.code,{children:"self"})," as the return value, which will be saved in ",(0,n.jsx)(t.code,{children:"#let s = .."}),". This line is therefore indispensable."]}),"\n",(0,n.jsx)(t.h2,{id:"color-theme",children:"Color Theme"}),"\n",(0,n.jsxs)(t.p,{children:["Choosing an attractive color theme for your slides is crucial. Touying provides built-in color theme support to minimize API differences between different themes. Touying offers two dimensions of color selection: the first is ",(0,n.jsx)(t.code,{children:"neutral"}),", ",(0,n.jsx)(t.code,{children:"primary"}),", ",(0,n.jsx)(t.code,{children:"secondary"}),", and ",(0,n.jsx)(t.code,{children:"tertiary"})," for hue distinction, with ",(0,n.jsx)(t.code,{children:"primary"})," being the most commonly used; the second is ",(0,n.jsx)(t.code,{children:"default"}),", ",(0,n.jsx)(t.code,{children:"light"}),", ",(0,n.jsx)(t.code,{children:"lighter"}),", ",(0,n.jsx)(t.code,{children:"lightest"}),", ",(0,n.jsx)(t.code,{children:"dark"}),", ",(0,n.jsx)(t.code,{children:"darker"}),", and ",(0,n.jsx)(t.code,{children:"darkest"})," for brightness distinction."]}),"\n",(0,n.jsxs)(t.p,{children:["As we are creating the Bamboo theme, we chose a color for the ",(0,n.jsx)(t.code,{children:"primary"})," theme, similar to bamboo (",(0,n.jsx)(t.code,{children:'rgb("#5E8B65")'}),"), and included neutral lightest/darkest as background and font colors."]}),"\n",(0,n.jsxs)(t.p,{children:["As shown in the code below, we use ",(0,n.jsx)(t.code,{children:"(self.methods.colors)(self: self, ..)"})," to modify the color theme. Essentially, it is a wrapper for ",(0,n.jsx)(t.code,{children:"self.colors += (..)"}),"."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#let register(\n self: themes.default.register(),\n aspect-ratio: "16-9",\n) = {\n // color theme\n self = (self.methods.colors)(\n self: self,\n primary: rgb("#5E8B65"),\n neutral-lightest: rgb("#ffffff"),\n neutral-darkest: rgb("#000000"),\n )\n self.page-args += (\n paper: "presentation-" + aspect-ratio,\n )\n self.methods.init = (self: none, body) => {\n set text(size: 20pt)\n body\n }\n self\n}\n'})}),"\n",(0,n.jsxs)(t.p,{children:["After adding the color theme, we can access the color using syntax like ",(0,n.jsx)(t.code,{children:"self.colors.primary"}),"."]}),"\n",(0,n.jsx)(t.p,{children:"It's worth noting that users can change the theme color at any time using:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#let s = (s.methods.colors)(self: s, primary: rgb("#3578B9"))\n'})}),"\n",(0,n.jsx)(t.p,{children:"This flexibility demonstrates Touying's powerful customization capabilities."}),"\n",(0,n.jsx)(t.h2,{id:"practical-custom-alert-method",children:"Practical: Custom Alert Method"}),"\n",(0,n.jsxs)(t.p,{children:["In general, we need to provide a ",(0,n.jsx)(t.code,{children:"#alert[..]"})," function for users, similar to ",(0,n.jsx)(t.code,{children:"#strong[..]"}),". Typically, ",(0,n.jsx)(t.code,{children:"#alert[..]"})," emphasizes text using the primary theme color for aesthetics. We add a line in the ",(0,n.jsx)(t.code,{children:"register"})," function:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:"self.methods.alert = (self: none, it) => text(fill: self.colors.primary, it)\n"})}),"\n",(0,n.jsxs)(t.p,{children:["This code sets the text color to ",(0,n.jsx)(t.code,{children:"self.colors.primary"}),", utilizing the theme's primary color."]}),"\n",(0,n.jsx)(t.h2,{id:"custom-header-and-footer",children:"Custom Header and Footer"}),"\n",(0,n.jsx)(t.p,{children:"Here, assuming you've already read the Page Layout section, we know we should add headers and footers to the slides."}),"\n",(0,n.jsxs)(t.p,{children:["Firstly, we add ",(0,n.jsx)(t.code,{children:"self.bamboo-title = []"}),". This means we save the title of the current slide as a member variable ",(0,n.jsx)(t.code,{children:"self.bamboo-title"}),", stored in ",(0,n.jsx)(t.code,{children:"self"}),". This makes it easy to use in the header and later modifications. Similarly, we create ",(0,n.jsx)(t.code,{children:"self.bamboo-footer"}),", saving the ",(0,n.jsx)(t.code,{children:"footer: []"})," parameter from the ",(0,n.jsx)(t.code,{children:"register"})," function for displaying in the bottom-left corner."]}),"\n",(0,n.jsxs)(t.p,{children:["It's worth noting that our header is actually a content function in the form of ",(0,n.jsx)(t.code,{children:"let header(self) = { .. }"})," with the ",(0,n.jsx)(t.code,{children:"self"})," parameter, allowing us to get the latest information from ",(0,n.jsx)(t.code,{children:"self"}),". For example, ",(0,n.jsx)(t.code,{children:"self.bamboo-title"}),". The footer is similar."]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"components.cell"})," used inside is actually ",(0,n.jsx)(t.code,{children:"#let cell = block.with(width: 100%, height: 100%, above: 0pt, below: 0pt, breakable: false)"}),", and ",(0,n.jsx)(t.code,{children:"show: components.cell"})," is shorthand for ",(0,n.jsx)(t.code,{children:"components.cell(body)"}),". The ",(0,n.jsx)(t.code,{children:"show: pad.with(.4em)"})," in the footer is similar."]}),"\n",(0,n.jsxs)(t.p,{children:["Another point to note is the ",(0,n.jsx)(t.code,{children:"states"})," module, which contains many counters and state-related content. For example, ",(0,n.jsx)(t.code,{children:"states.current-section-title"})," is used to display the current ",(0,n.jsx)(t.code,{children:"section"}),", and ",(0,n.jsx)(t.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'})," is used to display the current page number and total number of pages."]}),"\n",(0,n.jsxs)(t.p,{children:["We observe the usage of ",(0,n.jsx)(t.code,{children:"utils.call-or-display(self, self.bamboo-footer)"})," to display ",(0,n.jsx)(t.code,{children:"self.bamboo-footer"}),". This is used to handle situations like ",(0,n.jsx)(t.code,{children:"self.bamboo-footer = (self) => {..}"}),", ensuring a unified approach to displaying content functions and content."]}),"\n",(0,n.jsxs)(t.p,{children:["To ensure proper display of the header and footer and sufficient spacing from the main content, we also set margins, such as ",(0,n.jsx)(t.code,{children:"self.page-args += (margin: (top: 4em, bottom: 1.5em, x: 2em))"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["We also need to customize a ",(0,n.jsx)(t.code,{children:"slide"})," method that accepts ",(0,n.jsx)(t.code,{children:"slide(self: none, title: auto, ..args)"}),". The first ",(0,n.jsx)(t.code,{children:"self: none"})," is a required method parameter for getting the latest ",(0,n.jsx)(t.code,{children:"self"}),". The second ",(0,n.jsx)(t.code,{children:"title"})," is used to update ",(0,n.jsx)(t.code,{children:"self.bamboo-title"})," for displaying in the header. The third ",(0,n.jsx)(t.code,{children:"..args"})," collects the remaining parameters and passes them to ",(0,n.jsx)(t.code,{children:"(self.methods.touying-slide)(self: self, ..args)"}),", which is necessary for the Touying ",(0,n.jsx)(t.code,{children:"slide"})," functionality to work properly. Additionally, we need to register this method in the ",(0,n.jsx)(t.code,{children:"register"})," function with ",(0,n.jsx)(t.code,{children:"self.methods.slide = slide"}),"."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'// bamboo.typ\n#import "@preview/touying:0.4.1": *\n\n#let slide(self: none, title: auto, ..args) = {\n if title != auto {\n self.bamboo-title = title\n }\n (self.methods.touying-slide)(self: self, ..args)\n}\n\n#let register(\n self: themes.default.register(),\n aspect-ratio: "16-9",\n footer: [],\n) = {\n // color theme\n self = (self.methods.colors)(\n self: self,\n primary: rgb("#5E8B65"),\n neutral-lightest: rgb("#ffffff"),\n neutral-darkest: rgb("#000000"),\n )\n // variables for later use\n self.bamboo-title = []\n self.bamboo-footer = footer\n // set page\n let header(self) = {\n set align(top)\n show: components.cell.with(fill: self.colors.primary, inset: 1em)\n set align(horizon)\n set text(fill: self.colors.neutral-lightest, size: .7em)\n states.current-section-title\n linebreak()\n set text(size: 1.5em)\n utils.call-or-display(self, self.bamboo-title)\n }\n let footer(self) = {\n set align(bottom)\n show: pad.with(.4em)\n set text(fill: self.colors.neutral-darkest, size: .8em)\n utils.call-or-display(self, self.bamboo-footer)\n h(1fr)\n states.slide-counter.display() + " / " + states.last-slide-number\n }\n self.page-args += (\n paper: "presentation-" + aspect-ratio,\n header: header,\n footer: footer,\n margin: (top: 4em, bottom: 1.5em, x: 2em),\n )\n // register methods\n self.methods.slide = slide\n self.methods.alert = (self: none, it) => text(fill: self.colors.primary, it)\n self.methods.init = (self: none, body) => {\n set text(size: 20pt)\n body\n }\n self\n}\n\n\n// main.typ\n#import "@preview/touying:0.4.1": *\n#import "bamboo.typ"\n\n#let s = bamboo.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= First Section\n\n== First Slide\n\n#slide[\n A slide with a title and an *important* information.\n]\n'})}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://github.com/touying-typ/touying/assets/34951714/d33bcda7-c032-4b11-b392-5b939d9a0a47",alt:"image"})}),"\n",(0,n.jsx)(t.h2,{id:"custom-special-slide",children:"Custom Special Slide"}),"\n",(0,n.jsxs)(t.p,{children:["Building upon the basic slide, we further add some special slide functions such as ",(0,n.jsx)(t.code,{children:"title-slide"}),", ",(0,n.jsx)(t.code,{children:"focus-slide"}),", and a custom ",(0,n.jsx)(t.code,{children:"slides"})," method."]}),"\n",(0,n.jsxs)(t.p,{children:["For the ",(0,n.jsx)(t.code,{children:"title-slide"})," method, first, we call ",(0,n.jsx)(t.code,{children:"self = utils.empty-page(self)"}),". This function clears ",(0,n.jsx)(t.code,{children:"self.page-args.header"}),", ",(0,n.jsx)(t.code,{children:"self.page-args.footer"}),", and sets ",(0,n.jsx)(t.code,{children:"margin"})," to ",(0,n.jsx)(t.code,{children:"0em"}),", creating a blank page effect. Then, we use ",(0,n.jsx)(t.code,{children:"let info = self.info + args.named()"})," to get information stored in ",(0,n.jsx)(t.code,{children:"self.info"})," and update it with the passed ",(0,n.jsx)(t.code,{children:"args.named()"})," for later use as ",(0,n.jsx)(t.code,{children:"info.title"}),". The specific page content ",(0,n.jsx)(t.code,{children:"body"})," will vary for each theme, so we won't go into details here. Finally, we call `(self.methods.touying-slide)(self: self, repeat: none, body"]}),"\n",(0,n.jsxs)(t.p,{children:[")",(0,n.jsx)(t.code,{children:", where "}),"repeat: none",(0,n.jsx)(t.code,{children:"indicates that this page does not require animation effects, and passing the"}),"body` parameter displays its content."]}),"\n",(0,n.jsxs)(t.p,{children:["For the ",(0,n.jsx)(t.code,{children:"new-section-slide"})," method, the process is similar. The only thing to note is that in ",(0,n.jsx)(t.code,{children:"(self.methods.touying-slide)(self: self, repeat: none, section: section, body)"}),", we pass an additional ",(0,n.jsx)(t.code,{children:"section: section"})," parameter to declare the creation of a new section. Another point to note is that besides ",(0,n.jsx)(t.code,{children:"self.methods.new-section-slide = new-section-slide"}),", we also register ",(0,n.jsx)(t.code,{children:"self.methods.touying-new-section-slide = new-section-slide"}),", so ",(0,n.jsx)(t.code,{children:"new-section-slide"})," will be automatically called when encountering a first-level title."]}),"\n",(0,n.jsxs)(t.p,{children:["For the ",(0,n.jsx)(t.code,{children:"focus-slide"})," method, most of the content is similar, but it's worth noting that we use ",(0,n.jsx)(t.code,{children:"self.page-args += (..)"})," to update the page's background color."]}),"\n",(0,n.jsxs)(t.p,{children:["Finally, we update the ",(0,n.jsx)(t.code,{children:"slides(self: none, title-slide: true, slide-level: 1, ..args)"})," method. When ",(0,n.jsx)(t.code,{children:"title-slide"})," is ",(0,n.jsx)(t.code,{children:"true"}),", using ",(0,n.jsx)(t.code,{children:"#show: slides"})," will automatically create a ",(0,n.jsx)(t.code,{children:"title-slide"}),". Setting ",(0,n.jsx)(t.code,{children:"slide-level: 1"})," indicates that the first-level and second-level titles correspond to ",(0,n.jsx)(t.code,{children:"section"})," and ",(0,n.jsx)(t.code,{children:"title"}),", respectively."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{children:'// bamboo.typ\n#import "@preview/touying:0.4.1": *\n\n#let slide(self: none, title: auto, ..args) = {\n if title != auto {\n self.bamboo-title = title\n }\n (self.methods.touying-slide)(self: self, ..args)\n}\n\n#let title-slide(self: none, ..args) = {\n self = utils.empty-page(self)\n let info = self.info + args.named()\n let body = {\n set align(center + horizon)\n block(\n fill: self.colors.primary,\n width: 80%,\n inset: (y: 1em),\n radius: 1em,\n text(size: 2em, fill: self.colors.neutral-lightest, weight: "bold", info.title)\n )\n set text(fill: self.colors.neutral-darkest)\n if info.author != none {\n block(info.author)\n }\n if info.date != none {\n block(if type(info.date) == datetime { info.date.display(self.datetime-format) } else { info.date })\n }\n }\n (self.methods.touying-slide)(self: self, repeat: none, body)\n}\n\n#let new-section-slide(self: none, section) = {\n self = utils.empty-page(self)\n let body = {\n set align(center + horizon)\n set text(size: 2em, fill: self.colors.primary, weight: "bold", style: "italic")\n section\n }\n (self.methods.touying-slide)(self: self, repeat: none, section: section, body)\n}\n\n#let focus-slide(self: none, body) = {\n self = utils.empty-page(self)\n self.page-args += (\n fill: self.colors.primary,\n margin: 2em,\n )\n set text(fill: self.colors.neutral-lightest, size: 2em)\n (self.methods.touying-slide)(self: self, repeat: none, align(horizon + center, body))\n}\n\n#let slides(self: none, title-slide: true, slide-level: 1, ..args) = {\n if title-slide {\n (self.methods.title-slide)(self: self)\n }\n (self.methods.touying-slides)(self: self, slide-level: slide-level, ..args)\n}\n\n#let register(\n self: themes.default.register(),\n aspect-ratio: "16-9",\n footer: [],\n) = {\n // color theme\n self = (self.methods.colors)(\n self: self,\n primary: rgb("#5E8B65"),\n neutral-lightest: rgb("#ffffff"),\n neutral-darkest: rgb("#000000"),\n )\n // variables for later use\n self.bamboo-title = []\n self.bamboo-footer = footer\n // set page\n let header(self) = {\n set align(top)\n show: components.cell.with(fill: self.colors.primary, inset: 1em)\n set align(horizon)\n set text(fill: self.colors.neutral-lightest, size: .7em)\n states.current-section-title\n linebreak()\n set text(size: 1.5em)\n utils.call-or-display(self, self.bamboo-title)\n }\n let footer(self) = {\n set align(bottom)\n show: pad.with(.4em)\n set text(fill: self.colors.neutral-darkest, size: .8em)\n utils.call-or-display(self, self.bamboo-footer)\n h(1fr)\n states.slide-counter.display() + " / " + states.last-slide-number\n }\n self.page-args += (\n paper: "presentation-" + aspect-ratio,\n header: header,\n footer: footer,\n margin: (top: 4em, bottom: 1.5em, x: 2em),\n )\n // register methods\n self.methods.slide = slide\n self.methods.title-slide = title-slide\n self.methods.new-section-slide = new-section-slide\n self.methods.touying-new-section-slide = new-section-slide\n self.methods.focus-slide = focus-slide\n self.methods.slides = slides\n self.methods.alert = (self: none, it) => text(fill: self.colors.primary, it)\n self.methods.init = (self: none, body) => {\n set text(size: 20pt)\n body\n }\n self\n}\n\n\n// main.typ\n#import "@preview/touying:0.4.1": *\n#import "bamboo.typ"\n\n#let s = bamboo.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= First Section\n\n== First Slide\n\n#slide[\n A slide with a title and an *important* information.\n]\n\n#focus-slide[\n Focus on it!\n]\n'})}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://github.com/touying-typ/touying/assets/34951714/03c5ad02-8ff4-4068-9664-d9cfad79baaf",alt:"image"})}),"\n",(0,n.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsx)(t.p,{children:"Congratulations! You've created a simple and elegant theme. Perhaps you may find that Touying introduces a wealth of concepts, making it initially challenging to grasp. This is normal, as Touying opts for functionality over simplicity. However, thanks to Touying's comprehensive and unified approach, you can easily extract commonalities between different themes and transfer your knowledge seamlessly. You can also save global variables, modify existing themes, or switch between themes effortlessly, showcasing the benefits of Touying's decoupling and object-oriented programming."})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>r,a:()=>l});var n=s(7294);const i={},o=n.createContext(i);function l(e){const t=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/886cfe15.b0d04345.js b/assets/js/886cfe15.b0d04345.js deleted file mode 100644 index c166fd65e..000000000 --- a/assets/js/886cfe15.b0d04345.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8563],{7027:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>r,toc:()=>a});var n=s(5893),i=s(1151);const o={sidebar_position:11},l="Creating Your Own Theme",r={id:"build-your-own-theme",title:"Creating Your Own Theme",description:"Creating your own theme with Touying might seem a bit complex initially due to the introduction of various concepts. However, fear not; if you successfully create a custom theme with Touying, you'll likely experience the convenience and powerful customization features it offers. You can refer to the source code of existing themes for guidance. The key steps to implement are:",source:"@site/versioned_docs/version-0.4.1/build-your-own-theme.md",sourceDirName:".",slug:"/build-your-own-theme",permalink:"/touying/docs/build-your-own-theme",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/build-your-own-theme.md",tags:[],version:"0.4.1",sidebarPosition:11,frontMatter:{sidebar_position:11},sidebar:"tutorialSidebar",previous:{title:"Aqua Theme",permalink:"/touying/docs/themes/aqua"},next:{title:"Progress",permalink:"/touying/docs/category/progress"}},d={},a=[{value:"Modifying Existing Themes",id:"modifying-existing-themes",level:2},{value:"Import",id:"import",level:2},{value:"Register Function and Init Method",id:"register-function-and-init-method",level:2},{value:"Color Theme",id:"color-theme",level:2},{value:"Practical: Custom Alert Method",id:"practical-custom-alert-method",level:2},{value:"Custom Header and Footer",id:"custom-header-and-footer",level:2},{value:"Custom Special Slide",id:"custom-special-slide",level:2},{value:"Conclusion",id:"conclusion",level:2}];function c(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"creating-your-own-theme",children:"Creating Your Own Theme"}),"\n",(0,n.jsxs)(t.p,{children:["Creating your own theme with Touying might seem a bit complex initially due to the introduction of various concepts. However, fear not; if you successfully create a custom theme with Touying, you'll likely experience the convenience and powerful customization features it offers. You can refer to the ",(0,n.jsx)(t.a,{href:"https://github.com/touying-typ/touying/tree/main/themes",children:"source code of existing themes"})," for guidance. The key steps to implement are:"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"register"})," function to initialize the global singleton ",(0,n.jsx)(t.code,{children:"s"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"init"})," method."]}),"\n",(0,n.jsxs)(t.li,{children:["Define a color theme by modifying the ",(0,n.jsx)(t.code,{children:"self.colors"})," member variable."]}),"\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"alert"})," method (optional)."]}),"\n",(0,n.jsx)(t.li,{children:"Customize the header."}),"\n",(0,n.jsx)(t.li,{children:"Customize the footer."}),"\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"slide"})," method."]}),"\n",(0,n.jsxs)(t.li,{children:["Customize special slide methods, such as ",(0,n.jsx)(t.code,{children:"title-slide"})," and ",(0,n.jsx)(t.code,{children:"focus-slide"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:["Customize the ",(0,n.jsx)(t.code,{children:"slides"})," method (optional)."]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"To demonstrate creating a simple and elegant Bamboo theme, let's follow the steps."}),"\n",(0,n.jsx)(t.h2,{id:"modifying-existing-themes",children:"Modifying Existing Themes"}),"\n",(0,n.jsx)(t.p,{children:"If you wish to modify a theme within the Touying package locally instead of creating one from scratch, you can achieve this by following these steps:"}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["Copy the ",(0,n.jsx)(t.a,{href:"https://github.com/touying-typ/touying/tree/main/themes",children:"theme code"})," from the ",(0,n.jsx)(t.code,{children:"themes"})," directory to your local machine. For example, copy ",(0,n.jsx)(t.code,{children:"themes/university.typ"})," to a local file named ",(0,n.jsx)(t.code,{children:"university.typ"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:["Remove all ",(0,n.jsx)(t.code,{children:'#import "../xxx.typ"'})," commands at the top of the ",(0,n.jsx)(t.code,{children:"university.typ"})," file."]}),"\n",(0,n.jsxs)(t.li,{children:["Add ",(0,n.jsx)(t.code,{children:'#import "@preview/touying:0.4.1": *'})," at the top of the ",(0,n.jsx)(t.code,{children:"university.typ"})," file to import all modules."]}),"\n",(0,n.jsxs)(t.li,{children:["Replace ",(0,n.jsx)(t.code,{children:"self: s"})," in the ",(0,n.jsx)(t.code,{children:"register"})," function with ",(0,n.jsx)(t.code,{children:"self: themes.default.register()"})," ",(0,n.jsx)(t.strong,{children:"(Important)"}),"."]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"You can then import and use the theme by:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "university.typ"\n\n#let s = university.register(aspect-ratio: "16-9")\n'})}),"\n",(0,n.jsxs)(t.p,{children:["For a specific example, refer to: ",(0,n.jsx)(t.a,{href:"https://typst.app/project/rqRuzg0keo_ZEB5AdxjweA",children:"https://typst.app/project/rqRuzg0keo_ZEB5AdxjweA"})]}),"\n",(0,n.jsx)(t.h2,{id:"import",children:"Import"}),"\n",(0,n.jsx)(t.p,{children:"Depending on whether the theme is for personal use or part of Touying, you can import in two ways:"}),"\n",(0,n.jsx)(t.p,{children:"If for personal use:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n'})}),"\n",(0,n.jsx)(t.p,{children:"If part of Touying themes:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#import "../utils/utils.typ"\n#import "../utils/states.typ"\n#import "../utils/components.typ"\n'})}),"\n",(0,n.jsxs)(t.p,{children:["Additionally, add the import statement in Touying's ",(0,n.jsx)(t.code,{children:"themes/themes.typ"}),":"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{children:'#import "bamboo.typ"\n'})}),"\n",(0,n.jsx)(t.h2,{id:"register-function-and-init-method",children:"Register Function and Init Method"}),"\n",(0,n.jsx)(t.p,{children:"Next, we'll distinguish between the bamboo.typ template file and the main.typ file, the latter of which is sometimes omitted."}),"\n",(0,n.jsx)(t.p,{children:"Generally, the first step in creating slides is to determine font size and page aspect ratio. Therefore, we need to register an initialization method:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'// bamboo.typ\n#import "@preview/touying:0.4.1": *\n\n#let register(\n self: themes.default.register(),\n aspect-ratio: "16-9",\n) = {\n self.page-args += (\n paper: "presentation-" + aspect-ratio,\n )\n self.methods.init = (self: none, body) => {\n set text(size: 20pt)\n body\n }\n self\n}\n\n// main.typ\n#import "@preview/touying:0.4.1": *\n#import "bamboo.typ"\n\n#let s = bamboo.register(aspect-ratio: "16-9")\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= First Section\n\n== First Slide\n\n#slide[\n A slide with a title and an *important* information.\n]\n'})}),"\n",(0,n.jsxs)(t.p,{children:["As you can see, we created a ",(0,n.jsx)(t.code,{children:"register"})," function and passed an ",(0,n.jsx)(t.code,{children:"aspect-ratio"})," parameter to set the page aspect ratio. We get default ",(0,n.jsx)(t.code,{children:"self"})," by ",(0,n.jsx)(t.code,{children:"self: themes.default.register()"}),". As you might already know, in Touying, we should not use ",(0,n.jsx)(t.code,{children:"set page(..)"})," to set page parameters but rather use the syntax ",(0,n.jsx)(t.code,{children:"self.page-args += (..)"})," to set them, as explained in the Page Layout section."]}),"\n",(0,n.jsxs)(t.p,{children:["In addition, we registered a ",(0,n.jsx)(t.code,{children:"self.methods.init"})," method, which can be used for some global style settings. For example, in this case, we added ",(0,n.jsx)(t.code,{children:"set text(size: 20pt)"})," to set the font size. You can also place additional global style settings here, such as ",(0,n.jsx)(t.code,{children:"set par(justify: true)"}),". Since the ",(0,n.jsx)(t.code,{children:"init"})," function is placed inside ",(0,n.jsx)(t.code,{children:"self.methods"}),", it is a method, not a regular function. Therefore, we need to add the parameter ",(0,n.jsx)(t.code,{children:"self: none"})," to use it properly."]}),"\n",(0,n.jsxs)(t.p,{children:["As you can see, later in ",(0,n.jsx)(t.code,{children:"main.typ"}),", we apply the global style settings in ",(0,n.jsx)(t.code,{children:"init"})," using ",(0,n.jsx)(t.code,{children:"#show: init"}),", where ",(0,n.jsx)(t.code,{children:"init"})," is bound and unpacked through ",(0,n.jsx)(t.code,{children:"utils.methods(s)"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["If you pay extra attention, you'll notice that the ",(0,n.jsx)(t.code,{children:"register"})," function has an independent ",(0,n.jsx)(t.code,{children:"self"})," at the end. This actually represents returning the modified ",(0,n.jsx)(t.code,{children:"self"})," as the return value, which will be saved in ",(0,n.jsx)(t.code,{children:"#let s = .."}),". This line is therefore indispensable."]}),"\n",(0,n.jsx)(t.h2,{id:"color-theme",children:"Color Theme"}),"\n",(0,n.jsxs)(t.p,{children:["Choosing an attractive color theme for your slides is crucial. Touying provides built-in color theme support to minimize API differences between different themes. Touying offers two dimensions of color selection: the first is ",(0,n.jsx)(t.code,{children:"neutral"}),", ",(0,n.jsx)(t.code,{children:"primary"}),", ",(0,n.jsx)(t.code,{children:"secondary"}),", and ",(0,n.jsx)(t.code,{children:"tertiary"})," for hue distinction, with ",(0,n.jsx)(t.code,{children:"primary"})," being the most commonly used; the second is ",(0,n.jsx)(t.code,{children:"default"}),", ",(0,n.jsx)(t.code,{children:"light"}),", ",(0,n.jsx)(t.code,{children:"lighter"}),", ",(0,n.jsx)(t.code,{children:"lightest"}),", ",(0,n.jsx)(t.code,{children:"dark"}),", ",(0,n.jsx)(t.code,{children:"darker"}),", and ",(0,n.jsx)(t.code,{children:"darkest"})," for brightness distinction."]}),"\n",(0,n.jsxs)(t.p,{children:["As we are creating the Bamboo theme, we chose a color for the ",(0,n.jsx)(t.code,{children:"primary"})," theme, similar to bamboo (",(0,n.jsx)(t.code,{children:'rgb("#5E8B65")'}),"), and included neutral lightest/darkest as background and font colors."]}),"\n",(0,n.jsxs)(t.p,{children:["As shown in the code below, we use ",(0,n.jsx)(t.code,{children:"(self.methods.colors)(self: self, ..)"})," to modify the color theme. Essentially, it is a wrapper for ",(0,n.jsx)(t.code,{children:"self.colors += (..)"}),"."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#let register(\n self: themes.default.register(),\n aspect-ratio: "16-9",\n) = {\n // color theme\n self = (self.methods.colors)(\n self: self,\n primary: rgb("#5E8B65"),\n neutral-lightest: rgb("#ffffff"),\n neutral-darkest: rgb("#000000"),\n )\n self.page-args += (\n paper: "presentation-" + aspect-ratio,\n )\n self.methods.init = (self: none, body) => {\n set text(size: 20pt)\n body\n }\n self\n}\n'})}),"\n",(0,n.jsxs)(t.p,{children:["After adding the color theme, we can access the color using syntax like ",(0,n.jsx)(t.code,{children:"self.colors.primary"}),"."]}),"\n",(0,n.jsx)(t.p,{children:"It's worth noting that users can change the theme color at any time using:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'#let s = (s.methods.colors)(self: s, primary: rgb("#3578B9"))\n'})}),"\n",(0,n.jsx)(t.p,{children:"This flexibility demonstrates Touying's powerful customization capabilities."}),"\n",(0,n.jsx)(t.h2,{id:"practical-custom-alert-method",children:"Practical: Custom Alert Method"}),"\n",(0,n.jsxs)(t.p,{children:["In general, we need to provide a ",(0,n.jsx)(t.code,{children:"#alert[..]"})," function for users, similar to ",(0,n.jsx)(t.code,{children:"#strong[..]"}),". Typically, ",(0,n.jsx)(t.code,{children:"#alert[..]"})," emphasizes text using the primary theme color for aesthetics. We add a line in the ",(0,n.jsx)(t.code,{children:"register"})," function:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:"self.methods.alert = (self: none, it) => text(fill: self.colors.primary, it)\n"})}),"\n",(0,n.jsxs)(t.p,{children:["This code sets the text color to ",(0,n.jsx)(t.code,{children:"self.colors.primary"}),", utilizing the theme's primary color."]}),"\n",(0,n.jsx)(t.h2,{id:"custom-header-and-footer",children:"Custom Header and Footer"}),"\n",(0,n.jsx)(t.p,{children:"Here, assuming you've already read the Page Layout section, we know we should add headers and footers to the slides."}),"\n",(0,n.jsxs)(t.p,{children:["Firstly, we add ",(0,n.jsx)(t.code,{children:"self.bamboo-title = []"}),". This means we save the title of the current slide as a member variable ",(0,n.jsx)(t.code,{children:"self.bamboo-title"}),", stored in ",(0,n.jsx)(t.code,{children:"self"}),". This makes it easy to use in the header and later modifications. Similarly, we create ",(0,n.jsx)(t.code,{children:"self.bamboo-footer"}),", saving the ",(0,n.jsx)(t.code,{children:"footer: []"})," parameter from the ",(0,n.jsx)(t.code,{children:"register"})," function for displaying in the bottom-left corner."]}),"\n",(0,n.jsxs)(t.p,{children:["It's worth noting that our header is actually a content function in the form of ",(0,n.jsx)(t.code,{children:"let header(self) = { .. }"})," with the ",(0,n.jsx)(t.code,{children:"self"})," parameter, allowing us to get the latest information from ",(0,n.jsx)(t.code,{children:"self"}),". For example, ",(0,n.jsx)(t.code,{children:"self.bamboo-title"}),". The footer is similar."]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"components.cell"})," used inside is actually ",(0,n.jsx)(t.code,{children:"#let cell = block.with(width: 100%, height: 100%, above: 0pt, below: 0pt, breakable: false)"}),", and ",(0,n.jsx)(t.code,{children:"show: components.cell"})," is shorthand for ",(0,n.jsx)(t.code,{children:"components.cell(body)"}),". The ",(0,n.jsx)(t.code,{children:"show: pad.with(.4em)"})," in the footer is similar."]}),"\n",(0,n.jsxs)(t.p,{children:["Another point to note is the ",(0,n.jsx)(t.code,{children:"states"})," module, which contains many counters and state-related content. For example, ",(0,n.jsx)(t.code,{children:"states.current-section-title"})," is used to display the current ",(0,n.jsx)(t.code,{children:"section"}),", and ",(0,n.jsx)(t.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'})," is used to display the current page number and total number of pages."]}),"\n",(0,n.jsxs)(t.p,{children:["We observe the usage of ",(0,n.jsx)(t.code,{children:"utils.call-or-display(self, self.bamboo-footer)"})," to display ",(0,n.jsx)(t.code,{children:"self.bamboo-footer"}),". This is used to handle situations like ",(0,n.jsx)(t.code,{children:"self.bamboo-footer = (self) => {..}"}),", ensuring a unified approach to displaying content functions and content."]}),"\n",(0,n.jsxs)(t.p,{children:["To ensure proper display of the header and footer and sufficient spacing from the main content, we also set margins, such as ",(0,n.jsx)(t.code,{children:"self.page-args += (margin: (top: 4em, bottom: 1.5em, x: 2em))"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["We also need to customize a ",(0,n.jsx)(t.code,{children:"slide"})," method that accepts ",(0,n.jsx)(t.code,{children:"slide(self: none, title: auto, ..args)"}),". The first ",(0,n.jsx)(t.code,{children:"self: none"})," is a required method parameter for getting the latest ",(0,n.jsx)(t.code,{children:"self"}),". The second ",(0,n.jsx)(t.code,{children:"title"})," is used to update ",(0,n.jsx)(t.code,{children:"self.bamboo-title"})," for displaying in the header. The third ",(0,n.jsx)(t.code,{children:"..args"})," collects the remaining parameters and passes them to ",(0,n.jsx)(t.code,{children:"(self.methods.touying-slide)(self: self, ..args)"}),", which is necessary for the Touying ",(0,n.jsx)(t.code,{children:"slide"})," functionality to work properly. Additionally, we need to register this method in the ",(0,n.jsx)(t.code,{children:"register"})," function with ",(0,n.jsx)(t.code,{children:"self.methods.slide = slide"}),"."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:'// bamboo.typ\n#import "@preview/touying:0.4.1": *\n\n#let slide(self: none, title: auto, ..args) = {\n if title != auto {\n self.bamboo-title = title\n }\n (self.methods.touying-slide)(self: self, ..args)\n}\n\n#let register(\n self: themes.default.register(),\n aspect-ratio: "16-9",\n footer: [],\n) = {\n // color theme\n self = (self.methods.colors)(\n self: self,\n primary: rgb("#5E8B65"),\n neutral-lightest: rgb("#ffffff"),\n neutral-darkest: rgb("#000000"),\n )\n // variables for later use\n self.bamboo-title = []\n self.bamboo-footer = footer\n // set page\n let header(self) = {\n set align(top)\n show: components.cell.with(fill: self.colors.primary, inset: 1em)\n set align(horizon)\n set text(fill: self.colors.neutral-lightest, size: .7em)\n states.current-section-title\n linebreak()\n set text(size: 1.5em)\n utils.call-or-display(self, self.bamboo-title)\n }\n let footer(self) = {\n set align(bottom)\n show: pad.with(.4em)\n set text(fill: self.colors.neutral-darkest, size: .8em)\n utils.call-or-display(self, self.bamboo-footer)\n h(1fr)\n states.slide-counter.display() + " / " + states.last-slide-number\n }\n self.page-args += (\n paper: "presentation-" + aspect-ratio,\n header: header,\n footer: footer,\n margin: (top: 4em, bottom: 1.5em, x: 2em),\n )\n // register methods\n self.methods.slide = slide\n self.methods.alert = (self: none, it) => text(fill: self.colors.primary, it)\n self.methods.init = (self: none, body) => {\n set text(size: 20pt)\n body\n }\n self\n}\n\n\n// main.typ\n#import "@preview/touying:0.4.1": *\n#import "bamboo.typ"\n\n#let s = bamboo.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= First Section\n\n== First Slide\n\n#slide[\n A slide with a title and an *important* information.\n]\n'})}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://github.com/touying-typ/touying/assets/34951714/d33bcda7-c032-4b11-b392-5b939d9a0a47",alt:"image"})}),"\n",(0,n.jsx)(t.h2,{id:"custom-special-slide",children:"Custom Special Slide"}),"\n",(0,n.jsxs)(t.p,{children:["Building upon the basic slide, we further add some special slide functions such as ",(0,n.jsx)(t.code,{children:"title-slide"}),", ",(0,n.jsx)(t.code,{children:"focus-slide"}),", and a custom ",(0,n.jsx)(t.code,{children:"slides"})," method."]}),"\n",(0,n.jsxs)(t.p,{children:["For the ",(0,n.jsx)(t.code,{children:"title-slide"})," method, first, we call ",(0,n.jsx)(t.code,{children:"self = utils.empty-page(self)"}),". This function clears ",(0,n.jsx)(t.code,{children:"self.page-args.header"}),", ",(0,n.jsx)(t.code,{children:"self.page-args.footer"}),", and sets ",(0,n.jsx)(t.code,{children:"margin"})," to ",(0,n.jsx)(t.code,{children:"0em"}),", creating a blank page effect. Then, we use ",(0,n.jsx)(t.code,{children:"let info = self.info + args.named()"})," to get information stored in ",(0,n.jsx)(t.code,{children:"self.info"})," and update it with the passed ",(0,n.jsx)(t.code,{children:"args.named()"})," for later use as ",(0,n.jsx)(t.code,{children:"info.title"}),". The specific page content ",(0,n.jsx)(t.code,{children:"body"})," will vary for each theme, so we won't go into details here. Finally, we call `(self.methods.touying-slide)(self: self, repeat: none, body"]}),"\n",(0,n.jsxs)(t.p,{children:[")",(0,n.jsx)(t.code,{children:", where "}),"repeat: none",(0,n.jsx)(t.code,{children:"indicates that this page does not require animation effects, and passing the"}),"body` parameter displays its content."]}),"\n",(0,n.jsxs)(t.p,{children:["For the ",(0,n.jsx)(t.code,{children:"new-section-slide"})," method, the process is similar. The only thing to note is that in ",(0,n.jsx)(t.code,{children:"(self.methods.touying-slide)(self: self, repeat: none, section: section, body)"}),", we pass an additional ",(0,n.jsx)(t.code,{children:"section: section"})," parameter to declare the creation of a new section. Another point to note is that besides ",(0,n.jsx)(t.code,{children:"self.methods.new-section-slide = new-section-slide"}),", we also register ",(0,n.jsx)(t.code,{children:"self.methods.touying-new-section-slide = new-section-slide"}),", so ",(0,n.jsx)(t.code,{children:"new-section-slide"})," will be automatically called when encountering a first-level title."]}),"\n",(0,n.jsxs)(t.p,{children:["For the ",(0,n.jsx)(t.code,{children:"focus-slide"})," method, most of the content is similar, but it's worth noting that we use ",(0,n.jsx)(t.code,{children:"self.page-args += (..)"})," to update the page's background color."]}),"\n",(0,n.jsxs)(t.p,{children:["Finally, we update the ",(0,n.jsx)(t.code,{children:"slides(self: none, title-slide: true, slide-level: 1, ..args)"})," method. When ",(0,n.jsx)(t.code,{children:"title-slide"})," is ",(0,n.jsx)(t.code,{children:"true"}),", using ",(0,n.jsx)(t.code,{children:"#show: slides"})," will automatically create a ",(0,n.jsx)(t.code,{children:"title-slide"}),". Setting ",(0,n.jsx)(t.code,{children:"slide-level: 1"})," indicates that the first-level and second-level titles correspond to ",(0,n.jsx)(t.code,{children:"section"})," and ",(0,n.jsx)(t.code,{children:"title"}),", respectively."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{children:'// bamboo.typ\n#import "@preview/touying:0.4.1": *\n\n#let slide(self: none, title: auto, ..args) = {\n if title != auto {\n self.bamboo-title = title\n }\n (self.methods.touying-slide)(self: self, ..args)\n}\n\n#let title-slide(self: none, ..args) = {\n self = utils.empty-page(self)\n let info = self.info + args.named()\n let body = {\n set align(center + horizon)\n block(\n fill: self.colors.primary,\n width: 80%,\n inset: (y: 1em),\n radius: 1em,\n text(size: 2em, fill: self.colors.neutral-lightest, weight: "bold", info.title)\n )\n set text(fill: self.colors.neutral-darkest)\n if info.author != none {\n block(info.author)\n }\n if info.date != none {\n block(if type(info.date) == datetime { info.date.display(self.datetime-format) } else { info.date })\n }\n }\n (self.methods.touying-slide)(self: self, repeat: none, body)\n}\n\n#let new-section-slide(self: none, section) = {\n self = utils.empty-page(self)\n let body = {\n set align(center + horizon)\n set text(size: 2em, fill: self.colors.primary, weight: "bold", style: "italic")\n section\n }\n (self.methods.touying-slide)(self: self, repeat: none, section: section, body)\n}\n\n#let focus-slide(self: none, body) = {\n self = utils.empty-page(self)\n self.page-args += (\n fill: self.colors.primary,\n margin: 2em,\n )\n set text(fill: self.colors.neutral-lightest, size: 2em)\n (self.methods.touying-slide)(self: self, repeat: none, align(horizon + center, body))\n}\n\n#let slides(self: none, title-slide: true, slide-level: 1, ..args) = {\n if title-slide {\n (self.methods.title-slide)(self: self)\n }\n (self.methods.touying-slides)(self: self, slide-level: slide-level, ..args)\n}\n\n#let register(\n self: themes.default.register(),\n aspect-ratio: "16-9",\n footer: [],\n) = {\n // color theme\n self = (self.methods.colors)(\n self: self,\n primary: rgb("#5E8B65"),\n neutral-lightest: rgb("#ffffff"),\n neutral-darkest: rgb("#000000"),\n )\n // variables for later use\n self.bamboo-title = []\n self.bamboo-footer = footer\n // set page\n let header(self) = {\n set align(top)\n show: components.cell.with(fill: self.colors.primary, inset: 1em)\n set align(horizon)\n set text(fill: self.colors.neutral-lightest, size: .7em)\n states.current-section-title\n linebreak()\n set text(size: 1.5em)\n utils.call-or-display(self, self.bamboo-title)\n }\n let footer(self) = {\n set align(bottom)\n show: pad.with(.4em)\n set text(fill: self.colors.neutral-darkest, size: .8em)\n utils.call-or-display(self, self.bamboo-footer)\n h(1fr)\n states.slide-counter.display() + " / " + states.last-slide-number\n }\n self.page-args += (\n paper: "presentation-" + aspect-ratio,\n header: header,\n footer: footer,\n margin: (top: 4em, bottom: 1.5em, x: 2em),\n )\n // register methods\n self.methods.slide = slide\n self.methods.title-slide = title-slide\n self.methods.new-section-slide = new-section-slide\n self.methods.touying-new-section-slide = new-section-slide\n self.methods.focus-slide = focus-slide\n self.methods.slides = slides\n self.methods.alert = (self: none, it) => text(fill: self.colors.primary, it)\n self.methods.init = (self: none, body) => {\n set text(size: 20pt)\n body\n }\n self\n}\n\n\n// main.typ\n#import "@preview/touying:0.4.1": *\n#import "bamboo.typ"\n\n#let s = bamboo.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= First Section\n\n== First Slide\n\n#slide[\n A slide with a title and an *important* information.\n]\n\n#focus-slide[\n Focus on it!\n]\n'})}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://github.com/touying-typ/touying/assets/34951714/03c5ad02-8ff4-4068-9664-d9cfad79baaf",alt:"image"})}),"\n",(0,n.jsx)(t.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsx)(t.p,{children:"Congratulations! You've created a simple and elegant theme. Perhaps you may find that Touying introduces a wealth of concepts, making it initially challenging to grasp. This is normal, as Touying opts for functionality over simplicity. However, thanks to Touying's comprehensive and unified approach, you can easily extract commonalities between different themes and transfer your knowledge seamlessly. You can also save global variables, modify existing themes, or switch between themes effortlessly, showcasing the benefits of Touying's decoupling and object-oriented programming."})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>r,a:()=>l});var n=s(7294);const i={},o=n.createContext(i);function l(e){const t=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/8992ec7c.81fd20f3.js b/assets/js/8992ec7c.81fd20f3.js new file mode 100644 index 000000000..fe22226fa --- /dev/null +++ b/assets/js/8992ec7c.81fd20f3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[160],{6770:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>r,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var s=n(5893),i=n(1151);const o={sidebar_position:6},l="Global Settings",a={id:"global-settings",title:"Global Settings",description:"Global Styles",source:"@site/versioned_docs/version-0.4.2/global-settings.md",sourceDirName:".",slug:"/global-settings",permalink:"/touying/docs/global-settings",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/global-settings.md",tags:[],version:"0.4.2",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"tutorialSidebar",previous:{title:"Page Layout",permalink:"/touying/docs/layout"},next:{title:"Multi-File Architecture",permalink:"/touying/docs/multi-file"}},r={},d=[{value:"Global Styles",id:"global-styles",level:2},{value:"Global Information",id:"global-information",level:2},{value:"State Initialization",id:"state-initialization",level:2}];function c(e){const t={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"global-settings",children:"Global Settings"}),"\n",(0,s.jsx)(t.h2,{id:"global-styles",children:"Global Styles"}),"\n",(0,s.jsxs)(t.p,{children:["For Touying, global styles refer to set rules or show rules that need to be applied everywhere, such as ",(0,s.jsx)(t.code,{children:"#set text(size: 20pt)"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Themes in Touying encapsulate some of their own global styles, which are placed in ",(0,s.jsx)(t.code,{children:"#show: init"}),". For example, the university theme encapsulates the following:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"self.methods.init = (self: none, body) => {\n set text(size: 25pt)\n show footnote.entry: set text(size: .6em)\n body\n}\n"})}),"\n",(0,s.jsxs)(t.p,{children:["If you are not a theme creator but want to add your own global styles to your slides, you can simply place them after ",(0,s.jsx)(t.code,{children:"#show: init"})," and before ",(0,s.jsx)(t.code,{children:"#show: slides"}),". For example, the metropolis theme recommends adding the following global styles:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'#let s = themes.metropolis.register(aspect-ratio: "16-9")\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n// global styles\n#set text(font: "Fira Sans", weight: "light", size: 20pt)\n#show math.equation: set text(font: "Fira Math")\n#set strong(delta: 100)\n#set par(justify: true)\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,s.jsxs)(t.p,{children:["However, note that you should not use ",(0,s.jsx)(t.code,{children:"#set page(..)"}),". Instead, modify ",(0,s.jsx)(t.code,{children:"s.page-args"})," and ",(0,s.jsx)(t.code,{children:"s.padding"}),", for example:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"#(s.page-args += (\n margin: (x: 0em, y: 2em),\n header: align(top)[Header],\n footer: align(bottom)[Footer],\n header-ascent: 0em,\n footer-descent: 0em,\n))\n#(s.padding += (x: 4em, y: 0em))\n"})}),"\n",(0,s.jsx)(t.h2,{id:"global-information",children:"Global Information"}),"\n",(0,s.jsx)(t.p,{children:"Like Beamer, Touying, through an OOP-style unified API design, can help you better maintain global information, allowing you to easily switch between different themes. Global information is a typical example of this."}),"\n",(0,s.jsx)(t.p,{children:"You can set the title, subtitle, author, date, and institution information for slides using:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n"})}),"\n",(0,s.jsxs)(t.p,{children:["In subsequent slides, you can access them through ",(0,s.jsx)(t.code,{children:"s.info"})," or ",(0,s.jsx)(t.code,{children:"self.info"}),"."]}),"\n",(0,s.jsx)(t.p,{children:"This information is generally used in the title-slide, header, and footer of the theme, for example:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n'})}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"date"})," can accept ",(0,s.jsx)(t.code,{children:"datetime"})," format or ",(0,s.jsx)(t.code,{children:"content"})," format, and the display format for the ",(0,s.jsx)(t.code,{children:"datetime"})," format can be changed using:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'#let s = (s.methods.datetime-format)(self: s, "[year]-[month]-[day]")\n'})}),"\n",(0,s.jsxs)(t.admonition,{title:"Principle",type:"tip",children:[(0,s.jsx)(t.p,{children:"Here, we will introduce a bit of OOP concept in Touying."}),(0,s.jsxs)(t.p,{children:["You should know that Typst is a typesetting language that supports incremental rendering, which means Typst caches the results of previous function calls. This requires that Typst consists of pure functions, meaning functions that do not change external variables. Thus, it is challenging to modify a global variable in the true sense, even with the use of ",(0,s.jsx)(t.code,{children:"state"})," or ",(0,s.jsx)(t.code,{children:"counter"}),". This would require the use of ",(0,s.jsx)(t.code,{children:"locate"})," with callback functions to obtain the values inside, and this approach would have a significant impact on performance."]}),(0,s.jsxs)(t.p,{children:["Touying does not use ",(0,s.jsx)(t.code,{children:"state"})," or ",(0,s.jsx)(t.code,{children:"counter"})," and does not violate the principle of pure functions in Typst. Instead, it uses a clever approach in an object-oriented style, maintaining a global singleton ",(0,s.jsx)(t.code,{children:"s"}),". In Touying, an object refers to a Typst dictionary with its own member variables and methods. We agree that methods all have a named parameter ",(0,s.jsx)(t.code,{children:"self"})," for passing the object itself, and methods are placed in the ",(0,s.jsx)(t.code,{children:".methods"})," domain. With this concept, it becomes easier to write methods to update ",(0,s.jsx)(t.code,{children:"info"}),":"]}),(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"#let s = (\n info: (:),\n methods: (\n // update info\n info: (self: none, ..args) => {\n self.info += args.named()\n self\n },\n )\n)\n\n#let s = (s.methods.info)(self: s, title: [title])\n\nTitle is #s.info.title\n"})}),(0,s.jsxs)(t.p,{children:["Now you can understand the purpose of the ",(0,s.jsx)(t.code,{children:"utils.methods()"})," function: to bind ",(0,s.jsx)(t.code,{children:"self"})," to all methods of ",(0,s.jsx)(t.code,{children:"s"})," and return it, simplifying the subsequent usage through unpacking syntax."]}),(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"#let (init, slides, alert) = utils.methods(s)\n"})})]}),"\n",(0,s.jsx)(t.h2,{id:"state-initialization",children:"State Initialization"}),"\n",(0,s.jsxs)(t.p,{children:["In general, the two ways mentioned above are sufficient for adding global settings. However, there are still situations where we need to initialize counters or states. If you place this code before ",(0,s.jsx)(t.code,{children:"#show: slides"}),", a blank page will be created, which is something we don't want to see. In such cases, you can use the ",(0,s.jsx)(t.code,{children:"s.methods.append-preamble"})," method. For example, when using the codly package:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n#import "@preview/codly:0.2.0": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9")\n#let s = (s.methods.append-preamble)(self: s)[\n #codly(languages: (\n rust: (name: "Rust", icon: "\\u{fa53}", color: rgb("#CE412B")),\n ))\n]\n#let (init, slides) = utils.methods(s)\n#show heading.where(level: 2): set block(below: 1em)\n#show: init\n#show: codly-init.with()\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n#slide[\n == First slide\n\n #raw(lang: "rust", block: true,\n`pub fn main() {\n println!("Hello, world!");\n}`.text)\n]\n'})}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{src:"https://github.com/touying-typ/touying/assets/34951714/0be2fbaf-cc03-4776-932f-259503d5e23a",alt:"image"})}),"\n",(0,s.jsx)(t.p,{children:"Or when configuring Pdfpc:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'// Pdfpc configuration\n// typst query --root . ./example.typ --field value --one "" > ./example.pdfpc\n#let s = (s.methods.append-preamble)(self: s, pdfpc.config(\n duration-minutes: 30,\n start-time: datetime(hour: 14, minute: 10, second: 0),\n end-time: datetime(hour: 14, minute: 40, second: 0),\n last-minutes: 5,\n note-font-size: 12,\n disable-markdown: false,\n default-transition: (\n type: "push",\n duration-seconds: 2,\n angle: ltr,\n alignment: "vertical",\n direction: "inward",\n ),\n))\n'})})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>l});var s=n(7294);const i={},o=s.createContext(i);function l(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/8aab68b4.758d7d36.js b/assets/js/8aab68b4.758d7d36.js new file mode 100644 index 000000000..de9c6df1d --- /dev/null +++ b/assets/js/8aab68b4.758d7d36.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[511],{5294:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>d,toc:()=>l});var i=s(5893),t=s(1151);const o={sidebar_position:1},a="Simple Animations",d={id:"dynamic/simple",title:"Simple Animations",description:"Touying provides two markers for simple animation effects: #pause and #meanwhile.",source:"@site/versioned_docs/version-0.4.1/dynamic/simple.md",sourceDirName:"dynamic",slug:"/dynamic/simple",permalink:"/touying/docs/0.4.1/dynamic/simple",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/dynamic/simple.md",tags:[],version:"0.4.1",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Dynamic Slides",permalink:"/touying/docs/0.4.1/category/dynamic-slides"},next:{title:"Complex Animations",permalink:"/touying/docs/0.4.1/dynamic/complex"}},c={},l=[{value:"pause",id:"pause",level:2},{value:"meanwhile",id:"meanwhile",level:2},{value:"Handling layout functions",id:"handling-layout-functions",level:2}];function r(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,t.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"simple-animations",children:"Simple Animations"}),"\n",(0,i.jsxs)(n.p,{children:["Touying provides two markers for simple animation effects: ",(0,i.jsx)(n.code,{children:"#pause"})," and ",(0,i.jsx)(n.code,{children:"#meanwhile"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"pause",children:"pause"}),"\n",(0,i.jsxs)(n.p,{children:["The purpose of ",(0,i.jsx)(n.code,{children:"#pause"})," is straightforward \u2013 it separates the subsequent content into the next subslide. You can use multiple ",(0,i.jsx)(n.code,{children:"#pause"})," to create multiple subslides. Here's a simple example:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide[\n First #pause Second\n\n #pause\n\n Third\n]\n"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/a3bed1d3-e660-456d-8a54-a914436f43bf",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:"This example will create three subslides, gradually revealing the content."}),"\n",(0,i.jsxs)(n.p,{children:["As you can see, ",(0,i.jsx)(n.code,{children:"#pause"})," can be used inline or on a separate line."]}),"\n",(0,i.jsx)(n.h2,{id:"meanwhile",children:"meanwhile"}),"\n",(0,i.jsxs)(n.p,{children:["In some cases, you may need to display additional content simultaneously with ",(0,i.jsx)(n.code,{children:"#pause"}),". In such cases, you can use ",(0,i.jsx)(n.code,{children:"#meanwhile"}),"."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide[\n First\n \n #pause\n \n Second\n\n #meanwhile\n\n Third\n\n #pause\n\n Fourth\n]\n"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/24ca19a3-b27c-4d31-ab75-09c37911e6ac",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:'This example will create only two subslides, with "First" and "Third" displayed simultaneously, and "Second" and "Fourth" displayed simultaneously.'}),"\n",(0,i.jsx)(n.h2,{id:"handling-layout-functions",children:"Handling layout functions"}),"\n",(0,i.jsxs)(n.p,{children:["If you use layout functions like ",(0,i.jsx)(n.code,{children:"grid"})," inside ",(0,i.jsx)(n.code,{children:"slide[..]"}),", you might be surprised to find that subsequent ",(0,i.jsx)(n.code,{children:"#pause"})," and ",(0,i.jsx)(n.code,{children:"#meanwhile"})," do not work. This is because Touying cannot detect the content inside layout functions. But you can use the ",(0,i.jsx)(n.code,{children:"composer"})," parameter of ",(0,i.jsx)(n.code,{children:"#slide()"})," to meet most requirements."]}),"\n",(0,i.jsx)(n.admonition,{title:"Internals",type:"tip",children:(0,i.jsxs)(n.p,{children:["Touying doesn't rely on ",(0,i.jsx)(n.code,{children:"counter"})," and ",(0,i.jsx)(n.code,{children:"locate"})," to implement ",(0,i.jsx)(n.code,{children:"#pause"}),". Instead, it has a parser written in Typst script. It parses the input content block as a sequence and then transforms and reorganizes this sequence into the series of subslides we need."]})})]})}function u(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(r,{...e})}):r(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>d,a:()=>a});var i=s(7294);const t={},o=i.createContext(t);function a(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:a(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/8aac4d68.9e235986.js b/assets/js/8aac4d68.9e235986.js new file mode 100644 index 000000000..ceb156f84 --- /dev/null +++ b/assets/js/8aac4d68.9e235986.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[56],{1554:e=>{e.exports=JSON.parse('{"title":"Themes","description":"One convenient aspect of using Touying is that you can use the themes provided by Touying or create your own themes or templates with the help of Touying.","slug":"/category/themes","permalink":"/touying/docs/0.4.1/category/themes","navigation":{"previous":{"title":"Ctheorems","permalink":"/touying/docs/0.4.1/integration/ctheorems"},"next":{"title":"Simple Theme","permalink":"/touying/docs/0.4.1/themes/simple"}}}')}}]); \ No newline at end of file diff --git a/assets/js/8ac96054.96187a17.js b/assets/js/8ac96054.a4b752b1.js similarity index 98% rename from assets/js/8ac96054.96187a17.js rename to assets/js/8ac96054.a4b752b1.js index 29def8c5d..f26703fba 100644 --- a/assets/js/8ac96054.96187a17.js +++ b/assets/js/8ac96054.a4b752b1.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9527],{3680:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>d,default:()=>p,frontMatter:()=>s,metadata:()=>r,toc:()=>c});var i=t(5893),o=t(1151);const s={sidebar_position:1},d="Pdfpc",r={id:"external/pdfpc",title:"Pdfpc",description:'pdfpc is a "Presenter Console with multi-monitor support for PDF files." This means you can use it to display slides in the form of PDF pages and it comes with some known excellent features, much like PowerPoint.',source:"@site/docs/external/pdfpc.md",sourceDirName:"external",slug:"/external/pdfpc",permalink:"/touying/docs/next/external/pdfpc",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/external/pdfpc.md",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"External Tools",permalink:"/touying/docs/next/category/external-tools"},next:{title:"Pympress",permalink:"/touying/docs/next/external/pympress"}},a={},c=[{value:"Adding Metadata",id:"adding-metadata",level:2},{value:"Pdfpc Configuration",id:"pdfpc-configuration",level:2},{value:"Exporting .pdfpc File",id:"exporting-pdfpc-file",level:2}];function l(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"pdfpc",children:"Pdfpc"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://pdfpc.github.io/",children:"pdfpc"}),' is a "Presenter Console with multi-monitor support for PDF files." This means you can use it to display slides in the form of PDF pages and it comes with some known excellent features, much like PowerPoint.']}),"\n",(0,i.jsxs)(n.p,{children:["pdfpc has a JSON-formatted ",(0,i.jsx)(n.code,{children:".pdfpc"})," file that can provide additional information for PDF slides. While you can manually write this file, you can also manage it through Touying."]}),"\n",(0,i.jsx)(n.h2,{id:"adding-metadata",children:"Adding Metadata"}),"\n",(0,i.jsxs)(n.p,{children:["Touying remains consistent with ",(0,i.jsx)(n.a,{href:"https://polylux.dev/book/external/pdfpc.html",children:"Polylux"})," to avoid conflicts between APIs."]}),"\n",(0,i.jsxs)(n.p,{children:["For example, you can add notes using ",(0,i.jsx)(n.code,{children:'#pdfpc.speaker-note("This is a note that only the speaker will see.")'}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"pdfpc-configuration",children:"Pdfpc Configuration"}),"\n",(0,i.jsx)(n.p,{children:"To add pdfpc configurations, you can use"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.append-preamble)(self: s, pdfpc.config(\n duration-minutes: 30,\n start-time: datetime(hour: 14, minute: 10, second: 0),\n end-time: datetime(hour: 14, minute: 40, second: 0),\n last-minutes: 5,\n note-font-size: 12,\n disable-markdown: false,\n default-transition: (\n type: "push",\n duration-seconds: 2,\n angle: ltr,\n alignment: "vertical",\n direction: "inward",\n ),\n))\n'})}),"\n",(0,i.jsxs)(n.p,{children:["Add the corresponding configurations. Refer to ",(0,i.jsx)(n.a,{href:"https://polylux.dev/book/external/pdfpc.html",children:"Polylux"})," for specific configuration details."]}),"\n",(0,i.jsx)(n.h2,{id:"exporting-pdfpc-file",children:"Exporting .pdfpc File"}),"\n",(0,i.jsxs)(n.p,{children:["Assuming your document is ",(0,i.jsx)(n.code,{children:"./example.typ"}),", you can export the ",(0,i.jsx)(n.code,{children:".pdfpc"})," file directly using:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-sh",children:'typst query --root . ./example.typ --field value --one "" > ./example.pdfpc\n'})}),"\n",(0,i.jsx)(n.p,{children:"With the compatibility of Touying and Polylux, you can make Polylux also support direct export by adding the following code:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1"\n\n#locate(loc => touying.pdfpc.pdfpc-file(loc))\n'})})]})}function p(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>d});var i=t(7294);const o={},s=i.createContext(o);function d(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:d(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9527],{3680:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>d,default:()=>p,frontMatter:()=>s,metadata:()=>r,toc:()=>c});var i=t(5893),o=t(1151);const s={sidebar_position:1},d="Pdfpc",r={id:"external/pdfpc",title:"Pdfpc",description:'pdfpc is a "Presenter Console with multi-monitor support for PDF files." This means you can use it to display slides in the form of PDF pages and it comes with some known excellent features, much like PowerPoint.',source:"@site/docs/external/pdfpc.md",sourceDirName:"external",slug:"/external/pdfpc",permalink:"/touying/docs/next/external/pdfpc",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/external/pdfpc.md",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"External Tools",permalink:"/touying/docs/next/category/external-tools"},next:{title:"Pympress",permalink:"/touying/docs/next/external/pympress"}},a={},c=[{value:"Adding Metadata",id:"adding-metadata",level:2},{value:"Pdfpc Configuration",id:"pdfpc-configuration",level:2},{value:"Exporting .pdfpc File",id:"exporting-pdfpc-file",level:2}];function l(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"pdfpc",children:"Pdfpc"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://pdfpc.github.io/",children:"pdfpc"}),' is a "Presenter Console with multi-monitor support for PDF files." This means you can use it to display slides in the form of PDF pages and it comes with some known excellent features, much like PowerPoint.']}),"\n",(0,i.jsxs)(n.p,{children:["pdfpc has a JSON-formatted ",(0,i.jsx)(n.code,{children:".pdfpc"})," file that can provide additional information for PDF slides. While you can manually write this file, you can also manage it through Touying."]}),"\n",(0,i.jsx)(n.h2,{id:"adding-metadata",children:"Adding Metadata"}),"\n",(0,i.jsxs)(n.p,{children:["Touying remains consistent with ",(0,i.jsx)(n.a,{href:"https://polylux.dev/book/external/pdfpc.html",children:"Polylux"})," to avoid conflicts between APIs."]}),"\n",(0,i.jsxs)(n.p,{children:["For example, you can add notes using ",(0,i.jsx)(n.code,{children:'#pdfpc.speaker-note("This is a note that only the speaker will see.")'}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"pdfpc-configuration",children:"Pdfpc Configuration"}),"\n",(0,i.jsx)(n.p,{children:"To add pdfpc configurations, you can use"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.append-preamble)(self: s, pdfpc.config(\n duration-minutes: 30,\n start-time: datetime(hour: 14, minute: 10, second: 0),\n end-time: datetime(hour: 14, minute: 40, second: 0),\n last-minutes: 5,\n note-font-size: 12,\n disable-markdown: false,\n default-transition: (\n type: "push",\n duration-seconds: 2,\n angle: ltr,\n alignment: "vertical",\n direction: "inward",\n ),\n))\n'})}),"\n",(0,i.jsxs)(n.p,{children:["Add the corresponding configurations. Refer to ",(0,i.jsx)(n.a,{href:"https://polylux.dev/book/external/pdfpc.html",children:"Polylux"})," for specific configuration details."]}),"\n",(0,i.jsx)(n.h2,{id:"exporting-pdfpc-file",children:"Exporting .pdfpc File"}),"\n",(0,i.jsxs)(n.p,{children:["Assuming your document is ",(0,i.jsx)(n.code,{children:"./example.typ"}),", you can export the ",(0,i.jsx)(n.code,{children:".pdfpc"})," file directly using:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-sh",children:'typst query --root . ./example.typ --field value --one "" > ./example.pdfpc\n'})}),"\n",(0,i.jsx)(n.p,{children:"With the compatibility of Touying and Polylux, you can make Polylux also support direct export by adding the following code:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2"\n\n#locate(loc => touying.pdfpc.pdfpc-file(loc))\n'})})]})}function p(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>d});var i=t(7294);const o={},s=i.createContext(o);function d(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:d(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/91b4e1d3.4ad62598.js b/assets/js/91b4e1d3.4ad62598.js new file mode 100644 index 000000000..acb0c6291 --- /dev/null +++ b/assets/js/91b4e1d3.4ad62598.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4983],{2801:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"0.4.1","label":"0.4.1","banner":"unmaintained","badge":true,"noIndex":false,"className":"docs-version-0.4.1","isLast":false,"docsSidebars":{"tutorialSidebar":[{"type":"link","label":"Introduction to Touying","href":"/touying/docs/0.4.1/intro","docId":"intro","unlisted":false},{"type":"link","label":"Getting Started","href":"/touying/docs/0.4.1/start","docId":"start","unlisted":false},{"type":"link","label":"Sections and Subsections","href":"/touying/docs/0.4.1/sections","docId":"sections","unlisted":false},{"type":"link","label":"Code Style","href":"/touying/docs/0.4.1/code-styles","docId":"code-styles","unlisted":false},{"type":"link","label":"Page Layout","href":"/touying/docs/0.4.1/layout","docId":"layout","unlisted":false},{"type":"link","label":"Global Settings","href":"/touying/docs/0.4.1/global-settings","docId":"global-settings","unlisted":false},{"type":"link","label":"Multi-File Architecture","href":"/touying/docs/0.4.1/multi-file","docId":"multi-file","unlisted":false},{"type":"category","label":"Dynamic Slides","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Simple Animations","href":"/touying/docs/0.4.1/dynamic/simple","docId":"dynamic/simple","unlisted":false},{"type":"link","label":"Complex Animations","href":"/touying/docs/0.4.1/dynamic/complex","docId":"dynamic/complex","unlisted":false},{"type":"link","label":"Math Equation Animations","href":"/touying/docs/0.4.1/dynamic/equation","docId":"dynamic/equation","unlisted":false},{"type":"link","label":"Cover Function","href":"/touying/docs/0.4.1/dynamic/cover","docId":"dynamic/cover","unlisted":false},{"type":"link","label":"Other Animations","href":"/touying/docs/0.4.1/dynamic/other","docId":"dynamic/other","unlisted":false},{"type":"link","label":"Handout Mode","href":"/touying/docs/0.4.1/dynamic/handout","docId":"dynamic/handout","unlisted":false}],"href":"/touying/docs/0.4.1/category/dynamic-slides"},{"type":"category","label":"Package Integration","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Pinit","href":"/touying/docs/0.4.1/integration/pinit","docId":"integration/pinit","unlisted":false},{"type":"link","label":"MiTeX","href":"/touying/docs/0.4.1/integration/mitex","docId":"integration/mitex","unlisted":false},{"type":"link","label":"CeTZ","href":"/touying/docs/0.4.1/integration/cetz","docId":"integration/cetz","unlisted":false},{"type":"link","label":"Fletcher","href":"/touying/docs/0.4.1/integration/fletcher","docId":"integration/fletcher","unlisted":false},{"type":"link","label":"Codly","href":"/touying/docs/0.4.1/integration/codly","docId":"integration/codly","unlisted":false},{"type":"link","label":"Ctheorems","href":"/touying/docs/0.4.1/integration/ctheorems","docId":"integration/ctheorems","unlisted":false}],"href":"/touying/docs/0.4.1/category/package-integration"},{"type":"category","label":"Themes","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Simple Theme","href":"/touying/docs/0.4.1/themes/simple","docId":"themes/simple","unlisted":false},{"type":"link","label":"Metropolis Theme","href":"/touying/docs/0.4.1/themes/metropolis","docId":"themes/metropolis","unlisted":false},{"type":"link","label":"Dewdrop Theme","href":"/touying/docs/0.4.1/themes/dewdrop","docId":"themes/dewdrop","unlisted":false},{"type":"link","label":"University Theme","href":"/touying/docs/0.4.1/themes/university","docId":"themes/university","unlisted":false},{"type":"link","label":"Aqua Theme","href":"/touying/docs/0.4.1/themes/aqua","docId":"themes/aqua","unlisted":false}],"href":"/touying/docs/0.4.1/category/themes"},{"type":"link","label":"Creating Your Own Theme","href":"/touying/docs/0.4.1/build-your-own-theme","docId":"build-your-own-theme","unlisted":false},{"type":"category","label":"Progress","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Touying Counters","href":"/touying/docs/0.4.1/progress/counters","docId":"progress/counters","unlisted":false},{"type":"link","label":"Touying Sections","href":"/touying/docs/0.4.1/progress/sections","docId":"progress/sections","unlisted":false}],"href":"/touying/docs/0.4.1/category/progress"},{"type":"category","label":"Utilities","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Object-Oriented Programming","href":"/touying/docs/0.4.1/utilities/oop","docId":"utilities/oop","unlisted":false},{"type":"link","label":"Fit to Height / Width","href":"/touying/docs/0.4.1/utilities/fit-to","docId":"utilities/fit-to","unlisted":false}],"href":"/touying/docs/0.4.1/category/utilities"},{"type":"link","label":"Changelog","href":"/touying/docs/0.4.1/changelog","docId":"changelog","unlisted":false},{"type":"category","label":"External Tools","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Pdfpc","href":"/touying/docs/0.4.1/external/pdfpc","docId":"external/pdfpc","unlisted":false},{"type":"link","label":"Pympress","href":"/touying/docs/0.4.1/external/pympress","docId":"external/pympress","unlisted":false},{"type":"link","label":"Typst Preview","href":"/touying/docs/0.4.1/external/typst-preview","docId":"external/typst-preview","unlisted":false}],"href":"/touying/docs/0.4.1/category/external-tools"}]},"docs":{"build-your-own-theme":{"id":"build-your-own-theme","title":"Creating Your Own Theme","description":"Creating your own theme with Touying might seem a bit complex initially due to the introduction of various concepts. However, fear not; if you successfully create a custom theme with Touying, you\'ll likely experience the convenience and powerful customization features it offers. You can refer to the source code of existing themes for guidance. The key steps to implement are:","sidebar":"tutorialSidebar"},"changelog":{"id":"changelog","title":"Changelog","description":"v0.4.1","sidebar":"tutorialSidebar"},"code-styles":{"id":"code-styles","title":"Code Style","description":"Simple Style","sidebar":"tutorialSidebar"},"dynamic/complex":{"id":"dynamic/complex","title":"Complex Animations","description":"Thanks to the syntax provided by Polylux, we can also use only, uncover, and alternatives in Touying.","sidebar":"tutorialSidebar"},"dynamic/cover":{"id":"dynamic/cover","title":"Cover Function","description":"As you already know, both uncover and #pause use the cover function to conceal content that is not visible. So, what exactly is the cover function here?","sidebar":"tutorialSidebar"},"dynamic/equation":{"id":"dynamic/equation","title":"Math Equation Animations","description":"Touying also provides a unique and highly useful feature\u2014math equation animations, allowing you to conveniently use pause and meanwhile within math equations.","sidebar":"tutorialSidebar"},"dynamic/handout":{"id":"dynamic/handout","title":"Handout Mode","description":"While watching slides and attending lectures, the audience often wishes to have handouts for reviewing challenging concepts. Therefore, it\'s beneficial for the author to provide handouts for the audience, preferably before the lecture for better preparation.","sidebar":"tutorialSidebar"},"dynamic/other":{"id":"dynamic/other","title":"Other Animations","description":"Touying also provides touying-reducer, which adds pause and meanwhile animations to cetz and fletcher.","sidebar":"tutorialSidebar"},"dynamic/simple":{"id":"dynamic/simple","title":"Simple Animations","description":"Touying provides two markers for simple animation effects: #pause and #meanwhile.","sidebar":"tutorialSidebar"},"external/pdfpc":{"id":"external/pdfpc","title":"Pdfpc","description":"pdfpc is a \\"Presenter Console with multi-monitor support for PDF files.\\" This means you can use it to display slides in the form of PDF pages and it comes with some known excellent features, much like PowerPoint.","sidebar":"tutorialSidebar"},"external/pympress":{"id":"external/pympress","title":"Pympress","description":"Pympress is a PDF presentation tool designed for dual-screen setups such as presentations and public talks. Highly configurable, fully-featured, and portable","sidebar":"tutorialSidebar"},"external/typst-preview":{"id":"external/typst-preview","title":"Typst Preview","description":"The Typst Preview extension for VS Code provides an excellent slide mode, allowing us to preview and present slides.","sidebar":"tutorialSidebar"},"global-settings":{"id":"global-settings","title":"Global Settings","description":"Global Styles","sidebar":"tutorialSidebar"},"integration/cetz":{"id":"integration/cetz","title":"CeTZ","description":"Touying provides the touying-reducer, which adds pause and meanwhile animations to CeTZ and Fletcher.","sidebar":"tutorialSidebar"},"integration/codly":{"id":"integration/codly","title":"Codly","description":"When using Codly, we should initialize it using the s.methods.append-preamble method.","sidebar":"tutorialSidebar"},"integration/ctheorems":{"id":"integration/ctheorems","title":"Ctheorems","description":"Touying can work seamlessly with the ctheorems package, allowing you to directly use the ctheorems package.","sidebar":"tutorialSidebar"},"integration/fletcher":{"id":"integration/fletcher","title":"Fletcher","description":"Touying provides the touying-reducer, which adds pause and meanwhile animations to Fletcher.","sidebar":"tutorialSidebar"},"integration/mitex":{"id":"integration/mitex","title":"MiTeX","description":"During the process of creating slides, we often already have a LaTeX math equation that we simply want to paste into the slides without transcribing it into a Typst math equation. In such cases, we can use MiTeX.","sidebar":"tutorialSidebar"},"integration/pinit":{"id":"integration/pinit","title":"Pinit","description":"Pinit package provides the ability to perform absolute positioning based on the page and relative positioning based on \\"pins,\\" making it convenient to implement arrow pointing and explanatory effects for slides.","sidebar":"tutorialSidebar"},"intro":{"id":"intro","title":"Introduction to Touying","description":"Touying is a slide/presentation package developed for Typst. Touying is similar to LaTeX Beamer but benefits from Typst, providing faster rendering speed and a more concise syntax. After, we use \\"slides\\" to refer to slideshows, \\"slide\\" for a single slide, and \\"subslide\\" for a sub-slide.","sidebar":"tutorialSidebar"},"layout":{"id":"layout","title":"Page Layout","description":"Basic Concepts","sidebar":"tutorialSidebar"},"multi-file":{"id":"multi-file","title":"Multi-File Architecture","description":"Touying features a syntax as concise as native Typst documents, along with numerous customizable configuration options, yet it still maintains real-time incremental compilation performance, making it suitable for writing large-scale slides.","sidebar":"tutorialSidebar"},"progress/counters":{"id":"progress/counters","title":"Touying Counters","description":"The states of Touying are placed under the states namespace, including all counters.","sidebar":"tutorialSidebar"},"progress/sections":{"id":"progress/sections","title":"Touying Sections","description":"Touying maintains its own sections state to record the sections and subsections of slides.","sidebar":"tutorialSidebar"},"sections":{"id":"sections","title":"Sections and Subsections","description":"Structure","sidebar":"tutorialSidebar"},"start":{"id":"start","title":"Getting Started","description":"Before you begin, make sure you have the Typst environment installed. If not, you can use the Web App or install the Tinymist LSP and Typst Preview plugins for VS Code.","sidebar":"tutorialSidebar"},"themes/aqua":{"id":"themes/aqua","title":"Aqua Theme","description":"image","sidebar":"tutorialSidebar"},"themes/dewdrop":{"id":"themes/dewdrop","title":"Dewdrop Theme","description":"image","sidebar":"tutorialSidebar"},"themes/metropolis":{"id":"themes/metropolis","title":"Metropolis Theme","description":"image","sidebar":"tutorialSidebar"},"themes/simple":{"id":"themes/simple","title":"Simple Theme","description":"image","sidebar":"tutorialSidebar"},"themes/university":{"id":"themes/university","title":"University Theme","description":"image","sidebar":"tutorialSidebar"},"utilities/fit-to":{"id":"utilities/fit-to","title":"Fit to Height / Width","description":"Thanks to ntjess for the code.","sidebar":"tutorialSidebar"},"utilities/oop":{"id":"utilities/oop","title":"Object-Oriented Programming","description":"Touying provides some convenient utility functions for object-oriented programming.","sidebar":"tutorialSidebar"}}}')}}]); \ No newline at end of file diff --git a/assets/js/9286a2c0.1cc4cb12.js b/assets/js/9286a2c0.1cc4cb12.js new file mode 100644 index 000000000..7b3db7ed3 --- /dev/null +++ b/assets/js/9286a2c0.1cc4cb12.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2556],{3716:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>r,default:()=>u,frontMatter:()=>s,metadata:()=>l,toc:()=>c});var i=n(5893),o=n(1151);const s={sidebar_position:5},r="Codly",l={id:"integration/codly",title:"Codly",description:"When using Codly, we should initialize it using the s.methods.append-preamble method.",source:"@site/versioned_docs/version-0.4.1/integration/codly.md",sourceDirName:"integration",slug:"/integration/codly",permalink:"/touying/docs/0.4.1/integration/codly",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/integration/codly.md",tags:[],version:"0.4.1",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Fletcher",permalink:"/touying/docs/0.4.1/integration/fletcher"},next:{title:"Ctheorems",permalink:"/touying/docs/0.4.1/integration/ctheorems"}},d={},c=[];function a(e){const t={code:"code",h1:"h1",img:"img",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{id:"codly",children:"Codly"}),"\n",(0,i.jsxs)(t.p,{children:["When using Codly, we should initialize it using the ",(0,i.jsx)(t.code,{children:"s.methods.append-preamble"})," method."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/codly:0.2.0": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9")\n#let s = (s.methods.append-preamble)(self: s)[\n #codly(languages: (\n rust: (name: "Rust", icon: "\\u{fa53}", color: rgb("#CE412B")),\n ))\n]\n#let (init, slides) = utils.methods(s)\n#show heading.where(level: 2): set block(below: 1em)\n#show: init\n#show: codly-init.with()\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n#slide[\n == First slide\n\n #raw(lang: "rust", block: true,\n`pub fn main() {\n println!("Hello, world!");\n}`.text)\n]\n'})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://github.com/touying-typ/touying/assets/34951714/0be2fbaf-cc03-4776-932f-259503d5e23a",alt:"image"})})]})}function u(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>l,a:()=>r});var i=n(7294);const o={},s=i.createContext(o);function r(e){const t=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),i.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/935f2afb.2c3a712d.js b/assets/js/935f2afb.9b6b2273.js similarity index 99% rename from assets/js/935f2afb.2c3a712d.js rename to assets/js/935f2afb.9b6b2273.js index d136a8a61..936583121 100644 --- a/assets/js/935f2afb.2c3a712d.js +++ b/assets/js/935f2afb.9b6b2273.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[53],{1109:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"current","label":"Next","banner":"unreleased","badge":true,"noIndex":false,"className":"docs-version-current","isLast":false,"docsSidebars":{"tutorialSidebar":[{"type":"link","label":"Introduction to Touying","href":"/touying/docs/next/intro","docId":"intro","unlisted":false},{"type":"link","label":"Getting Started","href":"/touying/docs/next/start","docId":"start","unlisted":false},{"type":"link","label":"Sections and Subsections","href":"/touying/docs/next/sections","docId":"sections","unlisted":false},{"type":"link","label":"Code Style","href":"/touying/docs/next/code-styles","docId":"code-styles","unlisted":false},{"type":"link","label":"Page Layout","href":"/touying/docs/next/layout","docId":"layout","unlisted":false},{"type":"link","label":"Global Settings","href":"/touying/docs/next/global-settings","docId":"global-settings","unlisted":false},{"type":"link","label":"Multi-File Architecture","href":"/touying/docs/next/multi-file","docId":"multi-file","unlisted":false},{"type":"category","label":"Dynamic Slides","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Simple Animations","href":"/touying/docs/next/dynamic/simple","docId":"dynamic/simple","unlisted":false},{"type":"link","label":"Complex Animations","href":"/touying/docs/next/dynamic/complex","docId":"dynamic/complex","unlisted":false},{"type":"link","label":"Math Equation Animations","href":"/touying/docs/next/dynamic/equation","docId":"dynamic/equation","unlisted":false},{"type":"link","label":"Cover Function","href":"/touying/docs/next/dynamic/cover","docId":"dynamic/cover","unlisted":false},{"type":"link","label":"Other Animations","href":"/touying/docs/next/dynamic/other","docId":"dynamic/other","unlisted":false},{"type":"link","label":"Handout Mode","href":"/touying/docs/next/dynamic/handout","docId":"dynamic/handout","unlisted":false}],"href":"/touying/docs/next/category/dynamic-slides"},{"type":"category","label":"Package Integration","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Pinit","href":"/touying/docs/next/integration/pinit","docId":"integration/pinit","unlisted":false},{"type":"link","label":"MiTeX","href":"/touying/docs/next/integration/mitex","docId":"integration/mitex","unlisted":false},{"type":"link","label":"CeTZ","href":"/touying/docs/next/integration/cetz","docId":"integration/cetz","unlisted":false},{"type":"link","label":"Fletcher","href":"/touying/docs/next/integration/fletcher","docId":"integration/fletcher","unlisted":false},{"type":"link","label":"Codly","href":"/touying/docs/next/integration/codly","docId":"integration/codly","unlisted":false},{"type":"link","label":"Ctheorems","href":"/touying/docs/next/integration/ctheorems","docId":"integration/ctheorems","unlisted":false}],"href":"/touying/docs/next/category/package-integration"},{"type":"category","label":"Themes","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Simple Theme","href":"/touying/docs/next/themes/simple","docId":"themes/simple","unlisted":false},{"type":"link","label":"Metropolis Theme","href":"/touying/docs/next/themes/metropolis","docId":"themes/metropolis","unlisted":false},{"type":"link","label":"Dewdrop Theme","href":"/touying/docs/next/themes/dewdrop","docId":"themes/dewdrop","unlisted":false},{"type":"link","label":"University Theme","href":"/touying/docs/next/themes/university","docId":"themes/university","unlisted":false},{"type":"link","label":"Aqua Theme","href":"/touying/docs/next/themes/aqua","docId":"themes/aqua","unlisted":false}],"href":"/touying/docs/next/category/themes"},{"type":"link","label":"Creating Your Own Theme","href":"/touying/docs/next/build-your-own-theme","docId":"build-your-own-theme","unlisted":false},{"type":"category","label":"Progress","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Touying Counters","href":"/touying/docs/next/progress/counters","docId":"progress/counters","unlisted":false},{"type":"link","label":"Touying Sections","href":"/touying/docs/next/progress/sections","docId":"progress/sections","unlisted":false}],"href":"/touying/docs/next/category/progress"},{"type":"category","label":"Utilities","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Object-Oriented Programming","href":"/touying/docs/next/utilities/oop","docId":"utilities/oop","unlisted":false},{"type":"link","label":"Fit to Height / Width","href":"/touying/docs/next/utilities/fit-to","docId":"utilities/fit-to","unlisted":false}],"href":"/touying/docs/next/category/utilities"},{"type":"link","label":"Changelog","href":"/touying/docs/next/changelog","docId":"changelog","unlisted":false},{"type":"category","label":"External Tools","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Pdfpc","href":"/touying/docs/next/external/pdfpc","docId":"external/pdfpc","unlisted":false},{"type":"link","label":"Pympress","href":"/touying/docs/next/external/pympress","docId":"external/pympress","unlisted":false},{"type":"link","label":"Typst Preview","href":"/touying/docs/next/external/typst-preview","docId":"external/typst-preview","unlisted":false}],"href":"/touying/docs/next/category/external-tools"}]},"docs":{"build-your-own-theme":{"id":"build-your-own-theme","title":"Creating Your Own Theme","description":"Creating your own theme with Touying might seem a bit complex initially due to the introduction of various concepts. However, fear not; if you successfully create a custom theme with Touying, you\'ll likely experience the convenience and powerful customization features it offers. You can refer to the source code of existing themes for guidance. The key steps to implement are:","sidebar":"tutorialSidebar"},"changelog":{"id":"changelog","title":"Changelog","description":"v0.4.1","sidebar":"tutorialSidebar"},"code-styles":{"id":"code-styles","title":"Code Style","description":"Simple Style","sidebar":"tutorialSidebar"},"dynamic/complex":{"id":"dynamic/complex","title":"Complex Animations","description":"Thanks to the syntax provided by Polylux, we can also use only, uncover, and alternatives in Touying.","sidebar":"tutorialSidebar"},"dynamic/cover":{"id":"dynamic/cover","title":"Cover Function","description":"As you already know, both uncover and #pause use the cover function to conceal content that is not visible. So, what exactly is the cover function here?","sidebar":"tutorialSidebar"},"dynamic/equation":{"id":"dynamic/equation","title":"Math Equation Animations","description":"Touying also provides a unique and highly useful feature\u2014math equation animations, allowing you to conveniently use pause and meanwhile within math equations.","sidebar":"tutorialSidebar"},"dynamic/handout":{"id":"dynamic/handout","title":"Handout Mode","description":"While watching slides and attending lectures, the audience often wishes to have handouts for reviewing challenging concepts. Therefore, it\'s beneficial for the author to provide handouts for the audience, preferably before the lecture for better preparation.","sidebar":"tutorialSidebar"},"dynamic/other":{"id":"dynamic/other","title":"Other Animations","description":"Touying also provides touying-reducer, which adds pause and meanwhile animations to cetz and fletcher.","sidebar":"tutorialSidebar"},"dynamic/simple":{"id":"dynamic/simple","title":"Simple Animations","description":"Touying provides two markers for simple animation effects: #pause and #meanwhile.","sidebar":"tutorialSidebar"},"external/pdfpc":{"id":"external/pdfpc","title":"Pdfpc","description":"pdfpc is a \\"Presenter Console with multi-monitor support for PDF files.\\" This means you can use it to display slides in the form of PDF pages and it comes with some known excellent features, much like PowerPoint.","sidebar":"tutorialSidebar"},"external/pympress":{"id":"external/pympress","title":"Pympress","description":"Pympress is a PDF presentation tool designed for dual-screen setups such as presentations and public talks. Highly configurable, fully-featured, and portable","sidebar":"tutorialSidebar"},"external/typst-preview":{"id":"external/typst-preview","title":"Typst Preview","description":"The Typst Preview extension for VS Code provides an excellent slide mode, allowing us to preview and present slides.","sidebar":"tutorialSidebar"},"global-settings":{"id":"global-settings","title":"Global Settings","description":"Global Styles","sidebar":"tutorialSidebar"},"integration/cetz":{"id":"integration/cetz","title":"CeTZ","description":"Touying provides the touying-reducer, which adds pause and meanwhile animations to CeTZ and Fletcher.","sidebar":"tutorialSidebar"},"integration/codly":{"id":"integration/codly","title":"Codly","description":"When using Codly, we should initialize it using the s.methods.append-preamble method.","sidebar":"tutorialSidebar"},"integration/ctheorems":{"id":"integration/ctheorems","title":"Ctheorems","description":"Touying can work seamlessly with the ctheorems package, allowing you to directly use the ctheorems package.","sidebar":"tutorialSidebar"},"integration/fletcher":{"id":"integration/fletcher","title":"Fletcher","description":"Touying provides the touying-reducer, which adds pause and meanwhile animations to Fletcher.","sidebar":"tutorialSidebar"},"integration/mitex":{"id":"integration/mitex","title":"MiTeX","description":"During the process of creating slides, we often already have a LaTeX math equation that we simply want to paste into the slides without transcribing it into a Typst math equation. In such cases, we can use MiTeX.","sidebar":"tutorialSidebar"},"integration/pinit":{"id":"integration/pinit","title":"Pinit","description":"Pinit package provides the ability to perform absolute positioning based on the page and relative positioning based on \\"pins,\\" making it convenient to implement arrow pointing and explanatory effects for slides.","sidebar":"tutorialSidebar"},"intro":{"id":"intro","title":"Introduction to Touying","description":"Touying is a slide/presentation package developed for Typst. Touying is similar to LaTeX Beamer but benefits from Typst, providing faster rendering speed and a more concise syntax. After, we use \\"slides\\" to refer to slideshows, \\"slide\\" for a single slide, and \\"subslide\\" for a sub-slide.","sidebar":"tutorialSidebar"},"layout":{"id":"layout","title":"Page Layout","description":"Basic Concepts","sidebar":"tutorialSidebar"},"multi-file":{"id":"multi-file","title":"Multi-File Architecture","description":"Touying features a syntax as concise as native Typst documents, along with numerous customizable configuration options, yet it still maintains real-time incremental compilation performance, making it suitable for writing large-scale slides.","sidebar":"tutorialSidebar"},"progress/counters":{"id":"progress/counters","title":"Touying Counters","description":"The states of Touying are placed under the states namespace, including all counters.","sidebar":"tutorialSidebar"},"progress/sections":{"id":"progress/sections","title":"Touying Sections","description":"Touying maintains its own sections state to record the sections and subsections of slides.","sidebar":"tutorialSidebar"},"sections":{"id":"sections","title":"Sections and Subsections","description":"Structure","sidebar":"tutorialSidebar"},"start":{"id":"start","title":"Getting Started","description":"Before you begin, make sure you have the Typst environment installed. If not, you can use the Web App or install the Tinymist LSP and Typst Preview plugins for VS Code.","sidebar":"tutorialSidebar"},"themes/aqua":{"id":"themes/aqua","title":"Aqua Theme","description":"image","sidebar":"tutorialSidebar"},"themes/dewdrop":{"id":"themes/dewdrop","title":"Dewdrop Theme","description":"image","sidebar":"tutorialSidebar"},"themes/metropolis":{"id":"themes/metropolis","title":"Metropolis Theme","description":"image","sidebar":"tutorialSidebar"},"themes/simple":{"id":"themes/simple","title":"Simple Theme","description":"image","sidebar":"tutorialSidebar"},"themes/university":{"id":"themes/university","title":"University Theme","description":"image","sidebar":"tutorialSidebar"},"utilities/fit-to":{"id":"utilities/fit-to","title":"Fit to Height / Width","description":"Thanks to ntjess for the code.","sidebar":"tutorialSidebar"},"utilities/oop":{"id":"utilities/oop","title":"Object-Oriented Programming","description":"Touying provides some convenient utility functions for object-oriented programming.","sidebar":"tutorialSidebar"}}}')}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[53],{1109:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"current","label":"Next","banner":"unreleased","badge":true,"noIndex":false,"className":"docs-version-current","isLast":false,"docsSidebars":{"tutorialSidebar":[{"type":"link","label":"Introduction to Touying","href":"/touying/docs/next/intro","docId":"intro","unlisted":false},{"type":"link","label":"Getting Started","href":"/touying/docs/next/start","docId":"start","unlisted":false},{"type":"link","label":"Sections and Subsections","href":"/touying/docs/next/sections","docId":"sections","unlisted":false},{"type":"link","label":"Code Style","href":"/touying/docs/next/code-styles","docId":"code-styles","unlisted":false},{"type":"link","label":"Page Layout","href":"/touying/docs/next/layout","docId":"layout","unlisted":false},{"type":"link","label":"Global Settings","href":"/touying/docs/next/global-settings","docId":"global-settings","unlisted":false},{"type":"link","label":"Multi-File Architecture","href":"/touying/docs/next/multi-file","docId":"multi-file","unlisted":false},{"type":"category","label":"Dynamic Slides","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Simple Animations","href":"/touying/docs/next/dynamic/simple","docId":"dynamic/simple","unlisted":false},{"type":"link","label":"Complex Animations","href":"/touying/docs/next/dynamic/complex","docId":"dynamic/complex","unlisted":false},{"type":"link","label":"Math Equation Animations","href":"/touying/docs/next/dynamic/equation","docId":"dynamic/equation","unlisted":false},{"type":"link","label":"Cover Function","href":"/touying/docs/next/dynamic/cover","docId":"dynamic/cover","unlisted":false},{"type":"link","label":"Other Animations","href":"/touying/docs/next/dynamic/other","docId":"dynamic/other","unlisted":false},{"type":"link","label":"Handout Mode","href":"/touying/docs/next/dynamic/handout","docId":"dynamic/handout","unlisted":false}],"href":"/touying/docs/next/category/dynamic-slides"},{"type":"category","label":"Package Integration","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Pinit","href":"/touying/docs/next/integration/pinit","docId":"integration/pinit","unlisted":false},{"type":"link","label":"MiTeX","href":"/touying/docs/next/integration/mitex","docId":"integration/mitex","unlisted":false},{"type":"link","label":"CeTZ","href":"/touying/docs/next/integration/cetz","docId":"integration/cetz","unlisted":false},{"type":"link","label":"Fletcher","href":"/touying/docs/next/integration/fletcher","docId":"integration/fletcher","unlisted":false},{"type":"link","label":"Codly","href":"/touying/docs/next/integration/codly","docId":"integration/codly","unlisted":false},{"type":"link","label":"Ctheorems","href":"/touying/docs/next/integration/ctheorems","docId":"integration/ctheorems","unlisted":false}],"href":"/touying/docs/next/category/package-integration"},{"type":"category","label":"Themes","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Simple Theme","href":"/touying/docs/next/themes/simple","docId":"themes/simple","unlisted":false},{"type":"link","label":"Metropolis Theme","href":"/touying/docs/next/themes/metropolis","docId":"themes/metropolis","unlisted":false},{"type":"link","label":"Dewdrop Theme","href":"/touying/docs/next/themes/dewdrop","docId":"themes/dewdrop","unlisted":false},{"type":"link","label":"University Theme","href":"/touying/docs/next/themes/university","docId":"themes/university","unlisted":false},{"type":"link","label":"Aqua Theme","href":"/touying/docs/next/themes/aqua","docId":"themes/aqua","unlisted":false}],"href":"/touying/docs/next/category/themes"},{"type":"link","label":"Creating Your Own Theme","href":"/touying/docs/next/build-your-own-theme","docId":"build-your-own-theme","unlisted":false},{"type":"category","label":"Progress","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Touying Counters","href":"/touying/docs/next/progress/counters","docId":"progress/counters","unlisted":false},{"type":"link","label":"Touying Sections","href":"/touying/docs/next/progress/sections","docId":"progress/sections","unlisted":false}],"href":"/touying/docs/next/category/progress"},{"type":"category","label":"Utilities","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Object-Oriented Programming","href":"/touying/docs/next/utilities/oop","docId":"utilities/oop","unlisted":false},{"type":"link","label":"Fit to Height / Width","href":"/touying/docs/next/utilities/fit-to","docId":"utilities/fit-to","unlisted":false}],"href":"/touying/docs/next/category/utilities"},{"type":"link","label":"Changelog","href":"/touying/docs/next/changelog","docId":"changelog","unlisted":false},{"type":"category","label":"External Tools","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Pdfpc","href":"/touying/docs/next/external/pdfpc","docId":"external/pdfpc","unlisted":false},{"type":"link","label":"Pympress","href":"/touying/docs/next/external/pympress","docId":"external/pympress","unlisted":false},{"type":"link","label":"Typst Preview","href":"/touying/docs/next/external/typst-preview","docId":"external/typst-preview","unlisted":false}],"href":"/touying/docs/next/category/external-tools"}]},"docs":{"build-your-own-theme":{"id":"build-your-own-theme","title":"Creating Your Own Theme","description":"Creating your own theme with Touying might seem a bit complex initially due to the introduction of various concepts. However, fear not; if you successfully create a custom theme with Touying, you\'ll likely experience the convenience and powerful customization features it offers. You can refer to the source code of existing themes for guidance. The key steps to implement are:","sidebar":"tutorialSidebar"},"changelog":{"id":"changelog","title":"Changelog","description":"v0.4.2","sidebar":"tutorialSidebar"},"code-styles":{"id":"code-styles","title":"Code Style","description":"Simple Style","sidebar":"tutorialSidebar"},"dynamic/complex":{"id":"dynamic/complex","title":"Complex Animations","description":"Thanks to the syntax provided by Polylux, we can also use only, uncover, and alternatives in Touying.","sidebar":"tutorialSidebar"},"dynamic/cover":{"id":"dynamic/cover","title":"Cover Function","description":"As you already know, both uncover and #pause use the cover function to conceal content that is not visible. So, what exactly is the cover function here?","sidebar":"tutorialSidebar"},"dynamic/equation":{"id":"dynamic/equation","title":"Math Equation Animations","description":"Touying also provides a unique and highly useful feature\u2014math equation animations, allowing you to conveniently use pause and meanwhile within math equations.","sidebar":"tutorialSidebar"},"dynamic/handout":{"id":"dynamic/handout","title":"Handout Mode","description":"While watching slides and attending lectures, the audience often wishes to have handouts for reviewing challenging concepts. Therefore, it\'s beneficial for the author to provide handouts for the audience, preferably before the lecture for better preparation.","sidebar":"tutorialSidebar"},"dynamic/other":{"id":"dynamic/other","title":"Other Animations","description":"Touying also provides touying-reducer, which adds pause and meanwhile animations to cetz and fletcher.","sidebar":"tutorialSidebar"},"dynamic/simple":{"id":"dynamic/simple","title":"Simple Animations","description":"Touying provides two markers for simple animation effects: #pause and #meanwhile.","sidebar":"tutorialSidebar"},"external/pdfpc":{"id":"external/pdfpc","title":"Pdfpc","description":"pdfpc is a \\"Presenter Console with multi-monitor support for PDF files.\\" This means you can use it to display slides in the form of PDF pages and it comes with some known excellent features, much like PowerPoint.","sidebar":"tutorialSidebar"},"external/pympress":{"id":"external/pympress","title":"Pympress","description":"Pympress is a PDF presentation tool designed for dual-screen setups such as presentations and public talks. Highly configurable, fully-featured, and portable","sidebar":"tutorialSidebar"},"external/typst-preview":{"id":"external/typst-preview","title":"Typst Preview","description":"The Typst Preview extension for VS Code provides an excellent slide mode, allowing us to preview and present slides.","sidebar":"tutorialSidebar"},"global-settings":{"id":"global-settings","title":"Global Settings","description":"Global Styles","sidebar":"tutorialSidebar"},"integration/cetz":{"id":"integration/cetz","title":"CeTZ","description":"Touying provides the touying-reducer, which adds pause and meanwhile animations to CeTZ and Fletcher.","sidebar":"tutorialSidebar"},"integration/codly":{"id":"integration/codly","title":"Codly","description":"When using Codly, we should initialize it using the s.methods.append-preamble method.","sidebar":"tutorialSidebar"},"integration/ctheorems":{"id":"integration/ctheorems","title":"Ctheorems","description":"Touying can work seamlessly with the ctheorems package, allowing you to directly use the ctheorems package.","sidebar":"tutorialSidebar"},"integration/fletcher":{"id":"integration/fletcher","title":"Fletcher","description":"Touying provides the touying-reducer, which adds pause and meanwhile animations to Fletcher.","sidebar":"tutorialSidebar"},"integration/mitex":{"id":"integration/mitex","title":"MiTeX","description":"During the process of creating slides, we often already have a LaTeX math equation that we simply want to paste into the slides without transcribing it into a Typst math equation. In such cases, we can use MiTeX.","sidebar":"tutorialSidebar"},"integration/pinit":{"id":"integration/pinit","title":"Pinit","description":"Pinit package provides the ability to perform absolute positioning based on the page and relative positioning based on \\"pins,\\" making it convenient to implement arrow pointing and explanatory effects for slides.","sidebar":"tutorialSidebar"},"intro":{"id":"intro","title":"Introduction to Touying","description":"Touying is a slide/presentation package developed for Typst. Touying is similar to LaTeX Beamer but benefits from Typst, providing faster rendering speed and a more concise syntax. After, we use \\"slides\\" to refer to slideshows, \\"slide\\" for a single slide, and \\"subslide\\" for a sub-slide.","sidebar":"tutorialSidebar"},"layout":{"id":"layout","title":"Page Layout","description":"Basic Concepts","sidebar":"tutorialSidebar"},"multi-file":{"id":"multi-file","title":"Multi-File Architecture","description":"Touying features a syntax as concise as native Typst documents, along with numerous customizable configuration options, yet it still maintains real-time incremental compilation performance, making it suitable for writing large-scale slides.","sidebar":"tutorialSidebar"},"progress/counters":{"id":"progress/counters","title":"Touying Counters","description":"The states of Touying are placed under the states namespace, including all counters.","sidebar":"tutorialSidebar"},"progress/sections":{"id":"progress/sections","title":"Touying Sections","description":"Touying maintains its own sections state to record the sections and subsections of slides.","sidebar":"tutorialSidebar"},"sections":{"id":"sections","title":"Sections and Subsections","description":"Structure","sidebar":"tutorialSidebar"},"start":{"id":"start","title":"Getting Started","description":"Before you begin, make sure you have the Typst environment installed. If not, you can use the Web App or install the Tinymist LSP and Typst Preview plugins for VS Code.","sidebar":"tutorialSidebar"},"themes/aqua":{"id":"themes/aqua","title":"Aqua Theme","description":"image","sidebar":"tutorialSidebar"},"themes/dewdrop":{"id":"themes/dewdrop","title":"Dewdrop Theme","description":"image","sidebar":"tutorialSidebar"},"themes/metropolis":{"id":"themes/metropolis","title":"Metropolis Theme","description":"image","sidebar":"tutorialSidebar"},"themes/simple":{"id":"themes/simple","title":"Simple Theme","description":"image","sidebar":"tutorialSidebar"},"themes/university":{"id":"themes/university","title":"University Theme","description":"image","sidebar":"tutorialSidebar"},"utilities/fit-to":{"id":"utilities/fit-to","title":"Fit to Height / Width","description":"Thanks to ntjess for the code.","sidebar":"tutorialSidebar"},"utilities/oop":{"id":"utilities/oop","title":"Object-Oriented Programming","description":"Touying provides some convenient utility functions for object-oriented programming.","sidebar":"tutorialSidebar"}}}')}}]); \ No newline at end of file diff --git a/assets/js/95c1a82e.efbef5be.js b/assets/js/95c1a82e.efbef5be.js deleted file mode 100644 index ba7995104..000000000 --- a/assets/js/95c1a82e.efbef5be.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7513],{4843:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>r,default:()=>u,frontMatter:()=>o,metadata:()=>d,toc:()=>a});var i=t(5893),s=t(1151);const o={sidebar_position:5},r="Other Animations",d={id:"dynamic/other",title:"Other Animations",description:"Touying also provides touying-reducer, which adds pause and meanwhile animations to cetz and fletcher.",source:"@site/versioned_docs/version-0.4.1/dynamic/other.md",sourceDirName:"dynamic",slug:"/dynamic/other",permalink:"/touying/docs/dynamic/other",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/dynamic/other.md",tags:[],version:"0.4.1",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Cover Function",permalink:"/touying/docs/dynamic/cover"},next:{title:"Handout Mode",permalink:"/touying/docs/dynamic/handout"}},c={},a=[{value:"Simple Animations",id:"simple-animations",level:2},{value:"only and uncover",id:"only-and-uncover",level:2}];function l(e){const n={code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"other-animations",children:"Other Animations"}),"\n",(0,i.jsxs)(n.p,{children:["Touying also provides ",(0,i.jsx)(n.code,{children:"touying-reducer"}),", which adds ",(0,i.jsx)(n.code,{children:"pause"})," and ",(0,i.jsx)(n.code,{children:"meanwhile"})," animations to cetz and fletcher."]}),"\n",(0,i.jsx)(n.h2,{id:"simple-animations",children:"Simple Animations"}),"\n",(0,i.jsx)(n.p,{children:"Here's an example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/cetz:0.2.2"\n#import "@preview/fletcher:0.4.4" as fletcher: node, edge\n\n// cetz and fletcher bindings for touying\n#let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true))\n#let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide)\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides.with(title-slide: false, outline-slide: false)\n\n// cetz animation\n#slide[\n Cetz in Touying:\n\n #cetz-canvas({\n import cetz.draw: *\n \n rect((0,0), (5,5))\n\n (pause,)\n\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n\n (pause,)\n\n line((0,0), (2.5, 2.5), name: "line")\n })\n]\n\n// fletcher animation\n#slide[\n Fletcher in Touying:\n\n #fletcher-diagram(\n node-stroke: .1em,\n node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),\n spacing: 4em,\n edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),\n node((0,0), `reading`, radius: 2em),\n edge((0,0), (0,0), `read()`, "--|>", bend: 130deg),\n pause,\n edge(`read()`, "-|>"),\n node((1,0), `eof`, radius: 2em),\n pause,\n edge(`close()`, "-|>"),\n node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)),\n edge((0,0), (2,0), `close()`, "-|>", bend: -40deg),\n )\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc",alt:"image"})}),"\n",(0,i.jsx)(n.h2,{id:"only-and-uncover",children:"only and uncover"}),"\n",(0,i.jsxs)(n.p,{children:["In fact, we can also use ",(0,i.jsx)(n.code,{children:"only"})," and ",(0,i.jsx)(n.code,{children:"uncover"})," within cetz, just requiring a bit of skill:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#slide(repeat: 3, self => [\n #let (uncover, only) = utils.methods(self)\n\n Cetz in Touying in subslide #self.subslide:\n\n #cetz.canvas({\n import cetz.draw: *\n let self = (self.methods.update-cover)(self: self, hide.with(bounds: true))\n let (uncover,) = utils.methods(self)\n \n rect((0,0), (5,5))\n\n uncover("2-3", {\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n })\n\n only(3, line((0,0), (2.5, 2.5), name: "line"))\n })\n])\n'})})]})}function u(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>d,a:()=>r});var i=t(7294);const s={},o=i.createContext(s);function r(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/95c1a82e.f003f0ac.js b/assets/js/95c1a82e.f003f0ac.js new file mode 100644 index 000000000..f6b8951b0 --- /dev/null +++ b/assets/js/95c1a82e.f003f0ac.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7513],{4843:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>r,default:()=>u,frontMatter:()=>o,metadata:()=>d,toc:()=>a});var i=t(5893),s=t(1151);const o={sidebar_position:5},r="Other Animations",d={id:"dynamic/other",title:"Other Animations",description:"Touying also provides touying-reducer, which adds pause and meanwhile animations to cetz and fletcher.",source:"@site/versioned_docs/version-0.4.1/dynamic/other.md",sourceDirName:"dynamic",slug:"/dynamic/other",permalink:"/touying/docs/0.4.1/dynamic/other",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/dynamic/other.md",tags:[],version:"0.4.1",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Cover Function",permalink:"/touying/docs/0.4.1/dynamic/cover"},next:{title:"Handout Mode",permalink:"/touying/docs/0.4.1/dynamic/handout"}},c={},a=[{value:"Simple Animations",id:"simple-animations",level:2},{value:"only and uncover",id:"only-and-uncover",level:2}];function l(e){const n={code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"other-animations",children:"Other Animations"}),"\n",(0,i.jsxs)(n.p,{children:["Touying also provides ",(0,i.jsx)(n.code,{children:"touying-reducer"}),", which adds ",(0,i.jsx)(n.code,{children:"pause"})," and ",(0,i.jsx)(n.code,{children:"meanwhile"})," animations to cetz and fletcher."]}),"\n",(0,i.jsx)(n.h2,{id:"simple-animations",children:"Simple Animations"}),"\n",(0,i.jsx)(n.p,{children:"Here's an example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/cetz:0.2.2"\n#import "@preview/fletcher:0.4.4" as fletcher: node, edge\n\n// cetz and fletcher bindings for touying\n#let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true))\n#let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide)\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides.with(title-slide: false, outline-slide: false)\n\n// cetz animation\n#slide[\n Cetz in Touying:\n\n #cetz-canvas({\n import cetz.draw: *\n \n rect((0,0), (5,5))\n\n (pause,)\n\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n\n (pause,)\n\n line((0,0), (2.5, 2.5), name: "line")\n })\n]\n\n// fletcher animation\n#slide[\n Fletcher in Touying:\n\n #fletcher-diagram(\n node-stroke: .1em,\n node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),\n spacing: 4em,\n edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),\n node((0,0), `reading`, radius: 2em),\n edge((0,0), (0,0), `read()`, "--|>", bend: 130deg),\n pause,\n edge(`read()`, "-|>"),\n node((1,0), `eof`, radius: 2em),\n pause,\n edge(`close()`, "-|>"),\n node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)),\n edge((0,0), (2,0), `close()`, "-|>", bend: -40deg),\n )\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc",alt:"image"})}),"\n",(0,i.jsx)(n.h2,{id:"only-and-uncover",children:"only and uncover"}),"\n",(0,i.jsxs)(n.p,{children:["In fact, we can also use ",(0,i.jsx)(n.code,{children:"only"})," and ",(0,i.jsx)(n.code,{children:"uncover"})," within cetz, just requiring a bit of skill:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#slide(repeat: 3, self => [\n #let (uncover, only) = utils.methods(self)\n\n Cetz in Touying in subslide #self.subslide:\n\n #cetz.canvas({\n import cetz.draw: *\n let self = (self.methods.update-cover)(self: self, hide.with(bounds: true))\n let (uncover,) = utils.methods(self)\n \n rect((0,0), (5,5))\n\n uncover("2-3", {\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n })\n\n only(3, line((0,0), (2.5, 2.5), name: "line"))\n })\n])\n'})})]})}function u(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>d,a:()=>r});var i=t(7294);const s={},o=i.createContext(s);function r(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/98ce8162.47f327dc.js b/assets/js/98ce8162.47f327dc.js new file mode 100644 index 000000000..cd758e352 --- /dev/null +++ b/assets/js/98ce8162.47f327dc.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1543],{715:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>d,frontMatter:()=>o,metadata:()=>a,toc:()=>c});var i=t(5893),s=t(1151);const o={sidebar_position:2},r="Getting Started",a={id:"start",title:"Getting Started",description:"Before you begin, make sure you have the Typst environment installed. If not, you can use the Web App or install the Tinymist LSP and Typst Preview plugins for VS Code.",source:"@site/docs/start.md",sourceDirName:".",slug:"/start",permalink:"/touying/docs/next/start",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/start.md",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Introduction to Touying",permalink:"/touying/docs/next/intro"},next:{title:"Sections and Subsections",permalink:"/touying/docs/next/sections"}},l={},c=[{value:"More Complex Examples",id:"more-complex-examples",level:2}];function u(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"getting-started",children:"Getting Started"}),"\n",(0,i.jsxs)(n.p,{children:["Before you begin, make sure you have the Typst environment installed. If not, you can use the ",(0,i.jsx)(n.a,{href:"https://typst.app/",children:"Web App"})," or install the ",(0,i.jsx)(n.a,{href:"https://marketplace.visualstudio.com/items?itemName=myriad-dreamin.tinymist",children:"Tinymist LSP"})," and ",(0,i.jsx)(n.a,{href:"https://marketplace.visualstudio.com/items?itemName=mgt19937.typst-preview",children:"Typst Preview"})," plugins for VS Code."]}),"\n",(0,i.jsx)(n.p,{children:"To use Touying, you just need to include the following in your document:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.simple.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/f5bdbf8f-7bf9-45fd-9923-0fa5d66450b2",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:"It's that simple! You've created your first Touying slides. Congratulations! \ud83c\udf89"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Tip:"})," You can use Typst syntax like ",(0,i.jsx)(n.code,{children:'#import "config.typ": *'})," or ",(0,i.jsx)(n.code,{children:'#include "content.typ"'})," to implement Touying's multi-file architecture."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Warning:"})," The comma in ",(0,i.jsx)(n.code,{children:"#let (slide, empty-slide) = utils.slides(s)"})," is necessary for the unpacking syntax."]}),"\n",(0,i.jsx)(n.h2,{id:"more-complex-examples",children:"More Complex Examples"}),"\n",(0,i.jsxs)(n.p,{children:["In fact, Touying provides various styles for slide writing. You can also use the ",(0,i.jsx)(n.code,{children:"#slide[..]"})," syntax to access more powerful features provided by Touying."]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/fcecb505-d2d1-4e36-945a-225f4661a694",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:"Touying offers many built-in themes to easily create beautiful slides. For example, in this case:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:'#let s = themes.university.register(aspect-ratio: "16-9")\n'})}),"\n",(0,i.jsx)(n.p,{children:"you can use the university theme. For more detailed tutorials on themes, you can refer to the following sections."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n#import "@preview/cetz:0.2.2"\n#import "@preview/fletcher:0.4.4" as fletcher: node, edge\n#import "@preview/ctheorems:1.1.2": *\n\n// cetz and fletcher bindings for touying\n#let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true))\n#let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide)\n\n// Register university theme\n// You can replace it with other themes and it can still work normally\n#let s = themes.university.register(aspect-ratio: "16-9")\n\n// Set the numbering of section and subsection\n#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")\n\n// Set the speaker notes configuration\n// #let s = (s.methods.show-notes-on-second-screen)(self: s, right)\n\n// Global information configuration\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n\n// Pdfpc configuration\n// typst query --root . ./example.typ --field value --one "" > ./example.pdfpc\n#let s = (s.methods.append-preamble)(self: s, pdfpc.config(\n duration-minutes: 30,\n start-time: datetime(hour: 14, minute: 10, second: 0),\n end-time: datetime(hour: 14, minute: 40, second: 0),\n last-minutes: 5,\n note-font-size: 12,\n disable-markdown: false,\n default-transition: (\n type: "push",\n duration-seconds: 2,\n angle: ltr,\n alignment: "vertical",\n direction: "inward",\n ),\n))\n\n// Theroems configuration by ctheorems\n#show: thmrules.with(qed-symbol: $square$)\n#let theorem = thmbox("theorem", "Theorem", fill: rgb("#eeffee"))\n#let corollary = thmplain(\n "corollary",\n "Corollary",\n base: "theorem",\n titlefmt: strong\n)\n#let definition = thmbox("definition", "Definition", inset: (x: 1.2em, top: 1em))\n#let example = thmplain("example", "Example").with(numbering: none)\n#let proof = thmproof("proof", "Proof")\n\n// Extract methods\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n// Extract slide functions\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Animation\n\n== Simple Animation\n\nWe can use `#pause` to #pause display something later.\n\n#pause\n\nJust like this.\n\n#meanwhile\n\nMeanwhile, #pause we can also use `#meanwhile` to #pause display other content synchronously.\n\n#speaker-note[\n + This is a speaker note.\n + You won\'t see it unless you use `#let s = (s.math.show-notes-on-second-screen)(self: s, right)`\n]\n\n\n== Complex Animation - Mark-Style\n\nAt subslide #utils.touying-wrapper((self: none) => str(self.subslide)), we can\n\nuse #uncover("2-")[`#uncover` function] for reserving space,\n\nuse #only("2-")[`#only` function] for not reserving space,\n\n#alternatives[call `#only` multiple times \\u{2717}][use `#alternatives` function #sym.checkmark] for choosing one of the alternatives.\n\n\n== Complex Animation - Callback-Style\n\n#slide(repeat: 3, self => [\n #let (uncover, only, alternatives) = utils.methods(self)\n\n At subslide #self.subslide, we can\n\n use #uncover("2-")[`#uncover` function] for reserving space,\n\n use #only("2-")[`#only` function] for not reserving space,\n\n #alternatives[call `#only` multiple times \\u{2717}][use `#alternatives` function #sym.checkmark] for choosing one of the alternatives.\n])\n\n\n== Math Equation Animation\n\nTouying equation with `pause`:\n\n#touying-equation(`\n f(x) &= pause x^2 + 2x + 1 \\\n &= pause (x + 1)^2 \\\n`)\n\n#meanwhile\n\nHere, #pause we have the expression of $f(x)$.\n\n#pause\n\nBy factorizing, we can obtain this result.\n\n\n== CeTZ Animation\n\nCeTZ Animation in Touying:\n\n#cetz-canvas({\n import cetz.draw: *\n \n rect((0,0), (5,5))\n\n (pause,)\n\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n\n (pause,)\n\n line((0,0), (2.5, 2.5), name: "line")\n})\n\n\n== Fletcher Animation\n\nFletcher Animation in Touying:\n\n#fletcher-diagram(\n node-stroke: .1em,\n node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),\n spacing: 4em,\n edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),\n node((0,0), `reading`, radius: 2em),\n edge((0,0), (0,0), `read()`, "--|>", bend: 130deg),\n pause,\n edge(`read()`, "-|>"),\n node((1,0), `eof`, radius: 2em),\n pause,\n edge(`close()`, "-|>"),\n node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)),\n edge((0,0), (2,0), `close()`, "-|>", bend: -40deg),\n)\n\n\n= Theroems\n\n== Prime numbers\n\n#definition[\n A natural number is called a #highlight[_prime number_] if it is greater\n than 1 and cannot be written as the product of two smaller natural numbers.\n]\n#example[\n The numbers $2$, $3$, and $17$ are prime.\n @cor_largest_prime shows that this list is not exhaustive!\n]\n\n#theorem("Euclid")[\n There are infinitely many primes.\n]\n#proof[\n Suppose to the contrary that $p_1, p_2, dots, p_n$ is a finite enumeration\n of all primes. Set $P = p_1 p_2 dots p_n$. Since $P + 1$ is not in our list,\n it cannot be prime. Thus, some prime factor $p_j$ divides $P + 1$. Since\n $p_j$ also divides $P$, it must divide the difference $(P + 1) - P = 1$, a\n contradiction.\n]\n\n#corollary[\n There is no largest prime number.\n] \n#corollary[\n There are infinitely many composite numbers.\n]\n\n#theorem[\n There are arbitrarily long stretches of composite numbers.\n]\n\n#proof[\n For any $n > 2$, consider $\n n! + 2, quad n! + 3, quad ..., quad n! + n #qedhere\n $\n]\n\n\n= Others\n\n== Side-by-side\n\n#slide(composer: (1fr, 1fr))[\n First column.\n][\n Second column.\n]\n\n\n== Multiple Pages\n\n#lorem(200)\n\n\n// appendix by freezing last-slide-number\n#let s = (s.methods.appendix)(self: s)\n#let (slide, empty-slide) = utils.slides(s)\n\n== Appendix\n\n#slide[\n Please pay attention to the current slide number.\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/fcecb505-d2d1-4e36-945a-225f4661a694",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:"Touying offers many built-in themes to easily create beautiful slides. For example, in this case:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:'#let s = themes.university.register(aspect-ratio: "16-9")\n'})}),"\n",(0,i.jsx)(n.p,{children:"you can use the university theme. For more detailed tutorials on themes, you can refer to the following sections."})]})}function d(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>r});var i=t(7294);const s={},o=i.createContext(s);function r(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/98ce8162.ace2f812.js b/assets/js/98ce8162.ace2f812.js deleted file mode 100644 index d6ae06df8..000000000 --- a/assets/js/98ce8162.ace2f812.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1543],{8194:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>u,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var i=t(5893),s=t(1151);const o={sidebar_position:2},r="Getting Started",a={id:"start",title:"Getting Started",description:"Before you begin, make sure you have the Typst environment installed. If not, you can use the Web App or install the Tinymist LSP and Typst Preview plugins for VS Code.",source:"@site/docs/start.md",sourceDirName:".",slug:"/start",permalink:"/touying/docs/next/start",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/start.md",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Introduction to Touying",permalink:"/touying/docs/next/intro"},next:{title:"Sections and Subsections",permalink:"/touying/docs/next/sections"}},l={},d=[{value:"More Complex Examples",id:"more-complex-examples",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"getting-started",children:"Getting Started"}),"\n",(0,i.jsxs)(n.p,{children:["Before you begin, make sure you have the Typst environment installed. If not, you can use the ",(0,i.jsx)(n.a,{href:"https://typst.app/",children:"Web App"})," or install the ",(0,i.jsx)(n.a,{href:"https://marketplace.visualstudio.com/items?itemName=myriad-dreamin.tinymist",children:"Tinymist LSP"})," and ",(0,i.jsx)(n.a,{href:"https://marketplace.visualstudio.com/items?itemName=mgt19937.typst-preview",children:"Typst Preview"})," plugins for VS Code."]}),"\n",(0,i.jsx)(n.p,{children:"To use Touying, you just need to include the following in your document:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/f5bdbf8f-7bf9-45fd-9923-0fa5d66450b2",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:"It's that simple! You've created your first Touying slides. Congratulations! \ud83c\udf89"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Tip:"})," You can use Typst syntax like ",(0,i.jsx)(n.code,{children:'#import "config.typ": *'})," or ",(0,i.jsx)(n.code,{children:'#include "content.typ"'})," to implement Touying's multi-file architecture."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Warning:"})," The comma in ",(0,i.jsx)(n.code,{children:"#let (slide, empty-slide) = utils.slides(s)"})," is necessary for the unpacking syntax."]}),"\n",(0,i.jsx)(n.h2,{id:"more-complex-examples",children:"More Complex Examples"}),"\n",(0,i.jsxs)(n.p,{children:["In fact, Touying provides various styles for slide writing. You can also use the ",(0,i.jsx)(n.code,{children:"#slide[..]"})," syntax to access more powerful features provided by Touying."]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/fcecb505-d2d1-4e36-945a-225f4661a694",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:"Touying offers many built-in themes to easily create beautiful slides. For example, in this case:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:'#let s = themes.university.register(aspect-ratio: "16-9")\n'})}),"\n",(0,i.jsx)(n.p,{children:"you can use the university theme. For more detailed tutorials on themes, you can refer to the following sections."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/cetz:0.2.2"\n#import "@preview/fletcher:0.4.4" as fletcher: node, edge\n#import "@preview/ctheorems:1.1.2": *\n\n// cetz and fletcher bindings for touying\n#let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true))\n#let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide)\n\n// Register university theme\n// You can replace it with other themes and it can still work normally\n#let s = themes.university.register(aspect-ratio: "16-9")\n\n// Set the numbering of section and subsection\n#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")\n\n// Global information configuration\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n\n// Pdfpc configuration\n// typst query --root . ./example.typ --field value --one "" > ./example.pdfpc\n#let s = (s.methods.append-preamble)(self: s, pdfpc.config(\n duration-minutes: 30,\n start-time: datetime(hour: 14, minute: 10, second: 0),\n end-time: datetime(hour: 14, minute: 40, second: 0),\n last-minutes: 5,\n note-font-size: 12,\n disable-markdown: false,\n default-transition: (\n type: "push",\n duration-seconds: 2,\n angle: ltr,\n alignment: "vertical",\n direction: "inward",\n ),\n))\n\n// Theroems configuration by ctheorems\n#show: thmrules.with(qed-symbol: $square$)\n#let theorem = thmbox("theorem", "Theorem", fill: rgb("#eeffee"))\n#let corollary = thmplain(\n "corollary",\n "Corollary",\n base: "theorem",\n titlefmt: strong\n)\n#let definition = thmbox("definition", "Definition", inset: (x: 1.2em, top: 1em))\n#let example = thmplain("example", "Example").with(numbering: none)\n#let proof = thmproof("proof", "Proof")\n\n// Extract methods\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n// Extract slide functions\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Animation\n\n== Simple Animation\n\nWe can use `#pause` to #pause display something later.\n\n#pause\n\nJust like this.\n\n#meanwhile\n\nMeanwhile, #pause we can also use `#meanwhile` to #pause display other content synchronously.\n\n\n== Complex Animation\n\n#slide(repeat: 3, self => [\n #let (uncover, only, alternatives) = utils.methods(self)\n\n At subslide #self.subslide, we can\n\n use #uncover("2-")[`#uncover` function] for reserving space,\n\n use #only("2-")[`#only` function] for not reserving space,\n\n #alternatives[call `#only` multiple times \\u{2717}][use `#alternatives` function #sym.checkmark] for choosing one of the alternatives.\n])\n\n\n== Math Equation Animation\n\nTouying equation with `pause`:\n\n#touying-equation(`\n f(x) &= pause x^2 + 2x + 1 \\\n &= pause (x + 1)^2 \\\n`)\n\n#meanwhile\n\nHere, #pause we have the expression of $f(x)$.\n\n#pause\n\nBy factorizing, we can obtain this result.\n\n\n== CeTZ Animation\n\nCeTZ Animation in Touying:\n\n#cetz-canvas({\n import cetz.draw: *\n \n rect((0,0), (5,5))\n\n (pause,)\n\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n\n (pause,)\n\n line((0,0), (2.5, 2.5), name: "line")\n})\n\n\n== Fletcher Animation\n\nFletcher Animation in Touying:\n\n#fletcher-diagram(\n node-stroke: .1em,\n node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),\n spacing: 4em,\n edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),\n node((0,0), `reading`, radius: 2em),\n edge((0,0), (0,0), `read()`, "--|>", bend: 130deg),\n pause,\n edge(`read()`, "-|>"),\n node((1,0), `eof`, radius: 2em),\n pause,\n edge(`close()`, "-|>"),\n node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)),\n edge((0,0), (2,0), `close()`, "-|>", bend: -40deg),\n)\n\n\n= Theroems\n\n== Prime numbers\n\n#definition[\n A natural number is called a #highlight[_prime number_] if it is greater\n than 1 and cannot be written as the product of two smaller natural numbers.\n]\n#example[\n The numbers $2$, $3$, and $17$ are prime.\n @cor_largest_prime shows that this list is not exhaustive!\n]\n\n#theorem("Euclid")[\n There are infinitely many primes.\n]\n#proof[\n Suppose to the contrary that $p_1, p_2, dots, p_n$ is a finite enumeration\n of all primes. Set $P = p_1 p_2 dots p_n$. Since $P + 1$ is not in our list,\n it cannot be prime. Thus, some prime factor $p_j$ divides $P + 1$. Since\n $p_j$ also divides $P$, it must divide the difference $(P + 1) - P = 1$, a\n contradiction.\n]\n\n#corollary[\n There is no largest prime number.\n] \n#corollary[\n There are infinitely many composite numbers.\n]\n\n#theorem[\n There are arbitrarily long stretches of composite numbers.\n]\n\n#proof[\n For any $n > 2$, consider $\n n! + 2, quad n! + 3, quad ..., quad n! + n #qedhere\n $\n]\n\n\n= Others\n\n== Side-by-side\n\n#slide(composer: (1fr, 1fr))[\n First column.\n][\n Second column.\n]\n\n\n== Multiple Pages\n\n#lorem(200)\n\n\n// appendix by freezing last-slide-number\n#let s = (s.methods.appendix)(self: s)\n#let (slide, empty-slide) = utils.slides(s)\n\n== Appendix\n\n#slide[\n Please pay attention to the current slide number.\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/fcecb505-d2d1-4e36-945a-225f4661a694",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:"Touying offers many built-in themes to easily create beautiful slides. For example, in this case:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{children:'#let s = themes.university.register(aspect-ratio: "16-9")\n'})}),"\n",(0,i.jsx)(n.p,{children:"you can use the university theme. For more detailed tutorials on themes, you can refer to the following sections."})]})}function u(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>r});var i=t(7294);const s={},o=i.createContext(s);function r(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/9b94a5b3.90844cd6.js b/assets/js/9b94a5b3.90844cd6.js new file mode 100644 index 000000000..c0e30b480 --- /dev/null +++ b/assets/js/9b94a5b3.90844cd6.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[5140],{5882:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>l,frontMatter:()=>o,metadata:()=>r,toc:()=>d});var i=n(5893),s=n(1151);const o={sidebar_position:2},a="MiTeX",r={id:"integration/mitex",title:"MiTeX",description:"During the process of creating slides, we often already have a LaTeX math equation that we simply want to paste into the slides without transcribing it into a Typst math equation. In such cases, we can use MiTeX.",source:"@site/versioned_docs/version-0.4.1/integration/mitex.md",sourceDirName:"integration",slug:"/integration/mitex",permalink:"/touying/docs/0.4.1/integration/mitex",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/integration/mitex.md",tags:[],version:"0.4.1",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Pinit",permalink:"/touying/docs/0.4.1/integration/pinit"},next:{title:"CeTZ",permalink:"/touying/docs/0.4.1/integration/cetz"}},c={},d=[];function u(e){const t={a:"a",code:"code",h1:"h1",img:"img",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{id:"mitex",children:"MiTeX"}),"\n",(0,i.jsxs)(t.p,{children:["During the process of creating slides, we often already have a LaTeX math equation that we simply want to paste into the slides without transcribing it into a Typst math equation. In such cases, we can use ",(0,i.jsx)(t.a,{href:"https://github.com/mitex-rs/mitex",children:"MiTeX"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Example:"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typst",children:'#import "@preview/mitex:0.2.3": *\n\nWrite inline equations like #mi("x") or #mi[y].\n\nAlso block equations (this case is from #text(blue.lighten(20%), link("https://katex.org/")[katex.org])):\n\n#mitex(`\n \\newcommand{\\f}[2]{#1f(#2)}\n \\f\\relax{x} = \\int_{-\\infty}^\\infty\n \\f\\hat\\xi\\,e^{2 \\pi i \\xi x}\n \\,d\\xi\n`)\n'})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://github.com/mitex-rs/mitex/assets/34951714/c425b2ae-b50b-46a8-a451-4d9e8e70626b",alt:"image"})}),"\n",(0,i.jsxs)(t.p,{children:["Touying also provides a ",(0,i.jsx)(t.code,{children:"touying-mitex"})," function, which can be used for example"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typst",children:"#touying-mitex(mitex, `\n f(x) &= \\pause x^2 + 2x + 1 \\\\\n &= \\pause (x + 1)^2 \\\\\n`)\n"})})]})}function l(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>r,a:()=>a});var i=n(7294);const s={},o=i.createContext(s);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),i.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/9b94a5b3.b90bccaf.js b/assets/js/9b94a5b3.b90bccaf.js deleted file mode 100644 index 17191de16..000000000 --- a/assets/js/9b94a5b3.b90bccaf.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[5140],{5882:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>l,frontMatter:()=>o,metadata:()=>r,toc:()=>d});var i=n(5893),s=n(1151);const o={sidebar_position:2},a="MiTeX",r={id:"integration/mitex",title:"MiTeX",description:"During the process of creating slides, we often already have a LaTeX math equation that we simply want to paste into the slides without transcribing it into a Typst math equation. In such cases, we can use MiTeX.",source:"@site/versioned_docs/version-0.4.1/integration/mitex.md",sourceDirName:"integration",slug:"/integration/mitex",permalink:"/touying/docs/integration/mitex",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/integration/mitex.md",tags:[],version:"0.4.1",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Pinit",permalink:"/touying/docs/integration/pinit"},next:{title:"CeTZ",permalink:"/touying/docs/integration/cetz"}},c={},d=[];function u(e){const t={a:"a",code:"code",h1:"h1",img:"img",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{id:"mitex",children:"MiTeX"}),"\n",(0,i.jsxs)(t.p,{children:["During the process of creating slides, we often already have a LaTeX math equation that we simply want to paste into the slides without transcribing it into a Typst math equation. In such cases, we can use ",(0,i.jsx)(t.a,{href:"https://github.com/mitex-rs/mitex",children:"MiTeX"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Example:"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typst",children:'#import "@preview/mitex:0.2.3": *\n\nWrite inline equations like #mi("x") or #mi[y].\n\nAlso block equations (this case is from #text(blue.lighten(20%), link("https://katex.org/")[katex.org])):\n\n#mitex(`\n \\newcommand{\\f}[2]{#1f(#2)}\n \\f\\relax{x} = \\int_{-\\infty}^\\infty\n \\f\\hat\\xi\\,e^{2 \\pi i \\xi x}\n \\,d\\xi\n`)\n'})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://github.com/mitex-rs/mitex/assets/34951714/c425b2ae-b50b-46a8-a451-4d9e8e70626b",alt:"image"})}),"\n",(0,i.jsxs)(t.p,{children:["Touying also provides a ",(0,i.jsx)(t.code,{children:"touying-mitex"})," function, which can be used for example"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typst",children:"#touying-mitex(mitex, `\n f(x) &= \\pause x^2 + 2x + 1 \\\\\n &= \\pause (x + 1)^2 \\\\\n`)\n"})})]})}function l(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>r,a:()=>a});var i=n(7294);const s={},o=i.createContext(s);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),i.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/9beb87c2.4c6b0695.js b/assets/js/9beb87c2.4c6b0695.js deleted file mode 100644 index 77fc47f5a..000000000 --- a/assets/js/9beb87c2.4c6b0695.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3034],{4123:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>o,contentTitle:()=>t,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>c});var i=s(5893),r=s(1151);const l={sidebar_position:14},t="Changelog",d={id:"changelog",title:"Changelog",description:"v0.4.1",source:"@site/docs/changelog.md",sourceDirName:".",slug:"/changelog",permalink:"/touying/docs/next/changelog",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/changelog.md",tags:[],version:"current",sidebarPosition:14,frontMatter:{sidebar_position:14},sidebar:"tutorialSidebar",previous:{title:"Fit to Height / Width",permalink:"/touying/docs/next/utilities/fit-to"},next:{title:"External Tools",permalink:"/touying/docs/next/category/external-tools"}},o={},c=[{value:"v0.4.1",id:"v041",level:2},{value:"Features",id:"features",level:3},{value:"Fixes",id:"fixes",level:3},{value:"Miscellaneous Improvements",id:"miscellaneous-improvements",level:3},{value:"v0.4.0",id:"v040",level:2},{value:"Features",id:"features-1",level:3},{value:"Fixes",id:"fixes-1",level:3},{value:"Breaking changes",id:"breaking-changes",level:2},{value:"v0.3.3",id:"v033",level:2},{value:"v0.3.2",id:"v032",level:2},{value:"v0.3.1",id:"v031",level:2},{value:"v0.3.0",id:"v030",level:2},{value:"Features",id:"features-2",level:3},{value:"Documentation",id:"documentation",level:3},{value:"Refactor",id:"refactor",level:3},{value:"Fix",id:"fix",level:3},{value:"v0.2.1",id:"v021",level:2},{value:"Features",id:"features-3",level:3},{value:"Fix",id:"fix-1",level:3},{value:"v0.2.0",id:"v020",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"changelog",children:"Changelog"}),"\n",(0,i.jsx)(n.h2,{id:"v041",children:"v0.4.1"}),"\n",(0,i.jsx)(n.h3,{id:"features",children:"Features"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"feat: support builtin outline and bookmark"}),"\n",(0,i.jsx)(n.li,{children:"feat: support speaker note for dual-screen"}),"\n",(0,i.jsx)(n.li,{children:"feat: add touying-mitex function"}),"\n",(0,i.jsxs)(n.li,{children:["feat: touying offers ",(0,i.jsx)(n.a,{href:"https://github.com/touying-typ/touying/wiki",children:"a gallery page"})," via wiki"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"fixes",children:"Fixes"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"fix: add outline-slide for dewdrop theme"}),"\n",(0,i.jsx)(n.li,{children:'fix: fix regression of default value "auto" for repeat'}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"miscellaneous-improvements",children:"Miscellaneous Improvements"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["feat: add list support for ",(0,i.jsx)(n.code,{children:"touying-outline"})," function"]}),"\n",(0,i.jsx)(n.li,{children:"feat: add auto-reset-footnote"}),"\n",(0,i.jsxs)(n.li,{children:["feat: add ",(0,i.jsx)(n.code,{children:"freeze-in-empty-page"})," for better page counter"]}),"\n",(0,i.jsxs)(n.li,{children:["feat: add ",(0,i.jsx)(n.code,{children:"..args"})," for register method to capture unused arguments"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v040",children:"v0.4.0"}),"\n",(0,i.jsx)(n.h3,{id:"features-1",children:"Features"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," support ",(0,i.jsx)(n.code,{children:"#footnote[]"})," for all themes."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," access subslide and repeat in footer and header by ",(0,i.jsx)(n.code,{children:"self => self.subslide"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," support numbered theorem environments by ",(0,i.jsx)(n.a,{href:"https://typst.app/universe/package/ctheorems",children:"ctheorems"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," support numbering for sections and subsections."]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"fixes-1",children:"Fixes"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"fix:"})," make nested includes work correctly."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"fix:"})," disable multi-page slides from creating the same section multiple times."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"breaking-changes",children:"Breaking changes"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"refactor:"})," remove ",(0,i.jsx)(n.code,{children:"self.padding"})," and add ",(0,i.jsx)(n.code,{children:"self.full-header"})," ",(0,i.jsx)(n.code,{children:"self.full-footer"})," config."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v033",children:"v0.3.3"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"template:"})," move template to ",(0,i.jsx)(n.code,{children:"touying-aqua"})," package, make Touying searchable in ",(0,i.jsx)(n.a,{href:"https://typst.app/universe/search?kind=packages",children:"Typst Universe Packages"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"themes:"})," fix bugs in university and dewdrop theme"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," make set-show rule work without ",(0,i.jsx)(n.code,{children:"setting"})," parameter"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," make ",(0,i.jsx)(n.code,{children:"composer"})," parameter more simpler"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," add ",(0,i.jsx)(n.code,{children:"empty-slide"})," function"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v032",children:"v0.3.2"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"fix critical bug:"})," fix ",(0,i.jsx)(n.code,{children:"is-sequence"})," function, make ",(0,i.jsx)(n.code,{children:"grid"})," and ",(0,i.jsx)(n.code,{children:"table"})," work correctly in touying"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"theme:"})," add aqua theme, thanks for pride7"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"theme:"})," make university theme more configurable"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"refactor:"})," don't export variable ",(0,i.jsx)(n.code,{children:"s"})," by default anymore, it will be extracted by ",(0,i.jsx)(n.code,{children:"register"})," function (",(0,i.jsx)(n.strong,{children:"Breaking Change"}),")"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"meta:"})," add ",(0,i.jsx)(n.code,{children:"categories"})," and ",(0,i.jsx)(n.code,{children:"template"})," config to ",(0,i.jsx)(n.code,{children:"typst.toml"})," for Typst 0.11"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v031",children:"v0.3.1"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"fix some typos"}),"\n",(0,i.jsx)(n.li,{children:"fix slide-level bug"}),"\n",(0,i.jsx)(n.li,{children:"fix bug of pdfpc label"}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v030",children:"v0.3.0"}),"\n",(0,i.jsx)(n.h3,{id:"features-2",children:"Features"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"better show-slides mode."}),"\n",(0,i.jsx)(n.li,{children:"support align and pad."}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"documentation",children:"Documentation"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Add more detailed documentation."}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"refactor",children:"Refactor"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"simplify theme."}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"fix",children:"Fix"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"fix many bugs."}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v021",children:"v0.2.1"}),"\n",(0,i.jsx)(n.h3,{id:"features-3",children:"Features"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Touying-reducer"}),": support cetz and fletcher animation"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"university theme"}),": add university theme"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"fix-1",children:"Fix"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"fix footer progress in metropolis theme"}),"\n",(0,i.jsx)(n.li,{children:"fix some bugs in simple and dewdrop themes"}),"\n",(0,i.jsx)(n.li,{children:"fix bug that outline does not display more than 4 sections"}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v020",children:"v0.2.0"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Object-oriented programming:"})," Singleton ",(0,i.jsx)(n.code,{children:"s"}),", binding methods ",(0,i.jsx)(n.code,{children:"utils.methods(s)"})," and ",(0,i.jsx)(n.code,{children:"(self: obj, ..) => {..}"})," methods."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Page arguments management:"})," Instead of using ",(0,i.jsx)(n.code,{children:"#set page(..)"}),", you should use ",(0,i.jsx)(n.code,{children:"self.page-args"})," to retrieve or set page parameters, thereby avoiding unnecessary creation of new pages."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:[(0,i.jsx)(n.code,{children:"#pause"})," for sequence content:"]})," You can use #pause at the outermost level of a slide, including inline and list."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:[(0,i.jsx)(n.code,{children:"#pause"})," for layout functions:"]})," You can use the ",(0,i.jsx)(n.code,{children:"composer"})," parameter to add yourself layout function like ",(0,i.jsx)(n.code,{children:"utils.side-by-side"}),", and simply use multiple pos parameters like ",(0,i.jsx)(n.code,{children:"#slide[..][..]"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:[(0,i.jsx)(n.code,{children:"#meanwhile"})," for synchronous display:"]})," Provide a ",(0,i.jsx)(n.code,{children:"#meanwhile"})," for resetting subslides counter."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:[(0,i.jsx)(n.code,{children:"#pause"})," and ",(0,i.jsx)(n.code,{children:"#meanwhile"})," for math equation:"]})," Provide a ",(0,i.jsx)(n.code,{children:'#touying-equation("x + y pause + z")'})," for math equation animations."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Slides:"})," Create simple slides using standard headings."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:["Callback-style ",(0,i.jsx)(n.code,{children:"uncover"}),", ",(0,i.jsx)(n.code,{children:"only"})," and ",(0,i.jsx)(n.code,{children:"alternatives"}),":"]})," Based on the concise syntax provided by Polylux, allow precise control of the timing for displaying content.","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["You should manually control the number of subslides using the ",(0,i.jsx)(n.code,{children:"repeat"})," parameter."]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Transparent cover:"})," Enable transparent cover using oop syntax like ",(0,i.jsx)(n.code,{children:"#let s = (s.methods.enable-transparent-cover)(self: s)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Handout mode:"})," enable handout mode by ",(0,i.jsx)(n.code,{children:"#let s = (s.methods.enable-handout-mode)(self: s)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Fit-to-width and fit-to-height:"})," Fit-to-width for title in header and fit-to-height for image.","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"utils.fit-to-width(grow: true, shrink: true, width, body)"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"utils.fit-to-height(width: none, prescale-width: none, grow: true, shrink: true, height, body)"})}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Slides counter:"})," ",(0,i.jsx)(n.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'})," and ",(0,i.jsx)(n.code,{children:"states.touying-progress(ratio => ..)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Appendix:"})," Freeze the ",(0,i.jsx)(n.code,{children:"last-slide-number"})," to prevent the slide number from increasing further."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Sections:"})," Touying's built-in section support can be used to display the current section title and show progress.","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"section"})," and ",(0,i.jsx)(n.code,{children:"subsection"})," parameter in ",(0,i.jsx)(n.code,{children:"#slide"})," to register a new section or subsection."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"states.current-section-title"})," to get the current section."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"states.touying-outline"})," or ",(0,i.jsx)(n.code,{children:"s.methods.touying-outline"})," to display a outline of sections."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"states.touying-final-sections(sections => ..)"})," for custom outline display."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"states.touying-progress-with-sections((current-sections: .., final-sections: .., current-slide-number: .., last-slide-number: ..) => ..)"})," for powerful progress display."]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Navigation bar"}),": Navigation bar like ",(0,i.jsx)(n.a,{href:"https://github.com/zbowang/BeamerTheme",children:"here"})," by ",(0,i.jsx)(n.code,{children:"states.touying-progress-with-sections(..)"}),", in ",(0,i.jsx)(n.code,{children:"dewdrop"})," theme."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Pdfpc:"})," pdfpc support and export ",(0,i.jsx)(n.code,{children:".pdfpc"})," file without external tool by ",(0,i.jsx)(n.code,{children:"typst query"})," command simply."]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>d,a:()=>t});var i=s(7294);const r={},l=i.createContext(r);function t(e){const n=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:t(e.components),i.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/9beb87c2.7cf5edc4.js b/assets/js/9beb87c2.7cf5edc4.js new file mode 100644 index 000000000..f6a03c149 --- /dev/null +++ b/assets/js/9beb87c2.7cf5edc4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3034],{4123:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>o,contentTitle:()=>t,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>c});var i=s(5893),r=s(1151);const l={sidebar_position:14},t="Changelog",d={id:"changelog",title:"Changelog",description:"v0.4.2",source:"@site/docs/changelog.md",sourceDirName:".",slug:"/changelog",permalink:"/touying/docs/next/changelog",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/changelog.md",tags:[],version:"current",sidebarPosition:14,frontMatter:{sidebar_position:14},sidebar:"tutorialSidebar",previous:{title:"Fit to Height / Width",permalink:"/touying/docs/next/utilities/fit-to"},next:{title:"External Tools",permalink:"/touying/docs/next/category/external-tools"}},o={},c=[{value:"v0.4.2",id:"v042",level:2},{value:"v0.4.1",id:"v041",level:2},{value:"Features",id:"features",level:3},{value:"Fixes",id:"fixes",level:3},{value:"Miscellaneous Improvements",id:"miscellaneous-improvements",level:3},{value:"v0.4.0",id:"v040",level:2},{value:"Features",id:"features-1",level:3},{value:"Fixes",id:"fixes-1",level:3},{value:"Breaking changes",id:"breaking-changes",level:2},{value:"v0.3.3",id:"v033",level:2},{value:"v0.3.2",id:"v032",level:2},{value:"v0.3.1",id:"v031",level:2},{value:"v0.3.0",id:"v030",level:2},{value:"Features",id:"features-2",level:3},{value:"Documentation",id:"documentation",level:3},{value:"Refactor",id:"refactor",level:3},{value:"Fix",id:"fix",level:3},{value:"v0.2.1",id:"v021",level:2},{value:"Features",id:"features-3",level:3},{value:"Fix",id:"fix-1",level:3},{value:"v0.2.0",id:"v020",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"changelog",children:"Changelog"}),"\n",(0,i.jsx)(n.h2,{id:"v042",children:"v0.4.2"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["theme(metropolis): decoupled text color with ",(0,i.jsx)(n.code,{children:"neutral-dark"})," (Breaking change)"]}),"\n",(0,i.jsx)(n.li,{children:"feat: add mark-style uncover, only and alternatives"}),"\n",(0,i.jsx)(n.li,{children:"feat: add warning for styled block for slides"}),"\n",(0,i.jsx)(n.li,{children:"feat: add warning for touying-temporary-mark"}),"\n",(0,i.jsx)(n.li,{children:"feat: add markup-text for speaker-note"}),"\n",(0,i.jsx)(n.li,{children:"fix: fix bug of slides"}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v041",children:"v0.4.1"}),"\n",(0,i.jsx)(n.h3,{id:"features",children:"Features"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"feat: support builtin outline and bookmark"}),"\n",(0,i.jsx)(n.li,{children:"feat: support speaker note for dual-screen"}),"\n",(0,i.jsx)(n.li,{children:"feat: add touying-mitex function"}),"\n",(0,i.jsxs)(n.li,{children:["feat: touying offers ",(0,i.jsx)(n.a,{href:"https://github.com/touying-typ/touying/wiki",children:"a gallery page"})," via wiki"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"fixes",children:"Fixes"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"fix: add outline-slide for dewdrop theme"}),"\n",(0,i.jsx)(n.li,{children:'fix: fix regression of default value "auto" for repeat'}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"miscellaneous-improvements",children:"Miscellaneous Improvements"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["feat: add list support for ",(0,i.jsx)(n.code,{children:"touying-outline"})," function"]}),"\n",(0,i.jsx)(n.li,{children:"feat: add auto-reset-footnote"}),"\n",(0,i.jsxs)(n.li,{children:["feat: add ",(0,i.jsx)(n.code,{children:"freeze-in-empty-page"})," for better page counter"]}),"\n",(0,i.jsxs)(n.li,{children:["feat: add ",(0,i.jsx)(n.code,{children:"..args"})," for register method to capture unused arguments"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v040",children:"v0.4.0"}),"\n",(0,i.jsx)(n.h3,{id:"features-1",children:"Features"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," support ",(0,i.jsx)(n.code,{children:"#footnote[]"})," for all themes."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," access subslide and repeat in footer and header by ",(0,i.jsx)(n.code,{children:"self => self.subslide"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," support numbered theorem environments by ",(0,i.jsx)(n.a,{href:"https://typst.app/universe/package/ctheorems",children:"ctheorems"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," support numbering for sections and subsections."]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"fixes-1",children:"Fixes"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"fix:"})," make nested includes work correctly."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"fix:"})," disable multi-page slides from creating the same section multiple times."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"breaking-changes",children:"Breaking changes"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"refactor:"})," remove ",(0,i.jsx)(n.code,{children:"self.padding"})," and add ",(0,i.jsx)(n.code,{children:"self.full-header"})," ",(0,i.jsx)(n.code,{children:"self.full-footer"})," config."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v033",children:"v0.3.3"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"template:"})," move template to ",(0,i.jsx)(n.code,{children:"touying-aqua"})," package, make Touying searchable in ",(0,i.jsx)(n.a,{href:"https://typst.app/universe/search?kind=packages",children:"Typst Universe Packages"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"themes:"})," fix bugs in university and dewdrop theme"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," make set-show rule work without ",(0,i.jsx)(n.code,{children:"setting"})," parameter"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," make ",(0,i.jsx)(n.code,{children:"composer"})," parameter more simpler"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," add ",(0,i.jsx)(n.code,{children:"empty-slide"})," function"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v032",children:"v0.3.2"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"fix critical bug:"})," fix ",(0,i.jsx)(n.code,{children:"is-sequence"})," function, make ",(0,i.jsx)(n.code,{children:"grid"})," and ",(0,i.jsx)(n.code,{children:"table"})," work correctly in touying"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"theme:"})," add aqua theme, thanks for pride7"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"theme:"})," make university theme more configurable"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"refactor:"})," don't export variable ",(0,i.jsx)(n.code,{children:"s"})," by default anymore, it will be extracted by ",(0,i.jsx)(n.code,{children:"register"})," function (",(0,i.jsx)(n.strong,{children:"Breaking Change"}),")"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"meta:"})," add ",(0,i.jsx)(n.code,{children:"categories"})," and ",(0,i.jsx)(n.code,{children:"template"})," config to ",(0,i.jsx)(n.code,{children:"typst.toml"})," for Typst 0.11"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v031",children:"v0.3.1"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"fix some typos"}),"\n",(0,i.jsx)(n.li,{children:"fix slide-level bug"}),"\n",(0,i.jsx)(n.li,{children:"fix bug of pdfpc label"}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v030",children:"v0.3.0"}),"\n",(0,i.jsx)(n.h3,{id:"features-2",children:"Features"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"better show-slides mode."}),"\n",(0,i.jsx)(n.li,{children:"support align and pad."}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"documentation",children:"Documentation"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Add more detailed documentation."}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"refactor",children:"Refactor"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"simplify theme."}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"fix",children:"Fix"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"fix many bugs."}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v021",children:"v0.2.1"}),"\n",(0,i.jsx)(n.h3,{id:"features-3",children:"Features"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Touying-reducer"}),": support cetz and fletcher animation"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"university theme"}),": add university theme"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"fix-1",children:"Fix"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"fix footer progress in metropolis theme"}),"\n",(0,i.jsx)(n.li,{children:"fix some bugs in simple and dewdrop themes"}),"\n",(0,i.jsx)(n.li,{children:"fix bug that outline does not display more than 4 sections"}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v020",children:"v0.2.0"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Object-oriented programming:"})," Singleton ",(0,i.jsx)(n.code,{children:"s"}),", binding methods ",(0,i.jsx)(n.code,{children:"utils.methods(s)"})," and ",(0,i.jsx)(n.code,{children:"(self: obj, ..) => {..}"})," methods."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Page arguments management:"})," Instead of using ",(0,i.jsx)(n.code,{children:"#set page(..)"}),", you should use ",(0,i.jsx)(n.code,{children:"self.page-args"})," to retrieve or set page parameters, thereby avoiding unnecessary creation of new pages."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:[(0,i.jsx)(n.code,{children:"#pause"})," for sequence content:"]})," You can use #pause at the outermost level of a slide, including inline and list."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:[(0,i.jsx)(n.code,{children:"#pause"})," for layout functions:"]})," You can use the ",(0,i.jsx)(n.code,{children:"composer"})," parameter to add yourself layout function like ",(0,i.jsx)(n.code,{children:"utils.side-by-side"}),", and simply use multiple pos parameters like ",(0,i.jsx)(n.code,{children:"#slide[..][..]"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:[(0,i.jsx)(n.code,{children:"#meanwhile"})," for synchronous display:"]})," Provide a ",(0,i.jsx)(n.code,{children:"#meanwhile"})," for resetting subslides counter."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:[(0,i.jsx)(n.code,{children:"#pause"})," and ",(0,i.jsx)(n.code,{children:"#meanwhile"})," for math equation:"]})," Provide a ",(0,i.jsx)(n.code,{children:'#touying-equation("x + y pause + z")'})," for math equation animations."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Slides:"})," Create simple slides using standard headings."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:["Callback-style ",(0,i.jsx)(n.code,{children:"uncover"}),", ",(0,i.jsx)(n.code,{children:"only"})," and ",(0,i.jsx)(n.code,{children:"alternatives"}),":"]})," Based on the concise syntax provided by Polylux, allow precise control of the timing for displaying content.","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["You should manually control the number of subslides using the ",(0,i.jsx)(n.code,{children:"repeat"})," parameter."]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Transparent cover:"})," Enable transparent cover using oop syntax like ",(0,i.jsx)(n.code,{children:"#let s = (s.methods.enable-transparent-cover)(self: s)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Handout mode:"})," enable handout mode by ",(0,i.jsx)(n.code,{children:"#let s = (s.methods.enable-handout-mode)(self: s)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Fit-to-width and fit-to-height:"})," Fit-to-width for title in header and fit-to-height for image.","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"utils.fit-to-width(grow: true, shrink: true, width, body)"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"utils.fit-to-height(width: none, prescale-width: none, grow: true, shrink: true, height, body)"})}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Slides counter:"})," ",(0,i.jsx)(n.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'})," and ",(0,i.jsx)(n.code,{children:"states.touying-progress(ratio => ..)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Appendix:"})," Freeze the ",(0,i.jsx)(n.code,{children:"last-slide-number"})," to prevent the slide number from increasing further."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Sections:"})," Touying's built-in section support can be used to display the current section title and show progress.","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"section"})," and ",(0,i.jsx)(n.code,{children:"subsection"})," parameter in ",(0,i.jsx)(n.code,{children:"#slide"})," to register a new section or subsection."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"states.current-section-title"})," to get the current section."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"states.touying-outline"})," or ",(0,i.jsx)(n.code,{children:"s.methods.touying-outline"})," to display a outline of sections."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"states.touying-final-sections(sections => ..)"})," for custom outline display."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"states.touying-progress-with-sections((current-sections: .., final-sections: .., current-slide-number: .., last-slide-number: ..) => ..)"})," for powerful progress display."]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Navigation bar"}),": Navigation bar like ",(0,i.jsx)(n.a,{href:"https://github.com/zbowang/BeamerTheme",children:"here"})," by ",(0,i.jsx)(n.code,{children:"states.touying-progress-with-sections(..)"}),", in ",(0,i.jsx)(n.code,{children:"dewdrop"})," theme."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Pdfpc:"})," pdfpc support and export ",(0,i.jsx)(n.code,{children:".pdfpc"})," file without external tool by ",(0,i.jsx)(n.code,{children:"typst query"})," command simply."]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>d,a:()=>t});var i=s(7294);const r={},l=i.createContext(r);function t(e){const n=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:t(e.components),i.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/3b0a1f02.30d2f516.js b/assets/js/9c7bd7dc.a1181ebf.js similarity index 94% rename from assets/js/3b0a1f02.30d2f516.js rename to assets/js/9c7bd7dc.a1181ebf.js index cc81e1979..dcd3456cb 100644 --- a/assets/js/3b0a1f02.30d2f516.js +++ b/assets/js/9c7bd7dc.a1181ebf.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7460],{5644:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>r,contentTitle:()=>a,default:()=>d,frontMatter:()=>s,metadata:()=>p,toc:()=>l});var i=t(5893),o=t(1151);const s={sidebar_position:1},a="Pinit",p={id:"integration/pinit",title:"Pinit",description:'Pinit package provides the ability to perform absolute positioning based on the page and relative positioning based on "pins," making it convenient to implement arrow pointing and explanatory effects for slides.',source:"@site/versioned_docs/version-0.4.1/integration/pinit.md",sourceDirName:"integration",slug:"/integration/pinit",permalink:"/touying/docs/integration/pinit",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/integration/pinit.md",tags:[],version:"0.4.1",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Package Integration",permalink:"/touying/docs/category/package-integration"},next:{title:"MiTeX",permalink:"/touying/docs/integration/mitex"}},r={},l=[{value:"Simple Example",id:"simple-example",level:2},{value:"Complex Example",id:"complex-example",level:2}];function c(n){const e={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,o.a)(),...n.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h1,{id:"pinit",children:"Pinit"}),"\n",(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.a,{href:"https://github.com/OrangeX4/typst-pinit/",children:"Pinit"}),' package provides the ability to perform absolute positioning based on the page and relative positioning based on "pins," making it convenient to implement arrow pointing and explanatory effects for slides.']}),"\n",(0,i.jsx)(e.h2,{id:"simple-example",children:"Simple Example"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-typst",children:'#import "@preview/pinit:0.1.3": *\n\n#set text(size: 24pt)\n\nA simple #pin(1)highlighted text#pin(2).\n\n#pinit-highlight(1, 2)\n\n#pinit-point-from(2)[It is simple.]\n'})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{src:"https://github.com/touying-typ/touying/assets/34951714/b17f9b80-5a8b-4943-a222-bcb0eb38611d",alt:"image"})}),"\n",(0,i.jsxs)(e.p,{children:["Another ",(0,i.jsx)(e.a,{href:"https://github.com/OrangeX4/typst-pinit/blob/main/examples/equation-desc.typ",children:"example"}),":"]}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9b4a6b50-fcfd-497d-9649-ae1f7762ee3f",alt:"image"})}),"\n",(0,i.jsx)(e.h2,{id:"complex-example",children:"Complex Example"}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{src:"https://github.com/touying-typ/touying/assets/34951714/7fb0095a-fd86-49ec-af95-15bc81a341c2",alt:"image"})}),"\n",(0,i.jsx)(e.p,{children:"An example of shared usage with Touying:"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/pinit:0.1.3": *\n\n#(s.page-args.paper = "presentation-4-3")\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#set text(size: 20pt, font: "Calibri", ligatures: false)\n#show heading: set text(weight: "regular")\n#show heading: set block(above: 1.4em, below: 1em)\n#show heading.where(level: 1): set text(size: 1.5em)\n\n// Useful functions\n#let crimson = rgb("#c00000")\n#let greybox(..args, body) = rect(fill: luma(95%), stroke: 0.5pt, inset: 0pt, outset: 10pt, ..args, body)\n#let redbold(body) = {\n set text(fill: crimson, weight: "bold")\n body\n}\n#let blueit(body) = {\n set text(fill: blue)\n body\n}\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n// Main body\n#slide(self => [\n #let (uncover, only) = utils.methods(self)\n\n = Asymptotic Notation: $O$\n\n Use #pin("h1")asymptotic notations#pin("h2") to describe asymptotic efficiency of algorithms.\n (Ignore constant coefficients and lower-order terms.)\n\n #pause\n\n #greybox[\n Given a function $g(n)$, we denote by $O(g(n))$ the following *set of functions*:\n #redbold(${f(n): "exists" c > 0 "and" n_0 > 0, "such that" f(n) <= c dot g(n) "for all" n >= n_0}$)\n ]\n\n #pinit-highlight("h1", "h2")\n\n #pause\n\n $f(n) = O(g(n))$: #pin(1)$f(n)$ is *asymptotically smaller* than $g(n)$.#pin(2)\n\n // #absolute-place(dx: 550pt, dy: 320pt, image(width: 25%, "asymptotic.png"))\n\n #pause\n\n $f(n) redbold(in) O(g(n))$: $f(n)$ is *asymptotically* #redbold[at most] $g(n)$.\n\n #only("4-", pinit-line(stroke: 3pt + crimson, start-dy: -0.25em, end-dy: -0.25em, 1, 2))\n\n #pause\n\n #block[Insertion Sort as an #pin("r1")example#pin("r2"):]\n\n - Best Case: $T(n) approx c n + c\' n - c\'\'$ #pin(3)\n - Worst case: $T(n) approx c n + (c\' \\/ 2) n^2 - c\'\'$ #pin(4)\n\n #pinit-rect("r1", "r2")\n\n #pause\n\n #pinit-place(3, dx: 15pt, dy: -15pt)[#redbold[$T(n) = O(n)$]]\n #pinit-place(4, dx: 15pt, dy: -15pt)[#redbold[$T(n) = O(n)$]]\n\n #pause\n\n #blueit[Q: Is $n^(3) = O(n^2)$#pin("que")? How to prove your answer#pin("ans")?]\n\n #pause\n\n #only("8-", pinit-point-to("que", fill: crimson, redbold[No.]))\n #only("8-", pinit-point-from("ans", body-dx: -150pt)[\n Show that the equation $(3/2)^n >= c$ \\\n has infinitely many solutions for $n$.\n ])\n])\n'})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{src:"https://github.com/touying-typ/touying/assets/34951714/f36a026f-491c-4290-90d5-0aa3c2086567",alt:"image"})})]})}function d(n={}){const{wrapper:e}={...(0,o.a)(),...n.components};return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(c,{...n})}):c(n)}},1151:(n,e,t)=>{t.d(e,{Z:()=>p,a:()=>a});var i=t(7294);const o={},s=i.createContext(o);function a(n){const e=i.useContext(s);return i.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function p(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(o):n.components||o:a(n.components),i.createElement(s.Provider,{value:e},n.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1392],{9020:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>r,contentTitle:()=>a,default:()=>d,frontMatter:()=>s,metadata:()=>p,toc:()=>l});var i=t(5893),o=t(1151);const s={sidebar_position:1},a="Pinit",p={id:"integration/pinit",title:"Pinit",description:'Pinit package provides the ability to perform absolute positioning based on the page and relative positioning based on "pins," making it convenient to implement arrow pointing and explanatory effects for slides.',source:"@site/versioned_docs/version-0.4.2/integration/pinit.md",sourceDirName:"integration",slug:"/integration/pinit",permalink:"/touying/docs/integration/pinit",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/integration/pinit.md",tags:[],version:"0.4.2",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Package Integration",permalink:"/touying/docs/category/package-integration"},next:{title:"MiTeX",permalink:"/touying/docs/integration/mitex"}},r={},l=[{value:"Simple Example",id:"simple-example",level:2},{value:"Complex Example",id:"complex-example",level:2}];function c(n){const e={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,o.a)(),...n.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h1,{id:"pinit",children:"Pinit"}),"\n",(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.a,{href:"https://github.com/OrangeX4/typst-pinit/",children:"Pinit"}),' package provides the ability to perform absolute positioning based on the page and relative positioning based on "pins," making it convenient to implement arrow pointing and explanatory effects for slides.']}),"\n",(0,i.jsx)(e.h2,{id:"simple-example",children:"Simple Example"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-typst",children:'#import "@preview/pinit:0.1.3": *\n\n#set text(size: 24pt)\n\nA simple #pin(1)highlighted text#pin(2).\n\n#pinit-highlight(1, 2)\n\n#pinit-point-from(2)[It is simple.]\n'})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{src:"https://github.com/touying-typ/touying/assets/34951714/b17f9b80-5a8b-4943-a222-bcb0eb38611d",alt:"image"})}),"\n",(0,i.jsxs)(e.p,{children:["Another ",(0,i.jsx)(e.a,{href:"https://github.com/OrangeX4/typst-pinit/blob/main/examples/equation-desc.typ",children:"example"}),":"]}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9b4a6b50-fcfd-497d-9649-ae1f7762ee3f",alt:"image"})}),"\n",(0,i.jsx)(e.h2,{id:"complex-example",children:"Complex Example"}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{src:"https://github.com/touying-typ/touying/assets/34951714/7fb0095a-fd86-49ec-af95-15bc81a341c2",alt:"image"})}),"\n",(0,i.jsx)(e.p,{children:"An example of shared usage with Touying:"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n#import "@preview/pinit:0.1.3": *\n\n#(s.page-args.paper = "presentation-4-3")\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#set text(size: 20pt, font: "Calibri", ligatures: false)\n#show heading: set text(weight: "regular")\n#show heading: set block(above: 1.4em, below: 1em)\n#show heading.where(level: 1): set text(size: 1.5em)\n\n// Useful functions\n#let crimson = rgb("#c00000")\n#let greybox(..args, body) = rect(fill: luma(95%), stroke: 0.5pt, inset: 0pt, outset: 10pt, ..args, body)\n#let redbold(body) = {\n set text(fill: crimson, weight: "bold")\n body\n}\n#let blueit(body) = {\n set text(fill: blue)\n body\n}\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n// Main body\n#slide(self => [\n #let (uncover, only) = utils.methods(self)\n\n = Asymptotic Notation: $O$\n\n Use #pin("h1")asymptotic notations#pin("h2") to describe asymptotic efficiency of algorithms.\n (Ignore constant coefficients and lower-order terms.)\n\n #pause\n\n #greybox[\n Given a function $g(n)$, we denote by $O(g(n))$ the following *set of functions*:\n #redbold(${f(n): "exists" c > 0 "and" n_0 > 0, "such that" f(n) <= c dot g(n) "for all" n >= n_0}$)\n ]\n\n #pinit-highlight("h1", "h2")\n\n #pause\n\n $f(n) = O(g(n))$: #pin(1)$f(n)$ is *asymptotically smaller* than $g(n)$.#pin(2)\n\n // #absolute-place(dx: 550pt, dy: 320pt, image(width: 25%, "asymptotic.png"))\n\n #pause\n\n $f(n) redbold(in) O(g(n))$: $f(n)$ is *asymptotically* #redbold[at most] $g(n)$.\n\n #only("4-", pinit-line(stroke: 3pt + crimson, start-dy: -0.25em, end-dy: -0.25em, 1, 2))\n\n #pause\n\n #block[Insertion Sort as an #pin("r1")example#pin("r2"):]\n\n - Best Case: $T(n) approx c n + c\' n - c\'\'$ #pin(3)\n - Worst case: $T(n) approx c n + (c\' \\/ 2) n^2 - c\'\'$ #pin(4)\n\n #pinit-rect("r1", "r2")\n\n #pause\n\n #pinit-place(3, dx: 15pt, dy: -15pt)[#redbold[$T(n) = O(n)$]]\n #pinit-place(4, dx: 15pt, dy: -15pt)[#redbold[$T(n) = O(n)$]]\n\n #pause\n\n #blueit[Q: Is $n^(3) = O(n^2)$#pin("que")? How to prove your answer#pin("ans")?]\n\n #pause\n\n #only("8-", pinit-point-to("que", fill: crimson, redbold[No.]))\n #only("8-", pinit-point-from("ans", body-dx: -150pt)[\n Show that the equation $(3/2)^n >= c$ \\\n has infinitely many solutions for $n$.\n ])\n])\n'})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{src:"https://github.com/touying-typ/touying/assets/34951714/f36a026f-491c-4290-90d5-0aa3c2086567",alt:"image"})})]})}function d(n={}){const{wrapper:e}={...(0,o.a)(),...n.components};return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(c,{...n})}):c(n)}},1151:(n,e,t)=>{t.d(e,{Z:()=>p,a:()=>a});var i=t(7294);const o={},s=i.createContext(o);function a(n){const e=i.useContext(s);return i.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function p(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(o):n.components||o:a(n.components),i.createElement(s.Provider,{value:e},n.children)}}}]); \ No newline at end of file diff --git a/assets/js/9dfc2059.20e9f7c4.js b/assets/js/9dfc2059.20e9f7c4.js new file mode 100644 index 000000000..635797a75 --- /dev/null +++ b/assets/js/9dfc2059.20e9f7c4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9437],{7606:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>o,contentTitle:()=>t,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>c});var i=s(5893),r=s(1151);const l={sidebar_position:14},t="Changelog",d={id:"changelog",title:"Changelog",description:"v0.4.1",source:"@site/versioned_docs/version-0.4.1/changelog.md",sourceDirName:".",slug:"/changelog",permalink:"/touying/docs/0.4.1/changelog",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/changelog.md",tags:[],version:"0.4.1",sidebarPosition:14,frontMatter:{sidebar_position:14},sidebar:"tutorialSidebar",previous:{title:"Fit to Height / Width",permalink:"/touying/docs/0.4.1/utilities/fit-to"},next:{title:"External Tools",permalink:"/touying/docs/0.4.1/category/external-tools"}},o={},c=[{value:"v0.4.1",id:"v041",level:2},{value:"Features",id:"features",level:3},{value:"Fixes",id:"fixes",level:3},{value:"Miscellaneous Improvements",id:"miscellaneous-improvements",level:3},{value:"v0.4.0",id:"v040",level:2},{value:"Features",id:"features-1",level:3},{value:"Fixes",id:"fixes-1",level:3},{value:"Breaking changes",id:"breaking-changes",level:2},{value:"v0.3.3",id:"v033",level:2},{value:"v0.3.2",id:"v032",level:2},{value:"v0.3.1",id:"v031",level:2},{value:"v0.3.0",id:"v030",level:2},{value:"Features",id:"features-2",level:3},{value:"Documentation",id:"documentation",level:3},{value:"Refactor",id:"refactor",level:3},{value:"Fix",id:"fix",level:3},{value:"v0.2.1",id:"v021",level:2},{value:"Features",id:"features-3",level:3},{value:"Fix",id:"fix-1",level:3},{value:"v0.2.0",id:"v020",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"changelog",children:"Changelog"}),"\n",(0,i.jsx)(n.h2,{id:"v041",children:"v0.4.1"}),"\n",(0,i.jsx)(n.h3,{id:"features",children:"Features"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"feat: support builtin outline and bookmark"}),"\n",(0,i.jsx)(n.li,{children:"feat: support speaker note for dual-screen"}),"\n",(0,i.jsx)(n.li,{children:"feat: add touying-mitex function"}),"\n",(0,i.jsxs)(n.li,{children:["feat: touying offers ",(0,i.jsx)(n.a,{href:"https://github.com/touying-typ/touying/wiki",children:"a gallery page"})," via wiki"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"fixes",children:"Fixes"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"fix: add outline-slide for dewdrop theme"}),"\n",(0,i.jsx)(n.li,{children:'fix: fix regression of default value "auto" for repeat'}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"miscellaneous-improvements",children:"Miscellaneous Improvements"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["feat: add list support for ",(0,i.jsx)(n.code,{children:"touying-outline"})," function"]}),"\n",(0,i.jsx)(n.li,{children:"feat: add auto-reset-footnote"}),"\n",(0,i.jsxs)(n.li,{children:["feat: add ",(0,i.jsx)(n.code,{children:"freeze-in-empty-page"})," for better page counter"]}),"\n",(0,i.jsxs)(n.li,{children:["feat: add ",(0,i.jsx)(n.code,{children:"..args"})," for register method to capture unused arguments"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v040",children:"v0.4.0"}),"\n",(0,i.jsx)(n.h3,{id:"features-1",children:"Features"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," support ",(0,i.jsx)(n.code,{children:"#footnote[]"})," for all themes."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," access subslide and repeat in footer and header by ",(0,i.jsx)(n.code,{children:"self => self.subslide"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," support numbered theorem environments by ",(0,i.jsx)(n.a,{href:"https://typst.app/universe/package/ctheorems",children:"ctheorems"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," support numbering for sections and subsections."]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"fixes-1",children:"Fixes"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"fix:"})," make nested includes work correctly."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"fix:"})," disable multi-page slides from creating the same section multiple times."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"breaking-changes",children:"Breaking changes"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"refactor:"})," remove ",(0,i.jsx)(n.code,{children:"self.padding"})," and add ",(0,i.jsx)(n.code,{children:"self.full-header"})," ",(0,i.jsx)(n.code,{children:"self.full-footer"})," config."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v033",children:"v0.3.3"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"template:"})," move template to ",(0,i.jsx)(n.code,{children:"touying-aqua"})," package, make Touying searchable in ",(0,i.jsx)(n.a,{href:"https://typst.app/universe/search?kind=packages",children:"Typst Universe Packages"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"themes:"})," fix bugs in university and dewdrop theme"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," make set-show rule work without ",(0,i.jsx)(n.code,{children:"setting"})," parameter"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," make ",(0,i.jsx)(n.code,{children:"composer"})," parameter more simpler"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," add ",(0,i.jsx)(n.code,{children:"empty-slide"})," function"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v032",children:"v0.3.2"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"fix critical bug:"})," fix ",(0,i.jsx)(n.code,{children:"is-sequence"})," function, make ",(0,i.jsx)(n.code,{children:"grid"})," and ",(0,i.jsx)(n.code,{children:"table"})," work correctly in touying"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"theme:"})," add aqua theme, thanks for pride7"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"theme:"})," make university theme more configurable"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"refactor:"})," don't export variable ",(0,i.jsx)(n.code,{children:"s"})," by default anymore, it will be extracted by ",(0,i.jsx)(n.code,{children:"register"})," function (",(0,i.jsx)(n.strong,{children:"Breaking Change"}),")"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"meta:"})," add ",(0,i.jsx)(n.code,{children:"categories"})," and ",(0,i.jsx)(n.code,{children:"template"})," config to ",(0,i.jsx)(n.code,{children:"typst.toml"})," for Typst 0.11"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v031",children:"v0.3.1"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"fix some typos"}),"\n",(0,i.jsx)(n.li,{children:"fix slide-level bug"}),"\n",(0,i.jsx)(n.li,{children:"fix bug of pdfpc label"}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v030",children:"v0.3.0"}),"\n",(0,i.jsx)(n.h3,{id:"features-2",children:"Features"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"better show-slides mode."}),"\n",(0,i.jsx)(n.li,{children:"support align and pad."}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"documentation",children:"Documentation"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Add more detailed documentation."}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"refactor",children:"Refactor"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"simplify theme."}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"fix",children:"Fix"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"fix many bugs."}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v021",children:"v0.2.1"}),"\n",(0,i.jsx)(n.h3,{id:"features-3",children:"Features"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Touying-reducer"}),": support cetz and fletcher animation"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"university theme"}),": add university theme"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"fix-1",children:"Fix"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"fix footer progress in metropolis theme"}),"\n",(0,i.jsx)(n.li,{children:"fix some bugs in simple and dewdrop themes"}),"\n",(0,i.jsx)(n.li,{children:"fix bug that outline does not display more than 4 sections"}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v020",children:"v0.2.0"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Object-oriented programming:"})," Singleton ",(0,i.jsx)(n.code,{children:"s"}),", binding methods ",(0,i.jsx)(n.code,{children:"utils.methods(s)"})," and ",(0,i.jsx)(n.code,{children:"(self: obj, ..) => {..}"})," methods."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Page arguments management:"})," Instead of using ",(0,i.jsx)(n.code,{children:"#set page(..)"}),", you should use ",(0,i.jsx)(n.code,{children:"self.page-args"})," to retrieve or set page parameters, thereby avoiding unnecessary creation of new pages."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:[(0,i.jsx)(n.code,{children:"#pause"})," for sequence content:"]})," You can use #pause at the outermost level of a slide, including inline and list."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:[(0,i.jsx)(n.code,{children:"#pause"})," for layout functions:"]})," You can use the ",(0,i.jsx)(n.code,{children:"composer"})," parameter to add yourself layout function like ",(0,i.jsx)(n.code,{children:"utils.side-by-side"}),", and simply use multiple pos parameters like ",(0,i.jsx)(n.code,{children:"#slide[..][..]"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:[(0,i.jsx)(n.code,{children:"#meanwhile"})," for synchronous display:"]})," Provide a ",(0,i.jsx)(n.code,{children:"#meanwhile"})," for resetting subslides counter."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:[(0,i.jsx)(n.code,{children:"#pause"})," and ",(0,i.jsx)(n.code,{children:"#meanwhile"})," for math equation:"]})," Provide a ",(0,i.jsx)(n.code,{children:'#touying-equation("x + y pause + z")'})," for math equation animations."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Slides:"})," Create simple slides using standard headings."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:["Callback-style ",(0,i.jsx)(n.code,{children:"uncover"}),", ",(0,i.jsx)(n.code,{children:"only"})," and ",(0,i.jsx)(n.code,{children:"alternatives"}),":"]})," Based on the concise syntax provided by Polylux, allow precise control of the timing for displaying content.","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["You should manually control the number of subslides using the ",(0,i.jsx)(n.code,{children:"repeat"})," parameter."]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Transparent cover:"})," Enable transparent cover using oop syntax like ",(0,i.jsx)(n.code,{children:"#let s = (s.methods.enable-transparent-cover)(self: s)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Handout mode:"})," enable handout mode by ",(0,i.jsx)(n.code,{children:"#let s = (s.methods.enable-handout-mode)(self: s)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Fit-to-width and fit-to-height:"})," Fit-to-width for title in header and fit-to-height for image.","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"utils.fit-to-width(grow: true, shrink: true, width, body)"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"utils.fit-to-height(width: none, prescale-width: none, grow: true, shrink: true, height, body)"})}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Slides counter:"})," ",(0,i.jsx)(n.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'})," and ",(0,i.jsx)(n.code,{children:"states.touying-progress(ratio => ..)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Appendix:"})," Freeze the ",(0,i.jsx)(n.code,{children:"last-slide-number"})," to prevent the slide number from increasing further."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Sections:"})," Touying's built-in section support can be used to display the current section title and show progress.","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"section"})," and ",(0,i.jsx)(n.code,{children:"subsection"})," parameter in ",(0,i.jsx)(n.code,{children:"#slide"})," to register a new section or subsection."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"states.current-section-title"})," to get the current section."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"states.touying-outline"})," or ",(0,i.jsx)(n.code,{children:"s.methods.touying-outline"})," to display a outline of sections."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"states.touying-final-sections(sections => ..)"})," for custom outline display."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"states.touying-progress-with-sections((current-sections: .., final-sections: .., current-slide-number: .., last-slide-number: ..) => ..)"})," for powerful progress display."]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Navigation bar"}),": Navigation bar like ",(0,i.jsx)(n.a,{href:"https://github.com/zbowang/BeamerTheme",children:"here"})," by ",(0,i.jsx)(n.code,{children:"states.touying-progress-with-sections(..)"}),", in ",(0,i.jsx)(n.code,{children:"dewdrop"})," theme."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Pdfpc:"})," pdfpc support and export ",(0,i.jsx)(n.code,{children:".pdfpc"})," file without external tool by ",(0,i.jsx)(n.code,{children:"typst query"})," command simply."]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>d,a:()=>t});var i=s(7294);const r={},l=i.createContext(r);function t(e){const n=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:t(e.components),i.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/9dfc2059.9de397a8.js b/assets/js/9dfc2059.9de397a8.js deleted file mode 100644 index 75a2c73f5..000000000 --- a/assets/js/9dfc2059.9de397a8.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9437],{7606:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>o,contentTitle:()=>t,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>c});var i=s(5893),r=s(1151);const l={sidebar_position:14},t="Changelog",d={id:"changelog",title:"Changelog",description:"v0.4.1",source:"@site/versioned_docs/version-0.4.1/changelog.md",sourceDirName:".",slug:"/changelog",permalink:"/touying/docs/changelog",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/changelog.md",tags:[],version:"0.4.1",sidebarPosition:14,frontMatter:{sidebar_position:14},sidebar:"tutorialSidebar",previous:{title:"Fit to Height / Width",permalink:"/touying/docs/utilities/fit-to"},next:{title:"External Tools",permalink:"/touying/docs/category/external-tools"}},o={},c=[{value:"v0.4.1",id:"v041",level:2},{value:"Features",id:"features",level:3},{value:"Fixes",id:"fixes",level:3},{value:"Miscellaneous Improvements",id:"miscellaneous-improvements",level:3},{value:"v0.4.0",id:"v040",level:2},{value:"Features",id:"features-1",level:3},{value:"Fixes",id:"fixes-1",level:3},{value:"Breaking changes",id:"breaking-changes",level:2},{value:"v0.3.3",id:"v033",level:2},{value:"v0.3.2",id:"v032",level:2},{value:"v0.3.1",id:"v031",level:2},{value:"v0.3.0",id:"v030",level:2},{value:"Features",id:"features-2",level:3},{value:"Documentation",id:"documentation",level:3},{value:"Refactor",id:"refactor",level:3},{value:"Fix",id:"fix",level:3},{value:"v0.2.1",id:"v021",level:2},{value:"Features",id:"features-3",level:3},{value:"Fix",id:"fix-1",level:3},{value:"v0.2.0",id:"v020",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"changelog",children:"Changelog"}),"\n",(0,i.jsx)(n.h2,{id:"v041",children:"v0.4.1"}),"\n",(0,i.jsx)(n.h3,{id:"features",children:"Features"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"feat: support builtin outline and bookmark"}),"\n",(0,i.jsx)(n.li,{children:"feat: support speaker note for dual-screen"}),"\n",(0,i.jsx)(n.li,{children:"feat: add touying-mitex function"}),"\n",(0,i.jsxs)(n.li,{children:["feat: touying offers ",(0,i.jsx)(n.a,{href:"https://github.com/touying-typ/touying/wiki",children:"a gallery page"})," via wiki"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"fixes",children:"Fixes"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"fix: add outline-slide for dewdrop theme"}),"\n",(0,i.jsx)(n.li,{children:'fix: fix regression of default value "auto" for repeat'}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"miscellaneous-improvements",children:"Miscellaneous Improvements"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["feat: add list support for ",(0,i.jsx)(n.code,{children:"touying-outline"})," function"]}),"\n",(0,i.jsx)(n.li,{children:"feat: add auto-reset-footnote"}),"\n",(0,i.jsxs)(n.li,{children:["feat: add ",(0,i.jsx)(n.code,{children:"freeze-in-empty-page"})," for better page counter"]}),"\n",(0,i.jsxs)(n.li,{children:["feat: add ",(0,i.jsx)(n.code,{children:"..args"})," for register method to capture unused arguments"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v040",children:"v0.4.0"}),"\n",(0,i.jsx)(n.h3,{id:"features-1",children:"Features"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," support ",(0,i.jsx)(n.code,{children:"#footnote[]"})," for all themes."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," access subslide and repeat in footer and header by ",(0,i.jsx)(n.code,{children:"self => self.subslide"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," support numbered theorem environments by ",(0,i.jsx)(n.a,{href:"https://typst.app/universe/package/ctheorems",children:"ctheorems"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," support numbering for sections and subsections."]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"fixes-1",children:"Fixes"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"fix:"})," make nested includes work correctly."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"fix:"})," disable multi-page slides from creating the same section multiple times."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"breaking-changes",children:"Breaking changes"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"refactor:"})," remove ",(0,i.jsx)(n.code,{children:"self.padding"})," and add ",(0,i.jsx)(n.code,{children:"self.full-header"})," ",(0,i.jsx)(n.code,{children:"self.full-footer"})," config."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v033",children:"v0.3.3"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"template:"})," move template to ",(0,i.jsx)(n.code,{children:"touying-aqua"})," package, make Touying searchable in ",(0,i.jsx)(n.a,{href:"https://typst.app/universe/search?kind=packages",children:"Typst Universe Packages"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"themes:"})," fix bugs in university and dewdrop theme"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," make set-show rule work without ",(0,i.jsx)(n.code,{children:"setting"})," parameter"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," make ",(0,i.jsx)(n.code,{children:"composer"})," parameter more simpler"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"feat:"})," add ",(0,i.jsx)(n.code,{children:"empty-slide"})," function"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v032",children:"v0.3.2"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"fix critical bug:"})," fix ",(0,i.jsx)(n.code,{children:"is-sequence"})," function, make ",(0,i.jsx)(n.code,{children:"grid"})," and ",(0,i.jsx)(n.code,{children:"table"})," work correctly in touying"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"theme:"})," add aqua theme, thanks for pride7"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"theme:"})," make university theme more configurable"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"refactor:"})," don't export variable ",(0,i.jsx)(n.code,{children:"s"})," by default anymore, it will be extracted by ",(0,i.jsx)(n.code,{children:"register"})," function (",(0,i.jsx)(n.strong,{children:"Breaking Change"}),")"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"meta:"})," add ",(0,i.jsx)(n.code,{children:"categories"})," and ",(0,i.jsx)(n.code,{children:"template"})," config to ",(0,i.jsx)(n.code,{children:"typst.toml"})," for Typst 0.11"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v031",children:"v0.3.1"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"fix some typos"}),"\n",(0,i.jsx)(n.li,{children:"fix slide-level bug"}),"\n",(0,i.jsx)(n.li,{children:"fix bug of pdfpc label"}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v030",children:"v0.3.0"}),"\n",(0,i.jsx)(n.h3,{id:"features-2",children:"Features"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"better show-slides mode."}),"\n",(0,i.jsx)(n.li,{children:"support align and pad."}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"documentation",children:"Documentation"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Add more detailed documentation."}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"refactor",children:"Refactor"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"simplify theme."}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"fix",children:"Fix"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"fix many bugs."}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v021",children:"v0.2.1"}),"\n",(0,i.jsx)(n.h3,{id:"features-3",children:"Features"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Touying-reducer"}),": support cetz and fletcher animation"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"university theme"}),": add university theme"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"fix-1",children:"Fix"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"fix footer progress in metropolis theme"}),"\n",(0,i.jsx)(n.li,{children:"fix some bugs in simple and dewdrop themes"}),"\n",(0,i.jsx)(n.li,{children:"fix bug that outline does not display more than 4 sections"}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"v020",children:"v0.2.0"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Object-oriented programming:"})," Singleton ",(0,i.jsx)(n.code,{children:"s"}),", binding methods ",(0,i.jsx)(n.code,{children:"utils.methods(s)"})," and ",(0,i.jsx)(n.code,{children:"(self: obj, ..) => {..}"})," methods."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Page arguments management:"})," Instead of using ",(0,i.jsx)(n.code,{children:"#set page(..)"}),", you should use ",(0,i.jsx)(n.code,{children:"self.page-args"})," to retrieve or set page parameters, thereby avoiding unnecessary creation of new pages."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:[(0,i.jsx)(n.code,{children:"#pause"})," for sequence content:"]})," You can use #pause at the outermost level of a slide, including inline and list."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:[(0,i.jsx)(n.code,{children:"#pause"})," for layout functions:"]})," You can use the ",(0,i.jsx)(n.code,{children:"composer"})," parameter to add yourself layout function like ",(0,i.jsx)(n.code,{children:"utils.side-by-side"}),", and simply use multiple pos parameters like ",(0,i.jsx)(n.code,{children:"#slide[..][..]"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:[(0,i.jsx)(n.code,{children:"#meanwhile"})," for synchronous display:"]})," Provide a ",(0,i.jsx)(n.code,{children:"#meanwhile"})," for resetting subslides counter."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:[(0,i.jsx)(n.code,{children:"#pause"})," and ",(0,i.jsx)(n.code,{children:"#meanwhile"})," for math equation:"]})," Provide a ",(0,i.jsx)(n.code,{children:'#touying-equation("x + y pause + z")'})," for math equation animations."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Slides:"})," Create simple slides using standard headings."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:["Callback-style ",(0,i.jsx)(n.code,{children:"uncover"}),", ",(0,i.jsx)(n.code,{children:"only"})," and ",(0,i.jsx)(n.code,{children:"alternatives"}),":"]})," Based on the concise syntax provided by Polylux, allow precise control of the timing for displaying content.","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["You should manually control the number of subslides using the ",(0,i.jsx)(n.code,{children:"repeat"})," parameter."]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Transparent cover:"})," Enable transparent cover using oop syntax like ",(0,i.jsx)(n.code,{children:"#let s = (s.methods.enable-transparent-cover)(self: s)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Handout mode:"})," enable handout mode by ",(0,i.jsx)(n.code,{children:"#let s = (s.methods.enable-handout-mode)(self: s)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Fit-to-width and fit-to-height:"})," Fit-to-width for title in header and fit-to-height for image.","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"utils.fit-to-width(grow: true, shrink: true, width, body)"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"utils.fit-to-height(width: none, prescale-width: none, grow: true, shrink: true, height, body)"})}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Slides counter:"})," ",(0,i.jsx)(n.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'})," and ",(0,i.jsx)(n.code,{children:"states.touying-progress(ratio => ..)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Appendix:"})," Freeze the ",(0,i.jsx)(n.code,{children:"last-slide-number"})," to prevent the slide number from increasing further."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Sections:"})," Touying's built-in section support can be used to display the current section title and show progress.","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"section"})," and ",(0,i.jsx)(n.code,{children:"subsection"})," parameter in ",(0,i.jsx)(n.code,{children:"#slide"})," to register a new section or subsection."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"states.current-section-title"})," to get the current section."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"states.touying-outline"})," or ",(0,i.jsx)(n.code,{children:"s.methods.touying-outline"})," to display a outline of sections."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"states.touying-final-sections(sections => ..)"})," for custom outline display."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"states.touying-progress-with-sections((current-sections: .., final-sections: .., current-slide-number: .., last-slide-number: ..) => ..)"})," for powerful progress display."]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Navigation bar"}),": Navigation bar like ",(0,i.jsx)(n.a,{href:"https://github.com/zbowang/BeamerTheme",children:"here"})," by ",(0,i.jsx)(n.code,{children:"states.touying-progress-with-sections(..)"}),", in ",(0,i.jsx)(n.code,{children:"dewdrop"})," theme."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Pdfpc:"})," pdfpc support and export ",(0,i.jsx)(n.code,{children:".pdfpc"})," file without external tool by ",(0,i.jsx)(n.code,{children:"typst query"})," command simply."]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>d,a:()=>t});var i=s(7294);const r={},l=i.createContext(r);function t(e){const n=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:t(e.components),i.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/ab32da60.7b00de2b.js b/assets/js/ab32da60.0d59cd78.js similarity index 76% rename from assets/js/ab32da60.7b00de2b.js rename to assets/js/ab32da60.0d59cd78.js index 81cf779c1..2b37e237a 100644 --- a/assets/js/ab32da60.7b00de2b.js +++ b/assets/js/ab32da60.0d59cd78.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7190],{7022:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=t(5893),i=t(1151);const o={sidebar_position:3},l="Sections and Subsections",c={id:"sections",title:"Sections and Subsections",description:"Structure",source:"@site/docs/sections.md",sourceDirName:".",slug:"/sections",permalink:"/touying/docs/next/sections",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/sections.md",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Getting Started",permalink:"/touying/docs/next/start"},next:{title:"Code Style",permalink:"/touying/docs/next/code-styles"}},r={},d=[{value:"Structure",id:"structure",level:2},{value:"Numbering",id:"numbering",level:2},{value:"Table of Contents",id:"table-of-contents",level:2}];function a(e){const n={code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"sections-and-subsections",children:"Sections and Subsections"}),"\n",(0,s.jsx)(n.h2,{id:"structure",children:"Structure"}),"\n",(0,s.jsx)(n.p,{children:"Similar to Beamer, Touying also has the concept of sections and subsections."}),"\n",(0,s.jsx)(n.p,{children:"Generally, level 1, level 2, and level 3 headings correspond to section, subsection, and title, respectively, as in the dewdrop theme."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.dewdrop.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Section\n\n== Subsection\n\n=== Title\n\nHello, Touying!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/1574e74d-25c1-418f-a84f-b974f42edae5",alt:"image"})}),"\n",(0,s.jsx)(n.p,{children:"However, often we don't need subsections, and we can use level 1 and level 2 headings to correspond to section and title, as in the university theme."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.university.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Section\n\n== Title\n\nHello, Touying!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9dd77c98-9c08-4811-872e-092bbdebf394",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["In fact, we can control this behavior through the ",(0,s.jsx)(n.code,{children:"slide-level"})," parameter of the ",(0,s.jsx)(n.code,{children:"slides"})," function. ",(0,s.jsx)(n.code,{children:"slide-level"})," represents the complexity of the nested structure, starting from 0. For example, ",(0,s.jsx)(n.code,{children:"#show: slides.with(slide-level: 2)"})," is equivalent to the section, subsection, and title structure; while ",(0,s.jsx)(n.code,{children:"#show: slides.with(slide-level: 1)"})," is equivalent to the section and title structure."]}),"\n",(0,s.jsx)(n.h2,{id:"numbering",children:"Numbering"}),"\n",(0,s.jsx)(n.p,{children:"To add numbering to sections and subsections, we simply use:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")\n'})}),"\n",(0,s.jsxs)(n.p,{children:["This sets the default numbering to ",(0,s.jsx)(n.code,{children:"1.1"}),", with the section corresponding to ",(0,s.jsx)(n.code,{children:"1."}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"table-of-contents",children:"Table of Contents"}),"\n",(0,s.jsx)(n.p,{children:"Displaying a table of contents in Touying is straightforward:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register()\n#let (init, slides, alert, touying-outline) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides.with(slide-level: 2)\n\n= Section\n\n== Subsection\n\n=== Title\n\n==== Table of contents\n\n#touying-outline()\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/3cc09550-d3cc-40c2-a315-22ca8173798f",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["Where the definition of ",(0,s.jsx)(n.code,{children:"touying-outline()"})," is:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#let touying-outline(enum-args: (:), padding: 0pt) = { .. }\n"})}),"\n",(0,s.jsxs)(n.p,{children:["You can modify the parameters of the internal enum through ",(0,s.jsx)(n.code,{children:"enum-args"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"If you have complex custom requirements for the table of contents, you can use:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#states.touying-final-sections(sections => ..)\n"})}),"\n",(0,s.jsx)(n.p,{children:"As done in the dewdrop theme."})]})}function u(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>l});var s=t(7294);const i={},o=s.createContext(i);function l(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7190],{7022:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=t(5893),i=t(1151);const o={sidebar_position:3},l="Sections and Subsections",c={id:"sections",title:"Sections and Subsections",description:"Structure",source:"@site/docs/sections.md",sourceDirName:".",slug:"/sections",permalink:"/touying/docs/next/sections",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/sections.md",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Getting Started",permalink:"/touying/docs/next/start"},next:{title:"Code Style",permalink:"/touying/docs/next/code-styles"}},r={},d=[{value:"Structure",id:"structure",level:2},{value:"Numbering",id:"numbering",level:2},{value:"Table of Contents",id:"table-of-contents",level:2}];function a(e){const n={code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"sections-and-subsections",children:"Sections and Subsections"}),"\n",(0,s.jsx)(n.h2,{id:"structure",children:"Structure"}),"\n",(0,s.jsx)(n.p,{children:"Similar to Beamer, Touying also has the concept of sections and subsections."}),"\n",(0,s.jsx)(n.p,{children:"Generally, level 1, level 2, and level 3 headings correspond to section, subsection, and title, respectively, as in the dewdrop theme."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.dewdrop.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Section\n\n== Subsection\n\n=== Title\n\nHello, Touying!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/1574e74d-25c1-418f-a84f-b974f42edae5",alt:"image"})}),"\n",(0,s.jsx)(n.p,{children:"However, often we don't need subsections, and we can use level 1 and level 2 headings to correspond to section and title, as in the university theme."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.university.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Section\n\n== Title\n\nHello, Touying!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9dd77c98-9c08-4811-872e-092bbdebf394",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["In fact, we can control this behavior through the ",(0,s.jsx)(n.code,{children:"slide-level"})," parameter of the ",(0,s.jsx)(n.code,{children:"slides"})," function. ",(0,s.jsx)(n.code,{children:"slide-level"})," represents the complexity of the nested structure, starting from 0. For example, ",(0,s.jsx)(n.code,{children:"#show: slides.with(slide-level: 2)"})," is equivalent to the section, subsection, and title structure; while ",(0,s.jsx)(n.code,{children:"#show: slides.with(slide-level: 1)"})," is equivalent to the section and title structure."]}),"\n",(0,s.jsx)(n.h2,{id:"numbering",children:"Numbering"}),"\n",(0,s.jsx)(n.p,{children:"To add numbering to sections and subsections, we simply use:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")\n'})}),"\n",(0,s.jsxs)(n.p,{children:["This sets the default numbering to ",(0,s.jsx)(n.code,{children:"1.1"}),", with the section corresponding to ",(0,s.jsx)(n.code,{children:"1."}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"table-of-contents",children:"Table of Contents"}),"\n",(0,s.jsx)(n.p,{children:"Displaying a table of contents in Touying is straightforward:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.simple.register()\n#let (init, slides, alert, touying-outline) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides.with(slide-level: 2)\n\n= Section\n\n== Subsection\n\n=== Title\n\n==== Table of contents\n\n#touying-outline()\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/3cc09550-d3cc-40c2-a315-22ca8173798f",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["Where the definition of ",(0,s.jsx)(n.code,{children:"touying-outline()"})," is:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#let touying-outline(enum-args: (:), padding: 0pt) = { .. }\n"})}),"\n",(0,s.jsxs)(n.p,{children:["You can modify the parameters of the internal enum through ",(0,s.jsx)(n.code,{children:"enum-args"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"Of course, you can also use Typst's native outline:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#outline(title: none, indent: 2em)\n"})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/7b62fcaf-6342-4dba-901b-818c16682529",alt:"image"})}),"\n",(0,s.jsx)(n.p,{children:"If you have complex custom requirements for the table of contents, you can use:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#states.touying-final-sections(sections => ..)\n"})}),"\n",(0,s.jsx)(n.p,{children:"As done in the dewdrop theme."})]})}function u(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>l});var s=t(7294);const i={},o=s.createContext(i);function l(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/acb203b2.9b8ee25a.js b/assets/js/acb203b2.9b8ee25a.js new file mode 100644 index 000000000..6d2912d12 --- /dev/null +++ b/assets/js/acb203b2.9b8ee25a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1956],{4955:(e,t,i)=>{i.r(t),i.d(t,{assets:()=>r,contentTitle:()=>d,default:()=>a,frontMatter:()=>o,metadata:()=>h,toc:()=>c});var n=i(5893),s=i(1151);const o={sidebar_position:2},d="Fit to Height / Width",h={id:"utilities/fit-to",title:"Fit to Height / Width",description:"Thanks to ntjess for the code.",source:"@site/versioned_docs/version-0.4.1/utilities/fit-to.md",sourceDirName:"utilities",slug:"/utilities/fit-to",permalink:"/touying/docs/0.4.1/utilities/fit-to",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/utilities/fit-to.md",tags:[],version:"0.4.1",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Object-Oriented Programming",permalink:"/touying/docs/0.4.1/utilities/oop"},next:{title:"Changelog",permalink:"/touying/docs/0.4.1/changelog"}},r={},c=[{value:"Fit to Height",id:"fit-to-height",level:2},{value:"Fit to Width",id:"fit-to-width",level:2}];function l(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"fit-to-height--width",children:"Fit to Height / Width"}),"\n",(0,n.jsxs)(t.p,{children:["Thanks to ",(0,n.jsx)(t.a,{href:"https://github.com/ntjess",children:"ntjess"})," for the code."]}),"\n",(0,n.jsx)(t.h2,{id:"fit-to-height",children:"Fit to Height"}),"\n",(0,n.jsxs)(t.p,{children:["If you need to make an image fill the remaining slide height, you can try the ",(0,n.jsx)(t.code,{children:"fit-to-height"})," function:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:"#utils.fit-to-height(1fr)[BIG]\n"})}),"\n",(0,n.jsx)(t.p,{children:"Function definition:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:"#let fit-to-height(\n width: none, prescale-width: none, grow: true, shrink: true, height, body\n) = { .. }\n"})}),"\n",(0,n.jsx)(t.p,{children:"Parameters:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"width"}),": If specified, this will determine the width of the content after scaling. So, if you want the scaled content to fill half of the slide width, you can use ",(0,n.jsx)(t.code,{children:"width: 50%"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"prescale-width"}),": This parameter allows you to make Typst's layout assume that the given content is to be laid out in a container of a certain width before scaling. For example, you can use ",(0,n.jsx)(t.code,{children:"prescale-width: 200%"})," assuming the slide's width is twice the original."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"grow"}),": Whether it can grow, default is ",(0,n.jsx)(t.code,{children:"true"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"shrink"}),": Whether it can shrink, default is ",(0,n.jsx)(t.code,{children:"true"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"height"}),": The specified height."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"body"}),": The specific content."]}),"\n"]}),"\n",(0,n.jsx)(t.h2,{id:"fit-to-width",children:"Fit to Width"}),"\n",(0,n.jsxs)(t.p,{children:["If you need to limit the title width to exactly fill the slide width, you can try the ",(0,n.jsx)(t.code,{children:"fit-to-width"})," function:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:"#utils.fit-to-width(1fr)[#lorem(20)]\n"})}),"\n",(0,n.jsx)(t.p,{children:"Function definition:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-typst",children:"#let fit-to-width(grow: true, shrink: true, width, body) = { .. }\n"})}),"\n",(0,n.jsx)(t.p,{children:"Parameters:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"grow"}),": Whether it can grow, default is ",(0,n.jsx)(t.code,{children:"true"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"shrink"}),": Whether it can shrink, default is ",(0,n.jsx)(t.code,{children:"true"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"width"}),": The specified width."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"body"}),": The specific content."]}),"\n"]})]})}function a(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}},1151:(e,t,i)=>{i.d(t,{Z:()=>h,a:()=>d});var n=i(7294);const s={},o=n.createContext(s);function d(e){const t=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function h(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:d(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5ff4e923.b65fb2b7.js b/assets/js/ad8b99e1.82fefef9.js similarity index 94% rename from assets/js/5ff4e923.b65fb2b7.js rename to assets/js/ad8b99e1.82fefef9.js index a893787f3..7b91290f6 100644 --- a/assets/js/5ff4e923.b65fb2b7.js +++ b/assets/js/ad8b99e1.82fefef9.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4372],{2588:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>d,default:()=>p,frontMatter:()=>s,metadata:()=>r,toc:()=>c});var i=t(5893),o=t(1151);const s={sidebar_position:1},d="Pdfpc",r={id:"external/pdfpc",title:"Pdfpc",description:'pdfpc is a "Presenter Console with multi-monitor support for PDF files." This means you can use it to display slides in the form of PDF pages and it comes with some known excellent features, much like PowerPoint.',source:"@site/versioned_docs/version-0.4.1/external/pdfpc.md",sourceDirName:"external",slug:"/external/pdfpc",permalink:"/touying/docs/external/pdfpc",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/external/pdfpc.md",tags:[],version:"0.4.1",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"External Tools",permalink:"/touying/docs/category/external-tools"},next:{title:"Pympress",permalink:"/touying/docs/external/pympress"}},a={},c=[{value:"Adding Metadata",id:"adding-metadata",level:2},{value:"Pdfpc Configuration",id:"pdfpc-configuration",level:2},{value:"Exporting .pdfpc File",id:"exporting-pdfpc-file",level:2}];function l(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"pdfpc",children:"Pdfpc"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://pdfpc.github.io/",children:"pdfpc"}),' is a "Presenter Console with multi-monitor support for PDF files." This means you can use it to display slides in the form of PDF pages and it comes with some known excellent features, much like PowerPoint.']}),"\n",(0,i.jsxs)(n.p,{children:["pdfpc has a JSON-formatted ",(0,i.jsx)(n.code,{children:".pdfpc"})," file that can provide additional information for PDF slides. While you can manually write this file, you can also manage it through Touying."]}),"\n",(0,i.jsx)(n.h2,{id:"adding-metadata",children:"Adding Metadata"}),"\n",(0,i.jsxs)(n.p,{children:["Touying remains consistent with ",(0,i.jsx)(n.a,{href:"https://polylux.dev/book/external/pdfpc.html",children:"Polylux"})," to avoid conflicts between APIs."]}),"\n",(0,i.jsxs)(n.p,{children:["For example, you can add notes using ",(0,i.jsx)(n.code,{children:'#pdfpc.speaker-note("This is a note that only the speaker will see.")'}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"pdfpc-configuration",children:"Pdfpc Configuration"}),"\n",(0,i.jsx)(n.p,{children:"To add pdfpc configurations, you can use"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.append-preamble)(self: s, pdfpc.config(\n duration-minutes: 30,\n start-time: datetime(hour: 14, minute: 10, second: 0),\n end-time: datetime(hour: 14, minute: 40, second: 0),\n last-minutes: 5,\n note-font-size: 12,\n disable-markdown: false,\n default-transition: (\n type: "push",\n duration-seconds: 2,\n angle: ltr,\n alignment: "vertical",\n direction: "inward",\n ),\n))\n'})}),"\n",(0,i.jsxs)(n.p,{children:["Add the corresponding configurations. Refer to ",(0,i.jsx)(n.a,{href:"https://polylux.dev/book/external/pdfpc.html",children:"Polylux"})," for specific configuration details."]}),"\n",(0,i.jsx)(n.h2,{id:"exporting-pdfpc-file",children:"Exporting .pdfpc File"}),"\n",(0,i.jsxs)(n.p,{children:["Assuming your document is ",(0,i.jsx)(n.code,{children:"./example.typ"}),", you can export the ",(0,i.jsx)(n.code,{children:".pdfpc"})," file directly using:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-sh",children:'typst query --root . ./example.typ --field value --one "" > ./example.pdfpc\n'})}),"\n",(0,i.jsx)(n.p,{children:"With the compatibility of Touying and Polylux, you can make Polylux also support direct export by adding the following code:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1"\n\n#locate(loc => touying.pdfpc.pdfpc-file(loc))\n'})})]})}function p(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>d});var i=t(7294);const o={},s=i.createContext(o);function d(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:d(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[5644],{9193:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>d,default:()=>p,frontMatter:()=>s,metadata:()=>r,toc:()=>c});var i=t(5893),o=t(1151);const s={sidebar_position:1},d="Pdfpc",r={id:"external/pdfpc",title:"Pdfpc",description:'pdfpc is a "Presenter Console with multi-monitor support for PDF files." This means you can use it to display slides in the form of PDF pages and it comes with some known excellent features, much like PowerPoint.',source:"@site/versioned_docs/version-0.4.2/external/pdfpc.md",sourceDirName:"external",slug:"/external/pdfpc",permalink:"/touying/docs/external/pdfpc",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/external/pdfpc.md",tags:[],version:"0.4.2",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"External Tools",permalink:"/touying/docs/category/external-tools"},next:{title:"Pympress",permalink:"/touying/docs/external/pympress"}},a={},c=[{value:"Adding Metadata",id:"adding-metadata",level:2},{value:"Pdfpc Configuration",id:"pdfpc-configuration",level:2},{value:"Exporting .pdfpc File",id:"exporting-pdfpc-file",level:2}];function l(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"pdfpc",children:"Pdfpc"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://pdfpc.github.io/",children:"pdfpc"}),' is a "Presenter Console with multi-monitor support for PDF files." This means you can use it to display slides in the form of PDF pages and it comes with some known excellent features, much like PowerPoint.']}),"\n",(0,i.jsxs)(n.p,{children:["pdfpc has a JSON-formatted ",(0,i.jsx)(n.code,{children:".pdfpc"})," file that can provide additional information for PDF slides. While you can manually write this file, you can also manage it through Touying."]}),"\n",(0,i.jsx)(n.h2,{id:"adding-metadata",children:"Adding Metadata"}),"\n",(0,i.jsxs)(n.p,{children:["Touying remains consistent with ",(0,i.jsx)(n.a,{href:"https://polylux.dev/book/external/pdfpc.html",children:"Polylux"})," to avoid conflicts between APIs."]}),"\n",(0,i.jsxs)(n.p,{children:["For example, you can add notes using ",(0,i.jsx)(n.code,{children:'#pdfpc.speaker-note("This is a note that only the speaker will see.")'}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"pdfpc-configuration",children:"Pdfpc Configuration"}),"\n",(0,i.jsx)(n.p,{children:"To add pdfpc configurations, you can use"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.append-preamble)(self: s, pdfpc.config(\n duration-minutes: 30,\n start-time: datetime(hour: 14, minute: 10, second: 0),\n end-time: datetime(hour: 14, minute: 40, second: 0),\n last-minutes: 5,\n note-font-size: 12,\n disable-markdown: false,\n default-transition: (\n type: "push",\n duration-seconds: 2,\n angle: ltr,\n alignment: "vertical",\n direction: "inward",\n ),\n))\n'})}),"\n",(0,i.jsxs)(n.p,{children:["Add the corresponding configurations. Refer to ",(0,i.jsx)(n.a,{href:"https://polylux.dev/book/external/pdfpc.html",children:"Polylux"})," for specific configuration details."]}),"\n",(0,i.jsx)(n.h2,{id:"exporting-pdfpc-file",children:"Exporting .pdfpc File"}),"\n",(0,i.jsxs)(n.p,{children:["Assuming your document is ",(0,i.jsx)(n.code,{children:"./example.typ"}),", you can export the ",(0,i.jsx)(n.code,{children:".pdfpc"})," file directly using:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-sh",children:'typst query --root . ./example.typ --field value --one "" > ./example.pdfpc\n'})}),"\n",(0,i.jsx)(n.p,{children:"With the compatibility of Touying and Polylux, you can make Polylux also support direct export by adding the following code:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2"\n\n#locate(loc => touying.pdfpc.pdfpc-file(loc))\n'})})]})}function p(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>d});var i=t(7294);const o={},s=i.createContext(o);function d(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:d(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/af23d200.c4422072.js b/assets/js/af23d200.c4422072.js deleted file mode 100644 index 946aff1cc..000000000 --- a/assets/js/af23d200.c4422072.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3539],{9153:(e,n,o)=>{o.r(n),o.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>c,frontMatter:()=>s,metadata:()=>a,toc:()=>d});var i=o(5893),t=o(1151);const s={sidebar_position:1},r="Introduction to Touying",a={id:"intro",title:"Introduction to Touying",description:'Touying is a slide/presentation package developed for Typst. Touying is similar to LaTeX Beamer but benefits from Typst, providing faster rendering speed and a more concise syntax. After, we use "slides" to refer to slideshows, "slide" for a single slide, and "subslide" for a sub-slide.',source:"@site/versioned_docs/version-0.4.1/intro.md",sourceDirName:".",slug:"/intro",permalink:"/touying/docs/intro",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/intro.md",tags:[],version:"0.4.1",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",next:{title:"Getting Started",permalink:"/touying/docs/start"}},l={},d=[{value:"Why Use Touying",id:"why-use-touying",level:2},{value:"About the Name",id:"about-the-name",level:2},{value:"About the Documentation",id:"about-the-documentation",level:2},{value:"Contribution",id:"contribution",level:2},{value:"Gallery",id:"gallery",level:2},{value:"License",id:"license",level:2}];function u(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"introduction-to-touying",children:"Introduction to Touying"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://github.com/touying-typ/touying",children:"Touying"}),' is a slide/presentation package developed for Typst. Touying is similar to LaTeX Beamer but benefits from Typst, providing faster rendering speed and a more concise syntax. After, we use "slides" to refer to slideshows, "slide" for a single slide, and "subslide" for a sub-slide.']}),"\n",(0,i.jsx)(n.h2,{id:"why-use-touying",children:"Why Use Touying"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:'Unlike PowerPoint, Touying is not a "what you see is what you get" tool. You can write your slides in a "content and style separation" manner, especially with Typst, which offers a concise yet powerful syntax, better supporting content like code blocks, mathematical formulas, and theorems. Another advantage is that, with templates, writing slides with Touying is much faster than PowerPoint. Therefore, Touying is more suitable for users with a demand for "research writing."'}),"\n",(0,i.jsxs)(n.li,{children:["Compared to Markdown Slides, Touying, relying on Typst, has more powerful typesetting control, such as headers, footers, layout, and convenient custom functions. These are capabilities that Markdown struggles to provide, or does not do well. Additionally, Touying offers ",(0,i.jsx)(n.code,{children:"#pause"})," and ",(0,i.jsx)(n.code,{children:"#meanwhile"})," markers, providing more convenient dynamic slide capabilities."]}),"\n",(0,i.jsx)(n.li,{children:"Compared to Beamer, Touying has faster compilation speed, a more concise syntax, and simpler theme customization capabilities. Touying's compilation speed can be maintained in milliseconds or tens of milliseconds, compared to Beamer's compilation time of seconds or tens of seconds. Touying's syntax is more concise than Beamer, making it easier to change templates and create your own templates. In terms of features, Touying supports most of Beamer's capabilities and provides some convenient features that Beamer lacks."}),"\n",(0,i.jsxs)(n.li,{children:['Compared to Polylux, Touying provides an object-oriented programming (OOP) style syntax, allowing the simulation of "global variables" through a global singleton. This makes it easy to write themes. Touying does not rely on ',(0,i.jsx)(n.code,{children:"counter"})," and ",(0,i.jsx)(n.code,{children:"locate"})," to implement ",(0,i.jsx)(n.code,{children:"#pause"}),", resulting in better performance. Touying is a community-driven project (we welcome more people to join), and it does not overly emphasize maintaining API consistency. Instead, it chooses to maintain documentation for multiple versions, providing more novel yet powerful features."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"about-the-name",children:"About the Name"}),"\n",(0,i.jsx)(n.p,{children:'"Touying" is derived from the Chinese word "\u6295\u5f71" (t\xf3uy\u01d0ng), which means "projection" In English, it also conveys the meaning of a "project". In comparison, the term "beamer" in LaTeX means a projector in German.'}),"\n",(0,i.jsx)(n.h2,{id:"about-the-documentation",children:"About the Documentation"}),"\n",(0,i.jsxs)(n.p,{children:["This documentation is powered by ",(0,i.jsx)(n.a,{href:"https://docusaurus.io/",children:"Docusaurus"}),". We will maintain English and Chinese versions of the documentation for Touying, and for each major version, we will maintain a documentation copy. This allows you to easily refer to old versions of the Touying documentation and migrate to new versions."]}),"\n",(0,i.jsx)(n.p,{children:"Docusaurus creates a new version:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-sh",children:"npm run docusaurus docs:version 0.y.x\n"})}),"\n",(0,i.jsx)(n.h2,{id:"contribution",children:"Contribution"}),"\n",(0,i.jsxs)(n.p,{children:["Touying is free, open-source, and community-driven. If you're interested, you can visit ",(0,i.jsx)(n.a,{href:"https://github.com/touying-typ/touying",children:"GitHub"})," anytime and raise issues or submit pull requests. We also welcome you to join the ",(0,i.jsx)(n.a,{href:"https://github.com/touying-typ",children:"touying-typ"})," organization."]}),"\n",(0,i.jsx)(n.h2,{id:"gallery",children:"Gallery"}),"\n",(0,i.jsxs)(n.p,{children:["Touying offers ",(0,i.jsx)(n.a,{href:"https://github.com/touying-typ/touying/wiki",children:"a gallery page"})," via wiki, where you can browse elegant slides created by Touying users. You're also encouraged to contribute your own beautiful slides here!"]}),"\n",(0,i.jsx)(n.h2,{id:"license",children:"License"}),"\n",(0,i.jsxs)(n.p,{children:["Touying is released under the ",(0,i.jsx)(n.a,{href:"https://github.com/touying-typ/touying/blob/main/LICENSE",children:"MIT license"}),"."]})]})}function c(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}},1151:(e,n,o)=>{o.d(n,{Z:()=>a,a:()=>r});var i=o(7294);const t={},s=i.createContext(t);function r(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/af23d200.f1aca5bb.js b/assets/js/af23d200.f1aca5bb.js new file mode 100644 index 000000000..9fcf1462a --- /dev/null +++ b/assets/js/af23d200.f1aca5bb.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3539],{9153:(e,n,o)=>{o.r(n),o.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>c,frontMatter:()=>s,metadata:()=>a,toc:()=>d});var i=o(5893),t=o(1151);const s={sidebar_position:1},r="Introduction to Touying",a={id:"intro",title:"Introduction to Touying",description:'Touying is a slide/presentation package developed for Typst. Touying is similar to LaTeX Beamer but benefits from Typst, providing faster rendering speed and a more concise syntax. After, we use "slides" to refer to slideshows, "slide" for a single slide, and "subslide" for a sub-slide.',source:"@site/versioned_docs/version-0.4.1/intro.md",sourceDirName:".",slug:"/intro",permalink:"/touying/docs/0.4.1/intro",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/intro.md",tags:[],version:"0.4.1",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",next:{title:"Getting Started",permalink:"/touying/docs/0.4.1/start"}},l={},d=[{value:"Why Use Touying",id:"why-use-touying",level:2},{value:"About the Name",id:"about-the-name",level:2},{value:"About the Documentation",id:"about-the-documentation",level:2},{value:"Contribution",id:"contribution",level:2},{value:"Gallery",id:"gallery",level:2},{value:"License",id:"license",level:2}];function u(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"introduction-to-touying",children:"Introduction to Touying"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://github.com/touying-typ/touying",children:"Touying"}),' is a slide/presentation package developed for Typst. Touying is similar to LaTeX Beamer but benefits from Typst, providing faster rendering speed and a more concise syntax. After, we use "slides" to refer to slideshows, "slide" for a single slide, and "subslide" for a sub-slide.']}),"\n",(0,i.jsx)(n.h2,{id:"why-use-touying",children:"Why Use Touying"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:'Unlike PowerPoint, Touying is not a "what you see is what you get" tool. You can write your slides in a "content and style separation" manner, especially with Typst, which offers a concise yet powerful syntax, better supporting content like code blocks, mathematical formulas, and theorems. Another advantage is that, with templates, writing slides with Touying is much faster than PowerPoint. Therefore, Touying is more suitable for users with a demand for "research writing."'}),"\n",(0,i.jsxs)(n.li,{children:["Compared to Markdown Slides, Touying, relying on Typst, has more powerful typesetting control, such as headers, footers, layout, and convenient custom functions. These are capabilities that Markdown struggles to provide, or does not do well. Additionally, Touying offers ",(0,i.jsx)(n.code,{children:"#pause"})," and ",(0,i.jsx)(n.code,{children:"#meanwhile"})," markers, providing more convenient dynamic slide capabilities."]}),"\n",(0,i.jsx)(n.li,{children:"Compared to Beamer, Touying has faster compilation speed, a more concise syntax, and simpler theme customization capabilities. Touying's compilation speed can be maintained in milliseconds or tens of milliseconds, compared to Beamer's compilation time of seconds or tens of seconds. Touying's syntax is more concise than Beamer, making it easier to change templates and create your own templates. In terms of features, Touying supports most of Beamer's capabilities and provides some convenient features that Beamer lacks."}),"\n",(0,i.jsxs)(n.li,{children:['Compared to Polylux, Touying provides an object-oriented programming (OOP) style syntax, allowing the simulation of "global variables" through a global singleton. This makes it easy to write themes. Touying does not rely on ',(0,i.jsx)(n.code,{children:"counter"})," and ",(0,i.jsx)(n.code,{children:"locate"})," to implement ",(0,i.jsx)(n.code,{children:"#pause"}),", resulting in better performance. Touying is a community-driven project (we welcome more people to join), and it does not overly emphasize maintaining API consistency. Instead, it chooses to maintain documentation for multiple versions, providing more novel yet powerful features."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"about-the-name",children:"About the Name"}),"\n",(0,i.jsx)(n.p,{children:'"Touying" is derived from the Chinese word "\u6295\u5f71" (t\xf3uy\u01d0ng), which means "projection" In English, it also conveys the meaning of a "project". In comparison, the term "beamer" in LaTeX means a projector in German.'}),"\n",(0,i.jsx)(n.h2,{id:"about-the-documentation",children:"About the Documentation"}),"\n",(0,i.jsxs)(n.p,{children:["This documentation is powered by ",(0,i.jsx)(n.a,{href:"https://docusaurus.io/",children:"Docusaurus"}),". We will maintain English and Chinese versions of the documentation for Touying, and for each major version, we will maintain a documentation copy. This allows you to easily refer to old versions of the Touying documentation and migrate to new versions."]}),"\n",(0,i.jsx)(n.p,{children:"Docusaurus creates a new version:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-sh",children:"npm run docusaurus docs:version 0.y.x\n"})}),"\n",(0,i.jsx)(n.h2,{id:"contribution",children:"Contribution"}),"\n",(0,i.jsxs)(n.p,{children:["Touying is free, open-source, and community-driven. If you're interested, you can visit ",(0,i.jsx)(n.a,{href:"https://github.com/touying-typ/touying",children:"GitHub"})," anytime and raise issues or submit pull requests. We also welcome you to join the ",(0,i.jsx)(n.a,{href:"https://github.com/touying-typ",children:"touying-typ"})," organization."]}),"\n",(0,i.jsx)(n.h2,{id:"gallery",children:"Gallery"}),"\n",(0,i.jsxs)(n.p,{children:["Touying offers ",(0,i.jsx)(n.a,{href:"https://github.com/touying-typ/touying/wiki",children:"a gallery page"})," via wiki, where you can browse elegant slides created by Touying users. You're also encouraged to contribute your own beautiful slides here!"]}),"\n",(0,i.jsx)(n.h2,{id:"license",children:"License"}),"\n",(0,i.jsxs)(n.p,{children:["Touying is released under the ",(0,i.jsx)(n.a,{href:"https://github.com/touying-typ/touying/blob/main/LICENSE",children:"MIT license"}),"."]})]})}function c(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}},1151:(e,n,o)=>{o.d(n,{Z:()=>a,a:()=>r});var i=o(7294);const t={},s=i.createContext(t);function r(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/b0b113fa.00630beb.js b/assets/js/b0b113fa.00630beb.js new file mode 100644 index 000000000..c765d9a99 --- /dev/null +++ b/assets/js/b0b113fa.00630beb.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6138],{887:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>s,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>l});var i=t(5893),o=t(1151);const a={sidebar_position:5},s="Page Layout",r={id:"layout",title:"Page Layout",description:"Basic Concepts",source:"@site/versioned_docs/version-0.4.2/layout.md",sourceDirName:".",slug:"/layout",permalink:"/touying/docs/layout",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/layout.md",tags:[],version:"0.4.2",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Code Style",permalink:"/touying/docs/code-styles"},next:{title:"Global Settings",permalink:"/touying/docs/global-settings"}},d={},l=[{value:"Basic Concepts",id:"basic-concepts",level:2},{value:"Page Management",id:"page-management",level:2},{value:"Application: Adding a Logo",id:"application-adding-a-logo",level:2},{value:"Page Columns",id:"page-columns",level:2}];function c(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"page-layout",children:"Page Layout"}),"\n",(0,i.jsx)(n.h2,{id:"basic-concepts",children:"Basic Concepts"}),"\n",(0,i.jsx)(n.p,{children:"To create stylish slides using Typst, it's essential to understand Typst's page model correctly. If you're not concerned with customizing page styles, you can choose to skip this section. However, it's still recommended to go through it."}),"\n",(0,i.jsx)(n.p,{children:"Let's illustrate Typst's default page model through a specific example."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#let container = rect.with(height: 100%, width: 100%, inset: 0pt)\n#let innerbox = rect.with(stroke: (dash: "dashed"))\n\n#set text(size: 30pt)\n#set page(\n paper: "presentation-16-9",\n header: container[#innerbox[Header]],\n header-ascent: 30%,\n footer: container[#innerbox[Footer]],\n footer-descent: 30%,\n)\n\n#place(top + right)[Margin\u2192]\n#container[\n #container[\n #innerbox[Content]\n ]\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/70d48053-c777-4253-a9ca-ada360b5a987",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:"We need to distinguish the following concepts:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Model:"})," Typst has a model similar to the CSS Box Model, divided into Margin, Padding, and Content. However, padding is not a property of ",(0,i.jsx)(n.code,{children:"set page(..)"})," but is obtained by manually adding ",(0,i.jsx)(n.code,{children:"#pad(..)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Margin:"})," Margins are the edges of the page, divided into top, bottom, left, and right. They are the core of Typst's page model, and all other properties are influenced by margins, especially Header and Footer. Header and Footer are actually located within the Margin."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Header:"})," The Header is the content at the top of the page, divided into container and innerbox. We can observe that the edge of the header container and padding does not align but has some space in between, which is actually ",(0,i.jsx)(n.code,{children:"header-ascent: 30%"}),", where the percentage is relative to the margin-top. Additionally, we notice that the header innerbox is actually located at the bottom left corner of the header container, meaning innerbox defaults to ",(0,i.jsx)(n.code,{children:"#set align(left + bottom)"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Footer:"})," The Footer is the content at the bottom of the page, similar to the Header but in the opposite direction."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Place:"})," The ",(0,i.jsx)(n.code,{children:"place"})," function enables absolute positioning relative to the parent container without affecting other elements inside the parent container. It allows specifying ",(0,i.jsx)(n.code,{children:"alignment"}),", ",(0,i.jsx)(n.code,{children:"dx"}),", and ",(0,i.jsx)(n.code,{children:"dy"}),", making it suitable for placing decorative elements like logos."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Therefore, to apply Typst to create slides, we only need to set:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#set page(\n margin: (x: 4em, y: 2em),\n header: align(top)[Header],\n footer: align(bottom)[Footer],\n header-ascent: 0em,\n footer-descent: 0em,\n)\n"})}),"\n",(0,i.jsx)(n.p,{children:"However, we still need to address how the header occupies the entire page width. Here, we use negative padding to achieve this. For instance:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#let container = rect.with(stroke: (dash: "dashed"), height: 100%, width: 100%, inset: 0pt)\n#let innerbox = rect.with(fill: rgb("#d0d0d0"))\n#let margin = (x: 4em, y: 2em)\n\n// negative padding for header and footer\n#let negative-padding = pad.with(x: -margin.x, y: 0em)\n\n#set text(size: 30pt)\n#set page(\n paper: "presentation-16-9",\n margin: margin,\n header: negative-padding[#container[#align(top)[#innerbox(width: 100%)[Header]]]],\n header-ascent: 0em,\n footer: negative-padding[#container[#align(bottom)[#innerbox(width: 100%)[Footer]]]],\n footer-descent: 0em,\n)\n\n#place(top + right)[\u2191Margin\u2192]\n#container[\n #container[\n #innerbox[Content]\n ]\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/d74896f4-90e7-4b36-a5a9-9c44307eb192",alt:"image"})}),"\n",(0,i.jsx)(n.h2,{id:"page-management",children:"Page Management"}),"\n",(0,i.jsxs)(n.p,{children:["Since modifying page parameters using the ",(0,i.jsx)(n.code,{children:"set page(..)"})," command in Typst creates a new page instead of modifying the current one, Touying chooses to maintain a ",(0,i.jsx)(n.code,{children:"s.page-args"})," member variable and a ",(0,i.jsx)(n.code,{children:"s.padding"})," member variable. These parameters are only applied when Touying creates a new slide, so users only need to focus on ",(0,i.jsx)(n.code,{children:"s.page-args"})," and ",(0,i.jsx)(n.code,{children:"s.padding"}),"."]}),"\n",(0,i.jsx)(n.p,{children:"For example, the previous example can be modified as follows:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#(s.page-args += (\n margin: (x: 4em, y: 2em),\n header: align(top)[Header],\n footer: align(bottom)[Footer],\n header-ascent: 0em,\n footer-descent: 0em,\n))\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Touying automatically detects the value of ",(0,i.jsx)(n.code,{children:"margin.x"})," and adds negative padding to the header if ",(0,i.jsx)(n.code,{children:"self.full-header == true"}),"."]}),"\n",(0,i.jsx)(n.p,{children:"Similarly, if you're unsatisfied with the header or footer style of a particular theme, you can change it using:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#(s.page-args.footer = [Custom Footer])\n"})}),"\n",(0,i.jsxs)(n.p,{children:["However, it's essential to note that if you change page parameters in this way, you need to place it before ",(0,i.jsx)(n.code,{children:"#let (slide, empty-slide) = utils.slides(s)"}),", or you'll have to call ",(0,i.jsx)(n.code,{children:"#let (slide, empty-slide) = utils.slides(s)"})," again."]}),"\n",(0,i.jsx)(n.admonition,{title:"Warning",type:"warning",children:(0,i.jsxs)(n.p,{children:["Therefore, you should not use the ",(0,i.jsx)(n.code,{children:"set page(..)"})," command directly but instead modify the ",(0,i.jsx)(n.code,{children:"s.page-args"})," member variable internally."]})}),"\n",(0,i.jsxs)(n.p,{children:["This approach also allows us to query the current page parameters in real-time using ",(0,i.jsx)(n.code,{children:"s.page-args"}),", which is useful for functions that need to obtain margins or the current page's background color, such as ",(0,i.jsx)(n.code,{children:"transparent-cover"}),". This is partially equivalent to context get rule and is actually more convenient to use."]}),"\n",(0,i.jsx)(n.h2,{id:"application-adding-a-logo",children:"Application: Adding a Logo"}),"\n",(0,i.jsxs)(n.p,{children:["Adding a logo to slides is a very common but also a very versatile requirement. The difficulty lies in the fact that the required size and position of the logo often vary from person to person. Therefore, most of Touying's themes do not include configuration options for logos. But with the concepts of page layout mentioned in this section, we know that we can use the ",(0,i.jsx)(n.code,{children:"place"})," function in the header or footer to place a logo image."]}),"\n",(0,i.jsx)(n.p,{children:"For example, suppose we decide to add the GitHub icon to the metropolis theme. We can implement it like this:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n#import "@preview/octique:0.1.0": *\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9")\n#(s.page-args.header = self => {\n // display the original header\n utils.call-or-display(self, s.page-args.header)\n // place logo at the top-right\n place(top + right, dx: -0.5em, dy: 0.3em)[\n #octique("mark-github", color: rgb("#fafafa"), width: 1.5em, height: 1.5em)\n ]\n})\n#let (init, slide) = utils.methods(s)\n#show: init\n\n#slide(title: [Title])[\n Logo example.\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/055d77e7-5087-4248-b969-d8ef9d50c54b",alt:"image"})}),"\n",(0,i.jsxs)(n.p,{children:["Here, ",(0,i.jsx)(n.code,{children:"utils.call-or-display(self, body)"})," can be used to display ",(0,i.jsx)(n.code,{children:"body"})," as content or a callback function in the form ",(0,i.jsx)(n.code,{children:"self => content"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"page-columns",children:"Page Columns"}),"\n",(0,i.jsxs)(n.p,{children:["If you need to divide the page into two or three columns, you can use the ",(0,i.jsx)(n.code,{children:"compose"})," feature provided by the default ",(0,i.jsx)(n.code,{children:"slide"})," function in Touying. The simplest example is as follows:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide[\n First column.\n][\n Second column.\n]\n"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/a39f88a2-f1ba-4420-8f78-6a0fc644704e",alt:"image"})}),"\n",(0,i.jsxs)(n.p,{children:["If you need to change the way columns are composed, you can modify the ",(0,i.jsx)(n.code,{children:"composer"})," parameter of ",(0,i.jsx)(n.code,{children:"slide"}),". The default parameter is ",(0,i.jsx)(n.code,{children:"utils.side-by-side.with(columns: auto, gutter: 1em)"}),". If we want the left column to occupy the remaining width, we can use"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide(composer: (1fr, auto))[\n First column.\n][\n Second column.\n]\n"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/aa84192a-4082-495d-9773-b06df32ab8dc",alt:"image"})})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>s});var i=t(7294);const o={},a=i.createContext(o);function s(e){const n=i.useContext(a);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),i.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/b779464e.305fb1ad.js b/assets/js/b779464e.305fb1ad.js new file mode 100644 index 000000000..46972a308 --- /dev/null +++ b/assets/js/b779464e.305fb1ad.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9156],{9310:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=t(5893),i=t(1151);const o={sidebar_position:3},l="Sections and Subsections",c={id:"sections",title:"Sections and Subsections",description:"Structure",source:"@site/versioned_docs/version-0.4.1/sections.md",sourceDirName:".",slug:"/sections",permalink:"/touying/docs/0.4.1/sections",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/sections.md",tags:[],version:"0.4.1",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Getting Started",permalink:"/touying/docs/0.4.1/start"},next:{title:"Code Style",permalink:"/touying/docs/0.4.1/code-styles"}},r={},d=[{value:"Structure",id:"structure",level:2},{value:"Numbering",id:"numbering",level:2},{value:"Table of Contents",id:"table-of-contents",level:2}];function a(e){const n={code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"sections-and-subsections",children:"Sections and Subsections"}),"\n",(0,s.jsx)(n.h2,{id:"structure",children:"Structure"}),"\n",(0,s.jsx)(n.p,{children:"Similar to Beamer, Touying also has the concept of sections and subsections."}),"\n",(0,s.jsx)(n.p,{children:"Generally, level 1, level 2, and level 3 headings correspond to section, subsection, and title, respectively, as in the dewdrop theme."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.dewdrop.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Section\n\n== Subsection\n\n=== Title\n\nHello, Touying!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/1574e74d-25c1-418f-a84f-b974f42edae5",alt:"image"})}),"\n",(0,s.jsx)(n.p,{children:"However, often we don't need subsections, and we can use level 1 and level 2 headings to correspond to section and title, as in the university theme."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.university.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Section\n\n== Title\n\nHello, Touying!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9dd77c98-9c08-4811-872e-092bbdebf394",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["In fact, we can control this behavior through the ",(0,s.jsx)(n.code,{children:"slide-level"})," parameter of the ",(0,s.jsx)(n.code,{children:"slides"})," function. ",(0,s.jsx)(n.code,{children:"slide-level"})," represents the complexity of the nested structure, starting from 0. For example, ",(0,s.jsx)(n.code,{children:"#show: slides.with(slide-level: 2)"})," is equivalent to the section, subsection, and title structure; while ",(0,s.jsx)(n.code,{children:"#show: slides.with(slide-level: 1)"})," is equivalent to the section and title structure."]}),"\n",(0,s.jsx)(n.h2,{id:"numbering",children:"Numbering"}),"\n",(0,s.jsx)(n.p,{children:"To add numbering to sections and subsections, we simply use:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")\n'})}),"\n",(0,s.jsxs)(n.p,{children:["This sets the default numbering to ",(0,s.jsx)(n.code,{children:"1.1"}),", with the section corresponding to ",(0,s.jsx)(n.code,{children:"1."}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"table-of-contents",children:"Table of Contents"}),"\n",(0,s.jsx)(n.p,{children:"Displaying a table of contents in Touying is straightforward:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register()\n#let (init, slides, alert, touying-outline) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides.with(slide-level: 2)\n\n= Section\n\n== Subsection\n\n=== Title\n\n==== Table of contents\n\n#touying-outline()\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/3cc09550-d3cc-40c2-a315-22ca8173798f",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["Where the definition of ",(0,s.jsx)(n.code,{children:"touying-outline()"})," is:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#let touying-outline(enum-args: (:), padding: 0pt) = { .. }\n"})}),"\n",(0,s.jsxs)(n.p,{children:["You can modify the parameters of the internal enum through ",(0,s.jsx)(n.code,{children:"enum-args"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"Of course, you can also use Typst's native outline:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#outline(title: none, indent: 2em)\n"})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/7b62fcaf-6342-4dba-901b-818c16682529",alt:"image"})}),"\n",(0,s.jsx)(n.p,{children:"If you have complex custom requirements for the table of contents, you can use:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#states.touying-final-sections(sections => ..)\n"})}),"\n",(0,s.jsx)(n.p,{children:"As done in the dewdrop theme."})]})}function u(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>l});var s=t(7294);const i={},o=s.createContext(i);function l(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5d410c12.5531c715.js b/assets/js/b8cfeb64.6ae9342e.js similarity index 93% rename from assets/js/5d410c12.5531c715.js rename to assets/js/b8cfeb64.6ae9342e.js index a3153074d..fb38268c8 100644 --- a/assets/js/5d410c12.5531c715.js +++ b/assets/js/b8cfeb64.6ae9342e.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8912],{4734:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>c,contentTitle:()=>i,default:()=>u,frontMatter:()=>o,metadata:()=>d,toc:()=>l});var t=n(5893),r=n(1151);const o={sidebar_position:1},i="Touying Counters",d={id:"progress/counters",title:"Touying Counters",description:"The states of Touying are placed under the states namespace, including all counters.",source:"@site/versioned_docs/version-0.4.1/progress/counters.md",sourceDirName:"progress",slug:"/progress/counters",permalink:"/touying/docs/progress/counters",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/progress/counters.md",tags:[],version:"0.4.1",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Progress",permalink:"/touying/docs/category/progress"},next:{title:"Touying Sections",permalink:"/touying/docs/progress/sections"}},c={},l=[{value:"Slide Counter",id:"slide-counter",level:2},{value:"Last-Slide Counter",id:"last-slide-counter",level:2},{value:"Progress",id:"progress",level:2},{value:"Appendix",id:"appendix",level:2}];function a(e){const s={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.h1,{id:"touying-counters",children:"Touying Counters"}),"\n",(0,t.jsxs)(s.p,{children:["The states of Touying are placed under the ",(0,t.jsx)(s.code,{children:"states"})," namespace, including all counters."]}),"\n",(0,t.jsx)(s.h2,{id:"slide-counter",children:"Slide Counter"}),"\n",(0,t.jsxs)(s.p,{children:["You can access the slide counter using ",(0,t.jsx)(s.code,{children:"states.slide-counter"})," and display the current slide number with ",(0,t.jsx)(s.code,{children:"states.slide-counter.display()"}),"."]}),"\n",(0,t.jsx)(s.h2,{id:"last-slide-counter",children:"Last-Slide Counter"}),"\n",(0,t.jsx)(s.p,{children:"In some cases, we may need to add an appendix to slides, leading to the requirement to freeze the last-slide counter. Therefore, a second counter is maintained here."}),"\n",(0,t.jsxs)(s.p,{children:["You can use ",(0,t.jsx)(s.code,{children:"states.last-slide-number"})," to display the number of the last slide before the appendix."]}),"\n",(0,t.jsx)(s.h2,{id:"progress",children:"Progress"}),"\n",(0,t.jsx)(s.p,{children:"You can use"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-typst",children:"#states.touying-progress(ratio => ..)\n"})}),"\n",(0,t.jsx)(s.p,{children:"to show the current progress."}),"\n",(0,t.jsx)(s.h2,{id:"appendix",children:"Appendix"}),"\n",(0,t.jsx)(s.p,{children:"You can use"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-typst",children:"// appendix by freezing last-slide-number\n#let s = (s.methods.appendix)(self: s)\n#let (slide, empty-slide) = utils.methods(s)\n\n#slide[\n appendix\n]\n"})}),"\n",(0,t.jsx)(s.p,{children:"syntax to enter the appendix."}),"\n",(0,t.jsxs)(s.p,{children:["Additionally, ",(0,t.jsx)(s.code,{children:"#let s = (s.methods.appendix-in-outline)(self: s, false)"})," can be used to hide the appendix section from the outline."]})]})}function u(e={}){const{wrapper:s}={...(0,r.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>d,a:()=>i});var t=n(7294);const r={},o=t.createContext(r);function i(e){const s=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function d(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1842],{4505:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>c,contentTitle:()=>i,default:()=>u,frontMatter:()=>o,metadata:()=>d,toc:()=>l});var t=n(5893),r=n(1151);const o={sidebar_position:1},i="Touying Counters",d={id:"progress/counters",title:"Touying Counters",description:"The states of Touying are placed under the states namespace, including all counters.",source:"@site/versioned_docs/version-0.4.2/progress/counters.md",sourceDirName:"progress",slug:"/progress/counters",permalink:"/touying/docs/progress/counters",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/progress/counters.md",tags:[],version:"0.4.2",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Progress",permalink:"/touying/docs/category/progress"},next:{title:"Touying Sections",permalink:"/touying/docs/progress/sections"}},c={},l=[{value:"Slide Counter",id:"slide-counter",level:2},{value:"Last-Slide Counter",id:"last-slide-counter",level:2},{value:"Progress",id:"progress",level:2},{value:"Appendix",id:"appendix",level:2}];function a(e){const s={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.h1,{id:"touying-counters",children:"Touying Counters"}),"\n",(0,t.jsxs)(s.p,{children:["The states of Touying are placed under the ",(0,t.jsx)(s.code,{children:"states"})," namespace, including all counters."]}),"\n",(0,t.jsx)(s.h2,{id:"slide-counter",children:"Slide Counter"}),"\n",(0,t.jsxs)(s.p,{children:["You can access the slide counter using ",(0,t.jsx)(s.code,{children:"states.slide-counter"})," and display the current slide number with ",(0,t.jsx)(s.code,{children:"states.slide-counter.display()"}),"."]}),"\n",(0,t.jsx)(s.h2,{id:"last-slide-counter",children:"Last-Slide Counter"}),"\n",(0,t.jsx)(s.p,{children:"In some cases, we may need to add an appendix to slides, leading to the requirement to freeze the last-slide counter. Therefore, a second counter is maintained here."}),"\n",(0,t.jsxs)(s.p,{children:["You can use ",(0,t.jsx)(s.code,{children:"states.last-slide-number"})," to display the number of the last slide before the appendix."]}),"\n",(0,t.jsx)(s.h2,{id:"progress",children:"Progress"}),"\n",(0,t.jsx)(s.p,{children:"You can use"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-typst",children:"#states.touying-progress(ratio => ..)\n"})}),"\n",(0,t.jsx)(s.p,{children:"to show the current progress."}),"\n",(0,t.jsx)(s.h2,{id:"appendix",children:"Appendix"}),"\n",(0,t.jsx)(s.p,{children:"You can use"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-typst",children:"// appendix by freezing last-slide-number\n#let s = (s.methods.appendix)(self: s)\n#let (slide, empty-slide) = utils.methods(s)\n\n#slide[\n appendix\n]\n"})}),"\n",(0,t.jsx)(s.p,{children:"syntax to enter the appendix."}),"\n",(0,t.jsxs)(s.p,{children:["Additionally, ",(0,t.jsx)(s.code,{children:"#let s = (s.methods.appendix-in-outline)(self: s, false)"})," can be used to hide the appendix section from the outline."]})]})}function u(e={}){const{wrapper:s}={...(0,r.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>d,a:()=>i});var t=n(7294);const r={},o=t.createContext(r);function i(e){const s=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function d(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/91b4e1d3.2263dc05.js b/assets/js/bbd5eca0.40c82781.js similarity index 97% rename from assets/js/91b4e1d3.2263dc05.js rename to assets/js/bbd5eca0.40c82781.js index 160345f32..7de108484 100644 --- a/assets/js/91b4e1d3.2263dc05.js +++ b/assets/js/bbd5eca0.40c82781.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4983],{2801:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"0.4.1","label":"0.4.1","banner":null,"badge":true,"noIndex":false,"className":"docs-version-0.4.1","isLast":true,"docsSidebars":{"tutorialSidebar":[{"type":"link","label":"Introduction to Touying","href":"/touying/docs/intro","docId":"intro","unlisted":false},{"type":"link","label":"Getting Started","href":"/touying/docs/start","docId":"start","unlisted":false},{"type":"link","label":"Sections and Subsections","href":"/touying/docs/sections","docId":"sections","unlisted":false},{"type":"link","label":"Code Style","href":"/touying/docs/code-styles","docId":"code-styles","unlisted":false},{"type":"link","label":"Page Layout","href":"/touying/docs/layout","docId":"layout","unlisted":false},{"type":"link","label":"Global Settings","href":"/touying/docs/global-settings","docId":"global-settings","unlisted":false},{"type":"link","label":"Multi-File Architecture","href":"/touying/docs/multi-file","docId":"multi-file","unlisted":false},{"type":"category","label":"Dynamic Slides","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Simple Animations","href":"/touying/docs/dynamic/simple","docId":"dynamic/simple","unlisted":false},{"type":"link","label":"Complex Animations","href":"/touying/docs/dynamic/complex","docId":"dynamic/complex","unlisted":false},{"type":"link","label":"Math Equation Animations","href":"/touying/docs/dynamic/equation","docId":"dynamic/equation","unlisted":false},{"type":"link","label":"Cover Function","href":"/touying/docs/dynamic/cover","docId":"dynamic/cover","unlisted":false},{"type":"link","label":"Other Animations","href":"/touying/docs/dynamic/other","docId":"dynamic/other","unlisted":false},{"type":"link","label":"Handout Mode","href":"/touying/docs/dynamic/handout","docId":"dynamic/handout","unlisted":false}],"href":"/touying/docs/category/dynamic-slides"},{"type":"category","label":"Package Integration","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Pinit","href":"/touying/docs/integration/pinit","docId":"integration/pinit","unlisted":false},{"type":"link","label":"MiTeX","href":"/touying/docs/integration/mitex","docId":"integration/mitex","unlisted":false},{"type":"link","label":"CeTZ","href":"/touying/docs/integration/cetz","docId":"integration/cetz","unlisted":false},{"type":"link","label":"Fletcher","href":"/touying/docs/integration/fletcher","docId":"integration/fletcher","unlisted":false},{"type":"link","label":"Codly","href":"/touying/docs/integration/codly","docId":"integration/codly","unlisted":false},{"type":"link","label":"Ctheorems","href":"/touying/docs/integration/ctheorems","docId":"integration/ctheorems","unlisted":false}],"href":"/touying/docs/category/package-integration"},{"type":"category","label":"Themes","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Simple Theme","href":"/touying/docs/themes/simple","docId":"themes/simple","unlisted":false},{"type":"link","label":"Metropolis Theme","href":"/touying/docs/themes/metropolis","docId":"themes/metropolis","unlisted":false},{"type":"link","label":"Dewdrop Theme","href":"/touying/docs/themes/dewdrop","docId":"themes/dewdrop","unlisted":false},{"type":"link","label":"University Theme","href":"/touying/docs/themes/university","docId":"themes/university","unlisted":false},{"type":"link","label":"Aqua Theme","href":"/touying/docs/themes/aqua","docId":"themes/aqua","unlisted":false}],"href":"/touying/docs/category/themes"},{"type":"link","label":"Creating Your Own Theme","href":"/touying/docs/build-your-own-theme","docId":"build-your-own-theme","unlisted":false},{"type":"category","label":"Progress","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Touying Counters","href":"/touying/docs/progress/counters","docId":"progress/counters","unlisted":false},{"type":"link","label":"Touying Sections","href":"/touying/docs/progress/sections","docId":"progress/sections","unlisted":false}],"href":"/touying/docs/category/progress"},{"type":"category","label":"Utilities","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Object-Oriented Programming","href":"/touying/docs/utilities/oop","docId":"utilities/oop","unlisted":false},{"type":"link","label":"Fit to Height / Width","href":"/touying/docs/utilities/fit-to","docId":"utilities/fit-to","unlisted":false}],"href":"/touying/docs/category/utilities"},{"type":"link","label":"Changelog","href":"/touying/docs/changelog","docId":"changelog","unlisted":false},{"type":"category","label":"External Tools","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Pdfpc","href":"/touying/docs/external/pdfpc","docId":"external/pdfpc","unlisted":false},{"type":"link","label":"Pympress","href":"/touying/docs/external/pympress","docId":"external/pympress","unlisted":false},{"type":"link","label":"Typst Preview","href":"/touying/docs/external/typst-preview","docId":"external/typst-preview","unlisted":false}],"href":"/touying/docs/category/external-tools"}]},"docs":{"build-your-own-theme":{"id":"build-your-own-theme","title":"Creating Your Own Theme","description":"Creating your own theme with Touying might seem a bit complex initially due to the introduction of various concepts. However, fear not; if you successfully create a custom theme with Touying, you\'ll likely experience the convenience and powerful customization features it offers. You can refer to the source code of existing themes for guidance. The key steps to implement are:","sidebar":"tutorialSidebar"},"changelog":{"id":"changelog","title":"Changelog","description":"v0.4.1","sidebar":"tutorialSidebar"},"code-styles":{"id":"code-styles","title":"Code Style","description":"Simple Style","sidebar":"tutorialSidebar"},"dynamic/complex":{"id":"dynamic/complex","title":"Complex Animations","description":"Thanks to the syntax provided by Polylux, we can also use only, uncover, and alternatives in Touying.","sidebar":"tutorialSidebar"},"dynamic/cover":{"id":"dynamic/cover","title":"Cover Function","description":"As you already know, both uncover and #pause use the cover function to conceal content that is not visible. So, what exactly is the cover function here?","sidebar":"tutorialSidebar"},"dynamic/equation":{"id":"dynamic/equation","title":"Math Equation Animations","description":"Touying also provides a unique and highly useful feature\u2014math equation animations, allowing you to conveniently use pause and meanwhile within math equations.","sidebar":"tutorialSidebar"},"dynamic/handout":{"id":"dynamic/handout","title":"Handout Mode","description":"While watching slides and attending lectures, the audience often wishes to have handouts for reviewing challenging concepts. Therefore, it\'s beneficial for the author to provide handouts for the audience, preferably before the lecture for better preparation.","sidebar":"tutorialSidebar"},"dynamic/other":{"id":"dynamic/other","title":"Other Animations","description":"Touying also provides touying-reducer, which adds pause and meanwhile animations to cetz and fletcher.","sidebar":"tutorialSidebar"},"dynamic/simple":{"id":"dynamic/simple","title":"Simple Animations","description":"Touying provides two markers for simple animation effects: #pause and #meanwhile.","sidebar":"tutorialSidebar"},"external/pdfpc":{"id":"external/pdfpc","title":"Pdfpc","description":"pdfpc is a \\"Presenter Console with multi-monitor support for PDF files.\\" This means you can use it to display slides in the form of PDF pages and it comes with some known excellent features, much like PowerPoint.","sidebar":"tutorialSidebar"},"external/pympress":{"id":"external/pympress","title":"Pympress","description":"Pympress is a PDF presentation tool designed for dual-screen setups such as presentations and public talks. Highly configurable, fully-featured, and portable","sidebar":"tutorialSidebar"},"external/typst-preview":{"id":"external/typst-preview","title":"Typst Preview","description":"The Typst Preview extension for VS Code provides an excellent slide mode, allowing us to preview and present slides.","sidebar":"tutorialSidebar"},"global-settings":{"id":"global-settings","title":"Global Settings","description":"Global Styles","sidebar":"tutorialSidebar"},"integration/cetz":{"id":"integration/cetz","title":"CeTZ","description":"Touying provides the touying-reducer, which adds pause and meanwhile animations to CeTZ and Fletcher.","sidebar":"tutorialSidebar"},"integration/codly":{"id":"integration/codly","title":"Codly","description":"When using Codly, we should initialize it using the s.methods.append-preamble method.","sidebar":"tutorialSidebar"},"integration/ctheorems":{"id":"integration/ctheorems","title":"Ctheorems","description":"Touying can work seamlessly with the ctheorems package, allowing you to directly use the ctheorems package.","sidebar":"tutorialSidebar"},"integration/fletcher":{"id":"integration/fletcher","title":"Fletcher","description":"Touying provides the touying-reducer, which adds pause and meanwhile animations to Fletcher.","sidebar":"tutorialSidebar"},"integration/mitex":{"id":"integration/mitex","title":"MiTeX","description":"During the process of creating slides, we often already have a LaTeX math equation that we simply want to paste into the slides without transcribing it into a Typst math equation. In such cases, we can use MiTeX.","sidebar":"tutorialSidebar"},"integration/pinit":{"id":"integration/pinit","title":"Pinit","description":"Pinit package provides the ability to perform absolute positioning based on the page and relative positioning based on \\"pins,\\" making it convenient to implement arrow pointing and explanatory effects for slides.","sidebar":"tutorialSidebar"},"intro":{"id":"intro","title":"Introduction to Touying","description":"Touying is a slide/presentation package developed for Typst. Touying is similar to LaTeX Beamer but benefits from Typst, providing faster rendering speed and a more concise syntax. After, we use \\"slides\\" to refer to slideshows, \\"slide\\" for a single slide, and \\"subslide\\" for a sub-slide.","sidebar":"tutorialSidebar"},"layout":{"id":"layout","title":"Page Layout","description":"Basic Concepts","sidebar":"tutorialSidebar"},"multi-file":{"id":"multi-file","title":"Multi-File Architecture","description":"Touying features a syntax as concise as native Typst documents, along with numerous customizable configuration options, yet it still maintains real-time incremental compilation performance, making it suitable for writing large-scale slides.","sidebar":"tutorialSidebar"},"progress/counters":{"id":"progress/counters","title":"Touying Counters","description":"The states of Touying are placed under the states namespace, including all counters.","sidebar":"tutorialSidebar"},"progress/sections":{"id":"progress/sections","title":"Touying Sections","description":"Touying maintains its own sections state to record the sections and subsections of slides.","sidebar":"tutorialSidebar"},"sections":{"id":"sections","title":"Sections and Subsections","description":"Structure","sidebar":"tutorialSidebar"},"start":{"id":"start","title":"Getting Started","description":"Before you begin, make sure you have the Typst environment installed. If not, you can use the Web App or install the Tinymist LSP and Typst Preview plugins for VS Code.","sidebar":"tutorialSidebar"},"themes/aqua":{"id":"themes/aqua","title":"Aqua Theme","description":"image","sidebar":"tutorialSidebar"},"themes/dewdrop":{"id":"themes/dewdrop","title":"Dewdrop Theme","description":"image","sidebar":"tutorialSidebar"},"themes/metropolis":{"id":"themes/metropolis","title":"Metropolis Theme","description":"image","sidebar":"tutorialSidebar"},"themes/simple":{"id":"themes/simple","title":"Simple Theme","description":"image","sidebar":"tutorialSidebar"},"themes/university":{"id":"themes/university","title":"University Theme","description":"image","sidebar":"tutorialSidebar"},"utilities/fit-to":{"id":"utilities/fit-to","title":"Fit to Height / Width","description":"Thanks to ntjess for the code.","sidebar":"tutorialSidebar"},"utilities/oop":{"id":"utilities/oop","title":"Object-Oriented Programming","description":"Touying provides some convenient utility functions for object-oriented programming.","sidebar":"tutorialSidebar"}}}')}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2013],{2289:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"0.4.2","label":"0.4.2","banner":null,"badge":true,"noIndex":false,"className":"docs-version-0.4.2","isLast":true,"docsSidebars":{"tutorialSidebar":[{"type":"link","label":"Introduction to Touying","href":"/touying/docs/intro","docId":"intro","unlisted":false},{"type":"link","label":"Getting Started","href":"/touying/docs/start","docId":"start","unlisted":false},{"type":"link","label":"Sections and Subsections","href":"/touying/docs/sections","docId":"sections","unlisted":false},{"type":"link","label":"Code Style","href":"/touying/docs/code-styles","docId":"code-styles","unlisted":false},{"type":"link","label":"Page Layout","href":"/touying/docs/layout","docId":"layout","unlisted":false},{"type":"link","label":"Global Settings","href":"/touying/docs/global-settings","docId":"global-settings","unlisted":false},{"type":"link","label":"Multi-File Architecture","href":"/touying/docs/multi-file","docId":"multi-file","unlisted":false},{"type":"category","label":"Dynamic Slides","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Simple Animations","href":"/touying/docs/dynamic/simple","docId":"dynamic/simple","unlisted":false},{"type":"link","label":"Complex Animations","href":"/touying/docs/dynamic/complex","docId":"dynamic/complex","unlisted":false},{"type":"link","label":"Math Equation Animations","href":"/touying/docs/dynamic/equation","docId":"dynamic/equation","unlisted":false},{"type":"link","label":"Cover Function","href":"/touying/docs/dynamic/cover","docId":"dynamic/cover","unlisted":false},{"type":"link","label":"Other Animations","href":"/touying/docs/dynamic/other","docId":"dynamic/other","unlisted":false},{"type":"link","label":"Handout Mode","href":"/touying/docs/dynamic/handout","docId":"dynamic/handout","unlisted":false}],"href":"/touying/docs/category/dynamic-slides"},{"type":"category","label":"Package Integration","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Pinit","href":"/touying/docs/integration/pinit","docId":"integration/pinit","unlisted":false},{"type":"link","label":"MiTeX","href":"/touying/docs/integration/mitex","docId":"integration/mitex","unlisted":false},{"type":"link","label":"CeTZ","href":"/touying/docs/integration/cetz","docId":"integration/cetz","unlisted":false},{"type":"link","label":"Fletcher","href":"/touying/docs/integration/fletcher","docId":"integration/fletcher","unlisted":false},{"type":"link","label":"Codly","href":"/touying/docs/integration/codly","docId":"integration/codly","unlisted":false},{"type":"link","label":"Ctheorems","href":"/touying/docs/integration/ctheorems","docId":"integration/ctheorems","unlisted":false}],"href":"/touying/docs/category/package-integration"},{"type":"category","label":"Themes","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Simple Theme","href":"/touying/docs/themes/simple","docId":"themes/simple","unlisted":false},{"type":"link","label":"Metropolis Theme","href":"/touying/docs/themes/metropolis","docId":"themes/metropolis","unlisted":false},{"type":"link","label":"Dewdrop Theme","href":"/touying/docs/themes/dewdrop","docId":"themes/dewdrop","unlisted":false},{"type":"link","label":"University Theme","href":"/touying/docs/themes/university","docId":"themes/university","unlisted":false},{"type":"link","label":"Aqua Theme","href":"/touying/docs/themes/aqua","docId":"themes/aqua","unlisted":false}],"href":"/touying/docs/category/themes"},{"type":"link","label":"Creating Your Own Theme","href":"/touying/docs/build-your-own-theme","docId":"build-your-own-theme","unlisted":false},{"type":"category","label":"Progress","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Touying Counters","href":"/touying/docs/progress/counters","docId":"progress/counters","unlisted":false},{"type":"link","label":"Touying Sections","href":"/touying/docs/progress/sections","docId":"progress/sections","unlisted":false}],"href":"/touying/docs/category/progress"},{"type":"category","label":"Utilities","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Object-Oriented Programming","href":"/touying/docs/utilities/oop","docId":"utilities/oop","unlisted":false},{"type":"link","label":"Fit to Height / Width","href":"/touying/docs/utilities/fit-to","docId":"utilities/fit-to","unlisted":false}],"href":"/touying/docs/category/utilities"},{"type":"link","label":"Changelog","href":"/touying/docs/changelog","docId":"changelog","unlisted":false},{"type":"category","label":"External Tools","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Pdfpc","href":"/touying/docs/external/pdfpc","docId":"external/pdfpc","unlisted":false},{"type":"link","label":"Pympress","href":"/touying/docs/external/pympress","docId":"external/pympress","unlisted":false},{"type":"link","label":"Typst Preview","href":"/touying/docs/external/typst-preview","docId":"external/typst-preview","unlisted":false}],"href":"/touying/docs/category/external-tools"}]},"docs":{"build-your-own-theme":{"id":"build-your-own-theme","title":"Creating Your Own Theme","description":"Creating your own theme with Touying might seem a bit complex initially due to the introduction of various concepts. However, fear not; if you successfully create a custom theme with Touying, you\'ll likely experience the convenience and powerful customization features it offers. You can refer to the source code of existing themes for guidance. The key steps to implement are:","sidebar":"tutorialSidebar"},"changelog":{"id":"changelog","title":"Changelog","description":"v0.4.2","sidebar":"tutorialSidebar"},"code-styles":{"id":"code-styles","title":"Code Style","description":"Simple Style","sidebar":"tutorialSidebar"},"dynamic/complex":{"id":"dynamic/complex","title":"Complex Animations","description":"Thanks to the syntax provided by Polylux, we can also use only, uncover, and alternatives in Touying.","sidebar":"tutorialSidebar"},"dynamic/cover":{"id":"dynamic/cover","title":"Cover Function","description":"As you already know, both uncover and #pause use the cover function to conceal content that is not visible. So, what exactly is the cover function here?","sidebar":"tutorialSidebar"},"dynamic/equation":{"id":"dynamic/equation","title":"Math Equation Animations","description":"Touying also provides a unique and highly useful feature\u2014math equation animations, allowing you to conveniently use pause and meanwhile within math equations.","sidebar":"tutorialSidebar"},"dynamic/handout":{"id":"dynamic/handout","title":"Handout Mode","description":"While watching slides and attending lectures, the audience often wishes to have handouts for reviewing challenging concepts. Therefore, it\'s beneficial for the author to provide handouts for the audience, preferably before the lecture for better preparation.","sidebar":"tutorialSidebar"},"dynamic/other":{"id":"dynamic/other","title":"Other Animations","description":"Touying also provides touying-reducer, which adds pause and meanwhile animations to cetz and fletcher.","sidebar":"tutorialSidebar"},"dynamic/simple":{"id":"dynamic/simple","title":"Simple Animations","description":"Touying provides two markers for simple animation effects: #pause and #meanwhile.","sidebar":"tutorialSidebar"},"external/pdfpc":{"id":"external/pdfpc","title":"Pdfpc","description":"pdfpc is a \\"Presenter Console with multi-monitor support for PDF files.\\" This means you can use it to display slides in the form of PDF pages and it comes with some known excellent features, much like PowerPoint.","sidebar":"tutorialSidebar"},"external/pympress":{"id":"external/pympress","title":"Pympress","description":"Pympress is a PDF presentation tool designed for dual-screen setups such as presentations and public talks. Highly configurable, fully-featured, and portable","sidebar":"tutorialSidebar"},"external/typst-preview":{"id":"external/typst-preview","title":"Typst Preview","description":"The Typst Preview extension for VS Code provides an excellent slide mode, allowing us to preview and present slides.","sidebar":"tutorialSidebar"},"global-settings":{"id":"global-settings","title":"Global Settings","description":"Global Styles","sidebar":"tutorialSidebar"},"integration/cetz":{"id":"integration/cetz","title":"CeTZ","description":"Touying provides the touying-reducer, which adds pause and meanwhile animations to CeTZ and Fletcher.","sidebar":"tutorialSidebar"},"integration/codly":{"id":"integration/codly","title":"Codly","description":"When using Codly, we should initialize it using the s.methods.append-preamble method.","sidebar":"tutorialSidebar"},"integration/ctheorems":{"id":"integration/ctheorems","title":"Ctheorems","description":"Touying can work seamlessly with the ctheorems package, allowing you to directly use the ctheorems package.","sidebar":"tutorialSidebar"},"integration/fletcher":{"id":"integration/fletcher","title":"Fletcher","description":"Touying provides the touying-reducer, which adds pause and meanwhile animations to Fletcher.","sidebar":"tutorialSidebar"},"integration/mitex":{"id":"integration/mitex","title":"MiTeX","description":"During the process of creating slides, we often already have a LaTeX math equation that we simply want to paste into the slides without transcribing it into a Typst math equation. In such cases, we can use MiTeX.","sidebar":"tutorialSidebar"},"integration/pinit":{"id":"integration/pinit","title":"Pinit","description":"Pinit package provides the ability to perform absolute positioning based on the page and relative positioning based on \\"pins,\\" making it convenient to implement arrow pointing and explanatory effects for slides.","sidebar":"tutorialSidebar"},"intro":{"id":"intro","title":"Introduction to Touying","description":"Touying is a slide/presentation package developed for Typst. Touying is similar to LaTeX Beamer but benefits from Typst, providing faster rendering speed and a more concise syntax. After, we use \\"slides\\" to refer to slideshows, \\"slide\\" for a single slide, and \\"subslide\\" for a sub-slide.","sidebar":"tutorialSidebar"},"layout":{"id":"layout","title":"Page Layout","description":"Basic Concepts","sidebar":"tutorialSidebar"},"multi-file":{"id":"multi-file","title":"Multi-File Architecture","description":"Touying features a syntax as concise as native Typst documents, along with numerous customizable configuration options, yet it still maintains real-time incremental compilation performance, making it suitable for writing large-scale slides.","sidebar":"tutorialSidebar"},"progress/counters":{"id":"progress/counters","title":"Touying Counters","description":"The states of Touying are placed under the states namespace, including all counters.","sidebar":"tutorialSidebar"},"progress/sections":{"id":"progress/sections","title":"Touying Sections","description":"Touying maintains its own sections state to record the sections and subsections of slides.","sidebar":"tutorialSidebar"},"sections":{"id":"sections","title":"Sections and Subsections","description":"Structure","sidebar":"tutorialSidebar"},"start":{"id":"start","title":"Getting Started","description":"Before you begin, make sure you have the Typst environment installed. If not, you can use the Web App or install the Tinymist LSP and Typst Preview plugins for VS Code.","sidebar":"tutorialSidebar"},"themes/aqua":{"id":"themes/aqua","title":"Aqua Theme","description":"image","sidebar":"tutorialSidebar"},"themes/dewdrop":{"id":"themes/dewdrop","title":"Dewdrop Theme","description":"image","sidebar":"tutorialSidebar"},"themes/metropolis":{"id":"themes/metropolis","title":"Metropolis Theme","description":"image","sidebar":"tutorialSidebar"},"themes/simple":{"id":"themes/simple","title":"Simple Theme","description":"image","sidebar":"tutorialSidebar"},"themes/university":{"id":"themes/university","title":"University Theme","description":"image","sidebar":"tutorialSidebar"},"utilities/fit-to":{"id":"utilities/fit-to","title":"Fit to Height / Width","description":"Thanks to ntjess for the code.","sidebar":"tutorialSidebar"},"utilities/oop":{"id":"utilities/oop","title":"Object-Oriented Programming","description":"Touying provides some convenient utility functions for object-oriented programming.","sidebar":"tutorialSidebar"}}}')}}]); \ No newline at end of file diff --git a/assets/js/c38df086.21aead31.js b/assets/js/c38df086.8532da32.js similarity index 98% rename from assets/js/c38df086.21aead31.js rename to assets/js/c38df086.8532da32.js index e330619a1..f2caa8945 100644 --- a/assets/js/c38df086.21aead31.js +++ b/assets/js/c38df086.8532da32.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6154],{82:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>r,contentTitle:()=>a,default:()=>d,frontMatter:()=>s,metadata:()=>p,toc:()=>l});var i=t(5893),o=t(1151);const s={sidebar_position:1},a="Pinit",p={id:"integration/pinit",title:"Pinit",description:'Pinit package provides the ability to perform absolute positioning based on the page and relative positioning based on "pins," making it convenient to implement arrow pointing and explanatory effects for slides.',source:"@site/docs/integration/pinit.md",sourceDirName:"integration",slug:"/integration/pinit",permalink:"/touying/docs/next/integration/pinit",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/integration/pinit.md",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Package Integration",permalink:"/touying/docs/next/category/package-integration"},next:{title:"MiTeX",permalink:"/touying/docs/next/integration/mitex"}},r={},l=[{value:"Simple Example",id:"simple-example",level:2},{value:"Complex Example",id:"complex-example",level:2}];function c(n){const e={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,o.a)(),...n.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h1,{id:"pinit",children:"Pinit"}),"\n",(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.a,{href:"https://github.com/OrangeX4/typst-pinit/",children:"Pinit"}),' package provides the ability to perform absolute positioning based on the page and relative positioning based on "pins," making it convenient to implement arrow pointing and explanatory effects for slides.']}),"\n",(0,i.jsx)(e.h2,{id:"simple-example",children:"Simple Example"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-typst",children:'#import "@preview/pinit:0.1.3": *\n\n#set text(size: 24pt)\n\nA simple #pin(1)highlighted text#pin(2).\n\n#pinit-highlight(1, 2)\n\n#pinit-point-from(2)[It is simple.]\n'})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{src:"https://github.com/touying-typ/touying/assets/34951714/b17f9b80-5a8b-4943-a222-bcb0eb38611d",alt:"image"})}),"\n",(0,i.jsxs)(e.p,{children:["Another ",(0,i.jsx)(e.a,{href:"https://github.com/OrangeX4/typst-pinit/blob/main/examples/equation-desc.typ",children:"example"}),":"]}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9b4a6b50-fcfd-497d-9649-ae1f7762ee3f",alt:"image"})}),"\n",(0,i.jsx)(e.h2,{id:"complex-example",children:"Complex Example"}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{src:"https://github.com/touying-typ/touying/assets/34951714/7fb0095a-fd86-49ec-af95-15bc81a341c2",alt:"image"})}),"\n",(0,i.jsx)(e.p,{children:"An example of shared usage with Touying:"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/pinit:0.1.3": *\n\n#(s.page-args.paper = "presentation-4-3")\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#set text(size: 20pt, font: "Calibri", ligatures: false)\n#show heading: set text(weight: "regular")\n#show heading: set block(above: 1.4em, below: 1em)\n#show heading.where(level: 1): set text(size: 1.5em)\n\n// Useful functions\n#let crimson = rgb("#c00000")\n#let greybox(..args, body) = rect(fill: luma(95%), stroke: 0.5pt, inset: 0pt, outset: 10pt, ..args, body)\n#let redbold(body) = {\n set text(fill: crimson, weight: "bold")\n body\n}\n#let blueit(body) = {\n set text(fill: blue)\n body\n}\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n// Main body\n#slide(self => [\n #let (uncover, only) = utils.methods(self)\n\n = Asymptotic Notation: $O$\n\n Use #pin("h1")asymptotic notations#pin("h2") to describe asymptotic efficiency of algorithms.\n (Ignore constant coefficients and lower-order terms.)\n\n #pause\n\n #greybox[\n Given a function $g(n)$, we denote by $O(g(n))$ the following *set of functions*:\n #redbold(${f(n): "exists" c > 0 "and" n_0 > 0, "such that" f(n) <= c dot g(n) "for all" n >= n_0}$)\n ]\n\n #pinit-highlight("h1", "h2")\n\n #pause\n\n $f(n) = O(g(n))$: #pin(1)$f(n)$ is *asymptotically smaller* than $g(n)$.#pin(2)\n\n // #absolute-place(dx: 550pt, dy: 320pt, image(width: 25%, "asymptotic.png"))\n\n #pause\n\n $f(n) redbold(in) O(g(n))$: $f(n)$ is *asymptotically* #redbold[at most] $g(n)$.\n\n #only("4-", pinit-line(stroke: 3pt + crimson, start-dy: -0.25em, end-dy: -0.25em, 1, 2))\n\n #pause\n\n #block[Insertion Sort as an #pin("r1")example#pin("r2"):]\n\n - Best Case: $T(n) approx c n + c\' n - c\'\'$ #pin(3)\n - Worst case: $T(n) approx c n + (c\' \\/ 2) n^2 - c\'\'$ #pin(4)\n\n #pinit-rect("r1", "r2")\n\n #pause\n\n #pinit-place(3, dx: 15pt, dy: -15pt)[#redbold[$T(n) = O(n)$]]\n #pinit-place(4, dx: 15pt, dy: -15pt)[#redbold[$T(n) = O(n)$]]\n\n #pause\n\n #blueit[Q: Is $n^(3) = O(n^2)$#pin("que")? How to prove your answer#pin("ans")?]\n\n #pause\n\n #only("8-", pinit-point-to("que", fill: crimson, redbold[No.]))\n #only("8-", pinit-point-from("ans", body-dx: -150pt)[\n Show that the equation $(3/2)^n >= c$ \\\n has infinitely many solutions for $n$.\n ])\n])\n'})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{src:"https://github.com/touying-typ/touying/assets/34951714/f36a026f-491c-4290-90d5-0aa3c2086567",alt:"image"})})]})}function d(n={}){const{wrapper:e}={...(0,o.a)(),...n.components};return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(c,{...n})}):c(n)}},1151:(n,e,t)=>{t.d(e,{Z:()=>p,a:()=>a});var i=t(7294);const o={},s=i.createContext(o);function a(n){const e=i.useContext(s);return i.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function p(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(o):n.components||o:a(n.components),i.createElement(s.Provider,{value:e},n.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6154],{82:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>r,contentTitle:()=>a,default:()=>d,frontMatter:()=>s,metadata:()=>p,toc:()=>l});var i=t(5893),o=t(1151);const s={sidebar_position:1},a="Pinit",p={id:"integration/pinit",title:"Pinit",description:'Pinit package provides the ability to perform absolute positioning based on the page and relative positioning based on "pins," making it convenient to implement arrow pointing and explanatory effects for slides.',source:"@site/docs/integration/pinit.md",sourceDirName:"integration",slug:"/integration/pinit",permalink:"/touying/docs/next/integration/pinit",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/integration/pinit.md",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Package Integration",permalink:"/touying/docs/next/category/package-integration"},next:{title:"MiTeX",permalink:"/touying/docs/next/integration/mitex"}},r={},l=[{value:"Simple Example",id:"simple-example",level:2},{value:"Complex Example",id:"complex-example",level:2}];function c(n){const e={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,o.a)(),...n.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h1,{id:"pinit",children:"Pinit"}),"\n",(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.a,{href:"https://github.com/OrangeX4/typst-pinit/",children:"Pinit"}),' package provides the ability to perform absolute positioning based on the page and relative positioning based on "pins," making it convenient to implement arrow pointing and explanatory effects for slides.']}),"\n",(0,i.jsx)(e.h2,{id:"simple-example",children:"Simple Example"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-typst",children:'#import "@preview/pinit:0.1.3": *\n\n#set text(size: 24pt)\n\nA simple #pin(1)highlighted text#pin(2).\n\n#pinit-highlight(1, 2)\n\n#pinit-point-from(2)[It is simple.]\n'})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{src:"https://github.com/touying-typ/touying/assets/34951714/b17f9b80-5a8b-4943-a222-bcb0eb38611d",alt:"image"})}),"\n",(0,i.jsxs)(e.p,{children:["Another ",(0,i.jsx)(e.a,{href:"https://github.com/OrangeX4/typst-pinit/blob/main/examples/equation-desc.typ",children:"example"}),":"]}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9b4a6b50-fcfd-497d-9649-ae1f7762ee3f",alt:"image"})}),"\n",(0,i.jsx)(e.h2,{id:"complex-example",children:"Complex Example"}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{src:"https://github.com/touying-typ/touying/assets/34951714/7fb0095a-fd86-49ec-af95-15bc81a341c2",alt:"image"})}),"\n",(0,i.jsx)(e.p,{children:"An example of shared usage with Touying:"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n#import "@preview/pinit:0.1.3": *\n\n#(s.page-args.paper = "presentation-4-3")\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#set text(size: 20pt, font: "Calibri", ligatures: false)\n#show heading: set text(weight: "regular")\n#show heading: set block(above: 1.4em, below: 1em)\n#show heading.where(level: 1): set text(size: 1.5em)\n\n// Useful functions\n#let crimson = rgb("#c00000")\n#let greybox(..args, body) = rect(fill: luma(95%), stroke: 0.5pt, inset: 0pt, outset: 10pt, ..args, body)\n#let redbold(body) = {\n set text(fill: crimson, weight: "bold")\n body\n}\n#let blueit(body) = {\n set text(fill: blue)\n body\n}\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n// Main body\n#slide(self => [\n #let (uncover, only) = utils.methods(self)\n\n = Asymptotic Notation: $O$\n\n Use #pin("h1")asymptotic notations#pin("h2") to describe asymptotic efficiency of algorithms.\n (Ignore constant coefficients and lower-order terms.)\n\n #pause\n\n #greybox[\n Given a function $g(n)$, we denote by $O(g(n))$ the following *set of functions*:\n #redbold(${f(n): "exists" c > 0 "and" n_0 > 0, "such that" f(n) <= c dot g(n) "for all" n >= n_0}$)\n ]\n\n #pinit-highlight("h1", "h2")\n\n #pause\n\n $f(n) = O(g(n))$: #pin(1)$f(n)$ is *asymptotically smaller* than $g(n)$.#pin(2)\n\n // #absolute-place(dx: 550pt, dy: 320pt, image(width: 25%, "asymptotic.png"))\n\n #pause\n\n $f(n) redbold(in) O(g(n))$: $f(n)$ is *asymptotically* #redbold[at most] $g(n)$.\n\n #only("4-", pinit-line(stroke: 3pt + crimson, start-dy: -0.25em, end-dy: -0.25em, 1, 2))\n\n #pause\n\n #block[Insertion Sort as an #pin("r1")example#pin("r2"):]\n\n - Best Case: $T(n) approx c n + c\' n - c\'\'$ #pin(3)\n - Worst case: $T(n) approx c n + (c\' \\/ 2) n^2 - c\'\'$ #pin(4)\n\n #pinit-rect("r1", "r2")\n\n #pause\n\n #pinit-place(3, dx: 15pt, dy: -15pt)[#redbold[$T(n) = O(n)$]]\n #pinit-place(4, dx: 15pt, dy: -15pt)[#redbold[$T(n) = O(n)$]]\n\n #pause\n\n #blueit[Q: Is $n^(3) = O(n^2)$#pin("que")? How to prove your answer#pin("ans")?]\n\n #pause\n\n #only("8-", pinit-point-to("que", fill: crimson, redbold[No.]))\n #only("8-", pinit-point-from("ans", body-dx: -150pt)[\n Show that the equation $(3/2)^n >= c$ \\\n has infinitely many solutions for $n$.\n ])\n])\n'})}),"\n",(0,i.jsx)(e.p,{children:(0,i.jsx)(e.img,{src:"https://github.com/touying-typ/touying/assets/34951714/f36a026f-491c-4290-90d5-0aa3c2086567",alt:"image"})})]})}function d(n={}){const{wrapper:e}={...(0,o.a)(),...n.components};return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(c,{...n})}):c(n)}},1151:(n,e,t)=>{t.d(e,{Z:()=>p,a:()=>a});var i=t(7294);const o={},s=i.createContext(o);function a(n){const e=i.useContext(s);return i.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function p(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(o):n.components||o:a(n.components),i.createElement(s.Provider,{value:e},n.children)}}}]); \ No newline at end of file diff --git a/assets/js/d736a72a.61b9566e.js b/assets/js/c4bbdbdb.25261eb1.js similarity index 89% rename from assets/js/d736a72a.61b9566e.js rename to assets/js/c4bbdbdb.25261eb1.js index 213368fb3..93b7ecc24 100644 --- a/assets/js/d736a72a.61b9566e.js +++ b/assets/js/c4bbdbdb.25261eb1.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1214],{4489:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>s,default:()=>u,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var i=n(5893),o=n(1151);const r={sidebar_position:1},s="Object-Oriented Programming",c={id:"utilities/oop",title:"Object-Oriented Programming",description:"Touying provides some convenient utility functions for object-oriented programming.",source:"@site/versioned_docs/version-0.4.1/utilities/oop.md",sourceDirName:"utilities",slug:"/utilities/oop",permalink:"/touying/docs/utilities/oop",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/utilities/oop.md",tags:[],version:"0.4.1",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Utilities",permalink:"/touying/docs/category/utilities"},next:{title:"Fit to Height / Width",permalink:"/touying/docs/utilities/fit-to"}},d={},l=[];function a(e){const t={code:"code",h1:"h1",hr:"hr",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{id:"object-oriented-programming",children:"Object-Oriented Programming"}),"\n",(0,i.jsx)(t.p,{children:"Touying provides some convenient utility functions for object-oriented programming."}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typst",children:"#let call-or-display(self, it) = {\n if type(it) == function {\n return it(self)\n } else {\n return it\n }\n}\n"})}),"\n",(0,i.jsx)(t.p,{children:"Call or display as-is."}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typst",children:"#let methods(self) = { .. }\n"})}),"\n",(0,i.jsx)(t.p,{children:"Used to bind self to methods and return, very commonly used."})]})}function u(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>s});var i=n(7294);const o={},r=i.createContext(o);function s(e){const t=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),i.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9876],{1329:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>s,default:()=>u,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var i=n(5893),o=n(1151);const r={sidebar_position:1},s="Object-Oriented Programming",c={id:"utilities/oop",title:"Object-Oriented Programming",description:"Touying provides some convenient utility functions for object-oriented programming.",source:"@site/versioned_docs/version-0.4.2/utilities/oop.md",sourceDirName:"utilities",slug:"/utilities/oop",permalink:"/touying/docs/utilities/oop",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/utilities/oop.md",tags:[],version:"0.4.2",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Utilities",permalink:"/touying/docs/category/utilities"},next:{title:"Fit to Height / Width",permalink:"/touying/docs/utilities/fit-to"}},d={},l=[];function a(e){const t={code:"code",h1:"h1",hr:"hr",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{id:"object-oriented-programming",children:"Object-Oriented Programming"}),"\n",(0,i.jsx)(t.p,{children:"Touying provides some convenient utility functions for object-oriented programming."}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typst",children:"#let call-or-display(self, it) = {\n if type(it) == function {\n return it(self)\n } else {\n return it\n }\n}\n"})}),"\n",(0,i.jsx)(t.p,{children:"Call or display as-is."}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typst",children:"#let methods(self) = { .. }\n"})}),"\n",(0,i.jsx)(t.p,{children:"Used to bind self to methods and return, very commonly used."})]})}function u(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>s});var i=n(7294);const o={},r=i.createContext(o);function s(e){const t=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),i.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/1bf261d1.dc0c6c70.js b/assets/js/c6f2035a.45852ac5.js similarity index 95% rename from assets/js/1bf261d1.dc0c6c70.js rename to assets/js/c6f2035a.45852ac5.js index 46f549f67..ecb91dcbe 100644 --- a/assets/js/1bf261d1.dc0c6c70.js +++ b/assets/js/c6f2035a.45852ac5.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8271],{8593:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>r,toc:()=>a});var s=t(5893),i=t(1151);const o={sidebar_position:2},l="Metropolis Theme",r={id:"themes/metropolis",title:"Metropolis Theme",description:"image",source:"@site/versioned_docs/version-0.4.1/themes/metropolis.md",sourceDirName:"themes",slug:"/themes/metropolis",permalink:"/touying/docs/themes/metropolis",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/themes/metropolis.md",tags:[],version:"0.4.1",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Simple Theme",permalink:"/touying/docs/themes/simple"},next:{title:"Dewdrop Theme",permalink:"/touying/docs/themes/dewdrop"}},d={},a=[{value:"Initialization",id:"initialization",level:2},{value:"Color Theme",id:"color-theme",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",hr:"hr",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"metropolis-theme",children:"Metropolis Theme"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/383ceb22-f696-4450-83a6-c0f17e4597e1",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["This theme draws inspiration from Matthias Vogelgesang's ",(0,s.jsx)(n.a,{href:"https://github.com/matze/mtheme",children:"Metropolis beamer"})," theme and has been modified by ",(0,s.jsx)(n.a,{href:"https://github.com/Enivex",children:"Enivex"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"The Metropolis theme is elegant and suitable for everyday use. It is recommended to have Fira Sans and Fira Math fonts installed on your computer for the best results."}),"\n",(0,s.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,s.jsx)(n.p,{children:"You can initialize it using the following code:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"register"})," function takes the following parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"aspect-ratio"}),': The aspect ratio of the slides, either "16-9" or "4-3," defaulting to "16-9."']}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"header"}),": Content displayed in the header, defaulting to ",(0,s.jsx)(n.code,{children:"states.current-section-title"}),", or it can be passed as a function like ",(0,s.jsx)(n.code,{children:"self => self.info.title"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer"}),": Content displayed in the footer, defaulting to ",(0,s.jsx)(n.code,{children:"[]"}),", or it can be passed as a function like ",(0,s.jsx)(n.code,{children:"self => self.info.author"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer-right"}),": Content displayed on the right side of the footer, defaulting to ",(0,s.jsx)(n.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer-progress"}),": Whether to show the progress bar at the bottom of the slide, defaulting to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["The Metropolis theme also provides an ",(0,s.jsx)(n.code,{children:"#alert[..]"})," function, which you can use with ",(0,s.jsx)(n.code,{children:"#show strong: alert"})," using the ",(0,s.jsx)(n.code,{children:"*alert text*"})," syntax."]}),"\n",(0,s.jsx)(n.h2,{id:"color-theme",children:"Color Theme"}),"\n",(0,s.jsx)(n.p,{children:"Metropolis uses the following default color theme:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.colors)(\n self: s,\n neutral-lightest: rgb("#fafafa"),\n primary-dark: rgb("#23373b"),\n secondary-light: rgb("#eb811b"),\n secondary-lighter: rgb("#d6c6b7"),\n)\n'})}),"\n",(0,s.jsxs)(n.p,{children:["You can modify this color theme using ",(0,s.jsx)(n.code,{children:"#let s = (s.methods.colors)(self: s, ..)"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,s.jsx)(n.p,{children:"The Metropolis theme provides a variety of custom slide functions:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#title-slide(extra: none, ..args)\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"title-slide"})," reads information from ",(0,s.jsx)(n.code,{children:"self.info"})," for display, and you can also pass in an ",(0,s.jsx)(n.code,{children:"extra"})," parameter to display additional information."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // metropolis theme\n title: auto,\n footer: auto,\n align: horizon,\n)[\n ...\n]\n"})}),"\n",(0,s.jsx)(n.p,{children:"A default slide with headers and footers, where the title defaults to the current section title, and the footer is what you set."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#focus-slide[\n ...\n]\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Used to draw attention, with the background color set to ",(0,s.jsx)(n.code,{children:"self.colors.primary-dark"}),"."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#new-section-slide(short-title: auto, title)\n"})}),"\n",(0,s.jsx)(n.p,{children:"Creates a new section with the given title."}),"\n",(0,s.jsxs)(n.h2,{id:"slides-function",children:[(0,s.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"slides"})," function has the following parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"title-slide"}),": Defaults to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"outline-slide"}),": Defaults to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"slide-level"}),": Defaults to ",(0,s.jsx)(n.code,{children:"1"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["You can set these using ",(0,s.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["PS: You can modify the outline title using ",(0,s.jsx)(n.code,{children:"#(s.outline-title = [Outline])"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["And the function of automatically adding ",(0,s.jsx)(n.code,{children:"new-section-slide"})," can be turned off by ",(0,s.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slide, slides, title-slide, new-section-slide, focus-slide, touying-outline, alert) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/4ab45ee6-09f7-498b-b349-e889d6e42e3e",alt:"image"})}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#set text(font: "Fira Sans", weight: "light", size: 20pt)\n#show math.equation: set text(font: "Fira Math")\n#set strong(delta: 100)\n#set par(justify: true)\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= First Section\n\n#slide[\n A slide without a title but with some *important* information.\n]\n\n== A long long long long long long long long long long long long long long long long long long long long long long long long Title\n\n#slide[\n A slide with equation:\n\n $ x_(n+1) = (x_n + a/x_n) / 2 $\n\n #lorem(200)\n]\n\n= Second Section\n\n#focus-slide[\n Wake up!\n]\n\n== Simple Animation\n\n#slide[\n A simple #pause dynamic slide with #alert[alert]\n\n #pause\n \n text.\n]\n\n// appendix by freezing last-slide-number\n#let s = (s.methods.appendix)(self: s)\n#let (slide, empty-slide) = utils.slides(s)\n\n= Appendix\n\n#slide[\n Appendix.\n]\n'})})]})}function h(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>l});var s=t(7294);const i={},o=s.createContext(i);function l(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9949],{4633:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>r,toc:()=>a});var s=t(5893),i=t(1151);const o={sidebar_position:2},l="Metropolis Theme",r={id:"themes/metropolis",title:"Metropolis Theme",description:"image",source:"@site/versioned_docs/version-0.4.2/themes/metropolis.md",sourceDirName:"themes",slug:"/themes/metropolis",permalink:"/touying/docs/themes/metropolis",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/themes/metropolis.md",tags:[],version:"0.4.2",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Simple Theme",permalink:"/touying/docs/themes/simple"},next:{title:"Dewdrop Theme",permalink:"/touying/docs/themes/dewdrop"}},d={},a=[{value:"Initialization",id:"initialization",level:2},{value:"Color Theme",id:"color-theme",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",hr:"hr",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"metropolis-theme",children:"Metropolis Theme"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/383ceb22-f696-4450-83a6-c0f17e4597e1",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["This theme draws inspiration from Matthias Vogelgesang's ",(0,s.jsx)(n.a,{href:"https://github.com/matze/mtheme",children:"Metropolis beamer"})," theme and has been modified by ",(0,s.jsx)(n.a,{href:"https://github.com/Enivex",children:"Enivex"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"The Metropolis theme is elegant and suitable for everyday use. It is recommended to have Fira Sans and Fira Math fonts installed on your computer for the best results."}),"\n",(0,s.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,s.jsx)(n.p,{children:"You can initialize it using the following code:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"register"})," function takes the following parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"aspect-ratio"}),': The aspect ratio of the slides, either "16-9" or "4-3," defaulting to "16-9."']}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"header"}),": Content displayed in the header, defaulting to ",(0,s.jsx)(n.code,{children:"states.current-section-title"}),", or it can be passed as a function like ",(0,s.jsx)(n.code,{children:"self => self.info.title"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer"}),": Content displayed in the footer, defaulting to ",(0,s.jsx)(n.code,{children:"[]"}),", or it can be passed as a function like ",(0,s.jsx)(n.code,{children:"self => self.info.author"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer-right"}),": Content displayed on the right side of the footer, defaulting to ",(0,s.jsx)(n.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer-progress"}),": Whether to show the progress bar at the bottom of the slide, defaulting to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["The Metropolis theme also provides an ",(0,s.jsx)(n.code,{children:"#alert[..]"})," function, which you can use with ",(0,s.jsx)(n.code,{children:"#show strong: alert"})," using the ",(0,s.jsx)(n.code,{children:"*alert text*"})," syntax."]}),"\n",(0,s.jsx)(n.h2,{id:"color-theme",children:"Color Theme"}),"\n",(0,s.jsx)(n.p,{children:"Metropolis uses the following default color theme:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.colors)(\n self: s,\n neutral-lightest: rgb("#fafafa"),\n primary-dark: rgb("#23373b"),\n secondary-light: rgb("#eb811b"),\n secondary-lighter: rgb("#d6c6b7"),\n)\n'})}),"\n",(0,s.jsxs)(n.p,{children:["You can modify this color theme using ",(0,s.jsx)(n.code,{children:"#let s = (s.methods.colors)(self: s, ..)"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,s.jsx)(n.p,{children:"The Metropolis theme provides a variety of custom slide functions:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#title-slide(extra: none, ..args)\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"title-slide"})," reads information from ",(0,s.jsx)(n.code,{children:"self.info"})," for display, and you can also pass in an ",(0,s.jsx)(n.code,{children:"extra"})," parameter to display additional information."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // metropolis theme\n title: auto,\n footer: auto,\n align: horizon,\n)[\n ...\n]\n"})}),"\n",(0,s.jsx)(n.p,{children:"A default slide with headers and footers, where the title defaults to the current section title, and the footer is what you set."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#focus-slide[\n ...\n]\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Used to draw attention, with the background color set to ",(0,s.jsx)(n.code,{children:"self.colors.primary-dark"}),"."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#new-section-slide(short-title: auto, title)\n"})}),"\n",(0,s.jsx)(n.p,{children:"Creates a new section with the given title."}),"\n",(0,s.jsxs)(n.h2,{id:"slides-function",children:[(0,s.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"slides"})," function has the following parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"title-slide"}),": Defaults to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"outline-slide"}),": Defaults to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"slide-level"}),": Defaults to ",(0,s.jsx)(n.code,{children:"1"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["You can set these using ",(0,s.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["PS: You can modify the outline title using ",(0,s.jsx)(n.code,{children:"#(s.outline-title = [Outline])"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["And the function of automatically adding ",(0,s.jsx)(n.code,{children:"new-section-slide"})," can be turned off by ",(0,s.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slide, slides, title-slide, new-section-slide, focus-slide, touying-outline, alert) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/4ab45ee6-09f7-498b-b349-e889d6e42e3e",alt:"image"})}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#set text(font: "Fira Sans", weight: "light", size: 20pt)\n#show math.equation: set text(font: "Fira Math")\n#set strong(delta: 100)\n#set par(justify: true)\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= First Section\n\n#slide[\n A slide without a title but with some *important* information.\n]\n\n== A long long long long long long long long long long long long long long long long long long long long long long long long Title\n\n#slide[\n A slide with equation:\n\n $ x_(n+1) = (x_n + a/x_n) / 2 $\n\n #lorem(200)\n]\n\n= Second Section\n\n#focus-slide[\n Wake up!\n]\n\n== Simple Animation\n\n#slide[\n A simple #pause dynamic slide with #alert[alert]\n\n #pause\n \n text.\n]\n\n// appendix by freezing last-slide-number\n#let s = (s.methods.appendix)(self: s)\n#let (slide, empty-slide) = utils.slides(s)\n\n= Appendix\n\n#slide[\n Appendix.\n]\n'})})]})}function h(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>l});var s=t(7294);const i={},o=s.createContext(i);function l(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/cbb499f0.3052ee84.js b/assets/js/cbb499f0.3052ee84.js new file mode 100644 index 000000000..87b5e6f1f --- /dev/null +++ b/assets/js/cbb499f0.3052ee84.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1001],{7717:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>a,default:()=>h,frontMatter:()=>r,metadata:()=>s,toc:()=>c});var o=n(5893),i=n(1151);const r={sidebar_position:6},a="Handout Mode",s={id:"dynamic/handout",title:"Handout Mode",description:"While watching slides and attending lectures, the audience often wishes to have handouts for reviewing challenging concepts. Therefore, it's beneficial for the author to provide handouts for the audience, preferably before the lecture for better preparation.",source:"@site/versioned_docs/version-0.4.1/dynamic/handout.md",sourceDirName:"dynamic",slug:"/dynamic/handout",permalink:"/touying/docs/0.4.1/dynamic/handout",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/dynamic/handout.md",tags:[],version:"0.4.1",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"tutorialSidebar",previous:{title:"Other Animations",permalink:"/touying/docs/0.4.1/dynamic/other"},next:{title:"Package Integration",permalink:"/touying/docs/0.4.1/category/package-integration"}},d={},c=[];function u(e){const t={code:"code",h1:"h1",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{id:"handout-mode",children:"Handout Mode"}),"\n",(0,o.jsx)(t.p,{children:"While watching slides and attending lectures, the audience often wishes to have handouts for reviewing challenging concepts. Therefore, it's beneficial for the author to provide handouts for the audience, preferably before the lecture for better preparation."}),"\n",(0,o.jsx)(t.p,{children:"The handout mode differs from the regular mode as it doesn't require intricate animation effects. It retains only the last subslide of each slide."}),"\n",(0,o.jsx)(t.p,{children:"Enabling handout mode is simple:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-typst",children:"#let s = (s.methods.enable-handout-mode)(self: s)\n"})})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(u,{...e})}):u(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var o=n(7294);const i={},r=o.createContext(i);function a(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/16a5b323.acd4d6e8.js b/assets/js/d0193031.9815ce37.js similarity index 91% rename from assets/js/16a5b323.acd4d6e8.js rename to assets/js/d0193031.9815ce37.js index 303111576..a3ceeaa14 100644 --- a/assets/js/16a5b323.acd4d6e8.js +++ b/assets/js/d0193031.9815ce37.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7140],{1871:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>s,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>a});var i=t(5893),r=t(1151);const o={sidebar_position:4},s="Fletcher",c={id:"integration/fletcher",title:"Fletcher",description:"Touying provides the touying-reducer, which adds pause and meanwhile animations to Fletcher.",source:"@site/versioned_docs/version-0.4.1/integration/fletcher.md",sourceDirName:"integration",slug:"/integration/fletcher",permalink:"/touying/docs/integration/fletcher",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/integration/fletcher.md",tags:[],version:"0.4.1",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"CeTZ",permalink:"/touying/docs/integration/cetz"},next:{title:"Codly",permalink:"/touying/docs/integration/codly"}},d={},a=[];function l(e){const n={code:"code",h1:"h1",img:"img",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"fletcher",children:"Fletcher"}),"\n",(0,i.jsxs)(n.p,{children:["Touying provides the ",(0,i.jsx)(n.code,{children:"touying-reducer"}),", which adds ",(0,i.jsx)(n.code,{children:"pause"})," and ",(0,i.jsx)(n.code,{children:"meanwhile"})," animations to Fletcher."]}),"\n",(0,i.jsx)(n.p,{children:"An example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/cetz:0.2.2"\n#import "@preview/fletcher:0.4.4" as fletcher: node, edge\n\n// cetz and fletcher bindings for touying\n#let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true))\n#let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide)\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides.with(title-slide: false, outline-slide: false)\n\n// cetz animation\n#slide[\n Cetz in Touying:\n\n #cetz-canvas({\n import cetz.draw: *\n \n rect((0,0), (5,5))\n\n (pause,)\n\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n\n (pause,)\n\n line((0,0), (2.5, 2.5), name: "line")\n })\n]\n\n// fletcher animation\n#slide[\n Fletcher in Touying:\n\n #fletcher-diagram(\n node-stroke: .1em,\n node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),\n spacing: 4em,\n edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),\n node((0,0), `reading`, radius: 2em),\n edge((0,0), (0,0), `read()`, "--|>", bend: 130deg),\n pause,\n edge(`read()`, "-|>"),\n node((1,0), `eof`, radius: 2em),\n pause,\n edge(`close()`, "-|>"),\n node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)),\n edge((0,0), (2,0), `close()`, "-|>", bend: -40deg),\n )\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc",alt:"image"})})]})}function u(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>s});var i=t(7294);const r={},o=i.createContext(r);function s(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1545],{3868:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>s,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>a});var i=t(5893),r=t(1151);const o={sidebar_position:4},s="Fletcher",c={id:"integration/fletcher",title:"Fletcher",description:"Touying provides the touying-reducer, which adds pause and meanwhile animations to Fletcher.",source:"@site/versioned_docs/version-0.4.2/integration/fletcher.md",sourceDirName:"integration",slug:"/integration/fletcher",permalink:"/touying/docs/integration/fletcher",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/integration/fletcher.md",tags:[],version:"0.4.2",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"CeTZ",permalink:"/touying/docs/integration/cetz"},next:{title:"Codly",permalink:"/touying/docs/integration/codly"}},d={},a=[];function l(e){const n={code:"code",h1:"h1",img:"img",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"fletcher",children:"Fletcher"}),"\n",(0,i.jsxs)(n.p,{children:["Touying provides the ",(0,i.jsx)(n.code,{children:"touying-reducer"}),", which adds ",(0,i.jsx)(n.code,{children:"pause"})," and ",(0,i.jsx)(n.code,{children:"meanwhile"})," animations to Fletcher."]}),"\n",(0,i.jsx)(n.p,{children:"An example:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n#import "@preview/cetz:0.2.2"\n#import "@preview/fletcher:0.4.4" as fletcher: node, edge\n\n// cetz and fletcher bindings for touying\n#let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true))\n#let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide)\n\n#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides.with(title-slide: false, outline-slide: false)\n\n// cetz animation\n#slide[\n Cetz in Touying:\n\n #cetz-canvas({\n import cetz.draw: *\n \n rect((0,0), (5,5))\n\n (pause,)\n\n rect((0,0), (1,1))\n rect((1,1), (2,2))\n rect((2,2), (3,3))\n\n (pause,)\n\n line((0,0), (2.5, 2.5), name: "line")\n })\n]\n\n// fletcher animation\n#slide[\n Fletcher in Touying:\n\n #fletcher-diagram(\n node-stroke: .1em,\n node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),\n spacing: 4em,\n edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),\n node((0,0), `reading`, radius: 2em),\n edge((0,0), (0,0), `read()`, "--|>", bend: 130deg),\n pause,\n edge(`read()`, "-|>"),\n node((1,0), `eof`, radius: 2em),\n pause,\n edge(`close()`, "-|>"),\n node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)),\n edge((0,0), (2,0), `close()`, "-|>", bend: -40deg),\n )\n]\n'})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc",alt:"image"})})]})}function u(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>s});var i=t(7294);const r={},o=i.createContext(r);function s(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/b779464e.06e801fd.js b/assets/js/d03d89a3.7d8b3e86.js similarity index 74% rename from assets/js/b779464e.06e801fd.js rename to assets/js/d03d89a3.7d8b3e86.js index 75a477b65..7bb25a0a4 100644 --- a/assets/js/b779464e.06e801fd.js +++ b/assets/js/d03d89a3.7d8b3e86.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9156],{9310:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=t(5893),i=t(1151);const o={sidebar_position:3},l="Sections and Subsections",c={id:"sections",title:"Sections and Subsections",description:"Structure",source:"@site/versioned_docs/version-0.4.1/sections.md",sourceDirName:".",slug:"/sections",permalink:"/touying/docs/sections",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/sections.md",tags:[],version:"0.4.1",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Getting Started",permalink:"/touying/docs/start"},next:{title:"Code Style",permalink:"/touying/docs/code-styles"}},r={},d=[{value:"Structure",id:"structure",level:2},{value:"Numbering",id:"numbering",level:2},{value:"Table of Contents",id:"table-of-contents",level:2}];function a(e){const n={code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"sections-and-subsections",children:"Sections and Subsections"}),"\n",(0,s.jsx)(n.h2,{id:"structure",children:"Structure"}),"\n",(0,s.jsx)(n.p,{children:"Similar to Beamer, Touying also has the concept of sections and subsections."}),"\n",(0,s.jsx)(n.p,{children:"Generally, level 1, level 2, and level 3 headings correspond to section, subsection, and title, respectively, as in the dewdrop theme."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.dewdrop.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Section\n\n== Subsection\n\n=== Title\n\nHello, Touying!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/1574e74d-25c1-418f-a84f-b974f42edae5",alt:"image"})}),"\n",(0,s.jsx)(n.p,{children:"However, often we don't need subsections, and we can use level 1 and level 2 headings to correspond to section and title, as in the university theme."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.university.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Section\n\n== Title\n\nHello, Touying!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9dd77c98-9c08-4811-872e-092bbdebf394",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["In fact, we can control this behavior through the ",(0,s.jsx)(n.code,{children:"slide-level"})," parameter of the ",(0,s.jsx)(n.code,{children:"slides"})," function. ",(0,s.jsx)(n.code,{children:"slide-level"})," represents the complexity of the nested structure, starting from 0. For example, ",(0,s.jsx)(n.code,{children:"#show: slides.with(slide-level: 2)"})," is equivalent to the section, subsection, and title structure; while ",(0,s.jsx)(n.code,{children:"#show: slides.with(slide-level: 1)"})," is equivalent to the section and title structure."]}),"\n",(0,s.jsx)(n.h2,{id:"numbering",children:"Numbering"}),"\n",(0,s.jsx)(n.p,{children:"To add numbering to sections and subsections, we simply use:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")\n'})}),"\n",(0,s.jsxs)(n.p,{children:["This sets the default numbering to ",(0,s.jsx)(n.code,{children:"1.1"}),", with the section corresponding to ",(0,s.jsx)(n.code,{children:"1."}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"table-of-contents",children:"Table of Contents"}),"\n",(0,s.jsx)(n.p,{children:"Displaying a table of contents in Touying is straightforward:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register()\n#let (init, slides, alert, touying-outline) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides.with(slide-level: 2)\n\n= Section\n\n== Subsection\n\n=== Title\n\n==== Table of contents\n\n#touying-outline()\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/3cc09550-d3cc-40c2-a315-22ca8173798f",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["Where the definition of ",(0,s.jsx)(n.code,{children:"touying-outline()"})," is:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#let touying-outline(enum-args: (:), padding: 0pt) = { .. }\n"})}),"\n",(0,s.jsxs)(n.p,{children:["You can modify the parameters of the internal enum through ",(0,s.jsx)(n.code,{children:"enum-args"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"If you have complex custom requirements for the table of contents, you can use:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#states.touying-final-sections(sections => ..)\n"})}),"\n",(0,s.jsx)(n.p,{children:"As done in the dewdrop theme."})]})}function u(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>l});var s=t(7294);const i={},o=s.createContext(i);function l(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8510],{2846:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=t(5893),i=t(1151);const o={sidebar_position:3},l="Sections and Subsections",c={id:"sections",title:"Sections and Subsections",description:"Structure",source:"@site/versioned_docs/version-0.4.2/sections.md",sourceDirName:".",slug:"/sections",permalink:"/touying/docs/sections",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/sections.md",tags:[],version:"0.4.2",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Getting Started",permalink:"/touying/docs/start"},next:{title:"Code Style",permalink:"/touying/docs/code-styles"}},r={},d=[{value:"Structure",id:"structure",level:2},{value:"Numbering",id:"numbering",level:2},{value:"Table of Contents",id:"table-of-contents",level:2}];function a(e){const n={code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"sections-and-subsections",children:"Sections and Subsections"}),"\n",(0,s.jsx)(n.h2,{id:"structure",children:"Structure"}),"\n",(0,s.jsx)(n.p,{children:"Similar to Beamer, Touying also has the concept of sections and subsections."}),"\n",(0,s.jsx)(n.p,{children:"Generally, level 1, level 2, and level 3 headings correspond to section, subsection, and title, respectively, as in the dewdrop theme."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.dewdrop.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Section\n\n== Subsection\n\n=== Title\n\nHello, Touying!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/1574e74d-25c1-418f-a84f-b974f42edae5",alt:"image"})}),"\n",(0,s.jsx)(n.p,{children:"However, often we don't need subsections, and we can use level 1 and level 2 headings to correspond to section and title, as in the university theme."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.university.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Section\n\n== Title\n\nHello, Touying!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/9dd77c98-9c08-4811-872e-092bbdebf394",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["In fact, we can control this behavior through the ",(0,s.jsx)(n.code,{children:"slide-level"})," parameter of the ",(0,s.jsx)(n.code,{children:"slides"})," function. ",(0,s.jsx)(n.code,{children:"slide-level"})," represents the complexity of the nested structure, starting from 0. For example, ",(0,s.jsx)(n.code,{children:"#show: slides.with(slide-level: 2)"})," is equivalent to the section, subsection, and title structure; while ",(0,s.jsx)(n.code,{children:"#show: slides.with(slide-level: 1)"})," is equivalent to the section and title structure."]}),"\n",(0,s.jsx)(n.h2,{id:"numbering",children:"Numbering"}),"\n",(0,s.jsx)(n.p,{children:"To add numbering to sections and subsections, we simply use:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.numbering)(self: s, section: "1.", "1.1")\n'})}),"\n",(0,s.jsxs)(n.p,{children:["This sets the default numbering to ",(0,s.jsx)(n.code,{children:"1.1"}),", with the section corresponding to ",(0,s.jsx)(n.code,{children:"1."}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"table-of-contents",children:"Table of Contents"}),"\n",(0,s.jsx)(n.p,{children:"Displaying a table of contents in Touying is straightforward:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.simple.register()\n#let (init, slides, alert, touying-outline) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides.with(slide-level: 2)\n\n= Section\n\n== Subsection\n\n=== Title\n\n==== Table of contents\n\n#touying-outline()\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/3cc09550-d3cc-40c2-a315-22ca8173798f",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["Where the definition of ",(0,s.jsx)(n.code,{children:"touying-outline()"})," is:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#let touying-outline(enum-args: (:), padding: 0pt) = { .. }\n"})}),"\n",(0,s.jsxs)(n.p,{children:["You can modify the parameters of the internal enum through ",(0,s.jsx)(n.code,{children:"enum-args"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"Of course, you can also use Typst's native outline:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#outline(title: none, indent: 2em)\n"})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/7b62fcaf-6342-4dba-901b-818c16682529",alt:"image"})}),"\n",(0,s.jsx)(n.p,{children:"If you have complex custom requirements for the table of contents, you can use:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#states.touying-final-sections(sections => ..)\n"})}),"\n",(0,s.jsx)(n.p,{children:"As done in the dewdrop theme."})]})}function u(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>l});var s=t(7294);const i={},o=s.createContext(i);function l(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/d16cbc15.b6600303.js b/assets/js/d16cbc15.3727aa6b.js similarity index 98% rename from assets/js/d16cbc15.b6600303.js rename to assets/js/d16cbc15.3727aa6b.js index cfbe3d493..927b6e2f8 100644 --- a/assets/js/d16cbc15.b6600303.js +++ b/assets/js/d16cbc15.3727aa6b.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2403],{9741:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>c});var s=i(5893),t=i(1151);const l={sidebar_position:3},o="Dewdrop Theme",d={id:"themes/dewdrop",title:"Dewdrop Theme",description:"image",source:"@site/docs/themes/dewdrop.md",sourceDirName:"themes",slug:"/themes/dewdrop",permalink:"/touying/docs/next/themes/dewdrop",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/themes/dewdrop.md",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Metropolis Theme",permalink:"/touying/docs/next/themes/metropolis"},next:{title:"University Theme",permalink:"/touying/docs/next/themes/university"}},r={},c=[{value:"Initialization",id:"initialization",level:2},{value:"Color Theme",id:"color-theme",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"Special Functions",id:"special-functions",level:2},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",hr:"hr",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"dewdrop-theme",children:"Dewdrop Theme"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/0b5b2bb2-c6ec-45c0-9cea-0af2ed896bba",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["This theme takes inspiration from Zhibo Wang's ",(0,s.jsx)(n.a,{href:"https://github.com/zbowang/BeamerTheme",children:"BeamerTheme"})," and has been modified by ",(0,s.jsx)(n.a,{href:"https://github.com/OrangeX4",children:"OrangeX4"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["The Dewdrop theme features an elegantly designed navigation, including two modes: ",(0,s.jsx)(n.code,{children:"sidebar"})," and ",(0,s.jsx)(n.code,{children:"mini-slides"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,s.jsx)(n.p,{children:"You can initialize it using the following code:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.dewdrop.register(\n aspect-ratio: "16-9",\n footer: [Dewdrop],\n navigation: "mini-slides",\n // navigation: "sidebar",\n // navigation: none,\n)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"register"})," function takes the following parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"aspect-ratio"}),': The aspect ratio of the slides, either "16-9" or "4-3," defaulting to "16-9."']}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"navigation"}),": The navigation bar style, which can be ",(0,s.jsx)(n.code,{children:'"sidebar"'}),", ",(0,s.jsx)(n.code,{children:'"mini-slides"'}),", or ",(0,s.jsx)(n.code,{children:"none"}),", defaulting to ",(0,s.jsx)(n.code,{children:'"sidebar"'}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"sidebar"}),": Sidebar navigation settings, defaulting to ",(0,s.jsx)(n.code,{children:"(width: 10em)"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"mini-slides"}),": Mini-slides settings, defaulting to ",(0,s.jsx)(n.code,{children:"(height: 2em, x: 2em, section: false, subsection: true)"}),".","\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"height"}),": The height of mini-slides, defaulting to ",(0,s.jsx)(n.code,{children:"2em"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"x"}),": Padding on the x-axis for mini-slides, defaulting to ",(0,s.jsx)(n.code,{children:"2em"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"section"}),": Whether to display slides after the section and before the subsection, defaulting to ",(0,s.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"subsection"}),": Whether to split mini-slides based on subsections or compress them into one line, defaulting to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer"}),": Content displayed in the footer, defaulting to ",(0,s.jsx)(n.code,{children:"[]"}),", or it can be passed as a function like ",(0,s.jsx)(n.code,{children:"self => self.info.author"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer-right"}),": Content displayed on the right side of the footer, defaulting to ",(0,s.jsx)(n.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"primary"}),": Primary color, defaulting to ",(0,s.jsx)(n.code,{children:'rgb("#0c4842")'}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"alpha"}),": Transparency, defaulting to ",(0,s.jsx)(n.code,{children:"70%"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["The Dewdrop theme also provides an ",(0,s.jsx)(n.code,{children:"#alert[..]"})," function, which you can use with ",(0,s.jsx)(n.code,{children:"#show strong: alert"})," using the ",(0,s.jsx)(n.code,{children:"*alert text*"})," syntax."]}),"\n",(0,s.jsx)(n.h2,{id:"color-theme",children:"Color Theme"}),"\n",(0,s.jsx)(n.p,{children:"Dewdrop uses the following default color theme:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.colors)(\n self: s,\n neutral-darkest: rgb("#000000"),\n neutral-dark: rgb("#202020"),\n neutral-light: rgb("#f3f3f3"),\n neutral-lightest: rgb("#ffffff"),\n primary: primary,\n)\n'})}),"\n",(0,s.jsxs)(n.p,{children:["You can modify this color theme using ",(0,s.jsx)(n.code,{children:"#let s = (s.methods.colors)(self: s, ..)"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,s.jsx)(n.p,{children:"The Dewdrop theme provides a variety of custom slide functions:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#title-slide(extra: none, ..args)\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"title-slide"})," reads information from ",(0,s.jsx)(n.code,{children:"self.info"})," for display, and you can also pass in an ",(0,s.jsx)(n.code,{children:"extra"})," parameter to display additional information."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // Dewdrop theme\n footer: auto,\n)[\n ...\n]\n"})}),"\n",(0,s.jsx)(n.p,{children:"A default slide with navigation and footer, where the footer is what you set."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#focus-slide[\n ...\n]\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Used to draw attention, with the background color set to ",(0,s.jsx)(n.code,{children:"self.colors.primary"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"special-functions",children:"Special Functions"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#d-outline(enum-args: (:), list-args: (:), cover: true)\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Displays the current table of contents. The ",(0,s.jsx)(n.code,{children:"cover"})," parameter specifies whether to hide sections in an inactive state."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#d-sidebar()\n"})}),"\n",(0,s.jsx)(n.p,{children:"An internal function used to display the sidebar."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#d-mini-slides()\n"})}),"\n",(0,s.jsx)(n.p,{children:"An internal function used to display mini-slides."}),"\n",(0,s.jsxs)(n.h2,{id:"slides-function",children:[(0,s.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"slides"})," function has the following parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"title-slide"}),": Defaults to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"outline-slide"}),": Defaults to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"slide-level"}),": Defaults to ",(0,s.jsx)(n.code,{children:"2"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["You can set these using ",(0,s.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["PS: You can modify the outline title using ",(0,s.jsx)(n.code,{children:"#(s.outline-title = [Outline])"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["And the function of automatically adding ",(0,s.jsx)(n.code,{children:"new-section-slide"})," can be turned off by ",(0,s.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.dewdrop.register(aspect-ratio: "16-9", footer: [Dewdrop])\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/09ddfb40-4f97-4062-8261-23f87690c33e",alt:"image"})}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.dewdrop.register(\n aspect-ratio: "16-9",\n footer: [Dewdrop],\n navigation: "mini-slides",\n // navigation: none,\n)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= Section A\n\n== Subsection A.1\n\n#slide[\n A slide with equation:\n\n $ x_(n+1) = (x_n + a/x_n) / 2 $\n]\n\n== Subsection A.2\n\n#slide[\n A slide without a title but with *important* infos\n]\n\n= Section B\n\n== Subsection B.1\n\n#slide[\n #lorem(80)\n]\n\n#focus-slide[\n Wake up!\n]\n\n== Subsection B.2\n\n#slide[\n We can use `#pause` to #pause display something later.\n\n #pause\n \n Just like this.\n\n #meanwhile\n \n Meanwhile, #pause we can also use `#meanwhile` to #pause display other content synchronously.\n]\n\n// appendix by freezing last-slide-number\n#let s = (s.methods.appendix)(self: s)\n#let (slide, empty-slide) = utils.slides(s)\n\n= Appendix\n\n=== Appendix\n\n#slide[\n Please pay attention to the current slide number.\n]\n'})})]})}function h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>d,a:()=>o});var s=i(7294);const t={},l=s.createContext(t);function o(e){const n=s.useContext(l);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),s.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2403],{9741:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>c});var s=i(5893),t=i(1151);const l={sidebar_position:3},o="Dewdrop Theme",d={id:"themes/dewdrop",title:"Dewdrop Theme",description:"image",source:"@site/docs/themes/dewdrop.md",sourceDirName:"themes",slug:"/themes/dewdrop",permalink:"/touying/docs/next/themes/dewdrop",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/themes/dewdrop.md",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Metropolis Theme",permalink:"/touying/docs/next/themes/metropolis"},next:{title:"University Theme",permalink:"/touying/docs/next/themes/university"}},r={},c=[{value:"Initialization",id:"initialization",level:2},{value:"Color Theme",id:"color-theme",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"Special Functions",id:"special-functions",level:2},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",hr:"hr",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"dewdrop-theme",children:"Dewdrop Theme"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/0b5b2bb2-c6ec-45c0-9cea-0af2ed896bba",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["This theme takes inspiration from Zhibo Wang's ",(0,s.jsx)(n.a,{href:"https://github.com/zbowang/BeamerTheme",children:"BeamerTheme"})," and has been modified by ",(0,s.jsx)(n.a,{href:"https://github.com/OrangeX4",children:"OrangeX4"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["The Dewdrop theme features an elegantly designed navigation, including two modes: ",(0,s.jsx)(n.code,{children:"sidebar"})," and ",(0,s.jsx)(n.code,{children:"mini-slides"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,s.jsx)(n.p,{children:"You can initialize it using the following code:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.dewdrop.register(\n aspect-ratio: "16-9",\n footer: [Dewdrop],\n navigation: "mini-slides",\n // navigation: "sidebar",\n // navigation: none,\n)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"register"})," function takes the following parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"aspect-ratio"}),': The aspect ratio of the slides, either "16-9" or "4-3," defaulting to "16-9."']}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"navigation"}),": The navigation bar style, which can be ",(0,s.jsx)(n.code,{children:'"sidebar"'}),", ",(0,s.jsx)(n.code,{children:'"mini-slides"'}),", or ",(0,s.jsx)(n.code,{children:"none"}),", defaulting to ",(0,s.jsx)(n.code,{children:'"sidebar"'}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"sidebar"}),": Sidebar navigation settings, defaulting to ",(0,s.jsx)(n.code,{children:"(width: 10em)"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"mini-slides"}),": Mini-slides settings, defaulting to ",(0,s.jsx)(n.code,{children:"(height: 2em, x: 2em, section: false, subsection: true)"}),".","\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"height"}),": The height of mini-slides, defaulting to ",(0,s.jsx)(n.code,{children:"2em"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"x"}),": Padding on the x-axis for mini-slides, defaulting to ",(0,s.jsx)(n.code,{children:"2em"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"section"}),": Whether to display slides after the section and before the subsection, defaulting to ",(0,s.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"subsection"}),": Whether to split mini-slides based on subsections or compress them into one line, defaulting to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer"}),": Content displayed in the footer, defaulting to ",(0,s.jsx)(n.code,{children:"[]"}),", or it can be passed as a function like ",(0,s.jsx)(n.code,{children:"self => self.info.author"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer-right"}),": Content displayed on the right side of the footer, defaulting to ",(0,s.jsx)(n.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"primary"}),": Primary color, defaulting to ",(0,s.jsx)(n.code,{children:'rgb("#0c4842")'}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"alpha"}),": Transparency, defaulting to ",(0,s.jsx)(n.code,{children:"70%"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["The Dewdrop theme also provides an ",(0,s.jsx)(n.code,{children:"#alert[..]"})," function, which you can use with ",(0,s.jsx)(n.code,{children:"#show strong: alert"})," using the ",(0,s.jsx)(n.code,{children:"*alert text*"})," syntax."]}),"\n",(0,s.jsx)(n.h2,{id:"color-theme",children:"Color Theme"}),"\n",(0,s.jsx)(n.p,{children:"Dewdrop uses the following default color theme:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.colors)(\n self: s,\n neutral-darkest: rgb("#000000"),\n neutral-dark: rgb("#202020"),\n neutral-light: rgb("#f3f3f3"),\n neutral-lightest: rgb("#ffffff"),\n primary: primary,\n)\n'})}),"\n",(0,s.jsxs)(n.p,{children:["You can modify this color theme using ",(0,s.jsx)(n.code,{children:"#let s = (s.methods.colors)(self: s, ..)"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,s.jsx)(n.p,{children:"The Dewdrop theme provides a variety of custom slide functions:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#title-slide(extra: none, ..args)\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"title-slide"})," reads information from ",(0,s.jsx)(n.code,{children:"self.info"})," for display, and you can also pass in an ",(0,s.jsx)(n.code,{children:"extra"})," parameter to display additional information."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // Dewdrop theme\n footer: auto,\n)[\n ...\n]\n"})}),"\n",(0,s.jsx)(n.p,{children:"A default slide with navigation and footer, where the footer is what you set."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#focus-slide[\n ...\n]\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Used to draw attention, with the background color set to ",(0,s.jsx)(n.code,{children:"self.colors.primary"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"special-functions",children:"Special Functions"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#d-outline(enum-args: (:), list-args: (:), cover: true)\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Displays the current table of contents. The ",(0,s.jsx)(n.code,{children:"cover"})," parameter specifies whether to hide sections in an inactive state."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#d-sidebar()\n"})}),"\n",(0,s.jsx)(n.p,{children:"An internal function used to display the sidebar."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#d-mini-slides()\n"})}),"\n",(0,s.jsx)(n.p,{children:"An internal function used to display mini-slides."}),"\n",(0,s.jsxs)(n.h2,{id:"slides-function",children:[(0,s.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"slides"})," function has the following parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"title-slide"}),": Defaults to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"outline-slide"}),": Defaults to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"slide-level"}),": Defaults to ",(0,s.jsx)(n.code,{children:"2"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["You can set these using ",(0,s.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["PS: You can modify the outline title using ",(0,s.jsx)(n.code,{children:"#(s.outline-title = [Outline])"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["And the function of automatically adding ",(0,s.jsx)(n.code,{children:"new-section-slide"})," can be turned off by ",(0,s.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.dewdrop.register(aspect-ratio: "16-9", footer: [Dewdrop])\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/09ddfb40-4f97-4062-8261-23f87690c33e",alt:"image"})}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.dewdrop.register(\n aspect-ratio: "16-9",\n footer: [Dewdrop],\n navigation: "mini-slides",\n // navigation: none,\n)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= Section A\n\n== Subsection A.1\n\n#slide[\n A slide with equation:\n\n $ x_(n+1) = (x_n + a/x_n) / 2 $\n]\n\n== Subsection A.2\n\n#slide[\n A slide without a title but with *important* infos\n]\n\n= Section B\n\n== Subsection B.1\n\n#slide[\n #lorem(80)\n]\n\n#focus-slide[\n Wake up!\n]\n\n== Subsection B.2\n\n#slide[\n We can use `#pause` to #pause display something later.\n\n #pause\n \n Just like this.\n\n #meanwhile\n \n Meanwhile, #pause we can also use `#meanwhile` to #pause display other content synchronously.\n]\n\n// appendix by freezing last-slide-number\n#let s = (s.methods.appendix)(self: s)\n#let (slide, empty-slide) = utils.slides(s)\n\n= Appendix\n\n=== Appendix\n\n#slide[\n Please pay attention to the current slide number.\n]\n'})})]})}function h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>d,a:()=>o});var s=i(7294);const t={},l=s.createContext(t);function o(e){const n=s.useContext(l);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),s.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/d287f9e6.1b25ce7b.js b/assets/js/d287f9e6.cc5b9f21.js similarity index 97% rename from assets/js/d287f9e6.1b25ce7b.js rename to assets/js/d287f9e6.cc5b9f21.js index 45738e0c3..e3812f573 100644 --- a/assets/js/d287f9e6.1b25ce7b.js +++ b/assets/js/d287f9e6.cc5b9f21.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[612],{1344:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>r,default:()=>u,frontMatter:()=>s,metadata:()=>l,toc:()=>c});var i=n(5893),o=n(1151);const s={sidebar_position:5},r="Codly",l={id:"integration/codly",title:"Codly",description:"When using Codly, we should initialize it using the s.methods.append-preamble method.",source:"@site/docs/integration/codly.md",sourceDirName:"integration",slug:"/integration/codly",permalink:"/touying/docs/next/integration/codly",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/integration/codly.md",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Fletcher",permalink:"/touying/docs/next/integration/fletcher"},next:{title:"Ctheorems",permalink:"/touying/docs/next/integration/ctheorems"}},d={},c=[];function a(e){const t={code:"code",h1:"h1",img:"img",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{id:"codly",children:"Codly"}),"\n",(0,i.jsxs)(t.p,{children:["When using Codly, we should initialize it using the ",(0,i.jsx)(t.code,{children:"s.methods.append-preamble"})," method."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/codly:0.2.0": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9")\n#let s = (s.methods.append-preamble)(self: s)[\n #codly(languages: (\n rust: (name: "Rust", icon: "\\u{fa53}", color: rgb("#CE412B")),\n ))\n]\n#let (init, slides) = utils.methods(s)\n#show heading.where(level: 2): set block(below: 1em)\n#show: init\n#show: codly-init.with()\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n#slide[\n == First slide\n\n #raw(lang: "rust", block: true,\n`pub fn main() {\n println!("Hello, world!");\n}`.text)\n]\n'})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://github.com/touying-typ/touying/assets/34951714/0be2fbaf-cc03-4776-932f-259503d5e23a",alt:"image"})})]})}function u(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>l,a:()=>r});var i=n(7294);const o={},s=i.createContext(o);function r(e){const t=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),i.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[612],{1344:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>r,default:()=>u,frontMatter:()=>s,metadata:()=>l,toc:()=>c});var i=n(5893),o=n(1151);const s={sidebar_position:5},r="Codly",l={id:"integration/codly",title:"Codly",description:"When using Codly, we should initialize it using the s.methods.append-preamble method.",source:"@site/docs/integration/codly.md",sourceDirName:"integration",slug:"/integration/codly",permalink:"/touying/docs/next/integration/codly",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/integration/codly.md",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Fletcher",permalink:"/touying/docs/next/integration/fletcher"},next:{title:"Ctheorems",permalink:"/touying/docs/next/integration/ctheorems"}},d={},c=[];function a(e){const t={code:"code",h1:"h1",img:"img",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{id:"codly",children:"Codly"}),"\n",(0,i.jsxs)(t.p,{children:["When using Codly, we should initialize it using the ",(0,i.jsx)(t.code,{children:"s.methods.append-preamble"})," method."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n#import "@preview/codly:0.2.0": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9")\n#let s = (s.methods.append-preamble)(self: s)[\n #codly(languages: (\n rust: (name: "Rust", icon: "\\u{fa53}", color: rgb("#CE412B")),\n ))\n]\n#let (init, slides) = utils.methods(s)\n#show heading.where(level: 2): set block(below: 1em)\n#show: init\n#show: codly-init.with()\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n#slide[\n == First slide\n\n #raw(lang: "rust", block: true,\n`pub fn main() {\n println!("Hello, world!");\n}`.text)\n]\n'})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://github.com/touying-typ/touying/assets/34951714/0be2fbaf-cc03-4776-932f-259503d5e23a",alt:"image"})})]})}function u(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>l,a:()=>r});var i=n(7294);const o={},s=i.createContext(o);function r(e){const t=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),i.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/8aab68b4.5af626a5.js b/assets/js/d37c9d26.a122a343.js similarity index 94% rename from assets/js/8aab68b4.5af626a5.js rename to assets/js/d37c9d26.a122a343.js index 0eec5dcbe..a28d3ce52 100644 --- a/assets/js/8aab68b4.5af626a5.js +++ b/assets/js/d37c9d26.a122a343.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[511],{5294:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>d,toc:()=>l});var i=s(5893),t=s(1151);const o={sidebar_position:1},a="Simple Animations",d={id:"dynamic/simple",title:"Simple Animations",description:"Touying provides two markers for simple animation effects: #pause and #meanwhile.",source:"@site/versioned_docs/version-0.4.1/dynamic/simple.md",sourceDirName:"dynamic",slug:"/dynamic/simple",permalink:"/touying/docs/dynamic/simple",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/dynamic/simple.md",tags:[],version:"0.4.1",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Dynamic Slides",permalink:"/touying/docs/category/dynamic-slides"},next:{title:"Complex Animations",permalink:"/touying/docs/dynamic/complex"}},c={},l=[{value:"pause",id:"pause",level:2},{value:"meanwhile",id:"meanwhile",level:2},{value:"Handling layout functions",id:"handling-layout-functions",level:2}];function r(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,t.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"simple-animations",children:"Simple Animations"}),"\n",(0,i.jsxs)(n.p,{children:["Touying provides two markers for simple animation effects: ",(0,i.jsx)(n.code,{children:"#pause"})," and ",(0,i.jsx)(n.code,{children:"#meanwhile"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"pause",children:"pause"}),"\n",(0,i.jsxs)(n.p,{children:["The purpose of ",(0,i.jsx)(n.code,{children:"#pause"})," is straightforward \u2013 it separates the subsequent content into the next subslide. You can use multiple ",(0,i.jsx)(n.code,{children:"#pause"})," to create multiple subslides. Here's a simple example:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide[\n First #pause Second\n\n #pause\n\n Third\n]\n"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/a3bed1d3-e660-456d-8a54-a914436f43bf",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:"This example will create three subslides, gradually revealing the content."}),"\n",(0,i.jsxs)(n.p,{children:["As you can see, ",(0,i.jsx)(n.code,{children:"#pause"})," can be used inline or on a separate line."]}),"\n",(0,i.jsx)(n.h2,{id:"meanwhile",children:"meanwhile"}),"\n",(0,i.jsxs)(n.p,{children:["In some cases, you may need to display additional content simultaneously with ",(0,i.jsx)(n.code,{children:"#pause"}),". In such cases, you can use ",(0,i.jsx)(n.code,{children:"#meanwhile"}),"."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide[\n First\n \n #pause\n \n Second\n\n #meanwhile\n\n Third\n\n #pause\n\n Fourth\n]\n"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/24ca19a3-b27c-4d31-ab75-09c37911e6ac",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:'This example will create only two subslides, with "First" and "Third" displayed simultaneously, and "Second" and "Fourth" displayed simultaneously.'}),"\n",(0,i.jsx)(n.h2,{id:"handling-layout-functions",children:"Handling layout functions"}),"\n",(0,i.jsxs)(n.p,{children:["If you use layout functions like ",(0,i.jsx)(n.code,{children:"grid"})," inside ",(0,i.jsx)(n.code,{children:"slide[..]"}),", you might be surprised to find that subsequent ",(0,i.jsx)(n.code,{children:"#pause"})," and ",(0,i.jsx)(n.code,{children:"#meanwhile"})," do not work. This is because Touying cannot detect the content inside layout functions. But you can use the ",(0,i.jsx)(n.code,{children:"composer"})," parameter of ",(0,i.jsx)(n.code,{children:"#slide()"})," to meet most requirements."]}),"\n",(0,i.jsx)(n.admonition,{title:"Internals",type:"tip",children:(0,i.jsxs)(n.p,{children:["Touying doesn't rely on ",(0,i.jsx)(n.code,{children:"counter"})," and ",(0,i.jsx)(n.code,{children:"locate"})," to implement ",(0,i.jsx)(n.code,{children:"#pause"}),". Instead, it has a parser written in Typst script. It parses the input content block as a sequence and then transforms and reorganizes this sequence into the series of subslides we need."]})})]})}function u(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(r,{...e})}):r(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>d,a:()=>a});var i=s(7294);const t={},o=i.createContext(t);function a(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:a(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[743],{5455:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>d,toc:()=>l});var i=s(5893),t=s(1151);const o={sidebar_position:1},a="Simple Animations",d={id:"dynamic/simple",title:"Simple Animations",description:"Touying provides two markers for simple animation effects: #pause and #meanwhile.",source:"@site/versioned_docs/version-0.4.2/dynamic/simple.md",sourceDirName:"dynamic",slug:"/dynamic/simple",permalink:"/touying/docs/dynamic/simple",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/dynamic/simple.md",tags:[],version:"0.4.2",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Dynamic Slides",permalink:"/touying/docs/category/dynamic-slides"},next:{title:"Complex Animations",permalink:"/touying/docs/dynamic/complex"}},c={},l=[{value:"pause",id:"pause",level:2},{value:"meanwhile",id:"meanwhile",level:2},{value:"Handling layout functions",id:"handling-layout-functions",level:2}];function r(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,t.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"simple-animations",children:"Simple Animations"}),"\n",(0,i.jsxs)(n.p,{children:["Touying provides two markers for simple animation effects: ",(0,i.jsx)(n.code,{children:"#pause"})," and ",(0,i.jsx)(n.code,{children:"#meanwhile"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"pause",children:"pause"}),"\n",(0,i.jsxs)(n.p,{children:["The purpose of ",(0,i.jsx)(n.code,{children:"#pause"})," is straightforward \u2013 it separates the subsequent content into the next subslide. You can use multiple ",(0,i.jsx)(n.code,{children:"#pause"})," to create multiple subslides. Here's a simple example:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide[\n First #pause Second\n\n #pause\n\n Third\n]\n"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/a3bed1d3-e660-456d-8a54-a914436f43bf",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:"This example will create three subslides, gradually revealing the content."}),"\n",(0,i.jsxs)(n.p,{children:["As you can see, ",(0,i.jsx)(n.code,{children:"#pause"})," can be used inline or on a separate line."]}),"\n",(0,i.jsx)(n.h2,{id:"meanwhile",children:"meanwhile"}),"\n",(0,i.jsxs)(n.p,{children:["In some cases, you may need to display additional content simultaneously with ",(0,i.jsx)(n.code,{children:"#pause"}),". In such cases, you can use ",(0,i.jsx)(n.code,{children:"#meanwhile"}),"."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide[\n First\n \n #pause\n \n Second\n\n #meanwhile\n\n Third\n\n #pause\n\n Fourth\n]\n"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/24ca19a3-b27c-4d31-ab75-09c37911e6ac",alt:"image"})}),"\n",(0,i.jsx)(n.p,{children:'This example will create only two subslides, with "First" and "Third" displayed simultaneously, and "Second" and "Fourth" displayed simultaneously.'}),"\n",(0,i.jsx)(n.h2,{id:"handling-layout-functions",children:"Handling layout functions"}),"\n",(0,i.jsxs)(n.p,{children:["If you use layout functions like ",(0,i.jsx)(n.code,{children:"grid"})," inside ",(0,i.jsx)(n.code,{children:"slide[..]"}),", you might be surprised to find that subsequent ",(0,i.jsx)(n.code,{children:"#pause"})," and ",(0,i.jsx)(n.code,{children:"#meanwhile"})," do not work. This is because Touying cannot detect the content inside layout functions. But you can use the ",(0,i.jsx)(n.code,{children:"composer"})," parameter of ",(0,i.jsx)(n.code,{children:"#slide()"})," to meet most requirements."]}),"\n",(0,i.jsx)(n.admonition,{title:"Internals",type:"tip",children:(0,i.jsxs)(n.p,{children:["Touying doesn't rely on ",(0,i.jsx)(n.code,{children:"counter"})," and ",(0,i.jsx)(n.code,{children:"locate"})," to implement ",(0,i.jsx)(n.code,{children:"#pause"}),". Instead, it has a parser written in Typst script. It parses the input content block as a sequence and then transforms and reorganizes this sequence into the series of subslides we need."]})})]})}function u(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(r,{...e})}):r(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>d,a:()=>a});var i=s(7294);const t={},o=i.createContext(t);function a(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:a(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/d434ce9a.389cc0a1.js b/assets/js/d434ce9a.389cc0a1.js new file mode 100644 index 000000000..2448073a0 --- /dev/null +++ b/assets/js/d434ce9a.389cc0a1.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2992],{4946:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>p,contentTitle:()=>r,default:()=>u,frontMatter:()=>o,metadata:()=>a,toc:()=>l});var t=n(5893),i=n(1151);const o={sidebar_position:2},r="Pympress",a={id:"external/pympress",title:"Pympress",description:"Pympress is a PDF presentation tool designed for dual-screen setups such as presentations and public talks. Highly configurable, fully-featured, and portable",source:"@site/versioned_docs/version-0.4.1/external/pympress.md",sourceDirName:"external",slug:"/external/pympress",permalink:"/touying/docs/0.4.1/external/pympress",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/external/pympress.md",tags:[],version:"0.4.1",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Pdfpc",permalink:"/touying/docs/0.4.1/external/pdfpc"},next:{title:"Typst Preview",permalink:"/touying/docs/0.4.1/external/typst-preview"}},p={},l=[{value:"Speaker Notes",id:"speaker-notes",level:2}];function c(e){const s={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.h1,{id:"pympress",children:"Pympress"}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.a,{href:"https://github.com/Cimbali/pympress",children:"Pympress"})," is a PDF presentation tool designed for dual-screen setups such as presentations and public talks. Highly configurable, fully-featured, and portable"]}),"\n",(0,t.jsx)(s.h2,{id:"speaker-notes",children:"Speaker Notes"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n\n// Set the speaker notes configuration, you can show it by pympress\n#let s = (s.methods.show-notes-on-second-screen)(self: s, right)\n\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Animation\n\n== Simple Animation\n\nWe can use `#pause` to #pause display something later.\n\n#pause\n\nJust like this.\n\n#meanwhile\n\nMeanwhile, #pause we can also use `#meanwhile` to #pause display other content synchronously.\n\n#speaker-note[\n + This is a speaker note.\n + You won\'t see it unless you use `#let s = (s.math.show-notes-on-second-screen)(self: s, right)`\n]\n'})}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/b43c7f99-c5f9-4084-aa70-c1561e8aafee",alt:"image"})}),"\n",(0,t.jsx)(s.p,{children:"Then we can use the pympress to show it."}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/afbe17cb-46d4-4507-90e8-959c53de95d5",alt:"image"})})]})}function u(e={}){const{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>a,a:()=>r});var t=n(7294);const i={},o=t.createContext(i);function r(e){const s=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/d434ce9a.788fd1db.js b/assets/js/d434ce9a.788fd1db.js deleted file mode 100644 index f0cf86110..000000000 --- a/assets/js/d434ce9a.788fd1db.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2992],{4946:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>p,contentTitle:()=>r,default:()=>u,frontMatter:()=>o,metadata:()=>a,toc:()=>l});var t=n(5893),i=n(1151);const o={sidebar_position:2},r="Pympress",a={id:"external/pympress",title:"Pympress",description:"Pympress is a PDF presentation tool designed for dual-screen setups such as presentations and public talks. Highly configurable, fully-featured, and portable",source:"@site/versioned_docs/version-0.4.1/external/pympress.md",sourceDirName:"external",slug:"/external/pympress",permalink:"/touying/docs/external/pympress",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/external/pympress.md",tags:[],version:"0.4.1",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Pdfpc",permalink:"/touying/docs/external/pdfpc"},next:{title:"Typst Preview",permalink:"/touying/docs/external/typst-preview"}},p={},l=[{value:"Speaker Notes",id:"speaker-notes",level:2}];function c(e){const s={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.h1,{id:"pympress",children:"Pympress"}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.a,{href:"https://github.com/Cimbali/pympress",children:"Pympress"})," is a PDF presentation tool designed for dual-screen setups such as presentations and public talks. Highly configurable, fully-featured, and portable"]}),"\n",(0,t.jsx)(s.h2,{id:"speaker-notes",children:"Speaker Notes"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.university.register(aspect-ratio: "16-9")\n\n// Set the speaker notes configuration, you can show it by pympress\n#let s = (s.methods.show-notes-on-second-screen)(self: s, right)\n\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Animation\n\n== Simple Animation\n\nWe can use `#pause` to #pause display something later.\n\n#pause\n\nJust like this.\n\n#meanwhile\n\nMeanwhile, #pause we can also use `#meanwhile` to #pause display other content synchronously.\n\n#speaker-note[\n + This is a speaker note.\n + You won\'t see it unless you use `#let s = (s.math.show-notes-on-second-screen)(self: s, right)`\n]\n'})}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/b43c7f99-c5f9-4084-aa70-c1561e8aafee",alt:"image"})}),"\n",(0,t.jsx)(s.p,{children:"Then we can use the pympress to show it."}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/afbe17cb-46d4-4507-90e8-959c53de95d5",alt:"image"})})]})}function u(e={}){const{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>a,a:()=>r});var t=n(7294);const i={},o=t.createContext(i);function r(e){const s=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/d736a72a.6b58c5b9.js b/assets/js/d736a72a.6b58c5b9.js new file mode 100644 index 000000000..b0233ee88 --- /dev/null +++ b/assets/js/d736a72a.6b58c5b9.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1214],{4489:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>s,default:()=>u,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var i=n(5893),o=n(1151);const r={sidebar_position:1},s="Object-Oriented Programming",c={id:"utilities/oop",title:"Object-Oriented Programming",description:"Touying provides some convenient utility functions for object-oriented programming.",source:"@site/versioned_docs/version-0.4.1/utilities/oop.md",sourceDirName:"utilities",slug:"/utilities/oop",permalink:"/touying/docs/0.4.1/utilities/oop",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/utilities/oop.md",tags:[],version:"0.4.1",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Utilities",permalink:"/touying/docs/0.4.1/category/utilities"},next:{title:"Fit to Height / Width",permalink:"/touying/docs/0.4.1/utilities/fit-to"}},d={},l=[];function a(e){const t={code:"code",h1:"h1",hr:"hr",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{id:"object-oriented-programming",children:"Object-Oriented Programming"}),"\n",(0,i.jsx)(t.p,{children:"Touying provides some convenient utility functions for object-oriented programming."}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typst",children:"#let call-or-display(self, it) = {\n if type(it) == function {\n return it(self)\n } else {\n return it\n }\n}\n"})}),"\n",(0,i.jsx)(t.p,{children:"Call or display as-is."}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typst",children:"#let methods(self) = { .. }\n"})}),"\n",(0,i.jsx)(t.p,{children:"Used to bind self to methods and return, very commonly used."})]})}function u(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>s});var i=n(7294);const o={},r=i.createContext(o);function s(e){const t=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),i.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/d85bd5da.4c3effc8.js b/assets/js/d85bd5da.4c3effc8.js new file mode 100644 index 000000000..09c1db75e --- /dev/null +++ b/assets/js/d85bd5da.4c3effc8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6060],{8253:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>r,contentTitle:()=>c,default:()=>h,frontMatter:()=>o,metadata:()=>l,toc:()=>a});var t=s(5893),i=s(1151);const o={sidebar_position:2},c="Complex Animations",l={id:"dynamic/complex",title:"Complex Animations",description:"Thanks to the syntax provided by Polylux, we can also use only, uncover, and alternatives in Touying.",source:"@site/versioned_docs/version-0.4.2/dynamic/complex.md",sourceDirName:"dynamic",slug:"/dynamic/complex",permalink:"/touying/docs/dynamic/complex",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/dynamic/complex.md",tags:[],version:"0.4.2",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Simple Animations",permalink:"/touying/docs/dynamic/simple"},next:{title:"Math Equation Animations",permalink:"/touying/docs/dynamic/equation"}},r={},a=[{value:"Mark-Style Functions",id:"mark-style-functions",level:2},{value:"Callback-Style Functions",id:"callback-style-functions",level:2},{value:"only",id:"only",level:2},{value:"uncover",id:"uncover",level:2},{value:"alternatives",id:"alternatives",level:2}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"complex-animations",children:"Complex Animations"}),"\n",(0,t.jsxs)(n.p,{children:["Thanks to the syntax provided by ",(0,t.jsx)(n.a,{href:"https://polylux.dev/book/dynamic/syntax.html",children:"Polylux"}),", we can also use ",(0,t.jsx)(n.code,{children:"only"}),", ",(0,t.jsx)(n.code,{children:"uncover"}),", and ",(0,t.jsx)(n.code,{children:"alternatives"})," in Touying."]}),"\n",(0,t.jsx)(n.h2,{id:"mark-style-functions",children:"Mark-Style Functions"}),"\n",(0,t.jsx)(n.p,{children:"We can use mark-style functions, which are very convenient to use."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'At subslide #utils.touying-wrapper((self: none) => str(self.subslide)), we can\n\nuse #uncover("2-")[`#uncover` function] for reserving space,\n\nuse #only("2-")[`#only` function] for not reserving space,\n\n#alternatives[call `#only` multiple times \\u{2717}][use `#alternatives` function #sym.checkmark] for choosing one of the alternatives.\n'})}),"\n",(0,t.jsxs)(n.p,{children:["However, this does not work in all cases, for example if you put ",(0,t.jsx)(n.code,{children:"uncover"})," into the layout function like ",(0,t.jsx)(n.code,{children:"grid"})," function, you will get an error."]}),"\n",(0,t.jsx)(n.h2,{id:"callback-style-functions",children:"Callback-Style Functions"}),"\n",(0,t.jsxs)(n.p,{children:["To overcome the limitations of layout functions mentioned earlier, Touying cleverly implements always-effective ",(0,t.jsx)(n.code,{children:"only"}),", ",(0,t.jsx)(n.code,{children:"uncover"}),", and ",(0,t.jsx)(n.code,{children:"alternatives"})," using callback functions. Specifically, you need to introduce these three functions as follows:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:'#slide(repeat: 3, self => [\n #let (uncover, only, alternatives) = utils.methods(self)\n\n At subslide #self.subslide, we can\n\n use #uncover("2-")[`#uncover` function] for reserving space,\n\n use #only("2-")[`#only` function] for not reserving space,\n\n #alternatives[call `#only` multiple times \\u{2717}][use `#alternatives` function #sym.checkmark] for choosing one of the alternatives.\n])\n'})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/e9a6b8c5-daf0-4cf2-8d39-1a768ce1dfea",alt:"image"})}),"\n",(0,t.jsxs)(n.p,{children:["Notice that we no longer pass a content block but instead pass a callback function with a ",(0,t.jsx)(n.code,{children:"self"})," parameter. Later, we extract ",(0,t.jsx)(n.code,{children:"only"}),", ",(0,t.jsx)(n.code,{children:"uncover"}),", and ",(0,t.jsx)(n.code,{children:"alternatives"})," functions from ",(0,t.jsx)(n.code,{children:"self"})," using:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#let (uncover, only, alternatives) = utils.methods(self)\n"})}),"\n",(0,t.jsx)(n.p,{children:"We then call these functions in subsequent steps."}),"\n",(0,t.jsxs)(n.p,{children:["Here's an interesting fact: the ",(0,t.jsx)(n.code,{children:"self.subslide"})," of type int indicates the current subslide index, and in fact, the ",(0,t.jsx)(n.code,{children:"only"}),", ",(0,t.jsx)(n.code,{children:"uncover"}),", and ",(0,t.jsx)(n.code,{children:"alternatives"})," functions rely on ",(0,t.jsx)(n.code,{children:"self.subslide"})," to determine the current subslide index."]}),"\n",(0,t.jsx)(n.admonition,{title:"Warning",type:"warning",children:(0,t.jsxs)(n.p,{children:["We manually specify the ",(0,t.jsx)(n.code,{children:"repeat: 3"})," parameter, indicating the display of 3 subslides. We need to do this manually because Touying cannot infer how many subslides ",(0,t.jsx)(n.code,{children:"only"}),", ",(0,t.jsx)(n.code,{children:"uncover"}),", and ",(0,t.jsx)(n.code,{children:"alternatives"})," should display."]})}),"\n",(0,t.jsx)(n.h2,{id:"only",children:"only"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"only"})," function means it \"appears\" only on selected subslides. If it doesn't appear, it completely disappears and doesn't occupy any space. In other words, ",(0,t.jsx)(n.code,{children:"#only(index, body)"})," is either ",(0,t.jsx)(n.code,{children:"body"})," or ",(0,t.jsx)(n.code,{children:"none"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["The index can be an int type or a str type like ",(0,t.jsx)(n.code,{children:'"2-"'})," or ",(0,t.jsx)(n.code,{children:'"2-3"'}),". For more usage, refer to ",(0,t.jsx)(n.a,{href:"https://polylux.dev/book/dynamic/complex.html",children:"Polylux"}),"."]}),"\n",(0,t.jsx)(n.h2,{id:"uncover",children:"uncover"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"uncover"}),' function means it "displays" only on selected subslides; otherwise, it will be covered by the ',(0,t.jsx)(n.code,{children:"cover"})," function but still occupies the original space. In other words, ",(0,t.jsx)(n.code,{children:"#uncover(index, body)"})," is either ",(0,t.jsx)(n.code,{children:"body"})," or ",(0,t.jsx)(n.code,{children:"cover(body)"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["The index can be an int type or a str type like ",(0,t.jsx)(n.code,{children:'"2-"'})," or ",(0,t.jsx)(n.code,{children:'"2-3"'}),". For more usage, refer to ",(0,t.jsx)(n.a,{href:"https://polylux.dev/book/dynamic/complex.html",children:"Polylux"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["You may also have noticed that ",(0,t.jsx)(n.code,{children:"#pause"})," actually uses the ",(0,t.jsx)(n.code,{children:"cover"})," function, providing a more convenient syntax. In reality, their effects are almost identical."]}),"\n",(0,t.jsx)(n.h2,{id:"alternatives",children:"alternatives"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"alternatives"})," function displays a series of different content in different subslides. For example:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typst",children:"#slide(repeat: 3, self => [\n #let (uncover, only, alternatives) = utils.methods(self)\n\n #alternatives[Ann][Bob][Christopher]\n likes\n #alternatives[chocolate][strawberry][vanilla]\n ice cream.\n])\n"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/392707ea-0bcd-426b-b232-5bc63b9a13a3",alt:"image"})}),"\n",(0,t.jsxs)(n.p,{children:["As you can see, ",(0,t.jsx)(n.code,{children:"alternatives"})," can automatically expand to the most suitable width and height, a capability that ",(0,t.jsx)(n.code,{children:"only"})," and ",(0,t.jsx)(n.code,{children:"uncover"})," lack. In fact, ",(0,t.jsx)(n.code,{children:"alternatives"})," has other parameters, such as ",(0,t.jsx)(n.code,{children:"start: 2"}),", ",(0,t.jsx)(n.code,{children:"repeat-last: true"}),", and ",(0,t.jsx)(n.code,{children:"position: center + horizon"}),". For more usage, refer to ",(0,t.jsx)(n.a,{href:"https://polylux.dev/book/dynamic/alternatives.html",children:"Polylux"}),"."]})]})}function h(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>l,a:()=>c});var t=s(7294);const i={},o=t.createContext(i);function c(e){const n=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:c(e.components),t.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/9286a2c0.e99fa705.js b/assets/js/dbe874ba.0cfcaeb8.js similarity index 88% rename from assets/js/9286a2c0.e99fa705.js rename to assets/js/dbe874ba.0cfcaeb8.js index 5bc4bb4f8..565a3e265 100644 --- a/assets/js/9286a2c0.e99fa705.js +++ b/assets/js/dbe874ba.0cfcaeb8.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2556],{3716:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>r,default:()=>u,frontMatter:()=>s,metadata:()=>l,toc:()=>c});var i=n(5893),o=n(1151);const s={sidebar_position:5},r="Codly",l={id:"integration/codly",title:"Codly",description:"When using Codly, we should initialize it using the s.methods.append-preamble method.",source:"@site/versioned_docs/version-0.4.1/integration/codly.md",sourceDirName:"integration",slug:"/integration/codly",permalink:"/touying/docs/integration/codly",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/integration/codly.md",tags:[],version:"0.4.1",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Fletcher",permalink:"/touying/docs/integration/fletcher"},next:{title:"Ctheorems",permalink:"/touying/docs/integration/ctheorems"}},d={},c=[];function a(e){const t={code:"code",h1:"h1",img:"img",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{id:"codly",children:"Codly"}),"\n",(0,i.jsxs)(t.p,{children:["When using Codly, we should initialize it using the ",(0,i.jsx)(t.code,{children:"s.methods.append-preamble"})," method."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/codly:0.2.0": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9")\n#let s = (s.methods.append-preamble)(self: s)[\n #codly(languages: (\n rust: (name: "Rust", icon: "\\u{fa53}", color: rgb("#CE412B")),\n ))\n]\n#let (init, slides) = utils.methods(s)\n#show heading.where(level: 2): set block(below: 1em)\n#show: init\n#show: codly-init.with()\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n#slide[\n == First slide\n\n #raw(lang: "rust", block: true,\n`pub fn main() {\n println!("Hello, world!");\n}`.text)\n]\n'})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://github.com/touying-typ/touying/assets/34951714/0be2fbaf-cc03-4776-932f-259503d5e23a",alt:"image"})})]})}function u(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>l,a:()=>r});var i=n(7294);const o={},s=i.createContext(o);function r(e){const t=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),i.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1712],{8843:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>r,default:()=>u,frontMatter:()=>s,metadata:()=>l,toc:()=>c});var i=n(5893),o=n(1151);const s={sidebar_position:5},r="Codly",l={id:"integration/codly",title:"Codly",description:"When using Codly, we should initialize it using the s.methods.append-preamble method.",source:"@site/versioned_docs/version-0.4.2/integration/codly.md",sourceDirName:"integration",slug:"/integration/codly",permalink:"/touying/docs/integration/codly",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/integration/codly.md",tags:[],version:"0.4.2",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Fletcher",permalink:"/touying/docs/integration/fletcher"},next:{title:"Ctheorems",permalink:"/touying/docs/integration/ctheorems"}},d={},c=[];function a(e){const t={code:"code",h1:"h1",img:"img",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{id:"codly",children:"Codly"}),"\n",(0,i.jsxs)(t.p,{children:["When using Codly, we should initialize it using the ",(0,i.jsx)(t.code,{children:"s.methods.append-preamble"})," method."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n#import "@preview/codly:0.2.0": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9")\n#let s = (s.methods.append-preamble)(self: s)[\n #codly(languages: (\n rust: (name: "Rust", icon: "\\u{fa53}", color: rgb("#CE412B")),\n ))\n]\n#let (init, slides) = utils.methods(s)\n#show heading.where(level: 2): set block(below: 1em)\n#show: init\n#show: codly-init.with()\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n#slide[\n == First slide\n\n #raw(lang: "rust", block: true,\n`pub fn main() {\n println!("Hello, world!");\n}`.text)\n]\n'})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://github.com/touying-typ/touying/assets/34951714/0be2fbaf-cc03-4776-932f-259503d5e23a",alt:"image"})})]})}function u(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>l,a:()=>r});var i=n(7294);const o={},s=i.createContext(o);function r(e){const t=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),i.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/dd61c10c.837177d5.js b/assets/js/dd61c10c.837177d5.js new file mode 100644 index 000000000..846ac5c06 --- /dev/null +++ b/assets/js/dd61c10c.837177d5.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2231],{3595:i=>{i.exports=JSON.parse('{"title":"Utilities","description":"Some convenient utility functions.","slug":"/category/utilities","permalink":"/touying/docs/0.4.1/category/utilities","navigation":{"previous":{"title":"Touying Sections","permalink":"/touying/docs/0.4.1/progress/sections"},"next":{"title":"Object-Oriented Programming","permalink":"/touying/docs/0.4.1/utilities/oop"}}}')}}]); \ No newline at end of file diff --git a/assets/js/e52dffae.4008f589.js b/assets/js/e52dffae.4008f589.js new file mode 100644 index 000000000..78503a38e --- /dev/null +++ b/assets/js/e52dffae.4008f589.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7603],{9916:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>r});var i=n(5893),t=n(1151);const l={sidebar_position:4},o="Code Style",d={id:"code-styles",title:"Code Style",description:"Simple Style",source:"@site/versioned_docs/version-0.4.1/code-styles.md",sourceDirName:".",slug:"/code-styles",permalink:"/touying/docs/0.4.1/code-styles",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/code-styles.md",tags:[],version:"0.4.1",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Sections and Subsections",permalink:"/touying/docs/0.4.1/sections"},next:{title:"Page Layout",permalink:"/touying/docs/0.4.1/layout"}},c={},r=[{value:"Simple Style",id:"simple-style",level:2},{value:"Block Style",id:"block-style",level:2},{value:"Convention Over Configuration",id:"convention-over-configuration",level:2}];function a(e){const s={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",...(0,t.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.h1,{id:"code-style",children:"Code Style"}),"\n",(0,i.jsx)(s.h2,{id:"simple-style",children:"Simple Style"}),"\n",(0,i.jsxs)(s.p,{children:["If we only need simplicity, we can directly input content under the heading, just like writing a normal Typst document. The heading here serves to divide the pages, and we can use commands like ",(0,i.jsx)(s.code,{children:"#pause"})," to achieve animation effects."]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/f5bdbf8f-7bf9-45fd-9923-0fa5d66450b2",alt:"image"})}),"\n",(0,i.jsxs)(s.p,{children:["You can use an empty heading ",(0,i.jsx)(s.code,{children:"=="})," to create a new page. This skill also helps clear the continuation of the previous title."]}),"\n",(0,i.jsxs)(s.p,{children:["PS: We can use the ",(0,i.jsx)(s.code,{children:"#slides-end"})," marker to signify the end of ",(0,i.jsx)(s.code,{children:"#show: slides"}),"."]}),"\n",(0,i.jsx)(s.h2,{id:"block-style",children:"Block Style"}),"\n",(0,i.jsxs)(s.p,{children:["Many times, using simple style alone cannot achieve all the functions we need. For more powerful features and clearer structure, we can also use block style in the form of ",(0,i.jsx)(s.code,{children:"#slide[...]"}),". The ",(0,i.jsx)(s.code,{children:"#slide"})," function needs to be unpacked using the syntax ",(0,i.jsx)(s.code,{children:"#let (slide, empty-slide) = utils.slides(s)"})," to be used correctly after ",(0,i.jsx)(s.code,{children:"#show: slides"}),"."]}),"\n",(0,i.jsx)(s.p,{children:"For example, the previous example can be transformed into:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register()\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\n#slide[\n Hello, Touying!\n\n #pause\n\n Hello, Typst!\n]\n'})}),"\n",(0,i.jsxs)(s.p,{children:["and ",(0,i.jsx)(s.code,{children:"#empty-slide[]"})," to create an empty slide without header and footer."]}),"\n",(0,i.jsx)(s.p,{children:"There are many advantages to doing this:"}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsxs)(s.li,{children:["Many times, we not only need the default ",(0,i.jsx)(s.code,{children:"#slide[...]"})," but also special ",(0,i.jsx)(s.code,{children:"slide"})," functions like ",(0,i.jsx)(s.code,{children:"#focus-slide[...]"}),"."]}),"\n",(0,i.jsxs)(s.li,{children:["Different themes' ",(0,i.jsx)(s.code,{children:"#slide[...]"})," functions may have more parameters than the default, such as the university theme's ",(0,i.jsx)(s.code,{children:"#slide[...]"})," function having a ",(0,i.jsx)(s.code,{children:"subtitle"})," parameter."]}),"\n",(0,i.jsxs)(s.li,{children:["Only ",(0,i.jsx)(s.code,{children:"slide"})," functions can use the callback-style content block to achieve complex animation effects with ",(0,i.jsx)(s.code,{children:"#only"})," and ",(0,i.jsx)(s.code,{children:"#uncover"})," functions."]}),"\n",(0,i.jsxs)(s.li,{children:["It has a clearer structure. By identifying ",(0,i.jsx)(s.code,{children:"#slide[...]"})," blocks, we can easily distinguish the specific pagination effects of slides."]}),"\n"]}),"\n",(0,i.jsx)(s.h2,{id:"convention-over-configuration",children:"Convention Over Configuration"}),"\n",(0,i.jsxs)(s.p,{children:["You may have noticed that when using the simple theme, using a level-one heading automatically creates a new section slide. This is because the simple theme registers an ",(0,i.jsx)(s.code,{children:"s.methods.touying-new-section-slide"})," method, so Touying will automatically call this method."]}),"\n",(0,i.jsx)(s.p,{children:"If we don't want it to automatically create such a section slide, we can delete this method:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register()\n#(s.methods.touying-new-section-slide = none)\n#let (init, slides) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/17a89a59-9491-4e1f-95c0-09a22105ab35",alt:"image"})}),"\n",(0,i.jsx)(s.p,{children:"As you can see, there are only two pages left, and the default section slide is gone."}),"\n",(0,i.jsx)(s.p,{children:"Similarly, we can register a new section slide:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register()\n#(s.methods.touying-new-section-slide = (self: none, section, ..args) => {\n self = utils.empty-page(self)\n (s.methods.touying-slide)(self: self, section: section, {\n set align(center + horizon)\n set text(size: 2em, fill: s.colors.primary, style: "italic", weight: "bold")\n section\n }, ..args)\n})\n#let (init, slides, touying-outline) = utils.methods(s)\n#show: init\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/5305efda-0cd4-42eb-9f2e-89abc30b6ca2",alt:"image"})}),"\n",(0,i.jsxs)(s.p,{children:["Similarly, we can modify ",(0,i.jsx)(s.code,{children:"s.methods.touying-new-subsection-slide"})," to do the same for ",(0,i.jsx)(s.code,{children:"subsection"}),"."]}),"\n",(0,i.jsxs)(s.p,{children:["In fact, besides ",(0,i.jsx)(s.code,{children:"s.methods.touying-new-section-slide"}),", another special ",(0,i.jsx)(s.code,{children:"slide"})," function is the ",(0,i.jsx)(s.code,{children:"s.methods.slide"})," function, which will be called by default in simple style when ",(0,i.jsx)(s.code,{children:"#slide[...]"})," is not explicitly used."]}),"\n",(0,i.jsxs)(s.p,{children:["Also, since ",(0,i.jsx)(s.code,{children:"#slide[...]"})," is registered in ",(0,i.jsx)(s.code,{children:'s.slides = ("slide",)'}),", the ",(0,i.jsx)(s.code,{children:"section"}),", ",(0,i.jsx)(s.code,{children:"subsection"}),", and ",(0,i.jsx)(s.code,{children:"title"})," parameters will be automatically passed, while others like ",(0,i.jsx)(s.code,{children:"#focus-slide[...]"})," will not automatically receive these three parameters."]}),"\n",(0,i.jsxs)(s.admonition,{title:"Principle",type:"tip",children:[(0,i.jsxs)(s.p,{children:["In fact, you can also not use ",(0,i.jsx)(s.code,{children:"#show: slides"})," and ",(0,i.jsx)(s.code,{children:"utils.slides(s)"}),", but only use ",(0,i.jsx)(s.code,{children:"utils.methods(s)"}),", for example:"]}),(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.simple.register()\n#let (init, touying-outline, slide) = utils.methods(s)\n#show: init\n\n#slide(section: [Title], title: [First Slide])[\n Hello, Touying!\n\n #pause\n\n Hello, Typst!\n]\n'})}),(0,i.jsxs)(s.p,{children:["Here, you need to manually pass in ",(0,i.jsx)(s.code,{children:"section"}),", ",(0,i.jsx)(s.code,{children:"subsection"}),", and ",(0,i.jsx)(s.code,{children:"title"}),", but it will have better performance, suitable for cases where faster performance is needed, such as when there are more than dozens or hundreds of pages."]})]})]})}function h(e={}){const{wrapper:s}={...(0,t.a)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>d,a:()=>o});var i=n(7294);const t={},l=i.createContext(t);function o(e){const s=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function d(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),i.createElement(l.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/ed5e9b8d.ff97aa3e.js b/assets/js/ed5e9b8d.ff97aa3e.js new file mode 100644 index 000000000..c17adce03 --- /dev/null +++ b/assets/js/ed5e9b8d.ff97aa3e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8207],{2307:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>c});var s=i(5893),t=i(1151);const l={sidebar_position:3},o="Dewdrop Theme",d={id:"themes/dewdrop",title:"Dewdrop Theme",description:"image",source:"@site/versioned_docs/version-0.4.1/themes/dewdrop.md",sourceDirName:"themes",slug:"/themes/dewdrop",permalink:"/touying/docs/0.4.1/themes/dewdrop",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/themes/dewdrop.md",tags:[],version:"0.4.1",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Metropolis Theme",permalink:"/touying/docs/0.4.1/themes/metropolis"},next:{title:"University Theme",permalink:"/touying/docs/0.4.1/themes/university"}},r={},c=[{value:"Initialization",id:"initialization",level:2},{value:"Color Theme",id:"color-theme",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"Special Functions",id:"special-functions",level:2},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",hr:"hr",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"dewdrop-theme",children:"Dewdrop Theme"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/0b5b2bb2-c6ec-45c0-9cea-0af2ed896bba",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["This theme takes inspiration from Zhibo Wang's ",(0,s.jsx)(n.a,{href:"https://github.com/zbowang/BeamerTheme",children:"BeamerTheme"})," and has been modified by ",(0,s.jsx)(n.a,{href:"https://github.com/OrangeX4",children:"OrangeX4"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["The Dewdrop theme features an elegantly designed navigation, including two modes: ",(0,s.jsx)(n.code,{children:"sidebar"})," and ",(0,s.jsx)(n.code,{children:"mini-slides"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,s.jsx)(n.p,{children:"You can initialize it using the following code:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.dewdrop.register(\n aspect-ratio: "16-9",\n footer: [Dewdrop],\n navigation: "mini-slides",\n // navigation: "sidebar",\n // navigation: none,\n)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"register"})," function takes the following parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"aspect-ratio"}),': The aspect ratio of the slides, either "16-9" or "4-3," defaulting to "16-9."']}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"navigation"}),": The navigation bar style, which can be ",(0,s.jsx)(n.code,{children:'"sidebar"'}),", ",(0,s.jsx)(n.code,{children:'"mini-slides"'}),", or ",(0,s.jsx)(n.code,{children:"none"}),", defaulting to ",(0,s.jsx)(n.code,{children:'"sidebar"'}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"sidebar"}),": Sidebar navigation settings, defaulting to ",(0,s.jsx)(n.code,{children:"(width: 10em)"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"mini-slides"}),": Mini-slides settings, defaulting to ",(0,s.jsx)(n.code,{children:"(height: 2em, x: 2em, section: false, subsection: true)"}),".","\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"height"}),": The height of mini-slides, defaulting to ",(0,s.jsx)(n.code,{children:"2em"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"x"}),": Padding on the x-axis for mini-slides, defaulting to ",(0,s.jsx)(n.code,{children:"2em"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"section"}),": Whether to display slides after the section and before the subsection, defaulting to ",(0,s.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"subsection"}),": Whether to split mini-slides based on subsections or compress them into one line, defaulting to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer"}),": Content displayed in the footer, defaulting to ",(0,s.jsx)(n.code,{children:"[]"}),", or it can be passed as a function like ",(0,s.jsx)(n.code,{children:"self => self.info.author"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer-right"}),": Content displayed on the right side of the footer, defaulting to ",(0,s.jsx)(n.code,{children:'states.slide-counter.display() + " / " + states.last-slide-number'}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"primary"}),": Primary color, defaulting to ",(0,s.jsx)(n.code,{children:'rgb("#0c4842")'}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"alpha"}),": Transparency, defaulting to ",(0,s.jsx)(n.code,{children:"70%"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["The Dewdrop theme also provides an ",(0,s.jsx)(n.code,{children:"#alert[..]"})," function, which you can use with ",(0,s.jsx)(n.code,{children:"#show strong: alert"})," using the ",(0,s.jsx)(n.code,{children:"*alert text*"})," syntax."]}),"\n",(0,s.jsx)(n.h2,{id:"color-theme",children:"Color Theme"}),"\n",(0,s.jsx)(n.p,{children:"Dewdrop uses the following default color theme:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.colors)(\n self: s,\n neutral-darkest: rgb("#000000"),\n neutral-dark: rgb("#202020"),\n neutral-light: rgb("#f3f3f3"),\n neutral-lightest: rgb("#ffffff"),\n primary: primary,\n)\n'})}),"\n",(0,s.jsxs)(n.p,{children:["You can modify this color theme using ",(0,s.jsx)(n.code,{children:"#let s = (s.methods.colors)(self: s, ..)"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,s.jsx)(n.p,{children:"The Dewdrop theme provides a variety of custom slide functions:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#title-slide(extra: none, ..args)\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"title-slide"})," reads information from ",(0,s.jsx)(n.code,{children:"self.info"})," for display, and you can also pass in an ",(0,s.jsx)(n.code,{children:"extra"})," parameter to display additional information."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // Dewdrop theme\n footer: auto,\n)[\n ...\n]\n"})}),"\n",(0,s.jsx)(n.p,{children:"A default slide with navigation and footer, where the footer is what you set."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#focus-slide[\n ...\n]\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Used to draw attention, with the background color set to ",(0,s.jsx)(n.code,{children:"self.colors.primary"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"special-functions",children:"Special Functions"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#d-outline(enum-args: (:), list-args: (:), cover: true)\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Displays the current table of contents. The ",(0,s.jsx)(n.code,{children:"cover"})," parameter specifies whether to hide sections in an inactive state."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#d-sidebar()\n"})}),"\n",(0,s.jsx)(n.p,{children:"An internal function used to display the sidebar."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#d-mini-slides()\n"})}),"\n",(0,s.jsx)(n.p,{children:"An internal function used to display mini-slides."}),"\n",(0,s.jsxs)(n.h2,{id:"slides-function",children:[(0,s.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"slides"})," function has the following parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"title-slide"}),": Defaults to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"outline-slide"}),": Defaults to ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"slide-level"}),": Defaults to ",(0,s.jsx)(n.code,{children:"2"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["You can set these using ",(0,s.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["PS: You can modify the outline title using ",(0,s.jsx)(n.code,{children:"#(s.outline-title = [Outline])"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["And the function of automatically adding ",(0,s.jsx)(n.code,{children:"new-section-slide"})," can be turned off by ",(0,s.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.dewdrop.register(aspect-ratio: "16-9", footer: [Dewdrop])\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/09ddfb40-4f97-4062-8261-23f87690c33e",alt:"image"})}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.dewdrop.register(\n aspect-ratio: "16-9",\n footer: [Dewdrop],\n navigation: "mini-slides",\n // navigation: none,\n)\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= Section A\n\n== Subsection A.1\n\n#slide[\n A slide with equation:\n\n $ x_(n+1) = (x_n + a/x_n) / 2 $\n]\n\n== Subsection A.2\n\n#slide[\n A slide without a title but with *important* infos\n]\n\n= Section B\n\n== Subsection B.1\n\n#slide[\n #lorem(80)\n]\n\n#focus-slide[\n Wake up!\n]\n\n== Subsection B.2\n\n#slide[\n We can use `#pause` to #pause display something later.\n\n #pause\n \n Just like this.\n\n #meanwhile\n \n Meanwhile, #pause we can also use `#meanwhile` to #pause display other content synchronously.\n]\n\n// appendix by freezing last-slide-number\n#let s = (s.methods.appendix)(self: s)\n#let (slide, empty-slide) = utils.slides(s)\n\n= Appendix\n\n=== Appendix\n\n#slide[\n Please pay attention to the current slide number.\n]\n'})})]})}function h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>d,a:()=>o});var s=i(7294);const t={},l=s.createContext(t);function o(e){const n=s.useContext(l);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),s.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f1ad31ea.9d7242c8.js b/assets/js/f1ad31ea.9d7242c8.js new file mode 100644 index 000000000..e38353297 --- /dev/null +++ b/assets/js/f1ad31ea.9d7242c8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7977],{5055:e=>{e.exports=JSON.parse('{"title":"Dynamic Slides","description":"To create animations in PDF, we need to create multiple slightly different pages for the same slide. This allows animation by switching between these pages, and we refer to these pages as subslides.","slug":"/category/dynamic-slides","permalink":"/touying/docs/0.4.1/category/dynamic-slides","navigation":{"previous":{"title":"Multi-File Architecture","permalink":"/touying/docs/0.4.1/multi-file"},"next":{"title":"Simple Animations","permalink":"/touying/docs/0.4.1/dynamic/simple"}}}')}}]); \ No newline at end of file diff --git a/assets/js/3c6c49a5.6fdf533e.js b/assets/js/f2a3c69a.6d41bd19.js similarity index 91% rename from assets/js/3c6c49a5.6fdf533e.js rename to assets/js/f2a3c69a.6d41bd19.js index a94565d61..882549344 100644 --- a/assets/js/3c6c49a5.6fdf533e.js +++ b/assets/js/f2a3c69a.6d41bd19.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9799],{9342:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>u,contentTitle:()=>r,default:()=>a,frontMatter:()=>o,metadata:()=>c,toc:()=>l});var t=n(5893),i=n(1151);const o={sidebar_position:2},r="Touying Sections",c={id:"progress/sections",title:"Touying Sections",description:"Touying maintains its own sections state to record the sections and subsections of slides.",source:"@site/versioned_docs/version-0.4.1/progress/sections.md",sourceDirName:"progress",slug:"/progress/sections",permalink:"/touying/docs/progress/sections",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/progress/sections.md",tags:[],version:"0.4.1",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Touying Counters",permalink:"/touying/docs/progress/counters"},next:{title:"Utilities",permalink:"/touying/docs/category/utilities"}},u={},l=[{value:"touying-outline",id:"touying-outline",level:2},{value:"touying-final-sections",id:"touying-final-sections",level:2},{value:"touying-progress-with-sections",id:"touying-progress-with-sections",level:2}];function d(e){const s={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.h1,{id:"touying-sections",children:"Touying Sections"}),"\n",(0,t.jsx)(s.p,{children:"Touying maintains its own sections state to record the sections and subsections of slides."}),"\n",(0,t.jsx)(s.h2,{id:"touying-outline",children:"touying-outline"}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"#touying-outline(enum-args: (:), padding: 0pt)"})," is used to display a simple outline."]}),"\n",(0,t.jsxs)(s.p,{children:["Of course, you can now just use ",(0,t.jsx)(s.code,{children:"#outline(indent: 2em, title: none)"}),"."]}),"\n",(0,t.jsx)(s.h2,{id:"touying-final-sections",children:"touying-final-sections"}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"#states.touying-final-sections(final-sections => ..)"})," is used to customize the display of the outline."]}),"\n",(0,t.jsx)(s.h2,{id:"touying-progress-with-sections",children:"touying-progress-with-sections"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-typst",children:"#states.touying-progress-with-sections((current-sections: .., final-sections: .., current-slide-number: .., last-slide-number: ..) => ..)\n"})}),"\n",(0,t.jsx)(s.p,{children:"This is the most powerful one, allowing you to build any complex progress display with its functionalities."})]})}function a(e={}){const{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>c,a:()=>r});var t=n(7294);const i={},o=t.createContext(i);function r(e){const s=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function c(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[7510],{2195:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>u,contentTitle:()=>r,default:()=>a,frontMatter:()=>o,metadata:()=>c,toc:()=>l});var t=n(5893),i=n(1151);const o={sidebar_position:2},r="Touying Sections",c={id:"progress/sections",title:"Touying Sections",description:"Touying maintains its own sections state to record the sections and subsections of slides.",source:"@site/versioned_docs/version-0.4.2/progress/sections.md",sourceDirName:"progress",slug:"/progress/sections",permalink:"/touying/docs/progress/sections",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/progress/sections.md",tags:[],version:"0.4.2",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Touying Counters",permalink:"/touying/docs/progress/counters"},next:{title:"Utilities",permalink:"/touying/docs/category/utilities"}},u={},l=[{value:"touying-outline",id:"touying-outline",level:2},{value:"touying-final-sections",id:"touying-final-sections",level:2},{value:"touying-progress-with-sections",id:"touying-progress-with-sections",level:2}];function d(e){const s={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.h1,{id:"touying-sections",children:"Touying Sections"}),"\n",(0,t.jsx)(s.p,{children:"Touying maintains its own sections state to record the sections and subsections of slides."}),"\n",(0,t.jsx)(s.h2,{id:"touying-outline",children:"touying-outline"}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"#touying-outline(enum-args: (:), padding: 0pt)"})," is used to display a simple outline."]}),"\n",(0,t.jsxs)(s.p,{children:["Of course, you can now just use ",(0,t.jsx)(s.code,{children:"#outline(indent: 2em, title: none)"}),"."]}),"\n",(0,t.jsx)(s.h2,{id:"touying-final-sections",children:"touying-final-sections"}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"#states.touying-final-sections(final-sections => ..)"})," is used to customize the display of the outline."]}),"\n",(0,t.jsx)(s.h2,{id:"touying-progress-with-sections",children:"touying-progress-with-sections"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-typst",children:"#states.touying-progress-with-sections((current-sections: .., final-sections: .., current-slide-number: .., last-slide-number: ..) => ..)\n"})}),"\n",(0,t.jsx)(s.p,{children:"This is the most powerful one, allowing you to build any complex progress display with its functionalities."})]})}function a(e={}){const{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>c,a:()=>r});var t=n(7294);const i={},o=t.createContext(i);function r(e){const s=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function c(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f3a7b3b2.91e1d92b.js b/assets/js/f3a7b3b2.758ef381.js similarity index 99% rename from assets/js/f3a7b3b2.91e1d92b.js rename to assets/js/f3a7b3b2.758ef381.js index 5f856f844..0f2cf5a93 100644 --- a/assets/js/f3a7b3b2.91e1d92b.js +++ b/assets/js/f3a7b3b2.758ef381.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9916],{1075:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>r,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var s=n(5893),i=n(1151);const o={sidebar_position:6},l="Global Settings",a={id:"global-settings",title:"Global Settings",description:"Global Styles",source:"@site/docs/global-settings.md",sourceDirName:".",slug:"/global-settings",permalink:"/touying/docs/next/global-settings",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/global-settings.md",tags:[],version:"current",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"tutorialSidebar",previous:{title:"Page Layout",permalink:"/touying/docs/next/layout"},next:{title:"Multi-File Architecture",permalink:"/touying/docs/next/multi-file"}},r={},d=[{value:"Global Styles",id:"global-styles",level:2},{value:"Global Information",id:"global-information",level:2},{value:"State Initialization",id:"state-initialization",level:2}];function c(e){const t={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"global-settings",children:"Global Settings"}),"\n",(0,s.jsx)(t.h2,{id:"global-styles",children:"Global Styles"}),"\n",(0,s.jsxs)(t.p,{children:["For Touying, global styles refer to set rules or show rules that need to be applied everywhere, such as ",(0,s.jsx)(t.code,{children:"#set text(size: 20pt)"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Themes in Touying encapsulate some of their own global styles, which are placed in ",(0,s.jsx)(t.code,{children:"#show: init"}),". For example, the university theme encapsulates the following:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"self.methods.init = (self: none, body) => {\n set text(size: 25pt)\n show footnote.entry: set text(size: .6em)\n body\n}\n"})}),"\n",(0,s.jsxs)(t.p,{children:["If you are not a theme creator but want to add your own global styles to your slides, you can simply place them after ",(0,s.jsx)(t.code,{children:"#show: init"})," and before ",(0,s.jsx)(t.code,{children:"#show: slides"}),". For example, the metropolis theme recommends adding the following global styles:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'#let s = themes.metropolis.register(aspect-ratio: "16-9")\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n// global styles\n#set text(font: "Fira Sans", weight: "light", size: 20pt)\n#show math.equation: set text(font: "Fira Math")\n#set strong(delta: 100)\n#set par(justify: true)\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,s.jsxs)(t.p,{children:["However, note that you should not use ",(0,s.jsx)(t.code,{children:"#set page(..)"}),". Instead, modify ",(0,s.jsx)(t.code,{children:"s.page-args"})," and ",(0,s.jsx)(t.code,{children:"s.padding"}),", for example:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"#(s.page-args += (\n margin: (x: 0em, y: 2em),\n header: align(top)[Header],\n footer: align(bottom)[Footer],\n header-ascent: 0em,\n footer-descent: 0em,\n))\n#(s.padding += (x: 4em, y: 0em))\n"})}),"\n",(0,s.jsx)(t.h2,{id:"global-information",children:"Global Information"}),"\n",(0,s.jsx)(t.p,{children:"Like Beamer, Touying, through an OOP-style unified API design, can help you better maintain global information, allowing you to easily switch between different themes. Global information is a typical example of this."}),"\n",(0,s.jsx)(t.p,{children:"You can set the title, subtitle, author, date, and institution information for slides using:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n"})}),"\n",(0,s.jsxs)(t.p,{children:["In subsequent slides, you can access them through ",(0,s.jsx)(t.code,{children:"s.info"})," or ",(0,s.jsx)(t.code,{children:"self.info"}),"."]}),"\n",(0,s.jsx)(t.p,{children:"This information is generally used in the title-slide, header, and footer of the theme, for example:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n'})}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"date"})," can accept ",(0,s.jsx)(t.code,{children:"datetime"})," format or ",(0,s.jsx)(t.code,{children:"content"})," format, and the display format for the ",(0,s.jsx)(t.code,{children:"datetime"})," format can be changed using:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'#let s = (s.methods.datetime-format)(self: s, "[year]-[month]-[day]")\n'})}),"\n",(0,s.jsxs)(t.admonition,{title:"Principle",type:"tip",children:[(0,s.jsx)(t.p,{children:"Here, we will introduce a bit of OOP concept in Touying."}),(0,s.jsxs)(t.p,{children:["You should know that Typst is a typesetting language that supports incremental rendering, which means Typst caches the results of previous function calls. This requires that Typst consists of pure functions, meaning functions that do not change external variables. Thus, it is challenging to modify a global variable in the true sense, even with the use of ",(0,s.jsx)(t.code,{children:"state"})," or ",(0,s.jsx)(t.code,{children:"counter"}),". This would require the use of ",(0,s.jsx)(t.code,{children:"locate"})," with callback functions to obtain the values inside, and this approach would have a significant impact on performance."]}),(0,s.jsxs)(t.p,{children:["Touying does not use ",(0,s.jsx)(t.code,{children:"state"})," or ",(0,s.jsx)(t.code,{children:"counter"})," and does not violate the principle of pure functions in Typst. Instead, it uses a clever approach in an object-oriented style, maintaining a global singleton ",(0,s.jsx)(t.code,{children:"s"}),". In Touying, an object refers to a Typst dictionary with its own member variables and methods. We agree that methods all have a named parameter ",(0,s.jsx)(t.code,{children:"self"})," for passing the object itself, and methods are placed in the ",(0,s.jsx)(t.code,{children:".methods"})," domain. With this concept, it becomes easier to write methods to update ",(0,s.jsx)(t.code,{children:"info"}),":"]}),(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"#let s = (\n info: (:),\n methods: (\n // update info\n info: (self: none, ..args) => {\n self.info += args.named()\n self\n },\n )\n)\n\n#let s = (s.methods.info)(self: s, title: [title])\n\nTitle is #s.info.title\n"})}),(0,s.jsxs)(t.p,{children:["Now you can understand the purpose of the ",(0,s.jsx)(t.code,{children:"utils.methods()"})," function: to bind ",(0,s.jsx)(t.code,{children:"self"})," to all methods of ",(0,s.jsx)(t.code,{children:"s"})," and return it, simplifying the subsequent usage through unpacking syntax."]}),(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"#let (init, slides, alert) = utils.methods(s)\n"})})]}),"\n",(0,s.jsx)(t.h2,{id:"state-initialization",children:"State Initialization"}),"\n",(0,s.jsxs)(t.p,{children:["In general, the two ways mentioned above are sufficient for adding global settings. However, there are still situations where we need to initialize counters or states. If you place this code before ",(0,s.jsx)(t.code,{children:"#show: slides"}),", a blank page will be created, which is something we don't want to see. In such cases, you can use the ",(0,s.jsx)(t.code,{children:"s.methods.append-preamble"})," method. For example, when using the codly package:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/codly:0.2.0": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9")\n#let s = (s.methods.append-preamble)(self: s)[\n #codly(languages: (\n rust: (name: "Rust", icon: "\\u{fa53}", color: rgb("#CE412B")),\n ))\n]\n#let (init, slides) = utils.methods(s)\n#show heading.where(level: 2): set block(below: 1em)\n#show: init\n#show: codly-init.with()\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n#slide[\n == First slide\n\n #raw(lang: "rust", block: true,\n`pub fn main() {\n println!("Hello, world!");\n}`.text)\n]\n'})}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{src:"https://github.com/touying-typ/touying/assets/34951714/0be2fbaf-cc03-4776-932f-259503d5e23a",alt:"image"})}),"\n",(0,s.jsx)(t.p,{children:"Or when configuring Pdfpc:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'// Pdfpc configuration\n// typst query --root . ./example.typ --field value --one "" > ./example.pdfpc\n#let s = (s.methods.append-preamble)(self: s, pdfpc.config(\n duration-minutes: 30,\n start-time: datetime(hour: 14, minute: 10, second: 0),\n end-time: datetime(hour: 14, minute: 40, second: 0),\n last-minutes: 5,\n note-font-size: 12,\n disable-markdown: false,\n default-transition: (\n type: "push",\n duration-seconds: 2,\n angle: ltr,\n alignment: "vertical",\n direction: "inward",\n ),\n))\n'})})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>l});var s=n(7294);const i={},o=s.createContext(i);function l(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9916],{1075:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>r,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var s=n(5893),i=n(1151);const o={sidebar_position:6},l="Global Settings",a={id:"global-settings",title:"Global Settings",description:"Global Styles",source:"@site/docs/global-settings.md",sourceDirName:".",slug:"/global-settings",permalink:"/touying/docs/next/global-settings",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/global-settings.md",tags:[],version:"current",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"tutorialSidebar",previous:{title:"Page Layout",permalink:"/touying/docs/next/layout"},next:{title:"Multi-File Architecture",permalink:"/touying/docs/next/multi-file"}},r={},d=[{value:"Global Styles",id:"global-styles",level:2},{value:"Global Information",id:"global-information",level:2},{value:"State Initialization",id:"state-initialization",level:2}];function c(e){const t={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"global-settings",children:"Global Settings"}),"\n",(0,s.jsx)(t.h2,{id:"global-styles",children:"Global Styles"}),"\n",(0,s.jsxs)(t.p,{children:["For Touying, global styles refer to set rules or show rules that need to be applied everywhere, such as ",(0,s.jsx)(t.code,{children:"#set text(size: 20pt)"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Themes in Touying encapsulate some of their own global styles, which are placed in ",(0,s.jsx)(t.code,{children:"#show: init"}),". For example, the university theme encapsulates the following:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"self.methods.init = (self: none, body) => {\n set text(size: 25pt)\n show footnote.entry: set text(size: .6em)\n body\n}\n"})}),"\n",(0,s.jsxs)(t.p,{children:["If you are not a theme creator but want to add your own global styles to your slides, you can simply place them after ",(0,s.jsx)(t.code,{children:"#show: init"})," and before ",(0,s.jsx)(t.code,{children:"#show: slides"}),". For example, the metropolis theme recommends adding the following global styles:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'#let s = themes.metropolis.register(aspect-ratio: "16-9")\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n// global styles\n#set text(font: "Fira Sans", weight: "light", size: 20pt)\n#show math.equation: set text(font: "Fira Math")\n#set strong(delta: 100)\n#set par(justify: true)\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,s.jsxs)(t.p,{children:["However, note that you should not use ",(0,s.jsx)(t.code,{children:"#set page(..)"}),". Instead, modify ",(0,s.jsx)(t.code,{children:"s.page-args"})," and ",(0,s.jsx)(t.code,{children:"s.padding"}),", for example:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"#(s.page-args += (\n margin: (x: 0em, y: 2em),\n header: align(top)[Header],\n footer: align(bottom)[Footer],\n header-ascent: 0em,\n footer-descent: 0em,\n))\n#(s.padding += (x: 4em, y: 0em))\n"})}),"\n",(0,s.jsx)(t.h2,{id:"global-information",children:"Global Information"}),"\n",(0,s.jsx)(t.p,{children:"Like Beamer, Touying, through an OOP-style unified API design, can help you better maintain global information, allowing you to easily switch between different themes. Global information is a typical example of this."}),"\n",(0,s.jsx)(t.p,{children:"You can set the title, subtitle, author, date, and institution information for slides using:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n"})}),"\n",(0,s.jsxs)(t.p,{children:["In subsequent slides, you can access them through ",(0,s.jsx)(t.code,{children:"s.info"})," or ",(0,s.jsx)(t.code,{children:"self.info"}),"."]}),"\n",(0,s.jsx)(t.p,{children:"This information is generally used in the title-slide, header, and footer of the theme, for example:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n'})}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"date"})," can accept ",(0,s.jsx)(t.code,{children:"datetime"})," format or ",(0,s.jsx)(t.code,{children:"content"})," format, and the display format for the ",(0,s.jsx)(t.code,{children:"datetime"})," format can be changed using:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'#let s = (s.methods.datetime-format)(self: s, "[year]-[month]-[day]")\n'})}),"\n",(0,s.jsxs)(t.admonition,{title:"Principle",type:"tip",children:[(0,s.jsx)(t.p,{children:"Here, we will introduce a bit of OOP concept in Touying."}),(0,s.jsxs)(t.p,{children:["You should know that Typst is a typesetting language that supports incremental rendering, which means Typst caches the results of previous function calls. This requires that Typst consists of pure functions, meaning functions that do not change external variables. Thus, it is challenging to modify a global variable in the true sense, even with the use of ",(0,s.jsx)(t.code,{children:"state"})," or ",(0,s.jsx)(t.code,{children:"counter"}),". This would require the use of ",(0,s.jsx)(t.code,{children:"locate"})," with callback functions to obtain the values inside, and this approach would have a significant impact on performance."]}),(0,s.jsxs)(t.p,{children:["Touying does not use ",(0,s.jsx)(t.code,{children:"state"})," or ",(0,s.jsx)(t.code,{children:"counter"})," and does not violate the principle of pure functions in Typst. Instead, it uses a clever approach in an object-oriented style, maintaining a global singleton ",(0,s.jsx)(t.code,{children:"s"}),". In Touying, an object refers to a Typst dictionary with its own member variables and methods. We agree that methods all have a named parameter ",(0,s.jsx)(t.code,{children:"self"})," for passing the object itself, and methods are placed in the ",(0,s.jsx)(t.code,{children:".methods"})," domain. With this concept, it becomes easier to write methods to update ",(0,s.jsx)(t.code,{children:"info"}),":"]}),(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"#let s = (\n info: (:),\n methods: (\n // update info\n info: (self: none, ..args) => {\n self.info += args.named()\n self\n },\n )\n)\n\n#let s = (s.methods.info)(self: s, title: [title])\n\nTitle is #s.info.title\n"})}),(0,s.jsxs)(t.p,{children:["Now you can understand the purpose of the ",(0,s.jsx)(t.code,{children:"utils.methods()"})," function: to bind ",(0,s.jsx)(t.code,{children:"self"})," to all methods of ",(0,s.jsx)(t.code,{children:"s"})," and return it, simplifying the subsequent usage through unpacking syntax."]}),(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"#let (init, slides, alert) = utils.methods(s)\n"})})]}),"\n",(0,s.jsx)(t.h2,{id:"state-initialization",children:"State Initialization"}),"\n",(0,s.jsxs)(t.p,{children:["In general, the two ways mentioned above are sufficient for adding global settings. However, there are still situations where we need to initialize counters or states. If you place this code before ",(0,s.jsx)(t.code,{children:"#show: slides"}),", a blank page will be created, which is something we don't want to see. In such cases, you can use the ",(0,s.jsx)(t.code,{children:"s.methods.append-preamble"})," method. For example, when using the codly package:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n#import "@preview/codly:0.2.0": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9")\n#let s = (s.methods.append-preamble)(self: s)[\n #codly(languages: (\n rust: (name: "Rust", icon: "\\u{fa53}", color: rgb("#CE412B")),\n ))\n]\n#let (init, slides) = utils.methods(s)\n#show heading.where(level: 2): set block(below: 1em)\n#show: init\n#show: codly-init.with()\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n#slide[\n == First slide\n\n #raw(lang: "rust", block: true,\n`pub fn main() {\n println!("Hello, world!");\n}`.text)\n]\n'})}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{src:"https://github.com/touying-typ/touying/assets/34951714/0be2fbaf-cc03-4776-932f-259503d5e23a",alt:"image"})}),"\n",(0,s.jsx)(t.p,{children:"Or when configuring Pdfpc:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'// Pdfpc configuration\n// typst query --root . ./example.typ --field value --one "" > ./example.pdfpc\n#let s = (s.methods.append-preamble)(self: s, pdfpc.config(\n duration-minutes: 30,\n start-time: datetime(hour: 14, minute: 10, second: 0),\n end-time: datetime(hour: 14, minute: 40, second: 0),\n last-minutes: 5,\n note-font-size: 12,\n disable-markdown: false,\n default-transition: (\n type: "push",\n duration-seconds: 2,\n angle: ltr,\n alignment: "vertical",\n direction: "inward",\n ),\n))\n'})})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>l});var s=n(7294);const i={},o=s.createContext(i);function l(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/77a6cbd2.b11bcc8d.js b/assets/js/f5d6ba2d.bbcd8f7c.js similarity index 95% rename from assets/js/77a6cbd2.b11bcc8d.js rename to assets/js/f5d6ba2d.bbcd8f7c.js index cde64a7bc..020c2cc69 100644 --- a/assets/js/77a6cbd2.b11bcc8d.js +++ b/assets/js/f5d6ba2d.bbcd8f7c.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1537],{3350:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>a});var s=i(5893),t=i(1151);const l={sidebar_position:5},o="Aqua Theme",d={id:"themes/aqua",title:"Aqua Theme",description:"image",source:"@site/versioned_docs/version-0.4.1/themes/aqua.md",sourceDirName:"themes",slug:"/themes/aqua",permalink:"/touying/docs/themes/aqua",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/themes/aqua.md",tags:[],version:"0.4.1",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"University Theme",permalink:"/touying/docs/themes/university"},next:{title:"Creating Your Own Theme",permalink:"/touying/docs/build-your-own-theme"}},r={},a=[{value:"Initialization",id:"initialization",level:2},{value:"Color Themes",id:"color-themes",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",hr:"hr",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"aqua-theme",children:"Aqua Theme"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/5f9b3c99-a22a-4f3d-a266-93dd75997593",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["This theme is created by ",(0,s.jsx)(n.a,{href:"https://github.com/pride7",children:"@pride7"}),", featuring beautiful backgrounds made with Typst's visualization capabilities."]}),"\n",(0,s.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,s.jsx)(n.p,{children:"You can initialize it with the following code:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.aqua.register(aspect-ratio: "16-9", lang: "en")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, outline-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,s.jsxs)(n.p,{children:["Where ",(0,s.jsx)(n.code,{children:"register"})," takes parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"aspect-ratio"}),': The aspect ratio of slides, either "16-9" or "4-3", default is "16-9".']}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer"}),": Content shown on the right side of the footer, default is ",(0,s.jsx)(n.code,{children:"states.slide-counter.display()"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"lang"}),": Language configuration, currently supports ",(0,s.jsx)(n.code,{children:'"en"'})," and ",(0,s.jsx)(n.code,{children:'"zh"'}),", default is ",(0,s.jsx)(n.code,{children:'"en"'}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Aqua theme also provides an ",(0,s.jsx)(n.code,{children:"#alert[..]"})," function, which you can utilize with ",(0,s.jsx)(n.code,{children:"#show strong: alert"})," using ",(0,s.jsx)(n.code,{children:"*alert text*"})," syntax."]}),"\n",(0,s.jsx)(n.h2,{id:"color-themes",children:"Color Themes"}),"\n",(0,s.jsx)(n.p,{children:"Aqua by default uses:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.colors)(\n self: s,\n primary: rgb("#003F88"),\n primary-light: rgb("#2159A5"),\n primary-lightest: rgb("#F2F4F8"),\n'})}),"\n",(0,s.jsxs)(n.p,{children:["color themes, which you can modify by ",(0,s.jsx)(n.code,{children:"#let s = (s.methods.colors)(self: s, ..)"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,s.jsx)(n.p,{children:"Aqua theme offers a series of custom slide functions:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#title-slide(..args)\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"title-slide"})," will read information from ",(0,s.jsx)(n.code,{children:"self.info"})," for display."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#let outline-slide(self: none, enum-args: (:), leading: 50pt)\n"})}),"\n",(0,s.jsx)(n.p,{children:"Display an outline slide."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // Aqua theme\n title: auto,\n)[\n ...\n]\n"})}),"\n",(0,s.jsxs)(n.p,{children:["A default ordinary slide function with title and footer, where ",(0,s.jsx)(n.code,{children:"title"})," defaults to the current section title."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#focus-slide[\n ...\n]\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Used to draw the audience's attention. The background color is ",(0,s.jsx)(n.code,{children:"self.colors.primary"}),"."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#new-section-slide(title)\n"})}),"\n",(0,s.jsx)(n.p,{children:"Start a new section with the given title."}),"\n",(0,s.jsxs)(n.h2,{id:"slides-function",children:[(0,s.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"slides"})," function has parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"title-slide"}),": Default is ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"outline-slide"}),": Default is ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"slide-level"}),": Default is ",(0,s.jsx)(n.code,{children:"1"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["They can be set via ",(0,s.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["PS: The outline title can be modified via ",(0,s.jsx)(n.code,{children:"#(s.outline-title = [Outline])"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["Additionally, you can disable the automatic inclusion of ",(0,s.jsx)(n.code,{children:"new-section-slide"})," functionality by ",(0,s.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.aqua.register(aspect-ratio: "16-9", lang: "en")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, outline-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/eea4df8d-d9fd-43ac-aaf7-bb459864a9ac",alt:"image"})}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n\n#let s = themes.aqua.register(aspect-ratio: "16-9", lang: "en")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, outline-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= The Section\n\n== Slide Title\n\n#slide[\n #lorem(40)\n]\n\n#focus-slide[\n Another variant with primary color in background...\n]\n\n== Summary\n\n#align(center + horizon)[\n #set text(size: 3em, weight: "bold", s.colors.primary)\n THANKS FOR ALL\n]\n'})})]})}function h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>d,a:()=>o});var s=i(7294);const t={},l=s.createContext(t);function o(e){const n=s.useContext(l);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),s.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3284],{3293:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>d,toc:()=>a});var s=i(5893),t=i(1151);const l={sidebar_position:5},o="Aqua Theme",d={id:"themes/aqua",title:"Aqua Theme",description:"image",source:"@site/versioned_docs/version-0.4.2/themes/aqua.md",sourceDirName:"themes",slug:"/themes/aqua",permalink:"/touying/docs/themes/aqua",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/themes/aqua.md",tags:[],version:"0.4.2",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"University Theme",permalink:"/touying/docs/themes/university"},next:{title:"Creating Your Own Theme",permalink:"/touying/docs/build-your-own-theme"}},r={},a=[{value:"Initialization",id:"initialization",level:2},{value:"Color Themes",id:"color-themes",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"slides Function",id:"slides-function",level:2},{value:"Example",id:"example",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",hr:"hr",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"aqua-theme",children:"Aqua Theme"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/5f9b3c99-a22a-4f3d-a266-93dd75997593",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["This theme is created by ",(0,s.jsx)(n.a,{href:"https://github.com/pride7",children:"@pride7"}),", featuring beautiful backgrounds made with Typst's visualization capabilities."]}),"\n",(0,s.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,s.jsx)(n.p,{children:"You can initialize it with the following code:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.aqua.register(aspect-ratio: "16-9", lang: "en")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, outline-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,s.jsxs)(n.p,{children:["Where ",(0,s.jsx)(n.code,{children:"register"})," takes parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"aspect-ratio"}),': The aspect ratio of slides, either "16-9" or "4-3", default is "16-9".']}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer"}),": Content shown on the right side of the footer, default is ",(0,s.jsx)(n.code,{children:"states.slide-counter.display()"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"lang"}),": Language configuration, currently supports ",(0,s.jsx)(n.code,{children:'"en"'})," and ",(0,s.jsx)(n.code,{children:'"zh"'}),", default is ",(0,s.jsx)(n.code,{children:'"en"'}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Aqua theme also provides an ",(0,s.jsx)(n.code,{children:"#alert[..]"})," function, which you can utilize with ",(0,s.jsx)(n.code,{children:"#show strong: alert"})," using ",(0,s.jsx)(n.code,{children:"*alert text*"})," syntax."]}),"\n",(0,s.jsx)(n.h2,{id:"color-themes",children:"Color Themes"}),"\n",(0,s.jsx)(n.p,{children:"Aqua by default uses:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#let s = (s.methods.colors)(\n self: s,\n primary: rgb("#003F88"),\n primary-light: rgb("#2159A5"),\n primary-lightest: rgb("#F2F4F8"),\n'})}),"\n",(0,s.jsxs)(n.p,{children:["color themes, which you can modify by ",(0,s.jsx)(n.code,{children:"#let s = (s.methods.colors)(self: s, ..)"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,s.jsx)(n.p,{children:"Aqua theme offers a series of custom slide functions:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#title-slide(..args)\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"title-slide"})," will read information from ",(0,s.jsx)(n.code,{children:"self.info"})," for display."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#let outline-slide(self: none, enum-args: (:), leading: 50pt)\n"})}),"\n",(0,s.jsx)(n.p,{children:"Display an outline slide."}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: utils.side-by-side,\n section: none,\n subsection: none,\n // Aqua theme\n title: auto,\n)[\n ...\n]\n"})}),"\n",(0,s.jsxs)(n.p,{children:["A default ordinary slide function with title and footer, where ",(0,s.jsx)(n.code,{children:"title"})," defaults to the current section title."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#focus-slide[\n ...\n]\n"})}),"\n",(0,s.jsxs)(n.p,{children:["Used to draw the audience's attention. The background color is ",(0,s.jsx)(n.code,{children:"self.colors.primary"}),"."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#new-section-slide(title)\n"})}),"\n",(0,s.jsx)(n.p,{children:"Start a new section with the given title."}),"\n",(0,s.jsxs)(n.h2,{id:"slides-function",children:[(0,s.jsx)(n.code,{children:"slides"})," Function"]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"slides"})," function has parameters:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"title-slide"}),": Default is ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"outline-slide"}),": Default is ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"slide-level"}),": Default is ",(0,s.jsx)(n.code,{children:"1"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["They can be set via ",(0,s.jsx)(n.code,{children:"#show: slides.with(..)"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["PS: The outline title can be modified via ",(0,s.jsx)(n.code,{children:"#(s.outline-title = [Outline])"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["Additionally, you can disable the automatic inclusion of ",(0,s.jsx)(n.code,{children:"new-section-slide"})," functionality by ",(0,s.jsx)(n.code,{children:"#(s.methods.touying-new-section-slide = none)"}),"."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.aqua.register(aspect-ratio: "16-9", lang: "en")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, outline-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/eea4df8d-d9fd-43ac-aaf7-bb459864a9ac",alt:"image"})}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.4.2": *\n\n#let s = themes.aqua.register(aspect-ratio: "16-9", lang: "en")\n#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, outline-slide, focus-slide) = utils.slides(s)\n#show: slides\n\n= The Section\n\n== Slide Title\n\n#slide[\n #lorem(40)\n]\n\n#focus-slide[\n Another variant with primary color in background...\n]\n\n== Summary\n\n#align(center + horizon)[\n #set text(size: 3em, weight: "bold", s.colors.primary)\n THANKS FOR ALL\n]\n'})})]})}function h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>d,a:()=>o});var s=i(7294);const t={},l=s.createContext(t);function o(e){const n=s.useContext(l);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),s.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f9b59e29.5138a0e6.js b/assets/js/f9b59e29.5138a0e6.js new file mode 100644 index 000000000..88de9a08f --- /dev/null +++ b/assets/js/f9b59e29.5138a0e6.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[945],{7597:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>l,frontMatter:()=>o,metadata:()=>r,toc:()=>d});var i=n(5893),s=n(1151);const o={sidebar_position:2},a="MiTeX",r={id:"integration/mitex",title:"MiTeX",description:"During the process of creating slides, we often already have a LaTeX math equation that we simply want to paste into the slides without transcribing it into a Typst math equation. In such cases, we can use MiTeX.",source:"@site/versioned_docs/version-0.4.2/integration/mitex.md",sourceDirName:"integration",slug:"/integration/mitex",permalink:"/touying/docs/integration/mitex",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.2/integration/mitex.md",tags:[],version:"0.4.2",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Pinit",permalink:"/touying/docs/integration/pinit"},next:{title:"CeTZ",permalink:"/touying/docs/integration/cetz"}},c={},d=[];function u(e){const t={a:"a",code:"code",h1:"h1",img:"img",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{id:"mitex",children:"MiTeX"}),"\n",(0,i.jsxs)(t.p,{children:["During the process of creating slides, we often already have a LaTeX math equation that we simply want to paste into the slides without transcribing it into a Typst math equation. In such cases, we can use ",(0,i.jsx)(t.a,{href:"https://github.com/mitex-rs/mitex",children:"MiTeX"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Example:"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typst",children:'#import "@preview/mitex:0.2.3": *\n\nWrite inline equations like #mi("x") or #mi[y].\n\nAlso block equations (this case is from #text(blue.lighten(20%), link("https://katex.org/")[katex.org])):\n\n#mitex(`\n \\newcommand{\\f}[2]{#1f(#2)}\n \\f\\relax{x} = \\int_{-\\infty}^\\infty\n \\f\\hat\\xi\\,e^{2 \\pi i \\xi x}\n \\,d\\xi\n`)\n'})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://github.com/mitex-rs/mitex/assets/34951714/c425b2ae-b50b-46a8-a451-4d9e8e70626b",alt:"image"})}),"\n",(0,i.jsxs)(t.p,{children:["Touying also provides a ",(0,i.jsx)(t.code,{children:"touying-mitex"})," function, which can be used for example"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typst",children:"#touying-mitex(mitex, `\n f(x) &= \\pause x^2 + 2x + 1 \\\\\n &= \\pause (x + 1)^2 \\\\\n`)\n"})})]})}function l(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>r,a:()=>a});var i=n(7294);const s={},o=i.createContext(s);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),i.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/fc190723.3c8e3c10.js b/assets/js/fc190723.3c8e3c10.js deleted file mode 100644 index f19cc2f1b..000000000 --- a/assets/js/fc190723.3c8e3c10.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1188],{4266:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>r,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var s=n(5893),i=n(1151);const o={sidebar_position:6},l="Global Settings",a={id:"global-settings",title:"Global Settings",description:"Global Styles",source:"@site/versioned_docs/version-0.4.1/global-settings.md",sourceDirName:".",slug:"/global-settings",permalink:"/touying/docs/global-settings",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/global-settings.md",tags:[],version:"0.4.1",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"tutorialSidebar",previous:{title:"Page Layout",permalink:"/touying/docs/layout"},next:{title:"Multi-File Architecture",permalink:"/touying/docs/multi-file"}},r={},d=[{value:"Global Styles",id:"global-styles",level:2},{value:"Global Information",id:"global-information",level:2},{value:"State Initialization",id:"state-initialization",level:2}];function c(e){const t={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"global-settings",children:"Global Settings"}),"\n",(0,s.jsx)(t.h2,{id:"global-styles",children:"Global Styles"}),"\n",(0,s.jsxs)(t.p,{children:["For Touying, global styles refer to set rules or show rules that need to be applied everywhere, such as ",(0,s.jsx)(t.code,{children:"#set text(size: 20pt)"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Themes in Touying encapsulate some of their own global styles, which are placed in ",(0,s.jsx)(t.code,{children:"#show: init"}),". For example, the university theme encapsulates the following:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"self.methods.init = (self: none, body) => {\n set text(size: 25pt)\n show footnote.entry: set text(size: .6em)\n body\n}\n"})}),"\n",(0,s.jsxs)(t.p,{children:["If you are not a theme creator but want to add your own global styles to your slides, you can simply place them after ",(0,s.jsx)(t.code,{children:"#show: init"})," and before ",(0,s.jsx)(t.code,{children:"#show: slides"}),". For example, the metropolis theme recommends adding the following global styles:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'#let s = themes.metropolis.register(aspect-ratio: "16-9")\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n// global styles\n#set text(font: "Fira Sans", weight: "light", size: 20pt)\n#show math.equation: set text(font: "Fira Math")\n#set strong(delta: 100)\n#set par(justify: true)\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,s.jsxs)(t.p,{children:["However, note that you should not use ",(0,s.jsx)(t.code,{children:"#set page(..)"}),". Instead, modify ",(0,s.jsx)(t.code,{children:"s.page-args"})," and ",(0,s.jsx)(t.code,{children:"s.padding"}),", for example:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"#(s.page-args += (\n margin: (x: 0em, y: 2em),\n header: align(top)[Header],\n footer: align(bottom)[Footer],\n header-ascent: 0em,\n footer-descent: 0em,\n))\n#(s.padding += (x: 4em, y: 0em))\n"})}),"\n",(0,s.jsx)(t.h2,{id:"global-information",children:"Global Information"}),"\n",(0,s.jsx)(t.p,{children:"Like Beamer, Touying, through an OOP-style unified API design, can help you better maintain global information, allowing you to easily switch between different themes. Global information is a typical example of this."}),"\n",(0,s.jsx)(t.p,{children:"You can set the title, subtitle, author, date, and institution information for slides using:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n"})}),"\n",(0,s.jsxs)(t.p,{children:["In subsequent slides, you can access them through ",(0,s.jsx)(t.code,{children:"s.info"})," or ",(0,s.jsx)(t.code,{children:"self.info"}),"."]}),"\n",(0,s.jsx)(t.p,{children:"This information is generally used in the title-slide, header, and footer of the theme, for example:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n'})}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"date"})," can accept ",(0,s.jsx)(t.code,{children:"datetime"})," format or ",(0,s.jsx)(t.code,{children:"content"})," format, and the display format for the ",(0,s.jsx)(t.code,{children:"datetime"})," format can be changed using:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'#let s = (s.methods.datetime-format)(self: s, "[year]-[month]-[day]")\n'})}),"\n",(0,s.jsxs)(t.admonition,{title:"Principle",type:"tip",children:[(0,s.jsx)(t.p,{children:"Here, we will introduce a bit of OOP concept in Touying."}),(0,s.jsxs)(t.p,{children:["You should know that Typst is a typesetting language that supports incremental rendering, which means Typst caches the results of previous function calls. This requires that Typst consists of pure functions, meaning functions that do not change external variables. Thus, it is challenging to modify a global variable in the true sense, even with the use of ",(0,s.jsx)(t.code,{children:"state"})," or ",(0,s.jsx)(t.code,{children:"counter"}),". This would require the use of ",(0,s.jsx)(t.code,{children:"locate"})," with callback functions to obtain the values inside, and this approach would have a significant impact on performance."]}),(0,s.jsxs)(t.p,{children:["Touying does not use ",(0,s.jsx)(t.code,{children:"state"})," or ",(0,s.jsx)(t.code,{children:"counter"})," and does not violate the principle of pure functions in Typst. Instead, it uses a clever approach in an object-oriented style, maintaining a global singleton ",(0,s.jsx)(t.code,{children:"s"}),". In Touying, an object refers to a Typst dictionary with its own member variables and methods. We agree that methods all have a named parameter ",(0,s.jsx)(t.code,{children:"self"})," for passing the object itself, and methods are placed in the ",(0,s.jsx)(t.code,{children:".methods"})," domain. With this concept, it becomes easier to write methods to update ",(0,s.jsx)(t.code,{children:"info"}),":"]}),(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"#let s = (\n info: (:),\n methods: (\n // update info\n info: (self: none, ..args) => {\n self.info += args.named()\n self\n },\n )\n)\n\n#let s = (s.methods.info)(self: s, title: [title])\n\nTitle is #s.info.title\n"})}),(0,s.jsxs)(t.p,{children:["Now you can understand the purpose of the ",(0,s.jsx)(t.code,{children:"utils.methods()"})," function: to bind ",(0,s.jsx)(t.code,{children:"self"})," to all methods of ",(0,s.jsx)(t.code,{children:"s"})," and return it, simplifying the subsequent usage through unpacking syntax."]}),(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"#let (init, slides, alert) = utils.methods(s)\n"})})]}),"\n",(0,s.jsx)(t.h2,{id:"state-initialization",children:"State Initialization"}),"\n",(0,s.jsxs)(t.p,{children:["In general, the two ways mentioned above are sufficient for adding global settings. However, there are still situations where we need to initialize counters or states. If you place this code before ",(0,s.jsx)(t.code,{children:"#show: slides"}),", a blank page will be created, which is something we don't want to see. In such cases, you can use the ",(0,s.jsx)(t.code,{children:"s.methods.append-preamble"})," method. For example, when using the codly package:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/codly:0.2.0": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9")\n#let s = (s.methods.append-preamble)(self: s)[\n #codly(languages: (\n rust: (name: "Rust", icon: "\\u{fa53}", color: rgb("#CE412B")),\n ))\n]\n#let (init, slides) = utils.methods(s)\n#show heading.where(level: 2): set block(below: 1em)\n#show: init\n#show: codly-init.with()\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n#slide[\n == First slide\n\n #raw(lang: "rust", block: true,\n`pub fn main() {\n println!("Hello, world!");\n}`.text)\n]\n'})}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{src:"https://github.com/touying-typ/touying/assets/34951714/0be2fbaf-cc03-4776-932f-259503d5e23a",alt:"image"})}),"\n",(0,s.jsx)(t.p,{children:"Or when configuring Pdfpc:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'// Pdfpc configuration\n// typst query --root . ./example.typ --field value --one "" > ./example.pdfpc\n#let s = (s.methods.append-preamble)(self: s, pdfpc.config(\n duration-minutes: 30,\n start-time: datetime(hour: 14, minute: 10, second: 0),\n end-time: datetime(hour: 14, minute: 40, second: 0),\n last-minutes: 5,\n note-font-size: 12,\n disable-markdown: false,\n default-transition: (\n type: "push",\n duration-seconds: 2,\n angle: ltr,\n alignment: "vertical",\n direction: "inward",\n ),\n))\n'})})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>l});var s=n(7294);const i={},o=s.createContext(i);function l(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/fc190723.f4e92e09.js b/assets/js/fc190723.f4e92e09.js new file mode 100644 index 000000000..36d3c7fb5 --- /dev/null +++ b/assets/js/fc190723.f4e92e09.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1188],{4266:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>r,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var s=n(5893),i=n(1151);const o={sidebar_position:6},l="Global Settings",a={id:"global-settings",title:"Global Settings",description:"Global Styles",source:"@site/versioned_docs/version-0.4.1/global-settings.md",sourceDirName:".",slug:"/global-settings",permalink:"/touying/docs/0.4.1/global-settings",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/versioned_docs/version-0.4.1/global-settings.md",tags:[],version:"0.4.1",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"tutorialSidebar",previous:{title:"Page Layout",permalink:"/touying/docs/0.4.1/layout"},next:{title:"Multi-File Architecture",permalink:"/touying/docs/0.4.1/multi-file"}},r={},d=[{value:"Global Styles",id:"global-styles",level:2},{value:"Global Information",id:"global-information",level:2},{value:"State Initialization",id:"state-initialization",level:2}];function c(e){const t={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"global-settings",children:"Global Settings"}),"\n",(0,s.jsx)(t.h2,{id:"global-styles",children:"Global Styles"}),"\n",(0,s.jsxs)(t.p,{children:["For Touying, global styles refer to set rules or show rules that need to be applied everywhere, such as ",(0,s.jsx)(t.code,{children:"#set text(size: 20pt)"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Themes in Touying encapsulate some of their own global styles, which are placed in ",(0,s.jsx)(t.code,{children:"#show: init"}),". For example, the university theme encapsulates the following:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"self.methods.init = (self: none, body) => {\n set text(size: 25pt)\n show footnote.entry: set text(size: .6em)\n body\n}\n"})}),"\n",(0,s.jsxs)(t.p,{children:["If you are not a theme creator but want to add your own global styles to your slides, you can simply place them after ",(0,s.jsx)(t.code,{children:"#show: init"})," and before ",(0,s.jsx)(t.code,{children:"#show: slides"}),". For example, the metropolis theme recommends adding the following global styles:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'#let s = themes.metropolis.register(aspect-ratio: "16-9")\n#let (init, slides, touying-outline, alert, speaker-note) = utils.methods(s)\n#show: init\n\n// global styles\n#set text(font: "Fira Sans", weight: "light", size: 20pt)\n#show math.equation: set text(font: "Fira Math")\n#set strong(delta: 100)\n#set par(justify: true)\n#show strong: alert\n\n#let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s)\n#show: slides\n'})}),"\n",(0,s.jsxs)(t.p,{children:["However, note that you should not use ",(0,s.jsx)(t.code,{children:"#set page(..)"}),". Instead, modify ",(0,s.jsx)(t.code,{children:"s.page-args"})," and ",(0,s.jsx)(t.code,{children:"s.padding"}),", for example:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"#(s.page-args += (\n margin: (x: 0em, y: 2em),\n header: align(top)[Header],\n footer: align(bottom)[Footer],\n header-ascent: 0em,\n footer-descent: 0em,\n))\n#(s.padding += (x: 4em, y: 0em))\n"})}),"\n",(0,s.jsx)(t.h2,{id:"global-information",children:"Global Information"}),"\n",(0,s.jsx)(t.p,{children:"Like Beamer, Touying, through an OOP-style unified API design, can help you better maintain global information, allowing you to easily switch between different themes. Global information is a typical example of this."}),"\n",(0,s.jsx)(t.p,{children:"You can set the title, subtitle, author, date, and institution information for slides using:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"#let s = (s.methods.info)(\n self: s,\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n)\n"})}),"\n",(0,s.jsxs)(t.p,{children:["In subsequent slides, you can access them through ",(0,s.jsx)(t.code,{children:"s.info"})," or ",(0,s.jsx)(t.code,{children:"self.info"}),"."]}),"\n",(0,s.jsx)(t.p,{children:"This information is generally used in the title-slide, header, and footer of the theme, for example:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'#let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution)\n'})}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"date"})," can accept ",(0,s.jsx)(t.code,{children:"datetime"})," format or ",(0,s.jsx)(t.code,{children:"content"})," format, and the display format for the ",(0,s.jsx)(t.code,{children:"datetime"})," format can be changed using:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'#let s = (s.methods.datetime-format)(self: s, "[year]-[month]-[day]")\n'})}),"\n",(0,s.jsxs)(t.admonition,{title:"Principle",type:"tip",children:[(0,s.jsx)(t.p,{children:"Here, we will introduce a bit of OOP concept in Touying."}),(0,s.jsxs)(t.p,{children:["You should know that Typst is a typesetting language that supports incremental rendering, which means Typst caches the results of previous function calls. This requires that Typst consists of pure functions, meaning functions that do not change external variables. Thus, it is challenging to modify a global variable in the true sense, even with the use of ",(0,s.jsx)(t.code,{children:"state"})," or ",(0,s.jsx)(t.code,{children:"counter"}),". This would require the use of ",(0,s.jsx)(t.code,{children:"locate"})," with callback functions to obtain the values inside, and this approach would have a significant impact on performance."]}),(0,s.jsxs)(t.p,{children:["Touying does not use ",(0,s.jsx)(t.code,{children:"state"})," or ",(0,s.jsx)(t.code,{children:"counter"})," and does not violate the principle of pure functions in Typst. Instead, it uses a clever approach in an object-oriented style, maintaining a global singleton ",(0,s.jsx)(t.code,{children:"s"}),". In Touying, an object refers to a Typst dictionary with its own member variables and methods. We agree that methods all have a named parameter ",(0,s.jsx)(t.code,{children:"self"})," for passing the object itself, and methods are placed in the ",(0,s.jsx)(t.code,{children:".methods"})," domain. With this concept, it becomes easier to write methods to update ",(0,s.jsx)(t.code,{children:"info"}),":"]}),(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"#let s = (\n info: (:),\n methods: (\n // update info\n info: (self: none, ..args) => {\n self.info += args.named()\n self\n },\n )\n)\n\n#let s = (s.methods.info)(self: s, title: [title])\n\nTitle is #s.info.title\n"})}),(0,s.jsxs)(t.p,{children:["Now you can understand the purpose of the ",(0,s.jsx)(t.code,{children:"utils.methods()"})," function: to bind ",(0,s.jsx)(t.code,{children:"self"})," to all methods of ",(0,s.jsx)(t.code,{children:"s"})," and return it, simplifying the subsequent usage through unpacking syntax."]}),(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:"#let (init, slides, alert) = utils.methods(s)\n"})})]}),"\n",(0,s.jsx)(t.h2,{id:"state-initialization",children:"State Initialization"}),"\n",(0,s.jsxs)(t.p,{children:["In general, the two ways mentioned above are sufficient for adding global settings. However, there are still situations where we need to initialize counters or states. If you place this code before ",(0,s.jsx)(t.code,{children:"#show: slides"}),", a blank page will be created, which is something we don't want to see. In such cases, you can use the ",(0,s.jsx)(t.code,{children:"s.methods.append-preamble"})," method. For example, when using the codly package:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'#import "@preview/touying:0.4.1": *\n#import "@preview/codly:0.2.0": *\n\n#let s = themes.simple.register(aspect-ratio: "16-9")\n#let s = (s.methods.append-preamble)(self: s)[\n #codly(languages: (\n rust: (name: "Rust", icon: "\\u{fa53}", color: rgb("#CE412B")),\n ))\n]\n#let (init, slides) = utils.methods(s)\n#show heading.where(level: 2): set block(below: 1em)\n#show: init\n#show: codly-init.with()\n\n#let (slide, empty-slide) = utils.slides(s)\n#show: slides\n\n#slide[\n == First slide\n\n #raw(lang: "rust", block: true,\n`pub fn main() {\n println!("Hello, world!");\n}`.text)\n]\n'})}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{src:"https://github.com/touying-typ/touying/assets/34951714/0be2fbaf-cc03-4776-932f-259503d5e23a",alt:"image"})}),"\n",(0,s.jsx)(t.p,{children:"Or when configuring Pdfpc:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typst",children:'// Pdfpc configuration\n// typst query --root . ./example.typ --field value --one "" > ./example.pdfpc\n#let s = (s.methods.append-preamble)(self: s, pdfpc.config(\n duration-minutes: 30,\n start-time: datetime(hour: 14, minute: 10, second: 0),\n end-time: datetime(hour: 14, minute: 40, second: 0),\n last-minutes: 5,\n note-font-size: 12,\n disable-markdown: false,\n default-transition: (\n type: "push",\n duration-seconds: 2,\n angle: ltr,\n alignment: "vertical",\n direction: "inward",\n ),\n))\n'})})]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>l});var s=n(7294);const i={},o=s.createContext(i);function l(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/main.3a562392.js b/assets/js/main.3a562392.js new file mode 100644 index 000000000..856fad0da --- /dev/null +++ b/assets/js/main.3a562392.js @@ -0,0 +1,2 @@ +/*! For license information please see main.3a562392.js.LICENSE.txt */ +(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[179],{723:(e,t,n)=>{"use strict";n.d(t,{Z:()=>p});n(7294);var o=n(8356),r=n.n(o),i=n(6887);const a={"01140225":[()=>n.e(8671).then(n.t.bind(n,9683,19)),"~docs/default/category-touyingdocs-040-tutorialsidebar-category-package-integration-c9a.json",9683],"018a1506":[()=>n.e(69).then(n.bind(n,3390)),"@site/versioned_docs/version-0.3.2+/code-styles.md",3390],"01a85c17":[()=>Promise.all([n.e(532),n.e(4013)]).then(n.bind(n,1223)),"@theme/BlogTagsListPage",1223],"024af9ce":[()=>n.e(6902).then(n.bind(n,8154)),"@site/versioned_docs/version-0.4.0+/utilities/oop.md",8154],"0275f7e4":[()=>n.e(1560).then(n.bind(n,1898)),"@site/versioned_docs/version-0.2.x/progress/counters.md",1898],"02f62403":[()=>n.e(7836).then(n.bind(n,7837)),"@site/versioned_docs/version-0.3.x/sections.md",7837],"0479d12b":[()=>n.e(4621).then(n.bind(n,3498)),"@site/versioned_docs/version-0.3.2+/utilities/oop.md",3498],"04b649ca":[()=>n.e(1089).then(n.bind(n,4519)),"@site/versioned_docs/version-0.4.0+/themes/university.md",4519],"05206b71":[()=>n.e(8881).then(n.bind(n,4693)),"@site/versioned_docs/version-0.4.0+/external/pdfpc.md",4693],"05ed0e1f":[()=>n.e(7503).then(n.bind(n,8338)),"@site/versioned_docs/version-0.4.0+/themes/aqua.md",8338],"06e0043a":[()=>n.e(4725).then(n.t.bind(n,5681,19)),"~blog/default/touying-blog-tags-tags-16e.json",5681],"06e97d6d":[()=>n.e(7899).then(n.bind(n,225)),"@site/versioned_docs/version-0.4.2/external/pympress.md",225],"072a110d":[()=>n.e(4061).then(n.bind(n,3074)),"@site/versioned_docs/version-0.4.2/code-styles.md",3074],"080c9bd0":[()=>n.e(417).then(n.bind(n,137)),"@site/versioned_docs/version-0.3.x/external/pdfpc.md",137],"09ecdeab":[()=>n.e(9139).then(n.bind(n,7396)),"@site/docs/dynamic/cover.md",7396],"0b163c46":[()=>n.e(6486).then(n.bind(n,2502)),"@site/versioned_docs/version-0.4.2/multi-file.md",2502],"0c7d33f3":[()=>n.e(4842).then(n.bind(n,5152)),"@site/docs/utilities/oop.md",5152],"0d1c87af":[()=>n.e(2792).then(n.bind(n,2006)),"@site/docs/themes/aqua.md",2006],"0e384e19":[()=>n.e(9671).then(n.bind(n,7876)),"@site/docs/intro.md",7876],"0ed1cf13":[()=>n.e(4245).then(n.bind(n,2936)),"@site/versioned_docs/version-0.4.2/themes/university.md",2936],"0f02b06b":[()=>n.e(378).then(n.t.bind(n,3356,19)),"~docs/default/category-touyingdocs-041-tutorialsidebar-category-progress-4db.json",3356],"10eff399":[()=>n.e(9744).then(n.t.bind(n,7858,19)),"~blog/default/touying-blog-tags-development-edd-list.json",7858],11366869:[()=>n.e(5428).then(n.bind(n,7159)),"@site/versioned_docs/version-0.3.2+/utilities/fit-to.md",7159],"116fbef0":[()=>n.e(2432).then(n.bind(n,1529)),"@site/versioned_docs/version-0.3.x/integration/cetz.md",1529],"11b282fc":[()=>n.e(8814).then(n.bind(n,8079)),"@site/versioned_docs/version-0.2.x/dynamic/complex.md",8079],"14c08683":[()=>n.e(3942).then(n.t.bind(n,824,19)),"~docs/default/category-touyingdocs-02-x-tutorialsidebar-category-themes-e70.json",824],"14eb3368":[()=>Promise.all([n.e(532),n.e(9817)]).then(n.bind(n,4228)),"@theme/DocCategoryGeneratedIndexPage",4228],"1514c4f3":[()=>n.e(3651).then(n.bind(n,118)),"@site/versioned_docs/version-0.3.2+/integration/fletcher.md",118],"16a5b323":[()=>n.e(7140).then(n.bind(n,1871)),"@site/versioned_docs/version-0.4.1/integration/fletcher.md",1871],"173c8b24":[()=>n.e(4733).then(n.bind(n,6130)),"@site/versioned_docs/version-0.3.x/themes/metropolis.md",6130],"1748a406":[()=>n.e(9966).then(n.t.bind(n,5968,19)),"~docs/default/category-touyingdocs-032-tutorialsidebar-category-progress-697.json",5968],17588091:[()=>n.e(4823).then(n.bind(n,3706)),"@site/versioned_docs/version-0.3.x/changelog.md",3706],17896441:[()=>Promise.all([n.e(532),n.e(9206),n.e(7918)]).then(n.bind(n,5154)),"@theme/DocItem",5154],"1aab1ab5":[()=>n.e(2701).then(n.t.bind(n,4533,19)),"~docs/default/version-0-3-2-metadata-prop-d6b.json",4533],"1b6fd54f":[()=>n.e(5921).then(n.bind(n,479)),"@site/versioned_docs/version-0.3.2+/intro.md",479],"1bf261d1":[()=>n.e(8271).then(n.bind(n,8593)),"@site/versioned_docs/version-0.4.1/themes/metropolis.md",8593],"1cf5eacf":[()=>n.e(5635).then(n.t.bind(n,8322,19)),"~docs/default/version-0-4-0-metadata-prop-2ad.json",8322],"1ea66885":[()=>n.e(9985).then(n.bind(n,5099)),"@site/versioned_docs/version-0.4.1/multi-file.md",5099],"1f391b9e":[()=>Promise.all([n.e(532),n.e(9206),n.e(3085)]).then(n.bind(n,4247)),"@theme/MDXPage",4247],"2073d020":[()=>n.e(2964).then(n.bind(n,3701)),"@site/versioned_docs/version-0.4.2/dynamic/cover.md",3701],"2553c37c":[()=>n.e(5526).then(n.bind(n,2382)),"@site/versioned_docs/version-0.3.2+/build-your-own-theme.md",2382],"267f059f":[()=>n.e(2786).then(n.bind(n,5580)),"@site/versioned_docs/version-0.2.x/external/pdfpc.md",5580],"286c2c64":[()=>n.e(6296).then(n.bind(n,5374)),"@site/versioned_docs/version-0.3.x/dynamic/simple.md",5374],"28a86b5d":[()=>n.e(4447).then(n.bind(n,2970)),"@site/versioned_docs/version-0.3.x/build-your-own-theme.md",2970],"29255e1b":[()=>n.e(6533).then(n.t.bind(n,1784,19)),"~docs/default/category-touyingdocs-041-tutorialsidebar-category-package-integration-5cb.json",1784],"293f9c83":[()=>n.e(8088).then(n.bind(n,9547)),"@site/docs/integration/cetz.md",9547],"29e7adb3":[()=>n.e(8210).then(n.t.bind(n,1572,19)),"~docs/default/category-touyingdocs-03-x-tutorialsidebar-category-utilities-792.json",1572],"2b13119a":[()=>n.e(9027).then(n.bind(n,629)),"@site/versioned_docs/version-0.3.2+/sections.md",629],"2b886b59":[()=>n.e(4645).then(n.bind(n,5186)),"@site/versioned_docs/version-0.4.2/integration/cetz.md",5186],"2b9fd23c":[()=>n.e(7545).then(n.bind(n,7512)),"@site/versioned_docs/version-0.2.x/changelog.md",7512],"2c0b54ac":[()=>n.e(80).then(n.bind(n,8925)),"@site/docs/utilities/fit-to.md",8925],"2cc1595c":[()=>n.e(498).then(n.bind(n,6411)),"@site/versioned_docs/version-0.2.x/dynamic/other.md",6411],"2d4a7f47":[()=>n.e(9183).then(n.bind(n,9763)),"@site/blog/2024-01-17-touying-0-2-0.md",9763],"30e9e8ba":[()=>n.e(8694).then(n.bind(n,5129)),"@site/versioned_docs/version-0.4.0+/integration/mitex.md",5129],"3143bd0d":[()=>n.e(2529).then(n.bind(n,2705)),"@site/versioned_docs/version-0.3.2+/external/typst-preview.md",2705],"332622f2":[()=>n.e(7256).then(n.bind(n,4149)),"@site/versioned_docs/version-0.4.1/dynamic/equation.md",4149],"33b22e37":[()=>n.e(8937).then(n.bind(n,4911)),"@site/versioned_docs/version-0.4.1/integration/ctheorems.md",4911],"340f1526":[()=>n.e(1893).then(n.bind(n,4405)),"@site/versioned_docs/version-0.3.2+/changelog.md",4405],"34ff0b4c":[()=>n.e(8084).then(n.bind(n,9634)),"@site/versioned_docs/version-0.3.x/intro.md",9634],"359eb289":[()=>n.e(5651).then(n.bind(n,4153)),"@site/versioned_docs/version-0.4.0+/changelog.md",4153],"35b233e8":[()=>n.e(1039).then(n.t.bind(n,1580,19)),"~docs/default/category-touyingdocs-032-tutorialsidebar-category-utilities-17a.json",1580],"38682d35":[()=>n.e(9413).then(n.bind(n,346)),"@site/versioned_docs/version-0.3.x/themes/simple.md",346],"38803c52":[()=>n.e(6721).then(n.bind(n,1217)),"@site/versioned_docs/version-0.2.x/themes/university.md",1217],"393be207":[()=>n.e(7414).then(n.bind(n,1181)),"@site/src/pages/markdown-page.md",1181],39430005:[()=>n.e(9619).then(n.bind(n,4057)),"@site/docs/dynamic/other.md",4057],"396cf6b9":[()=>n.e(9705).then(n.bind(n,4885)),"@site/docs/dynamic/simple.md",4885],"3b0a1f02":[()=>n.e(7460).then(n.bind(n,5644)),"@site/versioned_docs/version-0.4.1/integration/pinit.md",5644],"3b36ca8e":[()=>n.e(5022).then(n.t.bind(n,3769,19)),"/home/runner/work/touying/touying/docs/.docusaurus/docusaurus-plugin-content-docs/default/plugin-route-context-module-100.json",3769],"3c6c49a5":[()=>n.e(9799).then(n.bind(n,9342)),"@site/versioned_docs/version-0.4.1/progress/sections.md",9342],"3d438ec7":[()=>n.e(6085).then(n.t.bind(n,2691,19)),"~docs/default/category-touyingdocs-tutorialsidebar-category-external-tools-6ee.json",2691],"3f2877b5":[()=>n.e(8350).then(n.bind(n,5813)),"@site/docs/integration/fletcher.md",5813],"3fefcd96":[()=>n.e(6518).then(n.bind(n,9235)),"@site/versioned_docs/version-0.3.2+/start.md",9235],"40f02aaa":[()=>n.e(7857).then(n.bind(n,6239)),"@site/versioned_docs/version-0.4.2/external/typst-preview.md",6239],"41a6ae87":[()=>n.e(6526).then(n.t.bind(n,3076,19)),"~blog/default/touying-blog-archive-7de.json",3076],"41abee02":[()=>n.e(3994).then(n.bind(n,2110)),"@site/versioned_docs/version-0.3.x/dynamic/equation.md",2110],"43e6fa63":[()=>n.e(5151).then(n.t.bind(n,2863,19)),"~docs/default/category-touyingdocsnext-tutorialsidebar-category-dynamic-slides-d7d.json",2863],"472f8a66":[()=>n.e(8565).then(n.bind(n,2857)),"@site/docs/layout.md",2857],"4919068e":[()=>n.e(5313).then(n.bind(n,9575)),"@site/versioned_docs/version-0.4.0+/sections.md",9575],"493359fe":[()=>n.e(9965).then(n.t.bind(n,9629,19)),"~docs/default/category-touyingdocs-040-tutorialsidebar-category-themes-4bb.json",9629],"495c719e":[()=>n.e(1400).then(n.bind(n,7102)),"@site/versioned_docs/version-0.3.2+/integration/polylux.md",7102],"49841adc":[()=>n.e(819).then(n.bind(n,4847)),"@site/versioned_docs/version-0.4.1/start.md",4847],"49c05bac":[()=>n.e(8235).then(n.bind(n,7965)),"@site/versioned_docs/version-0.4.2/dynamic/handout.md",7965],"4b91b61e":[()=>n.e(5870).then(n.t.bind(n,1696,19)),"~docs/default/category-touyingdocs-03-x-tutorialsidebar-category-progress-143.json",1696],"4bb9edb3":[()=>n.e(3280).then(n.bind(n,567)),"@site/docs/dynamic/equation.md",567],"4c713790":[()=>n.e(3389).then(n.bind(n,4760)),"@site/versioned_docs/version-0.3.x/external/typst-preview.md",4760],"4e3d17c1":[()=>n.e(4067).then(n.bind(n,8284)),"@site/versioned_docs/version-0.4.0+/global-settings.md",8284],"4fabf2f1":[()=>n.e(9090).then(n.bind(n,4825)),"@site/versioned_docs/version-0.3.x/themes/dewdrop.md",4825],"5035b6a4":[()=>n.e(5609).then(n.t.bind(n,5745,19)),"/home/runner/work/touying/touying/docs/.docusaurus/docusaurus-plugin-content-pages/default/plugin-route-context-module-100.json",5745],"5057383c":[()=>n.e(5854).then(n.bind(n,3242)),"@site/docs/external/pympress.md",3242],"51a4d3bf":[()=>n.e(2289).then(n.bind(n,4728)),"@site/docs/dynamic/complex.md",4728],"51f6a377":[()=>n.e(873).then(n.bind(n,2334)),"@site/versioned_docs/version-0.4.1/dynamic/complex.md",2334],"5297811e":[()=>n.e(7504).then(n.bind(n,7161)),"@site/versioned_docs/version-0.3.2+/external/pdfpc.md",7161],"54e3aac2":[()=>n.e(9213).then(n.bind(n,9919)),"@site/versioned_docs/version-0.4.2/dynamic/equation.md",9919],"54ea3d6a":[()=>n.e(5617).then(n.t.bind(n,2251,19)),"~docs/default/category-touyingdocs-tutorialsidebar-category-progress-a47.json",2251],"5539901a":[()=>n.e(5701).then(n.bind(n,9275)),"@site/versioned_docs/version-0.4.0+/dynamic/cover.md",9275],"555ecac1":[()=>n.e(6662).then(n.bind(n,4620)),"@site/versioned_docs/version-0.2.x/start.md",4620],"55b57bd3":[()=>n.e(6259).then(n.bind(n,4628)),"@site/docs/integration/ctheorems.md",4628],"5670b452":[()=>n.e(997).then(n.bind(n,2261)),"@site/docs/build-your-own-theme.md",2261],"56a68450":[()=>n.e(8110).then(n.t.bind(n,2363,19)),"~docs/default/category-touyingdocsnext-tutorialsidebar-category-themes-02d.json",2363],"5806a9e1":[()=>n.e(1827).then(n.bind(n,9288)),"@site/versioned_docs/version-0.4.0+/progress/counters.md",9288],"58092a00":[()=>n.e(6099).then(n.bind(n,8018)),"@site/versioned_docs/version-0.3.2+/integration/pinit.md",8018],58132609:[()=>n.e(6175).then(n.bind(n,1161)),"@site/versioned_docs/version-0.4.0+/progress/sections.md",1161],"583d85fc":[()=>n.e(3715).then(n.bind(n,2069)),"@site/versioned_docs/version-0.3.x/integration/mitex.md",2069],"5848d47c":[()=>n.e(3845).then(n.bind(n,9456)),"@site/versioned_docs/version-0.4.2/utilities/fit-to.md",9456],"5a3af86b":[()=>n.e(7991).then(n.bind(n,7906)),"@site/versioned_docs/version-0.4.1/themes/university.md",7906],"5a57e638":[()=>n.e(2143).then(n.bind(n,8811)),"@site/docs/themes/simple.md",8811],"5b27bc59":[()=>n.e(3969).then(n.bind(n,4154)),"@site/docs/dynamic/handout.md",4154],"5c062049":[()=>n.e(263).then(n.bind(n,2403)),"@site/versioned_docs/version-0.3.2+/dynamic/other.md",2403],"5d410c12":[()=>n.e(8912).then(n.bind(n,4734)),"@site/versioned_docs/version-0.4.1/progress/counters.md",4734],"5de4625c":[()=>n.e(438).then(n.bind(n,2255)),"@site/versioned_docs/version-0.4.0+/themes/dewdrop.md",2255],"5e95c892":[()=>n.e(9661).then(n.bind(n,1892)),"@theme/DocsRoot",1892],"5e9f5e1a":[()=>Promise.resolve().then(n.bind(n,6809)),"@generated/docusaurus.config",6809],"5ed554a8":[()=>n.e(2829).then(n.bind(n,828)),"@site/versioned_docs/version-0.4.1/themes/simple.md",828],"5eea6960":[()=>n.e(1110).then(n.t.bind(n,382,19)),"~docs/default/category-touyingdocs-032-tutorialsidebar-category-themes-f68.json",382],"5fecb693":[()=>n.e(64).then(n.bind(n,9588)),"@site/versioned_docs/version-0.4.2/themes/simple.md",9588],"5ff4e923":[()=>n.e(4372).then(n.bind(n,2588)),"@site/versioned_docs/version-0.4.1/external/pdfpc.md",2588],"648478e2":[()=>n.e(915).then(n.t.bind(n,7886,19)),"~docs/default/category-touyingdocs-032-tutorialsidebar-category-external-tools-2cb.json",7886],"64ea200d":[()=>n.e(2112).then(n.bind(n,128)),"@site/versioned_docs/version-0.4.2/dynamic/other.md",128],"65dfabbc":[()=>n.e(6685).then(n.t.bind(n,5457,19)),"~docs/default/category-touyingdocsnext-tutorialsidebar-category-progress-b4b.json",5457],"65e4303d":[()=>n.e(4042).then(n.bind(n,8487)),"@site/versioned_docs/version-0.4.0+/dynamic/complex.md",8487],"65e4cc1e":[()=>n.e(5598).then(n.bind(n,349)),"@site/versioned_docs/version-0.2.x/intro.md",349],"6607fcb6":[()=>n.e(8332).then(n.bind(n,3732)),"@site/docs/multi-file.md",3732],"678a4048":[()=>n.e(5122).then(n.bind(n,269)),"@site/versioned_docs/version-0.4.2/intro.md",269],"679913bd":[()=>n.e(6757).then(n.t.bind(n,1059,19)),"~docs/default/category-touyingdocs-040-tutorialsidebar-category-progress-433.json",1059],"67bae27a":[()=>n.e(1860).then(n.bind(n,5462)),"@site/versioned_docs/version-0.3.x/integration/fletcher.md",5462],"6875c492":[()=>Promise.all([n.e(532),n.e(9206),n.e(9677),n.e(8610)]).then(n.bind(n,1714)),"@theme/BlogTagsPostsPage",1714],"6bd5e75c":[()=>n.e(2172).then(n.t.bind(n,6484,19)),"~docs/default/category-touyingdocs-tutorialsidebar-category-themes-122.json",6484],"6c1ba8b1":[()=>n.e(5106).then(n.bind(n,5497)),"@site/versioned_docs/version-0.4.0+/integration/codly.md",5497],"6c8708e3":[()=>n.e(3376).then(n.bind(n,8655)),"@site/versioned_docs/version-0.3.2+/themes/simple.md",8655],"6d7ce909":[()=>n.e(5695).then(n.bind(n,689)),"@site/docs/external/typst-preview.md",689],"6ff50dbf":[()=>n.e(9864).then(n.t.bind(n,8534,19)),"~docs/default/category-touyingdocs-040-tutorialsidebar-category-dynamic-slides-424.json",8534],"7032e634":[()=>n.e(108).then(n.bind(n,2218)),"@site/versioned_docs/version-0.4.2/build-your-own-theme.md",2218],"717af290":[()=>n.e(5739).then(n.t.bind(n,662,19)),"~docs/default/category-touyingdocs-02-x-tutorialsidebar-category-external-tools-050.json",662],"71b26582":[()=>n.e(4187).then(n.bind(n,8194)),"@site/versioned_docs/version-0.4.2/integration/ctheorems.md",8194],"7240ac5a":[()=>n.e(3564).then(n.bind(n,9697)),"@site/versioned_docs/version-0.4.2/start.md",9697],"729d3e1e":[()=>n.e(9375).then(n.bind(n,3624)),"@site/versioned_docs/version-0.2.x/layout.md",3624],"730fef4c":[()=>n.e(8341).then(n.bind(n,5960)),"@site/versioned_docs/version-0.3.x/global-settings.md",5960],"7329c3b8":[()=>n.e(5431).then(n.bind(n,8412)),"@site/versioned_docs/version-0.3.2+/dynamic/cover.md",8412],"7381b349":[()=>n.e(9116).then(n.bind(n,3788)),"@site/versioned_docs/version-0.4.2/themes/dewdrop.md",3788],"73a6f857":[()=>n.e(9632).then(n.bind(n,8813)),"@site/versioned_docs/version-0.4.1/integration/cetz.md",8813],"743177ed":[()=>n.e(4432).then(n.bind(n,9230)),"@site/versioned_docs/version-0.4.1/layout.md",9230],76911421:[()=>n.e(7577).then(n.bind(n,7441)),"@site/versioned_docs/version-0.4.1/dynamic/cover.md",7441],"77a6cbd2":[()=>n.e(1537).then(n.bind(n,3350)),"@site/versioned_docs/version-0.4.1/themes/aqua.md",3350],"77e3d78c":[()=>n.e(2191).then(n.bind(n,8465)),"@site/docs/progress/counters.md",8465],"78b57648":[()=>n.e(4952).then(n.bind(n,9508)),"@site/versioned_docs/version-0.4.1/external/typst-preview.md",9508],"78c3c618":[()=>n.e(9254).then(n.t.bind(n,9750,19)),"~docs/default/category-touyingdocsnext-tutorialsidebar-category-utilities-a88.json",9750],"7927a478":[()=>n.e(2847).then(n.bind(n,8139)),"@site/versioned_docs/version-0.4.0+/code-styles.md",8139],"797defb6":[()=>n.e(3684).then(n.t.bind(n,6996,19)),"~docs/default/category-touyingdocs-03-x-tutorialsidebar-category-themes-56c.json",6996],"7b7fae98":[()=>n.e(8861).then(n.t.bind(n,4700,19)),"~docs/default/category-touyingdocs-041-tutorialsidebar-category-external-tools-61e.json",4700],"7ba330a5":[()=>n.e(3135).then(n.bind(n,1525)),"@site/versioned_docs/version-0.2.x/dynamic/simple.md",1525],"7bec2371":[()=>n.e(8250).then(n.bind(n,8509)),"@site/versioned_docs/version-0.4.2/changelog.md",8509],"7c9c7243":[()=>n.e(1949).then(n.bind(n,1794)),"@site/versioned_docs/version-0.4.0+/build-your-own-theme.md",1794],"7d3539b2":[()=>n.e(4481).then(n.bind(n,6594)),"@site/docs/themes/university.md",6594],"7f50710c":[()=>n.e(5030).then(n.bind(n,5362)),"@site/versioned_docs/version-0.4.0+/themes/simple.md",5362],"7f65dfb7":[()=>n.e(6917).then(n.bind(n,2049)),"@site/docs/code-styles.md",2049],"80a0c88e":[()=>n.e(3209).then(n.bind(n,8135)),"@site/docs/themes/metropolis.md",8135],"814f3328":[()=>n.e(2535).then(n.t.bind(n,5641,19)),"~blog/default/blog-post-list-prop-default.json",5641],"82487ba9":[()=>n.e(2865).then(n.bind(n,9191)),"@site/versioned_docs/version-0.2.x/dynamic/equation.md",9191],82580390:[()=>n.e(1566).then(n.t.bind(n,6158,19)),"~docs/default/category-touyingdocs-040-tutorialsidebar-category-utilities-fb8.json",6158],"832b8a10":[()=>n.e(8240).then(n.bind(n,3826)),"@site/versioned_docs/version-0.4.0+/multi-file.md",3826],"83b73936":[()=>n.e(4873).then(n.t.bind(n,2347,19)),"~docs/default/category-touyingdocs-tutorialsidebar-category-dynamic-slides-37b.json",2347],"850166d8":[()=>n.e(7335).then(n.bind(n,3338)),"@site/versioned_docs/version-0.2.x/utilities/oop.md",3338],"851c2574":[()=>n.e(9319).then(n.bind(n,6691)),"@site/versioned_docs/version-0.2.x/dynamic/cover.md",6691],"864ebe97":[()=>n.e(6193).then(n.bind(n,6602)),"@site/versioned_docs/version-0.3.x/themes/university.md",6602],"86e5cb88":[()=>n.e(2830).then(n.bind(n,1628)),"@site/versioned_docs/version-0.3.x/utilities/oop.md",1628],"86f810a5":[()=>n.e(3134).then(n.bind(n,2109)),"@site/versioned_docs/version-0.3.2+/dynamic/handout.md",2109],"886cfe15":[()=>n.e(8563).then(n.bind(n,7027)),"@site/versioned_docs/version-0.4.1/build-your-own-theme.md",7027],"890ef1f8":[()=>n.e(2751).then(n.bind(n,7758)),"@site/versioned_docs/version-0.4.0+/integration/cetz.md",7758],"8992ec7c":[()=>n.e(160).then(n.bind(n,6770)),"@site/versioned_docs/version-0.4.2/global-settings.md",6770],"89f39702":[()=>n.e(6114).then(n.bind(n,1431)),"@site/versioned_docs/version-0.2.x/progress/sections.md",1431],"8aab68b4":[()=>n.e(511).then(n.bind(n,5294)),"@site/versioned_docs/version-0.4.1/dynamic/simple.md",5294],"8aac4d68":[()=>n.e(56).then(n.t.bind(n,1554,19)),"~docs/default/category-touyingdocs-041-tutorialsidebar-category-themes-87e.json",1554],"8ac96054":[()=>n.e(9527).then(n.bind(n,3680)),"@site/docs/external/pdfpc.md",3680],"8ded3f77":[()=>n.e(5332).then(n.t.bind(n,4469,19)),"/home/runner/work/touying/touying/docs/.docusaurus/docusaurus-plugin-content-blog/default/plugin-route-context-module-100.json",4469],"8e2c1ca5":[()=>n.e(4618).then(n.bind(n,9e3)),"@site/versioned_docs/version-0.4.0+/utilities/fit-to.md",9e3],"91b4e1d3":[()=>n.e(4983).then(n.t.bind(n,2801,19)),"~docs/default/version-0-4-1-metadata-prop-27c.json",2801],"91bd08ce":[()=>n.e(3263).then(n.bind(n,9365)),"@site/versioned_docs/version-0.3.x/layout.md",9365],"926843be":[()=>n.e(5832).then(n.bind(n,4008)),"@site/versioned_docs/version-0.2.x/utilities/fit-to.md",4008],"9286a2c0":[()=>n.e(2556).then(n.bind(n,3716)),"@site/versioned_docs/version-0.4.1/integration/codly.md",3716],"92f7ac8d":[()=>n.e(1546).then(n.bind(n,7909)),"@site/versioned_docs/version-0.3.2+/integration/codly.md",7909],"935f2afb":[()=>n.e(53).then(n.t.bind(n,1109,19)),"~docs/default/version-current-metadata-prop-751.json",1109],"95c1a82e":[()=>n.e(7513).then(n.bind(n,4843)),"@site/versioned_docs/version-0.4.1/dynamic/other.md",4843],"974d09da":[()=>n.e(9664).then(n.bind(n,1322)),"@site/versioned_docs/version-0.4.0+/layout.md",1322],"98ce8162":[()=>n.e(1543).then(n.bind(n,715)),"@site/docs/start.md",715],"99d50e1d":[()=>n.e(8010).then(n.bind(n,3283)),"@site/versioned_docs/version-0.3.x/start.md",3283],"9b94a5b3":[()=>n.e(5140).then(n.bind(n,5882)),"@site/versioned_docs/version-0.4.1/integration/mitex.md",5882],"9beb87c2":[()=>n.e(3034).then(n.bind(n,4123)),"@site/docs/changelog.md",4123],"9c7bd7dc":[()=>n.e(1392).then(n.bind(n,9020)),"@site/versioned_docs/version-0.4.2/integration/pinit.md",9020],"9cec3c93":[()=>n.e(1317).then(n.t.bind(n,621,19)),"~docs/default/category-touyingdocs-02-x-tutorialsidebar-category-dynamic-slides-835.json",621],"9d0f4357":[()=>n.e(2026).then(n.t.bind(n,8762,19)),"~docs/default/category-touyingdocs-tutorialsidebar-category-utilities-37c.json",8762],"9dfc2059":[()=>n.e(9437).then(n.bind(n,7606)),"@site/versioned_docs/version-0.4.1/changelog.md",7606],"9e4087bc":[()=>n.e(3608).then(n.bind(n,3169)),"@theme/BlogArchivePage",3169],"9ea180da":[()=>n.e(9861).then(n.bind(n,9556)),"@site/versioned_docs/version-0.3.2+/themes/university.md",9556],"9f9db465":[()=>n.e(7060).then(n.bind(n,2124)),"@site/versioned_docs/version-0.3.x/utilities/fit-to.md",2124],a3b8b6db:[()=>n.e(5094).then(n.t.bind(n,9760,19)),"~docs/default/category-touyingdocs-tutorialsidebar-category-package-integration-9af.json",9760],a449492b:[()=>n.e(1626).then(n.bind(n,4176)),"@site/versioned_docs/version-0.3.x/dynamic/other.md",4176],a62a85e6:[()=>n.e(9259).then(n.bind(n,2806)),"@site/versioned_docs/version-0.3.2+/themes/aqua.md",2806],a6aa9e1f:[()=>Promise.all([n.e(532),n.e(9206),n.e(9677),n.e(3089)]).then(n.bind(n,46)),"@theme/BlogListPage",46],a732a165:[()=>n.e(4288).then(n.bind(n,5349)),"@site/versioned_docs/version-0.4.0+/dynamic/simple.md",5349],a7bd4aaa:[()=>n.e(8518).then(n.bind(n,8564)),"@theme/DocVersionRoot",8564],a7cd7c6a:[()=>n.e(6679).then(n.bind(n,6830)),"@site/versioned_docs/version-0.2.x/themes/metropolis.md",6830],a94703ab:[()=>Promise.all([n.e(532),n.e(4368)]).then(n.bind(n,2674)),"@theme/DocRoot",2674],a94a4682:[()=>n.e(4599).then(n.bind(n,5376)),"@site/blog/2024-01-17-touying-0-2-0.md?truncated=true",5376],ab32da60:[()=>n.e(7190).then(n.bind(n,7022)),"@site/docs/sections.md",7022],acb203b2:[()=>n.e(1956).then(n.bind(n,4955)),"@site/versioned_docs/version-0.4.1/utilities/fit-to.md",4955],acfad3c9:[()=>n.e(7668).then(n.bind(n,4059)),"@site/versioned_docs/version-0.3.2+/themes/dewdrop.md",4059],ad8b99e1:[()=>n.e(5644).then(n.bind(n,9193)),"@site/versioned_docs/version-0.4.2/external/pdfpc.md",9193],ad972684:[()=>n.e(6403).then(n.bind(n,7378)),"@site/versioned_docs/version-0.3.x/integration/polylux.md",7378],ada9f060:[()=>n.e(2707).then(n.t.bind(n,1913,19)),"~docs/default/category-touyingdocs-03-x-tutorialsidebar-category-external-tools-b73.json",1913],ae31ff46:[()=>n.e(2528).then(n.t.bind(n,8497,19)),"~docs/default/version-0-2-x-metadata-prop-34c.json",8497],af23d200:[()=>n.e(3539).then(n.bind(n,9153)),"@site/versioned_docs/version-0.4.1/intro.md",9153],b035a2d2:[()=>n.e(876).then(n.bind(n,655)),"@site/versioned_docs/version-0.3.2+/progress/sections.md",655],b0b113fa:[()=>n.e(6138).then(n.bind(n,887)),"@site/versioned_docs/version-0.4.2/layout.md",887],b1a1bf59:[()=>n.e(3655).then(n.bind(n,5388)),"@site/versioned_docs/version-0.3.x/dynamic/handout.md",5388],b2b68e5a:[()=>n.e(6567).then(n.bind(n,3536)),"@site/versioned_docs/version-0.3.2+/global-settings.md",3536],b472294c:[()=>n.e(1049).then(n.bind(n,7625)),"@site/versioned_docs/version-0.3.x/progress/sections.md",7625],b5dfb830:[()=>n.e(2464).then(n.bind(n,5881)),"@site/versioned_docs/version-0.4.0+/dynamic/handout.md",5881],b6606f5f:[()=>n.e(513).then(n.bind(n,381)),"@site/versioned_docs/version-0.4.0+/intro.md",381],b779464e:[()=>n.e(9156).then(n.bind(n,9310)),"@site/versioned_docs/version-0.4.1/sections.md",9310],b7a138aa:[()=>n.e(9895).then(n.bind(n,4472)),"@site/versioned_docs/version-0.2.x/themes/simple.md",4472],b8cfeb64:[()=>n.e(1842).then(n.bind(n,4505)),"@site/versioned_docs/version-0.4.2/progress/counters.md",4505],b8fd1f7e:[()=>n.e(4984).then(n.bind(n,7519)),"@site/versioned_docs/version-0.3.x/dynamic/complex.md",7519],bbd5eca0:[()=>n.e(2013).then(n.t.bind(n,2289,19)),"~docs/default/version-0-4-2-metadata-prop-7b5.json",2289],bce42248:[()=>n.e(5675).then(n.bind(n,806)),"@site/versioned_docs/version-0.3.2+/progress/counters.md",806],bef23ce3:[()=>n.e(5096).then(n.bind(n,3207)),"@site/versioned_docs/version-0.4.0+/integration/ctheorems.md",3207],bf750d2c:[()=>n.e(4770).then(n.bind(n,871)),"@site/versioned_docs/version-0.3.x/dynamic/cover.md",871],c37d3efc:[()=>n.e(2551).then(n.t.bind(n,5808,19)),"~docs/default/category-touyingdocs-02-x-tutorialsidebar-category-utilities-ae4.json",5808],c38df086:[()=>n.e(6154).then(n.bind(n,82)),"@site/docs/integration/pinit.md",82],c4bbdbdb:[()=>n.e(9876).then(n.bind(n,1329)),"@site/versioned_docs/version-0.4.2/utilities/oop.md",1329],c4f5d8e4:[()=>Promise.all([n.e(532),n.e(4195)]).then(n.bind(n,3261)),"@site/src/pages/index.js",3261],c51e9508:[()=>n.e(1053).then(n.t.bind(n,1902,19)),"~docs/default/category-touyingdocsnext-tutorialsidebar-category-external-tools-2f9.json",1902],c60ded92:[()=>n.e(4450).then(n.bind(n,2136)),"@site/versioned_docs/version-0.4.0+/dynamic/other.md",2136],c6f2035a:[()=>n.e(9949).then(n.bind(n,4633)),"@site/versioned_docs/version-0.4.2/themes/metropolis.md",4633],c7f97b4e:[()=>n.e(2216).then(n.t.bind(n,7126,19)),"~docs/default/category-touyingdocs-032-tutorialsidebar-category-dynamic-slides-d21.json",7126],c9566e8a:[()=>n.e(6118).then(n.bind(n,4091)),"@site/docs/progress/sections.md",4091],c9c87310:[()=>n.e(9410).then(n.bind(n,7309)),"@site/versioned_docs/version-0.3.2+/integration/mitex.md",7309],cbb499f0:[()=>n.e(1001).then(n.bind(n,7717)),"@site/versioned_docs/version-0.4.1/dynamic/handout.md",7717],cbce90b2:[()=>n.e(6864).then(n.t.bind(n,6307,19)),"~docs/default/version-0-3-x-metadata-prop-ffc.json",6307],ccc49370:[()=>Promise.all([n.e(532),n.e(9206),n.e(9677),n.e(6103)]).then(n.bind(n,5203)),"@theme/BlogPostPage",5203],ce30cdaf:[()=>n.e(3808).then(n.bind(n,4273)),"@site/versioned_docs/version-0.4.0+/integration/pinit.md",4273],ce57b2d1:[()=>n.e(2868).then(n.bind(n,8575)),"@site/versioned_docs/version-0.2.x/themes/dewdrop.md",8575],d0193031:[()=>n.e(1545).then(n.bind(n,3868)),"@site/versioned_docs/version-0.4.2/integration/fletcher.md",3868],d03d89a3:[()=>n.e(8510).then(n.bind(n,2846)),"@site/versioned_docs/version-0.4.2/sections.md",2846],d16cbc15:[()=>n.e(2403).then(n.bind(n,9741)),"@site/docs/themes/dewdrop.md",9741],d287f9e6:[()=>n.e(612).then(n.bind(n,1344)),"@site/docs/integration/codly.md",1344],d37c9d26:[()=>n.e(743).then(n.bind(n,5455)),"@site/versioned_docs/version-0.4.2/dynamic/simple.md",5455],d434ce9a:[()=>n.e(2992).then(n.bind(n,4946)),"@site/versioned_docs/version-0.4.1/external/pympress.md",4946],d4a2dc55:[()=>n.e(7224).then(n.bind(n,6599)),"@site/versioned_docs/version-0.2.x/build-your-own-theme.md",6599],d736a72a:[()=>n.e(1214).then(n.bind(n,4489)),"@site/versioned_docs/version-0.4.1/utilities/oop.md",4489],d848b1c8:[()=>n.e(2925).then(n.bind(n,9399)),"@site/versioned_docs/version-0.4.0+/themes/metropolis.md",9399],d85491b0:[()=>n.e(6893).then(n.t.bind(n,5986,19)),"~docs/default/category-touyingdocs-02-x-tutorialsidebar-category-progress-2d8.json",5986],d85bd5da:[()=>n.e(6060).then(n.bind(n,8253)),"@site/versioned_docs/version-0.4.2/dynamic/complex.md",8253],d9bab663:[()=>n.e(196).then(n.bind(n,6294)),"@site/versioned_docs/version-0.2.x/external/typst-preview.md",6294],dbe874ba:[()=>n.e(1712).then(n.bind(n,8843)),"@site/versioned_docs/version-0.4.2/integration/codly.md",8843],dc65f2fa:[()=>n.e(9974).then(n.bind(n,5040)),"@site/versioned_docs/version-0.3.2+/layout.md",5040],dd61c10c:[()=>n.e(2231).then(n.t.bind(n,3595,19)),"~docs/default/category-touyingdocs-041-tutorialsidebar-category-utilities-79b.json",3595],de4f60ff:[()=>n.e(3432).then(n.bind(n,2964)),"@site/versioned_docs/version-0.3.2+/dynamic/simple.md",2964],df5b4e08:[()=>n.e(7701).then(n.bind(n,8373)),"@site/versioned_docs/version-0.2.x/dynamic/handout.md",8373],e511abbf:[()=>n.e(1498).then(n.bind(n,5367)),"@site/versioned_docs/version-0.4.0+/external/typst-preview.md",5367],e52dffae:[()=>n.e(7603).then(n.bind(n,9916)),"@site/versioned_docs/version-0.4.1/code-styles.md",9916],e5a884f4:[()=>n.e(8300).then(n.bind(n,5606)),"@site/versioned_docs/version-0.2.x/style.md",5606],e5b11173:[()=>n.e(530).then(n.bind(n,1847)),"@site/versioned_docs/version-0.3.x/code-styles.md",1847],e6bd25e0:[()=>n.e(3832).then(n.t.bind(n,4561,19)),"~docs/default/category-touyingdocs-03-x-tutorialsidebar-category-package-integration-29d.json",4561],e7541c45:[()=>n.e(8990).then(n.bind(n,9706)),"@site/versioned_docs/version-0.4.0+/integration/fletcher.md",9706],e881b3bd:[()=>n.e(8572).then(n.t.bind(n,763,19)),"~docs/default/category-touyingdocs-040-tutorialsidebar-category-external-tools-671.json",763],e9b496d5:[()=>n.e(2418).then(n.t.bind(n,9152,19)),"~docs/default/category-touyingdocsnext-tutorialsidebar-category-package-integration-0ab.json",9152],ebca17e9:[()=>n.e(9095).then(n.bind(n,6917)),"@site/docs/integration/mitex.md",6917],ecfd88b4:[()=>n.e(5619).then(n.bind(n,6111)),"@site/versioned_docs/version-0.3.x/progress/counters.md",6111],ed5e9b8d:[()=>n.e(8207).then(n.bind(n,2307)),"@site/versioned_docs/version-0.4.1/themes/dewdrop.md",2307],f1ad31ea:[()=>n.e(7977).then(n.t.bind(n,5055,19)),"~docs/default/category-touyingdocs-041-tutorialsidebar-category-dynamic-slides-c14.json",5055],f24a23d8:[()=>n.e(2322).then(n.bind(n,2417)),"@site/versioned_docs/version-0.4.0+/start.md",2417],f2a3c69a:[()=>n.e(7510).then(n.bind(n,2195)),"@site/versioned_docs/version-0.4.2/progress/sections.md",2195],f2bffab0:[()=>n.e(6142).then(n.bind(n,1647)),"@site/versioned_docs/version-0.3.2+/dynamic/equation.md",1647],f3a7b3b2:[()=>n.e(9916).then(n.bind(n,1075)),"@site/docs/global-settings.md",1075],f3d96861:[()=>n.e(9754).then(n.bind(n,9476)),"@site/versioned_docs/version-0.3.x/integration/codly.md",9476],f554ac40:[()=>n.e(6232).then(n.bind(n,348)),"@site/versioned_docs/version-0.4.0+/dynamic/equation.md",348],f5938888:[()=>n.e(8338).then(n.t.bind(n,8931,19)),"~blog/default/touying-blog-tags-development-edd.json",8931],f5d6ba2d:[()=>n.e(3284).then(n.bind(n,3293)),"@site/versioned_docs/version-0.4.2/themes/aqua.md",3293],f65f6456:[()=>n.e(2784).then(n.t.bind(n,1292,19)),"~docs/default/category-touyingdocs-032-tutorialsidebar-category-package-integration-e6b.json",1292],f7c1e588:[()=>n.e(9199).then(n.bind(n,5165)),"@site/versioned_docs/version-0.3.x/integration/pinit.md",5165],f8016cde:[()=>n.e(9543).then(n.bind(n,8814)),"@site/versioned_docs/version-0.3.2+/themes/metropolis.md",8814],f80396ac:[()=>n.e(1588).then(n.bind(n,402)),"@site/versioned_docs/version-0.3.2+/integration/cetz.md",402],f8777534:[()=>n.e(1581).then(n.t.bind(n,2498,19)),"~blog/default/touying-blog-45d.json",2498],f9b59e29:[()=>n.e(945).then(n.bind(n,7597)),"@site/versioned_docs/version-0.4.2/integration/mitex.md",7597],fbe708ec:[()=>n.e(9159).then(n.bind(n,3316)),"@site/versioned_docs/version-0.3.2+/dynamic/complex.md",3316],fc190723:[()=>n.e(1188).then(n.bind(n,4266)),"@site/versioned_docs/version-0.4.1/global-settings.md",4266],ff235272:[()=>n.e(5954).then(n.t.bind(n,826,19)),"~docs/default/category-touyingdocs-03-x-tutorialsidebar-category-dynamic-slides-02c.json",826]};var s=n(5893);function l(e){let{error:t,retry:n,pastDelay:o}=e;return t?(0,s.jsxs)("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"},children:[(0,s.jsx)("p",{children:String(t)}),(0,s.jsx)("div",{children:(0,s.jsx)("button",{type:"button",onClick:n,children:"Retry"})})]}):o?(0,s.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"},children:(0,s.jsx)("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb",children:(0,s.jsxs)("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[(0,s.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,s.jsx)("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,s.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,s.jsx)("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,s.jsx)("circle",{cx:"22",cy:"22",r:"8",children:(0,s.jsx)("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})}):null}var c=n(9670),u=n(226);function d(e,t){if("*"===e)return r()({loading:l,loader:()=>n.e(1772).then(n.bind(n,1772)),modules:["@theme/NotFound"],webpack:()=>[1772],render(e,t){const n=e.default;return(0,s.jsx)(u.z,{value:{plugin:{name:"native",id:"default"}},children:(0,s.jsx)(n,{...t})})}});const o=i[`${e}-${t}`],d={},p=[],f=[],g=(0,c.Z)(o);return Object.entries(g).forEach((e=>{let[t,n]=e;const o=a[n];o&&(d[t]=o[0],p.push(o[1]),f.push(o[2]))})),r().Map({loading:l,loader:d,modules:p,webpack:()=>f,render(t,n){const r=JSON.parse(JSON.stringify(o));Object.entries(t).forEach((t=>{let[n,o]=t;const i=o.default;if(!i)throw new Error(`The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);"object"!=typeof i&&"function"!=typeof i||Object.keys(o).filter((e=>"default"!==e)).forEach((e=>{i[e]=o[e]}));let a=r;const s=n.split(".");s.slice(0,-1).forEach((e=>{a=a[e]})),a[s[s.length-1]]=i}));const i=r.__comp;delete r.__comp;const a=r.__context;return delete r.__context,(0,s.jsx)(u.z,{value:a,children:(0,s.jsx)(i,{...r,...n})})}})}const p=[{path:"/touying/blog",component:d("/touying/blog","c0b"),exact:!0},{path:"/touying/blog/archive",component:d("/touying/blog/archive","22c"),exact:!0},{path:"/touying/blog/tags",component:d("/touying/blog/tags","7f2"),exact:!0},{path:"/touying/blog/tags/development",component:d("/touying/blog/tags/development","29e"),exact:!0},{path:"/touying/blog/touying-0-2-0",component:d("/touying/blog/touying-0-2-0","0cb"),exact:!0},{path:"/touying/markdown-page",component:d("/touying/markdown-page","bfb"),exact:!0},{path:"/touying/docs",component:d("/touying/docs","9c0"),routes:[{path:"/touying/docs/0.2.x",component:d("/touying/docs/0.2.x","bc6"),routes:[{path:"/touying/docs/0.2.x",component:d("/touying/docs/0.2.x","61b"),routes:[{path:"/touying/docs/0.2.x/build-your-own-theme",component:d("/touying/docs/0.2.x/build-your-own-theme","b10"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/category/dynamic-slides",component:d("/touying/docs/0.2.x/category/dynamic-slides","ad3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/category/external-tools",component:d("/touying/docs/0.2.x/category/external-tools","eff"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/category/progress",component:d("/touying/docs/0.2.x/category/progress","006"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/category/themes",component:d("/touying/docs/0.2.x/category/themes","461"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/category/utilities",component:d("/touying/docs/0.2.x/category/utilities","9a4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/changelog",component:d("/touying/docs/0.2.x/changelog","20e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/dynamic/complex",component:d("/touying/docs/0.2.x/dynamic/complex","0e0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/dynamic/cover",component:d("/touying/docs/0.2.x/dynamic/cover","408"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/dynamic/equation",component:d("/touying/docs/0.2.x/dynamic/equation","acd"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/dynamic/handout",component:d("/touying/docs/0.2.x/dynamic/handout","979"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/dynamic/other",component:d("/touying/docs/0.2.x/dynamic/other","16d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/dynamic/simple",component:d("/touying/docs/0.2.x/dynamic/simple","521"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/external/pdfpc",component:d("/touying/docs/0.2.x/external/pdfpc","a1d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/external/typst-preview",component:d("/touying/docs/0.2.x/external/typst-preview","917"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/intro",component:d("/touying/docs/0.2.x/intro","4e4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/layout",component:d("/touying/docs/0.2.x/layout","2a4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/progress/counters",component:d("/touying/docs/0.2.x/progress/counters","379"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/progress/sections",component:d("/touying/docs/0.2.x/progress/sections","9b3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/start",component:d("/touying/docs/0.2.x/start","39a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/style",component:d("/touying/docs/0.2.x/style","be9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/themes/dewdrop",component:d("/touying/docs/0.2.x/themes/dewdrop","18e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/themes/metropolis",component:d("/touying/docs/0.2.x/themes/metropolis","149"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/themes/simple",component:d("/touying/docs/0.2.x/themes/simple","a5e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/themes/university",component:d("/touying/docs/0.2.x/themes/university","f75"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/utilities/fit-to",component:d("/touying/docs/0.2.x/utilities/fit-to","e25"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.2.x/utilities/oop",component:d("/touying/docs/0.2.x/utilities/oop","765"),exact:!0,sidebar:"tutorialSidebar"}]}]},{path:"/touying/docs/0.3.2+",component:d("/touying/docs/0.3.2+","50d"),routes:[{path:"/touying/docs/0.3.2+",component:d("/touying/docs/0.3.2+","344"),routes:[{path:"/touying/docs/0.3.2+/build-your-own-theme",component:d("/touying/docs/0.3.2+/build-your-own-theme","33e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/category/dynamic-slides",component:d("/touying/docs/0.3.2+/category/dynamic-slides","0cd"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/category/external-tools",component:d("/touying/docs/0.3.2+/category/external-tools","53c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/category/package-integration",component:d("/touying/docs/0.3.2+/category/package-integration","a9f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/category/progress",component:d("/touying/docs/0.3.2+/category/progress","043"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/category/themes",component:d("/touying/docs/0.3.2+/category/themes","1f7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/category/utilities",component:d("/touying/docs/0.3.2+/category/utilities","36b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/changelog",component:d("/touying/docs/0.3.2+/changelog","a50"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/code-styles",component:d("/touying/docs/0.3.2+/code-styles","98b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/dynamic/complex",component:d("/touying/docs/0.3.2+/dynamic/complex","638"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/dynamic/cover",component:d("/touying/docs/0.3.2+/dynamic/cover","b32"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/dynamic/equation",component:d("/touying/docs/0.3.2+/dynamic/equation","928"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/dynamic/handout",component:d("/touying/docs/0.3.2+/dynamic/handout","762"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/dynamic/other",component:d("/touying/docs/0.3.2+/dynamic/other","795"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/dynamic/simple",component:d("/touying/docs/0.3.2+/dynamic/simple","372"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/external/pdfpc",component:d("/touying/docs/0.3.2+/external/pdfpc","d5f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/external/typst-preview",component:d("/touying/docs/0.3.2+/external/typst-preview","e6e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/global-settings",component:d("/touying/docs/0.3.2+/global-settings","4ec"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/integration/cetz",component:d("/touying/docs/0.3.2+/integration/cetz","523"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/integration/codly",component:d("/touying/docs/0.3.2+/integration/codly","0b4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/integration/fletcher",component:d("/touying/docs/0.3.2+/integration/fletcher","365"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/integration/mitex",component:d("/touying/docs/0.3.2+/integration/mitex","dbc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/integration/pinit",component:d("/touying/docs/0.3.2+/integration/pinit","963"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/integration/polylux",component:d("/touying/docs/0.3.2+/integration/polylux","99a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/intro",component:d("/touying/docs/0.3.2+/intro","b11"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/layout",component:d("/touying/docs/0.3.2+/layout","419"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/progress/counters",component:d("/touying/docs/0.3.2+/progress/counters","c2b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/progress/sections",component:d("/touying/docs/0.3.2+/progress/sections","8c3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/sections",component:d("/touying/docs/0.3.2+/sections","5bb"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/start",component:d("/touying/docs/0.3.2+/start","8bc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/themes/aqua",component:d("/touying/docs/0.3.2+/themes/aqua","83a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/themes/dewdrop",component:d("/touying/docs/0.3.2+/themes/dewdrop","7c1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/themes/metropolis",component:d("/touying/docs/0.3.2+/themes/metropolis","e94"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/themes/simple",component:d("/touying/docs/0.3.2+/themes/simple","096"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/themes/university",component:d("/touying/docs/0.3.2+/themes/university","cab"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/utilities/fit-to",component:d("/touying/docs/0.3.2+/utilities/fit-to","f92"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.2+/utilities/oop",component:d("/touying/docs/0.3.2+/utilities/oop","4c3"),exact:!0,sidebar:"tutorialSidebar"}]}]},{path:"/touying/docs/0.3.x",component:d("/touying/docs/0.3.x","430"),routes:[{path:"/touying/docs/0.3.x",component:d("/touying/docs/0.3.x","e60"),routes:[{path:"/touying/docs/0.3.x/build-your-own-theme",component:d("/touying/docs/0.3.x/build-your-own-theme","25f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/category/dynamic-slides",component:d("/touying/docs/0.3.x/category/dynamic-slides","ed4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/category/external-tools",component:d("/touying/docs/0.3.x/category/external-tools","1b1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/category/package-integration",component:d("/touying/docs/0.3.x/category/package-integration","bf6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/category/progress",component:d("/touying/docs/0.3.x/category/progress","dc4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/category/themes",component:d("/touying/docs/0.3.x/category/themes","1b8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/category/utilities",component:d("/touying/docs/0.3.x/category/utilities","e2f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/changelog",component:d("/touying/docs/0.3.x/changelog","e67"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/code-styles",component:d("/touying/docs/0.3.x/code-styles","d8e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/dynamic/complex",component:d("/touying/docs/0.3.x/dynamic/complex","36f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/dynamic/cover",component:d("/touying/docs/0.3.x/dynamic/cover","534"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/dynamic/equation",component:d("/touying/docs/0.3.x/dynamic/equation","627"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/dynamic/handout",component:d("/touying/docs/0.3.x/dynamic/handout","56d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/dynamic/other",component:d("/touying/docs/0.3.x/dynamic/other","792"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/dynamic/simple",component:d("/touying/docs/0.3.x/dynamic/simple","62e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/external/pdfpc",component:d("/touying/docs/0.3.x/external/pdfpc","5f7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/external/typst-preview",component:d("/touying/docs/0.3.x/external/typst-preview","416"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/global-settings",component:d("/touying/docs/0.3.x/global-settings","308"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/integration/cetz",component:d("/touying/docs/0.3.x/integration/cetz","ee3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/integration/codly",component:d("/touying/docs/0.3.x/integration/codly","519"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/integration/fletcher",component:d("/touying/docs/0.3.x/integration/fletcher","643"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/integration/mitex",component:d("/touying/docs/0.3.x/integration/mitex","3d4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/integration/pinit",component:d("/touying/docs/0.3.x/integration/pinit","4a7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/integration/polylux",component:d("/touying/docs/0.3.x/integration/polylux","44f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/intro",component:d("/touying/docs/0.3.x/intro","45d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/layout",component:d("/touying/docs/0.3.x/layout","4ac"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/progress/counters",component:d("/touying/docs/0.3.x/progress/counters","fab"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/progress/sections",component:d("/touying/docs/0.3.x/progress/sections","92f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/sections",component:d("/touying/docs/0.3.x/sections","93d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/start",component:d("/touying/docs/0.3.x/start","4a8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/themes/dewdrop",component:d("/touying/docs/0.3.x/themes/dewdrop","6ed"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/themes/metropolis",component:d("/touying/docs/0.3.x/themes/metropolis","4d3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/themes/simple",component:d("/touying/docs/0.3.x/themes/simple","d69"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/themes/university",component:d("/touying/docs/0.3.x/themes/university","476"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/utilities/fit-to",component:d("/touying/docs/0.3.x/utilities/fit-to","21f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.3.x/utilities/oop",component:d("/touying/docs/0.3.x/utilities/oop","b87"),exact:!0,sidebar:"tutorialSidebar"}]}]},{path:"/touying/docs/0.4.0+",component:d("/touying/docs/0.4.0+","612"),routes:[{path:"/touying/docs/0.4.0+",component:d("/touying/docs/0.4.0+","00a"),routes:[{path:"/touying/docs/0.4.0+/build-your-own-theme",component:d("/touying/docs/0.4.0+/build-your-own-theme","23f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/category/dynamic-slides",component:d("/touying/docs/0.4.0+/category/dynamic-slides","590"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/category/external-tools",component:d("/touying/docs/0.4.0+/category/external-tools","a66"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/category/package-integration",component:d("/touying/docs/0.4.0+/category/package-integration","e6c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/category/progress",component:d("/touying/docs/0.4.0+/category/progress","3df"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/category/themes",component:d("/touying/docs/0.4.0+/category/themes","0b4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/category/utilities",component:d("/touying/docs/0.4.0+/category/utilities","8f4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/changelog",component:d("/touying/docs/0.4.0+/changelog","85b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/code-styles",component:d("/touying/docs/0.4.0+/code-styles","b89"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/dynamic/complex",component:d("/touying/docs/0.4.0+/dynamic/complex","a79"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/dynamic/cover",component:d("/touying/docs/0.4.0+/dynamic/cover","058"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/dynamic/equation",component:d("/touying/docs/0.4.0+/dynamic/equation","e83"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/dynamic/handout",component:d("/touying/docs/0.4.0+/dynamic/handout","f33"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/dynamic/other",component:d("/touying/docs/0.4.0+/dynamic/other","43e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/dynamic/simple",component:d("/touying/docs/0.4.0+/dynamic/simple","ae8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/external/pdfpc",component:d("/touying/docs/0.4.0+/external/pdfpc","0ba"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/external/typst-preview",component:d("/touying/docs/0.4.0+/external/typst-preview","84f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/global-settings",component:d("/touying/docs/0.4.0+/global-settings","d55"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/integration/cetz",component:d("/touying/docs/0.4.0+/integration/cetz","34b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/integration/codly",component:d("/touying/docs/0.4.0+/integration/codly","d7f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/integration/ctheorems",component:d("/touying/docs/0.4.0+/integration/ctheorems","54c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/integration/fletcher",component:d("/touying/docs/0.4.0+/integration/fletcher","3d6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/integration/mitex",component:d("/touying/docs/0.4.0+/integration/mitex","358"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/integration/pinit",component:d("/touying/docs/0.4.0+/integration/pinit","e86"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/intro",component:d("/touying/docs/0.4.0+/intro","701"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/layout",component:d("/touying/docs/0.4.0+/layout","a59"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/multi-file",component:d("/touying/docs/0.4.0+/multi-file","20b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/progress/counters",component:d("/touying/docs/0.4.0+/progress/counters","293"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/progress/sections",component:d("/touying/docs/0.4.0+/progress/sections","b8d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/sections",component:d("/touying/docs/0.4.0+/sections","58c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/start",component:d("/touying/docs/0.4.0+/start","8c9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/themes/aqua",component:d("/touying/docs/0.4.0+/themes/aqua","294"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/themes/dewdrop",component:d("/touying/docs/0.4.0+/themes/dewdrop","be7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/themes/metropolis",component:d("/touying/docs/0.4.0+/themes/metropolis","692"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/themes/simple",component:d("/touying/docs/0.4.0+/themes/simple","0ea"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/themes/university",component:d("/touying/docs/0.4.0+/themes/university","396"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/utilities/fit-to",component:d("/touying/docs/0.4.0+/utilities/fit-to","f12"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.0+/utilities/oop",component:d("/touying/docs/0.4.0+/utilities/oop","4b1"),exact:!0,sidebar:"tutorialSidebar"}]}]},{path:"/touying/docs/0.4.1",component:d("/touying/docs/0.4.1","eaf"),routes:[{path:"/touying/docs/0.4.1",component:d("/touying/docs/0.4.1","8f8"),routes:[{path:"/touying/docs/0.4.1/build-your-own-theme",component:d("/touying/docs/0.4.1/build-your-own-theme","672"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/category/dynamic-slides",component:d("/touying/docs/0.4.1/category/dynamic-slides","4c3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/category/external-tools",component:d("/touying/docs/0.4.1/category/external-tools","911"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/category/package-integration",component:d("/touying/docs/0.4.1/category/package-integration","1ed"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/category/progress",component:d("/touying/docs/0.4.1/category/progress","004"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/category/themes",component:d("/touying/docs/0.4.1/category/themes","b9e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/category/utilities",component:d("/touying/docs/0.4.1/category/utilities","14a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/changelog",component:d("/touying/docs/0.4.1/changelog","2d6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/code-styles",component:d("/touying/docs/0.4.1/code-styles","a61"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/dynamic/complex",component:d("/touying/docs/0.4.1/dynamic/complex","4d5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/dynamic/cover",component:d("/touying/docs/0.4.1/dynamic/cover","31a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/dynamic/equation",component:d("/touying/docs/0.4.1/dynamic/equation","73a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/dynamic/handout",component:d("/touying/docs/0.4.1/dynamic/handout","6fb"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/dynamic/other",component:d("/touying/docs/0.4.1/dynamic/other","dc1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/dynamic/simple",component:d("/touying/docs/0.4.1/dynamic/simple","7d3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/external/pdfpc",component:d("/touying/docs/0.4.1/external/pdfpc","e48"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/external/pympress",component:d("/touying/docs/0.4.1/external/pympress","706"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/external/typst-preview",component:d("/touying/docs/0.4.1/external/typst-preview","948"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/global-settings",component:d("/touying/docs/0.4.1/global-settings","90a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/integration/cetz",component:d("/touying/docs/0.4.1/integration/cetz","bc0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/integration/codly",component:d("/touying/docs/0.4.1/integration/codly","36c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/integration/ctheorems",component:d("/touying/docs/0.4.1/integration/ctheorems","1a9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/integration/fletcher",component:d("/touying/docs/0.4.1/integration/fletcher","e72"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/integration/mitex",component:d("/touying/docs/0.4.1/integration/mitex","6f0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/integration/pinit",component:d("/touying/docs/0.4.1/integration/pinit","740"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/intro",component:d("/touying/docs/0.4.1/intro","6a8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/layout",component:d("/touying/docs/0.4.1/layout","025"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/multi-file",component:d("/touying/docs/0.4.1/multi-file","213"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/progress/counters",component:d("/touying/docs/0.4.1/progress/counters","818"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/progress/sections",component:d("/touying/docs/0.4.1/progress/sections","873"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/sections",component:d("/touying/docs/0.4.1/sections","125"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/start",component:d("/touying/docs/0.4.1/start","bd6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/themes/aqua",component:d("/touying/docs/0.4.1/themes/aqua","faf"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/themes/dewdrop",component:d("/touying/docs/0.4.1/themes/dewdrop","9ef"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/themes/metropolis",component:d("/touying/docs/0.4.1/themes/metropolis","9db"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/themes/simple",component:d("/touying/docs/0.4.1/themes/simple","451"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/themes/university",component:d("/touying/docs/0.4.1/themes/university","d82"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/utilities/fit-to",component:d("/touying/docs/0.4.1/utilities/fit-to","177"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/0.4.1/utilities/oop",component:d("/touying/docs/0.4.1/utilities/oop","d9a"),exact:!0,sidebar:"tutorialSidebar"}]}]},{path:"/touying/docs/next",component:d("/touying/docs/next","1d2"),routes:[{path:"/touying/docs/next",component:d("/touying/docs/next","473"),routes:[{path:"/touying/docs/next/build-your-own-theme",component:d("/touying/docs/next/build-your-own-theme","329"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/category/dynamic-slides",component:d("/touying/docs/next/category/dynamic-slides","b94"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/category/external-tools",component:d("/touying/docs/next/category/external-tools","6e6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/category/package-integration",component:d("/touying/docs/next/category/package-integration","0ae"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/category/progress",component:d("/touying/docs/next/category/progress","b0e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/category/themes",component:d("/touying/docs/next/category/themes","1b5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/category/utilities",component:d("/touying/docs/next/category/utilities","459"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/changelog",component:d("/touying/docs/next/changelog","5a4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/code-styles",component:d("/touying/docs/next/code-styles","cee"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/dynamic/complex",component:d("/touying/docs/next/dynamic/complex","63c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/dynamic/cover",component:d("/touying/docs/next/dynamic/cover","e00"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/dynamic/equation",component:d("/touying/docs/next/dynamic/equation","cd3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/dynamic/handout",component:d("/touying/docs/next/dynamic/handout","ce2"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/dynamic/other",component:d("/touying/docs/next/dynamic/other","669"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/dynamic/simple",component:d("/touying/docs/next/dynamic/simple","881"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/external/pdfpc",component:d("/touying/docs/next/external/pdfpc","85b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/external/pympress",component:d("/touying/docs/next/external/pympress","5d8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/external/typst-preview",component:d("/touying/docs/next/external/typst-preview","b6b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/global-settings",component:d("/touying/docs/next/global-settings","471"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/integration/cetz",component:d("/touying/docs/next/integration/cetz","4b6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/integration/codly",component:d("/touying/docs/next/integration/codly","63b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/integration/ctheorems",component:d("/touying/docs/next/integration/ctheorems","ab0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/integration/fletcher",component:d("/touying/docs/next/integration/fletcher","00f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/integration/mitex",component:d("/touying/docs/next/integration/mitex","aad"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/integration/pinit",component:d("/touying/docs/next/integration/pinit","242"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/intro",component:d("/touying/docs/next/intro","d28"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/layout",component:d("/touying/docs/next/layout","e3d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/multi-file",component:d("/touying/docs/next/multi-file","435"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/progress/counters",component:d("/touying/docs/next/progress/counters","74c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/progress/sections",component:d("/touying/docs/next/progress/sections","66a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/sections",component:d("/touying/docs/next/sections","db5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/start",component:d("/touying/docs/next/start","592"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/themes/aqua",component:d("/touying/docs/next/themes/aqua","550"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/themes/dewdrop",component:d("/touying/docs/next/themes/dewdrop","53d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/themes/metropolis",component:d("/touying/docs/next/themes/metropolis","842"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/themes/simple",component:d("/touying/docs/next/themes/simple","89c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/themes/university",component:d("/touying/docs/next/themes/university","cd1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/utilities/fit-to",component:d("/touying/docs/next/utilities/fit-to","3a4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/next/utilities/oop",component:d("/touying/docs/next/utilities/oop","b3d"),exact:!0,sidebar:"tutorialSidebar"}]}]},{path:"/touying/docs",component:d("/touying/docs","50e"),routes:[{path:"/touying/docs",component:d("/touying/docs","e0e"),routes:[{path:"/touying/docs/build-your-own-theme",component:d("/touying/docs/build-your-own-theme","b7a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/category/dynamic-slides",component:d("/touying/docs/category/dynamic-slides","30d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/category/external-tools",component:d("/touying/docs/category/external-tools","fc1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/category/package-integration",component:d("/touying/docs/category/package-integration","ad5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/category/progress",component:d("/touying/docs/category/progress","60e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/category/themes",component:d("/touying/docs/category/themes","5bc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/category/utilities",component:d("/touying/docs/category/utilities","b5f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/changelog",component:d("/touying/docs/changelog","c65"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/code-styles",component:d("/touying/docs/code-styles","9f2"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/dynamic/complex",component:d("/touying/docs/dynamic/complex","ce5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/dynamic/cover",component:d("/touying/docs/dynamic/cover","332"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/dynamic/equation",component:d("/touying/docs/dynamic/equation","429"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/dynamic/handout",component:d("/touying/docs/dynamic/handout","a49"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/dynamic/other",component:d("/touying/docs/dynamic/other","5cf"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/dynamic/simple",component:d("/touying/docs/dynamic/simple","d9a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/external/pdfpc",component:d("/touying/docs/external/pdfpc","f87"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/external/pympress",component:d("/touying/docs/external/pympress","1d3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/external/typst-preview",component:d("/touying/docs/external/typst-preview","a2e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/global-settings",component:d("/touying/docs/global-settings","c96"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/integration/cetz",component:d("/touying/docs/integration/cetz","ba6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/integration/codly",component:d("/touying/docs/integration/codly","e5c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/integration/ctheorems",component:d("/touying/docs/integration/ctheorems","607"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/integration/fletcher",component:d("/touying/docs/integration/fletcher","e1b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/integration/mitex",component:d("/touying/docs/integration/mitex","c9d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/integration/pinit",component:d("/touying/docs/integration/pinit","120"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/intro",component:d("/touying/docs/intro","bed"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/layout",component:d("/touying/docs/layout","ce0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/multi-file",component:d("/touying/docs/multi-file","839"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/progress/counters",component:d("/touying/docs/progress/counters","279"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/progress/sections",component:d("/touying/docs/progress/sections","ebd"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/sections",component:d("/touying/docs/sections","2e2"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/start",component:d("/touying/docs/start","2c0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/themes/aqua",component:d("/touying/docs/themes/aqua","bf7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/themes/dewdrop",component:d("/touying/docs/themes/dewdrop","2ef"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/themes/metropolis",component:d("/touying/docs/themes/metropolis","03f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/themes/simple",component:d("/touying/docs/themes/simple","faf"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/themes/university",component:d("/touying/docs/themes/university","7d3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/utilities/fit-to",component:d("/touying/docs/utilities/fit-to","e30"),exact:!0,sidebar:"tutorialSidebar"},{path:"/touying/docs/utilities/oop",component:d("/touying/docs/utilities/oop","1a6"),exact:!0,sidebar:"tutorialSidebar"}]}]}]},{path:"/touying/",component:d("/touying/","622"),exact:!0},{path:"*",component:d("*")}]},8934:(e,t,n)=>{"use strict";n.d(t,{_:()=>i,t:()=>a});var o=n(7294),r=n(5893);const i=o.createContext(!1);function a(e){let{children:t}=e;const[n,a]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{a(!0)}),[]),(0,r.jsx)(i.Provider,{value:n,children:t})}},7221:(e,t,n)=>{"use strict";var o=n(7294),r=n(745),i=n(3727),a=n(405),s=n(412);const l=[n(2497),n(3310),n(8320),n(2295)];var c=n(723),u=n(6550),d=n(8790),p=n(5893);function f(e){let{children:t}=e;return(0,p.jsx)(p.Fragment,{children:t})}var g=n(5742),m=n(2263),h=n(4996),y=n(6668),b=n(1944),v=n(4711),x=n(9727),w=n(3320),S=n(8780),k=n(197);function _(){const{i18n:{currentLocale:e,defaultLocale:t,localeConfigs:n}}=(0,m.Z)(),o=(0,v.l)(),r=n[e].htmlLang,i=e=>e.replace("-","_");return(0,p.jsxs)(g.Z,{children:[Object.entries(n).map((e=>{let[t,{htmlLang:n}]=e;return(0,p.jsx)("link",{rel:"alternate",href:o.createUrl({locale:t,fullyQualified:!0}),hrefLang:n},t)})),(0,p.jsx)("link",{rel:"alternate",href:o.createUrl({locale:t,fullyQualified:!0}),hrefLang:"x-default"}),(0,p.jsx)("meta",{property:"og:locale",content:i(r)}),Object.values(n).filter((e=>r!==e.htmlLang)).map((e=>(0,p.jsx)("meta",{property:"og:locale:alternate",content:i(e.htmlLang)},`meta-og-${e.htmlLang}`)))]})}function E(e){let{permalink:t}=e;const{siteConfig:{url:n}}=(0,m.Z)(),o=function(){const{siteConfig:{url:e,baseUrl:t,trailingSlash:n}}=(0,m.Z)(),{pathname:o}=(0,u.TH)();return e+(0,S.applyTrailingSlash)((0,h.Z)(o),{trailingSlash:n,baseUrl:t})}(),r=t?`${n}${t}`:o;return(0,p.jsxs)(g.Z,{children:[(0,p.jsx)("meta",{property:"og:url",content:r}),(0,p.jsx)("link",{rel:"canonical",href:r})]})}function C(){const{i18n:{currentLocale:e}}=(0,m.Z)(),{metadata:t,image:n}=(0,y.L)();return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsxs)(g.Z,{children:[(0,p.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,p.jsx)("body",{className:x.h})]}),n&&(0,p.jsx)(b.d,{image:n}),(0,p.jsx)(E,{}),(0,p.jsx)(_,{}),(0,p.jsx)(k.Z,{tag:w.HX,locale:e}),(0,p.jsx)(g.Z,{children:t.map(((e,t)=>(0,p.jsx)("meta",{...e},t)))})]})}const T=new Map;function j(e){if(T.has(e.pathname))return{...e,pathname:T.get(e.pathname)};if((0,d.f)(c.Z,e.pathname).some((e=>{let{route:t}=e;return!0===t.exact})))return T.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return T.set(e.pathname,t),{...e,pathname:t}}var N=n(8934),A=n(8940),R=n(469);function L(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),o=1;o{const o=t.default?.[e]??t[e];return o?.(...n)}));return()=>r.forEach((e=>e?.()))}const I=function(e){let{children:t,location:n,previousLocation:o}=e;return(0,R.Z)((()=>{o!==n&&(!function(e){let{location:t,previousLocation:n}=e;if(!n)return;const o=t.pathname===n.pathname,r=t.hash===n.hash,i=t.search===n.search;if(o&&r&&!i)return;const{hash:a}=t;if(a){const e=decodeURIComponent(a.substring(1)),t=document.getElementById(e);t?.scrollIntoView()}else window.scrollTo(0,0)}({location:n,previousLocation:o}),L("onRouteDidUpdate",{previousLocation:o,location:n}))}),[o,n]),t};function P(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,d.f)(c.Z,e))).flat();return Promise.all(t.map((e=>e.route.component.preload?.())))}class O extends o.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=s.Z.canUseDOM?L("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;const n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=L("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),P(n.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:t}=this.props;return(0,p.jsx)(I,{previousLocation:this.previousLocation,location:t,children:(0,p.jsx)(u.AW,{location:t,render:()=>e})})}}const D=O,M="__docusaurus-base-url-issue-banner-container",F="__docusaurus-base-url-issue-banner",z="__docusaurus-base-url-issue-banner-suggestion-container";function B(e){return`\ndocument.addEventListener('DOMContentLoaded', function maybeInsertBanner() {\n var shouldInsert = typeof window['docusaurus'] === 'undefined';\n shouldInsert && insertBanner();\n});\n\nfunction insertBanner() {\n var bannerContainer = document.createElement('div');\n bannerContainer.id = '${M}';\n var bannerHtml = ${JSON.stringify(function(e){return`\n
\n

Your Docusaurus site did not load properly.

\n

A very common reason is a wrong site baseUrl configuration.

\n

Current configured baseUrl = ${e} ${"/"===e?" (default value)":""}

\n

We suggest trying baseUrl =

\n
\n`}(e)).replace(/{if("undefined"==typeof document)return void n();const o=document.createElement("link");o.setAttribute("rel","prefetch"),o.setAttribute("href",e),o.onload=()=>t(),o.onerror=()=>n();const r=document.getElementsByTagName("head")[0]??document.getElementsByName("script")[0]?.parentNode;r?.appendChild(o)}))}:function(e){return new Promise(((t,n)=>{const o=new XMLHttpRequest;o.open("GET",e,!0),o.withCredentials=!0,o.onload=()=>{200===o.status?t():n()},o.send(null)}))};var K=n(9670);const Y=new Set,X=new Set,J=()=>navigator.connection?.effectiveType.includes("2g")||navigator.connection?.saveData,ee={prefetch(e){if(!(e=>!J()&&!X.has(e)&&!Y.has(e))(e))return!1;Y.add(e);const t=(0,d.f)(c.Z,e).flatMap((e=>{return t=e.route.path,Object.entries(V).filter((e=>{let[n]=e;return n.replace(/-[^-]+$/,"")===t})).flatMap((e=>{let[,t]=e;return Object.values((0,K.Z)(t))}));var t}));return Promise.all(t.map((e=>{const t=n.gca(e);return t&&!t.includes("undefined")?Q(t).catch((()=>{})):Promise.resolve()})))},preload:e=>!!(e=>!J()&&!X.has(e))(e)&&(X.add(e),P(e))},te=Object.freeze(ee),ne=Boolean(!0);if(s.Z.canUseDOM){window.docusaurus=te;const e=document.getElementById("__docusaurus"),t=(0,p.jsx)(a.B6,{children:(0,p.jsx)(i.VK,{children:(0,p.jsx)(W,{})})}),n=(e,t)=>{console.error("Docusaurus React Root onRecoverableError:",e,t)},s=()=>{if(ne)o.startTransition((()=>{r.hydrateRoot(e,t,{onRecoverableError:n})}));else{const i=r.createRoot(e,{onRecoverableError:n});o.startTransition((()=>{i.render(t)}))}};P(window.location.pathname).then(s)}},8940:(e,t,n)=>{"use strict";n.d(t,{_:()=>d,M:()=>p});var o=n(7294),r=n(6809);const i=JSON.parse('{"docusaurus-lunr-search":{"default":{"fileNames":{"searchDoc":"search-doc-1716809501284.json","lunrIndex":"lunr-index-1716809501284.json"}}},"docusaurus-plugin-content-docs":{"default":{"path":"/touying/docs","versions":[{"name":"current","label":"Next","isLast":false,"path":"/touying/docs/next","mainDocId":"intro","docs":[{"id":"build-your-own-theme","path":"/touying/docs/next/build-your-own-theme","sidebar":"tutorialSidebar"},{"id":"changelog","path":"/touying/docs/next/changelog","sidebar":"tutorialSidebar"},{"id":"code-styles","path":"/touying/docs/next/code-styles","sidebar":"tutorialSidebar"},{"id":"dynamic/complex","path":"/touying/docs/next/dynamic/complex","sidebar":"tutorialSidebar"},{"id":"dynamic/cover","path":"/touying/docs/next/dynamic/cover","sidebar":"tutorialSidebar"},{"id":"dynamic/equation","path":"/touying/docs/next/dynamic/equation","sidebar":"tutorialSidebar"},{"id":"dynamic/handout","path":"/touying/docs/next/dynamic/handout","sidebar":"tutorialSidebar"},{"id":"dynamic/other","path":"/touying/docs/next/dynamic/other","sidebar":"tutorialSidebar"},{"id":"dynamic/simple","path":"/touying/docs/next/dynamic/simple","sidebar":"tutorialSidebar"},{"id":"external/pdfpc","path":"/touying/docs/next/external/pdfpc","sidebar":"tutorialSidebar"},{"id":"external/pympress","path":"/touying/docs/next/external/pympress","sidebar":"tutorialSidebar"},{"id":"external/typst-preview","path":"/touying/docs/next/external/typst-preview","sidebar":"tutorialSidebar"},{"id":"global-settings","path":"/touying/docs/next/global-settings","sidebar":"tutorialSidebar"},{"id":"integration/cetz","path":"/touying/docs/next/integration/cetz","sidebar":"tutorialSidebar"},{"id":"integration/codly","path":"/touying/docs/next/integration/codly","sidebar":"tutorialSidebar"},{"id":"integration/ctheorems","path":"/touying/docs/next/integration/ctheorems","sidebar":"tutorialSidebar"},{"id":"integration/fletcher","path":"/touying/docs/next/integration/fletcher","sidebar":"tutorialSidebar"},{"id":"integration/mitex","path":"/touying/docs/next/integration/mitex","sidebar":"tutorialSidebar"},{"id":"integration/pinit","path":"/touying/docs/next/integration/pinit","sidebar":"tutorialSidebar"},{"id":"intro","path":"/touying/docs/next/intro","sidebar":"tutorialSidebar"},{"id":"layout","path":"/touying/docs/next/layout","sidebar":"tutorialSidebar"},{"id":"multi-file","path":"/touying/docs/next/multi-file","sidebar":"tutorialSidebar"},{"id":"progress/counters","path":"/touying/docs/next/progress/counters","sidebar":"tutorialSidebar"},{"id":"progress/sections","path":"/touying/docs/next/progress/sections","sidebar":"tutorialSidebar"},{"id":"sections","path":"/touying/docs/next/sections","sidebar":"tutorialSidebar"},{"id":"start","path":"/touying/docs/next/start","sidebar":"tutorialSidebar"},{"id":"themes/aqua","path":"/touying/docs/next/themes/aqua","sidebar":"tutorialSidebar"},{"id":"themes/dewdrop","path":"/touying/docs/next/themes/dewdrop","sidebar":"tutorialSidebar"},{"id":"themes/metropolis","path":"/touying/docs/next/themes/metropolis","sidebar":"tutorialSidebar"},{"id":"themes/simple","path":"/touying/docs/next/themes/simple","sidebar":"tutorialSidebar"},{"id":"themes/university","path":"/touying/docs/next/themes/university","sidebar":"tutorialSidebar"},{"id":"utilities/fit-to","path":"/touying/docs/next/utilities/fit-to","sidebar":"tutorialSidebar"},{"id":"utilities/oop","path":"/touying/docs/next/utilities/oop","sidebar":"tutorialSidebar"},{"id":"/category/dynamic-slides","path":"/touying/docs/next/category/dynamic-slides","sidebar":"tutorialSidebar"},{"id":"/category/package-integration","path":"/touying/docs/next/category/package-integration","sidebar":"tutorialSidebar"},{"id":"/category/themes","path":"/touying/docs/next/category/themes","sidebar":"tutorialSidebar"},{"id":"/category/progress","path":"/touying/docs/next/category/progress","sidebar":"tutorialSidebar"},{"id":"/category/utilities","path":"/touying/docs/next/category/utilities","sidebar":"tutorialSidebar"},{"id":"/category/external-tools","path":"/touying/docs/next/category/external-tools","sidebar":"tutorialSidebar"}],"draftIds":[],"sidebars":{"tutorialSidebar":{"link":{"path":"/touying/docs/next/intro","label":"intro"}}}},{"name":"0.4.2","label":"0.4.2","isLast":true,"path":"/touying/docs","mainDocId":"intro","docs":[{"id":"build-your-own-theme","path":"/touying/docs/build-your-own-theme","sidebar":"tutorialSidebar"},{"id":"changelog","path":"/touying/docs/changelog","sidebar":"tutorialSidebar"},{"id":"code-styles","path":"/touying/docs/code-styles","sidebar":"tutorialSidebar"},{"id":"dynamic/complex","path":"/touying/docs/dynamic/complex","sidebar":"tutorialSidebar"},{"id":"dynamic/cover","path":"/touying/docs/dynamic/cover","sidebar":"tutorialSidebar"},{"id":"dynamic/equation","path":"/touying/docs/dynamic/equation","sidebar":"tutorialSidebar"},{"id":"dynamic/handout","path":"/touying/docs/dynamic/handout","sidebar":"tutorialSidebar"},{"id":"dynamic/other","path":"/touying/docs/dynamic/other","sidebar":"tutorialSidebar"},{"id":"dynamic/simple","path":"/touying/docs/dynamic/simple","sidebar":"tutorialSidebar"},{"id":"external/pdfpc","path":"/touying/docs/external/pdfpc","sidebar":"tutorialSidebar"},{"id":"external/pympress","path":"/touying/docs/external/pympress","sidebar":"tutorialSidebar"},{"id":"external/typst-preview","path":"/touying/docs/external/typst-preview","sidebar":"tutorialSidebar"},{"id":"global-settings","path":"/touying/docs/global-settings","sidebar":"tutorialSidebar"},{"id":"integration/cetz","path":"/touying/docs/integration/cetz","sidebar":"tutorialSidebar"},{"id":"integration/codly","path":"/touying/docs/integration/codly","sidebar":"tutorialSidebar"},{"id":"integration/ctheorems","path":"/touying/docs/integration/ctheorems","sidebar":"tutorialSidebar"},{"id":"integration/fletcher","path":"/touying/docs/integration/fletcher","sidebar":"tutorialSidebar"},{"id":"integration/mitex","path":"/touying/docs/integration/mitex","sidebar":"tutorialSidebar"},{"id":"integration/pinit","path":"/touying/docs/integration/pinit","sidebar":"tutorialSidebar"},{"id":"intro","path":"/touying/docs/intro","sidebar":"tutorialSidebar"},{"id":"layout","path":"/touying/docs/layout","sidebar":"tutorialSidebar"},{"id":"multi-file","path":"/touying/docs/multi-file","sidebar":"tutorialSidebar"},{"id":"progress/counters","path":"/touying/docs/progress/counters","sidebar":"tutorialSidebar"},{"id":"progress/sections","path":"/touying/docs/progress/sections","sidebar":"tutorialSidebar"},{"id":"sections","path":"/touying/docs/sections","sidebar":"tutorialSidebar"},{"id":"start","path":"/touying/docs/start","sidebar":"tutorialSidebar"},{"id":"themes/aqua","path":"/touying/docs/themes/aqua","sidebar":"tutorialSidebar"},{"id":"themes/dewdrop","path":"/touying/docs/themes/dewdrop","sidebar":"tutorialSidebar"},{"id":"themes/metropolis","path":"/touying/docs/themes/metropolis","sidebar":"tutorialSidebar"},{"id":"themes/simple","path":"/touying/docs/themes/simple","sidebar":"tutorialSidebar"},{"id":"themes/university","path":"/touying/docs/themes/university","sidebar":"tutorialSidebar"},{"id":"utilities/fit-to","path":"/touying/docs/utilities/fit-to","sidebar":"tutorialSidebar"},{"id":"utilities/oop","path":"/touying/docs/utilities/oop","sidebar":"tutorialSidebar"},{"id":"/category/dynamic-slides","path":"/touying/docs/category/dynamic-slides","sidebar":"tutorialSidebar"},{"id":"/category/package-integration","path":"/touying/docs/category/package-integration","sidebar":"tutorialSidebar"},{"id":"/category/themes","path":"/touying/docs/category/themes","sidebar":"tutorialSidebar"},{"id":"/category/progress","path":"/touying/docs/category/progress","sidebar":"tutorialSidebar"},{"id":"/category/utilities","path":"/touying/docs/category/utilities","sidebar":"tutorialSidebar"},{"id":"/category/external-tools","path":"/touying/docs/category/external-tools","sidebar":"tutorialSidebar"}],"draftIds":[],"sidebars":{"tutorialSidebar":{"link":{"path":"/touying/docs/intro","label":"intro"}}}},{"name":"0.4.1","label":"0.4.1","isLast":false,"path":"/touying/docs/0.4.1","mainDocId":"intro","docs":[{"id":"build-your-own-theme","path":"/touying/docs/0.4.1/build-your-own-theme","sidebar":"tutorialSidebar"},{"id":"changelog","path":"/touying/docs/0.4.1/changelog","sidebar":"tutorialSidebar"},{"id":"code-styles","path":"/touying/docs/0.4.1/code-styles","sidebar":"tutorialSidebar"},{"id":"dynamic/complex","path":"/touying/docs/0.4.1/dynamic/complex","sidebar":"tutorialSidebar"},{"id":"dynamic/cover","path":"/touying/docs/0.4.1/dynamic/cover","sidebar":"tutorialSidebar"},{"id":"dynamic/equation","path":"/touying/docs/0.4.1/dynamic/equation","sidebar":"tutorialSidebar"},{"id":"dynamic/handout","path":"/touying/docs/0.4.1/dynamic/handout","sidebar":"tutorialSidebar"},{"id":"dynamic/other","path":"/touying/docs/0.4.1/dynamic/other","sidebar":"tutorialSidebar"},{"id":"dynamic/simple","path":"/touying/docs/0.4.1/dynamic/simple","sidebar":"tutorialSidebar"},{"id":"external/pdfpc","path":"/touying/docs/0.4.1/external/pdfpc","sidebar":"tutorialSidebar"},{"id":"external/pympress","path":"/touying/docs/0.4.1/external/pympress","sidebar":"tutorialSidebar"},{"id":"external/typst-preview","path":"/touying/docs/0.4.1/external/typst-preview","sidebar":"tutorialSidebar"},{"id":"global-settings","path":"/touying/docs/0.4.1/global-settings","sidebar":"tutorialSidebar"},{"id":"integration/cetz","path":"/touying/docs/0.4.1/integration/cetz","sidebar":"tutorialSidebar"},{"id":"integration/codly","path":"/touying/docs/0.4.1/integration/codly","sidebar":"tutorialSidebar"},{"id":"integration/ctheorems","path":"/touying/docs/0.4.1/integration/ctheorems","sidebar":"tutorialSidebar"},{"id":"integration/fletcher","path":"/touying/docs/0.4.1/integration/fletcher","sidebar":"tutorialSidebar"},{"id":"integration/mitex","path":"/touying/docs/0.4.1/integration/mitex","sidebar":"tutorialSidebar"},{"id":"integration/pinit","path":"/touying/docs/0.4.1/integration/pinit","sidebar":"tutorialSidebar"},{"id":"intro","path":"/touying/docs/0.4.1/intro","sidebar":"tutorialSidebar"},{"id":"layout","path":"/touying/docs/0.4.1/layout","sidebar":"tutorialSidebar"},{"id":"multi-file","path":"/touying/docs/0.4.1/multi-file","sidebar":"tutorialSidebar"},{"id":"progress/counters","path":"/touying/docs/0.4.1/progress/counters","sidebar":"tutorialSidebar"},{"id":"progress/sections","path":"/touying/docs/0.4.1/progress/sections","sidebar":"tutorialSidebar"},{"id":"sections","path":"/touying/docs/0.4.1/sections","sidebar":"tutorialSidebar"},{"id":"start","path":"/touying/docs/0.4.1/start","sidebar":"tutorialSidebar"},{"id":"themes/aqua","path":"/touying/docs/0.4.1/themes/aqua","sidebar":"tutorialSidebar"},{"id":"themes/dewdrop","path":"/touying/docs/0.4.1/themes/dewdrop","sidebar":"tutorialSidebar"},{"id":"themes/metropolis","path":"/touying/docs/0.4.1/themes/metropolis","sidebar":"tutorialSidebar"},{"id":"themes/simple","path":"/touying/docs/0.4.1/themes/simple","sidebar":"tutorialSidebar"},{"id":"themes/university","path":"/touying/docs/0.4.1/themes/university","sidebar":"tutorialSidebar"},{"id":"utilities/fit-to","path":"/touying/docs/0.4.1/utilities/fit-to","sidebar":"tutorialSidebar"},{"id":"utilities/oop","path":"/touying/docs/0.4.1/utilities/oop","sidebar":"tutorialSidebar"},{"id":"/category/dynamic-slides","path":"/touying/docs/0.4.1/category/dynamic-slides","sidebar":"tutorialSidebar"},{"id":"/category/package-integration","path":"/touying/docs/0.4.1/category/package-integration","sidebar":"tutorialSidebar"},{"id":"/category/themes","path":"/touying/docs/0.4.1/category/themes","sidebar":"tutorialSidebar"},{"id":"/category/progress","path":"/touying/docs/0.4.1/category/progress","sidebar":"tutorialSidebar"},{"id":"/category/utilities","path":"/touying/docs/0.4.1/category/utilities","sidebar":"tutorialSidebar"},{"id":"/category/external-tools","path":"/touying/docs/0.4.1/category/external-tools","sidebar":"tutorialSidebar"}],"draftIds":[],"sidebars":{"tutorialSidebar":{"link":{"path":"/touying/docs/0.4.1/intro","label":"intro"}}}},{"name":"0.4.0+","label":"0.4.0+","isLast":false,"path":"/touying/docs/0.4.0+","mainDocId":"intro","docs":[{"id":"build-your-own-theme","path":"/touying/docs/0.4.0+/build-your-own-theme","sidebar":"tutorialSidebar"},{"id":"changelog","path":"/touying/docs/0.4.0+/changelog","sidebar":"tutorialSidebar"},{"id":"code-styles","path":"/touying/docs/0.4.0+/code-styles","sidebar":"tutorialSidebar"},{"id":"dynamic/complex","path":"/touying/docs/0.4.0+/dynamic/complex","sidebar":"tutorialSidebar"},{"id":"dynamic/cover","path":"/touying/docs/0.4.0+/dynamic/cover","sidebar":"tutorialSidebar"},{"id":"dynamic/equation","path":"/touying/docs/0.4.0+/dynamic/equation","sidebar":"tutorialSidebar"},{"id":"dynamic/handout","path":"/touying/docs/0.4.0+/dynamic/handout","sidebar":"tutorialSidebar"},{"id":"dynamic/other","path":"/touying/docs/0.4.0+/dynamic/other","sidebar":"tutorialSidebar"},{"id":"dynamic/simple","path":"/touying/docs/0.4.0+/dynamic/simple","sidebar":"tutorialSidebar"},{"id":"external/pdfpc","path":"/touying/docs/0.4.0+/external/pdfpc","sidebar":"tutorialSidebar"},{"id":"external/typst-preview","path":"/touying/docs/0.4.0+/external/typst-preview","sidebar":"tutorialSidebar"},{"id":"global-settings","path":"/touying/docs/0.4.0+/global-settings","sidebar":"tutorialSidebar"},{"id":"integration/cetz","path":"/touying/docs/0.4.0+/integration/cetz","sidebar":"tutorialSidebar"},{"id":"integration/codly","path":"/touying/docs/0.4.0+/integration/codly","sidebar":"tutorialSidebar"},{"id":"integration/ctheorems","path":"/touying/docs/0.4.0+/integration/ctheorems","sidebar":"tutorialSidebar"},{"id":"integration/fletcher","path":"/touying/docs/0.4.0+/integration/fletcher","sidebar":"tutorialSidebar"},{"id":"integration/mitex","path":"/touying/docs/0.4.0+/integration/mitex","sidebar":"tutorialSidebar"},{"id":"integration/pinit","path":"/touying/docs/0.4.0+/integration/pinit","sidebar":"tutorialSidebar"},{"id":"intro","path":"/touying/docs/0.4.0+/intro","sidebar":"tutorialSidebar"},{"id":"layout","path":"/touying/docs/0.4.0+/layout","sidebar":"tutorialSidebar"},{"id":"multi-file","path":"/touying/docs/0.4.0+/multi-file","sidebar":"tutorialSidebar"},{"id":"progress/counters","path":"/touying/docs/0.4.0+/progress/counters","sidebar":"tutorialSidebar"},{"id":"progress/sections","path":"/touying/docs/0.4.0+/progress/sections","sidebar":"tutorialSidebar"},{"id":"sections","path":"/touying/docs/0.4.0+/sections","sidebar":"tutorialSidebar"},{"id":"start","path":"/touying/docs/0.4.0+/start","sidebar":"tutorialSidebar"},{"id":"themes/aqua","path":"/touying/docs/0.4.0+/themes/aqua","sidebar":"tutorialSidebar"},{"id":"themes/dewdrop","path":"/touying/docs/0.4.0+/themes/dewdrop","sidebar":"tutorialSidebar"},{"id":"themes/metropolis","path":"/touying/docs/0.4.0+/themes/metropolis","sidebar":"tutorialSidebar"},{"id":"themes/simple","path":"/touying/docs/0.4.0+/themes/simple","sidebar":"tutorialSidebar"},{"id":"themes/university","path":"/touying/docs/0.4.0+/themes/university","sidebar":"tutorialSidebar"},{"id":"utilities/fit-to","path":"/touying/docs/0.4.0+/utilities/fit-to","sidebar":"tutorialSidebar"},{"id":"utilities/oop","path":"/touying/docs/0.4.0+/utilities/oop","sidebar":"tutorialSidebar"},{"id":"/category/dynamic-slides","path":"/touying/docs/0.4.0+/category/dynamic-slides","sidebar":"tutorialSidebar"},{"id":"/category/package-integration","path":"/touying/docs/0.4.0+/category/package-integration","sidebar":"tutorialSidebar"},{"id":"/category/themes","path":"/touying/docs/0.4.0+/category/themes","sidebar":"tutorialSidebar"},{"id":"/category/progress","path":"/touying/docs/0.4.0+/category/progress","sidebar":"tutorialSidebar"},{"id":"/category/utilities","path":"/touying/docs/0.4.0+/category/utilities","sidebar":"tutorialSidebar"},{"id":"/category/external-tools","path":"/touying/docs/0.4.0+/category/external-tools","sidebar":"tutorialSidebar"}],"draftIds":[],"sidebars":{"tutorialSidebar":{"link":{"path":"/touying/docs/0.4.0+/intro","label":"intro"}}}},{"name":"0.3.2+","label":"0.3.2+","isLast":false,"path":"/touying/docs/0.3.2+","mainDocId":"intro","docs":[{"id":"build-your-own-theme","path":"/touying/docs/0.3.2+/build-your-own-theme","sidebar":"tutorialSidebar"},{"id":"changelog","path":"/touying/docs/0.3.2+/changelog","sidebar":"tutorialSidebar"},{"id":"code-styles","path":"/touying/docs/0.3.2+/code-styles","sidebar":"tutorialSidebar"},{"id":"dynamic/complex","path":"/touying/docs/0.3.2+/dynamic/complex","sidebar":"tutorialSidebar"},{"id":"dynamic/cover","path":"/touying/docs/0.3.2+/dynamic/cover","sidebar":"tutorialSidebar"},{"id":"dynamic/equation","path":"/touying/docs/0.3.2+/dynamic/equation","sidebar":"tutorialSidebar"},{"id":"dynamic/handout","path":"/touying/docs/0.3.2+/dynamic/handout","sidebar":"tutorialSidebar"},{"id":"dynamic/other","path":"/touying/docs/0.3.2+/dynamic/other","sidebar":"tutorialSidebar"},{"id":"dynamic/simple","path":"/touying/docs/0.3.2+/dynamic/simple","sidebar":"tutorialSidebar"},{"id":"external/pdfpc","path":"/touying/docs/0.3.2+/external/pdfpc","sidebar":"tutorialSidebar"},{"id":"external/typst-preview","path":"/touying/docs/0.3.2+/external/typst-preview","sidebar":"tutorialSidebar"},{"id":"global-settings","path":"/touying/docs/0.3.2+/global-settings","sidebar":"tutorialSidebar"},{"id":"integration/cetz","path":"/touying/docs/0.3.2+/integration/cetz","sidebar":"tutorialSidebar"},{"id":"integration/codly","path":"/touying/docs/0.3.2+/integration/codly","sidebar":"tutorialSidebar"},{"id":"integration/fletcher","path":"/touying/docs/0.3.2+/integration/fletcher","sidebar":"tutorialSidebar"},{"id":"integration/mitex","path":"/touying/docs/0.3.2+/integration/mitex","sidebar":"tutorialSidebar"},{"id":"integration/pinit","path":"/touying/docs/0.3.2+/integration/pinit","sidebar":"tutorialSidebar"},{"id":"integration/polylux","path":"/touying/docs/0.3.2+/integration/polylux","sidebar":"tutorialSidebar"},{"id":"intro","path":"/touying/docs/0.3.2+/intro","sidebar":"tutorialSidebar"},{"id":"layout","path":"/touying/docs/0.3.2+/layout","sidebar":"tutorialSidebar"},{"id":"progress/counters","path":"/touying/docs/0.3.2+/progress/counters","sidebar":"tutorialSidebar"},{"id":"progress/sections","path":"/touying/docs/0.3.2+/progress/sections","sidebar":"tutorialSidebar"},{"id":"sections","path":"/touying/docs/0.3.2+/sections","sidebar":"tutorialSidebar"},{"id":"start","path":"/touying/docs/0.3.2+/start","sidebar":"tutorialSidebar"},{"id":"themes/aqua","path":"/touying/docs/0.3.2+/themes/aqua","sidebar":"tutorialSidebar"},{"id":"themes/dewdrop","path":"/touying/docs/0.3.2+/themes/dewdrop","sidebar":"tutorialSidebar"},{"id":"themes/metropolis","path":"/touying/docs/0.3.2+/themes/metropolis","sidebar":"tutorialSidebar"},{"id":"themes/simple","path":"/touying/docs/0.3.2+/themes/simple","sidebar":"tutorialSidebar"},{"id":"themes/university","path":"/touying/docs/0.3.2+/themes/university","sidebar":"tutorialSidebar"},{"id":"utilities/fit-to","path":"/touying/docs/0.3.2+/utilities/fit-to","sidebar":"tutorialSidebar"},{"id":"utilities/oop","path":"/touying/docs/0.3.2+/utilities/oop","sidebar":"tutorialSidebar"},{"id":"/category/dynamic-slides","path":"/touying/docs/0.3.2+/category/dynamic-slides","sidebar":"tutorialSidebar"},{"id":"/category/package-integration","path":"/touying/docs/0.3.2+/category/package-integration","sidebar":"tutorialSidebar"},{"id":"/category/themes","path":"/touying/docs/0.3.2+/category/themes","sidebar":"tutorialSidebar"},{"id":"/category/progress","path":"/touying/docs/0.3.2+/category/progress","sidebar":"tutorialSidebar"},{"id":"/category/utilities","path":"/touying/docs/0.3.2+/category/utilities","sidebar":"tutorialSidebar"},{"id":"/category/external-tools","path":"/touying/docs/0.3.2+/category/external-tools","sidebar":"tutorialSidebar"}],"draftIds":[],"sidebars":{"tutorialSidebar":{"link":{"path":"/touying/docs/0.3.2+/intro","label":"intro"}}}},{"name":"0.3.x","label":"0.3.x","isLast":false,"path":"/touying/docs/0.3.x","mainDocId":"intro","docs":[{"id":"build-your-own-theme","path":"/touying/docs/0.3.x/build-your-own-theme","sidebar":"tutorialSidebar"},{"id":"changelog","path":"/touying/docs/0.3.x/changelog","sidebar":"tutorialSidebar"},{"id":"code-styles","path":"/touying/docs/0.3.x/code-styles","sidebar":"tutorialSidebar"},{"id":"dynamic/complex","path":"/touying/docs/0.3.x/dynamic/complex","sidebar":"tutorialSidebar"},{"id":"dynamic/cover","path":"/touying/docs/0.3.x/dynamic/cover","sidebar":"tutorialSidebar"},{"id":"dynamic/equation","path":"/touying/docs/0.3.x/dynamic/equation","sidebar":"tutorialSidebar"},{"id":"dynamic/handout","path":"/touying/docs/0.3.x/dynamic/handout","sidebar":"tutorialSidebar"},{"id":"dynamic/other","path":"/touying/docs/0.3.x/dynamic/other","sidebar":"tutorialSidebar"},{"id":"dynamic/simple","path":"/touying/docs/0.3.x/dynamic/simple","sidebar":"tutorialSidebar"},{"id":"external/pdfpc","path":"/touying/docs/0.3.x/external/pdfpc","sidebar":"tutorialSidebar"},{"id":"external/typst-preview","path":"/touying/docs/0.3.x/external/typst-preview","sidebar":"tutorialSidebar"},{"id":"global-settings","path":"/touying/docs/0.3.x/global-settings","sidebar":"tutorialSidebar"},{"id":"integration/cetz","path":"/touying/docs/0.3.x/integration/cetz","sidebar":"tutorialSidebar"},{"id":"integration/codly","path":"/touying/docs/0.3.x/integration/codly","sidebar":"tutorialSidebar"},{"id":"integration/fletcher","path":"/touying/docs/0.3.x/integration/fletcher","sidebar":"tutorialSidebar"},{"id":"integration/mitex","path":"/touying/docs/0.3.x/integration/mitex","sidebar":"tutorialSidebar"},{"id":"integration/pinit","path":"/touying/docs/0.3.x/integration/pinit","sidebar":"tutorialSidebar"},{"id":"integration/polylux","path":"/touying/docs/0.3.x/integration/polylux","sidebar":"tutorialSidebar"},{"id":"intro","path":"/touying/docs/0.3.x/intro","sidebar":"tutorialSidebar"},{"id":"layout","path":"/touying/docs/0.3.x/layout","sidebar":"tutorialSidebar"},{"id":"progress/counters","path":"/touying/docs/0.3.x/progress/counters","sidebar":"tutorialSidebar"},{"id":"progress/sections","path":"/touying/docs/0.3.x/progress/sections","sidebar":"tutorialSidebar"},{"id":"sections","path":"/touying/docs/0.3.x/sections","sidebar":"tutorialSidebar"},{"id":"start","path":"/touying/docs/0.3.x/start","sidebar":"tutorialSidebar"},{"id":"themes/dewdrop","path":"/touying/docs/0.3.x/themes/dewdrop","sidebar":"tutorialSidebar"},{"id":"themes/metropolis","path":"/touying/docs/0.3.x/themes/metropolis","sidebar":"tutorialSidebar"},{"id":"themes/simple","path":"/touying/docs/0.3.x/themes/simple","sidebar":"tutorialSidebar"},{"id":"themes/university","path":"/touying/docs/0.3.x/themes/university","sidebar":"tutorialSidebar"},{"id":"utilities/fit-to","path":"/touying/docs/0.3.x/utilities/fit-to","sidebar":"tutorialSidebar"},{"id":"utilities/oop","path":"/touying/docs/0.3.x/utilities/oop","sidebar":"tutorialSidebar"},{"id":"/category/dynamic-slides","path":"/touying/docs/0.3.x/category/dynamic-slides","sidebar":"tutorialSidebar"},{"id":"/category/package-integration","path":"/touying/docs/0.3.x/category/package-integration","sidebar":"tutorialSidebar"},{"id":"/category/themes","path":"/touying/docs/0.3.x/category/themes","sidebar":"tutorialSidebar"},{"id":"/category/progress","path":"/touying/docs/0.3.x/category/progress","sidebar":"tutorialSidebar"},{"id":"/category/utilities","path":"/touying/docs/0.3.x/category/utilities","sidebar":"tutorialSidebar"},{"id":"/category/external-tools","path":"/touying/docs/0.3.x/category/external-tools","sidebar":"tutorialSidebar"}],"draftIds":[],"sidebars":{"tutorialSidebar":{"link":{"path":"/touying/docs/0.3.x/intro","label":"intro"}}}},{"name":"0.2.x","label":"0.2.x","isLast":false,"path":"/touying/docs/0.2.x","mainDocId":"intro","docs":[{"id":"build-your-own-theme","path":"/touying/docs/0.2.x/build-your-own-theme","sidebar":"tutorialSidebar"},{"id":"changelog","path":"/touying/docs/0.2.x/changelog","sidebar":"tutorialSidebar"},{"id":"dynamic/complex","path":"/touying/docs/0.2.x/dynamic/complex","sidebar":"tutorialSidebar"},{"id":"dynamic/cover","path":"/touying/docs/0.2.x/dynamic/cover","sidebar":"tutorialSidebar"},{"id":"dynamic/equation","path":"/touying/docs/0.2.x/dynamic/equation","sidebar":"tutorialSidebar"},{"id":"dynamic/handout","path":"/touying/docs/0.2.x/dynamic/handout","sidebar":"tutorialSidebar"},{"id":"dynamic/other","path":"/touying/docs/0.2.x/dynamic/other","sidebar":"tutorialSidebar"},{"id":"dynamic/simple","path":"/touying/docs/0.2.x/dynamic/simple","sidebar":"tutorialSidebar"},{"id":"external/pdfpc","path":"/touying/docs/0.2.x/external/pdfpc","sidebar":"tutorialSidebar"},{"id":"external/typst-preview","path":"/touying/docs/0.2.x/external/typst-preview","sidebar":"tutorialSidebar"},{"id":"intro","path":"/touying/docs/0.2.x/intro","sidebar":"tutorialSidebar"},{"id":"layout","path":"/touying/docs/0.2.x/layout","sidebar":"tutorialSidebar"},{"id":"progress/counters","path":"/touying/docs/0.2.x/progress/counters","sidebar":"tutorialSidebar"},{"id":"progress/sections","path":"/touying/docs/0.2.x/progress/sections","sidebar":"tutorialSidebar"},{"id":"start","path":"/touying/docs/0.2.x/start","sidebar":"tutorialSidebar"},{"id":"style","path":"/touying/docs/0.2.x/style","sidebar":"tutorialSidebar"},{"id":"themes/dewdrop","path":"/touying/docs/0.2.x/themes/dewdrop","sidebar":"tutorialSidebar"},{"id":"themes/metropolis","path":"/touying/docs/0.2.x/themes/metropolis","sidebar":"tutorialSidebar"},{"id":"themes/simple","path":"/touying/docs/0.2.x/themes/simple","sidebar":"tutorialSidebar"},{"id":"themes/university","path":"/touying/docs/0.2.x/themes/university","sidebar":"tutorialSidebar"},{"id":"utilities/fit-to","path":"/touying/docs/0.2.x/utilities/fit-to","sidebar":"tutorialSidebar"},{"id":"utilities/oop","path":"/touying/docs/0.2.x/utilities/oop","sidebar":"tutorialSidebar"},{"id":"/category/dynamic-slides","path":"/touying/docs/0.2.x/category/dynamic-slides","sidebar":"tutorialSidebar"},{"id":"/category/themes","path":"/touying/docs/0.2.x/category/themes","sidebar":"tutorialSidebar"},{"id":"/category/progress","path":"/touying/docs/0.2.x/category/progress","sidebar":"tutorialSidebar"},{"id":"/category/utilities","path":"/touying/docs/0.2.x/category/utilities","sidebar":"tutorialSidebar"},{"id":"/category/external-tools","path":"/touying/docs/0.2.x/category/external-tools","sidebar":"tutorialSidebar"}],"draftIds":[],"sidebars":{"tutorialSidebar":{"link":{"path":"/touying/docs/0.2.x/intro","label":"intro"}}}}],"breadcrumbs":true}}}'),a=JSON.parse('{"defaultLocale":"en","locales":["en","zh"],"path":"i18n","currentLocale":"en","localeConfigs":{"en":{"label":"English","direction":"ltr","htmlLang":"en","calendar":"gregory","path":"en"},"zh":{"label":"\u4e2d\u6587","direction":"ltr","htmlLang":"zh","calendar":"gregory","path":"zh"}}}');var s=n(7529);const l=JSON.parse('{"docusaurusVersion":"3.1.0","siteVersion":"0.0.0","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"3.1.0"},"docusaurus-plugin-content-blog":{"type":"package","name":"@docusaurus/plugin-content-blog","version":"3.1.0"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"3.1.0"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"3.1.0"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"3.1.0"},"docusaurus-lunr-search":{"type":"package","name":"docusaurus-lunr-search","version":"3.4.0"}}}');var c=n(5893);const u={siteConfig:r.default,siteMetadata:l,globalData:i,i18n:a,codeTranslations:s},d=o.createContext(u);function p(e){let{children:t}=e;return(0,c.jsx)(d.Provider,{value:u,children:t})}},4763:(e,t,n)=>{"use strict";n.d(t,{Z:()=>f});var o=n(7294),r=n(412),i=n(5742),a=n(8780),s=n(4023),l=n(5893);function c(e){let{error:t,tryAgain:n}=e;return(0,l.jsxs)("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"flex-start",minHeight:"100vh",width:"100%",maxWidth:"80ch",fontSize:"20px",margin:"0 auto",padding:"1rem"},children:[(0,l.jsx)("h1",{style:{fontSize:"3rem"},children:"This page crashed"}),(0,l.jsx)("button",{type:"button",onClick:n,style:{margin:"1rem 0",fontSize:"2rem",cursor:"pointer",borderRadius:20,padding:"1rem"},children:"Try again"}),(0,l.jsx)(u,{error:t})]})}function u(e){let{error:t}=e;const n=(0,a.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,l.jsx)("p",{style:{whiteSpace:"pre-wrap"},children:n})}function d(e){let{error:t,tryAgain:n}=e;return(0,l.jsxs)(f,{fallback:()=>(0,l.jsx)(c,{error:t,tryAgain:n}),children:[(0,l.jsx)(i.Z,{children:(0,l.jsx)("title",{children:"Page Error"})}),(0,l.jsx)(s.Z,{children:(0,l.jsx)(c,{error:t,tryAgain:n})})]})}const p=e=>(0,l.jsx)(d,{...e});class f extends o.Component{constructor(e){super(e),this.state={error:null}}componentDidCatch(e){r.Z.canUseDOM&&this.setState({error:e})}render(){const{children:e}=this.props,{error:t}=this.state;if(t){const e={error:t,tryAgain:()=>this.setState({error:null})};return(this.props.fallback??p)(e)}return e??null}}},412:(e,t,n)=>{"use strict";n.d(t,{Z:()=>r});const o="undefined"!=typeof window&&"document"in window&&"createElement"in window.document,r={canUseDOM:o,canUseEventListeners:o&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:o&&"IntersectionObserver"in window,canUseViewport:o&&"screen"in window}},5742:(e,t,n)=>{"use strict";n.d(t,{Z:()=>i});n(7294);var o=n(405),r=n(5893);function i(e){return(0,r.jsx)(o.ql,{...e})}},3692:(e,t,n)=>{"use strict";n.d(t,{Z:()=>f});var o=n(7294),r=n(3727),i=n(8780),a=n(2263),s=n(3919),l=n(412),c=n(8138),u=n(4996),d=n(5893);function p(e,t){let{isNavLink:n,to:p,href:f,activeClassName:g,isActive:m,"data-noBrokenLinkCheck":h,autoAddBaseUrl:y=!0,...b}=e;const{siteConfig:{trailingSlash:v,baseUrl:x}}=(0,a.Z)(),{withBaseUrl:w}=(0,u.C)(),S=(0,c.Z)(),k=(0,o.useRef)(null);(0,o.useImperativeHandle)(t,(()=>k.current));const _=p||f;const E=(0,s.Z)(_),C=_?.replace("pathname://","");let T=void 0!==C?(j=C,y&&(e=>e.startsWith("/"))(j)?w(j):j):void 0;var j;T&&E&&(T=(0,i.applyTrailingSlash)(T,{trailingSlash:v,baseUrl:x}));const N=(0,o.useRef)(!1),A=n?r.OL:r.rU,R=l.Z.canUseIntersectionObserver,L=(0,o.useRef)(),I=()=>{N.current||null==T||(window.docusaurus.preload(T),N.current=!0)};(0,o.useEffect)((()=>(!R&&E&&null!=T&&window.docusaurus.prefetch(T),()=>{R&&L.current&&L.current.disconnect()})),[L,T,R,E]);const P=T?.startsWith("#")??!1,O=!T||!E||P;return O||h||S.collectLink(T),O?(0,d.jsx)("a",{ref:k,href:T,..._&&!E&&{target:"_blank",rel:"noopener noreferrer"},...b}):(0,d.jsx)(A,{...b,onMouseEnter:I,onTouchStart:I,innerRef:e=>{k.current=e,R&&e&&E&&(L.current=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(L.current.unobserve(e),L.current.disconnect(),null!=T&&window.docusaurus.prefetch(T))}))})),L.current.observe(e))},to:T,...n&&{isActive:m,activeClassName:g}})}const f=o.forwardRef(p)},5999:(e,t,n)=>{"use strict";n.d(t,{Z:()=>c,I:()=>l});var o=n(7294),r=n(5893);function i(e,t){const n=e.split(/(\{\w+\})/).map(((e,n)=>{if(n%2==1){const n=t?.[e.slice(1,-1)];if(void 0!==n)return n}return e}));return n.some((e=>(0,o.isValidElement)(e)))?n.map(((e,t)=>(0,o.isValidElement)(e)?o.cloneElement(e,{key:t}):e)).filter((e=>""!==e)):n.join("")}var a=n(7529);function s(e){let{id:t,message:n}=e;if(void 0===t&&void 0===n)throw new Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return a[t??n]??n??t}function l(e,t){let{message:n,id:o}=e;return i(s({message:n,id:o}),t)}function c(e){let{children:t,id:n,values:o}=e;if(t&&"string"!=typeof t)throw console.warn("Illegal children",t),new Error("The Docusaurus component only accept simple string values");const a=s({message:t,id:n});return(0,r.jsx)(r.Fragment,{children:i(a,o)})}},9935:(e,t,n)=>{"use strict";n.d(t,{m:()=>o});const o="default"},3919:(e,t,n)=>{"use strict";function o(e){return/^(?:\w*:|\/\/)/.test(e)}function r(e){return void 0!==e&&!o(e)}n.d(t,{Z:()=>r,b:()=>o})},4996:(e,t,n)=>{"use strict";n.d(t,{C:()=>a,Z:()=>s});var o=n(7294),r=n(2263),i=n(3919);function a(){const{siteConfig:{baseUrl:e,url:t}}=(0,r.Z)(),n=(0,o.useCallback)(((n,o)=>function(e,t,n,o){let{forcePrependBaseUrl:r=!1,absolute:a=!1}=void 0===o?{}:o;if(!n||n.startsWith("#")||(0,i.b)(n))return n;if(r)return t+n.replace(/^\//,"");if(n===t.replace(/\/$/,""))return t;const s=n.startsWith(t)?n:t+n.replace(/^\//,"");return a?e+s:s}(t,e,n,o)),[t,e]);return{withBaseUrl:n}}function s(e,t){void 0===t&&(t={});const{withBaseUrl:n}=a();return n(e,t)}},8138:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});var o=n(7294);n(5893);const r=o.createContext({collectAnchor:()=>{},collectLink:()=>{}}),i=()=>(0,o.useContext)(r);function a(){return i()}},2263:(e,t,n)=>{"use strict";n.d(t,{Z:()=>i});var o=n(7294),r=n(8940);function i(){return(0,o.useContext)(r._)}},8084:(e,t,n)=>{"use strict";n.d(t,{OD:()=>i,eZ:()=>a});var o=n(2263),r=n(9935);function i(e,t){void 0===t&&(t={});const n=function(){const{globalData:e}=(0,o.Z)();return e}()[e];if(!n&&t.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin.`);return n}function a(e,t,n){void 0===t&&(t=r.m),void 0===n&&(n={});const o=i(e),a=o?.[t];if(!a&&n.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin with id "${t}".`);return a}},2389:(e,t,n)=>{"use strict";n.d(t,{Z:()=>i});var o=n(7294),r=n(8934);function i(){return(0,o.useContext)(r._)}},469:(e,t,n)=>{"use strict";n.d(t,{Z:()=>r});var o=n(7294);const r=n(412).Z.canUseDOM?o.useLayoutEffect:o.useEffect},9670:(e,t,n)=>{"use strict";n.d(t,{Z:()=>r});const o=e=>"object"==typeof e&&!!e&&Object.keys(e).length>0;function r(e){const t={};return function e(n,r){Object.entries(n).forEach((n=>{let[i,a]=n;const s=r?`${r}.${i}`:i;o(a)?e(a,s):t[s]=a}))}(e),t}},226:(e,t,n)=>{"use strict";n.d(t,{_:()=>i,z:()=>a});var o=n(7294),r=n(5893);const i=o.createContext(null);function a(e){let{children:t,value:n}=e;const a=o.useContext(i),s=(0,o.useMemo)((()=>function(e){let{parent:t,value:n}=e;if(!t){if(!n)throw new Error("Unexpected: no Docusaurus route context found");if(!("plugin"in n))throw new Error("Unexpected: Docusaurus topmost route context has no `plugin` attribute");return n}const o={...t.data,...n?.data};return{plugin:t.plugin,data:o}}({parent:a,value:n})),[a,n]);return(0,r.jsx)(i.Provider,{value:s,children:t})}},4104:(e,t,n)=>{"use strict";n.d(t,{Iw:()=>f,gA:()=>u,_r:()=>l,Jo:()=>g,zh:()=>c,yW:()=>p,gB:()=>d});var o=n(6550),r=n(8084);const i=e=>e.versions.find((e=>e.isLast));function a(e,t){const n=function(e,t){const n=i(e);return[...e.versions.filter((e=>e!==n)),n].find((e=>!!(0,o.LX)(t,{path:e.path,exact:!1,strict:!1})))}(e,t),r=n?.docs.find((e=>!!(0,o.LX)(t,{path:e.path,exact:!0,strict:!1})));return{activeVersion:n,activeDoc:r,alternateDocVersions:r?function(t){const n={};return e.versions.forEach((e=>{e.docs.forEach((o=>{o.id===t&&(n[e.name]=o)}))})),n}(r.id):{}}}const s={},l=()=>(0,r.OD)("docusaurus-plugin-content-docs")??s,c=e=>(0,r.eZ)("docusaurus-plugin-content-docs",e,{failfast:!0});function u(e){void 0===e&&(e={});const t=l(),{pathname:n}=(0,o.TH)();return function(e,t,n){void 0===n&&(n={});const r=Object.entries(e).sort(((e,t)=>t[1].path.localeCompare(e[1].path))).find((e=>{let[,n]=e;return!!(0,o.LX)(t,{path:n.path,exact:!1,strict:!1})})),i=r?{pluginId:r[0],pluginData:r[1]}:void 0;if(!i&&n.failfast)throw new Error(`Can't find active docs plugin for "${t}" pathname, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: ${Object.values(e).map((e=>e.path)).join(", ")}`);return i}(t,n,e)}function d(e){return c(e).versions}function p(e){const t=c(e);return i(t)}function f(e){const t=c(e),{pathname:n}=(0,o.TH)();return a(t,n)}function g(e){const t=c(e),{pathname:n}=(0,o.TH)();return function(e,t){const n=i(e);return{latestDocSuggestion:a(e,t).alternateDocVersions[n.name],latestVersionSuggestion:n}}(t,n)}},8320:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>i});var o=n(4865),r=n.n(o);r().configure({showSpinner:!1});const i={onRouteUpdate(e){let{location:t,previousLocation:n}=e;if(n&&t.pathname!==n.pathname){const e=window.setTimeout((()=>{r().start()}),200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){r().done()}}},3310:(e,t,n)=>{"use strict";n.r(t);var o=n(2573),r=n(6809);!function(e){const{themeConfig:{prism:t}}=r.default,{additionalLanguages:o}=t;globalThis.Prism=e,o.forEach((e=>{"php"===e&&n(6854),n(6726)(`./prism-${e}`)})),delete globalThis.Prism}(o.p1)},2503:(e,t,n)=>{"use strict";n.d(t,{Z:()=>u});n(7294);var o=n(512),r=n(5999),i=n(6668),a=n(3692),s=n(8138);const l={anchorWithStickyNavbar:"anchorWithStickyNavbar_LWe7",anchorWithHideOnScrollNavbar:"anchorWithHideOnScrollNavbar_WYt5"};var c=n(5893);function u(e){let{as:t,id:n,...u}=e;const d=(0,s.Z)(),{navbar:{hideOnScroll:p}}=(0,i.L)();if("h1"===t||!n)return(0,c.jsx)(t,{...u,id:void 0});d.collectAnchor(n);const f=(0,r.I)({id:"theme.common.headingLinkTitle",message:"Direct link to {heading}",description:"Title for link to heading"},{heading:"string"==typeof u.children?u.children:n});return(0,c.jsxs)(t,{...u,className:(0,o.Z)("anchor",p?l.anchorWithHideOnScrollNavbar:l.anchorWithStickyNavbar,u.className),id:n,children:[u.children,(0,c.jsx)(a.Z,{className:"hash-link",to:`#${n}`,"aria-label":f,title:f,children:"\u200b"})]})}},9471:(e,t,n)=>{"use strict";n.d(t,{Z:()=>i});n(7294);const o={iconExternalLink:"iconExternalLink_nPIU"};var r=n(5893);function i(e){let{width:t=13.5,height:n=13.5}=e;return(0,r.jsx)("svg",{width:t,height:n,"aria-hidden":"true",viewBox:"0 0 24 24",className:o.iconExternalLink,children:(0,r.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})}},4023:(e,t,n)=>{"use strict";n.d(t,{Z:()=>vt});var o=n(7294),r=n(512),i=n(4763),a=n(1944),s=n(6550),l=n(5999),c=n(5936),u=n(5893);const d="__docusaurus_skipToContent_fallback";function p(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}function f(){const e=(0,o.useRef)(null),{action:t}=(0,s.k6)(),n=(0,o.useCallback)((e=>{e.preventDefault();const t=document.querySelector("main:first-of-type")??document.getElementById(d);t&&p(t)}),[]);return(0,c.S)((n=>{let{location:o}=n;e.current&&!o.hash&&"PUSH"===t&&p(e.current)})),{containerRef:e,onClick:n}}const g=(0,l.I)({id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",message:"Skip to main content"});function m(e){const t=e.children??g,{containerRef:n,onClick:o}=f();return(0,u.jsx)("div",{ref:n,role:"region","aria-label":g,children:(0,u.jsx)("a",{...e,href:`#${d}`,onClick:o,children:t})})}var h=n(5281),y=n(9727);const b={skipToContent:"skipToContent_fXgn"};function v(){return(0,u.jsx)(m,{className:b.skipToContent})}var x=n(6668),w=n(9689);function S(e){let{width:t=21,height:n=21,color:o="currentColor",strokeWidth:r=1.2,className:i,...a}=e;return(0,u.jsx)("svg",{viewBox:"0 0 15 15",width:t,height:n,...a,children:(0,u.jsx)("g",{stroke:o,strokeWidth:r,children:(0,u.jsx)("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})})})}const k={closeButton:"closeButton_CVFx"};function _(e){return(0,u.jsx)("button",{type:"button","aria-label":(0,l.I)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"}),...e,className:(0,r.Z)("clean-btn close",k.closeButton,e.className),children:(0,u.jsx)(S,{width:14,height:14,strokeWidth:3.1})})}const E={content:"content_knG7"};function C(e){const{announcementBar:t}=(0,x.L)(),{content:n}=t;return(0,u.jsx)("div",{...e,className:(0,r.Z)(E.content,e.className),dangerouslySetInnerHTML:{__html:n}})}const T={announcementBar:"announcementBar_mb4j",announcementBarPlaceholder:"announcementBarPlaceholder_vyr4",announcementBarClose:"announcementBarClose_gvF7",announcementBarContent:"announcementBarContent_xLdY"};function j(){const{announcementBar:e}=(0,x.L)(),{isActive:t,close:n}=(0,w.nT)();if(!t)return null;const{backgroundColor:o,textColor:r,isCloseable:i}=e;return(0,u.jsxs)("div",{className:T.announcementBar,style:{backgroundColor:o,color:r},role:"banner",children:[i&&(0,u.jsx)("div",{className:T.announcementBarPlaceholder}),(0,u.jsx)(C,{className:T.announcementBarContent}),i&&(0,u.jsx)(_,{onClick:n,className:T.announcementBarClose})]})}var N=n(2961),A=n(2466);var R=n(902),L=n(3102);const I=o.createContext(null);function P(e){let{children:t}=e;const n=function(){const e=(0,N.e)(),t=(0,L.HY)(),[n,r]=(0,o.useState)(!1),i=null!==t.component,a=(0,R.D9)(i);return(0,o.useEffect)((()=>{i&&!a&&r(!0)}),[i,a]),(0,o.useEffect)((()=>{i?e.shown||r(!0):r(!1)}),[e.shown,i]),(0,o.useMemo)((()=>[n,r]),[n])}();return(0,u.jsx)(I.Provider,{value:n,children:t})}function O(e){if(e.component){const t=e.component;return(0,u.jsx)(t,{...e.props})}}function D(){const e=(0,o.useContext)(I);if(!e)throw new R.i6("NavbarSecondaryMenuDisplayProvider");const[t,n]=e,r=(0,o.useCallback)((()=>n(!1)),[n]),i=(0,L.HY)();return(0,o.useMemo)((()=>({shown:t,hide:r,content:O(i)})),[r,i,t])}function M(e){let{header:t,primaryMenu:n,secondaryMenu:o}=e;const{shown:i}=D();return(0,u.jsxs)("div",{className:"navbar-sidebar",children:[t,(0,u.jsxs)("div",{className:(0,r.Z)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":i}),children:[(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:n}),(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:o})]})]})}var F=n(2949),z=n(2389);function B(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"})})}function $(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"})})}const U={toggle:"toggle_vylO",toggleButton:"toggleButton_gllP",darkToggleIcon:"darkToggleIcon_wfgR",lightToggleIcon:"lightToggleIcon_pyhR",toggleButtonDisabled:"toggleButtonDisabled_aARS"};function q(e){let{className:t,buttonClassName:n,value:o,onChange:i}=e;const a=(0,z.Z)(),s=(0,l.I)({message:"Switch between dark and light mode (currently {mode})",id:"theme.colorToggle.ariaLabel",description:"The ARIA label for the navbar color mode toggle"},{mode:"dark"===o?(0,l.I)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,l.I)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return(0,u.jsx)("div",{className:(0,r.Z)(U.toggle,t),children:(0,u.jsxs)("button",{className:(0,r.Z)("clean-btn",U.toggleButton,!a&&U.toggleButtonDisabled,n),type:"button",onClick:()=>i("dark"===o?"light":"dark"),disabled:!a,title:s,"aria-label":s,"aria-live":"polite",children:[(0,u.jsx)(B,{className:(0,r.Z)(U.toggleIcon,U.lightToggleIcon)}),(0,u.jsx)($,{className:(0,r.Z)(U.toggleIcon,U.darkToggleIcon)})]})})}const H=o.memo(q),G={darkNavbarColorModeToggle:"darkNavbarColorModeToggle_X3D1"};function Z(e){let{className:t}=e;const n=(0,x.L)().navbar.style,o=(0,x.L)().colorMode.disableSwitch,{colorMode:r,setColorMode:i}=(0,F.I)();return o?null:(0,u.jsx)(H,{className:t,buttonClassName:"dark"===n?G.darkNavbarColorModeToggle:void 0,value:r,onChange:i})}var W=n(1327);function V(){return(0,u.jsx)(W.Z,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function Q(){const e=(0,N.e)();return(0,u.jsx)("button",{type:"button","aria-label":(0,l.I)({id:"theme.docs.sidebar.closeSidebarButtonAriaLabel",message:"Close navigation bar",description:"The ARIA label for close button of mobile sidebar"}),className:"clean-btn navbar-sidebar__close",onClick:()=>e.toggle(),children:(0,u.jsx)(S,{color:"var(--ifm-color-emphasis-600)"})})}function K(){return(0,u.jsxs)("div",{className:"navbar-sidebar__brand",children:[(0,u.jsx)(V,{}),(0,u.jsx)(Z,{className:"margin-right--md"}),(0,u.jsx)(Q,{})]})}var Y=n(3692),X=n(4996),J=n(3919);function ee(e,t){return void 0!==e&&void 0!==t&&new RegExp(e,"gi").test(t)}var te=n(9471);function ne(e){let{activeBasePath:t,activeBaseRegex:n,to:o,href:r,label:i,html:a,isDropdownLink:s,prependBaseUrlToHref:l,...c}=e;const d=(0,X.Z)(o),p=(0,X.Z)(t),f=(0,X.Z)(r,{forcePrependBaseUrl:!0}),g=i&&r&&!(0,J.Z)(r),m=a?{dangerouslySetInnerHTML:{__html:a}}:{children:(0,u.jsxs)(u.Fragment,{children:[i,g&&(0,u.jsx)(te.Z,{...s&&{width:12,height:12}})]})};return r?(0,u.jsx)(Y.Z,{href:l?f:r,...c,...m}):(0,u.jsx)(Y.Z,{to:d,isNavLink:!0,...(t||n)&&{isActive:(e,t)=>n?ee(n,t.pathname):t.pathname.startsWith(p)},...c,...m})}function oe(e){let{className:t,isDropdownItem:n=!1,...o}=e;const i=(0,u.jsx)(ne,{className:(0,r.Z)(n?"dropdown__link":"navbar__item navbar__link",t),isDropdownLink:n,...o});return n?(0,u.jsx)("li",{children:i}):i}function re(e){let{className:t,isDropdownItem:n,...o}=e;return(0,u.jsx)("li",{className:"menu__list-item",children:(0,u.jsx)(ne,{className:(0,r.Z)("menu__link",t),...o})})}function ie(e){let{mobile:t=!1,position:n,...o}=e;const r=t?re:oe;return(0,u.jsx)(r,{...o,activeClassName:o.activeClassName??(t?"menu__link--active":"navbar__link--active")})}var ae=n(6043),se=n(8596),le=n(2263);const ce={dropdownNavbarItemMobile:"dropdownNavbarItemMobile_S0Fm"};function ue(e,t){return e.some((e=>function(e,t){return!!(0,se.Mg)(e.to,t)||!!ee(e.activeBaseRegex,t)||!(!e.activeBasePath||!t.startsWith(e.activeBasePath))}(e,t)))}function de(e){let{items:t,position:n,className:i,onClick:a,...s}=e;const l=(0,o.useRef)(null),[c,d]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{const e=e=>{l.current&&!l.current.contains(e.target)&&d(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),document.addEventListener("focusin",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e),document.removeEventListener("focusin",e)}}),[l]),(0,u.jsxs)("div",{ref:l,className:(0,r.Z)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===n,"dropdown--show":c}),children:[(0,u.jsx)(ne,{"aria-haspopup":"true","aria-expanded":c,role:"button",href:s.to?void 0:"#",className:(0,r.Z)("navbar__link",i),...s,onClick:s.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),d(!c))},children:s.children??s.label}),(0,u.jsx)("ul",{className:"dropdown__menu",children:t.map(((e,t)=>(0,o.createElement)(Re,{isDropdownItem:!0,activeClassName:"dropdown__link--active",...e,key:t})))})]})}function pe(e){let{items:t,className:n,position:i,onClick:a,...l}=e;const c=function(){const{siteConfig:{baseUrl:e}}=(0,le.Z)(),{pathname:t}=(0,s.TH)();return t.replace(e,"/")}(),d=ue(t,c),{collapsed:p,toggleCollapsed:f,setCollapsed:g}=(0,ae.u)({initialState:()=>!d});return(0,o.useEffect)((()=>{d&&g(!d)}),[c,d,g]),(0,u.jsxs)("li",{className:(0,r.Z)("menu__list-item",{"menu__list-item--collapsed":p}),children:[(0,u.jsx)(ne,{role:"button",className:(0,r.Z)(ce.dropdownNavbarItemMobile,"menu__link menu__link--sublist menu__link--sublist-caret",n),...l,onClick:e=>{e.preventDefault(),f()},children:l.children??l.label}),(0,u.jsx)(ae.z,{lazy:!0,as:"ul",className:"menu__list",collapsed:p,children:t.map(((e,t)=>(0,o.createElement)(Re,{mobile:!0,isDropdownItem:!0,onClick:a,activeClassName:"menu__link--active",...e,key:t})))})]})}function fe(e){let{mobile:t=!1,...n}=e;const o=t?pe:de;return(0,u.jsx)(o,{...n})}var ge=n(4711);function me(e){let{width:t=20,height:n=20,...o}=e;return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:t,height:n,"aria-hidden":!0,...o,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"})})}const he="iconLanguage_nlXk";function ye(e){var t,n,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t{if(!e.state?.highlightState||0===e.state.highlightState.wordToHighlight.length)return;i(e.state.highlightState);const{highlightState:n,...o}=e.state;t.replace({...e,state:o})}),[e.state?.highlightState,t,e]),(0,o.useEffect)((()=>{if(0===r.wordToHighlight.length)return;const e=document.getElementsByTagName("article")[0]??document.getElementsByTagName("main")[0];if(!e)return;const t=new(we())(e),n={ignoreJoiners:!0};return t.mark(r.wordToHighlight,n),()=>t.unmark(n)}),[r,n]),null}const ke=e=>{const t=(0,o.useRef)(!1),r=(0,o.useRef)(null),[i,a]=(0,o.useState)(!1),l=(0,s.k6)(),{siteConfig:c={}}=(0,le.Z)(),d=(c.plugins||[]).find((e=>Array.isArray(e)&&"string"==typeof e[0]&&e[0].includes("docusaurus-lunr-search"))),p=(0,z.Z)(),{baseUrl:f}=c,g=d&&d[1]?.assetUrl||f,m=(0,ve.eZ)("docusaurus-lunr-search"),h=()=>{t.current||(Promise.all([fetch(`${g}${m.fileNames.searchDoc}`).then((e=>e.json())),fetch(`${g}${m.fileNames.lunrIndex}`).then((e=>e.json())),Promise.all([n.e(8364),n.e(5684)]).then(n.bind(n,1323)),Promise.all([n.e(532),n.e(2572)]).then(n.bind(n,2572))]).then((e=>{let[t,n,{default:o}]=e;const{searchDocs:r,options:i}=t;r&&0!==r.length&&(((e,t,n,o)=>{new n({searchDocs:e,searchIndex:t,baseUrl:f,inputSelector:"#search_input_react",handleSelected:(e,t,n)=>{const r=n.url||"/";document.createElement("a").href=r,e.setVal(""),t.target.blur();let i="";if(o.highlightResult)try{const e=(n.text||n.subcategory||n.title).match(new RegExp("\\w*","g"));if(e&&e.length>0){const t=document.createElement("div");t.innerHTML=e[0],i=t.textContent}}catch(a){console.log(a)}l.push(r,{highlightState:{wordToHighlight:i}})},maxHits:o.maxHits})})(r,n,o,i),a(!0))})),t.current=!0)},y=(0,o.useCallback)((t=>{r.current.contains(t.target)||r.current.focus(),e.handleSearchBarToggle&&e.handleSearchBarToggle(!e.isSearchBarExpanded)}),[e.isSearchBarExpanded]);let b;return p&&(h(),b=window.navigator.platform.startsWith("Mac")?"Search \u2318+K":"Search Ctrl+K"),(0,o.useEffect)((()=>{e.autoFocus&&i&&r.current.focus()}),[i]),(0,u.jsxs)("div",{className:"navbar__search",children:[(0,u.jsx)("span",{"aria-label":"expand searchbar",role:"button",className:be("search-icon",{"search-icon-hidden":e.isSearchBarExpanded}),onClick:y,onKeyDown:y,tabIndex:0}),(0,u.jsx)("input",{id:"search_input_react",type:"search",placeholder:i?b:"Loading...","aria-label":"Search",className:be("navbar__search-input",{"search-bar-expanded":e.isSearchBarExpanded},{"search-bar":!e.isSearchBarExpanded}),onClick:h,onMouseOver:h,onFocus:y,onBlur:y,ref:r,disabled:!i}),(0,u.jsx)(Se,{})]},"search-box")},_e={navbarSearchContainer:"navbarSearchContainer_Bca1"};function Ee(e){let{children:t,className:n}=e;return(0,u.jsx)("div",{className:(0,r.Z)(n,_e.navbarSearchContainer),children:t})}var Ce=n(4104),Te=n(2802);var je=n(373);const Ne=e=>e.docs.find((t=>t.id===e.mainDocId));const Ae={default:ie,localeDropdown:function(e){let{mobile:t,dropdownItemsBefore:n,dropdownItemsAfter:o,queryString:r="",...i}=e;const{i18n:{currentLocale:a,locales:c,localeConfigs:d}}=(0,le.Z)(),p=(0,ge.l)(),{search:f,hash:g}=(0,s.TH)(),m=[...n,...c.map((e=>{const n=`${`pathname://${p.createUrl({locale:e,fullyQualified:!1})}`}${f}${g}${r}`;return{label:d[e].label,lang:d[e].htmlLang,to:n,target:"_self",autoAddBaseUrl:!1,className:e===a?t?"menu__link--active":"dropdown__link--active":""}})),...o],h=t?(0,l.I)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):d[a].label;return(0,u.jsx)(fe,{...i,mobile:t,label:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(me,{className:he}),h]}),items:m})},search:function(e){let{mobile:t,className:n}=e;return t?null:(0,u.jsx)(Ee,{className:n,children:(0,u.jsx)(ke,{})})},dropdown:fe,html:function(e){let{value:t,className:n,mobile:o=!1,isDropdownItem:i=!1}=e;const a=i?"li":"div";return(0,u.jsx)(a,{className:(0,r.Z)({navbar__item:!o&&!i,"menu__list-item":o},n),dangerouslySetInnerHTML:{__html:t}})},doc:function(e){let{docId:t,label:n,docsPluginId:o,...r}=e;const{activeDoc:i}=(0,Ce.Iw)(o),a=(0,Te.vY)(t,o),s=i?.path===a?.path;return null===a||a.unlisted&&!s?null:(0,u.jsx)(ie,{exact:!0,...r,isActive:()=>s||!!i?.sidebar&&i.sidebar===a.sidebar,label:n??a.id,to:a.path})},docSidebar:function(e){let{sidebarId:t,label:n,docsPluginId:o,...r}=e;const{activeDoc:i}=(0,Ce.Iw)(o),a=(0,Te.oz)(t,o).link;if(!a)throw new Error(`DocSidebarNavbarItem: Sidebar with ID "${t}" doesn't have anything to be linked to.`);return(0,u.jsx)(ie,{exact:!0,...r,isActive:()=>i?.sidebar===t,label:n??a.label,to:a.path})},docsVersion:function(e){let{label:t,to:n,docsPluginId:o,...r}=e;const i=(0,Te.lO)(o)[0],a=t??i.label,s=n??(e=>e.docs.find((t=>t.id===e.mainDocId)))(i).path;return(0,u.jsx)(ie,{...r,label:a,to:s})},docsVersionDropdown:function(e){let{mobile:t,docsPluginId:n,dropdownActiveClassDisabled:o,dropdownItemsBefore:r,dropdownItemsAfter:i,...a}=e;const{search:c,hash:d}=(0,s.TH)(),p=(0,Ce.Iw)(n),f=(0,Ce.gB)(n),{savePreferredVersionName:g}=(0,je.J)(n),m=[...r,...f.map((e=>{const t=p.alternateDocVersions[e.name]??Ne(e);return{label:e.label,to:`${t.path}${c}${d}`,isActive:()=>e===p.activeVersion,onClick:()=>g(e.name)}})),...i],h=(0,Te.lO)(n)[0],y=t&&m.length>1?(0,l.I)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):h.label,b=t&&m.length>1?void 0:Ne(h).path;return m.length<=1?(0,u.jsx)(ie,{...a,mobile:t,label:y,to:b,isActive:o?()=>!1:void 0}):(0,u.jsx)(fe,{...a,mobile:t,label:y,to:b,items:m,isActive:o?()=>!1:void 0})}};function Re(e){let{type:t,...n}=e;const o=function(e,t){return e&&"default"!==e?e:"items"in t?"dropdown":"default"}(t,n),r=Ae[o];if(!r)throw new Error(`No NavbarItem component found for type "${t}".`);return(0,u.jsx)(r,{...n})}function Le(){const e=(0,N.e)(),t=(0,x.L)().navbar.items;return(0,u.jsx)("ul",{className:"menu__list",children:t.map(((t,n)=>(0,o.createElement)(Re,{mobile:!0,...t,onClick:()=>e.toggle(),key:n})))})}function Ie(e){return(0,u.jsx)("button",{...e,type:"button",className:"clean-btn navbar-sidebar__back",children:(0,u.jsx)(l.Z,{id:"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel",description:"The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)",children:"\u2190 Back to main menu"})})}function Pe(){const e=0===(0,x.L)().navbar.items.length,t=D();return(0,u.jsxs)(u.Fragment,{children:[!e&&(0,u.jsx)(Ie,{onClick:()=>t.hide()}),t.content]})}function Oe(){const e=(0,N.e)();var t;return void 0===(t=e.shown)&&(t=!0),(0,o.useEffect)((()=>(document.body.style.overflow=t?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[t]),e.shouldRender?(0,u.jsx)(M,{header:(0,u.jsx)(K,{}),primaryMenu:(0,u.jsx)(Le,{}),secondaryMenu:(0,u.jsx)(Pe,{})}):null}const De={navbarHideable:"navbarHideable_m1mJ",navbarHidden:"navbarHidden_jGov"};function Me(e){return(0,u.jsx)("div",{role:"presentation",...e,className:(0,r.Z)("navbar-sidebar__backdrop",e.className)})}function Fe(e){let{children:t}=e;const{navbar:{hideOnScroll:n,style:i}}=(0,x.L)(),a=(0,N.e)(),{navbarRef:s,isNavbarVisible:d}=function(e){const[t,n]=(0,o.useState)(e),r=(0,o.useRef)(!1),i=(0,o.useRef)(0),a=(0,o.useCallback)((e=>{null!==e&&(i.current=e.getBoundingClientRect().height)}),[]);return(0,A.RF)(((t,o)=>{let{scrollY:a}=t;if(!e)return;if(a=s?n(!1):a+c{if(!e)return;const o=t.location.hash;if(o?document.getElementById(o.substring(1)):void 0)return r.current=!0,void n(!1);n(!0)})),{navbarRef:a,isNavbarVisible:t}}(n);return(0,u.jsxs)("nav",{ref:s,"aria-label":(0,l.I)({id:"theme.NavBar.navAriaLabel",message:"Main",description:"The ARIA label for the main navigation"}),className:(0,r.Z)("navbar","navbar--fixed-top",n&&[De.navbarHideable,!d&&De.navbarHidden],{"navbar--dark":"dark"===i,"navbar--primary":"primary"===i,"navbar-sidebar--show":a.shown}),children:[t,(0,u.jsx)(Me,{onClick:a.toggle}),(0,u.jsx)(Oe,{})]})}var ze=n(8780);const Be={errorBoundaryError:"errorBoundaryError_a6uf",errorBoundaryFallback:"errorBoundaryFallback_VBag"};function $e(e){return(0,u.jsx)("button",{type:"button",...e,children:(0,u.jsx)(l.Z,{id:"theme.ErrorPageContent.tryAgain",description:"The label of the button to try again rendering when the React error boundary captures an error",children:"Try again"})})}function Ue(e){let{error:t}=e;const n=(0,ze.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,u.jsx)("p",{className:Be.errorBoundaryError,children:n})}class qe extends o.Component{componentDidCatch(e,t){throw this.props.onError(e,t)}render(){return this.props.children}}const He="right";function Ge(e){let{width:t=30,height:n=30,className:o,...r}=e;return(0,u.jsx)("svg",{className:o,width:t,height:n,viewBox:"0 0 30 30","aria-hidden":"true",...r,children:(0,u.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"})})}function Ze(){const{toggle:e,shown:t}=(0,N.e)();return(0,u.jsx)("button",{onClick:e,"aria-label":(0,l.I)({id:"theme.docs.sidebar.toggleSidebarButtonAriaLabel",message:"Toggle navigation bar",description:"The ARIA label for hamburger menu button of mobile navigation"}),"aria-expanded":t,className:"navbar__toggle clean-btn",type:"button",children:(0,u.jsx)(Ge,{})})}const We={colorModeToggle:"colorModeToggle_DEke"};function Ve(e){let{items:t}=e;return(0,u.jsx)(u.Fragment,{children:t.map(((e,t)=>(0,u.jsx)(qe,{onError:t=>new Error(`A theme navbar item failed to render.\nPlease double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:\n${JSON.stringify(e,null,2)}`,{cause:t}),children:(0,u.jsx)(Re,{...e})},t)))})}function Qe(e){let{left:t,right:n}=e;return(0,u.jsxs)("div",{className:"navbar__inner",children:[(0,u.jsx)("div",{className:"navbar__items",children:t}),(0,u.jsx)("div",{className:"navbar__items navbar__items--right",children:n})]})}function Ke(){const e=(0,N.e)(),t=(0,x.L)().navbar.items,[n,o]=function(e){function t(e){return"left"===(e.position??He)}return[e.filter(t),e.filter((e=>!t(e)))]}(t),r=t.find((e=>"search"===e.type));return(0,u.jsx)(Qe,{left:(0,u.jsxs)(u.Fragment,{children:[!e.disabled&&(0,u.jsx)(Ze,{}),(0,u.jsx)(V,{}),(0,u.jsx)(Ve,{items:n})]}),right:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(Ve,{items:o}),(0,u.jsx)(Z,{className:We.colorModeToggle}),!r&&(0,u.jsx)(Ee,{children:(0,u.jsx)(ke,{})})]})})}function Ye(){return(0,u.jsx)(Fe,{children:(0,u.jsx)(Ke,{})})}function Xe(e){let{item:t}=e;const{to:n,href:o,label:r,prependBaseUrlToHref:i,...a}=t,s=(0,X.Z)(n),l=(0,X.Z)(o,{forcePrependBaseUrl:!0});return(0,u.jsxs)(Y.Z,{className:"footer__link-item",...o?{href:i?l:o}:{to:s},...a,children:[r,o&&!(0,J.Z)(o)&&(0,u.jsx)(te.Z,{})]})}function Je(e){let{item:t}=e;return t.html?(0,u.jsx)("li",{className:"footer__item",dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)("li",{className:"footer__item",children:(0,u.jsx)(Xe,{item:t})},t.href??t.to)}function et(e){let{column:t}=e;return(0,u.jsxs)("div",{className:"col footer__col",children:[(0,u.jsx)("div",{className:"footer__title",children:t.title}),(0,u.jsx)("ul",{className:"footer__items clean-list",children:t.items.map(((e,t)=>(0,u.jsx)(Je,{item:e},t)))})]})}function tt(e){let{columns:t}=e;return(0,u.jsx)("div",{className:"row footer__links",children:t.map(((e,t)=>(0,u.jsx)(et,{column:e},t)))})}function nt(){return(0,u.jsx)("span",{className:"footer__link-separator",children:"\xb7"})}function ot(e){let{item:t}=e;return t.html?(0,u.jsx)("span",{className:"footer__link-item",dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)(Xe,{item:t})}function rt(e){let{links:t}=e;return(0,u.jsx)("div",{className:"footer__links text--center",children:(0,u.jsx)("div",{className:"footer__links",children:t.map(((e,n)=>(0,u.jsxs)(o.Fragment,{children:[(0,u.jsx)(ot,{item:e}),t.length!==n+1&&(0,u.jsx)(nt,{})]},n)))})})}function it(e){let{links:t}=e;return function(e){return"title"in e[0]}(t)?(0,u.jsx)(tt,{columns:t}):(0,u.jsx)(rt,{links:t})}var at=n(9965);const st={footerLogoLink:"footerLogoLink_BH7S"};function lt(e){let{logo:t}=e;const{withBaseUrl:n}=(0,X.C)(),o={light:n(t.src),dark:n(t.srcDark??t.src)};return(0,u.jsx)(at.Z,{className:(0,r.Z)("footer__logo",t.className),alt:t.alt,sources:o,width:t.width,height:t.height,style:t.style})}function ct(e){let{logo:t}=e;return t.href?(0,u.jsx)(Y.Z,{href:t.href,className:st.footerLogoLink,target:t.target,children:(0,u.jsx)(lt,{logo:t})}):(0,u.jsx)(lt,{logo:t})}function ut(e){let{copyright:t}=e;return(0,u.jsx)("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}})}function dt(e){let{style:t,links:n,logo:o,copyright:i}=e;return(0,u.jsx)("footer",{className:(0,r.Z)("footer",{"footer--dark":"dark"===t}),children:(0,u.jsxs)("div",{className:"container container-fluid",children:[n,(o||i)&&(0,u.jsxs)("div",{className:"footer__bottom text--center",children:[o&&(0,u.jsx)("div",{className:"margin-bottom--sm",children:o}),i]})]})})}function pt(){const{footer:e}=(0,x.L)();if(!e)return null;const{copyright:t,links:n,logo:o,style:r}=e;return(0,u.jsx)(dt,{style:r,links:n&&n.length>0&&(0,u.jsx)(it,{links:n}),logo:o&&(0,u.jsx)(ct,{logo:o}),copyright:t&&(0,u.jsx)(ut,{copyright:t})})}const ft=o.memo(pt),gt=(0,R.Qc)([F.S,w.pl,A.OC,je.L5,a.VC,function(e){let{children:t}=e;return(0,u.jsx)(L.n2,{children:(0,u.jsx)(N.M,{children:(0,u.jsx)(P,{children:t})})})}]);function mt(e){let{children:t}=e;return(0,u.jsx)(gt,{children:t})}var ht=n(2503);function yt(e){let{error:t,tryAgain:n}=e;return(0,u.jsx)("main",{className:"container margin-vert--xl",children:(0,u.jsx)("div",{className:"row",children:(0,u.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,u.jsx)(ht.Z,{as:"h1",className:"hero__title",children:(0,u.jsx)(l.Z,{id:"theme.ErrorPageContent.title",description:"The title of the fallback page when the page crashed",children:"This page crashed."})}),(0,u.jsx)("div",{className:"margin-vert--lg",children:(0,u.jsx)($e,{onClick:n,className:"button button--primary shadow--lw"})}),(0,u.jsx)("hr",{}),(0,u.jsx)("div",{className:"margin-vert--md",children:(0,u.jsx)(Ue,{error:t})})]})})})}const bt={mainWrapper:"mainWrapper_z2l0"};function vt(e){const{children:t,noFooter:n,wrapperClassName:o,title:s,description:l}=e;return(0,y.t)(),(0,u.jsxs)(mt,{children:[(0,u.jsx)(a.d,{title:s,description:l}),(0,u.jsx)(v,{}),(0,u.jsx)(j,{}),(0,u.jsx)(Ye,{}),(0,u.jsx)("div",{id:d,className:(0,r.Z)(h.k.wrapper.main,bt.mainWrapper,o),children:(0,u.jsx)(i.Z,{fallback:e=>(0,u.jsx)(yt,{...e}),children:t})}),!n&&(0,u.jsx)(ft,{})]})}},1327:(e,t,n)=>{"use strict";n.d(t,{Z:()=>u});n(7294);var o=n(3692),r=n(4996),i=n(2263),a=n(6668),s=n(9965),l=n(5893);function c(e){let{logo:t,alt:n,imageClassName:o}=e;const i={light:(0,r.Z)(t.src),dark:(0,r.Z)(t.srcDark||t.src)},a=(0,l.jsx)(s.Z,{className:t.className,sources:i,height:t.height,width:t.width,alt:n,style:t.style});return o?(0,l.jsx)("div",{className:o,children:a}):a}function u(e){const{siteConfig:{title:t}}=(0,i.Z)(),{navbar:{title:n,logo:s}}=(0,a.L)(),{imageClassName:u,titleClassName:d,...p}=e,f=(0,r.Z)(s?.href||"/"),g=n?"":t,m=s?.alt??g;return(0,l.jsxs)(o.Z,{to:f,...p,...s?.target&&{target:s.target},children:[s&&(0,l.jsx)(c,{logo:s,alt:m,imageClassName:u}),null!=n&&(0,l.jsx)("b",{className:d,children:n})]})}},197:(e,t,n)=>{"use strict";n.d(t,{Z:()=>i});n(7294);var o=n(5742),r=n(5893);function i(e){let{locale:t,version:n,tag:i}=e;const a=t;return(0,r.jsxs)(o.Z,{children:[t&&(0,r.jsx)("meta",{name:"docusaurus_locale",content:t}),n&&(0,r.jsx)("meta",{name:"docusaurus_version",content:n}),i&&(0,r.jsx)("meta",{name:"docusaurus_tag",content:i}),a&&(0,r.jsx)("meta",{name:"docsearch:language",content:a}),n&&(0,r.jsx)("meta",{name:"docsearch:version",content:n}),i&&(0,r.jsx)("meta",{name:"docsearch:docusaurus_tag",content:i})]})}},9965:(e,t,n)=>{"use strict";n.d(t,{Z:()=>u});var o=n(7294),r=n(512),i=n(2389),a=n(2949);const s={themedComponent:"themedComponent_mlkZ","themedComponent--light":"themedComponent--light_NVdE","themedComponent--dark":"themedComponent--dark_xIcU"};var l=n(5893);function c(e){let{className:t,children:n}=e;const c=(0,i.Z)(),{colorMode:u}=(0,a.I)();return(0,l.jsx)(l.Fragment,{children:(c?"dark"===u?["dark"]:["light"]:["light","dark"]).map((e=>{const i=n({theme:e,className:(0,r.Z)(t,s.themedComponent,s[`themedComponent--${e}`])});return(0,l.jsx)(o.Fragment,{children:i},e)}))})}function u(e){const{sources:t,className:n,alt:o,...r}=e;return(0,l.jsx)(c,{className:n,children:e=>{let{theme:n,className:i}=e;return(0,l.jsx)("img",{src:t[n],alt:o,className:i,...r})}})}},6043:(e,t,n)=>{"use strict";n.d(t,{u:()=>c,z:()=>y});var o=n(7294),r=n(412),i=n(469),a=n(1442),s=n(5893);const l="ease-in-out";function c(e){let{initialState:t}=e;const[n,r]=(0,o.useState)(t??!1),i=(0,o.useCallback)((()=>{r((e=>!e))}),[]);return{collapsed:n,setCollapsed:r,toggleCollapsed:i}}const u={display:"none",overflow:"hidden",height:"0px"},d={display:"block",overflow:"visible",height:"auto"};function p(e,t){const n=t?u:d;e.style.display=n.display,e.style.overflow=n.overflow,e.style.height=n.height}function f(e){let{collapsibleRef:t,collapsed:n,animation:r}=e;const i=(0,o.useRef)(!1);(0,o.useEffect)((()=>{const e=t.current;function o(){const t=e.scrollHeight,n=r?.duration??function(e){if((0,a.n)())return 1;const t=e/36;return Math.round(10*(4+15*t**.25+t/5))}(t);return{transition:`height ${n}ms ${r?.easing??l}`,height:`${t}px`}}function s(){const t=o();e.style.transition=t.transition,e.style.height=t.height}if(!i.current)return p(e,n),void(i.current=!0);return e.style.willChange="height",function(){const t=requestAnimationFrame((()=>{n?(s(),requestAnimationFrame((()=>{e.style.height=u.height,e.style.overflow=u.overflow}))):(e.style.display="block",requestAnimationFrame((()=>{s()})))}));return()=>cancelAnimationFrame(t)}()}),[t,n,r])}function g(e){if(!r.Z.canUseDOM)return e?u:d}function m(e){let{as:t="div",collapsed:n,children:r,animation:i,onCollapseTransitionEnd:a,className:l,disableSSRStyle:c}=e;const u=(0,o.useRef)(null);return f({collapsibleRef:u,collapsed:n,animation:i}),(0,s.jsx)(t,{ref:u,style:c?void 0:g(n),onTransitionEnd:e=>{"height"===e.propertyName&&(p(u.current,n),a?.(n))},className:l,children:r})}function h(e){let{collapsed:t,...n}=e;const[r,a]=(0,o.useState)(!t),[l,c]=(0,o.useState)(t);return(0,i.Z)((()=>{t||a(!0)}),[t]),(0,i.Z)((()=>{r&&c(t)}),[r,t]),r?(0,s.jsx)(m,{...n,collapsed:l}):null}function y(e){let{lazy:t,...n}=e;const o=t?h:m;return(0,s.jsx)(o,{...n})}},9689:(e,t,n)=>{"use strict";n.d(t,{nT:()=>m,pl:()=>g});var o=n(7294),r=n(2389),i=n(12),a=n(902),s=n(6668),l=n(5893);const c=(0,i.WA)("docusaurus.announcement.dismiss"),u=(0,i.WA)("docusaurus.announcement.id"),d=()=>"true"===c.get(),p=e=>c.set(String(e)),f=o.createContext(null);function g(e){let{children:t}=e;const n=function(){const{announcementBar:e}=(0,s.L)(),t=(0,r.Z)(),[n,i]=(0,o.useState)((()=>!!t&&d()));(0,o.useEffect)((()=>{i(d())}),[]);const a=(0,o.useCallback)((()=>{p(!0),i(!0)}),[]);return(0,o.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=u.get();"annoucement-bar"===n&&(n="announcement-bar");const o=t!==n;u.set(t),o&&p(!1),!o&&d()||i(!1)}),[e]),(0,o.useMemo)((()=>({isActive:!!e&&!n,close:a})),[e,n,a])}();return(0,l.jsx)(f.Provider,{value:n,children:t})}function m(){const e=(0,o.useContext)(f);if(!e)throw new a.i6("AnnouncementBarProvider");return e}},2949:(e,t,n)=>{"use strict";n.d(t,{I:()=>y,S:()=>h});var o=n(7294),r=n(412),i=n(902),a=n(12),s=n(6668),l=n(5893);const c=o.createContext(void 0),u="theme",d=(0,a.WA)(u),p={light:"light",dark:"dark"},f=e=>e===p.dark?p.dark:p.light,g=e=>r.Z.canUseDOM?f(document.documentElement.getAttribute("data-theme")):f(e),m=e=>{d.set(f(e))};function h(e){let{children:t}=e;const n=function(){const{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:n}}=(0,s.L)(),[r,i]=(0,o.useState)(g(e));(0,o.useEffect)((()=>{t&&d.del()}),[t]);const a=(0,o.useCallback)((function(t,o){void 0===o&&(o={});const{persist:r=!0}=o;t?(i(t),r&&m(t)):(i(n?window.matchMedia("(prefers-color-scheme: dark)").matches?p.dark:p.light:e),d.del())}),[n,e]);(0,o.useEffect)((()=>{document.documentElement.setAttribute("data-theme",f(r))}),[r]),(0,o.useEffect)((()=>{if(t)return;const e=e=>{if(e.key!==u)return;const t=d.get();null!==t&&a(f(t))};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)}),[t,a]);const l=(0,o.useRef)(!1);return(0,o.useEffect)((()=>{if(t&&!n)return;const e=window.matchMedia("(prefers-color-scheme: dark)"),o=()=>{window.matchMedia("print").matches||l.current?l.current=window.matchMedia("print").matches:a(null)};return e.addListener(o),()=>e.removeListener(o)}),[a,t,n]),(0,o.useMemo)((()=>({colorMode:r,setColorMode:a,get isDarkTheme(){return r===p.dark},setLightTheme(){a(p.light)},setDarkTheme(){a(p.dark)}})),[r,a])}();return(0,l.jsx)(c.Provider,{value:n,children:t})}function y(){const e=(0,o.useContext)(c);if(null==e)throw new i.i6("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},373:(e,t,n)=>{"use strict";n.d(t,{J:()=>v,L5:()=>y});var o=n(7294),r=n(4104),i=n(9935),a=n(6668),s=n(2802),l=n(902),c=n(12),u=n(5893);const d=e=>`docs-preferred-version-${e}`,p={save:(e,t,n)=>{(0,c.WA)(d(e),{persistence:t}).set(n)},read:(e,t)=>(0,c.WA)(d(e),{persistence:t}).get(),clear:(e,t)=>{(0,c.WA)(d(e),{persistence:t}).del()}},f=e=>Object.fromEntries(e.map((e=>[e,{preferredVersionName:null}])));const g=o.createContext(null);function m(){const e=(0,r._r)(),t=(0,a.L)().docs.versionPersistence,n=(0,o.useMemo)((()=>Object.keys(e)),[e]),[i,s]=(0,o.useState)((()=>f(n)));(0,o.useEffect)((()=>{s(function(e){let{pluginIds:t,versionPersistence:n,allDocsData:o}=e;function r(e){const t=p.read(e,n);return o[e].versions.some((e=>e.name===t))?{preferredVersionName:t}:(p.clear(e,n),{preferredVersionName:null})}return Object.fromEntries(t.map((e=>[e,r(e)])))}({allDocsData:e,versionPersistence:t,pluginIds:n}))}),[e,t,n]);return[i,(0,o.useMemo)((()=>({savePreferredVersion:function(e,n){p.save(e,t,n),s((t=>({...t,[e]:{preferredVersionName:n}})))}})),[t])]}function h(e){let{children:t}=e;const n=m();return(0,u.jsx)(g.Provider,{value:n,children:t})}function y(e){let{children:t}=e;return s.cE?(0,u.jsx)(h,{children:t}):(0,u.jsx)(u.Fragment,{children:t})}function b(){const e=(0,o.useContext)(g);if(!e)throw new l.i6("DocsPreferredVersionContextProvider");return e}function v(e){void 0===e&&(e=i.m);const t=(0,r.zh)(e),[n,a]=b(),{preferredVersionName:s}=n[e];return{preferredVersion:t.versions.find((e=>e.name===s))??null,savePreferredVersionName:(0,o.useCallback)((t=>{a.savePreferredVersion(e,t)}),[a,e])}}},1116:(e,t,n)=>{"use strict";n.d(t,{V:()=>c,b:()=>l});var o=n(7294),r=n(902),i=n(5893);const a=Symbol("EmptyContext"),s=o.createContext(a);function l(e){let{children:t,name:n,items:r}=e;const a=(0,o.useMemo)((()=>n&&r?{name:n,items:r}:null),[n,r]);return(0,i.jsx)(s.Provider,{value:a,children:t})}function c(){const e=(0,o.useContext)(s);if(e===a)throw new r.i6("DocsSidebarProvider");return e}},4477:(e,t,n)=>{"use strict";n.d(t,{E:()=>l,q:()=>s});var o=n(7294),r=n(902),i=n(5893);const a=o.createContext(null);function s(e){let{children:t,version:n}=e;return(0,i.jsx)(a.Provider,{value:n,children:t})}function l(){const e=(0,o.useContext)(a);if(null===e)throw new r.i6("DocsVersionProvider");return e}},2961:(e,t,n)=>{"use strict";n.d(t,{M:()=>f,e:()=>g});var o=n(7294),r=n(3102),i=n(7524),a=n(6550),s=n(902);function l(e){!function(e){const t=(0,a.k6)(),n=(0,s.zX)(e);(0,o.useEffect)((()=>t.block(((e,t)=>n(e,t)))),[t,n])}(((t,n)=>{if("POP"===n)return e(t,n)}))}var c=n(6668),u=n(5893);const d=o.createContext(void 0);function p(){const e=function(){const e=(0,r.HY)(),{items:t}=(0,c.L)().navbar;return 0===t.length&&!e.component}(),t=(0,i.i)(),n=!e&&"mobile"===t,[a,s]=(0,o.useState)(!1);l((()=>{if(a)return s(!1),!1}));const u=(0,o.useCallback)((()=>{s((e=>!e))}),[]);return(0,o.useEffect)((()=>{"desktop"===t&&s(!1)}),[t]),(0,o.useMemo)((()=>({disabled:e,shouldRender:n,toggle:u,shown:a})),[e,n,u,a])}function f(e){let{children:t}=e;const n=p();return(0,u.jsx)(d.Provider,{value:n,children:t})}function g(){const e=o.useContext(d);if(void 0===e)throw new s.i6("NavbarMobileSidebarProvider");return e}},3102:(e,t,n)=>{"use strict";n.d(t,{HY:()=>l,Zo:()=>c,n2:()=>s});var o=n(7294),r=n(902),i=n(5893);const a=o.createContext(null);function s(e){let{children:t}=e;const n=(0,o.useState)({component:null,props:null});return(0,i.jsx)(a.Provider,{value:n,children:t})}function l(){const e=(0,o.useContext)(a);if(!e)throw new r.i6("NavbarSecondaryMenuContentProvider");return e[0]}function c(e){let{component:t,props:n}=e;const i=(0,o.useContext)(a);if(!i)throw new r.i6("NavbarSecondaryMenuContentProvider");const[,s]=i,l=(0,r.Ql)(n);return(0,o.useEffect)((()=>{s({component:t,props:l})}),[s,t,l]),(0,o.useEffect)((()=>()=>s({component:null,props:null})),[s]),null}},9727:(e,t,n)=>{"use strict";n.d(t,{h:()=>r,t:()=>i});var o=n(7294);const r="navigation-with-keyboard";function i(){(0,o.useEffect)((()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(r),"mousedown"===e.type&&document.body.classList.remove(r)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(r),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},7524:(e,t,n)=>{"use strict";n.d(t,{i:()=>s});var o=n(7294),r=n(412);const i={desktop:"desktop",mobile:"mobile",ssr:"ssr"},a=996;function s(e){let{desktopBreakpoint:t=a}=void 0===e?{}:e;const[n,s]=(0,o.useState)((()=>"ssr"));return(0,o.useEffect)((()=>{function e(){s(function(e){if(!r.Z.canUseDOM)throw new Error("getWindowSize() should only be called after React hydration");return window.innerWidth>e?i.desktop:i.mobile}(t))}return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[t]),n}},5281:(e,t,n)=>{"use strict";n.d(t,{k:()=>o});const o={page:{blogListPage:"blog-list-page",blogPostPage:"blog-post-page",blogTagsListPage:"blog-tags-list-page",blogTagPostListPage:"blog-tags-post-list-page",docsDocPage:"docs-doc-page",docsTagsListPage:"docs-tags-list-page",docsTagDocListPage:"docs-tags-doc-list-page",mdxPage:"mdx-page"},wrapper:{main:"main-wrapper",blogPages:"blog-wrapper",docsPages:"docs-wrapper",mdxPages:"mdx-wrapper"},common:{editThisPage:"theme-edit-this-page",lastUpdated:"theme-last-updated",backToTopButton:"theme-back-to-top-button",codeBlock:"theme-code-block",admonition:"theme-admonition",unlistedBanner:"theme-unlisted-banner",admonitionType:e=>`theme-admonition-${e}`},layout:{},docs:{docVersionBanner:"theme-doc-version-banner",docVersionBadge:"theme-doc-version-badge",docBreadcrumbs:"theme-doc-breadcrumbs",docMarkdown:"theme-doc-markdown",docTocMobile:"theme-doc-toc-mobile",docTocDesktop:"theme-doc-toc-desktop",docFooter:"theme-doc-footer",docFooterTagsRow:"theme-doc-footer-tags-row",docFooterEditMetaRow:"theme-doc-footer-edit-meta-row",docSidebarContainer:"theme-doc-sidebar-container",docSidebarMenu:"theme-doc-sidebar-menu",docSidebarItemCategory:"theme-doc-sidebar-item-category",docSidebarItemLink:"theme-doc-sidebar-item-link",docSidebarItemCategoryLevel:e=>`theme-doc-sidebar-item-category-level-${e}`,docSidebarItemLinkLevel:e=>`theme-doc-sidebar-item-link-level-${e}`},blog:{}}},1442:(e,t,n)=>{"use strict";function o(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}n.d(t,{n:()=>o})},2802:(e,t,n)=>{"use strict";n.d(t,{MN:()=>T,LM:()=>g,_F:()=>b,cE:()=>p,jA:()=>m,xz:()=>f,SN:()=>C,lO:()=>k,vY:()=>E,oz:()=>_,s1:()=>S,f:()=>x});var o=n(7294),r=n(6550),i=n(8790),a=n(4104),s=n(373),l=n(4477),c=n(1116);function u(e){return Array.from(new Set(e))}var d=n(8596);const p=!!a._r;function f(e){const t=(0,l.E)();if(!e)return;const n=t.docs[e];if(!n)throw new Error(`no version doc found by id=${e}`);return n}function g(e){return"link"!==e.type||e.unlisted?"category"===e.type?function(e){if(e.href&&!e.linkUnlisted)return e.href;for(const t of e.items){const e=g(t);if(e)return e}}(e):void 0:e.href}function m(){const{pathname:e}=(0,r.TH)(),t=(0,c.V)();if(!t)throw new Error("Unexpected: cant find current sidebar in context");const n=w({sidebarItems:t.items,pathname:e,onlyCategories:!0}).slice(-1)[0];if(!n)throw new Error(`${e} is not associated with a category. useCurrentSidebarCategory() should only be used on category index pages.`);return n}const h=(e,t)=>void 0!==e&&(0,d.Mg)(e,t),y=(e,t)=>e.some((e=>b(e,t)));function b(e,t){return"link"===e.type?h(e.href,t):"category"===e.type&&(h(e.href,t)||y(e.items,t))}function v(e,t){switch(e.type){case"category":return b(e,t)||e.items.some((e=>v(e,t)));case"link":return!e.unlisted||b(e,t);default:return!0}}function x(e,t){return(0,o.useMemo)((()=>e.filter((e=>v(e,t)))),[e,t])}function w(e){let{sidebarItems:t,pathname:n,onlyCategories:o=!1}=e;const r=[];return function e(t){for(const i of t)if("category"===i.type&&((0,d.Mg)(i.href,n)||e(i.items))||"link"===i.type&&(0,d.Mg)(i.href,n)){return o&&"category"!==i.type||r.unshift(i),!0}return!1}(t),r}function S(){const e=(0,c.V)(),{pathname:t}=(0,r.TH)(),n=(0,a.gA)()?.pluginData.breadcrumbs;return!1!==n&&e?w({sidebarItems:e.items,pathname:t}):null}function k(e){const{activeVersion:t}=(0,a.Iw)(e),{preferredVersion:n}=(0,s.J)(e),r=(0,a.yW)(e);return(0,o.useMemo)((()=>u([t,n,r].filter(Boolean))),[t,n,r])}function _(e,t){const n=k(t);return(0,o.useMemo)((()=>{const t=n.flatMap((e=>e.sidebars?Object.entries(e.sidebars):[])),o=t.find((t=>t[0]===e));if(!o)throw new Error(`Can't find any sidebar with id "${e}" in version${n.length>1?"s":""} ${n.map((e=>e.name)).join(", ")}".\nAvailable sidebar ids are:\n- ${t.map((e=>e[0])).join("\n- ")}`);return o[1]}),[e,n])}function E(e,t){const n=k(t);return(0,o.useMemo)((()=>{const t=n.flatMap((e=>e.docs)),o=t.find((t=>t.id===e));if(!o){if(n.flatMap((e=>e.draftIds)).includes(e))return null;throw new Error(`Couldn't find any doc with id "${e}" in version${n.length>1?"s":""} "${n.map((e=>e.name)).join(", ")}".\nAvailable doc ids are:\n- ${u(t.map((e=>e.id))).join("\n- ")}`)}return o}),[e,n])}function C(e){let{route:t}=e;const n=(0,r.TH)(),o=(0,l.E)(),a=t.routes,s=a.find((e=>(0,r.LX)(n.pathname,e)));if(!s)return null;const c=s.sidebar,u=c?o.docsSidebars[c]:void 0;return{docElement:(0,i.H)(a),sidebarName:c,sidebarItems:u}}function T(e){return e.filter((e=>!("category"===e.type||"link"===e.type)||!!g(e)))}},1944:(e,t,n)=>{"use strict";n.d(t,{FG:()=>f,d:()=>d,VC:()=>g});var o=n(7294),r=n(512),i=n(5742),a=n(226);function s(){const e=o.useContext(a._);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}var l=n(4996),c=n(2263);var u=n(5893);function d(e){let{title:t,description:n,keywords:o,image:r,children:a}=e;const s=function(e){const{siteConfig:t}=(0,c.Z)(),{title:n,titleDelimiter:o}=t;return e?.trim().length?`${e.trim()} ${o} ${n}`:n}(t),{withBaseUrl:d}=(0,l.C)(),p=r?d(r,{absolute:!0}):void 0;return(0,u.jsxs)(i.Z,{children:[t&&(0,u.jsx)("title",{children:s}),t&&(0,u.jsx)("meta",{property:"og:title",content:s}),n&&(0,u.jsx)("meta",{name:"description",content:n}),n&&(0,u.jsx)("meta",{property:"og:description",content:n}),o&&(0,u.jsx)("meta",{name:"keywords",content:Array.isArray(o)?o.join(","):o}),p&&(0,u.jsx)("meta",{property:"og:image",content:p}),p&&(0,u.jsx)("meta",{name:"twitter:image",content:p}),a]})}const p=o.createContext(void 0);function f(e){let{className:t,children:n}=e;const a=o.useContext(p),s=(0,r.Z)(a,t);return(0,u.jsxs)(p.Provider,{value:s,children:[(0,u.jsx)(i.Z,{children:(0,u.jsx)("html",{className:s})}),n]})}function g(e){let{children:t}=e;const n=s(),o=`plugin-${n.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,"")}`;const i=`plugin-id-${n.plugin.id}`;return(0,u.jsx)(f,{className:(0,r.Z)(o,i),children:t})}},902:(e,t,n)=>{"use strict";n.d(t,{D9:()=>s,Qc:()=>u,Ql:()=>c,i6:()=>l,zX:()=>a});var o=n(7294),r=n(469),i=n(5893);function a(e){const t=(0,o.useRef)(e);return(0,r.Z)((()=>{t.current=e}),[e]),(0,o.useCallback)((function(){return t.current(...arguments)}),[])}function s(e){const t=(0,o.useRef)();return(0,r.Z)((()=>{t.current=e})),t.current}class l extends Error{constructor(e,t){super(),this.name="ReactContextError",this.message=`Hook ${this.stack?.split("\n")[1]?.match(/at (?:\w+\.)?(?\w+)/)?.groups.name??""} is called outside the <${e}>. ${t??""}`}}function c(e){const t=Object.entries(e);return t.sort(((e,t)=>e[0].localeCompare(t[0]))),(0,o.useMemo)((()=>e),t.flat())}function u(e){return t=>{let{children:n}=t;return(0,i.jsx)(i.Fragment,{children:e.reduceRight(((e,t)=>(0,i.jsx)(t,{children:e})),n)})}}},8596:(e,t,n)=>{"use strict";n.d(t,{Mg:()=>a,Ns:()=>s});var o=n(7294),r=n(723),i=n(2263);function a(e,t){const n=e=>(!e||e.endsWith("/")?e:`${e}/`)?.toLowerCase();return n(e)===n(t)}function s(){const{baseUrl:e}=(0,i.Z)().siteConfig;return(0,o.useMemo)((()=>function(e){let{baseUrl:t,routes:n}=e;function o(e){return e.path===t&&!0===e.exact}function r(e){return e.path===t&&!e.exact}return function e(t){if(0===t.length)return;return t.find(o)||e(t.filter(r).flatMap((e=>e.routes??[])))}(n)}({routes:r.Z,baseUrl:e})),[e])}},2466:(e,t,n)=>{"use strict";n.d(t,{Ct:()=>f,OC:()=>c,RF:()=>p});var o=n(7294),r=n(412),i=n(2389),a=(n(469),n(902)),s=n(5893);const l=o.createContext(void 0);function c(e){let{children:t}=e;const n=function(){const e=(0,o.useRef)(!0);return(0,o.useMemo)((()=>({scrollEventsEnabledRef:e,enableScrollEvents:()=>{e.current=!0},disableScrollEvents:()=>{e.current=!1}})),[])}();return(0,s.jsx)(l.Provider,{value:n,children:t})}function u(){const e=(0,o.useContext)(l);if(null==e)throw new a.i6("ScrollControllerProvider");return e}const d=()=>r.Z.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function p(e,t){void 0===t&&(t=[]);const{scrollEventsEnabledRef:n}=u(),r=(0,o.useRef)(d()),i=(0,a.zX)(e);(0,o.useEffect)((()=>{const e=()=>{if(!n.current)return;const e=d();i(e,r.current),r.current=e},t={passive:!0};return e(),window.addEventListener("scroll",e,t),()=>window.removeEventListener("scroll",e,t)}),[i,n,...t])}function f(){const e=(0,o.useRef)(null),t=(0,i.Z)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:n=>{e.current=t?function(e){return window.scrollTo({top:e,behavior:"smooth"}),()=>{}}(n):function(e){let t=null;const n=document.documentElement.scrollTop>e;return function o(){const r=document.documentElement.scrollTop;(n&&r>e||!n&&rt&&cancelAnimationFrame(t)}(n)},cancelScroll:()=>e.current?.()}}},3320:(e,t,n)=>{"use strict";n.d(t,{HX:()=>o,os:()=>r});n(2263);const o="default";function r(e,t){return`docs-${e}-${t}`}},12:(e,t,n)=>{"use strict";n.d(t,{WA:()=>l});n(7294);const o="localStorage";function r(e){let{key:t,oldValue:n,newValue:o,storage:r}=e;if(n===o)return;const i=document.createEvent("StorageEvent");i.initStorageEvent("storage",!1,!1,t,n,o,window.location.href,r),window.dispatchEvent(i)}function i(e){if(void 0===e&&(e=o),"undefined"==typeof window)throw new Error("Browser storage is not available on Node.js/Docusaurus SSR process.");if("none"===e)return null;try{return window[e]}catch(n){return t=n,a||(console.warn("Docusaurus browser storage is not available.\nPossible reasons: running Docusaurus in an iframe, in an incognito browser session, or using too strict browser privacy settings.",t),a=!0),null}var t}let a=!1;const s={get:()=>null,set:()=>{},del:()=>{},listen:()=>()=>{}};function l(e,t){if("undefined"==typeof window)return function(e){function t(){throw new Error(`Illegal storage API usage for storage key "${e}".\nDocusaurus storage APIs are not supposed to be called on the server-rendering process.\nPlease only call storage APIs in effects and event handlers.`)}return{get:t,set:t,del:t,listen:t}}(e);const n=i(t?.persistence);return null===n?s:{get:()=>{try{return n.getItem(e)}catch(t){return console.error(`Docusaurus storage error, can't get key=${e}`,t),null}},set:t=>{try{const o=n.getItem(e);n.setItem(e,t),r({key:e,oldValue:o,newValue:t,storage:n})}catch(o){console.error(`Docusaurus storage error, can't set ${e}=${t}`,o)}},del:()=>{try{const t=n.getItem(e);n.removeItem(e),r({key:e,oldValue:t,newValue:null,storage:n})}catch(t){console.error(`Docusaurus storage error, can't delete key=${e}`,t)}},listen:t=>{try{const o=o=>{o.storageArea===n&&o.key===e&&t(o)};return window.addEventListener("storage",o),()=>window.removeEventListener("storage",o)}catch(o){return console.error(`Docusaurus storage error, can't listen for changes of key=${e}`,o),()=>{}}}}}},4711:(e,t,n)=>{"use strict";n.d(t,{l:()=>a});var o=n(2263),r=n(6550),i=n(8780);function a(){const{siteConfig:{baseUrl:e,url:t,trailingSlash:n},i18n:{defaultLocale:a,currentLocale:s}}=(0,o.Z)(),{pathname:l}=(0,r.TH)(),c=(0,i.applyTrailingSlash)(l,{trailingSlash:n,baseUrl:e}),u=s===a?e:e.replace(`/${s}/`,"/"),d=c.replace(e,"");return{createUrl:function(e){let{locale:n,fullyQualified:o}=e;return`${o?t:""}${function(e){return e===a?`${u}`:`${u}${e}/`}(n)}${d}`}}}},5936:(e,t,n)=>{"use strict";n.d(t,{S:()=>a});var o=n(7294),r=n(6550),i=n(902);function a(e){const t=(0,r.TH)(),n=(0,i.D9)(t),a=(0,i.zX)(e);(0,o.useEffect)((()=>{n&&t!==n&&a({location:t,previousLocation:n})}),[a,t,n])}},6668:(e,t,n)=>{"use strict";n.d(t,{L:()=>r});var o=n(2263);function r(){return(0,o.Z)().siteConfig.themeConfig}},8802:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){const{trailingSlash:n,baseUrl:o}=t;if(e.startsWith("#"))return e;if(void 0===n)return e;const[r]=e.split(/[#?]/),i="/"===r||r===o?r:(a=r,n?function(e){return e.endsWith("/")?e:`${e}/`}(a):function(e){return e.endsWith("/")?e.slice(0,-1):e}(a));var a;return e.replace(r,i)}},4143:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=void 0,t.getErrorCausalChain=function e(t){return t.cause?[t,...e(t.cause)]:[t]}},8780:function(e,t,n){"use strict";var o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=t.applyTrailingSlash=t.blogPostContainerID=void 0,t.blogPostContainerID="__blog-post-container";var r=n(8802);Object.defineProperty(t,"applyTrailingSlash",{enumerable:!0,get:function(){return o(r).default}});var i=n(4143);Object.defineProperty(t,"getErrorCausalChain",{enumerable:!0,get:function(){return i.getErrorCausalChain}})},9318:(e,t,n)=>{"use strict";n.d(t,{lX:()=>x,q_:()=>C,ob:()=>f,PP:()=>j,Ep:()=>p});var o=n(7462);function r(e){return"/"===e.charAt(0)}function i(e,t){for(var n=t,o=n+1,r=e.length;o=0;p--){var f=a[p];"."===f?i(a,p):".."===f?(i(a,p),d++):d&&(i(a,p),d--)}if(!c)for(;d--;d)a.unshift("..");!c||""===a[0]||a[0]&&r(a[0])||a.unshift("");var g=a.join("/");return n&&"/"!==g.substr(-1)&&(g+="/"),g};var s=n(8776);function l(e){return"/"===e.charAt(0)?e:"/"+e}function c(e){return"/"===e.charAt(0)?e.substr(1):e}function u(e,t){return function(e,t){return 0===e.toLowerCase().indexOf(t.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(t.length))}(e,t)?e.substr(t.length):e}function d(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function p(e){var t=e.pathname,n=e.search,o=e.hash,r=t||"/";return n&&"?"!==n&&(r+="?"===n.charAt(0)?n:"?"+n),o&&"#"!==o&&(r+="#"===o.charAt(0)?o:"#"+o),r}function f(e,t,n,r){var i;"string"==typeof e?(i=function(e){var t=e||"/",n="",o="",r=t.indexOf("#");-1!==r&&(o=t.substr(r),t=t.substr(0,r));var i=t.indexOf("?");return-1!==i&&(n=t.substr(i),t=t.substr(0,i)),{pathname:t,search:"?"===n?"":n,hash:"#"===o?"":o}}(e),i.state=t):(void 0===(i=(0,o.Z)({},e)).pathname&&(i.pathname=""),i.search?"?"!==i.search.charAt(0)&&(i.search="?"+i.search):i.search="",i.hash?"#"!==i.hash.charAt(0)&&(i.hash="#"+i.hash):i.hash="",void 0!==t&&void 0===i.state&&(i.state=t));try{i.pathname=decodeURI(i.pathname)}catch(s){throw s instanceof URIError?new URIError('Pathname "'+i.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):s}return n&&(i.key=n),r?i.pathname?"/"!==i.pathname.charAt(0)&&(i.pathname=a(i.pathname,r.pathname)):i.pathname=r.pathname:i.pathname||(i.pathname="/"),i}function g(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,o,r){if(null!=e){var i="function"==typeof e?e(t,n):e;"string"==typeof i?"function"==typeof o?o(i,r):r(!0):r(!1!==i)}else r(!0)},appendListener:function(e){var n=!0;function o(){n&&e.apply(void 0,arguments)}return t.push(o),function(){n=!1,t=t.filter((function(e){return e!==o}))}},notifyListeners:function(){for(var e=arguments.length,n=new Array(e),o=0;ot?n.splice(t,n.length-t,r):n.push(r),d({action:o,location:r,index:t,entries:n})}}))},replace:function(e,t){var o="REPLACE",r=f(e,t,m(),x.location);u.confirmTransitionTo(r,o,n,(function(e){e&&(x.entries[x.index]=r,d({action:o,location:r}))}))},go:v,goBack:function(){v(-1)},goForward:function(){v(1)},canGo:function(e){var t=x.index+e;return t>=0&&t{"use strict";var o=n(9864),r={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},i={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},a={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},s={};function l(e){return o.isMemo(e)?a:s[e.$$typeof]||r}s[o.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},s[o.Memo]=a;var c=Object.defineProperty,u=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,p=Object.getOwnPropertyDescriptor,f=Object.getPrototypeOf,g=Object.prototype;e.exports=function e(t,n,o){if("string"!=typeof n){if(g){var r=f(n);r&&r!==g&&e(t,r,o)}var a=u(n);d&&(a=a.concat(d(n)));for(var s=l(t),m=l(n),h=0;h{"use strict";e.exports=function(e,t,n,o,r,i,a,s){if(!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,o,r,i,a,s],u=0;(l=new Error(t.replace(/%s/g,(function(){return c[u++]})))).name="Invariant Violation"}throw l.framesToPop=1,l}}},5826:e=>{e.exports=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)}},813:function(e){e.exports=function(){"use strict";var e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},t=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},n=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1])||arguments[1],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:5e3;t(this,e),this.ctx=n,this.iframes=o,this.exclude=r,this.iframesTimeout=i}return n(e,[{key:"getContexts",value:function(){var e=[];return(void 0!==this.ctx&&this.ctx?NodeList.prototype.isPrototypeOf(this.ctx)?Array.prototype.slice.call(this.ctx):Array.isArray(this.ctx)?this.ctx:"string"==typeof this.ctx?Array.prototype.slice.call(document.querySelectorAll(this.ctx)):[this.ctx]:[]).forEach((function(t){var n=e.filter((function(e){return e.contains(t)})).length>0;-1!==e.indexOf(t)||n||e.push(t)})),e}},{key:"getIframeContents",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},o=void 0;try{var r=e.contentWindow;if(o=r.document,!r||!o)throw new Error("iframe inaccessible")}catch(i){n()}o&&t(o)}},{key:"isIframeBlank",value:function(e){var t="about:blank",n=e.getAttribute("src").trim();return e.contentWindow.location.href===t&&n!==t&&n}},{key:"observeIframeLoad",value:function(e,t,n){var o=this,r=!1,i=null,a=function a(){if(!r){r=!0,clearTimeout(i);try{o.isIframeBlank(e)||(e.removeEventListener("load",a),o.getIframeContents(e,t,n))}catch(s){n()}}};e.addEventListener("load",a),i=setTimeout(a,this.iframesTimeout)}},{key:"onIframeReady",value:function(e,t,n){try{"complete"===e.contentWindow.document.readyState?this.isIframeBlank(e)?this.observeIframeLoad(e,t,n):this.getIframeContents(e,t,n):this.observeIframeLoad(e,t,n)}catch(o){n()}}},{key:"waitForIframes",value:function(e,t){var n=this,o=0;this.forEachIframe(e,(function(){return!0}),(function(e){o++,n.waitForIframes(e.querySelector("html"),(function(){--o||t()}))}),(function(e){e||t()}))}},{key:"forEachIframe",value:function(t,n,o){var r=this,i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:function(){},a=t.querySelectorAll("iframe"),s=a.length,l=0;a=Array.prototype.slice.call(a);var c=function(){--s<=0&&i(l)};s||c(),a.forEach((function(t){e.matches(t,r.exclude)?c():r.onIframeReady(t,(function(e){n(t)&&(l++,o(e)),c()}),c)}))}},{key:"createIterator",value:function(e,t,n){return document.createNodeIterator(e,t,n,!1)}},{key:"createInstanceOnIframe",value:function(t){return new e(t.querySelector("html"),this.iframes)}},{key:"compareNodeIframe",value:function(e,t,n){if(e.compareDocumentPosition(n)&Node.DOCUMENT_POSITION_PRECEDING){if(null===t)return!0;if(t.compareDocumentPosition(n)&Node.DOCUMENT_POSITION_FOLLOWING)return!0}return!1}},{key:"getIteratorNode",value:function(e){var t=e.previousNode();return{prevNode:t,node:(null===t||e.nextNode())&&e.nextNode()}}},{key:"checkIframeFilter",value:function(e,t,n,o){var r=!1,i=!1;return o.forEach((function(e,t){e.val===n&&(r=t,i=e.handled)})),this.compareNodeIframe(e,t,n)?(!1!==r||i?!1===r||i||(o[r].handled=!0):o.push({val:n,handled:!0}),!0):(!1===r&&o.push({val:n,handled:!1}),!1)}},{key:"handleOpenIframes",value:function(e,t,n,o){var r=this;e.forEach((function(e){e.handled||r.getIframeContents(e.val,(function(e){r.createInstanceOnIframe(e).forEachNode(t,n,o)}))}))}},{key:"iterateThroughNodes",value:function(e,t,n,o,r){for(var i=this,a=this.createIterator(t,e,o),s=[],l=[],c=void 0,u=void 0,d=function(){var e=i.getIteratorNode(a);return u=e.prevNode,c=e.node};d();)this.iframes&&this.forEachIframe(t,(function(e){return i.checkIframeFilter(c,u,e,s)}),(function(t){i.createInstanceOnIframe(t).forEachNode(e,(function(e){return l.push(e)}),o)})),l.push(c);l.forEach((function(e){n(e)})),this.iframes&&this.handleOpenIframes(s,e,n,o),r()}},{key:"forEachNode",value:function(e,t,n){var o=this,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:function(){},i=this.getContexts(),a=i.length;a||r(),i.forEach((function(i){var s=function(){o.iterateThroughNodes(e,i,t,n,(function(){--a<=0&&r()}))};o.iframes?o.waitForIframes(i,s):s()}))}}],[{key:"matches",value:function(e,t){var n="string"==typeof t?[t]:t,o=e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.oMatchesSelector||e.webkitMatchesSelector;if(o){var r=!1;return n.every((function(t){return!o.call(e,t)||(r=!0,!1)})),r}return!1}}]),e}(),i=function(){function i(e){t(this,i),this.ctx=e,this.ie=!1;var n=window.navigator.userAgent;(n.indexOf("MSIE")>-1||n.indexOf("Trident")>-1)&&(this.ie=!0)}return n(i,[{key:"log",value:function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"debug",o=this.opt.log;this.opt.debug&&"object"===(void 0===o?"undefined":e(o))&&"function"==typeof o[n]&&o[n]("mark.js: "+t)}},{key:"escapeStr",value:function(e){return e.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&")}},{key:"createRegExp",value:function(e){return"disabled"!==this.opt.wildcards&&(e=this.setupWildcardsRegExp(e)),e=this.escapeStr(e),Object.keys(this.opt.synonyms).length&&(e=this.createSynonymsRegExp(e)),(this.opt.ignoreJoiners||this.opt.ignorePunctuation.length)&&(e=this.setupIgnoreJoinersRegExp(e)),this.opt.diacritics&&(e=this.createDiacriticsRegExp(e)),e=this.createMergedBlanksRegExp(e),(this.opt.ignoreJoiners||this.opt.ignorePunctuation.length)&&(e=this.createJoinersRegExp(e)),"disabled"!==this.opt.wildcards&&(e=this.createWildcardsRegExp(e)),e=this.createAccuracyRegExp(e)}},{key:"createSynonymsRegExp",value:function(e){var t=this.opt.synonyms,n=this.opt.caseSensitive?"":"i",o=this.opt.ignoreJoiners||this.opt.ignorePunctuation.length?"\0":"";for(var r in t)if(t.hasOwnProperty(r)){var i=t[r],a="disabled"!==this.opt.wildcards?this.setupWildcardsRegExp(r):this.escapeStr(r),s="disabled"!==this.opt.wildcards?this.setupWildcardsRegExp(i):this.escapeStr(i);""!==a&&""!==s&&(e=e.replace(new RegExp("("+this.escapeStr(a)+"|"+this.escapeStr(s)+")","gm"+n),o+"("+this.processSynomyms(a)+"|"+this.processSynomyms(s)+")"+o))}return e}},{key:"processSynomyms",value:function(e){return(this.opt.ignoreJoiners||this.opt.ignorePunctuation.length)&&(e=this.setupIgnoreJoinersRegExp(e)),e}},{key:"setupWildcardsRegExp",value:function(e){return(e=e.replace(/(?:\\)*\?/g,(function(e){return"\\"===e.charAt(0)?"?":"\x01"}))).replace(/(?:\\)*\*/g,(function(e){return"\\"===e.charAt(0)?"*":"\x02"}))}},{key:"createWildcardsRegExp",value:function(e){var t="withSpaces"===this.opt.wildcards;return e.replace(/\u0001/g,t?"[\\S\\s]?":"\\S?").replace(/\u0002/g,t?"[\\S\\s]*?":"\\S*")}},{key:"setupIgnoreJoinersRegExp",value:function(e){return e.replace(/[^(|)\\]/g,(function(e,t,n){var o=n.charAt(t+1);return/[(|)\\]/.test(o)||""===o?e:e+"\0"}))}},{key:"createJoinersRegExp",value:function(e){var t=[],n=this.opt.ignorePunctuation;return Array.isArray(n)&&n.length&&t.push(this.escapeStr(n.join(""))),this.opt.ignoreJoiners&&t.push("\\u00ad\\u200b\\u200c\\u200d"),t.length?e.split(/\u0000+/).join("["+t.join("")+"]*"):e}},{key:"createDiacriticsRegExp",value:function(e){var t=this.opt.caseSensitive?"":"i",n=this.opt.caseSensitive?["a\xe0\xe1\u1ea3\xe3\u1ea1\u0103\u1eb1\u1eaf\u1eb3\u1eb5\u1eb7\xe2\u1ea7\u1ea5\u1ea9\u1eab\u1ead\xe4\xe5\u0101\u0105","A\xc0\xc1\u1ea2\xc3\u1ea0\u0102\u1eb0\u1eae\u1eb2\u1eb4\u1eb6\xc2\u1ea6\u1ea4\u1ea8\u1eaa\u1eac\xc4\xc5\u0100\u0104","c\xe7\u0107\u010d","C\xc7\u0106\u010c","d\u0111\u010f","D\u0110\u010e","e\xe8\xe9\u1ebb\u1ebd\u1eb9\xea\u1ec1\u1ebf\u1ec3\u1ec5\u1ec7\xeb\u011b\u0113\u0119","E\xc8\xc9\u1eba\u1ebc\u1eb8\xca\u1ec0\u1ebe\u1ec2\u1ec4\u1ec6\xcb\u011a\u0112\u0118","i\xec\xed\u1ec9\u0129\u1ecb\xee\xef\u012b","I\xcc\xcd\u1ec8\u0128\u1eca\xce\xcf\u012a","l\u0142","L\u0141","n\xf1\u0148\u0144","N\xd1\u0147\u0143","o\xf2\xf3\u1ecf\xf5\u1ecd\xf4\u1ed3\u1ed1\u1ed5\u1ed7\u1ed9\u01a1\u1edf\u1ee1\u1edb\u1edd\u1ee3\xf6\xf8\u014d","O\xd2\xd3\u1ece\xd5\u1ecc\xd4\u1ed2\u1ed0\u1ed4\u1ed6\u1ed8\u01a0\u1ede\u1ee0\u1eda\u1edc\u1ee2\xd6\xd8\u014c","r\u0159","R\u0158","s\u0161\u015b\u0219\u015f","S\u0160\u015a\u0218\u015e","t\u0165\u021b\u0163","T\u0164\u021a\u0162","u\xf9\xfa\u1ee7\u0169\u1ee5\u01b0\u1eeb\u1ee9\u1eed\u1eef\u1ef1\xfb\xfc\u016f\u016b","U\xd9\xda\u1ee6\u0168\u1ee4\u01af\u1eea\u1ee8\u1eec\u1eee\u1ef0\xdb\xdc\u016e\u016a","y\xfd\u1ef3\u1ef7\u1ef9\u1ef5\xff","Y\xdd\u1ef2\u1ef6\u1ef8\u1ef4\u0178","z\u017e\u017c\u017a","Z\u017d\u017b\u0179"]:["a\xe0\xe1\u1ea3\xe3\u1ea1\u0103\u1eb1\u1eaf\u1eb3\u1eb5\u1eb7\xe2\u1ea7\u1ea5\u1ea9\u1eab\u1ead\xe4\xe5\u0101\u0105A\xc0\xc1\u1ea2\xc3\u1ea0\u0102\u1eb0\u1eae\u1eb2\u1eb4\u1eb6\xc2\u1ea6\u1ea4\u1ea8\u1eaa\u1eac\xc4\xc5\u0100\u0104","c\xe7\u0107\u010dC\xc7\u0106\u010c","d\u0111\u010fD\u0110\u010e","e\xe8\xe9\u1ebb\u1ebd\u1eb9\xea\u1ec1\u1ebf\u1ec3\u1ec5\u1ec7\xeb\u011b\u0113\u0119E\xc8\xc9\u1eba\u1ebc\u1eb8\xca\u1ec0\u1ebe\u1ec2\u1ec4\u1ec6\xcb\u011a\u0112\u0118","i\xec\xed\u1ec9\u0129\u1ecb\xee\xef\u012bI\xcc\xcd\u1ec8\u0128\u1eca\xce\xcf\u012a","l\u0142L\u0141","n\xf1\u0148\u0144N\xd1\u0147\u0143","o\xf2\xf3\u1ecf\xf5\u1ecd\xf4\u1ed3\u1ed1\u1ed5\u1ed7\u1ed9\u01a1\u1edf\u1ee1\u1edb\u1edd\u1ee3\xf6\xf8\u014dO\xd2\xd3\u1ece\xd5\u1ecc\xd4\u1ed2\u1ed0\u1ed4\u1ed6\u1ed8\u01a0\u1ede\u1ee0\u1eda\u1edc\u1ee2\xd6\xd8\u014c","r\u0159R\u0158","s\u0161\u015b\u0219\u015fS\u0160\u015a\u0218\u015e","t\u0165\u021b\u0163T\u0164\u021a\u0162","u\xf9\xfa\u1ee7\u0169\u1ee5\u01b0\u1eeb\u1ee9\u1eed\u1eef\u1ef1\xfb\xfc\u016f\u016bU\xd9\xda\u1ee6\u0168\u1ee4\u01af\u1eea\u1ee8\u1eec\u1eee\u1ef0\xdb\xdc\u016e\u016a","y\xfd\u1ef3\u1ef7\u1ef9\u1ef5\xffY\xdd\u1ef2\u1ef6\u1ef8\u1ef4\u0178","z\u017e\u017c\u017aZ\u017d\u017b\u0179"],o=[];return e.split("").forEach((function(r){n.every((function(n){if(-1!==n.indexOf(r)){if(o.indexOf(n)>-1)return!1;e=e.replace(new RegExp("["+n+"]","gm"+t),"["+n+"]"),o.push(n)}return!0}))})),e}},{key:"createMergedBlanksRegExp",value:function(e){return e.replace(/[\s]+/gim,"[\\s]+")}},{key:"createAccuracyRegExp",value:function(e){var t=this,n="!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~\xa1\xbf",o=this.opt.accuracy,r="string"==typeof o?o:o.value,i="string"==typeof o?[]:o.limiters,a="";switch(i.forEach((function(e){a+="|"+t.escapeStr(e)})),r){case"partially":default:return"()("+e+")";case"complementary":return"()([^"+(a="\\s"+(a||this.escapeStr(n)))+"]*"+e+"[^"+a+"]*)";case"exactly":return"(^|\\s"+a+")("+e+")(?=$|\\s"+a+")"}}},{key:"getSeparatedKeywords",value:function(e){var t=this,n=[];return e.forEach((function(e){t.opt.separateWordSearch?e.split(" ").forEach((function(e){e.trim()&&-1===n.indexOf(e)&&n.push(e)})):e.trim()&&-1===n.indexOf(e)&&n.push(e)})),{keywords:n.sort((function(e,t){return t.length-e.length})),length:n.length}}},{key:"isNumeric",value:function(e){return Number(parseFloat(e))==e}},{key:"checkRanges",value:function(e){var t=this;if(!Array.isArray(e)||"[object Object]"!==Object.prototype.toString.call(e[0]))return this.log("markRanges() will only accept an array of objects"),this.opt.noMatch(e),[];var n=[],o=0;return e.sort((function(e,t){return e.start-t.start})).forEach((function(e){var r=t.callNoMatchOnInvalidRanges(e,o),i=r.start,a=r.end;r.valid&&(e.start=i,e.length=a-i,n.push(e),o=a)})),n}},{key:"callNoMatchOnInvalidRanges",value:function(e,t){var n=void 0,o=void 0,r=!1;return e&&void 0!==e.start?(o=(n=parseInt(e.start,10))+parseInt(e.length,10),this.isNumeric(e.start)&&this.isNumeric(e.length)&&o-t>0&&o-n>0?r=!0:(this.log("Ignoring invalid or overlapping range: "+JSON.stringify(e)),this.opt.noMatch(e))):(this.log("Ignoring invalid range: "+JSON.stringify(e)),this.opt.noMatch(e)),{start:n,end:o,valid:r}}},{key:"checkWhitespaceRanges",value:function(e,t,n){var o=void 0,r=!0,i=n.length,a=t-i,s=parseInt(e.start,10)-a;return(o=(s=s>i?i:s)+parseInt(e.length,10))>i&&(o=i,this.log("End range automatically set to the max value of "+i)),s<0||o-s<0||s>i||o>i?(r=!1,this.log("Invalid range: "+JSON.stringify(e)),this.opt.noMatch(e)):""===n.substring(s,o).replace(/\s+/g,"")&&(r=!1,this.log("Skipping whitespace only range: "+JSON.stringify(e)),this.opt.noMatch(e)),{start:s,end:o,valid:r}}},{key:"getTextNodes",value:function(e){var t=this,n="",o=[];this.iterator.forEachNode(NodeFilter.SHOW_TEXT,(function(e){o.push({start:n.length,end:(n+=e.textContent).length,node:e})}),(function(e){return t.matchesExclude(e.parentNode)?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}),(function(){e({value:n,nodes:o})}))}},{key:"matchesExclude",value:function(e){return r.matches(e,this.opt.exclude.concat(["script","style","title","head","html"]))}},{key:"wrapRangeInTextNode",value:function(e,t,n){var o=this.opt.element?this.opt.element:"mark",r=e.splitText(t),i=r.splitText(n-t),a=document.createElement(o);return a.setAttribute("data-markjs","true"),this.opt.className&&a.setAttribute("class",this.opt.className),a.textContent=r.textContent,r.parentNode.replaceChild(a,r),i}},{key:"wrapRangeInMappedTextNode",value:function(e,t,n,o,r){var i=this;e.nodes.every((function(a,s){var l=e.nodes[s+1];if(void 0===l||l.start>t){if(!o(a.node))return!1;var c=t-a.start,u=(n>a.end?a.end:n)-a.start,d=e.value.substr(0,a.start),p=e.value.substr(u+a.start);if(a.node=i.wrapRangeInTextNode(a.node,c,u),e.value=d+p,e.nodes.forEach((function(t,n){n>=s&&(e.nodes[n].start>0&&n!==s&&(e.nodes[n].start-=u),e.nodes[n].end-=u)})),n-=u,r(a.node.previousSibling,a.start),!(n>a.end))return!1;t=a.end}return!0}))}},{key:"wrapMatches",value:function(e,t,n,o,r){var i=this,a=0===t?0:t+1;this.getTextNodes((function(t){t.nodes.forEach((function(t){t=t.node;for(var r=void 0;null!==(r=e.exec(t.textContent))&&""!==r[a];)if(n(r[a],t)){var s=r.index;if(0!==a)for(var l=1;l{"use strict";n.r(t)},2295:(e,t,n)=>{"use strict";n.r(t)},4865:function(e,t,n){var o,r;o=function(){var e,t,n={version:"0.2.0"},o=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'
'};function r(e,t,n){return en?n:e}function i(e){return 100*(-1+e)}function a(e,t,n){var r;return(r="translate3d"===o.positionUsing?{transform:"translate3d("+i(e)+"%,0,0)"}:"translate"===o.positionUsing?{transform:"translate("+i(e)+"%,0)"}:{"margin-left":i(e)+"%"}).transition="all "+t+"ms "+n,r}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(o[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=r(e,o.minimum,1),n.status=1===e?null:e;var i=n.render(!t),c=i.querySelector(o.barSelector),u=o.speed,d=o.easing;return i.offsetWidth,s((function(t){""===o.positionUsing&&(o.positionUsing=n.getPositioningCSS()),l(c,a(e,u,d)),1===e?(l(i,{transition:"none",opacity:1}),i.offsetWidth,setTimeout((function(){l(i,{transition:"all "+u+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),u)}),u)):setTimeout(t,u)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),o.trickleSpeed)};return o.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*r(Math.random()*t,.1,.95)),t=r(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*o.trickleRate)},e=0,t=0,n.promise=function(o){return o&&"resolved"!==o.state()?(0===t&&n.start(),e++,t++,o.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");u(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=o.template;var r,a=t.querySelector(o.barSelector),s=e?"-100":i(n.status||0),c=document.querySelector(o.parent);return l(a,{transition:"all 0 linear",transform:"translate3d("+s+"%,0,0)"}),o.showSpinner||(r=t.querySelector(o.spinnerSelector))&&f(r),c!=document.body&&u(c,"nprogress-custom-parent"),c.appendChild(t),t},n.remove=function(){d(document.documentElement,"nprogress-busy"),d(document.querySelector(o.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&f(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var s=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),l=function(){var e=["Webkit","O","Moz","ms"],t={};function n(e){return e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()}))}function o(t){var n=document.body.style;if(t in n)return t;for(var o,r=e.length,i=t.charAt(0).toUpperCase()+t.slice(1);r--;)if((o=e[r]+i)in n)return o;return t}function r(e){return e=n(e),t[e]||(t[e]=o(e))}function i(e,t,n){t=r(t),e.style[t]=n}return function(e,t){var n,o,r=arguments;if(2==r.length)for(n in t)void 0!==(o=t[n])&&t.hasOwnProperty(n)&&i(e,n,o);else i(e,r[1],r[2])}}();function c(e,t){return("string"==typeof e?e:p(e)).indexOf(" "+t+" ")>=0}function u(e,t){var n=p(e),o=n+t;c(n,t)||(e.className=o.substring(1))}function d(e,t){var n,o=p(e);c(e,t)&&(n=o.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function p(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function f(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n},void 0===(r="function"==typeof o?o.call(t,n,t,e):o)||(e.exports=r)},4779:(e,t,n)=>{var o=n(5826);e.exports=f,e.exports.parse=i,e.exports.compile=function(e,t){return s(i(e,t),t)},e.exports.tokensToFunction=s,e.exports.tokensToRegExp=p;var r=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function i(e,t){for(var n,o=[],i=0,a=0,s="",u=t&&t.delimiter||"/";null!=(n=r.exec(e));){var d=n[0],p=n[1],f=n.index;if(s+=e.slice(a,f),a=f+d.length,p)s+=p[1];else{var g=e[a],m=n[2],h=n[3],y=n[4],b=n[5],v=n[6],x=n[7];s&&(o.push(s),s="");var w=null!=m&&null!=g&&g!==m,S="+"===v||"*"===v,k="?"===v||"*"===v,_=n[2]||u,E=y||b;o.push({name:h||i++,prefix:m||"",delimiter:_,optional:k,repeat:S,partial:w,asterisk:!!x,pattern:E?c(E):x?".*":"[^"+l(_)+"]+?"})}}return a{e.exports&&(e.exports={core:{meta:{path:"components/prism-core.js",option:"mandatory"},core:"Core"},themes:{meta:{path:"themes/{id}.css",link:"index.html?theme={id}",exclusive:!0},prism:{title:"Default",option:"default"},"prism-dark":"Dark","prism-funky":"Funky","prism-okaidia":{title:"Okaidia",owner:"ocodia"},"prism-twilight":{title:"Twilight",owner:"remybach"},"prism-coy":{title:"Coy",owner:"tshedor"},"prism-solarizedlight":{title:"Solarized Light",owner:"hectormatos2011 "},"prism-tomorrow":{title:"Tomorrow Night",owner:"Rosey"}},languages:{meta:{path:"components/prism-{id}",noCSS:!0,examplesPath:"examples/prism-{id}",addCheckAll:!0},markup:{title:"Markup",alias:["html","xml","svg","mathml","ssml","atom","rss"],aliasTitles:{html:"HTML",xml:"XML",svg:"SVG",mathml:"MathML",ssml:"SSML",atom:"Atom",rss:"RSS"},option:"default"},css:{title:"CSS",option:"default",modify:"markup"},clike:{title:"C-like",option:"default"},javascript:{title:"JavaScript",require:"clike",modify:"markup",optional:"regex",alias:"js",option:"default"},abap:{title:"ABAP",owner:"dellagustin"},abnf:{title:"ABNF",owner:"RunDevelopment"},actionscript:{title:"ActionScript",require:"javascript",modify:"markup",owner:"Golmote"},ada:{title:"Ada",owner:"Lucretia"},agda:{title:"Agda",owner:"xy-ren"},al:{title:"AL",owner:"RunDevelopment"},antlr4:{title:"ANTLR4",alias:"g4",owner:"RunDevelopment"},apacheconf:{title:"Apache Configuration",owner:"GuiTeK"},apex:{title:"Apex",require:["clike","sql"],owner:"RunDevelopment"},apl:{title:"APL",owner:"ngn"},applescript:{title:"AppleScript",owner:"Golmote"},aql:{title:"AQL",owner:"RunDevelopment"},arduino:{title:"Arduino",require:"cpp",alias:"ino",owner:"dkern"},arff:{title:"ARFF",owner:"Golmote"},armasm:{title:"ARM Assembly",alias:"arm-asm",owner:"RunDevelopment"},arturo:{title:"Arturo",alias:"art",optional:["bash","css","javascript","markup","markdown","sql"],owner:"drkameleon"},asciidoc:{alias:"adoc",title:"AsciiDoc",owner:"Golmote"},aspnet:{title:"ASP.NET (C#)",require:["markup","csharp"],owner:"nauzilus"},asm6502:{title:"6502 Assembly",owner:"kzurawel"},asmatmel:{title:"Atmel AVR Assembly",owner:"cerkit"},autohotkey:{title:"AutoHotkey",owner:"aviaryan"},autoit:{title:"AutoIt",owner:"Golmote"},avisynth:{title:"AviSynth",alias:"avs",owner:"Zinfidel"},"avro-idl":{title:"Avro IDL",alias:"avdl",owner:"RunDevelopment"},awk:{title:"AWK",alias:"gawk",aliasTitles:{gawk:"GAWK"},owner:"RunDevelopment"},bash:{title:"Bash",alias:["sh","shell"],aliasTitles:{sh:"Shell",shell:"Shell"},owner:"zeitgeist87"},basic:{title:"BASIC",owner:"Golmote"},batch:{title:"Batch",owner:"Golmote"},bbcode:{title:"BBcode",alias:"shortcode",aliasTitles:{shortcode:"Shortcode"},owner:"RunDevelopment"},bbj:{title:"BBj",owner:"hyyan"},bicep:{title:"Bicep",owner:"johnnyreilly"},birb:{title:"Birb",require:"clike",owner:"Calamity210"},bison:{title:"Bison",require:"c",owner:"Golmote"},bnf:{title:"BNF",alias:"rbnf",aliasTitles:{rbnf:"RBNF"},owner:"RunDevelopment"},bqn:{title:"BQN",owner:"yewscion"},brainfuck:{title:"Brainfuck",owner:"Golmote"},brightscript:{title:"BrightScript",owner:"RunDevelopment"},bro:{title:"Bro",owner:"wayward710"},bsl:{title:"BSL (1C:Enterprise)",alias:"oscript",aliasTitles:{oscript:"OneScript"},owner:"Diversus23"},c:{title:"C",require:"clike",owner:"zeitgeist87"},csharp:{title:"C#",require:"clike",alias:["cs","dotnet"],owner:"mvalipour"},cpp:{title:"C++",require:"c",owner:"zeitgeist87"},cfscript:{title:"CFScript",require:"clike",alias:"cfc",owner:"mjclemente"},chaiscript:{title:"ChaiScript",require:["clike","cpp"],owner:"RunDevelopment"},cil:{title:"CIL",owner:"sbrl"},cilkc:{title:"Cilk/C",require:"c",alias:"cilk-c",owner:"OpenCilk"},cilkcpp:{title:"Cilk/C++",require:"cpp",alias:["cilk-cpp","cilk"],owner:"OpenCilk"},clojure:{title:"Clojure",owner:"troglotit"},cmake:{title:"CMake",owner:"mjrogozinski"},cobol:{title:"COBOL",owner:"RunDevelopment"},coffeescript:{title:"CoffeeScript",require:"javascript",alias:"coffee",owner:"R-osey"},concurnas:{title:"Concurnas",alias:"conc",owner:"jasontatton"},csp:{title:"Content-Security-Policy",owner:"ScottHelme"},cooklang:{title:"Cooklang",owner:"ahue"},coq:{title:"Coq",owner:"RunDevelopment"},crystal:{title:"Crystal",require:"ruby",owner:"MakeNowJust"},"css-extras":{title:"CSS Extras",require:"css",modify:"css",owner:"milesj"},csv:{title:"CSV",owner:"RunDevelopment"},cue:{title:"CUE",owner:"RunDevelopment"},cypher:{title:"Cypher",owner:"RunDevelopment"},d:{title:"D",require:"clike",owner:"Golmote"},dart:{title:"Dart",require:"clike",owner:"Golmote"},dataweave:{title:"DataWeave",owner:"machaval"},dax:{title:"DAX",owner:"peterbud"},dhall:{title:"Dhall",owner:"RunDevelopment"},diff:{title:"Diff",owner:"uranusjr"},django:{title:"Django/Jinja2",require:"markup-templating",alias:"jinja2",owner:"romanvm"},"dns-zone-file":{title:"DNS zone file",owner:"RunDevelopment",alias:"dns-zone"},docker:{title:"Docker",alias:"dockerfile",owner:"JustinBeckwith"},dot:{title:"DOT (Graphviz)",alias:"gv",optional:"markup",owner:"RunDevelopment"},ebnf:{title:"EBNF",owner:"RunDevelopment"},editorconfig:{title:"EditorConfig",owner:"osipxd"},eiffel:{title:"Eiffel",owner:"Conaclos"},ejs:{title:"EJS",require:["javascript","markup-templating"],owner:"RunDevelopment",alias:"eta",aliasTitles:{eta:"Eta"}},elixir:{title:"Elixir",owner:"Golmote"},elm:{title:"Elm",owner:"zwilias"},etlua:{title:"Embedded Lua templating",require:["lua","markup-templating"],owner:"RunDevelopment"},erb:{title:"ERB",require:["ruby","markup-templating"],owner:"Golmote"},erlang:{title:"Erlang",owner:"Golmote"},"excel-formula":{title:"Excel Formula",alias:["xlsx","xls"],owner:"RunDevelopment"},fsharp:{title:"F#",require:"clike",owner:"simonreynolds7"},factor:{title:"Factor",owner:"catb0t"},false:{title:"False",owner:"edukisto"},"firestore-security-rules":{title:"Firestore security rules",require:"clike",owner:"RunDevelopment"},flow:{title:"Flow",require:"javascript",owner:"Golmote"},fortran:{title:"Fortran",owner:"Golmote"},ftl:{title:"FreeMarker Template Language",require:"markup-templating",owner:"RunDevelopment"},gml:{title:"GameMaker Language",alias:"gamemakerlanguage",require:"clike",owner:"LiarOnce"},gap:{title:"GAP (CAS)",owner:"RunDevelopment"},gcode:{title:"G-code",owner:"RunDevelopment"},gdscript:{title:"GDScript",owner:"RunDevelopment"},gedcom:{title:"GEDCOM",owner:"Golmote"},gettext:{title:"gettext",alias:"po",owner:"RunDevelopment"},gherkin:{title:"Gherkin",owner:"hason"},git:{title:"Git",owner:"lgiraudel"},glsl:{title:"GLSL",require:"c",owner:"Golmote"},gn:{title:"GN",alias:"gni",owner:"RunDevelopment"},"linker-script":{title:"GNU Linker Script",alias:"ld",owner:"RunDevelopment"},go:{title:"Go",require:"clike",owner:"arnehormann"},"go-module":{title:"Go module",alias:"go-mod",owner:"RunDevelopment"},gradle:{title:"Gradle",require:"clike",owner:"zeabdelkhalek-badido18"},graphql:{title:"GraphQL",optional:"markdown",owner:"Golmote"},groovy:{title:"Groovy",require:"clike",owner:"robfletcher"},haml:{title:"Haml",require:"ruby",optional:["css","css-extras","coffeescript","erb","javascript","less","markdown","scss","textile"],owner:"Golmote"},handlebars:{title:"Handlebars",require:"markup-templating",alias:["hbs","mustache"],aliasTitles:{mustache:"Mustache"},owner:"Golmote"},haskell:{title:"Haskell",alias:"hs",owner:"bholst"},haxe:{title:"Haxe",require:"clike",optional:"regex",owner:"Golmote"},hcl:{title:"HCL",owner:"outsideris"},hlsl:{title:"HLSL",require:"c",owner:"RunDevelopment"},hoon:{title:"Hoon",owner:"matildepark"},http:{title:"HTTP",optional:["csp","css","hpkp","hsts","javascript","json","markup","uri"],owner:"danielgtaylor"},hpkp:{title:"HTTP Public-Key-Pins",owner:"ScottHelme"},hsts:{title:"HTTP Strict-Transport-Security",owner:"ScottHelme"},ichigojam:{title:"IchigoJam",owner:"BlueCocoa"},icon:{title:"Icon",owner:"Golmote"},"icu-message-format":{title:"ICU Message Format",owner:"RunDevelopment"},idris:{title:"Idris",alias:"idr",owner:"KeenS",require:"haskell"},ignore:{title:".ignore",owner:"osipxd",alias:["gitignore","hgignore","npmignore"],aliasTitles:{gitignore:".gitignore",hgignore:".hgignore",npmignore:".npmignore"}},inform7:{title:"Inform 7",owner:"Golmote"},ini:{title:"Ini",owner:"aviaryan"},io:{title:"Io",owner:"AlesTsurko"},j:{title:"J",owner:"Golmote"},java:{title:"Java",require:"clike",owner:"sherblot"},javadoc:{title:"JavaDoc",require:["markup","java","javadoclike"],modify:"java",optional:"scala",owner:"RunDevelopment"},javadoclike:{title:"JavaDoc-like",modify:["java","javascript","php"],owner:"RunDevelopment"},javastacktrace:{title:"Java stack trace",owner:"RunDevelopment"},jexl:{title:"Jexl",owner:"czosel"},jolie:{title:"Jolie",require:"clike",owner:"thesave"},jq:{title:"JQ",owner:"RunDevelopment"},jsdoc:{title:"JSDoc",require:["javascript","javadoclike","typescript"],modify:"javascript",optional:["actionscript","coffeescript"],owner:"RunDevelopment"},"js-extras":{title:"JS Extras",require:"javascript",modify:"javascript",optional:["actionscript","coffeescript","flow","n4js","typescript"],owner:"RunDevelopment"},json:{title:"JSON",alias:"webmanifest",aliasTitles:{webmanifest:"Web App Manifest"},owner:"CupOfTea696"},json5:{title:"JSON5",require:"json",owner:"RunDevelopment"},jsonp:{title:"JSONP",require:"json",owner:"RunDevelopment"},jsstacktrace:{title:"JS stack trace",owner:"sbrl"},"js-templates":{title:"JS Templates",require:"javascript",modify:"javascript",optional:["css","css-extras","graphql","markdown","markup","sql"],owner:"RunDevelopment"},julia:{title:"Julia",owner:"cdagnino"},keepalived:{title:"Keepalived Configure",owner:"dev-itsheng"},keyman:{title:"Keyman",owner:"mcdurdin"},kotlin:{title:"Kotlin",alias:["kt","kts"],aliasTitles:{kts:"Kotlin Script"},require:"clike",owner:"Golmote"},kumir:{title:"KuMir (\u041a\u0443\u041c\u0438\u0440)",alias:"kum",owner:"edukisto"},kusto:{title:"Kusto",owner:"RunDevelopment"},latex:{title:"LaTeX",alias:["tex","context"],aliasTitles:{tex:"TeX",context:"ConTeXt"},owner:"japborst"},latte:{title:"Latte",require:["clike","markup-templating","php"],owner:"nette"},less:{title:"Less",require:"css",optional:"css-extras",owner:"Golmote"},lilypond:{title:"LilyPond",require:"scheme",alias:"ly",owner:"RunDevelopment"},liquid:{title:"Liquid",require:"markup-templating",owner:"cinhtau"},lisp:{title:"Lisp",alias:["emacs","elisp","emacs-lisp"],owner:"JuanCaicedo"},livescript:{title:"LiveScript",owner:"Golmote"},llvm:{title:"LLVM IR",owner:"porglezomp"},log:{title:"Log file",optional:"javastacktrace",owner:"RunDevelopment"},lolcode:{title:"LOLCODE",owner:"Golmote"},lua:{title:"Lua",owner:"Golmote"},magma:{title:"Magma (CAS)",owner:"RunDevelopment"},makefile:{title:"Makefile",owner:"Golmote"},markdown:{title:"Markdown",require:"markup",optional:"yaml",alias:"md",owner:"Golmote"},"markup-templating":{title:"Markup templating",require:"markup",owner:"Golmote"},mata:{title:"Mata",owner:"RunDevelopment"},matlab:{title:"MATLAB",owner:"Golmote"},maxscript:{title:"MAXScript",owner:"RunDevelopment"},mel:{title:"MEL",owner:"Golmote"},mermaid:{title:"Mermaid",owner:"RunDevelopment"},metafont:{title:"METAFONT",owner:"LaeriExNihilo"},mizar:{title:"Mizar",owner:"Golmote"},mongodb:{title:"MongoDB",owner:"airs0urce",require:"javascript"},monkey:{title:"Monkey",owner:"Golmote"},moonscript:{title:"MoonScript",alias:"moon",owner:"RunDevelopment"},n1ql:{title:"N1QL",owner:"TMWilds"},n4js:{title:"N4JS",require:"javascript",optional:"jsdoc",alias:"n4jsd",owner:"bsmith-n4"},"nand2tetris-hdl":{title:"Nand To Tetris HDL",owner:"stephanmax"},naniscript:{title:"Naninovel Script",owner:"Elringus",alias:"nani"},nasm:{title:"NASM",owner:"rbmj"},neon:{title:"NEON",owner:"nette"},nevod:{title:"Nevod",owner:"nezaboodka"},nginx:{title:"nginx",owner:"volado"},nim:{title:"Nim",owner:"Golmote"},nix:{title:"Nix",owner:"Golmote"},nsis:{title:"NSIS",owner:"idleberg"},objectivec:{title:"Objective-C",require:"c",alias:"objc",owner:"uranusjr"},ocaml:{title:"OCaml",owner:"Golmote"},odin:{title:"Odin",owner:"edukisto"},opencl:{title:"OpenCL",require:"c",modify:["c","cpp"],owner:"Milania1"},openqasm:{title:"OpenQasm",alias:"qasm",owner:"RunDevelopment"},oz:{title:"Oz",owner:"Golmote"},parigp:{title:"PARI/GP",owner:"Golmote"},parser:{title:"Parser",require:"markup",owner:"Golmote"},pascal:{title:"Pascal",alias:"objectpascal",aliasTitles:{objectpascal:"Object Pascal"},owner:"Golmote"},pascaligo:{title:"Pascaligo",owner:"DefinitelyNotAGoat"},psl:{title:"PATROL Scripting Language",owner:"bertysentry"},pcaxis:{title:"PC-Axis",alias:"px",owner:"RunDevelopment"},peoplecode:{title:"PeopleCode",alias:"pcode",owner:"RunDevelopment"},perl:{title:"Perl",owner:"Golmote"},php:{title:"PHP",require:"markup-templating",owner:"milesj"},phpdoc:{title:"PHPDoc",require:["php","javadoclike"],modify:"php",owner:"RunDevelopment"},"php-extras":{title:"PHP Extras",require:"php",modify:"php",owner:"milesj"},"plant-uml":{title:"PlantUML",alias:"plantuml",owner:"RunDevelopment"},plsql:{title:"PL/SQL",require:"sql",owner:"Golmote"},powerquery:{title:"PowerQuery",alias:["pq","mscript"],owner:"peterbud"},powershell:{title:"PowerShell",owner:"nauzilus"},processing:{title:"Processing",require:"clike",owner:"Golmote"},prolog:{title:"Prolog",owner:"Golmote"},promql:{title:"PromQL",owner:"arendjr"},properties:{title:".properties",owner:"Golmote"},protobuf:{title:"Protocol Buffers",require:"clike",owner:"just-boris"},pug:{title:"Pug",require:["markup","javascript"],optional:["coffeescript","ejs","handlebars","less","livescript","markdown","scss","stylus","twig"],owner:"Golmote"},puppet:{title:"Puppet",owner:"Golmote"},pure:{title:"Pure",optional:["c","cpp","fortran"],owner:"Golmote"},purebasic:{title:"PureBasic",require:"clike",alias:"pbfasm",owner:"HeX0R101"},purescript:{title:"PureScript",require:"haskell",alias:"purs",owner:"sriharshachilakapati"},python:{title:"Python",alias:"py",owner:"multipetros"},qsharp:{title:"Q#",require:"clike",alias:"qs",owner:"fedonman"},q:{title:"Q (kdb+ database)",owner:"Golmote"},qml:{title:"QML",require:"javascript",owner:"RunDevelopment"},qore:{title:"Qore",require:"clike",owner:"temnroegg"},r:{title:"R",owner:"Golmote"},racket:{title:"Racket",require:"scheme",alias:"rkt",owner:"RunDevelopment"},cshtml:{title:"Razor C#",alias:"razor",require:["markup","csharp"],optional:["css","css-extras","javascript","js-extras"],owner:"RunDevelopment"},jsx:{title:"React JSX",require:["markup","javascript"],optional:["jsdoc","js-extras","js-templates"],owner:"vkbansal"},tsx:{title:"React TSX",require:["jsx","typescript"]},reason:{title:"Reason",require:"clike",owner:"Golmote"},regex:{title:"Regex",owner:"RunDevelopment"},rego:{title:"Rego",owner:"JordanSh"},renpy:{title:"Ren'py",alias:"rpy",owner:"HyuchiaDiego"},rescript:{title:"ReScript",alias:"res",owner:"vmarcosp"},rest:{title:"reST (reStructuredText)",owner:"Golmote"},rip:{title:"Rip",owner:"ravinggenius"},roboconf:{title:"Roboconf",owner:"Golmote"},robotframework:{title:"Robot Framework",alias:"robot",owner:"RunDevelopment"},ruby:{title:"Ruby",require:"clike",alias:"rb",owner:"samflores"},rust:{title:"Rust",owner:"Golmote"},sas:{title:"SAS",optional:["groovy","lua","sql"],owner:"Golmote"},sass:{title:"Sass (Sass)",require:"css",optional:"css-extras",owner:"Golmote"},scss:{title:"Sass (SCSS)",require:"css",optional:"css-extras",owner:"MoOx"},scala:{title:"Scala",require:"java",owner:"jozic"},scheme:{title:"Scheme",owner:"bacchus123"},"shell-session":{title:"Shell session",require:"bash",alias:["sh-session","shellsession"],owner:"RunDevelopment"},smali:{title:"Smali",owner:"RunDevelopment"},smalltalk:{title:"Smalltalk",owner:"Golmote"},smarty:{title:"Smarty",require:"markup-templating",optional:"php",owner:"Golmote"},sml:{title:"SML",alias:"smlnj",aliasTitles:{smlnj:"SML/NJ"},owner:"RunDevelopment"},solidity:{title:"Solidity (Ethereum)",alias:"sol",require:"clike",owner:"glachaud"},"solution-file":{title:"Solution file",alias:"sln",owner:"RunDevelopment"},soy:{title:"Soy (Closure Template)",require:"markup-templating",owner:"Golmote"},sparql:{title:"SPARQL",require:"turtle",owner:"Triply-Dev",alias:"rq"},"splunk-spl":{title:"Splunk SPL",owner:"RunDevelopment"},sqf:{title:"SQF: Status Quo Function (Arma 3)",require:"clike",owner:"RunDevelopment"},sql:{title:"SQL",owner:"multipetros"},squirrel:{title:"Squirrel",require:"clike",owner:"RunDevelopment"},stan:{title:"Stan",owner:"RunDevelopment"},stata:{title:"Stata Ado",require:["mata","java","python"],owner:"RunDevelopment"},iecst:{title:"Structured Text (IEC 61131-3)",owner:"serhioromano"},stylus:{title:"Stylus",owner:"vkbansal"},supercollider:{title:"SuperCollider",alias:"sclang",owner:"RunDevelopment"},swift:{title:"Swift",owner:"chrischares"},systemd:{title:"Systemd configuration file",owner:"RunDevelopment"},"t4-templating":{title:"T4 templating",owner:"RunDevelopment"},"t4-cs":{title:"T4 Text Templates (C#)",require:["t4-templating","csharp"],alias:"t4",owner:"RunDevelopment"},"t4-vb":{title:"T4 Text Templates (VB)",require:["t4-templating","vbnet"],owner:"RunDevelopment"},tap:{title:"TAP",owner:"isaacs",require:"yaml"},tcl:{title:"Tcl",owner:"PeterChaplin"},tt2:{title:"Template Toolkit 2",require:["clike","markup-templating"],owner:"gflohr"},textile:{title:"Textile",require:"markup",optional:"css",owner:"Golmote"},toml:{title:"TOML",owner:"RunDevelopment"},tremor:{title:"Tremor",alias:["trickle","troy"],owner:"darach",aliasTitles:{trickle:"trickle",troy:"troy"}},turtle:{title:"Turtle",alias:"trig",aliasTitles:{trig:"TriG"},owner:"jakubklimek"},twig:{title:"Twig",require:"markup-templating",owner:"brandonkelly"},typescript:{title:"TypeScript",require:"javascript",optional:"js-templates",alias:"ts",owner:"vkbansal"},typoscript:{title:"TypoScript",alias:"tsconfig",aliasTitles:{tsconfig:"TSConfig"},owner:"dkern"},unrealscript:{title:"UnrealScript",alias:["uscript","uc"],owner:"RunDevelopment"},uorazor:{title:"UO Razor Script",owner:"jaseowns"},uri:{title:"URI",alias:"url",aliasTitles:{url:"URL"},owner:"RunDevelopment"},v:{title:"V",require:"clike",owner:"taggon"},vala:{title:"Vala",require:"clike",optional:"regex",owner:"TemplarVolk"},vbnet:{title:"VB.Net",require:"basic",owner:"Bigsby"},velocity:{title:"Velocity",require:"markup",owner:"Golmote"},verilog:{title:"Verilog",owner:"a-rey"},vhdl:{title:"VHDL",owner:"a-rey"},vim:{title:"vim",owner:"westonganger"},"visual-basic":{title:"Visual Basic",alias:["vb","vba"],aliasTitles:{vba:"VBA"},owner:"Golmote"},warpscript:{title:"WarpScript",owner:"RunDevelopment"},wasm:{title:"WebAssembly",owner:"Golmote"},"web-idl":{title:"Web IDL",alias:"webidl",owner:"RunDevelopment"},wgsl:{title:"WGSL",owner:"Dr4gonthree"},wiki:{title:"Wiki markup",require:"markup",owner:"Golmote"},wolfram:{title:"Wolfram language",alias:["mathematica","nb","wl"],aliasTitles:{mathematica:"Mathematica",nb:"Mathematica Notebook"},owner:"msollami"},wren:{title:"Wren",owner:"clsource"},xeora:{title:"Xeora",require:"markup",alias:"xeoracube",aliasTitles:{xeoracube:"XeoraCube"},owner:"freakmaxi"},"xml-doc":{title:"XML doc (.net)",require:"markup",modify:["csharp","fsharp","vbnet"],owner:"RunDevelopment"},xojo:{title:"Xojo (REALbasic)",owner:"Golmote"},xquery:{title:"XQuery",require:"markup",owner:"Golmote"},yaml:{title:"YAML",alias:"yml",owner:"hason"},yang:{title:"YANG",owner:"RunDevelopment"},zig:{title:"Zig",owner:"RunDevelopment"}},plugins:{meta:{path:"plugins/{id}/prism-{id}",link:"plugins/{id}/"},"line-highlight":{title:"Line Highlight",description:"Highlights specific lines and/or line ranges."},"line-numbers":{title:"Line Numbers",description:"Line number at the beginning of code lines.",owner:"kuba-kubula"},"show-invisibles":{title:"Show Invisibles",description:"Show hidden characters such as tabs and line breaks.",optional:["autolinker","data-uri-highlight"]},autolinker:{title:"Autolinker",description:"Converts URLs and emails in code to clickable links. Parses Markdown links in comments."},wpd:{title:"WebPlatform Docs",description:'Makes tokens link to WebPlatform.org documentation. The links open in a new tab.'},"custom-class":{title:"Custom Class",description:"This plugin allows you to prefix Prism's default classes (.comment can become .namespace--comment) or replace them with your defined ones (like .editor__comment). You can even add new classes.",owner:"dvkndn",noCSS:!0},"file-highlight":{title:"File Highlight",description:"Fetch external files and highlight them with Prism. Used on the Prism website itself.",noCSS:!0},"show-language":{title:"Show Language",description:"Display the highlighted language in code blocks (inline code does not show the label).",owner:"nauzilus",noCSS:!0,require:"toolbar"},"jsonp-highlight":{title:"JSONP Highlight",description:"Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).",noCSS:!0,owner:"nauzilus"},"highlight-keywords":{title:"Highlight Keywords",description:"Adds special CSS classes for each keyword for fine-grained highlighting.",owner:"vkbansal",noCSS:!0},"remove-initial-line-feed":{title:"Remove initial line feed",description:"Removes the initial line feed in code blocks.",owner:"Golmote",noCSS:!0},"inline-color":{title:"Inline color",description:"Adds a small inline preview for colors in style sheets.",require:"css-extras",owner:"RunDevelopment"},previewers:{title:"Previewers",description:"Previewers for angles, colors, gradients, easing and time.",require:"css-extras",owner:"Golmote"},autoloader:{title:"Autoloader",description:"Automatically loads the needed languages to highlight the code blocks.",owner:"Golmote",noCSS:!0},"keep-markup":{title:"Keep Markup",description:"Prevents custom markup from being dropped out during highlighting.",owner:"Golmote",optional:"normalize-whitespace",noCSS:!0},"command-line":{title:"Command Line",description:"Display a command line with a prompt and, optionally, the output/response from the commands.",owner:"chriswells0"},"unescaped-markup":{title:"Unescaped Markup",description:"Write markup without having to escape anything."},"normalize-whitespace":{title:"Normalize Whitespace",description:"Supports multiple operations to normalize whitespace in code blocks.",owner:"zeitgeist87",optional:"unescaped-markup",noCSS:!0},"data-uri-highlight":{title:"Data-URI Highlight",description:"Highlights data-URI contents.",owner:"Golmote",noCSS:!0},toolbar:{title:"Toolbar",description:"Attach a toolbar for plugins to easily register buttons on the top of a code block.",owner:"mAAdhaTTah"},"copy-to-clipboard":{title:"Copy to Clipboard Button",description:"Add a button that copies the code block to the clipboard when clicked.",owner:"mAAdhaTTah",require:"toolbar",noCSS:!0},"download-button":{title:"Download Button",description:"A button in the toolbar of a code block adding a convenient way to download a code file.",owner:"Golmote",require:"toolbar",noCSS:!0},"match-braces":{title:"Match braces",description:"Highlights matching braces.",owner:"RunDevelopment"},"diff-highlight":{title:"Diff Highlight",description:"Highlights the code inside diff blocks.",owner:"RunDevelopment",require:"diff"},"filter-highlight-all":{title:"Filter highlightAll",description:"Filters the elements the highlightAll and highlightAllUnder methods actually highlight.",owner:"RunDevelopment",noCSS:!0},treeview:{title:"Treeview",description:"A language with special styles to highlight file system tree structures.",owner:"Golmote"}}})},2885:(e,t,n)=>{const o=n(9901),r=n(9642),i=new Set;function a(e){void 0===e?e=Object.keys(o.languages).filter((e=>"meta"!=e)):Array.isArray(e)||(e=[e]);const t=[...i,...Object.keys(Prism.languages)];r(o,e,t).load((e=>{if(!(e in o.languages))return void(a.silent||console.warn("Language does not exist: "+e));const t="./prism-"+e;delete n.c[n(6500).resolve(t)],delete Prism.languages[e],n(6500)(t),i.add(e)}))}a.silent=!1,e.exports=a},6854:()=>{!function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,o,r,i){if(n.language===o){var a=n.tokenStack=[];n.code=n.code.replace(r,(function(e){if("function"==typeof i&&!i(e))return e;for(var r,s=a.length;-1!==n.code.indexOf(r=t(o,s));)++s;return a[s]=e,r})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,o){if(n.language===o&&n.tokenStack){n.grammar=e.languages[o];var r=0,i=Object.keys(n.tokenStack);!function a(s){for(var l=0;l=i.length);l++){var c=s[l];if("string"==typeof c||c.content&&"string"==typeof c.content){var u=i[r],d=n.tokenStack[u],p="string"==typeof c?c:c.content,f=t(o,u),g=p.indexOf(f);if(g>-1){++r;var m=p.substring(0,g),h=new e.Token(o,e.tokenize(d,n.grammar),"language-"+o,d),y=p.substring(g+f.length),b=[];m&&b.push.apply(b,a([m])),b.push(h),y&&b.push.apply(b,a([y])),"string"==typeof c?s.splice.apply(s,[l,1].concat(b)):c.content=b}}else c.content&&a(c.content)}return s}(n.tokens)}}}})}(Prism)},6726:(e,t,n)=>{var o={"./":2885};function r(e){var t=i(e);return n(t)}function i(e){if(!n.o(o,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return o[e]}r.keys=function(){return Object.keys(o)},r.resolve=i,e.exports=r,r.id=6726},6500:(e,t,n)=>{var o={"./":2885};function r(e){var t=i(e);return n(t)}function i(e){if(!n.o(o,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return o[e]}r.keys=function(){return Object.keys(o)},r.resolve=i,e.exports=r,r.id=6500},9642:e=>{"use strict";var t=function(){var e=function(){};function t(e,t){Array.isArray(e)?e.forEach(t):null!=e&&t(e,0)}function n(e){for(var t={},n=0,o=e.length;n "));var s={},l=e[o];if(l){function c(t){if(!(t in e))throw new Error(o+" depends on an unknown component "+t);if(!(t in s))for(var a in r(t,i),s[t]=!0,n[t])s[a]=!0}t(l.require,c),t(l.optional,c),t(l.modify,c)}n[o]=s,i.pop()}}return function(e){var t=n[e];return t||(r(e,o),t=n[e]),t}}function r(e){for(var t in e)return!0;return!1}return function(i,a,s){var l=function(e){var t={};for(var n in e){var o=e[n];for(var r in o)if("meta"!=r){var i=o[r];t[r]="string"==typeof i?{title:i}:i}}return t}(i),c=function(e){var n;return function(o){if(o in e)return o;if(!n)for(var r in n={},e){var i=e[r];t(i&&i.alias,(function(t){if(t in n)throw new Error(t+" cannot be alias for both "+r+" and "+n[t]);if(t in e)throw new Error(t+" cannot be alias of "+r+" because it is a component.");n[t]=r}))}return n[o]||o}}(l);a=a.map(c),s=(s||[]).map(c);var u=n(a),d=n(s);a.forEach((function e(n){var o=l[n];t(o&&o.require,(function(t){t in d||(u[t]=!0,e(t))}))}));for(var p,f=o(l),g=u;r(g);){for(var m in p={},g){var h=l[m];t(h&&h.modify,(function(e){e in d&&(p[e]=!0)}))}for(var y in d)if(!(y in u))for(var b in f(y))if(b in u){p[y]=!0;break}for(var v in g=p)u[v]=!0}var x={getIds:function(){var e=[];return x.load((function(t){e.push(t)})),e},load:function(t,n){return function(t,n,o,r){var i=r?r.series:void 0,a=r?r.parallel:e,s={},l={};function c(e){if(e in s)return s[e];l[e]=!0;var r,u=[];for(var d in t(e))d in n&&u.push(d);if(0===u.length)r=o(e);else{var p=a(u.map((function(e){var t=c(e);return delete l[e],t})));i?r=i(p,(function(){return o(e)})):o(e)}return s[e]=r}for(var u in n)c(u);var d=[];for(var p in l)d.push(s[p]);return a(d)}(f,u,t,n)}};return x}}();e.exports=t},2703:(e,t,n)=>{"use strict";var o=n(414);function r(){}function i(){}i.resetWarningCache=r,e.exports=function(){function e(e,t,n,r,i,a){if(a!==o){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:i,resetWarningCache:r};return n.PropTypes=n,n}},5697:(e,t,n)=>{e.exports=n(2703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},4448:(e,t,n)=>{"use strict";var o=n(7294),r=n(3840);function i(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n