Skip to content

Revise README for app structure and features #122

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Stempek220ok wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Revise README for app structure and features #122

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 92 additions & 75 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,75 +1,92 @@
<p align="center">
<img width="128" height="128" src="https://raw.githubusercontent.com/ritwickdey/vscode-live-server-plus-plus/master/images/vscode-live-server-plus-plus.png">
</p>
<h3 align="center">Vscode Live Server++ (BETA) </h3>
<p align="center">It's Truly Live<p>


[![VSCode Marketplace](https://img.shields.io/vscode-marketplace/v/ritwickdey.vscode-live-server-plus-plus.svg?style=flat-square&label=vscode%20marketplace)](https://marketplace.visualstudio.com/items?itemName=ritwickdey.vscode-live-server-plus-plus) [![Total Installs](https://img.shields.io/vscode-marketplace/d/ritwickdey.vscode-live-server-plus-plus.svg?style=flat-square)](https://marketplace.visualstudio.com/items?itemName=ritwickdey.vscode-live-server-plus-plus) [![Avarage Rating](https://img.shields.io/vscode-marketplace/r/ritwickdey.vscode-live-server-plus-plus.svg?style=flat-square)](https://marketplace.visualstudio.com/items?itemName=ritwickdey.vscode-live-server-plus-plus) [![Travis branch](https://img.shields.io/travis/com/ritwickdey/vscode-live-server-plus-plus/master.svg?style=flat-square&label=travis%20branch)](https://travis-ci.com/ritwickdey/vscode-live-server-plus-plus) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://github.com/ritwickdey/vscode-live-server-plus-plus/)

---

![VSCode Live Server++](./images/vscode-live-server-plus-plus_preview1.gif)

---
## Features

- **No Need to save HTML, CSS, JS** :smile:
- **No Browser full reload** (for HTML & CSS)
- Customizable Server Root
- Customizable Server Port
- Customizable reloading time
- Customizable index file (e.g `index.html`)
- Auto Browser open (Mozila, Chrome & Edge)
- Control from statusbar

---

## Downside

- `Live Server++` will work well if your project only contents `css` & `html` and minimal `JavaScript`. If you do lot of DOM Manupulation with JavaScript, `Live Server++` is not recommended.

---
## How to Start/Stop Server ?

1. Open a project and click to `Go Live++` from the status bar to turn the server on/off.

2. Open the Command Pallete by pressing `F1` or `ctrl+shift+P` and type `Live Server++: Open Server` to start a server or type `Live Server++: Close Server` to stop a server.

---

## Settings

[Click here to read settings Docs](./docs/settings.md).

## What's new ?

- ### v0.0.1 (##DATE##)
- Initial release
- hot Reload supported
- No need to save
- 5 settings are added (Port, Root, indexFile, timeout, browser)

---

## Changelog

To check full changelog [click here](CHANGELOG.md).

---

## Why `Live Server++` when there is a `Live Server` ?

Actually, I was receiving a lot of emails, PR, comments (and also there was few issue request, e.g. [#12080](https://github.com/Microsoft/vscode/issues/12080)) - `why auto reload only happens when we save the file`? - `why it's not realtime?`... blah blah....

Well, in Live Server Extension, I'm using a popular npm module (named `live-server`) and it's the core library of Live Server. _(yaa! too many "Live Server" 😜)_. In the way it's working - it never possible auto reload without saving the file.

And yaa, to be honest, when I made (in mid of `2017`) the live server extension, I didn't know Node.js or JavaScript well _(Hold on! I still don't know `Node.js` but I'm now confident)_. I even didn't know `promise`/`callback` well. I understood the `callback` _(& `callback hell` too)_ while making the extension. And `Promise`? Only I knew how to use it like `.then().then().then()` and `IIFE`? or `closure`? - I didn't even hear about those names at that time. 😬

Okay, now coming to the point, Code of the `Live Server` can't be migrated with `Live Server++`. `Live Server++` is not depended on `live-server`(the npm module) - I've written the server side code from scratch & it has minimal dependency (still under development).

---

## LICENSE

This extension is licensed under the [MIT License](LICENSE)
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>react app na telefonie</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
<div id="root" class="w-full max-w-md"></div>
<script type="text/babel">
const { useState } = React; // Corrected usestate to useState

// --- ekran: główny ---
function HomeScreen({ onNavigate }) {
return (
<div className="p-6 bg-white rounded-lg shadow-md animate-fade-in">
<h1 className="text-3xl font-bold mb-4 text-gray-800">główny ekran</h1>
<p className="text-gray-700 mb-6">witaj na ekranie głównym! to jest treść strony głównej.</p>
<button onClick={() => onNavigate('settings')} className="px-5 py-2 mr-2 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200" >
idź do ustawień
</button>
<button onClick={() => onNavigate('gemini')} className="px-5 py-2 bg-green-600 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 transition-all duration-200" >
przejdź do chatu ai
</button>
</div>
);
}

// --- ekran: ustawienia ---
function SettingsScreen({ onNavigate }) {
return (
<div className="p-6 bg-white rounded-lg shadow-md animate-fade-in">
<h1 className="text-3xl font-bold mb-4 text-gray-800">ustawienia (tylko ty)</h1>
<p className="text-gray-700 mb-6">tutaj znajdują się twoje prywatne ustawienia.</p>
{/* Added a back button to navigate home */}
<button onClick={() => onNavigate('home')} className="px-5 py-2 bg-gray-600 text-white font-semibold rounded-lg shadow-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-all duration-200" >
wróć do głównego ekranu
</button>
</div>
);
}

// --- ekran: chat ai (dodany dla kompletności) ---
function GeminiScreen({ onNavigate }) {
return (
<div className="p-6 bg-white rounded-lg shadow-md animate-fade-in">
<h1 className="text-3xl font-bold mb-4 text-gray-800">chat ai</h1>
<p className="text-gray-700 mb-6">tutaj możesz rozmawiać z AI.</p>
<button onClick={() => onNavigate('home')} className="px-5 py-2 bg-gray-600 text-white font-semibold rounded-lg shadow-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-all duration-200" >
wróć do głównego ekranu
</button>
</div>
);
}

// --- główny komponent aplikacji z routingiem ---
function App() {
const [screen, setScreen] = useState('home');

const navigateTo = (screenName) => {
setScreen(screenName);
};

const renderScreen = () => {
switch (screen) {
case 'home':
return <HomeScreen onNavigate={navigateTo} />;
case 'settings':
return <SettingsScreen onNavigate={navigateTo} />;
case 'gemini':
return <GeminiScreen onNavigate={navigateTo} />;
default:
return <HomeScreen onNavigate={navigateTo} />;
}
};

return (
<div className="container mx-auto p-4">
{renderScreen()}
</div>
);
}

// Renderowanie aplikacji do elementu root
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>