• Dev

  • Custom header extension, what is useful to implement?

I'm working on a custom header extension

Header for guest

guest

Header for User

user

if someone would share some idea, i will do my best

for now i have:

  • login and signup button for guests
  • social link customizable through admin panel (here maybe i will accept suggestion for socials that i've missed). Youtube, github, facebook and twittee.
  • if social link is empty, the relative icon become hidden
  • custom title and slogan (through admin panel settings)

    Justoverclock here maybe i will accept suggestion

    As I like SEO I will suggest adding schema tags for Google indexing like the justoverclock organization is same as twitter.com/user name here from admin maybe you can look at schema seo tags for more info.

        Justoverclock

        Note it's a json file!

        <script type="application/ld+json">

{"@context" : "http://schema.org",

"@type" : "Organization",

"name" : "Flarum Italy",

"url" : "https://flarum.it",

"sameAs" : [ "https://twitter.com/flarum",

"https://www.facebook.com/flarum",

"https://www.instagram.com/flarum"]

}

</script>

        I written it with mobile device so please add the code inside script tag (means excluding script tag as its html) to a notepad file and change its extension to .json and open it with visual studio code just to check once if there are no errors.

          feel free to suggest functions that can be useful in this header, i'm planning to work on this extension for the next days

            Justoverclock it's not really about header, but it would be great to have an extension to show different homepage based on user role. For example, to show unregistered users a page with information about a community and set a main forum page as homepage for registered users. I think it could be useful in many cases.

              Justoverclock

              Is there any option like I have no Twitter page or I don't want to give links ... do these icons always show on the left top?

                  Justoverclock This is what I am using in my Blog.

                  Home page

                  <script type="application/ld+json">
                  {
                  "@context": "https://schema.org",
                  "@type": "WebSite",
                  "publisher": {
                  "@type": "Organization",
                  "name": "Android වැඩකාරයෝ - Premium Sinhala Tech News provider",
                  "url": "https://androidwedakarayo.com/",
                  "logo": {
                  "@type": "ImageObject",
                  "url": "https://androidwedakarayo.com/content/images/2021/04/android-wedakarayo-logo-new.png",
                  "width": 119,
                  "height": 52
                  }
                  },
                  "url": "https://androidwedakarayo.com/",
                  "mainEntityOfPage": {
                  "@type": "WebPage",
                  "@id": "https://androidwedakarayo.com/"
                  },
                  "description": "Android වැඩකාරයෝ is a Sri Lankan tech news website, publishing tech news, feature stories, and tech product reviews in Sinhala."
                  }
                  </script>

                  In an article

                  <script type="application/ld+json">
                  {
                  "@context": "https://schema.org",
                  "@type": "Article",
                  "publisher": {
                  "@type": "Organization",
                  "name": "Android වැඩකාරයෝ - Premium Sinhala Tech News provider",
                  "url": "https://androidwedakarayo.com/",
                  "logo": {
                  "@type": "ImageObject",
                  "url": "https://androidwedakarayo.com/content/images/2021/04/android-wedakarayo-logo-new.png",
                  "width": 119,
                  "height": 52
                  }
                  },
                  "author": {
                  "@type": "Person",
                  "name": "Wiman Vishwajith",
                  "image": {
                  "@type": "ImageObject",
                  "url": "https://androidwedakarayo.com/content/images/2021/05/IMG_20210328_131753.jpg",
                  "width": 1680,
                  "height": 3648
                  },
                  "url": "https://androidwedakarayo.com/author/wiman/",
                  "sameAs": []
                  },
                  "headline": "මොකක්ද මේ VTOL ගුවන් යානා කියන්නෙ?",
                  "url": "https://androidwedakarayo.com/what-are-these-vtol-air-crafts/",
                  "datePublished": "2021-07-09T10:05:36.000Z",
                  "dateModified": "2021-07-09T10:05:36.000Z",
                  "image": {
                  "@type": "ImageObject",
                  "url": "https://androidwedakarayo.com/content/images/2021/07/what-are-these-vtol-planes.jpg",
                  "width": 1200,
                  "height": 630
                  },
                  "keywords": "Exclusives",
                  "description": "අද කියන්න යන්නෙ Avatar 2009 Movie එකෙ අපිට හමුවන VTOL නම් එයාක්‍රාෆ්ට් එක ගැන\nඑහෙමත් නැත්නම් බැට්ල්ශිප් එක ගැන පොඩි හඳුන්වා දීමක්.\n\nVertical Take-Off &amp; Landing (VTOL) මේ තමයි ඒකේ ඉංග්‍රීසි දිගහැරුම.ඒ නිසා අපි\nමේකට සිංහලෙන් කියමු (සිරස් අතට ගුවන් ගතවීම සහ ගොඩබෑමේ ගුවන් යානය) කියලා.\n\nඒ විදිහට අදහස් කලේ සාමාන්‍යයෙන් ගුවන් යානා ගමන් කරන්නේ තිරස් අතට නේ අමතුවෙන්\nකියන්න ඕනෙ නෑනේ ඒ ගැන.\n\nUSS Boxer. Image: YouTubeමේ යානයට හරියට හෙලිකොප්ටර් වගේ තිරස් අතට හා සිරස් අතට\nගමන් කිරීම සහ ගොඩ බෑමේ හැකියාව තියෙන",
                  "mainEntityOfPage": {
                  "@type": "WebPage",
                  "@id": "https://androidwedakarayo.com/"
                  }
                  }
                  </script>

                  Tags

                  <script type="application/ld+json">
                  {
                  "@context": "https://schema.org",
                  "@type": "Series",
                  "publisher": {
                  "@type": "Organization",
                  "name": "Android වැඩකාරයෝ - Premium Sinhala Tech News provider",
                  "url": "https://androidwedakarayo.com/",
                  "logo": {
                  "@type": "ImageObject",
                  "url": "https://androidwedakarayo.com/content/images/2021/04/android-wedakarayo-logo-new.png",
                  "width": 119,
                  "height": 52
                  }
                  },
                  "url": "https://androidwedakarayo.com/tag/exclusives/",
                  "name": "Exclusives",
                  "mainEntityOfPage": {
                  "@type": "WebPage",
                  "@id": "https://androidwedakarayo.com/"
                  }
                  }
                  </script>

                  `