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`,
    ]),
  ],
 };