├── .editorconfig ├── .gitignore ├── .vscode ├── extensions.json ├── launch.json └── tasks.json ├── ADR-Template.md ├── CODE_OF_CONDUCT.md ├── README.md ├── angular.json ├── libs └── shared │ └── types │ └── alias.ts ├── main.js ├── package-lock.json ├── package.json ├── roadmap.md ├── src ├── app │ ├── app-routing.module.ts │ ├── app.component.css │ ├── app.component.html │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.module.ts │ ├── home │ │ ├── home.component.css │ │ ├── home.component.html │ │ ├── home.component.spec.ts │ │ └── home.component.ts │ ├── notification.service.spec.ts │ ├── notification.service.ts │ ├── search.pipe.spec.ts │ ├── search.pipe.ts │ ├── settings │ │ ├── settings.component.css │ │ ├── settings.component.html │ │ ├── settings.component.spec.ts │ │ └── settings.component.ts │ └── shared │ │ └── add-new-alias │ │ ├── add-new-alias.component.css │ │ ├── add-new-alias.component.html │ │ ├── add-new-alias.component.spec.ts │ │ └── add-new-alias.component.ts ├── assets │ ├── .gitkeep │ └── icons │ │ ├── add.svg │ │ ├── back.svg │ │ ├── browser.svg │ │ ├── copy.svg │ │ ├── delete.svg │ │ ├── export.svg │ │ ├── import.svg │ │ ├── settings.svg │ │ ├── share.svg │ │ └── shell.svg ├── favicon.ico ├── index.html ├── main.ts └── styles.css ├── tailwind.config.js ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | /release 9 | 10 | # Node 11 | /node_modules 12 | npm-debug.log 13 | yarn-error.log 14 | 15 | # IDEs and editors 16 | .idea/ 17 | .project 18 | .classpath 19 | .c9/ 20 | *.launch 21 | .settings/ 22 | *.sublime-workspace 23 | 24 | # Visual Studio Code 25 | .vscode/* 26 | !.vscode/settings.json 27 | !.vscode/tasks.json 28 | !.vscode/launch.json 29 | !.vscode/extensions.json 30 | .history/* 31 | 32 | # Miscellaneous 33 | /.angular/cache 34 | .sass-cache/ 35 | /connect.lock 36 | /coverage 37 | /libpeerconnection.log 38 | testem.log 39 | /typings 40 | 41 | # System files 42 | .DS_Store 43 | Thumbs.db 44 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 3 | "recommendations": ["angular.ng-template"] 4 | } 5 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 3 | "version": "0.2.0", 4 | "configurations": [ 5 | { 6 | "name": "ng serve", 7 | "type": "pwa-chrome", 8 | "request": "launch", 9 | "preLaunchTask": "npm: start", 10 | "url": "http://localhost:4200/" 11 | }, 12 | { 13 | "name": "ng test", 14 | "type": "chrome", 15 | "request": "launch", 16 | "preLaunchTask": "npm: test", 17 | "url": "http://localhost:9876/debug.html" 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 3 | "version": "2.0.0", 4 | "tasks": [ 5 | { 6 | "type": "npm", 7 | "script": "start", 8 | "isBackground": true, 9 | "problemMatcher": { 10 | "owner": "typescript", 11 | "pattern": "$tsc", 12 | "background": { 13 | "activeOnStart": true, 14 | "beginsPattern": { 15 | "regexp": "(.*?)" 16 | }, 17 | "endsPattern": { 18 | "regexp": "bundle generation complete" 19 | } 20 | } 21 | } 22 | }, 23 | { 24 | "type": "npm", 25 | "script": "test", 26 | "isBackground": true, 27 | "problemMatcher": { 28 | "owner": "typescript", 29 | "pattern": "$tsc", 30 | "background": { 31 | "activeOnStart": true, 32 | "beginsPattern": { 33 | "regexp": "(.*?)" 34 | }, 35 | "endsPattern": { 36 | "regexp": "bundle generation complete" 37 | } 38 | } 39 | } 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /ADR-Template.md: -------------------------------------------------------------------------------- 1 | # Architecture Decision Record (ADR) - [Decision Title] 2 | 3 | **Project**: [Project Name] 4 | **ADR Number**: [ADR Number] 5 | **Date**: [Date] 6 | **Author**: [Author's Name] 7 | 8 | ## Context 9 | 10 | [Provide a brief description of the context and the architectural decision that needs to be made.] 11 | 12 | ## Stakeholders 13 | 14 | [List the primary stakeholders who are involved or interested in this decision.] 15 | 16 | ## Decision 17 | 18 | [Describe the decision that has been made regarding the architectural aspect. This should be a concise statement of the chosen option.] 19 | 20 | ## Rationale 21 | 22 | [Explain the reasons behind the decision. Include factors, benefits, drawbacks, and considerations that influenced the choice.] 23 | 24 | ## Implications 25 | 26 | [List the potential consequences or implications of this decision, including risks, challenges, and future considerations.] 27 | 28 | ## Implementation Plan 29 | 30 | [Outline the plan for implementing this decision, including tasks, timelines, and milestones if applicable.] 31 | 32 | ## Monitoring and Review 33 | 34 | [Describe how the impact of this decision will be monitored over time, and specify any criteria for evaluating its success.] 35 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We, as contributors and maintainers of the "sslash" project, pledge to make participation in our community a harassment-free and inclusive experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | - Using welcoming and inclusive language. 12 | - Being respectful of differing viewpoints and experiences. 13 | - Gracefully accepting constructive criticism. 14 | - Focusing on what is best for the community. 15 | - Showing empathy towards other community members. 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | - The use of sexualized language or imagery and unwelcome sexual attention or advances. 20 | - Trolling, insulting/derogatory comments, and personal or political attacks. 21 | - Public or private harassment. 22 | - Publishing others' private information, such as a physical or electronic address, without explicit permission. 23 | - Other conduct which could reasonably be considered inappropriate in a professional setting. 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned with this Code of Conduct or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project email address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of the project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at ishakgonulgb@gmail.com or 1sh4kg0nu1@gmail.com . All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org/), version 2.0, available at [https://www.contributor-covenant.org/version/2/0/code_of_conduct.html](https://www.contributor-covenant.org/version/2/0/code_of_conduct.html). 44 | 45 | For answers to common questions about this code of conduct, see [https://www.contributor-covenant.org/faq](https://www.contributor-covenant.org/faq). 46 | 47 | --- 48 | 49 | Please ensure that you have read and understood our Code of Conduct, and we encourage all contributors to adhere to these guidelines in order to create a welcoming and inclusive community around the "sslash" project. 50 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # sslash 2 | 3 | ![sslash Screenshot](https://github.com/shakg/sslash/assets/76657662/c184379b-caaf-4499-8b77-779930b37fce) 4 | 5 | sslash is a visual text alias tool built using Electron and Angular. It allows you to store and manage text aliases, which can be your favorite links, texts, or any other content you need quick access to. With the implementation of a central backend, sslash enables users and teams to easily share links, shell commands, and predefined texts. 6 | 7 | ## Tech Stack 8 | 9 | - **Electron**: Electron is used to build cross-platform desktop applications using web technologies. 10 | - **Angular**: The frontend of the application is built with Angular, a popular web application framework. 11 | - **Node.js**: Node.js is used for server-side scripting and for handling the backend of the application. 12 | - **Original-fs**: The original-fs library is used for file system operations. 13 | 14 | ## Project Capabilities 15 | 16 | - **Add Text-Based Aliases**: Create and store text-based aliases for quick access to your favorite links, texts, and more. 17 | - **View Aliases**: See your stored text aliases, making it easy to manage your content. 18 | - **Edit and Delete Aliases**: Modify and remove aliases to keep your collection up to date. 19 | - **Quick Access**: Use `CTRL + SPACE` to bring the app to focus and search for your aliases. 20 | - **Fuzzy Finding Search**: Quickly find your aliases with fuzzy search functionality. 21 | - **Copy to Clipboard**: Easily copy the content of an alias to your clipboard. 22 | - **Open in Browser**: Open links directly in your web browser. 23 | - **Import/Export**: Backup and share your aliases in JSON format. 24 | 25 | ## How to Contribute 26 | 27 | We welcome contributions from the open-source community to make sslash even better. Here's how you can contribute: 28 | 29 | 1. **Fork this repository**. 30 | 31 | 2. **Clone your forked repository** to your local machine. 32 | 33 | 3. **Create a new branch** for your changes: `git checkout -b feature/your-feature-name`. 34 | 35 | 4. **Make your changes** and test them. 36 | 37 | 5. **Commit your changes**: `git commit -m "Added feature/bug fix"`. 38 | 39 | 6. **Push your changes** to your forked repository: `git push origin feature/your-feature-name`. 40 | 41 | 7. **Open a pull request (PR)** to this repository, and describe your changes and improvements. 42 | 43 | 8. **Your PR will be reviewed**, and if everything looks good, it will be merged into the main branch. 44 | 45 | 9. **Celebrate your contribution** to sslash! 46 | 47 | ## Code of Conduct 48 | 49 | Please note that we have a [Code of Conduct](CODE_OF_CONDUCT.md) in place to ensure a welcoming and inclusive environment for all contributors and users. 50 | 51 | ## Roadmap 52 | 53 | For a detailed roadmap of the project, please see the [roadmap.md](roadmap.md) file. 54 | 55 | Feel free to contribute to the project and stay tuned for exciting developments! 56 | 57 | ## License 58 | 59 | This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details. 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "frontend": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/frontend", 17 | "index": "src/index.html", 18 | "main": "src/main.ts", 19 | "polyfills": [ 20 | "zone.js" 21 | ], 22 | "tsConfig": "tsconfig.app.json", 23 | "assets": [ 24 | "src/favicon.ico", 25 | "src/assets" 26 | ], 27 | "styles": [ 28 | "src/styles.css" 29 | ], 30 | "scripts": [] 31 | }, 32 | "configurations": { 33 | "production": { 34 | "budgets": [ 35 | { 36 | "type": "initial", 37 | "maximumWarning": "500kb", 38 | "maximumError": "1mb" 39 | }, 40 | { 41 | "type": "anyComponentStyle", 42 | "maximumWarning": "2kb", 43 | "maximumError": "4kb" 44 | } 45 | ], 46 | "outputHashing": "all" 47 | }, 48 | "development": { 49 | "buildOptimizer": false, 50 | "optimization": false, 51 | "vendorChunk": true, 52 | "extractLicenses": false, 53 | "sourceMap": true, 54 | "namedChunks": true 55 | } 56 | }, 57 | "defaultConfiguration": "production" 58 | }, 59 | "serve": { 60 | "builder": "@angular-devkit/build-angular:dev-server", 61 | "configurations": { 62 | "production": { 63 | "browserTarget": "frontend:build:production" 64 | }, 65 | "development": { 66 | "browserTarget": "frontend:build:development" 67 | } 68 | }, 69 | "defaultConfiguration": "development" 70 | }, 71 | "extract-i18n": { 72 | "builder": "@angular-devkit/build-angular:extract-i18n", 73 | "options": { 74 | "browserTarget": "frontend:build" 75 | } 76 | }, 77 | "test": { 78 | "builder": "@angular-devkit/build-angular:karma", 79 | "options": { 80 | "polyfills": [ 81 | "zone.js", 82 | "zone.js/testing" 83 | ], 84 | "tsConfig": "tsconfig.spec.json", 85 | "assets": [ 86 | "src/favicon.ico", 87 | "src/assets" 88 | ], 89 | "styles": [ 90 | "src/styles.css" 91 | ], 92 | "scripts": [] 93 | } 94 | } 95 | } 96 | } 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /libs/shared/types/alias.ts: -------------------------------------------------------------------------------- 1 | export type Alias = { 2 | name: string, 3 | text: string 4 | }; -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | const { app, BrowserWindow, globalShortcut, Menu, ipcMain, shell } = require('electron'); 2 | const { writeFile, readFile } = require('original-fs'); 3 | 4 | 5 | // Keep a global reference of the window object, if you don't, the window will 6 | // be closed automatically when the JavaScript object is garbage collected. 7 | let win 8 | 9 | function createWindow() { 10 | // Create the browser window. 11 | win = new BrowserWindow({ 12 | width: 800, 13 | height: 600, 14 | webPreferences: { 15 | nodeIntegration: true, 16 | contextIsolation: false 17 | }, 18 | resizable: false, // Prevent resizing 19 | fullscreenable: false // Prevent full screen mode 20 | }) 21 | 22 | // and load the index.html of the app. 23 | win.loadFile('./dist/frontend/index.html') 24 | 25 | // Open the DevTools. 26 | // win.webContents.openDevTools() 27 | 28 | // Emitted when the window is closed. 29 | win.on('closed', () => { 30 | // Dereference the window object, usually you would store windows 31 | // in an array if your app supports multi windows, this is the time 32 | // when you should delete the corresponding element. 33 | win = null 34 | }); 35 | 36 | Menu.setApplicationMenu(null); 37 | 38 | globalShortcut.register('CommandOrControl+Space', () => { 39 | if (win) { 40 | if (win.isMinimized()) { 41 | // Restore the window if it's minimized 42 | win.restore(); 43 | } 44 | // Bring the window to the front 45 | win.focus(); 46 | 47 | win.webContents.executeJavaScript(` 48 | if(!searchBox){ 49 | const searchBox = document.getElementById('searchBox'); 50 | } 51 | searchBox.focus(); 52 | `); 53 | } 54 | }); 55 | 56 | 57 | ipcMain.on('open-in-browser', (event, data) => { 58 | shell.openExternal(data) 59 | }); 60 | 61 | 62 | ipcMain.on('export-aliases', (event, data) => { 63 | 64 | writeFile(`${Date.now()}-aliases.json`, JSON.stringify(data), (err) => { 65 | if (err) throw err; 66 | console.log('The file has been saved!'); 67 | }) 68 | }) 69 | 70 | ipcMain.on('import-aliases', (event, _data) => { 71 | 72 | readFile(_data, (err, data) => { 73 | console.log("🚀 ~ file: main.js:75 ~ readFile ~ data:", data) 74 | win.webContents.send('import-aliases-response', data.toString()); 75 | }) 76 | }) 77 | } 78 | 79 | // This method will be called when Electron has finished 80 | // initialization and is ready to create browser windows. 81 | // Some APIs can only be used after this event occurs. 82 | app.on('ready', createWindow) 83 | 84 | // Quit when all windows are closed. 85 | app.on('window-all-closed', () => { 86 | // On macOS it is common for applications and their menu bar 87 | // to stay active until the user quits explicitly with Cmd + Q 88 | if (process.platform !== 'darwin') { 89 | app.quit() 90 | } 91 | }) 92 | 93 | app.on('activate', () => { 94 | // On macOS it's common to re-create a window in the app when the 95 | // dock icon is clicked and there are no other windows open. 96 | if (win === null) { 97 | createWindow() 98 | } 99 | }) 100 | 101 | // In this file you can include the rest of your app's specific main process 102 | // code. You can also put them in separate files and require them here. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sslash", 3 | "version": "0.0.4", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "watch": "ng build --watch --configuration development", 9 | "test": "ng test", 10 | "electron": "electron .", 11 | "release": "npm run build && electron-builder" 12 | }, 13 | "build": { 14 | "productName": "sslash", 15 | "directories": { 16 | "output": "release" 17 | }, 18 | "win": { 19 | "target": "nsis" 20 | }, 21 | "linux": { 22 | "target": "AppImage" 23 | } 24 | }, 25 | "main": "main.js", 26 | "private": true, 27 | "dependencies": { 28 | "@angular/animations": "^15.2.0", 29 | "@angular/common": "^15.2.0", 30 | "@angular/compiler": "^15.2.0", 31 | "@angular/core": "^15.2.0", 32 | "@angular/forms": "^15.2.0", 33 | "@angular/platform-browser": "^15.2.0", 34 | "@angular/platform-browser-dynamic": "^15.2.0", 35 | "@angular/router": "^15.2.0", 36 | "@types/electron": "^1.6.10", 37 | "ngx-clipboard": "^16.0.0", 38 | "rxjs": "~7.8.0", 39 | "tslib": "^2.3.0", 40 | "zone.js": "~0.12.0" 41 | }, 42 | "devDependencies": { 43 | "@angular-devkit/build-angular": "^15.2.5", 44 | "@angular/cli": "~15.2.5", 45 | "@angular/compiler-cli": "^15.2.0", 46 | "@types/jasmine": "~4.3.0", 47 | "autoprefixer": "^10.4.16", 48 | "electron": "^26.2.2", 49 | "electron-builder": "^24.6.4", 50 | "jasmine-core": "~4.5.0", 51 | "karma": "~6.4.0", 52 | "karma-chrome-launcher": "~3.1.0", 53 | "karma-coverage": "~2.2.0", 54 | "karma-jasmine": "~5.1.0", 55 | "karma-jasmine-html-reporter": "~2.0.0", 56 | "postcss": "^8.4.30", 57 | "tailwindcss": "^3.3.3", 58 | "typescript": "~4.9.4" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /roadmap.md: -------------------------------------------------------------------------------- 1 | ### Short term roadmap 2 | - [ ] Add contribution docs. 3 | - [x] ~Make Export import functions work~ 4 | - [x] ~Test on linux and mac~ 5 | - [x] ~Edit aliases~ 6 | - [x] ~Write types in angular side~ 7 | - [x] ~Add backend frontend communication~ 8 | - [ ] Add central backend to share across teams and/or other users 9 | - [ ] add sign in / auth 10 | 11 | ### Mid / long term roadmap 12 | - [ ] Publish as a browser plugin to use it like a proper text expander 13 | - [ ] Add description to aliases 14 | - [ ] Add LLM to ask question like `how to find Q2 performance excel?` and find relevant links. 15 | -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | import { AddNewAliasComponent } from './shared/add-new-alias/add-new-alias.component'; 4 | import { HomeComponent } from './home/home.component'; 5 | import { SettingsComponent } from './settings/settings.component'; 6 | 7 | const routes: Routes = [ 8 | { path: '', component: HomeComponent }, 9 | { path: 'new-alias/:name', component: AddNewAliasComponent }, 10 | { path: 'settings', component: SettingsComponent }, 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forRoot(routes)], 15 | exports: [RouterModule] 16 | }) 17 | export class AppRoutingModule { } 18 | -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shakg/sslash/c2a6e11885cb6112afdd5a4c20fa5dfe35692908/src/app/app.component.css -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | import { AppComponent } from './app.component'; 4 | 5 | describe('AppComponent', () => { 6 | beforeEach(async () => { 7 | await TestBed.configureTestingModule({ 8 | imports: [ 9 | RouterTestingModule 10 | ], 11 | declarations: [ 12 | AppComponent 13 | ], 14 | }).compileComponents(); 15 | }); 16 | 17 | it('should create the app', () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.componentInstance; 20 | expect(app).toBeTruthy(); 21 | }); 22 | 23 | it(`should have as title 'frontend'`, () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | const app = fixture.componentInstance; 26 | expect(app.title).toEqual('frontend'); 27 | }); 28 | 29 | it('should render title', () => { 30 | const fixture = TestBed.createComponent(AppComponent); 31 | fixture.detectChanges(); 32 | const compiled = fixture.nativeElement as HTMLElement; 33 | expect(compiled.querySelector('.content span')?.textContent).toContain('frontend app is running!'); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'sslash'; 10 | } 11 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | import { SearchPipe } from './search.pipe'; 7 | import { FormsModule } from '@angular/forms'; 8 | import { AddNewAliasComponent } from './shared/add-new-alias/add-new-alias.component'; 9 | import { HomeComponent } from './home/home.component'; 10 | import { ClipboardModule } from 'ngx-clipboard'; 11 | import { SettingsComponent } from './settings/settings.component'; 12 | 13 | @NgModule({ 14 | declarations: [ 15 | AppComponent, 16 | SearchPipe, 17 | AddNewAliasComponent, 18 | HomeComponent, 19 | SettingsComponent 20 | ], 21 | imports: [ 22 | BrowserModule, 23 | AppRoutingModule, 24 | FormsModule, 25 | ClipboardModule 26 | ], 27 | providers: [], 28 | bootstrap: [AppComponent] 29 | }) 30 | export class AppModule { } 31 | -------------------------------------------------------------------------------- /src/app/home/home.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shakg/sslash/c2a6e11885cb6112afdd5a4c20fa5dfe35692908/src/app/home/home.component.css -------------------------------------------------------------------------------- /src/app/home/home.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 5 | 6 |
7 | 8 | 9 |
10 |
12 |

