index.html and App Root

index.html and the App Root Element

src/index.html is a shell. Its <head> has a viewport with viewport-fit=cover for notched screens (Safe Areas on Notched Devices), the PWA manifest link and a permissive Content-Security-Policy to tighten before release. The body is just <div id="app"></div> and a module script for ./js/app.js. The layout lives in the root component src/app.f7, which BookNest cuts down to one view:

src/app.f7, the BookNest root componentHTMLLive

<template>
  <div id="app">
    <!-- One main view; Section 2.5 turns it into a tab bar -->
    <div class="view view-main view-init safe-areas" data-url="/"></div>
  </div>
</template>
<script>
  export default () => {
    return $render;
  };
</script>

view-main marks the router's default view, view-init creates it, safe-areas keeps it clear of notches, and data-url="/" loads / at startup. Every .f7 file needs return $render, which the compiler replaces with the <template>.

MENU

index.html and App Root