♻️ add meta tags across pages

developersIndia · Feb 18, 2023 · 698cbab · 698cbab
1 parent 6eac721
commit 698cbab
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 64 deletions.
diff --git a/main.py b/main.py
@@ -16,25 +16,31 @@ class Config:
 
 
 class FilterLevelForm(FlaskForm):
-    level = SelectField("level", choices=[
-        ("beginner", "beginner"),
-        ("intermediate", "intermediate"),
-        ("advanced", "advanced"),
-        ("everyone", "everyone"),
-    ])
+    level = SelectField(
+        "level",
+        choices=[
+            ("beginner", "beginner"),
+            ("intermediate", "intermediate"),
+            ("advanced", "advanced"),
+            ("everyone", "everyone"),
+        ],
+    )
 
 
 class FilterTypeForm(FlaskForm):
-    type = SelectField("type", choices=[
-        ("video", "video"),
-        ("article", "article"),
-        ("book", "book"),
-        ("github", "github"),
-        ("course", "course"),
-        ("audio", "audio"),
-        ("cheatsheet", "cheatsheet"),
-        ("website", "website"),
-    ])
+    type = SelectField(
+        "type",
+        choices=[
+            ("video", "video"),
+            ("article", "article"),
+            ("book", "book"),
+            ("github", "github"),
+            ("course", "course"),
+            ("audio", "audio"),
+            ("cheatsheet", "cheatsheet"),
+            ("website", "website"),
+        ],
+    )
 
 
 app = Flask(__name__)
@@ -44,8 +50,8 @@ class FilterTypeForm(FlaskForm):
     "Python": "python",
     "JavaScript": "javascript",
     "C++": "cpp",
-    "C":"c",
-    "CSS":"css",
+    "C": "c",
+    "CSS": "css",
     "Data Structures & Algorithms": "dsa",
     "Machine Learning": "machine-learning",
     "Deep Learning": "deep-learning",
@@ -59,27 +65,41 @@ class FilterTypeForm(FlaskForm):
 
 @app.route("/", methods=["GET"])
 def home():
-    return render_template("categories.html", categories=CATEGORIES)
+    title = "Saadhan by r/developersIndia"
+    return render_template("categories.html", categories=CATEGORIES, title=title)
 
 
 @app.route("/resources", methods=["GET"])
 def category():
     category = request.args.get("category")
+
     rsr = resourcer.Resource(category)
     resources = rsr.get_resource()
+
     level_form = FilterLevelForm()
     type_form = FilterTypeForm()
+
     return render_template(
-        "resources.html", resources=resources["resources"], category=category, level_form=level_form, type_form=type_form
+        "resources.html",
+        resources=resources["resources"],
+        category=category,
+        level_form=level_form,
+        type_form=type_form,
+        title=f"All {category} resources on saadhan - r/developersIndia",
     )
 
 
 @app.route("/contributors", methods=["GET"])
 def contributors():
     contributors = resourcer.Resource.get_all_contributors()
-    saadhan__contributors = resourcer.Resource.get_saadhan_contributors()
+    saadhan_contributors = resourcer.Resource.get_saadhan_contributors()
+
+    title = f"Saadhan is possible by more than {len(contributors)+len(saadhan_contributors)} community contributors 🤝 - r/developersIndia"
     return render_template(
-        "contributors.html", contributors=contributors["contributors"]+saadhan__contributors["contributors"]
+        "contributors.html",
+        contributors=contributors["contributors"]
+        + saadhan_contributors["contributors"],
+        title=title,
     )
 
 

diff --git a/static/css/custom.css b/static/css/custom.css
@@ -0,0 +1,41 @@
+* {
+    margin: 0;
+}
+
+html {
+    overflow-y: auto;
+
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+main {
+    flex-grow: 1;
+    padding-bottom: 10px;
+}
+
+footer {
+    margin-top: 5rem;
+    height: 2rem;
+}
+
+a {
+    color: #E4376D;
+}
+
+.grid-container {
+    display: grid;
+    grid-gap: 1rem;
+}
+
+.grid-container.grid-repeat-5 {
+    grid-template-columns: repeat(5, 1fr);
+}
+
+p#\.contributor-name{
+    text-align: center;
+}
diff --git a/templates/base.html b/templates/base.html
@@ -5,50 +5,25 @@
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Saadhan by r/developersIndia</title>
+
+  <meta property="og:type" content="website">
+  <meta property="og:title" content="{{ title }}">
+  <meta property="og:url" content="{{ url_for(request.endpoint, _external=True) }}" />
+	<meta name="twitter:site" content="@devsinindia">
+	<meta name="twitter:creator" content="@devsinindia">
+	<meta property="og:site_name" content="Saadhan - A resource hub by r/developersIndia">
+  <meta name="description" content="Saadhan is a comprehensive website created by the r/developersIndia community, which offers an extensive collection of resources to help you learn tech. Whether you are a beginner or an experienced professional, Saadhan has something for everyone. From articles and tutorials to videos and courses, you can find a wide range of tech-related content that will enhance your knowledge and skills.">
+	<meta property="og:description" content="Saadhan is a comprehensive website created by the r/developersIndia community, which offers an extensive collection of resources to help you learn tech. Whether you are a beginner or an experienced professional, Saadhan has something for everyone. From articles and tutorials to videos and courses, you can find a wide range of tech-related content that will enhance your knowledge and skills." />
+	<meta name="twitter:description" content="Saadhan is a comprehensive website created by the r/developersIndia community, which offers an extensive collection of resources to help you learn tech. Whether you are a beginner or an experienced professional, Saadhan has something for everyone. From articles and tutorials to videos and courses, you can find a wide range of tech-related content that will enhance your knowledge and skills.">
   <meta name="google-site-verification" content="jeqscIfDl_A3eUsQzbMRqd74G3WaI1GHVaV3DHkDD4A" />
+
+  <title>{{ title }}</title>
+
+  <link rel="canonical" href="{{ url_for(request.endpoint, _external=True) }}">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" />
   <link rel="icon" type="image/x-icon"
     href="https://raw.githubusercontent.com/developersIndia/assets/main/favicons/favicon.ico">
-  <style>
-    * {
-      margin: 0;
-    }
-
-    html {
-      overflow-y: auto;
-
-    }
-
-    body {
-      display: flex;
-      flex-direction: column;
-      min-height: 100vh;
-    }
-
-    main {
-      flex-grow: 1;
-      padding-bottom: 10px;
-    }
-
-    footer {
-      margin-top: 5rem;
-      height: 2rem;
-    }
-
-    a {
-      color: #E4376D;
-    }
-
-    .grid-container {
-      display: grid;
-      grid-gap: 1rem;
-    }
-
-    .grid-container.grid-repeat-5 {
-      grid-template-columns: repeat(5, 1fr);
-    }
-  </style>
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/custom.css') }}">
   <script src="https://unpkg.com/htmx.org@1.8.4"></script>
 </head>
 

diff --git a/templates/contributors.html b/templates/contributors.html
@@ -6,8 +6,8 @@
     {% for contributor in contributors %}
     <div class="grid-item">
         <a href="{{contributor.profile}}">
-            <img src="{{contributor.avatar_url}}" alt="">
-            <p class="subtitle is-4">{{contributor.name}}</p>
+            <img src="{{contributor.avatar_url}}" alt="{{contributor.name}}'s GitHub profile image">
+            <p id=".contributor-name" class="subtitle is-4">{{contributor.name}}</p>
         </a>
     </div>
     {% endfor %}