{{alias.name}}

13 | 14 |

{{alias.text}}

15 | 16 |
17 |
18 | 21 | 22 | 25 | 26 | 29 |
30 | 31 |
32 | 33 | 34 |
35 | 36 | 37 |
38 |
39 |
40 |
-------------------------------------------------------------------------------- /src/app/home/home.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HomeComponent } from './home.component'; 4 | 5 | describe('HomeComponent', () => { 6 | let component: HomeComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ HomeComponent ] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(HomeComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { IpcRenderer } from 'electron'; 3 | import { NotificationService } from '../notification.service'; 4 | import { Alias } from '../../../libs/shared/types/alias'; 5 | 6 | 7 | @Component({ 8 | selector: 'app-home', 9 | templateUrl: './home.component.html', 10 | styleUrls: ['./home.component.css'] 11 | }) 12 | export class HomeComponent { 13 | public searchText: string = ""; 14 | public aliases: Array = []; 15 | 16 | // TODO: write proper types 17 | public copySuccess: any = {}; 18 | private _ipc: IpcRenderer | undefined; 19 | 20 | 21 | constructor(private notificationService:NotificationService) { 22 | if (window.require) { 23 | try { 24 | this._ipc = window.require('electron').ipcRenderer; 25 | } catch (e) { 26 | throw e; 27 | } 28 | } else { 29 | console.warn('Electron\'s IPC was not loaded'); 30 | } 31 | this.aliases = this.getAlisesFromLocalStorage(); 32 | } 33 | 34 | getAlisesFromLocalStorage() { 35 | const _aliases = localStorage.getItem("aliases") 36 | if (_aliases) { 37 | return JSON.parse(_aliases); 38 | } 39 | } 40 | confirmCopyToClipboard(alias: Alias) { 41 | this.notificationService.info("Copied text!"); 42 | navigator.clipboard.readText().then((clipboardText: string) => { 43 | if (alias.text === clipboardText) { 44 | this.copySuccess[alias.name] = true; 45 | setTimeout(() => { 46 | this.copySuccess[alias.name] = false; 47 | }, 1500) 48 | } else { 49 | this.copySuccess[alias.name] = false; 50 | } 51 | }) 52 | } 53 | 54 | deleteAlias(alias: Alias) { 55 | try { 56 | const aliases = this.getAlisesFromLocalStorage(); 57 | const newAliases = aliases.filter((x:Alias) => x.name !== alias.name); 58 | localStorage.setItem("aliases", JSON.stringify(newAliases)); 59 | this.aliases = this.getAlisesFromLocalStorage(); 60 | this.notificationService.info("Deleted alias"); 61 | } catch (error) { 62 | this.notificationService.error("Something bad happened during delete operation! Please try again.") 63 | } 64 | } 65 | 66 | openInBrowser(alias:Alias){ 67 | const urlRegex = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i; 68 | if(urlRegex.test(alias.text)){ 69 | this._ipc?.send('open-in-browser', alias.text); 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /src/app/notification.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { NotificationService } from './notification.service'; 4 | 5 | describe('NotificationService', () => { 6 | let service: NotificationService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(NotificationService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /src/app/notification.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root' 5 | }) 6 | export class NotificationService { 7 | 8 | private _notificationElement:HTMLElement; 9 | constructor() { 10 | const _body:HTMLElement = document.getElementsByTagName("body")[0]; 11 | 12 | this._notificationElement = document.createElement("div"); 13 | this._notificationElement.style.zIndex = "99"; 14 | this._notificationElement.style.opacity = "0"; 15 | this._notificationElement.style.bottom = "32px"; 16 | this._notificationElement.style.left = "20%"; 17 | this._notificationElement.style.width = "60%"; 18 | this._notificationElement.style.padding = "5px 25px"; 19 | this._notificationElement.style.position = "fixed"; 20 | this._notificationElement.style.color = "white" 21 | this._notificationElement.style.backgroundColor = "#60a5fa" 22 | this._notificationElement.style.borderRadius = "5px" 23 | this._notificationElement.style.transition = "opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1)"; 24 | 25 | _body.appendChild(this._notificationElement) 26 | } 27 | 28 | info(infoMessage:string){ 29 | this._notificationElement.innerText = infoMessage; 30 | this._notificationElement.style.opacity = "1"; 31 | setTimeout(()=>{ 32 | this._notificationElement.style.opacity = "0"; 33 | },2500) 34 | 35 | } 36 | 37 | error(errorMessage:string){ 38 | this._notificationElement.innerText = errorMessage; 39 | this._notificationElement.style.backgroundColor = "#f87171"; 40 | this._notificationElement.style.opacity = "1"; 41 | setTimeout(()=>{ 42 | this._notificationElement.style.opacity = "0"; 43 | },2500) 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/app/search.pipe.spec.ts: -------------------------------------------------------------------------------- 1 | import { SearchPipe } from './search.pipe'; 2 | 3 | describe('SearchPipe', () => { 4 | it('create an instance', () => { 5 | const pipe = new SearchPipe(); 6 | expect(pipe).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /src/app/search.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'search' 5 | }) 6 | export class SearchPipe implements PipeTransform { 7 | 8 | transform(items: any[], searchText: string): any[] { 9 | if (!items) return []; 10 | if (!searchText) return items; 11 | 12 | searchText = searchText.toLowerCase(); 13 | 14 | return items.filter((item) => { 15 | // Customize this logic based on your object structure 16 | // In this example, we assume the object has a 'name' property to search in 17 | return item.name.toLowerCase().includes(searchText) || item.text.toLowerCase().includes(searchText); 18 | }); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/app/settings/settings.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shakg/sslash/c2a6e11885cb6112afdd5a4c20fa5dfe35692908/src/app/settings/settings.component.css -------------------------------------------------------------------------------- /src/app/settings/settings.component.html: -------------------------------------------------------------------------------- 1 |
2 | 6 | 9 | 12 |
13 | 14 | 17 |
18 | 19 |
20 | -------------------------------------------------------------------------------- /src/app/settings/settings.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SettingsComponent } from './settings.component'; 4 | 5 | describe('SettingsComponent', () => { 6 | let component: SettingsComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ SettingsComponent ] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(SettingsComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /src/app/settings/settings.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Alias } from '../../../libs/shared/types/alias'; 3 | import { NotificationService } from '../notification.service'; 4 | import { IpcRenderer } from 'electron'; 5 | 6 | @Component({ 7 | selector: 'app-settings', 8 | templateUrl: './settings.component.html', 9 | styleUrls: ['./settings.component.css'] 10 | }) 11 | export class SettingsComponent implements OnInit { 12 | private _ipc: IpcRenderer | undefined; 13 | 14 | ngOnInit(){ 15 | this._ipc?.on("import-aliases-response", (_,aliases:any)=>{ 16 | localStorage.setItem("aliases", JSON.stringify(JSON.parse(aliases))); 17 | }) 18 | } 19 | 20 | constructor(private noficationService:NotificationService){ 21 | if (window.require) { 22 | try { 23 | this._ipc = window.require('electron').ipcRenderer; 24 | } catch (e) { 25 | throw e; 26 | } 27 | } else { 28 | console.warn('Electron\'s IPC was not loaded'); 29 | } 30 | } 31 | export(){ 32 | const aliases:Array = JSON.parse(localStorage.getItem("aliases") || ""); 33 | if(aliases.length < 1){ 34 | this.noficationService.error("There is no alias to export!"); 35 | } 36 | 37 | this._ipc?.send('export-aliases', aliases); 38 | this.noficationService.info(`File saved to ${Date.now()}-aliases.json`) 39 | } 40 | 41 | import(event:any){ 42 | const selectedFile = event.target.files[0]; 43 | 44 | if (selectedFile) { 45 | const filePath = selectedFile.path; // Access the file path here 46 | this._ipc?.send("import-aliases", filePath) 47 | }else{ 48 | this.noficationService.error("Error happened while selecting file!") 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/app/shared/add-new-alias/add-new-alias.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shakg/sslash/c2a6e11885cb6112afdd5a4c20fa5dfe35692908/src/app/shared/add-new-alias/add-new-alias.component.css -------------------------------------------------------------------------------- /src/app/shared/add-new-alias/add-new-alias.component.html: -------------------------------------------------------------------------------- 1 |
2 | 6 |

Name

7 | 8 |

Text

9 | 10 | 11 | 14 |
-------------------------------------------------------------------------------- /src/app/shared/add-new-alias/add-new-alias.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { AddNewAliasComponent } from './add-new-alias.component'; 4 | 5 | describe('AddNewAliasComponent', () => { 6 | let component: AddNewAliasComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ AddNewAliasComponent ] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(AddNewAliasComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /src/app/shared/add-new-alias/add-new-alias.component.ts: -------------------------------------------------------------------------------- 1 | import { Component,OnInit } from '@angular/core'; 2 | import { Alias } from '../../../../libs/shared/types/alias'; 3 | import { ActivatedRoute } from '@angular/router'; 4 | import { NotificationService } from '../../notification.service'; 5 | 6 | @Component({ 7 | selector: 'app-add-new-alias', 8 | templateUrl: './add-new-alias.component.html', 9 | styleUrls: ['./add-new-alias.component.css'] 10 | }) 11 | export class AddNewAliasComponent implements OnInit { 12 | 13 | public name?:string = ""; 14 | public text?:string = ""; 15 | 16 | constructor(private route:ActivatedRoute, private notificationService:NotificationService){} 17 | 18 | ngOnInit(){ 19 | this.route.params.subscribe(params => { 20 | const _name = params['name']; 21 | console.log("🚀 ~ file: add-new-alias.component.ts:20 ~ AddNewAliasComponent ~ ngOnInit ~ _name:", _name) 22 | const aliases:Array = JSON.parse(localStorage.getItem("aliases")!); 23 | console.log("🚀 ~ file: add-new-alias.component.ts:22 ~ AddNewAliasComponent ~ ngOnInit ~ aliases:", typeof aliases) 24 | if(_name != undefined || _name !== ""){ 25 | this.name = _name; 26 | this.text = aliases.find(a=>a.name === _name)?.text; 27 | console.log("🚀 ~ file: add-new-alias.component.ts:26 ~ AddNewAliasComponent ~ ngOnInit ~ this.text:", this.text) 28 | } 29 | }); 30 | } 31 | 32 | saveNewAlias() { 33 | if (!this.name || !this.text) { 34 | return; 35 | } 36 | 37 | const alias: Alias = { 38 | name: this.name, 39 | text: this.text 40 | }; 41 | 42 | let aliases: Alias[] = JSON.parse(localStorage.getItem("aliases") || "[]"); 43 | 44 | const existingAlias = aliases.find(_alias => _alias.name === this.name); 45 | 46 | if (existingAlias) { 47 | existingAlias.text = this.text; 48 | this.notificationService.info(`Alias for "${this.name}" has been overwritten!`); 49 | } else { 50 | aliases.push(alias); 51 | this.notificationService.info(`Alias for "${this.name}" has been saved!`); 52 | } 53 | 54 | localStorage.setItem("aliases", JSON.stringify(aliases)); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shakg/sslash/c2a6e11885cb6112afdd5a4c20fa5dfe35692908/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/assets/icons/add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icons/back.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icons/browser.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icons/copy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icons/delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icons/export.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/icons/import.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/icons/settings.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/icons/share.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icons/shell.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shakg/sslash/c2a6e11885cb6112afdd5a4c20fa5dfe35692908/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | sslash 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | 3 | import { AppModule } from './app/app.module'; 4 | 5 | 6 | platformBrowserDynamic().bootstrapModule(AppModule) 7 | .catch(err => console.error(err)); 8 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @tailwind base; 3 | @tailwind components; 4 | @tailwind utilities; 5 | 6 | /* Hide scrollbar for Chrome, Safari and Opera */ 7 | body::-webkit-scrollbar { 8 | display: none; 9 | } 10 | 11 | /* Hide scrollbar for IE, Edge and Firefox */ 12 | body { 13 | -ms-overflow-style: none; /* IE and Edge */ 14 | scrollbar-width: none; /* Firefox */ 15 | } -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./src/**/*.{html,ts}", 5 | ], 6 | theme: { 7 | extend: { 8 | fontFamily: { 9 | ubuntu: ['Ubuntu', 'sans'], 10 | }, 11 | }, 12 | }, 13 | plugins: [], 14 | } 15 | 16 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "baseUrl": "./", 6 | "outDir": "./dist/out-tsc", 7 | "forceConsistentCasingInFileNames": true, 8 | "strict": true, 9 | "noImplicitOverride": true, 10 | "noPropertyAccessFromIndexSignature": true, 11 | "noImplicitReturns": true, 12 | "noFallthroughCasesInSwitch": true, 13 | "sourceMap": true, 14 | "declaration": false, 15 | "downlevelIteration": true, 16 | "experimentalDecorators": true, 17 | "moduleResolution": "node", 18 | "importHelpers": true, 19 | "target": "ES2022", 20 | "module": "ES2022", 21 | "useDefineForClassFields": false, 22 | "lib": [ 23 | "ES2022", 24 | "dom" 25 | ] 26 | }, 27 | "angularCompilerOptions": { 28 | "enableI18nLegacyMessageIdFormat": false, 29 | "strictInjectionParameters": true, 30 | "strictInputAccessModifiers": true, 31 | "strictTemplates": true 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "include": [ 11 | "src/**/*.spec.ts", 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | --------------------------------------------------------------------------------