Tinloof is a Berlin-based agency that designs and builds web products and sites.

LAK Gallery is an international art gallery that displays limited edition contemporary work in furniture, ceramics, and sculpture. We've built the eCommerce from scratch with Next.js, TypeScript, Vercel, and 

LAK Gallery is an international gallery that displays limited edition contemporary pieces of art in furniture, ceramics, and sculpture.

We've built their marketplace from scratch with technologies like Next.js, TypeScript, and 

Optimized for speed, accessibility, and search engines

A hub for all content

Creating pages based on templates

Bulk editing and uploading content

Controlling the layout of the page

Outcome

LAK Gallery

Featured Work

Client satisfaction and long-lasting relationships are our priority.

Our toolbox is a key ingredient in the quality we deliver.

import styles from './ConfirmButton.module.css';
...
const ConfirmButton = () => <button className={styles.confirmButton}>Ok</button>;
// It renders something like: <button class="confirmButton_fwi4g3">Ok</button*

<html>
  <head>
    <style type="text/css">
      .confirmButton_fwi4g3 {
        ...
    </style>
    <my-microfrontend>
      #shadow-root
      <button className="confirmButton_fwi4g3">Ok</button>
    </my-microfrontend>
  </head>
</html>

export function ProdStyles() {
  const [cssUrls, setCssUrls] = useState(null);
  useEffect(() => {
    const assetManifestUrl = new URL('manifest.json', import.meta.url).toString();
    getAssetsFromWebpack4AssetManifest(assetManifestUrl).then((assets) => {
      setCssUrls(assets.cssUrls);
    });
  }, []);

  return (
    <>
       {cssUrls?.map((url) => (
          <link
            type="text/css"
            rel="stylesheet"
            href={url}
            onError={incrementLinkCount}
            onLoad={incrementLinkCount}
          />
        ))
      )}
    </>
  );
}

const Root = () => {
  // <App> component would ideally only render
  // after all of the CSS assets were loaded,
  // but I omitted the check for simplicity.
  return (
    <>
      <ProdStyles />
      <App />
    </>
  );
}

async function getAssetsFromWebpack4AssetManifest(baseUrl) {
  const getAbsoluteUrl = path => new URL(path, baseUrl).toString();
  const response = await fetch(getAbsoluteUrl('/asset-manifest.json'));
  if (!response.ok) {
    throw new Error('Failed to get manifest');
  }
  const manifest = await response.json();
  const relativeCssUrls = manifest.entrypoints.filter(x => x.endsWith('.css'));
  return {
    cssUrls: relativeCssUrls.map(getAbsoluteUrl),
  };
}

// insert-comment-plugin.js
module.exports = (opts = {}) => {
  return {
    postcssPlugin: "postcss-prepend-comment",
    Root(root, postcss) {
      root.prepend(`/* ${opts.comment} */`);
    },
  };
};
module.exports.postcss = true;

PostCSS config file
//`postcss.config.js`
const insertComment = require("insert-comment-plugin");
module.exports = {
  plugins: [insertComment({ comment: "my-account-page" })],
};

// postcss.config.js
const insertComment = require("insert-comment-plugin");
module.exports = {
  plugins: [insertComment({ comment: "my-account-page" })],
};

export function DevStyles({ webComponentId }) {
  const [container, setContainer] = useState(null);

  useEffect(() => {
    if (!container) {
      return;
    }

    const sourceStylesContainer = document.head;

    const tagIdComment = `/* ${webComponentId} */`;

    const moveStyles = () => {
      container.innerHTML = "";
      container.append(
        ...Array.from(sourceStylesContainer.children)
          .filter(x => x instanceof HTMLStyleElement)
          .filter((x) => x.textContent?.includes(tagIdComment)) // finds all <style> tags containing your web component ID
          .map((x) => x.cloneNode(true)) // copies styles into the current instance of your web component. You might need to have multiple instances, so all of them need to track the styles.
      );
    };

    const observer = new MutationObserver(moveStyles);
    observer.observe(sourceStylesContainer, {
      characterData: true,
      childList: true,
      subtree: true,
    });
    moveStyles();
    return () => {
      observer.disconnect();
    };
  }, [container]);

  return <div ref={setContainer}></div>;

const Root = () => {
  // here will also be your prod CSS fetching logic
  return (
    <>
      <DevStyles webComponentId="my-account-page" />
      <App />
    </>
  );
}

<my-account-page>
    #shadow-root
    <div>
      <style type="text/css">
        /* my-account-page */
        .confirmButton_fwi4g3 {

Using CSS files in web components

Renewables category created from the CMS

illuminem's architecture

export default function HomePageContainer({ data }) {
  return (
    <Layout>
      <HomePage data={data} />
    </Layout>
  );
}

// Called on the server after each request
export async function getServerSideProps() {
  try {
    const data = await fetchHomeDataFromCMS();

    return {
      props: { data },
    };
  } catch (error) {
    console.error("Error fetching homepage data", error);
  }
}

export default function HomePageContainer({ data }) {
  return (
    <Layout>
      <HomePage data={data} />
    </Layout>
  );
}

// Called at build time
export async function getStaticProps() {
  try {
    const data = await fetchHomeDataFromCMS();

    return {
      props: { data },
    };
  } catch (error) {
    console.error("Error fetching homepage data", error);
  }
}

Most Trending carousel

export default function HomePageContainer({ data }) {
  return (
    <Layout>
      <HomePage data={data} />
    </Layout>
  );
}

// Called at build and run-time
export async function getStaticProps() {
  try {
    const data = await fetchHomeDataFromCMS();

    return {
      props: { data },
      // Revalidates the page every hour
      revalidate: 60 * 60,
    };
  } catch (error) {
    console.error("Error fetching homepage data", error);
  }
}

import categories from "../categories";

export default function CategoryPageContainer({ data }) {
  return (
    <Layout>
      <CategoryPage data={data} />
    </Layout>
  );
}

export async function getStaticProps({ params: { category } }) {
  try {
    const data = await fetchCategoryDataFromCMS(category);

    return {
      props: { data },
      revalidate: 1,
    };
  } catch (error) {
    console.error("Error fetching homepage data", error);
  }
}

export async function getStaticPaths() {
  const categories = await fetchCategoriesFromCMS();

  return {
    paths: categories.map((category) => ({
      params: { category },
    })),
  };
}

Modal to share social media

export default function PostPage({ postData }) {
  const [homeData, setHomeData] = React.useState({});

  React.useEffect(() => {
    fetchHomeDataFromCMS().then(setHomeData);
  }, []);

  return (
    <>
      <Layout>{!homeData ? null : <HomePage data={homeData} />}</Layout>
      <PostModal data={postData} />
    </>
  );
}

export async function getStaticProps({ params: { postId } }) {
  const postData = await fetchPostDataFromCMS(postId);

  try {
    return {
      props: { postData },
      revalidate: 60 * 60,
    };
  } catch (error) {
    console.error("Error fetching post data", error);

    // Fallback to 404 page in case of error
    return { notFound: true };
  }
}

// Nothing is generated at build time
export async function getStaticPaths() {
  return {
    paths: [],
    fallback: "blocking",
  };
}

Featured Work

LAK Gallery

Client satisfaction and long-lasting relationships are our priority.

Technologies

Our toolbox is a key ingredient in the quality we deliver.

Blog

We share tips, tutorials, and lessons from recent experiments on the web.