TypeRoof/shell.html at main · FontBureau/TypeRoof · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Shell - TypeRoof</title>
        <meta name="viewport" content="initial-scale=1,shrink-to-fit=no">
        <script src="./lib/js/main-shell.mjs" async type="module"></script>
        <link rel="stylesheet" href="./lib/css/shell/main.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=add,arrow_forward,chevron_right,delete,drag_pan,format_align_center,format_align_left,format_align_right,info,keyboard_arrow_down,keyboard_arrow_up,keyboard_double_arrow_left,keyboard_double_arrow_right,menu,pause,place_item,play_arrow,refresh,remove,swap_vert" />
<script>
    // With this pattern it's save to load the controller javascript asyncronously.
    if(!window.remoteResources)
         window.remoteResources = [];
    {
    // it's either 'shell.html' or 'shell' what we remove here.
    const baseParts = window.location.pathname.split('/')
            // remove "shell" i.e. this file
            .slice(0, -1)
            // remove empty parts
            .filter(part=>part.length > 0)
            ;
    baseParts.push('lib', 'assets', 'fonts');
    const base = window.location.origin + '/' + baseParts.join('/') + '/'
      , localURL = file=>new URL(`./${file}`, base)
      ;
    window.remoteResources.push(
        ['font', localURL('RobotoFlex[GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght].woff2')
            , {name: "Roboto Flex Regular", version: "Version 3.200;gftools[0.9.32]", fullName: "from-url Roboto Flex Regular Version_3-200 gftools_0-9-32_"}],
        ['font', localURL('RobotoDelta-Roman-VF.woff2')
            , {name: "Roboto Delta Roman", version: "Version 3.000", fullName: "from-url Roboto Delta Regular Version_3-000"}],
        ['font', localURL('RobotoDelta-Italic-VF.woff2')
            , {name: "Roboto Delta Italic", version: "Version 3.000", fullName: "from-url Roboto Delta Italic Version_3-000"}],
        ['font', localURL('AmstelvarA2-Roman_avar2.woff2')
            , {name: "AmstelvarA2 Roman wght400", version: "Version 0.001", fullName: "from-url AmstelvarA2 Roman wght400 Version_0-001"}],
        ['font', localURL('AmstelvarA2-Italic_avar2.woff2')
            , {name: "AmstelvarA2 Italic wght400", version: "Version 0.001", fullName: "from-url AmstelvarA2 Italic wght400 Version_0-001"}],
        ['font', localURL('Roboto-Italic[wdth,wght].woff2')
            , {name: "Roboto Italic", version: "Version 3.009; 2024", fullName: "from-url Roboto Italic Version_3-009 _2024"}],
        ['font', localURL('Roboto[wdth,wght].woff2')
            ,  {name: "Roboto Regular", version: "Version 3.009; 2024", fullName: "from-url Roboto Regular Version_3-009 _2024"}],
        // So far only bundled for the initial demo
        ['font', localURL('Kablammo[MORF].woff2')
            , {name: "Kablammo Regular", version: "Version 1.002", fullName: "from-url Kablammo Regular Version_1-002"}],
        // In this case, this should result in a drop-in replacement for
        //           ['font', fetch('Zycon.woff2')],
        // However, since the key and name are not taken from the font
        // file, it seems a bit brittle. The key, at least could be derrived
        // directly from the URL, it could be the URL in fact.
        ['font', localURL('Zycon.woff2')
            , {name: 'Zycon', version: 'Version 1.8', fullName: 'from-url Zycon Version_1-8'}]
    );
    }
</script>
    </head>
    <body>
        <div class="wrapper">
            <div class="typeroof-ui_sidebar">
                <aside class="typeroof-ui typeroof-ui_main"></aside>
                <aside class="typeroof-ui typeroof-ui_main-after"></aside>
            </div>
            <div class="typeroof-main">
                <div class='typeroof-layout-before'></div>
                <div class='typeroof-layout'></div>
                <div class='typeroof-layout-after'></div>
            </div>
        </div> <!-- wrapper -->
    </body>
</html>