Add proper package thumbnails

.github/workflows/deploy.yml

@@ -32,6 +32,11 @@ jobs:
           npm install -g clean-css
           npm install -g clean-css-cli
 
+      - name: "Install Imagemagick"
+        run: |
+          sudo apt-get update
+          sudo apt-get install imagemagick
+
       - name: "Install Ruby"
         uses: ruby/setup-ruby@v1
         with:

tools/generateweb.art

@@ -10,6 +10,48 @@ deploying?: key? env 'GITHUB_ACTION
 
 isHome: false
 
+generateThumbnail: function [title, author, description][
+    xx: function [cc][execute.directly cc]
+
+    xx {convert -size 1200x600 canvas:#f5f5f7 thumb_bg.png}
+    xx {convert -size 1100x10 canvas:'#82138d' thumb_sep.png}
+
+    xx ~{convert -background transparent -fill '#82138d' -font 'website/resources/Inter-Bold.ttf' -pointsize 100 label:'|title|' thumb_title.png}
+    xx {convert thumb_bg.png thumb_title.png -gravity northwest -geometry +90+90 -composite thumb_pre.png}
+
+    xx ~{convert -size 600x200 -background transparent -fill '#575759' -font 'website/resources/Inter-Regular.ttf' -pointsize 38 caption:"|description|" thumb_desc.png}
+
+    xx {convert -size 100x10 canvas:#e0e0e0 thumb_line_1.png}
+    xx {convert -size 100x10 canvas:#D7CDD8 thumb_line_2.png}
+    xx {convert -size 100x10 canvas:#CFBBD1 thumb_line_3.png}
+    xx {convert -size 100x10 canvas:#C6A8C9 thumb_line_4.png}
+    xx {convert -size 100x10 canvas:#BE95C2 thumb_line_5.png}
+    xx {convert -size 100x10 canvas:#B583BA thumb_line_6.png}
+    xx {convert -size 100x10 canvas:#AD70B3 thumb_line_7.png}
+    xx {convert -size 100x10 canvas:#A45EAB thumb_line_8.png}
+    xx {convert -size 100x10 canvas:#9C4BA4 thumb_line_9.png}
+    xx {convert -size 100x10 canvas:#93389C thumb_line_10.png}
+    xx {convert -size 100x10 canvas:#8B2695 thumb_line_11.png}
+    xx {convert -size 100x10 canvas:#82138d thumb_line_12.png}
+
+    xx {convert thumb_line_1.png thumb_line_2.png thumb_line_3.png thumb_line_4.png thumb_line_5.png thumb_line_6.png thumb_line_7.png thumb_line_8.png thumb_line_9.png thumb_line_10.png thumb_line_11.png thumb_line_12.png +append thumb_sep.png}
+
+    xx {convert -size 1200x90 canvas:#f0f0f3 thumb_line.png}
+    xx ~{convert -background transparent -fill '#979799' -font 'website/resources/Inter-Bold.ttf' -pointsize 30 label:"|title|.pkgr.art" thumb_line_text.png}
+    xx ~{convert -background transparent -fill '#979799' -font 'website/resources/Inter-Bold.ttf' -pointsize 30 label:"|author|" thumb_line_author.png}
+    xx {convert thumb_line.png thumb_line_text.png -gravity east -geometry +90+0 -composite thumb_l.png}
+    xx {convert thumb_l.png thumb_line_author.png -gravity west -geometry +140+0 -composite thumb_l2.png}
+    xx {convert thumb_l2.png website/resources/user_icon.png -gravity west -geometry +90+0 -composite thumb_l3.png}
+
+    xx {convert thumb_pre.png website/resources/trans_logo.png -gravity east -geometry +90-40 -composite thumb_final.png}
+    xx {convert thumb_final.png thumb_l3.png -gravity south -composite thumb_final2.png}
+    xx {convert thumb_final2.png thumb_desc.png -gravity west -geometry +90+50 -composite thumb_final3.png}
+    xx {convert thumb_final3.png thumb_sep.png -gravity south -geometry +0+91 -composite thumb_final4.png}
+
+    move "thumb_final4.png" ~"public/thumbs/|title|.png"
+    xx {rm thumb_*}
+]
+
 compressHTML: function [file][
     execute ~{!sh 
         html-minifier --collapse-whitespace --remove-comments --remove-optional-tags --remove-redundant-attributes --remove-script-type-attributes --use-short-doctype --minify-css true |file| -o |file|
@@ -116,8 +158,12 @@ createSpecFile: function [package, versionToProcess, targetFolder][
 
 searchable: new []
 
+write.directory "public/thumbs" ø
+
 loop packages [k,v][
+    print ~"- Processing main package: |k|"
     inf: # ~"packages/info/|k|.art"
+    generateThumbnail k inf\author\name inf\description
     vers: do "@" ++ read ~"packages/version/|k|.art" 
     ;--------------------------------
     ; DEBUGGING!
@@ -147,6 +193,7 @@ processPackagePage: function [entry][
 searchable: write.compact.json ø searchable
 
 loop entries 'entry [
+    print ~"- Creating subpages: |entry\name|"
     tgtName: ~{public/|entry\name|}
     unless directory? tgtName [
         write.directory tgtName ø

website/components/header.html

@@ -7,7 +7,26 @@
         <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">
         <title><||= packageTitle ||>Arturo Packager</title>
-        <meta name="description" content="<||= (packageTitle = "") ? -> "Package manager for the Arturo programming language" -> ~"Download |capitalize packageTitle|Package for the Arturo programming language" ||>">
+        <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">
+        <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" ||>">
+
+        <|| if packageTitle <> "" [||>
+        <meta property="og:image" content="<||= siteroot ||>/thumbs/<||= packageTitle ||>.png">
+        <|| ] ||>
+
+        <!-- Twitter -->
+        <meta name="twitter:card" content="summary_large_image">
+        <meta name="twitter:site" content="@ArturoLanguage" />
+        <meta name="twitter:creator" content="@ArturoLanguage" />
+        <meta name="twitter:title" content="<||= capitalize packageTitle ||>Arturo Packager">
+        <meta name="twitter:description" content="<||= (packageTitle = "") ? -> "Package manager for the Arturo programming language" -> ~"Get |capitalize packageTitle|Package for the Arturo programming language" ||>">
+        <|| if packageTitle <> "" [||>
+        <meta name="twitter:image" content="<||= siteroot ||>/thumbs/<||= packageTitle ||>.png">
+        <|| ] ||>
 
         <!-- FavIcon -->
         <link rel="apple-touch-icon" sizes="57x57" href="<||= siteroot ||>/favico/apple-icon-57x57.png">

website/package.html

@@ -73,6 +73,9 @@ <h3 class="is-size-5"><||= entry\info\description ||></h3>
                                                         <td>
                                                             <span class="has-text-grey"><||= ver\date\day ||>&nbsp;<||= ver\date\Month ||>&nbsp;<||= ver\date\year ||></span>
                                                         </td>
+                                                        <td>
+                                                            <span class="has-text-grey"><||= ver\details\files ||> files</span>&nbsp;<span class="has-text-grey repo-size-field">(<||= ver\details\size ||>)</span>
+                                                        </td>
                                                     </tr>
                                                 <|| ][ ||>
                                                     <tr>
@@ -82,6 +85,9 @@ <h3 class="is-size-5"><||= entry\info\description ||></h3>
                                                         <td>
                                                             <span class="has-text-grey"><||= ver\date\day ||>&nbsp;<||= ver\date\Month ||>&nbsp;<||= ver\date\year ||></span>
                                                         </td>
+                                                        <td>
+                                                            <span class="has-text-grey"><||= ver\details\files ||> files</span>&nbsp;<span class="has-text-grey repo-size-field">(<||= ver\details\size ||>)</span>
+                                                        </td>
                                                     </tr>
                                                 <|| ] ||>
                                             <|| ] ||>

website/script.js

@@ -337,6 +337,28 @@ function ajaxPost(url,action,data) {
     xmlhttp.send(JSON.stringify(data));
 }
 
+function humanFileSize(bytes, si=false, dp=1) {
+	const thresh = si ? 1000 : 1024;
+
+	if (Math.abs(bytes) < thresh) {
+	  return bytes + ' B';
+	}
+
+	const units = si 
+	  ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] 
+	  : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+	let u = -1;
+	const r = 10**dp;
+
+	do {
+	  bytes /= thresh;
+	  ++u;
+	} while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
+
+
+	return bytes.toFixed(dp) + ' ' + units[u];
+  }
+
 $(document).ready(function(){
     $.protip();
 
@@ -345,6 +367,11 @@ $(document).ready(function(){
         document.execCommand('copy');
         $(".codecopied-message").removeClass("is-hidden");
     });
+
+	$(".repo-size-field").each(function(idx) {
+		console.log();
+		$(this).text("("+humanFileSize(parseInt($(this).text().replace("(","").replace(")","")))+")");
+	});
 });
 
 function showSearch(){