Browse Source

thumbnails

Gregg Tavares 5 years ago
parent
commit
fc421d6777

+ 25 - 0
Gruntfile.js

@@ -130,6 +130,31 @@ module.exports = function(grunt) {
     siteName: 'ThreeJSFundamentals',
     siteThumbnail: 'threejsfundamentals.jpg',  // in rootFolder/lessons/resources
     templatePath: 'build/templates',
+    thumbnailOptions: {
+      thumbnailBackground: 'threejsfundamentals-background.jpg',
+      text: [
+        {
+          font: 'bold 100px sans-serif',
+          verticalSpacing: 100,
+          offset: [100, 120],
+          textAlign: 'left',
+          shadowOffset: [15, 15],
+          strokeWidth: 15,
+          textWrapWidth: 1000,
+        },
+        {
+          font: 'bold 60px sans-serif',
+          text: 'threejsfundamentals.org',
+          verticalSpacing: 100,
+          offset: [-100, -90],
+          textAlign: 'right',
+          shadowOffset: [8, 8],
+          strokeWidth: 15,
+          textWrapWidth: 1000,
+          color: 'hsl(340, 100%, 70%)',
+        },
+      ],
+    },
   };
 
   // just the hackiest way to get this working.

+ 14 - 1
build/templates/index.template

@@ -35,8 +35,12 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 <html lang="{{langInfo.langCode}}">
 <head>
 <meta charset="utf-8">
-
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+
+<meta name="description" content="Three.js tutorials and solutions" />
+<meta name="keywords" content="webgl graphics three.js" />
+<meta name="thumbnail" content="https://threejsfundamentals.org/threejs/lessons/resources/threejsfundamentals.jpg" />
+
 <meta property="og:title" content="{{title}}" />
 <meta property="og:type" content="website" />
 <meta property="og:image" content="https://threejsfundamentals.org/threejs/lessons/resources/threejsfundamentals.jpg" />
@@ -55,6 +59,15 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 <title>{{title}}</title>
 
 <link rel="alternate" type="application/atom+xml" title="threejs fundamentals" href="https://threejsfundamentals.org/atom.xml" />
+<script type="application/ld+json">
+{
+  "@context":"https://schema.org",
+  "@type":"ItemList",
+  "itemListElement":
+  {{{langInfo.carousel}}}
+}
+</script>
+
 
 <link href="/threejs/lessons/resources/threejsfundamentals-icon.png" rel="shortcut icon" type="image/png">
 <link rel="apple-touch-icon" href="/threejs/lessons/resources/threejsfundamentals-icon.png">

+ 39 - 0
build/templates/lesson.template

@@ -36,6 +36,11 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+
+<meta name="description" content="{{description}}" />
+<meta name="keywords" content="webgl graphics three.js" />
+<meta name="thumbnail" content="{{screenshot}}" />
+
 <meta property="og:title" content="{{title}}" />
 <meta property="og:type" content="website" />
 <meta property="og:image" content="{{screenshot}}" />
@@ -51,6 +56,40 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 <meta name="twitter:description" content="{{description}}" />
 <meta name="twitter:image:src" content="{{screenshot}}" />
 
+<script type="application/ld+json">
+{
+  "@context":"https://schema.org",
+  "@graph":[
+    {
+      "@type":"WebSite",
+      "@id":"https://threejsfundamentals.org/#website",
+      "url":"https://threejsfundamentals.org/",
+      "name":"ThreejsFundamentals"
+    },
+    {
+      "@type":"ImageObject",
+      "@id":"{{url}}#primaryimage",
+      "url":"{{screenshot}}",
+      "width":{{screenshotSize.width}},
+      "height":{{screenshotSize.height}}
+    },
+    {
+      "@type":"WebPage",
+      "@id":"{{url}}#webpage",
+      "url":"{{url}}",
+      "inLanguage":"{{langInfo.langCode}}",
+      "name":"{{title}}",
+      "keywords":"webgl graphics three.js programming",
+      "isPartOf":{
+        "@id":"https://threejsfundamentals.org/#website"
+      },
+      "primaryImageOfPage":{
+        "@id":"{{url}}#primaryimage"
+      }
+    }
+  ]
+}
+</script>
 
 <title>{{title}}</title>
 <link href="/threejs/lessons/resources/threejsfundamentals-icon.png" rel="shortcut icon" type="image/png">

BIN
threejs/lessons/resources/threejsfundamentals-background.jpg