Site is not loading

[Skellingtor]

Self-explanatory, the Notion page is not loading through my custom domain via Fruition. I'm not familiar with coding so I can't pinpoint the problem myself, but all I see is a white screen with an infinitely looping loading circle.

This is my domain: https://skellingtor.online/
This is the page it's supposed to point towards: https://skellingtor.notion.site/Hello-I-m-Matheus-Carneiro-d2e6bccc20e644bdacded2fa276f3b9c?pvs=4

[09rd193]

I could not discover where the “endless loop” was occurring.

Temporarily, I replaced the worker code to redirect from my domain to “notion.site/” url.
Reference: "Redirect all requests to one URL
": https://developers.cloudflare.com/workers/examples/redirect/

My hypothesis is that it is related to the fact that Notion has started a service that allows users to set up their own domain name...

I will look into this a little more.
Hopefully someone with more knowledge will chime in.

[Skellingtor]

I could not discover where the “endless loop” was occurring.

Temporarily, I replaced the worker code to redirect from my domain to “notion.site/” url. Reference: "Redirect all requests to one URL ": https://developers.cloudflare.com/workers/examples/redirect/

My hypothesis is that it is related to the fact that Notion has started a service that allows users to set up their own domain name...

I will look into this a little more. Hopefully someone with more knowledge will chime in.

Thank you, I'll use your solution as well until someone can figure this out

[timf34]

Yep I've encountered this problem since just yesterday as well, and have set up URL forwarding in the meantime. I'm also guessing Notion blocked this workaround to get people to use their paid custom domain hosting service. If anybody finds a way to make this work again, would appreciate it!

[09rd193]

I finished fix worker.js by resolved bugs observed one by one.

I wish I could share it with PR, but I don't think it's the right way to fix it...
(since the past fixes also seemed to be one of the bugs...)

I can't PR(sorry), but I'll disclose the temp version if it's OK.
How about this way?

[09rd193]

I will share my temp-fix code, use it if you like.
(Hope an expert will emerge...)

▼ATTNTION: This code is unfinish fix provisional.▼

