octospacc
/
WebPinBoard
mirror of https://gitlab.com/octospacc/WebPinBoard
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

CSS for images and element margins

This commit is contained in:
Octo Andri 2022-04-13 14:54:15 +00:00
parent 7797306918
commit 7cce438ff0
6 changed files with 107 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
.gitlab-ci.yml
View File

@ -1,13 +1,19 @@
# You can override the included template(s) by including variable overrides
# SAST customization: https://docs.gitlab.com/ee/user/application_security/sast/#customizing-the-sast-settings
# Secret Detection customization: https://docs.gitlab.com/ee/user/application_security/secret_detection/#customizing-settings
# Dependency Scanning customization: https://docs.gitlab.com/ee/user/application_security/dependency_scanning/#customizing-the-dependency-scanning-settings
# Container Scanning customization: https://docs.gitlab.com/ee/user/application_security/container_scanning/#customizing-the-container-scanning-settings
# Note that environment variables can be set in several places
# See https://docs.gitlab.com/ee/ci/variables/#cicd-variable-precedence
stages:
- test
sast:
stage: test
include:
- template: Security/SAST.gitlab-ci.yml
image: alpine:latest
before_script:
- apk update
- apk add python3 py3-pip
pages:
stage: deploy
script:
- mkdir Dist
- cp -R Source/* Dist/
- cd Dist
- pip3 install -r requirements.txt
- python3 Generate.py
artifacts:
paths:
- Dist
rules:
- if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH

28
README.md Normal file
View File

@ -0,0 +1,28 @@
# WebPinBoard
WebPinBoard is a Personal Static HTML Pinboard for Links and Images.
It works like this:
- You write all the links to webpages and images you want to organize in a [Markdown file](Source/Data.md)
- You run (or the server automatically does so for you, like on GitLab) the Generate.py program
- You get a fully static HTML page containing your translated markdown, organized into boards, or small windows
Right now, it requires no JavaScript, just some CSS for displaying everything on screen correctly.
(TODO: Make sure the generated page is at least readable on browsers without CSS3 support).
## Writing
The Markdown data file has a simple structure:
- Headings denote a new board, and all the content that follows will go under that board
- You can put flags to indicate special properties at the end of an heading line:
- `:Closed` makes the board appear collapsed by default
- Every board full name can only be used once (otherwise CSS will break)
- The first ever board in the file is special (it will be the Info board, with a different design)
Check my personal file for visual examples.
## License
The Generate.py program, the HTML codes in it embedded, and my CSS codes, are licensed under the AGPL-3.0 license. Check the [LICENSE.md file](LICENSE.md) for more details.
The [Data.md](Source/Data.md) file serves both as an example and as my real private usage of this program.
Since it's not code, but rather a document basically listing names and links, I licensed it under the [CC BY-SA 4.0 license](https://creativecommons.org/licenses/by-sa/4.0).

26
Source/Data.md
View File

@ -4,7 +4,7 @@ A collection of some of my saved links and resources,
neatly (I hope) categorized for everyone!
(and example for my [WebPinBoard](https://gitlab.com/octospacc/WebPinBoard) software)
- Data.md file License: [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)
- Data.md file License: [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0)
uwu links..
@ -12,6 +12,24 @@ uwu links..
- [Link 1](example.com)
- [Link 2](example.com)
### Finestra test 2
- [Link 1](google.com)
- [Link 2](example.com)
### Finestra test 2 :Closed
[Link 1](example.com)
![Img 1](https://i.imgur.com/5bdkMlg.gif)
[Link 1](example.com)
[Link 1](example.com)
### Finestra test 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus metus quis elit feugiat, blandit efficitur magna tincidunt. Proin feugiat ex ipsum, sed iaculis magna molestie a. Nam diam enim, pharetra in metus a, ultricies molestie eros. Vivamus vel metus ut dolor bibendum elementum. Curabitur sollicitudin quam vitae enim auctor, non porta leo faucibus. Cras mollis tellus sed ligula rhoncus fringilla. Nunc lacus erat, ultrices id tempor et, volutpat ac nisl. Aliquam erat volutpat. Sed vel ligula massa.
In et odio nisl. In dapibus dictum risus et aliquam. Cras ut libero congue, euismod mauris non, viverra orci. Nullam facilisis accumsan odio, nec lacinia metus luctus a. Pellentesque ac aliquam nunc. Vestibulum eu sagittis quam. Integer vitae semper sapien, vel vulputate magna. Aliquam pretium mauris risus, ut porttitor tellus pellentesque in. Duis nec finibus magna, id mattis ante. Quisque rutrum ultricies ex et congue. Cras sit amet metus eu diam suscipit dapibus non eu felis. Sed non tempor nisi. Duis porta ut sem vel commodo. Sed dui leo, porttitor non lobortis sit amet, porttitor a risus. Nam vestibulum elementum lacus, sit amet tincidunt ex tempus id.
Pellentesque et arcu mi. Integer bibendum feugiat maximus. Integer tristique ex quis mi ultricies hendrerit. Praesent mi ipsum, rhoncus eu est et, varius finibus quam. Ut pellentesque sem ut nisl congue, non posuere purus placerat. Ut gravida ligula non leo fringilla aliquam. Sed id felis id nibh blandit gravida nec nec odio. Nulla facilisi.
Pellentesque vel velit euismod, consequat leo vitae, ullamcorper ex. Aliquam aliquam velit erat, eu venenatis mauris eleifend quis. Aenean id nulla non est cursus aliquet. Proin porta purus quis ipsum tincidunt dignissim. Nam tincidunt, metus sollicitudin tincidunt tincidunt, nibh justo hendrerit turpis, nec porttitor nunc neque nec massa. Aenean eu neque ipsum. Donec in sem vel urna venenatis molestie.
In sodales dui tristique neque suscipit aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer luctus sollicitudin lorem vel blandit. Ut dictum metus vitae mi venenatis pharetra. Nam magna felis, pretium sit amet maximus et, porttitor sed risus. Fusce mi mauris, luctus vel condimentum at, lacinia imperdiet ex. Sed sodales, tellus vel venenatis cursus, nibh enim ultricies sapien, a venenatis lacus sapien eu ligula. Curabitur metus justo, fringilla et aliquet eget, interdum in ante. In hac habitasse platea dictumst. Vestibulum feugiat purus interdum sollicitudin aliquet.
- [Link 2](example.com)

30
Source/Generate.py
View File

@ -28,15 +28,17 @@ BaseHTML = """
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{TITLE}</title>
<link rel="stylesheet" href="https://unpkg.com/98.css"> <!-- Credits: https://github.com/jdan/98.css -->
<link rel="stylesheet" href="https://unpkg.com/98.css">
<link rel="stylesheet" href="Style.css">
</head>
<body>
<div id="Background"> <!-- https://pixelfed.uno/i/web/post/419157143827461664 (CC BY-SA 4.0) -->
<img src="https://i.imgur.com/GwCgSFC.png"> <!-- https://i.imgur.com/5bdkMlg.gif -->
</div>
{INFO}
{BOARDS}
<div class="BoardsContainer">
{INFO}
{BOARDS}
</div>
</body>
</html>
"""
@ -71,14 +73,6 @@ BoardHTML = """
from markdown import Markdown
"""
MainHeading = ''
def SetMainHeading(HTML):
global MainHeading
MainHeading = 'h' + HTML.split('<h')[1].split('>')[0]
"""
def SplitPop(String, Key):
List = String.split(Key)
for i,s in enumerate(List):
@ -99,11 +93,9 @@ def GetDataHTML():
exit(1)
def GetBoards(Data):
print(Data)
Boards = SplitPop(Data, '<h') #SplitPop(Data, '<{}>'.format(GetHeading(Data)))
print(Boards)
Boards = SplitPop(Data, '<h')
for i,b in enumerate(Boards):
Boards[i] = '<h' +b #'<{}>'.format(GetHeading(Data)) + b
Boards[i] = '<h' +b
return Boards
def GetBoardParams(Title):
@ -116,7 +108,7 @@ def GetBoardParams(Title):
def GenBoard(Data, Template):
Heading = GetHeading(Data)
print(Heading)
Elements = SplitPop(
SplitPop(
Data,
@ -167,9 +159,9 @@ def WriteHTML(Info, Boards):
exit(1)
def Main():
Data = GetDataHTML()
# SetMainHeading(Data)
Boards = GetBoards(Data)
Boards = GetBoards(
GetDataHTML().replace(
'<img', '<img loading="lazy"'))
Info = Boards[0]
Boards.pop(0)
WriteHTML(Info, Boards)

32
Source/Style.css
View File

@ -27,6 +27,12 @@ Body {
Font-Size: Large;
}
.window {
Float: Left;
Margin: 8px;
Max-Width: 400px;
}
.InfoWindow {
Float: Left;
Margin: 12px;
@ -44,19 +50,35 @@ Body {
Float: Right;
}
.window {
Float: Left;
Margin: 8px;
}
.window-body, .InfoWindowBody {
Display: Block;
}
.window-body *, .InfoWindowBody * {
Margin-Top: 6px;
Margin-Bottom: 6px;
}
.window-body li, .InfoWindowBody li {
Margin-Top: 2px;
Margin-Bottom: 2px;
}
.window-body h1, .window-body h2, .window-body h3, .window-body h4, .window-body h5, .window-body h6,
.InfoWindowBody h1, .InfoWindowBody h2, .InfoWindowBody h3, .InfoWindowBody h4, .InfoWindowBody h5, .InfoWindowBody h6 {
Margin-Top: 12px;
Margin-Bottom: 12px;
}
:Checked + .window-body, :Checked + .InfoWindowBody {
Display: None;
}
.window-body img, .InfoWindowBody img {
Max-Width: 100%;
Max-Height: 100%;
}
.title-bar {
Background: Linear-Gradient(90deg, #3413D9, #5812DA);
}

77
Source/index.html
View File

@ -1,77 +0,0 @@
<!DOCTYPE html>
<!--
WebPinBoard
Copyright (C) 2022, OctoSpacc
https://gitlab.com/octospacc
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bachecoctt</title>
<link rel="stylesheet" href="https://unpkg.com/98.css"> <!-- Credits: https://github.com/jdan/98.css -->
<link rel="stylesheet" href="Style.css">
</head>
<body>
<div id="Background"> <!-- https://pixelfed.uno/i/web/post/419157143827461664 (CC BY-SA 4.0) -->
<img src="https://i.imgur.com/GwCgSFC.png"> <!-- https://i.imgur.com/5bdkMlg.gif -->
</div>
<div class="InfoWindow">
<label for="Bachecoctt-Toggle"><p>Info Open/Close</p></label>
<input type="checkbox" id="Bachecoctt-Toggle" checked>
<div class="InfoWindowBody">
<h2>Bachecoctt</h2>
<p>A collection of some of my saved links and resources,<br />neatly (I hope) categorized for everyone!<br />(and example for my <a href="https://gitlab.com/octospacc/WebPinBoard">WebPinBoard</a> software)</p><ul><li>Data.md file License: <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a></li></ul><p>uwu links..</p>
</div>
</div>
<div class="window">
<div class="title-bar">
<div class="title-bar-text">
Finestra test
</div>
<div class="title-bar-controls">
<label for="Finestra test-Toggle"><pre></pre></label>
</div>
</div>
<input type="checkbox" id="Finestra test-Toggle" >
<div class="window-body">
<ul><li><a href="example.com">Link 1</a></li><li><a href="example.com">Link 2</a></li></ul>
</div>
</div>
<div class="window">
<div class="title-bar">
<div class="title-bar-text">
Finestra test 2
</div>
<div class="title-bar-controls">
<label for="Finestra test 2-Toggle"><pre></pre></label>
</div>
</div>
<input type="checkbox" id="Finestra test 2-Toggle" >
<div class="window-body">
<ul><li><a href="google.com">Link 1</a></li><li><a href="example.com">Link 2</a></li></ul>
</div>
</div>
</body>
</html>