fix: added functionality to skip-to-content (asyncapi#1337)

Co-authored-by: akshatnema <20bcs022@iiitdmj.ac.in>
spandeliev · Mar 13, 2023 · 680c466 · 680c466
1 parent 13c4863
commit 680c466
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 58 deletions.
diff --git a/components/dashboard/Header.js b/components/dashboard/Header.js
@@ -4,7 +4,7 @@ import SlackButton from '../buttons/SlackButton';
 
 export default function Header() {
   return (
-    <div className="sm:flex sm:justify-between">
+    <div className="sm:flex sm:justify-between" id="main-content">
       <div className="lg:flex lg:justify-between">
         <div className="max-w-xl">
           <h2 className="text-4xl leading-10 font-extrabold text-gray-900 sm:text-4xl sm:leading-none sm:tracking-tight">

diff --git a/components/layout/DocsLayout.js b/components/layout/DocsLayout.js
@@ -46,7 +46,7 @@ export default function DocsLayout({ post, navItems = {}, children }) {
         {showMenu && (
           <DocsMobileMenu onClickClose={() => setShowMenu(false)} post={post} navigation={navigation} />
         )}
-        <div className="flex flex-row">
+        <div className="flex flex-row" id="main-content">
         {/* <!-- Static sidebar for desktop --> */}
         <div className="hidden lg:flex lg:flex-shrink-0">
           <div className="flex flex-col w-64 border-r border-gray-200 bg-white py-2">

diff --git a/components/layout/GenericLayout.js b/components/layout/GenericLayout.js
@@ -26,7 +26,9 @@ export default function GenericLayout({
      </StickyNavbar>
       <Container wide={wide}>
         <AnnouncementHero className="text-center my-4" small={true} />
-        {children}
+        <div id="main-content">
+          {children}
+        </div>
       </Container>
     </>
   )

diff --git a/components/navigation/NavBar.js b/components/navigation/NavBar.js
@@ -40,7 +40,7 @@ export default function NavBar({
   }
 
   function showOnClickMenu(menu) {
-    if (!isMobile) return ;
+    if (!isMobile) return;
     if (open === menu) return setOpen(null);
     setOpen(menu);
   }
@@ -52,7 +52,7 @@ export default function NavBar({
 
   return (
     <div className={`bg-white ${className} z-50`}>
-      <Button className="block md:inline-block absolute transform -translate-y-20 focus:translate-y-0" text="Skip to main content" href="#" bgClassName="bg-gray-100" textClassName="text-gray-700"/>
+      <a href="#main-content" className="block md:inline-block absolute transform -translate-y-20 focus:translate-y-0 bg-gray-100 text-gray-700 p-5 text-md font-semibold" alt="Skip to main content">Skip to main content</a>
       <div className="flex w-full justify-between items-center py-6 lg:justify-start lg:space-x-10">
         {!hideLogo && (
           <div className="lg:w-auto lg:flex-1">
@@ -67,48 +67,48 @@ export default function NavBar({
         )}
 
         <div className="flex flex-row items-center justify-center -mr-2 -my-2 lg:hidden">
-          <SearchButton 
+          <SearchButton
             className="flex items-center text-left space-x-2 p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
           >
             <IconLoupe />
           </SearchButton>
           <button onClick={() => setMobileMenuOpen(true)} type="button" className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
             <svg className="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
               <title>Menu</title>
-               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"/>
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
             </svg>
           </button>
         </div>
 
         <nav className="hidden lg:flex lg:items-center lg:justify-end space-x-6 xl:space-x-10 w-full">
           <div className="relative" onMouseLeave={() => showMenu(null)} ref={learningRef}>
-            <NavItem 
-              text="Docs" 
-              href='/docs' 
-              onClick={() => showOnClickMenu('learning')} 
-              onMouseEnter={() => showMenu('learning')} 
+            <NavItem
+              text="Docs"
+              href='/docs'
+              onClick={() => showOnClickMenu('learning')}
+              onMouseEnter={() => showMenu('learning')}
               hasDropdown
             />
             {open === 'learning' && <LearningPanel />}
           </div>
 
           <div className="relative" onMouseLeave={() => showMenu(null)} ref={toolingRef}>
-            <NavItem 
+            <NavItem
               text="Tools"
-              href='/tools' 
-              onClick={() => showOnClickMenu('tooling')} 
-              onMouseEnter={() => showMenu('tooling')} 
-              hasDropdown 
+              href='/tools'
+              onClick={() => showOnClickMenu('tooling')}
+              onMouseEnter={() => showMenu('tooling')}
+              hasDropdown
             />
-            { open === 'tooling' && <ToolsPanel /> }
+            {open === 'tooling' && <ToolsPanel />}
           </div>
 
           <div className="relative" onMouseLeave={() => showMenu(null)} ref={communityRef}>
-            <NavItem 
+            <NavItem
               text="Community"
-              route="/community" 
-              onClick={() => showOnClickMenu('community')} 
-              onMouseEnter={() => showMenu('community')} 
+              route="/community"
+              onClick={() => showOnClickMenu('community')}
+              onMouseEnter={() => showMenu('community')}
               hasDropdown
             />
             {open === 'community' && <CommunityPanel />}
@@ -119,7 +119,7 @@ export default function NavBar({
           ))}
 
           <div className="flex flex-row items-center justify-content">
-            <SearchButton 
+            <SearchButton
               className="flex items-center text-left space-x-2 p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
             >
               <IconLoupe />

diff --git a/pages/blog/index.js b/pages/blog/index.js
@@ -15,6 +15,7 @@ import StickyNavbar from "../../components/navigation/StickyNavbar"
 import Paragraph from "../../components/typography/Paragraph";
 import TextLink from "../../components/typography/TextLink";
 import Button from "../../components/buttons/Button";
+import GenericLayout from "../../components/layout/GenericLayout";
 
 export default function BlogIndexPage() {
   const router = useRouter();
@@ -49,14 +50,19 @@ export default function BlogIndexPage() {
     });
   };
   const showClearFilters = Object.keys(router.query).length > 0;
+
+  const description = 'Find the latest and greatest stories from our community';
+  const image = '/img/social/blog.webp';
+
   return (
-    <div>
-      <Head title="Blog" />
-      <StickyNavbar>
-       <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
-      </StickyNavbar>
-      <AnnouncementHero className="text-center my-4 mx-8" small={true} />
-      <div className="relative pt-8 pb-20 px-4 sm:px-6 lg:pt-12 lg:pb-28 lg:px-8">
+    <GenericLayout
+      title="Blog"
+      description={description}
+      image={image}
+      wide
+    >
+
+      <div className="relative pt-8 pb-20 px-4 sm:px-6 lg:pt-12 lg:pb-28 lg:px-8" id="main-content">
         <div className="absolute inset-0">
           <div className="bg-white h-1/3 sm:h-2/3"></div>
         </div>
@@ -78,7 +84,7 @@ export default function BlogIndexPage() {
               </TextLink>
             </Paragraph>
             <Paragraph typeStyle="body-md" className="max-w-2xl mx-auto mt-1">
-                We have an<img
+              We have an<img
                 className="ml-1 text-primary-500 hover:text-primary-300"
                 style={{ display: "inline" }}
                 src="/img/logos/rss.svg"
@@ -100,8 +106,8 @@ export default function BlogIndexPage() {
               checks={toFilter}
             />
             {showClearFilters && (
-              <button 
-                type="button" 
+              <button
+                type="button"
                 className="bg-none border border-gray-200 text-gray-800 hover:text-gray-700 shadow-none transition-all duration-500 ease-in-out rounded-md px-4 text-md font-semibold tracking-heading md:mt-0 mt-1 md:py-0 py-2"
                 onClick={clearFilters}
               >
@@ -127,6 +133,6 @@ export default function BlogIndexPage() {
           </div>
         </div>
       </div>
-    </div>
+    </GenericLayout>
   );
 }
diff --git a/pages/jobs/index.js b/pages/jobs/index.js
@@ -11,11 +11,12 @@ import StickyNavbar from "../../components/navigation/StickyNavbar"
 import Heading from "../../components/typography/Heading";
 import Paragraph from "../../components/typography/Paragraph";
 import TextLink from "../../components/typography/TextLink";
+import GenericLayout from "../../components/layout/GenericLayout";
 
 export default function JobsIndexPage() {
   let { navItems } = useContext(JobsContext);
 
-  const closedJobPosts =  navItems.filter((job) => {
+  const closedJobPosts = navItems.filter((job) => {
     return new Date() > new Date(job.closingOn)
   });
 
@@ -71,18 +72,19 @@ Join us!
 `;
   const jobPostUrl = encodeURIComponent(body);
   const hasPosts = Object.keys(posts).length;
+
+  const description = 'Browse through available job offers!';
+  const image = '/img/social/job.webp'
+
   return (
-    <div>
-      <Head
-        title="Jobs"
-        rssTitle="RSS Feed for AsyncAPI Initiative Jobs Board"
-        rssLink="/jobs/rss.xml"
-      />
-      <StickyNavbar>
-        <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
-      </StickyNavbar>
-      <AnnouncementHero className="text-center my-4 mx-8" small={true} />
-      <div className="relative pt-8 pb-20 px-4 sm:px-6 lg:pt-12 lg:pb-28 lg:px-8">
+    <GenericLayout
+      title="Jobs"
+      description={description}
+      image={image}
+      wide
+    >
+
+      <div className="relative pt-8 pb-20 px-4 sm:px-6 lg:pt-12 lg:pb-28 lg:px-8" id="main-content">
         <div className="absolute inset-0">
           <div className="bg-white h-1/3 sm:h-2/3"></div>
         </div>
@@ -152,25 +154,25 @@ Join us!
             )}
           </div>
           <div className="text-center mt-3 p-4">
-            { !checkOldPost ? (
+            {!checkOldPost ? (
               <button className="btn btn-outline btn-lg text-gray-600" onClick={onClickOldPost}>
                 Show closed jobs
               </button>
             ) : (
-            <div className="mt-8 flex flex-col items-stretch sm:rounded-md text-left">
-              <ul className="bg-white shadow overflow-hidden divide-y divide-gray-200 sm:w-2/3 sm:self-center">
-                {closedJobPosts.map((post, index) => (
-                  <JobPostItem key={index} job={post} />
-                ))}
-              </ul>
-              <button className="btn btn-outline-dark back-to-top mt-1 text-gray-600" onClick={onClickOldPost}>
-                Back
-              </button>
-            </div>
+              <div className="mt-8 flex flex-col items-stretch sm:rounded-md text-left">
+                <ul className="bg-white shadow overflow-hidden divide-y divide-gray-200 sm:w-2/3 sm:self-center">
+                  {closedJobPosts.map((post, index) => (
+                    <JobPostItem key={index} job={post} />
+                  ))}
+                </ul>
+                <button className="btn btn-outline-dark back-to-top mt-1 text-gray-600" onClick={onClickOldPost}>
+                  Back
+                </button>
+              </div>
             )}
           </div>
         </div>
       </div>
-    </div>
+    </GenericLayout>
   );
 }
diff --git a/public/img/social/blog.webp b/public/img/social/blog.webp
diff --git a/public/img/social/job.webp b/public/img/social/job.webp