Skip to content

Commit

Permalink
Merge branch 'ibrahemesam-main'
Browse files Browse the repository at this point in the history
  • Loading branch information
@sadmanca
sadmanca committed May 4, 2024
2 parents d34dc9a + 75c1ffd commit dad7b89
Show file tree
Hide file tree
Showing 9 changed files with 1,220 additions and 699 deletions.
30 changes: 24 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<div id="README" hidden></div>
<h1 align="center">~: repo-view :~</h1>
<p align="center">
<img src="https://github.com/ibrahemesam/repo-view/blob/main/asset/favicon.svg?raw=true" width="30%"/>
Expand Down Expand Up @@ -29,7 +30,7 @@ there is a website called <a href="https://gitfront.io" target="_blank">GitFront
- your GitFront repo does not get directly synchronized with GitHub
</pre>
<pre>
my <a href="#">repo-view</a> do exactly the same except that:
my <a href="#">repo-view</a> does exactly the same except that:
- it is a static web page (no backend) -> your code exists only on GitHub. it does not goto any 3rd party server
- it uses official GitHub REST API, it gets files directly from GitHub
- no problem if repo is larger than 100 MB. you still can preview it
Expand All @@ -41,6 +42,8 @@ my <a href="#">repo-view</a> do exactly the same except that:
</p>
<hr>
<h1>Usage :-</h1>
<details>
<summary>Manual Usage [deprecated]</summary>
<pre>
it is a static web page. so, configuration is gonna be passed as url params.
<h2>params :-</h2>
Expand All @@ -67,10 +70,28 @@ it is a static web page. so, configuration is gonna be passed as url params.
so, they wont get too excited about that token.<br>
<strong>so, </strong>the url would be: https://ibrahemesam.github.io/repo-view/?token=&lt;token&gt;&repo=&lt;repo-name&gt;&owner=&lt;owner-username&gt;
</pre>
<h1><a href="https://bit.ly/repo-view-demo-till-jan-2024" target="_blank">DEMO</a> :-</h1>
<hr/>
<h2>New way of usage:-</h2>
</details>
<pre>
<h3>First, go to this page 👉 <a href="https://ibrahemesam.github.io/repo-view/?new">Create repo-view URL</a></h3>
<strong>Then, 👇👇👇👇👇</strong>
<p align="center">
<img src="https://github.com/ibrahemesam/repo-view/blob/main/asset/usage.png?raw=true" width="80%"/>
</p>
</pre>
<pre>
<strong>NB:</strong>
The resulting repo-view url has its token as encrypted string.
- Why being encrypted?
= Because when putting the url in a github.io page (or anywhere on Github),
if the token is not encrypted, Github detects it and think it exists by mistake as a vulnerability.
So, Github immediately disables the token, and the repo-view url is disabled as well.
</pre>
<h1><a href="https://ibrahemesam.github.io/repo-view/?token=6769746875625f7061745f3131414b50464d344930735975314e7250706b7177415f3342516c5330436e5172536c324f6364694b47396e3368474b46534f53304f3470785a51687a45434f6f7151574d4532374341567a747745304a49_enc&owner=ibrahemesam&repo=repo-view-demo" target="_blank">DEMO</a> :-</h1>
<pre>
this demo repo is <a href="https://github.com/ibrahemesam/repo-view-demo">a private github repository</a>. if you visit it, you get 404 because it is <strong>Private</strong>.
NB: this DEMO url EXPIRES on 17 Jan 2024. (this expiration is related to GitHub's fine-gained token settings)
NB: this DEMO url EXPIRES on 12 May 2024. (this expiration is related to GitHub's fine-gained token settings)
</pre>
<pre><strong>NB: </strong> public repos can also be viewed</pre>
<hr>
Expand Down Expand Up @@ -103,6 +124,3 @@ NB: this DEMO url EXPIRES on 17 Jan 2024. (this expiration is related to GitHub'
This project is provided "AS IS" with absolutely "NO WARRANTY".
If you gonna use its source-code somewhere: make a clear credit refering to <a href="https://github.com/ibrahemesam/repo-view" target="_blank">this repo-view repository</a>.
</pre>
<pre>
- [ ] FIXME: when putting the CV in github.io page, github detects btoa-encoded token and think it exists by mistake as a vulnerability so token and URLs are immediately disabled. so => change encoding to something that github can't detect. also, mintain backward compatibility
</pre>
1 change: 1 addition & 0 deletions asset/paste.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added asset/usage.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
171 changes: 163 additions & 8 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ body {
overflow: auto;
}

.container {
height: 100vh !important;
}

img.file {
content: url('../asset/file.svg');
}
Expand Down Expand Up @@ -76,14 +80,16 @@ body:has(ul.tree[hidden]) .blob-view .content {
}

div.footer {
transform: translateY(-50%);
position: fixed;
bottom: 2px;
}

body:has(#preview-div[hidden]) div.footer,
body:has(ul.tree[hidden]) div.footer
body:has(#preview-div[hidden]) div.footer
/*body:has(ul.tree[hidden]) div.footer*/
{
position: fixed;
bottom: 1em;
bottom: 8px;
/* transform: translateY(-50%); */
}


Expand All @@ -95,7 +101,8 @@ body:has(ul.tree[hidden]) div.footer
transform: translate(-50%, -100%);
}
body:has(ul.tree:not([hidden])) div#main-loader-spinner-div,
body:has(#preview-div:not([hidden])) div#main-loader-spinner-div
body:has(#preview-div:not([hidden])) div#main-loader-spinner-div,
body:has(.create-url:not([hidden])) div#main-loader-spinner-div
{
display: none;
}
Expand All @@ -108,11 +115,8 @@ body:has(ul.tree[hidden]):has(#preview-div[hidden]):has(.container div.location[
transform: translateX(-50%);
margin: auto;
padding: 10px;
border: solid;
outline: none;
user-select: none;
border-radius: 5px;
border-color: cornflowerblue;
height: fit-content;
width: max-content;
}
Expand Down Expand Up @@ -161,3 +165,154 @@ div#no-internet-div {
font-weight: bold;
text-indent: 35px;
}

.footer > .made-with-love {
border: solid;
border-radius: 5px;
border-color: cornflowerblue;
outline: inherit;
user-select: inherit;
width: fit-content;
margin: auto;
margin-top: 2rem;
padding: 5px;
}

body:has(.create-url:not([hidden])) div.footer
{
position: relative !important;
margin: auto !important;
padding: 10px !important;
outline: none !important;
user-select: none !important;
height: fit-content !important;
width: max-content !important;
bottom: 0 !important;
top: 0 !important;
transform: initial !important;
left: 0 !important;
}

body:has(.create-url:not([hidden])) div.footer > div {
margin-top: 5px;
}

.create-url {
width: 90vw;
background-color: rgba(0, 0, 0, 0.2);
position: relative;
margin: auto;
margin-top: 2rem;
border-radius: 10px;
backdrop-filter: blur(10px);
border: 2px solid rgba(255,255,255,0.1);
box-shadow: 0 0 40px rgba(8,7,16,0.6);
padding: 50px 35px;
padding-top: 0;
padding-bottom: 70px;
bottom: 0;
user-select: none;
}
.create-url * {
font-family: 'Poppins',sans-serif;
/* color: #ffffff; */
letter-spacing: 0.5px;
outline: none;
border: none;
}
.create-url h3 {
font-size: xx-large;
font-weight: bolder;
line-height: 25px;
text-align: center;
}

.create-url label {
display: block;
margin-top: 30px;
font-size: 16px;
font-weight: 500;
}
.create-url .input-field {
display: flex;
flex-direction: row;
height: 50px;
overflow: hidden;
border-radius: 5px;
}
.create-url .input-field > input {
height: inherit;
flex-grow: 1;
background-color: rgba(255,255,255,0.65);
border-radius: 3px;
/* padding: 0 10px; */
font-size: 14px;
font-weight: 300;
text-align: center;
text-overflow: ellipsis;
padding-left: 10px;
}
.create-url .input-field > button {
background-image: url("../asset/paste.svg");
background-size: 90% 90%;
background-position: center center;
background-repeat: no-repeat;
width: 40px;
cursor: pointer;
}
.create-url input::placeholder {
color: gray;
font-weight: bold;
text-align: center;
}
.create-url input#token {
font-size: x-small;
font-weight: 200;
}
.create-url > button {
margin-top: 20px;
width: 100%;
background-color: #ffffff;
color: #080710;
padding: 15px 0;
font-size: 18px;
font-weight: 600;
border-radius: 5px;
cursor: pointer;
position: relative;
left: 5px;
}
.create-url .created-url {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
height: 40px;
display: flex;
flex-direction: row;
width: calc(100% - 2 * 20px);
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.5);
}
.create-url .created-url > a {
flex-grow: 1;
border: inherit;
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
overflow: hidden;
text-overflow: ellipsis;
user-select: initial;
font-size: xx-small;
padding: 4px;
line-height: 10px;
}
.create-url .created-url > button {
width: 80px;
border: inherit;
border-top-right-radius: inherit;
border-bottom-right-radius: inherit;
color: #080710;
font-size: 18px;
font-weight: 600;
cursor: pointer;
}
Loading

0 comments on commit dad7b89

Please sign in to comment.