[{"data":1,"prerenderedAt":17462},["ShallowReactive",2],{"home-blog":3,"home-articles":14965,"home-scratchpad":15549},[4,11288,12389,13197,14625],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"date":11,"cover":12,"tags":13,"body":16,"_type":11282,"_id":11283,"_source":11284,"_file":11285,"_stem":11286,"_extension":11287},"\u002Fblog\u002Fbuildingajhipstervueadmin\u002Fbuildingajhipstervueadmin","buildingajhipstervueadmin",false,"","Building a JHipster Vue Admin","Tutorial on developing a Vue Admin for JHipster","2024-08-03","BuildingAJhipsterVueAdmin\u002Fimage1.png",[14,15],"JHipster","Vue",{"type":17,"children":18,"toc":11280},"root",[19,30,40,45,50,61,66,91,96,149,160,167,172,177,1196,1201,1230,1235,1244,1252,1257,1262,1287,1292,1339,1344,1392,1397,1448,1456,1464,1469,1474,1479,1495,1500,1508,1513,1518,1526,1531,1577,1590,1595,1621,1631,1667,1672,1677,1682,1698,1706,1719,1732,1739,1747,1754,1775,1788,1801,1814,1824,1836,1843,1848,1858,1865,1870,1878,1883,1997,2002,2352,2369,2374,2382,2396,2404,2409,2414,2430,2435,2444,2449,2458,2463,2579,2584,2589,4390,4397,4402,4407,4416,4421,4430,4435,4598,4603,4818,4825,4830,4835,4844,4852,4857,4862,5481,5486,6777,6791,6802,6807,10211,10216,10224,10231,10236,10250,10255,10494,10499,10798,10803,10808,10813,10818,11212,11225,11232,11237,11244,11249,11258,11263,11270,11275],{"type":20,"tag":21,"props":22,"children":23},"element","p",{},[24],{"type":20,"tag":25,"props":26,"children":27},"strong",{},[28],{"type":29,"value":9},"text",{"type":20,"tag":21,"props":31,"children":32},{},[33],{"type":20,"tag":34,"props":35,"children":39},"img",{"alt":8,"height":36,"src":37,"width":38},150,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage1.png",94,[],{"type":20,"tag":21,"props":41,"children":42},{},[43],{"type":29,"value":44},"Jhipster is a development platform to quickly generate, develop and\ndeploy modern web applications and microservices architectures. In this\narticle I will describe how to build the foundations of a Vue Admin\ncontainer built using JHipster.",{"type":20,"tag":21,"props":46,"children":47},{},[48],{"type":29,"value":49},"For the first part of setting up the base JHipster installation I will\ndraw on this excellent tutorial on creating a Micro Frontends project by\nMatt Raible:",{"type":20,"tag":21,"props":51,"children":52},{},[53],{"type":20,"tag":54,"props":55,"children":59},"a",{"href":56,"rel":57},"https:\u002F\u002Fauth0.com\u002Fblog\u002Fmicro-frontends-for-java-microservices\u002F",[58],"nofollow",[60],{"type":29,"value":56},{"type":20,"tag":21,"props":62,"children":63},{},[64],{"type":29,"value":65},"Software component versions:",{"type":20,"tag":67,"props":68,"children":69},"ul",{},[70,76,81,86],{"type":20,"tag":71,"props":72,"children":73},"li",{},[74],{"type":29,"value":75},"Java 21.0.3",{"type":20,"tag":71,"props":77,"children":78},{},[79],{"type":29,"value":80},"Node 20.15.0",{"type":20,"tag":71,"props":82,"children":83},{},[84],{"type":29,"value":85},"JHipster 8.6.0",{"type":20,"tag":71,"props":87,"children":88},{},[89],{"type":29,"value":90},"Docker Desktop",{"type":20,"tag":21,"props":92,"children":93},{},[94],{"type":29,"value":95},"In this tutorial we will cover the following milestones:",{"type":20,"tag":67,"props":97,"children":98},{},[99,104,109,114,119,124,129,134,139,144],{"type":20,"tag":71,"props":100,"children":101},{},[102],{"type":29,"value":103},"Milestone 1: Use Jhipster to generate micro services application",{"type":20,"tag":71,"props":105,"children":106},{},[107],{"type":29,"value":108},"Milestone 2: Configure Docker files and configurations and start up\ndatabases",{"type":20,"tag":71,"props":110,"children":111},{},[112],{"type":29,"value":113},"Milestone 3: Enable Zero Turnaround UI development",{"type":20,"tag":71,"props":115,"children":116},{},[117],{"type":29,"value":118},"Milestone 4: Configure the front-end app",{"type":20,"tag":71,"props":120,"children":121},{},[122],{"type":29,"value":123},"Milestone 5: Update the Nav Bar",{"type":20,"tag":71,"props":125,"children":126},{},[127],{"type":29,"value":128},"Milestone 6: Add example pages and configure the router",{"type":20,"tag":71,"props":130,"children":131},{},[132],{"type":29,"value":133},"Milestone 7: Add side menu-bar",{"type":20,"tag":71,"props":135,"children":136},{},[137],{"type":29,"value":138},"Milestone 8: Configure Micro-Frontend integration into menu",{"type":20,"tag":71,"props":140,"children":141},{},[142],{"type":29,"value":143},"Milestone 9: Add the Admin menu section",{"type":20,"tag":71,"props":145,"children":146},{},[147],{"type":29,"value":148},"Milestone 10: Tidy up",{"type":20,"tag":21,"props":150,"children":151},{},[152,154],{"type":29,"value":153},"The full code for the application can be found here:\n",{"type":20,"tag":54,"props":155,"children":158},{"href":156,"rel":157},"https:\u002F\u002Fgithub.com\u002FFrancoisBotha\u002Fjhipstervueadmin",[58],[159],{"type":29,"value":156},{"type":20,"tag":21,"props":161,"children":162},{},[163],{"type":20,"tag":25,"props":164,"children":165},{},[166],{"type":29,"value":103},{"type":20,"tag":21,"props":168,"children":169},{},[170],{"type":29,"value":171},"This includes Consul, Gateway, Demo App and Store micro services.",{"type":20,"tag":21,"props":173,"children":174},{},[175],{"type":29,"value":176},"The JHipster application is specified and configured in the jdl below:",{"type":20,"tag":178,"props":179,"children":183},"pre",{"className":180,"code":181,"language":182,"meta":8,"style":8},"language-json shiki shiki-themes github-dark","application {\n  config {\n    baseName gateway\n    reactive true\n    packageName au.com.businessautomationtechnology.gateway\n    applicationType gateway\n    authenticationType jwt\n    buildTool maven\n    clientFramework vue\n    prodDatabaseType postgresql\n    serviceDiscoveryType consul\n    testFrameworks [cypress]\n    microfrontends [demoapp, store]\n  }\n}\n\napplication {\n  config {\n    baseName demoapp\n    reactive false\n    packageName au.com.businessautomationtechnology.demoapp\n    applicationType microservice\n    authenticationType jwt\n    buildTool maven\n    clientFramework vue\n    prodDatabaseType postgresql\n    enableHibernateCache false\n    serverPort 8081\n    serviceDiscoveryType consul\n    testFrameworks [cypress]\n  }\n  entities Blog, Post\n}\n\napplication {\n  config {\n    baseName store\n    reactive false\n    packageName au.com.businessautomationtechnology.store\n    applicationType microservice\n    authenticationType jwt\n    buildTool maven\n    clientFramework vue\n    prodDatabaseType postgresql\n    enableHibernateCache false\n    serverPort 8082\n    serviceDiscoveryType consul\n    testFrameworks [cypress]\n  }\n  entities Product\n}\n\nentity Blog {\n  name String required minlength(3)\n  handle String required minlength(2)\n}\n\nentity Post {\n  title String required\n  content TextBlob required\n  date Instant required\n}\n\n\nentity Product {\n  title String required\n  price BigDecimal required min(0)\n  image ImageBlob\n}\n\nrelationship ManyToOne {\n  Post{blog(name)} to Blog\n}\n\n\npaginate Post with infinite-scroll\npaginate Product with pagination\n\ndeployment {\n  deploymentType docker-compose\n  serviceDiscoveryType consul\n  appsFolders [gateway, demoapp, store]\n  dockerRepositoryName \"francoisbotha\"\n}\n","json",[184],{"type":20,"tag":185,"props":186,"children":187},"code",{"__ignoreMap":8},[188,200,215,229,243,257,270,284,298,312,326,340,354,373,382,391,401,409,421,434,447,460,473,485,497,509,521,534,548,560,572,580,589,597,605,613,625,638,650,663,675,687,699,711,723,735,748,760,772,780,789,797,805,814,838,860,868,876,885,903,921,939,947,955,963,972,988,1011,1025,1033,1041,1050,1064,1072,1080,1088,1097,1106,1114,1123,1137,1150,1173,1188],{"type":20,"tag":189,"props":190,"children":193},"span",{"class":191,"line":192},"line",1,[194],{"type":20,"tag":189,"props":195,"children":197},{"style":196},"--shiki-default:#E1E4E8",[198],{"type":29,"value":199},"application {\n",{"type":20,"tag":189,"props":201,"children":203},{"class":191,"line":202},2,[204,210],{"type":20,"tag":189,"props":205,"children":207},{"style":206},"--shiki-default:#FDAEB7;--shiki-default-font-style:italic",[208],{"type":29,"value":209},"  config",{"type":20,"tag":189,"props":211,"children":212},{"style":206},[213],{"type":29,"value":214}," {\n",{"type":20,"tag":189,"props":216,"children":218},{"class":191,"line":217},3,[219,224],{"type":20,"tag":189,"props":220,"children":221},{"style":206},[222],{"type":29,"value":223},"    baseName",{"type":20,"tag":189,"props":225,"children":226},{"style":206},[227],{"type":29,"value":228}," gateway\n",{"type":20,"tag":189,"props":230,"children":232},{"class":191,"line":231},4,[233,238],{"type":20,"tag":189,"props":234,"children":235},{"style":206},[236],{"type":29,"value":237},"    reactive",{"type":20,"tag":189,"props":239,"children":240},{"style":206},[241],{"type":29,"value":242}," true\n",{"type":20,"tag":189,"props":244,"children":246},{"class":191,"line":245},5,[247,252],{"type":20,"tag":189,"props":248,"children":249},{"style":206},[250],{"type":29,"value":251},"    packageName",{"type":20,"tag":189,"props":253,"children":254},{"style":206},[255],{"type":29,"value":256}," au.com.businessautomationtechnology.gateway\n",{"type":20,"tag":189,"props":258,"children":260},{"class":191,"line":259},6,[261,266],{"type":20,"tag":189,"props":262,"children":263},{"style":206},[264],{"type":29,"value":265},"    applicationType",{"type":20,"tag":189,"props":267,"children":268},{"style":206},[269],{"type":29,"value":228},{"type":20,"tag":189,"props":271,"children":273},{"class":191,"line":272},7,[274,279],{"type":20,"tag":189,"props":275,"children":276},{"style":206},[277],{"type":29,"value":278},"    authenticationType",{"type":20,"tag":189,"props":280,"children":281},{"style":206},[282],{"type":29,"value":283}," jwt\n",{"type":20,"tag":189,"props":285,"children":287},{"class":191,"line":286},8,[288,293],{"type":20,"tag":189,"props":289,"children":290},{"style":206},[291],{"type":29,"value":292},"    buildTool",{"type":20,"tag":189,"props":294,"children":295},{"style":206},[296],{"type":29,"value":297}," maven\n",{"type":20,"tag":189,"props":299,"children":301},{"class":191,"line":300},9,[302,307],{"type":20,"tag":189,"props":303,"children":304},{"style":206},[305],{"type":29,"value":306},"    clientFramework",{"type":20,"tag":189,"props":308,"children":309},{"style":206},[310],{"type":29,"value":311}," vue\n",{"type":20,"tag":189,"props":313,"children":315},{"class":191,"line":314},10,[316,321],{"type":20,"tag":189,"props":317,"children":318},{"style":206},[319],{"type":29,"value":320},"    prodDatabaseType",{"type":20,"tag":189,"props":322,"children":323},{"style":206},[324],{"type":29,"value":325}," postgresql\n",{"type":20,"tag":189,"props":327,"children":329},{"class":191,"line":328},11,[330,335],{"type":20,"tag":189,"props":331,"children":332},{"style":206},[333],{"type":29,"value":334},"    serviceDiscoveryType",{"type":20,"tag":189,"props":336,"children":337},{"style":206},[338],{"type":29,"value":339}," consul\n",{"type":20,"tag":189,"props":341,"children":343},{"class":191,"line":342},12,[344,349],{"type":20,"tag":189,"props":345,"children":346},{"style":206},[347],{"type":29,"value":348},"    testFrameworks",{"type":20,"tag":189,"props":350,"children":351},{"style":206},[352],{"type":29,"value":353}," [cypress]\n",{"type":20,"tag":189,"props":355,"children":357},{"class":191,"line":356},13,[358,363,368],{"type":20,"tag":189,"props":359,"children":360},{"style":206},[361],{"type":29,"value":362},"    microfrontends",{"type":20,"tag":189,"props":364,"children":365},{"style":206},[366],{"type":29,"value":367}," [demoapp,",{"type":20,"tag":189,"props":369,"children":370},{"style":206},[371],{"type":29,"value":372}," store]\n",{"type":20,"tag":189,"props":374,"children":376},{"class":191,"line":375},14,[377],{"type":20,"tag":189,"props":378,"children":379},{"style":196},[380],{"type":29,"value":381},"  }\n",{"type":20,"tag":189,"props":383,"children":385},{"class":191,"line":384},15,[386],{"type":20,"tag":189,"props":387,"children":388},{"style":196},[389],{"type":29,"value":390},"}\n",{"type":20,"tag":189,"props":392,"children":394},{"class":191,"line":393},16,[395],{"type":20,"tag":189,"props":396,"children":398},{"emptyLinePlaceholder":397},true,[399],{"type":29,"value":400},"\n",{"type":20,"tag":189,"props":402,"children":404},{"class":191,"line":403},17,[405],{"type":20,"tag":189,"props":406,"children":407},{"style":196},[408],{"type":29,"value":199},{"type":20,"tag":189,"props":410,"children":412},{"class":191,"line":411},18,[413,417],{"type":20,"tag":189,"props":414,"children":415},{"style":206},[416],{"type":29,"value":209},{"type":20,"tag":189,"props":418,"children":419},{"style":206},[420],{"type":29,"value":214},{"type":20,"tag":189,"props":422,"children":424},{"class":191,"line":423},19,[425,429],{"type":20,"tag":189,"props":426,"children":427},{"style":206},[428],{"type":29,"value":223},{"type":20,"tag":189,"props":430,"children":431},{"style":206},[432],{"type":29,"value":433}," demoapp\n",{"type":20,"tag":189,"props":435,"children":437},{"class":191,"line":436},20,[438,442],{"type":20,"tag":189,"props":439,"children":440},{"style":206},[441],{"type":29,"value":237},{"type":20,"tag":189,"props":443,"children":444},{"style":206},[445],{"type":29,"value":446}," false\n",{"type":20,"tag":189,"props":448,"children":450},{"class":191,"line":449},21,[451,455],{"type":20,"tag":189,"props":452,"children":453},{"style":206},[454],{"type":29,"value":251},{"type":20,"tag":189,"props":456,"children":457},{"style":206},[458],{"type":29,"value":459}," au.com.businessautomationtechnology.demoapp\n",{"type":20,"tag":189,"props":461,"children":463},{"class":191,"line":462},22,[464,468],{"type":20,"tag":189,"props":465,"children":466},{"style":206},[467],{"type":29,"value":265},{"type":20,"tag":189,"props":469,"children":470},{"style":206},[471],{"type":29,"value":472}," microservice\n",{"type":20,"tag":189,"props":474,"children":476},{"class":191,"line":475},23,[477,481],{"type":20,"tag":189,"props":478,"children":479},{"style":206},[480],{"type":29,"value":278},{"type":20,"tag":189,"props":482,"children":483},{"style":206},[484],{"type":29,"value":283},{"type":20,"tag":189,"props":486,"children":488},{"class":191,"line":487},24,[489,493],{"type":20,"tag":189,"props":490,"children":491},{"style":206},[492],{"type":29,"value":292},{"type":20,"tag":189,"props":494,"children":495},{"style":206},[496],{"type":29,"value":297},{"type":20,"tag":189,"props":498,"children":500},{"class":191,"line":499},25,[501,505],{"type":20,"tag":189,"props":502,"children":503},{"style":206},[504],{"type":29,"value":306},{"type":20,"tag":189,"props":506,"children":507},{"style":206},[508],{"type":29,"value":311},{"type":20,"tag":189,"props":510,"children":512},{"class":191,"line":511},26,[513,517],{"type":20,"tag":189,"props":514,"children":515},{"style":206},[516],{"type":29,"value":320},{"type":20,"tag":189,"props":518,"children":519},{"style":206},[520],{"type":29,"value":325},{"type":20,"tag":189,"props":522,"children":524},{"class":191,"line":523},27,[525,530],{"type":20,"tag":189,"props":526,"children":527},{"style":206},[528],{"type":29,"value":529},"    enableHibernateCache",{"type":20,"tag":189,"props":531,"children":532},{"style":206},[533],{"type":29,"value":446},{"type":20,"tag":189,"props":535,"children":537},{"class":191,"line":536},28,[538,543],{"type":20,"tag":189,"props":539,"children":540},{"style":206},[541],{"type":29,"value":542},"    serverPort",{"type":20,"tag":189,"props":544,"children":545},{"style":206},[546],{"type":29,"value":547}," 8081\n",{"type":20,"tag":189,"props":549,"children":551},{"class":191,"line":550},29,[552,556],{"type":20,"tag":189,"props":553,"children":554},{"style":206},[555],{"type":29,"value":334},{"type":20,"tag":189,"props":557,"children":558},{"style":206},[559],{"type":29,"value":339},{"type":20,"tag":189,"props":561,"children":563},{"class":191,"line":562},30,[564,568],{"type":20,"tag":189,"props":565,"children":566},{"style":206},[567],{"type":29,"value":348},{"type":20,"tag":189,"props":569,"children":570},{"style":206},[571],{"type":29,"value":353},{"type":20,"tag":189,"props":573,"children":575},{"class":191,"line":574},31,[576],{"type":20,"tag":189,"props":577,"children":578},{"style":196},[579],{"type":29,"value":381},{"type":20,"tag":189,"props":581,"children":583},{"class":191,"line":582},32,[584],{"type":20,"tag":189,"props":585,"children":586},{"style":196},[587],{"type":29,"value":588},"  entities Blog, Post\n",{"type":20,"tag":189,"props":590,"children":592},{"class":191,"line":591},33,[593],{"type":20,"tag":189,"props":594,"children":595},{"style":196},[596],{"type":29,"value":390},{"type":20,"tag":189,"props":598,"children":600},{"class":191,"line":599},34,[601],{"type":20,"tag":189,"props":602,"children":603},{"emptyLinePlaceholder":397},[604],{"type":29,"value":400},{"type":20,"tag":189,"props":606,"children":608},{"class":191,"line":607},35,[609],{"type":20,"tag":189,"props":610,"children":611},{"style":196},[612],{"type":29,"value":199},{"type":20,"tag":189,"props":614,"children":616},{"class":191,"line":615},36,[617,621],{"type":20,"tag":189,"props":618,"children":619},{"style":206},[620],{"type":29,"value":209},{"type":20,"tag":189,"props":622,"children":623},{"style":206},[624],{"type":29,"value":214},{"type":20,"tag":189,"props":626,"children":628},{"class":191,"line":627},37,[629,633],{"type":20,"tag":189,"props":630,"children":631},{"style":206},[632],{"type":29,"value":223},{"type":20,"tag":189,"props":634,"children":635},{"style":206},[636],{"type":29,"value":637}," store\n",{"type":20,"tag":189,"props":639,"children":641},{"class":191,"line":640},38,[642,646],{"type":20,"tag":189,"props":643,"children":644},{"style":206},[645],{"type":29,"value":237},{"type":20,"tag":189,"props":647,"children":648},{"style":206},[649],{"type":29,"value":446},{"type":20,"tag":189,"props":651,"children":653},{"class":191,"line":652},39,[654,658],{"type":20,"tag":189,"props":655,"children":656},{"style":206},[657],{"type":29,"value":251},{"type":20,"tag":189,"props":659,"children":660},{"style":206},[661],{"type":29,"value":662}," au.com.businessautomationtechnology.store\n",{"type":20,"tag":189,"props":664,"children":666},{"class":191,"line":665},40,[667,671],{"type":20,"tag":189,"props":668,"children":669},{"style":206},[670],{"type":29,"value":265},{"type":20,"tag":189,"props":672,"children":673},{"style":206},[674],{"type":29,"value":472},{"type":20,"tag":189,"props":676,"children":678},{"class":191,"line":677},41,[679,683],{"type":20,"tag":189,"props":680,"children":681},{"style":206},[682],{"type":29,"value":278},{"type":20,"tag":189,"props":684,"children":685},{"style":206},[686],{"type":29,"value":283},{"type":20,"tag":189,"props":688,"children":690},{"class":191,"line":689},42,[691,695],{"type":20,"tag":189,"props":692,"children":693},{"style":206},[694],{"type":29,"value":292},{"type":20,"tag":189,"props":696,"children":697},{"style":206},[698],{"type":29,"value":297},{"type":20,"tag":189,"props":700,"children":702},{"class":191,"line":701},43,[703,707],{"type":20,"tag":189,"props":704,"children":705},{"style":206},[706],{"type":29,"value":306},{"type":20,"tag":189,"props":708,"children":709},{"style":206},[710],{"type":29,"value":311},{"type":20,"tag":189,"props":712,"children":714},{"class":191,"line":713},44,[715,719],{"type":20,"tag":189,"props":716,"children":717},{"style":206},[718],{"type":29,"value":320},{"type":20,"tag":189,"props":720,"children":721},{"style":206},[722],{"type":29,"value":325},{"type":20,"tag":189,"props":724,"children":726},{"class":191,"line":725},45,[727,731],{"type":20,"tag":189,"props":728,"children":729},{"style":206},[730],{"type":29,"value":529},{"type":20,"tag":189,"props":732,"children":733},{"style":206},[734],{"type":29,"value":446},{"type":20,"tag":189,"props":736,"children":738},{"class":191,"line":737},46,[739,743],{"type":20,"tag":189,"props":740,"children":741},{"style":206},[742],{"type":29,"value":542},{"type":20,"tag":189,"props":744,"children":745},{"style":206},[746],{"type":29,"value":747}," 8082\n",{"type":20,"tag":189,"props":749,"children":751},{"class":191,"line":750},47,[752,756],{"type":20,"tag":189,"props":753,"children":754},{"style":206},[755],{"type":29,"value":334},{"type":20,"tag":189,"props":757,"children":758},{"style":206},[759],{"type":29,"value":339},{"type":20,"tag":189,"props":761,"children":763},{"class":191,"line":762},48,[764,768],{"type":20,"tag":189,"props":765,"children":766},{"style":206},[767],{"type":29,"value":348},{"type":20,"tag":189,"props":769,"children":770},{"style":206},[771],{"type":29,"value":353},{"type":20,"tag":189,"props":773,"children":775},{"class":191,"line":774},49,[776],{"type":20,"tag":189,"props":777,"children":778},{"style":196},[779],{"type":29,"value":381},{"type":20,"tag":189,"props":781,"children":783},{"class":191,"line":782},50,[784],{"type":20,"tag":189,"props":785,"children":786},{"style":196},[787],{"type":29,"value":788},"  entities Product\n",{"type":20,"tag":189,"props":790,"children":792},{"class":191,"line":791},51,[793],{"type":20,"tag":189,"props":794,"children":795},{"style":196},[796],{"type":29,"value":390},{"type":20,"tag":189,"props":798,"children":800},{"class":191,"line":799},52,[801],{"type":20,"tag":189,"props":802,"children":803},{"emptyLinePlaceholder":397},[804],{"type":29,"value":400},{"type":20,"tag":189,"props":806,"children":808},{"class":191,"line":807},53,[809],{"type":20,"tag":189,"props":810,"children":811},{"style":196},[812],{"type":29,"value":813},"entity Blog {\n",{"type":20,"tag":189,"props":815,"children":817},{"class":191,"line":816},54,[818,823,828,833],{"type":20,"tag":189,"props":819,"children":820},{"style":206},[821],{"type":29,"value":822},"  name",{"type":20,"tag":189,"props":824,"children":825},{"style":206},[826],{"type":29,"value":827}," String",{"type":20,"tag":189,"props":829,"children":830},{"style":206},[831],{"type":29,"value":832}," required",{"type":20,"tag":189,"props":834,"children":835},{"style":206},[836],{"type":29,"value":837}," minlength(3)\n",{"type":20,"tag":189,"props":839,"children":841},{"class":191,"line":840},55,[842,847,851,855],{"type":20,"tag":189,"props":843,"children":844},{"style":206},[845],{"type":29,"value":846},"  handle",{"type":20,"tag":189,"props":848,"children":849},{"style":206},[850],{"type":29,"value":827},{"type":20,"tag":189,"props":852,"children":853},{"style":206},[854],{"type":29,"value":832},{"type":20,"tag":189,"props":856,"children":857},{"style":206},[858],{"type":29,"value":859}," minlength(2)\n",{"type":20,"tag":189,"props":861,"children":863},{"class":191,"line":862},56,[864],{"type":20,"tag":189,"props":865,"children":866},{"style":196},[867],{"type":29,"value":390},{"type":20,"tag":189,"props":869,"children":871},{"class":191,"line":870},57,[872],{"type":20,"tag":189,"props":873,"children":874},{"emptyLinePlaceholder":397},[875],{"type":29,"value":400},{"type":20,"tag":189,"props":877,"children":879},{"class":191,"line":878},58,[880],{"type":20,"tag":189,"props":881,"children":882},{"style":196},[883],{"type":29,"value":884},"entity Post {\n",{"type":20,"tag":189,"props":886,"children":888},{"class":191,"line":887},59,[889,894,898],{"type":20,"tag":189,"props":890,"children":891},{"style":206},[892],{"type":29,"value":893},"  title",{"type":20,"tag":189,"props":895,"children":896},{"style":206},[897],{"type":29,"value":827},{"type":20,"tag":189,"props":899,"children":900},{"style":206},[901],{"type":29,"value":902}," required\n",{"type":20,"tag":189,"props":904,"children":906},{"class":191,"line":905},60,[907,912,917],{"type":20,"tag":189,"props":908,"children":909},{"style":206},[910],{"type":29,"value":911},"  content",{"type":20,"tag":189,"props":913,"children":914},{"style":206},[915],{"type":29,"value":916}," TextBlob",{"type":20,"tag":189,"props":918,"children":919},{"style":206},[920],{"type":29,"value":902},{"type":20,"tag":189,"props":922,"children":924},{"class":191,"line":923},61,[925,930,935],{"type":20,"tag":189,"props":926,"children":927},{"style":206},[928],{"type":29,"value":929},"  date",{"type":20,"tag":189,"props":931,"children":932},{"style":206},[933],{"type":29,"value":934}," Instant",{"type":20,"tag":189,"props":936,"children":937},{"style":206},[938],{"type":29,"value":902},{"type":20,"tag":189,"props":940,"children":942},{"class":191,"line":941},62,[943],{"type":20,"tag":189,"props":944,"children":945},{"style":196},[946],{"type":29,"value":390},{"type":20,"tag":189,"props":948,"children":950},{"class":191,"line":949},63,[951],{"type":20,"tag":189,"props":952,"children":953},{"emptyLinePlaceholder":397},[954],{"type":29,"value":400},{"type":20,"tag":189,"props":956,"children":958},{"class":191,"line":957},64,[959],{"type":20,"tag":189,"props":960,"children":961},{"emptyLinePlaceholder":397},[962],{"type":29,"value":400},{"type":20,"tag":189,"props":964,"children":966},{"class":191,"line":965},65,[967],{"type":20,"tag":189,"props":968,"children":969},{"style":196},[970],{"type":29,"value":971},"entity Product {\n",{"type":20,"tag":189,"props":973,"children":975},{"class":191,"line":974},66,[976,980,984],{"type":20,"tag":189,"props":977,"children":978},{"style":206},[979],{"type":29,"value":893},{"type":20,"tag":189,"props":981,"children":982},{"style":206},[983],{"type":29,"value":827},{"type":20,"tag":189,"props":985,"children":986},{"style":206},[987],{"type":29,"value":902},{"type":20,"tag":189,"props":989,"children":991},{"class":191,"line":990},67,[992,997,1002,1006],{"type":20,"tag":189,"props":993,"children":994},{"style":206},[995],{"type":29,"value":996},"  price",{"type":20,"tag":189,"props":998,"children":999},{"style":206},[1000],{"type":29,"value":1001}," BigDecimal",{"type":20,"tag":189,"props":1003,"children":1004},{"style":206},[1005],{"type":29,"value":832},{"type":20,"tag":189,"props":1007,"children":1008},{"style":206},[1009],{"type":29,"value":1010}," min(0)\n",{"type":20,"tag":189,"props":1012,"children":1014},{"class":191,"line":1013},68,[1015,1020],{"type":20,"tag":189,"props":1016,"children":1017},{"style":206},[1018],{"type":29,"value":1019},"  image",{"type":20,"tag":189,"props":1021,"children":1022},{"style":206},[1023],{"type":29,"value":1024}," ImageBlob\n",{"type":20,"tag":189,"props":1026,"children":1028},{"class":191,"line":1027},69,[1029],{"type":20,"tag":189,"props":1030,"children":1031},{"style":196},[1032],{"type":29,"value":390},{"type":20,"tag":189,"props":1034,"children":1036},{"class":191,"line":1035},70,[1037],{"type":20,"tag":189,"props":1038,"children":1039},{"emptyLinePlaceholder":397},[1040],{"type":29,"value":400},{"type":20,"tag":189,"props":1042,"children":1044},{"class":191,"line":1043},71,[1045],{"type":20,"tag":189,"props":1046,"children":1047},{"style":196},[1048],{"type":29,"value":1049},"relationship ManyToOne {\n",{"type":20,"tag":189,"props":1051,"children":1053},{"class":191,"line":1052},72,[1054,1059],{"type":20,"tag":189,"props":1055,"children":1056},{"style":206},[1057],{"type":29,"value":1058},"  Post{blog(name)",{"type":20,"tag":189,"props":1060,"children":1061},{"style":196},[1062],{"type":29,"value":1063},"} to Blog\n",{"type":20,"tag":189,"props":1065,"children":1067},{"class":191,"line":1066},73,[1068],{"type":20,"tag":189,"props":1069,"children":1070},{"style":196},[1071],{"type":29,"value":390},{"type":20,"tag":189,"props":1073,"children":1075},{"class":191,"line":1074},74,[1076],{"type":20,"tag":189,"props":1077,"children":1078},{"emptyLinePlaceholder":397},[1079],{"type":29,"value":400},{"type":20,"tag":189,"props":1081,"children":1083},{"class":191,"line":1082},75,[1084],{"type":20,"tag":189,"props":1085,"children":1086},{"emptyLinePlaceholder":397},[1087],{"type":29,"value":400},{"type":20,"tag":189,"props":1089,"children":1091},{"class":191,"line":1090},76,[1092],{"type":20,"tag":189,"props":1093,"children":1094},{"style":196},[1095],{"type":29,"value":1096},"paginate Post with infinite-scroll\n",{"type":20,"tag":189,"props":1098,"children":1100},{"class":191,"line":1099},77,[1101],{"type":20,"tag":189,"props":1102,"children":1103},{"style":196},[1104],{"type":29,"value":1105},"paginate Product with pagination\n",{"type":20,"tag":189,"props":1107,"children":1109},{"class":191,"line":1108},78,[1110],{"type":20,"tag":189,"props":1111,"children":1112},{"emptyLinePlaceholder":397},[1113],{"type":29,"value":400},{"type":20,"tag":189,"props":1115,"children":1117},{"class":191,"line":1116},79,[1118],{"type":20,"tag":189,"props":1119,"children":1120},{"style":196},[1121],{"type":29,"value":1122},"deployment {\n",{"type":20,"tag":189,"props":1124,"children":1126},{"class":191,"line":1125},80,[1127,1132],{"type":20,"tag":189,"props":1128,"children":1129},{"style":206},[1130],{"type":29,"value":1131},"  deploymentType",{"type":20,"tag":189,"props":1133,"children":1134},{"style":206},[1135],{"type":29,"value":1136}," docker-compose\n",{"type":20,"tag":189,"props":1138,"children":1140},{"class":191,"line":1139},81,[1141,1146],{"type":20,"tag":189,"props":1142,"children":1143},{"style":206},[1144],{"type":29,"value":1145},"  serviceDiscoveryType",{"type":20,"tag":189,"props":1147,"children":1148},{"style":206},[1149],{"type":29,"value":339},{"type":20,"tag":189,"props":1151,"children":1153},{"class":191,"line":1152},82,[1154,1159,1164,1169],{"type":20,"tag":189,"props":1155,"children":1156},{"style":206},[1157],{"type":29,"value":1158},"  appsFolders",{"type":20,"tag":189,"props":1160,"children":1161},{"style":206},[1162],{"type":29,"value":1163}," [gateway,",{"type":20,"tag":189,"props":1165,"children":1166},{"style":206},[1167],{"type":29,"value":1168}," demoapp,",{"type":20,"tag":189,"props":1170,"children":1171},{"style":206},[1172],{"type":29,"value":372},{"type":20,"tag":189,"props":1174,"children":1176},{"class":191,"line":1175},83,[1177,1182],{"type":20,"tag":189,"props":1178,"children":1179},{"style":206},[1180],{"type":29,"value":1181},"  dockerRepositoryName",{"type":20,"tag":189,"props":1183,"children":1185},{"style":1184},"--shiki-default:#79B8FF",[1186],{"type":29,"value":1187}," \"francoisbotha\"\n",{"type":20,"tag":189,"props":1189,"children":1191},{"class":191,"line":1190},84,[1192],{"type":20,"tag":189,"props":1193,"children":1194},{"style":196},[1195],{"type":29,"value":390},{"type":20,"tag":21,"props":1197,"children":1198},{},[1199],{"type":29,"value":1200},"Run:",{"type":20,"tag":178,"props":1202,"children":1206},{"className":1203,"code":1204,"language":1205,"meta":8,"style":8},"language-bash shiki shiki-themes github-dark","jhipster jdl application_def_jva.jdl\n","bash",[1207],{"type":20,"tag":185,"props":1208,"children":1209},{"__ignoreMap":8},[1210],{"type":20,"tag":189,"props":1211,"children":1212},{"class":191,"line":192},[1213,1219,1225],{"type":20,"tag":189,"props":1214,"children":1216},{"style":1215},"--shiki-default:#B392F0",[1217],{"type":29,"value":1218},"jhipster",{"type":20,"tag":189,"props":1220,"children":1222},{"style":1221},"--shiki-default:#9ECBFF",[1223],{"type":29,"value":1224}," jdl",{"type":20,"tag":189,"props":1226,"children":1227},{"style":1221},[1228],{"type":29,"value":1229}," application_def_jva.jdl\n",{"type":20,"tag":21,"props":1231,"children":1232},{},[1233],{"type":29,"value":1234},"Jhipster will use the settings defined in the above jdl file to genarete\nour base application. When completed, you should see the screen below:",{"type":20,"tag":21,"props":1236,"children":1237},{},[1238],{"type":20,"tag":34,"props":1239,"children":1243},{"alt":8,"height":1240,"src":1241,"width":1242},502,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage2.png",602,[],{"type":20,"tag":21,"props":1245,"children":1246},{},[1247],{"type":20,"tag":25,"props":1248,"children":1249},{},[1250],{"type":29,"value":1251},"Milestone 2: Configure Docker files and configurations and start up databases",{"type":20,"tag":21,"props":1253,"children":1254},{},[1255],{"type":29,"value":1256},"Some useful Docker commands for this milestone:",{"type":20,"tag":21,"props":1258,"children":1259},{},[1260],{"type":29,"value":1261},"List all docker containers:",{"type":20,"tag":178,"props":1263,"children":1265},{"className":1203,"code":1264,"language":1205,"meta":8,"style":8},"docker ps -a\n",[1266],{"type":20,"tag":185,"props":1267,"children":1268},{"__ignoreMap":8},[1269],{"type":20,"tag":189,"props":1270,"children":1271},{"class":191,"line":192},[1272,1277,1282],{"type":20,"tag":189,"props":1273,"children":1274},{"style":1215},[1275],{"type":29,"value":1276},"docker",{"type":20,"tag":189,"props":1278,"children":1279},{"style":1221},[1280],{"type":29,"value":1281}," ps",{"type":20,"tag":189,"props":1283,"children":1284},{"style":1184},[1285],{"type":29,"value":1286}," -a\n",{"type":20,"tag":21,"props":1288,"children":1289},{},[1290],{"type":29,"value":1291},"Stop all running containers:",{"type":20,"tag":178,"props":1293,"children":1295},{"className":1203,"code":1294,"language":1205,"meta":8,"style":8},"docker stop \\$(docker ps -q)\n",[1296],{"type":20,"tag":185,"props":1297,"children":1298},{"__ignoreMap":8},[1299],{"type":20,"tag":189,"props":1300,"children":1301},{"class":191,"line":192},[1302,1306,1311,1316,1321,1325,1329,1334],{"type":20,"tag":189,"props":1303,"children":1304},{"style":1215},[1305],{"type":29,"value":1276},{"type":20,"tag":189,"props":1307,"children":1308},{"style":1221},[1309],{"type":29,"value":1310}," stop",{"type":20,"tag":189,"props":1312,"children":1313},{"style":1184},[1314],{"type":29,"value":1315}," \\$",{"type":20,"tag":189,"props":1317,"children":1318},{"style":196},[1319],{"type":29,"value":1320},"(",{"type":20,"tag":189,"props":1322,"children":1323},{"style":1215},[1324],{"type":29,"value":1276},{"type":20,"tag":189,"props":1326,"children":1327},{"style":1221},[1328],{"type":29,"value":1281},{"type":20,"tag":189,"props":1330,"children":1331},{"style":1184},[1332],{"type":29,"value":1333}," -q",{"type":20,"tag":189,"props":1335,"children":1336},{"style":196},[1337],{"type":29,"value":1338},")\n",{"type":20,"tag":21,"props":1340,"children":1341},{},[1342],{"type":29,"value":1343},"Remove all stopped containers:",{"type":20,"tag":178,"props":1345,"children":1347},{"className":1203,"code":1346,"language":1205,"meta":8,"style":8},"docker rm \\$(docker ps -a -q)\n",[1348],{"type":20,"tag":185,"props":1349,"children":1350},{"__ignoreMap":8},[1351],{"type":20,"tag":189,"props":1352,"children":1353},{"class":191,"line":192},[1354,1358,1363,1367,1371,1375,1379,1384,1388],{"type":20,"tag":189,"props":1355,"children":1356},{"style":1215},[1357],{"type":29,"value":1276},{"type":20,"tag":189,"props":1359,"children":1360},{"style":1221},[1361],{"type":29,"value":1362}," rm",{"type":20,"tag":189,"props":1364,"children":1365},{"style":1184},[1366],{"type":29,"value":1315},{"type":20,"tag":189,"props":1368,"children":1369},{"style":196},[1370],{"type":29,"value":1320},{"type":20,"tag":189,"props":1372,"children":1373},{"style":1215},[1374],{"type":29,"value":1276},{"type":20,"tag":189,"props":1376,"children":1377},{"style":1221},[1378],{"type":29,"value":1281},{"type":20,"tag":189,"props":1380,"children":1381},{"style":1184},[1382],{"type":29,"value":1383}," -a",{"type":20,"tag":189,"props":1385,"children":1386},{"style":1184},[1387],{"type":29,"value":1333},{"type":20,"tag":189,"props":1389,"children":1390},{"style":196},[1391],{"type":29,"value":1338},{"type":20,"tag":21,"props":1393,"children":1394},{},[1395],{"type":29,"value":1396},"First, start the Consul server:",{"type":20,"tag":178,"props":1398,"children":1400},{"className":1203,"code":1399,"language":1205,"meta":8,"style":8},"cd gateway\ndocker compose -f src\u002Fmain\u002Fdocker\u002Fconsul.yml up -d\n",[1401],{"type":20,"tag":185,"props":1402,"children":1403},{"__ignoreMap":8},[1404,1416],{"type":20,"tag":189,"props":1405,"children":1406},{"class":191,"line":192},[1407,1412],{"type":20,"tag":189,"props":1408,"children":1409},{"style":1184},[1410],{"type":29,"value":1411},"cd",{"type":20,"tag":189,"props":1413,"children":1414},{"style":1221},[1415],{"type":29,"value":228},{"type":20,"tag":189,"props":1417,"children":1418},{"class":191,"line":202},[1419,1423,1428,1433,1438,1443],{"type":20,"tag":189,"props":1420,"children":1421},{"style":1215},[1422],{"type":29,"value":1276},{"type":20,"tag":189,"props":1424,"children":1425},{"style":1221},[1426],{"type":29,"value":1427}," compose",{"type":20,"tag":189,"props":1429,"children":1430},{"style":1184},[1431],{"type":29,"value":1432}," -f",{"type":20,"tag":189,"props":1434,"children":1435},{"style":1221},[1436],{"type":29,"value":1437}," src\u002Fmain\u002Fdocker\u002Fconsul.yml",{"type":20,"tag":189,"props":1439,"children":1440},{"style":1221},[1441],{"type":29,"value":1442}," up",{"type":20,"tag":189,"props":1444,"children":1445},{"style":1184},[1446],{"type":29,"value":1447}," -d\n",{"type":20,"tag":21,"props":1449,"children":1450},{},[1451],{"type":20,"tag":34,"props":1452,"children":1455},{"alt":8,"height":1453,"src":1454,"width":1242},120,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage3.png",[],{"type":20,"tag":21,"props":1457,"children":1458},{},[1459],{"type":20,"tag":34,"props":1460,"children":1463},{"alt":8,"height":1461,"src":1462,"width":1242},359,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage4.png",[],{"type":20,"tag":21,"props":1465,"children":1466},{},[1467],{"type":29,"value":1468},"Next, update Postgresql port numbers for databases used by gateway and micro services:",{"type":20,"tag":21,"props":1470,"children":1471},{},[1472],{"type":29,"value":1473},"    ports:",{"type":20,"tag":21,"props":1475,"children":1476},{},[1477],{"type":29,"value":1478},"      - 127.0.0.1:5433:5433",{"type":20,"tag":21,"props":1480,"children":1481},{},[1482,1484,1488,1490,1493],{"type":29,"value":1483},"Gateway: 5434",{"type":20,"tag":1485,"props":1486,"children":1487},"br",{},[],{"type":29,"value":1489},"\nStore: 5435",{"type":20,"tag":1485,"props":1491,"children":1492},{},[],{"type":29,"value":1494},"\nDemoApp: 5436",{"type":20,"tag":21,"props":1496,"children":1497},{},[1498],{"type":29,"value":1499},"For example, to update the \"Store\" microservice, we update the docker\nfile as follows:",{"type":20,"tag":21,"props":1501,"children":1502},{},[1503],{"type":20,"tag":34,"props":1504,"children":1507},{"alt":8,"height":1505,"src":1506,"width":1242},479,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage5.png",[],{"type":20,"tag":21,"props":1509,"children":1510},{},[1511],{"type":29,"value":1512},"(Remember to add the password)",{"type":20,"tag":21,"props":1514,"children":1515},{},[1516],{"type":29,"value":1517},"Then update the application-dev.yml properties file, adding the\nconnection url and the password:",{"type":20,"tag":21,"props":1519,"children":1520},{},[1521],{"type":20,"tag":34,"props":1522,"children":1525},{"alt":8,"height":1523,"src":1524,"width":1242},555,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage6.png",[],{"type":20,"tag":21,"props":1527,"children":1528},{},[1529],{"type":29,"value":1530},"Now start the database:",{"type":20,"tag":178,"props":1532,"children":1534},{"className":1203,"code":1533,"language":1205,"meta":8,"style":8},"cd store\ndocker compose -f src\u002Fmain\u002Fdocker\u002Fpostgresql.yml up -d\n",[1535],{"type":20,"tag":185,"props":1536,"children":1537},{"__ignoreMap":8},[1538,1549],{"type":20,"tag":189,"props":1539,"children":1540},{"class":191,"line":192},[1541,1545],{"type":20,"tag":189,"props":1542,"children":1543},{"style":1184},[1544],{"type":29,"value":1411},{"type":20,"tag":189,"props":1546,"children":1547},{"style":1221},[1548],{"type":29,"value":637},{"type":20,"tag":189,"props":1550,"children":1551},{"class":191,"line":202},[1552,1556,1560,1564,1569,1573],{"type":20,"tag":189,"props":1553,"children":1554},{"style":1215},[1555],{"type":29,"value":1276},{"type":20,"tag":189,"props":1557,"children":1558},{"style":1221},[1559],{"type":29,"value":1427},{"type":20,"tag":189,"props":1561,"children":1562},{"style":1184},[1563],{"type":29,"value":1432},{"type":20,"tag":189,"props":1565,"children":1566},{"style":1221},[1567],{"type":29,"value":1568}," src\u002Fmain\u002Fdocker\u002Fpostgresql.yml",{"type":20,"tag":189,"props":1570,"children":1571},{"style":1221},[1572],{"type":29,"value":1442},{"type":20,"tag":189,"props":1574,"children":1575},{"style":1184},[1576],{"type":29,"value":1447},{"type":20,"tag":21,"props":1578,"children":1579},{},[1580,1582,1585],{"type":29,"value":1581},"This will start the docker container:",{"type":20,"tag":1485,"props":1583,"children":1584},{},[],{"type":20,"tag":34,"props":1586,"children":1589},{"alt":8,"height":1587,"src":1588,"width":1242},226,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage7.png",[],{"type":20,"tag":21,"props":1591,"children":1592},{},[1593],{"type":29,"value":1594},"Now run the micro-service:",{"type":20,"tag":178,"props":1596,"children":1598},{"className":1203,"code":1597,"language":1205,"meta":8,"style":8},"cd store\nmvnw\n",[1599],{"type":20,"tag":185,"props":1600,"children":1601},{"__ignoreMap":8},[1602,1613],{"type":20,"tag":189,"props":1603,"children":1604},{"class":191,"line":192},[1605,1609],{"type":20,"tag":189,"props":1606,"children":1607},{"style":1184},[1608],{"type":29,"value":1411},{"type":20,"tag":189,"props":1610,"children":1611},{"style":1221},[1612],{"type":29,"value":637},{"type":20,"tag":189,"props":1614,"children":1615},{"class":191,"line":202},[1616],{"type":20,"tag":189,"props":1617,"children":1618},{"style":1215},[1619],{"type":29,"value":1620},"mvnw\n",{"type":20,"tag":21,"props":1622,"children":1623},{},[1624,1626],{"type":29,"value":1625},"If you get the error message below, be sure to specify the correct profiles:\n",{"type":20,"tag":34,"props":1627,"children":1630},{"alt":8,"height":1628,"src":1629,"width":1242},114,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage8.png",[],{"type":20,"tag":178,"props":1632,"children":1634},{"className":1203,"code":1633,"language":1205,"meta":8,"style":8},"cd store\nmvnw spring-boot:run -Dspring-boot.run.profiles=dev\n",[1635],{"type":20,"tag":185,"props":1636,"children":1637},{"__ignoreMap":8},[1638,1649],{"type":20,"tag":189,"props":1639,"children":1640},{"class":191,"line":192},[1641,1645],{"type":20,"tag":189,"props":1642,"children":1643},{"style":1184},[1644],{"type":29,"value":1411},{"type":20,"tag":189,"props":1646,"children":1647},{"style":1221},[1648],{"type":29,"value":637},{"type":20,"tag":189,"props":1650,"children":1651},{"class":191,"line":202},[1652,1657,1662],{"type":20,"tag":189,"props":1653,"children":1654},{"style":1215},[1655],{"type":29,"value":1656},"mvnw",{"type":20,"tag":189,"props":1658,"children":1659},{"style":1221},[1660],{"type":29,"value":1661}," spring-boot:run",{"type":20,"tag":189,"props":1663,"children":1664},{"style":1184},[1665],{"type":29,"value":1666}," -Dspring-boot.run.profiles=dev\n",{"type":20,"tag":21,"props":1668,"children":1669},{},[1670],{"type":29,"value":1671},"(Note: alterntatively you can also add the default active Spring Profile to your environment variables:\nSPRING_PROFILES_ACTIVE=dev)",{"type":20,"tag":21,"props":1673,"children":1674},{},[1675],{"type":29,"value":1676},"Do the same for the gateway and the \"Demo App\" microservice.",{"type":20,"tag":21,"props":1678,"children":1679},{},[1680],{"type":29,"value":1681},"Once all the components have been started, consul should list the\nservices as follows:",{"type":20,"tag":21,"props":1683,"children":1684},{},[1685,1690,1693,1696],{"type":20,"tag":34,"props":1686,"children":1689},{"alt":8,"height":1687,"src":1688,"width":1242},273,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage9.png",[],{"type":20,"tag":1485,"props":1691,"children":1692},{},[],{"type":20,"tag":1485,"props":1694,"children":1695},{},[],{"type":29,"value":1697},"\nAnd docker should have containers running for all databases and Consul:",{"type":20,"tag":21,"props":1699,"children":1700},{},[1701],{"type":20,"tag":34,"props":1702,"children":1705},{"alt":8,"height":1703,"src":1704,"width":1242},328,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage10.png",[],{"type":20,"tag":21,"props":1707,"children":1708},{},[1709,1711,1714],{"type":29,"value":1710},"Once all the services are running:",{"type":20,"tag":1485,"props":1712,"children":1713},{},[],{"type":20,"tag":34,"props":1715,"children":1718},{"alt":8,"height":1716,"src":1717,"width":1242},299,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage11.png",[],{"type":20,"tag":21,"props":1720,"children":1721},{},[1722,1724,1727],{"type":29,"value":1723},"You should be able to access the micro-services from your browser:",{"type":20,"tag":1485,"props":1725,"children":1726},{},[],{"type":20,"tag":34,"props":1728,"children":1731},{"alt":8,"height":1729,"src":1730,"width":1242},352,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage12.png",[],{"type":20,"tag":21,"props":1733,"children":1734},{},[1735],{"type":20,"tag":34,"props":1736,"children":1738},{"alt":8,"height":1729,"src":1737,"width":1242},"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage13.png",[],{"type":20,"tag":21,"props":1740,"children":1741},{},[1742],{"type":20,"tag":34,"props":1743,"children":1746},{"alt":8,"height":1744,"src":1745,"width":1242},351,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage14.png",[],{"type":20,"tag":21,"props":1748,"children":1749},{},[1750],{"type":20,"tag":25,"props":1751,"children":1752},{},[1753],{"type":29,"value":113},{"type":20,"tag":21,"props":1755,"children":1756},{},[1757,1759,1762,1765,1767,1770],{"type":29,"value":1758},"To enable zero turnaround UI development, run npm start in the gateway\nfolder.",{"type":20,"tag":1485,"props":1760,"children":1761},{},[],{"type":20,"tag":1485,"props":1763,"children":1764},{},[],{"type":29,"value":1766},"\nThe following error is displayed in the browser:",{"type":20,"tag":1485,"props":1768,"children":1769},{},[],{"type":20,"tag":34,"props":1771,"children":1774},{"alt":8,"height":1772,"src":1773,"width":1242},264,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage15.png",[],{"type":20,"tag":21,"props":1776,"children":1777},{},[1778,1780,1783],{"type":29,"value":1779},"To fix it, we need add the following to the WebPack configuration to\nignore Sass depreciation warnings:",{"type":20,"tag":1485,"props":1781,"children":1782},{},[],{"type":20,"tag":34,"props":1784,"children":1787},{"alt":8,"height":1785,"src":1786,"width":1242},386,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage16.png",[],{"type":20,"tag":21,"props":1789,"children":1790},{},[1791,1793,1796],{"type":29,"value":1792},"Now the Gatway can be accessed on port 9000:",{"type":20,"tag":1485,"props":1794,"children":1795},{},[],{"type":20,"tag":34,"props":1797,"children":1800},{"alt":8,"height":1798,"src":1799,"width":1242},295,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage17.png",[],{"type":20,"tag":21,"props":1802,"children":1803},{},[1804,1806,1809],{"type":29,"value":1805},"In order to display the micro-service entities in the menu above, we\nneed to fix our security configuration in the gateway, as follows:",{"type":20,"tag":1485,"props":1807,"children":1808},{},[],{"type":20,"tag":34,"props":1810,"children":1813},{"alt":8,"height":1811,"src":1812,"width":1242},335,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage18.png",[],{"type":20,"tag":21,"props":1815,"children":1816},{},[1817,1819,1822],{"type":29,"value":1818},"In the SecurityConfiguration.java file, add the following line:",{"type":20,"tag":1485,"props":1820,"children":1821},{},[],{"type":29,"value":1823},"\n   .pathMatchers(\"\u002Fservices\u002F*\u002F*\u002F*.js\").permitAll()",{"type":20,"tag":21,"props":1825,"children":1826},{},[1827,1829,1832],{"type":29,"value":1828},"Now the menu items will display correctly:",{"type":20,"tag":1485,"props":1830,"children":1831},{},[],{"type":20,"tag":34,"props":1833,"children":1835},{"alt":8,"height":1687,"src":1834,"width":1242},"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage19.png",[],{"type":20,"tag":21,"props":1837,"children":1838},{},[1839],{"type":20,"tag":25,"props":1840,"children":1841},{},[1842],{"type":29,"value":118},{"type":20,"tag":21,"props":1844,"children":1845},{},[1846],{"type":29,"value":1847},"Note: The following sections some of the changes required for the\ninitial setup of the Vue Admin -- all code changes can be reviewed in\nthe GitHub repo.",{"type":20,"tag":21,"props":1849,"children":1850},{},[1851,1853,1856],{"type":29,"value":1852},"Add the following line to the tsconfig.app.json file:",{"type":20,"tag":1485,"props":1854,"children":1855},{},[],{"type":29,"value":1857},"\n\"moduleResolution\": \"node\",",{"type":20,"tag":21,"props":1859,"children":1860},{},[1861],{"type":20,"tag":34,"props":1862,"children":1864},{"alt":8,"height":1798,"src":1863,"width":1242},"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage20.png",[],{"type":20,"tag":21,"props":1866,"children":1867},{},[1868],{"type":29,"value":1869},"Boostrap is configured in the config-bootstrap-vue.ts file, locted in\nthe location below:",{"type":20,"tag":21,"props":1871,"children":1872},{},[1873],{"type":20,"tag":34,"props":1874,"children":1877},{"alt":8,"height":1798,"src":1875,"width":1876},"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage21.png",213,[],{"type":20,"tag":21,"props":1879,"children":1880},{},[1881],{"type":29,"value":1882},"Update this file by appending:",{"type":20,"tag":178,"props":1884,"children":1888},{"className":1885,"code":1886,"language":1887,"meta":8,"style":8},"language-javascript shiki shiki-themes github-dark","  BImg,\n  BNav,\n  BSidebar,\n  VBToggle,\n  BFormSelect,\n  BCard,\n  BContainer,\n  BRow,\n  BCol,\n  BTabs,\n  BTab,\n  BTooltip\n  \u002F\u002F jhcc-custom end\n\n","javascript",[1889],{"type":20,"tag":185,"props":1890,"children":1891},{"__ignoreMap":8},[1892,1900,1908,1916,1924,1932,1940,1948,1956,1964,1972,1980,1988],{"type":20,"tag":189,"props":1893,"children":1894},{"class":191,"line":192},[1895],{"type":20,"tag":189,"props":1896,"children":1897},{"style":196},[1898],{"type":29,"value":1899},"  BImg,\n",{"type":20,"tag":189,"props":1901,"children":1902},{"class":191,"line":202},[1903],{"type":20,"tag":189,"props":1904,"children":1905},{"style":196},[1906],{"type":29,"value":1907},"  BNav,\n",{"type":20,"tag":189,"props":1909,"children":1910},{"class":191,"line":217},[1911],{"type":20,"tag":189,"props":1912,"children":1913},{"style":196},[1914],{"type":29,"value":1915},"  BSidebar,\n",{"type":20,"tag":189,"props":1917,"children":1918},{"class":191,"line":231},[1919],{"type":20,"tag":189,"props":1920,"children":1921},{"style":196},[1922],{"type":29,"value":1923},"  VBToggle,\n",{"type":20,"tag":189,"props":1925,"children":1926},{"class":191,"line":245},[1927],{"type":20,"tag":189,"props":1928,"children":1929},{"style":196},[1930],{"type":29,"value":1931},"  BFormSelect,\n",{"type":20,"tag":189,"props":1933,"children":1934},{"class":191,"line":259},[1935],{"type":20,"tag":189,"props":1936,"children":1937},{"style":196},[1938],{"type":29,"value":1939},"  BCard,\n",{"type":20,"tag":189,"props":1941,"children":1942},{"class":191,"line":272},[1943],{"type":20,"tag":189,"props":1944,"children":1945},{"style":196},[1946],{"type":29,"value":1947},"  BContainer,\n",{"type":20,"tag":189,"props":1949,"children":1950},{"class":191,"line":286},[1951],{"type":20,"tag":189,"props":1952,"children":1953},{"style":196},[1954],{"type":29,"value":1955},"  BRow,\n",{"type":20,"tag":189,"props":1957,"children":1958},{"class":191,"line":300},[1959],{"type":20,"tag":189,"props":1960,"children":1961},{"style":196},[1962],{"type":29,"value":1963},"  BCol,\n",{"type":20,"tag":189,"props":1965,"children":1966},{"class":191,"line":314},[1967],{"type":20,"tag":189,"props":1968,"children":1969},{"style":196},[1970],{"type":29,"value":1971},"  BTabs,\n",{"type":20,"tag":189,"props":1973,"children":1974},{"class":191,"line":328},[1975],{"type":20,"tag":189,"props":1976,"children":1977},{"style":196},[1978],{"type":29,"value":1979},"  BTab,\n",{"type":20,"tag":189,"props":1981,"children":1982},{"class":191,"line":342},[1983],{"type":20,"tag":189,"props":1984,"children":1985},{"style":196},[1986],{"type":29,"value":1987},"  BTooltip\n",{"type":20,"tag":189,"props":1989,"children":1990},{"class":191,"line":356},[1991],{"type":20,"tag":189,"props":1992,"children":1994},{"style":1993},"--shiki-default:#6A737D",[1995],{"type":29,"value":1996},"  \u002F\u002F jhcc-custom end\n",{"type":20,"tag":21,"props":1998,"children":1999},{},[2000],{"type":29,"value":2001},"To the import section. Add the following:",{"type":20,"tag":178,"props":2003,"children":2005},{"className":1885,"code":2004,"language":1887,"meta":8,"style":8},"  \u002F\u002F jhcc-custom begin\n  vue.component('b-button', BButton);\n  vue.directive('bToggle', VBToggle);\n  vue.component('b-sidebar', BSidebar);\n  vue.component('b-img', BImg);\n  vue.component('b-nav', BNav);\n  vue.component('b-select', BFormSelect);\n  vue.component('b-card', BCard);\n  vue.component('b-row', BRow);\n  vue.component('b-col', BCol);\n  vue.component('b-tabs', BTabs);\n  vue.component('b-tab', BTab);\n  vue.component('b-container', BContainer);\n  vue.component('b-tooltip', BTooltip);\n  \u002F\u002F jhcc-custom end\n",[2006],{"type":20,"tag":185,"props":2007,"children":2008},{"__ignoreMap":8},[2009,2017,2044,2070,2095,2120,2145,2170,2195,2220,2245,2270,2295,2320,2345],{"type":20,"tag":189,"props":2010,"children":2011},{"class":191,"line":192},[2012],{"type":20,"tag":189,"props":2013,"children":2014},{"style":1993},[2015],{"type":29,"value":2016},"  \u002F\u002F jhcc-custom begin\n",{"type":20,"tag":189,"props":2018,"children":2019},{"class":191,"line":202},[2020,2025,2030,2034,2039],{"type":20,"tag":189,"props":2021,"children":2022},{"style":196},[2023],{"type":29,"value":2024},"  vue.",{"type":20,"tag":189,"props":2026,"children":2027},{"style":1215},[2028],{"type":29,"value":2029},"component",{"type":20,"tag":189,"props":2031,"children":2032},{"style":196},[2033],{"type":29,"value":1320},{"type":20,"tag":189,"props":2035,"children":2036},{"style":1221},[2037],{"type":29,"value":2038},"'b-button'",{"type":20,"tag":189,"props":2040,"children":2041},{"style":196},[2042],{"type":29,"value":2043},", BButton);\n",{"type":20,"tag":189,"props":2045,"children":2046},{"class":191,"line":217},[2047,2051,2056,2060,2065],{"type":20,"tag":189,"props":2048,"children":2049},{"style":196},[2050],{"type":29,"value":2024},{"type":20,"tag":189,"props":2052,"children":2053},{"style":1215},[2054],{"type":29,"value":2055},"directive",{"type":20,"tag":189,"props":2057,"children":2058},{"style":196},[2059],{"type":29,"value":1320},{"type":20,"tag":189,"props":2061,"children":2062},{"style":1221},[2063],{"type":29,"value":2064},"'bToggle'",{"type":20,"tag":189,"props":2066,"children":2067},{"style":196},[2068],{"type":29,"value":2069},", VBToggle);\n",{"type":20,"tag":189,"props":2071,"children":2072},{"class":191,"line":231},[2073,2077,2081,2085,2090],{"type":20,"tag":189,"props":2074,"children":2075},{"style":196},[2076],{"type":29,"value":2024},{"type":20,"tag":189,"props":2078,"children":2079},{"style":1215},[2080],{"type":29,"value":2029},{"type":20,"tag":189,"props":2082,"children":2083},{"style":196},[2084],{"type":29,"value":1320},{"type":20,"tag":189,"props":2086,"children":2087},{"style":1221},[2088],{"type":29,"value":2089},"'b-sidebar'",{"type":20,"tag":189,"props":2091,"children":2092},{"style":196},[2093],{"type":29,"value":2094},", BSidebar);\n",{"type":20,"tag":189,"props":2096,"children":2097},{"class":191,"line":245},[2098,2102,2106,2110,2115],{"type":20,"tag":189,"props":2099,"children":2100},{"style":196},[2101],{"type":29,"value":2024},{"type":20,"tag":189,"props":2103,"children":2104},{"style":1215},[2105],{"type":29,"value":2029},{"type":20,"tag":189,"props":2107,"children":2108},{"style":196},[2109],{"type":29,"value":1320},{"type":20,"tag":189,"props":2111,"children":2112},{"style":1221},[2113],{"type":29,"value":2114},"'b-img'",{"type":20,"tag":189,"props":2116,"children":2117},{"style":196},[2118],{"type":29,"value":2119},", BImg);\n",{"type":20,"tag":189,"props":2121,"children":2122},{"class":191,"line":259},[2123,2127,2131,2135,2140],{"type":20,"tag":189,"props":2124,"children":2125},{"style":196},[2126],{"type":29,"value":2024},{"type":20,"tag":189,"props":2128,"children":2129},{"style":1215},[2130],{"type":29,"value":2029},{"type":20,"tag":189,"props":2132,"children":2133},{"style":196},[2134],{"type":29,"value":1320},{"type":20,"tag":189,"props":2136,"children":2137},{"style":1221},[2138],{"type":29,"value":2139},"'b-nav'",{"type":20,"tag":189,"props":2141,"children":2142},{"style":196},[2143],{"type":29,"value":2144},", BNav);\n",{"type":20,"tag":189,"props":2146,"children":2147},{"class":191,"line":272},[2148,2152,2156,2160,2165],{"type":20,"tag":189,"props":2149,"children":2150},{"style":196},[2151],{"type":29,"value":2024},{"type":20,"tag":189,"props":2153,"children":2154},{"style":1215},[2155],{"type":29,"value":2029},{"type":20,"tag":189,"props":2157,"children":2158},{"style":196},[2159],{"type":29,"value":1320},{"type":20,"tag":189,"props":2161,"children":2162},{"style":1221},[2163],{"type":29,"value":2164},"'b-select'",{"type":20,"tag":189,"props":2166,"children":2167},{"style":196},[2168],{"type":29,"value":2169},", BFormSelect);\n",{"type":20,"tag":189,"props":2171,"children":2172},{"class":191,"line":286},[2173,2177,2181,2185,2190],{"type":20,"tag":189,"props":2174,"children":2175},{"style":196},[2176],{"type":29,"value":2024},{"type":20,"tag":189,"props":2178,"children":2179},{"style":1215},[2180],{"type":29,"value":2029},{"type":20,"tag":189,"props":2182,"children":2183},{"style":196},[2184],{"type":29,"value":1320},{"type":20,"tag":189,"props":2186,"children":2187},{"style":1221},[2188],{"type":29,"value":2189},"'b-card'",{"type":20,"tag":189,"props":2191,"children":2192},{"style":196},[2193],{"type":29,"value":2194},", BCard);\n",{"type":20,"tag":189,"props":2196,"children":2197},{"class":191,"line":300},[2198,2202,2206,2210,2215],{"type":20,"tag":189,"props":2199,"children":2200},{"style":196},[2201],{"type":29,"value":2024},{"type":20,"tag":189,"props":2203,"children":2204},{"style":1215},[2205],{"type":29,"value":2029},{"type":20,"tag":189,"props":2207,"children":2208},{"style":196},[2209],{"type":29,"value":1320},{"type":20,"tag":189,"props":2211,"children":2212},{"style":1221},[2213],{"type":29,"value":2214},"'b-row'",{"type":20,"tag":189,"props":2216,"children":2217},{"style":196},[2218],{"type":29,"value":2219},", BRow);\n",{"type":20,"tag":189,"props":2221,"children":2222},{"class":191,"line":314},[2223,2227,2231,2235,2240],{"type":20,"tag":189,"props":2224,"children":2225},{"style":196},[2226],{"type":29,"value":2024},{"type":20,"tag":189,"props":2228,"children":2229},{"style":1215},[2230],{"type":29,"value":2029},{"type":20,"tag":189,"props":2232,"children":2233},{"style":196},[2234],{"type":29,"value":1320},{"type":20,"tag":189,"props":2236,"children":2237},{"style":1221},[2238],{"type":29,"value":2239},"'b-col'",{"type":20,"tag":189,"props":2241,"children":2242},{"style":196},[2243],{"type":29,"value":2244},", BCol);\n",{"type":20,"tag":189,"props":2246,"children":2247},{"class":191,"line":328},[2248,2252,2256,2260,2265],{"type":20,"tag":189,"props":2249,"children":2250},{"style":196},[2251],{"type":29,"value":2024},{"type":20,"tag":189,"props":2253,"children":2254},{"style":1215},[2255],{"type":29,"value":2029},{"type":20,"tag":189,"props":2257,"children":2258},{"style":196},[2259],{"type":29,"value":1320},{"type":20,"tag":189,"props":2261,"children":2262},{"style":1221},[2263],{"type":29,"value":2264},"'b-tabs'",{"type":20,"tag":189,"props":2266,"children":2267},{"style":196},[2268],{"type":29,"value":2269},", BTabs);\n",{"type":20,"tag":189,"props":2271,"children":2272},{"class":191,"line":342},[2273,2277,2281,2285,2290],{"type":20,"tag":189,"props":2274,"children":2275},{"style":196},[2276],{"type":29,"value":2024},{"type":20,"tag":189,"props":2278,"children":2279},{"style":1215},[2280],{"type":29,"value":2029},{"type":20,"tag":189,"props":2282,"children":2283},{"style":196},[2284],{"type":29,"value":1320},{"type":20,"tag":189,"props":2286,"children":2287},{"style":1221},[2288],{"type":29,"value":2289},"'b-tab'",{"type":20,"tag":189,"props":2291,"children":2292},{"style":196},[2293],{"type":29,"value":2294},", BTab);\n",{"type":20,"tag":189,"props":2296,"children":2297},{"class":191,"line":356},[2298,2302,2306,2310,2315],{"type":20,"tag":189,"props":2299,"children":2300},{"style":196},[2301],{"type":29,"value":2024},{"type":20,"tag":189,"props":2303,"children":2304},{"style":1215},[2305],{"type":29,"value":2029},{"type":20,"tag":189,"props":2307,"children":2308},{"style":196},[2309],{"type":29,"value":1320},{"type":20,"tag":189,"props":2311,"children":2312},{"style":1221},[2313],{"type":29,"value":2314},"'b-container'",{"type":20,"tag":189,"props":2316,"children":2317},{"style":196},[2318],{"type":29,"value":2319},", BContainer);\n",{"type":20,"tag":189,"props":2321,"children":2322},{"class":191,"line":375},[2323,2327,2331,2335,2340],{"type":20,"tag":189,"props":2324,"children":2325},{"style":196},[2326],{"type":29,"value":2024},{"type":20,"tag":189,"props":2328,"children":2329},{"style":1215},[2330],{"type":29,"value":2029},{"type":20,"tag":189,"props":2332,"children":2333},{"style":196},[2334],{"type":29,"value":1320},{"type":20,"tag":189,"props":2336,"children":2337},{"style":1221},[2338],{"type":29,"value":2339},"'b-tooltip'",{"type":20,"tag":189,"props":2341,"children":2342},{"style":196},[2343],{"type":29,"value":2344},", BTooltip);\n",{"type":20,"tag":189,"props":2346,"children":2347},{"class":191,"line":384},[2348],{"type":20,"tag":189,"props":2349,"children":2350},{"style":1993},[2351],{"type":29,"value":1996},{"type":20,"tag":21,"props":2353,"children":2354},{},[2355,2357,2360,2363],{"type":29,"value":2356},"To the initBootStrapVue function, like this:",{"type":20,"tag":1485,"props":2358,"children":2359},{},[],{"type":20,"tag":1485,"props":2361,"children":2362},{},[],{"type":20,"tag":34,"props":2364,"children":2368},{"alt":8,"height":2365,"src":2366,"width":2367},504,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage22.png",298,[],{"type":20,"tag":21,"props":2370,"children":2371},{},[2372],{"type":29,"value":2373},"Similarly, Fontawsome needs to be configured in the config.ts file:",{"type":20,"tag":21,"props":2375,"children":2376},{},[2377],{"type":20,"tag":34,"props":2378,"children":2381},{"alt":8,"height":2379,"src":2380,"width":1242},208,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage23.png",[],{"type":20,"tag":21,"props":2383,"children":2384},{},[2385,2387,2390],{"type":29,"value":2386},"And here:",{"type":20,"tag":1485,"props":2388,"children":2389},{},[],{"type":20,"tag":34,"props":2391,"children":2395},{"alt":8,"height":2392,"src":2393,"width":2394},443,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage24.png",308,[],{"type":20,"tag":21,"props":2397,"children":2398},{},[2399],{"type":20,"tag":25,"props":2400,"children":2401},{},[2402],{"type":29,"value":2403},"Milestone 5: Udate the Nav Bar",{"type":20,"tag":21,"props":2405,"children":2406},{},[2407],{"type":29,"value":2408},"Now that we have the Gateway and micro services configured, our next\nstep is to modify the styling of the application and replace the top\nmenu with a side menu.",{"type":20,"tag":21,"props":2410,"children":2411},{},[2412],{"type":29,"value":2413},"First, lets update the app.vue file to alter the main structure of our\nfront-end appliction, like this:",{"type":20,"tag":21,"props":2415,"children":2416},{},[2417,2422,2425,2428],{"type":20,"tag":34,"props":2418,"children":2421},{"alt":8,"height":2419,"src":2420,"width":1242},342,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage25.png",[],{"type":20,"tag":1485,"props":2423,"children":2424},{},[],{"type":20,"tag":1485,"props":2426,"children":2427},{},[],{"type":29,"value":2429},"\nNext, we need to add the modified Navbar component.",{"type":20,"tag":21,"props":2431,"children":2432},{},[2433],{"type":29,"value":2434},"Let's create Sass files in the content.scss folder to store the styling\nfor our variables, the navbar and the sidemen:",{"type":20,"tag":21,"props":2436,"children":2437},{},[2438],{"type":20,"tag":34,"props":2439,"children":2443},{"alt":8,"height":2440,"src":2441,"width":2442},163,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage26.png",281,[],{"type":20,"tag":21,"props":2445,"children":2446},{},[2447],{"type":29,"value":2448},"We need to update the main.ts file to include these files:",{"type":20,"tag":21,"props":2450,"children":2451},{},[2452],{"type":20,"tag":34,"props":2453,"children":2457},{"alt":8,"height":2454,"src":2455,"width":2456},107,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage27.png",434,[],{"type":20,"tag":21,"props":2459,"children":2460},{},[2461],{"type":29,"value":2462},"Below is the initial state of our variables file",{"type":20,"tag":178,"props":2464,"children":2468},{"className":2465,"code":2466,"language":2467,"meta":8,"style":8},"language-css shiki shiki-themes github-dark","\u002F\u002F Navbar\n$navbar-bg-color: #2C3531;\n\n\u002F\u002F Sidebar Menu\n$sidebar-menu-bg-color: $navbar-bg-color;\n$sidebar-menu-hover-bg-color: #37a473;\n\n","css",[2469],{"type":20,"tag":185,"props":2470,"children":2471},{"__ignoreMap":8},[2472,2480,2509,2516,2529,2554],{"type":20,"tag":189,"props":2473,"children":2474},{"class":191,"line":192},[2475],{"type":20,"tag":189,"props":2476,"children":2477},{"style":196},[2478],{"type":29,"value":2479},"\u002F\u002F Navbar\n",{"type":20,"tag":189,"props":2481,"children":2482},{"class":191,"line":202},[2483,2488,2494,2499,2504],{"type":20,"tag":189,"props":2484,"children":2485},{"style":196},[2486],{"type":29,"value":2487},"$",{"type":20,"tag":189,"props":2489,"children":2491},{"style":2490},"--shiki-default:#85E89D",[2492],{"type":29,"value":2493},"navbar-bg-color",{"type":20,"tag":189,"props":2495,"children":2496},{"style":196},[2497],{"type":29,"value":2498},": ",{"type":20,"tag":189,"props":2500,"children":2501},{"style":206},[2502],{"type":29,"value":2503},"#2C3531",{"type":20,"tag":189,"props":2505,"children":2506},{"style":196},[2507],{"type":29,"value":2508},";\n",{"type":20,"tag":189,"props":2510,"children":2511},{"class":191,"line":217},[2512],{"type":20,"tag":189,"props":2513,"children":2514},{"emptyLinePlaceholder":397},[2515],{"type":29,"value":400},{"type":20,"tag":189,"props":2517,"children":2518},{"class":191,"line":231},[2519,2524],{"type":20,"tag":189,"props":2520,"children":2521},{"style":196},[2522],{"type":29,"value":2523},"\u002F\u002F Sidebar ",{"type":20,"tag":189,"props":2525,"children":2526},{"style":2490},[2527],{"type":29,"value":2528},"Menu\n",{"type":20,"tag":189,"props":2530,"children":2531},{"class":191,"line":245},[2532,2536,2541,2546,2550],{"type":20,"tag":189,"props":2533,"children":2534},{"style":196},[2535],{"type":29,"value":2487},{"type":20,"tag":189,"props":2537,"children":2538},{"style":2490},[2539],{"type":29,"value":2540},"sidebar-menu-bg-color",{"type":20,"tag":189,"props":2542,"children":2543},{"style":196},[2544],{"type":29,"value":2545},": $",{"type":20,"tag":189,"props":2547,"children":2548},{"style":2490},[2549],{"type":29,"value":2493},{"type":20,"tag":189,"props":2551,"children":2552},{"style":196},[2553],{"type":29,"value":2508},{"type":20,"tag":189,"props":2555,"children":2556},{"class":191,"line":259},[2557,2561,2566,2570,2575],{"type":20,"tag":189,"props":2558,"children":2559},{"style":196},[2560],{"type":29,"value":2487},{"type":20,"tag":189,"props":2562,"children":2563},{"style":2490},[2564],{"type":29,"value":2565},"sidebar-menu-hover-bg-color",{"type":20,"tag":189,"props":2567,"children":2568},{"style":196},[2569],{"type":29,"value":2498},{"type":20,"tag":189,"props":2571,"children":2572},{"style":206},[2573],{"type":29,"value":2574},"#37a473",{"type":20,"tag":189,"props":2576,"children":2577},{"style":196},[2578],{"type":29,"value":2508},{"type":20,"tag":21,"props":2580,"children":2581},{},[2582],{"type":29,"value":2583},"This allows us to easily modify the theming of our application.",{"type":20,"tag":21,"props":2585,"children":2586},{},[2587],{"type":29,"value":2588},"The following is the styling of the navbar:",{"type":20,"tag":178,"props":2590,"children":2592},{"className":2465,"code":2591,"language":2467,"meta":8,"style":8},"\u002F* ==========================================================================\nNavbar\n========================================================================== *\u002F\n\n@import 'va-variables';\n\n\u002F* jhcc-custom *\u002F\n.jva-navbar {\n    position: fixed !important;\n    top: 0;\n    right: 0;\n    left: 0;\n    z-index: 1000;\n    background-color: $navbar-bg-color;\n    height: 2.5rem;\n    padding: 0rem !important;\n    justify-content: start;\n  }\n  \n  \u002F* ==========================================================================\n      Title\n      ========================================================================== *\u002F\n  \n  .navbar-title {\n    display: inline-block;\n    vertical-align: middle;\n    font-weight: lighter;\n    color: white;\n    margin-left: 0.5rem;\n  }\n  \n  .jhipster-title {\n    font-size: larger;\n  }\n  \n  .navbar-version {\n    font-size: 10px;\n    vertical-align: sub;\n    color: white;\n  }\n  \n  .navbar-dark button {\n    color: white;\n  }\n  \n  .icon-sidebar {\n    display: inline-block;\n    margin-left: 10px;\n  }\n  \n  \u002F* ==========================================================================\n      Logo styles\n      ========================================================================== *\u002F\n  .navbar-brand.logo {\n    padding: 2px 2px;\n  }\n  \n  .logo .logo-img {\n    height: 25px;\n    display: inline-block;\n    vertical-align: middle;\n    width: 30px;\n  }\n  \n  .logo-img {\n    height: 100%;\n    background: url('..\u002F..\u002F..\u002Fcontent\u002Fimages\u002Ficon.png') no-repeat center center;\n    background-size: contain;\n    width: 100%;\n    filter: drop-shadow(0 0 0.05rem white);\n  }\n  \n  .sign-out {\n    color: white;\n    display: flex;\n    margin-left: auto;\n    padding-right: 2rem;\n    cursor: pointer; \u002F* Change cursor to pointer *\u002F\n    padding: 0.5rem 1rem; \u002F* Add padding for button-like appearance *\u002F\n    background-color: #2C3531; \u002F* Optional: background color *\u002F\n    border: none; \u002F* Optional: remove default border *\u002F\n    border-radius: 5px; \u002F* Optional: rounded corners *\u002F\n    align-items: center; \u002F* Center content vertically *\u002F\n    text-decoration: none; \u002F* Remove underline from text, if any *\u002F\n  }\n  \n  .sign-out:hover {\n    background-color: #565a5e; \u002F* Optional: darker background on hover *\u002F\n  }\n  \n  .sign-in {\n    color: white;\n    display: flex;\n    margin-left: auto;\n    padding-right: 2rem;\n    cursor: pointer; \u002F* Change cursor to pointer *\u002F\n    padding: 0.5rem 1rem; \u002F* Add padding for button-like appearance *\u002F\n    background-color: $navbar-bg-color; \u002F* Optional: background color *\u002F\n    border: none; \u002F* Optional: remove default border *\u002F\n    border-radius: 5px; \u002F* Optional: rounded corners *\u002F\n    align-items: center; \u002F* Center content vertically *\u002F\n    text-decoration: none; \u002F* Remove underline from text, if any *\u002F\n  }\n  \n  .sign-in:hover {\n    background-color: #565a5e; \u002F* Optional: darker background on hover *\u002F\n  }\n\n",[2593],{"type":20,"tag":185,"props":2594,"children":2595},{"__ignoreMap":8},[2596,2604,2612,2620,2627,2645,2652,2660,2672,2698,2719,2739,2759,2780,2793,2819,2847,2868,2875,2883,2891,2899,2907,2914,2926,2947,2968,2989,3010,3035,3042,3049,3061,3082,3089,3096,3108,3133,3153,3172,3179,3186,3203,3222,3229,3236,3248,3267,3290,3297,3304,3311,3319,3326,3338,3371,3378,3385,3402,3426,3445,3464,3489,3496,3503,3515,3540,3589,3610,3633,3682,3689,3696,3708,3727,3747,3767,3791,3818,3855,3879,3905,3935,3961,3986,3994,4002,4015,4041,4049,4057,4070,4090,4110,4129,4153,4177,4213,4230,4254,4282,4306,4330,4338,4346,4359,4383],{"type":20,"tag":189,"props":2597,"children":2598},{"class":191,"line":192},[2599],{"type":20,"tag":189,"props":2600,"children":2601},{"style":1993},[2602],{"type":29,"value":2603},"\u002F* ==========================================================================\n",{"type":20,"tag":189,"props":2605,"children":2606},{"class":191,"line":202},[2607],{"type":20,"tag":189,"props":2608,"children":2609},{"style":1993},[2610],{"type":29,"value":2611},"Navbar\n",{"type":20,"tag":189,"props":2613,"children":2614},{"class":191,"line":217},[2615],{"type":20,"tag":189,"props":2616,"children":2617},{"style":1993},[2618],{"type":29,"value":2619},"========================================================================== *\u002F\n",{"type":20,"tag":189,"props":2621,"children":2622},{"class":191,"line":231},[2623],{"type":20,"tag":189,"props":2624,"children":2625},{"emptyLinePlaceholder":397},[2626],{"type":29,"value":400},{"type":20,"tag":189,"props":2628,"children":2629},{"class":191,"line":245},[2630,2636,2641],{"type":20,"tag":189,"props":2631,"children":2633},{"style":2632},"--shiki-default:#F97583",[2634],{"type":29,"value":2635},"@import",{"type":20,"tag":189,"props":2637,"children":2638},{"style":1221},[2639],{"type":29,"value":2640}," 'va-variables'",{"type":20,"tag":189,"props":2642,"children":2643},{"style":196},[2644],{"type":29,"value":2508},{"type":20,"tag":189,"props":2646,"children":2647},{"class":191,"line":259},[2648],{"type":20,"tag":189,"props":2649,"children":2650},{"emptyLinePlaceholder":397},[2651],{"type":29,"value":400},{"type":20,"tag":189,"props":2653,"children":2654},{"class":191,"line":272},[2655],{"type":20,"tag":189,"props":2656,"children":2657},{"style":1993},[2658],{"type":29,"value":2659},"\u002F* jhcc-custom *\u002F\n",{"type":20,"tag":189,"props":2661,"children":2662},{"class":191,"line":286},[2663,2668],{"type":20,"tag":189,"props":2664,"children":2665},{"style":1215},[2666],{"type":29,"value":2667},".jva-navbar",{"type":20,"tag":189,"props":2669,"children":2670},{"style":196},[2671],{"type":29,"value":214},{"type":20,"tag":189,"props":2673,"children":2674},{"class":191,"line":300},[2675,2680,2684,2689,2694],{"type":20,"tag":189,"props":2676,"children":2677},{"style":1184},[2678],{"type":29,"value":2679},"    position",{"type":20,"tag":189,"props":2681,"children":2682},{"style":196},[2683],{"type":29,"value":2498},{"type":20,"tag":189,"props":2685,"children":2686},{"style":1184},[2687],{"type":29,"value":2688},"fixed",{"type":20,"tag":189,"props":2690,"children":2691},{"style":2632},[2692],{"type":29,"value":2693}," !important",{"type":20,"tag":189,"props":2695,"children":2696},{"style":196},[2697],{"type":29,"value":2508},{"type":20,"tag":189,"props":2699,"children":2700},{"class":191,"line":314},[2701,2706,2710,2715],{"type":20,"tag":189,"props":2702,"children":2703},{"style":1184},[2704],{"type":29,"value":2705},"    top",{"type":20,"tag":189,"props":2707,"children":2708},{"style":196},[2709],{"type":29,"value":2498},{"type":20,"tag":189,"props":2711,"children":2712},{"style":1184},[2713],{"type":29,"value":2714},"0",{"type":20,"tag":189,"props":2716,"children":2717},{"style":196},[2718],{"type":29,"value":2508},{"type":20,"tag":189,"props":2720,"children":2721},{"class":191,"line":328},[2722,2727,2731,2735],{"type":20,"tag":189,"props":2723,"children":2724},{"style":1184},[2725],{"type":29,"value":2726},"    right",{"type":20,"tag":189,"props":2728,"children":2729},{"style":196},[2730],{"type":29,"value":2498},{"type":20,"tag":189,"props":2732,"children":2733},{"style":1184},[2734],{"type":29,"value":2714},{"type":20,"tag":189,"props":2736,"children":2737},{"style":196},[2738],{"type":29,"value":2508},{"type":20,"tag":189,"props":2740,"children":2741},{"class":191,"line":342},[2742,2747,2751,2755],{"type":20,"tag":189,"props":2743,"children":2744},{"style":1184},[2745],{"type":29,"value":2746},"    left",{"type":20,"tag":189,"props":2748,"children":2749},{"style":196},[2750],{"type":29,"value":2498},{"type":20,"tag":189,"props":2752,"children":2753},{"style":1184},[2754],{"type":29,"value":2714},{"type":20,"tag":189,"props":2756,"children":2757},{"style":196},[2758],{"type":29,"value":2508},{"type":20,"tag":189,"props":2760,"children":2761},{"class":191,"line":356},[2762,2767,2771,2776],{"type":20,"tag":189,"props":2763,"children":2764},{"style":1184},[2765],{"type":29,"value":2766},"    z-index",{"type":20,"tag":189,"props":2768,"children":2769},{"style":196},[2770],{"type":29,"value":2498},{"type":20,"tag":189,"props":2772,"children":2773},{"style":1184},[2774],{"type":29,"value":2775},"1000",{"type":20,"tag":189,"props":2777,"children":2778},{"style":196},[2779],{"type":29,"value":2508},{"type":20,"tag":189,"props":2781,"children":2782},{"class":191,"line":375},[2783,2788],{"type":20,"tag":189,"props":2784,"children":2785},{"style":1184},[2786],{"type":29,"value":2787},"    background-color",{"type":20,"tag":189,"props":2789,"children":2790},{"style":196},[2791],{"type":29,"value":2792},": $navbar-bg-color;\n",{"type":20,"tag":189,"props":2794,"children":2795},{"class":191,"line":384},[2796,2801,2805,2810,2815],{"type":20,"tag":189,"props":2797,"children":2798},{"style":1184},[2799],{"type":29,"value":2800},"    height",{"type":20,"tag":189,"props":2802,"children":2803},{"style":196},[2804],{"type":29,"value":2498},{"type":20,"tag":189,"props":2806,"children":2807},{"style":1184},[2808],{"type":29,"value":2809},"2.5",{"type":20,"tag":189,"props":2811,"children":2812},{"style":2632},[2813],{"type":29,"value":2814},"rem",{"type":20,"tag":189,"props":2816,"children":2817},{"style":196},[2818],{"type":29,"value":2508},{"type":20,"tag":189,"props":2820,"children":2821},{"class":191,"line":393},[2822,2827,2831,2835,2839,2843],{"type":20,"tag":189,"props":2823,"children":2824},{"style":1184},[2825],{"type":29,"value":2826},"    padding",{"type":20,"tag":189,"props":2828,"children":2829},{"style":196},[2830],{"type":29,"value":2498},{"type":20,"tag":189,"props":2832,"children":2833},{"style":1184},[2834],{"type":29,"value":2714},{"type":20,"tag":189,"props":2836,"children":2837},{"style":2632},[2838],{"type":29,"value":2814},{"type":20,"tag":189,"props":2840,"children":2841},{"style":2632},[2842],{"type":29,"value":2693},{"type":20,"tag":189,"props":2844,"children":2845},{"style":196},[2846],{"type":29,"value":2508},{"type":20,"tag":189,"props":2848,"children":2849},{"class":191,"line":403},[2850,2855,2859,2864],{"type":20,"tag":189,"props":2851,"children":2852},{"style":1184},[2853],{"type":29,"value":2854},"    justify-content",{"type":20,"tag":189,"props":2856,"children":2857},{"style":196},[2858],{"type":29,"value":2498},{"type":20,"tag":189,"props":2860,"children":2861},{"style":1184},[2862],{"type":29,"value":2863},"start",{"type":20,"tag":189,"props":2865,"children":2866},{"style":196},[2867],{"type":29,"value":2508},{"type":20,"tag":189,"props":2869,"children":2870},{"class":191,"line":411},[2871],{"type":20,"tag":189,"props":2872,"children":2873},{"style":196},[2874],{"type":29,"value":381},{"type":20,"tag":189,"props":2876,"children":2877},{"class":191,"line":423},[2878],{"type":20,"tag":189,"props":2879,"children":2880},{"style":196},[2881],{"type":29,"value":2882},"  \n",{"type":20,"tag":189,"props":2884,"children":2885},{"class":191,"line":436},[2886],{"type":20,"tag":189,"props":2887,"children":2888},{"style":1993},[2889],{"type":29,"value":2890},"  \u002F* ==========================================================================\n",{"type":20,"tag":189,"props":2892,"children":2893},{"class":191,"line":449},[2894],{"type":20,"tag":189,"props":2895,"children":2896},{"style":1993},[2897],{"type":29,"value":2898},"      Title\n",{"type":20,"tag":189,"props":2900,"children":2901},{"class":191,"line":462},[2902],{"type":20,"tag":189,"props":2903,"children":2904},{"style":1993},[2905],{"type":29,"value":2906},"      ========================================================================== *\u002F\n",{"type":20,"tag":189,"props":2908,"children":2909},{"class":191,"line":475},[2910],{"type":20,"tag":189,"props":2911,"children":2912},{"style":196},[2913],{"type":29,"value":2882},{"type":20,"tag":189,"props":2915,"children":2916},{"class":191,"line":487},[2917,2922],{"type":20,"tag":189,"props":2918,"children":2919},{"style":1215},[2920],{"type":29,"value":2921},"  .navbar-title",{"type":20,"tag":189,"props":2923,"children":2924},{"style":196},[2925],{"type":29,"value":214},{"type":20,"tag":189,"props":2927,"children":2928},{"class":191,"line":499},[2929,2934,2938,2943],{"type":20,"tag":189,"props":2930,"children":2931},{"style":1184},[2932],{"type":29,"value":2933},"    display",{"type":20,"tag":189,"props":2935,"children":2936},{"style":196},[2937],{"type":29,"value":2498},{"type":20,"tag":189,"props":2939,"children":2940},{"style":1184},[2941],{"type":29,"value":2942},"inline-block",{"type":20,"tag":189,"props":2944,"children":2945},{"style":196},[2946],{"type":29,"value":2508},{"type":20,"tag":189,"props":2948,"children":2949},{"class":191,"line":511},[2950,2955,2959,2964],{"type":20,"tag":189,"props":2951,"children":2952},{"style":1184},[2953],{"type":29,"value":2954},"    vertical-align",{"type":20,"tag":189,"props":2956,"children":2957},{"style":196},[2958],{"type":29,"value":2498},{"type":20,"tag":189,"props":2960,"children":2961},{"style":1184},[2962],{"type":29,"value":2963},"middle",{"type":20,"tag":189,"props":2965,"children":2966},{"style":196},[2967],{"type":29,"value":2508},{"type":20,"tag":189,"props":2969,"children":2970},{"class":191,"line":523},[2971,2976,2980,2985],{"type":20,"tag":189,"props":2972,"children":2973},{"style":1184},[2974],{"type":29,"value":2975},"    font-weight",{"type":20,"tag":189,"props":2977,"children":2978},{"style":196},[2979],{"type":29,"value":2498},{"type":20,"tag":189,"props":2981,"children":2982},{"style":1184},[2983],{"type":29,"value":2984},"lighter",{"type":20,"tag":189,"props":2986,"children":2987},{"style":196},[2988],{"type":29,"value":2508},{"type":20,"tag":189,"props":2990,"children":2991},{"class":191,"line":536},[2992,2997,3001,3006],{"type":20,"tag":189,"props":2993,"children":2994},{"style":1184},[2995],{"type":29,"value":2996},"    color",{"type":20,"tag":189,"props":2998,"children":2999},{"style":196},[3000],{"type":29,"value":2498},{"type":20,"tag":189,"props":3002,"children":3003},{"style":1184},[3004],{"type":29,"value":3005},"white",{"type":20,"tag":189,"props":3007,"children":3008},{"style":196},[3009],{"type":29,"value":2508},{"type":20,"tag":189,"props":3011,"children":3012},{"class":191,"line":550},[3013,3018,3022,3027,3031],{"type":20,"tag":189,"props":3014,"children":3015},{"style":1184},[3016],{"type":29,"value":3017},"    margin-left",{"type":20,"tag":189,"props":3019,"children":3020},{"style":196},[3021],{"type":29,"value":2498},{"type":20,"tag":189,"props":3023,"children":3024},{"style":1184},[3025],{"type":29,"value":3026},"0.5",{"type":20,"tag":189,"props":3028,"children":3029},{"style":2632},[3030],{"type":29,"value":2814},{"type":20,"tag":189,"props":3032,"children":3033},{"style":196},[3034],{"type":29,"value":2508},{"type":20,"tag":189,"props":3036,"children":3037},{"class":191,"line":562},[3038],{"type":20,"tag":189,"props":3039,"children":3040},{"style":196},[3041],{"type":29,"value":381},{"type":20,"tag":189,"props":3043,"children":3044},{"class":191,"line":574},[3045],{"type":20,"tag":189,"props":3046,"children":3047},{"style":196},[3048],{"type":29,"value":2882},{"type":20,"tag":189,"props":3050,"children":3051},{"class":191,"line":582},[3052,3057],{"type":20,"tag":189,"props":3053,"children":3054},{"style":1215},[3055],{"type":29,"value":3056},"  .jhipster-title",{"type":20,"tag":189,"props":3058,"children":3059},{"style":196},[3060],{"type":29,"value":214},{"type":20,"tag":189,"props":3062,"children":3063},{"class":191,"line":591},[3064,3069,3073,3078],{"type":20,"tag":189,"props":3065,"children":3066},{"style":1184},[3067],{"type":29,"value":3068},"    font-size",{"type":20,"tag":189,"props":3070,"children":3071},{"style":196},[3072],{"type":29,"value":2498},{"type":20,"tag":189,"props":3074,"children":3075},{"style":1184},[3076],{"type":29,"value":3077},"larger",{"type":20,"tag":189,"props":3079,"children":3080},{"style":196},[3081],{"type":29,"value":2508},{"type":20,"tag":189,"props":3083,"children":3084},{"class":191,"line":599},[3085],{"type":20,"tag":189,"props":3086,"children":3087},{"style":196},[3088],{"type":29,"value":381},{"type":20,"tag":189,"props":3090,"children":3091},{"class":191,"line":607},[3092],{"type":20,"tag":189,"props":3093,"children":3094},{"style":196},[3095],{"type":29,"value":2882},{"type":20,"tag":189,"props":3097,"children":3098},{"class":191,"line":615},[3099,3104],{"type":20,"tag":189,"props":3100,"children":3101},{"style":1215},[3102],{"type":29,"value":3103},"  .navbar-version",{"type":20,"tag":189,"props":3105,"children":3106},{"style":196},[3107],{"type":29,"value":214},{"type":20,"tag":189,"props":3109,"children":3110},{"class":191,"line":627},[3111,3115,3119,3124,3129],{"type":20,"tag":189,"props":3112,"children":3113},{"style":1184},[3114],{"type":29,"value":3068},{"type":20,"tag":189,"props":3116,"children":3117},{"style":196},[3118],{"type":29,"value":2498},{"type":20,"tag":189,"props":3120,"children":3121},{"style":1184},[3122],{"type":29,"value":3123},"10",{"type":20,"tag":189,"props":3125,"children":3126},{"style":2632},[3127],{"type":29,"value":3128},"px",{"type":20,"tag":189,"props":3130,"children":3131},{"style":196},[3132],{"type":29,"value":2508},{"type":20,"tag":189,"props":3134,"children":3135},{"class":191,"line":640},[3136,3140,3144,3149],{"type":20,"tag":189,"props":3137,"children":3138},{"style":1184},[3139],{"type":29,"value":2954},{"type":20,"tag":189,"props":3141,"children":3142},{"style":196},[3143],{"type":29,"value":2498},{"type":20,"tag":189,"props":3145,"children":3146},{"style":1184},[3147],{"type":29,"value":3148},"sub",{"type":20,"tag":189,"props":3150,"children":3151},{"style":196},[3152],{"type":29,"value":2508},{"type":20,"tag":189,"props":3154,"children":3155},{"class":191,"line":652},[3156,3160,3164,3168],{"type":20,"tag":189,"props":3157,"children":3158},{"style":1184},[3159],{"type":29,"value":2996},{"type":20,"tag":189,"props":3161,"children":3162},{"style":196},[3163],{"type":29,"value":2498},{"type":20,"tag":189,"props":3165,"children":3166},{"style":1184},[3167],{"type":29,"value":3005},{"type":20,"tag":189,"props":3169,"children":3170},{"style":196},[3171],{"type":29,"value":2508},{"type":20,"tag":189,"props":3173,"children":3174},{"class":191,"line":665},[3175],{"type":20,"tag":189,"props":3176,"children":3177},{"style":196},[3178],{"type":29,"value":381},{"type":20,"tag":189,"props":3180,"children":3181},{"class":191,"line":677},[3182],{"type":20,"tag":189,"props":3183,"children":3184},{"style":196},[3185],{"type":29,"value":2882},{"type":20,"tag":189,"props":3187,"children":3188},{"class":191,"line":689},[3189,3194,3199],{"type":20,"tag":189,"props":3190,"children":3191},{"style":1215},[3192],{"type":29,"value":3193},"  .navbar-dark",{"type":20,"tag":189,"props":3195,"children":3196},{"style":2490},[3197],{"type":29,"value":3198}," button",{"type":20,"tag":189,"props":3200,"children":3201},{"style":196},[3202],{"type":29,"value":214},{"type":20,"tag":189,"props":3204,"children":3205},{"class":191,"line":701},[3206,3210,3214,3218],{"type":20,"tag":189,"props":3207,"children":3208},{"style":1184},[3209],{"type":29,"value":2996},{"type":20,"tag":189,"props":3211,"children":3212},{"style":196},[3213],{"type":29,"value":2498},{"type":20,"tag":189,"props":3215,"children":3216},{"style":1184},[3217],{"type":29,"value":3005},{"type":20,"tag":189,"props":3219,"children":3220},{"style":196},[3221],{"type":29,"value":2508},{"type":20,"tag":189,"props":3223,"children":3224},{"class":191,"line":713},[3225],{"type":20,"tag":189,"props":3226,"children":3227},{"style":196},[3228],{"type":29,"value":381},{"type":20,"tag":189,"props":3230,"children":3231},{"class":191,"line":725},[3232],{"type":20,"tag":189,"props":3233,"children":3234},{"style":196},[3235],{"type":29,"value":2882},{"type":20,"tag":189,"props":3237,"children":3238},{"class":191,"line":737},[3239,3244],{"type":20,"tag":189,"props":3240,"children":3241},{"style":1215},[3242],{"type":29,"value":3243},"  .icon-sidebar",{"type":20,"tag":189,"props":3245,"children":3246},{"style":196},[3247],{"type":29,"value":214},{"type":20,"tag":189,"props":3249,"children":3250},{"class":191,"line":750},[3251,3255,3259,3263],{"type":20,"tag":189,"props":3252,"children":3253},{"style":1184},[3254],{"type":29,"value":2933},{"type":20,"tag":189,"props":3256,"children":3257},{"style":196},[3258],{"type":29,"value":2498},{"type":20,"tag":189,"props":3260,"children":3261},{"style":1184},[3262],{"type":29,"value":2942},{"type":20,"tag":189,"props":3264,"children":3265},{"style":196},[3266],{"type":29,"value":2508},{"type":20,"tag":189,"props":3268,"children":3269},{"class":191,"line":762},[3270,3274,3278,3282,3286],{"type":20,"tag":189,"props":3271,"children":3272},{"style":1184},[3273],{"type":29,"value":3017},{"type":20,"tag":189,"props":3275,"children":3276},{"style":196},[3277],{"type":29,"value":2498},{"type":20,"tag":189,"props":3279,"children":3280},{"style":1184},[3281],{"type":29,"value":3123},{"type":20,"tag":189,"props":3283,"children":3284},{"style":2632},[3285],{"type":29,"value":3128},{"type":20,"tag":189,"props":3287,"children":3288},{"style":196},[3289],{"type":29,"value":2508},{"type":20,"tag":189,"props":3291,"children":3292},{"class":191,"line":774},[3293],{"type":20,"tag":189,"props":3294,"children":3295},{"style":196},[3296],{"type":29,"value":381},{"type":20,"tag":189,"props":3298,"children":3299},{"class":191,"line":782},[3300],{"type":20,"tag":189,"props":3301,"children":3302},{"style":196},[3303],{"type":29,"value":2882},{"type":20,"tag":189,"props":3305,"children":3306},{"class":191,"line":791},[3307],{"type":20,"tag":189,"props":3308,"children":3309},{"style":1993},[3310],{"type":29,"value":2890},{"type":20,"tag":189,"props":3312,"children":3313},{"class":191,"line":799},[3314],{"type":20,"tag":189,"props":3315,"children":3316},{"style":1993},[3317],{"type":29,"value":3318},"      Logo styles\n",{"type":20,"tag":189,"props":3320,"children":3321},{"class":191,"line":807},[3322],{"type":20,"tag":189,"props":3323,"children":3324},{"style":1993},[3325],{"type":29,"value":2906},{"type":20,"tag":189,"props":3327,"children":3328},{"class":191,"line":816},[3329,3334],{"type":20,"tag":189,"props":3330,"children":3331},{"style":1215},[3332],{"type":29,"value":3333},"  .navbar-brand.logo",{"type":20,"tag":189,"props":3335,"children":3336},{"style":196},[3337],{"type":29,"value":214},{"type":20,"tag":189,"props":3339,"children":3340},{"class":191,"line":840},[3341,3345,3349,3354,3358,3363,3367],{"type":20,"tag":189,"props":3342,"children":3343},{"style":1184},[3344],{"type":29,"value":2826},{"type":20,"tag":189,"props":3346,"children":3347},{"style":196},[3348],{"type":29,"value":2498},{"type":20,"tag":189,"props":3350,"children":3351},{"style":1184},[3352],{"type":29,"value":3353},"2",{"type":20,"tag":189,"props":3355,"children":3356},{"style":2632},[3357],{"type":29,"value":3128},{"type":20,"tag":189,"props":3359,"children":3360},{"style":1184},[3361],{"type":29,"value":3362}," 2",{"type":20,"tag":189,"props":3364,"children":3365},{"style":2632},[3366],{"type":29,"value":3128},{"type":20,"tag":189,"props":3368,"children":3369},{"style":196},[3370],{"type":29,"value":2508},{"type":20,"tag":189,"props":3372,"children":3373},{"class":191,"line":862},[3374],{"type":20,"tag":189,"props":3375,"children":3376},{"style":196},[3377],{"type":29,"value":381},{"type":20,"tag":189,"props":3379,"children":3380},{"class":191,"line":870},[3381],{"type":20,"tag":189,"props":3382,"children":3383},{"style":196},[3384],{"type":29,"value":2882},{"type":20,"tag":189,"props":3386,"children":3387},{"class":191,"line":878},[3388,3393,3398],{"type":20,"tag":189,"props":3389,"children":3390},{"style":1215},[3391],{"type":29,"value":3392},"  .logo",{"type":20,"tag":189,"props":3394,"children":3395},{"style":1215},[3396],{"type":29,"value":3397}," .logo-img",{"type":20,"tag":189,"props":3399,"children":3400},{"style":196},[3401],{"type":29,"value":214},{"type":20,"tag":189,"props":3403,"children":3404},{"class":191,"line":887},[3405,3409,3413,3418,3422],{"type":20,"tag":189,"props":3406,"children":3407},{"style":1184},[3408],{"type":29,"value":2800},{"type":20,"tag":189,"props":3410,"children":3411},{"style":196},[3412],{"type":29,"value":2498},{"type":20,"tag":189,"props":3414,"children":3415},{"style":1184},[3416],{"type":29,"value":3417},"25",{"type":20,"tag":189,"props":3419,"children":3420},{"style":2632},[3421],{"type":29,"value":3128},{"type":20,"tag":189,"props":3423,"children":3424},{"style":196},[3425],{"type":29,"value":2508},{"type":20,"tag":189,"props":3427,"children":3428},{"class":191,"line":905},[3429,3433,3437,3441],{"type":20,"tag":189,"props":3430,"children":3431},{"style":1184},[3432],{"type":29,"value":2933},{"type":20,"tag":189,"props":3434,"children":3435},{"style":196},[3436],{"type":29,"value":2498},{"type":20,"tag":189,"props":3438,"children":3439},{"style":1184},[3440],{"type":29,"value":2942},{"type":20,"tag":189,"props":3442,"children":3443},{"style":196},[3444],{"type":29,"value":2508},{"type":20,"tag":189,"props":3446,"children":3447},{"class":191,"line":923},[3448,3452,3456,3460],{"type":20,"tag":189,"props":3449,"children":3450},{"style":1184},[3451],{"type":29,"value":2954},{"type":20,"tag":189,"props":3453,"children":3454},{"style":196},[3455],{"type":29,"value":2498},{"type":20,"tag":189,"props":3457,"children":3458},{"style":1184},[3459],{"type":29,"value":2963},{"type":20,"tag":189,"props":3461,"children":3462},{"style":196},[3463],{"type":29,"value":2508},{"type":20,"tag":189,"props":3465,"children":3466},{"class":191,"line":941},[3467,3472,3476,3481,3485],{"type":20,"tag":189,"props":3468,"children":3469},{"style":1184},[3470],{"type":29,"value":3471},"    width",{"type":20,"tag":189,"props":3473,"children":3474},{"style":196},[3475],{"type":29,"value":2498},{"type":20,"tag":189,"props":3477,"children":3478},{"style":1184},[3479],{"type":29,"value":3480},"30",{"type":20,"tag":189,"props":3482,"children":3483},{"style":2632},[3484],{"type":29,"value":3128},{"type":20,"tag":189,"props":3486,"children":3487},{"style":196},[3488],{"type":29,"value":2508},{"type":20,"tag":189,"props":3490,"children":3491},{"class":191,"line":949},[3492],{"type":20,"tag":189,"props":3493,"children":3494},{"style":196},[3495],{"type":29,"value":381},{"type":20,"tag":189,"props":3497,"children":3498},{"class":191,"line":957},[3499],{"type":20,"tag":189,"props":3500,"children":3501},{"style":196},[3502],{"type":29,"value":2882},{"type":20,"tag":189,"props":3504,"children":3505},{"class":191,"line":965},[3506,3511],{"type":20,"tag":189,"props":3507,"children":3508},{"style":1215},[3509],{"type":29,"value":3510},"  .logo-img",{"type":20,"tag":189,"props":3512,"children":3513},{"style":196},[3514],{"type":29,"value":214},{"type":20,"tag":189,"props":3516,"children":3517},{"class":191,"line":974},[3518,3522,3526,3531,3536],{"type":20,"tag":189,"props":3519,"children":3520},{"style":1184},[3521],{"type":29,"value":2800},{"type":20,"tag":189,"props":3523,"children":3524},{"style":196},[3525],{"type":29,"value":2498},{"type":20,"tag":189,"props":3527,"children":3528},{"style":1184},[3529],{"type":29,"value":3530},"100",{"type":20,"tag":189,"props":3532,"children":3533},{"style":2632},[3534],{"type":29,"value":3535},"%",{"type":20,"tag":189,"props":3537,"children":3538},{"style":196},[3539],{"type":29,"value":2508},{"type":20,"tag":189,"props":3541,"children":3542},{"class":191,"line":990},[3543,3548,3552,3557,3561,3566,3571,3576,3581,3585],{"type":20,"tag":189,"props":3544,"children":3545},{"style":1184},[3546],{"type":29,"value":3547},"    background",{"type":20,"tag":189,"props":3549,"children":3550},{"style":196},[3551],{"type":29,"value":2498},{"type":20,"tag":189,"props":3553,"children":3554},{"style":1184},[3555],{"type":29,"value":3556},"url",{"type":20,"tag":189,"props":3558,"children":3559},{"style":196},[3560],{"type":29,"value":1320},{"type":20,"tag":189,"props":3562,"children":3563},{"style":1221},[3564],{"type":29,"value":3565},"'..\u002F..\u002F..\u002Fcontent\u002Fimages\u002Ficon.png'",{"type":20,"tag":189,"props":3567,"children":3568},{"style":196},[3569],{"type":29,"value":3570},") ",{"type":20,"tag":189,"props":3572,"children":3573},{"style":1184},[3574],{"type":29,"value":3575},"no-repeat",{"type":20,"tag":189,"props":3577,"children":3578},{"style":1184},[3579],{"type":29,"value":3580}," center",{"type":20,"tag":189,"props":3582,"children":3583},{"style":1184},[3584],{"type":29,"value":3580},{"type":20,"tag":189,"props":3586,"children":3587},{"style":196},[3588],{"type":29,"value":2508},{"type":20,"tag":189,"props":3590,"children":3591},{"class":191,"line":1013},[3592,3597,3601,3606],{"type":20,"tag":189,"props":3593,"children":3594},{"style":1184},[3595],{"type":29,"value":3596},"    background-size",{"type":20,"tag":189,"props":3598,"children":3599},{"style":196},[3600],{"type":29,"value":2498},{"type":20,"tag":189,"props":3602,"children":3603},{"style":1184},[3604],{"type":29,"value":3605},"contain",{"type":20,"tag":189,"props":3607,"children":3608},{"style":196},[3609],{"type":29,"value":2508},{"type":20,"tag":189,"props":3611,"children":3612},{"class":191,"line":1027},[3613,3617,3621,3625,3629],{"type":20,"tag":189,"props":3614,"children":3615},{"style":1184},[3616],{"type":29,"value":3471},{"type":20,"tag":189,"props":3618,"children":3619},{"style":196},[3620],{"type":29,"value":2498},{"type":20,"tag":189,"props":3622,"children":3623},{"style":1184},[3624],{"type":29,"value":3530},{"type":20,"tag":189,"props":3626,"children":3627},{"style":2632},[3628],{"type":29,"value":3535},{"type":20,"tag":189,"props":3630,"children":3631},{"style":196},[3632],{"type":29,"value":2508},{"type":20,"tag":189,"props":3634,"children":3635},{"class":191,"line":1035},[3636,3641,3645,3650,3654,3658,3663,3668,3672,3677],{"type":20,"tag":189,"props":3637,"children":3638},{"style":1184},[3639],{"type":29,"value":3640},"    filter",{"type":20,"tag":189,"props":3642,"children":3643},{"style":196},[3644],{"type":29,"value":2498},{"type":20,"tag":189,"props":3646,"children":3647},{"style":1184},[3648],{"type":29,"value":3649},"drop-shadow",{"type":20,"tag":189,"props":3651,"children":3652},{"style":196},[3653],{"type":29,"value":1320},{"type":20,"tag":189,"props":3655,"children":3656},{"style":1184},[3657],{"type":29,"value":2714},{"type":20,"tag":189,"props":3659,"children":3660},{"style":1184},[3661],{"type":29,"value":3662}," 0",{"type":20,"tag":189,"props":3664,"children":3665},{"style":1184},[3666],{"type":29,"value":3667}," 0.05",{"type":20,"tag":189,"props":3669,"children":3670},{"style":2632},[3671],{"type":29,"value":2814},{"type":20,"tag":189,"props":3673,"children":3674},{"style":1184},[3675],{"type":29,"value":3676}," white",{"type":20,"tag":189,"props":3678,"children":3679},{"style":196},[3680],{"type":29,"value":3681},");\n",{"type":20,"tag":189,"props":3683,"children":3684},{"class":191,"line":1043},[3685],{"type":20,"tag":189,"props":3686,"children":3687},{"style":196},[3688],{"type":29,"value":381},{"type":20,"tag":189,"props":3690,"children":3691},{"class":191,"line":1052},[3692],{"type":20,"tag":189,"props":3693,"children":3694},{"style":196},[3695],{"type":29,"value":2882},{"type":20,"tag":189,"props":3697,"children":3698},{"class":191,"line":1066},[3699,3704],{"type":20,"tag":189,"props":3700,"children":3701},{"style":1215},[3702],{"type":29,"value":3703},"  .sign-out",{"type":20,"tag":189,"props":3705,"children":3706},{"style":196},[3707],{"type":29,"value":214},{"type":20,"tag":189,"props":3709,"children":3710},{"class":191,"line":1074},[3711,3715,3719,3723],{"type":20,"tag":189,"props":3712,"children":3713},{"style":1184},[3714],{"type":29,"value":2996},{"type":20,"tag":189,"props":3716,"children":3717},{"style":196},[3718],{"type":29,"value":2498},{"type":20,"tag":189,"props":3720,"children":3721},{"style":1184},[3722],{"type":29,"value":3005},{"type":20,"tag":189,"props":3724,"children":3725},{"style":196},[3726],{"type":29,"value":2508},{"type":20,"tag":189,"props":3728,"children":3729},{"class":191,"line":1082},[3730,3734,3738,3743],{"type":20,"tag":189,"props":3731,"children":3732},{"style":1184},[3733],{"type":29,"value":2933},{"type":20,"tag":189,"props":3735,"children":3736},{"style":196},[3737],{"type":29,"value":2498},{"type":20,"tag":189,"props":3739,"children":3740},{"style":1184},[3741],{"type":29,"value":3742},"flex",{"type":20,"tag":189,"props":3744,"children":3745},{"style":196},[3746],{"type":29,"value":2508},{"type":20,"tag":189,"props":3748,"children":3749},{"class":191,"line":1090},[3750,3754,3758,3763],{"type":20,"tag":189,"props":3751,"children":3752},{"style":1184},[3753],{"type":29,"value":3017},{"type":20,"tag":189,"props":3755,"children":3756},{"style":196},[3757],{"type":29,"value":2498},{"type":20,"tag":189,"props":3759,"children":3760},{"style":1184},[3761],{"type":29,"value":3762},"auto",{"type":20,"tag":189,"props":3764,"children":3765},{"style":196},[3766],{"type":29,"value":2508},{"type":20,"tag":189,"props":3768,"children":3769},{"class":191,"line":1099},[3770,3775,3779,3783,3787],{"type":20,"tag":189,"props":3771,"children":3772},{"style":1184},[3773],{"type":29,"value":3774},"    padding-right",{"type":20,"tag":189,"props":3776,"children":3777},{"style":196},[3778],{"type":29,"value":2498},{"type":20,"tag":189,"props":3780,"children":3781},{"style":1184},[3782],{"type":29,"value":3353},{"type":20,"tag":189,"props":3784,"children":3785},{"style":2632},[3786],{"type":29,"value":2814},{"type":20,"tag":189,"props":3788,"children":3789},{"style":196},[3790],{"type":29,"value":2508},{"type":20,"tag":189,"props":3792,"children":3793},{"class":191,"line":1108},[3794,3799,3803,3808,3813],{"type":20,"tag":189,"props":3795,"children":3796},{"style":1184},[3797],{"type":29,"value":3798},"    cursor",{"type":20,"tag":189,"props":3800,"children":3801},{"style":196},[3802],{"type":29,"value":2498},{"type":20,"tag":189,"props":3804,"children":3805},{"style":1184},[3806],{"type":29,"value":3807},"pointer",{"type":20,"tag":189,"props":3809,"children":3810},{"style":196},[3811],{"type":29,"value":3812},"; ",{"type":20,"tag":189,"props":3814,"children":3815},{"style":1993},[3816],{"type":29,"value":3817},"\u002F* Change cursor to pointer *\u002F\n",{"type":20,"tag":189,"props":3819,"children":3820},{"class":191,"line":1116},[3821,3825,3829,3833,3837,3842,3846,3850],{"type":20,"tag":189,"props":3822,"children":3823},{"style":1184},[3824],{"type":29,"value":2826},{"type":20,"tag":189,"props":3826,"children":3827},{"style":196},[3828],{"type":29,"value":2498},{"type":20,"tag":189,"props":3830,"children":3831},{"style":1184},[3832],{"type":29,"value":3026},{"type":20,"tag":189,"props":3834,"children":3835},{"style":2632},[3836],{"type":29,"value":2814},{"type":20,"tag":189,"props":3838,"children":3839},{"style":1184},[3840],{"type":29,"value":3841}," 1",{"type":20,"tag":189,"props":3843,"children":3844},{"style":2632},[3845],{"type":29,"value":2814},{"type":20,"tag":189,"props":3847,"children":3848},{"style":196},[3849],{"type":29,"value":3812},{"type":20,"tag":189,"props":3851,"children":3852},{"style":1993},[3853],{"type":29,"value":3854},"\u002F* Add padding for button-like appearance *\u002F\n",{"type":20,"tag":189,"props":3856,"children":3857},{"class":191,"line":1125},[3858,3862,3866,3870,3874],{"type":20,"tag":189,"props":3859,"children":3860},{"style":1184},[3861],{"type":29,"value":2787},{"type":20,"tag":189,"props":3863,"children":3864},{"style":196},[3865],{"type":29,"value":2498},{"type":20,"tag":189,"props":3867,"children":3868},{"style":1184},[3869],{"type":29,"value":2503},{"type":20,"tag":189,"props":3871,"children":3872},{"style":196},[3873],{"type":29,"value":3812},{"type":20,"tag":189,"props":3875,"children":3876},{"style":1993},[3877],{"type":29,"value":3878},"\u002F* Optional: background color *\u002F\n",{"type":20,"tag":189,"props":3880,"children":3881},{"class":191,"line":1139},[3882,3887,3891,3896,3900],{"type":20,"tag":189,"props":3883,"children":3884},{"style":1184},[3885],{"type":29,"value":3886},"    border",{"type":20,"tag":189,"props":3888,"children":3889},{"style":196},[3890],{"type":29,"value":2498},{"type":20,"tag":189,"props":3892,"children":3893},{"style":1184},[3894],{"type":29,"value":3895},"none",{"type":20,"tag":189,"props":3897,"children":3898},{"style":196},[3899],{"type":29,"value":3812},{"type":20,"tag":189,"props":3901,"children":3902},{"style":1993},[3903],{"type":29,"value":3904},"\u002F* Optional: remove default border *\u002F\n",{"type":20,"tag":189,"props":3906,"children":3907},{"class":191,"line":1152},[3908,3913,3917,3922,3926,3930],{"type":20,"tag":189,"props":3909,"children":3910},{"style":1184},[3911],{"type":29,"value":3912},"    border-radius",{"type":20,"tag":189,"props":3914,"children":3915},{"style":196},[3916],{"type":29,"value":2498},{"type":20,"tag":189,"props":3918,"children":3919},{"style":1184},[3920],{"type":29,"value":3921},"5",{"type":20,"tag":189,"props":3923,"children":3924},{"style":2632},[3925],{"type":29,"value":3128},{"type":20,"tag":189,"props":3927,"children":3928},{"style":196},[3929],{"type":29,"value":3812},{"type":20,"tag":189,"props":3931,"children":3932},{"style":1993},[3933],{"type":29,"value":3934},"\u002F* Optional: rounded corners *\u002F\n",{"type":20,"tag":189,"props":3936,"children":3937},{"class":191,"line":1175},[3938,3943,3947,3952,3956],{"type":20,"tag":189,"props":3939,"children":3940},{"style":1184},[3941],{"type":29,"value":3942},"    align-items",{"type":20,"tag":189,"props":3944,"children":3945},{"style":196},[3946],{"type":29,"value":2498},{"type":20,"tag":189,"props":3948,"children":3949},{"style":1184},[3950],{"type":29,"value":3951},"center",{"type":20,"tag":189,"props":3953,"children":3954},{"style":196},[3955],{"type":29,"value":3812},{"type":20,"tag":189,"props":3957,"children":3958},{"style":1993},[3959],{"type":29,"value":3960},"\u002F* Center content vertically *\u002F\n",{"type":20,"tag":189,"props":3962,"children":3963},{"class":191,"line":1190},[3964,3969,3973,3977,3981],{"type":20,"tag":189,"props":3965,"children":3966},{"style":1184},[3967],{"type":29,"value":3968},"    text-decoration",{"type":20,"tag":189,"props":3970,"children":3971},{"style":196},[3972],{"type":29,"value":2498},{"type":20,"tag":189,"props":3974,"children":3975},{"style":1184},[3976],{"type":29,"value":3895},{"type":20,"tag":189,"props":3978,"children":3979},{"style":196},[3980],{"type":29,"value":3812},{"type":20,"tag":189,"props":3982,"children":3983},{"style":1993},[3984],{"type":29,"value":3985},"\u002F* Remove underline from text, if any *\u002F\n",{"type":20,"tag":189,"props":3987,"children":3989},{"class":191,"line":3988},85,[3990],{"type":20,"tag":189,"props":3991,"children":3992},{"style":196},[3993],{"type":29,"value":381},{"type":20,"tag":189,"props":3995,"children":3997},{"class":191,"line":3996},86,[3998],{"type":20,"tag":189,"props":3999,"children":4000},{"style":196},[4001],{"type":29,"value":2882},{"type":20,"tag":189,"props":4003,"children":4005},{"class":191,"line":4004},87,[4006,4011],{"type":20,"tag":189,"props":4007,"children":4008},{"style":1215},[4009],{"type":29,"value":4010},"  .sign-out:hover",{"type":20,"tag":189,"props":4012,"children":4013},{"style":196},[4014],{"type":29,"value":214},{"type":20,"tag":189,"props":4016,"children":4018},{"class":191,"line":4017},88,[4019,4023,4027,4032,4036],{"type":20,"tag":189,"props":4020,"children":4021},{"style":1184},[4022],{"type":29,"value":2787},{"type":20,"tag":189,"props":4024,"children":4025},{"style":196},[4026],{"type":29,"value":2498},{"type":20,"tag":189,"props":4028,"children":4029},{"style":1184},[4030],{"type":29,"value":4031},"#565a5e",{"type":20,"tag":189,"props":4033,"children":4034},{"style":196},[4035],{"type":29,"value":3812},{"type":20,"tag":189,"props":4037,"children":4038},{"style":1993},[4039],{"type":29,"value":4040},"\u002F* Optional: darker background on hover *\u002F\n",{"type":20,"tag":189,"props":4042,"children":4044},{"class":191,"line":4043},89,[4045],{"type":20,"tag":189,"props":4046,"children":4047},{"style":196},[4048],{"type":29,"value":381},{"type":20,"tag":189,"props":4050,"children":4052},{"class":191,"line":4051},90,[4053],{"type":20,"tag":189,"props":4054,"children":4055},{"style":196},[4056],{"type":29,"value":2882},{"type":20,"tag":189,"props":4058,"children":4060},{"class":191,"line":4059},91,[4061,4066],{"type":20,"tag":189,"props":4062,"children":4063},{"style":1215},[4064],{"type":29,"value":4065},"  .sign-in",{"type":20,"tag":189,"props":4067,"children":4068},{"style":196},[4069],{"type":29,"value":214},{"type":20,"tag":189,"props":4071,"children":4073},{"class":191,"line":4072},92,[4074,4078,4082,4086],{"type":20,"tag":189,"props":4075,"children":4076},{"style":1184},[4077],{"type":29,"value":2996},{"type":20,"tag":189,"props":4079,"children":4080},{"style":196},[4081],{"type":29,"value":2498},{"type":20,"tag":189,"props":4083,"children":4084},{"style":1184},[4085],{"type":29,"value":3005},{"type":20,"tag":189,"props":4087,"children":4088},{"style":196},[4089],{"type":29,"value":2508},{"type":20,"tag":189,"props":4091,"children":4093},{"class":191,"line":4092},93,[4094,4098,4102,4106],{"type":20,"tag":189,"props":4095,"children":4096},{"style":1184},[4097],{"type":29,"value":2933},{"type":20,"tag":189,"props":4099,"children":4100},{"style":196},[4101],{"type":29,"value":2498},{"type":20,"tag":189,"props":4103,"children":4104},{"style":1184},[4105],{"type":29,"value":3742},{"type":20,"tag":189,"props":4107,"children":4108},{"style":196},[4109],{"type":29,"value":2508},{"type":20,"tag":189,"props":4111,"children":4112},{"class":191,"line":38},[4113,4117,4121,4125],{"type":20,"tag":189,"props":4114,"children":4115},{"style":1184},[4116],{"type":29,"value":3017},{"type":20,"tag":189,"props":4118,"children":4119},{"style":196},[4120],{"type":29,"value":2498},{"type":20,"tag":189,"props":4122,"children":4123},{"style":1184},[4124],{"type":29,"value":3762},{"type":20,"tag":189,"props":4126,"children":4127},{"style":196},[4128],{"type":29,"value":2508},{"type":20,"tag":189,"props":4130,"children":4132},{"class":191,"line":4131},95,[4133,4137,4141,4145,4149],{"type":20,"tag":189,"props":4134,"children":4135},{"style":1184},[4136],{"type":29,"value":3774},{"type":20,"tag":189,"props":4138,"children":4139},{"style":196},[4140],{"type":29,"value":2498},{"type":20,"tag":189,"props":4142,"children":4143},{"style":1184},[4144],{"type":29,"value":3353},{"type":20,"tag":189,"props":4146,"children":4147},{"style":2632},[4148],{"type":29,"value":2814},{"type":20,"tag":189,"props":4150,"children":4151},{"style":196},[4152],{"type":29,"value":2508},{"type":20,"tag":189,"props":4154,"children":4156},{"class":191,"line":4155},96,[4157,4161,4165,4169,4173],{"type":20,"tag":189,"props":4158,"children":4159},{"style":1184},[4160],{"type":29,"value":3798},{"type":20,"tag":189,"props":4162,"children":4163},{"style":196},[4164],{"type":29,"value":2498},{"type":20,"tag":189,"props":4166,"children":4167},{"style":1184},[4168],{"type":29,"value":3807},{"type":20,"tag":189,"props":4170,"children":4171},{"style":196},[4172],{"type":29,"value":3812},{"type":20,"tag":189,"props":4174,"children":4175},{"style":1993},[4176],{"type":29,"value":3817},{"type":20,"tag":189,"props":4178,"children":4180},{"class":191,"line":4179},97,[4181,4185,4189,4193,4197,4201,4205,4209],{"type":20,"tag":189,"props":4182,"children":4183},{"style":1184},[4184],{"type":29,"value":2826},{"type":20,"tag":189,"props":4186,"children":4187},{"style":196},[4188],{"type":29,"value":2498},{"type":20,"tag":189,"props":4190,"children":4191},{"style":1184},[4192],{"type":29,"value":3026},{"type":20,"tag":189,"props":4194,"children":4195},{"style":2632},[4196],{"type":29,"value":2814},{"type":20,"tag":189,"props":4198,"children":4199},{"style":1184},[4200],{"type":29,"value":3841},{"type":20,"tag":189,"props":4202,"children":4203},{"style":2632},[4204],{"type":29,"value":2814},{"type":20,"tag":189,"props":4206,"children":4207},{"style":196},[4208],{"type":29,"value":3812},{"type":20,"tag":189,"props":4210,"children":4211},{"style":1993},[4212],{"type":29,"value":3854},{"type":20,"tag":189,"props":4214,"children":4216},{"class":191,"line":4215},98,[4217,4221,4226],{"type":20,"tag":189,"props":4218,"children":4219},{"style":1184},[4220],{"type":29,"value":2787},{"type":20,"tag":189,"props":4222,"children":4223},{"style":196},[4224],{"type":29,"value":4225},": $navbar-bg-color; ",{"type":20,"tag":189,"props":4227,"children":4228},{"style":1993},[4229],{"type":29,"value":3878},{"type":20,"tag":189,"props":4231,"children":4233},{"class":191,"line":4232},99,[4234,4238,4242,4246,4250],{"type":20,"tag":189,"props":4235,"children":4236},{"style":1184},[4237],{"type":29,"value":3886},{"type":20,"tag":189,"props":4239,"children":4240},{"style":196},[4241],{"type":29,"value":2498},{"type":20,"tag":189,"props":4243,"children":4244},{"style":1184},[4245],{"type":29,"value":3895},{"type":20,"tag":189,"props":4247,"children":4248},{"style":196},[4249],{"type":29,"value":3812},{"type":20,"tag":189,"props":4251,"children":4252},{"style":1993},[4253],{"type":29,"value":3904},{"type":20,"tag":189,"props":4255,"children":4257},{"class":191,"line":4256},100,[4258,4262,4266,4270,4274,4278],{"type":20,"tag":189,"props":4259,"children":4260},{"style":1184},[4261],{"type":29,"value":3912},{"type":20,"tag":189,"props":4263,"children":4264},{"style":196},[4265],{"type":29,"value":2498},{"type":20,"tag":189,"props":4267,"children":4268},{"style":1184},[4269],{"type":29,"value":3921},{"type":20,"tag":189,"props":4271,"children":4272},{"style":2632},[4273],{"type":29,"value":3128},{"type":20,"tag":189,"props":4275,"children":4276},{"style":196},[4277],{"type":29,"value":3812},{"type":20,"tag":189,"props":4279,"children":4280},{"style":1993},[4281],{"type":29,"value":3934},{"type":20,"tag":189,"props":4283,"children":4285},{"class":191,"line":4284},101,[4286,4290,4294,4298,4302],{"type":20,"tag":189,"props":4287,"children":4288},{"style":1184},[4289],{"type":29,"value":3942},{"type":20,"tag":189,"props":4291,"children":4292},{"style":196},[4293],{"type":29,"value":2498},{"type":20,"tag":189,"props":4295,"children":4296},{"style":1184},[4297],{"type":29,"value":3951},{"type":20,"tag":189,"props":4299,"children":4300},{"style":196},[4301],{"type":29,"value":3812},{"type":20,"tag":189,"props":4303,"children":4304},{"style":1993},[4305],{"type":29,"value":3960},{"type":20,"tag":189,"props":4307,"children":4309},{"class":191,"line":4308},102,[4310,4314,4318,4322,4326],{"type":20,"tag":189,"props":4311,"children":4312},{"style":1184},[4313],{"type":29,"value":3968},{"type":20,"tag":189,"props":4315,"children":4316},{"style":196},[4317],{"type":29,"value":2498},{"type":20,"tag":189,"props":4319,"children":4320},{"style":1184},[4321],{"type":29,"value":3895},{"type":20,"tag":189,"props":4323,"children":4324},{"style":196},[4325],{"type":29,"value":3812},{"type":20,"tag":189,"props":4327,"children":4328},{"style":1993},[4329],{"type":29,"value":3985},{"type":20,"tag":189,"props":4331,"children":4333},{"class":191,"line":4332},103,[4334],{"type":20,"tag":189,"props":4335,"children":4336},{"style":196},[4337],{"type":29,"value":381},{"type":20,"tag":189,"props":4339,"children":4341},{"class":191,"line":4340},104,[4342],{"type":20,"tag":189,"props":4343,"children":4344},{"style":196},[4345],{"type":29,"value":2882},{"type":20,"tag":189,"props":4347,"children":4349},{"class":191,"line":4348},105,[4350,4355],{"type":20,"tag":189,"props":4351,"children":4352},{"style":1215},[4353],{"type":29,"value":4354},"  .sign-in:hover",{"type":20,"tag":189,"props":4356,"children":4357},{"style":196},[4358],{"type":29,"value":214},{"type":20,"tag":189,"props":4360,"children":4362},{"class":191,"line":4361},106,[4363,4367,4371,4375,4379],{"type":20,"tag":189,"props":4364,"children":4365},{"style":1184},[4366],{"type":29,"value":2787},{"type":20,"tag":189,"props":4368,"children":4369},{"style":196},[4370],{"type":29,"value":2498},{"type":20,"tag":189,"props":4372,"children":4373},{"style":1184},[4374],{"type":29,"value":4031},{"type":20,"tag":189,"props":4376,"children":4377},{"style":196},[4378],{"type":29,"value":3812},{"type":20,"tag":189,"props":4380,"children":4381},{"style":1993},[4382],{"type":29,"value":4040},{"type":20,"tag":189,"props":4384,"children":4385},{"class":191,"line":2454},[4386],{"type":20,"tag":189,"props":4387,"children":4388},{"style":196},[4389],{"type":29,"value":381},{"type":20,"tag":21,"props":4391,"children":4392},{},[4393],{"type":20,"tag":25,"props":4394,"children":4395},{},[4396],{"type":29,"value":128},{"type":20,"tag":21,"props":4398,"children":4399},{},[4400],{"type":29,"value":4401},"This sections provides us with some items to display in our menu.",{"type":20,"tag":21,"props":4403,"children":4404},{},[4405],{"type":29,"value":4406},"Create a folder called \"pages\" under the \"app\" folder, and add 3 page\nfolders, as follows:",{"type":20,"tag":21,"props":4408,"children":4409},{},[4410],{"type":20,"tag":34,"props":4411,"children":4415},{"alt":8,"height":4412,"src":4413,"width":4414},302,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage28.png",211,[],{"type":20,"tag":21,"props":4417,"children":4418},{},[4419],{"type":29,"value":4420},"For every page, add a vue and script component, as follows:",{"type":20,"tag":21,"props":4422,"children":4423},{},[4424],{"type":20,"tag":34,"props":4425,"children":4429},{"alt":8,"height":4426,"src":4427,"width":4428},252,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage29.png",346,[],{"type":20,"tag":21,"props":4431,"children":4432},{},[4433],{"type":29,"value":4434},"We will keep the content of the pages simple for now:",{"type":20,"tag":178,"props":4436,"children":4440},{"className":4437,"code":4438,"language":4439,"meta":8,"style":8},"language-html shiki shiki-themes github-dark","\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>Page 1\u003C\u002Fh1>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" src=\".\u002Fpage-1.component.ts\">\u003C\u002Fscript>\n\n","html",[4441],{"type":20,"tag":185,"props":4442,"children":4443},{"__ignoreMap":8},[4444,4462,4479,4505,4521,4537,4544],{"type":20,"tag":189,"props":4445,"children":4446},{"class":191,"line":192},[4447,4452,4457],{"type":20,"tag":189,"props":4448,"children":4449},{"style":196},[4450],{"type":29,"value":4451},"\u003C",{"type":20,"tag":189,"props":4453,"children":4454},{"style":2490},[4455],{"type":29,"value":4456},"template",{"type":20,"tag":189,"props":4458,"children":4459},{"style":196},[4460],{"type":29,"value":4461},">\n",{"type":20,"tag":189,"props":4463,"children":4464},{"class":191,"line":202},[4465,4470,4475],{"type":20,"tag":189,"props":4466,"children":4467},{"style":196},[4468],{"type":29,"value":4469},"  \u003C",{"type":20,"tag":189,"props":4471,"children":4472},{"style":2490},[4473],{"type":29,"value":4474},"div",{"type":20,"tag":189,"props":4476,"children":4477},{"style":196},[4478],{"type":29,"value":4461},{"type":20,"tag":189,"props":4480,"children":4481},{"class":191,"line":217},[4482,4487,4492,4497,4501],{"type":20,"tag":189,"props":4483,"children":4484},{"style":196},[4485],{"type":29,"value":4486},"    \u003C",{"type":20,"tag":189,"props":4488,"children":4489},{"style":2490},[4490],{"type":29,"value":4491},"h1",{"type":20,"tag":189,"props":4493,"children":4494},{"style":196},[4495],{"type":29,"value":4496},">Page 1\u003C\u002F",{"type":20,"tag":189,"props":4498,"children":4499},{"style":2490},[4500],{"type":29,"value":4491},{"type":20,"tag":189,"props":4502,"children":4503},{"style":196},[4504],{"type":29,"value":4461},{"type":20,"tag":189,"props":4506,"children":4507},{"class":191,"line":231},[4508,4513,4517],{"type":20,"tag":189,"props":4509,"children":4510},{"style":196},[4511],{"type":29,"value":4512},"  \u003C\u002F",{"type":20,"tag":189,"props":4514,"children":4515},{"style":2490},[4516],{"type":29,"value":4474},{"type":20,"tag":189,"props":4518,"children":4519},{"style":196},[4520],{"type":29,"value":4461},{"type":20,"tag":189,"props":4522,"children":4523},{"class":191,"line":245},[4524,4529,4533],{"type":20,"tag":189,"props":4525,"children":4526},{"style":196},[4527],{"type":29,"value":4528},"\u003C\u002F",{"type":20,"tag":189,"props":4530,"children":4531},{"style":2490},[4532],{"type":29,"value":4456},{"type":20,"tag":189,"props":4534,"children":4535},{"style":196},[4536],{"type":29,"value":4461},{"type":20,"tag":189,"props":4538,"children":4539},{"class":191,"line":259},[4540],{"type":20,"tag":189,"props":4541,"children":4542},{"emptyLinePlaceholder":397},[4543],{"type":29,"value":400},{"type":20,"tag":189,"props":4545,"children":4546},{"class":191,"line":272},[4547,4551,4556,4561,4566,4571,4576,4580,4585,4590,4594],{"type":20,"tag":189,"props":4548,"children":4549},{"style":196},[4550],{"type":29,"value":4451},{"type":20,"tag":189,"props":4552,"children":4553},{"style":2490},[4554],{"type":29,"value":4555},"script",{"type":20,"tag":189,"props":4557,"children":4558},{"style":1215},[4559],{"type":29,"value":4560}," lang",{"type":20,"tag":189,"props":4562,"children":4563},{"style":196},[4564],{"type":29,"value":4565},"=",{"type":20,"tag":189,"props":4567,"children":4568},{"style":1221},[4569],{"type":29,"value":4570},"\"ts\"",{"type":20,"tag":189,"props":4572,"children":4573},{"style":1215},[4574],{"type":29,"value":4575}," src",{"type":20,"tag":189,"props":4577,"children":4578},{"style":196},[4579],{"type":29,"value":4565},{"type":20,"tag":189,"props":4581,"children":4582},{"style":1221},[4583],{"type":29,"value":4584},"\".\u002Fpage-1.component.ts\"",{"type":20,"tag":189,"props":4586,"children":4587},{"style":196},[4588],{"type":29,"value":4589},">\u003C\u002F",{"type":20,"tag":189,"props":4591,"children":4592},{"style":2490},[4593],{"type":29,"value":4555},{"type":20,"tag":189,"props":4595,"children":4596},{"style":196},[4597],{"type":29,"value":4461},{"type":20,"tag":21,"props":4599,"children":4600},{},[4601],{"type":29,"value":4602},"And:",{"type":20,"tag":178,"props":4604,"children":4606},{"className":1885,"code":4605,"language":1887,"meta":8,"style":8},"import { defineComponent} from 'vue';\n\nexport default defineComponent({\n  compatConfig: { MODE: 3 },\n  name: 'Page-1',\n  components: {\n  },\n  setup() {\n    console.log(\"Page 1 component setup\")\n  },\n  methods: {\n  },\n});\n\n>\n\u003C\u002Fstyle>\n\n",[4607],{"type":20,"tag":185,"props":4608,"children":4609},{"__ignoreMap":8},[4610,4637,4644,4667,4685,4703,4711,4719,4732,4758,4765,4773,4780,4788,4795,4802],{"type":20,"tag":189,"props":4611,"children":4612},{"class":191,"line":192},[4613,4618,4623,4628,4633],{"type":20,"tag":189,"props":4614,"children":4615},{"style":2632},[4616],{"type":29,"value":4617},"import",{"type":20,"tag":189,"props":4619,"children":4620},{"style":196},[4621],{"type":29,"value":4622}," { defineComponent} ",{"type":20,"tag":189,"props":4624,"children":4625},{"style":2632},[4626],{"type":29,"value":4627},"from",{"type":20,"tag":189,"props":4629,"children":4630},{"style":1221},[4631],{"type":29,"value":4632}," 'vue'",{"type":20,"tag":189,"props":4634,"children":4635},{"style":196},[4636],{"type":29,"value":2508},{"type":20,"tag":189,"props":4638,"children":4639},{"class":191,"line":202},[4640],{"type":20,"tag":189,"props":4641,"children":4642},{"emptyLinePlaceholder":397},[4643],{"type":29,"value":400},{"type":20,"tag":189,"props":4645,"children":4646},{"class":191,"line":217},[4647,4652,4657,4662],{"type":20,"tag":189,"props":4648,"children":4649},{"style":2632},[4650],{"type":29,"value":4651},"export",{"type":20,"tag":189,"props":4653,"children":4654},{"style":2632},[4655],{"type":29,"value":4656}," default",{"type":20,"tag":189,"props":4658,"children":4659},{"style":1215},[4660],{"type":29,"value":4661}," defineComponent",{"type":20,"tag":189,"props":4663,"children":4664},{"style":196},[4665],{"type":29,"value":4666},"({\n",{"type":20,"tag":189,"props":4668,"children":4669},{"class":191,"line":231},[4670,4675,4680],{"type":20,"tag":189,"props":4671,"children":4672},{"style":196},[4673],{"type":29,"value":4674},"  compatConfig: { MODE: ",{"type":20,"tag":189,"props":4676,"children":4677},{"style":1184},[4678],{"type":29,"value":4679},"3",{"type":20,"tag":189,"props":4681,"children":4682},{"style":196},[4683],{"type":29,"value":4684}," },\n",{"type":20,"tag":189,"props":4686,"children":4687},{"class":191,"line":245},[4688,4693,4698],{"type":20,"tag":189,"props":4689,"children":4690},{"style":196},[4691],{"type":29,"value":4692},"  name: ",{"type":20,"tag":189,"props":4694,"children":4695},{"style":1221},[4696],{"type":29,"value":4697},"'Page-1'",{"type":20,"tag":189,"props":4699,"children":4700},{"style":196},[4701],{"type":29,"value":4702},",\n",{"type":20,"tag":189,"props":4704,"children":4705},{"class":191,"line":259},[4706],{"type":20,"tag":189,"props":4707,"children":4708},{"style":196},[4709],{"type":29,"value":4710},"  components: {\n",{"type":20,"tag":189,"props":4712,"children":4713},{"class":191,"line":272},[4714],{"type":20,"tag":189,"props":4715,"children":4716},{"style":196},[4717],{"type":29,"value":4718},"  },\n",{"type":20,"tag":189,"props":4720,"children":4721},{"class":191,"line":286},[4722,4727],{"type":20,"tag":189,"props":4723,"children":4724},{"style":1215},[4725],{"type":29,"value":4726},"  setup",{"type":20,"tag":189,"props":4728,"children":4729},{"style":196},[4730],{"type":29,"value":4731},"() {\n",{"type":20,"tag":189,"props":4733,"children":4734},{"class":191,"line":300},[4735,4740,4745,4749,4754],{"type":20,"tag":189,"props":4736,"children":4737},{"style":196},[4738],{"type":29,"value":4739},"    console.",{"type":20,"tag":189,"props":4741,"children":4742},{"style":1215},[4743],{"type":29,"value":4744},"log",{"type":20,"tag":189,"props":4746,"children":4747},{"style":196},[4748],{"type":29,"value":1320},{"type":20,"tag":189,"props":4750,"children":4751},{"style":1221},[4752],{"type":29,"value":4753},"\"Page 1 component setup\"",{"type":20,"tag":189,"props":4755,"children":4756},{"style":196},[4757],{"type":29,"value":1338},{"type":20,"tag":189,"props":4759,"children":4760},{"class":191,"line":314},[4761],{"type":20,"tag":189,"props":4762,"children":4763},{"style":196},[4764],{"type":29,"value":4718},{"type":20,"tag":189,"props":4766,"children":4767},{"class":191,"line":328},[4768],{"type":20,"tag":189,"props":4769,"children":4770},{"style":196},[4771],{"type":29,"value":4772},"  methods: {\n",{"type":20,"tag":189,"props":4774,"children":4775},{"class":191,"line":342},[4776],{"type":20,"tag":189,"props":4777,"children":4778},{"style":196},[4779],{"type":29,"value":4718},{"type":20,"tag":189,"props":4781,"children":4782},{"class":191,"line":356},[4783],{"type":20,"tag":189,"props":4784,"children":4785},{"style":196},[4786],{"type":29,"value":4787},"});\n",{"type":20,"tag":189,"props":4789,"children":4790},{"class":191,"line":375},[4791],{"type":20,"tag":189,"props":4792,"children":4793},{"emptyLinePlaceholder":397},[4794],{"type":29,"value":400},{"type":20,"tag":189,"props":4796,"children":4797},{"class":191,"line":384},[4798],{"type":20,"tag":189,"props":4799,"children":4800},{"style":2632},[4801],{"type":29,"value":4461},{"type":20,"tag":189,"props":4803,"children":4804},{"class":191,"line":393},[4805,4809,4814],{"type":20,"tag":189,"props":4806,"children":4807},{"style":2632},[4808],{"type":29,"value":4528},{"type":20,"tag":189,"props":4810,"children":4811},{"style":196},[4812],{"type":29,"value":4813},"style",{"type":20,"tag":189,"props":4815,"children":4816},{"style":2632},[4817],{"type":29,"value":4461},{"type":20,"tag":21,"props":4819,"children":4820},{},[4821],{"type":20,"tag":25,"props":4822,"children":4823},{},[4824],{"type":29,"value":133},{"type":20,"tag":21,"props":4826,"children":4827},{},[4828],{"type":29,"value":4829},"We will modify the extend the Jhipster menu bar for this milestone.",{"type":20,"tag":21,"props":4831,"children":4832},{},[4833],{"type":29,"value":4834},"To get rid of the error messages below, we first need to add\n@types\u002Fjsdom to the package.json file.",{"type":20,"tag":21,"props":4836,"children":4837},{},[4838],{"type":20,"tag":34,"props":4839,"children":4843},{"alt":8,"height":4840,"src":4841,"width":4842},156,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage30.png",408,[],{"type":20,"tag":21,"props":4845,"children":4846},{},[4847],{"type":20,"tag":34,"props":4848,"children":4851},{"alt":8,"height":4232,"src":4849,"width":4850},"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage31.png",316,[],{"type":20,"tag":21,"props":4853,"children":4854},{},[4855],{"type":29,"value":4856},"After adding the line above, run npm intall for it to take effect.",{"type":20,"tag":21,"props":4858,"children":4859},{},[4860],{"type":29,"value":4861},"This is the basic structure of the side menu.",{"type":20,"tag":178,"props":4863,"children":4865},{"className":4437,"code":4864,"language":4439,"meta":8,"style":8},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv :class=\"['sidebar', { active: isActive }]\" v-if=\"hasAnyAuthority('ROLE_ADMIN')\">\n    \u003Cdiv class=\"menu-toggle-button\">\n      \u003Cdiv id=\"btn\"  @click=\"toggleSidebar\">\n        \u003Cfont-awesome-icon class=\"jva-icon\" :icon=\"['fas', 'bars']\"\u002F>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cul>\n      \u003Cli>\n        \u003Cdiv class=\"menu-item\" @click=\"$router.push({ name: 'Home' })\">\n          \u003Cfont-awesome-icon class=\"jva-icon\" icon=\"home\" \u002F>\n          \u003Cspan class=\"nav-item\">Home\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n        \u003Cspan class=\"tooltip\">Home\u003C\u002Fspan>\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"main-content\">\n      \u003Cdiv class=\"jva-container\">\n        \u003Crouter-view>\u003C\u002Frouter-view>\n      \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n",[4866],{"type":20,"tag":185,"props":4867,"children":4868},{"__ignoreMap":8},[4869,4884,4899,4942,4971,5015,5060,5076,5092,5107,5122,5164,5207,5244,5260,5296,5311,5326,5341,5369,5397,5421,5436,5451,5466],{"type":20,"tag":189,"props":4870,"children":4871},{"class":191,"line":192},[4872,4876,4880],{"type":20,"tag":189,"props":4873,"children":4874},{"style":196},[4875],{"type":29,"value":4451},{"type":20,"tag":189,"props":4877,"children":4878},{"style":2490},[4879],{"type":29,"value":4456},{"type":20,"tag":189,"props":4881,"children":4882},{"style":196},[4883],{"type":29,"value":4461},{"type":20,"tag":189,"props":4885,"children":4886},{"class":191,"line":202},[4887,4891,4895],{"type":20,"tag":189,"props":4888,"children":4889},{"style":196},[4890],{"type":29,"value":4469},{"type":20,"tag":189,"props":4892,"children":4893},{"style":2490},[4894],{"type":29,"value":4474},{"type":20,"tag":189,"props":4896,"children":4897},{"style":196},[4898],{"type":29,"value":4461},{"type":20,"tag":189,"props":4900,"children":4901},{"class":191,"line":217},[4902,4906,4910,4915,4919,4924,4929,4933,4938],{"type":20,"tag":189,"props":4903,"children":4904},{"style":196},[4905],{"type":29,"value":4486},{"type":20,"tag":189,"props":4907,"children":4908},{"style":2490},[4909],{"type":29,"value":4474},{"type":20,"tag":189,"props":4911,"children":4912},{"style":1215},[4913],{"type":29,"value":4914}," :class",{"type":20,"tag":189,"props":4916,"children":4917},{"style":196},[4918],{"type":29,"value":4565},{"type":20,"tag":189,"props":4920,"children":4921},{"style":1221},[4922],{"type":29,"value":4923},"\"['sidebar', { active: isActive }]\"",{"type":20,"tag":189,"props":4925,"children":4926},{"style":1215},[4927],{"type":29,"value":4928}," v-if",{"type":20,"tag":189,"props":4930,"children":4931},{"style":196},[4932],{"type":29,"value":4565},{"type":20,"tag":189,"props":4934,"children":4935},{"style":1221},[4936],{"type":29,"value":4937},"\"hasAnyAuthority('ROLE_ADMIN')\"",{"type":20,"tag":189,"props":4939,"children":4940},{"style":196},[4941],{"type":29,"value":4461},{"type":20,"tag":189,"props":4943,"children":4944},{"class":191,"line":231},[4945,4949,4953,4958,4962,4967],{"type":20,"tag":189,"props":4946,"children":4947},{"style":196},[4948],{"type":29,"value":4486},{"type":20,"tag":189,"props":4950,"children":4951},{"style":2490},[4952],{"type":29,"value":4474},{"type":20,"tag":189,"props":4954,"children":4955},{"style":1215},[4956],{"type":29,"value":4957}," class",{"type":20,"tag":189,"props":4959,"children":4960},{"style":196},[4961],{"type":29,"value":4565},{"type":20,"tag":189,"props":4963,"children":4964},{"style":1221},[4965],{"type":29,"value":4966},"\"menu-toggle-button\"",{"type":20,"tag":189,"props":4968,"children":4969},{"style":196},[4970],{"type":29,"value":4461},{"type":20,"tag":189,"props":4972,"children":4973},{"class":191,"line":245},[4974,4979,4983,4988,4992,4997,5002,5006,5011],{"type":20,"tag":189,"props":4975,"children":4976},{"style":196},[4977],{"type":29,"value":4978},"      \u003C",{"type":20,"tag":189,"props":4980,"children":4981},{"style":2490},[4982],{"type":29,"value":4474},{"type":20,"tag":189,"props":4984,"children":4985},{"style":1215},[4986],{"type":29,"value":4987}," id",{"type":20,"tag":189,"props":4989,"children":4990},{"style":196},[4991],{"type":29,"value":4565},{"type":20,"tag":189,"props":4993,"children":4994},{"style":1221},[4995],{"type":29,"value":4996},"\"btn\"",{"type":20,"tag":189,"props":4998,"children":4999},{"style":1215},[5000],{"type":29,"value":5001},"  @click",{"type":20,"tag":189,"props":5003,"children":5004},{"style":196},[5005],{"type":29,"value":4565},{"type":20,"tag":189,"props":5007,"children":5008},{"style":1221},[5009],{"type":29,"value":5010},"\"toggleSidebar\"",{"type":20,"tag":189,"props":5012,"children":5013},{"style":196},[5014],{"type":29,"value":4461},{"type":20,"tag":189,"props":5016,"children":5017},{"class":191,"line":259},[5018,5023,5028,5032,5036,5041,5046,5050,5055],{"type":20,"tag":189,"props":5019,"children":5020},{"style":196},[5021],{"type":29,"value":5022},"        \u003C",{"type":20,"tag":189,"props":5024,"children":5025},{"style":2490},[5026],{"type":29,"value":5027},"font-awesome-icon",{"type":20,"tag":189,"props":5029,"children":5030},{"style":1215},[5031],{"type":29,"value":4957},{"type":20,"tag":189,"props":5033,"children":5034},{"style":196},[5035],{"type":29,"value":4565},{"type":20,"tag":189,"props":5037,"children":5038},{"style":1221},[5039],{"type":29,"value":5040},"\"jva-icon\"",{"type":20,"tag":189,"props":5042,"children":5043},{"style":1215},[5044],{"type":29,"value":5045}," :icon",{"type":20,"tag":189,"props":5047,"children":5048},{"style":196},[5049],{"type":29,"value":4565},{"type":20,"tag":189,"props":5051,"children":5052},{"style":1221},[5053],{"type":29,"value":5054},"\"['fas', 'bars']\"",{"type":20,"tag":189,"props":5056,"children":5057},{"style":196},[5058],{"type":29,"value":5059},"\u002F>\n",{"type":20,"tag":189,"props":5061,"children":5062},{"class":191,"line":272},[5063,5068,5072],{"type":20,"tag":189,"props":5064,"children":5065},{"style":196},[5066],{"type":29,"value":5067},"      \u003C\u002F",{"type":20,"tag":189,"props":5069,"children":5070},{"style":2490},[5071],{"type":29,"value":4474},{"type":20,"tag":189,"props":5073,"children":5074},{"style":196},[5075],{"type":29,"value":4461},{"type":20,"tag":189,"props":5077,"children":5078},{"class":191,"line":286},[5079,5084,5088],{"type":20,"tag":189,"props":5080,"children":5081},{"style":196},[5082],{"type":29,"value":5083},"    \u003C\u002F",{"type":20,"tag":189,"props":5085,"children":5086},{"style":2490},[5087],{"type":29,"value":4474},{"type":20,"tag":189,"props":5089,"children":5090},{"style":196},[5091],{"type":29,"value":4461},{"type":20,"tag":189,"props":5093,"children":5094},{"class":191,"line":300},[5095,5099,5103],{"type":20,"tag":189,"props":5096,"children":5097},{"style":196},[5098],{"type":29,"value":4486},{"type":20,"tag":189,"props":5100,"children":5101},{"style":2490},[5102],{"type":29,"value":67},{"type":20,"tag":189,"props":5104,"children":5105},{"style":196},[5106],{"type":29,"value":4461},{"type":20,"tag":189,"props":5108,"children":5109},{"class":191,"line":314},[5110,5114,5118],{"type":20,"tag":189,"props":5111,"children":5112},{"style":196},[5113],{"type":29,"value":4978},{"type":20,"tag":189,"props":5115,"children":5116},{"style":2490},[5117],{"type":29,"value":71},{"type":20,"tag":189,"props":5119,"children":5120},{"style":196},[5121],{"type":29,"value":4461},{"type":20,"tag":189,"props":5123,"children":5124},{"class":191,"line":328},[5125,5129,5133,5137,5141,5146,5151,5155,5160],{"type":20,"tag":189,"props":5126,"children":5127},{"style":196},[5128],{"type":29,"value":5022},{"type":20,"tag":189,"props":5130,"children":5131},{"style":2490},[5132],{"type":29,"value":4474},{"type":20,"tag":189,"props":5134,"children":5135},{"style":1215},[5136],{"type":29,"value":4957},{"type":20,"tag":189,"props":5138,"children":5139},{"style":196},[5140],{"type":29,"value":4565},{"type":20,"tag":189,"props":5142,"children":5143},{"style":1221},[5144],{"type":29,"value":5145},"\"menu-item\"",{"type":20,"tag":189,"props":5147,"children":5148},{"style":1215},[5149],{"type":29,"value":5150}," @click",{"type":20,"tag":189,"props":5152,"children":5153},{"style":196},[5154],{"type":29,"value":4565},{"type":20,"tag":189,"props":5156,"children":5157},{"style":1221},[5158],{"type":29,"value":5159},"\"$router.push({ name: 'Home' })\"",{"type":20,"tag":189,"props":5161,"children":5162},{"style":196},[5163],{"type":29,"value":4461},{"type":20,"tag":189,"props":5165,"children":5166},{"class":191,"line":342},[5167,5172,5176,5180,5184,5188,5193,5197,5202],{"type":20,"tag":189,"props":5168,"children":5169},{"style":196},[5170],{"type":29,"value":5171},"          \u003C",{"type":20,"tag":189,"props":5173,"children":5174},{"style":2490},[5175],{"type":29,"value":5027},{"type":20,"tag":189,"props":5177,"children":5178},{"style":1215},[5179],{"type":29,"value":4957},{"type":20,"tag":189,"props":5181,"children":5182},{"style":196},[5183],{"type":29,"value":4565},{"type":20,"tag":189,"props":5185,"children":5186},{"style":1221},[5187],{"type":29,"value":5040},{"type":20,"tag":189,"props":5189,"children":5190},{"style":1215},[5191],{"type":29,"value":5192}," icon",{"type":20,"tag":189,"props":5194,"children":5195},{"style":196},[5196],{"type":29,"value":4565},{"type":20,"tag":189,"props":5198,"children":5199},{"style":1221},[5200],{"type":29,"value":5201},"\"home\"",{"type":20,"tag":189,"props":5203,"children":5204},{"style":196},[5205],{"type":29,"value":5206}," \u002F>\n",{"type":20,"tag":189,"props":5208,"children":5209},{"class":191,"line":356},[5210,5214,5218,5222,5226,5231,5236,5240],{"type":20,"tag":189,"props":5211,"children":5212},{"style":196},[5213],{"type":29,"value":5171},{"type":20,"tag":189,"props":5215,"children":5216},{"style":2490},[5217],{"type":29,"value":189},{"type":20,"tag":189,"props":5219,"children":5220},{"style":1215},[5221],{"type":29,"value":4957},{"type":20,"tag":189,"props":5223,"children":5224},{"style":196},[5225],{"type":29,"value":4565},{"type":20,"tag":189,"props":5227,"children":5228},{"style":1221},[5229],{"type":29,"value":5230},"\"nav-item\"",{"type":20,"tag":189,"props":5232,"children":5233},{"style":196},[5234],{"type":29,"value":5235},">Home\u003C\u002F",{"type":20,"tag":189,"props":5237,"children":5238},{"style":2490},[5239],{"type":29,"value":189},{"type":20,"tag":189,"props":5241,"children":5242},{"style":196},[5243],{"type":29,"value":4461},{"type":20,"tag":189,"props":5245,"children":5246},{"class":191,"line":375},[5247,5252,5256],{"type":20,"tag":189,"props":5248,"children":5249},{"style":196},[5250],{"type":29,"value":5251},"        \u003C\u002F",{"type":20,"tag":189,"props":5253,"children":5254},{"style":2490},[5255],{"type":29,"value":4474},{"type":20,"tag":189,"props":5257,"children":5258},{"style":196},[5259],{"type":29,"value":4461},{"type":20,"tag":189,"props":5261,"children":5262},{"class":191,"line":384},[5263,5267,5271,5275,5279,5284,5288,5292],{"type":20,"tag":189,"props":5264,"children":5265},{"style":196},[5266],{"type":29,"value":5022},{"type":20,"tag":189,"props":5268,"children":5269},{"style":2490},[5270],{"type":29,"value":189},{"type":20,"tag":189,"props":5272,"children":5273},{"style":1215},[5274],{"type":29,"value":4957},{"type":20,"tag":189,"props":5276,"children":5277},{"style":196},[5278],{"type":29,"value":4565},{"type":20,"tag":189,"props":5280,"children":5281},{"style":1221},[5282],{"type":29,"value":5283},"\"tooltip\"",{"type":20,"tag":189,"props":5285,"children":5286},{"style":196},[5287],{"type":29,"value":5235},{"type":20,"tag":189,"props":5289,"children":5290},{"style":2490},[5291],{"type":29,"value":189},{"type":20,"tag":189,"props":5293,"children":5294},{"style":196},[5295],{"type":29,"value":4461},{"type":20,"tag":189,"props":5297,"children":5298},{"class":191,"line":393},[5299,5303,5307],{"type":20,"tag":189,"props":5300,"children":5301},{"style":196},[5302],{"type":29,"value":5067},{"type":20,"tag":189,"props":5304,"children":5305},{"style":2490},[5306],{"type":29,"value":71},{"type":20,"tag":189,"props":5308,"children":5309},{"style":196},[5310],{"type":29,"value":4461},{"type":20,"tag":189,"props":5312,"children":5313},{"class":191,"line":403},[5314,5318,5322],{"type":20,"tag":189,"props":5315,"children":5316},{"style":196},[5317],{"type":29,"value":5083},{"type":20,"tag":189,"props":5319,"children":5320},{"style":2490},[5321],{"type":29,"value":67},{"type":20,"tag":189,"props":5323,"children":5324},{"style":196},[5325],{"type":29,"value":4461},{"type":20,"tag":189,"props":5327,"children":5328},{"class":191,"line":411},[5329,5333,5337],{"type":20,"tag":189,"props":5330,"children":5331},{"style":196},[5332],{"type":29,"value":4512},{"type":20,"tag":189,"props":5334,"children":5335},{"style":2490},[5336],{"type":29,"value":4474},{"type":20,"tag":189,"props":5338,"children":5339},{"style":196},[5340],{"type":29,"value":4461},{"type":20,"tag":189,"props":5342,"children":5343},{"class":191,"line":423},[5344,5348,5352,5356,5360,5365],{"type":20,"tag":189,"props":5345,"children":5346},{"style":196},[5347],{"type":29,"value":4469},{"type":20,"tag":189,"props":5349,"children":5350},{"style":2490},[5351],{"type":29,"value":4474},{"type":20,"tag":189,"props":5353,"children":5354},{"style":1215},[5355],{"type":29,"value":4957},{"type":20,"tag":189,"props":5357,"children":5358},{"style":196},[5359],{"type":29,"value":4565},{"type":20,"tag":189,"props":5361,"children":5362},{"style":1221},[5363],{"type":29,"value":5364},"\"main-content\"",{"type":20,"tag":189,"props":5366,"children":5367},{"style":196},[5368],{"type":29,"value":4461},{"type":20,"tag":189,"props":5370,"children":5371},{"class":191,"line":436},[5372,5376,5380,5384,5388,5393],{"type":20,"tag":189,"props":5373,"children":5374},{"style":196},[5375],{"type":29,"value":4978},{"type":20,"tag":189,"props":5377,"children":5378},{"style":2490},[5379],{"type":29,"value":4474},{"type":20,"tag":189,"props":5381,"children":5382},{"style":1215},[5383],{"type":29,"value":4957},{"type":20,"tag":189,"props":5385,"children":5386},{"style":196},[5387],{"type":29,"value":4565},{"type":20,"tag":189,"props":5389,"children":5390},{"style":1221},[5391],{"type":29,"value":5392},"\"jva-container\"",{"type":20,"tag":189,"props":5394,"children":5395},{"style":196},[5396],{"type":29,"value":4461},{"type":20,"tag":189,"props":5398,"children":5399},{"class":191,"line":449},[5400,5404,5409,5413,5417],{"type":20,"tag":189,"props":5401,"children":5402},{"style":196},[5403],{"type":29,"value":5022},{"type":20,"tag":189,"props":5405,"children":5406},{"style":2490},[5407],{"type":29,"value":5408},"router-view",{"type":20,"tag":189,"props":5410,"children":5411},{"style":196},[5412],{"type":29,"value":4589},{"type":20,"tag":189,"props":5414,"children":5415},{"style":2490},[5416],{"type":29,"value":5408},{"type":20,"tag":189,"props":5418,"children":5419},{"style":196},[5420],{"type":29,"value":4461},{"type":20,"tag":189,"props":5422,"children":5423},{"class":191,"line":462},[5424,5428,5432],{"type":20,"tag":189,"props":5425,"children":5426},{"style":196},[5427],{"type":29,"value":5067},{"type":20,"tag":189,"props":5429,"children":5430},{"style":2490},[5431],{"type":29,"value":4474},{"type":20,"tag":189,"props":5433,"children":5434},{"style":196},[5435],{"type":29,"value":4461},{"type":20,"tag":189,"props":5437,"children":5438},{"class":191,"line":475},[5439,5443,5447],{"type":20,"tag":189,"props":5440,"children":5441},{"style":196},[5442],{"type":29,"value":4512},{"type":20,"tag":189,"props":5444,"children":5445},{"style":2490},[5446],{"type":29,"value":4474},{"type":20,"tag":189,"props":5448,"children":5449},{"style":196},[5450],{"type":29,"value":4461},{"type":20,"tag":189,"props":5452,"children":5453},{"class":191,"line":487},[5454,5458,5462],{"type":20,"tag":189,"props":5455,"children":5456},{"style":196},[5457],{"type":29,"value":4512},{"type":20,"tag":189,"props":5459,"children":5460},{"style":2490},[5461],{"type":29,"value":4474},{"type":20,"tag":189,"props":5463,"children":5464},{"style":196},[5465],{"type":29,"value":4461},{"type":20,"tag":189,"props":5467,"children":5468},{"class":191,"line":499},[5469,5473,5477],{"type":20,"tag":189,"props":5470,"children":5471},{"style":196},[5472],{"type":29,"value":4528},{"type":20,"tag":189,"props":5474,"children":5475},{"style":2490},[5476],{"type":29,"value":4456},{"type":20,"tag":189,"props":5478,"children":5479},{"style":196},[5480],{"type":29,"value":4461},{"type":20,"tag":21,"props":5482,"children":5483},{},[5484],{"type":29,"value":5485},"Next, we expand on the basic structure to display our test pages. We\nalso add conditional styling to ensure an active menu item is\nhighlighted.",{"type":20,"tag":178,"props":5487,"children":5489},{"className":4437,"code":5488,"language":4439,"meta":8,"style":8},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv :class=\"['sidebar', { active: isActive }]\" v-if=\"hasAnyAuthority('ROLE_ADMIN')\">\n    \u003Cdiv class=\"menu-toggle-button\">\n      \u003Cdiv id=\"btn\"  @click=\"toggleSidebar\">\n        \u003Cfont-awesome-icon class=\"jva-icon\" :icon=\"['fas', 'bars']\"\u002F>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cul>\n      \u003Cli :class=\"{ active: $route.path === '\u002F' }\">\n        \u003Cdiv class=\"menu-item\" @click=\"$router.push({ name: 'Home' })\">\n          \u003Cfont-awesome-icon class=\"jva-icon\" icon=\"home\" \u002F>\n          \u003Cspan class=\"nav-item\">Home\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n        \u003Cspan class=\"tooltip\">Test Page 1\u003C\u002Fspan>\n      \u003C\u002Fli>\n      \u003Cli :class=\"{ active: $route.path === '\u002Fpage1' }\">\n        \u003Cdiv class=\"menu-item\" @click=\"$router.push({ name: 'Page1' })\">\n          \u003Cfont-awesome-icon class=\"jva-icon\" icon=\"gear\" \u002F>\n          \u003Cspan class=\"nav-item\">Test Page 1\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n        \u003Cspan class=\"tooltip\">Test Page 1\u003C\u002Fspan>\n      \u003C\u002Fli>\n      \u003Cli :class=\"{ active: $route.path === '\u002Fpage2' }\">\n        \u003Crouter-link to=\"\u002Fpage2\" class=\"menu-item\">\n          \u003Cfont-awesome-icon class=\"jva-icon\" icon=\"user\" \u002F>\n          \u003Cspan class=\"nav-item\">Test Page 2\u003C\u002Fspan>\n        \u003C\u002Frouter-link>\n        \u003Cspan class=\"tooltip\">Test Page 2\u003C\u002Fspan>\n      \u003C\u002Fli>\n      \u003Cli :class=\"{ active: $route.path === '\u002Fpage3' }\">\n        \u003Crouter-link to=\"\u002Fpage3\" class=\"menu-item\">\n          \u003Cfont-awesome-icon class=\"jva-icon\" icon=\"sitemap\" \u002F>\n          \u003Cspan class=\"nav-item\">Test Page 3\u003C\u002Fspan>\n        \u003C\u002Frouter-link>\n        \u003Cspan class=\"tooltip\">Test Page 3\u003C\u002Fspan>\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"main-content\">\n      \u003Cdiv class=\"jva-container\">\n        \u003Crouter-view>\u003C\u002Frouter-view>\n        \u003C!-- \u003Cjhi-footer>\u003C\u002Fjhi-footer>  -->\n      \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" src=\".\u002Fsidebar-menu.component.ts\">\u003C\u002Fscript>\n\n",[5490],{"type":20,"tag":185,"props":5491,"children":5492},{"__ignoreMap":8},[5493,5508,5523,5562,5589,5628,5667,5682,5697,5712,5740,5779,5818,5853,5868,5904,5919,5947,5987,6027,6062,6077,6112,6127,6155,6197,6237,6273,6288,6323,6338,6366,6406,6446,6482,6497,6532,6547,6562,6577,6604,6631,6654,6662,6677,6692,6707,6722,6729],{"type":20,"tag":189,"props":5494,"children":5495},{"class":191,"line":192},[5496,5500,5504],{"type":20,"tag":189,"props":5497,"children":5498},{"style":196},[5499],{"type":29,"value":4451},{"type":20,"tag":189,"props":5501,"children":5502},{"style":2490},[5503],{"type":29,"value":4456},{"type":20,"tag":189,"props":5505,"children":5506},{"style":196},[5507],{"type":29,"value":4461},{"type":20,"tag":189,"props":5509,"children":5510},{"class":191,"line":202},[5511,5515,5519],{"type":20,"tag":189,"props":5512,"children":5513},{"style":196},[5514],{"type":29,"value":4469},{"type":20,"tag":189,"props":5516,"children":5517},{"style":2490},[5518],{"type":29,"value":4474},{"type":20,"tag":189,"props":5520,"children":5521},{"style":196},[5522],{"type":29,"value":4461},{"type":20,"tag":189,"props":5524,"children":5525},{"class":191,"line":217},[5526,5530,5534,5538,5542,5546,5550,5554,5558],{"type":20,"tag":189,"props":5527,"children":5528},{"style":196},[5529],{"type":29,"value":4486},{"type":20,"tag":189,"props":5531,"children":5532},{"style":2490},[5533],{"type":29,"value":4474},{"type":20,"tag":189,"props":5535,"children":5536},{"style":1215},[5537],{"type":29,"value":4914},{"type":20,"tag":189,"props":5539,"children":5540},{"style":196},[5541],{"type":29,"value":4565},{"type":20,"tag":189,"props":5543,"children":5544},{"style":1221},[5545],{"type":29,"value":4923},{"type":20,"tag":189,"props":5547,"children":5548},{"style":1215},[5549],{"type":29,"value":4928},{"type":20,"tag":189,"props":5551,"children":5552},{"style":196},[5553],{"type":29,"value":4565},{"type":20,"tag":189,"props":5555,"children":5556},{"style":1221},[5557],{"type":29,"value":4937},{"type":20,"tag":189,"props":5559,"children":5560},{"style":196},[5561],{"type":29,"value":4461},{"type":20,"tag":189,"props":5563,"children":5564},{"class":191,"line":231},[5565,5569,5573,5577,5581,5585],{"type":20,"tag":189,"props":5566,"children":5567},{"style":196},[5568],{"type":29,"value":4486},{"type":20,"tag":189,"props":5570,"children":5571},{"style":2490},[5572],{"type":29,"value":4474},{"type":20,"tag":189,"props":5574,"children":5575},{"style":1215},[5576],{"type":29,"value":4957},{"type":20,"tag":189,"props":5578,"children":5579},{"style":196},[5580],{"type":29,"value":4565},{"type":20,"tag":189,"props":5582,"children":5583},{"style":1221},[5584],{"type":29,"value":4966},{"type":20,"tag":189,"props":5586,"children":5587},{"style":196},[5588],{"type":29,"value":4461},{"type":20,"tag":189,"props":5590,"children":5591},{"class":191,"line":245},[5592,5596,5600,5604,5608,5612,5616,5620,5624],{"type":20,"tag":189,"props":5593,"children":5594},{"style":196},[5595],{"type":29,"value":4978},{"type":20,"tag":189,"props":5597,"children":5598},{"style":2490},[5599],{"type":29,"value":4474},{"type":20,"tag":189,"props":5601,"children":5602},{"style":1215},[5603],{"type":29,"value":4987},{"type":20,"tag":189,"props":5605,"children":5606},{"style":196},[5607],{"type":29,"value":4565},{"type":20,"tag":189,"props":5609,"children":5610},{"style":1221},[5611],{"type":29,"value":4996},{"type":20,"tag":189,"props":5613,"children":5614},{"style":1215},[5615],{"type":29,"value":5001},{"type":20,"tag":189,"props":5617,"children":5618},{"style":196},[5619],{"type":29,"value":4565},{"type":20,"tag":189,"props":5621,"children":5622},{"style":1221},[5623],{"type":29,"value":5010},{"type":20,"tag":189,"props":5625,"children":5626},{"style":196},[5627],{"type":29,"value":4461},{"type":20,"tag":189,"props":5629,"children":5630},{"class":191,"line":259},[5631,5635,5639,5643,5647,5651,5655,5659,5663],{"type":20,"tag":189,"props":5632,"children":5633},{"style":196},[5634],{"type":29,"value":5022},{"type":20,"tag":189,"props":5636,"children":5637},{"style":2490},[5638],{"type":29,"value":5027},{"type":20,"tag":189,"props":5640,"children":5641},{"style":1215},[5642],{"type":29,"value":4957},{"type":20,"tag":189,"props":5644,"children":5645},{"style":196},[5646],{"type":29,"value":4565},{"type":20,"tag":189,"props":5648,"children":5649},{"style":1221},[5650],{"type":29,"value":5040},{"type":20,"tag":189,"props":5652,"children":5653},{"style":1215},[5654],{"type":29,"value":5045},{"type":20,"tag":189,"props":5656,"children":5657},{"style":196},[5658],{"type":29,"value":4565},{"type":20,"tag":189,"props":5660,"children":5661},{"style":1221},[5662],{"type":29,"value":5054},{"type":20,"tag":189,"props":5664,"children":5665},{"style":196},[5666],{"type":29,"value":5059},{"type":20,"tag":189,"props":5668,"children":5669},{"class":191,"line":272},[5670,5674,5678],{"type":20,"tag":189,"props":5671,"children":5672},{"style":196},[5673],{"type":29,"value":5067},{"type":20,"tag":189,"props":5675,"children":5676},{"style":2490},[5677],{"type":29,"value":4474},{"type":20,"tag":189,"props":5679,"children":5680},{"style":196},[5681],{"type":29,"value":4461},{"type":20,"tag":189,"props":5683,"children":5684},{"class":191,"line":286},[5685,5689,5693],{"type":20,"tag":189,"props":5686,"children":5687},{"style":196},[5688],{"type":29,"value":5083},{"type":20,"tag":189,"props":5690,"children":5691},{"style":2490},[5692],{"type":29,"value":4474},{"type":20,"tag":189,"props":5694,"children":5695},{"style":196},[5696],{"type":29,"value":4461},{"type":20,"tag":189,"props":5698,"children":5699},{"class":191,"line":300},[5700,5704,5708],{"type":20,"tag":189,"props":5701,"children":5702},{"style":196},[5703],{"type":29,"value":4486},{"type":20,"tag":189,"props":5705,"children":5706},{"style":2490},[5707],{"type":29,"value":67},{"type":20,"tag":189,"props":5709,"children":5710},{"style":196},[5711],{"type":29,"value":4461},{"type":20,"tag":189,"props":5713,"children":5714},{"class":191,"line":314},[5715,5719,5723,5727,5731,5736],{"type":20,"tag":189,"props":5716,"children":5717},{"style":196},[5718],{"type":29,"value":4978},{"type":20,"tag":189,"props":5720,"children":5721},{"style":2490},[5722],{"type":29,"value":71},{"type":20,"tag":189,"props":5724,"children":5725},{"style":1215},[5726],{"type":29,"value":4914},{"type":20,"tag":189,"props":5728,"children":5729},{"style":196},[5730],{"type":29,"value":4565},{"type":20,"tag":189,"props":5732,"children":5733},{"style":1221},[5734],{"type":29,"value":5735},"\"{ active: $route.path === '\u002F' }\"",{"type":20,"tag":189,"props":5737,"children":5738},{"style":196},[5739],{"type":29,"value":4461},{"type":20,"tag":189,"props":5741,"children":5742},{"class":191,"line":328},[5743,5747,5751,5755,5759,5763,5767,5771,5775],{"type":20,"tag":189,"props":5744,"children":5745},{"style":196},[5746],{"type":29,"value":5022},{"type":20,"tag":189,"props":5748,"children":5749},{"style":2490},[5750],{"type":29,"value":4474},{"type":20,"tag":189,"props":5752,"children":5753},{"style":1215},[5754],{"type":29,"value":4957},{"type":20,"tag":189,"props":5756,"children":5757},{"style":196},[5758],{"type":29,"value":4565},{"type":20,"tag":189,"props":5760,"children":5761},{"style":1221},[5762],{"type":29,"value":5145},{"type":20,"tag":189,"props":5764,"children":5765},{"style":1215},[5766],{"type":29,"value":5150},{"type":20,"tag":189,"props":5768,"children":5769},{"style":196},[5770],{"type":29,"value":4565},{"type":20,"tag":189,"props":5772,"children":5773},{"style":1221},[5774],{"type":29,"value":5159},{"type":20,"tag":189,"props":5776,"children":5777},{"style":196},[5778],{"type":29,"value":4461},{"type":20,"tag":189,"props":5780,"children":5781},{"class":191,"line":342},[5782,5786,5790,5794,5798,5802,5806,5810,5814],{"type":20,"tag":189,"props":5783,"children":5784},{"style":196},[5785],{"type":29,"value":5171},{"type":20,"tag":189,"props":5787,"children":5788},{"style":2490},[5789],{"type":29,"value":5027},{"type":20,"tag":189,"props":5791,"children":5792},{"style":1215},[5793],{"type":29,"value":4957},{"type":20,"tag":189,"props":5795,"children":5796},{"style":196},[5797],{"type":29,"value":4565},{"type":20,"tag":189,"props":5799,"children":5800},{"style":1221},[5801],{"type":29,"value":5040},{"type":20,"tag":189,"props":5803,"children":5804},{"style":1215},[5805],{"type":29,"value":5192},{"type":20,"tag":189,"props":5807,"children":5808},{"style":196},[5809],{"type":29,"value":4565},{"type":20,"tag":189,"props":5811,"children":5812},{"style":1221},[5813],{"type":29,"value":5201},{"type":20,"tag":189,"props":5815,"children":5816},{"style":196},[5817],{"type":29,"value":5206},{"type":20,"tag":189,"props":5819,"children":5820},{"class":191,"line":356},[5821,5825,5829,5833,5837,5841,5845,5849],{"type":20,"tag":189,"props":5822,"children":5823},{"style":196},[5824],{"type":29,"value":5171},{"type":20,"tag":189,"props":5826,"children":5827},{"style":2490},[5828],{"type":29,"value":189},{"type":20,"tag":189,"props":5830,"children":5831},{"style":1215},[5832],{"type":29,"value":4957},{"type":20,"tag":189,"props":5834,"children":5835},{"style":196},[5836],{"type":29,"value":4565},{"type":20,"tag":189,"props":5838,"children":5839},{"style":1221},[5840],{"type":29,"value":5230},{"type":20,"tag":189,"props":5842,"children":5843},{"style":196},[5844],{"type":29,"value":5235},{"type":20,"tag":189,"props":5846,"children":5847},{"style":2490},[5848],{"type":29,"value":189},{"type":20,"tag":189,"props":5850,"children":5851},{"style":196},[5852],{"type":29,"value":4461},{"type":20,"tag":189,"props":5854,"children":5855},{"class":191,"line":375},[5856,5860,5864],{"type":20,"tag":189,"props":5857,"children":5858},{"style":196},[5859],{"type":29,"value":5251},{"type":20,"tag":189,"props":5861,"children":5862},{"style":2490},[5863],{"type":29,"value":4474},{"type":20,"tag":189,"props":5865,"children":5866},{"style":196},[5867],{"type":29,"value":4461},{"type":20,"tag":189,"props":5869,"children":5870},{"class":191,"line":384},[5871,5875,5879,5883,5887,5891,5896,5900],{"type":20,"tag":189,"props":5872,"children":5873},{"style":196},[5874],{"type":29,"value":5022},{"type":20,"tag":189,"props":5876,"children":5877},{"style":2490},[5878],{"type":29,"value":189},{"type":20,"tag":189,"props":5880,"children":5881},{"style":1215},[5882],{"type":29,"value":4957},{"type":20,"tag":189,"props":5884,"children":5885},{"style":196},[5886],{"type":29,"value":4565},{"type":20,"tag":189,"props":5888,"children":5889},{"style":1221},[5890],{"type":29,"value":5283},{"type":20,"tag":189,"props":5892,"children":5893},{"style":196},[5894],{"type":29,"value":5895},">Test Page 1\u003C\u002F",{"type":20,"tag":189,"props":5897,"children":5898},{"style":2490},[5899],{"type":29,"value":189},{"type":20,"tag":189,"props":5901,"children":5902},{"style":196},[5903],{"type":29,"value":4461},{"type":20,"tag":189,"props":5905,"children":5906},{"class":191,"line":393},[5907,5911,5915],{"type":20,"tag":189,"props":5908,"children":5909},{"style":196},[5910],{"type":29,"value":5067},{"type":20,"tag":189,"props":5912,"children":5913},{"style":2490},[5914],{"type":29,"value":71},{"type":20,"tag":189,"props":5916,"children":5917},{"style":196},[5918],{"type":29,"value":4461},{"type":20,"tag":189,"props":5920,"children":5921},{"class":191,"line":403},[5922,5926,5930,5934,5938,5943],{"type":20,"tag":189,"props":5923,"children":5924},{"style":196},[5925],{"type":29,"value":4978},{"type":20,"tag":189,"props":5927,"children":5928},{"style":2490},[5929],{"type":29,"value":71},{"type":20,"tag":189,"props":5931,"children":5932},{"style":1215},[5933],{"type":29,"value":4914},{"type":20,"tag":189,"props":5935,"children":5936},{"style":196},[5937],{"type":29,"value":4565},{"type":20,"tag":189,"props":5939,"children":5940},{"style":1221},[5941],{"type":29,"value":5942},"\"{ active: $route.path === '\u002Fpage1' }\"",{"type":20,"tag":189,"props":5944,"children":5945},{"style":196},[5946],{"type":29,"value":4461},{"type":20,"tag":189,"props":5948,"children":5949},{"class":191,"line":411},[5950,5954,5958,5962,5966,5970,5974,5978,5983],{"type":20,"tag":189,"props":5951,"children":5952},{"style":196},[5953],{"type":29,"value":5022},{"type":20,"tag":189,"props":5955,"children":5956},{"style":2490},[5957],{"type":29,"value":4474},{"type":20,"tag":189,"props":5959,"children":5960},{"style":1215},[5961],{"type":29,"value":4957},{"type":20,"tag":189,"props":5963,"children":5964},{"style":196},[5965],{"type":29,"value":4565},{"type":20,"tag":189,"props":5967,"children":5968},{"style":1221},[5969],{"type":29,"value":5145},{"type":20,"tag":189,"props":5971,"children":5972},{"style":1215},[5973],{"type":29,"value":5150},{"type":20,"tag":189,"props":5975,"children":5976},{"style":196},[5977],{"type":29,"value":4565},{"type":20,"tag":189,"props":5979,"children":5980},{"style":1221},[5981],{"type":29,"value":5982},"\"$router.push({ name: 'Page1' })\"",{"type":20,"tag":189,"props":5984,"children":5985},{"style":196},[5986],{"type":29,"value":4461},{"type":20,"tag":189,"props":5988,"children":5989},{"class":191,"line":423},[5990,5994,5998,6002,6006,6010,6014,6018,6023],{"type":20,"tag":189,"props":5991,"children":5992},{"style":196},[5993],{"type":29,"value":5171},{"type":20,"tag":189,"props":5995,"children":5996},{"style":2490},[5997],{"type":29,"value":5027},{"type":20,"tag":189,"props":5999,"children":6000},{"style":1215},[6001],{"type":29,"value":4957},{"type":20,"tag":189,"props":6003,"children":6004},{"style":196},[6005],{"type":29,"value":4565},{"type":20,"tag":189,"props":6007,"children":6008},{"style":1221},[6009],{"type":29,"value":5040},{"type":20,"tag":189,"props":6011,"children":6012},{"style":1215},[6013],{"type":29,"value":5192},{"type":20,"tag":189,"props":6015,"children":6016},{"style":196},[6017],{"type":29,"value":4565},{"type":20,"tag":189,"props":6019,"children":6020},{"style":1221},[6021],{"type":29,"value":6022},"\"gear\"",{"type":20,"tag":189,"props":6024,"children":6025},{"style":196},[6026],{"type":29,"value":5206},{"type":20,"tag":189,"props":6028,"children":6029},{"class":191,"line":436},[6030,6034,6038,6042,6046,6050,6054,6058],{"type":20,"tag":189,"props":6031,"children":6032},{"style":196},[6033],{"type":29,"value":5171},{"type":20,"tag":189,"props":6035,"children":6036},{"style":2490},[6037],{"type":29,"value":189},{"type":20,"tag":189,"props":6039,"children":6040},{"style":1215},[6041],{"type":29,"value":4957},{"type":20,"tag":189,"props":6043,"children":6044},{"style":196},[6045],{"type":29,"value":4565},{"type":20,"tag":189,"props":6047,"children":6048},{"style":1221},[6049],{"type":29,"value":5230},{"type":20,"tag":189,"props":6051,"children":6052},{"style":196},[6053],{"type":29,"value":5895},{"type":20,"tag":189,"props":6055,"children":6056},{"style":2490},[6057],{"type":29,"value":189},{"type":20,"tag":189,"props":6059,"children":6060},{"style":196},[6061],{"type":29,"value":4461},{"type":20,"tag":189,"props":6063,"children":6064},{"class":191,"line":449},[6065,6069,6073],{"type":20,"tag":189,"props":6066,"children":6067},{"style":196},[6068],{"type":29,"value":5251},{"type":20,"tag":189,"props":6070,"children":6071},{"style":2490},[6072],{"type":29,"value":4474},{"type":20,"tag":189,"props":6074,"children":6075},{"style":196},[6076],{"type":29,"value":4461},{"type":20,"tag":189,"props":6078,"children":6079},{"class":191,"line":462},[6080,6084,6088,6092,6096,6100,6104,6108],{"type":20,"tag":189,"props":6081,"children":6082},{"style":196},[6083],{"type":29,"value":5022},{"type":20,"tag":189,"props":6085,"children":6086},{"style":2490},[6087],{"type":29,"value":189},{"type":20,"tag":189,"props":6089,"children":6090},{"style":1215},[6091],{"type":29,"value":4957},{"type":20,"tag":189,"props":6093,"children":6094},{"style":196},[6095],{"type":29,"value":4565},{"type":20,"tag":189,"props":6097,"children":6098},{"style":1221},[6099],{"type":29,"value":5283},{"type":20,"tag":189,"props":6101,"children":6102},{"style":196},[6103],{"type":29,"value":5895},{"type":20,"tag":189,"props":6105,"children":6106},{"style":2490},[6107],{"type":29,"value":189},{"type":20,"tag":189,"props":6109,"children":6110},{"style":196},[6111],{"type":29,"value":4461},{"type":20,"tag":189,"props":6113,"children":6114},{"class":191,"line":475},[6115,6119,6123],{"type":20,"tag":189,"props":6116,"children":6117},{"style":196},[6118],{"type":29,"value":5067},{"type":20,"tag":189,"props":6120,"children":6121},{"style":2490},[6122],{"type":29,"value":71},{"type":20,"tag":189,"props":6124,"children":6125},{"style":196},[6126],{"type":29,"value":4461},{"type":20,"tag":189,"props":6128,"children":6129},{"class":191,"line":487},[6130,6134,6138,6142,6146,6151],{"type":20,"tag":189,"props":6131,"children":6132},{"style":196},[6133],{"type":29,"value":4978},{"type":20,"tag":189,"props":6135,"children":6136},{"style":2490},[6137],{"type":29,"value":71},{"type":20,"tag":189,"props":6139,"children":6140},{"style":1215},[6141],{"type":29,"value":4914},{"type":20,"tag":189,"props":6143,"children":6144},{"style":196},[6145],{"type":29,"value":4565},{"type":20,"tag":189,"props":6147,"children":6148},{"style":1221},[6149],{"type":29,"value":6150},"\"{ active: $route.path === '\u002Fpage2' }\"",{"type":20,"tag":189,"props":6152,"children":6153},{"style":196},[6154],{"type":29,"value":4461},{"type":20,"tag":189,"props":6156,"children":6157},{"class":191,"line":499},[6158,6162,6167,6172,6176,6181,6185,6189,6193],{"type":20,"tag":189,"props":6159,"children":6160},{"style":196},[6161],{"type":29,"value":5022},{"type":20,"tag":189,"props":6163,"children":6164},{"style":2490},[6165],{"type":29,"value":6166},"router-link",{"type":20,"tag":189,"props":6168,"children":6169},{"style":1215},[6170],{"type":29,"value":6171}," to",{"type":20,"tag":189,"props":6173,"children":6174},{"style":196},[6175],{"type":29,"value":4565},{"type":20,"tag":189,"props":6177,"children":6178},{"style":1221},[6179],{"type":29,"value":6180},"\"\u002Fpage2\"",{"type":20,"tag":189,"props":6182,"children":6183},{"style":1215},[6184],{"type":29,"value":4957},{"type":20,"tag":189,"props":6186,"children":6187},{"style":196},[6188],{"type":29,"value":4565},{"type":20,"tag":189,"props":6190,"children":6191},{"style":1221},[6192],{"type":29,"value":5145},{"type":20,"tag":189,"props":6194,"children":6195},{"style":196},[6196],{"type":29,"value":4461},{"type":20,"tag":189,"props":6198,"children":6199},{"class":191,"line":511},[6200,6204,6208,6212,6216,6220,6224,6228,6233],{"type":20,"tag":189,"props":6201,"children":6202},{"style":196},[6203],{"type":29,"value":5171},{"type":20,"tag":189,"props":6205,"children":6206},{"style":2490},[6207],{"type":29,"value":5027},{"type":20,"tag":189,"props":6209,"children":6210},{"style":1215},[6211],{"type":29,"value":4957},{"type":20,"tag":189,"props":6213,"children":6214},{"style":196},[6215],{"type":29,"value":4565},{"type":20,"tag":189,"props":6217,"children":6218},{"style":1221},[6219],{"type":29,"value":5040},{"type":20,"tag":189,"props":6221,"children":6222},{"style":1215},[6223],{"type":29,"value":5192},{"type":20,"tag":189,"props":6225,"children":6226},{"style":196},[6227],{"type":29,"value":4565},{"type":20,"tag":189,"props":6229,"children":6230},{"style":1221},[6231],{"type":29,"value":6232},"\"user\"",{"type":20,"tag":189,"props":6234,"children":6235},{"style":196},[6236],{"type":29,"value":5206},{"type":20,"tag":189,"props":6238,"children":6239},{"class":191,"line":523},[6240,6244,6248,6252,6256,6260,6265,6269],{"type":20,"tag":189,"props":6241,"children":6242},{"style":196},[6243],{"type":29,"value":5171},{"type":20,"tag":189,"props":6245,"children":6246},{"style":2490},[6247],{"type":29,"value":189},{"type":20,"tag":189,"props":6249,"children":6250},{"style":1215},[6251],{"type":29,"value":4957},{"type":20,"tag":189,"props":6253,"children":6254},{"style":196},[6255],{"type":29,"value":4565},{"type":20,"tag":189,"props":6257,"children":6258},{"style":1221},[6259],{"type":29,"value":5230},{"type":20,"tag":189,"props":6261,"children":6262},{"style":196},[6263],{"type":29,"value":6264},">Test Page 2\u003C\u002F",{"type":20,"tag":189,"props":6266,"children":6267},{"style":2490},[6268],{"type":29,"value":189},{"type":20,"tag":189,"props":6270,"children":6271},{"style":196},[6272],{"type":29,"value":4461},{"type":20,"tag":189,"props":6274,"children":6275},{"class":191,"line":536},[6276,6280,6284],{"type":20,"tag":189,"props":6277,"children":6278},{"style":196},[6279],{"type":29,"value":5251},{"type":20,"tag":189,"props":6281,"children":6282},{"style":2490},[6283],{"type":29,"value":6166},{"type":20,"tag":189,"props":6285,"children":6286},{"style":196},[6287],{"type":29,"value":4461},{"type":20,"tag":189,"props":6289,"children":6290},{"class":191,"line":550},[6291,6295,6299,6303,6307,6311,6315,6319],{"type":20,"tag":189,"props":6292,"children":6293},{"style":196},[6294],{"type":29,"value":5022},{"type":20,"tag":189,"props":6296,"children":6297},{"style":2490},[6298],{"type":29,"value":189},{"type":20,"tag":189,"props":6300,"children":6301},{"style":1215},[6302],{"type":29,"value":4957},{"type":20,"tag":189,"props":6304,"children":6305},{"style":196},[6306],{"type":29,"value":4565},{"type":20,"tag":189,"props":6308,"children":6309},{"style":1221},[6310],{"type":29,"value":5283},{"type":20,"tag":189,"props":6312,"children":6313},{"style":196},[6314],{"type":29,"value":6264},{"type":20,"tag":189,"props":6316,"children":6317},{"style":2490},[6318],{"type":29,"value":189},{"type":20,"tag":189,"props":6320,"children":6321},{"style":196},[6322],{"type":29,"value":4461},{"type":20,"tag":189,"props":6324,"children":6325},{"class":191,"line":562},[6326,6330,6334],{"type":20,"tag":189,"props":6327,"children":6328},{"style":196},[6329],{"type":29,"value":5067},{"type":20,"tag":189,"props":6331,"children":6332},{"style":2490},[6333],{"type":29,"value":71},{"type":20,"tag":189,"props":6335,"children":6336},{"style":196},[6337],{"type":29,"value":4461},{"type":20,"tag":189,"props":6339,"children":6340},{"class":191,"line":574},[6341,6345,6349,6353,6357,6362],{"type":20,"tag":189,"props":6342,"children":6343},{"style":196},[6344],{"type":29,"value":4978},{"type":20,"tag":189,"props":6346,"children":6347},{"style":2490},[6348],{"type":29,"value":71},{"type":20,"tag":189,"props":6350,"children":6351},{"style":1215},[6352],{"type":29,"value":4914},{"type":20,"tag":189,"props":6354,"children":6355},{"style":196},[6356],{"type":29,"value":4565},{"type":20,"tag":189,"props":6358,"children":6359},{"style":1221},[6360],{"type":29,"value":6361},"\"{ active: $route.path === '\u002Fpage3' }\"",{"type":20,"tag":189,"props":6363,"children":6364},{"style":196},[6365],{"type":29,"value":4461},{"type":20,"tag":189,"props":6367,"children":6368},{"class":191,"line":582},[6369,6373,6377,6381,6385,6390,6394,6398,6402],{"type":20,"tag":189,"props":6370,"children":6371},{"style":196},[6372],{"type":29,"value":5022},{"type":20,"tag":189,"props":6374,"children":6375},{"style":2490},[6376],{"type":29,"value":6166},{"type":20,"tag":189,"props":6378,"children":6379},{"style":1215},[6380],{"type":29,"value":6171},{"type":20,"tag":189,"props":6382,"children":6383},{"style":196},[6384],{"type":29,"value":4565},{"type":20,"tag":189,"props":6386,"children":6387},{"style":1221},[6388],{"type":29,"value":6389},"\"\u002Fpage3\"",{"type":20,"tag":189,"props":6391,"children":6392},{"style":1215},[6393],{"type":29,"value":4957},{"type":20,"tag":189,"props":6395,"children":6396},{"style":196},[6397],{"type":29,"value":4565},{"type":20,"tag":189,"props":6399,"children":6400},{"style":1221},[6401],{"type":29,"value":5145},{"type":20,"tag":189,"props":6403,"children":6404},{"style":196},[6405],{"type":29,"value":4461},{"type":20,"tag":189,"props":6407,"children":6408},{"class":191,"line":591},[6409,6413,6417,6421,6425,6429,6433,6437,6442],{"type":20,"tag":189,"props":6410,"children":6411},{"style":196},[6412],{"type":29,"value":5171},{"type":20,"tag":189,"props":6414,"children":6415},{"style":2490},[6416],{"type":29,"value":5027},{"type":20,"tag":189,"props":6418,"children":6419},{"style":1215},[6420],{"type":29,"value":4957},{"type":20,"tag":189,"props":6422,"children":6423},{"style":196},[6424],{"type":29,"value":4565},{"type":20,"tag":189,"props":6426,"children":6427},{"style":1221},[6428],{"type":29,"value":5040},{"type":20,"tag":189,"props":6430,"children":6431},{"style":1215},[6432],{"type":29,"value":5192},{"type":20,"tag":189,"props":6434,"children":6435},{"style":196},[6436],{"type":29,"value":4565},{"type":20,"tag":189,"props":6438,"children":6439},{"style":1221},[6440],{"type":29,"value":6441},"\"sitemap\"",{"type":20,"tag":189,"props":6443,"children":6444},{"style":196},[6445],{"type":29,"value":5206},{"type":20,"tag":189,"props":6447,"children":6448},{"class":191,"line":599},[6449,6453,6457,6461,6465,6469,6474,6478],{"type":20,"tag":189,"props":6450,"children":6451},{"style":196},[6452],{"type":29,"value":5171},{"type":20,"tag":189,"props":6454,"children":6455},{"style":2490},[6456],{"type":29,"value":189},{"type":20,"tag":189,"props":6458,"children":6459},{"style":1215},[6460],{"type":29,"value":4957},{"type":20,"tag":189,"props":6462,"children":6463},{"style":196},[6464],{"type":29,"value":4565},{"type":20,"tag":189,"props":6466,"children":6467},{"style":1221},[6468],{"type":29,"value":5230},{"type":20,"tag":189,"props":6470,"children":6471},{"style":196},[6472],{"type":29,"value":6473},">Test Page 3\u003C\u002F",{"type":20,"tag":189,"props":6475,"children":6476},{"style":2490},[6477],{"type":29,"value":189},{"type":20,"tag":189,"props":6479,"children":6480},{"style":196},[6481],{"type":29,"value":4461},{"type":20,"tag":189,"props":6483,"children":6484},{"class":191,"line":607},[6485,6489,6493],{"type":20,"tag":189,"props":6486,"children":6487},{"style":196},[6488],{"type":29,"value":5251},{"type":20,"tag":189,"props":6490,"children":6491},{"style":2490},[6492],{"type":29,"value":6166},{"type":20,"tag":189,"props":6494,"children":6495},{"style":196},[6496],{"type":29,"value":4461},{"type":20,"tag":189,"props":6498,"children":6499},{"class":191,"line":615},[6500,6504,6508,6512,6516,6520,6524,6528],{"type":20,"tag":189,"props":6501,"children":6502},{"style":196},[6503],{"type":29,"value":5022},{"type":20,"tag":189,"props":6505,"children":6506},{"style":2490},[6507],{"type":29,"value":189},{"type":20,"tag":189,"props":6509,"children":6510},{"style":1215},[6511],{"type":29,"value":4957},{"type":20,"tag":189,"props":6513,"children":6514},{"style":196},[6515],{"type":29,"value":4565},{"type":20,"tag":189,"props":6517,"children":6518},{"style":1221},[6519],{"type":29,"value":5283},{"type":20,"tag":189,"props":6521,"children":6522},{"style":196},[6523],{"type":29,"value":6473},{"type":20,"tag":189,"props":6525,"children":6526},{"style":2490},[6527],{"type":29,"value":189},{"type":20,"tag":189,"props":6529,"children":6530},{"style":196},[6531],{"type":29,"value":4461},{"type":20,"tag":189,"props":6533,"children":6534},{"class":191,"line":627},[6535,6539,6543],{"type":20,"tag":189,"props":6536,"children":6537},{"style":196},[6538],{"type":29,"value":5067},{"type":20,"tag":189,"props":6540,"children":6541},{"style":2490},[6542],{"type":29,"value":71},{"type":20,"tag":189,"props":6544,"children":6545},{"style":196},[6546],{"type":29,"value":4461},{"type":20,"tag":189,"props":6548,"children":6549},{"class":191,"line":640},[6550,6554,6558],{"type":20,"tag":189,"props":6551,"children":6552},{"style":196},[6553],{"type":29,"value":5083},{"type":20,"tag":189,"props":6555,"children":6556},{"style":2490},[6557],{"type":29,"value":67},{"type":20,"tag":189,"props":6559,"children":6560},{"style":196},[6561],{"type":29,"value":4461},{"type":20,"tag":189,"props":6563,"children":6564},{"class":191,"line":652},[6565,6569,6573],{"type":20,"tag":189,"props":6566,"children":6567},{"style":196},[6568],{"type":29,"value":4512},{"type":20,"tag":189,"props":6570,"children":6571},{"style":2490},[6572],{"type":29,"value":4474},{"type":20,"tag":189,"props":6574,"children":6575},{"style":196},[6576],{"type":29,"value":4461},{"type":20,"tag":189,"props":6578,"children":6579},{"class":191,"line":665},[6580,6584,6588,6592,6596,6600],{"type":20,"tag":189,"props":6581,"children":6582},{"style":196},[6583],{"type":29,"value":4469},{"type":20,"tag":189,"props":6585,"children":6586},{"style":2490},[6587],{"type":29,"value":4474},{"type":20,"tag":189,"props":6589,"children":6590},{"style":1215},[6591],{"type":29,"value":4957},{"type":20,"tag":189,"props":6593,"children":6594},{"style":196},[6595],{"type":29,"value":4565},{"type":20,"tag":189,"props":6597,"children":6598},{"style":1221},[6599],{"type":29,"value":5364},{"type":20,"tag":189,"props":6601,"children":6602},{"style":196},[6603],{"type":29,"value":4461},{"type":20,"tag":189,"props":6605,"children":6606},{"class":191,"line":677},[6607,6611,6615,6619,6623,6627],{"type":20,"tag":189,"props":6608,"children":6609},{"style":196},[6610],{"type":29,"value":4978},{"type":20,"tag":189,"props":6612,"children":6613},{"style":2490},[6614],{"type":29,"value":4474},{"type":20,"tag":189,"props":6616,"children":6617},{"style":1215},[6618],{"type":29,"value":4957},{"type":20,"tag":189,"props":6620,"children":6621},{"style":196},[6622],{"type":29,"value":4565},{"type":20,"tag":189,"props":6624,"children":6625},{"style":1221},[6626],{"type":29,"value":5392},{"type":20,"tag":189,"props":6628,"children":6629},{"style":196},[6630],{"type":29,"value":4461},{"type":20,"tag":189,"props":6632,"children":6633},{"class":191,"line":689},[6634,6638,6642,6646,6650],{"type":20,"tag":189,"props":6635,"children":6636},{"style":196},[6637],{"type":29,"value":5022},{"type":20,"tag":189,"props":6639,"children":6640},{"style":2490},[6641],{"type":29,"value":5408},{"type":20,"tag":189,"props":6643,"children":6644},{"style":196},[6645],{"type":29,"value":4589},{"type":20,"tag":189,"props":6647,"children":6648},{"style":2490},[6649],{"type":29,"value":5408},{"type":20,"tag":189,"props":6651,"children":6652},{"style":196},[6653],{"type":29,"value":4461},{"type":20,"tag":189,"props":6655,"children":6656},{"class":191,"line":701},[6657],{"type":20,"tag":189,"props":6658,"children":6659},{"style":1993},[6660],{"type":29,"value":6661},"        \u003C!-- \u003Cjhi-footer>\u003C\u002Fjhi-footer>  -->\n",{"type":20,"tag":189,"props":6663,"children":6664},{"class":191,"line":713},[6665,6669,6673],{"type":20,"tag":189,"props":6666,"children":6667},{"style":196},[6668],{"type":29,"value":5067},{"type":20,"tag":189,"props":6670,"children":6671},{"style":2490},[6672],{"type":29,"value":4474},{"type":20,"tag":189,"props":6674,"children":6675},{"style":196},[6676],{"type":29,"value":4461},{"type":20,"tag":189,"props":6678,"children":6679},{"class":191,"line":725},[6680,6684,6688],{"type":20,"tag":189,"props":6681,"children":6682},{"style":196},[6683],{"type":29,"value":4512},{"type":20,"tag":189,"props":6685,"children":6686},{"style":2490},[6687],{"type":29,"value":4474},{"type":20,"tag":189,"props":6689,"children":6690},{"style":196},[6691],{"type":29,"value":4461},{"type":20,"tag":189,"props":6693,"children":6694},{"class":191,"line":737},[6695,6699,6703],{"type":20,"tag":189,"props":6696,"children":6697},{"style":196},[6698],{"type":29,"value":4512},{"type":20,"tag":189,"props":6700,"children":6701},{"style":2490},[6702],{"type":29,"value":4474},{"type":20,"tag":189,"props":6704,"children":6705},{"style":196},[6706],{"type":29,"value":4461},{"type":20,"tag":189,"props":6708,"children":6709},{"class":191,"line":750},[6710,6714,6718],{"type":20,"tag":189,"props":6711,"children":6712},{"style":196},[6713],{"type":29,"value":4528},{"type":20,"tag":189,"props":6715,"children":6716},{"style":2490},[6717],{"type":29,"value":4456},{"type":20,"tag":189,"props":6719,"children":6720},{"style":196},[6721],{"type":29,"value":4461},{"type":20,"tag":189,"props":6723,"children":6724},{"class":191,"line":762},[6725],{"type":20,"tag":189,"props":6726,"children":6727},{"emptyLinePlaceholder":397},[6728],{"type":29,"value":400},{"type":20,"tag":189,"props":6730,"children":6731},{"class":191,"line":774},[6732,6736,6740,6744,6748,6752,6756,6760,6765,6769,6773],{"type":20,"tag":189,"props":6733,"children":6734},{"style":196},[6735],{"type":29,"value":4451},{"type":20,"tag":189,"props":6737,"children":6738},{"style":2490},[6739],{"type":29,"value":4555},{"type":20,"tag":189,"props":6741,"children":6742},{"style":1215},[6743],{"type":29,"value":4560},{"type":20,"tag":189,"props":6745,"children":6746},{"style":196},[6747],{"type":29,"value":4565},{"type":20,"tag":189,"props":6749,"children":6750},{"style":1221},[6751],{"type":29,"value":4570},{"type":20,"tag":189,"props":6753,"children":6754},{"style":1215},[6755],{"type":29,"value":4575},{"type":20,"tag":189,"props":6757,"children":6758},{"style":196},[6759],{"type":29,"value":4565},{"type":20,"tag":189,"props":6761,"children":6762},{"style":1221},[6763],{"type":29,"value":6764},"\".\u002Fsidebar-menu.component.ts\"",{"type":20,"tag":189,"props":6766,"children":6767},{"style":196},[6768],{"type":29,"value":4589},{"type":20,"tag":189,"props":6770,"children":6771},{"style":2490},[6772],{"type":29,"value":4555},{"type":20,"tag":189,"props":6774,"children":6775},{"style":196},[6776],{"type":29,"value":4461},{"type":20,"tag":21,"props":6778,"children":6779},{},[6780,6782,6785],{"type":29,"value":6781},"We now have to style our side menu. First create a scss file called\nva-sidemenu.scss in the content.scss folder:",{"type":20,"tag":1485,"props":6783,"children":6784},{},[],{"type":20,"tag":34,"props":6786,"children":6790},{"alt":8,"height":6787,"src":6788,"width":6789},108,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage32.png",304,[],{"type":20,"tag":21,"props":6792,"children":6793},{},[6794,6796],{"type":29,"value":6795},"To view a tutorial on how to build a simple resonsive sidebar menu,\ncheck out this video:\n",{"type":20,"tag":54,"props":6797,"children":6800},{"href":6798,"rel":6799},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=uy1tgKOnPB0&t=1388s",[58],[6801],{"type":29,"value":6798},{"type":20,"tag":21,"props":6803,"children":6804},{},[6805],{"type":29,"value":6806},"Below is the styling of the menu:",{"type":20,"tag":178,"props":6808,"children":6810},{"className":2465,"code":6809,"language":2467,"meta":8,"style":8},"@import 'va-variables';\n\n.sidebar {\n    box-sizing: border-box;\n    position: fixed;\n    top: 2.5rem; \u002F* Adjusted to be below a navbar of height  *\u002F\n    left: 0px; \u002F* Assuming this is the intended left position *\u002F\n    height: calc(100vh - 2.5rem); \u002F* Adjusted to accommodate the navbar's height *\u002F\n    background-color: $sidebar-menu-bg-color;\n    transition: all 0.5s ease;\n    z-index: 1;\n    overflow-y: auto; \u002F* Enable vertical scrolling *\u002F\n    overflow-x: hidden; \u002F* Prevent horizontal scrolling *\u002F\n    width: 3.5rem;  \n  }\n\n  .sidebar.active {\n    width: 250px;\n  }\n\n  .sidebar .menu-toggle-button {\n    margin-bottom: 3rem;\n  }\n\n  .sidebar #btn {\n    position: absolute;\n    color: #fff;\n    top: 0.4rem;\n    left: 1.4rem;\n    font-size: 1.2rem;\n    line-height: 50px;\n    transform: translateX(-50%);\n    cursor: pointer;\n  }\n\n  .sidebar ul {\n    padding-left: 0;\n    margin-top: 1rem;\n  }\n\n  .sidebar ul li {\n    position: relative;\n    list-style-type: none;\n    height: 50px;\n    width: 90%;\n    line-height: 50px;\n    padding-left: 0.5rem;\n  }\n\n  .sidebar ul li:hover,\n  .sidebar ul li.active {\n    background-color: $sidebar-menu-hover-bg-color;\n    color: white;\n    border-radius: 0.8rem;\n  }\n\n  .jva-icon {\n    text-align: center;\n    line-height: 2rem;\n    border-radius: 12px;\n    padding: 7px;\n  }\n\n  .toggle-arrow {\n    margin-left: auto; \u002F* Push the arrow to the right *\u002F\n    cursor: pointer; \u002F* Show pointer cursor on hover *\u002F\n  }\n\n  .sidebar .menu-item {\n    color: #D1E8E2;\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n    border-radius: 0.8rem;\n    min-height: 50px;\n    width: 2.5rem;\n  }\n\n  .sidebar.active .menu-item {\n    width: 100%;\n  }\n\n  .sidebar .menu-item-parent {\n    color: #D1E8E2;\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n    min-height: 50px;\n    width: 2.5rem;\n  }\n\n  .sidebar .menu-item-child {\n    color: #D1E8E2;\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n    border-radius: 0.8rem;\n    padding-left: 1.5rem; \u002F* Adjust this value for the desired indentation *\u002F\n  }\n\n  .sidebar.active .menu-item-child:hover {\n    background-color: $sidebar-menu-hover-bg-color;\n    color: white\n  }\n\n  \u002F* Control displaying menu descriptions when menu is expanded *\u002F\n  .sidebar .nav-item {\n    display: none; \u002F* Hide the nav items when the sidebar is minimized *\u002F\n    white-space: nowrap; \u002F* Prevent text from wrapping *\u002F\n  }\n  \n  .sidebar.active .nav-item {\n    display: block; \u002F* Show the nav items when the sidebar is expanded *\u002F\n  }\n\n  .sidebar .jva-icon-toggle {\n    display: none;\n  }\n\n  .sidebar.active .jva-icon-toggle {\n    display: block; \u002F* Show the nav items when the sidebar is expanded *\u002F\n    min-width: 40px;\n    text-align: center;\n    line-height: 2rem;\n    border-radius: 12px;\n  }\n\n  \u002F* Tooltip *\u002F\n  .sidebar ul li .tooltip {\n    color: #D1E8E2;\n    background-color: #0d0e0d;\n    position: relative;\n    left: 9rem;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    box-shadow: 0 0.5rem 0.8rem rgba(0, 0, 0, 0.1);\n    border-radius: 0.6rem;\n    padding: 0.4rem 1.2rem;\n    z-index: 20; \u002F* Ensure the tooltip has a higher z-index *\u002F\n    opacity: 0;\n    pointer-events: none; \u002F* Ensure it doesn't interfere with other elements *\u002F\n    transition: opacity 0.3s; \u002F* Add transition for better UX *\u002F\n    white-space: nowrap; \u002F* Prevent text from wrapping *\u002F\n    display: block; \u002F* Keep the text in a single line *\u002F\n    text-align: left; \u002F* Align text to the left *\u002F\n    min-width: 10rem;\n  }\n\n  .sidebar ul li:hover .tooltip {\n    opacity: 1;\n  }\n  \n  .sidebar.active ul li .tooltip {\n    display: none;\n  }\n\n  \u002F* Control display size of main content area, based on menu extended or not*\u002F\n  .main-content {\n    position: relative;\n    top: 2.5rem;\n    left: 3.5rem;\n    width: 100%;\n    height: 100%;\n    transition: all 0.5s ease;\n    width: calc(100% - 3.5rem);\n  }  \n  \n  .sidebar.active ~ .main-content {\n    left: 250px;\n    transition: all 0.5s ease;\n    width: calc(100% - 250px);\n  }\n  \n  .sidebar.active ~ .main-content {\n    left: 250px;\n    transition: all 0.5s ease;\n    width: calc(100% - 250px);\n  }\n\n  .jva-container {\n    position: relative;\n    padding: 2rem;\n  } \n\n",[6811],{"type":20,"tag":185,"props":6812,"children":6813},{"__ignoreMap":8},[6814,6829,6836,6848,6869,6888,6916,6944,6997,7009,7045,7065,7090,7116,7141,7148,7155,7167,7191,7198,7205,7222,7246,7253,7260,7276,7296,7316,7340,7364,7388,7413,7447,7466,7473,7480,7496,7516,7540,7547,7554,7574,7594,7614,7637,7661,7684,7707,7714,7721,7745,7769,7781,7800,7824,7831,7838,7850,7870,7893,7917,7941,7948,7955,7967,7991,8015,8022,8029,8045,8065,8084,8103,8122,8145,8169,8192,8199,8206,8221,8244,8251,8258,8274,8293,8312,8331,8350,8373,8396,8403,8410,8426,8445,8464,8483,8502,8525,8554,8561,8568,8584,8595,8611,8618,8625,8633,8649,8673,8700,8708,8716,8732,8758,8765,8773,8790,8810,8818,8826,8841,8865,8891,8911,8935,8959,8967,8975,8984,9009,9029,9050,9070,9095,9119,9165,9241,9266,9299,9325,9346,9372,9403,9427,9452,9478,9502,9510,9518,9546,9565,9573,9581,9605,9625,9633,9640,9649,9662,9682,9706,9730,9754,9777,9809,9854,9863,9871,9893,9917,9949,9994,10002,10010,10030,10054,10086,10130,10138,10146,10159,10179,10203],{"type":20,"tag":189,"props":6815,"children":6816},{"class":191,"line":192},[6817,6821,6825],{"type":20,"tag":189,"props":6818,"children":6819},{"style":2632},[6820],{"type":29,"value":2635},{"type":20,"tag":189,"props":6822,"children":6823},{"style":1221},[6824],{"type":29,"value":2640},{"type":20,"tag":189,"props":6826,"children":6827},{"style":196},[6828],{"type":29,"value":2508},{"type":20,"tag":189,"props":6830,"children":6831},{"class":191,"line":202},[6832],{"type":20,"tag":189,"props":6833,"children":6834},{"emptyLinePlaceholder":397},[6835],{"type":29,"value":400},{"type":20,"tag":189,"props":6837,"children":6838},{"class":191,"line":217},[6839,6844],{"type":20,"tag":189,"props":6840,"children":6841},{"style":1215},[6842],{"type":29,"value":6843},".sidebar",{"type":20,"tag":189,"props":6845,"children":6846},{"style":196},[6847],{"type":29,"value":214},{"type":20,"tag":189,"props":6849,"children":6850},{"class":191,"line":231},[6851,6856,6860,6865],{"type":20,"tag":189,"props":6852,"children":6853},{"style":1184},[6854],{"type":29,"value":6855},"    box-sizing",{"type":20,"tag":189,"props":6857,"children":6858},{"style":196},[6859],{"type":29,"value":2498},{"type":20,"tag":189,"props":6861,"children":6862},{"style":1184},[6863],{"type":29,"value":6864},"border-box",{"type":20,"tag":189,"props":6866,"children":6867},{"style":196},[6868],{"type":29,"value":2508},{"type":20,"tag":189,"props":6870,"children":6871},{"class":191,"line":245},[6872,6876,6880,6884],{"type":20,"tag":189,"props":6873,"children":6874},{"style":1184},[6875],{"type":29,"value":2679},{"type":20,"tag":189,"props":6877,"children":6878},{"style":196},[6879],{"type":29,"value":2498},{"type":20,"tag":189,"props":6881,"children":6882},{"style":1184},[6883],{"type":29,"value":2688},{"type":20,"tag":189,"props":6885,"children":6886},{"style":196},[6887],{"type":29,"value":2508},{"type":20,"tag":189,"props":6889,"children":6890},{"class":191,"line":259},[6891,6895,6899,6903,6907,6911],{"type":20,"tag":189,"props":6892,"children":6893},{"style":1184},[6894],{"type":29,"value":2705},{"type":20,"tag":189,"props":6896,"children":6897},{"style":196},[6898],{"type":29,"value":2498},{"type":20,"tag":189,"props":6900,"children":6901},{"style":1184},[6902],{"type":29,"value":2809},{"type":20,"tag":189,"props":6904,"children":6905},{"style":2632},[6906],{"type":29,"value":2814},{"type":20,"tag":189,"props":6908,"children":6909},{"style":196},[6910],{"type":29,"value":3812},{"type":20,"tag":189,"props":6912,"children":6913},{"style":1993},[6914],{"type":29,"value":6915},"\u002F* Adjusted to be below a navbar of height  *\u002F\n",{"type":20,"tag":189,"props":6917,"children":6918},{"class":191,"line":272},[6919,6923,6927,6931,6935,6939],{"type":20,"tag":189,"props":6920,"children":6921},{"style":1184},[6922],{"type":29,"value":2746},{"type":20,"tag":189,"props":6924,"children":6925},{"style":196},[6926],{"type":29,"value":2498},{"type":20,"tag":189,"props":6928,"children":6929},{"style":1184},[6930],{"type":29,"value":2714},{"type":20,"tag":189,"props":6932,"children":6933},{"style":2632},[6934],{"type":29,"value":3128},{"type":20,"tag":189,"props":6936,"children":6937},{"style":196},[6938],{"type":29,"value":3812},{"type":20,"tag":189,"props":6940,"children":6941},{"style":1993},[6942],{"type":29,"value":6943},"\u002F* Assuming this is the intended left position *\u002F\n",{"type":20,"tag":189,"props":6945,"children":6946},{"class":191,"line":286},[6947,6951,6955,6960,6964,6968,6973,6978,6983,6987,6992],{"type":20,"tag":189,"props":6948,"children":6949},{"style":1184},[6950],{"type":29,"value":2800},{"type":20,"tag":189,"props":6952,"children":6953},{"style":196},[6954],{"type":29,"value":2498},{"type":20,"tag":189,"props":6956,"children":6957},{"style":1184},[6958],{"type":29,"value":6959},"calc",{"type":20,"tag":189,"props":6961,"children":6962},{"style":196},[6963],{"type":29,"value":1320},{"type":20,"tag":189,"props":6965,"children":6966},{"style":1184},[6967],{"type":29,"value":3530},{"type":20,"tag":189,"props":6969,"children":6970},{"style":2632},[6971],{"type":29,"value":6972},"vh",{"type":20,"tag":189,"props":6974,"children":6975},{"style":2632},[6976],{"type":29,"value":6977}," -",{"type":20,"tag":189,"props":6979,"children":6980},{"style":1184},[6981],{"type":29,"value":6982}," 2.5",{"type":20,"tag":189,"props":6984,"children":6985},{"style":2632},[6986],{"type":29,"value":2814},{"type":20,"tag":189,"props":6988,"children":6989},{"style":196},[6990],{"type":29,"value":6991},"); ",{"type":20,"tag":189,"props":6993,"children":6994},{"style":1993},[6995],{"type":29,"value":6996},"\u002F* Adjusted to accommodate the navbar's height *\u002F\n",{"type":20,"tag":189,"props":6998,"children":6999},{"class":191,"line":300},[7000,7004],{"type":20,"tag":189,"props":7001,"children":7002},{"style":1184},[7003],{"type":29,"value":2787},{"type":20,"tag":189,"props":7005,"children":7006},{"style":196},[7007],{"type":29,"value":7008},": $sidebar-menu-bg-color;\n",{"type":20,"tag":189,"props":7010,"children":7011},{"class":191,"line":314},[7012,7017,7021,7026,7031,7036,7041],{"type":20,"tag":189,"props":7013,"children":7014},{"style":1184},[7015],{"type":29,"value":7016},"    transition",{"type":20,"tag":189,"props":7018,"children":7019},{"style":196},[7020],{"type":29,"value":2498},{"type":20,"tag":189,"props":7022,"children":7023},{"style":1184},[7024],{"type":29,"value":7025},"all",{"type":20,"tag":189,"props":7027,"children":7028},{"style":1184},[7029],{"type":29,"value":7030}," 0.5",{"type":20,"tag":189,"props":7032,"children":7033},{"style":2632},[7034],{"type":29,"value":7035},"s",{"type":20,"tag":189,"props":7037,"children":7038},{"style":1184},[7039],{"type":29,"value":7040}," ease",{"type":20,"tag":189,"props":7042,"children":7043},{"style":196},[7044],{"type":29,"value":2508},{"type":20,"tag":189,"props":7046,"children":7047},{"class":191,"line":328},[7048,7052,7056,7061],{"type":20,"tag":189,"props":7049,"children":7050},{"style":1184},[7051],{"type":29,"value":2766},{"type":20,"tag":189,"props":7053,"children":7054},{"style":196},[7055],{"type":29,"value":2498},{"type":20,"tag":189,"props":7057,"children":7058},{"style":1184},[7059],{"type":29,"value":7060},"1",{"type":20,"tag":189,"props":7062,"children":7063},{"style":196},[7064],{"type":29,"value":2508},{"type":20,"tag":189,"props":7066,"children":7067},{"class":191,"line":342},[7068,7073,7077,7081,7085],{"type":20,"tag":189,"props":7069,"children":7070},{"style":1184},[7071],{"type":29,"value":7072},"    overflow-y",{"type":20,"tag":189,"props":7074,"children":7075},{"style":196},[7076],{"type":29,"value":2498},{"type":20,"tag":189,"props":7078,"children":7079},{"style":1184},[7080],{"type":29,"value":3762},{"type":20,"tag":189,"props":7082,"children":7083},{"style":196},[7084],{"type":29,"value":3812},{"type":20,"tag":189,"props":7086,"children":7087},{"style":1993},[7088],{"type":29,"value":7089},"\u002F* Enable vertical scrolling *\u002F\n",{"type":20,"tag":189,"props":7091,"children":7092},{"class":191,"line":356},[7093,7098,7102,7107,7111],{"type":20,"tag":189,"props":7094,"children":7095},{"style":1184},[7096],{"type":29,"value":7097},"    overflow-x",{"type":20,"tag":189,"props":7099,"children":7100},{"style":196},[7101],{"type":29,"value":2498},{"type":20,"tag":189,"props":7103,"children":7104},{"style":1184},[7105],{"type":29,"value":7106},"hidden",{"type":20,"tag":189,"props":7108,"children":7109},{"style":196},[7110],{"type":29,"value":3812},{"type":20,"tag":189,"props":7112,"children":7113},{"style":1993},[7114],{"type":29,"value":7115},"\u002F* Prevent horizontal scrolling *\u002F\n",{"type":20,"tag":189,"props":7117,"children":7118},{"class":191,"line":375},[7119,7123,7127,7132,7136],{"type":20,"tag":189,"props":7120,"children":7121},{"style":1184},[7122],{"type":29,"value":3471},{"type":20,"tag":189,"props":7124,"children":7125},{"style":196},[7126],{"type":29,"value":2498},{"type":20,"tag":189,"props":7128,"children":7129},{"style":1184},[7130],{"type":29,"value":7131},"3.5",{"type":20,"tag":189,"props":7133,"children":7134},{"style":2632},[7135],{"type":29,"value":2814},{"type":20,"tag":189,"props":7137,"children":7138},{"style":196},[7139],{"type":29,"value":7140},";  \n",{"type":20,"tag":189,"props":7142,"children":7143},{"class":191,"line":384},[7144],{"type":20,"tag":189,"props":7145,"children":7146},{"style":196},[7147],{"type":29,"value":381},{"type":20,"tag":189,"props":7149,"children":7150},{"class":191,"line":393},[7151],{"type":20,"tag":189,"props":7152,"children":7153},{"emptyLinePlaceholder":397},[7154],{"type":29,"value":400},{"type":20,"tag":189,"props":7156,"children":7157},{"class":191,"line":403},[7158,7163],{"type":20,"tag":189,"props":7159,"children":7160},{"style":1215},[7161],{"type":29,"value":7162},"  .sidebar.active",{"type":20,"tag":189,"props":7164,"children":7165},{"style":196},[7166],{"type":29,"value":214},{"type":20,"tag":189,"props":7168,"children":7169},{"class":191,"line":411},[7170,7174,7178,7183,7187],{"type":20,"tag":189,"props":7171,"children":7172},{"style":1184},[7173],{"type":29,"value":3471},{"type":20,"tag":189,"props":7175,"children":7176},{"style":196},[7177],{"type":29,"value":2498},{"type":20,"tag":189,"props":7179,"children":7180},{"style":1184},[7181],{"type":29,"value":7182},"250",{"type":20,"tag":189,"props":7184,"children":7185},{"style":2632},[7186],{"type":29,"value":3128},{"type":20,"tag":189,"props":7188,"children":7189},{"style":196},[7190],{"type":29,"value":2508},{"type":20,"tag":189,"props":7192,"children":7193},{"class":191,"line":423},[7194],{"type":20,"tag":189,"props":7195,"children":7196},{"style":196},[7197],{"type":29,"value":381},{"type":20,"tag":189,"props":7199,"children":7200},{"class":191,"line":436},[7201],{"type":20,"tag":189,"props":7202,"children":7203},{"emptyLinePlaceholder":397},[7204],{"type":29,"value":400},{"type":20,"tag":189,"props":7206,"children":7207},{"class":191,"line":449},[7208,7213,7218],{"type":20,"tag":189,"props":7209,"children":7210},{"style":1215},[7211],{"type":29,"value":7212},"  .sidebar",{"type":20,"tag":189,"props":7214,"children":7215},{"style":1215},[7216],{"type":29,"value":7217}," .menu-toggle-button",{"type":20,"tag":189,"props":7219,"children":7220},{"style":196},[7221],{"type":29,"value":214},{"type":20,"tag":189,"props":7223,"children":7224},{"class":191,"line":462},[7225,7230,7234,7238,7242],{"type":20,"tag":189,"props":7226,"children":7227},{"style":1184},[7228],{"type":29,"value":7229},"    margin-bottom",{"type":20,"tag":189,"props":7231,"children":7232},{"style":196},[7233],{"type":29,"value":2498},{"type":20,"tag":189,"props":7235,"children":7236},{"style":1184},[7237],{"type":29,"value":4679},{"type":20,"tag":189,"props":7239,"children":7240},{"style":2632},[7241],{"type":29,"value":2814},{"type":20,"tag":189,"props":7243,"children":7244},{"style":196},[7245],{"type":29,"value":2508},{"type":20,"tag":189,"props":7247,"children":7248},{"class":191,"line":475},[7249],{"type":20,"tag":189,"props":7250,"children":7251},{"style":196},[7252],{"type":29,"value":381},{"type":20,"tag":189,"props":7254,"children":7255},{"class":191,"line":487},[7256],{"type":20,"tag":189,"props":7257,"children":7258},{"emptyLinePlaceholder":397},[7259],{"type":29,"value":400},{"type":20,"tag":189,"props":7261,"children":7262},{"class":191,"line":499},[7263,7267,7272],{"type":20,"tag":189,"props":7264,"children":7265},{"style":1215},[7266],{"type":29,"value":7212},{"type":20,"tag":189,"props":7268,"children":7269},{"style":1215},[7270],{"type":29,"value":7271}," #btn",{"type":20,"tag":189,"props":7273,"children":7274},{"style":196},[7275],{"type":29,"value":214},{"type":20,"tag":189,"props":7277,"children":7278},{"class":191,"line":511},[7279,7283,7287,7292],{"type":20,"tag":189,"props":7280,"children":7281},{"style":1184},[7282],{"type":29,"value":2679},{"type":20,"tag":189,"props":7284,"children":7285},{"style":196},[7286],{"type":29,"value":2498},{"type":20,"tag":189,"props":7288,"children":7289},{"style":1184},[7290],{"type":29,"value":7291},"absolute",{"type":20,"tag":189,"props":7293,"children":7294},{"style":196},[7295],{"type":29,"value":2508},{"type":20,"tag":189,"props":7297,"children":7298},{"class":191,"line":523},[7299,7303,7307,7312],{"type":20,"tag":189,"props":7300,"children":7301},{"style":1184},[7302],{"type":29,"value":2996},{"type":20,"tag":189,"props":7304,"children":7305},{"style":196},[7306],{"type":29,"value":2498},{"type":20,"tag":189,"props":7308,"children":7309},{"style":1184},[7310],{"type":29,"value":7311},"#fff",{"type":20,"tag":189,"props":7313,"children":7314},{"style":196},[7315],{"type":29,"value":2508},{"type":20,"tag":189,"props":7317,"children":7318},{"class":191,"line":536},[7319,7323,7327,7332,7336],{"type":20,"tag":189,"props":7320,"children":7321},{"style":1184},[7322],{"type":29,"value":2705},{"type":20,"tag":189,"props":7324,"children":7325},{"style":196},[7326],{"type":29,"value":2498},{"type":20,"tag":189,"props":7328,"children":7329},{"style":1184},[7330],{"type":29,"value":7331},"0.4",{"type":20,"tag":189,"props":7333,"children":7334},{"style":2632},[7335],{"type":29,"value":2814},{"type":20,"tag":189,"props":7337,"children":7338},{"style":196},[7339],{"type":29,"value":2508},{"type":20,"tag":189,"props":7341,"children":7342},{"class":191,"line":550},[7343,7347,7351,7356,7360],{"type":20,"tag":189,"props":7344,"children":7345},{"style":1184},[7346],{"type":29,"value":2746},{"type":20,"tag":189,"props":7348,"children":7349},{"style":196},[7350],{"type":29,"value":2498},{"type":20,"tag":189,"props":7352,"children":7353},{"style":1184},[7354],{"type":29,"value":7355},"1.4",{"type":20,"tag":189,"props":7357,"children":7358},{"style":2632},[7359],{"type":29,"value":2814},{"type":20,"tag":189,"props":7361,"children":7362},{"style":196},[7363],{"type":29,"value":2508},{"type":20,"tag":189,"props":7365,"children":7366},{"class":191,"line":562},[7367,7371,7375,7380,7384],{"type":20,"tag":189,"props":7368,"children":7369},{"style":1184},[7370],{"type":29,"value":3068},{"type":20,"tag":189,"props":7372,"children":7373},{"style":196},[7374],{"type":29,"value":2498},{"type":20,"tag":189,"props":7376,"children":7377},{"style":1184},[7378],{"type":29,"value":7379},"1.2",{"type":20,"tag":189,"props":7381,"children":7382},{"style":2632},[7383],{"type":29,"value":2814},{"type":20,"tag":189,"props":7385,"children":7386},{"style":196},[7387],{"type":29,"value":2508},{"type":20,"tag":189,"props":7389,"children":7390},{"class":191,"line":574},[7391,7396,7400,7405,7409],{"type":20,"tag":189,"props":7392,"children":7393},{"style":1184},[7394],{"type":29,"value":7395},"    line-height",{"type":20,"tag":189,"props":7397,"children":7398},{"style":196},[7399],{"type":29,"value":2498},{"type":20,"tag":189,"props":7401,"children":7402},{"style":1184},[7403],{"type":29,"value":7404},"50",{"type":20,"tag":189,"props":7406,"children":7407},{"style":2632},[7408],{"type":29,"value":3128},{"type":20,"tag":189,"props":7410,"children":7411},{"style":196},[7412],{"type":29,"value":2508},{"type":20,"tag":189,"props":7414,"children":7415},{"class":191,"line":582},[7416,7421,7425,7430,7434,7439,7443],{"type":20,"tag":189,"props":7417,"children":7418},{"style":1184},[7419],{"type":29,"value":7420},"    transform",{"type":20,"tag":189,"props":7422,"children":7423},{"style":196},[7424],{"type":29,"value":2498},{"type":20,"tag":189,"props":7426,"children":7427},{"style":1184},[7428],{"type":29,"value":7429},"translateX",{"type":20,"tag":189,"props":7431,"children":7432},{"style":196},[7433],{"type":29,"value":1320},{"type":20,"tag":189,"props":7435,"children":7436},{"style":1184},[7437],{"type":29,"value":7438},"-50",{"type":20,"tag":189,"props":7440,"children":7441},{"style":2632},[7442],{"type":29,"value":3535},{"type":20,"tag":189,"props":7444,"children":7445},{"style":196},[7446],{"type":29,"value":3681},{"type":20,"tag":189,"props":7448,"children":7449},{"class":191,"line":591},[7450,7454,7458,7462],{"type":20,"tag":189,"props":7451,"children":7452},{"style":1184},[7453],{"type":29,"value":3798},{"type":20,"tag":189,"props":7455,"children":7456},{"style":196},[7457],{"type":29,"value":2498},{"type":20,"tag":189,"props":7459,"children":7460},{"style":1184},[7461],{"type":29,"value":3807},{"type":20,"tag":189,"props":7463,"children":7464},{"style":196},[7465],{"type":29,"value":2508},{"type":20,"tag":189,"props":7467,"children":7468},{"class":191,"line":599},[7469],{"type":20,"tag":189,"props":7470,"children":7471},{"style":196},[7472],{"type":29,"value":381},{"type":20,"tag":189,"props":7474,"children":7475},{"class":191,"line":607},[7476],{"type":20,"tag":189,"props":7477,"children":7478},{"emptyLinePlaceholder":397},[7479],{"type":29,"value":400},{"type":20,"tag":189,"props":7481,"children":7482},{"class":191,"line":615},[7483,7487,7492],{"type":20,"tag":189,"props":7484,"children":7485},{"style":1215},[7486],{"type":29,"value":7212},{"type":20,"tag":189,"props":7488,"children":7489},{"style":2490},[7490],{"type":29,"value":7491}," ul",{"type":20,"tag":189,"props":7493,"children":7494},{"style":196},[7495],{"type":29,"value":214},{"type":20,"tag":189,"props":7497,"children":7498},{"class":191,"line":627},[7499,7504,7508,7512],{"type":20,"tag":189,"props":7500,"children":7501},{"style":1184},[7502],{"type":29,"value":7503},"    padding-left",{"type":20,"tag":189,"props":7505,"children":7506},{"style":196},[7507],{"type":29,"value":2498},{"type":20,"tag":189,"props":7509,"children":7510},{"style":1184},[7511],{"type":29,"value":2714},{"type":20,"tag":189,"props":7513,"children":7514},{"style":196},[7515],{"type":29,"value":2508},{"type":20,"tag":189,"props":7517,"children":7518},{"class":191,"line":640},[7519,7524,7528,7532,7536],{"type":20,"tag":189,"props":7520,"children":7521},{"style":1184},[7522],{"type":29,"value":7523},"    margin-top",{"type":20,"tag":189,"props":7525,"children":7526},{"style":196},[7527],{"type":29,"value":2498},{"type":20,"tag":189,"props":7529,"children":7530},{"style":1184},[7531],{"type":29,"value":7060},{"type":20,"tag":189,"props":7533,"children":7534},{"style":2632},[7535],{"type":29,"value":2814},{"type":20,"tag":189,"props":7537,"children":7538},{"style":196},[7539],{"type":29,"value":2508},{"type":20,"tag":189,"props":7541,"children":7542},{"class":191,"line":652},[7543],{"type":20,"tag":189,"props":7544,"children":7545},{"style":196},[7546],{"type":29,"value":381},{"type":20,"tag":189,"props":7548,"children":7549},{"class":191,"line":665},[7550],{"type":20,"tag":189,"props":7551,"children":7552},{"emptyLinePlaceholder":397},[7553],{"type":29,"value":400},{"type":20,"tag":189,"props":7555,"children":7556},{"class":191,"line":677},[7557,7561,7565,7570],{"type":20,"tag":189,"props":7558,"children":7559},{"style":1215},[7560],{"type":29,"value":7212},{"type":20,"tag":189,"props":7562,"children":7563},{"style":2490},[7564],{"type":29,"value":7491},{"type":20,"tag":189,"props":7566,"children":7567},{"style":2490},[7568],{"type":29,"value":7569}," li",{"type":20,"tag":189,"props":7571,"children":7572},{"style":196},[7573],{"type":29,"value":214},{"type":20,"tag":189,"props":7575,"children":7576},{"class":191,"line":689},[7577,7581,7585,7590],{"type":20,"tag":189,"props":7578,"children":7579},{"style":1184},[7580],{"type":29,"value":2679},{"type":20,"tag":189,"props":7582,"children":7583},{"style":196},[7584],{"type":29,"value":2498},{"type":20,"tag":189,"props":7586,"children":7587},{"style":1184},[7588],{"type":29,"value":7589},"relative",{"type":20,"tag":189,"props":7591,"children":7592},{"style":196},[7593],{"type":29,"value":2508},{"type":20,"tag":189,"props":7595,"children":7596},{"class":191,"line":701},[7597,7602,7606,7610],{"type":20,"tag":189,"props":7598,"children":7599},{"style":1184},[7600],{"type":29,"value":7601},"    list-style-type",{"type":20,"tag":189,"props":7603,"children":7604},{"style":196},[7605],{"type":29,"value":2498},{"type":20,"tag":189,"props":7607,"children":7608},{"style":1184},[7609],{"type":29,"value":3895},{"type":20,"tag":189,"props":7611,"children":7612},{"style":196},[7613],{"type":29,"value":2508},{"type":20,"tag":189,"props":7615,"children":7616},{"class":191,"line":713},[7617,7621,7625,7629,7633],{"type":20,"tag":189,"props":7618,"children":7619},{"style":1184},[7620],{"type":29,"value":2800},{"type":20,"tag":189,"props":7622,"children":7623},{"style":196},[7624],{"type":29,"value":2498},{"type":20,"tag":189,"props":7626,"children":7627},{"style":1184},[7628],{"type":29,"value":7404},{"type":20,"tag":189,"props":7630,"children":7631},{"style":2632},[7632],{"type":29,"value":3128},{"type":20,"tag":189,"props":7634,"children":7635},{"style":196},[7636],{"type":29,"value":2508},{"type":20,"tag":189,"props":7638,"children":7639},{"class":191,"line":725},[7640,7644,7648,7653,7657],{"type":20,"tag":189,"props":7641,"children":7642},{"style":1184},[7643],{"type":29,"value":3471},{"type":20,"tag":189,"props":7645,"children":7646},{"style":196},[7647],{"type":29,"value":2498},{"type":20,"tag":189,"props":7649,"children":7650},{"style":1184},[7651],{"type":29,"value":7652},"90",{"type":20,"tag":189,"props":7654,"children":7655},{"style":2632},[7656],{"type":29,"value":3535},{"type":20,"tag":189,"props":7658,"children":7659},{"style":196},[7660],{"type":29,"value":2508},{"type":20,"tag":189,"props":7662,"children":7663},{"class":191,"line":737},[7664,7668,7672,7676,7680],{"type":20,"tag":189,"props":7665,"children":7666},{"style":1184},[7667],{"type":29,"value":7395},{"type":20,"tag":189,"props":7669,"children":7670},{"style":196},[7671],{"type":29,"value":2498},{"type":20,"tag":189,"props":7673,"children":7674},{"style":1184},[7675],{"type":29,"value":7404},{"type":20,"tag":189,"props":7677,"children":7678},{"style":2632},[7679],{"type":29,"value":3128},{"type":20,"tag":189,"props":7681,"children":7682},{"style":196},[7683],{"type":29,"value":2508},{"type":20,"tag":189,"props":7685,"children":7686},{"class":191,"line":750},[7687,7691,7695,7699,7703],{"type":20,"tag":189,"props":7688,"children":7689},{"style":1184},[7690],{"type":29,"value":7503},{"type":20,"tag":189,"props":7692,"children":7693},{"style":196},[7694],{"type":29,"value":2498},{"type":20,"tag":189,"props":7696,"children":7697},{"style":1184},[7698],{"type":29,"value":3026},{"type":20,"tag":189,"props":7700,"children":7701},{"style":2632},[7702],{"type":29,"value":2814},{"type":20,"tag":189,"props":7704,"children":7705},{"style":196},[7706],{"type":29,"value":2508},{"type":20,"tag":189,"props":7708,"children":7709},{"class":191,"line":762},[7710],{"type":20,"tag":189,"props":7711,"children":7712},{"style":196},[7713],{"type":29,"value":381},{"type":20,"tag":189,"props":7715,"children":7716},{"class":191,"line":774},[7717],{"type":20,"tag":189,"props":7718,"children":7719},{"emptyLinePlaceholder":397},[7720],{"type":29,"value":400},{"type":20,"tag":189,"props":7722,"children":7723},{"class":191,"line":782},[7724,7728,7732,7736,7741],{"type":20,"tag":189,"props":7725,"children":7726},{"style":1215},[7727],{"type":29,"value":7212},{"type":20,"tag":189,"props":7729,"children":7730},{"style":2490},[7731],{"type":29,"value":7491},{"type":20,"tag":189,"props":7733,"children":7734},{"style":2490},[7735],{"type":29,"value":7569},{"type":20,"tag":189,"props":7737,"children":7738},{"style":1215},[7739],{"type":29,"value":7740},":hover",{"type":20,"tag":189,"props":7742,"children":7743},{"style":196},[7744],{"type":29,"value":4702},{"type":20,"tag":189,"props":7746,"children":7747},{"class":191,"line":791},[7748,7752,7756,7760,7765],{"type":20,"tag":189,"props":7749,"children":7750},{"style":1215},[7751],{"type":29,"value":7212},{"type":20,"tag":189,"props":7753,"children":7754},{"style":2490},[7755],{"type":29,"value":7491},{"type":20,"tag":189,"props":7757,"children":7758},{"style":2490},[7759],{"type":29,"value":7569},{"type":20,"tag":189,"props":7761,"children":7762},{"style":1215},[7763],{"type":29,"value":7764},".active",{"type":20,"tag":189,"props":7766,"children":7767},{"style":196},[7768],{"type":29,"value":214},{"type":20,"tag":189,"props":7770,"children":7771},{"class":191,"line":799},[7772,7776],{"type":20,"tag":189,"props":7773,"children":7774},{"style":1184},[7775],{"type":29,"value":2787},{"type":20,"tag":189,"props":7777,"children":7778},{"style":196},[7779],{"type":29,"value":7780},": $sidebar-menu-hover-bg-color;\n",{"type":20,"tag":189,"props":7782,"children":7783},{"class":191,"line":807},[7784,7788,7792,7796],{"type":20,"tag":189,"props":7785,"children":7786},{"style":1184},[7787],{"type":29,"value":2996},{"type":20,"tag":189,"props":7789,"children":7790},{"style":196},[7791],{"type":29,"value":2498},{"type":20,"tag":189,"props":7793,"children":7794},{"style":1184},[7795],{"type":29,"value":3005},{"type":20,"tag":189,"props":7797,"children":7798},{"style":196},[7799],{"type":29,"value":2508},{"type":20,"tag":189,"props":7801,"children":7802},{"class":191,"line":816},[7803,7807,7811,7816,7820],{"type":20,"tag":189,"props":7804,"children":7805},{"style":1184},[7806],{"type":29,"value":3912},{"type":20,"tag":189,"props":7808,"children":7809},{"style":196},[7810],{"type":29,"value":2498},{"type":20,"tag":189,"props":7812,"children":7813},{"style":1184},[7814],{"type":29,"value":7815},"0.8",{"type":20,"tag":189,"props":7817,"children":7818},{"style":2632},[7819],{"type":29,"value":2814},{"type":20,"tag":189,"props":7821,"children":7822},{"style":196},[7823],{"type":29,"value":2508},{"type":20,"tag":189,"props":7825,"children":7826},{"class":191,"line":840},[7827],{"type":20,"tag":189,"props":7828,"children":7829},{"style":196},[7830],{"type":29,"value":381},{"type":20,"tag":189,"props":7832,"children":7833},{"class":191,"line":862},[7834],{"type":20,"tag":189,"props":7835,"children":7836},{"emptyLinePlaceholder":397},[7837],{"type":29,"value":400},{"type":20,"tag":189,"props":7839,"children":7840},{"class":191,"line":870},[7841,7846],{"type":20,"tag":189,"props":7842,"children":7843},{"style":1215},[7844],{"type":29,"value":7845},"  .jva-icon",{"type":20,"tag":189,"props":7847,"children":7848},{"style":196},[7849],{"type":29,"value":214},{"type":20,"tag":189,"props":7851,"children":7852},{"class":191,"line":878},[7853,7858,7862,7866],{"type":20,"tag":189,"props":7854,"children":7855},{"style":1184},[7856],{"type":29,"value":7857},"    text-align",{"type":20,"tag":189,"props":7859,"children":7860},{"style":196},[7861],{"type":29,"value":2498},{"type":20,"tag":189,"props":7863,"children":7864},{"style":1184},[7865],{"type":29,"value":3951},{"type":20,"tag":189,"props":7867,"children":7868},{"style":196},[7869],{"type":29,"value":2508},{"type":20,"tag":189,"props":7871,"children":7872},{"class":191,"line":887},[7873,7877,7881,7885,7889],{"type":20,"tag":189,"props":7874,"children":7875},{"style":1184},[7876],{"type":29,"value":7395},{"type":20,"tag":189,"props":7878,"children":7879},{"style":196},[7880],{"type":29,"value":2498},{"type":20,"tag":189,"props":7882,"children":7883},{"style":1184},[7884],{"type":29,"value":3353},{"type":20,"tag":189,"props":7886,"children":7887},{"style":2632},[7888],{"type":29,"value":2814},{"type":20,"tag":189,"props":7890,"children":7891},{"style":196},[7892],{"type":29,"value":2508},{"type":20,"tag":189,"props":7894,"children":7895},{"class":191,"line":905},[7896,7900,7904,7909,7913],{"type":20,"tag":189,"props":7897,"children":7898},{"style":1184},[7899],{"type":29,"value":3912},{"type":20,"tag":189,"props":7901,"children":7902},{"style":196},[7903],{"type":29,"value":2498},{"type":20,"tag":189,"props":7905,"children":7906},{"style":1184},[7907],{"type":29,"value":7908},"12",{"type":20,"tag":189,"props":7910,"children":7911},{"style":2632},[7912],{"type":29,"value":3128},{"type":20,"tag":189,"props":7914,"children":7915},{"style":196},[7916],{"type":29,"value":2508},{"type":20,"tag":189,"props":7918,"children":7919},{"class":191,"line":923},[7920,7924,7928,7933,7937],{"type":20,"tag":189,"props":7921,"children":7922},{"style":1184},[7923],{"type":29,"value":2826},{"type":20,"tag":189,"props":7925,"children":7926},{"style":196},[7927],{"type":29,"value":2498},{"type":20,"tag":189,"props":7929,"children":7930},{"style":1184},[7931],{"type":29,"value":7932},"7",{"type":20,"tag":189,"props":7934,"children":7935},{"style":2632},[7936],{"type":29,"value":3128},{"type":20,"tag":189,"props":7938,"children":7939},{"style":196},[7940],{"type":29,"value":2508},{"type":20,"tag":189,"props":7942,"children":7943},{"class":191,"line":941},[7944],{"type":20,"tag":189,"props":7945,"children":7946},{"style":196},[7947],{"type":29,"value":381},{"type":20,"tag":189,"props":7949,"children":7950},{"class":191,"line":949},[7951],{"type":20,"tag":189,"props":7952,"children":7953},{"emptyLinePlaceholder":397},[7954],{"type":29,"value":400},{"type":20,"tag":189,"props":7956,"children":7957},{"class":191,"line":957},[7958,7963],{"type":20,"tag":189,"props":7959,"children":7960},{"style":1215},[7961],{"type":29,"value":7962},"  .toggle-arrow",{"type":20,"tag":189,"props":7964,"children":7965},{"style":196},[7966],{"type":29,"value":214},{"type":20,"tag":189,"props":7968,"children":7969},{"class":191,"line":965},[7970,7974,7978,7982,7986],{"type":20,"tag":189,"props":7971,"children":7972},{"style":1184},[7973],{"type":29,"value":3017},{"type":20,"tag":189,"props":7975,"children":7976},{"style":196},[7977],{"type":29,"value":2498},{"type":20,"tag":189,"props":7979,"children":7980},{"style":1184},[7981],{"type":29,"value":3762},{"type":20,"tag":189,"props":7983,"children":7984},{"style":196},[7985],{"type":29,"value":3812},{"type":20,"tag":189,"props":7987,"children":7988},{"style":1993},[7989],{"type":29,"value":7990},"\u002F* Push the arrow to the right *\u002F\n",{"type":20,"tag":189,"props":7992,"children":7993},{"class":191,"line":974},[7994,7998,8002,8006,8010],{"type":20,"tag":189,"props":7995,"children":7996},{"style":1184},[7997],{"type":29,"value":3798},{"type":20,"tag":189,"props":7999,"children":8000},{"style":196},[8001],{"type":29,"value":2498},{"type":20,"tag":189,"props":8003,"children":8004},{"style":1184},[8005],{"type":29,"value":3807},{"type":20,"tag":189,"props":8007,"children":8008},{"style":196},[8009],{"type":29,"value":3812},{"type":20,"tag":189,"props":8011,"children":8012},{"style":1993},[8013],{"type":29,"value":8014},"\u002F* Show pointer cursor on hover *\u002F\n",{"type":20,"tag":189,"props":8016,"children":8017},{"class":191,"line":990},[8018],{"type":20,"tag":189,"props":8019,"children":8020},{"style":196},[8021],{"type":29,"value":381},{"type":20,"tag":189,"props":8023,"children":8024},{"class":191,"line":1013},[8025],{"type":20,"tag":189,"props":8026,"children":8027},{"emptyLinePlaceholder":397},[8028],{"type":29,"value":400},{"type":20,"tag":189,"props":8030,"children":8031},{"class":191,"line":1027},[8032,8036,8041],{"type":20,"tag":189,"props":8033,"children":8034},{"style":1215},[8035],{"type":29,"value":7212},{"type":20,"tag":189,"props":8037,"children":8038},{"style":1215},[8039],{"type":29,"value":8040}," .menu-item",{"type":20,"tag":189,"props":8042,"children":8043},{"style":196},[8044],{"type":29,"value":214},{"type":20,"tag":189,"props":8046,"children":8047},{"class":191,"line":1035},[8048,8052,8056,8061],{"type":20,"tag":189,"props":8049,"children":8050},{"style":1184},[8051],{"type":29,"value":2996},{"type":20,"tag":189,"props":8053,"children":8054},{"style":196},[8055],{"type":29,"value":2498},{"type":20,"tag":189,"props":8057,"children":8058},{"style":1184},[8059],{"type":29,"value":8060},"#D1E8E2",{"type":20,"tag":189,"props":8062,"children":8063},{"style":196},[8064],{"type":29,"value":2508},{"type":20,"tag":189,"props":8066,"children":8067},{"class":191,"line":1043},[8068,8072,8076,8080],{"type":20,"tag":189,"props":8069,"children":8070},{"style":1184},[8071],{"type":29,"value":2933},{"type":20,"tag":189,"props":8073,"children":8074},{"style":196},[8075],{"type":29,"value":2498},{"type":20,"tag":189,"props":8077,"children":8078},{"style":1184},[8079],{"type":29,"value":3742},{"type":20,"tag":189,"props":8081,"children":8082},{"style":196},[8083],{"type":29,"value":2508},{"type":20,"tag":189,"props":8085,"children":8086},{"class":191,"line":1052},[8087,8091,8095,8099],{"type":20,"tag":189,"props":8088,"children":8089},{"style":1184},[8090],{"type":29,"value":3942},{"type":20,"tag":189,"props":8092,"children":8093},{"style":196},[8094],{"type":29,"value":2498},{"type":20,"tag":189,"props":8096,"children":8097},{"style":1184},[8098],{"type":29,"value":3951},{"type":20,"tag":189,"props":8100,"children":8101},{"style":196},[8102],{"type":29,"value":2508},{"type":20,"tag":189,"props":8104,"children":8105},{"class":191,"line":1066},[8106,8110,8114,8118],{"type":20,"tag":189,"props":8107,"children":8108},{"style":1184},[8109],{"type":29,"value":3968},{"type":20,"tag":189,"props":8111,"children":8112},{"style":196},[8113],{"type":29,"value":2498},{"type":20,"tag":189,"props":8115,"children":8116},{"style":1184},[8117],{"type":29,"value":3895},{"type":20,"tag":189,"props":8119,"children":8120},{"style":196},[8121],{"type":29,"value":2508},{"type":20,"tag":189,"props":8123,"children":8124},{"class":191,"line":1074},[8125,8129,8133,8137,8141],{"type":20,"tag":189,"props":8126,"children":8127},{"style":1184},[8128],{"type":29,"value":3912},{"type":20,"tag":189,"props":8130,"children":8131},{"style":196},[8132],{"type":29,"value":2498},{"type":20,"tag":189,"props":8134,"children":8135},{"style":1184},[8136],{"type":29,"value":7815},{"type":20,"tag":189,"props":8138,"children":8139},{"style":2632},[8140],{"type":29,"value":2814},{"type":20,"tag":189,"props":8142,"children":8143},{"style":196},[8144],{"type":29,"value":2508},{"type":20,"tag":189,"props":8146,"children":8147},{"class":191,"line":1082},[8148,8153,8157,8161,8165],{"type":20,"tag":189,"props":8149,"children":8150},{"style":1184},[8151],{"type":29,"value":8152},"    min-height",{"type":20,"tag":189,"props":8154,"children":8155},{"style":196},[8156],{"type":29,"value":2498},{"type":20,"tag":189,"props":8158,"children":8159},{"style":1184},[8160],{"type":29,"value":7404},{"type":20,"tag":189,"props":8162,"children":8163},{"style":2632},[8164],{"type":29,"value":3128},{"type":20,"tag":189,"props":8166,"children":8167},{"style":196},[8168],{"type":29,"value":2508},{"type":20,"tag":189,"props":8170,"children":8171},{"class":191,"line":1090},[8172,8176,8180,8184,8188],{"type":20,"tag":189,"props":8173,"children":8174},{"style":1184},[8175],{"type":29,"value":3471},{"type":20,"tag":189,"props":8177,"children":8178},{"style":196},[8179],{"type":29,"value":2498},{"type":20,"tag":189,"props":8181,"children":8182},{"style":1184},[8183],{"type":29,"value":2809},{"type":20,"tag":189,"props":8185,"children":8186},{"style":2632},[8187],{"type":29,"value":2814},{"type":20,"tag":189,"props":8189,"children":8190},{"style":196},[8191],{"type":29,"value":2508},{"type":20,"tag":189,"props":8193,"children":8194},{"class":191,"line":1099},[8195],{"type":20,"tag":189,"props":8196,"children":8197},{"style":196},[8198],{"type":29,"value":381},{"type":20,"tag":189,"props":8200,"children":8201},{"class":191,"line":1108},[8202],{"type":20,"tag":189,"props":8203,"children":8204},{"emptyLinePlaceholder":397},[8205],{"type":29,"value":400},{"type":20,"tag":189,"props":8207,"children":8208},{"class":191,"line":1116},[8209,8213,8217],{"type":20,"tag":189,"props":8210,"children":8211},{"style":1215},[8212],{"type":29,"value":7162},{"type":20,"tag":189,"props":8214,"children":8215},{"style":1215},[8216],{"type":29,"value":8040},{"type":20,"tag":189,"props":8218,"children":8219},{"style":196},[8220],{"type":29,"value":214},{"type":20,"tag":189,"props":8222,"children":8223},{"class":191,"line":1125},[8224,8228,8232,8236,8240],{"type":20,"tag":189,"props":8225,"children":8226},{"style":1184},[8227],{"type":29,"value":3471},{"type":20,"tag":189,"props":8229,"children":8230},{"style":196},[8231],{"type":29,"value":2498},{"type":20,"tag":189,"props":8233,"children":8234},{"style":1184},[8235],{"type":29,"value":3530},{"type":20,"tag":189,"props":8237,"children":8238},{"style":2632},[8239],{"type":29,"value":3535},{"type":20,"tag":189,"props":8241,"children":8242},{"style":196},[8243],{"type":29,"value":2508},{"type":20,"tag":189,"props":8245,"children":8246},{"class":191,"line":1139},[8247],{"type":20,"tag":189,"props":8248,"children":8249},{"style":196},[8250],{"type":29,"value":381},{"type":20,"tag":189,"props":8252,"children":8253},{"class":191,"line":1152},[8254],{"type":20,"tag":189,"props":8255,"children":8256},{"emptyLinePlaceholder":397},[8257],{"type":29,"value":400},{"type":20,"tag":189,"props":8259,"children":8260},{"class":191,"line":1175},[8261,8265,8270],{"type":20,"tag":189,"props":8262,"children":8263},{"style":1215},[8264],{"type":29,"value":7212},{"type":20,"tag":189,"props":8266,"children":8267},{"style":1215},[8268],{"type":29,"value":8269}," .menu-item-parent",{"type":20,"tag":189,"props":8271,"children":8272},{"style":196},[8273],{"type":29,"value":214},{"type":20,"tag":189,"props":8275,"children":8276},{"class":191,"line":1190},[8277,8281,8285,8289],{"type":20,"tag":189,"props":8278,"children":8279},{"style":1184},[8280],{"type":29,"value":2996},{"type":20,"tag":189,"props":8282,"children":8283},{"style":196},[8284],{"type":29,"value":2498},{"type":20,"tag":189,"props":8286,"children":8287},{"style":1184},[8288],{"type":29,"value":8060},{"type":20,"tag":189,"props":8290,"children":8291},{"style":196},[8292],{"type":29,"value":2508},{"type":20,"tag":189,"props":8294,"children":8295},{"class":191,"line":3988},[8296,8300,8304,8308],{"type":20,"tag":189,"props":8297,"children":8298},{"style":1184},[8299],{"type":29,"value":2933},{"type":20,"tag":189,"props":8301,"children":8302},{"style":196},[8303],{"type":29,"value":2498},{"type":20,"tag":189,"props":8305,"children":8306},{"style":1184},[8307],{"type":29,"value":3742},{"type":20,"tag":189,"props":8309,"children":8310},{"style":196},[8311],{"type":29,"value":2508},{"type":20,"tag":189,"props":8313,"children":8314},{"class":191,"line":3996},[8315,8319,8323,8327],{"type":20,"tag":189,"props":8316,"children":8317},{"style":1184},[8318],{"type":29,"value":3942},{"type":20,"tag":189,"props":8320,"children":8321},{"style":196},[8322],{"type":29,"value":2498},{"type":20,"tag":189,"props":8324,"children":8325},{"style":1184},[8326],{"type":29,"value":3951},{"type":20,"tag":189,"props":8328,"children":8329},{"style":196},[8330],{"type":29,"value":2508},{"type":20,"tag":189,"props":8332,"children":8333},{"class":191,"line":4004},[8334,8338,8342,8346],{"type":20,"tag":189,"props":8335,"children":8336},{"style":1184},[8337],{"type":29,"value":3968},{"type":20,"tag":189,"props":8339,"children":8340},{"style":196},[8341],{"type":29,"value":2498},{"type":20,"tag":189,"props":8343,"children":8344},{"style":1184},[8345],{"type":29,"value":3895},{"type":20,"tag":189,"props":8347,"children":8348},{"style":196},[8349],{"type":29,"value":2508},{"type":20,"tag":189,"props":8351,"children":8352},{"class":191,"line":4017},[8353,8357,8361,8365,8369],{"type":20,"tag":189,"props":8354,"children":8355},{"style":1184},[8356],{"type":29,"value":8152},{"type":20,"tag":189,"props":8358,"children":8359},{"style":196},[8360],{"type":29,"value":2498},{"type":20,"tag":189,"props":8362,"children":8363},{"style":1184},[8364],{"type":29,"value":7404},{"type":20,"tag":189,"props":8366,"children":8367},{"style":2632},[8368],{"type":29,"value":3128},{"type":20,"tag":189,"props":8370,"children":8371},{"style":196},[8372],{"type":29,"value":2508},{"type":20,"tag":189,"props":8374,"children":8375},{"class":191,"line":4043},[8376,8380,8384,8388,8392],{"type":20,"tag":189,"props":8377,"children":8378},{"style":1184},[8379],{"type":29,"value":3471},{"type":20,"tag":189,"props":8381,"children":8382},{"style":196},[8383],{"type":29,"value":2498},{"type":20,"tag":189,"props":8385,"children":8386},{"style":1184},[8387],{"type":29,"value":2809},{"type":20,"tag":189,"props":8389,"children":8390},{"style":2632},[8391],{"type":29,"value":2814},{"type":20,"tag":189,"props":8393,"children":8394},{"style":196},[8395],{"type":29,"value":2508},{"type":20,"tag":189,"props":8397,"children":8398},{"class":191,"line":4051},[8399],{"type":20,"tag":189,"props":8400,"children":8401},{"style":196},[8402],{"type":29,"value":381},{"type":20,"tag":189,"props":8404,"children":8405},{"class":191,"line":4059},[8406],{"type":20,"tag":189,"props":8407,"children":8408},{"emptyLinePlaceholder":397},[8409],{"type":29,"value":400},{"type":20,"tag":189,"props":8411,"children":8412},{"class":191,"line":4072},[8413,8417,8422],{"type":20,"tag":189,"props":8414,"children":8415},{"style":1215},[8416],{"type":29,"value":7212},{"type":20,"tag":189,"props":8418,"children":8419},{"style":1215},[8420],{"type":29,"value":8421}," .menu-item-child",{"type":20,"tag":189,"props":8423,"children":8424},{"style":196},[8425],{"type":29,"value":214},{"type":20,"tag":189,"props":8427,"children":8428},{"class":191,"line":4092},[8429,8433,8437,8441],{"type":20,"tag":189,"props":8430,"children":8431},{"style":1184},[8432],{"type":29,"value":2996},{"type":20,"tag":189,"props":8434,"children":8435},{"style":196},[8436],{"type":29,"value":2498},{"type":20,"tag":189,"props":8438,"children":8439},{"style":1184},[8440],{"type":29,"value":8060},{"type":20,"tag":189,"props":8442,"children":8443},{"style":196},[8444],{"type":29,"value":2508},{"type":20,"tag":189,"props":8446,"children":8447},{"class":191,"line":38},[8448,8452,8456,8460],{"type":20,"tag":189,"props":8449,"children":8450},{"style":1184},[8451],{"type":29,"value":2933},{"type":20,"tag":189,"props":8453,"children":8454},{"style":196},[8455],{"type":29,"value":2498},{"type":20,"tag":189,"props":8457,"children":8458},{"style":1184},[8459],{"type":29,"value":3742},{"type":20,"tag":189,"props":8461,"children":8462},{"style":196},[8463],{"type":29,"value":2508},{"type":20,"tag":189,"props":8465,"children":8466},{"class":191,"line":4131},[8467,8471,8475,8479],{"type":20,"tag":189,"props":8468,"children":8469},{"style":1184},[8470],{"type":29,"value":3942},{"type":20,"tag":189,"props":8472,"children":8473},{"style":196},[8474],{"type":29,"value":2498},{"type":20,"tag":189,"props":8476,"children":8477},{"style":1184},[8478],{"type":29,"value":3951},{"type":20,"tag":189,"props":8480,"children":8481},{"style":196},[8482],{"type":29,"value":2508},{"type":20,"tag":189,"props":8484,"children":8485},{"class":191,"line":4155},[8486,8490,8494,8498],{"type":20,"tag":189,"props":8487,"children":8488},{"style":1184},[8489],{"type":29,"value":3968},{"type":20,"tag":189,"props":8491,"children":8492},{"style":196},[8493],{"type":29,"value":2498},{"type":20,"tag":189,"props":8495,"children":8496},{"style":1184},[8497],{"type":29,"value":3895},{"type":20,"tag":189,"props":8499,"children":8500},{"style":196},[8501],{"type":29,"value":2508},{"type":20,"tag":189,"props":8503,"children":8504},{"class":191,"line":4179},[8505,8509,8513,8517,8521],{"type":20,"tag":189,"props":8506,"children":8507},{"style":1184},[8508],{"type":29,"value":3912},{"type":20,"tag":189,"props":8510,"children":8511},{"style":196},[8512],{"type":29,"value":2498},{"type":20,"tag":189,"props":8514,"children":8515},{"style":1184},[8516],{"type":29,"value":7815},{"type":20,"tag":189,"props":8518,"children":8519},{"style":2632},[8520],{"type":29,"value":2814},{"type":20,"tag":189,"props":8522,"children":8523},{"style":196},[8524],{"type":29,"value":2508},{"type":20,"tag":189,"props":8526,"children":8527},{"class":191,"line":4215},[8528,8532,8536,8541,8545,8549],{"type":20,"tag":189,"props":8529,"children":8530},{"style":1184},[8531],{"type":29,"value":7503},{"type":20,"tag":189,"props":8533,"children":8534},{"style":196},[8535],{"type":29,"value":2498},{"type":20,"tag":189,"props":8537,"children":8538},{"style":1184},[8539],{"type":29,"value":8540},"1.5",{"type":20,"tag":189,"props":8542,"children":8543},{"style":2632},[8544],{"type":29,"value":2814},{"type":20,"tag":189,"props":8546,"children":8547},{"style":196},[8548],{"type":29,"value":3812},{"type":20,"tag":189,"props":8550,"children":8551},{"style":1993},[8552],{"type":29,"value":8553},"\u002F* Adjust this value for the desired indentation *\u002F\n",{"type":20,"tag":189,"props":8555,"children":8556},{"class":191,"line":4232},[8557],{"type":20,"tag":189,"props":8558,"children":8559},{"style":196},[8560],{"type":29,"value":381},{"type":20,"tag":189,"props":8562,"children":8563},{"class":191,"line":4256},[8564],{"type":20,"tag":189,"props":8565,"children":8566},{"emptyLinePlaceholder":397},[8567],{"type":29,"value":400},{"type":20,"tag":189,"props":8569,"children":8570},{"class":191,"line":4284},[8571,8575,8580],{"type":20,"tag":189,"props":8572,"children":8573},{"style":1215},[8574],{"type":29,"value":7162},{"type":20,"tag":189,"props":8576,"children":8577},{"style":1215},[8578],{"type":29,"value":8579}," .menu-item-child:hover",{"type":20,"tag":189,"props":8581,"children":8582},{"style":196},[8583],{"type":29,"value":214},{"type":20,"tag":189,"props":8585,"children":8586},{"class":191,"line":4308},[8587,8591],{"type":20,"tag":189,"props":8588,"children":8589},{"style":1184},[8590],{"type":29,"value":2787},{"type":20,"tag":189,"props":8592,"children":8593},{"style":196},[8594],{"type":29,"value":7780},{"type":20,"tag":189,"props":8596,"children":8597},{"class":191,"line":4332},[8598,8602,8606],{"type":20,"tag":189,"props":8599,"children":8600},{"style":1184},[8601],{"type":29,"value":2996},{"type":20,"tag":189,"props":8603,"children":8604},{"style":196},[8605],{"type":29,"value":2498},{"type":20,"tag":189,"props":8607,"children":8608},{"style":1184},[8609],{"type":29,"value":8610},"white\n",{"type":20,"tag":189,"props":8612,"children":8613},{"class":191,"line":4340},[8614],{"type":20,"tag":189,"props":8615,"children":8616},{"style":196},[8617],{"type":29,"value":381},{"type":20,"tag":189,"props":8619,"children":8620},{"class":191,"line":4348},[8621],{"type":20,"tag":189,"props":8622,"children":8623},{"emptyLinePlaceholder":397},[8624],{"type":29,"value":400},{"type":20,"tag":189,"props":8626,"children":8627},{"class":191,"line":4361},[8628],{"type":20,"tag":189,"props":8629,"children":8630},{"style":1993},[8631],{"type":29,"value":8632},"  \u002F* Control displaying menu descriptions when menu is expanded *\u002F\n",{"type":20,"tag":189,"props":8634,"children":8635},{"class":191,"line":2454},[8636,8640,8645],{"type":20,"tag":189,"props":8637,"children":8638},{"style":1215},[8639],{"type":29,"value":7212},{"type":20,"tag":189,"props":8641,"children":8642},{"style":1215},[8643],{"type":29,"value":8644}," .nav-item",{"type":20,"tag":189,"props":8646,"children":8647},{"style":196},[8648],{"type":29,"value":214},{"type":20,"tag":189,"props":8650,"children":8651},{"class":191,"line":6787},[8652,8656,8660,8664,8668],{"type":20,"tag":189,"props":8653,"children":8654},{"style":1184},[8655],{"type":29,"value":2933},{"type":20,"tag":189,"props":8657,"children":8658},{"style":196},[8659],{"type":29,"value":2498},{"type":20,"tag":189,"props":8661,"children":8662},{"style":1184},[8663],{"type":29,"value":3895},{"type":20,"tag":189,"props":8665,"children":8666},{"style":196},[8667],{"type":29,"value":3812},{"type":20,"tag":189,"props":8669,"children":8670},{"style":1993},[8671],{"type":29,"value":8672},"\u002F* Hide the nav items when the sidebar is minimized *\u002F\n",{"type":20,"tag":189,"props":8674,"children":8676},{"class":191,"line":8675},109,[8677,8682,8686,8691,8695],{"type":20,"tag":189,"props":8678,"children":8679},{"style":1184},[8680],{"type":29,"value":8681},"    white-space",{"type":20,"tag":189,"props":8683,"children":8684},{"style":196},[8685],{"type":29,"value":2498},{"type":20,"tag":189,"props":8687,"children":8688},{"style":1184},[8689],{"type":29,"value":8690},"nowrap",{"type":20,"tag":189,"props":8692,"children":8693},{"style":196},[8694],{"type":29,"value":3812},{"type":20,"tag":189,"props":8696,"children":8697},{"style":1993},[8698],{"type":29,"value":8699},"\u002F* Prevent text from wrapping *\u002F\n",{"type":20,"tag":189,"props":8701,"children":8703},{"class":191,"line":8702},110,[8704],{"type":20,"tag":189,"props":8705,"children":8706},{"style":196},[8707],{"type":29,"value":381},{"type":20,"tag":189,"props":8709,"children":8711},{"class":191,"line":8710},111,[8712],{"type":20,"tag":189,"props":8713,"children":8714},{"style":196},[8715],{"type":29,"value":2882},{"type":20,"tag":189,"props":8717,"children":8719},{"class":191,"line":8718},112,[8720,8724,8728],{"type":20,"tag":189,"props":8721,"children":8722},{"style":1215},[8723],{"type":29,"value":7162},{"type":20,"tag":189,"props":8725,"children":8726},{"style":1215},[8727],{"type":29,"value":8644},{"type":20,"tag":189,"props":8729,"children":8730},{"style":196},[8731],{"type":29,"value":214},{"type":20,"tag":189,"props":8733,"children":8735},{"class":191,"line":8734},113,[8736,8740,8744,8749,8753],{"type":20,"tag":189,"props":8737,"children":8738},{"style":1184},[8739],{"type":29,"value":2933},{"type":20,"tag":189,"props":8741,"children":8742},{"style":196},[8743],{"type":29,"value":2498},{"type":20,"tag":189,"props":8745,"children":8746},{"style":1184},[8747],{"type":29,"value":8748},"block",{"type":20,"tag":189,"props":8750,"children":8751},{"style":196},[8752],{"type":29,"value":3812},{"type":20,"tag":189,"props":8754,"children":8755},{"style":1993},[8756],{"type":29,"value":8757},"\u002F* Show the nav items when the sidebar is expanded *\u002F\n",{"type":20,"tag":189,"props":8759,"children":8760},{"class":191,"line":1628},[8761],{"type":20,"tag":189,"props":8762,"children":8763},{"style":196},[8764],{"type":29,"value":381},{"type":20,"tag":189,"props":8766,"children":8768},{"class":191,"line":8767},115,[8769],{"type":20,"tag":189,"props":8770,"children":8771},{"emptyLinePlaceholder":397},[8772],{"type":29,"value":400},{"type":20,"tag":189,"props":8774,"children":8776},{"class":191,"line":8775},116,[8777,8781,8786],{"type":20,"tag":189,"props":8778,"children":8779},{"style":1215},[8780],{"type":29,"value":7212},{"type":20,"tag":189,"props":8782,"children":8783},{"style":1215},[8784],{"type":29,"value":8785}," .jva-icon-toggle",{"type":20,"tag":189,"props":8787,"children":8788},{"style":196},[8789],{"type":29,"value":214},{"type":20,"tag":189,"props":8791,"children":8793},{"class":191,"line":8792},117,[8794,8798,8802,8806],{"type":20,"tag":189,"props":8795,"children":8796},{"style":1184},[8797],{"type":29,"value":2933},{"type":20,"tag":189,"props":8799,"children":8800},{"style":196},[8801],{"type":29,"value":2498},{"type":20,"tag":189,"props":8803,"children":8804},{"style":1184},[8805],{"type":29,"value":3895},{"type":20,"tag":189,"props":8807,"children":8808},{"style":196},[8809],{"type":29,"value":2508},{"type":20,"tag":189,"props":8811,"children":8813},{"class":191,"line":8812},118,[8814],{"type":20,"tag":189,"props":8815,"children":8816},{"style":196},[8817],{"type":29,"value":381},{"type":20,"tag":189,"props":8819,"children":8821},{"class":191,"line":8820},119,[8822],{"type":20,"tag":189,"props":8823,"children":8824},{"emptyLinePlaceholder":397},[8825],{"type":29,"value":400},{"type":20,"tag":189,"props":8827,"children":8828},{"class":191,"line":1453},[8829,8833,8837],{"type":20,"tag":189,"props":8830,"children":8831},{"style":1215},[8832],{"type":29,"value":7162},{"type":20,"tag":189,"props":8834,"children":8835},{"style":1215},[8836],{"type":29,"value":8785},{"type":20,"tag":189,"props":8838,"children":8839},{"style":196},[8840],{"type":29,"value":214},{"type":20,"tag":189,"props":8842,"children":8844},{"class":191,"line":8843},121,[8845,8849,8853,8857,8861],{"type":20,"tag":189,"props":8846,"children":8847},{"style":1184},[8848],{"type":29,"value":2933},{"type":20,"tag":189,"props":8850,"children":8851},{"style":196},[8852],{"type":29,"value":2498},{"type":20,"tag":189,"props":8854,"children":8855},{"style":1184},[8856],{"type":29,"value":8748},{"type":20,"tag":189,"props":8858,"children":8859},{"style":196},[8860],{"type":29,"value":3812},{"type":20,"tag":189,"props":8862,"children":8863},{"style":1993},[8864],{"type":29,"value":8757},{"type":20,"tag":189,"props":8866,"children":8868},{"class":191,"line":8867},122,[8869,8874,8878,8883,8887],{"type":20,"tag":189,"props":8870,"children":8871},{"style":1184},[8872],{"type":29,"value":8873},"    min-width",{"type":20,"tag":189,"props":8875,"children":8876},{"style":196},[8877],{"type":29,"value":2498},{"type":20,"tag":189,"props":8879,"children":8880},{"style":1184},[8881],{"type":29,"value":8882},"40",{"type":20,"tag":189,"props":8884,"children":8885},{"style":2632},[8886],{"type":29,"value":3128},{"type":20,"tag":189,"props":8888,"children":8889},{"style":196},[8890],{"type":29,"value":2508},{"type":20,"tag":189,"props":8892,"children":8894},{"class":191,"line":8893},123,[8895,8899,8903,8907],{"type":20,"tag":189,"props":8896,"children":8897},{"style":1184},[8898],{"type":29,"value":7857},{"type":20,"tag":189,"props":8900,"children":8901},{"style":196},[8902],{"type":29,"value":2498},{"type":20,"tag":189,"props":8904,"children":8905},{"style":1184},[8906],{"type":29,"value":3951},{"type":20,"tag":189,"props":8908,"children":8909},{"style":196},[8910],{"type":29,"value":2508},{"type":20,"tag":189,"props":8912,"children":8914},{"class":191,"line":8913},124,[8915,8919,8923,8927,8931],{"type":20,"tag":189,"props":8916,"children":8917},{"style":1184},[8918],{"type":29,"value":7395},{"type":20,"tag":189,"props":8920,"children":8921},{"style":196},[8922],{"type":29,"value":2498},{"type":20,"tag":189,"props":8924,"children":8925},{"style":1184},[8926],{"type":29,"value":3353},{"type":20,"tag":189,"props":8928,"children":8929},{"style":2632},[8930],{"type":29,"value":2814},{"type":20,"tag":189,"props":8932,"children":8933},{"style":196},[8934],{"type":29,"value":2508},{"type":20,"tag":189,"props":8936,"children":8938},{"class":191,"line":8937},125,[8939,8943,8947,8951,8955],{"type":20,"tag":189,"props":8940,"children":8941},{"style":1184},[8942],{"type":29,"value":3912},{"type":20,"tag":189,"props":8944,"children":8945},{"style":196},[8946],{"type":29,"value":2498},{"type":20,"tag":189,"props":8948,"children":8949},{"style":1184},[8950],{"type":29,"value":7908},{"type":20,"tag":189,"props":8952,"children":8953},{"style":2632},[8954],{"type":29,"value":3128},{"type":20,"tag":189,"props":8956,"children":8957},{"style":196},[8958],{"type":29,"value":2508},{"type":20,"tag":189,"props":8960,"children":8962},{"class":191,"line":8961},126,[8963],{"type":20,"tag":189,"props":8964,"children":8965},{"style":196},[8966],{"type":29,"value":381},{"type":20,"tag":189,"props":8968,"children":8970},{"class":191,"line":8969},127,[8971],{"type":20,"tag":189,"props":8972,"children":8973},{"emptyLinePlaceholder":397},[8974],{"type":29,"value":400},{"type":20,"tag":189,"props":8976,"children":8978},{"class":191,"line":8977},128,[8979],{"type":20,"tag":189,"props":8980,"children":8981},{"style":1993},[8982],{"type":29,"value":8983},"  \u002F* Tooltip *\u002F\n",{"type":20,"tag":189,"props":8985,"children":8987},{"class":191,"line":8986},129,[8988,8992,8996,9000,9005],{"type":20,"tag":189,"props":8989,"children":8990},{"style":1215},[8991],{"type":29,"value":7212},{"type":20,"tag":189,"props":8993,"children":8994},{"style":2490},[8995],{"type":29,"value":7491},{"type":20,"tag":189,"props":8997,"children":8998},{"style":2490},[8999],{"type":29,"value":7569},{"type":20,"tag":189,"props":9001,"children":9002},{"style":1215},[9003],{"type":29,"value":9004}," .tooltip",{"type":20,"tag":189,"props":9006,"children":9007},{"style":196},[9008],{"type":29,"value":214},{"type":20,"tag":189,"props":9010,"children":9012},{"class":191,"line":9011},130,[9013,9017,9021,9025],{"type":20,"tag":189,"props":9014,"children":9015},{"style":1184},[9016],{"type":29,"value":2996},{"type":20,"tag":189,"props":9018,"children":9019},{"style":196},[9020],{"type":29,"value":2498},{"type":20,"tag":189,"props":9022,"children":9023},{"style":1184},[9024],{"type":29,"value":8060},{"type":20,"tag":189,"props":9026,"children":9027},{"style":196},[9028],{"type":29,"value":2508},{"type":20,"tag":189,"props":9030,"children":9032},{"class":191,"line":9031},131,[9033,9037,9041,9046],{"type":20,"tag":189,"props":9034,"children":9035},{"style":1184},[9036],{"type":29,"value":2787},{"type":20,"tag":189,"props":9038,"children":9039},{"style":196},[9040],{"type":29,"value":2498},{"type":20,"tag":189,"props":9042,"children":9043},{"style":1184},[9044],{"type":29,"value":9045},"#0d0e0d",{"type":20,"tag":189,"props":9047,"children":9048},{"style":196},[9049],{"type":29,"value":2508},{"type":20,"tag":189,"props":9051,"children":9053},{"class":191,"line":9052},132,[9054,9058,9062,9066],{"type":20,"tag":189,"props":9055,"children":9056},{"style":1184},[9057],{"type":29,"value":2679},{"type":20,"tag":189,"props":9059,"children":9060},{"style":196},[9061],{"type":29,"value":2498},{"type":20,"tag":189,"props":9063,"children":9064},{"style":1184},[9065],{"type":29,"value":7589},{"type":20,"tag":189,"props":9067,"children":9068},{"style":196},[9069],{"type":29,"value":2508},{"type":20,"tag":189,"props":9071,"children":9073},{"class":191,"line":9072},133,[9074,9078,9082,9087,9091],{"type":20,"tag":189,"props":9075,"children":9076},{"style":1184},[9077],{"type":29,"value":2746},{"type":20,"tag":189,"props":9079,"children":9080},{"style":196},[9081],{"type":29,"value":2498},{"type":20,"tag":189,"props":9083,"children":9084},{"style":1184},[9085],{"type":29,"value":9086},"9",{"type":20,"tag":189,"props":9088,"children":9089},{"style":2632},[9090],{"type":29,"value":2814},{"type":20,"tag":189,"props":9092,"children":9093},{"style":196},[9094],{"type":29,"value":2508},{"type":20,"tag":189,"props":9096,"children":9098},{"class":191,"line":9097},134,[9099,9103,9107,9111,9115],{"type":20,"tag":189,"props":9100,"children":9101},{"style":1184},[9102],{"type":29,"value":2705},{"type":20,"tag":189,"props":9104,"children":9105},{"style":196},[9106],{"type":29,"value":2498},{"type":20,"tag":189,"props":9108,"children":9109},{"style":1184},[9110],{"type":29,"value":7404},{"type":20,"tag":189,"props":9112,"children":9113},{"style":2632},[9114],{"type":29,"value":3535},{"type":20,"tag":189,"props":9116,"children":9117},{"style":196},[9118],{"type":29,"value":2508},{"type":20,"tag":189,"props":9120,"children":9122},{"class":191,"line":9121},135,[9123,9127,9131,9136,9140,9144,9148,9153,9157,9161],{"type":20,"tag":189,"props":9124,"children":9125},{"style":1184},[9126],{"type":29,"value":7420},{"type":20,"tag":189,"props":9128,"children":9129},{"style":196},[9130],{"type":29,"value":2498},{"type":20,"tag":189,"props":9132,"children":9133},{"style":1184},[9134],{"type":29,"value":9135},"translate",{"type":20,"tag":189,"props":9137,"children":9138},{"style":196},[9139],{"type":29,"value":1320},{"type":20,"tag":189,"props":9141,"children":9142},{"style":1184},[9143],{"type":29,"value":7438},{"type":20,"tag":189,"props":9145,"children":9146},{"style":2632},[9147],{"type":29,"value":3535},{"type":20,"tag":189,"props":9149,"children":9150},{"style":196},[9151],{"type":29,"value":9152},", ",{"type":20,"tag":189,"props":9154,"children":9155},{"style":1184},[9156],{"type":29,"value":7438},{"type":20,"tag":189,"props":9158,"children":9159},{"style":2632},[9160],{"type":29,"value":3535},{"type":20,"tag":189,"props":9162,"children":9163},{"style":196},[9164],{"type":29,"value":3681},{"type":20,"tag":189,"props":9166,"children":9168},{"class":191,"line":9167},136,[9169,9174,9178,9182,9186,9190,9195,9199,9204,9208,9212,9216,9220,9224,9228,9232,9237],{"type":20,"tag":189,"props":9170,"children":9171},{"style":1184},[9172],{"type":29,"value":9173},"    box-shadow",{"type":20,"tag":189,"props":9175,"children":9176},{"style":196},[9177],{"type":29,"value":2498},{"type":20,"tag":189,"props":9179,"children":9180},{"style":1184},[9181],{"type":29,"value":2714},{"type":20,"tag":189,"props":9183,"children":9184},{"style":1184},[9185],{"type":29,"value":7030},{"type":20,"tag":189,"props":9187,"children":9188},{"style":2632},[9189],{"type":29,"value":2814},{"type":20,"tag":189,"props":9191,"children":9192},{"style":1184},[9193],{"type":29,"value":9194}," 0.8",{"type":20,"tag":189,"props":9196,"children":9197},{"style":2632},[9198],{"type":29,"value":2814},{"type":20,"tag":189,"props":9200,"children":9201},{"style":1184},[9202],{"type":29,"value":9203}," rgba",{"type":20,"tag":189,"props":9205,"children":9206},{"style":196},[9207],{"type":29,"value":1320},{"type":20,"tag":189,"props":9209,"children":9210},{"style":1184},[9211],{"type":29,"value":2714},{"type":20,"tag":189,"props":9213,"children":9214},{"style":196},[9215],{"type":29,"value":9152},{"type":20,"tag":189,"props":9217,"children":9218},{"style":1184},[9219],{"type":29,"value":2714},{"type":20,"tag":189,"props":9221,"children":9222},{"style":196},[9223],{"type":29,"value":9152},{"type":20,"tag":189,"props":9225,"children":9226},{"style":1184},[9227],{"type":29,"value":2714},{"type":20,"tag":189,"props":9229,"children":9230},{"style":196},[9231],{"type":29,"value":9152},{"type":20,"tag":189,"props":9233,"children":9234},{"style":1184},[9235],{"type":29,"value":9236},"0.1",{"type":20,"tag":189,"props":9238,"children":9239},{"style":196},[9240],{"type":29,"value":3681},{"type":20,"tag":189,"props":9242,"children":9244},{"class":191,"line":9243},137,[9245,9249,9253,9258,9262],{"type":20,"tag":189,"props":9246,"children":9247},{"style":1184},[9248],{"type":29,"value":3912},{"type":20,"tag":189,"props":9250,"children":9251},{"style":196},[9252],{"type":29,"value":2498},{"type":20,"tag":189,"props":9254,"children":9255},{"style":1184},[9256],{"type":29,"value":9257},"0.6",{"type":20,"tag":189,"props":9259,"children":9260},{"style":2632},[9261],{"type":29,"value":2814},{"type":20,"tag":189,"props":9263,"children":9264},{"style":196},[9265],{"type":29,"value":2508},{"type":20,"tag":189,"props":9267,"children":9269},{"class":191,"line":9268},138,[9270,9274,9278,9282,9286,9291,9295],{"type":20,"tag":189,"props":9271,"children":9272},{"style":1184},[9273],{"type":29,"value":2826},{"type":20,"tag":189,"props":9275,"children":9276},{"style":196},[9277],{"type":29,"value":2498},{"type":20,"tag":189,"props":9279,"children":9280},{"style":1184},[9281],{"type":29,"value":7331},{"type":20,"tag":189,"props":9283,"children":9284},{"style":2632},[9285],{"type":29,"value":2814},{"type":20,"tag":189,"props":9287,"children":9288},{"style":1184},[9289],{"type":29,"value":9290}," 1.2",{"type":20,"tag":189,"props":9292,"children":9293},{"style":2632},[9294],{"type":29,"value":2814},{"type":20,"tag":189,"props":9296,"children":9297},{"style":196},[9298],{"type":29,"value":2508},{"type":20,"tag":189,"props":9300,"children":9302},{"class":191,"line":9301},139,[9303,9307,9311,9316,9320],{"type":20,"tag":189,"props":9304,"children":9305},{"style":1184},[9306],{"type":29,"value":2766},{"type":20,"tag":189,"props":9308,"children":9309},{"style":196},[9310],{"type":29,"value":2498},{"type":20,"tag":189,"props":9312,"children":9313},{"style":1184},[9314],{"type":29,"value":9315},"20",{"type":20,"tag":189,"props":9317,"children":9318},{"style":196},[9319],{"type":29,"value":3812},{"type":20,"tag":189,"props":9321,"children":9322},{"style":1993},[9323],{"type":29,"value":9324},"\u002F* Ensure the tooltip has a higher z-index *\u002F\n",{"type":20,"tag":189,"props":9326,"children":9328},{"class":191,"line":9327},140,[9329,9334,9338,9342],{"type":20,"tag":189,"props":9330,"children":9331},{"style":1184},[9332],{"type":29,"value":9333},"    opacity",{"type":20,"tag":189,"props":9335,"children":9336},{"style":196},[9337],{"type":29,"value":2498},{"type":20,"tag":189,"props":9339,"children":9340},{"style":1184},[9341],{"type":29,"value":2714},{"type":20,"tag":189,"props":9343,"children":9344},{"style":196},[9345],{"type":29,"value":2508},{"type":20,"tag":189,"props":9347,"children":9349},{"class":191,"line":9348},141,[9350,9355,9359,9363,9367],{"type":20,"tag":189,"props":9351,"children":9352},{"style":1184},[9353],{"type":29,"value":9354},"    pointer-events",{"type":20,"tag":189,"props":9356,"children":9357},{"style":196},[9358],{"type":29,"value":2498},{"type":20,"tag":189,"props":9360,"children":9361},{"style":1184},[9362],{"type":29,"value":3895},{"type":20,"tag":189,"props":9364,"children":9365},{"style":196},[9366],{"type":29,"value":3812},{"type":20,"tag":189,"props":9368,"children":9369},{"style":1993},[9370],{"type":29,"value":9371},"\u002F* Ensure it doesn't interfere with other elements *\u002F\n",{"type":20,"tag":189,"props":9373,"children":9375},{"class":191,"line":9374},142,[9376,9380,9385,9390,9394,9398],{"type":20,"tag":189,"props":9377,"children":9378},{"style":1184},[9379],{"type":29,"value":7016},{"type":20,"tag":189,"props":9381,"children":9382},{"style":196},[9383],{"type":29,"value":9384},": opacity ",{"type":20,"tag":189,"props":9386,"children":9387},{"style":1184},[9388],{"type":29,"value":9389},"0.3",{"type":20,"tag":189,"props":9391,"children":9392},{"style":2632},[9393],{"type":29,"value":7035},{"type":20,"tag":189,"props":9395,"children":9396},{"style":196},[9397],{"type":29,"value":3812},{"type":20,"tag":189,"props":9399,"children":9400},{"style":1993},[9401],{"type":29,"value":9402},"\u002F* Add transition for better UX *\u002F\n",{"type":20,"tag":189,"props":9404,"children":9406},{"class":191,"line":9405},143,[9407,9411,9415,9419,9423],{"type":20,"tag":189,"props":9408,"children":9409},{"style":1184},[9410],{"type":29,"value":8681},{"type":20,"tag":189,"props":9412,"children":9413},{"style":196},[9414],{"type":29,"value":2498},{"type":20,"tag":189,"props":9416,"children":9417},{"style":1184},[9418],{"type":29,"value":8690},{"type":20,"tag":189,"props":9420,"children":9421},{"style":196},[9422],{"type":29,"value":3812},{"type":20,"tag":189,"props":9424,"children":9425},{"style":1993},[9426],{"type":29,"value":8699},{"type":20,"tag":189,"props":9428,"children":9430},{"class":191,"line":9429},144,[9431,9435,9439,9443,9447],{"type":20,"tag":189,"props":9432,"children":9433},{"style":1184},[9434],{"type":29,"value":2933},{"type":20,"tag":189,"props":9436,"children":9437},{"style":196},[9438],{"type":29,"value":2498},{"type":20,"tag":189,"props":9440,"children":9441},{"style":1184},[9442],{"type":29,"value":8748},{"type":20,"tag":189,"props":9444,"children":9445},{"style":196},[9446],{"type":29,"value":3812},{"type":20,"tag":189,"props":9448,"children":9449},{"style":1993},[9450],{"type":29,"value":9451},"\u002F* Keep the text in a single line *\u002F\n",{"type":20,"tag":189,"props":9453,"children":9455},{"class":191,"line":9454},145,[9456,9460,9464,9469,9473],{"type":20,"tag":189,"props":9457,"children":9458},{"style":1184},[9459],{"type":29,"value":7857},{"type":20,"tag":189,"props":9461,"children":9462},{"style":196},[9463],{"type":29,"value":2498},{"type":20,"tag":189,"props":9465,"children":9466},{"style":1184},[9467],{"type":29,"value":9468},"left",{"type":20,"tag":189,"props":9470,"children":9471},{"style":196},[9472],{"type":29,"value":3812},{"type":20,"tag":189,"props":9474,"children":9475},{"style":1993},[9476],{"type":29,"value":9477},"\u002F* Align text to the left *\u002F\n",{"type":20,"tag":189,"props":9479,"children":9481},{"class":191,"line":9480},146,[9482,9486,9490,9494,9498],{"type":20,"tag":189,"props":9483,"children":9484},{"style":1184},[9485],{"type":29,"value":8873},{"type":20,"tag":189,"props":9487,"children":9488},{"style":196},[9489],{"type":29,"value":2498},{"type":20,"tag":189,"props":9491,"children":9492},{"style":1184},[9493],{"type":29,"value":3123},{"type":20,"tag":189,"props":9495,"children":9496},{"style":2632},[9497],{"type":29,"value":2814},{"type":20,"tag":189,"props":9499,"children":9500},{"style":196},[9501],{"type":29,"value":2508},{"type":20,"tag":189,"props":9503,"children":9505},{"class":191,"line":9504},147,[9506],{"type":20,"tag":189,"props":9507,"children":9508},{"style":196},[9509],{"type":29,"value":381},{"type":20,"tag":189,"props":9511,"children":9513},{"class":191,"line":9512},148,[9514],{"type":20,"tag":189,"props":9515,"children":9516},{"emptyLinePlaceholder":397},[9517],{"type":29,"value":400},{"type":20,"tag":189,"props":9519,"children":9521},{"class":191,"line":9520},149,[9522,9526,9530,9534,9538,9542],{"type":20,"tag":189,"props":9523,"children":9524},{"style":1215},[9525],{"type":29,"value":7212},{"type":20,"tag":189,"props":9527,"children":9528},{"style":2490},[9529],{"type":29,"value":7491},{"type":20,"tag":189,"props":9531,"children":9532},{"style":2490},[9533],{"type":29,"value":7569},{"type":20,"tag":189,"props":9535,"children":9536},{"style":1215},[9537],{"type":29,"value":7740},{"type":20,"tag":189,"props":9539,"children":9540},{"style":1215},[9541],{"type":29,"value":9004},{"type":20,"tag":189,"props":9543,"children":9544},{"style":196},[9545],{"type":29,"value":214},{"type":20,"tag":189,"props":9547,"children":9548},{"class":191,"line":36},[9549,9553,9557,9561],{"type":20,"tag":189,"props":9550,"children":9551},{"style":1184},[9552],{"type":29,"value":9333},{"type":20,"tag":189,"props":9554,"children":9555},{"style":196},[9556],{"type":29,"value":2498},{"type":20,"tag":189,"props":9558,"children":9559},{"style":1184},[9560],{"type":29,"value":7060},{"type":20,"tag":189,"props":9562,"children":9563},{"style":196},[9564],{"type":29,"value":2508},{"type":20,"tag":189,"props":9566,"children":9568},{"class":191,"line":9567},151,[9569],{"type":20,"tag":189,"props":9570,"children":9571},{"style":196},[9572],{"type":29,"value":381},{"type":20,"tag":189,"props":9574,"children":9576},{"class":191,"line":9575},152,[9577],{"type":20,"tag":189,"props":9578,"children":9579},{"style":196},[9580],{"type":29,"value":2882},{"type":20,"tag":189,"props":9582,"children":9584},{"class":191,"line":9583},153,[9585,9589,9593,9597,9601],{"type":20,"tag":189,"props":9586,"children":9587},{"style":1215},[9588],{"type":29,"value":7162},{"type":20,"tag":189,"props":9590,"children":9591},{"style":2490},[9592],{"type":29,"value":7491},{"type":20,"tag":189,"props":9594,"children":9595},{"style":2490},[9596],{"type":29,"value":7569},{"type":20,"tag":189,"props":9598,"children":9599},{"style":1215},[9600],{"type":29,"value":9004},{"type":20,"tag":189,"props":9602,"children":9603},{"style":196},[9604],{"type":29,"value":214},{"type":20,"tag":189,"props":9606,"children":9608},{"class":191,"line":9607},154,[9609,9613,9617,9621],{"type":20,"tag":189,"props":9610,"children":9611},{"style":1184},[9612],{"type":29,"value":2933},{"type":20,"tag":189,"props":9614,"children":9615},{"style":196},[9616],{"type":29,"value":2498},{"type":20,"tag":189,"props":9618,"children":9619},{"style":1184},[9620],{"type":29,"value":3895},{"type":20,"tag":189,"props":9622,"children":9623},{"style":196},[9624],{"type":29,"value":2508},{"type":20,"tag":189,"props":9626,"children":9628},{"class":191,"line":9627},155,[9629],{"type":20,"tag":189,"props":9630,"children":9631},{"style":196},[9632],{"type":29,"value":381},{"type":20,"tag":189,"props":9634,"children":9635},{"class":191,"line":4840},[9636],{"type":20,"tag":189,"props":9637,"children":9638},{"emptyLinePlaceholder":397},[9639],{"type":29,"value":400},{"type":20,"tag":189,"props":9641,"children":9643},{"class":191,"line":9642},157,[9644],{"type":20,"tag":189,"props":9645,"children":9646},{"style":1993},[9647],{"type":29,"value":9648},"  \u002F* Control display size of main content area, based on menu extended or not*\u002F\n",{"type":20,"tag":189,"props":9650,"children":9652},{"class":191,"line":9651},158,[9653,9658],{"type":20,"tag":189,"props":9654,"children":9655},{"style":1215},[9656],{"type":29,"value":9657},"  .main-content",{"type":20,"tag":189,"props":9659,"children":9660},{"style":196},[9661],{"type":29,"value":214},{"type":20,"tag":189,"props":9663,"children":9665},{"class":191,"line":9664},159,[9666,9670,9674,9678],{"type":20,"tag":189,"props":9667,"children":9668},{"style":1184},[9669],{"type":29,"value":2679},{"type":20,"tag":189,"props":9671,"children":9672},{"style":196},[9673],{"type":29,"value":2498},{"type":20,"tag":189,"props":9675,"children":9676},{"style":1184},[9677],{"type":29,"value":7589},{"type":20,"tag":189,"props":9679,"children":9680},{"style":196},[9681],{"type":29,"value":2508},{"type":20,"tag":189,"props":9683,"children":9685},{"class":191,"line":9684},160,[9686,9690,9694,9698,9702],{"type":20,"tag":189,"props":9687,"children":9688},{"style":1184},[9689],{"type":29,"value":2705},{"type":20,"tag":189,"props":9691,"children":9692},{"style":196},[9693],{"type":29,"value":2498},{"type":20,"tag":189,"props":9695,"children":9696},{"style":1184},[9697],{"type":29,"value":2809},{"type":20,"tag":189,"props":9699,"children":9700},{"style":2632},[9701],{"type":29,"value":2814},{"type":20,"tag":189,"props":9703,"children":9704},{"style":196},[9705],{"type":29,"value":2508},{"type":20,"tag":189,"props":9707,"children":9709},{"class":191,"line":9708},161,[9710,9714,9718,9722,9726],{"type":20,"tag":189,"props":9711,"children":9712},{"style":1184},[9713],{"type":29,"value":2746},{"type":20,"tag":189,"props":9715,"children":9716},{"style":196},[9717],{"type":29,"value":2498},{"type":20,"tag":189,"props":9719,"children":9720},{"style":1184},[9721],{"type":29,"value":7131},{"type":20,"tag":189,"props":9723,"children":9724},{"style":2632},[9725],{"type":29,"value":2814},{"type":20,"tag":189,"props":9727,"children":9728},{"style":196},[9729],{"type":29,"value":2508},{"type":20,"tag":189,"props":9731,"children":9733},{"class":191,"line":9732},162,[9734,9738,9742,9746,9750],{"type":20,"tag":189,"props":9735,"children":9736},{"style":1184},[9737],{"type":29,"value":3471},{"type":20,"tag":189,"props":9739,"children":9740},{"style":196},[9741],{"type":29,"value":2498},{"type":20,"tag":189,"props":9743,"children":9744},{"style":1184},[9745],{"type":29,"value":3530},{"type":20,"tag":189,"props":9747,"children":9748},{"style":2632},[9749],{"type":29,"value":3535},{"type":20,"tag":189,"props":9751,"children":9752},{"style":196},[9753],{"type":29,"value":2508},{"type":20,"tag":189,"props":9755,"children":9756},{"class":191,"line":2440},[9757,9761,9765,9769,9773],{"type":20,"tag":189,"props":9758,"children":9759},{"style":1184},[9760],{"type":29,"value":2800},{"type":20,"tag":189,"props":9762,"children":9763},{"style":196},[9764],{"type":29,"value":2498},{"type":20,"tag":189,"props":9766,"children":9767},{"style":1184},[9768],{"type":29,"value":3530},{"type":20,"tag":189,"props":9770,"children":9771},{"style":2632},[9772],{"type":29,"value":3535},{"type":20,"tag":189,"props":9774,"children":9775},{"style":196},[9776],{"type":29,"value":2508},{"type":20,"tag":189,"props":9778,"children":9780},{"class":191,"line":9779},164,[9781,9785,9789,9793,9797,9801,9805],{"type":20,"tag":189,"props":9782,"children":9783},{"style":1184},[9784],{"type":29,"value":7016},{"type":20,"tag":189,"props":9786,"children":9787},{"style":196},[9788],{"type":29,"value":2498},{"type":20,"tag":189,"props":9790,"children":9791},{"style":1184},[9792],{"type":29,"value":7025},{"type":20,"tag":189,"props":9794,"children":9795},{"style":1184},[9796],{"type":29,"value":7030},{"type":20,"tag":189,"props":9798,"children":9799},{"style":2632},[9800],{"type":29,"value":7035},{"type":20,"tag":189,"props":9802,"children":9803},{"style":1184},[9804],{"type":29,"value":7040},{"type":20,"tag":189,"props":9806,"children":9807},{"style":196},[9808],{"type":29,"value":2508},{"type":20,"tag":189,"props":9810,"children":9812},{"class":191,"line":9811},165,[9813,9817,9821,9825,9829,9833,9837,9841,9846,9850],{"type":20,"tag":189,"props":9814,"children":9815},{"style":1184},[9816],{"type":29,"value":3471},{"type":20,"tag":189,"props":9818,"children":9819},{"style":196},[9820],{"type":29,"value":2498},{"type":20,"tag":189,"props":9822,"children":9823},{"style":1184},[9824],{"type":29,"value":6959},{"type":20,"tag":189,"props":9826,"children":9827},{"style":196},[9828],{"type":29,"value":1320},{"type":20,"tag":189,"props":9830,"children":9831},{"style":1184},[9832],{"type":29,"value":3530},{"type":20,"tag":189,"props":9834,"children":9835},{"style":2632},[9836],{"type":29,"value":3535},{"type":20,"tag":189,"props":9838,"children":9839},{"style":2632},[9840],{"type":29,"value":6977},{"type":20,"tag":189,"props":9842,"children":9843},{"style":1184},[9844],{"type":29,"value":9845}," 3.5",{"type":20,"tag":189,"props":9847,"children":9848},{"style":2632},[9849],{"type":29,"value":2814},{"type":20,"tag":189,"props":9851,"children":9852},{"style":196},[9853],{"type":29,"value":3681},{"type":20,"tag":189,"props":9855,"children":9857},{"class":191,"line":9856},166,[9858],{"type":20,"tag":189,"props":9859,"children":9860},{"style":196},[9861],{"type":29,"value":9862},"  }  \n",{"type":20,"tag":189,"props":9864,"children":9866},{"class":191,"line":9865},167,[9867],{"type":20,"tag":189,"props":9868,"children":9869},{"style":196},[9870],{"type":29,"value":2882},{"type":20,"tag":189,"props":9872,"children":9874},{"class":191,"line":9873},168,[9875,9879,9884,9889],{"type":20,"tag":189,"props":9876,"children":9877},{"style":1215},[9878],{"type":29,"value":7162},{"type":20,"tag":189,"props":9880,"children":9881},{"style":2632},[9882],{"type":29,"value":9883}," ~",{"type":20,"tag":189,"props":9885,"children":9886},{"style":1215},[9887],{"type":29,"value":9888}," .main-content",{"type":20,"tag":189,"props":9890,"children":9891},{"style":196},[9892],{"type":29,"value":214},{"type":20,"tag":189,"props":9894,"children":9896},{"class":191,"line":9895},169,[9897,9901,9905,9909,9913],{"type":20,"tag":189,"props":9898,"children":9899},{"style":1184},[9900],{"type":29,"value":2746},{"type":20,"tag":189,"props":9902,"children":9903},{"style":196},[9904],{"type":29,"value":2498},{"type":20,"tag":189,"props":9906,"children":9907},{"style":1184},[9908],{"type":29,"value":7182},{"type":20,"tag":189,"props":9910,"children":9911},{"style":2632},[9912],{"type":29,"value":3128},{"type":20,"tag":189,"props":9914,"children":9915},{"style":196},[9916],{"type":29,"value":2508},{"type":20,"tag":189,"props":9918,"children":9920},{"class":191,"line":9919},170,[9921,9925,9929,9933,9937,9941,9945],{"type":20,"tag":189,"props":9922,"children":9923},{"style":1184},[9924],{"type":29,"value":7016},{"type":20,"tag":189,"props":9926,"children":9927},{"style":196},[9928],{"type":29,"value":2498},{"type":20,"tag":189,"props":9930,"children":9931},{"style":1184},[9932],{"type":29,"value":7025},{"type":20,"tag":189,"props":9934,"children":9935},{"style":1184},[9936],{"type":29,"value":7030},{"type":20,"tag":189,"props":9938,"children":9939},{"style":2632},[9940],{"type":29,"value":7035},{"type":20,"tag":189,"props":9942,"children":9943},{"style":1184},[9944],{"type":29,"value":7040},{"type":20,"tag":189,"props":9946,"children":9947},{"style":196},[9948],{"type":29,"value":2508},{"type":20,"tag":189,"props":9950,"children":9952},{"class":191,"line":9951},171,[9953,9957,9961,9965,9969,9973,9977,9981,9986,9990],{"type":20,"tag":189,"props":9954,"children":9955},{"style":1184},[9956],{"type":29,"value":3471},{"type":20,"tag":189,"props":9958,"children":9959},{"style":196},[9960],{"type":29,"value":2498},{"type":20,"tag":189,"props":9962,"children":9963},{"style":1184},[9964],{"type":29,"value":6959},{"type":20,"tag":189,"props":9966,"children":9967},{"style":196},[9968],{"type":29,"value":1320},{"type":20,"tag":189,"props":9970,"children":9971},{"style":1184},[9972],{"type":29,"value":3530},{"type":20,"tag":189,"props":9974,"children":9975},{"style":2632},[9976],{"type":29,"value":3535},{"type":20,"tag":189,"props":9978,"children":9979},{"style":2632},[9980],{"type":29,"value":6977},{"type":20,"tag":189,"props":9982,"children":9983},{"style":1184},[9984],{"type":29,"value":9985}," 250",{"type":20,"tag":189,"props":9987,"children":9988},{"style":2632},[9989],{"type":29,"value":3128},{"type":20,"tag":189,"props":9991,"children":9992},{"style":196},[9993],{"type":29,"value":3681},{"type":20,"tag":189,"props":9995,"children":9997},{"class":191,"line":9996},172,[9998],{"type":20,"tag":189,"props":9999,"children":10000},{"style":196},[10001],{"type":29,"value":381},{"type":20,"tag":189,"props":10003,"children":10005},{"class":191,"line":10004},173,[10006],{"type":20,"tag":189,"props":10007,"children":10008},{"style":196},[10009],{"type":29,"value":2882},{"type":20,"tag":189,"props":10011,"children":10013},{"class":191,"line":10012},174,[10014,10018,10022,10026],{"type":20,"tag":189,"props":10015,"children":10016},{"style":1215},[10017],{"type":29,"value":7162},{"type":20,"tag":189,"props":10019,"children":10020},{"style":2632},[10021],{"type":29,"value":9883},{"type":20,"tag":189,"props":10023,"children":10024},{"style":1215},[10025],{"type":29,"value":9888},{"type":20,"tag":189,"props":10027,"children":10028},{"style":196},[10029],{"type":29,"value":214},{"type":20,"tag":189,"props":10031,"children":10033},{"class":191,"line":10032},175,[10034,10038,10042,10046,10050],{"type":20,"tag":189,"props":10035,"children":10036},{"style":1184},[10037],{"type":29,"value":2746},{"type":20,"tag":189,"props":10039,"children":10040},{"style":196},[10041],{"type":29,"value":2498},{"type":20,"tag":189,"props":10043,"children":10044},{"style":1184},[10045],{"type":29,"value":7182},{"type":20,"tag":189,"props":10047,"children":10048},{"style":2632},[10049],{"type":29,"value":3128},{"type":20,"tag":189,"props":10051,"children":10052},{"style":196},[10053],{"type":29,"value":2508},{"type":20,"tag":189,"props":10055,"children":10057},{"class":191,"line":10056},176,[10058,10062,10066,10070,10074,10078,10082],{"type":20,"tag":189,"props":10059,"children":10060},{"style":1184},[10061],{"type":29,"value":7016},{"type":20,"tag":189,"props":10063,"children":10064},{"style":196},[10065],{"type":29,"value":2498},{"type":20,"tag":189,"props":10067,"children":10068},{"style":1184},[10069],{"type":29,"value":7025},{"type":20,"tag":189,"props":10071,"children":10072},{"style":1184},[10073],{"type":29,"value":7030},{"type":20,"tag":189,"props":10075,"children":10076},{"style":2632},[10077],{"type":29,"value":7035},{"type":20,"tag":189,"props":10079,"children":10080},{"style":1184},[10081],{"type":29,"value":7040},{"type":20,"tag":189,"props":10083,"children":10084},{"style":196},[10085],{"type":29,"value":2508},{"type":20,"tag":189,"props":10087,"children":10089},{"class":191,"line":10088},177,[10090,10094,10098,10102,10106,10110,10114,10118,10122,10126],{"type":20,"tag":189,"props":10091,"children":10092},{"style":1184},[10093],{"type":29,"value":3471},{"type":20,"tag":189,"props":10095,"children":10096},{"style":196},[10097],{"type":29,"value":2498},{"type":20,"tag":189,"props":10099,"children":10100},{"style":1184},[10101],{"type":29,"value":6959},{"type":20,"tag":189,"props":10103,"children":10104},{"style":196},[10105],{"type":29,"value":1320},{"type":20,"tag":189,"props":10107,"children":10108},{"style":1184},[10109],{"type":29,"value":3530},{"type":20,"tag":189,"props":10111,"children":10112},{"style":2632},[10113],{"type":29,"value":3535},{"type":20,"tag":189,"props":10115,"children":10116},{"style":2632},[10117],{"type":29,"value":6977},{"type":20,"tag":189,"props":10119,"children":10120},{"style":1184},[10121],{"type":29,"value":9985},{"type":20,"tag":189,"props":10123,"children":10124},{"style":2632},[10125],{"type":29,"value":3128},{"type":20,"tag":189,"props":10127,"children":10128},{"style":196},[10129],{"type":29,"value":3681},{"type":20,"tag":189,"props":10131,"children":10133},{"class":191,"line":10132},178,[10134],{"type":20,"tag":189,"props":10135,"children":10136},{"style":196},[10137],{"type":29,"value":381},{"type":20,"tag":189,"props":10139,"children":10141},{"class":191,"line":10140},179,[10142],{"type":20,"tag":189,"props":10143,"children":10144},{"emptyLinePlaceholder":397},[10145],{"type":29,"value":400},{"type":20,"tag":189,"props":10147,"children":10149},{"class":191,"line":10148},180,[10150,10155],{"type":20,"tag":189,"props":10151,"children":10152},{"style":1215},[10153],{"type":29,"value":10154},"  .jva-container",{"type":20,"tag":189,"props":10156,"children":10157},{"style":196},[10158],{"type":29,"value":214},{"type":20,"tag":189,"props":10160,"children":10162},{"class":191,"line":10161},181,[10163,10167,10171,10175],{"type":20,"tag":189,"props":10164,"children":10165},{"style":1184},[10166],{"type":29,"value":2679},{"type":20,"tag":189,"props":10168,"children":10169},{"style":196},[10170],{"type":29,"value":2498},{"type":20,"tag":189,"props":10172,"children":10173},{"style":1184},[10174],{"type":29,"value":7589},{"type":20,"tag":189,"props":10176,"children":10177},{"style":196},[10178],{"type":29,"value":2508},{"type":20,"tag":189,"props":10180,"children":10182},{"class":191,"line":10181},182,[10183,10187,10191,10195,10199],{"type":20,"tag":189,"props":10184,"children":10185},{"style":1184},[10186],{"type":29,"value":2826},{"type":20,"tag":189,"props":10188,"children":10189},{"style":196},[10190],{"type":29,"value":2498},{"type":20,"tag":189,"props":10192,"children":10193},{"style":1184},[10194],{"type":29,"value":3353},{"type":20,"tag":189,"props":10196,"children":10197},{"style":2632},[10198],{"type":29,"value":2814},{"type":20,"tag":189,"props":10200,"children":10201},{"style":196},[10202],{"type":29,"value":2508},{"type":20,"tag":189,"props":10204,"children":10206},{"class":191,"line":10205},183,[10207],{"type":20,"tag":189,"props":10208,"children":10209},{"style":196},[10210],{"type":29,"value":381},{"type":20,"tag":21,"props":10212,"children":10213},{},[10214],{"type":29,"value":10215},"After completing the steps above, we should have a properly styled side\nmenu in place:",{"type":20,"tag":21,"props":10217,"children":10218},{},[10219],{"type":20,"tag":34,"props":10220,"children":10223},{"alt":8,"height":10221,"src":10222,"width":1242},207,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage33.png",[],{"type":20,"tag":21,"props":10225,"children":10226},{},[10227],{"type":20,"tag":25,"props":10228,"children":10229},{},[10230],{"type":29,"value":138},{"type":20,"tag":21,"props":10232,"children":10233},{},[10234],{"type":29,"value":10235},"In this milestone we will integrate the MicroFrontends of our two\nmicro-services into the admin container.",{"type":20,"tag":21,"props":10237,"children":10238},{},[10239,10241,10244],{"type":29,"value":10240},"We need to modify the entities menu that JHipster generated for the\nmicro-service. The path to the entities-menu file is as follows:",{"type":20,"tag":1485,"props":10242,"children":10243},{},[],{"type":20,"tag":34,"props":10245,"children":10249},{"alt":8,"height":10246,"src":10247,"width":10248},736,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage34.png",404,[],{"type":20,"tag":21,"props":10251,"children":10252},{},[10253],{"type":29,"value":10254},"The existing state is as follows:",{"type":20,"tag":178,"props":10256,"children":10258},{"className":4437,"code":10257,"language":4439,"meta":8,"style":8},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cb-dropdown-item to=\"\u002Fstore\u002Fproduct\">\n      \u003Cfont-awesome-icon icon=\"asterisk\" \u002F>\n      \u003Cspan v-text=\"t$('global.menu.entities.storeProduct')\">\u003C\u002Fspan>\n    \u003C\u002Fb-dropdown-item>\n    \u003C!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" src=\".\u002Fentities-menu.component.ts\">\u003C\u002Fscript>\n\n",[10259],{"type":20,"tag":185,"props":10260,"children":10261},{"__ignoreMap":8},[10262,10277,10292,10321,10349,10386,10401,10409,10424,10439,10446],{"type":20,"tag":189,"props":10263,"children":10264},{"class":191,"line":192},[10265,10269,10273],{"type":20,"tag":189,"props":10266,"children":10267},{"style":196},[10268],{"type":29,"value":4451},{"type":20,"tag":189,"props":10270,"children":10271},{"style":2490},[10272],{"type":29,"value":4456},{"type":20,"tag":189,"props":10274,"children":10275},{"style":196},[10276],{"type":29,"value":4461},{"type":20,"tag":189,"props":10278,"children":10279},{"class":191,"line":202},[10280,10284,10288],{"type":20,"tag":189,"props":10281,"children":10282},{"style":196},[10283],{"type":29,"value":4469},{"type":20,"tag":189,"props":10285,"children":10286},{"style":2490},[10287],{"type":29,"value":4474},{"type":20,"tag":189,"props":10289,"children":10290},{"style":196},[10291],{"type":29,"value":4461},{"type":20,"tag":189,"props":10293,"children":10294},{"class":191,"line":217},[10295,10299,10304,10308,10312,10317],{"type":20,"tag":189,"props":10296,"children":10297},{"style":196},[10298],{"type":29,"value":4486},{"type":20,"tag":189,"props":10300,"children":10301},{"style":2490},[10302],{"type":29,"value":10303},"b-dropdown-item",{"type":20,"tag":189,"props":10305,"children":10306},{"style":1215},[10307],{"type":29,"value":6171},{"type":20,"tag":189,"props":10309,"children":10310},{"style":196},[10311],{"type":29,"value":4565},{"type":20,"tag":189,"props":10313,"children":10314},{"style":1221},[10315],{"type":29,"value":10316},"\"\u002Fstore\u002Fproduct\"",{"type":20,"tag":189,"props":10318,"children":10319},{"style":196},[10320],{"type":29,"value":4461},{"type":20,"tag":189,"props":10322,"children":10323},{"class":191,"line":231},[10324,10328,10332,10336,10340,10345],{"type":20,"tag":189,"props":10325,"children":10326},{"style":196},[10327],{"type":29,"value":4978},{"type":20,"tag":189,"props":10329,"children":10330},{"style":2490},[10331],{"type":29,"value":5027},{"type":20,"tag":189,"props":10333,"children":10334},{"style":1215},[10335],{"type":29,"value":5192},{"type":20,"tag":189,"props":10337,"children":10338},{"style":196},[10339],{"type":29,"value":4565},{"type":20,"tag":189,"props":10341,"children":10342},{"style":1221},[10343],{"type":29,"value":10344},"\"asterisk\"",{"type":20,"tag":189,"props":10346,"children":10347},{"style":196},[10348],{"type":29,"value":5206},{"type":20,"tag":189,"props":10350,"children":10351},{"class":191,"line":245},[10352,10356,10360,10365,10369,10374,10378,10382],{"type":20,"tag":189,"props":10353,"children":10354},{"style":196},[10355],{"type":29,"value":4978},{"type":20,"tag":189,"props":10357,"children":10358},{"style":2490},[10359],{"type":29,"value":189},{"type":20,"tag":189,"props":10361,"children":10362},{"style":1215},[10363],{"type":29,"value":10364}," v-text",{"type":20,"tag":189,"props":10366,"children":10367},{"style":196},[10368],{"type":29,"value":4565},{"type":20,"tag":189,"props":10370,"children":10371},{"style":1221},[10372],{"type":29,"value":10373},"\"t$('global.menu.entities.storeProduct')\"",{"type":20,"tag":189,"props":10375,"children":10376},{"style":196},[10377],{"type":29,"value":4589},{"type":20,"tag":189,"props":10379,"children":10380},{"style":2490},[10381],{"type":29,"value":189},{"type":20,"tag":189,"props":10383,"children":10384},{"style":196},[10385],{"type":29,"value":4461},{"type":20,"tag":189,"props":10387,"children":10388},{"class":191,"line":259},[10389,10393,10397],{"type":20,"tag":189,"props":10390,"children":10391},{"style":196},[10392],{"type":29,"value":5083},{"type":20,"tag":189,"props":10394,"children":10395},{"style":2490},[10396],{"type":29,"value":10303},{"type":20,"tag":189,"props":10398,"children":10399},{"style":196},[10400],{"type":29,"value":4461},{"type":20,"tag":189,"props":10402,"children":10403},{"class":191,"line":272},[10404],{"type":20,"tag":189,"props":10405,"children":10406},{"style":1993},[10407],{"type":29,"value":10408},"    \u003C!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->\n",{"type":20,"tag":189,"props":10410,"children":10411},{"class":191,"line":286},[10412,10416,10420],{"type":20,"tag":189,"props":10413,"children":10414},{"style":196},[10415],{"type":29,"value":4512},{"type":20,"tag":189,"props":10417,"children":10418},{"style":2490},[10419],{"type":29,"value":4474},{"type":20,"tag":189,"props":10421,"children":10422},{"style":196},[10423],{"type":29,"value":4461},{"type":20,"tag":189,"props":10425,"children":10426},{"class":191,"line":300},[10427,10431,10435],{"type":20,"tag":189,"props":10428,"children":10429},{"style":196},[10430],{"type":29,"value":4528},{"type":20,"tag":189,"props":10432,"children":10433},{"style":2490},[10434],{"type":29,"value":4456},{"type":20,"tag":189,"props":10436,"children":10437},{"style":196},[10438],{"type":29,"value":4461},{"type":20,"tag":189,"props":10440,"children":10441},{"class":191,"line":314},[10442],{"type":20,"tag":189,"props":10443,"children":10444},{"emptyLinePlaceholder":397},[10445],{"type":29,"value":400},{"type":20,"tag":189,"props":10447,"children":10448},{"class":191,"line":328},[10449,10453,10457,10461,10465,10469,10473,10477,10482,10486,10490],{"type":20,"tag":189,"props":10450,"children":10451},{"style":196},[10452],{"type":29,"value":4451},{"type":20,"tag":189,"props":10454,"children":10455},{"style":2490},[10456],{"type":29,"value":4555},{"type":20,"tag":189,"props":10458,"children":10459},{"style":1215},[10460],{"type":29,"value":4560},{"type":20,"tag":189,"props":10462,"children":10463},{"style":196},[10464],{"type":29,"value":4565},{"type":20,"tag":189,"props":10466,"children":10467},{"style":1221},[10468],{"type":29,"value":4570},{"type":20,"tag":189,"props":10470,"children":10471},{"style":1215},[10472],{"type":29,"value":4575},{"type":20,"tag":189,"props":10474,"children":10475},{"style":196},[10476],{"type":29,"value":4565},{"type":20,"tag":189,"props":10478,"children":10479},{"style":1221},[10480],{"type":29,"value":10481},"\".\u002Fentities-menu.component.ts\"",{"type":20,"tag":189,"props":10483,"children":10484},{"style":196},[10485],{"type":29,"value":4589},{"type":20,"tag":189,"props":10487,"children":10488},{"style":2490},[10489],{"type":29,"value":4555},{"type":20,"tag":189,"props":10491,"children":10492},{"style":196},[10493],{"type":29,"value":4461},{"type":20,"tag":21,"props":10495,"children":10496},{},[10497],{"type":29,"value":10498},"We will update it to the following:",{"type":20,"tag":178,"props":10500,"children":10502},{"className":4437,"code":10501,"language":4439,"meta":8,"style":8},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cli :class=\"{ active: $route.path === '\u002Fstore\u002Fproduct' }\">\n      \u003Crouter-link to=\"\u002Fstore\u002Fproduct\" class=\"menu-item\">\n        \u003Cfont-awesome-icon icon=\"asterisk\" \u002F>\n        \u003Cspan class=\"nav-item\" v-text=\"t$('global.menu.entities.storeProduct')\">\u003C\u002Fspan>\n      \u003C\u002Frouter-link>\n    \u003C\u002Fli>\n    \u003C!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" src=\".\u002Fentities-menu.component.ts\">\u003C\u002Fscript>\n\n",[10503],{"type":20,"tag":185,"props":10504,"children":10505},{"__ignoreMap":8},[10506,10521,10536,10564,10603,10630,10677,10692,10707,10714,10729,10744,10751],{"type":20,"tag":189,"props":10507,"children":10508},{"class":191,"line":192},[10509,10513,10517],{"type":20,"tag":189,"props":10510,"children":10511},{"style":196},[10512],{"type":29,"value":4451},{"type":20,"tag":189,"props":10514,"children":10515},{"style":2490},[10516],{"type":29,"value":4456},{"type":20,"tag":189,"props":10518,"children":10519},{"style":196},[10520],{"type":29,"value":4461},{"type":20,"tag":189,"props":10522,"children":10523},{"class":191,"line":202},[10524,10528,10532],{"type":20,"tag":189,"props":10525,"children":10526},{"style":196},[10527],{"type":29,"value":4469},{"type":20,"tag":189,"props":10529,"children":10530},{"style":2490},[10531],{"type":29,"value":4474},{"type":20,"tag":189,"props":10533,"children":10534},{"style":196},[10535],{"type":29,"value":4461},{"type":20,"tag":189,"props":10537,"children":10538},{"class":191,"line":217},[10539,10543,10547,10551,10555,10560],{"type":20,"tag":189,"props":10540,"children":10541},{"style":196},[10542],{"type":29,"value":4486},{"type":20,"tag":189,"props":10544,"children":10545},{"style":2490},[10546],{"type":29,"value":71},{"type":20,"tag":189,"props":10548,"children":10549},{"style":1215},[10550],{"type":29,"value":4914},{"type":20,"tag":189,"props":10552,"children":10553},{"style":196},[10554],{"type":29,"value":4565},{"type":20,"tag":189,"props":10556,"children":10557},{"style":1221},[10558],{"type":29,"value":10559},"\"{ active: $route.path === '\u002Fstore\u002Fproduct' }\"",{"type":20,"tag":189,"props":10561,"children":10562},{"style":196},[10563],{"type":29,"value":4461},{"type":20,"tag":189,"props":10565,"children":10566},{"class":191,"line":231},[10567,10571,10575,10579,10583,10587,10591,10595,10599],{"type":20,"tag":189,"props":10568,"children":10569},{"style":196},[10570],{"type":29,"value":4978},{"type":20,"tag":189,"props":10572,"children":10573},{"style":2490},[10574],{"type":29,"value":6166},{"type":20,"tag":189,"props":10576,"children":10577},{"style":1215},[10578],{"type":29,"value":6171},{"type":20,"tag":189,"props":10580,"children":10581},{"style":196},[10582],{"type":29,"value":4565},{"type":20,"tag":189,"props":10584,"children":10585},{"style":1221},[10586],{"type":29,"value":10316},{"type":20,"tag":189,"props":10588,"children":10589},{"style":1215},[10590],{"type":29,"value":4957},{"type":20,"tag":189,"props":10592,"children":10593},{"style":196},[10594],{"type":29,"value":4565},{"type":20,"tag":189,"props":10596,"children":10597},{"style":1221},[10598],{"type":29,"value":5145},{"type":20,"tag":189,"props":10600,"children":10601},{"style":196},[10602],{"type":29,"value":4461},{"type":20,"tag":189,"props":10604,"children":10605},{"class":191,"line":245},[10606,10610,10614,10618,10622,10626],{"type":20,"tag":189,"props":10607,"children":10608},{"style":196},[10609],{"type":29,"value":5022},{"type":20,"tag":189,"props":10611,"children":10612},{"style":2490},[10613],{"type":29,"value":5027},{"type":20,"tag":189,"props":10615,"children":10616},{"style":1215},[10617],{"type":29,"value":5192},{"type":20,"tag":189,"props":10619,"children":10620},{"style":196},[10621],{"type":29,"value":4565},{"type":20,"tag":189,"props":10623,"children":10624},{"style":1221},[10625],{"type":29,"value":10344},{"type":20,"tag":189,"props":10627,"children":10628},{"style":196},[10629],{"type":29,"value":5206},{"type":20,"tag":189,"props":10631,"children":10632},{"class":191,"line":259},[10633,10637,10641,10645,10649,10653,10657,10661,10665,10669,10673],{"type":20,"tag":189,"props":10634,"children":10635},{"style":196},[10636],{"type":29,"value":5022},{"type":20,"tag":189,"props":10638,"children":10639},{"style":2490},[10640],{"type":29,"value":189},{"type":20,"tag":189,"props":10642,"children":10643},{"style":1215},[10644],{"type":29,"value":4957},{"type":20,"tag":189,"props":10646,"children":10647},{"style":196},[10648],{"type":29,"value":4565},{"type":20,"tag":189,"props":10650,"children":10651},{"style":1221},[10652],{"type":29,"value":5230},{"type":20,"tag":189,"props":10654,"children":10655},{"style":1215},[10656],{"type":29,"value":10364},{"type":20,"tag":189,"props":10658,"children":10659},{"style":196},[10660],{"type":29,"value":4565},{"type":20,"tag":189,"props":10662,"children":10663},{"style":1221},[10664],{"type":29,"value":10373},{"type":20,"tag":189,"props":10666,"children":10667},{"style":196},[10668],{"type":29,"value":4589},{"type":20,"tag":189,"props":10670,"children":10671},{"style":2490},[10672],{"type":29,"value":189},{"type":20,"tag":189,"props":10674,"children":10675},{"style":196},[10676],{"type":29,"value":4461},{"type":20,"tag":189,"props":10678,"children":10679},{"class":191,"line":272},[10680,10684,10688],{"type":20,"tag":189,"props":10681,"children":10682},{"style":196},[10683],{"type":29,"value":5067},{"type":20,"tag":189,"props":10685,"children":10686},{"style":2490},[10687],{"type":29,"value":6166},{"type":20,"tag":189,"props":10689,"children":10690},{"style":196},[10691],{"type":29,"value":4461},{"type":20,"tag":189,"props":10693,"children":10694},{"class":191,"line":286},[10695,10699,10703],{"type":20,"tag":189,"props":10696,"children":10697},{"style":196},[10698],{"type":29,"value":5083},{"type":20,"tag":189,"props":10700,"children":10701},{"style":2490},[10702],{"type":29,"value":71},{"type":20,"tag":189,"props":10704,"children":10705},{"style":196},[10706],{"type":29,"value":4461},{"type":20,"tag":189,"props":10708,"children":10709},{"class":191,"line":300},[10710],{"type":20,"tag":189,"props":10711,"children":10712},{"style":1993},[10713],{"type":29,"value":10408},{"type":20,"tag":189,"props":10715,"children":10716},{"class":191,"line":314},[10717,10721,10725],{"type":20,"tag":189,"props":10718,"children":10719},{"style":196},[10720],{"type":29,"value":4512},{"type":20,"tag":189,"props":10722,"children":10723},{"style":2490},[10724],{"type":29,"value":4474},{"type":20,"tag":189,"props":10726,"children":10727},{"style":196},[10728],{"type":29,"value":4461},{"type":20,"tag":189,"props":10730,"children":10731},{"class":191,"line":328},[10732,10736,10740],{"type":20,"tag":189,"props":10733,"children":10734},{"style":196},[10735],{"type":29,"value":4528},{"type":20,"tag":189,"props":10737,"children":10738},{"style":2490},[10739],{"type":29,"value":4456},{"type":20,"tag":189,"props":10741,"children":10742},{"style":196},[10743],{"type":29,"value":4461},{"type":20,"tag":189,"props":10745,"children":10746},{"class":191,"line":342},[10747],{"type":20,"tag":189,"props":10748,"children":10749},{"emptyLinePlaceholder":397},[10750],{"type":29,"value":400},{"type":20,"tag":189,"props":10752,"children":10753},{"class":191,"line":356},[10754,10758,10762,10766,10770,10774,10778,10782,10786,10790,10794],{"type":20,"tag":189,"props":10755,"children":10756},{"style":196},[10757],{"type":29,"value":4451},{"type":20,"tag":189,"props":10759,"children":10760},{"style":2490},[10761],{"type":29,"value":4555},{"type":20,"tag":189,"props":10763,"children":10764},{"style":1215},[10765],{"type":29,"value":4560},{"type":20,"tag":189,"props":10767,"children":10768},{"style":196},[10769],{"type":29,"value":4565},{"type":20,"tag":189,"props":10771,"children":10772},{"style":1221},[10773],{"type":29,"value":4570},{"type":20,"tag":189,"props":10775,"children":10776},{"style":1215},[10777],{"type":29,"value":4575},{"type":20,"tag":189,"props":10779,"children":10780},{"style":196},[10781],{"type":29,"value":4565},{"type":20,"tag":189,"props":10783,"children":10784},{"style":1221},[10785],{"type":29,"value":10481},{"type":20,"tag":189,"props":10787,"children":10788},{"style":196},[10789],{"type":29,"value":4589},{"type":20,"tag":189,"props":10791,"children":10792},{"style":2490},[10793],{"type":29,"value":4555},{"type":20,"tag":189,"props":10795,"children":10796},{"style":196},[10797],{"type":29,"value":4461},{"type":20,"tag":21,"props":10799,"children":10800},{},[10801],{"type":29,"value":10802},"This ensures that active items are highlighted, and it makes use of\nrouter-link to configure routing and handle the active state.",{"type":20,"tag":21,"props":10804,"children":10805},{},[10806],{"type":29,"value":10807},"Note, we need to restart the back-end for the Store microservice for\nthis to take effect. Navigate to the store folder and run mvnw.",{"type":20,"tag":21,"props":10809,"children":10810},{},[10811],{"type":29,"value":10812},"Repeat above for the other microservice -- demoapp.",{"type":20,"tag":21,"props":10814,"children":10815},{},[10816],{"type":29,"value":10817},"Now, we need to add the following section to the sidemenu file to\ndisplay the microservice menu items:",{"type":20,"tag":178,"props":10819,"children":10821},{"className":4437,"code":10820,"language":4439,"meta":8,"style":8},"      \u003C!-- Micro Frontends Entities menu -->\n      \u003Cli>\n        \u003Cdiv class=\"menu-item-parent\"@click=\"toggleEntities\">\n          \u003Cfont-awesome-icon class=\"jva-icon\" icon=\"folder\">\n          \u003Cspan class=\"nav-item\">Entities\u003C\u002Fspan>\n          \u003Cfont-awesome-icon class=\"jva-icon-toggle\" :icon=\"entitiesIcon\" @click=\"toggleEntities\">\n        \u003C\u002Fdiv>\n        \u003Cspan class=\"tooltip\">Entities\u003C\u002Fspan>\n      \u003C\u002Fli>\n      \u003Cdiv v-show=\"entitiesVisible\">\n        \u003Cdemoapp-entities-menu\n:is-active=\"isActive\">\u003C\u002Fdemoapp-entities-menu>\n        \u003Cstore-menu :is-active=\"isActive\">\u003C\u002Fstore-menu>\n      \u003C\u002Fdiv>\n",[10822],{"type":20,"tag":185,"props":10823,"children":10824},{"__ignoreMap":8},[10825,10833,10849,10892,10933,10969,11022,11038,11073,11089,11118,11130,11160,11197],{"type":20,"tag":189,"props":10826,"children":10827},{"class":191,"line":192},[10828],{"type":20,"tag":189,"props":10829,"children":10830},{"style":1993},[10831],{"type":29,"value":10832},"      \u003C!-- Micro Frontends Entities menu -->\n",{"type":20,"tag":189,"props":10834,"children":10835},{"class":191,"line":202},[10836,10841,10845],{"type":20,"tag":189,"props":10837,"children":10838},{"style":196},[10839],{"type":29,"value":10840},"      \u003C",{"type":20,"tag":189,"props":10842,"children":10843},{"style":2490},[10844],{"type":29,"value":71},{"type":20,"tag":189,"props":10846,"children":10847},{"style":196},[10848],{"type":29,"value":4461},{"type":20,"tag":189,"props":10850,"children":10851},{"class":191,"line":217},[10852,10857,10861,10865,10869,10874,10879,10883,10888],{"type":20,"tag":189,"props":10853,"children":10854},{"style":196},[10855],{"type":29,"value":10856},"        \u003C",{"type":20,"tag":189,"props":10858,"children":10859},{"style":2490},[10860],{"type":29,"value":4474},{"type":20,"tag":189,"props":10862,"children":10863},{"style":1215},[10864],{"type":29,"value":4957},{"type":20,"tag":189,"props":10866,"children":10867},{"style":196},[10868],{"type":29,"value":4565},{"type":20,"tag":189,"props":10870,"children":10871},{"style":1221},[10872],{"type":29,"value":10873},"\"menu-item-parent\"",{"type":20,"tag":189,"props":10875,"children":10876},{"style":1215},[10877],{"type":29,"value":10878},"@click",{"type":20,"tag":189,"props":10880,"children":10881},{"style":196},[10882],{"type":29,"value":4565},{"type":20,"tag":189,"props":10884,"children":10885},{"style":1221},[10886],{"type":29,"value":10887},"\"toggleEntities\"",{"type":20,"tag":189,"props":10889,"children":10890},{"style":196},[10891],{"type":29,"value":4461},{"type":20,"tag":189,"props":10893,"children":10894},{"class":191,"line":231},[10895,10900,10904,10908,10912,10916,10920,10924,10929],{"type":20,"tag":189,"props":10896,"children":10897},{"style":196},[10898],{"type":29,"value":10899},"          \u003C",{"type":20,"tag":189,"props":10901,"children":10902},{"style":2490},[10903],{"type":29,"value":5027},{"type":20,"tag":189,"props":10905,"children":10906},{"style":1215},[10907],{"type":29,"value":4957},{"type":20,"tag":189,"props":10909,"children":10910},{"style":196},[10911],{"type":29,"value":4565},{"type":20,"tag":189,"props":10913,"children":10914},{"style":1221},[10915],{"type":29,"value":5040},{"type":20,"tag":189,"props":10917,"children":10918},{"style":1215},[10919],{"type":29,"value":5192},{"type":20,"tag":189,"props":10921,"children":10922},{"style":196},[10923],{"type":29,"value":4565},{"type":20,"tag":189,"props":10925,"children":10926},{"style":1221},[10927],{"type":29,"value":10928},"\"folder\"",{"type":20,"tag":189,"props":10930,"children":10931},{"style":196},[10932],{"type":29,"value":4461},{"type":20,"tag":189,"props":10934,"children":10935},{"class":191,"line":245},[10936,10940,10944,10948,10952,10956,10961,10965],{"type":20,"tag":189,"props":10937,"children":10938},{"style":196},[10939],{"type":29,"value":10899},{"type":20,"tag":189,"props":10941,"children":10942},{"style":2490},[10943],{"type":29,"value":189},{"type":20,"tag":189,"props":10945,"children":10946},{"style":1215},[10947],{"type":29,"value":4957},{"type":20,"tag":189,"props":10949,"children":10950},{"style":196},[10951],{"type":29,"value":4565},{"type":20,"tag":189,"props":10953,"children":10954},{"style":1221},[10955],{"type":29,"value":5230},{"type":20,"tag":189,"props":10957,"children":10958},{"style":196},[10959],{"type":29,"value":10960},">Entities\u003C\u002F",{"type":20,"tag":189,"props":10962,"children":10963},{"style":2490},[10964],{"type":29,"value":189},{"type":20,"tag":189,"props":10966,"children":10967},{"style":196},[10968],{"type":29,"value":4461},{"type":20,"tag":189,"props":10970,"children":10971},{"class":191,"line":259},[10972,10976,10980,10984,10988,10993,10997,11001,11006,11010,11014,11018],{"type":20,"tag":189,"props":10973,"children":10974},{"style":196},[10975],{"type":29,"value":10899},{"type":20,"tag":189,"props":10977,"children":10978},{"style":2490},[10979],{"type":29,"value":5027},{"type":20,"tag":189,"props":10981,"children":10982},{"style":1215},[10983],{"type":29,"value":4957},{"type":20,"tag":189,"props":10985,"children":10986},{"style":196},[10987],{"type":29,"value":4565},{"type":20,"tag":189,"props":10989,"children":10990},{"style":1221},[10991],{"type":29,"value":10992},"\"jva-icon-toggle\"",{"type":20,"tag":189,"props":10994,"children":10995},{"style":1215},[10996],{"type":29,"value":5045},{"type":20,"tag":189,"props":10998,"children":10999},{"style":196},[11000],{"type":29,"value":4565},{"type":20,"tag":189,"props":11002,"children":11003},{"style":1221},[11004],{"type":29,"value":11005},"\"entitiesIcon\"",{"type":20,"tag":189,"props":11007,"children":11008},{"style":1215},[11009],{"type":29,"value":5150},{"type":20,"tag":189,"props":11011,"children":11012},{"style":196},[11013],{"type":29,"value":4565},{"type":20,"tag":189,"props":11015,"children":11016},{"style":1221},[11017],{"type":29,"value":10887},{"type":20,"tag":189,"props":11019,"children":11020},{"style":196},[11021],{"type":29,"value":4461},{"type":20,"tag":189,"props":11023,"children":11024},{"class":191,"line":272},[11025,11030,11034],{"type":20,"tag":189,"props":11026,"children":11027},{"style":196},[11028],{"type":29,"value":11029},"        \u003C\u002F",{"type":20,"tag":189,"props":11031,"children":11032},{"style":2490},[11033],{"type":29,"value":4474},{"type":20,"tag":189,"props":11035,"children":11036},{"style":196},[11037],{"type":29,"value":4461},{"type":20,"tag":189,"props":11039,"children":11040},{"class":191,"line":286},[11041,11045,11049,11053,11057,11061,11065,11069],{"type":20,"tag":189,"props":11042,"children":11043},{"style":196},[11044],{"type":29,"value":10856},{"type":20,"tag":189,"props":11046,"children":11047},{"style":2490},[11048],{"type":29,"value":189},{"type":20,"tag":189,"props":11050,"children":11051},{"style":1215},[11052],{"type":29,"value":4957},{"type":20,"tag":189,"props":11054,"children":11055},{"style":196},[11056],{"type":29,"value":4565},{"type":20,"tag":189,"props":11058,"children":11059},{"style":1221},[11060],{"type":29,"value":5283},{"type":20,"tag":189,"props":11062,"children":11063},{"style":196},[11064],{"type":29,"value":10960},{"type":20,"tag":189,"props":11066,"children":11067},{"style":2490},[11068],{"type":29,"value":189},{"type":20,"tag":189,"props":11070,"children":11071},{"style":196},[11072],{"type":29,"value":4461},{"type":20,"tag":189,"props":11074,"children":11075},{"class":191,"line":300},[11076,11081,11085],{"type":20,"tag":189,"props":11077,"children":11078},{"style":196},[11079],{"type":29,"value":11080},"      \u003C\u002F",{"type":20,"tag":189,"props":11082,"children":11083},{"style":2490},[11084],{"type":29,"value":71},{"type":20,"tag":189,"props":11086,"children":11087},{"style":196},[11088],{"type":29,"value":4461},{"type":20,"tag":189,"props":11090,"children":11091},{"class":191,"line":314},[11092,11096,11100,11105,11109,11114],{"type":20,"tag":189,"props":11093,"children":11094},{"style":196},[11095],{"type":29,"value":10840},{"type":20,"tag":189,"props":11097,"children":11098},{"style":2490},[11099],{"type":29,"value":4474},{"type":20,"tag":189,"props":11101,"children":11102},{"style":1215},[11103],{"type":29,"value":11104}," v-show",{"type":20,"tag":189,"props":11106,"children":11107},{"style":196},[11108],{"type":29,"value":4565},{"type":20,"tag":189,"props":11110,"children":11111},{"style":1221},[11112],{"type":29,"value":11113},"\"entitiesVisible\"",{"type":20,"tag":189,"props":11115,"children":11116},{"style":196},[11117],{"type":29,"value":4461},{"type":20,"tag":189,"props":11119,"children":11120},{"class":191,"line":328},[11121,11125],{"type":20,"tag":189,"props":11122,"children":11123},{"style":196},[11124],{"type":29,"value":10856},{"type":20,"tag":189,"props":11126,"children":11127},{"style":2490},[11128],{"type":29,"value":11129},"demoapp-entities-menu\n",{"type":20,"tag":189,"props":11131,"children":11132},{"class":191,"line":342},[11133,11138,11142,11147,11151,11156],{"type":20,"tag":189,"props":11134,"children":11135},{"style":1215},[11136],{"type":29,"value":11137},":is-active",{"type":20,"tag":189,"props":11139,"children":11140},{"style":196},[11141],{"type":29,"value":4565},{"type":20,"tag":189,"props":11143,"children":11144},{"style":1221},[11145],{"type":29,"value":11146},"\"isActive\"",{"type":20,"tag":189,"props":11148,"children":11149},{"style":196},[11150],{"type":29,"value":4589},{"type":20,"tag":189,"props":11152,"children":11153},{"style":2490},[11154],{"type":29,"value":11155},"demoapp-entities-menu",{"type":20,"tag":189,"props":11157,"children":11158},{"style":196},[11159],{"type":29,"value":4461},{"type":20,"tag":189,"props":11161,"children":11162},{"class":191,"line":356},[11163,11167,11172,11177,11181,11185,11189,11193],{"type":20,"tag":189,"props":11164,"children":11165},{"style":196},[11166],{"type":29,"value":10856},{"type":20,"tag":189,"props":11168,"children":11169},{"style":2490},[11170],{"type":29,"value":11171},"store-menu",{"type":20,"tag":189,"props":11173,"children":11174},{"style":1215},[11175],{"type":29,"value":11176}," :is-active",{"type":20,"tag":189,"props":11178,"children":11179},{"style":196},[11180],{"type":29,"value":4565},{"type":20,"tag":189,"props":11182,"children":11183},{"style":1221},[11184],{"type":29,"value":11146},{"type":20,"tag":189,"props":11186,"children":11187},{"style":196},[11188],{"type":29,"value":4589},{"type":20,"tag":189,"props":11190,"children":11191},{"style":2490},[11192],{"type":29,"value":11171},{"type":20,"tag":189,"props":11194,"children":11195},{"style":196},[11196],{"type":29,"value":4461},{"type":20,"tag":189,"props":11198,"children":11199},{"class":191,"line":375},[11200,11204,11208],{"type":20,"tag":189,"props":11201,"children":11202},{"style":196},[11203],{"type":29,"value":11080},{"type":20,"tag":189,"props":11205,"children":11206},{"style":2490},[11207],{"type":29,"value":4474},{"type":20,"tag":189,"props":11209,"children":11210},{"style":196},[11211],{"type":29,"value":4461},{"type":20,"tag":21,"props":11213,"children":11214},{},[11215,11217,11220],{"type":29,"value":11216},"At this point, the application should look like this:",{"type":20,"tag":1485,"props":11218,"children":11219},{},[],{"type":20,"tag":34,"props":11221,"children":11224},{"alt":8,"height":11222,"src":11223,"width":1242},286,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage35.png",[],{"type":20,"tag":21,"props":11226,"children":11227},{},[11228],{"type":20,"tag":25,"props":11229,"children":11230},{},[11231],{"type":29,"value":143},{"type":20,"tag":21,"props":11233,"children":11234},{},[11235],{"type":29,"value":11236},"In this milestone we add the basic admin features available to a\nstandard Jhipster application back to the menu structure. We also add a\nlog out button and add a footer. Refer to the code in the git repo for\ndetails on implementing this.",{"type":20,"tag":21,"props":11238,"children":11239},{},[11240],{"type":20,"tag":25,"props":11241,"children":11242},{},[11243],{"type":29,"value":148},{"type":20,"tag":21,"props":11245,"children":11246},{},[11247],{"type":29,"value":11248},"We can delete the jhi-navbar folder as we no longer need it.",{"type":20,"tag":21,"props":11250,"children":11251},{},[11252],{"type":20,"tag":34,"props":11253,"children":11257},{"alt":8,"height":11254,"src":11255,"width":11256},367,"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage36.png",353,[],{"type":20,"tag":21,"props":11259,"children":11260},{},[11261],{"type":29,"value":11262},"After completing all the mile-stones our application looks like this:",{"type":20,"tag":21,"props":11264,"children":11265},{},[11266],{"type":20,"tag":34,"props":11267,"children":11269},{"alt":8,"height":6789,"src":11268,"width":1242},"\u002Fimages\u002Fblog\u002FBuildingAJhipsterVueAdmin\u002Fimage37.png",[],{"type":20,"tag":21,"props":11271,"children":11272},{},[11273],{"type":29,"value":11274},"Using this as basis, we will add common UI components that are typically\nfound in a front-end Admin scaffolding application.",{"type":20,"tag":4813,"props":11276,"children":11277},{},[11278],{"type":29,"value":11279},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":8,"searchDepth":202,"depth":202,"links":11281},[],"markdown","content:blog:BuildingAJhipsterVueAdmin:BuildingAJhipsterVueAdmin.md","content","blog\u002FBuildingAJhipsterVueAdmin\u002FBuildingAJhipsterVueAdmin.md","blog\u002FBuildingAJhipsterVueAdmin\u002FBuildingAJhipsterVueAdmin","md",{"_path":11289,"_dir":11290,"_draft":7,"_partial":7,"_locale":8,"title":11291,"description":11292,"date":11293,"cover":11294,"tags":11295,"body":11297,"_type":11282,"_id":12386,"_source":11284,"_file":12387,"_stem":12388,"_extension":11287},"\u002Fblog\u002Fgettingstartedpasdevlopment\u002Fgettingstartedpasdevlopment","gettingstartedpasdevlopment","Getting Started with Progress Application Server Development","Tutorial on developing a PAS application with Progress OpenEdge","2024-07-06","GettingStartedPASDevlopment\u002Fimage1.png",[11296],"Progress OpenEdge",{"type":17,"children":11298,"toc":12384},[11299,11306,11314,11319,11378,11385,11390,11397,11402,11411,11419,11424,11432,11437,11445,11452,11457,11466,11471,11479,11484,11493,11500,11505,11513,11518,11527,11532,11541,11546,11554,11559,11566,11571,11580,11585,11593,11598,11607,11612,11621,11626,11634,11639,11646,11651,11660,11665,11674,11679,11688,11696,11701,11709,11714,11723,11728,11736,11741,11746,11754,11762,11767,11775,11780,11789,11794,11844,11852,11857,11866,11871,11879,11884,12052,12057,12065,12070,12078,12086,12091,12367,12372,12380],{"type":20,"tag":21,"props":11300,"children":11301},{},[11302],{"type":20,"tag":25,"props":11303,"children":11304},{},[11305],{"type":29,"value":11291},{"type":20,"tag":21,"props":11307,"children":11308},{},[11309],{"type":20,"tag":34,"props":11310,"children":11313},{"alt":8,"height":11311,"src":11312,"width":11311},200,"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage1.png",[],{"type":20,"tag":21,"props":11315,"children":11316},{},[11317],{"type":29,"value":11318},"The Progress Application Server (PAS) provides Web server support for\nProgress applications. In this tutorial I will demonstrate how to create\na very basic PAS application from scratch in version 12.1 of Progress\nOpenEdge. This will involve the following steps:",{"type":20,"tag":11320,"props":11321,"children":11322},"ol",{},[11323,11328,11333,11338,11343,11348,11353,11358,11363,11368,11373],{"type":20,"tag":71,"props":11324,"children":11325},{},[11326],{"type":29,"value":11327},"Create a Workspace",{"type":20,"tag":71,"props":11329,"children":11330},{},[11331],{"type":29,"value":11332},"Create a Client project",{"type":20,"tag":71,"props":11334,"children":11335},{},[11336],{"type":29,"value":11337},"Create a database",{"type":20,"tag":71,"props":11339,"children":11340},{},[11341],{"type":29,"value":11342},"Create a database server",{"type":20,"tag":71,"props":11344,"children":11345},{},[11346],{"type":29,"value":11347},"Create an App Server Instance",{"type":20,"tag":71,"props":11349,"children":11350},{},[11351],{"type":29,"value":11352},"Create a Server project",{"type":20,"tag":71,"props":11354,"children":11355},{},[11356],{"type":29,"value":11357},"Link the database to the server project",{"type":20,"tag":71,"props":11359,"children":11360},{},[11361],{"type":29,"value":11362},"Link the database to the App Server",{"type":20,"tag":71,"props":11364,"children":11365},{},[11366],{"type":29,"value":11367},"Create a server program",{"type":20,"tag":71,"props":11369,"children":11370},{},[11371],{"type":29,"value":11372},"Publish the server program",{"type":20,"tag":71,"props":11374,"children":11375},{},[11376],{"type":29,"value":11377},"Create a client program",{"type":20,"tag":21,"props":11379,"children":11380},{},[11381],{"type":20,"tag":25,"props":11382,"children":11383},{},[11384],{"type":29,"value":11327},{"type":20,"tag":21,"props":11386,"children":11387},{},[11388],{"type":29,"value":11389},"Open developer studio -- the next window will display:",{"type":20,"tag":21,"props":11391,"children":11392},{},[11393],{"type":20,"tag":34,"props":11394,"children":11396},{"alt":8,"height":2442,"src":11395,"width":1242},"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage2.png",[],{"type":20,"tag":21,"props":11398,"children":11399},{},[11400],{"type":29,"value":11401},"In the window above I created a new workspace named \"OETutorials\". Click\non \"Launch\" to continue. Progress Developer Studio opens to the welcome\nscreen:",{"type":20,"tag":21,"props":11403,"children":11404},{},[11405],{"type":20,"tag":34,"props":11406,"children":11410},{"alt":8,"height":11407,"src":11408,"width":11409},350,"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage3.png",462,[],{"type":20,"tag":21,"props":11412,"children":11413},{},[11414],{"type":20,"tag":25,"props":11415,"children":11416},{},[11417],{"type":29,"value":11418},"Create a Client Project",{"type":20,"tag":21,"props":11420,"children":11421},{},[11422],{"type":29,"value":11423},"We will be using a basic client\u002Fserver two-tiered architecture in this\ntutorial. First, we create the client project by selecting File -> New\n-> OpenEdge Project:",{"type":20,"tag":21,"props":11425,"children":11426},{},[11427],{"type":20,"tag":34,"props":11428,"children":11431},{"alt":8,"height":11429,"src":11430,"width":1242},580,"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage4.png",[],{"type":20,"tag":21,"props":11433,"children":11434},{},[11435],{"type":29,"value":11436},"Enter \"clientBasic\" as the project name. Select the bottom tab \"General\"\nand select the \"OpenEdge Basic\" radio button. Click on Finish:",{"type":20,"tag":21,"props":11438,"children":11439},{},[11440],{"type":20,"tag":34,"props":11441,"children":11444},{"alt":8,"height":11442,"src":11443,"width":1240},366,"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage5.png",[],{"type":20,"tag":21,"props":11446,"children":11447},{},[11448],{"type":20,"tag":25,"props":11449,"children":11450},{},[11451],{"type":29,"value":11337},{"type":20,"tag":21,"props":11453,"children":11454},{},[11455],{"type":29,"value":11456},"In this section we will create a database. First, change the perspective\nto DB Navigator by selecting Window -> Perspective -> Open Perspective\n-> DB Navigator. The IDE changes to display the following views:",{"type":20,"tag":21,"props":11458,"children":11459},{},[11460],{"type":20,"tag":34,"props":11461,"children":11465},{"alt":8,"height":11462,"src":11463,"width":11464},329,"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage6.png",513,[],{"type":20,"tag":21,"props":11467,"children":11468},{},[11469],{"type":29,"value":11470},"In the Connections view, select the dropdown to the left and click on\n\"Create OpenEdge Database\":",{"type":20,"tag":21,"props":11472,"children":11473},{},[11474],{"type":20,"tag":34,"props":11475,"children":11478},{"alt":8,"height":9011,"src":11476,"width":11477},"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage7.png",396,[],{"type":20,"tag":21,"props":11480,"children":11481},{},[11482],{"type":29,"value":11483},"On the next window enter a path and file name for the database, and\nselect the option to start with a copy of the Sports2020 database:",{"type":20,"tag":21,"props":11485,"children":11486},{},[11487],{"type":20,"tag":34,"props":11488,"children":11492},{"alt":8,"height":11489,"src":11490,"width":11491},278,"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage8.png",373,[],{"type":20,"tag":21,"props":11494,"children":11495},{},[11496],{"type":20,"tag":25,"props":11497,"children":11498},{},[11499],{"type":29,"value":11342},{"type":20,"tag":21,"props":11501,"children":11502},{},[11503],{"type":29,"value":11504},"In this section we will create a database server for the database\ncreated in the previous step. First, open up OpenEdge Explorer, by click\non the icon in the toolbar:",{"type":20,"tag":21,"props":11506,"children":11507},{},[11508],{"type":20,"tag":34,"props":11509,"children":11512},{"alt":8,"height":11510,"src":11511,"width":1242},343,"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage9.png",[],{"type":20,"tag":21,"props":11514,"children":11515},{},[11516],{"type":29,"value":11517},"Log in, and click on Resources -> Database to create a new database\nserver:",{"type":20,"tag":21,"props":11519,"children":11520},{},[11521],{"type":20,"tag":34,"props":11522,"children":11526},{"alt":8,"height":11523,"src":11524,"width":11525},369,"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage10.png",535,[],{"type":20,"tag":21,"props":11528,"children":11529},{},[11530],{"type":29,"value":11531},"On the next screen, enter the following details to create the database\nserver:",{"type":20,"tag":21,"props":11533,"children":11534},{},[11535],{"type":20,"tag":34,"props":11536,"children":11540},{"alt":8,"height":11537,"src":11538,"width":11539},428,"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage11.png",394,[],{"type":20,"tag":21,"props":11542,"children":11543},{},[11544],{"type":29,"value":11545},"On the next screen click on the button to start the database.",{"type":20,"tag":21,"props":11547,"children":11548},{},[11549],{"type":20,"tag":25,"props":11550,"children":11551},{},[11552],{"type":29,"value":11553},"Create a PAS OE instance",{"type":20,"tag":21,"props":11555,"children":11556},{},[11557],{"type":29,"value":11558},"The next step is to create an instance of the PAS OE Application server.\nFirst, change perspectives to \"Server\": Window -> Perspective -> Open\nPerspective -> OpenEdge Server. Server views will be added:",{"type":20,"tag":21,"props":11560,"children":11561},{},[11562],{"type":20,"tag":34,"props":11563,"children":11565},{"alt":8,"height":4232,"src":11564,"width":1240},"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage12.png",[],{"type":20,"tag":21,"props":11567,"children":11568},{},[11569],{"type":29,"value":11570},"Click on the hyperlink to create a new server:",{"type":20,"tag":21,"props":11572,"children":11573},{},[11574],{"type":20,"tag":34,"props":11575,"children":11579},{"alt":8,"height":11576,"src":11577,"width":11578},381,"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage13.png",411,[],{"type":20,"tag":21,"props":11581,"children":11582},{},[11583],{"type":29,"value":11584},"On the next screen, click on configure to set up the OpenEdge Explorer\nOptions:",{"type":20,"tag":21,"props":11586,"children":11587},{},[11588],{"type":20,"tag":34,"props":11589,"children":11592},{"alt":8,"height":11491,"src":11590,"width":11591},"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage14.png",410,[],{"type":20,"tag":21,"props":11594,"children":11595},{},[11596],{"type":29,"value":11597},"Click on Edit to configure OpenEdge Explorer:",{"type":20,"tag":21,"props":11599,"children":11600},{},[11601],{"type":20,"tag":34,"props":11602,"children":11606},{"alt":8,"height":11603,"src":11604,"width":11605},290,"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage15.png",437,[],{"type":20,"tag":21,"props":11608,"children":11609},{},[11610],{"type":29,"value":11611},"Enter the correct password and test the connection to make sure it works\nas intended:",{"type":20,"tag":21,"props":11613,"children":11614},{},[11615],{"type":20,"tag":34,"props":11616,"children":11620},{"alt":8,"height":11617,"src":11618,"width":11619},349,"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage16.png",430,[],{"type":20,"tag":21,"props":11622,"children":11623},{},[11624],{"type":29,"value":11625},"The \"Define a new Progress Application Server for OpenEdge\" screen will\nbe updated as follows:",{"type":20,"tag":21,"props":11627,"children":11628},{},[11629],{"type":20,"tag":34,"props":11630,"children":11633},{"alt":8,"height":11631,"src":11632,"width":4842},377,"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage17.png",[],{"type":20,"tag":21,"props":11635,"children":11636},{},[11637],{"type":29,"value":11638},"Click on finish to add the server to your workspace.",{"type":20,"tag":21,"props":11640,"children":11641},{},[11642],{"type":20,"tag":25,"props":11643,"children":11644},{},[11645],{"type":29,"value":11352},{"type":20,"tag":21,"props":11647,"children":11648},{},[11649],{"type":29,"value":11650},"In this section we will create the server-side project. The Application\nserver will execute code located here and pass the results to the\nclient. Create the server project by selecting File -> New -> OpenEdge\nProject:",{"type":20,"tag":21,"props":11652,"children":11653},{},[11654],{"type":20,"tag":34,"props":11655,"children":11659},{"alt":8,"height":11656,"src":11657,"width":11658},375,"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage18.png",387,[],{"type":20,"tag":21,"props":11661,"children":11662},{},[11663],{"type":29,"value":11664},"Name the project \"ServerBasic\" and on the \"Server\" tab select \"APSV\" to\ncreate an App Server transport. Accept the default on the next screen.\nOn the screen after that the server we created above will be selected:",{"type":20,"tag":21,"props":11666,"children":11667},{},[11668],{"type":20,"tag":34,"props":11669,"children":11673},{"alt":8,"height":11670,"src":11671,"width":11672},388,"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage19.png",398,[],{"type":20,"tag":21,"props":11675,"children":11676},{},[11677],{"type":29,"value":11678},"Accept the default PROPATH on the following screen and click on \"Next\".\nOn the following screen click on the \"Configure database connections\"\nscreen to link the database to the project:",{"type":20,"tag":21,"props":11680,"children":11681},{},[11682],{"type":20,"tag":34,"props":11683,"children":11687},{"alt":8,"height":11684,"src":11685,"width":11686},475,"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage20.png",488,[],{"type":20,"tag":21,"props":11689,"children":11690},{},[11691],{"type":20,"tag":25,"props":11692,"children":11693},{},[11694],{"type":29,"value":11695},"Link the database to the Server Project",{"type":20,"tag":21,"props":11697,"children":11698},{},[11699],{"type":29,"value":11700},"Continuing from the previous step, the database connections screen will\ndisplay as follows:",{"type":20,"tag":21,"props":11702,"children":11703},{},[11704],{"type":20,"tag":34,"props":11705,"children":11708},{"alt":8,"height":11254,"src":11706,"width":11707},"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage21.png",476,[],{"type":20,"tag":21,"props":11710,"children":11711},{},[11712],{"type":29,"value":11713},"Click on \"New\" and enter the configuration details as per the screen\nbelow. Make sure to test the connection:",{"type":20,"tag":21,"props":11715,"children":11716},{},[11717],{"type":20,"tag":34,"props":11718,"children":11722},{"alt":8,"height":11719,"src":11720,"width":11721},455,"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage22.png",478,[],{"type":20,"tag":21,"props":11724,"children":11725},{},[11726],{"type":29,"value":11727},"Click on next and accept the defaults to add a SQL connection:",{"type":20,"tag":21,"props":11729,"children":11730},{},[11731],{"type":20,"tag":34,"props":11732,"children":11735},{"alt":8,"height":11733,"src":11734,"width":11707},444,"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage23.png",[],{"type":20,"tag":21,"props":11737,"children":11738},{},[11739],{"type":29,"value":11740},"On the following screen uncheck the option to auto-start the database,\nas it will already have been started. Click on next and apply. Check the\ndatabase connection just created to complete this task.",{"type":20,"tag":21,"props":11742,"children":11743},{},[11744],{"type":29,"value":11745},"The DB Structure view will now list the newly added database, and the DB\nDetails view can be used to obtain additional information on the\ndatabase, including functionality to preview table data:",{"type":20,"tag":21,"props":11747,"children":11748},{},[11749],{"type":20,"tag":34,"props":11750,"children":11753},{"alt":8,"height":9583,"src":11751,"width":11752},"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage24.png",567,[],{"type":20,"tag":21,"props":11755,"children":11756},{},[11757],{"type":20,"tag":25,"props":11758,"children":11759},{},[11760],{"type":29,"value":11761},"Link the database to the Application Server",{"type":20,"tag":21,"props":11763,"children":11764},{},[11765],{"type":29,"value":11766},"In the previous step, we have connected the database to our project. We\nalso need to configure our Application Server (PAS) to connect to the\ndatabase. In the \"Servers\" view, double-click on the Application Server\nto view the following screen:",{"type":20,"tag":21,"props":11768,"children":11769},{},[11770],{"type":20,"tag":34,"props":11771,"children":11774},{"alt":8,"height":11772,"src":11773,"width":1242},380,"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage25.png",[],{"type":20,"tag":21,"props":11776,"children":11777},{},[11778],{"type":29,"value":11779},"Under the Publishing heading, be sure to select the option not to\npublish automatically. Then click on the \"Open launch configuration\"\ntab:",{"type":20,"tag":21,"props":11781,"children":11782},{},[11783],{"type":20,"tag":34,"props":11784,"children":11788},{"alt":8,"height":11785,"src":11786,"width":11787},505,"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage26.png",532,[],{"type":20,"tag":21,"props":11790,"children":11791},{},[11792],{"type":29,"value":11793},"Click on the \"Startup\" tab, and be sure to enter the database connection\nparameters in the \"Agent startup parameters\" field:",{"type":20,"tag":178,"props":11795,"children":11797},{"className":1203,"code":11796,"language":1205,"meta":8,"style":8},"-T \"C:\\OpenEdge_12_1\\WRK\\oepas1\u002Ftemp\" -db \"C:\\OpenEdge_12_1\\WRK\\sports2020\" -H localhost -S 21002\n",[11798],{"type":20,"tag":185,"props":11799,"children":11800},{"__ignoreMap":8},[11801],{"type":20,"tag":189,"props":11802,"children":11803},{"class":191,"line":192},[11804,11809,11814,11819,11824,11829,11834,11839],{"type":20,"tag":189,"props":11805,"children":11806},{"style":1215},[11807],{"type":29,"value":11808},"-T",{"type":20,"tag":189,"props":11810,"children":11811},{"style":1221},[11812],{"type":29,"value":11813}," \"C:\\OpenEdge_12_1\\WRK\\oepas1\u002Ftemp\"",{"type":20,"tag":189,"props":11815,"children":11816},{"style":1184},[11817],{"type":29,"value":11818}," -db",{"type":20,"tag":189,"props":11820,"children":11821},{"style":1221},[11822],{"type":29,"value":11823}," \"C:\\OpenEdge_12_1\\WRK\\sports2020\"",{"type":20,"tag":189,"props":11825,"children":11826},{"style":1184},[11827],{"type":29,"value":11828}," -H",{"type":20,"tag":189,"props":11830,"children":11831},{"style":1221},[11832],{"type":29,"value":11833}," localhost",{"type":20,"tag":189,"props":11835,"children":11836},{"style":1184},[11837],{"type":29,"value":11838}," -S",{"type":20,"tag":189,"props":11840,"children":11841},{"style":1184},[11842],{"type":29,"value":11843}," 21002\n",{"type":20,"tag":21,"props":11845,"children":11846},{},[11847],{"type":20,"tag":25,"props":11848,"children":11849},{},[11850],{"type":29,"value":11851},"Create a Server program",{"type":20,"tag":21,"props":11853,"children":11854},{},[11855],{"type":29,"value":11856},"Now we need to create a server program that will expose some\nfunctionality to our client. We will create a program that will return\nthe name for a given item number. Right click on the server project, and\nselect New -> ABL Procedure:",{"type":20,"tag":21,"props":11858,"children":11859},{},[11860],{"type":20,"tag":34,"props":11861,"children":11865},{"alt":8,"height":11862,"src":11863,"width":11864},223,"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage27.png",459,[],{"type":20,"tag":21,"props":11867,"children":11868},{},[11869],{"type":29,"value":11870},"Enter the name of the file and click on Finish:",{"type":20,"tag":21,"props":11872,"children":11873},{},[11874],{"type":20,"tag":34,"props":11875,"children":11878},{"alt":8,"height":11876,"src":11877,"width":1242},384,"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage28.png",[],{"type":20,"tag":21,"props":11880,"children":11881},{},[11882],{"type":29,"value":11883},"Enter the following code and save the program:",{"type":20,"tag":178,"props":11885,"children":11889},{"className":11886,"code":11887,"language":11888,"meta":8,"style":8},"language-progress shiki shiki-themes github-dark","\u002F******************\n * getItemName.p  *\n ******************\u002F\n\ndefine input parameter pIntItemNum as integer no-undo.\n\ndefine output parameter pChrName as character no-undo.\n\nfind first item no-lock\n\nwhere Item.ItemNum = pIntItemNum\n\nno-error.\n\nif available item\n\nthen pChrName = item.ItemName.\n\nelse\n\npChrName = \\\"ERROR\\\". \n","progress",[11890],{"type":20,"tag":185,"props":11891,"children":11892},{"__ignoreMap":8},[11893,11901,11909,11917,11924,11932,11939,11947,11954,11962,11969,11977,11984,11992,11999,12007,12014,12022,12029,12037,12044],{"type":20,"tag":189,"props":11894,"children":11895},{"class":191,"line":192},[11896],{"type":20,"tag":189,"props":11897,"children":11898},{},[11899],{"type":29,"value":11900},"\u002F******************\n",{"type":20,"tag":189,"props":11902,"children":11903},{"class":191,"line":202},[11904],{"type":20,"tag":189,"props":11905,"children":11906},{},[11907],{"type":29,"value":11908}," * getItemName.p  *\n",{"type":20,"tag":189,"props":11910,"children":11911},{"class":191,"line":217},[11912],{"type":20,"tag":189,"props":11913,"children":11914},{},[11915],{"type":29,"value":11916}," ******************\u002F\n",{"type":20,"tag":189,"props":11918,"children":11919},{"class":191,"line":231},[11920],{"type":20,"tag":189,"props":11921,"children":11922},{"emptyLinePlaceholder":397},[11923],{"type":29,"value":400},{"type":20,"tag":189,"props":11925,"children":11926},{"class":191,"line":245},[11927],{"type":20,"tag":189,"props":11928,"children":11929},{},[11930],{"type":29,"value":11931},"define input parameter pIntItemNum as integer no-undo.\n",{"type":20,"tag":189,"props":11933,"children":11934},{"class":191,"line":259},[11935],{"type":20,"tag":189,"props":11936,"children":11937},{"emptyLinePlaceholder":397},[11938],{"type":29,"value":400},{"type":20,"tag":189,"props":11940,"children":11941},{"class":191,"line":272},[11942],{"type":20,"tag":189,"props":11943,"children":11944},{},[11945],{"type":29,"value":11946},"define output parameter pChrName as character no-undo.\n",{"type":20,"tag":189,"props":11948,"children":11949},{"class":191,"line":286},[11950],{"type":20,"tag":189,"props":11951,"children":11952},{"emptyLinePlaceholder":397},[11953],{"type":29,"value":400},{"type":20,"tag":189,"props":11955,"children":11956},{"class":191,"line":300},[11957],{"type":20,"tag":189,"props":11958,"children":11959},{},[11960],{"type":29,"value":11961},"find first item no-lock\n",{"type":20,"tag":189,"props":11963,"children":11964},{"class":191,"line":314},[11965],{"type":20,"tag":189,"props":11966,"children":11967},{"emptyLinePlaceholder":397},[11968],{"type":29,"value":400},{"type":20,"tag":189,"props":11970,"children":11971},{"class":191,"line":328},[11972],{"type":20,"tag":189,"props":11973,"children":11974},{},[11975],{"type":29,"value":11976},"where Item.ItemNum = pIntItemNum\n",{"type":20,"tag":189,"props":11978,"children":11979},{"class":191,"line":342},[11980],{"type":20,"tag":189,"props":11981,"children":11982},{"emptyLinePlaceholder":397},[11983],{"type":29,"value":400},{"type":20,"tag":189,"props":11985,"children":11986},{"class":191,"line":356},[11987],{"type":20,"tag":189,"props":11988,"children":11989},{},[11990],{"type":29,"value":11991},"no-error.\n",{"type":20,"tag":189,"props":11993,"children":11994},{"class":191,"line":375},[11995],{"type":20,"tag":189,"props":11996,"children":11997},{"emptyLinePlaceholder":397},[11998],{"type":29,"value":400},{"type":20,"tag":189,"props":12000,"children":12001},{"class":191,"line":384},[12002],{"type":20,"tag":189,"props":12003,"children":12004},{},[12005],{"type":29,"value":12006},"if available item\n",{"type":20,"tag":189,"props":12008,"children":12009},{"class":191,"line":393},[12010],{"type":20,"tag":189,"props":12011,"children":12012},{"emptyLinePlaceholder":397},[12013],{"type":29,"value":400},{"type":20,"tag":189,"props":12015,"children":12016},{"class":191,"line":403},[12017],{"type":20,"tag":189,"props":12018,"children":12019},{},[12020],{"type":29,"value":12021},"then pChrName = item.ItemName.\n",{"type":20,"tag":189,"props":12023,"children":12024},{"class":191,"line":411},[12025],{"type":20,"tag":189,"props":12026,"children":12027},{"emptyLinePlaceholder":397},[12028],{"type":29,"value":400},{"type":20,"tag":189,"props":12030,"children":12031},{"class":191,"line":423},[12032],{"type":20,"tag":189,"props":12033,"children":12034},{},[12035],{"type":29,"value":12036},"else\n",{"type":20,"tag":189,"props":12038,"children":12039},{"class":191,"line":436},[12040],{"type":20,"tag":189,"props":12041,"children":12042},{"emptyLinePlaceholder":397},[12043],{"type":29,"value":400},{"type":20,"tag":189,"props":12045,"children":12046},{"class":191,"line":449},[12047],{"type":20,"tag":189,"props":12048,"children":12049},{},[12050],{"type":29,"value":12051},"pChrName = \\\"ERROR\\\".\n",{"type":20,"tag":21,"props":12053,"children":12054},{},[12055],{"type":29,"value":12056},"This code defines an input parameter and uses it\nto retrieve an item name from the database. Once retrieved it assigns it\nto the output parameter that is returned to the client.",{"type":20,"tag":21,"props":12058,"children":12059},{},[12060],{"type":20,"tag":25,"props":12061,"children":12062},{},[12063],{"type":29,"value":12064},"Publish the Server program",{"type":20,"tag":21,"props":12066,"children":12067},{},[12068],{"type":29,"value":12069},"Next, we will publish the server program we created above. To do this,\nselect the \"Servers\" view and right-click on the oepas1 instance, select\n\"Publish\" from the context menu:",{"type":20,"tag":21,"props":12071,"children":12072},{},[12073],{"type":20,"tag":34,"props":12074,"children":12077},{"alt":8,"height":12075,"src":12076,"width":11631},435,"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage29.png",[],{"type":20,"tag":21,"props":12079,"children":12080},{},[12081],{"type":20,"tag":25,"props":12082,"children":12083},{},[12084],{"type":29,"value":12085},"Create a Client program",{"type":20,"tag":21,"props":12087,"children":12088},{},[12089],{"type":29,"value":12090},"Here we will create a program to test our App Server. Create a new ABL\nprocedure following the instructions above, and name it ItemUI.p. Update\nit with the following code listing:",{"type":20,"tag":178,"props":12092,"children":12094},{"className":11886,"code":12093,"language":11888,"meta":8,"style":8},"\u002F******************\n * getItemName.p  *\n ******************\u002F\n\ndefine variable chrConnectionParam as character no-undo.\n\ndefine variable logIsConnected as logical no-undo.\n\ndefine variable appHandle as handle.\n\ndefine variable chrItemName as character no-undo label \"Item Name:\"\nformat \"x(30)\".\n\ndefine variable intItemNum as integer no-undo.\n\n\u002F\u002F Set connection details\n\nassign chrConnectionParam = \\\"-URL http:\u002F\u002Flocalhost:8810\u002Fapsv\\\".\n\n\u002F\u002F Set App Server connection\n\ncreate server appHandle.\n\nlogIsConnected = appHandle:connect(chrConnectionParam).\n\n\u002F\u002F Set Item Number\n\nassign intItemNum = 2.\n\nrun getItemName.p on appHandle\n\n(input intItemNum,\n\noutput chrItemName ).\n\ndisplay chrItemName.\n\n",[12095],{"type":20,"tag":185,"props":12096,"children":12097},{"__ignoreMap":8},[12098,12105,12112,12119,12126,12134,12141,12149,12156,12164,12171,12179,12187,12194,12202,12209,12217,12224,12232,12239,12247,12254,12262,12269,12277,12284,12292,12299,12307,12314,12322,12329,12337,12344,12352,12359],{"type":20,"tag":189,"props":12099,"children":12100},{"class":191,"line":192},[12101],{"type":20,"tag":189,"props":12102,"children":12103},{},[12104],{"type":29,"value":11900},{"type":20,"tag":189,"props":12106,"children":12107},{"class":191,"line":202},[12108],{"type":20,"tag":189,"props":12109,"children":12110},{},[12111],{"type":29,"value":11908},{"type":20,"tag":189,"props":12113,"children":12114},{"class":191,"line":217},[12115],{"type":20,"tag":189,"props":12116,"children":12117},{},[12118],{"type":29,"value":11916},{"type":20,"tag":189,"props":12120,"children":12121},{"class":191,"line":231},[12122],{"type":20,"tag":189,"props":12123,"children":12124},{"emptyLinePlaceholder":397},[12125],{"type":29,"value":400},{"type":20,"tag":189,"props":12127,"children":12128},{"class":191,"line":245},[12129],{"type":20,"tag":189,"props":12130,"children":12131},{},[12132],{"type":29,"value":12133},"define variable chrConnectionParam as character no-undo.\n",{"type":20,"tag":189,"props":12135,"children":12136},{"class":191,"line":259},[12137],{"type":20,"tag":189,"props":12138,"children":12139},{"emptyLinePlaceholder":397},[12140],{"type":29,"value":400},{"type":20,"tag":189,"props":12142,"children":12143},{"class":191,"line":272},[12144],{"type":20,"tag":189,"props":12145,"children":12146},{},[12147],{"type":29,"value":12148},"define variable logIsConnected as logical no-undo.\n",{"type":20,"tag":189,"props":12150,"children":12151},{"class":191,"line":286},[12152],{"type":20,"tag":189,"props":12153,"children":12154},{"emptyLinePlaceholder":397},[12155],{"type":29,"value":400},{"type":20,"tag":189,"props":12157,"children":12158},{"class":191,"line":300},[12159],{"type":20,"tag":189,"props":12160,"children":12161},{},[12162],{"type":29,"value":12163},"define variable appHandle as handle.\n",{"type":20,"tag":189,"props":12165,"children":12166},{"class":191,"line":314},[12167],{"type":20,"tag":189,"props":12168,"children":12169},{"emptyLinePlaceholder":397},[12170],{"type":29,"value":400},{"type":20,"tag":189,"props":12172,"children":12173},{"class":191,"line":328},[12174],{"type":20,"tag":189,"props":12175,"children":12176},{},[12177],{"type":29,"value":12178},"define variable chrItemName as character no-undo label \"Item Name:\"\n",{"type":20,"tag":189,"props":12180,"children":12181},{"class":191,"line":342},[12182],{"type":20,"tag":189,"props":12183,"children":12184},{},[12185],{"type":29,"value":12186},"format \"x(30)\".\n",{"type":20,"tag":189,"props":12188,"children":12189},{"class":191,"line":356},[12190],{"type":20,"tag":189,"props":12191,"children":12192},{"emptyLinePlaceholder":397},[12193],{"type":29,"value":400},{"type":20,"tag":189,"props":12195,"children":12196},{"class":191,"line":375},[12197],{"type":20,"tag":189,"props":12198,"children":12199},{},[12200],{"type":29,"value":12201},"define variable intItemNum as integer no-undo.\n",{"type":20,"tag":189,"props":12203,"children":12204},{"class":191,"line":384},[12205],{"type":20,"tag":189,"props":12206,"children":12207},{"emptyLinePlaceholder":397},[12208],{"type":29,"value":400},{"type":20,"tag":189,"props":12210,"children":12211},{"class":191,"line":393},[12212],{"type":20,"tag":189,"props":12213,"children":12214},{},[12215],{"type":29,"value":12216},"\u002F\u002F Set connection details\n",{"type":20,"tag":189,"props":12218,"children":12219},{"class":191,"line":403},[12220],{"type":20,"tag":189,"props":12221,"children":12222},{"emptyLinePlaceholder":397},[12223],{"type":29,"value":400},{"type":20,"tag":189,"props":12225,"children":12226},{"class":191,"line":411},[12227],{"type":20,"tag":189,"props":12228,"children":12229},{},[12230],{"type":29,"value":12231},"assign chrConnectionParam = \\\"-URL http:\u002F\u002Flocalhost:8810\u002Fapsv\\\".\n",{"type":20,"tag":189,"props":12233,"children":12234},{"class":191,"line":423},[12235],{"type":20,"tag":189,"props":12236,"children":12237},{"emptyLinePlaceholder":397},[12238],{"type":29,"value":400},{"type":20,"tag":189,"props":12240,"children":12241},{"class":191,"line":436},[12242],{"type":20,"tag":189,"props":12243,"children":12244},{},[12245],{"type":29,"value":12246},"\u002F\u002F Set App Server connection\n",{"type":20,"tag":189,"props":12248,"children":12249},{"class":191,"line":449},[12250],{"type":20,"tag":189,"props":12251,"children":12252},{"emptyLinePlaceholder":397},[12253],{"type":29,"value":400},{"type":20,"tag":189,"props":12255,"children":12256},{"class":191,"line":462},[12257],{"type":20,"tag":189,"props":12258,"children":12259},{},[12260],{"type":29,"value":12261},"create server appHandle.\n",{"type":20,"tag":189,"props":12263,"children":12264},{"class":191,"line":475},[12265],{"type":20,"tag":189,"props":12266,"children":12267},{"emptyLinePlaceholder":397},[12268],{"type":29,"value":400},{"type":20,"tag":189,"props":12270,"children":12271},{"class":191,"line":487},[12272],{"type":20,"tag":189,"props":12273,"children":12274},{},[12275],{"type":29,"value":12276},"logIsConnected = appHandle:connect(chrConnectionParam).\n",{"type":20,"tag":189,"props":12278,"children":12279},{"class":191,"line":499},[12280],{"type":20,"tag":189,"props":12281,"children":12282},{"emptyLinePlaceholder":397},[12283],{"type":29,"value":400},{"type":20,"tag":189,"props":12285,"children":12286},{"class":191,"line":511},[12287],{"type":20,"tag":189,"props":12288,"children":12289},{},[12290],{"type":29,"value":12291},"\u002F\u002F Set Item Number\n",{"type":20,"tag":189,"props":12293,"children":12294},{"class":191,"line":523},[12295],{"type":20,"tag":189,"props":12296,"children":12297},{"emptyLinePlaceholder":397},[12298],{"type":29,"value":400},{"type":20,"tag":189,"props":12300,"children":12301},{"class":191,"line":536},[12302],{"type":20,"tag":189,"props":12303,"children":12304},{},[12305],{"type":29,"value":12306},"assign intItemNum = 2.\n",{"type":20,"tag":189,"props":12308,"children":12309},{"class":191,"line":550},[12310],{"type":20,"tag":189,"props":12311,"children":12312},{"emptyLinePlaceholder":397},[12313],{"type":29,"value":400},{"type":20,"tag":189,"props":12315,"children":12316},{"class":191,"line":562},[12317],{"type":20,"tag":189,"props":12318,"children":12319},{},[12320],{"type":29,"value":12321},"run getItemName.p on appHandle\n",{"type":20,"tag":189,"props":12323,"children":12324},{"class":191,"line":574},[12325],{"type":20,"tag":189,"props":12326,"children":12327},{"emptyLinePlaceholder":397},[12328],{"type":29,"value":400},{"type":20,"tag":189,"props":12330,"children":12331},{"class":191,"line":582},[12332],{"type":20,"tag":189,"props":12333,"children":12334},{},[12335],{"type":29,"value":12336},"(input intItemNum,\n",{"type":20,"tag":189,"props":12338,"children":12339},{"class":191,"line":591},[12340],{"type":20,"tag":189,"props":12341,"children":12342},{"emptyLinePlaceholder":397},[12343],{"type":29,"value":400},{"type":20,"tag":189,"props":12345,"children":12346},{"class":191,"line":599},[12347],{"type":20,"tag":189,"props":12348,"children":12349},{},[12350],{"type":29,"value":12351},"output chrItemName ).\n",{"type":20,"tag":189,"props":12353,"children":12354},{"class":191,"line":607},[12355],{"type":20,"tag":189,"props":12356,"children":12357},{"emptyLinePlaceholder":397},[12358],{"type":29,"value":400},{"type":20,"tag":189,"props":12360,"children":12361},{"class":191,"line":615},[12362],{"type":20,"tag":189,"props":12363,"children":12364},{},[12365],{"type":29,"value":12366},"display chrItemName.\n",{"type":20,"tag":21,"props":12368,"children":12369},{},[12370],{"type":29,"value":12371},"In this code section we do the following: First, we define connection\nparameters that we will use to set up a connection to the App Server.\nThen we define a variable to pass into our server application, and\nanother variable to hold the result. Next, we set up our connection\ndetails, and use it to establish a connection with the App Server. Next,\nwe call the getItemName program on the AppServer. Finally, we used the\nobtained result and display it to our end-users:",{"type":20,"tag":21,"props":12373,"children":12374},{},[12375],{"type":20,"tag":34,"props":12376,"children":12379},{"alt":8,"height":9374,"src":12377,"width":12378},"\u002Fimages\u002Fblog\u002FGettingStartedPASDevlopment\u002Fimage30.png",214,[],{"type":20,"tag":4813,"props":12381,"children":12382},{},[12383],{"type":29,"value":11279},{"title":8,"searchDepth":202,"depth":202,"links":12385},[],"content:blog:GettingStartedPASDevlopment:GettingStartedPASDevlopment.md","blog\u002FGettingStartedPASDevlopment\u002FGettingStartedPASDevlopment.md","blog\u002FGettingStartedPASDevlopment\u002FGettingStartedPASDevlopment",{"_path":12390,"_dir":12391,"_draft":7,"_partial":7,"_locale":8,"title":12392,"description":12393,"date":11293,"cover":12394,"tags":12395,"body":12397,"_type":11282,"_id":13194,"_source":11284,"_file":13195,"_stem":13196,"_extension":11287},"\u002Fblog\u002Fintegratingscalaintospringboot\u002Fintegratingscalaintospringboot","integratingscalaintospringboot","Integrating Scala into a Spring Boot Project","Tutorial on how to integrate scala in a Java project","Scala101\u002Fimage1.png",[12396],"Spring Boot",{"type":17,"children":12398,"toc":13192},[12399,12406,12411,12416,12424,12429,12437,12442,12449,12454,12462,12467,12472,12488,12493,12576,12589,12926,12931,12936,12944,12949,13020,13025,13175,13180,13188],{"type":20,"tag":21,"props":12400,"children":12401},{},[12402],{"type":20,"tag":25,"props":12403,"children":12404},{},[12405],{"type":29,"value":12392},{"type":20,"tag":21,"props":12407,"children":12408},{},[12409],{"type":29,"value":12410},"In this tutorial I will demonstrate how to integrate Scala into a Spring\nBoot Project.",{"type":20,"tag":21,"props":12412,"children":12413},{},[12414],{"type":29,"value":12415},"Click on File->New->Project. Select 'Spring Initializr' and fill in\nthe project details as follows:",{"type":20,"tag":21,"props":12417,"children":12418},{},[12419],{"type":20,"tag":34,"props":12420,"children":12423},{"alt":8,"height":12421,"src":12422,"width":1242},491,"\u002Fimages\u002Fblog\u002FIntegratingScalaIntoSpringBoot\u002Fimage1.png",[],{"type":20,"tag":21,"props":12425,"children":12426},{},[12427],{"type":29,"value":12428},"For this project I have selected DevTools, Lombok, Web and Thymeleaf as\ninitial dependencies:",{"type":20,"tag":21,"props":12430,"children":12431},{},[12432],{"type":20,"tag":34,"props":12433,"children":12436},{"alt":8,"height":12434,"src":12435,"width":1242},450,"\u002Fimages\u002Fblog\u002FIntegratingScalaIntoSpringBoot\u002Fimage2.png",[],{"type":20,"tag":21,"props":12438,"children":12439},{},[12440],{"type":29,"value":12441},"Configure your project to support Scala by right-clicking on the project\nand selecting 'Add Framework Support'.",{"type":20,"tag":21,"props":12443,"children":12444},{},[12445],{"type":20,"tag":34,"props":12446,"children":12448},{"alt":8,"height":4428,"src":12447,"width":1242},"\u002Fimages\u002Fblog\u002FIntegratingScalaIntoSpringBoot\u002Fimage3.png",[],{"type":20,"tag":21,"props":12450,"children":12451},{},[12452],{"type":29,"value":12453},"Select Scala:",{"type":20,"tag":21,"props":12455,"children":12456},{},[12457],{"type":20,"tag":34,"props":12458,"children":12461},{"alt":8,"height":12459,"src":12460,"width":1242},518,"\u002Fimages\u002Fblog\u002FIntegratingScalaIntoSpringBoot\u002Fimage4.png",[],{"type":20,"tag":21,"props":12463,"children":12464},{},[12465],{"type":29,"value":12466},"Edit the pom.xml file as follows:",{"type":20,"tag":21,"props":12468,"children":12469},{},[12470],{"type":29,"value":12471},"In the properties section, add:",{"type":20,"tag":178,"props":12473,"children":12477},{"className":12474,"code":12475,"language":12476,"meta":8,"style":8},"language-xml shiki shiki-themes github-dark","\u003Cscala.version>2.12.0\u003C\u002Fscala.version>\n","xml",[12478],{"type":20,"tag":185,"props":12479,"children":12480},{"__ignoreMap":8},[12481],{"type":20,"tag":189,"props":12482,"children":12483},{"class":191,"line":192},[12484],{"type":20,"tag":189,"props":12485,"children":12486},{},[12487],{"type":29,"value":12475},{"type":20,"tag":21,"props":12489,"children":12490},{},[12491],{"type":29,"value":12492},"Add the following dependencies:",{"type":20,"tag":178,"props":12494,"children":12496},{"className":12474,"code":12495,"language":12476,"meta":8,"style":8},"\u003Cdependency>\n  \u003CgroupId>org.scala-lang\u003C\u002FgroupId>\n  \u003CartifactId>scala-library\u003C\u002FartifactId>\n  \u003Cversion>${scala.version}\u003C\u002Fversion>\n\u003C\u002Fdependency>\n\u003Cdependency>\n  \u003CgroupId>org.scala-lang\u003C\u002FgroupId>\n  \u003CartifactId>scala-compiler\u003C\u002FartifactId>\n  \u003Cversion>${scala.version}\u003C\u002Fversion>\n\u003C\u002Fdependency>\n",[12497],{"type":20,"tag":185,"props":12498,"children":12499},{"__ignoreMap":8},[12500,12508,12516,12524,12532,12540,12547,12554,12562,12569],{"type":20,"tag":189,"props":12501,"children":12502},{"class":191,"line":192},[12503],{"type":20,"tag":189,"props":12504,"children":12505},{},[12506],{"type":29,"value":12507},"\u003Cdependency>\n",{"type":20,"tag":189,"props":12509,"children":12510},{"class":191,"line":202},[12511],{"type":20,"tag":189,"props":12512,"children":12513},{},[12514],{"type":29,"value":12515},"  \u003CgroupId>org.scala-lang\u003C\u002FgroupId>\n",{"type":20,"tag":189,"props":12517,"children":12518},{"class":191,"line":217},[12519],{"type":20,"tag":189,"props":12520,"children":12521},{},[12522],{"type":29,"value":12523},"  \u003CartifactId>scala-library\u003C\u002FartifactId>\n",{"type":20,"tag":189,"props":12525,"children":12526},{"class":191,"line":231},[12527],{"type":20,"tag":189,"props":12528,"children":12529},{},[12530],{"type":29,"value":12531},"  \u003Cversion>${scala.version}\u003C\u002Fversion>\n",{"type":20,"tag":189,"props":12533,"children":12534},{"class":191,"line":245},[12535],{"type":20,"tag":189,"props":12536,"children":12537},{},[12538],{"type":29,"value":12539},"\u003C\u002Fdependency>\n",{"type":20,"tag":189,"props":12541,"children":12542},{"class":191,"line":259},[12543],{"type":20,"tag":189,"props":12544,"children":12545},{},[12546],{"type":29,"value":12507},{"type":20,"tag":189,"props":12548,"children":12549},{"class":191,"line":272},[12550],{"type":20,"tag":189,"props":12551,"children":12552},{},[12553],{"type":29,"value":12515},{"type":20,"tag":189,"props":12555,"children":12556},{"class":191,"line":286},[12557],{"type":20,"tag":189,"props":12558,"children":12559},{},[12560],{"type":29,"value":12561},"  \u003CartifactId>scala-compiler\u003C\u002FartifactId>\n",{"type":20,"tag":189,"props":12563,"children":12564},{"class":191,"line":300},[12565],{"type":20,"tag":189,"props":12566,"children":12567},{},[12568],{"type":29,"value":12531},{"type":20,"tag":189,"props":12570,"children":12571},{"class":191,"line":314},[12572],{"type":20,"tag":189,"props":12573,"children":12574},{},[12575],{"type":29,"value":12539},{"type":20,"tag":21,"props":12577,"children":12578},{},[12579,12581,12587],{"type":29,"value":12580},"Replace the existing ",{"type":20,"tag":12582,"props":12583,"children":12584},"em",{},[12585],{"type":29,"value":12586},"Build",{"type":29,"value":12588}," section in pom.xml with the following code:",{"type":20,"tag":178,"props":12590,"children":12592},{"className":12474,"code":12591,"language":12476,"meta":8,"style":8},"\u003Cbuild>\n  \u003Cplugins>\n    \u003Cplugin>\n      \u003CgroupId>org.springframework.boot\u003C\u002FgroupId>\n      \u003CartifactId>spring-boot-maven-plugin\u003C\u002FartifactId>\n     \u003C\u002Fplugin>\n    \u003Cplugin>\n      \u003CgroupId>net.alchim31.maven\u003C\u002FgroupId>\n      \u003CartifactId>scala-maven-plugin\u003C\u002FartifactId>\n      \u003Cversion>3.2.1\u003C\u002Fversion>\n      \u003Cexecutions>\n        \u003Cexecution>\n          \u003Cid>compile-scala\u003C\u002Fid>\n          \u003Cphase>compile\u003C\u002Fphase>\n          \u003Cgoals>\n            \u003Cgoal>add-source\u003C\u002Fgoal>\n            \u003Cgoal>compile\u003C\u002Fgoal>\n          \u003C\u002Fgoals>\n        \u003C\u002Fexecution>\n        \u003Cexecution>\n          \u003Cid>test-compile-scala\u003C\u002Fid>\n          \u003Cphase>test-compile\u003C\u002Fphase>\n          \u003Cgoals>\n            \u003Cgoal>add-source\u003C\u002Fgoal>\n            \u003Cgoal>testCompile\u003C\u002Fgoal>\n          \u003C\u002Fgoals>\n        \u003C\u002Fexecution>\n      \u003C\u002Fexecutions>\n      \u003Cconfiguration>\n        \u003CrecompileMode>incremental\u003C\u002FrecompileMode>\n        \u003CscalaVersion>${scala.version}\u003C\u002FscalaVersion>\n        \u003Cargs>\n          \u003Carg>-deprecation\u003C\u002Farg>\n        \u003C\u002Fargs>\n        \u003CjvmArgs>\n          \u003CjvmArg>-Xms64m\u003C\u002FjvmArg>\n          \u003CjvmArg>-Xmx1024m\u003C\u002FjvmArg>\n        \u003C\u002FjvmArgs>\n       \u003C\u002Fconfiguration>\n    \u003C\u002Fplugin>\n  \u003C\u002Fplugins>\n\u003C\u002Fbuild>\n",[12593],{"type":20,"tag":185,"props":12594,"children":12595},{"__ignoreMap":8},[12596,12604,12612,12620,12628,12636,12644,12651,12659,12667,12675,12683,12691,12699,12707,12715,12723,12731,12739,12747,12754,12762,12770,12777,12784,12792,12799,12806,12814,12822,12830,12838,12846,12854,12862,12870,12878,12886,12894,12902,12910,12918],{"type":20,"tag":189,"props":12597,"children":12598},{"class":191,"line":192},[12599],{"type":20,"tag":189,"props":12600,"children":12601},{},[12602],{"type":29,"value":12603},"\u003Cbuild>\n",{"type":20,"tag":189,"props":12605,"children":12606},{"class":191,"line":202},[12607],{"type":20,"tag":189,"props":12608,"children":12609},{},[12610],{"type":29,"value":12611},"  \u003Cplugins>\n",{"type":20,"tag":189,"props":12613,"children":12614},{"class":191,"line":217},[12615],{"type":20,"tag":189,"props":12616,"children":12617},{},[12618],{"type":29,"value":12619},"    \u003Cplugin>\n",{"type":20,"tag":189,"props":12621,"children":12622},{"class":191,"line":231},[12623],{"type":20,"tag":189,"props":12624,"children":12625},{},[12626],{"type":29,"value":12627},"      \u003CgroupId>org.springframework.boot\u003C\u002FgroupId>\n",{"type":20,"tag":189,"props":12629,"children":12630},{"class":191,"line":245},[12631],{"type":20,"tag":189,"props":12632,"children":12633},{},[12634],{"type":29,"value":12635},"      \u003CartifactId>spring-boot-maven-plugin\u003C\u002FartifactId>\n",{"type":20,"tag":189,"props":12637,"children":12638},{"class":191,"line":259},[12639],{"type":20,"tag":189,"props":12640,"children":12641},{},[12642],{"type":29,"value":12643},"     \u003C\u002Fplugin>\n",{"type":20,"tag":189,"props":12645,"children":12646},{"class":191,"line":272},[12647],{"type":20,"tag":189,"props":12648,"children":12649},{},[12650],{"type":29,"value":12619},{"type":20,"tag":189,"props":12652,"children":12653},{"class":191,"line":286},[12654],{"type":20,"tag":189,"props":12655,"children":12656},{},[12657],{"type":29,"value":12658},"      \u003CgroupId>net.alchim31.maven\u003C\u002FgroupId>\n",{"type":20,"tag":189,"props":12660,"children":12661},{"class":191,"line":300},[12662],{"type":20,"tag":189,"props":12663,"children":12664},{},[12665],{"type":29,"value":12666},"      \u003CartifactId>scala-maven-plugin\u003C\u002FartifactId>\n",{"type":20,"tag":189,"props":12668,"children":12669},{"class":191,"line":314},[12670],{"type":20,"tag":189,"props":12671,"children":12672},{},[12673],{"type":29,"value":12674},"      \u003Cversion>3.2.1\u003C\u002Fversion>\n",{"type":20,"tag":189,"props":12676,"children":12677},{"class":191,"line":328},[12678],{"type":20,"tag":189,"props":12679,"children":12680},{},[12681],{"type":29,"value":12682},"      \u003Cexecutions>\n",{"type":20,"tag":189,"props":12684,"children":12685},{"class":191,"line":342},[12686],{"type":20,"tag":189,"props":12687,"children":12688},{},[12689],{"type":29,"value":12690},"        \u003Cexecution>\n",{"type":20,"tag":189,"props":12692,"children":12693},{"class":191,"line":356},[12694],{"type":20,"tag":189,"props":12695,"children":12696},{},[12697],{"type":29,"value":12698},"          \u003Cid>compile-scala\u003C\u002Fid>\n",{"type":20,"tag":189,"props":12700,"children":12701},{"class":191,"line":375},[12702],{"type":20,"tag":189,"props":12703,"children":12704},{},[12705],{"type":29,"value":12706},"          \u003Cphase>compile\u003C\u002Fphase>\n",{"type":20,"tag":189,"props":12708,"children":12709},{"class":191,"line":384},[12710],{"type":20,"tag":189,"props":12711,"children":12712},{},[12713],{"type":29,"value":12714},"          \u003Cgoals>\n",{"type":20,"tag":189,"props":12716,"children":12717},{"class":191,"line":393},[12718],{"type":20,"tag":189,"props":12719,"children":12720},{},[12721],{"type":29,"value":12722},"            \u003Cgoal>add-source\u003C\u002Fgoal>\n",{"type":20,"tag":189,"props":12724,"children":12725},{"class":191,"line":403},[12726],{"type":20,"tag":189,"props":12727,"children":12728},{},[12729],{"type":29,"value":12730},"            \u003Cgoal>compile\u003C\u002Fgoal>\n",{"type":20,"tag":189,"props":12732,"children":12733},{"class":191,"line":411},[12734],{"type":20,"tag":189,"props":12735,"children":12736},{},[12737],{"type":29,"value":12738},"          \u003C\u002Fgoals>\n",{"type":20,"tag":189,"props":12740,"children":12741},{"class":191,"line":423},[12742],{"type":20,"tag":189,"props":12743,"children":12744},{},[12745],{"type":29,"value":12746},"        \u003C\u002Fexecution>\n",{"type":20,"tag":189,"props":12748,"children":12749},{"class":191,"line":436},[12750],{"type":20,"tag":189,"props":12751,"children":12752},{},[12753],{"type":29,"value":12690},{"type":20,"tag":189,"props":12755,"children":12756},{"class":191,"line":449},[12757],{"type":20,"tag":189,"props":12758,"children":12759},{},[12760],{"type":29,"value":12761},"          \u003Cid>test-compile-scala\u003C\u002Fid>\n",{"type":20,"tag":189,"props":12763,"children":12764},{"class":191,"line":462},[12765],{"type":20,"tag":189,"props":12766,"children":12767},{},[12768],{"type":29,"value":12769},"          \u003Cphase>test-compile\u003C\u002Fphase>\n",{"type":20,"tag":189,"props":12771,"children":12772},{"class":191,"line":475},[12773],{"type":20,"tag":189,"props":12774,"children":12775},{},[12776],{"type":29,"value":12714},{"type":20,"tag":189,"props":12778,"children":12779},{"class":191,"line":487},[12780],{"type":20,"tag":189,"props":12781,"children":12782},{},[12783],{"type":29,"value":12722},{"type":20,"tag":189,"props":12785,"children":12786},{"class":191,"line":499},[12787],{"type":20,"tag":189,"props":12788,"children":12789},{},[12790],{"type":29,"value":12791},"            \u003Cgoal>testCompile\u003C\u002Fgoal>\n",{"type":20,"tag":189,"props":12793,"children":12794},{"class":191,"line":511},[12795],{"type":20,"tag":189,"props":12796,"children":12797},{},[12798],{"type":29,"value":12738},{"type":20,"tag":189,"props":12800,"children":12801},{"class":191,"line":523},[12802],{"type":20,"tag":189,"props":12803,"children":12804},{},[12805],{"type":29,"value":12746},{"type":20,"tag":189,"props":12807,"children":12808},{"class":191,"line":536},[12809],{"type":20,"tag":189,"props":12810,"children":12811},{},[12812],{"type":29,"value":12813},"      \u003C\u002Fexecutions>\n",{"type":20,"tag":189,"props":12815,"children":12816},{"class":191,"line":550},[12817],{"type":20,"tag":189,"props":12818,"children":12819},{},[12820],{"type":29,"value":12821},"      \u003Cconfiguration>\n",{"type":20,"tag":189,"props":12823,"children":12824},{"class":191,"line":562},[12825],{"type":20,"tag":189,"props":12826,"children":12827},{},[12828],{"type":29,"value":12829},"        \u003CrecompileMode>incremental\u003C\u002FrecompileMode>\n",{"type":20,"tag":189,"props":12831,"children":12832},{"class":191,"line":574},[12833],{"type":20,"tag":189,"props":12834,"children":12835},{},[12836],{"type":29,"value":12837},"        \u003CscalaVersion>${scala.version}\u003C\u002FscalaVersion>\n",{"type":20,"tag":189,"props":12839,"children":12840},{"class":191,"line":582},[12841],{"type":20,"tag":189,"props":12842,"children":12843},{},[12844],{"type":29,"value":12845},"        \u003Cargs>\n",{"type":20,"tag":189,"props":12847,"children":12848},{"class":191,"line":591},[12849],{"type":20,"tag":189,"props":12850,"children":12851},{},[12852],{"type":29,"value":12853},"          \u003Carg>-deprecation\u003C\u002Farg>\n",{"type":20,"tag":189,"props":12855,"children":12856},{"class":191,"line":599},[12857],{"type":20,"tag":189,"props":12858,"children":12859},{},[12860],{"type":29,"value":12861},"        \u003C\u002Fargs>\n",{"type":20,"tag":189,"props":12863,"children":12864},{"class":191,"line":607},[12865],{"type":20,"tag":189,"props":12866,"children":12867},{},[12868],{"type":29,"value":12869},"        \u003CjvmArgs>\n",{"type":20,"tag":189,"props":12871,"children":12872},{"class":191,"line":615},[12873],{"type":20,"tag":189,"props":12874,"children":12875},{},[12876],{"type":29,"value":12877},"          \u003CjvmArg>-Xms64m\u003C\u002FjvmArg>\n",{"type":20,"tag":189,"props":12879,"children":12880},{"class":191,"line":627},[12881],{"type":20,"tag":189,"props":12882,"children":12883},{},[12884],{"type":29,"value":12885},"          \u003CjvmArg>-Xmx1024m\u003C\u002FjvmArg>\n",{"type":20,"tag":189,"props":12887,"children":12888},{"class":191,"line":640},[12889],{"type":20,"tag":189,"props":12890,"children":12891},{},[12892],{"type":29,"value":12893},"        \u003C\u002FjvmArgs>\n",{"type":20,"tag":189,"props":12895,"children":12896},{"class":191,"line":652},[12897],{"type":20,"tag":189,"props":12898,"children":12899},{},[12900],{"type":29,"value":12901},"       \u003C\u002Fconfiguration>\n",{"type":20,"tag":189,"props":12903,"children":12904},{"class":191,"line":665},[12905],{"type":20,"tag":189,"props":12906,"children":12907},{},[12908],{"type":29,"value":12909},"    \u003C\u002Fplugin>\n",{"type":20,"tag":189,"props":12911,"children":12912},{"class":191,"line":677},[12913],{"type":20,"tag":189,"props":12914,"children":12915},{},[12916],{"type":29,"value":12917},"  \u003C\u002Fplugins>\n",{"type":20,"tag":189,"props":12919,"children":12920},{"class":191,"line":689},[12921],{"type":20,"tag":189,"props":12922,"children":12923},{},[12924],{"type":29,"value":12925},"\u003C\u002Fbuild>\n",{"type":20,"tag":21,"props":12927,"children":12928},{},[12929],{"type":29,"value":12930},"Create a folder named \"scala\" under src\u002Fmain.",{"type":20,"tag":21,"props":12932,"children":12933},{},[12934],{"type":29,"value":12935},"Right click on the scala folder, and select 'Mark Directory as...' ->\n'Sources Root'",{"type":20,"tag":21,"props":12937,"children":12938},{},[12939],{"type":20,"tag":34,"props":12940,"children":12943},{"alt":8,"height":12941,"src":12942,"width":1242},284,"\u002Fimages\u002Fblog\u002FIntegratingScalaIntoSpringBoot\u002Fimage5.png",[],{"type":20,"tag":21,"props":12945,"children":12946},{},[12947],{"type":29,"value":12948},"Right-click on the scala folder to add a package, and within create a\nscala class:",{"type":20,"tag":178,"props":12950,"children":12954},{"className":12951,"code":12952,"language":12953,"meta":8,"style":8},"language-java shiki shiki-themes github-dark","package io.francoisbotha.sparkbuilder.sc\n \nclass GreetingInScala {\n  def greet(): String = {\n    val greeting = \"Hello from SCALA!!!!\"\n    greeting\n  }\n}\n\n","java",[12955],{"type":20,"tag":185,"props":12956,"children":12957},{"__ignoreMap":8},[12958,12966,12974,12982,12990,12998,13006,13013],{"type":20,"tag":189,"props":12959,"children":12960},{"class":191,"line":192},[12961],{"type":20,"tag":189,"props":12962,"children":12963},{},[12964],{"type":29,"value":12965},"package io.francoisbotha.sparkbuilder.sc\n",{"type":20,"tag":189,"props":12967,"children":12968},{"class":191,"line":202},[12969],{"type":20,"tag":189,"props":12970,"children":12971},{},[12972],{"type":29,"value":12973}," \n",{"type":20,"tag":189,"props":12975,"children":12976},{"class":191,"line":217},[12977],{"type":20,"tag":189,"props":12978,"children":12979},{},[12980],{"type":29,"value":12981},"class GreetingInScala {\n",{"type":20,"tag":189,"props":12983,"children":12984},{"class":191,"line":231},[12985],{"type":20,"tag":189,"props":12986,"children":12987},{},[12988],{"type":29,"value":12989},"  def greet(): String = {\n",{"type":20,"tag":189,"props":12991,"children":12992},{"class":191,"line":245},[12993],{"type":20,"tag":189,"props":12994,"children":12995},{},[12996],{"type":29,"value":12997},"    val greeting = \"Hello from SCALA!!!!\"\n",{"type":20,"tag":189,"props":12999,"children":13000},{"class":191,"line":259},[13001],{"type":20,"tag":189,"props":13002,"children":13003},{},[13004],{"type":29,"value":13005},"    greeting\n",{"type":20,"tag":189,"props":13007,"children":13008},{"class":191,"line":272},[13009],{"type":20,"tag":189,"props":13010,"children":13011},{},[13012],{"type":29,"value":381},{"type":20,"tag":189,"props":13014,"children":13015},{"class":191,"line":286},[13016],{"type":20,"tag":189,"props":13017,"children":13018},{},[13019],{"type":29,"value":390},{"type":20,"tag":21,"props":13021,"children":13022},{},[13023],{"type":29,"value":13024},"Update the SparkBuilderAppliction file as follows:",{"type":20,"tag":178,"props":13026,"children":13028},{"className":12951,"code":13027,"language":12953,"meta":8,"style":8},"package io.francoisbotha.sparkbuilder;\n \nimport io.francoisbotha.sparkbuilder.sc.GreetingInScala;\nimport org.springframework.boot.SpringApplication;\nimport org.springframework.boot.autoconfigure.SpringBootApplication;\n \n@SpringBootApplication\npublic class SparkbuilderApplication {\n \n  public static void main(String[] args) {\n \n    GreetingInScala greetingInScala = new GreetingInScala();\n \n    SpringApplication.run(SparkbuilderApplication.class, args);\n \n    System.out.println(greetingInScala.greet());\n \n  }\n}\n\n",[13029],{"type":20,"tag":185,"props":13030,"children":13031},{"__ignoreMap":8},[13032,13040,13047,13055,13063,13071,13078,13086,13094,13101,13109,13116,13124,13131,13139,13146,13154,13161,13168],{"type":20,"tag":189,"props":13033,"children":13034},{"class":191,"line":192},[13035],{"type":20,"tag":189,"props":13036,"children":13037},{},[13038],{"type":29,"value":13039},"package io.francoisbotha.sparkbuilder;\n",{"type":20,"tag":189,"props":13041,"children":13042},{"class":191,"line":202},[13043],{"type":20,"tag":189,"props":13044,"children":13045},{},[13046],{"type":29,"value":12973},{"type":20,"tag":189,"props":13048,"children":13049},{"class":191,"line":217},[13050],{"type":20,"tag":189,"props":13051,"children":13052},{},[13053],{"type":29,"value":13054},"import io.francoisbotha.sparkbuilder.sc.GreetingInScala;\n",{"type":20,"tag":189,"props":13056,"children":13057},{"class":191,"line":231},[13058],{"type":20,"tag":189,"props":13059,"children":13060},{},[13061],{"type":29,"value":13062},"import org.springframework.boot.SpringApplication;\n",{"type":20,"tag":189,"props":13064,"children":13065},{"class":191,"line":245},[13066],{"type":20,"tag":189,"props":13067,"children":13068},{},[13069],{"type":29,"value":13070},"import org.springframework.boot.autoconfigure.SpringBootApplication;\n",{"type":20,"tag":189,"props":13072,"children":13073},{"class":191,"line":259},[13074],{"type":20,"tag":189,"props":13075,"children":13076},{},[13077],{"type":29,"value":12973},{"type":20,"tag":189,"props":13079,"children":13080},{"class":191,"line":272},[13081],{"type":20,"tag":189,"props":13082,"children":13083},{},[13084],{"type":29,"value":13085},"@SpringBootApplication\n",{"type":20,"tag":189,"props":13087,"children":13088},{"class":191,"line":286},[13089],{"type":20,"tag":189,"props":13090,"children":13091},{},[13092],{"type":29,"value":13093},"public class SparkbuilderApplication {\n",{"type":20,"tag":189,"props":13095,"children":13096},{"class":191,"line":300},[13097],{"type":20,"tag":189,"props":13098,"children":13099},{},[13100],{"type":29,"value":12973},{"type":20,"tag":189,"props":13102,"children":13103},{"class":191,"line":314},[13104],{"type":20,"tag":189,"props":13105,"children":13106},{},[13107],{"type":29,"value":13108},"  public static void main(String[] args) {\n",{"type":20,"tag":189,"props":13110,"children":13111},{"class":191,"line":328},[13112],{"type":20,"tag":189,"props":13113,"children":13114},{},[13115],{"type":29,"value":12973},{"type":20,"tag":189,"props":13117,"children":13118},{"class":191,"line":342},[13119],{"type":20,"tag":189,"props":13120,"children":13121},{},[13122],{"type":29,"value":13123},"    GreetingInScala greetingInScala = new GreetingInScala();\n",{"type":20,"tag":189,"props":13125,"children":13126},{"class":191,"line":356},[13127],{"type":20,"tag":189,"props":13128,"children":13129},{},[13130],{"type":29,"value":12973},{"type":20,"tag":189,"props":13132,"children":13133},{"class":191,"line":375},[13134],{"type":20,"tag":189,"props":13135,"children":13136},{},[13137],{"type":29,"value":13138},"    SpringApplication.run(SparkbuilderApplication.class, args);\n",{"type":20,"tag":189,"props":13140,"children":13141},{"class":191,"line":384},[13142],{"type":20,"tag":189,"props":13143,"children":13144},{},[13145],{"type":29,"value":12973},{"type":20,"tag":189,"props":13147,"children":13148},{"class":191,"line":393},[13149],{"type":20,"tag":189,"props":13150,"children":13151},{},[13152],{"type":29,"value":13153},"    System.out.println(greetingInScala.greet());\n",{"type":20,"tag":189,"props":13155,"children":13156},{"class":191,"line":403},[13157],{"type":20,"tag":189,"props":13158,"children":13159},{},[13160],{"type":29,"value":12973},{"type":20,"tag":189,"props":13162,"children":13163},{"class":191,"line":411},[13164],{"type":20,"tag":189,"props":13165,"children":13166},{},[13167],{"type":29,"value":381},{"type":20,"tag":189,"props":13169,"children":13170},{"class":191,"line":423},[13171],{"type":20,"tag":189,"props":13172,"children":13173},{},[13174],{"type":29,"value":390},{"type":20,"tag":21,"props":13176,"children":13177},{},[13178],{"type":29,"value":13179},"The code section above demonstrates how Scala classes can be integrated\nseamlessly in your Java Spring Boot project. The following is the output\nof running the application:",{"type":20,"tag":21,"props":13181,"children":13182},{},[13183],{"type":20,"tag":34,"props":13184,"children":13187},{"alt":8,"height":13185,"src":13186,"width":1242},330,"\u002Fimages\u002Fblog\u002FIntegratingScalaIntoSpringBoot\u002Fimage6.png",[],{"type":20,"tag":4813,"props":13189,"children":13190},{},[13191],{"type":29,"value":11279},{"title":8,"searchDepth":202,"depth":202,"links":13193},[],"content:blog:IntegratingScalaIntoSpringBoot:IntegratingScalaIntoSpringBoot.md","blog\u002FIntegratingScalaIntoSpringBoot\u002FIntegratingScalaIntoSpringBoot.md","blog\u002FIntegratingScalaIntoSpringBoot\u002FIntegratingScalaIntoSpringBoot",{"_path":13198,"_dir":13199,"_draft":7,"_partial":7,"_locale":8,"title":13200,"description":13201,"date":11293,"cover":13202,"tags":13203,"body":13205,"_type":11282,"_id":14622,"_source":11284,"_file":14623,"_stem":14624,"_extension":11287},"\u002Fblog\u002Fsettingupjenkinsonyourlocalmachine\u002Fsettingupjenkinsonyourlocalmachine","settingupjenkinsonyourlocalmachine","Setting up Jenkins on your local machine","Tutorial on to install and configure Jenkins locally","SettingUpJenkinsOnYourLocalMachine\u002Fimage1.jpg",[13204],"CICD",{"type":17,"children":13206,"toc":14620},[13207,13214,13223,13236,13241,13249,13254,13267,13272,13277,13282,13374,13379,13387,13392,13484,13489,13600,13605,13633,13638,13661,13666,13674,13679,13684,13692,13697,13705,13710,13718,13723,13731,13736,13869,13874,13904,13909,13937,13942,13969,13974,13994,13999,14007,14020,14028,14033,14047,14052,14057,14066,14071,14076,14085,14090,14098,14103,14112,14117,14125,14130,14135,14363,14368,14373,14411,14419,14424,14432,14437,14444,14449,14456,14461,14570,14575,14583,14588,14616],{"type":20,"tag":21,"props":13208,"children":13209},{},[13210],{"type":20,"tag":25,"props":13211,"children":13212},{},[13213],{"type":29,"value":13200},{"type":20,"tag":21,"props":13215,"children":13216},{},[13217],{"type":20,"tag":34,"props":13218,"children":13222},{"alt":8,"height":13219,"src":13220,"width":13221},228,"\u002Fimages\u002Fblog\u002FSettingUpJenkinsOnYourLocalMachine\u002Fimage1.jpg",221,[],{"type":20,"tag":21,"props":13224,"children":13225},{},[13226,13228,13234],{"type":29,"value":13227},"Jenkins is a popular tool for implementing Continuous Integration \u002F\nContinuous Delivery workflows. It can also be useful to automate build\ntasks on your local development machine. In this write-up I will discuss\nthe basics of setting up a Jenkins server on your local machine. There\nare many excellent tutorials available, and this document uses the\nofficial Jenkins tutorial \"Build a Java app with Maven\" (available here:\n",{"type":20,"tag":54,"props":13229,"children":13232},{"href":13230,"rel":13231},"https:\u002F\u002Fjenkins.io\u002Fdoc\u002Ftutorials\u002Fbuild-a-java-app-with-maven\u002F#stopping-and-restarting-jenkins",[58],[13233],{"type":29,"value":13230},{"type":29,"value":13235},"\n) as its base.",{"type":20,"tag":21,"props":13237,"children":13238},{},[13239],{"type":29,"value":13240},"To start off with, I will be using an Ubuntu 19.04 Virtual Machine\nhosted on Virtual Box. ",{"type":20,"tag":21,"props":13242,"children":13243},{},[13244],{"type":20,"tag":25,"props":13245,"children":13246},{},[13247],{"type":29,"value":13248},"Docker",{"type":20,"tag":21,"props":13250,"children":13251},{},[13252],{"type":29,"value":13253},"Docker goes hand-in-hand with any CI\u002FCI Jenkins workflow, and here I\nwill also use Docker to get an instance of Jenkins up and running.",{"type":20,"tag":21,"props":13255,"children":13256},{},[13257,13259,13265],{"type":29,"value":13258},"See this\n(",{"type":20,"tag":54,"props":13260,"children":13263},{"href":13261,"rel":13262},"https:\u002F\u002Fwww.digitalocean.com\u002Fcommunity\u002Ftutorials\u002Fhow-to-install-and-use-docker-on-ubuntu-18-04",[58],[13264],{"type":29,"value":13261},{"type":29,"value":13266},")\nlink for installing Docker on Ubuntu.",{"type":20,"tag":21,"props":13268,"children":13269},{},[13270],{"type":29,"value":13271},"In this tutorial we will be installing Jenkins using a Docker image. It\nis very useful for CI\u002FCD workflows for this Docker image to itself have\naccess to Docker. In order to achieve this, we will map the Docker\nsocket on the host to the container. (Note: This has some security\nimplications, so be sure you fully understand the implications of this\nbefore deploying this configuration to a production environment.)",{"type":20,"tag":21,"props":13273,"children":13274},{},[13275],{"type":29,"value":13276},"In order to map the socket to the container, we will need to be able to\nconfigure the group ownership that the socket is created with. See this\npost (LINK) for more information.",{"type":20,"tag":21,"props":13278,"children":13279},{},[13280],{"type":29,"value":13281},"As a quick reference, the following is a table of useful Docker\ncommands:",{"type":20,"tag":67,"props":13283,"children":13284},{},[13285,13295,13300,13313,13330,13335,13343,13354],{"type":20,"tag":71,"props":13286,"children":13287},{},[13288,13290,13293],{"type":29,"value":13289},"Get general info of your Docker Machine:",{"type":20,"tag":1485,"props":13291,"children":13292},{},[],{"type":29,"value":13294},"\ndocker info",{"type":20,"tag":71,"props":13296,"children":13297},{},[13298],{"type":29,"value":13299},"Get a list of currently installed Docker Images:\ndocker images",{"type":20,"tag":71,"props":13301,"children":13302},{},[13303,13305,13308],{"type":29,"value":13304},"Get a list of running Docker containers:",{"type":20,"tag":1485,"props":13306,"children":13307},{},[],{"type":20,"tag":12582,"props":13309,"children":13310},{},[13311],{"type":29,"value":13312},"docker ps",{"type":20,"tag":71,"props":13314,"children":13315},{},[13316,13318],{"type":29,"value":13317},"Stop a running container:\ndocker stop ",{"type":20,"tag":13319,"props":13320,"children":13321},"container-name",{},[13322,13324],{"type":29,"value":13323},"\n-Start a Docker image from a Docker\ndocker-compose up  ",{"type":20,"tag":13325,"props":13326,"children":13327},"compose",{"file":8},[13328],{"type":29,"value":13329}," (add -d to start it in the background)",{"type":20,"tag":71,"props":13331,"children":13332},{},[13333],{"type":29,"value":13334},"Shut the Docker container that the docker-compose file in the current\nworking directory points to:\ndocker-compose down",{"type":20,"tag":71,"props":13336,"children":13337},{},[13338,13340],{"type":29,"value":13339},"View the logs for a specific container:\ndocker logs -f ",{"type":20,"tag":13319,"props":13341,"children":13342},{},[],{"type":20,"tag":71,"props":13344,"children":13345},{},[13346,13348],{"type":29,"value":13347},"Enter the shell of the Docker container:\ndocker exec -ti ",{"type":20,"tag":13349,"props":13350,"children":13351},"container",{"name":8},[13352],{"type":29,"value":13353}," bash",{"type":20,"tag":71,"props":13355,"children":13356},{},[13357,13359,13363,13365],{"type":29,"value":13358},"Copy a file from the host to a container:\ndocker cp ",{"type":20,"tag":13360,"props":13361,"children":13362},"source",{},[],{"type":29,"value":13364}," ",{"type":20,"tag":13349,"props":13366,"children":13367},{},[13368,13370],{"type":29,"value":13369},":",{"type":20,"tag":13371,"props":13372,"children":13373},"target",{},[],{"type":20,"tag":21,"props":13375,"children":13376},{},[13377],{"type":29,"value":13378},"In your Linux Virtual Machine, create a working folder for your Jenkins\ninstallation. I have created \u002Fhome\u002Fjenkins\u002Fjenkins_wrk for this purpose.\nIn this folder create another folder called volumes, and within it, a\nfolder called jenkins_home. The purpose of this is to create a\npersistent data volume that will be accessible from the Jenkins Docker\nimage.",{"type":20,"tag":21,"props":13380,"children":13381},{},[13382],{"type":20,"tag":25,"props":13383,"children":13384},{},[13385],{"type":29,"value":13386},"Docker Compose",{"type":20,"tag":21,"props":13388,"children":13389},{},[13390],{"type":29,"value":13391},"Inside this folder create a Dockerfile that will be used to pull in a\nJenkins image configured with Blue Ocean and Docker. We will extend it\nby installing Docker Compose:",{"type":20,"tag":178,"props":13393,"children":13397},{"className":13394,"code":13395,"language":13396,"meta":8,"style":8},"language-dockerfile shiki shiki-themes github-dark","FROM jenkinsci\u002Fblueocean\n\nUSER root\n\n# Compose\n\nRUN apk add py-pip && \\\\\n\n    apk add python-dev libffi-dev openssl-dev gcc libc-dev make && \\\\\n\n    pip install docker-compose\n","dockerfile",[13398],{"type":20,"tag":185,"props":13399,"children":13400},{"__ignoreMap":8},[13401,13409,13416,13424,13431,13439,13446,13454,13461,13469,13476],{"type":20,"tag":189,"props":13402,"children":13403},{"class":191,"line":192},[13404],{"type":20,"tag":189,"props":13405,"children":13406},{},[13407],{"type":29,"value":13408},"FROM jenkinsci\u002Fblueocean\n",{"type":20,"tag":189,"props":13410,"children":13411},{"class":191,"line":202},[13412],{"type":20,"tag":189,"props":13413,"children":13414},{"emptyLinePlaceholder":397},[13415],{"type":29,"value":400},{"type":20,"tag":189,"props":13417,"children":13418},{"class":191,"line":217},[13419],{"type":20,"tag":189,"props":13420,"children":13421},{},[13422],{"type":29,"value":13423},"USER root\n",{"type":20,"tag":189,"props":13425,"children":13426},{"class":191,"line":231},[13427],{"type":20,"tag":189,"props":13428,"children":13429},{"emptyLinePlaceholder":397},[13430],{"type":29,"value":400},{"type":20,"tag":189,"props":13432,"children":13433},{"class":191,"line":245},[13434],{"type":20,"tag":189,"props":13435,"children":13436},{},[13437],{"type":29,"value":13438},"# Compose\n",{"type":20,"tag":189,"props":13440,"children":13441},{"class":191,"line":259},[13442],{"type":20,"tag":189,"props":13443,"children":13444},{"emptyLinePlaceholder":397},[13445],{"type":29,"value":400},{"type":20,"tag":189,"props":13447,"children":13448},{"class":191,"line":272},[13449],{"type":20,"tag":189,"props":13450,"children":13451},{},[13452],{"type":29,"value":13453},"RUN apk add py-pip && \\\\\n",{"type":20,"tag":189,"props":13455,"children":13456},{"class":191,"line":286},[13457],{"type":20,"tag":189,"props":13458,"children":13459},{"emptyLinePlaceholder":397},[13460],{"type":29,"value":400},{"type":20,"tag":189,"props":13462,"children":13463},{"class":191,"line":300},[13464],{"type":20,"tag":189,"props":13465,"children":13466},{},[13467],{"type":29,"value":13468},"    apk add python-dev libffi-dev openssl-dev gcc libc-dev make && \\\\\n",{"type":20,"tag":189,"props":13470,"children":13471},{"class":191,"line":314},[13472],{"type":20,"tag":189,"props":13473,"children":13474},{"emptyLinePlaceholder":397},[13475],{"type":29,"value":400},{"type":20,"tag":189,"props":13477,"children":13478},{"class":191,"line":328},[13479],{"type":20,"tag":189,"props":13480,"children":13481},{},[13482],{"type":29,"value":13483},"    pip install docker-compose\n",{"type":20,"tag":21,"props":13485,"children":13486},{},[13487],{"type":29,"value":13488},"Inside the same folder create a Docker Compose file (docker-compose.yml)\nthat will be used to spin up your Jenkins service:",{"type":20,"tag":178,"props":13490,"children":13492},{"className":13394,"code":13491,"language":13396,"meta":8,"style":8},"version: '3'\nservices:\n  jenkins:\n    container_name: jenkins\n    image: jenkinsblueocean\u002Fcompose\n    ports:\n      - \"2000:8080\"                                                                                                                                                                 volumes:\n      - \u002Fhome\u002Fjenkins\u002Fjenkins_wrk\u002Fvolumes\u002Fjenkins_home:\u002Fvar\u002Fjenkins_home\n      - \"\u002Fvar\u002Frun\u002Fdocker.sock:\u002Fvar\u002Frun\u002Fdocker.sock\"\n    networks:\n      - net\nnetworks:\n  net:\n",[13493],{"type":20,"tag":185,"props":13494,"children":13495},{"__ignoreMap":8},[13496,13504,13512,13520,13528,13536,13544,13552,13560,13568,13576,13584,13592],{"type":20,"tag":189,"props":13497,"children":13498},{"class":191,"line":192},[13499],{"type":20,"tag":189,"props":13500,"children":13501},{},[13502],{"type":29,"value":13503},"version: '3'\n",{"type":20,"tag":189,"props":13505,"children":13506},{"class":191,"line":202},[13507],{"type":20,"tag":189,"props":13508,"children":13509},{},[13510],{"type":29,"value":13511},"services:\n",{"type":20,"tag":189,"props":13513,"children":13514},{"class":191,"line":217},[13515],{"type":20,"tag":189,"props":13516,"children":13517},{},[13518],{"type":29,"value":13519},"  jenkins:\n",{"type":20,"tag":189,"props":13521,"children":13522},{"class":191,"line":231},[13523],{"type":20,"tag":189,"props":13524,"children":13525},{},[13526],{"type":29,"value":13527},"    container_name: jenkins\n",{"type":20,"tag":189,"props":13529,"children":13530},{"class":191,"line":245},[13531],{"type":20,"tag":189,"props":13532,"children":13533},{},[13534],{"type":29,"value":13535},"    image: jenkinsblueocean\u002Fcompose\n",{"type":20,"tag":189,"props":13537,"children":13538},{"class":191,"line":259},[13539],{"type":20,"tag":189,"props":13540,"children":13541},{},[13542],{"type":29,"value":13543},"    ports:\n",{"type":20,"tag":189,"props":13545,"children":13546},{"class":191,"line":272},[13547],{"type":20,"tag":189,"props":13548,"children":13549},{},[13550],{"type":29,"value":13551},"      - \"2000:8080\"                                                                                                                                                                 volumes:\n",{"type":20,"tag":189,"props":13553,"children":13554},{"class":191,"line":286},[13555],{"type":20,"tag":189,"props":13556,"children":13557},{},[13558],{"type":29,"value":13559},"      - \u002Fhome\u002Fjenkins\u002Fjenkins_wrk\u002Fvolumes\u002Fjenkins_home:\u002Fvar\u002Fjenkins_home\n",{"type":20,"tag":189,"props":13561,"children":13562},{"class":191,"line":300},[13563],{"type":20,"tag":189,"props":13564,"children":13565},{},[13566],{"type":29,"value":13567},"      - \"\u002Fvar\u002Frun\u002Fdocker.sock:\u002Fvar\u002Frun\u002Fdocker.sock\"\n",{"type":20,"tag":189,"props":13569,"children":13570},{"class":191,"line":314},[13571],{"type":20,"tag":189,"props":13572,"children":13573},{},[13574],{"type":29,"value":13575},"    networks:\n",{"type":20,"tag":189,"props":13577,"children":13578},{"class":191,"line":328},[13579],{"type":20,"tag":189,"props":13580,"children":13581},{},[13582],{"type":29,"value":13583},"      - net\n",{"type":20,"tag":189,"props":13585,"children":13586},{"class":191,"line":342},[13587],{"type":20,"tag":189,"props":13588,"children":13589},{},[13590],{"type":29,"value":13591},"networks:\n",{"type":20,"tag":189,"props":13593,"children":13594},{"class":191,"line":356},[13595],{"type":20,"tag":189,"props":13596,"children":13597},{},[13598],{"type":29,"value":13599},"  net:\n",{"type":20,"tag":21,"props":13601,"children":13602},{},[13603],{"type":29,"value":13604},"This Docker Compose file:",{"type":20,"tag":11320,"props":13606,"children":13607},{},[13608,13613,13618,13623,13628],{"type":20,"tag":71,"props":13609,"children":13610},{},[13611],{"type":29,"value":13612},"Uses the Dockerfile with jenkinsci\u002Fblueocean image as its base --\nThis is a jenkins image that comes bundled with the Blue Ocean UI",{"type":20,"tag":71,"props":13614,"children":13615},{},[13616],{"type":29,"value":13617},"Exposes the internal port 8080 to the outside world at port 2000",{"type":20,"tag":71,"props":13619,"children":13620},{},[13621],{"type":29,"value":13622},"Creates a volume that maps \u002Fvar\u002Fjenkins_home inside the container to\n\u002Fhome\u002Fjenkins\u002Fvolumes\u002Fjenkins_home on the host. (Tip: Don't use\nvariables here such as $PWD, or the Systemd scripts discussed later\nwill fail)",{"type":20,"tag":71,"props":13624,"children":13625},{},[13626],{"type":29,"value":13627},"The Jenkins image included above also contains Docker within itself.\nA volume mapping is included to link the docker process within the\ncontainer to that of the host.",{"type":20,"tag":71,"props":13629,"children":13630},{},[13631],{"type":29,"value":13632},"Sets up an internal network called 'net'",{"type":20,"tag":21,"props":13634,"children":13635},{},[13636],{"type":29,"value":13637},"To start the container, type the following:",{"type":20,"tag":178,"props":13639,"children":13641},{"className":1203,"code":13640,"language":1205,"meta":8,"style":8},"docker-compose up -d\n",[13642],{"type":20,"tag":185,"props":13643,"children":13644},{"__ignoreMap":8},[13645],{"type":20,"tag":189,"props":13646,"children":13647},{"class":191,"line":192},[13648,13653,13657],{"type":20,"tag":189,"props":13649,"children":13650},{"style":1215},[13651],{"type":29,"value":13652},"docker-compose",{"type":20,"tag":189,"props":13654,"children":13655},{"style":1221},[13656],{"type":29,"value":1442},{"type":20,"tag":189,"props":13658,"children":13659},{"style":1184},[13660],{"type":29,"value":1447},{"type":20,"tag":21,"props":13662,"children":13663},{},[13664],{"type":29,"value":13665},"If you hit up localhost:2000 you should see the following screen:",{"type":20,"tag":21,"props":13667,"children":13668},{},[13669],{"type":20,"tag":34,"props":13670,"children":13673},{"alt":8,"height":13671,"src":13672,"width":1785},225,"\u002Fimages\u002Fblog\u002FSettingUpJenkinsOnYourLocalMachine\u002Fimage2.png",[],{"type":20,"tag":21,"props":13675,"children":13676},{},[13677],{"type":29,"value":13678},"Obtain and enter the secret key as instructed in the image above.\nRemember that \u002Fver\u002Fjenkins_home is mapped to the host as described\nabove.",{"type":20,"tag":21,"props":13680,"children":13681},{},[13682],{"type":29,"value":13683},"On the next screen select the option to install suggested plugins:",{"type":20,"tag":21,"props":13685,"children":13686},{},[13687],{"type":20,"tag":34,"props":13688,"children":13691},{"alt":8,"height":13689,"src":13690,"width":12434},263,"\u002Fimages\u002Fblog\u002FSettingUpJenkinsOnYourLocalMachine\u002Fimage3.png",[],{"type":20,"tag":21,"props":13693,"children":13694},{},[13695],{"type":29,"value":13696},"Next, enter your user details:",{"type":20,"tag":21,"props":13698,"children":13699},{},[13700],{"type":20,"tag":34,"props":13701,"children":13704},{"alt":8,"height":1772,"src":13702,"width":13703},"\u002Fimages\u002Fblog\u002FSettingUpJenkinsOnYourLocalMachine\u002Fimage4.png",452,[],{"type":20,"tag":21,"props":13706,"children":13707},{},[13708],{"type":29,"value":13709},"On the next screen confirm your URL:",{"type":20,"tag":21,"props":13711,"children":13712},{},[13713],{"type":20,"tag":34,"props":13714,"children":13717},{"alt":8,"height":11489,"src":13715,"width":13716},"\u002Fimages\u002Fblog\u002FSettingUpJenkinsOnYourLocalMachine\u002Fimage5.png",482,[],{"type":20,"tag":21,"props":13719,"children":13720},{},[13721],{"type":29,"value":13722},"On completion of these steps you should be able to log into your Jenkins\nserver.",{"type":20,"tag":21,"props":13724,"children":13725},{},[13726],{"type":20,"tag":25,"props":13727,"children":13728},{},[13729],{"type":29,"value":13730},"Configure Systemd",{"type":20,"tag":21,"props":13732,"children":13733},{},[13734],{"type":29,"value":13735},"Next, I want to configure the Jenkins Docker Container to run whenever I\nstart the Virtual Machine. To do this we will use Systemd. Create the\nfollowing file: \u002Fetc\u002Fsystemd\u002Fsystem\u002Fjenkins.service, and populate it as\nfollows:",{"type":20,"tag":178,"props":13737,"children":13739},{"className":13394,"code":13738,"language":13396,"meta":8,"style":8},"[Unit]\nDescription=Docker Compose Application Service - Jenkins\nRequires=docker.service\nAfter=docker.service\n\n[Service]\nWorkingDirectory=\u002Fhome\u002Fjenkins\u002Fjenkins_wrk\nExecStart=\u002Fusr\u002Fbin\u002Fdocker-compose up\nExecStop=\u002Fusr\u002Fbin\u002Fdocker-compose down\nTimeoutStartSec=0\nRestart=on-failure\nStartLimitIntervalSec=60\nStartLimitBurst=3\n\n[Install]\nWantedBy=multi-user.target\n\n",[13740],{"type":20,"tag":185,"props":13741,"children":13742},{"__ignoreMap":8},[13743,13751,13759,13767,13775,13782,13790,13798,13806,13814,13822,13830,13838,13846,13853,13861],{"type":20,"tag":189,"props":13744,"children":13745},{"class":191,"line":192},[13746],{"type":20,"tag":189,"props":13747,"children":13748},{},[13749],{"type":29,"value":13750},"[Unit]\n",{"type":20,"tag":189,"props":13752,"children":13753},{"class":191,"line":202},[13754],{"type":20,"tag":189,"props":13755,"children":13756},{},[13757],{"type":29,"value":13758},"Description=Docker Compose Application Service - Jenkins\n",{"type":20,"tag":189,"props":13760,"children":13761},{"class":191,"line":217},[13762],{"type":20,"tag":189,"props":13763,"children":13764},{},[13765],{"type":29,"value":13766},"Requires=docker.service\n",{"type":20,"tag":189,"props":13768,"children":13769},{"class":191,"line":231},[13770],{"type":20,"tag":189,"props":13771,"children":13772},{},[13773],{"type":29,"value":13774},"After=docker.service\n",{"type":20,"tag":189,"props":13776,"children":13777},{"class":191,"line":245},[13778],{"type":20,"tag":189,"props":13779,"children":13780},{"emptyLinePlaceholder":397},[13781],{"type":29,"value":400},{"type":20,"tag":189,"props":13783,"children":13784},{"class":191,"line":259},[13785],{"type":20,"tag":189,"props":13786,"children":13787},{},[13788],{"type":29,"value":13789},"[Service]\n",{"type":20,"tag":189,"props":13791,"children":13792},{"class":191,"line":272},[13793],{"type":20,"tag":189,"props":13794,"children":13795},{},[13796],{"type":29,"value":13797},"WorkingDirectory=\u002Fhome\u002Fjenkins\u002Fjenkins_wrk\n",{"type":20,"tag":189,"props":13799,"children":13800},{"class":191,"line":286},[13801],{"type":20,"tag":189,"props":13802,"children":13803},{},[13804],{"type":29,"value":13805},"ExecStart=\u002Fusr\u002Fbin\u002Fdocker-compose up\n",{"type":20,"tag":189,"props":13807,"children":13808},{"class":191,"line":300},[13809],{"type":20,"tag":189,"props":13810,"children":13811},{},[13812],{"type":29,"value":13813},"ExecStop=\u002Fusr\u002Fbin\u002Fdocker-compose down\n",{"type":20,"tag":189,"props":13815,"children":13816},{"class":191,"line":314},[13817],{"type":20,"tag":189,"props":13818,"children":13819},{},[13820],{"type":29,"value":13821},"TimeoutStartSec=0\n",{"type":20,"tag":189,"props":13823,"children":13824},{"class":191,"line":328},[13825],{"type":20,"tag":189,"props":13826,"children":13827},{},[13828],{"type":29,"value":13829},"Restart=on-failure\n",{"type":20,"tag":189,"props":13831,"children":13832},{"class":191,"line":342},[13833],{"type":20,"tag":189,"props":13834,"children":13835},{},[13836],{"type":29,"value":13837},"StartLimitIntervalSec=60\n",{"type":20,"tag":189,"props":13839,"children":13840},{"class":191,"line":356},[13841],{"type":20,"tag":189,"props":13842,"children":13843},{},[13844],{"type":29,"value":13845},"StartLimitBurst=3\n",{"type":20,"tag":189,"props":13847,"children":13848},{"class":191,"line":375},[13849],{"type":20,"tag":189,"props":13850,"children":13851},{"emptyLinePlaceholder":397},[13852],{"type":29,"value":400},{"type":20,"tag":189,"props":13854,"children":13855},{"class":191,"line":384},[13856],{"type":20,"tag":189,"props":13857,"children":13858},{},[13859],{"type":29,"value":13860},"[Install]\n",{"type":20,"tag":189,"props":13862,"children":13863},{"class":191,"line":393},[13864],{"type":20,"tag":189,"props":13865,"children":13866},{},[13867],{"type":29,"value":13868},"WantedBy=multi-user.target\n",{"type":20,"tag":21,"props":13870,"children":13871},{},[13872],{"type":29,"value":13873},"Change the permission of the file as follows:",{"type":20,"tag":178,"props":13875,"children":13877},{"className":1203,"code":13876,"language":1205,"meta":8,"style":8},"sudo chmod 644 jenkins.service\n",[13878],{"type":20,"tag":185,"props":13879,"children":13880},{"__ignoreMap":8},[13881],{"type":20,"tag":189,"props":13882,"children":13883},{"class":191,"line":192},[13884,13889,13894,13899],{"type":20,"tag":189,"props":13885,"children":13886},{"style":1215},[13887],{"type":29,"value":13888},"sudo",{"type":20,"tag":189,"props":13890,"children":13891},{"style":1221},[13892],{"type":29,"value":13893}," chmod",{"type":20,"tag":189,"props":13895,"children":13896},{"style":1184},[13897],{"type":29,"value":13898}," 644",{"type":20,"tag":189,"props":13900,"children":13901},{"style":1221},[13902],{"type":29,"value":13903}," jenkins.service\n",{"type":20,"tag":21,"props":13905,"children":13906},{},[13907],{"type":29,"value":13908},"Create the service by entering the following command:",{"type":20,"tag":178,"props":13910,"children":13912},{"className":1203,"code":13911,"language":1205,"meta":8,"style":8},"sudo systemctl enable jenkins.service\n",[13913],{"type":20,"tag":185,"props":13914,"children":13915},{"__ignoreMap":8},[13916],{"type":20,"tag":189,"props":13917,"children":13918},{"class":191,"line":192},[13919,13923,13928,13933],{"type":20,"tag":189,"props":13920,"children":13921},{"style":1215},[13922],{"type":29,"value":13888},{"type":20,"tag":189,"props":13924,"children":13925},{"style":1221},[13926],{"type":29,"value":13927}," systemctl",{"type":20,"tag":189,"props":13929,"children":13930},{"style":1221},[13931],{"type":29,"value":13932}," enable",{"type":20,"tag":189,"props":13934,"children":13935},{"style":1221},[13936],{"type":29,"value":13903},{"type":20,"tag":21,"props":13938,"children":13939},{},[13940],{"type":29,"value":13941},"Start it:",{"type":20,"tag":178,"props":13943,"children":13945},{"className":1203,"code":13944,"language":1205,"meta":8,"style":8},"sudo systemctl start jenkins.service\n",[13946],{"type":20,"tag":185,"props":13947,"children":13948},{"__ignoreMap":8},[13949],{"type":20,"tag":189,"props":13950,"children":13951},{"class":191,"line":192},[13952,13956,13960,13965],{"type":20,"tag":189,"props":13953,"children":13954},{"style":1215},[13955],{"type":29,"value":13888},{"type":20,"tag":189,"props":13957,"children":13958},{"style":1221},[13959],{"type":29,"value":13927},{"type":20,"tag":189,"props":13961,"children":13962},{"style":1221},[13963],{"type":29,"value":13964}," start",{"type":20,"tag":189,"props":13966,"children":13967},{"style":1221},[13968],{"type":29,"value":13903},{"type":20,"tag":21,"props":13970,"children":13971},{},[13972],{"type":29,"value":13973},"View the logs to ensure everything started correctly:",{"type":20,"tag":178,"props":13975,"children":13977},{"className":1203,"code":13976,"language":1205,"meta":8,"style":8},"journalctl -f\n",[13978],{"type":20,"tag":185,"props":13979,"children":13980},{"__ignoreMap":8},[13981],{"type":20,"tag":189,"props":13982,"children":13983},{"class":191,"line":192},[13984,13989],{"type":20,"tag":189,"props":13985,"children":13986},{"style":1215},[13987],{"type":29,"value":13988},"journalctl",{"type":20,"tag":189,"props":13990,"children":13991},{"style":1184},[13992],{"type":29,"value":13993}," -f\n",{"type":20,"tag":21,"props":13995,"children":13996},{},[13997],{"type":29,"value":13998},"At this point you can restart your virtual machine to ensure Jenkins\nstarts up correctly.",{"type":20,"tag":21,"props":14000,"children":14001},{},[14002],{"type":20,"tag":25,"props":14003,"children":14004},{},[14005],{"type":29,"value":14006},"Fork the example repo",{"type":20,"tag":21,"props":14008,"children":14009},{},[14010,14012,14018],{"type":29,"value":14011},"Now we are ready to fork the sample repository\n(",{"type":20,"tag":54,"props":14013,"children":14016},{"href":14014,"rel":14015},"https:\u002F\u002Fgithub.com\u002Fjenkins-docs\u002Fsimple-java-maven-app",[58],[14017],{"type":29,"value":14014},{"type":29,"value":14019},") referenced in\nthe official Jenkins tutorial. I will fork it to my private repositories\non GitHub, in order to demonstrate setting up private key access on\nJenkins.",{"type":20,"tag":21,"props":14021,"children":14022},{},[14023],{"type":20,"tag":25,"props":14024,"children":14025},{},[14026],{"type":29,"value":14027},"Configure SSH Private Key access to Github repo",{"type":20,"tag":21,"props":14029,"children":14030},{},[14031],{"type":29,"value":14032},"First, we need to generate a private\u002Fpublic key pair. We do this by\nrunning the following command on the virtual machine:",{"type":20,"tag":178,"props":14034,"children":14036},{"className":1203,"code":14035,"language":1205,"meta":8,"style":8},"ssh-keygen\n",[14037],{"type":20,"tag":185,"props":14038,"children":14039},{"__ignoreMap":8},[14040],{"type":20,"tag":189,"props":14041,"children":14042},{"class":191,"line":192},[14043],{"type":20,"tag":189,"props":14044,"children":14045},{"style":1215},[14046],{"type":29,"value":14035},{"type":20,"tag":21,"props":14048,"children":14049},{},[14050],{"type":29,"value":14051},"It generates a key pair in the home folder of the user, in the .ssh sub\nfolder.",{"type":20,"tag":21,"props":14053,"children":14054},{},[14055],{"type":29,"value":14056},"Next, we need to set up the credential in Jenkins: Select 'Credentials'\nand then 'System' and 'Global Credentials'. Enter your details in the\nfollowing screen:",{"type":20,"tag":21,"props":14058,"children":14059},{},[14060],{"type":20,"tag":34,"props":14061,"children":14065},{"alt":8,"height":14062,"src":14063,"width":14064},315,"\u002Fimages\u002Fblog\u002FSettingUpJenkinsOnYourLocalMachine\u002Fimage6.png",473,[],{"type":20,"tag":21,"props":14067,"children":14068},{},[14069],{"type":29,"value":14070},"Vi the contents of your private key generated in the step above and\npaste it into the space provided in the form above.",{"type":20,"tag":21,"props":14072,"children":14073},{},[14074],{"type":29,"value":14075},"In your Github forked repository, enter the public key under the\n\"Deployed Keys\" section, as follows:",{"type":20,"tag":21,"props":14077,"children":14078},{},[14079],{"type":20,"tag":34,"props":14080,"children":14084},{"alt":8,"height":14081,"src":14082,"width":14083},274,"\u002Fimages\u002Fblog\u002FSettingUpJenkinsOnYourLocalMachine\u002Fimage7.png",519,[],{"type":20,"tag":21,"props":14086,"children":14087},{},[14088],{"type":29,"value":14089},"At this point you have recorded your private key as a credential in\nJenkins, and linked your public key to your repository on Github. Next,\nwe configure our Pipeline job within Jenkins.",{"type":20,"tag":21,"props":14091,"children":14092},{},[14093],{"type":20,"tag":25,"props":14094,"children":14095},{},[14096],{"type":29,"value":14097},"Pipeline-as-code in Jenkins",{"type":20,"tag":21,"props":14099,"children":14100},{},[14101],{"type":29,"value":14102},"On your Jenkins Dashboard select the \"New Item\" option to start\nconfiguring your pipeline. Enter a name for your pipeline. Be sure to\nselect the \"Pipeline\" as the type and click on OK. Next, scroll to the\nPipeline section and select the \"Pipeline script from SCM\" option. Enter\nGit as your SCM and paste the SSH URL. In the Credentials field select\nthe SSH credential you have configured in the previous section. If all\nworked out as planned you should see no red texted errors here:",{"type":20,"tag":21,"props":14104,"children":14105},{},[14106],{"type":20,"tag":34,"props":14107,"children":14111},{"alt":8,"height":14108,"src":14109,"width":14110},249,"\u002Fimages\u002Fblog\u002FSettingUpJenkinsOnYourLocalMachine\u002Fimage8.png",496,[],{"type":20,"tag":21,"props":14113,"children":14114},{},[14115],{"type":29,"value":14116},"Note: The configuration above refers to a Jenkinsfile on the root level.\nThe example repo has the Jenkins file located in a separate Jenkins\nfolder. After completion of this tutorial you can copy your Jenkins file\nthere and update the configuration above accordingly.",{"type":20,"tag":21,"props":14118,"children":14119},{},[14120],{"type":20,"tag":25,"props":14121,"children":14122},{},[14123],{"type":29,"value":14124},"Jenkinsfile",{"type":20,"tag":21,"props":14126,"children":14127},{},[14128],{"type":29,"value":14129},"Now we are ready to clone the example repository to our local machine\nand open the project using our favourite editor.",{"type":20,"tag":21,"props":14131,"children":14132},{},[14133],{"type":29,"value":14134},"In the root of your example project create file named Jenkinsfile and\nenter the following text:",{"type":20,"tag":178,"props":14136,"children":14138},{"className":180,"code":14137,"language":182,"meta":8,"style":8},"pipeline {\n    agent {\n        docker {\n            image 'maven:3-alpine' \n            args '-v \u002Froot\u002F.m2:\u002Froot\u002F.m2' \n        }\n    }\n    stages {\n        stage('Build') { \n            steps {\n                sh 'mvn -B -DskipTests clean package' \n            }\n        }\n    }\n}\n",[14139],{"type":20,"tag":185,"props":14140,"children":14141},{"__ignoreMap":8},[14142,14150,14162,14174,14204,14244,14252,14260,14268,14285,14297,14334,14342,14349,14356],{"type":20,"tag":189,"props":14143,"children":14144},{"class":191,"line":192},[14145],{"type":20,"tag":189,"props":14146,"children":14147},{"style":196},[14148],{"type":29,"value":14149},"pipeline {\n",{"type":20,"tag":189,"props":14151,"children":14152},{"class":191,"line":202},[14153,14158],{"type":20,"tag":189,"props":14154,"children":14155},{"style":206},[14156],{"type":29,"value":14157},"    agent",{"type":20,"tag":189,"props":14159,"children":14160},{"style":206},[14161],{"type":29,"value":214},{"type":20,"tag":189,"props":14163,"children":14164},{"class":191,"line":217},[14165,14170],{"type":20,"tag":189,"props":14166,"children":14167},{"style":206},[14168],{"type":29,"value":14169},"        docker",{"type":20,"tag":189,"props":14171,"children":14172},{"style":206},[14173],{"type":29,"value":214},{"type":20,"tag":189,"props":14175,"children":14176},{"class":191,"line":231},[14177,14182,14187,14191,14195,14200],{"type":20,"tag":189,"props":14178,"children":14179},{"style":206},[14180],{"type":29,"value":14181},"            image",{"type":20,"tag":189,"props":14183,"children":14184},{"style":206},[14185],{"type":29,"value":14186}," 'maven",{"type":20,"tag":189,"props":14188,"children":14189},{"style":196},[14190],{"type":29,"value":13369},{"type":20,"tag":189,"props":14192,"children":14193},{"style":1184},[14194],{"type":29,"value":4679},{"type":20,"tag":189,"props":14196,"children":14197},{"style":206},[14198],{"type":29,"value":14199},"-alpine'",{"type":20,"tag":189,"props":14201,"children":14202},{"style":196},[14203],{"type":29,"value":12973},{"type":20,"tag":189,"props":14205,"children":14206},{"class":191,"line":245},[14207,14212,14217,14222,14226,14231,14235,14240],{"type":20,"tag":189,"props":14208,"children":14209},{"style":206},[14210],{"type":29,"value":14211},"            args",{"type":20,"tag":189,"props":14213,"children":14214},{"style":206},[14215],{"type":29,"value":14216}," '-v",{"type":20,"tag":189,"props":14218,"children":14219},{"style":206},[14220],{"type":29,"value":14221}," \u002Froot\u002F.m",{"type":20,"tag":189,"props":14223,"children":14224},{"style":1184},[14225],{"type":29,"value":3353},{"type":20,"tag":189,"props":14227,"children":14228},{"style":206},[14229],{"type":29,"value":14230},":\u002Froot\u002F.m",{"type":20,"tag":189,"props":14232,"children":14233},{"style":1184},[14234],{"type":29,"value":3353},{"type":20,"tag":189,"props":14236,"children":14237},{"style":206},[14238],{"type":29,"value":14239},"'",{"type":20,"tag":189,"props":14241,"children":14242},{"style":196},[14243],{"type":29,"value":12973},{"type":20,"tag":189,"props":14245,"children":14246},{"class":191,"line":259},[14247],{"type":20,"tag":189,"props":14248,"children":14249},{"style":196},[14250],{"type":29,"value":14251},"        }\n",{"type":20,"tag":189,"props":14253,"children":14254},{"class":191,"line":272},[14255],{"type":20,"tag":189,"props":14256,"children":14257},{"style":196},[14258],{"type":29,"value":14259},"    }\n",{"type":20,"tag":189,"props":14261,"children":14262},{"class":191,"line":286},[14263],{"type":20,"tag":189,"props":14264,"children":14265},{"style":196},[14266],{"type":29,"value":14267},"    stages {\n",{"type":20,"tag":189,"props":14269,"children":14270},{"class":191,"line":300},[14271,14276,14281],{"type":20,"tag":189,"props":14272,"children":14273},{"style":206},[14274],{"type":29,"value":14275},"        stage('Build')",{"type":20,"tag":189,"props":14277,"children":14278},{"style":206},[14279],{"type":29,"value":14280}," {",{"type":20,"tag":189,"props":14282,"children":14283},{"style":196},[14284],{"type":29,"value":12973},{"type":20,"tag":189,"props":14286,"children":14287},{"class":191,"line":314},[14288,14293],{"type":20,"tag":189,"props":14289,"children":14290},{"style":206},[14291],{"type":29,"value":14292},"            steps",{"type":20,"tag":189,"props":14294,"children":14295},{"style":206},[14296],{"type":29,"value":214},{"type":20,"tag":189,"props":14298,"children":14299},{"class":191,"line":328},[14300,14305,14310,14315,14320,14325,14330],{"type":20,"tag":189,"props":14301,"children":14302},{"style":206},[14303],{"type":29,"value":14304},"                sh",{"type":20,"tag":189,"props":14306,"children":14307},{"style":206},[14308],{"type":29,"value":14309}," 'mvn",{"type":20,"tag":189,"props":14311,"children":14312},{"style":206},[14313],{"type":29,"value":14314}," -B",{"type":20,"tag":189,"props":14316,"children":14317},{"style":206},[14318],{"type":29,"value":14319}," -DskipTests",{"type":20,"tag":189,"props":14321,"children":14322},{"style":206},[14323],{"type":29,"value":14324}," clean",{"type":20,"tag":189,"props":14326,"children":14327},{"style":206},[14328],{"type":29,"value":14329}," package'",{"type":20,"tag":189,"props":14331,"children":14332},{"style":196},[14333],{"type":29,"value":12973},{"type":20,"tag":189,"props":14335,"children":14336},{"class":191,"line":342},[14337],{"type":20,"tag":189,"props":14338,"children":14339},{"style":196},[14340],{"type":29,"value":14341},"            }\n",{"type":20,"tag":189,"props":14343,"children":14344},{"class":191,"line":356},[14345],{"type":20,"tag":189,"props":14346,"children":14347},{"style":196},[14348],{"type":29,"value":14251},{"type":20,"tag":189,"props":14350,"children":14351},{"class":191,"line":375},[14352],{"type":20,"tag":189,"props":14353,"children":14354},{"style":196},[14355],{"type":29,"value":14259},{"type":20,"tag":189,"props":14357,"children":14358},{"class":191,"line":384},[14359],{"type":20,"tag":189,"props":14360,"children":14361},{"style":196},[14362],{"type":29,"value":390},{"type":20,"tag":21,"props":14364,"children":14365},{},[14366],{"type":29,"value":14367},"This file describes your entire pipeline, which at this stage uses a\nMaven Docker image to create a container which will build your Maven\nproject.",{"type":20,"tag":21,"props":14369,"children":14370},{},[14371],{"type":29,"value":14372},"Save the Jenkins file and commit it to your repository.",{"type":20,"tag":178,"props":14374,"children":14376},{"className":1203,"code":14375,"language":1205,"meta":8,"style":8},"sudo usermod -a -G docker francois\n",[14377],{"type":20,"tag":185,"props":14378,"children":14379},{"__ignoreMap":8},[14380],{"type":20,"tag":189,"props":14381,"children":14382},{"class":191,"line":192},[14383,14387,14392,14396,14401,14406],{"type":20,"tag":189,"props":14384,"children":14385},{"style":1215},[14386],{"type":29,"value":13888},{"type":20,"tag":189,"props":14388,"children":14389},{"style":1221},[14390],{"type":29,"value":14391}," usermod",{"type":20,"tag":189,"props":14393,"children":14394},{"style":1184},[14395],{"type":29,"value":1383},{"type":20,"tag":189,"props":14397,"children":14398},{"style":1184},[14399],{"type":29,"value":14400}," -G",{"type":20,"tag":189,"props":14402,"children":14403},{"style":1221},[14404],{"type":29,"value":14405}," docker",{"type":20,"tag":189,"props":14407,"children":14408},{"style":1221},[14409],{"type":29,"value":14410}," francois\n",{"type":20,"tag":21,"props":14412,"children":14413},{},[14414],{"type":20,"tag":25,"props":14415,"children":14416},{},[14417],{"type":29,"value":14418},"Run the Pipeline in BlueOcean",{"type":20,"tag":21,"props":14420,"children":14421},{},[14422],{"type":29,"value":14423},"Select the 'BlueOcean' option in the menu area of Jenkins to get to this\ninterface:",{"type":20,"tag":21,"props":14425,"children":14426},{},[14427],{"type":20,"tag":34,"props":14428,"children":14431},{"alt":8,"height":14429,"src":14430,"width":1242},301,"\u002Fimages\u002Fblog\u002FSettingUpJenkinsOnYourLocalMachine\u002Fimage9.png",[],{"type":20,"tag":21,"props":14433,"children":14434},{},[14435],{"type":29,"value":14436},"Click on the \"Run\" button above. View the details of your pipeline's\nexecution:",{"type":20,"tag":21,"props":14438,"children":14439},{},[14440],{"type":20,"tag":34,"props":14441,"children":14443},{"alt":8,"height":2442,"src":14442,"width":1242},"\u002Fimages\u002Fblog\u002FSettingUpJenkinsOnYourLocalMachine\u002Fimage10.png",[],{"type":20,"tag":21,"props":14445,"children":14446},{},[14447],{"type":29,"value":14448},"After completing the build successfully, the following screen will be\ndisplayed:",{"type":20,"tag":21,"props":14450,"children":14451},{},[14452],{"type":20,"tag":34,"props":14453,"children":14455},{"alt":8,"height":14081,"src":14454,"width":1242},"\u002Fimages\u002Fblog\u002FSettingUpJenkinsOnYourLocalMachine\u002Fimage11.png",[],{"type":20,"tag":21,"props":14457,"children":14458},{},[14459],{"type":29,"value":14460},"Next, add a test stage by modifying the Jenkinsfile and adding the\nfollowing stage:",{"type":20,"tag":178,"props":14462,"children":14464},{"className":180,"code":14463,"language":182,"meta":8,"style":8},"stage('Test') {\n            steps {\n                sh 'mvn test'\n            }\n            post {\n                always {\n                    junit 'target\u002Fsurefire-reports\u002F*.xml'\n                }\n            }\n        }\n",[14465],{"type":20,"tag":185,"props":14466,"children":14467},{"__ignoreMap":8},[14468,14476,14487,14503,14510,14518,14530,14548,14556,14563],{"type":20,"tag":189,"props":14469,"children":14470},{"class":191,"line":192},[14471],{"type":20,"tag":189,"props":14472,"children":14473},{"style":196},[14474],{"type":29,"value":14475},"stage('Test') {\n",{"type":20,"tag":189,"props":14477,"children":14478},{"class":191,"line":202},[14479,14483],{"type":20,"tag":189,"props":14480,"children":14481},{"style":206},[14482],{"type":29,"value":14292},{"type":20,"tag":189,"props":14484,"children":14485},{"style":206},[14486],{"type":29,"value":214},{"type":20,"tag":189,"props":14488,"children":14489},{"class":191,"line":217},[14490,14494,14498],{"type":20,"tag":189,"props":14491,"children":14492},{"style":206},[14493],{"type":29,"value":14304},{"type":20,"tag":189,"props":14495,"children":14496},{"style":206},[14497],{"type":29,"value":14309},{"type":20,"tag":189,"props":14499,"children":14500},{"style":206},[14501],{"type":29,"value":14502}," test'\n",{"type":20,"tag":189,"props":14504,"children":14505},{"class":191,"line":231},[14506],{"type":20,"tag":189,"props":14507,"children":14508},{"style":196},[14509],{"type":29,"value":14341},{"type":20,"tag":189,"props":14511,"children":14512},{"class":191,"line":245},[14513],{"type":20,"tag":189,"props":14514,"children":14515},{"style":196},[14516],{"type":29,"value":14517},"            post {\n",{"type":20,"tag":189,"props":14519,"children":14520},{"class":191,"line":259},[14521,14526],{"type":20,"tag":189,"props":14522,"children":14523},{"style":206},[14524],{"type":29,"value":14525},"                always",{"type":20,"tag":189,"props":14527,"children":14528},{"style":206},[14529],{"type":29,"value":214},{"type":20,"tag":189,"props":14531,"children":14532},{"class":191,"line":272},[14533,14538,14543],{"type":20,"tag":189,"props":14534,"children":14535},{"style":206},[14536],{"type":29,"value":14537},"                    junit",{"type":20,"tag":189,"props":14539,"children":14540},{"style":206},[14541],{"type":29,"value":14542}," 'target\u002Fsurefire-reports",{"type":20,"tag":189,"props":14544,"children":14545},{"style":1993},[14546],{"type":29,"value":14547},"\u002F*.xml'\n",{"type":20,"tag":189,"props":14549,"children":14550},{"class":191,"line":286},[14551],{"type":20,"tag":189,"props":14552,"children":14553},{"style":1993},[14554],{"type":29,"value":14555},"                }\n",{"type":20,"tag":189,"props":14557,"children":14558},{"class":191,"line":300},[14559],{"type":20,"tag":189,"props":14560,"children":14561},{"style":1993},[14562],{"type":29,"value":14341},{"type":20,"tag":189,"props":14564,"children":14565},{"class":191,"line":314},[14566],{"type":20,"tag":189,"props":14567,"children":14568},{"style":1993},[14569],{"type":29,"value":14251},{"type":20,"tag":21,"props":14571,"children":14572},{},[14573],{"type":29,"value":14574},"Commit the change to your GitHub repo and run the pipeline again. Now\nthe pipeline will be extended to include a testing stage, as expected.",{"type":20,"tag":21,"props":14576,"children":14577},{},[14578],{"type":20,"tag":25,"props":14579,"children":14580},{},[14581],{"type":29,"value":14582},"Installation Checklist",{"type":20,"tag":21,"props":14584,"children":14585},{},[14586],{"type":29,"value":14587},"Following the steps in this tutorial should enable you to achieve the\nfollowing outcomes:",{"type":20,"tag":67,"props":14589,"children":14590},{},[14591,14596,14601,14606,14611],{"type":20,"tag":71,"props":14592,"children":14593},{},[14594],{"type":29,"value":14595},"Docker Installed",{"type":20,"tag":71,"props":14597,"children":14598},{},[14599],{"type":29,"value":14600},"Jenkins Installed",{"type":20,"tag":71,"props":14602,"children":14603},{},[14604],{"type":29,"value":14605},"Docker ps can be executed from within Jenkins Docker image",{"type":20,"tag":71,"props":14607,"children":14608},{},[14609],{"type":29,"value":14610},"Jenkins starts on boot",{"type":20,"tag":71,"props":14612,"children":14613},{},[14614],{"type":29,"value":14615},"Docker can access GitHub repo via key",{"type":20,"tag":4813,"props":14617,"children":14618},{},[14619],{"type":29,"value":11279},{"title":8,"searchDepth":202,"depth":202,"links":14621},[],"content:blog:SettingUpJenkinsOnYourLocalMachine:SettingUpJenkinsOnYourLocalMachine.md","blog\u002FSettingUpJenkinsOnYourLocalMachine\u002FSettingUpJenkinsOnYourLocalMachine.md","blog\u002FSettingUpJenkinsOnYourLocalMachine\u002FSettingUpJenkinsOnYourLocalMachine",{"_path":14626,"_dir":14627,"_draft":7,"_partial":7,"_locale":8,"title":14628,"description":14629,"date":14630,"cover":14631,"tags":14632,"body":14635,"_type":11282,"_id":14962,"_source":11284,"_file":14963,"_stem":14964,"_extension":11287},"\u002Fblog\u002Fnuxt-3-intro","blog","Getting Started with Nuxt 3","This is a quick introduction on how to get started with Nuxt 3.","20029-05-24","clement-helardot-95YRwf6CNw8-unsplash.jpg",[14633,14634],"nuxt","vue",{"type":17,"children":14636,"toc":14960},[14637,14642,14656,14736,14749,14956],{"type":20,"tag":4491,"props":14638,"children":14640},{"id":14639},"getting-started-with-nuxt-3",[14641],{"type":29,"value":14628},{"type":20,"tag":21,"props":14643,"children":14644},{},[14645,14647,14654],{"type":29,"value":14646},"This is a quick introduction on how to get started with Nuxt 3. To get started you need to have Node.js installed on your machine. You can download it from ",{"type":20,"tag":54,"props":14648,"children":14651},{"href":14649,"rel":14650},"https:\u002F\u002Fnodejs.org\u002Fen\u002Fdownload\u002F",[58],[14652],{"type":29,"value":14653},"here",{"type":29,"value":14655},". Once you have Node.js installed, you can install Nuxt 3 using the following command:",{"type":20,"tag":178,"props":14657,"children":14659},{"className":1203,"code":14658,"language":1205,"meta":8,"style":8},"npx nuxi init \u003Cproject-name>\ncd \u003Cproject-name>\nnpm i\n",[14660],{"type":20,"tag":185,"props":14661,"children":14662},{"__ignoreMap":8},[14663,14700,14723],{"type":20,"tag":189,"props":14664,"children":14665},{"class":191,"line":192},[14666,14671,14676,14681,14686,14691,14696],{"type":20,"tag":189,"props":14667,"children":14668},{"style":1215},[14669],{"type":29,"value":14670},"npx",{"type":20,"tag":189,"props":14672,"children":14673},{"style":1221},[14674],{"type":29,"value":14675}," nuxi",{"type":20,"tag":189,"props":14677,"children":14678},{"style":1221},[14679],{"type":29,"value":14680}," init",{"type":20,"tag":189,"props":14682,"children":14683},{"style":2632},[14684],{"type":29,"value":14685}," \u003C",{"type":20,"tag":189,"props":14687,"children":14688},{"style":1221},[14689],{"type":29,"value":14690},"project-nam",{"type":20,"tag":189,"props":14692,"children":14693},{"style":196},[14694],{"type":29,"value":14695},"e",{"type":20,"tag":189,"props":14697,"children":14698},{"style":2632},[14699],{"type":29,"value":4461},{"type":20,"tag":189,"props":14701,"children":14702},{"class":191,"line":202},[14703,14707,14711,14715,14719],{"type":20,"tag":189,"props":14704,"children":14705},{"style":1184},[14706],{"type":29,"value":1411},{"type":20,"tag":189,"props":14708,"children":14709},{"style":2632},[14710],{"type":29,"value":14685},{"type":20,"tag":189,"props":14712,"children":14713},{"style":1221},[14714],{"type":29,"value":14690},{"type":20,"tag":189,"props":14716,"children":14717},{"style":196},[14718],{"type":29,"value":14695},{"type":20,"tag":189,"props":14720,"children":14721},{"style":2632},[14722],{"type":29,"value":4461},{"type":20,"tag":189,"props":14724,"children":14725},{"class":191,"line":217},[14726,14731],{"type":20,"tag":189,"props":14727,"children":14728},{"style":1215},[14729],{"type":29,"value":14730},"npm",{"type":20,"tag":189,"props":14732,"children":14733},{"style":1221},[14734],{"type":29,"value":14735}," i\n",{"type":20,"tag":21,"props":14737,"children":14738},{},[14739,14741,14747],{"type":29,"value":14740},"Next you can begin to build out your application by using ",{"type":20,"tag":185,"props":14742,"children":14744},{"className":14743},[],[14745],{"type":29,"value":14746},"app.vue",{"type":29,"value":14748},".",{"type":20,"tag":178,"props":14750,"children":14752},{"className":4437,"code":14751,"language":4439,"meta":8,"style":8},"\u003Cscript setup>\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"flex flex-col min-h-screen\">\n    \u003CSiteHeader \u002F>\n    \u003Cmain class=\" mx-auto max-w-7xl px-2 sm:px-6 lg:px-8 grow items-start w-full\">\n      \u003CNuxtPage \u002F>\n    \u003C\u002Fmain>\n    \u003CSiteFooter \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[14753],{"type":20,"tag":185,"props":14754,"children":14755},{"__ignoreMap":8},[14756,14784,14791,14806,14834,14850,14879,14895,14910,14926,14941],{"type":20,"tag":189,"props":14757,"children":14758},{"class":191,"line":192},[14759,14763,14767,14772,14776,14780],{"type":20,"tag":189,"props":14760,"children":14761},{"style":196},[14762],{"type":29,"value":4451},{"type":20,"tag":189,"props":14764,"children":14765},{"style":2490},[14766],{"type":29,"value":4555},{"type":20,"tag":189,"props":14768,"children":14769},{"style":1215},[14770],{"type":29,"value":14771}," setup",{"type":20,"tag":189,"props":14773,"children":14774},{"style":196},[14775],{"type":29,"value":4589},{"type":20,"tag":189,"props":14777,"children":14778},{"style":2490},[14779],{"type":29,"value":4555},{"type":20,"tag":189,"props":14781,"children":14782},{"style":196},[14783],{"type":29,"value":4461},{"type":20,"tag":189,"props":14785,"children":14786},{"class":191,"line":202},[14787],{"type":20,"tag":189,"props":14788,"children":14789},{"emptyLinePlaceholder":397},[14790],{"type":29,"value":400},{"type":20,"tag":189,"props":14792,"children":14793},{"class":191,"line":217},[14794,14798,14802],{"type":20,"tag":189,"props":14795,"children":14796},{"style":196},[14797],{"type":29,"value":4451},{"type":20,"tag":189,"props":14799,"children":14800},{"style":2490},[14801],{"type":29,"value":4456},{"type":20,"tag":189,"props":14803,"children":14804},{"style":196},[14805],{"type":29,"value":4461},{"type":20,"tag":189,"props":14807,"children":14808},{"class":191,"line":231},[14809,14813,14817,14821,14825,14830],{"type":20,"tag":189,"props":14810,"children":14811},{"style":196},[14812],{"type":29,"value":4469},{"type":20,"tag":189,"props":14814,"children":14815},{"style":2490},[14816],{"type":29,"value":4474},{"type":20,"tag":189,"props":14818,"children":14819},{"style":1215},[14820],{"type":29,"value":4957},{"type":20,"tag":189,"props":14822,"children":14823},{"style":196},[14824],{"type":29,"value":4565},{"type":20,"tag":189,"props":14826,"children":14827},{"style":1221},[14828],{"type":29,"value":14829},"\"flex flex-col min-h-screen\"",{"type":20,"tag":189,"props":14831,"children":14832},{"style":196},[14833],{"type":29,"value":4461},{"type":20,"tag":189,"props":14835,"children":14836},{"class":191,"line":245},[14837,14841,14846],{"type":20,"tag":189,"props":14838,"children":14839},{"style":196},[14840],{"type":29,"value":4486},{"type":20,"tag":189,"props":14842,"children":14843},{"style":206},[14844],{"type":29,"value":14845},"SiteHeader",{"type":20,"tag":189,"props":14847,"children":14848},{"style":196},[14849],{"type":29,"value":5206},{"type":20,"tag":189,"props":14851,"children":14852},{"class":191,"line":259},[14853,14857,14862,14866,14870,14875],{"type":20,"tag":189,"props":14854,"children":14855},{"style":196},[14856],{"type":29,"value":4486},{"type":20,"tag":189,"props":14858,"children":14859},{"style":2490},[14860],{"type":29,"value":14861},"main",{"type":20,"tag":189,"props":14863,"children":14864},{"style":1215},[14865],{"type":29,"value":4957},{"type":20,"tag":189,"props":14867,"children":14868},{"style":196},[14869],{"type":29,"value":4565},{"type":20,"tag":189,"props":14871,"children":14872},{"style":1221},[14873],{"type":29,"value":14874},"\" mx-auto max-w-7xl px-2 sm:px-6 lg:px-8 grow items-start w-full\"",{"type":20,"tag":189,"props":14876,"children":14877},{"style":196},[14878],{"type":29,"value":4461},{"type":20,"tag":189,"props":14880,"children":14881},{"class":191,"line":272},[14882,14886,14891],{"type":20,"tag":189,"props":14883,"children":14884},{"style":196},[14885],{"type":29,"value":4978},{"type":20,"tag":189,"props":14887,"children":14888},{"style":206},[14889],{"type":29,"value":14890},"NuxtPage",{"type":20,"tag":189,"props":14892,"children":14893},{"style":196},[14894],{"type":29,"value":5206},{"type":20,"tag":189,"props":14896,"children":14897},{"class":191,"line":286},[14898,14902,14906],{"type":20,"tag":189,"props":14899,"children":14900},{"style":196},[14901],{"type":29,"value":5083},{"type":20,"tag":189,"props":14903,"children":14904},{"style":2490},[14905],{"type":29,"value":14861},{"type":20,"tag":189,"props":14907,"children":14908},{"style":196},[14909],{"type":29,"value":4461},{"type":20,"tag":189,"props":14911,"children":14912},{"class":191,"line":300},[14913,14917,14922],{"type":20,"tag":189,"props":14914,"children":14915},{"style":196},[14916],{"type":29,"value":4486},{"type":20,"tag":189,"props":14918,"children":14919},{"style":206},[14920],{"type":29,"value":14921},"SiteFooter",{"type":20,"tag":189,"props":14923,"children":14924},{"style":196},[14925],{"type":29,"value":5206},{"type":20,"tag":189,"props":14927,"children":14928},{"class":191,"line":314},[14929,14933,14937],{"type":20,"tag":189,"props":14930,"children":14931},{"style":196},[14932],{"type":29,"value":4512},{"type":20,"tag":189,"props":14934,"children":14935},{"style":2490},[14936],{"type":29,"value":4474},{"type":20,"tag":189,"props":14938,"children":14939},{"style":196},[14940],{"type":29,"value":4461},{"type":20,"tag":189,"props":14942,"children":14943},{"class":191,"line":328},[14944,14948,14952],{"type":20,"tag":189,"props":14945,"children":14946},{"style":196},[14947],{"type":29,"value":4528},{"type":20,"tag":189,"props":14949,"children":14950},{"style":2490},[14951],{"type":29,"value":4456},{"type":20,"tag":189,"props":14953,"children":14954},{"style":196},[14955],{"type":29,"value":4461},{"type":20,"tag":4813,"props":14957,"children":14958},{},[14959],{"type":29,"value":11279},{"title":8,"searchDepth":202,"depth":202,"links":14961},[],"content:blog:nuxt-3-intro.md","blog\u002Fnuxt-3-intro.md","blog\u002Fnuxt-3-intro",[14966,15096,15215,15414],{"_path":14967,"_dir":14968,"_draft":7,"_partial":7,"_locale":8,"title":14969,"description":14970,"date":14971,"cover":14631,"tags":14972,"body":14974,"_type":11282,"_id":15093,"_source":11284,"_file":15094,"_stem":15095,"_extension":11287},"\u002Farticles\u002Fa-universal-programming-language","articles","A Universal Programming Language?","Is the there something like a universal programming language?","2023-05-24",[14973],"Javascript",{"type":17,"children":14975,"toc":15091},[14976,14983,14991,14996,15008,15020,15025,15030,15035,15040,15045,15050,15055,15060,15073,15078],{"type":20,"tag":21,"props":14977,"children":14978},{},[14979],{"type":20,"tag":25,"props":14980,"children":14981},{},[14982],{"type":29,"value":14969},{"type":20,"tag":21,"props":14984,"children":14985},{},[14986],{"type":20,"tag":12582,"props":14987,"children":14988},{},[14989],{"type":29,"value":14990},"June 2016",{"type":20,"tag":21,"props":14992,"children":14993},{},[14994],{"type":29,"value":14995},"Why do we not have a single universal programming language? In fact, why does it seem that new computer languages pop into existence at an ever increasing rate?",{"type":20,"tag":21,"props":14997,"children":14998},{},[14999,15001,15006],{"type":29,"value":15000},"According to Brookshear ",{"type":20,"tag":12582,"props":15002,"children":15003},{},[15004],{"type":29,"value":15005},"et al",{"type":29,"value":15007},". (2015), any Turing complete language is as powerful as any other. So if a language cannot be more powerful than another, why do we have different languages? I would say the answer is productivity and quality – We want to be able to write better quality software faster. In his famous work “No Silver Bullet”, Fred Brooks (1987) states that “Surely the most powerful stroke for software productivity, reliability, and simplicity has been the progressive use of high-level languages for programming.”.",{"type":20,"tag":21,"props":15009,"children":15010},{},[15011,15013,15018],{"type":29,"value":15012},"The high-level languages Brooks refers to arose as a response to problems presented by Assembly Language. One of these problems is the fact that Assembly Language is “…inherently machine dependent…”, according to Brookshear ",{"type":20,"tag":12582,"props":15014,"children":15015},{},[15016],{"type":29,"value":15017},"et al.",{"type":29,"value":15019}," (2015). That being said, assembly language is still very popular many decades after the use of third generational languages have become prevalent. In fact, according to the TIOBE Index the 10th most popular programming language for July 2016 is still Assembly Language.",{"type":20,"tag":21,"props":15021,"children":15022},{},[15023],{"type":29,"value":15024},"The ranking methodology of TIOBE places Java as the most popular programming language. According to their web site (java.com\u002Fen\u002Fabout\u002F), Java runs on 3 Billion mobile phones, 97% of Enterprise Desktop applicaitons, billions of sim cards and millions of TVs. There are about 9 million Java developers worldwide.",{"type":20,"tag":21,"props":15026,"children":15027},{},[15028],{"type":29,"value":15029},"Similar in name to Java (and very little else), JavaScript(also known as ECMAScript) was created by Brendan Eich in 1995. According to Douglas Crockford (2011), JavaScript contains many weaknesses, but also contains some “…seriously good ideas behind it.”: According to Crockford, JavaScript is “…the first Lambda language to go mainstream”. Other goods ideas include object literals, dynamic objects and first class functions.",{"type":20,"tag":21,"props":15031,"children":15032},{},[15033],{"type":29,"value":15034},"A recent study by Sanatinia and Noubir (2016) analysed data from GitHub to draw inference as to the most widely used and popular programming languages in use today. According to them Github is ‘’…the most widely used social code hosting platform…” with more than 10 million registered users and over 16 million code repositories. They found that both in terms of popularity and the number of hosted repositories, the most popular programming language is JavaScript.",{"type":20,"tag":21,"props":15036,"children":15037},{},[15038],{"type":29,"value":15039},"This makes a lot of sense if you consider that JavaScript is the language of the web: the only language that is natively understood by all browsers. In addition to its prevalence in browsers you will find Javascript in mobile devices (Hybrid Mobile apps running on Android, iOS and Windows devices), in databases (MongoDB and other NoSQL databases), on the server (Node.js) and on a myriad of other devices (IoT).",{"type":20,"tag":21,"props":15041,"children":15042},{},[15043],{"type":29,"value":15044},"Maybe JavaScript is the closest thing to a universal programming language we have?",{"type":20,"tag":21,"props":15046,"children":15047},{},[15048],{"type":29,"value":15049},"References",{"type":20,"tag":21,"props":15051,"children":15052},{},[15053],{"type":29,"value":15054},"Brooks F.P., (1987), ‘No Silver Bullet: Essence and Accidents of Software Engineering’, Computer, 20, 4, p. 10, EBSCOhost, viewed 31 July 2016.",{"type":20,"tag":21,"props":15056,"children":15057},{},[15058],{"type":29,"value":15059},"Brookshear J.G., Brylow D, Smith D.T., (2015), Computer Science: An Overview (12th Edition). Pearson Education Inc., Upper Saddle River, NJ, USA.",{"type":20,"tag":21,"props":15061,"children":15062},{},[15063,15065,15071],{"type":29,"value":15064},"Crockford, D., (2011), JavaScript: The Good Parts. Available At: ",{"type":20,"tag":54,"props":15066,"children":15069},{"href":15067,"rel":15068},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=_DKkVvOt6dk&index=4&list=PL62E185BB8577B63D",[58],[15070],{"type":29,"value":15067},{"type":29,"value":15072}," (Accessed: 13 January 2013)",{"type":20,"tag":21,"props":15074,"children":15075},{},[15076],{"type":29,"value":15077},"Sanatinia, A, & Noubir, G, (2016), ‘On GitHub’s Programming Languages’, arXiv, EBSCOhost, viewed 31 July 2016.",{"type":20,"tag":21,"props":15079,"children":15080},{},[15081,15083,15089],{"type":29,"value":15082},"TIOBE Index for July 2016, Available At: ",{"type":20,"tag":54,"props":15084,"children":15087},{"href":15085,"rel":15086},"http:\u002F\u002Fwww.tiobe.com\u002Ftiobe-index\u002F",[58],[15088],{"type":29,"value":15085},{"type":29,"value":15090},", (Accessed 31 July 2016)",{"title":8,"searchDepth":202,"depth":202,"links":15092},[],"content:articles:A Universal Programming Language.md","articles\u002FA Universal Programming Language.md","articles\u002FA Universal Programming Language",{"_path":15097,"_dir":14968,"_draft":7,"_partial":7,"_locale":8,"title":15098,"description":15099,"date":15100,"cover":14631,"tags":15101,"body":15102,"_type":11282,"_id":15212,"_source":11284,"_file":15213,"_stem":15214,"_extension":11287},"\u002Farticles\u002Fjava-vs-javascript","Java vs JavaScript","Comparing the two languages","2016-07-01",[14973],{"type":17,"children":15103,"toc":15210},[15104,15111,15119,15124,15129,15134,15139,15144,15149,15154,15159,15164,15168,15173,15178,15189,15194,15199],{"type":20,"tag":21,"props":15105,"children":15106},{},[15107],{"type":20,"tag":25,"props":15108,"children":15109},{},[15110],{"type":29,"value":15098},{"type":20,"tag":21,"props":15112,"children":15113},{},[15114],{"type":20,"tag":12582,"props":15115,"children":15116},{},[15117],{"type":29,"value":15118},"July 2016",{"type":20,"tag":21,"props":15120,"children":15121},{},[15122],{"type":29,"value":15123},"JavaScript was developed by Brendan Eich in 1995 with the purpose of allowing developers to add functionality to the Netscape browser (Savage, 2014). It is one of the most popular languages in the world, dominant in the browser, but also found on mobile devices and the server. It is currently ranked seventh on the popular TIOBE index (TIOBE index, 2016).",{"type":20,"tag":21,"props":15125,"children":15126},{},[15127],{"type":29,"value":15128},"JavaScript has similarities in name to Java, leading many people to believe that the languages are similar, but apart from some superficial similarities they differ greatly. According to Crockford (2008), JavaScript is more similar to Lisp and Scheme than Java.",{"type":20,"tag":21,"props":15130,"children":15131},{},[15132],{"type":29,"value":15133},"JavaScript is the language of the Web, natively understood by all major browsers. Java’s greatest area of success, on the other hand, is on the server, according to Nan and Kai-Kuang (2004).",{"type":20,"tag":21,"props":15135,"children":15136},{},[15137],{"type":29,"value":15138},"Both Java and JavaScript support the Object-Oriented paradigm of development, but the way they achieve this differs. Java makes use of class definitions to define objects. JavaScript uses prototypal inheritance where “objects inherit properties directly from other objects” in a “class-free object system” (Crockford, 2008).",{"type":20,"tag":21,"props":15140,"children":15141},{},[15142],{"type":29,"value":15143},"Both Java and JavaScript support the Functional paradigm. JavaScript supports first-class, high order functions (Atencio, 2015). Both Java and JavaScript support Lambda expressions.",{"type":20,"tag":21,"props":15145,"children":15146},{},[15147],{"type":29,"value":15148},"Java is statically typed, whilst JavaScript is dynamically typed. According to Savage (2014), static typing can help find bugs that would otherwise have remained undiscovered for a very long time. Crockford (2008) argues that using a strongly typed language does not free you performing in depth testing, and that he is unconcerned with the type of bugs found by static typing. In my own experience using a strongly typed language does have advantages, particularly when it comes to developer productivity.",{"type":20,"tag":21,"props":15150,"children":15151},{},[15152],{"type":29,"value":15153},"Java has block scoping, whilst JavaScript has function scoping. This means that in Java variables are scoped to the containing curly braces block in which they are defined. In the case of JavaScript, variables are scoped to the outer function in which they are defined. The new “let” keyword defined in ES 6 introduces the option of block scoping variables in JavaScript.",{"type":20,"tag":21,"props":15155,"children":15156},{},[15157],{"type":29,"value":15158},"JavaScript is typically interpreted (in the browser), but can also be Just-In-Time compiled on the Node.js server platform. Java is typically compiled into bytecode and run on the JVM.",{"type":20,"tag":21,"props":15160,"children":15161},{},[15162],{"type":29,"value":15163},"Apart from the underlying differences described above Java and JavaScript do have some things in common. Like JavaScript, Java is also an immensely popular language, ranked first on the TIOBE index (TIOBE index, 2016). According to Goodman, Morrison, Novitski (2010) both languages share a syntax similar to C, including dot notation, curly braces and some key words. Like JavaScript, Java was announced in 1995.",{"type":20,"tag":21,"props":15165,"children":15166},{},[15167],{"type":29,"value":15049},{"type":20,"tag":21,"props":15169,"children":15170},{},[15171],{"type":29,"value":15172},"Atencio, L., (2015) Functional Programming in Javascript, Manning Publications",{"type":20,"tag":21,"props":15174,"children":15175},{},[15176],{"type":29,"value":15177},"Crockford, D., (2008), JavaScript: The Good Parts. Sebastopol, CA: O’Reilly Media, Inc.",{"type":20,"tag":21,"props":15179,"children":15180},{},[15181,15183,15188],{"type":29,"value":15182},"Goodman, D., Morrison, M., & Novitski, P., (2010), Bible : JavaScript Bible (7), Wiley, Hoboken, US. Available from: ProQuest ebrary. ",{"type":20,"tag":189,"props":15184,"children":15185},{},[15186],{"type":29,"value":15187},"4 September 2016",{"type":29,"value":14748},{"type":20,"tag":21,"props":15190,"children":15191},{},[15192],{"type":29,"value":15193},"Nan C., Kai-Kuang M., (2004) “Java’s futures: challenge and opportunity,” in IT Professional, vol. 6, no. 4, pp. 19-26",{"type":20,"tag":21,"props":15195,"children":15196},{},[15197],{"type":29,"value":15198},"Savage, N., (2014), ‘Gradual Evolution’, Communications Of The ACM, 57, 10, pp. 16-18, Business Source Complete, EBSCOhost, viewed 4 September 2016.",{"type":20,"tag":21,"props":15200,"children":15201},{},[15202,15203,15208],{"type":29,"value":15082},{"type":20,"tag":54,"props":15204,"children":15206},{"href":15085,"rel":15205},[58],[15207],{"type":29,"value":15085},{"type":29,"value":15209},", (Accessed 4 September 2016)",{"title":8,"searchDepth":202,"depth":202,"links":15211},[],"content:articles:Java vs JavaScript.md","articles\u002FJava vs JavaScript.md","articles\u002FJava vs JavaScript",{"_path":15216,"_dir":14968,"_draft":7,"_partial":7,"_locale":8,"title":15217,"description":15217,"date":15100,"cover":14631,"tags":15218,"body":15220,"_type":11282,"_id":15411,"_source":11284,"_file":15412,"_stem":15413,"_extension":11287},"\u002Farticles\u002Fsoftware-modelling","Software Modelling",[15219],"Software Engineering",{"type":17,"children":15221,"toc":15409},[15222,15229,15237,15242,15247,15252,15257,15262,15290,15295,15300,15328,15333,15338,15351,15356,15360,15371,15383,15394,15399,15404],{"type":20,"tag":21,"props":15223,"children":15224},{},[15225],{"type":20,"tag":25,"props":15226,"children":15227},{},[15228],{"type":29,"value":15217},{"type":20,"tag":21,"props":15230,"children":15231},{},[15232],{"type":20,"tag":12582,"props":15233,"children":15234},{},[15235],{"type":29,"value":15236},"November 2016",{"type":20,"tag":21,"props":15238,"children":15239},{},[15240],{"type":29,"value":15241},"Systems Modelling plays an important role, particularly in two phases of the Software Development Life Cycle: The Requirements Analysis phase and the Design phase. Pressman (2010) notes that specification models form the basis of design of the system architecture, interface and system components.",{"type":20,"tag":21,"props":15243,"children":15244},{},[15245],{"type":29,"value":15246},"According to Fitzgerald and Larsen (2009), modelling is an accepted and common practice in non-software related engineering fields and is used to test ideas, facilitate communications with customers and to root out errors at an early stage. One important aspect of models emphasized by Fitzgerald and Larsen, is the fact that models can (and should) be validated.",{"type":20,"tag":21,"props":15248,"children":15249},{},[15250],{"type":29,"value":15251},"Sommerville (2011), distinguishes between two types of modelling, graphical and formal (mathematical).",{"type":20,"tag":21,"props":15253,"children":15254},{},[15255],{"type":29,"value":15256},"A very popular formal method is the Vienna Development Method Specification Language (ISO VDM-SL). Plat and Larsen (1992) note that it originated in the early seventies in an IBM laboratory in Vienna. According to them VDM-SL allows for the creation of unambiguous specifications that can be mathematically proved.",{"type":20,"tag":21,"props":15258,"children":15259},{},[15260],{"type":29,"value":15261},"Sommerville (2011), notes several problems with formal methods:",{"type":20,"tag":67,"props":15263,"children":15264},{},[15265,15270,15275,15280,15285],{"type":20,"tag":71,"props":15266,"children":15267},{},[15268],{"type":29,"value":15269},"It is a difficult concept to understand which means that people who understand the problem domain do not typically understand formal specifications and engineers who understand it may not have a good understanding of the problem domain;",{"type":20,"tag":71,"props":15271,"children":15272},{},[15273],{"type":29,"value":15274},"It might be very costly to adopt and estimating the potential benefits to be derived from it could be very difficult;",{"type":20,"tag":71,"props":15276,"children":15277},{},[15278],{"type":29,"value":15279},"Software developers are not typically trained to use it;",{"type":20,"tag":71,"props":15281,"children":15282},{},[15283],{"type":29,"value":15284},"It does not scale to very large systems; and",{"type":20,"tag":71,"props":15286,"children":15287},{},[15288],{"type":29,"value":15289},"It is not well suited to agile approaches.",{"type":20,"tag":21,"props":15291,"children":15292},{},[15293],{"type":29,"value":15294},"In spite of the problems listed by Sommerville, the prominence of formal methods may rise in future due to increasing concerns about security. As an example, DARPA recently used formal methods to create “Unhackable” software for a military drone (Atherton, 2016).",{"type":20,"tag":21,"props":15296,"children":15297},{},[15298],{"type":29,"value":15299},"Much more popular than formal methods today are graphical models. According to Pressman (2010) the following types of models are used in requirements modeling:",{"type":20,"tag":67,"props":15301,"children":15302},{},[15303,15308,15313,15318,15323],{"type":20,"tag":71,"props":15304,"children":15305},{},[15306],{"type":29,"value":15307},"Scenario-based models, e.g. Use Case diagrams;",{"type":20,"tag":71,"props":15309,"children":15310},{},[15311],{"type":29,"value":15312},"Data models, e.g. E-R diagrams;",{"type":20,"tag":71,"props":15314,"children":15315},{},[15316],{"type":29,"value":15317},"Class models, e.g. Class diagrams and CRC models;",{"type":20,"tag":71,"props":15319,"children":15320},{},[15321],{"type":29,"value":15322},"Flow models, e.g. data flow and control flow models; and",{"type":20,"tag":71,"props":15324,"children":15325},{},[15326],{"type":29,"value":15327},"Behavioural models, e.g. state diagram.",{"type":20,"tag":21,"props":15329,"children":15330},{},[15331],{"type":29,"value":15332},"The preceding paragraph points out another problem with modeling – which model to choose between all the available options? This I think ultimately comes down to the expertise and experience of the software engineer. Personally, I like to get the data structures right, therefore I rarely go without specifying data models in a project. When developing systems in an Object-Oriented language it will pay to use Use Case modelling as this can be used as the basis for deriving classes later on.",{"type":20,"tag":21,"props":15334,"children":15335},{},[15336],{"type":29,"value":15337},"One scenario where modeling will definitely cause more harm than help is the case where the requirements model is incorrect. According to Young (2002) 85% of software problems arise from incorrect requirements.",{"type":20,"tag":21,"props":15339,"children":15340},{},[15341,15343,15349],{"type":29,"value":15342},"Excessive modeling does not seem to be in line with the agile approach to software development. The second tenet of the Agile Manifesto (",{"type":20,"tag":54,"props":15344,"children":15347},{"href":15345,"rel":15346},"http:\u002F\u002Fagilemanifesto.org\u002F",[58],[15348],{"type":29,"value":15345},{"type":29,"value":15350},") reads: “Working Software over comprehensive documentation”. While I do agree with this sentiment I also feel that modeling is a type of planning, and good planning is essential to writing good software within budget.",{"type":20,"tag":21,"props":15352,"children":15353},{},[15354],{"type":29,"value":15355},"I guess the secret lies in finding the balance and focussing on exactly those models that actually provides value to the specific project you are working on.",{"type":20,"tag":21,"props":15357,"children":15358},{},[15359],{"type":29,"value":15049},{"type":20,"tag":21,"props":15361,"children":15362},{},[15363,15365],{"type":29,"value":15364},"Atherton, K.D., (2016) “How Darpa is prepping for the next cyberwar”. Popular Science. Available at: ",{"type":20,"tag":54,"props":15366,"children":15369},{"href":15367,"rel":15368},"http:\u002F\u002Fwww.popsci.com\u002Fdarpa-is-building-tools-for-next-cyberwar",[58],[15370],{"type":29,"value":15367},{"type":20,"tag":21,"props":15372,"children":15373},{},[15374,15376,15381],{"type":29,"value":15375},"Fitzgerald, J, & Larsen, P (2009), Modelling Systems. ",{"type":20,"tag":189,"props":15377,"children":15378},{},[15379],{"type":29,"value":15380},"Electronic Book",{"type":29,"value":15382}," : Practical Tools And Techniques In Software Development, n.p.: Cambridge : Cambridge University Press, 2009., University of Liverpool Catalogue, EBSCOhost, viewed 18 November 2016.",{"type":20,"tag":21,"props":15384,"children":15385},{},[15386,15388],{"type":29,"value":15387},"Plat, N., & Larsen, P.G., (1992) “An overview of the ISO\u002FVDM-SL standard.” ACM SIGPLAN Notices. 27, 8 (August 1992), 76-82. DOI=",{"type":20,"tag":54,"props":15389,"children":15392},{"href":15390,"rel":15391},"http:\u002F\u002Fdx.doi.org.liverpool.idm.oclc.org\u002F10.1145\u002F142137.142153",[58],[15393],{"type":29,"value":15390},{"type":20,"tag":21,"props":15395,"children":15396},{},[15397],{"type":29,"value":15398},"Pressman R.S., (2010), Software Engineering: A practitioner’s Approach (7th ed.), Singapore, McGraw-Hill.",{"type":20,"tag":21,"props":15400,"children":15401},{},[15402],{"type":29,"value":15403},"Sommerville, I. (2011) Software Engineering. 9th edn. Boston: Addison-Wesley",{"type":20,"tag":21,"props":15405,"children":15406},{},[15407],{"type":29,"value":15408},"Young R.R. (2002) “Recommended Requirements Gathering Practices”. CrossTalk 15(4), pp 9 – 12.",{"title":8,"searchDepth":202,"depth":202,"links":15410},[],"content:articles:Software Modelling.md","articles\u002FSoftware Modelling.md","articles\u002FSoftware Modelling",{"_path":15415,"_dir":14968,"_draft":7,"_partial":7,"_locale":8,"title":15416,"description":15417,"date":15100,"cover":14631,"tags":15418,"body":15419,"_type":11282,"_id":15546,"_source":11284,"_file":15547,"_stem":15548,"_extension":11287},"\u002Farticles\u002Fthe-challenges-facing-software-engineering","The Challenges Facing Software Engineering","History of Software Engineering and challenges posed by AI",[15219],{"type":17,"children":15420,"toc":15544},[15421,15428,15435,15440,15445,15450,15455,15460,15471,15476,15481,15486,15491,15496,15501,15505,15517,15530,15535,15539],{"type":20,"tag":21,"props":15422,"children":15423},{},[15424],{"type":20,"tag":25,"props":15425,"children":15426},{},[15427],{"type":29,"value":15416},{"type":20,"tag":21,"props":15429,"children":15430},{},[15431],{"type":20,"tag":12582,"props":15432,"children":15433},{},[15434],{"type":29,"value":15236},{"type":20,"tag":21,"props":15436,"children":15437},{},[15438],{"type":29,"value":15439},"When attempting to speculate on the greatest challenges to face Software Engineering in the next couple of decades, it is perhaps best to start off with a look at the history of Software Engineering.",{"type":20,"tag":21,"props":15441,"children":15442},{},[15443],{"type":29,"value":15444},"Little less than fifty years ago a conference was held in Germany that is generally accepted as the start of the field of Software Engineering as we know it today: The Nato Conference on Software Engineering.",{"type":20,"tag":21,"props":15446,"children":15447},{},[15448],{"type":29,"value":15449},"According to Buxton (1990), this conference was attended by about 50 thought leaders and its primary consideration was the concern at the time with the so called “Software Crisis”: software projects that are overly expensive, often overdue and not satisfying criteria for reliability and safety. This is illustrated by some quotes of attendees of the conference: “I am concerned about the current growth of systems, and what I expect is probably an exponential growth of errors” (Opler) and “Programming is still too much of an artistic endeavour” (d’Agapeyeff) (Naur and Randell, 1969).",{"type":20,"tag":21,"props":15451,"children":15452},{},[15453],{"type":29,"value":15454},"One gets the impression that this conference was held because people were getting anxious about the fact that advancements in computer science were progressing faster than the perceived ability at the time, to effectively and safely manage its application in the creation of software systems.",{"type":20,"tag":21,"props":15456,"children":15457},{},[15458],{"type":29,"value":15459},"Very recently there have been advances in the field of Artificial Intelligence (AI), that in my view will present similar concerns to those the industry faced in 1968.",{"type":20,"tag":21,"props":15461,"children":15462},{},[15463,15465,15469],{"type":29,"value":15464},"According to Wang et al. (2016), the utilisation of deep learning culminating the program AlphaGo beating a top ranked human Go player represents “… a history making event and a milestone in the quest for artificial intelligence (AI).” Wang ",{"type":20,"tag":12582,"props":15466,"children":15467},{},[15468],{"type":29,"value":15017},{"type":29,"value":15470}," go further to state that “the age of new IT is coming.” The impact of these advancements is illustrated by a recent study by Mckinsey and Company (2016), that claims that 58% of employees’ activities can be automated.",{"type":20,"tag":21,"props":15472,"children":15473},{},[15474],{"type":29,"value":15475},"The problem represented by artificial intelligent systems is that they are not developed in the same way that traditional software systems are developed. In the case of traditional systems, a real-world problem is modeled in software, components are built and tested, the program is deployed and changes are made to keep it up to date. In the case of neural network based systems, in effect, an artificial ‘brain’ is created and trained to solve a particular problem.",{"type":20,"tag":21,"props":15477,"children":15478},{},[15479],{"type":29,"value":15480},"Traditional Software Engineering concepts may not apply to the development of artificial intelligent systems. According to Sommerville (2011), there are four activities fundamental to all software processes: Specification, Development, Validation and Evolution. The execution and relative importance of these activities differ significantly when developing AI systems.",{"type":20,"tag":21,"props":15482,"children":15483},{},[15484],{"type":29,"value":15485},"As a first example, take for instance software component modeling using UML: some real world problem is modeled using diagrams and these diagrams are then abstracted into code to solve a problem. This differs significantly in the case of deep learning systems, as the code does not represent an abstraction of a real world scenario, but rather a network that, if presented with enough examples, will be able to solve a real world problem.",{"type":20,"tag":21,"props":15487,"children":15488},{},[15489],{"type":29,"value":15490},"Secondly, the activity of validation also differs significantly between traditional and AI systems. In the case of traditional systems Unit testing can be performed, as well as integration testing as it is well understood how the program derives at its solution. In the case of AI systems, this is not possible: either the system beats a human player, or it does not!",{"type":20,"tag":21,"props":15492,"children":15493},{},[15494],{"type":29,"value":15495},"Finally, the significance of evolution (bug fixes and enhancements after deployment) is greatly diminished in the case of AI systems: once it performs its task at human (or better) level, there is little further need to enhance the program.",{"type":20,"tag":21,"props":15497,"children":15498},{},[15499],{"type":29,"value":15500},"Does our Software Engineering body of knowledge adequately prepare us for advancements in AI – are we perhaps facing another Software Crisis?",{"type":20,"tag":21,"props":15502,"children":15503},{},[15504],{"type":29,"value":15049},{"type":20,"tag":21,"props":15506,"children":15507},{},[15508,15510,15516],{"type":29,"value":15509},"Buxton, J.N., (1990) ‘Software engineering—20 years on and 20 years back’, Journal of Systems and Software, 13(3), pp 153-155. Doi: ",{"type":20,"tag":54,"props":15511,"children":15514},{"href":15512,"rel":15513},"http:\u002F\u002Fdx.doi.org\u002F10.1016\u002F0164-1212(90)90091-Y",[58],[15515],{"type":29,"value":15512},{"type":29,"value":14748},{"type":20,"tag":21,"props":15518,"children":15519},{},[15520,15522,15528],{"type":29,"value":15521},"Mckinsey & Company, (2016), ‘Four fundamentals of workplace automation’, Available At: ",{"type":20,"tag":54,"props":15523,"children":15526},{"href":15524,"rel":15525},"http:\u002F\u002Fwww.mckinsey.com\u002Fbusiness-functions\u002Fbusiness-technology\u002Four-insights\u002Ffour-fundamentals-of-workplace-automation",[58],[15527],{"type":29,"value":15524},{"type":29,"value":15529}," (Accessed: 5 November 2016)",{"type":20,"tag":21,"props":15531,"children":15532},{},[15533],{"type":29,"value":15534},"Naur, P., Randell, B., (1969) ‘Software Engineering: Report on a Conference sponsored by the NATO Science Committee, Garmisch, Germany, 7th to 11th October 1968, Brussels, Scientific Affairs Division, NATO’.",{"type":20,"tag":21,"props":15536,"children":15537},{},[15538],{"type":29,"value":15403},{"type":20,"tag":21,"props":15540,"children":15541},{},[15542],{"type":29,"value":15543},"Wang, F., Zhang, J.J., Zheng, X., Wang, X., Yuan, Y., Dai, X., Zhang, J. & Yang, L. (2016), ‘Where does AlphaGo go: from church-turing thesis to AlphaGo thesis and beyond’, IEEE\u002FCAA Journal of Automatica Sinica, vol. 3, no. 2, pp. 113.",{"title":8,"searchDepth":202,"depth":202,"links":15545},[],"content:articles:The Challenges Facing Software Engineering.md","articles\u002FThe Challenges Facing Software Engineering.md","articles\u002FThe Challenges Facing Software Engineering",[15550,16076],{"_path":15551,"_dir":15552,"_draft":7,"_partial":7,"_locale":8,"title":15553,"description":15554,"date":11293,"cover":12394,"tags":15555,"body":15557,"_type":11282,"_id":16073,"_source":11284,"_file":16074,"_stem":16075,"_extension":11287},"\u002Fscratchpad\u002Fscala101\u002Fscala101","scala101","Scala 101","Very basics of Scala",[15556],"Scala",{"type":17,"children":15558,"toc":16071},[15559,15566,15574,15579,15584,15607,15612,15617,15624,15636,15653,15661,15666,15674,15679,15691,15696,15703,15708,15716,15728,15739,15746,15751,15758,15776,15783,15794,15804,15812,15817,15825,15835,15843,15848,15853,15858,15865,15870,15877,15882,15894,15917,15927,15935,15942,15947,16006,16011,16019,16024,16029,16036,16041,16046,16051,16063],{"type":20,"tag":21,"props":15560,"children":15561},{},[15562],{"type":20,"tag":25,"props":15563,"children":15564},{},[15565],{"type":29,"value":15553},{"type":20,"tag":21,"props":15567,"children":15568},{},[15569],{"type":20,"tag":34,"props":15570,"children":15573},{"alt":8,"height":9873,"src":15571,"width":15572},"\u002Fimages\u002Fblog\u002FScala101\u002Fimage1.png",300,[],{"type":20,"tag":21,"props":15575,"children":15576},{},[15577],{"type":29,"value":15578},"Scala is a programming language created by Martin Odersky in Switzerland\nand released in 2003. It caters for both the Object Oriented and\nFunctional paradigms. It runs in the JVM and is fully compatible with\nJava, meaning you can have both Scala and Java source within the same\nproject file. It is the language Apache Spark is implemented in. In this\narticle I will document the basics to get started with Scala.",{"type":20,"tag":21,"props":15580,"children":15581},{},[15582],{"type":29,"value":15583},"Below is a list of some of resources consulted for this article:",{"type":20,"tag":67,"props":15585,"children":15586},{},[15587,15592,15597],{"type":20,"tag":71,"props":15588,"children":15589},{},[15590],{"type":29,"value":15591},"Get Programming with Scala (Daniela Sfregola, Manning Books)",{"type":20,"tag":71,"props":15593,"children":15594},{},[15595],{"type":29,"value":15596},"Apache Spark 2.0 with Scala (Frank Kane, Udemy)",{"type":20,"tag":71,"props":15598,"children":15599},{},[15600,15602,15605],{"type":29,"value":15601},"Rock the JVM! Scala and Functional Programming for Beginners (",{"type":20,"tag":1485,"props":15603,"children":15604},{},[],{"type":29,"value":15606},"\nDaniel Ciocîrlan & Andrei Taleanu, Udemy)",{"type":20,"tag":21,"props":15608,"children":15609},{},[15610],{"type":29,"value":15611},"I will be using Jupyter Notebooks, configured to use a Scala Kernel, to\nillustrate the basics of using Scala.",{"type":20,"tag":21,"props":15613,"children":15614},{},[15615],{"type":29,"value":15616},"First up, Hello World:",{"type":20,"tag":21,"props":15618,"children":15619},{},[15620],{"type":20,"tag":34,"props":15621,"children":15623},{"alt":8,"height":9374,"src":15622,"width":1242},"\u002Fimages\u002Fblog\u002FScala101\u002Fimage2.png",[],{"type":20,"tag":21,"props":15625,"children":15626},{},[15627,15629,15634],{"type":29,"value":15628},"The above expressions already illustrates a few concepts of Scala:\nFirstly, although ",{"type":20,"tag":25,"props":15630,"children":15631},{},[15632],{"type":29,"value":15633},"strongly typed",{"type":29,"value":15635},", Scala uses** type inference** to\ndeduce types. Also, semi-colons (;) are not required at the end of\nexpressions.",{"type":20,"tag":21,"props":15637,"children":15638},{},[15639,15644,15646,15651],{"type":20,"tag":25,"props":15640,"children":15641},{},[15642],{"type":29,"value":15643},"Immutability",{"type":29,"value":15645},", although incurring some performance penalties, makes\ncode easier to reason about. In addition, it sidesteps problems such as\ndeadlock and starvation when writing concurrent code. Scala separates\nimmutable and mutable structures, and encourages the use of immutable\nstructures wherever possible. The keyword ",{"type":20,"tag":25,"props":15647,"children":15648},{},[15649],{"type":29,"value":15650},"val",{"type":29,"value":15652}," is used to define\nimmutable values in Scala:",{"type":20,"tag":21,"props":15654,"children":15655},{},[15656],{"type":20,"tag":34,"props":15657,"children":15660},{"alt":8,"height":8767,"src":15658,"width":15659},"\u002Fimages\u002Fblog\u002FScala101\u002Fimage3.png",347,[],{"type":20,"tag":21,"props":15662,"children":15663},{},[15664],{"type":29,"value":15665},"Types:",{"type":20,"tag":21,"props":15667,"children":15668},{},[15669],{"type":20,"tag":34,"props":15670,"children":15673},{"alt":8,"height":9895,"src":15671,"width":15672},"\u002Fimages\u002Fblog\u002FScala101\u002Fimage4.png",521,[],{"type":20,"tag":21,"props":15675,"children":15676},{},[15677],{"type":29,"value":15678},"(Notice types are capitalized, e.g. Int, v.s. int in Java)",{"type":20,"tag":21,"props":15680,"children":15681},{},[15682,15684,15689],{"type":29,"value":15683},"Scala has a feature called ",{"type":20,"tag":25,"props":15685,"children":15686},{},[15687],{"type":29,"value":15688},"Lazy Evaluation",{"type":29,"value":15690},", where the interpreter\ndelays the initialization of lazy values until they are used. This is\nillustrated in the following example:",{"type":20,"tag":21,"props":15692,"children":15693},{},[15694],{"type":29,"value":15695},"Conditional execution:",{"type":20,"tag":21,"props":15697,"children":15698},{},[15699],{"type":20,"tag":34,"props":15700,"children":15702},{"alt":8,"height":8913,"src":15701,"width":1242},"\u002Fimages\u002Fblog\u002FScala101\u002Fimage5.png",[],{"type":20,"tag":21,"props":15704,"children":15705},{},[15706],{"type":29,"value":15707},"Scala's version of the Case statement:",{"type":20,"tag":21,"props":15709,"children":15710},{},[15711],{"type":20,"tag":34,"props":15712,"children":15715},{"alt":8,"height":11658,"src":15713,"width":15714},"\u002Fimages\u002Fblog\u002FScala101\u002Fimage6.png",500,[],{"type":20,"tag":21,"props":15717,"children":15718},{},[15719,15721,15726],{"type":29,"value":15720},"The use of ",{"type":20,"tag":25,"props":15722,"children":15723},{},[15724],{"type":29,"value":15725},"For and While loops",{"type":29,"value":15727}," are discouraged in Scala. Functional\nconstructs such as foreach and map should be used instead.",{"type":20,"tag":21,"props":15729,"children":15730},{},[15731,15733,15738],{"type":29,"value":15732},"Scala caters for outputting formatted text using ",{"type":20,"tag":25,"props":15734,"children":15735},{},[15736],{"type":29,"value":15737},"printf",{"type":29,"value":13369},{"type":20,"tag":21,"props":15740,"children":15741},{},[15742],{"type":20,"tag":34,"props":15743,"children":15745},{"alt":8,"height":4340,"src":15744,"width":1242},"\u002Fimages\u002Fblog\u002FScala101\u002Fimage7.png",[],{"type":20,"tag":21,"props":15747,"children":15748},{},[15749],{"type":29,"value":15750},"Variables can be substituted in a string by prefixing the string with an\ns, and prefixing variables with the $ sign:",{"type":20,"tag":21,"props":15752,"children":15753},{},[15754],{"type":20,"tag":34,"props":15755,"children":15757},{"alt":8,"height":1125,"src":15756,"width":1242},"\u002Fimages\u002Fblog\u002FScala101\u002Fimage8.png",[],{"type":20,"tag":21,"props":15759,"children":15760},{},[15761,15763,15768,15770,15775],{"type":29,"value":15762},"Scala caters for ",{"type":20,"tag":25,"props":15764,"children":15765},{},[15766],{"type":29,"value":15767},"placeholders",{"type":29,"value":15769}," with the characters ",{"type":20,"tag":25,"props":15771,"children":15772},{},[15773],{"type":29,"value":15774},"???",{"type":29,"value":13369},{"type":20,"tag":21,"props":15777,"children":15778},{},[15779],{"type":20,"tag":34,"props":15780,"children":15782},{"alt":8,"height":6787,"src":15781,"width":1242},"\u002Fimages\u002Fblog\u002FScala101\u002Fimage9.png",[],{"type":20,"tag":21,"props":15784,"children":15785},{},[15786,15788,15793],{"type":29,"value":15787},"Due to the functional nature of Scala, ",{"type":20,"tag":25,"props":15789,"children":15790},{},[15791],{"type":29,"value":15792},"expressions can be passed as\nvalues",{"type":29,"value":14748},{"type":20,"tag":21,"props":15795,"children":15796},{},[15797,15802],{"type":20,"tag":25,"props":15798,"children":15799},{},[15800],{"type":29,"value":15801},"Function",{"type":29,"value":15803}," are first class citizens in Scala. They can be passed in as\nparameters to functions. Functions can also return other functions. The\nfollowing is an example of a function definition:",{"type":20,"tag":21,"props":15805,"children":15806},{},[15807],{"type":20,"tag":34,"props":15808,"children":15811},{"alt":8,"height":8812,"src":15809,"width":15810},"\u002Fimages\u002Fblog\u002FScala101\u002Fimage10.png",382,[],{"type":20,"tag":21,"props":15813,"children":15814},{},[15815],{"type":29,"value":15816},"Lambda (anonymous) functions are also supported:",{"type":20,"tag":21,"props":15818,"children":15819},{},[15820],{"type":20,"tag":34,"props":15821,"children":15824},{"alt":8,"height":8792,"src":15822,"width":15823},"\u002Fimages\u002Fblog\u002FScala101\u002Fimage11.png",390,[],{"type":20,"tag":21,"props":15826,"children":15827},{},[15828,15833],{"type":20,"tag":25,"props":15829,"children":15830},{},[15831],{"type":29,"value":15832},"Tuples",{"type":29,"value":15834}," are immutable lists in Scala:",{"type":20,"tag":21,"props":15836,"children":15837},{},[15838],{"type":20,"tag":34,"props":15839,"children":15842},{"alt":8,"height":9454,"src":15840,"width":15841},"\u002Fimages\u002Fblog\u002FScala101\u002Fimage12.png",448,[],{"type":20,"tag":21,"props":15844,"children":15845},{},[15846],{"type":29,"value":15847},"(Notice, tuples are ONE-BASED indexed)",{"type":20,"tag":21,"props":15849,"children":15850},{},[15851],{"type":29,"value":15852},"Tuples can contain different types, but are limited to 22 elements.",{"type":20,"tag":21,"props":15854,"children":15855},{},[15856],{"type":29,"value":15857},"Map:",{"type":20,"tag":21,"props":15859,"children":15860},{},[15861],{"type":20,"tag":34,"props":15862,"children":15864},{"alt":8,"height":3996,"src":15863,"width":1242},"\u002Fimages\u002Fblog\u002FScala101\u002Fimage13.png",[],{"type":20,"tag":21,"props":15866,"children":15867},{},[15868],{"type":29,"value":15869},"If you are not sure the key exists you can use this:",{"type":20,"tag":21,"props":15871,"children":15872},{},[15873],{"type":20,"tag":34,"props":15874,"children":15876},{"alt":8,"height":4232,"src":15875,"width":1242},"\u002Fimages\u002Fblog\u002FScala101\u002Fimage14.png",[],{"type":20,"tag":21,"props":15878,"children":15879},{},[15880],{"type":29,"value":15881},"Maps can be created by passing in tuples.",{"type":20,"tag":21,"props":15883,"children":15884},{},[15885,15887,15892],{"type":29,"value":15886},"**Sequences, **derived from the ",{"type":20,"tag":25,"props":15888,"children":15889},{},[15890],{"type":29,"value":15891},"collection object",{"type":29,"value":15893},", are data\nstructures that have a well defined order and can be indexed. The\nfollowing operations can be applied to them:",{"type":20,"tag":67,"props":15895,"children":15896},{},[15897,15902,15907,15912],{"type":20,"tag":71,"props":15898,"children":15899},{},[15900],{"type":29,"value":15901},"Apply,iterator,length,reverse",{"type":20,"tag":71,"props":15903,"children":15904},{},[15905],{"type":29,"value":15906},"Concatenate, append, prepend",{"type":20,"tag":71,"props":15908,"children":15909},{},[15910],{"type":29,"value":15911},"Group, sort, zip, search, slice",{"type":20,"tag":71,"props":15913,"children":15914},{},[15915],{"type":29,"value":15916},"Map, flatmap, filter",{"type":20,"tag":21,"props":15918,"children":15919},{},[15920,15925],{"type":20,"tag":25,"props":15921,"children":15922},{},[15923],{"type":29,"value":15924},"List",{"type":29,"value":15926}," are a type of sequence, implemented as a singly-linked list.\nHead, tail and isEmpty are fast: O(1), with other operations O(n).",{"type":20,"tag":21,"props":15928,"children":15929},{},[15930],{"type":20,"tag":34,"props":15931,"children":15934},{"alt":8,"height":15932,"src":15933,"width":1242},219,"\u002Fimages\u002Fblog\u002FScala101\u002Fimage15.png",[],{"type":20,"tag":21,"props":15936,"children":15937},{},[15938],{"type":20,"tag":34,"props":15939,"children":15941},{"alt":8,"height":9811,"src":15940,"width":1242},"\u002Fimages\u002Fblog\u002FScala101\u002Fimage16.png",[],{"type":20,"tag":21,"props":15943,"children":15944},{},[15945],{"type":29,"value":15946},"Lists methods:",{"type":20,"tag":67,"props":15948,"children":15949},{},[15950,15958,15966,15974,15982,15990,15998],{"type":20,"tag":71,"props":15951,"children":15952},{},[15953],{"type":20,"tag":12582,"props":15954,"children":15955},{},[15956],{"type":29,"value":15957},"++ To concatenate",{"type":20,"tag":71,"props":15959,"children":15960},{},[15961],{"type":20,"tag":12582,"props":15962,"children":15963},{},[15964],{"type":29,"value":15965},".reverse",{"type":20,"tag":71,"props":15967,"children":15968},{},[15969],{"type":20,"tag":12582,"props":15970,"children":15971},{},[15972],{"type":29,"value":15973},".sorted",{"type":20,"tag":71,"props":15975,"children":15976},{},[15977],{"type":20,"tag":12582,"props":15978,"children":15979},{},[15980],{"type":29,"value":15981},".distinct",{"type":20,"tag":71,"props":15983,"children":15984},{},[15985],{"type":20,"tag":12582,"props":15986,"children":15987},{},[15988],{"type":29,"value":15989},".max",{"type":20,"tag":71,"props":15991,"children":15992},{},[15993],{"type":20,"tag":12582,"props":15994,"children":15995},{},[15996],{"type":29,"value":15997},".sum",{"type":20,"tag":71,"props":15999,"children":16000},{},[16001],{"type":20,"tag":12582,"props":16002,"children":16003},{},[16004],{"type":29,"value":16005},".contains",{"type":20,"tag":21,"props":16007,"children":16008},{},[16009],{"type":29,"value":16010},"Array:",{"type":20,"tag":21,"props":16012,"children":16013},{},[16014],{"type":20,"tag":34,"props":16015,"children":16018},{"alt":8,"height":9504,"src":16016,"width":16017},"\u002Fimages\u002Fblog\u002FScala101\u002Fimage17.png",501,[],{"type":20,"tag":21,"props":16020,"children":16021},{},[16022],{"type":29,"value":16023},"Notice, Arrays are ZERO-INDEXED.",{"type":20,"tag":21,"props":16025,"children":16026},{},[16027],{"type":29,"value":16028},"Arrays can be mutated:",{"type":20,"tag":21,"props":16030,"children":16031},{},[16032],{"type":20,"tag":34,"props":16033,"children":16035},{"alt":8,"height":8775,"src":16034,"width":2365},"\u002Fimages\u002Fblog\u002FScala101\u002Fimage18.png",[],{"type":20,"tag":21,"props":16037,"children":16038},{},[16039],{"type":29,"value":16040},"Arrays also have access to all the sequence methods above.",{"type":20,"tag":21,"props":16042,"children":16043},{},[16044],{"type":29,"value":16045},"Vector:",{"type":20,"tag":21,"props":16047,"children":16048},{},[16049],{"type":29,"value":16050},"Used for immutable sequences. Effectively constant time indexed read and\nwrite: O(logn). Fast append and prepend. It offers good performance for\nlarge data sizes.",{"type":20,"tag":21,"props":16052,"children":16053},{},[16054,16056,16061],{"type":29,"value":16055},"The following example (taken from Get Programming with Scala),\nillustrates the implementation of a ",{"type":20,"tag":25,"props":16057,"children":16058},{},[16059],{"type":29,"value":16060},"class",{"type":29,"value":16062}," in Scala. It also shows\naccess modifiers (i.e. private):",{"type":20,"tag":21,"props":16064,"children":16065},{},[16066],{"type":20,"tag":34,"props":16067,"children":16070},{"alt":8,"height":16068,"src":16069,"width":1242},619,"\u002Fimages\u002Fblog\u002FScala101\u002Fimage19.png",[],{"title":8,"searchDepth":202,"depth":202,"links":16072},[],"content:scratchpad:Scala101:Scala101.md","scratchpad\u002FScala101\u002FScala101.md","scratchpad\u002FScala101\u002FScala101",{"_path":16077,"_dir":16078,"_draft":7,"_partial":7,"_locale":8,"title":16079,"description":16080,"date":11293,"cover":14631,"tags":16081,"body":16083,"_type":11282,"_id":17459,"_source":11284,"_file":17460,"_stem":17461,"_extension":11287},"\u002Fscratchpad\u002Fpythonstarter\u002Fpythonstarter","pythonstarter","Python Quick Start Reference","Very basics of Python",[16082],"Python",{"type":17,"children":16084,"toc":17448},[16085,16090,16095,16102,16107,16112,16153,16158,16181,16186,16217,16223,16228,16234,16241,16246,16260,16265,16303,16504,16509,16523,16528,16533,16564,16569,16608,16614,16647,16652,16657,16671,16677,16682,16705,16711,16716,16816,16821,16897,16902,16957,16962,17024,17029,17132,17138,17314,17320,17444],{"type":20,"tag":4491,"props":16086,"children":16088},{"id":16087},"python-quick-start-reference",[16089],{"type":29,"value":16079},{"type":20,"tag":21,"props":16091,"children":16092},{},[16093],{"type":29,"value":16094},"This post is a quick reference and introduction to Python.",{"type":20,"tag":16096,"props":16097,"children":16099},"h2",{"id":16098},"variables",[16100],{"type":29,"value":16101},"Variables",{"type":20,"tag":21,"props":16103,"children":16104},{},[16105],{"type":29,"value":16106},"Variable names must start with a letter or an underscore. There are 4 kinds of numbers: integers, floats, complex numbers and Booleans.",{"type":20,"tag":21,"props":16108,"children":16109},{},[16110],{"type":29,"value":16111},"Floating point division:",{"type":20,"tag":178,"props":16113,"children":16117},{"className":16114,"code":16115,"language":16116,"meta":8,"style":8},"language-python shiki shiki-themes github-dark","x = 9\ny = 4\nz = x \u002F y\n# = 2.25\n","python",[16118],{"type":20,"tag":185,"props":16119,"children":16120},{"__ignoreMap":8},[16121,16129,16137,16145],{"type":20,"tag":189,"props":16122,"children":16123},{"class":191,"line":192},[16124],{"type":20,"tag":189,"props":16125,"children":16126},{},[16127],{"type":29,"value":16128},"x = 9\n",{"type":20,"tag":189,"props":16130,"children":16131},{"class":191,"line":202},[16132],{"type":20,"tag":189,"props":16133,"children":16134},{},[16135],{"type":29,"value":16136},"y = 4\n",{"type":20,"tag":189,"props":16138,"children":16139},{"class":191,"line":217},[16140],{"type":20,"tag":189,"props":16141,"children":16142},{},[16143],{"type":29,"value":16144},"z = x \u002F y\n",{"type":20,"tag":189,"props":16146,"children":16147},{"class":191,"line":231},[16148],{"type":20,"tag":189,"props":16149,"children":16150},{},[16151],{"type":29,"value":16152},"# = 2.25\n",{"type":20,"tag":21,"props":16154,"children":16155},{},[16156],{"type":29,"value":16157},"Integer division:",{"type":20,"tag":178,"props":16159,"children":16161},{"className":16114,"code":16160,"language":16116,"meta":8,"style":8},"z = x \u002F\u002F y\n# z = 2\n",[16162],{"type":20,"tag":185,"props":16163,"children":16164},{"__ignoreMap":8},[16165,16173],{"type":20,"tag":189,"props":16166,"children":16167},{"class":191,"line":192},[16168],{"type":20,"tag":189,"props":16169,"children":16170},{},[16171],{"type":29,"value":16172},"z = x \u002F\u002F y\n",{"type":20,"tag":189,"props":16174,"children":16175},{"class":191,"line":202},[16176],{"type":20,"tag":189,"props":16177,"children":16178},{},[16179],{"type":29,"value":16180},"# z = 2\n",{"type":20,"tag":21,"props":16182,"children":16183},{},[16184],{"type":29,"value":16185},"Strings:",{"type":20,"tag":178,"props":16187,"children":16189},{"className":16114,"code":16188,"language":16116,"meta":8,"style":8},"x = \"\"\"Starting and ending a string with triple \" characters\npermits embedded newlines, and the use of \" and ' without\nbackslashes\"\"\"\n",[16190],{"type":20,"tag":185,"props":16191,"children":16192},{"__ignoreMap":8},[16193,16201,16209],{"type":20,"tag":189,"props":16194,"children":16195},{"class":191,"line":192},[16196],{"type":20,"tag":189,"props":16197,"children":16198},{},[16199],{"type":29,"value":16200},"x = \"\"\"Starting and ending a string with triple \" characters\n",{"type":20,"tag":189,"props":16202,"children":16203},{"class":191,"line":202},[16204],{"type":20,"tag":189,"props":16205,"children":16206},{},[16207],{"type":29,"value":16208},"permits embedded newlines, and the use of \" and ' without\n",{"type":20,"tag":189,"props":16210,"children":16211},{"class":191,"line":217},[16212],{"type":20,"tag":189,"props":16213,"children":16214},{},[16215],{"type":29,"value":16216},"backslashes\"\"\"\n",{"type":20,"tag":16218,"props":16219,"children":16220},"h4",{"id":3895},[16221],{"type":29,"value":16222},"None",{"type":20,"tag":21,"props":16224,"children":16225},{},[16226],{"type":29,"value":16227},"-> Like null, i.e. placeholder for some future value",{"type":20,"tag":16096,"props":16229,"children":16231},{"id":16230},"data-structures",[16232],{"type":29,"value":16233},"Data Structures",{"type":20,"tag":16235,"props":16236,"children":16238},"h3",{"id":16237},"lists",[16239],{"type":29,"value":16240},"Lists",{"type":20,"tag":21,"props":16242,"children":16243},{},[16244],{"type":29,"value":16245},"Similar to arrays. Automatically grows as required. Can mix up date types in it.",{"type":20,"tag":178,"props":16247,"children":16249},{"className":16114,"code":16248,"language":16116,"meta":8,"style":8},"x = [1, 2, 3]\n",[16250],{"type":20,"tag":185,"props":16251,"children":16252},{"__ignoreMap":8},[16253],{"type":20,"tag":189,"props":16254,"children":16255},{"class":191,"line":192},[16256],{"type":20,"tag":189,"props":16257,"children":16258},{},[16259],{"type":29,"value":16248},{"type":20,"tag":21,"props":16261,"children":16262},{},[16263],{"type":29,"value":16264},"Example:",{"type":20,"tag":178,"props":16266,"children":16268},{"className":16114,"code":16267,"language":16116,"meta":8,"style":8},"my_list = [\"apple\", \"banana\", \"cherry\", \"date\"]\n\nfor item in my_list:\n    print(item)\n",[16269],{"type":20,"tag":185,"props":16270,"children":16271},{"__ignoreMap":8},[16272,16280,16287,16295],{"type":20,"tag":189,"props":16273,"children":16274},{"class":191,"line":192},[16275],{"type":20,"tag":189,"props":16276,"children":16277},{},[16278],{"type":29,"value":16279},"my_list = [\"apple\", \"banana\", \"cherry\", \"date\"]\n",{"type":20,"tag":189,"props":16281,"children":16282},{"class":191,"line":202},[16283],{"type":20,"tag":189,"props":16284,"children":16285},{"emptyLinePlaceholder":397},[16286],{"type":29,"value":400},{"type":20,"tag":189,"props":16288,"children":16289},{"class":191,"line":217},[16290],{"type":20,"tag":189,"props":16291,"children":16292},{},[16293],{"type":29,"value":16294},"for item in my_list:\n",{"type":20,"tag":189,"props":16296,"children":16297},{"class":191,"line":231},[16298],{"type":20,"tag":189,"props":16299,"children":16300},{},[16301],{"type":29,"value":16302},"    print(item)\n",{"type":20,"tag":178,"props":16304,"children":16306},{"className":16114,"code":16305,"language":16116,"meta":8,"style":8},"my_list[0]\n# 'apple'\n\nmy_list[-1]\n# 'date'\n\nmy_list[1:3]\n# ['banana', 'cherry']\n\n# Make a copy of a list\nx = my_list[:]\n# x = ['apple', 'banana', 'cherry', 'date']\n\n# Add element at the end\nmy_list.append('pear')\n# x = ['apple', 'banana', 'cherry', 'date', 'pear']\n\n# Remove the first instance of an occurence\nmy_list.remove('banana')\nmy_list\n['apple', 'cherry', 'date', 'pear']\n\n# List membership\n'apple' in my_list\n# True\n\n",[16307],{"type":20,"tag":185,"props":16308,"children":16309},{"__ignoreMap":8},[16310,16318,16326,16333,16341,16349,16356,16364,16372,16379,16387,16395,16403,16410,16418,16426,16434,16441,16449,16457,16465,16473,16480,16488,16496],{"type":20,"tag":189,"props":16311,"children":16312},{"class":191,"line":192},[16313],{"type":20,"tag":189,"props":16314,"children":16315},{},[16316],{"type":29,"value":16317},"my_list[0]\n",{"type":20,"tag":189,"props":16319,"children":16320},{"class":191,"line":202},[16321],{"type":20,"tag":189,"props":16322,"children":16323},{},[16324],{"type":29,"value":16325},"# 'apple'\n",{"type":20,"tag":189,"props":16327,"children":16328},{"class":191,"line":217},[16329],{"type":20,"tag":189,"props":16330,"children":16331},{"emptyLinePlaceholder":397},[16332],{"type":29,"value":400},{"type":20,"tag":189,"props":16334,"children":16335},{"class":191,"line":231},[16336],{"type":20,"tag":189,"props":16337,"children":16338},{},[16339],{"type":29,"value":16340},"my_list[-1]\n",{"type":20,"tag":189,"props":16342,"children":16343},{"class":191,"line":245},[16344],{"type":20,"tag":189,"props":16345,"children":16346},{},[16347],{"type":29,"value":16348},"# 'date'\n",{"type":20,"tag":189,"props":16350,"children":16351},{"class":191,"line":259},[16352],{"type":20,"tag":189,"props":16353,"children":16354},{"emptyLinePlaceholder":397},[16355],{"type":29,"value":400},{"type":20,"tag":189,"props":16357,"children":16358},{"class":191,"line":272},[16359],{"type":20,"tag":189,"props":16360,"children":16361},{},[16362],{"type":29,"value":16363},"my_list[1:3]\n",{"type":20,"tag":189,"props":16365,"children":16366},{"class":191,"line":286},[16367],{"type":20,"tag":189,"props":16368,"children":16369},{},[16370],{"type":29,"value":16371},"# ['banana', 'cherry']\n",{"type":20,"tag":189,"props":16373,"children":16374},{"class":191,"line":300},[16375],{"type":20,"tag":189,"props":16376,"children":16377},{"emptyLinePlaceholder":397},[16378],{"type":29,"value":400},{"type":20,"tag":189,"props":16380,"children":16381},{"class":191,"line":314},[16382],{"type":20,"tag":189,"props":16383,"children":16384},{},[16385],{"type":29,"value":16386},"# Make a copy of a list\n",{"type":20,"tag":189,"props":16388,"children":16389},{"class":191,"line":328},[16390],{"type":20,"tag":189,"props":16391,"children":16392},{},[16393],{"type":29,"value":16394},"x = my_list[:]\n",{"type":20,"tag":189,"props":16396,"children":16397},{"class":191,"line":342},[16398],{"type":20,"tag":189,"props":16399,"children":16400},{},[16401],{"type":29,"value":16402},"# x = ['apple', 'banana', 'cherry', 'date']\n",{"type":20,"tag":189,"props":16404,"children":16405},{"class":191,"line":356},[16406],{"type":20,"tag":189,"props":16407,"children":16408},{"emptyLinePlaceholder":397},[16409],{"type":29,"value":400},{"type":20,"tag":189,"props":16411,"children":16412},{"class":191,"line":375},[16413],{"type":20,"tag":189,"props":16414,"children":16415},{},[16416],{"type":29,"value":16417},"# Add element at the end\n",{"type":20,"tag":189,"props":16419,"children":16420},{"class":191,"line":384},[16421],{"type":20,"tag":189,"props":16422,"children":16423},{},[16424],{"type":29,"value":16425},"my_list.append('pear')\n",{"type":20,"tag":189,"props":16427,"children":16428},{"class":191,"line":393},[16429],{"type":20,"tag":189,"props":16430,"children":16431},{},[16432],{"type":29,"value":16433},"# x = ['apple', 'banana', 'cherry', 'date', 'pear']\n",{"type":20,"tag":189,"props":16435,"children":16436},{"class":191,"line":403},[16437],{"type":20,"tag":189,"props":16438,"children":16439},{"emptyLinePlaceholder":397},[16440],{"type":29,"value":400},{"type":20,"tag":189,"props":16442,"children":16443},{"class":191,"line":411},[16444],{"type":20,"tag":189,"props":16445,"children":16446},{},[16447],{"type":29,"value":16448},"# Remove the first instance of an occurence\n",{"type":20,"tag":189,"props":16450,"children":16451},{"class":191,"line":423},[16452],{"type":20,"tag":189,"props":16453,"children":16454},{},[16455],{"type":29,"value":16456},"my_list.remove('banana')\n",{"type":20,"tag":189,"props":16458,"children":16459},{"class":191,"line":436},[16460],{"type":20,"tag":189,"props":16461,"children":16462},{},[16463],{"type":29,"value":16464},"my_list\n",{"type":20,"tag":189,"props":16466,"children":16467},{"class":191,"line":449},[16468],{"type":20,"tag":189,"props":16469,"children":16470},{},[16471],{"type":29,"value":16472},"['apple', 'cherry', 'date', 'pear']\n",{"type":20,"tag":189,"props":16474,"children":16475},{"class":191,"line":462},[16476],{"type":20,"tag":189,"props":16477,"children":16478},{"emptyLinePlaceholder":397},[16479],{"type":29,"value":400},{"type":20,"tag":189,"props":16481,"children":16482},{"class":191,"line":475},[16483],{"type":20,"tag":189,"props":16484,"children":16485},{},[16486],{"type":29,"value":16487},"# List membership\n",{"type":20,"tag":189,"props":16489,"children":16490},{"class":191,"line":487},[16491],{"type":20,"tag":189,"props":16492,"children":16493},{},[16494],{"type":29,"value":16495},"'apple' in my_list\n",{"type":20,"tag":189,"props":16497,"children":16498},{"class":191,"line":499},[16499],{"type":20,"tag":189,"props":16500,"children":16501},{},[16502],{"type":29,"value":16503},"# True\n",{"type":20,"tag":21,"props":16505,"children":16506},{},[16507],{"type":29,"value":16508},"Sorting a list:",{"type":20,"tag":178,"props":16510,"children":16512},{"className":16114,"code":16511,"language":16116,"meta":8,"style":8},"my_list.sort()\n",[16513],{"type":20,"tag":185,"props":16514,"children":16515},{"__ignoreMap":8},[16516],{"type":20,"tag":189,"props":16517,"children":16518},{"class":191,"line":192},[16519],{"type":20,"tag":189,"props":16520,"children":16521},{},[16522],{"type":29,"value":16511},{"type":20,"tag":21,"props":16524,"children":16525},{},[16526],{"type":29,"value":16527},"Can  concatenate lists using + operator.",{"type":20,"tag":21,"props":16529,"children":16530},{},[16531],{"type":29,"value":16532},"Two dimensional matrices:",{"type":20,"tag":178,"props":16534,"children":16536},{"className":16114,"code":16535,"language":16116,"meta":8,"style":8},"m = [[0, 1, 2], [10, 11, 12], [20, 21, 22]]\nm[2][2]\n# 22\n",[16537],{"type":20,"tag":185,"props":16538,"children":16539},{"__ignoreMap":8},[16540,16548,16556],{"type":20,"tag":189,"props":16541,"children":16542},{"class":191,"line":192},[16543],{"type":20,"tag":189,"props":16544,"children":16545},{},[16546],{"type":29,"value":16547},"m = [[0, 1, 2], [10, 11, 12], [20, 21, 22]]\n",{"type":20,"tag":189,"props":16549,"children":16550},{"class":191,"line":202},[16551],{"type":20,"tag":189,"props":16552,"children":16553},{},[16554],{"type":29,"value":16555},"m[2][2]\n",{"type":20,"tag":189,"props":16557,"children":16558},{"class":191,"line":217},[16559],{"type":20,"tag":189,"props":16560,"children":16561},{},[16562],{"type":29,"value":16563},"# 22\n",{"type":20,"tag":21,"props":16565,"children":16566},{},[16567],{"type":29,"value":16568},"Create a deep copy of a list",{"type":20,"tag":178,"props":16570,"children":16572},{"className":16114,"code":16571,"language":16116,"meta":8,"style":8},"original = [[0], 1]\nshallow = original[:]\nimport copy\ndeep = copy.deepcopy(original)\n",[16573],{"type":20,"tag":185,"props":16574,"children":16575},{"__ignoreMap":8},[16576,16584,16592,16600],{"type":20,"tag":189,"props":16577,"children":16578},{"class":191,"line":192},[16579],{"type":20,"tag":189,"props":16580,"children":16581},{},[16582],{"type":29,"value":16583},"original = [[0], 1]\n",{"type":20,"tag":189,"props":16585,"children":16586},{"class":191,"line":202},[16587],{"type":20,"tag":189,"props":16588,"children":16589},{},[16590],{"type":29,"value":16591},"shallow = original[:]\n",{"type":20,"tag":189,"props":16593,"children":16594},{"class":191,"line":217},[16595],{"type":20,"tag":189,"props":16596,"children":16597},{},[16598],{"type":29,"value":16599},"import copy\n",{"type":20,"tag":189,"props":16601,"children":16602},{"class":191,"line":231},[16603],{"type":20,"tag":189,"props":16604,"children":16605},{},[16606],{"type":29,"value":16607},"deep = copy.deepcopy(original)\n",{"type":20,"tag":16218,"props":16609,"children":16611},{"id":16610},"other",[16612],{"type":29,"value":16613},"Other",{"type":20,"tag":67,"props":16615,"children":16616},{},[16617,16622,16627,16632,16637,16642],{"type":20,"tag":71,"props":16618,"children":16619},{},[16620],{"type":29,"value":16621},"len",{"type":20,"tag":71,"props":16623,"children":16624},{},[16625],{"type":29,"value":16626},"min",{"type":20,"tag":71,"props":16628,"children":16629},{},[16630],{"type":29,"value":16631},"max",{"type":20,"tag":71,"props":16633,"children":16634},{},[16635],{"type":29,"value":16636},"index",{"type":20,"tag":71,"props":16638,"children":16639},{},[16640],{"type":29,"value":16641},"count",{"type":20,"tag":71,"props":16643,"children":16644},{},[16645],{"type":29,"value":16646},"sum",{"type":20,"tag":16235,"props":16648,"children":16650},{"id":16649},"tuples",[16651],{"type":29,"value":15832},{"type":20,"tag":21,"props":16653,"children":16654},{},[16655],{"type":29,"value":16656},"Similar to lists, but cannot be modified.\nE.g.",{"type":20,"tag":178,"props":16658,"children":16660},{"className":16114,"code":16659,"language":16116,"meta":8,"style":8},"x = ('a', 'b', 'c')\n",[16661],{"type":20,"tag":185,"props":16662,"children":16663},{"__ignoreMap":8},[16664],{"type":20,"tag":189,"props":16665,"children":16666},{"class":191,"line":192},[16667],{"type":20,"tag":189,"props":16668,"children":16669},{},[16670],{"type":29,"value":16659},{"type":20,"tag":16235,"props":16672,"children":16674},{"id":16673},"sets",[16675],{"type":29,"value":16676},"Sets",{"type":20,"tag":21,"props":16678,"children":16679},{},[16680],{"type":29,"value":16681},"E.g.",{"type":20,"tag":178,"props":16683,"children":16685},{"className":16114,"code":16684,"language":16116,"meta":8,"style":8},"x = set([1, 2, 3, 1, 3, 5])\n# x = {1, 2, 3, 5}\n",[16686],{"type":20,"tag":185,"props":16687,"children":16688},{"__ignoreMap":8},[16689,16697],{"type":20,"tag":189,"props":16690,"children":16691},{"class":191,"line":192},[16692],{"type":20,"tag":189,"props":16693,"children":16694},{},[16695],{"type":29,"value":16696},"x = set([1, 2, 3, 1, 3, 5])\n",{"type":20,"tag":189,"props":16698,"children":16699},{"class":191,"line":202},[16700],{"type":20,"tag":189,"props":16701,"children":16702},{},[16703],{"type":29,"value":16704},"# x = {1, 2, 3, 5}\n",{"type":20,"tag":16096,"props":16706,"children":16708},{"id":16707},"strings",[16709],{"type":29,"value":16710},"Strings",{"type":20,"tag":21,"props":16712,"children":16713},{},[16714],{"type":29,"value":16715},"Like arrays of characters, but imutable. Can be concatenated with '+' operator (but join operator is more efficient).",{"type":20,"tag":178,"props":16717,"children":16719},{"className":16114,"code":16718,"language":16116,"meta":8,"style":8},"x = \"Goodbye\\n\"\nx = x[:-1]\n# x = 'Goodbye'\n\nlen(\"Goodbye\")\n# 7 \n\n\" \".join([\"join\", \"puts\", \"spaces\", \"between\", \"elements\"])\n# 'join puts spaces between elements'\n\n\"\".join([\"Separated\", \"by\", \"nothing\"])\n# 'Separatedbynothing'\n",[16720],{"type":20,"tag":185,"props":16721,"children":16722},{"__ignoreMap":8},[16723,16731,16739,16747,16754,16762,16770,16777,16785,16793,16800,16808],{"type":20,"tag":189,"props":16724,"children":16725},{"class":191,"line":192},[16726],{"type":20,"tag":189,"props":16727,"children":16728},{},[16729],{"type":29,"value":16730},"x = \"Goodbye\\n\"\n",{"type":20,"tag":189,"props":16732,"children":16733},{"class":191,"line":202},[16734],{"type":20,"tag":189,"props":16735,"children":16736},{},[16737],{"type":29,"value":16738},"x = x[:-1]\n",{"type":20,"tag":189,"props":16740,"children":16741},{"class":191,"line":217},[16742],{"type":20,"tag":189,"props":16743,"children":16744},{},[16745],{"type":29,"value":16746},"# x = 'Goodbye'\n",{"type":20,"tag":189,"props":16748,"children":16749},{"class":191,"line":231},[16750],{"type":20,"tag":189,"props":16751,"children":16752},{"emptyLinePlaceholder":397},[16753],{"type":29,"value":400},{"type":20,"tag":189,"props":16755,"children":16756},{"class":191,"line":245},[16757],{"type":20,"tag":189,"props":16758,"children":16759},{},[16760],{"type":29,"value":16761},"len(\"Goodbye\")\n",{"type":20,"tag":189,"props":16763,"children":16764},{"class":191,"line":259},[16765],{"type":20,"tag":189,"props":16766,"children":16767},{},[16768],{"type":29,"value":16769},"# 7 \n",{"type":20,"tag":189,"props":16771,"children":16772},{"class":191,"line":272},[16773],{"type":20,"tag":189,"props":16774,"children":16775},{"emptyLinePlaceholder":397},[16776],{"type":29,"value":400},{"type":20,"tag":189,"props":16778,"children":16779},{"class":191,"line":286},[16780],{"type":20,"tag":189,"props":16781,"children":16782},{},[16783],{"type":29,"value":16784},"\" \".join([\"join\", \"puts\", \"spaces\", \"between\", \"elements\"])\n",{"type":20,"tag":189,"props":16786,"children":16787},{"class":191,"line":300},[16788],{"type":20,"tag":189,"props":16789,"children":16790},{},[16791],{"type":29,"value":16792},"# 'join puts spaces between elements'\n",{"type":20,"tag":189,"props":16794,"children":16795},{"class":191,"line":314},[16796],{"type":20,"tag":189,"props":16797,"children":16798},{"emptyLinePlaceholder":397},[16799],{"type":29,"value":400},{"type":20,"tag":189,"props":16801,"children":16802},{"class":191,"line":328},[16803],{"type":20,"tag":189,"props":16804,"children":16805},{},[16806],{"type":29,"value":16807},"\"\".join([\"Separated\", \"by\", \"nothing\"])\n",{"type":20,"tag":189,"props":16809,"children":16810},{"class":191,"line":342},[16811],{"type":20,"tag":189,"props":16812,"children":16813},{},[16814],{"type":29,"value":16815},"# 'Separatedbynothing'\n",{"type":20,"tag":16218,"props":16817,"children":16819},{"id":16818},"other-1",[16820],{"type":29,"value":16613},{"type":20,"tag":67,"props":16822,"children":16823},{},[16824,16829,16834,16839,16843,16847,16852,16857,16862,16867,16872,16877,16882,16887,16892],{"type":20,"tag":71,"props":16825,"children":16826},{},[16827],{"type":29,"value":16828},"split",{"type":20,"tag":71,"props":16830,"children":16831},{},[16832],{"type":29,"value":16833},"strip, lstrip, rstrip",{"type":20,"tag":71,"props":16835,"children":16836},{},[16837],{"type":29,"value":16838},"find",{"type":20,"tag":71,"props":16840,"children":16841},{},[16842],{"type":29,"value":16636},{"type":20,"tag":71,"props":16844,"children":16845},{},[16846],{"type":29,"value":16641},{"type":20,"tag":71,"props":16848,"children":16849},{},[16850],{"type":29,"value":16851},"startswith, endswith",{"type":20,"tag":71,"props":16853,"children":16854},{},[16855],{"type":29,"value":16856},"replace",{"type":20,"tag":71,"props":16858,"children":16859},{},[16860],{"type":29,"value":16861},"isdigit",{"type":20,"tag":71,"props":16863,"children":16864},{},[16865],{"type":29,"value":16866},"isalpha",{"type":20,"tag":71,"props":16868,"children":16869},{},[16870],{"type":29,"value":16871},"islower",{"type":20,"tag":71,"props":16873,"children":16874},{},[16875],{"type":29,"value":16876},"isupper",{"type":20,"tag":71,"props":16878,"children":16879},{},[16880],{"type":29,"value":16881},"upper",{"type":20,"tag":71,"props":16883,"children":16884},{},[16885],{"type":29,"value":16886},"lower",{"type":20,"tag":71,"props":16888,"children":16889},{},[16890],{"type":29,"value":16891},"title",{"type":20,"tag":71,"props":16893,"children":16894},{},[16895],{"type":29,"value":16896},"repr \u002F str (converts an object to a string)",{"type":20,"tag":21,"props":16898,"children":16899},{},[16900],{"type":29,"value":16901},"Can also convert to a list, manipulate and convert back:",{"type":20,"tag":178,"props":16903,"children":16905},{"className":16114,"code":16904,"language":16116,"meta":8,"style":8},"text = \"Hello World\"\nwordList = list(text)\nwordList.reverse()\ntext = \"\".join(wordList)\nprint(text)\n# dlroW olleH\n",[16906],{"type":20,"tag":185,"props":16907,"children":16908},{"__ignoreMap":8},[16909,16917,16925,16933,16941,16949],{"type":20,"tag":189,"props":16910,"children":16911},{"class":191,"line":192},[16912],{"type":20,"tag":189,"props":16913,"children":16914},{},[16915],{"type":29,"value":16916},"text = \"Hello World\"\n",{"type":20,"tag":189,"props":16918,"children":16919},{"class":191,"line":202},[16920],{"type":20,"tag":189,"props":16921,"children":16922},{},[16923],{"type":29,"value":16924},"wordList = list(text)\n",{"type":20,"tag":189,"props":16926,"children":16927},{"class":191,"line":217},[16928],{"type":20,"tag":189,"props":16929,"children":16930},{},[16931],{"type":29,"value":16932},"wordList.reverse()\n",{"type":20,"tag":189,"props":16934,"children":16935},{"class":191,"line":231},[16936],{"type":20,"tag":189,"props":16937,"children":16938},{},[16939],{"type":29,"value":16940},"text = \"\".join(wordList)\n",{"type":20,"tag":189,"props":16942,"children":16943},{"class":191,"line":245},[16944],{"type":20,"tag":189,"props":16945,"children":16946},{},[16947],{"type":29,"value":16948},"print(text)\n",{"type":20,"tag":189,"props":16950,"children":16951},{"class":191,"line":259},[16952],{"type":20,"tag":189,"props":16953,"children":16954},{},[16955],{"type":29,"value":16956},"# dlroW olleH\n",{"type":20,"tag":21,"props":16958,"children":16959},{},[16960],{"type":29,"value":16961},"String interpolation:",{"type":20,"tag":178,"props":16963,"children":16965},{"className":16114,"code":16964,"language":16116,"meta":8,"style":8},"\"%s is the %s of %s\" % (\"Ambrosia\", \"food\", \"the gods\")\n# 'Ambrosia is the food of the gods'\n\nvalue = 42\nmessage = f\"The answer is {value}\"\nprint(message)\n# The answer is 42\n",[16966],{"type":20,"tag":185,"props":16967,"children":16968},{"__ignoreMap":8},[16969,16977,16985,16992,17000,17008,17016],{"type":20,"tag":189,"props":16970,"children":16971},{"class":191,"line":192},[16972],{"type":20,"tag":189,"props":16973,"children":16974},{},[16975],{"type":29,"value":16976},"\"%s is the %s of %s\" % (\"Ambrosia\", \"food\", \"the gods\")\n",{"type":20,"tag":189,"props":16978,"children":16979},{"class":191,"line":202},[16980],{"type":20,"tag":189,"props":16981,"children":16982},{},[16983],{"type":29,"value":16984},"# 'Ambrosia is the food of the gods'\n",{"type":20,"tag":189,"props":16986,"children":16987},{"class":191,"line":217},[16988],{"type":20,"tag":189,"props":16989,"children":16990},{"emptyLinePlaceholder":397},[16991],{"type":29,"value":400},{"type":20,"tag":189,"props":16993,"children":16994},{"class":191,"line":231},[16995],{"type":20,"tag":189,"props":16996,"children":16997},{},[16998],{"type":29,"value":16999},"value = 42\n",{"type":20,"tag":189,"props":17001,"children":17002},{"class":191,"line":245},[17003],{"type":20,"tag":189,"props":17004,"children":17005},{},[17006],{"type":29,"value":17007},"message = f\"The answer is {value}\"\n",{"type":20,"tag":189,"props":17009,"children":17010},{"class":191,"line":259},[17011],{"type":20,"tag":189,"props":17012,"children":17013},{},[17014],{"type":29,"value":17015},"print(message)\n",{"type":20,"tag":189,"props":17017,"children":17018},{"class":191,"line":272},[17019],{"type":20,"tag":189,"props":17020,"children":17021},{},[17022],{"type":29,"value":17023},"# The answer is 42\n",{"type":20,"tag":21,"props":17025,"children":17026},{},[17027],{"type":29,"value":17028},"Example of reading and cleaning an input file:",{"type":20,"tag":178,"props":17030,"children":17032},{"className":16114,"code":17031,"language":16116,"meta":8,"style":8},"with open(\"moby_01.txt\") as infile, open(\"moby_01_clean.txt\", \"w\") as\noutfile:\n    for line in infile:\n        # make all one case\n        cleaned_line = line.lower()\n        # remove punctuation\n        cleaned_line = cleaned_line.translate(punct)\n        # split into words\n        words = cleaned_line.split()\n        cleaned_words = \"\\n\".join(words)\n        # write all words for line\n        outfile.write(cleaned_words)\n",[17033],{"type":20,"tag":185,"props":17034,"children":17035},{"__ignoreMap":8},[17036,17044,17052,17060,17068,17076,17084,17092,17100,17108,17116,17124],{"type":20,"tag":189,"props":17037,"children":17038},{"class":191,"line":192},[17039],{"type":20,"tag":189,"props":17040,"children":17041},{},[17042],{"type":29,"value":17043},"with open(\"moby_01.txt\") as infile, open(\"moby_01_clean.txt\", \"w\") as\n",{"type":20,"tag":189,"props":17045,"children":17046},{"class":191,"line":202},[17047],{"type":20,"tag":189,"props":17048,"children":17049},{},[17050],{"type":29,"value":17051},"outfile:\n",{"type":20,"tag":189,"props":17053,"children":17054},{"class":191,"line":217},[17055],{"type":20,"tag":189,"props":17056,"children":17057},{},[17058],{"type":29,"value":17059},"    for line in infile:\n",{"type":20,"tag":189,"props":17061,"children":17062},{"class":191,"line":231},[17063],{"type":20,"tag":189,"props":17064,"children":17065},{},[17066],{"type":29,"value":17067},"        # make all one case\n",{"type":20,"tag":189,"props":17069,"children":17070},{"class":191,"line":245},[17071],{"type":20,"tag":189,"props":17072,"children":17073},{},[17074],{"type":29,"value":17075},"        cleaned_line = line.lower()\n",{"type":20,"tag":189,"props":17077,"children":17078},{"class":191,"line":259},[17079],{"type":20,"tag":189,"props":17080,"children":17081},{},[17082],{"type":29,"value":17083},"        # remove punctuation\n",{"type":20,"tag":189,"props":17085,"children":17086},{"class":191,"line":272},[17087],{"type":20,"tag":189,"props":17088,"children":17089},{},[17090],{"type":29,"value":17091},"        cleaned_line = cleaned_line.translate(punct)\n",{"type":20,"tag":189,"props":17093,"children":17094},{"class":191,"line":286},[17095],{"type":20,"tag":189,"props":17096,"children":17097},{},[17098],{"type":29,"value":17099},"        # split into words\n",{"type":20,"tag":189,"props":17101,"children":17102},{"class":191,"line":300},[17103],{"type":20,"tag":189,"props":17104,"children":17105},{},[17106],{"type":29,"value":17107},"        words = cleaned_line.split()\n",{"type":20,"tag":189,"props":17109,"children":17110},{"class":191,"line":314},[17111],{"type":20,"tag":189,"props":17112,"children":17113},{},[17114],{"type":29,"value":17115},"        cleaned_words = \"\\n\".join(words)\n",{"type":20,"tag":189,"props":17117,"children":17118},{"class":191,"line":328},[17119],{"type":20,"tag":189,"props":17120,"children":17121},{},[17122],{"type":29,"value":17123},"        # write all words for line\n",{"type":20,"tag":189,"props":17125,"children":17126},{"class":191,"line":342},[17127],{"type":20,"tag":189,"props":17128,"children":17129},{},[17130],{"type":29,"value":17131},"        outfile.write(cleaned_words)\n",{"type":20,"tag":16096,"props":17133,"children":17135},{"id":17134},"dictionaries",[17136],{"type":29,"value":17137},"Dictionaries",{"type":20,"tag":178,"props":17139,"children":17141},{"className":16114,"code":17140,"language":16116,"meta":8,"style":8},"english_to_french = {'red': 'rouge', 'blue': 'bleu', 'green': 'vert'}\nprint(\"red is\", english_to_french['red'])\n# red is rouge\n\nlist(english_to_french.keys())\n# ['green', 'blue', 'red']\n\nlist(english_to_french.values())\n# ['vert', 'bleu', 'rouge']\n\ndel english_to_french['green']\n# [('blue', 'bleu'), ('red', 'rouge')]\n\n'red' in english_to_french\n# True\n\nprint(english_to_french.get('chartreuse', 'No translation'))\n# No translation\n\n#-> Word count example:\n    for word in sample_string.split():\n        occurrences[word] = occurrences.get(word, 0) + 1\n",[17142],{"type":20,"tag":185,"props":17143,"children":17144},{"__ignoreMap":8},[17145,17153,17161,17169,17176,17184,17192,17199,17207,17215,17222,17230,17238,17245,17253,17260,17267,17275,17283,17290,17298,17306],{"type":20,"tag":189,"props":17146,"children":17147},{"class":191,"line":192},[17148],{"type":20,"tag":189,"props":17149,"children":17150},{},[17151],{"type":29,"value":17152},"english_to_french = {'red': 'rouge', 'blue': 'bleu', 'green': 'vert'}\n",{"type":20,"tag":189,"props":17154,"children":17155},{"class":191,"line":202},[17156],{"type":20,"tag":189,"props":17157,"children":17158},{},[17159],{"type":29,"value":17160},"print(\"red is\", english_to_french['red'])\n",{"type":20,"tag":189,"props":17162,"children":17163},{"class":191,"line":217},[17164],{"type":20,"tag":189,"props":17165,"children":17166},{},[17167],{"type":29,"value":17168},"# red is rouge\n",{"type":20,"tag":189,"props":17170,"children":17171},{"class":191,"line":231},[17172],{"type":20,"tag":189,"props":17173,"children":17174},{"emptyLinePlaceholder":397},[17175],{"type":29,"value":400},{"type":20,"tag":189,"props":17177,"children":17178},{"class":191,"line":245},[17179],{"type":20,"tag":189,"props":17180,"children":17181},{},[17182],{"type":29,"value":17183},"list(english_to_french.keys())\n",{"type":20,"tag":189,"props":17185,"children":17186},{"class":191,"line":259},[17187],{"type":20,"tag":189,"props":17188,"children":17189},{},[17190],{"type":29,"value":17191},"# ['green', 'blue', 'red']\n",{"type":20,"tag":189,"props":17193,"children":17194},{"class":191,"line":272},[17195],{"type":20,"tag":189,"props":17196,"children":17197},{"emptyLinePlaceholder":397},[17198],{"type":29,"value":400},{"type":20,"tag":189,"props":17200,"children":17201},{"class":191,"line":286},[17202],{"type":20,"tag":189,"props":17203,"children":17204},{},[17205],{"type":29,"value":17206},"list(english_to_french.values())\n",{"type":20,"tag":189,"props":17208,"children":17209},{"class":191,"line":300},[17210],{"type":20,"tag":189,"props":17211,"children":17212},{},[17213],{"type":29,"value":17214},"# ['vert', 'bleu', 'rouge']\n",{"type":20,"tag":189,"props":17216,"children":17217},{"class":191,"line":314},[17218],{"type":20,"tag":189,"props":17219,"children":17220},{"emptyLinePlaceholder":397},[17221],{"type":29,"value":400},{"type":20,"tag":189,"props":17223,"children":17224},{"class":191,"line":328},[17225],{"type":20,"tag":189,"props":17226,"children":17227},{},[17228],{"type":29,"value":17229},"del english_to_french['green']\n",{"type":20,"tag":189,"props":17231,"children":17232},{"class":191,"line":342},[17233],{"type":20,"tag":189,"props":17234,"children":17235},{},[17236],{"type":29,"value":17237},"# [('blue', 'bleu'), ('red', 'rouge')]\n",{"type":20,"tag":189,"props":17239,"children":17240},{"class":191,"line":356},[17241],{"type":20,"tag":189,"props":17242,"children":17243},{"emptyLinePlaceholder":397},[17244],{"type":29,"value":400},{"type":20,"tag":189,"props":17246,"children":17247},{"class":191,"line":375},[17248],{"type":20,"tag":189,"props":17249,"children":17250},{},[17251],{"type":29,"value":17252},"'red' in english_to_french\n",{"type":20,"tag":189,"props":17254,"children":17255},{"class":191,"line":384},[17256],{"type":20,"tag":189,"props":17257,"children":17258},{},[17259],{"type":29,"value":16503},{"type":20,"tag":189,"props":17261,"children":17262},{"class":191,"line":393},[17263],{"type":20,"tag":189,"props":17264,"children":17265},{"emptyLinePlaceholder":397},[17266],{"type":29,"value":400},{"type":20,"tag":189,"props":17268,"children":17269},{"class":191,"line":403},[17270],{"type":20,"tag":189,"props":17271,"children":17272},{},[17273],{"type":29,"value":17274},"print(english_to_french.get('chartreuse', 'No translation'))\n",{"type":20,"tag":189,"props":17276,"children":17277},{"class":191,"line":411},[17278],{"type":20,"tag":189,"props":17279,"children":17280},{},[17281],{"type":29,"value":17282},"# No translation\n",{"type":20,"tag":189,"props":17284,"children":17285},{"class":191,"line":423},[17286],{"type":20,"tag":189,"props":17287,"children":17288},{"emptyLinePlaceholder":397},[17289],{"type":29,"value":400},{"type":20,"tag":189,"props":17291,"children":17292},{"class":191,"line":436},[17293],{"type":20,"tag":189,"props":17294,"children":17295},{},[17296],{"type":29,"value":17297},"#-> Word count example:\n",{"type":20,"tag":189,"props":17299,"children":17300},{"class":191,"line":449},[17301],{"type":20,"tag":189,"props":17302,"children":17303},{},[17304],{"type":29,"value":17305},"    for word in sample_string.split():\n",{"type":20,"tag":189,"props":17307,"children":17308},{"class":191,"line":462},[17309],{"type":20,"tag":189,"props":17310,"children":17311},{},[17312],{"type":29,"value":17313},"        occurrences[word] = occurrences.get(word, 0) + 1\n",{"type":20,"tag":16096,"props":17315,"children":17317},{"id":17316},"control-flow",[17318],{"type":29,"value":17319},"Control Flow",{"type":20,"tag":178,"props":17321,"children":17323},{"className":16114,"code":17322,"language":16116,"meta":8,"style":8},"# -> While Loop:\nwhile condition:\n    body\n\n# -> If stament\nif condition1:\n    body1\nelif condition2:\n    body2\nelse\n    body3\n\n# -> For loop\nfor item in sequence:\n    body (incl break and continue)\n\n",[17324],{"type":20,"tag":185,"props":17325,"children":17326},{"__ignoreMap":8},[17327,17335,17343,17351,17358,17366,17374,17382,17390,17398,17405,17413,17420,17428,17436],{"type":20,"tag":189,"props":17328,"children":17329},{"class":191,"line":192},[17330],{"type":20,"tag":189,"props":17331,"children":17332},{},[17333],{"type":29,"value":17334},"# -> While Loop:\n",{"type":20,"tag":189,"props":17336,"children":17337},{"class":191,"line":202},[17338],{"type":20,"tag":189,"props":17339,"children":17340},{},[17341],{"type":29,"value":17342},"while condition:\n",{"type":20,"tag":189,"props":17344,"children":17345},{"class":191,"line":217},[17346],{"type":20,"tag":189,"props":17347,"children":17348},{},[17349],{"type":29,"value":17350},"    body\n",{"type":20,"tag":189,"props":17352,"children":17353},{"class":191,"line":231},[17354],{"type":20,"tag":189,"props":17355,"children":17356},{"emptyLinePlaceholder":397},[17357],{"type":29,"value":400},{"type":20,"tag":189,"props":17359,"children":17360},{"class":191,"line":245},[17361],{"type":20,"tag":189,"props":17362,"children":17363},{},[17364],{"type":29,"value":17365},"# -> If stament\n",{"type":20,"tag":189,"props":17367,"children":17368},{"class":191,"line":259},[17369],{"type":20,"tag":189,"props":17370,"children":17371},{},[17372],{"type":29,"value":17373},"if condition1:\n",{"type":20,"tag":189,"props":17375,"children":17376},{"class":191,"line":272},[17377],{"type":20,"tag":189,"props":17378,"children":17379},{},[17380],{"type":29,"value":17381},"    body1\n",{"type":20,"tag":189,"props":17383,"children":17384},{"class":191,"line":286},[17385],{"type":20,"tag":189,"props":17386,"children":17387},{},[17388],{"type":29,"value":17389},"elif condition2:\n",{"type":20,"tag":189,"props":17391,"children":17392},{"class":191,"line":300},[17393],{"type":20,"tag":189,"props":17394,"children":17395},{},[17396],{"type":29,"value":17397},"    body2\n",{"type":20,"tag":189,"props":17399,"children":17400},{"class":191,"line":314},[17401],{"type":20,"tag":189,"props":17402,"children":17403},{},[17404],{"type":29,"value":12036},{"type":20,"tag":189,"props":17406,"children":17407},{"class":191,"line":328},[17408],{"type":20,"tag":189,"props":17409,"children":17410},{},[17411],{"type":29,"value":17412},"    body3\n",{"type":20,"tag":189,"props":17414,"children":17415},{"class":191,"line":342},[17416],{"type":20,"tag":189,"props":17417,"children":17418},{"emptyLinePlaceholder":397},[17419],{"type":29,"value":400},{"type":20,"tag":189,"props":17421,"children":17422},{"class":191,"line":356},[17423],{"type":20,"tag":189,"props":17424,"children":17425},{},[17426],{"type":29,"value":17427},"# -> For loop\n",{"type":20,"tag":189,"props":17429,"children":17430},{"class":191,"line":375},[17431],{"type":20,"tag":189,"props":17432,"children":17433},{},[17434],{"type":29,"value":17435},"for item in sequence:\n",{"type":20,"tag":189,"props":17437,"children":17438},{"class":191,"line":384},[17439],{"type":20,"tag":189,"props":17440,"children":17441},{},[17442],{"type":29,"value":17443},"    body (incl break and continue)\n",{"type":20,"tag":4813,"props":17445,"children":17446},{},[17447],{"type":29,"value":11279},{"title":8,"searchDepth":202,"depth":202,"links":17449},[17450,17451,17456,17457,17458],{"id":16098,"depth":202,"text":16101},{"id":16230,"depth":202,"text":16233,"children":17452},[17453,17454,17455],{"id":16237,"depth":217,"text":16240},{"id":16649,"depth":217,"text":15832},{"id":16673,"depth":217,"text":16676},{"id":16707,"depth":202,"text":16710},{"id":17134,"depth":202,"text":17137},{"id":17316,"depth":202,"text":17319},"content:scratchpad:pythonStarter:pythonStarter.md","scratchpad\u002FpythonStarter\u002FpythonStarter.md","scratchpad\u002FpythonStarter\u002FpythonStarter",1776168597066]