Updates for Mint 0.20.0

.github/workflows/ci.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Install Mint
         uses: fabasoad/setup-mint-action@main
         with:
-          version: 0.19.0
+          version: 0.20.0
 
       - name: Install dependencies
         run: mint install

.tool-versions

@@ -1 +1 @@
-mint 0.19.0
+mint 0.20.0

README.md

@@ -1,7 +1,6 @@
 # Mint UI Website
 
 [![CI](https://github.com/mint-lang/mint-ui-website/actions/workflows/ci.yml/badge.svg)](https://github.com/mint-lang/mint-ui-website/actions/workflows/ci.yml)
-[![Gitter chat](https://badges.gitter.im/gitterHQ/gitter.svg)](https://gitter.im/mint-lang/Lobby)
 [![Discord](https://img.shields.io/discord/698214718241767445)](https://discord.gg/NXFUJs2)
 
 This repository contains the source code for the Mint UI website.

assets/head.html

@@ -0,0 +1,2 @@
+<script type="text/javascript" src="/javascripts/hljs.js"></script>
+<script type="text/javascript" src="/javascripts/hljs-mint.js"></script>

mint.json

@@ -4,6 +4,7 @@
   "application": {
     "name": "Mint UI",
     "title": "Mint UI - Beautiful, Reliable Components for Mint",
+    "head": "assets/head.html",
     "theme-color": "#FFF",
     "display": "standalone",
     "orientation": "portrait",
@@ -15,18 +16,13 @@
     }
   },
   "source-directories": [
+    "../mint-ui/source",
     "source"
   ],
-  "external": {
-    "javascripts": [
-      "assets/javascripts/hljs.js",
-      "assets/javascripts/hljs-mint.js"
-    ]
-  },
   "dependencies": {
-    "mint-ui": {
-      "repository": "https://github.com/mint-lang/mint-ui",
-      "constraint": "8.0.0 <= v < 9.0.0"
+    "mint-color": {
+      "repository": "https://github.com/mint-lang/mint-color",
+      "constraint": "0.9.0 <= v < 1.0.0"
     }
   }
 }

source/Components/DemoArea.mint

@@ -18,8 +18,6 @@ component DemoArea {
   }
 
   fun render : Html {
-    <div::base>
-      <{ children }>
-    </div>
+    <div::base>children</div>
   }
 }

source/Components/DocBox.mint

@@ -30,8 +30,7 @@ component DocBox {
         transform: rotate(-45deg) translateY(5px);
       }
 
-      &:hover,
-      &:focus {
+      &:hover, &:focus {
         opacity: 1;
       }
     }
@@ -40,35 +39,27 @@ component DocBox {
   fun render {
     <div>
       if String.isNotBlank(title) {
-        <a::anchor
-          name={String.parameterize(title)}
-          aria-hidden="true">
-
-          <{ title }>
-
-        </a>
+        <a::anchor name={String.parameterize(title)} aria-hidden="true">title</a>
       }
 
       <div::base>
         <Ui.Box
           title={
             <div::title>
-              <{ title }>
+              title
 
               <span title="Permalink to #{title}">
                 <Ui.Icon
                   href="##{String.parameterize(title)}"
-                  icon={Ui.Icons:LINK}/>
+                  icon={Ui.Icons.LINK}
+                />
               </span>
             </div>
-          }>
-
-          <{ content }>
-
-        </Ui.Box>
+          }
+        >content</Ui.Box>
 
-        <{ hint }>
-        <{ example }>
+        hint
+        example
       </div>
     </div>
   }

source/Components/Example.mint

@@ -1,6 +1,5 @@
 component Example {
-  property size : Ui.Size = Ui.Size::Inherit
-  property highlight : Array(Number) = []
+  property size : Ui.Size = Ui.Size.Inherit
   property horizontalSpacing : Number = 0
   property verticalSpacing : Number = 0
   property breakpoint : Number = 650
@@ -43,17 +42,11 @@ component Example {
 
   fun render {
     let highlightFunction =
-      (code : String) {
-        <Hljs
-          highlight={highlight}
-          code={code}/>
-      }
+      (code : String) { <Hljs code={code}/> }
 
     let warning =
       if controlled {
-        <div::warning>
-          <Ui.Icon icon={Ui.Icons:ALERT}/>
-        </div>
+        <div::warning><Ui.Icon icon={Ui.Icons.ALERT}/></div>
       } else {
         <></>
       }
@@ -67,6 +60,7 @@ component Example {
       controls={controls}
       warning={warning}
       data={data}
-      size={size}/>
+      size={size}
+    />
   }
 }

source/Components/Footer.mint

@@ -13,51 +13,44 @@ component Footer {
         {
           "Site",
           [
-            NavItems:HOME,
-            NavItems:INSTALL,
-            NavItems:COMPONENTS,
-            NavItems:DOCUMENTATION,
-            NavItems:PRICING,
-            NavItems:EXAMPLES
+            NavItems.HOME,
+            NavItems.INSTALL,
+            NavItems.COMPONENTS,
+            NavItems.DOCUMENTATION,
+            NavItems.PRICING,
+            NavItems.EXAMPLES
           ]
         },
         {
           "Community",
           [
-            NavItems:GITTER,
-            NavItems:DISCORD,
-            NavItems:TELEGRAM,
-            NavItems:TWITTER
+            NavItems.GITTER,
+            NavItems.DISCORD,
+            NavItems.TELEGRAM,
+            NavItems.TWITTER
           ]
         },
         {
           "Source",
-          [
-            NavItems:SOURCE,
-            NavItems:WEBSITE_SOURCE,
-            NavItems:RELEASES
-          ]
+          [NavItems.SOURCE, NavItems.WEBSITE_SOURCE, NavItems.RELEASES]
         }
       ]
 
     let infos =
       <div::infos>
-        <Logo size={Ui.Size::Em(2)}/>
+        <Logo size={Ui.Size.Em(2)}/>
 
         <p>
-          "Mint UI is a design system and component library for bui" \
-          "lding websites, web and desktop applications."
+          "Mint UI is a design system and component library for building " \
+          "websites, web and desktop applications."
         </p>
 
         <div::copyright>
-          "Copyright © #{Time.year(Time.now())} Szikszai Gusztáv. A" \
-          "ll rights reserved."
+          "Copyright © 2018-#{Time.year(Time.now())} Szikszai Gusztáv. All " \
+          "rights reserved."
         </div>
       </div>
 
-    <Ui.Footer
-      categoryWhiteSpace="nowrap"
-      navitems={navitems}
-      infos={infos}/>
+    <Ui.Footer categoryWhiteSpace="nowrap" navitems={navitems} infos={infos}/>
   }
 }

source/Components/Header.mint

@@ -12,39 +12,36 @@ component Header {
 
       let iconBefore =
         if darkMode {
-          Ui.Icons:SUN
+          Ui.Icons.SUN
         } else {
-          Ui.Icons:MOON
+          Ui.Icons.MOON
         }
 
-      Ui.NavItem::Item(
+      Ui.NavItem.Item(
         action: (event : Html.Event) { toggleDarkMode() },
         iconBefore: iconBefore,
         iconAfter: <></>,
         label: label)
     } else {
-      Ui.NavItem::Html(<Ui.DarkModeToggle/>)
+      Ui.NavItem.Html(<Ui.DarkModeToggle/>)
     }
   }
 
   fun render : Html {
     <Ui.Header
-      gap={Ui.Size::Em(1.5)}
+      brand={<Logo size={Ui.Size.Em(1.25)} href="/"/>}
+      gap={Ui.Size.Em(1.5)}
       items=[
-        NavItems:INSTALL,
-        NavItems:PRICING,
-        NavItems:COMPONENTS,
-        NavItems:DOCUMENTATION,
-        NavItems:EXAMPLES,
-        Ui.NavItem::Divider,
-        NavItems:GITHUB,
-        Ui.NavItem::Divider,
+        NavItems.INSTALL,
+        NavItems.PRICING,
+        NavItems.COMPONENTS,
+        NavItems.DOCUMENTATION,
+        NavItems.EXAMPLES,
+        Ui.NavItem.Divider,
+        NavItems.GITHUB,
+        Ui.NavItem.Divider,
         darkModeToggle
       ]
-      brand={
-        <Logo
-          size={Ui.Size::Em(1.25)}
-          href="/"/>
-      }/>
+    />
   }
 }