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 is derived 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 simple theme, you can use it to create straightforward slides and easily incorporate features you like."}),"\n",(0,i.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,i.jsx)(n.p,{children:"You can initialize the Simple 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.2.0": *\n\n#let s = themes.simple.register(s, aspect-ratio: "16-9", footer: [Simple slides])\n#let s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slide, slides, title-slide, centered-slide, focus-slide) = utils.methods(s)\n#show: init\n'})}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"register"})," function takes parameters such as:"]}),"\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," with the default being "16-9."']}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"footer"}),": Content to be displayed in the footer, with the default being ",(0,i.jsx)(n.code,{children:"[]"}),". You can also pass 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 to be displayed on the right side of the footer, with the default being ",(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, with the default being white."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"foreground"}),": Text color, with the default being black."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"primary"}),": Theme color, with the default being ",(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 series 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 on the slide. 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 just 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:"This is the default ordinary slide function with a header and footer. The header is set to the current section, and the footer is as per your settings."}),"\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 (default is ",(0,i.jsx)(n.code,{children:"white"}),") and a background color (default is ",(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.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.2.0": *\n\n#let s = themes.simple.register(s, aspect-ratio: "16-9", footer: [Simple slides])\n#let s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slide, slides, title-slide, centered-slide, focus-slide) = utils.methods(s)\n#show: init\n\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.2.0": *\n\n#let s = themes.simple.register(s, aspect-ratio: "16-9", footer: [Simple slides])\n#let s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slide, slides, title-slide, centered-slide, focus-slide) = utils.methods(s)\n#show: init\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#slide[\n == First slide\n\n #lorem(20)\n]\n\n#focus-slide[\n _Focus!_\n\n This is very important.\n]\n\n#centered-slide(section: [Let\'s start a new section!])\n\n#slide[\n == Dynamic slide\n Did you know that...\n\n #pause\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:()=>r,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 r(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/5a57e638.7f12e2df.js b/assets/js/5a57e638.7f12e2df.js
deleted file mode 100644
index 29ce663e2..000000000
--- a/assets/js/5a57e638.7f12e2df.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2143],{8811:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>d,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>r,toc:()=>c});var i=s(5893),t=s(1151);const l={sidebar_position:1},o="Simple Theme",r={id:"themes/simple",title:"Simple Theme",description:"This theme is derived from Polylux, created by Andreas Kr\xf6pelin.",source:"@site/docs/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/docs/themes/simple.md",tags:[],version:"current",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"}},d={},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",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.jsxs)(n.p,{children:["This theme is derived 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 simple theme, you can use it to create straightforward slides and easily incorporate features you like."}),"\n",(0,i.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,i.jsx)(n.p,{children:"You can initialize the Simple 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.2.0": *\n\n#let s = themes.simple.register(s, aspect-ratio: "16-9", footer: [Simple slides])\n#let s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slide, slides, title-slide, centered-slide, focus-slide) = utils.methods(s)\n#show: init\n'})}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"register"})," function takes parameters such as:"]}),"\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," with the default being "16-9."']}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"footer"}),": Content to be displayed in the footer, with the default being ",(0,i.jsx)(n.code,{children:"[]"}),". You can also pass 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 to be displayed on the right side of the footer, with the default being ",(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, with the default being white."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"foreground"}),": Text color, with the default being black."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"primary"}),": Theme color, with the default being ",(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 series 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 on the slide. 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 just 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:"This is the default ordinary slide function with a header and footer. The header is set to the current section, and the footer is as per your settings."}),"\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 (default is ",(0,i.jsx)(n.code,{children:"white"}),") and a background color (default is ",(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.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.2.0": *\n\n#let s = themes.simple.register(s, aspect-ratio: "16-9", footer: [Simple slides])\n#let s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slide, slides, title-slide, centered-slide, focus-slide) = utils.methods(s)\n#show: init\n\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.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.2.0": *\n\n#let s = themes.simple.register(s, aspect-ratio: "16-9", footer: [Simple slides])\n#let s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slide, slides, title-slide, centered-slide, focus-slide) = utils.methods(s)\n#show: init\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#slide[\n == First slide\n\n #lorem(20)\n]\n\n#focus-slide[\n _Focus!_\n\n This is very important.\n]\n\n#centered-slide(section: [Let\'s start a new section!])\n\n#slide[\n == Dynamic slide\n Did you know that...\n\n #pause\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:()=>r,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 r(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/6b839bb6.28c5ab65.js b/assets/js/6b839bb6.28c5ab65.js
deleted file mode 100644
index 954a5e596..000000000
--- a/assets/js/6b839bb6.28c5ab65.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4863],{7310:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>c,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>d,toc:()=>r});var t=n(5893),i=n(1151);const o={sidebar_position:4},l="Code Styles",d={id:"style",title:"Code Styles",description:"show-slides Style",source:"@site/docs/style.md",sourceDirName:".",slug:"/style",permalink:"/touying/docs/style",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/style.md",tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Layout Your Contents",permalink:"/touying/docs/layout"},next:{title:"Dynamic Slides",permalink:"/touying/docs/category/dynamic-slides"}},c={},r=[{value:"show-slides Style",id:"show-slides-style",level:2},{value:"slide-block Style",id:"slide-block-style",level:2}];function a(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:"code-styles",children:"Code Styles"}),"\n",(0,t.jsx)(s.h2,{id:"show-slides-style",children:"show-slides Style"}),"\n",(0,t.jsxs)(s.p,{children:["If we only need simplicity, we can use ",(0,t.jsx)(s.code,{children:"#show: slides"})," for a cleaner syntax."]}),"\n",(0,t.jsxs)(s.p,{children:["However, this approach has corresponding drawbacks: firstly, this method may significantly impact document rendering performance. Secondly, subsequent ",(0,t.jsx)(s.code,{children:"#slide(..)"})," cannot be added directly. Instead, you need to manually mark ",(0,t.jsx)(s.code,{children:"#slides-end"}),". The most significant drawback is that complex functionalities cannot be achieved."]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.2.0": *\n\n#let (init, slide, slides) = utils.methods(s)\n#show: init\n\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n\n#slides-end\n\n#slide[\n A new slide.\n]\n'})}),"\n",(0,t.jsx)(s.h2,{id:"slide-block-style",children:"slide-block Style"}),"\n",(0,t.jsx)(s.p,{children:"For better performance and more powerful capabilities, in most cases, we still need to use the code style like:"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-typst",children:"#slide[\n A new slide.\n]\n"})})]})}function u(e={}){const{wrapper:s}={...(0,i.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:()=>l});var t=n(7294);const i={},o=t.createContext(i);function l(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(i):e.components||i:l(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/6b839bb6.95abb783.js b/assets/js/6b839bb6.95abb783.js
new file mode 100644
index 000000000..5d14b48ee
--- /dev/null
+++ b/assets/js/6b839bb6.95abb783.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4863],{7310:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>c,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>d,toc:()=>r});var t=n(5893),i=n(1151);const o={sidebar_position:4},l="Code Styles",d={id:"style",title:"Code Styles",description:"show-slides Style",source:"@site/docs/style.md",sourceDirName:".",slug:"/style",permalink:"/touying/docs/style",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/docs/style.md",tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Layout Your Contents",permalink:"/touying/docs/layout"},next:{title:"Dynamic Slides",permalink:"/touying/docs/category/dynamic-slides"}},c={},r=[{value:"show-slides Style",id:"show-slides-style",level:2},{value:"slide-block Style",id:"slide-block-style",level:2}];function a(e){const s={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:"code-styles",children:"Code Styles"}),"\n",(0,t.jsx)(s.h2,{id:"show-slides-style",children:"show-slides Style"}),"\n",(0,t.jsxs)(s.p,{children:["If we only need simplicity, we can use ",(0,t.jsx)(s.code,{children:"#show: slides"})," for a cleaner syntax."]}),"\n",(0,t.jsxs)(s.p,{children:["However, this approach has corresponding drawbacks: firstly, this method may significantly impact document rendering performance. Secondly, subsequent ",(0,t.jsx)(s.code,{children:"#slide(..)"})," cannot be added directly. Instead, you need to manually mark ",(0,t.jsx)(s.code,{children:"#slides-end"}),". The most significant drawback is that complex functionalities cannot be achieved."]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-typst",children:'#import "@preview/touying:0.2.0": *\n\n#let (init, slide, slides) = utils.methods(s)\n#show: init\n\n#show: slides\n\n= Title\n\n== First Slide\n\nHello, Touying!\n\n#pause\n\nHello, Typst!\n\n#slides-end\n\n#slide[\n A new slide.\n]\n'})}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.img,{src:"https://github.com/touying-typ/touying/assets/34951714/db2a1b60-bc56-4fa9-a317-ee9ecc6f3895",alt:"image"})}),"\n",(0,t.jsxs)(s.p,{children:["And you can create a new page with the empty header ",(0,t.jsx)(s.code,{children:"=="}),"."]}),"\n",(0,t.jsx)(s.h2,{id:"slide-block-style",children:"slide-block Style"}),"\n",(0,t.jsx)(s.p,{children:"For better performance and more powerful capabilities, in most cases, we still need to use the code style like:"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-typst",children:"#slide[\n A new slide.\n]\n"})})]})}function u(e={}){const{wrapper:s}={...(0,i.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:()=>l});var t=n(7294);const i={},o=t.createContext(i);function l(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(i):e.components||i:l(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/80a0c88e.0b40e1f2.js b/assets/js/80a0c88e.0b40e1f2.js
deleted file mode 100644
index beb13d5c5..000000000
--- a/assets/js/80a0c88e.0b40e1f2.js
+++ /dev/null
@@ -1 +0,0 @@
-"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:"This theme is inspired by the Metropolis beamer theme created by Matthias Vogelgesang and transformed by Enivex.",source:"@site/docs/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/docs/themes/metropolis.md",tags:[],version:"current",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 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",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.jsxs)(n.p,{children:["This theme is inspired by the ",(0,s.jsx)(n.a,{href:"https://github.com/matze/mtheme",children:"Metropolis beamer"})," theme created by Matthias Vogelgesang and transformed 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 daily use. For the best results, it is recommended to install the Fira Sans and Fira Math fonts on your computer."}),"\n",(0,s.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,s.jsx)(n.p,{children:"You can initialize the Metropolis theme using the following code:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.2.0": *\n\n#let s = themes.metropolis.register(s, 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",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"register"})," function takes parameters such as:"]}),"\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," with the default being "16-9."']}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"header"}),": Content to be displayed in the header, with the default being ",(0,s.jsx)(n.code,{children:"states.current-section-title"}),". You can also pass 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 to be displayed in the footer, with the default being ",(0,s.jsx)(n.code,{children:"[]"}),". You can also pass 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 to be displayed on the right side of the footer, with the default being ",(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, with the default being ",(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 that you can use with the ",(0,s.jsx)(n.code,{children:"#show strong: alert"})," syntax."]}),"\n",(0,s.jsx)(n.h2,{id:"color-themes",children:"Color Themes"}),"\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 the 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:"Metropolis theme provides a series 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:["The ",(0,s.jsx)(n.code,{children:"title-slide"})," reads information from ",(0,s.jsx)(n.code,{children:"self.info"})," for display. You can also pass 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 margin: (top: 3em, bottom: 1em, left: 0em, right: 0em),\n padding: 2em,\n)[\n ...\n]\n"})}),"\n",(0,s.jsxs)(n.p,{children:["This is the default ordinary slide function with a title and footer according to your settings. The ",(0,s.jsx)(n.code,{children:"title"})," is set to the current section title by default, and the footer is as per your settings."]}),"\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. The background color is ",(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:"Opens 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:"outline-title"}),": Default is ",(0,s.jsx)(n.code,{children:"[Table of contents]"}),"."]}),"\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.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.2.0": *\n\n#let s = themes.metropolis.register(s, 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.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.2.0": *\n\n#let s = themes.metropolis.register(s, 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, title-slide, new-section-slide, focus-slide, touying-outline, alert) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#title-slide(extra: [Extra])\n\n#slide(title: [Table of contents])[\n #touying-outline()\n]\n\n#slide(title: [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 A slide with some maths:\n $ x_(n+1) = (x_n + a/x_n) / 2 $\n\n #lorem(200)\n]\n\n#new-section-slide[First section]\n\n#slide[\n A slide without a title but with *important* infos\n]\n\n#new-section-slide[Second section]\n\n#focus-slide[\n Wake up!\n]\n\n// simple animations\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, new-section-slide) = utils.methods(s)\n\n#new-section-slide[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/80a0c88e.b2547112.js b/assets/js/80a0c88e.b2547112.js
new file mode 100644
index 000000000..97caa7850
--- /dev/null
+++ b/assets/js/80a0c88e.b2547112.js
@@ -0,0 +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/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/themes/simple"},next:{title:"Dewdrop Theme",permalink:"/touying/docs/themes/dewdrop"}},d={},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,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/a1b34b11-6797-42fd-b50f-477a0d672ba2",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["This theme is inspired by the ",(0,s.jsx)(n.a,{href:"https://github.com/matze/mtheme",children:"Metropolis beamer"})," theme created by Matthias Vogelgesang and transformed 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 daily use. For the best results, it is recommended to install the Fira Sans and Fira Math fonts on your computer."}),"\n",(0,s.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,s.jsx)(n.p,{children:"You can initialize the Metropolis theme using the following code:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.2.0": *\n\n#let s = themes.metropolis.register(s, 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",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"register"})," function takes parameters such as:"]}),"\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," with the default being "16-9."']}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"header"}),": Content to be displayed in the header, with the default being ",(0,s.jsx)(n.code,{children:"states.current-section-title"}),". You can also pass 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 to be displayed in the footer, with the default being ",(0,s.jsx)(n.code,{children:"[]"}),". You can also pass 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 to be displayed on the right side of the footer, with the default being ",(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, with the default being ",(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 that you can use with the ",(0,s.jsx)(n.code,{children:"#show strong: alert"})," syntax."]}),"\n",(0,s.jsx)(n.h2,{id:"color-themes",children:"Color Themes"}),"\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 the 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:"Metropolis theme provides a series 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:["The ",(0,s.jsx)(n.code,{children:"title-slide"})," reads information from ",(0,s.jsx)(n.code,{children:"self.info"})," for display. You can also pass 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 margin: (top: 3em, bottom: 1em, left: 0em, right: 0em),\n padding: 2em,\n)[\n ...\n]\n"})}),"\n",(0,s.jsxs)(n.p,{children:["This is the default ordinary slide function with a title and footer according to your settings. The ",(0,s.jsx)(n.code,{children:"title"})," is set to the current section title by default, and the footer is as per your settings."]}),"\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. The background color is ",(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:"Opens 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:"outline-title"}),": Default is ",(0,s.jsx)(n.code,{children:"[Table of contents]"}),"."]}),"\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.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.2.0": *\n\n#let s = themes.metropolis.register(s, 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.2.0": *\n\n#let s = themes.metropolis.register(s, 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, title-slide, new-section-slide, focus-slide, touying-outline, alert) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#title-slide(extra: [Extra])\n\n#slide(title: [Table of contents])[\n #touying-outline()\n]\n\n#slide(title: [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 A slide with some maths:\n $ x_(n+1) = (x_n + a/x_n) / 2 $\n\n #lorem(200)\n]\n\n#new-section-slide[First section]\n\n#slide[\n A slide without a title but with *important* infos\n]\n\n#new-section-slide[Second section]\n\n#focus-slide[\n Wake up!\n]\n\n// simple animations\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, new-section-slide) = utils.methods(s)\n\n#new-section-slide[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/935f2afb.23d8684b.js b/assets/js/935f2afb.fd7ce045.js
similarity index 88%
rename from assets/js/935f2afb.23d8684b.js
rename to assets/js/935f2afb.fd7ce045.js
index 2a9f81018..2327953de 100644
--- a/assets/js/935f2afb.23d8684b.js
+++ b/assets/js/935f2afb.fd7ce045.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[53],{1109:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","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":"Layout Your Contents","href":"/touying/docs/layout","docId":"layout","unlisted":false},{"type":"link","label":"Code Styles","href":"/touying/docs/style","docId":"style","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":"Handout Mode","href":"/touying/docs/dynamic/handout","docId":"dynamic/handout","unlisted":false}],"href":"/touying/docs/category/dynamic-slides"},{"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}],"href":"/touying/docs/category/themes"},{"type":"link","label":"Build 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":"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":"Typst Preview","href":"/touying/docs/external/typst-preview","docId":"external/typst-preview","unlisted":false}],"href":"/touying/docs/category/external-tools"},{"type":"link","label":"Changelog","href":"/touying/docs/changelog","docId":"changelog","unlisted":false}]},"docs":{"build-your-own-theme":{"id":"build-your-own-theme","title":"Build Your Own Theme","description":"You can refer to the source code of themes. The main things to implement are:","sidebar":"tutorialSidebar"},"changelog":{"id":"changelog","title":"Changelog","description":"v0.2.0","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/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/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"},"intro":{"id":"intro","title":"Introduction to Touying","description":"Touying is a slide/presentation package developed for Typst, based on Polylux. Touying is similar to LaTeX Beamer but benefits from Typst, providing faster rendering speed and a more concise syntax. Hereafter, we use \\"slides\\" to refer to slideshows, \\"slide\\" for a single slide, and \\"subslide\\" for a sub-slide.","sidebar":"tutorialSidebar"},"layout":{"id":"layout","title":"Layout Your Contents","description":"To better manage every detail in the slides and achieve better rendering results, like Beamer, Touying has introduced some unique concepts. This helps you maintain global information better and easily switch between different themes.","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"},"start":{"id":"start","title":"Getting Started","description":"Before you begin, make sure you have installed the Typst environment. If not, you can use the Web App or the Typst LSP and Typst Preview plugins for VS Code.","sidebar":"tutorialSidebar"},"style":{"id":"style","title":"Code Styles","description":"show-slides Style","sidebar":"tutorialSidebar"},"themes/dewdrop":{"id":"themes/dewdrop","title":"Dewdrop Theme","description":"This theme is inspired by BeamerTheme created by Zhibo Wang and transformed by OrangeX4.","sidebar":"tutorialSidebar"},"themes/metropolis":{"id":"themes/metropolis","title":"Metropolis Theme","description":"This theme is inspired by the Metropolis beamer theme created by Matthias Vogelgesang and transformed by Enivex.","sidebar":"tutorialSidebar"},"themes/simple":{"id":"themes/simple","title":"Simple Theme","description":"This theme is derived from Polylux, created by Andreas Kr\xf6pelin.","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":null,"badge":false,"noIndex":false,"className":"docs-version-current","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":"Layout Your Contents","href":"/touying/docs/layout","docId":"layout","unlisted":false},{"type":"link","label":"Code Styles","href":"/touying/docs/style","docId":"style","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":"Handout Mode","href":"/touying/docs/dynamic/handout","docId":"dynamic/handout","unlisted":false}],"href":"/touying/docs/category/dynamic-slides"},{"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}],"href":"/touying/docs/category/themes"},{"type":"link","label":"Build 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":"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":"Typst Preview","href":"/touying/docs/external/typst-preview","docId":"external/typst-preview","unlisted":false}],"href":"/touying/docs/category/external-tools"},{"type":"link","label":"Changelog","href":"/touying/docs/changelog","docId":"changelog","unlisted":false}]},"docs":{"build-your-own-theme":{"id":"build-your-own-theme","title":"Build Your Own Theme","description":"You can refer to the source code of themes. The main things to implement are:","sidebar":"tutorialSidebar"},"changelog":{"id":"changelog","title":"Changelog","description":"v0.2.0","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/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/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"},"intro":{"id":"intro","title":"Introduction to Touying","description":"Touying is a slide/presentation package developed for Typst, based on Polylux. Touying is similar to LaTeX Beamer but benefits from Typst, providing faster rendering speed and a more concise syntax. Hereafter, we use \\"slides\\" to refer to slideshows, \\"slide\\" for a single slide, and \\"subslide\\" for a sub-slide.","sidebar":"tutorialSidebar"},"layout":{"id":"layout","title":"Layout Your Contents","description":"To better manage every detail in the slides and achieve better rendering results, like Beamer, Touying has introduced some unique concepts. This helps you maintain global information better and easily switch between different themes.","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"},"start":{"id":"start","title":"Getting Started","description":"Before you begin, make sure you have installed the Typst environment. If not, you can use the Web App or the Typst LSP and Typst Preview plugins for VS Code.","sidebar":"tutorialSidebar"},"style":{"id":"style","title":"Code Styles","description":"show-slides Style","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"},"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/98ce8162.89b1c59e.js b/assets/js/98ce8162.89b1c59e.js
new file mode 100644
index 000000000..5ca450b27
--- /dev/null
+++ b/assets/js/98ce8162.89b1c59e.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1543],{8194:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>l,default:()=>p,frontMatter:()=>o,metadata:()=>r,toc:()=>d});var s=t(5893),i=t(1151);const o={sidebar_position:2},l="Getting Started",r={id:"start",title:"Getting Started",description:"Before you begin, make sure you have installed the Typst environment. If not, you can use the Web App or the Typst LSP and Typst Preview plugins for VS Code.",source:"@site/docs/start.md",sourceDirName:".",slug:"/start",permalink:"/touying/docs/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/intro"},next:{title:"Layout Your Contents",permalink:"/touying/docs/layout"}},a={},d=[{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",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"getting-started",children:"Getting Started"}),"\n",(0,s.jsxs)(n.p,{children:["Before you begin, make sure you have installed the Typst environment. If not, you can use the ",(0,s.jsx)(n.a,{href:"https://typst.app/",children:"Web App"})," or the Typst LSP and Typst Preview plugins for VS Code."]}),"\n",(0,s.jsx)(n.p,{children:"To use Touying, you only need to include the following code in your document:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.2.0": *\n\n#let (init, slide, slides) = utils.methods(s)\n#show: init\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/6f15b500-b825-4db1-88ff-34212f43723e",alt:"image"})}),"\n",(0,s.jsx)(n.p,{children:"It's simple. Congratulations on creating your first Touying slide! \ud83c\udf89"}),"\n",(0,s.jsx)(n.h2,{id:"more-complex-examples",children:"More Complex Examples"}),"\n",(0,s.jsxs)(n.p,{children:["In fact, Touying provides various styles for writing slides. For example, the above example uses first-level and second-level titles to create new slides. However, you can also use the ",(0,s.jsx)(n.code,{children:"#slide[..]"})," format to access more powerful features provided by Touying."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.2.0": *\n\n#let s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slide) = utils.methods(s)\n#show: init\n\n// simple animations\n#slide[\n a simple #pause *dynamic*\n\n #pause\n \n slide.\n\n #meanwhile\n\n meanwhile #pause with pause.\n][\n second #pause pause.\n]\n\n// complex animations\n#slide(setting: body => {\n set text(fill: blue)\n body\n}, 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 test #only("2-")[only] function\n\n #pause\n\n and paused text.\n])\n\n// math equation animations\n#slide[\n == Touying Equation\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// multiple pages for one slide\n#slide[\n == Multiple Pages for One Slide\n\n #lorem(200)\n]\n\n// appendix by freezing last-slide-number\n#let s = (s.methods.appendix)(self: s)\n#let (slide,) = utils.methods(s)\n\n#slide[\n == Appendix\n]\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://github.com/touying-typ/touying/assets/34951714/192b13f9-e3fb-4327-864b-fd9084a8ca24",alt:"image"})}),"\n",(0,s.jsx)(n.p,{children:"In addition, Touying provides many built-in themes to easily create beautiful slides. Basically, you just need to add a line at the top of your document:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{children:'#let s = themes.metropolis.register(s, aspect-ratio: "16-9")\n'})}),"\n",(0,s.jsx)(n.p,{children:"This will allow you to use the Metropolis theme. For more detailed tutorials, you can refer to the following chapters."})]})}function p(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(u,{...e})}):u(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/98ce8162.b2fca771.js b/assets/js/98ce8162.b2fca771.js
deleted file mode 100644
index 8ce40c7e1..000000000
--- a/assets/js/98ce8162.b2fca771.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:()=>a,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>r,toc:()=>d});var s=t(5893),o=t(1151);const i={sidebar_position:2},l="Getting Started",r={id:"start",title:"Getting Started",description:"Before you begin, make sure you have installed the Typst environment. If not, you can use the Web App or the Typst LSP and Typst Preview plugins for VS Code.",source:"@site/docs/start.md",sourceDirName:".",slug:"/start",permalink:"/touying/docs/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/intro"},next:{title:"Layout Your Contents",permalink:"/touying/docs/layout"}},a={},d=[{value:"More Complex Examples",id:"more-complex-examples",level:2}];function u(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"getting-started",children:"Getting Started"}),"\n",(0,s.jsxs)(n.p,{children:["Before you begin, make sure you have installed the Typst environment. If not, you can use the ",(0,s.jsx)(n.a,{href:"https://typst.app/",children:"Web App"})," or the Typst LSP and Typst Preview plugins for VS Code."]}),"\n",(0,s.jsx)(n.p,{children:"To use Touying, you only need to include the following code in your document:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.2.0": *\n\n#let (init, slide, slides) = utils.methods(s)\n#show: init\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:"It's simple. Congratulations on creating your first Touying slide! \ud83c\udf89"}),"\n",(0,s.jsx)(n.h2,{id:"more-complex-examples",children:"More Complex Examples"}),"\n",(0,s.jsxs)(n.p,{children:["In fact, Touying provides various styles for writing slides. For example, the above example uses first-level and second-level titles to create new slides. However, you can also use the ",(0,s.jsx)(n.code,{children:"#slide[..]"})," format to access more powerful features provided by Touying."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.2.0": *\n\n#let s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slide) = utils.methods(s)\n#show: init\n\n// simple animations\n#slide[\n a simple #pause *dynamic*\n\n #pause\n \n slide.\n\n #meanwhile\n\n meanwhile #pause with pause.\n][\n second #pause pause.\n]\n\n// complex animations\n#slide(setting: body => {\n set text(fill: blue)\n body\n}, 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 test #only("2-")[only] function\n\n #pause\n\n and paused text.\n])\n\n// math equation animations\n#slide[\n == Touying Equation\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// multiple pages for one slide\n#slide[\n == Multiple Pages for One Slide\n\n #lorem(200)\n]\n\n// appendix by freezing last-slide-number\n#let s = (s.methods.appendix)(self: s)\n#let (slide,) = utils.methods(s)\n\n#slide[\n == Appendix\n]\n'})}),"\n",(0,s.jsx)(n.p,{children:"In addition, Touying provides many built-in themes to easily create beautiful slides. Basically, you just need to add a line at the top of your document:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{children:'#let s = themes.metropolis.register(s, aspect-ratio: "16-9")\n'})}),"\n",(0,s.jsx)(n.p,{children:"This will allow you to use the Metropolis theme. For more detailed tutorials, you can refer to the following chapters."})]})}function p(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>l});var s=t(7294);const o={},i=s.createContext(o);function l(e){const n=s.useContext(i);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(o):e.components||o:l(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/d16cbc15.8094c876.js b/assets/js/d16cbc15.8094c876.js
deleted file mode 100644
index ca4442276..000000000
--- a/assets/js/d16cbc15.8094c876.js
+++ /dev/null
@@ -1 +0,0 @@
-"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:()=>a});var s=i(5893),t=i(1151);const l={sidebar_position:3},o="Dewdrop Theme",d={id:"themes/dewdrop",title:"Dewdrop Theme",description:"This theme is inspired by BeamerTheme created by Zhibo Wang and transformed by OrangeX4.",source:"@site/docs/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/docs/themes/dewdrop.md",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Metropolis Theme",permalink:"/touying/docs/themes/metropolis"},next:{title:"Build 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:"Special Functions",id:"special-functions",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",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.jsxs)(n.p,{children:["This theme is inspired by ",(0,s.jsx)(n.a,{href:"https://github.com/zbowang/BeamerTheme",children:"BeamerTheme"})," created by Zhibo Wang and transformed 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 elegant and aesthetic navigation, including ",(0,s.jsx)(n.code,{children:"sidebar"})," and ",(0,s.jsx)(n.code,{children:"mini-slides"})," modes."]}),"\n",(0,s.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,s.jsx)(n.p,{children:"You can initialize the Dewdrop theme using the following code:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.2.0": *\n\n#let s = themes.dewdrop.register(\n s,\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 s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slide, slides, title-slide, focus-slide, touying-outline, alert) = utils.methods(s)\n#show: init\n\n#show strong: alert\n'})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"register"})," function takes parameters such as:"]}),"\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," with the default being "16-9."']}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"navigation"}),': Style of the navigation bar, which can be "sidebar," "mini-slides," or ',(0,s.jsx)(n.code,{children:"none"}),', with the default being "sidebar."']}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"sidebar"}),": Settings for the sidebar navigation, with the default being ",(0,s.jsx)(n.code,{children:"(width: 10em)"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"mini-slides"}),": Settings for mini-slides, with the default being ",(0,s.jsx)(n.code,{children:"(height: 2em, x: 2em, section: false, subsection: true)"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer"}),": Content to be displayed in the footer, with the default being ",(0,s.jsx)(n.code,{children:"[]"}),". You can also pass 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 to be displayed on the right side of the footer, with the default being ",(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, with the default being ",(0,s.jsx)(n.code,{children:'rgb("#0c4842")'}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"alpha"}),": Transparency, with the default being ",(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 that you can use with the ",(0,s.jsx)(n.code,{children:"#show strong: alert"})," syntax."]}),"\n",(0,s.jsx)(n.h2,{id:"color-themes",children:"Color Themes"}),"\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 the 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:"Dewdrop theme provides a series 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:["The ",(0,s.jsx)(n.code,{children:"title-slide"})," reads information from ",(0,s.jsx)(n.code,{children:"self.info"})," for display. You can also pass 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:"This is the default ordinary slide function with a navigation bar and footer according to your settings."}),"\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. The background color is ",(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 outline. The ",(0,s.jsx)(n.code,{children:"cover"})," parameter specifies whether to hide sections that are inactive."]}),"\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 for displaying 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 for displaying 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 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:"outline-title"}),": Default is ",(0,s.jsx)(n.code,{children:"[Outline]"}),"."]}),"\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.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.2.0": *\n\n#let s = themes.dewdrop.register(s, 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 s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slide, slides, title-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.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.2.0": *\n\n#let s = themes.dewdrop.register(\n s,\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 s = (s.methods.enable-transparent-cover)(self: s)\n// #let s = (s.methods.appendix-in-outline)(self: s, false)\n#let (init, slide, title-slide, focus-slide, touying-outline, alert) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#title-slide()\n\n#slide[\n == Outline\n \n #touying-outline(cover: false)\n]\n\n#slide(section: [Section A])[\n == Outline\n \n #touying-outline()\n]\n\n#slide(subsection: [Subsection A.1])[\n == Title\n\n A slide with equation:\n\n $ x_(n+1) = (x_n + a/x_n) / 2 $\n]\n\n#slide(subsection: [Subsection A.2])[\n == Important\n\n A slide without a title but with *important* infos\n]\n\n#slide(section: [Section B])[\n == Outline\n \n #touying-outline()\n]\n\n#slide(subsection: [Subsection B.1])[\n == Another Subsection\n\n #lorem(80)\n]\n\n#focus-slide[\n Wake up!\n]\n\n// simple animations\n#slide(subsection: [Subsection B.2])[\n == Dynamic\n\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,) = utils.methods(s)\n\n#slide(section: [Appendix])[\n == Outline\n \n #touying-outline()\n]\n\n#slide[\n appendix\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/d16cbc15.fd212767.js b/assets/js/d16cbc15.fd212767.js
new file mode 100644
index 000000000..2a5c08c5a
--- /dev/null
+++ b/assets/js/d16cbc15.fd212767.js
@@ -0,0 +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:()=>a});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/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/themes/metropolis"},next:{title:"Build 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:"Special Functions",id:"special-functions",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:"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/23a8a9be-1f7c-43f7-88d4-40604dd6b01b",alt:"image"})}),"\n",(0,s.jsxs)(n.p,{children:["This theme is inspired by ",(0,s.jsx)(n.a,{href:"https://github.com/zbowang/BeamerTheme",children:"BeamerTheme"})," created by Zhibo Wang and transformed 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 elegant and aesthetic navigation, including ",(0,s.jsx)(n.code,{children:"sidebar"})," and ",(0,s.jsx)(n.code,{children:"mini-slides"})," modes."]}),"\n",(0,s.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,s.jsx)(n.p,{children:"You can initialize the Dewdrop theme using the following code:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.2.0": *\n\n#let s = themes.dewdrop.register(\n s,\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 s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slide, slides, title-slide, focus-slide, touying-outline, alert) = utils.methods(s)\n#show: init\n\n#show strong: alert\n'})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"register"})," function takes parameters such as:"]}),"\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," with the default being "16-9."']}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"navigation"}),': Style of the navigation bar, which can be "sidebar," "mini-slides," or ',(0,s.jsx)(n.code,{children:"none"}),', with the default being "sidebar."']}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"sidebar"}),": Settings for the sidebar navigation, with the default being ",(0,s.jsx)(n.code,{children:"(width: 10em)"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"mini-slides"}),": Settings for mini-slides, with the default being ",(0,s.jsx)(n.code,{children:"(height: 2em, x: 2em, section: false, subsection: true)"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"footer"}),": Content to be displayed in the footer, with the default being ",(0,s.jsx)(n.code,{children:"[]"}),". You can also pass 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 to be displayed on the right side of the footer, with the default being ",(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, with the default being ",(0,s.jsx)(n.code,{children:'rgb("#0c4842")'}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"alpha"}),": Transparency, with the default being ",(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 that you can use with the ",(0,s.jsx)(n.code,{children:"#show strong: alert"})," syntax."]}),"\n",(0,s.jsx)(n.h2,{id:"color-themes",children:"Color Themes"}),"\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 the 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:"Dewdrop theme provides a series 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:["The ",(0,s.jsx)(n.code,{children:"title-slide"})," reads information from ",(0,s.jsx)(n.code,{children:"self.info"})," for display. You can also pass 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:"This is the default ordinary slide function with a navigation bar and footer according to your settings."}),"\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. The background color is ",(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 outline. The ",(0,s.jsx)(n.code,{children:"cover"})," parameter specifies whether to hide sections that are inactive."]}),"\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 for displaying 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 for displaying 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 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:"outline-title"}),": Default is ",(0,s.jsx)(n.code,{children:"[Outline]"}),"."]}),"\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.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.2.0": *\n\n#let s = themes.dewdrop.register(s, 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 s = (s.methods.enable-transparent-cover)(self: s)\n#let (init, slide, slides, title-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/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.2.0": *\n\n#let s = themes.dewdrop.register(\n s,\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 s = (s.methods.enable-transparent-cover)(self: s)\n// #let s = (s.methods.appendix-in-outline)(self: s, false)\n#let (init, slide, title-slide, focus-slide, touying-outline, alert) = utils.methods(s)\n#show: init\n\n#show strong: alert\n\n#title-slide()\n\n#slide[\n == Outline\n \n #touying-outline(cover: false)\n]\n\n#slide(section: [Section A])[\n == Outline\n \n #touying-outline()\n]\n\n#slide(subsection: [Subsection A.1])[\n == Title\n\n A slide with equation:\n\n $ x_(n+1) = (x_n + a/x_n) / 2 $\n]\n\n#slide(subsection: [Subsection A.2])[\n == Important\n\n A slide without a title but with *important* infos\n]\n\n#slide(section: [Section B])[\n == Outline\n \n #touying-outline()\n]\n\n#slide(subsection: [Subsection B.1])[\n == Another Subsection\n\n #lorem(80)\n]\n\n#focus-slide[\n Wake up!\n]\n\n// simple animations\n#slide(subsection: [Subsection B.2])[\n == Dynamic\n\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,) = utils.methods(s)\n\n#slide(section: [Appendix])[\n == Outline\n \n #touying-outline()\n]\n\n#slide[\n appendix\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/runtime~main.63ef563a.js b/assets/js/runtime~main.a5613f9e.js
similarity index 59%
rename from assets/js/runtime~main.63ef563a.js
rename to assets/js/runtime~main.a5613f9e.js
index 6a967305d..60d6935aa 100644
--- a/assets/js/runtime~main.63ef563a.js
+++ b/assets/js/runtime~main.a5613f9e.js
@@ -1 +1 @@
-(()=>{"use strict";var e,a,t,c,r,f={},b={};function d(e){var a=b[e];if(void 0!==a)return a.exports;var t=b[e]={id:e,loaded:!1,exports:{}};return f[e].call(t.exports,t,t.exports,d),t.loaded=!0,t.exports}d.m=f,d.c=b,e=[],d.O=(a,t,c,r)=>{if(!t){var f=1/0;for(i=0;iOne 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.
This theme is derived from Polylux, created by Andreas Kröpelin.
This theme is inspired by the Metropolis beamer theme created by Matthias Vogelgesang and transformed by Enivex.
This theme is inspired by BeamerTheme created by Zhibo Wang and transformed by OrangeX4.
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.
image
image
image