Add files

README.md

@@ -1,4 +1,4 @@
-> This project is currently in development
+> This project is currently in development, this is NOT ready for production use
 
 > As for auto updating features, Korbs Studio does offer it's own update server at a montly fee of $4.23/month
 
@@ -35,3 +35,43 @@ So, here is Nexus Polestar, a template they can build their desktop app on top o
 While FalixNodes Desktop has always been constructed using vanilla HTML, CSS, and JavaScript, as well as primitive code from 4 years ago and older to still navigate and add additional settings, Nexus Polestar will be developed with Astro, as well as SCSS and more modernized scripts for features such as navigating and additional settings. 
 
 By using Astro, I can make the template more component based, allowing for more flexiblity for other developers at these other companies.
+
+___
+
+## In Development
+The following features are planned:
+ - Notification System*
+ - System Preference Respect**
+
+`*` This is subject to change
+
+`**` Help Wanted
+
+___
+
+# Working in Nexus Polestar
+## Building
+The following is required on your workstation:
+ - NodeJS
+ - Yarn
+ - Python
+ - Visual Studio (Windows and macOS)
+   - Development for C++
+ - g++ (Linux)
+
+Install Packages:
+```
+yarn
+```
+
+Then, to start the template:
+```
+yarn start
+```
+
+The `yarn start` command will it in development mode, in this mode, Electron will load a URL instead which is `localhost:3000`. This will not be the case in production mode for security purposes.
+This URL won't load up right away by Astro, wait a few moments, then press `Ctrl` + `R` in the app.
+
+___
+
+*More to come**

astro.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+import node from "@astrojs/node";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [mdx()],
+  outDir: './app',
+  adapter: node({
+    mode: 'standalone'
+  }),
+  build: {
+    linkStyle: 'relative',
+    format: 'directory',
+    client: './client',
+    server: './server'
+  },
+});

index.js

@@ -0,0 +1,33 @@
+const {app, BrowserWindow} = require('electron')
+const isDev = require('electron-is-dev');
+const {TitlebarRespect} = require('electron-titlebar-respect')
+const glasstron = require('glasstron-clarity');
+
+function createWindow () {
+  const mainWindow = new glasstron.BrowserWindow({
+    title: 'App Name',
+    minWidth: 400,
+    minHeight: 400,
+    width: 1200,
+    height: 800,
+    autoHideMenuBar: true,
+    blur: true,
+    frame: global.frame,
+    titleBarStyle: global.titleBarStyle,
+    trafficLightPosition: { x: 25, y: 25 }, // Position of Traffic Light buttons on macOS
+    titleBarOverlay: { // Background and Height of Windows titlebar buttons
+      color: '#191919', // Background
+      symbolColor: 'white', // Icon,
+      height: '40px',
+    },
+    webPreferences: {
+      webviewTag: true
+    }
+  })
+  if (isDev) {
+    mainWindow.loadURL('http://localhost:3000') // Use a URL in development mode
+  } else {
+    mainWindow.loadFile('app/index.html') // Do NOT use a URL in production mode, as that can create a security risk for your customers who will use this app
+  }
+}
+app.whenReady().then(() => {createWindow()})

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "nexus-polestar",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "concurrently \"astro dev\" \"electron .\"",
+    "build:astro": "astro build",
+    "build:electron": "node prepare-production.js && electron-builder build"
+  },
+  "author": "KorbsStudio",
+  "license": "MIT",
+  "devDependencies": {
+    "concurrently": "^7.6.0",
+    "electron": "^22.0.3",
+    "electron-builder": "^23.6.0"
+  },
+  "dependencies": {
+    "@astrojs/mdx": "^0.14.0",
+    "@astrojs/node": "^4.0.0",
+    "astro": "^1.9.2",
+    "astro-tabs": "^0.1.7",
+    "clarity": "^1.0.2",
+    "electron-is-dev": "^2.0.0",
+    "electron-titlebar-respect": "^1.0.0",
+    "glasstron": "^0.1.1",
+    "glasstron-clarity": "^0.1.26",
+    "replace": "^1.2.2",
+    "sass": "^1.57.1"
+  }
+}

prepare-production.js

@@ -0,0 +1,8 @@
+var replace = require("replace");
+replace({
+    regex: "/assets/",
+    replacement: "./assets/",
+    paths: ['./app/index.html'],
+    recursive: true,
+    silent: true,
+});

