Code Monkey home page Code Monkey logo

Comments (5)

jjjonesjr33 avatar jjjonesjr33 commented on May 23, 2024

Found an easy workaround that works for analytics and sorting, takes a few steps but then you can do whatever. FYI you'll need to know a bit of HTML and docker pathing.

  1. Setup the docker once using the default docker-compose.yml and your options so you can launch the container/webpage.
  2. Inspect the page and copy the entire index.html to a notepad < You'll need this in a min.
  3. Edit the container by adding the following paths in 3-1 and 3-2 <<< you may have to delete the container and then re-added it, but this time only add the paths. No need to add any of the variables.
  4. In App.js you will need to remove some code or each time you restart your container it will reset to the default template. Examples on what code needs to be removed in 4-1 or the just copy and paste the code exactly from 4-2
  5. Run the container, set up a reverse proxy with SSL and point it to port HTTP://127.0.0.1:3000 and enjoy 😄 (Replace the 127.0.0.1 with your own IP of the host machine of the docker)

3-1) The first one is a path for the index.html

Container Path: /usr/src/app/www/index.html
Host Path: /mnt/user/appdata/littlelink/index.html <<< This was mine your's may be different on where you would like to store this file.

Keep in mind in the folder that you are linking the container to you need to create the index.html file or the container will fail to start. (you can just do this with notepad and then save the file as index.html)

Once you have access to the index.html you pretty much can do whatever you want. For example, adding an analytics script, moving the links to the right spot, or even adding a background and changing the color can be easily done.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-00000000000"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-00000000000');
</script>

3-2) Next is the App.js

Container Path: /usr/src/app/app.js
Host Path: /mnt/user/appdata/littlelink/app.js <<< This was mine your's may be different on where you would like to store this file.

Keep in mind in the folder that you are linking the container to you need to create the app.js file or the container will fail to start. (you can just do this with notepad and then save the file as app.js)

4-1) Fix App.js you may need to remove the following

fs.readFile('./template/index.html', 'utf8', (err, file) => {
  if (err) {
    throw err;
  }
  const { JSDOM } = jsdom
  const dom = new JSDOM(file);
  const html = "<!DOCTYPE html>\n" + useEnv(dom.window.document).documentElement.outerHTML;
  fs.writeFile('./www/index.html', html, 'utf8', (err) => {
    if (err) {
      throw err;
    }
  });
});

4-2) If the app.js file is empty the default code is

const express = require('express')
const morgan = require('morgan')
const compression = require('compression')
const fs = require('fs')
const jsdom = require('jsdom')
const useEnv = require('./env')



const app = express();
app.use(morgan('combined'));
app.use(express.static('www'));
app.use(compression())

const server = app.listen(process.env.PORT || 3000, () => {
    const host = server.address().address
    const port = server.address().port
    console.log('Express app listening at http://%s:%s', host, port)
})

ENJOY

That's pretty much it, once you have access to the index.html it's fair game on everything that you could or would want to edit or change for the main structure of the page. You could add the css folder as well if you want to customize the styles, but overall this is a quick and dirty way to gain access. If you want to check out what I've done you can do it at https://jjjonesjr33.com/

from littlelink-server.

timothystewart6 avatar timothystewart6 commented on May 23, 2024

Hey! Thanks for this! It's been converted to reactjs. This should be relatively easy to do with some code now. I will write some some soon! Google analytics will be as simple as providing a UA or Tracking ID!

from littlelink-server.

northportio avatar northportio commented on May 23, 2024

Would be nice to add the option to set a meta tag to not have it indexed. See this Google Dev Doc.

from littlelink-server.

timothystewart6 avatar timothystewart6 commented on May 23, 2024

This feature was added in 1dc1de2

from littlelink-server.

timothystewart6 avatar timothystewart6 commented on May 23, 2024

added button click events 962742c

from littlelink-server.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.