Dev/website

From Whonix
< Dev
Jump to navigation Jump to search



requirements[edit]

General[edit]

  • no external libraries hosted on third party servers
  • locally running Open Source code: yes
  • external libraries preferred from packages.debian.org bullseye
  • non-javascirpt fallbacks required for any new developments
  • Whonix vs Kicksecure website should look different
  • improve from now ~30% design to ~80% design if the remaining ~20% would take \80% of the time
  • keep Dev/CSS in mind
  • screenshot before / after major changes (will be used for public reports)
  • later added:
    • svg is nice as base format but incompatible with Tor Browser maximum security slider setting
    • keep relative link support

Image Optimizations[edit]

sudo apt update

sudo apt install mat2 optipng jpegoptim

All images:

mat2 --inplace image-file-name

caution: svg's

png's:

optipng -quiet -o7 -zm9 -zc9 -zm9 -zs3 -f5 --strip all -preserve image-file-name

jpg and jpeg's:

jpegoptim --quiet -o --strip-all image-file-name

svg's:

scour --enable-viewboxing --enable-id-stripping --enable-comment-stripping --shorten-ids --indent=none -i input-file-name -o output-file-name

Information[edit]

TODO[edit]

CSS regressions[edit]

  • CodeSelect "copied" notification popup is now horizontal | instead of vertical -
  • CodeSelect copy symbol is gone for 2 seconds after clicking copy
  • vector skin pages now have no header at all. Example: Special:RecentChanges

CSS changes[edit]

Header Fixes[edit]

CSS Fixes[edit]

wiki CSS / design improvements

Test

  • tables prettification
    • For example on Windows Hosts the tables look a bit weird. One has to scroll down a lot (specifically on mobile) before having a chance to see what category it is about. Also the colors aren’t great.
  • missing table scroll buttons
    • When viewing Comparison with Others on mobile it is not obvious that one can scroll the the right. Maybe a scroll button would help? Doesn’t need to be necessarily a scroll button. Also a different table style might be a better solution.
  • table of contents too long
    • On many wiki pages such as for example Tor Browser the table of contents seems too long before there is any actual content. Is there a better way to present this?
  • documentation page
    • Any suggestions on how to prettify Whonix Documentation wiki page?
  • Other Suggestions?
    • Are there other stylistic changes that could be made?

CSS Files Refactoring[edit]

Tasks:

  • Fix code indentation style if needed.
  • Refactoring of the following files.
  • Splitting into separate files where appropriate.
  • Lightweight code comments.
  • Check if Common.css versus Foreground.css is appropriately sorted into shared and skin specific CSS:

Whonix:

Kicksecure (later):

donations related[edit]

[edit]

General Information:

  • PayPal subscribe actually supports:
    • country specific
    • USA: Discover Visa MasterCard American Express
    • Germany: Direct debit (Lastschrift), UnionPay, Discover Visa MasterCard American Express
  • Donate
    • table needs revision or a total re-design?
    • Does not necessarily need to be a table.
    • also used on Contribute#Donate as a "plug-in" but not important

Integrate Donate Button in Wiki Header

View https://archive.org/donate/ for Numbers before Payment Options

How to get addresses, read template

https://www.whonix.org/w/index.php?title=Template:Payments&action=edit

Important to include! 

There are five ways to support {{project_name_long}} financially:

