Coder Social home page Coder Social logo

bonnie39 / voyage Goto Github PK

View Code? Open in Web Editor NEW
9.0 2.0 1.0 1.13 MB

Simple frontend for Google Custom Search Engine

Home Page: https://bonnie39.github.io/tools/voyage

License: Other

CSS 52.98% HTML 14.41% JavaScript 32.61%
google google-api google-api-client html html-css-javascript javascript search search-engine web website

voyage's Introduction

Voyage

Simple self-hosted frontend for Google Custom Search Engine.

Why use this?

While this engine does use Google's API to perform searches, you aren't directly connecting to google.com which means none of Google's analytics and tracking is running in the background as you search. They do still collect some data on your API usage, though it's minimal compared to using their proprietary search engine. ALSO You don't get any of the spammy "promoted" or advertisement links that usually appear at the top of the search page. Using a custom frontend for Google's search API gives you ONLY the results you need.

Prerequisites:

1: Google Custom Search Engine & CSE ID

Create a new Programmable Search Engine. Feel free to name your engine whatever you want. Ensure that you choose "search the entire web" for what to search and enable Image Search functionality. Once your engine has been created, click "customize" and then copy your Search Engine ID.

2: Create a project in Google Cloud

Go to console.cloud.google.com and create a new project. Again, you can name it whatever you want but matching your Custom/Programmable Search Engine's name would make organization easier. Select your newly created project once it is finished.

3: Google Custom Search JSON API Key

Head to developers.google.com and scroll down to where it says "Identify your application to Google with API key" and click the blue "Get a key" button next to "Programmable Search Engine (free edition) users." Choose your project you created on Google Cloud and when the option shows up, click "Show Key" and copy this as well.

Now you can set up Voyage!

IMPORTANT

Before using Voyage you will need to click the gear icon in the top right and choose "Change API Key" and enter in your JSON Api Key and CSE ID that you acquired in the previous steps. Once this has been completed, you can start searching!

Method 1: VSCode

Download the source code from this repository and extract the ZIP file's contents to where ever you wish. If you don't have it already, download Visual Studio Code. Once you have it downloaded open it and head to the Extensions Marketplace (button on the left with 4 blocks) and search for Live Server by Ritwick Dey. Once that is downloaded, open any file from Voyage's source code in the editor and press the "Go Live" button on the bottom left. Note that if you close VSCode you will have to launch the live server again. If you wish to use Voyage on another device, you will need to know the IP address of the device it is hosted on. Type that IP address into the address bar followed by ":" and the port your live server is being hosted on. By default, Live Server uses port 5500. Your address bar should look something like this: ###.###.#.#:5500.

Method 2: Hosting Online

I personally use GitHub Pages since it is free and easy. However, you can use whatever hosting service you want. Unfortunately I myself cannot provide help with this since I have no experience in using any other hosting sites and setting up a GitHub pages website is extremely easy and you can follow this official guide here.

Alternative

If you don't want to host Voyage yourself, you can use my publicly hosted instance on my website.

voyage's People

Contributors

bonnie39 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

robin021

voyage's Issues

[BUG] Settings button appears stretched on mobile

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Host Voyage locally or online
  2. Go to the voyage home page on a mobile device
  3. Settings button in top-right corner is not a perfect circle

Expected behavior
The CSS explicitly states the height and width both to be a uniform 40px, and it is this way on desktop. I even use the "!important" flag in the CSS and this issue still persists.

Screenshots
voyage_settings_button_glitch

Smartphone (please complete the following information):

  • Device: iPhone 11
  • OS: iOS 16.1.2
  • Browser: Safari, Edge
  • Version: Voyage 1.0 & 1.0.1

Additional context
This only appears when visiting Voyage on a real mobile device. Using inspect element to emulate a mobile device accessing the page does not cause this bug to display.

My public instance of Voyage can be used if you don't want to host it yourself.
https://bonnie39.github.io/voyage/

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.