Update header and manifest icons

2 years ago · 64edd70ec4
parent d7b201c7f7
commit 64edd70ec4
11 changed files with 121 additions and 3 deletions
--- a/public/images/og-img.png
+++ b/public/images/og-img.png
--- a/public/images/twitter-img.png
+++ b/public/images/twitter-img.png
--- a/public/manifest/apple-touch-icon.png
+++ b/public/manifest/apple-touch-icon.png
--- a/public/manifest/favicon.ico
+++ b/public/manifest/favicon.ico
--- a/public/manifest/icon152.png
+++ b/public/manifest/icon152.png
--- a/public/manifest/icon16.png
+++ b/public/manifest/icon16.png
--- a/public/manifest/icon196.png
+++ b/public/manifest/icon196.png
--- a/public/manifest/icon32.png
+++ b/public/manifest/icon32.png
--- a/public/manifest/manifest.json
+++ b/public/manifest/manifest.json
@ -0,0 +1,27 @@
+{
+  "dir": "ltr",
+  "lang": "en",
+  "name": "Roadmap",
+  "scope": "/",
+  "display": "standalone",
+  "start_url": "https://roadmap.sh/",
+  "short_name": "Roadmap",
+  "theme_color": "#EDD07E",
+  "description": "Roadmaps to becoming a Modern Developer – roadmap.sh",
+  "orientation": "any",
+  "background_color": "#101010",
+  "related_applications": [],
+  "prefer_related_applications": false,
+  "icons": [
+    {
+      "src": "/manifest/icon152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "/manifest/icon196.png",
+      "sizes": "196x196",
+      "type": "image/png"
+    }
+  ]
+}
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@ -6,23 +6,69 @@ import Footer from '../components/Footer.astro';
 import type { SponsorType } from '../components/Sponsor/Sponsor.astro';
 import Sponsor from '../components/Sponsor/Sponsor.astro';
 import YouTubeBanner from '../components/YouTubeBanner.astro';
+import { siteConfig } from '../lib/config';

 export interface Props {
  title: string;
+  description?: string;
  sponsor?: SponsorType;
+  seo: {
+    title: string;
+    description: string;
+    keywords: string[];
+  };
 }

-const { title, sponsor } = Astro.props;
+const {
+  title = siteConfig.title,
+  description = siteConfig.description,
+  keywords = siteConfig.keywords,
+  seo,
+  sponsor,
+} = Astro.props;
 ---

 <!DOCTYPE html>
 <html lang='en'>
  <head>
    <meta charset='UTF-8' />
-    <meta name='viewport' content='width=device-width' />
-    <link rel='icon' type='image/svg+xml' href='/favicon.svg' />
    <meta name='generator' content={Astro.generator} />
    <title>{title}</title>
+    <meta name='description' content={description} />
+    <meta name='author' content='Kamran Ahmed' />
+    <meta name="keywords" content={ keywords.join(', ')} />
+    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0">
+    <meta http-equiv="Content-Language" content="en" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:creator" content="@kamranahmedse" />
+
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:image" content="https://roadmap.sh/og-img.png" />
+    <meta property="og:image:alt" content="roadmap.sh" />
+    <meta property="og:site_name" content="roadmap.sh" />
+    <meta property="og:title" content={title } />
+    <meta property="og:description" content={description} />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://roadmap.sh" />
+
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="roadmap.sh" />
+    <meta name="application-name" content="roadmap.sh" />
+    
+    <link rel="apple-touch-icon" sizes="180x180" href="/manifest/apple-touch-icon.png" />
+    <meta name="msapplication-TileColor" content="#101010" />
+    <meta name="theme-color" content="#848a9a" />
+
+    <link rel="manifest" href="/manifest/manifest.json" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/manifest/icon32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/manifest/icon16.png" />
+    <link rel="shortcut icon" href="/manifest/favicon.ico" type="image/x-icon" />
+
+    <link rel="icon" href="/manifest/favicon.ico" type="image/x-icon" />

    <slot name='after-header' />
  </head>
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@ -0,0 +1,45 @@
+export const siteConfig = {
+  title: 'Roadmaps to becoming a modern developer',
+  description: 'Community driven roadmaps, articles and guides for developers to grow in their career.',
+  url: {
+    twitter: 'https://twitter.com/roadmapsh',
+    youtube: 'https://youtube.com/theroadmap?sub_confirmation=1',
+    repo: 'https://github.com/kamranahmedse/developer-roadmap',
+    contribute:
+      'https://github.com/kamranahmedse/developer-roadmap/tree/master/contributing.md',
+    issue: 'https://github.com/kamranahmedse/developer-roadmap/issues/new',
+  },
+  keywords: [
+    'roadmap',
+    'developer roadmaps',
+    'developer roadmap',
+    'how to become a developer',
+    ...[
+      'frontend developer',
+      'backend developer',
+      'sre',
+      'devops',
+      'android developer',
+      'dba',
+      'blockchain developer',
+      'qa',
+      'qa engineer',
+      'software architect',
+      'asp.net core developer',
+      'react developer',
+      'angular developer',
+      'vue developer',
+      'node.js developer',
+      'javascript developer',
+      'python developer',
+      'go developer',
+      'java developer',
+      'design system',
+      'software design',
+      'graphql',
+    ].flatMap((roadmapKeyword) => [
+      `${roadmapKeyword} roadmap`,
+      `${roadmapKeyword} roadmap 2023`,
+    ]),
+  ],
+};