1. Sponsoring a new feature - please get in [[Contact#For_Private_Inquiries|contact]] for details.

2. Paying for [[Plus Support]].

3. Paying for Plus Support in lieu of a donation. <ref>
Users may send any amount of funds to {{project_name_long}}. A consultation service commensurate with the amount contributed will be negotiated between both parties.
</ref>

4. [[Investors|Invest]].

Our [[Terms of Service]] apply.

Assumptions:

  • widely unknown by non-PayPal users that guest payments with lots of debit/credit cards are possible by using PayPal

General goals:

  • easy to understand Donate page

Inspiration

Questions - TODO:

  • Good to have a symbol per currency for bank wire?
    • AU $
    • EUR €
    • GBP £
  • How could PayPal onetime donation vs paypal subscribe be visualized?
  • Have QRcode for crypto currencies Bitcoin and Monero right on the Donate page or link to a sub page to have more space on that Donate page?
  • Maybe a simple, easy to understand, pretty overview with options we think is major, popular and a separate one with ones we're not sure about?

TODO:

    • need a symbol for Donate by Affiliate Link (which is linked from the Donate page)
    • need a symbol for Donate time (Contribute)
    • The PayPal subscribe button is very blurry. Is there a better version available? Could a better/sharper version be invented?
      • Search engines show OKish results for "Discover Visa MasterCard American Express"?

Various payment symbols needed:

fly in donation popup after some time[edit]

  • TODO discuss
    • dismissible, how, cookie?

redirect to donate page after download[edit]

  • TODO discuss
    • how could it technically be implemented?
    • could wait for the download to really complete?
    • content and design?

pay what you can[edit]

  • similar to elementary.io
  • on HOLD - needs further discussion on the contents and design

Convert Homepage Into Wiki[edit]

  • the Whonix homepage - https://github.com/Whonix/Whonix-Website - whonix.org could be deprecated and migrated to a normal wiki page instead for simplicity (non-duplicate html / CSS)
    • move to https.//www.whonix.org/wiki/homepage
  • same for Kicksecure homepage - https://github.com/Kicksecure/Kicksecure-Website - kicksecure.com
  • tasks for Patrick:
    • later https.//www.whonix.org/wiki/homepage would set server side (nginx) a header "X-Robots-Tag: noindex, nofollow"
    • https.//www.whonix.org homepage would server side (nginx) internally be a rewrite to https.//www.whonix.org/wiki/homepage (Not a redirect!)

Kicksecure Website Enhancements[edit]

review most important Whonix pages[edit]

review other Whonix pages[edit]

review most important Kicksecure pages[edit]

Link Archiving[edit]

Kicksecure illustrative images[edit]

  • TODO discuss

encrypted-support.com[edit]

  • some sub pages such as About
  • portfolio
  • design improvements?

forums.kicksecure.com[edit]

  • discourse forums theme selection

forums.whonix.org[edit]

  • discourse forums theme selection

phabricator.whonix.org HTML backup[edit]

  • TODO discuss

Widgets Improvements[edit]

Box Widget[edit]

Current syntax: 

{{Box|text=
text
}}

Desired syntax: 

{{Box|
text
}}

automated (API) confirm edit[edit]

newsletter[edit]

  • subscribe, unsubscribe, double opt-in
  • TODO: discuss

whonix-welcome-page refinement[edit]

A locally-only (in file system) browser welcome page which is installed by default in Whonix. Needs to be compatible with Tor Browser maximum slider setting.

kicksecure-welcome-page invention[edit]

Similar whonix-welcome-page. Does not exist yet. Needs to be invented. Should look distinct from whonix-welcome-page.

content and design refinement[edit]

packages.debian.org APT package repository web interface for deb.whonix.org[edit]

mediawiki magic words[edit]

Discuss: Whonix public image, marketing, claims[edit]

  • psychologically there needs to be a superlative to market whonix
    • it should be rather realistic and provable
    • it needs to be a clear claim that people can easily understand and like
    • suggestion claim: The most watertight privacy operating system in the world
    • you could also say waterproof where the emotional impact is almost the same, proof indicates 100% (stronger but may be needed to be defended if media criticizes), where tight might indicates 99,999% (a small bit less strong but gives backdoor for media attacks)
    • also a claim: Whonix has a 10 year history of being waterproof (explanation of leaks might be good). Here waterproof is fitting and recommended because when something is in the past and rather certain there are almost no suprises anymore, so claims can be strong
  • another marketing angle/ claim for Whonix. Because Whonix is user funded claims could be
    • Grassroots privacy OS / Grassroots funded privacy OS
    • All privacy no big players / 100% privacy 0% big players / 100% privacy 0% corporate influence

CodeSelect Refinements #4[edit]

  • CodeSelect Box manual marking should be free and not automatically mark everything
  • JS mechanic
    • use mousedown and mouseup
    • when mousedown check and save current selection in textbox
    • when mouseup check current selection again and compare to saved selection
    • if identical mark everything, if not down mark via JS

In Progress[edit]

[edit]

  • box
  • banner (landscape)
  • symbol
  • favicon
  • Telegram icon
  • requirements, see: Dev/Logo Contest
  • Kicksecure social media branding images (same images but adjusted sizes, see Dev/Logo)

Review please[edit]

Done / Log of DevSprint 2021-12 to 2022-01[edit]

  • 2022-01-14
    • Header overlapping jump targets fixed
    • Vector Skin remove external link symbols
    • Editor Fullscreen Feature for editor added
    • Header made responsive down to 370px and optimized for mobile usability
    • CodeSelect Nojs style fix + new parameter inline so multiple instances can be combined in one line
      --target virtualbox
      ,
      --target qcow2
      , and
      --target raw
  • 2022-01-13: Completely new Header developed and installed
    • Header is inserted as a Template and fixed to top
    • Header features like the header form 2022-01-09
    • Completely Nojs and Mobile friendly
  • 2022-01-11: SaveAndContinue-Button: New JS-Feature for faster Development
  • 2022-01-10: Creation of BodyScript2 Mediawiki Extension
  • 2022-01-09: New Header developed
    • Restructuring via Sidebar
    • unifying all menus in one supermenu
    • replacement of donate button
    • Main Logo links to whonix.org
    • nice hover effects
    • Search in modal instead of box (for js users, else go to search page)
  • 2022-01-08: Nojs.css incorporated - styles exclusively for Nojs visitors
  • 2022-01-06: New footer incorporated
    • new Style, better layout and ordering
    • Bootstrap modals for content
    • engaging action buttons
    • Integration of whonix news
  • 2022-01-03: Crypto address templates unified and Crypto address images unified
  • 2021-12-31: Footer RandomNews. Solution: RandomNews template was not available in Footer2 widget (because: widget), so RandomNews was called in Footer2-Template. In template it is hidden by CSS and the whonix random news section in footer is filled with generic text. If JS is available RandomNews are moved to Footer (true HTML widget area)
  • 2021-12-31: CodeSelect Improvements, Refinements #3. Green color and check mark if copy is clicked
  • 2021-12-30: CodeSelect Improvements
    • after clicking the copy symbol, the copy symbol changes into a green checkmark, later changes back
    • CodeSelect can be called as a template but also simply by 
      <div class="code-select">code</div>
      - essential for usage in Widgets
  • 2021-12-29: Footer subdomain fixes by protocol and apex domain for forums subdomain (whonix.org and .onion)
  • 2021-12-28: Footer redesigned
  • 2021-12-23: CodeSelect further improved: less white space, more compact, better nojs-version, better js-animation
  • 2021-12-23: Combi task: External Links / Template + Widget Archive-Link
    • Improved Mediawiki Extension "Link to archive"
      • differentiate automatically between normal link, onion-link and link to web.archive.org
      • Show logos instead of long "[archive]" text
      • logo / title attribute / logo link href according to linked url: normal → archive symbol + archive link / onion → onion logo and onion link / archive link → archive logo and same link
    • Template Template:Archive_link and Widget:Archive_link and MediaWiki:Archive Link.css created: Similar to "Link to archive", but you can choose if you want an archive link, onion link or both
  • 2021-12-21: Whonix Logo Format: discussed: jpeg and png specific use cases. And logo-text and logo delivered without padding
  • 2021-12-21: Whonix Logo finished
  • 2021-12-20: mediawiki skin selection
    • Whonix? -> Keeping mediawiki skin Foreground and adding CSS fixes later.
    • Kicksecure: Which skin should be used as foundation? -> Same but with different CSS to have distinctive styles/colors.
  • 2021-12-19: Colored Platform Icons, 500px*500px
    • some icons pulled from web in better solution
    • apple logo rights research. Seems using the logo is in most of the world public domain and in copyrighted jurisdictions logo is considered fair use and used by open source projects (means no licence)
    • kvm logo complete redesign
    • review/improve colored symbols for Template:Supported_Platforms_Icons since these are used on Download and whonix.org homepage
  • 2021-12-18: Whonix old logo refinement, old text removed, text "Whonix" redrawn
  • 2021-12-17: CodeSelect finished
    • HTML restructured, Style improved
    • direct copy button added, info tooltip added
    • modernized und documented JS mechanic
    • improved upon old mechanic with sidescrolling
    • Non-JS compatible with similar style
  • 2021-12-16: Update Download Button VirtualBox wiki page Download Button: prettify and easier functionality
  • 2021-12-14: invoice template improvements
  • 2021-12-13: discuss (easy, not important): cannot click inspect on other websites


Whonix ™ The most watertight privacy operating system in the world.
FREE  ·  PLUS  ·  PREMIUM Support
GNU logo Open Source Initiative logo At Whonix we believe in freedom and trust. That's why we fully support Open Source and Freedom Software. Learn more.
Whonix ™ is supported by Evolution Host DDoS Protected VPS.
Whonix is the most watertight privacy operating system in the world
The personal opinions of moderators or contributors to the Whonix ™ project do not represent the project as a whole. By using this website, you acknowledge you have read, understood, and agree to be bound by these these agreements: Terms of Service , Privacy Policy , Cookie Policy , E-Sign Consent , DMCA , Imprint Whonix ™ © ENCRYPTED SUPPORT LP, 2022

There are five different options for subscribing to Whonix ™ source code changes.

Retrieved from "https://www.whonix.org/w/index.php?title=Dev/website&oldid=77558"