Skip to content

Instantly share code, notes, and snippets.

@cas--

cas--/index.html

Created May 4, 2023 14:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cas--/0d6e3524b9b095e1e567a07a7c797e31 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cas--/0d6e3524b9b095e1e567a07a7c797e31 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. cas-- revised this gist May 4, 2023. 2 changed files with 78 additions and 17 deletions.
    73 changes: 57 additions & 16 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,19 +1,60 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
    <link href="./styles.css" rel="stylesheet">
    <title>Hello World!</title>
    </head>
    <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
    </body>
    </html>
    <head>
    <meta charset="UTF-8" />
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
    <link rel="stylesheet" href="styles.css">
    <title>Linux Intel GPU rendering bug</title>
    </head>

    <body>
    <div class="layout">
    <div>
    <a class="item ">
    <span class="icon">&#128511;</span>
    <span class="title">Lorem ipsum dolor</span>
    </a>
    </div>
    <div>
    <a class="item ">
    <span class="icon">&#128511;</span>
    <span class="title">Pellentesque ante purus</span>
    </a>
    </div>
    <div>
    <a class="item ">
    <span class="icon">&#128511;</span>
    <span class="title">Donec at metus</span>
    </a>
    </div>
    <div>
    <a class="item ">
    <span class="icon">&#128511;</span>
    <span class="title">Curabitur elementum</span>
    </a>
    </div>
    <div>
    <a class="item ">
    <span class="icon">&#128511;</span>
    <span class="title">Vestibulum fringilla iaculis</span>
    </a>
    </div>
    <div>
    <a class="item ">
    <span class="icon">&#128511;</span>
    <span class="title">Sed iaculis, ligula quis</span>
    </a>
    </div>
    <div>
    <a class="item ">
    <span class="icon">&#128511;</span>
    <span class="title">Cras laoreet tellus et finibus</span>
    </a>
    </div>
    </div>
    </body>

    </html>
    22 changes: 21 additions & 1 deletion styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,23 @@
    /* styles.css */

    /* Add styles here to customize the appearance of your app */
    .layout a {
    opacity: .7;
    }

    .layout a:hover {
    opacity: 1;
    }

    /* To workaround the issue uncomment here */
    .title{
    /* position:relative; */
    }

    a {
    color: #045591;
    }

    .icon {
    opacity: .9;
    display: inline-block;
    }
  2. cas-- created this gist May 4, 2023.
    19 changes: 19 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
    <link href="./styles.css" rel="stylesheet">
    <title>Hello World!</title>
    </head>
    <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
    </body>
    </html>
    43 changes: 43 additions & 0 deletions main.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    // Modules to control application life and create native browser window
    const { app, BrowserWindow } = require('electron')
    const path = require('path')

    function createWindow () {
    // Create the browser window.
    const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
    preload: path.join(__dirname, 'preload.js')
    }
    })

    // and load the index.html of the app.
    mainWindow.loadFile('index.html')

    // Open the DevTools.
    // mainWindow.webContents.openDevTools()
    }

    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // Some APIs can only be used after this event occurs.
    app.whenReady().then(() => {
    createWindow()

    app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
    })

    // Quit when all windows are closed, except on macOS. There, it's common
    // for applications and their menu bar to stay active until the user quits
    // explicitly with Cmd + Q.
    app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
    })

    // In this file you can include the rest of your app's specific main process
    // code. You can also put them in separate files and require them here.
    16 changes: 16 additions & 0 deletions package.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    {
    "name": "brave-bat-shut-tkz6b",
    "productName": "brave-bat-shut-tkz6b",
    "description": "My Electron application description",
    "keywords": [],
    "main": "./main.js",
    "version": "1.0.0",
    "author": "calum",
    "scripts": {
    "start": "electron ."
    },
    "dependencies": {},
    "devDependencies": {
    "electron": "24.1.3"
    }
    }
    17 changes: 17 additions & 0 deletions preload.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    /**
    * The preload script runs before. It has access to web APIs
    * as well as Electron's renderer process modules and some
    * polyfilled Node.js functions.
    *
    * https://www.electronjs.org/docs/latest/tutorial/sandbox
    */
    window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
    }

    for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
    }
    })
    7 changes: 7 additions & 0 deletions renderer.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    /**
    * This file is loaded via the <script> tag in the index.html file and will
    * be executed in the renderer process for that window. No Node.js APIs are
    * available in this process because `nodeIntegration` is turned off and
    * `contextIsolation` is turned on. Use the contextBridge API in `preload.js`
    * to expose Node.js functionality from the main process.
    */
    3 changes: 3 additions & 0 deletions styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    /* styles.css */

    /* Add styles here to customize the appearance of your app */