FEATURE - Create new Coruzant.com webpage

[fyziktom]

The Coruzant.com platform starts to transform to the Blockchain. They already has own tokens CORZT. These tokens will work as carrier for Articles, Profiles, Podcasts, etc.

For the display the data from these NFTs we need at first simple OnePage which will load and display the 10 newest articles and 10 newests profiles.

When user will click to some articles or profile, it will open the details of it.

This is branch for this issue

[fyziktom]

@Fh-Ndiritu , Could you please add the Markdown parsing into the articles please?

you have to add this library and then declare this and here is usage

[fyziktom]

All external links should open in new tab. For the contacts or about please do it like popup for now instead of redirect to old coruzant page please.

[fyziktom]

Ad podcasts:

The NFT CoruzantProfiles which contains property should be able to open popup with the loaded podcast. Now we are using the Buzzsprout server, where Coruzant publish the podcasts. It would be better to store them on the ipfs too, but now it is done this way and we will move them later. For now, we are loading the buzzsprout podcast info from their server. Their API require the API Key, thats why we run some own support api with command which request the data and return back what we need.

It looks like this

        public class BuzzsproutEpisodeDto
        {
            public int id { get; set; } = 0;
            public string title { get; set; } = string.Empty;
            public string audio_url { get; set; } = string.Empty;
            public string artwork_url { get; set; } = string.Empty;
            public string description { get; set; } = string.Empty;
            public string summary { get; set; } = string.Empty;
            public string artist { get; set; } = string.Empty;
            public string guid { get; set; } = string.Empty;
            public int total_plays { get; set; } = 0;
        }
        [AllowCrossSiteJsonAttribute]
        [HttpGet("GetBuzzsproutData/{profile}/{podcast}")]
        public async Task<List<BuzzsproutEpisodeDto>> GetBuzzsproutData(string profile, string podcast)
        {
            if (string.IsNullOrEmpty(profile))
                return null;

            try
            {
                var apiToken = "BUZZSPROUT_ACCOUNT_API_TOKEN";

                using (var client = new HttpClient())
                {
                    var url = $"https://www.buzzsprout.com/api/{profile}/episodes.json";

                    using (var content = new MultipartFormDataContent())
                    {
                        client.DefaultRequestHeaders.Add("Authorization", $"Token token={apiToken}");
                        var response = await client.GetAsync(url);
                        var jsonresponse = await response.Content.ReadAsStringAsync();
                        var res = JsonConvert.DeserializeObject<List<BuzzsproutEpisodeDto>>(jsonresponse);
                        if (res != null)
                        {
                            var pod = res.FirstOrDefault(p => p.id == Convert.ToInt32(podcast));
                            if (pod != null)
                                return new List<BuzzsproutEpisodeDto>() { pod };
                            else
                                return res;
                        }
                    }
                }
            }
            catch (Exception ex)
            {
                Console.WriteLine("Error during uploading the image to the IPFS." + ex.Message);
            }
            return null;
        }

This is called for example here.

The service runs on our server so we can use this now, but we will add it in this branch to the VENFT App Server later.

The Buzzsprout data are loaded to the div tag here and it must have added JavaScript in external js file like here and this js file is added to the index.html.

[Fh-Ndiritu]

I added Markdig, it's a great library!

[Fh-Ndiritu]

I went with this for the podcasts. Feels less intrusive playing down here.

[fyziktom]

Wow, it looks really great :)

I think you could add some loading bar. When the podcast is loading, it will display just the red cross for some while and I though it is some error.

Also please check the how does it display items on the phone/small displays. I expect lots of people will browse it just on the phone.

I see the pages for profiles, articles already working. great job.

We have already 160 NFT Coruzant profiles with podcasts on the address. now we limit the load of the NFTs to speed up loading, but when it is loaded, we can start to load others on background (or do this just after you will go to "Featured" or "Podcasts" pages and then you can offer the listing of the podcasts/profiles. In the #74 you can find the way how to solve paging, etc. The example of the list is here

[Fh-Ndiritu]

The cross is for closing the player. I bet is should use the whole word there. I'll add some loading status info here and possibly for all the NFTs so that the user doesn't see a blank page at first.

And yes, I actually started with the mobile UI design so it's fully responsive across all devices.

[fyziktom]

prozatím uzavírám tuto issue. Demo funguje již delší dobu a je k dispozici na oficiální doméně coruzant: https://nft.coruzant.com

Je připravovaná další feature, která bude v rámci tohoto dema, ale na to se otevře samostatná issue.