sveltekit-ui 1.0.50 → 1.0.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/Components/Content/index.svelte.js +1 -1
  2. package/dist/Components/ContentInput/AttributesInput/index.svelte +8 -0
  3. package/dist/Components/ContentInput/AttributesInput/index.svelte.js +7 -0
  4. package/dist/Components/ContentInput/ContentPanelBuilder/ElementList/index.svelte +1 -1
  5. package/dist/Components/ContentInput/index.svelte +47 -1
  6. package/dist/Components/ContentInput/index.svelte.js +31 -1
  7. package/dist/Components/Slider/index.svelte.js +1 -0
  8. package/package.json +2 -2
  9. package/src/lib/Components/Content/index.svelte.js +1 -1
  10. package/src/lib/Components/ContentInput/AttributesInput/index.svelte +8 -0
  11. package/src/lib/Components/ContentInput/AttributesInput/index.svelte.js +7 -0
  12. package/src/lib/Components/ContentInput/ContentPanelBuilder/ElementList/index.svelte +1 -1
  13. package/src/lib/Components/ContentInput/index.svelte +47 -1
  14. package/src/lib/Components/ContentInput/index.svelte.js +31 -1
  15. package/src/lib/Components/Slider/index.svelte.js +1 -0
  16. package/src/routes/[component]/Showcase/ContentInput/index.svelte +892 -107
package/src/routes/[component]/Showcase/ContentInput/index.svelte CHANGED
@@ -947,181 +947,966 @@
947
947
  // ],
948
948
  // }
949
949
 