public/navigation.js

@@ -0,0 +1,24 @@
+// Credit: Tabbed Navigation by Casey Jardin
+// Source: https://codepen.io/alpha1337/pen/mxWBpq
+setTimeout(() => {
+  const _tabs = document.querySelectorAll('[data-tab]')
+  const _content = document.getElementsByClassName('active')
+
+  const toggleContent = function() {
+    if (!this.classList.contains("active")) {
+
+      Array.from(_content).forEach( item => {
+        item.classList.remove('active')
+      })
+
+      this.classList.add('active')
+      let currentTab = this.getAttribute('data-tab'),
+        _tabContent = document.getElementById(currentTab)
+        _tabContent.classList.add('active')
+    }
+  }
+
+  Array.from(_tabs).forEach( item => {
+    item.addEventListener('click', toggleContent)
+  })
+}, 1000)

src/components/Sidebar.astro

@@ -0,0 +1,39 @@
+---
+import Tab from './sidebar/Tab.astro';
+---
+
+<div class="sidebar">
+    <div class="sidebar-top">
+        <Tab
+        Page="1"
+        Name="Welcome"
+        Icon="fa-solid fa-wand-magic-sparkles"
+        Default="active"
+        ></Tab>
+
+        <Tab
+        Page="2"
+        Name="Files"
+        Icon="fa-solid fa-folder-tree"
+        ></Tab>
+
+        <Tab
+        Page="3"
+        Name="Webview Demo"
+        Icon="fa-solid fa-globe"
+        ></Tab>
+
+        <Tab
+        Page="4"
+        Name="iFrame Demo"
+        Icon="fa-solid fa-eye"
+        ></Tab>
+    </div>
+    <div class="sidebar-bottom">
+        <Tab
+        Page="5"
+        Name="Settings"
+        Icon="fa-solid fa-sliders"
+        ></Tab>
+    </div>
+</div>

src/components/pages/1.mdx