temp-fix code

  /* CONFIGURATION STARTS HERE */
  
  /* Step 1: enter your domain name like fruitionsite.com */
  const MY_DOMAIN = 'YOUR_DOMAIN';
  
  /*
   * Step 2: enter your URL slug to page ID mapping
   * The key on the left is the slug (without the slash)
   * The value on the right is the Notion page ID
   */
  const SLUG_TO_PAGE = {
    '': 'YOUR_SLUG_TO_PAGE',
  };
  
  /* Step 3: enter your page title and description for SEO purposes */
  const PAGE_TITLE = '';
  const PAGE_DESCRIPTION = '';
  
  /* Step 4: enter a Google Font name, you can choose from https://fonts.google.com */
  const GOOGLE_FONT = '';
  
  /* Step 5: enter any custom scripts you'd like */
  const CUSTOM_SCRIPT = ``;
  
  /* CONFIGURATION ENDS HERE */
  
  const PAGE_TO_SLUG = {};
  const slugs = [];
  const pages = [];
  Object.keys(SLUG_TO_PAGE).forEach(slug => {
    const page = SLUG_TO_PAGE[slug];
    slugs.push(slug);
    pages.push(page);
    PAGE_TO_SLUG[page] = slug;
  });
  
  addEventListener('fetch', event => {
    event.respondWith(fetchAndApply(event.request));
  });

  function generateSitemap() {
    let sitemap = '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">';
    slugs.forEach(
      (slug) =>
        (sitemap +=
          '<url><loc>https://' + MY_DOMAIN + '/' + slug + '</loc></url>')
    );
    sitemap += '</urlset>';
    return sitemap;
  }
  
  const corsHeaders = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, HEAD, POST, PUT, OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type',
  };
  
  function handleOptions(request) {
    if (request.headers.get('Origin') !== null &&
      request.headers.get('Access-Control-Request-Method') !== null &&
      request.headers.get('Access-Control-Request-Headers') !== null) {
      // Handle CORS pre-flight request.
      return new Response(null, {
        headers: corsHeaders
      });
    } else {
      // Handle standard OPTIONS request.
      return new Response(null, {
        headers: {
          'Allow': 'GET, HEAD, POST, PUT, OPTIONS',
        }
      });
    }
  }
  
  async function fetchAndApply(request) {
    if (request.method === 'OPTIONS') {
      return handleOptions(request);
    }
    let url = new URL(request.url);
    url.hostname = 'www.notion.so';
    if (url.pathname === '/robots.txt') {
      return new Response('Sitemap: https://' + MY_DOMAIN + '/sitemap.xml');
    }
    if (url.pathname === '/sitemap.xml') {
      let response = new Response(generateSitemap());
      response.headers.set('content-type', 'application/xml');
      return response;
    }

    let response;
    if (url.pathname.startsWith('/app') && url.pathname.endsWith('js')) {
      response = await fetch(url.toString());
      let body = await response.text();
      response = new Response(body.replace(/www.notion.so/g, MY_DOMAIN).replace(/notion.so/g, MY_DOMAIN), response);
      response.headers.set('Content-Type', 'application/x-javascript');
      return response;
    } else if (url.pathname.startsWith('/api')) {
      // Forward API
      response = await fetch(url.toString(), {
        body: url.pathname.startsWith('/api/v3/getPublicPageData') ? null : request.body,
        headers: {
          'content-type': 'application/json;charset=UTF-8',
          'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36'
        },
        method: 'POST',
      });
      response = new Response(response.body, response);
      response.headers.set('Access-Control-Allow-Origin', '*');
      return response;
    } else if (slugs.indexOf(url.pathname.slice(1)) > -1) {
      const pageId = SLUG_TO_PAGE[url.pathname.slice(1)];
      const redirectUrl = 'https://' + MY_DOMAIN + '/' + pageId
      return Response.redirect(redirectUrl, 301);
    } else {
      response = await fetch(url.toString(), {
        body: request.body,
        headers: request.headers,
        method: request.method,
      });
      response = new Response(response.body, response);
      response.headers.delete('Content-Security-Policy');
      response.headers.delete('X-Content-Security-Policy');
    }  
    return appendJavascript(response, SLUG_TO_PAGE);
  }
  
  class MetaRewriter {
    element(element) {
      if (PAGE_TITLE !== '') {
        if (element.getAttribute('property') === 'og:title'
          || element.getAttribute('name') === 'twitter:title') {
          element.setAttribute('content', PAGE_TITLE);
        }
        if (element.tagName === 'title') {
          element.setInnerContent(PAGE_TITLE);
        }
      }
      if (PAGE_DESCRIPTION !== '') {
        if (element.getAttribute('name') === 'description'
          || element.getAttribute('property') === 'og:description'
          || element.getAttribute('name') === 'twitter:description') {
          element.setAttribute('content', PAGE_DESCRIPTION);
        }
      }
      if (element.getAttribute('property') === 'og:url'
        || element.getAttribute('name') === 'twitter:url') {
        element.setAttribute('content', MY_DOMAIN);
      }
      if (element.getAttribute('name') === 'apple-itunes-app') {
        element.remove();
      }
    }
  }
  
  class HeadRewriter {
    element(element) {
      /*
      if (GOOGLE_FONT !== '') {
        element.append(`<link href="https://fonts.googleapis.com/css?family=${GOOGLE_FONT.replace(' ', '+')}:Regular,Bold,Italic&display=swap" rel="stylesheet">
        <style>* { font-family: "${GOOGLE_FONT}" !important; }</style>`, {
          html: true
        });
      }
      */
      const el = `<style>
      div.notion-topbar > div > div:nth-child(1n).toggle-mode { display: block !important; }
      div.notion-topbar > div > div:nth-child(3) { display: none !important; }
      div.notion-topbar > div > div:nth-child(4) { display: none !important; }
      div.notion-topbar > div > div:nth-child(5) { display: none !important; }
      div.notion-topbar > div > div:nth-child(6) { display: none !important; }
      div.notion-topbar-mobile > div:nth-child(1n).toggle-mode { display: block !important; }
      div.notion-topbar-mobile > div:nth-child(3) { display: none !important; }
      div.notion-topbar-mobile > div:nth-child(4) { display: none !important; }
      div.notion-topbar-mobile > div:nth-child(5) { display: none !important; }
      </style>`.replace(/\r?\n/g, '');
      element.append(
        el, 
        {
          html: true
        }
      );
    }
  }
  
  class BodyRewriter {
    constructor(SLUG_TO_PAGE) {
      this.SLUG_TO_PAGE = SLUG_TO_PAGE;
    }
    element(element) {
      const el = `<script>
      window.CONFIG.domainBaseUrl = 'https://${MY_DOMAIN}';
      
      localStorage.__console = true;

      const SLUG_TO_PAGE = ${JSON.stringify(this.SLUG_TO_PAGE).replace(/"/g, '\'')};
      const PAGE_TO_SLUG = {};
      const slugs = [];
      const pages = [];
      const el = document.createElement('div');
      let redirected = false;
      Object.keys(SLUG_TO_PAGE).forEach(slug => {
        const page = SLUG_TO_PAGE[slug];
        slugs.push(slug);
        pages.push(page);
        PAGE_TO_SLUG[page] = slug;
      });
      function getPage() {
        return location.pathname.slice(-32);
      };
      function getSlug() {
        return location.pathname.slice(1);
      };
      function updateSlug() {
        const slug = PAGE_TO_SLUG[getPage()];
      };
      function onDark() {
      };
      function onLight() {
      };
      function toggle() {
        if (document.body.classList.contains('dark')) {
          onLight();
        } else {
          onDark();
        };
      };
      function addDarkModeButton(device) {
        const nav = device === 'web' ? document.querySelector('.notion-topbar').firstChild : document.querySelector('.notion-topbar-mobile');
        el.className = 'toggle-mode';
        el.addEventListener('click', toggle);
        nav.appendChild(el);
        onLight();
      };
      const observer = new MutationObserver(function() {
        if (redirected) return;
        const nav = document.querySelector('.notion-topbar');
        const mobileNav = document.querySelector('.notion-topbar-mobile');
        if (nav && nav.firstChild && nav.firstChild.firstChild
          || mobileNav && mobileNav.firstChild) {
          redirected = true;
          updateSlug();
          addDarkModeButton(nav ? 'web' : 'mobile');
          const onpopstate = window.onpopstate;
          window.onpopstate = function() {
            if (slugs.includes(getSlug())) {
              const page = SLUG_TO_PAGE[getSlug()];
              if (page) {
                history.replaceState(history.state, 'bypass', '/' + page);
              };
            };
            onpopstate.apply(this, [].slice.call(arguments));
            updateSlug();
          };
        };
      });
      observer.observe(document.querySelector('#notion-app'), {
        childList: true,
        subtree: true,
      });
      const replaceState = window.history.replaceState;
      window.history.replaceState = function(state) {
        if (arguments[1] !== 'bypass' && slugs.includes(getSlug())) return;
        return replaceState.apply(window.history, arguments);
      };
      const pushState = window.history.pushState;
      window.history.pushState = function(state) {
        const dest = new URL(location.protocol + location.host + arguments[2]);
        const id = dest.pathname.slice(-32);
        if (pages.includes(id)) {
          arguments[2] = '/' + PAGE_TO_SLUG[id];
        };
        return pushState.apply(window.history, arguments);
      };
      const open = window.XMLHttpRequest.prototype.open;
      window.XMLHttpRequest.prototype.open = function() {
        arguments[1] = arguments[1].replace('${MY_DOMAIN}', 'www.notion.so');
        return open.apply(this, [].slice.call(arguments));
      };
      </script>${CUSTOM_SCRIPT}`.replace(/\r?\n/g, '');

      element.append(
        el, 
        {html: true}
      );
    }
  }
  
  async function appendJavascript(res, SLUG_TO_PAGE) {
    return new HTMLRewriter()
      .on('title', new MetaRewriter())
      .on('meta', new MetaRewriter())
      .on('head', new HeadRewriter())
      .on('body', new BodyRewriter(SLUG_TO_PAGE))
      .transform(res);
  }

