Social media generator

Afif13 · Jun 29, 2023 · 19a173e · 19a173e
1 parent 6f06e09
commit 19a173e
Show file tree

Hide file tree

Showing 7 changed files with 891 additions and 7 deletions.
diff --git a/_data/metadata.js b/_data/metadata.js
@@ -1,7 +1,7 @@
 module.exports = {
 	"title": "CSS Tip: Learn CSS the easy one",
 	"url": "https://css-tip.com/",
-	"image" : "https://css-tip/img/css-tip.jpg",
+	"image" : "https://css-tip.com/img/css-tip.jpg",
 	"language": "en",
 	"description": "A wide collection of CSS tips and tricks. The best place to keep up to date with the new CSS features",
 	"author": {

diff --git a/_includes/Montserrat-Bold.woff b/_includes/Montserrat-Bold.woff
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
@@ -19,9 +19,15 @@
 		<meta property="og:type" content="website">
 		<meta property="og:url" content="https://css-tip.com{{ page.url }}">
 		<meta property="og:description" content="{{ description or metadata.description }}">
+		{%- if tags == "posts" %}
+		{% ogImage "_includes/og-image.njk" , { title: title } %}
+		<meta property="og:image:width" content="1200" />
+		<meta property="og:image:height" content="675" />
+		{%- else %}
 		<meta property="og:image" content="{{ image or metadata.image }}">
 		<meta property="og:image:width" content="1600" />
 		<meta property="og:image:height" content="800" />
+		{%- endif %}
 		{#- Atom and JSON feeds included by default #}
 		<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
 		<link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">

diff --git a/_includes/og-image.njk b/_includes/og-image.njk
@@ -0,0 +1,43 @@
+<style>
+.root {
+ width: 100%;
+ height: 100%;
+ padding: 40px 100px 0;
+ background-image: radial-gradient(#fff 74%,#f9f9f9 76%,#f9f9f9 82%,#fff 84%);
+ background-size: 50px 50px;
+ display: flex;
+ flex-direction: column;
+  color: #333;
+}
+
+.title {
+  font-size: 80px;
+  text-transform: capitalize;
+  text-wrap: balance;
+}
+.sig {
+   font-size: 30px;
+   color: #666;
+}
+.me {
+    margin-top: auto;
+    display: flex;
+    align-items: flex-end;
+    font-size: 32px;
+}
+.me span {
+    margin-bottom: 40px;
+}
+.fav {
+    position: absolute;
+    right: 80px;
+    bottom: 0px;
+}
+</style>
+
+<div class="root">
+    <span class="sig">CSS Tip</span>
+    <h1 class="title">{{ title }}</h1>
+    <div class="me"><img src="https://css-tip.com/img/avatar.png" width="150"> <span>Temani Afif</span></div>
+    <img src="https://css-tip.com/img/fav.png" class="fav" width="220">
+</div>
diff --git a/eleventy.config.js b/eleventy.config.js
@@ -14,6 +14,10 @@ const CleanCSS = require("clean-css");
 
 const externalLinks = require('eleventy-plugin-external-links')
 
+const EleventyPluginOgImage = require('eleventy-plugin-og-image');
+const fs = require('fs');
+
+
 module.exports = (eleventyConfig) => {
 
 }
@@ -57,6 +61,21 @@ module.exports = function(eleventyConfig) {
         includeDoctype: true,           // Default to include '<!DOCTYPE html>' at the beginning of the file
     })
 
+	eleventyConfig.addPlugin(EleventyPluginOgImage, {
+	  satoriOptions: {
+	  	width: 1200,
+	  	height: 675,
+	  	fonts: [
+         {
+           name: 'Montserrat',
+           data: fs.readFileSync('_includes/Montserrat-Bold.woff'),
+           weight: 700,
+           style: 'normal',
+         },
+       ],
+	   },
+	 });
+
 	// Filters
 	eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => {
 		// Formatting tokens for Luxon: https://moment.github.io/luxon/#/formatting?id=table-of-tokens