Web

001
 
<?php 
002
 
003
 
require_once(__DIR__."/../villapirorum.php");
004
 
use function dom\{set,markdown,include_file,path,user_codepen,style,main,header,footer,anchor,article,h2,h3,ul,li,a,p,strong,img};
005
 
use function dom\{grid,card,card_title,card_properties,card_text,card_media,card_action};
006
 
007
 
set("title",            "Web - Villapirorum");
008
 
set("description",      "Villapirorum webdev page");
009
 
set("mastodon-post",    "111954786154809891");
010
 
set("unsplash",         "DuHKoV44prg, ffstop");
011
 
012
 
villa_init();
013
 
014
 
villa_output(villa_header("Web").villa_main(
015
 
  header(
016
 
    p("I am probably better at ".a("making video games for a living", "../pro")." but I love web dev.").
017
 
    grid(
018
 
      p(  
019
 
        "Developing this ".a("whole website", "#ilovemywebsite")." for fun, ".
020
 
        "aiming at making it compliant with web accessibility standards, ".
021
 
        "responsive and mobile friendly, google amp compliant, ".
022
 
        "service-worker compliant and very performant ".
023
 
        "(means green scoring in all google tests), ".
024
 
        "using no high level framework (coders like to code) ".
025
 
        "except my own server-side php html components ".a("library", "#domphp")." (work in progres)!", "lspan-2").
026
 
      img("img/lighthouse.gif"), [ "style" => "--grid-cell-min-width: 200px" ])).
027
 
  article(
028
 
    header(h2("Tools").p("A few web tools I am working on")).
029
 
    grid(
030
 
      card(
031
 
        card_title(h3("APCA Contrasted colors checker")).
032
 
        card_properties("2024-02-01", "https://villapirorum.netlify.app/web/contrasted-colors", "accessibility").
033
 
        card_text(
034
 
          p("Check if you text is contrasted enough, ".
035
 
          "depending on color, background color, font size and font weight").
036
 
          p("Also suggests a few diffent valid colors to use instead")).
037
 
        card_action(p(a("Find the tool here!", "contrasted-colors")))).
038
 
      card(
039
 
        card_title(h3("CSS Ipsum")).
040
 
        card_properties("2024-02-01", "https://villapirorum.netlify.app/css-ipsum", "css").
041
 
        card_text(
042
 
          p(strong("A CSS sandbox / showcase")).
043
 
          p("This is a fake/test page meant to test CSS frameworks and styles.").
044
 
          p("It aggregates several showcase pages (some well known, others that come from the past) ".
045
 
          "presenting all html components into one single page where you can").
046
 
          ul(
047
 
            li("Toggle preset CSS frameworks (normalize & co)").
048
 
            li("Add a link to an external stylesheet").
049
 
            li("Edit existing CSS").
050
 
            li("Switch between dark and light modes")).
051
 
          p("Also note that ALL CSS of this page can be live edited to see what happens!")).
052
 
        card_action(p(a("Experiment here!", "./css-ipsum"))))).
053
 
    grid(
054
 
      card(
055
 
        card_title(h3("Masonry layout")).
056
 
        card_properties("2024-02-01", "https://codepen.io/villepreux/pen/XWmoOrG").
057
 
        card_text(                
058
 
          p("My take at applying a masonry style to your existing layout.").
059
 
          p("So let say you have a collection of components. First, if not already done,").
060
 
          ul(
061
 
            li("apply a grid pattern to it (just setting grid display, gap, and columns template). Then").
062
 
            li("simply apply this tiny javascript function to your component parent,")).
063
 
          p("and done!").
064
 
          p("I did a codepen to showcase it: ".a("https://codepen.io/villepreux/pen/XWmoOrG"))).
065
 
        card_media(
066
 
          user_codepen("XWmoOrG", "Mansonry layout", 800, 600)
067
 
          ),
068
 
        "span-3"))).
069
 
  card(
070
 
    card_title(h2("DOM Framework")).
071
 
    card_properties("2024-02-01", "https://villapirorum.netlify.app/dom", "web").
072
 
    style('img[alt="Build"] { width: 105px; height: 20px }'). // Github build badge special style
073
 
    card_text(markdown(
074
 
      str_replace("20XX", date("Y"), 
075
 
      str_replace("https://github.com/villepreux/dom/tree/master/", "../dom/", 
076
 
        include_file(path("../dom/README.md")))),
077
 
      false, 2)).
078
 
    footer(p("DOM is provided for free (like free beer). Use at your own risk"))).
079
 
  article(
080
 
    header(anchor("i-love-my-website").h2("This site").p("I love my website!")).
081
 
    main(
082
 
      p("I love my website! Digital garden is the right description").
083
 
      p("That includes all my webdev experiements. This is this website features' list:").ul(
084
 
        li("Uses ".a("DOM", "#domphp")." homemade framework (See this page ".a("source", "#source")." code below to see how it looks like)").
085
 
        li("Web-mentions support").
086
 
        li("Commenting (via mastodon) support").
087
 
        li("'Level 3' ".a("IndieWeb'ified", "https://indiewebify.me")).
088
 
        li(a("RelMeAuth", "https://microformats.org/wiki/RelMeAuth"). " support").
089
 
        li("JSON-RPC is automatically generated").
090
 
        li("RSS is automatically generated").
091
 
        li("Dark mode support with toogle button (in the footer)").
092
 
        li("No-JS support (with toogle in the footer to test it)").
093
 
        li("No-CSS support (with toogle in the footer to test it)").
094
 
        "")
095
 
      )
096
 
  ).
097
 
  article(
098
 
    header(h2("Misc. tests")).
099
 
    ul( 
100
 
      li(a("CSS Ipsum Test page",                "./css-ipsum"   )).
101
 
      li(a("Hello world!",                       "./hello-world" )).
102
 
      li(a("Vanilla test page",                  "./vanilla"     )).
103
 
      li(a("Style Stage CSS Theme contribution", "./stylestage"  )).
104
 
      li(a("Some more tests",                    "../test"       )))).
105
 
  article(
106
 
    header(anchor("source").p("Source code of this web page")).
107
 
    this()).
108
 
  ""));
109