Update pages

osg-htc · Nov 21, 2024 · 093abf2 · 093abf2
1 parent 83a208b
commit 093abf2
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 74 deletions.
diff --git a/components/navbar.js b/components/navbar.js
@@ -17,7 +17,7 @@ export default function NavBar() {
           </a>
           <button onClick={expandMobileMenu} data-collapse-toggle="mobile-menu" type="button" className="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden focus:outline-none" aria-controls="mobile-menu-2" aria-expanded="false">
             <span className="sr-only">Open main menu</span>
-            <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
+            <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clipRule="evenodd"></path></svg>
           </button>
           <div className="hidden w-full md:block md:w-auto" id="mobile-menu">
             <ul className="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">

diff --git a/components/navlink.js b/components/navlink.js
@@ -10,20 +10,16 @@ export default function NavLink({ href, exact, children, ...props }) {
     props.className += ' active';
   }
 
-  return (
-    <>
-      <Link href={href}>
-        <a {...props}>
-          {children}
-        </a>
-      </Link>
-      <style jsx>{`
-        
-        .active {
-          border-bottom: 2px solid #fff;
-          font-weight: bold;
-        }
-        `}</style>
-    </>
-  );
+  return (<>
+    <Link href={href} {...props}>
+      {children}
+    </Link>
+    <style jsx>{`
+      
+      .active {
+        border-bottom: 2px solid #fff;
+        font-weight: bold;
+      }
+      `}</style>
+  </>);
 }
