Rendering lists

.env.production

@@ -1 +1 @@
-NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT'
+NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'

package.json

@@ -30,6 +30,7 @@
     "classnames": "^2.2.6",
     "date-fns": "^2.16.1",
     "debounce": "^1.2.1",
+    "ga-lite": "^2.1.4",
     "github-slugger": "^1.3.0",
     "next": "^13.4.1",
     "next-remote-watch": "^1.0.0",
@@ -91,7 +92,7 @@
     "retext": "^7.0.1",
     "retext-smartypants": "^4.0.0",
     "rss": "^1.2.2",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.3.2",
     "typescript": "^4.0.2",
     "unist-util-visit": "^2.0.3",
     "webpack-bundle-analyzer": "^4.5.0"

plugins/remark-smartypants.js

@@ -1,8 +1,3 @@
-/*!
- * Based on 'silvenon/remark-smartypants'
- * https://github.com/silvenon/remark-smartypants/pull/80
- */
-
 const visit = require('unist-util-visit');
 const retext = require('retext');
 const smartypants = require('retext-smartypants');
@@ -14,48 +9,12 @@ function check(parent) {
 }
 
 module.exports = function (options) {
-  const processor = retext().use(smartypants, {
-    ...options,
-    // Do not replace ellipses, dashes, backticks because they change string
-    // length, and we couldn't guarantee right splice of text in second visit of
-    // tree
-    ellipses: false,
-    dashes: false,
-    backticks: false,
-  });
-
-  const processor2 = retext().use(smartypants, {
-    ...options,
-    // Do not replace quotes because they are already replaced in the first
-    // processor
-    quotes: false,
-  });
+  const processor = retext().use(smartypants, options);
 
   function transformer(tree) {
-    let allText = '';
-    let startIndex = 0;
-    const textOrInlineCodeNodes = [];
-
-    visit(tree, ['text', 'inlineCode'], (node, _, parent) => {
-      if (check(parent)) {
-        if (node.type === 'text') allText += node.value;
-        // for the case when inlineCode contains just one part of quote: `foo'bar`
-        else allText += 'A'.repeat(node.value.length);
-        textOrInlineCodeNodes.push(node);
-      }
+    visit(tree, 'text', (node, index, parent) => {
+      if (check(parent)) node.value = String(processor.processSync(node.value));
     });
-
-    // Concat all text into one string, to properly replace quotes around non-"text" nodes
-    allText = String(processor.processSync(allText));
-
-    for (const node of textOrInlineCodeNodes) {
-      const endIndex = startIndex + node.value.length;
-      if (node.type === 'text') {
-        const processedText = allText.slice(startIndex, endIndex);
-        node.value = String(processor2.processSync(processedText));
-      }
-      startIndex = endIndex;
-    }
   }
 
   return transformer;

src/components/DocsFooter.tsx

@@ -27,7 +27,7 @@ export const DocsPageFooter = memo<DocsPageFooterProps>(
       <>
         {prevRoute?.path || nextRoute?.path ? (
           <>
-            <div className="grid grid-cols-1 gap-4 py-4 mx-auto max-w-7xl md:grid-cols-2 md:py-12">
+            <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-4 py-4 md:py-12">
               {prevRoute?.path ? (
                 <FooterLink
                   type="Previous"
@@ -69,23 +69,21 @@ function FooterLink({
     <NextLink
       href={href}
       className={cn(
-        'flex gap-x-4 md:gap-x-6 items-center w-full md:min-w-80 md:w-fit md:max-w-md px-4 md:px-5 py-6 border-2 border-transparent text-base leading-base text-link dark:text-link-dark rounded-lg group focus:text-link dark:focus:text-link-dark focus:bg-highlight focus:border-link dark:focus:bg-highlight-dark dark:focus:border-link-dark focus:border-opacity-100 focus:border-2 focus:ring-1 focus:ring-offset-4 focus:ring-blue-40 active:ring-0 active:ring-offset-0 hover:bg-gray-5 dark:hover:bg-gray-80',
+        'flex gap-x-4 md:gap-x-6 items-center w-full md:w-80 px-4 md:px-5 py-6 border-2 border-transparent text-base leading-base text-link dark:text-link-dark rounded-lg group focus:text-link dark:focus:text-link-dark focus:bg-highlight focus:border-link dark:focus:bg-highlight-dark dark:focus:border-link-dark focus:border-opacity-100 focus:border-2 focus:ring-1 focus:ring-offset-4 focus:ring-blue-40 active:ring-0 active:ring-offset-0 hover:bg-gray-5 dark:hover:bg-gray-80',
         {
           'flex-row-reverse justify-self-end text-end': type === 'Next',
         }
       )}>
       <IconNavArrow
-        className="inline text-tertiary dark:text-tertiary-dark group-focus:text-link dark:group-focus:text-link-dark"
+        className="text-tertiary dark:text-tertiary-dark inline group-focus:text-link dark:group-focus:text-link-dark"
         displayDirection={type === 'Previous' ? 'start' : 'end'}
       />
-      <div className="flex flex-col overflow-hidden">
-        <span className="text-sm font-bold tracking-wide no-underline uppercase text-secondary dark:text-secondary-dark group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">
+      <span>
+        <span className="block no-underline text-sm tracking-wide text-secondary dark:text-secondary-dark uppercase font-bold group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">
           {type === 'Previous' ? 'Wstecz' : 'Dalej'}
         </span>
-        <span className="text-lg break-words group-hover:underline">
-          {title}
-        </span>
-      </div>
+        <span className="block text-lg group-hover:underline">{title}</span>
+      </span>
     </NextLink>
   );
 }

src/components/Icon/IconGitHub.tsx

@@ -9,8 +9,8 @@ export const IconGitHub = memo<JSX.IntrinsicElements['svg']>(
     return (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="1.5em"
-        height="1.5em"
+        width="1.33em"
+        height="1.33em"
         viewBox="0 -2 24 24"
         fill="currentColor"
         {...props}>