Merge pull request #679 from Klimatbyran/staging

Deploy to production
Klimatbyran · Sep 9, 2024 · c380cb1 · c380cb1
2 parents 116af51 + 44aecb9
commit c380cb1
Show file tree

Hide file tree

Showing 12 changed files with 88 additions and 36 deletions.
diff --git a/components/ComparisonTable.tsx b/components/ComparisonTable.tsx
@@ -219,36 +219,28 @@ function ComparisonTable<T extends object>({
         return
       }
 
-      const companyRoute = getCompanyURL(lowerCaseName, wikiId)
-      window.location.href = companyRoute
+      window.location.assign(getCompanyURL(lowerCaseName, wikiId))
     } else {
-      const municipalityrRoute = `/kommun/${lowerCaseName}`
-      router.push(municipalityrRoute)
+      router.push(`/kommun/${lowerCaseName}`)
     }
   }
 
   return (
     <>
       <StyledTable key={resizeCount}>
-        {/* HACK: prevent table headers from changing size when toggling table rows. Not sure what causes the problem, but this fixes it. */}
-        {dataType === 'companies' ? (
-          <colgroup>
-            <col width="35%" />
-            <col width="30%" />
-            <col width="35%" />
-          </colgroup>
-        ) : null}
+        {/* HACK: prevent table headers from changing size when changing data view. Not sure what causes the problem, but this fixes it. */}
+        <colgroup>
+          <col width="35%" />
+          <col width="30%" />
+          <col width="35%" />
+        </colgroup>
 
         <thead>
           {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => {
                 const currentSort = header.column.getIsSorted()
                 return (
-                // TODO: Ensure clicking table headers doesn't scroll to top.
-                // It almost seems like this could be by the table losing all its content
-                // just before re-rendering it. And since the table (or page) doesn't need as much scroll anymore,
-                // maybe it just shows the top of the table then again?
                   <TableHeader
                     key={header.id}
                     colSpan={header.colSpan}

diff --git a/components/InfoModal.tsx b/components/InfoModal.tsx
@@ -16,7 +16,7 @@ const Modal = styled.div<{ scrollY: number }>`
   background-color: rgba(0, 0, 0, 0.5);
   width: 100vw;
   height: 100vh;
-  z-index: 10;
+  z-index: 990;
   top: 0;
   left: 0;
   right: 0;

diff --git a/next.config.js b/next.config.js
@@ -53,6 +53,11 @@ module.exports = withBundleAnalyzer({
         destination: `${baseURL}/2024-06-Bolagsklimatkollen.pdf`,
         permanent: false,
       },
+      {
+        source: '/corporateclimatechecker',
+        destination: `${baseURL}/2024-08_CorporateClimateChecker.pdf`,
+        permanent: false,
+      },
     ]
   },
 })
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "react-mailchimp-subscribe": "^2.1.3",
     "react-markdown": "^9.0.1",
     "rehype-external-links": "^3.0.0",
+    "slugify": "^1.6.6",
     "styled-components": "^6.1.8",
     "vite": "^5.2.11"
   },

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -8,7 +8,9 @@ export default class MyDocument extends Document {
   render() {
     return (
       <Html>
-        <Head />
+        <Head>
+          <meta name="format-detection" content="telephone=no" />
+        </Head>
         <body>
           <Main />
           <NextScript />

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -26,16 +26,17 @@ const Container = styled.div`
   align-items: center;
 `
 
-const CompanyReportNotice = styled(Link)`
+const CompanyReportNotice = styled.div`
   background: ${({ theme }) => theme.newColors.orange2};
   color: ${({ theme }) => theme.newColors.black3};
   padding: 0.5rem 0.75rem;
   margin: 0 1rem 2rem;
   border-radius: 1rem;
   text-decoration: none !important;
   line-height: 1;
-  display: flex;
+  display: grid;
   align-items: center;
+  justify-content: center;
   gap: 8px;
   font-size: 0.875rem;
 
@@ -44,14 +45,23 @@ const CompanyReportNotice = styled(Link)`
     white-space: nowrap;
   }
 
-  &:hover {
-    background: ${({ theme }) => theme.huePalette.orange['300']};
+  div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+
+    a {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+    }
   }
 `
 
 const IconExternalLink = styled(LucideExternalLink)`
-  height: 1.25rem;
-  width: 1.25rem;
+  height: 1rem;
+  width: 1rem;
   flex-shrink: 0;
 `
 
@@ -102,15 +112,27 @@ function StartPage({ companies, municipalities, initialDataGroup }: PropsType) {
       />
       <PageWrapper compact>
         <Container>
-          <CompanyReportNotice href="/bolagsklimatkollen" target="_blank">
+          <CompanyReportNotice>
             <p>
               <span>
                 {t('startPage:reportNotice.readReport')}
                 {' '}
               </span>
               {t('startPage:reportNotice.text')}
             </p>
-            <IconExternalLink />
+            <div>
+              <Link href="/bolagsklimatkollen" target="_blank">
+                Svenska
+                <IconExternalLink />
+              </Link>
+
+              &middot;
+
+              <Link href="/corporateclimatechecker" target="_blank">
+                English
+                <IconExternalLink />
+              </Link>
+            </div>
           </CompanyReportNotice>
 
           <PillSwitch

diff --git a/public/2024-08_CorporateClimateChecker.pdf b/public/2024-08_CorporateClimateChecker.pdf
diff --git a/styles/globals.css b/styles/globals.css
@@ -51,4 +51,8 @@ a {
   white-space: nowrap;
   border-width: 0;
   font-size: 16px !important;
+}
+
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
diff --git a/utils/createCompanyList.tsx b/utils/createCompanyList.tsx
@@ -66,15 +66,16 @@ export const companyColumns = (t: TFunction): ColumnDef<Company>[] => {
       header: t('startPage:companyView.scope1n2'),
       cell: (row) => {
         const scope1n2Emissions = row.cell.row.original.Emissions.Scope1n2
+        const hasValue = Number.isFinite(scope1n2Emissions)
 
         // console.log({ row, Emissions: row.cell.row.original.Emissions })
         // NOTE: The type does not match the actual values here.
         // TS thinks scope1n2Emissions has the type `CompanyScope`, but according to the logging above,
         // it is in fact just a number or null.
         // TODO: Fix this when we get data from the API
-        const scope1n2String = Number.isFinite(scope1n2Emissions) ? formatter.format(scope1n2Emissions as unknown as number) : notReported
+        const scope1n2String = hasValue ? formatter.format(scope1n2Emissions as unknown as number) : notReported
         return (
-          <ScopeColumn isMissing={scope1n2String === notReported}>
+          <ScopeColumn isMissing={scope1n2String === notReported} className={hasValue ? 'font-mono' : ''}>
             {scope1n2String}
           </ScopeColumn>
         )
@@ -86,15 +87,16 @@ export const companyColumns = (t: TFunction): ColumnDef<Company>[] => {
       header: () => t('startPage:companyView.scope3'),
       cell: (row) => {
         const scope3Emissions = row.cell.row.original.Emissions.Scope3
+        const hasValue = Number.isFinite(scope3Emissions)
 
         // console.log({ row, Emissions: row.cell.row.original.Emissions })
         // NOTE: The type does not match the actual values here.
         // TS thinks scope3Emissions has the type `CompanyScope`, but according to the logging above,
         // it is in fact just a number or null.
         // TODO: Fix this when we get data from the API
-        const scope3String = Number.isFinite(scope3Emissions) ? formatter.format(scope3Emissions as unknown as number) : notReported
+        const scope3String = hasValue ? formatter.format(scope3Emissions as unknown as number) : notReported
         return (
-          <ScopeColumn isMissing={scope3String === notReported}>
+          <ScopeColumn isMissing={scope3String === notReported} className={hasValue ? 'font-mono' : ''}>
             {scope3String}
           </ScopeColumn>
         )

diff --git a/utils/shared.ts b/utils/shared.ts
@@ -1,14 +1,16 @@
+import { slugifyURL } from './slugifyURL'
+
 export const normalizeString = (input: string) => input.replace('ä', 'a').replace('ö', 'o').replace('å', 'a').toLowerCase()
 
 export const toTitleCase = (str: string) => str.replace(
   /\w\S*/g,
   (txt) => txt.charAt(0).toUpperCase() + txt.slice(1).toLowerCase(),
 )
 
-export const ONE_WEEK_MS = 60 * 60 * 24 * 7
+export const ONE_WEEK_MS = 1000 * 60 * 60 * 24 * 7
+
+const baseURL = process.env.NODE_ENV === 'development' ? 'http://localhost:4321' : 'https://beta.klimatkollen.se'
 
-export const getCompanyURL = (companyName: string, wikiId: string) => {
-  const baseURL = process.env.NODE_ENV === 'production' ? 'https://beta.klimatkollen.se' : 'http://localhost:4321'
-  const dashName = companyName.toLowerCase().replaceAll(' ', '-')
-  return `${baseURL}/foretag/${dashName}-${wikiId}`
-}
+export const getCompanyURL = (companyName: string, wikiId: string) => (
+  `${baseURL}/foretag/${slugifyURL(companyName)}-${wikiId}`
+)
diff --git a/utils/slugifyURL.ts b/utils/slugifyURL.ts
@@ -0,0 +1,12 @@
+import slugify from 'slugify'
+
+export const slugifyURL = (url: string, locale = 'sv') => (
+  slugify(url, {
+    replacement: '-', // replace spaces with replacement character
+    remove: undefined, // remove characters that match regex
+    lower: true, // convert to lower case
+    strict: true, // strip special characters except replacement
+    locale, // locale identifier used to create locale-aware slugs
+    trim: true, // trim leading and trailing replacement chars
+  })
+)