Template Lang

lang.md

const settings = {
  primaryColor: "#red",
  font: "UI Big",
};

const content = {
  hero: {
    title: "Expert homeschooling service",
    desc: "Keep your kids learning at home with online or in-person lessons taught by exceptional teachers",
    ctaButton: "Get a home tutor",
  },
};

// Virtual File
// hero.svelte // nav.svelte // index.svelte (page)
const ui = {
  hero: `
   <script>
     const img = ""
   </script>

   <div className="container">
     <h1>{hero.title}</h1>
     <p>{hero.desc}</p>
     <cta-link size="lg">
       {ctaButton}
     </cta-link>
   </div>

   <style>
     .container { 
        height: 50vh;
        color: {settings.primaryColor}
     }
   </style>
  `,
  hero: {
    data: {},
    html: `
  <div className="container">
     <h1>{hero.title}</h1>
     <p>{hero.desc}</p>
     <cta-link size="lg">
       {obj.name}
     </cta-link>
   </div>
   `,
    css: `
    .container { 
        height: 50vh;
        color: {settings.primaryColor}
     }
   `,
    script: `
    const hero = {}
    const settings = {}
   `,
  },
};

const html = svelte.compile(ui.hero(content.hero));