diff --git a/pages/api/gatherStats.js b/pages/api/gatherStats.js
@@ -94,9 +94,9 @@ async function getFilesRead(callback) {
 
 function getS3Config() {
   var s3 = new AWS.S3({
-    accessKeyId: process.env.NEXT_PUBLIC_S3ID,
-    secretAccessKey: process.env.NEXT_PUBLIC_S3ACESSSKEY,
-    endpoint: 'https://s3-west.nrp-nautilus.io',
+    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
+    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
+    endpoint: process.env.AWS_ENDPOINT,
     signatureVersion: 'v4',
     s3ForcePathStyle: true,
     httpOptions: {
@@ -108,18 +108,18 @@ function getS3Config() {
 
 function saveResult(result) {
   var s3 = getS3Config();
-  var params = { Bucket: 'dweitzel', Key: 'osdf-website/saved-state', Body: JSON.stringify(result) };
+  var params = { Bucket: process.env.AWS_BUCKET, Key: 'saved-state', Body: JSON.stringify(result) };
   s3.putObject(params, function (err, data) {
     if (err)
       console.log(err)
     else
-      console.log("Successfully uploaded data to dweitzel/osdf-website/saved-state");
+      console.log(`Successfully uploaded data to ${process.env.AWS_BUCKET}/saved-state`);
   });
 }
 
 function getSavedState() {
   var s3 = getS3Config();
-  var params = { Bucket: 'dweitzel', Key: 'osdf-website/saved-state' };
+  var params = { Bucket: process.env.AWS_BUCKET, Key: '/saved-state' };
   let returnedPromise = new Promise((resolve, reject) => {
     s3.getObject(params, function (err, data) {
       if (err) {

diff --git a/pages/index.js b/pages/index.js
@@ -25,65 +25,57 @@ export async function getStaticProps() {
 export default function Home({ usageData }) {
   console.log("In home:");
   console.log(usageData);
-  return (
-    <>
-      <NavBar />
-
-      <Head>
-        <title>Open Science Data Federation</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <div className='w-full flex bg-gray-900 p-6'>
-        <div className='container mx-auto lg:grid lg:grid-cols-2 lg:gap-4'>
-          <div className='hero-text'>
-            <div>
-              <h1 className='md:text-6xl text-2xl font-extrabold mb-4 text-white'>Open Science Data Federation</h1>
-              <p className='mt-5 sm:mt-10 lg:w-10/12 text-gray-400 font-normal text-lg sm:text-lg">'>
-                Providing data access and transfer services for Open Science
-              </p>
-              <Stats inputData={usageData} />
-            </div>
-          </div>
-          <div id="globe">
-            <GlobeArea />
+  return (<>
+    <NavBar />
+    <Head>
+      <title>Open Science Data Federation</title>
+      <link rel="icon" href="/favicon.ico" />
+    </Head>
+    <div className='w-full flex bg-gray-900 p-6'>
+      <div className='container mx-auto lg:grid lg:grid-cols-2 lg:gap-4'>
+        <div className='hero-text'>
+          <div>
+            <h1 className='md:text-6xl text-2xl font-extrabold mb-4 text-white'>Open Science Data Federation</h1>
+            <p className='mt-5 sm:mt-10 lg:w-10/12 text-gray-400 font-normal text-lg sm:text-lg">'>
+              Providing data access and transfer services for Open Science
+            </p>
+            <Stats inputData={usageData} />
           </div>
         </div>
-
-      </div>
-
-      <div className='w-full bg-gray-900 p-8 text-white'>
-
-        <div className='container flex-none md:flex md:flex-row justify-center items-stretch mx-auto'>
-          <FeatureIcon icon={<CodeIcon className='h-7 w-7 text-lime-400 mr-1 my-1' />}
-            title='Built on Open Source'
-          >
-            <p>Built on projects such as <a href="https://pelicanplatform.org/" className='text-blue-300 hover:text-blue-500'>Pelican</a>,
-              {' '}<a href="https://xrootd.slac.stanford.edu/" className='text-blue-300 hover:text-blue-500'>XRootD</a>,
-              {' '}<a href="https://cernvm.cern.ch/fs/" className='text-blue-300 hover:text-blue-500'>CVMFS</a>,
-              and <a href="https://kubernetes.io/" className='text-blue-300 hover:text-blue-500'>Kubernetes</a></p>
-
-          </FeatureIcon>
-          <FeatureIcon icon={<CogIcon className='h-7 w-7 text-lime-400 mr-1 my-1' />}
-            title='Client Tools availble on the OSG'>
-            <p>Client tools such as <Link href="/client"><a className='text-blue-300 hover:text-blue-500'>StashCP</a></Link> and CVMFS available for every operating system.</p>
-          </FeatureIcon>
-
-          <FeatureIcon icon={<GlobeIcon className='h-7 w-7 text-lime-400 mr-1 my-1' />}
-            title='Globally Distributed Caches'>
-            <p>Caches located throughout the globe at participating organizations and on the network backbone.</p>
-          </FeatureIcon>
-
+        <div id="globe">
+          <GlobeArea />
         </div>
+      </div>
 
+    </div>
+    <div className='w-full bg-gray-900 p-8 text-white'>
+
+      <div className='container flex-none md:flex md:flex-row justify-center items-stretch mx-auto'>
+        <FeatureIcon icon={<CodeIcon className='h-7 w-7 text-lime-400 mr-1 my-1' />}
+          title='Built on Open Source'
+        >
+          <p>Built on projects such as <a href="https://pelicanplatform.org/" className='text-blue-300 hover:text-blue-500'>Pelican</a>,
+            {' '}<a href="https://xrootd.slac.stanford.edu/" className='text-blue-300 hover:text-blue-500'>XRootD</a>,
+            {' '}<a href="https://cernvm.cern.ch/fs/" className='text-blue-300 hover:text-blue-500'>CVMFS</a>,
+            and <a href="https://kubernetes.io/" className='text-blue-300 hover:text-blue-500'>Kubernetes</a></p>
+
+        </FeatureIcon>
+        <FeatureIcon icon={<CogIcon className='h-7 w-7 text-lime-400 mr-1 my-1' />}
+          title='Client Tools availble on the OSG'>
+          <p>Client tools such as <Link href="/client" className='text-blue-300 hover:text-blue-500'>StashCP</Link> and CVMFS available for every operating system.</p>
+        </FeatureIcon>
+
+        <FeatureIcon icon={<GlobeIcon className='h-7 w-7 text-lime-400 mr-1 my-1' />}
+          title='Globally Distributed Caches'>
+          <p>Caches located throughout the globe at participating organizations and on the network backbone.</p>
+        </FeatureIcon>
 
       </div>
 
 
-      <Footer />
-
-    </>
-  )
+    </div>
+    <Footer />
+  </>);
 }
 
 /*