diff --git a/app.js b/app.js index 20fa844..a959301 100644 --- a/app.js +++ b/app.js @@ -56,7 +56,14 @@ app.use((req, res, next) => { }); // Mount routes for different demo types -const demoTypes = ['chips', 'related-websites-sets', 'private-state-tokens', 'fedcm', 'storage-access-api']; +const demoTypes = [ + 'chips', + 'related-websites-sets', + 'private-state-tokens', + 'fedcm', + 'storage-access-api', + 'frame-overlay', +]; demoTypes.forEach(demoType => { const demoRoutes = require(`./src/demos/${demoType}/routes`); app.use(`/${demoType}`, demoRoutes); // Mount the routes on a path specific to the demo type diff --git a/src/common/index.ejs b/src/common/index.ejs index 3e145fb..7825194 100644 --- a/src/common/index.ejs +++ b/src/common/index.ejs @@ -24,6 +24,7 @@ <%= renderCard('Spotify', '🔊', '/spotify') %> <%= renderCard('CHIPS', '🍪', '/chips') %> <%= renderCard('Storage Access API', '🗃️', '/storage-access-api') %> + <%= renderCard('Frame Overlay', '🔲', '/frame-overlay') %> diff --git a/src/demos/frame-overlay/index.ejs b/src/demos/frame-overlay/index.ejs new file mode 100644 index 0000000..009c743 --- /dev/null +++ b/src/demos/frame-overlay/index.ejs @@ -0,0 +1,157 @@ +<%- include(commonPath + '/header.ejs') %> + <%- include(commonPath + '/internal-page/header.ejs') %> + +
+

Where every view is neatly framed to perfection!

+
+ +
+
+

Visible Iframe

+ +
+
+

Visible Iframe 1

+ +
+
+

Visible Iframe 2

+ +
+
+

Visible Iframe 3

+ +
+
+ + +
+
+

Visible Iframe 5 (Map)

+ +
+
+ +
+
+

Visible Iframe 5 (Map)

+ +
+
+

Visible Iframe 5 (Map)

+ +
+
+ +
+
+

Iframe RWS

+ +
+ +
+ + + +
+
+ <%- include(commonPath + '/internal-page/footer.ejs') %> +<%- include(commonPath + '/footer.ejs') %> diff --git a/src/demos/frame-overlay/routes.js b/src/demos/frame-overlay/routes.js new file mode 100644 index 0000000..e7cd016 --- /dev/null +++ b/src/demos/frame-overlay/routes.js @@ -0,0 +1,47 @@ +const express = require('express'); +const path = require('path'); +const router = express.Router(); + +router.get('/', (req, res) => { + res.render(path.join(__dirname,'index'), { + title: 'Frame Overlay' + }); +}); + +router.get('/theme-selection', (req, res) => { + res.render(path.join(__dirname,'theme-selection'), { + title: 'Storage Access API' + }); +}); + + +router.get( '/get-personalization', ( req, res ) => { + const currentTheme = req.cookies.theme || 'light'; + res.json( { theme: currentTheme }); +}); + +router.post( '/set-personalization', ( req, res ) => { + const { theme } = req.body; + + if (!theme) { + res.status(400).send({ message: 'Invalid request' }); + + } + + res.cookie('theme', theme, { + domain: `.${res.locals.domainC}`, + maxAge: 30 * 24 * 60 * 60 * 1000, // 30 days + httpOnly: true, + sameSite: "none", + secure: true + }); + res.status(200).send({ message: 'Success', theme : theme}); +}); + +// Serve the personalization.js file to the site +router.get('/personalization.js', (req, res) => { + res.set('Content-Type', 'application/javascript'); + res.render(path.join(__dirname,'personalization')); +}); + +module.exports = router;