Merge pull request #63 from arturo-lang/more-website-enhancements

More website enhancements
arturo-lang · Apr 19, 2024 · fa46362 · fa46362
2 parents 5b02aff + 61a42e5
commit fa46362
Show file tree

Hide file tree

Showing 10 changed files with 213 additions and 87 deletions.
diff --git a/tools/generateweb.art b/tools/generateweb.art
@@ -88,7 +88,7 @@ getLink: function [loc, subv][
         unless null? subv ->
             rett: rett ++ "/" ++ to :string subv
     ][
-        rett: siteroot ++ "/" ++ loc
+        rett: siteroot ++ "/_packages/" ++ loc
         unless null? subv ->
             rett: rett ++ "/" ++ to :string subv
         rett: rett ++ "/index.html"
@@ -158,7 +158,12 @@ createSpecFile: function [package, versionToProcess, targetFolder][
 
 searchable: new []
 
-write.directory "public/thumbs" ø
+; create thumbs folder if necessary
+
+thumbsFolder: "public/thumbs"
+unless directory? thumbsFolder [
+    write.directory "public/thumbs" ø
+]
 
 loop packages [k,v][
     print ~"- Processing main package: |k|"
@@ -192,9 +197,14 @@ processPackagePage: function [entry][
 
 searchable: write.compact.json ø searchable
 
+pkgFolder: "public/_packages"
+unless directory? pkgFolder [
+    write.directory pkgFolder ø
+]
+
 loop entries 'entry [
     print ~"- Creating subpages: |entry\name|"
-    tgtName: ~{public/|entry\name|}
+    tgtName: ~{|pkgFolder|/|entry\name|}
     unless directory? tgtName [
         write.directory tgtName ø
     ]
@@ -207,7 +217,7 @@ loop entries 'entry [
     createSpecFile entry currentVersion tgtName
 
     loop entry\version 'vv [
-        versionTgt: ~{public/|entry\name|/|vv\version|}
+        versionTgt: ~{|tgtName|/|vv\version|}
         unless directory? versionTgt [
             write.directory versionTgt ø
         ]
@@ -233,32 +243,48 @@ if odd? size entries ->
 
 ; render homepage
 isHome: true
+isSearch: false
 packageTitle: ""
 write "public/index.html"
       render.template read "website/index.html"
 
 ; and compress it
 compressHTML "public/index.html"
 
+; render search page
+isHome: false
+isSearch: true
+write.directory "public/search" ø
+write "public/search/index.html"
+      render.template read "website/search.html"
+
+; and compress it too
+compressHTML "public/search/index.html"
+
+; create assets folder if necessary
+assetsFolder: "public/assets"
+unless directory? assetsFolder [
+    write.directory assetsFolder ø
+]
+
 ; compile scss
-execute "sass website/style.scss public/style.css"
+execute ~"sass website/style.scss |assetsFolder|/style.css"
 
 ; and compress it too
-compressCSS "public/style.css"
+compressCSS ~"|assetsFolder|/style.css"
 
 ; copy resources
 loop list "website/images" 'file [
-    copy file replace file "website/" "public/"
+    if contains? [".jpg", ".png"] extract.extension file [
+        copy file assetsFolder ++ "/" ++ extract.basename file
+    ]
 ]
 
 ; copy main javascript
-copy "website/script.js" "public/script.js"
+copy "website/script.js" ~"|assetsFolder|/script.js"
 
 ; copy server scripts
 copy "website/download.php" "public/download.php"
 copy "website/getdownloads.php" "public/getdownloads.php"
 
-; copy searchable items
-copy "website/searchable.json" "public/searchable.json"
-
 print color #green "Done!"
diff --git a/website/components/footer.html b/website/components/footer.html
@@ -20,7 +20,7 @@
         <script src="https://cdn.jsdelivr.net/npm/fuse.js@7.0.0"></script>
         <script src="https://cdn.jsdelivr.net/npm/protip@1.4.21/protip.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/javascript-time-ago@2.5.9/bundle/javascript-time-ago.js"></script> -->
-        <script src="<||= siteroot ||>/script.js"></script>
+        <script src="<||= siteroot ||>/assets/script.js"></script>
         <script>
             $(document).ready(function(){
                 $(".star-count").each(function (idx){
@@ -51,11 +51,12 @@
                     $('#search-bar').autocomplete({
                         formatResult: function (suggestion, currentValue){
                             return `
-                                <div class="columns" style="border-bottom:1px solid #DDD;">
-                                    <div class="column is-8">
+                                <div class="columns is-mobile suggestion-wrapper">
+                                    <div class="column is-9-tablet is-12-mobile">
                                         <b>${suggestion.value}</b>
+                                        <p><small>${suggestion.description}</small></p>
                                     </div>
-                                    <div class="column is-4">
+                                    <div class="column is-3-tablet is-hidden-mobile">
                                         <div class="is-pulled-right has-text-grey">
                                             ${suggestion.version}
                                         </div>

diff --git a/website/components/header.html b/website/components/header.html
@@ -5,12 +5,17 @@
         <!-- Meta -->
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1.0, user-scalable=no">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
         <title><||= capitalize packageTitle ||>Arturo Packager</title>
         <meta name="description" content="<||= (packageTitle = "") ? -> "Package manager for the Arturo programming language" -> ~"Get |capitalize packageTitle|Package for the Arturo programming language" ||>">
 
         <!-- Open Graph / Facebook -->
         <meta property="og:type" content="website">
+        <|| (packageTitle = "")?[ ||>
+            <meta property="og:url" content="https://pkgr.art" />
+        <|| ][ ||>
+            <meta property="og:url" content="https://pkgr.art" />
+        <|| ] ||>
         <meta property="og:title" content="<||= capitalize packageTitle ||>Arturo Packager">
         <meta property="og:description" content="<||= (packageTitle = "") ? -> "Package manager for the Arturo programming language" -> ~"Get |capitalize packageTitle|Package for the Arturo programming language" ||>">
 
@@ -63,6 +68,6 @@
             crossorigin="anonymous"></script>
 
         <!-- Our main style -->
-        <link rel="stylesheet" type="text/css" href="<||= siteroot ||>/style.css">
+        <link rel="stylesheet" type="text/css" href="<||= siteroot ||>/assets/style.css">
     </head>
     <body>
diff --git a/website/components/search.html → website/components/hero.html b/website/components/search.html → website/components/hero.html
@@ -4,7 +4,7 @@
             <div class="column is-4 is-offset-4 main-header">
                 <|| if isHome [||>
                     <figure class="logo">
-                        <img src="<||= siteroot ||>/images/logo.png" alt="Arturo package manager">
+                        <img src="<||= siteroot ||>/assets/logo.png" alt="Arturo package manager">
                     </figure>
                 <|| ] ||>
                 <h1 class="title has-text-black main-title">

diff --git a/website/components/package-box.html b/website/components/package-box.html
@@ -1,61 +1,54 @@
-<div class="box package-box">
+<div class="box package-box<|| if isSearch [||> is-plain<||]||>">
     <div class="package-header">
-        <div class="columns is-mobile">
-            <div class="column is-6">
-                <div class="title-wrapper">
-                    <h3 class="is-size-5">
-                        <a href="<||= getLink entry\name ø ||>" class="repo-name">
-                            <b><||= entry\name ||></b>
-                        </a>&nbsp;
-                    </h3>
-                    <a href="<||= entry\info\url ||>">
-                        <span class="icon repo-icon">
-                            <i class="fa fa-github"></i>
-                        </span>
-                    </a>
-                </div>
-            </div>
-            <div class="column is-6">
-                <div class="is-size-6 is-pulled-right stats-wrapper">
-                    <div class="download-info">
-                        <span class="icon download-icon">
-                            <i class="fas fa-download"></i>
-                        </span>&nbsp;
-                        <span id="<||= entry\name ||>-downloads" lass="download-count">-</span>
-                    </div>&nbsp;&nbsp;
-                    <div class="star-info">
-                        <span class="icon star-icon">
-                            <i class="fa fa-star"></i>
-                        </span>&nbsp;
-                        <span class="star-count" data-package="<||= replace entry\info\url "https://github.com/" "" ||>"></span>
-                    </div>
-                </div>
+        <div class="title-wrapper">
+            <h3 class="is-size-5">
+                <a href="<||= getLink entry\name ø ||>" class="repo-name">
+                    <b><||= entry\name ||></b>
+                </a>&nbsp;
+            </h3>
+            <a href="<||= entry\info\url ||>">
+                <span class="icon repo-icon">
+                    <i class="fa fa-github"></i>
+                </span>
+            </a>
+        </div>
+        <div class="is-size-6 is-pulled-right stats-wrapper<|| unless isSearch [||> is-hidden-tablet-only<|| ] ||>">
+            <div class="download-info">
+                <span class="icon download-icon">
+                    <i class="fas fa-download"></i>
+                </span>&nbsp;
+                <span id="<||= entry\name ||>-downloads" lass="download-count">-</span>
+            </div>&nbsp;&nbsp;
+            <div class="star-info">
+                <span class="icon star-icon">
+                    <i class="fa fa-star"></i>
+                </span>&nbsp;
+                <span class="star-count" data-package="<||= replace entry\info\url "https://github.com/" "" ||>"><||= entry\info\stats\stars ||></span>
             </div>
         </div>
     </div>
     <div class="package-body">
         <p><||= entry\info\description ||></p>
     </div>
     <div class="package-footer">
-        <hr>
-        <div class="columns is-mobile">
-            <div class="column is-6 repo-user">
+        <!-- <div class="columns is-mobile">
+            <div class="column is-6 is-12-tablet is-6-desktop repo-user"> -->
                 <div class="is-pulled-left">
                     <span class="icon repo-user-icon">
                         <i class="fa fa-user"></i>
                     </span>&nbsp;
                     <a href="<||= entry\info\author\url ||>" class="repo-user-name"><||= entry\info\author\name ||></a>
                 </div>
-            </div>
-            <div class="column is-6 repo-license">
+            <!--</div>
+            <div class="column is-6 is-hidden-tablet-only repo-license">-->
                 <div class="is-pulled-right">
                     <span class="icon repo-license-icon">
                         <i class="fa fa-balance-scale"></i>
                     </span>&nbsp;
                     <a href="<||= entry\info\license\url ||>" class="repo-license-name"><||= entry\info\license\name ||></a>
                 </div>
-            </div>
-        </div>
+            <!--</div>
+        </div>-->
     </div>
 </div>
 

diff --git a/website/index.html b/website/index.html
@@ -1,17 +1,17 @@
 <||= read "website/components/header.html" ||>
 
-<||= read "website/components/search.html" ||>
+<||= read "website/components/hero.html" ||>
 <section class="main-section">
     <div class="container package-listing">
         <div class="columns">
             <div class="column is-12 has-text-centered">
-                <h2 class="title package-listing-header">Latest additions</h2>
+                <h2 class="title package-listing-header">Recently updated</h2>
             </div>
         </div>
         <div class="columns" style="margin-top:0.5rem">
             <div class="column is-8-tablet is-offset-2-tablet is-10-mobile is-offset-1-mobile">
                 <!-- <p class="subtitle has-text-black">Latest packages</p> -->
-                <|| loop entries [entryLeft, entryRight][||>
+                <|| loop first.n: 6 entries [entryLeft, entryRight][||>
                     <div class="columns is-tablet">
                         <div class="column is-6">
                             <||= getPackageBox entryLeft ||>
@@ -29,6 +29,7 @@ <h2 class="title package-listing-header">Latest additions</h2>
     <div class="container has-text-centered">
         <div class="columns">
             <div class="column is-12" style="padding:4rem; font-size: 1.2rem">
+                <a href="<||= siteroot ||>/search" class="button is-medium show-all-button">Show all packages</a>
                 <p class="has-text-grey">
                     <a class="simple-link" href="https://github.com/arturo-lang/pkgr.art?tab=readme-ov-file#using-packages" target="_blank">How do I use a package?</a>&nbsp;·&nbsp;
                     <a class="simple-link" href="https://github.com/arturo-lang/pkgr.art?tab=readme-ov-file#creating-packages" target="_blank">How do I create a new package?</a>

diff --git a/website/package.html b/website/package.html
@@ -1,6 +1,6 @@
 <||= read "website/components/header.html" ||>
 
-<||= read "website/components/search.html" ||>
+<||= read "website/components/hero.html" ||>
 <section class="main-section">
     <div class="container">
         <div class="columns is-mobile">
@@ -74,7 +74,7 @@ <h3 class="is-size-5"><||= entry\info\description ||></h3>
                                                             <span class="has-text-grey"><||= ver\date\day ||>&nbsp;<||= ver\date\Month ||>&nbsp;<||= ver\date\year ||></span>
                                                         </td>
                                                         <td>
-                                                            <span class="has-text-grey repo-size-field"><||= ver\details\size ||></span><small>&nbsp;(<span class="has-text-grey"><||= ver\details\files ||> files</span>)</small>
+                                                            <span class="has-text-grey repo-size-field"><||= ver\details\size ||></span><small>&nbsp;/&nbsp;<span class="has-text-grey"><||= ver\details\files ||> files</span></small>
                                                         </td>
                                                     </tr>
                                                 <|| ][ ||>
@@ -86,7 +86,7 @@ <h3 class="is-size-5"><||= entry\info\description ||></h3>
                                                             <span class="has-text-grey"><||= ver\date\day ||>&nbsp;<||= ver\date\Month ||>&nbsp;<||= ver\date\year ||></span>
                                                         </td>
                                                         <td>
-                                                            <span class="has-text-grey repo-size-field"><||= ver\details\size ||></span><small>&nbsp;(<span class="has-text-grey"><||= ver\details\files ||> files</span>)</small>
+                                                            <span class="has-text-grey repo-size-field"><||= ver\details\size ||></span><small>&nbsp;/&nbsp;<span class="has-text-grey"><||= ver\details\files ||> files</span></small>
                                                         </td>
                                                     </tr>
                                                 <|| ] ||>

diff --git a/website/search.html b/website/search.html
@@ -0,0 +1,35 @@
+<||= read "website/components/header.html" ||>
+
+<||= read "website/components/hero.html" ||>
+<section class="main-section">
+    <div class="container package-listing">
+        <div class="columns">
+            <div class="column is-12 has-text-centered">
+                <h2 class="title package-listing-header"><||= enumerate entries => [not? null? &]||> packages found</h2>
+            </div>
+        </div>
+        <div class="columns" style="margin-top:0.5rem">
+            <div class="column is-8-tablet is-offset-2-tablet is-10-mobile is-offset-1-mobile">
+                <!-- <p class="subtitle has-text-black">Latest packages</p> -->
+                <|| loop entries [entryLeft, entryRight][||>
+                    <||= getPackageBox entryLeft ||>
+                    <|| unless null? entryRight [||>
+                        <||= getPackageBox entryRight ||>
+                    <|| ] ||>
+                <|| ] ||>
+            </div>
+        </div>
+    </div>
+    <div class="container has-text-centered">
+        <div class="columns">
+            <div class="column is-12" style="padding:4rem; font-size: 1.2rem">
+                <p class="has-text-grey">
+                    <a class="simple-link" href="https://github.com/arturo-lang/pkgr.art?tab=readme-ov-file#using-packages" target="_blank">How do I use a package?</a>&nbsp;·&nbsp;
+                    <a class="simple-link" href="https://github.com/arturo-lang/pkgr.art?tab=readme-ov-file#creating-packages" target="_blank">How do I create a new package?</a>
+                </p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<||= read "website/components/footer.html" ||>
diff --git a/website/searchable.json b/website/searchable.json