P.S. Please modify the YOUR_DOMAIN and YOUR_SLUG_TO_PAGE parts to your own settings.

[kanayankee]

@09rd193
Hello! I encountered the same issue starting yesterday. I really appreciate you providing the updated code! If the pull request isn’t active, perhaps it might be worthwhile for someone in the community to create a new repository, like fruition-sync (given that the original code is under the MIT license…).

[kanayankee]

@09rd193
Additionally, you might need to remove this part:

if (element.tagName === 'title') {
  element.setInnerContent(PAGE_TITLE);
}

When previewing on an iPhone (or possibly all mobile devices?), it causes an error with Notion.

I’d really like to work alongside current Fruition users to help revive the Fruition service!
Looking forward to collaborating with everyone. Thanks again for your support!

[09rd193]

@kanayankee コメントありがとうございます！
I really really really think you are right.
I wish I could submit a PR or Fork in the correct procedure, but the reality is that I'm too busy...

When previewing on an iPhone (or possibly all mobile devices?), it causes an error with Notion.

OMG... and Very nice pointed!
I checked in browser & iPhone.
I proceeded from the LOOP screen, satisfy, and stoped my hand.

[raznostoronniy]

I will share my temp-fix code, use it if you like. (Hope an expert will emerge...)

▼ATTNTION: This code is unfinish fix provisional.▼

