Open alexTMGH opened 3 years ago
@alexTMGH Modify the SLUG_TO_PAGE constant, like this:
const SLUG_TO_PAGE = {
'': 'fd9c46bf6e8b40b88351d660a9d35570',
'page1': "the letters and numbers of page1",
'page2': "the letters and numbers of page2"
};
@JECaballeroR Hi! I have some question. I created a page in modal format in Notion, but when I call it, the URL appears as a querystring. How can I resolve this?
I'm not clear on how to set up multiple pages under the same domain.
Let's say you've already set up www.domain.com. You have additional Notion pages for which you want the URLs to be www.domain.com/page1, www.domain.com/page2, www.domain.com/page3, etc.. How do you go about doing this?
Separately, I just set up my domain using the instructions. Everything seemed to go smoothly, but I'm now trying to visit my site, and I'm getting this error message...https://d.pr/i/QzHfQu. What did I do wrong? I've copied and pasted the code below.
/ CONFIGURATION STARTS HERE /
/ Step 1: enter your domain name like fruitionsite.com / const MY_DOMAIN = 'fsdelight.com';
/*
The value on the right is the Notion page ID */ const SLUG_TO_PAGE = { '': 'fd9c46bf6e8b40b88351d660a9d35570', };
/ 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 = '';
slugs.forEach(
(slug) =>
(sitemap +=
'https://' + MY_DOMAIN + '/' + slug + ' ')
);
sitemap += ' ';
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 fullPathname = request.url.replace("https://" + MY_DOMAIN, ""); 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: request.body, headers: { 'content-type': 'application/json;charset=UTF-8', 'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 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)]; return Response.redirect('https://' + MY_DOMAIN + '/' + pageId, 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(`
`, { html: true }); } element.append(``, { html: true }) } } class BodyRewriter { constructor(SLUG_TO_PAGE) { this.SLUG_TO_PAGE = SLUG_TO_PAGE; } element(element) { element.append(` ${CUSTOM_SCRIPT}`, { 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); }