950
+ // const initial_val = {
951
+ // type_id: "div",
952
+ // selector_id: "cqwzkzxr",
953
+ // attributes: {},
954
+ // children: [
955
+ // {
956
+ // type_id: "h2",
957
+ // selector_id: "hbvznufa",
958
+ // children: [
959
+ // {
960
+ // type_id: "base_text",
961
+ // selector_id: "kebffosw",
962
+ // children: [],
963
+ // attributes: { content: "Hello World", text_color: null },
964
+ // },
965
+ // ],
966
+ // attributes: {},
967
+ // },
968
+ // { type_id: "p", selector_id: "srsxjjgz", children: [], attributes: {} },
969
+ // {
970
+ // type_id: "p",
971
+ // selector_id: "hdoiapwi",
972
+ // children: [
973
+ // {
974
+ // type_id: "base_text",
975
+ // selector_id: "qhnsxwxb",
976
+ // children: [],
977
+ // attributes: { content: "one ", text_color: null },
978
+ // },
979
+ // {
980
+ // type_id: "base_text",
981
+ // selector_id: "xwcolfcm",
982
+ // children: [],
983
+ // attributes: { content: "two ", text_color: null },
984
+ // },
985
+ // {
986
+ // type_id: "base_text",
987
+ // selector_id: "zzfoqvdq",
988
+ // children: [],
989
+ // attributes: { content: "three ", text_color: null },
990
+ // },
991
+ // {
992
+ // type_id: "base_text",
993
+ // selector_id: "vagphpgn",
994
+ // children: [],
995
+ // attributes: { content: "four ", text_color: null },
996
+ // },
997
+ // {
998
+ // type_id: "base_text",
999
+ // selector_id: "hhmwoxyu",
1000
+ // children: [],
1001
+ // attributes: { content: "five ", text_color: null },
1002
+ // },
1003
+ // ],
1004
+ // attributes: {},
1005
+ // },
1006
+ // {
1007
+ // type_id: "div",
1008
+ // selector_id: "jkuitipo",
1009
+ // children: [
1010
+ // {
1011
+ // type_id: "ul",
1012
+ // selector_id: "macskilc",
1013
+ // children: [
1014
+ // {
1015
+ // type_id: "li",
1016
+ // selector_id: "ymndewjm",
1017
+ // children: [
1018
+ // {
1019
+ // type_id: "base_text",
1020
+ // selector_id: "kztuchzj",
1021
+ // children: [],
1022
+ // attributes: { content: "earth", text_color: null },
1023
+ // },
1024
+ // ],
1025
+ // attributes: {},
1026
+ // },
1027
+ // {
1028
+ // type_id: "li",
1029
+ // selector_id: "vvwvpsyu",
1030
+ // children: [
1031
+ // {
1032
+ // type_id: "base_text",
1033
+ // selector_id: "sxdokccz",
1034
+ // children: [],
1035
+ // attributes: { content: "mars", text_color: null },
1036
+ // },
1037
+ // ],
1038
+ // attributes: {},
1039
+ // },
1040
+ // {
1041
+ // type_id: "li",
1042
+ // selector_id: "nwdoctgk",
1043
+ // children: [
1044
+ // {
1045
+ // type_id: "base_text",
1046
+ // selector_id: "vzbimkqq",
1047
+ // children: [],
1048
+ // attributes: { content: "venus", text_color: null },
1049
+ // },
1050
+ // ],
1051
+ // attributes: {},
1052
+ // },
1053
+ // {
1054
+ // type_id: "li",
1055
+ // selector_id: "trvkcqae",
1056
+ // children: [
1057
+ // {
1058
+ // type_id: "base_text",
1059
+ // selector_id: "xnrqcktc",
1060
+ // children: [],
1061
+ // attributes: { content: "neptune", text_color: null },
1062
+ // },
1063
+ // ],
1064
+ // attributes: {},
1065
+ // },
1066
+ // {
1067
+ // type_id: "li",
1068
+ // selector_id: "fjmaxkpl",
1069
+ // children: [
1070
+ // {
1071
+ // type_id: "base_text",
1072
+ // selector_id: "fkxbmaeg",
1073
+ // children: [],
1074
+ // attributes: { content: "jupiter", text_color: null },
1075
+ // },
1076
+ // ],
1077
+ // attributes: {},
1078
+ // },
1079
+ // {
1080
+ // type_id: "li",
1081
+ // selector_id: "eebwakgj",
1082
+ // children: [
1083
+ // {
1084
+ // type_id: "base_text",
1085
+ // selector_id: "oipsenad",
1086
+ // children: [],
1087
+ // attributes: { content: "saturn", text_color: null },
1088
+ // },
1089
+ // ],
1090
+ // attributes: {},
1091
+ // },
1092
+ // ],
1093
+ // attributes: {},
1094
+ // },
1095
+ // ],
1096
+ // attributes: {},
1097
+ // },
1098
+ // {
1099
+ // type_id: "div",
1100
+ // selector_id: "vagmtdzs",
1101
+ // children: [
1102
+ // {
1103
+ // type_id: "p",
1104
+ // selector_id: "lqgoglmn",
1105
+ // children: [
1106
+ // {
1107
+ // type_id: "base_text",
1108
+ // selector_id: "ckgkcqha",
1109
+ // children: [],
1110
+ // attributes: { content: "I love the galaxy. ", text_color: null },
1111
+ // },
1112
+ // {
1113
+ // type_id: "base_text",
1114
+ // selector_id: "qfvkconl",
1115
+ // children: [],
1116
+ // attributes: { content: "pluto", text_color: null },
1117
+ // },
1118
+ // ],
1119
+ // attributes: {},
1120
+ // },
1121
+ // ],
1122
+ // attributes: {},
1123
+ // },
1124
+ // ],
1125
+ // }
1126
+
950
1127
  const initial_val = {
951
1128
  type_id: "div",
952
- selector_id: "cqwzkzxr",
953
- attributes: {},
954
1129
  children: [
955
1130
  {
956
- type_id: "h2",
957
- selector_id: "hbvznufa",
1131
+ type_id: "section",
958
1132
  children: [
959
1133
  {
960
- type_id: "base_text",
961
- selector_id: "kebffosw",
1134
+ type_id: "h2",
1135
+ children: [
1136
+ {
1137
+ type_id: "base_text",
1138
+ children: [],
1139
+ attributes: { content: "YouTube version of this Post", text_color: null },
1140
+ selector_id: "qqglxnco",
1141
+ },
1142
+ ],
1143
+ attributes: {},
1144
+ selector_id: "kxfvkedb",
1145
+ },
1146
+ {
1147
+ type_id: "youtube_video",
962
1148
  children: [],
963
- attributes: { content: "Hello World", text_color: null },
1149
+ attributes: { video_id: "IKuk_JJkIWk", is_dark_theme: null },
1150
+ selector_id: "tjcehxeb",
964
1151
  },
965
1152
  ],
966
1153
  attributes: {},
1154
+ selector_id: "tajkrrsj",
967
1155
  },
968
- { type_id: "p", selector_id: "srsxjjgz", children: [], attributes: {} },
969
1156
  {
970
- type_id: "p",
971
- selector_id: "hdoiapwi",
1157
+ type_id: "section",
972
1158
  children: [
973
1159
  {
974
- type_id: "base_text",
975
- selector_id: "qhnsxwxb",
976
- children: [],
977
- attributes: { content: "one ", text_color: null },
1160
+ type_id: "h2",
1161
+ children: [
1162
+ {
1163
+ type_id: "base_text",
1164
+ children: [],
1165
+ attributes: { content: "Customize Site", text_color: null },
1166
+ selector_id: "vyhslkus",
1167
+ },
1168
+ ],
1169
+ attributes: {},
1170
+ selector_id: "eokuzawt",
978
1171
  },
979
1172
  {
980
- type_id: "base_text",
981
- selector_id: "xwcolfcm",
982
- children: [],
983
- attributes: { content: "two ", text_color: null },
1173
+ type_id: "p",
1174
+ children: [
1175
+ {
1176
+ type_id: "base_text",
1177
+ children: [],
1178
+ attributes: { content: "This guide largely builds off of the ", text_color: null },
1179
+ selector_id: "lvozlxpc",
1180
+ },
1181
+ {
1182
+ type_id: "link",
1183
+ children: [],
1184
+ attributes: {
1185
+ href: "https://www.contibase.com/blog/quick-start-guide",
1186
+ text_color: null,
1187
+ display_text: "Quick Start Guide",
1188
+ is_show_preview: "Quick Start Guide",
1189
+ },
1190
+ selector_id: "nhihtsqe",
1191
+ },
1192
+ {
1193
+ type_id: "base_text",
1194
+ children: [],
1195
+ attributes: {
1196
+ content: ". If you haven't seen that, start there and then come back to this part.",
1197
+ text_color: null,
1198
+ },
1199
+ selector_id: "zyyxwumf",
1200
+ },
1201
+ ],
1202
+ attributes: {},
1203
+ selector_id: "rpetxxbn",
984
1204
  },
1205
+ ],
1206
+ attributes: {},
1207
+ selector_id: "ehkvhkwa",
1208
+ },
1209
+ {
1210
+ type_id: "section",
1211
+ children: [
985
1212
  {
986
- type_id: "base_text",
987
- selector_id: "zzfoqvdq",
988
- children: [],
989
- attributes: { content: "three ", text_color: null },
1213
+ type_id: "h2",
1214
+ children: [
1215
+ {
1216
+ type_id: "base_text",
1217
+ children: [],
1218
+ attributes: { content: "Make your Brand Icon", text_color: null },
1219
+ selector_id: "vmykssyg",
1220
+ },
1221
+ ],
1222
+ attributes: {},
1223
+ selector_id: "aycvrubd",
990
1224
  },
991
1225
  {
992
- type_id: "base_text",
993
- selector_id: "vagphpgn",
994
- children: [],
995
- attributes: { content: "four ", text_color: null },
1226
+ type_id: "p",
1227
+ children: [
1228
+ {
1229
+ type_id: "base_text",
1230
+ children: [],
1231
+ attributes: {
1232
+ content:
1233
+ "Keep it simple. Use 1-3 colors and a few shapes. Don't include text in the icon. This will result in better viewing from a distance because it will often be used in small areas such as a browser tab. ",
1234
+ text_color: null,
1235
+ },
1236
+ selector_id: "ncuqmdzu",
1237
+ },
1238
+ ],
1239
+ attributes: {},
1240
+ selector_id: "qpyzehoj",
996
1241
  },
997
1242
  {
998
- type_id: "base_text",
999
- selector_id: "hhmwoxyu",
1000
- children: [],
1001
- attributes: { content: "five ", text_color: null },
1243
+ type_id: "p",
1244
+ children: [
1245
+ {
1246
+ type_id: "base_text",
1247
+ children: [],
1248
+ attributes: { content: "Use the ", text_color: null },
1249
+ selector_id: "xlxorjvl",
1250
+ },
1251
+ {
1252
+ type_id: "link",
1253
+ children: [],
1254
+ attributes: {
1255
+ href: "https://www.contibase.com/tools/image-generator",
1256
+ text_color: null,
1257
+ display_text: "Contibase Image Generator",
1258
+ is_show_preview: "Contibase Image Generator",
1259
+ },
1260
+ selector_id: "bdhqknan",
1261
+ },
1262
+ {
1263
+ type_id: "base_text",
1264
+ children: [],
1265
+ attributes: {
1266
+ content:
1267
+ ' to generate an icon image. You can try something like "Make a simple, flat SVG icon for my site about ________. Keep it very simple. A flat SVG with 1-3 colors and 1-3 shapes. Use a white background."',
1268
+ text_color: null,
1269
+ },
1270
+ selector_id: "agoyrhdq",
1271
+ },
1272
+ ],
1273
+ attributes: {},
1274
+ selector_id: "rxajadec",
1275
+ },
1276
+ {
1277
+ type_id: "p",
1278
+ children: [
1279
+ {
1280
+ type_id: "base_text",
1281
+ children: [],
1282
+ attributes: {
1283
+ content: "Crop into a square icon image with slim padding. Download the image. ",
1284
+ text_color: null,
1285
+ },
1286
+ selector_id: "lrbjyzss",
1287
+ },
1288
+ ],
1289
+ attributes: {},
1290
+ selector_id: "wklukwyf",
1291
+ },
1292
+ ],
1293
+ attributes: {},
1294
+ selector_id: "ediedjta",
1295
+ },
1296
+ {
1297
+ type_id: "section",
1298
+ children: [
1299
+ {
1300
+ type_id: "h2",
1301
+ children: [
1302
+ {
1303
+ type_id: "base_text",
1304
+ children: [],
1305
+ attributes: { content: "Turn your Icon Image into an SVG", text_color: null },
1306
+ selector_id: "yeczsxvq",
1307
+ },
1308
+ ],
1309
+ attributes: {},
1310
+ selector_id: "hrynnlcn",
1311
+ },
1312
+ {
1313
+ type_id: "p",
1314
+ children: [
1315
+ {
1316
+ type_id: "base_text",
1317
+ children: [],
1318
+ attributes: { content: "Switch to the ", text_color: null },
1319
+ selector_id: "kgupnngr",
1320
+ },
1321
+ {
1322
+ type_id: "link",
1323
+ children: [],
1324
+ attributes: {
1325
+ href: "https://www.contibase.com/tools/image-to-svg",
1326
+ text_color: null,
1327
+ display_text: "Contibase Image to SVG",
1328
+ is_show_preview: "Contibase Image to SVG",
1329
+ },
1330
+ selector_id: "evdwsopr",
1331
+ },
1332
+ {
1333
+ type_id: "base_text",
1334
+ children: [],
1335
+ attributes: {
1336
+ content:
1337
+ " tool and convert to a SVG. Alternatively, if you are graphically skilled you can draw over the image and create the SVG yourself in a tool like ",
1338
+ text_color: null,
1339
+ },
1340
+ selector_id: "vvktyfjf",
1341
+ },
1342
+ {
1343
+ type_id: "link",
1344
+ children: [],
1345
+ attributes: {
1346
+ href: "https://affinity.serif.com/en-us/designer/",
1347
+ text_color: null,
1348
+ display_text: "Affinity Designer",
1349
+ is_show_preview: "Affinity Designer",
1350
+ },
1351
+ selector_id: "gzsqfwtr",
1352
+ },
1353
+ {
1354
+ type_id: "base_text",
1355
+ children: [],
1356
+ attributes: { content: ".", text_color: null },
1357
+ selector_id: "fokevalf",
1358
+ },
1359
+ ],
1360
+ attributes: {},
1361
+ selector_id: "hendabql",
1362
+ },
1363
+ {
1364
+ type_id: "p",
1365
+ children: [
1366
+ {
1367
+ type_id: "base_text",
1368
+ children: [],
1369
+ attributes: {
1370
+ content:
1371
+ 'Export your design as an SVG. In the export options select "flatten" if its unchecked. And check viewbox. Optimize your SVG code using ',
1372
+ text_color: null,
1373
+ },
1374
+ selector_id: "endxliqk",
1375
+ },
1376
+ {
1377
+ type_id: "link",
1378
+ children: [],
1379
+ attributes: {
1380
+ href: "https://www.contibase.com/tools/svg-optimizer",
1381
+ text_color: null,
1382
+ display_text: "SVG Optimizer",
1383
+ is_show_preview: "SVG Optimizer",
1384
+ },
1385
+ selector_id: "njfzxryi",
1386
+ },
1387
+ {
1388
+ type_id: "base_text",
1389
+ children: [],
1390
+ attributes: {
1391
+ content: ". Delete any backgrounds and add a new, clean one in the editor.",
1392
+ text_color: null,
1393
+ },
1394
+ selector_id: "tusmvxzf",
1395
+ },
1396
+ ],
1397
+ attributes: {},
1398
+ selector_id: "uoeivoif",
1399
+ },
1400
+ ],
1401
+ attributes: { padding: 0, border_color: null, border_radius: 0, background_color: null },
1402
+ selector_id: "hbqkjhhy",
1403
+ },
1404
+ {
1405
+ type_id: "section",
1406
+ children: [
1407
+ {
1408
+ type_id: "h2",
1409
+ children: [
1410
+ {
1411
+ type_id: "base_text",
1412
+ children: [],
1413
+ attributes: { content: "Generate Favicons", text_color: null },
1414
+ selector_id: "iskvhbcd",
1415
+ },
1416
+ ],
1417
+ attributes: {},
1418
+ selector_id: "utqydrdm",
1419
+ },
1420
+ {
1421
+ type_id: "p",
1422
+ children: [
1423
+ {
1424
+ type_id: "base_text",
1425
+ children: [],
1426
+ attributes: { content: "Go to the ", text_color: null },
1427
+ selector_id: "rhlxlevd",
1428
+ },
1429
+ {
1430
+ type_id: "link",
1431
+ children: [],
1432
+ attributes: {
1433
+ href: "https://www.contibase.com/tools/favicon-generator",
1434
+ text_color: null,
1435
+ display_text: "Favicon Generator",
1436
+ is_show_preview: "Favicon Generator",
1437
+ },
1438
+ selector_id: "thyljaur",
1439
+ },
1440
+ {
1441
+ type_id: "base_text",
1442
+ children: [],
1443
+ attributes: {
1444
+ content:
1445
+ '. Paste your <svg>...</svg> code in. (Make sure there is a <rect> background with an id starting with "bg-"). Type your brand name and generate the favicons. This also generates other useful media such as thumbnails and useful icon images.',
1446
+ text_color: null,
1447
+ },
1448
+ selector_id: "xfitwoqu",
1449
+ },
1450
+ ],
1451
+ attributes: {},
1452
+ selector_id: "pusldsji",
1453
+ },
1454
+ {
1455
+ type_id: "p",
1456
+ children: [
1457
+ {
1458
+ type_id: "base_text",
1459
+ children: [],
1460
+ attributes: {
1461
+ content: "Download your favicons. Drag all files into the /static folder and overwrite the defaults.",
1462
+ text_color: null,
1463
+ },
1464
+ selector_id: "tgejyjij",
1465
+ },
1466
+ ],
1467
+ attributes: {},
1468
+ selector_id: "bicqwggm",
1002
1469
  },
1003
1470
  ],
1004
1471
  attributes: {},
1472
+ selector_id: "ekkurnwd",
1005
1473
  },
1006
1474
  {
1007
- type_id: "div",
1008
- selector_id: "jkuitipo",
1475
+ type_id: "section",
1009
1476
  children: [
1010
1477
  {
1011
- type_id: "ul",
1012
- selector_id: "macskilc",
1478
+ type_id: "h2",
1479
+ children: [
1480
+ {
1481
+ type_id: "base_text",
1482
+ children: [],
1483
+ attributes: { content: "Fix app.html and Website Logo", text_color: null },
1484
+ selector_id: "ryhnqolk",
1485
+ },
1486
+ ],
1487
+ attributes: {},
1488
+ selector_id: "bfispmyg",
1489
+ },
1490
+ {
1491
+ type_id: "p",
1013
1492
  children: [
1014
1493
  {
1015
- type_id: "li",
1016
- selector_id: "ymndewjm",
1017
- children: [
1018
- {
1019
- type_id: "base_text",
1020
- selector_id: "kztuchzj",
1021
- children: [],
1022
- attributes: { content: "earth", text_color: null },
1023
- },
1024
- ],
1025
- attributes: {},
1494
+ type_id: "base_text",
1495
+ children: [],
1496
+ attributes: { content: "Back in your project in VS Code, update ", text_color: null },
1497
+ selector_id: "euxxfcpo",
1498
+ },
1499
+ {
1500
+ type_id: "code_inline",
1501
+ children: [],
1502
+ attributes: { color: null, content: "src/lib/components/Logo/index.svelte" },
1503
+ selector_id: "yklgwlfi",
1026
1504
  },
1027
1505
  {
1028
- type_id: "li",
1029
- selector_id: "vvwvpsyu",
1030
- children: [
1031
- {
1032
- type_id: "base_text",
1033
- selector_id: "sxdokccz",
1034
- children: [],
1035
- attributes: { content: "mars", text_color: null },
1036
- },
1037
- ],
1038
- attributes: {},
1506
+ type_id: "base_text",
1507
+ children: [],
1508
+ attributes: {
1509
+ content: " to use your new logo. Paste the generated component from the favicon generator.",
1510
+ text_color: null,
1511
+ },
1512
+ selector_id: "ahjxjyfm",
1039
1513
  },
1514
+ ],
1515
+ attributes: {},
1516
+ selector_id: "xlxjlyom",
1517
+ },
1518
+ {
1519
+ type_id: "p",
1520
+ children: [
1040
1521
  {
1041
- type_id: "li",
1042
- selector_id: "nwdoctgk",
1043
- children: [
1044
- {
1045
- type_id: "base_text",
1046
- selector_id: "vzbimkqq",
1047
- children: [],
1048
- attributes: { content: "venus", text_color: null },
1049
- },
1050
- ],
1051
- attributes: {},
1522
+ type_id: "base_text",
1523
+ children: [],
1524
+ attributes: {
1525
+ content: "Go to your app.html and paste the generated version from the Favicon Generator.",
1526
+ text_color: null,
1527
+ },
1528
+ selector_id: "fcbwdhkz",
1052
1529
  },
1530
+ ],
1531
+ attributes: {},
1532
+ selector_id: "irwehmuw",
1533
+ },
1534
+ {
1535
+ type_id: "p",
1536
+ children: [
1053
1537
  {
1054
- type_id: "li",
1055
- selector_id: "trvkcqae",
1056
- children: [
1057
- {
1058
- type_id: "base_text",
1059
- selector_id: "xnrqcktc",
1060
- children: [],
1061
- attributes: { content: "neptune", text_color: null },
1062
- },
1063
- ],
1064
- attributes: {},
1538
+ type_id: "base_text",
1539
+ children: [],
1540
+ attributes: { content: "Go to ", text_color: null },
1541
+ selector_id: "afiisndj",
1065
1542
  },
1066
1543
  {
1067
- type_id: "li",
1068
- selector_id: "fjmaxkpl",
1069
- children: [
1070
- {
1071
- type_id: "base_text",
1072
- selector_id: "fkxbmaeg",
1073
- children: [],
1074
- attributes: { content: "jupiter", text_color: null },
1075
- },
1076
- ],
1077
- attributes: {},
1544
+ type_id: "code_inline",
1545
+ children: [],
1546
+ attributes: { content: "src/routes/+layout.svelte" },
1547
+ selector_id: "blvvjzgm",
1078
1548
  },
1079
1549
  {
1080
- type_id: "li",
1081
- selector_id: "eebwakgj",
1082
- children: [
1083
- {
1084
- type_id: "base_text",
1085
- selector_id: "oipsenad",
1086
- children: [],
1087
- attributes: { content: "saturn", text_color: null },
1088
- },
1089
- ],
1090
- attributes: {},
1550
+ type_id: "base_text",
1551
+ children: [],
1552
+ attributes: {
1553
+ content:
1554
+ '. Scroll down to the <style> CSS and find :root {\n --primary-c: var(--c10);\n --primary-h: var(--h18);\n } and change the number in "--primary-h: var(--h18);" to a number 0-24 that matches your brands primary hue.',
1555
+ text_color: null,
1556
+ },
1557
+ selector_id: "itdiqwxz",
1091
1558
  },
1092
1559
  ],
1093
1560
  attributes: {},
1561
+ selector_id: "psuhvlcm",
1094
1562
  },
1095
1563
  ],
1096
1564
  attributes: {},
1565
+ selector_id: "rpsvmmsm",
1097
1566
  },
1098
1567
  {
1099
- type_id: "div",
1100
- selector_id: "vagmtdzs",
1568
+ type_id: "section",
1101
1569
  children: [
1570
+ {
1571
+ type_id: "h2",
1572
+ children: [
1573
+ {
1574
+ type_id: "base_text",
1575
+ children: [],
1576
+ attributes: { content: "Add Icon and Full Logo to Contibase", text_color: null },
1577
+ selector_id: "ttrweabn",
1578
+ },
1579
+ ],
1580
+ attributes: {},
1581
+ selector_id: "ltpaxcei",
1582
+ },
1102
1583
  {
1103
1584
  type_id: "p",
1104
- selector_id: "lqgoglmn",
1105
1585
  children: [
1106
1586
  {
1107
1587
  type_id: "base_text",
1108
- selector_id: "ckgkcqha",
1109
1588
  children: [],
1110
- attributes: { content: "I love the galaxy. ", text_color: null },
1589
+ attributes: {
1590
+ content:
1591
+ "Go to contibase.com/settings and click branding. Use the favicon.webp file for the icon. The for the full logo use full_logo.webp. This will be used at the top of emails you send when toggled on in the page.",
1592
+ text_color: null,
1593
+ },
1594
+ selector_id: "pnhuobtu",
1111
1595
  },
1596
+ ],
1597
+ attributes: {},
1598
+ selector_id: "qovvxzdm",
1599
+ },
1600
+ ],
1601
+ attributes: {},
1602
+ selector_id: "lffhdqof",
1603
+ },
1604
+ {
1605
+ type_id: "section",
1606
+ children: [
1607
+ {
1608
+ type_id: "h2",
1609
+ children: [
1112
1610
  {
1113
1611
  type_id: "base_text",
1114
- selector_id: "qfvkconl",
1115
1612
  children: [],
1116
- attributes: { content: "pluto", text_color: null },
1613
+ attributes: { content: "Project Structure & Stack", text_color: null },
1614
+ selector_id: "zrxwzrnb",
1117
1615
  },
1118
1616
  ],
1119
1617
  attributes: {},
1618
+ selector_id: "sryywfso",
1619
+ },
1620
+ {
1621
+ type_id: "p",
1622
+ children: [
1623
+ {
1624
+ type_id: "base_text",
1625
+ children: [],
1626
+ attributes: { content: "Your site uses ", text_color: null },
1627
+ selector_id: "ybajubdj",
1628
+ },
1629
+ {
1630
+ type_id: "link",
1631
+ children: [],
1632
+ attributes: {
1633
+ href: "https://svelte.dev/docs/kit/introduction",
1634
+ text_color: null,
1635
+ display_text: "SvelteKit",
1636
+ is_show_preview: "SvelteKit",
1637
+ },
1638
+ selector_id: "nqecfvfe",
1639
+ },
1640
+ {
1641
+ type_id: "base_text",
1642
+ children: [],
1643
+ attributes: { content: " along with the ", text_color: null },
1644
+ selector_id: "hxngmmfu",
1645
+ },
1646
+ {
1647
+ type_id: "link",
1648
+ children: [],
1649
+ attributes: {
1650
+ href: "https://www.sveltekit-ui.com",
1651
+ text_color: null,
1652
+ display_text: "Sveltekit-UI",
1653
+ is_show_preview: "Sveltekit-UI",
1654
+ },
1655
+ selector_id: "zrbadtzz",
1656
+ },
1657
+ {
1658
+ type_id: "base_text",
1659
+ children: [],
1660
+ attributes: {
1661
+ content:
1662
+ " component library. At this point you'll need to get into the coding side of things a bit. Use your resources and chip away a little progress each day. Ask AI for help with any questions. Keep in mind some AI likes to use old svelte, so make sure to use svelte 5 (the latest version as of 2025) if you start using AI.",
1663
+ text_color: null,
1664
+ },
1665
+ selector_id: "bsoqgbyf",
1666
+ },
1667
+ ],
1668
+ attributes: {},
1669
+ selector_id: "ybzrdskl",
1670
+ },
1671
+ {
1672
+ type_id: "p",
1673
+ children: [
1674
+ {
1675
+ type_id: "base_text",
1676
+ children: [],
1677
+ attributes: {
1678
+ content: "It's kind of experimental at the moment, but for building your components this tool, ",
1679
+ text_color: null,
1680
+ },
1681
+ selector_id: "rdbjmewj",
1682
+ },
1683
+ {
1684
+ type_id: "link",
1685
+ children: [],
1686
+ attributes: {
1687
+ href: "https://www.contibase.com/code_generator",
1688
+ text_color: null,
1689
+ display_text: "SvelteKit-UI Code Generator",
1690
+ is_show_preview: "SvelteKit-UI Code Generator",
1691
+ },
1692
+ selector_id: "cpnybkoz",
1693
+ },
1694
+ {
1695
+ type_id: "base_text",
1696
+ children: [],
1697
+ attributes: {
1698
+ content:
1699
+ ", may help you get an idea for how I like structuring my code. The concept is inspired from Object-Oriented Programming, talks by Alan Kay, and other things over time. ",
1700
+ text_color: null,
1701
+ },
1702
+ selector_id: "laawbzfg",
1703
+ },
1704
+ ],
1705
+ attributes: {},
1706
+ selector_id: "tjddadxe",
1707
+ },
1708
+ {
1709
+ type_id: "p",
1710
+ children: [
1711
+ {
1712
+ type_id: "base_text",
1713
+ children: [],
1714
+ attributes: {
1715
+ content:
1716
+ 'Building "managers" for each component with logic encapsulated within, exposing state and methods, leads to a clean code structure where all logic can be assembled into one parent manager at the root of each +page.svelte. The manager is instantiated on page load in the <script> tag and is passed as a manager prop into the HTML. This avoids "prop drilling" and deeply nested bindings. ',
1717
+ text_color: null,
1718
+ },
1719
+ selector_id: "lkpgxnua",
1720
+ },
1721
+ ],
1722
+ attributes: {},
1723
+ selector_id: "winpozaz",
1724
+ },
1725
+ {
1726
+ type_id: "p",
1727
+ children: [
1728
+ {
1729
+ type_id: "base_text",
1730
+ children: [],
1731
+ attributes: {
1732
+ content:
1733
+ "You are free to write code in any way you find appealing. You are in charge. I am just sharing the way I've found to make the most sense.",
1734
+ text_color: null,
1735
+ },
1736
+ selector_id: "hnochyxt",
1737
+ },
1738
+ ],
1739
+ attributes: {},
1740
+ selector_id: "ulfeqmfv",
1741
+ },
1742
+ ],
1743
+ attributes: { padding: 0, border_color: null, border_radius: 0.5, background_color: null },
1744
+ selector_id: "qrkbbsqr",
1745
+ },
1746
+ {
1747
+ type_id: "section",
1748
+ children: [
1749
+ {
1750
+ type_id: "h2",
1751
+ children: [
1752
+ {
1753
+ type_id: "base_text",
1754
+ children: [],
1755
+ attributes: { content: "Publish Your Live Website", text_color: null },
1756
+ selector_id: "ddiwhcra",
1757
+ },
1758
+ ],
1759
+ attributes: {},
1760
+ selector_id: "xqnncyby",
1761
+ },
1762
+ {
1763
+ type_id: "p",
1764
+ children: [
1765
+ {
1766
+ type_id: "base_text",
1767
+ children: [],
1768
+ attributes: { content: "If you havent already, create an account on ", text_color: null },
1769
+ selector_id: "bhxscmfq",
1770
+ },
1771
+ {
1772
+ type_id: "link",
1773
+ children: [],
1774
+ attributes: {
1775
+ href: "https://vercel.com",
1776
+ text_color: null,
1777
+ display_text: "Vercel",
1778
+ is_show_preview: "Vercel",
1779
+ },
1780
+ selector_id: "ababkome",
1781
+ },
1782
+ {
1783
+ type_id: "base_text",
1784
+ children: [],
1785
+ attributes: {
1786
+ content:
1787
+ ". If you already bought your domain on Vercel, even better. You can also transfer your domain purchased elsewhere to Vercel. I just like things as simple as possible and find keeping everything on Vercel to be best.",
1788
+ text_color: null,
1789
+ },
1790
+ selector_id: "elgvajqa",
1791
+ },
1792
+ ],
1793
+ attributes: {},
1794
+ selector_id: "xygicvcv",
1795
+ },
1796
+ {
1797
+ type_id: "p",
1798
+ children: [
1799
+ {
1800
+ type_id: "base_text",
1801
+ children: [],
1802
+ attributes: {
1803
+ content:
1804
+ 'In Vercel connect to your Github account and set your "main" branch to be used in production. Connect your domain name to this deployment. Anytime you push to main you will automatically trigger a build and you will see on your live website a couple minutes later pending no errors.',
1805
+ text_color: null,
1806
+ },
1807
+ selector_id: "myafcruh",
1808
+ },
1809
+ ],
1810
+ attributes: {},
1811
+ selector_id: "txsgrcrz",
1812
+ },
1813
+ {
1814
+ type_id: "p",
1815
+ children: [
1816
+ {
1817
+ type_id: "base_text",
1818
+ children: [],
1819
+ attributes: {
1820
+ content:
1821
+ "Vercel Analytics is already configured in the code but you'll need to toggle on that feature in your Vercel Dashboard. You'll also want to copy the environment variables we used in the .env file and paste them in the Vercel project settings in the Environment variables page.",
1822
+ text_color: null,
1823
+ },
1824
+ selector_id: "bnjdfrjn",
1825
+ },
1826
+ ],
1827
+ attributes: {},
1828
+ selector_id: "wpgwzymz",
1120
1829
  },
1121
1830
  ],
1122
1831
  attributes: {},
1832
+ selector_id: "bejqtxts",
1833
+ },
1834
+ {
1835
+ type_id: "section",
1836
+ children: [
1837
+ {
1838
+ type_id: "h2",
1839
+ children: [
1840
+ {
1841
+ type_id: "base_text",
1842
+ children: [],
1843
+ attributes: { content: "Check Final Example Tutorial Code", text_color: null },
1844
+ selector_id: "wkhevkrc",
1845
+ },
1846
+ ],
1847
+ attributes: {},
1848
+ selector_id: "ysjyhdtn",
1849
+ },
1850
+ {
1851
+ type_id: "p",
1852
+ children: [
1853
+ {
1854
+ type_id: "base_text",
1855
+ children: [],
1856
+ attributes: {
1857
+ content: "The live version of the code from this tutorial project can be found at ",
1858
+ text_color: null,
1859
+ },
1860
+ selector_id: "wxmnsdde",
1861
+ },
1862
+ {
1863
+ type_id: "link",
1864
+ children: [],
1865
+ attributes: {
1866
+ href: "https://github.com/upppllc/survivorsnuff",
1867
+ text_color: null,
1868
+ display_text: "Live Github Code",
1869
+ is_show_preview: "Live Github Code",
1870
+ },
1871
+ selector_id: "asimpyjl",
1872
+ },
1873
+ {
1874
+ type_id: "base_text",
1875
+ children: [],
1876
+ attributes: {
1877
+ content: ". It includes changes beyond this stage of the tutorial. The live site is ",
1878
+ text_color: null,
1879
+ },
1880
+ selector_id: "zlfmfzwr",
1881
+ },
1882
+ {
1883
+ type_id: "link",
1884
+ children: [],
1885
+ attributes: {
1886
+ href: "https://www.survivorsnuff.com",
1887
+ text_color: null,
1888
+ display_text: "survivorsnuff.com",
1889
+ is_show_preview: "survivorsnuff.com",
1890
+ },
1891
+ selector_id: "xbpnjaoo",
1892
+ },
1893
+ {
1894
+ type_id: "base_text",
1895
+ children: [],
1896
+ attributes: { content: ".", text_color: null },
1897
+ selector_id: "alzekgmb",
1898
+ },
1899
+ ],
1900
+ attributes: {},
1901
+ selector_id: "idfqxmgg",
1902
+ },
1903
+ ],
1904
+ attributes: {},
1905
+ selector_id: "yrbajwld",
1123
1906
  },
1124
1907
  ],
1908
+ attributes: {},
1909
+ selector_id: "qtfdezhp",
1125
1910
  }
1126
1911
 
1127
1912
  let content_input_manager = $state(null)