temp-fix code
P.S. Please modify the YOUR_DOMAIN and YOUR_SLUG_TO_PAGE parts to your own settings.

Hi! Thanks for you attention to the issue! Is it work for you well?
I tried making the changes with your temp-fix, but the deploy fails with class HeadRewriter error.

[09rd193]

@raznostoronniy
Hello! Very very thanks for trying to deploy.

Deploy is successful on my site.
I have only changed MY_DOMAIN and SLUG_TO_PAGE from temp-fix.

Maybe my site is simple too far...
I will show though the online diff command results.

[zhaotianjing]

Hi @09rd193 , I am unfamiliar with the worker code. To be better understood, in your case, you change "MY_DOMAIN" from skellingtor.online to skellingtor.notion.site,
and change "SLUG_TO_PAGE" from d2e6bccc20e644bdacded2fa276f3b9c?pvs=4 to Hello-I-m-Matheus-Carneiro-d2e6bccc20e644bdacded2fa276f3b9c?pvs=4?

Am I understanding your solution correctly? Thanks!

[TianHongZXY]

Thanks @09rd193 for your solution, after applying it my homepage works fine now. I have a question that the url displayed in the url bar is not MY_DOMAIN only, but with some suffix, e.g., my notion username and the notion page id, it looks like https://MY_DOMAIN/tianhongzxy/Xinyu-Zhu-2ab23fc3f366490ca6cefda66f4e61c8 , can we get the url displayed as MY_DOMAIN only?

[09rd193]

@zhaotianjing
Hi.
In my case setting use step 2 in site of https://stephenou.notion.site/Fruition-Free-Open-Source-Toolkit-for-Building-Websites-with-Notion-771ef38657244c27b9389734a9cbff44 .

Maybe your case...

0. Open ↑ page & find step 2 part
1. Input you own domain in "Your Domain" form.
2. Input your Notion site full url (ex: h/ttps://sample.notion.site/sample12345) in "Notion url ~" form
3. See code part under the "COPY THE CODE" button.
4. Copy & paest from Step 1 & Step2 part in code.

My announce be enough?
If insufficient explanation sorry may bad.

[Skellingtor]

This should go without saying but please don't use my domain for your sites, especially as you don't own it!

[09rd193]

@TianHongZXY
Thank you too.
Me too it was the same situation I had encountered.

To be honest, it is unresolved. Sorry!

The way I reproduce it is,

1. Open domain only url, it becomes a long URL.
2. Go to any page under the domain.
3. Click / Tap top left button in page, it becomes a domain-only URL

(Why step 1 & 3 different URL...mystery now...)

Sorry I can't completely fix, as this is just a quick fix to get the screen to show up.