@@ -0,0 +1,27 @@
+# Nexus Polestar
+A template replacement for FalixNodes Desktop.
+
+![](https://cdn.korbsstudio.com/images/nexus-polestar-cover.png)
+
+___
+
+## What was FalixNodes Desktop?
+FalixNodes Desktop was developed by Korbs Studio, a FalixNodes Limited contractor. It was intended for its desktop customers to use FalixNodes more quickly and conveniently by allowing them to easily access both the client and game panels presented by FalixNodes. The capabilities of how the software works have progressed over time, and improved performance and security practices have been put in place to make the customer experience more efficient and trustworthy.
+
+Sadly, the software was discontinued by Korbs Studio on November 19th of 2022. 
+
+This is a bit of a disappointed, as some major features were being applied to v4 of FalixNodes Desktop, which remained in development for way over a year and never reached production. This forth major version was suppose to get amazing features like built-in SFTP manager, VPN(This was drop either way, requested by FalixNodes Limited CEO), better system optimizations, and a command menu. One of the feature did that come to light and was finished during the development phase was the command menu powered by Ninja Keys. 
+
+From the blog post about this matter:
+
+> Final thoughts from the developer: I've enjoyed creating and making updates to both FalixNodes Desktop and FalixNodes App for desktop and mobile over the years for the company, it's sad to sunset these apps, but I don't have time anymore for these and no longer movivation to continue forward. Thanks to FalixNodes Desktop, I've gained a lot more experience and knowledge in the ElectronJS framework and how to work in it, and create amazing things; and thanks to FalixNodes app which allowed me to learn about mobile development using a framework like React Native and getting to know the workflow behind Expo. While I'm not going to be working on our applications anymore, I will still be working at FalixNodes Limited as our website developer for our homepage.
+
+## Then Why the Template?
+Well, it's come to my attention after many emails from other companies, even after being discontinued, they have forked the project and are using this for their customers. So, I created this template for them and for more to come, as I don't want these companies using outdated source code.
+
+So, here is Nexus Polestar, a template they can build their desktop app on top of for their customers, to replace the old source code from FalixNodes Desktop.
+
+## What's the Difference?
+While FalixNodes Desktop has always been constructed using vanilla HTML, CSS, and JavaScript, as well as primitive code from 4 years ago and older to still navigate and add additional settings, Nexus Polestar will be developed with Astro, as well as SCSS and more modernized scripts for features such as navigating and additional settings. 
+
+By using Astro, I can make the template more component based, allowing for more flexiblity for other developers at these other companies.

src/components/pages/2.astro

@@ -0,0 +1 @@
+<h1>Welcome to Page 2</h1>

src/components/pages/3.astro

@@ -0,0 +1 @@
+<webview class="fullview" src="https://korbsstudio.com/"></webview>

src/components/pages/4.astro

@@ -0,0 +1 @@
+<iframe class="fullview" src="https://example.com/"></iframe>

src/components/pages/Settings.mdx

@@ -0,0 +1,14 @@
+# Settings
+This template will feature many more components later this year to make it more configurable for developers. Future components will contain a variety of settings together with scripts. However, work on these has not yet commenced.
+
+The following components are planned:
+ - Personilzation:
+   - Theme
+   - Color Scheme
+   - Blur Toggle
+ - Notifications
+   - Theme
+   - Sound
+ - System:
+   - Power Saving (Windows and macOS only)
+   - Hardware Acceleration*

src/components/sidebar/Tab.astro

@@ -0,0 +1,9 @@
+---
+const { Default, Name, Icon, Page } = Astro.props;
+---
+
+
+<li data-tab={Page} class=`sidebar-tab ${Default}`>
+    <i class={Icon}></i>
+    <p>{Name}</p>
+</li>

src/layouts/App.astro

@@ -0,0 +1,55 @@
+---
+import Sidebar from '../components/Sidebar.astro';
+import Page1 from '../components/pages/1.mdx';
+import Page2 from '../components/pages/2.astro';
+import Page3 from '../components/pages/3.astro';
+import Page4 from '../components/pages/4.astro';
+import Settings from '../components/pages/Settings.mdx';
+import '../styles/index.scss';
+---
+
+<script src="https://kit.fontawesome.com/e24adfc576.js" crossorigin="anonymous"></script>
+<script src="./navigation.js" crossoarigin="anonymous"></script>
+
+<div class="content">
+    <Sidebar />
+    <div class="pages">
+        <div id="1" class="page active">
+            <Page1 />
+        </div>
+        <div id="2" class="page">
+            <Page2 />
+        </div>
+        <div id="3" class="page">
+            <Page3 />
+        </div>
+        <div id="4" class="page">
+            <Page4 />
+        </div>
+        <div id="5" class="page">
+            <Settings />
+        </div>
+    </div>
+</div>
+
+<!-- This is for page 1 and Settings, which is written in Markdown. You're free to remove this -->
+<style is:inline>
+div#\31, div#\35 {
+    padding: 0px 64px 32px 64px;
+}
+a {
+    color: white;
+}
+hr {
+    height: 1px;
+    background: white;
+}
+blockquote {
+    margin: 0px;
+    padding-left: 24px;
+    border-left: 2px white solid;
+}
+img {
+    width: 100%;
+}
+</style>

src/pages/index.mdx

@@ -0,0 +1,3 @@
+---
+layout: ../layouts/App.astro
+---

src/styles/index.scss

@@ -0,0 +1,81 @@
+:root {
+    --accent: #343434;
+}
+
+body {
+    background: transparent;
+    color: white;
+    font-family: arial;
+}
+
+::-webkit-scrollbar {
+    background: #232323;
+    width: 12px;
+}
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 24px;
+    border: 4px #232323 solid;
+}
+
+.fullview {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
+.sidebar {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 240px;
+    height: 100%;
+    background: #23232305;
+    padding: 0px 20px;
+    display: grid;
+    .sidebar-top {
+        padding-top: 24px;
+    }
+    .sidebar-bottom {
+        padding-bottom: 24px;
+        align-self: end;
+    }
+    li {
+        cursor: pointer;
+        color: white;
+        background: transparent;
+        display: flex;
+        width: 100%;
+        border: none;
+        border-radius: 6px;
+        margin-bottom: 6px;
+        align-items: center;
+        i {
+            margin: 0px 16px;
+        }
+    }
+    li:hover {
+        background: rgba(51, 51, 51, 0.5);
+    }
+    li.active {
+        background: var(--accent);
+    }
+}
+
+.pages {
+    position: absolute;
+    top: 0px;
+    left: 280px;
+    width: calc(100% - 280px);
+    max-width: calc(100% - 280px);
+    height: 100%;
+    background: #232323;
+}
+
+.page {
+    display: none;
+    &.active {display: block}
+}